/* Shared by the landing page and the legal pages: brand fonts, tokens, Liquid Glass, nav and footer. */

/* strintech.dev ships only the latin subset; latin-ext is needed for č, ć, š, ž, đ. */
@font-face{font-family:Rajdhani;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/rajdhani-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Rajdhani;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/rajdhani-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:Rajdhani;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/rajdhani-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Rajdhani;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/rajdhani-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:Rajdhani;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/rajdhani-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Rajdhani;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/rajdhani-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Orbitron has no latin-ext glyphs, so it is only used for ASCII brand text. */
@font-face{font-family:Orbitron;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/orbitron-latin-700-normal.woff2) format("woff2")}

:root{
  --brand:#f36f41; --copper:#d47c59; --copper-2:#ff9e75;
  --bg:#f4f1ee; --fg:#1a1614; --fg-2:#574e49; --fg-3:#6b615b;
  --line:rgba(26,22,20,.1); --line-2:rgba(26,22,20,.18);
  /* #f36f41 is under 4.5:1 on light backgrounds, so text accents use the darker ink. */
  --accent:#f36f41; --accent-ink:#b3441b; --accent-soft:rgba(243,111,65,.12); --on-accent:#0a0a0a;
  --film:#0a0a0a; --film-2:#17110e;
  --ok:#11704a; --warn:#855c00; --info:#2f5fd0;
  --glass:rgba(255,255,255,.58); --glass-strong:rgba(255,255,255,.78);
  --glass-edge:rgba(255,255,255,.75); --glass-hi:rgba(255,255,255,.9);
  --glass-solid:#fbf9f7; --nav-bg:rgba(250,248,246,.74);
  --shadow:0 1px 1px rgba(26,22,20,.04),0 8px 24px -10px rgba(26,22,20,.16),0 30px 60px -30px rgba(26,22,20,.18);
  --display:"Rajdhani",-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --brandfont:"Orbitron","Rajdhani",system-ui,sans-serif;
  --radius:20px; --gutter:clamp(18px,4vw,48px);
  --spring:cubic-bezier(.2,.9,.3,1.15);
  color-scheme:only light;
}
:root[data-theme="dark"]{
  --bg:#0a0a0a; --fg:#f2ede9; --fg-2:#b5aba5; --fg-3:#857b75;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --accent:#f36f41; --accent-ink:#ff9e75; --accent-soft:rgba(243,111,65,.16);
  --ok:#3ccf91; --warn:#f0b43c; --info:#7da2ff;
  --glass:rgba(30,24,21,.52); --glass-strong:rgba(30,24,21,.72);
  --glass-edge:rgba(255,255,255,.1); --glass-hi:rgba(255,255,255,.14);
  --glass-solid:#1a1512; --nav-bg:rgba(14,11,10,.74);
  --shadow:0 1px 1px rgba(0,0,0,.4),0 10px 30px -12px rgba(0,0,0,.7),0 30px 60px -30px rgba(0,0,0,.6);
  color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Ambient color behind the glass, so surfaces have something to refract. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(42% 38% at 88% 18%,rgba(243,111,65,.16),transparent 70%),
  radial-gradient(38% 34% at 6% 58%,rgba(212,124,89,.14),transparent 70%),
  radial-gradient(40% 36% at 70% 96%,rgba(255,158,117,.12),transparent 70%)}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.02;font-weight:700;letter-spacing:-.005em}
p{margin:0}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- Liquid Glass ---------- */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi),var(--shadow);border-radius:var(--radius)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glass,.nav{background:var(--glass-solid)}
}
/* Many blurred layers are heavy on phones and glitch in iOS Safari; keep blur on the nav only. */
@media (max-width:760px){
  .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-strong)}
  body::before{position:absolute;height:100%}
  body{position:relative}
}
@media (prefers-reduced-transparency:reduce){
  .glass{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
  body::before{display:none}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;font-weight:600;font-size:.94rem;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:var(--body);transition:transform .3s var(--spring),background .2s ease,box-shadow .2s ease}
.btn:active{transform:scale(.97)}
.btn-accent{background:var(--brand);color:var(--on-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 24px -10px var(--brand)}
.btn-accent:hover{background:var(--copper-2)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-line{background:var(--glass);color:var(--fg);border-color:var(--line-2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-line:hover{border-color:var(--fg)}
.btn-sm{padding:7px 14px;font-size:.86rem}
.theme-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--glass);color:var(--fg);cursor:pointer;padding:0;transition:background .2s}
.theme-btn:hover{border-color:var(--fg)}
.theme-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.theme-btn .moon,:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top,0px);background:var(--nav-bg);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);color:var(--fg);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:56px;gap:16px}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand{gap:10px;color:inherit}
.brand img{height:32px;width:32px;display:block;border-radius:8px}
.brand span{display:grid;line-height:1.05}
.brand small{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.brand b{font-family:var(--display);font-size:1.12rem;font-weight:700;letter-spacing:.005em}
.brand-word{font-family:var(--display);font-weight:700;font-size:1.45rem;letter-spacing:.04em;line-height:1}
.nav-actions{display:flex;align-items:center;gap:10px}
@media (max-width:520px){
  .nav .wrap{height:54px;gap:10px}
  .brand{min-width:0;gap:8px}
  .brand small{display:none}
  .brand b{font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav .btn-sm{display:none}
  .theme-btn{width:36px;height:36px;flex:none}
}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:.9rem;color:var(--fg-2)}
.nav ul a{text-decoration:none;transition:color .2s}
.nav ul a:hover{color:var(--fg)}
@media (max-width:760px){.nav ul{display:none}}

/* ---------- footer ---------- */
footer{padding-block:36px calc(36px + env(safe-area-inset-bottom,0px));font-size:.86rem;color:var(--fg-2);border-top:1px solid var(--line)}
footer .wrap{display:grid;gap:18px}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot-top img{height:15px;width:auto;display:block}
.foot-links{display:flex;gap:6px 18px;flex-wrap:wrap}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.foot-bottom{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;color:var(--fg-3)}

/* ---------- legal pages ---------- */
.legal{padding-block:clamp(40px,7vw,88px)}
.legal .wrap{max-width:820px}
.legal article{padding:clamp(24px,5vw,56px)}
.legal h1{font-size:clamp(2.4rem,6vw,3.6rem)}
.legal .updated{margin-top:10px;color:var(--fg-3);font-size:.9rem}
.legal h2{font-size:1.5rem;margin-top:36px;margin-bottom:10px}
.legal p,.legal li{color:var(--fg-2)}
.legal p+p,.legal ul+p,.legal table+p{margin-top:12px}
.legal ul{padding-left:1.2em;margin:10px 0 0}
.legal li+li{margin-top:4px}
.legal a{color:var(--accent-ink);font-weight:600;text-underline-offset:3px}
.legal address{font-style:normal;color:var(--fg-2)}
.legal table{width:100%;border-collapse:collapse;margin-top:12px;font-size:.92rem}
.legal th,.legal td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--fg-2)}
.legal th{color:var(--fg);font-weight:600}
.legal td code{font-family:var(--mono);font-size:.85em}
.back{display:inline-flex;margin-bottom:22px;font-size:.92rem;color:var(--accent-ink);text-decoration:none;font-weight:600}
.back:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){.legal table,.legal thead,.legal tbody,.legal tr,.legal th,.legal td{display:block}.legal thead{display:none}.legal td{border:0;padding:2px 0}.legal tr{padding:10px 0;border-bottom:1px solid var(--line)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}