/* =========================================================
   Nuvvo Scale — Complete digital presence
   Design system + layout
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --blue: #0047b3;
  --blue-600: #0052cc;
  --blue-500: #1e6bff;
  --blue-400: #4d8dff;
  --blue-300: #85b1ff;
  --blue-ghost: rgba(30, 107, 255, 0.12);

  /* Surfaces */
  --ink: #04070f;
  --ink-2: #070c18;
  --ink-3: #0b1222;
  --surface: rgba(255, 255, 255, 0.028);
  --surface-2: rgba(255, 255, 255, 0.05);
  --surface-3: rgba(255, 255, 255, 0.045);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --grid-line: rgba(255, 255, 255, 0.028);

  /* Chrome: header, mobile menu, modal backdrop, mockup screens */
  --header-bg: rgba(4, 7, 15, 0.82);
  --nav-bg: rgba(4, 7, 15, 0.97);
  --overlay: rgba(2, 4, 9, 0.82);
  --panel-tint: rgba(7, 12, 24, 0.9);
  --serp-bg: #0e1524;
  --inset: rgba(0, 0, 0, 0.35);
  --inset-strong: rgba(0, 0, 0, 0.5);
  --float-bg: rgba(9, 15, 28, 0.94);
  --win-tint: rgba(7, 12, 24, 0.6);
  --ink-fade: rgba(4, 7, 15, 0.72);

  /* Text */
  --text: #eaf0fa;
  --text-2: #b9c5d9;
  --muted: #8593ab;
  --text-strong: #fff;
  --grad-end: #fff;
  --on-brand: #fff;

  /* Semantic */
  --green: #23d18b;
  --red: #ff5a6a;
  --amber: #ffb340;

  /* Typography */
  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Metrics */
  --container: 1200px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-sm: 12px;
  --header-h: 76px;

  /* Effects */
  --shadow: 0 24px 70px -30px rgba(0, 0, 0, 0.85);
  --shadow-blue: 0 26px 70px -28px rgba(0, 71, 179, 0.75);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

/* ---------- Light theme ----------
   Only the tokens change. `data-theme` is written on <html> by the inline
   script in the <head> of each page, so there is no flash on load. */
:root[data-theme="light"] {
  --blue-300: #1d5fd0;
  --blue-ghost: rgba(30, 107, 255, 0.1);

  --ink: #f4f7fc;
  --ink-2: #ffffff;
  --ink-3: #ffffff;
  --surface: rgba(9, 20, 40, 0.022);
  --surface-2: rgba(9, 20, 40, 0.05);
  --surface-3: rgba(9, 20, 40, 0.04);
  --line: rgba(9, 20, 40, 0.12);
  --line-strong: rgba(9, 20, 40, 0.2);
  --grid-line: rgba(9, 20, 40, 0.045);

  --header-bg: rgba(247, 249, 253, 0.86);
  --nav-bg: rgba(247, 249, 253, 0.98);
  --overlay: rgba(12, 22, 42, 0.55);
  --panel-tint: rgba(255, 255, 255, 0.94);
  --serp-bg: #ffffff;
  --inset: rgba(9, 20, 40, 0.045);
  --inset-strong: rgba(9, 20, 40, 0.08);
  --float-bg: rgba(255, 255, 255, 0.96);
  --win-tint: rgba(255, 255, 255, 0.85);
  --ink-fade: rgba(244, 247, 252, 0.72);

  --text: #0a1220;
  --text-2: #44526a;
  --muted: #667389;
  --text-strong: #04070f;
  --grad-end: #0a1220;

  --green: #0f9d63;
  --red: #d92d43;
  --amber: #a76a00;

  --shadow: 0 24px 60px -34px rgba(12, 28, 66, 0.35);
  --shadow-blue: 0 26px 60px -32px rgba(0, 71, 179, 0.3);
  color-scheme: light;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
  -webkit-text-size-adjust: 100%;
  /* locks any sideways drift of the page on mobile.
     "clip" beats "hidden": it creates no scroll container, so it breaks
     neither smooth scrolling nor fixed elements. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--text);
  line-height: 1.65;
  font-size: 16.5px;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

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

::selection { background: var(--blue-500); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--blue), var(--blue-600));
  border-radius: 20px;
  border: 3px solid var(--ink);
}
::-webkit-scrollbar-thumb:hover { background: var(--blue-500); }

/* ---------- Global animated background ---------- */
.bg-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-fx::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, #000 20%, transparent 78%);
}
.orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0.62;
  will-change: transform;
}
.orb-1 {
  width: 620px; height: 620px;
  top: -240px; left: -140px;
  background: radial-gradient(circle, rgba(0, 71, 179, 0.6) 0%, rgba(0, 71, 179, 0.3) 38%, transparent 78%);
  animation: drift 26s var(--ease) infinite alternate;
}
.orb-2 {
  width: 520px; height: 520px;
  top: 12%; right: -180px;
  background: radial-gradient(circle, rgba(30, 107, 255, 0.38) 0%, rgba(30, 107, 255, 0.19) 38%, transparent 78%);
  animation: drift 32s var(--ease) infinite alternate-reverse;
}
.orb-3 {
  width: 700px; height: 700px;
  bottom: -280px; left: 40%;
  background: radial-gradient(circle, rgba(0, 71, 179, 0.42), transparent 70%);
  animation: drift 38s var(--ease) infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(90px, 70px, 0) scale(1.16); }
}

/* Glow that follows the cursor */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 107, 255, 0.13), transparent 62%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  body:hover .cursor-glow { opacity: 1; }
}

/* ---------- Layout ---------- */
.container {
  width: min(100% - 44px, var(--container));
  margin-inline: auto;
}
main, header, footer { position: relative; z-index: 2; }

section { position: relative; padding: clamp(72px, 9vw, 128px) 0; }

/* grid items may shrink below their content's min-content */
.hero-grid > *,
.problems-grid > *,
.about-grid > *,
.video-grid > *,
.packages > *,
.compare > *,
.services-grid > *,
.offers > *,
.modules > *,
.course-stats > *,
.form-grid > * { min-width: 0; }

.section-line {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(100% - 44px, var(--container));
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.032em;
}

h1 { font-size: clamp(2.35rem, 5.6vw, 4.15rem); }
h2 { font-size: clamp(1.95rem, 3.9vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -0.02em; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.755rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--blue-400);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: "//";
  color: var(--blue);
  font-weight: 700;
}

