/* ════════════════════════════════════════════════════════
   meta.fabryka.ai — fabryka tokenów
   industrial / blueprint dark theme
   ════════════════════════════════════════════════════════ */
:root{
  --bg:        #0a0a0c;
  --bg-2:      #0f1013;
  --panel:     #131418;
  --panel-2:   #181a1f;
  --ink:       #f3efe6;
  --ink-dim:   #97928a;
  --ink-faint: #5d5a54;
  --line:      rgba(243,239,230,.09);
  --line-2:    rgba(243,239,230,.16);
  --amber:     #ffb627;
  --amber-2:   #ffd27a;
  --amber-deep:#c47e07;
  --red:       #e5484d;
  --green:     #46c267;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Archivo", system-ui, sans-serif;
  --disp: "Anton", "Archivo", sans-serif;
  --maxw: 1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:
    radial-gradient(120% 80% at 80% -10%, rgba(255,182,39,.10), transparent 60%),
    radial-gradient(90% 60% at 0% 0%, rgba(255,182,39,.05), transparent 55%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
code{font-family:var(--mono)}

/* grain overlay */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ── ticker ─────────────────────────────────────────────── */
.ticker{
  border-bottom:1px solid var(--line); background:var(--bg-2);
  overflow:hidden; white-space:nowrap; font-family:var(--mono);
  font-size:11px; letter-spacing:.18em; color:var(--ink-dim);
}
.ticker__track{
  display:inline-flex; gap:1.4rem; align-items:center; padding:7px 0;
  animation:marquee 38s linear infinite; will-change:transform;
}
.ticker__track span{display:inline-block}
.ticker .dot{color:var(--amber);font-size:8px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── nav ────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem clamp(1rem,4vw,2.5rem);
  background:rgba(10,10,12,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:-.02em}
.brand__mark{color:var(--amber);font-size:1.15rem;transform:translateY(1px)}
.brand__name{font-size:1.02rem}
.brand__dot{color:var(--amber)}
.nav__links{display:flex;align-items:center;gap:clamp(.8rem,2.5vw,1.8rem);font-size:.9rem}
.nav__links a{color:var(--ink-dim);transition:color .2s}
.nav__links a:hover{color:var(--ink)}
.status{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--ink-dim);display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid var(--line);padding:.3rem .6rem;border-radius:999px;
}
.status__dot{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);display:inline-block}
.status.is-online .status__dot{background:var(--green);box-shadow:0 0 0 0 rgba(70,194,103,.6);animation:pulse 2s infinite}
.status.is-down .status__dot{background:var(--red)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(70,194,103,.5)}70%{box-shadow:0 0 0 7px rgba(70,194,103,0)}100%{box-shadow:0 0 0 0 rgba(70,194,103,0)}}

/* ── hero ───────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:clamp(3.5rem,9vw,7rem) 0 clamp(3rem,7vw,5.5rem)}
.hero__grid{
  position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 80%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 80%);
}
.hero__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
.kicker{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);margin:0 0 1.4rem;
}
.hero__title{
  font-family:var(--disp);font-weight:400;line-height:.86;margin:0;
  font-size:clamp(3.4rem,15vw,11rem);letter-spacing:.005em;text-transform:uppercase;
}
.hero__title span{display:block;text-shadow:0 0 60px rgba(0,0,0,.6)}
.hero__title--amber{
  color:transparent;-webkit-text-stroke:1.5px var(--amber);
  background:linear-gradient(180deg,var(--amber-2),var(--amber-deep));
  -webkit-background-clip:text;background-clip:text;
}
.hero__lead{max-width:46ch;margin:1.8rem 0 0;font-size:clamp(1rem,1.5vw,1.18rem);color:var(--ink-dim)}
.hero__lead strong{color:var(--ink);font-weight:600}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:2.2rem 0 0}
.hero__stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  margin:3.2rem 0 0;border:1px solid var(--line);background:var(--line);
  border-radius:12px;overflow:hidden;max-width:760px;
}
.hero__stats>div{background:var(--bg);padding:1.1rem 1.2rem}
.hero__stats dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 .35rem}
.hero__stats dd{margin:0;font-family:var(--disp);font-size:1.7rem;line-height:1;color:var(--ink)}
.hero__stats dd#statCheapest,.hero__stats dd#statModels{color:var(--amber)}

/* ── buttons ────────────────────────────────────────────── */
.btn{
  font-family:var(--sans);font-weight:700;font-size:.92rem;letter-spacing:.01em;
  padding:.85rem 1.4rem;border-radius:9px;border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease, background .2s, color .2s, border-color .2s;
  display:inline-flex;align-items:center;gap:.5rem;line-height:1;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--amber);color:#1a1205;border-color:var(--amber)}
