/* BergBuilds' own look (the hub and the project pages): casual, light, warm white, with projects that pop in.
   ProjectMu's sales pages keep the dark /style.css. motion.js drives both: .w words, .fade blocks, .in when seen. */
:root { --bg:#fbfaf6; --card:#ffffff; --ink:#1c1b22; --dim:#6c6a75; --line:#ebe8e1; --accent:#6d5cff; --soft:#f3f0ff;
        --shadow:0 1px 2px rgba(28,27,34,.05), 0 8px 24px -10px rgba(28,27,34,.14); --shadow-hi:0 2px 4px rgba(28,27,34,.06), 0 24px 48px -18px rgba(28,27,34,.28);
        --head:"Bricolage Grotesque", Inter, system-ui, sans-serif; --spring:cubic-bezier(.34,1.56,.64,1); --out:cubic-bezier(.16,1,.3,1); }
* { 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(--ink); line-height:1.6; overflow-x:hidden; }
img { display:block; max-width:100%; }
a { color:inherit; text-underline-offset:3px; }
.wrap { max-width:1120px; margin:0 auto; padding:0 20px; }
h1, h2, h3 { font-family:var(--head); letter-spacing:-.02em; line-height:1.05; }

/* nav */
nav { position:sticky; top:0; z-index:20; background:rgba(251,250,246,.8); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
nav .wrap { display:flex; justify-content:space-between; align-items:center; height:64px; gap:16px; }
.logo { font-family:var(--head); font-weight:800; font-size:22px; text-decoration:none; display:flex; align-items:center; }
.logo::before { content:""; width:30px; height:30px; margin-right:9px; border-radius:9px; background:url(/img/favicon.png) center/cover; box-shadow:var(--shadow); }
.logo span { color:var(--accent); }
.links { display:flex; gap:24px; font-size:15px; font-weight:500; color:var(--dim); }
.links a { text-decoration:none; transition:color .2s; } .links a:hover { color:var(--ink); }
.navr { display:flex; align-items:center; gap:10px; }
.lang { font-size:13px; font-weight:700; color:var(--dim); text-decoration:none; border:1px solid var(--line); border-radius:99px; padding:6px 11px; background:#fff; }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:#fff; font-weight:600; padding:13px 22px; border-radius:999px; text-decoration:none;
       transition:transform .25s var(--spring), box-shadow .25s; box-shadow:0 6px 18px -8px rgba(28,27,34,.5); }
.btn:hover { transform:translateY(-3px) rotate(-1deg); }
.btn.ghost { background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line), var(--shadow); }
.btn.small { padding:9px 16px; font-size:14px; }
.btn.yt { background:#ff2d2d; } .btn.ig { background:linear-gradient(135deg,#f58529,#dd2a7b 55%,#8134af); }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; }

/* hero */
header { position:relative; padding:70px 0 40px; overflow:hidden; }
.dots { display:none; }
.glow { position:absolute; z-index:-1; border-radius:50%; filter:blur(60px); pointer-events:none; }
.glow.a { width:420px; height:420px; background:#ffd9c2; top:-120px; right:-80px; opacity:.7; }
.glow.b { width:360px; height:360px; background:#dcd6ff; bottom:-160px; left:-120px; opacity:.8; }
.hero { display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.pill { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--dim); background:#fff; border:1px solid var(--line); padding:6px 14px; border-radius:999px; margin-bottom:22px; box-shadow:var(--shadow); }
.pill i { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.18); animation:beat 2s infinite; }
@keyframes beat { 50% { box-shadow:0 0 0 7px rgba(34,197,94,0); } }
h1 { font-size:clamp(44px,6.4vw,80px); font-weight:800; }
.grad { position:relative; white-space:nowrap; color:var(--accent); }
.grad::after { content:""; position:absolute; left:-2%; right:-2%; bottom:.04em; height:.28em; z-index:-1; border-radius:6px; background:#ffe066; transform-origin:0 50%; transition:transform .9s var(--out) .9s; }
.motion .grad::after { transform:scaleX(0); } .motion .in .grad::after { transform:none; }
.lead { color:var(--dim); font-size:19px; margin:22px 0 30px; max-width:33em; }

/* the avatar as a slightly tilted photo with stickers */
.me { position:relative; display:grid; place-items:center; min-height:420px; }
.ring { width:min(330px,74vw); aspect-ratio:1; border-radius:36px; padding:10px; background:#fff; box-shadow:var(--shadow-hi); transform:rotate(3deg); transition:transform .5s var(--spring); }
.ring:hover { transform:rotate(-1deg) scale(1.03); }
.ring img { width:100%; height:100%; border-radius:28px; object-fit:cover; }
.chip { position:absolute; font-size:13px; font-weight:700; padding:9px 14px; border-radius:14px; background:#fff; box-shadow:var(--shadow-hi); white-space:nowrap; }
.chip.c1 { left:0; top:10%; transform:rotate(-5deg); background:#e9fbe9; color:#166534; animation:bob 5s ease-in-out infinite; }
.chip.c2 { right:-6px; top:48%; transform:rotate(4deg); background:#fde8f3; color:#9d174d; animation:bob 6s ease-in-out infinite -2s; }
.chip.c3 { left:4%; bottom:6%; transform:rotate(-2deg); background:#e6f4ff; color:#075985; animation:bob 7s ease-in-out infinite -4s; }
@keyframes bob { 50% { translate:0 -8px; } }

.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:34px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px; text-align:center; box-shadow:var(--shadow); }
.stat b { display:block; font-family:var(--head); font-size:36px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.stat span { color:var(--dim); font-size:14px; }

/* sections */
section { padding:80px 0 0; }
.kicker { display:inline-block; color:var(--accent); background:var(--soft); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:5px 12px; border-radius:99px; margin-bottom:12px; }
h2 { font-size:clamp(32px,4vw,48px); font-weight:800; margin-bottom:10px; }
.sub { color:var(--dim); font-size:17px; max-width:40em; margin-bottom:30px; }
.sub a, .prose a, .faq a, .crumbs a { color:var(--accent); }

/* the project grid: tiles pop in one after another with a little tilt, and settle */
.group + .group { margin-top:44px; }
.gh { font-size:14px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-bottom:14px; font-family:Inter, sans-serif; }
.tiles { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.card { position:relative; background:var(--card); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); }
.tile { display:flex; flex-direction:column; overflow:hidden; text-decoration:none; color:inherit; transition:transform .45s var(--spring), box-shadow .3s; }
.tile:hover { transform:translateY(-8px) rotate(-1.2deg); box-shadow:var(--shadow-hi); }
.tiles .tile:nth-child(even):hover { transform:translateY(-8px) rotate(1.2deg); }
.tile .pic { height:178px; overflow:hidden; display:grid; place-items:center; background:color-mix(in srgb, var(--c) 16%, #fff); }
.tile .pic img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--out); }
.tile .pic img.crop { width:58%; height:auto; align-self:start; margin-top:20px; border-radius:18px; box-shadow:0 16px 30px -12px rgba(0,0,0,.45); }
.tile .pic img.ic { width:86px; height:86px; object-fit:contain; filter:drop-shadow(0 10px 18px color-mix(in srgb, var(--c) 45%, transparent)); }
.tile:hover .pic img { transform:scale(1.06) rotate(-1deg); }
.tile .tx { padding:16px 18px 20px; }
.tile h3 { font-size:21px; margin:8px 0 4px; }
.tile p { font-size:14px; color:var(--dim); }
.st { display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; color:var(--dim); background:#f2f0ea; }
.st.on { color:#15803d; background:#e3f8e6; }

/* devlog Shorts */
.shorts { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); margin-bottom:24px; }
.short { position:relative; display:block; width:100%; aspect-ratio:9/16; border-radius:22px; overflow:hidden; border:0; background:#111; cursor:pointer; padding:0; color:#fff; font:inherit; text-align:left;
         box-shadow:var(--shadow-hi); transition:transform .45s var(--spring); }
.short:hover { transform:translateY(-6px) rotate(-1deg); }
.short img { width:100%; height:100%; object-fit:cover; }
.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,.9); display:grid; place-items:center; transition:transform .3s var(--spring); }
.short .play::after { content:""; border-left:18px solid var(--ink); border-top:11px solid transparent; border-bottom:11px solid transparent; margin-left:5px; }
.short:hover .play { transform:scale(1.15); }
.shortbox { position:relative; aspect-ratio:9/16; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-hi); }
.shortbox iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.social { display:flex; flex-wrap:wrap; gap:12px; }

/* FAQ, contact, footer */
.faq details { background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px 22px; margin-bottom:10px; box-shadow:var(--shadow); }
.faq summary { font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::after { content:"+"; color:var(--accent); font-size:22px; line-height:1; transition:transform .3s var(--spring); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq p { color:var(--dim); margin-top:10px; }
.contact { margin:90px 0 0; padding:64px 24px; text-align:center; border-radius:32px; background:linear-gradient(135deg,#efeaff,#ffeede); border:1px solid var(--line); }
.contact .sub { margin:0 auto 26px; }
.contact .mail { display:block; margin-top:14px; 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; }

/* project pages */
.sub-hero { padding:56px 0 20px; }
.crumbs { list-style:none; display:flex; flex-wrap:wrap; gap:6px; font-size:13px; color:var(--dim); margin-bottom:28px; }
.crumbs li + li::before { content:"›"; margin-right:6px; opacity:.6; } .crumbs a { text-decoration:none; }
.project-hero .glow.a { background:color-mix(in srgb, var(--c) 45%, #fff); }
.project-hero h1 { font-size:clamp(46px,7vw,84px); }
.project-hero .tagline { font-weight:700; color:color-mix(in srgb, var(--c) 75%, #000); font-size:19px; margin-top:4px; }
.shot { display:grid; place-items:center; }
.phone { position:relative; width:240px; aspect-ratio:9/19.5; border-radius:36px; padding:8px; background:#1c1b22; box-shadow:var(--shadow-hi); transform:rotate(3deg); animation:bob 6s ease-in-out infinite; }
.phone img { width:100%; height:100%; object-fit:cover; object-position:top; border-radius:29px; }
.shot .wide { width:100%; max-width:520px; border-radius:24px; border:8px solid #fff; box-shadow:var(--shadow-hi); transform:rotate(-2deg); }
.shot .bigicon { width:220px; height:220px; border-radius:48px; display:grid; place-items:center; background:color-mix(in srgb, var(--c) 18%, #fff); box-shadow:var(--shadow-hi); transform:rotate(-4deg); animation:bob 6s ease-in-out infinite; }
.shot .bigicon img { width:120px; height:120px; }
.facts { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.facts div { background:#fff; border:1px solid var(--line); border-radius:16px; padding:10px 16px; font-size:15px; box-shadow:var(--shadow); }
.facts b { display:block; font-size:11px; color:var(--dim); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.prose { max-width:46em; color:#3d3c45; font-size:18px; } .prose p + p { margin-top:14px; } .prose b { color:var(--ink); }
.checks { padding:8px 22px; } .checks ul { list-style:none; }
.checks li { padding:12px 0 12px 36px; position:relative; border-bottom:1px solid var(--line); }
.checks li:last-child { border-bottom:0; }
.checks li::before { content:"✓"; position:absolute; left:0; top:12px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff; background:var(--c, var(--accent)); }
.more { display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
.more a { padding:22px; text-decoration:none; transition:transform .45s var(--spring), box-shadow .3s; }
.more a:hover { transform:translateY(-6px) rotate(-1deg); box-shadow:var(--shadow-hi); }
.more p { color:var(--dim); font-size:14px; }
.more-link { display:block; margin-top:10px; color:color-mix(in srgb, var(--c, var(--accent)) 80%, #000); font-weight:700; font-size:14px; }

.progress { position:fixed; top:0; left:0; height:4px; width:100%; z-index:50; transform-origin:0 50%; transform:scaleX(var(--p,0)); background:linear-gradient(90deg,#6d5cff,#ff6b9d,#ffb020); pointer-events:none; }

/* motion (only with html.motion; without JS or with reduced motion everything simply shows) */
.motion .fade { opacity:0; transform:translateY(30px); transition:opacity .7s var(--out), transform .8s var(--out); transition-delay:calc(var(--d,0) * 90ms); }
.motion .fade.in { opacity:1; transform:none; }
.motion .tiles .tile.fade, .motion .shorts.fade .short, .motion .more .fade { transition:opacity .5s var(--out), transform .8s var(--spring); }
.motion .tiles .tile.fade { transform:translateY(46px) rotate(-4deg) scale(.92); }
.motion .tiles .tile.fade:nth-child(even) { transform:translateY(46px) rotate(4deg) scale(.92); }
.motion .tiles .tile.fade.in { transform:none; }
.motion .tiles .tile.fade.in:hover { transform:translateY(-8px) rotate(-1.2deg); }
.motion .w { position:relative; top:.4em; opacity:0; transition:opacity .5s var(--out), top .7s var(--spring); transition-delay:calc(var(--i) * 70ms + 100ms); }
.motion .in .w { top:0; opacity:1; }
.motion .card li { opacity:0; left:-10px; transition:opacity .4s, left .5s var(--spring); transition-delay:calc(var(--i,0) * 90ms + 300ms); }
.motion .in li { opacity:1; left:0; }
/* the hero's "specks" (motion.js) become slow floating confetti here */
.specks { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.specks i { position:absolute; bottom:-14px; width:calc(var(--s) * 3); height:calc(var(--s) * 3); border-radius:50%; opacity:calc(var(--o) * .9); animation:rise var(--t) linear infinite; }
.specks i:nth-child(4n) { background:#ffb020; } .specks i:nth-child(4n+1) { background:#6d5cff; } .specks i:nth-child(4n+2) { background:#ff6b9d; } .specks i:nth-child(4n+3) { background:#22c55e; border-radius:3px; }
@keyframes rise { to { transform:translateY(-760px) rotate(360deg); } }

@media (max-width:900px) {
  .links { display:none; } .hero { grid-template-columns:1fr; } .stats { grid-template-columns:repeat(2,1fr); }
  .me { min-height:360px; } .more { grid-template-columns:1fr; } .chip { font-size:12px; }
}
@media (max-width:520px) { .tiles { grid-template-columns:1fr 1fr; gap:12px; } .tile .pic { height:130px; } .tile h3 { font-size:17px; } .tile p { display:none; } .chip.c2 { right:0; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; }
  .fade, .w, .tile, .card li { opacity:1 !important; transform:none !important; top:0 !important; left:0 !important; } .grad::after { transform:none !important; } .specks { display:none; } }