/* ===================================================================
   Optivo Tech — optivotech.com
   Shared stylesheet. Brand: Optivo Ink + Optivo Teal, Manrope.
   =================================================================== */

:root{
  --ink:#0F1E2E;
  --ink-2:#16293b;
  --teal:#14B5A3;
  --teal-bright:#2BC9B6;
  --teal-deep:#0E8C7E;
  --teal-tint:#E3F6F3;
  --slate:#5A6470;
  --cloud:#E4E8ED;
  --mist:#F4F5F7;
  --white:#FFFFFF;
  --ice:#C2CED8;
  --maxw:1180px;
  --radius:14px;
  --shadow:0 18px 40px -24px rgba(15,30,46,.30);
  --shadow-sm:0 10px 26px -20px rgba(15,30,46,.40);
}

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

html{scroll-behavior:smooth;}
body{
  font-family:'Manrope',Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--white);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* ---------- layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 26px;}
.section{padding:92px 0;}
.section--tight{padding:70px 0;}
.section--mist{background:var(--mist);}
.section--ink{background:var(--ink);color:var(--white);}

.eyebrow{
  font-size:13px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-deep);margin-bottom:14px;
}
.section--ink .eyebrow{color:var(--teal-bright);}

h1,h2,h3,h4{line-height:1.12;font-weight:800;letter-spacing:-.01em;}
h2.section-title{font-size:37px;margin-bottom:0;}
.section--ink h2.section-title{color:var(--white);}
.section-intro{
  font-size:18px;color:var(--slate);max-width:620px;margin-top:18px;
}
.section--ink .section-intro{color:var(--ice);}
.section-head{margin-bottom:46px;}
.section-head--center{text-align:center;}
.section-head--center .section-intro{margin-left:auto;margin-right:auto;}

.lede{font-size:19px;color:var(--slate);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:16px;font-family:inherit;cursor:pointer;
  padding:15px 28px;border-radius:9px;border:2px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--teal);color:var(--ink);border-color:var(--teal);}