.btn--primary:hover{background:var(--amber-2);box-shadow:0 6px 30px -8px rgba(255,182,39,.5)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn--block{width:100%;justify-content:center}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── value props ────────────────────────────────────────── */
.props{
  max-width:var(--maxw);margin:0 auto;padding:clamp(2rem,5vw,4rem) clamp(1rem,4vw,2.5rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.prop{background:var(--bg);padding:1.8rem 1.6rem;position:relative;transition:background .25s}
.prop:hover{background:var(--panel)}
.prop__no{font-family:var(--mono);font-size:.72rem;color:var(--amber);letter-spacing:.1em}
.prop h3{font-family:var(--sans);font-weight:800;font-size:1.18rem;margin:.7rem 0 .5rem;letter-spacing:-.01em}
.prop p{margin:0;color:var(--ink-dim);font-size:.92rem}
.prop code{color:var(--amber-2);font-size:.85em;background:rgba(255,182,39,.08);padding:.05em .35em;border-radius:4px}

/* ── sections ───────────────────────────────────────────── */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,7vw,6rem) clamp(1rem,4vw,2.5rem)}
.section__head{margin:0 0 2.6rem;max-width:60ch}
.section__no{font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;color:var(--amber)}
.section__head h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(2rem,5vw,3.4rem);line-height:1;margin:.6rem 0 .8rem;letter-spacing:.01em}
.section__head p{margin:0;color:var(--ink-dim);font-size:1.02rem}
.section__head code{color:var(--amber-2);font-size:.9em}

/* ── models / spec sheet ────────────────────────────────── */
.models{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.2rem}
.models__loading{font-family:var(--mono);color:var(--ink-faint);font-size:.9rem}
.modelcard{
  border:1px solid var(--line-2);border-radius:14px;background:
    linear-gradient(180deg,var(--panel),var(--bg-2));
  padding:1.6rem;position:relative;overflow:hidden;transition:transform .2s,border-color .2s;
}
.modelcard::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:22px 100%;opacity:.4;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 40%);mask-image:linear-gradient(90deg,#000,transparent 40%);
}
.modelcard:hover{transform:translateY(-3px);border-color:var(--amber)}
.modelcard__top{display:flex;align-items:baseline;justify-content:space-between;position:relative}
.modelcard__id{font-family:var(--mono);font-size:.7rem;color:var(--ink-faint);letter-spacing:.1em}
.modelcard h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:1.9rem;margin:.5rem 0 .2rem;letter-spacing:.01em;position:relative}
.modelcard__sub{margin:0 0 1.3rem;color:var(--ink-dim);font-size:.85rem;font-family:var(--mono);position:relative}
.pricegrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;position:relative}
.pricegrid>div{background:var(--bg);padding:.95rem 1rem}
.pricegrid dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 .35rem}
.pricegrid dd{margin:0;font-family:var(--disp);font-size:1.55rem;line-height:1;color:var(--amber)}
.pricegrid dd small{font-size:.55em;color:var(--ink-dim);font-family:var(--mono);letter-spacing:.05em}
.modelcard__req{margin:.9rem 0 0;font-family:var(--mono);font-size:.74rem;color:var(--ink-dim);position:relative}
.modelcard__req b{color:var(--ink)}
.modelcard__try{margin-top:1.3rem;position:relative}

