/* =========================================================
   VAULTORNET — SHARED STYLESHEET
   ========================================================= */

:root{
  --color-dark:#0f1a21;
  --color-text:#0f1a15;
  --color-accent:#064e3b;
  --color-accent-hover:#377162;
  --color-accent-light:#c3e2d8;
  --color-cta:#10b981;
  --color-cta-hover:#0c9467;
  --color-cta-text:#000000;
  --color-bg-light:#ebecec;
  --color-bg-white:#ffffff;
  --color-icon-bg:#c3e2d8;
  --color-icon:#085c40;
  --color-border:rgba(15,26,21,0.1);
  --font-primary:'Manrope', sans-serif;
  --font-secondary:'Manrope', sans-serif;
  --ease:cubic-bezier(.25,.8,.25,1);
}

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

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-secondary);
  font-size:16px;
  line-height:1.6em;
  color:var(--color-text);
  background:var(--color-bg-white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}

h1,h2,h3,h4{
  font-family:var(--font-primary);
  font-weight:500;
  line-height:1.08em;
  color:var(--color-text);
}

h1{font-size:clamp(32px, 6vw, 72px);line-height:1.08em;}
h2{font-size:clamp(26px, 4.2vw, 52px);line-height:1.15em;}
h3{font-size:clamp(20px, 3vw, 34px);line-height:1.25em;}
h4{font-size:clamp(18px, 2.2vw, 22px);line-height:1.35em;}

.em-accent{
  color:var(--color-accent);
  font-style:italic;
  font-weight:700;
}

.container{
  max-width:1224px;
  margin:0 auto;
  padding:0 16px;
}

.container-narrow{
  max-width:860px;
  margin:0 auto;
  padding:0 16px;
}

.eyebrow{
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--color-accent);
  font-weight:600;
  display:inline-block;
}

.body-small{
  font-size:13px;
  line-height:1.4em;
}

.section{
  padding:96px 0;
}

.section-head{
  text-align:center;
  max-width:700px;
  margin:0 auto 56px;
}
.section-head.left{
  text-align:left;
  margin:0 0 56px;
}
.section-head .eyebrow{margin-bottom:16px;}
.section-head h2{margin-bottom:20px;}
.section-head p{color:rgba(15,26,21,0.75);}

