/* ============================================================
   OPTWAVES - GLOBAL STYLES
   Premium Futuristic Multi-Page Website
   Fonts loaded via <link> in each HTML page (Google Fonts CDN)
   ============================================================ */

:root {
  --bg-primary:   #050508;
  --bg-secondary: #0a0a0f;
  --bg-tertiary:  #0e0e18;
  --bg-card:      #0d0d1a;
  --accent-blue:   #00d4ff;
  --accent-purple: #7c3aed;
  --accent-green:  #00ff88;
  --accent-pink:   #f472b6;
  --accent-orange: #fb923c;
  --text-primary:   #ffffff;
  --text-secondary: rgba(255,255,255,0.65);
  --text-muted:     rgba(255,255,255,0.35);
  --glass-bg:          rgba(255,255,255,0.03);
  --glass-bg-hover:    rgba(255,255,255,0.07);
  --glass-border:      rgba(255,255,255,0.08);
  --glass-border-hover:rgba(255,255,255,0.20);
  --gradient-primary:  linear-gradient(135deg,#00d4ff,#7c3aed);
  --gradient-secondary:linear-gradient(135deg,#7c3aed,#f472b6);
  --gradient-green:    linear-gradient(135deg,#00ff88,#00d4ff);
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --section-pad: 120px 0;
  --container:   1280px;
  --ease-out:   cubic-bezier(0.22,1,0.36,1);
  --ease-inout: cubic-bezier(0.4,0,0.2,1);
  --z-bg:     -1;
  --z-base:    1;
  --z-nav:   100;
  --z-cursor:300;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:auto}
body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden;cursor:none;}
::selection{background:rgba(124,58,237,.4);color:#fff}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{cursor:none;border:none;background:none;font-family:inherit;color:inherit}
ul{list-style:none}

::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:var(--accent-purple);border-radius:2px}

.cursor{position:fixed;top:0;left:0;width:10px;height:10px;background:var(--accent-blue);border-radius:50%;pointer-events:none;z-index:var(--z-cursor);transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s;mix-blend-mode:difference;}
.cursor-follower{position:fixed;top:0;left:0;width:38px;height:38px;border:1px solid rgba(0,212,255,.45);border-radius:50%;pointer-events:none;z-index:var(--z-cursor);transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s;}
.cursor.hovered{width:18px;height:18px;background:var(--accent-purple)}
.cursor-follower.hovered{width:56px;height:56px;border-color:rgba(124,58,237,.5)}

#webgl-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:var(--z-bg);pointer-events:none;}
.noise{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.container{max-width:var(--container);margin:0 auto;padding:0 40px}

.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:var(--z-nav);width:calc(100% - 48px);max-width:860px;padding:7px 14px 7px 10px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.06);backdrop-filter:blur(48px) saturate(200%) brightness(1.08);-webkit-backdrop-filter:blur(48px) saturate(200%) brightness(1.08);border-radius:50px;border:1px solid rgba(255,255,255,0.13);box-shadow:0 8px 40px rgba(0,0,0,0.30),0 2px 12px rgba(0,0,0,0.18),inset 0 1px 0 rgba(255,255,255,0.10);transition:all .4s var(--ease-inout);}
.nav.scrolled{background:rgba(255,255,255,0.095);border-color:rgba(255,255,255,0.18);box-shadow:0 16px 56px rgba(0,0,0,0.40),0 4px 20px rgba(0,0,0,0.22),inset 0 1px 0 rgba(255,255,255,0.14);}
.nav-logo{display:flex;align-items:center;overflow:hidden;border-radius:40px;padding:2px 8px 2px 2px;cursor:none;transition:background .3s;flex-shrink:0;}
.nav-logo:hover{background:#2c9df9 !important;}
.nav-logo-icon-wrap{width:36px;height:36px;border-radius:50%;flex-shrink:0;background:var(--gradient-primary);box-shadow:0 0 18px rgba(0,212,255,0.28),0 2px 8px rgba(0,0,0,0.20);display:flex;align-items:center;justify-content:center;transition:box-shadow .3s;animation:logo-glow 3s ease-in-out infinite;}
.nav-logo:hover .nav-logo-icon-wrap{box-shadow:0 0 32px rgba(0,212,255,0.60),0 4px 16px rgba(0,0,0,0.28);animation:none;}
.nav-logo-svg{width:28px;height:28px;display:block;}
.nav-logo-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.nav-logo-text{display:flex;align-items:center;overflow:hidden;max-width:0;margin-left:0;padding-right:0;transition:max-width .55s var(--ease-out),margin-left .45s var(--ease-out),padding-right .45s var(--ease-out);}
.nav-logo:hover .nav-logo-text{max-width:140px;margin-left:10px;padding-right:4px;}
.nav-logo-text>span{font-family:var(--font-display);font-size:13px;font-weight:800;letter-spacing:.12em;display:inline-block;flex-shrink:0;opacity:0;transform:translateY(6px) scale(0.82);transition:opacity .22s ease,transform .22s cubic-bezier(0.34,1.56,0.64,1);color:#fff;}
.nav-logo:hover .nav-logo-text>span:nth-child(1){opacity:1;transform:none;transition-delay:.03s}
.nav-logo:hover .nav-logo-text>span:nth-child(2){opacity:1;transform:none;transition-delay:.06s}
.nav-logo:hover .nav-logo-text>span:nth-child(3){opacity:1;transform:none;transition-delay:.09s}
.nav-logo:hover .nav-logo-text>span:nth-child(4){opacity:1;transform:none;transition-delay:.12s}
.nav-logo:hover .nav-logo-text>span:nth-child(5){opacity:1;transform:none;transition-delay:.15s}
.nav-logo:hover .nav-logo-text>span:nth-child(6){opacity:1;transform:none;transition-delay:.18s}
.nav-logo:hover .nav-logo-text>span:nth-child(7){opacity:1;transform:none;transition-delay:.21s}
.nav-logo:hover .nav-logo-text>span:nth-child(8){opacity:1;transform:none;transition-delay:.24s}
.footer .nav-logo .nav-logo-text{max-width:140px;margin-left:10px;padding-right:4px;}
.footer .nav-logo .nav-logo-text>span{opacity:1;transform:none;}
.footer .nav-logo{overflow:visible;padding:0;}
.footer-logo{display:inline-block;margin-bottom:12px;}
.footer-logo-img{height:40px;width:auto;display:block;object-fit:contain;}
@keyframes logo-glow{0%,100%{box-shadow:0 0 16px rgba(0,212,255,0.25),0 2px 8px rgba(0,0,0,0.18)}50%{box-shadow:0 0 28px rgba(0,212,255,0.48),0 2px 8px rgba(0,0,0,0.18)}}
.nav-links{display:flex;align-items:center;gap:18px;}
.nav-links a{font-size:13px;font-weight:500;color:var(--text-secondary);letter-spacing:.3px;position:relative;transition:color .2s;}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--gradient-primary);transition:width .3s var(--ease-out);}
.nav-links a:hover,.nav-links a.active{color:var(--text-primary)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:6px;cursor:none;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text-primary);border-radius:2px;transition:all .3s;}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99;}
.mobile-nav{position:fixed;top:0;right:-100%;width:300px;height:100dvh;background:rgba(8,8,13,.97);backdrop-filter:blur(30px);border-left:1px solid var(--glass-border);z-index:101;padding:90px 36px 40px;transition:right .45s var(--ease-out);display:flex;flex-direction:column;gap:8px;}
.mobile-nav.open{right:0}
.mobile-nav a{display:block;padding:12px 0;font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--text-secondary);border-bottom:1px solid var(--glass-border);transition:color .2s;}
.mobile-nav a:hover{color:var(--accent-blue)}
.mobile-nav-cta{margin-top:24px}