/* ── bench (playground) ─────────────────────────────────── */
.section--bench{position:relative}
.bench{display:grid;grid-template-columns:300px 1fr;gap:1.4rem;align-items:start}
.keycard{
  border:1px solid var(--line-2);border-radius:14px;background:var(--panel);
  padding:1.4rem;position:sticky;top:80px;
}
.keycard__head{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--ink-dim);display:flex;align-items:center;gap:.5rem;margin:0 0 1rem}
.led{width:9px;height:9px;border-radius:2px;background:var(--ink-faint);box-shadow:0 0 8px rgba(0,0,0,.4)}
.keycard.is-active .led{background:var(--green);box-shadow:0 0 10px var(--green)}
.keycard__hint{color:var(--ink-dim);font-size:.86rem;margin:0 0 1rem}
.keycard__fine,.keycard__label{font-family:var(--mono);font-size:.68rem;color:var(--ink-faint);letter-spacing:.06em}
.keycard__fine{margin:.7rem 0 0;text-align:center}
.keycard__label{display:block;margin:0 0 .4rem;text-transform:uppercase}
.keyrow{display:flex;gap:.5rem;align-items:stretch}
.keyrow__val{flex:1;background:var(--bg);border:1px solid var(--line-2);border-radius:8px;padding:.6rem .7rem;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--amber-2)}
.iconbtn{background:var(--bg);border:1px solid var(--line-2);border-radius:8px;color:var(--ink-dim);cursor:pointer;padding:0 .7rem;font-size:1rem;transition:.2s}
.iconbtn:hover{color:var(--amber);border-color:var(--amber)}
.keycard__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:1.1rem 0}
.keycard__meta dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 .25rem}
.keycard__meta dd{margin:0;font-family:var(--mono);font-size:.9rem;color:var(--ink);font-weight:500}

