@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#0A0B09;
  --bg-soft:#0F110D;
  --card:#12150F;
  --card-alt:#161A12;
  --ink:#F5F7F2;
  --ink-soft:#9AA79A;
  --ink-faint:#6C776A;
  --line:#22271D;
  --accent:#3ED164;
  --accent-dim:#1F5C33;
  --accent-ink:#08130A;
  --radius:14px;
  --radius-sm:8px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:'Sora',sans-serif;
  color:var(--ink);
  margin:0 0 .5em 0;
  line-height:1.15;
  font-weight:700;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.2rem,5vw,3.4rem);}
h2{font-size:clamp(1.6rem,3vw,2.2rem);}
h3{font-size:1.2rem;}
p{margin:0 0 1em 0; color:var(--ink-soft); max-width:62ch;}
a{color:inherit;}
img{max-width:100%;display:block;}
.container{max-width:1140px;margin:0 auto;padding:0 24px;}
.section{padding:88px 0;}
.section.tight{padding:56px 0;}
.section.alt{background:var(--bg-soft);}

/* Nav */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,11,9,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 24px; max-width:1140px; margin:0 auto;}
.brand{font-family:'Sora',sans-serif; font-weight:700; font-size:1.1rem; text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:10px;}
.brand .dot{width:26px;height:26px;background:var(--accent);border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--accent-ink);font-size:.75rem;font-weight:800;}
.nav-links{display:flex; align-items:center; gap:8px; list-style:none; margin:0; padding:0;}
.nav-links a{text-decoration:none; font-size:.88rem; color:var(--ink-soft); font-weight:500; padding:8px 14px; border-radius:20px; transition:.15s;}
.nav-links a:hover{color:var(--ink);}
.nav-links a.active{color:var(--ink); background:var(--card);}
.nav-cta{
  background:var(--accent) !important; color:var(--accent-ink) !important; padding:10px 20px !important;
  font-size:.88rem; font-weight:700; border-radius:24px !important; margin-left:8px;
}
.nav-toggle{display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--ink);}

@media (max-width:860px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:var(--bg);
    flex-direction:column; align-items:flex-start; padding:20px 24px; border-bottom:1px solid var(--line);
    gap:8px; display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links a{width:100%;}
  .nav-toggle{display:block;}
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 26px; text-decoration:none; font-weight:700;
  border-radius:28px; font-size:.92rem; transition:transform .15s, background .15s, opacity .15s;
  border:1px solid transparent; font-family:'Sora',sans-serif;
}
.btn-primary{background:var(--accent); color:var(--accent-ink);}
.btn-primary:hover{opacity:.88;}
.btn-outline{border-color:var(--line); color:var(--ink); background:transparent;}
.btn-outline:hover{background:var(--card);}
.btn-row{display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:8px;}

/* Hero */
.hero{
  padding:90px 0 70px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; top:-200px; right:-150px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(62,209,100,.16) 0%, rgba(62,209,100,0) 70%);
  pointer-events:none;
}
.hero-inner{position:relative; z-index:1;}
.tag{
  display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600; color:var(--accent);
  background:rgba(62,209,100,.1); border:1px solid var(--accent-dim); padding:6px 14px; border-radius:20px; margin-bottom:22px;
}
.tag::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block;}
.hero h1{max-width:16ch;}
.hero p.lead{font-size:1.1rem; max-width:50ch; margin-top:18px;}

.hero-split{display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:start;}
@media (max-width:900px){ .hero-split{grid-template-columns:1fr;} }

.hero-visual{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.vcard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.vcard-stat{padding:22px 20px;}
.vcard-stat .big{font-family:'Sora',sans-serif; font-size:1.9rem; font-weight:800; color:var(--ink);}
.vcard-stat .lbl{font-size:.85rem; color:var(--ink-soft); margin-top:4px;}
.vcard-graphic{
  height:150px; margin:0 20px 20px;
  background:radial-gradient(circle at 40% 40%, rgba(62,209,100,.35), rgba(62,209,100,0) 65%);
  border:1px dashed var(--accent-dim); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:.8rem; font-weight:600;
}
.vcard-strip{border-top:1px solid var(--line); padding:14px 20px; font-size:.85rem; font-weight:600; color:var(--ink);}
.photo-frame{position:relative; aspect-ratio:3/4; background:var(--card-alt);}
.photo-frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.photo-frame .ph-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:20px; font-size:.82rem; color:var(--ink-faint); background:
    repeating-linear-gradient(45deg, var(--card-alt), var(--card-alt) 10px, var(--bg-soft) 10px, var(--bg-soft) 20px);
}

/* Logo strip */
.logo-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:32px 0; background:var(--bg-soft);}
.logo-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:28px; opacity:.6;}
.logo-row span{font-family:'Sora',sans-serif; font-weight:600; color:var(--ink-soft); font-size:.95rem;}

/* Stats */
.stats-row{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:24px; align-items:end;}
@media (max-width:760px){ .stats-row{grid-template-columns:1fr 1fr;} }
.stat-num{font-family:'Sora',sans-serif; font-size:clamp(2rem,4vw,2.6rem); font-weight:800; color:var(--accent);}
.stat-lbl{font-size:.9rem; color:var(--ink-soft); margin-top:4px;}

