/* =================================================================
   ROTA KOSU KOCLUGU — v5 "Trail & Track"
   Radical running-themed redesign
   - Asphalt + lane-line backgrounds
   - Topographic contours
   - Elevation profile dividers
   - KM-counter section headings
   - Race-bib pricing cards with perforations
   - Chronograph tool panels
   - Stride/footprint accents
   System fonts only · zero CDN · preserves every class name
   ================================================================= */

/* ---------- design tokens ---------- */
:root{
  /* sunrise trail palette */
  --brand:#E26A2C;--brand-d:#B54A12;--brand-l:#F59247;--brand-xl:#FFBA7A;
  --brand-bg:rgba(226,106,44,.07);--brand-ring:rgba(226,106,44,.22);
  --ember:#D43F1A;--gold:#D9A419;--gold-l:#F0C850;--gold-d:#8C6A0C;
  --teal:#0E7F65;--teal-l:#2BAE8D;--teal-bg:rgba(14,127,101,.08);
  --sky:#1E4A6B;--skyl:#3E79A6;

  /* neutrals — warm paper / carbon */
  --ink:#0B1119;--ink2:#131C27;--ink3:#1E2A38;--ink4:#33475B;--ink5:#4C5B6C;
  --body:#4C5B6C;--muted:#748293;--faint:#AFB8C5;
  --line:#E4DED3;--line2:#F1ECDF;--line3:#D8D1C2;
  --bg:#F7F4EC;--bg2:#FFFCF4;--bg3:#EFE9DB;--white:#fff;
  --err:#BC2626;

  /* Type */
  --ff:'Segoe UI','SF Pro Text',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --ffd:'Segoe UI','SF Pro Display',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --ffm:ui-monospace,'SF Mono','Cascadia Mono','Consolas',monospace;
  --hero-fs:clamp(2.8rem,6.4vw,4.8rem);

  /* Shape */
  --r:6px;--r2:10px;--r3:16px;--r4:24px;--r5:32px;--pill:999px;

  /* Shadow — warm undertone */
  --sh1:0 1px 2px rgba(30,20,10,.05);
  --sh2:0 2px 6px rgba(30,20,10,.04),0 12px 32px rgba(30,20,10,.08);
  --sh3:0 6px 18px rgba(30,20,10,.06),0 30px 66px rgba(30,20,10,.12);
  --sh-glow:0 6px 24px rgba(226,106,44,.32),0 2px 8px rgba(226,106,44,.22);
  --sh-up:0 -8px 32px rgba(30,20,10,.12);

  /* Motion */
  --ease:cubic-bezier(.25,.46,.45,.94);
  --ease2:cubic-bezier(.22,1,.36,1);
  --ease3:cubic-bezier(.65,.05,.36,1);
  --t1:140ms;--t2:280ms;--t3:480ms;--t4:720ms;

  /* ====== Thematic SVG assets ====== */
  /* Topographic contour lines */
  --topo:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'><g fill='none' stroke='%23E26A2C' stroke-width='.9' opacity='.5'><path d='M-20 260 Q70 200 150 220 T360 170'/><path d='M-20 220 Q70 150 170 180 T360 120'/><path d='M-20 180 Q90 100 200 140 T360 80'/><path d='M-20 300 Q90 240 200 260 T360 220'/><path d='M-20 140 Q110 60 220 100 T360 40'/><path d='M-20 340 Q110 290 220 300 T360 260'/></g></svg>");
  /* Asphalt + center lane dashes (horizontal) */
  --asphalt:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='24' viewBox='0 0 140 24'><rect x='0' y='11' width='52' height='2' rx='1' fill='%23E26A2C' opacity='.55'/></svg>");
  /* Small shoe-print stride */
  --stride:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='16' viewBox='0 0 44 16'><ellipse cx='6' cy='5' rx='4' ry='5' fill='%23E26A2C' opacity='.5'/><ellipse cx='22' cy='11' rx='4' ry='5' fill='%23E26A2C' opacity='.35'/><ellipse cx='38' cy='5' rx='4' ry='5' fill='%23E26A2C' opacity='.22'/></svg>");
  /* Elevation profile (used as divider above alt sections) */
  --elev:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1440' height='70' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0 60 L60 45 L130 52 L200 28 L270 40 L340 18 L420 35 L500 22 L580 42 L660 30 L740 48 L820 25 L900 38 L980 20 L1060 44 L1140 32 L1220 48 L1300 28 L1380 38 L1440 34 L1440 70 L0 70 Z' fill='%23FFFCF4'/><path d='M0 60 L60 45 L130 52 L200 28 L270 40 L340 18 L420 35 L500 22 L580 42 L660 30 L740 48 L820 25 L900 38 L980 20 L1060 44 L1140 32 L1220 48 L1300 28 L1380 38 L1440 34' fill='none' stroke='%23E26A2C' stroke-width='1.5' opacity='.7'/></svg>");
  /* Dark elevation (inverted for dark sections) */
  --elevDark:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1440' height='70' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0 60 L60 45 L130 52 L200 28 L270 40 L340 18 L420 35 L500 22 L580 42 L660 30 L740 48 L820 25 L900 38 L980 20 L1060 44 L1140 32 L1220 48 L1300 28 L1380 38 L1440 34 L1440 70 L0 70 Z' fill='%230B1119'/><path d='M0 60 L60 45 L130 52 L200 28 L270 40 L340 18 L420 35 L500 22 L580 42 L660 30 L740 48 L820 25 L900 38 L980 20 L1060 44 L1140 32 L1220 48 L1300 28 L1380 38 L1440 34' fill='none' stroke='%23F59247' stroke-width='1.5' opacity='.8'/></svg>");
  /* Lane-line track stripes */
  --lanes:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='120' viewBox='0 0 1 120'><rect y='0' width='1' height='120' fill='%23E26A2C' opacity='.07'/></svg>");
  /* Far mountain ridge — deep */
  --ridgeFar:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='360' viewBox='0 0 1920 360' preserveAspectRatio='none'><path d='M0 260 L80 220 L160 240 L240 190 L310 215 L380 170 L460 195 L540 150 L620 180 L700 135 L790 165 L870 130 L960 170 L1050 140 L1130 175 L1220 145 L1300 180 L1390 155 L1470 195 L1560 165 L1640 200 L1720 180 L1810 220 L1920 200 L1920 360 L0 360 Z' fill='%23101A28'/></svg>");
  /* Near mountain ridge */
  --ridgeNear:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='360' viewBox='0 0 1920 360' preserveAspectRatio='none'><path d='M0 300 L90 260 L180 290 L270 240 L360 275 L460 225 L540 265 L640 210 L720 255 L820 215 L910 260 L1000 220 L1090 265 L1180 235 L1280 275 L1370 245 L1470 285 L1560 250 L1650 290 L1750 260 L1830 300 L1920 280 L1920 360 L0 360 Z' fill='%23182637'/></svg>");
  /* Runner silhouette */
  --runner:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='320' viewBox='0 0 220 320'><g fill='%23E26A2C' opacity='.85'><circle cx='130' cy='52' r='18'/><path d='M138 72 Q152 82 156 108 L168 146 Q172 158 164 164 L148 152 L140 180 L150 220 Q152 232 144 240 L112 272 Q100 282 92 274 L86 266 Q82 258 92 250 L118 222 L118 186 L92 168 Q82 162 82 150 L82 120 Q84 98 100 88 L120 78 Z'/><path d='M148 152 L182 138 Q192 134 196 144 L198 152 Q200 160 190 164 L154 172 Z'/><path d='M90 266 L52 290 Q42 296 38 288 L36 282 Q32 272 42 268 L86 248 Z'/></g></svg>");
  /* Sun / arc */
  --sunArc:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800'><defs><radialGradient id='g' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%23FFBA7A' stop-opacity='.7'/><stop offset='45%25' stop-color='%23E26A2C' stop-opacity='.28'/><stop offset='100%25' stop-color='%23E26A2C' stop-opacity='0'/></radialGradient></defs><circle cx='400' cy='400' r='400' fill='url(%23g)'/></svg>");
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
body{
  font-family:var(--ff);font-size:1rem;line-height:1.72;color:var(--ink5);
  counter-reset:km;
  background:
    radial-gradient(1200px 600px at 85% -10%,rgba(226,106,44,.06),transparent 60%),
    radial-gradient(900px 500px at -10% 30%,rgba(14,127,101,.04),transparent 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:rgba(226,106,44,.28);color:var(--ink)}

/* custom scrollbar — pace bar */
html{scrollbar-color:var(--brand) var(--bg3);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg3)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--brand-l),var(--brand),var(--brand-d));
  border:3px solid var(--bg3);border-radius:var(--pill);
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--brand),var(--ember))}

