/* =========================================================
   Shared stylesheet for the static pages (/o-nas.html, /clanky/*, legal pages, 404).
   Mirrors the design tokens of the React landing page (src/landing.css).
   ========================================================= */
:root{
	--ink:#0b1224;
	--ink-2:#121b36;
	--ink-3:#1b2648;
	--text:#1e293b;
	--text-soft:#475569;
	--muted:#64748b;
	--line:rgba(15,23,42,.08);
	--brand:#3b82f6;
	--brand-2:#6366f1;
	--brand-soft:#eaf2ff;
	--accent:#22d3ee;
	--grad:linear-gradient(135deg,#5ca9fb 0%,#6372ff 100%);
	--grad-text:linear-gradient(90deg,#7cc0ff 0%,#8b93ff 50%,#67e8f9 100%);
	--bg:#f6f8fc;
	--radius:20px;
	--shadow:0 10px 30px -12px rgba(15,23,42,.18);
	--shadow-lg:0 30px 60px -24px rgba(15,23,42,.32);
	--ring:0 0 0 4px rgba(99,114,255,.18);
	--font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	--font-display:"Manrope","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100% }

body{
	margin:0;
	font-family:var(--font);
	font-size:16px;
	line-height:1.7;
	color:var(--text-soft);
	background:#fff;
	-webkit-font-smoothing:antialiased;
	overflow-x:clip;
}

h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); letter-spacing:-.02em; line-height:1.2; margin:0 }
p{ margin:0 0 16px }
a{ color:var(--brand); text-decoration:none; transition:color .2s ease }
a:hover{ color:var(--brand-2) }
img{ max-width:100% }
strong{ color:var(--ink) }
::selection{ background:rgba(99,114,255,.25) }

.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 24px }

