/* ============================================================
   TOKENS
============================================================ */
:root {
  --g:    #00b854;
  --gd:   #009944;
  --gl:   rgba(0,184,84,.12);
  --gb:   rgba(0,184,84,.25);

  --bg0:  #040810;
  --bg1:  #070d1a;
  --bg2:  #0a1322;
  --bg3:  #0e192e;

  --txt:  #cdd8f0;
  --txt2: #6d88ab;
  --bdr:  rgba(0,184,84,.13);
  --bdr2: rgba(0,184,84,.3);
}

/* ============================================================
   BASE
============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg0); color:var(--txt);
  font-family:'Plus Jakarta Sans',sans-serif;
  overflow-x:hidden; cursor:none;
}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg0)}
::-webkit-scrollbar-thumb{background:var(--g);border-radius:3px}

/* ============================================================
   CURSOR
============================================================ */
#cDot {
  position:fixed; width:8px; height:8px; background:var(--g);
  border-radius:50%; pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%); mix-blend-mode:difference;
  transition:width .18s, height .18s;
}
#cRing {
  position:fixed; width:30px; height:30px;
  border:1.5px solid rgba(0,184,84,.55); border-radius:50%;
  pointer-events:none; z-index:99998;
  transform:translate(-50%,-50%);
  transition:width .3s, height .3s, border-color .3s;
}
body.hov #cDot { width:14px; height:14px; }
body.hov #cRing { width:50px; height:50px; border-color:var(--g); }

/* ============================================================
   NAV
============================================================ */
#nav {
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:9000; width:94%; max-width:1240px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; height:60px;
  background:rgba(4,8,16,.78); backdrop-filter:blur(22px);
  border:1px solid var(--bdr); border-radius:100px;
  transition:top .3s, background .3s;
}
#nav.sk { top:8px; background:rgba(4,8,16,.97); }

.nLogo img { height:45px; display:block; }

.nMenu { display:flex; gap:2px; list-style:none; }
.nMenu > li { position:relative; }
.nMenu a {
  display:flex; align-items:center; gap:5px;
  color:rgba(205,216,240,.42); font-size:.81rem; font-weight:600;
  text-decoration:none; padding:7px 13px; border-radius:100px;
  transition:color .2s, background .2s;
}
.nMenu a:hover { color:var(--txt); background:rgba(255,255,255,.06); }

.caret { font-size:.52rem; opacity:.35; display:inline-block; transition:transform .25s; }
.nMenu li:hover .caret { transform:rotate(180deg); }

/* =========================
   DROPDOWN MENU
========================= */

.nMenu li {
  position: relative;
}

/* Dropdown */
.nDrop {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);

  background: rgba(4, 8, 16, 0.98);
  border: 1px solid var(--bdr2);
  border-radius: 18px;

  padding: 14px 8px 8px;
  min-width: 252px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease;

  backdrop-filter: blur(28px);
  z-index: 999;
}

/* Small invisible hover bridge */
.nDrop::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  width: 100%;
  height: 12px;
}

/* Show dropdown */
.nMenu li:hover .nDrop,
.nDrop:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* Dropdown links */
.nDrop a {
  display: flex;
  align-items: center;
  gap: 11px;

  padding: 10px 14px;
  border-radius: 10px;

  color: rgba(205, 216, 240, 0.48);
  font-size: .82rem;
  font-weight: 500;

  white-space: nowrap;
  text-decoration: none;

  background: transparent;
  transition: all .22s ease;
}

/* Link hover */
.nDrop a:hover {
  background: rgba(0, 184, 84, 0.09);
  color: var(--g);
  padding-left: 20px;
}

/* Icons */
.nDrop a svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  opacity: .65;
  transition: opacity .22s ease;
}

.nDrop a:hover svg {
  opacity: 1;
}

/* CTA Button */
.nCTA {
  background: var(--g);
  color: #040810;

  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: .79rem;
  letter-spacing: .03em;

  padding: 10px 22px;
  border-radius: 100px;

  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;

  transition: all .2s ease;
}

.nCTA:hover {
  background: #fff;
  box-shadow: 0 0 26px rgba(0, 184, 84, .4);
  transform: scale(1.03);
}

/* Hamburger */
.hbg {
  display: none;
  flex-direction: column;
  gap: 5px;

  cursor: pointer;
  padding: 6px;
}

.hbg span {
  width: 22px;
  height: 2px;

  background: var(--g);
  border-radius: 2px;

  display: block;
  transition: all .3s ease;
}

