/* LLOXY — lloxy.pl
   Tokeny (kolory, typografia) mieszkają w tokens.css — to jedyne źródło prawdy.
   Ten plik dokłada wyłącznie warstwę strony. */

/* ── KROJE ─────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 800; font-stretch:62% 125%;
  font-display:swap; src:url('/assets/fonts/archivo-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:'Archivo'; font-style:normal; font-weight:400 800; font-stretch:62% 125%;
  font-display:swap; src:url('/assets/fonts/archivo-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-face{
  font-family:'Newsreader'; font-style:italic; font-weight:400; font-display:swap;
  src:url('/assets/fonts/newsreader-italic-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:'Newsreader'; font-style:italic; font-weight:400; font-display:swap;
  src:url('/assets/fonts/newsreader-italic-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;
}

/* ── PODSTAWY ──────────────────────────────────────────────────────── */
*{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; background:var(--bg); color:var(--fg);
  font-family:var(--font-sans); font-size:17px; line-height:1.62;
  font-synthesis-weight:none; overflow-x:hidden;
}

/* siatka loksodrom — warstwa dekoracyjna pod treścią */
body::before{
  content:""; position:fixed; inset:-10%; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(-15deg, var(--grid) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(75deg,  var(--grid) 0 1px, transparent 1px 76px);
}
:root{--grid:rgba(19,26,38,.055)}
@media (prefers-color-scheme:dark){:root{--grid:rgba(231,232,226,.045)}}
:root[data-theme="dark"]{--grid:rgba(231,232,226,.045)}
:root[data-theme="light"]{--grid:rgba(19,26,38,.055)}

main,header,footer{position:relative; z-index:1}
.wrap{max-width:1100px; margin:0 auto; padding:0 24px}

p{margin:0}
a{color:var(--accent-text); text-decoration-thickness:1px; text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent-text); outline-offset:3px; border-radius:2px}
svg{display:block}
ul{margin:0; padding:0; list-style:none}

.skip{position:absolute; left:-9999px; top:0; z-index:99; padding:12px 18px; background:var(--fg); color:var(--bg)}
.skip:focus{left:12px; top:12px}

/* ── TYPOGRAFIA ────────────────────────────────────────────────────── */
h1,h2,h3{margin:0}
h2{font-size:clamp(30px,4.6vw,50px); text-transform:uppercase}
h3{font-size:clamp(19px,2.3vw,23px); font-weight:700; font-stretch:106%; letter-spacing:-.008em}

