/* =====================================================================
   Dreamful Life — marketing design system (site.css)
   Glass / aurora edition: soft layered gradient mesh, frosted-glass
   surfaces, rounded shapes, smaller refined type. Reuses the existing
   class vocabulary so pages need no markup changes. Two-row sticky
   header (logo on top, links beneath) that collapses to a hamburger.
   ===================================================================== */

:root{
  --triangle:#e0533d; --circle:#2f9e8f; --rectangle:#3b6fb6; --curve:#9b6cc4;
  --indigo:#5b52ec; --indigo-600:#4a41d8; --indigo-50:#eef0ff; --wash:#eef1ff;
  --ink:#191a2e; --body:#474a63; --dim:#6d7089; --faint:#9a9db4;
  --line:rgba(120,110,180,.16); --rule:rgba(120,110,180,.16);
  --glass:rgba(255,255,255,.74); --glass-2:rgba(255,255,255,.6); --glass-brd:rgba(255,255,255,.85);
  --shadow-sm:0 4px 18px rgba(70,55,140,.09);
  --shadow:0 16px 44px rgba(70,55,140,.15);
  --shadow-lg:0 30px 80px rgba(50,35,120,.20);
  --grad-brand:linear-gradient(120deg,var(--indigo) 0%,var(--curve) 55%,var(--rectangle) 100%);
  --grad-warm:linear-gradient(100deg,var(--triangle),var(--curve) 52%,var(--rectangle));
  --maxw:1120px; --radius:22px; --radius-sm:14px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; color:var(--body); position:relative;
  font:15px/1.65 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:#eef0f8;
}
/* aurora field */
body::before{
  content:""; position:fixed; inset:-20% -10% 0 -10%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38% 46% at 14% 10%, rgba(224,83,61,.34), transparent 62%),
    radial-gradient(42% 52% at 88% 6%, rgba(59,111,182,.34), transparent 62%),
    radial-gradient(46% 56% at 80% 80%, rgba(155,108,196,.32), transparent 62%),
    radial-gradient(42% 52% at 8% 88%, rgba(47,158,143,.28), transparent 62%),
    radial-gradient(60% 60% at 50% 45%, rgba(91,82,236,.12), transparent 70%);
  filter:saturate(1.08); animation:aurora 26s ease-in-out infinite alternate;
}
body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(238,240,248,.35), rgba(238,240,248,.75) 60%, #eef0f8); }
@keyframes aurora{ 0%{ transform:translate3d(0,0,0) scale(1); } 100%{ transform:translate3d(0,-2%,0) scale(1.06); } }

h1,h2,h3,h4{ font-family:"Fraunces",Georgia,serif; color:var(--ink); font-weight:600; margin:0; line-height:1.14; letter-spacing:-.015em; }
p{ margin:0 0 1em; }
a{ color:var(--indigo); text-decoration:none; transition:color .15s; }
a:hover{ color:var(--indigo-600); }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.center{ text-align:center; }
.tiny{ font-size:12.5px; color:var(--dim); }
.lead{ font-size:17px; line-height:1.62; color:var(--body); }