/* Mobile menu */
#mob {
  position:fixed; inset:0; background:rgba(3,6,12,.97);
  backdrop-filter:blur(24px); z-index:8999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; opacity:0; pointer-events:none; transition:opacity .35s;
}
#mob.open { opacity:1; pointer-events:all; }
#mob a {
  font-family:'Bebas Neue',sans-serif; font-size:2.8rem;
  color:rgba(205,216,240,.55); text-decoration:none;
  letter-spacing:.1em; transition:color .2s;
}
#mob a:hover { color:var(--g); }

/* ============================================================
   HERO  ← complete redesign
============================================================ */
#hero {
  min-height:100vh; position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:0;
  padding:100px 5% 80px;
}

/* Background layers */
/* ============================================================
   HERO — CINEMATIC FULL-SCREEN REDESIGN
============================================================ */
#hero {
  min-height:100vh; position:relative; overflow:hidden;
  display:flex; align-items:center;
  padding:120px 5% 80px;
}

#heroCv { position:absolute; inset:0; z-index:0; }

.hBgGrid {
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(0,184,84,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,184,84,.025) 1px, transparent 1px);
  background-size:80px 80px;
}
.hBgFade {
  position:absolute; inset:0; z-index:2;
  background:radial-gradient(ellipse 80% 90% at 50% 50%, transparent 15%, var(--bg0) 75%);
}

/* Glowing orbs */
.hOrb { position:absolute; border-radius:50%; filter:blur(130px); pointer-events:none; z-index:1; }
.hO1 {
  width:900px; height:900px;
  background:radial-gradient(circle, rgba(0,160,70,.14), transparent 65%);
  top:-350px; right:-250px; animation:oA 15s ease-in-out infinite;
}
.hO2 {
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(0,20,110,.22), transparent 65%);
  bottom:-150px; left:-200px; animation:oB 18s ease-in-out infinite;
}
.hO3 {
  width:350px; height:350px;
  background:radial-gradient(circle, rgba(0,184,84,.08), transparent 65%);
  top:50%; left:55%; animation:oC 11s ease-in-out infinite;
}
@keyframes oA { 0%,100%{transform:scale(1) translate(0,0)} 50%{transform:scale(1.08) translate(-50px,30px)} }
@keyframes oB { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-40px)} }
@keyframes oC { 0%,100%{transform:scale(1)} 50%{transform:scale(1.5)} }

/* ── Hero inner layout: left text | right image card ── */
.hInner {
  position:relative; z-index:3;
  max-width:1200px; width:100%; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; align-items:center;
}

/* LEFT */
.hLeft { position:relative; }

.hEyebrow {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(0,184,84,.08); border:1px solid rgba(0,184,84,.22);
  padding:7px 18px; border-radius:100px;
  font-size:.7rem; font-weight:700; color:var(--g);
  letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:28px;
  opacity:0; transform:translateY(20px);
}
.hPulse {
  width:6px; height:6px; background:var(--g); border-radius:50%;
  animation:blink 1.8s ease-in-out infinite; flex-shrink:0;
}
@keyframes blink {
  0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(0,184,84,.6)}
  50%{opacity:.25; box-shadow:0 0 0 8px rgba(0,184,84,0)}
}

.hTitle {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(4.2rem, 8.5vw, 9rem);
  line-height:.86; letter-spacing:.015em;
  margin-bottom:28px;
}
.hL1 { display:block; color:var(--txt); opacity:0; transform:translateY(70px); }
.hL2 {
  display:block; color:transparent;
  -webkit-text-stroke:2px rgba(0,184,84,.55);
  opacity:0; transform:translateY(70px);
}
.hL3 { display:block; color:var(--g); opacity:0; transform:translateY(70px); }

.hSub {
  font-size:1rem; color:rgba(205,216,240,.48); line-height:1.85;
  max-width:480px; margin-bottom:38px;
  opacity:0; transform:translateY(24px);
}
.hSub strong { color:rgba(205,216,240,.85); font-weight:700; }

.hBtns {
  display:flex; gap:12px; flex-wrap:wrap;
  opacity:0; transform:translateY(24px);
}

.hScrollHint {
  display:flex; align-items:center; gap:12px;
  margin-top:36px; color:var(--txt2);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; transform:translateY(16px);
}
.scrollPill {
  width:24px; height:42px; border:1px solid rgba(0,184,84,.22);
  border-radius:12px; display:flex; align-items:flex-start;
  justify-content:center; padding-top:5px;
}
.scrollDot {
  width:3px; height:7px; background:var(--g); border-radius:2px;
  animation:sdrop 2s ease-in-out infinite;
}
@keyframes sdrop {
  0%{transform:translateY(0);opacity:1}
  70%{transform:translateY(14px);opacity:0}
  71%{transform:translateY(0);opacity:0}
  100%{opacity:1}
}

