@import url('./variables.css');

* { box-sizing: border-box; }
html { font-family: var(--font-stack); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; }
body { margin: 0; line-height: 1.5; }
img { max-width: 100%; display: inline-block; }
a { color: var(--color-accent); text-decoration: none; }
a:hover, a:focus { color: var(--color-accent-hover); text-decoration: underline; }
h1,h2,h3,h4 { line-height: 1.15; font-weight: 600; }
p { color: var(--color-text-dim); }
ul { padding-left: 1.25rem; }
code { font-family: "SFMono-Regular",Consolas,Menlo,monospace; }
.visually-hidden { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.container { width: 100%; margin: 0 auto; padding: 2rem 1.25rem; max-width: var(--max-width); }
.container.narrow { max-width: 780px; }

.flex { display: flex; }
.between { justify-content: space-between; }
.center-v { align-items: center; }

header.site-header { background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); position: sticky; top:0; z-index: 50; }
header .logo { display: flex; gap:.6rem; align-items: center; font-weight: 600; font-size: 1.1rem; color: var(--color-text); }
header .brand-text { letter-spacing: .5px; }
.main-nav ul { list-style: none; display: flex; gap: 1.25rem; margin:0; padding:0; }
.main-nav a { color: var(--color-text-dim); font-weight:500; }
.main-nav a:hover { color: var(--color-text); }

.dropdown { position: relative; }
.dropdown button { background:none; border:none; color: var(--color-text-dim); font: inherit; cursor:pointer; }
.dropdown button:hover { color: var(--color-text); }
.dropdown-menu { display:none; position:absolute; top: 2.2rem; left:0; background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-sm); list-style:none; margin:0; padding:.5rem 0; min-width: 160px; box-shadow: var(--shadow); }
.dropdown-menu li a { display:block; padding:.5rem .9rem; color: var(--color-text-dim); }
.dropdown-menu li a:hover { background: var(--color-bg-alt); color: var(--color-text); text-decoration:none; }
.dropdown:focus-within .dropdown-menu, .dropdown:hover .dropdown-menu { display:block; }

.hero { padding: 5rem 0 4rem; background: radial-gradient(circle at 30% 20%, #1c2430, #0f1115 60%); text-align: left; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 3.5rem); margin:0 0 1rem; }
.accent { background: linear-gradient(90deg,#5d7bff,#8c5dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 1.15rem; max-width: 720px; }
.cta-group { display:flex; gap:1rem; flex-wrap: wrap; margin: 1.5rem 0; }
.note { font-size: .85rem; letter-spacing: .5px; text-transform: uppercase; opacity:.75; }

.btn { --btn-bg: var(--color-accent); --btn-fg: #fff; background: var(--btn-bg); color: var(--btn-fg); padding:.85rem 1.3rem; border-radius: var(--radius-sm); font-weight:600; display:inline-block; border:1px solid var(--color-accent); transition: var(--transition); }
.btn:hover { background: var(--color-accent-hover); text-decoration:none; }
.btn.ghost { background: transparent; color: var(--color-accent); }
.btn.ghost:hover { background: rgba(93,123,255,.1); }
/* .btn.primary inherits base .btn styles; keep class for semantic clarity (no extra declarations needed) */

.features { background: var(--color-bg-alt); }
.grid-4 { display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.feature-card { background: var(--color-surface); padding:1.25rem 1.15rem 1.4rem; border:1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.feature-card h2 { font-size:1.1rem; margin-top:0; }
.feature-card p { font-size:.95rem; margin:.35rem 0 0; }

.value { background: linear-gradient(180deg,var(--color-bg) 0%, #12161c 100%); }
.value-list { list-style: none; padding:0; margin:1.5rem 0 0; display:grid; gap:1rem; }
.value-list li { background: var(--color-surface); padding: .9rem 1rem; border:1px solid var(--color-border); border-radius: var(--radius-sm); }

.early-access { text-align: center; background: var(--color-bg-alt); }

.site-footer { background: #0d0f12; border-top:1px solid var(--color-border); font-size: .9rem; }
.footer-grid { display:grid; gap:2rem; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
.footer-nav ul { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.tagline { margin: .6rem 0 1rem; font-size:.85rem; text-transform:uppercase; letter-spacing:.8px; opacity:.7; }
.legal-note { opacity:.75; }
.logo.small { display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:1rem; color: var(--color-text); }

.legal-page h1, .contact-page h1 { margin-top:0; }
.legal-page .updated { font-size:.85rem; opacity:.7; margin-top: -.5rem; }
.legal-page h2 { margin-top:2rem; font-size:1.1rem; }
.legal-page .disclaimer { margin-top:2rem; font-style:italic; }

.contact-form { display:grid; gap:1rem; }
.contact-form input, .contact-form textarea { width:100%; padding:.75rem .7rem; background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); font:inherit; }
.contact-form input:focus, .contact-form textarea:focus { outline:2px solid var(--color-accent); outline-offset:2px; }
.form-note { font-size:.8rem; opacity:.7; }

.not-found { text-align:center; padding:5rem 0; }

@media (max-width: 640px) {
  .cta-group { flex-direction: column; align-items: flex-start; }
  header .main-nav ul { gap:.9rem; }
}