/* ═══════════════════════════════════════════════════════
   MerchWheels Automations Hub — Stylesheet
   ═══════════════════════════════════════════════════════ */

@font-face { font-family:'Canela'; src:url('/fonts/Canela-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --bg:#070d1a; --surface:rgba(13,24,42,0.75); --elevated:rgba(20,35,58,0.9);
  --border:rgba(255,255,255,0.08); --border-hover:rgba(255,255,255,0.18);
  --text:#fff; --text-sec:rgba(200,215,235,0.65); --text-muted:rgba(180,200,225,0.35);
  --accent:#c8ff5e;
}

html { background:var(--bg); color:var(--text); font-family:'Plus Jakarta Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
body { min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:0 24px 80px; position:relative; overflow-x:hidden; }
body::before {
  content:''; position:fixed; inset:0;
  background:
    radial-gradient(ellipse 900px 700px at 5% 40%, rgba(0,200,180,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 700px 600px at 95% 20%, rgba(120,60,220,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 800px 500px at 60% 90%, rgba(30,60,140,0.14) 0%, transparent 60%);
  pointer-events:none; z-index:0;
}
body > * { position:relative; z-index:1; }
#stars-canvas { position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.5; }

/* ── Topbar ──────────────────────────────────────────── */
.topbar { width:100%; max-width:960px; display:flex; align-items:center; justify-content:space-between; padding:30px 0 0; margin-bottom:60px; }
.topbar-brand { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; }
.topbar-logo { width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--accent),#6ee7b7); display:flex; align-items:center; justify-content:center; font-size:14px; }
.topbar-brand span { color:var(--text-muted); font-weight:400; }
.topbar-pill { display:flex; align-items:center; gap:6px; padding:6px 14px; border-radius:100px; border:1px solid rgba(200,255,94,0.25); background:rgba(200,255,94,0.06); font-size:11px; font-weight:600; color:var(--accent); }
.topbar-pill-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px rgba(200,255,94,0.7); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

/* ── Greeting ────────────────────────────────────────── */
.greeting { width:100%; max-width:960px; text-align:center; margin-bottom:56px; }
.greeting-badge { display:inline-flex; align-items:center; gap:7px; padding:5px 14px 5px 8px; border-radius:100px; border:1px solid rgba(200,255,94,0.3); background:rgba(200,255,94,0.07); font-size:12px; font-weight:600; color:var(--accent); margin-bottom:22px; }
.greeting-badge-dot { width:20px; height:20px; border-radius:50%; background:rgba(200,255,94,0.15); display:flex; align-items:center; justify-content:center; font-size:11px; }
.greeting-title { font-family:'Canela',Georgia,serif; font-size:clamp(32px,6vw,56px); font-weight:500; letter-spacing:-0.02em; line-height:1.06; margin-bottom:16px; }
.greeting-title em { font-style:normal; color:var(--accent); }
.greeting-body { font-size:15px; color:var(--text-sec); line-height:1.7; max-width:480px; margin:0 auto; }

/* ── Section header ──────────────────────────────────── */
.section-header { width:100%; max-width:960px; display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.section-pill { display:inline-flex; padding:4px 12px; border-radius:100px; border:1px solid rgba(200,255,94,0.25); background:rgba(200,255,94,0.07); font-size:11px; font-weight:700; color:var(--accent); letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap; }
.section-rule { flex:1; height:1px; background:var(--border); }

/* ════════════════════════════════════════════════════
   OFFICE SCENE
   ════════════════════════════════════════════════════ */
.office-wrap { width:100%; max-width:960px; margin-bottom:56px; }
.office-hint { text-align:center; font-size:12px; color:var(--text-muted); margin-bottom:12px; opacity:0; transform:translateY(10px); transition:opacity 0.6s, transform 0.6s; }
.office-hint.visible { opacity:1; transform:translateY(0); }
.office-hint .pill-chip {
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px;
  border-radius:100px; border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02); color:var(--text-sec);
}

.office-scene-wrap {
  width:100%; overflow-x:auto; overflow-y:hidden;
  border-radius:24px; border:1px solid var(--border);
  background:#070d1a; perspective:1400px;
  scrollbar-width:thin; scrollbar-color:rgba(200,255,94,0.2) transparent;
  -webkit-overflow-scrolling:touch;
}
.office-scene-wrap::-webkit-scrollbar { height:6px; }
.office-scene-wrap::-webkit-scrollbar-thumb { background:rgba(200,255,94,0.15); border-radius:3px; }

.office-scene {
  width:1390px; min-width:1390px; height:460px;
  position:relative; user-select:none;
  transform-style:preserve-3d;
  transition:transform 0.15s ease-out;
  background: linear-gradient(180deg, #0b1530 0%, #0c1830 40%, #080f1f 40%, #060c18 100%);
}

/* Grain overlay */
.office-scene::after {
  content:''; position:absolute; inset:0; z-index:100;
  pointer-events:none; opacity:0.03; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size:128px;
}

/* ── Wall ────────────────────────────────────────────── */
.wall {
  position:absolute; top:0; left:0; right:0; height:190px;
  background: linear-gradient(180deg, #0b1530 0%, #0d1a36 60%, #0e1d3a 100%);
  border-bottom:3px solid rgba(0,0,0,0.4);
  overflow:hidden; pointer-events:none;
}
.wall::before {
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 120px, rgba(255,255,255,0.02) 120px 121px),
    repeating-linear-gradient(0deg, transparent 0 60px, rgba(255,255,255,0.02) 60px 61px);
}
.wall-neon {
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  font-family:'Canela',Georgia,serif; font-size:15px; font-weight:500;
  letter-spacing:0.2em; color:#c8ff5e;
  text-shadow: 0 0 8px rgba(200,255,94,0.8), 0 0 16px rgba(200,255,94,0.4), 0 0 24px rgba(200,255,94,0.2);
  animation:neonFlicker 5s ease-in-out infinite;
}
@keyframes neonFlicker { 0%,96%,100%{opacity:1} 97%,99%{opacity:0.8} 98%{opacity:0.95} }

/* Windows */
.window-row { position:absolute; top:40px; display:flex; gap:10px; }
.window {
  width:56px; height:76px; border-radius:6px 6px 0 0;
  background: radial-gradient(ellipse at 50% 80%, rgba(120,180,255,0.3) 0%, transparent 50%),
    linear-gradient(180deg, #0a1530 0%, #061228 60%, #040a1a 100%);
  border:2px solid rgba(120,180,255,0.22); position:relative; overflow:hidden;
  box-shadow:inset 0 0 12px rgba(100,180,255,0.1);
}
.window::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 65%, rgba(200,180,100,0.5) 65%, rgba(200,180,100,0.5) 68%, transparent 68%, transparent 74%, rgba(100,180,255,0.35) 74%, rgba(100,180,255,0.35) 77%, transparent 77%);
}
.window::after { content:''; position:absolute; top:0; bottom:0; left:50%; width:1px; background:rgba(120,180,255,0.2); }
.window .star-tiny { position:absolute; width:2px; height:2px; border-radius:50%; background:rgba(220,230,255,0.8); animation:twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%,100%{opacity:0.3} 50%{opacity:1} }

/* Clocks */
.clock-wall-group { position:absolute; top:40px; display:flex; gap:20px; align-items:flex-end; z-index:2; }
.analog-clock { text-align:center; }
.clock-face {
  position:relative;
  background:radial-gradient(circle, #1a2440 0%, #0e1830 80%, #0a1228 100%);
  border-radius:50%; border:3px solid rgba(200,255,94,0.35);
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.6), 0 0 24px rgba(200,255,94,0.15);
}
.clock-face::before {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(200,255,94,0.5) 0%, rgba(200,255,94,0.5) 8%, transparent 8%, transparent 92%, rgba(200,255,94,0.5) 92%),
    linear-gradient(90deg, rgba(200,255,94,0.5) 0%, rgba(200,255,94,0.5) 8%, transparent 8%, transparent 92%, rgba(200,255,94,0.5) 92%);
  mask:radial-gradient(circle, transparent 70%, black 72%); -webkit-mask:radial-gradient(circle, transparent 70%, black 72%);
  border-radius:50%;
}
.clock-big { width:100px; height:100px; }
.clock-sm  { width:68px; height:68px; }
.clock-hand { position:absolute; bottom:50%; left:50%; transform-origin:50% 100%; background:rgba(255,255,255,0.85); border-radius:2px; }
.clock-big .hand-hour { width:4px; height:28px; margin-left:-2px; }
.clock-big .hand-min  { width:3px; height:38px; margin-left:-1.5px; }
.clock-big .hand-sec  { width:1.5px; height:42px; margin-left:-0.75px; background:#c8ff5e; box-shadow:0 0 3px rgba(200,255,94,0.6); }
.clock-sm  .hand-hour { width:3px; height:18px; margin-left:-1.5px; }
.clock-sm  .hand-min  { width:2px; height:26px; margin-left:-1px; }
.clock-sm  .hand-sec  { width:1px; height:28px; margin-left:-0.5px; background:#F472B6; }
.clock-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:7px; height:7px; border-radius:50%; background:var(--accent); border:1px solid rgba(200,255,94,0.5); z-index:10; }
.clock-big .clock-center { width:9px; height:9px; }
.clock-label { font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-top:5px; }
.clock-time-digital { font-family:'Courier New',monospace; font-size:11px; color:rgba(255,255,255,0.75); font-weight:700; }

/* Trophy shelf */
.trophy-shelf {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:12px; padding:5px 16px 7px;
  background:linear-gradient(180deg, #3a2812, #1f1408);
  border-radius:3px; border-top:2px solid rgba(255,220,180,0.15);
  box-shadow:0 4px 8px rgba(0,0,0,0.5); z-index:2;
}
.trophy-item { display:flex; flex-direction:column; align-items:center; gap:2px; cursor:help; position:relative; }
.trophy-ico { font-size:20px; filter:drop-shadow(0 0 4px rgba(255,215,0,0.4)); animation:trophyShine 4s ease-in-out infinite; }
.trophy-item:nth-child(2) .trophy-ico{animation-delay:.6s} .trophy-item:nth-child(3) .trophy-ico{animation-delay:1.2s}
.trophy-item:nth-child(4) .trophy-ico{animation-delay:1.8s} .trophy-item:nth-child(5) .trophy-ico{animation-delay:2.4s}
.trophy-item:nth-child(6) .trophy-ico{animation-delay:3s}
@keyframes trophyShine { 0%,90%,100%{filter:drop-shadow(0 0 4px rgba(255,215,0,0.4))} 95%{filter:drop-shadow(0 0 10px rgba(255,240,150,0.9))} }
.trophy-label { font-size:7px; font-weight:700; color:rgba(255,220,150,0.7); }
.trophy-item:hover .trophy-tooltip { opacity:1; transform:translate(-50%,0); }
.trophy-tooltip {
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translate(-50%,6px);
  background:rgba(10,20,40,0.95); border:1px solid rgba(255,215,0,0.3); color:#fde047;
  padding:3px 8px; border-radius:5px; font-size:9px; white-space:nowrap;
  opacity:0; transition:opacity 0.2s, transform 0.2s; pointer-events:none; z-index:50;
}

/* Poster + whiteboard */
.wall-poster {
  position:absolute; top:40px; right:44px; width:72px; height:92px;
  background:linear-gradient(160deg, rgba(200,255,94,0.18) 0%, rgba(120,60,220,0.18) 100%);
  border:2px solid rgba(255,255,255,0.12); border-radius:5px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; z-index:2;
}
.wall-poster-icon { font-size:26px; }
.wall-poster-text { font-size:7px; font-weight:700; color:rgba(255,255,255,0.6); letter-spacing:0.1em; }
.wall-whiteboard {
  position:absolute; top:44px; left:44px; width:84px; height:60px;
  background:linear-gradient(180deg, #f0f4f8, #d4dbe3); border-radius:3px; border:3px solid #2a3547;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.wall-whiteboard::after { content:'📈'; font-size:16px; position:relative; }

/* ── Floor ───────────────────────────────────────────── */
.floor-3d {
  position:absolute; top:190px; left:0; right:0; height:250px;
  background:linear-gradient(180deg, #050a14 0%, #060c18 20%, #080f1e 50%, #060b16 100%);
  pointer-events:none;
}
.floor-3d::before {
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, transparent 0 40px, rgba(100,150,220,0.03) 40px 41px),
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(100,150,220,0.03) 60px 61px);
}
.office-ground {
  position:absolute; bottom:0; left:0; right:0; height:20px;
  background:linear-gradient(180deg, #040810, #020509);
  border-top:1px solid rgba(255,255,255,0.05); pointer-events:none;
}

/* Lamps */
.lamp { position:absolute; top:190px; width:80px; height:100px; pointer-events:none; }
.lamp::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:30px; height:4px; background:#2a3547; border-radius:0 0 3px 3px; }
.lamp-beam {
  position:absolute; top:4px; left:50%; transform:translateX(-50%);
  width:80px; height:100px;
  background:linear-gradient(180deg, rgba(255,220,150,0.12) 0%, transparent 85%);
  clip-path:polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
}

/* Equipment */
.eq { position:absolute; pointer-events:none; z-index:3; transition:transform 0.3s ease; }
.eq-coffee { bottom:20px; left:30px; width:70px; pointer-events:auto !important; cursor:pointer; }
.eq-printer { bottom:20px; left:480px; width:60px; pointer-events:auto !important; cursor:pointer; }
.eq-plant-1 { bottom:20px; left:120px; width:40px; }
.eq-plant-2 { bottom:20px; left:820px; width:38px; }
.eq-cooler { bottom:20px; left:1160px; width:46px; }

.coffee-steam { position:absolute; top:-10px; left:50%; transform:translateX(-50%); font-size:14px; opacity:0; animation:steam 3s ease-out infinite; }
@keyframes steam { 0%{opacity:0;transform:translate(-50%,0) scale(0.6)} 30%{opacity:0.6} 100%{opacity:0;transform:translate(-50%,-22px) scale(1.1)} }
.coffee-steam.s2{animation-delay:1s} .coffee-steam.s3{animation-delay:2s}
.printer-light { position:absolute; top:8px; right:10px; width:3px; height:3px; border-radius:50%; background:var(--accent); box-shadow:0 0 4px rgba(200,255,94,0.8); animation:blink 2s infinite; }
@keyframes blink { 0%,80%,100%{opacity:1} 90%{opacity:0.3} }

/* ── Workstations ────────────────────────────────────── */
.workstation { position:absolute; bottom:20px; width:140px; height:100px; z-index:4; pointer-events:none; }
.desk-block { z-index:6; position:relative; pointer-events:none; }
.desk-surface {
  position:absolute; bottom:30px; left:5%; width:90%; height:12px;
  background:linear-gradient(180deg, #243552, #16243c);
  border-radius:4px 4px 0 0; border-top:1.5px solid rgba(255,255,255,0.14);
  box-shadow:0 2px 4px rgba(0,0,0,0.4);
}
.desk-leg { position:absolute; bottom:0; width:5px; height:30px; background:#0f1a2c; }
.desk-leg.l { left:12%; } .desk-leg.r { right:12%; }
.desk-mug { position:absolute; bottom:38px; width:5px; height:6px; background:white; border-radius:1px 1px 2px 2px; }
.desk-mug.l { left:14%; } .desk-mug.r { right:14%; }

/* Laptop */
.laptop { position:absolute; bottom:42px; left:50%; transform:translateX(-50%); width:90px; pointer-events:none; z-index:7; }
.laptop-screen {
  width:100%; height:42px;
  background:linear-gradient(180deg, #1a2540, #0a1428);
  border:2px solid #2a3547; border-radius:5px 5px 2px 2px; border-bottom:none;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  transform:perspective(100px) rotateX(-8deg); transform-origin:bottom;
  position:relative; box-shadow:0 0 14px var(--wc-glow, transparent);
}
.laptop-screen::before { content:''; position:absolute; inset:2px; background:radial-gradient(ellipse at 50% 0%, var(--wc-dim) 0%, transparent 70%); border-radius:3px 3px 0 0; }
.laptop-screen::after { content:''; position:absolute; top:2px; left:50%; width:2px; height:2px; border-radius:50%; background:rgba(200,255,94,0.5); transform:translateX(-50%); }
.laptop-base { width:104%; margin-left:-2%; height:5px; background:linear-gradient(180deg, #3a4558, #1a2540); border-radius:1px 1px 4px 4px; box-shadow:0 1px 2px rgba(0,0,0,0.5); }

/* ═══════════════════════════════════════════════════════
   CHARACTERS — expressive blobs with smooth hover
   ═══════════════════════════════════════════════════════ */
.character {
  position:absolute; bottom:36px; width:90px;
  cursor:pointer; z-index:5;
  transition: left 3.5s linear, bottom 0.4s ease;
}
.character:hover { z-index:20; }

.char-body {
  width:90px; height:110px; display:block;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), filter 0.4s ease;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
  transform-origin: center bottom;
}

/* SMOOTH hover — gentle scale + glow, NO jitter */
.character:hover .char-body {
  transform: scale(1.12) translateY(-6px);
  filter: drop-shadow(0 0 16px var(--wc)) drop-shadow(0 8px 16px rgba(0,0,0,0.5));
}

/* Working = subtle typing bob */
.character.state-working .char-body {
  animation: charWork 2s ease-in-out infinite;
}
@keyframes charWork {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-2px); }
}

/* Thinking */
.character.state-thinking .char-body { transform: rotate(-3deg) translateY(-2px); transition: transform 0.4s ease; }
/* Confused */
.character.state-confused .char-body { animation: confused 0.5s ease-in-out infinite; }
@keyframes confused { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} }
/* Napping */
.character.state-napping .char-body { transform: rotate(8deg) translateY(8px); opacity:0.88; transition: transform 0.6s ease, opacity 0.6s; }
/* Stretching */
.character.state-stretching .char-body { animation: stretchUp 2s ease-in-out; }
@keyframes stretchUp { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.08) translateY(-4px)} }
/* Happy */
.character.state-happy .char-body { animation: happyBounce 0.6s ease-in-out infinite; }
@keyframes happyBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
/* Walking */
.character.walking-state { z-index:20; bottom:16px; }
.character.walking-state .char-body { animation: charWalk 0.45s ease-in-out infinite !important; }
@keyframes charWalk { 0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-3px) rotate(1.5deg)} }
.character.walking-state.facing-left .char-body { animation: charWalkL 0.45s ease-in-out infinite !important; }
@keyframes charWalkL { 0%,100%{transform:scaleX(-1) translateY(0) rotate(-1.5deg)} 50%{transform:scaleX(-1) translateY(-3px) rotate(1.5deg)} }
/* Drinking */
.character.state-drinking .char-body { animation: drinkAnim 2.5s ease-in-out; }
@keyframes drinkAnim { 0%,100%{transform:rotate(0deg)} 40%,70%{transform:rotate(-12deg)} }
/* Jump on click */
.character.jumping .char-body { animation: charJump 0.5s ease-out forwards !important; }
@keyframes charJump { 0%{transform:translateY(0) scale(1)} 35%{transform:translateY(-20px) scale(1.08)} 100%{transform:translateY(0) scale(1)} }
/* Bounce on landing */
.character.bouncing .char-body { animation: bounceLand 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards !important; }
@keyframes bounceLand { 0%{transform:translateY(-8px) scaleY(0.88) scaleX(1.08)} 50%{transform:translateY(3px) scaleY(1.06) scaleX(0.96)} 100%{transform:translateY(0) scaleY(1) scaleX(1)} }

/* State emoji */
.state-emoji {
  position:absolute; top:-4px; right:-8px; font-size:18px;
  opacity:0; pointer-events:none; z-index:21; transition:opacity 0.3s;
}
.character.state-thinking .state-emoji.think   { opacity:1; animation:emojiFloat 2.4s ease-in-out infinite; }
.character.state-confused .state-emoji.confuse { opacity:1; animation:emojiFloat 1.6s ease-in-out infinite; }
.character.state-napping  .state-emoji.nap     { opacity:1; animation:zzzFloat 2s ease-in-out infinite; }
.character.state-happy    .state-emoji.heart   { opacity:1; animation:heartFloat 1.8s ease-in-out infinite; }
.character.state-stretching .state-emoji.stretch{opacity:1; }
.character.state-drinking .state-emoji.drink   { opacity:1; }
@keyframes emojiFloat { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(-5px);opacity:0.8} }
@keyframes zzzFloat { 0%{transform:translate(0,0) scale(1);opacity:1} 100%{transform:translate(6px,-14px) scale(1.4);opacity:0} }
@keyframes heartFloat { 0%{transform:translate(0,0) scale(1);opacity:1} 100%{transform:translate(-4px,-16px) scale(1.4);opacity:0} }

/* Glow + nametag */
.char-glow {
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  width:72%; height:16px; border-radius:50%;
  background:radial-gradient(ellipse, var(--wc) 0%, transparent 70%);
  opacity:0; filter:blur(6px); transition:opacity 0.4s; pointer-events:none;
}
.character:hover .char-glow { opacity:0.7; }

.char-nametag {
  position:absolute; top:-46px; left:50%; transform:translate(-50%,8px);
  background:rgba(10,20,40,0.95); border:1px solid var(--wc);
  border-radius:8px; padding:5px 11px;
  font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--wc); white-space:nowrap;
  opacity:0; transition:opacity 0.3s, transform 0.3s; pointer-events:none; z-index:25;
}
.char-nametag::after {
  content:''; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%);
  border:4px solid transparent; border-top-color:var(--wc); border-bottom:none;
}
.character:hover .char-nametag { opacity:1; transform:translate(-50%,0); }
.char-nametag .usage-count { display:block; font-size:8px; font-weight:600; color:var(--text-muted); text-transform:none; margin-top:1px; }

.usage-badge {
  position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  background:rgba(10,20,40,0.85); border:1px solid var(--wc);
  border-radius:100px; padding:1px 8px;
  font-size:8px; font-weight:800; color:var(--wc); white-space:nowrap;
  opacity:0.7; pointer-events:none; z-index:22;
}

/* Walk particle */
.walk-particle {
  position:absolute; width:6px; height:6px; border-radius:50%;
  pointer-events:none; z-index:4; opacity:0.7;
  animation:particleFade 0.7s ease-out forwards;
}
@keyframes particleFade { 0%{transform:scale(1);opacity:0.7} 100%{transform:scale(0.2) translateY(-12px);opacity:0} }

/* ── Cats ────────────────────────────────────────────── */
.cat { position:absolute; z-index:7; cursor:pointer; transition:left 4s linear, bottom 4s linear; }
.cat .cat-svg { display:block; animation:catFloat 4s ease-in-out infinite; }
@keyframes catFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }
.cat.walking .cat-svg { animation:catWalk 0.5s ease-in-out infinite !important; }
@keyframes catWalk { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-2px) rotate(1deg)} }
.cat.facing-left .cat-svg { transform:scaleX(-1); }
.cat:hover .cat-nametag { opacity:1; transform:translate(-50%,0); }
.cat-nametag {
  position:absolute; top:-30px; left:50%; transform:translate(-50%,6px);
  background:rgba(10,20,40,0.95); border:1px solid var(--cat-c);
  border-radius:7px; padding:3px 9px;
  font-size:9px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--cat-c); white-space:nowrap;
  opacity:0; transition:opacity 0.2s, transform 0.2s; pointer-events:none; z-index:30;
}

