@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  --bg:#000; --bg-2:#0a0a0a; --bg-3:#111; --bg-4:#161616;
  --surface:rgba(255,255,255,.04); --surface-h:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.08); --border-m:rgba(255,255,255,.14);
  --text:#fff; --text-2:#a0a0a0; --text-3:#555;
  --grad:linear-gradient(135deg,#a855f7 0%,#6366f1 50%,#3b82f6 100%);
  --nav-h:68px;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --font-display:'DM Sans',system-ui,sans-serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --font-serif:'DM Serif Display',Georgia,serif;
}
[data-theme="light"]{
  --bg:#fafafa;--bg-2:#f4f4f5;--bg-3:#e4e4e7;--bg-4:#d4d4d8;
  --surface:rgba(0,0,0,.04);--surface-h:rgba(0,0,0,.07);
  --border:rgba(0,0,0,.08);--border-m:rgba(0,0,0,.15);
  --text:#09090b;--text-2:#52525b;--text-3:#a1a1aa;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);overflow-x:hidden;cursor:none;-webkit-font-smoothing:antialiased;transition:background .4s,color .4s}
img{display:block;max-width:100%}
a{text-decoration:none}
.container{width:100%;max-width:860px;margin:0 auto;padding:0 40px}

/* CURSOR */
.cursor-dot{position:fixed;width:7px;height:7px;background:#fff;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);box-shadow:0 0 0 1.5px rgba(0,0,0,.5),0 0 12px rgba(255,255,255,.3);transition:width .15s,height .15s}
.cursor-ring{position:fixed;width:34px;height:34px;border:1.5px solid rgba(255,255,255,.6);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .25s,height .25s,border-color .25s;box-shadow:0 0 0 0.5px rgba(0,0,0,.3)}
[data-theme="light"] .cursor-dot{background:#111;box-shadow:0 0 0 1.5px rgba(255,255,255,.6)}
[data-theme="light"] .cursor-ring{border-color:rgba(0,0,0,.4)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 40px;z-index:1000;background:rgba(0,0,0,.75);backdrop-filter:blur(24px) saturate(1.6);border-bottom:1px solid var(--border);transition:height .3s,background .4s}
[data-theme="light"] nav{background:rgba(250,250,250,.85)}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo img{height:30px;}
.nav-brand{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.02em}
.nav-back{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--text-2);border:1px solid var(--border);padding:7px 16px;border-radius:100px;transition:color .2s,border-color .2s,background .2s}
.nav-back:hover{color:var(--text);border-color:var(--border-m);background:var(--surface)}
.nav-back svg{stroke:currentColor}
.theme-toggle{width:34px;height:34px;background:var(--surface);border:1px solid var(--border);border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:none;transition:background .2s;position:relative;flex-shrink:0}
.theme-toggle:hover{background:var(--surface-h)}
.theme-toggle svg{width:14px;height:14px;stroke:var(--text-2);position:absolute;transition:opacity .2s}
.theme-toggle .icon-moon{opacity:1}.theme-toggle .icon-sun{opacity:0}
[data-theme="light"] .theme-toggle .icon-moon{opacity:0}[data-theme="light"] .theme-toggle .icon-sun{opacity:1}
.nav-right{display:flex;align-items:center;gap:10px}

/* PAGE LAYOUT */
.page-wrap{padding-top:calc(var(--nav-h) + 72px);padding-bottom:120px}
.page-grid{position:fixed;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black 0%,transparent 100%);pointer-events:none;z-index:0}

/* PAGE HEADER */
.page-header{margin-bottom:64px}
.page-label{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-bottom:18px}
.page-title{font-family:var(--font-display);font-size:clamp(38px,5vw,58px);font-weight:700;line-height:1.06;letter-spacing:-.03em;margin-bottom:16px}
.page-title em{font-family:var(--font-serif);font-style:italic;font-weight:400;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-subtitle{font-size:15px;color:var(--text-2);line-height:1.7;max-width:580px}
.page-divider{width:100%;height:1px;background:var(--border);margin:48px 0}

/* PROSE CONTENT */
.prose{display:flex;flex-direction:column;gap:40px}
.prose-section{display:flex;flex-direction:column;gap:14px}
.prose-section h2{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--text);letter-spacing:-.02em}
.prose-section h3{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--text-2);letter-spacing:-.01em;margin-top:6px}
.prose-section p{font-size:14.5px;color:var(--text-2);line-height:1.75}
.prose-section ul,.prose-section ol{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.prose-section ul li,.prose-section ol li{font-size:14.5px;color:var(--text-2);line-height:1.65;padding-left:20px;position:relative}
.prose-section ul li::before{content:'—';position:absolute;left:0;color:var(--text-3);font-size:12px}
.prose-section ol{counter-reset:item}
.prose-section ol li{counter-increment:item}
.prose-section ol li::before{content:counter(item)'.';position:absolute;left:0;color:var(--text-3);font-size:12px;font-weight:600}
.prose-section a{color:var(--text);border-bottom:1px solid var(--border-m);transition:border-color .2s}
.prose-section a:hover{border-color:var(--text-2)}

/* HIGHLIGHT BOX */
.highlight-box{background:var(--bg-3);border:1px solid var(--border);border-radius:14px;padding:24px 28px;display:flex;flex-direction:column;gap:8px}
.highlight-box.warn{border-color:rgba(239,68,68,.25);background:rgba(239,68,68,.05)}
.highlight-box.warn .hb-title{color:#f87171}
.hb-title{font-family:var(--font-display);font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.hb-body{font-size:14px;color:var(--text-2);line-height:1.7}

/* CONTACT CARDS */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:8px}
.contact-card{background:var(--bg-3);border:1px solid var(--border);border-radius:16px;padding:28px 28px 26px;display:flex;flex-direction:column;gap:14px;transition:border-color .25s,transform .25s}
.contact-card:hover{border-color:var(--border-m);transform:translateY(-3px)}
.cc-icon{width:44px;height:44px;border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center}
.cc-icon svg{stroke:var(--text-3)}
.cc-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.cc-value{font-size:15px;font-weight:500;color:var(--text);line-height:1.5}
.cc-value a{color:var(--text);border-bottom:1px solid var(--border-m);transition:border-color .2s}
.cc-value a:hover{border-color:var(--text-2)}
.cc-note{font-size:12px;color:var(--text-3);line-height:1.5}

/* FOOTER */
footer{border-top:1px solid var(--border);padding:32px 0;margin-top:80px}
.footer-line{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--text-3)}
.footer-line a{color:var(--text-2);transition:color .2s}
.footer-line a:hover{color:var(--text)}
.footer-links-row{display:flex;gap:20px;flex-wrap:wrap}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fade-in{opacity:0;animation:fadeUp .7s var(--ease) forwards}
.fade-in.d1{animation-delay:.1s}.fade-in.d2{animation-delay:.2s}.fade-in.d3{animation-delay:.3s}

@media(max-width:768px){
  nav{padding:0 20px}
  .container{padding:0 20px}
  .page-wrap{padding-top:calc(var(--nav-h)+48px);padding-bottom:80px}
  .contact-grid{grid-template-columns:1fr}
  .footer-line{flex-direction:column;text-align:center}
}