.grad {
  background: linear-gradient(105deg, var(--blue-400) 0%, var(--blue-300) 40%, var(--grad-end) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  color: var(--text-2);
  max-width: 66ch;
}

.section-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 66px); }
.section-head h2 { margin-bottom: 20px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--blue);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 27px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.945rem;
  letter-spacing: -0.012em;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s ease, background 0.3s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--blue-600), var(--blue));
  color: #fff;
  box-shadow: 0 14px 34px -14px rgba(0, 71, 179, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.32) 50%, transparent 80%);
  transform: translateX(-130%);
  transition: transform 0.75s var(--ease);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -16px rgba(0, 82, 204, 1); }
.btn-primary:hover::after { transform: translateX(130%); }

.btn-accent {
  background: linear-gradient(135deg, #ffc266, #f08a00);
  color: #2a1600;
  box-shadow: 0 14px 34px -16px rgba(255, 179, 64, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-accent:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -16px rgba(255, 179, 64, 1); }

.btn-ghost {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--text);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  transform: translateY(-3px);
  border-color: var(--blue-400);
  background: var(--blue-ghost);
}

.btn-sm { padding: 11px 20px; font-size: 0.86rem; }
.btn-lg { padding: 18px 34px; font-size: 1.02rem; }
.btn-block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* ---------- Header ---------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.4s ease, box-shadow 0.4s ease, height 0.4s ease, backdrop-filter 0.4s ease;
  border-bottom: 1px solid transparent;
}
.header.scrolled {
  height: 66px;
  background: var(--header-bg);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line);
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.95);
}
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.brand-mark {
  width: 42px; height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 22px -10px rgba(0, 71, 179, 0.9);
  transition: transform 0.5s var(--ease), box-shadow 0.4s ease;
}
.brand:hover .brand-mark {
  transform: rotate(-8deg) scale(1.07);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 12px 30px -10px rgba(30, 107, 255, 1);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-name { font-weight: 800; font-size: 1.02rem; letter-spacing: -0.03em; }
.brand-tag {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative;
  padding: 9px 14px;
  font-size: 0.895rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-2);
  border-radius: 999px;
  transition: color 0.25s ease, background 0.25s ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav a:hover { color: var(--text-strong); }
.nav a:hover::after,
.nav a.active::after { transform: scaleX(1); }
.nav a.active { color: var(--text-strong); }

.header-cta { display: flex; align-items: center; gap: 10px; flex: none; }

/* Theme toggle */
.theme-toggle {
  width: 38px; height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.4s var(--ease);
}
.theme-toggle:hover {
  color: var(--text-strong);
  border-color: var(--blue-400);
  background: var(--blue-ghost);
  transform: rotate(-18deg);
}
.theme-toggle svg { width: 18px; height: 18px; }
/* one icon per theme: the moon offers the dark mode, the sun the light one */
.theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ico-sun { display: block; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: none; }

/* Language switch */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  flex: none;
}
.lang-switch a {
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: color 0.25s ease, background 0.25s ease;
}
.lang-switch a:hover { color: var(--text-strong); }
.lang-switch a.active {
  background: linear-gradient(135deg, var(--blue-600), var(--blue));
  color: var(--on-brand);
}

/* both live in the mobile menu too, on one row */
.mobile-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.mobile-tools .lang-switch { flex: 1; justify-content: center; }
.mobile-tools .lang-switch a { flex: 1; text-align: center; padding: 9px 10px; font-size: 0.8rem; }

.burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  position: relative;
}
.burger span {
  position: absolute;
  left: 12px;
  width: 20px; height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.4s var(--ease), opacity 0.25s ease, width 0.3s ease;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; width: 14px; }
.burger span:nth-child(3) { top: 27px; }
.burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 20px; }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: var(--nav-bg);
  backdrop-filter: blur(22px);
  padding: calc(var(--header-h) + 26px) 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.35s ease, transform 0.35s var(--ease), visibility 0.35s;
  overflow-y: auto;
}
.mobile-nav.open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav a:not(.btn) {
  padding: 17px 6px;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-nav a:not(.btn) span { font-family: var(--mono); font-size: 0.72rem; color: var(--blue-400); }
.mobile-nav .btn { margin-top: 22px; }

/* ---------- Hero ---------- */
.hero {
  padding-top: calc(var(--header-h) + clamp(46px, 7vw, 90px));
  padding-bottom: clamp(56px, 7vw, 90px);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(36px, 5vw, 66px);
  align-items: center;
}
.hero h1 { margin-bottom: 22px; }
.hero-sub {
  font-size: clamp(1.06rem, 1.55vw, 1.3rem);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 18px;
  max-width: 30ch;
  line-height: 1.4;
}
.hero-sub em {
  font-style: normal;
  color: var(--blue-400);
  position: relative;
  white-space: nowrap;
}
.hero-sub em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-400));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  animation: underline 0.9s var(--ease) 0.9s forwards;
}
@keyframes underline { to { transform: scaleX(1); } }

.hero .lead { margin-bottom: 30px; }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.83rem;
  color: var(--muted);
  font-weight: 600;
}
.trust-item svg { width: 16px; height: 16px; color: var(--blue-400); flex: none; }