/* RIGHT — stacked visual panels */
.hRight {
  position:relative; z-index:3;
  display:flex; flex-direction:column; gap:14px;
  opacity:0; transform:translateX(50px);
}

/* Big hero image panel */
.hImgPanel {
  position:relative; border-radius:20px; overflow:hidden;
  border:1px solid var(--bdr2); height:280px;
}
.hImgPanel img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.6) saturate(1.2);
  transition:transform .6s ease;
}
.hImgPanel:hover img { transform:scale(1.04); }
.hImgOverlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(4,8,16,.5), rgba(0,80,40,.15));
  z-index:1;
}
/* Logo watermark in corner */
.hImgLogo {
  position:absolute; bottom:16px; right:16px; z-index:2;
  opacity:.85;
}
.hImgLogo img { height:32px; filter:drop-shadow(0 0 8px rgba(0,184,84,.6)); }

/* Bottom row of 3 metric cards */
.hMetrics {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.hMCard {
  background:rgba(7,13,26,.9);
  border:1px solid var(--bdr); border-radius:14px;
  padding:16px 14px; backdrop-filter:blur(16px);
  cursor:default; transition:border-color .3s, transform .3s;
  text-align:center;
}
.hMCard:hover { border-color:var(--bdr2); transform:translateY(-4px); }
.hMVal {
  font-family:'Bebas Neue',sans-serif; font-size:2rem;
  color:var(--g); line-height:1; margin-bottom:4px;
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.hMVal svg { width:14px; height:14px; }
.hMLbl { font-size:.65rem; color:var(--txt2); text-transform:uppercase; letter-spacing:.08em; }

/* Trust badges strip */
.hTrust {
  display:flex; gap:10px; align-items:center;
  flex-wrap:wrap;
}
.hTrustBadge {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:100px;
  border:1px solid rgba(255,255,255,.08);
  font-size:.7rem; font-weight:600; color:rgba(205,216,240,.4);
  cursor:default; transition:all .2s;
}
.hTrustBadge:hover { border-color:var(--bdr); color:var(--g); }
.hTrustBadge svg { width:11px; height:11px; color:var(--g); }

/* ============================================================
   BUTTONS
============================================================ */
.btnG {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--g); color:#040810;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:.85rem;
  letter-spacing:.02em; padding:14px 28px; border-radius:100px;
  border:none; cursor:none; text-decoration:none;
  transition:all .25s; position:relative; overflow:hidden;
}
.btnG::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:translateX(-120%); transition:transform .55s;
}
.btnG:hover { background:#fff; transform:translateY(-3px); box-shadow:0 12px 36px rgba(0,184,84,.35); }
.btnG:hover::after { transform:translateX(120%); }

.btnO {
  display:inline-flex; align-items:center; gap:9px;
  background:transparent; color:rgba(205,216,240,.65);
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.85rem;
  padding:14px 26px; border-radius:100px;
  border:1px solid rgba(255,255,255,.13); cursor:none; text-decoration:none;
  transition:all .25s;
}
.btnO:hover { border-color:var(--g); color:var(--g); transform:translateY(-3px); }

/* ============================================================
   TICKER
============================================================ */
.ticker {
  overflow:hidden; background:var(--g);
  border-top:1px solid rgba(0,100,40,.25);
  border-bottom:1px solid rgba(0,100,40,.25);
  padding:11px 0;
}
.tickerTrack {
  display:flex; width:max-content;
  animation:tickAnim 22s linear infinite;
}
.ticker:hover .tickerTrack { animation-play-state:paused; }
.tickerItem {
  display:inline-flex; align-items:center; gap:10px;
  padding:0 22px; white-space:nowrap;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700;
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:#040810;
}
.tickerItem svg { width:13px; height:13px; flex-shrink:0; }
.tickerDot { width:4px; height:4px; background:rgba(4,8,16,.35); border-radius:50%; flex-shrink:0; }
@keyframes tickAnim { to { transform:translateX(-50%); } }

/* ============================================================
   SHARED
============================================================ */
.sec { padding:110px 5%; }
.mx  { max-width:1200px; margin:0 auto; }

.sTag {
  display:inline-flex; align-items:center; gap:9px;
  font-size:.68rem; font-weight:700; color:var(--g);
  letter-spacing:.18em; text-transform:uppercase; margin-bottom:13px;
}
.sTag::before { content:''; width:16px; height:2px; background:var(--g); border-radius:2px; }

.sHdg {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.8rem, 5.2vw, 4.8rem);
  line-height:.9; letter-spacing:.02em; margin-bottom:16px;
}
.sHdg em  { font-style:normal; color:var(--g); }
.sHdg i   { font-style:italic; color:rgba(205,216,240,.28); font-family:Georgia,serif; font-size:88%; }
.sSub { color:rgba(205,216,240,.36); font-size:.94rem; line-height:1.88; max-width:480px; }

