:root{--navy:#0f1f38;--navy2:#1a3252;--blue:#2f6fb0;--blue2:#3f86cf;--acc:#cba331;--acc2:#e3c258;
--ink:#1b2330;--mut:#5d6b7e;--line:#e2e8f0;--lt:#f1f6fb;--bg:#fff;--soft:#f6f9fc;--grn:#2e7d32;--grnbg:#e6f4e6;--redln:#d98a8a}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.btn{display:inline-block;font-weight:700;padding:13px 24px;border-radius:8px;font-size:15px;cursor:pointer;transition:.15s;border:2px solid transparent;text-align:center}
.btn-primary{background:var(--acc);color:var(--navy)}.btn-primary:hover{background:var(--acc2)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}.btn-ghost:hover{border-color:#fff}
.btn-outline{background:transparent;border-color:var(--blue);color:var(--blue)}.btn-outline:hover{background:var(--blue);color:#fff}
.demo-tag{background:var(--navy);color:#9fb6d4;font-size:11.5px;text-align:center;padding:5px;letter-spacing:.3px}
.demo-tag b{color:#fff}
header.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand img{height:auto;display:block;max-width: 220px;height: 80px; width: 100%;}
.menu{display:flex;align-items:center;gap:24px;font-size:14.5px;font-weight:600;color:#33425a}
.menu>a:hover,.drop>span:hover{color:var(--blue)}
.drop{position:relative}
.drop>span{cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.drop>span:after{content:'▾';font-size:11px;color:var(--mut)}
.dropmenu{position:absolute;top:34px;left:-14px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(15,31,56,.16);padding:10px;min-width:268px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;z-index:30}
.drop:hover .dropmenu{opacity:1;visibility:visible;transform:translateY(0)}
.dropmenu a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;color:#33425a;font-weight:600}
.dropmenu a:hover{background:var(--lt);color:var(--blue)}
.navbtn{padding:9px 16px !important;font-size:14px !important}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px}
.burger span{width:24px;height:2px;background:var(--navy);display:block}
.mobile{display:none;background:#fff;border-bottom:1px solid var(--line);padding:10px 0}
.mobile a{display:block;padding:10px 24px;font-weight:600;color:#33425a;border-bottom:1px solid var(--lt)}
.mobile .grp{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--mut);padding:12px 24px 4px}
@media(max-width:920px){.menu{display:none}.burger{display:flex}}
/* hero */
.hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 55%,var(--blue) 130%);color:#fff;padding:70px 0 76px;position:relative;overflow:hidden}
.hero:after{content:'';position:absolute;right:-120px;top:-80px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(203,163,49,.22),transparent 65%)}
.hero .eyebrow{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:6px 14px;border-radius:30px;font-size:13px;font-weight:600;margin-bottom:20px}
.hero h1{font-size:44px;line-height:1.1;font-weight:800;letter-spacing:-.5px;max-width:880px}
.hero p.sub{font-size:19px;opacity:.92;max-width:720px;margin:20px 0 28px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap}.hero .micro{margin-top:22px;font-size:13.5px;opacity:.82}
.phero{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;padding:54px 0}
.phero .eyebrow{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:5px 13px;border-radius:30px;font-size:12.5px;font-weight:600;margin-bottom:14px}
.phero h1{font-size:36px;font-weight:800;letter-spacing:-.4px;max-width:840px;line-height:1.12}
.phero p{font-size:18px;opacity:.92;max-width:720px;margin-top:14px}
.crumb{font-size:13px;opacity:.7;margin-bottom:10px}.crumb a{color:#cfe0f2}
@media(max-width:820px){.hero h1{font-size:31px}.phero h1{font-size:27px}.hero{padding:50px 0 54px}}
.trust{background:var(--navy);color:#c5d4e6;padding:16px 0;font-size:13.5px;border-top:1px solid rgba(255,255,255,.08)}
.trust .row{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:center;text-align:center}
.trust b{color:#fff}
section.s{padding:66px 0}section.s.alt{background:var(--soft)}
.eyebrow2{color:var(--blue);font-weight:800;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:10px}
h2.t{font-size:31px;font-weight:800;color:var(--navy);letter-spacing:-.4px;max-width:820px;line-height:1.16}
.s p.intro{font-size:17px;color:var(--mut);max-width:780px;margin-top:14px}
.s h3{font-size:21px;color:var(--navy);margin:26px 0 8px}
.s p{margin-top:10px}.s p.body{color:#34425a;max-width:820px}
ul.list{margin:14px 0 0 20px}ul.list li{margin-bottom:7px}
.plist{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.pitem{background:#fff;border:1px solid var(--line);border-left:4px solid var(--redln);border-radius:10px;padding:16px 18px;font-size:15px}
.pitem b{color:var(--navy)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}


@media(max-width:820px){.split,.plist{grid-template-columns:1fr}}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.scard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;transition:.18s;display:block}
.scard:hover{box-shadow:0 14px 30px rgba(15,31,56,.1);transform:translateY(-3px);border-color:#cdddf0}
.scard .ic{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--lt),#dceaf7);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;display: none;}
.scard h4{font-size:17px;color:var(--navy);margin-bottom:6px}.scard p{font-size:14px;color:var(--mut)}
.scard .more{color:var(--blue);font-weight:700;font-size:13.5px;margin-top:10px;display:inline-block}
@media(max-width:820px){.cards{grid-template-columns:1fr}}
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
.witem{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
.witem .n{flex:none;width:38px;height:38px;border-radius:9px;background:var(--navy);color:var(--acc2);font-weight:800;display:flex;align-items:center;justify-content:center}
.witem h4{font-size:16px;color:var(--navy);margin-bottom:3px}.witem p{font-size:14px;color:var(--mut)}
@media(max-width:820px){.why{grid-template-columns:1fr}}
.inds{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.ind{background:#fff;border:1px solid var(--line);border-radius:30px;padding:10px 18px;font-weight:600;font-size:14.5px;color:#33425a}
.ind:hover{border-color:var(--blue);color:var(--blue)}
.ind.feat{background:var(--grnbg);border-color:#bfe0c0;color:var(--grn)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.step .num{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--acc));color:#fff;font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step h4{font-size:16px;color:var(--navy);margin-bottom:5px}.step p{font-size:14px;color:var(--mut)}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin-top:26px}
table{border-collapse:collapse;width:100%;font-size:14px;background:#fff}
th{background:var(--navy2);color:#fff;text-align:left;padding:12px 14px;font-weight:700;font-size:13px}
td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top}
tbody tr:nth-child(even){background:var(--lt)}td.c,th.c{text-align:center}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.plan{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 20px;display:flex;flex-direction:column}
.plan.featured{border:2px solid var(--acc);box-shadow:0 16px 36px rgba(203,163,49,.16);position:relative}
.plan.featured:before{content:'Most popular';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--acc);color:var(--navy);font-size:11.5px;font-weight:800;padding:4px 12px;border-radius:20px}
.plan h4{font-size:18px;color:var(--navy)}.plan .who{font-size:13px;color:var(--mut);margin:6px 0 12px;min-height:54px}
.plan .price{font-size:21px;font-weight:800;color:var(--navy);margin-bottom:2px}.plan .per{font-size:12.5px;color:var(--mut);margin-bottom:14px}
.plan ul{list-style:none;font-size:13.5px;color:#42536b;margin-bottom:18px}
.plan li{padding:5px 0 5px 20px;position:relative}.plan li:before{content:'✓';position:absolute;left:0;color:var(--grn);font-weight:800}
.plan .btn{margin-top:auto;font-size:14px;padding:11px}
@media(max-width:980px){.plans{grid-template-columns:1fr 1fr}}@media(max-width:560px){.plans{grid-template-columns:1fr}}
.faq{margin-top:28px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:12px;padding:4px 20px}
.faq summary{cursor:pointer;font-weight:700;color:var(--navy);padding:16px 0;list-style:none;display:flex;justify-content:space-between;font-size:15.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';color:var(--blue);font-weight:800;font-size:20px}
.faq details[open] summary:after{content:'–'}
.faq p{padding:0 0 18px;color:var(--mut);font-size:14.5px}
.final{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;text-align:center;padding:66px 0}
.final h2{font-size:32px;font-weight:800;letter-spacing:-.4px}.final p{font-size:17px;opacity:.92;max-width:640px;margin:16px auto 26px}
.final .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
footer.ft{background:#0b1626;color:#9fb1c8;padding:52px 0 26px;font-size:14px}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.fcols h5{color:#fff;font-size:14px;margin-bottom:12px}
.fcols a{
    display: block;
    padding: 4px 0;
    color: #9fb1c8;
    word-break: break-all;
}

.fcols a:hover{color:#fff}
.fbrand img{height:auto;margin-bottom:12px;max-width: 220px;}
.fbot{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:18px;font-size:12.5px;color:#7e90a8;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(max-width:820px){.fcols{grid-template-columns:1fr 1fr}.final h2{font-size:25px}}
/* forms */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px;margin-top:8px}
.field{display:flex;flex-direction:column}.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:5px}
.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:8px;padding:11px 13px;font-size:14.5px;font-family:inherit;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--blue2);border-color:var(--blue)}
.contact-split{display:grid;grid-template-columns:1.3fr .9fr;gap:40px}
.cbox{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:24px}
.cbox h4{color:var(--navy);font-size:16px;margin:14px 0 4px}.cbox p{font-size:14px;color:var(--mut)}
.cbox img{margin-bottom: 8px;
    max-width: 150px;
    height: auto;}

.logo-image img{
    filter: brightness(0) invert(1);
}
@media(max-width:820px){.contact-split,.formgrid{grid-template-columns:1fr}}


/* CUSTOM CSS */

section.phero {
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}
.bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgb(0 0 0) 0%, rgb(9 9 10 / 80%) 50%, rgba(63, 151, 255, .15) 100%);
    z-index: 0;
}
.wrap{
    position: relative;
}
.split-50 {
   display: flex;
   align-items: center;
   gap: 48px;
}
 
.split-col {
   flex: 1 1 50%;
   min-width: 0;
}
 
.split-img {
   position: relative;
   border-radius: 12px;
   overflow: hidden;
   line-height: 0;
}
 
.split-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   border-radius: 12px;
}
 
/* Stack on mobile: text first, image below */
@media (max-width: 768px) {
   .split-50 {
      flex-direction: column;
      gap: 28px;
   }
   .split-col {
      flex: 1 1 100%;
   }
   .split-img img {
      max-height: 320px;
   }
   .fcols a{
    font-size: 12px;
   }
}




:root{
    --vg-gold:#B08D3F;
    --vg-dark:#1f1f1f;
    --vg-light:#f8f7f3;
    --vg-border:#e6dfd2;
    --vg-text:#555;
}


/* ===========================
Homepage Credibility Strip
=========================== */

.vg-credibility{
    background:var(--vg-light);
    border-top:1px solid var(--vg-border);
    border-bottom:1px solid var(--vg-border);
    padding:55px 0;
}

.vg-credibility-inner{
    text-align:center;
}

.vg-tag{
    display:inline-block;
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--vg-gold);
    font-weight:600;
    margin-bottom:15px;
}

.vg-title{
    font-size:34px;
    color:var(--vg-dark);
    font-weight:700;
    margin-bottom:20px;
    line-height:1.3;
}

.vg-desc{
    max-width:850px;
    margin:auto;
    font-size:18px;
    color:var(--vg-text);
    line-height:1.8;
}

/* ===========================
About Support Section
=========================== */


/* ===========================
Footer Support Note
=========================== */

.vg-footer-note{
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.15);
    font-size:14px;
    line-height:1.8;
    color:#cfcfcf;
}

.vg-footer-note strong{
    color:#fff;
    font-weight:600;
}

/* ===========================
Responsive
=========================== */
.vg-support{
    padding:60px 0 0px;
}
@media(max-width:768px){

    .vg-title{
        font-size:28px;
    }

    .vg-heading{
        font-size:30px;
    }

    .vg-desc,
    .vg-support-box p{
        font-size:16px;
    }

    .vg-credibility,
    .vg-support{
        padding:60px 0;
    }

}

section.phero {
    background-image: url('https://verantglobal.com/assets/img/business-analyst-min.jpg');
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}
section.phero::before{
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgb(0 0 0) 0%, rgb(9 9 10 / 80%) 50%, rgba(63, 151, 255, .15) 100%);
    z-index: 0;
    content: '';
}
.bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgb(0 0 0) 0%, rgb(9 9 10 / 80%) 50%, rgba(63, 151, 255, .15) 100%);
    z-index: 0;
}
.wrap{
    position: relative;
}

.has-bg,
.hero,
.final,
.split-img-col {
  position: relative;
  overflow: hidden;
}

.bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

/* Content sits above the overlay */
.has-bg > .wrap,
.hero > .wrap,
.final > .wrap {
  position: relative;
  z-index: 1;
}

section.hero {
    background-image: url('https://verantglobal.com/assets/img/busy-women.jpg');
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    position: relative;
}
.bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgb(0 0 0) 0%, rgb(9 9 10 / 80%) 50%, rgba(63, 151, 255, .15) 100%);
    z-index: 0;
}
.wrap{
    position: relative;
}
.split-img-col {
  border-radius: 12px;
}
.s.wwd{
    background-image:url(https://verantglobal.com/assets/img/business-people-01.webp) !important;
    background-size: cover !important;
}
.s.wwd .eyebrow2,.s.wwd p.intro,.s.wwd h2.t{
  color:#FFF;
}
.split-col-inner {
  position: relative;
  z-index: 1;
  padding: 24px;
}

/* --- WHY US: subtle navy-tinted wash behind the numbered list --- */
.whyus-bg .bg-overlay {
      background-image: linear-gradient(rgb(247 249 252 / 0%), rgba(247, 249, 252, 0.93)), url(https://verantglobal.com/assets/img/relationship-management.jpg);
}

/* --- FINAL CTA: strong image, dark gradient for white CTA text --- */
.final-bg .bg-overlay {
  background-image:
    linear-gradient(135deg, rgba(10,25,47,0.90) 0%, rgba(10,25,47,0.75) 100%),
    url('https://YOUR-CDN/final-cta-handshake.jpg');
}

/* Responsive: stack split image column above text on mobile */
@media (max-width: 768px) {
  .split-img-col {
    margin-bottom: 20px;
  }
}
.s.alt.wwd{
    position:relative;
    overflow:hidden;
}

.bg-overlay-wwd{
    position:absolute;
    inset:0;
    z-index:0;
    background:linear-gradient(90deg, rgb(0 0 0) 0%, rgba(0, 0, 0, .92) 25%, rgb(0 0 0 / 0%) 45%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, .20) 80%, rgba(0, 0, 0, .05) 100%), 
     linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .45) 100%)
}
.compare-sec{position:relative;background:var(--soft);padding:108px 24px 116px}
.compare-sec .eyebrow2{
  display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:20px;
}
.compare-sec .eyebrow2::before{content:"";width:26px;height:1px;background:var(--acc)}
.compare-sec .t{
  font-family:'Fraunces',serif;font-weight:500;font-size:clamp(28px,3.6vw,40px);
  line-height:1.24;letter-spacing:-.01em;color:var(--navy);max-width:30ch;margin-bottom:48px;
}
.compare-sec .tbl-wrap{
  position:relative;overflow-x:auto;border-radius:14px;
  box-shadow:0 24px 56px -32px rgba(15,31,56,.28);-webkit-overflow-scrolling:touch;
}
.compare-sec table{width:100%;min-width:660px;border-collapse:separate;border-spacing:0;background:var(--bg);font-size:15px}
.compare-sec thead th{
  text-align:left;font-weight:600;font-size:13.5px;letter-spacing:-.005em;color:var(--mut);
  background:var(--bg);padding:22px 26px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.compare-sec thead th:first-child{color:var(--navy);width:26%}
.compare-sec thead th:nth-child(2){color:var(--mut)}
.compare-sec thead th:nth-child(3){
  color:var(--navy);background:linear-gradient(180deg,rgba(203,163,49,.12),rgba(203,163,49,.04));position:relative;
}
.compare-sec thead th:nth-child(3)::before{
  content:"Recommended";position:absolute;top:-1px;left:26px;transform:translateY(-100%);
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);
  background:var(--acc2);padding:5px 10px 4px;border-radius:6px 6px 0 0;
}
.compare-sec tbody td{padding:20px 26px;border-bottom:1px solid var(--line);color:var(--ink);line-height:1.5;vertical-align:top}
.compare-sec tbody td:first-child{font-weight:600;color:var(--navy);white-space:nowrap}
.compare-sec tbody td:nth-child(2){color:var(--mut)}
.compare-sec tbody td:nth-child(3){
  color:var(--ink);font-weight:500;background:linear-gradient(180deg,rgba(203,163,49,.07),rgba(203,163,49,.015));position:relative;
}
.compare-sec tbody td:nth-child(3)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc)}
.compare-sec tbody tr:last-child td{border-bottom:none}
.compare-sec tbody tr:hover td{background-color:rgba(47,111,176,.04)}
.compare-sec tbody tr:hover td:nth-child(3){background-color:rgba(203,163,49,.1)}
@media (max-width:640px){
  .compare-sec{padding:76px 20px 84px}
  .compare-sec thead th,.compare-sec tbody td{padding:16px 18px}
}

.zoho-gap-sec {
  position: relative;
  background: var(--bg);
  padding: 108px 24px 116px;
  overflow: hidden;
}
.zoho-gap-sec::before {
  content: "";
  position: absolute;
  top: 64px;
  right: 6%;
  width: 320px;
  height: 44px;
  background-image: repeating-linear-gradient(90deg, var(--line) 0, var(--line) 2px, transparent 2px, transparent 16px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 60%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 25%, #000 60%, transparent);
  opacity: 0.9;
  pointer-events: none;
}
@media (max-width: 900px) {
  .zoho-gap-sec::before {
    display: none;
  }
}
.zoho-gap-sec::after {
  content: "";
  position: absolute;
  top: 64px;
  right: 6%;
  width: 96px;
  height: 44px;
  background: linear-gradient(90deg, rgba(203, 163, 49, 0.18), rgba(203, 163, 49, 0.02));
  border-right: 2px solid var(--acc);
  pointer-events: none;
}
@media (max-width: 900px) {
  .zoho-gap-sec::after {
    display: none;
  }
}
.zoho-gap-sec .wrap {
  position: relative;
  z-index: 1;
}
.zoho-gap-sec .eyebrow2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 20px;
}
.zoho-gap-sec .eyebrow2::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--acc);
}
.zoho-gap-sec .t {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--navy);
  max-width: 20ch;
  margin-bottom: 22px;
}
.zoho-gap-sec .intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--mut);
  max-width: 62ch;
  margin-bottom: 52px;
}
.zoho-gap-sec .plist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.zoho-gap-sec .pitem {
  position: relative;
  background: var(--bg);
  padding: 30px 32px 28px 68px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--mut);
  counter-increment: gap-item;
  transition: background 0.2s ease;
}
.zoho-gap-sec .pitem:hover {
  background: var(--soft);
}
.zoho-gap-sec .pitem::before {
  content: counter(gap-item, decimal-leading-zero);
  position: absolute;
  left: 28px;
  top: 30px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 15px;
  font-weight: 600;
  color: var(--acc);
}
.zoho-gap-sec .pitem::after {
  content: "";
  position: absolute;
  left: 28px;
  top: 54px;
  bottom: 28px;
  width: 1px;
  background: var(--line);
}
.zoho-gap-sec .pitem b {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.zoho-gap-sec .plist {
  counter-reset: gap-item;
}
@media (max-width: 720px) {
  .zoho-gap-sec {
    padding: 76px 20px 84px;
  }
  .zoho-gap-sec .plist {
    grid-template-columns: 1fr;
  }
  .zoho-gap-sec .pitem {
    padding: 26px 24px 24px 60px;
  }
}/*# sourceMappingURL=custom.css.map */
.steps-sec {
  position: relative;
  background: var(--lt);
  padding: 108px 24px 116px;
}
 
.steps-sec .wrap {
  max-width: 1080px;
  margin: 0 auto;
}
 
.steps-sec .eyebrow2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 20px;
}
 
