/* ==========================================================================
   NEXLYTICS STUDIO — Stylesheet
   Design system: Deep Navy + Luxury Gold + Off-white
   Signature motif: "Data Constellation" — thin gold node/line graph,
   echoed in the hero canvas, section dividers and card corner marks.
   ========================================================================== */

/* -------------------------------- Fonts -------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ------------------------------ Design tokens --------------------------- */
:root {
  /* Brand palette — named tokens */
  --navy-950: #08111f;   /* deepest navy — hero base, footer */
  --navy-800: #10233f;   /* rich navy — panels, gradients */
  --navy-700: #17304f;   /* lighter navy — borders, surfaces on dark */
  --gold-500: #c6a15b;   /* primary luxury gold */
  --gold-300: #e8cd8a;   /* bright gold — hover / glow */
  --paper-50: #faf7f1;   /* off-white — light section background */

  /* Supporting neutrals (derived, not part of the core palette) */
  --white: #ffffff;
  --ink-900: #10151d;    /* body copy on light backgrounds */
  --ink-600: #5b6472;    /* secondary / muted text on light backgrounds */
  --ink-fog: #aeb6c4;    /* muted text on dark backgrounds */
  --hairline-dark: rgba(198, 161, 91, 0.18);
  --hairline-light: rgba(16, 21, 29, 0.10);

  /* Typography */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Layout */
  --container: 1180px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --nav-height: 84px;
  --nav-height-shrunk: 64px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.22s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;

  /* Shadows / glow */
  --shadow-soft: 0 10px 40px rgba(8, 17, 31, 0.12);
  --shadow-card: 0 4px 24px rgba(8, 17, 31, 0.06);
  --glow-gold: 0 0 0 1px rgba(198, 161, 91, 0.35), 0 8px 30px rgba(198, 161, 91, 0.18);
}

/* --------------------------------- Reset -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}
ul[class], ol[class] { list-style: none; padding: 0; }

html, body { height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--paper-50);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--navy-950);
  color: var(--gold-300);
  padding: 12px 20px;
  z-index: 999;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* --------------------------------- Utility ------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.section {
  padding: 128px 0;
  position: relative;
}
.section--tight { padding: 88px 0; }
.section--dark {
  background: var(--navy-950);
  color: var(--white);
}
.section--panel {
  background: var(--navy-800);
  color: var(--white);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--gold-500);
  display: inline-block;
}

.section-head {
  max-width: 640px;
  margin-bottom: 64px;
}
.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

h2.section-title {
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 500;
}
.section-sub {
  margin-top: 16px;
  color: var(--ink-600);
  font-size: 1.05rem;
  max-width: 52ch;
}
.section--dark .section-sub, .section--panel .section-sub { color: var(--ink-fog); }

/* Gold divider — signature node/line motif, reused throughout */
.node-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 120px;
  margin: 22px 0;
}
.node-divider span { display: block; }
.node-divider .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-500);
  flex-shrink: 0;
}
.node-divider .line {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--gold-500), transparent);
}
.section-head--center .node-divider { margin-left: auto; margin-right: auto; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color: var(--navy-950);
  box-shadow: 0 6px 22px rgba(198, 161, 91, 0.28);
  background-size: 160% 160%;
  background-position: 0% 50%;
}
.btn--gold:hover {
  background-position: 100% 50%;
  box-shadow: 0 10px 30px rgba(198, 161, 91, 0.4);
}

.btn--ghost-dark {
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--white);
  background: rgba(255,255,255,0.03);
}
.btn--ghost-dark:hover {
  border-color: var(--gold-500);
  color: var(--gold-300);
}

.btn--ghost-light {
  border: 1px solid var(--hairline-light);
  color: var(--ink-900);
}
.btn--ghost-light:hover {
  border-color: var(--gold-500);
  color: var(--navy-800);
  background: rgba(198, 161, 91, 0.06);
}

.btn--sm { padding: 11px 20px; font-size: 0.85rem; }
.btn--block { width: 100%; }

/* ------------------------------ Nav bar ---------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  transition: height var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  background: linear-gradient(180deg, rgba(8,17,31,0.55), rgba(8,17,31,0));
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  height: var(--nav-height-shrunk);
  background: rgba(8, 17, 31, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline-dark);
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}
.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--white);
}
.nav__logo svg { width: 34px; height: 34px; }

/* Brand mark — shows the real logo once it's placed at assets/nexlyticsstudiologo.png;
   falls back automatically to the built-in gold monogram until then (see onerror in HTML). */
.brand-mark { position: relative; display: inline-flex; width: 34px; height: 34px; flex-shrink: 0; }
.brand-mark__img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.brand-mark__img.is-broken { display: none; }
.brand-mark__fallback { width: 100%; height: 100%; }
.brand-mark__img:not(.is-broken) ~ .brand-mark__fallback { display: none; }
.brand-mark--lg { width: 64px; height: 64px; margin: 0 auto 8px; opacity: 0; }
body.is-ready .brand-mark--lg { opacity: 1; transition: opacity 1s var(--ease-out); transition-delay: 0.05s; }
.nav__logo-word {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.nav__logo-word b { color: var(--gold-300); font-weight: 500; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 38px;
}
.nav__links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-fog);
  position: relative;
  padding: 6px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold-500);
  transition: width var(--dur-fast) var(--ease-out);
}
.nav__links a:hover,
.nav__links a.is-active { color: var(--white); }
.nav__links a:hover::after,
.nav__links a.is-active::after { width: 100%; }

.nav__actions { display: flex; align-items: center; gap: 18px; }
.nav__cta { display: inline-flex; }

.nav__burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--white);
}
.nav__burger svg { width: 18px; height: 18px; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 490;
  background: rgba(8, 12, 22, 0.98);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.mobile-menu a {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--white);
}
.mobile-menu a:hover { color: var(--gold-300); }
.mobile-menu__close {
  position: absolute;
  top: 26px; right: 24px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
}

/* -------------------------------- Hero ----------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: radial-gradient(120% 90% at 50% -10%, #12253f 0%, var(--navy-950) 55%), var(--navy-950);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(198,161,91,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,161,91,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 50% 35%, #000 40%, transparent 100%);
  z-index: 0;
}
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.85;
}
.hero__glow {
  position: absolute;
  width: 60vw; height: 60vw;
  max-width: 780px; max-height: 780px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,161,91,0.20) 0%, rgba(198,161,91,0) 70%);
  top: -10%; right: -10%;
  z-index: 0;
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--nav-height) + 40px) 28px 100px;
  text-align: center;
}
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-300);
  opacity: 0;
}
.hero__kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 12px 2px rgba(198,161,91,0.7); }

.hero__title {
  margin-top: 26px;
  font-size: clamp(2.6rem, 6.4vw, 5.1rem);
  font-weight: 500;
  line-height: 1.06;
  max-width: 15ch;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(100deg, var(--gold-300), var(--gold-500) 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  margin: 26px auto 0;
  max-width: 46ch;
  font-size: 1.14rem;
  color: var(--ink-fog);
  opacity: 0;
}

.hero__actions {
  margin-top: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
}

.hero__meta {
  margin-top: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 46px;
  flex-wrap: wrap;
  opacity: 0;
}
.hero__meta-item {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-fog);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero__meta-item b {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-300);
  font-size: 14px;
  font-weight: 500;
}

/* Hero load-in choreography (JS toggles .is-ready on <body>) */
.hero__kicker, .hero__title, .hero__sub, .hero__actions, .hero__meta {
  transform: translateY(16px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
body.is-ready .hero__kicker { opacity: 1; transform: none; transition-delay: 0.05s; }
body.is-ready .hero__title { opacity: 1; transform: none; transition-delay: 0.18s; }
body.is-ready .hero__sub { opacity: 1; transform: none; transition-delay: 0.34s; }
body.is-ready .hero__actions { opacity: 1; transform: none; transition-delay: 0.48s; }
body.is-ready .hero__meta { opacity: 1; transform: none; transition-delay: 0.62s; }

.scroll-cue {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink-fog);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.scroll-cue__line {
  width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--gold-500), transparent);
  animation: scrollcue 2.2s var(--ease-out) infinite;
}
@keyframes scrollcue {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.01% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --------------------------- Quick contact cards -------------------------- */
.quickgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: -74px;
  position: relative;
  z-index: 3;
}
.qcard {
  background: var(--white);
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.qcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-500), transparent 70%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}
.qcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--glow-gold);
  border-color: rgba(198,161,91,0.4);
}
.qcard:hover::before { transform: scaleX(1); }
.qcard__icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-950));
  color: var(--gold-300);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.qcard:hover .qcard__icon { transform: scale(1.08) rotate(-4deg); }
