:root{
  --bg:#0a120e;
  --bg-alt:#0e1a13;
  --surface:#0f1a14;
  --surface-2:#16241c;
  --border:#1e2f24;
  --text:#edf5ef;
  --text-dim:#9ab3a3;
  --text-faint:#5f7a6a;
  --accent:#34e28a;
  --accent-2:#d9c26a;
  --accent-contrast:#052416;
  --radius:16px;
  --font-head:'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}

a{color:inherit; text-decoration:none;}

ul,ol{list-style:none;}

.wrap{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.15;
}

.eyebrow{
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
}
.eyebrow.center{text-align:center;}

.section-title{
  font-size:clamp(1.7rem, 3vw, 2.4rem);
  margin-bottom:18px;
}
.section-title.center{text-align:center; max-width:640px; margin-left:auto; margin-right:auto;}

.lead{
  color:var(--text-dim);
  font-size:1.05rem;
  max-width:640px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 26px;
  border-radius:999px;
  font-weight:600;
  font-size:0.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{
  background:var(--accent);
  color:var(--accent-contrast);
}
.btn-primary:hover{background:#5eeaa3;}
.btn-ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--border);
}
.btn-ghost:hover{border-color:var(--accent);}
.btn-full{width:100%;}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,18,14,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}
.brand{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:-0.01em;
}
.brand span{color:var(--accent);}

.nav{display:flex; align-items:center; gap:32px;}
.nav a{
  position:relative;
  font-size:0.92rem;
  font-weight:500;
  color:var(--text-dim);
  transition:color .15s ease;
}
.nav a:not(.nav-cta)::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:100%;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .25s ease;
}
.nav a:not(.nav-cta):hover::after{
  transform:scaleX(1);
  transform-origin:left;
}
.nav a:hover{color:var(--text);}
.nav-cta{
  background:var(--accent);
  color:var(--accent-contrast) !important;
  padding:9px 18px;
  border-radius:999px;
  font-weight:600 !important;
}
.nav-cta:hover{background:#5eeaa3;}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px;
  height:36px;
  background:none;
  border:none;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:2px;
  width:100%;
  background:var(--text);
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}

/* Hero */
.hero{
  position:relative;
  padding:110px 0 90px;
  overflow:hidden;
}
.hero-inner{position:relative; z-index:2; max-width:760px;}
.hero h1{
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  margin-bottom:22px;
}
.grad{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-sub{
  color:var(--text-dim);
  font-size:1.1rem;
  max-width:600px;
  margin-bottom:36px;
}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}

.hero-glow{
  position:absolute;
  top:-200px;
  right:-200px;
  width:700px;
  height:700px;
  background:radial-gradient(circle, rgba(52,226,138,0.18), transparent 65%);
  z-index:1;
  pointer-events:none;
  animation:glow-breathe 8s ease-in-out infinite;
}

@keyframes glow-breathe{
  0%, 100%{transform:scale(1); opacity:1;}
  50%{transform:scale(1.12); opacity:0.75;}
}

/* Hero entrance animation */
.hero-anim{
  opacity:0;
  transform:translateY(18px);
  animation:hero-in .7s cubic-bezier(.16,.8,.3,1) forwards;
  animation-delay:var(--d, 0s);
}
@keyframes hero-in{
  to{opacity:1; transform:translateY(0);}
}