.steps-sec .eyebrow2::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--acc);
}
 
.steps-sec .t {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--navy);
  max-width: 20ch;
  margin-bottom: 64px;
}
 
.steps-sec .steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
 
/* connecting line through step numbers — solid up to "Run", dashed after,
   since assessment/stabilize/run are finite but optimize is ongoing */
.steps-sec .steps::before {
  content: "";
  position: absolute;
  top: 23px;
  left: calc(12.5% + 4px);
  right: calc(37.5% + 4px);
  height: 1px;
  background: var(--acc);
}
 
.steps-sec .steps::after {
  content: "";
  position: absolute;
  top: 23px;
  left: calc(62.5% + 4px);
  right: calc(12.5% + 4px);
  height: 1px;
  background-image: linear-gradient(90deg, var(--acc) 0 6px, transparent 6px 12px);
  background-size: 12px 1px;
  background-repeat: repeat-x;
}
 
.steps-sec .step {
  position: relative;
  text-align: left;
}
 
.steps-sec .num {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--acc2);
  background: var(--navy);
  border-radius: 50%;
  margin-bottom: 22px;
  box-shadow: 0 0 0 6px var(--lt);
}
 
.steps-sec h4 {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -.005em;
  margin-bottom: 10px;
}
 
.steps-sec p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--mut);
  max-width: 30ch;
}
 
