/* Eddie's own look, on top of home-dark.css: black, the app icon's pink-to-violet gradient (no coral, no red), chunky friendly type,
   sticker buttons, and very little empty floor. Every colour comes from these tokens, so a theme is
   just a different set of them (themes.js switches data-theme on <html>). */
:root {
  --c1: #ff7a59; --c2: #ff4f8b; --c3: #8e3bd9;
  --accent: #ff5c93; --on-g: #fff; --bg: #000; --panel: #141216; --panel-2: #1e1a22;
  --g: linear-gradient(100deg, var(--c1), var(--c2) 48%, var(--c3));
  --wall: radial-gradient(60% 70% at 78% 12%, var(--c1) 0%, transparent 62%), radial-gradient(70% 80% at 20% 35%, var(--c2) 0%, transparent 68%), radial-gradient(80% 80% at 60% 100%, var(--c3) 0%, transparent 70%), #120818;
  --link: var(--accent); --blue: var(--c2); --blue-h: var(--c1);
  --coral: var(--c1); --pink: var(--c2); --violet: var(--c3); --red: var(--accent);
  --display: "Bricolage Grotesque", -apple-system, "SF Pro Display", Inter, system-ui, sans-serif;
}
:root[data-theme="christmas"] { --c1: #ff5a5f; --c2: #d90429; --c3: #16803f; --accent: #ff5a5f; --bg: #050d09; --panel: #0e1a14; --panel-2: #16261d; --wall: radial-gradient(60% 70% at 78% 12%, #d90429 0%, transparent 62%), radial-gradient(70% 80% at 20% 75%, #16803f 0%, transparent 66%), #06140d; }
:root[data-theme="diwali"] { --c1: #ffc300; --c2: #fb5607; --c3: #c9184a; --accent: #ffb703; --bg: #120604; --panel: #211009; --panel-2: #2e170d; --wall: radial-gradient(60% 70% at 75% 15%, #ffb703 0%, transparent 60%), radial-gradient(70% 80% at 20% 40%, #fb5607 0%, transparent 66%), radial-gradient(80% 80% at 60% 100%, #c9184a 0%, transparent 70%), #1a0704; }
:root[data-theme="halloween"] { --c1: #ffa200; --c2: #ff6a00; --c3: #6a0dad; --accent: #ff8c1a; --bg: #0a0510; --panel: #170d20; --panel-2: #21132e; --wall: radial-gradient(45% 50% at 78% 18%, #ffb347 0%, transparent 60%), radial-gradient(80% 80% at 25% 80%, #6a0dad 0%, transparent 70%), #0d0616; }

html, body { background: var(--bg); transition: background .4s; }
.wrap { width: min(1180px, 100% - 2 * var(--gutter)); }
.h2, h1, h3, .brand, .pcard2 .h2 { font-family: var(--display); }
.h2 { font-size: clamp(28px, 3.3vw, 42px); font-weight: 700; letter-spacing: -.025em; }
.g-text { background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Sticker buttons: they squash when you press them. */
.btn { font-weight: 600; transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), filter .2s, background .2s; }
.btn-blue, .btn-blue:hover { background: var(--g); color: var(--on-g); box-shadow: 0 4px 0 color-mix(in srgb, var(--c3) 62%, #000); }
.btn-blue:hover { transform: translateY(-2px) rotate(-1deg); filter: brightness(1.08); box-shadow: 0 6px 0 color-mix(in srgb, var(--c3) 62%, #000); }
.btn-blue:active { transform: translateY(3px) scale(.98); box-shadow: 0 1px 0 color-mix(in srgb, var(--c3) 62%, #000); }
.nav .wrap { width: min(760px, 100% - 2 * var(--gutter)); }
.nav-buy { display: flex; align-items: center; gap: 8px; }
.nav-buy .btn { box-shadow: none; }
.nav-buy .btn:hover { box-shadow: none; }
.nav-links a.on { color: var(--accent); }

/* ─── First screen ─── */
.hero2 { min-height: 0; padding: 22px 0 26px; }
.hero2-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
.hero2 h1 { font-size: clamp(38px, 4.3vw, 58px); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; }
.scrib { position: relative; display: inline-block; background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .1em; }
.scrib::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .12em; background: var(--g); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M3 12C60 4 120 3 180 6c40 2 80 3 117-1' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M3 12C60 4 120 3 180 6c40 2 80 3 117-1' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.hero2-sub { color: #cfcdd4; font-size: 17.5px; }
.hero2-try { color: var(--accent); font-weight: 500; }
.hero2-fine b { color: #f5f5f7; }

/* A real MacBook: thin black bezel, the notch in the screen, the model name, a tapered base with its scoop. */
.mbp { margin: 0 14px; filter: drop-shadow(0 26px 34px color-mix(in srgb, var(--c2) 26%, transparent)); }
.mbp-lid { position: relative; padding: 8px 8px 17px; border-radius: 16px 16px 0 0; background: #050506; box-shadow: inset 0 0 0 1.5px #55565c, inset 0 0 0 3px #111113; }
.mbp-name { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: 9px; color: #8b8c92; letter-spacing: .02em; }
.mbp-base { position: relative; height: 13px; margin: 0 -14px; border-radius: 2px 2px 14px 14px; background: linear-gradient(180deg, #e4e5e9 0, #c6c8cd 30%, #8d8f95 78%, #5d5f64 100%); }
.mbp-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 104px; height: 6px; margin-left: -52px; border-radius: 0 0 7px 7px; background: linear-gradient(180deg, #8d8f95, #b6b8bd); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.demo-scr { aspect-ratio: 16 / 10; border-radius: 8px 8px 2px 2px; box-shadow: none; }
.demo-scr .wall-mac, .wall-mac { background: var(--wall); }
.demo-scr .menubar { background: rgba(10, 4, 14, .32); }
.mb-apple { width: 11px; height: 11px; color: #fff; flex: none; }
.mb-tray { display: inline-flex; align-items: center; gap: 7px; }
.mb-batt { display: inline-block; width: 18px; height: 9px; border-radius: 2.5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85); position: relative; }
.mb-batt::before { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 10px; border-radius: 1px; background: #fff; }
.demo-term { left: 4%; top: 19%; width: 60%; height: 62%; }
.demo-dock { position: absolute; left: 50%; bottom: 2.2%; transform: translateX(-50%); display: flex; gap: 4px; padding: 3px 5px; border-radius: 10px; background: rgba(255, 255, 255, .17); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .28); z-index: 3; }
.demo-dock i, .demo-dock img { display: block; width: 19px; height: 19px; border-radius: 5px; background: linear-gradient(145deg, var(--a), var(--b)); }
/* What you're doing instead of watching Claude: designing something. No sunsets. */
.demo-canvas { position: absolute; right: 3.5%; top: 34%; width: 37%; height: 48%; border-radius: 9px; overflow: hidden; background: #f6f4f8; color: #1d1d1f; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .2), 0 16px 34px rgba(0, 0, 0, .4); z-index: 2; }
.dc-bar { display: flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px; background: #e9e6ee; font-size: 8.5px; color: #6e6a75; }
.dc-bar u { width: 6px; height: 6px; border-radius: 50%; }
.dc-bar span { margin-left: 5px; }
.dc-board { position: relative; height: calc(100% - 18px); padding: 9px; background-image: radial-gradient(#d6d2dc 1px, transparent 1px); background-size: 10px 10px; }
.dc-card { height: 42%; border-radius: 7px; background: var(--g); }
.dc-line { height: 6px; margin-top: 7px; border-radius: 3px; background: #2a2730; width: 72%; }
.dc-line.s { width: 46%; background: #b9b5c0; margin-top: 5px; }
.dc-btn { display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 99px; background: #1d1d1f; color: #fff; font-size: 8px; font-weight: 600; }
.dc-sel { position: absolute; right: 8%; bottom: 26%; width: 34%; height: 20%; border: 1.2px solid var(--c2); border-radius: 3px; }
.dc-who { position: absolute; right: 0; top: 100%; margin: 2px 0 0; padding: 1px 5px; border-radius: 3px 8px 8px 8px; background: var(--c2); color: #fff; font-size: 7.5px; font-weight: 600; white-space: nowrap; }
/* The "needs you" dot takes the brand colour, not alarm red. */
.dot-red, .demo-scr .dot-red { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
/* Eddie talks. */
.hero-chirp { position: absolute; z-index: 7; left: 57%; top: 12%; max-width: 40%; padding: 6px 11px; border-radius: 14px 14px 14px 3px; background: #fff; color: #1d1d1f; font-size: 12.5px; font-weight: 600; line-height: 1.25; animation: chirp-in .4s cubic-bezier(.34, 1.56, .64, 1); margin: 0; }
@keyframes chirp-in { from { transform: scale(.75); opacity: 0; } }
@media (max-width: 860px) { .hero2-grid { grid-template-columns: 1fr; gap: 22px; } .hero-chirp { font-size: 11px; padding: 4px 8px; left: 60%; top: 16%; } .demo-term { font-size: 8.5px !important; } }

/* The ticker: things Eddie really says. */
.ticker { overflow: hidden; margin: 4px -2% 0; padding: 9px 0; background: var(--g); color: var(--on-g); transform: rotate(-.7deg); font: 700 15.5px/1 var(--display); letter-spacing: -.01em; }
.ticker div { display: flex; width: max-content; gap: 28px; animation: tick 34s linear infinite; }
.ticker span { white-space: nowrap; }
.ticker i { font-style: normal; opacity: .65; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker div { animation: none; } }

/* ─── Sections: tight ─── */
.sec2 { padding: clamp(30px, 3.6vw, 46px) 0; }
.try-sub { color: #cfcdd4; margin: 6px auto 20px; }
.try-note { margin-top: 12px; }
.try-note b { color: #f5f5f7; }
.vs { max-width: none; margin-top: 22px; }
.vs > div { padding: 22px 26px; background: var(--panel); border-radius: 24px; }
.vs-b { background: var(--g) !important; box-shadow: 0 6px 0 color-mix(in srgb, var(--c3) 55%, #000); transform: rotate(.5deg); }
.vs li { font-size: 17px; font-weight: 500; }
.vs-a li { color: #b9b6c0; }
.why-line { margin-top: 18px; color: #a5a2ac; }
.more-grid { margin-top: 22px; }
.more-list button.on { background: var(--panel-2); }
.more-list button.on b { color: var(--accent); }
.more-list button b { font-family: var(--display); font-size: 18px; font-weight: 700; }
.more-list button { padding: 11px 16px; }
.more-view { min-height: 280px; background: var(--wall); border-radius: 22px; }
.cost-row .bar i { background: var(--g); }

.meet2 { background: var(--g); padding: 26px 0; transform: rotate(.5deg); margin: 14px -2%; color: var(--on-g); }
.meet2-grid { transform: rotate(-.5deg); }
.meet2 .h2 { font-size: clamp(30px, 3.8vw, 48px); }
.meet2 p { color: #fff; font-weight: 500; }
.meet2-stage { height: 190px; }
.meet2 .acts button { background: #000; color: #fff; box-shadow: none; font-weight: 600; }
.meet2 .acts button:hover { background: #fff; color: #000; transform: rotate(-2deg) scale(1.04); }
.bubble { font-weight: 700; }

.pcard2 { max-width: none; grid-template-columns: 5fr 6fr; gap: 36px; padding: 0; background: var(--panel); border-radius: 30px; box-shadow: none; overflow: hidden; }
.pcard2-l { padding: 30px 34px; background: var(--g); color: var(--on-g); }
.pcard2 .h2 { font-size: clamp(42px, 5vw, 66px); line-height: .98; letter-spacing: -.04em; }
.pcard2-was, .pcard2-pitch { color: #fff; }
.pcard2-was { font-weight: 500; }
.pcard2-pitch { font-size: 17px; font-weight: 500; }
.pcard2-buy, .pcard2-buy:hover { background: #fff; color: #17121b; box-shadow: 0 4px 0 rgba(0, 0, 0, .42); }
.pcard2-l .hero2-fine { color: rgba(255, 255, 255, .88); }
.pcard2-r { padding: 26px 30px 26px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; align-content: center; }
.pcard2-r li { color: #e8e6ec; }
.pcard2-r li::before { background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10.5 8.2 14.6 16 6' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10.5 8.2 14.6 16 6' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pcard2-r a, .v2-line a { color: var(--accent); }
.v2-line { margin-top: 14px; }
@media (max-width: 720px) { .pcard2 { grid-template-columns: 1fr; gap: 0; } .pcard2-r { padding: 22px; grid-template-columns: 1fr; } }

.faq { max-width: 860px; margin-top: 14px; }
.faq summary { padding: 13px 32px 13px 0; }
.faq details[open] > summary::after { color: var(--accent); }
.faq-more > summary { color: var(--accent); }

.final2 { padding: 30px var(--gutter); margin: 8px auto 34px; width: min(1180px, 100% - 2 * var(--gutter)); border-radius: 30px; background: var(--g); color: var(--on-g); }
.final2 .h2 { font-size: clamp(30px, 4vw, 52px); }
.final2 .ctas { margin-top: 16px; }
.final2 .btn-blue, .final2 .btn-blue:hover { background: #fff; color: #17121b; box-shadow: 0 4px 0 rgba(0, 0, 0, .42); }
.final2 .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }

footer, footer .fbase, footer .fcols { background: var(--bg); }
footer { border-top-color: var(--panel-2); }
footer .wrap { padding: 28px 0 22px; }
.fbase { margin-top: 20px; border-top-color: var(--panel-2); }
.fbase a { color: var(--accent); }

/* ─── The theme button ─── */
.th-wrap { position: relative; }
.et button.th-x { all: unset; }
.th-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 13px; font-weight: 500; transition: background .2s, transform .18s; }
.th-btn:hover { background: rgba(255, 255, 255, .2); transform: rotate(-2deg); }
.th-btn svg { width: 15px; height: 15px; }
.th-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; width: 214px; padding: 7px; border-radius: 20px; background: #1c1a20; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 18px 50px rgba(0, 0, 0, .6); }
.th-menu[hidden] { display: none; }
.th-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 14px; color: #f5f5f7; font-size: 14.5px; font-weight: 500; text-align: left; }
.th-menu button:hover { background: rgba(255, 255, 255, .09); }
.th-menu button[aria-checked="true"] { background: rgba(255, 255, 255, .14); font-weight: 600; }
.th-menu i { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.th-menu small { margin-left: auto; font-size: 11.5px; color: #a5a2ac; font-weight: 400; }

/* ─── Theme decorations ─── */
#thFx { position: fixed; inset: 0; z-index: 52; width: 100%; height: 100%; pointer-events: none; }
.th-top { position: fixed; left: 0; right: 0; top: 0; z-index: 55; height: 92px; pointer-events: none; overflow: hidden; }
.th-floor { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; height: 54px; pointer-events: none; overflow: hidden; }
.th-top svg, .th-floor svg { display: block; width: 100%; height: 100%; }
.th-swing { transform-box: fill-box; transform-origin: 50% 0; animation: th-sway 3.4s ease-in-out infinite alternate; pointer-events: auto; cursor: pointer; }
.th-swing:nth-of-type(2n) { animation-duration: 2.7s; animation-direction: alternate-reverse; }
.th-swing.ring { animation: th-ring .7s ease-in-out; }
@keyframes th-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes th-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(24deg); } 45% { transform: rotate(-20deg); } 70% { transform: rotate(11deg); } }
.th-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: th-flick .55s ease-in-out infinite alternate; }
@keyframes th-flick { from { transform: scale(1, 1); opacity: .92; } to { transform: scale(.86, 1.14); opacity: 1; } }
.th-hat { position: absolute; z-index: 1; display: none; width: 58px; height: 52px; margin: -40px 0 0 -29px; pointer-events: none; }
:root[data-theme="christmas"] .th-hat.christmas, :root[data-theme="halloween"] .th-hat.halloween, :root[data-theme="diwali"] .th-hat.diwali { display: block; }
@media (prefers-reduced-motion: reduce) { .th-swing, .th-flame { animation: none; } }
@media (max-width: 600px) { .th-btn span { display: none; } .th-btn { padding: 0 10px; } .th-top { height: 70px; } .th-floor { height: 40px; } }