/* Scroll reveal */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.cards .reveal:nth-child(1){transition-delay:.05s;}
.cards .reveal:nth-child(2){transition-delay:.12s;}
.cards .reveal:nth-child(3){transition-delay:.19s;}
.cards .reveal:nth-child(4){transition-delay:.26s;}
.steps .reveal:nth-child(1){transition-delay:.05s;}
.steps .reveal:nth-child(2){transition-delay:.12s;}
.steps .reveal:nth-child(3){transition-delay:.19s;}
.steps .reveal:nth-child(4){transition-delay:.26s;}
.stat-row .reveal:nth-child(1){transition-delay:.05s;}
.stat-row .reveal:nth-child(2){transition-delay:.12s;}
.stat-row .reveal:nth-child(3){transition-delay:.19s;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .hero-anim, .reveal, .hero-glow{
    animation:none !important;
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* Logos strip */
.logos{
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg-alt);
}
.logos-inner{
  display:flex;
  flex-wrap:wrap;
  gap:14px 40px;
  justify-content:space-between;
  padding:22px 24px;
  color:var(--text-faint);
  font-size:0.88rem;
  font-weight:500;
  letter-spacing:0.02em;
}

/* Services */
.services{padding:100px 0;}
.cards{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  margin-top:56px;
}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.card:hover{
  border-color:var(--accent);
  transform:translateY(-4px);
  box-shadow:0 16px 36px -20px rgba(52,226,138,0.35);
}
.card-icon{
  width:52px;
  height:52px;
  border-radius:12px;
  background:var(--surface-2);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
  transition:background .25s ease, transform .25s ease;
}
.card:hover .card-icon{
  background:var(--accent);
  color:var(--accent-contrast);
  transform:scale(1.06);
}
.card h3{font-size:1.2rem; margin-bottom:10px;}
.card p{color:var(--text-dim); font-size:0.95rem; margin-bottom:18px;}
.card-list{display:flex; flex-direction:column; gap:8px;}
.card-list li{
  font-size:0.88rem;
  color:var(--text-dim);
  padding-left:18px;
  position:relative;
}
.card-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
}

/* Approach */
.approach{
  padding:100px 0;
  background:var(--bg-alt);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.approach-inner{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:60px;
  align-items:start;
}
.approach-copy{position:sticky; top:110px;}
.steps{display:flex; flex-direction:column; gap:36px;}
.steps li{display:flex; gap:20px;}
.step-num{
  font-family:var(--font-head);
  font-weight:600;
  font-size:0.95rem;
  color:var(--accent);
  padding-top:2px;
  flex-shrink:0;
}
.steps h4{font-size:1.05rem; margin-bottom:6px;}
.steps p{color:var(--text-dim); font-size:0.93rem;}

/* About */
.about{padding:100px 0;}
.about-inner{max-width:760px;}
.stat-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:48px;
}
.stat{
  border-top:1px solid var(--border);
  padding-top:16px;
}
.stat strong{
  display:block;
  font-family:var(--font-head);
  font-size:1.3rem;
  color:var(--text);
  margin-bottom:6px;
}
.stat span{font-size:0.88rem; color:var(--text-faint);}

/* CTA / Contact */
.cta{
  padding:100px 0 120px;
  background:var(--bg-alt);
  border-top:1px solid var(--border);
}
.cta-inner{max-width:640px;}
.contact-form{
  margin-top:40px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.field{display:flex; flex-direction:column; gap:8px;}
.field label{font-size:0.85rem; font-weight:500; color:var(--text-dim);}
.field input,
.field select,
.field textarea{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 14px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:0.95rem;
  resize:vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--accent);
}
.form-note{
  font-size:0.88rem;
  color:var(--accent);
  min-height:1.2em;
  transition:opacity .2s ease;
}
.form-note.error{color:#ff8a8a;}

.inline-link{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:opacity .15s ease;
}
.inline-link:hover{opacity:0.8;}

.btn[disabled]{
  opacity:0.65;
  cursor:not-allowed;
  transform:none !important;
}

/* Footer */
.site-footer{
  border-top:1px solid var(--border);
  padding:32px 0;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.footer-inner p{color:var(--text-faint); font-size:0.85rem;}
.footer-contact{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.footer-contact a{
  color:var(--text-dim);
  font-size:0.88rem;
  transition:color .15s ease;
}
.footer-contact a:hover{color:var(--accent);}

/* Responsive */
@media (max-width: 860px){
  .approach-inner{grid-template-columns:1fr;}
  .approach-copy{position:static;}
  .cards{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:1fr;}
}

@media (max-width: 720px){
  .nav{
    position:absolute;
    top:72px;
    left:0;
    right:0;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    flex-direction:column;
    align-items:flex-start;
    padding:20px 24px 28px;
    gap:18px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .nav.open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .nav-cta{margin-top:4px;}
  .nav-toggle{display:flex;}
  .form-row{grid-template-columns:1fr;}
}

@media (max-width: 480px){
  .hero{padding:90px 0 70px;}
  .services, .approach, .about{padding:70px 0;}
  .cta{padding:70px 0 90px;}
}