/* ---------- SCROLL REVEAL ---------- */
.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  will-change:opacity, transform;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.reveal-fade{
  opacity:0;
  transition:opacity 1s var(--ease);
}
.reveal-fade.in-view{opacity:1;}
.reveal-scale{
  opacity:0;
  transform:scale(.92);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-scale.in-view{opacity:1;transform:scale(1);}
.reveal-left{
  opacity:0;
  transform:translateX(-40px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-left.in-view{opacity:1;transform:translateX(0);}
.reveal-right{
  opacity:0;
  transform:translateX(40px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-right.in-view{opacity:1;transform:translateX(0);}

.d1{transition-delay:.08s;}
.d2{transition-delay:.16s;}
.d3{transition-delay:.24s;}
.d4{transition-delay:.32s;}
.d5{transition-delay:.4s;}

/* ---------- HEADER / NAV ---------- */
header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  padding:22px 16px;
  border-bottom:1px solid transparent;
  transition:box-shadow .3s ease, border-color .3s ease, padding .3s ease;
}
header.scrolled{
  box-shadow:0 4px 24px rgba(0,0,0,0.06);
  border-color:var(--color-border);
  padding:14px 16px;
}
.header-inner{
  max-width:1224px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.logo img{height:60px;width:auto;transition:transform .3s ease;}
.logo:hover img{transform:scale(1.04);}

nav ul{
  display:flex;
  align-items:center;
  gap:36px;
}
nav a{
  position:relative;
  font-size:15px;
  color:#000000;
  font-weight:500;
  white-space:nowrap;
  padding:4px 0;
}
nav a::after{
  content:'';
  position:absolute;
  left:50%;
  right:50%;
  bottom:-2px;
  height:2px;
  background:var(--color-accent);
  transition:left .28s var(--ease), right .28s var(--ease);
}
nav a:hover::after,
nav a.active::after{
  left:0;
  right:0;
}
nav a.active{font-weight:700;}
nav a.nav-cta{
  background:var(--color-accent);
  color:#fff;
  padding:12px 22px;
  border-radius:8px;
  transition:background .25s ease, transform .25s ease;
}
nav a.nav-cta::after{display:none;}
nav a.nav-cta:hover{
  background:var(--color-accent-hover);
  transform:translateY(-2px);
}

.burger{display:none;background:none;border:none;cursor:pointer;width:28px;height:20px;position:relative;z-index:110;}
.burger span{
  display:block;position:absolute;height:2px;width:100%;background:#0f1a15;left:0;
  transition:transform .3s ease, opacity .3s ease, top .3s ease;
}
.burger span:nth-child(1){top:0;}
.burger span:nth-child(2){top:9px;}
.burger span:nth-child(3){top:18px;}
.burger.open span:nth-child(1){top:9px;transform:rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){top:9px;transform:rotate(-45deg);}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:17px 28px;
  font-size:15px;
  font-weight:600;
  border-radius:8px;
  border:none;
  cursor:pointer;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--color-accent);
  color:#ffffff;
}
.btn-primary:hover{
  background:var(--color-accent-hover);
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(6,78,59,0.28);
}
.btn-outline{
  background:transparent;
  color:var(--color-accent);
  border:1.5px solid var(--color-accent);
}
.btn-outline:hover{
  background:var(--color-accent);
  color:#fff;
  transform:translateY(-3px);
}
.btn-cta{
  background:var(--color-cta);
  color:var(--color-cta-text);
}
.btn-cta:hover{
  background:var(--color-cta-hover);
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(16,185,129,0.3);
}
.btn-white{
  background:#ffffff;
  color:var(--color-accent);
}
.btn-white:hover{
  background:var(--color-bg-light);
  transform:translateY(-3px);
}
.btn svg{width:16px;height:16px;transition:transform .25s ease;}
.btn:hover svg{transform:translateX(3px);}

/* ---------- PAGE HERO (subpages) ---------- */
.page-hero{
  background:linear-gradient(180deg,#ffffff,#c9dcd6 60%,#ebecec);
  padding:160px 0 96px;
  text-align:center;
}
.page-hero .breadcrumb{
  font-size:13px;
  color:rgba(15,26,21,0.6);
  margin-bottom:24px;
  letter-spacing:0.04em;
}
.page-hero .breadcrumb a{color:var(--color-accent);font-weight:600;}
.page-hero h1{max-width:820px;margin:0 auto 24px;font-size:clamp(28px, 5.2vw, 56px);}
.page-hero p{max-width:640px;margin:0 auto;color:rgba(15,26,21,0.75);font-size:clamp(15px, 2vw, 18px);}

/* ---------- HOME HERO ---------- */
.hero{
  background:linear-gradient(180deg,#ffffff,#8eafa6,#ebecec);
  padding:60px 0 100px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  top:-200px;
  left:50%;
  transform:translateX(-50%);
  width:900px;
  height:900px;
  background:radial-gradient(circle, rgba(255,255,255,0.5), transparent 70%);
  pointer-events:none;
}
.hero .eyebrow{margin-bottom:20px;}
.hero h1{max-width:900px;margin:0 auto 34px;position:relative;}
.hero p{max-width:620px;margin:0 auto 40px;font-size:17px;position:relative;}
.hero-buttons{
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
  position:relative;
}
.hero-badges{
  display:flex;
  gap:32px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:64px;
  opacity:0.75;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  position:relative;
}

/* ---------- PROOF / STATS ---------- */
.proof{
  background:var(--color-bg-light);
  padding:80px 0;
  text-align:center;
}
.proof h2{margin-bottom:8px;}
.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  max-width:1064px;
  margin:48px auto 0;
}
.stat{
  padding:36px 28px;
  border-radius:16px;
  background:#ffffff;
  border:1px solid var(--color-border);
  box-shadow:0 10px 28px rgba(15,26,21,0.06);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.stat:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(15,26,21,0.1);
  border-color:var(--color-cta);
}
.stat-icon{
  width:48px;height:48px;
  margin:0 auto 16px;
  color:var(--color-icon);
  transition:transform .35s ease;
}
.stat:hover .stat-icon{transform:scale(1.15) rotate(-6deg);}
.stat h2{font-size:52px;margin-bottom:8px;}
.stat p{color:var(--color-text);}

/* ---------- ABOUT ---------- */
.about{background:#ffffff;}
.about-inner{
  display:grid;
  grid-template-columns:45% 55%;
  gap:56px;
  align-items:center;
}
.about-text .eyebrow{margin-bottom:16px;}
.about-text h2{margin-bottom:22px;}
.about-text p{margin-bottom:20px;max-width:508px;color:rgba(15,26,21,0.85);}
.about-text .btn{margin-top:16px;}
.about-image{
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 45px rgba(0,0,0,0.15);
  position:relative;
}
.about-image img{
  width:100%;
  height:560px;
  object-fit:cover;
  transition:transform .5s var(--ease);
}
.about-image:hover img{transform:scale(1.06);}

/* ---------- PROCESS / METHODOLOGY ---------- */
.process{background:var(--color-bg-light);}
.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  counter-reset:step;
  position:relative;
}
.process-step{
  background:#ffffff;
  border-radius:16px;
  padding:36px 28px;
  position:relative;
  transition:transform .35s ease, box-shadow .35s ease;
  border:1px solid var(--color-border);
}
.process-step:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(6,78,59,0.12);
}
.process-num{
  counter-increment:step;
  font-family:var(--font-primary);
  font-size:14px;
  font-weight:700;
  color:var(--color-cta-hover);
  background:var(--color-icon-bg);
  width:32px;height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
}
.process-num::before{content:counter(step, decimal-leading-zero);}
.process-step h4{margin-bottom:12px;}
.process-step p{font-size:14px;color:rgba(15,26,21,0.75);}

/* ---------- SERVICES OVERVIEW / GRID ---------- */
.services{background:#ffffff;}
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.services-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.service-card{
  background:var(--color-bg-light);
  border-radius:16px;
  padding:44px 36px;
  box-shadow:0 20px 25px -5px rgba(0,0,0,0.06), 0 8px 10px -6px rgba(0,0,0,0.05);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s ease;
  position:relative;
  overflow:hidden;
}
.service-card:hover{
  transform:translateY(-10px);
  box-shadow:0 30px 50px -12px rgba(6,78,59,0.22);
  background:#ffffff;
}
.service-icon{
  width:56px;height:56px;
  border-radius:12px;
  background:var(--color-icon-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-accent);
  margin-bottom:36px;
  transition:transform .4s ease, background .3s ease;
}
.service-card:hover .service-icon{
  transform:rotate(-8deg) scale(1.08);
  background:var(--color-accent);
  color:#fff;
}
.service-card .body-small{
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:12px;
  display:block;
  color:var(--color-accent);
  font-weight:600;
}
.service-card h3{margin-bottom:16px;font-size:26px;}
.service-card p{color:rgba(15,26,21,0.75);font-size:15px;}
.service-card .learn-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:20px;
  font-size:14px;
  font-weight:600;
  color:var(--color-accent);
}
.service-card .learn-more svg{width:14px;height:14px;transition:transform .25s ease;}
.service-card:hover .learn-more svg{transform:translateX(4px);}

/* ---------- INDUSTRIES ---------- */
.industries{background:var(--color-bg-light);}
.industries-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.industry-card{
  background:#ffffff;
  border-radius:14px;
  padding:32px 24px;
  text-align:center;
  transition:transform .3s ease, box-shadow .3s ease;
  border:1px solid var(--color-border);
}
.industry-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 32px rgba(0,0,0,0.08);
  border-color:transparent;
}
.industry-icon{
  width:44px;height:44px;
  margin:0 auto 16px;
  color:var(--color-icon);
  transition:transform .3s ease;
}
.industry-card:hover .industry-icon{transform:scale(1.15);}
.industry-card h4{font-size:17px;}

/* ---------- TESTIMONIALS ---------- */
.testimonials{background:#ffffff;}
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.testimonial-card{
  background:var(--color-bg-light);
  border-radius:16px;
  padding:36px 32px;
  box-shadow:0 20px 25px -5px rgba(0,0,0,0.06), 0 8px 10px -6px rgba(0,0,0,0.05);
  transition:transform .3s ease, box-shadow .3s ease;
}
.testimonial-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(0,0,0,0.08);
}
.quote-mark{
  font-family:Georgia, serif;
  font-size:52px;
  color:var(--color-cta);
  line-height:1;
  margin-bottom:8px;
  display:block;
}
.testimonial-card p.quote{
  font-size:15px;
  color:rgba(15,26,21,0.85);
  margin-bottom:24px;
}
.testimonial-author{
  display:flex;
  align-items:center;
  gap:12px;
}
.testimonial-avatar{
  width:44px;height:44px;
  border-radius:50%;
  background:var(--color-accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:15px;
  flex-shrink:0;
}
.testimonial-author h4{font-size:15px;margin-bottom:2px;}
.testimonial-author span{font-size:13px;color:rgba(15,26,21,0.6);}

/* ---------- FAQ ---------- */
.faq{background:var(--color-bg-light);}
.faq-list{max-width:820px;margin:0 auto;}
.faq-item{
  background:#ffffff;
  border-radius:12px;
  margin-bottom:14px;
  overflow:hidden;
  border:1px solid var(--color-border);
}
.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 26px;
  background:none;
  border:none;
  text-align:left;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  color:var(--color-text);
}
.faq-question .plus{
  width:20px;height:20px;
  position:relative;
  flex-shrink:0;
  margin-left:20px;
}
.faq-question .plus::before,
.faq-question .plus::after{
  content:'';
  position:absolute;
  background:var(--color-accent);
  transition:transform .3s ease;
}
.faq-question .plus::before{
  width:100%;height:2px;top:9px;left:0;
}
.faq-question .plus::after{
  width:2px;height:100%;left:9px;top:0;
}
.faq-item.open .plus::after{transform:rotate(90deg);opacity:0;}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s var(--ease);
}
.faq-answer p{
  padding:0 26px 24px;
  color:rgba(15,26,21,0.75);
  font-size:15px;
}

/* ---------- FRAMEWORKS / STANDARDS LIST (compliance page) ---------- */
.frameworks-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.framework-card{
  display:flex;
  gap:20px;
  padding:28px;
  background:var(--color-bg-light);
  border-radius:14px;
  box-shadow:0 20px 25px -5px rgba(0,0,0,0.06), 0 8px 10px -6px rgba(0,0,0,0.05);
  transition:transform .3s ease, box-shadow .3s ease;
}
.framework-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 32px rgba(0,0,0,0.08);
}
.framework-icon{
  width:44px;height:44px;
  border-radius:10px;
  background:var(--color-accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.framework-card h4{margin-bottom:8px;}
.framework-card p{font-size:14px;color:rgba(15,26,21,0.75);}

/* ---------- ARTICLE / INSIGHTS GRID ---------- */
.article-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.article-card{
  background:#ffffff;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--color-border);
  transition:transform .35s ease, box-shadow .35s ease;
}
.article-card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 44px rgba(0,0,0,0.1);
}
.article-image{
  height:250px;
  background:linear-gradient(135deg, var(--color-accent), #1a7a5e);
  position:relative;
  overflow:hidden;
}
.article-image svg{
  position:absolute;
  width:80px;height:80px;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  color:rgba(255,255,255,0.35);
  transition:transform .4s ease;
}
.article-card:hover .article-image svg{transform:translate(-50%,-50%) scale(1.15) rotate(8deg);}
.article-body{padding:28px;}
.article-tag{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--color-cta-hover);
  font-weight:700;
  margin-bottom:12px;
  display:block;
}
.article-body h4{margin-bottom:12px;font-size:19px;}
.article-body p{font-size:14px;color:rgba(15,26,21,0.7);margin-bottom:18px;}
.article-meta{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:rgba(15,26,21,0.5);
  border-top:1px solid var(--color-border);
  padding-top:16px;
}

/* ---------- NEWSLETTER ---------- */
.newsletter{
  background:var(--color-accent);
  border-radius:24px;
  padding:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.newsletter h3{color:#fff;margin-bottom:8px;}
.newsletter p{color:rgba(255,255,255,0.8);}
.newsletter-form{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.newsletter-form input{
  padding:15px 20px;
  border-radius:8px;
  border:none;
  font-size:15px;
  font-family:inherit;
  min-width:260px;
}
.newsletter-form input:focus{outline:2px solid var(--color-cta);}

/* ---------- CONTACT PAGE ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:start;
}
.contact-form{
  background:var(--color-bg-light);
  border-radius:20px;
  padding:44px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:20px;
}
.form-group{margin-bottom:20px;}
.form-group label{
  display:block;
  font-size:14px;
  font-weight:600;
  margin-bottom:8px;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:14px 16px;
  border-radius:8px;
  border:1px solid rgba(15,26,21,0.15);
  font-family:inherit;
  font-size:15px;
  background:#ffffff;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--color-accent);
  box-shadow:0 0 0 3px rgba(6,78,59,0.12);
}
.form-group textarea{resize:vertical;min-height:130px;}
.form-success{
  display:none;
  background:var(--color-accent-light);
  color:var(--color-accent);
  border-radius:10px;
  padding:16px 20px;
  font-weight:600;
  margin-top:16px;
}
.form-success.show{display:block;}

.contact-info-card{
  background:var(--color-accent);
  border-radius:20px;
  padding:44px;
  color:#fff;
  margin-bottom:24px;
}
.contact-info-card h3{color:#fff;margin-bottom:24px;}
.contact-info-row{
  display:flex;
  gap:16px;
  margin-bottom:24px;
  align-items:flex-start;
}
.contact-info-row:last-child{margin-bottom:0;}
.contact-info-row .icon{
  width:22px;height:22px;
  flex-shrink:0;
  margin-top:2px;
  color:var(--color-cta);
}
.contact-info-row h4{color:#fff;font-size:15px;margin-bottom:4px;}
.contact-info-row p, .contact-info-row a{color:rgba(255,255,255,0.8);font-size:14px;}

.office-card{
  background:var(--color-bg-light);
  border-radius:20px;
  padding:36px;
}
.office-card h4{margin-bottom:10px;}
.office-card p{color:rgba(15,26,21,0.75);font-size:14px;}

/* ---------- CTA ---------- */
.cta{
  background:var(--color-accent);
  padding:104px 0 100px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta::before{
  content:'';
  position:absolute;
  bottom:-150px;
  right:-100px;
  width:500px;height:500px;
  border-radius:50%;
  background:rgba(255,255,255,0.04);
}
.cta h2{color:#ffffff;max-width:700px;margin:0 auto 24px;position:relative;}
.cta p{color:rgba(255,255,255,0.85);max-width:700px;margin:0 auto 40px;position:relative;}
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;}

/* ---------- FOOTER ---------- */
footer{
  background:var(--color-bg-light);
  padding:64px 0 40px;
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:40px;
}
.footer-brand .logo{margin-bottom:16px;}
.footer-brand p{max-width:280px;color:rgba(15,26,21,0.75);}
.footer-social{
  display:flex;
  gap:12px;
  margin-top:24px;
}
.footer-social a{
  width:36px;height:36px;
  border-radius:50%;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-accent);
  transition:background .25s ease, transform .25s ease, color .25s ease;
}
.footer-social a:hover{
  background:var(--color-accent);
  color:#fff;
  transform:translateY(-3px);
}
.footer-social svg{width:16px;height:16px;}

.footer-col p.head{
  color:var(--color-cta);
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-size:13px;
  margin-bottom:20px;
  font-weight:700;
}
.footer-col ul li{margin-bottom:12px;}
.footer-col ul li a{
  font-size:14px;
  color:rgba(15,26,21,0.8);
  transition:color .2s ease, padding-left .2s ease;
  display:inline-block;
}
.footer-col ul li a:hover{
  color:var(--color-accent);
  padding-left:4px;
}
.footer-contact p{margin-bottom:10px;font-size:14px;color:rgba(15,26,21,0.8);}

.footer-divider{
  height:1px;
  background:#0f1a15;
  opacity:0.1;
  margin:0 0 24px;
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}
.footer-bottom p{
  opacity:0.7;
  font-size:13px;
}
.footer-bottom .tag{
  color:var(--color-cta);
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-size:13px;
  font-weight:700;
}
.footer-accent{
  width:48px;height:3px;
  background:var(--color-cta);
  margin-bottom:32px;
}

/* ---------- BACK TO TOP ---------- */
.back-to-top{
  position:fixed;
  bottom:28px;
  right:28px;
  width:48px;height:48px;
  border-radius:50%;
  background:var(--color-accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, background .25s ease, visibility .3s ease;
  z-index:80;
  border:none;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:var(--color-accent-hover);}
.back-to-top svg{width:18px;height:18px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .footer-top{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
}

@media (max-width:920px){
  .page-hero{padding:130px 0 64px;}

  .section{padding:64px 0;}

  .about-inner{grid-template-columns:1fr;}
  .about-image{order:-1;}
  .about-image img{height:340px;}

  .services-grid, .services-grid.cols-2,
  .process-grid, .industries-grid,
  .testimonial-grid, .article-grid,
  .frameworks-grid{grid-template-columns:1fr;}

  .stats{grid-template-columns:1fr;gap:32px;}

  .footer-top{grid-template-columns:1fr;gap:32px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}

  .hero{padding:70px 0 56px;}
  .cta{padding:64px 0;}

  .form-row{grid-template-columns:1fr;}
  .newsletter{flex-direction:column;text-align:center;padding:40px 28px;}
  .newsletter-form{justify-content:center;width:100%;}
  .newsletter-form input{min-width:0;flex:1;}
}
/* =========================================================
   NEW SECTION 1 — MATURITY STAIRCASE
   ========================================================= */
.maturity{
  background:#F7F8FA;
  position:relative;
  overflow:hidden;
}
.maturity::before{
  content:'';
  position:absolute;
  top:-120px; right:-120px;
  width:420px;height:420px;
  background:
    radial-gradient(circle at 30% 30%, rgba(6,78,59,0.05) 0, transparent 60%),
    repeating-linear-gradient(45deg, rgba(6,78,59,0.05) 0 2px, transparent 2px 26px);
  border-radius:50%;
  pointer-events:none;
}
.maturity-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:64px;
  align-items:center;
}

/* staircase */
.stair-wrap{
  position:relative;
  height:420px;
  display:flex;
  align-items:flex-end;
  gap:0;
}
.stair-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
}
.stair-svg path{
  fill:none;
  stroke:var(--color-cta);
  stroke-width:2;
  stroke-dasharray:6 6;
  opacity:0.5;
}
.stair{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-end;
  width:100%;
  height:100%;
  gap:18px;
}
.stair-step{
  flex:1;
  border-radius:20px 20px 0 0;
  background:linear-gradient(180deg, rgba(6,78,59,0.06), rgba(6,78,59,0.1));
  border:1px solid rgba(6,78,59,0.12);
  border-bottom:none;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:22px 18px;
  transform-origin:bottom;
  transform:scaleY(0.85);
  opacity:0;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  cursor:pointer;
}
.stair-step.in-view{opacity:1;}
.stair-step:nth-child(1){height:46%;}
.stair-step:nth-child(2){height:72%;}
.stair-step:nth-child(3){height:100%;}
.stair-step:hover{
  background:linear-gradient(180deg, rgba(6,78,59,0.1), rgba(16,185,129,0.18));
  box-shadow:0 -12px 40px rgba(6,78,59,0.18);
  transform:scaleY(1.015);
}
.stair-step .stair-tag{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--color-accent);
  background:rgba(6,78,59,0.08);
  padding:6px 10px;
  border-radius:20px;
  display:inline-block;
  width:fit-content;
  margin-bottom:14px;
}
.stair-step .stair-stats{
  margin-top:auto;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease;
  font-size:13px;
  color:rgba(15,26,21,0.7);
  line-height:1.5em;
}
.stair-step:hover .stair-stats{opacity:1;transform:translateY(0);}
.stair-step .stair-name{
  font-family:var(--font-primary);
  font-size:17px;
  font-weight:700;
  color:var(--color-text);
}
.stair-step::after{
  content:'';
  position:absolute;
  top:-7px; left:50%;
  transform:translateX(-50%);
  width:12px;height:12px;
  border-radius:50%;
  background:var(--color-cta);
  box-shadow:0 0 0 5px rgba(16,185,129,0.18);
}

/* accordion */
.maturity-accordion{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.matacc-item{
  border:1px solid rgba(6,78,59,0.12);
  border-radius:24px;
  background:#ffffff;
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.matacc-item.open{
  border-color:var(--color-accent);
  box-shadow:0 16px 40px rgba(6,78,59,0.1);
}
.matacc-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:24px 28px;
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
}
.matacc-question .matacc-title{
  font-family:var(--font-primary);
  font-size:19px;
  font-weight:700;
  color:var(--color-text);
}
.matacc-question .matacc-eyebrow{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--color-cta-hover);
  margin-bottom:8px;
}
.matacc-question .plus{
  flex-shrink:0;
  width:32px;height:32px;
  border-radius:50%;
  border:1.5px solid rgba(6,78,59,0.25);
  position:relative;
  transition:transform .3s ease, background .3s ease, border-color .3s ease;
}
.matacc-question .plus::before,
.matacc-question .plus::after{
  content:'';
  position:absolute;
  top:50%; left:50%;
  background:var(--color-accent);
  transition:transform .3s ease, opacity .3s ease;
}
.matacc-question .plus::before{width:12px;height:2px;transform:translate(-50%,-50%);}
.matacc-question .plus::after{width:2px;height:12px;transform:translate(-50%,-50%);}
.matacc-item.open .matacc-question .plus{background:var(--color-accent);border-color:var(--color-accent);}
.matacc-item.open .matacc-question .plus::before,
.matacc-item.open .matacc-question .plus::after{background:#fff;}
.matacc-item.open .matacc-question .plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.matacc-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s var(--ease);
}
.matacc-answer p{
  padding:0 28px 26px;
  color:rgba(15,26,21,0.72);
  font-size:15px;
  line-height:1.65em;
}

/* =========================================================
   NEW SECTION 2 — UNIFIED PLATFORM TABS
   ========================================================= */
.platform{
  background:linear-gradient(180deg, #06231b 0%, #0a3327 55%, #06231b 100%);
  position:relative;
  overflow:hidden;
  color:#fff;
}
.platform::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(16,185,129,0.14) 1px, transparent 1px);
  background-size:26px 26px;
  opacity:0.5;
  pointer-events:none;
}
.platform .section-head h2{color:#fff;}
.platform .section-head p{color:rgba(255,255,255,0.65);}
.platform .eyebrow{color:var(--color-cta);}

.platform-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-bottom:56px;
  position:relative;
  z-index:2;
}
.platform-tab{
  padding:12px 22px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.75);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:all .3s ease;
  backdrop-filter:blur(6px);
}
.platform-tab:hover{
  border-color:rgba(16,185,129,0.5);
  color:#fff;
}
.platform-tab.active{
  background:var(--color-cta);
  border-color:var(--color-cta);
  color:#04150f;
  box-shadow:0 8px 28px rgba(16,185,129,0.35);
}

.platform-hub{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  gap:24px;
  align-items:center;
  max-width:1040px;
  margin:0 auto;
}
.hub-col{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.hub-col.outputs{align-items:flex-end;}
.hub-chip{
  padding:12px 18px;
  border-radius:12px;
  border:1px solid rgba(16,185,129,0.3);
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(8px);
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,0.85);
  opacity:0;
  transform:translateX(-16px);
  transition:opacity .5s ease, transform .5s ease, border-color .3s ease, background .3s ease;
}
.hub-col.outputs .hub-chip{transform:translateX(16px);}
.hub-chip.in{opacity:1;transform:translateX(0);}
.hub-chip:hover{border-color:var(--color-cta);background:rgba(16,185,129,0.1);}

.hub-core-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 0;
}
.hub-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hub-lines path{
  fill:none;
  stroke:rgba(16,185,129,0.4);
  stroke-width:1.5;
  stroke-dasharray:5 7;
  animation:dashmove 3s linear infinite;
}
@keyframes dashmove{to{stroke-dashoffset:-120;}}
.hub-core{
  position:relative;
  z-index:3;
  width:150px;height:150px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #1ee6a3, var(--color-cta) 55%, #075e42 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 10px rgba(16,185,129,0.08), 0 0 60px rgba(16,185,129,0.4);
  animation:pulseCore 2.6s ease-in-out infinite;
}
.hub-core span{
  font-family:var(--font-primary);
  font-weight:800;
  color:#04150f;
  font-size:14px;
  text-align:center;
  line-height:1.25em;
  padding:0 14px;
}
@keyframes pulseCore{
  0%,100%{box-shadow:0 0 0 10px rgba(16,185,129,0.08), 0 0 60px rgba(16,185,129,0.4);}
  50%{box-shadow:0 0 0 16px rgba(16,185,129,0.14), 0 0 80px rgba(16,185,129,0.55);}
}

