/* Design system shared with kittora.dev */
:root {
  --bg: #0b0b10;
  --bg-2: #101017;
  --panel: #14141c;
  --panel-2: #1a1a24;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .13);
  --line-3: rgba(255, 255, 255, .22);
  --text: #ededf4;
  --muted: #a2a2b6;
  --dim: #6d6d82;
  --accent: #cba6f7;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 45%, transparent);
  --ink: #0b0b10;
  --ok: #a6e3a1;
  --warn: #f9e2af;
  --sans: "Geist", "Segoe UI Variable", system-ui, -apple-system, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "Geist Mono", "Cascadia Mono", Consolas, monospace;
  --maxw: 1180px;
  --r: 18px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --soft: cubic-bezier(.22, 1.2, .36, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  font-family: var(--sans); color: var(--text); background: var(--bg);
  line-height: 1.6; font-size: 16px; min-height: 100vh; overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Fine grid that fades out, plus a very soft grain on top */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 20%, transparent 75%);
  opacity: .55;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--accent); color: var(--ink); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
section[tabindex="-1"]:focus { outline: none; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.mono { font-family: var(--mono); }
.accent { color: var(--accent); }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------------- Floating glass nav ---------------- */
.nav {
  position: fixed; top: 14px; left: 0; right: 0; margin: 0 auto; z-index: 120;
  width: min(calc(100% - 28px), 1080px);
  transition: top .6s var(--soft), width .6s var(--soft);
}
/* Liquid glass, like kittora.dev: almost transparent, a ring of light (top-left and
   bottom-right), a soft inner glow and a reflection that follows the pointer (--lx). */
.nav-inner {
  position: relative; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 8px 0 18px;
  border-radius: 20px; isolation: isolate;
  /* clip sideways only: the island hides its links this way, while the dropdowns still hang below */
  overflow-x: clip; overflow-y: visible;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .06), transparent 45%),
    radial-gradient(120% 140% at 100% 100%, rgba(255, 255, 255, .035), transparent 45%),
    color-mix(in srgb, var(--bg) 52%, transparent);
  backdrop-filter: blur(6px) saturate(160%) brightness(.82);
  -webkit-backdrop-filter: blur(6px) saturate(160%) brightness(.82);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    inset 1px 1px 0 rgba(255, 255, 255, .30),
    inset -1px -1px 0 rgba(255, 255, 255, .16),
    inset 0 0 14px rgba(255, 255, 255, .04),
    0 10px 30px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .25);
  transition: height .6s var(--soft), border-radius .6s var(--soft), box-shadow .3s;
}
.nav-inner::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px 120px at var(--lx, 50%) -30%, rgba(255, 255, 255, .06), transparent 70%);
}
.nav-inner .brand, .nav-inner .nav-links a { text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.nav.scrolled { top: 8px; width: min(calc(100% - 28px), 980px); }
.nav.scrolled .nav-inner { height: 50px; border-radius: 18px; }
.brand { flex: none; display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 17px; letter-spacing: -.02em; margin-right: auto; white-space: nowrap; }
.brand-logo { width: 26px; height: 24px; flex: none; transition: transform .9s var(--spring); }
.brand:hover .brand-logo { transform: rotate(-10deg) scale(1.1); }
.nav-order svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; color: var(--accent); }
.nav-order { gap: 7px; border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); }

