/* =========================================================================
   GastroNinja — dizajnerski sistem »Sumi-e Athletic«
   Črnilna podlaga, wasabi akcent, ember energija, mentol za fizioterapijo.
   ========================================================================= */

/* ------------------------------------------------------------- 1. žetoni */
:root{
  --ink:        #0A0C0B;
  --ink-2:      #101413;
  --ink-3:      #171D1A;
  --ink-4:      #1F2724;
  --line:       rgba(255,255,255,.085);
  --line-2:     rgba(255,255,255,.16);
  --paper:      #F1F5EE;
  --paper-2:    #C9D2C9;
  --mute:       #838E86;
  --wasabi:     #B6F35A;
  --wasabi-2:   #8FD62F;
  --wasabi-ink: #0A0C0B;
  --ember:      #FF6A2B;
  --mint:       #46D6BC;
  --plum:       #B98CFF;
  --danger:     #FF5A5A;
  --ok:         #6FE39B;

  --r-xs: 3px; --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;
  --sp: 8px;
  --w-max: 1240px;
  --w-text: 68ch;

  --f-display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-2: 0 24px 70px -30px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.4);
  --glow: 0 0 0 1px rgba(182,243,90,.35), 0 8px 40px -12px rgba(182,243,90,.35);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  color-scheme: dark;
}

:root[data-theme="light"]{
  --ink:      #F4F6F1;
  --ink-2:    #FFFFFF;
  --ink-3:    #EDF1E9;
  --ink-4:    #E2E8DD;
  --line:     rgba(10,12,11,.10);
  --line-2:   rgba(10,12,11,.20);
  --paper:    #131816;
  --paper-2:  #3D4642;
  --mute:     #636E67;
  --wasabi:   #4E9A16;
  --wasabi-2: #3C7B0F;
  --wasabi-ink:#FFFFFF;
  --ember:    #D9490D;
  --mint:     #0E9C86;
  --shadow-1: 0 1px 2px rgba(20,30,20,.06), 0 8px 24px -14px rgba(20,30,20,.18);
  --shadow-2: 0 30px 70px -34px rgba(20,30,20,.28);
  --glow: 0 0 0 1px rgba(78,154,22,.3), 0 8px 30px -14px rgba(78,154,22,.35);
  color-scheme: light;
}

/* --------------------------------------------------------- 2. ponastavitev */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font:400 16px/1.62 var(--f-body); font-feature-settings:"cv05","ss03";
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--wasabi); color:var(--wasabi-ink); }
:focus-visible{ outline:2px solid var(--wasabi); outline-offset:3px; border-radius:var(--r-xs); }
hr{ border:0; border-top:1px solid var(--line); margin:calc(var(--sp)*5) 0; }

/* zrnatost + žarek v ozadju */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
:root[data-theme="light"] body::before{ opacity:.14; }

/* ----------------------------------------------------------- 3. tipografija */
.display,h1,h2,h3{ font-family:var(--f-display); font-weight:600; letter-spacing:-.005em; line-height:.98; text-transform:uppercase; margin:0; }
h1,.h1{ font-size:clamp(2.7rem, 7.4vw, 5.6rem); }
h2,.h2{ font-size:clamp(2rem, 4.6vw, 3.5rem); }
h3,.h3{ font-size:clamp(1.35rem, 2.2vw, 1.9rem); }
h4,.h4{ font:700 1.06rem/1.3 var(--f-body); letter-spacing:.01em; margin:0; text-transform:none; }
p{ margin:0 0 1em; }
.lead{ font-size:clamp(1.06rem,1.45vw,1.28rem); line-height:1.6; color:var(--paper-2); max-width:var(--w-text); }
.small{ font-size:.88rem; }
.tiny{ font-size:.78rem; }
.mute{ color:var(--mute); }
.num{ font-variant-numeric:tabular-nums; }
.mono{ font-family:var(--f-mono); font-size:.82em; letter-spacing:.02em; }

.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font:600 .74rem/1 var(--f-body); letter-spacing:.18em; text-transform:uppercase;
  color:var(--wasabi); margin-bottom:calc(var(--sp)*2);
}
.kicker::before{ content:''; width:26px; height:2px; background:var(--wasabi); transform:skewX(-28deg); }
.kicker--ember{ color:var(--ember); } .kicker--ember::before{ background:var(--ember); }
.kicker--mint{ color:var(--mint); }   .kicker--mint::before{ background:var(--mint); }