/* ---------- Top bar ---------- */
.site-nav{
	position:sticky; top:0; z-index:100;
	background:rgba(255,255,255,.86);
	backdrop-filter:blur(16px) saturate(160%);
	-webkit-backdrop-filter:blur(16px) saturate(160%);
	border-bottom:1px solid rgba(15,23,42,.06);
	box-shadow:0 10px 30px -20px rgba(15,23,42,.35);
}
.site-nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px; max-width:1280px; margin:0 auto; padding:0 24px }
.site-nav__brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--ink); letter-spacing:-.02em }
.site-nav__brand img{ width:38px; height:38px; border-radius:11px; box-shadow:0 6px 16px -6px rgba(15,23,42,.5) }
.site-nav__links{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0 }
.site-nav__links a{ position:relative; display:inline-block; padding:10px 10px; font-size:14px; font-weight:700; color:var(--text-soft); white-space:nowrap }
.site-nav__links a::after{ content:""; position:absolute; left:10px; right:10px; bottom:5px; height:2px; border-radius:2px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .25s cubic-bezier(.2,.7,.2,1) }
.site-nav__links a:hover,.site-nav__links a.is-active{ color:var(--ink) }
.site-nav__links a:hover::after,.site-nav__links a.is-active::after{ transform:scaleX(1) }
.site-nav__links a.btn{ margin-left:10px; padding:11px 20px; font-size:14px; color:#fff }
.site-nav__links a.btn::after{ content:none }
@media (max-width:900px){ .site-nav__links a:not(.btn){ display:none } }
@media (max-width:480px){ .site-nav__brand span{ display:none } }

/* ---------- Buttons ---------- */
.btn{
	position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
	padding:15px 28px; border-radius:999px; font-family:var(--font); font-size:16px; font-weight:800; line-height:1.2;
	text-decoration:none; border:1px solid transparent; cursor:pointer; overflow:hidden; text-align:center; max-width:100%;
	transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,background .25s ease,color .25s ease;
}
.btn--primary{ background:var(--grad); color:#fff; box-shadow:0 14px 30px -10px rgba(99,114,255,.75) }
.btn--primary::after{ content:""; position:absolute; top:0; left:-80%; width:50%; height:100%; background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%); transform:skewX(-20deg); transition:left .6s ease }
.btn--primary:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 20px 40px -12px rgba(99,114,255,.85) }
.btn--primary:hover::after{ left:130% }
.btn--outline{ background:#fff; color:var(--brand-2); border-color:rgba(99,114,255,.4) }
.btn--outline:hover{ background:var(--brand-soft); color:var(--brand-2); transform:translateY(-2px) }
.btn--ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.25); backdrop-filter:blur(8px) }
.btn--ghost:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5); color:#fff; transform:translateY(-2px) }
.btn--light{ background:#fff; color:var(--ink) }
.btn--light:hover{ color:var(--brand-2); transform:translateY(-2px); box-shadow:var(--shadow-lg) }

/* ---------- Page head (dark band) ---------- */
.page-head{
	position:relative; overflow:hidden; isolation:isolate; color:#fff;
	padding:clamp(56px,8vw,96px) 0 clamp(56px,7vw,80px);
	background:
		radial-gradient(900px 500px at 15% 10%,rgba(99,114,255,.35),transparent 60%),
		radial-gradient(800px 500px at 90% 85%,rgba(34,211,238,.22),transparent 60%),
		linear-gradient(160deg,#0b1224 0%,#0f1a36 50%,#141f45 100%);
}
.page-head::before{
	content:""; position:absolute; inset:0; z-index:-1;
	background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
	background-size:64px 64px;
	mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.9),transparent 75%);
	-webkit-mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.9),transparent 75%);
}
.page-head::after{
	content:""; position:absolute; z-index:-1; width:520px; height:520px; right:-160px; top:-200px; border-radius:50%;
	background:#6372ff; filter:blur(90px); opacity:.45;
}
.page-head .container{ max-width:960px }
.crumbs{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13px; font-weight:600; color:rgba(255,255,255,.6); margin-bottom:22px }
.crumbs a{ color:rgba(255,255,255,.8) }
.crumbs a:hover{ color:#fff }
.crumbs span{ opacity:.5 }
.eyebrow{
	display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
	background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); color:#bcd9ff;
	font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px;
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent) }
.page-head h1{ font-size:clamp(30px,4.4vw,50px); font-weight:800; line-height:1.1; letter-spacing:-.03em; color:#fff; margin:0 0 18px; overflow-wrap:anywhere }
.page-head .lead{ font-size:clamp(17px,1.5vw,20px); line-height:1.7; color:rgba(255,255,255,.8); max-width:760px; margin:0 }
.page-head .meta,.page-head .updated{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 18px; font-size:14px; font-weight:600; color:rgba(255,255,255,.65) }
.page-head .lead + .meta{ margin:18px 0 0 }
.page-head .meta + .lead{ margin-top:4px }
.page-head > .container > *{ animation:rise .9s cubic-bezier(.2,.7,.2,1) both }
.page-head > .container > :nth-child(2){ animation-delay:.08s }
.page-head > .container > :nth-child(3){ animation-delay:.16s }
.page-head > .container > :nth-child(4){ animation-delay:.24s }
.page-head > .container > :nth-child(5){ animation-delay:.32s }

/* ---------- Content ---------- */
.page-main{ padding:clamp(48px,6vw,80px) 0 clamp(64px,8vw,110px) }
.page-wrap{ max-width:860px; margin:0 auto; padding:0 24px }
.page-wrap--wide{ max-width:1000px }
.page-wrap h2{ font-size:clamp(22px,2.4vw,28px); font-weight:800; margin:48px 0 14px; padding-top:10px }
.page-wrap h2:first-child{ margin-top:0 }
.page-wrap h3{ font-size:18px; font-weight:800; margin:0 0 6px }
.page-wrap p,.page-wrap li{ font-size:16.5px; line-height:1.75 }
.page-wrap ul,.page-wrap ol{ padding-left:22px; margin:0 0 18px }
.page-wrap li{ margin-bottom:8px }
.page-wrap li::marker{ color:var(--brand-2); font-weight:800 }
.page-wrap article > p:first-of-type{ font-size:17px }

/* Numbered legal headings get a gradient accent */
.page-wrap h2{ position:relative }
.page-wrap h2::before{ content:""; display:block; width:40px; height:4px; border-radius:2px; background:var(--grad); margin-bottom:12px }

/* Tables */
.page-wrap table{ width:100%; border-collapse:separate; border-spacing:0; margin:20px 0 28px; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow) }
.page-wrap th,.page-wrap td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); font-size:15px; vertical-align:top }
.page-wrap th{ background:var(--bg); color:var(--ink); font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase }
.page-wrap tr:last-child td{ border-bottom:none }
.page-wrap tbody tr:hover td{ background:#fbfcfe }
.page-wrap td:first-child{ font-weight:700; color:var(--ink) }
@media (max-width:640px){ .page-wrap table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch } }

/* Tip / callout */
.tip{
	position:relative; margin:22px 0; padding:18px 20px 18px 56px; border-radius:16px;
	background:var(--brand-soft); border:1px solid rgba(99,114,255,.18); color:var(--text);
}
.tip::before{ content:"💡"; position:absolute; left:18px; top:16px; font-size:22px; line-height:1 }
.tip strong{ color:var(--brand-2) }

/* Facts (o-nas) */
.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin:8px 0 40px }
.facts div{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 18px; text-align:center; box-shadow:var(--shadow); transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease }
.facts div:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.facts strong{ display:block; font-family:var(--font-display); font-size:30px; font-weight:800; line-height:1.1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:6px }
.facts span{ font-size:13.5px; color:var(--muted) }

/* Team (o-nas) */
.team{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; margin:20px 0 10px }
.team article{ text-align:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 22px; box-shadow:var(--shadow); transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease }
.team article:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(99,114,255,.35) }
.team img{ width:132px; height:132px; object-fit:cover; border-radius:50%; margin-bottom:14px; padding:5px; background:var(--grad) }
.team h3{ font-size:19px; margin-bottom:8px }
.team p{ font-size:15px; margin:0 }

