/* ===================================================================
   LSD Pro Co. — stylesheet (night-road theme: black & gold)
   =================================================================== */

:root{
  --bg:#08080a;
  --bg-soft:#101012;
  --bg-alt:#131316;
  --card:#17171a;
  --card-hover:#1c1c20;
  --border:#28282c;
  --gold:#f2a93b;
  --gold-light:#ffd873;
  --gold-dark:#c9790f;
  --gold-gradient:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-dark));
  --ember:#ff5a3c;
  --ember-light:#ff9466;
  --ember-dark:#c93a1f;
  --ember-gradient:linear-gradient(135deg,var(--ember-light),var(--ember) 55%,var(--ember-dark));
  --white:#f6f6f8;
  --silver:#c9cbd0;
  --muted:#9b9ba4;
  --muted-2:#6f6f78;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-sm:0 10px 28px -16px rgba(0,0,0,.7),0 2px 8px -4px rgba(0,0,0,.5);
  --shadow-lg:0 40px 90px -30px rgba(0,0,0,.75),0 12px 30px -14px rgba(0,0,0,.5);
  --shadow-gold:0 12px 32px -10px rgba(242,169,59,.4);
  --container:1200px;
  --ease:cubic-bezier(.16,.84,.44,1);
  --ease-soft:cubic-bezier(.22,.9,.32,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}
html.is-loading body{opacity:0;}
body{transition:opacity .6s var(--ease-soft);}

body{
  background:var(--bg);
  color:var(--white);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Fine film-grain texture */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Diagonal speed-line texture, echoing the brand mark, across every section */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.4;
  background-image:repeating-linear-gradient(
    115deg,
    transparent 0px,
    transparent 66px,
    rgba(242,169,59,.05) 66px,
    rgba(242,169,59,.05) 68px,
    transparent 68px,
    transparent 134px,
    rgba(255,90,60,.04) 134px,
    rgba(255,90,60,.04) 136px
  );
}

::selection{background:var(--gold);color:#151107;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--gold-dark);}
html{scrollbar-color:var(--border) var(--bg);}

img{max-width:100%;display:block;}

a{color:inherit;text-decoration:none;}

ul{list-style:none;}

h1,h2,h3,h4{font-family:'Poppins',sans-serif;line-height:1.12;font-weight:800;letter-spacing:-0.025em;}

.accent{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:500;
  letter-spacing:0;
}

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

section{position:relative;padding:76px 0;}

#services{
  background:
    radial-gradient(55% 55% at 92% -5%,rgba(242,169,59,.22),transparent 60%),
    radial-gradient(40% 45% at 0% 100%,rgba(255,90,60,.14),transparent 60%),
    var(--bg);
}
#how-it-works{
  background:
    radial-gradient(50% 50% at 5% 105%,rgba(255,90,60,.16),transparent 60%),
    radial-gradient(45% 45% at 95% 0%,rgba(242,169,59,.12),transparent 60%),
    radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1.5px),
    var(--bg);
  background-size:auto,auto,26px 26px,auto;
}
#platforms{
  background:
    radial-gradient(45% 60% at 50% -10%,rgba(242,169,59,.14),transparent 60%),
    radial-gradient(circle,rgba(255,255,255,.045) 1px,transparent 1.5px),
    var(--bg);
  background-size:auto,26px 26px,auto;
}
#contact{
  background:
    radial-gradient(60% 60% at 50% 105%,rgba(242,169,59,.14),transparent 65%),
    radial-gradient(35% 40% at 90% 0%,rgba(255,90,60,.12),transparent 60%),
    var(--bg);
}

@media (max-width:768px){
  section{padding:56px 0;}
  /* full-viewport blend-mode overlays force the GPU to re-blend the whole
     page on every scroll frame; on low-end phones that alone is enough to
     make scrolling and in-flight animations stutter, so drop them here —
     they're pure decoration with no content value */
  body::before,body::after{display:none;}
  /* backdrop-filter blur is one of the heaviest effects a mobile GPU can be
     asked to do continuously (fixed header while scrolling); fall back to a
     solid-ish background instead */
  .site-header.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(9,9,10,.96);}
  .hero-widget-inner{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(20,19,17,.94);}
}

.gold-text{
  background:var(--gold-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Poppins',sans-serif;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  background:rgba(242,169,59,.08);
  border:1px solid rgba(242,169,59,.28);
  padding:8px 16px;
  border-radius:999px;
  margin-bottom:16px;
}

.eyebrow::before{
  content:'';
  width:6px;height:6px;border-radius:50%;
  background:var(--gold-gradient);
  box-shadow:0 0 10px var(--gold);
}

.section-head{
  max-width:680px;
  margin-bottom:40px;
}

.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

.section-head h2{
  font-size:clamp(28px,4vw,44px);
  margin-bottom:16px;
}

.section-head p{
  color:var(--muted);
  font-size:17px;
  max-width:560px;
}

.section-head.center p{margin-left:auto;margin-right:auto;}

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:15px;
  padding:16px 30px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  overflow:hidden;
  transition:transform .45s var(--ease-soft),box-shadow .45s var(--ease-soft),background .35s var(--ease),border-color .35s var(--ease);
  white-space:nowrap;
}

.btn svg{position:relative;width:18px;height:18px;stroke-width:2.4;}

.btn-primary{
  background:var(--gold-gradient);
  color:#151107;
  box-shadow:var(--shadow-gold);
}
.btn-primary::before{
  content:'';
  position:absolute;
  top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);
  transition:left .75s var(--ease-soft);
}
.btn-primary:hover::before{left:130%;}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 44px -10px rgba(242,169,59,.55);}

.btn-outline{
  background:transparent;
  color:var(--white);
  border-color:var(--border);
}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-light);transform:translateY(-3px);}

.btn-dark{
  background:#0e0e10;
  color:var(--white);
  border-color:var(--border);
}
.btn-dark:hover{border-color:var(--gold);transform:translateY(-3px);}

/* full-width buttons can carry longer labels ("Call / WhatsApp — ...")
   that don't fit a narrow phone column — let those wrap instead of
   overflowing past the pill's own border, unlike short-label buttons
   which stay on one line via the base .btn white-space:nowrap */
.btn-block{width:100%;white-space:normal;}

/* ---------- Utility bar ---------- */
.utility-bar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1002;
  background:#050506;
  border-bottom:1px solid var(--border);
  color:var(--muted);
  padding:9px 0;
  font-size:12.5px;
}
.utility-bar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.utility-bar-left{display:flex;align-items:center;gap:22px;}
.utility-item{display:flex;align-items:center;gap:7px;white-space:nowrap;}
.utility-item svg{width:13px;height:13px;color:var(--gold);flex-shrink:0;}
.utility-item a{transition:color .25s;}
.utility-item a:hover{color:var(--white);}
.utility-bar-right{display:flex;align-items:center;gap:14px;color:var(--muted-2);}
@media (max-width:760px){
  .utility-item.utility-hide-sm{display:none;}
}
@media (max-width:560px){
  .utility-bar-right{display:none;}
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;
  top:38px;left:0;right:0;
  z-index:1000;
  padding:20px 0;
  transition:padding .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}

.site-header.scrolled{
  padding:13px 0;
  background:rgba(9,9,10,.85);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--border);
}

.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand{display:flex;align-items:center;gap:14px;}

.brand-logo{height:36px;width:auto;flex-shrink:0;transition:transform .4s var(--ease);}
.brand:hover .brand-logo{transform:scale(1.04);}

.brand-text{font-family:'Poppins',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.01em;display:flex;flex-direction:column;line-height:1;}
.brand-text small{
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-top:3px;
}

.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{
  font-size:14.5px;
  font-weight:500;
  color:var(--silver);
  position:relative;
  padding:4px 0;
  white-space:nowrap;
  transition:color .25s;
}
.nav-links a::after{
  content:'';
  position:absolute;left:0;bottom:-4px;
  width:0;height:2px;
  background:var(--gold-gradient);
  transition:width .3s var(--ease);
}
.nav-links a:hover{color:var(--white);}
.nav-links a:hover::after{width:100%;}

.header-cta{display:flex;align-items:center;gap:14px;}

.header-call{
  display:flex;align-items:center;gap:8px;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;
  color:var(--white);
}
.header-call svg{width:17px;height:17px;color:var(--gold);}

.nav-toggle{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg-soft);
  color:var(--white);
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle svg{width:20px;height:20px;}

@media (max-width:1240px) and (min-width:980px){
  .brand-text{display:none;}
  .nav-links{gap:22px;}
}

@media (max-width:640px){
  .header-cta .btn-primary{display:none;}
  .brand-text small{display:none;}
  .brand-logo{height:30px;}
}

@media (max-width:979px){
  .nav-links{
    position:fixed;
    top:0;right:0;
    height:100vh;
    width:min(320px,80vw);
    background:#0c0c0e;
    border-left:1px solid var(--border);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:26px;
    padding:40px;
    transform:translateX(100%);
    transition:transform .45s var(--ease);
    z-index:1001;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:19px;}
  .header-call{display:none;}
  .nav-toggle{display:flex;}
  .nav-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.55);
    opacity:0;pointer-events:none;transition:opacity .4s;z-index:1000;
  }
  .nav-overlay.open{opacity:1;pointer-events:auto;}
}

/* ---------- Hero — a night highway, headlights on ---------- */
.hero{
  position:relative;
  /* capped so a tall/narrow viewport (e.g. a phone in "desktop site" mode,
     where the width gets forced wide but the height stays phone-tall)
     can't blow this out into a huge empty gap below the content */
  min-height:min(70vh,640px);
  display:block;
  padding-top:170px;
  padding-bottom:60px;
  background:
    radial-gradient(60% 60% at 62% 32%,rgba(242,169,59,.16),transparent 60%),
    linear-gradient(180deg,#08080a 0%,#0c0a08 55%,#120d08 100%);
  overflow:hidden;
  color:var(--white);
}
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(4,4,5,.4) 0%,transparent 35%,transparent 65%,rgba(4,4,5,.5) 100%);
}

.hero-road{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:1;
  /* isolate the constantly-animating dashes into their own compositing
     layer so every frame repaints just this SVG, not the hero text/buttons
     sitting on top of it */
  contain:paint;
  transform:translateZ(0);
  will-change:transform;
}
/* three lane lines flow toward the viewer at slightly different paces —
   a single uniform speed read as one flat texture, staggering them gives
   a sense of real depth/parallax down the highway.
   Each <path> is drawn one dash-period longer than its lane at both ends
   (see the HTML) and sits inside a fixed clipPath window; the animation
   below just translates the path along its own line by exactly one
   dash-period, which is geometrically identical to the old dashoffset
   sweep but runs on the compositor (transform only) instead of forcing a
   repaint every frame — that repaint was what stalled on phones while
   scrolling. Direction/distance differ per lane because each has its own
   angle, so each gets its own keyframes rather than a shared one. */
.hero-lane-1,.hero-lane-2,.hero-lane-3{will-change:transform;shape-rendering:optimizeSpeed;}
.hero-lane-1{animation:roadFlow1 1.3s linear infinite;}
.hero-lane-2{animation:roadFlow2 1.1s linear infinite;}
.hero-lane-3{animation:roadFlow3 1.5s linear infinite;}
@keyframes roadFlow1{from{transform:translate(0,0);}to{transform:translate(-16.357px,43px);}}
@keyframes roadFlow2{from{transform:translate(0,0);}to{transform:translate(-0.391px,52px);}}
@keyframes roadFlow3{from{transform:translate(0,0);}to{transform:translate(15.79px,43.19px);}}

/* diagonal light streaks: a short bright segment sweeping the length of
   its own line, suggesting motion without anything having to drive
   through the scene. Position and opacity run as two separate animations
   so the sweep itself stays linear/constant-speed — folding both into one
   keyframe set with ease-in-out (the old approach) made the streak visibly
   speed up and slow down instead of gliding at a steady pace.
   Each <line> is drawn at its "rest" position/length in the HTML and here
   just translates the rest of the way to the end of its original line —
   transform instead of stroke-dashoffset, same reasoning as the lanes
   above. The fade still hides both the start and the loop-reset. */
.hero-streak{
  opacity:0;
  will-change:transform,opacity;
  shape-rendering:optimizeSpeed;
}
.hero-streak-1{animation:streakMove1 3.2s linear infinite,streakFade 3.2s ease-in-out infinite;}
.hero-streak-2{animation:streakMove2 3.6s linear infinite .6s,streakFade 3.6s ease-in-out infinite .6s;}
.hero-streak-3{animation:streakMove3 2.8s linear infinite 1.3s,streakFade 2.8s ease-in-out infinite 1.3s;}
@keyframes streakMove1{from{transform:translate(0,0);}to{transform:translate(140.95px,-31.32px);}}
@keyframes streakMove2{from{transform:translate(0,0);}to{transform:translate(201.19px,-50.3px);}}
@keyframes streakMove3{from{transform:translate(0,0);}to{transform:translate(240.89px,-51.62px);}}
@keyframes streakFade{
  0%  {opacity:0;}
  12% {opacity:.9;}
  55% {opacity:.9;}
  75% {opacity:0;}
  100%{opacity:0;}
}

/* ambient sparks drift slowly and pulse, a quiet premium "alive" touch */
.hero-spark{animation:sparkDrift 6s ease-in-out infinite;will-change:transform,opacity;}
.hero-spark-1{animation-delay:0s;}
.hero-spark-2{animation-delay:1.4s;}
.hero-spark-3{animation-delay:2.8s;}
.hero-spark-4{animation-delay:4.1s;}
@keyframes sparkDrift{
  0%,100%{transform:translateY(0);opacity:.35;}
  50%{transform:translateY(-22px);opacity:.9;}
}

/* paused via JS (IntersectionObserver) once the hero scrolls out of view */
.hero-road.is-offscreen .hero-lane-1,
.hero-road.is-offscreen .hero-lane-2,
.hero-road.is-offscreen .hero-lane-3,
.hero-road.is-offscreen .hero-streak,
.hero-road.is-offscreen .hero-spark{
  animation-play-state:paused;
}

@media (prefers-reduced-motion:reduce){
  .hero-lane-1,.hero-lane-2,.hero-lane-3{animation:none;}
  .hero-streak{animation:none;opacity:0;}
  .hero-spark{animation:none;opacity:.6;}
}

/* the road's vanishing point sits right of viewBox-centre for the wide
   desktop hero; on narrow viewports the SVG's own centre-crop would push
   it off-canvas entirely, so pull the whole scene back toward it, in the
   SVG's own coordinate space */
