@import url('https://fonts.googleapis.com/css2?family=Clash+Display:wght@400;500;600;700&family=Cabinet+Grotesk:wght@400;500;700;800&family=JetBrains+Mono:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root {
  --green: #00aa33;
  --green-bright: #00cc44;
  --green-dark: #007a29;
  --orange: #e06000;
  --blue: #0055cc;
  --dark: #ffffff;
  --dark2: #f5f7f5;
  --dark3: #eaf0ea;
  --surface: #dce8dc;
  --border: rgba(0,160,50,0.18);
  --text: #0a1a0e;
  --muted: #4a6a52;
  --font-head: 'Outfit', sans-serif;
  --font-mono: 'Space Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: #ffffff;
  color: #0a1a0e;
  font-family: var(--font-head);
  overflow-x: hidden;
  line-height: 1.6;
}

/* NAV */
#mainNav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background .3s, border .3s;
  border-bottom: 1px solid transparent;
}
#mainNav.scrolled {
  background: rgba(8,13,15,0.95);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}
.nav-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand { display: flex; align-items: center; text-decoration: none; }
.nav-logo-img { height: 44px; width: auto; object-fit: contain; }
.nav-links {
  display: flex; list-style: none;
  align-items: center; gap: 0.2rem;
}
.nav-link {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 0.5rem 1rem;
  transition: color .2s;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute; bottom: 0; left: 1rem; right: 1rem;
  height: 1px; background: var(--green);
  transform: scaleX(0); transition: transform .3s;
}
.nav-link:hover, .nav-link.active { color: var(--text); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.nav-cta {
  background: var(--green);
  color: var(--dark) !important;
  font-weight: 700;
  padding: 0.55rem 1.3rem;
  margin-left: 0.5rem;
  border-radius: 2px;
}
.nav-link.nav-cta::after { display: none; }
.nav-link.nav-cta:hover { background: var(--green-bright); }
.nav-toggle {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: none;
  cursor: pointer; padding: 4px;
}
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--text); transition: .3s; }

/* FOOTER */
footer {
  background: var(--dark2);
  border-top: 1px solid var(--border);
  padding: 5rem 2rem 0;
}
.footer-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--border);
}
.footer-logo { height: 48px; margin-bottom: 1.2rem; }
.footer-brand p {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.8;
  max-width: 300px;
  margin-bottom: 1.5rem;
}
.footer-social { display: flex; gap: 1rem; }
.footer-social a {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all .2s;
}
.footer-social a:hover { border-color: var(--green); color: var(--green); }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer-col h4 {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
  font-family: var(--font-mono);
  margin-bottom: 1.2rem;
}
.footer-col a {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 0.6rem;
  transition: color .2s;
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  max-width: 1300px;
  margin: 0 auto;
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted);
  letter-spacing: 0.1em;
}

/* SHARED UTILITIES */
.section-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}
.section-tag::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--green);
}

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; }
.delay-4 { transition-delay: .4s; }

/* SHARED NAV SCRIPT */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(8,13,15,0.98);
    flex-direction: column;
    padding: 1.5rem;
    gap: 0.3rem;
    display: none;
    border-bottom: 1px solid var(--border);
  }
  .nav-links.open { display: flex; }
  .nav-link { width: 100%; }
  .nav-link.nav-cta { margin-left: 0; text-align: center; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }
}

/* ── Services Dropdown ── */
.nav-dropdown { position: relative; }
.nav-submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: rgba(8,13,15,0.97);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(16px);
  list-style: none;
  margin: 0;
  padding: .5rem 0;
  min-width: 210px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
  border-radius: 4px;
}
.nav-dropdown:hover .nav-submenu {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.nav-submenu li { list-style: none; }
.nav-submenu li a {
  display: block;
  padding: .65rem 1.3rem;
  font-family: 'Space Mono', monospace;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.nav-submenu li a:hover { color: #00cc44; background: rgba(0,204,68,.06); }
/* mobile */
@media(max-width:900px){
  .nav-submenu {
    position: static;
    transform: none !important;
    opacity: 1;
    pointer-events: all;
    border: none;
    background: rgba(255,255,255,.03);
    padding: 0 0 0 1rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    border-radius: 0;
  }
  .nav-dropdown.open .nav-submenu { max-height: 200px; }
}


/* REVEAL ANIMATIONS */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; }
.reveal.delay-1 { transition-delay:.1s; }
.reveal.delay-2 { transition-delay:.2s; }
.reveal.delay-3 { transition-delay:.3s; }
.reveal.visible { opacity:1; transform:none; }


/* ═══════════════════════════════════
   INDEX.HTML
   ═══════════════════════════════════ */

/* HERO */
#hero {
  min-height: 100vh;
  display: flex; align-items: center;
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 5rem;
}
.hero-grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1.5rem;
}
.hero-h1 {
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}
.hero-h1 .accent { color: var(--green); }
.hero-sub {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.8;
  max-width: 440px;
  margin-bottom: 2.5rem;
  font-weight: 300;
}
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-green {
  background: var(--green);
  color: var(--dark);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  border: none;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: all .2s;
}
.btn-green:hover { background: var(--green-bright); color: var(--dark); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  border: 1px solid var(--border);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: all .2s;
}
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.hero-visual {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.hero-card {
  background: var(--dark3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: border-color .3s, transform .3s;
}
.hero-card:hover { border-color: var(--green); transform: translateY(-4px); }
.hero-card:first-child { grid-column: span 2; }
.hc-icon { font-size: 1.6rem; }
.hc-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
}
.hc-title { font-size: 1rem; font-weight: 700; }
.hc-bar { height: 3px; background: var(--dark); border-radius: 2px; overflow: hidden; margin-top: 0.5rem; }
.hc-bar-fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--blue)); border-radius: 2px; }
/* hero bg */
#hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 50%, rgba(0,204,68,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(26,126,255,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.hero-bg-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,204,68,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,204,68,0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

/* MARQUEE */
.marquee-wrap {
  background: var(--dark3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding: 0.9rem 0;
}
.marquee-track {
  display: flex; gap: 0;
  animation: marquee 25s linear infinite;
  white-space: nowrap;
}
.m-item {
  display: inline-flex; align-items: center; gap: 1.2rem;
  padding: 0 2rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.m-dot { color: var(--green); font-size: 0.8rem; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* STATS STRIP */
.stats-strip {
  background: var(--dark2);
  padding: 4rem 2rem;
  border-bottom: 1px solid var(--border);
}
.stats-inner {
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 2rem;
}
.stat-item { text-align: center; }
.stat-num {
  font-size: 3.5rem; font-weight: 900;
  color: var(--green); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.5rem;
}

/* HOME SERVICES PREVIEW */
.home-services {
  padding: 7rem 2rem;
}
.home-services .container-xl { max-width: 1300px; }
.srv-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 3.5rem;
}
.srv-card {
  background: var(--dark);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  transition: background .3s;
}
.srv-card::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--green);
  transition: width .4s ease;
}
.srv-card:hover { background: var(--dark3); }
.srv-card:hover::after { width: 100%; }
.srv-num {
  font-family: var(--font-mono);
  font-size: 0.55rem; color: var(--muted);
  letter-spacing: 0.2em; margin-bottom: 1.5rem;
}
.srv-icon { font-size: 1.8rem; color: var(--green); margin-bottom: 1.2rem; display: block; }
.srv-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.8rem; }
.srv-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.7; }

/* HOME PORTFOLIO PREVIEW */
.home-portfolio { padding: 7rem 2rem; background: var(--dark2); }
.port-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 3.5rem; }
.port-card {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3;
  border-radius: 3px;
}
.port-bg { position: absolute; inset: 0; transition: transform .5s ease; }
.port-card:hover .port-bg { transform: scale(1.05); }
.port-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 55%);
  padding: 1.5rem;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.port-cat {
  font-family: var(--font-mono);
  font-size: 0.58rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--green); margin-bottom: 0.3rem;
}
.port-name { font-size: 1rem; font-weight: 700; }

/* CTA BAND */
.cta-band {
  background: var(--green);
  padding: 5rem 2rem;
  text-align: center;
}
.cta-band h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900; color: var(--dark);
  margin-bottom: 1rem; letter-spacing: -0.02em;
}
.cta-band p { color: rgba(0,0,0,0.6); margin-bottom: 2rem; font-size: 1rem; }
.btn-dark {
  background: var(--dark);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  border: none;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: all .2s;
}
.btn-dark:hover { background: #0a1a1c; color: var(--green-bright); transform: translateY(-2px); }

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{display:none}
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .srv-grid{grid-template-columns:1fr 1fr}
  .port-row{grid-template-columns:1fr}
}
@media(max-width:576px){
  .srv-grid{grid-template-columns:1fr}
  .stats-inner{grid-template-columns:1fr 1fr}
}

/* ═══════════════════════════════════
   ABOUT.HTML
   ═══════════════════════════════════ */