/* Hero visual panel */
.hero-visual { position: relative; }
.hero-panel {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(160deg, rgba(30, 107, 255, 0.14), var(--panel-tint) 46%),
    var(--ink-2);
  padding: 22px;
  box-shadow: var(--shadow-blue);
  overflow: hidden;
}
.hero-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(77, 141, 255, 0.65), transparent 45%, rgba(0, 71, 179, 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.panel-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.panel-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.panel-dot:nth-child(1) { background: #ff5f57; }
.panel-dot:nth-child(2) { background: #febc2e; }
.panel-dot:nth-child(3) { background: #28c840; }
.panel-url {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 12px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Animated chart */
.chart {
  position: relative;
  height: 168px;
  margin-bottom: 18px;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 33.33%,
    var(--inset);
  overflow: hidden;
}
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart .line {
  fill: none;
  stroke: url(#lineGrad);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  filter: drop-shadow(0 0 10px rgba(77, 141, 255, 0.75));
}
.chart.go .line { animation: draw 2.1s var(--ease) forwards; }
.chart .area { fill: url(#areaGrad); opacity: 0; }
.chart.go .area { animation: fadeArea 1s ease 1.2s forwards; }
.chart .pulse { fill: var(--text-strong); opacity: 0; }
.chart.go .pulse { animation: popIn 0.5s var(--ease) 1.9s forwards, ping 2.4s ease-in-out 2.4s infinite; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeArea { to { opacity: 1; } }
@keyframes popIn { to { opacity: 1; } }
/* opacity only: scaling an SVG element changes its geometry, which costs a
   layout on every frame — the fade reads the same and stays composited */
@keyframes ping {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.chart-label {
  position: absolute;
  top: 12px; left: 14px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.chart-value {
  position: absolute;
  top: 28px; left: 14px;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-strong);
}
.chart-delta {
  position: absolute;
  top: 36px; left: 108px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--green);
}

/* Notification cards */
.notif-stack { display: grid; gap: 10px; }
.notif {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  opacity: 0;
  transform: translateY(14px);
  animation: notifIn 0.65s var(--ease) forwards;
}
.notif:nth-child(1) { animation-delay: 0.5s; }
.notif:nth-child(2) { animation-delay: 0.95s; }
.notif:nth-child(3) { animation-delay: 1.4s; }
.notif:nth-child(4) { animation-delay: 1.85s; }
@keyframes notifIn { to { opacity: 1; transform: none; } }
.notif-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--blue-ghost);
  color: var(--blue-400);
  border: 1px solid rgba(77, 141, 255, 0.28);
}
.notif-ico svg { width: 17px; height: 17px; }
.notif-ico.green { background: rgba(35, 209, 139, 0.14); color: var(--green); border-color: rgba(35, 209, 139, 0.3); }
.notif-txt { flex: 1; min-width: 0; }
.notif-title { font-size: 0.86rem; font-weight: 700; letter-spacing: -0.015em; }
.notif-sub { font-size: 0.74rem; color: var(--muted); }
.notif-dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}
/* the halo is its own layer: transform + opacity only, so it stays
   on the compositor instead of repainting the dot every frame */
.notif-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(35, 209, 139, 0.55);
  animation: blip 2s ease-out infinite;
  will-change: transform, opacity;
}
@keyframes blip {
  0% { transform: scale(1); opacity: 1; }
  70% { transform: scale(3.9); opacity: 0; }
  100% { transform: scale(3.9); opacity: 0; }
}

/* Floating badge */
.float-badge {
  position: absolute;
  right: -18px;
  bottom: -86px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 17px;
  border-radius: 16px;
  background: var(--float-bg);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  animation: bob 5s ease-in-out infinite;
  will-change: transform;
  z-index: 3;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}
.float-badge b { display: block; font-size: 1.06rem; letter-spacing: -0.03em; }
.float-badge small { color: var(--muted); font-size: 0.72rem; }
.float-badge .ico {
  width: 36px; height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--blue-600), var(--blue));
  color: #fff;
}
.float-badge .ico svg { width: 18px; height: 18px; }

/* ---------- Marquee ---------- */
.marquee-wrap {
  position: relative;
  padding: 20px 0;
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(0, 71, 179, 0.1), rgba(30, 107, 255, 0.05), rgba(0, 71, 179, 0.1));
  overflow: hidden;
  z-index: 2;
}
.marquee-wrap::before,
.marquee-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 130px;
  z-index: 2;
  pointer-events: none;
}
.marquee-wrap::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.marquee-wrap::after { right: 0; background: linear-gradient(-90deg, var(--ink), transparent); }
.marquee { display: flex; width: max-content; animation: scroll 38s linear infinite; }
.marquee-wrap:hover .marquee { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-2);
  white-space: nowrap;
}
.marquee-item::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-500);
  box-shadow: 0 0 12px var(--blue-500);
}

/* ---------- Generic cards ---------- */
.card {
  position: relative;
  padding: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 0.4s var(--ease), border-color 0.35s ease, background 0.35s ease, box-shadow 0.4s ease;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(30, 107, 255, 0.14), transparent 62%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(77, 141, 255, 0.42);
  background: var(--surface-2);
  box-shadow: 0 26px 56px -32px rgba(0, 71, 179, 0.9);
}
.card:hover::before { opacity: 1; }

.card-ico {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: linear-gradient(140deg, rgba(30, 107, 255, 0.22), rgba(0, 71, 179, 0.1));
  border: 1px solid rgba(77, 141, 255, 0.26);
  color: var(--blue-400);
  transition: transform 0.4s var(--ease), color 0.3s ease;
}
.card:hover .card-ico { transform: scale(1.08) rotate(-5deg); color: #fff; }
.card-ico svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: 9px; }
.card p { font-size: 0.93rem; color: var(--text-2); }

/* ---------- Problems ---------- */
.problems-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(30px, 4vw, 56px);
  align-items: start;
}
.pain-list { display: grid; gap: 12px; }
.pain {
  display: flex;
  gap: 14px;
  padding: 17px 19px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 0.35s var(--ease), border-color 0.3s ease, background 0.3s ease;
}
.pain:hover {
  transform: translateX(7px);
  border-color: rgba(255, 90, 106, 0.4);
  background: rgba(255, 90, 106, 0.05);
}
.pain-x {
  width: 26px; height: 26px;
  border-radius: 8px;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(255, 90, 106, 0.14);
  color: var(--red);
  border: 1px solid rgba(255, 90, 106, 0.28);
}
.pain-x svg { width: 13px; height: 13px; }
.pain p { font-size: 0.945rem; color: var(--text-2); }
.pain strong { color: var(--text-strong); font-weight: 700; }