/* ── Portal ──────────────────────────────────────────── */
#portal-overlay { position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0; display:none; }
#portal-rings { position:fixed; z-index:9998; pointer-events:none; display:none; }
.p-ring {
  position:absolute; border-radius:50%; transform:translate(-50%,-50%);
  border:3px solid var(--ring-c,#fff); opacity:0;
  animation:ringOut 0.6s ease-out var(--rd,0ms) 1 forwards;
}
@keyframes ringOut { 0%{width:10px;height:10px;opacity:0.9} 100%{width:140px;height:140px;opacity:0} }

/* ── Achievement ─────────────────────────────────────── */
.achievement {
  position:fixed; top:24px; right:24px;
  background:rgba(10,20,42,0.95); backdrop-filter:blur(16px);
  border:1px solid rgba(200,255,94,0.3); border-radius:14px;
  padding:14px 20px; display:flex; align-items:center; gap:12px;
  font-size:13px; font-weight:600; color:var(--accent);
  box-shadow:0 12px 40px rgba(0,0,0,0.5), 0 0 20px rgba(200,255,94,0.15);
  z-index:10000; transform:translateX(120%);
  transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.achievement.show { transform:translateX(0); }
.achievement-icon { font-size:24px; }
.achievement-title { font-size:14px; font-weight:700; color:var(--text); }
.achievement-sub { font-size:11px; font-weight:500; color:var(--text-muted); }

/* Sound toggle */
.sound-toggle {
  position:fixed; bottom:20px; right:20px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(10,20,42,0.8); backdrop-filter:blur(8px);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  cursor:pointer; z-index:100; transition:border-color 0.2s, transform 0.2s;
}
.sound-toggle:hover { border-color:var(--accent); transform:scale(1.1); }

/* Cursor glow */
.cursor-glow {
  position:fixed; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,255,94,0.06) 0%, transparent 65%);
  pointer-events:none; z-index:9990; transform:translate(-50%,-50%);
  display:none;
}
.cursor-glow.active { display:block; }