/* last step reads as the ongoing state — tag it as such */
.steps-sec .step:last-child .num {
  background: var(--acc);
  color: var(--navy);
}
 
.steps-sec .step:last-child::after {
  content: "Ongoing";
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
}
 
@media (max-width: 860px) {
  .steps-sec .steps {
    grid-template-columns: 1fr 1fr;
    row-gap: 44px;
  }
 
  .steps-sec .steps::before,
  .steps-sec .steps::after {
    display: none;
  }
}
 
@media (max-width: 640px) {
  .steps-sec {
    padding: 76px 20px 84px;
  }
 
  .steps-sec .t {
    margin-bottom: 48px;
  }
}

/* Theme tokens — already defined globally, referenced here for context
:root{--navy:#0f1f38;--navy2:#1a3252;--blue:#2f6fb0;--blue2:#3f86cf;--acc:#cba331;--acc2:#e3c258;
--ink:#1b2330;--mut:#5d6b7e;--line:#e2e8f0;--lt:#f1f6fb;--bg:#fff;--soft:#f6f9fc;--grn:#2e7d32;--grnbg:#e6f4e6;--redln:#d98a8a} */
 
.usecases-sec {
  position: relative;
  background: var(--bg);
  padding: 108px 24px 116px;
}

 
.usecases-sec .eyebrow2::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--acc);
}
 