.page-hero {
  padding: 10rem 2rem 6rem;
  background: var(--dark2);
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 60% at 80% 50%, rgba(0,204,68,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero-inner { max-width: 1300px; margin: 0 auto; }
.page-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65rem; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--green);
  margin-bottom: 1.2rem;
}
.page-h1 {
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 900; letter-spacing: -0.03em;
  line-height: 1; margin-bottom: 1.5rem;
}
.page-h1 .g { color: var(--green); }
.page-sub {
  font-size: 1.05rem; color: var(--muted);
  max-width: 540px; line-height: 1.8; font-weight: 300;
}

/* Mission */
.about-mission {
  padding: 7rem 2rem;
}
.mission-inner {
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem;
  align-items: center;
}
.mission-text h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 900; line-height: 1.1;
  letter-spacing: -0.02em; margin-bottom: 1.5rem;
}
.mission-text p { font-size: 0.9rem; color: var(--muted); line-height: 1.9; margin-bottom: 1rem; }
.mission-visual {
  background: var(--dark3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.val-item { }
.val-icon { font-size: 1.5rem; margin-bottom: 0.7rem; }
.val-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.3rem; }
.val-desc { font-size: 0.75rem; color: var(--muted); line-height: 1.6; }

/* Team */
.about-team { padding: 7rem 2rem; background: var(--dark2); }
.team-grid {
  max-width: 1300px; margin: 3.5rem auto 0;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem;
}
.team-card {
  background: var(--dark3);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color .3s, transform .3s;
}
.team-card:hover { border-color: var(--green); transform: translateY(-4px); }
.team-avatar {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
  font-weight: 900;
  position: relative; overflow: hidden;
}
.team-info { padding: 1.2rem; }
.team-name { font-size: 1rem; font-weight: 700; margin-bottom: 0.2rem; }
.team-role {
  font-family: var(--font-mono);
  font-size: 0.6rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--green);
}

/* Why */
.about-why { padding: 7rem 2rem; }
.why-grid {
  max-width: 1300px; margin: 3.5rem auto 0;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem;
}
.why-card {
  border-left: 2px solid var(--green);
  padding: 1.5rem 2rem;
}
.why-num {
  font-family: var(--font-mono);
  font-size: 2.5rem; font-weight: 700;
  color: var(--green); opacity: 0.3; line-height: 1;
  margin-bottom: 0.5rem;
}
.why-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.why-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.7; }

@media(max-width:900px){
  .mission-inner{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr}
}
@media(max-width:576px){
  .team-grid{grid-template-columns:1fr 1fr}
}

/* ═══════════════════════════════════
   SERVICES.HTML
   ═══════════════════════════════════ */

.page-hero {
  padding: 10rem 2rem 6rem;
  background: var(--dark2);
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 60% at 80% 50%, rgba(0,204,68,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero-inner { max-width: 1300px; margin: 0 auto; }
.page-eyebrow { font-family:var(--font-mono);font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--green);margin-bottom:1.2rem; }
.page-h1 { font-size:clamp(3rem,6vw,6rem);font-weight:900;letter-spacing:-.03em;line-height:1;margin-bottom:1.5rem; }
.page-h1 .g { color:var(--green); }
.page-sub { font-size:1.05rem;color:var(--muted);max-width:540px;line-height:1.8;font-weight:300; }

/* Services list */
.services-list { padding: 7rem 2rem; }
.sl-inner { max-width: 1300px; margin: 0 auto; }
.service-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 3rem;
  align-items: start;
  padding: 4rem 0;
  border-bottom: 1px solid var(--border);
}
.service-row:last-child { border-bottom: none; }
.sr-num {
  font-family: var(--font-mono);
  font-size: 0.65rem; color: var(--green);
  letter-spacing: 0.2em; padding-top: 0.3rem;
}
.sr-head { }
.sr-icon { font-size: 2.2rem; color: var(--green); margin-bottom: 1rem; display: block; }
.sr-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 1rem; letter-spacing: -0.02em; }
.sr-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.8; }
.sr-details { }
.sr-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.sr-tag {
  font-family: var(--font-mono);
  font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.3rem 0.7rem;
  transition: all .2s;
}
.sr-tag:hover { border-color: var(--green); color: var(--green); }
.sr-bullets { list-style: none; }
.sr-bullets li {
  font-size: 0.82rem; color: var(--muted);
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex; align-items: center; gap: 0.6rem;
}
.sr-bullets li::before { content: '✦'; color: var(--green); font-size: 0.5rem; flex-shrink: 0; }

/* Tools */
.tools-section { padding: 7rem 2rem; background: var(--dark2); }
.tools-grid {
  max-width: 1300px; margin: 3.5rem auto 0;
  display: grid; grid-template-columns: repeat(6,1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
}
.tool-tile {
  background: var(--dark2);
  padding: 2rem 1rem;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  transition: background .2s;
}
.tool-tile:hover { background: var(--dark3); }
.tool-ico { font-size: 1.8rem; }
.tool-nm { font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); }

/* Process */
.process-section { padding: 7rem 2rem; }
.process-steps {
  max-width: 1300px; margin: 4rem auto 0;
  display: grid; grid-template-columns: repeat(5,1fr);
  gap: 2rem;
  position: relative;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 2.2rem; left: 3rem; right: 3rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: 0.3;
}
.p-step { text-align: center; position: relative; }
.p-dot {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--green);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.62rem;
  color: var(--green);
  margin: 0 auto 1.5rem;
  background: var(--dark);
  position: relative; z-index: 1;
  transition: background .3s, color .3s;
}
.p-step:hover .p-dot { background: var(--green); color: var(--dark); }
.p-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.5rem; }
.p-desc { font-size: 0.72rem; color: var(--muted); line-height: 1.6; }

