/* ============================================================
   e-motiontaxi  ·  emotiontaxi.sk
   Playful Consumer / Delightful App  ·  Emócia v pohybe
   Palette: #6D3BFF violet · #FF2B7A magenta · #0A0F2C navy
            #F3F4F7 off-white · #8B9099 grey
   Theme: art-directed light base with deliberate navy "brand
   moments" (appka + záverečné CTA), per brand board.
   ============================================================ */

/* ---------- Font: Urbanist (variable, self-hosted) ---------- */
@font-face{
  font-family:'Urbanist';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/urbanist-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:'Urbanist';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/urbanist-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: Chillax (variable, self-hosted) — headings only ---------- */
@font-face{
  font-family:'Chillax';
  font-style:normal;
  font-weight:200 700;
  font-display:swap;
  src:url('../fonts/chillax/fonts/WEB/fonts/Chillax-Variable.woff2') format('woff2'),
      url('../fonts/chillax/fonts/WEB/fonts/Chillax-Variable.woff') format('woff'),
      url('../fonts/chillax/fonts/WEB/fonts/Chillax-Variable.ttf') format('truetype');
}

/* ---------- Tokens ---------- */
:root{
  --violet:#6D3BFF;
  --violet-600:#5A2BE6;
  --magenta:#FF2B7A;
  --navy:#0A0F2C;
  --navy-2:#101740;
  --offwhite:#F3F4F7;
  --grey:#8B9099;
  --white:#FFFFFF;

  --ink:#0A0F2C;
  --ink-60:#4a5069;
  --line:rgba(10,15,44,.10);

  --grad:linear-gradient(120deg,#6D3BFF 0%,#8A3BFF 40%,#FF2B7A 100%);
  --grad-soft:linear-gradient(120deg,rgba(109,59,255,.14),rgba(255,43,122,.14));

  --r-card:24px;
  --r-sm:16px;
  --r-pill:999px;

  --sh-soft:0 18px 50px -26px rgba(10,15,44,.30);
  --sh-card:0 24px 60px -34px rgba(10,15,44,.35);
  --sh-brand:0 26px 60px -22px rgba(109,59,255,.50);
  --sh-mag:0 26px 60px -24px rgba(255,43,122,.45);

  --ease-drive:cubic-bezier(.2,.7,.2,1);   /* zrýchlenie a dobeh vozidla */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.32s;

  --wrap:1200px;
  --header-h:78px; /* reálna výška plávajúceho pillu: padding-top 14 + inner 64 */
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;
  font-family:'Urbanist',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--offwhite);
  line-height:1.6;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-family:'Chillax','Urbanist',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;line-height:1.05;font-weight:700;letter-spacing:-.02em;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
input{font-family:inherit;}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px;border-radius:6px;}
.sprite{position:absolute;width:0;height:0;overflow:hidden;}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px;}
.section{padding-block:clamp(72px,10vw,132px);}
section[id],span[id]{scroll-margin-top:calc(var(--header-h) + 16px);}
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  background-size:180% 180%;
}
.nowrap{white-space:nowrap;}

/* icons */
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;}

/* ---------- Section heads ---------- */
.section__head{max-width:640px;margin-bottom:clamp(40px,5vw,64px);}
.section__title{font-size:clamp(1.9rem,4.2vw,3.1rem);}
.section__sub{margin-top:18px;font-size:1.075rem;color:var(--ink-60);max-width:60ch;}
.section__sub--light{color:rgba(255,255,255,.72);}

/* ---------- Eyebrow (technický label so speed-lines) ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--violet);
  margin:0 0 20px;
}
.eyebrow--light{color:#C9B6FF;}
.eyebrow__lines{display:inline-flex;gap:3px;}
.eyebrow__lines i{
  width:14px;height:2.5px;border-radius:2px;background:currentColor;
  transform:skewX(-24deg);opacity:.9;
}
.eyebrow__lines i:nth-child(2){width:10px;opacity:.6;}
.eyebrow__lines i:nth-child(3){width:7px;opacity:.35;}

/* ============================================================ BUTTONS ============================================================ */
.btn{
  --tint:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 24px;border-radius:var(--r-pill);border:0;
  font-weight:700;font-size:1rem;letter-spacing:-.01em;white-space:nowrap;
  color:var(--ink);background:var(--tint);
  transition:transform var(--dur) var(--ease-drive),box-shadow var(--dur) var(--ease-drive),background var(--dur) var(--ease-drive),border-color var(--dur) var(--ease-drive);
  will-change:transform;
}
.btn .ico{width:20px;height:20px;stroke-width:2;}
.btn--lg{padding:18px 32px;font-size:1.075rem;}
.btn--block{width:100%;}

.btn--primary{
  color:#fff;
  background:var(--grad);background-size:180% 180%;
  box-shadow:var(--sh-brand);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 30px 66px -20px rgba(109,59,255,.62);}
.btn--primary:active{transform:translateY(0) scale(.98);}

#senset-form-submit-btn {
  color:#fff;
  background:var(--grad);background-size:180% 180%;
  box-shadow:var(--sh-brand);
}

#senset-form-submit-btn:hover{transform:translateY(-2px);box-shadow:0 30px 66px -20px rgba(109,59,255,.62);}
#senset-form-submit-btn:active{transform:translateY(0) scale(.98);}

#continue_btn {
  color:#fff;
  background:var(--grad);background-size:180% 180%;
  box-shadow:var(--sh-brand);
}

#continue_btn:hover{transform:translateY(-2px);box-shadow:0 30px 66px -20px rgba(109,59,255,.62);}
#continue_btn:active{transform:translateY(0) scale(.98);}

#appka #senset-form {
  margin-bottom: 25px;
}

#appka #senset-form .submit-button {
  background: transparent !important;
}

#appka #senset-form .form-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

#appka #senset-form .form-group label {
  min-width: 190px;
}

#appka #senset-form .form-group input.form-control {
  padding:14px 24px;border-radius:var(--r-pill);border:0;
  min-width: 300px;
}

#appka #senset-form .stop-add-button {
  margin-left: 200px;
}

.btn--ghost{
  background:var(--white);color:var(--ink);
  border:1.5px solid var(--line);
  box-shadow:var(--sh-soft);
}
.btn--ghost:hover{transform:translateY(-2px);border-color:var(--violet);color:var(--violet);}
.btn--ghost:active{transform:translateY(0) scale(.98);}

.btn--ghost-light{
  background:rgba(255,255,255,.06);color:#fff;
  border:1.5px solid rgba(255,255,255,.28);box-shadow:none;
}
.btn--ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff;}

.btn--phone{
  padding:11px 18px;font-size:.95rem;
  background:var(--white);border:1.5px solid var(--line);color:var(--ink);
  box-shadow:var(--sh-soft);
}
.btn--phone .ico{stroke:var(--violet);}
.btn--phone:hover{transform:translateY(-2px);border-color:var(--violet);}

