:root{
    --primary:#4F46E5;
    --primary-600:#4338CA;
    --primary-700:#3730A3;
    --primary-50:#F1F0FF;
    --primary-100:#E5E3FF;
    --navy:#0B1220;
    --navy-soft:#131B33;
    --gold:#CB9B4A;
    --gold-light:#F4E3C4;
    --emerald:#16A34A;
    --theme-green:#1f5f4e;
    --slate-600:#586178;
    --slate-500:#6B7280;
    --slate-900:#10142B;
    --bg:#FBFBFE;
    --border:#E8E8F3;
    --radius-lg:22px;
    --radius-md:16px;

  /* --primary-dark:#3730A3; */

  }
     /* Badge overlay for canvas describing status */
        .canvas-badge { position: absolute; top: 12px; right: 12px; font-size: 0.65rem; text-transform: uppercase; font-weight: 800; letter-spacing: 0.05em; padding: 3.5px 10px; background: rgba(255, 255, 255, 0.95); border: 1px solid #e2e8f0; border-radius: 20px; pointer-events: none; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
        .pulse-dot { width: 6px; height: 6px; background-color: #10b981; border-radius: 50%; animation: pulse 1.5s infinite; }
        /* new aug 21 */
        .hero { position: relative; overflow: hidden; padding: 5rem 0 0; text-align: center; 
            background: #f2f3f7; }
   
     .hero::before{
   background: radial-gradient(circle, rgba(19, 5, 125, 0.1) 0%, transparent 70%) !important;
  } 
  /* .theme-green {color: var(--primary) !important;} */
  .hero-section .hero-badge::before {display: none;}
  .hero-badge i{color:var(--primary); font-size:.92rem;}
  .hero h1 .accent{
    display:block; line-height: 1.21;
    /* background:linear-gradient(120deg,#ffbd17 10%, var(--gold) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent; */
  }
   .hero p.lead-text{  font-size:16px;  max-width:620px; margin:0 auto; line-height:1.65;}
.hero-section .hero-badge {background:#fbfbfb !important;border:3px solid color-mix(in oklab, #fff 70%, transparent); color: var(--primary)}
    /* .v2-eyebrow{ display:inline-flex; align-items:center; gap:.5rem; background:#fbfbfb !important; border:3px solid color-mix(in oklab, #fff 70%, transparent);
      border-radius:999px; padding:.4rem .9rem; font-size:12px; font-weight:500; color:var(--primary); margin-bottom: 20px;} */
  /* ---- mockup stage: side columns + center window, all straight, fully visible ---- */
  .mockup-stage{
    position:relative; width:100%; margin-top:3.4rem; padding:0 1.2rem 5rem;
    display:flex; align-items:flex-end; justify-content:center; gap:1.3rem; flex-wrap:nowrap;
  }
  .mockup-side{ display:flex; flex-direction:column; justify-content:flex-end; gap:1rem; width:228px; flex-shrink:0; padding-bottom:1.6rem; }
  .mockup-side.side-right{ padding-bottom:.6rem; }

  .mockup-window{
    position:relative; z-index:5; width:min(860px, 54vw); flex-shrink:0;
    background:#fff; border-radius:12px 12px 6px 6px; overflow:hidden; text-align:left;
    /* box-shadow:0 50px 100px -30px rgba(4,8,28,.55); */
    box-shadow:0 20px 60px -20px rgba(22,35,31,.25);
    opacity:0; transform:translateY(50px);
    animation:riseIn .9s .15s cubic-bezier(.2,.7,.3,1) forwards;
  }
  @keyframes riseIn{ to{opacity:1; transform:translateY(0);} }
  .mockup-topbar{background:var(--navy); color:#fff; padding:.75rem 1.2rem; display:flex; align-items:center; gap:1rem;}
  .mt-logo{font-family:'Inter',sans-serif; font-weight:600; font-size:.825rem; display:flex; align-items:center; gap:.45rem; white-space:nowrap;}
  .mt-logo i{color:var(--emerald);}
  .mt-search{
    flex:1; max-width:280px; background:rgba(255, 255, 255, 0.09); border-radius:8px;
    padding:.4rem .8rem; font-size:.78rem; color:rgba(255, 255, 255, 0.55);
    display:flex; align-items:center; gap:.5rem;
  }
  .mt-icons{display:flex; gap:.9rem; align-items:center; margin-left:auto; color:rgba(255,255,255,.65); font-size:.95rem;}
  .mt-avatar{width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--emerald),var(--primary)); flex-shrink:0;}

  .mockup-tabs{display:flex; gap:1.4rem; padding:.65rem 1.6rem 0; border-bottom:1px solid var(--border); background:#fff;}
  .mt-tab{font-size:.8rem; font-weight:600; color:var(--slate-500); padding-bottom:.6rem; border-bottom:2px solid transparent;}
  .mt-tab.active{color:var(--primary); border-bottom-color:var(--primary);}

  .mockup-body{display:flex;}
  .mockup-sidebar{width:168px; border-right:1px solid var(--border); padding:1rem .7rem; flex-shrink:0; display:flex; flex-direction:column;}
  .mockup-sidebar a{
    display:flex; align-items:center; gap:.55rem; padding:.55rem .65rem; border-radius:8px;
    font-size:.79rem; color:var(--slate-600); font-weight:500; margin-bottom:.15rem;
  }
  .mockup-sidebar a.active{background:var(--primary-50); color:var(--primary); font-weight:700;}
  .mockup-content{flex:1; padding:1.3rem 1.5rem 1.5rem; min-width:0;}
  .mockup-stat-row{display:flex; gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap;}
  .mockup-stat{flex:1; min-width:200px; border:1px solid var(--border); border-radius:12px; padding:1rem 1.2rem;}
  .ms-label{font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slate-500); font-weight:700;}
  .ms-value{font-family:'Sora',sans-serif; font-weight:700; font-size:1.1rem; margin:.35rem 0 .65rem; color:var(--slate-900);}
  .ms-bar{height:6px; border-radius:6px; background:var(--border); overflow:hidden; display:flex;}
  .ms-bar i{display:block; height:100%;}
  .ms-legend{display:flex; justify-content:space-between; font-size:.72rem; margin-top:.55rem;}
  .ms-legend b{font-weight:700;}
  .mockup-chart-card{border:1px solid var(--border); border-radius:12px; padding:1rem 1.2rem 0;}
  .cc-title{font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slate-500); font-weight:700; margin-bottom:.3rem;}
  .cc-row{display:flex; gap:1.4rem; align-items:flex-end;}
  .cc-chart{flex:1;}
  .cc-side{width:150px; padding:.6rem 0 1rem; flex-shrink:0;}
  .cc-side .cs-item{margin-bottom:.75rem;}
  .cc-side .cs-label{font-size:.68rem; color:var(--slate-500); font-weight:600;}
  .cc-side .cs-value{font-family:'Sora',sans-serif; font-weight:700; font-size:.92rem; color:var(--slate-900);}
  .cc-side .cs-value.pos{color:var(--emerald);}
  .cc-side .cs-value.neg{color:#D97706;}

  /* ---- companion cards flanking the mockup: straight, fully visible, close by ---- */
  .peek-card{
    position:relative; width:100%; text-align:left; color:#2b2929;
    background:rgba(255,255,255,.13); backdrop-filter:blur(8px);
    border:1px solid #dbe4d5;
    border-radius:12px; padding:1rem 1.1rem;
    box-shadow:0 18px 32px -15px rgba(0,0,0,.2);
    opacity:0; animation:fadeUp .7s ease forwards;
  }
  @keyframes fadeUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
  .mockup-side .peek-card:nth-child(1){animation-delay:.35s;}
  .mockup-side .peek-card:nth-child(2){animation-delay:.55s;}
  .float-loop{animation:bobY 6s ease-in-out infinite;}
  .mockup-side .peek-card:nth-child(2) .float-loop{animation-duration:7s; animation-delay:.6s;}
  @keyframes bobY{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }

  .peek-eyebrow{font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(30, 28, 28, 0.65); font-weight:700; margin-bottom:.6rem;}
  .peek-person{display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem;}
  .peek-avatar{width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--gold-light),#d5d0eb); flex-shrink:0;}
  .peek-person b{font-size:.85rem; display:block;}
  .peek-person small{font-size:.72rem; color:rgba(30, 28, 28,.65);}
  .peek-row{display:flex; justify-content:space-between; gap:.6rem; font-size:.74rem; padding:.35rem 0; border-top:1px dashed rgba(30, 28, 28,.18); color:rgba(30, 28, 28,.85);}
  .peek-row span:first-child{color:rgba(30, 28, 28,.65);}
  .peek-total{display:flex; justify-content:space-between; align-items:center; margin-top:.5rem; padding-top:.6rem; border-top:1px solid rgba(30, 28, 28,.22); font-weight:700;}
  .peek-bars{display:flex; align-items:flex-end; gap:6px; height:34px; margin:.5rem 0 .4rem;}
  .peek-bars i{flex:1; display:block; border-radius:3px 3px 0 0; background:rgba(30, 28, 28,.32);}
  .peek-bars i.on{background:#c5c4f4;}
  .peek-months{display:flex; justify-content:space-between; font-size:.66rem; color:rgba(30, 28, 28,.6);}
  .peek-chip-row{display:flex; gap:.5rem; margin-top:.7rem;}
  .peek-chip{background:rgba(104, 103, 103, 0.15); border:1px solid rgba(107, 107, 107, 0.25); border-radius:999px; padding:.28rem .65rem; font-size:.68rem; font-weight:700;}
  .peek-chip.gold{background:#d0cff5; color:#5A4212; border-color:transparent;}

  /* ===== Buttons ===== */
   .hero-ctas{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:2rem;}
  .btn-ghost-onblue{
    background:transparent; border:1.5px solid rgba(28, 28, 30, 0.5); color:var(--primary); font-weight:600; font-size:.95rem;
    padding:.85rem 1.7rem; border-radius:12px; display:inline-flex; align-items:center; gap:.55rem; transition:all .2s ease;
  }
  .btn-ghost-onblue:hover{background:none; border-color:var(--primary); transform:translateY(-2px);color:var(--primary); box-shadow:0 8px 18px -6px rgba(79,70,229,.22);}

  .btn-brand{
    background:linear-gradient(135deg,var(--primary) 0%, var(--primary-600) 100%);
    color:#fff; border:none; font-weight:600; font-size:.95rem; padding:.85rem 1.7rem; border-radius:12px;
    box-shadow:0 10px 24px -8px rgba(79,70,229,.55);transition:transform .2s ease, box-shadow .2s ease;
  }
  .btn-brand:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(79,70,229,.65);}
  .btn-ghost-brand{
    background:#fff; color:var(--slate-900); font-weight:600; font-size:.95rem; padding:.85rem 1.6rem; border-radius:12px; border:1.5px solid var(--border); display:inline-flex; align-items:center; gap:.55rem;
    transition:all .2s ease;
  }
  .btn-ghost-brand:hover{border-color:var(--primary); color:var(--primary); background:var(--primary-50);}
  .btn-gold{ gap: .55rem; display: flex;
    background:var(--primary); color:#fff; font-weight:600; border:none; padding:.9rem 1.7rem; border-radius:12px;
    box-shadow:0 1px 0 rgba(0,0,0,.05), 0 10px 20px -10px rgba(31, 34, 95, 0.55); transition:transform .2s ease;
  }
  .btn-gold:hover{transform:translateY(-2px); color:#2A1E05; background:var(--primary);}

  .hero-btn-primary,.hero-btn-outline {display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.85rem 1.7rem;border-radius:12px;font:600 .95rem/1.5 'Inter',sans-serif;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;}
.hero-btn-primary {color:#fff;background:linear-gradient(180deg,#6B60ED,#4F46E5 55%,#4338CA);border:1px solid #4338CA;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px -8px rgba(79,70,229,.4);}
.hero-btn-primary:hover {color:#fff;transform:translateY(-2px);box-shadow:0 14px 28px -8px rgba(79,70,229,.45);}
.hero-btn-outline {color:var(--primary);background:rgba(255,255,255,.45);border:1px solid #9496AE;}
.hero-btn-outline:hover {color:var(--primary-dark);border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 10px -6px rgba(79,70,229,.18);background:linear-gradient(180deg,#FFFFFF,#F4F2FF);}
.hero-btn-primary:focus-visible,.hero-btn-outline:focus-visible {outline:3px solid #8279ED;outline-offset:4px;}

    /* stat strip */
  .stat-strip{
    background:#fff; box-shadow: 0 8px 10px rgba(0, 70, 4, 0.053); border-radius:var(--radius-lg);
    padding:2rem 1rem; color:#fff; margin-bottom: .5rem;
  }
  .stat-strip .stat-num{ font-size:2rem; font-weight:700; color: var(--primary);}
  .stat-strip .stat-label{color:#757c76; font-size:.88rem; margin-top:.2rem;}

  .rating-chip {font-weight: 500;font-size: .9rem;}
  .rating-chip div{gap: .26rem;display: flex;}
  .rating-chip i{color: var(--primary);}

  @media (max-width: 1199px){
    .mockup-side{display:none;}
    .mockup-window{width:min(760px, 88vw);}
  }
  @media (max-width: 991px){
    .mockup-stage{margin-top:2.4rem; padding:0 1rem 3rem;}
    .mockup-sidebar{display:none;}
    .mockup-tabs{padding:.6rem 1.1rem 0;}
    .mockup-content{padding:1.1rem 1.1rem 1.3rem;}
    .mockup-stat-row{flex-direction:column;}
    .cc-row{flex-direction:column;}
    .cc-side{width:100%; display:flex; gap:1.2rem; padding-top:0;}
    .mt-search{display:none;}
    .strip-wrapper {margin-top: 30px !important;}
  }