/* ---------- a11y ---------- */
.skip-link{
  position:absolute;top:-100%;left:1rem;z-index:10000;
  background:var(--ink);color:#fff;padding:.6rem 1.3rem;
  border-radius:var(--pill);font-weight:700;text-decoration:none;font-size:.8125rem;
  box-shadow:var(--sh-glow);transition:top .2s var(--ease2);
}
.skip-link:focus{top:1rem;outline:2px solid var(--brand-l);outline-offset:3px}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:3px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}

/* ---------- typography ---------- */
h1,h2,h3,h4,h5,h6{font-family:var(--ffd);color:var(--ink);font-weight:800;line-height:1.1;letter-spacing:-.028em}
h1{font-size:clamp(2.1rem,4vw,3rem);margin-bottom:1.2rem;letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:1rem;letter-spacing:-.035em;font-weight:900}
h3{font-size:1.32rem;margin-bottom:.75rem;letter-spacing:-.02em;font-weight:750;font-weight:700}
h4{font-size:1.08rem;margin-bottom:.55rem;letter-spacing:-.01em}
p{margin-bottom:1rem;max-width:66ch}p:last-child{margin-bottom:0}
a{color:var(--brand);text-decoration:underline;text-decoration-color:rgba(226,106,44,.28);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .18s,text-decoration-color .18s}
a:hover{color:var(--brand-d);text-decoration-color:var(--brand-d)}
strong{font-weight:700;color:var(--ink)}
small{font-size:.8125rem}
ul,ol{padding-left:1.4rem;margin-bottom:1rem}
li{margin-bottom:.45rem}
img{max-width:100%;height:auto;display:block}
hr{border:0;height:24px;background:var(--asphalt) center/140px 24px repeat-x;margin:2.4rem 0;opacity:.6}

/* ---------- layout ---------- */
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 1.6rem;position:relative}
.container--narrow{max-width:740px}

.section{padding:6.5rem 0 6rem;position:relative;overflow:hidden}

/* Every .section background lane-lines (very subtle) */
.section::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(90deg,transparent calc(20% - 1px),rgba(226,106,44,.05) 20%,transparent calc(20% + 1px)),
    linear-gradient(90deg,transparent calc(80% - 1px),rgba(226,106,44,.05) 80%,transparent calc(80% + 1px));
}
.section>*{position:relative;z-index:1}

/* --- section with alt warm paper background + topographic contours --- */
.section--alt{
  background:
    linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);
  position:relative;
}
.section--alt::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--topo);background-size:540px 540px;opacity:.32;
  mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);
}

/* --- dark section --- */
.section--dark{
  background:
    radial-gradient(900px 520px at 80% 20%,rgba(226,106,44,.16),transparent 65%),
    radial-gradient(700px 400px at 10% 90%,rgba(14,127,101,.10),transparent 55%),
    linear-gradient(180deg,var(--ink) 0%,#060A11 100%);
  color:rgba(255,255,255,.78);position:relative;
}
.section--dark::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse at center,#000 50%,transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 50%,transparent 90%);
}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}

/* ---- Elevation-profile dividers over section edges ---- */
.section--alt>.container::before{
  content:'';position:absolute;left:-50vw;right:-50vw;top:-6.8rem;height:70px;pointer-events:none;
  background:var(--elev) center/100% 100% no-repeat;
  filter:drop-shadow(0 -2px 8px rgba(226,106,44,.12));
}
.section--dark>.container::before{
  content:'';position:absolute;left:-50vw;right:-50vw;top:-6.8rem;height:70px;pointer-events:none;
  background:var(--elevDark) center/100% 100% no-repeat;
}

/* Small route accent above headings (decorative marker: dashed route ending in pulse waypoint) */
.section__route-accent{
  width:64px;height:10px;margin-bottom:1.3rem;position:relative;
}
.section__route-accent::before{
  content:'';position:absolute;top:4px;left:0;right:14px;height:2px;
  background:repeating-linear-gradient(90deg,var(--brand) 0 7px,transparent 7px 13px);
  border-radius:2px;
}
.section__route-accent::after{
  content:'';position:absolute;top:0;right:0;width:10px;height:10px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 3px var(--brand-bg),0 0 16px rgba(226,106,44,.65);
  animation:wayPulse 2.4s var(--ease) infinite;
}

/* KM counter label on section headings */
.section h2{counter-increment:km;position:relative}
.section h2::before{
  content:'KM ' counter(km,decimal-leading-zero);
  display:inline-block;font-family:var(--ffm);font-size:.68rem;font-weight:700;
  letter-spacing:.14em;color:var(--brand);
  background:linear-gradient(135deg,var(--brand-bg),rgba(226,106,44,.02));
  border:1px solid rgba(226,106,44,.2);
  padding:5px 11px;border-radius:var(--pill);margin-right:.9rem;vertical-align:.32em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.section--dark h2::before{
  color:var(--brand-xl);
  background:linear-gradient(135deg,rgba(226,106,44,.18),rgba(226,106,44,.04));
  border-color:rgba(226,106,44,.35);
  text-shadow:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.section__subtitle{
  font-size:.9375rem;color:var(--ink5);line-height:1.8;max-width:58ch;margin-bottom:3.4rem;
}

/* ======================== HEADER ======================== */
.header{
  position:sticky;top:0;z-index:1000;
  background:rgba(247,244,236,.78);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid rgba(216,209,194,.55);
  transition:box-shadow var(--t2) var(--ease),background var(--t2),border-color var(--t2);
}
.header::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand) 35%,var(--gold) 50%,var(--brand) 65%,transparent);
  opacity:0;transition:opacity var(--t2);
}
.header.scrolled{box-shadow:0 10px 32px rgba(30,20,10,.09);background:rgba(247,244,236,.96)}
.header.scrolled::after{opacity:.55}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:66px;max-width:1180px;margin:0 auto;padding:0 1.6rem}