.ord{ font:400 .8rem/1 var(--f-mono); color:var(--mute); letter-spacing:.14em; }

/* poteza čopiča pod naslovom */
.brush{ position:relative; display:inline-block; }
.brush::after{
  content:''; position:absolute; left:-1.5%; right:-1.5%; bottom:-.03em; height:.15em;
  background:var(--wasabi); opacity:.92;
  clip-path:polygon(0 42%,4% 12%,16% 30%,32% 8%,52% 34%,72% 10%,88% 32%,100% 16%,100% 74%,86% 96%,66% 70%,44% 94%,24% 66%,8% 92%,0 68%);
  transform:scaleX(var(--brush,1)); transform-origin:left; transition:transform .7s var(--ease-out);
}
.brush--ember::after{ background:var(--ember); }
.reveal .brush{ --brush:0; }
.reveal.in .brush{ --brush:1; }

/* ------------------------------------------------------------- 4. postavitev */
.wrap{ width:min(100% - 40px, var(--w-max)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 40px, 860px); margin-inline:auto; }
section{ position:relative; z-index:1; padding:clamp(52px,6.5vw,96px) 0; }
.sect-head{ max-width:760px; margin-bottom:clamp(32px,4vw,56px); }
.grid{ display:grid; gap:clamp(16px,2vw,26px); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-6{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center; }
.stack{ display:flex; flex-direction:column; gap:calc(var(--sp)*2); }
.row{ display:flex; align-items:center; gap:calc(var(--sp)*1.5); flex-wrap:wrap; }
.between{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.center{ text-align:center; margin-inline:auto; }
.sticky{ position:sticky; top:96px; }
@media (max-width:1000px){ .g-4,.g-6{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } .split{ grid-template-columns:1fr; } }
@media (max-width:620px){ .g-2,.g-3,.g-4,.g-6{ grid-template-columns:1fr; } .wrap,.wrap--narrow{ width:min(100% - 28px, var(--w-max)); } }

/* --------------------------------------------------------------- 5. gumbi */
.btn{
  --bg:var(--wasabi); --fg:var(--wasabi-ink);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border:0; border-radius:var(--r-sm); background:var(--bg); color:var(--fg);
  font:700 .93rem/1 var(--f-body); letter-spacing:.02em; cursor:pointer; overflow:hidden;
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease), filter .25s var(--ease);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, var(--shadow-1);
}
.btn::after{
  content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
  transform:translateX(-120%); transition:transform .7s var(--ease-out);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--glow), var(--shadow-2); }
.btn:hover::after{ transform:translateX(120%); }
.btn:active{ transform:translateY(0) scale(.99); }
.btn--lg{ padding:19px 34px; font-size:1rem; }
.btn--sm{ padding:10px 16px; font-size:.83rem; }
.btn--ember{ --bg:var(--ember); --fg:#160702; }
.btn--mint{ --bg:var(--mint); --fg:#04211C; }
.btn--ghost{ background:transparent; color:var(--paper); box-shadow:inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover{ background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line-2), var(--shadow-1); }
.btn--quiet{ background:var(--ink-3); color:var(--paper); box-shadow:inset 0 0 0 1px var(--line); }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.btn__i{ width:18px; height:18px; flex:0 0 auto; }

.link{ color:var(--wasabi); font-weight:600; display:inline-flex; align-items:center; gap:7px; }
.link::after{ content:'→'; transition:transform .25s var(--ease-out); }
.link:hover::after{ transform:translateX(5px); }

/* -------------------------------------------------------------- 6. kartice */
.card{
  position:relative; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:clamp(20px,2.4vw,30px); box-shadow:var(--shadow-1);
  transition:border-color .3s var(--ease), transform .4s var(--ease-out), box-shadow .4s var(--ease);
}
.card:hover{ border-color:var(--line-2); }
.card--raise:hover{ transform:translateY(-5px); box-shadow:var(--shadow-2); }
.card--glass{ background:color-mix(in srgb, var(--ink-2) 72%, transparent); backdrop-filter:blur(14px); }
.card--accent{ border-color:color-mix(in srgb, var(--wasabi) 40%, transparent); }
.card__cut{ position:absolute; top:0; right:0; width:54px; height:54px; overflow:hidden; pointer-events:none; }
.card__cut::before{ content:''; position:absolute; top:-28px; right:-28px; width:56px; height:56px; background:var(--wasabi); transform:rotate(45deg); opacity:.14; }
.card-i{ width:44px; height:44px; display:grid; place-items:center; border-radius:var(--r-sm); background:var(--ink-4); box-shadow:inset 0 0 0 1px var(--line); margin-bottom:16px; }
.card-i svg{ width:22px; height:22px; }

.pill{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:var(--r-pill);
  background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line);
  font:600 .76rem/1 var(--f-body); letter-spacing:.04em; color:var(--paper-2); white-space:nowrap;
}
.pill--wasabi{ background:color-mix(in srgb, var(--wasabi) 16%, transparent); color:var(--wasabi); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--wasabi) 32%, transparent); }
.pill--ember{ background:color-mix(in srgb, var(--ember) 16%, transparent); color:var(--ember); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ember) 32%, transparent); }
.pill--mint{ background:color-mix(in srgb, var(--mint) 16%, transparent); color:var(--mint); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mint) 32%, transparent); }