/* Hero CTA: pill s bielym kruhovým šípkovým odznakom (podľa referencie) */
.btn--magenta{
  color:#fff;
  background:linear-gradient(120deg,#FF2B7A 0%,#FF4D8F 100%);background-size:180% 180%;
  box-shadow:var(--sh-mag);
}
.btn--magenta:hover{transform:translateY(-2px);box-shadow:0 30px 66px -20px rgba(255,43,122,.6);}
.btn--magenta:active{transform:translateY(0) scale(.98);}

.btn--hero{
  min-width:clamp(210px,20vw,246px);
  padding:9px 9px 9px 28px;gap:18px;font-size:1.075rem;
  justify-content:space-between;
}
.btn__label{padding-block:6px;}
.btn__arrow{
  display:inline-grid;place-items:center;flex:none;
  width:46px;height:46px;border-radius:50%;background:#fff;
  transition:transform var(--dur) var(--ease-drive);
}
.btn__arrow .ico{width:22px;height:22px;stroke-width:2.4;stroke:var(--navy);}
.btn--hero:hover .btn__arrow{transform:translateX(4px);}

/* ============================================================ HEADER / NAV ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  padding-top:14px;
  padding-right: 14px;
  padding-left: 14px;
  /* header nezaberá miesto v toku → pill sa vznáša nad hero sekciou */
  margin-bottom:calc(-1 * var(--header-h));
}
/* celý header ako plávajúci pill */
.header__inner{
  display:flex;align-items:center;gap:24px;min-height:64px;
  padding-right:8px; /* telefónne tlačidlo tesne k pravému okraju pillu (namiesto 24px) */
  border:1.5px solid transparent;border-radius:var(--r-pill);
  /* poloprehľadná výplň (padding-box) + viacnásobný violet↔magenta prechod na orámovaní (border-box) */
  background:
    linear-gradient(rgba(243,244,247,.82),rgba(243,244,247,.82)) padding-box,
    linear-gradient(110deg,var(--violet),var(--magenta) 28%,var(--violet) 52%,var(--magenta) 76%,var(--violet)) border-box;
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  /* jemné podsvietenie v hlavných farbách */
  box-shadow:
    0 14px 40px -14px rgba(109,59,255,.36),
    0 8px 26px -12px rgba(255,43,122,.28),
    inset 0 1px 0 rgba(255,255,255,.55);
  transition:box-shadow .3s ease,background .3s ease;
}
.site-header.is-stuck .header__inner{
  background:
    linear-gradient(rgba(243,244,247,.94),rgba(243,244,247,.94)) padding-box,
    linear-gradient(110deg,var(--violet),var(--magenta) 28%,var(--violet) 52%,var(--magenta) 76%,var(--violet)) border-box;
  box-shadow:
    0 18px 48px -14px rgba(109,59,255,.42),
    0 10px 30px -12px rgba(255,43,122,.32),
    inset 0 1px 0 rgba(255,255,255,.6);
}

.logo{display:inline-flex;align-items:center;}
.logo img{display:block;height:38px;width:auto;transition:transform var(--dur) var(--ease-drive);}
.logo:hover img{transform:scale(1.03);}
.site-footer .logo img{height:40px;}

.nav{display:flex;gap:4px;margin-left:auto;}
.nav a{
  padding:8px 16px;border-radius:var(--r-pill);font-weight:600;font-size:.98rem;color:var(--ink-60);
  transition:color .25s var(--ease-out),background .25s var(--ease-out);
}
.nav a:hover{color:var(--ink);background:rgba(109,59,255,.08);}
.header__cta{margin-left:8px;}

.nav-toggle{display:none;width:46px;height:46px;border:1.5px solid var(--line);border-radius:14px;background:var(--white);padding:0;flex-direction:column;gap:5px;align-items:center;justify-content:center;}
.nav-toggle span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease-out),opacity .2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{display:none;flex-direction:column;gap:4px;margin:10px 18px 0;padding:14px;border:1px solid var(--line);border-radius:24px;background:rgba(243,244,247,.96);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);box-shadow:0 22px 54px -20px rgba(10,15,44,.32);}
.mobile-nav a{padding:13px 8px;font-weight:600;font-size:1.05rem;color:var(--ink);border-bottom:1px solid var(--line);}
.mobile-nav a.btn{margin-top:12px;border-bottom:0;color:#fff;}

/* ============================================================ HERO ============================================================ */
.hero{
  --hero-pad:clamp(24px,5vw,104px);
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;
  min-height:100dvh;
  padding-block:clamp(24px,4vw,48px);
}

/* Art-directed foto pozadia (elektromobil v pohybe) */
.hero__bg{position:absolute;inset:0;z-index:-2;display:block;}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:right center;
  transform:scale(1.02);transform-origin:70% 50%;
  transition:transform 1.6s var(--ease-out);
}
.hero.is-ready .hero__bg img{transform:scale(1);}

/* Scrim: udrží ľavú textovú zónu čitateľnú, foto vpravo necháva dýchať */
.hero__scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,var(--offwhite) 4%,rgba(243,244,247,.86) 26%,rgba(243,244,247,.45) 34%,rgba(243,244,247,0) 50%);
}

/* Zjemnenie prechodu do sekcie „preco": foto hero sa smerom nadol plynule rozplynie
   do rovnakej --offwhite, na ktorej sedí ďalšia sekcia (inward masking gradient).
   Fade je zámerne dlhý a mäkký a spolu s .pillars::before prekrýva samotný zlom
   z oboch strán, takže prechod nikde nekončí ostrou hranou. */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(200px,34vh,420px);
  z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(243,244,247,0)    0%,
    rgba(243,244,247,.12) 30%,
    rgba(243,244,247,.34) 52%,
    rgba(243,244,247,.60) 70%,
    rgba(243,244,247,.82) 85%,
    var(--offwhite)      100%);
}

/* Jemné animované speed-lines na bielej (ľavej) ploche pod copy (motion = jazyk značky) */
.hero__streaks{position:absolute;left:var(--hero-pad);right:auto;top:auto;bottom:7%;width:min(75%,1080px);height:120px;z-index:0;pointer-events:none;overflow:hidden;}
.hero__streaks span{
  position:absolute;left:0;height:4px;border-radius:4px;transform-origin:left center;
  background:linear-gradient(90deg,transparent,rgba(109,59,255,.55) 40%,var(--magenta));
  opacity:0;
}
.hero__streaks span:nth-child(1){top:16%;width:70%;animation:streak 3.4s var(--ease-drive) .0s infinite;}
.hero__streaks span:nth-child(2){top:40%;width:96%;animation:streak 3.4s var(--ease-drive) .5s infinite;}
.hero__streaks span:nth-child(3){top:64%;width:62%;animation:streak 3.4s var(--ease-drive) 1s infinite;}
.hero__streaks span:nth-child(4){top:86%;width:84%;animation:streak 3.4s var(--ease-drive) 1.4s infinite;}
@keyframes streak{0%{transform:translateX(-16%) scaleX(.4);opacity:0;}25%{opacity:.8;}100%{transform:translateX(70%) scaleX(1);opacity:0;}}

/* posun celého hero obsahu viac doľava na bielu časť (mimo centrovaného .wrap) */
.hero__inner{position:relative;z-index:1;width:100%;max-width:none;margin-inline:0;padding-inline:var(--hero-pad);}
/* hero copy ako pevný „sticker" panel (app-card jazyk, no bez náklonu) –
   povýši primárny obsah nad fotkou a zlepší čitateľnosť; drží brand systém. */