.header__logo{
  display:flex;align-items:center;gap:.7rem;text-decoration:none;
  color:var(--ink);font-weight:800;font-size:1.08rem;letter-spacing:-.028em;
  position:relative;
}
.header__logo span{
  background:linear-gradient(92deg,var(--ink) 35%,var(--brand) 120%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.header__logo::after{
  content:'';position:absolute;left:44px;right:0;bottom:2px;height:1.5px;
  background:linear-gradient(90deg,var(--brand),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t2) var(--ease2);
}
.header__logo:hover::after{transform:scaleX(1)}

.header__logo-icon{
  width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(226,106,44,.18),transparent 70%);
  transition:transform var(--t2) var(--ease2);
}
.header__logo:hover .header__logo-icon{transform:rotate(-10deg) scale(1.1)}
.header__logo-icon svg{width:32px;height:32px;filter:drop-shadow(0 2px 6px rgba(226,106,44,.35))}

.nav{display:flex;align-items:center;gap:2px}
.nav__link{
  position:relative;padding:9px 15px;color:var(--ink4);text-decoration:none;font-size:.8125rem;
  font-weight:600;border-radius:var(--r);transition:color .18s var(--ease);
  letter-spacing:.01em;
}
.nav__link::before{
  content:'';position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform var(--t2) var(--ease2);
}
.nav__link:hover{color:var(--brand)}
.nav__link:hover::before{transform:scaleX(1)}
.nav__link--active{color:var(--brand)}
.nav__link--active::before{transform:scaleX(1)}

.nav__link--cta{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-d) 100%);
  color:#fff;font-weight:800;padding:10px 22px;border-radius:var(--pill);
  box-shadow:0 3px 14px rgba(226,106,44,.35),inset 0 1px 0 rgba(255,255,255,.24);
  margin-left:10px;overflow:hidden;letter-spacing:.015em;
}
.nav__link--cta::before{display:none}
.nav__link--cta::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--ease2);
}
.nav__link--cta:hover{color:#fff;box-shadow:0 7px 22px rgba(226,106,44,.46),inset 0 1px 0 rgba(255,255,255,.32);transform:translateY(-1px)}
.nav__link--cta:hover::after{transform:translateX(120%)}
.nav__link--cta.nav__link--active{background:linear-gradient(135deg,var(--brand-d),#7A330B)}

.nav-toggle{
  display:none;background:0 0;border:0;cursor:pointer;padding:0;color:var(--ink);
  width:44px;height:44px;border-radius:var(--r2);transition:background .2s,transform .2s;
  align-items:center;justify-content:center;position:relative;
}
.nav-toggle:hover{background:var(--brand-bg);color:var(--brand)}
.nav-toggle:active{transform:scale(.92)}
.nav-toggle svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;fill:none}
.nav-toggle__icon-menu,.nav-toggle__icon-close{transition:opacity .25s var(--ease2),transform .25s var(--ease2)}
.nav-toggle__icon-close{position:absolute;opacity:0;transform:rotate(-90deg) scale(.7)}
.nav-toggle.active .nav-toggle__icon-menu{opacity:0;transform:rotate(90deg) scale(.7)}
.nav-toggle.active .nav-toggle__icon-close{opacity:1;transform:rotate(0) scale(1)}

@media(max-width:900px){
  .nav-toggle{display:flex}
  .nav{
    position:absolute;top:66px;left:0;right:0;
    background:rgba(247,244,236,.98);backdrop-filter:blur(22px);
    border-bottom:1px solid var(--line);
    flex-direction:column;padding:0 1.2rem;box-shadow:var(--sh3);gap:2px;
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .42s var(--ease2),opacity .26s var(--ease),padding .42s var(--ease2);
  }
  .nav.open{max-height:500px;opacity:1;padding:.9rem 1.2rem 1.4rem}
  .nav__link{width:100%;padding:.8rem .9rem;font-size:.9375rem}
  .nav__link::before{display:none}
  .nav__link--cta{margin:12px 0 0;text-align:center;justify-content:center;display:flex}
}

/* ======================== HERO — layered trail-run scene ========================
   Stack (top→bottom):
   0: .hero background — night/dawn sky gradient + rising sun arc
   1: ::before — far mountain ridge + near ridge + topographic contour wash
   2: .hero__route-lines — curving GPS route (HTML SVG)
   3: ::after — horizon grid + sunrise haze + runner silhouette
====================================================================== */
.hero{
  position:relative;padding:8rem 0 7rem;overflow:hidden;color:#fff;
  isolation:isolate;
  background:
    /* rising sun halo */
    var(--sunArc) 82% -180px / 900px 900px no-repeat,
    /* golden horizon warmth */
    radial-gradient(1200px 520px at 80% 30%,rgba(255,186,122,.28),transparent 58%),
    /* teal valley glow from opposite side */
    radial-gradient(900px 520px at 6% 88%,rgba(14,127,101,.22),transparent 60%),
    /* pre-dawn sky vertical gradient */
    linear-gradient(178deg,#070C16 0%,#0C1422 28%,#141D2E 54%,#1A2135 74%,#221A22 88%,#2A1A18 100%);
}

/* Layer 1: Mountain ridges + topographic contour wash */
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    /* topographic contour wash (faint, upper half) */
    var(--topo) 0 -60px / 620px 620px repeat,
    /* near ridge */
    var(--ridgeNear) center bottom / 100% 360px no-repeat,
    /* far ridge — pushed up */
    var(--ridgeFar) center calc(100% - 170px) / 100% 340px no-repeat;
  background-blend-mode:screen,normal,normal;
  opacity:1;
  mask-image:linear-gradient(180deg,#000,#000);
  -webkit-mask-image:linear-gradient(180deg,#000,#000);
}

/* Layer 3: horizon grid + subtle sunrise haze + runner silhouette (right side) */
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    /* runner silhouette — lower right, above ridges */
    var(--runner) right 9% bottom 150px / 210px 310px no-repeat,
    /* glowing sunrise halo flare near sun */
    radial-gradient(420px 220px at 82% 22%,rgba(255,186,122,.35),transparent 70%),
    /* long horizon haze band */
    linear-gradient(180deg,transparent 62%,rgba(226,106,44,.18) 72%,rgba(226,106,44,.06) 82%,transparent 92%),
    /* horizon grid — faint perspective suggestion */
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0 / 72px 72px,
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0 / 72px 72px;
  filter:drop-shadow(0 0 22px rgba(226,106,44,.25));
  mask-image:linear-gradient(180deg,#000 5%,#000 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 5%,#000 100%);
}

/* elevation profile at bottom of hero */
.hero>.container::after{
  content:'';position:absolute;left:-50vw;right:-50vw;bottom:-7rem;height:70px;
  background:var(--elevDark) center/100% 100% no-repeat;
  pointer-events:none;z-index:1;
}

.hero__route-lines{
  position:absolute;top:-5%;right:-8%;width:68%;height:120%;
  pointer-events:none;z-index:1;opacity:.55;
  filter:drop-shadow(0 0 28px rgba(226,106,44,.45));
  mix-blend-mode:screen;
}
@media(max-width:960px){
  .hero::after{background-position:right -60px bottom 120px,82% 22%,0 0,0 0,0 0}
}
@media(max-width:720px){
  .hero::after{background-image:radial-gradient(420px 220px at 82% 22%,rgba(255,186,122,.32),transparent 70%),linear-gradient(180deg,transparent 62%,rgba(226,106,44,.16) 75%,transparent 92%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px)}
}
.hero__route-lines svg{width:100%;height:100%}
.hero__route-lines svg path{
  stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:drawTrail 4.4s var(--ease2) .3s forwards;
}
.hero__route-lines svg circle{animation:wayPulse 2.6s var(--ease) infinite}
.hero__route-lines svg circle:nth-of-type(2){animation-delay:.6s}
.hero__route-lines svg circle:nth-of-type(3){animation-delay:1.2s}

.hero__content{position:relative;z-index:2;max-width:680px}

/* Chronograph-style badge */
.hero__badge{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:7px 18px 7px 16px;font-family:var(--ffm);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-xl);
  background:linear-gradient(135deg,rgba(226,106,44,.2),rgba(226,106,44,.04));
  border:1px solid rgba(226,106,44,.32);border-radius:var(--pill);
  margin-bottom:2.2rem;backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 14px rgba(0,0,0,.25);
}
.hero__badge::before{
  content:'';width:8px;height:8px;border-radius:50%;background:var(--brand-l);
  box-shadow:0 0 0 3px rgba(226,106,44,.24),0 0 14px rgba(245,146,71,.85);
  animation:wayPulse 2s var(--ease) infinite;
}
.hero__badge::after{
  content:'';width:1px;height:10px;background:rgba(226,106,44,.4);margin:0 2px;
}

.hero__title{
  font-family:var(--ffd);
  font-size:var(--hero-fs);line-height:1.0;margin-bottom:1.7rem;
  color:#fff;letter-spacing:-.042em;font-weight:900;
  text-shadow:0 2px 28px rgba(0,0,0,.45);
}
.hero__title span{
  position:relative;display:inline-block;
  background:linear-gradient(100deg,var(--brand-l) 0%,var(--gold-l) 35%,var(--brand) 75%,var(--ember) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:gradShift 7s var(--ease) infinite;
}
.hero__title span::after{
  content:'';position:absolute;left:0;right:0;bottom:-8px;height:4px;border-radius:3px;
  background:linear-gradient(90deg,var(--brand),var(--gold),transparent);
  -webkit-text-fill-color:initial;
  transform-origin:left;animation:drawBar 1.2s var(--ease2) .8s both;
  box-shadow:0 0 18px rgba(226,106,44,.6);
}

.hero__desc{
  font-size:1.02rem;color:rgba(255,255,255,.68);line-height:1.85;
  margin-bottom:2.6rem;max-width:54ch;
}

.hero__actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}

/* hero outline btn override */
.hero .btn--outline{
  color:rgba(255,255,255,.94);
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24),0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(6px);
}
.hero .btn--outline:hover{
  color:#fff;background:rgba(255,255,255,.09);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),0 8px 24px rgba(0,0,0,.3);
}

/* ======================== BUTTONS ======================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:14px 30px;font-family:var(--ffd);font-size:.9375rem;font-weight:800;
  text-decoration:none;border-radius:var(--pill);border:0;cursor:pointer;
  transition:transform var(--t2) var(--ease2),box-shadow var(--t2),background var(--t2),color var(--t2);
  line-height:1.3;position:relative;overflow:hidden;letter-spacing:.015em;
  isolation:isolate;will-change:transform;
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.4) 50%,transparent 66%);
  transform:translateX(-120%);transition:transform .7s var(--ease2);
}
.btn:hover::before{transform:translateX(120%)}
.btn--primary{
  background:linear-gradient(135deg,var(--brand-l) 0%,var(--brand) 45%,var(--brand-d) 100%);
  color:#fff;
  box-shadow:0 4px 16px rgba(226,106,44,.32),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 0 rgba(0,0,0,.1);
}
.btn--primary:hover{
  color:#fff;transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(226,106,44,.46),inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(0,0,0,.12);
}
.btn--primary:active{transform:translateY(0);box-shadow:0 3px 10px rgba(226,106,44,.4),inset 0 2px 5px rgba(0,0,0,.18)}

.btn--outline{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1.8px var(--line3);
}
.btn--outline:hover{
  color:var(--brand);background:var(--brand-bg);
  box-shadow:inset 0 0 0 1.8px var(--brand),0 8px 22px rgba(226,106,44,.14);
  transform:translateY(-2px);
}
.btn--sm{padding:10px 22px;font-size:.8125rem}

/* ======================== CONTENT + IMAGE ======================== */
.content-with-image{
  display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;
  align-items:center;margin-bottom:4.2rem;
}
.content-with-image:last-child{margin-bottom:0}
.content-with-image--reverse{grid-template-columns:.95fr 1.05fr}
.content-with-image--reverse .content-with-image__img{order:-1}

.content-with-image__text{display:flex;flex-direction:column;gap:.75rem;position:relative}
.content-with-image__text::before{
  content:'';position:absolute;left:-22px;top:8px;width:4px;height:36px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand),var(--gold),transparent);
  box-shadow:0 0 12px rgba(226,106,44,.35);
}
.content-with-image__text h3{font-size:1.45rem;margin-bottom:.25rem}
.content-with-image__text p{color:var(--ink4);font-size:.9375rem;line-height:1.82}