/* Deliverables */
.deliv-section { padding: 7rem 2rem; background: var(--green); }
.deliv-inner { max-width: 1300px; margin: 0 auto; }
.deliv-section h2 { font-size:clamp(2rem,4vw,3.5rem);font-weight:900;color:var(--dark);margin-bottom:2.5rem;letter-spacing:-.02em; }
.deliv-tags { display:flex;flex-wrap:wrap;gap:.7rem; }
.d-tag {
  background: var(--dark);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.65rem; letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  transition: background .2s;
}
.d-tag:hover { background: #0a2a1a; }
.d-tag.outline { background: transparent; border: 1.5px solid var(--dark); color: var(--dark); }
.d-tag.outline:hover { background: var(--dark); color: var(--green); }

@media(max-width:900px){
  .service-row{grid-template-columns:1fr;gap:1.5rem}
  .sr-num{display:none}
  .tools-grid{grid-template-columns:repeat(3,1fr)}
  .process-steps{grid-template-columns:repeat(2,1fr)}
  .process-steps::before{display:none}
}
@media(max-width:576px){
  .tools-grid{grid-template-columns:repeat(2,1fr)}
  .process-steps{grid-template-columns:1fr}
}

/* ═══════════════════════════════════
   PORTFOLIO.HTML
   ═══════════════════════════════════ */

.page-hero {
  padding: 10rem 2rem 6rem;
  background: var(--dark2);
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 60% at 80% 50%, rgba(0,204,68,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero-inner { max-width: 1300px; margin: 0 auto; }
.page-eyebrow { font-family:var(--font-mono);font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--green);margin-bottom:1.2rem; }
.page-h1 { font-size:clamp(3rem,6vw,6rem);font-weight:900;letter-spacing:-.03em;line-height:1;margin-bottom:1.5rem; }
.page-h1 .g { color:var(--green); }
.page-sub { font-size:1.05rem;color:var(--muted);max-width:540px;line-height:1.8;font-weight:300; }

/* Filters */
.filter-bar {
  padding: 2.5rem 2rem;
  border-bottom: 1px solid var(--border);
  background: var(--dark2);
}
.filter-inner { max-width: 1300px; margin: 0 auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.filter-btn {
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.15em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: all .2s;
}
.filter-btn:hover, .filter-btn.active { border-color: var(--green); color: var(--green); background: rgba(0,204,68,0.06); }

/* Grid */
.portfolio-section { padding: 5rem 2rem 7rem; }
.port-masonry {
  max-width: 1300px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.port-item {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  cursor: pointer;
  transition: transform .3s;
}
.port-item:hover { transform: translateY(-4px); }
.port-item.wide { grid-column: span 2; }
.port-item.tall .port-thumb { aspect-ratio: 3/4; }
.port-thumb { aspect-ratio: 4/3; position: relative; overflow: hidden; }
.port-bg { position: absolute; inset: 0; transition: transform .5s ease; }
.port-item:hover .port-bg { transform: scale(1.07); }
.port-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%);
  padding: 1.8rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 0; transition: opacity .3s;
}
.port-item:hover .port-overlay { opacity: 1; }
.port-always {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.2rem 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
}
.port-cat { font-family:var(--font-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:.3rem; }
.port-name { font-size:1rem;font-weight:700; }
.port-desc { font-size:0.78rem;color:rgba(255,255,255,0.7);margin-top:.5rem;line-height:1.5; }
.port-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6rem; letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green);
  text-decoration: none;
  margin-top: 1rem;
  border-bottom: 1px solid var(--green);
  padding-bottom: 1px;
}

/* Case study highlight */
.case-study { padding: 7rem 2rem; background: var(--dark2); }
.cs-inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.cs-visual { aspect-ratio: 4/3; background: linear-gradient(135deg, #0a1a2e, #1a7eff 50%, #00cc44); border-radius: 4px; position: relative; overflow: hidden; }
.cs-badge {
  position: absolute; top: 1.5rem; left: 1.5rem;
  background: var(--green);
  color: var(--dark);
  font-family: var(--font-mono);
  font-size: 0.58rem; letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  font-weight: 700;
}
.cs-text h2 { font-size:clamp(1.8rem,3vw,2.8rem);font-weight:900;line-height:1.1;letter-spacing:-.02em;margin-bottom:1rem; }
.cs-text p { font-size:.88rem;color:var(--muted);line-height:1.8;margin-bottom:1.5rem; }
.cs-metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem; }
.cs-metric { background:var(--dark3);border:1px solid var(--border);padding:1rem;border-radius:2px; }
.cs-metric-num { font-size:1.8rem;font-weight:900;color:var(--green);line-height:1; }
.cs-metric-label { font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.3rem; }

/* Testimonials */
.testi-section { padding: 7rem 2rem; }
.testi-grid { max-width:1300px;margin:3.5rem auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; }
.testi-card { background:var(--dark3);border:1px solid var(--border);border-radius:3px;padding:2.2rem;position:relative; }
.testi-card::before { content:'"';font-size:4rem;color:var(--green);opacity:.15;position:absolute;top:.8rem;left:1.5rem;line-height:1; }
.testi-body { font-size:.82rem;color:var(--muted);line-height:1.8;margin-bottom:1.5rem; }
.testi-author { display:flex;align-items:center;gap:1rem; }
.testi-av { width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem; }
.testi-name { font-size:.9rem;font-weight:700; }
.testi-role { font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;color:var(--green); }

@media(max-width:900px){
  .port-masonry{grid-template-columns:repeat(2,1fr)}
  .port-item.wide{grid-column:span 2}
  .cs-inner{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
}
@media(max-width:576px){
  .port-masonry{grid-template-columns:1fr}
  .port-item.wide{grid-column:auto}
  .cs-metrics{grid-template-columns:repeat(2,1fr)}
}

/* ═══════════════════════════════════
   CONTACT.HTML
   ═══════════════════════════════════ */

.contact-section { padding: 7rem 2rem; }
.contact-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 6rem; align-items: start;
}
.contact-info {}
.section-tag { display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:2rem; }
.ci-item { padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.ci-item:first-of-type { border-top: 1px solid var(--border); }
.ci-label { font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem; }
.ci-value { font-size:1rem;font-weight:600;margin-bottom:.2rem; }
.ci-value a { color:var(--text);text-decoration:none; }
.ci-value a:hover { color:var(--green); }
.ci-sub { font-size:.78rem;color:var(--muted); }
.contact-social { display:flex;gap:.8rem;margin-top:.8rem; }
.cs-link { width:36px;height:36px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;font-size:1rem;transition:all .2s; }
.cs-link:hover { border-color:var(--green);color:var(--green); }

/* ── FORM ── */
.contact-form { background: var(--dark3); border: 1px solid var(--border); padding: 2.5rem; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:0; }
.form-group { margin-bottom:1.1rem; }
.form-label { display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem; }
.required-star { color: var(--green); margin-left: 2px; }
.form-control-custom {
  width:100%; background: var(--dark2); border: 1.5px solid var(--border);
  color: var(--text); padding: .85rem 1rem; font-family: var(--font-head);
  font-size: .88rem; outline: none; transition: border-color .2s, box-shadow .2s;
  appearance: none; border-radius: 2px;
}
.form-control-custom:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,204,68,.08); }
.form-control-custom::placeholder { color: rgba(106,140,132,.5); }
.form-control-custom.error { border-color: #ff4444; }
.form-control-custom.valid { border-color: var(--green); }
textarea.form-control-custom { min-height: 130px; resize: vertical; }
select.form-control-custom { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236a8c84' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

/* field error message */
.field-error { font-size:.68rem; color:#ff6666; margin-top:.3rem; display:none; font-family:var(--font-mono); }
.form-group.has-error .field-error { display:block; }
.form-group.has-error .form-control-custom { border-color:#ff4444; }

/* submit row */
.form-submit { display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:1.5rem; }
.btn-submit {
  background: var(--green); color: var(--dark);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  padding: 1rem 2rem; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .6rem;
  transition: all .2s; min-width: 180px; justify-content: center;
  border-radius: 2px; position: relative;
}
.btn-submit:hover:not(:disabled) { background: var(--green-bright); transform: translateY(-2px); }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-submit .spinner {
  width: 14px; height: 14px; border: 2px solid rgba(8,13,15,.3);
  border-top-color: var(--dark); border-radius: 50%;
  animation: spin .7s linear infinite; display: none;
}
.btn-submit.loading .spinner { display: block; }
.btn-submit.loading .btn-text { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-note { font-size:.72rem;color:var(--muted);line-height:1.5; }

/* success / error banners */
.form-banner {
  display: none; padding: 1rem 1.2rem; margin-bottom: 1.5rem;
  font-size: .82rem; border-radius: 2px; align-items: center; gap: .8rem;
  border: 1px solid;
}
.form-banner.show { display: flex; }
.form-banner.success { background: rgba(0,204,68,.08); border-color: rgba(0,204,68,.3); color: #00dd55; }
.form-banner.failure { background: rgba(255,68,68,.08); border-color: rgba(255,68,68,.3); color: #ff6666; }
.form-banner i { font-size: 1.1rem; flex-shrink: 0; }

/* setup notice */
.setup-notice {
  background: rgba(255,122,0,.07); border: 1px dashed rgba(255,122,0,.35);
  padding: 1rem 1.2rem; margin-bottom: 1.5rem; border-radius: 2px;
  font-size:.75rem; line-height:1.7; color: rgba(255,200,100,.8);
}
.setup-notice strong { color: #ff9933; display: block; margin-bottom: .3rem; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.setup-notice code { background: rgba(255,122,0,.15); padding: .1rem .4rem; border-radius: 2px; font-size: .72rem; color: #ffaa44; }

/* FAQ */
.faq-section { padding: 7rem 2rem; background: var(--dark2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.faq-inner { max-width: 900px; margin: 3rem auto 0; }
.faq-item { border-bottom: 1px solid var(--border); overflow: hidden; }
.faq-q { display:flex;justify-content:space-between;align-items:center;padding:1.4rem 0;font-size:.95rem;font-weight:600;cursor:pointer;user-select:none;gap:1rem;transition:color .2s; }
.faq-q:hover { color: var(--green); }
.faq-icon { font-size:1.2rem;flex-shrink:0;transition:transform .3s; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { font-size:.85rem;color:var(--muted);line-height:1.8;max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s;padding:0; }
.faq-item.open .faq-a { max-height: 200px; padding-bottom: 1.4rem; }

/* MAP */
.map-section { height:200px;background:var(--dark3);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; }
.map-section::before { content:'LAGOS · NIGERIA';font-family:var(--font-mono);font-size:.6rem;letter-spacing:.3em;color:rgba(0,204,68,.3);position:absolute;top:40%; }
/* .map-dot { width:14px;height:14px;background:var(--green);border-radius:50%;position:relative;margin-top:2rem; }
.map-dot::before { content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:rgba(0,204,68,.2);animation:ping 1.5s infinite; }
.map-dot::after { content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;background:rgba(0,204,68,.07);animation:ping 1.5s .5s infinite; } */
@keyframes ping { 0%{transform:translate(-50%,-50%) scale(.5);opacity:1} 100%{transform:translate(-50%,-50%) scale(1.5);opacity:0} }

.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.reveal.delay-1{transition-delay:.1s}.reveal.delay-2{transition-delay:.2s}.reveal.delay-3{transition-delay:.3s}
.reveal.visible{opacity:1;transform:none;}
.contact-info .reveal.visible{background: transparent;padding: 1.5rem 2rem;border: none;}
.contact-form.reveal{background: transparent;padding: 1.5rem 2rem;border: none;}
.faq-item.reveal{background: transparent;}
@media(max-width:960px){ .contact-inner{grid-template-columns:1fr;gap:3rem} }
@media(max-width:576px){ .form-row{grid-template-columns:1fr} }

/* ═══════════════════════════════════
   WEB-DEVELOPMENT.HTML
   ═══════════════════════════════════ */

/* PAGE HERO */
.page-hero {
  padding: 10rem 2rem 6rem;
  background: var(--dark2);
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: 55%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0,204,68,0.09) 0%, transparent 65%);
  pointer-events: none;
}
.page-hero-inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.page-eyebrow { font-family:var(--font-mono);font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--green);margin-bottom:1.2rem; }
.page-h1 { font-size:clamp(2.8rem,5.5vw,5.5rem);font-weight:900;letter-spacing:-.03em;line-height:1;margin-bottom:1.5rem; }
.page-h1 .g { color:var(--green); }
.page-sub { font-size:1rem;color:var(--muted);max-width:480px;line-height:1.8;font-weight:300;margin-bottom:2rem; }

/* Hero browser mockup */
.browser-mock {
  background: var(--dark3);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}
.browser-bar {
  background: #1a2a2d;
  padding: 0.8rem 1rem;
  display: flex; align-items: center; gap: 1rem;
  border-bottom: 1px solid var(--border);
}
.browser-dots { display:flex;gap:.4rem; }
.browser-dots span { width:10px;height:10px;border-radius:50%; }
.browser-url {
  flex: 1; background: rgba(255,255,255,0.05); border-radius: 4px;
  padding: 0.3rem 0.8rem;
  font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted);
}
.browser-body { padding: 1.5rem; }
.bb-header { height:12px; background:var(--surface); border-radius:3px; margin-bottom:1rem; }
.bb-nav { display:flex;gap:.5rem;margin-bottom:1rem; }
.bb-nav span { height:8px;border-radius:3px;background:var(--surface); }
.bb-hero { height:80px;background:linear-gradient(135deg,rgba(0,204,68,.15),rgba(26,126,255,.1));border-radius:4px;margin-bottom:.8rem;border:1px solid var(--border); }
.bb-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem; }
.bb-card { height:50px;background:var(--surface);border-radius:3px;border:1px solid var(--border); }

/* Tech stack */
.tech-section { padding: 5rem 2rem; border-bottom: 1px solid var(--border); }
.tech-inner { max-width: 1300px; margin: 0 auto; }
.tech-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.tech-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--dark3); border: 1px solid var(--border);
  padding: .5rem 1rem; font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); transition: all .2s;
}
.tech-pill:hover { border-color: var(--green); color: var(--green); }
.tech-pill .dot { width:7px;height:7px;border-radius:50%;flex-shrink:0; }

/* Services grid */
.web-services { padding: 7rem 2rem; background: var(--dark2); }
.ws-grid {
  max-width: 1300px; margin: 3.5rem auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.ws-card {
  background: var(--dark);
  border: 1px solid var(--border);
  padding: 2.5rem;
  position: relative; overflow: hidden;
  transition: border-color .3s, transform .3s;
}
.ws-card:hover { border-color: var(--green); transform: translateY(-4px); }
.ws-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green), var(--blue));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}
.ws-card:hover::before { transform: scaleX(1); }
.ws-icon { font-size: 2rem; color: var(--green); margin-bottom: 1.2rem; display: block; }
.ws-title { font-size: 1.1rem; font-weight: 700; margin-bottom: .7rem; }
.ws-desc { font-size: .8rem; color: var(--muted); line-height: 1.7; margin-bottom: 1.2rem; }
.ws-list { list-style: none; }
.ws-list li { font-size: .75rem; color: var(--muted); padding: .3rem 0; border-bottom: 1px solid rgba(255,255,255,.04); display:flex;align-items:center;gap:.5rem; }
.ws-list li::before { content:'›'; color:var(--green);font-weight:700; }

/* Portfolio strip */
.web-portfolio { padding: 7rem 2rem; }
.wp-inner { max-width: 1300px; margin: 0 auto; }
.wp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3.5rem; }
.wp-item { position:relative;overflow:hidden;border-radius:4px;border:1px solid var(--border); }
.wp-thumb { aspect-ratio: 16/9; position:relative;overflow:hidden; }
.wp-bg { position:absolute;inset:0;transition:transform .5s ease; }
.wp-item:hover .wp-bg { transform: scale(1.04); }
.wp-info { padding: 1.5rem; background: var(--dark3); }
.wp-cat { font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:.3rem; }
.wp-title { font-size:1rem;font-weight:700;margin-bottom:.4rem; }
.wp-desc { font-size:.78rem;color:var(--muted);line-height:1.6; }

/* Process */
.web-process { padding: 7rem 2rem; background: var(--dark2); }
.process-timeline {
  max-width: 900px; margin: 4rem auto 0;
  position: relative;
}
.process-timeline::before {
  content: '';
  position: absolute; left: 24px; top: 0; bottom: 0;
  width: 1px; background: var(--border);
}
.pt-step {
  display: grid; grid-template-columns: 50px 1fr;
  gap: 2rem; margin-bottom: 3rem; align-items: start;
}
.pt-num {
  width:50px;height:50px;border-radius:50%;
  border:1.5px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.62rem;color:var(--green);
  background:var(--dark2);position:relative;z-index:1;
  flex-shrink:0;
  transition:background .3s,color .3s;
}
.pt-step:hover .pt-num { background:var(--green);color:var(--dark); }
.pt-content { padding-top: .6rem; }
.pt-title { font-size:1.1rem;font-weight:700;margin-bottom:.5rem; }
.pt-desc { font-size:.82rem;color:var(--muted);line-height:1.7; }

/* CTA */
.page-cta { padding:7rem 2rem;background:var(--ink,var(--dark));text-align:center;position:relative;overflow:hidden; }
.page-cta::before { content:'WEB';position:absolute;font-size:18vw;font-weight:900;color:rgba(0,204,68,.04);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap; }
.page-cta h2 { font-size:clamp(2rem,4vw,4rem);font-weight:900;margin-bottom:1rem;letter-spacing:-.02em;position:relative; }
.page-cta p { font-size:.9rem;color:var(--muted);max-width:420px;margin:0 auto 2.5rem;line-height:1.8;position:relative; }
.btn-green { background:var(--green);color:var(--dark);font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:1.1rem 2.5rem;border:none;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:all .2s;position:relative; }
.btn-green:hover { background:var(--green-bright);transform:translateY(-2px);color:var(--dark); }
.btn-ghost { background:transparent;color:var(--text);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;padding:1.1rem 2.5rem;border:1px solid var(--border);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:all .2s; }
.btn-ghost:hover { border-color:var(--green);color:var(--green); }

@media(max-width:900px){
  .page-hero-inner{grid-template-columns:1fr}
  .browser-mock{display:none}
  .ws-grid{grid-template-columns:1fr 1fr}
  .wp-grid{grid-template-columns:1fr}
}
@media(max-width:576px){
  .ws-grid{grid-template-columns:1fr}
  .tech-row{gap:.5rem}
}

/* ═══════════════════════════════════
   MOBILE-APP.HTML
   ═══════════════════════════════════ */

/* Platform tabs */
.platform-tabs-section { padding: 6rem 2rem; }
.pt-inner { max-width: 1300px; margin: 0 auto; }
.tabs-nav { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 3rem; }
.tab-btn {
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase;
  background: none; border: none; color: var(--muted);
  padding: 1rem 2rem; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .2s; margin-bottom: -1px;
}
.tab-btn.active { color: var(--green); border-bottom-color: var(--green); }
.tab-panel { display: none; }
.tab-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.tp-features { }
.tp-feature { display: flex; gap: 1.2rem; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.tp-feature:last-child { border-bottom: none; }
.tp-icon { width: 44px; height: 44px; background: rgba(0,204,68,.1); border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.tp-title { font-size: .95rem; font-weight: 700; margin-bottom: .3rem; }
.tp-desc { font-size: .78rem; color: var(--muted); line-height: 1.6; }
.tp-specs { background: var(--dark3); border: 1px solid var(--border); padding: 2rem; border-radius: 4px; }
.ts-title { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--green); margin-bottom: 1.5rem; }
.ts-item { display: flex; justify-content: space-between; padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .82rem; }
.ts-item:last-child { border-bottom: none; }
.ts-label { color: var(--muted); }
.ts-val { font-weight: 600; font-family: var(--font-mono); font-size: .75rem; }

/* App types */
.app-types { padding: 7rem 2rem; background: var(--dark2); }
.at-grid { max-width: 1300px; margin: 3.5rem auto 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.at-card { background: var(--dark); border: 1px solid var(--border); padding: 2rem; transition: all .3s; }
.at-card:hover { border-color: var(--green); transform: translateY(-4px); }
.at-icon { font-size: 2rem; margin-bottom: 1rem; display: block; }
.at-title { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.at-desc { font-size: .78rem; color: var(--muted); line-height: 1.6; }

/* Stats row */
.mobile-stats { padding: 5rem 2rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--dark3); }
.ms-inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; text-align: center; }
.ms-num { font-size: 3rem; font-weight: 900; color: var(--green); line-height: 1; }
.ms-label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: .4rem; }

/* Portfolio */
.mobile-portfolio { padding: 7rem 2rem; }
.mp-grid { max-width: 1300px; margin: 3.5rem auto 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.mp-card { background: var(--dark3); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; transition: all .3s; }
.mp-card:hover { border-color: var(--green); transform: translateY(-4px); }
.mp-visual { aspect-ratio: 4/3; position: relative; overflow: hidden; }
.mp-bg { position: absolute; inset: 0; }
.mp-body { padding: 1.5rem; }
.mp-cat { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin-bottom: .3rem; }
.mp-title { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; }
.mp-stack { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .8rem; }
.mp-tag { font-family: var(--font-mono); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--border); color: var(--muted); padding: .2rem .5rem; }

/* CTA */
.page-cta { padding:7rem 2rem;background:var(--dark);text-align:center;position:relative;overflow:hidden; }
.page-cta::before { content:'APP';position:absolute;font-size:22vw;font-weight:900;color:rgba(0,204,68,.03);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap; }
.page-cta h2 { font-size:clamp(2rem,4vw,4rem);font-weight:900;margin-bottom:1rem;letter-spacing:-.02em;position:relative; }
.page-cta p { font-size:.9rem;color:var(--muted);max-width:420px;margin:0 auto 2.5rem;line-height:1.8;position:relative; }
.btn-green { background:var(--green);color:var(--dark);font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:1.1rem 2.5rem;border:none;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:all .2s;position:relative; }
.btn-green:hover { background:var(--green-bright);transform:translateY(-2px);color:var(--dark); }
.btn-ghost { background:transparent;color:var(--text);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;padding:1.1rem 2.5rem;border:1px solid var(--border);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:all .2s; }
.btn-ghost:hover { border-color:var(--green);color:var(--green); }

@media(max-width:1100px){ .at-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:900px){
  .page-hero-inner{grid-template-columns:1fr}
  .phones-wrap{display:none}
  .tab-panel.active{grid-template-columns:1fr}
  .ms-inner{grid-template-columns:repeat(2,1fr)}
  .mp-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:576px){
  .at-grid{grid-template-columns:1fr}
  .mp-grid{grid-template-columns:1fr}
  .ms-inner{grid-template-columns:1fr 1fr}
  .tabs-nav{flex-wrap:wrap}
}

/* ═══════════════════════════════════
   PROJECT-VERDANT.HTML
   ═══════════════════════════════════ */

.proj-hero {
  padding: 9rem 2rem 0;
  position: relative; overflow: hidden;
  background: var(--dark2);
  border-bottom: 1px solid var(--border);
}
.proj-hero-inner { max-width: 1300px; margin: 0 auto; }
.back-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  margin-bottom: 3rem; transition: color .2s;
}
.back-link:hover { color: var(--green); }
.proj-eyebrow { font-family:var(--font-mono);font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--green);margin-bottom:.8rem; }
.proj-title { font-size: clamp(3rem,7vw,7rem); font-weight: 900; letter-spacing: -.04em; line-height: .95; margin-bottom: 2rem; }
.proj-title .accent { color: var(--green); }
.proj-meta-row {
  display: flex; gap: 3rem; flex-wrap: wrap;
  padding: 2rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.proj-meta-item {}
.pm-label { font-family:var(--font-mono);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem; }
.pm-value { font-size:.9rem;font-weight:600; }

.proj-banner {
  margin-top: 4rem;
  aspect-ratio: 16/6;
  width: 100%;
  position: relative; overflow: hidden;
}
.proj-banner-bg { position: absolute; inset: 0; }
.proj-banner-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.pb-label {
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.1); padding:.5rem 1.2rem;
}