/* Google search mockup */
.serp {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: var(--serp-bg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.serp-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-3);
}
.serp-input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--inset);
  font-size: 0.86rem;
  color: var(--text-2);
}
.serp-input svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.serp-caret {
  display: inline-block;
  width: 1.5px; height: 15px;
  background: var(--blue-400);
  animation: caret 1.05s steps(2) infinite;
  vertical-align: -2px;
}
@keyframes caret { 50% { opacity: 0; } }
.serp-body { padding: 18px; display: grid; gap: 12px; }
.serp-result {
  padding: 15px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-3);
}
.serp-result .url { font-size: 0.74rem; color: var(--green); font-family: var(--mono); }
.serp-result .title { font-size: 1rem; font-weight: 700; color: var(--blue-300); margin: 3px 0 5px; }
.serp-result .meta { font-size: 0.78rem; color: var(--muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.serp-result .stars { color: var(--amber); letter-spacing: 1px; }
.serp-empty {
  padding: 26px 18px;
  border-radius: 14px;
  border: 1.5px dashed rgba(255, 90, 106, 0.45);
  background: rgba(255, 90, 106, 0.055);
  text-align: center;
}
.serp-empty .q {
  width: 40px; height: 40px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--red);
  border: 2px solid rgba(255, 90, 106, 0.4);
}
.serp-empty b { display: block; font-size: 1.02rem; letter-spacing: -0.025em; }
.serp-empty span { font-size: 0.83rem; color: var(--muted); }

.pain-close {
  margin-top: 30px;
  padding: 26px 28px;
  border-radius: var(--radius);
  border: 1px solid rgba(77, 141, 255, 0.3);
  background: linear-gradient(135deg, rgba(0, 71, 179, 0.18), var(--surface));
}
.pain-close p { color: var(--text-2); }
.pain-close p + p { margin-top: 10px; }
.pain-close strong { color: var(--text-strong); }

/* ---------- Comparison ---------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
}
.compare-col {
  padding: 30px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.compare-col.win {
  border-color: rgba(77, 141, 255, 0.45);
  background: linear-gradient(165deg, rgba(0, 71, 179, 0.2), var(--win-tint));
  box-shadow: var(--shadow-blue);
  position: relative;
}
.compare-col.win::after {
  content: "Recommended";
  position: absolute;
  top: 22px; right: 22px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}
.compare-col h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-size: 1.12rem;
}
.compare-col h3 .badge {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
}
.compare-col:not(.win) h3 .badge { background: rgba(255, 90, 106, 0.14); color: var(--red); }
.compare-col.win h3 .badge { background: rgba(35, 209, 139, 0.15); color: var(--green); }
.compare-col h3 .badge svg { width: 16px; height: 16px; }
.compare-list { display: grid; gap: 15px; }
.compare-list li {
  display: flex;
  gap: 12px;
  font-size: 0.94rem;
  color: var(--text-2);
  line-height: 1.55;
}
.compare-list li svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }
.compare-col:not(.win) .compare-list svg { color: var(--red); opacity: 0.8; }
.compare-col.win .compare-list svg { color: var(--green); }
.compare-col.win .compare-list li { color: var(--text); }

/* ---------- About / pillars ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(34px, 5vw, 64px);
  align-items: center;
}
.about-copy p { color: var(--text-2); margin-bottom: 16px; }
.about-copy strong { color: var(--text-strong); }
.pillars { display: grid; gap: 14px; }
.pillar {
  display: flex;
  gap: 16px;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 0.4s var(--ease), border-color 0.3s ease;
}
.pillar:hover { transform: translateY(-4px); border-color: rgba(77, 141, 255, 0.42); }
.pillar-ico {
  width: 44px; height: 44px;
  border-radius: 13px;
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, rgba(30, 107, 255, 0.24), rgba(0, 71, 179, 0.1));
  border: 1px solid rgba(77, 141, 255, 0.26);
  color: var(--blue-400);
}
.pillar-ico svg { width: 21px; height: 21px; }
.pillar h4 { font-size: 1.02rem; margin-bottom: 5px; }
.pillar p { font-size: 0.9rem; color: var(--muted); }

/* ---------- Steps ---------- */
.steps { position: relative; display: grid; gap: 16px; }
.steps::before {
  content: "";
  position: absolute;
  left: 33px; top: 40px; bottom: 40px;
  width: 2px;
  background: linear-gradient(var(--blue), rgba(77, 141, 255, 0.15));
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 22px;
  align-items: start;
  padding: 24px 26px 24px 0;
  border-radius: var(--radius);
  transition: background 0.35s ease, transform 0.4s var(--ease);
}
.step:hover { background: var(--surface); transform: translateX(6px); }
.step-num {
  position: relative;
  z-index: 2;
  width: 68px; height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 1.06rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(140deg, var(--blue-600), var(--blue));
  border: 4px solid var(--ink);
  box-shadow: 0 0 0 1px rgba(77, 141, 255, 0.4), 0 14px 30px -14px rgba(0, 71, 179, 1);
  transition: transform 0.45s var(--ease);
}
.step:hover .step-num { transform: scale(1.09); }
.step-body { padding-top: 9px; }
.step-body h3 { margin-bottom: 8px; }
.step-body p { color: var(--text-2); font-size: 0.95rem; max-width: 62ch; }

/* ---------- Services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.service {
  position: relative;
  padding: 26px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.35s ease, box-shadow 0.4s ease;
}
.service::after {
  content: "";
  position: absolute;
  inset: auto auto -60% -20%;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 107, 255, 0.3), transparent 65%);
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.6s var(--ease);
}
.service:hover {
  transform: translateY(-8px);
  border-color: rgba(77, 141, 255, 0.5);
  box-shadow: 0 30px 60px -34px rgba(0, 71, 179, 1);
}
.service:hover::after { opacity: 1; transform: translate(20px, -20px); }
.service-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: linear-gradient(140deg, rgba(30, 107, 255, 0.24), rgba(0, 71, 179, 0.08));
  border: 1px solid rgba(77, 141, 255, 0.26);
  color: var(--blue-400);
  transition: transform 0.45s var(--ease), background 0.4s ease, color 0.3s ease;
}
.service:hover .service-ico {
  transform: rotate(-8deg) scale(1.1);
  background: linear-gradient(140deg, var(--blue-600), var(--blue));
  color: #fff;
}
.service-ico svg { width: 21px; height: 21px; }
.service h3 { font-size: 1.04rem; margin-bottom: 7px; }
.service p { font-size: 0.885rem; color: var(--muted); }

/* Packages block */
.packages {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: clamp(28px, 4vw, 50px);
  align-items: center;
  padding: clamp(30px, 4vw, 46px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(77, 141, 255, 0.32);
  background:
    radial-gradient(700px circle at 12% 0%, rgba(0, 71, 179, 0.3), transparent 62%),
    var(--ink-3);
}
.packages h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: 12px; }
.packages > div > p { color: var(--text-2); }
.pkg-list { display: grid; gap: 13px; }
.pkg-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.93rem;
  color: var(--text-2);
}
.pkg-list svg { width: 20px; height: 20px; color: var(--green); flex: none; margin-top: 1px; }

/* ---------- Portfolio (Netflix-style shelf) ---------- */
.shelf { position: relative; margin-top: 8px; }

/* Because the row runs in a loop, there is always a card cut off at the edges.
   These gradients dissolve that cut into the background, like the services marquee. */
.shelf::before,
.shelf::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(46px, 9vw, 150px);
  z-index: 3;
  pointer-events: none;
}
.shelf::before { left: 0; background: linear-gradient(90deg, var(--ink) 18%, var(--ink-fade) 55%, transparent); }
.shelf::after { right: 0; background: linear-gradient(-90deg, var(--ink) 18%, var(--ink-fade) 55%, transparent); }