.content-with-image__img{
  border-radius:var(--r4);overflow:hidden;aspect-ratio:4/3;position:relative;
  background:linear-gradient(135deg,var(--line2) 0%,var(--bg2) 45%,var(--line) 100%);
  border:1px solid var(--line3);
  box-shadow:0 2px 8px rgba(30,20,10,.05),0 22px 54px rgba(30,20,10,.12);
  transform:translateZ(0);transition:transform var(--t3) var(--ease2),box-shadow var(--t3);
}
.content-with-image__img::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(155deg,transparent 55%,rgba(226,106,44,.14));
}
/* GPS marker on image */
.content-with-image__img::after{
  content:'';position:absolute;top:16px;left:16px;z-index:3;
  width:12px;height:12px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 3px rgba(255,255,255,.92),0 0 18px rgba(226,106,44,.7);
  animation:wayPulse 2.4s var(--ease) infinite;
}
.content-with-image__img:hover{transform:translateY(-5px) scale(1.01);box-shadow:0 6px 16px rgba(30,20,10,.07),0 34px 80px rgba(30,20,10,.16)}
.content-with-image__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease2)}
.content-with-image__img:hover img{transform:scale(1.06)}

@media(max-width:880px){
  .content-with-image,.content-with-image--reverse{grid-template-columns:1fr;gap:2rem;margin-bottom:3.2rem}
  .content-with-image--reverse .content-with-image__img{order:0}
  .content-with-image__text::before{display:none}
}

/* ======================== CARDS ======================== */
.card{
  background:linear-gradient(180deg,var(--white) 0%,var(--bg2) 100%);
  border-radius:var(--r3);padding:2.2rem 2rem 2.1rem;
  border:1px solid var(--line2);position:relative;
  transition:transform var(--t2) var(--ease2),box-shadow var(--t2),border-color var(--t2);
  overflow:hidden;isolation:isolate;
}
.card::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:
    radial-gradient(440px 220px at 0% 0%,rgba(226,106,44,.08),transparent 60%),
    radial-gradient(300px 180px at 100% 100%,rgba(217,164,25,.06),transparent 60%);
  opacity:0;transition:opacity var(--t2);
}
.card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--gold),var(--teal));
  transform:scaleX(0);transform-origin:left;transition:transform var(--t3) var(--ease2);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh3);border-color:var(--brand-ring)}
.card:hover::before{opacity:1}
.card:hover::after{transform:scaleX(1)}

