/* ============================================================
   ComptaMind — Design System v2
   Font: Inter · Colors: Navy / Green / Orange
   ============================================================ */

:root {
  --blue-950:  #0c1a3a;
  --blue-900:  #1e3a5f;
  --blue-800:  #1e40af;
  --blue-700:  #1d4ed8;
  --blue-600:  #2563eb;
  --blue-500:  #3b82f6;
  --blue-200:  #bfdbfe;
  --blue-100:  #dbeafe;
  --blue-50:   #eff6ff;
  --green-600: #059669;
  --green-500: #10b981;
  --green-100: #d1fae5;
  --green-50:  #ecfdf5;
  --orange-600:#ea580c;
  --orange-500:#f97316;
  --orange-100:#ffedd5;
  --gray-950:  #0a0a0f;
  --gray-900:  #111827;
  --gray-800:  #1f2937;
  --gray-700:  #374151;
  --gray-600:  #4b5563;
  --gray-500:  #6b7280;
  --gray-400:  #9ca3af;
  --gray-300:  #d1d5db;
  --gray-200:  #e5e7eb;
  --gray-100:  #f3f4f6;
  --gray-50:   #f9fafb;
  --white:     #ffffff;
  --bg:        #f8f9fc;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.10),0 4px 12px rgba(0,0,0,.05);
}

/* ─── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--gray-900);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--blue-600);text-decoration:none}

/* ─── Layout ────────────────────────────────────────────── */
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.wrap-sm{max-width:720px;margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section-sm{padding:64px 0}

/* ─── Typography ─────────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-600);background:var(--blue-50);border:1px solid var(--blue-100);padding:4px 12px;border-radius:100px;margin-bottom:18px}
.eyebrow-green{color:var(--green-600);background:var(--green-50);border-color:#a7f3d0}
.display{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;color:var(--gray-950)}
.display .grad{background:linear-gradient(135deg,var(--blue-800) 0%,var(--blue-500) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.h2{font-size:clamp(1.5rem,3.5vw,2.25rem);font-weight:800;letter-spacing:-.025em;line-height:1.2}
.h3{font-size:1.1rem;font-weight:700;line-height:1.35}
.body-lg{font-size:1.05rem;color:var(--gray-500);line-height:1.8}
.body{font-size:.95rem;color:var(--gray-500);line-height:1.75}
.mono{font-family:'SF Mono','Fira Code','Cascadia Code',monospace;font-size:.8rem}

/* ─── Buttons ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-weight:600;cursor:pointer;border:none;text-decoration:none;white-space:nowrap;transition:all .15s ease;border-radius:var(--radius)}
.btn-primary{background:var(--blue-800);color:var(--white);padding:13px 28px;font-size:.9rem;box-shadow:0 1px 3px rgba(30,64,175,.25),0 4px 12px rgba(30,64,175,.2)}
.btn-primary:hover{background:var(--blue-900);box-shadow:0 4px 20px rgba(30,64,175,.35);transform:translateY(-1px);text-decoration:none;color:var(--white)}
.btn-green{background:var(--green-600);color:var(--white);padding:13px 28px;font-size:.9rem;box-shadow:0 1px 3px rgba(5,150,105,.2),0 4px 12px rgba(5,150,105,.15)}
.btn-green:hover{background:#047857;transform:translateY(-1px);text-decoration:none;color:var(--white)}
.btn-outline{background:var(--white);color:var(--gray-800);border:1.5px solid var(--gray-200);padding:12px 24px;font-size:.9rem}
.btn-outline:hover{border-color:var(--blue-600);color:var(--blue-600);background:var(--blue-50);text-decoration:none}
.btn-ghost-blue{color:var(--blue-600);padding:12px 0;font-size:.9rem;font-weight:600;background:none;border:none;font-family:inherit;cursor:pointer}
.btn-ghost-blue:hover{text-decoration:underline}
.btn-lg{padding:15px 32px;font-size:.975rem;border-radius:var(--radius-lg)}
.btn-sm{padding:8px 16px;font-size:.82rem}

/* ─── Tags ───────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:100px}
.tag-green{background:var(--green-100);color:var(--green-600)}
.tag-blue{background:var(--blue-50);color:var(--blue-600);border:1px solid var(--blue-100)}
.tag-orange{background:var(--orange-100);color:var(--orange-500)}

/* ─── Navbar ─────────────────────────────────────────────── */
.navbar{position:sticky;top:0;z-index:100;background:rgba(248,249,252,.92);backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--gray-200)}
.navbar-inner{display:flex;align-items:center;height:60px;gap:0}
.nav-logo{font-size:1.1rem;font-weight:800;color:var(--gray-950);letter-spacing:-.025em;margin-right:36px;flex-shrink:0}
.nav-logo span{color:var(--blue-600)}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-links a{padding:6px 13px;border-radius:var(--radius-sm);font-size:.875rem;font-weight:500;color:var(--gray-600);transition:all .15s}
.nav-links a:hover{background:var(--gray-100);color:var(--gray-900);text-decoration:none}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.lang-switch{display:flex;align-items:center;gap:2px;background:var(--gray-100);border-radius:var(--radius-sm);padding:3px;margin-right:4px}
.lang-btn{padding:4px 10px;border-radius:4px;font-size:.78rem;font-weight:600;color:var(--gray-500);cursor:pointer;border:none;background:none;font-family:inherit;transition:all .15s}
.lang-btn.active{background:var(--white);color:var(--gray-900);box-shadow:0 1px 3px rgba(0,0,0,.08)}
@media(max-width:768px){.nav-links{display:none}.nav-logo{margin-right:auto}}