.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:8px;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:.4px;cursor:none;transition:all .35s var(--ease-out);position:relative;overflow:hidden;}
.btn::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.1);transform:translateX(-101%);transition:transform .35s var(--ease-out);}
.btn:hover::before{transform:translateX(0)}
.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:0 0 28px rgba(0,212,255,.18);}
.btn-primary:hover{box-shadow:0 0 48px rgba(0,212,255,.38);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--text-primary);border:1px solid var(--glass-border);}
.btn-ghost:hover{border-color:var(--glass-border-hover);background:var(--glass-bg-hover);transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--accent-blue);border:1px solid rgba(0,212,255,.4);}
.btn-outline:hover{background:rgba(0,212,255,.08);box-shadow:0 0 18px rgba(0,212,255,.2);}
.btn-sm{padding:9px 18px;font-size:13px}
.nav-actions .btn-sm{border-radius:50px;}
.btn-lg{padding:17px 34px;font-size:16px;border-radius:10px}
.btn-full{width:100%;justify-content:center}

section{padding:var(--section-pad);position:relative}
.section-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--accent-blue);letter-spacing:3px;text-transform:uppercase;margin-bottom:20px;}
.section-tag::before{content:'';width:20px;height:1px;background:var(--accent-blue);}
.section-title{font-family:var(--font-display);font-size:clamp(24px,2.8vw,40px);font-weight:700;line-height:1.2;letter-spacing:-0.5px;margin-bottom:20px;}
.section-sub{font-size:17px;color:var(--text-secondary);max-width:580px;line-height:1.75;}
.gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.gradient-text-green{background:var(--gradient-green);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

.glass-card{background:var(--glass-bg);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:20px;transition:all .4s var(--ease-out);}
.glass-card:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-hover);box-shadow:0 24px 56px rgba(0,0,0,.35),0 0 28px rgba(0,212,255,.05);}

.particles-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.pt{position:absolute;border-radius:50%;animation:pt-rise linear infinite;}
@keyframes pt-rise{0%{transform:translateY(110vh) rotate(0deg);opacity:0}8%{opacity:1}90%{opacity:.7}100%{transform:translateY(-80px) rotate(360deg);opacity:0}}

.hero{min-height:100vh;display:flex;align-items:center;padding:130px 0 80px;position:relative;overflow:hidden;}
.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:180px;background:linear-gradient(to bottom,transparent,rgba(0,212,255,.04) 40%,rgba(124,58,237,.06) 70%,rgba(5,5,8,.0));pointer-events:none;z-index:0;}
.hero-bg-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 65% 50%,rgba(124,58,237,.14) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 20% 30%,rgba(0,212,255,.07) 0%,transparent 60%);}
.hero-grid{max-width:var(--container);margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:1;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:100px;font-size:12px;color:var(--text-secondary);margin-bottom:28px;backdrop-filter:blur(10px);}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-green);animation:badge-pulse 2s ease-in-out infinite;}
@keyframes badge-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.6)}}
@keyframes svc-float{0%{transform:translateY(0px)}100%{transform:translateY(-10px)}}
.hero-title{font-family:var(--font-display);font-size:clamp(28px,3.4vw,52px);font-weight:700;line-height:1.2;letter-spacing:-1px;margin-bottom:22px;}
.hero-sub{font-size:17px;color:var(--text-secondary);line-height:1.75;margin-bottom:36px;max-width:460px;}
.hero-btns{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero-stats{display:flex;gap:36px;margin-top:56px;flex-wrap:wrap}
.stat-val{font-family:var(--font-display);font-size:34px;font-weight:800;letter-spacing:-1px;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;}
.stat-lbl{font-size:12px;color:var(--text-muted);margin-top:4px}

.geo-scene{position:relative;width:100%;height:100%;min-height:500px;}
.geo-canvas{display:block;width:100%;height:100%;}
.hero-img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;background:none;}
.iso-canvas{display:block;width:100%;height:100%;min-height:500px;background:transparent;}



.srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:60px;}
.srv-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:20px;padding:34px;cursor:none;position:relative;overflow:hidden;transition:all .4s var(--ease-out);}
.srv-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient-primary);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out);}
.srv-card:hover::before{transform:scaleX(1)}
.srv-card:hover{background:var(--glass-bg-hover);border-color:rgba(0,212,255,.18);transform:translateY(-8px);box-shadow:0 28px 56px rgba(0,0,0,.4),0 0 28px rgba(0,212,255,.08);}
.srv-icon{width:52px;height:52px;background:var(--gradient-primary);border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:22px;box-shadow:0 0 24px rgba(0,212,255,.2);}
.srv-title{font-family:var(--font-display);font-size:19px;font-weight:700;margin-bottom:10px;letter-spacing:-.4px;}
.srv-desc{font-size:14px;color:var(--text-secondary);line-height:1.7}
.srv-arrow{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent-blue);margin-top:18px;transition:gap .2s;}
.srv-arrow:hover{gap:10px}

.port-scroll{margin-top:60px;overflow:hidden}
.port-track{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:16px;scroll-snap-type:x mandatory;}
.port-track::-webkit-scrollbar{display:none}
#works-section{overflow:hidden}
#works-section .port-track{overflow:visible;will-change:transform;scroll-snap-type:none;flex-shrink:0;}
#works-section .port-scroll{overflow:visible;}
.port-card{flex:0 0 400px;height:260px;border-radius:20px;overflow:hidden;position:relative;cursor:none;scroll-snap-align:start;transition:all .4s var(--ease-out);}
#works-section .port-card{scroll-snap-align:none;}
.port-card:hover{transform:translateY(-8px) scale(1.02)}
.port-card-bg{width:100%;height:100%;background-size:cover;background-position:center;transition:transform .7s var(--ease-out);}
.port-card:hover .port-card-bg{transform:scale(1.06)}
.port-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,8,.92) 0%,transparent 60%);opacity:0;transition:opacity .4s;}
.port-card:hover .port-card-overlay{opacity:1}
.port-card-info{position:absolute;bottom:0;left:0;right:0;padding:22px;transform:translateY(16px);opacity:0;transition:all .4s var(--ease-out);}
.port-card:hover .port-card-info{transform:translateY(0);opacity:1}
.port-card-title{font-family:var(--font-display);font-size:18px;font-weight:700;margin-bottom:4px;}
.port-card-cat{font-size:12px;color:var(--accent-blue);letter-spacing:1px;text-transform:uppercase}
.pc-1{background:linear-gradient(135deg,#0f0f20,#1a0a2e)}
.pc-2{background:linear-gradient(135deg,#0a0f20,#0a1f3a)}
.pc-3{background:linear-gradient(135deg,#0a1a10,#0f2a18)}
.pc-4{background:linear-gradient(135deg,#1a0a0a,#2a0f1a)}
.pc-5{background:linear-gradient(135deg,#10100a,#1e1a08)}
.pc-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);font-size:56px;opacity:.35;transition:all .4s;}
.port-card:hover .pc-icon{opacity:.5;transform:translate(-50%,-60%) scale(1.1)}

.marquee-wrap{padding:36px 0;overflow:hidden;border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);}
.marquee-track{display:flex;gap:52px;animation:marquee 22s linear infinite;width:max-content;}
.marquee-item{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:17px;font-weight:700;color:rgba(255,255,255,.18);white-space:nowrap;}
.marquee-dot{color:var(--accent-blue);font-size:6px}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.stats-band{padding:72px 0;border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center;}
.sn{font-family:var(--font-display);font-size:52px;font-weight:800;letter-spacing:-2px;line-height:1;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.sl{font-size:14px;color:var(--text-secondary);margin-top:8px}

.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:60px;}
.testi-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:20px;padding:30px;transition:all .4s var(--ease-out);}
.testi-card:hover{background:var(--glass-bg-hover);border-color:rgba(0,212,255,.14);transform:translateY(-4px);}
.testi-stars{color:var(--accent-orange);margin-bottom:16px;font-size:14px}
.testi-quote{font-size:14px;color:var(--text-secondary);line-height:1.8;margin-bottom:22px;position:relative;padding-top:20px;}
.testi-quote::before{content:'"';font-family:var(--font-display);font-size:56px;font-weight:800;color:var(--accent-blue);opacity:.25;position:absolute;top:-10px;left:-6px;line-height:1;}
.testi-author{display:flex;align-items:center;gap:12px}
.testi-av{width:42px;height:42px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:17px;}
.testi-name{font-weight:600;font-size:14px}
.testi-co{font-size:12px;color:var(--text-muted)}

.cta-section{padding:160px 0;text-align:center;position:relative;overflow:hidden;}
.cta-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(124,58,237,.18) 0%,rgba(0,212,255,.06) 50%,transparent 70%);}
.cta-title{font-family:var(--font-display);font-size:clamp(44px,5.5vw,90px);font-weight:800;letter-spacing:-3px;line-height:1.04;margin-bottom:28px;position:relative;z-index:1;color:#ffffff;}
.cta-sub{font-size:18px;color:var(--text-secondary);margin-bottom:44px;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.75;position:relative;z-index:1;}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1;}

.footer{padding:80px 0 36px;border-top:1px solid var(--glass-border);}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:56px;margin-bottom:56px;}
.footer-desc{font-size:14px;color:var(--text-secondary);line-height:1.75;margin:14px 0 22px;max-width:270px;}
.footer-social{display:flex;gap:10px}
.footer-soc-btn{width:38px;height:38px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:9px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);transition:all .25s;cursor:none;}
.footer-soc-btn svg{width:16px;height:16px;fill:currentColor;display:block;}
.footer-soc-btn:hover{background:var(--glass-bg-hover);border-color:var(--accent-blue);color:var(--accent-blue);}
.footer-col-ttl{font-family:var(--font-display);font-size:15px;font-weight:700;margin-bottom:18px;}
.footer-nav{display:flex;flex-direction:column;gap:11px}
.footer-nav a{font-size:14px;color:var(--text-secondary);transition:color .2s;}
.footer-nav a:hover{color:var(--accent-blue)}
.footer-btm{display:flex;align-items:center;justify-content:space-between;padding-top:36px;border-top:1px solid var(--glass-border);font-size:13px;color:var(--text-muted);}

.page-hero{min-height:56vh;display:flex;align-items:center;padding:160px 0 72px;position:relative;overflow:hidden;text-align:center;}
.page-hero-inner{max-width:var(--container);margin:0 auto;padding:0 40px;position:relative;z-index:1;}
.page-hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 70% at 50% 40%,rgba(124,58,237,.12) 0%,transparent 65%);}
.page-hero-title{font-family:var(--font-display);font-size:clamp(26px,3.2vw,48px);font-weight:700;letter-spacing:-1px;line-height:1.2;margin-bottom:22px;}
.page-hero-sub{font-size:17px;color:var(--text-secondary);max-width:580px;margin:0 auto;line-height:1.75;}