.btn-primary:hover{background:var(--teal-bright);border-color:var(--teal-bright);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--cloud);}
.btn-outline:hover{border-color:var(--ink);}
.btn-ghost-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.30);}
.btn-ghost-light:hover{border-color:var(--white);background:rgba(255,255,255,.06);}
.btn-arrow::after{content:"→";font-weight:700;}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--cloud);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px;}
.nav-logo img{height:34px;}
.nav-links{display:flex;align-items:center;gap:34px;list-style:none;}
.nav-links a{font-size:15.5px;font-weight:600;color:var(--slate);transition:color .15s;}
.nav-links a:hover,.nav-links a.active{color:var(--teal-deep);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-cta .btn{padding:11px 20px;font-size:15px;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.nav-toggle span{display:block;width:24px;height:2.4px;background:var(--ink);border-radius:2px;margin:5px 0;transition:.2s;}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:var(--white);overflow:hidden;}
.hero-inner{position:relative;z-index:2;padding:104px 0 110px;max-width:780px;}
.hero h1{font-size:54px;color:var(--white);margin-bottom:22px;}
.hero h1 .accent{color:var(--teal-bright);}
.hero p.hero-sub{font-size:20px;color:var(--ice);max-width:620px;margin-bottom:34px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.hero-note{margin-top:30px;font-size:14.5px;color:var(--ice);display:flex;align-items:center;gap:9px;}
.hero-note .dot{width:7px;height:7px;border-radius:50%;background:var(--teal-bright);flex:none;}

/* arc motif */
.arc-motif{position:absolute;pointer-events:none;z-index:1;}
.arc-motif--hero{right:-150px;top:-60px;width:620px;height:620px;opacity:.5;}
.arc-motif--cta{right:-130px;bottom:-220px;width:520px;height:520px;opacity:.42;}

/* ---------- generic grids ---------- */
.grid{display:grid;gap:24px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

/* ---------- cards / features ---------- */
.card{
  background:var(--white);border:1px solid var(--cloud);
  border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm);
}
.card--mist{background:var(--mist);border-color:transparent;box-shadow:none;}
.card--ink{background:var(--ink-2);border-color:transparent;color:var(--white);box-shadow:none;}
.card h3{font-size:20px;margin-bottom:9px;}
.card p{color:var(--slate);font-size:15.5px;}
.card--ink p{color:var(--ice);}

.icon-chip{
  width:58px;height:58px;border-radius:50%;background:var(--ink);
  display:flex;align-items:center;justify-content:center;flex:none;margin-bottom:18px;
}
.icon-chip img{width:30px;height:30px;}
.icon-chip--teal{background:var(--teal);}
.icon-chip--sm{width:46px;height:46px;}
.icon-chip--sm img{width:24px;height:24px;}

.feature-row{display:flex;gap:18px;align-items:flex-start;}
.feature-row .icon-chip{margin-bottom:0;}
.feature-row h3{font-size:18px;margin-bottom:5px;}
.feature-row p{color:var(--slate);font-size:15px;}

/* tag / pill */
.tag{
  display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--teal-deep);background:var(--teal-tint);
  padding:6px 12px;border-radius:6px;
}

/* ---------- stat band ---------- */
.statband{display:flex;flex-wrap:wrap;gap:30px;}
.stat{flex:1;min-width:180px;}
.stat .num{font-size:50px;font-weight:800;color:var(--teal-bright);line-height:1;letter-spacing:-.02em;}
.stat .lab{margin-top:10px;color:var(--ice);font-size:15px;}
.section--mist .stat .num{color:var(--teal-deep);}
.section--mist .stat .lab{color:var(--slate);}

/* ---------- split (two column text + panel) ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;}
.split--narrow{grid-template-columns:1fr 1fr;}

/* ---------- panel / callout ---------- */
.panel{
  background:var(--teal-tint);border-radius:var(--radius);padding:38px 40px;
}
.panel--ink{background:var(--ink-2);color:var(--white);}
.panel-quote{font-size:22px;font-weight:700;line-height:1.4;}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.step{position:relative;}
.step .step-num{
  width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--white);
  font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.step h3{font-size:17.5px;margin-bottom:6px;}
.step p{color:var(--slate);font-size:14.5px;}
.section--ink .step p{color:var(--ice);}

/* ---------- promise list ---------- */
.promise{display:flex;gap:16px;align-items:flex-start;padding:22px 0;border-top:1px solid var(--cloud);}
.promise:first-child{border-top:0;}
.promise .icon-chip{margin-bottom:0;}
.promise-body h3{font-size:18px;margin-bottom:4px;}
.promise-body p{color:var(--slate);font-size:15.5px;}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.price{
  background:var(--white);border:1px solid var(--cloud);border-radius:var(--radius);
  padding:28px 24px;display:flex;flex-direction:column;position:relative;
}
.price--featured{background:var(--ink);border-color:var(--ink);color:var(--white);}
.price .price-kicker{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-deep);}
.price--featured .price-kicker{color:var(--teal-bright);}
.price h3{font-size:18px;margin:8px 0 14px;}
.price .amount{font-size:32px;font-weight:800;letter-spacing:-.02em;}
.price .per{font-size:14px;color:var(--slate);font-weight:600;}
.price--featured .per{color:var(--ice);}
.price .price-desc{margin-top:14px;padding-top:16px;border-top:1px solid var(--cloud);font-size:14.5px;color:var(--slate);}
.price--featured .price-desc{border-top-color:rgba(255,255,255,.16);color:var(--ice);}
.price .price-badge{
  position:absolute;top:-12px;left:24px;right:24px;text-align:center;
  background:var(--teal);color:var(--ink);font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 0;border-radius:6px;
}

.partner-bar{
  display:flex;align-items:center;gap:18px;background:var(--teal-tint);
  border-radius:var(--radius);padding:22px 28px;margin-top:24px;
}
.partner-bar p{font-size:15.5px;color:var(--slate);}
.partner-bar strong{color:var(--ink);}
.partner-bar .hl{color:var(--teal-deep);font-weight:800;}

/* ---------- list with check ---------- */
.checklist{list-style:none;display:grid;gap:14px;}
.checklist li{display:flex;gap:12px;align-items:flex-start;font-size:16px;}
.checklist li::before{
  content:"";width:22px;height:22px;border-radius:50%;flex:none;margin-top:2px;
  background:var(--teal-tint) url("assets/icons/check.svg") center/14px no-repeat;
}
.checklist--ink li::before{background-color:rgba(43,201,182,.16);}
.section--ink .checklist li{color:var(--ice);}

