/* suvelekrinember.com — Harbin ice blocks lit from inside, one lamp colour per game.
   glass-blur: frost 14 % + background blur 36 (CSS 18) + 1 px light top edge; glow-light: blurred ellipse 1.5x the object at 45 %. */
:root {
  --ink: #F2FAFA; --ink2: #CFE9EB; --dark: #0B3340; --sky: #04566A; --deep: #0B3F4D; --mid: #235A66; --frost: #F4FBFB;
  --amber: #FFB347; --rose: #FF8FA8; --green: #7FE3A6; --lilac: #B9A7FF; --yellow: #FFE27A; --coral: #FF9A6B;
  --disp: 'M PLUS Rounded 1c', 'Lexend', system-ui, sans-serif; --text: 'Lexend', system-ui, sans-serif;
  --pad: 16px; --l: var(--amber); --d: 7s;
  --edge: inset 0 1px 0 rgba(255, 255, 255, .55);
  --lift1: 0 1.2px 2.4px rgba(2, 28, 36, .036), 0 6px 12px rgba(2, 28, 36, .048), 0 16.8px 33.6px -4.8px rgba(2, 28, 36, .06);
  --lift2: 0 2px 4px rgba(2, 28, 36, .06), 0 10px 20px rgba(2, 28, 36, .08), 0 28px 56px -8px rgba(2, 28, 36, .1);
}
@media (min-width: 600px) { :root { --pad: 32px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--deep); color: var(--ink); font: 400 15px/1.55 var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--disp); font-weight: 800; line-height: 1.05; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--amber); color: var(--dark); padding: 8px 14px; border-radius: 6px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- glow-light ---------- */
.halo { position: absolute; border-radius: 50%; background: var(--l); pointer-events: none; --o: .45; opacity: var(--o);
  animation: pulse calc(var(--d) / 2) ease-in-out infinite alternate; transition: scale .35s ease, translate .45s cubic-bezier(.2, .7, .3, 1), --o .3s; }
@property --o { syntax: '<number>'; inherits: false; initial-value: .45; }
@keyframes pulse { from { opacity: var(--o); } to { opacity: calc(var(--o) + .2); } }