/* ─── Hero ───────────────────────────────────────────────── */
.hero{padding:88px 0 80px;background:linear-gradient(180deg,#f0f4ff 0%,#f8f9fc 60%);border-bottom:1px solid var(--gray-200);text-align:center}
.hero-announce{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--gray-200);border-radius:100px;padding:6px 14px 6px 8px;font-size:.82rem;font-weight:500;color:var(--gray-600);margin-bottom:32px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.hero-announce .dot{width:20px;height:20px;background:var(--blue-800);border-radius:50%;color:white;font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.hero h1{margin-bottom:22px;max-width:820px;margin-left:auto;margin-right:auto}
.hero .body-lg{max-width:580px;margin:0 auto 36px}
.hero-cta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.hero-note{margin-top:12px;font-size:.78rem;color:var(--gray-400)}
.hero-or{font-size:.8rem;color:var(--gray-400);font-weight:500}

/* ─── Dashboard mockup ───────────────────────────────────── */
.dashboard-wrap{max-width:900px;margin:64px auto 0;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-xl);box-shadow:0 2px 4px rgba(0,0,0,.04),0 20px 60px rgba(30,64,175,.08),0 8px 24px rgba(0,0,0,.06);overflow:hidden}
.db-titlebar{background:var(--gray-50);border-bottom:1px solid var(--gray-200);padding:12px 16px;display:flex;align-items:center;gap:8px}
.db-dot{width:12px;height:12px;border-radius:50%}
.db-url{flex:1;text-align:center;font-size:.78rem;color:var(--gray-400);background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:4px 12px;margin:0 40px}
.db-body{display:grid;grid-template-columns:190px 1fr;min-height:360px}
.db-sidebar{background:var(--gray-50);border-right:1px solid var(--gray-200);padding:14px 10px;display:flex;flex-direction:column;gap:2px}
.db-nav-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--radius-sm);font-size:.79rem;font-weight:500;color:var(--gray-500);cursor:default}
.db-nav-item.active{background:var(--white);color:var(--gray-900);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.db-nav-icon{width:15px;height:15px;display:flex;align-items:center;justify-content:center;font-size:.7rem;flex-shrink:0}
.db-main{padding:18px}
.db-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.db-title{font-size:.84rem;font-weight:700;color:var(--gray-900)}
.db-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.db-stat{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius);padding:11px 13px}
.db-stat-val{font-size:1.35rem;font-weight:800;color:var(--gray-900)}
.db-stat-val.blue{color:var(--blue-600)}
.db-stat-val.green{color:var(--green-600)}
.db-stat-val.orange{color:var(--orange-500)}
.db-stat-label{font-size:.7rem;color:var(--gray-400);font-weight:500;margin-top:2px}
.db-alerts{display:flex;flex-direction:column;gap:7px}
.db-alert{display:flex;align-items:flex-start;gap:10px;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:10px 13px;font-size:.77rem}
.db-alert-icon{width:22px;height:22px;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.72rem}
.db-alert-icon.red{background:#fee2e2}
.db-alert-icon.amber{background:var(--orange-100)}
.db-alert-icon.green{background:var(--green-100)}
.db-alert-content{flex:1}
.db-alert-title{font-weight:600;color:var(--gray-900);margin-bottom:1px}
.db-alert-desc{color:var(--gray-500);line-height:1.5}
.db-alert-action{flex-shrink:0;padding:3px 9px;border-radius:var(--radius-sm);font-size:.7rem;font-weight:600;cursor:default}
.db-alert-action.fix{background:var(--blue-50);color:var(--blue-600)}
.db-alert-action.done{background:var(--green-100);color:var(--green-600)}
.db-ai-bar{margin-top:10px;display:flex;align-items:center;gap:8px;background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--radius);padding:8px 12px}
.db-ai-bar .ai-label{font-size:.7rem;font-weight:700;color:var(--blue-600);white-space:nowrap}
.db-ai-bar .ai-text{font-size:.77rem;color:var(--gray-600);flex:1}
.db-ai-cursor{width:5px;height:12px;background:var(--blue-500);border-radius:2px;animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ─── Integration strip ──────────────────────────────────── */
.logo-strip{padding:28px 0;background:var(--white);border-bottom:1px solid var(--gray-200)}
.logo-strip-inner{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap}
.logo-pill{display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--gray-400)}
.logo-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.85rem}