.stat{ display:flex; flex-direction:column; gap:4px; }
.stat__n{ font:600 clamp(2rem,3.4vw,3rem)/1 var(--f-display); font-variant-numeric:tabular-nums; }
.stat__l{ font-size:.82rem; color:var(--mute); letter-spacing:.04em; }

/* --------------------------------------------------------------- 7. glava */
.head{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter:blur(16px) saturate(1.2); border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.head.stuck{ border-bottom-color:var(--line); background:color-mix(in srgb, var(--ink) 94%, transparent); }
.head__in{ display:flex; align-items:center; gap:24px; height:70px; }
.logo{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:700; font-size:1.28rem; letter-spacing:.02em; text-transform:uppercase; }
.logo svg{ width:30px; height:30px; }
.logo i{ font-style:normal; color:var(--wasabi); }
.nav{ display:flex; gap:2px; margin-left:auto; }
.nav a{ padding:9px 13px; border-radius:var(--r-sm); font-weight:550; font-size:.92rem; color:var(--paper-2); transition:color .2s, background .2s; }
.nav a:hover{ color:var(--paper); background:var(--ink-3); }
.nav a.on{ color:var(--wasabi); }
.head__act{ display:flex; align-items:center; gap:10px; }
.icon-btn{ width:38px; height:38px; display:grid; place-items:center; border-radius:var(--r-sm); background:transparent; border:1px solid var(--line); cursor:pointer; transition:background .2s, border-color .2s; }
.icon-btn:hover{ background:var(--ink-3); border-color:var(--line-2); }
.icon-btn svg{ width:18px; height:18px; }
.burger{ display:none; }
@media (max-width:960px){
  .nav{ position:fixed; inset:70px 0 auto; flex-direction:column; gap:0; padding:12px 20px 26px;
        background:var(--ink-2); border-bottom:1px solid var(--line); transform:translateY(-120%);
        transition:transform .45s var(--ease-out); box-shadow:var(--shadow-2); }
  .nav.open{ transform:translateY(0); }
  .nav a{ padding:14px 6px; font-size:1.06rem; border-bottom:1px solid var(--line); border-radius:0; }
  .burger{ display:grid; }
  .head__act .btn--ghost{ display:none; }
}

/* ---------------------------------------------------------------- 8. hero */
.hero{ position:relative; padding:clamp(48px,7vw,96px) 0 clamp(56px,7vw,104px); overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__bg::before{
  content:''; position:absolute; left:50%; top:-20%; width:1100px; height:1100px; transform:translateX(-50%);
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--wasabi) 16%, transparent), transparent 62%);
  filter:blur(20px);
}
.hero__bg::after{
  content:''; position:absolute; right:-10%; bottom:-30%; width:760px; height:760px;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ember) 13%, transparent), transparent 65%);
}
.hero__in{ position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,4vw,56px); align-items:center; }
.hero h1 em{ font-style:normal; color:var(--wasabi); }
.hero__claim{ margin:22px 0 30px; }
.hero__proof{ display:flex; gap:26px; margin-top:34px; padding-top:24px; border-top:1px solid var(--line); flex-wrap:wrap; }
@media (max-width:900px){ .hero__in{ grid-template-columns:1fr; } }

