:root{
  --bg:#050608;
  --bg-soft:#090a0d;
  --surface:#0d0f14;
  --surface-2:#13151d;
  --surface-3:#181b24;
  --ink:#f4f0e8;
  --ink-2:#c8c0b5;
  --ink-3:#898277;
  --ink-4:#565047;
  --line:rgba(244,240,232,.12);
  --line-2:rgba(244,240,232,.2);
  --violet:#64d49a;
  --violet-soft:rgba(100,212,154,.13);
  --sand:#d6b46e;
  --green:#65d690;
  --red:#ff7474;
  --orange:#ffb15f;
  --blue:#74b8ff;
  --shadow:0 80px 180px -92px rgba(0,0,0,.95);
  --sans:"Geist", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}

html[data-theme="light"]{
  --bg:#f7f4ef;
  --bg-soft:#efeae1;
  --surface:#fffaf3;
  --surface-2:#f6efe4;
  --surface-3:#ece4d8;
  --ink:#15130f;
  --ink-2:#413b33;
  --ink-3:#71695f;
  --ink-4:#9b9184;
  --line:rgba(21,19,15,.12);
  --line-2:rgba(21,19,15,.2);
  --violet:#247a50;
  --violet-soft:rgba(36,122,80,.11);
  --sand:#9b6f21;
  --green:#16864b;
  --red:#c93d3d;
  --orange:#b66513;
  --blue:#2267b9;
  --shadow:0 70px 140px -94px rgba(21,19,15,.42);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(900px 520px at 72% -8%, var(--violet-soft), transparent 62%),
    radial-gradient(640px 340px at 4% 18%, rgba(214,180,110,.08), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 56%, var(--bg) 100%);
  overflow-x:hidden;
  letter-spacing:-.018em;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.24) 42%, transparent 76%);
  opacity:.22;
  z-index:-2;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at center, transparent 0%, transparent 54%, rgba(0,0,0,.2) 100%);
  z-index:-1;
}

html[data-theme="light"] body::after{background:radial-gradient(circle at center, transparent 0%, transparent 58%, rgba(112,92,55,.12) 100%)}

a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{border:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}

.wrap{
  width:min(1180px, calc(100% - 44px));
  margin:0 auto;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.105em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:linear-gradient(90deg, var(--violet), transparent);
}

h1{
  font-size:clamp(54px, 7.25vw, 108px);
  line-height:.9;
  letter-spacing:-.078em;
  font-weight:560;
}

h2{
  font-size:clamp(38px, 4.7vw, 70px);
  line-height:.965;
  letter-spacing:-.068em;
  font-weight:550;
  max-width:10.8ch;
}

.section-copy{
  color:var(--ink-2);
  font-size:17px;
  line-height:1.66;
  max-width:610px;
  margin-top:22px;
}

.nav{
  position:sticky;
  top:0;
  z-index:80;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter:blur(18px);
}

.nav-inner{
  height:68px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:22px;
  width:min(1180px, calc(100% - 44px));
  margin:0 auto;
}

.brand{
  width:max-content;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:560;
  letter-spacing:-.035em;
}

.brand-mark{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  color:var(--ink);
}

.brand-mark svg{display:block;width:100%;height:100%}
.brand-word{font-size:16px}

.nav-links{
  display:flex;
  align-items:center;
  gap:2px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}

.nav-links a{
  color:var(--ink-2);
  font-size:13px;
  padding:8px 13px;
  border-radius:999px;
  transition:color .2s var(--ease), background .2s var(--ease);
}

.nav-links a:hover,.nav-links a.is-active{
  color:var(--ink);
  background:var(--surface-2);
}

.nav-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
}

.icon-button,.theme-toggle{
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  color:var(--ink-2);
  font-size:12px;
  transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}

.icon-button{padding:0 10px}
.theme-toggle{padding:0 10px}

.icon-button:hover,.theme-toggle:hover{
  transform:translateY(-1px);
  color:var(--ink);
  border-color:var(--line-2);
  background:var(--surface-2);
}

.kbd{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-3);
}

.theme-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  border:1px solid var(--line-2);
  background:linear-gradient(90deg, var(--ink) 100% 50%, transparent 50% 100%);
}

.theme-label{font-size:13px}

.nav-cta{
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:var(--ink);
  color:var(--bg);
  font-size:13px;
  transition:transform .22s var(--ease), opacity .22s var(--ease);
}

.nav-cta:hover{transform:translateY(-1px);opacity:.92}

.btn{
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:999px;
  padding:0 18px;
  font-size:14px;
  border:1px solid var(--line-2);
  transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}