.timeline{position:relative;max-width:820px;margin:72px auto 0;}
.timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,var(--accent-blue) 20%,var(--accent-purple) 80%,transparent);transform:translateX(-50%);}
.tl-item{display:grid;grid-template-columns:1fr 52px 1fr;gap:22px;align-items:start;margin-bottom:52px;}
.tl-item:nth-child(even) .tl-content{order:3}
.tl-item:nth-child(even) .tl-empty{order:1}
.tl-dot{width:52px;height:52px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:18px;z-index:1;position:relative;box-shadow:0 0 20px rgba(0,212,255,.35);order:2;}
.tl-content{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;padding:26px;transition:all .4s var(--ease-out);}
.tl-content:hover{background:var(--glass-bg-hover);border-color:rgba(0,212,255,.2);transform:translateY(-4px);}
.tl-year{font-family:var(--font-mono);font-size:11px;color:var(--accent-blue);letter-spacing:2px;margin-bottom:7px;}
.tl-ttl{font-family:var(--font-display);font-size:17px;font-weight:700;margin-bottom:8px;}
.tl-txt{font-size:13px;color:var(--text-secondary);line-height:1.7}

.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:60px;}
.team-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:20px;padding:30px 22px;text-align:center;cursor:none;transition:all .4s var(--ease-out);}
.team-card:hover{background:var(--glass-bg-hover);border-color:rgba(0,212,255,.2);transform:translateY(-8px);box-shadow:0 28px 56px rgba(0,0,0,.4);}
.team-av{width:76px;height:76px;border-radius:50%;margin:0 auto 14px;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 0 20px rgba(0,212,255,.28);}
.team-name{font-family:var(--font-display);font-size:17px;font-weight:700;margin-bottom:5px}
.team-role{font-size:12px;color:var(--accent-blue);margin-bottom:12px}
.team-bio{font-size:13px;color:var(--text-secondary);line-height:1.65}

.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:60px;}
.mv-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:24px;padding:44px;position:relative;overflow:hidden;transition:all .4s var(--ease-out);}
.mv-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gradient-primary);}
.mv-card:hover{background:var(--glass-bg-hover);transform:translateY(-4px)}
.mv-icon{font-size:40px;margin-bottom:18px}
.mv-ttl{font-family:var(--font-display);font-size:24px;font-weight:700;margin-bottom:14px}
.mv-txt{font-size:15px;color:var(--text-secondary);line-height:1.8}

.svc-block{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;padding:80px 0;border-bottom:1px solid var(--glass-border);}
.svc-block:last-child{border-bottom:none}
.svc-block.flip .svc-visual{order:-1}
.svc-block-ttl{font-family:var(--font-display);font-size:clamp(28px,3.5vw,48px);font-weight:800;letter-spacing:-1.5px;line-height:1.1;margin-bottom:18px;}
.svc-block-txt{font-size:15px;color:var(--text-secondary);line-height:1.8;margin-bottom:28px;}
.svc-features{display:flex;flex-direction:column;gap:11px;margin-bottom:28px}
.svc-feat{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--text-secondary);}
.svc-feat::before{content:'→';color:var(--accent-blue);font-weight:700;flex-shrink:0;}
.mockup-win{background:rgba(12,12,22,.92);border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.5),0 0 56px rgba(0,212,255,.07);}
.mockup-tbar{display:flex;align-items:center;gap:7px;padding:13px 17px;background:rgba(255,255,255,.025);border-bottom:1px solid rgba(255,255,255,.06);}
.mockup-body{padding:22px;min-height:180px}
.code-line{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);line-height:2;}
.ck{color:var(--accent-purple)}.cs{color:var(--accent-green)}.cf{color:var(--accent-blue)}.cm{color:var(--text-muted);font-style:italic}

.tech-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:60px;}
.tech-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;padding:26px 18px;text-align:center;cursor:none;transition:all .4s var(--ease-out);position:relative;overflow:hidden;}
.tech-card::before{content:'';position:absolute;inset:0;background:var(--gradient-primary);opacity:0;transition:opacity .4s;border-radius:inherit;}
.tech-card:hover::before{opacity:.04}
.tech-card:hover{border-color:rgba(0,212,255,.28);transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.3),0 0 18px rgba(0,212,255,.09);}
.tech-ico{font-size:34px;margin-bottom:11px;display:block;position:relative;z-index:1}
.tech-nm{font-family:var(--font-display);font-size:14px;font-weight:600;position:relative;z-index:1}
.tech-cat{font-size:11px;color:var(--text-muted);margin-top:3px;position:relative;z-index:1}

.proc-steps{display:flex;flex-direction:column;margin-top:72px}
.proc-step{display:grid;grid-template-columns:80px 1fr auto;gap:36px;align-items:center;padding:52px 0;border-bottom:1px solid var(--glass-border);}
.proc-step:last-child{border-bottom:none}
.proc-num{font-family:var(--font-display);font-size:72px;font-weight:800;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);line-height:1;user-select:none;}
.proc-ttl{font-family:var(--font-display);font-size:30px;font-weight:700;letter-spacing:-1px;margin-bottom:10px;}
.proc-txt{font-size:15px;color:var(--text-secondary);line-height:1.75}
.proc-ico{font-size:44px;opacity:.7}