/* Footer language switch */
.lang-switch { display: inline-flex; padding: 3px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); }
.lang-switch button {
  height: 28px; min-width: 38px; padding: 0 10px; border-radius: 7px; /* 10 - 3 */
  font: 500 12.5px var(--mono); color: var(--dim); transition: color .2s, background .2s;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button[aria-pressed="true"] { background: rgba(255, 255, 255, .09); color: var(--text); }
.foot-bottom { align-items: center; }
.foot-bottom a { color: var(--muted); transition: color .2s; }
.foot-bottom a:hover { color: var(--text); }
.note a { color: var(--muted); border-bottom: 1px solid var(--line-2); transition: color .2s, border-color .2s; }
.note a:hover { color: var(--text); border-color: var(--accent); }

/* ---------------- Legal pages ---------------- */
.legal { max-width: 760px; }
.legal article { display: none; }
html:not([lang="es"]) .legal article[data-l="en"], html[lang="es"] .legal article[data-l="es"] { display: block; }
.legal-kicker { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.legal .h2 { margin-bottom: 10px; }
.legal-date { color: var(--dim); font-size: 14px; margin-bottom: 36px; }
.legal h2:not(.h2) { font-size: 1.25rem; letter-spacing: -.02em; margin: 40px 0 12px; }
.legal p, .legal li { color: var(--muted); }
.legal p + p { margin-top: 12px; }
.legal ul { display: grid; gap: 10px; margin-top: 12px; }
.legal li { position: relative; padding-left: 22px; }
.legal li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 12px; height: 1px; background: var(--accent); }
.legal strong { color: var(--text); font-weight: 500; }
.legal a { color: var(--text); border-bottom: 1px solid var(--accent-line); transition: border-color .2s; }
.legal a:hover { border-color: var(--accent); }
.legal-callout { padding: 22px 24px; border-radius: 18px; border: 1px solid var(--accent-line); background: var(--accent-soft); }
.legal-callout h2:not(.h2) { margin: 0 0 8px; }
.legal-callout p { color: var(--text); }
.nav-links { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-links a {
  position: relative; z-index: 1; font-size: 14px; font-weight: 500; color: #e4e4ee;
  padding: 7px 13px; border-radius: 10px; transition: color .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
/* pill that slides under the hovered link and comes back to the current section */
.nav-ind {
  position: absolute; z-index: 0; top: 0; left: 0; height: 100%; width: 0; border-radius: 10px;
  background: rgba(255, 255, 255, 0);
  transition: left .55s var(--soft), width .55s var(--soft), background-color .25s;
}
.nav-ind.show { background: rgba(255, 255, 255, .07); }
.nav-actions { display: flex; align-items: center; gap: 6px; margin-left: 6px; }
.nav-inner .lang-btn { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); }

/* Dynamic island: reading down the page, the bar folds into a pill with the logo;
   hovering it (or scrolling back to the top, or tapping it on a phone) unfolds it with a bounce.
   The links don't move: the pill narrows and clips them while they fade, so it opens and closes the same way. */
.nav-links, .nav-actions { flex: 0 0 auto; transition: opacity .3s var(--out) .1s; }
.nav.island:not(:hover):not(:focus-within) { width: var(--island-w, 120px); top: 10px; }
.nav.island:not(:hover):not(:focus-within) .nav-inner { height: 44px; border-radius: 22px; }
.nav.island:not(:hover):not(:focus-within) .nav-links,
.nav.island:not(:hover):not(:focus-within) .nav-actions { opacity: 0; pointer-events: none; transition-delay: 0s; transition-duration: .2s; }
.nav.island:not(:hover):not(:focus-within) .nav-ind { display: none; }

/* Language dropdown */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 8px 0 11px; border-radius: 10px;
  border: 1px solid var(--line-2); font: 500 12.5px var(--mono); color: var(--text);
  transition: border-color .2s, transform .5s var(--spring);
}
.lang-btn:hover, .lang-btn[aria-expanded="true"] { border-color: var(--accent-line); }
.lang-btn:active { transform: scale(.94); }
.lang-btn .chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); transition: rotate .3s var(--out); }
.lang-btn[aria-expanded="true"] .chev { rotate: 180deg; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 130; min-width: 150px; padding: 5px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -12px rgba(0, 0, 0, .7);
  transform-origin: top right; animation: pop .35s var(--spring);
}
.lang-menu[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(-4px); } }
.lang-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 8px 11px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--muted); text-align: left;
}
.lang-menu button:hover, .lang-menu button:focus-visible { background: rgba(255, 255, 255, .07); color: var(--text); outline: none; }
.lang-menu button[aria-checked="true"] { color: var(--text); }
.menu-btn { gap: 6px; padding-left: 10px; font-family: var(--sans); font-size: 13.5px; }
.menu-btn .ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; color: var(--accent); }
.panel-menu { min-width: 230px; }
.lang-menu a {
  display: flex; flex-direction: column; gap: 1px; padding: 9px 11px; border-radius: 9px;
  font-size: 14px; font-weight: 500; color: var(--text); transition: background .15s;
}
.lang-menu a small { font-size: 12.5px; font-weight: 400; color: var(--dim); }
.lang-menu a:hover, .lang-menu a:focus-visible { background: rgba(255, 255, 255, .07); outline: none; }
.lang-menu li + li a { margin-top: 2px; }
.lang-menu button[aria-checked="true"]::after {
  content: ""; width: 9px; height: 5px; margin-top: -3px;
  border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); rotate: -45deg;
}

