:root { --bg:#08090f; --bg2:#0d0f1a; --card:#11131f; --line:rgba(255,255,255,.08); --text:#f3f4ff; --dim:#9da1c4; --accent:#8b7bff; --accent2:#22d3ee; --pink:#f472b6; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:Inter, system-ui, sans-serif; background:var(--bg); color:var(--text); line-height:1.55; overflow-x:hidden; }
a { color:inherit; }
img { display:block; max-width:100%; }
.wrap { max-width:1120px; margin:0 auto; padding:0 20px; }

/* nav */
nav { position:sticky; top:0; z-index:20; backdrop-filter:blur(14px); background:rgba(8,9,15,.6); border-bottom:1px solid var(--line); }
nav .wrap { display:flex; justify-content:space-between; align-items:center; height:64px; }
.logo { font-weight:800; font-size:20px; letter-spacing:-.02em; text-decoration:none; }
.logo span { color:var(--accent); }
.links { display:flex; gap:26px; font-size:14px; color:var(--dim); }
.links a { text-decoration:none; transition:color .2s; }
.links a:hover { color:var(--text); }

/* buttons: shimmer (a light sweeps across) and ghost */
.btn { position:relative; display:inline-flex; align-items:center; gap:8px; overflow:hidden; background:linear-gradient(135deg,#7c6cff,#5b4bff); color:#fff; font-weight:600;
       padding:13px 24px; border-radius:999px; text-decoration:none; box-shadow:0 8px 30px -8px rgba(124,108,255,.65), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .2s; }
.btn:hover { transform:translateY(-2px); }
.btn::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%); transform:translateX(-100%); animation:shimmer 3.2s infinite; }
@keyframes shimmer { 60%,100% { transform:translateX(100%); } }
.btn.ghost { background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--line); }
.btn.ghost::after { display:none; }
.btn.small { padding:9px 18px; font-size:14px; }

/* hero: dot grid that fades out, gradient headline, phones */
header { position:relative; padding:90px 0 70px; }
.dots { position:absolute; inset:0; z-index:-1; background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px); background-size:26px 26px;
        -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%);
        animation:pan 40s linear infinite; }
