:root{
    --navy:#0c1524;
    --navy-2:#101c30;
    --ink:#131717;
    --paper:#fff;
    --paper-2:#f9f9f9;
    --muted:#677083;
    --line:#caced7;
    --g1:#3b0764;
    --g2:#9500f5;
    --g3:#c084fc;
    --g4:#e4cbff;
    --grad: linear-gradient(95deg,#3b0764 0%, #9500f5 45%, #c084fc 100%);
    --grad-soft: linear-gradient(180deg, rgba(149,0,245,.14) 0%, rgba(124,31,209,.06) 100%);
    --radius:24px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:#fff;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:'Inter Tight','Inter',sans-serif;margin:0;letter-spacing:-.02em;line-height:1.05}
  p{margin:0;font-family:'Inter',sans-serif;font-weight:400;line-height:1.5}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
  .grad-text{
    background:var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:#7209b7;
    background:linear-gradient(90deg, rgba(192,132,252,.25), rgba(149,0,245,.1));
    border:1px solid rgba(149,0,245,.35);
    padding:6px 14px;border-radius:999px;
  }
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:15px 30px;border-radius:999px;font-weight:600;font-size:16px;
    cursor:pointer;border:1px solid transparent;transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{transform:translateY(-1px)}
  .btn-primary{background:linear-gradient(95deg,#3b0764 0%,#5b0aa8 50%,#8512e0 100%);color:#fff;box-shadow:0 10px 30px -10px rgba(149,0,245,.6)}
  .btn-outline{background:rgba(255,255,255,.6);border-color:var(--line);color:var(--ink)}
  .btn-outline:hover{background:#fff}
  .btn-dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#f3e8ff}
  .btn-dark:hover{background:rgba(255,255,255,.14)}








  /* REFERENCE TYPOGRAPHY — Inter body + Inter Tight headings */
  p{font-family:'Inter',sans-serif;font-weight:400;line-height:1.5}
  body{font-family:'Inter',sans-serif;background:#fff}




  /* NAV */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(247,250,247,.8);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1180px;margin:0 auto}
  .logo img{height:30px}
  .nav-links{display:flex;gap:34px;align-items:center}
  .nav-links a{font-size:15px;font-weight:600;color:#2a1f38;opacity:.85}
  .nav-links a:hover{opacity:1}
  .nav-cta{display:flex;gap:12px;align-items:center}
  .nav-cta .btn{padding:11px 22px;font-size:14px}
  @media (max-width:900px){ .nav-links{display:none} }








  /* HERO */
  .hero{position:relative;overflow:hidden;padding:96px 24px 64px;background:#fff}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:48px;align-items:center;max-width:1180px;margin:0 auto}
  .hero h1{font-size:58px;line-height:1.05;font-weight:800}
  .hero p.lead{margin-top:20px;font-size:22px;line-height:1.4;color:#2c3a2f;max-width:520px}
  .hero-actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}








  /* HERO VR ANIMATION — CSS/SVG only, no image dependency */
  .hero-orb{
    position:relative;height:520px;border-radius:34px;overflow:hidden;isolation:isolate;
    background:
      radial-gradient(65% 55% at 30% 18%, rgba(192,132,252,.58), transparent 62%),
      radial-gradient(48% 48% at 82% 80%, rgba(149,0,245,.52), transparent 62%),
      linear-gradient(160deg,#3b0764 0%,#1f0433 43%,#0c1524 100%);
    box-shadow:0 24px 60px -30px rgba(12,21,36,.55);
  }
  .hero-orb::before{
    content:"";position:absolute;inset:-25%;z-index:-1;
    background:radial-gradient(circle at 35% 30%,rgba(192,132,252,.28),transparent 23%),radial-gradient(circle at 72% 72%,rgba(149,0,245,.22),transparent 25%);
    filter:blur(20px);animation:heroGlow 7s ease-in-out infinite alternate;
  }
  .hero-orb::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.09) 49%,transparent 61%);
    transform:translateX(-120%);animation:heroSweep 6s ease-in-out infinite;
  }
  .vr-stage{position:absolute;inset:0;display:grid;place-items:center;perspective:900px}
  .vr-grid{position:absolute;width:78%;height:58%;border:1px solid rgba(192,132,252,.2);border-radius:50%;transform:rotateX(68deg) rotateZ(-8deg);box-shadow:0 0 45px rgba(149,0,245,.12),inset 0 0 45px rgba(149,0,245,.08);animation:gridFloat 5s ease-in-out infinite}
  .vr-grid::before,.vr-grid::after{content:"";position:absolute;inset:12%;border:1px solid rgba(192,132,252,.16);border-radius:50%}
  .vr-grid::after{inset:26%;border-color:rgba(192,132,252,.13)}
  .vr-ring{position:absolute;width:235px;height:235px;border:1px solid rgba(192,132,252,.34);border-radius:50%;box-shadow:0 0 35px rgba(149,0,245,.16);animation:ringSpin 12s linear infinite}
  .vr-ring::before{content:"";position:absolute;inset:17px;border:1px dashed rgba(255,255,255,.18);border-radius:50%}
  .vr-ring.r2{width:300px;height:300px;border-color:rgba(255,255,255,.11);animation-duration:18s;animation-direction:reverse}
  .vr-ring.r3{width:165px;height:165px;border-color:rgba(192,132,252,.22);animation-duration:9s}
  .vr-headset{position:relative;width:220px;height:125px;transform:translateY(-8px) rotateX(4deg);filter:drop-shadow(0 18px 22px rgba(0,0,0,.32));animation:headsetFloat 4.5s ease-in-out infinite}
  .vr-headset .band{position:absolute;left:37px;top:-30px;width:146px;height:72px;border:10px solid #ecdcff;border-bottom:0;border-radius:90px 90px 0 0;opacity:.9}
  .vr-headset .body{position:absolute;left:16px;top:25px;width:188px;height:78px;border-radius:34px 34px 27px 27px;background:linear-gradient(145deg,#f4fff7 0%,#ccefd5 38%,#caa0f0 100%);border:3px solid rgba(255,255,255,.85);box-shadow:inset 0 -8px 18px rgba(15,77,44,.16)}
  .vr-headset .lens{position:absolute;top:42px;width:67px;height:42px;border-radius:15px;background:linear-gradient(145deg,#12243a,#07111e);border:2px solid rgba(192,132,252,.65);box-shadow:inset 0 0 16px rgba(149,0,245,.24),0 0 18px rgba(149,0,245,.14)}
  .vr-headset .lens.left{left:42px}.vr-headset .lens.right{right:42px}
  .vr-headset .bridge{position:absolute;left:101px;top:54px;width:18px;height:18px;border-radius:8px;background:#b366e6;z-index:2}
  .vr-headset .side{position:absolute;top:48px;width:18px;height:35px;border-radius:8px;background:#c288f0}.vr-headset .side.left{left:4px}.vr-headset .side.right{right:4px}
  .vr-headset .light{position:absolute;width:7px;height:7px;border-radius:50%;background:#c084fc;box-shadow:0 0 14px #c084fc;animation:blink 1.8s ease-in-out infinite}
  .vr-headset .light.one{left:91px;top:92px}.vr-headset .light.two{right:91px;top:92px;animation-delay:.6s}
  .vr-card{position:absolute;min-width:132px;padding:10px 13px;border:1px solid rgba(192,132,252,.34);border-radius:12px;background:rgba(5,19,25,.62);backdrop-filter:blur(9px);color:#f3e8ff;box-shadow:0 12px 30px rgba(0,0,0,.16);font-size:11px;font-weight:700;letter-spacing:.02em;animation:cardFloat 5s ease-in-out infinite}
  .vr-card span{display:block;margin-top:4px;color:#d9b8ff;font-size:9px;font-weight:500}
  .vr-card.c1{top:18%;left:8%;animation-delay:-1s}.vr-card.c2{top:31%;right:7%;animation-delay:-3s}.vr-card.c3{bottom:20%;left:12%;animation-delay:-2s}.vr-card.c4{bottom:12%;right:10%;animation-delay:-4s}
  .vr-particle{position:absolute;width:5px;height:5px;border-radius:50%;background:#c084fc;box-shadow:0 0 12px rgba(192,132,252,.8);animation:particleFloat 5s ease-in-out infinite}
  .vr-particle.p1{left:24%;top:20%}.vr-particle.p2{right:24%;top:18%;animation-delay:1s}.vr-particle.p3{left:27%;bottom:25%;animation-delay:2s}.vr-particle.p4{right:28%;bottom:27%;animation-delay:3s}
  .hero-orb .tag{position:absolute;bottom:24px;left:28px;color:#f3e8ff;font-family:'Inter',sans-serif;font-weight:700;font-size:20px;z-index:5}
  .vr-caption{position:absolute;right:28px;bottom:25px;color:rgba(234,255,240,.68);font-size:10px;letter-spacing:.12em;text-transform:uppercase;z-index:5}
  @keyframes heroGlow{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.08)}}
  @keyframes heroSweep{0%,25%{transform:translateX(-120%)}65%,100%{transform:translateX(120%)}}
  @keyframes gridFloat{0%,100%{transform:rotateX(68deg) rotateZ(-8deg) translateY(0)}50%{transform:rotateX(68deg) rotateZ(-8deg) translateY(-10px)}}
  @keyframes ringSpin{to{transform:rotate(360deg)}}
  @keyframes headsetFloat{0%,100%{transform:translateY(-8px) rotateX(4deg)}50%{transform:translateY(-22px) rotateX(4deg) rotateZ(-1deg)}}
  @keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  @keyframes particleFloat{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-18px);opacity:1}}
  @keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}
  @media (prefers-reduced-motion:reduce){.hero-orb *,.hero-orb::before,.hero-orb::after{animation:none!important}}
  @media (max-width:900px){
    .hero{padding:72px 20px 52px}
    .hero-grid{grid-template-columns:1fr;gap:34px}
    .hero h1{font-size:44px}
    .hero p.lead{font-size:18px;max-width:680px}
    .hero-orb{height:400px;order:-1}
  }
  @media (max-width:560px){
    .hero{padding:54px 16px 44px}
    .hero h1{font-size:36px}
    .hero p.lead{font-size:17px}
    .hero-actions{gap:10px}
    .hero-actions .btn{width:100%;padding:13px 20px}
    .hero-orb{height:330px;border-radius:26px}
    .vr-headset{transform:scale(.78) translateY(-8px)}
    .vr-ring{transform:scale(.72)}
    .vr-ring.r2{transform:scale(.68)}
    .vr-ring.r3{transform:scale(.76)}
    .vr-card{min-width:105px;padding:8px 9px;font-size:9px}
    .vr-card span{font-size:8px}
    .vr-card.c1{left:5%;top:13%}.vr-card.c2{right:4%;top:26%}.vr-card.c3{left:6%;bottom:20%}.vr-card.c4{right:5%;bottom:12%}
    .hero-orb .tag{left:18px;bottom:17px;font-size:16px}
    .vr-caption{right:18px;bottom:18px;font-size:8px}
  }








  /* LOGO STRIP */
  .logostrip{padding:36px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
  .logostrip p{text-align:center;font-size:15px;color:var(--muted);margin-bottom:22px;font-weight:600}
  .logo-row{display:flex;flex-wrap:wrap;justify-content:center;gap:40px;align-items:center;opacity:.75;font-weight:700;letter-spacing:.02em;color:#33433a;font-size:18px}








  /* SECTION generic */
  section{padding:100px 24px}
  .section-head{max-width:760px;margin:0 auto 56px;text-align:left}
  .section-head h2{font-size:44px;font-weight:800;line-height:1.1}
  .section-head p{margin-top:16px;font-size:19px;color:var(--muted);line-height:1.5}
  .center{text-align:center;margin-left:auto;margin-right:auto}








  /* CASE STUDY */
  .case-wrap{background:#fff}
  .tabs{display:flex;gap:8px;background:#eef6ee;padding:6px;border-radius:999px;width:max-content;margin:0 auto 40px;border:1px solid var(--line)}
  .tabs span{padding:12px 22px;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
  .tabs span.active{background:linear-gradient(95deg,#3b0764 0%,#5b0aa8 50%,#8512e0 100%);color:#fff}
  .case-card{
    display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius);overflow:hidden;
    border:1px solid var(--line);
  }
  .case-media{background:linear-gradient(160deg,#2e0854,#0c1524);min-height:420px;position:relative}
  .case-body{padding:56px;background:var(--paper-2)}
  .case-body h3{font-size:28px;line-height:1.3;font-weight:700;margin-bottom:24px}
  .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
  .stat-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;text-align:center}
  .stat-card b{display:block;font-size:32px;font-weight:800}
  .stat-card b.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .stat-card span{font-size:14px;color:var(--muted)}
  @media (max-width:860px){ .case-card{grid-template-columns:1fr} .case-body{padding:32px} .stat-row{grid-template-columns:1fr} }








  /* CHALLENGES */
  .challenge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
  .challenge-card h4{font-size:22px;font-weight:700;margin-bottom:12px}
  .challenge-card p{color:var(--muted);font-size:17px;line-height:1.5}
  @media (max-width:860px){.challenge-grid{grid-template-columns:1fr}}








  /* INDUSTRY CARDS (photo + icon badge) */
  .industry-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
  .industry-card{border:1px solid var(--line);border-radius:20px;background:#fff;padding-bottom:52px;position:relative;overflow:visible;text-align:center}
  .industry-card img{width:100%;height:150px;object-fit:cover;border-radius:20px 20px 0 0}
  .industry-icon{
    width:64px;height:64px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;overflow:hidden;
    position:absolute;left:50%;top:118px;transform:translateX(-50%);
  }
  .industry-icon img{width:100%;height:100%;object-fit:cover;border-radius:50%}
  .industry-card h4{margin-top:44px;font-size:16px;font-weight:700}
  @media (max-width:900px){.industry-grid{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:560px){.industry-grid{grid-template-columns:repeat(2,1fr)}}








  /* PLATFORM CARDS */
  .platform-title{text-align:center;margin-bottom:56px}
  .platform-title h2{font-size:46px;font-weight:800}
  .platform-title .sub{margin-top:10px;font-size:20px;color:var(--muted)}
  .platform-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}








  /* SCENARIOS - clean white reference layout */
  #scenarios{background:#fff !important;padding:72px 24px 80px}
  #scenarios .wrap{max-width:1180px}
  #scenarios .platform-title{margin-bottom:34px}
  #scenarios .platform-title:before{
    content:"SCENARIOS";display:flex;align-items:center;justify-content:center;gap:18px;
    margin-bottom:10px;color:#3b0764;font-size:14px;font-weight:800;letter-spacing:.16em;
  }
  #scenarios .platform-title:after{
    content:"";display:block;width:32px;height:2px;background:#7c1fd6;margin:-30px auto 24px;
    transform:translateX(95px);
  }
  #scenarios .platform-title h2{font-size:44px;line-height:1.12;color:#0e1420}
  #scenarios .platform-title .sub{max-width:760px;margin:10px auto 0;font-size:16px;line-height:1.45;color:#5b6b63}
  #scenarios .platform-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  #scenarios .platform-card{border:1px solid #dfe8e1;border-radius:14px;background:#fff;box-shadow:none}
  #scenarios .platform-card img{height:178px;object-fit:cover}
  #scenarios .platform-card .platform-card-body{padding:12px 14px 16px;gap:8px}
  #scenarios .platform-card h5{font-size:16px;line-height:1.25;color:#3b0764;font-weight:800}
  #scenarios .platform-card p{font-size:12px;line-height:1.45;color:#5b6b63}
  #scenarios .platform-card .btn{padding:8px 14px;font-size:11px;margin-top:3px}
  @media (max-width:900px){#scenarios .platform-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){#scenarios .platform-grid{grid-template-columns:1fr} #scenarios .platform-title h2{font-size:34px}}
  .platform-card{
    border:1px solid var(--line);border-radius:var(--radius);padding:40px;background:#fff;
    display:flex;flex-direction:column;gap:14px;
  }
  .platform-card .kicker{font-size:32px;font-weight:800}
  .platform-card .kicker span{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .platform-card h5{font-size:19px;font-weight:600;color:#2a1f38}
  .platform-card p{color:var(--muted);font-size:16px;line-height:1.5}
  .platform-card .btn{align-self:flex-start;margin-top:8px}
  .platform-card{padding:0;overflow:hidden}
  .platform-card img{width:100%;height:200px;object-fit:cover}
  .platform-card .platform-card-body{padding:32px 32px 36px;display:flex;flex-direction:column;gap:14px}
  @media (max-width:860px){.platform-grid{grid-template-columns:1fr}}
















  /* WHY VR - visual feature row */
  #why{background:#fff !important;padding:82px 24px 72px}
  #why .section-head{max-width:900px;margin:0 auto 42px;text-align:center}
  #why .section-head .eyebrow{background:none;border:0;padding:0;color:#3b0764;letter-spacing:.08em;font-size:13px}
  #why .section-head h2{font-size:44px;line-height:1.12;margin-top:10px}
  #why .section-head p{font-size:16px;color:var(--muted);margin-top:8px}
  #why .challenge-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;max-width:1120px;margin:0 auto}
  #why .challenge-card{padding:0 24px;min-height:185px;text-align:center;border-right:1px solid #e3ebe5;display:flex;flex-direction:column;align-items:center}
  #why .challenge-card:last-child{border-right:0}
  #why .feature-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px;border:1px solid var(--line)}
  #why .feature-icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  #why .icon-blue{background:#e9f2ff;color:#1565c0}
  #why .icon-green{background:#e9f8ed;color:#2f9d4c}
  #why .icon-yellow{background:#fff4df;color:#e59a16}
  #why .icon-red{background:#ffe9e9;color:#e05252}
  #why .icon-purple{background:#f0e7ff;color:#8052c9}
  #why .challenge-card h4{font-size:16px;line-height:1.2;font-weight:800;color:#0e1420;margin:0 0 9px}
  #why .challenge-card p{font-size:13px;line-height:1.45;color:var(--muted);max-width:180px}








  /* HOW IT WORKS - visual process row */
  #how-it-works{background:var(--paper-2) !important;padding:68px 24px 54px}
  #how-it-works .section-head{max-width:760px;margin:0 auto 38px;text-align:center}
  #how-it-works .section-head h2{font-size:42px;line-height:1.05}
  #how-it-works .section-head p{font-size:14px;margin-top:8px}
  .process-grid{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:18px;position:relative}
  .process-grid:before{content:"";position:absolute;left:9%;right:9%;top:34px;border-top:2px dotted #a855f7;z-index:0}
  .process-step{position:relative;z-index:1;text-align:center;flex:0 0 calc(20% - 14.4px)}
  .process-number{position:absolute;top:-1px;left:calc(50% - 40px);width:24px;height:24px;border-radius:50%;background:#8b12e0;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;z-index:3}
  .process-icon{width:68px;height:68px;border-radius:50%;margin:0 auto 14px;background:#fff;border:2px solid #e4cbff;box-shadow:0 0 0 5px rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;color:#3b0764}
  .process-icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .process-step h4{font-size:15px;line-height:1.2;color:#0e1420;font-weight:800;margin-bottom:8px}
  .process-step p{font-size:11px;line-height:1.4;color:var(--muted);max-width:150px;margin:0 auto}
  .confidence-band{max-width:520px;margin:28px auto 0;background:#f1e4ff;border-radius:999px;padding:12px 24px;display:flex;align-items:center;justify-content:center;gap:12px}
  .confidence-band svg{width:28px;height:28px;fill:none;stroke:#8b12e0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .confidence-band strong{font-size:17px;color:#0e1420}
  .confidence-band span{font-size:10px;color:var(--muted);display:block;margin-top:2px}
  @media(max-width:1000px){#why .challenge-grid{grid-template-columns:repeat(3,1fr);row-gap:28px}.process-grid{row-gap:28px}.process-step{flex-basis:calc(33.333% - 12px)}#why .challenge-card:nth-child(3){border-right:0}.process-grid:before{display:none}}
  @media(max-width:650px){#why .challenge-grid{grid-template-columns:1fr 1fr}.process-step{flex-basis:calc(50% - 9px)}#why .challenge-card{border-right:0;border-bottom:1px solid #e3ebe5;padding-bottom:24px}#why .challenge-card:nth-last-child(-n+2){border-bottom:0}#why .section-head h2,#how-it-works .section-head h2{font-size:32px}.confidence-band{border-radius:22px}}
  @media(max-width:460px){#why .challenge-grid{grid-template-columns:1fr}.process-step{flex-basis:100%}.process-grid:before{display:none}}








  /* AI POWERED - dark */
  .ai-section{background:var(--navy);color:#f3e8ff;border-radius:40px;margin:0 24px;padding:88px 48px}
  .ai-section .section-head h2{color:#fff}
  .ai-section .section-head p{color:#b9c9bd}
  .ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
  .ai-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:28px}
  .ai-card h4{font-size:19px;font-weight:600;margin-bottom:12px;color:#f3e8ff}
  .ai-card p{color:#a9bcae;font-size:16px;line-height:1.5}
  @media (max-width:860px){.ai-section{margin:0;border-radius:0;padding:64px 24px} .ai-grid{grid-template-columns:1fr}}








  /* PRICING */
  .pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
  .price-card{border-radius:var(--radius);padding:2px;background:var(--grad)}
  .price-inner{background:#fff;border-radius:22px;padding:44px}
  .price-inner h3{font-size:26px;font-weight:800;margin-bottom:10px}
  .price-inner .gtag{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .price-inner .desc{color:var(--muted);font-size:17px;margin-bottom:24px}
  .price-inner hr{border:none;border-top:1px solid var(--line);margin:24px 0}
  .price-inner ul{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:14px}
  .price-inner li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:#2c3a2f}
  .price-inner li:before{content:"✓";color:#9500f5;font-weight:800}
  @media (max-width:860px){.pricing-grid{grid-template-columns:1fr}}








  /* TESTIMONIAL */
  .testi-wrap{background:#fff}
  .testi{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center}
  .testi blockquote{font-family:'Inter',sans-serif;font-size:30px;font-weight:400;line-height:1.35;margin:0}
  .testi blockquote b{font-weight:600}
  .testi blockquote .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
  .testi-person{display:flex;gap:16px;align-items:center;margin-top:28px}
  .avatar{width:56px;height:56px;border-radius:12px;background:linear-gradient(160deg,#7c1fd6,#3b0764)}
  .testi-person b{display:block;font-size:18px}
  .testi-person span{font-size:15px;color:var(--muted)}
  .testi-visual{border-radius:24px;min-height:320px;background:linear-gradient(150deg,#2e0854,#0c1524)}
  @media (max-width:900px){ .testi{grid-template-columns:1fr} .testi blockquote{font-size:24px} }








  /* BLOG */
  .blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .blog-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff}
  .blog-thumb{height:220px;background:linear-gradient(135deg,#c084fc,#7c1fd6 55%,#3b0764)}
  .blog-body{padding:26px}
  .blog-body h4{font-size:21px;font-weight:700;line-height:1.3;margin-bottom:10px}
  .blog-body p{color:var(--muted);font-size:15px;line-height:1.5;margin-bottom:16px}
  .blog-body .rm{font-weight:700;font-size:15px;color:#7209b7}
  @media (max-width:860px){.blog-grid{grid-template-columns:1fr}}








  /* FAQ */
  .faq{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
  details{border:1px solid var(--line);border-radius:16px;padding:22px 26px;background:#fff}
  details[open]{background:var(--paper-2)}
  summary{cursor:pointer;list-style:none;font-weight:700;font-size:18px;display:flex;justify-content:space-between;align-items:center;gap:16px}
  summary::-webkit-details-marker{display:none}
  summary:after{content:"+";font-size:22px;font-weight:400;color:#9500f5;flex:none}
  details[open] summary:after{content:"–"}
  details p{margin-top:14px;color:var(--muted);font-size:16px;line-height:1.6}








  /* CTA */
  .cta-band{
    border-radius:32px;padding:72px;position:relative;overflow:hidden;
    background:linear-gradient(120deg,#f3e8ff,#e6d0ff 40%,#d9b8ff);
    display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;
    border:1px solid var(--line);
  }
  .cta-band h2{font-size:42px;font-weight:800}
  .cta-band p{margin-top:14px;font-size:18px;color:#2c3a2f}
  .cta-actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
  @media (max-width:900px){.cta-band{grid-template-columns:1fr;padding:40px} .cta-band h2{font-size:30px}}








  /* FOOTER */
  footer{background:var(--navy);color:#c9d6cc;padding:80px 24px 30px}
  .foot-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;max-width:1180px;margin:0 auto}
  .foot-col h5{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px;
    background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .foot-col a{display:block;font-size:15px;color:#c9d6cc;opacity:.85;margin-bottom:12px}
  .foot-col a:hover{opacity:1}
  .foot-bottom{max-width:1180px;margin:56px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
  .foot-bottom .flogo{height:28px;filter:brightness(0) invert(1)}
  .social{display:flex;gap:14px}
  .social a{width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:13px}
  @media (max-width:860px){.foot-top{flex-direction:column}}
















  /* DOCUMENT STRUCTURE OVERRIDES — preserve existing Evolverse palette */
  body{background:#fff}
  section,.case-wrap,.testi-wrap{background:#fff}
  .logostrip{background:#fff}








  /* WHY — five-point horizontal structure from the supplied document */
  .challenge-grid{grid-template-columns:repeat(5,1fr);gap:20px}
  .challenge-card{border:1px solid var(--line);border-radius:20px;background:#fff;padding:26px 20px;min-height:190px}
  .challenge-card h4{font-size:18px;line-height:1.25}
  .challenge-card p{font-size:15px;line-height:1.5}








  /* SCENARIOS — six cards in a 3 x 2 structure */
  .platform-grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .platform-card img{height:180px}
  .platform-card .platform-card-body{padding:24px 24px 28px}








  /* HOW IT WORKS — five-step horizontal structure, white background */
  .ai-section{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);margin:0;padding:72px 48px}
  .ai-section .section-head h2{color:var(--ink)}
  .ai-section .section-head p{color:var(--muted)}
  .ai-grid{grid-template-columns:repeat(5,1fr);gap:16px;margin-top:40px}
  .ai-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 18px;min-height:190px}
  .ai-card h4{font-size:17px;color:#2a1f38;line-height:1.3}
  .ai-card p{color:var(--muted);font-size:14px;line-height:1.5}
  .ai-section>p:last-child{color:#7209b7!important}








  /* INDUSTRIES — six-card structure */
  .industry-grid{grid-template-columns:repeat(6,1fr);gap:16px}








  /* BLOG — white page background while preserving card styling */
  #blog{background:#fff!important}








  @media (max-width:1000px){
    .challenge-grid{grid-template-columns:repeat(3,1fr)}
    .platform-grid{grid-template-columns:repeat(2,1fr)}
    .ai-grid{grid-template-columns:repeat(3,1fr)}
    .industry-grid{grid-template-columns:repeat(3,1fr)}
  }
  @media (max-width:700px){
    .challenge-grid,.platform-grid,.ai-grid,.industry-grid{grid-template-columns:1fr}
    .ai-section{padding:48px 24px}
  }








  /* FINAL RESPONSIVE SAFETY */
  @media(max-width:900px){
    .wrap{padding-left:20px;padding-right:20px}
    section{padding-top:76px;padding-bottom:76px}
    .section-head{margin-bottom:40px}
    .platform-grid,.pricing-grid,.blog-grid,.testi{min-width:0}
    .tabs{max-width:100%;overflow:auto}
    .tabs span{white-space:nowrap}
  }
  @media(max-width:560px){
    .wrap{padding-left:16px;padding-right:16px}
    section{padding-left:16px;padding-right:16px}
    .section-head h2{font-size:34px}
    .section-head p{font-size:16px}
    .btn{font-size:14px}
    .platform-card .platform-card-body{padding:20px 18px 22px}
    .platform-card img{height:190px}
    .industry-grid{grid-template-columns:1fr 1fr}
    .price-inner{padding:30px 24px}
    .ai-section{padding:42px 20px}
  }
















  /* AutoVRse-inspired visual refinement — keep Evolverse green gradient unchanged */
  :root{
    --paper:#ffffff;
    --paper-2:#f4f7f3;
    --ink:#0b1020;
    --muted:#66706b;
    --line:#e4e8e4;
    --radius:28px;
  }
  body{background:#fff;color:#0b1020}
  header{
    background:rgba(255,255,255,.88);
    border-bottom:1px solid rgba(11,16,32,.08);
  }
  nav{max-width:1240px;padding:18px 28px}
  .nav-links{gap:38px}
  .nav-links a{color:#111827;font-size:14px;font-weight:600}
  .nav-cta .btn{padding:12px 23px}








  section{background:#fff}
  .wrap{max-width:1240px}
  .hero{background:#fff;padding:112px 28px 82px}
  .hero-grid{max-width:1240px;gap:64px}
  .hero h1{font-size:clamp(48px,6vw,76px);line-height:.98;letter-spacing:-.055em}
  .hero p.lead{font-size:20px;line-height:1.55;color:#4e5a54;max-width:570px}
  .hero-actions{margin-top:30px}
  .btn{font-size:14px;padding:14px 25px;letter-spacing:-.01em}
  .btn-primary{color:#fff}








  /* Keep the existing green gradient exactly as defined in --grad. */
  .grad-text,.gtag,.stat-card b.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}








  .hero-orb{border-radius:34px;box-shadow:0 30px 80px -38px rgba(7,20,17,.45)}
  .logostrip{background:#fff;border-color:#ecefec;padding:30px 24px}
  .logostrip p{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:#7b847f}








  .section-head{max-width:820px;margin-bottom:60px}
  .section-head h2,.platform-title h2{font-size:clamp(38px,5vw,58px);line-height:1;letter-spacing:-.045em}
  .section-head p,.platform-title .sub{font-size:17px;color:#69736e;line-height:1.55}








  /* AutoVRse-like alternating rhythm: mostly white, with very soft grey/green panels */
  #why,#how-it-works,#industries,#pricing,#demo{background:#fff}
  .case-wrap,#customization{background:#f4f7f3}
  #blog{background:#f4f7f3 !important}








  .challenge-grid,.industry-grid,.platform-grid,.pricing-grid,.blog-grid{gap:22px}
  .challenge-card,.platform-card,.price-card,.blog-card,.industry-card{
    background:#fff;border:1px solid #e7ebe7;border-radius:24px;
    box-shadow:0 10px 35px -28px rgba(10,20,16,.45);
  }
  .platform-card{overflow:hidden}
  .platform-card:hover,.price-card:hover,.blog-card:hover,.industry-card:hover{
    transform:translateY(-3px);box-shadow:0 18px 42px -30px rgba(10,20,16,.5);transition:transform .2s ease,box-shadow .2s ease
  }
  .case-card{border:1px solid #e5e9e5;border-radius:28px;box-shadow:0 18px 60px -42px rgba(10,20,16,.45)}
  .case-body{background:#fff}
  .stat-card{border-color:#e8ece8;border-radius:20px}








  /* Scenarios: retain your existing card design but use the cleaner reference rhythm */
  #scenarios{background:#fff !important;padding:96px 24px 104px}
  #scenarios .platform-title h2{font-size:clamp(38px,5vw,56px)}
  #scenarios .platform-grid{gap:20px}
  #scenarios .platform-card{border-radius:22px;border-color:#e7ebe7;box-shadow:0 12px 34px -28px rgba(10,20,16,.4)}








  /* How-it-works / Why section: lighter separators and generous whitespace */
  #why .benefit-card{background:#fff;border-color:#e9ede9}
  #how-it-works .step-card{background:#fff;border-color:#e9ede9}








  /* Dark CTA block follows the strong contrast used on AutoVRse while preserving green gradient accents. */
  #demo .demo-card,
  .cta-dark{
    border-radius:32px;
    background:#0b1020;
    color:#fff;
    box-shadow:0 28px 70px -42px rgba(0,0,0,.55);
  }








  footer{background:#0b1020;color:#fff}
  footer a{color:rgba(255,255,255,.72)}








  @media (max-width:900px){
    nav{padding:15px 20px}
    .hero{padding:82px 20px 64px}
    .hero-grid{gap:42px}
    .hero h1{font-size:clamp(44px,9vw,62px)}
    section{padding:82px 20px}
  }
  @media (max-width:560px){
    nav{padding:13px 16px}
    .hero{padding:64px 16px 48px}
    .hero h1{font-size:40px;letter-spacing:-.045em}
    .hero p.lead{font-size:17px}
    section{padding:68px 16px}
    #scenarios{padding:72px 16px 80px}
    .section-head{margin-bottom:42px}
    .section-head h2,.platform-title h2{font-size:36px}
  }
















  /* FINAL TYPOGRAPHY — matched to supplied Evolverse reference */
  body,button,input,textarea,select{
    font-family:'Inter',sans-serif;
  }




  h1,h2,h3,h4,h5,h6{
    font-family:'Inter Tight','Inter',sans-serif;
    font-weight:600;
    letter-spacing:-0.02em;
    line-height:1.05;
  }




  p,li,span,a,label{
    font-family:'Inter',sans-serif;
  }




  .btn{
    font-family:'Inter',sans-serif;
    font-weight:600;
  }




  .nav-links a,.nav-cta,.logo{
    font-family:'Inter',sans-serif;
  }




  /* Eyebrow / section label — matches the reference SCENARIOS label */
  .eyebrow,
  .eyebrow-tag,
  .hero .kicker,
  .section-kicker{
    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:700;
    letter-spacing:.08em;
    line-height:1.2;
    text-transform:uppercase;
  }




  /* Reference heading hierarchy */
  .hero h1,
  .section-head h2,
  .platform-title h2,
  .case-body h3,
  .challenge-card h4,
  .industry-card h4,
  .platform-card h5,
  .price-inner h3,
  .blog-body h4,
  .faq h2,
  .cta-copy h2{
    font-family:'Inter Tight','Inter',sans-serif;
  }




  /* Reference body / sub-copy */
  .hero p.lead,
  .section-head p,
  .platform-title .sub,
  .challenge-card p,
  .platform-card p,
  .price-inner .desc,
  .blog-body p,
  .faq p,
  .faq-a p,
  .cta-copy p,
  .testi-side p,
  .footer-bottom p{
    font-family:'Inter',sans-serif;
    font-weight:400;
  }




  /* Scenario heading + marked subheading area */
  #scenarios .platform-title .eyebrow{
    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:700;
    letter-spacing:.08em;
    line-height:1.2;
    text-transform:uppercase;
  }




  #scenarios .platform-title h2{
    font-family:'Inter Tight','Inter',sans-serif;
    font-size:clamp(32px,4.5vw,52px);
    font-weight:600;
    letter-spacing:-0.02em;
    line-height:1.05;
  }




  #scenarios .platform-title .sub{
    font-family:'Inter',sans-serif;
    font-size:20px;
    font-weight:400;
    line-height:1.5;
  }




  .testi-quote{
    font-family:'Inter Tight','Inter',sans-serif;
    font-weight:300;
  }




  .grad-text{
    font-family:inherit;
  }








  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }


  body {
    font-family: 'Inter', sans-serif;
    background: #fff;
    color: #131717;
    -webkit-font-smoothing: antialiased;
  }


  .workforce-section {
    width: 100%;
    padding: 70px 24px 80px;
    overflow: hidden;
    background: #fff;
  }


  .workforce-container {
    width: min(1500px, 100%);
    margin: 0 auto;
  }


  /* ---------- TOP HEADING ---------- */
  .workforce-heading {
    text-align: center;
    margin-bottom: 42px;
  }


  .workforce-heading h2 {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: clamp(42px, 5.2vw, 76px);
    line-height: .98;
    letter-spacing: -0.045em;
    font-weight: 700;
    background: linear-gradient(100deg, #101b36 0%, #17344a 42%, #5b0aa8 68%, #c084fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }


  .workforce-heading h2 .green-text {
    display: block;
    background: linear-gradient(
      100deg,
      #5b0aa8 0%,
      #8b12e0 45%,
      #c084fc 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }


  /* ---------- TABS ---------- */
  .industry-tabs {
    width: min(730px, 100%);
    margin: 0 auto 42px;
    padding: 7px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    border: 1px solid #dce4df;
    border-radius: 999px;
    background: rgba(255,255,255,.85);
  }


  .industry-tab {
    min-height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .035em;
    cursor: pointer;
    transition: .25s ease;
  }


  .industry-tab.active {
    color: #fff;
    background: linear-gradient(95deg,#3b0764 0%,#5b0aa8 50%,#8512e0 100%);
    box-shadow: 0 5px 16px rgba(149,0,245, .18);
  }


  /* ---------- FEATURE CARD ---------- */
  .workforce-card {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    min-height: 625px;
    overflow: hidden;
    border: 1px solid #e0e5e2;
    border-radius: 34px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(16, 27, 54, .035);
  }


  .workforce-image {
    min-height: 625px;
    background-image:
      linear-gradient(
        90deg,
        rgba(0,0,0,0) 70%,
        rgba(255,255,255,.10) 100%
      ),
      url("../images/WhatsApp Image 2026-09-11 at 3.47.51 PM.jpeg");
    background-size: cover;
    background-position: center;
  }


  .workforce-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 54px;
    background: #fff;
  }


  .workforce-content h3 {
    max-width: 680px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: clamp(34px, 3.1vw, 51px);
    line-height: 1.02;
    letter-spacing: -0.04em;
    font-weight: 700;
    color: #101b36;
  }


  .workforce-content .description {
    max-width: 690px;
    margin-top: 22px;
    font-family: 'Inter', sans-serif;
    font-size: clamp(18px, 1.45vw, 24px);
    line-height: 1.42;
    font-weight: 400;
    color: #687384;
  }


  .workforce-button {
    align-self: flex-start;
    margin-top: 28px;
    padding: 17px 29px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    border-radius: 999px;
    border: 0;
    color: #fff;
    background: linear-gradient(95deg,#3b0764 0%,#5b0aa8 50%,#8512e0 100%);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 9px 22px rgba(149,0,245, .20);
    transition: transform .25s ease, box-shadow .25s ease;
  }


  .workforce-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(149,0,245, .27);
  }


  .workforce-button .arrow {
    font-size: 25px;
    line-height: .7;
    font-weight: 400;
    transition: transform .25s ease;
  }


  .workforce-button:hover .arrow {
    transform: translateX(4px);
  }


  /* ---------- BENEFIT CARDS ---------- */
  .benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 26px;
  }


  .benefit-card {
    min-height: 235px;
    padding: 17px 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #e1e5e3;
    border-radius: 21px;
    background: #fff;
  }


  .benefit-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 13px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f1e4ff;
    color: #7c1fd6;
  }


  .benefit-icon svg {
    width: 31px;
    height: 31px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }


  .benefit-card h4 {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: clamp(17px, 1.25vw, 22px);
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: #101b36;
  }


  .benefit-card p {
    margin-top: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.45;
    color: #737d89;
  }


  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 1050px) {
    .workforce-card {
      grid-template-columns: 1fr;
    }


    .workforce-image {
      min-height: 480px;
    }


    .workforce-content {
      padding: 52px 42px;
    }
  }


  @media (max-width: 700px) {
    .workforce-section {
      padding: 50px 16px 60px;
    }


    .workforce-heading {
      margin-bottom: 30px;
    }


    .workforce-heading h2 {
      font-size: clamp(36px, 10vw, 56px);
    }


    .industry-tabs {
      grid-template-columns: 1fr;
      border-radius: 22px;
      padding: 6px;
      margin-bottom: 30px;
    }


    .industry-tab {
      min-height: 46px;
      font-size: 13px;
    }


    .workforce-card {
      border-radius: 24px;
    }


    .workforce-image {
      min-height: 330px;
      background-position: center;
    }


    .workforce-content {
      padding: 38px 25px 30px;
    }


    .workforce-content h3 {
      font-size: 34px;
    }


    .workforce-content .description {
      font-size: 18px;
      margin-top: 17px;
    }


    .workforce-button {
      margin-top: 23px;
      padding: 15px 23px;
      font-size: 15px;
    }


    .benefits {
      grid-template-columns: 1fr;
      gap: 10px;
    }


    .benefit-card {
      min-height: auto;
      padding: 22px 18px;
    }
  }


  /* ---------- TAB CONTENT / FULL-COVER IMAGE ---------- */
  .workforce-image {
    position: relative;
    min-width: 0;
    min-height: 625px;
    overflow: hidden;
    background: #eef3ef;
  }


  .workforce-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
  }


  .workforce-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,0) 70%, rgba(255,255,255,.08));
  }


  .industry-tab {
    position: relative;
  }


  .industry-tab:focus-visible {
    outline: 3px solid rgba(42, 161, 77, .28);
    outline-offset: 3px;
  }


  .workforce-content h3,
  .workforce-content .description,
  .workforce-button,
  .benefits {
    transition: opacity .22s ease, transform .22s ease;
  }


  .workforce-content.is-switching h3,
  .workforce-content.is-switching .description,
  .workforce-content.is-switching .workforce-button,
  .workforce-content.is-switching .benefits {
    opacity: .35;
    transform: translateY(5px);
  }


  @media (max-width: 1050px) {
    .workforce-image {
      min-height: 480px;
    }
  }


  @media (max-width: 700px) {
    .workforce-image {
      min-height: 330px;
    }
  }





/* Industries title gradient — only the heading text */
.industries-showcase-title .industries-gradient-text{
  display:inline-block;
  background:linear-gradient(
    100deg,
    #3b0764 0%,
    #9500f5 48%,
    #b347ff 78%,
    #e4cbff 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
  /* INDUSTRIES HEADING — matched to the supplied reference image */
  #industries .industries-heading{
    max-width:900px;
    margin:0 auto 42px;
    text-align:center;
  }

  #industries .industries-title-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
  }

  #industries .industries-title-row h2{
    margin:0;
    font-family:'Inter Tight','Inter',sans-serif;
    font-size:clamp(28px,3.2vw,40px);
    line-height:1;
    font-weight:700;
    letter-spacing:-.035em;
    color:#101b36;
  }

  #industries .industries-title-line{
    display:block;
    width:27px;
    height:2px;
    flex:0 0 27px;
    border-radius:999px;
    background:#9500f5;
  }

  #industries .industries-heading p{
    margin:7px 0 0;
    font-family:'Inter',sans-serif;
    font-size:11px;
    line-height:1.4;
    font-weight:400;
    color:#687384;
  }

  @media (max-width:560px){
    #industries .industries-heading{
      margin-bottom:30px;
    }
    #industries .industries-title-row{
      gap:10px;
    }
    #industries .industries-title-line{
      width:22px;
      flex-basis:22px;
    }
    #industries .industries-title-row h2{
      font-size:30px;
    }
    #industries .industries-heading p{
      font-size:10px;
    }
  }
/* =========================================================
   WHY VR-BASED SAFETY TRAINING
   ========================================================= */

#why {
  width: 100%;
  padding: 80px 0 90px;
  overflow: hidden;
}

#why .wrap {
  width: min(1400px, calc(100% - 80px));
  margin: 0 auto;
}


/* =========================================================
   HEADING
   ========================================================= */

#why .section-head {
  margin-bottom: 42px;
}

#why .section-head h2 {
  margin: 0;
  text-align: center;

  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.045em;
  font-weight: 700;

  color: #111820;
}

#why .grad-text {
  background: linear-gradient(
    100deg,
    #3b0764 0%,
    #9500f5 45%,
    #b347ff 75%,
    #e4cbff 100%
  );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* =========================================================
   DESKTOP — 5 EQUAL CARDS
   ========================================================= */

.challenge-grid {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 0;

  align-items: stretch;
}


/* =========================================================
   CARD
   ========================================================= */

.challenge-card {
  min-width: 0;
  min-height: 300px;

  padding: 28px 24px 30px;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  box-sizing: border-box;

  background: #ffffff;

  border: 1px solid #e1e6e3;

  border-radius: 0;

  box-shadow: 0 12px 28px rgba(16, 27, 54, 0.045);
}


/* Rounded outside corners */

.challenge-card:first-child {
  border-radius: 28px 0 0 28px;
}

.challenge-card:last-child {
  border-radius: 0 28px 28px 0;
}


/* =========================================================
   ICON
   ========================================================= */

.challenge-card .feature-icon {
  width: 78px;
  height: 78px;

  flex: 0 0 78px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 22px;

  border-radius: 50%;
}

.challenge-card .feature-icon svg {
  width: 36px;
  height: 36px;

  display: block;

  fill: none;

  stroke: currentColor;
  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   ICON COLORS
   ========================================================= */

.challenge-card .icon-blue {
  background: #eaf3ff;
  color: #2878d2;
}

.challenge-card .icon-green {
  background: #e8f7ed;
  color: #2ca455;
}

.challenge-card .icon-yellow {
  background: #fff4dc;
  color: #e9a72c;
}

.challenge-card .icon-red {
  background: #ffebeb;
  color: #e45858;
}

.challenge-card .icon-purple {
  background: #f0e9ff;
  color: #8154d6;
}


/* =========================================================
   CARD TITLE
   ========================================================= */

.challenge-card h4 {
  width: 100%;

  min-height: 48px;

  margin: 0 0 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: 'Inter Tight', 'Inter', sans-serif;

  font-size: 21px;
  line-height: 1.12;

  letter-spacing: -0.025em;

  font-weight: 700;

  color: #101b36;
}


/* =========================================================
   PARAGRAPH
   ========================================================= */

.challenge-card p {
  width: 100%;
  max-width: 220px;

  min-height: 72px;

  margin: 0 auto;

  font-family: 'Inter', sans-serif;

  font-size: 16px;
  line-height: 1.48;

  font-weight: 400;

  color: #6b7682;

  text-align: center;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  #why {
    padding: 70px 0 80px;
  }

  #why .wrap {
    width: min(900px, calc(100% - 48px));
  }

  .challenge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .challenge-card,
  .challenge-card:first-child,
  .challenge-card:last-child {
    min-height: 290px;
    border-radius: 24px;
  }

  .challenge-card {
    padding: 28px 22px;
  }

  .challenge-card p {
    max-width: 280px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

  #why {
    padding: 55px 0 65px;
  }

  #why .wrap {
    width: calc(100% - 32px);
    max-width: 100%;
  }

  #why .section-head {
    margin-bottom: 30px;
  }

  #why .section-head h2 {
    font-size: clamp(32px, 9vw, 42px);
    line-height: 1.04;
  }

  .challenge-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .challenge-card,
  .challenge-card:first-child,
  .challenge-card:last-child {
    width: 100%;
    min-height: auto;

    padding: 28px 24px 30px;

    border-radius: 24px;
  }

  .challenge-card .feature-icon {
    width: 70px;
    height: 70px;

    flex-basis: 70px;

    margin-bottom: 18px;
  }

  .challenge-card .feature-icon svg {
    width: 32px;
    height: 32px;
  }

  .challenge-card h4 {
    min-height: auto;

    margin-bottom: 10px;

    font-size: 21px;
    line-height: 1.12;
  }

  .challenge-card p {
    max-width: 330px;

    min-height: auto;

    font-size: 16px;
    line-height: 1.5;
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

  #why .wrap {
    width: calc(100% - 24px);
  }

  .challenge-card {
    padding: 24px 18px 27px;
  }

  .challenge-card .feature-icon {
    width: 64px;
    height: 64px;

    flex-basis: 64px;
  }

  .challenge-card h4 {
    font-size: 19px;
  }

  .challenge-card p {
    font-size: 15px;
  }
}
.workforce-section{width:100%;padding:70px 32px 85px;overflow:hidden}
.workforce-container{width:min(1240px,100%);margin:0 auto}
.workforce-heading{text-align:center;margin-bottom:40px}
.workforce-heading h2{margin:0;font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(42px,5vw,72px);line-height:.98;letter-spacing:-.045em;font-weight:700}
.workforce-heading .green-text{display:block;background:linear-gradient(100deg,#5b0aa8 0%,#8b12e0 45%,#c084fc 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.industry-tabs{width:min(720px,100%);margin:0 auto 42px;padding:7px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border:1px solid #dce4df;border-radius:999px;background:#fff}
.industry-tab{min-height:52px;padding:0 20px;border:0;border-radius:999px;background:transparent;color:#111827;font-family:'Inter',sans-serif;font-size:15px;font-weight:700;letter-spacing:.025em;cursor:pointer}
.industry-tab.active{background:linear-gradient(95deg,#3b0764 0%,#5b0aa8 50%,#8512e0 100%);color:#fff}
.workforce-card{width:100%;display:grid;grid-template-columns:1.05fr .95fr;min-height:625px;overflow:hidden;border:1px solid #e0e5e2;border-radius:30px;background:#fff;box-shadow:0 10px 35px rgba(16,27,54,.035)}
.workforce-image{min-width:0;min-height:625px;background:#eef4ef;position:relative}
.workforce-image img[hidden]{display:none}
.workforce-content{display:flex;flex-direction:column;justify-content:center;padding:58px 52px;background:#fff}
.workforce-content h3{max-width:650px;margin:0;font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(34px,3vw,50px);line-height:1.02;letter-spacing:-.04em;font-weight:700;color:#101b36}
.workforce-content .description{max-width:680px;margin:21px 0 0;font-family:'Inter',sans-serif;font-size:20px;line-height:1.42;color:#687384}
.workforce-button{align-self:flex-start;margin-top:27px;padding:16px 28px;display:inline-flex;align-items:center;gap:15px;border-radius:999px;color:#fff;background:linear-gradient(95deg,#3b0764 0%,#5b0aa8 50%,#8512e0 100%);font-family:'Inter',sans-serif;font-size:16px;font-weight:700;text-decoration:none}
.workforce-button .arrow{font-size:24px;line-height:.7}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.benefit-card{min-height:210px;padding:17px 15px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid #e1e5e3;border-radius:20px;background:#fff}
.benefit-icon{width:58px;height:58px;margin-bottom:12px;display:grid;place-items:center;border-radius:50%;background:#f1e4ff;color:#7c1fd6}
.benefit-icon svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.benefit-card h4{margin:0;font-family:'Inter Tight','Inter',sans-serif;font-size:20px;line-height:1.08;font-weight:700;color:#101b36}
.benefit-card p{margin:11px 0 0;font-family:'Inter',sans-serif;font-size:14px;line-height:1.4;color:#737d89}
@media(max-width:1050px){.workforce-section{padding-left:24px;padding-right:24px}.workforce-card{grid-template-columns:1fr}.workforce-image{min-height:400px}}
@media(max-width:700px){.workforce-section{padding:50px 16px 60px}.workforce-heading{margin-bottom:30px}.workforce-heading h2{font-size:clamp(36px,10vw,54px)}.industry-tabs{grid-template-columns:1fr;border-radius:22px;margin-bottom:30px}.workforce-card{border-radius:24px}.workforce-image{min-height:280px}.workforce-content{padding:38px 24px 30px}.workforce-content h3{font-size:34px}.workforce-content .description{font-size:18px}.benefits{grid-template-columns:1fr}}
/* =========================================================
   FINAL WHY VR CARD ALIGNMENT
   Desktop + tablet + mobile
   Only affects #why section
   ========================================================= */

#why{
  width:100%;
  padding:82px 24px 82px;
  overflow:hidden;
  background:#fff !important;
}

#why .wrap{
  width:min(1400px, calc(100% - 80px));
  max-width:none;
  margin:0 auto;
}

/* Heading */
#why .section-head{
  width:100%;
  max-width:1000px;
  margin:0 auto 42px;
  text-align:center;
}

#why .section-head h2{
  margin:0;
  text-align:center;
  font-family:'Inter Tight','Inter',sans-serif;
  font-size:clamp(38px, 4vw, 58px);
  line-height:1.05;
  letter-spacing:-.045em;
  font-weight:700;
}

/* Five equal cards with consistent spacing */
#why .challenge-grid{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  align-items:stretch;
  margin:0 auto;
}

#why .challenge-card{
  flex:0 0 calc(20% - 12.8px);
  min-width:0;
  min-height:300px;
  padding:28px 22px 30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #e1e6e3;
  border-radius:22px !important;
  box-shadow:0 10px 30px rgba(16,27,54,.045);
}

/* Keep all icons aligned at the same height */
#why .challenge-card .feature-icon{
  width:78px;
  height:78px;
  flex:0 0 78px;
  margin:0 auto 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}

#why .challenge-card .feature-icon svg{
  width:36px;
  height:36px;
  display:block;
}

/* Equal title area */
#why .challenge-card h4{
  width:100%;
  min-height:50px;
  margin:0 0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Inter Tight','Inter',sans-serif;
  font-size:20px;
  line-height:1.15;
  letter-spacing:-.025em;
  font-weight:700;
  color:#101b36;
}

/* Equal paragraph area */
#why .challenge-card p{
  width:100%;
  max-width:220px;
  min-height:72px;
  margin:0 auto;
  font-family:'Inter',sans-serif;
  font-size:15px;
  line-height:1.5;
  font-weight:400;
  color:#6b7682;
  text-align:center;
}

/* Tablet */
@media (max-width:1100px){
  #why{
    padding:72px 24px 78px;
  }

  #why .wrap{
    width:min(920px, calc(100% - 48px));
  }

  #why .challenge-grid{
    gap:16px;
  }

  #why .challenge-card{
    flex-basis:calc(33.333% - 10.667px);
    min-height:290px;
    padding:26px 20px 28px;
  }

  #why .challenge-card h4{
    font-size:19px;
  }
}

/* Mobile / 2-column */
@media (max-width:700px){
  #why{
    padding:62px 16px 68px;
  }

  #why .wrap{
    width:100%;
    max-width:100%;
  }

  #why .section-head{
    margin-bottom:30px;
    padding:0 4px;
  }

  #why .section-head h2{
    font-size:clamp(32px, 8.5vw, 42px);
    line-height:1.06;
  }

  #why .challenge-grid{
    gap:14px;
  }

  #why .challenge-card{
    flex-basis:calc(50% - 7px);
    min-height:285px;
    padding:24px 16px 26px;
    border-radius:22px !important;
  }

  #why .challenge-card .feature-icon{
    width:68px;
    height:68px;
    flex-basis:68px;
    margin-bottom:17px;
  }

  #why .challenge-card .feature-icon svg{
    width:31px;
    height:31px;
  }

  #why .challenge-card h4{
    min-height:48px;
    margin-bottom:10px;
    font-size:18px;
    line-height:1.15;
  }

  #why .challenge-card p{
    max-width:250px;
    min-height:auto;
    font-size:14px;
    line-height:1.5;
  }
}

/* Small mobile — single column for clean readability */
@media (max-width:480px){
  #why{
    padding:54px 16px 62px;
  }

  #why .challenge-grid{
    gap:14px;
  }

  #why .challenge-card{
    flex-basis:100%;
    min-height:auto;
    padding:26px 22px 28px;
    border-radius:22px !important;
  }

  #why .challenge-card .feature-icon{
    width:68px;
    height:68px;
    flex-basis:68px;
  }

  #why .challenge-card h4{
    min-height:auto;
    font-size:20px;
  }

  #why .challenge-card p{
    max-width:330px;
    font-size:15px;
  }
}
/* =========================================================
   ANCHOR / SCROLL-OFFSET FIX
   Keeps section headings clear of the sticky header when
   navigating via nav / footer links or in-page anchors.
   ========================================================= */
section[id]{scroll-margin-top:96px}
@media (max-width:900px){ section[id]{scroll-margin-top:84px} }
@media (max-width:560px){ section[id]{scroll-margin-top:76px} }

/* Small breathing room so card titles never hug the rounded edge */
.industry-card h4{padding:0 10px}

/* =========================================================
   SCROLL-IN TRANSITIONS
   Cards / headings fade + rise into place as they enter the
   viewport, in the spirit of autovrse.com's scroll motion.
   Classes are added purely by JS (progressive enhancement) —
   with JS disabled every element simply keeps its normal,
   fully-visible state.
   ========================================================= */
.js-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
  will-change:opacity, transform;
}
.js-reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .js-reveal{opacity:1;transform:none;transition:none}
}