/* Extracted 1:1 from the approved mockup design/homepage-design.html — do not edit visual values without a design change. */
/* Витягнуто 1:1 із затвердженого макета design/homepage-design.html — не змінюйте візуальні значення без зміни дизайну. */
/* Applied design change: fix.txt (color system v5 "Electric Night") — hero rendering fixes, marked with "fix.txt" comments. */
/* Застосована зміна дизайну: fix.txt (кольорова система v5 "Electric Night") — виправлення рендерингу hero, позначені коментарями "fix.txt". */

/* Self-hosted fonts (PLAN §15 "system typography, zero webfont blocking" · §16 first-party static).
   The exact woff2 files + unicode-ranges Google served for Unbounded / Space Grotesk / JetBrains Mono
   (latin + latin-ext) — pixel-identical rendering, but no render-blocking third-party request and no
   visitor IP leak to Google. unicode-range keeps latin-ext lazy (only fetched on accented names like
   "Haleakalā"), so the home page loads only the small latin files. This is a loading mechanism, not a
   visual value — the mockup's type is unchanged. */
/* Самохостовані шрифти (PLAN §15 «системна типографіка, нуль webfont-блокувань» · §16 first-party статика).
   Ті самі woff2 + unicode-range, що віддавав Google для Unbounded / Space Grotesk / JetBrains Mono
   (latin + latin-ext) — піксель-у-піксель той самий рендер, але без рендер-блокуючого стороннього
   запиту і без витоку IP відвідувача до Google. unicode-range тримає latin-ext лінивим (вантажиться
   лише на акцентах як «Haleakalā»), тож головна отримує лише малі latin-файли. Це механізм завантаження,
   не візуальне значення — типографіка макета не змінена. */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/jetbrains-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/jetbrains-mono-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/jetbrains-mono-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/space-grotesk-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/space-grotesk-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/space-grotesk-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/space-grotesk-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/space-grotesk-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/space-grotesk-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/unbounded-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/unbounded-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:900;font-display:swap;src:url(/static/fonts/unbounded-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:900;font-display:swap;src:url(/static/fonts/unbounded-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

@property --nav-angle{syntax:'<angle>';initial-value:0deg;inherits:false;}
:root{
  /* fix.txt §1: dark color system — native controls (select dropdowns, scrollbars) must follow it, not the OS light theme */
  /* fix.txt §1: темна кольорова система — нативні контроли (списки select, скролбари) мають слідувати їй, а не світлій темі ОС */
  color-scheme:dark;
  --bg0:#05030F; --bg1:#0C0620; --bg2:#1A0B3E;
  --violet:#A500FF; --magenta:#FF2E9A; --cyan:#00FFFF; --lime:#39FF88; --yellow:#FFFF00; --blue:#4D7CFE;
  --paper:#F5F1FF; --mut:#A79ED6;
  --line:rgba(167,158,214,.16);
  --glass:rgba(16,9,42,.55); --glass-hi:rgba(255,255,255,.06);
  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --pad:clamp(16px,4vw,30px); --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg0);color:var(--paper);font-family:"Space Grotesk",system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--magenta);color:#fff}
a{color:var(--cyan);text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.eyebrow b{color:var(--lime);font-weight:700}
h2{font-family:"Unbounded",sans-serif;font-weight:700;font-size:clamp(22px,3.4vw,34px);line-height:1.15;letter-spacing:-.01em;margin:10px 0 8px}
.sub{color:var(--mut);max-width:56ch}
section{padding:clamp(44px,7vw,84px) 0;position:relative}
.reveal{opacity:0;transform:translateY(24px);filter:blur(5px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1),filter .8s ease}
.reveal.in{opacity:1;transform:none;filter:blur(0)}

/* ===== ATMOSPHERE ===== */
.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cursor-glow{position:fixed;top:0;left:0;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:1;mix-blend-mode:screen;will-change:transform;
  background:radial-gradient(circle,rgba(165,0,255,.08),rgba(0,255,255,.05) 40%,transparent 70%)}
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1300;background:linear-gradient(90deg,var(--magenta),var(--violet),var(--cyan));box-shadow:0 0 14px rgba(165,0,255,.7)}

/* ===== GLASS ===== */
.glass{position:relative;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--glass-hi),transparent 40%),var(--glass);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 26px 54px -18px rgba(0,0,0,.75)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.02) 45%,rgba(165,0,255,.35));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.spot{position:relative;overflow:hidden}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.09),transparent 60%)}
.spot:hover::after{opacity:1}

/* ===== TOP NAV (centered island) ===== */
.dnav{position:fixed;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:1000;
  background:rgba(6,3,18,.72);backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);
  border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 40px rgba(0,0,0,.65);
  padding:8px 8px 8px 20px;max-width:94vw;transition:padding .5s cubic-bezier(.16,1,.3,1)}
.dnav::before{content:"";position:absolute;inset:0;border-radius:999px;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--nav-angle),rgba(255,46,154,.55),rgba(255,255,255,.03) 22%,rgba(0,255,255,.5) 50%,rgba(255,255,255,.03) 78%,rgba(165,0,255,.55));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:navrot 8s linear infinite}
@keyframes navrot{to{--nav-angle:360deg}}
.dnav-in{display:flex;align-items:center;gap:20px;position:relative}
.logo{display:flex;align-items:center;gap:9px;font-family:"Unbounded";font-weight:700;font-size:14px;color:var(--paper);white-space:nowrap}
.logo .spark{width:20px;height:20px;border-radius:7px;flex:0 0 auto;
  background:conic-gradient(from 210deg,var(--magenta),var(--violet),var(--cyan),var(--lime),var(--magenta));
  box-shadow:0 0 14px rgba(255,46,154,.8),0 0 26px rgba(0,255,255,.35)}
.logo i{font-style:normal;color:var(--cyan)}
.nav-expand{display:flex;align-items:center;gap:16px;overflow:hidden;max-width:760px;opacity:1;transition:max-width .5s cubic-bezier(.16,1,.3,1),opacity .3s}
.nlinks{display:flex;gap:2px;font-size:13.5px;font-weight:500;white-space:nowrap;position:relative}
.npill{position:absolute;top:50%;transform:translateY(-50%);height:32px;border-radius:999px;opacity:0;pointer-events:none;
  background:rgba(0,255,255,.1);border:1px solid rgba(0,255,255,.25);
  transition:left .4s cubic-bezier(.16,1,.3,1),width .4s cubic-bezier(.16,1,.3,1),opacity .3s}
.nlinks a{position:relative;z-index:1;color:var(--mut);padding:8px 13px;border-radius:999px;transition:color .2s}
.nlinks a:hover,.nlinks a.active{color:var(--cyan)}
.ncta{padding:10px 18px;border-radius:999px;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:12.5px;color:#fff;white-space:nowrap;
  background:linear-gradient(120deg,var(--magenta),var(--violet) 55%,var(--cyan) 130%);
  box-shadow:0 6px 20px -4px rgba(255,46,154,.7),0 0 18px rgba(0,255,255,.25);transition:transform .2s,box-shadow .25s}