/* scroll reveal */
[data-r] { opacity:0; transform:translateY(40px); transition:opacity .85s ease, transform .85s ease; }
[data-r="l"] { transform:translateX(-50px); }
[data-r="r"] { transform:translateX(50px); }
[data-r="s"] { opacity:0; transform:scale(.95); transition:opacity .7s ease, transform .7s ease; }
[data-r].on  { opacity:1; transform:none; }

/* ============================================================
   SERVICES
============================================================ */
#svc { background:var(--bg1); }
.svcLayout { display:grid; grid-template-columns:290px 1fr; gap:72px; align-items:start; }
.svcSticky { position:sticky; top:108px; }
.svcSticky .sSub { margin-bottom:26px; }
.svcGrid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; border:1px solid var(--bdr); border-radius:20px;
  overflow:hidden; background:rgba(0,184,84,.06);
}
.sCard {
  background:var(--bg1); padding:36px 28px;
  position:relative; overflow:hidden; cursor:default; transition:background .3s;
}
.sCard::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(0,184,84,.06), transparent 55%);
  opacity:0; transition:.35s;
}
.sCard::after {
  content:''; position:absolute; left:0; top:18%; bottom:18%;
  width:2px; background:linear-gradient(to bottom,transparent,var(--g),transparent);
  transform:scaleY(0); transition:.42s; transform-origin:top;
}
.sCard:hover { background:rgba(0,184,84,.03); }
.sCard:hover::before { opacity:1; }
.sCard:hover::after  { transform:scaleY(1); }
.sNum  { position:absolute; top:10px; right:14px; font-family:'Bebas Neue',sans-serif; font-size:3.8rem; color:rgba(0,184,84,.04); line-height:1; }
.sIco  { width:46px; height:46px; background:rgba(0,184,84,.09); border:1px solid rgba(0,184,84,.18); border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:15px; transition:transform .35s, background .35s; }
.sCard:hover .sIco { transform:scale(1.12) rotate(-8deg); background:rgba(0,184,84,.18); }
.sName { font-weight:800; font-size:.95rem; margin-bottom:8px; }
.sDesc { color:rgba(205,216,240,.34); font-size:.81rem; line-height:1.75; }
.sMore { display:inline-flex; align-items:center; gap:5px; color:var(--g); font-size:.72rem; font-weight:700; text-decoration:none; letter-spacing:.07em; text-transform:uppercase; margin-top:12px; opacity:0; transform:translateX(-8px); transition:.25s; }
.sCard:hover .sMore { opacity:1; transform:none; }

/* ============================================================
   NUMBERS STRIP
============================================================ */
#nums {
  background:var(--bg0); padding:56px 5%;
  border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr);
}
.numGrid {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--bdr);
  border:1px solid var(--bdr); border-radius:18px; overflow:hidden;
}
.numItem {
  background:var(--bg0); padding:38px 26px; text-align:center;
  cursor:default; transition:background .3s; position:relative; overflow:hidden;
}
.numItem::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--g), transparent);
  transform:scaleX(0); transition:transform .4s;
}
.numItem:hover { background:rgba(0,184,84,.04); }
.numItem:hover::after { transform:scaleX(1); }
.numVal { font-family:'Bebas Neue',sans-serif; font-size:3.6rem; color:var(--g); line-height:1; margin-bottom:6px; display:block; }
.numLbl { font-size:.72rem; color:var(--txt2); text-transform:uppercase; letter-spacing:.1em; font-weight:600; }

/* ============================================================
   ABOUT
============================================================ */
#about { overflow:hidden; }
.aboutGrid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }

.aboutVis { position:relative; height:560px; }
/* spinning border glow */
.aboutGlow {
  position:absolute; inset:-3px; border-radius:27px;
  background:conic-gradient(from 0deg, transparent 75%, rgba(0,184,84,.55) 100%);
  animation:glowSpin 5s linear infinite; z-index:0;
}
@keyframes glowSpin { to { transform:rotate(360deg); } }

.aboutImgWrap {
  position:absolute; inset:0; border-radius:24px; overflow:hidden;
  border:1px solid var(--bdr); z-index:1;
}
.aboutImgWrap img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.65) saturate(1.1) contrast(1.05);
  transition:transform .5s;
}
.aboutImgWrap:hover img { transform:scale(1.04); }
/* dark gradient overlay so text on top is readable */
.aboutImgWrap::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(4,8,16,.4), rgba(0,80,40,.15));
}