.jobs-list{display:flex;flex-direction:column;gap:14px;margin-top:60px}
.job-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;padding:26px 30px;display:flex;align-items:center;justify-content:space-between;cursor:none;transition:all .4s var(--ease-out);}
.job-card:hover{background:var(--glass-bg-hover);border-color:rgba(0,212,255,.2);transform:translateX(8px);}
.job-ttl{font-family:var(--font-display);font-size:19px;font-weight:700;margin-bottom:8px;}
.job-tags{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.jtag{font-size:12px;padding:3px 11px;border-radius:100px;border:1px solid var(--glass-border);color:var(--text-secondary);}
.jtag-blue{border-color:rgba(0,212,255,.3);color:var(--accent-blue)}
.jtag-purple{border-color:rgba(124,58,237,.3);color:var(--accent-purple)}
.jtag-green{border-color:rgba(0,255,136,.3);color:var(--accent-green)}

.ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:60px;}
.ben-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:20px;padding:30px;transition:all .4s var(--ease-out);}
.ben-card:hover{background:var(--glass-bg-hover);border-color:rgba(0,212,255,.15);transform:translateY(-4px);}
.ben-ico{font-size:32px;margin-bottom:14px}
.ben-ttl{font-family:var(--font-display);font-size:18px;font-weight:700;margin-bottom:9px}
.ben-txt{font-size:14px;color:var(--text-secondary);line-height:1.7}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:60px;}
.blog-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:20px;overflow:hidden;cursor:none;transition:all .4s var(--ease-out);}
.blog-card:hover{background:var(--glass-bg-hover);border-color:rgba(0,212,255,.2);transform:translateY(-8px);box-shadow:0 28px 56px rgba(0,0,0,.4);}
.blog-thumb{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:44px;position:relative;overflow:hidden;}
.blog-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;}
.blog-thumb::after{content:'';position:absolute;inset:0;background:var(--gradient-primary);opacity:.07;z-index:1;pointer-events:none;}
.bt-1{background:linear-gradient(135deg,#0a0a1f,#1a0f30)}.bt-2{background:linear-gradient(135deg,#0a1520,#0d2035)}.bt-3{background:linear-gradient(135deg,#0a1a10,#142510)}.bt-4{background:linear-gradient(135deg,#1a0a0a,#250f15)}.bt-5{background:linear-gradient(135deg,#14100a,#201808)}.bt-6{background:linear-gradient(135deg,#0a0f1f,#0f1830)}
.blog-body{padding:26px}
.blog-cat{font-size:11px;font-weight:600;color:var(--accent-blue);letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;}
.blog-ttl{font-family:var(--font-display);font-size:17px;font-weight:700;line-height:1.4;margin-bottom:10px;letter-spacing:-.3px;}
.blog-exc{font-size:13px;color:var(--text-secondary);line-height:1.7;margin-bottom:18px}
.blog-foot{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-muted);border-top:1px solid var(--glass-border);padding-top:14px;}
.blog-author{display:flex;align-items:center;gap:7px}
.ba-av{width:26px;height:26px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:11px;}

.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:72px;margin-top:72px;align-items:start;}
.c-item{display:flex;align-items:flex-start;gap:18px;margin-bottom:28px}
.c-ico{width:46px;height:46px;flex-shrink:0;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;}
.c-lbl{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px}
.c-val{font-size:15px;font-weight:500}
.contact-form{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:24px;padding:44px;}
.form-grp{margin-bottom:22px;position:relative}
.form-lbl{display:block;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:7px;transition:color .2s;}
.form-grp:focus-within .form-lbl{color:var(--accent-blue)}
.form-in,.form-ta,.form-sel{width:100%;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:13px 17px;font-family:var(--font-body);font-size:14px;color:var(--text-primary);transition:all .25s;outline:none;-webkit-appearance:none;}
.form-in:focus,.form-ta:focus,.form-sel:focus{border-color:var(--accent-blue);background:rgba(0,212,255,.025);box-shadow:0 0 0 3px rgba(0,212,255,.1);}
.form-in::placeholder,.form-ta::placeholder{color:var(--text-muted)}
.form-ta{min-height:130px;resize:vertical}
.form-sel option{background:var(--bg-secondary)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:60px;}
.ind-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:20px;padding:38px 30px;text-align:center;cursor:none;transition:all .4s var(--ease-out);position:relative;overflow:hidden;}
.ind-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(0,212,255,.05) 0%,transparent 60%);transform:scale(0);transition:transform .6s var(--ease-out);}
.ind-card:hover::before{transform:scale(1)}
.ind-card:hover{border-color:rgba(0,212,255,.2);transform:translateY(-8px)}
.ind-ico{font-size:46px;margin-bottom:18px;display:block}
.ind-ttl{font-family:var(--font-display);font-size:19px;font-weight:700;margin-bottom:10px}
.ind-txt{font-size:13px;color:var(--text-secondary);line-height:1.65}

.port-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px}
.pf-btn{padding:8px 18px;border-radius:100px;border:1px solid var(--glass-border);background:var(--glass-bg);font-size:13px;font-weight:500;color:var(--text-secondary);cursor:none;transition:all .25s;}
.pf-btn:hover,.pf-btn.active{background:var(--gradient-primary);border-color:transparent;color:#fff;}
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.pg-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:20px;overflow:hidden;cursor:none;transition:all .4s var(--ease-out);}
.pg-card:hover{border-color:rgba(0,212,255,.2);transform:translateY(-8px);box-shadow:0 28px 56px rgba(0,0,0,.4);}
.pg-thumb{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:46px;position:relative;overflow:hidden;}
.pg-thumb::after{content:'';position:absolute;inset:0;background:var(--gradient-primary);opacity:.06;}
.pg-body{padding:22px}
.pg-cat{font-size:11px;color:var(--accent-blue);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:7px}
.pg-ttl{font-family:var(--font-display);font-size:17px;font-weight:700;margin-bottom:8px}
.pg-txt{font-size:13px;color:var(--text-secondary);line-height:1.65}
.pg-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.pg-tag{font-size:11px;padding:3px 10px;border-radius:100px;background:rgba(0,212,255,.07);border:1px solid rgba(0,212,255,.15);color:var(--accent-blue);}