.ncta:hover{transform:translateY(-2px);box-shadow:0 10px 28px -4px rgba(255,46,154,.9),0 0 26px rgba(0,255,255,.4)}
.dnav.scrolled .nav-expand{max-width:0;opacity:0}
.dnav.scrolled{padding:8px}
.dnav.scrolled:hover .nav-expand{max-width:760px;opacity:1}
.dnav.scrolled:hover{padding:8px 8px 8px 20px}
.burger{display:none;background:none;border:0;color:#fff;font-size:20px;cursor:pointer;padding:4px 10px}
.mmenu{position:fixed;inset:0;background:rgba(4,2,12,.97);backdrop-filter:blur(24px);z-index:1500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;opacity:0;pointer-events:none;transition:opacity .4s;overflow:hidden}
.mmenu.open{opacity:1;pointer-events:auto}
.mmenu a{font-family:"Unbounded";font-size:24px;font-weight:700;color:var(--paper);opacity:0;transform:translateY(18px);transition:opacity .5s,transform .5s cubic-bezier(.16,1,.3,1);position:relative;z-index:2}
.mmenu.open a{opacity:1;transform:none}
.mclose{position:absolute;top:calc(26px + env(safe-area-inset-top));right:26px;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;z-index:3}

/* ===== HERO ===== */
.hero{min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;
  padding:calc(96px + env(safe-area-inset-top)) 0 90px;
  background:radial-gradient(120% 70% at 50% 112%,#3A1170 0%,transparent 60%),linear-gradient(180deg,var(--bg0) 0%,#140A33 55%,#2A0F55 100%)}
.stars-js{position:absolute;inset:0;z-index:-3}
.star{position:absolute;border-radius:50%;background:#fff;animation:tw ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.18}50%{opacity:.95}}
.aurora{position:absolute;inset:0;z-index:-2;overflow:hidden}
.apx{position:absolute;inset:0;will-change:transform}
.curt{position:absolute;top:-25%;height:95%;filter:blur(60px);mix-blend-mode:screen;border-radius:50%;will-change:transform}
.k1{left:-5%;width:36%;opacity:.6;background:linear-gradient(178deg,transparent 5%,rgba(0,255,255,.8) 28%,rgba(57,255,136,.4) 52%,transparent 82%);transform:skewX(-14deg);animation:sw1 17s ease-in-out infinite}
.k2{left:27%;width:30%;opacity:.5;background:linear-gradient(182deg,transparent 8%,rgba(165,0,255,.75) 30%,rgba(255,46,154,.35) 58%,transparent 85%);transform:skewX(-9deg);animation:sw2 21s ease-in-out infinite}
.k3{right:7%;width:34%;opacity:.55;background:linear-gradient(176deg,transparent 6%,rgba(57,255,136,.7) 26%,rgba(0,255,255,.4) 50%,rgba(165,0,255,.3) 70%,transparent 88%);transform:skewX(-16deg);animation:sw3 19s ease-in-out infinite}
.k4{right:-9%;width:26%;opacity:.42;background:linear-gradient(180deg,transparent 10%,rgba(255,46,154,.6) 34%,rgba(165,0,255,.35) 60%,transparent 86%);transform:skewX(-7deg);animation:sw1 24s ease-in-out infinite reverse}
@keyframes sw1{0%,100%{transform:skewX(-14deg) translateX(0) scaleY(1)}50%{transform:skewX(-7deg) translateX(70px) scaleY(1.08)}}
@keyframes sw2{0%,100%{transform:skewX(-9deg) translateX(0) scaleY(1)}50%{transform:skewX(-15deg) translateX(-55px) scaleY(1.05)}}
@keyframes sw3{0%,100%{transform:skewX(-16deg) translateX(0) scaleY(1)}50%{transform:skewX(-9deg) translateX(60px) scaleY(1.1)}}
.meteor{position:absolute;top:8%;left:-12%;width:150px;height:2px;z-index:-2;border-radius:2px;opacity:0;transform:rotate(16deg);
  background:linear-gradient(90deg,transparent,rgba(0,255,255,.9),#fff);filter:drop-shadow(0 0 8px rgba(0,255,255,.9));
  animation:shoot 17s linear infinite;will-change:transform,opacity}
.m2{top:22%;left:-8%;width:110px;animation-delay:6s;animation-duration:19s;
  background:linear-gradient(90deg,transparent,rgba(255,46,154,.9),#fff);filter:drop-shadow(0 0 8px rgba(255,46,154,.9))}
.m3{top:3%;left:-4%;width:90px;animation-delay:11.5s;animation-duration:23s;
  background:linear-gradient(90deg,transparent,rgba(165,0,255,.9),#fff);filter:drop-shadow(0 0 8px rgba(165,0,255,.9))}
@keyframes shoot{0%{transform:translate3d(0,0,0) rotate(16deg);opacity:0}1.5%{opacity:1}7%{transform:translate3d(120vw,34vh,0) rotate(16deg);opacity:0}100%{transform:translate3d(120vw,34vh,0) rotate(16deg);opacity:0}}
.flies{position:absolute;inset:auto 0 0 0;height:56%;z-index:-1;pointer-events:none}
.flies i{position:absolute;bottom:6%;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:var(--yellow);
  box-shadow:0 0 10px var(--yellow),0 0 22px rgba(255,255,0,.55);opacity:0;
  animation:rise var(--d) linear infinite;animation-delay:var(--dl);will-change:transform,opacity}
@keyframes rise{0%{transform:translate3d(0,0,0) scale(.6);opacity:0}8%{opacity:1}45%{opacity:.9;transform:translate3d(var(--wx),-24vh,0) scale(1)}60%{opacity:.25}72%{opacity:.85}100%{transform:translate3d(calc(var(--wx)*1.6),-46vh,0) scale(.7);opacity:0}}
.flies i:nth-child(1){--x:6%;--s:5px;--d:11s;--dl:0s;--wx:18px}
.flies i:nth-child(2){--x:14%;--s:4px;--d:14s;--dl:2.2s;--wx:-14px}
.flies i:nth-child(3){--x:23%;--s:6px;--d:12s;--dl:4.1s;--wx:22px}
.flies i:nth-child(4){--x:31%;--s:4px;--d:16s;--dl:1.3s;--wx:-20px}
.flies i:nth-child(5){--x:40%;--s:5px;--d:13s;--dl:5.6s;--wx:14px}
.flies i:nth-child(6){--x:49%;--s:4px;--d:15s;--dl:.8s;--wx:-16px}
.flies i:nth-child(7){--x:57%;--s:6px;--d:12.5s;--dl:3.4s;--wx:24px}
.flies i:nth-child(8){--x:66%;--s:4px;--d:14.5s;--dl:6.4s;--wx:-12px}
.flies i:nth-child(9){--x:74%;--s:5px;--d:11.5s;--dl:2.9s;--wx:16px}
.flies i:nth-child(10){--x:82%;--s:4px;--d:15.5s;--dl:4.8s;--wx:-22px}
.flies i:nth-child(11){--x:90%;--s:5px;--d:13.5s;--dl:1.9s;--wx:12px}
.flies i:nth-child(12){--x:96%;--s:4px;--d:16.5s;--dl:6.9s;--wx:-10px}
.pines{position:absolute;left:0;right:0;bottom:0;z-index:0;width:100%;height:auto;pointer-events:none;will-change:transform}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.h-eyebrow{animation:hin .9s cubic-bezier(.16,1,.3,1) .1s both}
.hero h1{font-family:"Unbounded";font-weight:900;font-size:clamp(38px,7.4vw,80px);line-height:1.02;letter-spacing:-.02em;margin:14px 0 12px;animation:hin 1s cubic-bezier(.16,1,.3,1) .25s both}
/* fix.txt §3: H1 "doesn't wait." — 92° gradient #FF2E9A 0% → #A500FF 40% → #00FFFF 90% + magenta drop-shadow; text-fill pinned so the clip never paints plain */
/* fix.txt §3: H1 "doesn't wait." — градієнт 92° #FF2E9A 0% → #A500FF 40% → #00FFFF 90% + magenta drop-shadow; text-fill зафіксовано, щоб кліп не малювався простим кольором */
.hero h1 .glow{background:linear-gradient(92deg,var(--magenta) 0%,var(--violet) 40%,var(--cyan) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 24px rgba(255,46,154,.45))}
.lead{color:var(--mut);font-size:clamp(15px,2.2vw,18px);max-width:52ch;margin-bottom:24px;animation:hin .9s cubic-bezier(.16,1,.3,1) .4s both}
@keyframes hin{from{opacity:0;transform:translateY(24px);filter:blur(9px)}to{opacity:1;transform:none;filter:blur(0)}}

/* trip builder */
.builder{padding:16px;max-width:620px;animation:hin 1s cubic-bezier(.16,1,.3,1) .55s both}
.b-row{display:grid;grid-template-columns:1.2fr 1fr;gap:10px}
.field{position:relative}
.field label{position:absolute;top:7px;left:13px;font-family:"JetBrains Mono";font-size:9px;letter-spacing:.18em;color:var(--mut);text-transform:uppercase}
.field select{appearance:none;width:100%;padding:22px 34px 9px 13px;font:inherit;font-weight:500;color:var(--paper);
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer}
/* fix.txt §1+§3: dropdown options — main text --paper on intermediate indigo --bg1 (long text is never neon) */
/* fix.txt §1+§3: опції списку — основний текст --paper на проміжному індиго --bg1 (довгий текст ніколи не неоновий) */
.field select option{background-color:var(--bg1);color:var(--paper)}
.field::after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--cyan);pointer-events:none;font-size:12px}
.seg{display:flex;gap:6px;margin-top:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:5px}
.seg button{flex:1;border:0;background:transparent;color:var(--mut);font:inherit;font-size:13px;font-weight:500;padding:9px 2px;border-radius:999px;cursor:pointer;transition:color .2s,background .25s,box-shadow .25s}
.seg button[aria-pressed="true"]{color:#10041F;background:linear-gradient(120deg,var(--cyan),var(--magenta));box-shadow:0 0 18px rgba(255,46,154,.5)}
.hint{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:11px 13px;border-radius:var(--r-sm);font-size:13px;
  background:linear-gradient(90deg,rgba(255,46,154,.14),rgba(0,255,255,.08));border:1px solid rgba(255,46,154,.35)}
.hint .fx{flex:0 0 auto;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--yellow);box-shadow:0 0 10px var(--yellow);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.cta-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.btn{border:0;cursor:pointer;font:inherit;font-weight:700;border-radius:999px;padding:15px 22px;transition:transform .18s,box-shadow .25s;will-change:transform;position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn-p{flex:1;min-width:190px;color:#fff;background:linear-gradient(120deg,var(--magenta) 0%,var(--violet) 50%,var(--cyan) 130%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 12px 34px -8px rgba(255,46,154,.75),0 4px 22px -6px rgba(0,255,255,.5)}
.btn-p::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:left .6s ease}
.btn-p:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 18px 44px -8px rgba(255,46,154,.95),0 8px 30px -6px rgba(0,255,255,.7)}
.btn-p:hover::after{left:120%}
.btn-g{background:transparent;color:var(--paper);border:1px solid var(--line)}
.btn-g:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 18px rgba(0,255,255,.25)}

/* hero live widget stack */
.hw-stack{display:flex;flex-direction:column;gap:16px;max-width:296px;margin-left:auto}
.hwp{will-change:transform}
.hw-fl{animation:fl 6s ease-in-out infinite}
.hwp:nth-child(2) .hw-fl{animation-delay:1.4s;animation-duration:7s}
.hwp:nth-child(3) .hw-fl{animation-delay:2.6s;animation-duration:6.4s}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.hw{padding:17px;cursor:default;transition:box-shadow .35s;will-change:transform;animation:hin 1s cubic-bezier(.16,1,.3,1) both}
.hwp:nth-child(1) .hw{animation-delay:.75s}
.hwp:nth-child(2) .hw{animation-delay:.9s}
.hwp:nth-child(3) .hw{animation-delay:1.05s}
.hw:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 60px -14px rgba(0,0,0,.8),0 0 40px -8px rgba(165,0,255,.35)}
.hw-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;font-family:"JetBrains Mono";font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.live{display:flex;align-items:center;gap:6px;color:var(--lime);font-weight:700}
.dotp{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:pulse 2.2s infinite}
.hw h3{font-size:14.5px;font-weight:700;line-height:1.35;margin-bottom:4px}
.hw p{font-size:12.5px;color:var(--mut)}
.timer{font-family:"JetBrains Mono";font-weight:700;font-size:20px;letter-spacing:.04em;color:var(--cyan);text-shadow:0 0 16px rgba(0,255,255,.6);margin-top:8px;font-variant-numeric:tabular-nums}
.timer.hot{color:var(--yellow);text-shadow:0 0 14px rgba(255,255,0,.55)}
.hw-row{display:flex;align-items:center;gap:12px}
.ring{position:relative;width:52px;height:52px;flex:0 0 auto}
.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:5}
.ring .bg{stroke:rgba(255,255,255,.09)}
.ring .fg{stroke:url(#gradRing);stroke-linecap:round;stroke-dasharray:138;stroke-dashoffset:138;filter:drop-shadow(0 0 6px rgba(0,255,255,.7));transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:"JetBrains Mono";font-size:11px;color:var(--cyan)}
.mini-tag{display:inline-block;margin-top:9px;padding:5px 11px;border-radius:999px;font-size:11px;font-weight:700;background:rgba(57,255,136,.1);color:var(--lime);border:1px solid rgba(57,255,136,.3)}

/* ===== TICKER ===== */
.ticker{position:relative;z-index:5;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);backdrop-filter:blur(10px);overflow:hidden;padding:12px 0}
/* Motion is JS-driven now (main.js): auto-drift left, drag left/right to nudge, 4s pause then resume. */
/* Рух тепер керує JS (main.js): авто-дрейф вліво, перетяг вліво/вправо, пауза 4с і далі як ішов. */
.tk{display:flex;gap:52px;width:max-content;will-change:transform;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.tk.grabbing{cursor:grabbing}
.tk span,.tk a{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:rgba(245,241,255,.82);white-space:nowrap}
/* Ticker items are now links to the park hub (user request): kill the default underline/blue and
   brighten on hover so the click affordance reads. / Елементи тикера тепер лінки на хаб парку:
   прибираємо стандартне підкреслення/синь і підсвічуємо на hover, щоб клікабельність читалась. */
.tk a{text-decoration:none;transition:color .18s ease}
.tk a:hover{color:#fff}
.tk .tt{font-family:"JetBrains Mono";font-size:9.5px;font-weight:700;letter-spacing:.12em;padding:3px 9px;border-radius:999px;background:rgba(0,255,255,.1);color:var(--cyan)}
.tk .tt.w{background:rgba(255,46,154,.14);color:var(--magenta)}

/* ===== DEADLINE RADAR ===== */
.radar{background:radial-gradient(70% 50% at 50% 0%,rgba(165,0,255,.15),transparent 70%);border-bottom:1px solid var(--line)}
.dl-grid{display:grid;gap:12px;margin-top:22px}
.dl{position:relative;padding:18px;border-radius:var(--r-md);overflow:hidden;background:var(--glass);border:1px solid var(--line)}
.dl::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,var(--magenta),var(--cyan))}
.dl-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.dl h3{font-size:16px;font-weight:700}
.dl .meta{font-size:12.5px;color:var(--mut);margin-top:3px}
.wake{margin-top:22px;padding:20px;border-radius:var(--r-lg);position:relative;overflow:hidden;
  border:1px solid rgba(0,255,255,.35);background:linear-gradient(140deg,rgba(0,255,255,.08),rgba(255,46,154,.09));
  box-shadow:0 0 44px -12px rgba(0,255,255,.4)}
.wake h3{font-family:"Unbounded";font-weight:700;font-size:17px;margin-bottom:4px}
.wake>p{font-size:13.5px;color:var(--mut);margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.pchip{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:12.5px;font-weight:500;color:var(--paper);cursor:pointer;transition:all .22s}
.pchip:active{transform:scale(.94)}
.pchip.on{background:rgba(0,255,255,.12);border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 14px rgba(0,255,255,.3)}
.wake form{display:flex;gap:8px;flex-wrap:wrap}
.wake input{flex:1;min-width:180px;padding:14px 16px;font:inherit;color:var(--paper);background:rgba(5,3,15,.6);border:1px solid var(--line);border-radius:999px}
.wake input::placeholder{color:var(--mut)}
.wake input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,255,255,.14)}
.wake .note{font-family:"JetBrains Mono";font-size:10px;color:var(--mut);margin-top:9px}
.wake-done{display:none;text-align:center;padding:8px 0 2px;position:relative}
.wake.done form,.wake.done .chips,.wake.done>p,.wake.done .note{display:none}
.wake.done .wake-done{display:block}
.chk{width:70px;height:70px;margin:0 auto 12px}
.chk circle{stroke:var(--cyan);stroke-width:3;fill:none;stroke-dasharray:195;stroke-dashoffset:195;animation:draw .7s ease-out forwards}
.chk path{stroke:var(--lime);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:46;stroke-dashoffset:46;animation:draw .45s ease-out .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.wake-done h4{font-family:"Unbounded";font-size:16px;margin-bottom:5px}
.wake-done p{font-size:13px;color:var(--mut)}
.burst{position:absolute;bottom:8px;left:var(--x);width:5px;height:5px;border-radius:50%;background:var(--yellow);
  box-shadow:0 0 10px var(--yellow);animation:rise 3.4s ease-out forwards}

/* ===== SCROLLERS ===== */
.scroller{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--pad) 16px;margin:0 calc(var(--pad)*-1);scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.scroller>*{scroll-snap-align:start;flex:0 0 auto}
/* Quick paths wrap on a desktop instead of scrolling (seen in the browser 2026-07-28: the seventh
   chip was sliced by the wrap's right edge). A collection scroller cut mid-card reads as "there is
   more, swipe" — the correct hint for a gallery. A navigation row cut mid-word reads as a bug, and
   these seven chips are navigation: they must all be visible at once where there is room. Below the
   breakpoint they stay a swipeable row, which is the right control on a phone. */
/* Швидкі входи на десктопі переносяться, а не скролять (побачено в браузері 28.07.2026: сьомий чіп
   різало правим краєм wrap). Скролер добірок, обрізаний посеред картки, читається як «є ще, гортай»
   — правильна підказка для галереї. Ряд навігації, обрізаний посеред слова, читається як баг, а ці
   сім чіпів — навігація: там, де є місце, вони мають бути видні одразу. Нижче брейкпойнта лишається
   свайповий ряд — правильний контрол на телефоні. */
@media(min-width:900px){
  .scroller.qp{flex-wrap:wrap;justify-content:center;overflow:visible;scroll-snap-type:none;row-gap:10px}
}
/* The collections row gets the same treatment the chips got, and for a reason that turned out to be
   arithmetic rather than taste (user report 2026-07-28: "обрізано справа, наче пів блока"). Five
   cards at a fixed 250px plus gaps need 1290px; .wrap is capped at 1180px and spends ~60px on its
   own padding, so the fifth card was clipped at EVERY desktop width — there was no window where the
   row was whole. A card sliced by the edge invites a swipe; a row that can never be complete just
   looks broken.
   So above the breakpoint it stops being a carousel: an auto-fit grid puts all five on one line on
   a wide screen and folds them onto two lines on a narrow one, with the cards sharing the width
   instead of holding a hardcoded one. Below it, a phone keeps the swipe row — the right control
   there — with the hint above it and a soft fade at the edge saying the row continues. */
/* Ряд добірок отримує те саме, що й чіпи, і причина виявилась арифметичною, а не смаковою (скарга
   користувача 28.07.2026: «обрізано справа, наче пів блока»). П'ять карток по фіксованих 250px плюс
   проміжки потребують 1290px; .wrap обмежений 1180px і віддає ~60px власним відступам — тож п'ята
   картка різалась на БУДЬ-ЯКІЙ ширині десктопа: вікна, де ряд цілий, не існувало. Картка, обрізана
   краєм, запрошує свайпнути; ряд, який ніколи не може бути цілим, просто виглядає поламаним.
   Тому вище брейкпойнта він перестає бути каруселлю: auto-fit сітка кладе всі п'ять в один рядок на
   широкому екрані й переносить на два на вужчому, а картки ділять ширину замість захардкодженої.
   Нижче — телефон лишає свайповий ряд (там це правильний контрол) із підказкою над ним і м'яким
   згасанням на краю, яке каже, що ряд триває. */
.sc-hint{margin-top:10px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut)}
@media(min-width:760px){
  .sc-hint{display:none}
  .scroller.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
    overflow:visible;scroll-snap-type:none;margin:0;padding:6px 0 0}
  .scroller.cols>.col{width:auto}
}
@media(max-width:759px){
  /* The fade is the only affordance a hidden scrollbar leaves room for; it stops at 88% so the
     card under it stays readable rather than dissolving. */
  /* Згасання — єдина підказка, на яку лишає місце схований скролбар; воно починається на 88%, щоб
     картка під ним лишалась читомою, а не розчинялась. */
  .scroller.cols{-webkit-mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.35));
    mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.35))}
}
.chip{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--line);color:var(--paper);font-weight:500;font-size:14px;backdrop-filter:blur(8px);transition:border-color .2s,box-shadow .2s}
.chip:hover{border-color:var(--violet);box-shadow:0 0 18px rgba(165,0,255,.4)}
.chip .ic{font-size:16px;filter:drop-shadow(0 0 6px rgba(0,255,255,.6))}
.chip.hot{border-color:rgba(255,255,0,.5)}
.chip.hot .ic{filter:drop-shadow(0 0 8px var(--yellow))}