.usecases-sec .t {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--navy);
  max-width: 20ch;
  margin-bottom: 44px;
}
 
/* --- use-case list: two columns desktop, custom gold tick marker --- */
.usecases-sec .list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 40px;
  max-width: 760px;
  margin: 0 0 40px;
  padding: 0;
}
 
.usecases-sec .list li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
}
 
.usecases-sec .list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--lt);
  border: 1px solid var(--line);
}
 
.usecases-sec .list li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--acc);
  border-bottom: 2px solid var(--acc);
  transform: rotate(-45deg);
}
 
/* --- solbox: the featured takeaway, distinct navy card --- */
.usecases-sec .solbox {
  position: relative;
  margin-top: 40px !important;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 48px -28px rgba(15, 31, 56, .45);
  padding: 30px;
}
 
.usecases-sec .solbox::before {
  content: "↻";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 76px;
  line-height: 1;
  color: rgba(255, 255, 255, .06);
  font-family: 'Inter', sans-serif;
  pointer-events: none;
}
 
.usecases-sec .solbox::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--acc);
}
 
.usecases-sec .solbox h3 {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acc2);
  margin-bottom: 10px;
}
 
.usecases-sec .solbox p {
  font-size: 16.5px;
  line-height: 1.6;
  color: #eef2f8;
  opacity: 1 !important;
  max-width: 52ch;
  position: relative;
  z-index: 1;
}
 
