:root {
  --navy-950: #06111c;
  --navy-900: #081827;
  --navy-850: #0b2032;
  --navy-800: #102a40;
  --panel: rgba(14, 39, 59, 0.82);
  --line: rgba(104, 166, 210, 0.18);
  --honey: #f3b52f;
  --honey-bright: #ffd568;
  --amber: #e87816;
  --red: #c73d31;
  --blue: #59a9f8;
  --green: #69c866;
  --parchment: #f3e8c8;
  --parchment-deep: #e5d1a3;
  --ink: #2e281d;
  --cream: #fff6dd;
  --white: #f7fbff;
  --muted: #a9bdd0;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  --radius: 22px;
  --shell: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body {
  margin: 0;
  color: var(--white);
  background: var(--navy-950);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}
body, button, a { -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 999; background: var(--honey); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 800; }
.skip-link:focus { top: 12px; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(6, 17, 28, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px);
}
.nav-wrap { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 950; font-size: 1.35rem; letter-spacing: .02em; color: var(--honey); }
.brand img { width: 44px; height: 44px; object-fit: contain; }
.desktop-nav { display: flex; gap: 30px; align-items: center; margin-left: auto; }
.desktop-nav a { color: #dbe8f2; font-size: .91rem; font-weight: 650; transition: color .2s; }
.desktop-nav a:hover { color: var(--honey-bright); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.theme-toggle { border: 1px solid var(--line); color: var(--white); background: rgba(255,255,255,.04); border-radius: 999px; min-height: 40px; padding: 0 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.theme-toggle:hover { border-color: rgba(243,181,47,.55); }
.menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: transparent; padding: 10px; }
.menu-toggle span { display: block; height: 2px; background: var(--white); margin: 4px 0; border-radius: 3px; }
.mobile-nav { border-top: 1px solid var(--line); padding: 12px 20px 20px; background: rgba(6,17,28,.98); }
.mobile-nav a { display: block; padding: 12px 0; color: #dbe8f2; font-weight: 700; }

.button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 1px solid transparent; border-radius: 13px; font-weight: 850; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.button-primary, .button-small { color: #21190a; background: linear-gradient(135deg, var(--honey-bright), var(--honey) 58%, #e89a1e); box-shadow: 0 12px 30px rgba(243,181,47,.2), inset 0 1px rgba(255,255,255,.55); }
.button-small { min-height: 42px; padding: 0 16px; font-size: .86rem; }
.button-ghost { border-color: rgba(255,255,255,.34); background: rgba(7,24,39,.62); }
.button-full { width: 100%; }

.section-night { position: relative; background: var(--navy-900); }
.parchment { color: var(--ink); position: relative; background-color: var(--parchment); background-image: radial-gradient(rgba(123,87,31,.12) .8px, transparent .8px), linear-gradient(90deg, rgba(255,255,255,.18), transparent 32%, rgba(136,93,32,.05)); background-size: 17px 17px, 100% 100%; }
.parchment::before, .parchment::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, transparent, rgba(125,85,26,.26), transparent); opacity: .55; }
.parchment::before { top: 0; } .parchment::after { bottom: 0; }
.kicker { display: inline-block; margin-bottom: 12px; color: var(--amber); text-transform: uppercase; letter-spacing: .15em; font-size: .76rem; font-weight: 900; }
.section-night .kicker { color: var(--honey); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.03; letter-spacing: -.04em; }
h1 { font-size: clamp(3.2rem, 6.6vw, 6rem); margin-bottom: 24px; font-weight: 950; }
h1 em, h2 em { color: var(--honey); font-style: normal; }
.parchment h2 em { color: var(--amber); }
h2 { font-size: clamp(2.3rem, 4.2vw, 4rem); margin-bottom: 18px; font-weight: 950; }
h3 { font-size: 1.28rem; margin-bottom: 10px; }

.hero { min-height: 820px; padding: 142px 0 90px; overflow: hidden; isolation: isolate; background-image: radial-gradient(circle at 68% 30%, rgba(37,111,161,.24), transparent 35%), linear-gradient(rgba(5,18,30,.82), rgba(5,18,30,.97)), linear-gradient(135deg,#0a243a,#06111c); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .18; background-image: linear-gradient(30deg, transparent 48%, rgba(243,181,47,.32) 49%, rgba(243,181,47,.32) 51%, transparent 52%), linear-gradient(-30deg, transparent 48%, rgba(243,181,47,.2) 49%, rgba(243,181,47,.2) 51%, transparent 52%); background-size: 74px 128px; mask-image: linear-gradient(90deg,transparent 52%,#000); }
.hero-glow { position: absolute; width: 560px; height: 560px; border-radius: 50%; background: rgba(243,181,47,.1); filter: blur(100px); right: -150px; top: 60px; }
.hero-grid { display: grid; grid-template-columns: .78fr 1.52fr; align-items: center; gap: 44px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 21px; padding: 8px 12px; border: 1px solid rgba(243,181,47,.22); border-radius: 999px; background: rgba(243,181,47,.06); color: #f6d78c; font-size: .78rem; font-weight: 800; }
.eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(105,200,102,.1); }
.hero-lead { max-width: 610px; color: #c3d3df; font-size: 1.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 26px; }
.hero-trust { display: flex; gap: 20px; flex-wrap: wrap; color: #a9bfce; font-size: .78rem; font-weight: 750; }
.hero-trust span::before { content: "✓"; color: var(--honey); margin-right: 6px; }
.hero-visual { position: relative; min-height: 610px; display: flex; align-items: center; padding-top: 54px; }
.hero-product-tabs { position: absolute; z-index: 7; top: 8px; right: 0; left: 4%; display: flex; gap: 7px; overflow-x: auto; padding: 3px 10px 10px 2px; scroll-padding-inline: 10px; scrollbar-width: none; }
.hero-product-tabs::-webkit-scrollbar { display: none; }
.hero-product-tab { flex: 0 0 auto; padding: 9px 12px; color: #9fb6c7; border: 1px solid rgba(151,184,207,.22); border-radius: 10px; background: rgba(8,27,43,.72); font: inherit; font-size: .69rem; font-weight: 850; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.hero-product-tab:hover { color: #fff; border-color: rgba(243,181,47,.48); transform: translateY(-1px); }
.hero-product-tab.is-active { color: #251a04; border-color: var(--honey); background: var(--honey); }
.product-window { position: relative; z-index: 2; width: 100%; margin-left: auto; border: 1px solid rgba(243,181,47,.38); border-radius: 20px; background: #071827; overflow: hidden; box-shadow: var(--shadow), 0 0 0 8px rgba(255,255,255,.025); transform: perspective(1200px) rotateY(-2deg) rotateX(.5deg); transform-origin: right center; transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s ease, border-color .3s ease; will-change: transform; }
.window-bar { height: 42px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 14px; font-size: .68rem; color: #9eb4c5; background: #0c2234; border-bottom: 1px solid rgba(255,255,255,.07); }
.window-dots { display: flex; gap: 5px; }.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #38556c; }.window-dots i:first-child { background: var(--red); }.window-dots i:nth-child(2) { background: var(--honey); }
.window-live { justify-self: end; color: #86d785; }.window-live i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--green); }
.product-shots { position: relative; display: block; width: 100%; aspect-ratio: 1.44; padding: 0; overflow: hidden; border: 0; color: inherit; background: transparent; cursor: pointer; }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .38s ease, transform .48s ease; }
.shot-scroll { opacity: 0; transform: scale(1.015); }
.product-shots.is-changing .shot { opacity: 0 !important; transform: scale(.985); }
.click-hint { position: absolute; z-index: 4; right: 12px; bottom: 12px; padding: 8px 11px; color: #d7e4ec; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: rgba(5,18,30,.8); backdrop-filter: blur(8px); font-size: .65rem; font-weight: 750; opacity: .78; transition: opacity .2s ease, transform .2s ease; }
.product-shots:hover .click-hint { opacity: 1; transform: translateX(2px); }
@media (hover: hover) and (pointer: fine) {
  .product-window:has(.product-shots:hover) { z-index: 8; border-color: rgba(243,181,47,.72); box-shadow: 0 34px 90px rgba(0,0,0,.58), 0 0 0 8px rgba(243,181,47,.07); transform: perspective(1200px) rotateY(0) rotateX(0) scale(1.105); }
  .product-shots:hover { cursor: zoom-in; }
  .product-shots:hover .click-hint { color: #241a06; border-color: rgba(243,181,47,.72); background: rgba(247,190,54,.94); }
}
.mascot-wrap { position: absolute; z-index: 4; width: 43%; left: -14%; bottom: -3%; aspect-ratio: 1; filter: drop-shadow(0 18px 28px rgba(0,0,0,.45)); }
.mascot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .32s ease, transform .42s cubic-bezier(.2,.8,.2,1); }
.mascot-scroll { opacity: 0; transform: scale(.96); }
.visual-note { position: absolute; z-index: 5; right: -6px; bottom: 20px; padding: 12px 16px; border: 1px solid rgba(243,181,47,.28); border-radius: 13px; background: rgba(7,24,39,.86); box-shadow: 0 14px 35px rgba(0,0,0,.25); backdrop-filter: blur(10px); }
.visual-note strong, .visual-note span { display: block; }.visual-note strong { font-size: .83rem; }.visual-note span { color: var(--honey); font-size: .7rem; }
.hero-bottom { position: absolute; left: -3%; right: -3%; bottom: -25px; height: 54px; background: var(--parchment); transform: rotate(-.7deg); box-shadow: 0 -8px 20px rgba(0,0,0,.18); }

html[data-theme="scroll"] .shot-night, html[data-theme="scroll"] .mascot-night { opacity: 0; transform: scale(.96); }
html[data-theme="scroll"] .shot-scroll, html[data-theme="scroll"] .mascot-scroll { opacity: 1; transform: scale(1); }
html[data-theme="scroll"] .section-night { --panel: rgba(55, 48, 28, .84); background-color: #282719; }
/* The hero's layered night gradients cover background-color. Switch every
   layer with the theme, while retaining the dark/light section rhythm. */
html[data-theme="scroll"] .hero { background-image: radial-gradient(circle at 68% 30%, rgba(211,158,47,.2), transparent 35%), linear-gradient(rgba(40,36,23,.72), rgba(40,39,25,.97)), linear-gradient(135deg,#494025,#282719); }
html[data-theme="scroll"] .hero-lead { color: #e1d5b7; }
html[data-theme="scroll"] .hero-trust { color: #cbbb95; }
html[data-theme="scroll"] .hero .origin-line { color: #c4b58f; }
html[data-theme="scroll"] .hero .button-ghost { border-color: rgba(234,216,173,.34); background: rgba(50,44,25,.72); }
html[data-theme="scroll"] .hero .visual-note { background: rgba(50,44,25,.9); }
html[data-theme="scroll"] .hero .scene-halo { background: radial-gradient(circle,rgba(207,160,58,.16),rgba(40,39,25,0) 63%); }
html[data-theme="scroll"] .site-header { background: rgba(39,36,22,.86); }
html[data-theme="scroll"] .hero-product-tab { color: #e8d8a8; border-color: rgba(239,196,91,.25); background: rgba(50,44,25,.86); }
html[data-theme="scroll"] .hero-product-tab.is-active { color: #2f2107; background: #efb82f; }
html[data-theme="scroll"] .product-window { background: #312e1e; border-color: rgba(239,184,47,.52); }
html[data-theme="scroll"] .window-bar { color: #ead99f; background: #37321e; }
html[data-theme="scroll"] .click-hint { color: #2f2614; border-color: rgba(109,76,20,.2); background: rgba(249,235,190,.9); }

.mode-section { padding: 100px 0 110px; }
.section-heading.centered { max-width: 680px; margin: 0 auto 50px; text-align: center; }.section-heading p { color: #6d624d; }
.mode-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 16px; }
.mode-card { position: relative; min-height: 245px; padding: 34px; border: 1px solid rgba(102,72,27,.2); border-radius: var(--radius); background: rgba(255,250,232,.62); box-shadow: 0 17px 40px rgba(81,56,18,.09); }
.mode-card.featured { background: #fff8df; transform: translateY(-8px); box-shadow: 0 20px 50px rgba(175,105,18,.16); }
.mode-number { position: absolute; top: 18px; right: 20px; color: rgba(77,56,27,.23); font-weight: 950; }
.mode-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 26px; color: #fff; font-size: 1.45rem; border-radius: 15px; background: linear-gradient(135deg,var(--amber),#a84a0c); box-shadow: 0 11px 25px rgba(213,103,16,.2); }
.mode-portrait { display: block; width: 104px; height: 104px; margin: -10px 0 18px -8px; border: 2px solid rgba(213,103,16,.2); border-radius: 50%; background-color: rgba(255,247,218,.6); background-image: url('assets/bee-play-modes.png'); background-repeat: no-repeat; background-size: 300% 100%; box-shadow: 0 13px 28px rgba(108,65,13,.14); }
.mode-manual { background-position: 0 center; }
.mode-assisted { background-position: 50% center; }
.mode-automated { background-position: 100% center; }
.mode-card:hover .mode-portrait { transform: translateY(-3px) scale(1.035); box-shadow: 0 17px 34px rgba(108,65,13,.2); }
.mode-portrait { transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease; }
.mode-card p { margin-bottom: 0; color: #655b49; font-size: .92rem; }
.flow-arrow { color: var(--amber); font-size: 2rem; font-weight: 300; }

.features { padding: 115px 0; overflow: hidden; }
.features::before, .pricing::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(circle at 15% 15%,rgba(243,181,47,.2),transparent 22%), linear-gradient(30deg,transparent 48%,rgba(65,137,185,.28) 49%,rgba(65,137,185,.28) 51%,transparent 52%); background-size: auto, 74px 128px; mask-image: linear-gradient(90deg,#000,transparent 45%); }
.section-heading.split { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 70px; margin-bottom: 50px; }
.section-heading.split p { color: var(--muted); max-width: 510px; }
.feature-grid { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.feature-card { min-height: 220px; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(150deg,rgba(17,47,69,.92),rgba(7,25,40,.82)); box-shadow: 0 18px 50px rgba(0,0,0,.16); }
.feature-card p { color: var(--muted); font-size: .87rem; margin-bottom: 0; }
.feature-wide { grid-column: span 2; display: flex; justify-content: space-between; gap: 30px; }
.feature-icon { display: grid; place-items: center; width: 43px; height: 43px; margin-bottom: 24px; border-radius: 12px; color: #261b05; background: var(--honey); font-size: 1.25rem; font-weight: 900; }
.feature-icon.green { background: var(--green); }.feature-icon.red { background: #e56457; }.feature-icon.blue { background: var(--blue); }.feature-icon.amber { background: #ee8b22; }
.status-pill { display: inline-block; margin-top: 20px; padding: 5px 9px; color: #f8d185; border: 1px solid rgba(243,181,47,.24); border-radius: 999px; font-size: .64rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.mini-accounts { display: flex; align-items: center; align-self: center; padding-right: 12px; }.mini-accounts span, .mini-accounts i { display: grid; place-items: center; width: 48px; height: 48px; margin-left: -10px; border: 3px solid var(--navy-850); border-radius: 50%; color: #251b06; background: var(--honey); font-weight: 950; font-style: normal; }.mini-accounts i { background: #1d3d54; color: #b9cad5; }
.organizer-lines { align-self: center; width: 35%; }.organizer-lines i { display: block; height: 10px; margin: 12px 0; border-radius: 10px; background: linear-gradient(90deg,var(--honey),rgba(243,181,47,.08)); }.organizer-lines i:nth-child(2) { width: 76%; }.organizer-lines i:nth-child(3) { width: 54%; }
.bee-feature-grid { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.bee-feature-card { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 18px; min-height: 144px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(150deg,rgba(17,47,69,.94),rgba(7,25,40,.86)); box-shadow: 0 18px 50px rgba(0,0,0,.16); }
.bee-feature-card h3 { margin-bottom: 7px; font-size: 1.02rem; letter-spacing: -.025em; }
.bee-feature-card p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.feature-portrait { display: block; width: 92px; height: 92px; border: 2px solid rgba(243,181,47,.36); border-radius: 50%; background-image: url('assets/bee-feature-scenes.png'); background-repeat: no-repeat; background-size: 300% 200%; box-shadow: 0 10px 25px rgba(0,0,0,.28); }
.portrait-multi { background-position: 0 0; }.portrait-map { background-position: 50% 0; }.portrait-harvest { background-position: 100% 0; }.portrait-combat { background-position: 0 100%; }.portrait-inventory { background-position: 50% 100%; }.portrait-hdv { background-position: 100% 100%; }
.portrait-proxy { background-position: 0 0; }
.network-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.network-tags i { padding: 3px 6px; color: #f7cd68; border: 1px solid rgba(243,181,47,.26); border-radius: 6px; background: rgba(243,181,47,.07); font-size: .58rem; font-style: normal; font-weight: 900; letter-spacing: .04em; }
html[data-theme="scroll"] .bee-feature-card { border-color: rgba(224,178,64,.24); background: linear-gradient(150deg,rgba(66,58,31,.96),rgba(43,40,24,.92)); }

.difference { padding: 104px 0; overflow: hidden; }
.difference-grid { display: grid; grid-template-columns: .68fr 1.32fr; gap: 72px; align-items: center; }
.difference-mascot { position: relative; height: 440px; }.difference-mascot::before { content: ""; position: absolute; inset: 12% 4%; border-radius: 50%; background: rgba(232,120,22,.13); filter: blur(15px); }.difference-mascot img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 30px rgba(74,45,11,.18)); }
.difference-copy { max-width: 720px; }.difference-copy > p { color: #615543; font-size: 1.04rem; }.difference-callout { padding: 18px 20px; border-left: 4px solid var(--amber); border-radius: 0 12px 12px 0; background: rgba(255,255,255,.38); }
.difference-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }.difference-points span { padding: 8px 11px; border: 1px solid rgba(93,64,23,.18); border-radius: 9px; background: rgba(255,255,255,.34); font-size: .75rem; font-weight: 800; }

.pricing { padding: 115px 0; overflow: hidden; }
.pricing-grid { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 88px; }
.pricing-copy > p { max-width: 510px; color: var(--muted); }.beta-roadmap { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: start; max-width: 520px; margin: 35px 0 25px; }.road-step { display: grid; justify-items: center; gap: 8px; color: #6f8798; font-size: .72rem; font-weight: 750; }.road-step i { display: block; width: 20px; height: 20px; border: 5px solid #244259; border-radius: 50%; background: var(--navy-950); }.road-step.active { color: #f5d27b; }.road-step.active i { border-color: var(--honey); }.road-line { height: 3px; margin-top: 9px; background: #244259; }.road-line.active { background: var(--honey); }.discord-note { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); font-size: .84rem; }
.price-card { position: relative; padding: 40px; color: var(--ink); border: 1px solid rgba(243,181,47,.72); border-radius: 26px; background: var(--parchment); background-image: radial-gradient(rgba(123,87,31,.1) .8px,transparent .8px); background-size: 17px 17px; box-shadow: 0 30px 80px rgba(0,0,0,.4),0 0 0 8px rgba(243,181,47,.05); }
.price-ribbon { display: inline-block; margin: -58px 0 25px; padding: 11px 16px; color: #fff8de; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; background: linear-gradient(135deg,#d95920,var(--amber)); box-shadow: 0 12px 25px rgba(216,82,27,.25); text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; font-weight: 950; }
.old-price { color: #81745d; font-size: 1.05rem; text-decoration: line-through 2px var(--red); }.current-price { display: flex; align-items: baseline; gap: 8px; margin: 3px 0; }.current-price strong { color: #d96214; font-size: clamp(3.5rem,7vw,5.7rem); line-height: 1; letter-spacing: -.07em; }.current-price span { font-weight: 850; }.price-top p { margin: 8px 0 2px; font-weight: 900; }.price-top small { color: #766b58; }.price-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; list-style: none; padding: 25px 0; margin: 24px 0; border-top: 1px solid rgba(91,65,27,.15); }.price-list li { position: relative; padding-left: 23px; font-size: .82rem; font-weight: 650; }.price-list li::before { content: "✓"; position: absolute; left: 0; color: var(--amber); font-weight: 950; }.price-fine { text-align: center; color: #7a6b54; font-size: .68rem; margin: 12px 0 0; }

.faq { padding: 110px 0; }.faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 80px; }.faq .section-heading p { max-width: 380px; }.faq-list details { border-bottom: 1px solid rgba(92,66,29,.2); }.faq-list summary { position: relative; padding: 23px 44px 23px 0; list-style: none; cursor: pointer; font-weight: 850; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { content: "+"; position: absolute; right: 5px; top: 18px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(95,67,25,.2); border-radius: 50%; color: var(--amber); font-size: 1.25rem; }.faq-list details[open] summary::after { content: "−"; }.faq-list details p { padding-right: 50px; color: #6b5e49; }

.final-cta { padding: 80px 0; overflow: hidden; }.final-card { min-height: 390px; display: grid; grid-template-columns: 1fr .6fr; align-items: center; padding: 55px 65px; border: 1px solid rgba(243,181,47,.32); border-radius: 30px; background: radial-gradient(circle at 80% 50%,rgba(243,181,47,.18),transparent 30%),linear-gradient(135deg,#102b41,#071624); overflow: hidden; }.final-card p { color: var(--muted); max-width: 590px; }.final-card img { align-self: end; max-height: 350px; object-fit: contain; filter: drop-shadow(0 16px 35px rgba(0,0,0,.42)); }

.site-footer { padding: 64px 0 25px; color: #a8bac7; background: #050e17; border-top: 1px solid rgba(255,255,255,.06); }.footer-grid { display: grid; grid-template-columns: 1.2fr .6fr .6fr 1.5fr; gap: 42px; }.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 8px; }.footer-grid strong { color: #f3f6f8; margin-bottom: 5px; }.footer-grid a, .footer-grid p { color: #879dab; font-size: .78rem; }.footer-grid a:hover { color: var(--honey); }.footer-brand p { margin-top: 14px; max-width: 250px; }.legal p { line-height: 1.65; }.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 42px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.06); font-size: .72rem; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1040px) {
  .desktop-nav, .theme-label { display: none; }
  .hero { min-height: auto; padding-top: 125px; }
  .hero-grid { grid-template-columns: 1fr; }.hero-copy { max-width: 780px; }.hero-visual { min-height: 680px; max-width: 960px; width: 100%; margin: 0 auto; }.product-window { width: 100%; }.mascot-wrap { width: 35%; left: -4%; }
  .feature-grid { grid-template-columns: repeat(2,1fr); }
  .bee-feature-grid { grid-template-columns: repeat(2,1fr); }
  .pricing-grid { gap: 45px; }
}

@media (max-width: 760px) {
  :root { --shell: min(100% - 28px, 640px); --radius: 17px; }
  .nav-wrap { min-height: 66px; }.nav-actions > .button-small { display: none; }.menu-toggle { display: block; }.brand img { width: 39px; height: 39px; }
  h1 { font-size: clamp(3rem,15vw,4.7rem); }.hero { padding: 112px 0 70px; }.hero-grid { gap: 28px; }.hero-lead { font-size: 1rem; }.hero-actions { display: grid; }.button { width: 100%; }.hero-trust { gap: 8px 14px; }
  .hero-visual { min-height: 510px; padding-top: 62px; }.hero-product-tabs { left: 0; }.product-window { width: 100%; transform: none; border-radius: 13px; }.product-shots { aspect-ratio: 1.2; }.shot { object-position: center top; }.window-bar { height: 34px; }.mascot-wrap { width: 36%; left: -5%; bottom: -4%; }.visual-note { right: 0; bottom: 3px; }.click-hint { right: 7px; bottom: 7px; padding: 6px 8px; font-size: .58rem; }.hero-bottom { bottom: -33px; }
  .mode-section, .features, .difference, .pricing, .faq { padding: 80px 0; }.mode-flow { grid-template-columns: 1fr; }.flow-arrow { transform: rotate(90deg); justify-self: center; }.mode-card, .mode-card.featured { min-height: auto; transform: none; }.mode-portrait { width: 92px; height: 92px; }
  .section-heading.split { grid-template-columns: 1fr; gap: 8px; }.feature-grid, .bee-feature-grid { grid-template-columns: 1fr; }.feature-wide { grid-column: auto; }.feature-card { min-height: auto; }.mini-accounts { display: none; }
  .difference-grid { grid-template-columns: 1fr; gap: 15px; }.difference-mascot { height: 310px; order: 2; }.difference-copy { order: 1; }
  .pricing-grid, .faq-grid { grid-template-columns: 1fr; gap: 55px; }.price-card { padding: 32px 23px 24px; }.price-list { grid-template-columns: 1fr; }.current-price strong { font-size: 4rem; }
  .final-card { grid-template-columns: 1fr; padding: 38px 26px 0; }.final-card img { max-height: 280px; margin: 20px auto 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }.footer-brand, .legal { grid-column: span 2; }.footer-bottom { flex-direction: column; }
}

@media (max-width: 440px) {
  h1 { font-size: 3.05rem; }.hero-visual { min-height: 440px; }.visual-note { display: none; }.mascot-wrap { width: 36%; }.hero-product-tab { padding: 8px 10px; font-size: .64rem; }.product-shots { aspect-ratio: 1.08; }.bee-feature-card { grid-template-columns: 74px 1fr; }.feature-portrait { width: 74px; height: 74px; }.feature-wide { display: block; }.organizer-lines { display: none; }.difference-points { display: grid; }.footer-grid { grid-template-columns: 1fr; }.footer-brand, .legal { grid-column: auto; }
}

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

/* Immersive, performance-first depth system */
html { scroll-behavior: smooth; }
body { overflow-x: clip; }

.scroll-progress { position: fixed; z-index: 100; inset: 0 0 auto; height: 3px; pointer-events: none; background: rgba(255,255,255,.025); }
.scroll-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#ef8d18,#f7c342,#fff0a6); transform: scaleX(var(--page-progress,0)); transform-origin: left center; box-shadow: 0 0 16px rgba(247,195,66,.65); will-change: transform; }

.ambient-stage { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; contain: strict; }
main,.site-header,.site-footer { position: relative; z-index: 1; }
.ambient-orb { position: absolute; width: 34rem; aspect-ratio: 1; border-radius: 50%; opacity: .12; filter: blur(85px); transform: translate3d(0,0,0); will-change: transform; transition: background-color .55s ease,opacity .55s ease; }
.orb-one { left: -18rem; top: 8vh; background: #ee981f; animation: ambient-drift-one 18s ease-in-out infinite alternate; }
.orb-two { right: -20rem; top: 38vh; background: #1479b8; animation: ambient-drift-two 23s ease-in-out infinite alternate; }
.orb-three { left: 35vw; bottom: -27rem; background: #f5c443; animation: ambient-drift-one 28s ease-in-out infinite alternate-reverse; }
.dust { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #ffd86a; opacity: .28; box-shadow: 0 0 12px #f8b82e; animation: dust-rise 13s linear infinite; }
.dust-1 { left: 8%; top: 78%; animation-delay: -2s; }.dust-2 { left: 23%; top: 52%; animation-delay: -7s; }
.dust-3 { left: 48%; top: 84%; animation-delay: -4s; }.dust-4 { left: 66%; top: 61%; animation-delay: -10s; }
.dust-5 { left: 82%; top: 73%; animation-delay: -5s; }.dust-6 { left: 92%; top: 43%; animation-delay: -12s; }
html[data-theme="scroll"] .orb-one { background: #d9770b; opacity: .09; }
html[data-theme="scroll"] .orb-two { background: #8a6a27; opacity: .08; }
html[data-theme="scroll"] .orb-three { background: #efc85e; opacity: .1; }
html.is-theme-shifting main { animation: theme-breathe .52s ease both; }

.hero { perspective: 1500px; }
.hero-copy { position: relative; z-index: 10; }
.hero-copy::before { content: ""; position: absolute; z-index: -1; width: 320px; aspect-ratio: 1; left: -150px; top: 3%; opacity: .13; background: repeating-conic-gradient(from 30deg,rgba(245,185,48,.8) 0 60deg,transparent 60deg 120deg); clip-path: polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%); transform: rotate(-12deg); }
.origin-line { display: flex; align-items: center; gap: 10px; max-width: 520px; margin: 22px 0 0; color: #8fa9bb; font-size: .75rem; line-height: 1.45; }
.origin-line span { flex: 0 0 auto; padding: 5px 8px; border: 1px solid rgba(243,181,47,.35); border-radius: 999px; color: #f4c34f; background: rgba(243,181,47,.08); font-weight: 850; }

.hero-visual { isolation: isolate; transform-style: preserve-3d; }
.scene-halo { position: absolute; z-index: -1; width: 82%; aspect-ratio: 1; right: -6%; top: 1%; border-radius: 50%; border: 1px solid rgba(245,190,54,.15); background: radial-gradient(circle,rgba(29,111,166,.15),rgba(7,24,39,0) 63%); box-shadow: inset 0 0 0 42px rgba(255,255,255,.012),inset 0 0 0 43px rgba(245,190,54,.07); transform: translate3d(var(--scene-x,0),calc(var(--scene-y,0) + var(--scroll-shift,0px)),0); transition: border-color .45s ease; }
.honey-orbit { position: absolute; z-index: 1; width: 78%; aspect-ratio: 1; right: 1%; top: 2%; border: 1px dashed rgba(247,195,66,.18); border-radius: 50%; transform: translate3d(var(--scene-x,0),calc(var(--scene-y,0) + var(--scroll-shift,0px)),30px) rotate(7deg); animation: orbit-turn 38s linear infinite; }
.honey-orbit i { position: absolute; width: 17px; aspect-ratio: 1; clip-path: polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%); background: linear-gradient(145deg,#ffe680,#d9890f); box-shadow: 0 0 20px rgba(245,185,48,.55); }
.honey-orbit i:nth-child(1){left:8%;top:25%}.honey-orbit i:nth-child(2){right:5%;top:48%;width:11px}.honey-orbit i:nth-child(3){left:47%;bottom:-7px;width:9px}
.bee-coin { position: absolute; z-index: 6; right: -16px; top: 21%; width: 62px; aspect-ratio: 1; padding: 5px; border-radius: 50%; background: linear-gradient(145deg,#ffe783,#9c5800); box-shadow: 0 14px 32px rgba(0,0,0,.38),0 0 26px rgba(245,185,48,.3); transform: translate3d(var(--scene-x,0),calc(var(--scene-y,0) + var(--scroll-shift,0px)),70px); animation: coin-float 5s ease-in-out infinite; }
.bee-coin::before { content:""; position:absolute; inset:6px; border:1px solid rgba(76,40,0,.55); border-radius:50%; }
.bee-coin span { position:relative; display:grid; height:100%; place-items:center; color:#3b2100; font:900 1.35rem/1 Georgia,serif; text-shadow:0 1px rgba(255,255,255,.5); }

[data-depth] { will-change: transform; }
.product-window[data-tilt] { --base-rotate-y: -2deg; transform: perspective(1200px) rotateX(calc(.5deg + var(--tilt-x,0deg))) rotateY(calc(var(--base-rotate-y) + var(--tilt-y,0deg))) translate3d(0,var(--scroll-shift,0px),0); }
[data-tilt] { transform-style: preserve-3d; backface-visibility: hidden; }
.mode-card[data-tilt],.bee-feature-card[data-tilt],.price-card[data-tilt] { transform: perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--lift,0)); transition: transform .24s ease,box-shadow .28s ease,border-color .28s ease; }
.mode-card.featured[data-tilt] { --lift: -8px; }
.mode-card[data-tilt]::after,.bee-feature-card[data-tilt]::after,.price-card[data-tilt]::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; background:radial-gradient(280px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(255,226,139,.22),transparent 55%); transition:opacity .25s ease; }
.mode-card[data-tilt]:hover::after,.bee-feature-card[data-tilt]:hover::after,.price-card[data-tilt]:hover::after { opacity:1; }
.bee-feature-card[data-tilt],.price-card[data-tilt] { position:relative; }
.bee-feature-card[data-tilt]:hover { border-color:rgba(243,181,47,.45); box-shadow:0 24px 62px rgba(0,0,0,.26); }
.mode-card[data-tilt]:hover { box-shadow:0 24px 54px rgba(109,69,18,.16); }

.origin-note { margin: 22px 0 24px; padding: 18px 20px 18px 54px; border: 1px solid rgba(129,89,27,.2); border-radius: 16px; background: rgba(255,255,255,.42); position: relative; }
.origin-note::before { content:""; position:absolute; left:18px; top:19px; width:22px; aspect-ratio:1; background:#e68a13; clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%); box-shadow:0 0 16px rgba(225,128,10,.3); }
.origin-note strong { color:#b75a00; }
.opening-badge { display:inline-flex; padding:7px 10px; border:1px solid rgba(149,95,13,.24); border-radius:999px; color:#985300; background:rgba(231,139,21,.1); font-size:.69rem; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.mobile-offer { display:none; }

@keyframes orbit-turn { to { rotate: 360deg; } }
@keyframes coin-float { 0%,100% { margin-top:0; } 50% { margin-top:-12px; } }
@keyframes dust-rise { 0% { translate:0 10vh; opacity:0; } 18% { opacity:.28; } 80% { opacity:.16; } 100% { translate:24px -32vh; opacity:0; } }
@keyframes ambient-drift-one { to { transform:translate3d(7vw,5vh,0) scale(1.08); } }
@keyframes ambient-drift-two { to { transform:translate3d(-8vw,-6vh,0) scale(.92); } }
@keyframes theme-breathe { 50% { filter:saturate(.82) brightness(1.06); } }

@media (hover:hover) and (pointer:fine) {
  .product-window[data-tilt]:hover { --base-rotate-y: 0deg; box-shadow:0 38px 90px rgba(0,0,0,.48),0 0 0 8px rgba(243,181,47,.045); }
}

@media (max-width:1040px) {
  .bee-coin { right:4px; top:19%; width:52px; }
  .honey-orbit { width:88%; right:-4%; }
  .origin-line { align-items:flex-start; }
}

@media (min-width:761px) and (max-width:1700px) {
  .hero-visual { padding-top:100px; }
  .hero-product-tabs { left:0; display:grid; grid-template-columns:repeat(4,max-content); justify-content:end; overflow:visible; }
  .hero-product-tab:nth-child(5) { grid-column:2; }
}

@media (max-width:760px) {
  body { padding-bottom:70px; }
  .ambient-orb { width:25rem; filter:blur(72px); }
  .dust:nth-of-type(n+5) { display:none; }
  .hero { perspective:none; }
  .hero-copy::before { width:210px; left:-120px; opacity:.09; }
  .origin-line { font-size:.7rem; }
  .origin-line span { white-space:nowrap; }
  .scene-halo { width:95%; right:-7%; top:7%; }
  .honey-orbit { width:96%; right:-8%; top:8%; opacity:.62; }
  .bee-coin { width:44px; right:2px; top:18%; }
  .product-window[data-tilt],.mode-card[data-tilt],.mode-card.featured[data-tilt],.bee-feature-card[data-tilt],.price-card[data-tilt] { transform:none; }
  .mobile-offer { position:fixed; z-index:90; left:10px; right:10px; bottom:max(10px,env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; min-height:58px; padding:9px 13px 9px 16px; color:#241700; border:1px solid rgba(255,238,174,.85); border-radius:16px; background:linear-gradient(135deg,#ffd25d,#f2a617); box-shadow:0 16px 42px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.6); text-decoration:none; }
  .mobile-offer span { display:grid; }.mobile-offer strong { font-size:.8rem; }.mobile-offer small { font-size:.64rem; opacity:.68; }.mobile-offer b { font-size:1.08rem; }.mobile-offer i { font-style:normal; margin-left:6px; }
  .origin-note { padding-left:48px; font-size:.88rem; }
}

@media (prefers-reduced-motion:reduce) {
  .ambient-orb,.dust,.honey-orbit,.bee-coin { animation:none!important; }
  [data-depth],[data-tilt],.product-window[data-tilt] { transform:none!important; }
}