.aboutCard {
  position:absolute; background:rgba(4,8,16,.92);
  border:1px solid var(--bdr); border-radius:14px;
  padding:15px 20px; backdrop-filter:blur(16px); z-index:2;
}
.abC1 { bottom:24px; left:-24px; }
.abC2 { top:26px; right:-24px; display:flex; align-items:center; gap:11px; }
.abNum { font-family:'Bebas Neue',sans-serif; font-size:2.4rem; color:var(--g); line-height:1; }
.abLbl { font-size:.64rem; color:var(--txt2); text-transform:uppercase; letter-spacing:.07em; margin-top:2px; }
.abIco { width:38px; height:38px; background:rgba(0,184,84,.12); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.aboutTxt .sSub { margin-bottom:28px; }
.ckList { list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:34px; }
.ckList li { display:flex; align-items:flex-start; gap:12px; font-size:.89rem; color:rgba(205,216,240,.52); line-height:1.65; }
.ck { width:19px; height:19px; background:rgba(0,184,84,.1); border:1px solid rgba(0,184,84,.26); border-radius:5px; display:flex; align-items:center; justify-content:center; color:var(--g); font-size:.68rem; flex-shrink:0; margin-top:2px; }
.certRow { display:flex; flex-wrap:wrap; gap:7px; margin-top:34px; }
.cert { padding:5px 14px; border:1px solid rgba(255,255,255,.07); border-radius:100px; font-size:.72rem; color:var(--txt2); font-weight:600; transition:all .2s; cursor:default; }
.cert:hover { border-color:var(--g); color:var(--g); }

/* ============================================================
   PROCESS
============================================================ */
#proc { background:var(--bg1); }
.procTop { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:52px; flex-wrap:wrap; gap:18px; }
.procGrid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:rgba(0,184,84,.07);
  border:1px solid var(--bdr); border-radius:20px; overflow:hidden;
}
.pStep { background:var(--bg1); padding:42px 26px; position:relative; overflow:hidden; cursor:default; transition:background .3s; }
.pStep:hover { background:rgba(0,184,84,.035); }
.pStep::after { content:''; position:absolute; bottom:0; right:0; width:0; height:0; border-left:30px solid transparent; border-bottom:30px solid rgba(0,184,84,.07); transition:border-color .3s; }
.pStep:hover::after { border-bottom-color:rgba(0,184,84,.16); }
.pNum  { font-family:'Bebas Neue',sans-serif; font-size:5rem; color:rgba(0,184,84,.06); line-height:1; margin-bottom:14px; display:block; transition:color .4s, transform .4s; }
.pStep:hover .pNum { color:rgba(0,184,84,.18); transform:scale(1.05); }
.pName { font-weight:800; font-size:.96rem; margin-bottom:9px; }
.pDesc { color:rgba(205,216,240,.35); font-size:.82rem; line-height:1.8; }

/* ============================================================
   CASE STUDIES  — images using CSS gradients as fallback
============================================================ */
#work { background:var(--bg0); }
.workTop { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; flex-wrap:wrap; gap:14px; }
.caseGrid {
  display:grid; grid-template-columns:1.42fr 1fr;
  grid-template-rows:auto auto; gap:16px;
}
.cCard {
  border-radius:20px; overflow:hidden;
  border:1px solid var(--bdr); background:var(--bg1);
  position:relative; cursor:none; transition:all .4s;
}
.cCard:hover { border-color:var(--bdr2); transform:translateY(-7px); box-shadow:0 24px 60px rgba(0,0,0,.6); }
.cCard.big { grid-row:span 2; }