/* ---------------- Buttons ---------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px; border-radius: 14px; font-size: 15px; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent; isolation: isolate; overflow: hidden;
  transition: transform .6s var(--spring), background .25s, border-color .25s, box-shadow .3s, color .25s;
}
.btn svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn .arrow { transition: transform .6s var(--spring); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:active { transform: scale(.95); transition-duration: .15s; }
.btn-primary {
  background: var(--accent); color: var(--ink); font-weight: 600;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, #fff) inset, 0 12px 34px -10px var(--accent);
}
.btn-primary:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, #fff) inset, 0 18px 44px -10px var(--accent); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .45) 50%, transparent 60%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0; transition: background-position .8s var(--out);
}
.btn-primary:hover::after { background-position: -30% 0; }
.btn-ghost { border-color: var(--line-2); color: var(--text); background: rgba(255, 255, 255, .02); }
.btn-ghost:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .05); }
.btn-sm { height: 38px; padding: 0 15px; font-size: 14px; border-radius: 11px; }
.btn-lg { height: 54px; padding: 0 26px; font-size: 16px; }

/* ---------------- Type ---------------- */
.kicker {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 10px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .025); font-size: 13px; color: var(--muted);
}
.kicker .dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.kicker .dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; opacity: .6; animation: ping 2.2s var(--out) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(3.4); opacity: 0; } }
.label {
  display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--dim);
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 22px;
}
.label b { color: var(--accent); font-weight: 500; }
.label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
h1, h2, h3 { font-weight: 500; letter-spacing: -.035em; line-height: 1.04; }
.display { font-size: clamp(2.7rem, 5.3vw, 4.6rem); margin-bottom: 26px; }
.display .serif { font-size: 1.08em; }
.h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); max-width: 20ch; text-wrap: balance; }
.h2 .serif { font-size: 1.08em; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--muted); max-width: 46ch; margin-bottom: 36px; }
.sec-head { display: grid; grid-template-columns: 1fr minmax(0, 400px); gap: 24px 60px; align-items: end; margin-bottom: 48px; }
.sec-head p { color: var(--muted); }
.section { padding: 110px 0 0; position: relative; }

