:root{
  --purple:#5001be;
  --purple-bright:#600ff0;
  --purple-deep:#370089;
  --purple-dark:#370089;
  --ink:#1a1a1a;
  --gray:#5a5a6a;
  --bg-soft:#f6f5fa;
  --bg-lilac:#ececf6;
  --line:#e3e2ee;
  --font-head:'Roboto Condensed','Roboto',Arial,sans-serif;
}

.wrap{width: 85.652%;
    margin: auto;
    max-width: 1430.016px;}

.btn{display:inline-block;background:var(--purple);color:#fff;font-weight:500;padding:12px 28px;border-radius:2px;font-size:15px;transition:background .2s;}
.btn:hover{background:var(--purple-deep);color:#fff;}
.btn.ghost{background:transparent;border:2px solid #fff;color:#fff;}
.btn.ghost:hover{background:#fff;color:var(--purple-deep);}

/* ---------- Breadcrumb ---------- */
.crumb{background:var(--bg-soft);border-bottom:1px solid var(--line);font-size:13px;color:var(--gray);}
.crumb .wrap{padding-top:12px;padding-bottom:12px;}
.crumb a{color:var(--gray);}
.crumb a:hover{color:var(--purple);}
.crumb .sep{margin:0 8px;color:#b9b8c9;}
.crumb .cur{color:var(--ink);font-weight:400;}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:#eaebf4;}
.hero-bg{position:absolute;inset:0;background:url("../images/1.jpg") center/cover no-repeat;}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(236,236,246,.94) 0%,rgba(236,236,246,.84) 24%,rgba(236,236,246,.60) 44%,rgba(236,236,246,.34) 62%,rgba(236,236,246,.14) 80%,rgba(236,236,246,.04) 100%);}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 100%);}
.hero .wrap{position:relative;z-index:2;padding-top:40px;padding-bottom:44px;}
.hero-text{max-width:640px;}
.hero h1{font-family:var(--font-head);font-size:60px;line-height:1.05;font-weight:700;letter-spacing:.3px;margin-bottom:18px;color:var(--ink);}
.hero p.lead{font-size:18px;font-weight:300;line-height:1.65;color:#3a3a48;max-width:560px;}
.hero .actions{margin-top:28px;display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- SLA band ---------- */
.sla{border-bottom:1px solid var(--line);}
.sla-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.sla-cell{padding:48px 36px 44px;border-left:1px solid var(--line);}
.sla-cell:first-child{border-left:none;padding-left:0;}
.sla-num{font-family:var(--font-head);font-size:68px;font-weight:700;color:var(--purple);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.5px;}
.sla-num small{font-size:28px;font-weight:700;}
.sla-lab{font-weight:500;font-size:15px;margin-top:10px;}
.sla-sub{font-size:13px;color:var(--gray);margin-top:6px;line-height:1.5;}

/* ---------- Sections ---------- */
section{padding:96px 0;}
.sec-head{max-width:780px;margin-bottom:56px;}
.sec-head h2{font-family:var(--font-head);font-size:48px;line-height:1.1;font-weight:700;letter-spacing:.2px;margin-bottom:18px;}
.sec-head p{color:var(--gray);font-size:17.5px;line-height:1.75;}

/* ---------- Components: sticky visual + plain text list ---------- */
.comp-grid{display:grid;grid-template-columns:5fr 7fr;gap:76px;align-items:start;}
.comp-visual{position:sticky;top:110px;}
.comp-photo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 30%;border-radius:2px;}
.comp-caption{padding-top:16px;color:var(--gray);font-size:13.5px;line-height:1.6;font-weight:300;}
.comp-caption b{display:block;font-family:var(--font-head);font-size:16px;font-weight:700;letter-spacing:.4px;margin-bottom:4px;color:var(--ink);}
.comp-item{padding:32px 0;border-bottom:1px solid var(--line);}
.comp-item:first-child{border-top:1px solid var(--line);}
.comp-item h3{font-family:var(--font-head);font-size:23px;font-weight:700;letter-spacing:.3px;line-height:1.25;margin-bottom:10px;transition:color .2s;}
.comp-item:hover h3{color:var(--purple);}
.comp-item p{font-size:15px;color:var(--gray);line-height:1.65;max-width:640px;}

/* ---------- Why it matters (3-step narrative) ---------- */
.why{background:var(--bg-soft);padding-bottom:72px;}
.why-step{margin-bottom:56px;}
.why-step:last-child{margin-bottom:0;}
.step-tag{font-family:var(--font-head);font-size:23px;font-weight:700;color:var(--ink);margin-bottom:34px;letter-spacing:.3px;}
.step-tag span{color:var(--purple);margin-right:8px;}
.reality-card{background:#fff;border:1px solid var(--line);box-shadow:0 4px 24px rgba(55,0,137,.05);padding:52px 56px 56px;}
.reality-lead{font-family:'Roboto',Arial,sans-serif;font-size:17px;line-height:1.85;color:var(--ink);font-weight:300;max-width:1060px;}
.reality-lead .rn{font-family:var(--font-head);font-weight:700;color:var(--purple);font-size:1.65em;line-height:1;vertical-align:-.12em;letter-spacing:-.5px;}
.reality-cols{margin-top:40px;column-count:2;column-gap:72px;max-width:1060px;font-size:15.5px;line-height:1.85;color:var(--gray);font-weight:300;}
.reality-cols p{break-inside:avoid;}
.reality-cols b{font-weight:700;color:var(--ink);}

/* The Gap: photo + contrast band side by side */
.gap-grid{display:grid;grid-template-columns:5fr 7fr;gap:44px;align-items:start;}
.gap-photo img{display:block;width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:2px;}
.gap-caption{padding-top:14px;color:var(--gray);font-size:13.5px;line-height:1.6;font-weight:300;}
.gap-caption b{display:block;font-family:var(--font-head);font-size:16px;font-weight:700;letter-spacing:.4px;margin-bottom:4px;color:var(--ink);}
.vsband{background:var(--purple-deep);color:#fff;border-radius:2px;padding:52px 54px;display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;gap:12px;height:100%;}
.vb-v{font-family:var(--font-head);font-size:64px;font-weight:700;line-height:1;letter-spacing:-.5px;}
.vb-v small{font-size:24px;}
.vb-v.old{color:#bfaee6;}
.vb-v.new{color:#fff;}
.vb-t{font-size:13.5px;color:#d9d0f2;margin:12px 0 16px;line-height:1.6;}
.vb-arrow{font-size:36px;color:#9fe870;text-align:center;font-weight:700;line-height:1;}
.vs-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden;}
.vs-bar i{display:block;height:100%;border-radius:3px;}
.vs-bar .fill-old{width:100%;background:#a793d1;}
.vs-bar .fill-new{width:25%;background:#9fe870;}

/* ---------- Proof strip (CSP case + quote) ---------- */
.proof{border-top:1px solid var(--line);padding-top:64px;display:grid;grid-template-columns:1.15fr 1fr;gap:88px;align-items:start;}
.proof-case h3{font-family:var(--font-head);font-size:27px;font-weight:700;line-height:1.3;letter-spacing:.2px;margin-bottom:44px;max-width:520px;}
.proof-stats{display:flex;gap:72px;flex-wrap:wrap;}
.proof-stats .pv{font-family:var(--font-head);font-size:72px;font-weight:700;color:var(--purple);line-height:1;letter-spacing:-1px;}
.proof-stats .pl{font-size:14px;color:var(--gray);margin-top:14px;max-width:240px;line-height:1.6;}
.proof-quote{border-left:1px solid var(--line);padding-left:72px;display:flex;flex-direction:column;justify-content:center;}
.proof-quote::before{content:"\201C";font-family:var(--font-head);font-size:120px;font-weight:700;color:var(--purple);line-height:.5;display:block;margin-bottom:34px;}
.proof-quote p{font-size:21px;font-style:italic;color:var(--ink);line-height:1.6;margin-bottom:22px;max-width:420px;}
.proof-quote .who{font-size:13.5px;font-weight:700;color:var(--purple);font-style:normal;letter-spacing:.3px;}

/* ---------- Global Service Coverage ---------- */
.coverage{position:relative;overflow:hidden;}
.coverage .wrap{position:relative;z-index:1;}
.cov-map{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);}
.cov-map-svg{width:min(1600px,104%);height:auto;display:block;}
.m-land circle{fill:#cfcede;}
.cov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.cov-region{background:rgba(246,245,250,.92);border-top:2px solid var(--purple);padding:26px 24px;font-family:var(--font-head);font-size:21px;font-weight:700;line-height:1.3;color:var(--ink);text-align:center;}
.cov-note{margin-top:40px;font-size:13.5px;color:var(--gray);max-width:880px;line-height:1.6;}


/* ---------- FAQ (full-width editorial rows) ---------- */
.faq-sec{background:var(--bg-soft);padding:64px 0 80px;}
.faq-sec .sec-head{margin-bottom:36px;}
details.faq{border-bottom:1px solid #d8d6e6;}
details.faq summary{cursor:pointer;list-style:none;padding:24px 6px;font-weight:500;font-size:20px;display:flex;justify-content:space-between;align-items:center;gap:24px;transition:color .2s;}
details.faq summary:hover{color:var(--purple);}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+";font-family:var(--font-head);font-size:30px;color:var(--purple);font-weight:400;flex:none;transition:transform .2s;}
details.faq[open] summary{color:var(--purple-deep);}
details.faq[open] summary::after{transform:rotate(45deg);}
details.faq .ans{padding:0 6px 26px;color:var(--gray);font-size:15.5px;line-height:1.75;}

/* ---------- Explore more (related resources) ---------- */
.explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
.explore-card{display:block;border-top:1px solid var(--ink);padding-top:26px;color:var(--ink);}
.explore-card .tag{font-family:var(--font-head);font-size:12.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--purple);margin-bottom:10px;}
.explore-card h3{font-size:19px;font-weight:500;margin-bottom:10px;line-height:1.35;transition:color .2s;}
.explore-card:hover h3{color:var(--purple);}
.explore-card p{font-size:14px;color:var(--gray);line-height:1.6;margin-bottom:18px;}
.explore-card .go{font-weight:500;font-size:14.5px;display:inline-flex;align-items:center;gap:8px;}
.explore-card .go i{font-style:normal;transition:transform .25s ease;}
.explore-card:hover .go i{transform:translateX(5px);}

/* ---------- CTA ---------- */
.cta{background:var(--purple-dark);color:#fff;text-align:center;padding:88px 0;}
.cta h2{font-family:var(--font-head);font-size:44px;font-weight:700;letter-spacing:.3px;margin-bottom:16px;}
.cta p{color:#ddd3f5;max-width:660px;margin:0 auto 34px;font-size:17px;font-weight:300;}

/* ---------- Animations & polish ---------- */
details.faq .ans{animation:faqin .3s ease;}
@keyframes faqin{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  details.faq .ans{animation:none !important;}
  *{transition:none !important;}
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero .wrap{padding-top:64px;padding-bottom:72px;}
  .hero h1{font-size:52px;}
  .hero-text{max-width:440px;}
  .hero-bg{background-position:62% 40%;}
  .comp-grid{grid-template-columns:1fr;gap:36px;}
  .comp-visual{position:static;}
  .gap-grid{grid-template-columns:1fr;}
  .vsband{grid-template-columns:1fr;padding:36px 30px;height:auto;}
  .vb-arrow{transform:rotate(90deg);padding:4px 0;}
  .vb-v{font-size:48px;}
  .proof{grid-template-columns:1fr;gap:0;padding-top:48px;}
  .proof-case h3{margin-bottom:32px;}
  .proof-quote{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:44px;margin-top:48px;}
  .proof-quote::before{font-size:84px;margin-bottom:24px;}
  .proof-stats .pv{font-size:52px;}
  .cov-grid{grid-template-columns:repeat(2,1fr);}
  .sla-grid{grid-template-columns:repeat(2,1fr);}
  .sla-cell:nth-child(3){border-left:none;padding-left:0;}
  .explore-grid{grid-template-columns:1fr;gap:32px;}
}
@media (max-width:640px){
  .hero .wrap{padding-top:48px;padding-bottom:56px;}
  .hero-bg{background-position:68% 40%;}
  .hero-bg::after{background:linear-gradient(180deg,rgba(236,236,246,.95) 0%,rgba(236,236,246,.82) 46%,rgba(236,236,246,.55) 74%,rgba(236,236,246,.35) 100%);}
  .hero-text{max-width:none;}
  .hero h1{font-size:42px;}
  .hero p.lead{font-size:16.5px;}
  .sla-grid{grid-template-columns:1fr;}
  .sla-cell{border-left:none;padding:36px 0;border-top:1px solid var(--line);}
  .sla-cell:first-child{border-top:none;}
  .sla-num{font-size:52px;}
  section{padding:64px 0;}
  .faq-sec{padding:48px 0 56px;}
  .sec-head{margin-bottom:40px;}
  .sec-head h2{font-size:33px;}
  .comp-item h3{font-size:20px;}
  .step-tag{font-size:19px;}
  .reality-card{padding:28px 24px 32px;}
  .reality-lead{font-size:16.5px;line-height:1.75;}
  .reality-cols{column-count:1;font-size:15px;margin-top:28px;}
  .reality-cols p+p{margin-top:18px;}
  .vb-v{font-size:42px;}
  .proof-stats{gap:40px;}
  .proof-stats .pv{font-size:44px;}
  .proof-quote p{font-size:18px;}
  .cov-stats{gap:28px;margin-bottom:40px;}
  .cov-num{font-size:44px;}
  .cov-grid{grid-template-columns:1fr;}
  .cta h2{font-size:30px;}
}