.lab{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.ital{font-family:var(--font-serif); font-style:italic; font-weight:400}
.lead{font-size:clamp(18px,2vw,21px); line-height:1.55; max-width:60ch}
.body{color:var(--muted); max-width:64ch}
.mag{color:var(--accent-text)}
.mono{font-family:var(--font-mono)}

.stack{display:flex; flex-direction:column}
.g8{gap:8px}.g14{gap:14px}.g20{gap:20px}.g28{gap:28px}

/* ── NAWIGACJA ─────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid transparent;
  transition:border-color .2s, background .2s;
}
.nav[data-scrolled="true"]{border-bottom-color:var(--line)}
.nav-in{max-width:1100px; margin:0 auto; padding:13px 24px; display:flex; align-items:center; gap:28px}
.nav-logo{display:flex; align-items:center; color:var(--fg)}
.nav-logo svg{height:26px; width:auto}
.nav-links{display:flex; gap:24px; margin-left:auto}
.nav-links a{color:var(--muted); text-decoration:none; font-size:14.5px}
.nav-links a:hover{color:var(--fg)}
.nav-cta{
  font-size:13.5px; font-weight:600; padding:9px 16px; border-radius:2px;
  background:var(--lx-magenta); color:#fff; text-decoration:none; white-space:nowrap;
}
.nav-cta:hover{filter:brightness(1.08)}
.theme-btn{
  background:none; border:1px solid var(--line); color:var(--muted); cursor:pointer;
  width:32px; height:32px; border-radius:2px; display:grid; place-items:center; padding:0; flex:none;
}
.theme-btn:hover{color:var(--fg); border-color:var(--muted)}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-in{gap:14px}
  .nav-cta{margin-left:auto}
}

/* ── HERO ──────────────────────────────────────────────────────────── */
/* Trzy wersy hasła = trzy linie sygnetu. Środkowa jest magentowa — tak samo
   jak środkowa linia kursu w znaku. To nie jest ozdoba, to ten sam rysunek. */
.hero{padding:clamp(56px,9vw,104px) 0 clamp(32px,4.5vw,52px)}
.hero-claim{
  font-family:var(--font-sans); font-weight:500; font-stretch:92%;
  font-size:clamp(22px,3vw,30px); letter-spacing:-.03em; line-height:1; color:var(--muted);
}
.hero-claim .dot{color:var(--lx-magenta)}

.hero-lines{display:flex; flex-direction:column; gap:clamp(6px,1.1vw,12px); margin:clamp(24px,3.6vw,40px) 0}
/* Kreski leżą w stałej kolumnie i są w niej wyśrodkowane — tak samo jak trzy
   cięciwy w sygnecie: różnej długości, ale na jednej osi. Tekst dzięki temu
   trzyma równą lewą krawędź. */
.hl{display:grid; grid-template-columns:clamp(52px,7.2vw,90px) 1fr;
    align-items:center; gap:clamp(12px,1.8vw,24px)}
.hl-rule{
  justify-self:center; height:clamp(4px,.62vw,7px); border-radius:99px;
  background:var(--fg); transform:rotate(-15deg); transform-origin:center;
  width:clamp(28px,4.4vw,52px);
}
.hl:nth-child(2) .hl-rule{background:var(--lx-magenta); width:clamp(44px,7vw,84px)}
.hl-text{
  font-size:clamp(30px,6.2vw,72px); font-weight:800; font-stretch:112%;
  letter-spacing:-.028em; line-height:.98; text-transform:uppercase;
}
@media (prefers-reduced-motion:no-preference){
  .hl-rule{animation:ruleGrow .8s cubic-bezier(.2,.7,.2,1) both}
  .hl:nth-child(1) .hl-rule{animation-delay:.05s}
  .hl:nth-child(2) .hl-rule{animation-delay:.18s}
  .hl:nth-child(3) .hl-rule{animation-delay:.31s}
  .hl-text{animation:lineUp .8s cubic-bezier(.2,.7,.2,1) both}
  .hl:nth-child(1) .hl-text{animation-delay:.05s}
  .hl:nth-child(2) .hl-text{animation-delay:.18s}
  .hl:nth-child(3) .hl-text{animation-delay:.31s}
}
@keyframes ruleGrow{from{transform:rotate(-15deg) scaleX(0); opacity:0}to{transform:rotate(-15deg) scaleX(1); opacity:1}}
@keyframes lineUp{from{transform:translateY(14px); opacity:0}to{transform:none; opacity:1}}

.hero-foot{display:flex; gap:clamp(18px,3vw,34px); flex-wrap:wrap; align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-weight:600; font-size:16px; padding:13px 22px; border-radius:2px;
  background:var(--lx-magenta); color:#fff;
}
.btn:hover{filter:brightness(1.08)}
.btn-ghost{background:none; color:var(--fg); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--fg); filter:none}

/* ── SEKCJE ────────────────────────────────────────────────────────── */
section{padding:clamp(48px,6.4vw,74px) 0}
.sec-head{display:flex; flex-direction:column; gap:12px; margin-bottom:clamp(28px,4vw,44px)}
.sec-rule{display:flex; align-items:center; gap:14px}
.sec-rule::after{content:""; flex:1; height:1px; background:var(--line)}
.tick{width:16px; height:2px; background:var(--lx-magenta); transform:rotate(-15deg); flex:none}