/* Image area with real img + CSS gradient fallback */
.cImgWrap { height:240px; position:relative; overflow:hidden; }
.cCard.big .cImgWrap { height:320px; }
.cImgWrap img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.62) saturate(1.2) contrast(1.05);
  transition:transform .55s;
  display:block;
}
/* CSS gradient shown BEHIND image - shows if image fails */
.cImgWrap::before {
  content:''; position:absolute; inset:0; z-index:0;
}
.cCard.big   .cImgWrap::before { background:linear-gradient(145deg,#0a1e38 0%,#0d2a50 40%,#091830 100%); }
.cCard:nth-child(2) .cImgWrap::before { background:linear-gradient(145deg,#0d1f1a 0%,#0a2e20 100%); }
.cCard:nth-child(3) .cImgWrap::before { background:linear-gradient(145deg,#1a1008 0%,#2a1a0a 100%); }
.cImgWrap img { position:relative; z-index:1; }

/* Dark gradient over image */
.cImgWrap::after {
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(7,13,26,1) 0%, rgba(7,13,26,.55) 45%, transparent);
}
/* shimmer on hover */
.cCard:hover .cImgWrap img { transform:scale(1.06); }

/* Emoji fallback icon in center (visible when no image) */
.cImgIcon {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:3.5rem; z-index:1; opacity:.25;
}
.cCard.big .cImgIcon { font-size:4.5rem; }

.cMeta { position:absolute; bottom:0; left:0; right:0; z-index:3; padding:18px 22px; color:var(--txt); }
.cTagBadge {
  display:inline-block; background:rgba(0,184,84,.18); color:var(--g);
  font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 11px; border-radius:100px; margin-bottom:6px;
}
.cTitle { font-weight:800; font-size:1.1rem; line-height:1.63; padding-left:40px; color:var(--txt); }
.cCard.big .cTitle { font-size:1.4rem; }
.cBody { padding:18px 22px 22px; }
.cDesc { color:rgba(205,216,240,.35); font-size:.81rem; line-height:1.75; margin-bottom:14px; }
.cMets { display:flex; gap:20px; }
.cMV { font-family:'Bebas Neue',sans-serif; font-size:1.7rem; color:var(--g); line-height:1; }
.cMK { font-size:.63rem; color:var(--txt2); text-transform:uppercase; letter-spacing:.07em; margin-top:2px; }
.cArr { position:absolute; top:14px; right:14px; z-index:5; width:30px; height:30px; background:rgba(0,184,84,.09); border:1px solid rgba(0,184,84,.22); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.76rem; color:var(--g); opacity:0; transition:.3s; }
.cCard:hover .cArr { opacity:1; transform:rotate(-45deg); }

/* ============================================================
   WHY US
============================================================ */
#why { background:var(--bg1); }
.whyCols { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:50px; }
.wCol { border-radius:20px; padding:38px 34px; }
.wCol.them { background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); }
.wCol.us {
  background:linear-gradient(145deg,rgba(0,184,84,.09),rgba(0,50,28,.04));
  border:1px solid rgba(0,184,84,.3); position:relative; overflow:hidden;
}
.wCol.us::before { content:''; position:absolute; top:-60px; right:-60px; width:160px; height:160px; background:radial-gradient(circle,rgba(0,184,84,.18),transparent 70%); }
.wHead { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.wHead h3 { font-weight:800; font-size:1.08rem; }
.wList { list-style:none; display:flex; flex-direction:column; gap:11px; }
.wList li { display:flex; align-items:center; gap:10px; font-size:.87rem; color:rgba(205,216,240,.44); line-height:1.5; }
.wCol.us .wList li { color:rgba(205,216,240,.78); }

/* ============================================================
   PRICING — REDESIGNED
============================================================ */
#price { background:var(--bg0); }
.priceTop { text-align:center; margin-bottom:60px; }
.priceTop .sSub { margin:0 auto; }

.priceGrid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:20px; align-items:stretch;
}

.pCard {
  border-radius:24px;
  border:1px solid var(--bdr);
  background:var(--bg1);
  padding:0;
  position:relative; overflow:hidden;
  transition:transform .4s, border-color .4s, box-shadow .4s;
  cursor:default;
  display:flex; flex-direction:column;
}
.pCard:hover {
  transform:translateY(-10px);
  border-color:var(--bdr2);
  box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(0,184,84,.1);
}
.pCard.pop {
  border-color:var(--g);
  background:var(--bg1);
  transform:scale(1.03);
  box-shadow:0 0 0 1px rgba(0,184,84,.3), 0 30px 70px rgba(0,0,0,.4);
}
.pCard.pop:hover { transform:scale(1.03) translateY(-8px); }

/* Gradient top bar */
.pCard::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, rgba(0,184,84,.3), transparent);
  transition:background .4s;
}
.pCard.pop::before { background:linear-gradient(90deg, transparent, var(--g), transparent); }
.pCard:hover::before { background:linear-gradient(90deg, transparent, var(--g), transparent); }

/* Ambient glow top */
.pGlow {
  position:absolute; top:-80px; left:50%; transform:translateX(-50%);
  width:260px; height:200px;
  background:radial-gradient(circle, rgba(0,184,84,.11), transparent 70%);
  pointer-events:none;
}

.pBadge {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  background:var(--g); color:#040810;
  font-size:.62rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 22px; border-radius:0 0 14px 14px;
}

/* Header zone */
.pHead {
  padding:36px 32px 24px;
  border-bottom:1px solid var(--bdr);
}

.pPlan {
  font-weight:900; font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--txt2); margin-bottom:18px;
  display:flex; align-items:center; gap:8px;
}
.pCard.pop .pPlan { color:var(--g); }
.pPlanDot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(205,216,240,.2); flex-shrink:0;
}
.pCard.pop .pPlanDot { background:var(--g); }

