/* ==========================================================================
   DRAGON EXPRESS (PVT.) LTD — Global Stylesheet
   Worldwide Express Courier · Air · Ocean · E-Commerce · Cross Border
   ========================================================================== */

/* ------------------------------ 1. TOKENS ------------------------------- */
:root{
  /* Brand — pulled from the Dragon Express logo */
  --brand:        #FF6B00;
  --brand-600:    #E85D00;
  --brand-300:    #FF9A3D;
  --brand-glow:   rgba(255,107,0,.45);

  /* Vibrant accent family */
  --cyan:         #00CFE8;
  --cyan-600:     #00A6BD;
  --violet:       #7C4DFF;
  --rose:         #FF2E74;
  --lime:         #7BE04F;
  --amber:        #FFC542;

  /* Ink / surfaces */
  --ink:          #070B16;
  --ink-700:      #0E1526;
  --ink-600:      #16203A;
  --ink-500:      #223055;
  --slate:        #5A678A;
  --muted:        #7C8AA8;
  --line:         #E5E9F2;
  --surface:      #FFFFFF;
  --surface-2:    #F5F7FC;
  --surface-3:    #EDF1F9;

  /* Gradients */
  --g-brand:  linear-gradient(120deg,#FF8A00 0%,#FF6B00 45%,#FF2E74 100%);
  --g-ocean:  linear-gradient(120deg,#00CFE8 0%,#2C7BFF 55%,#7C4DFF 100%);
  --g-air:    linear-gradient(120deg,#FFC542 0%,#FF6B00 60%,#FF2E74 100%);
  --g-dark:   linear-gradient(150deg,#070B16 0%,#0E1526 45%,#16203A 100%);
  --g-mesh:   radial-gradient(60rem 40rem at 8% -10%, rgba(255,107,0,.35), transparent 60%),
              radial-gradient(50rem 34rem at 96% 6%, rgba(0,207,232,.28), transparent 62%),
              radial-gradient(46rem 34rem at 50% 118%, rgba(124,77,255,.30), transparent 60%);

  /* Type */
  --font:   "Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --font-d: "Sora","Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;

  /* Shape & motion */
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --sh-1: 0 2px 8px rgba(11,17,35,.06);
  --sh-2: 0 12px 32px -12px rgba(11,17,35,.18);
  --sh-3: 0 30px 70px -24px rgba(11,17,35,.32);
  --sh-brand: 0 18px 40px -14px var(--brand-glow);
  --ease: cubic-bezier(.22,1,.36,1);
  --nav-h: 78px;
  --wrap: 1240px;
}

/* ----------------------------- 2. RESET --------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;font-family:var(--font);font-size:16.5px;line-height:1.7;
  color:var(--ink-600);background:var(--surface);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;overflow-x:clip;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5{font-family:var(--font-d);color:var(--ink);margin:0 0 .5em;line-height:1.14;letter-spacing:-.022em;font-weight:700}
h1{font-size:clamp(2.4rem,5.6vw,4.25rem);letter-spacing:-.035em}
h2{font-size:clamp(1.85rem,3.4vw,2.9rem);letter-spacing:-.03em}
h3{font-size:clamp(1.15rem,1.7vw,1.5rem)}
p{margin:0 0 1.1em}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}

/* ---------------------------- 3. LAYOUT --------------------------------- */
.container{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto}
.section{padding:clamp(4.2rem,8vw,7.5rem) 0;position:relative}
.section--tight{padding:clamp(3rem,5vw,4.5rem) 0}
.section--alt{background:
  radial-gradient(40rem 26rem at 92% 0%,rgba(0,207,232,.10),transparent 60%),
  radial-gradient(36rem 24rem at 4% 100%,rgba(255,107,0,.10),transparent 60%),
  var(--surface-2)}
.section--dark{background:var(--ink);color:#C9D3E8;background-image:var(--g-mesh)}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}

.grid{display:grid;gap:clamp(1.1rem,2vw,1.8rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,4.5vw,4.2rem);align-items:center}

/* ------------------------- 4. HEADINGS / BITS --------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1rem;
  font-family:var(--font);font-size:.735rem;font-weight:800;letter-spacing:.19em;
  text-transform:uppercase;color:var(--brand);
}
.eyebrow::before{content:"";width:30px;height:3px;border-radius:3px;background:var(--g-brand)}
.section--dark .eyebrow{color:var(--brand-300)}
.section-head{max-width:56ch;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
.lede{font-size:1.075rem;color:var(--slate);max-width:62ch}
.section--dark .lede,.section--dark p{color:#A9B6D1}
.gt{background:var(--g-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.gt-c{background:var(--g-ocean);-webkit-background-clip:text;background-clip:text;color:transparent}

/* --------------------------- 5. BUTTONS --------------------------------- */
.btn{
  --bg:var(--g-brand);--fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.7rem;border:0;border-radius:var(--r-pill);cursor:pointer;
  font-weight:750;font-size:.93rem;letter-spacing:.01em;color:var(--fg);background:var(--bg);
  box-shadow:var(--sh-brand);overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .25s;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(120deg,#FF2E74,#FF6B00 60%,#FFC542);
  transition:opacity .4s var(--ease);
}
.btn:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 24px 46px -14px var(--brand-glow)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(-1px)}
.btn svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--ghost{--bg:transparent;--fg:var(--ink);box-shadow:none;border:2px solid var(--line)}
.btn--ghost::after{background:var(--surface-3)}
.btn--ghost:hover{border-color:transparent;box-shadow:var(--sh-2)}
.btn--glass{--bg:rgba(255,255,255,.10);--fg:#fff;box-shadow:none;border:1.5px solid rgba(255,255,255,.30);backdrop-filter:blur(10px)}
.btn--glass::after{background:rgba(255,255,255,.18)}
.btn--white{--bg:#fff;--fg:var(--ink);box-shadow:var(--sh-2)}
.btn--white::after{background:#fff}
.btn--sm{padding:.68rem 1.25rem;font-size:.85rem}
.btn--block{width:100%}

/* --------------------------- 6. PRELOADER ------------------------------- */
.preloader{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:var(--ink);background-image:var(--g-mesh);
  transition:opacity .6s var(--ease),visibility .6s;
}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__inner{text-align:center;width:230px}
.preloader__logo{width:190px;margin:0 auto 1.4rem;filter:brightness(0) invert(1);animation:pl-pulse 1.5s var(--ease) infinite}
@keyframes pl-pulse{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1)}}
.preloader__bar{height:3px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.preloader__bar i{display:block;height:100%;width:40%;border-radius:3px;background:var(--g-brand);animation:pl-run 1.15s var(--ease) infinite}
@keyframes pl-run{0%{transform:translateX(-105%)}100%{transform:translateX(320%)}}

/* ------------------------ 7. SCROLL PROGRESS ---------------------------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1200;background:var(--g-brand);box-shadow:0 0 14px var(--brand-glow);transition:width .1s linear}

/* ---------------------------- 8. TOPBAR --------------------------------- */
.topbar{background:var(--ink);color:#9FADC9;font-size:.815rem;border-bottom:1px solid rgba(255,255,255,.07)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:42px;flex-wrap:wrap}
.topbar a{transition:color .2s}
.topbar a:hover{color:var(--brand-300)}
.topbar__list{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.topbar__list li{display:flex;align-items:center;gap:.45rem}
.topbar__list svg{width:14px;height:14px;color:var(--brand)}
.topbar__socials{display:flex;gap:.5rem}
.topbar__socials a{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.07)}
.topbar__socials a:hover{background:var(--brand);color:#fff}
.topbar__socials svg{width:13px;height:13px}

/* ----------------------------- 9. NAV ----------------------------------- */
.nav{
  position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(11,17,35,.07);
  transition:box-shadow .35s var(--ease),background .35s var(--ease);
}
.nav.is-stuck{box-shadow:0 10px 34px -18px rgba(11,17,35,.35);background:rgba(255,255,255,.95)}
.nav__in{display:flex;align-items:center;gap:1.4rem;height:var(--nav-h);transition:height .35s var(--ease)}
.nav.is-stuck .nav__in{height:66px}
.nav__logo img{height:44px;width:auto;transition:height .35s var(--ease)}
.nav.is-stuck .nav__logo img{height:38px}
.nav__menu{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav__link{
  position:relative;display:inline-flex;align-items:center;gap:.35rem;
  padding:.6rem .82rem;border-radius:var(--r-pill);
  font-size:.905rem;font-weight:650;color:var(--ink-600);
  transition:color .25s,background .25s;white-space:nowrap;
}
.nav__link::after{
  content:"";position:absolute;left:.82rem;right:.82rem;bottom:.34rem;height:2px;border-radius:2px;
  background:var(--g-brand);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.nav__link:hover{color:var(--brand)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--brand)}
.nav__link .caret{width:11px;height:11px;transition:transform .3s}
.nav__item{position:relative}
.nav__item:hover .caret{transform:rotate(180deg)}
.nav__drop{
  position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;min-width:290px;
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-3);border:1px solid var(--line);
  padding:.6rem;opacity:0;visibility:hidden;transform:translateY(12px) scale(.98);
  transition:all .34s var(--ease);
}
.nav__item:hover .nav__drop,.nav__item:focus-within .nav__drop{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.nav__drop a{display:flex;gap:.8rem;align-items:center;padding:.62rem .7rem;border-radius:12px;transition:background .22s}
.nav__drop a:hover{background:var(--surface-2)}
.nav__drop .ic{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;background:var(--g-brand);color:#fff}
.nav__drop .ic svg{width:17px;height:17px}
.nav__drop b{display:block;font-size:.9rem;color:var(--ink);font-weight:700;line-height:1.35}
.nav__drop small{color:var(--muted);font-size:.775rem}
.nav__cta{display:flex;align-items:center;gap:.6rem;margin-left:.5rem}
.nav__burger{display:none;width:46px;height:46px;border-radius:14px;border:1.5px solid var(--line);background:#fff;place-items:center;cursor:pointer}
.nav__burger span{display:block;width:19px;height:2px;border-radius:2px;background:var(--ink);position:relative;transition:.3s var(--ease)}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;border-radius:2px;background:var(--ink);transition:.3s var(--ease)}
.nav__burger span::before{top:-6px}.nav__burger span::after{top:6px}
body.drawer-open .nav__burger span{background:transparent}
body.drawer-open .nav__burger span::before{top:0;transform:rotate(45deg)}
body.drawer-open .nav__burger span::after{top:0;transform:rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(90vw,392px);z-index:1100;background:var(--ink);
  background-image:var(--g-mesh);padding:1.5rem 1.4rem 2.5rem;overflow-y:auto;
  transform:translateX(105%);transition:transform .5s var(--ease);
}
body.drawer-open .drawer{transform:translateX(0)}
.drawer__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.6rem}
.drawer__head img{height:38px;filter:brightness(0) invert(1)}
.drawer__close{background:rgba(255,255,255,.1);border:0;color:#fff;width:40px;height:40px;border-radius:12px;font-size:1.3rem;cursor:pointer}
.drawer a{display:block;padding:.82rem .2rem;color:#DCE4F5;font-weight:650;border-bottom:1px solid rgba(255,255,255,.08);transition:.25s var(--ease)}
.drawer a:hover{color:var(--brand-300);padding-left:.6rem}
.drawer .sub a{font-size:.9rem;font-weight:550;color:#93A2C0;padding-left:1.1rem}
.drawer .btn{margin-top:1.5rem;width:100%}
.backdrop{position:fixed;inset:0;background:rgba(7,11,22,.6);backdrop-filter:blur(4px);z-index:1050;opacity:0;visibility:hidden;transition:.4s}
body.drawer-open .backdrop{opacity:1;visibility:visible}

/* --------------------------- 10. HERO ----------------------------------- */
.hero{position:relative;min-height:clamp(600px,90vh,900px);display:flex;align-items:center;overflow:hidden;background:var(--ink);isolation:isolate}
.hero__slides{position:absolute;inset:0;z-index:-3}
/* the incoming slide fades in ON TOP of the outgoing one, which is held fully
   opaque underneath (.is-prev) until the fade ends — so the dark hero never
   shows through the gap between the two opacities. */
.hero__slide{position:absolute;inset:0;opacity:0;z-index:0;transition:opacity 1.6s linear;will-change:opacity}
.hero__slide.is-prev{opacity:1;z-index:1;transition:none}
.hero__slide.is-active{opacity:1;z-index:2}
.hero__slide img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02) translate3d(0,0,0);
  backface-visibility:hidden;will-change:transform
}
/* .is-prev keeps the same animation declaration, so the ken-burns keeps
   running on the outgoing slide instead of snapping back to its base transform */
.hero__slide.is-active img,.hero__slide.is-prev img{animation:kenburns 10s linear forwards}
@keyframes kenburns{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.17) translate3d(-1.5%,-1.5%,0)}}
.hero__veil{
  position:absolute;inset:0;z-index:-2;
  background:linear-gradient(100deg,rgba(7,11,22,.94) 0%,rgba(7,11,22,.80) 38%,rgba(7,11,22,.34) 68%,rgba(7,11,22,.55) 100%);
}
.hero__veil::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(48rem 34rem at 12% 88%,rgba(255,107,0,.30),transparent 62%),
             radial-gradient(40rem 30rem at 88% 12%,rgba(0,207,232,.22),transparent 62%);
  mix-blend-mode:screen;
}
.hero__grid-lines{
  position:absolute;inset:0;z-index:-1;opacity:.16;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 0%,transparent 100%);
  mask-image:radial-gradient(70% 60% at 50% 40%,#000 0%,transparent 100%);
}
.hero__in{position:relative;z-index:2;padding:clamp(5rem,10vh,7.5rem) 0 clamp(9rem,14vh,11rem);max-width:735px;color:#fff}
.hero__badge{
  display:inline-flex;align-items:center;gap:.6rem;padding:.46rem .5rem .46rem .55rem;margin-bottom:1.5rem;
  border-radius:var(--r-pill);background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.19);
  backdrop-filter:blur(10px);font-size:.79rem;font-weight:650;color:#EAF0FF;letter-spacing:.01em;
}
.hero__badge b{background:var(--g-brand);padding:.22rem .62rem;border-radius:var(--r-pill);font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#fff}
.hero h1{color:#fff;margin-bottom:.55em}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(46px) rotate(3deg);animation:wordUp .95s var(--ease) forwards}
@keyframes wordUp{to{opacity:1;transform:none}}
.hero__sub{font-size:clamp(1.02rem,1.5vw,1.19rem);color:#C4D0E8;max-width:56ch;margin-bottom:2rem}
.hero__actions{display:flex;gap:.85rem;flex-wrap:wrap;margin-bottom:2.6rem}
.hero__marks{display:flex;gap:1.9rem;flex-wrap:wrap;color:#B7C4DE;font-size:.88rem;font-weight:600}
.hero__marks li{display:flex;align-items:center;gap:.5rem}
.hero__marks svg{width:19px;height:19px;color:var(--lime);flex:0 0 19px}
.hero__dots{position:absolute;left:0;right:0;bottom:clamp(6.4rem,11vh,8rem);z-index:3}
.hero__dots .container{display:flex;gap:.55rem}
.hero__dots button{width:34px;height:4px;border:0;border-radius:4px;background:rgba(255,255,255,.28);cursor:pointer;padding:0;overflow:hidden;position:relative;transition:width .4s var(--ease)}
.hero__dots button.is-active{width:64px}
.hero__dots button.is-active::after{content:"";position:absolute;inset:0;background:var(--g-brand);transform-origin:left;animation:dotFill 7s linear forwards}
@keyframes dotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero__scroll{position:absolute;right:clamp(1.4rem,4vw,3rem);bottom:clamp(6.4rem,11vh,8rem);z-index:3;writing-mode:vertical-rl;color:#93A2C0;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;display:flex;align-items:center;gap:.9rem}
.hero__scroll::after{content:"";width:1px;height:56px;background:linear-gradient(#93A2C0,transparent);animation:scrollLine 2s ease-in-out infinite}
@keyframes scrollLine{0%,100%{opacity:.3;height:36px}50%{opacity:1;height:62px}}

/* Floating orbs */
.orb{position:absolute;border-radius:50%;filter:blur(64px);opacity:.55;pointer-events:none;z-index:-1}
.orb--1{width:420px;height:420px;background:var(--brand);left:-140px;bottom:-110px;animation:orb 15s ease-in-out infinite}
.orb--2{width:340px;height:340px;background:var(--cyan);right:8%;top:-90px;animation:orb 19s ease-in-out infinite reverse}
@keyframes orb{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.09)}66%{transform:translate(-30px,26px) scale(.94)}}

/* ------------------------ 11. TRACK WIDGET ------------------------------ */
.trackbar{position:relative;z-index:5;margin-top:clamp(-7.5rem,-9vw,-5.5rem)}
.trackbar__card{
  background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-3);
  padding:clamp(1.5rem,3vw,2.3rem);border:1px solid rgba(255,255,255,.7);
  position:relative;overflow:hidden;
}
.trackbar__card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--g-brand)}
.trackbar__tabs{display:flex;gap:.4rem;margin-bottom:1.3rem;flex-wrap:wrap}
.trackbar__tabs button{
  padding:.55rem 1.1rem;border-radius:var(--r-pill);border:1.5px solid var(--line);background:#fff;
  font-size:.855rem;font-weight:700;color:var(--slate);cursor:pointer;transition:.28s var(--ease);
}
.trackbar__tabs button.is-active{background:var(--g-brand);border-color:transparent;color:#fff;box-shadow:var(--sh-brand)}
.trackbar__form{display:grid;grid-template-columns:1fr auto;gap:.75rem}
.trackbar__field{position:relative}
.trackbar__field svg{position:absolute;left:1.05rem;top:1.15rem;width:19px;height:19px;color:var(--brand)}
.trackbar input,.trackbar textarea{
  width:100%;padding:1rem 1.1rem 1rem 3rem;border:1.6px solid var(--line);border-radius:14px;
  background:var(--surface-2);font-size:.95rem;transition:.28s var(--ease);
}
.field input,.field select,.field textarea{
  width:100%;padding:1rem 1.1rem;border:1.6px solid var(--line);border-radius:14px;
  background:var(--surface-2);font-size:.95rem;transition:.28s var(--ease);
}
.trackbar input:focus,.trackbar textarea:focus,.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(255,107,0,.13)
}
.trackbar textarea{padding-left:1.1rem;min-height:104px;resize:vertical}
.field textarea{min-height:140px;resize:vertical}
.trackbar__hint{margin:.9rem 0 0;font-size:.82rem;color:var(--muted)}
.trackbar__hint b{color:var(--ink)}

/* --------------------------- 12. CARDS ---------------------------------- */
.svc-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);
  min-height:392px;display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff;box-shadow:var(--sh-2);transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  isolation:isolate;
}
.svc-card:hover{transform:translateY(-10px);box-shadow:var(--sh-3)}
.svc-card__img{position:absolute;inset:0;z-index:-2}
.svc-card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.svc-card:hover .svc-card__img img{transform:scale(1.11)}
.svc-card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(7,11,22,.96) 4%,rgba(7,11,22,.72) 40%,rgba(7,11,22,.16) 78%);
}
.svc-card::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s;
  background:linear-gradient(to top,rgba(232,93,0,.92) 0%,rgba(255,46,116,.42) 48%,transparent 88%);
}
.svc-card:hover::after{opacity:1}
.svc-card__body{padding:1.7rem 1.6rem 1.75rem;position:relative}
.svc-card__ic{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:1rem;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(8px);
  transition:.45s var(--ease);
}
.svc-card:hover .svc-card__ic{background:#fff;color:var(--brand);transform:rotate(-8deg) scale(1.06)}
.svc-card__ic svg{width:25px;height:25px}
.svc-card h3{color:#fff;margin-bottom:.4rem;font-size:1.32rem}
.svc-card p{color:#C9D5EC;font-size:.915rem;margin-bottom:1rem}
.svc-card__more{display:inline-flex;align-items:center;gap:.45rem;font-weight:750;font-size:.86rem;color:var(--brand-300);transition:.3s}
.svc-card:hover .svc-card__more{color:#fff;gap:.8rem}
.svc-card__more svg{width:16px;height:16px}
.svc-card__no{position:absolute;top:1.2rem;right:1.4rem;font-family:var(--font-d);font-size:2.9rem;font-weight:800;color:rgba(255,255,255,.16);line-height:1}

/* Feature / icon cards */
.f-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:2rem 1.7rem;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
.f-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--g-brand);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.f-card:hover{transform:translateY(-8px);box-shadow:var(--sh-3);border-color:transparent}
.f-card:hover::before{transform:scaleX(1)}
.f-card__ic{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;margin-bottom:1.15rem;background:var(--g-brand);color:#fff;box-shadow:var(--sh-brand);transition:.45s var(--ease)}
.f-card:hover .f-card__ic{transform:rotate(-9deg) scale(1.07)}
.f-card__ic svg{width:27px;height:27px}
.f-card--cyan .f-card__ic{background:var(--g-ocean);box-shadow:0 18px 40px -14px rgba(0,207,232,.5)}
.f-card--cyan::before{background:var(--g-ocean)}
.f-card--violet .f-card__ic{background:linear-gradient(120deg,#7C4DFF,#FF2E74);box-shadow:0 18px 40px -14px rgba(124,77,255,.5)}
.f-card--violet::before{background:linear-gradient(120deg,#7C4DFF,#FF2E74)}
.f-card--lime .f-card__ic{background:linear-gradient(120deg,#7BE04F,#00CFE8);box-shadow:0 18px 40px -14px rgba(123,224,79,.5)}
.f-card--lime::before{background:linear-gradient(120deg,#7BE04F,#00CFE8)}
.f-card h3{font-size:1.16rem;margin-bottom:.45rem}
.f-card p{color:var(--slate);font-size:.925rem;margin:0}
.section--dark .f-card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);backdrop-filter:blur(8px)}
.section--dark .f-card p{color:#A9B6D1}

/* Glass card */
.glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:var(--r-lg);backdrop-filter:blur(14px);padding:1.7rem}

/* --------------------------- 13. STATS ---------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--ink-700);padding:2rem 1.4rem;text-align:center;transition:background .4s}
.stat:hover{background:var(--ink-600)}
.stat__n{font-family:var(--font-d);font-size:clamp(2.1rem,4vw,3.05rem);font-weight:800;line-height:1;background:var(--g-brand);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.03em}
.stat:nth-child(2) .stat__n{background:var(--g-ocean);-webkit-background-clip:text;background-clip:text}
.stat:nth-child(3) .stat__n{background:linear-gradient(120deg,#7BE04F,#00CFE8);-webkit-background-clip:text;background-clip:text}
.stat:nth-child(4) .stat__n{background:linear-gradient(120deg,#FFC542,#FF2E74);-webkit-background-clip:text;background-clip:text}
.stat__l{margin:.55rem 0 0;font-size:.85rem;color:#9FADC9;font-weight:600;letter-spacing:.02em}

/* Light stat pills */
.mini-stats{display:flex;gap:2.4rem;flex-wrap:wrap;margin-top:1.8rem}
.mini-stat b{display:block;font-family:var(--font-d);font-size:2.05rem;line-height:1;color:var(--brand);letter-spacing:-.03em}
.mini-stat span{font-size:.84rem;color:var(--muted);font-weight:600}

/* ------------------------- 14. MAP / ROUTES ----------------------------- */
.map-wrap{position:relative;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(160deg,#0B1224,#101B36);padding:clamp(1.4rem,3vw,2.6rem);border:1px solid rgba(255,255,255,.09)}
.map-wrap svg{width:100%;height:auto;display:block}
.route{fill:none;stroke-linecap:round;stroke-width:2;stroke-dasharray:7 9;opacity:.95;animation:dash 2.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-32}}
.hub{transform-box:fill-box;transform-origin:center;animation:hubPulse 2.6s ease-in-out infinite}
@keyframes hubPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.55)}}
.hub-ring{transform-box:fill-box;transform-origin:center;animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{transform:scale(.6);opacity:.85}100%{transform:scale(3.6);opacity:0}}
.map-legend{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1.5rem;font-size:.83rem;color:#9FADC9}
.map-legend i{display:inline-block;width:22px;height:3px;border-radius:3px;margin-right:.5rem;vertical-align:middle}

/* --------------------------- 15. STEPS ---------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;position:relative}
.steps::before{content:"";position:absolute;top:38px;left:9%;right:9%;height:2px;background:repeating-linear-gradient(90deg,var(--brand) 0 10px,transparent 10px 20px);opacity:.35}
.step{position:relative;text-align:center;padding:0 .6rem}
.step__n{
  width:76px;height:76px;margin:0 auto 1.2rem;border-radius:26px;display:grid;place-items:center;
  background:#fff;border:2px solid var(--line);color:var(--brand);font-family:var(--font-d);font-weight:800;font-size:1.4rem;
  box-shadow:var(--sh-1);transition:.45s var(--ease);position:relative;z-index:1;
}
.step:hover .step__n{background:var(--g-brand);color:#fff;border-color:transparent;transform:translateY(-6px) rotate(-6deg);box-shadow:var(--sh-brand)}
.step h3{font-size:1.08rem;margin-bottom:.35rem}
.step p{font-size:.9rem;color:var(--slate);margin:0}

/* -------------------------- 16. MARQUEE --------------------------------- */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee__track{display:flex;gap:3.2rem;width:max-content;animation:marq 26s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee__item{
  display:flex;align-items:center;gap:.6rem;font-family:var(--font-d);font-weight:800;font-size:1.28rem;
  letter-spacing:-.02em;color:var(--ink-500);opacity:.6;transition:.3s;white-space:nowrap;
}
.marquee__item:hover{opacity:1;color:var(--brand)}
.marquee__item svg{width:22px;height:22px;color:var(--brand)}
.section--dark .marquee__item{color:#fff;opacity:.42}
.section--dark .marquee__item:hover{opacity:1;color:var(--brand-300)}

/* ------------------------ 17. TESTIMONIALS ------------------------------ */
.quotes{position:relative;min-height:280px}
.quote{
  position:absolute;inset:0;opacity:0;transform:translateY(22px) scale(.985);pointer-events:none;
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}
.quote.is-active{opacity:1;transform:none;pointer-events:auto;position:relative}
.quote__mark{font-family:var(--font-d);font-size:5rem;line-height:.6;color:var(--brand);opacity:.28}
.quote p{font-size:clamp(1.08rem,2vw,1.42rem);line-height:1.62;font-weight:550;color:var(--ink);max-width:62ch}
.section--dark .quote p{color:#EAF0FF}
.quote__by{display:flex;align-items:center;gap:.9rem;margin-top:1.5rem}
.quote__av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--g-brand);color:#fff;font-weight:800;font-family:var(--font-d);font-size:1.05rem;flex:0 0 52px}
.quote__by b{display:block;color:var(--ink);font-size:.98rem}
.section--dark .quote__by b{color:#fff}
.quote__by span{font-size:.85rem;color:var(--muted)}
.quotes__nav{display:flex;gap:.5rem;margin-top:2rem}
.quotes__nav button{width:44px;height:44px;border-radius:50%;border:1.6px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;transition:.3s var(--ease)}
.quotes__nav button:hover{background:var(--g-brand);border-color:transparent;color:#fff;transform:translateY(-3px);box-shadow:var(--sh-brand)}
.quotes__nav svg{width:17px;height:17px}
.section--dark .quotes__nav button{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}

/* -------------------------- 18. CTA BAND -------------------------------- */
.cta-band{position:relative;overflow:hidden;color:#fff;isolation:isolate}
.cta-band__bg{position:absolute;inset:0;z-index:-2}
.cta-band__bg img{width:100%;height:100%;object-fit:cover}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,rgba(7,11,22,.93) 6%,rgba(232,93,0,.72) 62%,rgba(255,46,116,.62) 100%)}
.cta-band .container{padding-block:clamp(3.6rem,7vw,5.6rem);display:flex;gap:2.2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-band h2{color:#fff;max-width:20ch;margin:0}
.cta-band p{color:rgba(255,255,255,.88);max-width:46ch;margin:.7rem 0 0}

/* --------------------------- 19. FOOTER --------------------------------- */
.footer{background:var(--ink);color:#94A3BE;padding-top:clamp(3.4rem,6vw,5rem);background-image:var(--g-mesh);position:relative}
.footer__grid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1.35fr;gap:clamp(1.6rem,3vw,3rem);padding-bottom:3rem}
.footer__logo{height:52px;filter:brightness(0) invert(1);margin-bottom:1.2rem}
.footer h4{color:#fff;font-size:1rem;margin-bottom:1.15rem;font-family:var(--font-d);letter-spacing:-.01em}
.footer h4::after{content:"";display:block;width:30px;height:3px;border-radius:3px;background:var(--g-brand);margin-top:.55rem}
.footer li{margin-bottom:.62rem;font-size:.905rem}
.footer li a{transition:.25s var(--ease);display:inline-flex;align-items:center;gap:.5rem}
.footer li a:hover{color:var(--brand-300);transform:translateX(4px)}
.footer__addr li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.55}
.footer__addr svg{width:16px;height:16px;color:var(--brand);flex:0 0 16px;margin-top:.28rem}
.footer__newsletter{display:flex;gap:.5rem;margin-top:1rem}
.footer__newsletter input{flex:1;min-width:0;padding:.82rem 1rem;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font-size:.88rem}
.footer__newsletter input::placeholder{color:#7C8AA8}
.footer__newsletter input:focus{outline:0;border-color:var(--brand);background:rgba(255,255,255,.1)}
.footer__newsletter button{border:0;border-radius:var(--r-pill);padding:0 1.25rem;background:var(--g-brand);color:#fff;font-weight:750;cursor:pointer;transition:.3s var(--ease)}
.footer__newsletter button:hover{transform:translateY(-2px);box-shadow:var(--sh-brand)}
.footer__socials{display:flex;gap:.55rem;margin-top:1.4rem}
.footer__socials a{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);transition:.3s var(--ease)}
.footer__socials a:hover{background:var(--g-brand);border-color:transparent;color:#fff;transform:translateY(-3px)}
.footer__socials svg{width:16px;height:16px}
.footer__bar{border-top:1px solid rgba(255,255,255,.09);padding:1.3rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.83rem}
.footer__bar a:hover{color:var(--brand-300)}

/* --------------------------- 20. PAGE HERO ------------------------------ */
.page-hero{position:relative;padding:clamp(3.4rem,7vw,6rem) 0 clamp(3.4rem,7vw,5.4rem);color:#fff;background:var(--ink);overflow:hidden;isolation:isolate}
.page-hero__bg{position:absolute;inset:0;z-index:-2}
.page-hero__bg img{width:100%;height:100%;object-fit:cover;animation:kb-slow 22s ease-in-out infinite alternate}
@keyframes kb-slow{from{transform:scale(1.03)}to{transform:scale(1.15)}}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(7,11,22,.93) 8%,rgba(7,11,22,.74) 52%,rgba(232,93,0,.42) 100%)}
.page-hero h1{color:#fff;font-size:clamp(2.1rem,4.4vw,3.5rem);margin-bottom:.35em}
.page-hero p{color:#C4D0E8;max-width:60ch;font-size:1.04rem;margin:0}
.crumbs{display:flex;gap:.55rem;align-items:center;font-size:.83rem;color:#A9B6D1;margin-bottom:1.1rem;flex-wrap:wrap}
.crumbs a:hover{color:var(--brand-300)}
.crumbs span{color:var(--brand-300);font-weight:650}
.crumbs svg{width:13px;height:13px;opacity:.6}

/* --------------------------- 21. CONTENT -------------------------------- */
.prose h2{margin-top:2.2rem}
.prose h3{margin-top:1.8rem;font-size:1.24rem}
.prose p,.prose li{color:var(--slate)}
.ticks li{position:relative;padding-left:2rem;margin-bottom:.78rem;color:var(--slate)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:20px;height:20px;border-radius:50%;
  background:var(--g-brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/78% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/78% no-repeat;
}
.ticks--light li{color:#B7C4DE}
.media{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.media:hover img{transform:scale(1.06)}
.media--stack{display:grid;grid-template-columns:1fr 1fr;gap:1rem;box-shadow:none;border-radius:0;overflow:visible}
.media--stack .media{border-radius:var(--r-lg)}
.media--stack .media:first-child{grid-row:span 2;height:100%}
.media__tag{
  position:absolute;left:1.1rem;bottom:1.1rem;padding:.5rem 1rem;border-radius:var(--r-pill);
  background:rgba(7,11,22,.62);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:.79rem;font-weight:700;letter-spacing:.02em;
}
.badge-float{
  position:absolute;background:#fff;border-radius:var(--r-lg);padding:1rem 1.25rem;box-shadow:var(--sh-3);
  display:flex;align-items:center;gap:.85rem;animation:floaty 5.5s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.badge-float .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--g-brand);color:#fff;flex:0 0 44px}
.badge-float .ic svg{width:21px;height:21px}
.badge-float b{display:block;font-family:var(--font-d);font-size:1.32rem;line-height:1.1;color:var(--ink)}
.badge-float span{font-size:.78rem;color:var(--muted);font-weight:600}

/* --------------------------- 22. TABLES --------------------------------- */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--sh-1);background:#fff}
table{width:100%;border-collapse:collapse;min-width:640px;font-size:.92rem}
thead th{background:var(--ink);color:#fff;text-align:left;padding:1rem 1.15rem;font-family:var(--font-d);font-size:.84rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700;white-space:nowrap}
tbody td{padding:.92rem 1.15rem;border-bottom:1px solid var(--line);color:var(--slate)}
tbody tr:nth-child(even){background:var(--surface-2)}
tbody tr:hover{background:rgba(255,107,0,.07)}
tbody td:first-child{font-weight:700;color:var(--ink)}
.zone-tag{display:inline-block;padding:.2rem .62rem;border-radius:var(--r-pill);font-size:.74rem;font-weight:800;letter-spacing:.04em;color:#fff;background:var(--g-brand)}
.zone-tag--c{background:var(--g-ocean)}
.zone-tag--v{background:linear-gradient(120deg,#7C4DFF,#FF2E74)}
.zone-tag--l{background:linear-gradient(120deg,#7BE04F,#00CFE8)}

/* -------------------------- 23. ACCORDION ------------------------------- */
.acc{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:.75rem;overflow:hidden;transition:box-shadow .35s,border-color .35s}
.acc.is-open{box-shadow:var(--sh-2);border-color:transparent}
.acc__q{width:100%;text-align:left;background:none;border:0;padding:1.15rem 3.4rem 1.15rem 1.3rem;font-weight:700;font-size:1rem;color:var(--ink);cursor:pointer;position:relative;font-family:var(--font-d)}
.acc__q::after{content:"+";position:absolute;right:1.3rem;top:50%;translate:0 -50%;width:28px;height:28px;border-radius:50%;background:var(--surface-3);color:var(--brand);display:grid;place-items:center;font-size:1.2rem;font-weight:700;transition:.35s var(--ease)}
.acc.is-open .acc__q::after{content:"\2212";background:var(--g-brand);color:#fff}
.acc__a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.acc__a p{padding:0 1.3rem 1.25rem;margin:0;color:var(--slate);font-size:.93rem}

/* -------------------------- 24. TIMELINE -------------------------------- */
.trk-result{margin-top:2.4rem;display:none}
.trk-result.is-on{display:block;animation:fadeUp .6s var(--ease) both}
.trk-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);margin-bottom:2.2rem}
.trk-summary div{background:#fff;padding:1.15rem 1.2rem}
.trk-summary span{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:.3rem}
.trk-summary b{font-family:var(--font-d);font-size:1.02rem;color:var(--ink)}
.trk-summary b.ok{color:#17A34A}
.timeline{position:relative;padding-left:2.9rem}
.timeline::before{content:"";position:absolute;left:13px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--brand),var(--cyan))}
.tl{position:relative;padding-bottom:1.9rem;opacity:0;animation:fadeUp .55s var(--ease) forwards}
.tl::before{content:"";position:absolute;left:-2.9rem;top:3px;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--brand);box-shadow:0 0 0 5px rgba(255,107,0,.13)}
.tl:first-child::before{background:var(--brand);border-color:#fff;box-shadow:0 0 0 5px rgba(255,107,0,.25)}
.tl time{font-size:.79rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--brand)}
.tl b{display:block;font-family:var(--font-d);font-size:1.04rem;color:var(--ink);margin:.15rem 0}
.tl p{margin:0;font-size:.9rem;color:var(--slate)}

/* -------------------------- 25. CONTACT --------------------------------- */
.office{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.9rem 1.7rem;position:relative;overflow:hidden;transition:.45s var(--ease)}
.office:hover{transform:translateY(-7px);box-shadow:var(--sh-3);border-color:transparent}
.office::before{content:"";position:absolute;top:0;bottom:0;left:0;width:5px;background:var(--g-brand)}
.office--cyan::before{background:var(--g-ocean)}
.office__tag{display:inline-block;padding:.28rem .8rem;border-radius:var(--r-pill);background:rgba(255,107,0,.12);color:var(--brand-600);font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.9rem}
.office--cyan .office__tag{background:rgba(0,207,232,.14);color:var(--cyan-600)}
.office dl{margin:0;display:grid;gap:.75rem}
.office dt{font-size:.71rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800}
.office dd{margin:.15rem 0 0;font-size:.93rem;color:var(--ink-600);line-height:1.6}
.office dd a:hover{color:var(--brand)}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.82rem;font-weight:750;color:var(--ink);margin-bottom:.42rem}
.form-card{background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:clamp(1.6rem,3vw,2.4rem);border:1px solid var(--line)}
.form-note{margin-top:1rem;padding:.9rem 1.1rem;border-radius:14px;background:rgba(123,224,79,.14);border:1px solid rgba(123,224,79,.4);color:#2C6B18;font-size:.88rem;font-weight:650;display:none}
.form-note.is-on{display:block;animation:fadeUp .5s var(--ease) both}
.map-embed{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);border:1px solid var(--line);line-height:0}
.map-embed iframe{width:100%;height:420px;border:0}

/* -------------------------- 26. REVEALS --------------------------------- */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal--l{transform:translateX(-46px)}
.reveal--r{transform:translateX(46px)}
.reveal--z{transform:scale(.93)}
.reveal--l.is-in,.reveal--r.is-in,.reveal--z.is-in{transform:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* -------------------------- 27. FLOATING UI ----------------------------- */
.totop{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:900;width:52px;height:52px;border-radius:50%;
  border:0;cursor:pointer;background:var(--g-brand);color:#fff;display:grid;place-items:center;
  box-shadow:var(--sh-brand);opacity:0;visibility:hidden;transform:translateY(16px) scale(.85);
  transition:.42s var(--ease);
}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{transform:translateY(-4px) scale(1.06)}
.totop svg{width:20px;height:20px}
.wa{
  position:fixed;left:1.4rem;bottom:1.4rem;z-index:900;width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 16px 34px -12px rgba(37,211,102,.65);
  transition:.4s var(--ease);
}
.wa:hover{transform:translateY(-4px) scale(1.07)}
.wa svg{width:26px;height:26px}
.wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:ring2 2.2s ease-out infinite}
@keyframes ring2{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.65);opacity:0}}

/* ------------------------- 28. RESPONSIVE ------------------------------- */
@media (max-width:1080px){
  .nav__menu{display:none}
  .nav__burger{display:grid}
  .nav__cta .btn{display:none}
  .footer__grid{grid-template-columns:1fr 1fr}
  .g-4,.stats,.steps,.trk-summary{grid-template-columns:repeat(2,1fr)}
  .steps::before{display:none}
}
@media (max-width:880px){
  .reveal--l,.reveal--r{transform:translateY(38px)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .hero__scroll{display:none}
  .cta-band .container{flex-direction:column;align-items:flex-start}
  .badge-float{display:none}
}
@media (max-width:620px){
  body{font-size:16px}
  .g-2,.g-3,.g-4,.stats,.steps,.footer__grid,.trk-summary,.media--stack{grid-template-columns:1fr}
  .media--stack .media:first-child{grid-row:auto}
  .trackbar__form{grid-template-columns:1fr}
  .topbar__list{gap:.9rem;font-size:.76rem}
  .hero__marks{gap:1rem;font-size:.82rem}
  .mini-stats{gap:1.4rem}
  .quotes{min-height:360px}
  .timeline{padding-left:2.4rem}
  .tl::before{left:-2.4rem;width:24px;height:24px}
  .wa{left:1rem;bottom:1rem;width:48px;height:48px}
  .totop{right:1rem;bottom:1rem;width:46px;height:46px}
}
@media (max-width:420px){ .hero__actions .btn{width:100%} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .hero h1 .w{opacity:1!important;transform:none!important}
}
@media print{ .nav,.topbar,.drawer,.backdrop,.totop,.wa,.preloader,.hero__dots,.scroll-progress{display:none!important} }

/* ------------------------- 29. SPEC LIST (service pages) ---------------- */
.spec{margin:0;display:grid;gap:.8rem}
.spec dt{font-size:.71rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800}
.spec dd{margin:.15rem 0 .2rem;font-size:.93rem;color:var(--ink-600);line-height:1.6}
.spec dd+dt{padding-top:.55rem;border-top:1px solid var(--line)}

/* -------------------------- 30. LOTTIE ---------------------------------- */
.lot{display:block;line-height:0}
.lot svg{display:block;width:100%;height:100%}

/* Icon chips inherit their chip colour, exactly like the inline SVGs they replace,
   so the hover state that flips a chip to white-on-orange still works. */
.svc-card__ic .lot svg path[stroke],.f-card__ic .lot svg path[stroke]{stroke:currentColor}
.svc-card__ic .lot svg path[fill],.f-card__ic .lot svg path[fill]{fill:currentColor}
.svc-card__ic .lot{width:30px;height:30px}
.f-card__ic .lot{width:32px;height:32px}

/* The preloader flight keeps its authored brand colours. */
.preloader__anim{width:236px;height:109px;margin:.2rem auto 0}

/* Host wrapper the script drops each animation into */
.lot-host{display:block}
.lot-host .lot,.lot-host .lot svg{width:100%;height:100%}

/* Tracking search / empty states */
.trk-state{display:none;padding:2.4rem 0 1rem;text-align:center}
.trk-state.is-on{display:block;animation:fadeUp .5s var(--ease) both}
.trk-state .lot-host{width:96px;height:96px;margin:0 auto .9rem}
/* These animations are authored white-on-dark; on the white card the neutral
   strokes need to become ink so they stay legible. */
.trk-state .lot svg path[stroke="rgb(255,255,255)"]{stroke:var(--ink-500)}
.trk-state h3{margin-bottom:.35rem;font-size:1.2rem}
.trk-state p{color:var(--slate);font-size:.93rem;margin:0 auto;max-width:44ch}

/* Success tick sits inline with the confirmation text */
.form-note{align-items:center;gap:.7rem}
.form-note.is-on{display:flex}
.form-note .lot-host{width:30px;height:30px;flex:0 0 30px;color:#2C6B18}
.form-note .lot svg path[stroke]{stroke:currentColor}