:root{
    --indigo:      #2B236F;
    --indigo-2:    #4A3F99;
    --purple:      #8A3FFC;
    --purple-2:    #A855F7;
    --pink:        #E756C5;
    --coral:       #FF8B5C;

    --white:       #FFFFFF;
    --lavender:    #F7F4FF;
    --lavender-2:  #F0EAFF;
    --gray-light:  #F6F7FA;
    --border:      #E8EAF2;
    --body-text:   #4B5563;
    --muted:       #8B90A0;

    --grad-primary: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
    --grad-brand:   linear-gradient(120deg, var(--purple) 0%, var(--pink) 55%, var(--coral) 100%);
    --grad-soft-cta: linear-gradient(120deg, #F3EEFF 0%, #FBEAF4 55%, #FFF1E8 100%);

    --radius-lg: 24px;
    --radius-md: 20px;
    --radius-sm: 14px;

    --shadow-soft: 0 4px 20px rgba(43,35,111,0.06), 0 1px 3px rgba(43,35,111,0.04);
    --shadow-card: 0 20px 60px rgba(43,35,111,0.12), 0 4px 16px rgba(43,35,111,0.06);
    --shadow-lift: 0 16px 40px rgba(138,63,252,0.18), 0 4px 12px rgba(43,35,111,0.08);

    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    font-family: var(--font-body);
    color: var(--body-text);
    background: var(--white);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{ font-family: var(--font-display); color: var(--indigo); letter-spacing:-0.02em; }
  section{ padding: 110px 24px; position:relative; }
  .wrap{ max-width:1180px; margin:0 auto; }
  .eyebrow{
    display:flex; align-items:center; gap:8px;
    font-weight:700; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
    color: var(--purple); margin-bottom:16px;
  }
  .eyebrow::before{ content:''; width:18px; height:2px; border-radius:2px; background: var(--purple); }
  h2{ font-size: clamp(26px,2.6vw,34px); font-weight:800; line-height:1.25; }
  .lede{ font-size:16px; color:var(--body-text); }

    .bg-gradient-soft {
  background: linear-gradient(135deg, #EDE1FC 0%, #F3E7FA 35%, #FBE3F0 68%, #FFE9DC 100%);
    }
  /* ---------- little logo lockup (used inside mockups) ---------- */
  .logo-lockup{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:800; }
  .logo-lockup .lv{ color:var(--indigo); }
  .logo-lockup .check{ display:inline-block; }

  /* ===== NAV ===== */
  nav{ border-bottom:1px solid var(--border); background:var(--white); }
  nav .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 24px; max-width:1180px;
  }
  .brand img{ height:28px; width:auto; display:block; }
  nav .links{ display:flex; align-items:center; gap:36px; }
  nav .links a{
    color: var(--indigo); text-decoration:none; font-weight:600; font-size:14.5px;
    display:flex; align-items:center; gap:5px; opacity:0.85; transition:opacity .2s ease;
  }
  nav .links a:hover{ opacity:1; }
  nav .links svg{ opacity:0.6; }
  nav .cta-mini{ display:flex; align-items:center; gap:28px; }
  nav .cta-mini a.signin{ color:var(--indigo); text-decoration:none; font-weight:600; font-size:14.5px; }

  /* ===== BUTTONS ===== */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-weight:600; font-size:14.5px;
    padding:13px 22px 13px 26px; border-radius:100px; cursor:pointer;
    border:none; text-decoration:none; transition: transform .22s ease, box-shadow .22s ease;
    white-space:nowrap;
  }
  .btn-primary{
    background: var(--grad-primary); color:var(--white);
    box-shadow: 0 8px 20px rgba(138,63,252,0.28);
  }
  .btn-primary:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lift); }
  .btn-primary .play{
    width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,0.22);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .btn-secondary{ background: var(--grad-primary); color:var(--white);
    box-shadow: 0 8px 20px rgba(138,63,252,0.28); }
  .btn-secondary:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lift); }
  /* ===== HERO ===== */
  .hero{ padding:26px 24px 0; overflow:visible; }
  .hero-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; }
  .badge{
    display:inline-flex; align-items:center; gap:8px;
    background: var(--lavender); border:1px solid #ECE3FF;
    padding:8px 16px 8px 12px; border-radius:100px;
    font-size:13px; font-weight:700; color:var(--purple);
    margin-bottom:22px;
  }
  .hero h1{ font-size: clamp(34px, 3.6vw, 46px); font-weight:800; line-height:1.15; }
  .hero p.lede{ font-size:16.5px; margin:20px 0 32px; max-width:460px; }

  /* ---------- hero visual composition ---------- */
  .hero-visual{ position:relative; padding:20px 10px 20px 40px; }
  .dash-card{
    background:var(--white); border-radius:18px; box-shadow:var(--shadow-card);
    border:1px solid var(--border); overflow:hidden; position:relative; z-index:2;
  }
  .dash-top{
    display:flex; align-items:center; gap:16px; padding:14px 18px; border-bottom:1px solid var(--border);
  }
  .dash-search{
    flex:1; display:flex; align-items:center; gap:8px; background:var(--gray-light);
    border-radius:10px; padding:8px 12px; font-size:12.5px; color:var(--muted);
  }
  .dash-icon-btn{ width:30px; height:30px; border-radius:50%; background:var(--gray-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .dash-avatar{
    width:30px; height:30px; border-radius:50%; background:var(--grad-primary); color:white;
    font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .dash-body{ display:flex; }
  .dash-sidebar{ width:132px; border-right:1px solid var(--border); padding:14px 10px; flex-shrink:0; }
  .dash-sidebar .item{
    display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:9px;
    font-size:12px; font-weight:600; color:var(--body-text); margin-bottom:2px;
  }
  .dash-sidebar .item.active{ background:var(--lavender); color:var(--purple); }
  .dash-sidebar .item svg{ flex-shrink:0; }
  .dash-main{ flex:1; padding:18px 20px; min-width:0; }
  .dash-greet h4{ font-family:var(--font-display); font-size:15px; color:var(--indigo); font-weight:700; }
  .dash-greet p{ font-size:11.5px; color:var(--muted); margin-top:2px; }
  .dash-greet-row{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
  .dash-newcase{
    background:var(--grad-primary); color:white; font-size:11.5px; font-weight:700;
    padding:8px 14px; border-radius:9px; white-space:nowrap;
  }
  .dash-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
  .stat-card{ background:var(--gray-light); border-radius:12px; padding:12px 14px; }
  .stat-card .n{ font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--indigo); }
  .stat-card .l{ font-size:10.5px; color:var(--muted); margin:2px 0 6px; }
  .stat-card .v{ font-size:10.5px; color:var(--purple); font-weight:700; }
  .case-table{ background:var(--white); border:1px solid var(--border); border-radius:14px; padding:6px 4px; }
  .case-row{ display:flex; align-items:center; gap:10px; padding:9px 12px; }
  .case-row .av{ width:24px; height:24px; border-radius:50%; flex-shrink:0; }
  .case-row .name{ font-size:12px; font-weight:700; color:var(--indigo); }
  .case-row .meta{ font-size:10.5px; color:var(--muted); }
  .case-row .info{ flex:1; min-width:0; }
  .case-row .updated{ font-size:10.5px; color:var(--muted); width:70px; flex-shrink:0; }
  .pill{ font-size:10px; font-weight:700; padding:4px 9px; border-radius:100px; white-space:nowrap; flex-shrink:0; }
  .pill-cert{ background:#F3E8FF; color:var(--purple); }
  .pill-progress{ background:#E9EAFB; color:var(--indigo-2); }
  .pill-approved{ background:#E4F8EA; color:#1E8E4A; }
  .pill-rtw{ background:#F3E8FF; color:#7C3FE0; }
  .view-all-link{ display:block; font-size:11.5px; font-weight:700; color:var(--purple); text-decoration:none; padding:10px 14px 2px; }

  /* phone mockup */
  .phone{
    position:absolute; right:-18px; bottom:-56px; width:190px; z-index:3;
    background:#1B1730; border-radius:26px; padding:8px; box-shadow:var(--shadow-card);
  }
  .phone-screen{ background:var(--white); border-radius:19px; overflow:hidden; padding:14px 14px 16px; }
  .phone-head{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; color:var(--indigo); margin-bottom:12px; }
  .phone-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  .phone-status{ background:#E9EAFB; color:var(--indigo-2); font-size:9.5px; font-weight:700; padding:4px 9px; border-radius:100px; }
  .phone-field{ margin-bottom:10px; }
  .phone-field .k{ font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em; }
  .phone-field .v{ font-size:11.5px; font-weight:700; color:var(--indigo); margin-top:2px; }
  .phone-docs{ display:flex; justify-content:space-between; align-items:center; font-size:10.5px; font-weight:600; color:var(--indigo); padding:8px 0; border-top:1px solid var(--border); margin-top:6px; }
  .phone-progress{ display:flex; flex-direction:column; align-items:center; margin-top:14px; }
  .phone-progress .sub{ font-size:9.5px; color:var(--muted); margin-top:6px; text-align:center; }

  .float-card{
    position:absolute; left:-8px; bottom:60px; z-index:4;
    background:var(--white); border-radius:14px; box-shadow:var(--shadow-card);
    padding:12px 16px; display:flex; align-items:center; gap:10px; max-width:230px;
  }
  .float-card .ic{ width:30px; height:30px; border-radius:50%; background:#1E8E4A; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .float-card .txt strong{ display:block; font-size:12px; color:var(--indigo); }
  .float-card .txt span{ font-size:10.5px; color:var(--muted); }
  .float-card .time{ font-size:9.5px; color:var(--muted); margin-left:auto; align-self:flex-start; }

  /* ===== WHY SWITCH ===== */
  .why{ text-align:center; }
  .why .wrap{ max-width:720px; }
  .why .eyebrow{ justify-content:center; }
  .why .eyebrow::before{ display:none; }
  .why p.lede{ font-size:16.5px; margin-top:16px; }

  /* ===== FEATURE ROWS ===== */
  .bg-lavender{ background: var(--lavender); }
  .feature-row{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
  .feature-copy p{ margin:14px 0 18px; font-size:15.5px; }
  .check-list{ list-style:none; }
  .check-list li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; padding:6px 0; color:var(--body-text); }
  .check-list svg{ flex-shrink:0; margin-top:3px; }

  .visual-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-soft); padding:20px; }
  .visual-card h4{ font-family:var(--font-display); font-size:14px; color:var(--indigo); font-weight:700; margin-bottom:10px; }

  .duo-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:28px; }

  .timeline{ list-style:none; margin-top:6px; }
  .timeline li{ position:relative; padding-left:24px; padding-bottom:18px; border-left:2px solid var(--border); margin-left:6px; }
  .timeline li:last-child{ border-left:2px solid transparent; padding-bottom:0; }
  .timeline .dot{ position:absolute; left:-7px; top:0; width:12px; height:12px; border-radius:50%; background:#1E8E4A; border:2px solid white; box-shadow:0 0 0 1px #1E8E4A; }
  .timeline .dot.pending{ background:var(--purple); box-shadow:0 0 0 1px var(--purple); }
  .timeline .dot.empty{ background:white; box-shadow:0 0 0 1px var(--border); }
  .timeline .t{ font-size:13px; font-weight:700; color:var(--indigo); }
  .timeline .d{ font-size:11.5px; color:var(--muted); margin-top:2px; }

  .kv-list{ margin-top:6px; }
  .kv-row{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px; }
  .kv-row:last-of-type{ border-bottom:none; }
  .kv-row .k{ color:var(--muted); }
  .kv-row .v{ color:var(--indigo); font-weight:700; }

  /* ===== PRINCIPLES ===== */
  .principles-panel{
    background:var(--lavender); border-radius:var(--radius-lg); padding:52px 40px;
    display:grid; grid-template-columns:repeat(4,1fr); gap:36px; text-align:center;
  }
  .principle .ic{
    width:52px; height:52px; border-radius:50%; background:var(--white); border:1px solid #ECE3FF;
    display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
  }
  .principle h3{ font-size:16px; margin-bottom:8px; }
  .principle p{ font-size:13.5px; color:var(--body-text); }

  /* ===== CTA (soft) ===== */
  .cta-soft{
    background: var(--grad-soft-cta); border-radius:var(--radius-lg); padding:44px 48px;
    display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  }
  .cta-soft .left{ display:flex; align-items:center; gap:20px; }
  .cta-soft .badge-ic{
    width:52px; height:52px; border-radius:50%; background:var(--white); box-shadow:var(--shadow-soft);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .cta-soft h3{ font-size:21px; }
  .cta-soft p{ font-size:14.5px; margin-top:4px; max-width:420px; }

  /* ===== FOOTER ===== */
  footer{ background:var(--white); border-top:1px solid var(--border); padding: 20px 24px 20px; }
  .footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:40px; }
  .footer-brand img{ height:26px; }
  .footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
  .footer-col h5{ font-size:12.5px; font-weight:700; color:var(--indigo); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:14px; }
  .footer-col a{ display:block; font-size:13.5px; color:var(--body-text); text-decoration:none; margin-bottom:10px; }
  .footer-col a:hover{ color:var(--purple); }
  .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
  .footer-bottom p{ font-size:12.5px; color:var(--muted); }
  .socials{ display:flex; gap:10px; }
  .socials a{
    width:34px; height:34px; border-radius:50%; background:var(--gray-light);
    display:flex; align-items:center; justify-content:center; color:var(--indigo);
  }

  @media (max-width:980px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-visual{ padding:20px 0 90px; }
    .feature-row{ grid-template-columns:1fr; gap:36px; }
    .duo-row{ grid-template-columns:1fr; }
    .dash-stats{ grid-template-columns:repeat(2,1fr); }
    .principles-panel{ grid-template-columns:1fr 1fr; }
    nav .links{ display:none; }
    section{ padding:72px 20px; }
    .footer-top{ flex-direction:column; }
    nav .wrap{display:block;}
  }