@media (max-width:900px){
  .hero-road-inner{transform:translateX(-230px);}
}

.hero .container{
  position:relative;
  z-index:2;
}

.hero-content{max-width:680px;}

.hero-content h1{
  font-size:clamp(38px,5.8vw,68px);
  margin-bottom:22px;
  text-shadow:0 0 60px rgba(242,169,59,.18);
}

.hero-content .lead{
  color:var(--muted);
  font-size:18px;
  max-width:520px;
  margin-bottom:34px;
}

.hero-cta{display:flex;flex-wrap:wrap;gap:16px;}

/* Floating widget bar — dark glass, gold-lit dashboard facts */
.hero-widget{
  position:relative;
  z-index:3;
  margin-top:46px;
}
.hero-widget-inner{
  background:rgba(20,19,17,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(242,169,59,.22);
  border-radius:20px;
  box-shadow:var(--shadow-lg),0 0 60px -22px rgba(242,169,59,.35);
  padding:14px 14px 14px 28px;
  display:flex;
  align-items:center;
  gap:8px;
}
.hero-widget-field{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  flex:1;
  min-width:0;
}
.hero-widget-field .icon{
  width:38px;height:38px;flex-shrink:0;
  border-radius:11px;
  background:var(--gold-gradient);
  display:flex;align-items:center;justify-content:center;
  color:#151107;
}
.hero-widget-field .icon svg{width:18px;height:18px;}
.hero-widget-field b{font-family:'Poppins',sans-serif;font-size:15.5px;display:block;color:var(--white);white-space:nowrap;}
.hero-widget-field span{font-size:11.5px;color:var(--muted);line-height:1.3;display:block;}
.hero-widget-divider{width:1px;align-self:stretch;background:rgba(255,255,255,.1);flex-shrink:0;}
.hero-widget-btn{flex-shrink:0;}

@media (max-width:979px){
  .hero{padding-top:170px;text-align:center;}
  .hero-content{max-width:100%;margin:0 auto;}
  .hero-content .lead{margin-left:auto;margin-right:auto;}
  .hero-cta{justify-content:center;}
  /* the heading/paragraph become centered here, sitting right over the
     road graphic's converging lines — dim the road and add a solid dark
     shadow behind the text so it stays easy to read against it */
  .hero-road{opacity:.4;}
  .hero-content h1{text-shadow:0 2px 18px rgba(0,0,0,.9),0 0 40px rgba(242,169,59,.15);}
  .hero-content .lead{text-shadow:0 2px 12px rgba(0,0,0,.9);}
}
@media (max-width:900px){
  .hero-widget-inner{flex-wrap:wrap;border-radius:24px;padding:20px;}
  .hero-widget-field{flex:1 1 40%;padding:8px 10px;}
  .hero-widget-divider{display:none;}
  .hero-widget-btn{flex:1 1 100%;margin-top:6px;}
}
@media (max-width:560px){
  .hero-widget-field{flex:1 1 100%;}
}

/* ---------- Marquee strip — styled as a stretch of road ---------- */
.strip{
  position:relative;
  background:linear-gradient(180deg,#0e0e10,#17171a 50%,#0e0e10);
  border-top:2px solid rgba(255,255,255,.08);
  border-bottom:2px solid rgba(255,255,255,.08);
  padding:22px 0;
  overflow:hidden;
}
.strip::before{
  content:'';
  position:absolute;
  top:50%;left:0;right:0;
  height:3px;
  background-image:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 28px,transparent 28px,transparent 54px);
  opacity:.35;
  z-index:0;
  will-change:transform;
  animation:stripFlow 2.4s linear infinite;
}
/* transform, not background-position: the gradient tiles every 54px, so
   sliding the whole layer by exactly one tile is visually identical to
   shifting the background phase, but stays on the compositor instead of
   needing a repaint every frame (see the mobile hero-road note above for
   why that matters while scrolling). translateY centers it, same as the
   old static transform did. */
@keyframes stripFlow{from{transform:translateY(-50%) translateX(0);}to{transform:translateY(-50%) translateX(-54px);}}
.strip-track{
  position:relative;
  z-index:1;
  display:flex;
  gap:60px;
  width:max-content;
  animation:marquee 26s linear infinite;
  will-change:transform;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.strip-track span{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-2);
  background:var(--bg-alt);
  padding:6px 14px;
  border-radius:999px;
  display:flex;align-items:center;gap:10px;
}
.strip-track span b{color:var(--gold);}
.strip-track span b.ember{color:var(--ember);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Road divider — a literal stretch of road between sections ---------- */
.road-divider{
  position:relative;
  height:46px;
  background:linear-gradient(180deg,#0b0b0c,#151517 50%,#0b0b0c);
  border-top:2px solid rgba(255,255,255,.07);
  border-bottom:2px solid rgba(255,255,255,.07);
  overflow:hidden;
}
.road-divider::before{
  content:'';
  position:absolute;
  top:50%;left:0;right:0;
  height:4px;
  background-image:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 34px,transparent 34px,transparent 64px);
  box-shadow:0 0 14px rgba(242,169,59,.45);
  will-change:transform;
  animation:dividerFlow 1.8s linear infinite;
}
/* same transform-instead-of-background-position swap as .strip::before above */
@keyframes dividerFlow{from{transform:translateY(-50%) translateX(0);}to{transform:translateY(-50%) translateX(-64px);}}
.road-divider::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(30% 100% at 15% 50%,rgba(255,90,60,.12),transparent 70%),
    radial-gradient(30% 100% at 85% 50%,rgba(242,169,59,.12),transparent 70%);
}
@media (max-width:640px){.road-divider{height:34px;}}

/* ---------- Company overview (asymmetric split) ---------- */
.overview-split{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:20px 80px;
}
.overview-intro{align-self:start;position:sticky;top:130px;}
.overview-intro p{color:var(--muted);font-size:16px;margin-bottom:16px;}
.overview-intro p:last-child{margin-bottom:0;}
.overview-row{
  display:flex;
  gap:24px;
  padding:30px 0;
  border-bottom:1px solid var(--border);
}
.overview-row:first-child{padding-top:4px;}
.overview-row:last-child{border-bottom:none;}
.overview-row .icon-badge{margin-bottom:0;flex-shrink:0;}
.overview-row:hover .icon-badge{transform:scale(1.08) rotate(-4deg);}
.overview-row h3{font-size:19px;margin-bottom:8px;}
.overview-row p{color:var(--muted);font-size:14.5px;}

.overview-row-featured .icon-badge{width:66px;height:66px;}
.overview-row-featured .icon-badge svg{width:29px;height:29px;}
.overview-row-featured h3{font-size:22px;}
.overview-also{
  padding-top:28px;
  font-family:'Poppins',sans-serif;
  font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);
}
.overview-mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:14px;
}
.overview-mini{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  transition:border-color .3s,background .3s;
}
.overview-mini:hover{border-color:rgba(242,169,59,.3);background:rgba(242,169,59,.03);}
.overview-mini .icon-badge{
  width:40px;height:40px;
  border-radius:11px;
  margin-bottom:0;
  flex-shrink:0;
}
.overview-mini .icon-badge svg{width:18px;height:18px;}
.overview-mini h4{font-family:'Poppins',sans-serif;font-size:13.5px;font-weight:700;margin-bottom:3px;}
.overview-mini p{color:var(--muted-2);font-size:12px;line-height:1.4;}