/* mreža v ozadju */
.gridlines{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:72px 72px; mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%); }

/* ------------------------------------------------------- 9. tedenska kartica */
.week{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.day{
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 8px;
  text-align:center; transition:transform .3s var(--ease-out), border-color .3s;
}
.day:hover{ transform:translateY(-3px); border-color:var(--line-2); }
.day__d{ font:600 .68rem/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.day__t{ font:600 1.05rem/1 var(--f-display); margin:6px 0 4px; }
.day--rest .day__t{ color:var(--mute); }
.day--hard{ background:color-mix(in srgb, var(--ember) 14%, var(--ink-3)); }
.day--train{ background:color-mix(in srgb, var(--wasabi) 12%, var(--ink-3)); }

/* makro trak */
.macro{ display:flex; height:9px; border-radius:var(--r-pill); overflow:hidden; background:var(--ink-4); box-shadow:inset 0 0 0 1px var(--line); }
.macro i{ display:block; height:100%; }
.macro .p{ background:var(--wasabi); } .macro .c{ background:var(--ember); } .macro .f{ background:var(--plum); }
.macro-legend{ display:flex; gap:16px; margin-top:10px; font-size:.8rem; color:var(--mute); }
.macro-legend b{ color:var(--paper); font-variant-numeric:tabular-nums; }
.macro-legend span::before{ content:''; display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; }
.macro-legend .lp::before{ background:var(--wasabi); } .macro-legend .lc::before{ background:var(--ember); } .macro-legend .lf::before{ background:var(--plum); }

/* --------------------------------------------------------- 10. koraki, tabs */
.steps{ counter-reset:s; display:grid; gap:2px; }
.step{ counter-increment:s; position:relative; padding:26px 26px 26px 84px; background:var(--ink-2); border:1px solid var(--line); }
.steps .step:first-child{ border-radius:var(--r-md) var(--r-md) 0 0; }
.steps .step:last-child{ border-radius:0 0 var(--r-md) var(--r-md); }
.step::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:26px; top:24px;
  font:600 1.4rem/1 var(--f-display); color:var(--wasabi); opacity:.85;
}
.step h4{ margin-bottom:6px; }
.step p{ margin:0; color:var(--paper-2); }
@media (max-width:620px){ .step{ padding:20px 18px 20px 62px; } .step::before{ left:18px; top:20px; } }

.tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:26px; }
.tab{ padding:11px 18px; border-radius:var(--r-pill); background:var(--ink-2); border:1px solid var(--line);
  font:600 .88rem/1 var(--f-body); color:var(--paper-2); cursor:pointer; transition:all .25s var(--ease); }
.tab:hover{ border-color:var(--line-2); color:var(--paper); }
.tab.on{ background:var(--wasabi); color:var(--wasabi-ink); border-color:transparent; }
.panelx{ display:none; } .panelx.on{ display:block; animation:fade .45s var(--ease-out); }
@keyframes fade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.acc{ border-top:1px solid var(--line); }
.acc__i{ border-bottom:1px solid var(--line); }
.acc__q{ width:100%; text-align:left; background:none; border:0; padding:22px 44px 22px 0; cursor:pointer;
  font:600 1.04rem/1.4 var(--f-body); position:relative; }
.acc__q::after{ content:'+'; position:absolute; right:8px; top:50%; transform:translateY(-50%); font:600 1.5rem/1 var(--f-display); color:var(--wasabi); transition:transform .3s var(--ease); }
.acc__i.open .acc__q::after{ transform:translateY(-50%) rotate(45deg); }
.acc__a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease-out); }
.acc__a > div{ padding:0 0 22px; color:var(--paper-2); max-width:var(--w-text); }

