:root{
  --night:#0E2A2B;
  --night-deep:#0a2122;
  --night-low:#10302f;
  --sand:#F4EEDD;
  --teal:#3FA89B;
  --teal-bright:#73d7c9;
  --gold:#E8B04B;
  --on-night:#cbe8e9;
  --muted:#8ea3a0;
  --line:rgba(63,168,155,.22);
  --line-sand:rgba(14,42,43,.12);
  --serif:'Libre Caslon Text',Georgia,serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --container:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--night);
  color:var(--on-night);
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 64px}
.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--teal);
}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
.serif-i{font-style:italic}

/* ---------- LIVE BACKGROUND ---------- */
#bg-canvas{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;
}
.site-wrap{position:relative;z-index:1}

/* ---------- NAV ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(10,33,34,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:22px;letter-spacing:.04em}
.brand svg{display:block}
.nav-links{display:flex;align-items:center;gap:38px}
.nav-links a:not(.btn),.nav-trigger{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);transition:color .25s;position:relative;background:none;border:none;cursor:pointer;
}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--teal);transition:width .3s var(--ease);
}
.nav-links a:not(.btn):hover{color:var(--on-night)}
.nav-links a:not(.btn):hover::after{width:100%}

/* dropdown */
.dropdown{position:relative}
.nav-trigger{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono)}
.nav-trigger .caret{transition:transform .3s var(--ease)}
.dropdown:hover .caret,.dropdown:focus-within .caret{transform:rotate(180deg)}
.nav-trigger:hover{color:var(--on-night)}
.menu{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:230px;background:rgba(10,33,34,.97);backdrop-filter:blur(14px);
  border:1px solid var(--line);padding:8px;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s var(--ease);
}
.dropdown:hover .menu,.dropdown:focus-within .menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.menu a{
  display:block;padding:13px 15px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);transition:background .2s,color .2s;
}
.menu a:hover{background:rgba(63,168,155,.1);color:var(--on-night)}
.menu a span{display:block;font-size:9px;letter-spacing:.06em;color:var(--teal);margin-top:5px;text-transform:none}

.btn{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:none;
}
.btn-gold{
  background:var(--gold);color:#3a2800;padding:13px 22px;font-weight:500;
  position:relative;overflow:hidden;transition:transform .3s var(--ease);
}
.btn-gold::before{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transition:left .6s var(--ease);
}
.btn-gold:hover{transform:translateY(-2px)}
.btn-gold:hover::before{left:140%}
.btn-ghost{
  color:var(--on-night);padding:13px 22px;border:1px solid var(--line);
  transition:border-color .3s,color .3s;
}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-bright)}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line);padding:42px 0;position:relative;z-index:1}
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot .brand{font-size:18px}
.foot-meta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}
.foot-links{display:flex;gap:26px}
.foot-links a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .25s}
.foot-links a:hover{color:var(--teal-bright)}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.1s}
.reveal[data-d="2"]{transition-delay:.2s}
.reveal[data-d="3"]{transition-delay:.3s}

.section-pad{padding:120px 0;position:relative;z-index:1}
.section-head{margin-bottom:56px}
.section-head .eyebrow{display:block;margin-bottom:16px}
.section-head h2{font-size:clamp(28px,3.6vw,40px)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:920px){
  .container{padding:0 28px}
  .section-pad{padding:84px 0}
  .nav-links a:not(.btn),.dropdown{display:none}
  .nav-links{gap:0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  #bg-canvas{display:none}
}