.card__icon{
  width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  margin-bottom:1.3rem;font-weight:800;color:var(--brand);font-size:1.08rem;
  background:linear-gradient(135deg,rgba(226,106,44,.16),rgba(226,106,44,.04));
  border:1px solid rgba(226,106,44,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 12px rgba(226,106,44,.12);
}
.card__title{font-size:1.18rem;margin-bottom:.55rem;color:var(--ink)}
.card__text{color:var(--ink4);font-size:.9rem;line-height:1.76}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.7rem}

/* ======================== PRICING — race-bib cards ======================== */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.8rem;padding-top:1rem}

.pricing-card{
  background:linear-gradient(180deg,var(--white) 0%,var(--bg2) 100%);
  border:1px solid var(--line2);border-radius:var(--r3);
  padding:2.8rem 1.8rem 2rem;text-align:center;position:relative;
  transition:transform var(--t2) var(--ease2),box-shadow var(--t2),border-color var(--t2);
  overflow:hidden;
}
/* top stripe — race bib header */
.pricing-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:7px;
  background:repeating-linear-gradient(90deg,var(--brand) 0 16px,var(--ink) 16px 32px);
  opacity:.9;
}
/* bottom perforated / tear edge */
.pricing-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:8px;
  background:
    radial-gradient(circle at 8px 0,transparent 3px,var(--line2) 3.5px,transparent 4px) 0 0/16px 8px;
  opacity:.6;
}
/* bib number (safety pin dots at top corners) */
.pricing-card>.pricing-card__name::before,
.pricing-card>.pricing-card__name::after{
  content:'';position:absolute;top:18px;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--faint),var(--line3));
  box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.6);
}
.pricing-card>.pricing-card__name::before{left:14px}
.pricing-card>.pricing-card__name::after{right:14px}

.pricing-card:hover{transform:translateY(-8px) rotate(-.2deg);box-shadow:var(--sh3);border-color:var(--brand-ring)}

.pricing-card--featured{
  border:2px solid var(--brand);
  background:
    radial-gradient(640px 320px at 50% 0%,rgba(226,106,44,.08),transparent 65%),
    linear-gradient(180deg,#fff 0%,var(--bg2) 100%);
  box-shadow:0 6px 18px rgba(226,106,44,.14),0 28px 64px rgba(226,106,44,.14);
  transform:translateY(-6px);padding-top:3.2rem;
}
.pricing-card--featured::before{
  height:auto;top:-14px;left:50%;right:auto;
  content:attr(data-badge);
  background:linear-gradient(135deg,var(--brand) 0%,var(--ember) 100%);color:#fff;
  font-family:var(--ffd);font-size:.7rem;font-weight:900;padding:6px 20px;
  border-radius:var(--pill);letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 6px 18px rgba(226,106,44,.42),inset 0 1px 0 rgba(255,255,255,.3);
  white-space:nowrap;transform:translateX(-50%);
}
.pricing-card--featured::after{display:none}

.pricing-card__name{
  position:relative;display:inline-block;
  font-size:.72rem;font-weight:800;color:var(--ink);margin-bottom:.55rem;
  text-transform:uppercase;letter-spacing:.16em;
  padding-top:.3rem;
}
.pricing-card__price{
  font-family:var(--ffd);
  font-size:clamp(1.8rem,2.9vw,2.25rem);font-weight:900;
  background:linear-gradient(135deg,var(--brand) 0%,var(--ember) 55%,var(--brand-d) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:.2rem;letter-spacing:-.03em;line-height:1.05;
}
.pricing-card__unit{
  font-size:.72rem;color:var(--muted);margin-bottom:1.5rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;
}
.pricing-card__features{list-style:none;padding:0;margin:0 0 1.6rem;text-align:left}
.pricing-card__features li{
  padding:.7rem 0 .7rem 1.9rem;font-size:.825rem;color:var(--ink4);
  border-bottom:1px dashed var(--line2);position:relative;line-height:1.5;
}
.pricing-card__features li:last-child{border-bottom:0}
.pricing-card__features li::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;
  background:var(--teal-bg);border:1.5px solid var(--teal);
}
.pricing-card__features li::after{
  content:'';position:absolute;left:4px;top:50%;transform:translateY(-62%) rotate(45deg);
  width:5px;height:9px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
}

.pricing-disclaimer{
  margin-top:3rem;padding:1.4rem 1.7rem 1.4rem 2rem;
  background:linear-gradient(135deg,var(--bg2),var(--white));
  border:1px solid var(--line2);border-left:4px solid var(--gold);
  border-radius:0 var(--r2) var(--r2) 0;
  font-size:.8375rem;color:var(--ink4);line-height:1.72;
  box-shadow:var(--sh1);position:relative;
}
.pricing-disclaimer::before{
  content:'';position:absolute;left:-4px;top:12px;width:4px;height:24px;
  background:var(--brand);border-radius:2px;box-shadow:0 0 12px rgba(226,106,44,.5);
}

/* ======================== STEPS — GPS waypoint trail ======================== */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2.2rem;
  counter-reset:st;position:relative;margin-top:1rem;
}
.steps::before{
  content:'';position:absolute;top:28px;left:10%;right:10%;height:3px;
  background:repeating-linear-gradient(90deg,var(--brand) 0 12px,transparent 12px 22px);
  opacity:.5;z-index:0;border-radius:2px;
}
.steps::after{
  content:'';position:absolute;top:26px;left:10%;width:0;height:7px;border-radius:4px;
  background:linear-gradient(90deg,var(--brand),var(--gold));
  box-shadow:0 0 18px rgba(226,106,44,.55);
  animation:trailFill 3.6s var(--ease2) .3s forwards;opacity:0;
}
.step{position:relative;z-index:1;text-align:center;padding-top:4.4rem}
.step::before{
  counter-increment:st;content:counter(st,decimal-leading-zero);
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--ffm);font-size:.8125rem;font-weight:800;color:var(--brand-d);
  background:radial-gradient(circle at 35% 30%,#fff,var(--bg2));
  border:2.5px solid var(--brand);
  box-shadow:0 0 0 7px rgba(255,252,244,.85),0 6px 18px rgba(226,106,44,.25),inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform var(--t2) var(--ease2),box-shadow var(--t2);
}
.step:hover::before{
  transform:translateX(-50%) translateY(-4px);
  box-shadow:0 0 0 7px rgba(255,252,244,.85),0 10px 26px rgba(226,106,44,.38),inset 0 1px 0 rgba(255,255,255,.95);
}
.step__title{font-size:1.02rem;font-weight:800;margin-bottom:.5rem;color:var(--ink);letter-spacing:-.012em}
.step__text{font-size:.8125rem;color:var(--muted);line-height:1.68;max-width:28ch;margin:0 auto}

@media(max-width:900px){
  .steps{grid-template-columns:1fr 1fr;gap:2.4rem}
  .steps::before,.steps::after{display:none}
}
@media(max-width:540px){
  .steps{grid-template-columns:1fr;gap:1.6rem}
  .step{text-align:left;padding-top:0;padding-left:4.5rem;min-height:56px}
  .step::before{left:0;top:0;transform:none;width:48px;height:48px;font-size:.8125rem}
  .step:hover::before{transform:translateY(-2px)}
  .step__text{max-width:none;margin:0}
}

