/* HCK dark theme overlay for the marketing site. Loaded after styles.css; matches the client portal design. */
:root {
  --color-border: rgba(78, 197, 193, 0.14);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 40px rgba(78, 197, 193, 0.08);
  --shadow-glow: 0 0 30px rgba(78, 197, 193, 0.35);
  --t-bg: #050a14;
  --t-panel: rgba(10, 18, 34, 0.72);
  --t-line: rgba(78, 197, 193, 0.14);
  --t-line-strong: rgba(78, 197, 193, 0.35);
  --t-text: #e6f1f1;
  --t-muted: #8ea3b8;
  --t-dim: #5b6b80;
}
html { color-scheme: dark; }
body { background: var(--t-bg); color: #cbd5e1; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(78, 197, 193, 0.16), transparent 60%),
    radial-gradient(700px 500px at -10% 100%, rgba(86, 200, 216, 0.10), transparent 60%),
    linear-gradient(180deg, #071021 0%, var(--t-bg) 60%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(78, 197, 193, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78, 197, 193, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.9), transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.9), transparent 75%);
}
::selection { background: rgba(78, 197, 193, 0.35); }

/* Header */
.header { background: rgba(6, 12, 24, 0.82); border-bottom: 1px solid var(--t-line); }
.header--scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.nav__link { color: #cbd5e1; }
.nav__link:hover { color: #4ec5c1; background: rgba(78, 197, 193, 0.08); }
.nav__link--cta { color: #041018 !important; }
.nav__toggle span { background: var(--t-text); }
.nav__theme { color: #4ec5c1; }
@media (max-width: 768px) {
  .nav__menu { background: rgba(6, 12, 24, 0.97); border-bottom: 1px solid var(--t-line); }
}

/* Section typography */
.section__title { color: var(--t-text); }
.section__subtitle { color: var(--t-muted); }
.section__label::before { content: '// '; color: var(--t-dim); }

/* Hero */
.hero { background: transparent; }
.hero__canvas { opacity: 0.95; }

/* Sections that were light become transparent so the backdrop shows through */
.services, .portfolio, .testimonials, .about, .contact { background: transparent; }
.ai-section, .process {
  background: rgba(10, 18, 34, 0.45);
  border-top: 1px solid var(--t-line);
  border-bottom: 1px solid var(--t-line);
}

/* Glass cards */
.service-card, .about__card, .portfolio-card, .testimonial-card, .contact__form, .portfolio__stats, .ai-feature {
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
}
.service-card::before, .testimonial-card::before, .contact__form::before, .about__card::before, .ai-feature::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(78, 197, 193, 0.5), transparent);
  pointer-events: none;
}
.service-card:hover, .about__card:hover, .portfolio-card:hover, .testimonial-card:hover, .ai-feature:hover {
  border-color: var(--t-line-strong);
  box-shadow: var(--shadow-lg);
}
.service-card--cta { background: rgba(78, 197, 193, 0.04); border: 2px dashed rgba(78, 197, 193, 0.3); }
.service-card--cta:hover { border-color: #4ec5c1; background: rgba(78, 197, 193, 0.08); }

/* Card text colours */
.service-card__title, .about__value h3, .portfolio-card__title, .testimonial-card__name, .form__label, .process-step__title, .ai-feature h3 { color: var(--t-text); }
.service-card__text, .about__text, .about__card-text, .portfolio-card__desc, .portfolio__stat-text, .portfolio__note, .about__value p, .testimonial-card__role, .contact__text, .form__disclaimer, .process-step__text, .ai-feature p, .ai-section__text { color: var(--t-muted); }
.service-card__list li, .testimonial-card__text, .contact__detail, .industries__item { color: #cbd5e1; }
.service-card__icon, .about__value-icon, .ai-feature__icon { color: #4ec5c1; background: rgba(78, 197, 193, 0.12); box-shadow: 0 0 20px rgba(78, 197, 193, 0.12); }
.service-card:hover .service-card__icon { box-shadow: 0 0 28px rgba(78, 197, 193, 0.3); }
.portfolio-card__tags span { background: rgba(78, 197, 193, 0.12); color: #4ec5c1; }
.contact__detail a:hover { color: #4ec5c1; }

/* Industries ticker */
.industries { background: rgba(10, 18, 34, 0.5); border-top: 1px solid var(--t-line); border-bottom: 1px solid var(--t-line); }
.industries__label { color: var(--t-dim); }

/* Form */
.form__input { background: rgba(5, 10, 20, 0.6); border-color: rgba(148, 163, 184, 0.18); color: var(--t-text); }
.form__input::placeholder { color: var(--t-dim); }
.form__input:focus { background: rgba(5, 10, 20, 0.85); border-color: #4ec5c1; box-shadow: 0 0 0 3px rgba(78, 197, 193, 0.14); }
.form__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238ea3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.form__select option { background: #0c1526; color: var(--t-text); }

/* Footer, back-to-top */
.footer { background: #030710; border-top: 1px solid var(--t-line); }
.footer__main { border-bottom-color: rgba(148, 163, 184, 0.12); }
.back-to-top { background: linear-gradient(135deg, #4ec5c1, #56c8d8); color: #041018; box-shadow: 0 6px 20px rgba(78, 197, 193, 0.3); }
.back-to-top:hover { background: linear-gradient(135deg, #4ec5c1, #56c8d8); box-shadow: var(--shadow-glow); }

/* Buttons */
.btn--primary { color: #041018; box-shadow: 0 6px 20px rgba(78, 197, 193, 0.22); }
.btn--white { background: var(--t-text); color: #041018; }

/* Motion */
.fade-in { transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}