/* ============ Base ============ */
:root{
  --bg: #0B1224;
  --surface: #0E1528;
  --card: #10192f;
  --text: #eaf2ff;
  --muted: #9fb0c8;
  --line: rgba(255,255,255,.12);
  --chip-bg: rgba(255,255,255,.08);
  --chip-text: #cfe0ff;
  --brand1:#2563EB; --brand2:#06B6D4;
  --shadow: 0 18px 50px rgba(14,21,40,.55);
  --shadow-soft: 0 8px 24px rgba(14,21,40,.35);
}
html.dark-boot body{ background:#0B1224; color:#eaf2ff; }
*{ box-sizing:border-box; }
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block }

/* Light theme vars */
body:not(.dark){
  --bg:#f7faff;
  --surface:#ffffff;
  --card:#ffffff;
  --text:#0b1535;
  --muted:#45597a;
  --line:#e2eaf7;
  --chip-bg:#eef3ff;
  --chip-text:#102043;
  --shadow: 0 14px 40px rgba(10,25,55,.12);
  --shadow-soft: 0 8px 22px rgba(10,25,55,.10);
}

.sr-only{ position:absolute; left:-9999px; }

/* Containers */
.container{ max-width:1100px; margin:0 auto; padding:14px 18px; }
.container-wide{ max-width:1200px; margin:0 auto; padding:0 18px; }
.section{ padding:34px 0; }

/* Type */
.h1{ font-family:Poppins,Inter,sans-serif; font-weight:800; font-size: clamp(32px,4.4vw,56px); line-height:1.05; margin:.2rem 0 .6rem; }
.h2{ font-weight:800; font-size: clamp(20px,2.2vw,28px); line-height:1.15; }
.sub{ color:var(--muted); }

