/*
 * Env Clinic - design system & components.
 * Self-contained: system fonts, inline SVG icons, no external assets, no trackers.
 */

:root {
  --ec-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ec-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --ec-bg: #ffffff;
  --ec-bg-soft: #f5f7fc;
  --ec-bg-softer: #eef2fb;
  --ec-ink: #0b1020;
  --ec-ink-2: #3a4358;
  --ec-ink-3: #6b748c;
  --ec-line: #e4e9f3;

  --ec-brand: #4f46e5;
  --ec-brand-d: #4338ca;
  --ec-brand-2: #06b6d4;
  --ec-accent: #10b981;

  --ec-low: #16a34a;
  --ec-med: #d97706;
  --ec-high: #ea580c;
  --ec-crit: #dc2626;

  --ec-r: 14px;
  --ec-r-lg: 22px;
  --ec-r-pill: 999px;
  --ec-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --ec-shadow-lg: 0 24px 60px -20px rgba(31,38,90,.35);
  --ec-maxw: 1140px;
  --ec-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Scoped reset for our full-custom pages ---- */
.ec-page { margin: 0; font-family: var(--ec-font); color: var(--ec-ink); background: var(--ec-bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.6; }
.ec-page *, .ec-page *::before, .ec-page *::after { box-sizing: border-box; }
.ec-page img { max-width: 100%; display: block; }
.ec-page a { color: inherit; text-decoration: none; }
.ec-page h1, .ec-page h2, .ec-page h3, .ec-page h4 { margin: 0; line-height: 1.12; letter-spacing: -.02em; font-weight: 800; }
.ec-page p { margin: 0; }

.ec-container { width: 100%; max-width: var(--ec-maxw); margin: 0 auto; padding: 0 24px; }
.ec-main { display: block; }

/* ---- Buttons ---- */
.ec-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.3rem; border-radius: var(--ec-r-pill);
  font-weight: 650; font-size: .98rem; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s var(--ec-ease), box-shadow .15s var(--ec-ease), background .15s; white-space: nowrap; }
.ec-btn svg { width: 1.05em; height: 1.05em; }
.ec-btn-primary { background: linear-gradient(180deg, #5b54f0, var(--ec-brand)); color: #fff; box-shadow: 0 8px 20px -8px rgba(79,70,229,.7); }
.ec-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(79,70,229,.8); }
.ec-btn-ghost { background: rgba(255,255,255,.06); color: var(--ec-ink); border-color: var(--ec-line); }
.ec-btn-ghost:hover { background: var(--ec-bg-soft); transform: translateY(-2px); }
.ec-on-dark .ec-btn-ghost { color: #e8ecff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.04); }
.ec-on-dark .ec-btn-ghost:hover { background: rgba(255,255,255,.1); }

/* ---- Header ---- */
.ec-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(160%) blur(12px);
  background: rgba(255,255,255,.82); border-bottom: 1px solid var(--ec-line); }
.ec-header-inner { display: flex; align-items: center; gap: 1.25rem; height: 68px; }
.ec-logo { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em; }
.ec-logo .ec-mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--ec-brand), var(--ec-brand-2)); display: grid; place-items: center; color: #fff; box-shadow: 0 6px 14px -6px rgba(79,70,229,.8); }
.ec-logo .ec-mark svg { width: 18px; height: 18px; }
.ec-nav { display: flex; align-items: center; gap: 1.4rem; margin-left: 1rem; }
.ec-nav a { color: var(--ec-ink-2); font-weight: 550; font-size: .95rem; transition: color .15s; }
.ec-nav a:hover { color: var(--ec-brand); }
.ec-header-spacer { flex: 1; }
.ec-header-actions { display: flex; align-items: center; gap: .75rem; }
.ec-menu-toggle { display: none; }