/* Entrance animations */
.lines .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.lines .line > span { display: inline-block; animation: rise 1.1s var(--soft) backwards; animation-delay: .12s; }
.lines .line:nth-child(2) > span { animation-delay: .23s; }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
.fade-in { animation: fadeup 1s var(--out) backwards; animation-delay: .4s; }
.fade-in.d1 { animation-delay: .05s; } .fade-in.d2 { animation-delay: .3s; } .fade-in.d3 { animation-delay: .35s; }
.fade-in.d4 { animation-delay: .45s; } .fade-in.d5 { animation-delay: .55s; }
@keyframes fadeup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------------- Hero ---------------- */
.hero { position: relative; padding: 160px 0 90px; overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero .kicker { margin-bottom: 28px; }

/* Hero orbit: 3D logo with the links circling it (like an old DVD menu) */
.orbit {
  position: relative; width: min(100%, 340px); height: 176px; margin: -10px 0 18px;
  perspective: 700px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
}
.orbit:active { cursor: grabbing; }
.orbit-logo {
  position: absolute; left: 50%; top: 50%; width: 104px; height: 97px; margin: -48px 0 0 -52px; z-index: 50;
  transform-style: preserve-3d; animation: logo-sway 7s ease-in-out infinite alternate; pointer-events: none;
}
/* stacked copies give the flat logo some thickness when it turns */
.orbit-logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit-logo img:nth-child(1) { transform: translateZ(0); filter: drop-shadow(0 10px 26px color-mix(in srgb, var(--accent) 45%, transparent)); }
.orbit-logo img:nth-child(2) { transform: translateZ(-2px); filter: brightness(.82); }
.orbit-logo img:nth-child(3) { transform: translateZ(-4px); filter: brightness(.7); }
.orbit-logo img:nth-child(4) { transform: translateZ(-6px); filter: brightness(.58); }
.orbit-logo img:nth-child(5) { transform: translateZ(-8px); filter: brightness(.46); }
.orbit-logo img:nth-child(6) { transform: translateZ(-10px); filter: brightness(.36); }
.orbit-logo img:nth-child(7) { transform: translateZ(-12px); filter: brightness(.26); }
@keyframes logo-sway {
  0% { transform: translateY(2px) rotateX(10deg) rotateY(-28deg); }
  100% { transform: translateY(-6px) rotateX(-6deg) rotateY(28deg); }
}
/* faint ellipse the links travel on */
.orbit-ring {
  position: absolute; left: 8%; right: 8%; top: 50%; height: 34%; translate: 0 -50%; border-radius: 50%; z-index: 1;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
  pointer-events: none;
}
.orbit .social {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 14px;
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: color .2s, border-color .2s, background .2s, box-shadow .25s; will-change: transform, opacity;
}
.orbit .social svg { width: 20px; height: 20px; }
.orbit .social.is-front { color: var(--text); border-color: var(--accent-line); box-shadow: 0 8px 24px -10px var(--accent); }
.orbit .social:hover, .orbit .social:focus-visible { color: var(--ink); background: var(--accent); border-color: transparent; }

/* Logo and links at the top of the hero */
.hero-id { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.hero-logo { width: 48px; height: 45px; flex: none; filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent)); }
.socials { display: flex; align-items: center; gap: 8px; padding-left: 18px; border-left: 1px solid var(--line-2); }
.social {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--muted);
  transition: color .2s, border-color .2s, background .2s, transform .5s var(--spring);
}
.social svg { width: 18px; height: 18px; fill: currentColor; }
.social:hover, .social:focus-visible { color: var(--text); border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-2px); }
.social:active { transform: scale(.92); }
/* label under the icon on hover */
.social::after {
  content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); translate: -50% 4px;
  padding: 4px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  font-size: 12px; color: var(--text); background: var(--panel-2); border: 1px solid var(--line-2);
  opacity: 0; transition: opacity .15s, translate .2s var(--out);
}
.social:hover::after, .social:focus-visible::after { opacity: 1; translate: -50% 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin-top: 22px; font-size: 13.5px; color: var(--dim); }
.hero-note a { color: var(--muted); border-bottom: 1px solid var(--line-2); transition: color .2s, border-color .2s; }
.hero-note a:hover { color: var(--text); border-color: var(--accent); }
.hero-glow {
  position: absolute; z-index: -1; width: 640px; height: 640px; right: -120px; top: 40px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent);
  filter: blur(20px); opacity: .5; pointer-events: none; animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: scale(1.12) translate(-20px, 20px); opacity: .38; } }

/* Hero video in a window frame, with a floating card */
.hero-media { position: relative; }
.window {
  border-radius: 16px; border: 1px solid var(--line-2); background: var(--panel); overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .3);
}
.window-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.window-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.window-bar span { margin-left: 10px; font-size: 11.5px; color: var(--dim); }
.window .yt { border: 0; border-radius: 0; }
.float-card {
  position: absolute; left: -28px; bottom: -26px; display: flex; flex-direction: column; gap: 2px;
  max-width: min(300px, 80%); padding: 12px 16px; border-radius: 14px;
  border: 1px solid var(--line-2); background: color-mix(in srgb, var(--panel-2) 90%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 20px 50px -16px rgba(0, 0, 0, .8);
}
.float-label { font-size: 11px; color: var(--accent); letter-spacing: .04em; text-transform: uppercase; }
.float-card .title { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- Videos: YouTube thumbnail, click to play ---------------- */
.yt {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 14px; background: #000; border: 1px solid var(--line);
}
.yt > button { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.yt img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--out);
}
.yt > button:hover img { transform: scale(1.03); }
.yt .play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #fff;
  background: rgba(11, 11, 16, .5); border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .6s var(--spring), background .2s, color .2s;
}
.yt .play svg { width: 19px; height: 19px; margin-left: 3px; fill: currentColor; }
.yt > button:hover .play { transform: scale(1.1); background: var(--accent); color: var(--ink); border-color: transparent; }
/* The player is taller than the box: YouTube centres the video (same size, 16:9) and draws its title bar
   in the black bands above and below it, which the box crops away. Our own bar (below) drives it. */
