*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #05080f;
  --surface: #090e1a;
  --card:    rgba(9,14,26,0.88);
  --blue:    #5ab8f5;
  --blue-dim:#2080b8;
  --amber:   #e8a830;
  --text:    #d8e8f5;
  --muted:   #607a96;
  --border:  rgba(90,184,245,0.13);
  --max:     1200px;
}

/* ── LIGHT MODE ───────────────────────────────────────── */
[data-theme="light"] {
  --bg:      #f0f4fa;
  --surface: #e4ecf7;
  --card:    rgba(220,232,248,0.92);
  --text:    #1a2d40;
  --muted:   #3d5c78;
  --border:  rgba(26,61,96,0.15);
}
[data-theme="light"] body { background: var(--bg); color: var(--text); }
[data-theme="light"] #bgCanvas { opacity: 0.50; }

/* ── NAV ── */
[data-theme="light"] nav.scrolled { background: rgba(240,244,250,0.96); border-bottom-color: var(--border); }
[data-theme="light"] .nav-logo { color: var(--text); }
[data-theme="light"] .nav-links a { color: var(--muted); }
[data-theme="light"] .nav-links a:hover { color: var(--blue); }
[data-theme="light"] .nav-links.open { background: rgba(240,244,250,.97); }

/* ── HERO ── */
[data-theme="light"] h1.hero-title {
  color: #1a2d40;
  text-shadow: 0 0 40px rgba(90,184,245,0.25), 0 2px 20px rgba(0,0,0,0.08);
}
[data-theme="light"] .hero-desc { color: rgba(26,45,64,0.70); }
[data-theme="light"] .hero-scroll-hint { color: rgba(26,45,64,0.45); }
[data-theme="light"] .scroll-arrow { border-color: rgba(26,45,64,0.25); }
[data-theme="light"] .scroll-progress-bar { background: rgba(26,61,96,0.08); }

/* ── BUTTONS ── */
[data-theme="light"] .btn-ghost {
  color: #1a2d40;
  border-color: rgba(26,61,96,0.28);
}
[data-theme="light"] .btn-ghost:hover {
  border-color: var(--blue);
  background: rgba(90,184,245,0.1);
  color: var(--blue);
}

/* ── SECTIONS / TITLES ── */
[data-theme="light"] .section-title { color: #1a2d40; }
[data-theme="light"] .section-desc  { color: var(--muted); }

/* ── ABOUT ── */
[data-theme="light"] .team-name { color: #1a2d40; }
[data-theme="light"] .team-skills li { color: #2a4a64; }

/* ── SERVICES ── */
[data-theme="light"] .service-title { color: #1a2d40; }
[data-theme="light"] .service-items li { color: #2a4a64; }

/* ── PRICING ── */
[data-theme="light"] .pricing-price  { color: #1a2d40; }
[data-theme="light"] .pricing-plan   { color: var(--muted); }
[data-theme="light"] .addons-title   { color: #1a2d40; }
[data-theme="light"] .addon-name     { color: #1a2d40; }
[data-theme="light"] .addon-note     { color: var(--muted); }
[data-theme="light"] .pricing-features li { color: var(--text); }
[data-theme="light"] .cta-ghost { color: var(--text); border-color: var(--border); }
[data-theme="light"] .cta-ghost:hover { border-color: var(--blue); color: var(--blue); }
/* Featured card: kill the near-black gradient */
[data-theme="light"] .pricing-card.featured {
  background: linear-gradient(160deg, rgba(90,184,245,0.18) 0%, rgba(210,228,248,0.96) 60%) !important;
  border-color: var(--blue);
}
[data-theme="light"] .pricing-badge {
  background: var(--blue); color: #fff;
}
/* Non-featured card hover shadow on light bg */
[data-theme="light"] .pricing-card:not(.featured):hover {
  box-shadow: 0 16px 40px rgba(26,61,96,0.15);
}

/* ── CLIENTS ── */
[data-theme="light"] .client-name { color: rgba(26,45,64,0.60); }
[data-theme="light"] .client-name:hover { color: #1a2d40; }

/* ── FOOTER ── */
[data-theme="light"] footer { background: var(--surface); }
[data-theme="light"] .footer-logo { color: #1a2d40; }
[data-theme="light"] .footer-copy { color: var(--muted); }

/* ── FORM ── */
[data-theme="light"] .contact-form { background: rgba(255,255,255,0.75); }
[data-theme="light"] .form-group label { color: var(--muted); }
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea,
[data-theme="light"] .form-group select {
  background: rgba(255,255,255,0.8);
  border-color: rgba(26,61,96,0.2);
  color: var(--text);
}
[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .form-group textarea::placeholder { color: rgba(26,61,96,0.4); }
[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group textarea:focus,
[data-theme="light"] .form-group select:focus {
  border-color: var(--blue);
  background: rgba(255,255,255,0.95);
}
[data-theme="light"] .form-group select option { background: #f0f4fa; color: var(--text); }
[data-theme="light"] .contact-item { color: var(--muted); }

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px; line-height: 1.6;
  width: 100%; max-width: 100vw;
  overflow-x: hidden;
}
.page-wrap { overflow-x: hidden; width: 100%; position: relative; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--blue-dim); border-radius: 3px; }

/* ── SECTIONS ── */
section { padding: 7rem 2rem; }
.container { max-width: var(--max); margin: 0 auto; }
.section-label {
  display: inline-block; font-size: 0.73rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 0.85rem;
}
.section-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800; line-height: 1.1; color: #fff; margin-bottom: 1.2rem;
}
.section-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--blue), #a8d8ff 55%, var(--amber));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.section-desc { color: var(--muted); font-size: 1.05rem; max-width: 560px; }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-block; background: var(--blue); color: #05080f;
  font-weight: 700; font-size: 0.92rem; padding: 0.85rem 2rem;
  border-radius: 8px; text-decoration: none; letter-spacing: 0.03em;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(90,184,245,0.4); background: #7acfff; }
.btn-ghost {
  display: inline-block; color: #fff; font-weight: 600; font-size: 0.92rem;
  padding: 0.85rem 2rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.22); text-decoration: none;
  letter-spacing: 0.03em; backdrop-filter: blur(8px);
  transition: border-color 0.25s, background 0.25s;
}
.btn-ghost:hover { border-color: var(--blue); background: rgba(90,184,245,0.1); }

/* ── RESPONSIVE: sections ── */
@media (max-width: 640px) {
  section { padding: 4rem 1.2rem; }
  .btn-primary, .btn-ghost { font-size: 0.88rem; padding: 0.8rem 1.6rem; }
}
@media (max-width: 390px) {
  section { padding: 3.5rem 1rem; }
  .section-title { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .section-desc { font-size: 0.92rem; }
}
/* Samsung Galaxy S8 (360px) — uses ≤390px rules + these tweaks */
@media (max-width: 360px) {
  section { padding: 3.2rem 0.95rem; }
  .section-title { font-size: clamp(1.6rem, 9vw, 2.2rem); }
  .section-desc  { font-size: 0.9rem; }
}
@media (max-width: 320px) {
  section { padding: 3rem 0.9rem; }
  .section-title { font-size: clamp(1.5rem, 9vw, 2rem); }
}