/* ===== STAY ===== */
.stay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px;perspective:1200px}
.sc{padding:0;overflow:hidden;cursor:pointer;transition:transform .12s ease-out,box-shadow .4s;will-change:transform;transform-style:preserve-3d}
.sc:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 34px 64px -16px rgba(0,0,0,.8),0 0 34px -8px rgba(255,46,154,.3)}
.sc-img{height:140px;position:relative;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 16px 12px}
.sc-ic{font-size:42px;opacity:.9;filter:drop-shadow(0 0 14px rgba(0,255,255,.55))}
.sc-body{padding:17px;display:block}
.sc-name{font-weight:700;font-size:15.5px;margin-bottom:4px;display:block}
.sc-meta{font-size:12px;color:var(--mut);margin-bottom:13px;display:block;line-height:1.5}
.price{font-family:"JetBrains Mono";font-weight:700;font-size:17px;color:var(--yellow);text-shadow:0 0 14px rgba(255,255,0,.45)}
.price small{font-size:10px;color:var(--mut);text-shadow:none}
/* The whole stay card is the submit button (task STAY-1). It used to be a div with a small "Check
   rates" button in the corner, which on a phone is a 100-pixel target inside a 300-pixel card that
   already looks tappable — and the card carried invented prices to justify the layout. With the
   fabrications gone the card has one job, so it IS the control: full-card tap target, one focus
   ring, and `formaction` decides which partner the GET form opens. The reset is deliberate — a
   <button> inherits centred text, its own font and a UA border, none of which belong here. */
/* Уся картка житла — це submit-кнопка (завдання STAY-1). Раніше це був div із маленькою кнопкою
   «Check rates» у кутку, а на телефоні це 100-піксельна ціль усередині 300-піксельної картки, яка
   й так виглядає натискною, — і картка несла вигадані ціни, щоб виправдати таку розкладку. Коли
   вигадане прибрали, у картки лишилась одна робота, тож вона Й Є контролом: тап по всій картці,
   одне кільце фокуса, а `formaction` вирішує, якого партнера відкриє GET-форма. Скидання стилів
   свідоме — <button> успадковує центрований текст, власний шрифт і UA-рамку, а тут вони зайві. */
button.sc{display:block;width:100%;text-align:left;font:inherit;color:var(--paper);appearance:none}
button.sc:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.sc-go{display:inline-block;padding:10px 15px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid var(--line);
  color:#fff;font-weight:700;font-size:12px;transition:background .25s,border-color .25s,box-shadow .25s}
.sc:hover .sc-go{background:linear-gradient(120deg,var(--magenta),var(--violet));border-color:transparent;box-shadow:0 6px 18px -4px rgba(255,46,154,.7)}
/* The park picker sits above the three cards and belongs to the same form; .field gives it the
   custom dropdown every other select on this page uses. Capped so it reads as one control, not a
   full-width bar with a lonely park name in it. */
/* Пікер парку стоїть над трьома картками й належить тій самій формі; .field дає йому той самий
   кастомний дропдаун, що й решта селектів сторінки. Ширина обмежена, щоб це читалось як один
   контрол, а не смуга на всю ширину з самотньою назвою парку всередині. */
.stay-pick{margin-top:20px}
.stay-pick .field{max-width:340px}
.fine-note{margin-top:18px;font-family:"JetBrains Mono";font-size:10px;color:var(--mut);text-align:center}

/* ===== RV ===== */
.rv-b{position:relative;overflow:hidden;padding:44px 40px 82px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.rv-glow{position:absolute;width:440px;height:440px;left:-130px;top:-150px;border-radius:50%;background:radial-gradient(circle,rgba(0,255,255,.16),transparent 70%);filter:blur(60px)}
.rv-t{position:relative;z-index:2;max-width:540px}
.rv-t h2{margin-top:0}
.rv-t p{color:var(--mut);font-size:14.5px;margin-bottom:16px;line-height:1.6}
.rv-chips{display:flex;gap:9px;flex-wrap:wrap}
.rvc{padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:12px;font-weight:600}
.rv-cta-box{position:relative;z-index:2;text-align:center}
.rv-src{margin-top:9px;font-family:"JetBrains Mono";font-size:10px;color:var(--mut)}
.rv-road{position:absolute;bottom:36px;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,rgba(0,255,255,.3) 0 26px,transparent 26px 52px);animation:road 1.1s linear infinite}
@keyframes road{to{transform:translateX(-52px)}}
.rv-camper{position:absolute;bottom:42px;left:0;font-size:34px;z-index:2;animation:drive 16s linear infinite;filter:drop-shadow(0 0 14px rgba(0,255,255,.5)) drop-shadow(0 8px 14px rgba(0,0,0,.5));pointer-events:none}
.rv-camper span{display:inline-block;animation:bnc .5s ease-in-out infinite alternate}
@keyframes drive{from{transform:translateX(-90px)}to{transform:translateX(1400px)}}
@keyframes bnc{from{transform:translateY(0) scaleX(-1)}to{transform:translateY(-3px) scaleX(-1)}}

/* ===== PILLARS ===== */
.pillars{display:grid;gap:14px;margin-top:22px}
.pillar{position:relative;overflow:hidden;padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--glass)}
.pillar .halo{position:absolute;width:60%;aspect-ratio:1;border-radius:50%;filter:blur(50px);opacity:.5;right:-15%;top:-30%;z-index:0}
.p-dog .halo{background:var(--cyan)}.p-kid .halo{background:var(--magenta)}
.pillar>*{position:relative;z-index:1}
.pillar h3{font-family:"Unbounded";font-weight:700;font-size:19px;margin:6px 0}
.pillar p{font-size:14px;color:var(--mut);margin-bottom:14px}
.meter{display:flex;gap:5px;align-items:center;font-family:"JetBrains Mono";font-size:11px}
.meter span{width:30px;height:9px;border-radius:4px;background:rgba(255,255,255,.09)}
.meter .on{background:linear-gradient(90deg,var(--cyan),var(--lime));box-shadow:0 0 10px rgba(57,255,136,.6)}
.mini-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#10041F;background:linear-gradient(120deg,var(--yellow),#ffd34d);padding:7px 12px;border-radius:999px;box-shadow:0 0 18px rgba(255,255,0,.4)}
/* Vertical padding is the tap target, not decoration: measured at 410px on 2026-07-28 this link was
   25px tall, well under Apple's 44px minimum — and it is one of only two links on a trail page that
   earn anything. The padding is invisible (no background) and costs the layout ~4px, because the
   margin above absorbs most of it. */