/* ---------- glass helper ---------- */
.card,.form-card,.benefit,.mbox,.bcard,.ccard,.pcard,.step,.mod,.detail,.video-frame,.chip{
  -webkit-backdrop-filter:blur(16px) saturate(1.35); backdrop-filter:blur(16px) saturate(1.35);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font:inherit; font-weight:600; font-size:14px; line-height:1; text-align:center;
  padding:12px 22px; border-radius:999px; border:1px solid transparent; color:#fff;
  background:var(--grad-brand); background-size:150% 150%;
  box-shadow:0 10px 26px rgba(91,82,236,.30); transition:transform .16s ease, box-shadow .2s, background-position .5s;
}
.btn:hover{ transform:translateY(-2px); background-position:90% 50%; box-shadow:0 16px 36px rgba(91,82,236,.38); color:#fff; }
.btn:active{ transform:translateY(0); }
.btn.lg{ padding:14px 28px; font-size:15px; }
.btn.ghost{ background:var(--glass); color:var(--ink); border-color:var(--glass-brd);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:var(--shadow-sm); }
.btn.ghost:hover{ background:rgba(255,255,255,.72); }
.btn.on-dark{ background:#fff; color:var(--indigo); box-shadow:0 12px 30px rgba(0,0,0,.22); }

/* ---------- header: two rows (logo up, links beneath), sticky glass ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(20px) saturate(1.5); backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid var(--glass-brd);
}
.nav{ position:relative; display:flex; flex-direction:column; align-items:center; gap:11px; padding:13px 0 14px; }
.brand{ display:flex; align-items:center; gap:10px; }
.mark{ width:30px; height:30px; border-radius:9px; flex:none;
  background:conic-gradient(from 210deg, var(--triangle), var(--curve), var(--rectangle), var(--circle), var(--triangle));
  box-shadow:0 4px 14px rgba(50,35,120,.28), inset 0 0 0 1px rgba(255,255,255,.35); }
.brand .name{ font-family:"Fraunces",serif; font-weight:600; font-size:20px; color:var(--ink); letter-spacing:-.01em; white-space:nowrap; }
.menu{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 4px; }
.menu a.link,.menu .link{ color:var(--body); font-weight:500; font-size:13.5px; padding:6px 11px; border-radius:999px; transition:.15s; }
.menu a.link:hover{ color:var(--ink); background:rgba(255,255,255,.6); }
.lang{ display:inline-flex; align-items:center; gap:3px; font-size:12px; color:var(--dim); margin-left:4px; }
.lang button{ background:none; border:none; cursor:pointer; font:inherit; font-weight:600; color:var(--faint); padding:4px 7px; border-radius:999px; transition:.15s; }
.lang button:hover{ color:var(--body); }
.lang button.on{ color:var(--indigo); background:var(--indigo-50); }
.menu .btn{ padding:9px 18px; }
/* hamburger */
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:42px; height:38px; padding:0 10px;
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:11px; cursor:pointer;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:var(--shadow-sm); }
.nav-toggle span{ display:block; height:2px; width:22px; background:var(--ink); border-radius:2px; transition:transform .2s, opacity .2s; }
.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media(max-width:960px){
  .nav{ flex-direction:row; justify-content:space-between; padding:0; height:62px; }
  .nav-toggle{ display:flex; }
  .menu{
    position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60;
    flex-direction:column; align-items:stretch; gap:2px;
    background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
    border:1px solid var(--glass-brd); border-radius:18px; padding:10px; box-shadow:var(--shadow); display:none;
  }
  .menu.open{ display:flex; }
  .menu a.link{ display:block; padding:12px 14px; font-size:16px; text-align:left; }
  .menu .lang{ justify-content:center; padding:8px 0 2px; }
  .menu .btn{ margin-top:6px; }
}

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding:64px 0 76px; }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.blob{ position:absolute; border-radius:50%; filter:blur(52px); opacity:.5; animation:float 20s ease-in-out infinite; }
.blob.b1{ width:380px; height:380px; background:var(--triangle); top:-120px; left:-60px; opacity:.20; }
.blob.b2{ width:420px; height:420px; background:var(--rectangle); top:-140px; right:-90px; opacity:.18; animation-delay:-5s; }
.blob.b3{ width:320px; height:320px; background:var(--circle); bottom:-130px; left:18%; opacity:.16; animation-delay:-10s; }
.blob.b4{ width:360px; height:360px; background:var(--curve); bottom:-120px; right:10%; opacity:.18; animation-delay:-14s; }
@keyframes float{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(0,24px) scale(1.06); } }
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.04fr .96fr; gap:48px; align-items:center; }
.hero h1{ font-size:clamp(34px,4.8vw,54px); letter-spacing:-.02em; }
.hero h1 .accent{ background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lead{ margin-top:18px; font-size:17.5px; max-width:38ch; }
.hero .cta{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.hero .tiny{ margin-top:18px; }
.hero-art{ display:grid; place-items:center; position:relative; }
.hero-art::before{ content:""; position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.6), rgba(255,255,255,0) 70%); filter:blur(6px); }
.hero-art svg{ position:relative; width:100%; max-width:420px; height:auto; filter:drop-shadow(0 28px 48px rgba(50,35,120,.22)); }
@media(max-width:860px){ .hero-grid{ grid-template-columns:1fr; gap:30px; } .hero-art{ order:-1; } }

