/* Layout: brand hero, an auto-fill app catalogue that grows with each new app, then one spaced panel per app in its own colours; quiet studio footer. */
:root{
  --paper:#F2F3F7; --ink:#14161E; --muted:#5B6072; --line:#DCDFE8; --card:#FFFFFF;
  --brand-a:#2F7BFF; --brand-b:#B04BFF;
  /* product rooms keep their own look in both themes */
  --pp-bg:#0D1A22; --pp-panel:#132630; --pp-line:#1F3B47; --pp-fg:#E6F4F4; --pp-muted:#8FB3B8; --pp-accent:#2EE6C1;
  --bl-bg:#1B1612; --bl-panel:#251E18; --bl-line:#3A2F25; --bl-fg:#F5ECE3; --bl-muted:#B9A595; --bl-accent:#FF8A1F;
  --f-display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body:"Figtree", "Segoe UI", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --wrap:1120px;
}
:root[data-theme="dark"]{--paper:#0F1117; --ink:#ECEEF5; --muted:#9AA0B4; --line:#262A36; --card:#171A23; color-scheme:dark;}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand-a);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;letter-spacing:-.02em}
p{margin:0}
.label{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:-.03em}
.brand img{width:38px;height:auto}
.nav ul{display:flex;gap:clamp(14px,3vw,28px);list-style:none;margin:0;padding:0;font-size:15px;color:var(--muted)}
.nav a{text-decoration:none}
.nav a:hover{color:var(--ink)}

/* hero */
.hero{padding-block:clamp(40px,8vw,96px) clamp(36px,6vw,64px)}
.hero h1{font-size:clamp(44px,8.4vw,104px);line-height:.95;font-weight:800;max-width:12ch}
.hero h1 .duo{background:linear-gradient(100deg,var(--brand-a),var(--brand-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{margin-top:28px;max-width:52ch;font-size:clamp(17px,1.6vw,20px);color:var(--muted)}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.sec-head h2{font-size:clamp(26px,3.2vw,36px);font-weight:800}
.sec-head p{color:var(--muted);font-size:15px}
/* catalogue: one card per app; auto-fill so a 3rd, 4th... app just adds a card */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:24px}
.app{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;text-decoration:none;transition:transform .25s ease,border-color .25s}
.app:hover{transform:translateY(-4px)}
.app .cover{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;max-width:100%}
.app .cover img{width:96px;height:96px;border-radius:22px;object-fit:cover;box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
.app.pp .cover{background:radial-gradient(circle at 50% 120%,#1F4A55,var(--pp-bg) 70%)}
.app.bl .cover{background:radial-gradient(circle at 50% 120%,#5A3414,var(--bl-bg) 70%)}
.app .body{padding:20px 22px 22px;display:grid;gap:8px;flex:1}
.app h3{font-size:22px;font-weight:600}
.app p{color:var(--muted);font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{font-family:var(--f-mono);font-size:11.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.app .more{margin-top:auto;padding-top:10px;font-weight:600;font-size:14px}
.app.pp .more{color:#0F9C83}
.app.bl .more{color:#D96A00}
.app.soon{border-style:dashed;background:transparent;justify-content:center;align-items:center;text-align:center;padding:32px;min-height:220px}
.app.soon .plus{font-family:var(--f-display);font-size:44px;line-height:1;color:var(--muted)}
.app.soon h3{margin-top:8px}
.catalogue{padding-block:0 clamp(56px,8vw,96px)}

/* product rooms */
.rooms{display:grid;gap:clamp(28px,4vw,48px);padding-block:0 clamp(24px,4vw,48px)}
.room{padding:clamp(28px,5vw,64px);border-radius:28px;scroll-margin-top:24px}
.room .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
.room .head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.room .head img{width:52px;height:52px;border-radius:12px;object-fit:cover}
.room h2{font-size:clamp(36px,5vw,60px);font-weight:800;line-height:1}
.room .pitch{font-size:clamp(18px,1.7vw,21px);margin-top:18px;max-width:40ch}
.feats{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}
.feats li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:16px}
.feats li::before{content:"";width:8px;height:8px;border-radius:2px;margin-top:9px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;transition:filter .2s}
.btn:hover{filter:brightness(1.08)}
.meta{margin-top:18px;font-family:var(--f-mono);font-size:12.5px}

.pp-room{background:var(--pp-bg);color:var(--pp-fg)}
.pp-room .pitch,.pp-room .meta{color:var(--pp-muted)}
.pp-room .label{color:var(--pp-accent)}
.pp-room .feats li::before{background:var(--pp-accent)}
.pp-room .btn.primary{background:var(--pp-accent);color:var(--pp-bg)}
.pp-room .btn.ghost{border-color:var(--pp-line);color:var(--pp-fg)}

.bl-room{background:var(--bl-bg);color:var(--bl-fg)}
.bl-room .pitch,.bl-room .meta{color:var(--bl-muted)}
.bl-room .label{color:var(--bl-accent)}
.bl-room .feats li::before{background:var(--bl-accent)}
.bl-room .btn.primary{background:var(--bl-accent);color:var(--bl-bg)}
.bl-room .btn.ghost{border-color:var(--bl-line);color:var(--bl-fg)}
.bl-room .grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}

/* mock windows (pure HTML, no screenshots needed) */
.win{border-radius:14px;overflow:hidden;font-size:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.win .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;font-family:var(--f-mono);font-size:12px}
.win .bar i{width:10px;height:10px;border-radius:50%;opacity:.5;background:currentColor}
.win .bar span{margin-left:8px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-win{background:var(--pp-panel);border:1px solid var(--pp-line)}
.pp-win .bar{border-bottom:1px solid var(--pp-line);color:var(--pp-muted)}
.pp-body{display:grid;grid-template-columns:150px minmax(0,1fr)}
.pp-side{border-right:1px solid var(--pp-line);padding:14px 10px;display:grid;gap:4px;align-content:start;font-size:13px;color:var(--pp-muted)}
.pp-side b{color:var(--pp-fg);font-weight:500;background:var(--pp-line);border-radius:6px;padding:4px 8px}
.pp-side span{padding:4px 8px}
.pp-main{padding:16px;display:grid;gap:10px;min-width:0}
.pp-main .sec{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--pp-muted);margin-top:4px}
.task{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--pp-line);border-radius:10px;background:var(--pp-bg)}
.task .box{width:15px;height:15px;border:1.5px solid var(--pp-muted);border-radius:4px;flex:none;margin-top:3px}
.task.done .box{background:var(--pp-accent);border-color:var(--pp-accent)}
.task.done p{text-decoration:line-through;opacity:.55}
.task p{min-width:0}
.prompt{padding:12px;border-radius:10px;border:1px dashed var(--pp-accent);font-family:var(--f-mono);font-size:12.5px;color:var(--pp-fg);line-height:1.55}
.prompt em{font-style:normal;color:var(--pp-accent)}

.bl-win{background:var(--bl-panel);border:1px solid var(--bl-line)}
.bl-win .bar{border-bottom:1px solid var(--bl-line);color:var(--bl-muted)}
.bl-list{display:grid}
.blend{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--bl-line)}
.blend .n{font-family:var(--f-mono);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blend .n small{display:block;font-family:var(--f-body);font-size:12px;color:var(--bl-muted)}
.ver{font-family:var(--f-mono);font-size:11.5px;padding:3px 8px;border-radius:6px;background:var(--bl-line);color:var(--bl-fg);white-space:nowrap}
.go{font-size:12px;font-weight:600;color:var(--bl-accent);white-space:nowrap}
.render{padding:14px 16px;display:grid;gap:8px;font-family:var(--f-mono);font-size:12px;color:var(--bl-muted)}
.render .row{display:flex;justify-content:space-between;gap:10px}
.render .track{height:6px;border-radius:3px;background:var(--bl-line);overflow:hidden}
.render .fill{height:100%;width:47%;background:var(--bl-accent);border-radius:3px;animation:fill 6s ease-in-out infinite alternate}
@keyframes fill{from{width:38%}to{width:56%}}

/* studio */
.studio{padding-block:clamp(56px,8vw,96px)}
.studio .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px)}
.studio h2{font-size:clamp(30px,4vw,44px);font-weight:800}
.studio p{color:var(--muted);margin-top:16px;max-width:50ch}
.facts{display:grid;gap:0;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding-block:14px;border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted);font-size:14px}
.facts dd{margin:0}
footer{border-top:1px solid var(--line);padding-block:28px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
footer nav{display:flex;gap:18px;flex-wrap:wrap}

@media (max-width:860px){
  .room .grid,.bl-room .grid,.studio .grid{grid-template-columns:minmax(0,1fr)}
  .bl-room .grid .copy{order:-1}
}
@media (max-width:640px){
  .doors{grid-template-columns:minmax(0,1fr)}
  
  .pp-body{grid-template-columns:minmax(0,1fr)}
  .pp-side{display:none}
  .facts div{grid-template-columns:minmax(0,1fr);gap:2px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}