/* Вертикальний padding тут — це зона тапу, а не оздоба: заміряно на 410px 28.07.2026, лінк мав
   висоту 25px, помітно менше за мінімум Apple у 44px — а це один із двох лінків на сторінці трейла,
   які взагалі заробляють. Padding невидимий (фону немає) і коштує розкладці ~4px, бо верхній
   відступ поглинає більшу частину. */
.p-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:10px 0;font-weight:700;transition:gap .2s}
.p-link:hover{gap:10px}

/* ===== FUEL ===== */
.fuel{display:grid;gap:16px;padding:22px;border-radius:var(--r-lg);border:1px solid rgba(255,255,0,.28);
  background:linear-gradient(120deg,rgba(255,255,0,.06),rgba(165,0,255,.09))}
.fuel h3{font-family:"Unbounded";font-size:19px;font-weight:700}
.stat-row{display:flex;gap:18px;flex-wrap:wrap}
.stat b{display:block;font-family:"JetBrains Mono";font-size:22px;color:var(--yellow);text-shadow:0 0 16px rgba(255,255,0,.5)}
.stat i{font-style:normal;font-size:11.5px;color:var(--mut)}

/* ===== TOOLS ===== */
.tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px;perspective:1100px}
.tool{padding:18px;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--line);transition:transform .12s ease-out,border-color .2s,box-shadow .25s;will-change:transform;color:var(--paper)}
.tool:hover{border-color:var(--cyan);box-shadow:0 14px 34px -14px rgba(0,255,255,.55)}
.tool .t-ic{font-size:20px;filter:drop-shadow(0 0 8px rgba(165,0,255,.7))}
.tool h3{font-size:14.5px;font-weight:700;margin:9px 0 3px}
.tool p{font-size:12px;color:var(--mut)}