/* --- responsive --- */
@media (max-width: 720px) {
  .usecases-sec {
    padding: 76px 20px 84px;
  }
 
  .usecases-sec .list {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 14px;
  }
 
  .usecases-sec .solbox {
    max-width: 100% !important;
    padding: 26px 24px;
  }
 
  .usecases-sec .solbox::before {
    font-size: 54px;
    right: 12px;
  }
 
  .usecases-sec .solbox p {
    font-size: 15.5px;
  }
}

.markets-sec {
  position: relative;
  background: var(--lt);
  padding: 104px 24px 64px;
  overflow: hidden;
  text-align: center;
}
 
/* faint abstract globe — longitude arcs, suggests "global reach" without a literal map */
.markets-sec::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 640px;
  height: 640px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at center, transparent 0 0),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 79px,
      var(--line) 79px,
      var(--line) 80px
    );
  -webkit-mask: radial-gradient(circle, #000 69%, transparent 70%);
  mask: radial-gradient(circle, #000 69%, transparent 70%);
  opacity: .55;
  pointer-events: none;
}
 
.markets-sec::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 420px;
  height: 640px;
  transform: translate(-50%, -50%);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 50%;
  opacity: .55;
  pointer-events: none;
}

 
.markets-sec .eyebrow2::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--acc);
}
 
 
/* markets rendered as stops on a route, connected by a dashed path */
.markets-sec .inds {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: center;
  gap: 0;
  margin-bottom: 8px;
  margin-top: 60px;
}
 
