:root{
      --green-900:#0e3d28;
      --green-800:#12603a;
      --green-700:#079590;
      --green-600:#34bdff;
      --green-100:#e9f6ee;
      --green-50:#fbfbfb;
      --red-600:#b12028;
      --red-700:#d13a20;
      --ink-900:#0c1310;
      --ink-800:#16211c;
      --ink-600:#4b5a53;
      --ink-400:#8a978f;
      --paper:#ffffff;
      --hair:#e6ebe7;
      --shadow: 0 10px 30px rgba(12,19,16,0.08);
      --line:#eceef5;
       --blue-700:#3b3fd1;
    --blue-600:#4547d6;
    --blue-100:#eceafd;
    --ink-900:#161a2b;
    --ink-700:#4a5163;
    --ink-500:#8890a0;
    --navy-900:#22278f;
    --line:#eceef5;
    --paper-soft:#f4f5fa;
      --radius:16px;
          font-family: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

          --ink:#0B1F17;
    --forest:#0E7A4E;
    --forest-dark:#095C3B;
    --forest-deep:#08331F;
    --mint:#E9F6EE;
    --mint-2:#DCF1E4;
    --ember:#E8582E;
    --ember-dark:#C7451F;
    --paper:#FBFAF7;
    --cloud:#F4F5F2;
    --line:#E3E5DE;
    --ink-soft:#5B6B60;
    --white:#ffffff;
    --font-head:'Manrope', sans-serif;
    --font-body:'Manrope', sans-serif;
    --radius:16px;
    --shadow-sm:0 1px 2px rgba(11,31,23,.06);
    --shadow-md:0 8px 24px rgba(11,31,23,.08);
    --shadow-lg:0 24px 60px rgba(11,31,23,.14);

     --line: #dfe6ee;
  --fg: #12202f;
  --muted: #566475;
  --coral: #d63a30;
  --blue: #1f7fd6;
  --amber: #e8a900;
  --green: #229a5c;
  /* theme-independent dark surfaces (hero, footer) */
  --ink: #0c2740;
  --ink-2: #081b2d;
  --on-ink: #f2f6fa;
  --on-ink-muted: #a9bccf;
  --ink-line: #24425e;
  --sky: #6cc3ff;
  --hot: #ff6a5f;
  --acc: #1f6fd0;

   --ft-bg: #f6f7f9;          /* clean neutral light grey */
    --ft-bg-2: #eceef2;        /* bottom bar */
    --ft-card: #ffffff;
    --ft-line: rgba(20,30,50,.10);
    --ft-text: #1b2433;        /* deep slate */
    --ft-muted: #5b6574;
    --ft-leaf: #c4252f;        /* brand red accent for hovers and links */
    --ft-red: #c4252f;         /* matches "Schedule Free Consultation" */
    --ft-red-hover: #a81d26;
    }

    @media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1520; --surface: #151e2b; --tile: #172130; --line: #263345; --fg: #eaf0f6; --muted: #9fadbf;
    --coral: #ff6a5f; --blue: #5aaef5; --amber: #ffc83a; --green: #4cc98a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1520; --surface: #151e2b; --tile: #172130; --line: #263345; --fg: #eaf0f6; --muted: #9fadbf;
  --coral: #ff6a5f; --blue: #5aaef5; --amber: #ffc83a; --green: #4cc98a; color-scheme: dark;
}
    *{box-sizing:border-box; margin:0; padding:0;}
    body{color:var(--ink-900); background:var(--paper); line-height:1.5; -webkit-font-smoothing:antialiased; 
      /* font-family: "Montserrat", sans-serif; */
    }
    img{max-width:100%; display:block;}
    a{color:inherit; text-decoration:none;}
    ul{list-style:none;}
    button{font-family:inherit; cursor:pointer;}
    .wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
   .wrap-erp{max-width:1240px;padding: 25px 0px 50px 0px;
    margin-top: 20px;
    border-top: 1px solid var(--line); }

       .wrap-erp-fea{max-width:1240px;padding: 50px 0px 0px 0px;
    margin-top: 50px;
    border-top: 1px solid var(--line);}
    section{position:relative;}

    /* ---------- Top utility bar ---------- */
    .topbar{background:var(--ink-900); color:#cfd8d2; font-size:13px;}
    .topbar .wrap{display:flex; justify-content:space-between; align-items:center; height:38px;}
    .topbar .left{display:flex; gap:22px;}
    .topbar .left span{opacity:.85;}
    .topbar .right{display:flex; gap:16px; align-items:center;}

    /* ---------- Header / nav ---------- */
    header.site{position:sticky; top:0; z-index:60; background:rgba(255,255,255,0.96); backdrop-filter:blur(6px); border-bottom:1px solid var(--hair);}
    nav.main{display:flex; align-items:center; justify-content:space-between; height:78px;}
    .logo{display: flex;
      /* align-items: center; */
      gap: 8px;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.5px;
     width: 107px;
    height: 64px;}
    .logo .dot{color:var(--red-600);}
    .navlinks{display:flex; gap:34px; align-items:center; font-size:15px; font-weight:500; color:var(--ink-800);}
     .navlinks a{ font-weight:500; color:var(--ink-800)!important;}
    .navlinks li{position:relative;}
    .navlinks .caret{font-size:11px; margin-left:4px; opacity:.6;}
    .cta-btn{background:var(--red-600); color:#fff; padding:12px 22px; 
      border-radius:10px; font-weight:600; font-size:14.5px; border:none; 
      display:inline-flex; align-items:center; gap:8px; box-shadow:0 8px 18px rgba(232,72,44,0.28);
      transition:transform .15s ease, box-shadow .15s ease;font-family: "Public Sans", sans-serif;}
    .cta-btn:hover{transform:translateY(-1px); box-shadow:0 12px 22px rgba(232,72,44,0.34);}

    /* mobile menu toggle */
    .menu-toggle{display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--hair); background:#fff; align-items:center; justify-content:center; flex-shrink:0; transition:background .2s ease, border-color .2s ease;}
    .menu-toggle span{display:block; width:19px; height:2px; background:var(--ink-900); position:relative; border-radius:2px; transition:background .15s;}
    .menu-toggle span::before, .menu-toggle span::after{content:""; position:absolute; left:0; width:19px; height:2px; border-radius:2px; background:var(--ink-900); transition:transform .25s cubic-bezier(.4,0,.2,1), top .25s cubic-bezier(.4,0,.2,1), background .15s;}
    .menu-toggle span::before{top:-6px;}
    .menu-toggle span::after{top:6px;}
    .menu-toggle.open{background:var(--red-600); border-color:var(--red-600);}
    .menu-toggle.open span{background:transparent;}
    .menu-toggle.open span::before, .menu-toggle.open span::after{background:#fff;}
    .menu-toggle.open span::before{top:0; transform:rotate(45deg);}
    .menu-toggle.open span::after{top:0; transform:rotate(-45deg);}

    .mobile-panel{max-height:0; overflow:hidden; display:flex; flex-direction:column; gap:2px; background:#fff; border-top:0 solid var(--hair); padding:0 0; transition:max-height .35s cubic-bezier(.4,0,.2,1), padding .35s ease;}
    .mobile-panel.open{max-height:900px; border-top-width:1px; padding:10px 0 18px;}
    .mobile-panel > a, .mobile-panel > .mp-item{padding:13px 4px; font-size:15px; font-weight:600; color:var(--ink-800); border-bottom:1px solid var(--hair); display:flex; align-items:center; justify-content:space-between; cursor:pointer;}
    .mobile-panel .mp-sub{max-height:0; overflow:hidden; display:flex; flex-direction:column; padding:0 4px; gap:2px; transition:max-height .3s cubic-bezier(.4,0,.2,1), padding .3s ease;}
    .mobile-panel .mp-sub.open{max-height:400px; padding:6px 4px 12px 4px;}
    .mobile-panel .mp-sub a{padding:10px 6px; font-size:13.5px; font-weight:600; color:var(--ink-800); display:flex; align-items:center; gap:12px; border-radius:10px;}
    .mobile-panel .mp-sub a:active{background:var(--green-50);}
    .mobile-panel .mp-sub a .mp-ic{width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;}
    .mobile-panel .mp-sub a .mp-txt{display:flex; flex-direction:column; gap:1px; flex:1;}
    .mobile-panel .mp-sub a .mp-txt small{font-weight:500; color:var(--ink-600); font-size:11.5px;}
    .mobile-panel .mp-sub a .mp-thumb{width:44px; height:44px; border-radius:10px; object-fit:cover; flex-shrink:0; margin-left:auto; border:1px solid var(--hair);}
    .mobile-panel .mp-caret{transition:transform .25s cubic-bezier(.4,0,.2,1); font-size:12px; opacity:.6;}
    .mobile-panel .mp-item.open .mp-caret{transform:rotate(180deg);}
    .mobile-panel .mp-item .mp-left{display:flex; align-items:center; gap:12px;}
    .mobile-panel .mp-item .mp-left .mp-ic{width:32px; height:32px; border-radius:9px; background:var(--green-100); color:var(--green-700); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;}
    .mobile-panel .cta-btn{justify-content:center; margin-top:14px;}

    /* mega menu */
    .has-mega{padding-bottom:14px; margin-bottom:-14px;font-family: "Public Sans", sans-serif;}
    .has-mega > a, .has-mega{cursor:pointer;}
    .mega{position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(6px) scale(.98); width:720px; background:#fff; border-radius:20px; box-shadow:0 30px 70px -12px rgba(12,19,16,0.22), 0 8px 20px rgba(12,19,16,0.06); border:1px solid var(--hair); padding:12px; display:grid; grid-template-columns:1.35fr 1fr; gap:4px; opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s cubic-bezier(.2,.8,.3,1.1), visibility .2s; transform-origin:top center;}
    .mega::before{content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%) rotate(45deg); width:14px; height:14px; background:#fff; border-left:1px solid var(--hair); border-top:1px solid var(--hair); border-radius:3px;}
    .has-mega:hover .mega{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1);}
    .mega-main{padding:14px 6px 6px;}
    .mega-col-title{font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-400); font-weight:800; margin-bottom:10px; padding:0 10px;}
    .mega-item{display:flex; gap:14px; align-items:flex-start; padding:11px 10px; border-radius:13px; transition:background .15s, transform .15s; position:relative;}
    .mega-item:hover{background:var(--green-50); transform:translateX(2px);}
    .mega-ic{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(12,19,16,0.04);}
    .mega-ic.blue{background:#e9f0ff; color:#3358d4;}
    .mega-ic.green{background:var(--green-100); color:var(--green-700);}
    .mega-ic.purple{background:#f2e9ff; color:#7a3fe0;}
    .mega-ic.orange{background:#fdeee0; color:#c76a12;}
    .mega-ic.red{background:#fde7ea; color:#d1435e;}
    .mega-item h4{font-size:14.5px; font-weight:700; margin-bottom:2px; display:flex; align-items:center; gap:8px;}
    .mega-item p{font-size:12.5px; color:var(--ink-600); line-height:1.4;}
    .mega-badge{font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:var(--red-600); color:#fff; padding:2px 7px; border-radius:999px;}
    .mega-arrow{position:absolute; right:10px; top:50%; transform:translateY(-50%) translateX(-4px); opacity:0; font-size:14px; color:var(--ink-400); transition:opacity .15s, transform .15s;}
    .mega-item:hover .mega-arrow{opacity:1; transform:translateY(-50%) translateX(0);}

    .mega-highlight{background:linear-gradient(150deg,var(--ink-900) 0%, #0e2f22 100%); border-radius:16px; padding:22px; color:#fff; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;}
    .mega-highlight::after{content:""; position:absolute; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle,rgba(126,226,168,.28),transparent 70%); top:-50px; right:-50px;}
    .mega-highlight .mh-ic{width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:17px; margin-bottom:14px; position:relative;}
    .mega-highlight h4{font-size:16px; margin-bottom:8px; position:relative;}
    .mega-highlight p{font-size:13px; color:#b9c4bd; margin-bottom:18px; position:relative; line-height:1.5;}
    .mega-highlight a{font-size:13.5px; font-weight:700; color:#fff; background:rgba(255,255,255,.12); padding:10px 14px; border-radius:10px; display:inline-flex; align-items:center; justify-content:space-between; gap:8px; position:relative; transition:background .15s;}
    .mega-highlight a:hover{background:rgba(255,255,255,.2);}

    /* products mega — image preview column */
    .mega-visuals{display:flex; flex-direction:column; gap:10px; padding:8px;}
    .mv-item{position:relative; border-radius:14px; overflow:hidden; height:78px; cursor:pointer; border:1px solid var(--hair);}
    .mv-item img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease;}
    .mv-item:hover img{transform:scale(1.06);}
    .mv-item .mv-overlay{position:absolute; inset:0; background:linear-gradient(90deg, rgba(12,19,16,.72) 0%, rgba(12,19,16,.15) 65%, transparent 100%);}
    .mv-item .mv-label{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#fff;}
    .mv-item .mv-label .mv-tag{font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; opacity:.75; font-weight:700; display:block; margin-bottom:2px;}
    .mv-item .mv-label b{font-size:14px; font-weight:800;}

    /* ---------- Hero ---------- */
    .hero{
      /* background: #f2fcff;
  background: linear-gradient(269deg,rgba(242, 252, 255, 1) 19%, rgba(250, 250, 250, 1) 75%); */
   padding:56px 0 60px;}
    .hero .grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:start;}
    .eyebrow{display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--forest-dark);background: var(--green-100);padding: 7px 14px;border-radius: 999px;}
    .eyebrow .pulse{width:7px; height:7px; border-radius:50%; background:var(--green-600);}
    h1.hero-h{font-size:46px; line-height:1.12; font-weight:700; letter-spacing:0px; margin-bottom:20px;
       /* font-family: "Public Sans", sans-serif; */
      }
    h1.hero-h span{color:var(--green-700);}
    .hero p.lead{font-size:16px; color:var(--ink-600); max-width:480px; margin-bottom:22px;}
    .checklist{display:flex; flex-direction:column; gap:9px; margin-bottom:28px;}
    .checklist li{display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--ink-800); font-weight:500;}
    .checklist .ck{color:var(--green-600); font-weight:800;}
    .hero-ctas{display:flex; gap:14px; margin-bottom:36px;}
    .btn-outline{border:1.5px solid var(--hair); background:#fff; padding:12px 22px; border-radius:10px; font-weight:600;
      font-size:14.5px; display:inline-flex; align-items:center; gap:8px;font-family: "Public Sans", sans-serif;}
    .stat-row{display:flex; gap:34px;}
    .stat b{display:block; font-size:22px; font-weight:800;font-family: "Public Sans", sans-serif;}
    .stat span{font-size:12.5px; color:var(--ink-600);}

    .hero-card{background:#fff; border-radius:20px; box-shadow:var(--shadow); border:1px solid var(--hair); 
      /* padding:26px; */ padding: 15px 15px 0px 15px;position: relative;
    top: -25px;
    }
    .hero-card > h3{font-size:16px; font-weight:800; margin-bottom:2px;font-family: "Public Sans", sans-serif;}
    .hero-card > p{font-size:12.5px; color:var(--ink-600); margin-bottom:18px;}
    .sol-card{border:1px solid var(--hair); border-radius:14px; padding:16px; display:flex; gap:14px; margin-bottom:12px; transition:border-color .15s, transform .15s;}
    .sol-card:hover{border-color:var(--green-600); transform:translateY(-2px);}
    .sol-ic{width:70px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0;}
    /* .sol-ic.a{background:#e9f0ff; color:#3358d4;}
    .sol-ic.b{background:var(--green-100); color:var(--green-700);}
    .sol-ic.c{background:#f2e9ff; color:#7a3fe0;} */
    .sol-tag{font-size:22px; text-transform:uppercase; letter-spacing:.06em; color:#fff; font-weight:700; margin-bottom:3px;}
    .sol-card h4{font-size:15px; font-weight:700; margin-bottom:4px;font-family: "Public Sans", sans-serif;}
    .sol-card p{font-size:14.5px; color:#f4f4f4; margin-bottom:0px;}
    .price-pill{display:inline-flex; align-items:baseline; gap:5px; font-size:11.5px; color:var(--ink-600);}
    .price-pill b{ color:#fff;  border-radius:6px; font-size:12px;}

    /* ---------- Client marquee ---------- */
    .clients{padding:90px 0; background:#fff; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);}
    .clients-head{text-align:center; font-size:17.5px; color:var(--ink-600); margin-bottom:24px; font-weight:600;font-family: "Public Sans", sans-serif;}
    .clients-head b{color:var(--ink-900);}
    .marquee-row{display:flex; align-items:center; gap:20px;}
    .marq-btn{width:34px; height:34px; border-radius:50%; border:1px solid var(--hair); background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; color:var(--ink-600);}
    .marquee{overflow:hidden; flex:1;}
    .marquee-track{display:flex; gap:16px; width:max-content; animation:scroll 26s linear infinite;}
    @keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
    .client-chip{display:flex; align-items:center; gap:10px; border:1px solid var(--hair); border-radius:12px; padding:12px 18px; background:#fbfcfb; white-space:nowrap;}
    .client-avatar{width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:13px;}
    .client-chip .cn{font-size:13.5px; font-weight:700; line-height:1.1;}
    .client-chip .cs{font-size:10px; color:var(--ink-600); text-transform:uppercase; letter-spacing:.04em;}
    .clients-sub{text-align:center; font-size:15px; color:var(--ink-600); margin-top:22px;}


     /* ---------- Enterprise Solutions ---------- */
  .enterprise{
    position:relative; overflow:hidden; isolation:isolate; padding:90px 0;
    background:linear-gradient(180deg,#fff 0%, #eaf6fc 100%);
    color:var(--ink-600);
  }
  .enterprise::before{
    content:""; position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
    background-image: radial-gradient(rgba(41,150,199,.16) 1.4px, transparent 1.4px);
    background-size:20px 20px;
    -webkit-mask-image:radial-gradient(ellipse 600px 400px at 88% 6%, rgba(0,0,0,.9), transparent 70%);
    mask-image:radial-gradient(ellipse 600px 400px at 88% 6%, rgba(0,0,0,.9), transparent 70%);
  }
  .enterprise .wrap{position:relative; z-index:1;}
  .ent-badge{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; color:#1c7fa8; background:#dcf1fa; padding:7px 14px; border-radius:999px; margin-bottom:20px;}
  .ent-badge .dot{width:7px; height:7px; border-radius:50%; background:#2ea3d6;}
  .ent-top{display:grid; grid-template-columns:0.95fr 1.05fr; gap:56px; align-items:start; margin-bottom:50px;}
  .ent-top h2{font-size:32px; font-weight:800; color:var(--ink-900); letter-spacing:-.6px; margin-bottom:16px; line-height:1.18;}
  .ent-top > div > p.ent-lead{font-size:15px; color:var(--ink-600); line-height:1.65; max-width:440px; margin-bottom:24px;}
  .ent-checklist{display:flex; flex-direction:column; gap:11px; margin-bottom:28px;}
  .ent-checklist li{display:flex; align-items:flex-start; gap:11px; font-size:14px; color:var(--ink-800); font-weight:600;}
  .ent-checklist .ck{width:20px; height:20px; border-radius:50%; background:#2ea3d6; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;}
  .btn-ghost-light{border:1.5px solid var(--hair); background:#fff; color:var(--ink-900); padding:12px 22px; border-radius:10px; font-weight:600; font-size:14.5px; display:inline-flex; align-items:center; gap:8px; transition:border-color .15s, box-shadow .15s;}
  .btn-ghost-light:hover{border-color:#2ea3d6; box-shadow:0 6px 16px rgba(12,19,16,.06);}

  .ent-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .ent-card{background:#fff; border:1px solid var(--hair); border-radius:16px; padding:20px; box-shadow:0 4px 14px rgba(12,19,16,0.04); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
  .ent-card:hover{transform:translateY(-4px); box-shadow:0 16px 30px rgba(12,19,16,0.1); border-color:#2ea3d6;}
  .ent-card .ec-ic{width:38px; height:38px; border-radius:10px; background:#dcf1fa; color:#1c7fa8; display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:13px;}
  .ent-card h5{font-size:14px; font-weight:800; color:var(--ink-900); margin-bottom:6px;}
  .ent-card p{font-size:12px; color:var(--ink-600); line-height:1.5;}

  .ent-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding-top:36px; border-top:1px solid var(--hair);}
  .ent-stat{text-align:center;}
  .ent-stat b{display:block; font-size:26px; font-weight:800; color:var(--ink-900);}
  .ent-stat span{font-size:12px; color:var(--ink-600);}

  @media (max-width:860px){
    .ent-top{grid-template-columns:1fr;}
    .ent-grid{grid-template-columns:1fr 1fr;}
    .ent-stats{grid-template-columns:1fr 1fr; gap:26px;}
  }
  @media (max-width:480px){
    .ent-grid{grid-template-columns:1fr;}
    .ent-stats{grid-template-columns:1fr 1fr;}
  }

    /* ---------- Solutions / ERP tab section ---------- */
    .platform{background:var(--green-50); padding:40px 0;}
    .sec-eyebrow{display:block; text-align:center; font-size:12.5px; font-weight:800; letter-spacing:.09em; 
      text-transform:uppercase; color:var(--green-700); margin-bottom:14px;font-family: "Public Sans", sans-serif;}
    h2.sec-h{text-align:center; font-size:34px; font-weight:800; letter-spacing:-0.8px; margin-bottom:12px;font-family: "Public Sans", sans-serif;}
    h4.sec-h{text-align: center;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.8px;
    margin-bottom: 4px;
    font-family: "Public Sans", sans-serif;}
    h2.sec-h span {
    color: var(--green-700);
}
    p.sec-sub{text-align:center; font-size:15.5px; color:var(--ink-600); max-width:550px; margin:0 auto 0px;}

    .tabbar{display:flex; justify-content:center; gap:6px; background:#fff; border:1px solid var(--hair); border-radius:14px; padding:6px; width:max-content; margin:0 auto 40px; box-shadow:var(--shadow);}
    .tabbar button{padding:7px 20px; border-radius:10px; border:none; background:transparent; font-weight:600; font-size:16px; color:var(--ink-600); display:flex; align-items:center; gap:8px; transition:background .15s, color .15s;}
    .tabbar button.active{color:#fff;}
    .tabbar button[data-tab="erp"].active{background:#3358d4;}
    .tabbar button[data-tab="school"].active{background:var(--green-700);}
    .tabbar button[data-tab="acc"].active{background:#7a3fe0;}

    /* per-tab accent theming */
    .tab-panel[data-accent="blue"] .cloud-tag{background:#e9f0ff; color:#3358d4;font-family: "Public Sans", sans-serif;}
    .tab-panel[data-accent="blue"] .visual-tile{background:linear-gradient(150deg,#e9f0ff 0%, #f7fbff 55%, #eef3ff 100%);}
    .tab-panel[data-accent="blue"] .visual-badge{background:rgba(51,88,212,0.1); color:#2946b0;}
  .tab-panel[data-accent="blue"] .feat-ic{background:#e9f0ff; color:#3358d4;} 
      .tab-panel[data-accent="blue"] .visual-badge{background:rgba(51,88,212,0.1); color:#2946b0;}
    .tab-panel[data-accent="blue"] .price-box{background:#3b3fd1;}
    .tab-panel[data-accent="blue"] .see-price{color:#3358d4;}
    .tab-panel[data-accent="blue"] .visual-badge .dot{background:#3358d4;}

    .tab-panel[data-accent="green"] .cloud-tag{background:var(--green-100); color:var(--green-700);font-family: "Public Sans", sans-serif;}
    .tab-panel[data-accent="green"] .visual-tile{background:linear-gradient(150deg,var(--green-50) 0%, #f6fbf8 55%, #edf7f0 100%);}
    .tab-panel[data-accent="green"] .visual-badge{background:rgba(23,122,69,0.1); color:var(--green-800);}
      .tab-panel[data-accent="green"] .visual-badge{background:rgba(23,122,69,0.1); color:var(--green-800);}
    .tab-panel[data-accent="green"] .feat-ic{background:var(--green-100); color:var(--green-700);} 
    .tab-panel[data-accent="green"] .price-box{background:var(--ink-900);}
    .tab-panel[data-accent="green"] .see-price{color:var(--green-700);}
    .tab-panel[data-accent="green"] .visual-badge .dot{background:var(--green-700);}

    .tab-panel[data-accent="purple"] .cloud-tag{background:#f2e9ff; color:#7a3fe0;font-family: "Public Sans", sans-serif;}
    .tab-panel[data-accent="purple"] .visual-tile{background:linear-gradient(150deg,#f3edff 0%, #faf8ff 55%, #f1ebfd 100%);}
    .tab-panel[data-accent="purple"] .visual-badge{background:rgba(122,63,224,0.1); color:#5c2fb0;}
    /* .tab-panel[data-accent="purple"] .feat-ic{background:#f2e9ff; color:#7a3fe0;} */
    .tab-panel[data-accent="purple"] .price-box{background:#341a6b;}
    .tab-panel[data-accent="purple"] .see-price{color:#7a3fe0;}
    .tab-panel[data-accent="purple"] .visual-badge .dot{background:#7a3fe0;}

    .tab-panel{display:none;}
    .tab-panel.active{display:block;}
    .tab-card{background:#fff; border-radius:24px; padding:44px; box-shadow:var(--shadow); border:1px solid var(--hair);}
    .tab-top{display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center; margin-bottom:0px;}
    .cloud-tag{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:var(--green-700); background:var(--green-100); padding:6px 12px; border-radius:999px; margin-bottom:16px;}
    .tab-top h3{font-size:50px; font-weight:800; margin-bottom:2px;color: #0b474a;font-family: "Public Sans", sans-serif;}
    .tab-top h3 small{display:block; font-size:25px; font-weight:600; color:var(--ink-600);font-family: "Public Sans", sans-serif;}
    .tab-top p{font-size:16px; color:var(--ink-600); margin:16px 0 20px; max-width:460px;}
    .tab-ctas{display:flex; align-items:center; gap:22px;}
    .price-box{background:var(--ink-900); color:#fff; padding:12px 20px; border-radius:12px; font-size:13px;}
    .price-box b{display:block; font-size:17px;}
    .see-price{font-size:13.5px; font-weight:700; color:var(--green-700);}

    .visual-tile{aspect-ratio:1/0.85; border-radius:22px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; padding:22px;}
    .visual-tile img{max-width:88%; max-height:88%; object-fit:contain; filter:drop-shadow(0 18px 30px rgba(12,19,16,.14));}
    .visual-badge{position:absolute; bottom:16px; left:16px; backdrop-filter:blur(6px); font-size:11.5px; font-weight:700; padding:7px 12px; border-radius:999px; display:flex; align-items:center; gap:6px;}
    .visual-badge .dot{width:6px; height:6px; border-radius:50%;}

    .feat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:20px;}
    .feat-card{border:1px solid var(--hair); border-radius:14px; padding:18px 16px;}
    .feat-ic{width:36px; height:36px; border-radius:9px; 
      color:var(--green-700); display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:12px;}
    .feat-card h5{font-size:14px; font-weight:700; margin-bottom:6px;}
    .feat-card p{font-size:14px; color:var(--ink-600); line-height:1.45;}
    .tab-foot{font-size:15.5px; color:var(--ink-600);}
    .tab-foot b{color:var(--ink-900);}

    /* ---------- Industry-based products strip ---------- */
    .strip{padding:80px 0;}
    .strip-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:34px;}
    .strip-head .lbl{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.08em;
      text-transform:uppercase; color:#3358d4; margin-bottom:6px;font-family: "Public Sans", sans-serif;}
    .strip-head h2{font-size:28px; font-weight:800;font-family: "Public Sans", sans-serif;}
    .strip-head h2 span{color:var(--red-600);}
    .cardgrid5{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-bottom:26px;}
    .mini-card{border:1px solid var(--hair); border-radius:16px; padding:22px 18px; transition:box-shadow .15s, transform .15s;}
    .mini-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
    .mini-ic{width:40px; height:40px; border-radius:10px; background:var(--green-100); color:var(--green-700); display:flex; align-items:center; justify-content:center; font-size:17px; margin-bottom:14px;}
    .mini-card h4{font-size:15px; font-weight:800; margin-bottom:8px;}
    .mini-card p{font-size:15.5px; color:var(--ink-600); line-height:1.5;}
    .strip-link{text-align:center; font-size:15.5px; color:var(--red-600); font-weight:700;font-family: "Public Sans", sans-serif;}

    /* ---------- Industries served ---------- */
  /* ---------- Industries served ---------- */
  .industries{background:#f5f5f5; padding:80px 0;}
  h2.center-h{text-align:center; font-size:30px; font-weight:800; margin-bottom:20px;}
  h2.center-h span{color:var(--green-700);}
  .ind-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:16px; margin-bottom:26px;}
  .ind-card{background:#fff; border:1px solid var(--hair); border-radius:16px; padding:26px 10px; text-align:center; transition:transform .15s, box-shadow .15s;}
  .ind-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}

  /* ---- bento industries grid ---- */
  .bento{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:18px; margin-bottom:32px;}
  .bcard{position:relative; border-radius:20px; overflow:hidden; padding:15px; display:flex; flex-direction:column; justify-content:flex-end; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
  .bcard.big{grid-column:1; grid-row:1 / span 2;}

  /* light cards (default — 6 of 7) */
  .bcard{background:#fff; border:1px solid var(--hair); color:var(--ink-900); box-shadow:0 4px 14px rgba(12,19,16,0.04);}
  .bcard:hover{transform:translateY(-5px); box-shadow:0 18px 34px rgba(12,19,16,0.1); border-color:var(--green-600);}
  .bcard .b-ic{width:44px; height:44px; border-radius:12px;
     color:var(--green-700); display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:auto;}
  .bcard h5{font-size:15px; font-weight:700; margin-bottom:4px; margin-top:14px;}
  .bcard p{font-size:12px; color:var(--ink-600); line-height:1.5; max-height:0; opacity:1;
      transition:max-height .25s ease, opacity .25s ease;
    margin-bottom: 30px;
    }
  .bcard:hover p{max-height:60px; opacity:1;}
  .bcard .b-stat{display:inline-flex; align-self:flex-start; font-size:10.5px; font-weight:800; background:var(--green-100); color:var(--green-700); padding:4px 10px; border-radius:999px; margin-top:8px;}
  .bcard .b-arrow{position:absolute; top:18px; right:18px; width:30px; height:30px; border-radius:50%; background:var(--green-50); color:var(--green-700); display:flex; align-items:center; justify-content:center; font-size:13px; opacity:0; transform:translate(-4px,4px); transition:opacity .2s, transform .2s;}
  .bcard:hover .b-arrow{opacity:1; transform:translate(0,0);}

  /* featured card — the one accent, textured not flat */
  .bcard.big{
    background:
      radial-gradient(circle at 85% 12%, rgba(126,226,168,.22), transparent 45%),
      radial-gradient(ellipse at 10% 100%, rgba(51,88,212,.18), transparent 55%),
      linear-gradient(150deg,var(--green-700) 0%, var(--green-900) 100%);
    border-color:transparent; color:#fff; isolation:isolate;
  }
  .bcard.big::before{
    content:""; position:absolute; inset:0; z-index:0; opacity:.5;
    background-image: radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.4px);
    background-size:16px 16px;
    -webkit-mask-image:linear-gradient(200deg, rgba(0,0,0,.9) 10%, transparent 60%);
    mask-image:linear-gradient(200deg, rgba(0,0,0,.9) 10%, transparent 60%);
  }
  .bcard.big .b-ghost{position:absolute; z-index:0; right:-16px; bottom:-24px; font-size:150px; opacity:.1; line-height:1; user-select:none;}
  .bcard.big > *{position:relative; z-index:1;}
  .bcard.big:hover{border-color:transparent;}
  .bcard.big .b-ic{width:56px; height:56px; font-size:24px; background:rgba(255,255,255,.16); color:#fff;}
  .bcard.big h5{font-size:22px; margin-bottom:8px;}
  .bcard.big p{font-size:13px; color:rgba(255,255,255,.85); max-height:60px; opacity:1; margin-bottom:8px;}
  .bcard.big .b-stat{background:rgba(255,255,255,.18); color:#fff;}
  .bcard.big .b-arrow{background:rgba(255,255,255,.18); color:#fff; opacity:1; transform:translate(0,0);}

  @media (max-width:860px){
    .bento{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px;}
    .bcard.big{grid-column:1 / span 2; grid-row:auto; min-height:190px;}
  }
  @media (max-width:480px){
    .bento{grid-template-columns:1fr;}
    .bcard.big{grid-column:1; min-height:170px;}
  }

  .ind-card h5{font-size:13.5px; font-weight:700;}
  .view-all{display:block; text-align:center; font-size:13.5px; font-weight:700; color:var(--red-600);}


    /* ---------- Process (phase flow) ---------- */
    .process{padding:50px 0; background:linear-gradient(180deg,#fff 0%, #fbfcfa 100%);}
    .process-sub{text-align:center; font-size:15px; color:var(--ink-600); max-width:520px; margin:10px auto 30px;}

    .phase-flow{display:flex; flex-direction:column; gap:0; max-width:1080px; margin:0 auto;}
    .phase{position:relative; border-radius:28px; padding:40px 44px 34px; overflow:hidden; isolation:isolate;}
    .phase[data-c="blue"]{background:linear-gradient(120deg,#eef2ff 0%, #f5f8ff 100%); border:1px solid #dde5fb;}
    .phase[data-c="green"]{background: linear-gradient(120deg, #e6edff 0%, #d7e3ff 100%);
    border: 1px solid #e1eaff;}
    .phase[data-c="purple"]{    background: linear-gradient(120deg, #dae2f9 0%, #c1d3ff 100%);
    border: 1px solid #d1dcfb;}

    .phase-ghost{position:absolute; top:-38px; right:6px; font-size:150px; font-weight:800; line-height:1; z-index:0; user-select:none; font-family:Georgia,serif;}
    .phase[data-c="blue"] .phase-ghost{color:#3358d4; opacity:.08;}
    .phase[data-c="green"] .phase-ghost{color:var(--green-700); opacity:.08;}
    .phase[data-c="purple"] .phase-ghost{color:#7a3fe0; opacity:.08;}

    .phase-head{position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap;}
    .phase-badge{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:6px 13px; border-radius:999px; margin-bottom:10px;}
    .phase[data-c="blue"] .phase-badge{background:#3358d4; color:#fff;}
    .phase[data-c="green"] .phase-badge{background:var(--green-700); color:#fff;}
    .phase[data-c="purple"] .phase-badge{background:#7a3fe0; color:#fff;}
    .phase-head h3{font-size:25px; font-weight:700; letter-spacing:-.4px;}
    .phase-head p{font-size:13.5px; color:var(--ink-600); max-width:320px;}

    .phase-steps{position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
    .pstep{position:relative; background:#fff; border:1px solid rgba(12,19,16,0.06); border-radius:16px; padding:22px 18px; margin:0 10px; box-shadow:0 6px 16px rgba(12,19,16,0.05); transition:transform .18s ease, box-shadow .18s ease;}
    .pstep:hover{transform:translateY(-4px); box-shadow:0 16px 30px rgba(12,19,16,0.1);}
    .pstep::after{content:"→"; position:absolute; top:50%; right:-24px; transform:translateY(-50%); font-size:16px; color:var(--ink-400); z-index:2;}
    .pstep:last-child::after{content:none;}
    .pstep .pnum{position:absolute; top:-13px; left:16px; width:28px; height:28px; border-radius:50%; color:#fff; font-size:12.5px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(0,0,0,.15);}
    .phase[data-c="blue"] .pnum{background:#3358d4;}
    .phase[data-c="green"] .pnum{background:var(--green-700);}
    .phase[data-c="purple"] .pnum{background:#7a3fe0;}
    .pstep .pic{font-size:28px; margin:8px 0 12px;}
    .pstep h5{font-size:15.5px; font-weight:700; margin-bottom:6px; line-height:1.3;}
    .pstep p{font-size:15px; color:var(--ink-600); line-height:1.5;}

    .phase-connector{display:flex; justify-content:center; padding:0px 0; position:relative; z-index:1;height: 12px;}
    .phase-connector .dot-line{width:2px; height:11px; background:repeating-linear-gradient(180deg,var(--ink-400) 0 4px, transparent 4px 9px);}

    @media (max-width:820px){
      .phase{padding:32px 22px 26px;}
      .phase-steps{grid-template-columns:1fr; gap:26px;}
      .pstep{margin:0;}
      .pstep::after{content:none;}
      .phase-ghost{font-size:100px; top:-20px;}
    }

    /* ---------- CTA banner ---------- */
    .cta-banner{background:linear-gradient(120deg,var(--ink-900) 0%, #0e2f22 100%); border-radius:24px; padding:36px 44px; display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 auto; max-width:1176px; box-shadow:0 30px 60px rgba(12,19,16,0.25);}
    .cta-banner .l{display:flex; align-items:center; gap:18px;}
    .cta-banner .ic{width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;}
    .cta-banner h3{color:#fff; font-size:20px; font-weight:800; margin-bottom:4px;}
    .cta-banner p{color:#b9c4bd; font-size:13.5px;}
    .cta-banner .btns{display:flex; gap:12px; flex-shrink:0;}
    .btn-white{background:#fff; color:var(--ink-900); padding:12px 20px; border-radius:10px; font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:8px;}
    .cta-wrap-outer{padding:0 0 90px;}

/* ---------- Values ---------- */
  .values{    padding: 0px 0px 50px 0px; position:relative; overflow:hidden;}
  .values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:44px;}
  .value{position:relative; border-radius:20px; padding:30px 26px 28px; border:1px solid var(--hair); overflow:hidden; isolation:isolate; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
  .value:nth-child(odd){background:#fff;}
  .value:nth-child(even){background:var(--green-50);}
  .value::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--green-600),var(--green-800)); transform:scaleX(0); transform-origin:left; transition:transform .3s ease;}
  .value:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(12,19,16,0.1); border-color:transparent;}
  .value:hover::before{transform:scaleX(1);}
  .value .v-ghost{position:absolute; top:-14px; right:8px; font-size:66px; font-weight:800; color:var(--ink-900); opacity:.05; z-index:0; font-family:Georgia,serif; line-height:1;}
  .value-ic{position:relative; z-index:1; width:48px; height:48px; border-radius:13px; 
     color:var(--green-700); display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:18px; transition:transform .25s ease, background .25s ease, color .25s ease;}
  .value:hover .value-ic{background:var(--green-700); color:#fff; transform:rotate(-8deg) scale(1.08);}
  .value h5{position:relative; z-index:1; font-size:15.5px; font-weight:700; margin-bottom:9px;}
  .value p{position:relative; z-index:1; font-size:13px; color:var(--ink-600); line-height:1.6;}


  /* ---------- Mobile App ---------- */
  .mobileapp{position:relative; overflow:hidden; padding:90px 0; background:linear-gradient(180deg,#fff 0%, #f4faf6 100%);}
  .ma-top{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
  .ma-badge{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; color:var(--green-700); background:var(--green-100); padding:7px 14px; border-radius:999px; margin-bottom:20px;}
  .ma-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--green-600);}
  .ma-top h2{font-size:32px; font-weight:800; letter-spacing:-.6px; margin-bottom:16px; line-height:1.18;}
  .ma-top h2 span{color:var(--red-600);}
  .ma-top > div > p.ma-lead{font-size:15.5px; color:var(--ink-600); line-height:1.65; max-width:440px; margin-bottom:24px;}
  .ma-checklist{display:flex; flex-direction:column; gap:11px; margin-bottom:28px!important;}
  .ma-checklist li{display:flex; align-items:flex-start; gap:11px; font-size:14px; color:var(--ink-800); font-weight:600;}
  .ma-checklist .ck{width:20px; height:20px; border-radius:50%; background:var(--green-700); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;}
  .store-row{display:flex; gap:12px; margin-bottom:22px; flex-wrap:wrap;}
  .store-btn{display:flex; align-items:center; gap:10px; background:var(--ink-900); color:#fff; padding:10px 18px; border-radius:11px; transition:transform .15s ease;}
  .store-btn:hover{transform:translateY(-2px);}
  .store-btn .sb-ic{font-size:20px;width: 28px;}
  .store-btn .sb-txt small{display:block; font-size:9.5px; color:#b9c4bd;}
  .store-btn .sb-txt b{display:block; font-size:14px; font-weight:800;    color: #fff;}
  .ma-rating{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-600);}
  .ma-rating .stars{color:#f5a623; font-size:13px; letter-spacing:1px;}
  .ma-rating b{color:var(--ink-900);}

  .phone-wrap{position:relative; display:flex; justify-content:center;}
  .phone-frame{width:270px; border-radius:38px;
      position:relative; z-index:2;}
  .phone-notch{width:70px; height:16px; background:var(--ink-900); border-radius:0 0 12px 12px; margin:0 auto; position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:3;}
  .phone-screen{background:#fff; border-radius:26px; overflow:hidden; padding:22px 14px 14px; display:flex; flex-direction:column; gap:12px; min-height:440px;}
  .ps-greet{display:flex; align-items:center; justify-content:space-between; margin-bottom:2px;}
  .ps-greet b{font-size:13px; font-weight:800;}
  .ps-greet span{font-size:10px; color:var(--ink-600);}
  .ps-bell{width:26px; height:26px; border-radius:8px; background:var(--green-50); color:var(--green-700); display:flex; align-items:center; justify-content:center; font-size:12px;}
  .ps-stats{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  .ps-stat{background:var(--green-50); border-radius:10px; padding:9px 10px;}
  .ps-stat b{display:block; font-size:13px; font-weight:800;}
  .ps-stat span{font-size:8.5px; color:var(--ink-600);}
  .ps-chart{background:#fbfcfb; border:1px solid var(--hair); border-radius:10px; padding:10px; display:flex; align-items:flex-end; gap:5px; height:64px;}
  .ps-bar{flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg, var(--green-600), var(--green-800));}
  .ps-list{background:#fbfcfb; border:1px solid var(--hair); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:7px;}
  .ps-list-item{display:flex; align-items:center; gap:7px; font-size:9.5px; font-weight:600; color:var(--ink-800);}
  .ps-list-item .pd{width:6px; height:6px; border-radius:50%; flex-shrink:0;}
  .ps-list-item .pv{margin-left:auto; color:var(--ink-600); font-weight:700;}
  .ps-nav{display:flex; justify-content:space-around; margin-top:auto; padding-top:8px; border-top:1px solid var(--hair);}
  .ps-nav span{font-size:13px; opacity:.4;}
  .ps-nav span.on{opacity:1;}

  .ma-toast{position:absolute; z-index:3; background:#fff; border-radius:14px; box-shadow:0 16px 32px rgba(12,19,16,.12); border:1px solid var(--hair); padding:10px 14px; display:flex; align-items:center; gap:9px;}
  .ma-toast.mt1{top:8%; left:2%;}
  .ma-toast.mt2{bottom:14%; right:0%;}
  .ma-toast .mt-ic{width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;}
  .ma-toast .mt-txt b{display:block; font-size:11.5px; font-weight:800; line-height:1.2;}
  .ma-toast .mt-txt span{font-size:9.5px; color:var(--ink-600);}

  @media (max-width:860px){
    .ma-top{grid-template-columns:1fr;}
    .phone-wrap{margin-top:20px;}
    .ma-toast{display:none;}
  }


    /* ---------- About ---------- */
    .about{padding: 90px 0 90px;}
    .about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center;}
    .about-img{position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--shadow);}
    .about-img img{width:100%; height:420px; object-fit:cover;}
    .play-chip{position:absolute; bottom:18px; left:18px; background:rgba(255,255,255,.92); backdrop-filter:blur(4px); padding:8px 14px 8px 8px; border-radius:999px; display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700;}
    .play-chip .p{width:26px; height:26px; border-radius:50%; background:var(--green-700); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px;}
    .about h2{font-size:30px; font-weight:800; margin-bottom:16px;}
    .about h2 span{color:var(--red-600);}
    .about > div > p{font-size:15px; color:var(--ink-600); line-height:1.7; margin-bottom:26px;}
    .about-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:30px;margin-top:20px;}
    .about-stat{border:1px solid var(--hair); border-radius:14px; padding:16px 12px; text-align:center;}
    .about-stat b{display:block; font-size:19px; font-weight:800;}
    .about-stat span{font-size:11px; color:var(--ink-600);}
    .badge-row{display:flex; flex-wrap:wrap; gap:22px 30px;}
    .badge-row .b{display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:var(--ink-800);}
    .badge-row .b .ic{color:var(--green-700); font-size:15px;}



   /* ---------- Footer ---------- */
  footer{background:#f3f5f9; color:var(--ink-600); padding:0px 0 0;}
  .foot-grid{display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1.1fr; gap:30px; margin-bottom:40px;}
  .foot-logo{font-size:22px; font-weight:800; color:var(--ink-900); margin-bottom:14px;}
  .foot-logo span{color:var(--red-600);}
  .foot-about p{font-size:15px; color:var(--ink-600); line-height:1.7; margin-bottom:18px;}
  .foot-grid h6{color: #6a6a6a;font-size: 21.5px;font-weight: 600; margin-bottom: 16px;}
  .foot-grid ul li{margin-bottom:10px; font-size:13.5px; color:var(--ink-600);}
  .foot-grid ul li a:hover{color:var(--green-700);}
  .contact-line{display:flex; gap:10px; font-size:14.5px; margin-bottom:12px; align-items:flex-start; color:var(--ink-600);}

  .foot-divider{border-top:1px solid var(--hair); margin-bottom:34px;}

  .soc-row{display:flex; justify-content:center; gap:14px; margin-bottom:30px;}
  .soc-row a{width:38px; height:38px; border-radius:50%; border:1px solid var(--hair); background:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--ink-800); transition:background .15s, color .15s, border-color .15s, transform .15s;}
  .soc-row a:hover{background:var(--green-700); border-color:var(--green-700); color:#fff; transform:translateY(-3px);}

  .legal-row{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px; font-size:14.5px; color:var(--ink-600); padding-bottom:36px;}
  .legal-row a{color:var(--ink-600);}
  .legal-row a:hover{color:var(--green-700);}
  .legal-row .sep{color:var(--hair);}

  .foot-bottom-bar{background:var(--ink-900); position:relative; overflow:hidden; isolation:isolate;}
  .foot-bottom-bar::before{
    content:""; position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
    background:radial-gradient(ellipse 420px 200px at 50% -40%, rgba(28,154,84,.35), transparent 70%);
  }
  .foot-bottom{position:relative; z-index:1; padding:26px 0; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;}
  .foot-bottom .fb-logo{width: 80px;}
  .foot-bottom .fb-logo span{color:var(--red-600);}
  .foot-bottom .fb-copy{font-size:13.5px; color:#8b978f;}

  @media (max-width:640px){
    .legal-row{padding-bottom:28px;}
  }

  @media (max-width:1100px){
    .cardgrid5, .feat-grid{grid-template-columns:repeat(3,1fr);}
    .ind-grid{grid-template-columns:repeat(4,1fr);}
    .foot-grid{grid-template-columns:1fr 1fr;}
  }
    @media (max-width:860px){
      .navlinks, .stat-row{display:none;}
      nav.main .cta-btn{display:none;}
      .menu-toggle{display:flex;}
      .hero .grid, .tab-top, .about-grid{grid-template-columns:1fr;}
      .values-grid, .cardgrid5, .feat-grid{grid-template-columns:repeat(2,1fr);        display: block;}
      .ind-grid{grid-template-columns:repeat(3,1fr);}
      .cta-banner{flex-direction:column; align-items:flex-start;}

      /* topbar */
      .topbar .wrap{overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;}
      .topbar .wrap::-webkit-scrollbar{display:none;}
      .topbar .left{flex-shrink:0;}
      .topbar .left span{white-space:nowrap;}
      .topbar .right{flex-shrink:0; padding-left:16px;}

      /* ERP/School/Accounting tab section */
      .tab-card{padding:28px 22px;}
      .tab-top{gap:28px;}
      .tab-top h3{font-size:27px;}
      .tab-ctas{flex-wrap:wrap; row-gap:12px;}
      .visual-tile{aspect-ratio:16/10;}
      .tabbar{max-width:100%; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;}
      .tabbar::-webkit-scrollbar{display:none;}
      .tabbar button{white-space:nowrap;}
    }
    @media (max-width:640px){
      .topbar .left span:nth-child(n+3){display:none;}
      .feat-grid, .cardgrid5{grid-template-columns:1fr 1fr;}
      .tab-top h3{font-size:23px;}
      .tab-top h3 small{font-size:14px;}
      .tab-top p{font-size:13.5px;}
      .price-box{padding:10px 16px; font-size:12.5px;}
      .see-price{font-size:12.5px;}
      .visual-tile img{max-width:80%; max-height:80%;}
    }
    @media (max-width:480px){
      .feat-grid{grid-template-columns:1fr 1fr; gap:10px;}
      .feat-card{padding:14px 12px;}
      .tab-card{padding:20px 16px; border-radius:18px;}
      .tabbar button{padding:9px 13px; font-size:12.5px; gap:5px;}
      .cloud-tag{font-size:10.5px; padding:5px 10px;}
      .visual-tile{aspect-ratio:16/11;}
      .visual-badge{font-size:10.5px; padding:6px 10px;}
    }

    
    /* ---------- ZATCA compliance ---------- */
    .zatca{padding:90px 0; background:linear-gradient(180deg,#fff 0%, var(--green-50) 100%);}
    .zatca-top{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; margin-bottom:56px;}
    .zatca-badge{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; color:var(--green-700); background:var(--green-100); padding:7px 14px; border-radius:999px; margin-bottom:20px;}
    .zatca-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--green-600);}
    .zatca-top h2{font-size:33px; font-weight:800; letter-spacing:-.7px; margin-bottom:16px; line-height:1.18;}
    .zatca-top h2 span{color:var(--red-600);}
    .zatca-top > div > p.zt-lead{font-size:15.5px; color:var(--ink-600); max-width:460px; margin-bottom:24px; line-height:1.65;}
    .zt-checklist{display:flex; flex-direction:column; gap:11px; margin-bottom:28px;}
    .zt-checklist li{display:flex; align-items:flex-start; gap:11px; font-size:14px; color:var(--ink-800); font-weight:600;}
    .zt-checklist .ck{width:20px; height:20px; border-radius:50%; background:var(--green-700); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;}

    .zatca-visual{position:relative; display:flex; align-items:center; justify-content:center;}
    .zt-invoice{width:280px; background:#fff; border-radius:20px; box-shadow:0 30px 60px rgba(12,19,16,0.14); border:1px solid var(--hair); padding:22px; position:relative; z-index:2;}
    .zt-invoice .zt-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
    .zt-invoice .zt-head .logo-mini{font-size:15px; font-weight:800;}
    .zt-invoice .zt-head .logo-mini span{color:var(--red-600);}
    .zt-invoice .zt-status{font-size:9.5px; font-weight:800; color:var(--green-700); background:var(--green-100); padding:3px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em;}
    .zt-invoice .zt-lines{display:flex; flex-direction:column; gap:8px; margin-bottom:16px;}
    .zt-invoice .zt-line{height:8px; border-radius:5px; background:var(--hair);}
    .zt-invoice .zt-line.w60{width:60%;}
    .zt-invoice .zt-line.w80{width:80%;}
    .zt-invoice .zt-line.w40{width:40%;}
    .zt-invoice .zt-total{display:flex; justify-content:space-between; align-items:center; padding-top:14px; border-top:1px dashed var(--hair); margin-bottom:16px;}
    .zt-invoice .zt-total b{font-size:17px;}
    .zt-invoice .zt-total span{font-size:11px; color:var(--ink-600);}
    .zt-qr{width:74px; height:74px; margin:0 auto; border-radius:10px; background:
        repeating-linear-gradient(0deg, var(--ink-900) 0 4px, transparent 4px 8px),
        repeating-linear-gradient(90deg, var(--ink-900) 0 4px, transparent 4px 8px);
        background-blend-mode:multiply; background-color:#fff; border:1px solid var(--hair); padding:6px;}
    .zt-invoice .zt-qr-cap{text-align:center; font-size:10px; color:var(--ink-600); margin-top:8px; font-weight:600;}
    .zt-float{position:absolute; background:#fff; border-radius:14px; box-shadow:0 16px 30px rgba(12,19,16,0.12); border:1px solid var(--hair); padding:10px 14px; display:flex; align-items:center; gap:9px; z-index:3;}
    .zt-float.f1{top:6%; left:-6%; }
    .zt-float.f2{bottom:8%; right:-8%;}
    .zt-float .fic{width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px;}
    .zt-float .ftxt b{display:block; font-size:12px;}
    .zt-float .ftxt span{font-size:9.5px; color:var(--ink-600);}
    .zt-glow{position:absolute; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(28,154,84,.14), transparent 70%); z-index:1;}

    .zt-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
    .zt-card{background:#fff; border:1px solid var(--hair); border-radius:16px; padding:24px 20px; transition:transform .15s, box-shadow .15s;}
    .zt-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
    .zt-card .zt-ic{width:42px; height:42px; border-radius:11px; color:var(--green-700); display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:14px;}
    .zt-card h5{font-size:14.5px; font-weight:700; margin-bottom:7px;}
    .zt-card p{font-size:12.5px; color:var(--ink-600); line-height:1.55;}

    @media (max-width:860px){
      .zatca-top{grid-template-columns:1fr;}
      .zatca-visual{margin-top:20px;}
      .zt-grid{grid-template-columns:repeat(2,1fr);}
      .zt-float{display:none;}
    }
    @media (max-width:480px){
      .zt-grid{grid-template-columns:1fr;}
      .zt-invoice{width:100%; max-width:280px;}
    }


    .bg-no-repeat {
      background-repeat: no-repeat;
  }
  .bg-cover {
      background-size: cover;
  }

.erp-2nd{font-size: 24px;    width: 90px;}




.page-wrap{max-width:1440px;margin:0 auto;padding:20px 32px 40px;}

  /* ---- Tab switch ---- */
  /* .tab-switch{
    display:flex;gap:6px;justify-content:center;
    background:#fff;border:1px solid var(--line);
    border-radius:14px;padding:6px;
    max-width:600px;margin:0 auto 28px;
    box-shadow:0 20px 40px -30px rgba(20,25,60,.25);
  } */
  /* .tab-btn{
    flex:1;border:none;background:transparent;
    padding:13px 16px;border-radius:10px;
    font-family:inherit;font-weight:600;font-size:14.5px;color:var(--ink-700);
    display:flex;align-items:center;justify-content:center;gap:8px;
    cursor:pointer;transition:all .2s ease;
  } */
  .tab-btn.active{background:var(--blue-700);color:#fff;box-shadow:0 10px 20px -10px rgba(59,63,209,.5);}

  .tab-panel{display:none;}
  .tab-panel.active{display:block;animation:fadeIn .3s ease;}
  @keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

  .erp-card{
    background:#fff;
    border-radius:26px;
    box-shadow:0 30px 70px -40px rgba(20,25,60,.25), 0 0 0 1px var(--line);
    padding:8px 56px 56px;
  }

  /* ---- Top area: copy | phone | photo ---- */
  .erp-top{
    display:grid;
    grid-template-columns:1fr auto 1.15fr;
    gap:48px;
    align-items:center;
    margin-bottom:56px;
  }

  .badge-pill{
    display:inline-flex;align-items:center;gap:7px;
    background:var(--blue-100);color:var(--blue-700);
    font-size:13px;font-weight:600;
    padding:8px 16px;border-radius:20px;
    margin-bottom:24px;
  }
  .badge-pill:before{content:"◆";font-size:9px;}

  .erp-copy h1{
    font-size:56px;font-weight:800;line-height:1;
    color:var(--blue-700);margin:0 0 4px;letter-spacing:-1px;
  }
  .erp-copy h2{
    font-size:27px;font-weight:600;color:var(--ink-700);
    margin:0 0 22px;
  }
  .erp-copy p.desc{
    font-size:15.5px;line-height:1.75;color:var(--ink-700);
    margin:0 0 30px;max-width:420px;
  }
  .erp-copy p.desc b{color:var(--ink-900);font-weight:700;}

  .price-row-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:18px;}
  .price-box{
    background:var(--navy-900);color:#fff;
    border-radius:12px;padding:14px 22px;
  }
  .price-box .label{font-size:12px;color:#c7cafb;margin-bottom:2px;}
  .price-box .amount{font-size:17px;font-weight:800;}
  .price-link{font-size:14px;font-weight:700;color:var(--blue-700);white-space:nowrap;}

  /* ---- Phone mockup (real screenshot) ---- */
  .phone-mock-img{
    width:200px;flex:none;
    border-radius:34px;
    box-shadow:0 30px 60px -20px rgba(20,25,60,.35);
  }
.page-wrap{max-width:1440px;margin:0 auto;padding:20px 32px 40px;}

  /* ---- Tab switch ---- */
  .tab-switch{
 display: flex;
    justify-content: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 14px;
    padding: 6px;
    width: max-content;
    margin: 0 auto 15px;
    box-shadow: var(--shadow);
  }
  .tab-btn{
       padding: 7px 20px;
    border-radius: 10px;
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 16px;
    color: var(--ink-600);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .15s, color .15s;
  }
  .tab-btn.active{color:#fff;}
  .tab-btn[data-tab="erp"].active{background: #595dfa !important;box-shadow:0 10px 20px -10px rgba(59,63,209,.5);}
  .tab-btn[data-tab="school"].active{background: #09aaa4 !important;box-shadow: 0 10px 20px -10px rgb(7 149 144);}
  .tab-btn[data-tab="accounting"].active{background: #914ef5 !important;box-shadow:0 10px 20px -10px rgba(124,63,214,.5);}

  .tab-panel{display:none;}
  .tab-panel.active{display:block;animation:fadeIn .3s ease;}
  @keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}



  /* ---- Top area: copy | phone | photo ---- */
  .erp-top{
    display:grid;
    grid-template-columns:1fr auto 1.15fr;
    gap:48px;
    align-items:center;
    margin-bottom:56px;
  }

  .badge-pill{
    display:inline-flex;align-items:center;gap:7px;
    background:var(--blue-100);color:var(--blue-700);
    font-size:13px;font-weight:600;
    padding:8px 16px;border-radius:20px;
    margin-bottom:24px;
  }
  .badge-pill:before{content:"◆";font-size:9px;}

  .erp-copy h1{
    font-size:56px;font-weight:800;line-height:1;
    color:var(--blue-700);margin:0 0 4px;letter-spacing:-1px;
  }
  .erp-copy h2{
    font-size:27px;font-weight:600;color:var(--ink-700);
    margin:0 0 22px;
  }
  .erp-copy p.desc{
    font-size:15px;line-height:1.75;color:var(--ink-700);
    margin:0 0 30px;max-width:100%;
  }
  .erp-copy p.desc b{color:var(--ink-900);font-weight:700;}

  /* Per-tab accent colors */
  #panel-school .badge-pill{background:#e7faf9;color:#079590;}
  #panel-school .erp-copy h1{color:#079590;}
  #panel-school .price-box{background:#079590;}
  #panel-school .price-link{color:#027874;}

  #panel-accounting .badge-pill{background:#f1e8fc;color:#7c3fd6;}
  #panel-accounting .erp-copy h1{color:#7c3fd6;}
  #panel-accounting .price-box{background:#7c3fd6;}
  #panel-accounting .price-link{color:#7c3fd6;}

  .price-row-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:18px;}
  .price-box{    background:#3b3fd1;color:#fff;
    border-radius:12px;padding:14px 22px;
  }
  .price-box .label{font-size:12px;color:#c7cafb;margin-bottom:2px;}
  .price-box .amount{font-size:17px;font-weight:800;}
  .price-link{font-size:14px;font-weight:700;color:var(--blue-700);white-space:nowrap;}

  /* ---- Phone mockup (real screenshot) ---- */
  .phone-mock-img{
    width:200px;flex:none;
    border-radius:34px;
    box-shadow:0 30px 60px -20px rgba(20,25,60,.35);
  }

  /* ---- Right photo panel ---- */
  .erp-visual{
    /* background:linear-gradient(160deg,#eef0fd,#f7f8ff); */
    border-radius:20px;
    padding:24px;
    position:relative;
  }
  .visual-photo-frame{
    position:relative;width:100%;aspect-ratio:1/0.85;
    border-radius:16px;overflow:hidden;
    /* background:radial-gradient(circle at 30% 15%, #2c3a6b, #101533 70%); */
    display:flex;align-items:flex-end;justify-content:center;
  }
  .visual-photo-frame .silhouette{
    width:66%;height:88%;
    /* background:linear-gradient(160deg,#3a4a86,#1b2140); */
    border-radius:50% 50% 40% 40% / 60% 60% 30% 30%;
    position:relative;
  }
  .chip{
    position:absolute;background:rgba(255,255,255,.94);
    border-radius:9px;padding:7px 11px;font-size:11px;font-weight:700;color:var(--navy-900);
    box-shadow:0 10px 20px -8px rgba(0,0,0,.3);
  }
  .chip.c1{top:12%;left:8%;}
  .chip.c2{top:36%;right:6%;}
  .chip.c3{bottom:16%;left:8%;color:#1a7a44;}
  .cloud-erp-tag{
    position:absolute;left:22px;bottom:22px;
    background:#fff;border-radius:20px;padding:9px 16px;
    font-size:12.5px;font-weight:700;color:var(--ink-900);
    display:flex;align-items:center;gap:8px;
    box-shadow:0 12px 26px -12px rgba(20,25,60,.35);
  }
  .cloud-erp-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--blue-600);}

  /* ---- Feature cards row ---- */
  .feature-row{
    display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-bottom:30px;
  }
  .feature-card{
    border:1px solid var(--line);border-radius:16px;padding:24px 20px;
  }
  .feature-icon{
    width:44px;height:44px;border-radius:11px;
    display:flex;align-items:center;justify-content:center;font-size:28px;
    margin-bottom:18px;
  }
  /* .feature-icon.purple{background:#f1edfc;color:#7c5fe0;}
  .feature-icon.beige{background:#fdf3e7;color:#c68a2f;}
  .feature-icon.green{background:#1fbf6b;color:#fff;}
  .feature-icon.lav{background:#f2eefb;color:#8b6fd6;} */
  /* .feature-icon.pink{background:#fbeef1;color:#d8608a;} */
  .feature-card h5{margin:0 0 10px;font-size:16px;font-weight:700;color:var(--ink-900);}
  .feature-card p{margin:0;font-size:14.5px;color:var(--ink-500);line-height:1.6;}

  .industry-note{font-size:16px;color:var(--ink-700);margin:0;}
  .industry-note b{color:var(--ink-900);}

  @media(max-width:1100px){
    .erp-top{grid-template-columns:1fr;}
    .phone-mock-img{margin:0 auto;}
    .feature-row{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:640px){
    .page-wrap{padding:20px 16px 50px;}
    .erp-card{padding:28px 20px 32px;}
    .erp-copy h1{font-size:44px;}
    .feature-row{grid-template-columns:1fr;}
    .price-row-wrap{flex-direction:column;align-items:flex-start;}
    .tab-switch{flex-direction:column;max-width:100%;gap: 18px!important;
}
  }

  .pt-20{padding-top: 50px; border-top: 1px solid var(--line);}
  .pb-20{padding-bottom: 50px; }


  /* ===== Products page ===== */
  .products-hero{padding:56px 0 44px;background:
    radial-gradient(900px 400px at 85% -10%, var(--mint) 0%, transparent 60%), var(--paper);}
  .products-hero-inner{max-width:640px;}
  .products-hero h1{font-size:44px;font-weight:700;line-height:1.1;margin:16px 0 14px;}
  .products-hero p.lead{font-size:16px;color:var(--ink-soft);line-height:1.6;max-width:540px;margin-bottom:26px;}
  .products-jump{display:flex;gap:10px;flex-wrap:wrap;}
  .jump-chip{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:30px;border:1.5px solid var(--line);background:#fff;font-size:13px;font-weight:700;transition:border-color .15s,background .15s;}
  .jump-chip:hover{border-color:var(--forest);background:var(--mint);}
  .jump-chip .dot-ic{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

  .products-stack{padding:16px 0 24px;}
  .product-block{padding:40px 0;border-top:1px solid var(--line);scroll-margin-top:112px;}
  .product-block:first-child{border-top:none;}

  .products-comparison{padding:24px 0 96px;}
  .cmp-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;}
  .cmp-table th, .cmp-table td{padding:16px 18px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--line);}
  .cmp-table th{background:var(--cloud);font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);}
  .cmp-table th:first-child, .cmp-table td:first-child{font-weight:700;color:var(--ink);}
  .cmp-table tr:last-child td{border-bottom:none;}
  .cmp-table .yes{color:var(--forest-dark);font-weight:800;}
  .cmp-table .no{color:var(--ink-soft);}
  .cmp-wrap{overflow-x:auto;border-radius:18px;}

  .builds-section{padding:0 0 96px;}
  .builds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  .build-card{background:var(--cloud);border-radius:14px;padding:20px 18px;display:flex;align-items:center;gap:12px;transition:transform .18s,box-shadow .18s,background .18s;}
  .build-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);background:#fff;}
  .build-card .bc-ic{width:36px;height:36px;border-radius:10px;background:var(--mint-2);color:var(--forest-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .build-card span{font-size:13.5px;font-weight:700;}

  @media (max-width:960px){
    .builds-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:640px){
    .products-hero h1{font-size:32px;}
    .panel-shell{padding:24px 18px;}
    .builds-grid{grid-template-columns:1fr;}
    .cmp-table th, .cmp-table td{padding:12px;font-size:12.5px;}
  }



  .ind-head { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); margin-bottom: 14px; }
.ind-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.ind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); gap: 12px; }
.ind { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; min-width: 0; transition: transform .2s, border-color .2s; }
.ind:hover { transform: translateY(-3px); border-color: var(--acc); }
.ind.big { grid-row: 1 / span 3; background: var(--acc); border-color: var(--acc); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 26px; min-height: 280px; }
.ind.big {
    border-radius: 24px;
    background: linear-gradient(160deg, var(--acc), 
color-mix(in srgb, var(--acc) 60%, #0c2740));
}
.ind-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--acc); background: color-mix(in srgb, var(--acc) 13%, var(--tile)); margin-bottom: 10px; }
.ind-ic svg { width: 22px; height: 22px; }
.ind.big .ind-ic { background: rgba(255, 255, 255, .2); color: #fff; width: 52px; height: 52px; margin-bottom: auto; }
.ind.big .ind-ic svg { width: 28px; height: 28px; }
.ind h5 { margin: 0 0 2px; font: 700 18px var(--font-display); letter-spacing: 0; }
.ind.big h5 { font-size: 26px; }
.ind p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.ind.big p { color: rgba(255, 255, 255, .9); font-size: 15.5px; }
.ind-stat { align-self: flex-start; margin-top: 10px; background: rgba(255, 255, 255, .22); font: 700 13px var(--font-display); padding: 4px 12px; border-radius: 99px; }
.ind-go { position: absolute; top: 14px; right: 16px; color: var(--acc); font-weight: 700; opacity: 0; transition: opacity .2s; }
.ind:hover .ind-go { opacity: 1; }
.view-all { display: inline-block; margin-top: 18px; font-weight: 700; color: var(--acc); border-bottom: 2px solid transparent; }


@media (max-width: 960px) {
  .sol-top { grid-template-columns: minmax(0, 1fr); }
  .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .ind.big { grid-row: auto; grid-column: 1 / -1; min-height: 190px; }
}
@media (max-width: 560px) {
  .sol-panel { padding: 18px 16px; border-radius: 16px; }
  .ind-grid { grid-template-columns: minmax(0, 1fr); }
  .sol-tab { padding: 10px 16px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .ind { transition: none; } }



/* solutions */
.sol-tabs { display: inline-flex; padding: 6px; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.sol-tab { background: transparent; border-color: transparent; padding: 11px 22px; transition: background .2s, color .2s, box-shadow .2s; }
.sol-tab[aria-selected="true"] { box-shadow: 0 8px 20px color-mix(in srgb, var(--acc) 40%, transparent); }
.sol-panel { border-radius: 32px; border-color: transparent; box-shadow: var(--shadow); padding: 32px; background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 6%, var(--tile)), var(--tile) 45%); }
.sol-visual { border-radius: 24px; }
.sol-copy h3 { letter-spacing: -.04em; }
.ind { border-radius: 20px; border-color: transparent; background: var(--tile); box-shadow: 0 1px 2px rgba(12, 39, 64, .06), 0 6px 18px rgba(12, 39, 64, .06); }
.ind:hover { box-shadow: var(--shadow-hi); border-color: transparent; }
.ind.big { border-radius: 24px; background: linear-gradient(160deg, var(--acc), color-mix(in srgb, var(--acc) 60%, #0c2740)); }
.ind-ic { border-radius: 12px; }

/* footer */
footer { margin: 0px 12px 12px; border-radius: 32px; overflow: hidden; }
.social a { border-radius: 999px; padding: 6px 16px; }

@media (max-width: 680px) {
  .hero { margin: 8px 8px 0; border-radius: 24px; padding-block: 48px 56px; }
  footer { margin: 64px 8px 8px; border-radius: 24px; }
  section.band { padding-block: 60px 0; }
  .sol-tabs { border-radius: 24px; display: flex; flex-wrap: wrap; }
  .sol-panel { border-radius: 24px; padding: 20px 16px; }
  .tile { border-radius: 22px; padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { .btn, .consult, nav > a, .dd > button { transition: none; } .btn:hover, .consult:hover { transform: none; } }

/* icons */
.ind-ic { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--acc) 26%, var(--tile)), color-mix(in srgb, var(--acc) 9%, var(--tile))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 18%, transparent); }
.ind-ic svg { width: 26px; height: 26px; }
.ind.big .ind-ic { width: 60px; height: 60px; border-radius: 18px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.ind.big .ind-ic svg { width: 32px; height: 32px; }
.sol-tab svg { width: 22px; height: 22px; }
.sol-tab:not([aria-selected="true"]) svg { color: var(--acc); }
.vbig { width: 120px; height: 120px; border-radius: 32px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.vbig svg { width: 64px; height: 64px; }
.ben .ico { width: 56px; height: 56px; }
.ben .ico svg { width: 28px; height: 28px; }


/* solutions tabs */
.sol-lead { margin: -8px 0 24px; color: var(--muted); max-width: 70ch; font-size: 17px; }
.sol-lead b { color: var(--fg); }
.sol-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.sol-tab { --acc: #1f6fd0; display: inline-flex; align-items: center; gap: 10px; font: 700 16px var(--font-display); padding: 12px 22px; border: 2px solid var(--line); background: var(--tile); color: var(--fg); cursor: pointer; border-radius: 999px; letter-spacing: 0; }
.sol-tab svg { width: 20px; height: 20px; flex: none; }
.sol-tab:hover { border-color: var(--acc); }
.sol-tab[aria-selected="true"] { background: var(--acc); border-color: var(--acc); color: #fff; }
.sol-tab.school, .sol-panel.school { --acc: #17804a; }
.sol-tab.acct, .sol-panel.acct { --acc: #7c3fd6; }
.sol-panel { --acc: #1f6fd0; border: 1px solid var(--line); background: var(--tile); padding: 28px; border-radius: 20px; min-width: 0; }
.sol-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-bottom: 32px; }
.pill { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, var(--tile)); padding: 4px 12px; border-radius: 99px; }
.sol-copy h3 { font-size: clamp(40px, 6vw, 68px); font-weight: 800; line-height: 1; margin: 14px 0 14px; color: var(--acc); }
.sol-copy h3 small { display: block; font-size: .42em; font-weight: 600; color: var(--fg); letter-spacing: 0; margin-top: 4px; }
.sol-copy .desc { margin: 0 0 20px; max-width: 54ch; font-size: 17px; color: var(--muted); }
.sol-copy .desc b { color: var(--fg); }
.price-row { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.price { border: 2px solid var(--acc); padding: 8px 18px; border-radius: 12px; line-height: 1.25; }
.price span { display: block; font-size: 12px; color: var(--muted); }
.price b { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--acc); font-variant-numeric: tabular-nums; }
.plink { font-weight: 700; color: var(--acc); border-bottom: 2px solid transparent; }
.plink:hover, .view-all:hover { border-bottom-color: currentColor; }
.sol-visual { position: relative; min-height: 250px; border-radius: 18px; background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #0c2740)); display: grid; place-items: center; overflow: hidden; }
.sol-visual::before { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, .1); right: -70px; top: -90px; }
.vbig { width: 110px; height: 110px; border-radius: 28px; background: rgba(255, 255, 255, .18); display: grid; place-items: center; color: #fff; }
.vbig svg { width: 58px; height: 58px; }
.vchip { position: absolute; background: #fff; color: #12202f; font: 700 13px var(--font-display); padding: 6px 14px; border-radius: 99px; box-shadow: 0 6px 16px rgba(8, 27, 45, .22); }
.vchip.c0 { left: 7%; top: 14%; } .vchip.c1 { right: 8%; top: 28%; } .vchip.c2 { left: 10%; bottom: 14%; } .vchip.c3 { right: 10%; bottom: 10%; }
.ind-head { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); margin-bottom: 14px; }
.ind-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.ind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); gap: 12px; }
.ind { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; min-width: 0; transition: transform .2s, border-color .2s; }
.ind:hover { transform: translateY(-3px); border-color: var(--acc); }
.ind.big { grid-row: 1 / span 3; background: var(--acc); border-color: var(--acc); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 26px; min-height: 280px; }
.ind-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--acc); background: color-mix(in srgb, var(--acc) 13%, var(--tile)); margin-bottom: 10px; }
.ind-ic svg { width: 22px; height: 22px; }
.ind.big .ind-ic { background: rgba(255, 255, 255, .2); color: #fff; width: 52px; height: 52px; margin-bottom: auto; }
.ind.big .ind-ic svg { width: 28px; height: 28px; }
.ind h5 { margin: 0 0 2px; font: 700 18px var(--font-display); letter-spacing: 0; }
.ind.big h5 { font-size: 26px; }
.ind p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.ind.big p { color: rgba(255, 255, 255, .9); font-size: 15.5px; }
.ind-stat { align-self: flex-start; margin-top: 10px; background: rgba(255, 255, 255, .22); font: 700 13px var(--font-display); padding: 4px 12px; border-radius: 99px; }
.ind-go { position: absolute; top: 14px; right: 16px; color: var(--acc); font-weight: 700; opacity: 0; transition: opacity .2s; }
.ind:hover .ind-go { opacity: 1; }
.view-all { display: inline-block; margin-top: 18px; font-weight: 700; color: var(--acc); border-bottom: 2px solid transparent; }
@media (max-width: 960px) {
  .sol-top { grid-template-columns: minmax(0, 1fr); }
  .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .ind.big { grid-row: auto; grid-column: 1 / -1; min-height: 190px; }
}
@media (max-width: 560px) {
  .sol-panel { padding: 18px 16px; border-radius: 16px; }
  .ind-grid { grid-template-columns: minmax(0, 1fr); }
  .sol-tab { padding: 10px 16px; font-size: 15px; }
}


:root { --shadow: 0 1px 2px rgba(12, 39, 64, .05), 0 14px 36px rgba(12, 39, 64, .08); --shadow-hi: 0 2px 4px rgba(12, 39, 64, .06), 0 22px 48px rgba(12, 39, 64, .14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 36px rgba(0, 0, 0, .35); --shadow-hi: 0 2px 4px rgba(0, 0, 0, .4), 0 22px 48px rgba(0, 0, 0, .5); } }
:root[data-theme="dark"] { --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 36px rgba(0, 0, 0, .35); --shadow-hi: 0 2px 4px rgba(0, 0, 0, .4), 0 22px 48px rgba(0, 0, 0, .5); }


/* icons */
.ind-ic { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--acc) 26%, var(--tile)), color-mix(in srgb, var(--acc) 9%, var(--tile))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 18%, transparent); }
.ind-ic svg { width: 26px; height: 26px; }
.ind.big .ind-ic { width: 60px; height: 60px; border-radius: 18px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.ind.big .ind-ic svg { width: 32px; height: 32px; }
.sol-tab svg { width: 22px; height: 22px; }
.sol-tab:not([aria-selected="true"]) svg { color: var(--acc); }
.vbig { width: 120px; height: 120px; border-radius: 32px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.vbig svg { width: 64px; height: 64px; }
.ben .ico { width: 56px; height: 56px; }
.ben .ico svg { width: 28px; height: 28px; }


/* Panels */
  .panel { display:grid; grid-template-columns:1fr 2fr; gap:16px; }
  .panel.active { display:grid; }

  .feature { background:var(--c); color:#fff; border-radius:24px; padding:30px; 
             display:flex; flex-direction:column; justify-content:flex-end; }
  .feature .icon { width:64px; height:64px; border-radius:18px; background:rgba(255,255,255,.2);
                   display:grid; place-items:center; font-size:32px; margin-bottom:auto; }
  .feature h3 { font-size:28px; font-weight:500; margin-bottom:10px; }
  .feature p { font-size:16px; line-height:1.55; opacity:.95; margin-bottom:18px; }
  .feature .count { align-self:flex-start; background:rgba(255,255,255,.2); padding:8px 16px;
                    border-radius:30px; font-size:15px; }

  .grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .item { background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; transition:.2s; }
  .item:hover { border-color:var(--c); transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.08); }
  .item .icon { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:26px;
                background:color-mix(in srgb, var(--c) 12%, #fff); margin-bottom:16px; }
  .item h4 { font-size:18px; font-weight:500; margin-bottom:4px; }
  .item p { font-size:14.5px; color:var(--muted); line-height:1.5; }

  .more { display:inline-block; margin-top:28px; color:var(--c2,#1e6fd0); font-weight:600; text-decoration:none; }

  @media (max-width:900px) {
    .panel.active { grid-template-columns:1fr; }
    /* .feature { min-height:280px; } */
  }
  @media (max-width:560px) {
    .grid { grid-template-columns:1fr; }
    .tab { flex:1 1 100%; }
  }
  @media (prefers-reduced-motion:reduce) { * { transition:none !important; } }

   /* prices dropdown */
  .nav-dd{position:relative;padding:14px 0}
  .dd-menu{display:none;position:absolute;top:calc(100% - 6px);left:-14px;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(30,34,53,.15);padding:8px;z-index:30}
  .nav-dd:hover .dd-menu,.nav-dd:focus-within .dd-menu{display:block}
  nav.main .dd-menu a{padding:11px 14px;border-radius:8px;font-size:16px;white-space:nowrap}
  nav.main .dd-menu a:hover,nav.main .dd-menu a.cur{background:#eef0ff;color:var(--brand)}
  @media(max-width:900px){}.logo{font-size:38px}.hdr-cta{padding:12px 16px;font-size:14px}}



  /* colours per item (sets --c and --soft on the whole row) */
  /* .has-mega .mega-item:has(.blue)   { --c:#4f46e5; --soft:#eef0ff; }
  .has-mega .mega-item:has(.teal)   { --c:#0d9488; --soft:#e6f6f4; }
  .has-mega .mega-item:has(.purple) { --c:#7c3aed; --soft:#f3ecff; } */


   .has-mega .mega-item { display:flex; align-items:center; gap:16px; padding:14px; border-radius:14px;
                         text-decoration:none; color:inherit; transition:background .15s; }
  .has-mega .mega-item:hover { background:var(--soft); }
  .has-mega .mega-item h4 { font-size:16px; font-weight:600; margin:0; color:#14142b; }
  .has-mega .mega-item p  { font-size:13px; font-weight:400; margin:2px 0 0; color:#6b7280; }
  .has-mega .mega-arrow   { margin-left:auto; color:var(--c); opacity:0; transition:.15s; }
  .has-mega .mega-item:hover .mega-arrow { opacity:1; }

  .has-mega .mega-ic { width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
                       flex:none; background:var(--soft); color:var(--c); font-size:0; }
  .has-mega .mega-ic svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8;
                           stroke-linecap:round; stroke-linejoin:round; }

  /* colours per item (sets --c and --soft on the whole row) */
  .has-mega .mega-item:has(.blue)   { --c:#4f46e5; --soft:#eef0ff; }
  .has-mega .mega-item:has(.teal)   { --c:#0d9488; --soft:#e6f6f4; }
  .has-mega .mega-item:has(.purple) { --c:#7c3aed; --soft:#f3ecff; }

  /* ---------- RESPONSIVE ---------- */
  /* never wider than the screen (overrides the inline width:500px) */
  .has-mega .mega { max-width:calc(100vw - 32px); }

  /* tablet + mobile: dropdown becomes an inline accordion inside your mobile menu */
  @media (max-width:900px) {
    .has-mega .mega { position:static !important; width:100% !important; max-width:100%;
                      transform:none !important; box-shadow:none; border:0; padding:0;
                      display:none; opacity:1; visibility:visible; background:transparent; }
    .has-mega.open .mega { display:block; }
    .has-mega.open .caret { transform:rotate(180deg); }
    .has-mega .caret { display:inline-block; transition:transform .2s; cursor:pointer; padding:8px; }
    .has-mega .mega-item { padding:12px 8px; gap:14px; }
    .has-mega .mega-arrow { opacity:1; }          /* no hover on touch screens */
  }
  @media (max-width:480px) {
    .has-mega .mega-ic { width:44px; height:44px; border-radius:12px; }
    .has-mega .mega-ic svg { width:22px; height:22px; }
    .has-mega .mega-item h4 { font-size:15px; }
    .has-mega .mega-item p  { font-size:12.5px; }
  }

  .mp-ic svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8;
               stroke-linecap:round; stroke-linejoin:round; }
  .mp-ic { font-size:0; display:inline-grid; place-items:center; flex:none; }   /* hides leftover emoji */

  .mp-sub a { display:flex; align-items:center; gap:14px; }
  .mp-sub .mp-ic { width:42px; height:42px; border-radius:12px; background:var(--soft); color:var(--c); }

  .mp-sub .mp-c-blue   { --c:#4f46e5; --soft:#eef0ff; }
  .mp-sub .mp-c-teal   { --c:#0d9488; --soft:#e6f6f4; }
  .mp-sub .mp-c-purple { --c:#7c3aed; --soft:#f3ecff; }

  .mp-ic-line { width:28px; height:28px; color:#14142b; }   /* parent "Prices" row icon, no box */
  .mp-caret { transition:transform .2s; }
  .mp-item.open .mp-caret { transform:rotate(180deg); }



  .pill { display:inline-block; background:#e6f4ee; color:#0b7a5a; font-size:14px; font-weight:500;
          padding:8px 16px; border-radius:30px; margin-bottom:22px; }

  /* Tabs */
  .tabs { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
  .tab { display:flex; align-items:center; gap:10px; padding:12px 22px; border-radius:12px;
         border:1px solid var(--line); background:#fff; color:var(--navy);
         font:600 15px 'Poppins',Arial,sans-serif; cursor:pointer; transition:.2s; }
  .tab .ti { width:22px; height:22px; display:grid; place-items:center; }
  .tab:hover { border-color:var(--c); }
  .tab[aria-selected="true"] { background:var(--c); border-color:var(--c); color:#fff;
                               box-shadow:0 8px 20px color-mix(in srgb, var(--c) 35%, transparent); }
  .tab:focus-visible { outline:3px solid #29b6f6; outline-offset:2px; }

  /* Panels */
  .panel { 
   
    grid-template-columns:1fr 2.7fr; gap:16px; }
  .panel.active { display:grid; }

  .feature { background:var(--c); color:#fff; border-radius:24px; padding:30px; 
             display:flex; flex-direction:column; justify-content:flex-end; }
  .feature .icon { width:64px; height:64px; border-radius:18px; background:rgba(255,255,255,.2);
                   display:grid; place-items:center; font-size:32px; margin-bottom:auto; }
  .feature h3 { font-size:28px; font-weight:500; margin-bottom:10px; }
  .feature p { font-size:16px; line-height:1.55; opacity:.95; margin-bottom:18px; }
  .feature .count { align-self:flex-start; background:rgba(255,255,255,.2); padding:8px 16px;
                    border-radius:30px; font-size:15px; }

  .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .item { background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; transition:.2s; }
  .item:hover { border-color:var(--c); transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.08); }
  .item .icon { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:26px;
                background:color-mix(in srgb, var(--c) 12%, #fff); margin-bottom:16px; }
  .item h4 { font-size:18px; font-weight:500; margin-bottom:4px; }
  .item p { font-size:14.5px; color:var(--muted); line-height:1.5; }

  .more { display:inline-block; margin-top:28px; color:var(--c2,#1e6fd0); font-weight:600; text-decoration:none; }

  @media (max-width:900px) {
    .panel.active { grid-template-columns:1fr; }
    .feature { min-height:280px;         margin-bottom: 15px;}
    .panel { 
    /* display:none;  */
    grid-template-columns:1fr 2.7fr; gap:16px; display: block; }
  }
  @media (max-width:700px) { .grid { grid-template-columns:1fr 1fr; } }
  @media (max-width:560px) {
    .grid { grid-template-columns:1fr; }
    .tab { flex:1 1 100%; }
  }
  @media (prefers-reduced-motion:reduce) { * { transition:none !important; } }
  svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .tab .ti svg { width:22px; height:22px; }
  .feature .icon svg { width:30px; height:30px; }
  .item .icon { background:none; color:var(--c); width:auto; height:auto; justify-content:start; margin-bottom:18px; }
  .item .icon svg { width:44px; height:44px; stroke-width:1.6; }


  .tab-btn {
  position: relative;
  background: var(--c);
  color: #fff;
}

/* down arrow under the selected tab */
.tab-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 18px;
  height: 18px;
  background: var(--c);
  border-radius: 0 0 4px 0;
  transform: translateX(-50%) rotate(45deg) scale(0);
  opacity: 0;
  transition: transform .2s, opacity .2s;
  pointer-events: none;
}
.tab-btn.active::after {
  transform: translateX(-50%) rotate(45deg) scale(1);
  opacity: 1;
}

/* make sure the arrow isn't clipped */
.tab-switch { overflow: visible; margin-bottom: 34px; }

 /* ================= ANIMATION (paste into your CSS) ================= */

  /* 1) scroll reveal: cards rise in one after another, once */
  .feature-card {
    opacity:0; transform:translateY(32px) scale(.97);
    transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1),
               box-shadow .25s ease, border-color .25s ease;
    transition-delay:calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s;
  }
  .feature-row.in-view .feature-card { opacity:1; transform:none; }

  /* 2) hover: card lifts, icon pops */
  .feature-row.in-view .feature-card:hover {
    transform:translateY(-8px);
    box-shadow:0 18px 36px -14px rgba(20,20,43,.25);
    border-color:#c9cdf5;
    transition-delay:0s;
  }
  .feature-icon { transition:transform .3s cubic-bezier(.3,1.6,.5,1); }
  .feature-card:hover .feature-icon { transform:scale(1.12) rotate(-6deg); }

  /* 3) respect users who turn animation off */
  @media (prefers-reduced-motion:reduce) {
    .feature-card, .feature-icon { transition:none !important; opacity:1; transform:none; }
  }


  

   .plans { max-width:1240px; margin:0 auto; padding:70px 24px 40px; }
  .plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; align-items:stretch; }

  .plan { position:relative; background:#fff; border:1px solid var(--line); border-radius:28px; padding:25px;
          display:flex; flex-direction:column; }
  .plan.popular { border:2px solid var(--brand); box-shadow:0 24px 50px -22px rgba(80,70,228,.45); }
  .badge { position:absolute; top:-16px; left:50%; transform:translateX(-50%); background:var(--brand); color:#fff;
           font-size:14px; font-weight:600; padding:6px 18px; border-radius:30px; white-space:nowrap; }

  .plan h3 { margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800; }
  .plan .desc { color:var(--muted); font-size:17px; line-height:1.4; margin-top:8px; min-height:50px; }
  .price { margin-top:34px; display:flex; align-items:baseline; gap:8px; }
  .price b { font-size: 22px;
    font-weight: 800;
    letter-spacing: -.03em; }
  .price span { color:var(--muted); font-size:19px; }
  .meta { color:var(--muted); font-size:16px; line-height:1.6; margin-top:12px; }

  .feat { list-style:none; margin:28px 0 30px; display:flex; flex-direction:column; gap:14px; flex:1; }
  .feat li { position:relative; padding-left:32px; font-size:16px; line-height:1.35; }
  .feat li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--ok); font-weight:700; }
  .feat li.strong > span { font-weight:600; }
  .feat small { display:block; color:var(--muted); font-size:14.5px; margin-top:4px; line-height:1.5; }

  .btn { display:block; text-align:center; text-decoration:none; padding:17px; border-radius:14px; font-weight:700; font-size:18px;
         color:var(--brand); border:2px solid var(--brand); background:#fff; transition:.2s; }
  .btn:hover { background:#eeedfd; }
  .popular .btn { background:var(--brand); color:#fff; }
  .popular .btn:hover { background:#4036d4; }
  .btn:focus-visible { outline:3px solid #a5a0f5; outline-offset:3px; }

  .note { text-align:center; color:var(--muted); margin-top:34px; font-size:16px; }

  @media (max-width:1000px) { .plan-grid { grid-template-columns:1fr; max-width:520px; margin:0 auto; } .plan .desc { min-height:0; } }

  .country { display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 auto 44px; }
  .clabel { font-size:14px; font-weight:600; color:var(--muted); }
  .cdrop { position:relative; width:290px; max-width:100%; }
  .cmain { width:100%; display:flex; align-items:center; gap:12px; background:#fff; border:1.5px solid var(--line); border-radius:14px;
           padding:12px 16px; font:600 17px 'Inter',Arial,sans-serif; color:var(--ink); cursor:pointer; transition:.2s; text-align:left; }
  .cmain:hover, .cdrop.open .cmain { border-color:var(--brand); }
  .cmain:focus-visible, .clist li:focus-visible { outline:3px solid #a5a0f5; outline-offset:2px; }
  .cname { flex:1; }
  .cdrop small { color:var(--muted); font-size:13px; font-weight:500; }
  .flag { width:30px; height:20px; border-radius:4px; overflow:hidden; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.12); display:block; }
  .flag svg { width:100%; height:100%; display:block; }
  .ccaret { width:18px; height:18px; fill:none; stroke:var(--muted); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
  .cdrop.open .ccaret { transform:rotate(180deg); }
  .clist { position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:20; list-style:none; background:#fff; border:1px solid var(--line);
           border-radius:16px; padding:6px; box-shadow:0 22px 44px -14px rgba(20,20,43,.28); opacity:0; visibility:hidden; transform:translateY(-6px); transition:.15s; }
  .cdrop.open .clist { opacity:1; visibility:visible; transform:none; }
  .clist li { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; cursor:pointer; font-weight:600; font-size:16px; }
  .clist li:hover, .clist li.focus { background:#f1f0fd; }
  .clist li[aria-selected="true"] { background:#eeedfd; color:var(--brand); }
  .clist li[aria-selected="true"] small { color:var(--brand); }



  .ft-demo-page { margin: 0; min-height: 60vh; background: #ffffff; font-family: "Poppins", system-ui, sans-serif; }

  .ft {
    font-family: "Poppins", system-ui, sans-serif;
    background: var(--ft-bg);
    color: var(--ft-text);
    border-radius: 32px 32px 0 0;
    margin: 0 12px;
    overflow: hidden;
    border: 1px solid var(--ft-line);
    border-bottom: 0;
  }
  .ft *, .ft *::before, .ft *::after { box-sizing: border-box; }
  .ft a { color: inherit; text-decoration: none; }
  .ft ul { list-style: none; margin: 0; padding: 0; }
  .ft-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

  /* ---------- CTA band ---------- */
  .ft-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 40px 0;
    border-bottom: 1px solid var(--ft-line);
  }
  .ft-cta h2 { margin: 0 0 6px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 600; line-height: 1.25; }
  .ft-cta p  { margin: 0; color: var(--ft-muted); font-size: .95rem; max-width: 52ch; }
  .ft-btn {
    background: var(--red-600);
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14.5px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 18px rgba(232, 72, 44, 0.28);
    transition: transform .15s ease, box-shadow .15s ease;
    font-family: "Public Sans", sans-serif;
  }
  .ft-btn:hover { background: var(--ft-red-hover); transform: translateY(-1px); }

  /* ---------- Main grid ---------- */
  .ft-main {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 40px;
    padding: 56px 0 48px;
  }
  .ft-logo { display: inline-block; margin-bottom: 18px; }
  .ft-logo img { height: 48px; width: auto; display: block; }
  .ft-about { margin: 0 0 22px; color: var(--ft-muted); font-size: .92rem; line-height: 1.7; max-width: 34ch; }

  .ft-contact li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; font-size: .92rem; }
  .ft-contact svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--ft-red); }
  .ft-contact a:hover { color: var(--ft-leaf); }

  .ft-col h3 { margin: 0 0 18px; font-size: 1rem; font-weight: 600; color: var(--ft-text); }
  .ft-col li + li { margin-top: 11px; }
  .ft-col a {
    color: var(--ft-muted); font-size: .92rem;
    background: linear-gradient(var(--ft-leaf), var(--ft-leaf)) 0 100% / 0 1px no-repeat;
    transition: color .2s, background-size .25s;
    padding-bottom: 2px;
  }
  .ft-col a:hover { color: var(--ft-leaf); background-size: 100% 1px; }
  .ft-col .ft-all { color: var(--ft-leaf); font-weight: 500; }

  /* ---------- Bottom bar ---------- */
  .ft-bottom { background: var(--ft-bg-2); }
  .ft-bottom .ft-wrap {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    padding-top: 22px; padding-bottom: 22px;
  }
  .ft-copy { margin: 0; font-size: .85rem; color: var(--ft-muted); }
  .ft-legal { display: flex; gap: 22px; font-size: .85rem; }
  .ft-legal a { color: var(--ft-muted); transition: color .2s; }
  .ft-legal a:hover { color: var(--ft-leaf); }

  .ft-social { display: flex; gap: 10px; }
  .ft-social a {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ft-card);
    border: 1px solid var(--ft-line); color: var(--ft-text);
    transition: background .2s, color .2s, border-color .2s;
  }
  .ft-social a:hover { background: var(--ft-leaf); border-color: var(--ft-leaf); color: #fff; }
  .ft-social svg { width: 17px; height: 17px; }

  .ft a:focus-visible { outline: 2px solid var(--ft-leaf); outline-offset: 3px; border-radius: 4px; }

  /* ---------- Responsive ---------- */
  @media (max-width: 1024px) {
    .ft-main { grid-template-columns: repeat(4, 1fr); }
    .ft-brand { grid-column: 1 / -1; }
  }
  @media (max-width: 720px) {
    .ft { margin: 0; border-radius: 24px 24px 0 0; }
    .ft-cta { flex-direction: column; align-items: flex-start; padding: 32px 0; }
    .ft-main { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding: 40px 0 32px; }
    .ft-bottom .ft-wrap { flex-direction: column; align-items: flex-start; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ft *, .ft *::before, .ft *::after { transition: none !important; }
  }

/* Center the enquiry popup */
#olivoERPEnquiryModal .modal-dialog {
    width: calc(100% - 30px) !important;
    max-width: 1000px !important;
    height: calc(100vh - 60px) !important;
    margin: 30px auto !important;
}

/* Set modal content height */
#olivoERPEnquiryModal .modal-content {
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 12px;
}

/* Remove extra spacing and control scrolling */
#olivoERPEnquiryModal .modal-body {
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Fit the enquiry form inside the popup */
#olivoERPEnquiryModal iframe {
    display: block;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    border: none;
}

/* Keep the close button visible */
#olivoERPEnquiryModal .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

@media (max-width: 767px) {
    #olivoERPEnquiryModal .modal-dialog {
        width: calc(100% - 20px) !important;
        height: calc(100vh - 20px) !important;
        margin: 10px auto !important;
    }
}


.mt-5{margin-top: 10px}


/* Back to Top Arrow */
#backToTop {
       position: fixed !important;
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #b12028;
    color: #ffffff !important;
    font-size: 20px;
    text-decoration: none !important;
    border-radius: 50%;
    border: none;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

#backToTop.show {
    opacity: 1;
    visibility: visible;
}

#backToTop:hover {
    background: #0056b3;
    color: #ffffff !important;
}


button {
  /*  font-family: inherit;
    cursor: pointer;*/
    border: none;
    background: none;
}