/* Vitrine landing page. Dark, premium, motion-led; the accent follows the trade shown in the hero. */
:root {
  --bg: #07080b; --bg2: #0d0f14; --panel: #12151c; --line: rgba(var(--fg-rgb), .08); --line2: rgba(var(--fg-rgb), .14);
  --text: #f1efe9; --muted: rgba(var(--text-rgb), .62); --accent: #ff5a1f; --accent2: #ffb43d; --tc: #ff5a1f;
  --display: "Archivo", system-ui, sans-serif; --body: "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --fg-rgb: 255, 255, 255; --text-rgb: 241, 239, 233; --bg-rgb: 7, 8, 11; --panel-rgb: 22, 25, 33;
  --ok: #4ade80; --bad: #ff8b8b; color-scheme: dark;
}
/* Light theme: explicit choice, or the device setting when nothing was chosen. */
:root[data-theme="light"] {
  --bg: #f6f4ef; --bg2: #efebe4; --panel: #ffffff; --line: rgba(20, 22, 28, .09); --line2: rgba(20, 22, 28, .16);
  --text: #15171c; --muted: rgba(21, 23, 28, .64); --accent2: #d97706;
  --fg-rgb: 20, 22, 28; --text-rgb: 21, 23, 28; --bg-rgb: 246, 244, 239; --panel-rgb: 255, 255, 255;
  --ok: #15803d; --bad: #b42318; color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f4ef; --bg2: #efebe4; --panel: #ffffff; --line: rgba(20, 22, 28, .09); --line2: rgba(20, 22, 28, .16);
    --text: #15171c; --muted: rgba(21, 23, 28, .64); --accent2: #d97706;
    --fg-rgb: 20, 22, 28; --text-rgb: 21, 23, 28; --bg-rgb: 246, 244, 239; --panel-rgb: 255, 255, 255;
    --ok: #15803d; --bad: #b42318; color-scheme: light;
  }
}
/* Theme switch (sun / moon) */
.theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(var(--fg-rgb), .04); color: var(--text); cursor: pointer; transition: background .2s, transform .3s var(--ease); flex: none; }
.theme-toggle:hover { background: rgba(var(--fg-rgb), .09); transform: rotate(15deg); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; } :root[data-theme="light"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme-toggle .i-sun { display: block; } :root:not([data-theme="dark"]) .theme-toggle .i-moon { display: none; } }
* { box-sizing: border-box; }
html.lenis { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; }
body.lp { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
svg { width: 1.1em; height: 1.1em; flex: none; }
::selection { background: var(--accent); color: #fff; }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; color: #000; padding: 8px 14px; border-radius: 8px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .wrap--narrow { max-width: 820px; }
em { font-style: italic; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.eyebrow { text-transform: uppercase; letter-spacing: .28em; font-size: 12.5px; font-weight: 600; color: var(--accent2); margin: 0 0 18px; }
.h2 { font: 800 clamp(2.1rem, 5vw, 4rem)/1 var(--display); font-stretch: 112%; letter-spacing: -.02em; margin: 0 0 22px; text-wrap: balance; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 640px; margin: 0 0 40px; }
h3 { font: 700 1.2rem/1.2 var(--display); font-stretch: 108%; margin: 0 0 8px; }

/* Buttons */
.btn { --b: var(--line2); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 24px; border-radius: 999px; font: 600 15px var(--body); text-decoration: none; color: var(--text); border: 0; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s, background .3s; white-space: nowrap; }
.btn svg { transition: transform .3s var(--ease); } .btn:hover svg { transform: translateX(4px); }
.btn--sm { padding: 9px 18px; font-size: 14px; } .btn--lg { padding: 16px 30px; font-size: 16px; } .btn--xl { padding: 22px 42px; font-size: 19px; }
.btn--glow { background: linear-gradient(100deg, var(--accent), #ff7a2e 50%, var(--accent2)); background-size: 200% 100%; color: #fff; box-shadow: 0 10px 40px -8px rgba(255, 90, 31, .7), inset 0 1px 0 rgba(var(--fg-rgb), .25); animation: sheen 6s linear infinite; }
.btn--glow:hover { transform: translateY(-2px); box-shadow: 0 18px 50px -8px rgba(255, 90, 31, .85), inset 0 1px 0 rgba(var(--fg-rgb), .3); }
@keyframes sheen { to { background-position: -200% 0; } }
.btn--ghost { background: rgba(var(--fg-rgb), .04); box-shadow: inset 0 0 0 1px var(--line2); backdrop-filter: blur(10px); }
.btn--ghost:hover { background: rgba(var(--fg-rgb), .09); }
.btn--light { background: var(--text); color: var(--bg); } .btn--light:hover { transform: translateY(-2px); }

/* Nav */
.nav { position: fixed; inset: 14px 0 auto; z-index: 50; padding: 0 16px; pointer-events: none; }
.nav__in { pointer-events: auto; max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px 10px 22px; border-radius: 999px; background: rgba(var(--bg-rgb), .55); border: 1px solid var(--line); backdrop-filter: blur(20px) saturate(160%); transition: background .4s, padding .4s; }
.nav[data-scrolled="true"] .nav__in { background: rgba(var(--bg-rgb), .85); }
.logo { font: 800 1.45rem var(--display); font-stretch: 122%; text-decoration: none; letter-spacing: -.02em; } .logo span { color: var(--accent); }
.nav__links { display: flex; gap: 26px; } .nav__links a { text-decoration: none; color: var(--muted); font-size: 14.5px; transition: color .2s; } .nav__links a:hover { color: var(--text); }
.nav__cta { display: flex; align-items: center; gap: 14px; } .nav__login { text-decoration: none; font-size: 14.5px; color: var(--muted); }
@media (max-width: 900px) { .nav__links { display: none; } }
@media (max-width: 480px) { .nav__login { display: none; } }

/* Hero */
.hero { position: relative; min-height: 100svh; padding: 130px 24px 90px; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero__grid { position: absolute; inset: auto -20% -10% -20%; height: 60%; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(600px) rotateX(62deg); transform-origin: top; mask-image: linear-gradient(to bottom, #000 0%, transparent 85%); opacity: .55; }
.hero__in { position: relative; max-width: 1280px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; border-radius: 999px; background: rgba(var(--fg-rgb), .05); border: 1px solid var(--line2); font-size: 13.5px; color: var(--muted); margin: 0 0 26px; }
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc) 25%, transparent), 0 0 18px var(--tc); animation: pulse 2s infinite; transition: background .6s; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px transparent, 0 0 10px var(--tc); } }
.hero__title { font: 900 clamp(2.4rem, 4.3vw, 4.3rem)/.98 var(--display); font-stretch: 116%; letter-spacing: -.035em; margin: 0 0 26px; }
.hero__title .ln { display: block; overflow: hidden; padding-bottom: .06em; } .hero__title .ln > span { display: inline-block; }
.hero__lead { font-size: clamp(1rem, 1.3vw, 1.1rem); color: var(--muted); max-width: 470px; margin: 0 0 30px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 480px) { .hero__ctas .btn { flex: 1 1 100%; } }
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 26px 0 0; font-size: 14px; color: var(--muted); }
.hero__trust li { display: inline-flex; align-items: center; gap: 7px; } .hero__trust svg { color: var(--accent2); }
.hero__cue { position: absolute; left: 50%; bottom: 24px; width: 26px; height: 42px; border-radius: 20px; border: 1.5px solid var(--line2); transform: translateX(-50%); }
.hero__cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--text); animation: cue 1.8s infinite; }
@keyframes cue { 60% { transform: translateY(12px); opacity: 0; } 61% { transform: none; opacity: 0; } }

/* Device stage */
.stage { position: relative; perspective: 1600px; }
.stage__tilt { position: relative; transform-style: preserve-3d; transform: rotateY(-14deg) rotateX(6deg); transition: transform .8s var(--ease); }
.browser { position: relative; border-radius: 16px; background: #15181f; border: 1px solid var(--line2); overflow: hidden; box-shadow: 0 60px 120px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(var(--fg-rgb), .03), 0 30px 120px -40px var(--tc); transition: box-shadow 1s; }
.browser__bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #1b1f27; border-bottom: 1px solid var(--line); }
.browser__bar > i { width: 11px; height: 11px; border-radius: 50%; background: #3a3f49; } .browser__bar > i:first-child { background: #ff5f57; } .browser__bar > i:nth-child(2) { background: #febc2e; } .browser__bar > i:nth-child(3) { background: #28c840; }
.browser__url { margin: 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 4px 16px; border-radius: 8px; background: rgba(var(--fg-rgb), .05); font-size: 12.5px; color: var(--muted); max-width: 60%; overflow: hidden; }
.browser__url { background: rgba(255, 255, 255, .06) !important; color: rgba(241, 239, 233, .6) !important; }
/* The browser chrome stays dark in both themes: its text too. */
.browser__url b { font-weight: 500; color: #f1efe9; white-space: nowrap; } .browser__url svg { color: #28c840; width: 12px; height: 12px; }
.browser__screen { position: relative; aspect-ratio: 16 / 10; background: #0b0d12; overflow: hidden; }
.browser__screen iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0; pointer-events: none; }
.browser__screen img.fallback { width: 100%; height: 100%; object-fit: cover; }
.browser__veil { position: absolute; inset: 0; background: #0b0d12; opacity: 0; transition: opacity .45s; pointer-events: none; }
.browser__screen.is-switching .browser__veil { opacity: 1; }
.browser__empty { display: grid; place-items: center; height: 100%; color: var(--muted); }
.toast { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; background: rgba(var(--panel-rgb), .82); border: 1px solid var(--line2); backdrop-filter: blur(16px); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .7); transform: translateZ(60px); opacity: 0; min-width: 240px; }
.toast b { display: block; font-size: 14px; } .toast small { color: var(--muted); font-size: 12.5px; }
.toast__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }
.toast--a { left: -38px; bottom: 16%; } .toast--b { right: -26px; top: 18%; } .toast--c { left: 12%; top: -26px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; justify-content: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(var(--fg-rgb), .03); color: var(--muted); font: 500 13px var(--body); cursor: pointer; transition: all .3s; }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }
.chip:hover { color: var(--text); border-color: var(--line2); }
.chip.is-on { color: #fff; border-color: var(--tc); background: color-mix(in srgb, var(--tc) 22%, transparent); box-shadow: 0 0 24px -4px var(--tc); }
.chip.is-on::after { content: ""; display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; transform-origin: left; animation: chipbar var(--loop, 15s) linear; }
@keyframes chipbar { from { transform: scaleX(0); } }
.stage__note { text-align: center; font-size: 12px; color: rgba(var(--text-rgb), .4); margin: 10px 0 0; }
@media (max-width: 1020px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: 50px; } .hero { padding-top: 120px; }
  .stage__tilt { transform: rotateX(8deg); } .toast--a { left: -6px; } .toast--b { right: -6px; }
}
@media (max-width: 640px) { .toast { min-width: 0; padding: 9px 12px 9px 9px; } .toast small { display: none; } .toast--c { display: none; } .toast__ic { width: 30px; height: 30px; } .chips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } }

/* Marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 22px 0; background: var(--bg2); }
.marquee__track { display: flex; gap: 28px; width: max-content; animation: marquee 50s linear infinite; font: italic 700 clamp(1.4rem, 2.6vw, 2.2rem) var(--display); font-stretch: 110%; color: rgba(var(--text-rgb), .5); }
.marquee__track b { color: var(--accent); font-style: normal; font-size: .6em; align-self: center; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Story (pinned) */
.story { position: relative; background: radial-gradient(ellipse at 80% 50%, rgba(255, 90, 31, .12), transparent 60%), var(--bg); }
.story__pin { max-width: 1200px; margin: 0 auto; padding: 112px 24px 32px; min-height: 100vh; box-sizing: border-box; display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: center; }
.story .h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
/* Only the active step shows its text: keeps the pinned block within the screen. */
.story__steps li:not(.is-on) p { display: none; }
.story__steps li { padding: 14px 18px; }
.story__steps { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 8px; }
.story__steps li { display: flex; gap: 18px; padding: 18px 20px; border-radius: 20px; border: 1px solid transparent; opacity: .38; transition: all .5s var(--ease); }
.story__steps li.is-on { opacity: 1; background: rgba(var(--fg-rgb), .035); border-color: var(--line2); }
.story__steps b { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2); font: 700 15px var(--display); }
.story__steps li.is-on b { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; color: #fff; box-shadow: 0 0 30px -4px var(--accent); }
.story__steps h3 { margin: 4px 0 4px; } .story__steps p { margin: 0; color: var(--muted); font-size: 15px; }
.phone { position: relative; width: 340px; height: 690px; margin: 0 auto; transform-origin: 50% 50%; border-radius: 54px; padding: 14px; background: linear-gradient(145deg, #2a2e37, #0f1116); box-shadow: 0 0 0 1px rgba(var(--fg-rgb), .08), inset 0 0 0 2px rgba(var(--fg-rgb), .05), 0 60px 120px -30px rgba(0, 0, 0, .9), 0 0 120px -40px var(--accent); }
.phone__notch { position: absolute; top: 24px; left: 50%; width: 96px; height: 28px; margin-left: -48px; border-radius: 20px; background: #000; z-index: 3; }
.phone__screen { position: relative; height: 100%; border-radius: 42px; overflow: hidden; background: #f6f5f2; color: #16181d; }
.scr { position: absolute; inset: 0; padding: 66px 18px 20px; opacity: 0; }
.scr--search { opacity: 1; background: #fff; }
.g-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 999px; box-shadow: 0 2px 12px rgba(0, 0, 0, .12); font-size: 14px; margin-bottom: 18px; }
.g-logo { font: 800 18px var(--display); background: linear-gradient(90deg, #4285f4, #ea4335, #fbbc05, #34a853); -webkit-background-clip: text; color: transparent; }
.g-q::after { content: "|"; animation: blink 1s steps(1) infinite; color: #4285f4; } @keyframes blink { 50% { opacity: 0; } }
.g-res { padding: 12px 4px; border-bottom: 1px solid #eee; font-size: 13px; } .g-res small { color: #4d5156; } .g-res b { display: block; color: #1a0dab; font-weight: 500; font-size: 15.5px; margin: 2px 0; } .g-res p { margin: 0; color: #4d5156; }
.g-res--me { border-radius: 14px; padding: 12px; background: #fff7f2; box-shadow: 0 0 0 2px var(--accent); }
.scr__cap { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 11px; color: #9aa0a6; }
.scr--site { padding: 0; background: #0b0d12; } .scr--site img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.scr--form { background: #fff; padding-top: 80px; }
.f-title { font: 800 26px var(--display); margin: 0 0 16px; }
.f-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } .f-chips span { padding: 6px 12px; border-radius: 999px; border: 1px solid #ddd; font-size: 12.5px; } .f-chips .on { background: #0a7fb5; border-color: #0a7fb5; color: #fff; }
.scr--form label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 12px; }
.f-in { display: block; margin-top: 6px; height: 44px; padding: 11px 14px; border-radius: 12px; border: 1px solid #d9dce0; font-weight: 500; font-size: 15px; }
.f-btn { display: block; margin-top: 18px; padding: 14px; border-radius: 999px; background: #0a7fb5; color: #fff; text-align: center; font-weight: 600; }
.f-ok { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; background: #fff; opacity: 0; text-align: center; }
.f-ok svg { width: 64px; height: 64px; padding: 14px; border-radius: 50%; background: #e3f5ea; color: #1f9d55; } .f-ok b { font: 800 22px var(--display); } .f-ok small { color: #666; }
.scr--mail { background: #f2f3f5; }
.m-head { font: 800 24px var(--display); margin: 10px 0 16px; }
.m-item { display: grid; gap: 2px; padding: 14px; border-radius: 16px; background: #fff; margin-bottom: 10px; font-size: 13px; color: #555; position: relative; }
.m-item b { color: #111; font-size: 14.5px; } .m-item small { color: #999; }
.m-item--new { box-shadow: 0 0 0 2px var(--accent), 0 16px 30px -12px rgba(255, 90, 31, .5); }
.m-item--new::before { content: ""; position: absolute; right: 14px; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.m-call { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; padding: 15px; border-radius: 999px; background: #1f9d55; color: #fff; font-weight: 600; }
@media (max-width: 900px) {
  .story__pin { grid-template-columns: 1fr; gap: 24px; padding-top: 90px; align-content: start; }
  .story__steps li:not(.is-on) { display: none; } .story__text .h2 { font-size: 1.8rem; margin-bottom: 0; } .story__text .eyebrow { margin-bottom: 8px; }
  .story__pin { gap: 14px; padding-top: 84px; }
  .story__steps { margin-top: 12px; } .story__steps li { padding: 12px 14px; } .story__steps p { font-size: 13.5px; }
  .phone { width: 210px; height: 420px; border-radius: 36px; padding: 8px; } .phone__screen { border-radius: 29px; } .phone__notch { top: 14px; width: 70px; height: 20px; margin-left: -35px; }
  .scr { zoom: .68; }
}

/* Trades */
.trades { padding: 140px 0 120px; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.tcard { position: relative; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; transform-style: preserve-3d; transition: border-color .4s, box-shadow .4s; will-change: transform; }
.tcard:hover { border-color: color-mix(in srgb, var(--tc) 60%, transparent); box-shadow: 0 30px 70px -30px var(--tc); }
.tcard__shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(circle at 70% 40%, color-mix(in srgb, var(--tc) 55%, transparent), transparent 60%), #0b0d12; }
.tcard__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); z-index: 1; }
.tcard:hover .tcard__shot img { transform: scale(1.06); }
.tcard__fallback { position: absolute; inset: 0; display: grid; place-items: center; font: 800 1.4rem var(--display); color: rgba(var(--fg-rgb), .7); }
.tcard__open { position: absolute; inset: 0; z-index: 2; display: grid; place-items: end center; padding-bottom: 16px; border: 0; cursor: pointer; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .55)); }
.tcard__play { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 999px; background: rgba(10, 11, 15, .78); color: #fff; font: 700 14px var(--body); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .35s var(--ease), background .3s; }
.tcard__play svg { width: 30px; height: 30px; padding: 8px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 0 var(--tc); animation: playPulse 2.4s infinite; }
@keyframes playPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tc) 70%, transparent); } 70%, 100% { box-shadow: 0 0 0 12px transparent; } }
.tcard__open:hover .tcard__play, .tcard__open:focus-visible .tcard__play { transform: scale(1.08); background: var(--tc); }
.tcard__open:focus-visible { outline: 2px solid var(--accent2); outline-offset: -4px; }
.tcard__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tcard__actions .btn { flex: 1 1 auto; } .tcard__actions svg { width: 16px; height: 16px; }
.tcard__body { padding: 18px 20px 20px; }
.tcard__body h3 { display: flex; align-items: center; gap: 10px; } .tcard__body h3 i { width: 10px; height: 10px; border-radius: 3px; background: var(--tc); box-shadow: 0 0 14px var(--tc); }
.tcard__body p { color: var(--muted); font-size: 14px; margin: 0 0 14px; min-height: 2.8em; }

/* Bento */
.bento-sec { padding: 120px 0; background: var(--bg2); border-block: 1px solid var(--line); }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.bx { position: relative; overflow: hidden; padding: 26px; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); }
.bx > svg { width: 42px; height: 42px; padding: 10px; border-radius: 13px; background: rgba(var(--fg-rgb), .05); color: var(--accent2); margin-bottom: 18px; }
.bx p { color: var(--muted); font-size: 14.5px; margin: 0; }
.bx--big { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; }
.bx--big h3 { font-size: 1.8rem; } .bx--wide { grid-column: span 2; }
.bx__orb { position: absolute; width: 340px; height: 340px; right: -60px; top: -80px; border-radius: 50%; background: conic-gradient(from 0deg, var(--accent), var(--accent2), #ff2e88, var(--accent)); filter: blur(50px); opacity: .45; animation: spin 14s linear infinite; }
.bx--big > *:not(.bx__orb) { position: relative; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bx--big, .bx--wide { grid-column: auto; } .bx--big { min-height: 280px; } }

/* Compare */
.compare { padding: 130px 0; }
.cmp { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 16px; align-items: stretch; margin-top: 40px; }
.cmp__col { padding: 30px; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); }
.cmp__col ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; font-size: 15px; color: var(--muted); }
.cmp__col li { display: flex; gap: 10px; align-items: flex-start; } .cmp__col li svg { margin-top: 4px; }
.cmp__col li svg path[d^="M6 6"] { color: #ff6b6b; } .cmp__col li svg path[d^="m5 12"] { color: var(--ok); }
.cmp__col--me { position: relative; background: linear-gradient(160deg, rgba(255, 90, 31, .16), rgba(255, 180, 61, .06) 60%, var(--panel)); border-color: rgba(255, 90, 31, .5); box-shadow: 0 40px 90px -40px rgba(255, 90, 31, .6); transform: translateY(-12px); }
.cmp__col--me h3 { font-size: 1.6rem; } .cmp__col--me h3 span { color: var(--accent); } .cmp__col--me ul { color: var(--text); } .cmp__col--me .btn { margin-top: 26px; width: 100%; }
@media (max-width: 860px) { .cmp { grid-template-columns: 1fr; } .cmp__col--me { transform: none; order: -1; } }

/* Steps */
.steps-sec { padding: 40px 0 130px; text-align: center; }
.steps { display: flex; align-items: flex-start; justify-content: center; gap: 0; margin-top: 50px; }
.step { flex: 0 1 260px; padding: 0 12px; }
.step__n { display: inline-grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; font: 800 1.6rem var(--display); background: var(--panel); border: 1px solid var(--line2); margin-bottom: 18px; box-shadow: 0 0 0 8px rgba(var(--fg-rgb), .02); }
.step p { color: var(--muted); margin: 0 0 6px; } .step small { color: var(--accent2); font-weight: 600; }
.step__line { flex: 1 1 80px; height: 2px; margin-top: 33px; background: var(--line); position: relative; overflow: hidden; }
.step__line i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transform: scaleX(0); transform-origin: left; }
@media (max-width: 720px) { .steps { flex-direction: column; align-items: center; } .step__line { width: 2px; height: 40px; flex: none; margin: 10px 0; } }

/* Pricing */
.pricing { padding: 120px 0; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(255, 90, 31, .14), transparent 55%); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; gap: 20px; margin-top: 46px; text-align: left; }
.plan { position: relative; padding: 34px; border-radius: 28px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; }
.plan--hot { background: linear-gradient(var(--panel), var(--panel)) padding-box, conic-gradient(from var(--ang, 0deg), var(--accent), var(--accent2), #ff2e88, var(--accent)) border-box; border: 1.5px solid transparent; animation: ang 6s linear infinite; box-shadow: 0 40px 100px -40px rgba(255, 90, 31, .65); }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ang { to { --ang: 360deg; } }
.plan__tag { position: absolute; top: -13px; right: 26px; padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: linear-gradient(100deg, var(--accent), var(--accent2)); color: #fff; }
.plan__price { margin: 6px 0 4px; }
.plan__setup { margin: 0 0 22px; color: var(--muted); font-size: 14px; } .plan__price b { font: 900 4rem/1 var(--display); letter-spacing: -.03em; } .plan__price span { color: var(--muted); margin-left: 6px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; flex: 1; }
.plan li { display: flex; gap: 10px; color: var(--muted); font-size: 15px; } .plan li svg { color: var(--ok); margin-top: 4px; }
.pricing__note { color: var(--muted); font-size: 14px; margin-top: 26px; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

/* FAQ */
.faq { padding: 60px 0 130px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; cursor: pointer; font: 600 1.15rem var(--display); font-stretch: 106%; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line2); transition: transform .4s var(--ease), background .3s; }
.faq__item summary i::before, .faq__item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; }
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); }
.faq__item p { margin: 0 0 24px; color: var(--muted); max-width: 680px; }

/* Final CTA */
.final { position: relative; padding: 160px 0 170px; text-align: center; overflow: hidden; isolation: isolate; }
.final__glow { position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; z-index: -1; background: conic-gradient(from 0deg, rgba(255, 90, 31, .55), rgba(255, 180, 61, .35), rgba(255, 46, 136, .4), rgba(255, 90, 31, .55)); filter: blur(120px); opacity: .55; animation: spin 18s linear infinite; }
.final__title { font: 900 clamp(2.6rem, 7vw, 6rem)/.95 var(--display); font-stretch: 116%; letter-spacing: -.035em; margin: 0 auto 24px; max-width: 1000px; text-wrap: balance; }
.final .lead { margin: 0 auto 40px; }
.final__small { color: var(--muted); font-size: 14px; margin-top: 18px; }

/* Footer, sticky CTA, modal */
.foot { border-top: 1px solid var(--line); padding: 40px 0 110px; color: var(--muted); font-size: 14px; }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; } .foot nav { display: flex; gap: 20px; } .foot a { text-decoration: none; } .foot p { margin: 0; }
.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: none; transform: translateY(140%); transition: transform .5s var(--ease); }
.sticky-cta .btn { width: 100%; padding: 16px; }
.sticky-cta.is-on { transform: none; }
@media (max-width: 760px) { .sticky-cta { display: block; } }
.modal { overscroll-behavior: contain; position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgba(4, 5, 8, .78); backdrop-filter: blur(8px); }
.modal[hidden] { display: none; }
.modal__box { width: min(1280px, 100%); height: min(860px, 100%); display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #15181f; border: 1px solid var(--line2); box-shadow: 0 60px 140px -20px #000; }
.modal__bar { display: flex; align-items: center; gap: 18px; padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--line); }
.modal__bar b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .modal { padding: 0; } .modal__box { width: 100%; height: 100%; border-radius: 0; } .modal__bar { padding-top: max(12px, env(safe-area-inset-top)); } }
.modal__x { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(var(--fg-rgb), .06); color: var(--text); cursor: pointer; }
.modal__stage { position: relative; flex: 1; }
.modal iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0b0d12; }
/* Loader shown while a demo's 3D scene starts */
.loader { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; color: #f1efe9; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tc, #ff5a1f) 22%, transparent), transparent 60%), #0b0d12; transition: opacity .5s; z-index: 2; }
.loader.is-done { opacity: 0; pointer-events: none; }
.loader b { font: 700 1.15rem var(--display); margin-top: 8px; } .loader small { color: rgba(241, 239, 233, .6); }
.loader__orb { position: relative; width: 84px; height: 84px; }
.loader__orb span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--tc, #ff5a1f); animation: spin 1.1s linear infinite; }
.loader__orb span:nth-child(2) { inset: 12px; border-top-color: #ffb43d; animation-duration: 1.7s; animation-direction: reverse; }
.loader__orb span:nth-child(3) { inset: 26px; border: 0; background: radial-gradient(circle, var(--tc, #ff5a1f), transparent 70%); filter: blur(5px); animation: pulse 1.5s infinite; }
.loader__bar { width: 200px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 8px; }
.loader__bar i { display: block; height: 100%; width: 40%; border-radius: 3px; background: linear-gradient(90deg, var(--tc, #ff5a1f), #ffb43d); animation: loadbar 1.4s ease-in-out infinite; }
@keyframes loadbar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* Reveal fallback when JS is off: everything visible. */
.js [data-reveal] { opacity: 0; transform: translateY(36px); }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } *, *::before, *::after { animation: none !important; } }

/* Logo: "Vitrine." + PRO badge */
.logo { display: inline-flex; align-items: center; white-space: nowrap; }
.logo__pro { display: inline-block; margin-left: .45em; padding: .28em .5em .24em; border-radius: .45em; font: 800 .42em/1 var(--display, "Archivo", sans-serif); font-stretch: 100%; letter-spacing: .14em; color: #fff; background: linear-gradient(100deg, #ff5a1f, #ffb43d); box-shadow: 0 2px 10px -2px rgba(255, 90, 31, .6); transform: translateY(-.35em); }

/* ---------- "Do it yourself" section: animated creation + on-page editor ---------- */
.diy { padding: 130px 0; background: radial-gradient(ellipse at 15% 30%, rgba(255, 90, 31, .1), transparent 55%), var(--bg); }
/* Centred heading above, then steps (left) beside the film (right), vertically centred. */
.diy__head { text-align: center; margin-bottom: 56px; }
.diy__head .h2 { font-size: clamp(2.1rem, 4.4vw, 3.8rem); }
.diy__head .lead { margin: 0 auto; }
.diy__in { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 48px; align-items: center; }
.diy__text .btn { width: 100%; }
@media (max-width: 1000px) { .diy__in { grid-template-columns: minmax(0, 1fr); gap: 28px; } .diy__stage { order: -1; } .diy__head { margin-bottom: 32px; } .diy__text .btn { width: auto; } }
.diy__steps { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.diy__steps li { display: flex; gap: 16px; padding: 16px 18px; border-radius: 18px; border: 1px solid transparent; opacity: .45; transition: all .5s var(--ease); }
.diy__steps li.is-on { opacity: 1; background: rgba(var(--fg-rgb), .04); border-color: var(--line2); }
.diy__steps b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line2); font: 700 14px var(--display); }
.diy__steps li.is-on b { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; color: #fff; box-shadow: 0 0 26px -4px var(--accent); }
.diy__steps h3 { margin: 4px 0 2px; font-size: 1.05rem; } .diy__steps p { margin: 0; color: var(--muted); font-size: 14.5px; }
.diy__stage { perspective: 1600px; }
.diy__browser { box-shadow: 0 50px 110px -40px rgba(0, 0, 0, .9), 0 30px 120px -50px var(--accent); }
.diy__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0d12; }
/* The mock is laid out at 960 × 600 and scaled to the frame (crisp at any width). */
.diy__canvas { position: absolute; top: 0; left: 0; width: 960px; height: 600px; transform-origin: 0 0; font-family: var(--body); color: #f1efe9; }
.dsA, .dsB { position: absolute; inset: 0; }
.dsA { display: grid; grid-template-columns: 1fr 1.05fr; gap: 28px; padding: 34px 36px; background: radial-gradient(ellipse at 85% 10%, rgba(255, 90, 31, .16), transparent 55%), #0a0b0f; }
.dsA__step { margin: 0 0 6px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #ffb43d; font-weight: 600; }
.dsA__q { margin: 0 0 16px; font: 900 34px/1 var(--display); font-stretch: 112%; letter-spacing: -.02em; }
.dsA__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.dsA__tile { position: relative; border-radius: 10px; overflow: hidden; background: #15181f; border: 1px solid rgba(255, 255, 255, .08); transition: box-shadow .3s, border-color .3s; }
.dsA__tile img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.dsA__tile i { display: block; padding: 5px 8px; font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsA__tile.is-on { border-color: var(--tc); box-shadow: 0 0 0 2px var(--tc), 0 12px 30px -10px var(--tc); }
.dsA__field { display: grid; gap: 6px; margin-bottom: 14px; } .dsA__field small { font-size: 12px; font-weight: 600; color: rgba(241, 239, 233, .7); }
.dsA__field span { display: block; height: 46px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); font-size: 17px; font-weight: 600; }
.dsA__field span.is-focus { border-color: #ff5a1f; box-shadow: 0 0 0 4px rgba(255, 90, 31, .18); }
.dsA__field span.is-focus::after { content: "|"; color: #ff5a1f; animation: blink 1s steps(1) infinite; margin-left: 1px; }
.dsA__btn { position: relative; display: block; overflow: hidden; padding: 14px; border-radius: 999px; text-align: center; font-weight: 700; color: #fff; background: linear-gradient(100deg, #ff5a1f, #ffb43d); }
.dsA__btn span { position: relative; z-index: 1; } .dsA__btn i { position: absolute; inset: 0; background: rgba(255, 255, 255, .35); transform: scaleX(0); transform-origin: left; }
.dsA__right { display: flex; flex-direction: column; justify-content: center; }
.dsA__prev { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 20px 70px -30px #0a7fb5; }
.dsA__prev img { display: block; width: 100%; filter: saturate(.2) brightness(.55); transition: filter .8s; }
.dsA__prev.is-live img { filter: none; }
.dsA__brand { position: absolute; left: 3.2%; top: 3.2%; padding: 6px 12px; border-radius: 999px; background: #fff; color: #0b2c3d; font: 800 13px var(--display); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.dsA__live { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font-size: 12px; color: rgba(241, 239, 233, .55); }
.dsA__live span { width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 8px #ff3b30; }
.dsA__done { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; background: rgba(10, 11, 15, .88); backdrop-filter: blur(6px); opacity: 0; }
.dsA__done svg { width: 76px; height: 76px; padding: 18px; border-radius: 50%; background: #1f9d55; color: #fff; box-shadow: 0 0 60px -6px #1f9d55; }
.dsA__done b { font: 900 34px var(--display); } .dsA__done small { color: #b8f5cd; font-size: 15px; font-weight: 600; }
.dsB { opacity: 0; background: #0a0b0f; }
.dsB__bar { position: absolute; z-index: 3; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 14px; border-radius: 999px; background: #111318; box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .1); font-size: 12.5px; white-space: nowrap; }
.dsB__bar b { margin-right: 6px; } .dsB__bar span { padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-weight: 600; }
.dsB__bar .dsB__pub { background: #2563eb; }
.dsB__site { position: absolute; inset: 0; background: radial-gradient(ellipse at 75% 45%, rgba(10, 127, 181, .3), transparent 55%), #0b1219; overflow: hidden; }
.dsB__nav { position: absolute; z-index: 2; top: 62px; left: 36px; right: 36px; display: flex; align-items: center; gap: 22px; padding: 10px 12px 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; color: rgba(255, 255, 255, .75); }
.dsB__nav b { margin-right: auto; color: #fff; font: 800 15px var(--display); } .dsB__nav em { color: #4fc3f7; background: none; -webkit-text-fill-color: currentColor; }
.dsB__nav i { font-style: normal; padding: 7px 14px; border-radius: 999px; background: #0a7fb5; color: #fff; font-weight: 700; }
.dsB__hero { position: absolute; z-index: 2; left: 40px; top: 150px; width: 430px; }
.dsB__eyebrow { margin: 0 0 12px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #ffb43d; font-weight: 700; }
.dsB__title { margin: 0 0 16px; padding: 4px 6px; margin-left: -6px; border-radius: 8px; font: 900 50px/1 var(--display); font-stretch: 110%; letter-spacing: -.03em; color: #fff; outline: 2px dashed transparent; outline-offset: 6px; transition: outline-color .2s, background .2s; }
.dsB__title em { display: block; font-style: italic; background: none; -webkit-text-fill-color: currentColor; color: #4fc3f7; }
.dsB__title.is-hover { outline-color: rgba(59, 130, 246, .8); }
.dsB__title.is-edit { outline: 2px solid #3b82f6; background: rgba(59, 130, 246, .1); }
.dsB__title.is-edit em::after { content: "|"; color: #60a5fa; animation: blink 1s steps(1) infinite; font-style: normal; }
.dsB__sub { margin: 0 0 20px; font-size: 15px; color: rgba(255, 255, 255, .72); line-height: 1.5; }
.dsB__cta { display: inline-block; padding: 12px 20px; border-radius: 999px; background: #0a7fb5; color: #fff; font-weight: 700; font-size: 14px; }
/* Only the 3D subject of the real site: crop away its own menu and captions. */
.dsB__shot { position: absolute; right: 0; top: 118px; width: 470px; height: 482px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%), linear-gradient(0deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 32%); }
.dsB__shot img { position: absolute; width: 980px; max-width: none; left: -470px; top: -70px; }
.dsB__toast { position: absolute; z-index: 4; left: 50%; bottom: 26px; display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: #16a34a; color: #fff; font-weight: 700; font-size: 14px; transform: translate(-50%, 160%); box-shadow: 0 14px 30px rgba(0, 0, 0, .4); }
.dsB__toast svg { width: 18px; height: 18px; }
.diy__cursor { position: absolute; z-index: 10; left: 0; top: 0; width: 30px; height: 30px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); pointer-events: none; }
.diy__ripple { position: absolute; z-index: 9; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); opacity: 0; pointer-events: none; }
.foot__trades { flex-basis: 100%; margin: 10px 0 0; font-size: 12.5px; line-height: 1.9; opacity: .7; }
.foot__trades a { color: inherit; }

/* Mobile menu (no JS: <details>) */
.nav__menu { display: none; position: relative; }
.nav__menu summary { list-style: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line2); cursor: pointer; }
.nav__menu summary::-webkit-details-marker { display: none; }
.nav__menu summary span, .nav__menu summary span::before, .nav__menu summary span::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); position: relative; transition: transform .25s var(--ease), opacity .2s; }
.nav__menu summary span::before, .nav__menu summary span::after { content: ""; position: absolute; left: 0; }
.nav__menu summary span::before { top: -6px; } .nav__menu summary span::after { top: 6px; }
.nav__menu[open] summary span { background: transparent; } .nav__menu[open] summary span::before { transform: translateY(6px) rotate(45deg); } .nav__menu[open] summary span::after { transform: translateY(-6px) rotate(-45deg); }
.nav__drop { position: absolute; right: 0; top: 52px; min-width: 230px; display: grid; padding: 10px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line2); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.nav__drop a { padding: 12px 14px; border-radius: 12px; text-decoration: none; font-weight: 500; }
.nav__drop a:hover, .nav__drop a[aria-current] { background: rgba(var(--fg-rgb), .07); }
.nav__links a[aria-current] { color: var(--text); }
@media (max-width: 900px) { .nav__menu { display: block; order: 3; } }
@media (max-width: 900px) { .nav__in { gap: 10px; } .nav__cta { margin-left: auto; gap: 8px; } }
@media (max-width: 480px) { .nav__cta .theme-toggle { display: none; } .nav__cta .btn--sm { padding: 9px 14px; font-size: 13.5px; } }

/* Contrast (WCAG AA) for small accent texts: darker in the light theme. */
:root { --accent-t: #ff8a5c; --accent2-t: #ffb43d; }
:root[data-theme="light"] { --accent-t: #b93a0b; --accent2-t: #a14a07; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --accent-t: #b93a0b; --accent2-t: #a14a07; } }
.eyebrow, .eyebrow-c { color: var(--accent2-t); }
.foot__trades { opacity: 1; color: var(--muted); }
.post-card span, .hcard i, .prose a, .trade-lp h1 em, .pguide__docs a, .hcrumb a { color: var(--accent-t); }
.hpro, .pub .hpro, .pro-tag { background: #c2410c; color: #fff; }
.foot nav { flex-wrap: wrap; row-gap: 8px; }