.markets-sec .ind {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 22px;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 24px -18px rgba(15, 31, 56, .3);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
 
.markets-sec .ind::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 3px rgba(203, 163, 49, .18);
}
 
.markets-sec .ind:hover {
  transform: translateY(-3px);
  border-color: var(--acc);
  box-shadow: 0 14px 28px -16px rgba(15, 31, 56, .4);
}
 
/* dashed connector between consecutive pills, hidden when they wrap to new lines */
.markets-sec .ind:not(:last-child) {
  margin-right: 34px;
}
 
.markets-sec .ind:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 34px;
  height: 0;
  border-top: 1px dashed var(--blue2);
  opacity: .55;
}
 
.markets-sec .body {
  margin-top: 44px !important;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 12.5px !important;
  line-height: 1.6;
  color: var(--mut) !important;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
.markets-sec h2.t{
  text-align: left;
}
.markets-sec .eyebrow2{
  text-align: left;
}

@media (max-width: 720px) {
  .markets-sec {
    padding: 76px 20px 52px;
  }
 
  .markets-sec::before,
  .markets-sec::after {
    width: 460px;
    height: 460px;
  }
 
  .markets-sec .inds {
    row-gap: 16px;
  }
 
  .markets-sec .ind:not(:last-child) {
    margin-right: 0;
  }
 
  .markets-sec .ind:not(:last-child)::after {
    display: none;
  }
 
  .markets-sec .ind {
    padding: 9px 18px;
    font-size: 13.5px;
  }
}
/* Theme tokens — already defined globally, referenced here for context
:root{--navy:#0f1f38;--navy2:#1a3252;--blue:#2f6fb0;--blue2:#3f86cf;--acc:#cba331;--acc2:#e3c258;
--ink:#1b2330;--mut:#5d6b7e;--line:#e2e8f0;--lt:#f1f6fb;--bg:#fff;--soft:#f6f9fc;--grn:#2e7d32;--grnbg:#e6f4e6;--redln:#d98a8a} */

.vg-support {
  position: relative;
  background: var(--soft);
  padding: 100px 24px;
}



.vg-support .vg-support-box {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 56px 64px;
  overflow: hidden;
  box-shadow: 0 28px 60px -36px rgba(15, 31, 56, .3);
}

.vg-support .vg-support-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--acc) 50%, var(--navy) 100%);
}