/* ---- Section rhythm ---- */
.ec-section { padding: 5.5rem 0; position: relative; }
.ec-section--soft { background: var(--ec-bg-soft); }
.ec-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ec-brand); }
.ec-section-head { max-width: 720px; margin: 0 auto 2.75rem; text-align: center; }
.ec-section-title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: .7rem 0 .6rem; }
.ec-section-intro { color: var(--ec-ink-3); font-size: 1.08rem; }

/* ---- Hero ---- */
.ec-hero { color: #eaf0ff; background: radial-gradient(1200px 600px at 80% -10%, rgba(6,182,212,.25), transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(99,102,241,.35), transparent 55%), linear-gradient(180deg, #0b1020, #121a3a 60%, #0e1530); overflow: hidden; }
.ec-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(800px 500px at 50% 0%, #000, transparent 75%); pointer-events: none; }
.ec-hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; padding: 4.5rem 0 5rem; }
.ec-hero-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .8rem; border-radius: var(--ec-r-pill); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-size: .82rem; font-weight: 600; color: #cdd7ff; }
.ec-hero-badge .ec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ec-accent); box-shadow: 0 0 0 4px rgba(16,185,129,.25); }
.ec-hero-title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin: 1.1rem 0 1rem; color: #fff; }
.ec-hero-title .ec-grad { background: linear-gradient(90deg, #a5b4fc, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ec-hero-subline { font-size: 1.12rem; color: #b9c4e6; max-width: 36ch; }
.ec-hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.7rem 0 1.3rem; }
.ec-hero-trust { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; color: #aeb9dd; font-size: .9rem; }
.ec-hero-trust span { display: inline-flex; align-items: center; gap: .4rem; }
.ec-hero-trust svg { width: 1rem; height: 1rem; color: var(--ec-accent); }

/* Terminal mockup */
.ec-terminal { background: linear-gradient(180deg, #0c1330, #0a1027); border: 1px solid rgba(255,255,255,.1); border-radius: var(--ec-r-lg); box-shadow: var(--ec-shadow-lg); overflow: hidden; font-family: var(--ec-mono); }
.ec-term-bar { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.07); }
.ec-term-bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.ec-term-bar i:nth-child(1){ background:#ff5f57 } .ec-term-bar i:nth-child(2){ background:#febc2e } .ec-term-bar i:nth-child(3){ background:#28c840 }
.ec-term-bar span { margin-left: .5rem; color: #8b95bf; font-size: .78rem; }
.ec-term-body { padding: 1.1rem 1.2rem; font-size: .86rem; line-height: 1.7; color: #cdd6f4; white-space: pre-wrap; }
.ec-term-body .t-prompt { color: #7dd3fc; } .ec-term-body .t-ok { color: #4ade80; } .ec-term-body .t-crit { color: #fb7185; } .ec-term-body .t-dim { color: #8b95bf; }

/* ---- Trust strip ---- */
.ec-trust { background: var(--ec-bg); border-bottom: 1px solid var(--ec-line); padding: 1.5rem 0; }
.ec-trust-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: center; }
.ec-trust-item { display: inline-flex; align-items: center; gap: .55rem; color: var(--ec-ink-2); font-weight: 600; font-size: .95rem; }
.ec-trust-item .ec-check { width: 22px; height: 22px; border-radius: 50%; background: #e7f8ef; color: var(--ec-low); display: grid; place-items: center; }
.ec-trust-item .ec-check svg { width: 13px; height: 13px; }

/* ---- Cards grid ---- */
.ec-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; }
.ec-card { background: var(--ec-bg); border: 1px solid var(--ec-line); border-radius: var(--ec-r-lg); padding: 1.5rem; box-shadow: var(--ec-shadow); transition: transform .18s var(--ec-ease), box-shadow .18s var(--ec-ease), border-color .18s; }
.ec-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 1rem; background: linear-gradient(135deg, rgba(79,70,229,.12), rgba(6,182,212,.12)); color: var(--ec-brand); }
.ec-ico svg { width: 24px; height: 24px; }
.ec-card-title { font-size: 1.12rem; margin-bottom: .35rem; }
.ec-card-text { color: var(--ec-ink-3); font-size: .98rem; }

/* Feature cards: clickable */
.ec-feature-card { display: flex; flex-direction: column; height: 100%; position: relative; }
a.ec-feature-card:hover { transform: translateY(-4px); box-shadow: var(--ec-shadow-lg); border-color: rgba(79,70,229,.4); }
.ec-feature-more { margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--ec-brand); font-weight: 650; font-size: .92rem; }
.ec-feature-more svg { width: 1rem; height: 1rem; transition: transform .18s var(--ec-ease); }
a.ec-feature-card:hover .ec-feature-more svg { transform: translateX(4px); }

/* ---- Problem ---- */
.ec-problem-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1rem; }
.ec-problem-item { background: var(--ec-bg); border: 1px solid var(--ec-line); border-left: 4px solid #f1b34b; border-radius: var(--ec-r); padding: 1.05rem 1.2rem; color: var(--ec-ink-2); box-shadow: var(--ec-shadow); }

/* ---- Steps ---- */
.ec-steps { list-style: none; counter-reset: ec; padding: 0; margin: 0; display: grid; gap: 1.1rem; max-width: 760px; margin-inline: auto; }
.ec-step { display: flex; gap: 1.1rem; align-items: flex-start; background: var(--ec-bg); border: 1px solid var(--ec-line); border-radius: var(--ec-r-lg); padding: 1.2rem 1.3rem; box-shadow: var(--ec-shadow); }
.ec-step-num { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: linear-gradient(135deg, var(--ec-brand), var(--ec-brand-2)); color: #fff; display: grid; place-items: center; font-weight: 800; }
.ec-step-title { font-size: 1.08rem; margin-bottom: .2rem; }
.ec-step-text { color: var(--ec-ink-3); }

/* ---- Safety ---- */
.ec-safety .ec-card { border-top: 3px solid var(--ec-accent); }
.ec-safety .ec-ico { background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(6,182,212,.12)); color: var(--ec-accent); }

/* ---- Pricing ---- */
.ec-pricing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1.2rem; align-items: stretch; }
.ec-price-card { display: flex; flex-direction: column; }
.ec-price-card.is-featured { border-color: transparent; background: linear-gradient(180deg, #1b2350, #131a3c); color: #eaf0ff; box-shadow: var(--ec-shadow-lg); }
.ec-price-card.is-featured .ec-card-title, .ec-price-card.is-featured .ec-price { color: #fff; }
.ec-price-card.is-featured .ec-price-features li { color: #c8d2f4; }
.ec-price-tag { align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .25rem .6rem; border-radius: var(--ec-r-pill); background: var(--ec-accent); color: #06281c; margin-bottom: .8rem; }
.ec-price { font-size: 1.7rem; font-weight: 800; margin: .1rem 0 .3rem; letter-spacing: -.02em; }
.ec-price-features { list-style: none; padding: 0; margin: .8rem 0 1.2rem; display: grid; gap: .5rem; }
.ec-price-features li { display: flex; align-items: center; gap: .55rem; color: var(--ec-ink-2); }
.ec-price-features li svg { width: 1.05rem; height: 1.05rem; color: var(--ec-accent); flex: 0 0 auto; }
.ec-price-card .ec-btn { margin-top: auto; justify-content: center; }
.ec-price-card .ec-btn svg { width: 1.05rem; height: 1.05rem; }
.ec-price-soon { margin-top: auto; align-self: stretch; text-align: center; font-size: .82rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ec-ink-3, #8a93b5); padding: .7rem 1rem; border: 1px dashed var(--ec-line, #d7ddf0); border-radius: var(--ec-r-md, 12px); background: rgba(127,137,170,.06); }
.ec-price-card.is-featured .ec-price-soon { color: #aab4dd; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.05); }

/* ---- FAQ ---- */
.ec-faq { display: grid; gap: .7rem; max-width: 800px; margin-inline: auto; }
.ec-faq-item { background: var(--ec-bg); border: 1px solid var(--ec-line); border-radius: var(--ec-r); padding: .2rem 1.2rem; box-shadow: var(--ec-shadow); }
.ec-faq-q { cursor: pointer; font-weight: 650; padding: 1rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ec-faq-q::-webkit-details-marker { display: none; }
.ec-faq-q::after { content: "+"; font-size: 1.4rem; color: var(--ec-brand); font-weight: 400; transition: transform .2s; }
.ec-faq-item[open] .ec-faq-q::after { transform: rotate(45deg); }
.ec-faq-a { color: var(--ec-ink-3); padding: 0 0 1.1rem; }

/* ---- Download ---- */
.ec-dl-cards { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.ec-dl-card { text-align: center; align-items: center; display: flex; flex-direction: column; }
.ec-dl-card .ec-ico { margin-inline: auto; }
.ec-dl-card .ec-btn { margin-top: 1rem; }
.ec-dl-run { max-width: 720px; margin: 2rem auto 0; text-align: center; }
.ec-dl-run p { color: var(--ec-ink-2); margin-bottom: .7rem; }
.ec-dl-run pre { text-align: left; display: inline-block; min-width: 280px; }
.ec-dl-note { text-align: center; color: var(--ec-ink-3); font-size: .9rem; margin-top: 1.2rem; max-width: 680px; margin-inline: auto; }

/* ---- Final CTA ---- */
.ec-final-cta { background: linear-gradient(135deg, var(--ec-brand), var(--ec-brand-2)); color: #fff; }
.ec-final-inner { text-align: center; max-width: 720px; margin: 0 auto; }
.ec-final-title { font-size: clamp(1.8rem,3.4vw,2.5rem); margin-bottom: .7rem; }
.ec-final-text { opacity: .95; font-size: 1.1rem; margin-bottom: 1.6rem; }
.ec-final-cta .ec-btn-primary { background: #fff; color: var(--ec-brand-d); box-shadow: 0 14px 30px -12px rgba(0,0,0,.4); }

/* ---- Language switcher ---- */
.ec-langs { display: inline-flex; gap: .15rem; padding: .2rem; background: var(--ec-bg-softer); border-radius: var(--ec-r-pill); border: 1px solid var(--ec-line); }
.ec-on-dark .ec-langs { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.ec-lang { padding: .3rem .6rem; border-radius: var(--ec-r-pill); font-weight: 700; font-size: .8rem; color: var(--ec-ink-3); transition: all .15s; }
.ec-on-dark .ec-lang { color: #aeb9dd; }
.ec-lang:hover { color: var(--ec-brand); }
.ec-lang-active { background: #fff; color: var(--ec-brand); box-shadow: var(--ec-shadow); }
.ec-on-dark .ec-lang-active { background: rgba(255,255,255,.16); color: #fff; }

/* ---- Footer ---- */
.ec-footer { background: #0b1020; color: #aeb9dd; padding: 3.5rem 0 2rem; }
.ec-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.ec-footer h4 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; }
.ec-footer a { color: #aeb9dd; transition: color .15s; }
.ec-footer a:hover { color: #fff; }
.ec-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; font-size: .95rem; }
.ec-footer-brand { max-width: 30ch; }
.ec-footer-brand .ec-logo { color: #fff; margin-bottom: .8rem; }
.ec-footer-tag { color: #8b95bf; font-size: .92rem; }
.ec-footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: .85rem; color: #8b95bf; }

/* ---- Feature detail page ---- */
.ec-feature-hero { color: #eaf0ff; background: radial-gradient(900px 500px at 10% -20%, rgba(99,102,241,.35), transparent 55%), linear-gradient(180deg, #0b1020, #131a3c); padding: 3.5rem 0; }
.ec-feature-hero .ec-eyebrow { color: #67e8f9; }
.ec-risk-hero { background: radial-gradient(900px 500px at 10% -20%, rgba(220,38,38,.32), transparent 55%), linear-gradient(180deg, #0b1020, #1a1230); }
.ec-risk-hero .ec-eyebrow { color: #fca5a5; }
.ec-ico-risk { background: linear-gradient(135deg, rgba(220,38,38,.14), rgba(234,88,12,.12)); color: var(--ec-crit); }
.ec-problem-card:hover { border-color: rgba(220,38,38,.4); }
.ec-feature-hero h1 { font-size: clamp(2rem,4vw,2.9rem); color: #fff; margin: .8rem 0 .7rem; }
.ec-feature-hero p { color: #b9c4e6; font-size: 1.12rem; max-width: 52ch; }
.ec-feature-back { display: inline-flex; align-items: center; gap: .4rem; color: #aeb9dd; font-weight: 600; font-size: .92rem; margin-bottom: .4rem; }
.ec-feature-back:hover { color: #fff; }
.ec-prose { max-width: 760px; margin: 0 auto; }
.ec-prose h2 { font-size: 1.5rem; margin: 2.2rem 0 .8rem; }
.ec-prose p { color: var(--ec-ink-2); margin-bottom: 1rem; font-size: 1.05rem; }
.ec-prose ul { margin: 0 0 1.2rem; padding-left: 0; list-style: none; display: grid; gap: .6rem; }
.ec-prose ul li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ec-ink-2); }
.ec-prose ul li svg { width: 1.2rem; height: 1.2rem; color: var(--ec-accent); flex: 0 0 auto; margin-top: .2rem; }
.ec-codeblock { background: #0c1330; color: #cdd6f4; border-radius: var(--ec-r); padding: 1rem 1.2rem; font-family: var(--ec-mono); font-size: .9rem; overflow-x: auto; margin: 0 0 1.2rem; border: 1px solid rgba(255,255,255,.08); }
.ec-callout { display: flex; gap: .8rem; background: var(--ec-bg-soft); border: 1px solid var(--ec-line); border-radius: var(--ec-r); padding: 1.1rem 1.2rem; margin: 1.5rem 0; }
.ec-callout svg { width: 1.4rem; height: 1.4rem; color: var(--ec-brand); flex: 0 0 auto; }

/* ---- Vibe landing ---- */
.ec-hero--center .ec-hero-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.ec-hero--center .ec-hero-title { max-width: 20ch; }
.ec-hero--center .ec-hero-subline { max-width: 60ch; margin-inline: auto; }
.ec-hero--center .ec-hero-cta { justify-content: center; }
.ec-prose--center { text-align: center; }
.ec-prose--center h2 { margin-top: 0; }
.ec-trust-list--center { justify-content: center; }
.ec-nav a.ec-nav-vibe { color: var(--ec-brand); font-weight: 700; }
.ec-mobile-panel a.ec-nav-vibe { color: var(--ec-brand); }

/* ---- Terminal animation ---- */
.ec-term-line { min-height: 1.55em; }
.ec-term-gap { min-height: .7em; }
.ec-terminal--anim.js-anim .ec-term-line { opacity: 0; transform: translateY(3px); }
.ec-terminal--anim.js-anim .ec-term-line.is-shown { opacity: 1; transform: none; transition: opacity .3s ease, transform .3s ease; }
.ec-type.is-typing::after { content: "\2588"; color: #7dd3fc; margin-left: 1px; animation: ec-blink 1s steps(1) infinite; }
@keyframes ec-blink { 50% { opacity: 0; } }

/* ---- Open source section ---- */
.ec-opensource { background: radial-gradient(900px 500px at 90% -20%, rgba(6,182,212,.22), transparent 55%), linear-gradient(180deg, #0d1430, #0b1020); }
.ec-os-inner { display: grid; grid-template-columns: 1.3fr .9fr; gap: 2.5rem; align-items: center; }
.ec-os-eyebrow { color: #67e8f9; }
.ec-os-eyebrow svg { width: 1.1em; height: 1.1em; }
.ec-os-title { color: #fff; }
.ec-os-text { color: #b9c4e6; margin: .7rem 0 1.4rem; max-width: 54ch; }
.ec-os-points { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.ec-os-points li { display: flex; align-items: center; gap: .6rem; color: #dbe3ff; font-weight: 600; }
.ec-os-points li svg { width: 1.1rem; height: 1.1rem; color: var(--ec-accent); flex: 0 0 auto; }
@media (max-width: 860px) { .ec-os-inner { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---- Download checksum ---- */
.ec-sha { display: block; margin-top: .7rem; font-family: var(--ec-mono); font-size: .72rem; color: var(--ec-ink-3); word-break: break-all; }
.ec-vt { display: inline-flex; align-items: center; gap: .35rem; margin-top: .45rem; font-size: .8rem; font-weight: 600; color: var(--ec-brand); }
.ec-vt svg { width: .95rem; height: .95rem; }
.ec-vt:hover { text-decoration: underline; }

/* ---- Download options + verify ---- */
.ec-soon { font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ec-med); background: rgba(217,119,6,.13); padding: .12rem .45rem; border-radius: var(--ec-r-pill); vertical-align: middle; white-space: nowrap; }
.ec-verify-list { list-style: none; padding: 0; margin: 0 auto; max-width: 780px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem 1.4rem; }
.ec-verify-list li { display: flex; align-items: center; gap: .55rem; color: var(--ec-ink-2); font-weight: 600; }
.ec-verify-list li svg { width: 1.05rem; height: 1.05rem; color: var(--ec-accent); flex: 0 0 auto; }
.ec-verify-cta { text-align: center; margin-top: 1.8rem; }

/* ============================================================ */
/*  Design polish v0.1.1                                        */
/* ============================================================ */

/* Anchor jumps (#features …) must not hide under the sticky header. */
:where(.ec-page) [id] { scroll-margin-top: 88px; }

/* Calmer vertical rhythm + clearer separation between bands. */
.ec-section { padding: 4.75rem 0; }
.ec-section--soft {
  background: linear-gradient(180deg, #f8fafd, #eef3fb);
  box-shadow: inset 0 1px 0 rgba(16,24,40,.05), inset 0 -1px 0 rgba(16,24,40,.05);
}

/* Section headings: eyebrow accent bar under the title. */
.ec-section-head { margin-bottom: 3rem; }
.ec-section-head .ec-section-title { position: relative; }
.ec-section-head .ec-section-title::after {
  content: ""; display: block; width: 54px; height: 3px; margin: 1rem auto 0;
  border-radius: 2px; background: linear-gradient(90deg, var(--ec-brand), var(--ec-brand-2));
}

/* Cards: a touch more depth and a clearer hover. */
.ec-card { border-radius: 18px; }
.ec-card:hover { border-color: rgba(79,70,229,.28); }
a.ec-feature-card:hover { box-shadow: 0 26px 60px -24px rgba(31,38,90,.45); }
.ec-ico { transition: transform .18s var(--ec-ease); }
a.ec-card:hover .ec-ico { transform: translateY(-2px) rotate(-3deg); }

/* Buttons: slightly richer primary shadow. */
.ec-btn-primary { box-shadow: 0 10px 26px -10px rgba(79,70,229,.8); }
.ec-btn-primary:hover { box-shadow: 0 16px 34px -12px rgba(79,70,229,.85); }

/* Hero + footer spacing. */
.ec-hero-inner { padding: 4rem 0 4.5rem; }
.ec-footer { padding-top: 4rem; }

/* Trust strip: a hair more presence. */
.ec-trust { padding: 1.7rem 0; }

/* Pricing: lift the featured plan a touch. */
.ec-price-card.is-featured { transform: translateY(-6px); }
@media (max-width: 760px) { .ec-price-card.is-featured { transform: none; } }

/* Open-source + final CTA: a subtle top hairline for separation from light bands. */
.ec-opensource, .ec-final-cta { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }

/* How it works -> connected timeline (cleaner than separate cards). */
.ec-how .ec-steps { gap: 0; max-width: 720px; }
.ec-how .ec-step { background: none; border: 0; box-shadow: none; padding: 0 0 1.9rem; position: relative; align-items: flex-start; }
.ec-how .ec-step:last-child { padding-bottom: 0; }
.ec-how .ec-step::after { content: ""; position: absolute; left: 1.2rem; top: 2.7rem; bottom: -0.1rem; width: 2px; background: linear-gradient(var(--ec-brand), rgba(79,70,229,.12)); }
.ec-how .ec-step:last-child::after { display: none; }
.ec-how .ec-step-num { z-index: 1; box-shadow: 0 0 0 5px var(--ec-bg); }
.ec-how.ec-section--soft .ec-step-num { box-shadow: 0 0 0 5px var(--ec-bg-soft); }

/* Brand mark + footer links. */
.ec-logo .ec-mark { border-radius: 10px; }
.ec-footer ul a { display: inline-flex; align-items: center; gap: .4rem; }
.ec-footer ul a svg { width: .95em; height: .95em; }

/* Terminal accent colours for step demos */
.ec-term-body .t-high { color: #fb923c; }
.ec-term-body .t-med { color: #fbbf24; }

/* Mini terminals inside how-it-works steps */
.ec-step-demo { max-width: 560px; }
.ec-how .ec-step-body { width: 100%; }
.ec-terminal--mini { margin-top: .9rem; box-shadow: 0 14px 32px -18px rgba(31,38,90,.55); }
.ec-terminal--mini .ec-term-bar { padding: .5rem .8rem; }
.ec-terminal--mini .ec-term-body { font-size: .8rem; line-height: 1.65; padding: .85rem 1rem; }

/* Hero badges row + open-source pill */
.ec-hero-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.ec-hero-os { gap: .4rem; color: #cdd7ff; }
.ec-hero-os svg { width: 1em; height: 1em; }
.ec-hero-os:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }

/* Header GitHub link */
.ec-gh-link { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--ec-ink-2); border: 1px solid var(--ec-line); transition: color .15s, background .15s, border-color .15s; }
.ec-gh-link svg { width: 20px; height: 20px; }
.ec-gh-link:hover { color: var(--ec-brand); border-color: rgba(79,70,229,.4); background: var(--ec-bg-soft); }
@media (max-width: 560px) { .ec-gh-link { display: none; } }

/* ---- Responsive ---- */
@media (max-width: 940px) {
  .ec-hero-inner { grid-template-columns: 1fr; gap: 2.2rem; padding: 3rem 0 3.5rem; }
  .ec-nav { display: none; }
  .ec-footer-grid { grid-template-columns: 1fr 1fr; }
  .ec-menu-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--ec-line); background: var(--ec-bg); cursor: pointer; }
  details.ec-mobile > summary { list-style: none; }
  details.ec-mobile > summary::-webkit-details-marker { display: none; }
  details.ec-mobile[open] .ec-mobile-panel { display: block; }
  .ec-mobile-panel { display: none; position: absolute; left: 0; right: 0; top: 68px; background: #fff; border-bottom: 1px solid var(--ec-line); padding: 1rem 24px 1.4rem; box-shadow: var(--ec-shadow); }
  .ec-mobile-panel a { display: block; padding: .7rem 0; color: var(--ec-ink-2); font-weight: 600; border-bottom: 1px solid var(--ec-line); }
}
@media (min-width: 941px) { details.ec-mobile > summary { display: none; } .ec-mobile-panel { display: none; } }
@media (max-width: 560px) {
  .ec-section { padding: 3.6rem 0; }
  .ec-footer-grid { grid-template-columns: 1fr; }
  .ec-hero-cta .ec-btn { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) { .ec-page * { transition: none !important; scroll-behavior: auto !important; } }
:where(.ec-page) a:focus-visible, :where(.ec-page) button:focus-visible, :where(.ec-page) summary:focus-visible { outline: 3px solid rgba(79,70,229,.45); outline-offset: 2px; border-radius: 6px; }