/* =========================================================================
   Web3Plus — Corporate Site
   Structure  : the Notion-document layout (hero / track record / ecosystem /
                case studies / traffic engine / comparison / services / contact)
   Visual DNA : measured from Web3Plus公司简介.pptx
                bg #0A0A0A · gold #F5B90F · highlight #FFE066 · deep #C99400
                body #C9CDD3 · light #E8EAED · dim #8A8F98 · faint #737A82
   Language   : English is primary (large, white). Traditional Chinese is the
                secondary layer (small, muted/gold) and always lives in a
                .zh / .sec-title-zh / .sub-zh element rendered as its own line.
                Typeface Arial for Latin, Microsoft JhengHei for Han — no
                webfont, zero network requests.
   Icons      : gold line SVG sprite, zero emoji. In tables the deck's own
                three-tier geometric mark set is used (tick / triangle / cross).
   ========================================================================= */

:root{
  --bg:#0A0A0A;  --bg-2:#000000;  --bg-3:#141414;
  --card:rgba(255,255,255,.035);
  --card-2:rgba(255,255,255,.06);
  --wash:rgba(245,185,15,.16);

  --gold:#F5B90F;  --gold-hi:#FFE066;  --gold-deep:#C99400;
  --gold-line:rgba(245,185,15,.22);
  --gold-glow:rgba(245,185,15,.30);

  --white:#FFFFFF;  --text:#E8EAED;  --text-2:#C9CDD3;
  --muted:#8A8F98;  --muted-2:#737A82;
  --line:rgba(255,255,255,.10);  --line-2:rgba(255,255,255,.16);

  /* Latin first (Arial, as in the deck); Han glyphs fall through to the
     Traditional Chinese faces so 繁中 renders with 繁中 forms. */
  --font:"Helvetica Neue",Arial,"Microsoft JhengHei","微軟正黑體","PingFang TC",
         "Hiragino Sans CNS","Noto Sans TC","Source Han Sans TC","Microsoft YaHei",sans-serif;

  --r:14px;  --r-sm:8px;  --nav-h:72px;  --wrap:1120px;
}

*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;background:var(--bg);color:var(--text-2);
  font-family:var(--font);font-size:15px;line-height:1.72;letter-spacing:.005em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--gold);color:#0A0A0A}

.wrap{width:min(var(--wrap),100% - 56px);margin-inline:auto}
.grad,.gold{color:var(--gold)}
.hi{color:var(--gold-hi)}
strong,b{color:var(--white);font-weight:700}
.muted{color:var(--muted)}

/* =========================================================================
   Icon system — gold line icons, never emoji
   ========================================================================= */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico-sm{width:15px;height:15px;stroke-width:1.8}
.ico-lg{width:22px;height:22px}

.ico-box{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;
  border:1px solid var(--gold-line);background:rgba(245,185,15,.09);color:var(--gold);
  flex:0 0 auto;transition:background .3s ease,border-color .3s ease,transform .3s ease}
.ico-box-lg{width:52px;height:52px;border-radius:14px}
.ico-box-sm{width:30px;height:30px;border-radius:9px}
.ico-box-sm .ico{width:16px;height:16px}

/* project brand marks — the real client logos, with their plate stripped out
   so both the silver C and the orange dragon sit correctly on the dark shell */
.proj-logo{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:54px;height:54px;border-radius:14px;padding:8px;
  border:1px solid var(--gold-line);background:rgba(255,255,255,.045);
  transition:border-color .3s ease,background .3s ease}
.proj-logo img{width:100%;height:100%;object-fit:contain;display:block}
.proj-logo-case{width:40px;height:40px;border-radius:11px;padding:5px}
.case:hover .proj-logo{border-color:var(--gold);background:rgba(245,185,15,.08)}

/* the deck's own mark set — geometric chars, not emoji */
.mk{display:inline-block;width:1.45em;font-weight:700;text-align:left}
.mk.yes{color:var(--gold)}
.mk.mid{color:var(--text-2)}
.mk.no{color:var(--muted-2)}

/* =========================================================================
   Bilingual layer — English primary, Traditional Chinese secondary.
   Rule: EN carries the message; TC always drops onto its own line, smaller,
   dimmer, and never competes for the first read.
   ========================================================================= */
.hl{color:var(--gold);font-weight:700}
.zh{color:var(--muted)}

/* section title — EN headline with the TC line beneath, in deck gold */
.sec-title-zh{display:block;margin-top:11px;font-size:15px;font-weight:700;
  color:var(--gold);letter-spacing:.05em;line-height:1.5}

/* sub-block titles (icon + EN title + TC line) */
.sub-title-txt{display:flex;flex-direction:column;gap:3px}
.sub-zh{font-size:13px;font-weight:400;color:var(--muted)}

/* body copy pairs */
.hero-sub .zh,.sec-desc .zh,.sub-desc .zh{display:block;margin-top:11px;font-size:13.5px;
  color:var(--muted-2);line-height:1.8}
.hero-quote blockquote .zh{display:block;margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);font-size:13.5px;color:var(--muted);line-height:1.8}
.pillar p .zh,.card p .zh{display:block;margin-top:9px;font-size:12.5px;color:var(--muted-2);line-height:1.78}
.pillar h3 .zh,.card h4 .zh,.service-item h4 .zh{display:block;margin-top:4px;font-size:13px;
  font-weight:700;color:var(--gold)}
.service-item p .zh,.plan-block p .zh{display:block;margin-top:8px;font-size:12.5px;color:var(--muted-2)}
.plan-top h3 .zh{display:block;margin-top:5px;font-size:13px;font-weight:700;color:var(--gold)}
.plan-stage .zh{display:block;margin-top:3px;font-weight:400;color:var(--muted)}
.cta-inner p .zh{display:block;margin-top:9px}

/* cards & stats */
.stat-label .zh{display:block;margin-top:5px;font-size:12.5px;color:var(--muted-2)}
.ribbon-band .rb-inner h3 .zh{display:block;margin-top:12px;font-size:.5em;font-weight:700;
  color:var(--muted);letter-spacing:.06em}
.ribbon-band .rb-inner p .zh{display:block;margin-top:4px;color:var(--muted-2)}

/* tables — EN on top, TC underneath in every header and cell */
.tbl th .zh,.tbl td .zh{display:block;margin-top:3px;font-size:11.5px;font-weight:400;
  letter-spacing:.03em;text-transform:none;color:var(--muted-2);line-height:1.55}
.tbl thead th .zh{color:var(--muted-2)}
/* KOL matrix panels — EN line over its TC line, same as everywhere else */
.km-langs span .zh{display:block;margin-top:2px;font-size:11px;color:var(--muted-2)}
.km-total span .zh{display:block;margin-top:3px;font-size:11.5px;color:var(--muted-2)}
.km-desc .zh{display:block;margin-top:9px;font-size:12.5px;line-height:1.75;color:var(--muted-2)}
.km-stat span .zh{display:block;margin-top:2px;font-size:10.5px;color:var(--muted-2)}

/* case accordion */
.ticks li .zh{display:block;margin-top:8px;font-size:13px;color:var(--muted);line-height:1.78}
.case-meta .zh{display:block;margin-top:3px}
.case-body-inner.placeholder p .zh{display:block;margin-top:6px}

/* footer */
.footer .zh{display:block;margin-top:2px}

/* =========================================================================
   Background FX — gold ribbon + diamond particles (deck cover motif)
   ========================================================================= */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-warm{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 62% 46% at 86% 84%,rgba(245,185,15,.22),transparent 66%),
    radial-gradient(ellipse 70% 50% at 12% 4%,rgba(201,148,0,.13),transparent 70%)}