/* Grid / cards */
.grid{display:grid; gap:22px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .grid-3, .grid-2{grid-template-columns:1fr;} }

.icon-circle{
  width:44px; height:44px; border-radius:12px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; color:var(--accent-ink);
  font-weight:800; font-size:1.05rem; margin-bottom:18px;
}

.spec-card{
  border:1px solid var(--line); background:var(--card); padding:26px; border-radius:var(--radius);
  position:relative;
}
.spec-card.feature{transition:border-color .15s;}
.spec-card.feature:hover{border-color:var(--accent-dim);}
.spec-card .num{
  font-family:'Sora',sans-serif; font-size:.78rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em;
  padding-bottom:10px; margin-bottom:16px; display:block; border-bottom:1px solid var(--line);
}
.spec-card ul{margin:14px 0 0; padding-left:18px; color:var(--ink-soft); font-size:.92rem;}
.spec-card li{margin-bottom:6px;}
.spec-card .price{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  font-family:'Sora',sans-serif; font-weight:700; color:var(--accent); font-size:.92rem;
}
.spec-card.highlight{background:linear-gradient(160deg, var(--card) 0%, var(--card-alt) 100%); border-color:var(--accent-dim);}

/* Process steps */
.steps{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
  margin-top:36px;
  border-top:none;
  counter-reset:step;
}

.step{
  counter-increment:step;
  display:grid;
  grid-template-columns:48px 1fr;
  gap:20px;
  align-items:start;

  padding:30px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);

  min-height:190px;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}

/* Hide the empty div already present in your HTML */
.step > div:first-child{
  display:none;
}

.step::before{
  content:counter(step,decimal-leading-zero);
  font-family:'Sora',sans-serif;
  font-size:1.25rem;
  color:var(--accent);
  font-weight:800;

  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  line-height:1.2;
}

.step h3{
  margin:0 0 10px 0;
}

.step p{
  margin:0;
  max-width:48ch;
}

.step:hover{
  transform:translateY(-4px);
  border-color:var(--accent-dim);
  background:var(--card-alt);
}


/* Mobile */
@media (max-width:760px){

  .steps{
    grid-template-columns:1fr;
  }

  .step{
    min-height:auto;
    padding:26px;
  }

}
/* Two column layout */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media (max-width:820px){ .split{grid-template-columns:1fr;} }

/* Footer */
.site-footer{background:#050604; color:var(--ink-soft); padding:56px 0 28px; border-top:1px solid var(--line);}
.site-footer h4{color:var(--ink); font-size:.9rem; margin-bottom:14px;}
.site-footer a{color:var(--ink-soft); text-decoration:none; font-size:.9rem;}
.site-footer a:hover{color:var(--ink);}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px;}
@media (max-width:640px){ .footer-grid{grid-template-columns:1fr;} }
.footer-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.footer-bottom{
  border-top:1px solid var(--line); margin-top:40px; padding-top:20px;
  font-size:.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* Contact form */
.form-field{margin-bottom:18px;}
.form-field label{display:block; font-size:.86rem; font-weight:600; margin-bottom:6px; color:var(--ink);}
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-family:'Inter',sans-serif; font-size:.95rem; background:var(--card); color:var(--ink);
}
.form-field textarea{min-height:120px; resize:vertical;}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{outline:2px solid var(--accent-dim); border-color:var(--accent);}

/* Badge list */
.badge-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
.badge{border:1px solid var(--line); padding:6px 14px; border-radius:20px; font-size:.85rem; color:var(--ink-soft); background:var(--card);}

/* Avatar row (trusted by) */
.avatar-row{display:flex; align-items:center; gap:14px; margin-top:34px;}
.avatar-stack{display:flex;}
.avatar-stack .av{
  width:34px; height:34px; border-radius:50%; border:2px solid var(--bg); background:var(--card-alt);
  margin-left:-10px; display:flex; align-items:center; justify-content:center; font-size:.75rem; color:var(--ink-soft);
}
.avatar-stack .av:first-child{margin-left:0;}
.avatar-row .meta{font-size:.82rem; color:var(--ink-soft);}
.avatar-row .stars{color:var(--accent); font-size:.85rem; margin-top:2px;}

/* Project placeholder card */
.project-card{border:1px solid var(--line); background:var(--card); overflow:hidden; border-radius:var(--radius);}
.project-thumb{
  aspect-ratio:16/10; background:
    repeating-linear-gradient(45deg, var(--card-alt), var(--card-alt) 10px, var(--bg-soft) 10px, var(--bg-soft) 20px);
  display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:.85rem;
  border-bottom:1px solid var(--line);
}
.project-body{padding:20px;}
.project-body .status{font-size:.76rem; color:var(--accent); font-weight:700; margin-bottom:8px; display:block; text-transform:uppercase; letter-spacing:.04em;}

.divider{height:1px; background:var(--line); margin:0;}