/* ===== KITS ===== */
.kit{display:grid;gap:18px;padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;position:relative;background:var(--glass)}
.kit::after{content:"";position:absolute;inset:auto -20% -60% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,46,154,.35),transparent 70%);filter:blur(30px)}
.kit-cover{width:118px;height:158px;border-radius:12px;flex:0 0 auto;position:relative;z-index:1;
  background:linear-gradient(160deg,#2A0F55,#0A0620 60%);border:1px solid rgba(0,255,255,.4);
  box-shadow:0 18px 40px -14px rgba(0,255,255,.5);display:flex;flex-direction:column;justify-content:space-between;padding:12px;
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.kit:hover .kit-cover{transform:rotate(-4deg) translateY(-6px)}
.kit-cover b{font-family:"Unbounded";font-size:12px;line-height:1.25}
.kit-cover i{font-style:normal;font-family:"JetBrains Mono";font-size:9px;color:var(--cyan)}

/* ===== COLLECTIONS ===== */
.col{width:250px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--glass);transition:transform .2s,box-shadow .25s;color:var(--paper)}
.col:hover{transform:translateY(-4px);box-shadow:0 18px 40px -16px rgba(165,0,255,.65)}
.col-art{height:104px;position:relative;overflow:hidden}
.g1{background:linear-gradient(150deg,#A500FF33,#FF2E9A22),linear-gradient(180deg,#1A0B3E,#0A0620)}
.g2{background:linear-gradient(150deg,#39FF8833,#00FFFF22),linear-gradient(180deg,#0B2440,#0A0620)}
.g3{background:linear-gradient(150deg,#FFFF0026,#A500FF26),linear-gradient(180deg,#2A0F55,#0A0620)}
.g4{background:linear-gradient(150deg,#00FFFF2b,#FF2E9A22),linear-gradient(180deg,#101038,#05030F)}
/* The figure is the art (approved 2026-07-28). The eyebrow over this row promises receipts, so the
   card shows its count before the click instead of decorating the space with an emoji: "3/12 PARKS
   RATED A" is the reason to tap, and every one of these numbers comes from services/shortcuts.py,
   counted on the destination's own tables. The emoji stays, smaller, as the category marker it
   always was. Long units wrap to two lines rather than truncate — a clipped claim reads as a
   different claim. */
/* Цифра і є «мистецтвом» (затверджено 28.07.2026). Eyebrow над рядком обіцяє чеки, тож картка
   показує свій лічильник ДО кліку, а не прикрашає порожнечу емодзі: «3/12 PARKS RATED A» і є
   причиною натиснути, і кожне з цих чисел приходить із services/shortcuts.py, порахованим на
   таблицях самого призначення. Емодзі лишається, менше, як маркер категорії, яким і був. Довгі
   підписи переносяться на два рядки, а не обрізаються — обрізана обіцянка читається як інша. */
.col-art{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 60px 0 14px}
.col-fig{font-family:"Unbounded",sans-serif;font-weight:900;font-size:clamp(24px,7vw,30px);line-height:1;
  letter-spacing:-.02em;color:var(--paper);text-shadow:0 0 20px rgba(0,255,255,.35)}
.col-unit{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut);line-height:1.35}
.col-art .big{position:absolute;right:10px;bottom:6px;font-size:30px;opacity:.75;filter:drop-shadow(0 0 12px rgba(0,255,255,.55))}
.col h3{font-size:14.5px;font-weight:700;padding:13px 14px 4px;line-height:1.3}
.col p{font-size:12px;color:var(--mut);padding:0 14px 14px}
/* Motion belongs to the card, not to eleven separate rules: the whole tile lifts on hover, the
   figure brightens with it. Reduced-motion users get the colour change and no transform. */
/* Рух належить картці, а не одинадцяти окремим правилам: уся плитка підіймається на hover, цифра
   світлішає разом із нею. Для reduced-motion лишається зміна кольору без трансформації. */
.col:hover .col-fig{text-shadow:0 0 26px rgba(0,255,255,.6)}
@media(prefers-reduced-motion:reduce){.col{transition:box-shadow .25s}.col:hover{transform:none}}

/* ===== TRUST / FOOTER ===== */
.trust{border-top:1px solid var(--line);text-align:center}
.trust .row{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;font-family:"JetBrains Mono";font-size:11px;color:var(--mut);margin-top:14px}
.socials{display:flex;justify-content:center;gap:12px;margin-top:20px}
.socials a{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);color:var(--mut);font-size:15px;transition:all .2s}
.socials a:hover{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 16px rgba(0,255,255,.4)}
footer{padding:26px 0 calc(100px + env(safe-area-inset-bottom));text-align:center;color:var(--mut);font-size:12px}
footer .fine{max-width:62ch;margin:8px auto 0;opacity:.8}

/* ===== BOTTOM APP NAV ===== */
.bnav{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:1100;display:flex;align-items:center;justify-content:space-around;
  padding:8px 6px;border-radius:26px;border:1px solid var(--line);background:rgba(9,5,26,.8);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 18px 40px -10px rgba(0,0,0,.85)}
.bnav a,.bnav button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--mut);min-width:52px;padding:5px 2px;border-radius:14px;background:none;border:0;cursor:pointer;font-family:inherit;transition:color .25s}
.bnav .i{font-size:18px}
.bnav .on{color:var(--cyan)}
.bnav .on .i{filter:drop-shadow(0 0 8px rgba(0,255,255,.8))}
.bnav a:active,.bnav button:active{transform:scale(.93)}
/* Mockup fix (user request 2026-07-12): ".fab" (0-1-0) lost to ".bnav a,.bnav button" (0-1-1),
   flattening the FAB into a dark square — ".bnav .fab" (0-2-0) restores the round gradient button. */
/* Виправлення макета (запит користувача 2026-07-12): ".fab" (0-1-0) програвав ".bnav a,.bnav button" (0-1-1),
   і FAB ставав темним квадратом — ".bnav .fab" (0-2-0) повертає круглу градієнтну кнопку. */
.bnav .fab{margin-top:-26px;width:58px;height:58px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:24px;color:#fff;
  background:conic-gradient(from 200deg,var(--magenta),var(--violet),var(--cyan),var(--lime),var(--magenta));
  box-shadow:0 0 0 5px rgba(9,5,26,.9),0 10px 30px -6px rgba(255,46,154,.85),0 0 26px rgba(0,255,255,.5);
  animation:fabp 3s ease-in-out infinite}
@keyframes fabp{0%,100%{box-shadow:0 0 0 5px rgba(9,5,26,.9),0 10px 30px -6px rgba(255,46,154,.85),0 0 22px rgba(0,255,255,.45)}50%{box-shadow:0 0 0 5px rgba(9,5,26,.9),0 14px 38px -6px rgba(255,46,154,1),0 0 36px rgba(0,255,255,.75)}}

/* ===== RESPONSIVE ===== */
@media(min-width:901px){.bnav{display:none}footer{padding-bottom:44px}}
@media(max-width:1050px){.hero-grid{grid-template-columns:1fr}.hw-stack{flex-direction:row;max-width:none;margin:34px 0 0;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none}.hw-stack::-webkit-scrollbar{display:none}.hwp{flex:0 0 76%;max-width:280px;scroll-snap-align:start}}
@media(min-width:901px){
  .dl-grid{grid-template-columns:repeat(3,1fr)}
  .pillars{grid-template-columns:1fr 1fr}
  .tools{grid-template-columns:repeat(4,1fr)}
  .fuel{grid-template-columns:1.2fr 1fr;align-items:center}
  .kit{grid-template-columns:auto 1fr;align-items:center}
}
@media(max-width:900px){
  .nav-expand{display:none}.burger{display:block}
  .stay-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:22px calc(var(--pad)*-1) 0;padding:4px var(--pad) 14px;scrollbar-width:none}
  .stay-grid::-webkit-scrollbar{display:none}
  .sc{flex:0 0 78%;max-width:300px;scroll-snap-align:center}
  .rv-b{padding:36px 24px 80px}
}
@media(max-width:640px){.cursor-glow{display:none}}
/* Perf: pause the hero atmosphere (stars + aurora ribbons) when it scrolls off-screen or the tab is
   hidden (main.js toggles .atmo-paused). Purely off-screen work — nothing visible changes, but the
   compositor stops repainting 85 stars + 4 ribbons, which helps INP and battery, especially on mobile. */
/* Перф: пауза атмосфери hero (зірки + стрічки аврори), коли вона поза екраном або вкладку приховано
   (main.js перемикає .atmo-paused). Робота суто поза екраном — на екрані нічого не змінюється, але
   компонувальник перестає перемальовувати 85 зірок + 4 стрічки, що допомагає INP і батареї, надто на мобільному. */
body.atmo-paused .star,
body.atmo-paused .k1,body.atmo-paused .k2,body.atmo-paused .k3,body.atmo-paused .k4{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none;filter:none}}

/* ===== CUSTOM DROPDOWN (fix.txt tokens) — styled open menu for the builder selects; the hidden native select stays as data source / no-JS fallback ===== */
/* ===== КАСТОМНИЙ DROPDOWN (токени fix.txt) — стилізоване відкрите меню для селектів builder; прихований нативний select лишається джерелом даних / fallback без JS ===== */
.field.dd select{display:none}
.field .dd-btn{appearance:none;width:100%;padding:22px 34px 9px 13px;font:inherit;font-weight:500;color:var(--paper);text-align:left;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;transition:border-color .2s}
.field.dd.open .dd-btn,.field .dd-btn:hover{border-color:rgba(0,255,255,.35)}
.field::after{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.field.dd.open::after{transform:translateY(-50%) rotate(180deg)}
/* Panel: glass surface + gradient frame, same recipe as .glass (fix.txt §5) */
/* Панель: glass-поверхня + градієнтна рамка, той самий рецепт, що в .glass (fix.txt §5) */
.dd-menu{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;padding:6px;border-radius:var(--r-md);
  background:linear-gradient(160deg,var(--glass-hi),transparent 40%),rgba(16,9,42,.92);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 26px 54px -18px rgba(0,0,0,.75),0 0 34px -10px rgba(165,0,255,.4);
  opacity:0;transform:translateY(-6px);pointer-events:none;visibility:hidden;
  transition:opacity .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1),visibility 0s .25s}
.dd-menu::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.02) 45%,rgba(165,0,255,.35));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.field.dd.open .dd-menu{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.dd-list{list-style:none;margin:0;padding:0;max-height:252px;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,255,255,.35) transparent}
.dd-list::-webkit-scrollbar{width:6px}
.dd-list::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--violet),var(--cyan));border-radius:3px}
/* Options: --paper text; cyan = interactive (fix.txt §2); selected gets the ✦ spark */
/* Опції: текст --paper; cyan = інтерактив (fix.txt §2); обрана отримує іскру ✦ */
.dd-opt{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:9px;
  font-size:14px;font-weight:500;color:var(--paper);cursor:pointer;transition:background .15s,color .15s}
