*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh,96px) - 2px)}
body{background:#010b1d;color:#fff;font-family:Poppins,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a,button{color:inherit;text-decoration:none;font:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%}

/* ---------- fixed header: transparent over the hero, frosted glass once scrolled ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .45s,box-shadow .45s,border-color .45s;border-bottom:1px solid transparent}
.site-head.scrolled{background:rgba(1,11,29,.72);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:rgba(110,160,255,.18);box-shadow:0 14px 40px -20px rgba(0,0,0,.9)}
.site-head .header{transition:padding .45s}
.site-head.scrolled .header{padding-top:12px;padding-bottom:12px}
.site-head .header .brand img{transition:height .45s}
.site-head.scrolled .header .brand img{height:44px}
/* hero spacing uses the header's full (unscrolled) height, so the headline never shifts when the header shrinks */
.s1 .hero .intro{padding-top:calc(var(--hh0,106px) + clamp(0px,4.5vh,56px))}
:root{--stick-top:var(--hh,80px)}

/* ---------- mobile menu ---------- */
.mnav{position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:rgba(1,11,29,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.mnav a{font-size:15px;letter-spacing:.16em;text-transform:uppercase;padding:11px 20px;color:#c3cbd9;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s,color .3s}
.mnav a.on{color:#fff}.mnav a.on:after{content:"";display:block;height:2px;margin-top:6px;border-radius:3px;background:#1f7bff;box-shadow:0 0 12px #1f7bff}
.mnav .mcta{margin-top:18px;padding:12px 26px;border-radius:999px;font-size:14px;letter-spacing:.06em;text-transform:none;color:#fff;
  background:linear-gradient(135deg,#2b8bff,#1561f0);box-shadow:0 8px 30px -6px rgba(31,123,255,.8)}
body.menu-open{overflow:hidden}
body.menu-open .mnav{opacity:1;visibility:visible}
body.menu-open .mnav a{opacity:1;transform:none}
body.menu-open .mnav a:nth-child(2){transition-delay:.05s}body.menu-open .mnav a:nth-child(3){transition-delay:.1s}
body.menu-open .mnav a:nth-child(4){transition-delay:.15s}body.menu-open .mnav a:nth-child(5){transition-delay:.2s}body.menu-open .mnav a:nth-child(6){transition-delay:.25s}
.s1 .burger svg path{transition:transform .35s,opacity .35s;transform-origin:center}
body.menu-open .s1 .burger svg path:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-open .s1 .burger svg path:nth-child(2){opacity:0}
body.menu-open .s1 .burger svg path:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (min-width:821px){.mnav{display:none}}

/* ---------- "new project" dot on the Portfolio link ---------- */
.newdot{position:absolute;top:3px;right:-12px;width:7px;height:7px;border-radius:50%;background:#3d8dff;box-shadow:0 0 8px #3d8dff;pointer-events:none}
.newdot:after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid #5aa8ff;animation:newping 2s ease-out infinite}
@keyframes newping{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(3.2);opacity:0}}
.mnav a[data-spy]{position:relative}
.mnav .newdot{top:9px;right:12px}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:101;
  background:linear-gradient(90deg,#1f6dff,#5aa8ff);box-shadow:0 0 10px #3d8dff}

/* ---------- contact form: reCAPTCHA + result message ---------- */
.s5 .g-recaptcha{margin:2px 0 18px;min-height:78px}
.s5 .msg.err{background:rgba(255,90,90,.1);border-color:rgba(255,110,110,.45);color:#ffd0d0}
.s5 .btn[disabled]{opacity:.6;pointer-events:none}

/* ---------- accessibility ---------- */
:focus-visible{outline:2px solid #5aa8ff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- one fixed background layer for the circuit theme (no per-scroll repaint) ---------- */
.tech-layer,.tech-pulses{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.7;transform:translateZ(0)}
.tech-layer{background:url(../tech-bg-static.svg) center top/1200px auto repeat}
.tech-pulses{overflow:hidden}
.tech-pulses svg{position:absolute;width:1200px;height:960px}
.s2 .sec:after,.s3 .sec:after,.s4 .sec:after,.s5 .sec:after,.s6 .sec:after{background:none!important}
/* the pattern fades in below the hero, as before */
.s2 .sec:after{background:linear-gradient(#010b1d,rgba(1,11,29,0)) top/100% 260px no-repeat!important;opacity:1!important;-webkit-mask-image:none!important;mask-image:none!important}

/* ---------- phones & tablets: frosted-glass blur is recalculated on every scroll frame,
   so swap it for solid, slightly more opaque panels there ---------- */
@media (max-width:1000px){
  *,*:before,*:after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .site-head.scrolled{background:rgba(1,11,29,.95)}
  .s3 .filters{background:rgba(8,20,48,.96)}
  .s1 .stats{background:rgba(10,16,30,.88)}
  .s2 .cta-bar,.s4 .quote,.s4 .badge{background:rgba(10,20,44,.92)}
  .s6 .spot{background:linear-gradient(150deg,rgba(14,32,76,.94),rgba(5,12,32,.96))}
  .s6 .chip,.s6 .hint{background:rgba(10,20,44,.94)}
}

/* ===== 01-header-hero.html ===== */
.s1{--blue:#1f7bff;--bg:#010b1d;
  
  --VH:100vh;
  
  --Hs:calc(100vw * 0.5628);
  --sy:max(calc(var(--VH) * 0.9 - var(--Hs) * 0.76), calc(var(--VH) * 0.42 - var(--Hs) * 0.32))}
@supports (height:100svh){.s1{--VH:100svh}}
.s1 a{color:inherit;text-decoration:none}
.s1 .hero{position:relative;overflow:hidden;isolation:isolate;background:var(--bg)}
.s1 .scene{position:absolute;left:50%;top:var(--sy);height:var(--Hs);transform:translateX(-50%);z-index:-1}
.s1 .scene picture,.s1 .scene img{display:block;height:100%;width:auto;max-width:none}
.s1 .scene img{animation:s1-fadeIn 1.6s ease both}
.s1 .scene:before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:1200px;background:url(../../images/hero_scene_wide.webp) center top/100% 100000% no-repeat}
.s1 .scene:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:28%;background:linear-gradient(transparent,var(--bg))}
.s1 .vig{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(1,11,29,.7),transparent 20%,transparent 80%,rgba(1,11,29,.7))}
@keyframes s1-fadeIn{from{filter:brightness(.4)}}
.s1 .hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(transparent,var(--bg));z-index:-1}
.s1 .screen{position:absolute;left:0;top:0;width:760px;height:456px;transform-origin:0 0;overflow:hidden;border-radius:3px;
  background:radial-gradient(420px 260px at 76% 46%,rgba(31,110,255,.5),transparent 65%),linear-gradient(160deg,#0a1633,#040918 70%);
  opacity:0;animation:s1-screenOn 1.2s .9s ease forwards}
@keyframes s1-screenOn{0%{opacity:0;filter:brightness(2.2)}40%{opacity:1}100%{opacity:1;filter:none}}
.s1 .screen:after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 38%,transparent 40%);pointer-events:none}
.s1 .screen-glow{position:absolute;z-index:1;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,rgba(31,123,255,.35),transparent 65%);filter:blur(10px)}
.s1 .ray{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:12 120;stroke-dashoffset:12;opacity:0;
  filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #3d8dff);animation:s1-ray 3.6s 2.8s cubic-bezier(.45,0,.35,1) infinite}
@keyframes s1-ray{0%{stroke-dashoffset:12;opacity:0}6%{opacity:1}64%{stroke-dashoffset:-96;opacity:1}72%,100%{stroke-dashoffset:-104;opacity:0}}
.s1 .peak{fill:none;stroke:#bfe0ff;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;animation:s1-peak 3.6s 2.8s ease-out infinite}
@keyframes s1-peak{0%,62%{opacity:0;transform:scale(1)}66%{opacity:1;transform:scale(1.2)}96%,100%{opacity:0;transform:scale(4.5)}}
.s1 .steam{position:absolute;z-index:1;pointer-events:none}
.shot .s1 .ray,.shot .s1 .peak,.shot .s1 .steam{display:none}
.s1 .s-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 26px;font-size:9.5px;color:#c8d2e2}
.s1 .s-nav .lg{display:flex;align-items:center;gap:6px;font-weight:600;font-size:12px;color:#fff}
.s1 .s-nav ul{display:flex;gap:20px;list-style:none;align-items:center}
.s1 .s-nav ul li:first-child{color:#fff;border-bottom:1.5px solid var(--blue);padding-bottom:2px}
.s1 .s-nav .ct{background:#fff;color:#0a1020;padding:5px 12px;border-radius:5px;font-weight:600}
.s1 .s-body{display:grid;grid-template-columns:1.05fr 1fr;gap:16px;padding:22px 26px 0}
.s1 .s-body h3{font-style:italic;font-weight:700;font-size:30px;line-height:1.15}
.s1 .s-body p{font-size:10.5px;color:#aab6c9;margin:10px 0 18px;font-style:italic}
.s1 .s-btns{display:flex;align-items:center;gap:14px;font-size:10px}
.s1 .s-btns .b{background:linear-gradient(135deg,#2b8bff,#1561f0);padding:9px 18px;border-radius:6px;font-weight:500;box-shadow:0 4px 16px rgba(31,123,255,.6)}
.s1 .s-btns .pl{display:flex;align-items:center;gap:8px;color:#d6deea}
.s1 .s-btns .pl span{width:24px;height:24px;border-radius:50%;background:#fff;display:grid;place-items:center;color:#0a1020;font-size:9px}
.s1 .chart{border-radius:12px;padding:14px 14px 12px;background:rgba(20,40,90,.35);border:1px solid rgba(110,160,255,.28);box-shadow:0 10px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.s1 .chart .k{font-size:11px;color:#dfe8f6}
.s1 .chart .k b{font-size:15px;color:#fff;margin-right:4px}
.s1 .chart svg{display:block;margin-top:4px}
.s1 .ics{display:flex;gap:9px;margin-top:6px}
.s1 .ics span{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center}
.s1 .trust{display:flex;align-items:center;gap:26px;margin:24px 26px 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);font-size:9.5px;color:#c8d2e2}
.s1 .trust b{display:block;font-size:10.5px;color:#fff;font-weight:600}
.s1 .trust img{height:34px;width:34px;object-fit:contain;padding:2px;border-radius:7px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.35);opacity:.92}
.s1 .top{height:max(calc(var(--sy) + var(--Hs) * 0.79), calc(var(--VH) + 30px));position:relative;z-index:5}
.s1 .header{max-width:1240px;margin:0 auto;padding:clamp(12px,2.4vh,28px) 24px;display:flex;align-items:center;justify-content:space-between}
.s1 .brand{display:flex;align-items:flex-end;gap:14px;text-transform:uppercase}
.s1 .brand .nm{display:flex;flex-direction:column;line-height:1;letter-spacing:.2em;margin-bottom:-3px}
.s1 .brand .nm span{font-weight:300;font-size:15px;color:#cfd9e8}
.s1 .brand .nm b{font-weight:600;font-size:22px;letter-spacing:.14em}
.s1 .brand img{height:clamp(46px,7vh,62px);width:auto;filter:drop-shadow(0 0 14px rgba(61,141,255,.45))}
.s1 .menu{position:relative;display:flex;gap:40px;list-style:none;font-size:14px;font-weight:400;text-transform:uppercase;letter-spacing:.14em}
.s1 .menu a{color:#c3cbd9;position:relative;padding:8px 0;transition:color .25s}
.s1 .menu a:hover,.s1 .menu a.on{color:#fff}
.s1 .menu:hover a.on:not(:hover){color:#c3cbd9}
.s1 .menu .ind{position:absolute;left:0;top:0;width:0;height:3px;border-radius:3px;background:var(--blue);box-shadow:0 0 12px var(--blue);pointer-events:none;transition:left .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1)}
.s1 .cta{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:999px;font-weight:500;font-size:15px;
  background:linear-gradient(135deg,#2b8bff,#1561f0);box-shadow:0 8px 30px -6px rgba(31,123,255,.8),inset 0 1px 0 rgba(255,255,255,.35);transition:.3s}
.s1 .cta:hover{transform:translateY(-2px);box-shadow:0 14px 40px -6px rgba(31,123,255,1)}
.s1 .cta .ar{transition:.3s}
.s1 .cta:hover .ar{transform:translateX(4px)}
.s1 .burger{display:none}
.s1 .intro{text-align:center;padding-top:clamp(0px,4.5vh,56px);text-shadow:0 4px 30px rgba(0,0,0,.5)}
.s1 .eyebrow{display:inline-flex;align-items:center;gap:22px;font-style:italic;font-weight:400;font-size:clamp(22px,min(2.6vw,4vh),38px);color:#3d8dff}
.s1 .eyebrow:before,.s1 .eyebrow:after{content:"";width:60px;height:1px;background:linear-gradient(90deg,transparent,#3d8dff)}
.s1 .eyebrow:after{transform:scaleX(-1)}
.s1 h1{font-weight:600;font-size:clamp(34px,min(5vw,7vh),76px);line-height:1.15;letter-spacing:-.02em;margin-top:4px;white-space:nowrap}
.s1 .sub{text-shadow:none}
.s1 h1 .blue{display:inline;color:#fff}
.s1 .dline{display:flex;align-items:center;justify-content:center;gap:12px;margin:clamp(6px,1.4vh,14px) 0 clamp(10px,1.8vh,18px)}
.s1 .dline i{height:1px;width:110px;background-image:radial-gradient(circle,#8fa3c2 1px,transparent 1.5px);background-size:6px 1px}
.s1 .sub{font-size:clamp(15px,min(1.55vw,2.3vh),22px);font-weight:500;background:linear-gradient(180deg,#5aa8ff 10%,#1f6dff 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(31,123,255,.35))}
.s1 .glowline{width:120px;height:3px;margin:clamp(10px,2vh,20px) auto 0;border-radius:3px;background:linear-gradient(90deg,transparent,#3d8dff,transparent);box-shadow:0 0 16px #3d8dff}
.s1 .lower{position:relative;z-index:5;padding-bottom:70px}
.s1 .tiles{display:flex;justify-content:center;gap:26px}
.s1 .tile{position:relative;isolation:isolate;overflow:hidden;width:200px;height:178px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(225,233,246,.5));border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  cursor:pointer;color:#fff;border-color:rgba(70,140,255,.6);
  box-shadow:0 0 0 1px rgba(31,123,255,.3),0 24px 50px -14px rgba(31,123,255,.55),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .5s,color .4s}
.s1 .tile:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 0%,rgba(31,123,255,.35),transparent 60%),linear-gradient(160deg,#12295c,#06102a);opacity:1;transition:opacity .5s ease}
.s1 .tile:hover{transform:translateY(-10px);color:#0d1626;border-color:rgba(255,255,255,.85);
  box-shadow:0 24px 40px -18px rgba(0,0,0,.6),0 0 30px -8px rgba(160,190,255,.35),inset 0 1px 0 #fff}
.s1 .tile:hover:before{opacity:0}
.s1 .tile .ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.15);transition:background .5s,box-shadow .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.s1 .tile .ic svg{stroke:#fff;transition:stroke .4s}
.s1 .tile:hover .ic{background:#fff;box-shadow:0 6px 16px rgba(31,123,255,.25);transform:scale(1.08)}
.s1 .tile:hover .ic svg{stroke:#1f6dff}
.s1 .tile h4{font-weight:600;font-size:16.5px}
.s1 .tile .ln{width:110px;display:grid;gap:5px}
.s1 .tile .ln i{height:2px;border-radius:2px;background:rgba(255,255,255,.25);transition:background .5s}
.s1 .tile .ln i:last-child{width:70%;margin:auto}
.s1 .tile:hover .ln i{background:rgba(13,22,38,.18)}
.s1 .tile .dt{display:flex;gap:4px}
.s1 .tile .dt i{width:5px;height:5px;border-radius:50%;background:#5aa8ff;transition:background .5s}
.s1 .tile:hover .dt i{background:#1f6dff}
.s1 .stats{width:960px;margin:34px auto 0;display:flex;align-items:center;padding:20px 22px 20px 40px;border-radius:18px;
  background:rgba(10,16,30,.5);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 20px 50px -20px rgba(0,0,0,.7)}
.s1 .st{flex:1;text-align:center;border-right:1px solid rgba(255,255,255,.14)}
.s1 .st:nth-child(3){border:0}
.s1 .st b{display:block;font-weight:600;font-size:36px;line-height:1.1;background:linear-gradient(180deg,#5aa8ff 10%,#1f6dff 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(31,123,255,.45))}
.s1 .st>span{font-size:14px;color:#c2cbda}
.s1 .stats .cta{padding:17px 34px;font-size:17px;border-radius:12px;margin-left:24px}
.s1 .tag{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:44px;font-size:22px;letter-spacing:.08em;color:#e6ecf5}
.s1 .tag em{font-style:normal;color:#3d8dff}
.s1 .tag:before,.s1 .tag:after{content:"";width:46px;height:2px;background:#3d8dff;box-shadow:0 0 8px #3d8dff}
.s1 .tagline2{width:60px;height:3px;margin:16px auto 0;border-radius:3px;background:#3d8dff;box-shadow:0 0 14px #3d8dff}
.s1 .up{opacity:0;transform:translateY(30px);animation:s1-up 1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes s1-up{to{opacity:1;transform:none}}
.s1 .a1{animation-delay:.1s}
.s1 .a2{animation-delay:.25s}
.s1 .a3{animation-delay:.4s}
.s1 .a5{animation-delay:1.1s}
.s1 .a6{animation-delay:1.3s}
.s1 .bars rect{transform-origin:bottom;transform-box:fill-box;animation:s1-grow 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes s1-grow{from{transform:scaleY(0)}}
.s1 .rv{opacity:0}
.s1 .rv.in{animation:s1-rise 1s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
@keyframes s1-rise{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
.shot .s1 .rv{opacity:1;animation:none}
.shot .s1 .up,.shot .s1 .screen,.shot .s1 .scene img{opacity:1;animation:none;filter:none}
.shot .s1 .up,.shot .s1 .scene img{transform:none}
.shot .s1 .bars rect{animation:none}
@media (max-width:1100px){.s1 .menu{gap:26px}
.s1 .tiles{gap:16px}
.s1 .tile{width:180px}
.s1 .stats{width:calc(100% - 48px)}}
@media (min-width:821px) and (orientation:portrait){.s1{--Hs:calc(100vw * 1.7768);--sy:calc(430px - 52.5vw)}
.s1 .scene:before{background-image:url(../../images/hero_scene.webp)}
.s1 .scene:after{height:12%}
.s1 .top{height:max(calc(var(--sy) + var(--Hs) * .5), calc(var(--VH) - 218px))}
.s1 .hero{min-height:0}}
@media (min-width:821px) and (max-width:920px){.s1 .header{padding-left:16px;padding-right:16px}
.s1 .brand{gap:10px}
.s1 .brand .nm span{font-size:12px}
.s1 .brand .nm b{font-size:17px}
.s1 .brand img{height:42px}
.s1 .menu{gap:18px;font-size:12px;letter-spacing:.1em}
.s1 .header>.cta{padding:10px 16px;font-size:13px;white-space:nowrap}}
@media (max-width:820px){.s1{--sy:min(130px, calc(410px - 52.5vw));--Hs:calc(100vw * 1.7768)}
.s1 .scene:before{background-image:url(../../images/hero_scene.webp)}
.s1 .scene:after{height:12%}
.s1 .menu,.s1 .header>.cta{display:none}
.s1 .burger{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06)}
.s1 .header{padding:18px 18px}
.s1 .brand{gap:10px}
.s1 .brand .nm span{font-size:12px}
.s1 .brand .nm b{font-size:18px}
.s1 .brand img{height:44px}
.s1 .eyebrow{font-size:24px;gap:12px}
.s1 .eyebrow:before,.s1 .eyebrow:after{width:30px}
.s1 h1{font-size:calc((100vw - 28px) / 12.6)}
.s1 .sub{font-size:15px;padding:0 20px}
.s1 .dline i{width:70px}
.s1{--th:max(calc(var(--VH) - 156px), calc(var(--sy) + 100vw * 0.86))}
.s1 .top{height:var(--th)}
.s1 .hero{min-height:0}
.s1 .tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;row-gap:max(14px, calc(var(--VH) - var(--th) - 116px));padding:0 16px}
.s1 .tile{width:auto;height:140px;gap:9px}
.s1 .tile h4{font-size:15px}
.s1 .stats{width:auto;margin:22px 16px 0;flex-wrap:wrap;padding:18px;row-gap:16px}
.s1 .st b{font-size:26px}
.s1 .st>span{font-size:12px}
.s1 .stats .cta{flex-basis:100%;justify-content:center;margin:0}
.s1 .tag{font-size:14px;gap:8px;letter-spacing:.04em;margin-top:34px}
.s1 .tag:before,.s1 .tag:after{width:20px}
.s1 .lower{padding-bottom:60px}}

/* ===== 02-services.html ===== */
.s2{--blue:#1f7bff;--bg:#010b1d;--ink:#0d1626;--mute:#9fb0c8;
  --grad:linear-gradient(180deg,#5aa8ff 10%,#1f6dff 90%)}
.s2 a{color:inherit;text-decoration:none}
.s2 .wrap{width:min(1200px,100% - 48px);margin-inline:auto}
.s2 .sec{position:relative;padding:70px 0 120px;isolation:isolate;overflow:hidden;overflow:clip}
.s2 .sec:before{content:"";position:absolute;inset:0;z-index:-2;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  background:radial-gradient(700px 420px at 12% 30%,rgba(31,110,255,.16),transparent 70%),
             radial-gradient(640px 460px at 90% 70%,rgba(31,110,255,.15),transparent 70%),
             radial-gradient(900px 500px at 50% 62%,rgba(20,70,190,.16),transparent 70%)}
.s2 .sec:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.7;
  background:url(../tech-bg.svg) center calc(0px - var(--bgy,0px))/1200px auto repeat fixed;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 280px);mask-image:linear-gradient(180deg,transparent 0,#000 240px)}
.s2 .streaks{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.s2 .streaks i{position:absolute;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#3d8dff 60%,#bfe0ff);box-shadow:0 0 12px #3d8dff;transform-origin:right center}
.s2 .streaks i:nth-child(1){width:46%;right:-4%;bottom:30%;transform:rotate(-14deg);opacity:.55}
.s2 .streaks i:nth-child(2){width:34%;right:-4%;bottom:26%;transform:rotate(-11deg);opacity:.3;height:1px}
.s2 .streaks i:nth-child(3){width:30%;left:-4%;top:46%;transform:rotate(168deg);transform-origin:left center;opacity:.25;height:1px;background:linear-gradient(90deg,#bfe0ff,#3d8dff 40%,transparent)}
.s2 .clients[hidden]{display:none}
.s2 .clients[hidden]~.wrap .head{margin-top:20px}
.s2 .clients{text-align:center}
.s2 .kicker{display:inline-flex;align-items:center;gap:16px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#c6d2e4}
.s2 .kicker b{font-weight:600;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.s2 .kicker:before,.s2 .kicker:after{content:"";width:46px;height:1px;background:linear-gradient(90deg,transparent,#3d8dff)}
.s2 .kicker:after{transform:scaleX(-1)}
.s2 .marquee{margin-top:18px;padding:14px 0 16px;display:grid;gap:16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.s2 .row{display:flex;gap:16px;width:max-content;animation:s2-slide 70s linear infinite}
.s2 .row.rev{animation-direction:reverse;animation-duration:80s}
.s2 .marquee:hover .row{animation-play-state:paused}
@keyframes s2-slide{to{transform:translateX(-50%)}}
.s2 .logo{width:136px;height:96px;flex:none;border-radius:14px;display:flex;align-items:center;justify-content:center;padding:6px;overflow:hidden;
  background:#fff;border:1px solid #fff;box-shadow:0 10px 30px -14px rgba(0,0,0,.7);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.s2 .logo img{height:100%;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.75;transition:filter .4s,opacity .4s}
.s2 .logo:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 16px 40px -12px rgba(31,123,255,.6)}
.s2 .logo:hover img{filter:none;opacity:1}
.s2 .head{text-align:center;margin-top:110px}
.s2 .eyebrow{display:inline-flex;align-items:center;gap:20px;font-style:italic;font-weight:400;font-size:clamp(24px,2.4vw,34px);color:#3d8dff}
.s2 .eyebrow:before,.s2 .eyebrow:after{content:"";width:56px;height:1px;background:linear-gradient(90deg,transparent,#3d8dff)}
.s2 .eyebrow:after{transform:scaleX(-1)}
.s2 .head h2{font-weight:600;font-size:clamp(32px,4.2vw,58px);line-height:1.15;letter-spacing:-.02em;margin-top:6px}
.s2 .dline{display:flex;justify-content:center;gap:12px;margin:14px 0 16px}
.s2 .dline i{height:1px;width:110px;background-image:radial-gradient(circle,#8fa3c2 1px,transparent 1.5px);background-size:6px 1px}
.s2 .head p{font-size:clamp(15px,1.4vw,19px);font-weight:500;max-width:680px;margin:0 auto;line-height:1.6;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.s2 .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:60px}
.s2 .card{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;padding:30px 26px 28px;display:flex;flex-direction:column;
  background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(226,234,247,.9));border:1px solid rgba(70,140,255,.45);color:#fff;
  box-shadow:0 30px 50px -26px rgba(0,0,0,.85),0 0 40px -12px rgba(31,123,255,.45),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s,border-color .55s,color .45s}
.s2 .card:before{content:"";position:absolute;inset:0;z-index:-1;opacity:1;transition:opacity .55s ease;
  background:radial-gradient(circle at 50% 0%,rgba(31,123,255,.4),transparent 60%),linear-gradient(160deg,#12295c,#06102a)}
.s2 .card:hover{transform:translateY(-12px);color:var(--ink);border-color:rgba(255,255,255,.9);
  box-shadow:0 30px 60px -14px rgba(31,123,255,.75),0 0 0 1px rgba(255,255,255,.4),inset 0 1px 0 #fff}
.s2 .card:hover:before{opacity:0}
.s2 .num{position:absolute;top:24px;right:26px;font-size:44px;font-weight:700;line-height:1;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9;transition:opacity .5s}
.s2 .card:hover .num{opacity:.3}
.s2 .ic{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.16),0 0 30px rgba(31,123,255,.45);
  transition:background .5s,box-shadow .5s,transform .55s cubic-bezier(.2,.8,.2,1)}
.s2 .ic svg{stroke:#fff;transition:stroke .4s}
.s2 .card:hover .ic{background:#fff;box-shadow:0 10px 24px rgba(31,123,255,.3);transform:scale(1.08) rotate(-6deg)}
.s2 .card:hover .ic svg{stroke:#1f6dff}
.s2 .card h3{font-size:21px;font-weight:600;margin:24px 0 10px}
.s2 .card p{font-size:14.5px;line-height:1.65;color:#b9c7dc;transition:color .45s}
.s2 .card:hover p{color:#4a5872}
.s2 .card ul{list-style:none;margin:20px 0 24px;display:grid;gap:9px;font-size:14px}
.s2 .card li{display:flex;align-items:center;gap:10px}
.s2 .card li:before{content:"";flex:none;width:18px;height:18px;border-radius:50%;
  background:rgba(31,123,255,.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' stroke='%237fb8ff' stroke-width='2'%3E%3Cpath d='M1.5 5.2 4 7.5 8.5 2.5'/%3E%3C/svg%3E") center no-repeat;transition:background-color .45s}
.s2 .card:hover li:before{background-color:#e3edff}
.s2 .more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:#7fb8ff;transition:color .4s,gap .3s}
.s2 .card:hover .more{color:#1f6dff;gap:14px}
.s2 .cta-bar{margin:56px auto 0;max-width:820px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 18px 18px 32px;border-radius:999px;
  background:rgba(10,16,30,.55);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.s2 .cta-bar span{font-size:16px;color:#d5deeb}
.s2 .cta-bar span b{font-weight:600;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.s2 .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;font-weight:500;font-size:15px;white-space:nowrap;
  background:linear-gradient(135deg,#2b8bff,#1561f0);box-shadow:0 8px 30px -6px rgba(31,123,255,.8),inset 0 1px 0 rgba(255,255,255,.35);transition:.3s}
.s2 .btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px -6px rgba(31,123,255,1)}
.s2 .btn .ar{transition:.3s}
.s2 .btn:hover .ar{transform:translateX(4px)}
.s2 .rv{opacity:0}
.s2 .rv.in{animation:s2-rise 1s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
@keyframes s2-rise{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
.shot .s2 .rv{opacity:1;animation:none}
.shot .s2 .row{animation:none}
@media (max-width:1100px) and (min-width:1001px){.s2 .grid{grid-template-columns:repeat(2,1fr)}}
.s2 .hbar{display:none}
@media (max-width:1000px){.s2 .hpin{position:sticky;top:var(--hh,0px);overflow:hidden;padding-bottom:6px}
.s2 .hpin .head{margin-top:0;padding-top:24px}
.s2 .grid{display:flex;gap:16px;margin-top:30px;padding:14px 0 18px;will-change:transform}
.s2 .card{flex:0 0 min(46vw,340px)}
.s2 .card:hover{transform:none}
.s2 .hbar{display:block;height:3px;border-radius:3px;margin:4px auto 0;width:min(240px,50%);background:rgba(255,255,255,.12);overflow:hidden}
.s2 .hbar i{display:block;height:100%;width:100%;border-radius:3px;background:linear-gradient(90deg,#1f6dff,#5aa8ff);transform-origin:0 50%;transform:scaleX(var(--hp,0))}
.s2 .hpin-outer.swipe .hpin{position:static}
.s2 .hpin-outer.swipe .grid{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;transform:none!important}
.s2 .hpin-outer.swipe .grid::-webkit-scrollbar{display:none}
.s2 .hpin-outer.swipe .card{scroll-snap-align:start}}
@media (max-width:640px){.s2 .sec{padding:80px 0 90px}
.s2 .wrap{width:calc(100% - 32px)}
.s2 .kicker{font-size:11px;gap:10px;letter-spacing:.18em}
.s2 .kicker:before,.s2 .kicker:after{width:22px}
.s2 .logo{width:112px;height:80px}
.s2 .head{margin-top:80px}
.s2 .eyebrow{gap:12px}
.s2 .eyebrow:before,.s2 .eyebrow:after{width:30px}
.s2 .dline i{width:70px}
.s2 .head{margin-top:70px}
.s2 .hpin .head p{display:none}
.s2 .hpin .head h2{font-size:28px}
.s2 .hpin .dline{margin:10px 0 0}
.s2 .grid{gap:14px;margin-top:22px}
.s2 .card{flex-basis:82vw;padding:24px 22px 22px}
.s2 .card h3{margin:18px 0 8px}
.s2 .card ul{margin:14px 0 18px;gap:7px}
.s2 .cta-bar{flex-direction:column;text-align:center;border-radius:22px;padding:22px}
.s2 .cta-bar .btn{width:100%;justify-content:center}}

/* ===== 02b-latest-project.html ===== */
.s6{--blue:#1f7bff;--bg:#010b1d;--mute:#9fb0c8;--gold:#f2c14e;
  --grad:linear-gradient(180deg,#5aa8ff 10%,#1f6dff 90%)}
.s6 a{color:inherit;text-decoration:none}
.s6 .wrap{width:min(1200px,100% - 48px);margin-inline:auto}
.s6 .sec{position:relative;padding:90px 0 110px;isolation:isolate;overflow:hidden;overflow:clip}
.s6 .sec:before{content:"";position:absolute;inset:0;z-index:-2;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  background:radial-gradient(700px 420px at 20% 55%,rgba(31,110,255,.18),transparent 70%),
             radial-gradient(640px 460px at 88% 40%,rgba(31,110,255,.14),transparent 70%)}
.s6 .sec:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.7;
  background:url(../tech-bg.svg) center top/1200px auto repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 240px,#000 calc(100% - 200px),transparent);mask-image:linear-gradient(180deg,transparent 0,#000 240px,#000 calc(100% - 200px),transparent)}
.s6 .head{text-align:center}
.s6 .eyebrow{display:inline-flex;align-items:center;gap:20px;font-style:italic;font-weight:400;font-size:clamp(24px,2.4vw,34px);color:#3d8dff}
.s6 .eyebrow:before,.s6 .eyebrow:after{content:"";width:56px;height:1px;background:linear-gradient(90deg,transparent,#3d8dff)}
.s6 .eyebrow:after{transform:scaleX(-1)}
.s6 .head h2{font-weight:600;font-size:clamp(32px,4.2vw,58px);line-height:1.15;letter-spacing:-.02em;margin-top:6px}
.s6 .dline{display:flex;justify-content:center;gap:12px;margin:14px 0 16px}
.s6 .dline i{height:1px;width:110px;background-image:radial-gradient(circle,#8fa3c2 1px,transparent 1.5px);background-size:6px 1px}
.s6 .head p{font-size:clamp(15px,1.4vw,19px);font-weight:500;max-width:680px;margin:0 auto;line-height:1.6;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.s6 .spot{position:relative;margin-top:56px;display:grid;grid-template-columns:1.22fr 1fr;gap:56px;align-items:center;
  padding:46px 48px 46px 40px;border-radius:30px;isolation:isolate;
  background:linear-gradient(150deg,rgba(18,40,92,.62),rgba(5,12,32,.72));border:1px solid rgba(90,150,255,.28);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 0 60px -20px rgba(31,123,255,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.s6 .spot:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;
  background:linear-gradient(100deg,transparent 35%,#5aa8ff 46%,var(--gold) 50%,#5aa8ff 54%,transparent 65%) 0 0/300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:s6-sweep 6s linear infinite}
@keyframes s6-sweep{from{background-position:100% 0}to{background-position:-50% 0}}
.s6 .new{position:absolute;top:-15px;left:40px;display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  background:linear-gradient(135deg,#2b8bff,#1561f0);box-shadow:0 8px 24px -6px rgba(31,123,255,.9)}
.s6 .new i{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:s6-ping 1.8s infinite}
@keyframes s6-ping{70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.s6 .stage{position:relative;padding:0 46px 40px 0}
.s6 .stage:before{content:"";position:absolute;left:8%;right:4%;top:14%;bottom:0;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(242,193,78,.22),rgba(31,110,255,.18) 55%,transparent);filter:blur(10px)}
.s6 .bw{border-radius:14px;overflow:hidden;background:#0b1224;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.9),0 0 0 6px rgba(255,255,255,.03);transform:perspective(1400px) rotateY(6deg) rotateX(2deg);transform-origin:left center}
.s6 .bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:linear-gradient(#141d33,#0e1628);border-bottom:1px solid rgba(255,255,255,.08)}
.s6 .bar>i{width:9px;height:9px;border-radius:50%;background:#ff5f57}
.s6 .bar>i:nth-child(2){background:#febc2e}
.s6 .bar>i:nth-child(3){background:#28c840}
.s6 .url{margin-left:12px;flex:1;display:flex;align-items:center;gap:8px;max-width:330px;padding:5px 12px;border-radius:7px;font-size:11.5px;color:#c6d2e4;background:rgba(255,255,255,.06)}
.s6 .url svg{flex:none}
.s6 .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:.12em;color:#5be39b}
.s6 .live i{width:6px;height:6px;border-radius:50%;background:#2ee584;box-shadow:0 0 8px #2ee584}
.s6 .scr{aspect-ratio:16/10;overflow:hidden;position:relative;container-type:size;background:#0a0b24}
.s6 .scr .strip{display:block;width:100%;height:auto;transform:translateY(0);transition:transform 1.6s cubic-bezier(.4,0,.2,1)}
.s6 .scr .snav{position:absolute;left:0;top:0;width:100%;height:auto;z-index:2;pointer-events:none}
.s6 .bw:hover .strip{transform:translateY(calc(-100% + 100cqh));transition:transform 9s cubic-bezier(.45,0,.4,1)}
.s6 .scr .prog{position:absolute;left:0;top:0;z-index:3;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,#c9962e,#f2c14e 70%,#ffe39a);box-shadow:0 0 6px rgba(242,193,78,.8);
  transition:transform 1.6s cubic-bezier(.4,0,.2,1)}
.s6 .bw:hover .prog{transform:scaleX(1);transition:transform 9s cubic-bezier(.45,0,.4,1)}
.s6 .hint{position:absolute;left:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
  font-size:11px;font-weight:500;color:#e6ecf5;background:rgba(1,11,29,.78);border:1px solid rgba(255,255,255,.18);transition:opacity .4s}
.s6 .hint i{display:inline-block;animation:s6-nudge 1.6s ease-in-out infinite}
@keyframes s6-nudge{50%{transform:translateY(3px)}}
.s6 .bw:hover .hint{opacity:0}
.s6 .touch .hint{display:none}
.s6 .touch .stage.in .strip{animation:s6-tour 18s 1s cubic-bezier(.45,0,.4,1) infinite}
.s6 .touch .stage.in .prog{animation:s6-tourbar 18s 1s cubic-bezier(.45,0,.4,1) infinite}
@keyframes s6-tourbar{0%,10%{transform:scaleX(0)}55%,65%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes s6-tour{0%,10%{transform:translateY(0)}55%,65%{transform:translateY(calc(-100% + 100cqh))}100%{transform:translateY(0)}}
.s6 .ph{position:absolute;right:0;bottom:0;width:27%;aspect-ratio:9/19;border-radius:26px;padding:7px;
  background:linear-gradient(160deg,#2a3550,#0a0f1d);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 50px -16px rgba(0,0,0,.95),0 0 30px -6px rgba(31,123,255,.5)}
.s6 .ph:before{content:"";position:absolute;top:13px;left:50%;width:30%;height:6px;margin-left:-15%;border-radius:6px;background:#05080f;z-index:2}
.s6 .ph .in{width:100%;height:100%;border-radius:20px;overflow:hidden}
.s6 .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.s6 .chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;font-size:12.5px;font-weight:500;white-space:nowrap;
  background:rgba(10,20,44,.82);border:1px solid rgba(110,160,255,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.8)}
.s6 .chip b{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:rgba(31,123,255,.25);color:#8cc2ff;font-size:12px}
.s6 .c1{left:-22px;top:52%;animation:s6-bob 5s ease-in-out infinite}
.s6 .c2{left:30%;bottom:6px;animation:s6-bob 5s 1.2s ease-in-out infinite}
@keyframes s6-bob{50%{transform:translateY(-8px)}}
.s6 .meta{display:flex;align-items:center;gap:12px;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#9fb0c8}
.s6 .meta b{color:var(--gold);font-weight:600}
.s6 .meta i{width:28px;height:1px;background:#3d8dff}
.s6 .info h3{font-weight:600;font-size:clamp(28px,2.7vw,40px);line-height:1.15;letter-spacing:-.01em;margin:14px 0 6px}
.s6 .info h3 span{display:block;font-weight:300;font-size:.62em;color:#c6d2e4;letter-spacing:0}
.s6 .info p{color:#b8c5d9;font-size:15.5px;line-height:1.7;margin-top:14px}
.s6 .facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:24px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.03)}
.s6 .facts div{padding:14px 16px;border-right:1px solid rgba(255,255,255,.08)}
.s6 .facts div:last-child{border:0}
.s6 .facts small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7f91ad}
.s6 .facts b{display:block;font-weight:500;font-size:14px;margin-top:3px}
.s6 .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.s6 .tags span{padding:7px 13px;border-radius:999px;font-size:12.5px;color:#cfe0ff;background:rgba(31,123,255,.12);border:1px solid rgba(70,140,255,.3)}
.s6 .btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.s6 .cta{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;font-weight:500;font-size:15px;
  background:linear-gradient(135deg,#2b8bff,#1561f0);box-shadow:0 10px 30px -8px rgba(31,123,255,.9),inset 0 1px 0 rgba(255,255,255,.35)}
.s6 .ghost{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;font-weight:500;font-size:15px;border:1px solid rgba(255,255,255,.25);color:#e6ecf5}
.s6 .cta,.s6 .ghost{transition:transform .3s,box-shadow .3s,background .3s,border-color .3s}
.s6 .cta:hover{transform:translateY(-2px);box-shadow:0 14px 40px -6px rgba(31,123,255,1)}
.s6 .ghost:hover{border-color:#5aa8ff;background:rgba(31,123,255,.12)}
.s6 .cta span,.s6 .ghost span{transition:transform .3s}
.s6 .cta:hover span{transform:translate(3px,-3px)}
.s6 .down .arr{position:relative;display:inline-grid;place-items:center;width:26px;height:26px;margin-right:-8px;border-radius:50%;
  background:rgba(31,123,255,.18);border:1px solid rgba(90,168,255,.45);color:#8cc2ff;overflow:hidden}
.s6 .down .arr svg{animation:s6-drop 1.8s cubic-bezier(.45,0,.3,1) infinite}
@keyframes s6-drop{0%{transform:translateY(-18px);opacity:0}25%,60%{transform:translateY(0);opacity:1}100%{transform:translateY(18px);opacity:0}}
.s6 .down:hover .arr{background:#1f7bff;border-color:#5aa8ff;color:#fff}
.s6 .down:hover .arr svg{animation-duration:1.1s}
.s6 .ph{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.s6 .bw{position:relative;z-index:1}
.s6 .ph{z-index:3}
.s6 .chip{z-index:4}
.s6 .stage:hover .ph{transform:translateY(-8px) rotate(-2deg)}
.s6 .rv{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.s6 .stage.rv{transform:translateX(-50px)}
.s6 .info.rv{transform:translateX(50px)}
.s6 .rv.in{opacity:1;transform:none}
@media (max-width:1000px){.s6 .spot{grid-template-columns:1fr;gap:34px;padding:40px 22px 28px}
.s6 .stage{padding:0 30px 30px 0}
.s6 .bw{transform:none}}
@media (max-width:640px){.s6 .sec{padding:60px 0 80px}
.s6 .eyebrow{gap:12px}
.s6 .eyebrow:before,.s6 .eyebrow:after{width:30px}
.s6 .spot{margin-top:40px;border-radius:24px;padding:34px 16px 22px}
.s6 .new{left:22px}
.s6 .stage{padding:0 18px 26px 0}
.s6 .ph{width:31%;border-radius:18px;padding:5px}
.s6 .ph .in{border-radius:14px}
.s6 .ph:before{top:9px;height:4px}
.s6 .url{font-size:10px;padding:4px 8px}
.s6 .live{display:none}
.s6 .chip{font-size:11px;padding:6px 10px}
.s6 .chip b{width:18px;height:18px}
.s6 .c1{display:none}
.s6 .c2{left:10%;bottom:0}
.s6 .facts div{padding:12px 10px}
.s6 .facts small{font-size:9.5px;letter-spacing:.12em}
.s6 .facts b{font-size:12.5px}
.s6 .info p{font-size:14.5px}
.s6 .btns{flex-direction:column}
.s6 .btns a{justify-content:center}}

/* ===== 03-portfolio.html ===== */
.s3{--blue:#1f7bff;--bg:#010b1d;--grad:linear-gradient(180deg,#5aa8ff 10%,#1f6dff 90%)}
.s3 a,.s3 button{color:inherit;text-decoration:none;font:inherit;background:none;border:0;cursor:pointer}
.s3 .wrap{width:min(1200px,100% - 48px);margin-inline:auto}
.s3 .sec{position:relative;padding:90px 0 120px;isolation:isolate;overflow:hidden;overflow:clip}
.s3 .sec:before{content:"";position:absolute;inset:0;z-index:-2;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  background:radial-gradient(700px 460px at 85% 20%,rgba(31,110,255,.15),transparent 70%),
             radial-gradient(700px 460px at 10% 75%,rgba(31,110,255,.14),transparent 70%)}
.s3 .sec:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.7;
  background:url(../tech-bg.svg) center calc(0px - var(--bgy,0px))/1200px auto repeat fixed}
.s3 .head{text-align:center}
.s3 .eyebrow{display:inline-flex;align-items:center;gap:20px;font-style:italic;font-size:clamp(24px,2.4vw,34px);color:#3d8dff}
.s3 .eyebrow:before,.s3 .eyebrow:after{content:"";width:56px;height:1px;background:linear-gradient(90deg,transparent,#3d8dff)}
.s3 .eyebrow:after{transform:scaleX(-1)}
.s3 .head h2{font-weight:600;font-size:clamp(32px,4.2vw,58px);line-height:1.15;letter-spacing:-.02em;margin-top:6px}
.s3 .dline{display:flex;justify-content:center;gap:12px;margin:14px 0 16px}
.s3 .dline i{height:1px;width:110px;background-image:radial-gradient(circle,#8fa3c2 1px,transparent 1.5px);background-size:6px 1px}
.s3 .head p{font-size:clamp(15px,1.4vw,19px);font-weight:500;max-width:680px;margin:0 auto;line-height:1.6;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (min-width:900px){.s3 .head p{max-width:none;white-space:nowrap}}
.s3 .fmore{display:none}
@media (max-width:640px){.s3 .fmore{display:grid}}
.s3 .fwrap{position:sticky;top:var(--stick-top,0px);z-index:20;padding:22px 0 40px;margin:20px 0 -16px}
.s3 .fwrap:before{content:"";position:absolute;top:0;bottom:0;left:-50vw;right:-50vw;z-index:-1;pointer-events:none;opacity:0;transition:opacity .45s;
  background:linear-gradient(180deg,rgba(1,11,29,.97) 0%,rgba(1,11,29,.94) 62%,rgba(1,11,29,.6) 80%,rgba(1,11,29,0) 100%)}
.s3 .fwrap.stuck:before{opacity:1}
.s3 .filters{position:relative;display:flex;gap:4px;width:max-content;max-width:100%;margin:0 auto;padding:6px;border-radius:999px;
  background:rgba(10,16,30,.6);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:box-shadow .45s,border-color .45s,background .45s}
.s3 .fwrap.stuck .filters{background:rgba(8,20,48,.85);border-color:rgba(70,140,255,.45);box-shadow:0 16px 40px -12px rgba(0,0,0,.9),0 0 30px -8px rgba(31,123,255,.5)}
.s3 .filters button{position:relative;z-index:1;padding:11px 22px;border-radius:999px;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:#b9c6da;transition:color .35s}
.s3 .filters button:hover,.s3 .filters button.on{color:#fff}
.s3 .filters button .n{margin-left:7px;font-size:10.5px;letter-spacing:0;padding:2px 7px;border-radius:99px;background:rgba(255,255,255,.1);vertical-align:1px;transition:background .35s}
.s3 .filters button.on .n{background:rgba(255,255,255,.22)}
.s3 .filters .pill{position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:999px;
  background:linear-gradient(135deg,#2b8bff,#1561f0);box-shadow:0 6px 20px -4px rgba(31,123,255,.8),inset 0 1px 0 rgba(255,255,255,.3);
  transition:left .5s cubic-bezier(.2,.8,.2,1),width .5s cubic-bezier(.2,.8,.2,1)}
.s3 .grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:380px;gap:24px;margin-top:0;scroll-margin-top:calc(var(--stick-top,0px) + 110px)}
.s3 .item{position:relative;display:flex;flex-direction:column;border-radius:22px;padding:12px;cursor:pointer;
  background:linear-gradient(160deg,rgba(18,41,92,.75),rgba(6,16,42,.85));border:1px solid rgba(70,140,255,.35);
  box-shadow:0 30px 50px -28px rgba(0,0,0,.9),0 0 40px -16px rgba(31,123,255,.4),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s,border-color .55s}
.s3 .item:hover{transform:translateY(-10px);border-color:rgba(120,180,255,.7);box-shadow:0 34px 60px -18px rgba(31,123,255,.65),0 0 0 1px rgba(31,123,255,.3)}
.s3 .item.hide{display:none}
.s3 .item.pop{animation:s3-pop .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes s3-pop{from{opacity:0;transform:scale(.94) translateY(20px)}}
.s3 .frame{position:relative;flex:1;min-height:0;border-radius:14px;overflow:hidden;background:#0a1226}
.s3 .bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:linear-gradient(#18233d,#111a2f);border-bottom:1px solid rgba(255,255,255,.06)}
.s3 .bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}
.s3 .bar i:nth-child(2){background:#febc2e}
.s3 .bar i:nth-child(3){background:#28c840}
.s3 .bar span{margin-left:10px;flex:1;max-width:60%;height:16px;border-radius:6px;background:rgba(255,255,255,.07);font-size:9.5px;color:#8ea0bd;display:flex;align-items:center;padding:0 8px;letter-spacing:.02em}
.s3 .view{position:absolute;inset:30px 0 0;overflow:hidden;background:#fff}
.s3 .view img{width:100%;display:block;transform:translateY(0);transition:transform 3.2s cubic-bezier(.45,.05,.35,1)}
.s3 .item:hover .view img{transform:translateY(calc(-100% + var(--vh, 300px)))}
.s3 .frame.logo .view{inset:0;display:flex;align-items:center;justify-content:center;padding:26px;background:#fff}
.s3 .frame.logo .view img{width:auto;height:auto;max-width:78%;max-height:88%;object-fit:contain;
  transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.s3 .item:hover .frame.logo .view img{transform:scale(1.08)}
.s3 .frame.plain .view{inset:0;display:flex;align-items:center;justify-content:center;padding:22px;
  background:radial-gradient(circle at 50% 35%,#16305e,#0a1530 75%)}
.s3 .frame.plain .view img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;
  box-shadow:0 18px 30px -10px rgba(0,0,0,.7);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.s3 .item:hover .frame.plain .view img{transform:scale(1.06)}
.s3 .cap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 8px 6px}
.s3 .cap h3{font-size:17px;font-weight:600;line-height:1.3}
.s3 .cap small{display:inline-block;margin-top:6px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#7fb8ff}
.s3 .go{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:18px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);transition:background .4s,color .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.s3 .item:hover .go{background:#fff;color:#1f6dff;transform:rotate(45deg)}
@media (min-width:1200px){.s3 #portfolio .wrap{width:min(1320px,100% - 64px)}
.s3 .grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:340px;gap:22px}
.s3 .cap h3{font-size:16px}}
.s3 .item.more{display:none}
.s3 .more-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:50px}
.s3 .more-wrap[hidden]{display:none}
.s3 .more-wrap small{font-size:13px;color:#8fa3c2;letter-spacing:.04em}
.s3 .more-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 34px;border-radius:999px;font-weight:500;font-size:15.5px;color:#fff;
  background:linear-gradient(135deg,#2b8bff,#1561f0);box-shadow:0 8px 30px -6px rgba(31,123,255,.8),inset 0 1px 0 rgba(255,255,255,.35);transition:.3s}
.s3 .more-btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px -6px rgba(31,123,255,1)}
.s3 .more-btn .ar{display:inline-block;transition:transform .3s}
.s3 .more-btn:hover .ar{transform:translateY(3px)}
.s3 .more-btn.less .ar{transform:rotate(180deg)}
.s3 .more-btn.less:hover .ar{transform:rotate(180deg) translateY(3px)}
.s3 .lb{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:40px;background:rgba(1,8,22,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.s3 .lb.open{opacity:1;visibility:visible}
.s3 .lb figure{max-width:min(1000px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px;transform:scale(.94);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.s3 .lb.open figure{transform:none}
.s3 .lb img{max-height:calc(100vh - 160px);width:auto;max-width:100%;margin:auto;border-radius:14px;box-shadow:0 40px 80px -20px #000;background:#fff}
.s3 .lb figcaption{text-align:center;font-size:15px}
.s3 .lb figcaption small{display:block;color:#7fb8ff;letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;margin-top:4px}
.s3 .lb .x,.s3 .lb .nav{position:absolute;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:20px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);transition:background .3s}
.s3 .lb .x:hover,.s3 .lb .nav:hover{background:#1f6dff}
.s3 .lb .x{top:24px;right:24px}
.s3 .lb .prev{left:24px;top:50%;margin-top:-26px}
.s3 .lb .next{right:24px;top:50%;margin-top:-26px}
.s3 .rv{opacity:0}
.s3 .rv.in{animation:s3-rise 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
@keyframes s3-rise{from{opacity:0;transform:translateY(50px);}to{opacity:1;transform:none;filter:none}}
.shot .s3 .rv{opacity:1;animation:none}
@media (max-width:1000px){.s3 .grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.s3 .sec{padding:70px 0 90px}
.s3 .wrap{width:calc(100% - 32px)}
.s3 .eyebrow{gap:12px}
.s3 .eyebrow:before,.s3 .eyebrow:after{width:30px}
.s3 .dline i{width:70px}
.s3 .filters{overflow-x:auto;scrollbar-width:none;justify-content:flex-start;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.s3 .filters::-webkit-scrollbar{display:none}
.s3 .filters.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent)}
.s3 .filters.more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}
.s3 .filters.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 64px),transparent)}
.s3 .fmore{position:absolute;top:22px;height:calc(100% - 62px);width:34px;display:grid;place-items:center;border:0;padding:0;color:#fff;
    font-size:22px;line-height:1;opacity:0;pointer-events:none;transition:opacity .3s}
.s3 .fmore.r{right:2px}
.s3 .fmore.l{left:2px}
.s3 .fmore span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#1f6dff;box-shadow:0 4px 14px rgba(31,123,255,.8)}
.s3 .fmore.r span{animation:s3-s3-nudge 1.4s ease-in-out infinite}
.s3 .fmore.l span{animation:s3-s3-nudgeL 1.4s ease-in-out infinite}
.s3 .fmore.on{opacity:1;pointer-events:auto}
@keyframes s3-nudge{50%{transform:translateX(4px)}}
@keyframes s3-nudgeL{50%{transform:translateX(-4px)}}
.s3 .filters button{padding:10px 15px;font-size:12px;letter-spacing:.08em;white-space:nowrap}
.s3 .grid{grid-template-columns:1fr;gap:18px}
.s3 .grid{grid-auto-rows:340px}
.s3 .lb{padding:16px}
.s3 .lb .nav{top:auto;bottom:20px;margin:0}
.s3 .lb .prev{left:calc(50% - 64px)}
.s3 .lb .next{right:calc(50% - 64px)}}

/* ===== 04-about.html ===== */
.s4{--blue:#1f7bff;--bg:#010b1d;--grad:linear-gradient(180deg,#5aa8ff 10%,#1f6dff 90%)}
.s4 a{color:inherit;text-decoration:none}
.s4 .wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.s4 .sec{position:relative;padding:90px 0 120px;isolation:isolate;overflow:hidden;overflow:clip}
.s4 .sec:before{content:"";position:absolute;inset:0;z-index:-2;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  background:radial-gradient(700px 520px at 22% 42%,rgba(31,110,255,.2),transparent 70%),
             radial-gradient(640px 460px at 88% 80%,rgba(31,110,255,.13),transparent 70%)}
.s4 .sec:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.7;
  background:url(../tech-bg.svg) center calc(0px - var(--bgy,0px))/1200px auto repeat fixed}
.s4 .head{text-align:center}
.s4 .eyebrow{display:inline-flex;align-items:center;gap:20px;font-style:italic;font-size:clamp(24px,2.4vw,34px);color:#3d8dff}
.s4 .eyebrow:before,.s4 .eyebrow:after{content:"";width:56px;height:1px;background:linear-gradient(90deg,transparent,#3d8dff)}
.s4 .eyebrow:after{transform:scaleX(-1)}
.s4 .head h2{font-weight:600;font-size:clamp(32px,4.2vw,58px);line-height:1.15;letter-spacing:-.02em;margin-top:6px}
.s4 .dline{display:flex;justify-content:center;gap:12px;margin:14px 0 16px}
.s4 .dline i{height:1px;width:110px;background-image:radial-gradient(circle,#8fa3c2 1px,transparent 1.5px);background-size:6px 1px}
.s4 .head p{font-size:clamp(15px,1.4vw,19px);font-weight:500;margin:0 auto;line-height:1.6;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.s4 .intro{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:center;margin-top:70px}
.s4 .orbit{position:relative;width:min(520px,100%);aspect-ratio:1;margin:auto;container-type:inline-size;--r1:31cqw;--r2:46cqw}
.s4 .orbit .glow{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(31,123,255,.45),transparent 68%);filter:blur(20px)}
.s4 .ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);border:1px dashed rgba(110,160,255,.28)}
.s4 .ring.r1{width:calc(var(--r1) * 2);height:calc(var(--r1) * 2)}
.s4 .ring.r2{width:calc(var(--r2) * 2);height:calc(var(--r2) * 2);border-style:solid;border-color:rgba(110,160,255,.14)}
.s4 .core{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,#15336e,#071331 75%);border:1px solid rgba(110,170,255,.5);
  box-shadow:0 0 0 10px rgba(31,123,255,.07),0 0 60px rgba(31,123,255,.55),inset 0 1px 0 rgba(255,255,255,.15)}
.s4 .core img{width:52%;filter:drop-shadow(0 0 14px rgba(61,141,255,.6))}
.s4 .core:after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px solid transparent;border-top-color:#3d8dff;border-right-color:rgba(61,141,255,.3);animation:s4-spin 6s linear infinite}
.s4 .track{position:absolute;inset:0;animation:s4-spin var(--t,40s) linear infinite}
.s4 .track.rev{animation-direction:reverse}
.s4 .tool{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;
  transform:rotate(var(--a)) translateY(calc(-1 * var(--rad))) rotate(calc(-1 * var(--a)))}
.s4 .tool span{display:grid;place-items:center;width:100%;height:100%;border-radius:18px;padding:12px;
  background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(226,234,247,.9));box-shadow:0 12px 26px -10px rgba(0,0,0,.8),0 0 22px -6px rgba(31,123,255,.6);
  animation:s4-spin var(--t,40s) linear infinite reverse}
.s4 .track.rev .tool span{animation-direction:normal}
.s4 .tool img{max-width:100%;max-height:100%}
@keyframes s4-spin{to{transform:rotate(360deg)}}
.s4 .badge{position:absolute;padding:12px 16px;border-radius:16px;background:rgba(10,20,44,.72);border:1px solid rgba(110,160,255,.35);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 40px -18px #000;animation:s4-bob 6s ease-in-out infinite}
.s4 .badge b{display:block;font-size:24px;font-weight:600;line-height:1.1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.s4 .badge small{font-size:12px;color:#b9c6da}
.s4 .badge.b1{left:-2%;bottom:10%}
.s4 .badge.b2{right:-2%;top:8%;animation-delay:-3s}
@keyframes s4-bob{50%{transform:translateY(-12px)}}
.s4 .story .kick{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#7fb8ff}
.s4 .story h3{font-size:clamp(26px,2.6vw,36px);font-weight:600;line-height:1.25;margin:12px 0 20px}
.s4 .story h3 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.s4 .story p{font-size:16px;line-height:1.8;color:#b9c7dc;margin-bottom:14px}
.s4 .story p b{color:#fff;font-weight:500}
.s4 .strengths{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.s4 .strengths span{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;font-size:13.5px;
  background:rgba(255,255,255,.05);border:1px solid rgba(110,160,255,.3);transition:background .35s,border-color .35s,transform .35s}
.s4 .strengths span:hover{background:rgba(31,123,255,.25);border-color:#3d8dff;transform:translateY(-3px)}
.s4 .strengths span:before{content:"";width:7px;height:7px;border-radius:50%;background:#3d8dff;box-shadow:0 0 10px #3d8dff}
.s4 .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.s4 .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;font-weight:500;font-size:15px;transition:.3s}
.s4 .btn.p{background:linear-gradient(135deg,#2b8bff,#1561f0);box-shadow:0 8px 30px -6px rgba(31,123,255,.8),inset 0 1px 0 rgba(255,255,255,.35)}
.s4 .btn.g{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05)}
.s4 .btn:hover{transform:translateY(-2px)}
.s4 .btn .ar{transition:.3s}
.s4 .btn:hover .ar{transform:translateX(4px)}
.s4 .sub-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin:110px 0 34px}
.s4 .sub-head h3{font-size:clamp(24px,2.4vw,34px);font-weight:600}
.s4 .sub-head h3 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.s4 .sub-head p{max-width:420px;color:#9fb0c8;font-size:15px;line-height:1.6}
.s4 .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.s4 .hl{position:relative;padding:28px 26px;border-radius:22px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,rgba(18,41,92,.6),rgba(6,16,42,.75));border:1px solid rgba(70,140,255,.3);
  box-shadow:0 30px 50px -30px rgba(0,0,0,.9);transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .5s,box-shadow .5s}
.s4 .hl:before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(61,141,255,.28),transparent 60%)}
.s4 .hl:hover{transform:translateY(-8px);border-color:rgba(120,180,255,.65);box-shadow:0 30px 60px -20px rgba(31,123,255,.55)}
.s4 .hl:hover:before{opacity:1}
.s4 .hl .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(43,139,255,.3),rgba(21,97,240,.15));border:1px solid rgba(110,170,255,.4);margin-bottom:20px}
.s4 .hl .ic svg{stroke:#8cc4ff}
.s4 .hl h4{font-size:18px;font-weight:600;margin-bottom:10px}
.s4 .hl p{font-size:14.5px;line-height:1.7;color:#a9b8cd}
.s4 .hl p b{color:#fff;font-weight:500}
.s4 .hl .no{position:absolute;right:22px;top:20px;font-size:13px;font-weight:600;letter-spacing:.1em;color:rgba(127,184,255,.55)}
.s4 .quote{margin:90px auto 0;max-width:900px;text-align:center;position:relative;padding:44px 40px;border-radius:26px;
  background:rgba(10,18,40,.55);border:1px solid rgba(110,160,255,.25);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.s4 .quote:before{content:"“";position:absolute;left:50%;top:-38px;transform:translateX(-50%);font-size:110px;line-height:1;font-weight:700;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.s4 .quote blockquote{font-size:clamp(20px,2.2vw,28px);font-weight:500;line-height:1.45}
.s4 .quote blockquote em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.s4 .quote cite{display:block;margin-top:16px;font-style:normal;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#8fa3c2}
.s4 .rv{opacity:0}
.s4 .rv.in{animation:s4-rise 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
@keyframes s4-rise{from{opacity:0;transform:translateY(50px);}to{opacity:1;transform:none;filter:none}}
.shot .s4 .rv{opacity:1;animation:none}
.shot .s4 .track,.shot .s4 .tool span,.shot .s4 .core:after,.shot .s4 .badge{animation:none}
@media (max-width:1000px){.s4 .intro{grid-template-columns:1fr;gap:50px}
.s4 .sub-head{flex-direction:column;align-items:flex-start}
.s4 .cards{display:block;max-width:620px;margin:0 auto}
.s4 .hl{position:sticky;top:calc(var(--hh,0px) + 24px + var(--i,0) * 14px);margin-bottom:14vh;
    background:linear-gradient(160deg,#10275a,#06122f);transform-origin:50% 0;
    transform:scale(var(--s,1));filter:brightness(var(--b,1));box-shadow:0 -10px 40px -18px rgba(0,0,0,.9),0 30px 50px -30px rgba(0,0,0,.9)}
.s4 .hl:last-child{margin-bottom:0}
.s4 .hl:hover{transform:scale(var(--s,1))}}
@media (max-width:640px){.s4 .sec{padding:70px 0 90px}
.s4 .wrap{width:calc(100% - 32px)}
.s4 .eyebrow{gap:12px}
.s4 .eyebrow:before,.s4 .eyebrow:after{width:30px}
.s4 .dline i{width:70px}
.s4 .intro{margin-top:44px}
.s4 .tool{width:44px;height:44px;margin:-22px 0 0 -22px}
.s4 .tool span{border-radius:13px;padding:8px}
.s4 .badge{padding:9px 12px}
.s4 .badge b{font-size:18px}
.s4 .badge small{font-size:10.5px}
.s4 .sub-head{margin-top:80px}
.s4 .quote{padding:40px 22px 30px}}

/* ===== 05-contact-footer.html ===== */
.s5{--blue:#1f7bff;--bg:#010b1d;--grad:linear-gradient(180deg,#5aa8ff 10%,#1f6dff 90%)}
.s5 a,.s5 button{color:inherit;text-decoration:none;font:inherit;background:none;border:0;cursor:pointer}
.s5 .wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.s5 .sec{position:relative;padding:90px 0 110px;isolation:isolate;overflow:hidden;overflow:clip}
.s5 .sec:before{content:"";position:absolute;inset:0;z-index:-2;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  background:radial-gradient(760px 520px at 78% 45%,rgba(31,110,255,.2),transparent 70%),
             radial-gradient(600px 460px at 12% 70%,rgba(31,110,255,.13),transparent 70%)}
.s5 .sec:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.7;
  background:url(../tech-bg.svg) center calc(0px - var(--bgy,0px))/1200px auto repeat fixed}
.s5 .head{text-align:center}
.s5 .eyebrow{display:inline-flex;align-items:center;gap:20px;font-style:italic;font-size:clamp(24px,2.4vw,34px);color:#3d8dff}
.s5 .eyebrow:before,.s5 .eyebrow:after{content:"";width:56px;height:1px;background:linear-gradient(90deg,transparent,#3d8dff)}
.s5 .eyebrow:after{transform:scaleX(-1)}
.s5 .head h2{font-weight:600;font-size:clamp(32px,4.2vw,58px);line-height:1.15;letter-spacing:-.02em;margin-top:6px}
.s5 .dline{display:flex;justify-content:center;gap:12px;margin:14px 0 16px}
.s5 .dline i{height:1px;width:110px;background-image:radial-gradient(circle,#8fa3c2 1px,transparent 1.5px);background-size:6px 1px}
.s5 .head p{font-size:clamp(15px,1.4vw,19px);font-weight:500;line-height:1.6;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.s5 .grid{max-width:860px;margin:54px auto 0;display:flex;flex-direction:column;align-items:center;gap:22px}
.s5 .grid .form{width:100%}
.s5 .glass{background:linear-gradient(160deg,rgba(18,41,92,.55),rgba(6,16,42,.72));border:1px solid rgba(70,140,255,.32);border-radius:24px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 30px 60px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07)}
.s5 .avail{display:inline-flex;align-items:center;gap:12px;padding:11px 22px 11px 16px;border-radius:999px;font-size:14px;
  background:rgba(51,225,155,.08);border:1px solid rgba(51,225,155,.35)}
.s5 .avail b{font-weight:600}
.s5 .avail small{color:#a9b8cd;font-size:13.5px;padding-left:12px;border-left:1px solid rgba(255,255,255,.18)}
.s5 .dot{flex:none;width:10px;height:10px;border-radius:50%;background:#33e19b;box-shadow:0 0 0 0 rgba(51,225,155,.6);animation:s5-pulse 2s infinite}
@keyframes s5-pulse{70%{box-shadow:0 0 0 12px rgba(51,225,155,0)}100%{box-shadow:0 0 0 0 rgba(51,225,155,0)}}
.s5 .form{padding:34px}
.s5 .form h3{font-size:22px;font-weight:600}
.s5 .form .lead{font-size:14.5px;color:#a9b8cd;margin:6px 0 26px}
.s5 .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.s5 .f{position:relative;margin-bottom:16px}
.s5 .f input,.s5 .f textarea{width:100%;padding:24px 18px 10px;border-radius:14px;font:inherit;font-size:15px;color:#fff;
  background:rgba(1,11,29,.55);border:1px solid rgba(255,255,255,.14);outline:none;transition:border-color .3s,box-shadow .3s,background .3s}
.s5 .f textarea{min-height:130px;resize:vertical}
.s5 .f label{position:absolute;left:18px;top:17px;font-size:15px;color:#8fa3c2;pointer-events:none;transition:all .25s cubic-bezier(.2,.8,.2,1)}
.s5 .f input:focus+label,.s5 .f input:not(:placeholder-shown)+label,.s5 .f textarea:focus+label,.s5 .f textarea:not(:placeholder-shown)+label{top:7px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7fb8ff}
.s5 .f input:focus,.s5 .f textarea:focus{border-color:#3d8dff;background:rgba(1,11,29,.75);box-shadow:0 0 0 4px rgba(31,123,255,.18)}
.s5 .pick small{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#7fb8ff;margin-bottom:10px}
.s5 .pills{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.s5 .pills label{cursor:pointer}
.s5 .pills input{position:absolute;opacity:0;pointer-events:none}
.s5 .pills span{display:inline-block;padding:9px 16px;border-radius:999px;font-size:13.5px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);
  transition:background .3s,border-color .3s,color .3s,box-shadow .3s}
.s5 .pills label:hover span{border-color:#3d8dff}
.s5 .pills input:checked+span{background:linear-gradient(135deg,#2b8bff,#1561f0);border-color:transparent;box-shadow:0 6px 18px -6px rgba(31,123,255,.9)}
.s5 .send{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:6px}
.s5 .send small{font-size:12.5px;color:#8fa3c2;display:flex;align-items:center;gap:8px}
.s5 .btn{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;border-radius:999px;font-weight:500;font-size:15.5px;
  background:linear-gradient(135deg,#2b8bff,#1561f0);box-shadow:0 8px 30px -6px rgba(31,123,255,.8),inset 0 1px 0 rgba(255,255,255,.35);transition:.3s}
.s5 .btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px -6px rgba(31,123,255,1)}
.s5 .btn .ar{transition:.3s}
.s5 .btn:hover .ar{transform:translateX(4px)}
.s5 .msg{display:none;margin-top:16px;padding:14px 18px;border-radius:14px;font-size:14.5px;background:rgba(51,225,155,.12);border:1px solid rgba(51,225,155,.4);color:#bff5dc}
.s5 .msg.show{display:block}
.s5 footer{position:relative;padding:70px 0 0;overflow:hidden;
  background:linear-gradient(180deg,rgba(1,11,29,0),#00060f 30%)}
.s5 footer:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(61,141,255,.6),transparent)}
.s5 .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.s5 .fbrand{display:flex;align-items:flex-end;gap:14px;text-transform:uppercase}
.s5 .fbrand img{height:56px;filter:drop-shadow(0 0 14px rgba(61,141,255,.45))}
.s5 .fbrand .nm{display:flex;flex-direction:column;line-height:1;letter-spacing:.2em;margin-bottom:-3px}
.s5 .fbrand .nm span{font-weight:300;font-size:14px;color:#cfd9e8}
.s5 .fbrand .nm b{font-weight:600;font-size:21px;letter-spacing:.14em}
.s5 .fabout{margin-top:20px;font-size:14.5px;line-height:1.75;color:#93a5bf;max-width:330px}
.s5 footer h5{font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#7fb8ff;margin-bottom:18px}
.s5 footer ul{list-style:none;display:grid;gap:11px;font-size:14.5px;color:#b9c6da}
.s5 footer ul a{position:relative;transition:color .3s}
.s5 footer ul a:after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1.5px;background:#3d8dff;transition:width .35s}
.s5 footer ul a:hover{color:#fff}
.s5 footer ul a:hover:after{width:100%}
.s5 .fsoc-t{font-size:14px;line-height:1.6;color:#93a5bf;margin-bottom:16px;max-width:260px}
.s5 .soc{display:flex;gap:10px}
.s5 .soc a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  transition:background .35s,transform .35s,border-color .35s,box-shadow .35s}
.s5 .soc a:hover{background:#1f6dff;border-color:#1f6dff;transform:translateY(-4px);box-shadow:0 10px 24px -8px rgba(31,123,255,.9)}
.s5 .soc svg{width:18px;height:18px;fill:#fff}
.s5 .soc a[aria-label=Upwork]:hover{background:#14a800;border-color:#14a800;box-shadow:0 10px 24px -8px rgba(20,168,0,.8)}
.s5 .fbottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:56px;padding:22px 0;border-top:1px solid rgba(255,255,255,.08);font-size:13.5px;color:#8396b2}
.s5 .top-btn{display:inline-flex;align-items:center;gap:10px;color:#b9c6da;transition:color .3s}
.s5 .top-btn span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);transition:background .3s,border-color .3s,transform .3s}
.s5 .top-btn:hover{color:#fff}
.s5 .top-btn:hover span{background:#1f6dff;border-color:#1f6dff;transform:translateY(-3px)}
.s5 .mark{font-weight:800;font-size:clamp(64px,15.5vw,236px);line-height:.78;letter-spacing:-.03em;text-align:center;white-space:nowrap;
  margin:10px 0 -1vw;background:linear-gradient(180deg,rgba(61,141,255,.28),rgba(61,141,255,0) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}
.s5 .rv{opacity:0}
.s5 .rv.in{animation:s5-rise 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
@keyframes s5-rise{from{opacity:0;transform:translateY(50px);}to{opacity:1;transform:none;filter:none}}
.shot .s5 .rv{opacity:1;animation:none}
.shot .s5 .dot{animation:none}
@media (max-width:1000px){.s5 .fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.s5 .sec{padding:70px 0 80px}
.s5 .wrap{width:calc(100% - 32px)}
.s5 .eyebrow{gap:12px}
.s5 .eyebrow:before,.s5 .eyebrow:after{width:30px}
.s5 .dline i{width:70px}
.s5 .grid{margin-top:44px}
.s5 .form{padding:24px 18px}
.s5 .row2{grid-template-columns:1fr;gap:0}
.s5 .send .btn{width:100%;justify-content:center}
.s5 .avail{flex-wrap:wrap;justify-content:center;text-align:center;border-radius:18px}
.s5 .avail small{border:0;padding:0;width:100%}
.s5 .fgrid{grid-template-columns:1fr;gap:34px}
.s5 .fbottom{flex-direction:column-reverse;align-items:center;text-align:center}
.s5 .fgrid{text-align:center}
.s5 .fbrand{justify-content:center}
.s5 .fabout,.s5 .fsoc-t{margin-left:auto;margin-right:auto}
.s5 footer ul{justify-items:center}
.s5 .soc{justify-content:center}}