/* Overview section */
.proj-overview { padding: 7rem 2rem; }
.po-inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.po-text {}
.section-label { font-family:var(--font-mono);font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--green);margin-bottom:1rem;display:block; }
.po-text h2 { font-size:clamp(1.8rem,3.5vw,3rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-bottom:1.5rem; }
.po-text p { font-size:.88rem;color:var(--muted);line-height:1.9;margin-bottom:1rem; }
.po-sidebar {}
.stat-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem; }
.stat-box { background:var(--dark3);border:1px solid var(--border);padding:1.5rem; }
.stat-num { font-size:2.2rem;font-weight:900;color:var(--green);line-height:1; }
.stat-lbl { font-family:var(--font-mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:.3rem; }
.tag-list { display:flex;flex-wrap:wrap;gap:.5rem; }
.tag { font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--border);color:var(--muted);padding:.3rem .7rem;transition:all .2s; }
.tag:hover { border-color:var(--green);color:var(--green); }

/* Screens grid */
.proj-screens { padding: 0 2rem 7rem; }
.ps-inner { max-width: 1300px; margin: 0 auto; }
.screens-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem; }
.screen-item { border:1px solid var(--border);overflow:hidden;transition:transform .3s,border-color .3s; }
.screen-item:hover { transform:translateY(-4px);border-color:var(--green); }
.screen-item.wide { grid-column:span 2; }
.screen-thumb { aspect-ratio:16/9;position:relative;overflow:hidden; }
.screen-thumb.tall { aspect-ratio:4/3; }
.screen-bg { position:absolute;inset:0; }
.screen-label { padding:.8rem 1rem;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--border); }