@keyframes pan { to { background-position:260px 130px; } }
.glow { position:absolute; z-index:-1; width:620px; height:620px; border-radius:50%; filter:blur(110px); opacity:.35; }
.glow.a { background:#5b4bff; top:-180px; left:-160px; }
.glow.b { background:#0e7490; top:80px; right:-220px; opacity:.28; }
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.pill { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--dim); border:1px solid var(--line); background:rgba(255,255,255,.03); padding:6px 14px; border-radius:999px; margin-bottom:22px; }
.pill i { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 10px #22c55e; }
h1 { font-size:clamp(38px,5.6vw,68px); line-height:1.04; letter-spacing:-.04em; font-weight:800; }
.grad { background:linear-gradient(90deg,#a99cff,#22d3ee,#f472b6,#a99cff); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:flow 8s linear infinite; }
@keyframes flow { to { background-position:300% 0; } }
.lead { color:var(--dim); font-size:19px; margin:22px 0 32px; max-width:33em; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; }
.phones { position:relative; height:520px; perspective:1400px; }
.phone { position:absolute; width:220px; aspect-ratio:9/19.5; border-radius:34px; padding:7px; background:linear-gradient(145deg,#2a2c38,#0b0c12); box-shadow:0 40px 80px -20px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.12); }
.phone img { width:100%; height:100%; object-fit:cover; object-position:top; border-radius:28px; }
.phone::before { content:""; position:absolute; top:14px; left:50%; width:62px; height:16px; margin-left:-31px; border-radius:10px; background:#05060a; z-index:2; }
.phones .phone:nth-child(1) { left:0; top:70px; transform:rotateY(18deg) rotateZ(-4deg); animation:float1 7s ease-in-out infinite; }
.phones .phone:nth-child(2) { left:50%; margin-left:-110px; top:0; z-index:2; animation:float2 6s ease-in-out infinite; }
.phones .phone:nth-child(3) { right:0; top:90px; transform:rotateY(-18deg) rotateZ(4deg); animation:float3 8s ease-in-out infinite; }
@keyframes float1 { 50% { transform:rotateY(18deg) rotateZ(-4deg) translateY(-12px); } }
@keyframes float2 { 50% { transform:translateY(-16px); } }
@keyframes float3 { 50% { transform:rotateY(-18deg) rotateZ(4deg) translateY(-10px); } }

/* numbers that count up */
.stats { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:22px; background:rgba(255,255,255,.02); margin-top:30px; }
.stat { padding:26px 22px; text-align:center; }
.stat + .stat { border-left:1px solid var(--line); }
.stat b { display:block; font-size:38px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.stat span { color:var(--dim); font-size:14px; }

section { padding:96px 0 0; }
.kicker { color:var(--accent); font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px; }
h2 { font-size:clamp(30px,3.6vw,44px); letter-spacing:-.03em; line-height:1.1; margin-bottom:12px; }
.sub { color:var(--dim); margin-bottom:36px; max-width:40em; font-size:17px; }

/* cards with a spotlight that follows the mouse */
.card { position:relative; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:26px; overflow:hidden; }
.spot::before { content:""; position:absolute; inset:0; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(139,123,255,.16), transparent 45%); opacity:0; transition:opacity .3s; pointer-events:none; }
.spot:hover::before { opacity:1; }
.card h3 { font-size:19px; margin-bottom:6px; letter-spacing:-.01em; }
.card p, .card li { color:var(--dim); font-size:15px; }
.bento { display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
.bento .wide { grid-column:span 2; }
.bento .full { grid-column:1 / -1; }
.icon { width:46px; height:46px; margin-bottom:16px; }

/* the demos scroll past in phone frames */
.marquee { position:relative; overflow:hidden; padding:10px 0 30px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.track { display:flex; gap:28px; width:max-content; animation:scroll 38s linear infinite; }
.marquee:hover .track { animation-play-state:paused; }
@keyframes scroll { to { transform:translateX(calc(-50% - 14px)); } }
.demo { text-decoration:none; text-align:center; }
.demo .phone { position:relative; width:210px; transition:transform .3s; }
.demo:hover .phone { transform:translateY(-8px); }
.demo span { display:block; margin-top:14px; font-weight:600; font-size:15px; }
.demo small { color:var(--dim); font-size:13px; }

/* apps */
.apps { display:grid; gap:16px; grid-template-columns:1.25fr 1fr; grid-template-rows:auto auto; }
.app { display:flex; gap:22px; align-items:center; }
.app.big { grid-row:span 2; flex-direction:column; align-items:flex-start; justify-content:space-between; }
.app .phone { position:relative; flex:none; width:150px; }
.app.big .phone { width:220px; align-self:center; margin:6px 0 10px; }
.app .halo { position:absolute; width:300px; height:300px; border-radius:50%; filter:blur(70px); opacity:.35; right:-80px; bottom:-90px; pointer-events:none; }
.badge { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.04em; padding:5px 11px; border-radius:999px; margin-bottom:10px; }
.badge.live { color:#4ade80; background:rgba(74,222,128,.1); box-shadow:inset 0 0 0 1px rgba(74,222,128,.3); }
.badge.live i { width:7px; height:7px; border-radius:50%; background:#4ade80; animation:ping 1.6s infinite; }
@keyframes ping { 50% { box-shadow:0 0 0 5px rgba(74,222,128,0); } 0% { box-shadow:0 0 0 0 rgba(74,222,128,.6); } }
.badge.soon { color:var(--dim); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--line); }
.app h3 { font-size:24px; }
.app .tagline { font-weight:600; font-size:14px; margin-bottom:8px; }
.app ul { list-style:none; margin:12px 0 18px; }
.app li { padding:3px 0 3px 22px; position:relative; }
.app li::before { content:"✓"; position:absolute; left:0; color:var(--c); font-weight:800; }

/* prices: a light runs around the border of the popular one */
.prices { display:grid; gap:16px; grid-template-columns:repeat(3,1fr); align-items:stretch; }
.price { font-size:40px; font-weight:800; letter-spacing:-.03em; margin:8px 0 2px; }
.price small { font-size:15px; color:var(--dim); font-weight:600; }
.prices ul { list-style:none; margin-top:16px; }
.prices li { padding:6px 0 6px 26px; position:relative; }
.prices li::before { content:""; position:absolute; left:0; top:11px; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle,var(--accent2) 35%,rgba(34,211,238,.18) 40%); }
.beam { border-color:transparent; background:linear-gradient(var(--card),var(--card)) padding-box, conic-gradient(from var(--a,0deg),transparent 70%,#8b7bff 82%,#22d3ee 90%,transparent 100%) border-box; border:1.5px solid transparent; animation:spin 4s linear infinite; }
@property --a { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes spin { to { --a:360deg; } }
.tag { display:inline-block; font-size:12px; font-weight:700; color:#fff; background:linear-gradient(90deg,#7c6cff,#22d3ee); border-radius:99px; padding:3px 11px; margin-bottom:6px; }
.note { color:var(--dim); font-size:15px; margin-top:22px; max-width:52em; }

.steps { display:grid; gap:16px; grid-template-columns:repeat(3,1fr); counter-reset:s; }
.steps .card h3::before { counter-increment:s; content:counter(s); display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%;
        background:linear-gradient(135deg,#7c6cff,#22d3ee); margin-right:10px; font-size:14px; }
.faq details { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 22px; margin-bottom:10px; }
.faq summary { font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; }
.faq summary::after { content:"+"; color:var(--accent); font-size:20px; line-height:1; transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq p { color:var(--dim); margin-top:10px; }

.contact { position:relative; text-align:center; margin:110px 0 0; padding:80px 24px; border-radius:30px; border:1px solid var(--line); overflow:hidden;
           background:radial-gradient(ellipse at 50% 0%, rgba(124,108,255,.28), transparent 60%), var(--bg2); }
.contact .sub { margin:0 auto 30px; }
.contact .mail { display:block; margin-top:16px; color:var(--dim); font-size:14px; }
footer { color:var(--dim); font-size:14px; padding:40px 0 50px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer nav { position:static; background:none; border:0; backdrop-filter:none; display:flex; gap:18px; }

/* Zeta's motion (motion.js): only with html.motion, so without JS or with reduced motion everything just shows */
.motion .fade { opacity:0; transform:translateY(26px) scale(.97); filter:blur(8px);
                transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1);
                transition-delay:calc(var(--d,0) * 110ms); }
.motion .fade.in { opacity:1; transform:none; filter:none; }
/* headlines: the words blur in one by one, the gradient keyword last */
.motion .w { position:relative; top:.32em; opacity:0; filter:blur(10px);
             transition:opacity .7s cubic-bezier(.16,1,.3,1), filter .7s cubic-bezier(.16,1,.3,1), top .7s cubic-bezier(.16,1,.3,1);
             transition-delay:calc(var(--i) * 75ms + 120ms); }
.motion .in .w { top:0; opacity:1; filter:none; }
/* checklists tick off one by one */
.motion .card li { opacity:0; left:-10px; transition:opacity .5s, left .5s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0) * 110ms + 450ms); }
.motion .card li::before { transform:scale(0); transition:transform .45s cubic-bezier(.34,1.8,.5,1); transition-delay:calc(var(--i,0) * 110ms + 520ms); }
.motion .in li { opacity:1; left:0; }
.motion .in li::before { transform:none; }
/* the hero's specks of light, drifting up */
.specks { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
          -webkit-mask-image:linear-gradient(transparent, #000 25%, #000 70%, transparent); mask-image:linear-gradient(transparent, #000 25%, #000 70%, transparent); }
.specks i { position:absolute; bottom:-10px; width:var(--s); height:var(--s); border-radius:50%; background:#c9c2ff; box-shadow:0 0 8px #a99cff;
            opacity:var(--o); animation:rise var(--t) linear infinite; }
@keyframes rise { from { transform:translateY(0); } to { transform:translateY(-760px); } }

@media (max-width:900px) {
  .hero { grid-template-columns:1fr; } .phones { height:430px; } .phone { width:180px; } .phones .phone:nth-child(2) { margin-left:-90px; }
  .links { display:none; } .bento, .prices, .steps { grid-template-columns:1fr; } .bento .wide, .bento .full { grid-column:auto; }
  .apps { grid-template-columns:1fr; } .app.big { grid-row:auto; } .stats { grid-template-columns:repeat(2,1fr); } .stat:nth-child(3) { border-left:0; }
  .stat:nth-child(n+3) { border-top:1px solid var(--line); }
}
@media (max-width:520px) { .app { flex-direction:column; align-items:flex-start; } .app .phone { align-self:center; } .phones .phone:nth-child(1), .phones .phone:nth-child(3) { width:150px; } }
.lang { font-size:13px; font-weight:700; color:var(--dim); text-decoration:none; border:1px solid var(--line); border-radius:99px; padding:6px 11px; margin-right:10px; }
.lang:hover { color:var(--text); }
.navr { display:flex; align-items:center; }

/* ── the BergBuilds hub (index), project pages and the landing pages (2026-10-08) ───────────────── */
a { text-underline-offset:3px; }
.sub a, .note a, .faq a, .links-inline a, .crumbs a, .prose a { color:#c9c2ff; }
.crumbs { list-style:none; display:flex; flex-wrap:wrap; gap:6px; font-size:13px; color:var(--dim); margin:-40px 0 34px; }
.crumbs li + li::before { content:"›"; margin-right:6px; opacity:.6; }
.crumbs a { text-decoration:none; } .crumbs a:hover { text-decoration:underline; }
.sub-hero { padding:80px 0 30px; }
.hero.solo { grid-template-columns:1fr; max-width:820px; }
.phones.one { height:470px; } .phones.one .phone { left:50%; margin-left:-110px; top:0; transform:none; animation:float2 6s ease-in-out infinite; }

/* the avatar: a glowing ring with chips floating around it (Zeta's cards) */
.me { position:relative; display:grid; place-items:center; min-height:440px; }
.ring { width:min(360px,78vw); aspect-ratio:1; border-radius:50%; padding:6px; background:conic-gradient(from var(--a,0deg),#7c6cff,#22d3ee,#f472b6,#7c6cff); animation:spin 9s linear infinite;
        box-shadow:0 0 80px -10px rgba(124,108,255,.55); }
.ring img { width:100%; height:100%; border-radius:50%; object-fit:cover; border:5px solid var(--bg); }
.chip { position:absolute; font-size:13px; font-weight:600; padding:9px 14px; border-radius:14px; background:rgba(17,19,31,.82); backdrop-filter:blur(10px);
        border:1px solid var(--line); box-shadow:0 14px 30px -12px rgba(0,0,0,.7); white-space:nowrap; }
.chip::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; background:#4ade80; box-shadow:0 0 10px #4ade80; }
.chip.c1 { left:0; top:14%; animation:float2 6s ease-in-out infinite; }
.chip.c2 { right:0; top:46%; animation:float2 7s ease-in-out infinite -2s; } .chip.c2::before { background:#f472b6; box-shadow:0 0 10px #f472b6; }
.chip.c3 { left:6%; bottom:8%; animation:float2 8s ease-in-out infinite -4s; } .chip.c3::before { background:#22d3ee; box-shadow:0 0 10px #22d3ee; }

/* clickable project cards (apps, games, packs, tools): each opens its own page */
.games { display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
.game { display:flex; flex-direction:column; gap:18px; text-decoration:none; color:inherit; }
.game .phone { position:relative; width:170px; align-self:center; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.game:hover .phone { transform:translateY(-8px) rotate(-1.5deg); }
.more-link { display:block; margin-top:auto; padding-top:12px; color:var(--c,#a99cff); font-weight:600; font-size:14px; }
a.app { text-decoration:none; color:inherit; }
.packs { display:grid; gap:16px; grid-template-columns:repeat(4,1fr); }
.pack { text-decoration:none; color:inherit; display:flex; flex-direction:column; padding:0 0 20px; }
.pack img { width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.pack:hover img { transform:scale(1.05); }
.pack h3, .pack p, .pack .more-link { padding-left:20px; padding-right:20px; } .pack h3 { margin-top:16px; }
.tools { display:grid; gap:16px; grid-template-columns:repeat(4,1fr); }
.tool { text-decoration:none; color:inherit; display:flex; flex-direction:column; }
a.card:hover { border-color:rgba(169,156,255,.35); }

/* the businesses block on the hub */
.biz { display:grid; grid-template-columns:1.3fr 1fr; gap:30px; align-items:center; padding:44px;
       background:radial-gradient(ellipse at 0% 0%, rgba(124,108,255,.22), transparent 60%), var(--card); }
.biz .sub { margin-bottom:24px; }
.phones.mini { height:330px; } .phones.mini .phone { width:150px; }
.phones.mini .phone:nth-child(1) { left:8%; top:30px; } .phones.mini .phone:nth-child(2) { left:auto; right:8%; margin:0; top:0; }
.links-inline { margin-top:22px; font-size:14px; color:var(--dim); line-height:2; }

/* devlog: the latest Shorts (a picture first; the YouTube player loads only on a click) */
.shorts { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); margin-bottom:26px; }
.short { position:relative; aspect-ratio:9/16; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#000; cursor:pointer; padding:0; color:#fff; font:inherit; text-align:left; display:block; width:100%; }
.short img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .3s; opacity:.85; }
.short:hover img { transform:scale(1.04); opacity:1; }
.short .t { position:absolute; left:0; right:0; bottom:0; padding:40px 14px 14px; font-weight:700; font-size:15px; line-height:1.25; background:linear-gradient(transparent, rgba(0,0,0,.85)); }
.short .play { position:absolute; left:50%; top:45%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(8px); display:grid; place-items:center; transition:transform .3s; }
.short .play::after { content:""; border-left:18px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent; margin-left:5px; }
.short:hover .play { transform:scale(1.12); }
.shortbox { position:relative; aspect-ratio:9/16; border-radius:20px; overflow:hidden; }
.shortbox iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.social { display:flex; flex-wrap:wrap; gap:12px; }
.social .btn.yt { background:linear-gradient(135deg,#ff3d3d,#c4101b); box-shadow:0 8px 30px -8px rgba(255,61,61,.6); }
.social .btn.ig { background:linear-gradient(135deg,#f58529,#dd2a7b 50%,#8134af); box-shadow:0 8px 30px -8px rgba(221,42,123,.6); }

/* project pages */
.project-hero .hero { grid-template-columns:1.2fr .8fr; }
.project-hero .tagline { font-weight:700; color:var(--c,#a99cff); margin:-4px 0 0; font-size:18px; }
.shot { display:grid; place-items:center; }
.shot .phone { position:relative; width:240px; animation:float2 6s ease-in-out infinite; }
.shot .wide { width:100%; max-width:520px; border-radius:22px; border:1px solid var(--line); box-shadow:0 40px 80px -20px rgba(0,0,0,.8); }
.shot .bigicon { width:220px; height:220px; border-radius:48px; display:grid; place-items:center; background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), transparent 60%), var(--card);
                 border:1px solid var(--line); box-shadow:0 0 90px -20px var(--c,#7c6cff); animation:float2 6s ease-in-out infinite; }
.shot .bigicon img { width:120px; height:120px; }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:28px 0 0; }
.facts div { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; font-size:15px; }
.facts b { display:block; font-size:12px; color:var(--dim); font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:4px; }
.prose { max-width:46em; color:var(--dim); font-size:17px; } .prose p + p { margin-top:14px; } .prose b { color:var(--text); }
.checks ul { list-style:none; } .checks li { padding:10px 0 10px 34px; position:relative; border-bottom:1px solid var(--line); }
.checks li:last-child { border-bottom:0; }
.checks li::before { content:"✓"; position:absolute; left:0; top:10px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800;
                     color:#0b0c12; background:linear-gradient(135deg,#a99cff,#22d3ee); }
.checks li b { color:var(--text); }
.more { display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
.more a { text-decoration:none; color:inherit; }

/* landing pages */
.trades { display:grid; gap:16px; grid-template-columns:repeat(4,1fr); }
.trade { text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.trade span { margin-top:auto; padding-top:10px; color:#a99cff; font-weight:600; font-size:14px; }
.prices.mini .price { font-size:34px; }
.tablewrap { overflow-x:auto; margin-bottom:20px; border:1px solid var(--line); border-radius:18px; }
.compare { width:100%; border-collapse:collapse; font-size:15px; min-width:620px; }
.compare th, .compare td { text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); }
.compare th { color:var(--dim); font-size:13px; font-weight:600; background:rgba(255,255,255,.03); }
.compare tr:last-child td { border-bottom:0; background:rgba(124,108,255,.08); color:var(--text); font-weight:600; }

/* the sales page's devlog-style pieces: a terminal that runs the SEO check, a chat that types, a progress bar */
.terminal { background:#0a0b12; border:1px solid var(--line); border-radius:18px; overflow:hidden; font:14px/1.7 ui-monospace, "Cascadia Code", Consolas, monospace; box-shadow:0 40px 80px -30px rgba(0,0,0,.9); }
.terminal .bar { display:flex; gap:7px; padding:12px 14px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--line); }
.terminal .bar i { width:11px; height:11px; border-radius:50%; background:#ff5f57; } .terminal .bar i:nth-child(2) { background:#febc2e; } .terminal .bar i:nth-child(3) { background:#28c840; }
.terminal .out { padding:18px 20px; color:#c9cbe4; min-height:320px; }
.terminal .ln { display:block; white-space:pre-wrap; }
.terminal .ok { color:#4ade80; } .terminal .hi { color:#a99cff; } .terminal .dim { color:#6b6f92; }
.motion .terminal .ln { opacity:0; transition:opacity .15s; transition-delay:calc(var(--i) * 160ms + 300ms); }
.motion .in .terminal .ln { opacity:1; }
.seo { display:grid; grid-template-columns:1fr 1.1fr; gap:34px; align-items:center; }
.chat { display:flex; flex-direction:column; gap:12px; max-width:560px; }
.bubble { max-width:85%; padding:13px 17px; border-radius:20px; font-size:15px; line-height:1.45; }
.bubble.q { align-self:flex-start; background:#1c1f30; border-bottom-left-radius:6px; }
.bubble.a { align-self:flex-end; background:linear-gradient(135deg,#7c6cff,#5b4bff); border-bottom-right-radius:6px; }
.motion .bubble { opacity:0; transform:translateY(12px) scale(.96); transition:opacity .5s, transform .5s cubic-bezier(.34,1.56,.64,1); transition-delay:calc(var(--i) * 650ms + 200ms); }
.motion .in .bubble { opacity:1; transform:none; }
.progress { position:fixed; top:0; left:0; height:3px; width:100%; z-index:50; transform-origin:0 50%; transform:scaleX(var(--p,0)); background:linear-gradient(90deg,#7c6cff,#22d3ee,#f472b6); pointer-events:none; }

@media (max-width:900px) {
  .games, .more { grid-template-columns:1fr; } .packs, .tools, .trades { grid-template-columns:repeat(2,1fr); }
  .biz, .seo, .project-hero .hero { grid-template-columns:1fr; } .biz { padding:28px; } .phones.mini { display:none; }
  .me { min-height:380px; } .chip { font-size:12px; } .crumbs { margin-top:-30px; }
}
@media (max-width:520px) { .packs, .tools, .trades { grid-template-columns:1fr; } .chip.c2 { right:-4px; } .chip.c1 { left:-4px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } .fade, .w, .bubble, .terminal .ln, .card li { opacity:1 !important; transform:none !important; filter:none !important; } }