.hero__copy{
  --c:var(--violet);
  position:relative;z-index:1;
  width:fit-content;max-width:min(760px,62vw);
  padding:clamp(24px,3vw,42px) clamp(22px,3vw,40px) clamp(28px,3.2vw,44px);
  background:rgba(251,252,255,.95);
  border:2px solid var(--c);
  border-radius:clamp(24px,2.4vw,30px);
  box-shadow:9px 12px 0 -2px color-mix(in srgb,var(--c) 30%,#fff),
             0 30px 54px -26px color-mix(in srgb,var(--c) 68%,transparent);
  -webkit-backdrop-filter:blur(2px) saturate(120%);
  backdrop-filter:blur(2px) saturate(120%);
}

.hero__eyebrow{
  display:inline-flex;align-items:center;
  font-size:clamp(.82rem,1.1vw,.95rem);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet);margin-bottom:14px;
}
.hero__title{letter-spacing:-.03em;}
.hero__title-1,.hero__title-2{display:block;font-size:clamp(1.95rem,3.65vw,3.3rem);line-height:1.03;white-space:nowrap;}
.hero__title-1{color:var(--navy);}
.hero__title-2{margin-top:.04em;}
/* "emócia" = magenta (brand rule); jemný pohyblivý odtieň, no jasne ružový */
.hero__title-2.grad-text{background-image:linear-gradient(115deg,#FF2B7A 0%,#FF4D8F 55%,#8A3BFF 130%);background-size:180% 180%;}
.hero__lead{margin-top:26px;font-size:clamp(1.22rem,2vw,1.62rem);color:var(--ink-60);font-weight:600;}
.hero__lead strong{color:var(--magenta);font-weight:800;}
.hero__actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px;margin-top:38px;}
@media (max-width:424px){
  .hero__title-1,.hero__title-2{font-size:clamp(1.7rem,7.5vw,2.1rem);}
  .hero__lead{font-size:1.1rem;}
}
.hero__app{position:relative;display:inline-flex;}

/* ============================================================ PREČO / PILIERE (3D sticker karty) ============================================================ */
.pillars{
  position:relative;overflow:hidden;
  background:var(--offwhite) url('../images/section-backgrounds/preco-my-desktop.png') center center/cover no-repeat;
}
/* Druhá polovica plynulého prechodu z hero: vrch sekcie „preco" sa zhora rozplynie
   z rovnakej --offwhite, takže efekt preteká cez zlom a nekončí na ňom.
   ::before je prvým potomkom → leží nad pozadím, ale pod obsahom (.wrap ostáva ostrý). */
.pillars::before{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(160px,26vh,320px);
  z-index:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(243,244,247,0)    0%,
    rgba(243,244,247,.34) 40%,
    rgba(243,244,247,.68) 66%,
    rgba(243,244,247,.90) 85%,
    var(--offwhite)      100%);
}
.pillars > .wrap{position:relative;z-index:1;}
/* spodný okraj „preco" sa rozplynie do offwhite → plynulý zlom do „ako to funguje" */
.pillars::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(120px,18vh,240px);
  z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(243,244,247,0)   0%,
    rgba(243,244,247,.5)  55%,
    rgba(243,244,247,.85) 82%,
    var(--offwhite)      100%);
}
.pillars__head{max-width:600px;margin-bottom:clamp(32px,4vw,52px);}
.pillars__title{font-size:clamp(2.5rem,5.6vw,4.2rem);line-height:.98;letter-spacing:-.03em;color:var(--navy);}
.pillars__accent{color:var(--violet);}
.pillars__rule{display:block;width:66px;height:6px;border-radius:6px;background:var(--grad);margin-top:22px;}
.pillars .section__sub{margin-top:22px;}

/* stage */
.pcards{position:relative;}

/* karta – biela výplň + farebný border + tvrdý odsadený tieň = 3D nálepka */
.pcard{
  --c:var(--violet);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  background:#fff;border:2.5px solid var(--c);border-radius:38px;
  padding:30px 26px;
  transform:rotate(var(--rot,0deg));
  transition:transform .45s var(--ease-drive),box-shadow .45s var(--ease-drive);
  box-shadow:10px 13px 0 -2px color-mix(in srgb,var(--c) 24%,#fff),
             0 32px 46px -26px color-mix(in srgb,var(--c) 55%,transparent);
  will-change:transform;
}
.pcard__icon{display:inline-flex;color:var(--c);transition:transform .45s var(--ease-drive);}
.pcard__icon .ico{width:clamp(48px,4.4vw,68px);height:clamp(48px,4.4vw,68px);stroke-width:1.6;}
.pcard h3{font-size:clamp(1.35rem,1.9vw,1.75rem);color:var(--c);letter-spacing:-.02em;line-height:1;margin-bottom:8px;}
.pcard p{color:var(--ink-60);font-size:1rem;font-weight:600;line-height:1.3;}

.pcard--electric{--c:var(--violet);--rot:-4deg;border-radius:42px 42px 34px 42px;}
.pcard--emotion{--c:var(--magenta);--rot:3deg;border-radius:38px;}
.pcard--motion{--c:var(--navy);--rot:-3deg;}
.pcard--motion h3{color:var(--navy);}
.pcard--local{--c:var(--violet);--rot:4deg;border-radius:50% 50% 34px 34px / 44% 44% 12% 12%;}

/* Pohyb – horizontálna „pilulka" (ikona vľavo, text vpravo) */
.pcard--wide{flex-direction:row;text-align:left;gap:20px;border-radius:999px;padding:24px 38px;}
.pcard--wide .pcard__text h3{margin-bottom:4px;}

/* hover: karta sa narovná, nadvihne, tieň narastie, ikona ožije */
.pcard:hover{
  transform:rotate(0deg) translateY(-10px) scale(1.035);z-index:6;
  box-shadow:14px 18px 0 -2px color-mix(in srgb,var(--c) 34%,#fff),
             0 46px 64px -22px color-mix(in srgb,var(--c) 60%,transparent);
}
.pcard:hover .pcard__icon{transform:translateY(-3px) rotate(-6deg) scale(1.1);}
.pcard:active{transform:rotate(0deg) translateY(-4px) scale(1.01);}

/* speed-line prechody medzi kartami */
.pcards__streak{position:absolute;z-index:0;display:flex;flex-direction:column;gap:9px;pointer-events:none;}
.pcards__streak i{
  display:block;height:3px;border-radius:3px;transform-origin:left center;
  background:linear-gradient(90deg,transparent,var(--violet) 45%,var(--magenta));
  animation:dash 3s var(--ease-drive) infinite;
}
.pcards__streak i:nth-child(1){width:64px;animation-delay:0s;}
.pcards__streak i:nth-child(2){width:92px;animation-delay:.4s;}
.pcards__streak i:nth-child(3){width:52px;animation-delay:.8s;}
@keyframes dash{0%{transform:translateX(-24%) scaleX(.4);opacity:0;}30%{opacity:.85;}100%{transform:translateX(60%) scaleX(1);opacity:0;}}

/* scatter kompozícia (desktop) */
@media (min-width:961px){
  .pcards{height:clamp(440px,42vw,600px);}
  .pcard{position:absolute;}
  .pcard--electric{left:1%;top:14%;width:22%;}
  .pcard--emotion{left:43%;top:0;width:20%;}
  .pcard--motion{left:38%;top:61%;width:31%;}
  .pcard--local{left:79%;top:10%;width:20%;}
  .pcards__streak--a{left:25.5%;top:25%;}
  .pcards__streak--b{left:66%;top:30%;}
  /* zvislý prechod Emócia -> Pohyb (rotácia otočí pruhy aj animáciu nadol) */
  .pcards__streak--c{left:49%;top:40%;transform:rotate(90deg);}
}

/* Konkrétne výhody dispečingu / služby — rad pod piliermi */
.perks{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin-top:clamp(30px,4.5vw,54px);
}
.perk{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:22px 24px;background:#fff;
  border:1.5px solid var(--line);border-radius:22px;
  box-shadow:0 22px 46px -30px rgba(10,15,44,.55);
  transition:transform .4s var(--ease-drive),box-shadow .4s var(--ease-drive),border-color .4s var(--ease-out);
}
.perk:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--violet) 40%,var(--line));
  box-shadow:0 32px 56px -28px rgba(109,59,255,.45);
}
.perk__ic{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:52px;height:52px;border-radius:15px;
  background:var(--grad-soft);color:var(--violet);
  transition:transform .4s var(--ease-drive);
}
.perk__ic .ico{width:28px;height:28px;stroke-width:1.7;}
.perk:hover .perk__ic{transform:rotate(-7deg) scale(1.08);}
.perk div strong{display:block;font-size:1.06rem;font-weight:800;color:var(--navy);line-height:1.15;margin-bottom:6px;letter-spacing:-.01em;}
.perk div span{display:block;color:var(--ink-60);font-size:.94rem;font-weight:600;line-height:1.42;}
@media (max-width:900px){
  .perks{grid-template-columns:1fr;gap:14px;max-width:560px;}

  /* 768–900px: desktopový navbar je ešte zobrazený, ale obsah sa nezmestí →
     skompaktujeme medzery, odkazy aj telefónne tlačidlo a zakážeme zalamovanie */
  .header__inner{gap:10px;}
  .nav{gap:2px;flex-wrap:nowrap;}
  .nav a{padding:7px 10px;font-size:.9rem;white-space:nowrap;}
  .header__cta{margin-left:4px;}
  .btn--phone{padding:9px 12px;font-size:.86rem;}
  .btn--phone span{white-space:nowrap;}
}

