/* ============================================================
   LANDING (index.html) — Linear-class dark. Loaded AFTER styles.css,
   scoped to body.landing. Subpages keep styles.css look untouched.
   App-mockup tokens mirror certemis-app globals.css (.dark) 1:1:
   bg #0d1110, surface #161b19, surface-2 #1c2421, hover #222b28,
   border rgba(255,255,255,.12), text #ecefee/#a2aca8/#6f7975,
   radius 14/10/8, 0.5px card borders. Accent = brand blue (a real
   per-user accent option in the app).
   ============================================================ */
body.landing{
  --ld-bg:#08090A; --ld-panel:#0E0F12; --ld-panel2:#121317;
  --ld-line:rgba(255,255,255,.07); --ld-line2:rgba(255,255,255,.12);
  --ld-txt:#F7F8F8; --ld-mut:#8A8F98; --ld-dim:#62666D;
  --acc:#2E5BFF; --acc-hi:#7B9CFF; --acc-soft:rgba(46,91,255,.14);
  --app-bg:#0d1110; --app-surface:#161b19; --app-surface2:#1c2421; --app-hover:#222b28;
  --app-border:rgba(255,255,255,.12); --app-text:#ecefee; --app-text2:#a2aca8; --app-text3:#6f7975;
  background:var(--ld-bg); color:var(--ld-txt);
}
body.landing section{padding:0;background:transparent}
body.landing ::selection{background:rgba(46,91,255,.35)}

/* header on landing: always the dark palette, whatever classes site.js toggles
   (it swaps .on-dark/.solid after the hero — on an all-dark landing that would
   paint a light header). Hairline + blur, Linear-like. */