.dd-opt:hover,.dd-opt.act{background:rgba(0,255,255,.1);color:var(--cyan)}
.dd-opt[aria-selected="true"]{color:var(--cyan)}
.dd-opt[aria-selected="true"]::after{content:"✦";font-size:12px;filter:drop-shadow(0 0 6px rgba(0,255,255,.8))}

/* ===== AURORA v2 (2026-07-12, user request): slow, organic northern-lights motion.
   Colors stay per fix.txt §6 (lime/cyan = oxygen green glow, magenta/violet = purple lower fringes);
   only the motion and the curtain-ray structure change. Real aurora sways slowly and never
   repeats visibly, so each curtain gets a long multi-phase sway + its own brightness breathing. ===== */
/* ===== АВРОРА v2 (2026-07-12, запит користувача): повільний, органічний рух північного сяйва.
   Кольори за fix.txt §6 (lime/cyan = зелене киснева заграва, magenta/violet = пурпурові нижні краї);
   змінюється лише рух і структура променів-завіс. Справжня аврора коливається повільно і без
   помітного повтору, тому кожна завіса отримує довге багатофазне коливання + власне «дихання» яскравості. ===== */
.k1{animation:aur-sw1 6s ease-in-out infinite,aur-br1 9s ease-in-out infinite}
.k2{animation:aur-sw2 8s ease-in-out infinite,aur-br2 16s ease-in-out 3s infinite}
.k3{animation:aur-sw3 8s ease-in-out infinite,aur-br3 16s ease-in-out 6s infinite}
.k4{animation:aur-sw4 5s ease-in-out infinite,aur-br4 5s ease-in-out 1.5s infinite}
@keyframes aur-sw1{
  0%,100%{transform:skewX(-14deg) translateX(0) scaleY(1)}
  22%{transform:skewX(-7deg) translateX(64px) scaleY(1.07)}
  47%{transform:skewX(-18deg) translateX(-48px) scaleY(.94)}
  72%{transform:skewX(-10deg) translateX(88px) scaleY(1.12)}}
