/* OIRIX: site styles (Nexus design). Fonts: /assets/css/fonts.css */
:root{
  --ink:#070B1F;        /* deep space navy */
  --ink-2:#0E1433;
  --glacier:#7FE3FF;    /* members */
  --violet:#9B7BFF;     /* AI */
  --coral:#FF8FB1;      /* matches */
  --mint:#5FFFD0;
  --text:#E8ECFF;
  --soft:#CFD5F7;
  --muted:#9BA5D6;
  --line:#2A3366;
  --display:"Syne",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--text);font:400 17px/1.6 var(--body);overflow-x:hidden}
#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
/* without WebGL the page keeps a calm star-less background */
.no-webgl body{background:radial-gradient(ellipse at 70% 30%,#16205a 0,var(--ink) 60%) fixed}
a{color:inherit}
:focus-visible{outline:2px solid var(--glacier);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--text);color:var(--ink);padding:10px 14px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}

/* ---------- header ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:22px clamp(16px,4vw,48px) 34px;background:linear-gradient(#070B1F 30%,#070B1F00)}
.logo{display:block;color:var(--text);line-height:0}
.logo img{height:16px;width:auto;display:block}
.bar-r{display:flex;gap:14px;align-items:center}
.btn,.btn-s{display:inline-block;font:600 15px/1 var(--body);text-decoration:none;border-radius:999px;cursor:pointer;border:0;transition:background .25s,color .25s,transform .25s}
.btn{background:var(--text);color:var(--ink);padding:16px 26px}
.btn:hover{background:var(--glacier);transform:translateY(-1px)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.btn-s{padding:11px 18px;border:1px solid #ffffff40;color:var(--text);background:#070B1Fd9;white-space:nowrap}
.btn-s:hover{border-color:var(--glacier);color:var(--glacier)}

/* language switch */
.ls{display:inline-flex;gap:2px;align-items:center;font:600 13px/1 var(--body);letter-spacing:.04em;border:1px solid var(--line);border-radius:999px;padding:3px;background:#0E1433e6}
.ls a{padding:7px 10px;border-radius:999px;text-decoration:none;opacity:.7;transition:opacity .2s,background .2s}
.ls a:hover{opacity:1}
.ls a[aria-current]{background:var(--glacier);color:var(--ink);opacity:1}

/* ---------- sections ---------- */
main{position:relative;z-index:1}
section{padding:0 clamp(16px,6vw,96px)}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
h1{font:600 clamp(46px,8.2vw,132px)/.95 var(--display);letter-spacing:-.04em;margin-bottom:28px}
html[lang=pl] h1{font-size:clamp(36px,7vw,116px)}
h1 .ln{display:block;overflow:hidden}
h1 .ln span{display:inline-block}
.lead{font-size:clamp(18px,1.6vw,21px);max-width:34em;color:var(--soft);margin-bottom:36px}
.hint{margin-top:48px;color:var(--muted);font-size:14px;max-width:30em}
.hint .touch{display:none}
@media (pointer:coarse){.hint .mouse{display:none}.hint .touch{display:inline}}

.ch{min-height:120vh;display:flex;align-items:center}
.ch .inner{max-width:620px}
h2{font:700 clamp(34px,5vw,68px)/1.02 var(--display);letter-spacing:-.025em;margin-bottom:22px}
.ch p{color:var(--soft);font-size:19px;max-width:30em}

.lab{min-height:130vh;display:flex;align-items:center}
.lab .panel{max-width:460px;background:#0E1433f2;border:1px solid var(--line);border-radius:22px;padding:34px}
.lab h2{font-size:clamp(30px,3.4vw,44px)}
.lab p{color:var(--soft)}
.lab .btn{margin-top:22px;background:var(--coral)}
.lab .btn:hover{background:#ffc2d4}
.match{margin-top:24px;border-top:1px solid var(--line);padding-top:20px;min-height:120px}
.match .who{font:700 20px/1.25 var(--display);color:var(--coral);margin-bottom:6px}
.match .why{color:#dfe3ff}
.match .next{margin-top:10px;color:var(--muted);font-size:15px}
.note{font-size:13px;color:var(--muted);margin-top:16px}

.concepts{padding-top:20vh;padding-bottom:16vh}
.concepts .head{max-width:640px;margin-bottom:60px}
.concepts .head p{color:var(--soft)}
.clist{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));border-top:1px solid var(--line);max-width:1200px;list-style:none}
.c{padding:34px 28px 38px 0;border-bottom:1px solid var(--line)}
.c h3{font:700 26px/1.1 var(--display);margin-bottom:12px;display:flex;gap:12px;align-items:center}
.c h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--violet);box-shadow:0 0 16px var(--violet);flex:none}
.c p{color:var(--soft);max-width:28em}

.process{padding-bottom:18vh}
.process ol{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:28px;max-width:1200px;margin-top:40px}
.process li{counter-increment:s;padding-top:20px;border-top:2px solid var(--glacier)}
.process li::before{content:counter(s);font:800 44px/1 var(--display);color:var(--glacier);display:block;margin-bottom:14px}
.process li b{display:block;font:700 20px/1.2 var(--display);margin-bottom:8px}
.process li span{color:var(--soft)}

/* ---------- contact ---------- */
.contact{padding-bottom:12vh;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:56px;max-width:1200px;scroll-margin-top:80px}
.contact p{color:var(--soft);max-width:26em}
form{background:#0E1433f5;border:1px solid var(--line);border-radius:22px;padding:32px;display:grid;gap:18px}
label{display:grid;gap:8px;font-size:14px;color:var(--muted)}
input,textarea{font:inherit;color:var(--text);background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:14px 16px;width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--glacier)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--coral)}
textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{font-size:15px;min-height:1.4em}
.status.ok{color:var(--mint)}
.status.err{color:var(--coral)}
.li{display:inline-flex;gap:10px;align-items:center;margin-top:24px;text-decoration:none;border-bottom:1px solid #ffffff40;padding-bottom:4px}
.li:hover{color:var(--glacier);border-color:var(--glacier)}

/* ---------- footer ---------- */
footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:28px clamp(16px,6vw,96px);display:flex;flex-wrap:wrap;gap:12px 32px;color:var(--muted);font-size:14px;background:var(--ink)}
.company{display:contents}
/* company / brand name set in the logo typeface (Syne), a step lighter than the logo for small sizes */
.brand{font-family:var(--display);font-weight:700;letter-spacing:.04em;color:var(--text)}