.shelf-row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  /* no scroll-behavior: smooth here — the auto-scroll writes
     scrollLeft on every frame and "smooth" would fight it. The arrows pass
     behavior:'smooth' on their own call. */
  /* room for the card to grow on hover without being clipped */
  padding-block: 30px 38px;
  padding-inline: max(22px, calc((100% - var(--container)) / 2));
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  /* a swipe on the shelf must not leak to the page nor trigger the
     "voltar" do navegador quando chega na ponta */
  overscroll-behavior-x: contain;
}
.shelf-row::-webkit-scrollbar { display: none; }
.shelf-row.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}
.shelf-row.is-dragging .tile { transition: none; }

/* touch screens: no auto-scroll, the card snaps when the finger lifts */
.shelf-row.is-manual { scroll-snap-type: x mandatory; }
.shelf-row.is-manual .tile { scroll-snap-align: center; }

/* ---- Card ---- */
.tile {
  position: relative;
  flex: 0 0 clamp(266px, 38vw, 452px);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--ink-3);
  overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.9);
  transition: transform 0.45s var(--ease), border-color 0.35s ease, box-shadow 0.45s ease;
}
.tile:first-child { transform-origin: left center; }
.tile:last-child { transform-origin: right center; }
.shelf-row:not(.is-dragging) .tile:hover,
.tile:focus-within {
  transform: scale(1.055);
  z-index: 3;
  border-color: rgba(77, 141, 255, 0.55);
  box-shadow: 0 40px 80px -34px rgba(0, 71, 179, 1);
}

/* ---- Live site preview ---- */
.tile-shot {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: var(--ink-2);
}
.tile-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  -webkit-user-drag: none;
  user-select: none;
}

/* ---- Info strip ---- */
.tile-info {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 54px 20px 18px;
  background: linear-gradient(
    to top,
    rgba(4, 7, 15, 0.98) 0%,
    rgba(4, 7, 15, 0.965) 52%,
    rgba(4, 7, 15, 0.88) 74%,
    rgba(4, 7, 15, 0.42) 90%,
    transparent 100%
  );
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
}
/* open: near-solid background so the site text does not bleed through */
.shelf-row:not(.is-dragging) .tile:hover .tile-info,
.tile:focus-within .tile-info {
  background: linear-gradient(
    to top,
    rgba(4, 7, 15, 0.985) 0%,
    rgba(4, 7, 15, 0.97) 62%,
    rgba(4, 7, 15, 0.88) 84%,
    rgba(4, 7, 15, 0.3) 100%
  );
  backdrop-filter: blur(7px);
}
.tile-tag {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-400);
}
.tile-info h3 { font-size: 1.16rem; letter-spacing: -0.03em; }

/* block that opens on hover */
.tile-more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.45s var(--ease), opacity 0.3s ease;
}
.tile-more > * { overflow: hidden; }
.shelf-row:not(.is-dragging) .tile:hover .tile-more,
.tile:focus-within .tile-more { grid-template-rows: 1fr; opacity: 1; }

.tile-desc {
  display: block;
  font-size: 0.855rem;
  line-height: 1.55;
  color: var(--text-2);
  padding-top: 8px;
}
.tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 0.83rem;
  font-weight: 700;
  color: #fff;
}
.tile-cta svg { width: 14px; height: 14px; flex: none; transition: transform 0.35s var(--ease); }
.tile:hover .tile-cta svg { transform: translate(2px, -2px); }

/* link covering the whole card */
.tile-link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }

/* ---- Arrows ---- */
.shelf-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  color: var(--text);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease), opacity 0.3s ease;
}
.shelf-arrow:hover { background: var(--blue); border-color: var(--blue-500); color: #fff; }
.shelf-arrow svg { width: 21px; height: 21px; }
.shelf-arrow.prev { left: max(10px, calc((100% - var(--container)) / 2 - 56px)); }
.shelf-arrow.next { right: max(10px, calc((100% - var(--container)) / 2 - 56px)); }
.shelf-arrow[hidden] { display: none; }

/* ---- Section header with a "see more" link ---- */
.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: clamp(34px, 4vw, 52px);
}
.head-row .section-head { margin-bottom: 0; }
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s var(--ease);
}
.link-more svg { width: 15px; height: 15px; transition: transform 0.35s var(--ease); }
.link-more:hover {
  border-color: rgba(77, 141, 255, 0.55);
  background: var(--blue-ghost);
  transform: translateY(-2px);
}
.link-more:hover svg { transform: translateX(3px); }

/* =========================================================
   Portfolio page (portfolio.html)
   ========================================================= */
.pbanner { padding-top: calc(var(--header-h) + clamp(40px, 5vw, 72px)); padding-bottom: 0; }
.pbanner h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); margin-bottom: 20px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 26px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.25s ease, gap 0.3s var(--ease);
}
.back-link svg { width: 15px; height: 15px; }
.back-link:hover { color: var(--blue-400); gap: 11px; }

.pcases { padding-top: clamp(30px, 4vw, 52px); }
.pcase-grid { display: grid; gap: clamp(26px, 3.4vw, 46px); }

/* one row: screenshot on the left, text on the right */
.pcase {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 0.35s ease, box-shadow 0.45s ease, transform 0.45s var(--ease);
}
.pcase:hover {
  border-color: rgba(77, 141, 255, 0.42);
  box-shadow: 0 40px 80px -46px rgba(0, 71, 179, 1);
  transform: translateY(-4px);
}

.pcase-shot {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-3);
  box-shadow: 0 20px 46px -30px rgba(0, 0, 0, 0.95);
}
.pcase-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--ease);
}
.pcase:hover .pcase-shot img { transform: scale(1.035); }
.pcase-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  border-radius: inherit;
  pointer-events: none;
}

.pcase-body { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pcase-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--blue-400);
  opacity: 0.55;
}
.pcase-body h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.pcase-body > p { color: var(--text-2); font-size: 0.95rem; }
.pcase-list { display: grid; gap: 9px; list-style: none; margin: 4px 0 6px; }
.pcase-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-2);
}
.pcase-list svg { width: 17px; height: 17px; color: var(--green); flex: none; }

.pcta { padding-top: clamp(56px, 6vw, 90px); }

/* names that must not break mid-way (e.g. "Nuvvo Scale") */
.nowrap { white-space: nowrap; }

