:root{--brand-1:#6366f1;--brand-2:#06b6d4;--text:#0f172a;--muted:#475569;--bg:#f8fafc;--radius-1:20px;--radius-2:24px;--container-max:1240px}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:"Inter Tight",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif;font-size:16px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,h6{font-family:"Clash Display",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",serif;color:var(--text);margin:0}
h1{font-size:58px;line-height:1.02}
@media (max-width:640px){h1{font-size:38px}}
h2{font-size:33px;line-height:1.15}
p,li,button,label,input,textarea{font-family:"Inter Tight",system-ui,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif}
small,caption{font-size:12px}
.container.mx-auto.max-w-site{max-width:var(--container-max)}
.max-w-site{max-width:var(--container-max)}
img{max-width:100%;height:auto;display:block}
.rounded-xl{border-radius:var(--radius-1)}
.rounded-2xl{border-radius:var(--radius-2)}
.shadow-md{box-shadow:0 8px 20px rgba(2,6,23,0.06)}
.shadow-lg{box-shadow:0 20px 40px rgba(2,6,23,0.08)}
.shadow-inner{box-shadow:inset 0 1px 0 rgba(2,6,23,0.02)}
.flex-center{display:flex;align-items:center;justify-content:center}
.h-header{height:88px}
.h-footer{height:180px}
.h-hero{height:63vh}
.transition-fast{transition:all 240ms cubic-bezier(.2,.8,.2,1)}
.btn-primary{height:48px;padding:0 24px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;background-image:linear-gradient(90deg,var(--brand-1),var(--brand-2));color:#ffffff;border:none;cursor:pointer}
.btn-secondary{height:48px;padding:0 24px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;background:#ffffff;border:1px solid rgba(15,23,42,0.06);color:var(--text);cursor:pointer}
.btn-primary:focus,.btn-secondary:focus{outline:none;box-shadow:0 0 0 4px rgba(99,102,241,0.12)}
a:focus{outline:none}
button:focus-visible, a:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(99,102,241,0.12);border-radius:8px}
#mobileMenu{display:none}
#mobileMenu.open{display:block}
#mobilePanel{transform:translateY(18px);opacity:0;transition:transform 320ms cubic-bezier(.2,.8,.2,1),opacity 220ms ease}
#mobilePanel.open{transform:translateY(0);opacity:1}
#mobileOverlay{opacity:0;transition:opacity 240ms ease}
#mobileMenu.open #mobileOverlay{opacity:1}
[role="dialog"]{border-radius:12px}
#cookieBar{min-width:260px;max-width:420px}
#cookieBar button{cursor:pointer}
#cookieBar button:focus{outline:none;box-shadow:0 0 0 4px rgba(99,102,241,0.12)}
.iconify{display:inline-block;line-height:1}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.layer-card{width:400px;height:230px;border-radius:20px}
@media (max-width:640px){.layer-card{width:100%;height:auto}}
.diagram{width:720px;height:340px}
@media (max-width:640px){.diagram{width:100%;height:auto}}
.transition-strip{width:100%;height:130px}
@media (max-width:640px){.transition-strip{height:130px}}
.focus-ring{box-shadow:0 0 0 4px rgba(99,102,241,0.12)}
a:hover{opacity:0.95}
ul{padding-left:1rem}
li{margin-bottom:0.4rem}
.modal-open{overflow:hidden}
@keyframes beam{0%{opacity:0;transform:translateX(-6px)}50%{opacity:.6;transform:translateX(6px)}100%{opacity:0;transform:translateX(-6px)}}
@keyframes spin-slow{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes pulse-soft{0%{opacity:0.85}50%{opacity:1}100%{opacity:0.85}}
@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
@keyframes slide-up{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}
.animate-beam{animation:beam 3s linear infinite}
.animate-spin-slow{animation:spin-slow 12s linear infinite}
.animate-pulse-soft{animation:pulse-soft 2.6s ease-in-out infinite}
.animate-fade-in{animation:fade-in 420ms cubic-bezier(.2,.8,.2,1) both}
.animate-slide-up{animation:slide-up 420ms cubic-bezier(.2,.8,.2,1) both}
.text-caption{font-size:12px;color:var(--muted)}
.text-base{font-size:16px;color:var(--muted)}
.header-link{padding:8px 12px;border-radius:8px}
.header-link:focus-visible{box-shadow:0 0 0 4px rgba(99,102,241,0.12)}
.footer a{color:var(--brand-1);text-decoration:none}
.footer a:hover{text-decoration:underline}
input,textarea,select{font-family:inherit;font-size:16px}
.visually-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}