.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.g3{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:3px;
  padding:26px; display:flex; flex-direction:column; gap:16px;
}
.card-num{font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--lx-magenta)}
.card ul{display:flex; flex-direction:column; gap:7px}
.card ul li{font-size:14.5px; color:var(--muted); position:relative; padding-left:18px}
.card ul li::before{
  content:""; position:absolute; left:0; top:10px; width:9px; height:2px;
  background:var(--muted); transform:rotate(-15deg);
}

/* lista zasad — numer + treść */
.rules{display:flex; flex-direction:column; gap:2px}
.rule{
  display:grid; grid-template-columns:auto 1fr; gap:0 22px;
  padding:22px 0; border-top:1px solid var(--line);
}
.rule:last-child{border-bottom:1px solid var(--line)}
.rule-n{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  color:var(--lx-magenta); padding-top:7px; grid-row:span 2;
}
.rule-t{font-size:clamp(19px,2.4vw,25px); font-weight:700; font-stretch:106%; letter-spacing:-.012em; line-height:1.2}
.rule-d{color:var(--muted); font-size:15.5px; margin-top:8px; max-width:62ch}
@media (max-width:620px){
  .rule{grid-template-columns:1fr; gap:6px}
  .rule-n{grid-row:auto; padding-top:0}
}

/* lista "nie" */
.no-list{display:flex; flex-direction:column; gap:13px}
.no-list li{position:relative; padding-left:28px; color:var(--muted); font-size:16px}
.no-list li::before{
  content:""; position:absolute; left:0; top:12px; width:15px; height:2px;
  background:var(--lx-haze); transform:rotate(-15deg);
}
.no-list li b{color:var(--fg); font-weight:600}

/* stack technologiczny */
.stack-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px}
.stack-col{display:flex; flex-direction:column; gap:10px}
.stack-col h3{font-size:14px; text-transform:uppercase; letter-spacing:.1em; font-family:var(--font-mono); font-weight:500; color:var(--muted)}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{
  font-size:13.5px; padding:5px 11px; border:1px solid var(--line);
  border-radius:2px; color:var(--fg); background:var(--surface);
}

/* ── KONTAKT ───────────────────────────────────────────────────────── */
.contact{
  background:var(--lx-ink); color:var(--lx-paper); border-radius:4px;
  padding:clamp(32px,5vw,56px); position:relative; overflow:hidden;
}
.contact::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(-15deg, rgba(222,27,118,.16) 0 2px, transparent 2px 84px);
}
.contact > *{position:relative}
.mail{
  font-size:clamp(24px,4.6vw,46px); font-weight:800; font-stretch:112%;
  letter-spacing:-.025em; color:var(--lx-paper); text-decoration:none; display:inline-block;
  border-bottom:3px solid var(--lx-magenta); line-height:1.15; align-self:flex-start;
}
.mail:hover{color:var(--lx-magenta)}

/* ── STOPKA ────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line); padding:34px 0 56px; margin-top:clamp(40px,6vw,72px)}
.foot-in{display:flex; gap:26px; flex-wrap:wrap; justify-content:space-between; align-items:flex-start}
.foot-legal{font-family:var(--font-mono); font-size:11.5px; line-height:1.9; color:var(--muted); letter-spacing:.02em}
.foot-links{display:flex; gap:18px; flex-wrap:wrap}
.foot-links a{color:var(--muted); text-decoration:none; font-size:14px}
.foot-links a:hover{color:var(--fg)}

/* ── UJAWNIANIE PRZY PRZEWIJANIU ───────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.in{opacity:1; transform:none}
}

/* Motto trzyma się swojej zasady: zawsze małe litery, zawsze z kropką. */
.foot-motto{font-size:15px; font-stretch:92%; letter-spacing:-.02em; color:var(--muted)}
.foot-motto .dot{color:var(--lx-magenta)}