/* ---------- ice wall (section ground) ---------- */
.sky { background: var(--sky); } .mid { background: var(--mid); }
.sec, .ph, .gh, .hero { position: relative; overflow: hidden; }
.wall { position: absolute; inset: 0; pointer-events: none; --s: .07; }
.wall::before { content: ''; position: absolute; inset: 0; background: url(/assets/img/wall-m.svg) 0 0 / 120px 120px; opacity: var(--s);
  -webkit-mask-image: linear-gradient(#000, rgba(0, 0, 0, .4)); mask-image: linear-gradient(#000, rgba(0, 0, 0, .4)); }
.w6 { --s: .06; } .w5 { --s: .05; } .w45 { --s: .045; }
.pool { position: absolute; border-radius: 50%; background: var(--c); opacity: .38; filter: blur(55px); }
.sec > :not(.wall), .ph > :not(.wall):not(.hd), .gh > :not(.wall):not(.hd) { position: relative; }

/* ---------- glass-blur slab ---------- */
.slab { position: relative; border-radius: 12px; background: rgba(244, 251, 251, .14); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--edge); }
.slab.lit { box-shadow: var(--edge), inset 0 -3px 0 var(--l); }

/* ---------- UI genome ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 20px; border-radius: 999px; font: 600 15px/1.2 var(--text); text-decoration: none; white-space: nowrap;
  background: rgba(244, 251, 251, .1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--l) 70%, transparent); color: var(--ink); border: 0; transition: background .2s, box-shadow .2s; }
.pill.solid { background: var(--l); color: var(--dark); box-shadow: 0 0 18px color-mix(in srgb, var(--l) 35%, transparent); }
a.pill:not(.solid):hover, a:hover .pill:not(.solid) { background: color-mix(in srgb, var(--l) 18%, transparent); }
a.pill.solid:hover, button.pill.solid:hover { box-shadow: 0 0 26px color-mix(in srgb, var(--l) 60%, transparent); }
.pill.fr { --l: var(--frost); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-block; padding: 5px 10px; border-radius: 6px; background: rgba(244, 251, 251, .16); font: 500 13px/1.3 var(--text); color: var(--ink); }
.chip.k { background: rgba(244, 251, 251, .24); }
.num { font: 900 40px/1 var(--disp); color: var(--l); text-shadow: 0 0 24px color-mix(in srgb, var(--l) 55%, transparent); transition: text-shadow .3s; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; color: var(--ink2); }
.crumbs li + li::before { content: '›'; margin-right: 10px; color: var(--ink2); }
.crumbs a { color: var(--ink2); } .crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }
.cr { display: flex; flex-direction: column; gap: 24px; }
.cr li { display: flex; gap: 12px; font-size: 15px; color: var(--ink2); }
.cr li::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--l); margin-top: .5em; }
.cr.am li { color: var(--ink); --l: var(--amber); gap: 10px; }
.cr.am { gap: 12px; }
.rows > div + div, .qa > div + div { border-top: 1px solid rgba(244, 251, 251, .16); }
dd a { color: inherit; }

/* ---------- header + bottom dock ---------- */
.hd { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px var(--pad); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 18px/1.1 var(--disp); }
.logo i { width: 22px; height: 14px; border-radius: 4px; background: rgba(244, 251, 251, .85); box-shadow: 0 0 10px rgba(255, 179, 71, .8); }
.hm { display: none; font-size: 14px; color: var(--ink2); text-decoration: none; } .hm:hover { color: var(--ink); text-decoration: underline; }
.dock { position: fixed; z-index: 50; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 8px; border-radius: 12px;
  background: rgba(6, 48, 59, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--lift2); }
.dock a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 16px 5px; text-decoration: none; font: 800 15px/1.2 var(--disp); color: var(--ink2); white-space: nowrap; transition: color .2s; }
.dock i { width: 18px; height: 4px; border-radius: 2px; background: var(--amber); opacity: 0; transition: opacity .25s; }
.dock a:hover { color: var(--ink); } .dock a:hover i { opacity: .35; }
.dock a[aria-current] { color: var(--ink); } .dock a[aria-current] i { opacity: 1; box-shadow: 0 0 10px rgba(255, 179, 71, .9); }

/* ---------- home hero ---------- */
.hero { background: var(--sky); padding: 400px var(--pad) 110px; }
.hbg img { position: absolute; top: 40px; left: calc(50% - 488px); width: 788px; max-width: none; height: 440px; object-fit: cover; }
.shade { position: absolute; left: 0; right: 0; top: 300px; height: 200px; background: linear-gradient(rgba(4, 86, 106, 0), rgba(4, 86, 106, .96) 80%); }
.hh { left: calc(50% - 20px); top: 330px; width: 240px; height: 90px; --l: var(--amber); --o: .3; filter: blur(20px); }
.ht { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 660px; }
.ht h1 { font-weight: 900; font-size: 50px; line-height: .98; letter-spacing: -.02em; text-shadow: 0 2px 24px rgba(2, 28, 36, .35); }
.ht p { font-size: 16px; }
.hb { position: relative; display: flex; flex-direction: column; gap: 4px; margin-top: 26px; max-width: 430px; }
.ib { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 4px; overflow: hidden; text-decoration: none;
  background: rgba(244, 251, 251, .13); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 color-mix(in srgb, var(--l) 35%, transparent); transition: background .25s; }
.ib .halo { left: -40px; top: -24px; width: 150px; height: 96px; --o: .42; filter: blur(21px); }
.saw { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(rgba(244, 251, 251, .07), rgba(244, 251, 251, .07)) 0 12px / 100% 1px no-repeat,
  linear-gradient(rgba(244, 251, 251, .09), rgba(244, 251, 251, .09)) 0 22px / 100% 1px no-repeat,
  linear-gradient(rgba(244, 251, 251, .11), rgba(244, 251, 251, .11)) 0 32px / 100% 1px no-repeat; }
.ib > span { position: relative; }
.ib .n { width: 22px; flex: none; font: 900 19px/1.05 var(--disp); color: var(--frost); text-shadow: 0 0 10px color-mix(in srgb, var(--l) 90%, transparent); }
.ib .t { flex: 1; font: 800 16px/1.2 var(--disp); }
.ib .gn { font-size: 13px; }
.ib:hover { background: rgba(244, 251, 251, .2); } .ib:hover .halo { --o: .62; }

/* ---------- sections ---------- */
.g { padding: 56px var(--pad) 64px; }
.g-hd { display: flex; flex-direction: column; margin-bottom: 28px; }
.g-hd h2 { font-weight: 900; font-size: 38px; line-height: 1; letter-spacing: -.015em; max-width: 620px; }
.g-hd p { color: var(--ink2); max-width: 480px; }
.list { display: flex; flex-direction: column; gap: 14px; }
.gr { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px; overflow: hidden; text-decoration: none; transition: background .3s, box-shadow .3s; }
.gr .top { display: flex; align-items: center; gap: 16px; }
.cc { position: relative; flex: none; width: 120px; height: 90px; }
.cc .halo { left: -25%; top: -25%; width: 150%; height: 150%; filter: blur(30px); translate: var(--mx, 0) var(--my, 0); }
.cc .cv { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; box-shadow: var(--lift1); }
.gr .tx { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.gt { font-size: 24px; line-height: 1.1; }
.gr .ol { color: var(--ink2); max-width: 560px; }
.gr .ctl { display: none; }
.gr:hover { background: linear-gradient(rgba(244, 251, 251, .22), rgba(244, 251, 251, .22)), color-mix(in srgb, var(--l) 40%, transparent);
  box-shadow: var(--edge), inset 0 -6px 0 var(--l), 0 0 40px color-mix(in srgb, var(--l) 45%, transparent); }
.gr:hover .halo { scale: 1.2; --o: .62; }
.gr:hover .num { text-shadow: 0 0 18px color-mix(in srgb, var(--l) 90%, transparent), 0 0 36px color-mix(in srgb, var(--l) 55%, transparent); }

.a { display: flex; flex-direction: column; gap: 28px; padding: 56px var(--pad); }
.al { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.al h2 { font-weight: 900; font-size: 34px; line-height: 1.04; letter-spacing: -.01em; }
.al p { font-size: 16px; color: var(--ink2); }
.al .pill { padding: 12px 20px; }
.facts { padding: 6px 18px; }
.facts > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; }
.facts > div + div { border-top: 1px solid rgba(244, 251, 251, .18); }
.facts dt { color: var(--ink2); font-size: 15px; }
.facts dd { font: 800 18px/1.55 var(--disp); overflow-wrap: anywhere; }
.facts dd a { text-decoration: none; }

/* ---------- footer ---------- */
.ft { display: flex; flex-direction: column; gap: 40px; padding: 56px var(--pad) 104px; background: var(--deep); }
.ft-row { display: flex; flex-direction: column; gap: 0; }
.fk { display: flex; flex-direction: column; gap: 14px; padding: 24px 20px; }
.fk h2 { font-size: 24px; }
.fk p { font-size: 15px; color: var(--ink2); }
.fm { font: 800 16px/1.55 var(--disp); color: var(--amber); overflow-wrap: anywhere; }
.fk .sm { font-size: 14px; }
.fcs { display: flex; flex-wrap: wrap; gap: 28px 40px; }
.fc h2 { font-size: 15px; line-height: 1.55; color: var(--ink2); margin-bottom: 12px; }
.fc ul { display: flex; flex-direction: column; gap: 12px; }
.fc a, .fc span, .fck { font-size: 16px; line-height: 1.55; text-decoration: none; color: var(--ink); }
.fc a:hover, .fck:hover { text-decoration: underline; }
.fck { background: none; border: 0; padding: 0; text-align: left; }
.ft-base { display: flex; flex-direction: column; gap: 0; padding-top: 20px; border-top: 1px solid rgba(244, 251, 251, .18); font-size: 13px; color: var(--ink2); }
.ft-base p:first-child { max-width: 760px; }

/* ---------- inner page heads ---------- */
.ph { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding: 84px var(--pad) 120px; }
.ph h1 { font-weight: 900; font-size: 34px; line-height: 1; letter-spacing: -.02em; max-width: 900px; }
.ph .lead { font-size: 16px; color: var(--ink2); max-width: 680px; }
.ph .upd { font-size: 14px; color: var(--ink2); }
.cat { padding: 36px var(--pad) 56px; }

/* ---------- game page ---------- */
.gh { display: flex; flex-direction: column; gap: 24px; padding: 80px var(--pad) 116px; }
.cb { position: relative; width: 100%; max-width: 560px; aspect-ratio: 4 / 3; }
.cb .halo { left: -25%; top: -20%; width: 150%; height: 140%; --o: .5; filter: blur(77px); translate: var(--mx, 0) var(--my, 0); }
.cs { position: absolute; inset: 0; padding: 10px; background: rgba(244, 251, 251, .18); }
.cs .cv { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.gtx { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.tr { display: flex; align-items: center; gap: 16px; }
.tr .num { font-size: 36px; }
.gh h1 { font-weight: 900; font-size: 40px; line-height: 1; letter-spacing: -.02em; }
.gh .sum { font-size: 16px; }
.gh .meta { font-size: 14px; color: var(--ink2); }
.tb { display: flex; flex-direction: column; gap: 24px; padding: 32px var(--pad) 48px; }
.bar { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(244, 251, 251, .1); }
.bar button { padding: 8px 14px; border: 0; border-radius: 999px; background: none; font-weight: 600; font-size: 14px; line-height: 1.55; color: var(--ink); transition: background .2s; }
.bar button:hover { background: rgba(244, 251, 251, .1); }
.bar [aria-selected=true], .bar [aria-selected=true]:hover { background: var(--l); color: var(--dark); box-shadow: 0 0 14px color-mix(in srgb, var(--l) 40%, transparent); }
.cols { display: flex; flex-direction: column; gap: 24px; }
.main { flex: 1; min-width: 0; }
.panel { display: flex; flex-direction: column; gap: 24px; }
.panel[hidden] { display: none; }
.panel h2 { font-size: 26px; }
.panel h3 { font-size: 22px; }
.panel > p { font-size: 16px; }
.panel .cr li { font-size: 15px; }
.tips { display: flex; flex-direction: column; gap: 24px; }
.tips li { display: flex; gap: 12px; font-size: 16px; }
.tn { flex: none; width: 18px; font: 900 22px/1.05 var(--disp); color: var(--l); }
.qa > div { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; }
.qa dt { font: 800 18px/1.55 var(--disp); }
.qa dd { font-size: 15px; color: var(--ink2); }
.side { display: flex; flex-direction: column; gap: 20px; }
.side h2 { font-size: 20px; }
.fs { padding: 8px 22px 11px; }
.fs h2 { font-size: 22px; padding-bottom: 2px; }
.rows > div { display: flex; gap: 14px; padding: 11px 0; }
.rows dt { flex: none; width: 96px; font-size: 14px; color: var(--ink2); }
.rows dd { flex: 1; font-size: 15px; }
.fs .rows > div:first-child { border-top: 1px solid rgba(244, 251, 251, .16); }
.ks, .wh { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px; }
.wh { gap: 12px; background: rgba(244, 251, 251, .08); }
.wh p { font-size: 14px; color: var(--ink2); }
.wh .pill { align-self: flex-start; font-size: 14px; }
.keys { display: flex; flex-direction: column; gap: 10px; }
.keys li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink2); }
.keys .chip { flex: none; white-space: nowrap; }
.keys.big li { font-size: 16px; }
.simw { display: flex; flex-direction: column; gap: 14px; }
.simw h2 { font-size: 24px; }
.sims { display: flex; flex-direction: column; gap: 16px; }
.sim { display: flex; align-items: center; gap: 16px; padding: 14px; text-decoration: none; transition: background .25s; }
.sim .sc { width: 96px; height: 72px; flex: none; object-fit: cover; border-radius: 6px; }
.sim > span { display: flex; flex-direction: column; gap: 4px; }
.sim b { font: 800 18px/1.55 var(--disp); }
.sim span span { font-size: 14px; color: var(--ink2); }
.sim:hover { background: rgba(244, 251, 251, .22); }

/* ---------- about + legal ---------- */
.ab { display: flex; flex-direction: column; gap: 18px; padding: 36px var(--pad) 56px; }
.acs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.ac { width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 20px 18px; }
.ac h2 { font-size: 22px; }
.ac p { color: var(--ink2); }
.fq { padding: 20px 18px; }
.fq h2 { font-size: 24px; }
.kc { display: flex; flex-direction: column; gap: 16px; padding: 20px 18px; }
.kl { display: flex; flex-direction: column; gap: 12px; }
.kl h2 { font-size: 24px; }
.kl p { color: var(--ink2); }
.kr { flex: 1; }
.kr > div { padding: 12px 0; gap: 16px; }
.kr dt { width: 90px; }
.kr dd { font: 800 16px/1.55 var(--disp); overflow-wrap: anywhere; }
.kr dd a { text-decoration: none; }
.lgb { padding: 32px var(--pad) 56px; }
.doc { max-width: 820px; margin: 0 auto; padding: 12px 18px; }
.ls { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; }
.ls + .ls { border-top: 1px solid rgba(244, 251, 251, .14); }
.ls h2 { font-size: 20px; }
.ls p { color: var(--ink2); }

/* ---------- cookie popup ---------- */
.cookie { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 88px; }
.cookie[hidden] { display: none; }
.ck { display: flex; flex-direction: column; gap: 14px; padding: 24px; overflow: hidden; max-width: 468px; margin-left: auto;
  background: linear-gradient(rgba(244, 251, 251, .18), rgba(244, 251, 251, .18)), rgba(35, 90, 102, .94); box-shadow: var(--edge), inset 0 -3px 0 var(--l), var(--lift2); }
.ckh { left: 40%; top: 124px; width: 50%; height: 110px; --o: .35; filter: blur(25px); }
.ck > :not(.halo) { position: relative; }
.ck h2 { font-size: 24px; }
.ck p { color: var(--ink2); }
.ck .ln { align-self: flex-start; font-size: 14px; }
.ck-acts { display: flex; gap: 10px; }
.ck-acts .pill { flex: 1; padding: 12px 10px; }
.ck-manage { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; }
.ck-manage[hidden] { display: none; }
.ck-manage label { display: flex; align-items: center; gap: 8px; }
.ck-manage input { accent-color: var(--amber); width: 16px; height: 16px; }

@media (max-width: 399px) {
  .pill { max-width: 100%; white-space: normal; text-align: center; }
}

@media (min-width: 768px) {
  .ac { width: calc(50% - 8px); }
  .sims { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ---------- desktop (Figma 1368) ---------- */
@media (min-width: 1024px) {
  :root { --pad: max(64px, calc(50% - 620px)); }
  body { font-size: 17px; }
  .wall::before { background-image: url(/assets/img/wall.svg); background-size: 228px 228px; }
  .hd { padding: 26px var(--pad); }
  .logo { font-size: 22px; }
  .hm { display: block; }
  .dock { bottom: 16px; padding: 10px 12px; }
  .dock a { padding: 8px 24px 6px; font-size: 17px; }
  .num { font-size: 64px; }

  .hero { min-height: 900px; padding: 104px var(--pad) 139px; }
  .hbg img { inset: 0; width: 100%; height: 100%; }
  .shade { inset: 0; height: auto; background: linear-gradient(90deg, rgba(2, 28, 36, .55), rgba(2, 28, 36, 0) 55%); }
  .hh { left: calc(50% + 136px); top: 640px; width: 560px; height: 220px; --o: .35; filter: blur(50px); }
  .ht { gap: 26px; }
  .ht h1 { font-size: 84px; max-width: 640px; }
  .ht p { font-size: 18px; max-width: 610px; }
  .ht .pill { padding: 14px 26px; font-size: 16px; }
  .ib { padding: 11px 18px; }
  .ib .halo { width: 200px; filter: blur(22px); }
  .ib .n { font-size: 20px; }
  .ib .t { font-size: 18px; }
  .saw { background-position: 0 13px, 0 24px, 0 35px; }

  .g { padding: 96px var(--pad) 104px; }
  .g-hd { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 40px; }
  .g-hd h2 { font-size: 64px; }
  .g-hd p { font-size: 18px; }
  .list { gap: 20px; }
  .gr { flex-direction: row; align-items: center; gap: 32px; padding: 24px 28px 27px; }
  .gr .top { gap: 28px; }
  .cc { width: 200px; height: 150px; }
  .cc .halo { filter: blur(50px); }
  .gt { font-size: 32px; }
  .gr .rm { padding: 14px 26px; font-size: 16px; }
  .gr.x .rm { display: none; }
  .gr.x .ctl { display: block; flex: none; width: 230px; font-size: 15px; color: var(--ink2); }
  .cat .list { gap: 14px; }

  .a { flex-direction: row; align-items: flex-start; gap: 64px; padding: 96px var(--pad); }
  .al { flex: none; width: min(520px, 42%); }
  .al h2 { font-size: 52px; }
  .al p { font-size: 18px; }
  .al .pill { padding: 14px 26px; font-size: 16px; }
  .facts { flex: 1; padding: 12px 32px; }
  .facts > div { flex-direction: row; gap: 24px; padding: 18px 0; }
  .facts dt { width: 220px; flex: none; }
  .facts dd { font-size: 22px; }

  .ft { gap: 56px; padding: 88px var(--pad) 104px; }
  .ft-row { flex-direction: row; justify-content: space-between; gap: 64px; }
  .fk { flex: 0 1 560px; padding: 32px; }
  .fk h2 { font-size: 28px; }
  .fm { font-size: 26px; }
  .fcs { flex-wrap: nowrap; gap: 72px; }
  .ft-base { flex-direction: row; justify-content: space-between; gap: 12px; }

  .ph { padding: 120px var(--pad) 150px; }
  .ph h1 { font-size: 80px; }
  .ph.lg h1 { font-size: 72px; }
  .ph .lead { font-size: 19px; }
  .cat { padding: 64px var(--pad) 96px; }

  .gh { flex-direction: row; align-items: center; gap: 56px; padding: 116px var(--pad) 140px; }
  .cb { flex: none; width: min(560px, 46%); }
  .cb .halo { filter: blur(132px); }
  .cs { padding: 16px; }
  .tr .num { font-size: 56px; }
  .gh h1 { font-size: 72px; }
  .gh .sum { font-size: 19px; }
  .tb { gap: 36px; padding: 56px var(--pad) 88px; }
  .bar { flex-wrap: nowrap; }
  .bar button { padding: 10px 24px; font-size: 16px; }
  .cols { flex-direction: row; align-items: flex-start; gap: 48px; }
  .side { flex: none; width: 420px; }
  .panel h2 { font-size: 34px; }
  .panel h3 { font-size: 28px; }
  .panel > p, .tips li { font-size: 18px; }
  .panel .cr li { font-size: 17px; }
  .qa > div { flex-direction: row; gap: 32px; }
  .qa dt { flex: none; width: 360px; }
  .panel .qa dt { width: 280px; }
  .simw h2 { font-size: 30px; }

  .ab { gap: 28px; padding: 72px var(--pad) 96px; }
  .acs { gap: 24px; }
  .ac { width: calc(50% - 12px); padding: 28px 30px; }
  .ac h2 { font-size: 28px; }
  .ac p { font-size: 16px; }
  .fq { padding: 28px 30px; }
  .fq h2 { font-size: 30px; }
  .kc { flex-direction: row; gap: 48px; padding: 32px; }
  .kl { flex: none; width: min(520px, 45%); }
  .kl h2 { font-size: 30px; }
  .kl p { font-size: 16px; }
  .kr dd { font-size: 20px; }
  .lgb { padding: 64px var(--pad) 96px; }
  .doc { padding: 24px 44px; }
  .ls { padding: 24px 0; }
  .ls h2 { font-size: 24px; }
  .ls p { font-size: 17px; }

  .cookie { left: auto; right: 28px; bottom: 100px; width: 468px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .halo { translate: none !important; }
}

/* ---------- social: two frosted panes ---------- */
.fc .sx { flex-direction: row; gap: 10px; }
.sx a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(244, 251, 251, .14); box-shadow: var(--edge); color: var(--ink); transition: background-color .2s, color .2s; }
.sx a:hover { background: var(--amber); color: var(--dark); text-decoration: none; }
.sx svg { width: 18px; height: 18px; }