.terminal{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:#0c0d10;display:flex;flex-direction:column;min-height:440px}
.terminal__bar{display:flex;align-items:center;gap:.9rem;padding:.7rem 1rem;background:var(--panel-2);border-bottom:1px solid var(--line)}
.terminal__dots{display:flex;gap:.4rem}
.terminal__dots i{width:11px;height:11px;border-radius:50%;background:var(--line-2)}
.terminal__dots i:first-child{background:#e5704d}.terminal__dots i:nth-child(2){background:var(--amber)}.terminal__dots i:nth-child(3){background:var(--green)}
.terminal__model{margin-left:.4rem;background:var(--bg);color:var(--ink);border:1px solid var(--line-2);border-radius:7px;padding:.35rem .6rem;font-family:var(--mono);font-size:.8rem;cursor:pointer}
.terminal__live{margin-left:auto;font-family:var(--mono);font-size:.74rem;color:var(--ink-dim);letter-spacing:.05em}
.terminal__live.is-busy{color:var(--amber)}
.terminal__log{flex:1;padding:1.2rem;overflow-y:auto;max-height:46vh;font-size:.92rem;display:flex;flex-direction:column;gap:1rem}
.msg{max-width:90%;white-space:pre-wrap;word-break:break-word}
.msg--sys{font-family:var(--mono);font-size:.8rem;color:var(--ink-faint);max-width:100%}
.msg--user{align-self:flex-end;background:var(--amber);color:#1a1205;padding:.7rem 1rem;border-radius:12px 12px 2px 12px;font-weight:500}
.msg--bot{align-self:flex-start;background:var(--panel);border:1px solid var(--line);padding:.8rem 1.05rem;border-radius:12px 12px 12px 2px;color:var(--ink)}
.msg--bot .cursor{display:inline-block;width:.55em;height:1em;background:var(--amber);transform:translateY(2px);animation:blink 1s steps(1) infinite}
.msg--err{align-self:flex-start;background:rgba(229,72,77,.1);border:1px solid rgba(229,72,77,.4);color:#ff9b9e;padding:.7rem 1rem;border-radius:10px;font-family:var(--mono);font-size:.82rem}
.msg__meta{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.66rem;color:var(--ink-faint);letter-spacing:.05em}
@keyframes blink{50%{opacity:0}}
.terminal__input{display:flex;align-items:flex-end;gap:.6rem;padding:.8rem 1rem;border-top:1px solid var(--line);background:var(--panel-2)}
.prompt-caret{color:var(--amber);font-family:var(--mono);font-size:1.1rem;padding-bottom:.55rem}
#prompt{flex:1;resize:none;background:transparent;border:none;color:var(--ink);font-family:var(--sans);font-size:.95rem;line-height:1.5;max-height:140px;outline:none;padding:.55rem 0}
#prompt::placeholder{color:var(--ink-faint)}

/* ── code tabs ──────────────────────────────────────────── */
.code-tabs{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:#0c0d10}
.code-tabs__bar{display:flex;background:var(--panel-2);border-bottom:1px solid var(--line)}
.tab{background:transparent;border:none;border-right:1px solid var(--line);color:var(--ink-dim);font-family:var(--mono);font-size:.8rem;padding:.85rem 1.2rem;cursor:pointer;transition:.2s}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--amber);background:#0c0d10;box-shadow:inset 0 -2px 0 var(--amber)}
.code{position:relative;margin:0;padding:1.4rem 1.5rem;display:none;overflow-x:auto}
.code.is-active{display:block}
.code code{font-size:.85rem;line-height:1.7;color:#d7e0e8;white-space:pre}
.copy{position:absolute;top:.8rem;right:.8rem;background:var(--panel);border:1px solid var(--line-2);color:var(--ink-dim);font-family:var(--mono);font-size:.7rem;padding:.35rem .65rem;border-radius:6px;cursor:pointer;transition:.2s}
.copy:hover{color:var(--amber);border-color:var(--amber)}

/* ── economics strip ────────────────────────────────────── */
.econ{max-width:var(--maxw);margin:0 auto;padding:clamp(2.5rem,6vw,5rem) clamp(1rem,4vw,2.5rem) clamp(3rem,8vw,6rem);text-align:center}
.econ__big{font-family:var(--disp);text-transform:uppercase;font-size:clamp(2.2rem,7vw,5rem);line-height:.95;margin:0}
.econ__big span{color:transparent;-webkit-text-stroke:1.5px var(--amber);background:linear-gradient(180deg,var(--amber-2),var(--amber-deep));-webkit-background-clip:text;background-clip:text}
.econ__sub{max-width:62ch;margin:1.4rem auto 0;color:var(--ink-dim);font-size:1.05rem}
.econ__sub strong{color:var(--amber-2)}

/* ── footer ─────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);background:var(--bg-2);padding:clamp(2.5rem,5vw,4rem) clamp(1rem,4vw,2.5rem) 2.5rem}
.foot__brand{font-family:var(--disp);font-size:2rem;text-transform:uppercase;letter-spacing:.02em}
.foot__brand span{color:var(--amber)}
.foot__cols{display:flex;flex-wrap:wrap;gap:2.5rem 4rem;margin:2rem 0}
.foot__cols h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 .8rem}
.foot__cols a{display:block;color:var(--ink-dim);font-size:.92rem;margin:.35rem 0;transition:.2s}
.foot__cols a:hover{color:var(--amber)}
.foot__fine{font-family:var(--mono);font-size:.72rem;color:var(--ink-faint);border-top:1px solid var(--line);padding-top:1.5rem;margin:1.5rem 0 0}

/* ── toast ──────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:2rem;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--bg);font-weight:600;font-size:.88rem;
  padding:.75rem 1.3rem;border-radius:10px;z-index:9000;opacity:0;
  transition:opacity .25s,transform .25s;box-shadow:0 14px 40px -10px rgba(0,0,0,.6);
}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── reveal animation ───────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);animation:reveal .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--d,0)*90ms + 120ms)}
@keyframes reveal{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none}
  .ticker__track{animation:none}
}

/* ── responsive ─────────────────────────────────────────── */
@media(max-width:820px){
  .bench{grid-template-columns:1fr}
  .keycard{position:static}
  .hero__stats{grid-template-columns:repeat(2,1fr)}
  .nav__links a:not(.status):nth-child(-n+3){display:none}
}
@media(max-width:480px){
  .hero__stats{grid-template-columns:1fr 1fr}
  .pricegrid{grid-template-columns:1fr}
}