/* ============================================================
   DEMAN · demanone.com — design system
   Pure-text wordmark · 通电辉光 · Deman 紫 · 深/浅双主题
   ============================================================ */

:root{
  /* violet system — shared across themes */
  --v-signature: oklch(0.62 0.21 293);
  --v-bright:    oklch(0.74 0.17 300);
  --v-neon:      oklch(0.88 0.10 302);
  --v-deep:      oklch(0.46 0.20 290);
  --v-magenta:   oklch(0.63 0.21 330);
  --v-blue:      oklch(0.63 0.18 268);

  /* DARK theme (default) */
  --bg:        oklch(0.145 0.012 292);
  --bg-2:      oklch(0.175 0.014 292);
  --surface:   oklch(0.205 0.016 292);
  --surface-2: oklch(0.245 0.018 292);
  --line:      oklch(0.32 0.02 292);
  --line-soft: oklch(0.26 0.018 292);
  --text:      oklch(0.96 0.005 292);
  --text-dim:  oklch(0.74 0.02 292);
  --text-mute: oklch(0.56 0.02 292);
  --glow:      0 0 1px oklch(0.86 0.1 302/.7), 0 0 18px oklch(0.62 0.21 293/.7), 0 0 44px oklch(0.62 0.21 293/.4);
  --card-grad: linear-gradient(180deg, oklch(0.215 0.017 292), oklch(0.185 0.014 292));
  --aura:
     radial-gradient(1200px 700px at 82% -10%, oklch(0.3 0.07 295 / .55), transparent 60%),
     radial-gradient(950px 620px at -6% 14%, oklch(0.27 0.06 320 / .4), transparent 55%);
  --shadow: 0 24px 60px -28px oklch(0 0 0 / .8);

  --mono:"JetBrains Mono",ui-monospace,monospace;
  --sans:"Space Grotesk","Noto Sans SC",system-ui,sans-serif;
  --cn:"Noto Sans SC","Space Grotesk",system-ui,sans-serif;
  --display:"Saira","Noto Sans SC",sans-serif;
  --hud:"Chakra Petch","Noto Sans SC",sans-serif;

  --maxw:1240px;
  --r:18px;
}

