/* ══════════════════════════════════════════════════════════════
   BEEHOP — SOFT FUTURISM
   Twilight-violet space, iridescent pastel light, glass surfaces.
   Palette lifted from the 3D mascot: bubblegum, lavender, cyan,
   sunset gold. Bright enough to be on-brand, deep enough to
   read as future rather than nursery.
   ══════════════════════════════════════════════════════════════ */
:root{
  --void:      #07041A;
  --deep:      #0B0620;
  --deep-2:    #140A2E;
  --raise:     #1B1040;

  --bubble:    #FF8FC8;
  --lav:       #B490FF;
  --cyan:      #6FE3F5;
  --gold:      #FFD28A;
  --mint:      #8FE9B8;

  --text:      #F6F1FF;
  --muted:     #A79ECB;
  --faint:     #6C6392;

  --glass:     rgba(255,255,255,0.055);
  --glass-2:   rgba(255,255,255,0.085);
  --edge:      rgba(255,255,255,0.12);
  --edge-lit:  rgba(255,255,255,0.26);

  --iris: linear-gradient(115deg, var(--bubble) 0%, var(--lav) 42%, var(--cyan) 78%, var(--gold) 100%);

  --d: 'Unbounded', system-ui, sans-serif;
  --b: 'Outfit', system-ui, sans-serif;
  --m: 'JetBrains Mono', ui-monospace, monospace;

  --exp: cubic-bezier(0.16,1,0.3,1);
  --gut: clamp(1.25rem, 4.5vw, 5.5rem);
  --nav-h: 5.5rem;
}

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

html{
  scroll-behavior:smooth;
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  background:var(--deep);
  color:var(--text);
  font-family:var(--b);
  font-weight:300;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(255,143,200,0.18);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--bubble); color:var(--void); }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:6px;
}

/* skip link */
.skip{
  position:absolute; left:1rem; top:-4rem; z-index:2000;
  background:var(--raise); color:var(--text);
  padding:0.85rem 1.4rem; border-radius:10px;
  border:1px solid var(--edge-lit);
  font-family:var(--m); font-size:0.78rem;
  transition:top 0.25s var(--exp);
}
.skip:focus{ top:1rem; }

/* ══ ATMOSPHERE ═════════════════════════════════════════════ */
.sky{
  position:fixed; inset:0; z-index:-2; overflow:hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, #241356 0%, transparent 60%),
    linear-gradient(180deg, var(--deep) 0%, var(--void) 55%, var(--deep-2) 100%);
}
.blob{
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:0.5;
  will-change:transform;
}
.blob-1{ width:46vw; height:46vw; left:-8vw;  top:-6vw;  background:var(--bubble); animation:drift1 26s ease-in-out infinite; }
.blob-2{ width:40vw; height:40vw; right:-6vw; top:6vw;   background:var(--lav);    animation:drift2 32s ease-in-out infinite; }
.blob-3{ width:38vw; height:38vw; left:22vw;  top:52vh;  background:var(--cyan);   opacity:0.3; animation:drift3 38s ease-in-out infinite; }
.blob-4{ width:30vw; height:30vw; right:8vw;  top:78vh;  background:var(--gold);   opacity:0.22; animation:drift1 30s ease-in-out infinite reverse; }

@keyframes drift1{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(6vw,4vh,0) scale(1.12)} }
@keyframes drift2{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-5vw,6vh,0) scale(0.9)} }
@keyframes drift3{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(4vw,-5vh,0) scale(1.15)} }

/* fine mesh over everything — the "tech" layer */
.mesh{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 78%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 78%);
}
/* grain */
.mesh::after{
  content:''; position:absolute; inset:0; opacity:0.16;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' 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='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══ TYPE ═══════════════════════════════════════════════════ */
h1,h2,h3{
  font-family:var(--d); font-weight:400;
  line-height:1.02; letter-spacing:-0.035em;
  text-wrap:balance;
}
h2{ font-size:clamp(2rem,5.2vw,3.9rem); }
h3{ font-size:clamp(1.4rem,2.6vw,2rem); letter-spacing:-0.025em; }

.grad{
  background:var(--iris);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.eyebrow{
  font-family:var(--m); font-size:0.7rem; font-weight:500;
  letter-spacing:0.24em; text-transform:uppercase; color:var(--cyan);
  display:inline-flex; align-items:center; gap:0.8rem; margin-bottom:1.5rem;
}
.eyebrow::before{
  content:''; width:26px; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan));
}