.pPriceRow {
  display:flex; align-items:flex-end; gap:4px; margin-bottom:6px;
}
.pCur { font-family:'Bebas Neue',sans-serif; font-size:2rem; color:var(--txt2); line-height:1; margin-bottom:10px; }
.pAmt { font-family:'Bebas Neue',sans-serif; font-size:5rem; color:var(--txt); line-height:.85; letter-spacing:-.02em; }
.pCard.pop .pAmt { color:var(--g); }
.pPer { font-size:.78rem; color:var(--txt2); margin-bottom:0; padding-bottom:4px; }

.pDesc { font-size:.82rem; color:rgba(205,216,240,.38); line-height:1.72; margin-top:14px; }

/* Features zone */
.pBody { padding:24px 32px 28px; flex:1; display:flex; flex-direction:column; }

.pList {
  list-style:none; display:flex; flex-direction:column;
  gap:11px; margin-bottom:28px; flex:1;
}
.pList li {
  display:flex; align-items:flex-start; gap:11px;
  font-size:.83rem; color:rgba(205,216,240,.55); line-height:1.55;
}
.pY {
  width:18px; height:18px; background:rgba(0,184,84,.12);
  border:1px solid rgba(0,184,84,.3); border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  color:var(--g); font-size:.65rem; flex-shrink:0; margin-top:1px;
}
.pN {
  width:18px; height:18px; background:rgba(255,59,92,.06);
  border:1px solid rgba(255,59,92,.18); border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  color:#ff3b5c; font-size:.65rem; flex-shrink:0; margin-top:1px;
}
.pList li.off { opacity:.25; }

.pBtn {
  width:100%; padding:14px; border-radius:12px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:.83rem;
  letter-spacing:.03em; cursor:none; transition:all .25s;
  border:1.5px solid rgba(0,184,84,.28);
  background:rgba(0,184,84,.06); color:var(--g);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.pBtn:hover { background:rgba(0,184,84,.14); border-color:var(--g); transform:translateY(-2px); }
.pCard.pop .pBtn {
  background:var(--g); color:#040810;
  border-color:var(--g);
  box-shadow:0 8px 24px rgba(0,184,84,.3);
}
.pCard.pop .pBtn:hover { background:#fff; border-color:#fff; box-shadow:0 8px 24px rgba(255,255,255,.2); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .priceGrid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
  }

  .pCard.pop {
    transform: scale(1);
  }

  .pCard.pop:hover {
    transform: translateY(-8px);
  }
}

@media (max-width: 640px) {
  .priceGrid {
    grid-template-columns: 1fr;
  }

  .pCard.pop {
    transform: scale(1);
    order: -1;
  }

  .pCard.pop:hover {
    transform: translateY(-8px);
  }

  /* ✅ Fix: force all cards visible on mobile regardless of scroll-reveal state */
  .priceGrid .pCard[data-r] {
    opacity: 1 !important;
    transform: none !important;
    transition: transform .4s, border-color .4s, box-shadow .4s !important;
  }

  .priceGrid .pCard.pop[data-r] {
    transform: scale(1) !important;
  }

  .priceTop { margin-bottom: 40px; }
  .pHead { padding: 30px 24px 20px; }
  .pBody { padding: 20px 24px 24px; }
  .pAmt { font-size: 4rem; }
  .pCur { font-size: 1.6rem; }
}
/* ============================================================
   TESTIMONIALS
============================================================ */
#testi { background:var(--bg1); overflow:hidden; padding-bottom:100px; }
.testiTop { padding:110px 5% 46px; text-align:center; }
.testiRows { overflow:hidden; }
.tRow { display:flex; gap:14px; width:max-content; margin-bottom:14px; }
.tRow.r1 { animation:trA 30s linear infinite; }
.tRow.r2 { animation:trB 38s linear infinite; }
@keyframes trA { to { transform:translateX(-50%); } }
@keyframes trB { from { transform:translateX(-50%); } to { transform:translateX(0); } }
.tRow:hover { animation-play-state:paused; }
.tCard { width:310px; flex-shrink:0; background:var(--bg0); border:1px solid var(--bdr); border-radius:16px; padding:24px; cursor:default; transition:border-color .3s; }
.tCard:hover { border-color:rgba(0,184,84,.28); }
.tStars { color:var(--g); font-size:.76rem; letter-spacing:3px; margin-bottom:12px; }
.tText  { color:rgba(205,216,240,.44); font-size:.83rem; line-height:1.8; margin-bottom:16px; font-style:italic; }
.tAuth  { display:flex; align-items:center; gap:10px; }
.tAv    { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--gd),#0a2850); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.72rem; color:#040810; flex-shrink:0; }
.tName  { font-weight:800; font-size:.82rem; }
.tRole  { font-size:.68rem; color:var(--txt2); }