html[data-theme="light"]{
  --bg:        oklch(0.975 0.004 292);
  --bg-2:      oklch(0.955 0.006 292);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.965 0.006 292);
  --line:      oklch(0.88 0.012 292);
  --line-soft: oklch(0.92 0.008 292);
  --text:      oklch(0.18 0.02 292);
  --text-dim:  oklch(0.40 0.02 292);
  --text-mute: oklch(0.55 0.02 292);
  --v-signature: oklch(0.54 0.22 293);
  --v-bright:    oklch(0.58 0.21 296);
  --glow: 0 0 18px oklch(0.62 0.21 293/.22);
  --card-grad: linear-gradient(180deg, oklch(1 0 0), oklch(0.975 0.005 292));
  --aura:
     radial-gradient(1100px 650px at 84% -12%, oklch(0.86 0.07 295 / .6), transparent 58%),
     radial-gradient(900px 600px at -6% 12%, oklch(0.88 0.05 320 / .5), transparent 55%);
  --shadow: 0 22px 50px -30px oklch(0.5 0.1 292 / .35);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  background:var(--aura), var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
  transition:background-color .4s ease, color .4s ease;
}
.cn{ font-family:var(--cn); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
section{ position:relative; }
::selection{ background:var(--v-signature); color:#fff; }

/* ---------- wordmark ---------- */
.logo{ font-family:var(--display); font-style:italic; font-weight:900; text-transform:uppercase; letter-spacing:-.01em; color:var(--text); display:inline-block; line-height:1; }
.logo.glow{ color:var(--text); text-shadow:var(--glow); }
html[data-theme="light"] .logo.glow{ color:var(--v-deep); }

/* ---------- buttons ---------- */
.btn{ font-family:var(--hud); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.05em;
  display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:11px; cursor:pointer; border:1px solid transparent;
  transition:.2s ease; white-space:nowrap; }
.btn .ic{ width:15px; height:15px; }
.btn-primary{ color:#fff; background:linear-gradient(180deg,var(--v-signature),var(--v-deep)); box-shadow:0 8px 26px -10px var(--v-signature); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -10px var(--v-signature); filter:brightness(1.08); }
.btn-ghost{ color:var(--text); border-color:var(--line); background:transparent; }
.btn-ghost:hover{ border-color:var(--v-signature); color:var(--v-bright); }
.btn-sm{ padding:9px 15px; font-size:11.5px; border-radius:9px; }

/* ---------- eyebrow / headings ---------- */
.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--v-bright);
  display:inline-flex; align-items:center; gap:11px; }
.eyebrow::before{ content:""; width:24px; height:1px; background:var(--v-signature); }
.h-sec{ font-family:var(--cn); font-weight:800; font-size:clamp(28px,3.6vw,42px); letter-spacing:-.02em; line-height:1.12; }
.sec-lede{ color:var(--text-dim); font-size:16.5px; max-width:620px; margin-top:14px; }
.sec-pad{ padding:96px 0; }
.sec-head{ margin-bottom:48px; }

/* ============================================================ NAV */
.nav{ position:sticky; top:0; z-index:100; backdrop-filter:blur(16px);
  background:color-mix(in oklab, var(--bg) 72%, transparent);
  border-bottom:1px solid var(--line-soft); transition:background .4s; }
.nav .wrap{ display:flex; align-items:center; gap:26px; height:70px; }
.nav .brand{ font-size:25px; }
.nav .brand .tld{ font-family:var(--mono); font-style:normal; font-weight:500; font-size:11px; color:var(--text-mute); letter-spacing:.12em; margin-left:7px; vertical-align:middle; text-transform:none; }
.nav .links{ display:flex; gap:4px; margin-left:14px; }
.nav .links a{ font-family:var(--cn); font-weight:500; font-size:14.5px; color:var(--text-dim); padding:9px 13px; border-radius:9px; transition:.18s; position:relative; }
.nav .links a:hover{ color:var(--text); background:var(--surface); }
.nav .links a.active{ color:var(--v-bright); }
.nav .right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.theme-btn{ width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--text-dim); cursor:pointer; display:grid; place-items:center; transition:.2s; flex:none; }
.theme-btn:hover{ color:var(--v-bright); border-color:var(--v-signature); }
.theme-btn svg{ width:18px; height:18px; }
.theme-btn .i-sun{ display:none; } html[data-theme="light"] .theme-btn .i-sun{ display:block; }
html[data-theme="light"] .theme-btn .i-moon{ display:none; }
.burger{ display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; }
.burger svg{ width:20px; height:20px; margin:auto; }