.qcard__icon svg { width: 21px; height: 21px; }
.qcard h3 { font-size: 1.05rem; font-weight: 600; font-family: var(--font-body); }
.qcard p { margin-top: 6px; font-size: 0.9rem; color: var(--ink-600); }
.qcard__link {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-800);
}
.qcard:hover .qcard__link { color: var(--gold-500); }
.qcard__link svg { width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease-out); }
.qcard:hover .qcard__link svg { transform: translateX(3px); }

/* ---------------------------------- About --------------------------------- */
.about {
  display: grid;
  grid-template-columns: 1fr 0.86fr;
  gap: 72px;
  align-items: center;
}
.about__text p { color: var(--ink-600); font-size: 1.06rem; max-width: 54ch; }
.about__text h2 { margin-bottom: 6px; }

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.stat-card {
  background: var(--white);
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  box-shadow: var(--shadow-card);
}
.stat-card__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.1rem;
  color: var(--navy-800);
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.stat-card__num .accent { color: var(--gold-500); }
.stat-card__label {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-600);
}

/* -------------------------------- Services -------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.svc-card {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.svc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(240px 160px at 90% -10%, rgba(198,161,91,0.16), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
.svc-card:hover {
  transform: translateY(-7px);
  border-color: rgba(198,161,91,0.55);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.svc-card:hover::after { opacity: 1; }
.svc-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 26px;
  position: relative; z-index: 1;
}
.svc-card__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-fog);
}
.svc-card__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  border: 1px solid var(--hairline-dark);
  color: var(--gold-300);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.svc-card:hover .svc-card__icon {
  transform: rotate(-6deg) scale(1.06);
  background: rgba(198,161,91,0.08);
}
.svc-card__icon svg { width: 22px; height: 22px; }
.svc-card h3 {
  font-size: 1.28rem;
  color: var(--white);
  font-weight: 500;
  position: relative; z-index: 1;
}
.svc-card p {
  margin-top: 12px;
  color: var(--ink-fog);
  font-size: 0.95rem;
  position: relative; z-index: 1;
}
.svc-card__cta {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gold-300);
  position: relative; z-index: 1;
}
.svc-card__cta svg { width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease-out); }
.svc-card:hover .svc-card__cta svg { transform: translateX(4px); }

/* -------------------------------- CTA banner ------------------------------- */
.cta-banner {
  background: linear-gradient(120deg, var(--navy-950), var(--navy-800));
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 74px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline-dark);
}
.cta-banner::before {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(198,161,91,0.22), transparent 70%);
  top: -140px; left: 50%;
  transform: translateX(-50%);
}
.cta-banner h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); position: relative; }
.cta-banner p { margin-top: 14px; color: var(--ink-fog); position: relative; max-width: 46ch; margin-left: auto; margin-right: auto; }
.cta-banner__actions {
  margin-top: 34px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* -------------------------------- Portfolio -------------------------------- */
.filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.filter-btn {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--hairline-light);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-600);
  transition: all var(--dur-fast) var(--ease-out);
}
.filter-btn:hover { border-color: var(--gold-500); color: var(--navy-800); }
.filter-btn.is-active {
  background: var(--navy-950);
  border-color: var(--navy-950);
  color: var(--gold-300);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pf-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline-light);
  background: var(--white);
  box-shadow: var(--shadow-card);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pf-card:hover { transform: translateY(-6px); box-shadow: var(--glow-gold); }