.lede{
  font-size:clamp(1rem,1.55vw,1.2rem); color:var(--muted);
  line-height:1.72; max-width:54ch; font-weight:300;
}

.wrap{ max-width:1300px; margin:0 auto; padding-inline:var(--gut); }
section{ scroll-margin-top:calc(var(--nav-h) + 1rem); }

/* ══ GLASS ══════════════════════════════════════════════════ */
.glass{
  background:var(--glass);
  border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  border-radius:22px;
  position:relative; overflow:hidden;
}
/* top light edge */
.glass::before{
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, var(--edge-lit) 22%, var(--edge-lit) 78%, transparent);
}

/* ══ BUTTONS ════════════════════════════════════════════════ */
.btn{
  font-family:var(--m); font-size:0.74rem; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  padding:1.05rem 2rem; border-radius:100px;
  display:inline-flex; align-items:center; gap:0.7rem;
  border:1px solid transparent; cursor:pointer;
  transition:transform 0.45s var(--exp), box-shadow 0.45s var(--exp),
             background-color 0.35s var(--exp), border-color 0.35s var(--exp),
             color 0.35s var(--exp);
}
.btn-glow{
  background:var(--iris); color:var(--void); font-weight:500;
  box-shadow:0 8px 30px -10px rgba(255,143,200,0.6);
}
.btn-glow:hover{ transform:translateY(-3px); box-shadow:0 16px 44px -12px rgba(180,144,255,0.75); }
.btn-ghost{
  background:var(--glass); border-color:var(--edge); color:var(--text);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.btn-ghost:hover{ transform:translateY(-3px); border-color:var(--edge-lit); background:var(--glass-2); }

/* ══ NAV ════════════════════════════════════════════════════ */
#nav{
  position:fixed; z-index:1000;
  top:1rem; left:50%; transform:translateX(-50%);
  width:min(1300px, calc(100% - 2rem));
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0.7rem 0.75rem 0.7rem 1.4rem;
  border-radius:100px;
  background:rgba(11,6,32,0.55);
  border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  backdrop-filter:blur(20px) saturate(1.6);
  transition:background-color 0.5s var(--exp), border-color 0.5s var(--exp),
             box-shadow 0.5s var(--exp);
}
#nav.stuck{
  background:rgba(11,6,32,0.82);
  border-color:var(--edge-lit);
  box-shadow:0 18px 50px -24px rgba(0,0,0,0.9);
}

.logo{ display:flex; align-items:center; gap:0.7rem; min-width:0; }
.logo-mark{
  width:34px; height:34px; border-radius:11px; flex:none;
  background:var(--iris);
  display:grid; place-items:center;
  box-shadow:0 4px 16px -4px rgba(255,143,200,0.6);
}
.logo-mark svg{ width:20px; height:20px; }
.logo-txt{
  font-family:var(--d); font-weight:700; font-size:1.05rem;
  letter-spacing:-0.02em; line-height:1;
}

.navlinks{ display:flex; gap:0.35rem; list-style:none; align-items:center; }
.navlinks a{
  font-family:var(--m); font-size:0.72rem; letter-spacing:0.1em;
  color:var(--muted); padding:0.6rem 1.05rem; border-radius:100px;
  transition:color 0.3s var(--exp), background-color 0.3s var(--exp);
}
.navlinks a:hover{ color:var(--text); background:var(--glass-2); }

