:root{
  color-scheme:dark;
  --bg:#0f1117;
  --surface:#161922;
  --surface-2:#1c202a;
  --border:rgba(177,184,211,.14);
  --border-strong:rgba(183,163,249,.28);
  --text:#f2f1f8;
  --muted:#b9bfcd;
  --subtle:#7f8798;
  --violet:#b7a3f9;
  --mint:#96dbc8;
  --shadow:0 28px 70px rgba(0,0,0,.34);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(900px 520px at 10% -10%,rgba(123,91,220,.14),transparent 62%),
    radial-gradient(900px 560px at 90% 8%,rgba(80,209,184,.10),transparent 60%),
    linear-gradient(180deg,#11131a 0%,#0e1015 100%);
  color:var(--text);
  font:16px/1.72 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 68%);
}

.ambient{
  position:fixed;
  width:420px;
  height:420px;
  border-radius:50%;
  filter:blur(110px);
  opacity:.10;
  pointer-events:none;
  z-index:0;
}
.ambient-left{left:-220px;top:25%;background:var(--violet)}
.ambient-right{right:-240px;top:48%;background:var(--mint)}

main{
  position:relative;
  z-index:1;
  width:min(920px,calc(100% - 36px));
  margin:0 auto;
  padding:42px 0 48px;
}

.hero{
  position:relative;
  overflow:hidden;
  padding:30px 32px 28px;
  border:1px solid var(--border-strong);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(31,34,45,.92),rgba(20,23,31,.88));
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.035);
}
.hero::before{
  content:"";
  position:absolute;
  width:420px;
  height:1px;
  right:-70px;
  top:86px;
  background:linear-gradient(90deg,transparent,var(--mint),transparent);
  box-shadow:0 0 22px rgba(150,219,200,.34);
  transform:rotate(-7deg);
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto -15% -60% -15%;
  height:70%;
  background:radial-gradient(ellipse at 50% 0%,rgba(183,163,249,.10),transparent 62%);
  pointer-events:none;
}

.brand-row{display:flex;align-items:center;gap:15px;position:relative;z-index:1}
.brand-icon{
  width:68px;
  height:68px;
  border-radius:18px;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.24));
}
.brand-copy{min-width:0}
.brand-title{font-size:27px;font-weight:750;letter-spacing:-.55px;line-height:1.05}
.brand-tagline{margin-top:7px;color:#9fa6b7;font-size:10px;font-weight:700;letter-spacing:.22em}

.hero-copy{position:relative;z-index:1;margin-top:44px;max-width:680px}
.eyebrow{margin:0 0 9px;color:var(--mint);font-size:11px;font-weight:750;letter-spacing:.16em}
h1{margin:0;font-size:clamp(38px,6vw,58px);line-height:1.02;letter-spacing:-2.3px}
.hero-note{max-width:650px;margin:16px 0 0;color:var(--muted);font-size:17px;line-height:1.6}

.hero-footer{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:31px;
  padding-top:24px;
  border-top:1px solid var(--border);
}
.language-switch{display:inline-flex;gap:6px;padding:5px;border:1px solid var(--border);border-radius:12px;background:rgba(9,11,16,.33)}
.language-switch a{
  padding:7px 12px;
  border-radius:8px;
  color:#d7d9e2;
  font-size:13px;
  font-weight:650;
  text-decoration:none;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.language-switch a:hover{background:rgba(183,163,249,.12);color:#fff;transform:translateY(-1px)}
.meta{margin:0;color:var(--mint);font-size:12.5px}

.policy-stack{display:grid;gap:22px;margin-top:24px}
section{
  scroll-margin-top:24px;
  padding:32px 34px 34px;
  border:1px solid var(--border);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(24,27,36,.92),rgba(19,22,29,.92));
  box-shadow:0 18px 48px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.025);
}
section+section{margin-top:0;padding-top:32px;border-top:1px solid var(--border)}
section h2{
  margin:0 0 26px;
  font-size:25px;
  line-height:1.25;
  letter-spacing:-.5px;
  color:#fff;
}
section h2::after{
  content:"";
  display:block;
  width:48px;
  height:3px;
  margin-top:13px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--violet),var(--mint));
  box-shadow:0 0 18px rgba(183,163,249,.25);
}
section h3{
  margin:28px 0 7px;
  color:var(--mint);
  font-size:16px;
  line-height:1.35;
  letter-spacing:-.12px;
}
section p{
  margin:0;
  color:var(--muted);
  line-height:1.76;
}
section h3+p{padding-left:0}

::selection{background:rgba(183,163,249,.28);color:#fff}
a{color:var(--violet);text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{color:#d0c4ff}

.site-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:26px 6px 4px;
  color:var(--subtle);
  font-size:13px;
}
.footer-brand{display:flex;align-items:center;gap:9px;color:#c9ccd6;font-weight:650}
.footer-brand img{width:28px;height:28px;border-radius:8px}
.site-footer a{color:#9da4b4;text-decoration:none}
.site-footer a:hover{color:#fff}

@media(max-width:650px){
  main{width:min(100% - 22px,920px);padding:18px 0 30px}
  .hero{padding:23px 20px 22px;border-radius:20px}
  .brand-icon{width:58px;height:58px;border-radius:16px}
  .brand-title{font-size:24px}
  .hero-copy{margin-top:34px}
  .hero-note{font-size:15px}
  .hero-footer{align-items:flex-start;flex-direction:column}
  section{padding:26px 22px 28px;border-radius:18px}
  section h2{font-size:23px}
  .site-footer{padding-inline:4px}
}

@media(max-width:390px){
  .language-switch{width:100%}
  .language-switch a{flex:1;text-align:center}
  h1{letter-spacing:-1.5px}
}