/* ---------- Design tokens ---------- */
:root{
  --bg:#0b0c10;
  --panel:#11131a;
  --text:#e6e8ee;
  --muted:#a4a9b6;
  --brand:#3aa9ff;
  --brand-2:#6be4c9;
  --ring:rgba(58,169,255,.35);

  /* Fluid typography & spacing */
  --fs-sm: clamp(12px, 0.75rem + 0.1vw, 14px);
  --fs-md: clamp(14px, 0.85rem + 0.2vw, 16px);
  --fs-lg: clamp(18px, 1.05rem + 0.4vw, 22px);
  --fs-xl: clamp(28px, 1.6rem + 1vw, 44px);
  --radius: 18px;
  --radius-lg: 24px;

  --container: min(1100px, 92vw);
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-size: var(--fs-md); line-height:1.6;
  -webkit-text-size-adjust:100%;
}

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px clamp(12px, 2vw, 20px);
  background:linear-gradient(0deg, rgba(17,19,26,.8), rgba(17,19,26,.8));
  backdrop-filter:blur(8px);
  border-bottom:1px solid #1b1f2a;
}

.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text)}
.brand img{width:36px;height:36px}

.nav{display:flex;gap:16px;align-items:center}
.nav a{
  padding:10px 12px; color:var(--text);
  border-radius:12px;
}
.nav a.cta{
  background:var(--brand); color:#000; border-radius:12px; padding:10px 14px;
}

.header-right{display:flex;align-items:center;gap:10px}
.lang-switch{
  background:#0e1118;border:1px solid #202534;color:var(--text);
  border-radius:10px;padding:6px 8px; min-height:38px;
}
.lang-label{color:var(--muted);font-size:var(--fs-sm)}

.nav-toggle{
  display:none; background:none; border:1px solid #2a2f3b; color:var(--text);
  border-radius:10px; padding:8px 10px; min-height:44px; min-width:44px;
}

/* ---------- Layout ---------- */
.content{padding: clamp(20px, 4vw, 30px) 20px; max-width:var(--container); margin:0 auto}

/* ---------- Hero ---------- */
.hero{
  border:1px solid #1b1f2a; border-radius:var(--radius-lg);
  padding: clamp(28px, 6vw, 60px);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(58,169,255,.15), transparent),
    linear-gradient(180deg, #0c0f16 0%, #0b0c10 100%);
}
.hero h1{font-size:var(--fs-xl); margin:0 0 10px}
.hero p{color:var(--muted); max-width:70ch}
.hero-actions{margin-top:18px; display:flex; gap:12px; flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #2a2f3b; border-radius:12px;
  padding:12px 16px; color:var(--text); cursor:pointer;
  min-height:44px; /* mobile tap target */
}
.btn.primary{background:var(--brand);color:#000;border-color:transparent}
.btn.ghost{background:transparent}

/* ---------- Cards & grids ---------- */
.card{
  background:var(--panel); border:1px solid #1b1f2a;
  border-radius:var(--radius); padding:18px;
}
.grid.features{
  margin-top:24px;
  display:grid; gap:16px;
  grid-template-columns: repeat(12, 1fr);
}
.grid.features > .card{grid-column: span 12}
@media (min-width: 640px){
  .grid.features > .card{grid-column: span 6}
}
@media (min-width: 1024px){
  .grid.features > .card{grid-column: span 4}
}

/* ---------- Highlight / lists ---------- */
.highlight{
  margin-top:36px; background:linear-gradient(180deg, #0c0f16, #0b0c10);
  border:1px solid #1b1f2a; border-radius:var(--radius); padding:22px;
}
.checks{columns:1; gap:40px}
@media (min-width: 760px){ .checks{columns:2} }

/* ---------- Pages ---------- */
.page-header{margin-bottom:12px}
.services-list, .reviews, .contact-cards{
  display:grid; gap:16px;
  grid-template-columns: repeat(12, 1fr);
}
.service, .review-card, .contact-cards .card{grid-column: span 12}
@media (min-width: 700px){
  .service, .review-card, .contact-cards .card{grid-column: span 6}
}
@media (min-width: 1100px){
  .service, .review-card, .contact-cards .card{grid-column: span 4}
}

.review-card .stars{letter-spacing:2px;margin:0 0 6px}
.review-card .author{color:var(--muted)}

.review-form, .contact-form{margin-top:26px}
label{display:block;margin-bottom:12px;font-weight:600}
input,textarea,select{
  width:100%; padding:12px 12px; border-radius:12px;
  background:#0e1118; border:1px solid #202534; color:var(--text); outline:none;
  min-height:44px; /* tap size */
}
textarea{min-height:120px}
input:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 6px var(--ring)}

.success{color:var(--brand-2);margin-top:10px}
.hidden{display:none}

/* ---------- Footer & floating call ---------- */
.site-footer{
  margin-top:50px; padding:24px clamp(12px, 2vw, 20px);
  border-top:1px solid #1b1f2a; background:#0a0b0f;
}
.footer-cols{
  display:grid; gap:16px;
  grid-template-columns: repeat(12, 1fr); margin-bottom:10px;
}
.footer-cols > div{grid-column: span 12}
@media (min-width: 760px){
  .footer-cols > div{grid-column: span 4}
}

.floating-call{
  position:fixed; right:16px; bottom:16px;
  background:var(--brand); color:#000;
  padding:12px 16px; border-radius:999px; border:1px solid #000;
  text-decoration:none; box-shadow:0 6px 30px rgba(58,169,255,.3);
  min-height:44px;
}

/* ---------- Mobile nav (drawer style) ---------- */
@media (max-width: 760px){
  .nav{
    position:fixed; inset:56px 12px auto 12px;
    display:none; flex-direction:column; gap:6px;
    background:#0d1017; border:1px solid #1b1f2a; border-radius:12px; padding:10px;
  }
  .nav.open{display:flex}
  .nav-toggle{display:inline-flex}
  .checks{columns:1}
}

/* Larger desktop tweaks */
@media (min-width: 1440px){
  :root{ --container: 1200px; }
}

/* Space between multiple call buttons in the same card */
.card .call-btn + .call-btn {
  margin-top: 10px;
}