body.landing header{border-bottom:1px solid transparent}
body.landing header.solid{background:rgba(8,9,10,.72);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--ld-line)}
body.landing header .brand{color:#fff}
body.landing header .nav-mid a{color:var(--ld-mut)}
body.landing header .nav-mid a:hover,body.landing header .nav-mid a.active{color:#fff}
body.landing header .cta{background:#fff;color:var(--ink)}
body.landing header .cta:hover{background:#E8E8EC}
body.landing header .burger{color:#fff}
body.landing header .lang select{border-color:var(--ld-line2);color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B6B6C2' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}

/* ── shared section scaffolding ─────────────────────────── */
body.landing .ld-sec{position:relative;padding:104px 0}
.ld-sec .wrap{position:relative}
.ld-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--acc-hi)}
.ld-eyebrow::before{content:"";width:22px;height:1.5px;background:var(--acc)}
.ld-h2{font-size:clamp(1.6rem,3vw,2.45rem);letter-spacing:-.025em;line-height:1.12;color:var(--ld-txt);margin:.45em 0 .3em;text-wrap:balance}
.ld-p{color:var(--ld-mut);font-size:1.02rem;max-width:62ch;margin:0}
.ld-divider{height:1px;background:linear-gradient(90deg,transparent,var(--ld-line2),transparent)}

/* ── HERO ───────────────────────────────────────────────── */
body.landing .ld-hero{position:relative;padding:72px 0 0;text-align:center;overflow:visible}
.ld-hero-glow{position:absolute;inset:-120px 0 auto;height:640px;pointer-events:none;
  background:
    radial-gradient(46% 42% at 50% 18%,rgba(46,91,255,.16),transparent 70%),
    radial-gradient(70% 40% at 50% 0%,rgba(120,140,255,.07),transparent 70%)}
body.landing .ld-hero h1{font-size:clamp(1.7rem,2.5vw,2.2rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;
  max-width:44ch;margin:0 auto;text-wrap:balance;color:var(--ld-txt)}
.ld-hero h1 em{font-style:normal;color:var(--acc-hi)}
.ld-lead{color:var(--ld-mut);font-size:clamp(.9rem,1.1vw,1rem);max-width:78ch;margin:6px auto 0;text-wrap:balance}
.ld-ctas{display:flex;justify-content:center;gap:12px;margin-top:12px;flex-wrap:wrap}
body.landing .ld-btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.9rem;letter-spacing:0;
  text-transform:none;padding:11px 20px;border-radius:10px;border:1px solid transparent;transition:.18s}
.ld-btn-acc{background:var(--acc);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 14px 40px -14px rgba(46,91,255,.7)}
.ld-btn-acc:hover{background:#2149DB;transform:translateY(-1px)}
.ld-btn-ghost{border-color:rgba(255,255,255,.16);color:var(--ld-txt);background:rgba(255,255,255,.02)}
.ld-btn-ghost:hover{border-color:rgba(255,255,255,.34)}

/* ── APP MOCKUP (the money shot) ────────────────────────── */
.ld-stage{position:relative;margin:10px auto 0;max-width:1210px;padding:0 24px;perspective:1400px}
.ld-stage::after{content:"";position:absolute;left:10%;right:10%;bottom:-70px;height:200px;pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0%,rgba(46,91,255,.14),transparent 75%)}
.ld-app{position:relative;transform:rotateX(var(--rx,10deg)) scale(var(--sc,.955)) translateY(var(--ty,18px));
  transform-origin:50% 0%;will-change:transform;
  border-radius:14px;border:1px solid rgba(255,255,255,.10);background:var(--app-bg);overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 60px 140px -40px rgba(0,0,0,.9),0 30px 110px -30px rgba(46,91,255,.18);
  font-family:"Inter",system-ui,sans-serif;font-size:13.3px;line-height:1.5;color:var(--app-text);text-align:left}
@media (prefers-reduced-motion: reduce){.ld-app{transform:none}}

/* window chrome strip (Linear-like frame) */
.ld-chrome{display:flex;align-items:center;gap:10px;height:32px;padding:0 14px;background:#101413;border-bottom:1px solid var(--app-border)}
.ld-chrome i{width:10px;height:10px;border-radius:50%;background:#242a28}
.ld-chrome .url{margin:0 auto;display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--app-text3);
  background:#0d1110;border:1px solid var(--app-border);border-radius:7px;padding:2px 40px}
.ld-chrome .url svg{width:10px;height:10px}

.ld-appbody{display:grid;grid-template-columns:228px minmax(0,1fr)}

/* sidebar — mirrors AppNav (w-64, search, item px-3 py-2 rounded-lg, active bg-accent-soft) */
.ld-nav{border-right:1px solid var(--app-border);background:var(--app-surface);padding:10px 10px;display:flex;flex-direction:column;gap:2px}
.ld-nav .logo{height:22px;width:116px;margin:2px 6px 8px;background:var(--app-text);
  -webkit-mask:url(assets/logo-mask.png) left center/contain no-repeat;mask:url(assets/logo-mask.png) left center/contain no-repeat}
.ld-nav .search{display:flex;align-items:center;gap:8px;margin:0 2px 6px;padding:6px 10px;border-radius:8px;
  border:1px solid var(--app-border);background:var(--app-bg);color:var(--app-text3);font-size:12.4px}
.ld-nav .search svg{width:13px;height:13px}
.ld-ni{display:flex;align-items:center;gap:10px;padding:4px 10px;border-radius:8px;font-size:12.6px;color:rgba(236,239,238,.7)}
.ld-ni svg{width:15px;height:15px;flex:0 0 auto;stroke:currentColor}
.ld-ni.on{background:var(--acc-soft);color:var(--acc-hi);font-weight:500}
.ld-ni .bdg{margin-left:auto;font-size:9.5px;font-weight:600;background:var(--acc);color:#fff;border-radius:99px;padding:1.5px 5.5px;line-height:1.2}
.ld-ni .chev{margin-left:auto;width:12px;height:12px;color:var(--app-text3)}
.ld-grp{margin-top:6px;font-size:12.6px}
.ld-sub{margin-left:14px;border-left:1px solid var(--app-border);padding-left:6px;display:flex;flex-direction:column;gap:1px}
.ld-nav .foot{margin-top:auto;border-top:1px solid var(--app-border);padding-top:7px;display:flex;align-items:center;gap:9px;padding-left:6px}
.ld-nav .ava{width:24px;height:24px;border-radius:50%;background:var(--acc-soft);color:var(--acc-hi);display:grid;place-items:center;font-size:9.5px;font-weight:600}
.ld-nav .foot span{font-size:12px;color:var(--app-text2)}

/* main column: top bar + ask view */
.ld-main{display:flex;flex-direction:column;min-width:0;background:var(--app-bg)}
.ld-top{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:6px 14px;border-bottom:1px solid var(--app-border)}
.ld-top .t-item{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--app-text2);
  border:1px solid var(--app-border);border-radius:8px;padding:3px 9px}
.ld-top .t-item svg{width:12px;height:12px}
.ld-top .t-item .spark{color:var(--acc-hi)}
.ld-top .bell{position:relative;border:0;padding:4px}
.ld-top .bell svg{width:15px;height:15px;color:var(--app-text2)}
.ld-top .bell i{position:absolute;top:2px;right:0;width:6px;height:6px;border-radius:50%;background:var(--acc)}

.ld-ask{display:grid;grid-template-columns:minmax(0,1fr) 232px;flex:1;min-height:0}
.ld-conv{display:flex;flex-direction:column;min-width:0}
.ld-askhead{display:flex;align-items:center;gap:11px;padding:8px 20px;border-bottom:1px solid var(--app-border);background:rgba(22,27,25,.7)}
.ld-askhead .ic{width:30px;height:30px;border-radius:8px;background:var(--acc-soft);color:var(--acc-hi);display:grid;place-items:center}
.ld-askhead .ic svg{width:17px;height:17px}
.ld-askhead h3{margin:0;font-size:13.5px;font-weight:600;color:var(--app-text);letter-spacing:0}
.ld-askhead p{margin:0;font-size:11.3px;color:var(--app-text2)}

.ld-msgs{flex:1;padding:10px 20px;display:flex;flex-direction:column;gap:9px;max-width:820px;width:100%;margin:0 auto}
.ld-q{align-self:flex-end;max-width:78%;background:var(--acc);color:#fff;font-size:12.9px;
  padding:8px 14px;border-radius:14px;border-bottom-right-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.ld-arow{display:flex;gap:10px;align-items:flex-start}
.ld-arow .ava{width:28px;height:28px;flex:0 0 auto;border-radius:50%;background:var(--acc-soft);color:var(--acc-hi);display:grid;place-items:center;margin-top:2px}
.ld-arow .ava svg{width:15px;height:15px}
.ld-acol{display:flex;flex-direction:column;gap:8px;min-width:0}
.ld-card{background:var(--app-surface);border:.5px solid var(--app-border);border-radius:14px;padding:11px 15px;
  font-size:13.3px;line-height:1.55;color:var(--app-text)}
.ld-cite{display:inline-block;background:var(--acc-soft);color:var(--acc-hi);border-radius:4px;
  font-size:10.5px;font-weight:500;padding:0 4px;margin:0 2px;vertical-align:baseline;line-height:1.5}
.ld-acts{display:flex;gap:14px}
.ld-acts span{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--app-text2)}
.ld-acts svg{width:12px;height:12px}
.ld-srcs{background:rgba(28,36,33,.6);border:1px solid var(--app-border);border-radius:12px;padding:8px}
.ld-srcs .sh{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--app-text2)}
.ld-srcs .sh svg{width:13px;height:13px;color:var(--acc-hi)}
.ld-srcs .sh .chev{margin-left:auto;transform:rotate(90deg);color:var(--app-text3)}
.ld-srcgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
.ld-src{display:flex;flex-direction:column;gap:4px;background:var(--app-surface);border:1px solid var(--app-border);border-radius:12px;padding:8px 9px}
.ld-src .t{display:flex;align-items:center;gap:8px}
.ld-src .t .ic{width:22px;height:22px;flex:0 0 auto;border-radius:6px;background:var(--acc-soft);color:var(--acc-hi);display:grid;place-items:center}
.ld-src .t .ic svg{width:11px;height:11px;fill:currentColor}
.ld-src .t b{font-size:11.8px;font-weight:500;color:var(--app-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.ld-src .t .n{font-size:10px;font-weight:500;background:var(--acc-soft);color:var(--acc-hi);border-radius:4px;padding:1px 5px}
.ld-src .s{font-size:10.8px;color:var(--app-text3);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.ld-composer{border-top:1px solid var(--app-border);background:rgba(22,27,25,.9);padding:8px 20px 9px}
.ld-input{display:flex;align-items:center;gap:10px;max-width:820px;margin:0 auto;
  border:1px solid var(--app-border);background:var(--app-surface);border-radius:12px;padding:8px 11px}
.ld-input .ph{flex:1;font-size:12.6px;color:var(--app-text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld-input svg{width:15px;height:15px;color:var(--app-text3);flex:0 0 auto}
.ld-input .send{width:30px;height:30px;border-radius:8px;background:var(--acc);display:grid;place-items:center;flex:0 0 auto}
.ld-input .send svg{width:14px;height:14px;color:#fff}

/* threads panel (right) */
.ld-threads{border-left:1px solid var(--app-border);background:var(--app-surface);padding:10px;display:flex;flex-direction:column;gap:7px}
.ld-threads .th{display:flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--app-text2)}
.ld-threads .new{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--acc-hi);font-weight:500;text-transform:none;letter-spacing:0}
.ld-thread{border:1px solid var(--app-border);border-radius:10px;padding:9px 10px;background:var(--app-bg)}
.ld-thread.on{border-color:rgba(46,91,255,.5);background:var(--acc-soft)}
.ld-thread b{display:block;font-size:11.6px;font-weight:500;color:var(--app-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld-thread span{font-size:10.3px;color:var(--app-text3)}

/* mockup responsive: phone shows the ask column only — like the real mobile app */
@media(max-width:920px){
  body.landing .ld-hero{padding-top:72px}
  body.landing .ld-hero h1{font-size:clamp(1.55rem,6.4vw,1.85rem)}
  .ld-appbody{grid-template-columns:1fr;min-height:0}
  .ld-nav,.ld-threads{display:none}
  .ld-ask{grid-template-columns:1fr}
  .ld-msgs{padding:12px}
  .ld-card{font-size:12.7px}
  .ld-acts{display:none}
  .ld-srcgrid{grid-template-columns:1fr}
  .ld-src:nth-child(n+2){display:none}
  .ld-src .s{-webkit-line-clamp:1}
  .ld-stage{margin-top:20px;padding:0 14px}
}

/* ── TRUST STRIP ────────────────────────────────────────── */
body.landing .ld-strip{padding:56px 0 8px}
.ld-strip .row{display:flex;align-items:center;justify-content:center;gap:20px 30px;flex-wrap:wrap}
.ld-strip .h{width:100%;text-align:center;font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ld-dim);margin-bottom:18px}
.ld-strip svg{width:20px;height:20px;fill:#fff;opacity:.38;transition:opacity .2s}
.ld-strip svg:hover{opacity:.85}

/* ── STATS ──────────────────────────────────────────────── */
.ld-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.ld-stat{background:var(--ld-panel);border:1px solid var(--ld-line);border-radius:14px;padding:26px 26px 22px}
.ld-stat .num{font-family:var(--display);font-size:2.5rem;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--ld-txt)}
.ld-stat .num .u{color:var(--acc-hi);font-size:1.15rem;font-weight:600;margin-left:6px;letter-spacing:.04em}
.ld-stat .cap{color:var(--ld-mut);font-size:.9rem;margin-top:12px;line-height:1.55}
.ld-srcnote{font-size:.76rem;color:var(--ld-dim);margin-top:16px}
.ld-srcnote a{color:var(--ld-mut);text-decoration:underline;text-underline-offset:3px}
@media(max-width:820px){.ld-stats{grid-template-columns:1fr}}

/* ── CAPABILITIES (sticky head + card grid) ─────────────── */
.ld-caps{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.ld-caps-head{position:sticky;top:110px}
.ld-caps-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ld-feat{background:var(--ld-panel);border:1px solid var(--ld-line);border-radius:14px;padding:22px;transition:border-color .2s,transform .2s}
.ld-feat:hover{border-color:rgba(46,91,255,.4);transform:translateY(-2px)}
.ld-feat .ic{width:36px;height:36px;border-radius:9px;background:var(--acc-soft);color:var(--acc-hi);display:grid;place-items:center;margin-bottom:14px}
.ld-feat .ic svg{width:18px;height:18px}
.ld-feat h3{font-size:.98rem;letter-spacing:-.01em;color:var(--ld-txt);margin:0 0 6px}
.ld-feat p{font-size:.86rem;color:var(--ld-mut);margin:0;line-height:1.55}
@media(max-width:920px){
  .ld-caps{grid-template-columns:1fr;gap:30px}
  .ld-caps-head{position:static}
}
@media(max-width:560px){.ld-caps-grid{grid-template-columns:1fr}}

/* ── INTEGRATIONS ───────────────────────────────────────── */
.ld-int-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.ld-cat{background:var(--ld-panel);border:1px solid var(--ld-line);border-radius:14px;padding:20px}
.ld-cat h3{font-size:.92rem;color:var(--ld-txt);margin:0 0 4px}
.ld-cat p{font-size:.82rem;color:var(--ld-mut);margin:0}
.ld-logo-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:34px}
.ld-logo{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--ld-line);border-radius:12px;
  padding:14px 10px;color:var(--ld-mut);background:var(--ld-panel);transition:border-color .2s,color .2s}
.ld-logo:hover{border-color:rgba(46,91,255,.4);color:var(--ld-txt)}
.ld-logo svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}
.ld-logo span{font-size:.78rem;font-weight:500}
@media(max-width:920px){.ld-int-cats{grid-template-columns:1fr 1fr}.ld-logo-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ld-int-cats{grid-template-columns:1fr}.ld-logo-row{grid-template-columns:1fr 1fr}}

/* Konstelacja narzędzi — centralny wizual sekcji integracji (relokacja z hero).
   Cała animacja/rozkład = .hero-anim/.ha-* z styles.css; tu tylko kontener,
   który go centruje i skaluje w sekcji (zamiast hero-owego .viz). */
.ld-constviz{position:relative;width:100%;max-width:520px;margin:38px auto 46px;aspect-ratio:1/1}
@media(max-width:560px){.ld-constviz{max-width:340px;margin:26px auto 34px}}

/* ── WHO / COMPARE ──────────────────────────────────────── */
.ld-who{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.ld-cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:44px}
.ld-cmp-col{border:1px solid var(--ld-line);border-radius:14px;padding:26px;background:var(--ld-panel)}
.ld-cmp-col.good{border-color:rgba(46,91,255,.35);background:linear-gradient(180deg,rgba(46,91,255,.08),var(--ld-panel) 55%)}
.ld-cmp-col h3{font-size:1rem;margin:0 0 16px;color:var(--ld-txt)}
.ld-cmp-li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--ld-mut);margin-top:10px}
.ld-cmp-li svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px}
.ld-cmp-li.x svg{color:#6B6F76}.ld-cmp-li.v svg{color:var(--acc-hi)}
@media(max-width:820px){.ld-who,.ld-cmp{grid-template-columns:1fr}}

/* ── FINAL CTA ──────────────────────────────────────────── */
body.landing .ld-cta{position:relative;text-align:center;padding:130px 0 140px;overflow:hidden}
.ld-cta::before{content:"";position:absolute;inset:auto 0 -220px;height:460px;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 100%,rgba(46,91,255,.22),transparent 72%)}
.ld-cta h2{font-size:clamp(1.8rem,3.6vw,2.9rem);letter-spacing:-.03em;margin:0 0 12px;text-wrap:balance}
.ld-cta p{color:var(--ld-mut);max-width:52ch;margin:0 auto 30px}

/* ── reveal / motion ────────────────────────────────────── */
body.landing .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
body.landing .reveal.in{opacity:1;transform:none}
.plx{will-change:transform}
/* Wejście hero startuje dopiero z .page-in (fade-in strony z site.js) — wcześniej
   body ma opacity:0, więc animacja odpalona od razu kończyłaby się "za kurtyną"
   i hero pojawiałby się bez ruchu. Bez JS / z reduced motion: wszystko widoczne od razu. */
@media (prefers-reduced-motion: no-preference){
  body.landing.page-in .ld-hero h1,body.landing.page-in .ld-hero .ld-lead,
  body.landing.page-in .ld-hero .ld-ctas{animation:ld-in .8s cubic-bezier(.2,.7,.2,1) both}
  body.landing.page-in .ld-hero .ld-lead{animation-delay:.1s}
  body.landing.page-in .ld-hero .ld-ctas{animation-delay:.2s}
  body.landing.page-in .ld-stage{animation:ld-in 1s cubic-bezier(.2,.7,.2,1) .3s both}
}
@keyframes ld-in{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@media (prefers-reduced-motion: reduce){
  body.landing .reveal{opacity:1;transform:none;transition:none}
}

/* footer hairline against pure-black landing */
body.landing footer{border-top:1px solid var(--ld-line)}