/* ------------------------------------------------------------ 11. obrazci */
.field{ display:block; margin-bottom:18px; }
.field > span{ display:block; font:600 .82rem/1 var(--f-body); letter-spacing:.04em; color:var(--paper-2); margin-bottom:8px; }
.inp, select.inp, textarea.inp{
  width:100%; padding:14px 16px; background:var(--ink-2); color:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-sm); transition:border-color .2s, box-shadow .2s, background .2s;
}
.inp:hover{ border-color:var(--line-2); }
.inp:focus{ outline:none; border-color:var(--wasabi); box-shadow:0 0 0 3px color-mix(in srgb, var(--wasabi) 22%, transparent); }
textarea.inp{ min-height:120px; resize:vertical; }
select.inp{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23838E86' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:18px; padding-right:40px; }
.hint{ font-size:.8rem; color:var(--mute); margin-top:6px; }
.err{ color:var(--danger); font-size:.85rem; margin-top:6px; }

/* izbirne ploščice */
.choices{ display:grid; gap:10px; }
.choices--2{ grid-template-columns:repeat(2,1fr); }
.choices--3{ grid-template-columns:repeat(3,1fr); }
.choice{ position:relative; display:flex; gap:12px; align-items:flex-start; padding:16px; background:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; transition:all .22s var(--ease); }
.choice:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice__b{ flex:0 0 auto; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line-2); margin-top:2px;
  display:grid; place-items:center; transition:all .2s var(--ease); }
.choice__b::after{ content:''; width:9px; height:9px; border-radius:3px; background:var(--wasabi); transform:scale(0); transition:transform .2s var(--ease-out); }
.choice:has(input:checked){ border-color:var(--wasabi); background:color-mix(in srgb, var(--wasabi) 8%, var(--ink-2)); }
.choice:has(input:checked) .choice__b{ border-color:var(--wasabi); }
.choice:has(input:checked) .choice__b::after{ transform:scale(1); }
.choice.on{ border-color:var(--wasabi); background:color-mix(in srgb, var(--wasabi) 8%, var(--ink-2)); }
.choice.on .choice__b::after{ transform:scale(1); }
.choice b{ display:block; font-size:.98rem; }
.choice small{ color:var(--mute); font-size:.83rem; line-height:1.45; display:block; margin-top:2px; }
.choice--icon{ flex-direction:column; align-items:center; text-align:center; padding:20px 14px; }
.choice--icon .choice__b{ display:none; }
.choice--icon svg{ width:30px; height:30px; margin-bottom:8px; }
@media (max-width:620px){ .choices--2,.choices--3{ grid-template-columns:1fr; } }

/* --------------------------------------------------------- 12. obvestila */
.note{ padding:16px 18px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--ink-2); display:flex; gap:12px; align-items:flex-start; }
.note--ok{ border-color:color-mix(in srgb, var(--ok) 40%, transparent); background:color-mix(in srgb, var(--ok) 9%, var(--ink-2)); }
.note--err{ border-color:color-mix(in srgb, var(--danger) 45%, transparent); background:color-mix(in srgb, var(--danger) 9%, var(--ink-2)); }
.note--warn{ border-color:color-mix(in srgb, var(--ember) 45%, transparent); background:color-mix(in srgb, var(--ember) 9%, var(--ink-2)); }
.note svg{ width:20px; height:20px; flex:0 0 auto; margin-top:2px; }

/* ---------------------------------------------------------- 13. animacije */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.09s; } .reveal[data-d="2"]{ transition-delay:.18s; }
.reveal[data-d="3"]{ transition-delay:.27s; } .reveal[data-d="4"]{ transition-delay:.36s; }
.reveal[data-d="5"]{ transition-delay:.45s; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

.marquee{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; background:var(--ink-2); }
.marquee__t{ display:flex; gap:44px; width:max-content; animation:slide 34s linear infinite; }
.marquee span{ font:600 1.02rem/1 var(--f-display); text-transform:uppercase; letter-spacing:.04em; color:var(--paper-2); display:inline-flex; align-items:center; gap:44px; }
.marquee span::after{ content:''; width:7px; height:7px; background:var(--wasabi); transform:rotate(45deg); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* --------------------------------------------------------------- 14. noga */
.foot{ border-top:1px solid var(--line); background:var(--ink-2); padding:64px 0 32px; position:relative; z-index:1; }
.foot__grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; }
.foot h5{ font:600 .78rem/1 var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--mute); margin:0 0 16px; }
.foot a{ display:block; padding:5px 0; color:var(--paper-2); font-size:.93rem; }
.foot a:hover{ color:var(--wasabi); }
.foot__bot{ margin-top:44px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--mute); font-size:.84rem; }
@media (max-width:820px){ .foot__grid{ grid-template-columns:1fr 1fr; } }