/* ─── Problem / cards ────────────────────────────────────── */
.problem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:48px}
.problem-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:24px;position:relative;overflow:hidden}
.problem-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#f97316,#fb923c)}
.problem-icon{font-size:1.25rem;margin-bottom:12px}
.problem-card h3{font-size:.94rem;font-weight:700;margin-bottom:6px}
.problem-card p{font-size:.86rem;color:var(--gray-500);line-height:1.65}
.problem-stat{margin-top:12px;font-size:.8rem;font-weight:700;color:var(--orange-500)}

/* ─── Solution ───────────────────────────────────────────── */
.solution-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:56px}
.solution-list{display:flex;flex-direction:column;gap:20px}
.solution-item{display:flex;gap:15px}
.sol-icon{width:40px;height:40px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.sol-icon.blue{background:var(--blue-50)}
.sol-icon.green{background:var(--green-100)}
.sol-icon.orange{background:var(--orange-100)}
.solution-item h3{font-size:.94rem;font-weight:700;margin-bottom:4px}
.solution-item p{font-size:.86rem;color:var(--gray-500)}
.sol-terminal{background:var(--gray-950);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.sol-term-header{background:var(--gray-800);padding:10px 16px;display:flex;align-items:center;gap:8px}
.sol-term-body{padding:20px;font-family:'SF Mono','Fira Code',monospace;font-size:.77rem;line-height:1.85}
.t-muted{color:var(--gray-500)}.t-blue{color:#60a5fa}.t-green{color:#34d399}.t-orange{color:#fb923c}.t-white{color:#f9fafb}.t-red{color:#f87171}
@media(max-width:768px){.solution-grid{grid-template-columns:1fr}}

/* ─── ROI ────────────────────────────────────────────────── */
.roi-section{background:var(--blue-800);border-radius:var(--radius-xl);padding:64px 48px;text-align:center}
.roi-section h2{color:white}
.roi-section .body-lg{color:rgba(255,255,255,.7);max-width:480px;margin:12px auto 28px}
.roi-numbers{display:flex;justify-content:center;gap:56px;flex-wrap:wrap;margin-top:48px;padding-top:40px;border-top:1px solid rgba(255,255,255,.12)}
.roi-num strong{display:block;font-size:2.25rem;font-weight:900;color:white;letter-spacing:-.03em}
.roi-num span{font-size:.84rem;color:rgba(255,255,255,.6);font-weight:500}

/* ─── Features ───────────────────────────────────────────── */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:48px}
.feat-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:24px;transition:all .2s}
.feat-card:hover{border-color:var(--blue-200);box-shadow:0 4px 20px rgba(30,64,175,.08);transform:translateY(-2px)}
.feat-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:13px}
.feat-card h3{font-size:.94rem;font-weight:700;margin-bottom:6px}
.feat-card p{font-size:.85rem;color:var(--gray-500);line-height:1.65}
.feat-link{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;font-weight:600;color:var(--blue-600);margin-top:10px}

/* ─── Trust ──────────────────────────────────────────────── */
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:48px}
.trust-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:26px;display:flex;flex-direction:column;gap:12px}
.trust-badge{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem}
.trust-card h3{font-size:.94rem;font-weight:700}
.trust-card p{font-size:.86rem;color:var(--gray-500);line-height:1.65}

