/* Litari - style strony produktu. Tokeny z tokens.css + theme-litari.css.
   Podzialy 61.8/38.2, odstepy tylko z listy Fibonacciego, hover ciemniej. */
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--ink)}
a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
:focus-visible{outline-color:var(--accent)}
::selection{background:var(--accent);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--s5);padding-right:var(--s5)}
.mono{font-family:var(--font-mono);font-size:var(--t-2);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.label{color:var(--mark-text)}
.display{font-family:var(--font-display);font-weight:700;line-height:var(--lh-display);letter-spacing:-.02em;color:var(--navy-900)}
.grid{display:grid;gap:var(--s6);align-items:center}
.g-major{grid-template-columns:61.8fr 38.2fr}
.g-minor{grid-template-columns:38.2fr 61.8fr}

/* przyciski */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);font-family:var(--font-text);font-size:var(--t-1);font-weight:600;padding:var(--s3) var(--s4);border-radius:var(--r-l);border:1px solid transparent;text-decoration:none;transition:background 200ms var(--m-ease),color 200ms var(--m-ease),border-color 200ms var(--m-ease)}
.btn:hover{text-decoration:none}
.btn-accent{background:var(--accent);color:var(--accent-on)}
.btn-accent:hover{background:var(--accent-hover);color:var(--accent-on)}
.btn-outline{background:var(--white);color:var(--ink);border-color:var(--line)}
.btn-outline:hover{background:var(--cream);color:var(--ink)}
.btn-sm{padding:var(--s2) var(--s4)}

/* pasek */
.top{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line)}
.top .wrap{height:var(--nav-h);display:flex;align-items:center;gap:var(--s4)}
.brand{display:flex;align-items:center;gap:var(--s3);color:var(--ink)}
.brand:hover{color:var(--ink);text-decoration:none}
.brand img{width:24px;height:auto}
.brand span{font-family:var(--font-display);font-weight:700;font-size:var(--t-1);letter-spacing:-.01em}
.top nav{margin-left:auto;display:flex;align-items:center;gap:var(--s4)}
.top nav a{color:var(--gray);font-size:var(--t-1);font-weight:500}
.top nav a:hover{color:var(--ink);text-decoration:none}
.lang{display:flex;gap:var(--s3);font-family:var(--font-mono);font-size:var(--t-2);letter-spacing:.06em}
.lang a{color:var(--gray)}
.lang a[aria-current]{color:var(--ink);font-weight:600}
.lang a:hover{color:var(--ink);text-decoration:none}