/* ============================================================
   CTA
============================================================ */
#cta { background:var(--bg2); padding:110px 5%; position:relative; overflow:hidden; }
.ctaGlow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:700px; height:500px; background:radial-gradient(ellipse,rgba(0,184,84,.09),transparent 70%); pointer-events:none; }
.ctaWrap { max-width:680px; margin:0 auto; text-align:center; position:relative; z-index:1; }
.ctaWrap .sHdg { margin-bottom:13px; }
.ctaWrap .sSub { margin:0 auto 32px; }
.ctaForm { display:flex; max-width:420px; margin:0 auto; gap:10px; }
.ctaInput {
  flex:1; background:rgba(255,255,255,.04);
  border:1px solid rgba(0,184,84,.15); border-radius:100px;
  padding:13px 20px; color:var(--txt);
  font-family:'Plus Jakarta Sans',sans-serif; font-size:.88rem;
  outline:none; transition:border-color .2s;
}
.ctaInput::placeholder { color:var(--txt2); }
.ctaInput:focus { border-color:rgba(0,184,84,.42); }

/* ============================================================
   FOOTER
============================================================ */
footer { background:#030610; padding:68px 5% 30px; border-top:1px solid var(--bdr); }
.footGrid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:42px; margin-bottom:44px; }
.footBrand img { height:100px; margin-bottom:14px; display:block; }
.footBrand p { color:var(--txt2); font-size:.83rem; line-height:1.8; max-width:240px; margin-bottom:18px; }
.footSocials { display:flex; gap:8px; }
.fSoc { width:33px; height:33px; background:rgba(0,184,84,.07); border:1px solid rgba(0,184,84,.15); border-radius:9px; display:flex; align-items:center; justify-content:center; color:var(--g); text-decoration:none; transition:all .2s; }
.fSoc:hover { background:var(--g); color:#040810; }
.fSoc svg { width:14px; height:14px; }
.footCol h5 { font-size:.67rem;
   font-weight:700; letter-spacing:.16em;
    text-transform:uppercase; color:#00b854; 
    "Plus Jakarta Sans", sans-serif

}
    .footCol h4 { 
    font-size:.67rem;
   font-weight:700;
   letter-spacing:.16em;
   font-family:'Bebas Neue',sans-serif;
   color: #00b854;
   margin-bottom:10px;     }
.footCol ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.footCol ul a { color:var(--txt2); font-size:.82rem; text-decoration:none; transition:color .2s; }
.footCol ul a:hover { color:var(--g); }
.footBot { display:flex; justify-content:space-between; align-items:center; padding-top:22px; border-top:1px solid var(--bdr); font-size:.75rem; color:var(--txt2); }
.footBot a { color:var(--g); text-decoration:none; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media(max-width:1100px){
  .hInner { grid-template-columns:1fr; text-align:center; }
  .hLeft { max-width:100%; }
  .hSub  { margin-left:auto; margin-right:auto; }
  .hBtns { justify-content:center; }
  .hScrollHint { justify-content:center; }
  .hRight { display:none; }
  .aboutGrid,.svcLayout { grid-template-columns:1fr; }
  .svcSticky { position:static; }
  .caseGrid  { grid-template-columns:1fr; }
  .cCard.big { grid-row:auto; }
  .procGrid  { grid-template-columns:1fr 1fr; }
  .priceGrid { grid-template-columns:1fr; max-width:400px; margin:0 auto; }
  .pCard.pop { transform:scale(1); }
  .whyCols   { grid-template-columns:1fr; }
  .numGrid   { grid-template-columns:1fr 1fr; }
  .footGrid  { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px){
  .nMenu,.nCTA { display:none; }
  .hbg { display:flex; }
  .svcGrid { grid-template-columns:1fr; }
  .procGrid { grid-template-columns:1fr; }
  .ctaForm  { flex-direction:column; }
  .footGrid { grid-template-columns:1fr; }
  .footBot  { flex-direction:column; gap:8px; text-align:center; }
  
  /* Mobile Services Dropdown */
  #mobServices {
    display: none;
    background: rgba(0,184,84,.08);
    border-top: 1px solid var(--bdr);
    border-bottom: 1px solid var(--bdr);
    margin: 12px 0;
    padding: 8px 0;
    border-radius: 10px;
  }
  #mobServices.show { display: block; }
  #mobServices a {
    font-size: 1.5rem;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(205,216,240,.55);
  }
  #mobServices a svg {
    width: 20px;
    height: 20px;
  }
}