/* ── Request section ─────────────────────────────────── */
.request-wrap { width:100%; max-width:960px; margin-bottom:64px; opacity:0; transform:translateY(20px); transition:opacity 0.6s, transform 0.6s; }
.request-wrap.visible { opacity:1; transform:translateY(0); }
.request-box {
  background:var(--surface); backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,0.1); border-radius:24px;
  padding:38px 42px; position:relative; overflow:hidden;
}
.request-box::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,255,94,0.06), transparent 70%); pointer-events:none;
}
.request-title { font-family:'Canela',Georgia,serif; font-size:26px; font-weight:500; margin-bottom:8px; }
.request-sub { font-size:14px; color:var(--text-sec); line-height:1.65; margin-bottom:26px; max-width:500px; }
.request-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.request-form .full { grid-column:1/-1; }
.form-field { display:flex; flex-direction:column; gap:7px; }
.form-label { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.form-input, .form-textarea {
  background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:12px;
  color:var(--text); font-family:inherit; font-size:13.5px; padding:12px 16px;
  outline:none; transition:border-color 0.2s, background 0.2s; width:100%; resize:none;
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--text-muted); }
.form-input:focus, .form-textarea:focus { border-color:rgba(200,255,94,0.3); background:rgba(255,255,255,0.06); }
.form-footer { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.form-note { font-size:12px; color:var(--text-muted); }
.form-note strong { color:var(--text-sec); }
.btn-submit {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 26px; border-radius:100px; border:none;
  background:var(--accent); color:#000; font-family:inherit;
  font-size:13px; font-weight:700; cursor:pointer;
  transition:opacity 0.18s, transform 0.15s, box-shadow 0.2s;
  box-shadow:0 0 20px rgba(200,255,94,0.25);
}
.btn-submit:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 4px 30px rgba(200,255,94,0.35); }
.btn-submit:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.toast { display:none; align-items:center; gap:10px; margin-top:16px; padding:13px 18px; border-radius:14px; font-size:13px; }
.toast.success { display:flex; background:rgba(200,255,94,0.07); border:1px solid rgba(200,255,94,0.2); color:var(--accent); }

footer { font-size:12px; color:var(--text-muted); letter-spacing:.04em; margin-top:auto; display:flex; align-items:center; gap:8px; }
footer::before, footer::after { content:''; display:inline-block; width:24px; height:1px; background:var(--border); }

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width:720px) {
  body { padding:0 12px 60px; }
  .topbar { margin-bottom:36px; padding-top:20px; }
  .topbar-brand { font-size:12px; }
  .topbar-brand span { display:none; }
  .greeting { margin-bottom:36px; }
  .greeting-title { font-size:26px; }
  .greeting-body { font-size:13px; }
  .office-wrap { margin-bottom:44px; }
  .request-box { padding:22px 18px; border-radius:20px; }
  .request-title { font-size:20px; }
  .request-form { grid-template-columns:1fr; }
  .form-footer { flex-direction:column; align-items:flex-start; gap:12px; }
  .btn-submit { width:100%; justify-content:center; }
}