/* screen reader only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Testimonials ---------- */
.slider { position: relative; }
.slider-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.testimonial {
  flex: 0 0 min(420px, 84%);
  scroll-snap-align: start;
  padding: 30px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(30, 107, 255, 0.09), var(--surface));
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color 0.35s ease, transform 0.4s var(--ease);
}
.testimonial:hover { border-color: rgba(77, 141, 255, 0.45); transform: translateY(-5px); }
.quote-mark {
  display: block;
  font-size: 4.4rem;
  line-height: 0.55;
  height: 0.5em;
  color: var(--blue-400);
  opacity: 0.38;
  font-family: Georgia, "Times New Roman", serif;
}
.testimonial p { font-size: 1rem; color: var(--text); line-height: 1.62; flex: 1; }
.testimonial .stars { color: var(--amber); letter-spacing: 2px; font-size: 0.9rem; }
.t-author { display: flex; align-items: center; gap: 13px; padding-top: 16px; border-top: 1px solid var(--line); }
.t-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.98rem;
  color: #fff;
  background: linear-gradient(140deg, var(--blue-600), var(--blue));
  flex: none;
}
.t-author b { display: block; font-size: 0.94rem; letter-spacing: -0.02em; }
.t-author span { font-size: 0.79rem; color: var(--muted); }

.slider-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.slider-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  color: var(--text);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease);
}
.slider-btn:hover { background: var(--blue); border-color: var(--blue); transform: scale(1.07); }
.slider-btn svg { width: 18px; height: 18px; }

/* ---------- Video ---------- */
.video-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(32px, 4.5vw, 60px);
  align-items: center;
}
.video-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(circle at 50% 45%, rgba(0, 71, 179, 0.4), transparent 65%),
    var(--ink-3);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: var(--shadow-blue);
  cursor: pointer;
}
.video-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}
.play {
  position: relative;
  width: 86px; height: 86px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px);
  color: var(--text-strong);
  transition: transform 0.4s var(--ease), background 0.3s ease;
}
.play::before,
.play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(77, 141, 255, 0.5);
  animation: ripple 2.6s ease-out infinite;
}
.play::after { animation-delay: 1.3s; }
@keyframes ripple {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.9); opacity: 0; }
}
.video-frame:hover .play { transform: scale(1.1); background: var(--blue); }
.play svg { width: 30px; height: 30px; margin-left: 4px; }
.video-caption {
  position: absolute;
  left: 20px; bottom: 20px; right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.video-caption .rec { display: inline-flex; align-items: center; gap: 7px; color: var(--red); }
.video-caption .rec i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  animation: caret 1.4s ease-in-out infinite;
}

/* ---------- Forms ---------- */
.form-card {
  padding: clamp(26px, 3.4vw, 38px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: linear-gradient(170deg, rgba(30, 107, 255, 0.1), var(--ink-2));
  box-shadow: var(--shadow);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--inset);
  color: var(--text);
  font-size: 0.94rem;
  transition: border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
  width: 100%;
}
.field input::placeholder { color: #55627a; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-400);
  background: var(--inset-strong);
  box-shadow: 0 0 0 4px rgba(30, 107, 255, 0.14);
}
.field select { appearance: none; cursor: pointer; background-image: none; }
.field select option { background: #0b1222; color: var(--text); }

/* Yes/no toggle */
.toggle-q { display: flex; flex-direction: column; gap: 9px; }
.toggle-q > span { font-size: 0.88rem; color: var(--text-2); font-weight: 600; }
.toggle {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--inset);
  gap: 4px;
  width: fit-content;
}
/* radio kept accessible but invisible — without stretching the layout */
.toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.toggle input:focus-visible + label {
  outline: 2px solid var(--blue-400);
  outline-offset: 2px;
}
.toggle label {
  padding: 8px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s ease;
  user-select: none;
}
.toggle input:checked + label { background: linear-gradient(135deg, var(--blue-600), var(--blue)); color: #fff; }

.form-note { font-size: 0.76rem; color: var(--muted); margin-top: 14px; text-align: center; }
.form-note a { color: var(--blue-400); text-decoration: underline; text-underline-offset: 3px; }

.form-success {
  display: none;
  text-align: center;
  padding: 20px 0;
}
.form-success.show { display: block; animation: notifIn 0.5s var(--ease) forwards; }
.form-success .tick {
  width: 62px; height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(35, 209, 139, 0.14);
  border: 1px solid rgba(35, 209, 139, 0.4);
  color: var(--green);
}
.form-success .tick svg { width: 28px; height: 28px; }
.form-success h3 { margin-bottom: 8px; }
.form-success p { color: var(--text-2); font-size: 0.92rem; margin-bottom: 20px; }

/* ---------- FAQ ---------- */
.faq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 30px;
}
.faq-tab {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--text-2);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease);
}
.faq-tab:hover { transform: translateY(-2px); color: var(--text-strong); }
.faq-tab.active {
  background: linear-gradient(135deg, var(--blue-600), var(--blue));
  border-color: var(--blue);
  color: #fff;
}
.faq-panel { display: none; }
.faq-panel.active { display: grid; gap: 12px; animation: notifIn 0.45s var(--ease) forwards; }

.faq-item {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.faq-item.open { border-color: rgba(77, 141, 255, 0.45); background: var(--surface-2); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 24px;
  text-align: left;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: color 0.25s ease;
}
.faq-q:hover { color: var(--blue-300); }
.faq-ico {
  width: 30px; height: 30px;
  border-radius: 9px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: var(--inset);
  position: relative;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s var(--ease);
}
.faq-ico::before,
.faq-ico::after {
  content: "";
  position: absolute;
  background: var(--blue-400);
  border-radius: 2px;
  transition: transform 0.4s var(--ease), background 0.3s ease;
}
.faq-ico::before { width: 12px; height: 2px; }
.faq-ico::after { width: 2px; height: 12px; }
.faq-item.open .faq-ico { background: var(--blue); border-color: var(--blue); transform: rotate(180deg); }
.faq-item.open .faq-ico::before { background: #fff; }
.faq-item.open .faq-ico::after { transform: scaleY(0); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p {
  padding: 0 24px 23px;
  font-size: 0.94rem;
  color: var(--text-2);
  max-width: 82ch;
}

/* ---------- Final CTA ---------- */
.final-cta {
  position: relative;
  padding: clamp(44px, 6vw, 76px) clamp(26px, 4vw, 60px);
  border-radius: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(77, 141, 255, 0.35);
  background:
    radial-gradient(900px circle at 20% 0%, rgba(0, 71, 179, 0.42), transparent 60%),
    radial-gradient(700px circle at 90% 100%, rgba(30, 107, 255, 0.22), transparent 60%),
    var(--ink-3);
  text-align: center;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 75%);
}
.final-cta > * { position: relative; }
.final-cta h2 { margin-bottom: 18px; }
.final-cta .lead { margin: 0 auto 32px; }
.final-cta .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: clamp(52px, 6vw, 74px) 0 30px;
  background: linear-gradient(180deg, transparent, rgba(0, 71, 179, 0.07));
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 52px);
  margin-bottom: 46px;
}
.footer-about p { font-size: 0.9rem; color: var(--muted); margin: 18px 0 20px; max-width: 42ch; }
.footer h4 {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-400);
  margin-bottom: 18px;
  font-weight: 600;
}
.footer-links { display: grid; gap: 11px; }
.footer-links a {
  font-size: 0.9rem;
  color: var(--text-2);
  transition: color 0.25s ease, transform 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
}
.footer-links a:hover { color: var(--blue-300); transform: translateX(4px); }
.footer-links a svg { width: 15px; height: 15px; flex: none; opacity: 0.7; }
.socials { display: flex; gap: 10px; }
.socials a {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-2);
  transition: transform 0.35s var(--ease), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.socials a:hover {
  transform: translateY(-4px);
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.socials svg { width: 19px; height: 19px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 0.81rem;
  color: var(--muted);
}
.footer-bottom a:hover { color: var(--blue-300); }

/* ---------- Course & offers ---------- */
.offers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 0.4s var(--ease), border-color 0.35s ease, box-shadow 0.4s ease;
}
.offer:hover {
  transform: translateY(-6px);
  border-color: rgba(77, 141, 255, 0.45);
  box-shadow: 0 34px 70px -38px rgba(0, 71, 179, 1);
}
.offer.featured {
  border-color: rgba(255, 179, 64, 0.4);
  background:
    radial-gradient(760px circle at 12% 0%, rgba(255, 179, 64, 0.13), transparent 58%),
    var(--ink-3);
}
.offer.featured:hover {
  border-color: rgba(255, 179, 64, 0.72);
  box-shadow: 0 34px 70px -38px rgba(240, 138, 0, 0.85);
}
.offer-badge {
  position: absolute;
  top: -13px;
  left: clamp(26px, 3vw, 38px);
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--blue-600), var(--blue));
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(0, 71, 179, 1);
}
.offer.featured .offer-badge {
  background: linear-gradient(135deg, #ffc266, #f08a00);
  color: #2a1600;
  box-shadow: 0 10px 24px -12px rgba(240, 138, 0, 1);
}
.offer-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue-300);
  margin-bottom: 10px;
}
.offer.featured .offer-kicker { color: var(--amber); }
.offer h3 { font-size: clamp(1.25rem, 2.1vw, 1.62rem); margin-bottom: 12px; }
.offer > p { color: var(--text-2); font-size: 0.95rem; }
.price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 26px 0 6px;
}
.price .cur { font-size: 1.25rem; font-weight: 800; color: var(--text-2); }
.price b {
  font-size: clamp(2.6rem, 5.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.price small { font-size: 0.86rem; font-weight: 700; color: var(--muted); }
.price-note { font-size: 0.83rem; color: var(--muted); margin-bottom: 24px; }
.offer-list { display: grid; gap: 12px; margin-bottom: 28px; list-style: none; }
.offer-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--text-2);
}
.offer-list svg { width: 19px; height: 19px; color: var(--green); flex: none; margin-top: 2px; }
.offer .btn { margin-top: auto; }

/* Course numbers */
.course-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 30px;
}
.cstat {
  padding: 20px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
}
.cstat b {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  background: linear-gradient(120deg, #ffc266, #ff9d1f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cstat span { font-size: 0.82rem; color: var(--muted); }

/* Modules */
.modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 26px;
}
.module {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.35s ease, box-shadow 0.4s ease;
}
.module:hover {
  transform: translateY(-7px);
  border-color: rgba(255, 179, 64, 0.4);
  box-shadow: 0 30px 62px -36px rgba(240, 138, 0, 0.8);
}
.module-head { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.module-num {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--amber);
  background: linear-gradient(140deg, rgba(255, 179, 64, 0.2), rgba(240, 138, 0, 0.06));
  border: 1px solid rgba(255, 179, 64, 0.28);
}
.module-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.05em;
  color: var(--text-2);
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  white-space: nowrap;
}
.module h3 { font-size: 1.06rem; margin-bottom: 9px; }
.module > p { font-size: 0.9rem; color: var(--text-2); margin-bottom: 16px; }
.module-list { display: grid; gap: 9px; list-style: none; margin-top: auto; }
.module-list li {
  position: relative;
  padding-left: 17px;
  font-size: 0.855rem;
  color: var(--muted);
}
.module-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
  opacity: 0.75;
}
.module.module-cta {
  justify-content: center;
  border-style: dashed;
  border-color: rgba(77, 141, 255, 0.4);
  background:
    radial-gradient(520px circle at 50% 0%, rgba(0, 71, 179, 0.28), transparent 62%),
    var(--surface);
}
.module.module-cta:hover { border-color: rgba(77, 141, 255, 0.75); box-shadow: 0 30px 62px -36px rgba(0, 71, 179, 1); }
.module.module-cta p { color: var(--text-2); font-size: 0.92rem; margin-bottom: 20px; }

/* ---------- Floating contact button ---------- */
.cta-float {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 14px 20px 14px 15px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue));
  color: #fff;
  font-weight: 800;
  font-size: 0.92rem;
  box-shadow: 0 18px 40px -14px rgba(0, 71, 179, 0.95);
  transform: translateY(120px);
  opacity: 0;
  transition: transform 0.55s var(--ease), opacity 0.4s ease, box-shadow 0.35s ease;
}
.cta-float.show { transform: none; opacity: 1; }
.cta-float:hover { box-shadow: 0 24px 52px -14px rgba(0, 82, 204, 1); transform: translateY(-3px); }
.cta-float svg { width: 24px; height: 24px; }
.cta-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(77, 141, 255, 0.6);
  opacity: 0;
}
/* only once the button has actually slid into view */
.cta-float.show::before {
  animation: ripple 2.8s ease-out infinite;
  will-change: transform, opacity;
}

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--overlay);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
  overflow-y: auto;
}
.modal.open { opacity: 1; visibility: visible; }
.modal-box {
  width: min(540px, 100%);
  padding: clamp(26px, 4vw, 38px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: linear-gradient(170deg, rgba(30, 107, 255, 0.14), var(--ink-2) 55%);
  box-shadow: var(--shadow);
  transform: translateY(24px) scale(0.97);
  transition: transform 0.45s var(--ease);
  position: relative;
  margin: auto;
}
.modal.open .modal-box { transform: none; }
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: var(--inset);
  color: var(--text-2);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--ease);
}
.modal-close:hover { background: var(--red); color: #fff; transform: rotate(90deg); }
.modal-close svg { width: 16px; height: 16px; }
.modal-box .eyebrow { margin-bottom: 12px; }
.modal-box h3 { font-size: 1.55rem; margin-bottom: 10px; }
.modal-box > p { color: var(--text-2); font-size: 0.93rem; margin-bottom: 22px; }

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.94); }