.nav-right{ display:flex; align-items:center; gap:0.6rem; }
.nav-cta{
  font-family:var(--m); font-size:0.72rem; letter-spacing:0.1em;
  background:var(--iris); color:var(--void); font-weight:500;
  padding:0.75rem 1.5rem; border-radius:100px; white-space:nowrap;
  transition:transform 0.4s var(--exp), box-shadow 0.4s var(--exp);
}
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -8px rgba(255,143,200,0.7); }

.burger{
  display:none; width:42px; height:42px; flex:none;
  border-radius:50%; border:1px solid var(--edge);
  background:var(--glass); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:border-color 0.3s var(--exp), background-color 0.3s var(--exp);
}
.burger:hover{ border-color:var(--edge-lit); background:var(--glass-2); }
.burger span{
  display:block; width:16px; height:1.5px; border-radius:2px;
  background:var(--text);
  transition:transform 0.45s var(--exp), opacity 0.25s var(--exp);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* drawer */
.drawer{
  position:fixed; inset:0; z-index:999;
  background:rgba(7,4,26,0.94);
  -webkit-backdrop-filter:blur(26px); backdrop-filter:blur(26px);
  padding:calc(var(--nav-h) + 2.5rem) var(--gut) 3rem;
  padding-bottom:calc(3rem + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:0.25rem;
  overscroll-behavior:contain; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-14px);
  transition:opacity 0.4s var(--exp), transform 0.5s var(--exp), visibility 0.4s;
}
.drawer.open{ opacity:1; visibility:visible; transform:translateY(0); }
.drawer a{
  font-family:var(--d); font-weight:400; font-size:clamp(1.6rem,7vw,2.3rem);
  letter-spacing:-0.03em; padding:1.05rem 0;
  border-bottom:1px solid rgba(255,255,255,0.07);
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  transition:color 0.3s var(--exp);
}
.drawer a:hover{ color:var(--bubble); }
.drawer a i{
  font-family:var(--m); font-style:normal; font-size:0.7rem;
  color:var(--faint); letter-spacing:0.16em;
}
.drawer .drawer-cta{
  margin-top:2rem; justify-content:center; border:none;
  background:var(--iris); color:var(--void);
  font-family:var(--m); font-size:0.82rem; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  padding:1.2rem; border-radius:100px;
}

/* ══ HERO ═══════════════════════════════════════════════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--nav-h) + 3rem) 0 4rem;
}
.hero-grid{
  display:grid; grid-template-columns:1.08fr 0.92fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center; width:100%;
}

.hero-h1{
  font-size:clamp(2.5rem,6.2vw,5.4rem);
  font-weight:700; letter-spacing:-0.055em; line-height:0.96;
}
.hero-h1 .line{ display:block; }
.hero-h1 .thin{ font-weight:300; letter-spacing:-0.04em; }

.hero-p{ margin-top:1.8rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:2.6rem; }

/* stat pills */
.hero-stats{
  display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:3rem;
}
.pill{
  display:flex; align-items:center; gap:0.6rem;
  padding:0.6rem 1.05rem; border-radius:100px;
  background:var(--glass); border:1px solid var(--edge);
  font-family:var(--m); font-size:0.68rem; letter-spacing:0.08em;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.pill b{ color:var(--text); font-weight:500; }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--mint); flex:none;
      box-shadow:0 0 10px var(--mint); }

/* ── the portal ── */
.portal{
  position:relative; display:grid; place-items:center;
  aspect-ratio:1; width:100%; max-width:560px; margin-inline:auto;
}
.portal-glow{
  position:absolute; inset:8%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(255,143,200,0.5), rgba(180,144,255,0.28) 45%, transparent 70%);
  filter:blur(30px);
}
.ring{
  position:absolute; border-radius:50%;
  border:1px solid transparent;
  background:var(--iris) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  will-change:transform;
}
.ring{ border-width:2px; }
.ring-1{ inset:1%;   opacity:0.9;  animation:spin 26s linear infinite; }
.ring-2{ inset:8%;   opacity:0.55; animation:spin 34s linear infinite reverse; border-style:dashed; }
.ring-3{ inset:-6%;  opacity:0.3;  animation:spin 48s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.portal-frame{
  position:relative; z-index:2;
  width:86%; aspect-ratio:1;
  display:grid; place-items:center;
  /* The mascot is a transparent 3D render now — no crop or feather, or it
     would clip the ears. The drop-shadow grounds it against the glow. */
  filter:drop-shadow(0 26px 52px rgba(90,40,140,0.55));
  animation:bob 7s ease-in-out infinite;
  will-change:transform;
}
.portal-frame img{
  width:100%; height:100%; object-fit:contain;
}
@keyframes bob{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-16px,0)} }

