/* sopisafe.css — shared design system for all pages */
:root{
  --paper:#f7f5ef;
  --paper-2:#efebe1;
  --paper-3:#e7e2d5;
  --ink:#15161a;
  --ink-2:#3c3d42;
  --muted:#76746b;
  --line:rgba(21,22,26,.13);
  --line-2:rgba(21,22,26,.07);
  --dark:#0e0f12;
  --dark-2:#16181d;
  --dark-3:#1f2228;
  --on-dark:#f2efe7;
  --on-dark-muted:rgba(242,239,231,.58);
  --line-dark:rgba(242,239,231,.14);
  --drift:oklch(.64 .19 33);
  --drift-soft:oklch(.64 .19 33 / .12);
  --agreed:oklch(.66 .13 158);
  --agreed-soft:oklch(.66 .13 158 / .12);
  --signal:var(--ink);
  --display:"Bricolage Grotesque",Georgia,serif;
  --text:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --maxw:1240px;
  --gutter:clamp(20px,5vw,72px);
  --density:1;
  --motion:1;
  --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-weight:400;
  font-size:clamp(16px,1.05vw,18px);line-height:1.55;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:.98;margin:0}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:calc(120px * var(--density))}
.eyebrow{
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.dark .eyebrow,.on-dark .eyebrow{color:var(--on-dark-muted)}
.d-xl{font-size:clamp(46px,8.4vw,128px)}
.d-lg{font-size:clamp(38px,5.6vw,82px)}
.d-md{font-size:clamp(30px,3.6vw,52px)}
.lead{font-size:clamp(18px,1.5vw,23px);line-height:1.5;color:var(--ink-2);max-width:36ch}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6em;font-family:var(--text);font-weight:600;
  font-size:15.5px;letter-spacing:-.01em;padding:15px 24px;border-radius:100px;cursor:pointer;
  border:1px solid transparent;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,border-color .3s;
  will-change:transform;white-space:nowrap
}
.btn:hover{transform:translateY(-2px)}
.btn .arw{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.btn:hover .arw{transform:translate(4px,-4px)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:#000}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.on-dark .btn-primary,.dark .btn-primary{background:var(--on-dark);color:var(--dark)}
.on-dark .btn-ghost,.dark .btn-ghost{color:var(--on-dark);border-color:var(--line-dark)}
.on-dark .btn-ghost:hover,.dark .btn-ghost:hover{border-color:var(--on-dark)}

/* motion */
.reveal{
  opacity:0;transform:translateY(calc(26px * var(--motion)));
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0ms)
}
.reveal.in{opacity:1;transform:none}
.clip-line{overflow:hidden;display:block}
.clip-line>span{
  display:block;transform:translateY(110%);white-space:nowrap;
  transition:transform 1s cubic-bezier(.18,.7,.16,1);transition-delay:var(--d,0ms)
}
.in .clip-line>span,.clip-line.in>span{transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal,.clip-line>span{opacity:1!important;transform:none!important;transition:none!important}
}

/* surfaces */
.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.35));
  backdrop-filter:blur(14px);border:1px solid var(--line)
}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.hairline{height:1px;background:var(--line);border:0;margin:0}

/* scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:20px;border:3px solid var(--paper)}

/* page fade-in */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes menu-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#root{animation:fade .4s ease}

/* FAQ accordion */
.faq-item{border-bottom:1px solid var(--line);padding-block:6px}
.faq-btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  background:none;border:0;cursor:pointer;padding:18px 0;gap:24px;text-align:left;
  font-family:var(--display);font-size:clamp(17px,1.5vw,20px);font-weight:600;
  letter-spacing:-.02em;color:var(--ink)
}
.dark .faq-btn{color:var(--on-dark)}

/* responsive */
@media(max-width:1140px){
  header .signin{display:none!important}
  header .nav-links{gap:20px!important}
}
@media(max-width:1080px){
  .foot-grid{grid-template-columns:1fr 1fr!important}
  .two-col{grid-template-columns:1fr!important}
  .three-col{grid-template-columns:1fr 1fr!important}
  .four-col{grid-template-columns:1fr 1fr!important}
  .page-hero-grid{grid-template-columns:1fr!important}
  .sources-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:1020px){
  header .nav-links{display:none!important}
  header .lang-switch{display:none!important}
  header .nav-burger{display:flex!important}
}
@media(max-width:720px){
  header .btn-primary{display:none!important}
  .d-xl{font-size:clamp(40px,12vw,68px)!important}
  .foot-grid{grid-template-columns:1fr 1fr!important}
  .two-col,.three-col,.four-col{grid-template-columns:1fr!important}
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 24px;
  z-index: 100;
  border-radius: 30px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  transition: top 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.skip-link:focus {
  top: 20px;
  outline: 2px solid var(--drift);
  outline-offset: 4px;
}