/* Grinded web — rovnaké farby a ikony (Ionicons) ako appka (src/theme.ts) */
:root {
  --canvas:#0B0B0C; --surface:#17171A; --surface2:#232327; --line:#26262B; --line2:#38383F;
  --hair:rgba(255,255,255,.07); --hair2:rgba(255,255,255,.12);
  --ink:#FFFFFF; --text:#D4D4D8; --muted:#8E8E96;
  --volt:#D7FF3A; --voltEdge:#9CBF14; --voltSoft:#262D10;
  --pink:#FF5FA2; --pinkSoft:#35162A; --flame:#FF5A1F; --flameSoft:#33190F; --flameInk:#FF7A45;
  --gold:#F2C230; --goldEdge:#96781E; --diamond:#62B0FF;
  --ease:cubic-bezier(.2,.8,.2,1);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--canvas); color:var(--text); font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:17px; line-height:1.55; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
/* jemné zrno cez celú stránku */
body::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color:var(--volt); text-decoration:none; }
a:hover { text-decoration:underline; }
b, strong { color:var(--ink); }
ion-icon { flex:none; --ionicon-stroke-width:40px; }
.disp { font-family:Unbounded,system-ui,sans-serif; font-weight:900; text-transform:uppercase; color:var(--ink); letter-spacing:-.02em; }
.wrap { max-width:1160px; margin:0 auto; padding:0 24px; }

/* hlavička */
.nav { position:sticky; top:0; z-index:20; background:rgba(11,11,12,.7); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid var(--hair); }
.nav .wrap { display:flex; align-items:center; gap:28px; height:68px; }
.brand { display:flex; align-items:center; gap:10px; font-family:Unbounded; font-weight:900; font-size:17px; letter-spacing:.02em; color:var(--ink); }
.brand:hover { text-decoration:none; }
.brand svg { width:28px; height:28px; }
.nav nav { display:flex; gap:28px; margin-left:auto; }
.nav nav a { color:var(--muted); font-weight:700; font-size:14.5px; transition:color .2s; }
.nav nav a:hover { color:var(--ink); text-decoration:none; }

/* tlačidlá — ako v appke: volt s tmavším spodkom */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; font-family:Unbounded; font-weight:900; font-size:13px; letter-spacing:.02em; text-transform:uppercase; border-radius:16px; padding:15px 22px; background:var(--volt); color:var(--canvas); border-bottom:4px solid var(--voltEdge); transition:transform .15s var(--ease), box-shadow .3s; white-space:nowrap; box-shadow:0 10px 30px -10px rgba(215,255,58,.45); }
.btn:hover { text-decoration:none; transform:translateY(-1px); box-shadow:0 14px 40px -10px rgba(215,255,58,.6); }
.btn:active { transform:translateY(2px); border-bottom-width:2px; }
.btn.sm { padding:10px 16px; font-size:11.5px; border-radius:12px; border-bottom-width:3px; }

/* sekcie */
section { padding:120px 0; }
.kicker { display:inline-flex; align-items:center; gap:8px; font-family:Unbounded; font-weight:900; font-size:12px; color:var(--volt); text-transform:uppercase; letter-spacing:.14em; margin-bottom:18px; }
.kicker::before { content:''; width:18px; height:2px; background:var(--volt); border-radius:2px; }
h2.disp { font-size:clamp(32px,5vw,52px); line-height:1.04; }
.lead { color:var(--muted); font-size:19px; margin-top:16px; max-width:560px; }