.yt iframe { position: absolute; left: 0; top: -76px; width: 100%; height: calc(100% + 152px); border: 0; }
.yt-hit { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.yt.playing:not(.awake):not(.paused) .yt-hit { cursor: none; }
.yt-bar {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 12px;
  background: rgba(11, 11, 16, .62); border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  opacity: 0; translate: 0 6px; transition: opacity .25s, translate .35s var(--out);
}
.yt.awake .yt-bar, .yt.paused .yt-bar, .yt-bar:focus-within { opacity: 1; translate: 0 0; }
.yt-btn { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fff; transition: background .2s, color .2s; }
.yt-btn:hover, .yt-btn:focus-visible { background: rgba(255, 255, 255, .1); color: var(--accent); }
.yt-btn:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.yt-btn svg { width: 16px; height: 16px; fill: currentColor; }
.yt-btn svg .wave { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.yt-time { flex: none; font-size: 11.5px; color: rgba(255, 255, 255, .75); }
.yt-vol { flex: none; display: flex; align-items: center; }
.yt-volume { width: 0; opacity: 0; transition: width .25s var(--out), opacity .2s, margin .25s; }
.yt-vol:hover .yt-volume, .yt-vol:focus-within .yt-volume { width: 64px; opacity: 1; margin: 0 4px; }
/* thin range sliders with the accent filling up to --p */
.yt-seek, .yt-volume { --p: 0%; appearance: none; -webkit-appearance: none; height: 16px; background: transparent; cursor: pointer; }
.yt-seek { flex: 1; min-width: 40px; }
.yt-seek::-webkit-slider-runnable-track, .yt-volume::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--p), rgba(255, 255, 255, .22) var(--p));
}
.yt-seek::-moz-range-track, .yt-volume::-moz-range-track {
  height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--p), rgba(255, 255, 255, .22) var(--p));
}
.yt-seek::-webkit-slider-thumb, .yt-volume::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .15s;
}
.yt-seek::-moz-range-thumb, .yt-volume::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.yt-seek:hover::-webkit-slider-thumb, .yt-volume:hover::-webkit-slider-thumb { transform: scale(1.2); }
.yt-seek:focus-visible, .yt-volume:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; border-radius: 4px; }
/* full screen: the box fills the screen; keep the video ratio and the cropped bands */
.yt.playing:fullscreen { aspect-ratio: auto; border: 0; border-radius: 0; }
.yt.playing:fullscreen iframe { top: -76px; height: calc(100% + 152px); }
@media (max-width: 640px) { .yt-time { display: none; } .yt-vol:hover .yt-volume { width: 0; opacity: 0; margin: 0; } }
@media (hover: none) { .yt-vol .yt-volume { display: none; } }

.grid-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.video-card figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.video-card .title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more { margin-top: 28px; }
.more a {
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted);
  border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: color .2s, border-color .2s;
}
.more a:hover { color: var(--text); border-color: var(--accent); }
.more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- Stats ---------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 30px 28px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat .num { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.stat .num small { font-size: .45em; color: var(--dim); margin-left: 4px; letter-spacing: 0; }
.stat p:not(.num) { margin-top: 10px; color: var(--muted); font-size: 14px; }

/* ---------------- Plans ---------------- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.plan {
  position: relative; display: flex; flex-direction: column; padding: 34px; border-radius: 24px;
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent);
  transition: border-color .4s;
}
.plan:hover { border-color: var(--line-2); }
.plan.featured {
  border-color: var(--accent-line);
  background:
    radial-gradient(500px 220px at 0% 0%, var(--accent-soft), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
}
.plan-name { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan h3 { font-size: 1.35rem; letter-spacing: -.025em; }
.status {
  display: inline-flex; align-items: center; gap: 7px; flex: none; font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.status.dev { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.price { margin-top: 26px; font-size: 3.2rem; font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.price small { font-size: .3em; color: var(--dim); margin-left: 6px; letter-spacing: 0; font-weight: 500; }
.price-text { font-size: 2.6rem; letter-spacing: -.01em; color: var(--accent); }
.plan-desc { margin-top: 12px; color: var(--muted); }
.feat { display: grid; gap: 11px; margin: 26px 0 30px; padding-top: 24px; border-top: 1px solid var(--line); flex: 1; }
.feat li { display: flex; gap: 12px; align-items: baseline; color: var(--muted); font-size: 15px; }
.feat li::before { content: ""; width: 14px; height: 1px; background: var(--accent); transform: translateY(-4px); flex: 0 0 auto; }
.plan .btn { width: 100%; }
.feat { align-content: start; }
/* both cards share the same rows: title, price, description, list, button and notes line up */
@supports (grid-template-rows: subgrid) {
  .plans { grid-template-rows: repeat(6, auto); row-gap: 0; }
  .plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; align-content: start; }
  .plan .feat { flex: none; }
}
.note { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--dim); }

