/* CloudSlash Eucalyptus Design System — shared tokens + nav + buttons */
/* Load this ONE file for design tokens, nav, and base components */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);background:var(--cs-bg-base);color:var(--cs-text-primary);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}

:root{
  --cs-bg-base:#FAF8F3;--cs-bg-surface:#F4F1EA;--cs-bg-elevated:#FFFFFF;--cs-bg-overlay:#F8F6F1;
  --cs-primary:#3A7D6F;--cs-primary-hover:#2D6459;--cs-primary-subtle:#EDF6F4;--cs-primary-border:#B8D8D0;
  --cs-danger:#B8522E;--cs-danger-subtle:#FDF2EE;
  --cs-text-primary:#1A1A1A;--cs-text-secondary:#5A5A5A;--cs-text-muted:#8A8A8A;--cs-text-inverse:#FAF8F3;
  --cs-border-faint:#E8E4DC;--cs-border-subtle:#D4CFC6;
  --cs-success:#3A7D5A;--cs-success-subtle:#EDF6F0;
  --cs-warning:#A67C2E;--cs-warning-subtle:#FDF8EE;
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,sans-serif;
  --font-mono:'Fira Code',monospace;
  --cs-shadow-sm:0 1px 2px rgba(40,36,30,0.06);
  --cs-shadow-md:0 2px 8px rgba(40,36,30,0.08),0 1px 2px rgba(40,36,30,0.04);
  --cs-shadow-lg:0 8px 24px rgba(40,36,30,0.12),0 2px 6px rgba(40,36,30,0.06);
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --duration-fast:100ms;
}
.dark{
  --cs-bg-base:#151311;--cs-bg-surface:#1D1B18;--cs-bg-elevated:#242220;--cs-bg-overlay:#2A2826;
  --cs-primary:#5BA899;--cs-primary-hover:#6FBFAD;--cs-primary-subtle:#1A2A26;--cs-primary-border:#2A4A42;
  --cs-danger:#D4724E;--cs-danger-subtle:#2A1A14;
  --cs-text-primary:#F2F0EB;--cs-text-secondary:#A09A92;--cs-text-muted:#6B6560;--cs-text-inverse:#151311;
  --cs-border-faint:#2E2C28;--cs-border-subtle:#3D3A36;
  --cs-success:#5BA87A;--cs-success-subtle:#1A2A20;
  --cs-warning:#C49A3E;--cs-warning-subtle:#2A2418;
}

.container{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}

/* ── Nav ──────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 36px;background:rgba(250,248,243,0.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--cs-border-faint)}
.dark .nav{background:rgba(21,19,17,0.85)}
.nav-brand{font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:0.04em;color:var(--cs-text-primary);justify-self:start}
.nav-brand span{color:var(--cs-primary)}
.nav-links{display:flex;gap:4px;justify-self:center;align-items:center}
.nav-item{position:relative}
.nav-item::after{content:'';position:absolute;top:100%;left:0;right:0;height:12px}
.nav-item-trigger{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;font-size:0.875rem;font-weight:600;color:var(--cs-text-secondary);border-radius:6px;cursor:pointer;border:none;background:none;font-family:var(--font-body);transition:color 0.1s,background 0.1s}
.nav-item-trigger:hover{color:var(--cs-text-primary);background:var(--cs-bg-surface)}
.nav-item-trigger i{font-size:20px;transition:color 0.1s}
.nav-item-trigger:hover i{color:var(--cs-primary)}
.nav-item-trigger .chevron{display:inline-block;width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:4px;transition:transform 0.2s var(--ease-out-expo)}
.nav-item:hover .nav-item-trigger{color:var(--cs-text-primary);background:var(--cs-bg-surface)}
.nav-item:hover .nav-item-trigger i{color:var(--cs-primary)}
.nav-item:hover .nav-item-trigger .chevron{transform:rotate(-135deg)}
.nav-dropdown{position:absolute;top:calc(100% + 0px);left:50%;transform:translateX(-50%);min-width:320px;background:var(--cs-bg-elevated);border:1px solid var(--cs-border-faint);border-radius:12px;box-shadow:var(--cs-shadow-lg);padding:10px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-6px);transition:opacity 0.2s var(--ease-out-expo),transform 0.2s var(--ease-out-expo),visibility 0.2s;pointer-events:none}
.nav-item:hover .nav-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto;transition-delay:0.12s}
.nav-dropdown a{display:flex;gap:14px;flex-direction:row;align-items:center;padding:14px 16px;border-radius:8px;font-size:0.9375rem;font-weight:500;color:var(--cs-text-secondary);transition:all 0.1s;cursor:pointer;text-decoration:none}
.nav-dropdown a:hover{background:var(--cs-bg-surface);color:var(--cs-text-primary)}
.nav-dropdown a i{font-size:28px;flex-shrink:0;width:32px;text-align:center;color:var(--cs-text-muted);transition:color 0.1s}
.nav-dropdown a:hover i{color:var(--cs-primary)}
.nav-dropdown-wide{min-width:400px}
.nav-dropdown-section{font-size:0.625rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--cs-text-muted);padding:10px 16px 6px}
.nav-link-simple{display:inline-flex;align-items:center;padding:6px 14px;font-size:0.8125rem;font-weight:500;color:var(--cs-text-secondary);border-radius:6px;transition:color 0.1s;text-decoration:none}
.nav-link-simple:hover{color:var(--cs-text-primary)}
.nav-cta{display:flex;gap:10px;align-items:center;justify-self:end}
.theme-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--cs-text-secondary);transition:all 0.1s;background:none;border:none;cursor:pointer}
.theme-btn:hover{background:var(--cs-bg-surface);color:var(--cs-text-primary)}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:6px;font-family:var(--font-body);font-size:0.8125rem;font-weight:600;transition:all 0.1s;text-decoration:none;border:none;cursor:pointer}
.btn-primary{background:var(--cs-primary);color:var(--cs-text-inverse)}.btn-primary:hover{background:var(--cs-primary-hover);text-decoration:none}
.btn-ghost{background:transparent;color:var(--cs-text-secondary);border:1px solid var(--cs-border-faint)}.btn-ghost:hover{background:var(--cs-bg-surface);text-decoration:none;color:var(--cs-text-primary)}
.btn-lg{height:44px;padding:0 24px;font-size:0.875rem}

/* ── Reveal animations ────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 350ms var(--ease-out-expo),transform 350ms var(--ease-out-expo)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:0.1s}
.reveal-d2{transition-delay:0.2s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

@media(max-width:768px){.nav-links{display:none}.nav-dropdown{display:none}.nav{grid-template-columns:1fr auto}}