/* ---------- "available in Polish" suggestion ---------- */
.lb{position:fixed;left:50%;bottom:24px;z-index:50;width:min(640px,calc(100vw - 32px));transform:translate(-50%,140%);opacity:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:center;padding:18px 20px;border-radius:26px;background:#0E1433f5;color:var(--text);border:1px solid var(--line);box-shadow:0 24px 60px -20px #0008;font:400 16px/1.45 var(--body);transition:transform .7s cubic-bezier(.2,1.3,.3,1),opacity .4s}
.lb.on{transform:translate(-50%,0);opacity:1}
.lb.off{transform:translate(-50%,140%);opacity:0;transition:transform .45s ease-in,opacity .3s}
.lb-mark{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--body);letter-spacing:.04em;color:var(--ink);background:var(--glacier);position:relative}
.lb-mark::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--glacier);opacity:.6;animation:lbp 2.4s ease-out infinite}
@keyframes lbp{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.lb p b{display:block;font-weight:700;font-size:17px}
.lb-act{grid-column:2;display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.lb-act a,.lb-act button{font:600 15px/1 var(--body);padding:12px 18px;border-radius:999px;cursor:pointer;text-decoration:none}
.lb-yes{background:var(--glacier);color:var(--ink);border:0}
.lb-no{background:transparent;color:var(--text);border:1px solid var(--line)}
.lb-no:hover{border-color:var(--text)}

/* ---------- simple pages (privacy, 404) ---------- */
.page{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:140px clamp(16px,6vw,48px) 80px}
.page h1{font-size:clamp(40px,6vw,72px);margin-bottom:24px}
.page h2{font-size:clamp(24px,3vw,32px);margin:40px 0 12px}
.page p,.page li{color:var(--soft);margin-bottom:12px;max-width:62ch}
.page ul{padding-left:22px}
.page .meta{color:var(--muted);font-size:14px}

@media (max-width:700px){
  .lab{align-items:flex-end;padding-bottom:12vh}
  .ch{min-height:100vh}
}
@media (max-width:520px){
  .bar-r{gap:8px}
  .btn-s{font-size:13px;padding:10px 12px}
  .ls a{padding:6px 8px}
  .lb{grid-template-columns:1fr;bottom:16px}
  .lb-mark{display:none}
  .lb-act{grid-column:1;flex-direction:column}
  .lb-act a,.lb-act button{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lb,.lb.off{transition:opacity .2s}
  .lb-mark::after{animation:none}
}