.pf-card.is-hidden {
  display: none;
}
.pf-card__media {
  aspect-ratio: 4 / 3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.85);
  overflow: hidden;
}
.pf-card__media svg { width: 44px; height: 44px; transition: transform var(--dur-med) var(--ease-out); }
.pf-card:hover .pf-card__media svg { transform: scale(1.12); }
.pf-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(198,161,91,0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(198,161,91,0.10) 1px, transparent 1px);
  background-size: 22px 22px;
}
.pf-card__body { padding: 22px 22px 26px; }
.pf-card__cat {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.pf-card h3 { margin-top: 8px; font-size: 1.12rem; font-weight: 500; }
.pf-card p { margin-top: 8px; font-size: 0.9rem; color: var(--ink-600); }
.pf-card__view {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy-800);
}
.pf-card:hover .pf-card__view { color: var(--gold-500); }
.pf-card__view svg { width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease-out); }
.pf-card:hover .pf-card__view svg { transform: translateX(4px); }

/* palette rotation for placeholder media */
.pf-card__media[data-tone="1"] { background: linear-gradient(135deg, #17304f, #08111f); }
.pf-card__media[data-tone="2"] { background: linear-gradient(135deg, #23425f, #10233f); }
.pf-card__media[data-tone="3"] { background: linear-gradient(135deg, #0f2038, #1c3452); }

/* ------------------------------- Social section ----------------------------- */
.social-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.social-card {
  background: var(--white);
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-md);
  padding: 26px 18px;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.social-card:hover {
  transform: translateY(-5px);
  border-color: rgba(198,161,91,0.4);
  box-shadow: var(--glow-gold);
}
.social-card__icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--navy-950);
  color: var(--gold-300);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.social-card:hover .social-card__icon { transform: scale(1.1); }
.social-card__icon svg { width: 19px; height: 19px; }
.social-card span { font-size: 0.85rem; font-weight: 600; }

/* ------------------------------- Appointment -------------------------------- */
.appointment {
  background: var(--navy-950);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.appointment__glow {
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,161,91,0.18), transparent 70%);
  left: 50%; top: 0;
  transform: translate(-50%, -40%);
}
.appointment__panel {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-lg);
  padding: 70px 50px;
  background: linear-gradient(180deg, rgba(198,161,91,0.05), transparent);
}
.appointment h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.appointment p { margin-top: 16px; color: var(--ink-fog); max-width: 44ch; margin-left: auto; margin-right: auto; }
.appointment__actions {
  margin-top: 36px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* -------------------------------- Payment methods ---------------------------- */
.pay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pay-card {
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  background: var(--white);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pay-card:hover { transform: translateY(-4px); border-color: rgba(198,161,91,0.4); }
.pay-card__icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--paper-50);
  border: 1px solid var(--hairline-light);
  color: var(--navy-800);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pay-card__icon svg { width: 19px; height: 19px; }
.pay-card h3 { font-size: 1rem; font-weight: 600; }
.pay-card p { margin-top: 6px; font-size: 0.85rem; color: var(--ink-600); font-style: italic; }

.pay-cta {
  margin-top: 40px;
  text-align: center;
}

/* ---------------------------------- Contact ---------------------------------- */
.contact {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
}
.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline-light);
}
.contact-info__item:first-child { padding-top: 0; }
.contact-info__icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--navy-950);
  color: var(--gold-300);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-info__icon svg { width: 18px; height: 18px; }
.contact-info__item h3 { font-size: 0.95rem; font-weight: 600; }
.contact-info__item a, .contact-info__item p { margin-top: 4px; font-size: 0.92rem; color: var(--ink-600); }
.contact-info__item a:hover { color: var(--gold-500); }

.contact-form {
  background: var(--white);
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-card);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.form-field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-600);
}
.form-field input, .form-field select, .form-field textarea {
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: 0.95rem;
  background: var(--paper-50);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--gold-500);
  background: var(--white);
  outline: none;
}
.form-note {
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--ink-600);
}
.form-status {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--navy-800);
  display: none;
}
.form-status.is-visible { display: block; }