/* orbiting spark */
.spark{
  --r:clamp(130px, 19vw, 245px);
  position:absolute; z-index:3;
  width:9px; height:9px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 16px var(--cyan), 0 0 34px var(--cyan);
  top:50%; left:50%; margin:-4.5px;
  animation:orbit 14s linear infinite;
  will-change:transform;
}
.spark-2{ --r:clamp(105px, 15vw, 200px);
          background:var(--gold); box-shadow:0 0 16px var(--gold), 0 0 34px var(--gold);
          animation-duration:19s; animation-delay:-6s; }
@keyframes orbit{
  from{ transform:rotate(0deg)   translateX(var(--r)) rotate(0deg); }
  to  { transform:rotate(360deg) translateX(var(--r)) rotate(-360deg); }
}

/* ══ TICKER ═════════════════════════════════════════════════ */
.ticker{
  border-block:1px solid var(--edge);
  background:rgba(255,255,255,0.022);
  overflow:hidden; padding:1.15rem 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track{
  display:flex; gap:3.5rem; width:max-content;
  animation:slide 34s linear infinite;
  will-change:transform;
}
.ticker-track span{
  font-family:var(--m); font-size:0.76rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap;
  display:flex; align-items:center; gap:3.5rem;
}
.ticker-track span::after{ content:'◆'; color:var(--bubble); font-size:0.6rem; }
@keyframes slide{ to{ transform:translate3d(-50%,0,0); } }

/* ══ BAND ═══════════════════════════════════════════════════ */
.band{ padding:clamp(5rem,11vw,9rem) 0; position:relative; }

.band-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; margin-bottom:clamp(2.5rem,5vw,4rem);
}
.band-head p{ color:var(--muted); max-width:36ch; font-size:0.98rem; min-width:0; }

/* ── capability cards ── */
.caps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.cap{ padding:2.2rem 1.9rem 2.4rem; }
.cap-ico{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background:var(--glass-2); border:1px solid var(--edge);
  margin-bottom:1.6rem;
}
.cap-ico svg{ width:24px; height:24px; }
.cap h3{ font-size:1.2rem; margin-bottom:0.7rem; letter-spacing:-0.02em; }
.cap p{ color:var(--muted); font-size:0.93rem; line-height:1.68; }
.cap-n{
  position:absolute; top:1.4rem; right:1.6rem;
  font-family:var(--m); font-size:0.68rem; color:var(--faint);
  font-variant-numeric:tabular-nums;
}

/* ══ BRANDS ═════════════════════════════════════════════════ */
.brands{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.bcard{
  padding:0; display:flex; flex-direction:column;
  transition:transform 0.6s var(--exp), border-color 0.6s var(--exp),
             box-shadow 0.6s var(--exp);
}
.bcard:hover{
  transform:translateY(-8px);
  border-color:var(--edge-lit);
  box-shadow:0 34px 70px -34px rgba(0,0,0,0.85);
}
.bcard-vis{
  position:relative; height:300px; flex:none;
  display:grid; place-items:center; padding:1.6rem;
  border-bottom:1px solid var(--edge); overflow:hidden;
}

/* ── brand portal: same language as the hero ── */
.bportal{
  position:relative; display:grid; place-items:center;
  width:236px; height:236px;
}
.bportal-glow{
  position:absolute; inset:-6%; border-radius:50%; filter:blur(26px);
}
.bring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid transparent; background:var(--iris) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0.8; animation:spin 28s linear infinite; will-change:transform;
}
.bring-2{
  inset:-11%; opacity:0.35; border-style:dashed;
  animation:spin 40s linear infinite reverse;
}
.bportal img{
  position:relative; z-index:2;
  width:92%; height:92%;
  transition:transform 1.1s var(--exp);
}
.bcard:hover .bportal img{ transform:scale(1.05); }