/* Barra de progresso do scroll */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 95;
  background: linear-gradient(90deg, var(--blue), var(--blue-400));
  box-shadow: 0 0 14px rgba(77, 141, 255, 0.85);
  transition: width 0.1s linear;
}

/* ---------- Responsivo ---------- */
/* The header carries nav + theme + language, and the Spanish labels are the
   longest, so it tightens in two stages before the mobile breakpoint. */
@media (max-width: 1440px) {
  .nav a { padding: 9px 11px; font-size: 0.87rem; }
  .nav a::after { left: 11px; right: 11px; }
}
@media (max-width: 1280px) {
  .nav a { padding: 9px 9px; font-size: 0.85rem; }
  .nav a::after { left: 9px; right: 9px; }
  .header-cta .btn-ghost:not(.btn-keep) { display: none; }
}

@media (max-width: 1080px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .modules { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  .nav { display: none; }
  .offers { grid-template-columns: 1fr; }
  .course-stats { grid-template-columns: repeat(2, 1fr); }
  .header-cta .btn:not(.btn-keep) { display: none; }
  .burger { display: block; }
  .hero-grid,
  .problems-grid,
  .about-grid,
  .video-grid,
  .packages { grid-template-columns: 1fr; }
  .hero-visual { margin-top: 12px; }
  .hero-sub { max-width: none; }
  .compare { grid-template-columns: 1fr; }
  .serp { position: static; }
  .float-badge { right: 10px; bottom: -18px; }
  .pcase { grid-template-columns: 1fr; }
  .head-row { flex-direction: column; align-items: flex-start; gap: 20px; }
}

@media (max-width: 640px) {
  body { font-size: 15.8px; }
  /* brand + theme toggle + burger only; the language switch moves into the menu */
  .header-cta .lang-switch { display: none; }
  .modules { grid-template-columns: 1fr; }
  .container { width: calc(100% - 32px); }
  /* long buttons may wrap instead of stretching the page */
  .btn { white-space: normal; text-align: center; line-height: 1.35; }
  .form-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  /* Shelf on mobile: the screenshot is landscape and the card is narrow, so
     overlaying the text would crop the image. Here the screenshot sits whole
     on top and the text goes underneath, at the bottom of the card. */
  .shelf-row { gap: 14px; padding-block: 18px 26px; padding-inline: 16px; }
  .tile {
    flex-basis: 84%;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
  }
  .tile-shot {
    position: relative;
    aspect-ratio: 16 / 10;
    flex: none;
    border-bottom: 1px solid var(--line);
  }
  .tile-info {
    position: static;
    background: none;
    backdrop-filter: none;
    padding: 15px 17px 18px;
  }
  .tile-more { grid-template-rows: 1fr; opacity: 1; }
  .shelf-arrow { display: none; }
  /* thin gradient: on a narrow screen it must not eat into the card */
  .shelf::before, .shelf::after { width: 22px; }
  /* portfolio page: screenshot on top, text below */
  .pcase { grid-template-columns: 1fr; padding: 16px; }
  .head-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .steps::before { left: 25px; }
  .step { grid-template-columns: 52px 1fr; gap: 16px; padding: 18px 0; }
  .step-num { width: 52px; height: 52px; font-size: 0.92rem; border-width: 3px; }
  .step-body { padding-top: 2px; }
  .cta-float { right: 14px; bottom: 14px; padding: 12px 17px 12px 13px; font-size: 0.86rem; }
  .float-badge { position: static; margin-top: 14px; animation: none; }
  .compare-col.win::after { display: none; }
  .slider-nav { justify-content: center; }
  .testimonial { flex-basis: 88%; padding: 24px; }
  .marquee-wrap::before, .marquee-wrap::after { width: 60px; }
}

/* ---------- Light theme: the few places a token swap is not enough ---------- */
:root[data-theme="light"] .orb { opacity: 0.22; }
:root[data-theme="light"] .cstat b { background: linear-gradient(120deg, #c07708, #a35c00); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="light"] .module-num { color: #a35c00; background: linear-gradient(140deg, rgba(255, 179, 64, 0.26), rgba(240, 138, 0, 0.08)); }
:root[data-theme="light"] .offer.featured { background: radial-gradient(760px circle at 12% 0%, rgba(255, 179, 64, 0.16), transparent 58%), var(--ink-3); }
:root[data-theme="light"] .btn-accent { color: #2a1600; }
:root[data-theme="light"] .serp-result .stars { color: #c07708; }
:root[data-theme="light"] .tile-info { backdrop-filter: none; }
:root[data-theme="light"] .footer { background: linear-gradient(180deg, transparent, rgba(0, 71, 179, 0.05)); }
:root[data-theme="light"] .brand-mark { box-shadow: 0 0 0 1px rgba(9, 20, 40, 0.1), 0 8px 22px -10px rgba(0, 71, 179, 0.5); }
/* the portfolio card overlay sits on a screenshot, so it stays dark either way */
:root[data-theme="light"] .tile-info h3,
:root[data-theme="light"] .tile-desc,
:root[data-theme="light"] .tile-cta { color: #fff; }
:root[data-theme="light"] .tile-tag { color: var(--blue-300); }

/* Decorative loops are frozen while their section is off screen. Without
   this every one of them keeps the main thread busy for the whole visit,
   including the ones several screens away. */
[data-anim-idle],
[data-anim-idle]::before,
[data-anim-idle]::after { animation-play-state: paused !important; }

/* ---------- Acessibilidade ---------- */
:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }

  /* Deliberate exception: the services marquee keeps running even with
     "animation effects" turned off at the system level. To respect the
     user preference again, just delete this block. */
  .marquee {
    animation-duration: 38s !important;
    animation-iteration-count: infinite !important;
  }
}