/* ------------------------------------------------------------- 15. pečat */
.seal{ width:150px; height:150px; }
.seal text{ font:600 9.4px var(--f-body); letter-spacing:.28em; fill:var(--mute); text-transform:uppercase; }
.seal .ring{ animation:spin 34s linear infinite; transform-origin:50% 50%; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* --------------------------------------------------------- 16. pripomočki */
.hide{ display:none !important; }
.nowrap{ white-space:nowrap; }
.rel{ position:relative; }
.mt0{ margin-top:0; } .mt1{ margin-top:8px; } .mt2{ margin-top:16px; } .mt3{ margin-top:24px; } .mt4{ margin-top:32px; } .mt5{ margin-top:48px; }
.mb0{ margin-bottom:0; } .mb2{ margin-bottom:16px; } .mb3{ margin-bottom:24px; } .mb4{ margin-bottom:32px; }
.tar{ text-align:right; } .tac{ text-align:center; }
.w100{ width:100%; }
.strike{ text-decoration:line-through; color:var(--mute); }
.skew{ transform:skewX(-10deg); } .skew > *{ transform:skewX(10deg); }

/* ===================================================================
   17. Sestavine pristajalne strani
   =================================================================== */

/* produktna kartica čez hero */
.peek{ position:relative; }
.peek__card{ position:relative; z-index:2; transform:rotate(-1.1deg); box-shadow:var(--shadow-2); }
.peek__card:hover{ transform:rotate(0deg) translateY(-4px); }
.peek__row{ display:flex; gap:13px; align-items:flex-start; padding:13px 0; border-top:1px solid var(--line); }
.peek__ic{ flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border-radius:var(--r-sm); background:var(--ink-4); box-shadow:inset 0 0 0 1px var(--line); color:var(--wasabi); }
.peek__ic svg{ width:17px; height:17px; }
.peek__tag{ position:absolute; left:-14px; bottom:-18px; z-index:3; background:var(--ember); color:#180702;
  padding:9px 16px; border-radius:var(--r-sm); font:700 .78rem/1 var(--f-body); letter-spacing:.06em; text-transform:uppercase; box-shadow:var(--shadow-1); }
@media (max-width:900px){ .peek__card{ transform:none; } .peek__tag{ left:auto; right:8px; } }

/* vrstice dnevov */
.dayrows{ display:grid; gap:1px; background:var(--line); border-radius:var(--r-sm); overflow:hidden; }
.dayrow{ display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; padding:11px 13px; background:var(--ink-2); }
.dayrow__d{ font:600 .72rem/1 var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }
.dayrow__t{ font-size:.94rem; }

/* vrstice obrokov */
.mealrows{ display:grid; gap:1px; background:var(--line); border-radius:var(--r-sm); overflow:hidden; }
.mealrow{ display:grid; grid-template-columns:70px 1fr auto; gap:12px; align-items:center; padding:11px 13px; background:var(--ink-2); }
.mealrow__s{ font:600 .7rem/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.mealrow__n{ font-size:.93rem; }
.mealrow__k{ font-size:.86rem; color:var(--paper-2); }
.mealrow__k::after{ content:' kcal'; font-size:.72rem; color:var(--mute); }
@media (max-width:520px){ .mealrow{ grid-template-columns:1fr auto; } .mealrow__s{ display:none; } }

/* primerjalna tabela */
.cmp{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--ink); }
.cmp__row{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.35fr; gap:12px; padding:15px 20px; border-top:1px solid var(--line); align-items:center; }
.cmp__row:first-child{ border-top:0; }
.cmp__row--head{ background:var(--ink-3); font:600 .74rem/1.3 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.cmp__l{ font-size:.94rem; font-weight:550; }
.cmp__v{ font-size:.88rem; color:var(--mute); }
.cmp__us{ color:var(--paper); font-weight:600; display:flex; align-items:flex-start; gap:8px; }
.cmp__row--head .cmp__us{ color:var(--wasabi); }
.cmp__ok{ width:15px; height:15px; flex:0 0 auto; color:var(--wasabi); margin-top:3px; }
.cmp__row:nth-child(even){ background:color-mix(in srgb, var(--ink-2) 60%, transparent); }
@media (max-width:820px){
  .cmp__row{ grid-template-columns:1fr; gap:6px; padding:16px 18px; }
  .cmp__row--head{ display:none; }
  .cmp__v{ font-size:.84rem; }
  .cmp__v:not(.cmp__us)::before{ content:'konkurenca: '; color:var(--mute); }
}

/* klepet */
.chatbox{ display:flex; flex-direction:column; gap:10px; }
.bub{ max-width:92%; padding:13px 16px; border-radius:14px; background:var(--ink-3); font-size:.93rem; line-height:1.55;
  box-shadow:inset 0 0 0 1px var(--line); border-bottom-left-radius:4px; }
.bub--me{ align-self:flex-end; background:color-mix(in srgb, var(--wasabi) 16%, var(--ink-3)); border-bottom-left-radius:14px; border-bottom-right-radius:4px; }

/* kljukice */
.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ticks li{ position:relative; padding-left:26px; font-size:.92rem; color:var(--paper-2); }
.ticks li::before{
  content:''; position:absolute; left:0; top:5px; width:15px; height:15px;
  background:var(--wasabi); clip-path:polygon(14% 47%,0 61%,40% 100%,100% 22%,86% 8%,38% 66%);
}

/* zaključni klic */
.cta{ position:relative; overflow:hidden; padding:clamp(76px,10vw,140px) 0; }
.cta::before{
  content:''; position:absolute; left:50%; top:50%; width:1000px; height:1000px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, color-mix(in srgb, var(--wasabi) 12%, transparent), transparent 60%);
}
.cta .lead{ margin-inline:auto; }

/* natis */
@media print{
  .head,.foot,.cta,.marquee,.btn,.icon-btn{ display:none !important; }
  body{ background:#fff; color:#111; }
  .card{ border-color:#ddd; box-shadow:none; }
  section{ padding:12px 0; }
}

/* dokumentne strani (pogoji, zasebnost) */
.doc h3{ font:700 1.12rem/1.35 var(--f-body); text-transform:none; letter-spacing:0; color:var(--paper); }
.doc p, .doc li{ color:var(--paper-2); }
.doc p{ max-width:var(--w-text); }
.doc .ticks{ margin-bottom:1em; }

/* ===================================================================
   18. Mobilni popravki (prelivanje in gostota glave)
   =================================================================== */
/* Mrežni elementi se brez tega ne smejo skrčiti pod min-content in
   7-dnevni trak potisne celoten vsebnik čez rob zaslona. */
.grid > *, .split > *, .hero__in > *, .week > *{ min-width:0; }
.week{ min-width:0; }
.peek__card, .card{ min-width:0; }

@media (max-width:620px){
  .week{ gap:4px; }
  .day{ padding:8px 3px; }
  .day__d{ font-size:.58rem; letter-spacing:.06em; }
  .day__t{ font-size:.86rem; }
  .hero__proof{ gap:18px 22px; }
  .stat__n{ font-size:2.1rem; }
  h1,.h1{ font-size:clamp(2.3rem,10vw,3rem); }
  .peek__row{ gap:10px; }
  .macro-legend{ gap:12px; font-size:.74rem; }
}
@media (max-width:480px){
  .head__in{ gap:10px; height:62px; }
  .logo{ font-size:1.05rem; }
  .logo svg{ width:24px; height:24px; flex:0 0 auto; }
  .head__act{ gap:6px; }
  .head__act .btn{ padding:11px 13px; font-size:.8rem; }
  .head__act [data-theme-toggle]{ display:none; }
  .icon-btn{ width:34px; height:34px; }
}

.cta-short{ display:none; }
@media (max-width:480px){ .cta-long{ display:none; } .cta-short{ display:inline; } }