/* Both marks are pre-rendered 3D, so the portal only supplies the light
   behind them — no CSS disc, or it would fight the render's own shading. */
.bportal img{
  object-fit:contain; padding:5%; border-radius:0;
  background:none;
}
.bcard--misaki .bportal-glow{
  background:radial-gradient(circle, rgba(201,214,255,0.34), rgba(255,210,138,0.20) 52%, transparent 72%);
}
.bcard--misaki .bportal img{
  filter:drop-shadow(0 16px 34px rgba(0,0,0,0.75));
}
.bcard--kaboo .bportal-glow{
  background:radial-gradient(circle, rgba(111,227,245,0.40), rgba(255,210,138,0.30) 58%, transparent 74%);
}
.bcard--kaboo .bportal img{
  filter:drop-shadow(0 16px 32px rgba(0,0,0,0.55));
}

.bcard-body{ padding:2.2rem 2rem 2.4rem; display:flex; flex-direction:column; flex:1; }
.bcard-kicker{
  font-family:var(--m); font-size:0.66rem; letter-spacing:0.2em;
  text-transform:uppercase; margin-bottom:1rem;
}
.bcard--misaki .bcard-kicker{ color:var(--gold); }
.bcard--kaboo  .bcard-kicker{ color:var(--cyan); }
.bcard h3{ font-size:clamp(1.7rem,3vw,2.2rem); }
.bcard-sub{
  font-family:var(--m); font-size:0.72rem; letter-spacing:0.1em;
  color:var(--faint); margin-top:0.6rem;
}
.bcard-desc{ color:var(--muted); font-size:0.95rem; line-height:1.7; margin-top:1.4rem; }
.tags{ display:flex; flex-wrap:wrap; gap:0.45rem; margin-top:auto; padding-top:1.9rem; }
.tag{
  font-family:var(--m); font-size:0.62rem; letter-spacing:0.1em;
  padding:0.42rem 0.85rem; border-radius:100px;
  background:var(--glass-2); border:1px solid var(--edge); color:var(--muted);
}
.bcard-link{
  margin-top:1.7rem; align-self:flex-start;
  font-family:var(--m); font-size:0.72rem; letter-spacing:0.14em;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.85rem 1.5rem; border-radius:100px;
  background:var(--glass-2); border:1px solid var(--edge);
  transition:gap 0.4s var(--exp), border-color 0.4s var(--exp),
             background-color 0.4s var(--exp), transform 0.4s var(--exp);
}
.bcard-link:hover{ gap:1.15rem; border-color:var(--edge-lit); background:rgba(255,255,255,0.13); transform:translateY(-2px); }

/* ══ CHANNELS ═══════════════════════════════════════════════ */
.channels{ display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:1rem; }
.chan{ padding:1.9rem 1.6rem 2rem; }
.chan-n{
  font-family:var(--m); font-size:0.66rem; color:var(--faint);
  letter-spacing:0.16em; margin-bottom:1.3rem;
  font-variant-numeric:tabular-nums;
}
.chan h3{ font-size:1.18rem; letter-spacing:-0.02em; }
.chan p{ color:var(--muted); font-size:0.88rem; line-height:1.65; margin-top:0.6rem; }