/* Timeline (o-nas) */
.timeline{ list-style:none; padding:0 0 0 28px; margin:10px 0 20px; border-left:2px solid rgba(99,114,255,.25) }
.timeline li{ position:relative; margin-bottom:16px; padding-left:8px }
.timeline li::before{ content:""; position:absolute; left:-36px; top:9px; width:12px; height:12px; border-radius:50%; background:var(--grad); box-shadow:0 0 0 4px #fff,0 0 0 5px rgba(99,114,255,.3) }
.timeline strong{ display:inline-block; font-family:var(--font-display); color:var(--brand-2); margin-right:4px }

/* Article list (clanky index) */
.list{ display:grid; gap:18px; margin:10px 0 }
.list article{ position:relative; border:1px solid var(--line); border-radius:var(--radius); padding:28px; background:#fff; box-shadow:var(--shadow); overflow:hidden; transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease }
.list article::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.2,.7,.2,1) }
.list article:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(99,114,255,.35) }
.list article:hover::before{ transform:scaleX(1) }
.list article h2{ margin:0 0 10px; font-size:22px; padding:0 }
.list article h2::before{ display:none }
.list article h2 a{ color:var(--ink) }
.list article h2 a:hover{ color:var(--brand-2) }
.list article p{ margin:0 0 12px }
.list article .meta{ font-size:13px; color:var(--muted); font-weight:600 }
.list article > a{ font-weight:800; color:var(--brand-2) }

/* Related links under articles */
.page-related{ margin:40px 0 0; padding:18px 22px; border-radius:16px; background:var(--bg); border:1px solid var(--line); font-size:15px }
.page-related strong{ color:var(--ink); margin-right:6px }

/* CTA band */
.cta{
	position:relative; overflow:hidden; margin-top:56px; padding:clamp(28px,4vw,44px); border-radius:28px; text-align:center; color:#fff;
	background:radial-gradient(900px 400px at 110% -10%,rgba(99,114,255,.45),transparent 60%),linear-gradient(160deg,var(--ink) 0%,var(--ink-2) 55%,var(--ink-3) 100%);
	box-shadow:var(--shadow-lg);
}
.cta h2{ color:#fff; margin:0 0 10px; padding:0; font-size:clamp(22px,2.6vw,30px) }
.cta h2::before{ display:none }
.cta p{ color:rgba(255,255,255,.78); max-width:640px; margin:0 auto 22px }
.cta .btn,.cta a.btn{ margin:6px }
.cta a.btn:not(.btn--primary):not(.btn--ghost){ background:var(--grad); color:#fff; box-shadow:0 14px 30px -10px rgba(99,114,255,.75) }
.cta a.btn:not(.btn--primary):not(.btn--ghost):hover{ transform:translateY(-2px) }
.cta a.btn + a.btn{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.25); box-shadow:none }
.cta a.btn + a.btn:hover{ background:rgba(255,255,255,.16) }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.7); padding:56px 0 26px; font-size:14.5px }
.site-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.1) }
@media (max-width:860px){ .site-footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:520px){ .site-footer__grid{ grid-template-columns:minmax(0,1fr) } }
.site-footer__brand{ display:flex; align-items:center; gap:10px; color:#fff; font-family:var(--font-display); font-size:18px; font-weight:800; margin-bottom:14px }
.site-footer__brand img{ width:36px; height:36px; border-radius:10px }
.site-footer h4{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:14px }
.site-footer p{ line-height:1.8; margin:0 }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.site-footer a{ color:rgba(255,255,255,.72); transition:color .2s ease,padding-left .2s ease }
.site-footer a:hover{ color:#fff }
.site-footer ul a:hover{ padding-left:4px }
.site-footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding-top:22px; font-size:13px; color:rgba(255,255,255,.5) }

/* ---------- 404 ---------- */
.page-404{ text-align:center; padding:clamp(64px,10vw,120px) 24px }
.page-404 .code{ font-family:var(--font-display); font-size:clamp(96px,18vw,160px); font-weight:800; line-height:1; letter-spacing:-.04em; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:8px }
.page-404 h1{ font-size:clamp(26px,3.6vw,38px); color:#fff; margin:0 0 12px }
.page-404 p{ color:rgba(255,255,255,.78); font-size:17px; max-width:560px; margin:0 auto 26px }
.page-404 ul{ list-style:none; padding:0; margin:0 0 30px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
.page-404 ul a{ display:inline-block; padding:10px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-weight:700; font-size:14px; transition:background .2s ease,transform .2s ease }
.page-404 ul a:hover{ background:rgba(255,255,255,.18); transform:translateY(-2px) }
.page-404 .small{ margin-top:40px; font-size:14px; color:rgba(255,255,255,.55) }
.page-404 .small a{ color:#9cc8ff }

@keyframes rise{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important } }