.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-ghost{background:color-mix(in srgb, var(--surface) 64%, transparent);color:var(--ink)}
.btn-ghost:hover{background:var(--surface-2)}

.pill{
  min-height:29px;
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink-2);
  background:color-mix(in srgb, var(--surface) 68%, transparent);
  font-family:var(--mono);
  font-size:11px;
  white-space:nowrap;
}

.pill.red{color:var(--red);border-color:color-mix(in srgb, var(--red) 32%, transparent);background:color-mix(in srgb, var(--red) 7%, transparent)}
.pill.green{color:var(--green);border-color:color-mix(in srgb, var(--green) 32%, transparent);background:color-mix(in srgb, var(--green) 7%, transparent)}
.pill.orange{color:var(--orange);border-color:color-mix(in srgb, var(--orange) 32%, transparent);background:color-mix(in srgb, var(--orange) 7%, transparent)}
.pill.blue{color:var(--blue);border-color:color-mix(in srgb, var(--blue) 32%, transparent);background:color-mix(in srgb, var(--blue) 7%, transparent)}

.card{
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-2) 86%, transparent));
  padding:24px;
  position:relative;
  overflow:hidden;
}

.card h3{
  font-size:20px;
  letter-spacing:-.04em;
  font-weight:540;
  margin-bottom:10px;
}

.card p{
  color:var(--ink-2);
  line-height:1.62;
  font-size:14.5px;
}

.mono{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-4);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:34px;
}

.command-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding-top:90px;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(9px);
}

.command-overlay.is-open{display:flex}

.command{
  width:min(620px, calc(100% - 28px));
  border:1px solid var(--line-2);
  border-radius:22px;
  background:var(--surface);
  box-shadow:0 40px 120px rgba(0,0,0,.34);
  overflow:hidden;
}

.command-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  padding:12px;
  border-bottom:1px solid var(--line);
}

.command-head input{
  height:42px;
  border:1px solid transparent;
  outline:none;
  background:var(--surface-2);
  color:var(--ink);
  border-radius:13px;
  padding:0 13px;
}

.command-head button{
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-3);
  border-radius:12px;
  padding:0 12px;
}

.command-list{padding:8px}

.command-list a{
  display:grid;
  grid-template-columns:1fr;
  gap:3px;
  padding:13px;
  border-radius:14px;
}

.command-list a:hover,.command-list a.is-hidden{background:var(--surface-2)}
.command-list a.is-hidden{display:none}
.command-list span{font-size:14px;color:var(--ink)}
.command-list small{font-size:12px;color:var(--ink-3)}

.toast{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:120;
  padding:12px 14px;
  border:1px solid var(--line-2);
  border-radius:14px;
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 20px 80px rgba(0,0,0,.28);
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}

.toast.show{opacity:1;transform:none}

footer{
  border-top:1px solid var(--line);
  padding:34px 0 48px;
  color:var(--ink-3);
  font-size:13px;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:22px;
  flex-wrap:wrap;
}

.footer-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.footer-links a:hover{color:var(--ink)}

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.on{opacity:1;transform:none}

@media (max-width:880px){
  .nav-inner{grid-template-columns:1fr auto}
  .nav-links{display:none}
  .theme-label{display:none}
}

@media (max-width:560px){
  .wrap,.nav-inner{width:min(100% - 28px, 1180px)}
  h1{font-size:55px}
  .nav-cta{display:none}
  .icon-button{display:none}
}


/* Site-wide entrance animation */
.fade-ready {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity .72s var(--ease),
    transform .72s var(--ease),
    filter .72s var(--ease);
  transition-delay: var(--fade-delay, 0ms);
}

.fade-ready.fade-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-ready {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}


/* Green dark-mode accent refinements */
html[data-theme="dark"] {
  --violet:#64d49a;
  --violet-2:#2ca86d;
  --violet-soft:rgba(100,212,154,.13);
}

html[data-theme="dark"] .eyebrow::before {
  background:linear-gradient(90deg, rgba(100,212,154,.95), transparent);
}

html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-links a.is-active {
  box-shadow:0 0 0 1px rgba(100,212,154,.08) inset;
}

html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .icon-button:hover,
html[data-theme="dark"] .theme-toggle:hover {
  border-color:rgba(100,212,154,.22);
}

html[data-theme="dark"] .command-head input:focus {
  border-color:rgba(100,212,154,.42);
  box-shadow:0 0 0 3px rgba(100,212,154,.08);
}

html[data-theme="dark"] .theme-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  border:1px solid var(--line-2);
  background:linear-gradient(90deg, var(--ink) 100% 50%, transparent 50% 100%);
}