/* ---------- team ---------- */
.team-card{background:var(--white);border:1px solid var(--cloud);border-radius:var(--radius);padding:26px;text-align:center;}
.team-photo{
  width:96px;height:96px;border-radius:50%;background:var(--mist);
  margin:0 auto 16px;display:flex;align-items:center;justify-content:center;
  border:2px dashed var(--cloud);color:var(--slate);font-size:12px;font-weight:700;text-align:center;padding:8px;
}
.team-card h3{font-size:18px;}
.team-card .role{color:var(--teal-deep);font-weight:700;font-size:14px;margin:3px 0 10px;}
.team-card p{color:var(--slate);font-size:14px;}

/* ---------- form ---------- */
.form{display:grid;gap:18px;}
.field label{display:block;font-size:14px;font-weight:700;margin-bottom:7px;}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:15.5px;color:var(--ink);
  padding:13px 14px;border:1px solid var(--cloud);border-radius:9px;background:var(--white);
}
.field textarea{min-height:128px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(20,181,163,.15);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}

/* ---------- placeholder marker (for fields the client fills in) ---------- */
.ph{
  color:var(--teal-deep);font-weight:700;background:var(--teal-tint);
  padding:1px 6px;border-radius:4px;font-size:.94em;
}

/* ---------- info note ---------- */
.note{
  background:var(--mist);border-left:3px solid var(--teal);border-radius:8px;
  padding:16px 20px;font-size:14.5px;color:var(--slate);
}

/* ---------- CTA band ---------- */
.cta{position:relative;background:var(--ink);color:var(--white);overflow:hidden;}
.cta-inner{position:relative;z-index:2;text-align:center;padding:84px 0;}
.cta h2{font-size:38px;color:var(--white);margin-bottom:16px;}
.cta p{font-size:18px;color:var(--ice);max-width:560px;margin:0 auto 30px;}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:var(--ice);padding:64px 0 30px;}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;}
.footer-brand img{height:32px;margin-bottom:18px;}
.footer-brand p{font-size:14.5px;color:var(--ice);max-width:280px;}
.footer-col h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--white);margin-bottom:16px;}
.footer-col ul{list-style:none;display:grid;gap:10px;}
.footer-col a{font-size:14.5px;color:var(--ice);transition:color .15s;}
.footer-col a:hover{color:var(--teal-bright);}
.footer-bottom{
  margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:13px;color:var(--slate);
}
.footer-bottom .brandline{color:var(--teal-bright);font-weight:700;}

/* ---------- page header (interior pages) ---------- */
.page-head{background:var(--ink);color:var(--white);position:relative;overflow:hidden;}
.page-head-inner{position:relative;z-index:2;padding:78px 0 84px;max-width:760px;}
.page-head h1{font-size:46px;color:var(--white);margin-bottom:18px;}
.page-head p{font-size:19px;color:var(--ice);max-width:600px;}

/* ---------- misc ---------- */
.mt-s{margin-top:14px;}
.mt-m{margin-top:26px;}
.mt-l{margin-top:40px;}
.center{text-align:center;}
.muted{color:var(--slate);}

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width:960px){
  .nav-links,.nav-cta .btn{display:none;}
  .nav-toggle{display:block;}
  .nav.open .nav-links{
    display:flex;position:absolute;top:78px;left:0;right:0;flex-direction:column;
    gap:0;background:var(--white);border-bottom:1px solid var(--cloud);padding:8px 0;
  }
  .nav.open .nav-links li{width:100%;}
  .nav.open .nav-links a{display:block;padding:14px 26px;}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .price-grid{grid-template-columns:repeat(2,1fr);}
  .split,.split--narrow{grid-template-columns:1fr;gap:34px;}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
  h2.section-title{font-size:31px;}
  .hero h1{font-size:42px;}
  .page-head h1{font-size:36px;}
}
@media (max-width:620px){
  body{font-size:16px;}
  .section{padding:66px 0;}
  .grid-2,.grid-3,.grid-4,.steps,.price-grid,.form-row{grid-template-columns:1fr;}
  .hero-inner{padding:74px 0 80px;}
  .hero h1{font-size:34px;}
  .hero p.hero-sub{font-size:17.5px;}
  h2.section-title{font-size:27px;}
  .cta h2{font-size:28px;}
  .page-head h1{font-size:30px;}
  .panel{padding:26px 22px;}
  .partner-bar{flex-direction:column;align-items:flex-start;gap:12px;}
  .footer-top{grid-template-columns:1fr;}
  .btn{width:100%;justify-content:center;}
  .hero-actions .btn,.cta-actions .btn{width:100%;}
}