* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; line-height:1.6; color:#2c3e50; background:#efeee7; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* Navbar */
.navbar { position:fixed; inset:0 0 auto 0; z-index:1000; background:rgba(255,255,255,.95); backdrop-filter:blur(10px); border-bottom:1px solid #e8f2a7; }
.nav-content { display:flex; justify-content:space-between; align-items:center; max-width:1200px; margin:0 auto; padding:15px 20px; }
.logo { font-size:28px; font-weight:700; background:linear-gradient(45deg,#446547,#a7bc8f); -webkit-background-clip:text; -webkit-text-fill-color:transparent; display:flex; gap:10px; align-items:center; }
.nav-links { display:flex; gap:24px; align-items:center; }
.nav-link { color:#446547; text-decoration:none; font-weight:600; }
.nav-link:hover { color:#6f8a5e; }
.btn-demo { background:linear-gradient(135deg,#446547,#a7bc8f); color:#fff; padding:10px 18px; border-radius:25px; text-decoration:none; font-weight:700; }

/* Hero */
.hero { background:linear-gradient(135deg,#446547,#6f8a5e); color:#fff; padding:120px 0 80px; text-align:center; }
.hero h1 { font-size:48px; font-weight:800; margin:0 0 12px; }
.hero p { font-size:20px; opacity:.95; max-width:820px; margin:0 auto 28px; }
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Buttons */
.btn { background:linear-gradient(135deg,#e8f2a7,#a7bc8f); color:#2c3e50; border:none; padding:14px 20px; border-radius:30px; font-size:15px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block; white-space:nowrap; }
.btn:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(167,188,143,.35); }
.btn-secondary { background:rgba(255,255,255,.2); color:#fff; border:2px solid rgba(255,255,255,.35); }
.btn.wide { width:100%; min-width:340px; }

/* Sections */
section { scroll-margin-top:90px; }
.features { padding:80px 0; background:#fff; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px; margin-top:28px; }
.feature-card { text-align:center; padding:28px; border-radius:18px; background:#f8fcf4; border:2px solid #e8f2a7; }
.feature-emoji { font-size:48px; }
.mb-8 { margin-bottom:8px; }
.center { text-align:center; }
.muted { color:#7f8c8d; }
.small { font-size:12px; }
.mt-8 { margin-top:8px; }
.mt-10 { margin-top:10px; }
.grid-col { display:grid; gap:8px; max-width:520px; }
.grid-tight { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.input { width:100%; padding:12px; border:2px solid #e8f2a7; border-radius:8px; margin:6px 0 12px; }
.textarea { width:100%; padding:8px; border:1px solid #e8f2a7; border-radius:8px; }
.inline { display:inline-block; }
.w-60 { width:60%; }
.center-text { text-align:center; }
.mfa { letter-spacing:3px; }

/* Workflow */
.workflow-container { display:none; padding:40px 0; min-height:100vh; }
.workflow-container.active { display:block; }
.workflow-nav { background:rgba(255,255,255,.95); backdrop-filter:blur(10px); border-radius:14px; padding:12px 20px; margin-bottom:20px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.workflow-steps { display:flex; gap:10px; flex-wrap:wrap; }
.workflow-step { padding:6px 12px; border-radius:20px; background:rgba(167,188,143,.15); color:#446547; font-weight:600; cursor:pointer; }
.workflow-step.active { background:#a7bc8f; color:#fff; }
.step-container { display:none; background:#fff; border:1px solid #e8f2a7; border-radius:18px; padding:28px; box-shadow:0 12px 28px rgba(0,0,0,.06); }
.step-container.active { display:block; animation:fadeIn .35s ease; }
@keyframes fadeIn { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

.choice-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:24px 0; }
.choice-card { background:#fff; border:2px solid #e8f2a7; border-radius:14px; padding:18px; cursor:pointer; }
.choice-card.selected { border-color:#a7bc8f; background:linear-gradient(135deg,#446547,#6f8a5e); color:#fff; }

/* MFA tiles */
.mfa-option { border:2px solid #e8f2a7; border-radius:10px; background:#fff; padding:15px; text-align:center; cursor:pointer; transition:.2s; }
.mfa-option:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(167,188,143,.25); }
.mfa-option.selected { border-color:#a7bc8f !important; background:#f8fcf4 !important; }

.back-button { background:none; border:1px solid #a7bc8f; color:#446547; padding:8px 14px; border-radius:20px; cursor:pointer; }

/* Vault workspace */
#vault { display:none; }
.vault-wrap { display:flex; gap:18px; }
.vault-side { width:270px; background:#fff; border:1px solid #e8f2a7; border-radius:12px; padding:14px; height:fit-content; }
.vault-main { flex:1; display:flex; flex-direction:column; gap:14px; }
.tabs { display:flex; gap:8px; flex-wrap:wrap; }
.tab { padding:8px 12px; border-radius:16px; border:1px solid #e8f2a7; background:#fff; cursor:pointer; font-weight:700; }
.tab.active { background:#a7bc8f; color:#fff; border-color:#a7bc8f; }
.panel { display:none; border:1px solid #e8f2a7; border-radius:12px; padding:16px; background:#fff; }
.panel.active { display:block; }
.file-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.file-card { border:1px solid #e8f2a7; border-radius:10px; padding:10px; background:#f8fcf4; }
.tag { display:inline-block; padding:2px 8px; border-radius:12px; border:1px solid #a7bc8f; margin:2px 4px 0 0; font-size:12px; }

.card.narrow { max-width:520px; margin:0 auto; border:1px solid #e8f2a7; border-radius:12px; padding:18px; background:#fff; }
.callout { margin:14px 0; background:#f8fcf4; border:1px solid #a7bc8f; border-radius:10px; padding:14px; }
.warning { background:#fff3cd; border:1px solid #ffeaa7; padding:12px; border-radius:8px; margin:12px 0; color:#856404; }
.results-box { border:1px dashed #a7bc8f; border-radius:8px; padding:10px; }

@media (max-width:768px){ .nav-links{display:none} .hero h1{font-size:36px} .hero p{font-size:18px} }