
/* ═══════════════════════════════════════════════════════════
   ABOUT v8 — Apple-level animations & polish
   ═══════════════════════════════════════════════════════════ */

/* ── REVEAL SYSTEM: upgraded ── */
[data-r]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .9s cubic-bezier(.16,1,.3,1);filter:blur(6px);will-change:opacity,transform,filter}
[data-r].vis{opacity:1;transform:none;filter:blur(0)}

/* Scale-in for cards */
[data-r-scale]{opacity:0;transform:scale(.92);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
[data-r-scale].vis{opacity:1;transform:scale(1)}

/* Slide-in from left/right for feat-rows */
.feat-row [data-r]{transform:translateY(0) translateX(-30px)}
.feat-row--r [data-r]{transform:translateY(0) translateX(30px)}
.feat-row [data-r].vis,.feat-row--r [data-r].vis{transform:none}

/* Stagger children */
[data-stagger]>*{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
[data-stagger].vis>*{opacity:1;transform:none}
[data-stagger].vis>*:nth-child(1){transition-delay:0s}
[data-stagger].vis>*:nth-child(2){transition-delay:.08s}
[data-stagger].vis>*:nth-child(3){transition-delay:.16s}
[data-stagger].vis>*:nth-child(4){transition-delay:.24s}
[data-stagger].vis>*:nth-child(5){transition-delay:.32s}
[data-stagger].vis>*:nth-child(6){transition-delay:.4s}

/* ── HERO PARALLAX fade ── */
.page-hero{transition:opacity .1s linear}
.page-hero.scrolled{opacity:0;pointer-events:none}
.page-hero-w{transition:transform .1s linear}

/* ── CARD HOVER: tilt + glow ── */
.page .c{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1),border-color .3s}
.page .c:hover{transform:translateY(-6px)}
.page.dk .c:hover{box-shadow:0 16px 48px rgba(0,0,0,.5);border-color:rgba(255,255,255,.14)}
.page.lt .c:hover{box-shadow:0 16px 48px rgba(0,0,0,.08);border-color:rgba(0,0,0,.12)}

/* ── FEAT-VIS: subtle float ── */
@keyframes floatVis{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.feat-vis.vis{animation:floatVis 6s ease-in-out infinite}

/* ── NUMBERS: count-up ready ── */
.num{transition:opacity .5s;font-variant-numeric:tabular-nums}
.num[data-count]{opacity:0}
.num[data-count].counted{opacity:1}

/* ── NAV: smoother hide/show ── */
.nv{transition:background .4s,transform .45s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.nv--hide{transform:translateY(-100%)}
.nv--solid{box-shadow:0 1px 12px rgba(0,0,0,.08)}

/* ── SUBNAV: underline slide ── */
.subnav-l{position:relative}
.subnav-l::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:#f37f0d;transform:scaleX(0);transition:transform .35s cubic-bezier(.16,1,.3,1);transform-origin:left}
.subnav-l.is-on::after,.subnav-l:hover::after{transform:scaleX(1)}

/* ── BAND: parallax-ready ── */
.page .band{overflow:hidden;position:relative}
.page .band .bh{transition:transform .1s linear}

/* ── TIMELINE: line draw ── */
.tl::before{transform:scaleY(0);transform-origin:top;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.tl.vis::before{transform:scaleY(1)}
.tl-i{opacity:0;transform:translateX(-20px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.tl-i.vis{opacity:1;transform:none}

/* ── AEGIS PILLS: stagger entrance ── */
.aegis-pill{opacity:0;transform:translateY(10px) scale(.95);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1),border-color .2s,background .2s}
.aegis-pill.vis{opacity:1;transform:none}
.aegis-pill:hover{transform:translateY(-3px) scale(1.02)}

/* ── SPEC PILLS: hover pop ── */
.spec-pill{transition:background .25s,transform .25s cubic-bezier(.16,1,.3,1),color .25s}
.spec-pill:hover{transform:translateY(-2px)}
.dk .spec-pill:hover{background:rgba(255,255,255,.10);color:rgba(255,255,255,.8)}
.lt .spec-pill:hover{background:rgba(0,0,0,.06);color:#1d1d1f}

/* ── SCROLL BAR: accent color ── */
.scroll-bar{background:#f37f0d;height:2px;position:fixed;top:0;left:0;right:0;z-index:999;transform:scaleX(0);transform-origin:left;transition:none}

/* ── SMOOTH ANCHOR SCROLL ── */
html{scroll-behavior:smooth}

/* ── PREV/NEXT: arrow slide ── */
.pn-item svg{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.pn-next:hover svg{transform:translateX(4px)}
.pn-prev:hover svg{transform:translateX(-4px)}

/* ── FOOTER: reveal ── */
.page .ft{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.page .ft.vis{opacity:1;transform:none}

/* ── MEGA MENU: smoother ── */
.page .mg{transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1);transform:translateY(-8px)}
.page .mg.open{transform:translateY(0)}

/* ── LOADING SHIMMER for placeholders ── */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.feat-vis span{background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.03) 50%,transparent 70%);background-size:200% 100%;animation:shimmer 3s ease infinite}

/* ── MOBILE: reduce motion ── */
@media(prefers-reduced-motion:reduce){
  [data-r],[data-r-scale],[data-stagger]>*,.tl-i,.aegis-pill,.page .ft{transition:none!important;animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .feat-vis.vis{animation:none}
}
.bn--card{border-radius:16px;padding:clamp(32px,4vw,48px) 22px;text-align:center;max-width:720px;margin-left:auto;margin-right:auto;margin-bottom:48px}
.dk .bn--card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.lt .bn--card{background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.05)}
.bn--card{position:relative;overflow:hidden}
.bn--card>*{position:relative;z-index:1}
.bn--card{--mx:.5;--my:.5}
.bn--card canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;border-radius:inherit;opacity:.6;mix-blend-mode:screen;transition:opacity .4s}
.bn--card:hover canvas{opacity:.85}
.bn--card>:not(canvas){position:relative;z-index:1}
.lt .bn--card canvas{mix-blend-mode:multiply;opacity:.35}
.lt .bn--card:hover canvas{opacity:.55}

/* Card layout improvements v2 */
.c--glass{justify-content:flex-start!important;gap:0}
.c--glass .c-net{order:1;margin-bottom:2px}
.c--glass .c-bg{order:2;margin-bottom:auto}
.c--glass .c-nm{order:3;margin-top:auto;margin-bottom:4px}
.c--glass .c-ds{order:4;margin-bottom:8px}
.c--glass .lk{order:5}
.c--glass .svc-type{order:6;position:absolute;top:clamp(24px,3vw,36px);right:clamp(24px,3vw,36px)}
.net-pat{position:relative;overflow:hidden;padding:clamp(80px,10vw,140px) 0}
.net-pat-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.06}
.net-pat-t{white-space:nowrap;font-size:clamp(60px,10vw,120px);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:1.1;will-change:transform}
.net-pat-t:nth-child(even){animation:npL 25s linear infinite}
.net-pat-t:nth-child(odd){animation:npR 20s linear infinite}
@keyframes npR{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes npL{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
.net-pat-c{position:relative;z-index:2;text-align:center;max-width:800px;margin:0 auto;padding:0 24px}
.net-pat-c h2{font-size:clamp(32px,5vw,52px);font-weight:700;letter-spacing:-.03em;margin-bottom:16px;color:#fff}
.net-pat-c p{font-size:clamp(16px,2vw,20px);line-height:1.6;max-width:600px;margin:0 auto}
