/* =============================================
   SUMPOOJ TECHNOLOGIES – DESIGN SYSTEM v2
   ============================================= */

/* ── Variables ── */
:root {
  --primary:        #2563eb;
  --primary-dark:   #1d4ed8;
  --primary-light:  #eff6ff;
  --accent:         #f97316;
  --accent-dark:    #ea6c00;
  --purple:         #7c3aed;
  --dark:           #0f172a;
  --dark-2:         #1e293b;
  --dark-3:         #334155;
  --text:           #334155;
  --text-muted:     #64748b;
  --text-light:     #94a3b8;
  --surface:        #ffffff;
  --surface-alt:    #f8fafc;
  --border:         #e2e8f0;
  --border-light:   #f1f5f9;
  --gradient-main:  linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
  --gradient-hero:  linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #0f172a 100%);
  --gradient-accent: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  --shadow-xs:  0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 6px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.04);
  --shadow-xl:  0 20px 30px rgba(0,0,0,.12), 0 8px 10px rgba(0,0,0,.05);
  --shadow-glow: 0 0 40px rgba(37,99,235,.15);
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --transition: all .3s cubic-bezier(.4,0,.2,1);
  --transition-fast: all .15s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:1rem; line-height:1.7; color:var(--text); background:var(--surface); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,h5,h6 { font-family:'Plus Jakarta Sans','Inter',sans-serif; font-weight:700; line-height:1.25; color:var(--dark); letter-spacing:-.01em; }
a { color:var(--primary); text-decoration:none; transition:var(--transition-fast); }
a:hover { color:var(--primary-dark); }
img { max-width:100%; height:auto; }

.text-gradient { background:var(--gradient-main); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.text-accent { color:var(--accent) !important; }
.section { padding:88px 0; }
.section-title { margin-bottom:52px; }
.section-title h2 { font-size:clamp(1.75rem,4vw,2.5rem); margin-bottom:12px; letter-spacing:-.02em; }
.section-title .subtitle { display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); background:var(--primary-light); padding:5px 16px; border-radius:100px; margin-bottom:14px; }