/* decorative overlapping-circles mark — two allied but distinct entities */
.vg-support .vg-support-box::after {
  content: "";
  position: absolute;
  top: 44px;
  right: 56px;
  width: 88px;
  height: 56px;
  background-image:
    radial-gradient(circle 27px at 34px 28px, transparent 26px, var(--line) 27px, var(--line) 28px, transparent 29px),
    radial-gradient(circle 27px at 54px 28px, transparent 26px, var(--line) 27px, var(--line) 28px, transparent 29px);
  opacity: .8;
  pointer-events: none;
}

.vg-support .vg-heading {
  position: relative;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--navy);
  max-width: 18ch;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.vg-support p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--mut);
  max-width: 62ch;
}

.vg-support p + p {
  margin-top: 20px;
}

.vg-support .vg-highlight {
  color: var(--navy);
  font-weight: 600;
  padding: 0 1px;
}

@media (max-width: 720px) {
  .vg-support {
    padding: 72px 20px;
  }

  .vg-support .vg-support-box {
    padding: 40px 28px;
  }

  .vg-support .vg-support-box::after {
    top: 32px;
    right: 28px;
    width: 60px;
    height: 40px;
    background-image:
      radial-gradient(circle 18px at 23px 20px, transparent 17px, var(--line) 18px, var(--line) 19px, transparent 20px),
      radial-gradient(circle 18px at 37px 20px, transparent 17px, var(--line) 18px, var(--line) 19px, transparent 20px);
  }

  .vg-support .vg-heading {
    font-size: 22px;
    max-width: none;
    padding-right: 60px;
  }

  .vg-support p {
    font-size: 15px;
    line-height: 1.7;
  }
}

/* Theme tokens — already defined globally, referenced here for context
:root{--navy:#0f1f38;--navy2:#1a3252;--blue:#2f6fb0;--blue2:#3f86cf;--acc:#cba331;--acc2:#e3c258;
--ink:#1b2330;--mut:#5d6b7e;--line:#e2e8f0;--lt:#f1f6fb;--bg:#fff;--soft:#f6f9fc;--grn:#2e7d32;--grnbg:#e6f4e6;--redln:#d98a8a} */

.model-sec {
  position: relative;
  background: var(--bg);
  padding: 112px 24px;
}

.model-sec .wrap.split {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 72px;
  align-items: start;
}

/* --- left column --- */
.model-sec .eyebrow2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 20px;
}

.model-sec .eyebrow2::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--acc);
}

/* relay mark: two nodes joined by a dashed path — the handoff at the center of the model */
.model-sec .wrap.split > div:first-child::before {
  content: "";
  display: block;
  width: 56px;
  height: 8px;
  margin-bottom: 24px;
  background-image:
    radial-gradient(circle 3.5px at 3.5px 4px, var(--navy) 3.5px, transparent 3.6px),
    radial-gradient(circle 3.5px at 52.5px 4px, var(--acc) 3.5px, transparent 3.6px),
    linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: left center, right center, center;
  background-size: auto, auto, 12px 1px;
}

.model-sec .t {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--navy);
  margin-bottom: 24px;
}

.model-sec .intro {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: 16px;
}

.model-sec .body {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--mut);
}

/* --- right column: belief manifesto card --- */
.model-sec .solbox {
  position: relative;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy2) 100%);
  border-radius: 16px;
  padding: 40px 40px 36px;
  overflow: hidden;
  box-shadow: 0 32px 64px -32px rgba(15, 31, 56, .5);
}

.model-sec .solbox::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(203, 163, 49, .22), transparent 70%);
  pointer-events: none;
}

.model-sec .solbox h3 {
  position: relative;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acc2);
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.model-sec .solbox ul {
  position: relative;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.model-sec .solbox li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.5;
  color: #e7ecf4;
  font-weight: 500;
}

.model-sec .solbox li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid var(--acc);
  background: rgba(203, 163, 49, .12);
}

.model-sec .solbox li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 6.5px;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--acc2);
  border-bottom: 2px solid var(--acc2);
  transform: rotate(-45deg);
}