/* ---------- eyebrows, section headings ---------- */
.eyebrow{ display:inline-block; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--indigo); margin-bottom:12px; }
.section{ position:relative; padding:64px 0; }
.sec-head,.bhead{ text-align:center; max-width:660px; margin:0 auto 34px; }
.sec-head h2,.bhead h2,.sec-h,.big{ font-size:clamp(25px,3.4vw,36px); letter-spacing:-.02em; }
.sec-head p,.bhead p,.sec-sub{ color:var(--dim); font-size:16px; margin-top:10px; }
.sec-h{ margin:0 0 16px; }
.page-hero{ padding:58px 0 22px; text-align:center; position:relative; }
.page-hero h1{ font-size:clamp(30px,4.4vw,46px); letter-spacing:-.02em; }
.page-hero p{ font-size:16.5px; max-width:620px; margin:16px auto 0; color:var(--body); }

/* ---------- grids ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.g2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.g4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.bgrid2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.bgrid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:12px; }
.who{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.video-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.practices-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
@media(max-width:900px){ .g4,.who{ grid-template-columns:1fr 1fr; } }
@media(max-width:820px){ .g2,.g3,.g4,.who,.bgrid2,.bgrid3{ grid-template-columns:1fr; } }

/* ---------- glass cards ---------- */
.card{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:28px 24px; transition:transform .18s ease, box-shadow .22s ease;
}
.card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%); }
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.card[data-slug]::after{ content:none; }
.card h3{ font-size:18px; }
.card p{ max-width:42ch; font-size:14.5px; }
.card .ico,.card .picon,.card .avatar,.card .num{ margin-left:auto; margin-right:auto; }
.card .row{ justify-content:center; }
.card .specs{ justify-content:center; }
.card .meta{ justify-content:center; }
/* structured cards keep natural alignment */
.card[data-slug],.card[data-slug] .cbody,.detail,.mod,.bcard,.step{ text-align:left; align-items:stretch; }
.card[data-slug] .meta{ justify-content:space-between; }
.detail .top{ justify-content:flex-start; }

