
:root {
  --bg: #020617;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --gold: #d4af37;
  --green: #0a8a3a;
  --card-bg: rgba(10,26,20,0.96);
  --border-subtle: rgba(148,163,184,0.22);
}

* { box-sizing: border-box; }
html,body { margin:0; padding:0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 700px at 0% -20%, rgba(10,138,58,0.28), transparent 70%),
    radial-gradient(1000px 650px at 100% 0%, rgba(212,175,55,0.18), transparent 65%),
    var(--bg);
  line-height: 1.6;
}

.container { width:min(1120px,92%); margin:0 auto; }

a { color: var(--gold); text-decoration:none; }
a:hover { text-decoration: underline; color: #facc15; }

nav {
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background: rgba(3,7,18,0.95);
  border-bottom:1px solid rgba(212,175,55,0.25);
}

.nav-inner {
  display:flex; gap:18px; align-items:center;
  padding:10px 0;
}
.nav-spacer { flex:1; }
.logo { height:38px; border-radius:14px; background:#000; }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; }
.brand strong { color:var(--gold); letter-spacing:0.03em; }

.navlinks a {
  color: var(--text);
  opacity: .9;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 0.9rem;
}
.navlinks a:hover {
  background: rgba(10,138,58,0.24);
  opacity: 1;
}

.btn {
  appearance:none;
  border:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:0.7rem 1.3rem;
  font-weight:600;
  font-size:0.95rem;
  box-shadow:0 10px 25px rgba(0,0,0,0.5);
  transition:transform .05s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary {
  background: linear-gradient(90deg, var(--gold), #facc15);
  color:#020617;
}
.btn-primary:hover { transform:translateY(-1px); filter:brightness(1.05); }
.btn-secondary {
  background: linear-gradient(90deg, var(--green), #16a34a);
  color:#ecfdf5;
}
.btn-secondary:hover { transform:translateY(-1px); filter:brightness(1.04); }
.btn-outline {
  background:transparent;
  border:1px solid var(--border-subtle);
  color:var(--text);
}
.btn-outline:hover { border-color: var(--green); }

.hero {
  padding:70px 0 40px;
}
.hero-grid {
  display:grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
  gap:32px;
  align-items:center;
}
.badge {
  display:inline-flex;
  gap:8px;
  align-items:center;
  border-radius:999px;
  padding:4px 10px;
  font-size:0.8rem;
  background:rgba(10,138,58,0.23);
  border:1px solid rgba(10,138,58,0.55);
  color:#dcfce7;
}

h1 {
  font-size:clamp(2.1rem, 4vw, 3.3rem);
  line-height:1.05;
  margin:12px 0 10px;
  color: var(--gold);
}
.lead {
  color: var(--muted);
  font-size:clamp(0.98rem, 1.1vw, 1.06rem);
  max-width:34rem;
}

.hero-card {
  background: radial-gradient(circle at top left, rgba(212,175,55,0.2), transparent 55%),
              radial-gradient(circle at bottom right, rgba(10,138,58,0.25), transparent 60%),
              rgba(15,23,42,0.96);
  border-radius:24px;
  padding:22px;
  border:1px solid rgba(148,163,184,0.4);
}
.hero-card h3 { margin:0 0 4px; }
.subtle { color:var(--muted); font-size:0.85rem; }

.kpis {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.kpi {
  background: linear-gradient(120deg, rgba(10,138,58,0.3), rgba(15,23,42,0.95));
  border-radius:16px;
  padding:10px 12px;
  border:1px solid rgba(34,197,94,0.35);
  font-size:0.8rem;
}
.kpi strong {
  display:block;
  margin-top:3px;
  font-size:1.2rem;
  color:var(--gold);
}

.section { padding:60px 0; }
.section h2 {
  font-size:1.6rem;
  margin:0 0 8px;
  color: var(--gold);
  letter-spacing:0.02em;
}
.section p { color:var(--muted); margin:4px 0 18px; }

.cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.card {
  background: var(--card-bg);
  border-radius:18px;
  padding:16px 16px 18px;
  border:1px solid rgba(15,118,110,0.5);
}
.card h3 { margin:0 0 6px; font-size:1rem; color:#e5e7eb; }
.card p { font-size:0.92rem; color:var(--muted); }

.list {
  list-style:none;
  padding-left:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 14px;
}
.list li {
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:0.9rem;
}
.dot {
  width:9px;
  height:9px;
  border-radius:999px;
  margin-top:6px;
  background: radial-gradient(circle, var(--gold), var(--green));
}

.form { display:grid; gap:10px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }

.input, select, textarea {
  width:100%;
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.5);
  background:#020617;
  color:var(--text);
  padding:10px 12px;
  font-size:0.9rem;
}
.input:focus, select:focus, textarea:focus {
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 1px rgba(34,197,94,0.7);
}

.pricing {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.price-card {
  background: radial-gradient(circle at top left, rgba(10,138,58,0.25), transparent 60%),
              var(--card-bg);
  border-radius:18px;
  padding:16px;
  border:1px solid rgba(212,175,55,0.35);
}
.price { font-size:1.4rem; font-weight:700; color:var(--gold); }
.badge-tag {
  display:inline-block;
  border-radius:999px;
  padding:2px 8px;
  font-size:0.7rem;
  background:rgba(34,197,94,0.18);
  border:1px solid rgba(34,197,94,0.6);
  margin-left:4px;
  color:#bbf7d0;
}

.gallery {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.gallery img {
  width:100%;
  height:210px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(212,175,55,0.5);
}

.blog {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.post {
  background:var(--card-bg);
  border-radius:18px;
  padding:16px;
  border:1px solid rgba(15,118,110,0.6);
}
.post h3 { margin:0 0 4px; font-size:1rem; color:#e5e7eb; }
.post time { font-size:0.78rem; color:var(--muted); }
.post p { font-size:0.9rem; color:var(--muted); }

.testimonials {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.quote {
  background:var(--card-bg);
  border-radius:18px;
  padding:14px;
  border:1px solid rgba(34,197,94,0.55);
  font-size:0.9rem;
}
.quote strong { display:block; margin-top:8px; color:var(--gold); }

.founder-card {
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--card-bg);
  border-radius:18px;
  padding:18px;
  border:1px solid rgba(212,175,55,0.4);
  max-width:720px;
}
.founder-meta { font-size:0.88rem; color:var(--muted); }

footer {
  padding:26px 0;
  border-top:1px solid rgba(212,175,55,0.35);
  background:#020617;
}
footer .grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:18px;
}
footer ul { list-style:none; padding-left:0; margin:6px 0 0; }
footer li a { font-size:0.9rem; color:var(--muted); }
footer li a:hover { color:var(--gold); }

.burger {
  display:none;
  background:transparent;
  border:1px solid rgba(148,163,184,0.6);
  border-radius:999px;
  padding:6px 10px;
  color:var(--text);
  font-size:0.8rem;
}
.cta { display:none; }

@media (max-width:980px){
  .hero-grid { grid-template-columns:1fr; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .testimonials { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pricing, .gallery, .blog { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cta { display:inline-flex; }
}

@media (max-width:700px){
  .cards, .testimonials, .pricing, .gallery, .blog,
  .list, .grid-2 { grid-template-columns:1fr; }
  .navlinks {
    display:none;
    position:absolute;
    top:56px; left:0; right:0;
    background:#020617;
    padding:10px 4%;
    border-bottom:1px solid rgba(212,175,55,0.25);
  }
  .navlinks a { display:block; padding:8px 4px; }
  .burger { display:inline-flex; }
}