.bg-grid{position:absolute;inset:-2px;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 92% 62% at 50% 12%,#000 0%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 92% 62% at 50% 12%,#000 0%,transparent 80%)}
.bg-ribbon{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:max(1600px,120%);height:100%;opacity:.40}
.ribbon-set{fill:none;stroke-linecap:round}
.ribbon-a{stroke:url(#ribGrad);stroke-width:1.6;opacity:.9}
.ribbon-b{stroke:url(#ribGrad2);stroke-width:1;opacity:.6}
.ribbon-c{stroke:url(#ribGrad);stroke-width:4.5;opacity:.16;filter:blur(3px)}
.particles{position:absolute;inset:0}
.particles i{position:absolute;width:6px;height:6px;background:var(--gold);
  transform:rotate(45deg);opacity:0;animation:twinkle var(--dur,9s) linear var(--delay,0s) infinite}
@keyframes twinkle{
  0%,100%{opacity:0;transform:rotate(45deg) scale(.4)}
  50%{opacity:var(--peak,.75);transform:rotate(45deg) scale(1)}
}
main,header.nav,footer.footer{position:relative;z-index:1}

.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:61;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));box-shadow:0 0 12px var(--gold-glow)}

/* =========================================================================
   Motion primitives
   ========================================================================= */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.07s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}
.reveal[data-d="4"]{transition-delay:.28s}
.reveal[data-d="5"]{transition-delay:.35s}

/* =========================================================================
   Navigation
   ========================================================================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;background:rgba(10,10,10,.6);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease}
.nav.is-stuck{background:rgba(6,6,6,.92);border-bottom-color:var(--gold-line)}
.nav-inner{display:flex;align-items:center;gap:26px}
.brand{flex:0 0 auto;display:flex;align-items:center}
/* logo-mark.png is pre-trimmed to the artwork's bounding box, so this height is
   the height of the mark+wordmark itself, not of some padded canvas. Same file
   in the footer at a smaller size. */
.brand img{height:42px;width:auto}

.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-links a{display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:8px 14px;border-radius:99px;font-size:13.5px;font-weight:700;
  color:var(--text-2);transition:color .22s ease,background .22s ease}
.nav-links a span{font-size:9.5px;font-weight:400;letter-spacing:.12em;color:var(--muted-2)}
.nav-links a:hover{color:var(--white);background:rgba(255,255,255,.05)}
.nav-links a.is-active{color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:12px;margin-left:14px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:99px;border:1px solid transparent;font-size:13.5px;
  font-weight:700;letter-spacing:.02em;white-space:nowrap;
  transition:transform .2s ease,box-shadow .25s ease,background .25s ease,color .25s ease,border-color .25s ease}
.btn-gold{background:linear-gradient(135deg,var(--gold-hi),var(--gold) 42%,var(--gold-deep));
  color:#0A0A0A;box-shadow:0 8px 26px -12px rgba(245,185,15,.85)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(245,185,15,.95)}
.btn-ghost{border-color:var(--gold-line);color:var(--gold)}
.btn-ghost:hover{background:var(--wash);transform:translateY(-2px)}
.btn-sm{padding:9px 18px;font-size:12.5px}
.btn-lg{padding:15px 28px;font-size:14.5px}
/* A button that has to carry a role as well as a handle. Stacking them keeps the
   handle as the primary line and the button width unchanged — spelling the role
   out inline ("Telegram · Co-Founder @SASA2049") widened the row past
   .cta-inner's 900 px cap and dropped the X button onto a line of its own. */
.btn-2line{display:inline-flex;flex-direction:column;align-items:flex-start;
  line-height:1.22;text-align:left}
.btn-role{font-size:10.5px;font-weight:600;letter-spacing:.07em;opacity:.72}

.nav-toggle{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line-2);
  flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nav-toggle span{display:block;width:17px;height:2px;background:var(--text-2);border-radius:2px;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.nav-mobile{position:fixed;top:var(--nav-h);left:0;right:0;z-index:59;display:none;
  flex-direction:column;gap:2px;padding:14px 22px 20px;background:rgba(6,6,6,.97);
  border-bottom:1px solid var(--gold-line);backdrop-filter:blur(16px);max-height:80vh;overflow:auto}
.nav-mobile.is-open{display:flex}
.nav-mobile a{padding:11px 6px;font-size:14px;font-weight:700;color:var(--text-2);
  border-bottom:1px solid rgba(255,255,255,.06)}
.nav-mobile .btn{margin-top:14px;border-bottom:0}

/* =========================================================================
   Section shell + deck-style header (title + gold EN kicker + gold rule)
   ========================================================================= */
.section{position:relative;padding:96px 0}
.sec-head{margin-bottom:44px;max-width:960px}
.sec-meta{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sec-index{font-size:12.5px;font-weight:700;color:var(--gold);letter-spacing:.16em;
  font-variant-numeric:tabular-nums}
.sec-kicker{font-size:12.5px;font-weight:700;color:var(--gold);letter-spacing:.17em;
  text-transform:uppercase}
.sec-title{font-size:clamp(24px,2.9vw,36px);font-weight:700;color:var(--white);line-height:1.28}
.sec-rule{display:block;width:44px;height:3px;border-radius:2px;background:var(--gold);margin-top:16px}
.sec-desc{margin-top:20px;max-width:82ch;font-size:15px;color:var(--text-2)}
.sec-desc strong{color:var(--gold)}

.sub-title{display:flex;align-items:center;gap:12px;margin:54px 0 0;
  font-size:19px;font-weight:700;color:var(--white)}
.sub-title .ico-box-sm{margin-top:-2px}
.sub-desc{margin-top:14px;max-width:82ch;font-size:14.5px;color:var(--text-2)}
.sub-desc strong{color:var(--gold)}

.eyebrow{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:0 0 auto}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{position:relative;padding:calc(var(--nav-h) + 92px) 0 84px}
.hero-title{margin-top:26px;font-size:clamp(31px,4.9vw,60px);font-weight:700;
  color:var(--white);line-height:1.2;letter-spacing:-.005em}
.hero-sub{margin-top:24px;max-width:74ch;font-size:clamp(14px,1.35vw,16px);color:var(--text-2)}
.hero-sub strong{color:var(--gold)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

/* Hero side visual — a portrait strip that fills the empty right column
   beside the headline. The headline keeps its full measure (its longest line
   inks out at ~838px of the 1120px wrap), so the strip may only claim the ~290px
   that stays empty: 256px + a 35px gutter. Below 1100px that gutter collapses
   (the clamp() font shrinks but the wrap does not), so the strip reflows to a
   full-width card under the CTA instead of colliding with the type. */
.hero-stage{position:relative}
.hero-visual{margin:0}
.hero-visual img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:1101px){
  .hero-visual{position:absolute;top:0;right:0;bottom:0;width:256px;overflow:hidden;
    border:1px solid var(--gold-line);border-radius:var(--r);background:#000}
  .hero-visual img{object-position:50% 42%}
}
@media (max-width:1100px){
  .hero-visual{margin-top:40px;overflow:hidden;
    border:1px solid var(--gold-line);border-radius:var(--r);background:#000}
  .hero-visual img{height:100%}
}
/* tablet: a band across the whole column — a 560px card would leave a hole
   beside it, and the column is wide enough for a cinematic crop */
@media (min-width:601px) and (max-width:1100px){
  .hero-visual{width:100%;aspect-ratio:16/9;max-height:360px}
  .hero-visual img{object-position:50% 44%}
}
/* phone: portrait card — a 16:9 slice of one tower says almost nothing */
@media (max-width:600px){
  .hero-visual{width:100%;max-width:560px;aspect-ratio:4/5}
  .hero-visual img{object-position:50% 34%}
}

.hero-quote{position:relative;margin-top:52px;padding:30px 34px 26px;
  border:1px solid var(--gold-line);border-radius:var(--r);background:var(--card)}
.hero-quote::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;
  border-radius:3px;background:linear-gradient(var(--gold-hi),var(--gold-deep))}
.quote-mark{font-size:58px;font-weight:700;color:var(--gold-hi);line-height:.58;
  margin-bottom:14px;opacity:.9}
.hero-quote blockquote{font-size:15px;color:var(--text);line-height:1.85}
.hero-quote blockquote .hl{font-weight:700}
.hero-quote figcaption{margin-top:16px;font-size:11px;font-weight:700;letter-spacing:.16em;
  color:var(--muted);text-transform:uppercase}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.stat-card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--gold-line);
  border-radius:var(--r);padding:24px 22px;transition:transform .35s ease,border-color .35s ease,background .35s ease}
.stat-card::after{content:"";position:absolute;right:-40px;bottom:-60px;width:160px;height:160px;
  background:radial-gradient(circle,var(--gold-glow),transparent 68%);opacity:0;transition:opacity .4s ease}
.stat-card:hover{transform:translateY(-6px);border-color:var(--gold);background:var(--card-2)}
.stat-card:hover::after{opacity:.8}
.stat-num{margin-top:18px;font-size:clamp(30px,3.6vw,44px);font-weight:700;color:var(--gold-hi);
  line-height:1;font-variant-numeric:tabular-nums}
.stat-label{margin-top:12px;font-size:13.5px;color:var(--text-2)}

/* =========================================================================
   Ribbon band
   ========================================================================= */
.ribbon-band{position:relative;overflow:hidden;margin:0 0 8px;
  border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line);
  background:#000}
.ribbon-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.42;filter:saturate(.9)}
.ribbon-band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,10,10,.94),rgba(10,10,10,.6) 52%,rgba(10,10,10,.94))}
.rb-inner{position:relative;z-index:2;width:min(var(--wrap),100% - 56px);margin-inline:auto;
  padding:56px 0;text-align:center}
.rb-inner h3{font-size:clamp(20px,2.6vw,31px);font-weight:700;color:var(--white);line-height:1.4}
.rb-inner p{margin-top:14px;font-size:13.5px;color:var(--muted);letter-spacing:.04em}

/* =========================================================================
   Pillar cards (About / barriers)
   ========================================================================= */
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.pillar{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px 24px 28px;
  transition:border-color .3s ease,background .3s ease,transform .3s ease}
.pillar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--gold-hi),var(--gold-deep));opacity:.85}
.pillar:hover{border-color:var(--gold-line);background:var(--card-2);transform:translateY(-5px)}
.pillar:hover .ico-box{background:rgba(245,185,15,.16);border-color:var(--gold)}
.pillar h3{margin-top:20px;font-size:17.5px;font-weight:700;color:var(--white);line-height:1.4}
.pillar p{margin-top:12px;font-size:13.5px;color:var(--text-2)}