/* ══ CONTACT ════════════════════════════════════════════════ */
.contact-card{ padding:clamp(2.2rem,5vw,4rem); }
.contact-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.dl{ display:grid; gap:0; }
.dl-row{
  display:grid; grid-template-columns:minmax(110px,0.4fr) 1fr; gap:1.2rem;
  padding:1.15rem 0; border-bottom:1px solid rgba(255,255,255,0.07);
  align-items:baseline;
}
.dl-row:first-child{ border-top:1px solid rgba(255,255,255,0.07); }
.dl-k{
  font-family:var(--m); font-size:0.66rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--faint);
}
.dl-v{ color:var(--text); font-size:0.96rem; line-height:1.6; min-width:0; overflow-wrap:break-word; }
.dl-v a{ border-bottom:1px solid var(--edge); transition:color 0.3s var(--exp), border-color 0.3s var(--exp); }
.dl-v a:hover{ color:var(--bubble); border-color:var(--bubble); }
.dl-num{ font-variant-numeric:tabular-nums; }
.lede-tight{ margin-top:1.5rem; }

/* ══ FOOTER ═════════════════════════════════════════════════ */
footer{
  border-top:1px solid var(--edge);
  padding:3.5rem 0 2.5rem;
  padding-bottom:calc(2.5rem + env(safe-area-inset-bottom));
}
.foot-top{
  display:flex; justify-content:space-between; align-items:center;
  gap:1.5rem; flex-wrap:wrap; padding-bottom:2.5rem;
}
.foot-nav{ display:flex; gap:1.7rem; flex-wrap:wrap; }
.foot-nav a{
  font-family:var(--m); font-size:0.7rem; letter-spacing:0.12em;
  color:var(--muted); transition:color 0.3s var(--exp);
}
.foot-nav a:hover{ color:var(--bubble); }
.foot-legal{
  border-top:1px solid rgba(255,255,255,0.07); padding-top:1.8rem;
  display:flex; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
  font-family:var(--m); font-size:0.65rem; color:var(--faint); line-height:1.9;
}

/* ══ REVEAL ═════════════════════════════════════════════════ */
.rv{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity 0.9s var(--exp), transform 0.9s var(--exp);
}
.rv.in{ opacity:1; transform:none; }
.d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s}
.no-js .rv{ opacity:1; transform:none; }


/* ══ CHARACTER ANIMATION ════════════════════════════════════
   Each character is two stacked frames — eyes open and blinking.
   The blink frame flashes for ~150ms on a long cycle. The two
   cycles are deliberately coprime so the bunny and panda never
   fall into sync, which would look mechanical.
   ══════════════════════════════════════════════════════════ */
.portal-sway img,
.bportal img{ grid-area:1 / 1; }   /* stack in one grid cell — absolute
   positioning would fight the percentage sizing and the hover transform */
.ch-blink{ opacity:0; }

@keyframes blink{
  0%, 90.5%, 100%   { opacity:0; }
  92%, 93.6%        { opacity:1; }
}
@keyframes blink2{
  0%, 88%, 93%, 100%{ opacity:0; }
  89.4%, 90.6%      { opacity:1; }
  94.4%, 95.4%      { opacity:1; }
}
.portal-frame .ch-blink{ animation:blink 7.3s infinite; }
.bcard--kaboo .bportal .ch-blink{ animation:blink2 9.1s infinite; }

/* idle float on the brand marks — on the portal, so it can't fight
   the hover transform that lives on the image */
@keyframes floaty{
  0%,100%{ transform:translate3d(0,0,0); }
  50%    { transform:translate3d(0,-9px,0); }
}
.bportal{ animation:floaty 6.4s ease-in-out infinite; will-change:transform; }
.bcard--kaboo .bportal{ animation-duration:7.6s; animation-delay:-2.2s; }

/* the hero bunny gets a gentle sway on top of its existing bob */
@keyframes sway{
  0%,100%{ transform:rotate(-1.4deg); }
  50%    { transform:rotate(1.4deg); }
}
.portal-sway{
  width:100%; height:100%;
  display:grid; place-items:center;
  animation:sway 9s ease-in-out infinite;
  will-change:transform;
}
.portal-sway img{ width:100%; height:100%; object-fit:contain; }

@media (prefers-reduced-motion: reduce){
  .ch-blink{ animation:none !important; opacity:0 !important; }
  .bportal, .portal-sway{ animation:none !important; }
}

