/* ==========================================================================
   ETEMAS — Bold Branded Dark Theme (v3)
   - Larger logo
   - Dark, premium look with cyan accents
   - Card/Package panels with soft glow
   ========================================================================== */

:root{
  /* Brand & palette */
  --brand:#22d3ee;        /* cyan-400 */
  --brand-600:#06b6d4;    /* cyan-500 */
  --ink:#e6edf7;          /* light text */
  --ink-700:#cbd5e1;      /* muted text */
  --muted:#94a3b8;
  --bg:#0b1220;           /* deep navy */
  --surface:#0f162a;      /* panels */
  --panel:#121b31;
  --edge:#1f2a44;

  /* Elevation */
  --r-sm:12px; --r-lg:18px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45), 0 1px 1px rgba(0,0,0,.35);
  --shadow-md:0 12px 28px rgba(0,0,0,.45);
  --shadow-lg:0 24px 64px rgba(0,0,0,.55);

  /* Sizing */
  --logo-h:72px; /* 👈 bump to taste; mobile override below */
  --content-w:1100px;

  /* Type scale */
  --step--1:.95rem; --step-0:1rem; --step-1:1.125rem; --step-2:1.25rem;
  --step-3: clamp(1.3rem, 2vw + .5rem, 1.9rem);
  --step-4: clamp(1.9rem, 4vw + .5rem, 2.7rem);
  --step-5: clamp(2.3rem, 6vw + .5rem, 3.7rem);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.7 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Helvetica, Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}

.container{max-width:var(--content-w); margin:0 auto; padding:22px}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--edge);
  backdrop-filter:saturate(1.2) blur(8px);
  background:linear-gradient(180deg, rgba(15,22,42,.85), rgba(11,18,32,.70));
}
.header .container{
  display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:88px;
}
.brand{display:flex; align-items:center; gap:12px; font-weight:900; color:var(--ink); text-decoration:none}
/* Hide the text next to the logo per request */
.brand span{display:none !important}
.logo{height:var(--logo-h); width:auto; filter: drop-shadow(0 0 0 transparent)}

/* Nav */
.nav-menu ul{list-style:none; display:flex; gap:20px; margin:0; padding:0}
.nav-menu a{
  color:var(--ink-700); font-weight:800; letter-spacing:.2px;
  position:relative; padding:12px 6px; display:inline-block;
}
.nav-menu a::after{
  content:""; position:absolute; left:0; bottom:8px; height:2px; width:0;
  background:linear-gradient(90deg, var(--brand), #60efff);
  transition:width .25s ease;
}
.nav-menu a:hover::after, .nav-menu a[aria-current="page"]::after{width:100%}

/* Hero */
.hero{
  position:relative; overflow:hidden; border-bottom:1px solid var(--edge); padding:80px 0 70px;
  background:
    radial-gradient(1200px 380px at 85% -10%, rgba(96,239,255,.14), transparent 60%),
    radial-gradient(900px 420px at -10% 15%, rgba(34,211,238,.18), transparent 60%),
    linear-gradient(180deg, #0f162a, #0b1220);
}
.hero h1{font-size:var(--step-5); line-height:1.05; margin:0 0 10px; letter-spacing:-.02em}
.hero p{font-size:var(--step-2); color:var(--ink-700); max-width:780px; margin:0 0 20px}
.btn{
  display:inline-block; border:1px solid var(--brand); padding:12px 16px; border-radius:14px; font-weight:900;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow:var(--shadow-sm);
}
.btn.primary{background:linear-gradient(180deg,var(--brand),var(--brand-600)); color:#001018; border-color:transparent}
.btn.primary:hover{transform:translateY(-1px); box-shadow:var(--shadow-md)}
.btn.secondary{background:transparent; color:var(--brand)}
.btn.secondary:hover{background:rgba(34,211,238,.08)}

/* Sections */
section{padding:26px 0}
.page h1{font-size:var(--step-4); margin:10px 0 12px}
.lede{font-size:var(--step-2); color:var(--ink-700); margin-top:4px}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:12px}
.card{
  background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-lg);
  padding:18px; box-shadow:var(--shadow-sm);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(34,211,238,.3)}
.card h3{margin:6px 0 6px}
.meta{color:var(--muted); font-weight:700; margin:4px 0 10px}

/* Service Packages */
.package{
  background:var(--panel);
  border:1px solid var(--edge);
  border-radius:var(--r-lg);
  padding:20px;
  box-shadow:var(--shadow-sm);
}
.package + .package{margin-top:16px}
.package h2{margin:0 0 6px}
.for{color:var(--ink-700); margin:6px 0}
.package ul{margin:8px 0 12px 20px}
.fineprint{margin-top:8px; color:var(--muted); font-size:var(--step--1)}

/* Social proof */
.social-proof{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin:10px 0 18px}
.social-proof .quote{
  background:linear-gradient(180deg, rgba(34,211,238,.06), rgba(34,211,238,.03));
  border:1px solid var(--edge); border-radius:var(--r-sm); padding:12px; box-shadow:var(--shadow-sm);
  font-style:italic; color:var(--ink-700);
}

/* Forms */
form label{display:block; font-weight:800; margin:10px 0 6px}
form input, form textarea, form select{
  width:100%; padding:12px 12px; border:1px solid var(--edge);
  border-radius:12px; background:#0a1426; color:var(--ink);
  box-shadow:var(--shadow-sm); outline:none; transition:border-color .2s, box-shadow .2s;
}
form input::placeholder, form textarea::placeholder{color:#6f7d98}
form input:focus, form textarea:focus, form select:focus{
  border-color: rgba(34,211,238,.45);
  box-shadow: 0 0 0 3px rgba(34,211,238,.20);
}

/* FAQ */
details{border:1px solid var(--edge); border-radius:12px; padding:10px 12px; margin:10px 0; background:#0a1426; box-shadow:var(--shadow-sm)}
details summary{cursor:pointer; font-weight:900; margin:-10px -12px 8px -12px; padding:10px 12px; list-style:none}
details summary::-webkit-details-marker{display:none}

/* Footer */
.footer{border-top:1px solid var(--edge); background:linear-gradient(180deg,#0f162a,#0b1220); margin-top:28px}
.footer p{color:var(--muted)}

/* Layout helpers */
.grid{display:grid; grid-template-columns:1fr; gap:22px}
@media (min-width: 900px){ .grid{grid-template-columns:1.3fr .7fr} }

/* Mobile tweaks */
@media (max-width: 640px){
  :root{ --logo-h:60px; } /* bigger even on mobile */
  .container{padding:18px}
  .hero{padding:64px 0}
  .nav-menu ul{gap:14px}
}