/* ======================== FAQ — split-time rows ======================== */
.faq-list{max-width:780px;margin:0 auto;position:relative}
.faq-list::before{
  content:'';position:absolute;left:-1rem;top:0;bottom:0;width:2px;
  background:repeating-linear-gradient(180deg,var(--line3) 0 6px,transparent 6px 12px);
  opacity:.7;
}
.faq-item{
  border-bottom:1px solid var(--line2);position:relative;
  transition:background var(--t2);
}
.faq-item::before{
  content:'';position:absolute;left:-1rem;top:50%;transform:translate(-50%,-50%) scale(0);
  width:12px;height:12px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 14px rgba(226,106,44,.55);
  transition:transform var(--t2) var(--ease2);
}
.faq-item:first-child{border-top:1px solid var(--line2)}
.faq-item:hover::before,.faq-item.active::before{transform:translate(-50%,-50%) scale(1)}

.faq-item__question{
  width:100%;background:0 0;border:0;padding:1.45rem .3rem;
  font-family:var(--ffd);font-size:1.04rem;font-weight:700;color:var(--ink);
  text-align:left;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;transition:color var(--t1),transform var(--t2) var(--ease2);
  line-height:1.42;letter-spacing:-.012em;
}
.faq-item__question:hover{color:var(--brand);transform:translateX(6px)}
.faq-item.active .faq-item__question{color:var(--brand)}

.faq-item__icon{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  border:1.5px solid var(--line3);display:flex;align-items:center;justify-content:center;
  transition:all var(--t2) var(--ease2);background:var(--white);
}
.faq-item__icon::before{content:'+';font-size:1.05rem;font-weight:700;color:var(--ink4);line-height:1;transition:color var(--t1)}
.faq-item:hover .faq-item__icon{border-color:var(--brand);background:var(--brand-bg)}
.faq-item:hover .faq-item__icon::before{color:var(--brand)}
.faq-item.active .faq-item__icon{
  transform:rotate(45deg);border-color:var(--brand);
  background:linear-gradient(135deg,var(--brand),var(--ember));
  box-shadow:0 6px 14px rgba(226,106,44,.35);
}
.faq-item.active .faq-item__icon::before{color:#fff}

.faq-item__answer{max-height:0;overflow:hidden;transition:max-height var(--t3) var(--ease2)}
.faq-item__answer-inner{padding:0 .3rem 1.5rem;color:var(--ink4);line-height:1.84;font-size:.9375rem}

/* ======================== TOOLS — chronograph panel ======================== */
.tool-panel{
  background:linear-gradient(180deg,var(--white) 0%,var(--bg2) 100%);
  border:1px solid var(--line2);border-radius:var(--r4);
  padding:2.4rem 2rem 2.2rem;box-shadow:var(--sh2);position:relative;overflow:hidden;
}
.tool-panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--brand) 0%,var(--gold) 45%,var(--teal) 90%);
  background-size:200% 100%;animation:gradShift 7s var(--ease) infinite;
}
.tool-panel::after{
  content:'';position:absolute;top:-50px;right:-50px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(226,106,44,.08),transparent 70%);pointer-events:none;
}
.tool-panel>*{position:relative}
.tool-panel__title{
  font-size:1.18rem;font-weight:800;margin-bottom:1.3rem;color:var(--ink);letter-spacing:-.018em;
  display:flex;align-items:center;gap:.7rem;
}
.tool-panel__title::before{
  content:'';width:10px;height:10px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 3px var(--brand-bg),0 0 14px rgba(226,106,44,.55);
  animation:wayPulse 2.2s var(--ease) infinite;
}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem}

.form-group{margin-bottom:1.3rem}
.form-label{
  display:block;font-family:var(--ffm);font-size:.7rem;font-weight:700;color:var(--ink);margin-bottom:7px;
  text-transform:uppercase;letter-spacing:.12em;
}
.form-label--required::after{content:' *';color:var(--brand)}

.form-input,.form-select,.form-textarea{
  width:100%;padding:13px 15px;font-family:var(--ff);font-size:.9375rem;
  color:var(--ink);background:var(--bg2);border:1.5px solid var(--line3);
  border-radius:var(--r2);
  transition:border-color var(--t1),box-shadow var(--t1),background var(--t1);
  box-shadow:inset 0 1px 2px rgba(30,20,10,.04);
}
.form-input[type="number"]{font-family:var(--ffm);font-weight:600;font-size:1rem;letter-spacing:.01em}
.form-input:hover,.form-textarea:hover,.form-select:hover{border-color:var(--brand-ring);background:var(--white)}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:0;border-color:var(--brand);background:var(--white);
  box-shadow:0 0 0 4px var(--brand-bg),inset 0 1px 2px rgba(30,20,10,.03);
}
.form-textarea{resize:vertical;min-height:130px;font-family:var(--ff)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--faint)}
.form-hint{font-size:.75rem;color:var(--faint);margin-top:5px}
.form-error{font-size:.75rem;color:var(--err);margin-top:5px;display:none;font-weight:600}
.form-group.has-error .form-error{display:block}
.form-group.has-error .form-input,.form-group.has-error .form-textarea{border-color:var(--err);box-shadow:0 0 0 4px rgba(188,38,38,.08)}

.form-check{display:flex;align-items:flex-start;gap:.75rem;font-size:.825rem;color:var(--ink4);cursor:pointer;line-height:1.58}
.form-check input[type="checkbox"]{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--brand);cursor:pointer}

/* Tool result — like stopwatch display */
.tool-result{
  margin-top:1.5rem;padding:1.4rem 1.6rem 1.4rem 1.9rem;
  background:
    radial-gradient(220px 120px at 0% 50%,rgba(226,106,44,.12),transparent 70%),
    linear-gradient(135deg,#12212E,#0B1119);
  border:1px solid rgba(226,106,44,.28);border-radius:var(--r2);display:none;
  position:relative;overflow:hidden;color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);
}
.tool-result::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--brand),var(--gold));
  box-shadow:0 0 14px rgba(226,106,44,.6);
}
.tool-result.visible{display:block;animation:slideInUp .42s var(--ease2)}
.tool-result__label{
  font-family:var(--ffm);font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--brand-xl);margin-bottom:.35rem;font-weight:700;opacity:.8;
}
.tool-result__value{
  font-family:var(--ffm);font-size:1.8rem;font-weight:800;letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 0 18px rgba(245,146,71,.55),0 2px 0 rgba(0,0,0,.4);
  line-height:1.1;
}
.tool-result__note{font-size:.8125rem;color:rgba(255,255,255,.58);margin-top:.55rem;line-height:1.55}

.pkg-tabs{display:flex;gap:.5rem;margin-bottom:1.6rem;flex-wrap:wrap}
.pkg-tab{
  padding:9px 19px;background:var(--bg2);border:1.5px solid var(--line3);
  border-radius:var(--pill);font-family:var(--ffd);font-size:.8125rem;font-weight:700;
  color:var(--ink4);cursor:pointer;transition:all var(--t2) var(--ease2);
  letter-spacing:.01em;
}
.pkg-tab:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-bg);transform:translateY(-1px)}
.pkg-tab.active{
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  border-color:var(--brand);color:#fff;
  box-shadow:0 5px 16px rgba(226,106,44,.36),inset 0 1px 0 rgba(255,255,255,.24);
}