@media (max-width:560px){
  .overview-mini-grid{grid-template-columns:1fr;}
}

@media (max-width:900px){
  .overview-split{grid-template-columns:1fr;gap:40px;}
  .overview-intro{position:static;}
}
@media (max-width:560px){
  .overview-row{flex-direction:column;gap:14px;}
}

.icon-badge{
  width:58px;height:58px;
  border-radius:15px;
  background:linear-gradient(155deg,rgba(242,169,59,.22),rgba(242,169,59,.04));
  border:1px solid rgba(242,169,59,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px -12px rgba(242,169,59,.4);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  color:var(--gold-light);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.icon-badge svg{width:25px;height:25px;stroke-width:2;}

.icon-badge-ember{
  background:linear-gradient(155deg,rgba(255,90,60,.24),rgba(255,90,60,.05));
  border-color:rgba(255,90,60,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px -12px rgba(255,90,60,.45);
  color:var(--ember-light);
}

/* ---------- Services / Plans ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.services-grid.cols-2{
  grid-template-columns:repeat(2,1fr);
  max-width:840px;
  margin:0 auto;
}
.service-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:36px 30px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),border-color .4s,background .4s,box-shadow .4s;
}
.service-card:hover{transform:translateY(-8px);border-color:rgba(242,169,59,.35);background:var(--card-hover);box-shadow:var(--shadow-lg);}
.service-card.featured{
  background:linear-gradient(165deg,#1c1a12,#141215 60%);
  border-color:rgba(242,169,59,.55);
  box-shadow:0 25px 60px -20px rgba(242,169,59,.25);
}
.service-badge{
  position:absolute;top:24px;right:24px;
  background:var(--gold-gradient);
  color:#151107;
  font-family:'Poppins',sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
}
.service-icon{
  width:60px;height:60px;
  border-radius:16px;
  background:var(--gold-gradient);
  display:flex;align-items:center;justify-content:center;
  color:#151107;
  margin-bottom:24px;
  box-shadow:var(--shadow-gold);
}
.service-icon svg{width:28px;height:28px;stroke-width:2;}
.service-icon-ember{background:var(--ember-gradient);box-shadow:0 12px 32px -10px rgba(255,90,60,.45);}
.service-card h3{font-size:22px;margin-bottom:12px;}
.service-card p{color:var(--muted);font-size:14.5px;margin-bottom:24px;min-height:66px;}
.service-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;
  color:var(--gold-light);
}
.service-link svg{width:16px;height:16px;transition:transform .3s var(--ease);}
.service-card:hover .service-link svg{transform:translateX(5px);}

@media (max-width:979px){.services-grid,.services-grid.cols-2{grid-template-columns:1fr;}}

/* ---------- Two-wheeler spotlight ---------- */
.spotlight{
  background:
    radial-gradient(55% 70% at 12% -5%,rgba(242,169,59,.20),transparent 60%),
    radial-gradient(50% 60% at 100% 105%,rgba(255,90,60,.16),transparent 60%),
    var(--bg-soft);
  border-top:1px solid transparent;
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(242,169,59,.28),transparent) 1;
}
.spotlight-top{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  margin-bottom:70px;
}
.spotlight-top p{color:var(--muted);font-size:16.5px;margin:20px 0 0;}
.spotlight-visual{
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.spotlight-visual .brand-mark-big{width:70%;max-width:380px;filter:drop-shadow(0 20px 40px rgba(242,169,59,.3));}

/* ---------- Key benefits checklist ---------- */
.benefits-block{
  background:linear-gradient(165deg,var(--card),#141215 70%);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:54px 40px;
  margin-bottom:80px;
  box-shadow:var(--shadow-sm);
}
.benefits-block .section-head{margin-bottom:26px;}
.benefits-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px 32px;
  max-width:920px;
  margin:0 auto;
}
.benefits-list li{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  font-weight:500;
  color:var(--white);
}
.benefits-list li svg{
  width:20px;height:20px;flex-shrink:0;
  color:var(--gold);
  stroke-width:2.4;
}
@media (max-width:860px){.benefits-list{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){
  .benefits-block{padding:36px 24px;}
  .benefits-list{grid-template-columns:1fr;}
}

.suitable-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}
.suitable-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:28px 24px;
  text-align:left;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
}
.suitable-card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--gold-gradient);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.suitable-card:hover{transform:translateY(-6px);border-color:rgba(242,169,59,.4);box-shadow:var(--shadow-lg);}
.suitable-card:hover::before{transform:scaleX(1);}
.suitable-card:hover .icon-badge{transform:scale(1.08) rotate(-4deg);}
.suitable-card .icon-badge{margin-bottom:18px;}
.suitable-card h4{font-family:'Poppins',sans-serif;font-size:16.5px;margin-bottom:8px;}
.suitable-card p{font-size:13.5px;color:var(--muted);}

@media (max-width:979px){
  .spotlight-top{grid-template-columns:1fr;gap:30px;}
  .suitable-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .spotlight-visual .brand-mark-big{width:42%;max-width:180px;}
}
@media (max-width:640px){.suitable-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:420px){.suitable-grid{grid-template-columns:1fr;}}

/* ---------- Platforms ---------- */
.platforms-row{
  position:relative;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:10px;
}
.platforms-row::before{
  content:'';
  position:absolute;
  top:50%;left:18%;right:18%;
  height:0;
  border-top:2px dashed rgba(242,169,59,.4);
}
@media (max-width:700px){.platforms-row::before{display:none;}}
.platform-pill{
  position:relative;
  display:flex;align-items:center;gap:14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px 34px;
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
}
.platform-pill:hover{transform:translateY(-6px);border-color:rgba(242,169,59,.4);box-shadow:var(--shadow-lg);}
.platform-pill .dot{width:10px;height:10px;border-radius:50%;background:var(--gold-gradient);}
.platform-pill span{font-family:'Poppins',sans-serif;font-weight:800;font-size:19px;letter-spacing:.02em;}
.platforms-note{
  text-align:center;color:var(--muted-2);font-size:13px;
  max-width:560px;margin:34px auto 0;
}

/* ---------- How it works ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
  position:relative;
}
.steps::before{
  content:'';
  position:absolute;
  top:58px;left:12.5%;right:12.5%;
  height:0;
  border-top:2px dashed rgba(242,169,59,.4);
  z-index:0;
}
.step{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:32px 26px;
  position:relative;
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
}
.step:hover{transform:translateY(-6px);border-color:rgba(242,169,59,.4);box-shadow:var(--shadow-lg);}
.step .num{
  position:relative;
  z-index:1;
  width:52px;height:52px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif;
  font-size:19px;font-weight:800;
  background:var(--gold-gradient);
  color:#151107;
  margin-bottom:20px;
  box-shadow:0 0 0 6px var(--card),0 10px 24px -8px rgba(242,169,59,.5);
}
.step h4{font-size:17px;margin-bottom:10px;}
.step p{font-size:14px;color:var(--muted);}

@media (max-width:979px){.steps{grid-template-columns:repeat(2,1fr);}.steps::before{display:none;}}
@media (max-width:560px){.steps{grid-template-columns:1fr;}}

/* ---------- Why us (trust strip) ---------- */
.trust-strip{
  display:flex;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.trust-item{
  flex:1;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:34px 26px;
  border-right:1px solid var(--border);
  transition:background .35s var(--ease);
}
.trust-item:last-child{border-right:none;}
.trust-item:hover{background:rgba(242,169,59,.04);}
.trust-item svg{
  width:26px;height:26px;flex-shrink:0;
  color:var(--gold);
  stroke-width:1.8;
  filter:drop-shadow(0 0 10px rgba(242,169,59,.4));
}
.trust-item h4{font-size:15px;margin-bottom:6px;}
.trust-item p{font-size:12.5px;color:var(--muted);line-height:1.5;}
.trust-item-ember svg{color:var(--ember);filter:drop-shadow(0 0 10px rgba(255,90,60,.45));}

@media (max-width:979px){
  .trust-strip{flex-wrap:wrap;}
  .trust-item{flex:1 1 50%;border-right:none;border-bottom:1px solid var(--border);}
  .trust-item:nth-child(2n){border-left:1px solid var(--border);}
}
@media (max-width:560px){
  .trust-item{flex:1 1 100%;border-left:none !important;}
}

/* ---------- Vision ---------- */
.vision{
  position:relative;
  text-align:center;
  padding:92px 0;
  overflow:hidden;
  background:
    radial-gradient(50% 60% at 50% 0%,rgba(242,169,59,.14),transparent 65%),
    var(--bg);
}
.vision-watermark{
  position:absolute;
  bottom:-10%;left:50%;
  width:900px;max-width:140%;
  transform:translateX(-50%) rotate(2deg);
  opacity:.05;
  pointer-events:none;
}
.vision .container{position:relative;}
.vision blockquote{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(26px,4vw,44px);
  max-width:840px;
  margin:0 auto 26px;
  line-height:1.3;
  color:var(--white);
}
.vision p{
  max-width:640px;
  margin:0 auto;
  color:var(--muted);
  font-size:16px;
}
.vision-mark{width:180px;border-radius:20px;margin:0 auto 34px;box-shadow:var(--shadow-lg),0 0 80px -16px rgba(242,169,59,.4);}

/* ---------- CTA ---------- */
.cta{
  background:linear-gradient(135deg,#211a10,#0c0b09 60%);
  border:1px solid rgba(242,169,59,.3);
  border-radius:32px;
  padding:64px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-main{max-width:620px;margin:0 auto;}
.cta::before{
  content:'';
  position:absolute;top:-40%;right:-10%;
  width:420px;height:420px;
  background:radial-gradient(circle,rgba(242,169,59,.32),transparent 70%);
  pointer-events:none;
}
.cta::after{
  content:'';
  position:absolute;bottom:-45%;left:-10%;
  width:380px;height:380px;
  background:radial-gradient(circle,rgba(255,90,60,.22),transparent 70%);
  pointer-events:none;
}
.cta h2{font-size:clamp(26px,3.6vw,38px);margin-bottom:14px;}
.cta p{color:var(--muted);font-size:16px;max-width:480px;margin:0 auto;}
.cta-price{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px 10px;margin:26px 0 30px;
}
.cta-price b{
  font-family:'Poppins',sans-serif;font-size:40px;font-weight:900;
  background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.cta-price span{color:var(--muted);font-size:14px;}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}

@media (max-width:979px){
  .cta{padding:40px 26px;border-radius:24px;}
}

/* ---------- Contact form (highlighted) ---------- */
.contact-form-card{
  position:relative;
  max-width:640px;
  margin:48px auto 0;
  background:linear-gradient(165deg,#1c1a12,#141215 65%);
  border:1px solid rgba(242,169,59,.55);
  border-radius:28px;
  padding:48px;
  text-align:center;
  box-shadow:0 30px 70px -22px rgba(242,169,59,.35),var(--shadow-lg);
  overflow:hidden;
}
.contact-form-card::before{
  content:'';
  position:absolute;top:-50%;left:50%;
  width:420px;height:420px;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(242,169,59,.22),transparent 70%);
  pointer-events:none;
}
.contact-form-card .eyebrow{margin-bottom:14px;}
.contact-form-card h3{font-size:clamp(22px,3vw,28px);margin-bottom:10px;position:relative;}
.contact-form-card > p{color:var(--muted);font-size:15px;margin-bottom:30px;position:relative;}
.contact-form{position:relative;display:flex;flex-direction:column;gap:18px;text-align:left;}
.form-row{display:flex;flex-direction:column;gap:8px;}
.form-row label{
  font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.form-row input,.form-row textarea{
  font-family:'Inter',sans-serif;
  font-size:15px;
  color:var(--white);
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  resize:vertical;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.form-row input::placeholder,.form-row textarea::placeholder{color:var(--muted-2);}
.form-row input:focus,.form-row textarea:focus{
  outline:none;
  border-color:var(--gold);
  background:rgba(242,169,59,.05);
}
.contact-form .btn{margin-top:6px;}
.form-status{font-size:13px;color:var(--muted);margin:0;min-height:16px;}
.form-status:empty{display:none;}

@media (max-width:640px){
  .contact-form-card{padding:34px 24px;border-radius:22px;}
}

#plans-contact-form{margin-bottom:48px;}

/* ---------- Footer ---------- */
footer{
  background:
    radial-gradient(60% 50% at 50% 0%,rgba(242,169,59,.12),transparent 60%),
    radial-gradient(40% 40% at 100% 0%,rgba(255,90,60,.08),transparent 60%),
    #08080a;
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(242,169,59,.3),transparent) 1;
  padding:70px 0 0;
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.1fr;
  gap:40px;
  padding-bottom:50px;
  border-bottom:1px solid var(--border);
}
.footer-brand .brand{margin-bottom:16px;}
.footer-brand p{color:var(--muted);font-size:14px;max-width:280px;margin-bottom:18px;}
.footer-social{display:flex;gap:12px;}
.footer-social a{
  width:38px;height:38px;border-radius:10px;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:.3s;
}
.footer-social a:hover{border-color:var(--gold);color:var(--gold);}
.footer-social svg{width:16px;height:16px;}

.footer-col h5{
  font-family:'Poppins',sans-serif;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--white);margin-bottom:20px;
}
.footer-col ul li{margin-bottom:12px;}
.footer-col ul li a{color:var(--muted);font-size:14.5px;transition:color .25s;}
.footer-col ul li a:hover{color:var(--gold-light);}
.footer-col .contact-line{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:14.5px;margin-bottom:14px;}
.footer-col .contact-line svg{width:16px;height:16px;color:var(--gold);flex-shrink:0;margin-top:2px;}

.footer-bottom{
  padding:26px 0 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  color:var(--muted-2);
  font-size:12.5px;
}

.footer-disclaimer{
  padding:24px 0;
  border-top:1px solid var(--border);
  color:var(--muted-2);
  font-size:12px;
  line-height:1.7;
}

@media (max-width:979px){
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .footer-top{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}

/* ---------- Floating WhatsApp ---------- */
.float-whatsapp{
  position:fixed;
  bottom:26px;right:26px;
  z-index:900;
  width:60px;height:60px;
  border-radius:50%;
  background:var(--gold-gradient);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 32px -6px rgba(242,169,59,.55);
  color:#151107;
  transition:transform .3s var(--ease);
}
.float-whatsapp:hover{transform:scale(1.08);}
.float-whatsapp svg{width:28px;height:28px;}
/* animating box-shadow directly repaints every frame; this button is
   position:fixed so it's on screen for the entire time the page scrolls,
   making it a steady source of the same freeze described above. A
   pseudo-element that only fades its (static) shadow in and out keeps the
   "breathing glow" look on opacity alone, which the compositor handles. */
.float-whatsapp::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:0 12px 40px -4px rgba(242,169,59,.85);
  opacity:0;
  pointer-events:none;
  will-change:opacity;
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:0;}
  50%{opacity:1;}
}

/* ---------- Form result modal ---------- */
.form-modal-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(8,7,5,.72);
  backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:formModalFade .25s var(--ease);
}
.form-modal-overlay[hidden]{display:none;}
@keyframes formModalFade{from{opacity:0;}to{opacity:1;}}
.form-modal{
  position:relative;
  width:100%;max-width:380px;
  background:linear-gradient(165deg,#1c1a12,#141215 65%);
  border:1px solid rgba(242,169,59,.55);
  border-radius:22px;
  padding:40px 32px 32px;
  text-align:center;
  box-shadow:0 30px 70px -22px rgba(242,169,59,.35),var(--shadow-lg);
  animation:formModalPop .3s var(--ease);
}
@keyframes formModalPop{from{opacity:0;transform:scale(.92) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}
.form-modal-close{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--border);
  color:var(--muted);cursor:pointer;transition:.3s;
}
.form-modal-close:hover{border-color:var(--gold);color:var(--gold);}
.form-modal-close svg{width:16px;height:16px;}
.form-modal-icon{
  width:64px;height:64px;margin:0 auto 20px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(242,169,59,.12);
  color:var(--gold);
}
.form-modal.is-error .form-modal-icon{background:rgba(255,90,90,.12);color:#ff6b6b;}
.form-modal-icon svg{width:32px;height:32px;}
.form-modal h4{font-size:20px;margin-bottom:10px;}
.form-modal p{color:var(--muted);font-size:14.5px;line-height:1.6;margin-bottom:26px;}
.form-modal .btn{width:100%;}

/* ---------- Back to top ---------- */
.back-top{
  position:fixed;
  bottom:26px;left:26px;
  z-index:900;
  width:48px;height:48px;
  border-radius:50%;
  background:var(--bg-alt);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--white);
  opacity:0;pointer-events:none;
  transform:translateY(10px);
  transition:opacity .35s,transform .35s;
}
.back-top.show{opacity:1;pointer-events:auto;transform:translateY(0);}
.back-top svg{width:18px;height:18px;}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-stagger > *{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal-stagger.in > *{opacity:1;transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.14s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.23s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.32s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.41s;}