/* hero: zrzut na bieli, pasmo granatowe od 38,2% wysokosci */
.hero{position:relative;overflow:hidden;background:var(--white);padding-top:var(--s7)}
/* pasmo 233px u dolu; tekst nad nim ma ok. 377px, czyli 377:233 = phi */
.hero .band{position:absolute;left:0;right:0;bottom:0;height:233px;background:var(--navy-900)}
.hero .wrap{position:relative;display:grid;grid-template-columns:61.8fr 38.2fr;grid-template-rows:auto 233px;column-gap:var(--s6);transform-origin:50% 38.2%}
.hero-text{grid-row:1;padding-bottom:var(--s6)}
.hero-shot{grid-column:2;grid-row:1/3}
.kick{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.kick i{display:block;width:34px;height:2px;background:var(--mark)}
.hero h1{font-size:var(--t5);max-width:18ch}
.hero .lead{margin-top:var(--s4);font-size:var(--t1);color:var(--gray);max-width:var(--measure)}
.hero .note{margin-top:var(--s3);font-size:var(--t-1);color:var(--gray);max-width:var(--measure)}
.stores{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
/* hero text lezy na pasmie od 38,2%: ponizej tej linii tekst jest bialy */
.hero-shot{position:relative;display:flex;justify-content:center;align-items:flex-end}

/* telefon: ramka na zrzut 9:19.5, przy braku pliku - kadr cream-2 z etykieta */
.phone{width:min(100%,300px);aspect-ratio:9/19.5;border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--cream-2);box-shadow:var(--e3);overflow:hidden;position:relative}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone .ph{position:absolute;left:var(--s4);bottom:var(--s4);font-family:var(--font-mono);font-size:.688rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
.phone .acc{position:absolute;left:0;top:0;width:61.8%;height:3px;background:var(--accent)}
.shot{border-radius:var(--r-xl);background:var(--cream-2);overflow:hidden;position:relative;aspect-ratio:1.618/1}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.shot .ph{position:absolute;left:var(--s4);bottom:var(--s3);font-family:var(--font-mono);font-size:.688rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
.shot-tall{aspect-ratio:1/1.272}
.shot-tall img{object-position:center top}

/* sekcje */
.sec{padding-top:var(--s7);padding-bottom:var(--s7)}
.sec-head{display:grid;grid-template-columns:38.2fr 61.8fr;gap:var(--s6);align-items:start;margin-bottom:var(--s6)}
.sec-head h2{font-size:var(--t4)}
.sec-head p{color:var(--gray);max-width:56ch}
.cream{background:var(--cream);border-top:1px solid var(--line)}

/* wiersze cech */
.rows{display:grid;gap:var(--s6)}
.row h3{font-size:var(--t2)}
.row p{margin-top:var(--s3);color:var(--gray);max-width:var(--measure)}
.row .media{display:flex;justify-content:center}
.phone-row{border-radius:var(--r-xl);width:min(100%,288px);box-shadow:var(--e2)}
.tablet{width:min(100%,377px);aspect-ratio:3/4;border-radius:var(--r-xl);background:var(--cream-2);box-shadow:var(--e2);overflow:hidden;position:relative}
.tablet img{width:100%;height:100%;object-fit:cover;object-position:top}
.row .tag{margin-top:var(--s3);display:inline-block;color:var(--accent)}

/* zdanie skrobane: jedno na strone */
.scrub{height:200vh;background:var(--cream);border-block:1px solid var(--line)}
.scrub p{font-size:var(--t4);max-width:24ch}

/* stos kart z ekranami */
.cards{display:grid;gap:var(--s4)}
.card{background:var(--white);border-radius:var(--r-xl);box-shadow:var(--e3);padding:var(--s6);display:grid;grid-template-columns:61.8fr 38.2fr;gap:var(--s5);min-height:288px;align-items:center}
.card .num{color:var(--accent)}
.card h3{margin-top:var(--s3);font-size:var(--t3)}
.card p{margin-top:var(--s3);color:var(--gray);max-width:var(--measure)}
.card .shot{border-radius:var(--r-l);aspect-ratio:1/1.272;max-height:377px}
.card .shot img{object-position:center top}

/* spec + plany */
.spec{display:grid;grid-template-columns:61.8fr 38.2fr;gap:var(--s4);align-items:start}
.panel{background:var(--white);border-radius:var(--r-xl);box-shadow:var(--e2);overflow:hidden}
.panel .cap{padding:var(--s4) var(--s5) var(--s3);font-family:var(--font-mono);font-size:.688rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.panel table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.panel td{padding:var(--s3) var(--s5);border-top:1px solid var(--line);font-size:var(--t-1);color:var(--ink);vertical-align:top}
.panel td:first-child{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);width:38.2%}
.plans{display:grid;gap:var(--s3)}
.plan{background:var(--white);border-radius:var(--r-xl);box-shadow:var(--e2);padding:var(--s5)}
.plan.hi{background:var(--navy-900);color:#fff}
.plan .cap{font-family:var(--font-mono);font-size:.688rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.plan.hi .cap{color:var(--accent-light)}
.plan .price{margin-top:var(--s3);font-family:var(--font-display);font-weight:700;font-size:var(--t3);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:var(--lh-display)}
.plan .sub{margin-top:var(--s1);font-size:var(--t-1);color:var(--gray)}
.plan.hi .sub{color:rgba(255,255,255,.72)}
.plan ul{margin-top:var(--s3);display:grid;gap:var(--s1);font-size:var(--t-1);color:var(--ink)}
.plan.hi ul{color:rgba(255,255,255,.86)}
.plan li{padding-left:var(--s4);position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.72em;width:13px;height:1px;background:var(--accent)}
.plan.hi li::before{background:var(--accent-light)}
.plans-note{margin-top:var(--s4);font-size:var(--t-1);color:var(--gray);max-width:56ch}

/* FAQ: lista inset */
.faq li{padding:var(--s4) var(--s5)}
.faq li+li{border-top:1px solid var(--line)}
.faq h3{font-size:var(--t-1);font-weight:600;color:var(--ink)}
.faq p{margin-top:var(--s2);font-size:var(--t-1);color:var(--gray);max-width:var(--measure)}

/* CTA koncowe */
.cta h2{font-size:var(--t4);max-width:18ch}
.cta .stores{margin-top:var(--s5)}

/* stopka */
footer{background:var(--navy-900);color:#fff;padding-top:var(--s6);padding-bottom:var(--s6)}
footer .wrap{display:grid;grid-template-columns:38.2fr 61.8fr;gap:var(--s6);align-items:center}
footer .brand{color:#fff}
footer .brand img{width:26px}
footer .links{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:flex-end;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em}
footer .links a{color:rgba(255,255,255,.72)}
footer .links a:hover{color:#fff;text-decoration:none}
footer .by{margin-top:var(--s3);font-size:var(--t-2);color:rgba(255,255,255,.56)}

/* telefon / tablet */
@media (max-width:900px){
  .wrap{padding-left:var(--s4);padding-right:var(--s4)}
  .top nav a.nl{display:none}
  .grid,.sec-head,.card,.spec,footer .wrap{grid-template-columns:1fr}
  .hero{padding-top:var(--s6)}
  .hero .wrap{grid-template-columns:1fr;grid-template-rows:auto auto}
  .hero-text{padding-bottom:var(--s5)}
  .hero-shot{grid-column:1;grid-row:2}
  .hero h1{font-size:var(--t4)}
  .hero .band{height:233px}
  .phone{width:min(100%,233px)}
  .row.flip .media{order:2}
  .sec-head{gap:var(--s3);margin-bottom:var(--s5)}
  .sec-head h2,.cta h2{font-size:var(--t3)}
  .scrub{height:144vh}
  .scrub p{font-size:var(--t3)}
  .card{padding:var(--s5);min-height:0}
  .card h3{font-size:var(--t2)}
  .card .shot{max-height:none;width:min(100%,288px);margin:0 auto}
  footer .links{justify-content:flex-start}
}
@media (max-width:520px){
  .wrap{padding-left:16px;padding-right:16px}
  .stores .btn{flex:1 1 100%}
}