/* ══ RESPONSIVE ═════════════════════════════════════════════ */
@media(max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; gap:3rem; }
  .portal{ order:-1; max-width:400px; }
  .caps{ grid-template-columns:1fr; }
  .brands{ grid-template-columns:1fr; }
  .channels{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media(max-width:880px){
  .navlinks,.nav-cta{ display:none; }
  .burger{ display:flex; }
  #nav{ padding:0.65rem 0.7rem 0.65rem 1.1rem; }
}
@media(max-width:560px){
  .channels{ grid-template-columns:1fr; }
  .hero{ min-height:0; }
  .dl-row{ grid-template-columns:1fr; gap:0.35rem; }
  .foot-legal{ flex-direction:column; gap:0.4rem; }
  .blob{ filter:blur(65px); }
}

/* ══ REDUCED MOTION ═════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .rv{ opacity:1 !important; transform:none !important; }
  .blob,.ring,.bring,.spark,.portal-frame,.ticker-track{ animation:none !important; }
}

@media print{
  #nav,.drawer,.sky,.mesh,.ticker{ display:none !important; }
  body{ background:#fff; color:#000; }
  .rv{ opacity:1 !important; transform:none !important; }
}

/* ══════════════════════════════════════════════════════════════
   INTERIOR PAGES
   Everything below is used by the generated pages (brands,
   wholesale, about, contact, legal). The home page does not
   need any of it.
   ══════════════════════════════════════════════════════════════ */

.band--tight{ padding:clamp(3rem,7vw,5.5rem) 0; }

/* ── page hero ── */
.phero{
  padding:calc(var(--nav-h) + clamp(3rem,7vw,6rem)) 0 clamp(1.5rem,3vw,2.5rem);
  position:relative;
}
.phero-h{
  font-family:var(--d); font-weight:700;
  font-size:clamp(2.2rem,5.6vw,4.2rem);
  letter-spacing:-0.05em; line-height:0.98;
  margin-bottom:1.6rem; text-wrap:balance;
}
.phero .lede{ max-width:56ch; }

/* ── breadcrumbs ── */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:0.55rem;
  font-family:var(--m); font-size:0.68rem; letter-spacing:0.12em;
  color:var(--faint); margin-bottom:1.8rem;
}
.crumbs a{ color:var(--muted); transition:color 0.3s var(--exp); }
.crumbs a:hover{ color:var(--cyan); }
.crumbs span[aria-current]{ color:var(--text); }
.crumbs span[aria-hidden]{ opacity:0.4; }

/* ── long-form copy ── */
.prose{ max-width:68ch; }
.prose p{
  color:var(--muted); font-size:1.03rem; font-weight:300;
  line-height:1.78;
}
.prose p + p{ margin-top:1.3rem; }
.prose h2{
  font-size:clamp(1.4rem,2.6vw,1.9rem); margin-top:2.8rem;
  margin-bottom:0.9rem; scroll-margin-top:calc(var(--nav-h) + 1rem);
}
.prose h2:first-of-type{ margin-top:2rem; }
.prose a{ color:var(--cyan); border-bottom:1px solid rgba(111,227,245,0.35); }
.prose a:hover{ border-bottom-color:var(--cyan); }
.prose strong{ color:var(--text); font-weight:500; }
.upd{
  font-family:var(--m) !important; font-size:0.7rem !important;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--faint) !important; margin-bottom:1rem;
}
.legal-note{
  margin-top:2.6rem; padding:1.2rem 1.4rem; border-radius:14px;
  background:var(--glass); border:1px solid var(--edge);
  font-size:0.92rem !important;
}

/* ── generic glass panel ── */
.panel{ padding:clamp(1.6rem,3.4vw,2.6rem); }
.panel h2{ font-size:clamp(1.4rem,2.6vw,1.9rem); margin-bottom:1.1rem; }
.panel--sp{ margin-top:1.2rem; }