/* ============================================================ AKO TO FUNGUJE (časová os po ceste) ============================================================ */
.how{position:relative;background:var(--offwhite);padding-block:clamp(44px,5vw,76px) 0;overflow:hidden;}
/* horný okraj sa zladí s „preco" (offwhite ↔ offwhite) */
.how::before{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(110px,16vh,220px);
  z-index:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(243,244,247,0)   0%,
    rgba(243,244,247,.5)  55%,
    rgba(243,244,247,.85) 82%,
    var(--offwhite)      100%);
}
/* spodný okraj sa roztaví do navy → plynulý prechod do tmavej sekcie „appka" */
.how::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(90px,12vh,160px);
  z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(10,15,44,0)   0%,
    rgba(10,15,44,.28) 45%,
    rgba(10,15,44,.62) 72%,
    rgba(10,15,44,.86) 88%,
    var(--navy)       100%);
}

/* nadpis nad cestou (vyšší z-index → nezakryje ho stage); veľkosť ako v „preco" */
.how__head{max-width:860px;margin:0 auto;text-align:center;position:relative;z-index:2;}
.how__head .pillars__rule{margin-inline:auto;}
.how__head .section__sub{margin-inline:auto;}

/* stage = background cesta na CELÚ ŠÍRKU (100% 100% na presnú aspect-ratio → uzly sadnú na vlnu) */
.hsteps{
  position:relative;z-index:1;width:100%;aspect-ratio:1672/941;
  /* obrázok má prázdny horný pás → záporný margin pritiahne vlnu pod nadpis */
  margin-top:clamp(-300px,-19vw,-120px);
  background:url('../images/section-backgrounds/ako-to-funguje-desktop.png') center/100% 100% no-repeat;
}

/* uzol = kotviaci bod na súradnici vlny; číslo nad, popis pod */
.hstep{position:absolute;transform:translate(-50%,-50%);}
.hstep--1{left:22%;top:59.5%;}
.hstep--2{left:48%;top:73%;}
.hstep--3{left:76%;top:47.5%;}

.hstep__node{
  position:relative;z-index:2;display:grid;place-items:center;
  width:clamp(60px,6vw,92px);height:clamp(60px,6vw,92px);border-radius:50%;
  background:var(--navy);border:4px solid var(--violet);color:#fff;
  box-shadow:0 14px 30px -10px rgba(109,59,255,.6),0 0 0 8px rgba(109,59,255,.10);
  transition:transform .4s var(--ease-drive),box-shadow .4s var(--ease-drive);
}
.hstep__node .ico{width:clamp(28px,2.6vw,40px);height:clamp(28px,2.6vw,40px);stroke-width:1.7;}
.hstep--2 .hstep__node{border-color:var(--magenta);box-shadow:0 14px 30px -10px rgba(255,43,122,.55),0 0 0 8px rgba(255,43,122,.10);}

/* veľké obrysové číslo nad uzlom */
.hstep__num{
  position:absolute;left:50%;bottom:calc(50% + clamp(30px,3vw,46px));transform:translateX(-50%);
  font-size:clamp(3rem,5vw,5rem);font-weight:800;letter-spacing:-.04em;line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(109,59,255,.84);
  pointer-events:none;white-space:nowrap;
}
.hstep--2 .hstep__num{-webkit-text-stroke-color:rgba(255,43,122,.82);}

/* popis pod uzlom */
.hstep__label{
  position:absolute;left:50%;top:calc(50% + clamp(38px,4vw,58px));transform:translateX(-50%);
  text-align:center;width:max-content;max-width:min(38vw,300px);
}
.hstep__label h3{font-size:clamp(1.15rem,1.9vw,1.6rem);color:var(--navy);letter-spacing:-.02em;margin-bottom:6px;}
.hstep__label p{color:var(--ink-60);font-size:clamp(.9rem,1vw,1.02rem);font-weight:600;line-height:1.35;}

/* pulz + hover mikrointerakcie */
.hstep__node::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--violet);opacity:0;animation:nodePulse 2.8s var(--ease-out) infinite;
}
.hstep--2 .hstep__node::before{border-color:var(--magenta);}
@keyframes nodePulse{0%{transform:scale(1);opacity:.5;}70%{transform:scale(1.5);opacity:0;}100%{opacity:0;}}
.hstep:hover .hstep__node{transform:scale(1.1) translateY(-3px);}
.hstep:hover .hstep__node .ico{animation:none;}
.hstep__node .ico{transition:transform .4s var(--ease-drive);}
.hstep:hover .hstep__node .ico{transform:scale(1.12);}

/* ============================================================ APPKA (dark) ============================================================ */
.section--dark{background:var(--navy);color:#fff;position:relative;overflow:hidden;}
.section--dark .section__title{color:#fff;}

/* Reálna app vizualizácia tvorí scénu sekcie, ľavý scrim drží text čitateľný. */
.app{
  isolation:isolate;min-height:clamp(820px,68vw,980px);
  padding-block:clamp(88px,9vw,132px) clamp(154px,13vw,210px);
  background:#070c26;
}
.app::before{
  content:"";position:absolute;inset:-3%;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,12,38,.99) 0%,rgba(7,12,38,.96) 28%,rgba(7,12,38,.63) 48%,rgba(7,12,38,.08) 76%),
    linear-gradient(180deg,rgba(7,12,38,.18) 55%,rgba(7,12,38,.7) 100%),
    url('../images/generated-library/graphic-03-app-launch-custom.png') center/cover no-repeat;
  transform:scale(1.035);transform-origin:center;will-change:transform;
}
.app > .wrap{position:relative;z-index:2;}
/* spodok tmavej appky sa roztaví do offwhite a spojí sa s ekológiou */
.app::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(60px,8vh,100px);
  z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(243,244,247,0)    0%,
    rgba(243,244,247,.03) 14%,
    rgba(243,244,247,.09) 27%,
    rgba(243,244,247,.19) 39%,
    rgba(243,244,247,.32) 50%,
    rgba(243,244,247,.47) 61%,
    rgba(243,244,247,.63) 72%,
    rgba(243,244,247,.78) 82%,
    rgba(243,244,247,.90) 90%,
    rgba(243,244,247,.97) 96%,
    var(--offwhite)      100%);
}
.app__inner{display:block;}
.app__copy{max-width:570px;}
.app__media{display:none;}
.app .section__title{
  max-width:11ch;font-size: clamp(2.5rem, 5.6vw, 4.2rem);line-height:.94;
  letter-spacing:-.045em;text-wrap:balance;
}
.app .pillars__rule{margin-top:22px;}
.app .section__sub{margin-top:22px;max-width:48ch;color:rgba(255,255,255,.76);text-wrap:pretty;}