.case-study{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:24px;padding:56px;margin-top:36px;}
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.cs-btns{display:flex;gap:14px;flex-wrap:wrap;}
.cs-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:36px 0;padding:36px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;}
.cs-m-val{font-family:var(--font-display);font-size:36px;font-weight:800;letter-spacing:-1px;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:4px;}
.cs-m-lbl{font-size:12px;color:var(--text-muted)}

.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:100px;font-size:11px;font-weight:600;letter-spacing:.4px;}
.badge-blue{background:rgba(0,212,255,.1);color:var(--accent-blue);border:1px solid rgba(0,212,255,.2)}
.badge-purple{background:rgba(124,58,237,.1);color:var(--accent-purple);border:1px solid rgba(124,58,237,.2)}
.badge-green{background:rgba(0,255,136,.1);color:var(--accent-green);border:1px solid rgba(0,255,136,.2)}

.newsletter-box{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:24px;padding:52px;text-align:center;margin-top:80px;position:relative;overflow:hidden;}
.newsletter-box::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(124,58,237,.08),transparent 65%);pointer-events:none;}
.nl-ttl{font-family:var(--font-display);font-size:32px;font-weight:800;letter-spacing:-1px;margin-bottom:12px}
.nl-sub{font-size:15px;color:var(--text-secondary);margin-bottom:28px}
.nl-form{display:flex;gap:12px;max-width:480px;margin:0 auto;position:relative;z-index:1;}
.nl-input{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:13px 17px;font-family:var(--font-body);font-size:14px;color:var(--text-primary);outline:none;transition:border-color .25s;}
.nl-input:focus{border-color:var(--accent-blue)}
.nl-input::placeholder{color:var(--text-muted)}

.faq-list{display:flex;flex-direction:column;gap:12px;margin-top:60px}
.faq-item{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:14px;overflow:hidden;transition:border-color .3s;}
.faq-item.open{border-color:rgba(0,212,255,.2)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;cursor:none;font-size:15px;font-weight:600;}
.faq-icon{width:24px;height:24px;border-radius:50%;background:var(--glass-bg-hover);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;transition:transform .3s,background .3s;}
.faq-item.open .faq-icon{transform:rotate(45deg);background:rgba(0,212,255,.15)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out);}
.faq-item.open .faq-a{max-height:200px}
.faq-a-inner{padding:0 26px 22px;font-size:14px;color:var(--text-secondary);line-height:1.75;}

.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:60px;}
.sol-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:20px;padding:34px;cursor:none;transition:all .4s var(--ease-out);}
.sol-card:hover{background:var(--glass-bg-hover);border-color:rgba(0,212,255,.18);transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,0,0,.4);}
.sol-ico{font-size:36px;margin-bottom:18px}
.sol-ttl{font-family:var(--font-display);font-size:19px;font-weight:700;margin-bottom:10px}
.sol-txt{font-size:14px;color:var(--text-secondary);line-height:1.7}
.sol-list{display:flex;flex-direction:column;gap:7px;margin-top:16px}
.sol-list li{font-size:13px;color:var(--text-muted);padding-left:14px;position:relative;}
.sol-list li::before{content:'·';position:absolute;left:0;color:var(--accent-blue);font-weight:700;}

/* ============================================================
   LIGHT SECTION VARIANT
   Add class="section-light" to any <section> or <div> to make
   it render with a light background above the WebGL canvas.
   ============================================================ */