/* Brand accents */
.grad{ background: linear-gradient(135deg,var(--brand1),var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pill{ display:inline-block; padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px;
  background: var(--chip-bg); color: var(--chip-text); border:1px solid var(--line); }

/* Header */
.nav{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; }
.logo{ width:10px; height:10px; border-radius:50%; background: linear-gradient(135deg,var(--brand1),var(--brand2)); display:inline-block; }
nav ul{ display:flex; gap:16px; list-style:none; margin:0; padding:0; }
nav a{ color: var(--muted); font-weight:700; }
nav a[aria-current="page"]{ color:var(--text); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:14px; font-weight:800; border:1px solid transparent; cursor:pointer; }
.btn-primary{ color:#fff; background: linear-gradient(135deg,var(--brand1),var(--brand2)); box-shadow: var(--shadow); }
.btn-ghost{ color:var(--text); background:transparent; border-color:var(--line); }
.btn-chip{ padding:8px 12px; border-radius:999px; border:1px solid var(--line); background: var(--chip-bg); color: var(--chip-text); font-weight:800; cursor:pointer; }
.btn-chip.active{ background: linear-gradient(135deg,var(--brand1),var(--brand2)); color:#fff; border-color:transparent; box-shadow:0 6px 24px rgba(37,99,235,.25); }

/* Hero */
.hero{ position:relative; padding:34px 0 14px; }
.hero-bg, .hero-bg *{ pointer-events:none !important; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.lava{ position:absolute; inset:0; background:
  radial-gradient(60% 40% at 10% 10%, rgba(37,99,235,.22), transparent 60%),
  radial-gradient(45% 35% at 80% 20%, rgba(6,182,212,.18), transparent 55%),
  radial-gradient(50% 40% at 50% 80%, rgba(37,99,235,.16), transparent 60%); filter:saturate(120%); }
.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns: 1.2fr .9fr; gap:20px; align-items:start; }
.hero-actions{ margin-top:12px; }

/* Cards & layout */
.card{ background: var(--card); border:1px solid var(--line); border-radius:18px; box-shadow: var(--shadow-soft); }
.pad{ padding:16px; }
.glow{ box-shadow: 0 30px 120px rgba(2,8,23,.35); }

/* Builder */
.builder-card{ margin-top:18px; }
.quick-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.plan-output{ margin-top:10px; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--text); }
.linklike{ background:none; border:0; padding:0; color:#8fd0ff; font-weight:800; cursor:pointer; }
.linklike:hover{ text-decoration:underline; }

/* Fields */
.fields{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fields label{ display:grid; gap:6px; font-weight:700; }
.fields input{ padding:12px 12px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--text); }
.fields .wide{ grid-column:1 / -1; }

/* Tiles */
.tiles-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:14px; }
.tile{ position:relative; cursor:pointer; }
.tile header{ position:relative; z-index:1; background:transparent; }
.tile header::before, .tile header::after{ content:none !important; }
.tile .highlight{ position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background: radial-gradient(460px 250px at var(--mx,50%) var(--my,50%), rgba(37,99,235,.12), transparent 60%); opacity:0; transition:opacity .18s ease; }
.tile:hover .highlight{ opacity:1; }

/* Modal (Service Explorer) */
.modal{ position:fixed; inset:0; display:none; background:rgba(2,8,23,.62); backdrop-filter: blur(8px); z-index: 9999; }
.modal.open{ display:block; }
.modal .sheet{ position:absolute; inset:auto 0 0 0; max-height:92vh; overflow:auto; background: var(--surface);
  border-top:1px solid var(--line); border-radius:18px 18px 0 0; padding:18px; box-shadow: var(--shadow); }
.sheet-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sheet-title{ display:flex; align-items:center; gap:12px; }
.progress{ display:flex; align-items:center; gap:10px; color:var(--muted); font-weight:800; }
.progress em{ position:relative; display:inline-flex; width:200px; height:6px; background:rgba(255,255,255,.10); border-radius:999px; overflow:hidden; }
.progress i{ position:absolute; left:0; top:0; bottom:0; width:20%; background:linear-gradient(135deg,var(--brand1),var(--brand2)); }
.svc-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 12px; position:relative; z-index:2; }
.svc-tabs .svc-tab{ border:1px solid var(--line); background:var(--chip-bg); color:var(--chip-text); border-radius:999px; padding:10px 14px; font-weight:800; cursor:pointer; }
.svc-tabs .svc-tab.active{ background: linear-gradient(135deg,var(--brand1),var(--brand2)); color:#fff; border-color:transparent; }
.svc-body{ margin:8px 0 10px; }

/* Footer */
.site-footer{ background:#0F162A; color:#cfe0ff; padding:34px 0; margin-top:26px; border-top:1px solid var(--line); }
.footer-list{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:8px; }

/* Grids */
.grid{ display:grid; gap:12px; }

/* Light-mode contrast improvements */
body:not(.dark) .card{ background:#fff; border-color:#e6ecf7; color:#0b1535; }
body:not(.dark) .builder-card{ background:#fff; }
body:not(.dark) .plan-output{ background:#f4f7ff; border-color:#d8e1f5; color:#0b1535; }
body:not(.dark) .btn-chip{ background:#eef3ff; color:#102043; border-color:#d8e1f5; }
body:not(.dark) .svc-tabs .svc-tab{ background:#eef3ff; color:#102043; border-color:#d8e1f5; }
body:not(.dark) .modal{ background: rgba(8,14,30,.40); }
body:not(.dark) .site-footer{ background:#eef3ff; color:#102043; }

/* Misc */
h4{ margin:.4rem 0; }
.hero-grid .card{ align-self:start; }

/* Utilities */
.reveal{ opacity:0; transform: translateY(8px); transition: all .4s ease; }
.reveal.visible{ opacity:1; transform:none; }
/* --- Brand image, keep text baseline tight --- */
.brand-logo{
  display:inline-block;
  width:28px; height:28px;
  object-fit:contain;
  border-radius:6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.brand .logo { display:none; } /* hide old dot if present */

/* --- Sticky left column on contact page --- */
.contact-aside{
  position: sticky;
  top: 92px;          /* clears your header */
  align-self: start;  /* respect grid/columns */
}

/* --- File control that matches your chip/buttons --- */
.file-control{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line);
  background:var(--chip-bg);
  padding:8px 10px; border-radius:12px;
  max-width:100%;
}
.file-control input[type="file"]{
  position:absolute; opacity:0; pointer-events:none; width:0; height:0;
}
.file-control .file-btn{
  cursor:pointer; user-select:none;
}
.file-control .file-name{
  color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Put “Budget” input on the same baseline as the file control */
.fields label { display:grid; gap:6px; font-weight:700; }
.fields input, .fields select, .fields textarea{
  padding:12px 12px; border-radius:12px; border:1px solid var(--line);
  background:transparent; color:var(--text);
}

/* --- Consent rows: perfect alignment + clear links --- */
.consent-row{
  display:flex; align-items:center; gap:10px; margin:8px 0;
  line-height:1.4;
}
.consent-row a{
  color:#8fd0ff; font-weight:800; text-decoration:none;
}
.consent-row a:hover{ text-decoration:underline; }

/* Light mode contrast for file control + consent links */
body:not(.dark) .file-control{ background:#eef3ff; border-color:#d8e1f5; }
body:not(.dark) .consent-row a{ color:#0b57d0; }
/* =======================
   Responsive enhancements
   (append to the very end)
   ======================= */

/* --- Large tablets and down (≤ 1024px) --- */
@media (max-width: 1024px) {
  .container,
  .container-wide { padding: 0 16px; }

  /* hero: loosen spacing a touch */
  .hero { padding: 28px 0 12px; }
  .hero-grid { gap: 16px; }

  /* service modal sheet: slightly taller on small laptops/tablets */
  .modal .sheet { max-height: 94vh; }
}

/* --- Tablets and phablets (≤ 900px) --- */
@media (max-width: 900px) {
  /* Hero becomes a single column with the Builder stacked below */
  .hero-grid {
    grid-template-columns: 1fr;
  }

  /* Buttons align full-width nicely on small screens */
  .hero-actions .btn { width: 100%; }
  .hero-actions .btn + .btn { margin-top: 8px; }

  /* Tiles: one per row with comfortable spacing */
  .tiles-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Forms: use a single column */
  .fields { grid-template-columns: 1fr; }
  .fields .wide { grid-column: 1; }

  /* Sticky aside on Contact: disable stickiness on small screens
     (prevents jumpiness & gives natural scroll) */
  .contact-aside {
    position: static;
    top: auto;
    margin-bottom: 18px;
  }

  /* Chips wrap more tightly and grow a tad */
  .btn-chip { padding: 10px 14px; }
  .svc-tabs { gap: 8px; }
}

/* --- Phones (≤ 600px) --- */
@media (max-width: 600px) {
  /* Tighten container; bigger text is handled by clamp() already */
  .container,
  .container-wide { padding: 0 14px; }

  /* Hero headline spacing for tall stacks */
  .h1 { margin: .1rem 0 .5rem; }

  /* Cards: reduce inner padding to fit better */
  .pad { padding: 14px; }

  /* Plan output block: stronger contrast in light mode */
  body:not(.dark) .plan-output {
    background:#eef3ff;
    border-color:#d8e1f5;
  }

  /* Service tiles: icon arrow floats right; more tap room */
  .tile header { padding-right: 24px; }
  .tile .highlight { opacity: 0 !important; } /* remove hover glow on touch */

  /* Service modal tabs go full width, wrap more comfortably */
  .svc-tabs { margin-top: 6px; }
  .svc-tabs .svc-tab { padding: 9px 12px; }

  /* Service modal body stacks vertically */
  .modal .sheet #svcBody .grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Contact form headings: add breathing room above inputs */
  .fields label { gap: 8px; }
  .fields input,
  .fields select,
  .fields textarea { padding: 14px 12px; }

  /* Consent rows: wrap neatly; keep checkbox aligned */
  .consent-row { align-items: flex-start; }
}

/* --- Very small phones (≤ 400px) --- */
@media (max-width: 400px) {
  .btn { padding: 12px 14px; }
  .btn-chip { padding: 9px 12px; font-weight: 800; }

  /* Brand row: keep logo/text from crowding the nav links */
  .brand { gap: 8px; }
  .brand-logo { width: 24px; height: 24px; }

  /* Reduce outer section padding a touch */
  .section { padding: 26px 0; }
}