@keyframes aur-sw2{
  0%,100%{transform:skewX(-9deg) translateX(0) scaleY(1)}
  26%{transform:skewX(-15deg) translateX(-70px) scaleY(1.08)}
  55%{transform:skewX(-5deg) translateX(42px) scaleY(.95)}
  78%{transform:skewX(-13deg) translateX(-92px) scaleY(1.05)}}
@keyframes aur-sw3{
  0%,100%{transform:skewX(-16deg) translateX(0) scaleY(1)}
  18%{transform:skewX(-9deg) translateX(52px) scaleY(1.1)}
  52%{transform:skewX(-20deg) translateX(-60px) scaleY(.92)}
  80%{transform:skewX(-8deg) translateX(74px) scaleY(1.06)}}
@keyframes aur-sw4{
  0%,100%{transform:skewX(-7deg) translateX(0) scaleY(1)}
  30%{transform:skewX(-12deg) translateX(58px) scaleY(1.09)}
  60%{transform:skewX(-4deg) translateX(-66px) scaleY(.96)}
  85%{transform:skewX(-11deg) translateX(40px) scaleY(1.04)}}
/* Brightness breathing per curtain, ranges around the original opacities */
/* «Дихання» яскравості кожної завіси, діапазони навколо початкових значень прозорості */
@keyframes aur-br1{0%,100%{opacity:.45}50%{opacity:.78}}
@keyframes aur-br2{0%,100%{opacity:.36}50%{opacity:.64}}
@keyframes aur-br3{0%,100%{opacity:.4}50%{opacity:.7}}
@keyframes aur-br4{0%,100%{opacity:.3}50%{opacity:.56}}
/* Curtain rays: soft vertical folds hanging from the top, drifting slowly — the signature aurora texture */
/* Промені-завіси: м'які вертикальні складки, що звисають згори і повільно дрейфують — фірмова текстура аврори */
.aurora::before,.aurora::after{content:"";position:absolute;top:-12%;bottom:28%;left:-14%;right:-14%;
  mix-blend-mode:screen;pointer-events:none;filter:blur(13px);will-change:transform;
  -webkit-mask:linear-gradient(180deg,#fff 4%,rgba(255,255,255,.55) 46%,transparent 92%);
  mask:linear-gradient(180deg,#fff 4%,rgba(255,255,255,.55) 46%,transparent 92%)}
.aurora::before{
  background:repeating-linear-gradient(94deg,transparent 0 38px,rgba(57,255,136,.12) 38px 46px,rgba(0,255,255,.05) 46px 52px,transparent 52px 108px);
  transform:skewX(-13deg);animation:aur-rays1 63s ease-in-out infinite}
.aurora::after{
  background:repeating-linear-gradient(86deg,transparent 0 52px,rgba(165,0,255,.09) 52px 60px,rgba(255,46,154,.05) 60px 66px,transparent 66px 140px);
  transform:skewX(-8deg);animation:aur-rays2 81s ease-in-out infinite}
@keyframes aur-rays1{
  0%,100%{transform:skewX(-13deg) translateX(0)}
  30%{transform:skewX(-6deg) translateX(70px)}
  60%{transform:skewX(-16deg) translateX(-56px)}}
@keyframes aur-rays2{
  0%,100%{transform:skewX(-8deg) translateX(0)}
  35%{transform:skewX(-14deg) translateX(-64px)}
  70%{transform:skewX(-4deg) translateX(52px)}}

/* ===== EMAIL CAPTURE (task C-0) — moved here from park.css on 2026-07-28 =====
   The partial is shared by twelve templates, so its CSS has to be shared too. It lived in park.css,
   which every caller happened to load — until the home page included the partial and rendered it
   with no styles at all: the block lost its padding and grid, and clipped its own eyebrow and
   footnote at both edges. A shared component whose stylesheet is not in base.html is a trap that
   springs on whoever adds the next call site. */
/* ===== EMAIL-ЗАХОПЛЕННЯ (завдання C-0) — перенесено сюди з park.css 28.07.2026 =====
   Партіал спільний для дванадцяти шаблонів, тож і його CSS мусить бути спільним. Він жив у park.css,
   який усі, хто його підключав, випадково вантажили — доки головна не підключила партіал і не
   відрендерила його взагалі без стилів: блок втратив padding і grid та обрізав власні eyebrow і
   виноску з обох боків. Спільний компонент, чий стиль не в base.html, — це пастка, яка спрацьовує
   на тому, хто додасть наступне місце виклику. */
.ec{display:grid;gap:16px 26px;padding:clamp(20px,3vw,30px);margin-top:8px}
@media(min-width:760px){.ec{grid-template-columns:1.1fr 1fr;align-items:center}}
.ec-copy h3{font-family:"Unbounded",sans-serif;font-weight:700;font-size:clamp(18px,2.6vw,24px);margin:8px 0 6px;line-height:1.15}
.ec-copy p{font-size:13.5px;color:var(--mut);max-width:46ch;line-height:1.55}
.ec-form{display:flex;flex-wrap:wrap;gap:10px}
.ec-form input[type=email]{flex:1 1 200px;min-width:0;padding:13px 16px;border-radius:12px;font:inherit;font-size:14px;color:var(--paper);
  background:rgba(255,255,255,.05);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.ec-form input[type=email]::placeholder{color:var(--mut)}
.ec-form input[type=email]:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,255,255,.16)}
.ec-form .btn{flex:0 0 auto;padding:13px 20px;font-size:14px}
.ec-note{grid-column:1/-1;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);opacity:.75;margin-top:2px}
.ec-err{grid-column:1/-1;font-size:12.5px;color:#ff8f8f;margin-top:-4px}
/* Success state — lime glow, mirrors the passport "on" card */
/* Стан успіху — лаймове сяйво, дзеркалить картку паспорта "on" */
/* The "already on the list" state (task EM-3) shares the success layout but is DELIBERATELY quieter:
   it is an acknowledgement on a page the reader came for, not a success they just earned — the same
   card at full brightness on every page would read as if we hadn't heard them the first time. */
/* Стан «уже в списку» (завдання EM-3) ділить розкладку успіху, але СВІДОМО тихіший: це підтвердження
   на сторінці, по яку читач прийшов, а не щойно здобутий успіх — та сама картка на повну яскравість
   на кожній сторінці читалась би так, ніби ми не почули з першого разу. */
.ec-done,.ec-known{grid-template-columns:auto 1fr;align-items:center;border-color:rgba(57,255,136,.4);box-shadow:0 0 30px -12px rgba(57,255,136,.6)}
.ec-done .ec-ic,.ec-known .ec-ic{font-size:26px;color:var(--lime);text-shadow:0 0 16px rgba(57,255,136,.7)}
.ec-done b,.ec-known b{font-family:"Unbounded",sans-serif;font-weight:700;font-size:16px;color:var(--lime)}
.ec-done p,.ec-known p{font-size:13px;color:var(--mut);margin-top:4px;max-width:52ch}
.ec-known{border-color:var(--line);box-shadow:none;padding-top:16px;padding-bottom:16px}
.ec-known .ec-ic{color:var(--mut);text-shadow:none;font-size:20px}
.ec-known b{color:var(--paper);font-size:14px}
.ec-known a{color:var(--cyan)}