/* SCN CORE shared styles */
:root{
  --bg-primary:#0A0A0B;--bg-secondary:#111113;--bg-elevated:#1A1A1D;
  --border:#27272A;--text-primary:#FAFAFA;--text-muted:#A1A1AA;
  --emerald:#10B981;--emerald-dark:#047857;--emerald-glow:#6EE7B7;
  --cyan:#06B6D4;--navy:#0F172A;
}
html:not(.dark){
  --bg-primary:#FAFAFA;--bg-secondary:#FFFFFF;--bg-elevated:#F4F4F5;
  --border:#E4E4E7;--text-primary:#09090B;--text-muted:#52525B;
}
html,body{background:var(--bg-primary);color:var(--text-primary)}
body{font-family:'Outfit','Inter',system-ui,sans-serif;font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:color-mix(in oklab,var(--emerald) 35%,transparent);color:var(--text-primary)}
h1,h2,h3,h4{font-family:'Outfit',system-ui,sans-serif}
.font-mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.h1{font-size:clamp(2.5rem,5vw,4.5rem);letter-spacing:-.04em;line-height:.98;font-weight:700}
.h2{font-size:clamp(1.75rem,3.2vw,2.75rem);letter-spacing:-.03em;line-height:1.05;font-weight:600}
.h3{font-size:clamp(1.2rem,1.6vw,1.5rem);letter-spacing:-.02em;line-height:1.2;font-weight:600}
.container-xl{max-width:1280px;margin-inline:auto}

.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.15rem;border-radius:10px;font-weight:500;font-size:.95rem;letter-spacing:-.01em;transition:all .2s ease;border:1px solid transparent;white-space:nowrap}
.btn-primary{background:var(--emerald);color:#032B1F;box-shadow:0 0 0 1px rgba(16,185,129,.25),0 10px 30px -10px rgba(16,185,129,.55)}
.btn-primary:hover{background:#12c98b;transform:translateY(-1px);box-shadow:0 0 0 1px rgba(16,185,129,.45),0 16px 40px -10px rgba(16,185,129,.7)}
.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--border)}
.btn-ghost:hover{border-color:color-mix(in oklab,var(--emerald) 60%,var(--border));background:color-mix(in oklab,var(--emerald) 6%,transparent)}
.btn-sm{padding:.55rem .85rem;font-size:.82rem;border-radius:8px}

.link-arrow{display:inline-flex;align-items:center;gap:.4rem;color:var(--emerald);font-weight:500}
.link-arrow svg{transition:transform .2s ease}
.link-arrow:hover svg{transform:translateX(3px)}

.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .75rem;font-size:.78rem;border:1px solid var(--border);border-radius:999px;color:var(--text-muted);background:color-mix(in oklab,var(--bg-secondary) 60%,transparent)}
.pill .dot{width:6px;height:6px;border-radius:999px;background:var(--emerald);box-shadow:0 0 10px var(--emerald)}

.card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:20px;transition:border-color .25s,transform .25s,box-shadow .25s;position:relative;overflow:hidden}
.card:hover{border-color:color-mix(in oklab,var(--emerald) 55%,var(--border));transform:translateY(-2px);box-shadow:0 20px 60px -30px rgba(16,185,129,.45)}

.kbd{font-family:'JetBrains Mono',monospace;font-size:.7rem;border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;padding:1px 6px;color:var(--text-muted);background:var(--bg-elevated)}

.nav-link{position:relative;color:var(--text-muted);font-size:.92rem;padding:.4rem .2rem}
.nav-link:hover{color:var(--text-primary)}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--emerald);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-link.active{color:var(--text-primary)}

.field{display:block;width:100%;padding:.8rem 1rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;color:var(--text-primary);font-size:.95rem;transition:border-color .2s,box-shadow .2s}
.field::placeholder{color:var(--text-muted)}
.field:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 4px color-mix(in oklab,var(--emerald) 18%,transparent)}

.glass{background:color-mix(in oklab,var(--bg-secondary) 70%,transparent);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid color-mix(in oklab,var(--border) 80%,transparent)}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}

.stat-num{background:linear-gradient(180deg,var(--text-primary) 20%,color-mix(in oklab,var(--emerald) 55%,var(--text-primary)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
a,button{-webkit-tap-highlight-color:transparent}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *[class*="anim"]{animation:none!important}
}