/* The home page (2026-10-25, the owner's redesign — built from site-drafts/home.html,
   which the owner chose: hero "A · Big type", the guest's phone, your brand).
   Loaded after site.css. */
:root { --lc: #2997ff; --c1: #0a84ff; --c2: #bf5af2; --c3: #ff9f0a; --c4: #30d158; --c5: #ff375f; }
body { background: #000; color: var(--w); }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff453a; box-shadow: 0 0 10px #ff453a; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.bars { display: inline-flex; gap: 3px; align-items: center; height: 14px; }
.bars span { width: 3px; height: 100%; border-radius: 2px; background: currentColor; scale: 1 .18; }

/* words arrive out of a blur; a sentence melts into its next language */
.w { display: inline-block; opacity: 0; filter: blur(10px); translate: 0 .14em; transition: opacity .5s cubic-bezier(.2,.7,.2,1), filter .5s cubic-bezier(.2,.7,.2,1), translate .5s cubic-bezier(.2,.7,.2,1); white-space: pre; }
.w.on { opacity: 1; filter: none; translate: 0 0; }
.en .w { filter: none; translate: 0 0; transition-duration: .18s; }
.tr { transition: opacity .3s; } .tr.out { opacity: 0; }
.goo { filter: url(#goo); }

/* ═════════ HERO ═════════ */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100svh - 52px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(30px, 5vh, 52px); padding: clamp(32px, 6vh, 64px) var(--gutter) clamp(40px, 7vh, 80px); text-align: center;
  background: radial-gradient(70% 45% at 50% 78%, color-mix(in oklab, var(--lc) 16%, #000), #000 72%); transition: background 1.2s; }
.copy { display: grid; gap: 14px; justify-items: center; }
.copy > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; } .copy > :nth-child(2) { animation-delay: .08s; } .copy > :nth-child(3) { animation-delay: .16s; } .copy > :nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; translate: 0 18px; filter: blur(8px); } }
.eyebrow { font: 600 clamp(15px, 1.4vw, 18px)/1.2 var(--sans); color: var(--g2); letter-spacing: -0.01em; }
.h1 { font: 700 clamp(38px, 4.9vw, 70px)/1.03 var(--sans); letter-spacing: -0.048em; text-wrap: balance; }
.sub { max-width: 600px; font-size: clamp(17px, 1.5vw, 20px); color: var(--g2); text-wrap: pretty; }
.copy .ctas { margin-top: 8px; }

/* the live translation: its own screen, apart from the words above it */
.panel { position: relative; width: min(1060px, 100%); padding: clamp(18px, 2.6vw, 32px) clamp(18px, 3.2vw, 44px) clamp(16px, 2.2vw, 26px); border-radius: 28px; text-align: left; container-type: inline-size;
  background: linear-gradient(180deg, rgb(255 255 255 / .065), rgb(255 255 255 / .025)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), inset 0 0 0 1px rgb(255 255 255 / .08), 0 50px 140px -50px color-mix(in oklab, var(--lc) 55%, transparent);
  animation: rise 1.1s .3s cubic-bezier(.2,.7,.2,1) both; }
.p-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 600 12px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--g2); }
.p-top > span { display: inline-flex; align-items: center; gap: 10px; }
.p-top .bars { color: #2997ff; }
.p-top b { color: var(--w); font-weight: 600; }
.panel .en { margin-top: 14px; min-height: 2.7em; font: 500 clamp(15px, 1.9cqw, 20px)/1.35 var(--text); color: #a1a1a6; }
.rule { height: 1px; margin: 14px 0 6px; background: linear-gradient(90deg, rgb(255 255 255 / .14), rgb(255 255 255 / .03)); }
/* three lines are always kept for the translation, so a longer language never moves the page */
.panel .trw { display: grid; align-items: center; height: calc(3 * 1.12em + 8px); font: 650 clamp(24px, 4.7cqw, 54px)/1.12 var(--sans); letter-spacing: -0.032em; }
.panel .trw[lang="ko"], .panel .trw[lang="zh"] { letter-spacing: -0.015em; }
.panel .trw > .tr { grid-area: 1 / 1; }
.lrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lrow span { padding: 7px 12px; border-radius: 999px; font: 500 13px/1 var(--text); color: #6e6e73; transition: color .4s, background .4s; }
.lrow span.on { color: #000; background: var(--w); }
@media (max-width: 600px) { .p-top .who { display: none; } .lrow span { padding: 6px 9px; font-size: 12px; } }
@container (max-width: 430px) { .p-top .who { display: none; } }
@container (max-width: 520px) { .lrow { gap: 4px; } .lrow span { padding: 6px 9px; font-size: 12px; } }

/* a computer: the words on the left, the live translation on the right (the owner,
   2026-10-25: "for desktop only have the text on the left and the animation on the right") */
@media (min-width: 1000px) {
  .hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; align-content: center;
    gap: clamp(40px, 5vw, 76px); padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); text-align: left;
    background: radial-gradient(52% 62% at 76% 54%, color-mix(in oklab, var(--lc) 16%, #000), #000 72%); }
  .copy { justify-items: start; gap: 16px; }
  .copy .ctas { justify-content: flex-start; }
  .h1 { font-size: clamp(46px, 4.7vw, 68px); }
  .sub { max-width: 440px; }
  .panel { width: 100%; padding: 26px 30px 22px; }
  .panel .en { font-size: clamp(15px, 3.1cqw, 18px); min-height: 4.05em; }
  .panel .trw { font-size: clamp(24px, 6.4cqw, 40px); }
}

/* ═════════ SECTIONS ═════════ */
.sec { padding: clamp(90px, 13vw, 160px) var(--gutter); text-align: center; overflow: hidden; position: relative; }
.sec.white { background: #fff; color: var(--ink); } .sec.gray { background: #f5f5f7; color: var(--ink); } .sec.dark { background: #000; color: var(--w); }
.kick { font: 600 clamp(17px, 1.8vw, 21px)/1.2 var(--sans); color: #bf4800; }
.sec.dark .kick { color: var(--link); }
.sec h2 { margin-top: 10px; font: 700 clamp(38px, 6.2vw, 76px)/1.04 var(--sans); letter-spacing: -0.045em; text-wrap: balance; }
.copy2 { max-width: 660px; margin: 18px auto 0; font-size: clamp(17px, 1.6vw, 21px); color: var(--g3); text-wrap: pretty; }
.sec.dark .copy2 { color: var(--g2); }
.soon { display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 6px; background: #fff3e0; color: #b35c00; font: 650 11px/1.3 var(--text); letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }

/* accuracy: the speaker's sentence, its translation, and a line from every term to its match */
.tabs { display: inline-flex; gap: 4px; padding: 4px; margin-top: 40px; border-radius: 999px; background: #f0f0f2; flex-wrap: wrap; justify-content: center; }
.tabs button { all: unset; cursor: pointer; padding: 10px 18px; border-radius: 999px; font: 500 15px/1 var(--text); color: var(--g3); transition: background .3s, color .3s; }
.tabs button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgb(0 0 0 / .08); }
/* a phone: the four industries stay on one line */
@media (max-width: 480px) { .tabs { flex-wrap: nowrap; gap: 2px; padding: 3px; max-width: 100%; } .tabs button { padding: 9px 11px; font-size: 13.5px; } }
@media (max-width: 374px) { .tabs { display: grid; grid-template-columns: 1fr 1fr; border-radius: 22px; } .tabs button { text-align: center; } }
.acc-card { position: relative; max-width: 1080px; margin: 26px auto 0; padding: clamp(26px, 4vw, 54px); border-radius: 30px; background: #fbfbfd; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); text-align: left; }
.acc-card svg.links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.acc-card .links path { fill: none; stroke-width: 1.6; opacity: .7; transition: stroke-dashoffset .9s cubic-bezier(.3,.7,.2,1); }
.acc-card .links circle { transition: opacity .4s .6s; }
.acc-head { position: relative; z-index: 1; font: 650 12.5px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--g); }
.acc-src, .acc-tgt { position: relative; z-index: 1; margin-top: 12px; font: 600 clamp(19px, 2.5vw, 32px)/1.42 var(--sans); letter-spacing: -0.02em; color: var(--ink); transition: opacity .3s, filter .3s; }
.acc-gap { height: clamp(70px, 9vw, 120px); }
.acc-card .fade { opacity: 0; filter: blur(6px); }
.t { padding: .02em .22em; margin: 0 -.06em; border-radius: .3em; background: color-mix(in oklab, var(--c) 13%, white); color: color-mix(in oklab, var(--c) 72%, black); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.t[data-n="1"] { --c: var(--c1); } .t[data-n="2"] { --c: var(--c2); } .t[data-n="3"] { --c: var(--c3); } .t[data-n="4"] { --c: var(--c4); } .t[data-n="5"] { --c: var(--c5); }
.acc-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 22px; }
.acc-langs button { all: unset; cursor: pointer; padding: 8px 14px; border-radius: 999px; font: 500 14.5px/1 var(--text); color: var(--g3); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.acc-langs button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.hundred { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 34px); margin: clamp(56px, 8vw, 90px) auto 0; max-width: 900px; text-align: left; flex-wrap: wrap; }
.hundred b { font: 750 clamp(72px, 11vw, 150px)/.9 var(--sans); letter-spacing: -0.06em; background: linear-gradient(135deg, #0a84ff, #bf5af2 55%, #ff375f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hundred p { max-width: 420px; font: 600 clamp(19px, 2vw, 26px)/1.25 var(--sans); letter-spacing: -0.02em; }
.hundred small { display: block; margin-top: 8px; font: 400 15px/1.45 var(--text); color: var(--g3); letter-spacing: 0; }

/* events: the room, the big screen, the guests */
.hall { position: relative; max-width: 1180px; margin: clamp(48px, 7vw, 80px) auto 0; aspect-ratio: 16 / 9.4; border-radius: 28px; overflow: hidden; background: radial-gradient(70% 60% at 50% 22%, #141a2c, #050508 70%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
.bigscreen { position: absolute; left: 17%; right: 17%; top: 6%; aspect-ratio: 2.35 / 1; border-radius: 6px; background: #0d0e12; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 0 120px 10px rgb(90 120 255 / .22); display: grid; grid-template-rows: 1fr auto; container-type: inline-size; overflow: hidden; }
.panes { display: grid; grid-template-columns: repeat(3, 1fr); }
.pane { padding: 3.2cqw 3cqw; text-align: left; border-right: 1px solid rgb(255 255 255 / .07); display: flex; flex-direction: column; }
.pane:last-child { border-right: 0; }
.pane h4 { font: 650 1.5cqw/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--g2); }
.pane .trw { margin-top: auto; font: 650 2.6cqw/1.25 var(--sans); letter-spacing: -0.015em; color: #fff; min-height: 5em; display: flex; flex-direction: column; justify-content: flex-end; }
.strip { display: flex; gap: 1.4cqw; align-items: center; padding: 1.4cqw 3cqw; border-top: 1px solid rgb(255 255 255 / .07); font: 500 1.45cqw/1.3 var(--text); color: var(--g2); text-align: left; }
.strip b { flex: none; font-weight: 650; color: var(--g); letter-spacing: .06em; }
.podium { position: absolute; left: 8%; top: 46.5%; width: 6%; filter: drop-shadow(0 0 1px rgb(150 170 255 / .7)); }
.stage { position: absolute; left: 3%; right: 3%; top: 59%; height: 2px; background: linear-gradient(90deg, transparent, rgb(140 160 255 / .35), transparent); }
.crowd { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 40%; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); max-width: 1080px; margin: clamp(44px, 6vw, 70px) auto 0; text-align: left; }
.facts b { display: block; font: 700 clamp(26px, 3vw, 38px)/1.08 var(--sans); letter-spacing: -0.035em; }
.facts p { margin-top: 10px; color: var(--g2); font-size: 16.5px; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } .hall { aspect-ratio: 4 / 4.2; } .bigscreen { left: 4%; right: 4%; aspect-ratio: 1.45 / 1; } .pane .trw { font-size: 4.2cqw; } .pane h4 { font-size: 2.6cqw; } .strip { font-size: 2.8cqw; } .pane:nth-child(3) { display: none; } .panes { grid-template-columns: 1fr 1fr; } .podium { display: none; } .crowd { height: 36%; } }

/* listen: one guest's phone, exactly as the guest page looks — the sentence being spoken is lit */
.listen-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(24px, 5vw, 70px); align-items: center; max-width: 1080px; margin: clamp(48px, 7vw, 80px) auto 0; text-align: left; }
.flow3 { display: grid; gap: 26px; }
.flow3 div { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; }
.flow3 i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 1px 0 rgb(0 0 0 / .06); font: 650 17px/1 var(--sans); font-style: normal; }
.flow3 b { font: 650 19px/1.25 var(--sans); letter-spacing: -0.015em; }
.flow3 small { display: block; color: var(--g3); font-size: 15px; }
.phone { position: relative; width: clamp(240px, 22vw, 290px); aspect-ratio: 9 / 19.5; border-radius: 15% / 7%; padding: 2.6%; background: linear-gradient(160deg, #3a3a3e, #111113); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 50px 90px -30px rgb(0 0 0 / .5); }
.scr { height: 100%; border-radius: 13% / 6%; background: #0a0a0c; color: #d9dbe2; overflow: hidden; display: flex; flex-direction: column; container-type: inline-size; }
.g-top { display: flex; align-items: center; gap: 2.4cqw; padding: 15cqw 5cqw 3.6cqw; border-bottom: 1px solid rgb(255 255 255 / .07); }
.g-spk { display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: #f5a524; color: #17140a; }
.g-spk svg { width: 5cqw; height: 5cqw; }
.g-size { margin-left: auto; display: flex; gap: 1cqw; padding: 1cqw; border-radius: 99px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); font: 600 4cqw/1 var(--text); color: #8b8f9b; }
.g-size i { display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; font-style: normal; }
.g-size i:first-child { background: #2b3a44; color: #d9dbe2; }
.g-lang { padding: 2.4cqw 3.4cqw; border-radius: 99px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); font: 600 4cqw/1 var(--text); color: #d9dbe2; white-space: nowrap; }
.g-feed { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 1cqw; padding: 0 4.5cqw 30%; overflow: hidden; }
.g-feed p { font: 500 6.4cqw/1.4 "Inter", system-ui, sans-serif; color: #d9dbe2; padding: 0 3cqw; transition: color .4s, background .4s; }
.g-feed p.cur { background: #ffd84d; color: #17140a; border-radius: 12px; padding: 2.6cqw 3.2cqw; animation: lit .45s cubic-bezier(.2,.7,.2,1); }
@keyframes lit { from { opacity: 0; translate: 0 6px; } }
.g-feed .empty { color: #6b6f7a; font-size: 5cqw; text-align: center; padding-bottom: 20%; }
.g-dots { display: flex; gap: 2cqw; padding: 3cqw 3cqw 0; height: 7cqw; }
.g-dots i { width: 2cqw; height: 2cqw; border-radius: 50%; background: #6b6f7a; animation: dot 1.2s infinite; }
.g-dots i:nth-child(2) { animation-delay: .2s; } .g-dots i:nth-child(3) { animation-delay: .4s; }
.g-dots.off i { visibility: hidden; }
@keyframes dot { 50% { background: #c9ccd4; } }
.g-foot { display: flex; justify-content: center; gap: 2cqw; padding: 3.6cqw 4cqw 6cqw; border-top: 1px solid rgb(255 255 255 / .07); font: 600 4cqw/1 var(--text); }
.g-foot span { padding: 2.6cqw 4cqw; border-radius: 99px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); color: #9aa0ab; }
.g-foot span:last-child { color: #7fd3e8; box-shadow: inset 0 0 0 1px rgb(127 211 232 / .4); }
.player { display: grid; gap: 16px; justify-items: start; }
.play { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 14px; padding: 12px 22px 12px 12px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 17px/1 var(--text); }
.play i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ink); font-style: normal; }
.play .pause { display: none; } .playing .play .pause { display: block; } .playing .play .tri { display: none; }
.pick { display: flex; flex-wrap: wrap; gap: 6px; }
.pick button { all: unset; cursor: pointer; padding: 8px 13px; border-radius: 999px; background: #fff; font: 500 14px/1 var(--text); color: var(--g3); box-shadow: 0 1px 0 rgb(0 0 0 / .06); }
.pick button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.scrub { width: 100%; height: 6px; border-radius: 3px; background: #e3e3e6; cursor: pointer; }
.scrub span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ink); }
.onstage { font-size: 15px; color: var(--g3); } .onstage b { display: block; color: var(--ink); font: 600 17px/1.35 var(--text); min-height: 2.7em; }
.player label { display: flex; gap: 8px; align-items: center; font-size: 15px; color: var(--g3); }
.player .fine { font-size: 13.5px; color: var(--g); }
@media (max-width: 900px) { .listen-grid { grid-template-columns: 1fr; justify-items: center; } .flow3, .player { width: min(420px, 100%); } }

/* brand: your words in, your words out — before and after */
.brand-grid { display: grid; grid-template-columns: 340px 1fr; gap: clamp(28px, 5vw, 64px); max-width: 1080px; margin: clamp(48px, 7vw, 80px) auto 0; text-align: left; align-items: center; }
.words { padding: 28px; border-radius: 26px; background: #f5f5f7; }
.words h3 { font: 650 20px/1.2 var(--sans); letter-spacing: -0.015em; }
.words p { margin-top: 6px; font-size: 15px; color: var(--g3); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips span { padding: 9px 14px; border-radius: 999px; background: #fff; font: 600 15px/1 var(--sans); box-shadow: 0 1px 0 rgb(0 0 0 / .06), 0 6px 16px -10px rgb(0 0 0 / .3); animation: pop .5s cubic-bezier(.2,.8,.3,1.3) both; animation-delay: calc(var(--i) * 90ms); }
.chips span.add { background: none; box-shadow: inset 0 0 0 1.5px #c7c7cc; color: var(--g3); font-weight: 500; }
@keyframes pop { from { opacity: 0; scale: .8; } }
.said-card { padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: #fff; box-shadow: 0 1px 0 rgb(0 0 0 / .05), 0 30px 70px -36px rgb(0 0 0 / .35), inset 0 0 0 1px rgb(0 0 0 / .05); }
.said { font-size: 14px; color: var(--g3); }
.said p { margin-top: 8px; font: 600 clamp(17px, 1.7vw, 21px)/1.45 var(--text); color: var(--ink); }
.heard { padding: 0 .25em; border-radius: .3em; background: #fff3e0; color: #b35c00; }
.heard-note { display: inline-block; margin-left: 8px; font: 600 12px/1 var(--text); color: #b35c00; vertical-align: middle; }
.switch { display: inline-flex; gap: 4px; padding: 4px; margin-top: 22px; border-radius: 999px; background: #f0f0f2; }
.switch button { all: unset; cursor: pointer; padding: 9px 16px; border-radius: 999px; font: 600 14px/1 var(--text); color: var(--g3); transition: background .3s, color .3s; }
.switch button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgb(0 0 0 / .08); }
.outs { display: grid; gap: 14px; margin-top: 20px; }
.outs div { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: baseline; }
.outs span { font: 600 12px/1 var(--text); letter-spacing: .05em; text-transform: uppercase; color: var(--g); }
.outs p { font: 600 clamp(17px, 1.7vw, 21px)/1.45 var(--sans); letter-spacing: -0.01em; transition: opacity .25s; }
.outs.swap p { opacity: 0; }
.outs mark { padding: 0 .14em; margin: 0 -.04em; border-radius: .3em; }
.outs[data-with="1"] mark { background: #e3f6ef; color: #0b6b55; }
.outs[data-with="0"] mark { background: #fdecea; color: #c5221f; text-decoration: line-through 1.5px; text-decoration-color: rgb(197 34 31 / .55); }
.brand-note { margin-top: 26px; font-size: 14px; color: var(--g); }
@media (max-width: 860px) { .brand-grid { grid-template-columns: 1fr; } .outs div { grid-template-columns: 1fr; gap: 4px; } }
@media (max-width: 520px) { .switch { display: flex; } .switch button { flex: 1; text-align: center; white-space: nowrap; padding: 9px 10px; font-size: 13px; } }

/* the last word */
.end h2 { font-size: clamp(40px, 6.6vw, 84px); }
.end .ctas { margin-top: 30px; }
.end .small { margin-top: 18px; font-size: 15px; color: var(--g); }

@media (prefers-reduced-motion: reduce) { .w { opacity: 1; filter: none; translate: none; } }