/* Pcard-inšpirované funkčné nálepky, rozložené v zámerne nepravidelnom rytme. */
.feats{
  display:grid;grid-template-columns:1.06fr .94fr;gap:15px 16px;
  margin:38px 0 34px;align-items:start;
}
.feats .app-card{
  --c:var(--violet);--rot:-1.7deg;
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:19px 18px 18px;
  color:var(--navy);background:rgba(251,252,255,.97);
  border:2px solid var(--c);border-radius:24px;
  transform:rotate(var(--rot));
  box-shadow:7px 9px 0 -1px color-mix(in srgb,var(--c) 34%,#fff),
             0 24px 44px -24px color-mix(in srgb,var(--c) 78%,transparent);
  transition:transform .42s var(--ease-drive),box-shadow .42s var(--ease-drive),opacity .5s var(--ease-out);
  will-change:transform;
}
.feats .app-card--track{--c:var(--magenta);--rot:2deg;margin-top:22px;}
.feats .app-card--price{--c:#8b61ff;--rot:1.2deg;margin-top:-5px;}
.feats .app-card--history{--c:var(--magenta);--rot:-1.5deg;margin-top:18px;}
.feats .app-card:hover{
  transform:rotate(0) translateY(-7px) scale(1.018);z-index:2;
  box-shadow:10px 13px 0 -1px color-mix(in srgb,var(--c) 42%,#fff),
             0 34px 52px -22px color-mix(in srgb,var(--c) 70%,transparent);
}
.feats .app-card:active{transform:rotate(0) translateY(-2px) scale(.995);}
.feats__ic{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:48px;height:48px;border-radius:15px;
  background:color-mix(in srgb,var(--c) 13%,#fff);color:var(--c);
  transition:transform .42s var(--ease-drive),background .42s var(--ease-drive);
}
.feats__ic > i{font-size:27px;line-height:1;}
.feats .app-card:hover .feats__ic{transform:rotate(-7deg) scale(1.08);background:color-mix(in srgb,var(--c) 18%,#fff);}
.feats .app-card strong{display:block;font-size:1.02rem;font-weight:800;line-height:1.12;margin:3px 0 7px;}
.feats .app-card div > span{display:block;color:var(--ink-60);font-size:.91rem;font-weight:600;line-height:1.35;}

@keyframes appCardIn{
  from{opacity:0;transform:translateY(34px) rotate(calc(var(--rot) * 1.8));}
  to{opacity:1;transform:rotate(var(--rot));}
}
@keyframes appSceneDrift{
  0%{transform:scale(1.035) translate3d(0,0,0);}
  100%{transform:scale(1.07) translate3d(-.7%,.45%,0);}
}
@media (prefers-reduced-motion:no-preference){
  .app.is-active::before{animation:appSceneDrift 14s ease-in-out infinite alternate;}
  .js .feats.is-in .app-card{animation:appCardIn .72s var(--ease-out) backwards;}
  .js .feats.is-in .app-card:nth-child(2){animation-delay:.09s;}
  .js .feats.is-in .app-card:nth-child(3){animation-delay:.17s;}
  .js .feats.is-in .app-card:nth-child(4){animation-delay:.25s;}
}

/* dispečing — výzva „stačí zavolať" nad formulárom */
.dispatch{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  max-width:560px;margin:0 0 26px;padding:22px 24px;border-radius:22px;
  background:linear-gradient(120deg,rgba(109,59,255,.20),rgba(255,43,122,.15));
  border:1px solid rgba(255,255,255,.18);
}
.dispatch__ic{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:50px;height:50px;border-radius:14px;
  background:rgba(255,255,255,.12);color:#fff;
}
.dispatch__ic .ico{width:26px;height:26px;stroke-width:1.7;}
.dispatch__text strong{display:block;font-size:1.08rem;font-weight:800;color:#fff;line-height:1.2;margin-bottom:6px;}
.dispatch__text p{color:rgba(255,255,255,.8);font-size:.96rem;font-weight:600;line-height:1.45;}

/* signup */
.signup{
  position:relative;max-width:560px;padding:24px;border-radius:26px;
  background:rgba(7,12,38,.74);border:1px solid rgba(255,255,255,.17);
  -webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 26px 70px -38px rgba(0,0,0,.9);
  transition:transform .35s var(--ease-drive),border-color .35s var(--ease-out),background .35s var(--ease-out);
}
.signup:focus-within{transform:translateY(-3px);border-color:rgba(201,182,255,.48);background:rgba(7,12,38,.86);}
.signup__label{display:block;font-weight:750;margin-bottom:12px;font-size:1.02rem;}
.signup__row{display:flex;gap:10px;}
.signup__input{
  flex:1;min-width:0;padding:15px 18px;border-radius:var(--r-pill);
  border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.09);
  color:#fff;font-size:1rem;font-weight:600;
  transition:border-color .25s var(--ease-out),background .25s var(--ease-out);
}
.signup__input::placeholder{color:rgba(255,255,255,.5);}
.signup__input:focus{outline:none;border-color:var(--magenta);background:rgba(255,255,255,.09);}
.signup__input.is-error{border-color:var(--magenta);}
.signup__msg{margin-top:12px;font-size:.94rem;font-weight:600;min-height:1.2em;}
.signup__msg.is-ok{color:#6ff0b0;}
.signup__msg.is-err{color:#ff9ec2;}
.signup .btn i{font-size:19px;transition:transform .3s var(--ease-drive);}
.signup .btn:hover i{transform:translateX(4px);}

.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.store{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 15px;border-radius:14px;font-weight:700;font-size:.9rem;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.88);
}
.store > i{font-size:20px;color:#d7caff;}
.store em{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy);background:linear-gradient(120deg,#C9B6FF,#FFB0D0);padding:3px 8px;border-radius:999px;}

/* ============================================================ EKOLÓGIA + LOKÁLNOSŤ (hero foto + plávajúce karty) ============================================================ */
.eco{position:relative;padding-block:0;background:var(--offwhite);overflow:hidden;}
/* horný okraj sa zladí s „preco" (offwhite ↔ offwhite) */
.eco::before{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(110px,16vh,220px);
  z-index:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(243,244,247,0)   0%,
    rgba(243,244,247,.5)  55%,
    rgba(243,244,247,.85) 82%,
    var(--offwhite)      100%);
}
/* spodok „ekológie" sa roztaví do navy → plynulý prechod do záverečného tmavého CTA.
   .eco__points (karty) majú z-index:2, takže zostávajú ostré nad gradientom. */
.eco::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(150px,20vh,280px);
  z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(10,15,44,0)   0%,
    rgba(10,15,44,.28) 45%,
    rgba(10,15,44,.62) 72%,
    rgba(10,15,44,.86) 88%,
    var(--navy)       100%);
}

/* foto pokrýva CELÚ sekciu (cover); text hore, karty dole */
.eco__hero{
  background:var(--offwhite) url('../images/section-backgrounds/info-desktop.png') center right/cover no-repeat;
  padding-block:clamp(52px,7vw,104px);
}
.eco__hero-inner{display:flex;flex-direction:column;gap:clamp(30px,3.5vw,46px);min-height:clamp(460px,46vw,640px);}
/* na desktope je scéna pozadím .eco__hero, samostatný obrázok sa zapína až na mobile */
.eco__media{display:none;}
.eco__lead{max-width:min(540px,52%);}
.eco__title{font-size:clamp(2.5rem,5.6vw,4.2rem);line-height:1;letter-spacing:-.03em;color:var(--navy);}
.eco .pillars__rule{margin-top:22px;}
.eco__lead .section__sub{margin-top:22px;max-width:42ch;}
.eco__tag{margin-top:24px;font-weight:800;font-size:clamp(1.05rem,1.5vw,1.28rem);letter-spacing:-.01em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:180% 180%;}

/* karty pod sebou v ľavom stĺpci (nad fotkou) */
.eco__points{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr;gap:14px;
  max-width:min(560px,52%);
}
.eco__point{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--white);border-radius:var(--r-card);padding:24px 24px;
  border:1px solid var(--line);box-shadow:var(--sh-card);
  transition:transform var(--dur) var(--ease-drive),box-shadow var(--dur) var(--ease-drive);
}
.eco__point:hover{transform:translateY(-8px);box-shadow:0 40px 64px -30px rgba(10,15,44,.5);}
.eco__ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:52px;height:52px;border-radius:15px;background:var(--grad-soft);color:var(--violet);transition:transform var(--dur) var(--ease-drive);}
.eco__point:hover .eco__ic{transform:rotate(-6deg) scale(1.08);}
.eco__ic .ico{width:26px;height:26px;}
.eco__point strong{display:block;font-size:1.1rem;}
.eco__point span{color:var(--ink-60);font-size:.98rem;}

/* ============================================================ ZÁVEREČNÉ CTA (dark navy + stužka cesty) ============================================================ */
.final{
  text-align:left;
  background:var(--navy) url('../images/section-backgrounds/cta-desktop.png') right center/cover no-repeat;
}
.final__glow{position:absolute;inset:auto 0 -40% 0;height:180%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 30% 100%,rgba(109,59,255,.4),transparent 50%),radial-gradient(circle at 50% 120%,rgba(255,43,122,.25),transparent 45%);
  filter:blur(6px);}
.final__inner{position:relative;z-index:1;}
/* horný okraj sa zladí s „preco" (offwhite ↔ offwhite) */
.final::before{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(110px,16vh,220px);
  z-index:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(10,15,44,0)   0%,
    rgba(10,15,44,.28) 45%,
    rgba(10,15,44,.62) 72%,
    rgba(10,15,44,.86) 88%,
    var(--navy)       100%);
}
/* spodok záverečného CTA sa zladí s farbou footera (#070B22) → zmizne jemná linka aj
   tvrdý okraj fialovej stužky pri prechode do pätičky */
.final::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(80px,12vh,150px);
  z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(7,11,34,0)   0%,
    rgba(7,11,34,.55) 60%,
    rgba(7,11,34,.85) 85%,
    #070B22          100%);
}
.final__content{max-width:min(680px,100%);}

.final__title{font-size:clamp(2.5rem,5.6vw,4.2rem);line-height:1;letter-spacing:-.03em;color:#fff;}
.final .pillars__rule{margin-top:22px;}
.final__sub{margin-top:22px;color:rgba(255,255,255,.72);font-size:1.12rem;max-width:44ch;}

/* obrovské telefónne číslo – wow prvok */
.final__phone{
  display:block;margin:26px 0 34px;
  font-size:clamp(2.6rem,8vw,5.4rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff;
  text-shadow:0 8px 40px rgba(109,59,255,.45);
  transition:transform var(--dur) var(--ease-drive),text-shadow var(--dur) var(--ease-drive);
  width:max-content;max-width:100%;
}
.final__phone:hover{transform:translateY(-2px) scale(1.015);text-shadow:0 10px 50px rgba(255,43,122,.55);}

.final__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-start;}
.btn--dark{
  background:rgba(255,255,255,.05);color:#fff;
  border:1.5px solid rgba(255,255,255,.16);box-shadow:none;
}
.btn--dark:hover{transform:translateY(-2px);border-color:var(--magenta);background:rgba(255,255,255,.09);}
.btn--dark:active{transform:translateY(0) scale(.98);}
.btn--dark .ico{stroke:var(--magenta);}
.btn--stack{gap:14px;padding-block:12px;}
.btn__stack{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.12;}
.btn__stack strong{font-weight:800;}
.btn__stack em{font-style:normal;font-size:.76rem;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.55);}

.final__web{
  display:inline-flex;align-items:center;gap:10px;margin-top:32px;
  color:rgba(255,255,255,.62);font-weight:700;letter-spacing:.03em;
  transition:color var(--dur) var(--ease-out);
}
.final__web .ico{width:20px;height:20px;color:var(--violet);}
.final__web:hover{color:#fff;}

/* ============================================================ FOOTER ============================================================ */
.site-footer{background:#070B22;color:rgba(255,255,255,.7);padding-top:64px;}
.footer__inner{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:40px;padding-bottom:44px;}
.footer__claim{margin-top:18px;max-width:32ch;font-size:.98rem;}
.footer__social{display:flex;gap:12px;margin-top:22px;}
.footer__social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;transition:transform var(--dur) var(--ease-drive),background var(--dur);}
.footer__social a:hover{transform:translateY(-3px);background:var(--grad);}
.footer__col h4{color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;font-weight:700;}
.footer__col a,.footer__meta{display:flex;align-items:center;gap:10px;padding:7px 0;color:rgba(255,255,255,.7);font-weight:600;transition:color .25s;}
.footer__col a:hover{color:#fff;}
.footer__col .ico{width:18px;height:18px;color:var(--magenta);}
.footer__bottom{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding-block:22px;border-top:1px solid rgba(255,255,255,.08);font-size:.9rem;text-align:center;}
.footer__bottom a{
  color:var(--magenta);font-weight:700;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:color .25s,background-size .3s var(--ease-drive);
}
.footer__bottom a:hover,.footer__bottom a:focus-visible{color:#fff;background-size:100% 1px;}

/* ============================================================ STICKY MOBILE CTA ============================================================ */
.mobile-bar{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:60;
  display:none;gap:10px;
  padding:8px;border-radius:var(--r-pill);
  background:rgba(10,15,44,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 44px -14px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1);
}
.mobile-bar__btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:var(--r-pill);font-weight:700;font-size:1rem;}
.mobile-bar__btn .ico{width:20px;height:20px;stroke-width:2;}
.mobile-bar__btn--call{background:var(--grad);color:#fff;box-shadow:var(--sh-brand);}
.mobile-bar__btn--app{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.16);}

/* ============================================================ REVEAL (scroll-in) ============================================================ */
.reveal{transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
.js .reveal:not(.is-in){opacity:0;transform:translateY(26px);}
.reveal.is-in{opacity:1;transform:none;}
.reveal[data-d="1"]{transition-delay:.08s;}
.reveal[data-d="2"]{transition-delay:.16s;}
.reveal[data-d="3"]{transition-delay:.24s;}

/* ============================================================ RESPONSIVE ============================================================ */
@media (max-width:960px){
  .hero__copy{width:auto;max-width:min(520px,64%);}
  .hero__scrim{background:linear-gradient(90deg,var(--offwhite) 4%,rgba(243,244,247,.9) 34%,rgba(243,244,247,.5) 54%,rgba(243,244,247,0) 72%);}

  /* Prečo karty: vertikálny stack (ikona vľavo, text vpravo) */
  .pcards{display:flex;flex-direction:column;gap:16px;height:auto;max-width:560px;}
  .pcard{position:static;width:auto;flex-direction:row;align-items:center;text-align:left;gap:20px;transform:none;padding:22px 26px;}
  .pcard,.pcard--wide,.pcard--local,.pcard--electric{border-radius:26px;}
  .pcard__icon .ico{width:52px;height:52px;}
  .pcard:hover{transform:rotate(0deg) translateY(-5px) scale(1.015);}
  .pcards__streak{display:none;}

  /* Appka: telefóny dostanú vlastnú hornú scénu, obsah pokračuje pod nimi. */
  .app{
    min-height:auto;padding-top:clamp(390px,57vw,550px);
    padding-bottom:clamp(146px,18vw,190px);
  }
  .app::before{
    inset:0;background:
      linear-gradient(to bottom, rgba(7, 11, 34, 0) 0%, rgba(7, 11, 34, .55) 60%, rgba(7, 11, 34, .85) 85%, #070B22 100%),
      url('../images/generated-library/graphic-03-app-launch-custom.png') center top/100% auto no-repeat;
    transform:none;
  }
  .app__copy{max-width:620px;}

  /* Ekológia: text širší, foto stále vpravo */
  .eco__lead{max-width:min(560px,66%);}
}
@media (max-width:768px){
  .wrap{padding-inline:18px;}
  /* Appka: obsah je prvý, vizualizácia je samostatný obrázok cez celú šírku pod ním. */
  .app{padding-top:clamp(72px,12vw,92px);padding-bottom:0;}
  .app::before{display:none;}
  /* žiadny spodný odstup: hrana obrázka musí sedieť presne na konci sekcie,
     kde je prelínací gradient už 100 % offwhite – inak presvitá rez PNG-čka */
  .app__media{display:block;position:relative;z-index:0;width:100%;margin-bottom:0;}
  .app__media img{display:block;width:100%;height:auto;object-fit:contain;}
  /* dlhší prechod: tmavá scéna sa rozplynie do offwhite ešte v rámci obrázka */
  .app::after{height:clamp(40px,10vw,60px);}

  /* Hero: portrétové foto (auto dole), text hore nad svetlou zónou */
  .hero{align-items:flex-start;min-height:100dvh;padding-top:calc(var(--header-h) + clamp(16px,5vw,40px));}
  /* foto posunuté nižšie: obsadí spodnú časť hero, hore ostáva svetlá zóna pre text/tlačidlá */
  .hero__bg{inset:auto 0 0 0;height:64%;}
  .hero__bg img{object-position:center;transform-origin:50% 30%;}
  .hero__scrim{background:linear-gradient(180deg,var(--offwhite) 6%,rgba(243,244,247,.82) 26%,rgba(243,244,247,.35) 46%,rgba(243,244,247,0) 62%);}
  .hero__copy{width:auto;max-width:100%;}
  .hero__streaks{display:none;}

  .pillars{background-image:url('../images/section-backgrounds/preco-my-mobile.png');}

  /* Záverečné CTA: mobilná stužka + tmavý scrim pre čitateľnosť textu vľavo */
  .final{
    background-image:linear-gradient(100deg,var(--navy) 34%,rgba(10,15,44,.55) 58%,rgba(10,15,44,0) 88%),url('../images/section-backgrounds/cta-mobile.png');
    background-position:center,center right;
    background-size:cover,cover;
  }
  .final__content{max-width:100%;}

  /* Ekológia: obsah je prvý (text + karty tesne pod sebou), scéna je samostatný obrázok pod ním */
  /* horný odstup sekcie sa vracia (hodnota z .section), spodok ostáva nulový kvôli prechodu do CTA */
  .eco{padding-block-start:clamp(72px,10vw,132px);}
  .eco__hero{
    padding-block:clamp(28px,7vw,48px) 0;
    background-image:none;
    background-color:var(--offwhite);
  }
  .eco__hero-inner{min-height:auto;gap:clamp(26px,6vw,38px);}
  /* horných ~43 % scény je prázdna obloha – orežeme ju, aby karty končili tesne nad hradom */
  .eco__media{display:block;position:relative;z-index:0;width:100%;margin-top:clamp(24px,6vw,40px);
    aspect-ratio:941/1100;overflow:hidden;isolation:isolate;}
  .eco__media::before{content:"";position:absolute;inset:0 0 auto;height:clamp(72px,12vw,118px);z-index:1;
    pointer-events:none;transform:translateY(-18px);filter:blur(12px);
    background:linear-gradient(to bottom,rgba(243,244,247,.98) 0%,rgba(243,244,247,.78) 32%,rgba(243,244,247,0) 100%);}
  .eco__media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;filter:blur(10px);
    background:linear-gradient(90deg,rgba(243,244,247,.22) 0%,rgba(243,244,247,0) 12%,rgba(243,244,247,0) 88%,rgba(243,244,247,.22) 100%);}
  .eco__media img{position:relative;z-index:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom;}
  .eco__lead{max-width:100%;}
  .eco__lead .section__sub{max-width:38ch;}
  .eco__points{max-width:100%;}

  .site-header{padding-inline:8px;} /* jemný bočný odstup pillu od okrajov */
  .nav,.header__cta{display:none;}
  .header__inner{justify-content:space-between;gap:12px;}
  .nav-toggle{display:flex;flex:none;}
  .mobile-nav{display:none;}
  .site-header.is-open .mobile-nav{display:flex;}
  /* Ako to funguje: portrétová cesta (vertikálna S-krivka), uzly na jej vlnách */
  .how{padding-bottom:clamp(40px,8vw,64px);}
  .how__head{margin-bottom:20px;}
  .hsteps{aspect-ratio:941/1672;background-image:url('../images/section-backgrounds/ako-to-funguje-mobile.png');max-width:520px;margin:0 auto;}
  .hstep--1{left:77%;top:28%;}
  .hstep--2{left:20%;top:57%;}
  .hstep--3{left:77%;top:84%;}
  .hstep__num{bottom:calc(50% + clamp(28px,10vw,42px));font-size:clamp(2.6rem,12vw,3.6rem);}
  /* popis vedľa uzla (vpravo pri ľavom uzle, vľavo pri pravých uzloch) */
  .hstep__label{top:50%;transform:translateY(-50%);width:max-content;max-width:42vw;}
  .hstep--1 .hstep__label,.hstep--3 .hstep__label{left:auto;right:calc(50% + clamp(38px,11vw,52px));text-align:right;}
  .hstep--2 .hstep__label{left:calc(50% + clamp(38px,11vw,52px));right:auto;text-align:left;}

  .mobile-bar{display:flex;}
  /* rezervuje priestor nad fixnou lištou, aby copyright neostal pod ňou */
  .site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom));}
  .footer__inner{grid-template-columns:1fr 1fr;}
  .footer__brand{grid-column:1 / -1;}
}
@media (max-width:520px){
  /* .wrap{padding-inline:18px;} */
  .hero__lead{margin-top:6px;}
  .hero__actions{flex-direction:column;align-items:stretch;margin-top:18px;}
  .hero__app{display:flex;}
  .hero__actions .btn{width:100%;}
  .app .section__title{max-width:11ch;}
  .feats{grid-template-columns:1fr;gap:15px;margin-top:32px;}
  .feats .app-card,.feats .app-card--track,.feats .app-card--price,.feats .app-card--history{--rot:0deg;margin-top:0;min-height:0;}
  .signup{padding:20px;border-radius:22px;}
  .signup__row{flex-direction:column;}
  .signup__row .btn{width:100%;}
  .final__actions{flex-direction:column;}
  .final__actions .btn{width:100%;}
  .footer__inner{grid-template-columns:1fr;}
  .footer__bottom{flex-direction:column;align-items:center;}
}

/* ============================================================ REDUCED MOTION ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .reveal{opacity:1 !important;transform:none !important;}
  .hero__streaks,.pcards__streak i,.hstep__node::before,.app::before,.app-card{animation:none !important;}
  .hero__bg img{transform:none !important;}
  .grad-text,.btn--primary{background-size:100% 100% !important;}
}

@media (prefers-reduced-transparency:reduce){
  .signup{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0d1438;}
}

/* ============================================================
   PRELOADER  ·  „NABÍJANIE"
   Prvý dojem = značka v pohybe: blesk sa nabíja podľa reálneho
   priebehu načítania, speed-lines bežia pozadím a na konci sa
   tmavá clona odsunie ako auto, ktoré sa rozbehne doprava.
   Bez JS sa preloader vôbec nezobrazí (.js gate).
   ============================================================ */
.preloader{display:none;}
.js .preloader{
  --p:0;                                    /* 0..1 = úroveň nabitia */
  position:fixed;inset:0;z-index:9000;
  display:grid;place-items:center;
  overflow:hidden;
  background:var(--navy);
  contain:layout paint;
}
html.is-loading,html.is-loading body{overflow:hidden;}

/* --- tmavá clona (odsúva sa preč pod uhlom speed-line) --- */
.pl__panel{
  position:absolute;inset:-20% -45%;
  background:
    radial-gradient(58% 52% at 50% 40%,rgba(109,59,255,.40),transparent 70%),
    radial-gradient(46% 42% at 78% 90%,rgba(255,43,122,.22),transparent 72%),
    var(--navy);
  transform:skewX(-9deg) translate3d(0,0,0);
  transition:transform 1s var(--ease-drive);
  will-change:transform;
}
/* svetelná stopa na nábežnej hrane clony */
.pl__panel::before{
  content:"";position:absolute;left:-8px;top:-6%;bottom:-6%;width:14px;border-radius:14px;
  background:linear-gradient(180deg,var(--violet),var(--magenta));
  box-shadow:0 0 26px 6px rgba(109,59,255,.65),0 0 80px 30px rgba(255,43,122,.30);
  opacity:0;transition:opacity .22s linear;
}

/* --- speed-lines v pozadí --- */
.pl__streaks{
  position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  transition:transform .6s var(--ease-drive),opacity .4s linear;
}
.pl__streaks i{
  position:absolute;left:0;height:3px;border-radius:3px;transform-origin:left center;
  background:linear-gradient(90deg,transparent,rgba(109,59,255,.75) 45%,var(--magenta));
  opacity:0;animation:plStreak 3.2s var(--ease-drive) infinite;
}
.pl__streaks i:nth-child(1){top:14%;width:min(38%,420px);animation-delay:0s;}
.pl__streaks i:nth-child(2){top:27%;width:min(56%,620px);animation-delay:.7s;}
.pl__streaks i:nth-child(3){top:73%;width:min(46%,500px);animation-delay:1.5s;}
.pl__streaks i:nth-child(4){top:88%;width:min(30%,340px);animation-delay:2.2s;}
@keyframes plStreak{
  0%{transform:translate3d(-42vw,0,0) scaleX(.4);opacity:0;}
  18%{opacity:.9;}
  100%{transform:translate3d(122vw,0,0) scaleX(1);opacity:0;}
}

/* --- obsah --- */
.pl__stage{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(18px,3vw,28px);padding-inline:24px;text-align:center;
  transition:transform .62s var(--ease-drive),opacity .4s linear;
}
@keyframes plIn{from{opacity:0;transform:translate3d(0,16px,0);}to{opacity:1;transform:none;}}
.pl__mark,.pl__word,.pl__meta{animation:plIn .75s var(--ease-drive) both;}
.pl__mark{animation-delay:.05s;}
.pl__word{animation-delay:.18s;}
.pl__meta{animation-delay:.3s;}

/* blesk + aura */
.pl__mark{position:relative;display:grid;place-items:center;transition:transform .5s var(--ease-drive);}
.pl__aura{
  position:absolute;width:clamp(190px,32vw,290px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(138,59,255,.60),rgba(109,59,255,.16) 44%,transparent 68%);
  opacity:calc(.16 + var(--p) * .62);
  transition:opacity .3s linear,scale .55s var(--ease-drive);
  animation:plPulse 2.8s ease-in-out infinite alternate;
}
@keyframes plPulse{from{scale:.94;}to{scale:1.07;}}

.pl__bolt{width:clamp(70px,10.5vw,100px);height:auto;overflow:visible;filter:drop-shadow(0 10px 34px rgba(109,59,255,.55));}
.pl__ghost{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.26);stroke-width:.7;stroke-linejoin:round;}
.pl__level{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--p));transition:transform .18s linear;}
.pl__spark{
  transform-box:fill-box;transform:translateY(calc(var(--p) * -30px));
  opacity:calc(.3 + var(--p) * .7);transition:transform .18s linear;
}