.pkg-detail{display:none}.pkg-detail.visible{display:block;animation:fadeInUp .4s var(--ease2)}
.pkg-detail__price{
  font-family:var(--ffd);font-size:clamp(1.7rem,2.7vw,2.1rem);font-weight:900;
  background:linear-gradient(135deg,var(--brand),var(--ember));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:.3rem;letter-spacing:-.03em;
}
.pkg-detail__desc{color:var(--ink4);line-height:1.78;font-size:.9375rem}

/* ======================== NOTICE ======================== */
.notice-block{
  padding:1.7rem 2rem;border-radius:var(--r3);position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(14,127,101,.1) 0%,rgba(14,127,101,.02) 100%);
  border:1px solid rgba(14,127,101,.18);
  box-shadow:0 2px 8px rgba(14,127,101,.06);
}
.notice-block::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--teal),var(--teal-l));
  box-shadow:0 0 16px rgba(14,127,101,.4);
}
.notice-block__title{color:var(--teal);font-size:1.06rem;font-weight:800;margin-bottom:.65rem;letter-spacing:-.012em}
.notice-block__text{color:var(--ink4);line-height:1.82;font-size:.9375rem}

/* ======================== FOOTER ======================== */
.footer{
  background:linear-gradient(180deg,var(--ink) 0%,#050911 100%);
  color:rgba(255,255,255,.62);
  padding:5.5rem 0 2.2rem;position:relative;overflow:hidden;
}
.footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent 3%,var(--brand) 25%,var(--gold) 50%,var(--brand) 75%,transparent 97%);
  box-shadow:0 0 22px rgba(226,106,44,.5);
}
.footer::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.1;
  background-image:var(--topo);background-size:560px 560px;mix-blend-mode:screen;
}
.footer>*{position:relative;z-index:1}

.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3.4rem}
.footer__brand-text{font-size:.8125rem;color:rgba(255,255,255,.4);line-height:1.7;max-width:32ch;margin-top:1.05rem}
.footer__heading{
  font-family:var(--ffm);font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:rgba(255,255,255,.48);margin-bottom:1.4rem;
  position:relative;padding-bottom:.55rem;
}
.footer__heading::after{content:'';position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--brand);border-radius:2px;box-shadow:0 0 10px rgba(226,106,44,.55)}
.footer__links{list-style:none;padding:0}
.footer__links li{margin-bottom:.7rem}
.footer__links a{
  color:rgba(255,255,255,.62);text-decoration:none;font-size:.8125rem;
  transition:color var(--t1),transform var(--t1);
  display:inline-flex;align-items:center;gap:.45rem;position:relative;
}
.footer__links a::before{
  content:'›';color:var(--brand);font-weight:800;
  opacity:0;transform:translateX(-6px);transition:all var(--t1) var(--ease2);
}
.footer__links a:hover{color:var(--brand-xl);transform:translateX(3px)}
.footer__links a:hover::before{opacity:1;transform:translateX(0)}

.footer .header__logo{color:#fff}
.footer .header__logo span{-webkit-text-fill-color:#fff;background:none}

.footer__bottom{
  padding-top:2.3rem;border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  font-size:.75rem;color:rgba(255,255,255,.32);
}
.footer__bottom a{color:rgba(255,255,255,.5);text-decoration:none;transition:color var(--t1)}
.footer__bottom a:hover{color:var(--brand-xl)}

@media(max-width:880px){.footer__grid{grid-template-columns:1fr 1fr;gap:2.3rem}}
@media(max-width:500px){.footer__grid{grid-template-columns:1fr}}

/* ======================== COOKIE BANNER ======================== */
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:9999;
  background:rgba(255,252,244,.97);backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-top:1px solid var(--line);
  box-shadow:var(--sh-up);padding:1.5rem 1.6rem;
  transform:translateY(110%);transition:transform var(--t3) var(--ease2);
}
.cookie-banner::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--brand),var(--gold),var(--brand),transparent);
  opacity:.65;
}
.cookie-banner.visible{transform:translateY(0)}
.cookie-banner__inner{max-width:1180px;margin:0 auto}
.cookie-banner__text{font-size:.8375rem;color:var(--ink4);margin-bottom:.95rem;line-height:1.65}
.cookie-banner__text a{color:var(--brand);font-weight:700}
.cookie-banner__actions{display:flex;gap:.6rem;flex-wrap:wrap}

.cookie-btn{
  padding:10px 23px;font-family:var(--ffd);font-size:.8125rem;font-weight:700;
  border-radius:var(--pill);border:1.5px solid var(--line3);cursor:pointer;
  transition:all var(--t2) var(--ease2);background:var(--white);color:var(--ink4);
  letter-spacing:.012em;
}
.cookie-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-bg);transform:translateY(-1px)}
.cookie-btn--accept{
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  border-color:var(--brand);color:#fff;
  box-shadow:0 4px 14px rgba(226,106,44,.32),inset 0 1px 0 rgba(255,255,255,.24);
}
.cookie-btn--accept:hover{
  background:linear-gradient(135deg,var(--brand-l),var(--brand));
  color:#fff;box-shadow:0 8px 22px rgba(226,106,44,.44),inset 0 1px 0 rgba(255,255,255,.32);
}
.cookie-btn--reject{background:var(--bg2);border-color:var(--line3);color:var(--ink4)}
.cookie-btn--reject:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-bg)}

.cookie-settings{display:none;margin-top:1.2rem;padding-top:1.2rem;border-top:1px dashed var(--line2)}
.cookie-settings.open{display:block;animation:fadeInUp .38s var(--ease2)}
.cookie-settings__group{display:flex;justify-content:space-between;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--line2);gap:1rem}
.cookie-settings__label{font-size:.8375rem;font-weight:700;color:var(--ink)}
.cookie-settings__desc{font-size:.75rem;color:var(--faint);margin-top:2px}
.cookie-settings__save{margin-top:1rem}

.toggle{position:relative;width:48px;height:26px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle__slider{position:absolute;cursor:pointer;inset:0;background:var(--line3);border-radius:13px;transition:background var(--t2)}
.toggle__slider::before{
  content:'';position:absolute;height:20px;width:20px;left:3px;bottom:3px;background:#fff;
  border-radius:50%;transition:transform var(--t2) var(--ease2);
  box-shadow:0 2px 6px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.55);
}
.toggle input:checked+.toggle__slider{background:linear-gradient(135deg,var(--teal),var(--teal-l))}
.toggle input:checked+.toggle__slider::before{transform:translateX(22px)}
.toggle input:disabled+.toggle__slider{opacity:.5;cursor:not-allowed}

/* ======================== CONTACT ======================== */
.contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:2.8rem;align-items:start}
.contact-info__item{
  display:flex;gap:1.1rem;margin-bottom:1.6rem;align-items:flex-start;
  padding:.6rem;border-radius:var(--r2);transition:background var(--t2),transform var(--t2) var(--ease2);
  position:relative;
}
.contact-info__item:hover{background:var(--brand-bg);transform:translateX(4px)}
.contact-info__icon{
  width:46px;height:46px;border-radius:12px;
  background:linear-gradient(135deg,rgba(226,106,44,.18),rgba(226,106,44,.04));
  border:1px solid rgba(226,106,44,.22);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--brand);font-weight:800;font-size:1rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 10px rgba(226,106,44,.12);
  transition:transform var(--t2) var(--ease2);
}
.contact-info__item:hover .contact-info__icon{transform:rotate(-8deg) scale(1.06)}
.contact-info__label{font-weight:800;color:var(--ink);display:block;margin-bottom:3px;font-size:.9rem;letter-spacing:-.008em}
.contact-info__text{font-size:.8375rem;color:var(--ink4);line-height:1.55}