/* catalog cards (courses / programs) */
.grid .card,.card[data-slug]{ padding:0; overflow:hidden; cursor:pointer; }
.cover{ height:150px; background-size:cover; background-position:center; position:relative; background-image:var(--grad-brand); }
.cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(24,20,60,.04),rgba(24,20,60,.22)); }
.level{ position:absolute; top:11px; left:11px; z-index:1; background:rgba(255,255,255,.92); color:var(--ink); font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.cbody{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:5px; flex:1; }
.cbody h3{ font-size:17px; }
.meta{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:12.5px; color:var(--dim); }
.price{ font-weight:700; color:var(--ink); }
.instr{ font-size:12.5px; color:var(--faint); }

/* coach cards */
.avatar{ width:58px; height:58px; border-radius:16px; display:grid; place-items:center; color:#fff; font-family:"Fraunces",serif; font-weight:600; font-size:23px; background:var(--grad-brand); margin-bottom:12px; box-shadow:0 10px 22px rgba(91,82,236,.28); }
.head{ color:var(--indigo-600); font-weight:600; font-size:13px; margin-top:2px; }
.specs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.chip{ border:1px solid var(--glass-brd); border-radius:999px; padding:5px 12px; font-size:12px; color:var(--body); background:var(--glass-2); }
.pill{ display:inline-block; font-size:11.5px; font-weight:600; padding:3px 11px; border-radius:999px; background:var(--circle); color:#fff; }
.pill.off{ background:rgba(120,110,180,.14); color:var(--dim); }

/* becomes / bcards / ccards (coaches) */
.becomes{ border-top:1px solid var(--line); margin-top:20px; padding-top:48px; }
.bcard{ background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); }
.bcard h3{ margin:0 0 10px; font-size:18px; }
.bcard ul,.bcard ol{ margin:0; padding-left:18px; }
.bcard li{ margin:9px 0; color:var(--body); font-size:14.5px; }
.bcerts-h{ text-align:center; margin:44px 0 6px; font-size:20px; }
.ccard{ display:block; background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .22s; }
.ccard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.cc-t{ font-family:"Fraunces",Georgia,serif; font-weight:600; color:var(--ink); font-size:17px; margin-bottom:6px; }
.cc-d{ font-size:13.5px; color:var(--body); }
.cc-more{ display:inline-block; margin-top:12px; color:var(--indigo); font-weight:600; font-size:13.5px; }
.cc-price{ display:inline-block; margin-top:12px; margin-right:10px; padding:4px 11px; border-radius:999px; background:var(--wash); color:var(--ink); font-weight:600; font-size:12.5px; border:1px solid var(--glass-brd); }
.bcta{ text-align:center; margin-top:32px; }

/* four forms showcase */
.form-card{ position:relative; background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--radius); padding:26px 24px 24px; box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .22s; overflow:hidden; }
.form-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.form-card .top{ position:absolute; top:0; left:0; right:0; height:4px; border-radius:0; }
.picon,.ico{ width:50px; height:50px; border-radius:15px; display:grid; place-items:center; margin-bottom:13px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }
.ico svg,.picon svg{ width:25px; height:25px; }
.tri .picon,.tri .ico{ background:color-mix(in srgb,var(--triangle) 22%,#fff); } .tri .picon svg,.tri .ico svg{ fill:var(--triangle); }
.cir .picon,.cir .ico{ background:color-mix(in srgb,var(--circle) 22%,#fff); } .cir .picon svg,.cir .ico svg{ fill:var(--circle); }
.rec .picon,.rec .ico{ background:color-mix(in srgb,var(--rectangle) 22%,#fff); } .rec .picon svg,.rec .ico svg{ fill:var(--rectangle); }
.cur .picon,.cur .ico{ background:color-mix(in srgb,var(--curve) 22%,#fff); } .cur .picon svg,.cur .ico svg{ fill:none; stroke:var(--curve); }
.tri .top{ background:var(--triangle); } .cir .top{ background:var(--circle); } .rec .top{ background:var(--rectangle); } .cur .top{ background:var(--curve); }
.q{ font-family:"Fraunces",serif; font-size:17px; color:var(--ink); line-height:1.42; margin:2px 0 6px; }
.row{ display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; margin-top:6px; }
.k{ font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; font-weight:700; }

/* pathway steps */
.steps{ display:grid; gap:16px; }
.step{ display:flex; gap:16px; align-items:flex-start; background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow-sm); }
.step .num,.num{ flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-family:"Fraunces",serif; font-weight:600; font-size:18px; color:#fff; background:var(--grad-brand); box-shadow:0 8px 18px rgba(91,82,236,.26); }
.sn{ font-family:"Fraunces",serif; color:var(--indigo); font-weight:600; }

/* axes — as smart cards */
.axis{ display:block; text-align:center; background:var(--glass); border:1px solid var(--glass-brd); border-top:3px solid var(--indigo);
  border-radius:var(--radius); padding:24px 22px; box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .22s; }
.axis:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.axis h3{ font-size:19px; margin-bottom:8px; }
.axis p{ font-size:14.5px; margin:0; }
.ax-s{ border-top-color:var(--indigo); } .ax-s h3{ color:var(--indigo); }
.ax-h{ border-top-color:var(--circle); } .ax-h h3{ color:var(--circle); }
.ax-p{ border-top-color:var(--triangle); } .ax-p h3{ color:var(--triangle); }
/* benefits list — clean check rows */
.benefit{ display:flex; align-items:flex-start; gap:12px; text-align:left; background:var(--glass); border:1px solid var(--glass-brd);
  border-radius:16px; padding:15px 18px; box-shadow:var(--shadow-sm); margin-bottom:12px; font-size:14.5px; }
.benefit .ico,.benefit .picon{ margin-bottom:12px; }
.check{ flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:14px;
  color:#fff; background:linear-gradient(135deg,var(--circle),var(--rectangle)); font-weight:700; }
.pcard{ position:relative; }
.picon{ color:var(--c,var(--indigo)); background:color-mix(in srgb,var(--c,var(--indigo)) 15%,#fff); }
.picon svg{ stroke:currentColor; }

/* For You — persona cards */
.foryou{ padding:24px 20px; }
.fico{ width:50px; height:50px; border-radius:15px; display:grid; place-items:center; margin:0 auto 14px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }
.fico svg{ width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tri .fico{ background:color-mix(in srgb,var(--triangle) 16%,#fff); color:var(--triangle); }
.cir .fico{ background:color-mix(in srgb,var(--circle) 16%,#fff); color:var(--circle); }
.rec .fico{ background:color-mix(in srgb,var(--rectangle) 16%,#fff); color:var(--rectangle); }
.cur .fico{ background:color-mix(in srgb,var(--curve) 16%,#fff); color:var(--curve); }
.foryou h4{ font-family:"Fraunces",Georgia,serif; font-size:16px; color:var(--ink); margin:0 0 6px; font-weight:600; }
.foryou p{ font-size:13.5px; color:var(--body); margin:0; max-width:none; }
.gain-wrap{ max-width:860px; margin:48px auto 0; }
.gain-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:700px){ .gain-grid{ grid-template-columns:1fr; } }
.tag{ display:inline-block; font-size:12px; font-weight:600; padding:4px 11px; border-radius:999px; background:var(--wash); color:var(--indigo-600); border:1px solid var(--glass-brd); margin:3px 4px 0 0; }
.philo,.phil-tags{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; }

/* metrics */
.metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:820px){ .metrics{ grid-template-columns:1fr; } }
.mbox{ background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); text-align:center; }
.mbox .big,.mbox b{ font-family:"Fraunces",serif; font-size:34px; color:var(--ink); line-height:1; }
.mrow{ display:flex; justify-content:center; gap:8px; align-items:baseline; }
.badge-wrap{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:10px; }

/* video */
.video-frame{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:16/9; background:#0b0b16; border:1px solid var(--glass-brd); }
.video-frame iframe,.video-frame video{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* program cards */
.pcard{ background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .22s; }
.pcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.pcard-link{ color:var(--indigo); font-weight:600; }

/* band CTA — glass over gradient */
.band{
  position:relative; overflow:hidden; border-radius:28px; padding:56px 36px; text-align:center; color:#fff;
  background:linear-gradient(120deg,var(--triangle),var(--curve) 42%,var(--indigo) 80%,var(--rectangle));
  box-shadow:var(--shadow-lg);
}
.band::after{ content:""; position:absolute; inset:0; background:radial-gradient(600px 280px at 78% -20%, rgba(255,255,255,.28), transparent 60%); pointer-events:none; }
.band h2{ color:#fff; font-size:clamp(24px,3.6vw,34px); max-width:22ch; margin:0 auto; position:relative; }
.band p{ color:rgba(255,255,255,.92); margin:14px auto 0; max-width:52ch; position:relative; font-size:15.5px; }
.band .btn{ position:relative; margin-top:24px; background:#fff; color:var(--indigo); }

/* detail views */
.detail-hero{ border-radius:26px; padding:40px 32px; color:#fff; box-shadow:var(--shadow-lg);
  background-color:var(--ink); background-size:cover; background-position:center; background-image:var(--grad-brand); position:relative; overflow:hidden; }
.detail-hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(500px 240px at 85% -10%, rgba(255,255,255,.24), transparent 60%); pointer-events:none; }
.detail-hero .level{ position:static; display:inline-block; margin-bottom:12px; }
.detail-hero h1{ color:#fff; font-size:clamp(26px,3.8vw,40px); position:relative; }
.detail-hero .sub{ color:rgba(255,255,255,.94); font-size:16.5px; margin-top:10px; max-width:60ch; position:relative; }
.detail-hero .dm{ color:rgba(255,255,255,.85); font-size:13.5px; margin-top:14px; position:relative; }
.detail{ background:var(--glass); border:1px solid var(--glass-brd); border-radius:26px; box-shadow:var(--shadow); padding:36px 32px; }
.detail .top{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.detail .avatar{ width:78px; height:78px; font-size:30px; margin:0; }
.detail h1{ font-size:clamp(24px,3.6vw,34px); }
.detail .head{ font-size:15px; }
.block{ margin-top:24px; }
.block h4{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:8px; }
.mod{ background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:22px; margin-bottom:14px; }
.mod h3{ font-size:17px; margin-bottom:6px; }
.llist{ list-style:none; margin:8px 0 0; padding:0; }
.llist li{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:14px; }
.llist li:first-child{ border-top:none; }
.badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:600; background:var(--circle); color:#fff; }
.back{ display:inline-block; margin:6px 0 16px; color:var(--dim); cursor:pointer; }
.back:hover{ color:var(--ink); }
.sub{ color:var(--dim); }
.dm{ color:var(--dim); font-size:13.5px; }

/* states */
.empty,.loading{ text-align:center; color:var(--dim); padding:64px 0; }
.loading::after{ content:""; display:inline-block; width:16px; height:16px; margin-left:10px; border:2px solid var(--line); border-top-color:var(--indigo); border-radius:50%; vertical-align:middle; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* footer */
footer{ padding:44px 0; border-top:1px solid var(--glass-brd); color:var(--dim); font-size:13px; margin-top:24px;
  background:rgba(255,255,255,.4); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.foot{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.foot a{ color:var(--body); }
.foot a:hover{ color:var(--ink); }

/* misc */
.bt{ font-weight:600; color:var(--ink); }