/* logotyp */
.pl__word{
  font-size:clamp(1.3rem,3.2vw,1.8rem);font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1;
}
.pl__word span{
  background-image:linear-gradient(100deg,var(--magenta),#8A3BFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* technický riadok: stav nabíjania + reálne percentá */
.pl__meta{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:min(300px,74vw);
  padding-top:clamp(2px,1vw,8px);
  border-top:1px solid rgba(255,255,255,.14);
}
.pl__label{
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.62);transition:color .3s linear;
}
.pl__pct{
  font-size:.92rem;font-weight:800;color:#fff;
  font-variant-numeric:tabular-nums;min-width:5ch;text-align:right;
}

/* --- 100 %: krátky výboj --- */
.preloader.is-full .pl__mark{transform:scale(1.08);}
.preloader.is-full .pl__aura{animation:none;scale:1.45;opacity:.92;}
.preloader.is-full .pl__label{color:#fff;}
.preloader.is-full .pl__level,.preloader.is-full .pl__spark{transition-duration:.35s;transition-timing-function:var(--ease-drive);}

/* --- odchod: clona sa rozbehne doprava --- */
.preloader.is-out{pointer-events:none;}
.preloader.is-out .pl__panel{transform:skewX(-9deg) translate3d(115%,0,0);}
.preloader.is-out .pl__panel::before{opacity:1;}
.preloader.is-out .pl__streaks{transform:translate3d(26vw,0,0);opacity:0;}
.preloader.is-out .pl__stage{transform:translate3d(80px,0,0);opacity:0;}

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

@media (max-width:520px){
  .pl__aura{width:clamp(170px,54vw,230px);}
  .pl__bolt{width:clamp(64px,17vw,84px);}
}

/* Redukovaný pohyb: žiadne speed-lines, žiadny wipe — len okamžité odkrytie.
   (Globálny reduce blok vyššie navyše vypína všetky trvania cez !important.) */
@media (prefers-reduced-motion:reduce){
  .pl__streaks{display:none;}
  .pl__aura{animation:none;}
  .preloader.is-out{opacity:0;}
  .preloader.is-out .pl__panel,.preloader.is-out .pl__stage{transform:none;}
}