/* ----------------------------------- Footer ----------------------------------- */
.footer {
  background: var(--navy-950);
  color: var(--ink-fog);
  padding: 76px 0 30px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--hairline-dark);
}
.footer__brand { display: flex; align-items: center; gap: 12px; color: var(--white); }
.footer__brand svg { width: 32px; height: 32px; }
.footer__brand-word { font-family: var(--font-display); font-size: 1.15rem; }
.footer__tag { margin-top: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--gold-300); text-transform: uppercase; }
.footer h4 { color: var(--white); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; margin-bottom: 18px; letter-spacing: 0.02em; }
.footer__links li { margin-bottom: 12px; }
.footer__links a { font-size: 0.9rem; transition: color var(--dur-fast) var(--ease-out); }
.footer__links a:hover { color: var(--gold-300); }
.footer__social { display: flex; gap: 10px; flex-wrap: wrap; }
.footer__social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--hairline-dark);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.footer__social a svg { width: 15px; height: 15px; }
.footer__social a:hover { border-color: var(--gold-500); color: var(--gold-300); transform: translateY(-3px); }

.footer__bottom {
  padding-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  flex-wrap: wrap;
  gap: 10px;
}

/* -------------------------------- Floating actions ----------------------------- */
.float-actions {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.float-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft);
  position: relative;
}
.float-btn svg { width: 24px; height: 24px; }
.float-btn--whatsapp {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color: var(--navy-950);
}
.float-btn--whatsapp::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gold-500);
  opacity: 0.55;
  animation: pulse-ring 2.6s var(--ease-out) infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.45; }
  100% { transform: scale(1.9); opacity: 0; }
}
.float-btn--top {
  width: 42px; height: 42px;
  background: var(--white);
  color: var(--navy-800);
  border: 1px solid var(--hairline-light);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.float-btn--top svg { width: 16px; height: 16px; }
.float-btn--top.is-visible { opacity: 1; pointer-events: auto; transform: none; }

.float-tooltip {
  position: absolute;
  right: 68px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--navy-950);
  color: var(--white);
  font-size: 0.78rem;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.float-btn--whatsapp:hover .float-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ------------------------------ Progress bar ---------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  z-index: 600;
  width: 0%;
}

/* ------------------------------ Scroll reveal ---------------------------------- */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-reveal="up"] { transform: translateY(28px); }
[data-reveal="left"] { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal-group] > * { transition-delay: calc(var(--stagger, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  body.is-ready .hero__kicker, body.is-ready .hero__title, body.is-ready .hero__sub, body.is-ready .hero__actions, body.is-ready .hero__meta {
    transition: none;
  }
  .float-btn--whatsapp::before { animation: none; display: none; }
  .scroll-cue__line { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .quickgrid { grid-template-columns: repeat(3, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .social-row { grid-template-columns: repeat(3, 1fr); }
  .pay-grid { grid-template-columns: repeat(2, 1fr); }
  .about { grid-template-columns: 1fr; gap: 46px; }
  .contact { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .section { padding: 92px 0; }
  .hero__content { padding-top: calc(var(--nav-height) + 20px); }
  .quickgrid { grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 600px) {
  .container { padding: 0 20px; }
  .quickgrid { grid-template-columns: 1fr; margin-top: 34px; }
  .services-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .social-row { grid-template-columns: repeat(2, 1fr); }
  .pay-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .cta-banner { padding: 50px 26px; }
  .appointment__panel { padding: 46px 24px; }
  .hero__meta { gap: 24px; row-gap: 14px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .cta-banner__actions .btn, .appointment__actions .btn { width: 100%; }
}