/* ─── Funnel strip ───────────────────────────────────────── */
.funnel-strip{display:flex;align-items:center;justify-content:center;gap:0;margin:48px auto 0;max-width:680px;flex-wrap:wrap}
.funnel-step{text-align:center;padding:0 24px;flex:1;min-width:160px}
.funnel-step-num{width:36px;height:36px;border-radius:50%;background:var(--blue-50);border:2px solid var(--blue-200);color:var(--blue-600);font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.funnel-step h3{font-size:.88rem;font-weight:700;margin-bottom:4px}
.funnel-step p{font-size:.8rem;color:var(--gray-500)}
.funnel-arrow{color:var(--gray-300);font-size:1.25rem;flex-shrink:0}
@media(max-width:560px){.funnel-arrow{display:none}}

/* ─── Testimonials ───────────────────────────────────────── */
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:48px}
.testi-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm)}
.stars{color:#f59e0b;font-size:1rem;margin-bottom:12px}
.testi-text{font-size:.88rem;color:var(--gray-600);line-height:1.75;margin-bottom:18px;font-style:italic}
.testi-author{display:flex;align-items:center;gap:10px}
.author-avatar{width:38px;height:38px;border-radius:50%;background:var(--blue-50);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:var(--blue-600);flex-shrink:0}
.author-name{font-weight:700;font-size:.88rem}
.author-role{font-size:.78rem;color:var(--gray-400)}

/* ─── FAQ ────────────────────────────────────────────────── */
.faq-list{display:flex;flex-direction:column;gap:2px;margin-top:40px}
.faq-item{border:1px solid var(--gray-200);border-radius:var(--radius);background:var(--white);overflow:hidden}
.faq-question{width:100%;text-align:left;padding:16px 20px;font-weight:600;font-size:.9rem;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--gray-900);font-family:inherit}
.faq-question::after{content:'+';font-size:1.2rem;color:var(--blue-600);flex-shrink:0}
.faq-item.open .faq-question::after{content:'−'}
.faq-answer{padding:0 20px;max-height:0;overflow:hidden;font-size:.875rem;color:var(--gray-500);line-height:1.75;transition:max-height .3s ease,padding .3s ease}
.faq-item.open .faq-answer{padding:0 20px 16px;max-height:320px}

/* ─── CTA banner ─────────────────────────────────────────── */
.cta-banner{background:linear-gradient(135deg,#f0f4ff 0%,#e8edff 100%);border:1px solid var(--blue-100);border-radius:var(--radius-xl);padding:72px 40px;text-align:center}
.cta-banner h2{margin-bottom:12px}
.cta-banner .body-lg{max-width:440px;margin:0 auto 32px}
.cta-dual{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}

/* ─── Demo page ──────────────────────────────────────────── */
.demo-hero{padding:72px 0 56px;background:linear-gradient(180deg,#f0f4ff 0%,var(--bg) 100%);border-bottom:1px solid var(--gray-200);text-align:center}
.demo-form-wrap{max-width:480px;margin:0 auto;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-xl);padding:36px;box-shadow:var(--shadow-lg)}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.form-label{font-size:.82rem;font-weight:600;color:var(--gray-700)}
.form-input{padding:11px 14px;border:1.5px solid var(--gray-200);border-radius:var(--radius);font-size:.9rem;font-family:inherit;color:var(--gray-900);transition:border-color .15s;background:var(--white)}
.form-input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.form-input::placeholder{color:var(--gray-400)}
.form-hint{font-size:.75rem;color:var(--gray-400);margin-top:20px;text-align:center}

/* ─── Footer ─────────────────────────────────────────────── */
footer{background:var(--gray-950);padding:56px 0 32px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.06)}
.footer-logo{font-size:1.05rem;font-weight:800;color:white;letter-spacing:-.02em;margin-bottom:10px}
.footer-logo span{color:var(--blue-500)}
.footer-desc{font-size:.82rem;color:rgba(255,255,255,.4);line-height:1.7;max-width:260px}
.footer-col h4{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.07em;text-transform:uppercase;margin-bottom:14px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-links a{font-size:.84rem;color:rgba(255,255,255,.45);transition:color .15s}
.footer-links a:hover{color:rgba(255,255,255,.85)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:.78rem;color:rgba(255,255,255,.25)}
.footer-bottom-links{display:flex;gap:20px}
.footer-bottom-links a{font-size:.78rem;color:rgba(255,255,255,.25)}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>*:first-child{grid-column:1/-1}}

/* ─── Section header ─────────────────────────────────────── */
.section-header{text-align:center}
.section-header .body-lg{max-width:540px;margin:14px auto 0}