/* Challenge / Solution */
.proj-cs { padding:7rem 2rem;background:var(--dark2);border-top:1px solid var(--border);border-bottom:1px solid var(--border); }
.cs-inner { max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem; }
.cs-col { }
.cs-col h3 { font-size:1.5rem;font-weight:900;margin-bottom:1.5rem;letter-spacing:-.02em; }
.cs-col h3 .accent { color:var(--green); }
.cs-item { display:flex;gap:1rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.05); }
.cs-item:last-child{border-bottom:none}
.cs-dot { width:8px;height:8px;border-radius:50%;background:var(--green);margin-top:.5rem;flex-shrink:0; }
.cs-item p { font-size:.83rem;color:var(--muted);line-height:1.8;margin:0; }

/* CTA */
.proj-cta { padding:7rem 2rem;text-align:center;position:relative;overflow:hidden;background:var(--dark); }
.proj-cta h2 { font-size:clamp(2rem,4vw,4rem);font-weight:900;letter-spacing:-.02em;margin-bottom:1rem; }
.proj-cta p { font-size:.88rem;color:var(--muted);max-width:400px;margin:0 auto 2.5rem;line-height:1.8; }
.btn-green { background:var(--green);color:var(--dark);font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:1.1rem 2.5rem;border:none;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:all .2s; }
.btn-green:hover { transform:translateY(-2px); }
.btn-ghost { background:transparent;color:var(--text);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;padding:1.1rem 2.5rem;border:1px solid var(--border);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:all .2s; }
.btn-ghost:hover { border-color:var(--green);color:var(--green); }

/* Next project */
.next-project {
  display:block;padding:4rem 2rem;background:var(--dark3);
  border-top:1px solid var(--border);text-decoration:none;
  transition:background .3s;
}
.next-project:hover { background:rgba(0,204,68,.04); }
.np-inner { max-width:1300px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem; }
.np-label { font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem; }
.np-title { font-size:1.5rem;font-weight:900;color:var(--text); }
.np-arrow { font-size:2rem;color:var(--green); }

@media(max-width:900px){
  .po-inner{grid-template-columns:1fr}
  .cs-inner{grid-template-columns:1fr}
  .screens-grid{grid-template-columns:1fr 1fr}
  .screen-item.wide{grid-column:span 1}
}
@media(max-width:576px){
  .proj-meta-row{gap:1.5rem}
  .screens-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════
   PROJECT-LUXE.HTML
   ═══════════════════════════════════ */

.proj-hero {
  padding: 9rem 2rem 0;
  position: relative; overflow: hidden;
  background: var(--dark2);
  border-bottom: 1px solid var(--border);
}
.proj-hero-inner { max-width: 1300px; margin: 0 auto; }
.back-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  margin-bottom: 3rem; transition: color .2s;
}
.back-link:hover { color: var(--green); }
.proj-eyebrow { font-family:var(--font-mono);font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--green);margin-bottom:.8rem; }
.proj-title { font-size: clamp(3rem,7vw,7rem); font-weight: 900; letter-spacing: -.04em; line-height: .95; margin-bottom: 2rem; }
.proj-title .accent { color: var(--green); }
.proj-meta-row {
  display: flex; gap: 3rem; flex-wrap: wrap;
  padding: 2rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.proj-meta-item {}
.pm-label { font-family:var(--font-mono);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem; }
.pm-value { font-size:.9rem;font-weight:600; }

.proj-banner {
  margin-top: 4rem;
  aspect-ratio: 16/6;
  width: 100%;
  position: relative; overflow: hidden;
}
.proj-banner-bg { position: absolute; inset: 0; }
.proj-banner-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.pb-label {
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.1); padding:.5rem 1.2rem;
}

/* Overview section */
.proj-overview { padding: 7rem 2rem; }
.po-inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.po-text {}
.section-label { font-family:var(--font-mono);font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--green);margin-bottom:1rem;display:block; }
.po-text h2 { font-size:clamp(1.8rem,3.5vw,3rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-bottom:1.5rem; }
.po-text p { font-size:.88rem;color:var(--muted);line-height:1.9;margin-bottom:1rem; }
.po-sidebar {}
.stat-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem; }
.stat-box { background:var(--dark3);border:1px solid var(--border);padding:1.5rem; }
.stat-num { font-size:2.2rem;font-weight:900;color:var(--green);line-height:1; }
.stat-lbl { font-family:var(--font-mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:.3rem; }
.tag-list { display:flex;flex-wrap:wrap;gap:.5rem; }
.tag { font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--border);color:var(--muted);padding:.3rem .7rem;transition:all .2s; }
.tag:hover { border-color:var(--green);color:var(--green); }

/* Screens grid */
.proj-screens { padding: 0 2rem 7rem; }
.ps-inner { max-width: 1300px; margin: 0 auto; }
.screens-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem; }
.screen-item { border:1px solid var(--border);overflow:hidden;transition:transform .3s,border-color .3s; }
.screen-item:hover { transform:translateY(-4px);border-color:var(--green); }
.screen-item.wide { grid-column:span 2; }
.screen-thumb { aspect-ratio:16/9;position:relative;overflow:hidden; }
.screen-thumb.tall { aspect-ratio:4/3; }
.screen-bg { position:absolute;inset:0; }
.screen-label { padding:.8rem 1rem;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--border); }