/* ===== ÚVOD ===== */
.hero { padding:88px 0 120px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse 70% 60% at 70% 40%,#000 0%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 40%,#000 0%,transparent 75%); opacity:.6; }
.blobs { position:absolute; inset:-20% -10% auto -10%; height:140%; pointer-events:none; filter:blur(80px); opacity:.32; }
.blobs i { position:absolute; border-radius:50%; }
.b1 { width:560px; height:560px; right:8%; top:2%; background:radial-gradient(circle,#D7FF3A 0,transparent 65%); animation:drift1 18s ease-in-out infinite alternate; }
.b2 { width:420px; height:420px; right:30%; top:40%; background:radial-gradient(circle,#FF5FA2 0,transparent 65%); opacity:.6; animation:drift2 21s ease-in-out infinite alternate; }
.b3 { width:380px; height:380px; right:-4%; top:48%; background:radial-gradient(circle,#FF5A1F 0,transparent 65%); opacity:.5; animation:drift3 24s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform:translate(-140px,90px) scale(1.15); } }
@keyframes drift2 { to { transform:translate(160px,-70px) scale(.85); } }
@keyframes drift3 { to { transform:translate(-90px,-120px) scale(1.2); } }
.hero .wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; position:relative; }

.pill { display:inline-flex; align-items:center; gap:10px; background:rgba(215,255,58,.06); border:1px solid rgba(215,255,58,.22); color:var(--volt); font-weight:700; font-size:13.5px; padding:7px 14px 7px 10px; border-radius:999px; }
.pill i { width:7px; height:7px; border-radius:50%; background:var(--volt); animation:ping 1.8s infinite; }
@keyframes ping { 0% { box-shadow:0 0 0 0 rgba(215,255,58,.6); } 70%,100% { box-shadow:0 0 0 9px rgba(215,255,58,0); } }
.hero h1 { font-size:clamp(44px,6.6vw,84px); white-space:nowrap; line-height:.98; margin:26px 0 22px; }
.hero h1 .ln { display:block; overflow:hidden; padding-bottom:.05em; }
.hero h1 .ln > span { display:inline-block; animation:lineUp 1s var(--ease) both; animation-delay:calc(var(--d) * .12s); }
.hero h1 em { font-style:normal; color:var(--volt); text-shadow:0 0 60px rgba(215,255,58,.25); }
@keyframes lineUp { from { transform:translateY(105%); } }
.hero .sub { font-size:20px; color:var(--muted); font-weight:500; max-width:470px; }
.hero .sub b { font-weight:700; }
.rise { animation:fadeUp .9s var(--ease) both; animation-delay:calc(var(--d) * .12s + .1s); }
@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } }

.stores { display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.store { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.03); border:1px solid var(--hair2); border-radius:12px; padding:8px 16px 8px 12px; color:var(--ink); }
.store:hover { text-decoration:none; border-color:var(--line2); }
.store ion-icon { font-size:22px; color:var(--ink); }
.store small { display:block; font-size:10.5px; color:var(--muted); font-weight:600; line-height:1.2; }
.store span { font-weight:700; font-size:15px; line-height:1.2; }
.store.soon { opacity:.5; pointer-events:none; }

/* zoznam čakateľov */
.signup { display:flex; gap:10px; margin-top:34px; max-width:480px; }
.signup input { flex:1; min-width:0; background:rgba(255,255,255,.04); border:1px solid var(--hair2); color:var(--ink); border-radius:16px; padding:0 18px; font:inherit; font-weight:600; font-size:16px; height:56px; transition:border-color .2s, background .2s; }
.signup input::placeholder { color:#5E5E66; }
.signup input:focus { outline:none; border-color:var(--volt); background:rgba(215,255,58,.03); }
.signup .btn { height:56px; }
.signup-msg { min-height:24px; margin-top:10px; font-weight:600; font-size:14px; color:var(--muted); }
.signup-msg.ok { color:var(--volt); }
.signup-msg.err { color:#FF8A95; }

/* ===== TELEFÓN ===== */
.phone { width:310px; height:640px; border-radius:50px; background:var(--canvas); position:relative; overflow:hidden; margin:0 auto;
  border:10px solid #050506;
  box-shadow:0 0 0 1.5px #2C2C31, 0 0 0 3px #0A0A0B, inset 0 0 0 1px rgba(255,255,255,.05), 0 50px 100px -20px rgba(0,0,0,.8), 0 30px 60px -30px rgba(215,255,58,.12); }
.phone::after { content:''; position:absolute; inset:0; border-radius:40px; pointer-events:none; z-index:8;
  background:linear-gradient(125deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 32%); }
.phone .notch { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:96px; height:28px; background:#000; border-radius:20px; z-index:9; }
.scr { padding:52px 16px 0; }
.hbar { display:flex; align-items:center; gap:5px; margin-bottom:16px; }
.av { border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:Unbounded; font-weight:900; color:var(--canvas); flex:none; }
.hello { flex:1; font-family:Unbounded; font-weight:900; font-size:12px; color:var(--ink); }
.cnt { display:flex; align-items:center; gap:3px; border-radius:999px; padding:5px 8px 5px 6px; font-family:Unbounded; font-weight:900; font-size:10.5px; }
.cnt ion-icon { font-size:12px; }
.stories { display:flex; gap:10px; margin-bottom:14px; }
.sr { width:54px; height:54px; border-radius:50%; border:2.5px solid var(--volt); display:flex; align-items:center; justify-content:center; flex:none; }
.sr.seen { border-color:var(--line2); }
.sr .av { width:44px; height:44px; font-size:15px; }
.rankcard { background:var(--surface); border:1px solid var(--hair); border-radius:20px; padding:13px 14px; display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.hex { position:relative; display:flex; align-items:center; justify-content:center; flex:none; }
.hex svg { position:absolute; inset:0; }
.hex span { position:relative; font-family:Unbounded; font-weight:900; color:var(--canvas); }
.rankcard .nm { font-family:Unbounded; font-weight:900; font-size:15px; color:var(--ink); }
.rankcard .s { color:var(--muted); font-size:12px; }
.bar { height:8px; border-radius:6px; background:var(--surface2); margin-top:8px; overflow:hidden; }
.bar i { display:block; height:100%; width:72%; border-radius:6px; background:var(--volt); }
.grow { animation:grow 1.6s .9s var(--ease) both; }
@keyframes grow { from { width:0; } }
.feed { background:var(--surface); border:1px solid var(--hair); border-radius:20px; padding:4px 12px; }
.feed .row { display:flex; align-items:center; gap:10px; padding:9px 0; }
.feed .row + .row { border-top:1px solid var(--line); }
.feed .t { flex:1; font-size:12.5px; color:var(--muted); line-height:1.3; }
.feed .t b { display:block; font-size:13px; }
.chip { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:800; border-radius:999px; padding:4px 8px; }
.chip ion-icon { font-size:12px; }
.chip.round { width:24px; height:24px; padding:0; justify-content:center; }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:88px; background:linear-gradient(transparent,var(--canvas) 35%); display:flex; justify-content:space-around; align-items:center; padding:0 34px 12px; }
.tabbar ion-icon { font-size:24px; color:var(--muted); }
.tabbar ion-icon.act { color:var(--volt); }
.cam { width:62px; height:62px; border-radius:50%; background:var(--volt); border-bottom:4px solid var(--voltEdge); display:flex; align-items:center; justify-content:center; margin-top:-18px; animation:pulse 2.6s ease-in-out infinite; }
.cam ion-icon { font-size:26px; color:var(--canvas); }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(215,255,58,.45); } 50% { box-shadow:0 0 0 14px rgba(215,255,58,0); } }

/* plávajúce karty okolo telefónu */
.phone-wrap { position:relative; transition:transform .3s ease-out; transform-style:preserve-3d; }
.hero .phone { animation:fadeUp 1.1s .3s var(--ease) both; }
.glass { position:absolute; z-index:10; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border-radius:18px; white-space:nowrap;
  background:rgba(28,28,32,.72); backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid var(--hair2); box-shadow:0 20px 40px -12px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  animation:fadeUp .9s var(--ease) both, bob 7s ease-in-out infinite; animation-delay:var(--a), var(--f); }
.glass .gi { width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
.glass .gi ion-icon { font-size:18px; }
.glass b { display:block; font-size:13.5px; line-height:1.2; }
.glass small { display:block; font-size:11.5px; color:var(--muted); font-weight:600; }
.g1 { right:-44px; top:96px; } .g2 { left:-60px; top:318px; } .g3 { right:-30px; bottom:118px; }
@keyframes bob { 0%,100% { translate:0 0; } 50% { translate:0 -10px; } }

/* upozornenia v telefóne */
.toasts { position:absolute; left:10px; right:10px; top:44px; z-index:7; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.toast { display:flex; gap:10px; align-items:center; background:rgba(44,44,50,.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--hair); border-radius:20px; padding:10px 12px; font-size:12.5px; color:var(--ink); box-shadow:0 12px 30px rgba(0,0,0,.5); animation:toastIn .55s cubic-bezier(.2,1.15,.3,1) both; }
.toast.out { animation:toastOut .4s ease-in both; }
.toast .ti { width:30px; height:30px; border-radius:9px; background:var(--canvas); border:1px solid var(--hair2); display:flex; align-items:center; justify-content:center; flex:none; }
.toast .ti svg { width:17px; height:17px; }
.toast small { display:block; color:#B9B9C0; font-size:11px; }
@keyframes toastIn { from { opacity:0; transform:translateY(-30px) scale(.92); } }
@keyframes toastOut { to { opacity:0; transform:translateY(-16px) scale(.96); } }

/* ===== PÁS ===== */
.marquee { border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:22px 0; overflow:hidden; position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.track { display:flex; align-items:center; gap:48px; width:max-content; animation:marq 40s linear infinite; }
.track span { display:inline-flex; align-items:center; gap:12px; font-family:Unbounded; font-weight:900; font-size:15px; letter-spacing:.06em; color:#5E5E66; white-space:nowrap; text-transform:uppercase; }
.track ion-icon { font-size:18px; }
@keyframes marq { to { transform:translateX(-50%); } }

/* ===== VÝROK ===== */
.words-sec { padding:150px 0 70px; }
.words { font-size:clamp(34px,6.2vw,80px); line-height:1.04; max-width:1020px; }
.words .w { color:var(--ink); opacity:.12; transition:opacity .3s, color .3s; }
.words .w.lit { opacity:1; }
.words .w.hl.lit { color:var(--volt); }

/* ===== POCIT: sticky telefón ===== */
.feel { padding-top:40px; }
.feel-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.bstep { min-height:88vh; display:flex; flex-direction:column; justify-content:center; opacity:.2; transition:opacity .6s; }
.bstep.active { opacity:1; }
.bstep h2 { font-size:clamp(34px,4.4vw,56px); line-height:1.02; margin-bottom:20px; }
.bstep p { font-size:19px; color:var(--muted); max-width:430px; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.tags span { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.03); border:1px solid var(--hair2); border-radius:999px; padding:7px 13px 7px 10px; font-size:13.5px; font-weight:700; color:var(--text); }
.tags ion-icon { font-size:15px; color:var(--volt); }
.bstep.active .tags span { animation:fadeUp .5s both; }
.bstep.active .tags span:nth-child(2) { animation-delay:.07s; } .bstep.active .tags span:nth-child(3) { animation-delay:.14s; } .bstep.active .tags span:nth-child(4) { animation-delay:.21s; }
.feel-phone { position:sticky; top:calc(50vh - 320px); height:640px; align-self:start; margin-top:calc(44vh - 320px); }
.feel-phone::before { content:''; position:absolute; inset:10% -10%; background:radial-gradient(circle,rgba(215,255,58,.12),transparent 60%); filter:blur(30px); }
.m-slot { display:none; }

.screen { position:absolute; inset:0; padding:58px 18px 20px; opacity:0; transform:translateY(24px) scale(.97); transition:opacity .45s, transform .7s var(--ease); pointer-events:none; }
.screen.on { opacity:1; transform:none; }
.sh { font-family:Unbounded; font-weight:900; font-size:20px; color:var(--ink); }
.ssub { color:var(--muted); font-size:13px; margin:2px 0 16px; }
.ssub b { color:var(--volt); }
.frow { display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--hair); border-radius:18px; padding:10px; margin-bottom:8px; }
.frow .t { flex:1; font-size:12.5px; line-height:1.3; color:var(--muted); }
.frow .t b { display:block; font-size:13.5px; }
.frow.dim { background:transparent; border:1.5px dashed var(--line2); }
.on .frow { animation:slideIn .6s cubic-bezier(.2,1.05,.3,1) both; animation-delay:var(--d); }
@keyframes slideIn { from { opacity:0; transform:translateX(40px); } }
.cmt { background:var(--pinkSoft); color:var(--ink); border-radius:18px 18px 18px 4px; padding:9px 12px; font-size:13px; margin-top:12px; display:inline-block; }
.cmt b { display:block; color:var(--pink); font-size:11px; }
.on .cmt { animation:fadeUp .5s both; animation-delay:var(--d); }
.flyers i { position:absolute; bottom:40px; left:var(--x); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:0; background:var(--c); box-shadow:0 6px 20px rgba(0,0,0,.4); }
.flyers ion-icon { font-size:18px; color:var(--canvas); }
.on .flyers i { animation:fly 2.8s ease-out infinite; animation-delay:var(--d); }
@keyframes fly { 0% { opacity:0; transform:translateY(0) scale(.5); } 15% { opacity:1; transform:translateY(-30px) scale(1); } 100% { opacity:0; transform:translateY(-240px) scale(.9) rotate(var(--r,10deg)); } }

.flame-wrap { display:flex; justify-content:center; margin-top:14px; position:relative; }
.flame-wrap::before { content:''; position:absolute; width:150px; height:150px; top:-10px; border-radius:50%; background:radial-gradient(circle,rgba(255,90,31,.35),transparent 65%); }
.flame-wrap ion-icon { font-size:104px; color:var(--flame); position:relative; transform-origin:50% 90%; filter:drop-shadow(0 0 24px rgba(255,90,31,.5)); }
.on .flame-wrap ion-icon { animation:popIn .7s cubic-bezier(.2,1.4,.3,1) both, flick 1.8s .7s ease-in-out infinite; }
@keyframes flick { 0%,100% { transform:scale(1) rotate(-2deg); } 50% { transform:scale(1.05,1.09) rotate(2deg); } }
@keyframes popIn { from { transform:scale(0); } }
.big { font-family:Unbounded; font-weight:900; font-size:84px; color:var(--ink); text-align:center; line-height:1; margin-top:4px; }
.bigsub { font-family:Unbounded; font-weight:900; font-size:12px; color:var(--flameInk); text-align:center; letter-spacing:.12em; }
.wk { background:var(--surface); border:1px solid var(--hair); border-radius:18px; padding:14px; margin-top:22px; }
.wkh { display:flex; justify-content:space-between; font-size:13px; margin-bottom:10px; }
.wkh span { color:var(--volt); font-weight:800; }
.days { display:flex; justify-content:space-between; }
.days .d { width:32px; height:32px; border-radius:50%; background:var(--surface2); color:var(--muted); font-style:normal; font-size:10.5px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.days .d.on { background:var(--volt); color:var(--canvas); }
.on .days .d.on { animation:dayPop .45s cubic-bezier(.2,1.6,.3,1) both; animation-delay:var(--d); }
@keyframes dayPop { from { background:var(--surface2); color:var(--muted); transform:scale(.6); } }
.done-pop { display:flex; align-items:center; justify-content:center; gap:8px; font-family:Unbounded; font-weight:900; font-size:13px; color:var(--canvas); background:var(--volt); border-radius:14px; border-bottom:4px solid var(--voltEdge); padding:11px; margin-top:12px; }
.done-pop ion-icon { font-size:18px; }
.on .done-pop { animation:stamp .55s cubic-bezier(.2,1.5,.3,1) both; animation-delay:var(--d); }
@keyframes stamp { from { opacity:0; transform:scale(1.25); } }
.shield { display:flex; align-items:center; justify-content:center; gap:7px; color:var(--pink); background:var(--pinkSoft); border-radius:12px; padding:9px; font-size:12px; font-weight:700; margin-top:10px; }
.shield ion-icon { font-size:15px; }

.chart { position:relative; height:180px; background:var(--surface); border:1px solid var(--hair); border-radius:18px; padding:14px 10px 0; overflow:hidden; }
.chart svg { width:100%; height:100%; }
.chart .line { stroke-dasharray:400; stroke-dashoffset:0; }
.on .chart .line { animation:draw 1.6s .2s cubic-bezier(.4,0,.2,1) both; }
@keyframes draw { from { stroke-dashoffset:400; } }
.on .chart .area { animation:fadeIn 1s 1.2s both; }
@keyframes fadeIn { from { opacity:0; } }
.chart .dot { position:absolute; right:8px; top:38px; width:14px; height:14px; border-radius:50%; background:var(--volt); }
.on .chart .dot { animation:fadeIn .3s 1.7s both, pulse 1.6s 2s infinite; }
.pr { display:flex; align-items:center; justify-content:center; gap:8px; font-family:Unbounded; font-weight:900; font-size:14px; color:var(--canvas); background:var(--volt); border-radius:14px; border-bottom:4px solid var(--voltEdge); padding:12px; margin-top:14px; }
.pr ion-icon { font-size:18px; }
.on .pr { animation:stamp .55s 1.8s cubic-bezier(.2,1.5,.3,1) both; }
.mini { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.mini div { background:var(--surface); border:1px solid var(--hair); border-radius:14px; padding:12px; }
.mini b { display:block; font-family:Unbounded; font-size:18px; }
.mini span { color:var(--muted); font-size:12px; }

.board { position:relative; height:248px; }
.lrow { position:absolute; left:0; right:0; height:56px; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--hair); border-radius:16px; padding:0 12px; }
.lrow b { flex:1; font-size:14px; }
.lrow .pos { font-family:Unbounded; font-weight:900; font-size:13px; color:var(--muted); width:14px; }
.lrow .pts { font-family:Unbounded; font-weight:900; font-size:13px; color:var(--ink); }
.r-me { top:0; border:1.5px solid var(--volt); background:#1A1F0C; z-index:2; box-shadow:0 10px 30px -10px rgba(215,255,58,.35); }
.r-me .pos { color:var(--volt); }
.r-adam { top:62px; } .r-3 { top:124px; } .r-4 { top:186px; }
.on .r-me { animation:upRow .7s 1.1s cubic-bezier(.3,1.25,.4,1) both; }
.on .r-adam { animation:downRow .7s 1.1s cubic-bezier(.3,1.25,.4,1) both; }
@keyframes upRow { from { top:62px; } }
@keyframes downRow { from { top:0; } }
.overtake { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; font-weight:800; font-size:14px; color:var(--canvas); background:var(--volt); border-radius:14px; border-bottom:4px solid var(--voltEdge); padding:12px; }
.overtake ion-icon { font-size:18px; }
.on .overtake { animation:stamp .55s 1.8s cubic-bezier(.2,1.5,.3,1) both; }

/* ===== CENNÍK ===== */
.plans { display:grid; grid-template-columns:.85fr 1.5fr; gap:18px; margin-top:52px; align-items:stretch; }
.plan { background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); border:1px solid var(--hair2); border-radius:28px; padding:34px; display:flex; flex-direction:column; transition:transform .3s ease-out, opacity .8s; }
.plan.plus { background:radial-gradient(120% 80% at 100% 0%,rgba(215,255,58,.14),transparent 55%),linear-gradient(180deg,#16180F,#121210); border-color:rgba(215,255,58,.45); position:relative; box-shadow:0 30px 80px -30px rgba(215,255,58,.25); }
.plan .tag { position:absolute; top:-13px; right:26px; background:var(--volt); color:var(--canvas); font-family:Unbounded; font-weight:900; font-size:10.5px; letter-spacing:.06em; padding:7px 12px; border-radius:999px; text-transform:uppercase; }
.plan h3 { font-family:Unbounded; font-weight:900; font-size:18px; color:var(--ink); text-transform:uppercase; letter-spacing:.02em; }
.price { font-family:Unbounded; font-weight:900; font-size:46px; color:var(--ink); margin:16px 0 2px; letter-spacing:-.02em; }
.price small { font-size:15px; color:var(--muted); letter-spacing:0; }
.plan .alt { color:var(--muted); font-size:14.5px; font-weight:600; }
.plan ul { list-style:none; margin:26px 0 0; padding-top:24px; border-top:1px solid var(--hair); display:flex; flex-direction:column; gap:14px; }
.plan li { display:flex; gap:11px; align-items:flex-start; color:var(--text); font-size:16px; }
.plan li > ion-icon { font-size:20px; color:var(--volt); margin-top:1px; }
/* Grinded+ rozpísané funkcie */
.perks { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:26px; padding-top:24px; border-top:1px solid var(--hair); }
.perk { display:flex; gap:14px; align-items:flex-start; background:rgba(0,0,0,.25); border:1px solid var(--hair); border-radius:18px; padding:16px; }
.perk .pi { width:40px; height:40px; border-radius:12px; background:var(--voltSoft); display:flex; align-items:center; justify-content:center; flex:none; }
.perk .pi ion-icon { font-size:20px; color:var(--volt); }
.perk b { display:block; font-size:15.5px; margin-bottom:3px; }
.perk span { display:block; color:var(--muted); font-size:14px; line-height:1.45; }

/* ===== DÔVERA ===== */
.trust { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.trust div { border:1px solid var(--hair2); border-radius:24px; padding:26px; background:rgba(255,255,255,.015); }
.trust ion-icon { font-size:24px; color:var(--volt); margin-bottom:16px; }
.trust b { display:block; font-weight:800; font-size:17px; margin-bottom:6px; }
.trust p { color:var(--muted); font-size:15px; }

/* ===== OTÁZKY ===== */
.faq { max-width:800px; margin-top:40px; border-top:1px solid var(--hair); }
.faq details { border-bottom:1px solid var(--hair); }
.faq summary { list-style:none; cursor:pointer; padding:24px 0; font-weight:700; font-size:18px; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:''; width:10px; height:10px; flex:none; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg) translate(-3px,-3px); transition:transform .3s var(--ease), border-color .2s; }
.faq details[open] summary::after { transform:rotate(-135deg); border-color:var(--volt); }
.faq details p { color:var(--muted); padding:0 0 24px; max-width:680px; }

/* ===== ZÁVER ===== */
.final { text-align:center; }
.final .box { position:relative; overflow:hidden; border-radius:40px; padding:80px 24px; border:1px solid rgba(215,255,58,.25);
  background:radial-gradient(80% 120% at 50% 0%,rgba(215,255,58,.18),transparent 60%),linear-gradient(180deg,#141610,#0E0E0D); }
.final h2 { font-size:clamp(34px,6vw,64px); position:relative; }
.final p { color:var(--muted); font-weight:500; font-size:19px; margin-top:14px; position:relative; }
.final .signup { margin:32px auto 0; position:relative; }
.final-ring { position:absolute; width:560px; height:560px; left:50%; top:-300px; margin-left:-280px; animation:rot 40s linear infinite; opacity:.5; }
@keyframes rot { to { transform:rotate(360deg); } }

/* päta */
footer { border-top:1px solid var(--hair); padding:44px 0 56px; margin-top:100px; }
footer .wrap { display:flex; flex-wrap:wrap; gap:24px 40px; align-items:center; }
footer .links { display:flex; flex-wrap:wrap; gap:10px 26px; margin-left:auto; }
footer .links a { color:var(--muted); font-weight:600; font-size:14.5px; }
footer .links a:hover { color:var(--ink); text-decoration:none; }
footer .copy { width:100%; color:#5E5E66; font-size:13.5px; }

/* odhalenie pri scrolle */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .9s, transform .9s var(--ease); transition-delay:var(--rd,0s); }
.reveal.in { opacity:1; transform:none; }

/* podstránky */
.doc { max-width:720px; margin:0 auto; padding:64px 24px 0; }
.doc h1 { font-family:Unbounded; font-weight:900; font-size:clamp(28px,5vw,40px); line-height:1.12; color:var(--ink); text-transform:uppercase; letter-spacing:-.02em; }
.doc h2 { font-family:Unbounded; font-weight:900; font-size:14px; letter-spacing:.08em; color:var(--volt); text-transform:uppercase; margin:40px 0 12px; }
.doc p + p { margin-top:10px; }
.doc ol, .doc ul { margin:10px 0 0 22px; } .doc li { margin-bottom:8px; }
.doc .meta { color:var(--muted); margin:12px 0 30px; font-weight:600; }
.card { background:rgba(255,255,255,.025); border:1px solid var(--hair2); border-radius:20px; padding:20px 22px; margin-top:14px; }
.todo { background:#3A1519; color:#FFB3BC; border-radius:8px; padding:1px 6px; font-weight:700; }
.doc table { width:100%; border-collapse:collapse; margin-top:10px; font-size:15px; }
.doc th, .doc td { text-align:left; vertical-align:top; padding:10px; border-bottom:1px solid var(--line); }
.doc th { color:var(--ink); }

@media (max-width:1000px) {
  .plans { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .hero .wrap { grid-template-columns:1fr; }
  .phone-wrap { margin-top:28px; }
  .feel-grid, .trust { grid-template-columns:1fr; }
  .feel-phone { display:none; }
  .bstep { min-height:auto; opacity:1; padding:44px 0; }
  .m-slot { display:block; margin-top:30px; }
  .nav nav { display:none; }
  .nav .btn { margin-left:auto; }
  section { padding:84px 0; }
  .words-sec { padding:100px 0 30px; }
}
@media (max-width:600px) {
  .perks { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .wrap { padding:0 16px; }
  .signup { flex-direction:column; }
  .signup input { flex:none; }
  .hero .phone { transform:scale(.92); transform-origin:top center; margin-bottom:-50px; }
  .g1 { right:-6px; top:70px; } .g2 { left:-6px; } .g3 { right:-4px; }
  .glass { padding:8px 12px 8px 8px; } .glass .gi { width:30px; height:30px; } .glass small { display:none; }
  .plan { padding:26px 20px; }
  .final .box { padding:56px 18px; border-radius:30px; }
}
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
  .words .w { opacity:1; }
}

/* ===== KONTAKT ===== */
.contact { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px; }
.ccard { display:block; border:1px solid var(--hair2); border-radius:28px; padding:30px; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); color:var(--text); transition:border-color .25s, transform .25s var(--ease), opacity .9s; }
a.ccard:hover { text-decoration:none; border-color:rgba(215,255,58,.5); transform:translateY(-3px); }
.ccard .pi { width:44px; height:44px; border-radius:14px; background:var(--voltSoft); display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.ccard .pi ion-icon { font-size:22px; color:var(--volt); }
.ccard small { display:block; font-family:Unbounded; font-weight:900; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.ccard .big-mail { display:block; font-size:clamp(20px,2.6vw,28px); font-weight:800; color:var(--volt); margin-bottom:10px; word-break:break-word; }
.ccard p { color:var(--muted); font-size:15.5px; }
.ccard .firm { line-height:1.8; }
.ccard .firm b { font-size:19px; }
@media (max-width:900px) { .contact { grid-template-columns:1fr; } }