.section-light{background:#f4f6fb;position:relative;z-index:1;--text-secondary:#4a4a6a;--text-muted:#888aaa;}
.section-light::before{content:'';position:absolute;inset:0;background:#f4f6fb;z-index:-1;pointer-events:none;}
.stats-band.section-light{border-top-color:#dde2ee;border-bottom-color:#dde2ee;}
.marquee-wrap.section-light{border-top-color:#dde2ee;border-bottom-color:#dde2ee;}

/* Text colors in light sections */
.section-light .section-title,.section-light .svc-block-ttl,.section-light .proc-ttl,.section-light .mv-ttl,.section-light .nl-ttl,.section-light .faq-q{color:#0f0f1a;}
.section-light .gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.section-light .section-sub,.section-light .srv-desc,.section-light .pg-txt,.section-light .testi-quote,.section-light .sol-txt,.section-light .ben-txt,.section-light .ind-txt,.section-light .svc-block-txt,.section-light .blog-exc,.section-light .tl-txt,.section-light .proc-txt,.section-light .team-bio,.section-light .nl-sub,.section-light .faq-a-inner{color:#4a4a6a;}
.section-light .sl,.section-light .testi-co,.section-light .pg-cat,.section-light .blog-cat,.section-light .tl-year,.section-light .tech-cat,.section-light .dc-lbl,.section-light .blog-foot,.section-light .jtag,.section-light .form-lbl,.section-light .c-lbl{color:#888aaa;}
.section-light .srv-title,.section-light .sol-ttl,.section-light .ben-ttl,.section-light .ind-ttl,.section-light .testi-name,.section-light .tech-nm,.section-light .team-name,.section-light .pg-ttl,.section-light .blog-ttl,.section-light .job-ttl,.section-light .tl-ttl,.section-light .c-val,.section-light .proc-num{color:#0f0f1a;}
.section-light .proc-num{-webkit-text-stroke-color:rgba(15,15,26,.10);}
.section-light .svc-feat,.section-light .sol-list li{color:#4a4a6a;}
.section-light .svc-feat::before,.section-light .sol-list li::before{color:var(--accent-blue);}
.section-light .team-role{color:var(--accent-blue);}

/* Card backgrounds in light sections */
.section-light .srv-card,.section-light .testi-card,.section-light .sol-card,.section-light .ben-card,.section-light .pg-card,.section-light .ind-card,.section-light .tl-content,.section-light .tech-card,.section-light .team-card,.section-light .mv-card,.section-light .blog-card,.section-light .job-card,.section-light .glass-card,.section-light .contact-form,.section-light .faq-item,.section-light .case-study,.section-light .newsletter-box{background:#ffffff;border-color:#dde2ee;}
.section-light .srv-card:hover,.section-light .testi-card:hover,.section-light .sol-card:hover,.section-light .ben-card:hover,.section-light .pg-card:hover,.section-light .ind-card:hover,.section-light .tl-content:hover,.section-light .tech-card:hover,.section-light .team-card:hover,.section-light .mv-card:hover,.section-light .blog-card:hover,.section-light .job-card:hover{background:#f0f4ff;border-color:rgba(0,212,255,.35);box-shadow:0 16px 40px rgba(0,0,0,.09);}
.section-light .faq-item.open{border-color:rgba(0,212,255,.3);}
.section-light .faq-icon{background:#eef0f8;}
.section-light .faq-item.open .faq-icon{background:rgba(0,212,255,.15);}
.section-light .mv-card::after{background:var(--gradient-primary);}
.section-light .blog-foot{border-top-color:#dde2ee;}
.section-light .cs-metrics{background:#f4f6fb;border-color:#dde2ee;}

/* Form elements in light sections */
.section-light .form-in,.section-light .form-ta,.section-light .form-sel,.section-light .nl-input{background:#ffffff;border-color:#d0d5e8;color:#0f0f1a;}
.section-light .form-in::placeholder,.section-light .form-ta::placeholder,.section-light .nl-input::placeholder{color:#9899b8;}
.section-light .form-in:focus,.section-light .form-ta:focus,.section-light .form-sel:focus{border-color:var(--accent-blue);background:rgba(0,212,255,.03);box-shadow:0 0 0 3px rgba(0,212,255,.10);}
.section-light .form-sel option{background:#ffffff;color:#0f0f1a;}
.section-light .c-ico{background:#ffffff;border-color:#dde2ee;}

/* Filter pills & tags in light sections */
.section-light .pf-btn{background:#ffffff;border-color:#d0d5e8;color:#4a4a6a;}
.section-light .pf-btn:hover,.section-light .pf-btn.active{background:var(--gradient-primary);border-color:transparent;color:#fff;}
.section-light .pg-tag{background:rgba(0,212,255,.07);border-color:rgba(0,212,255,.20);color:var(--accent-blue);}
.section-light .jtag-blue{border-color:rgba(0,212,255,.3);color:var(--accent-blue);}
.section-light .jtag-purple{border-color:rgba(124,58,237,.3);color:var(--accent-purple);}
.section-light .jtag-green{border-color:rgba(0,255,136,.3);color:var(--accent-green);}

/* Mockup windows in light sections */
.section-light .mockup-win{background:#ffffff;border-color:#dde2ee;box-shadow:0 20px 60px rgba(0,0,0,.10);}
.section-light .mockup-tbar{background:#f4f6fb;border-bottom-color:#dde2ee;}
.section-light .code-line{color:#4a4a6a;}
.section-light .ck{color:#7c3aed;}.section-light .cs{color:#059669;}.section-light .cf{color:#0284c7;}.section-light .cm{color:#888aaa;}

.section-light .dash-tbar{background:#f4f6fb;border-bottom-color:#dde2ee;}
.section-light .dc{background:#f4f6fb;border-color:#dde2ee;}
.section-light .dc-pill{background:#f4f6fb;border-color:#dde2ee;color:#4a4a6a;}
.section-light .dc-pill span{color:#0f0f1a;}

/* Section tag in light sections (keep brand color) */
.section-light .section-tag{color:var(--accent-purple);}
.section-light .section-tag::before{background:var(--accent-purple);}

/* Stats numbers keep gradient */
.section-light .sn,.section-light .stat-val,.section-light .cs-m-val{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* Newsletter box inside light section */
.section-light .newsletter-box::before{background:radial-gradient(ellipse at center,rgba(124,58,237,.05),transparent 65%);}

/* ============================================================
   SCROLL TO TOP
   ============================================================ */
/* WhatsApp float btn */
.wa-float{position:fixed;bottom:104px;right:32px;width:52px;height:52px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;z-index:250;box-shadow:0 8px 28px rgba(37,211,102,.45);transition:transform .3s var(--ease-out),box-shadow .3s;cursor:pointer;text-decoration:none;}
.wa-float:hover{transform:translateY(-4px) scale(1.1);box-shadow:0 12px 48px rgba(37,211,102,.7);}
.wa-float:active{transform:translateY(-1px) scale(1.02);}
.wa-float svg{width:28px;height:28px;fill:#fff;}
@media(max-width:600px){.wa-float{bottom:152px;right:16px;width:46px;height:46px;}.wa-float svg{width:24px;height:24px;}}
.scroll-top{position:fixed;bottom:40px;right:32px;width:52px;height:52px;border-radius:50%;border:none;cursor:none;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;z-index:250;opacity:0;transform:translateY(20px) scale(0.8);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),box-shadow .3s;box-shadow:0 8px 28px rgba(0,212,255,.35);pointer-events:none;}
.scroll-top.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.scroll-top:hover{box-shadow:0 12px 48px rgba(0,212,255,.65);transform:translateY(-4px) scale(1.1);}
.scroll-top:active{transform:translateY(-1px) scale(1.02);}
.stt-inner{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.stt-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none;}
.stt-ring circle{fill:none;stroke-linecap:round;transition:stroke-dashoffset .15s;}
.stt-ring .stt-track{stroke:rgba(255,255,255,.18);}
.stt-ring .stt-fill{stroke:rgba(255,255,255,.9);}
.stt-icon{display:flex;flex-direction:column;align-items:center;gap:2px;animation:stt-bounce 1.8s ease-in-out infinite;}
.stt-icon::before,.stt-icon::after{content:'';display:block;width:9px;height:9px;border-left:2.5px solid #fff;border-top:2.5px solid #fff;transform:rotate(45deg);border-radius:1px;}
.stt-icon::after{opacity:.55;margin-top:-6px;}
@keyframes stt-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* ============================================================
   NAV — OVER LIGHT SECTION
   ============================================================ */
.nav.over-light{background:rgba(4,4,10,.88)!important;border-color:rgba(255,255,255,.14)!important;box-shadow:0 8px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)!important;}

@media(max-width:1100px){.srv-grid{grid-template-columns:repeat(2,1fr)}.tech-grid{grid-template-columns:repeat(4,1fr)}.team-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:900px){:root{--section-pad:72px 0}.container{padding:0 22px}.nav-links{display:none}.nav-toggle{display:flex}.nav-overlay{display:block;opacity:0;pointer-events:none;transition:opacity .3s}.nav-overlay.show{opacity:1;pointer-events:auto}.hero-grid{grid-template-columns:1fr;gap:52px}.hero-right{display:none}.mv-grid,.contact-grid{grid-template-columns:1fr}.svc-block,.svc-block.flip{grid-template-columns:1fr}.svc-block.flip .svc-visual{order:0}.proc-step{grid-template-columns:64px 1fr;gap:22px}.proc-ico{display:none}.blog-grid{grid-template-columns:repeat(2,1fr)}.port-grid{grid-template-columns:repeat(2,1fr)}.ind-grid{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}.testi-grid{grid-template-columns:1fr}.sol-grid{grid-template-columns:repeat(2,1fr)}.ben-grid{grid-template-columns:repeat(2,1fr)}.featured-blog-card{grid-template-columns:1fr!important;min-height:auto!important}.featured-blog-card .blog-thumb{min-height:220px!important}.featured-blog-card>div:last-child{padding:28px!important}.cs-grid{grid-template-columns:1fr!important;gap:28px!important}.cs-metrics{grid-template-columns:repeat(2,1fr)}.case-study{padding:36px 28px}.nav-actions .btn-sm{display:none!important;}.nav{top:auto;bottom:16px;}.nav.scrolled{top:auto;bottom:16px;}.nav .nav-logo .nav-logo-text{max-width:140px;margin-left:10px;padding-right:4px;}.nav .nav-logo .nav-logo-text>span{opacity:1;transform:none;}.mobile-nav{top:auto;right:auto;bottom:82px;left:50%;transform:translateX(-50%) translateY(28px);width:calc(100% - 48px);max-width:420px;height:auto;border-radius:24px;border:1px solid rgba(255,255,255,0.14);padding:8px 6px;opacity:0;pointer-events:none;transition:opacity .38s var(--ease-out),transform .42s var(--ease-out);}.mobile-nav.open{right:auto;transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto;}.mobile-nav a{text-align:center;opacity:0;transform:translateY(10px);transition:color .2s,opacity .28s ease,transform .32s var(--ease-out);}.mobile-nav-cta{display:none!important;}body{padding-bottom:76px;}.mobile-nav.open a:nth-child(10){opacity:1;transform:none;transition-delay:.02s}.mobile-nav.open a:nth-child(9){opacity:1;transform:none;transition-delay:.05s}.mobile-nav.open a:nth-child(8){opacity:1;transform:none;transition-delay:.08s}.mobile-nav.open a:nth-child(7){opacity:1;transform:none;transition-delay:.11s}.mobile-nav.open a:nth-child(6){opacity:1;transform:none;transition-delay:.14s}.mobile-nav.open a:nth-child(5){opacity:1;transform:none;transition-delay:.17s}.mobile-nav.open a:nth-child(4){opacity:1;transform:none;transition-delay:.20s}.mobile-nav.open a:nth-child(3){opacity:1;transform:none;transition-delay:.23s}.mobile-nav.open a:nth-child(2){opacity:1;transform:none;transition-delay:.26s}.mobile-nav.open a:nth-child(1){opacity:1;transform:none;transition-delay:.29s}.page-hero{padding:120px 0 56px}.stats-band{padding:48px 0}.cta-section{padding:100px 0}.tl-item{margin-bottom:36px}}
@media(max-width:600px){.hero-title{letter-spacing:-2px}.hero-btns{flex-direction:column;align-items:flex-start}.cta-btns{flex-direction:column;align-items:center}.srv-grid,.ind-grid,.sol-grid,.ben-grid{grid-template-columns:1fr}.tech-grid{grid-template-columns:repeat(2,1fr)}.team-grid{grid-template-columns:1fr}.blog-grid,.port-grid{grid-template-columns:1fr}.featured-blog-card>div:last-child{padding:22px!important}.footer-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.cs-metrics{grid-template-columns:repeat(2,1fr)}.form-row{grid-template-columns:1fr}.contact-form{padding:26px 20px}.case-study{padding:22px 16px}.pf-btn{font-size:12px;padding:6px 13px}.tl-item{grid-template-columns:42px 1fr}.tl-item:nth-child(even) .tl-empty{display:none}.timeline::before{left:21px}.nav{width:calc(100% - 24px);max-width:none;top:auto;bottom:12px;padding:6px 10px 6px 8px;}.nav.scrolled{top:auto;bottom:12px;}.nl-form{flex-direction:column}.scroll-top{bottom:96px;right:16px;width:46px;height:46px;}.tl-dot{width:36px;height:36px;font-size:15px}.tl-item{margin-bottom:24px}.tl-item:nth-child(odd) .tl-empty{display:none}.tl-item:nth-child(odd) .tl-dot{order:1}.tl-item:nth-child(odd) .tl-content{order:2}.mv-card{padding:26px 22px}.mv-ttl{font-size:20px}.cta-section{padding:72px 0}.page-hero{padding:96px 0 44px;min-height:auto}.page-hero-inner{padding:0}.sn{font-size:38px;letter-spacing:-1px}.tl-content{padding:20px 16px}}

/* ─── Services page mobile fixes ─────────────────────────────────────── */
@media(max-width:900px){.svc-block{gap:36px;padding:56px 0;}.svc-visual>div{overflow:hidden;border-radius:18px;}.svc-block-txt{font-size:14px;}}
@media(max-width:600px){.svc-block{padding:40px 0;gap:24px;}.svc-block-ttl{letter-spacing:-1px;font-size:clamp(24px,7vw,36px);}.svc-visual>div{border-radius:14px;}}