@media (max-width: 900px) {
  .model-sec .wrap.split {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 640px) {
  .model-sec {
    padding: 76px 20px;
  }

  .model-sec .solbox {
    padding: 32px 28px 30px;
  }
}

/* =========================================================
   Example Use Cases
   ========================================================= */

.usecases-sec {
   position: relative;
   overflow: hidden;
   background: var(--soft);
   padding: 100px 0;
}

.usecases-sec::before {
   content: "";
   position: absolute;
   width: 420px;
   height: 420px;
   border-radius: 50%;
   background: rgba(47,111,176,.06);
   top: -220px;
   right: -120px;
   pointer-events: none;
}

.usecases-head {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 60px;
   margin-bottom: 50px;
}

.usecases-head .t {
   margin: 10px 0 0;
   max-width: 650px;
   line-height: 1.08;
}

.usecases-head .t span {
   color: var(--blue);
}

.usecases-intro {
   max-width: 430px;
   margin: 0 0 5px;
   color: var(--mut);
   font-size: 16px;
   line-height: 1.7;
}


/* -------------------------
   Cards
   ------------------------- */

.usecases-grid {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 18px;
}

.usecase-card {
   position: relative;
   min-height: 270px;
   padding: 32px;
   background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 14px;
   overflow: hidden;
   transition:
      transform .25s ease,
      box-shadow .25s ease,
      border-color .25s ease;
}

.usecase-card::after {
   content: "";
   position: absolute;
   width: 120px;
   height: 120px;
   border-radius: 50%;
   background: rgba(47,111,176,.045);
   right: -45px;
   bottom: -55px;
   transition: transform .3s ease;
}

.usecase-card:hover {
   transform: translateY(-5px);
   border-color: rgba(47,111,176,.35);
   box-shadow: 0 18px 45px rgba(15,31,56,.09);
}

.usecase-card:hover::after {
   transform: scale(1.35);
}

.usecase-number {
   position: absolute;
   top: 27px;
   right: 30px;
   color: #aab5c3;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .08em;
}

.usecase-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   margin-bottom: 32px;
   border-radius: 10px;
   background: var(--lt);
   color: var(--blue);
   font-size: 20px;
   font-weight: 600;
}

.usecase-card h3 {
   position: relative;
   z-index: 1;
   margin: 0 0 12px;
   color: var(--navy);
   font-size: 21px;
   line-height: 1.3;
}

.usecase-card p {
   position: relative;
   z-index: 1;
   max-width: 480px;
   margin: 0;
   color: var(--mut);
   font-size: 15px;
   line-height: 1.7;
}


/* -------------------------
   Recurring box
   ------------------------- */

.recurring-box {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 40px;
   margin-top: 20px;
   padding: 38px 42px;
   border-radius: 14px;
   background: var(--navy);
   overflow: hidden;
}

.recurring-box::before {
   content: "";
   position: absolute;
   width: 300px;
   height: 300px;
   border: 1px solid rgba(227,194,88,.18);
   border-radius: 50%;
   right: -110px;
   top: -150px;
}

.recurring-box::after {
   content: "";
   position: absolute;
   width: 170px;
   height: 170px;
   border: 1px solid rgba(255,255,255,.07);
   border-radius: 50%;
   right: -25px;
   bottom: -100px;
}

.recurring-content {
   position: relative;
   z-index: 2;
   max-width: 720px;
}

.recurring-label {
   margin-bottom: 10px;
   color: var(--acc2);
   font-size: 11px;
   font-weight: 800;
   letter-spacing: .14em;
}

.recurring-box h3 {
   margin: 0 0 10px;
   color: #fff;
   font-size: 25px;
   line-height: 1.25;
}

.recurring-box p {
   max-width: 680px;
   margin: 0;
   color: rgba(255,255,255,.78);
   font-size: 15px;
   line-height: 1.7;
}

.recurring-mark {
   position: relative;
   z-index: 2;
   display: flex;
   align-items: center;
   gap: 14px;
   flex-shrink: 0;
   padding: 15px 18px;
   border: 1px solid rgba(227,194,88,.3);
   border-radius: 10px;
   background: rgba(255,255,255,.04);
}

.recurring-mark span {
   color: var(--acc2);
   font-size: 32px;
   line-height: 1;
}

.recurring-mark small {
   color: rgba(255,255,255,.7);
   font-size: 11px;
   font-weight: 700;
   line-height: 1.35;
   letter-spacing: .06em;
   text-transform: uppercase;
}


/* -------------------------
   Responsive
   ------------------------- */

@media (max-width: 800px) {

   .usecases-sec {
      padding: 70px 0;
   }

   .usecases-head {
      display: block;
      margin-bottom: 35px;
   }

   .usecases-intro {
      margin-top: 20px;
   }

   .usecases-grid {
      grid-template-columns: 1fr;
   }

   .usecase-card {
      min-height: auto;
      padding: 28px;
   }

   .recurring-box {
      align-items: flex-start;
      flex-direction: column;
      padding: 30px;
   }

}

@media (max-width: 480px) {

   .usecases-sec {
      padding: 55px 0;
   }

   .usecases-grid {
      gap: 14px;
   }

   .usecase-card {
      padding: 24px;
   }

   .usecase-icon {
      margin-bottom: 25px;
   }

   .usecase-card h3 {
      font-size: 19px;
   }

   .recurring-box {
      padding: 26px 24px;
   }

   .recurring-box h3 {
      font-size: 22px;
   }

}