/* ---------------- Steps ---------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tile {
  position: relative; padding: 26px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel);
  display: flex; flex-direction: column;
  transition: border-color .3s, transform .7s var(--spring);
}
.tile:hover { border-color: var(--line-2); transform: translateY(-4px); }
.step-n { font-size: 12.5px; color: var(--accent); }
.tile h3 { padding-top: 40px; font-size: 1.15rem; letter-spacing: -.02em; }
.tile p { margin-top: 8px; color: var(--muted); font-size: 14.5px; }

/* ---------------- FAQ ---------------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px 60px; align-items: start; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 20px 2px; font-weight: 500; font-size: 16.5px; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color .2s;
}
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 20px var(--mono); color: var(--dim); transition: rotate .4s var(--spring); }
.faq details[open] summary::after { rotate: 45deg; color: var(--accent); }
.faq details p { margin: -4px 2px 22px; color: var(--muted); max-width: 52ch; transition: opacity .2s, transform .25s var(--out); }
/* the answer fades in as it slides open, and out as it closes */
.faq details[open]:not(.is-closing) p { animation: faq-in .45s var(--out) both; }
.faq details.is-closing p { opacity: 0; transform: translateY(-6px); }
.faq details.is-closing summary::after { rotate: 0deg; color: var(--dim); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---------------- Closing CTA ---------------- */
.cta-section { padding-bottom: 20px; }
.cta {
  position: relative; overflow: hidden; text-align: center; padding: 80px 24px; border-radius: 28px;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(600px 260px at 50% 0%, var(--accent-soft), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
}
.cta .h2 { margin: 0 auto; font-size: clamp(2.4rem, 5.4vw, 4.2rem); max-width: 16ch; }
.cta > p { margin: 16px 0 34px; color: var(--muted); font-size: 1.15rem; }
.cta { isolation: isolate; padding: 96px 28px; }
/* Catppuccin aurora: soft pink, mauve and lavender lights drifting behind the text */
.cta-aurora { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; }
.cta-aurora span {
  position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; filter: blur(80px); opacity: .22;
  animation: aurora 16s ease-in-out infinite alternate;
}
.cta-aurora span:nth-child(1) { left: -6%; top: -30%; background: #f5c2e7; }
.cta-aurora span:nth-child(2) { left: 30%; top: 20%; background: #cba6f7; animation-duration: 19s; animation-delay: -6s; }
.cta-aurora span:nth-child(3) { right: -8%; top: -20%; background: #b4befe; animation-duration: 22s; animation-delay: -11s; }
@keyframes aurora {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(14%, 18%) scale(1.15); }
  100% { transform: translate(-10%, 8%) scale(.92); }
}
/* the site's fine grid on top, fading towards the edges, and a dark veil so the text stays readable */
.cta-aurora::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 30%, transparent 80%);
}
.cta-aurora::after { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse 65% 60% at 50% 50%, rgba(11, 11, 16, .5), rgba(11, 11, 16, .82)); }
/* a ring of light that runs around the box */
@property --cta-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--cta-a), transparent 0 55%, color-mix(in srgb, var(--accent) 70%, transparent) 70%, #f5c2e7 78%, #b4befe 84%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: cta-spin 6s linear infinite;
}
@keyframes cta-spin { to { --cta-a: 360deg; } }
.cta-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 26px; }
.cta-chips li {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(11, 11, 16, .45); font-size: 13px; color: var(--muted);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cta-chips .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------------- Footer ---------------- */
.footer { margin-top: 90px; padding-top: 36px; border-top: 1px solid var(--line); }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
.foot-about { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot-about p { color: var(--muted); font-size: 14px; padding-left: 16px; border-left: 1px solid var(--line-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot-links a { font-size: 14px; color: var(--muted); transition: color .2s; }
.foot-links a:hover { color: var(--text); }
.foot-socials { display: flex; gap: 6px; }
.foot-social {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--muted);
  border: 1px solid var(--line-2); transition: color .2s, border-color .2s, background .2s;
}
.foot-social svg { width: 16px; height: 16px; fill: currentColor; }
.foot-social:hover, .foot-social:focus-visible { color: var(--text); border-color: var(--accent-line); background: var(--accent-soft); }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding: 16px 0 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); }

/* ---------------- App pages: /pedido and /admin ---------------- */
.dim { color: var(--dim); }
.small { font-size: 13px; }
.break { overflow-wrap: anywhere; }
.app-main { padding-top: 130px; min-height: calc(100vh - 120px); }
.app-head { margin-bottom: 32px; }
.app-head .lede { margin: 14px 0 0; }
/* order page: until an order is open (searching, confirming a payment), everything sits centred */
.order-page:not([data-view="view-order"]) .app-main { display: flex; flex-direction: column; justify-content: center; padding-bottom: 40px; }
.order-page:not([data-view="view-order"]) .app-head { text-align: center; }
.order-page:not([data-view="view-order"]) .app-head > * { margin-inline: auto; }   /* the title and lede have a max width */
.order-page:not([data-view="view-order"]) .app-main > .alert,
.order-page:not([data-view="view-order"]) .app-main > .panel { width: 100%; max-width: 520px; margin-inline: auto; }
.order-page .app-head { view-transition-name: app-head; }
::view-transition-group(app-head) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
.app-footer { margin-top: 80px; padding-top: 0; }
.app-footer .foot-bottom { margin-top: 0; }
.app-footer a { color: var(--muted); transition: color .2s; }
.app-footer a:hover { color: var(--text); }
.panel {
  padding: 28px; border-radius: 22px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent), var(--panel);
}
.panel + .panel { margin-top: 20px; }
.panel.narrow { max-width: 520px; }
.panel.center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 56px 28px; }
.panel-title { font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: 6px; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: spin .8s linear infinite; margin-bottom: 8px; }
@keyframes spin { to { rotate: 360deg; } }
.alert { margin-bottom: 20px; padding: 12px 16px; border-radius: 12px; border: 1px solid; font-size: 14.5px; }
.alert.error { color: #f5a3b5; border-color: rgba(243, 139, 168, .35); background: rgba(243, 139, 168, .06); }
.alert.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 6%, transparent); }
.alert.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 6%, transparent); }