.platform-detail{
  position:relative;
  z-index:2;
  max-width:760px;
  margin:56px auto 0;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:24px;
  padding:40px;
  text-align:center;
  backdrop-filter:blur(10px);
}
.platform-detail h3{color:#fff;margin-bottom:14px;}
.platform-detail p{color:rgba(255,255,255,0.7);font-size:15px;}

/* =========================================================
   NEW SECTION 3 — INTEGRATIONS
   ========================================================= */
.integrations{
  background:
    linear-gradient(#fff,#fff),
    repeating-linear-gradient(0deg, rgba(15,26,21,0.045) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(15,26,21,0.045) 0 1px, transparent 1px 40px);
  position:relative;
}
.integrations-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:40px;
  align-items:center;
}
.integrations-text .eyebrow{margin-bottom:16px;}
.integrations-text h2{margin-bottom:18px;}
.integrations-text p{color:rgba(15,26,21,0.72);margin-bottom:32px;}

.tech-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.tech-card{
  background:#ffffff;
  border:1px solid var(--color-border);
  border-radius:14px;
  padding:20px 18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  box-shadow:0 8px 22px rgba(15,26,21,0.06);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tech-card:hover{
  transform:translateY(-5px);
  border-color:var(--color-cta);
  box-shadow:0 16px 32px rgba(16,185,129,0.16);
}
.tech-icon{
  width:38px;height:38px;
  flex-shrink:0;
  border-radius:10px;
  background:var(--color-icon-bg);
  color:var(--color-icon);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.tech-icon svg{width:20px;height:20px;}
.tech-card:hover .tech-icon{
  background:var(--color-accent);
  color:#fff;
  transform:rotate(-6deg) scale(1.08);
}
.tech-card span{
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  color:var(--color-text);
}
@media (max-width:640px){
  .tech-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .tech-card{padding:16px 14px;}
}

.loop-wrap{
  position:relative;
  height:360px;
}
.loop-svg{position:absolute;inset:0;width:100%;height:100%;}
.loop-svg circle{
  fill:none;
  stroke:rgba(6,78,59,0.16);
  stroke-width:2;
}
.loop-svg .loop-live{
  stroke:var(--color-cta);
  stroke-width:2.6;
  stroke-dasharray:24 636;
  animation:loopdraw 5s linear infinite;
}
@keyframes loopdraw{
  0%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:-660;}
}
.loop-center{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:88px;height:88px;
  border-radius:50%;
  background:var(--color-accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-primary);
  font-weight:800;
  font-size:12px;
  text-align:center;
  line-height:1.2em;
  padding:8px;
  box-shadow:0 0 0 8px rgba(6,78,59,0.08), 0 16px 40px rgba(6,78,59,0.3);
  z-index:3;
}
.integration-node{
  position:absolute;
  transform:translate(-50%,-50%);
  padding:10px 16px;
  border-radius:30px;
  background:#ffffff;
  border:1px solid rgba(6,78,59,0.14);
  box-shadow:0 8px 22px rgba(15,26,21,0.08);
  font-size:13px;
  font-weight:700;
  color:var(--color-text);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  z-index:2;
}
.integration-node:hover{
  transform:translate(-50%,-50%) scale(1.12);
  border-color:var(--color-cta);
  box-shadow:0 12px 30px rgba(16,185,129,0.25);
}

/* =========================================================
   NEW SECTION 4 — FUTURE CTA
   ========================================================= */
.future-cta{
  position:relative;
  background:radial-gradient(120% 140% at 50% 0%, #0a3d2e 0%, #062018 60%, #04120d 100%);
  padding:120px 0;
  text-align:center;
  overflow:hidden;
  color:#fff;
}


.future-cta .container{position:relative;z-index:2;}
.future-cta h2{color:#fff;max-width:760px;margin:0 auto 22px;}
.future-cta p{color:rgba(255,255,255,0.68);max-width:620px;margin:0 auto 40px;font-size:17px;}
.future-cta-buttons{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}
.btn-magnetic{transition:transform .2s ease;}

/* =========================================================
   NEW SECTION 5 — CAPABILITY MATRIX
   ========================================================= */
.matrix-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:48px;
  align-items:stretch;
}
.matrix-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.matrix-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px;
  border-radius:16px;
  cursor:pointer;
  border:1px solid transparent;
  transition:background .25s ease, border-color .25s ease;
}
.matrix-item .matrix-item-name{
  font-family:var(--font-primary);
  font-weight:700;
  font-size:17px;
  color:var(--color-text);
}
.matrix-item .matrix-item-arrow{
  width:20px;height:20px;
  color:var(--color-accent);
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .25s ease, transform .25s ease;
}
.matrix-item:hover{background:rgba(6,78,59,0.05);}
.matrix-item.active{
  background:var(--color-accent);
  border-color:var(--color-accent);
}
.matrix-item.active .matrix-item-name{color:#fff;}
.matrix-item.active .matrix-item-arrow{color:#fff;opacity:1;transform:translateX(0);}

.matrix-card{
  background:linear-gradient(150deg, #ffffff, var(--color-bg-light));
  border:1px solid var(--color-border);
  border-radius:28px;
  padding:48px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.matrix-card::before{
  content:'';
  position:absolute;
  top:-80px; right:-80px;
  width:260px;height:260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(16,185,129,0.14), transparent 70%);
}
.matrix-card-icon{
  width:64px;height:64px;
  border-radius:16px;
  background:var(--color-icon-bg);
  color:var(--color-icon);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
  position:relative;
  z-index:2;
}
.matrix-card-icon svg{width:30px;height:30px;}
.matrix-card h3{margin-bottom:14px;position:relative;z-index:2;}
.matrix-card p.matrix-desc{color:rgba(15,26,21,0.72);margin-bottom:28px;max-width:520px;position:relative;z-index:2;}
.matrix-metrics{
  display:flex;
  gap:32px;
  margin-bottom:28px;
  position:relative;
  z-index:2;
  flex-wrap:wrap;
}
.matrix-metric h4{font-size:28px;color:var(--color-accent);margin-bottom:4px;}
.matrix-metric span{font-size:13px;color:rgba(15,26,21,0.6);}
.matrix-benefits{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:32px;
  position:relative;
  z-index:2;
}
.matrix-benefits span{
  font-size:12px;
  font-weight:600;
  padding:7px 14px;
  border-radius:20px;
  background:rgba(6,78,59,0.07);
  color:var(--color-accent);
}
.matrix-card .btn{position:relative;z-index:2;align-self:flex-start;}
.matrix-card-body{
  animation:matrixFade .5s ease;
}
@keyframes matrixFade{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

/* =========================================================
   NEW SECTIONS — RESPONSIVE
   ========================================================= */
@media (max-width:920px){
  .maturity-grid, .integrations-grid, .matrix-grid{grid-template-columns:1fr;}
  .stair-wrap{height:300px;}
  .platform-hub{grid-template-columns:1fr;}
  .hub-col{flex-direction:row;flex-wrap:wrap;}
  .hub-col.outputs{align-items:flex-start;}
  .hub-chip{transform:none !important;}
  .hub-core-wrap{order:-1;}
  .loop-wrap{height:300px;}
  .matrix-card{padding:32px;}
  .future-cta{padding:80px 0;}
}
/* =========================================================
   ADDITIONS — FOUNDER SECTION & WHATSAPP FLOAT
   ========================================================= */

/* Founder section */
.founder{
  background:#f7f8f8;
}
.founder-inner{
  max-width:1160px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:56px;
  align-items:center;
}
.founder-text p{
  margin-bottom:1.1rem;
  line-height:1.7;
  color:var(--color-text, #36344d);
}
.founder-text strong{
  color:var(--color-primary, #064e3b);
}
.founder-text .btn{
  margin-top:0.5rem;
}

/* Founder photo + credential badges */
.founder-image{
  position:relative;
}
.founder-image img{
  width:100%;
  height:520px;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 20px 45px rgba(0,0,0,0.15);
  transition:transform .5s var(--ease);
}
.founder-image:hover img{transform:scale(1.03);}
.founder-badge{
  position:absolute;
  left:-24px;
  bottom:28px;
  background:var(--color-accent);
  color:#fff;
  border-radius:16px;
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:14px;
  max-width:230px;
  box-shadow:0 16px 34px rgba(6,78,59,0.28);
}
.founder-badge-num{
  font-family:var(--font-primary);
  font-weight:800;
  font-size:32px;
  line-height:1;
  flex-shrink:0;
}
.founder-badge-label{
  font-size:12.5px;
  font-weight:600;
  line-height:1.35;
  color:rgba(255,255,255,0.9);
}
.founder-tags{
  position:absolute;
  top:24px;
  right:-16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
}
.founder-tags span{
  background:#ffffff;
  border:1px solid var(--color-border);
  border-radius:999px;
  padding:8px 16px;
  font-size:12.5px;
  font-weight:700;
  color:var(--color-accent);
  box-shadow:0 8px 20px rgba(15,26,21,0.08);
  white-space:nowrap;
}
@media (max-width:900px){
  .founder-inner{grid-template-columns:1fr;}
  .founder-image{order:-1;margin-bottom:8px;}
  .founder-image img{height:380px;}
  .founder-badge{left:16px;bottom:16px;}
  .founder-tags{position:static;flex-direction:row;flex-wrap:wrap;margin-top:16px;}
}

/* Floating WhatsApp button */
.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:88px;              /* sits above the back-to-top button */
  z-index:60;
  width:54px;
  height:54px;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.22);
  transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float svg{
  width:28px;
  height:28px;
}
.whatsapp-float:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 10px 24px rgba(0,0,0,0.28);
}
@media (max-width:600px){
  .whatsapp-float{
    right:14px;
    bottom:78px;
    width:50px;
    height:50px;
  }
}

/* Footer contact links inherit footer text style */
.footer-contact a{
  color:inherit;
  text-decoration:none;
}
.footer-contact a:hover{
  color:var(--color-cta-hover);
}

/* =========================================================
   ACCESSIBILITY — FOCUS STATES
   ========================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--color-cta);
  outline-offset:2px;
}
.faq-question:focus-visible{
  outline-offset:-2px;
}

/* =========================================================
   SECURITY JOURNEY TIMELINE (replaces bar staircase)
   ========================================================= */
.maturity-grid{align-items:start;}
.journey{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:26px;
  padding-left:8px;
}

/* vertical track + animated progress fill */
.journey-track{
  position:absolute;
  left:35px;                 /* centers on the 56px node column */
  top:34px;
  bottom:34px;
  width:2px;
  background:rgba(6,78,59,0.14);
  border-radius:2px;
  overflow:hidden;
}
.journey-progress{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:0%;
  background:linear-gradient(180deg, var(--color-cta), #064e3b);
  border-radius:2px;
  transition:height .5s cubic-bezier(.4,0,.2,1);
}

/* one step = node + card */
.journey-step{
  position:relative;
  display:grid;
  grid-template-columns:56px 1fr;
  gap:18px;
  align-items:flex-start;
  cursor:pointer;
  opacity:0;
  transform:translateX(-18px);
  transition:opacity .5s ease, transform .5s ease;
  outline:none;
}
.journey-step.in-view{
  opacity:1;
  transform:translateX(0);
}

/* milestone node */
.journey-node{
  width:56px;
  height:56px;
  border-radius:50%;
  background:#ffffff;
  border:2px solid rgba(6,78,59,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#064e3b;
  position:relative;
  z-index:2;
  transition:background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.journey-node svg{
  width:24px;
  height:24px;
}

/* stage card */
.journey-card{
  background:#ffffff;
  border:1px solid rgba(6,78,59,0.12);
  border-radius:18px;
  padding:20px 22px;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.journey-card .journey-tag{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#0c9467;
  display:block;
  margin-bottom:6px;
}
.journey-card h4{
  font-family:var(--font-primary);
  font-size:19px;
  font-weight:700;
  color:var(--color-text, #0f1a15);
  margin-bottom:6px;
}
.journey-card p{
  font-size:14px;
  line-height:1.6em;
  color:rgba(15,26,21,0.72);
  margin-bottom:12px;
}
.journey-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.journey-chips span{
  font-size:12px;
  font-weight:600;
  color:#064e3b;
  background:rgba(16,185,129,0.1);
  border:1px solid rgba(16,185,129,0.25);
  padding:5px 12px;
  border-radius:999px;
  transition:background .25s ease, color .25s ease;
}

/* hover */
.journey-step:hover .journey-card,
.journey-step:focus-visible .journey-card{
  border-color:rgba(16,185,129,0.5);
  box-shadow:0 10px 32px rgba(6,78,59,0.12);
  transform:translateY(-2px);
}
.journey-step:hover .journey-node{
  border-color:var(--color-cta);
  transform:scale(1.06);
}

/* active stage */
.journey-step.active .journey-node{
  background:linear-gradient(135deg, var(--color-cta), #064e3b);
  border-color:transparent;
  color:#ffffff;
  box-shadow:0 0 0 6px rgba(16,185,129,0.16), 0 8px 20px rgba(6,78,59,0.25);
}
.journey-step.active .journey-card{
  border-color:var(--color-cta);
  background:linear-gradient(180deg, #ffffff, rgba(16,185,129,0.05));
  box-shadow:0 14px 40px rgba(6,78,59,0.14);
}
.journey-step.active .journey-chips span{
  background:var(--color-cta);
  border-color:var(--color-cta);
  color:#ffffff;
}

/* completed (earlier) stages */
.journey-step.done .journey-node{
  background:rgba(16,185,129,0.12);
  border-color:var(--color-cta);
  color:#0c9467;
}

/* pulse on the active node */
.journey-step.active .journey-node::after{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:50%;
  border:2px solid rgba(16,185,129,0.5);
  animation:journeyPulse 2.2s ease-out infinite;
}
@keyframes journeyPulse{
  0%{transform:scale(1);opacity:0.7;}
  70%{transform:scale(1.35);opacity:0;}
  100%{transform:scale(1.35);opacity:0;}
}

/* mobile */
@media (max-width:900px){
  .journey{padding-left:0;}
  .journey-track{left:21px;}
  .journey-step{grid-template-columns:44px 1fr;gap:14px;}
  .journey-node{width:44px;height:44px;}
  .journey-node svg{width:20px;height:20px;}
  .journey-card{padding:16px 18px;}
}

/* =========================================================
   RESPONSIVE OVERHAUL — TABLET, MOBILE & SMALL-SCREEN FIXES
   ========================================================= */

/* Prevent any accidental horizontal scroll on any device */
html, body{max-width:100%;overflow-x:hidden;}
img, svg, video, iframe{max-width:100%;height:auto;}
.hero-badges span, .journey-chips span, .matrix-benefits span{max-width:100%;}

/* ---------- LARGE TABLET / SMALL LAPTOP (1024px) ---------- */
@media (max-width:1024px){
  .container, .container-narrow{padding:0 20px;}

  .services-grid, .services-grid.cols-2,
  .process-grid,
  .frameworks-grid,
  .testimonial-grid,
  .article-grid{grid-template-columns:repeat(2,1fr);}

  .industries-grid{grid-template-columns:repeat(3,1fr);}

  .about-inner{gap:36px;}
  .founder-inner{gap:36px;}
  .matrix-grid{gap:28px;}
}

/* ---------- TABLET / LARGE PHONE (768px) ---------- */
@media (max-width:768px){
  .section{padding:56px 0;}
  .page-hero{padding:120px 0 56px;}
  .hero{padding:56px 0 48px;}

  .container, .container-narrow{padding:0 18px;}

  h1{line-height:1.12em;}

  .services-grid, .services-grid.cols-2,
  .process-grid,
  .frameworks-grid,
  .testimonial-grid,
  .article-grid,
  .industries-grid{grid-template-columns:repeat(2,1fr);gap:18px;}

  .stats{grid-template-columns:repeat(1,1fr);gap:20px;}

  .service-card{padding:32px 24px;}
  .service-card h3{font-size:22px;}

  .about-image img,
  .founder-image img{height:320px;}

  .contact-info-card, .contact-form{padding:32px 24px;}
  .newsletter{padding:36px 24px;}
  .newsletter-form input{min-width:0;width:100%;}
  .newsletter-form{width:100%;}
  .newsletter-form button{width:100%;}

  .matrix-grid{grid-template-columns:1fr;}
  .matrix-card{padding:28px 22px;}
  .matrix-metrics{gap:20px;}

  .stair-wrap{height:260px;}
  .loop-wrap{height:280px;}
  .hub-core{width:120px;height:120px;}
  .hub-core span{font-size:12px;}

  .platform-detail{padding:28px 22px;margin-top:36px;}

  .footer-top{gap:28px;}
}

/* ---------- SMALL PHONE (600px) ---------- */
@media (max-width:600px){
  .services-grid, .services-grid.cols-2,
  .process-grid,
  .frameworks-grid,
  .testimonial-grid,
  .article-grid,
  .industries-grid{grid-template-columns:1fr;}

  .hero-buttons, .cta-buttons, .future-cta-buttons{
    flex-direction:column;
    align-items:stretch;
    width:100%;
  }
  .hero-buttons .btn, .cta-buttons .btn, .future-cta-buttons .btn{
    width:100%;
  }

  .hero-badges{gap:12px;}
  .hero-badges span{
    flex:1 1 auto;
    text-align:center;
    font-size:12px;
  }

  .contact-info-row{align-items:flex-start;}

  .founder-badge{
    position:static;
    margin-top:16px;
    max-width:100%;
  }
  .founder-tags{
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    margin-top:12px;
  }
  .founder-image img{height:280px;}

  .matrix-metrics{flex-direction:column;gap:14px;}
  .matrix-item{padding:16px 18px;}

  .whatsapp-float{right:14px;bottom:78px;width:48px;height:48px;}
  .back-to-top{right:16px;bottom:20px;width:44px;height:44px;}
}

/* ---------- EXTRA SMALL PHONE (420px) ---------- */
@media (max-width:420px){
  body{font-size:15px;}
  .container, .container-narrow{padding:0 14px;}

  .section{padding:44px 0;}
  .page-hero{padding:110px 0 44px;}
  .hero{padding:44px 0 40px;}

  .eyebrow{font-size:12px;}

  .btn{padding:14px 20px;font-size:14px;width:100%;}
  nav a.nav-cta{padding:10px 18px;}

  .logo img{height:44px;}

  .stat{padding:26px 20px;}
  .stat h2{font-size:34px;}

  .service-card, .framework-card, .process-step,
  .article-body, .contact-form, .contact-info-card,
  .office-card, .matrix-card{padding:22px 18px;}

  .article-image{height:190px;}

  .newsletter{padding:28px 18px;}
  .newsletter h3{font-size:20px;}

  .founder-tags span{font-size:11px;padding:6px 12px;}
  .founder-badge{padding:14px 16px;}
  .founder-badge-num{font-size:26px;}

  .journey-card{padding:14px 16px;}
  .journey-card h4{font-size:16px;}

  .stair-wrap{height:220px;}
  .loop-wrap{height:240px;}
  .hub-core{width:96px;height:96px;}
  .hub-core span{font-size:10.5px;padding:0 8px;}
  .integration-node{padding:8px 12px;font-size:11px;}

  .form-group input,
  .form-group select,
  .form-group textarea{padding:12px 14px;font-size:14px;}

  .footer-top{grid-template-columns:1fr;text-align:left;}
  .footer-bottom{text-align:left;}

  .whatsapp-float{right:12px;bottom:74px;width:44px;height:44px;}
  .whatsapp-float svg{width:22px;height:22px;}
  .back-to-top{right:12px;bottom:18px;width:40px;height:40px;}
  .back-to-top svg{width:15px;height:15px;}
}

/* ---------- LARGER TOUCH TARGETS ON TOUCH DEVICES ---------- */
@media (max-width:920px){
  .faq-question{padding:18px 20px;font-size:15px;}
  .footer-col ul li{margin-bottom:14px;}
  .footer-col ul li a{padding:4px 0;}
}

/* =========================================================
   MOBILE NAVBAR — FULL REBUILD FOR ALL MOBILE SCREEN SIZES
   ========================================================= */

/* Tighter, safer header on touch screens */
@media (max-width:920px){
  header{
    padding:14px 16px;
    padding-top:calc(14px + env(safe-area-inset-top));
  }
  header.scrolled{
    padding:10px 16px;
    padding-top:calc(10px + env(safe-area-inset-top));
  }
  .header-inner{gap:12px;}
  .logo img{height:42px;}

  /* Bigger, easier-to-tap burger button (44x44 target) */
  .burger{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;
    margin:-8px -8px -8px 0;
  }
  .burger span{
    width:24px;
    left:10px;
  }
  .burger span:nth-child(1){top:15px;}
  .burger span:nth-child(2){top:22px;}
  .burger span:nth-child(3){top:29px;}
  .burger.open span:nth-child(1){top:22px;transform:rotate(45deg);}
  .burger.open span:nth-child(3){top:22px;transform:rotate(-45deg);}

  /* Full-screen mobile menu that scrolls safely on short viewports */
  nav{
    position:fixed;
    inset:0;
    top:0;
    background:#ffffff;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    transform:translateX(100%);
    transition:transform .4s var(--ease);
    z-index:90;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:calc(96px + env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom));
  }
  nav.open{transform:translateX(0);}
  nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    width:100%;
    max-width:360px;
    margin:auto 0;
  }
  nav ul li{width:100%;}
  nav a{
    display:block;
    font-size:19px;
    padding:16px 12px;
    text-align:center;
    border-radius:10px;
    transition:background .2s ease;
  }
  nav a:not(.nav-cta):hover,
  nav a:not(.nav-cta):active{background:var(--color-bg-light);}
  nav a::after{display:none;}
  nav a.nav-cta{
    margin-top:12px;
    padding:16px 12px;
    text-align:center;
    font-size:17px;
  }

  /* Prevent body scroll bleed-through and layout shift while menu is open */
  body.nav-open{overflow:hidden;}
}

/* Extra-small phones: slightly tighter mobile menu spacing */
@media (max-width:380px){
  .logo img{height:36px;}
  nav{padding:calc(84px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));}
  nav a{font-size:17px;padding:14px 10px;}
  nav a.nav-cta{font-size:16px;}
}

/* Landscape phones (short viewport height) — keep menu compact & scrollable */
@media (max-width:920px) and (max-height:480px){
  nav{padding:calc(72px + env(safe-area-inset-top)) 24px 24px;align-items:flex-start;}
  nav ul{gap:4px;margin:0;}
  nav a{padding:12px;font-size:17px;}
}