/* Aromatic Cloud pages */
:root { --ink:#0b1020; --ink2:#4a5568; --line:#e9e4da; --soft:#faf7f2; --dark:#120d08; --amber:#d97706; --amber2:#f59e0b; --green:#16a34a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Inter,system-ui,sans-serif; color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; }
h1,h2,h3 { letter-spacing:-.025em; margin:0; }
.wrap { max-width:1180px; margin:0 auto; padding:0 20px; }
.grad { background:linear-gradient(100deg,#fbbf24,#f97316 55%,#fb7185); -webkit-background-clip:text; background-clip:text; color:transparent; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); }
.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 22px; border-radius:12px; font-weight:800; font-size:15px; text-decoration:none; transition:transform .15s, box-shadow .15s; }
.btn:hover { transform:translateY(-2px); }
.btn.pri { background:linear-gradient(135deg,#f59e0b,#ea580c); color:#fff; box-shadow:0 14px 30px -12px rgba(234,88,12,.6); }
.btn.ghost { border:1px solid rgba(255,255,255,.2); color:#fff; background:rgba(255,255,255,.04); }
.btn.dark { background:var(--ink); color:#fff; }
.sec { padding:clamp(64px,9vw,104px) 0; }
.sec.soft { background:var(--soft); }
.head { max-width:680px; margin-bottom:44px; }
.head h2 { font-size:clamp(1.9rem,4vw,2.8rem); font-weight:900; line-height:1.1; margin:12px 0 12px; }
.head p { color:var(--ink2); font-size:1.08rem; line-height:1.65; margin:0; }

/* Nav */
.nav { position:sticky; top:0; z-index:50; background:rgba(18,13,8,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.07); }
.nav .wrap { display:flex; align-items:center; gap:28px; height:64px; }
.logo { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:900; font-size:17px; }
.logo span { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#f59e0b,#ea580c); display:grid; place-items:center; font-size:15px; }
.logo small { color:rgba(255,255,255,.45); font-weight:600; font-size:12.5px; }
.nav-links { display:flex; gap:22px; margin-left:auto; }
.nav-links a { color:rgba(255,255,255,.7); text-decoration:none; font-size:14px; font-weight:600; }
.nav-links a:hover { color:#fff; }
.nav .btn { padding:9px 16px; font-size:14px; }

/* Hero */
.hero { position:relative; overflow:hidden; background:var(--dark); color:#fff; padding:clamp(64px,9vw,104px) 0 clamp(70px,9vw,110px); }
.hero::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse 70% 70% at 30% 40%,#000 30%,transparent 75%); mask-image:radial-gradient(ellipse 70% 70% at 30% 40%,#000 30%,transparent 75%); }
.hero::after { content:''; position:absolute; width:720px; height:720px; right:-200px; top:-260px; background:radial-gradient(circle,rgba(245,158,11,.25),rgba(234,88,12,.12) 45%,transparent 70%); filter:blur(20px); }
.hero .wrap { position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero h1 { font-size:clamp(2.4rem,5.4vw,4rem); font-weight:900; line-height:1.03; margin:18px 0 20px; }
.hero .lede { color:rgba(255,255,255,.72); font-size:clamp(1.02rem,1.7vw,1.15rem); line-height:1.65; margin:0 0 30px; max-width:560px; }
.ctas { display:flex; flex-wrap:wrap; gap:12px; }
.proof { display:flex; flex-wrap:wrap; gap:18px; margin-top:30px; color:rgba(255,255,255,.65); font-size:13.5px; font-weight:600; }
.proof i { color:#4ade80; margin-right:6px; }

/* Product mock */
.mock { background:#1b140d; border:1px solid rgba(255,255,255,.1); border-radius:18px; box-shadow:0 40px 80px -30px rgba(0,0,0,.7); overflow:hidden; }
.mock-bar { display:flex; align-items:center; gap:6px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.07); }
.mock-bar i { width:10px; height:10px; border-radius:50%; background:#ff5f56; } .mock-bar i:nth-child(2){background:#ffbd2e} .mock-bar i:nth-child(3){background:#27c93f}
.mock-bar span { margin-left:10px; font:500 12px 'JetBrains Mono',monospace; color:rgba(255,255,255,.4); }
.mock-body { padding:18px; }
.mock-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.mock-title b { font-size:15px; } .mock-title small { color:rgba(255,255,255,.45); font-size:12px; }
.mtab { width:100%; border-collapse:collapse; font-size:13px; }
.mtab th { text-align:left; color:rgba(255,255,255,.4); font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:0 0 8px; }
.mtab td { padding:9px 0; border-top:1px solid rgba(255,255,255,.06); color:rgba(255,255,255,.85); font-family:'JetBrains Mono',monospace; font-size:12.5px; }
.mtab td:first-child { font-family:Inter,sans-serif; font-weight:600; }
.pill { display:inline-block; padding:2px 8px; border-radius:6px; font:700 11px Inter,sans-serif; }
.pill.ok { background:rgba(74,222,128,.14); color:#4ade80; } .pill.warn { background:rgba(251,191,36,.16); color:#fbbf24; }
.mock-foot { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.mock-foot div { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:10px; }
.mock-foot small { display:block; color:rgba(255,255,255,.45); font-size:11px; } .mock-foot b { font-size:16px; }

/* Pain */
.pains { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.pain { border:1px solid var(--line); border-radius:18px; padding:22px; background:#fff; }
.pain i { font-size:22px; color:#ea580c; }
.pain h3 { font-size:1.02rem; font-weight:800; margin:12px 0 6px; }
.pain p { color:var(--ink2); font-size:14px; line-height:1.6; margin:0; }
.ba { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px; }
.ba div { border-radius:18px; padding:24px; }
.ba .b { background:#fff1f2; border:1px solid #fecdd3; } .ba .a { background:#f0fdf4; border:1px solid #bbf7d0; }
.ba b { display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px; }
.ba .b b { color:#be123c; } .ba .a b { color:#15803d; }
.ba ul { margin:0; padding-left:18px; line-height:1.9; font-size:14.5px; color:var(--ink2); }

/* Modules */
.mods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.mod { background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; transition:transform .2s, box-shadow .2s, border-color .2s; }
.mod:hover { transform:translateY(-3px); border-color:#fcd34d; box-shadow:0 20px 40px -26px rgba(120,53,15,.4); }
.mod i { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#fef3c7; color:#b45309; font-size:20px; }
.mod h3 { font-size:1.06rem; font-weight:800; margin:14px 0 6px; }
.mod p { color:var(--ink2); font-size:14px; line-height:1.6; margin:0; }

/* Security */
.dark { background:var(--dark); color:#fff; }
.dark .head p { color:rgba(255,255,255,.65); }
.secs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.secc { border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:22px; background:rgba(255,255,255,.03); }
.secc i { font-size:22px; color:#fbbf24; }
.secc h3 { font-size:1rem; font-weight:800; margin:12px 0 6px; }
.secc p { color:rgba(255,255,255,.62); font-size:13.5px; line-height:1.6; margin:0; }

/* Proof */
.case { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.nums { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.num { border:1px solid var(--line); border-radius:18px; padding:22px; background:#fff; }
.num b { display:block; font-size:2.4rem; font-weight:900; letter-spacing:-.03em; }
.num span { color:var(--ink2); font-size:13.5px; line-height:1.5; }
.quote { font-size:1.3rem; line-height:1.55; font-weight:600; margin:0; }
.quote-by { color:var(--ink2); font-size:14px; margin-top:14px; }

/* Steps */
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; counter-reset:s; }
.step { position:relative; border:1px solid var(--line); background:#fff; border-radius:18px; padding:28px 20px 20px; }
.step::before { counter-increment:s; content:counter(s); position:absolute; top:-14px; left:20px; width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#f59e0b,#ea580c); color:#fff; font-weight:900; display:grid; place-items:center; font-size:14px; }
.step h3 { font-size:1rem; font-weight:800; margin:0 0 6px; }
.step p { color:var(--ink2); font-size:14px; line-height:1.6; margin:0; }

/* Pricing */
.plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch; }
.plan { position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:22px; padding:28px; background:#fff; }
.plan.pop { border:2px solid var(--amber2); box-shadow:0 30px 60px -30px rgba(217,119,6,.45); }
.plan .tag { position:absolute; top:-12px; left:28px; background:linear-gradient(135deg,#f59e0b,#ea580c); color:#fff; font-size:11.5px; font-weight:800; border-radius:999px; padding:4px 10px; letter-spacing:.04em; }
.plan h3 { font-size:1.15rem; font-weight:900; }
.plan .for { color:var(--ink2); font-size:13.5px; margin:4px 0 18px; }
.plan .price { font-size:2.4rem; font-weight:900; letter-spacing:-.03em; }
.plan .price small { font-size:14px; color:var(--ink2); font-weight:600; letter-spacing:0; }
.plan .setup { color:var(--ink2); font-size:13.5px; margin:2px 0 18px; }
.plan ul { list-style:none; padding:0; margin:0 0 22px; display:grid; gap:9px; font-size:14px; }
.plan li { display:flex; gap:9px; } .plan li i { color:var(--green); }
.plan .btn { margin-top:auto; justify-content:center; }
.plan:not(.pop) .btn { background:var(--soft); color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.cur { display:inline-flex; gap:4px; padding:4px; background:var(--soft); border:1px solid var(--line); border-radius:12px; margin:-18px 0 30px; }
.cur button { border:0; background:transparent; border-radius:9px; padding:9px 16px; font:700 14px Inter,sans-serif; color:var(--ink2); cursor:pointer; }
.cur button[aria-pressed="true"] { background:#fff; color:var(--ink); box-shadow:0 4px 12px -6px rgba(0,0,0,.25); }
[hidden] { display:none !important; }
.val { display:grid; grid-template-columns:.9fr 1.1fr; gap:36px; margin-top:44px; padding:clamp(24px,4vw,40px); border-radius:24px; background:var(--dark); color:#fff; }
.val h3 { font-size:clamp(1.5rem,3vw,2rem); font-weight:900; margin:12px 0 12px; }
.val-l p { color:rgba(255,255,255,.68); line-height:1.7; font-size:15px; margin:0; }
.val-r { display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
.val-r div { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; }
.val-r i { color:#fbbf24; grid-row:span 2; margin-top:2px; }
.val-r b { font-size:14.5px; } .val-r span { color:rgba(255,255,255,.6); font-size:13.5px; line-height:1.55; }
.roi { margin-top:14px; padding:20px 24px; border-radius:18px; background:#fffbeb; border:1px solid #fde68a; color:#78350f; font-size:15px; line-height:1.65; }
.roi b { color:#92400e; }
@media (max-width:980px) { .val, .val-r { grid-template-columns:minmax(0,1fr); } }
.plan-note { text-align:center; color:var(--ink2); font-size:14px; margin-top:22px; }

/* FAQ */
.faq { max-width:820px; }
.faq details { border-bottom:1px solid var(--line); padding:18px 2px; }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; font-weight:700; font-size:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:var(--amber); font-weight:800; font-size:1.2rem; line-height:1; }
.faq details[open] summary::after { content:'–'; }
.faq p { color:var(--ink2); line-height:1.7; margin:10px 0 0; font-size:15px; }

/* Final CTA */
.final { position:relative; overflow:hidden; text-align:center; }
.final::after { content:''; position:absolute; width:700px; height:700px; left:50%; top:-300px; transform:translateX(-50%); background:radial-gradient(circle,rgba(245,158,11,.2),transparent 65%); }
.final .wrap { position:relative; z-index:2; }
.final h2 { font-size:clamp(2rem,4.6vw,3.2rem); font-weight:900; line-height:1.08; margin:14px auto 14px; max-width:760px; }
.final p { color:rgba(255,255,255,.68); font-size:1.08rem; max-width:560px; margin:0 auto 28px; line-height:1.6; }
.final .ctas { justify-content:center; }
.foot { background:var(--dark); border-top:1px solid rgba(255,255,255,.07); color:rgba(255,255,255,.5); font-size:13.5px; padding:22px 0; }
.foot .wrap { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.foot a { color:rgba(255,255,255,.75); text-decoration:none; }

.mbar { display:none; }
@media (max-width:980px) {
  .hero .wrap, .case { grid-template-columns:minmax(0,1fr); }
  .pains, .secs, .steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mods, .plans { grid-template-columns:minmax(0,1fr); }
  .nav-links { display:none; } .nav .btn { margin-left:auto; }
}
@media (max-width:620px) {
  .pains, .secs, .steps, .ba, .nums { grid-template-columns:minmax(0,1fr); }
  .logo small { display:none; }
  .mbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; gap:8px; padding:10px 12px; background:rgba(18,13,8,.95); border-top:1px solid rgba(255,255,255,.1); }
  .mbar .btn { flex:1; justify-content:center; padding:12px; font-size:14px; }
  body { padding-bottom:70px; }
}