@media(max-width:880px){.contact-grid{grid-template-columns:1fr;gap:2rem}}

.form-response{padding:1.1rem 1.3rem;border-radius:var(--r2);font-size:.825rem;display:none;margin-top:1rem;line-height:1.56;font-weight:600}
.form-response--success{display:block;background:var(--teal-bg);border:1px solid rgba(14,127,101,.22);color:var(--teal)}
.form-response--error{display:block;background:rgba(188,38,38,.07);border:1px solid rgba(188,38,38,.2);color:var(--err)}

.form-section{
  background:linear-gradient(180deg,var(--white) 0%,var(--bg2) 100%);
  border:1px solid var(--line2);border-radius:var(--r4);
  padding:3rem 2.3rem;max-width:660px;margin:0 auto;
  box-shadow:0 4px 14px rgba(30,20,10,.05),0 28px 66px rgba(30,20,10,.1);
  position:relative;overflow:hidden;
}
.form-section::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--brand) 0%,var(--gold) 40%,var(--teal) 80%,var(--brand) 100%);
  background-size:200% 100%;
  animation:gradShift 7s var(--ease) infinite;
}
.form-section::after{
  content:'';position:absolute;top:-50px;right:-50px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(226,106,44,.11),transparent 70%);pointer-events:none;
}
.form-section__title{font-size:1.4rem;margin-bottom:1.5rem;color:var(--ink);letter-spacing:-.022em;position:relative;padding-left:1.2rem}
.form-section__title::before{
  content:'';position:absolute;left:0;top:.3em;width:4px;height:1em;border-radius:2px;
  background:linear-gradient(180deg,var(--brand),var(--gold));
  box-shadow:0 0 12px rgba(226,106,44,.45);
}

/* ======================== LEGAL ======================== */
.legal-content{max-width:780px;margin:0 auto;padding:5rem 1.6rem 6.5rem;position:relative}
.legal-content::before{
  content:'';position:absolute;top:5rem;left:1.6rem;width:56px;height:8px;
  background:repeating-linear-gradient(90deg,var(--brand) 0 7px,transparent 7px 13px);
  border-radius:2px;
}
.legal-content h1{font-size:clamp(2.1rem,4vw,3rem);margin:1.6rem 0 .6rem;letter-spacing:-.035em;font-weight:900}
.legal-content h1::before{content:none}
.legal-content .legal-date{font-family:var(--ffm);font-size:.72rem;color:var(--muted);margin-bottom:3rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.legal-content h2{font-size:1.4rem;margin-top:3rem;margin-bottom:1rem;position:relative;padding-left:1.4rem}
.legal-content h2::before{
  content:'';counter-increment:none;position:absolute;left:0;top:.38em;width:5px;height:.8em;
  background:linear-gradient(180deg,var(--brand),var(--gold));border-radius:2px;
  padding:0;margin:0;border:0;box-shadow:0 0 12px rgba(226,106,44,.4);
  display:block;font-size:0;
}
.legal-content h3{font-size:1.12rem;margin-top:2rem;color:var(--ink2)}
.legal-content p,.legal-content ul,.legal-content ol{color:var(--ink4);line-height:1.86;font-size:.9375rem}
.legal-content li{margin-bottom:.6rem}

.sitemap-list{list-style:none;padding:0}
.sitemap-list li{
  padding:1.05rem .3rem;border-bottom:1px solid var(--line2);
  transition:padding var(--t2) var(--ease2),background var(--t2);border-radius:var(--r);
  position:relative;
}
.sitemap-list li::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%) scale(0);
  width:8px;height:8px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 12px rgba(226,106,44,.55);transition:transform var(--t2) var(--ease2);
}
.sitemap-list li:hover{padding-left:1.3rem;background:var(--brand-bg)}
.sitemap-list li:hover::before{transform:translateY(-50%) scale(1)}
.sitemap-list a{font-weight:600;display:flex;justify-content:space-between;align-items:center;font-size:.95rem;gap:1rem}
.sitemap-list a span{font-family:var(--ffm);font-size:.72rem;color:var(--muted);font-weight:500;letter-spacing:.05em}

/* ======================== 404 ======================== */
.error-page{min-height:64vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5rem 1.6rem;position:relative}
.error-page::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:var(--topo);background-size:500px 500px;
  mask-image:radial-gradient(ellipse at center,#000 20%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 70%);
}
.error-page>*{position:relative;z-index:1}
.error-page__code{
  font-family:var(--ffd);
  font-size:clamp(6rem,17vw,12rem);font-weight:900;line-height:.94;
  background:linear-gradient(135deg,var(--brand) 0%,var(--gold) 50%,var(--brand-d) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:-.055em;
  filter:drop-shadow(0 10px 34px rgba(226,106,44,.28));
}
.error-page__title{font-size:1.5rem;margin:1rem 0 .65rem;letter-spacing:-.022em}
.error-page__text{color:var(--ink4);margin-bottom:2.3rem;max-width:44ch;margin-left:auto;margin-right:auto;font-size:.95rem;line-height:1.72}

/* ======================== ANIMATIONS ======================== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes wayPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(226,106,44,.55),0 0 14px rgba(226,106,44,.55)}
  50%{box-shadow:0 0 0 9px rgba(226,106,44,0),0 0 24px rgba(226,106,44,.85)}
}
@keyframes drawTrail{to{stroke-dashoffset:0}}
@keyframes drawBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes trailFill{
  0%{width:0;opacity:0}
  10%{opacity:.9}
  100%{width:80%;opacity:.9}
}
@keyframes gradShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

.animate-in{opacity:0;transform:translateY(34px);transition:opacity var(--t4) var(--ease2),transform var(--t4) var(--ease2)}
.animate-in.visible{opacity:1;transform:translateY(0)}
.animate-delay-1{transition-delay:110ms}
.animate-delay-2{transition-delay:220ms}
.animate-delay-3{transition-delay:330ms}
.animate-delay-4{transition-delay:440ms}

/* ======================== RESPONSIVE ======================== */
@media(max-width:1024px){
  .section{padding:5.5rem 0 5rem}
  .section h2::before{font-size:.64rem;padding:4px 9px}
}
@media(max-width:880px){
  .hero{padding:6rem 0 5rem}
  .section{padding:4.5rem 0 4rem}
  .container{padding:0 1.3rem}
  .card{padding:1.8rem 1.5rem}
  .tool-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .form-section{padding:2.4rem 1.5rem}
  .section--alt>.container::before,
  .section--dark>.container::before,
  .hero>.container::after{display:none}
}
@media(max-width:480px){
  .hero__actions{flex-direction:column;width:100%}
  .hero__actions .btn{width:100%}
  .cookie-banner__actions{flex-direction:column}
  .cookie-btn{width:100%;text-align:center}
  .section h2::before{display:block;margin:0 0 .6rem}
}

/* ======================== MISC ======================== */
.img-placeholder{
  background:repeating-linear-gradient(45deg,var(--line2) 0 14px,var(--bg2) 14px 28px);
  border-radius:var(--r3);
  display:flex;align-items:center;justify-content:center;color:var(--muted);
  font-size:.8125rem;min-height:220px;border:1px dashed var(--line3);font-weight:500;
}
.ot-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;pointer-events:none}