/* Challenge / Solution */
.proj-cs { padding:7rem 2rem;background:var(--dark2);border-top:1px solid var(--border);border-bottom:1px solid var(--border); }
.cs-inner { max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem; }
.cs-col { }
.cs-col h3 { font-size:1.5rem;font-weight:900;margin-bottom:1.5rem;letter-spacing:-.02em; }
.cs-col h3 .accent { color:var(--green); }
.cs-item { display:flex;gap:1rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.05); }
.cs-item:last-child{border-bottom:none}
.cs-dot { width:8px;height:8px;border-radius:50%;background:var(--green);margin-top:.5rem;flex-shrink:0; }
.cs-item p { font-size:.83rem;color:var(--muted);line-height:1.8;margin:0; }

/* CTA */
.proj-cta { padding:7rem 2rem;text-align:center;position:relative;overflow:hidden;background:var(--dark); }
.proj-cta h2 { font-size:clamp(2rem,4vw,4rem);font-weight:900;letter-spacing:-.02em;margin-bottom:1rem; }
.proj-cta p { font-size:.88rem;color:var(--muted);max-width:400px;margin:0 auto 2.5rem;line-height:1.8; }
.btn-green { background:var(--green);color:var(--dark);font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:1.1rem 2.5rem;border:none;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:all .2s; }
.btn-green:hover { transform:translateY(-2px); }
.btn-ghost { background:transparent;color:var(--text);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;padding:1.1rem 2.5rem;border:1px solid var(--border);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:all .2s; }
.btn-ghost:hover { border-color:var(--green);color:var(--green); }

/* Next project */
.next-project {
  display:block;padding:4rem 2rem;background:var(--dark3);
  border-top:1px solid var(--border);text-decoration:none;
  transition:background .3s;
}
.next-project:hover { background:rgba(0,204,68,.04); }
.np-inner { max-width:1300px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem; }
.np-label { font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem; }
.np-title { font-size:1.5rem;font-weight:900;color:var(--text); }
.np-arrow { font-size:2rem;color:var(--green); }

@media(max-width:900px){
  .po-inner{grid-template-columns:1fr}
  .cs-inner{grid-template-columns:1fr}
  .screens-grid{grid-template-columns:1fr 1fr}
  .screen-item.wide{grid-column:span 1}
}
@media(max-width:576px){
  .proj-meta-row{gap:1.5rem}
  .screens-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════
   PROJECT-OKAFOR.HTML
   ═══════════════════════════════════ */

.proj-hero {
  padding: 9rem 2rem 0;
  position: relative; overflow: hidden;
  background: var(--dark2);
  border-bottom: 1px solid var(--border);
}
.proj-hero-inner { max-width: 1300px; margin: 0 auto; }
.back-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  margin-bottom: 3rem; transition: color .2s;
}
.back-link:hover { color: var(--green); }
.proj-eyebrow { font-family:var(--font-mono);font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--green);margin-bottom:.8rem; }
.proj-title { font-size: clamp(3rem,7vw,7rem); font-weight: 900; letter-spacing: -.04em; line-height: .95; margin-bottom: 2rem; }
.proj-title .accent { color: var(--green); }
.proj-meta-row {
  display: flex; gap: 3rem; flex-wrap: wrap;
  padding: 2rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.proj-meta-item {}
.pm-label { font-family:var(--font-mono);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem; }
.pm-value { font-size:.9rem;font-weight:600; }

.proj-banner {
  margin-top: 4rem;
  aspect-ratio: 16/6;
  width: 100%;
  position: relative; overflow: hidden;
}
.proj-banner-bg { position: absolute; inset: 0; }
.proj-banner-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.pb-label {
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.1); padding:.5rem 1.2rem;
}

/* Overview section */
.proj-overview { padding: 7rem 2rem; }
.po-inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.po-text {}
.section-label { font-family:var(--font-mono);font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--green);margin-bottom:1rem;display:block; }
.po-text h2 { font-size:clamp(1.8rem,3.5vw,3rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-bottom:1.5rem; }
.po-text p { font-size:.88rem;color:var(--muted);line-height:1.9;margin-bottom:1rem; }
.po-sidebar {}
.stat-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem; }
.stat-box { background:var(--dark3);border:1px solid var(--border);padding:1.5rem; }
.stat-num { font-size:2.2rem;font-weight:900;color:var(--green);line-height:1; }
.stat-lbl { font-family:var(--font-mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:.3rem; }
.tag-list { display:flex;flex-wrap:wrap;gap:.5rem; }
.tag { font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--border);color:var(--muted);padding:.3rem .7rem;transition:all .2s; }
.tag:hover { border-color:var(--green);color:var(--green); }

/* Screens grid */
.proj-screens { padding: 0 2rem 7rem; }
.ps-inner { max-width: 1300px; margin: 0 auto; }
.screens-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem; }
.screen-item { border:1px solid var(--border);overflow:hidden;transition:transform .3s,border-color .3s; }
.screen-item:hover { transform:translateY(-4px);border-color:var(--green); }
.screen-item.wide { grid-column:span 2; }
.screen-thumb { aspect-ratio:16/9;position:relative;overflow:hidden; }
.screen-thumb.tall { aspect-ratio:4/3; }
.screen-bg { position:absolute;inset:0; }
.screen-label { padding:.8rem 1rem;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--border); }

/* Challenge / Solution */
.proj-cs { padding:7rem 2rem;background:var(--dark2);border-top:1px solid var(--border);border-bottom:1px solid var(--border); }
.cs-inner { max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem; }
.cs-col { }
.cs-col h3 { font-size:1.5rem;font-weight:900;margin-bottom:1.5rem;letter-spacing:-.02em; }
.cs-col h3 .accent { color:var(--green); }
.cs-item { display:flex;gap:1rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.05); }
.cs-item:last-child{border-bottom:none}
.cs-dot { width:8px;height:8px;border-radius:50%;background:var(--green);margin-top:.5rem;flex-shrink:0; }
.cs-item p { font-size:.83rem;color:var(--muted);line-height:1.8;margin:0; }

/* CTA */
.proj-cta { padding:7rem 2rem;text-align:center;position:relative;overflow:hidden;background:var(--dark); }
.proj-cta h2 { font-size:clamp(2rem,4vw,4rem);font-weight:900;letter-spacing:-.02em;margin-bottom:1rem; }
.proj-cta p { font-size:.88rem;color:var(--muted);max-width:400px;margin:0 auto 2.5rem;line-height:1.8; }
.btn-green { background:var(--green);color:var(--dark);font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:1.1rem 2.5rem;border:none;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:all .2s; }
.btn-green:hover { transform:translateY(-2px); }
.btn-ghost { background:transparent;color:var(--text);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;padding:1.1rem 2.5rem;border:1px solid var(--border);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:all .2s; }
.btn-ghost:hover { border-color:var(--green);color:var(--green); }

/* Next project */
.next-project {
  display:block;padding:4rem 2rem;background:var(--dark3);
  border-top:1px solid var(--border);text-decoration:none;
  transition:background .3s;
}
.next-project:hover { background:rgba(0,204,68,.04); }
.np-inner { max-width:1300px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem; }
.np-label { font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem; }
.np-title { font-size:1.5rem;font-weight:900;color:var(--text); }
.np-arrow { font-size:2rem;color:var(--green); }

@media(max-width:900px){
  .po-inner{grid-template-columns:1fr}
  .cs-inner{grid-template-columns:1fr}
  .screens-grid{grid-template-columns:1fr 1fr}
  .screen-item.wide{grid-column:span 1}
}
@media(max-width:576px){
  .proj-meta-row{gap:1.5rem}
  .screens-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════
   PROJECT-TASKFLOW.HTML
   ═══════════════════════════════════ */

.proj-hero {
  padding: 9rem 2rem 0;
  position: relative; overflow: hidden;
  background: var(--dark2);
  border-bottom: 1px solid var(--border);
}
.proj-hero-inner { max-width: 1300px; margin: 0 auto; }
.back-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  margin-bottom: 3rem; transition: color .2s;
}
.back-link:hover { color: var(--green); }
.proj-eyebrow { font-family:var(--font-mono);font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--green);margin-bottom:.8rem; }
.proj-title { font-size: clamp(3rem,7vw,7rem); font-weight: 900; letter-spacing: -.04em; line-height: .95; margin-bottom: 2rem; }
.proj-title .accent { color: var(--green); }
.proj-meta-row {
  display: flex; gap: 3rem; flex-wrap: wrap;
  padding: 2rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.proj-meta-item {}
.pm-label { font-family:var(--font-mono);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem; }
.pm-value { font-size:.9rem;font-weight:600; }

.proj-banner {
  margin-top: 4rem;
  aspect-ratio: 16/6;
  width: 100%;
  position: relative; overflow: hidden;
}
.proj-banner-bg { position: absolute; inset: 0; }
.proj-banner-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.pb-label {
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.1); padding:.5rem 1.2rem;
}

/* Overview section */
.proj-overview { padding: 7rem 2rem; }
.po-inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.po-text {}
.section-label { font-family:var(--font-mono);font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--green);margin-bottom:1rem;display:block; }
.po-text h2 { font-size:clamp(1.8rem,3.5vw,3rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-bottom:1.5rem; }
.po-text p { font-size:.88rem;color:var(--muted);line-height:1.9;margin-bottom:1rem; }
.po-sidebar {}
.stat-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem; }
.stat-box { background:var(--dark3);border:1px solid var(--border);padding:1.5rem; }
.stat-num { font-size:2.2rem;font-weight:900;color:var(--green);line-height:1; }
.stat-lbl { font-family:var(--font-mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:.3rem; }
.tag-list { display:flex;flex-wrap:wrap;gap:.5rem; }
.tag { font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--border);color:var(--muted);padding:.3rem .7rem;transition:all .2s; }
.tag:hover { border-color:var(--green);color:var(--green); }

/* Screens grid */
.proj-screens { padding: 0 2rem 7rem; }
.ps-inner { max-width: 1300px; margin: 0 auto; }
.screens-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem; }
.screen-item { border:1px solid var(--border);overflow:hidden;transition:transform .3s,border-color .3s; }
.screen-item:hover { transform:translateY(-4px);border-color:var(--green); }
.screen-item.wide { grid-column:span 2; }
.screen-thumb { aspect-ratio:16/9;position:relative;overflow:hidden; }
.screen-thumb.tall { aspect-ratio:4/3; }
.screen-bg { position:absolute;inset:0; }
.screen-label { padding:.8rem 1rem;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--border); }

/* Challenge / Solution */
.proj-cs { padding:7rem 2rem;background:var(--dark2);border-top:1px solid var(--border);border-bottom:1px solid var(--border); }
.cs-inner { max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem; }
.cs-col { }
.cs-col h3 { font-size:1.5rem;font-weight:900;margin-bottom:1.5rem;letter-spacing:-.02em; }
.cs-col h3 .accent { color:var(--green); }
.cs-item { display:flex;gap:1rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.05); }
.cs-item:last-child{border-bottom:none}
.cs-dot { width:8px;height:8px;border-radius:50%;background:var(--green);margin-top:.5rem;flex-shrink:0; }
.cs-item p { font-size:.83rem;color:var(--muted);line-height:1.8;margin:0; }

/* CTA */
.proj-cta { padding:7rem 2rem;text-align:center;position:relative;overflow:hidden;background:var(--dark); }
.proj-cta h2 { font-size:clamp(2rem,4vw,4rem);font-weight:900;letter-spacing:-.02em;margin-bottom:1rem; }
.proj-cta p { font-size:.88rem;color:var(--muted);max-width:400px;margin:0 auto 2.5rem;line-height:1.8; }
.btn-green { background:var(--green);color:var(--dark);font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:1.1rem 2.5rem;border:none;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:all .2s; }
.btn-green:hover { transform:translateY(-2px); }
.btn-ghost { background:transparent;color:var(--text);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;padding:1.1rem 2.5rem;border:1px solid var(--border);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:all .2s; }
.btn-ghost:hover { border-color:var(--green);color:var(--green); }

/* Next project */
.next-project {
  display:block;padding:4rem 2rem;background:var(--dark3);
  border-top:1px solid var(--border);text-decoration:none;
  transition:background .3s;
}
.next-project:hover { background:rgba(0,204,68,.04); }
.np-inner { max-width:1300px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem; }
.np-label { font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem; }
.np-title { font-size:1.5rem;font-weight:900;color:var(--text); }
.np-arrow { font-size:2rem;color:var(--green); }

@media(max-width:900px){
  .po-inner{grid-template-columns:1fr}
  .cs-inner{grid-template-columns:1fr}
  .screens-grid{grid-template-columns:1fr 1fr}
  .screen-item.wide{grid-column:span 1}
}
@media(max-width:576px){
  .proj-meta-row{gap:1.5rem}
  .screens-grid{grid-template-columns:1fr}
}
/* ═══ HERO SVG ILLUSTRATIONS ═══ */
.hero-illustration {
  width: 100%;
  max-width: 780px;
  margin: 3rem auto 0;
  display: block;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.hero-illustration img {
  width: 100%;
  height: auto;
  display: block;
}
.page-hero .hero-illustration { margin-top: 3rem; }
.proj-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }



/* ═══════════════════════════════════
   LIGHT THEME OVERRIDE
   ═══════════════════════════════════ */
:root {
  --green: #00aa33;
  --green-bright: #00cc44;
  --green-dark: #007a29;
  --orange: #e06000;
  --blue: #0055cc;
  --dark: #ffffff;
  --dark2: #f5f7f5;
  --dark3: #eaf0ea;
  --surface: #dce8dc;
  --border: rgba(0,160,50,0.18);
  --text: #0a1a0e;
  --muted: #4a6a52;
  --font-head: 'Outfit', sans-serif;
  --font-mono: 'Space Mono', monospace;
}