.btn-primary-custom { display:inline-flex; align-items:center; gap:8px; padding:13px 30px; font-size:.9375rem; font-weight:600; color:#fff; background:var(--gradient-main); border:none; border-radius:var(--radius-md); cursor:pointer; transition:var(--transition); box-shadow:0 4px 15px rgba(37,99,235,.35); }
.btn-primary-custom:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(37,99,235,.5); color:#fff; }
.btn-primary-custom:active { transform:translateY(0); box-shadow:0 2px 10px rgba(37,99,235,.3); }
.btn-outline-custom { display:inline-flex; align-items:center; gap:8px; padding:12px 30px; font-size:.9375rem; font-weight:600; color:#fff; background:transparent; border:2px solid rgba(255,255,255,.3); border-radius:var(--radius-md); cursor:pointer; transition:var(--transition); backdrop-filter:blur(4px); }
.btn-outline-custom:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.7); color:#fff; transform:translateY(-2px); }
.btn-outline-custom:active { transform:translateY(0); }
.btn-accent { display:inline-flex; align-items:center; gap:8px; padding:13px 30px; font-size:.9375rem; font-weight:600; color:#fff; background:var(--gradient-accent); border:none; border-radius:var(--radius-md); cursor:pointer; transition:var(--transition); box-shadow:0 4px 15px rgba(249,115,22,.35); }
.btn-accent:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(249,115,22,.5); color:#fff; }
.btn-accent:active { transform:translateY(0); }

/* Page Hero Banner */
.page-hero { background:var(--gradient-hero); padding:72px 0 60px; position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat; }
.page-hero::after { content:''; position:absolute; width:400px; height:400px; border-radius:50%; background:rgba(37,99,235,.12); top:-150px; right:-100px; filter:blur(80px); pointer-events:none; }
.page-hero h1 { font-size:clamp(2rem,5vw,3rem); color:#fff; margin:0; letter-spacing:-.02em; }
.breadcrumb-nav { display:flex; align-items:center; gap:8px; }
.breadcrumb-nav a,.breadcrumb-nav span { color:rgba(255,255,255,.7); font-size:.875rem; }
.breadcrumb-nav a:hover { color:#fff; }
.breadcrumb-nav .separator { color:rgba(255,255,255,.4); }
.breadcrumb-nav .current { color:var(--accent); font-weight:600; }

/* ═══ HEADER ═══ */
#site-header { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border); transition:box-shadow .3s; }
#site-header.scrolled { box-shadow:var(--shadow-lg); }
.navbar-brand img { height:48px; width:auto; }
.nav-link { font-size:.9rem; font-weight:500; color:var(--dark-3) !important; padding:.5rem .9rem !important; border-radius:var(--radius-sm); transition:var(--transition-fast); position:relative; }
.nav-link::after { content:''; position:absolute; bottom:2px; left:.9rem; right:.9rem; height:2px; background:var(--gradient-main); border-radius:2px; transform:scaleX(0); transition:transform .25s ease; }
.nav-link:hover::after,.nav-link.active::after { transform:scaleX(1); }
.nav-link:hover,.nav-link.active { color:var(--primary) !important; background:var(--primary-light); }
.header-cta-btn { font-size:.875rem; font-weight:600; padding:10px 24px; background:var(--gradient-main); color:#fff !important; border-radius:var(--radius-md); border:none; box-shadow:0 2px 12px rgba(37,99,235,.3); transition:var(--transition); }
.header-cta-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,99,235,.45); color:#fff !important; }
.header-cta-btn::after { display:none !important; }
.nav-item.dropdown .dropdown-menu { border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); padding:8px; min-width:200px; }
.dropdown-item { border-radius:var(--radius-sm); font-size:.875rem; font-weight:500; color:var(--text); padding:8px 14px; transition:var(--transition-fast); }
.dropdown-item:hover { background:var(--primary-light); color:var(--primary); }

/* ═══ HERO ═══ */
.hero-section { min-height:100vh; display:flex; align-items:center; background:var(--gradient-hero); position:relative; overflow:hidden; }
.hero-blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:.18; animation:blobFloat 8s ease-in-out infinite; }
.hero-blob-1 { width:500px; height:500px; background:#2563eb; top:-100px; right:-100px; animation-delay:0s; }
.hero-blob-2 { width:350px; height:350px; background:#7c3aed; bottom:-80px; left:10%; animation-delay:3s; }
.hero-blob-3 { width:250px; height:250px; background:#f97316; top:40%; right:30%; opacity:.1; animation-delay:5s; }
@keyframes blobFloat { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(30px,-30px) scale(1.05); } }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:60px 60px; }
.hero-content { position:relative; z-index:1; padding:90px 0 80px; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(37,99,235,.25); border:1px solid rgba(37,99,235,.4); color:#93c5fd; font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:6px 16px; border-radius:100px; margin-bottom:24px; }
.hero-badge .dot { width:6px; height:6px; background:#3b82f6; border-radius:50%; animation:pulseDot 2s infinite; }
@keyframes pulseDot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(1.5); } }
.hero-title { font-size:clamp(2.5rem,6vw,4rem); font-weight:800; color:#fff; line-height:1.1; margin-bottom:24px; letter-spacing:-.03em; }
.hero-title .accent-line { display:block; background:linear-gradient(90deg,#f97316,#ef4444); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-desc { font-size:1.1rem; color:rgba(255,255,255,.7); line-height:1.8; max-width:540px; margin-bottom:40px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:48px; }
.hero-stats { display:flex; flex-wrap:wrap; gap:36px; padding-top:36px; border-top:1px solid rgba(255,255,255,.1); }
.hero-stat-value { font-size:2rem; font-weight:800; color:#fff; line-height:1; letter-spacing:-.02em; }
.hero-stat-label { font-size:.78rem; color:rgba(255,255,255,.5); margin-top:6px; letter-spacing:.02em; }
.hero-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(20px); border-radius:var(--radius-xl); padding:32px; position:relative; box-shadow:0 8px 40px rgba(0,0,0,.2), var(--shadow-glow); }
.hero-card-title { font-size:1.15rem; font-weight:700; color:#fff; margin-bottom:20px; }
.hero-feature-item { display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.hero-feature-item:last-child { border-bottom:none; }
.hero-feature-icon { width:42px; height:42px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.hero-feature-text { color:rgba(255,255,255,.8); font-size:.9rem; }
.hero-feature-text strong { display:block; color:#fff; font-weight:600; margin-bottom:2px; }
.floating-chip { position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); backdrop-filter:blur(10px); border-radius:100px; padding:7px 16px; font-size:.8rem; color:rgba(255,255,255,.9); font-weight:500; white-space:nowrap; animation:chipFloat 6s ease-in-out infinite; z-index:2; display:inline-flex; align-items:center; }
.chip-1 { top:-18px; right:24px; animation-delay:0s; }
.chip-2 { bottom:-18px; left:24px; animation-delay:2s; }
@keyframes chipFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }

/* ═══ STATS RIBBON ═══ */
.stats-ribbon { background:var(--gradient-main); padding:36px 0; }
.stats-ribbon .stat-item { text-align:center; padding:0 24px; border-right:1px solid rgba(255,255,255,.2); }
.stats-ribbon .stat-item:last-child { border-right:none; }
.stats-ribbon .stat-number { font-size:2.25rem; font-weight:800; color:#fff; line-height:1; display:block; letter-spacing:-.02em; }
.stats-ribbon .stat-label { font-size:.8rem; color:rgba(255,255,255,.7); margin-top:6px; letter-spacing:.02em; }

/* ═══ SERVICE CARDS ═══ */
.service-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:34px 28px; height:100%; position:relative; overflow:hidden; transition:var(--transition); }
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient-main); transform:scaleX(0); transform-origin:left; transition:transform .4s ease; }
.service-card:hover { border-color:transparent; box-shadow:var(--shadow-xl), var(--shadow-glow); transform:translateY(-6px); }
.service-card:hover::before { transform:scaleX(1); }
.service-icon-wrap { width:64px; height:64px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:22px; transition:var(--transition); }
.service-card:hover .service-icon-wrap { transform:scale(1.1) rotate(-3deg); }
.service-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:10px; color:var(--dark); letter-spacing:-.01em; }
.service-card p { font-size:.9rem; color:var(--text-muted); line-height:1.7; margin:0; }
.service-card .learn-more { display:inline-flex; align-items:center; gap:6px; font-size:.875rem; font-weight:600; color:var(--primary); margin-top:16px; transition:var(--transition-fast); }
.service-card .learn-more i { font-size:.8rem; transition:transform .2s; }
.service-card:hover .learn-more i { transform:translateX(4px); }
.icon-blue { background:#eff6ff; color:#2563eb; } .icon-purple { background:#f5f3ff; color:#7c3aed; } .icon-orange { background:#fff7ed; color:#f97316; } .icon-green { background:#f0fdf4; color:#16a34a; } .icon-red { background:#fef2f2; color:#dc2626; } .icon-teal { background:#f0fdfa; color:#0d9488; }

/* ═══ ABOUT ═══ */
.about-image-wrap { position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-xl); }
.about-image-wrap img { width:100%; height:480px; object-fit:cover; border-radius:var(--radius-xl); }
.about-badge { position:absolute; bottom:24px; left:24px; background:var(--gradient-main); color:#fff; padding:14px 20px; border-radius:var(--radius-md); font-size:.875rem; font-weight:600; box-shadow:var(--shadow-lg); }
.about-badge .big { font-size:1.5rem; font-weight:800; display:block; }
.check-list { list-style:none; padding:0; margin:0; }
.check-list li { display:flex; align-items:flex-start; gap:12px; padding:10px 0; font-size:.9375rem; color:var(--text); border-bottom:1px solid var(--border-light); }
.check-list li:last-child { border-bottom:none; }
.check-list .ci { width:22px; height:22px; background:#dcfce7; color:#16a34a; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.7rem; flex-shrink:0; margin-top:2px; }

/* ═══ WHY CHOOSE US ═══ */
.why-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px 24px; height:100%; text-align:center; transition:var(--transition); }
.why-card:hover { box-shadow:var(--shadow-xl), var(--shadow-glow); transform:translateY(-5px); border-color:var(--primary); }
.why-icon { width:68px; height:68px; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 20px; background:var(--gradient-main); color:#fff; box-shadow:0 6px 20px rgba(37,99,235,.3); transition:var(--transition); }
.why-card:hover .why-icon { transform:scale(1.1) rotate(5deg); box-shadow:0 8px 28px rgba(37,99,235,.4); }
.why-card h4 { font-size:1.1rem; font-weight:700; margin-bottom:10px; letter-spacing:-.01em; }
.why-card p { font-size:.9rem; color:var(--text-muted); margin:0; line-height:1.65; }

/* ═══ TECH MARQUEE ═══ */
.tech-marquee { overflow:hidden; padding:20px 0; }
.tech-track { display:flex; gap:16px; animation:marqueeScroll 30s linear infinite; width:max-content; }
.tech-track:hover { animation-play-state:paused; }
@keyframes marqueeScroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
.tech-tag { display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:100px; padding:10px 20px; font-size:.875rem; font-weight:500; color:var(--text); white-space:nowrap; transition:var(--transition-fast); }
.tech-tag:hover { border-color:var(--primary); color:var(--primary); box-shadow:var(--shadow-sm); transform:translateY(-1px); }

/* ═══ CLIENTS ═══ */
.client-logo-wrap { padding:24px; border:1px solid var(--border); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; height:100px; transition:var(--transition); background:var(--surface); }
.client-logo-wrap img { max-height:50px; max-width:140px; object-fit:contain; filter:grayscale(100%); opacity:.6; transition:var(--transition); }
.client-logo-wrap:hover { box-shadow:var(--shadow-lg), var(--shadow-glow); border-color:var(--primary); transform:translateY(-3px); }
.client-logo-wrap:hover img { filter:none; opacity:1; }

/* ═══ CTA ═══ */
.cta-section { background:var(--gradient-hero); position:relative; overflow:hidden; padding:96px 0; }
.cta-section::before { content:''; position:absolute; width:500px; height:500px; border-radius:50%; background:rgba(124,58,237,.12); bottom:-200px; left:-150px; filter:blur(80px); }
.cta-section::after { content:''; position:absolute; width:600px; height:600px; border-radius:50%; background:rgba(37,99,235,.15); top:-200px; right:-200px; filter:blur(80px); }
.cta-section h2 { font-size:clamp(1.75rem,4vw,2.75rem); color:#fff; letter-spacing:-.02em; }
.cta-section p { color:rgba(255,255,255,.7); font-size:1.1rem; line-height:1.75; }

/* ═══ CONTACT ═══ */
.contact-info-card { background:var(--gradient-hero); border-radius:var(--radius-xl); padding:40px 32px; height:100%; position:relative; overflow:hidden; }
.contact-info-card::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(37,99,235,.25); bottom:-100px; right:-80px; filter:blur(60px); }
.contact-info-card h3 { color:#fff; font-size:1.5rem; margin-bottom:8px; }
.contact-info-card>p { color:rgba(255,255,255,.7); margin-bottom:32px; }
.contact-detail { display:flex; align-items:flex-start; gap:14px; margin-bottom:22px; position:relative; z-index:1; }
.contact-detail-icon { width:44px; height:44px; border-radius:var(--radius-md); background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem; flex-shrink:0; }
.contact-detail-text { color:rgba(255,255,255,.85); font-size:.9rem; }
.contact-detail-text strong { display:block; color:#fff; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px; }
.contact-detail-text a { color:rgba(255,255,255,.85); }
.contact-detail-text a:hover { color:#fff; }
.contact-social { display:flex; gap:10px; margin-top:32px; position:relative; z-index:1; }
.social-btn { width:40px; height:40px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.8); font-size:1rem; transition:var(--transition); }
.social-btn:hover { background:rgba(255,255,255,.2); color:#fff; transform:translateY(-2px); }
.contact-form-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:40px 36px; box-shadow:var(--shadow-xl), 0 0 60px rgba(37,99,235,.06); }
.contact-form-wrap h3 { font-size:1.4rem; margin-bottom:6px; }
.contact-form-wrap>p { color:var(--text-muted); margin-bottom:28px; font-size:.9rem; }
.form-label-custom { font-size:.8125rem; font-weight:600; color:var(--dark); margin-bottom:6px; display:block; }
.required-star { color:#ef4444; margin-left:2px; }
.form-control-custom { width:100%; padding:11px 14px; font-size:.9375rem; color:var(--dark); background:var(--surface-alt); border:1.5px solid var(--border); border-radius:var(--radius-md); transition:var(--transition-fast); outline:none; font-family:inherit; }
.form-control-custom:focus { background:var(--surface); border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.form-control-custom.is-invalid { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.1); }
.form-control-custom.is-valid { border-color:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.1); }
.field-error { color:#ef4444; font-size:.8rem; margin-top:5px; min-height:1.2em; }

/* ═══ PORTFOLIO ═══ */
.portfolio-filter-btns { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:40px; }
.filter-btn { padding:8px 20px; font-size:.875rem; font-weight:600; color:var(--text-muted); background:var(--surface-alt); border:1.5px solid var(--border); border-radius:100px; cursor:pointer; transition:var(--transition-fast); }
.filter-btn.active,.filter-btn:hover { background:var(--gradient-main); color:#fff; border-color:transparent; box-shadow:0 4px 12px rgba(37,99,235,.3); }
.portfolio-card { border-radius:var(--radius-lg); overflow:hidden; position:relative; background:var(--dark); box-shadow:var(--shadow-md); transition:var(--transition); }
.portfolio-card:hover { box-shadow:var(--shadow-xl), 0 0 30px rgba(37,99,235,.12); transform:translateY(-6px); }
.portfolio-card img { width:100%; height:260px; object-fit:cover; transition:transform .5s ease; display:block; }
.portfolio-card:hover img { transform:scale(1.08); }
.portfolio-info-bar { background:var(--dark-2); padding:16px 20px; position:relative; z-index:2; }
.portfolio-info-bar h5 { color:#fff; margin:0 0 4px; font-size:.95rem; font-weight:700; }
.portfolio-info-bar .portfolio-category { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); }
.portfolio-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(15,23,42,.95) 0%,rgba(15,23,42,.7) 50%,rgba(15,23,42,.3) 100%); padding:24px; display:flex; flex-direction:column; justify-content:flex-end; opacity:0; transition:opacity .35s ease; z-index:3; }
.portfolio-card:hover .portfolio-overlay { opacity:1; }
.portfolio-overlay h5 { color:#fff; margin:0 0 6px; font-size:1.1rem; font-weight:700; }
.portfolio-overlay p { color:rgba(255,255,255,.75); font-size:.85rem; margin:0 0 12px; line-height:1.55; }
.portfolio-tech-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:14px; }
.portfolio-tech-tags span { font-size:.7rem; font-weight:600; padding:3px 10px; border-radius:100px; background:rgba(255,255,255,.12); color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.15); white-space:nowrap; }
.portfolio-actions { display:flex; gap:8px; }
.portfolio-action-btn { display:inline-flex; align-items:center; gap:5px; font-size:.8rem; font-weight:600; padding:7px 16px; border-radius:var(--radius-sm); border:none; cursor:pointer; transition:var(--transition-fast); text-decoration:none; }
.portfolio-action-btn.btn-gh { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2); }
.portfolio-action-btn.btn-gh:hover { background:rgba(255,255,255,.25); color:#fff; }
.portfolio-action-btn.btn-view { background:var(--gradient-main); color:#fff; box-shadow:0 2px 10px rgba(37,99,235,.3); }
.portfolio-action-btn.btn-view:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(37,99,235,.4); color:#fff; }
.portfolio-count { text-align:center; margin-bottom:32px; }
.portfolio-count span { font-size:.875rem; color:var(--text-muted); font-weight:500; }

/* ═══ FOOTER ═══ */
#site-footer { background:var(--dark); color:rgba(255,255,255,.7); }
.footer-top { padding:80px 0 52px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-brand img { height:44px; margin-bottom:16px; }
.footer-tagline { font-size:.9rem; color:rgba(255,255,255,.5); line-height:1.7; max-width:300px; }
.footer-heading { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.4); margin-bottom:22px; }
.footer-links { list-style:none; padding:0; margin:0; }
.footer-links li { margin-bottom:10px; }
.footer-links a { font-size:.9rem; color:rgba(255,255,255,.6); transition:var(--transition-fast); display:inline-flex; align-items:center; gap:6px; }
.footer-links a:hover { color:#fff; padding-left:4px; }
.footer-contact-item { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.footer-contact-item i { color:var(--accent); font-size:1rem; margin-top:2px; flex-shrink:0; }
.footer-contact-item a,.footer-contact-item span { font-size:.9rem; color:rgba(255,255,255,.65); }
.footer-contact-item a:hover { color:#fff; }
.footer-social { display:flex; gap:10px; margin-top:20px; }
.footer-social-btn { width:38px; height:38px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); font-size:.95rem; transition:var(--transition); }
.footer-social-btn:hover { background:var(--gradient-main); border-color:transparent; color:#fff; transform:translateY(-2px); box-shadow:0 4px 12px rgba(37,99,235,.3); }
.footer-bottom { padding:20px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-bottom p { margin:0; font-size:.85rem; color:rgba(255,255,255,.35); }
.footer-bottom a { color:rgba(255,255,255,.5); font-size:.85rem; }
.footer-bottom a:hover { color:#fff; }

/* ═══ SERVICE DETAIL ═══ */
.sd-intro { font-size:1.1rem; line-height:1.85; color:var(--text); }
.sd-feature-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 24px; height:100%; text-align:center; transition:var(--transition); }
.sd-feature-card:hover { box-shadow:var(--shadow-xl); transform:translateY(-4px); border-color:var(--primary); }
.sd-feature-icon { width:64px; height:64px; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin:0 auto 16px; transition:var(--transition); }
.sd-feature-card:hover .sd-feature-icon { transform:scale(1.1) rotate(5deg); }
.sd-feature-card h4 { font-size:1rem; font-weight:700; margin-bottom:8px; }
.sd-feature-card p { font-size:.875rem; color:var(--text-muted); margin:0; line-height:1.65; }

.sd-process-step { display:flex; gap:24px; position:relative; padding-bottom:40px; }
.sd-process-step:last-child { padding-bottom:0; }
.sd-process-step:not(:last-child)::after { content:''; position:absolute; left:27px; top:60px; bottom:0; width:2px; background:linear-gradient(to bottom,var(--primary),var(--border)); }
.sd-step-num { width:56px; height:56px; border-radius:50%; background:var(--gradient-main); color:#fff; font-size:1.15rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 15px rgba(37,99,235,.3); position:relative; z-index:1; }
.sd-step-body h4 { font-size:1.05rem; font-weight:700; margin-bottom:6px; }
.sd-step-body p { font-size:.9rem; color:var(--text-muted); margin:0; line-height:1.7; }

.sd-benefit-item { display:flex; align-items:flex-start; gap:14px; padding:18px 0; border-bottom:1px solid var(--border-light); }
.sd-benefit-item:last-child { border-bottom:none; }
.sd-benefit-icon { width:40px; height:40px; border-radius:var(--radius-md); background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.sd-benefit-item h5 { font-size:.95rem; font-weight:700; margin-bottom:4px; }
.sd-benefit-item p { font-size:.875rem; color:var(--text-muted); margin:0; line-height:1.6; }

.sd-tech-badge { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; background:var(--surface-alt); border:1px solid var(--border); border-radius:100px; font-size:.875rem; font-weight:500; color:var(--text); margin:4px; transition:var(--transition-fast); }
.sd-tech-badge:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }

.sd-highlight-box { background:var(--primary-light); border-left:4px solid var(--primary); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:20px 24px; margin:24px 0; }
.sd-highlight-box p { margin:0; font-size:.95rem; color:var(--text); line-height:1.7; }

/* ═══ SCROLL TOP ═══ */
#scrollTop { position:fixed; bottom:28px; right:28px; width:44px; height:44px; background:var(--gradient-main); color:#fff; border:none; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1.1rem; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:var(--transition); box-shadow:0 4px 15px rgba(37,99,235,.4); z-index:999; }
#scrollTop.visible { opacity:1; visibility:visible; transform:translateY(0); }
#scrollTop:hover { transform:translateY(-3px); }

/* ═══ RESPONSIVE ═══ */
@media (max-width:991px) {
  .section { padding:64px 0; } .hero-section { min-height:auto; } .hero-content { padding:60px 0 40px; }
  .contact-form-wrap { padding:28px 20px; } .contact-info-card { padding:32px 24px; }
  .cta-section { padding:72px 0; }
}
@media (max-width:767px) {
  .section { padding:48px 0; } .hero-title { font-size:2.25rem; } .cta-section { padding:56px 0; }
  .stats-ribbon .stat-item { border-right:none; border-bottom:1px solid rgba(255,255,255,.15); padding:12px 0; }
  .stats-ribbon .stat-item:last-child { border-bottom:none; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .page-hero { padding:48px 0 40px; }
}

/* ═══ PREMIUM UTILITIES ═══ */
.text-balance { text-wrap:balance; }
.section-lead { font-size:1.05rem; color:var(--text-muted); line-height:1.75; max-width:620px; margin-left:auto; margin-right:auto; }

/* Fade-in on page load */
@keyframes fadeInUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.page-hero h1 { animation:fadeInUp .6s ease both; }
.page-hero .breadcrumb-nav { animation:fadeInUp .6s ease .15s both; }

/* Service badge pill */
.service-badge { font-size:.75rem; font-weight:600; padding:4px 12px; border-radius:100px; display:inline-block; }

/* Smooth focus ring */
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

/* Selection color */
::selection { background:rgba(37,99,235,.15); color:var(--dark); }