.form { display: grid; gap: 16px; margin-top: 20px; }
.field { display: grid; gap: 7px; font-size: 13.5px; color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field input, .field textarea, .field select, .copy-row input {
  width: 100%; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .03); color: var(--text); font: 400 15px var(--sans);
  transition: border-color .2s, background .2s;
}
.field textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.field select { appearance: none; cursor: pointer; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--panel); color: var(--text); }
.field input:focus, .field textarea:focus, .field select:focus, .copy-row input:focus { outline: none; border-color: var(--accent-line); background: rgba(255, 255, 255, .05); }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.form .btn { justify-self: start; }
.btn:disabled { opacity: .6; pointer-events: none; }

/* order page: one compact column — status, a summary strip, and folding sections for the rest */
.order-page[data-view="view-order"] .app-main { max-width: 860px; }
.order-page[data-view="view-order"] .app-head { margin-bottom: 20px; }
.order-page[data-view="view-order"] .app-head .h2 { font-size: clamp(2rem, 4vw, 2.6rem); }
.order-page[data-view="view-order"] .app-head .lede { font-size: 1rem; margin-top: 6px; }
#view-order .panel { padding: 22px; border-radius: 18px; }
#view-order .panel + .panel { margin-top: 12px; }
.order-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.order-top .dim { font-size: 11px; }
.order-code { font-size: 1.5rem; font-weight: 500; letter-spacing: .02em; }
#view-order .order-code { font-size: 1.15rem; }
.status.bad { color: #f38ba8; border-color: rgba(243, 139, 168, .35); }
/* progress: dots joined by a line, small labels */
.timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 18px 0 12px; }
.timeline li { position: relative; padding-top: 20px; font-size: 12px; text-align: center; color: var(--dim); }
.timeline li::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 2px; background: var(--line-2); }
.timeline li:first-child::before { left: 50%; }
.timeline li:last-child::before { right: 50%; }
.timeline li::after { content: ""; position: absolute; top: 0; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--panel); border: 2px solid var(--line-2); }
.timeline li.done { color: var(--muted); }
.timeline li.done::before { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.timeline li.done::after { background: color-mix(in srgb, var(--accent) 70%, transparent); border-color: transparent; }
.timeline li.current { color: var(--text); font-weight: 500; }
.timeline li.current::after { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 14px var(--accent); }
.timeline.cancelled li { text-decoration: line-through; }
.status-desc { max-width: 60ch; font-size: 14.5px; }
.order-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.message { margin-top: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--accent-line); background: var(--accent-soft); }
.message p:last-child { margin-top: 6px; white-space: pre-wrap; }
.summary, .details-read { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; align-content: start; margin-top: 18px; font-size: 14.5px; }
.summary dt, .details-read dt { color: var(--dim); }
.summary dd, .details-read dd { overflow-wrap: anywhere; white-space: pre-wrap; }
.summary.strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; }
.summary.strip dt { font-size: 11.5px; margin-bottom: 2px; }
#view-order .details-read { margin-top: 12px; font-size: 14px; gap: 8px 16px; }
.form.compact { gap: 12px; margin-top: 14px; }
.form.compact .field { font-size: 12.5px; gap: 5px; }
.form.compact .field input, .form.compact .field textarea { padding: 9px 11px; font-size: 14px; }
.form.compact .field textarea { min-height: 0; }
.field-row.three { grid-template-columns: 1.3fr 1fr 1fr; }
/* folding sections */
.fold summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 6px; border-radius: 6px; }
.fold .panel-title { margin: 0; font-size: 1.05rem; }
.fold .chev { flex: none; width: 9px; height: 9px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); rotate: 45deg; translate: 0 -2px; transition: rotate .25s, translate .25s; }
.fold[open] .chev { rotate: 225deg; translate: 0 2px; }
.fold[open] summary { margin-bottom: 8px; }
.copy-row { display: flex; gap: 8px; margin-top: 8px; }
.copy-row input { font: 400 12.5px var(--mono); color: var(--muted); padding: 9px 11px; }
.hint { margin-top: 8px; font-size: 12.5px; color: var(--dim); }
.link-btn { margin-top: 20px; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--line-2); padding-bottom: 1px; transition: color .2s, border-color .2s; }
.link-btn:hover { color: var(--text); border-color: var(--accent); }
#view-order .link-btn { margin-top: 16px; }
.admin-actions .btn-danger { margin-left: auto; }

