/* ==========================================================================
   Vistart – tuning 2026-10 (warstwa na wierzchu vistart.css)
   Zasada: ta sama kolorystyka, kosmos, planeta i szkło – tylko dopracowanie.
   ========================================================================== */

/* ---------- 1. Typografia: równe łamanie nagłówków, bez wiszących słówek ---------- */
.h-display,.h1,.h2,.h3,.motto-text,.statement,.step h3,.work-sec .work-info h3{text-wrap:balance}
.lead,.world p,.cell p,.az p,.tl p,.city p,.work-sec .work-info p,.step p{text-wrap:pretty}
.lead{color:#b4b4bb}                                   /* odrobinę jaśniejszy opis – lepszy kontrast */
.world p,.cell p,.az p,.tl p,.city p,.feature p,.kind p{color:#a9a9b0;line-height:1.6}
.az p,.tl p,.city p{font-size:16px}                     /* było 15 px – za drobne na szkle */
.cell p{font-size:16.5px}
.eyebrow{color:#b9b9c2}

/* ---------- 2. Rytm sekcji: mniej pustki, ten sam oddech ---------- */
.section{padding:clamp(80px,10.5vw,140px) 0}
.motto{padding:clamp(96px,12vw,164px) 0}
.worlds{margin-top:56px}
.bento,.timeline{margin-top:56px}
html{scroll-padding-top:110px}                           /* kotwice nie chowają się pod menu */

/* ---------- 3. Pojawianie się: szybciej i bez długiego rozmycia ---------- */
.rv{transform:translateY(26px);filter:blur(4px);transition-duration:.85s,.85s,.6s}
.hero .rv{transition-duration:.7s,.7s,.45s;transition-delay:calc(var(--d,0s)*.6)}
.motto-text .w{filter:blur(6px);transition-duration:.8s;transition-delay:calc(var(--k)*.06s)}
.statement span{color:#4d4d5c}                          /* nieoświetlone słowa czytelne od razu */
.statement span.lit{color:#f5f5f7;text-shadow:0 0 30px rgba(191,90,242,.18)}

/* ---------- 4. Menu w stylu macOS: kompaktowe po przewinięciu ---------- */
.nav .wrap{transition:height .45s var(--ease)}
.brand,.brand svg{transition:font-size .45s var(--ease),width .45s var(--ease),height .45s var(--ease),flex-basis .45s var(--ease),gap .45s var(--ease)}
.brand-txt small{transition:font-size .45s var(--ease),opacity .45s}
@media (min-width:901px){
  .nav.scrolled .wrap{height:74px}
  .nav.scrolled .brand{font-size:28px;gap:12px}
  .nav.scrolled .brand svg{width:44px;height:44px;flex-basis:44px}
  .nav.scrolled .brand-txt small{font-size:11px}
}
.nav.scrolled{box-shadow:0 1px 0 rgba(255,255,255,.04),0 12px 40px rgba(0,0,0,.35)}
.menu a{position:relative}
.menu a:hover{background:rgba(255,255,255,.1)}

/* ---------- 5. Przyciski: połysk Aqua i wyraźny focus ---------- */
.btn-primary{overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 52%);opacity:.55;pointer-events:none}
.btn-primary::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .8s var(--ease)}
.btn-primary:hover::before{left:130%}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.btn-glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.link-arrow{transition:color .25s}
.link-arrow:hover{color:#9be3ff}

/* ---------- 6. Szkło: delikatny połysk górnej krawędzi i spójne uniesienie ---------- */
.glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 24px 60px -30px rgba(0,0,0,.6)}
.glass::after{opacity:.7}
.az .glass,.cell,.city,.feature,.kind{transition:transform .5s var(--ease),border-color .3s,box-shadow .5s}
@media (hover:hover){
  .az .glass:hover,.cell:hover,.feature:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 70px -30px rgba(94,92,230,.45)}
  .world:hover,.city:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 34px 80px -34px rgba(191,90,242,.45)}
}
.world .orb{transition:transform .6s var(--ease)}
.world:hover .orb{transform:translateY(-3px) scale(1.04)}
.world .link-arrow{margin-top:auto}
.world p{margin-bottom:28px}

/* ---------- 7. Karty A–Z i proces: wyrównane wysokości ---------- */
.az .glass{display:flex;flex-direction:column;height:100%}
.az h3{font-size:21px;letter-spacing:-.015em}
.tl .dot{transition:transform .5s var(--ease)}
.tl:hover .dot{transform:scale(1.06)}

/* ---------- 8. Makieta "Twoja firma" – pełna, nie pusta ---------- */
.bshot .mock-nav{position:absolute;left:7%;right:7%;top:7%;display:flex;align-items:center;gap:14px}
.bshot .mock-nav b{width:22px;height:22px;border-radius:50%;background:linear-gradient(140deg,#64d2ff,#bf5af2)}
.bshot .mock-nav i{height:7px;width:46px;border-radius:4px;background:rgba(255,255,255,.18)}
.bshot .mock-nav i:last-child{margin-left:auto;width:70px;height:20px;border-radius:999px;background:rgba(255,255,255,.12)}
.bshot .mock-sub{display:block;margin-top:14px;font:500 clamp(10px,1.2vw,15px)/1.4 var(--font);letter-spacing:0;color:rgba(255,255,255,.6);max-width:34ch}
.bshot .mock-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;padding:0 20px;font:600 clamp(11px,1.1vw,14px)/1 var(--font);color:#fff;box-shadow:0 10px 30px rgba(191,90,242,.45),inset 0 1px 0 rgba(255,255,255,.3)}
.bshot .mock-btn::after{content:"→"}
.bshot .mock-l{animation:float 7s var(--ease) infinite alternate}
.bshot .mock-l::after{content:"";position:absolute;inset:-14%;border-radius:50%;border:1px solid rgba(255,255,255,.18);transform:rotateX(72deg) rotateZ(-20deg)}
@keyframes float{from{transform:translateY(-52%)}to{transform:translateY(-46%)}}
@media (max-width:600px){.bshot .mock-nav{display:none}.bshot .mock-btn{height:34px;padding:0 14px}.bshot .mock-sub{display:none}}

/* ---------- 9. Wyniki Google (SEO): czytelniejsza karta ---------- */
.serp-r.top b{font-size:19px}
.serp-r{transition:opacity .4s}

/* ---------- 10. Wydajność: lżej na telefonach ---------- */
@media (max-width:900px){
  .aurora{filter:blur(50px) saturate(130%)}
  .aurora i{animation-duration:60s!important}
  .glass{-webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%)}
}
.motto,.orbit-stage,.bento{contain:layout paint}

/* ---------- 11. Mobile: oddech i wygodne dotknięcia ---------- */
@media (max-width:600px){
  .section{padding:72px 0}
  .motto{padding:88px 0}
  .h-display{letter-spacing:-.04em}
  .hero-pills{margin-top:34px}
  .pill{font-size:13.5px}
  .world{padding:30px 26px}
  .az .glass,.cell{padding:24px}
  .statement{font-size:30px}
}

/* ---------- 12. Ograniczony ruch: wszystko widoczne od razu ---------- */
@media (prefers-reduced-motion:reduce){.statement span{color:#f5f5f7}.bshot .mock-l{animation:none}}