/* mobile drawer */
.drawer{ position:fixed; inset:0; z-index:200; background:color-mix(in oklab,var(--bg) 96%, transparent); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; padding:26px; gap:6px; transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1); }
.drawer.open{ transform:translateX(0); }
.drawer .dtop{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.drawer a{ font-family:var(--cn); font-weight:600; font-size:22px; padding:13px 6px; border-bottom:1px solid var(--line-soft); color:var(--text); }
.drawer a:active{ color:var(--v-bright); }
.drawer .dclose{ width:42px; height:42px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; }
.drawer .dcta{ margin-top:22px; }

/* ============================================================ HERO */
.hero{ padding:84px 0 70px; position:relative; overflow:hidden; }
.hero .grid-tex{ position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(color-mix(in oklab,var(--text) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--text) 5%,transparent) 1px,transparent 1px);
  background-size:46px 46px; mask:radial-gradient(900px 520px at 60% 30%,#000,transparent 78%); }
.hero .inner{ position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:54px; align-items:center; }
.hero-copy .ebrow{ display:inline-flex; margin-bottom:26px; }
.hero-mark{ display:block; font-size:clamp(64px,11vw,148px); line-height:.86; margin:8px 0 18px; }
.hero h1{ font-family:var(--cn); font-weight:800; font-size:clamp(26px,3.4vw,40px); letter-spacing:-.02em; line-height:1.18; margin-bottom:20px; }
.hero h1 .hl{ color:var(--v-bright); }
.hero p.lead{ color:var(--text-dim); font-size:17px; max-width:540px; margin-bottom:30px; }
.hero .cta-row{ display:flex; gap:13px; flex-wrap:wrap; }
.hero-visual{ position:relative; }
.hero-visual .slot-main{ width:100%; height:auto; aspect-ratio:4/5; }
.hero-visual .float{ position:absolute; border-radius:14px; background:var(--card-grad); border:1px solid var(--line); box-shadow:var(--shadow); padding:13px 16px; display:flex; align-items:center; gap:11px; backdrop-filter:blur(6px); }
.hero-visual .f1{ bottom:24px; left:-26px; }
.hero-visual .f2{ top:30px; right:-22px; }
.float .dot{ width:9px; height:9px; border-radius:50%; background:var(--v-magenta); box-shadow:0 0 10px var(--v-magenta); flex:none; }
.float .ft{ font-family:var(--mono); font-size:11px; color:var(--text-mute); letter-spacing:.04em; }
.float .fn{ font-family:var(--display); font-style:italic; font-weight:800; font-size:19px; }

/* stat strip */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:60px;
  border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; background:var(--line-soft); }
.stat{ background:var(--bg); padding:26px 24px; }
.stat .num{ font-family:var(--display); font-style:italic; font-weight:800; font-size:clamp(30px,3.4vw,44px); letter-spacing:-.01em; line-height:1;
  background:linear-gradient(96deg,var(--text),var(--v-bright)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat .lab{ font-family:var(--cn); font-size:13.5px; color:var(--text-dim); margin-top:9px; }

/* ============================================================ BUSINESS MATRIX */
.matrix{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.bcard{ background:var(--card-grad); border:1px solid var(--line); border-radius:var(--r); padding:26px; cursor:pointer; position:relative; overflow:hidden;
  transition:.24s ease; display:flex; flex-direction:column; min-height:200px; }
.bcard::after{ content:""; position:absolute; inset:0; border-radius:var(--r); pointer-events:none; box-shadow:inset 0 0 0 1px transparent; transition:.24s; }
.bcard:hover{ transform:translateY(-4px); border-color:var(--v-signature); }
.bcard:hover::after{ box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--v-signature) 50%,transparent), 0 0 50px -8px color-mix(in oklab,var(--v-signature) 40%,transparent) inset; }
.bcard .bidx{ font-family:var(--mono); font-size:11px; color:var(--text-mute); letter-spacing:.1em; }
.bcard .ben{ font-family:var(--display); font-style:italic; font-weight:800; font-size:15px; color:var(--v-bright); text-transform:uppercase; letter-spacing:.02em; margin-top:auto; }
.bcard .bcn{ font-family:var(--cn); font-weight:700; font-size:21px; letter-spacing:-.01em; margin-top:4px; }
.bcard .bdesc{ font-family:var(--cn); font-size:13.5px; color:var(--text-dim); margin-top:10px; }
.bcard .barrow{ position:absolute; top:24px; right:24px; width:30px; height:30px; border-radius:8px; border:1px solid var(--line); display:grid; place-items:center; color:var(--text-mute); transition:.24s; }
.bcard:hover .barrow{ background:var(--v-signature); border-color:var(--v-signature); color:#fff; transform:rotate(-45deg); }
.bcard .barrow svg{ width:14px; height:14px; }
.span6{ grid-column:span 6; } .span4{ grid-column:span 4; } .span3{ grid-column:span 3; } .span8{ grid-column:span 8; }
.bcard.feat{ background:linear-gradient(135deg, color-mix(in oklab,var(--v-deep) 30%, var(--surface)), var(--surface)); }
.bcard.feat .bcn{ font-size:26px; }

/* business illustrations — brand gradient icon tiles */
.bill{ width:54px; height:54px; border-radius:16px; margin:16px 0 6px; display:grid; place-items:center; color:#fff; position:relative; isolation:isolate;
  background:linear-gradient(145deg,var(--v-signature),var(--v-deep)); box-shadow:0 12px 26px -14px var(--v-signature); transition:transform .28s ease, box-shadow .28s ease; }
.bill::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 1.5px 0 oklch(1 0 0/.28), inset 0 0 0 1px oklch(1 0 0/.1); pointer-events:none; }
.bill svg{ width:30px; height:30px; position:relative; z-index:1; }
.bill .ln{ fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.bill .fl{ fill:#fff; stroke:none; }
.bill .dim{ opacity:.5; }
.bcard:hover .bill{ transform:translateY(-3px) scale(1.05); box-shadow:0 18px 32px -12px var(--v-signature); }
.bill .puls{ transform-box:fill-box; transform-origin:center; }
.bcard:hover .bill .puls{ animation:billpulse 1.5s ease-in-out infinite; }
@keyframes billpulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
.bcard[data-biz="media"] .bill{ background:linear-gradient(145deg,var(--v-magenta),var(--v-signature)); box-shadow:0 12px 26px -14px var(--v-magenta); }
.bcard[data-biz="media"]:hover .bill{ box-shadow:0 18px 32px -12px var(--v-magenta); }
.bcard[data-biz="play"] .bill{ background:linear-gradient(145deg,var(--v-blue),var(--v-signature)); box-shadow:0 12px 26px -14px var(--v-blue); }
.bcard[data-biz="play"]:hover .bill{ box-shadow:0 18px 32px -12px var(--v-blue); }
.bcard[data-biz="rrr"] .bill{ background:linear-gradient(145deg,var(--v-bright),var(--v-signature)); }
.bcard[data-biz="club"] .bill{ background:linear-gradient(145deg,var(--v-deep),var(--v-blue)); box-shadow:0 12px 26px -14px var(--v-blue); }
.bcard[data-biz="club"]:hover .bill{ box-shadow:0 18px 32px -12px var(--v-blue); }
.bcard.feat .bill{ width:62px; height:62px; border-radius:18px; }
.bcard.feat .bill svg{ width:34px; height:34px; }
@media (prefers-reduced-motion:reduce){ .bcard:hover .bill .puls{ animation:none; } }

/* drawer detail modal */
.modal-bg{ position:fixed; inset:0; z-index:300; background:oklch(0 0 0 /.6); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:.25s; }
.modal-bg.open{ opacity:1; pointer-events:auto; }
.modal{ position:fixed; top:0; right:0; bottom:0; z-index:301; width:min(520px,92vw); background:var(--bg-2); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .34s cubic-bezier(.4,0,.2,1); overflow-y:auto; box-shadow:var(--shadow); }
.modal.open{ transform:translateX(0); }
.modal .mhead{ padding:30px 32px 22px; border-bottom:1px solid var(--line-soft); position:relative; }
.modal .men{ font-family:var(--display); font-style:italic; font-weight:800; color:var(--v-bright); text-transform:uppercase; font-size:14px; letter-spacing:.04em; }
.modal .mcn{ font-family:var(--cn); font-weight:800; font-size:28px; margin-top:6px; }
.modal .mclose{ position:absolute; top:26px; right:28px; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; }
.modal .mbody{ padding:26px 32px 40px; }
.modal .mbody p{ font-family:var(--cn); color:var(--text-dim); font-size:15px; margin-bottom:18px; }
.modal .mslot{ width:100%; aspect-ratio:16/10; margin:6px 0 22px; }
.modal .mfeat{ list-style:none; display:grid; gap:11px; margin-bottom:26px; }
.modal .mfeat li{ font-family:var(--cn); font-size:14.5px; color:var(--text); padding-left:26px; position:relative; }
.modal .mfeat li::before{ content:""; position:absolute; left:0; top:7px; width:11px; height:11px; border-radius:3px; background:var(--v-signature); box-shadow:0 0 8px var(--v-signature); }
.modal .mstat{ display:flex; gap:24px; padding:18px 0; border-top:1px solid var(--line-soft); margin-bottom:24px; }
.modal .mstat .v{ font-family:var(--display); font-style:italic; font-weight:800; font-size:26px; color:var(--v-bright); }
.modal .mstat .k{ font-family:var(--cn); font-size:12.5px; color:var(--text-mute); }

/* ============================================================ COMMUNITIES */
.comm-tabs{ display:flex; gap:8px; margin-bottom:30px; flex-wrap:wrap; }
.tab{ font-family:var(--hud); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.04em; padding:9px 16px; border-radius:999px;
  border:1px solid var(--line); color:var(--text-dim); background:transparent; cursor:pointer; transition:.18s; }
.tab:hover{ color:var(--text); border-color:var(--text-mute); }
.tab.on{ background:var(--v-signature); border-color:var(--v-signature); color:#fff; }
.comm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ccard{ background:var(--card-grad); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:.24s; display:flex; flex-direction:column; }
.ccard:hover{ transform:translateY(-4px); border-color:var(--v-signature); box-shadow:var(--shadow); }
.ccard .cthumb{ position:relative; aspect-ratio:16/9; }
.ccard .cthumb image-slot{ width:100%; height:100%; }
.ccard .plat{ position:absolute; top:11px; left:11px; z-index:5; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 9px; border-radius:7px; background:oklch(0.12 0.01 292 /.78); color:var(--v-neon); border:1px solid color-mix(in oklab,var(--v-signature) 40%,transparent); backdrop-filter:blur(4px); }
.ccard .cbody{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:4px; flex:1; }
.ccard .cgame{ font-family:var(--mono); font-size:11px; color:var(--text-mute); letter-spacing:.06em; text-transform:uppercase; }
.ccard .cname{ font-family:var(--cn); font-weight:700; font-size:19px; letter-spacing:-.01em; }
.ccard .crow{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.ccard .members{ display:flex; align-items:baseline; gap:6px; }
.ccard .members .m{ font-family:var(--display); font-style:italic; font-weight:800; font-size:24px; color:var(--v-bright); }
.ccard .members .l{ font-family:var(--cn); font-size:12px; color:var(--text-mute); }

/* ============================================================ ESPORTS band */
.band{ border:1px solid var(--line); border-radius:24px; overflow:hidden; background:var(--card-grad); display:grid; grid-template-columns:1fr 1fr; }
.band .bcopy{ padding:54px 50px; display:flex; flex-direction:column; justify-content:center; }
.band .bvis{ position:relative; min-height:380px; }
.band .bvis image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.band .chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.chip{ font-family:var(--hud); font-weight:600; font-size:12.5px; padding:7px 13px; border-radius:8px; border:1px solid var(--line); color:var(--text-dim); }

/* ============================================================ REACH / data */
.reach{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.gauge{ background:var(--card-grad); border:1px solid var(--line); border-radius:var(--r); padding:30px; }
.gauge .top{ display:flex; align-items:baseline; justify-content:space-between; }
.gauge .pct{ font-family:var(--display); font-style:italic; font-weight:800; font-size:46px;
  background:linear-gradient(96deg,var(--v-bright),var(--v-magenta)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.gauge .lab{ font-family:var(--cn); font-size:14px; color:var(--text-dim); max-width:60%; text-align:right; }
.gauge .track{ height:8px; border-radius:6px; background:var(--surface-2); margin-top:18px; overflow:hidden; }
.gauge .fill{ height:100%; border-radius:6px; width:0; background:linear-gradient(90deg,var(--v-signature),var(--v-magenta)); box-shadow:0 0 14px var(--v-signature); transition:width 1.3s cubic-bezier(.2,.7,.2,1); }
.reach-side{ background:var(--card-grad); border:1px solid var(--line); border-radius:var(--r); padding:30px; display:flex; flex-direction:column; gap:14px; }
.reach-side .tag-cn{ font-family:var(--cn); font-size:14.5px; color:var(--text); display:flex; gap:10px; align-items:center; }
.reach-side .tag-cn span{ font-family:var(--mono); color:var(--v-bright); font-size:12px; }

/* ============================================================ PARTNERS */
.plogos{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.plogo{ aspect-ratio:16/7; border:1px solid var(--line); border-radius:13px; background:var(--surface); display:grid; place-items:center; overflow:hidden; transition:.2s; }
.plogo:hover{ border-color:var(--v-signature); }
.plogo image-slot{ width:100%; height:100%; }

/* ============================================================ TEAM */
.team{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.tcard{ background:var(--card-grad); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:.2s; }
.tcard:hover{ border-color:var(--v-signature); transform:translateY(-3px); }
.tcard .tphoto{ aspect-ratio:1; }
.tcard .tphoto image-slot{ width:100%; height:100%; }
.tcard .tb{ padding:16px 16px 18px; }
.tcard .tn{ font-family:var(--cn); font-weight:700; font-size:16px; }
.tcard .tr{ font-family:var(--mono); font-size:11px; color:var(--v-bright); letter-spacing:.06em; margin-top:3px; text-transform:uppercase; }

/* ============================================================ JOIN CTA */
.join{ position:relative; border-radius:28px; overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(135deg, color-mix(in oklab,var(--v-deep) 40%,var(--bg-2)), var(--bg-2) 70%);
  padding:72px 56px; text-align:center; }
.join .grid-tex{ position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(color-mix(in oklab,var(--text) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--text) 6%,transparent) 1px,transparent 1px);
  background-size:42px 42px; mask:radial-gradient(600px 300px at 50% 40%,#000,transparent 75%); }
.join .jmark{ font-size:clamp(46px,8vw,92px); line-height:1; margin-bottom:22px; position:relative; }
.join h2{ font-family:var(--cn); font-weight:800; font-size:clamp(24px,3vw,34px); position:relative; margin-bottom:16px; }
.join p{ font-family:var(--cn); color:var(--text-dim); max-width:540px; margin:0 auto 30px; position:relative; }
.join .cta-row{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; position:relative; }

/* ============================================================ FOOTER */
footer.ft{ border-top:1px solid var(--line-soft); margin-top:96px; padding:56px 0 40px; }
.ft .top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:34px; }
.ft .brand{ font-size:30px; }
.ft .addr{ font-family:var(--cn); font-size:13.5px; color:var(--text-mute); margin-top:16px; line-height:1.7; max-width:260px; }
.ft .col h4{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); margin-bottom:16px; }
.ft .col a{ display:block; font-family:var(--cn); font-size:14px; color:var(--text-dim); padding:6px 0; transition:.16s; }
.ft .col a:hover{ color:var(--v-bright); }
.ft .col a .ext{ font-family:var(--mono); font-size:10px; color:var(--text-mute); margin-left:6px; }
.ft .bot{ display:flex; justify-content:space-between; align-items:center; margin-top:46px; padding-top:24px; border-top:1px solid var(--line-soft); flex-wrap:wrap; gap:12px; }
.ft .bot span{ font-family:var(--mono); font-size:11.5px; color:var(--text-mute); letter-spacing:.04em; }

/* ---------- language pill ---------- */
.lang-btn{ height:40px; padding:0 13px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--text-dim); cursor:pointer;
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.06em; display:flex; align-items:center; gap:6px; transition:.2s; flex:none; }
.lang-btn:hover{ color:var(--v-bright); border-color:var(--v-signature); }
.lang-btn svg{ width:15px; height:15px; }

/* ---------- LIVE badge + online ---------- */
.live{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 8px; border-radius:7px; border:1px solid var(--line); color:var(--text-mute); }
.live .pulse{ width:6px; height:6px; border-radius:50%; background:var(--text-mute); }
.live.on{ color:var(--v-neon); border-color:color-mix(in oklab,var(--v-signature) 45%,transparent); }
.live.on .pulse{ background:#36d399; box-shadow:0 0 8px #36d399; animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.ccard .online{ font-family:var(--mono); font-size:11px; color:var(--text-mute); }
.ccard .online b{ color:#36d399; font-weight:500; }

/* ============================================================ MEDIA PAGE: cases */
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.case{ background:var(--card-grad); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:.24s; display:flex; flex-direction:column; }
.case:hover{ transform:translateY(-4px); border-color:var(--v-signature); box-shadow:var(--shadow); }
.case .cv{ aspect-ratio:16/10; position:relative; background:var(--surface-2); }
.case .cv img,.case .cv image-slot{ width:100%; height:100%; object-fit:cover; display:block; }
.case .ctag{ position:absolute; top:11px; left:11px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 9px; border-radius:7px; background:oklch(0.12 0.01 292/.78); color:var(--v-neon); border:1px solid color-mix(in oklab,var(--v-signature) 40%,transparent); backdrop-filter:blur(4px); }
.case .cb{ padding:18px 20px 20px; }
.case .cb .nm{ font-family:var(--cn); font-weight:700; font-size:18px; }
.case .cb .ds{ font-family:var(--cn); font-size:13.5px; color:var(--text-dim); margin-top:6px; }

/* charts */
.charts{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.chartc{ background:var(--card-grad); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.chartc .ct{ padding:18px 22px 12px; font-family:var(--cn); font-weight:700; font-size:16px; }
.chartc .ct span{ font-family:var(--mono); font-size:11px; color:var(--text-mute); font-weight:400; margin-left:8px; }
.chartc .cimg{ position:relative; background:var(--surface-2); }
.chartc .cimg img,.chartc .cimg image-slot{ width:100%; display:block; }

/* pricing */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
.price{ background:var(--card-grad); border:1px solid var(--line); border-radius:var(--r); padding:30px 26px; display:flex; flex-direction:column; gap:6px; position:relative; transition:.2s; }
.price.hot{ border-color:var(--v-signature); box-shadow:0 0 50px -16px var(--v-signature); }
.price .ptag{ position:absolute; top:-11px; left:26px; font-family:var(--hud); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:7px; background:linear-gradient(180deg,var(--v-signature),var(--v-deep)); color:#fff; }
.price .pname{ font-family:var(--hud); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--v-bright); }
.price .pcn{ font-family:var(--cn); font-weight:700; font-size:21px; }
.price .pval{ font-family:var(--display); font-style:italic; font-weight:800; font-size:40px; margin:8px 0 4px; letter-spacing:-.01em; }
.price .pval small{ font-family:var(--cn); font-style:normal; font-weight:500; font-size:14px; color:var(--text-mute); }
.price .pnote{ font-family:var(--cn); font-size:12.5px; color:var(--text-mute); }
.price ul{ list-style:none; display:grid; gap:10px; margin:18px 0 22px; }
.price li{ font-family:var(--cn); font-size:14px; color:var(--text); padding-left:24px; position:relative; }
.price li::before{ content:""; position:absolute; left:0; top:7px; width:10px; height:10px; border-radius:3px; background:var(--v-signature); }
.price .btn{ width:100%; justify-content:center; margin-top:auto; }
.pdisclaim{ font-family:var(--cn); font-size:12.5px; color:var(--text-mute); text-align:center; margin-top:22px; }

/* channel pricing (real data) */
.chans{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.chan{ background:var(--card-grad); border:1px solid var(--line); border-radius:var(--r); padding:26px 28px; position:relative; }
.chan.hot{ border-color:var(--v-signature); box-shadow:0 0 50px -18px var(--v-signature); }
.chan .ptag{ position:absolute; top:-11px; left:26px; font-family:var(--hud); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:7px; background:linear-gradient(180deg,var(--v-signature),var(--v-deep)); color:#fff; }
.chan .ctop{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.chan .cname2{ font-family:var(--cn); font-weight:700; font-size:20px; line-height:1.2; }
.chan .cname2 .en2{ display:block; font-family:var(--mono); font-size:10.5px; color:var(--text-mute); letter-spacing:.06em; margin-top:4px; text-transform:uppercase; }
.chan .cprice{ text-align:right; flex:none; }
.chan .cprice .p{ font-family:var(--display); font-style:italic; font-weight:800; font-size:30px; color:var(--v-bright); letter-spacing:-.01em; white-space:nowrap; }
.chan .cprice .u{ font-family:var(--cn); font-size:11px; color:var(--text-mute); display:block; }
.chan .cstats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px 14px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line-soft); }
.chan .cstat .v{ font-family:var(--display); font-style:italic; font-weight:800; font-size:19px; }
.chan .cstat .k{ font-family:var(--cn); font-size:11px; color:var(--text-mute); margin-top:2px; }
.chan .cmeta{ font-family:var(--cn); font-size:12px; color:var(--text-dim); margin-top:16px; display:flex; flex-wrap:wrap; gap:7px; }
.chan .cmeta span{ border:1px solid var(--line); border-radius:7px; padding:4px 9px; }
.chan .cmeta span b{ color:var(--v-bright); font-weight:500; }
.addons{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:16px; }
.addon{ background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:18px 20px; }
.addon .av{ font-family:var(--display); font-style:italic; font-weight:800; font-size:24px; color:var(--v-bright); }
.addon .ak{ font-family:var(--cn); font-weight:600; font-size:14px; margin-top:5px; }
.addon .an{ font-family:var(--cn); font-size:12px; color:var(--text-mute); margin-top:6px; line-height:1.5; }
.subcap{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); margin:34px 0 14px; }
@media(max-width:760px){ .chans{ grid-template-columns:1fr; } .addons{ grid-template-columns:1fr 1fr; } }

@media(max-width:1000px){ .cases{ grid-template-columns:repeat(2,1fr); } .pricing{ grid-template-columns:1fr; } .charts{ grid-template-columns:1fr; } }
@media(max-width:760px){ .cases{ grid-template-columns:1fr; } }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } html{ scroll-behavior:auto; } }

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .hero .inner{ grid-template-columns:1fr; gap:40px; }
  .hero-visual{ max-width:440px; }
  .band{ grid-template-columns:1fr; } .band .bvis{ min-height:260px; order:-1; }
  .team{ grid-template-columns:repeat(3,1fr); }
  .reach{ grid-template-columns:1fr; }
}
@media(max-width:1040px){
  .nav .links{ display:none; } .burger{ display:grid; }
  .nav .right .btn{ display:none; }
}
@media(max-width:760px){
  .hero-mark{ font-size:clamp(56px,16vw,96px); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .matrix .bcard{ grid-column:span 12 !important; min-height:auto; }
  .comm-grid{ grid-template-columns:1fr; }
  .plogos{ grid-template-columns:repeat(2,1fr); }
  .team{ grid-template-columns:repeat(2,1fr); }
  .sec-pad{ padding:64px 0; }
  .join{ padding:48px 24px; }
  .ft .top{ grid-template-columns:1fr 1fr; gap:28px; }
  .band .bcopy{ padding:36px 28px; }
}
@media(max-width:430px){
  .hero-visual .f1{ left:0; } .hero-visual .f2{ right:0; }
  .ft .top{ grid-template-columns:1fr; }
}