@media (max-width: 860px) {
  .admin-card-body { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .field-row.three, .summary.strip { grid-template-columns: 1fr 1fr; }
  .field-row.three .field:first-child { grid-column: 1 / -1; }
  /* phones: only the current step keeps its label */
  .timeline li { font-size: 0; }
  .timeline li.current { font-size: 11px; white-space: nowrap; }
}

/* ---------------- 404 ---------------- */
.notfound { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; }
.notfound h1 { font-size: clamp(3rem, 8vw, 6rem); margin-top: 24px; }
.notfound .lede { margin-bottom: 20px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
  .hero-media { order: -1; justify-self: center; width: 100%; }   /* phones and tablets: the orbit goes above the title */
  .hero-media .orbit { margin: 0 auto; }
  .nav-links { display: none; }
  .hero { padding-top: 130px; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-media { max-width: 620px; }
  .float-card { left: 16px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .sec-head, .faq-grid { grid-template-columns: 1fr; }
  .grid-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .nav { width: calc(100% - 20px); top: 10px; }
  .nav-inner { padding-left: 14px; }
  .menu-label { display: none; }
  .nav-order { width: 38px; padding: 0; }
  .nav-order span { display: none; }
  /* on phones the menu hangs from the nav's right edge so it stays on screen */
  #panel { position: static; }
  .panel-menu { right: 8px; }
  .hero { padding: 116px 0 70px; }
  .section { padding-top: 84px; }
  .grid-videos, .plans, .steps { grid-template-columns: 1fr; }
  .plan { padding: 26px; }
  .stat { padding: 22px 16px; }
  .tile { min-height: 0; }
  .float-card { left: 12px; bottom: -22px; }
  .cta { padding: 56px 20px; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot-about { grid-column: 1 / -1; }
}
@media (min-width: 981px) {
  .hero-media .orbit { width: 100%; max-width: 500px; height: 380px; margin: 0 auto; }
  .hero-media .orbit-logo { width: 176px; height: 164px; margin: -82px 0 0 -88px; }
  .hero-media .orbit .social { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 16px; }
  .hero-media .orbit .social svg { width: 24px; height: 24px; }
}
@media (max-width: 640px) {
  .foot-about p { padding-left: 0; border-left: 0; flex-basis: 100%; }
  .plans { grid-template-rows: none; row-gap: 20px; }
  .plan { display: flex; grid-row: auto; }
  .cta { padding: 64px 20px; }
  .cta-actions .btn { width: 100%; }
  .orbit { width: 100%; height: 160px; margin: -6px auto 14px; }
  .orbit-logo { transform: scale(.88); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}