/* =========================================================================
   Our Journey — one-line timeline inside 01 About.
   Nine nodes share a single rail: the year sits above the line, the stage
   name and its TC gloss below. No cards, no bullets — the rail tells the
   story. Both text blocks reserve two lines of height so every node lines
   up whether its label wraps or not.
   ========================================================================= */
.tl-scroll{margin-top:30px}
.tl{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  list-style:none;margin:0;padding:0}
.tl-item{display:grid;grid-template-rows:auto 22px auto auto;
  justify-items:center;text-align:center;padding:0 6px}
.tl-year{font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.08em;
  font-variant-numeric:tabular-nums;line-height:1.3}
.tl-dot{position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:22px}
.tl-dot::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--gold-line)}
.tl-dot::after{content:"";position:relative;width:9px;height:9px;border-radius:50%;
  background:var(--gold);transition:transform .3s ease}
/* the rail starts and ends at the first and last node, not at the container */
.tl-item:first-child .tl-dot::before{left:50%}
.tl-item:last-child .tl-dot::before{right:50%}
.tl-name{margin-top:11px;min-height:35px;display:flex;align-items:center;
  justify-content:center;font-size:12.5px;font-weight:700;color:var(--white);
  line-height:1.4}
.tl-zh{margin-top:3px;min-height:36px;display:flex;align-items:flex-start;
  justify-content:center;font-size:12px;color:var(--muted-2);line-height:1.5}
.tl-item:hover .tl-dot::after{transform:scale(1.45)}
.tl-item:hover .tl-name{color:var(--gold-hi)}
/* the last node is a promise, not a delivery — so it reads as a hollow point */
.tl-item.is-future .tl-dot::after{background:transparent;
  border:1.5px solid var(--gold)}
.tl-item.is-future .tl-name{color:var(--gold)}

/* =========================================================================
   Tables
   ========================================================================= */
.table-wrap{margin-top:20px;border:1px solid var(--gold-line);border-radius:var(--r);
  overflow:hidden;background:var(--card)}
.tbl-scroll{overflow-x:auto}
.tbl{min-width:780px;font-size:13.5px}
.tbl th,.tbl td{padding:15px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.07)}
.tbl thead th{font-size:11.5px;font-weight:700;letter-spacing:.11em;color:var(--text-2);
  background:rgba(255,255,255,.035);text-transform:uppercase;vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:rgba(255,255,255,.022)}
.tbl td:first-child,.tbl td.strong{font-size:13.5px;font-weight:700;color:var(--white)}
.tbl .mid{color:var(--text-2)}
.tbl .no{color:var(--muted-2)}

.tbl thead th.col-us{background:var(--wash);color:var(--gold);border-bottom-color:var(--gold-line)}
.tbl td.col-us{background:rgba(245,185,15,.06);color:var(--gold);font-weight:700}

/* the comparison matrix carries the longest bilingual strings */
.table-compare .tbl{min-width:1040px}
.table-compare .tbl th:first-child,.table-compare .tbl td:first-child{min-width:216px}
.table-compare .tbl th:not(:first-child),.table-compare .tbl td:not(:first-child){min-width:186px}

/* =========================================================================
   Project Portfolio — logo wall
   The strip bleeds to the viewport edges and scrolls one full set width per
   loop. Three identical sets back the loop: -33.3333% of the track is exactly
   one set, so the seam never lands inside the visible window.
   It lives in its own <section class="pf-band"> between 01 About and
   02 Live-Room Placement, so it carries no section index and no section rule.
   ========================================================================= */
.pf-band{padding:58px 0 62px;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.012)}
.pf-strip{
  position:relative;margin-top:0;
  width:100vw;margin-left:calc(50% - 50vw);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.pf-track{display:flex;width:max-content;animation:pf-scroll 55s linear infinite}
.pf-set{display:flex;align-items:center}
.pf-item{display:flex;align-items:center;justify-content:center;
  height:54px;margin-right:72px}
.pf-item img{height:44px;width:auto;opacity:.78;
  transition:opacity .3s ease,filter .3s ease}
.pf-item:hover img{opacity:1;filter:drop-shadow(0 0 12px rgba(245,185,15,.35))}
.pf-strip:hover .pf-track{animation-play-state:paused}
@keyframes pf-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-33.3333%,0,0)}
}

/* =========================================================================
   02 Live-room placement
   A · venue cards — the in-app live rooms we place content into. Phone
   screenshots keep a 3:4 frame; the carnival campaign card runs full width
   with the media beside the copy.
   ========================================================================= */
.venue-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px;
  align-items:start}
.venue-card{display:flex;flex-direction:column;min-width:0}
/* Shots render whole, at their own aspect ratio. The frame used to pin 5:6 with
   object-fit:cover, which silently cropped the Binance replay capture down to
   four rows of avatars (losing the last row of names, the whole fifth row and
   the topic line) and cut the carnival photo to a sliver of forehead. Nothing
   needs a fixed ratio now, and the grid is top-aligned, so uneven card heights
   cost nothing. */
.venue-shot{margin:0 0 16px;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid rgba(255,255,255,.14);background:#0C0C0C}
.venue-shot img{width:100%;height:auto;display:block}
/* centred, not top-aligned: the carnival shot is a 3:4 press-of-a-feature at
   578 px tall while its copy runs only ~217 px, so top-aligning parked all the
   slack under the text and read as a mistake. */
.venue-card.is-wide{grid-column:1 / -1;display:grid;grid-template-columns:380px 1fr;
  gap:26px;align-items:center}
.venue-card.is-wide .venue-shot{margin:0}
.venue-body{display:flex;flex-direction:column;min-width:0}
.venue-body .km-head{margin-bottom:12px}
.venue-body .km-note{margin-top:auto;padding-top:14px}

/* =========================================================================
   C · offline presence gallery — event frames plus one dashed note tile, six
   cells so the grid closes on a full row.
   ========================================================================= */
.presence-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
.presence{position:relative;display:flex;flex-direction:column;margin:0;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .3s ease,background .3s ease,transform .3s ease}
.presence:hover{border-color:var(--gold-line);background:var(--card-2);transform:translateY(-4px)}
.presence img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.presence figcaption{padding:13px 16px 15px;border-top:1px solid rgba(255,255,255,.07)}
.p-en{font-size:12.5px;font-weight:700;color:var(--white);line-height:1.5}
.presence figcaption .zh{display:block;margin-top:4px;font-size:11.5px;line-height:1.6;
  color:var(--muted-2)}
.presence-note{justify-content:center;gap:9px;padding:24px 22px;border-style:dashed;
  border-color:var(--line-2);background:rgba(255,255,255,.014)}
.presence-note:hover{transform:none;border-color:var(--line-2);background:rgba(255,255,255,.014)}
.presence-note b{font-size:14.5px;line-height:1.5;color:var(--gold-hi)}
.presence-note p{font-size:12.5px;line-height:1.72;color:var(--text-2)}
.presence-note p .zh{display:block;margin-top:7px;font-size:11.5px;color:var(--muted-2)}

@media (max-width:820px){
  .tbl thead th:first-child,.tbl td:first-child{position:sticky;left:0;background:#0F0F0F;z-index:2}
  .tbl thead th.col-us,.tbl td.col-us{background:#171208}
}

/* =========================================================================
   B · placement assets — the deck's KOL matrix page rebuilt as two panels:
   the multilingual database on the left (wider), the streamer debut record
   stacked on the right.
   ========================================================================= */
.km-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;
  margin-top:22px;align-items:start}
.km-col{display:flex;flex-direction:column;gap:20px;min-width:0}

.km-card{position:relative;min-width:0;background:var(--card);
  border:1px solid var(--gold-line);border-radius:var(--r);padding:20px 22px;
  transition:border-color .3s ease,background .3s ease}
.km-card:hover{border-color:var(--gold);background:var(--card-2)}

.km-head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.km-title{display:flex;flex-direction:column;gap:3px;font-size:15px;font-weight:700;
  color:var(--white)}
.km-zh{font-size:12.5px;font-weight:400;color:var(--muted)}

.km-split{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:start}

.km-shot{margin:0;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid rgba(255,255,255,.14)}
.km-shot img{width:100%;display:block}

.km-poster{margin:0 0 16px;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--gold-line)}
.km-poster img{width:100%;display:block}

.km-langs{display:flex;flex-direction:column}
.km-langs li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:5px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.km-langs li:last-child{border-bottom:0}
.km-langs span{font-size:12px;color:var(--text-2)}
.km-langs b{font-size:14px;font-weight:700;color:var(--gold);
  font-variant-numeric:tabular-nums;white-space:nowrap}

.km-total{display:flex;align-items:baseline;gap:12px;margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.09)}
.km-total b{font-size:30px;font-weight:700;line-height:1;color:var(--gold-hi);
  font-variant-numeric:tabular-nums}
.km-total span{font-size:12.5px;color:var(--text-2)}

.km-desc{font-size:13.5px;line-height:1.7;color:var(--text-2)}
.km-desc strong{color:var(--gold)}
.km-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.km-stat{background:rgba(245,185,15,.06);border:1px solid var(--gold-line);
  border-radius:var(--r-sm);padding:10px 12px}
.km-stat b{display:block;font-size:17px;font-weight:700;color:var(--gold-hi);
  font-variant-numeric:tabular-nums}
.km-stat span{display:block;margin-top:4px;font-size:11px;line-height:1.5;
  color:var(--muted)}
.km-note{margin-top:12px;font-size:12px;line-height:1.6;color:var(--muted-2)}

/* =========================================================================
   Case accordion
   ========================================================================= */
.cases{display:flex;flex-direction:column;gap:14px;margin-top:34px}
.case{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .3s ease,background .3s ease}
.case.is-open,.case:hover{border-color:var(--gold-line);background:var(--card-2)}
.case.is-pending{background:rgba(255,255,255,.018);border-style:dashed;border-color:var(--line-2)}
.case-head{display:flex;align-items:center;gap:18px;width:100%;padding:20px 24px;text-align:left}
.case-titles{display:flex;flex-direction:column;gap:5px;flex:1 1 auto;min-width:0}
.case-name{font-size:17px;font-weight:700;color:var(--white);line-height:1.4}
.case-meta{font-size:12.5px;color:var(--muted)}
.case-arrow{flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .3s ease;margin-right:6px}
.case.is-open .case-arrow{transform:rotate(225deg)}
.case-body{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,.7,.3,1)}
/* generous ceiling — each bullet carries an EN paragraph plus a TC counterpart */
.case.is-open .case-body{max-height:900px}
.case-body-inner{padding:0 24px 24px 24px;border-top:1px solid rgba(255,255,255,.07);margin:0 24px;
  padding-left:0;padding-right:0}
.case-body-inner h4{margin-top:20px;font-size:12px;font-weight:700;letter-spacing:.14em;
  color:var(--gold);text-transform:uppercase}
.ticks{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.ticks li{position:relative;padding-left:26px;font-size:14px;color:var(--text-2);line-height:1.8}
.ticks li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.case-body-inner.placeholder p{font-size:14.5px;color:var(--muted-2);font-style:italic;padding-top:20px}
/* cited market-reference bullet — dimmer and a notch smaller, so it reads as a footnote not a claim */
.ticks li.src-note{font-size:13px;color:var(--muted);line-height:1.72}
.ticks li.src-note b{color:var(--text-2);font-weight:700}
.ticks li.src-note .zh{font-size:12.5px;color:var(--muted-2)}

/* =========================================================================
   04 Traffic engine — flow chain
   ========================================================================= */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;
  gap:14px;margin-top:22px;padding:26px 22px;background:var(--card);
  border:1px solid var(--gold-line);border-radius:var(--r)}
.flow-col{display:flex;flex-direction:column;gap:12px}
.flow-node{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);border:1px solid var(--line)}
.flow-node b{display:block;font-size:14px;color:var(--white);line-height:1.35}
.flow-node small{display:block;font-size:11px;color:var(--muted)}
.flow-node.node-key{background:var(--wash);border-color:rgba(245,185,15,.32)}
.flow-node.node-key b{color:var(--gold)}
.flow-node.node-final{background:rgba(245,185,15,.1);border-color:var(--gold)}
.flow-node.node-final b{color:var(--gold-hi)}
.flow-arrow{display:flex;align-items:center;justify-content:center}
.flow-arrow span{position:relative;display:block;width:26px;height:2px;background:var(--gold);opacity:.65}
.flow-arrow span::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;
  border-top:2px solid var(--gold);border-right:2px solid var(--gold);transform:rotate(45deg)}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 24px;
  transition:border-color .3s ease,transform .3s ease,background .3s ease}
.card:hover{border-color:var(--gold-line);background:var(--card-2);transform:translateY(-4px)}
.card h4{font-size:17px;font-weight:700;color:var(--white)}
.card p{margin-top:12px;font-size:13.5px;color:var(--text-2)}

.service-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.service-item{display:flex;align-items:flex-start;gap:20px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
  transition:border-color .3s ease,transform .3s ease,background .3s ease}
.service-item:hover{border-color:var(--gold-line);background:var(--card-2);transform:translateX(4px)}
.service-no{font-size:26px;font-weight:700;color:var(--gold);line-height:1;
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.service-item h4{font-size:16px;font-weight:700;color:var(--white)}
.service-item p{margin-top:7px;font-size:13px;color:var(--text-2)}

/* =========================================================================
   05 Service blueprint
   ========================================================================= */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.plan{position:relative;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:28px 24px 24px;
  transition:transform .35s ease,border-color .35s ease,background .35s ease}
.plan:hover{transform:translateY(-6px);border-color:var(--gold-line);background:var(--card-2)}
.plan-featured{border-color:var(--gold);background:rgba(245,185,15,.055);
  box-shadow:0 26px 60px -34px rgba(245,185,15,.6)}
.plan-flag{align-self:flex-start;margin-bottom:18px;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#0A0A0A;padding:5px 13px;border-radius:99px;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold))}
.plan-top{display:flex;align-items:flex-start;gap:16px}
.plan-top h3{font-size:18.5px;font-weight:700;color:var(--white);line-height:1.4}
.plan-stage{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--gold)}
.plan-block{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.plan-block h4{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.plan-block p{margin-top:10px;font-size:13.5px;color:var(--text-2)}
.plan-result{margin-top:auto}
.plan-result p b{color:var(--gold-hi);font-size:16px}

/* =========================================================================
   CTA band
   ========================================================================= */
.cta-band{position:relative;padding:96px 0;border-top:1px solid var(--gold-line);
  border-bottom:1px solid var(--gold-line);background:var(--bg-2);overflow:hidden}
.cta-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:900px;height:520px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(245,185,15,.20),transparent 68%)}
.cta-inner{position:relative;z-index:2;text-align:center;max-width:900px;margin-inline:auto}
.cta-inner h2{font-size:clamp(25px,3.6vw,42px);font-weight:700;color:var(--white);line-height:1.3}
.cta-inner p{margin-top:18px;font-size:14.5px;color:var(--muted)}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:34px}
/* .btn is nowrap, which is right on a wide band and wrong the moment a label is
   wider than the column: a flex item that cannot shrink simply overflows, and
   with justify-content:center that overflow is split across both gutters — the
   email button ran 4.75 px past each side at 414. Let the label wrap instead of
   the row escaping. Buttons that already fit are unaffected. */
@media (max-width:560px){
  .cta-actions .btn{max-width:100%;white-space:normal;text-align:center}
  /* CJK breaks between any two characters, so once the label wraps the Chinese
     half sheds a single orphan glyph ("詢") onto a line of its own. Keep the
     phrase whole and let it move as a unit. */
  .cta-actions .btn .btn-zh{white-space:nowrap}
}
/* Below ~430 px the longest label misses fitting on one line by about 10 px, so
   it breaks mid-phrase ("Book an Advisory" / "Session ｜"). Reclaiming a little
   gutter and half a point of size puts it back on one line at 414 and makes it
   break cleanly at the ｜ on narrower phones. */
@media (max-width:430px){
  .cta-actions .btn-lg{padding:14px 20px;font-size:13.5px}
}

/* =========================================================================
   Footer
   ========================================================================= */
.footer{background:var(--bg-2);border-top:1px solid rgba(255,255,255,.08);padding:56px 0 30px}
.footer-top{display:grid;grid-template-columns:1.5fr 1.1fr .95fr 1.2fr;gap:38px}
.f-brand img{height:40px;width:auto;margin-bottom:16px}
.f-brand p{font-size:13.5px;color:var(--muted);line-height:1.75}
.f-brand .f-cn{margin-top:8px;color:var(--text-2);font-weight:700}
.f-col h4{display:flex;align-items:center;gap:9px;margin-bottom:16px;font-size:11.5px;
  font-weight:700;letter-spacing:.12em;color:var(--gold);text-transform:uppercase}
.f-h{display:flex;flex-direction:column;gap:3px}
.f-h-zh{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.08em}
.f-col li{display:flex;align-items:flex-start;gap:9px;padding:6px 0;font-size:13.5px;color:var(--text-2)}
.f-col li a{color:var(--gold);transition:color .22s ease}
.f-col li a:hover{color:var(--gold-hi)}
.f-col .ico{color:var(--muted-2);margin-top:1px}
/* Contact list — role label on its own line above the handle. Two Telegram
   entries (the official group vs. the co-founder's own @handle) must stay
   told apart, and "Telegram · Co-Founder: @SASA2049" on one line does not fit
   the 233px contact column at 1440. Stacking also keeps the long email from
   wrapping mid-address. */
.f-item{display:flex;flex-direction:column;gap:3px;min-width:0}
.f-role{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--muted);line-height:1.45}
.f-item a{overflow-wrap:anywhere}
.f-disclaimer p{font-size:12.5px;color:var(--muted);line-height:1.8}
.f-disclaimer p+p{margin-top:10px}

.footer-verified{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:44px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.08)}
.fv-label{font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--muted-2);
  text-transform:uppercase;margin-right:6px}
.fv-chip{font-size:12px;font-weight:700;color:var(--gold);padding:6px 14px;border-radius:99px;
  border:1px solid var(--gold-line);background:rgba(245,185,15,.07)}
.fv-chip.is-slot{color:var(--muted-2);border-color:var(--line-2);background:none;font-weight:400}

.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:30px;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.06);font-size:11.5px;color:var(--muted-2)}
/* CC BY 2.0 requires the hero photo credit; keep it quiet but legible */
.f-credit{color:var(--muted-2);opacity:.85}

.to-top{position:fixed;right:26px;bottom:26px;z-index:56;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;font-size:16px;color:#0A0A0A;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold));
  box-shadow:0 12px 30px -12px rgba(245,185,15,.9);opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .3s ease}
.to-top.is-on{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-3px)}

/* =========================================================================
   Responsive
   ========================================================================= */

/* nine year labels need roughly 1150px to sit on one line; below that the rail
   scrolls sideways rather than wrapping a label mid-word */
@media (max-width:1140px){
  .tl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tl{min-width:1000px}
}

@media (max-width:1024px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-right{margin-left:auto}
  .stat-grid,.pillar-grid,.plan-grid{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr;gap:12px}
  .flow-arrow{transform:rotate(90deg);padding:2px 0}
  .two-col,.service-list{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr;gap:30px}
  .ribbon-band img{position:relative;height:200px}
  .ribbon-band::after{background:linear-gradient(180deg,rgba(10,10,10,.86),rgba(10,10,10,.94))}
  .km-grid{gap:16px}
  .km-card{padding:18px 18px}
  .km-split{gap:14px}
  .venue-card.is-wide{grid-template-columns:300px 1fr;gap:20px}
  .presence-grid{grid-template-columns:1fr 1fr}
  .tl-item{padding:0 4px}
  .tl-name{font-size:12px}
}

@media (max-width:820px){
  :root{--nav-h:64px}
  /* the bar itself is 8px shorter here, so the mark steps back down to keep
     the same breathing room it has on desktop */
  .brand img{height:34px}
  .wrap,.nav-inner,.rb-inner{width:calc(100% - 40px)}
  .section{padding:64px 0}
  .hero{padding:calc(var(--nav-h) + 56px) 0 56px}
  .icon-box,.ico-box{width:40px;height:40px;border-radius:11px}
  .ico-box-lg{width:44px;height:44px}
  .stat-grid,.pillar-grid,.plan-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .hero-quote{padding:24px 20px}
  .case-head{padding:16px 18px;gap:14px}
  .case-body-inner{margin:0 18px}
  .cta-band{padding:64px 0}
  .sec-title{line-height:1.35}
  .sec-title-zh{font-size:13.5px;margin-top:9px}
  .hero-sub .zh,.sec-desc .zh,.sub-desc .zh,.hero-quote blockquote .zh{font-size:13px}
  .ticks li .zh{font-size:12.5px}
  .table-compare .tbl{min-width:900px}
  .table-compare .tbl th:first-child,.table-compare .tbl td:first-child{min-width:168px}
  .table-compare .tbl th:not(:first-child),.table-compare .tbl td:not(:first-child){min-width:166px}
  .km-grid{grid-template-columns:1fr;gap:18px}
  .km-card{padding:18px 16px}
  .km-split{grid-template-columns:1fr;gap:16px}
  .km-total b{font-size:26px}
  .km-stat b{font-size:15.5px}
  .pf-band{padding:46px 0 50px}
  /* narrow screens: shrink the lockups and tighten the gaps, otherwise only
     one and a half marks fit the window and the loop reads as a slideshow */
  .pf-item{height:40px;margin-right:44px}
  .pf-item img{height:32px}
  .venue-grid{grid-template-columns:1fr}
  /* no aspect override here any more — a 16:9 crop on phones was slicing the
     Bitget capture's BANK/POWER chips, which are the point of that screenshot */
  .venue-card.is-wide{grid-template-columns:1fr;gap:0}
  .venue-card.is-wide .venue-shot{margin-bottom:16px}
  .presence-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .particles{display:none}
  .bg-ribbon{opacity:.24}
  .case-body{transition:none}
  /* no scrolling: fall back to a centred, wrapped logo grid with no seam masks */
  .pf-strip{-webkit-mask-image:none;mask-image:none}
  .pf-track{animation:none;width:100%}
  .pf-set{flex-wrap:wrap;justify-content:center;row-gap:24px}
  .pf-set:not(:first-child){display:none}
  .pf-item{margin:10px 32px}
}

/* on a phone the wrapped fallback must stay shallow: 13 stacked rows is not a
   logo wall, it is a list */
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .pf-set{row-gap:18px}
  .pf-item{margin:6px 16px}
  .pf-item img{height:30px}
}