:root {
  --bg: #0b0e14;
  --bg2: #111526;
  --text: #eaeefb;
  --muted: #b6c1e1;
  --accent: #ff8a3d;
  --card: #151a2e;
  --border: #243051;
  --wa: #25d366;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: radial-gradient(1200px 600px at 20% 0%, #1a203a 0%, #0b0e14 50%),
    #0b0e14;
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Ubuntu,
    Cantarell, "Helvetica Neue", Arial;
}
html{scroll-behavior:smooth}
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(
    180deg,
    rgba(11, 14, 20, 0.9),
    rgba(11, 14, 20, 0.7)
  );
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  object-fit: cover;
  background: #222;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-top {
  font-weight: 700;
  font-size: 18px;
}
.brand-sub {
  font-size: 12px;
  color: var(--muted);
}
.main-nav{display:none}
.nav-menu{display:flex;gap:14px;list-style:none;margin:0;padding:0}
.nav-link{color:var(--muted);text-decoration:none;font-weight:600}
.nav-link:hover{color:#fff}
@media (min-width: 820px){.main-nav{display:block}}
.contact {
  display: flex;
  align-items: center;
  gap: 12px;
}
.phone {
  color: var(--muted);
  font-weight: 600;
  display: block;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn-whatsapp {
  background: var(--wa);
  color: #04240f;
}
.btn-whatsapp:hover {
  filter: brightness(1.1);
}
.hero {
  position: relative;
  padding: 80px 0 40px;
  background: linear-gradient(180deg, transparent, rgba(255, 138, 61, 0.06));
}
.hero-content{position:relative;z-index:1}
.hero-title{font-size:42px;margin:0 0 10px;background:linear-gradient(90deg,#fff,#ffdbbe);-webkit-background-clip:text;background-clip:text;color:transparent}
.highlight{color:#fff;background:linear-gradient(90deg,#ffb27a,#ffd7be);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-subtitle{margin:0 0 12px;color:var(--muted)}
.hero-buttons{display:flex;gap:10px}
.stars{position:absolute;inset:0;pointer-events:none}
.stars::before,.stars::after{content:"";position:absolute;inset:0;background:
  radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,.8),transparent 60%),
  radial-gradient(1.5px 1.5px at 30% 40%,rgba(255,255,255,.7),transparent 60%),
  radial-gradient(1px 1px at 70% 30%,rgba(255,255,255,.8),transparent 60%),
  radial-gradient(1.2px 1.2px at 85% 15%,rgba(255,255,255,.8),transparent 60%),
  radial-gradient(1px 1px at 50% 80%,rgba(255,255,255,.6),transparent 60%),
  radial-gradient(1.6px 1.6px at 20% 75%,rgba(255,255,255,.75),transparent 60%),
  radial-gradient(1px 1px at 90% 60%,rgba(255,255,255,.8),transparent 60%),
  radial-gradient(1px 1px at 40% 10%,rgba(255,255,255,.7),transparent 60%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
.stars::after{opacity:.7;filter:blur(.2px);animation-delay:3s}
@keyframes twinkle{0%{transform:translate3d(0,0,0);filter:brightness(1)}100%{transform:translate3d(0,-2px,0);filter:brightness(1.25)}}
.services {
  padding: 24px 0 64px;
}
.services h2,
.about h2 {
  font-size: 22px;
  margin: 0 0 18px;
  color: #fff;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 580px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
  .phone{
    display: none;
  }
}
.service-card {
  --accent-rgb: 255, 138, 61;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.02)
    ),
    radial-gradient(
      800px 400px at 100% 0%,
      rgba(var(--accent-rgb), 0.18),
      transparent
    ),
    var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  border-bottom: 2px solid rgba(var(--accent-rgb), 0.3);
  cursor: pointer;
}
.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.service-card .emoji {
  font-size: 22px;
}
.service-card h3 {
  margin: 8px 0 6px;
  font-size: 18px;
}
.service-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.quote-btn {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 700;
  background: var(--wa);
  color: #04240f;
  cursor: pointer;
}
.quote-btn:hover {
  filter: brightness(1.05);
}
.quote-btn .icon {
  display: inline-block;
  fill: currentColor;
}
.accent-orange {
  --accent-rgb: 255, 138, 61;
}
.accent-purple {
  --accent-rgb: 168, 85, 247;
}
.accent-blue {
  --accent-rgb: 59, 130, 246;
}
.accent-green {
  --accent-rgb: 16, 185, 129;
}
.accent-pink {
  --accent-rgb: 236, 72, 153;
}
.accent-teal {
  --accent-rgb: 20, 184, 166;
}
.accent-yellow {
  --accent-rgb: 234, 179, 8;
}
.accent-red {
  --accent-rgb: 244, 63, 94;
}
.accent-indigo {
  --accent-rgb: 99, 102, 241;
}
.accent-cyan {
  --accent-rgb: 6, 182, 212;
}
.accent-lime {
  --accent-rgb: 132, 204, 22;
}
.about {
  padding: 12px 0 56px;
  background: linear-gradient(180deg, rgba(255, 138, 61, 0.06), transparent);
}
.location {
  padding: 12px 0 56px;
  background: linear-gradient(180deg, transparent, rgba(255, 138, 61, 0.06));
}
.map-embed {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  border: 0;
}
.map-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}
.values li {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--muted);
}
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 16px 0;
  background: linear-gradient(
    180deg,
    rgba(11, 14, 20, 0.7),
    rgba(11, 14, 20, 0.9)
  );
}
.footer-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#year {
  opacity: 0.8;
}
.tools{padding:12px 0 56px}
.tools h2{margin:0 0 10px}
.tools-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
@media (max-width: 900px){.tools-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width: 580px){.tools-grid{grid-template-columns:repeat(3,1fr)}}
.tool-item{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:12px;padding:10px;background:rgba(255,255,255,.04)}
.tool-item i{color:var(--accent)}
.projects{padding:12px 0 56px}
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width: 820px){.projects-grid{grid-template-columns:1fr}}
.project-card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--border);border-radius:16px;padding:16px;display:flex;gap:14px}
.project-icon{font-size:26px;color:var(--accent)}
.project-tech{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.tech-tag{border:1px solid var(--border);border-radius:999px;padding:6px 10px;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.project-link{display:inline-flex;gap:8px;align-items:center;text-decoration:none;color:#fff;font-weight:700}
.adult-warning{margin-left:8px;color:#ffb27a;opacity:.85}
.contact-section{padding:40px 0 64px;background:linear-gradient(180deg,rgba(255,138,61,.04),transparent)}
.contact-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;border:1px solid var(--border);border-radius:16px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
@media (max-width: 820px){.contact-grid{grid-template-columns:1fr}}
.contact-items{display:grid;gap:12px}
.contact-item{display:flex;gap:12px;align-items:center;border:1px solid var(--border);border-radius:12px;padding:12px;background:rgba(255,255,255,.04)}
.contact-item i{color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:50%;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center}
.contact-item h4{margin:0 0 4px}
.contact-actions{display:flex;flex-direction:column;gap:12px;border:1px solid var(--border);border-radius:12px;padding:14px;background:rgba(255,255,255,.04)}
.contact-actions .btn{width:100%;justify-content:center}
.btn-outline{background:transparent;color:#fff;border:1px solid var(--border)}
.btn-outline:hover{background:rgba(255,255,255,.06)}
.contact-note{color:var(--muted);text-align:center;font-size:12px}