body { background: #ffffff; color: #0a1a0e; }

/* Nav light */
#mainNav { border-bottom: 1px solid rgba(0,160,50,0.12); }
#mainNav.scrolled { background: rgba(255,255,255,0.96); border-bottom-color: var(--border); }
.nav-link { color: #4a6a52; }
.nav-link:hover, .nav-link.active { color: #0a1a0e; }
.nav-link.nav-cta { background: var(--green); color: #fff !important; }
.nav-link.nav-cta:hover { background: var(--green-bright); }
.nav-toggle span { background: #0a1a0e; }
.nav-links { background: transparent; }
.nav-submenu { background: rgba(255,255,255,0.98); border-color: rgba(0,160,50,0.15); }
.nav-submenu li a { color: #4a6a52; }
.nav-submenu li a:hover { color: var(--green); background: rgba(0,160,50,0.05); }

/* Footer light */
footer { background: #f0f5f0; border-top: 1px solid var(--border); }
.footer-brand p { color: #4a6a52; }
.footer-col a { color: #4a6a52; }
.footer-col a:hover { color: #0a1a0e; }
.footer-bottom { color: rgba(0,0,0,0.3); }
.footer-social a { border-color: rgba(0,160,50,0.2); color: #4a6a52; }
.footer-social a:hover { border-color: var(--green); color: var(--green); }

/* Sections */
.page-hero { background: #f0f7f1; border-bottom: 1px solid var(--border); }
.page-eyebrow { color: var(--green); }
.page-h1 .g, .proj-title .accent { color: var(--green); }
.page-sub { color: #4a6a52; }

/* Section tag */
.section-tag { color: var(--green); }
.section-label { color: var(--green); }

/* Buttons */
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-bright); color: #fff; }
.btn-ghost, .btn-ghost-sm { color: #0a1a0e; border-color: rgba(0,0,0,0.2); }
.btn-ghost:hover, .btn-ghost-sm:hover { border-color: var(--green); color: var(--green); }
.btn-submit { background: var(--green); color: #fff; }
.btn-submit:hover:not(:disabled) { background: var(--green-bright); }

/* Cards & surfaces */
.srv-card, .port-card, .wp-item, .mp-card, .ws-card, .at-card,
.stat-box, .testi-card, .cs-col, .faq-item, .tp-specs, .ci-item,
.contact-form, .proj-overview .po-sidebar, .screen-item,
.proj-cs, .proj-banner { 
  background: #f5f7f5; 
  border-color: rgba(0,160,50,0.15); 
  color: #0a1a0e;
}

/* Nav dropdown border for light */
.nav-dropdown { border: none; }

/* Reveal */
.reveal { color: inherit; }

/* Specific section bgs */
.web-services, .app-types, .web-process, .mobile-stats,
.faq-section, .proj-cs, .about-hero, .testi-section,
.case-study, .proj-cta { background: #f0f7f1; }

.contact-section, .portfolio-section, .web-portfolio,
.mobile-portfolio, .proj-overview, .proj-screens { background: #ffffff; }

/* Text adjustments */
.pm-label, .ci-label, .form-label, .wp-cat, .mp-cat,
.proj-eyebrow, .screen-label, .port-cat, .port-name,
.cs-dot { color: var(--green); }
.pm-value, .wp-title, .mp-title, .proj-title, .ws-title,
.at-title, .tp-title { color: #0a1a0e; }
.po-text p, .ws-desc, .at-desc, .tp-desc, .testi-body,
.cs-item p, .pt-desc { color: #4a6a52; }

/* Stats */
.stat-num, .ms-num, .cs-metric-num { color: var(--green); }
.stat-lbl, .ms-label, .cs-metric-label { color: #4a6a52; }

/* Form controls */
.form-control-custom { 
  background: #fff; 
  border-color: rgba(0,160,50,0.2); 
  color: #0a1a0e; 
}
.form-control-custom:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,160,50,0.08); }
.form-control-custom::placeholder { color: rgba(74,106,82,0.4); }

/* FAQ */
.faq-q { color: #0a1a0e; }
.faq-q:hover { color: var(--green); }
.faq-a { color: #4a6a52; }

/* Map section */
.map-section { background: #e8f0e8; }
.map-section::before { color: rgba(0,160,50,0.4); }

/* CTA bands */
.page-cta { background: #f0f7f1; }
.page-cta h2 { color: #0a1a0e; }
.page-cta p { color: #4a6a52; }
.page-cta::before { color: rgba(0,160,50,0.04); }

/* Next project */
.next-project { background: #f0f5f0; }
.next-project:hover { background: rgba(0,160,50,0.06); }
.np-label { color: #4a6a52; }
.np-title { color: #0a1a0e; }

/* Process timeline */
.process-timeline::before { background: rgba(0,160,50,0.15); }
.pt-num { border-color: var(--green); color: var(--green); background: #f0f7f1; }
.pt-step:hover .pt-num { background: var(--green); color: #fff; }
.pt-title { color: #0a1a0e; }
.pt-desc { color: #4a6a52; }

/* Tech pills */
.tech-pill { background: #f5f7f5; border-color: rgba(0,160,50,0.15); color: #0a1a0e; }
.tech-pill:hover { border-color: var(--green); color: var(--green); }
.tag { border-color: rgba(0,160,50,0.2); color: #4a6a52; }
.tag:hover { border-color: var(--green); color: var(--green); }

/* Platform tabs */
.tabs-nav { border-bottom-color: rgba(0,160,50,0.15); }
.tab-btn { color: #4a6a52; }
.tab-btn.active { color: var(--green); border-bottom-color: var(--green); }
.ts-label { color: #4a6a52; }
.ts-val { color: #0a1a0e; }
.tp-specs { border-color: rgba(0,160,50,0.15); }
.ts-item { border-bottom-color: rgba(0,0,0,0.05); }

/* Portfolio cards */
.port-item { border-color: rgba(0,160,50,0.15); }
.port-always { background: rgba(255,255,255,0.95); }
.port-name { color: #0a1a0e; }

/* Masonry */
.port-overlay { background: rgba(255,255,255,0.96); }
.port-link { color: var(--green); }
.port-desc { color: #4a6a52; }

/* Marquee */
.marquee-inner { color: #0a1a0e; }
.marquee-inner span { color: var(--green); }

/* Stats strip */
.stats-strip { background: #f0f7f1; border-color: rgba(0,160,50,0.12); }
.stat-label { color: #4a6a52; }

/* Case study */
.cs-badge { background: var(--green); color: #fff; }

/* Setup notice */
.setup-notice { background: rgba(224,96,0,0.06); border-color: rgba(224,96,0,0.3); color: rgba(120,60,0,0.8); }
.setup-notice strong { color: #e06000; }

/* Form banners */
.form-banner.success { background: rgba(0,170,51,0.08); border-color: rgba(0,170,51,0.3); color: #005a1a; }
.form-banner.failure { background: rgba(220,0,0,0.06); border-color: rgba(220,0,0,0.2); color: #aa0000; }

/* Headings in light mode */
h1, h2, h3, h4, h5, h6 { color: #0a1a0e; }
a { color: inherit; }

/* Contact info links */
.ci-value a { color: #0a1a0e; }
.ci-value a:hover { color: var(--green); }
.cs-link { border-color: rgba(0,160,50,0.2); color: #4a6a52; }
.cs-link:hover { border-color: var(--green); color: var(--green); }

/* Browser/phone mockups in SVG backgrounds - keep dark for contrast */
.browser-mock, .phone-mock { background: #1a2a1e; }

/* Divider lines */
.tp-feature { border-bottom-color: rgba(0,0,0,0.06); }
.cs-item { border-bottom-color: rgba(0,0,0,0.05); }
.proj-meta-row { border-color: rgba(0,160,50,0.15); }
.footer-inner { border-bottom-color: rgba(0,160,50,0.12); }

/* ═══ BUTTON LIGHT THEME FIXES ═══ */
.btn-ghost, .btn-ghost-sm {
  background: transparent;
  color: #0a1a0e;
  border: 1.5px solid rgba(0,0,0,0.25);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 1.1rem 2.5rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: all .2s;
}
.btn-ghost:hover, .btn-ghost-sm:hover {
  border-color: var(--green);
  color: var(--green);
  text-decoration: none;
}

/* CTA section light */
.proj-cta { background: #f0f7f1; }
.proj-cta::before { color: rgba(0,160,50,0.04); }
.proj-cta h2 { color: #0a1a0e; }
.proj-cta p { color: #4a6a52; }

/* Next project light */
.next-project { background: #f0f5f0; border-top: 1px solid rgba(0,160,50,0.12); }
.next-project:hover { background: rgba(0,160,50,0.06); }

/* Screen items light */
.screen-item { background: #fff; border-color: rgba(0,160,50,0.15); }
.screen-label { background: #f5f7f5; color: #4a6a52; border-top: 1px solid rgba(0,160,50,0.1); }

/* Proj sections light */
.proj-hero { background: #f0f7f1; }
.proj-meta-row { border-color: rgba(0,160,50,0.15); }
.proj-banner { border: 1px solid rgba(0,160,50,0.15); }
.proj-overview { background: #fff; }
.proj-screens { background: #fff; }
.proj-cs { background: #f0f7f1; border-color: rgba(0,160,50,0.12); }
.cs-col h3 .accent { color: var(--green); }

/* Contact section light */
.contact-section { background: #fff; }
.contact-form { background: #f5f7f5; border-color: rgba(0,160,50,0.15); }
.ci-item { border-bottom-color: rgba(0,160,50,0.12); }

/* FAQ light */
.faq-section { background: #f0f7f1; border-color: rgba(0,160,50,0.1); }
.faq-item { border-bottom-color: rgba(0,160,50,0.12); }

/* Map light */
.map-section { background: #e8f0e8; }

/* Portfolio page light */
.filter-bar { background: #f5f7f5; border-color: rgba(0,160,50,0.12); }
.filter-btn { color: #4a6a52; border-color: rgba(0,160,50,0.15); }
.filter-btn.active, .filter-btn:hover { background: var(--green); color: #fff; border-color: var(--green); }
.port-overlay { background: rgba(255,255,255,0.95); }
.case-study { background: #f0f7f1; }
.testi-section { background: #fff; }
.testi-card { background: #f5f7f5; border-color: rgba(0,160,50,0.12); color: #0a1a0e; }
.testi-body { color: #4a6a52; }
.testi-name { color: #0a1a0e; }
.testi-role { color: #4a6a52; }

/* Stats strip light */
.stats-strip, .mobile-stats { background: #f0f7f1; border-color: rgba(0,160,50,0.12); }

/* Services page light */
.web-services { background: #f0f7f1; }
.ws-card { background: #fff; border-color: rgba(0,160,50,0.15); }
.ws-card:hover { border-color: var(--green); }
.ws-list li { border-bottom-color: rgba(0,0,0,0.04); color: #4a6a52; }
.ws-list li::before { color: var(--green); }
.web-process { background: #f0f7f1; }
.web-portfolio { background: #fff; }
.wp-item { background: #f5f7f5; border-color: rgba(0,160,50,0.12); }
.wp-info { background: #f5f7f5; }
.wp-cat { color: var(--green); }
.wp-title { color: #0a1a0e; }
.wp-desc { color: #4a6a52; }

/* Mobile app page light */
.app-types { background: #f0f7f1; }
.at-card { background: #fff; border-color: rgba(0,160,50,0.12); }
.at-card:hover { border-color: var(--green); }
.at-title { color: #0a1a0e; }
.at-desc { color: #4a6a52; }
.phone-mock { background: #f5f7f5; border-color: rgba(0,160,50,0.2); }
.phone-mock.large { border-color: var(--green); }
.ps-status, .ps-header, .ps-row, .ps-tab { background: #e0e8e0; }
.ps-tab.active { background: rgba(0,160,50,0.2); }
.platform-tabs-section { background: #fff; }
.mobile-portfolio { background: #f5f7f5; }
.mp-card { background: #fff; border-color: rgba(0,160,50,0.12); }
.mp-tag { border-color: rgba(0,160,50,0.15); color: #4a6a52; }

/* About page light */
.about-hero, .team-section, .why-section { background: #f0f7f1; }

/* Back link light */
.back-link { color: #4a6a52; }
.back-link:hover { color: var(--green); }

/* Page hero band light */
.page-hero::after { background: radial-gradient(circle, rgba(0,160,50,0.08) 0%, transparent 65%); }

/* ═══ WHATSAPP FLOATING BUTTON ═══ */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.wa-bubble {
  width: 58px;
  height: 58px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
}
.wa-bubble:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37,211,102,0.6);
}
.wa-bubble svg {
  width: 30px;
  height: 30px;
  fill: #ffffff;
}
.wa-bubble::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,0.5);
  animation: wa-pulse 2s ease-out infinite;
}
.wa-bubble::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,0.25);
  animation: wa-pulse 2s ease-out infinite .4s;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
.wa-label {
  background: #ffffff;
  color: #0a1a0e;
  font-family: 'Space Mono', monospace;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .5rem .9rem;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.wa-float:hover .wa-label {
  opacity: 1;
  transform: translateX(0);
}
@media(max-width:576px) {
  .wa-float { bottom: 20px; right: 20px; }
  .wa-bubble { width: 52px; height: 52px; }
  .wa-label { display: none; }
}