/* Design tokens */
:root{
  --bg:#fbf8f3;
  --card:#ffffff;
  --text:#111318;
  --muted:#5b6473;
  --line:#e9e3da;
  --accent:#007BFF;
  --accent-ink:#ffffff;
  /* Global FX gradient (Electric Blue Neon) */
  --fx-accent-a:#00E5FF; /* neon cyan */
  --fx-accent-b:#0085FF; /* electric blue */
}

/* Dark theme (Home visual style) */
.theme-night{
  --bg:linear-gradient(180deg,#05080f 0%, #0b1220 100%);
  --card:#0d1526;
  --text:#eaf4ff;
  --muted:#a7b4cc;
  --line:#122038;
  --accent:#00E5FF; /* Electric neon cyan */
  --accent-ink:#00121a;
}

/* Base */
body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text)}
.container{max-width:1120px;margin:0 auto;padding:24px}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-weight:700;letter-spacing:.2px}
.dot{color:var(--accent);margin-right:6px}
.nav{position:sticky;top:0;background:rgba(255,255,255,.7);border-bottom:1px solid var(--line);backdrop-filter:blur(10px);z-index:50}
.theme-night .nav{background:rgba(0,0,0,.7);}
.menu a{color:var(--text);padding:10px 12px;display:inline-block;border-radius:10px;text-decoration:none}
.menu a.active{border-bottom:2px solid var(--accent)}
.menu a:hover{color:#000;text-decoration:underline}
.theme-night .menu a:hover{color:#fff}
.hero{padding:96px 0}
.h1{font-size:54px;line-height:1.05;margin:0 0 12px;font-family:"Space Grotesk",Inter,system-ui,sans-serif}
.sub{color:var(--muted);max-width:760px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.badge{background:var(--card);border:1px solid var(--line);color:var(--muted);padding:8px 12px;border-radius:999px}
.badge:hover{border-color:var(--accent);color:var(--text)}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:700;border:1px solid var(--accent)}
.btn:hover{filter:brightness(1.03)}
.btn.outline{background:transparent;color:var(--text);border-color:var(--line)}
.grid-3{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px}
.card h3{margin-top:0;font-family:"Space Grotesk",Inter,system-ui,sans-serif}
.section{margin:28px 0}
.footer{margin-top:60px;border-top:1px solid var(--line);padding:28px 0;color:var(--muted);text-align:center}

@media (max-width: 880px){
  .grid-3{grid-template-columns:1fr}
  .h1{font-size:36px}
}

/* Utilities and sections */
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.grid-2{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.grid-auto{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.list{list-style:none;padding-left:0;margin:12px 0}
.list li{margin:8px 0;display:flex;gap:8px;align-items:flex-start}
.list li::before{content:'✓';color:var(--accent);margin-top:2px}
.logos{display:flex;flex-wrap:wrap;gap:10px}
.logo{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:var(--muted)}
.band{background:#efeae3;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:36px 0;text-align:center}
.theme-night .band{background:#0b0b0b;border-color:#161616}

@media (max-width: 880px){
  .grid-2{grid-template-columns:1fr}
}

/* Portfolio filters */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 20px}
.chip{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;user-select:none}
.chip:hover{border-color:var(--accent);color:var(--text)}
.chip.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* Case page */
.case-hero{padding:72px 0 24px}
.prose{color:var(--text);}
.prose p{line-height:1.7;color:var(--muted)}
.meta{color:var(--muted)}

/* Home artwork sections */
.art-hero{position:relative;overflow:hidden;background:#000;color:#fff;min-height:86vh}
.art-hero .wrap{position:relative;z-index:2;padding:20px 24px}
.art-hero .mast{font-family:"Bowlby One", system-ui, sans-serif;font-size:56px;letter-spacing:2px;margin:0;color:#fff;text-transform:uppercase}
.art-hero .subnav{display:flex;gap:28px;color:#bbb;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.cones{position:absolute;inset:0;z-index:1}
.cone{position:absolute;filter:contrast(110%)}
.cone::before{content:"";display:block;width:100%;height:100%;background:
  repeating-radial-gradient(circle at 20% 50%,
    #1a1714 0 12px,
    #2a241f 12px 24px,
    #3a312a 24px 36px,
    #4a3d35 36px 48px);
  border-radius:50%;
  transform:scaleX(6) rotate(12deg);
  opacity:.9;
}
.cone .speaker{position:absolute;right:-30px;top:50%;transform:translateY(-50%);width:120px;height:120px;border-radius:50%;background:#d8c29b;border:6px solid #201a15;box-shadow:0 0 0 8px #9b5e49 inset}
.cone .speaker::after{content:"";position:absolute;inset:18px;border-radius:50%;background:#fff}
.cone.small{width:220px;height:220px}
.cone.medium{width:360px;height:360px}
.cone.large{width:520px;height:520px}
.cone.left{left:-40%;top:-10%;transform:rotate(-16deg)}
.cone.right{right:-40%;top:-4%;transform:rotate(14deg)}
.cone.center{left:-30%;top:38%;transform:rotate(-12deg)}

.player{position:absolute;right:24px;top:42%;z-index:3;background:#0b0b0b;color:#e7e7e7;border:1px solid #2b2b2b;border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.player .meta{color:#c5d8a1;font-size:12px}
.btn-icon{width:28px;height:28px;border-radius:8px;background:#191919;border:1px solid #2b2b2b;display:grid;place-items:center;color:#fff}
.btn-icon svg{width:12px;height:12px;fill:#fff}

.diagonal{position:relative;margin-top:-8vh}
.diagonal .photo{--angle:8deg;position:relative;min-height:62vh;background:linear-gradient(180deg,#ff9a1f, #f46b45);clip-path:polygon(0 32%,100% 0,100% 84%,0 100%)}
.diagonal .headline{position:absolute;left:6%;bottom:12%;color:#fff}
.diagonal .headline h2{font-family:"Bowlby One", system-ui, sans-serif;font-size:64px;line-height:1.02;margin:0}
.diagonal .headline .more{color:#9cff7a;font-weight:700;text-transform:uppercase;letter-spacing:.12em}

.tiles{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;padding:28px}
.tile{background:#d8c29b;color:#111;padding:18px 18px;border-radius:16px;border:1px solid #201a15;box-shadow:0 8px 0 #201a15}
.tile .grid{display:grid;grid-template-columns:repeat(4,36px);grid-auto-rows:36px;gap:8px}
.tile .grid span{display:grid;place-items:center;font-weight:900}

@media (max-width: 880px){
  .art-hero .mast{font-size:44px}
  .diagonal .headline h2{font-size:42px}
}