:root {
  --indigo: #4f46e5;
  --indigo-dark: #4338ca;
  --indigo-soft: #eef2ff;
  --amber: #f59e0b;
  --amber-dark: #d97706;
  --ink: #18181b;
  --ink-soft: #3f3f46;
  --muted: #71717a;
  --line: #e4e4e7;
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --card: #ffffff;
  --shadow-sm: 0 1px 2px rgba(24,24,27,.05), 0 1px 3px rgba(24,24,27,.06);
  --shadow-md: 0 6px 24px -6px rgba(24,24,27,.12), 0 2px 8px -2px rgba(24,24,27,.06);
  --shadow-lg: 0 24px 60px -20px rgba(79,70,229,.35), 0 10px 24px -8px rgba(24,24,27,.12);
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.container { max-width:1120px; margin:0 auto; padding:0 24px; }

/* nav */
nav { position:fixed; top:0; left:0; right:0; z-index:100; transition:all .3s ease; }
nav .inner { display:flex; align-items:center; justify-content:space-between; height:64px; max-width:1120px; margin:0 auto; padding:0 24px; }
nav.scrolled { background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(180%); border-bottom:1px solid var(--line); }
.logo { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-.02em; }
.logo .mark { width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--indigo),#7c3aed); display:grid; place-items:center; color:#fff; font-size:15px; font-weight:700; box-shadow:0 4px 12px -2px rgba(79,70,229,.5); }
.nav-links { display:flex; gap:28px; align-items:center; }
.nav-links a { font-size:14px; font-weight:500; color:var(--ink-soft); transition:color .2s; }
.nav-links a:hover { color:var(--indigo); }
.nav-links a.active { color:var(--indigo); font-weight:600; }
.nav-cta { display:flex; gap:10px; align-items:center; }
.btn-signin { font-size:14px; font-weight:500; color:var(--ink); padding:8px 14px; border-radius:8px; transition:background .2s; }
.btn-signin:hover { background:var(--bg-soft); }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; padding:12px 22px; border-radius:12px; cursor:pointer; border:none; transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .2s; }
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--amber); color:#3a2503; box-shadow:0 6px 16px -4px rgba(245,158,11,.5); }
.btn-primary:hover { background:var(--amber-dark); color:#fff; transform:translateY(-1px); box-shadow:0 10px 24px -6px rgba(217,119,6,.55); }
.btn-ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover { border-color:var(--indigo); color:var(--indigo); transform:translateY(-1px); }
.btn-indigo { background:var(--indigo); color:#fff; box-shadow:0 6px 16px -4px rgba(79,70,229,.45); }
.btn-indigo:hover { background:var(--indigo-dark); transform:translateY(-1px); box-shadow:0 10px 24px -6px rgba(79,70,229,.55); }

/* hero (landing) */
.hero { position:relative; padding:150px 0 80px; text-align:center; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:-20% -10% auto; height:640px; background:radial-gradient(60% 60% at 50% 0%, var(--indigo-soft) 0%, transparent 70%); z-index:0; }
.hero .container { position:relative; z-index:1; }
.badge { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--indigo-dark); background:#fff; border:1px solid #e0e7ff; padding:6px 14px; border-radius:999px; box-shadow:var(--shadow-sm); }
.badge .dot { width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px rgba(245,158,11,.2); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
h1 { font-family:var(--font-display); font-size:64px; line-height:1.05; letter-spacing:-.03em; font-weight:700; margin:22px 0 20px; }
h1 .grad { background:linear-gradient(100deg,var(--indigo),#7c3aed); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sub { font-size:19px; color:var(--muted); max-width:620px; margin:0 auto 34px; font-weight:400; }
.cta-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero-note { margin-top:18px; font-size:13.5px; color:var(--muted); }

.hero-visual { position:relative; margin:64px auto 0; max-width:960px; perspective:1400px; }
.hero-shot { position:relative; transition:transform .25s ease-out; transform-style:preserve-3d; will-change:transform; }
.hero-shot img { width:100%; display:block; border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow-lg); }
.hero-glow { position:absolute; inset:-40px -40px auto; height:300px; background:radial-gradient(50% 60% at 50% 40%, rgba(124,58,237,.18), transparent 70%); filter:blur(30px); z-index:-1; }
.float-chip { position:absolute; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-md); font-size:13px; font-weight:500; display:flex; align-items:center; gap:8px; }
.float-chip .ic { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-size:14px; }
.chip-1 { top:-22px; left:-28px; animation:float 5s ease-in-out infinite; }
.chip-2 { bottom:-20px; right:-20px; animation:float 6s ease-in-out infinite reverse; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* page hero (sub-pages) */
.page-hero { position:relative; padding:150px 0 64px; text-align:center; overflow:hidden; }
.page-hero::before { content:""; position:absolute; inset:-20% -10% auto; height:480px; background:radial-gradient(60% 60% at 50% 0%, var(--indigo-soft) 0%, transparent 70%); z-index:0; }
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { font-size:52px; }
.page-hero .sub { max-width:660px; margin-bottom:0; }

/* trust */
.trust { padding:30px 0 10px; text-align:center; }
.trust p { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:20px; }
.trust .logos { display:flex; gap:40px; justify-content:center; flex-wrap:wrap; opacity:.55; }
.trust .logos span { font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink-soft); }

/* sections */
section { padding:88px 0; }
.eyebrow { font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--indigo); margin-bottom:16px; }
h2 { font-family:var(--font-display); font-size:42px; line-height:1.1; letter-spacing:-.02em; font-weight:700; margin-bottom:18px; }
.lede { font-size:18px; color:var(--muted); max-width:640px; }
.center { text-align:center; }
.center .lede { margin:0 auto; }

.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px; }
.feature-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px; transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s; }
.feature-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:#ddd6fe; }
.feature-card .icon { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:22px; margin-bottom:18px; }
.feature-card h3 { font-family:var(--font-display); font-size:20px; font-weight:600; margin-bottom:10px; letter-spacing:-.01em; }
.feature-card p { font-size:15px; color:var(--muted); margin-bottom:16px; }
.feature-card ul { list-style:none; }
.feature-card ul li { font-size:14px; color:var(--ink-soft); padding:4px 0; padding-left:22px; position:relative; }
.feature-card ul li::before { content:"✓"; position:absolute; left:0; color:var(--indigo); font-weight:700; }
.ic-crm { background:#eef2ff; }
.ic-proj { background:#fef3c7; }
.ic-out { background:#dcfce7; }

.showcase { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.showcase .shot { border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow-lg); overflow:hidden; transition:transform .4s ease; }
.showcase .shot:hover { transform:scale(1.02); }
.showcase .shot img { width:100%; display:block; }
.showcase .copy h3 { font-family:var(--font-display); font-size:28px; font-weight:600; margin-bottom:12px; }
.showcase .copy p { color:var(--muted); font-size:16px; }

/* stat band */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px; }
.stat { text-align:center; padding:32px; border:1px solid var(--line); border-radius:16px; }
.stat .num { font-family:var(--font-display); font-size:44px; font-weight:700; letter-spacing:-.02em; color:var(--indigo); }
.stat .lbl { font-size:14px; color:var(--muted); margin-top:6px; }

/* pricing */
.pricing { background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.billing-toggle { display:flex; align-items:center; gap:12px; justify-content:center; margin:36px 0 44px; font-size:14px; font-weight:500; }
.toggle { width:46px; height:26px; border-radius:999px; background:#e4e4e7; position:relative; cursor:pointer; transition:background .2s; }
.toggle.on { background:var(--indigo); }
.toggle .knob { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .2s cubic-bezier(.34,1.56,.64,1); box-shadow:var(--shadow-sm); }
.toggle.on .knob { left:23px; }
.save { font-size:12px; font-weight:700; color:var(--indigo-dark); background:#eef2ff; padding:3px 8px; border-radius:6px; }
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.plan { background:#fff; border:1px solid var(--line); border-radius:18px; padding:32px 28px; display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s, border-color .3s; position:relative; }
.plan:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.plan.featured { border:2px solid var(--indigo); box-shadow:var(--shadow-md); }
.plan .tag { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--indigo); color:#fff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:999px; }
.plan .name { font-family:var(--font-display); font-size:19px; font-weight:600; }
.plan .desc { font-size:13.5px; color:var(--muted); margin:6px 0 20px; }
.plan .price { font-family:var(--font-display); font-size:44px; font-weight:700; letter-spacing:-.02em; transition:opacity .2s; }
.plan .price .per { font-size:15px; color:var(--muted); font-weight:500; font-family:var(--font-body); }
.plan .cta { margin:20px 0 24px; }
.plan .cta .btn { width:100%; justify-content:center; }
.plan ul { list-style:none; border-top:1px solid var(--line); padding-top:20px; }
.plan ul li { font-size:14px; color:var(--ink-soft); padding:6px 0; padding-left:22px; position:relative; }
.plan ul li::before { content:"✓"; position:absolute; left:0; color:var(--indigo); font-weight:700; }
.plan ul li.off { color:var(--muted); }
.plan ul li.off::before { content:"—"; color:var(--muted); }

.compare { margin-top:56px; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.compare h3 { font-family:var(--font-display); font-size:20px; font-weight:600; padding:24px 28px 16px; }
.compare table { width:100%; border-collapse:collapse; }
.compare th, .compare td { text-align:left; padding:13px 28px; font-size:14px; border-top:1px solid var(--line); }
.compare th { font-weight:600; color:var(--ink); background:var(--bg-soft); font-size:13px; }
.compare td.organizer { font-weight:600; color:var(--indigo-dark); }
.compare .check { color:var(--indigo); font-weight:700; }

/* FAQ */
.faq { max-width:760px; margin:0 auto; }
.faq-item { border:1px solid var(--line); border-radius:12px; margin-bottom:12px; overflow:hidden; transition:border-color .2s; }
.faq-item.open { border-color:#ddd6fe; }
.faq-q { width:100%; background:none; border:none; text-align:left; padding:18px 22px; font-size:15.5px; font-weight:600; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-q .chev { transition:transform .25s; flex-shrink:0; color:var(--muted); }
.faq-item.open .chev { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p { padding:0 22px 18px; font-size:14.5px; color:var(--muted); }

/* CTA + footer */
.cta-band { text-align:center; }
.cta-band h2 { font-size:44px; }
footer { padding:48px 0 56px; border-top:1px solid var(--line); background:var(--bg-soft); }
.foot { display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; }
.foot .col h4 { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; font-weight:600; }
.foot .col a { display:block; font-size:14px; color:var(--ink-soft); padding:5px 0; }
.foot .col a:hover { color:var(--indigo); }
.foot .brand { max-width:280px; }
.foot .brand p { font-size:14px; color:var(--muted); margin-top:12px; }
.copy { text-align:center; font-size:13px; color:var(--muted); margin-top:40px; }

/* reveal */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity:1; transform:translateY(0); }
.reveal.d1 { transition-delay:.06s; } .reveal.d2 { transition-delay:.12s; } .reveal.d3 { transition-delay:.18s; }

@media (max-width:900px) {
  h1 { font-size:44px; }
  .page-hero h1 { font-size:38px; }
  .features-grid, .plans, .stats { grid-template-columns:1fr; }
  .showcase { grid-template-columns:1fr; }
  .nav-links { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}

/* legal / prose pages */
.legal { max-width:760px; margin:0 auto; }
.legal h2 { font-size:22px; margin:34px 0 12px; }
.legal p, .legal li { font-size:15px; color:var(--muted); }
.legal p { margin-bottom:14px; }
.legal ul { margin:0 0 16px 22px; }
.legal li { margin-bottom:6px; }
.legal .updated { font-size:13px; color:var(--muted); margin-bottom:36px; }
.legal a { color:var(--indigo); }
.meta { font-size:12.5px; color:var(--muted); margin-top:14px; font-weight:500; }

/* blog article */
.article { max-width:720px; margin:0 auto; }
.article h2 { font-size:26px; margin:34px 0 12px; }
.article p { font-size:16.5px; color:var(--ink-soft); margin-bottom:18px; line-height:1.75; }
.article ul, .article ol { margin:0 0 20px 24px; color:var(--ink-soft); font-size:16.5px; line-height:1.75; }
.article li { margin-bottom:8px; }
.article strong { color:var(--ink); }
.tag { background:var(--indigo-soft); color:var(--indigo-dark); font-size:12px; font-weight:600; padding:4px 10px; border-radius:6px; }