.ticks{ list-style:none; display:grid; gap:0.75rem; margin-top:1.3rem; }
.ticks li{
  position:relative; padding-left:1.7rem;
  color:var(--muted); font-size:0.96rem; font-weight:300; line-height:1.6;
}
.ticks li::before{
  content:''; position:absolute; left:0; top:0.55em;
  width:8px; height:8px; border-radius:50%;
  background:var(--iris);
}
.ticks a{ color:var(--cyan); border-bottom:1px solid rgba(111,227,245,0.35); }
.ticks strong{ color:var(--text); font-weight:500; }

/* ── two-up capability grid ── */
.caps--2{ grid-template-columns:1fr 1fr; }

/* ── brand detail lead ── */
.brand-lead{
  display:grid; grid-template-columns:0.85fr 1.15fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.bportal--lg{ width:min(320px,100%); height:auto; aspect-ratio:1; }

/* ── CTA strip ── */
.cta-strip{
  padding:clamp(1.8rem,4vw,3rem);
  display:grid; grid-template-columns:1.3fr 0.7fr;
  gap:clamp(1.5rem,3vw,2.5rem); align-items:center;
}
.cta-strip h2{ font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:0.9rem; }
.cta-strip-act{ display:flex; flex-wrap:wrap; gap:0.8rem; }

/* ── form ── */
.form{ display:grid; gap:1.1rem; margin-top:1.4rem; }
.field{ display:grid; gap:0.45rem; }
.field label{
  font-family:var(--m); font-size:0.68rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--muted);
}
.field .opt{ text-transform:none; letter-spacing:0.02em; opacity:0.7; }
.field input,
.field select,
.field textarea{
  font-family:var(--b); font-size:0.97rem; font-weight:300;
  color:var(--text); background:rgba(255,255,255,0.045);
  border:1px solid var(--edge); border-radius:12px;
  padding:0.85rem 1rem; width:100%;
  transition:border-color 0.3s var(--exp), background-color 0.3s var(--exp);
}
.field textarea{ resize:vertical; min-height:8rem; }
.field select{
  /* Windows dark mode needs these set explicitly on a native select */
  background-color:#161033; color:var(--text);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A79ECB' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
  background-size:12px; padding-right:2.6rem;
}
.field input::placeholder,
.field textarea::placeholder{ color:var(--faint); opacity:0.75; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--cyan); background:rgba(255,255,255,0.075);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color:#FF7A9C; }
.err{
  font-family:var(--m); font-size:0.68rem; letter-spacing:0.06em;
  color:#FF9DB6;
}
.form button{ justify-self:start; border:none; }
.form button[disabled]{ opacity:0.55; cursor:progress; }
.form-status{
  font-size:0.92rem; color:var(--muted); min-height:1.2em;
}
.form-status.ok{ color:var(--mint); }
.form-status.bad{ color:#FF9DB6; }
.form-alt{
  font-size:0.88rem; color:var(--faint); font-weight:300;
}
.form-alt a{ color:var(--cyan); border-bottom:1px solid rgba(111,227,245,0.35); }

.contact-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr;
  gap:clamp(1.4rem,3vw,2rem); align-items:start;
}

/* ── footer columns ── */
.foot-cols{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(1.5rem,3vw,2.5rem); padding-bottom:2.5rem;
}
.foot-blurb{
  color:var(--muted); font-size:0.92rem; font-weight:300;
  line-height:1.65; margin-top:1rem; max-width:34ch;
}
.foot-h{
  font-family:var(--m); font-size:0.68rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--faint); font-weight:500;
  margin-bottom:1rem;
}
.foot-list{ list-style:none; display:grid; gap:0.6rem; }
.foot-list a{
  color:var(--muted); font-size:0.93rem; font-weight:300;
  transition:color 0.3s var(--exp);
}
.foot-list a:hover{ color:var(--bubble); }

@media(max-width:1080px){
  .brand-lead{ grid-template-columns:1fr; }
  .bportal--lg{ margin-inline:auto; }
  .caps--2{ grid-template-columns:1fr; }
  .cta-strip{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .foot-cols{ grid-template-columns:1fr 1fr; }
}
@media(max-width:560px){
  .foot-cols{ grid-template-columns:1fr; }
}

/* honeypot — hidden from people, visible to naive bots */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }