:root{
    /* Tokens lifted from the app's own [data-theme='purple'] system (tokens.css) */
    --primary: #b66dff;
    --primary-rgb: 182,109,255;
    --primary-dark: #9157cc;
    --primary-tint-9: #f8f1ff;
    --primary-tint-7: #ead6ff;

    --success: #1bcfb4;      --success-rgb: 27,207,180;   --success-strong:#0ea28c;
    --warning: #fed713;      --warning-rgb: 254,215,19;   --warning-strong:#caa300;
    --danger:  #fe7c96;      --danger-rgb: 254,124,150;   --danger-strong:#e2557a;
    --info:    #198ae3;      --info-rgb: 25,138,227;

    --bg-page: #f8f9fc;
    --bg-surface: #ffffff;
    --bg-muted: #f5f6fa;

    --text-primary: #343a40;
    --text-regular: #6c757d;
    --text-secondary: #76838f;

    --border: #ebedf2;
    --border-light: #f0f1f5;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-round: 9999px;

    --shadow-sm: 0 2px 6px rgba(31,45,61,0.06);
    --shadow-md: 0 6px 18px rgba(31,45,61,0.08);
    --shadow-lg: 0 12px 32px rgba(31,45,61,0.12);

    --font: 'Lato', -apple-system, 'Segoe UI', sans-serif;
    --wrap: 1180px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bg-page);
    color:var(--text-regular);
    font-family:var(--font);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{ display:block; max-width:100%; }

  h1,h2,h3{
    font-family:var(--font);
    font-weight:900;
    text-wrap:balance;
    margin:0;
    color:var(--text-primary);
    line-height:1.18;
  }
  p{ margin:0; }
  a{ color:inherit; }

  .accent{ color:var(--primary-dark); }

  .tag{
    display:inline-flex; align-items:center; gap:0.5em;
    font-size:0.78rem; font-weight:700;
    padding:0.35em 0.9em;
    border-radius:var(--radius-round);
    background:var(--primary-tint-9);
    color:var(--primary-dark);
  }
  .tag .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

  .wrap{
    max-width:var(--wrap);
    margin:0 auto;
    padding:0 clamp(1.25rem, 4vw, 2.5rem);
  }

  .btn{
    font-family:var(--font);
    font-size:0.95rem;
    font-weight:700;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:0.5em;
    padding:0.8em 1.6em;
    border-radius:var(--radius-md);
    border:1.5px solid transparent;
    cursor:pointer;
    transition:background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  }
  .btn:active{ transform:translateY(1px); }
  .btn-primary{ background:var(--primary); color:#fff; box-shadow:0 6px 16px -6px rgba(var(--primary-rgb),0.55); }
  .btn-primary:hover{ background:var(--primary-dark); }
  .btn-ghost{ border-color:var(--border); color:var(--text-primary); background:var(--bg-surface); }
  .btn-ghost:hover{ border-color:var(--primary); color:var(--primary-dark); }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,0.94);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border-light);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:0.7rem clamp(1.25rem, 4vw, 2.5rem);
    max-width:var(--wrap); margin:0 auto;
  }
  .brand-mark{ display:flex; align-items:center; text-decoration:none; }
  .brand-mark img{ height:38px; width:auto; }
  .nav-links{
    display:flex; gap:2.1rem;
    font-size:0.95rem;
    font-weight:700;
    list-style:none; margin:0; padding:0;
  }
  .nav-links a{ text-decoration:none; color:var(--text-regular); position:relative; padding-bottom:4px; }
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
    background:var(--primary); border-radius:2px; transition:width 0.2s ease;
  }
  .nav-links a:hover{ color:var(--text-primary); }
  .nav-links a:hover::after{ width:100%; }
  @media (max-width:760px){ .nav-links{ display:none; } }

  /* ---------- hero ---------- */
  .hero{ padding:clamp(3rem,7vw,5rem) 0 clamp(2.5rem,6vw,4rem); }
  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:clamp(2rem,5vw,4rem);
    align-items:center;
  }
  @media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; } }

  .hero h1{
    font-size:clamp(2.1rem,4.4vw,3.2rem);
    margin:1rem 0 1.3rem;
  }
  .hero p.lede{
    font-size:1.08rem;
    color:var(--text-regular);
    max-width:46ch;
    margin-bottom:2rem;
  }
  .hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; }
  .hero-meta{ font-size:0.85rem; color:var(--text-secondary); }
  .hero-meta b{ color:var(--text-primary); }

  /* ---------- dashboard-card hero visual ---------- */
  .dash-card{
    background:var(--bg-surface);
    border:1px solid var(--border-light);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    padding:1.5rem 1.5rem 1.7rem;
  }

  .quotes-carousel{ position:relative; }
  .quotes-carousel .dash-card{
    display:none;
    animation:fadeSlide 0.4s ease;
  }
  .quotes-carousel .dash-card.is-active{ display:block; }
  @keyframes fadeSlide{
    from{ opacity:0; transform:translateX(14px); }
    to{ opacity:1; transform:translateX(0); }
  }
  .quotes-dots{
    display:flex; justify-content:center; gap:0.55rem;
    margin-top:1.1rem;
  }
  .quote-dot{
    width:9px; height:9px; border-radius:var(--radius-round);
    border:none; padding:0; cursor:pointer;
    background:var(--border);
    transition:background 0.2s ease, width 0.2s ease;
  }
  .quote-dot.is-active{ background:var(--primary); width:22px; }
  @media (prefers-reduced-motion: reduce){
    .quotes-carousel .dash-card{ animation:none; }
  }
  .dash-head{
    display:flex; align-items:center; justify-content:space-between;
    padding-bottom:1.1rem; margin-bottom:1.2rem;
    border-bottom:1px solid var(--border-light);
  }
  .dash-head-left{ display:flex; align-items:center; gap:0.8rem; }
  .dash-icon-circle{
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--primary-tint-9); color:var(--primary-dark); flex:none;
  }
  .dash-icon-circle svg{ width:19px; height:19px; }
  .dash-head-left strong{ display:block; color:var(--text-primary); font-size:1rem; }
  .dash-head-left span{ font-size:0.8rem; color:var(--text-secondary); }
  .status-tag{
    display:inline-flex; align-items:center; gap:0.4em;
    background:rgba(var(--success-rgb),0.14); color:var(--success-strong);
    font-size:0.78rem; font-weight:700; padding:0.35em 0.8em; border-radius:var(--radius-round);
  }

  .kpi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:0.9rem; margin-bottom:1.4rem; }
  .kpi{ display:flex; flex-direction:column; gap:0.5rem; }
  .kpi-icon{
    width:34px; height:34px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(var(--kpi-rgb),0.14); color:var(--kpi-color);
  }
  .kpi-icon svg{ width:17px; height:17px; }
  .kpi .num{ font-size:1.35rem; font-weight:900; color:var(--text-primary); font-variant-numeric:tabular-nums; }
  .kpi .lbl{ font-size:0.76rem; color:var(--text-secondary); }

  .spec-list{ display:grid; gap:0; margin-bottom:1.3rem; }
  .spec-row{
    display:flex; justify-content:space-between; gap:1rem;
    padding:0.6rem 0; border-bottom:1px solid var(--border-light);
    font-size:0.88rem;
  }
  .spec-row:last-child{ border-bottom:0; }
  .spec-row .k{ color:var(--text-secondary); }
  .spec-row .v{ color:var(--text-primary); font-weight:700; text-align:right; }

  .price-bar-label{ display:flex; justify-content:space-between; font-size:0.8rem; color:var(--text-secondary); margin-bottom:0.5rem; }
  .price-bar{ height:10px; border-radius:var(--radius-round); overflow:hidden; display:flex; background:var(--bg-muted); }
  .price-bar span{ height:100%; }
  .price-legend{ display:flex; gap:1.1rem; margin-top:0.7rem; flex-wrap:wrap; }
  .price-legend div{ display:flex; align-items:center; gap:0.4em; font-size:0.78rem; color:var(--text-secondary); }
  .price-legend .sw{ width:8px; height:8px; border-radius:50%; }

  /* ---------- generic section ---------- */
  section{ padding:clamp(1.8rem,3.5vw,2.6rem) 0; }
  .section-head{ max-width:56ch; margin-bottom:clamp(1.4rem,3vw,2rem); }
  .section-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin-top:0.6rem; }
  .section-head p{ margin-top:0.9rem; color:var(--text-regular); font-size:1.02rem; max-width:60ch; }

  /* problem */
  .problem-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
  @media (max-width:820px){ .problem-grid{ grid-template-columns:1fr; } }
  .symptom-list{ list-style:none; margin:0; padding:0; display:grid; gap:0.8rem; }
  .symptom-list li{
    display:flex; gap:1rem; align-items:flex-start;
    background:var(--bg-surface);
    border:1px solid var(--border-light);
    border-radius:var(--radius-lg);
    padding:1rem 1.2rem;
    font-size:0.98rem;
    color:var(--text-primary);
    box-shadow:var(--shadow-sm);
  }
  .symptom-list .ico{
    width:26px; height:26px; border-radius:50%; flex:none; margin-top:0.05em;
    display:flex; align-items:center; justify-content:center;
    background:rgba(var(--danger-rgb),0.16); color:var(--danger-strong);
  }
  .symptom-list .ico svg{ width:13px; height:13px; }

  /* pipeline / flow */
  .flow{
    display:grid; grid-template-columns:repeat(6,1fr);
    gap:1.2rem; margin-top:2.6rem;
    align-items:stretch;
  }
  .flow-step{
    position:relative;
    background:var(--bg-surface);
    border:1px solid var(--border-light);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:1rem 1rem 1.15rem;
    display:flex; flex-direction:column; gap:0.7rem;
  }
  .flow-num{
    align-self:flex-start;
    font-size:0.72rem; font-weight:900; color:var(--primary-dark);
    background:var(--primary-tint-9);
    padding:0.2em 0.65em; border-radius:var(--radius-round);
    font-variant-numeric:tabular-nums;
  }
  .flow-body{ display:flex; flex-direction:column; gap:0.3rem; }
  .flow-step .name{ font-weight:700; color:var(--text-primary); font-size:0.95rem; line-height:1.25; }
  .flow-step .desc{ font-size:0.8rem; color:var(--text-secondary); line-height:1.45; }
  .flow-step:not(:last-child)::after{
    content:"→";
    position:absolute; left:100%; top:50%; transform:translate(-50%,-50%);
    color:var(--primary); font-size:1.05rem; font-weight:700; line-height:1;
    pointer-events:none; z-index:2;
  }
  @media (max-width:900px){
    .flow{ grid-template-columns:repeat(3,1fr); row-gap:1.4rem; }
    .flow-step:not(:last-child)::after{ display:none; }
  }
  @media (max-width:520px){ .flow{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:380px){ .flow{ grid-template-columns:1fr; } }

  /* modules */
  .module-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; }
  @media (max-width:900px){ .module-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .module-grid{ grid-template-columns:1fr; } }
  .module-card{
    background:var(--bg-surface);
    border:1px solid var(--border-light);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:1.7rem 1.5rem;
    display:flex; flex-direction:column; gap:1rem;
    transition:box-shadow 0.15s ease, transform 0.15s ease;
  }
  .module-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
  .module-icon-circle{
    width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(var(--mod-rgb),0.14); color:var(--mod-color);
  }
  .module-icon-circle svg{ width:22px; height:22px; }
  .module-card h3{ font-size:1.08rem; font-weight:700; color:var(--text-primary); }
  .module-card p{ font-size:0.93rem; color:var(--text-regular); }
  .module-card .module-sub{ font-size:0.86rem; color:var(--text-secondary); }
  .module-features{
    list-style:none; margin:0; padding:0; display:grid; gap:0.45rem;
    border-top:1px solid var(--border-light); padding-top:1rem;
  }
  .module-features li{
    position:relative; padding-left:1.2rem;
    font-size:0.93rem; color:var(--text-regular);
  }
  .module-features li::before{
    content:""; position:absolute; left:0; top:0.55em;
    width:6px; height:6px; border-radius:50%;
    background:var(--mod-color, var(--primary));
  }

  .module-unifier{
    margin-top:2rem;
    display:flex; gap:1rem; align-items:flex-start;
    background:var(--primary-tint-9);
    border:1px solid var(--primary-tint-7);
    border-radius:var(--radius-lg);
    padding:1.4rem 1.6rem;
    color:var(--text-primary);
  }
  .module-unifier svg{ width:26px; height:26px; flex:none; color:var(--primary-dark); }
  .module-unifier p{ font-size:1rem; color:var(--text-regular); max-width:76ch; }
  .module-unifier strong{ color:var(--text-primary); }

  /* how it works */
  .how-list{ list-style:none; margin:2.4rem 0 0; padding:0; display:grid; gap:1rem; }
  .how-item{
    display:grid; grid-template-columns:44px 1fr; gap:1.2rem;
    background:var(--bg-surface);
    border:1px solid var(--border-light);
    border-radius:var(--radius-lg);
    padding:1.2rem 1.3rem;
    align-items:center;
    box-shadow:var(--shadow-sm);
  }
  .how-item .num{
    font-family:var(--font); font-size:1.1rem; font-weight:900;
    color:#fff; background:var(--primary);
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }
  .how-item h3{
    font-weight:700; font-size:1.02rem; color:var(--text-primary); margin-bottom:0.2rem;
  }
  .how-item p{ color:var(--text-regular); font-size:0.94rem; max-width:60ch; }

  /* contact */
  .contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); }
  @media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
  .contact-note{ margin-top:1.8rem; font-size:0.92rem; color:var(--text-secondary); }
  .contact-note a{ color:var(--primary-dark); text-decoration:none; font-weight:700; }

  form.card-form{
    background:var(--bg-surface); border:1px solid var(--border-light); border-radius:var(--radius-lg);
    padding:1.7rem; display:grid; gap:1.1rem;
    box-shadow:var(--shadow-md);
  }
  .field{ display:grid; gap:0.4rem; }
  .field label{ font-size:0.82rem; font-weight:700; color:var(--text-regular); }
  .field input, .field textarea{
    background:var(--bg-page); border:1.5px solid var(--border); border-radius:var(--radius-sm);
    color:var(--text-primary); font-family:var(--font); font-size:0.95rem;
    padding:0.7em 0.85em; resize:vertical;
  }
  .field input:focus, .field textarea:focus{
    outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.18);
  }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
  @media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
  .form-status{ font-size:0.85rem; color:var(--primary-dark); min-height:1.2em; }

  /* footer */
  footer{ background:var(--bg-surface); color:var(--text-secondary); border-top:1px solid var(--border-light); }
  .footer-grid{
    display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem;
    padding:2.6rem 0 1.8rem;
    align-items:start;
  }
  @media (max-width:700px){ .footer-grid{ grid-template-columns:1fr; } }
  .footer-grid img{ height:26px; margin-bottom:0.9rem; }
  .footer-grid h4{
    font-size:0.85rem; text-transform:uppercase; letter-spacing:0.04em;
    color:var(--text-primary); margin-bottom:0.9rem; font-weight:700;
  }
  .footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:0.55rem; font-size:0.92rem; }
  .footer-grid a{ text-decoration:none; color:var(--text-secondary); }
  .footer-grid a:hover{ color:var(--primary-dark); }
  .footer-bottom{
    border-top:1px solid var(--border-light);
    padding:1.1rem 0;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem;
    font-size:0.82rem;
  }

  /* reveal */
  .reveal{ opacity:0; transform:translateY(14px); transition:opacity 0.5s ease, transform 0.5s ease; }
  .reveal.is-visible{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    html{ scroll-behavior:auto; }
  }

  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }