/* ============================================================
   ZEALOUS HOSTING — design system
   Light theme · violet #6D3EF6 · lime #CBF877 · navy #0E1B33
   ============================================================ */

:root{
  --primary:#6D3EF6;
  --primary-2:#5A29E4;
  --primary-soft:#EFEAFE;
  --lime:#CBF877;
  --lime-2:#BDF25C;
  --navy:#0E1B33;
  --ink:#101828;
  --muted:#5D6B7E;
  --lav:#F6F5FC;
  --line:#E9E7F4;
  --card-line:#EDECF7;
  --white:#ffffff;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(23,15,73,.06);
  --shadow-lg:0 24px 60px rgba(23,15,73,.10);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--white);
  color:var(--muted);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Plus Jakarta Sans',sans-serif;
  color:var(--ink);
  letter-spacing:-0.02em;
  line-height:1.14;
  font-weight:800;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
button{font-family:inherit;}
.wrap{max-width:1320px; margin:0 auto; padding:0 24px;}
section{position:relative;}
::selection{background:var(--primary); color:#fff;}
:focus-visible{outline:2px solid var(--primary); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important;}
  html{scroll-behavior:auto;}
}

/* ---------- Section pill tag  (• Features) ---------- */
.pill{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 20px;
  font-size:14px; font-weight:700; color:var(--ink);
  font-family:'Plus Jakarta Sans',sans-serif;
  box-shadow:var(--shadow);
}
.pill::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--primary);
}
.pill.on-dark{background:transparent; border-color:rgba(255,255,255,.35); color:#fff; box-shadow:none;}
.pill.on-dark::before{background:var(--lime);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 28px;
  border-radius:9px;
  font-weight:700; font-size:15px;
  font-family:'Plus Jakarta Sans',sans-serif;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn .arr{width:13px; height:13px; flex:none;}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover{background:var(--primary-2);}
.btn-outline{background:var(--white); color:var(--primary); border-color:#D8CEFB;}
.btn-outline:hover{border-color:var(--primary); background:var(--primary-soft);}
.btn-lime{background:var(--lime); color:var(--navy);}
.btn-lime:hover{background:var(--lime-2);}
.btn-white{background:#fff; color:var(--ink);}
.btn-white:hover{background:var(--lime);}
.btn-sm{padding:11px 22px; font-size:14px;}

/* ---------- Icon tiles ---------- */
.tile{
  width:58px; height:58px; flex:none;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
}
.tile svg{width:30px; height:30px;}
.tile-lime{background:var(--lime);}
.tile-lime svg{stroke:var(--navy);}
.tile-purple{background:var(--primary);}
.tile-purple svg{stroke:var(--lime);}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header nav{
  display:flex; align-items:center; justify-content:space-between;
  height:86px; gap:24px;
}
.logo-img{height:44px; width:auto;}
.nav-links{display:flex; align-items:center; gap:36px;}
.nav-links a{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:600; font-size:15.5px; color:var(--ink);
  transition:color .18s ease;
}
.nav-links a:hover, .nav-links a.active{color:var(--primary);}
.nav-cta{display:flex; align-items:center; gap:12px;}
.menu-toggle{
  display:none; background:none; border:0; cursor:pointer;
  width:42px; height:42px; align-items:center; justify-content:center;
  color:var(--ink);
}
.menu-toggle svg{width:26px; height:26px;}

@media (max-width:1060px){
  .nav-links{
    position:fixed; inset:86px 0 auto 0;
    background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:8px 0 16px;
    display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links li{width:100%;}
  .nav-links a{display:block; padding:13px 28px;}
  .menu-toggle{display:flex;}
  .nav-cta .btn-ghost-link{display:none;}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:
    radial-gradient(55% 75% at 88% 12%, #E9DDFF 0%, rgba(233,221,255,0) 60%),
    radial-gradient(45% 65% at 8% 90%, #FFE7DC 0%, rgba(255,231,220,0) 62%),
    radial-gradient(42% 58% at 55% 100%, #FFF2D6 0%, rgba(255,242,214,0) 58%),
    #FDFBF8;
  padding:84px 0 110px;
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:60px; align-items:center;
}
.hero-offer{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700; font-size:19px; color:var(--ink);
  margin-bottom:20px;
}
.hero-offer b{color:var(--primary); font-weight:800;}
.hero h1{
  font-size:clamp(40px, 4.6vw, 66px);
  margin-bottom:26px;
}
.hero h1 .hl{color:var(--primary);}
.hero h1 .chip{
  display:inline-block; vertical-align:middle;
  width:.62em; height:.62em; margin:0 .08em;
  border-radius:.14em;
  background:var(--lime);
  box-shadow: .78em 0 0 -.08em #DCD6F5;
  transform:translateY(-.05em);
  margin-right:.85em;
}
.hero-price{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700; font-size:19px; color:var(--ink);
  margin-bottom:30px;
}
.hero-price b{color:var(--primary);}

.domain-form{
  display:flex; gap:0; max-width:530px;
  background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:7px;
  box-shadow:var(--shadow);
  margin-bottom:26px;
}
.domain-form input{
  flex:1; border:0; outline:0; background:transparent;
  padding:12px 16px; font-size:15.5px; font-family:'Inter',sans-serif;
  color:var(--ink); min-width:0;
}
.domain-form input::placeholder{color:#9AA3B2;}
.domain-form .btn{border-radius:9px;}

.hero-trust{display:flex; align-items:center; gap:12px; font-weight:700; color:var(--ink); font-size:15px; font-family:'Plus Jakarta Sans',sans-serif;}
.stars{display:inline-flex; gap:2px;}
.stars svg{width:19px; height:19px; fill:var(--primary); stroke:none;}
.stars .half{fill:url(#halfstar);}
.tp{display:inline-flex; align-items:center; gap:6px; color:var(--ink);}
.tp svg{width:19px; height:19px; fill:var(--primary);}

/* hero visual */
.hero-visual{position:relative;}
.hv-panel{
  background:linear-gradient(160deg,#F4F1FE 0%, #FBF6FA 100%);
  border:1px solid var(--line);
  border-radius:22px;
  padding:38px 34px 30px;
  box-shadow:var(--shadow-lg);
  position:relative;
}
.hv-search{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:15px 18px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:var(--ink);
  box-shadow:var(--shadow);
  max-width:340px;
}
.hv-search svg{width:19px; height:19px; stroke:var(--ink); flex:none;}
.hv-search .skl{flex:1; height:12px; border-radius:6px; background:#E6E1F7;}
.hv-chip{
  position:absolute;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:12px 16px;
  display:flex; align-items:center; gap:11px;
  box-shadow:var(--shadow-lg);
  font-family:'Plus Jakarta Sans',sans-serif;
}
.hv-chip b{display:block; font-size:17px; color:var(--ink); line-height:1.1;}
.hv-chip span{font-size:12.5px; color:var(--muted); font-weight:600;}
.hv-chip svg{width:26px; height:26px; stroke:var(--ink); flex:none;}
.hv-chip.c1{top:-24px; right:8px;}
.hv-chip.c2{top:96px; left:16px;}
.hv-scene{margin-top:26px; display:flex; justify-content:center;}
.hv-scene svg{width:100%; max-width:480px; height:auto;}
.hv-photo{
  position:absolute; right:22px; bottom:26px;
  width:190px; height:230px; border-radius:16px;
  background:
    radial-gradient(90% 70% at 20% 15%, rgba(203,248,119,.5) 0%, rgba(203,248,119,0) 55%),
    linear-gradient(160deg,#7A4DFF 0%, #4A1FD6 55%, #2A1470 100%);
  box-shadow:var(--shadow-lg);
  outline:1px dashed #C9BDF6; outline-offset:9px;
}
@media (max-width:1160px){ .hv-photo{display:none;} }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust-strip{
  background-color:#FCFBF8;
  background-image:radial-gradient(#DDD9EC 1.1px, transparent 1.1px);
  background-size:16px 16px;
  padding:78px 0 86px;
  text-align:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.trust-strip h2{font-size:clamp(22px,2.4vw,30px); margin-bottom:20px; letter-spacing:-0.01em;}
.trust-rating{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:var(--ink);
  font-size:19px; margin-bottom:46px; flex-wrap:wrap;
}
.trust-logos{
  display:flex; align-items:center; justify-content:center;
  gap:56px; flex-wrap:wrap;
}
.trust-logos span{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; font-size:21px; color:#1D2433;
  opacity:.85; letter-spacing:-0.01em;
}

/* ============================================================
   SECTION HEADS
   ============================================================ */
.section-pad{padding:110px 0;}
.sec-head{text-align:center; max-width:720px; margin:0 auto 58px;}
.sec-head .pill{margin-bottom:22px;}
.sec-head h2{font-size:clamp(32px,3.6vw,50px); margin-bottom:18px;}
.sec-head p{font-size:17px;}
.sec-head.on-dark h2{color:#fff;}
.sec-head.on-dark p{color:rgba(255,255,255,.82);}

/* ============================================================
   PRICING
   ============================================================ */
.bill-toggle{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:-26px 0 52px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:var(--ink); font-size:16px;
}
.bill-toggle .save{color:var(--primary); font-weight:700;}
.switch{
  width:56px; height:30px; border-radius:999px;
  background:var(--navy); border:0; cursor:pointer;
  position:relative; transition:background .2s ease; flex:none;
}
.switch::after{
  content:""; position:absolute; top:4px; left:4px;
  width:22px; height:22px; border-radius:50%; background:#fff;
  transition:transform .22s ease;
}
.switch[aria-checked="true"]{background:var(--primary);}
.switch[aria-checked="true"]::after{transform:translateX(26px);}

.plans-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  align-items:start;
}
.plan{
  background:#fff; border:1px solid var(--card-line);
  border-radius:var(--radius);
  padding:38px 30px 30px;
  text-align:center;
  box-shadow:var(--shadow);
}
.plan-head{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:16px;
}
.plan-head svg{width:26px; height:26px; stroke:var(--primary); flex:none;}
.plan-head h3{font-size:21px;}
.plan-tag{font-size:15px; margin-bottom:14px;}
.plan-price{
  font-family:'Plus Jakarta Sans',sans-serif; color:var(--ink);
  margin-bottom:22px;
}
.plan-price sup{font-size:16px; font-weight:700; vertical-align:top; top:.5em; position:relative;}
.plan-price b{font-size:42px; font-weight:800; letter-spacing:-0.03em;}
.plan-price span{font-size:15px; font-weight:600; color:var(--muted);}
.plan .btn{width:100%; margin-bottom:18px;}
.plan-renew{font-size:14px; margin-bottom:22px;}
.plan-feats{text-align:left; display:grid; gap:14px; padding-top:22px; border-top:1px solid var(--card-line);}
.plan-feats li{
  display:flex; align-items:center; gap:10px;
  font-size:14.5px; font-weight:600; color:var(--ink);
  font-family:'Plus Jakarta Sans',sans-serif;
}
.plan-feats li .fx{width:18px; height:18px; flex:none;}
.plan-feats li .fx.ok{stroke:#12B76A;}
.plan-feats li .fx.no{stroke:#F04438;}
.plan-feats li .qi{
  margin-left:auto; width:17px; height:17px; flex:none;
  stroke:#B6BECD;
}
.plan-more{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--card-line);
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:15px;
  color:var(--ink); display:flex; align-items:center; justify-content:center; gap:8px;
}
.plan-more svg{width:14px; height:14px; stroke:var(--ink);}

.plan.feat{
  background:var(--primary); border-color:var(--primary);
  color:rgba(255,255,255,.85);
}
.plan.feat .plan-head h3, .plan.feat .plan-price, .plan.feat .plan-price span,
.plan.feat .plan-feats li, .plan.feat .plan-more{color:#fff;}
.plan.feat .plan-head svg{stroke:var(--lime);}
.plan.feat .plan-feats{border-color:rgba(255,255,255,.22);}
.plan.feat .plan-more{border-color:rgba(255,255,255,.22);}
.plan.feat .plan-more svg{stroke:#fff;}
.plan.feat .plan-feats li .fx.ok{stroke:var(--lime);}
.plan.feat .plan-feats li .fx.no{stroke:#FFB4A8;}
.plan.feat .plan-feats li .qi{stroke:rgba(255,255,255,.55);}
.plan.feat .plan-tag{color:rgba(255,255,255,.85);}
.plan.feat .plan-renew{color:rgba(255,255,255,.8);}

@media (max-width:1100px){ .plans-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .plans-grid{grid-template-columns:1fr;} }

/* pill tabs (pricing page) */
.tabs{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:52px;}
.tab-btn{
  padding:12px 26px; border-radius:999px;
  border:1px solid var(--line); background:#fff; cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:15px; color:var(--ink);
  transition:all .18s ease;
}
.tab-btn:hover{border-color:var(--primary); color:var(--primary);}
.tab-btn.active{background:var(--primary); border-color:var(--primary); color:#fff;}
.price-panel{display:none;}
.price-panel.active{display:block;}
.plans-grid.five{grid-template-columns:repeat(5,1fr); gap:18px;}
@media (max-width:1220px){ .plans-grid.five{grid-template-columns:repeat(3,1fr);} }
@media (max-width:860px){ .plans-grid.five{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .plans-grid.five{grid-template-columns:1fr;} }

/* ============================================================
   SERVICES
   ============================================================ */
.sec-lav{background:var(--lav);}
.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.svc-card{
  background:#fff; border:1px solid var(--card-line); border-radius:var(--radius);
  padding:42px 30px 36px; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.svc-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);}
.svc-card .tile{margin:0 auto 24px;}
.svc-card h3{font-size:21px; margin-bottom:12px;}
.svc-card p{font-size:15px; margin-bottom:24px;}
@media (max-width:1100px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .services-grid{grid-template-columns:1fr;} }

/* ============================================================
   FEATURE ROWS
   ============================================================ */
.feat-row{
  display:grid; grid-template-columns:1fr 1fr; gap:70px;
  align-items:center; margin-bottom:96px;
}
.feat-row:last-child{margin-bottom:0;}
.feat-media{
  background:var(--lav); border:1px solid var(--card-line);
  border-radius:20px; padding:48px 40px;
  display:flex; align-items:center; justify-content:center;
}
.feat-media svg{width:100%; max-width:440px; height:auto;}
.feat-copy h2{font-size:clamp(28px,2.8vw,40px); margin-bottom:18px;}
.feat-copy > p{margin-bottom:30px; font-size:16.5px;}
.feat-item{display:flex; gap:20px; margin-bottom:26px;}
.feat-item h4{font-size:18.5px; margin-bottom:6px;}
.feat-item p{font-size:15px;}
.learn-more{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:16px;
  color:var(--ink); margin-top:6px;
}
.learn-more svg{width:14px; height:14px; stroke:var(--ink); transition:transform .18s ease;}
.learn-more:hover{color:var(--primary);}
.learn-more:hover svg{transform:translate(2px,-2px); stroke:var(--primary);}
@media (max-width:960px){
  .feat-row{grid-template-columns:1fr; gap:38px;}
  .feat-row.rev .feat-media{order:-1;}
}

/* ============================================================
   WHY CHOOSE US  (dark violet band)
   ============================================================ */
.why-sec{
  background:
    radial-gradient(70% 90% at 50% -10%, #7A3FFF 0%, rgba(122,63,255,0) 55%),
    linear-gradient(180deg, #4B16E8 0%, #3A11B8 42%, #131042 100%);
  padding:110px 0 120px;
}
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.why-card{
  background:#fff; border-radius:var(--radius);
  padding:34px 32px;
  display:grid; grid-template-columns:auto 1fr; column-gap:22px;
  align-items:start;
}
.why-card h3{font-size:21px; line-height:1.25; align-self:center;}
.why-card p{grid-column:2; font-size:15px; margin-top:10px;}
@media (max-width:1020px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .why-grid{grid-template-columns:1fr;} }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-viewport{overflow:hidden; padding-top:30px;}
.testi-track{
  display:flex; transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.testi-page{
  flex:none; width:100%;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.testi-card{
  background:#FDFCFF; border:1px solid var(--card-line);
  border-radius:var(--radius);
  padding:56px 26px 32px;
  text-align:center; position:relative;
  margin-top:28px;
}
.quote-dot{
  position:absolute; top:-28px; left:50%; transform:translateX(-50%);
  width:56px; height:56px; border-radius:50%;
  background:var(--primary);
  display:flex; align-items:center; justify-content:center;
}
.quote-dot svg{width:24px; height:24px; fill:#fff;}
.testi-card blockquote{
  font-size:16px; font-weight:600; color:var(--ink);
  font-family:'Plus Jakarta Sans',sans-serif; line-height:1.55;
  margin-bottom:26px;
}
.testi-card .who b{display:block; font-size:16.5px; color:var(--ink); font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;}
.testi-card .who span{font-size:14.5px;}
.testi-card .stars{margin-top:10px; justify-content:center; display:flex;}
.testi-dots{display:flex; justify-content:center; gap:8px; margin-top:40px;}
.testi-dots button{
  width:9px; height:9px; border-radius:999px; border:0; cursor:pointer;
  background:#D6D2EA; transition:all .2s ease; padding:0;
}
.testi-dots button.active{width:26px; background:var(--primary);}
@media (max-width:1060px){ .testi-page{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .testi-page{grid-template-columns:1fr;} }

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:start;}
.faq-intro .pill{margin-bottom:24px;}
.faq-intro h2{font-size:clamp(32px,3.4vw,48px); margin-bottom:20px;}
.faq-intro p{margin-bottom:32px; max-width:420px;}
.faq-list{display:grid; gap:18px;}
.faq-item{
  background:#fff; border:1px solid var(--card-line);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.faq-q{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:24px 28px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:18px; font-weight:700; color:var(--ink); text-align:left;
}
.faq-q .chev{
  width:30px; height:30px; flex:none; border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.faq-q .chev svg{width:14px; height:14px; stroke:var(--ink); transition:transform .25s ease;}
.faq-item.open .chev{background:var(--primary-soft); border-color:transparent;}
.faq-item.open .chev svg{transform:rotate(45deg); stroke:var(--primary);}
.faq-a{
  max-height:0; overflow:hidden; transition:max-height .3s ease;
  padding:0 28px; font-size:15.5px;
}
.faq-item.open .faq-a{padding-bottom:26px;}
@media (max-width:960px){ .faq-grid{grid-template-columns:1fr; gap:42px;} }

/* ============================================================
   SUPPORT TRIO
   ============================================================ */
.support-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.support-card{
  border-radius:var(--radius);
  padding:34px 32px;
  display:grid; grid-template-columns:auto 1fr; column-gap:22px; align-items:start;
}
.support-card svg{width:52px; height:52px; flex:none; margin-top:4px;}
.support-card h3{font-size:22px; margin-bottom:8px;}
.support-card p{font-size:15px;}
.support-card.s-purple{background:var(--primary);}
.support-card.s-purple h3{color:#fff;}
.support-card.s-purple p{color:rgba(255,255,255,.85);}
.support-card.s-purple svg{stroke:var(--lime);}
.support-card.s-navy{background:var(--navy);}
.support-card.s-navy h3{color:#fff;}
.support-card.s-navy p{color:rgba(255,255,255,.8);}
.support-card.s-navy svg{stroke:var(--lime);}
.support-card.s-lime{background:var(--lime);}
.support-card.s-lime h3{color:var(--navy);}
.support-card.s-lime p{color:#2C3A2A;}
.support-card.s-lime svg{stroke:var(--navy);}
.support-grid.two{grid-template-columns:repeat(2,1fr);}
@media (max-width:1020px){ .support-grid{grid-template-columns:1fr;} }

/* ============================================================
   CTA BAND (violet)
   ============================================================ */
.cta-band{
  background:
    radial-gradient(60% 100% at 50% 0%, #7A3FFF 0%, rgba(122,63,255,0) 60%),
    linear-gradient(180deg,#4B16E8 0%, #2E0FA0 100%);
  padding:96px 0; text-align:center;
}
.cta-band h2{color:#fff; font-size:clamp(30px,3.2vw,44px); margin-bottom:16px;}
.cta-band p{color:rgba(255,255,255,.85); font-size:17px; margin-bottom:36px;}
.cta-actions{display:flex; justify-content:center; gap:16px; flex-wrap:wrap;}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero{
  background:
    radial-gradient(55% 75% at 88% 12%, #E9DDFF 0%, rgba(233,221,255,0) 60%),
    radial-gradient(45% 65% at 8% 90%, #FFE7DC 0%, rgba(255,231,220,0) 62%),
    #FDFBF8;
  padding:86px 0 92px; text-align:center;
  border-bottom:1px solid var(--line);
}
.page-hero .pill{margin-bottom:24px;}
.page-hero h1{font-size:clamp(34px,4vw,56px); max-width:820px; margin:0 auto 20px;}
.page-hero p{max-width:640px; margin:0 auto; font-size:17px;}
.crumb{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:14px;
  color:var(--muted); margin-bottom:18px;
}
.crumb a{color:var(--primary);}

/* ============================================================
   ABOUT
   ============================================================ */
.story-split{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center;}
.story-split p{margin-bottom:18px;}
.story-panel{
  background:var(--lav); border:1px solid var(--card-line);
  border-radius:var(--radius); padding:16px 30px;
}
.story-panel .row{
  display:flex; justify-content:space-between; align-items:center;
  padding:17px 0; border-bottom:1px solid var(--card-line);
  font-size:15px;
}
.story-panel .row:last-child{border-bottom:0;}
.story-panel b{font-family:'Plus Jakarta Sans',sans-serif; color:var(--ink); font-weight:700;}
.story-panel .row.stack{display:block;}
.story-panel .row.stack b{display:block; margin-top:6px; line-height:1.5;}
.story-panel .row a{color:var(--primary);}
@media (max-width:920px){ .story-split{grid-template-columns:1fr; gap:38px;} }

.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.value-card{
  background:#fff; border:1px solid var(--card-line); border-radius:var(--radius);
  padding:38px 32px;
}
.value-card .tile{margin-bottom:22px;}
.value-card h3{font-size:20px; margin-bottom:10px;}
.value-card p{font-size:15px;}
@media (max-width:900px){ .values-grid{grid-template-columns:1fr;} }

.stats-band{
  background:
    radial-gradient(60% 100% at 50% 0%, #7A3FFF 0%, rgba(122,63,255,0) 60%),
    linear-gradient(180deg,#4B16E8 0%, #2E0FA0 100%);
  padding:72px 0;
}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; text-align:center;}
.stat b{
  display:block; font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(34px,3.4vw,48px); font-weight:800; color:#fff; letter-spacing:-0.02em;
}
.stat span{color:rgba(255,255,255,.8); font-size:15px; font-weight:600;}
@media (max-width:760px){ .stats-grid{grid-template-columns:repeat(2,1fr);} }

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.svc-detail-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.svc-detail{
  background:#fff; border:1px solid var(--card-line); border-radius:var(--radius);
  padding:36px 30px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.svc-detail:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.svc-detail .tile{margin-bottom:22px;}
.svc-detail h3{font-size:20px; margin-bottom:10px;}
.svc-detail p{font-size:15px; margin-bottom:18px;}
.svc-detail a{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:15px;
  color:var(--primary); display:inline-flex; align-items:center; gap:7px;
}
.svc-detail a svg{width:13px; height:13px; stroke:var(--primary);}
@media (max-width:1020px){ .svc-detail-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .svc-detail-grid{grid-template-columns:1fr;} }

/* ============================================================
   PRICING PAGE extras
   ============================================================ */
.compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.compare-card{
  background:#fff; border:1px solid var(--card-line); border-radius:var(--radius);
  padding:36px 34px;
}
.compare-card h3{font-size:22px; margin-bottom:8px;}
.compare-card .sub{font-size:15px; margin-bottom:22px;}
.compare-card ul{display:grid; gap:12px;}
.compare-card li{
  display:flex; align-items:center; gap:10px;
  font-size:15px; font-weight:600; color:var(--ink);
  font-family:'Plus Jakarta Sans',sans-serif;
}
.compare-card li svg{width:18px; height:18px; stroke:#12B76A; flex:none;}
@media (max-width:820px){ .compare-grid{grid-template-columns:1fr;} }

.guarantee{
  display:grid; grid-template-columns:1.2fr .8fr; gap:60px; align-items:center;
}
.guarantee-list{display:grid; grid-template-columns:1fr 1fr; gap:14px 28px;}
.guarantee-list li{
  display:flex; align-items:center; gap:10px;
  font-size:15px; font-weight:600; color:var(--ink);
  font-family:'Plus Jakarta Sans',sans-serif;
}
.guarantee-list svg{width:18px; height:18px; stroke:#12B76A; flex:none;}
.guarantee-badge{
  background:var(--navy); border-radius:var(--radius);
  padding:46px 40px; text-align:center;
}
.guarantee-badge b{
  display:block; font-family:'Plus Jakarta Sans',sans-serif;
  font-size:52px; font-weight:800; color:var(--lime); letter-spacing:-0.02em;
  margin-bottom:12px;
}
.guarantee-badge span{color:rgba(255,255,255,.85); font-size:15.5px;}
@media (max-width:920px){
  .guarantee{grid-template-columns:1fr; gap:36px;}
  .guarantee-list{grid-template-columns:1fr;}
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:start;}
.contact-info{display:grid; gap:18px;}
.info-card{
  background:#fff; border:1px solid var(--card-line); border-radius:14px;
  padding:22px 24px;
  display:flex; align-items:center; gap:18px;
  box-shadow:var(--shadow);
}
.info-card h4{font-size:16.5px; margin-bottom:3px;}
.info-card a{color:var(--primary); font-weight:600; font-size:15px;}
.info-card p{font-size:15px;}
.form-panel{
  background:#fff; border:1px solid var(--card-line); border-radius:var(--radius);
  padding:42px 40px;
  box-shadow:var(--shadow-lg);
}
.field{margin-bottom:20px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field label{
  display:block; font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700; font-size:14.5px; color:var(--ink); margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%; background:var(--lav);
  border:1px solid var(--card-line); border-radius:10px;
  padding:14px 16px; font-size:15px; font-family:'Inter',sans-serif;
  color:var(--ink); outline:none;
  transition:border-color .18s ease, background .18s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--primary); background:#fff;
}
.field textarea{min-height:140px; resize:vertical;}
.form-note{font-size:13.5px; margin-top:14px; text-align:center;}
.success-msg{
  display:none; align-items:center; gap:10px;
  background:#EDFBEF; border:1px solid #BFE9C8; color:#177A3D;
  border-radius:10px; padding:14px 18px; margin-bottom:22px;
  font-weight:600; font-size:15px;
}
.success-msg.show{display:flex;}
.success-msg svg{width:20px; height:20px; stroke:#177A3D; flex:none;}
@media (max-width:920px){
  .contact-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--lav); border-top:1px solid var(--line); padding:88px 0 0;}
.foot-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:44px;
  padding-bottom:64px;
}
.foot-brand p{font-size:15px; margin:22px 0 26px; max-width:300px;}
.foot-contact{display:grid; gap:14px; margin-bottom:30px;}
.foot-contact a{
  display:flex; align-items:center; gap:13px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:15px; color:var(--ink);
}
.foot-contact .mini-tile{
  width:38px; height:38px; border-radius:9px; flex:none;
  background:var(--navy); display:flex; align-items:center; justify-content:center;
}
.foot-contact .mini-tile svg{width:17px; height:17px; stroke:var(--lime);}
.pay-row{display:flex; flex-wrap:wrap; gap:8px;}
.pay-chip{
  background:#fff; border:1px solid var(--card-line); border-radius:6px;
  padding:6px 12px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:12px;
  color:var(--ink); letter-spacing:.02em;
}
.foot-col h4{font-size:18px; margin-bottom:22px;}
.foot-col a{
  display:block; font-size:15px; color:var(--muted);
  padding:7px 0; font-weight:500;
  transition:color .16s ease;
}
.foot-col a:hover{color:var(--primary);}
.newsletter h4{font-size:19px; margin-bottom:12px;}
.newsletter p{font-size:15px; margin-bottom:20px;}
.news-form{
  display:flex; align-items:center;
  border:1.5px solid var(--primary); border-radius:999px;
  background:#fff; padding:6px 6px 6px 18px; gap:10px;
  max-width:360px;
}
.news-form svg.mail{width:18px; height:18px; stroke:var(--muted); flex:none;}
.news-form input{
  flex:1; border:0; outline:0; background:transparent;
  font-size:14.5px; color:var(--ink); min-width:0; font-family:'Inter',sans-serif;
}
.news-form button{
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:var(--primary); color:#fff; flex:none;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease;
}
.news-form button:hover{background:var(--primary-2);}
.news-form button svg{width:15px; height:15px; stroke:#fff;}
.social-h{font-size:17px; margin:30px 0 16px;}
.social-row{display:flex; gap:10px;}
.social-row a{
  width:40px; height:40px; border-radius:9px;
  border:1px solid #D8CEFB; background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:all .18s ease;
}
.social-row a svg{width:17px; height:17px; fill:var(--primary);}
.social-row a:hover{background:var(--primary); border-color:var(--primary);}
.social-row a:hover svg{fill:#fff;}
.foot-bottom{
  border-top:1px solid var(--line);
  padding:26px 0;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:14.5px;
}
@media (max-width:1120px){
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr;}
}

/* ---------- scroll to top ---------- */
.to-top{
  position:fixed; right:26px; bottom:26px; z-index:70;
  width:52px; height:52px; border-radius:50%;
  background:var(--primary); border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(77,31,214,.35);
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:all .25s ease;
}
.to-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}
.to-top svg{width:20px; height:20px; stroke:#fff;}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---- Hero: infrastructure positioning ---- */
.hero h1{font-size:clamp(36px, 4.1vw, 58px); line-height:1.1;}
.hero-sub{font-size:18px; line-height:1.6; max-width:560px; margin-bottom:28px;}
.hero-points{list-style:none; margin:0 0 32px; padding:0; display:grid; gap:14px; max-width:560px;}
.hero-points li{display:flex; align-items:flex-start; gap:14px;}
.hero-points .hp-ico{
  flex:0 0 42px; width:42px; height:42px; border-radius:11px;
  background:var(--lime); display:grid; place-items:center;
}
.hero-points .hp-ico svg{width:21px; height:21px; stroke:var(--navy); stroke-linecap:round; stroke-linejoin:round;}
.hero-points b{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:16.5px; color:var(--ink); margin-bottom:2px;}
.hero-points div span{display:block; font-size:14.5px; line-height:1.5; color:var(--muted);}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px;}

/* ---- Pricing: explanatory notes under plan cards ---- */
.plan-notes{
  margin-top:28px; padding:22px 26px;
  background:var(--lav); border:1px solid var(--line); border-radius:14px;
  display:grid; gap:10px;
}
.plan-notes p{margin:0; font-size:15px; line-height:1.65; color:var(--muted);}
.plan-notes b{color:var(--ink); font-family:'Plus Jakarta Sans',sans-serif;}

/* ---- Free DevOps Support section ---- */
.ds-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.ds-card{
  background:var(--lav); border:1px solid var(--line); border-radius:16px;
  padding:28px 24px;
}
.ds-card .tile{margin-bottom:18px;}
.ds-card h3{font-size:20px; margin-bottom:14px;}
.ds-card ul{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.ds-card li{display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.45; color:var(--muted);}
.ds-card li svg{flex:0 0 18px; width:18px; height:18px; margin-top:1px; stroke:var(--primary); stroke-linecap:round; stroke-linejoin:round;}
.ds-upsell{
  margin-top:28px; padding:26px 32px; border-radius:16px;
  background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.ds-upsell p{margin:0; font-size:18px; line-height:1.5; color:rgba(255,255,255,.85);}
.ds-upsell b{color:#fff; font-family:'Plus Jakarta Sans',sans-serif;}
.plan-notes a{color:var(--primary); font-weight:600; white-space:nowrap;}
@media (max-width:1100px){ .ds-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .ds-grid{grid-template-columns:1fr;} .ds-upsell{padding:22px;} }

/* ---- Business Infrastructure growth path ---- */
.ib-path{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:34px;
  align-items:start;
}
.ib-step{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:26px 20px 24px; text-align:center;
  box-shadow:var(--shadow);
}
/* rising staircase on desktop */
.ib-step:nth-child(1){margin-top:88px;}
.ib-step:nth-child(2){margin-top:66px;}
.ib-step:nth-child(3){margin-top:44px;}
.ib-step:nth-child(4){margin-top:22px;}
.ib-step:nth-child(5){margin-top:0; background:var(--navy); border-color:var(--navy);}
.ib-step:nth-child(5) h3{color:#fff;}
.ib-step:nth-child(5) p{color:rgba(255,255,255,.78);}
.ib-step .tile{margin:0 auto 16px;}
.ib-step h3{font-size:18px; margin-bottom:8px;}
.ib-step p{font-size:14.5px; line-height:1.55; margin:0;}
.ib-num{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  width:26px; height:26px; border-radius:50%;
  background:var(--primary); color:#fff; font-size:13px; font-weight:700;
  display:grid; place-items:center; font-family:'Plus Jakarta Sans',sans-serif;
}
/* arrow between steps */
.ib-step:not(:last-child)::after{
  content:""; position:absolute; top:50%; right:-24px;
  width:12px; height:12px; margin-top:-6px;
  border-top:3px solid var(--primary); border-right:3px solid var(--primary);
  transform:rotate(45deg);
}
.ib-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:44px;}
@media (max-width:1100px){
  .ib-path{grid-template-columns:1fr; max-width:420px; margin:0 auto; gap:38px;}
  .ib-step:nth-child(n){margin-top:0;}
  .ib-step:not(:last-child)::after{
    top:auto; right:auto; bottom:-27px; left:50%; margin:0 0 0 -6px;
    transform:rotate(135deg);
  }
}

/* ---- Refund Policy page ---- */
.policy{max-width:820px;}
.policy h2{font-size:clamp(22px,2.2vw,28px); margin:40px 0 14px;}
.policy p{font-size:16.5px; line-height:1.7; margin-bottom:14px;}
.policy ul, .policy ol{margin:0 0 16px 22px; padding:0; display:grid; gap:8px;}
.policy ul{list-style:disc;}
.policy ol{list-style:decimal;}
.policy li{font-size:16px; line-height:1.65; color:var(--muted); padding-left:4px;}
.policy a{color:var(--primary); font-weight:600;}
.policy-summary{
  background:var(--lav); border:1px solid var(--line); border-left:4px solid var(--primary);
  border-radius:14px; padding:22px 26px; margin-bottom:8px;
}
.policy-summary b{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; color:var(--ink); margin-bottom:10px;}
.policy-summary ul{margin-bottom:0;}
.policy-updated{font-size:14px !important; color:var(--muted); margin-top:28px;}

/* ---- Case studies ---- */
.cs-tags{display:flex; flex-wrap:wrap; gap:8px;}
.cs-tag{
  font-size:12.5px; font-weight:600; color:var(--primary);
  background:var(--primary-soft); border-radius:999px; padding:4px 11px;
}
.cs-num{
  display:inline-block; font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--primary); margin-bottom:10px;
}
/* homepage cards */
.cs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.cs-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:28px 26px; box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.cs-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);}
.cs-card h3{font-size:20px; margin-bottom:10px;}
.cs-card p{font-size:15px; line-height:1.6; margin-bottom:18px;}
.cs-card .cs-tags{margin-bottom:20px;}
.cs-more{
  margin-top:auto; display:inline-flex; align-items:center; gap:6px;
  font-weight:700; font-size:14.5px; color:var(--primary);
}
.cs-more svg{width:14px; height:14px;}
.cs-grid .cs-card:nth-child(4), .cs-grid .cs-card:nth-child(5){grid-column:span 1;}
@media (max-width:1100px){ .cs-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .cs-grid{grid-template-columns:1fr;} }
/* case studies page */
.cs-index{padding:0 0 10px;}
.cs-jump{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.cs-jump a{
  display:inline-flex; align-items:center; gap:10px; padding:9px 16px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  font-size:14.5px; font-weight:600; color:var(--ink);
}
.cs-jump a:hover{border-color:var(--primary); color:var(--primary);}
.cs-jump b{
  width:22px; height:22px; border-radius:50%; background:var(--primary); color:#fff;
  display:grid; place-items:center; font-size:12px;
}
.cs-case{padding:56px 0; border-bottom:1px solid var(--line); scroll-margin-top:90px;}
.cs-case:nth-of-type(even){background:var(--lav);}
.cs-head{max-width:820px; margin-bottom:30px;}
.cs-head h2{font-size:clamp(26px,3vw,38px); margin-bottom:16px;}
.cs-body{display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:24px; align-items:start;}
.cs-col{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 24px;}
.cs-case:nth-of-type(even) .cs-col{background:#fff;}
.cs-col h3{font-size:18px; margin-bottom:14px;}
.cs-col p{font-size:15.5px; line-height:1.65; margin:0;}
.cs-list{list-style:none; margin:0; padding:0; display:grid; gap:11px;}
.cs-list li{display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.55; color:var(--muted);}
.cs-list svg{flex:0 0 18px; width:18px; height:18px; margin-top:2px; stroke:var(--primary); stroke-linecap:round; stroke-linejoin:round;}
.cs-result{background:var(--navy) !important; border-color:var(--navy);}
.cs-result h3{color:var(--lime);}
.cs-result p{color:rgba(255,255,255,.88);}
@media (max-width:1000px){ .cs-body{grid-template-columns:1fr;} }

/* ---- Managed services ---- */
.ms-grid .svc-card p{margin-bottom:0;}
.ms-grid .svc-card{padding-bottom:30px;}

/* ---- Footer: 5 columns ---- */
.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;}
@media (max-width:1120px){ .foot-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr;} }

/* ---- Solution landing pages ---- */
.lp-hero-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px;}
.lp-prose{max-width:820px;}
.lp-prose h2{font-size:clamp(24px,2.6vw,32px); margin:44px 0 14px;}
.lp-prose h2:first-child{margin-top:0;}
.lp-prose p{font-size:16.5px; line-height:1.75; margin:0 0 16px;}
.lp-prose a, .faq-a a, .lp-table a{color:var(--primary); font-weight:600;}
.lp-prose code, .faq-a code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em;
  background:var(--primary-soft); color:var(--ink); padding:2px 6px; border-radius:6px;
}
.lp-list{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:10px;}
.lp-list li{display:flex; align-items:flex-start; gap:10px; font-size:16px; line-height:1.6; color:var(--muted);}
.lp-list svg{flex:0 0 18px; width:18px; height:18px; margin-top:3px; stroke:var(--primary); stroke-linecap:round; stroke-linejoin:round;}
.lp-table{overflow-x:auto; margin:18px 0 22px; border:1px solid var(--line); border-radius:14px;}
.lp-table table{width:100%; border-collapse:collapse; font-size:15px; min-width:520px;}
.lp-table th{background:var(--lav); text-align:left; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; color:var(--ink); padding:12px 16px; border-bottom:1px solid var(--line);}
.lp-table td{padding:12px 16px; border-bottom:1px solid var(--line); color:var(--muted); line-height:1.55; vertical-align:top;}
.lp-table tr:last-child td{border-bottom:0;}
.lp-table td:first-child{color:var(--ink); font-weight:600;}
.lp-code-label{font-size:13px; font-weight:600; color:var(--muted); margin:20px 0 8px;}
.lp-code{
  background:#0E1B33; color:#E6E9F5; border-radius:12px; padding:18px 20px; margin:0 0 20px;
  overflow-x:auto; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px; line-height:1.65;
}
.lp-code code{background:none; color:inherit; padding:0; font-size:inherit; white-space:pre;}
.lp-cards{display:grid; gap:22px;}
.lp-cards.c4{grid-template-columns:repeat(4,1fr);}
.lp-cards.c3{grid-template-columns:repeat(3,1fr);}
.lp-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 22px; box-shadow:var(--shadow);}
.lp-card .tile{margin-bottom:16px;}
.lp-card h3{font-size:18px; margin-bottom:8px;}
.lp-card p{font-size:15px; line-height:1.6; margin:0;}
.lp-card a{color:var(--primary); font-weight:600;}
.lp-steps{list-style:none; margin:0 auto; padding:0; display:grid; gap:16px; max-width:820px;}
.lp-steps li{display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 22px;}
.lp-n{
  flex:0 0 34px; width:34px; height:34px; border-radius:50%; background:var(--primary); color:#fff;
  display:grid; place-items:center; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif;
}
.lp-steps h3{font-size:17px; margin-bottom:4px;}
.lp-steps p{font-size:15px; line-height:1.6; margin:0;}
.lp-related{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.lp-rel{
  display:flex; flex-direction:column; gap:6px; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:20px; transition:transform .25s ease, box-shadow .25s ease;
}
.lp-rel:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.lp-rel b{font-family:'Plus Jakarta Sans',sans-serif; color:var(--ink); font-size:16.5px;}
.lp-rel span{font-size:14.5px; color:var(--muted); line-height:1.5;}
.ms-link{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-weight:700; font-size:14.5px; color:var(--primary);}
.ms-link svg{width:14px; height:14px;}
@media (max-width:1100px){ .lp-cards.c4,.lp-cards.c3{grid-template-columns:repeat(2,1fr);} .lp-related{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .lp-cards.c4,.lp-cards.c3,.lp-related{grid-template-columns:1fr;} .lp-steps li{padding:18px;} }

/* ---------- About Zealous: engineers + stats ---------- */
.eng-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.eng-stat{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--card-line); border-radius:var(--radius);
  padding:34px 28px 30px; box-shadow:var(--shadow);
}
.eng-bar{position:absolute; top:0; left:0; right:0; height:5px;}
.eng-stat b{
  display:block; font-family:'Plus Jakarta Sans',sans-serif; color:var(--ink);
  font-size:clamp(26px,2.4vw,34px); font-weight:800; letter-spacing:-0.02em; line-height:1.15;
  margin-bottom:10px;
}
.eng-stat > span:last-child{font-size:15px; font-weight:600; color:var(--muted);}
.eng-tags{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:38px;}
.eng-tags span{
  background:var(--primary-soft); color:var(--primary); font-weight:600; font-size:14px;
  padding:8px 16px; border-radius:999px;
}
.eng-more{text-align:center; margin-top:34px;}
@media (max-width:1020px){ .eng-stats{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .eng-stats{grid-template-columns:1fr;} }

/* ---------- Support levels ---------- */
.tier-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.tier-card{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--card-line); border-radius:var(--radius);
  padding:34px 30px 30px; box-shadow:var(--shadow);
}
.tier-level{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--primary); margin-bottom:10px;}
.tier-card h3{font-size:22px; margin-bottom:6px;}
.tier-for{font-size:14px; margin-bottom:18px;}
.tier-promise{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:var(--ink); font-size:16.5px; line-height:1.4;
  background:var(--primary-soft); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:16px;
}
.tier-card > p:not(.tier-for){font-size:15px; margin-bottom:22px;}
.tier-link{margin-top:auto; display:inline-flex; align-items:center; gap:6px; color:var(--primary); font-weight:600; font-size:15px; text-decoration:none;}
.tier-link svg{width:16px; height:16px; stroke:currentColor;}
@media (max-width:960px){ .tier-grid{grid-template-columns:1fr;} }

/* ---------- Hero: infrastructure illustration ---------- */
.hv-infra{padding:30px 26px 22px;}
.hv-infra .hv-scene{margin-top:0;}
.hv-infra .hv-scene svg{max-width:520px;}
.hv-infra .hv-chip svg{stroke-linecap:round; stroke-linejoin:round;}
.hv-infra .hv-chip.c1{top:-26px; right:18px;}
.hv-infra .hv-chip.c2{top:auto; bottom:-24px; left:18px;}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:56px;}
  .hero-visual{max-width:600px; width:100%; margin:0 auto;}
}
@media (max-width:560px){
  .hv-infra{padding:22px 12px 16px;}
  .hv-infra .hv-chip{padding:9px 12px;}
  .hv-infra .hv-chip b{font-size:15px;}
  .hv-infra .hv-chip.c1{right:10px;}
  .hv-infra .hv-chip.c2{left:10px;}
}
@media (max-width:1020px){ .support-grid.two{grid-template-columns:1fr;} }

/* ---------- Hero: DevOps-led ---------- */
.hero-pill{margin-bottom:22px;}