/* ==========================================================================
   首頁銀河主題：全頁深色、背景光絲（assets/js/galaxy.js）、液態玻璃卡片、流程圖、逐字主張、數據卡
   只在首頁載入（body.is-galaxy）
   ========================================================================== */
.is-galaxy {
	--bg: #02040b; --surface: rgba(255, 255, 255, .045);
	--ink: #f2f6ff; --ink-2: rgba(226, 234, 255, .8); --muted: rgba(200, 214, 242, .62);
	--line: rgba(255, 255, 255, .1); --line-strong: rgba(255, 255, 255, .18);
	--ice: #9fd8ff;
	/* 色彩：深空黑底、星光白字、冰晶藍強調；星雲紫只用在漸層尾端 */
	--accent: #9fd8ff; --accent-ink: #cfe8ff; --accent-soft: rgba(159, 216, 255, .14);
	background: var(--bg); color: var(--ink);
}
.galaxy { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.is-galaxy .home, .is-galaxy .site-footer { position: relative; z-index: 1; }
.is-galaxy .site-footer { background: rgba(2, 4, 11, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* 手機版主視覺文字在光絲上方：加一層柔和暗底讓字清楚 */
@media (max-width: 760px) {
	.is-galaxy .hero__grid { background: radial-gradient(130% 75% at 35% 50%, rgba(2, 4, 10, .6), rgba(2, 4, 10, 0) 72%); }
}
.is-galaxy .site-header.is-scrolled { background: rgba(4, 8, 20, .55); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.is-galaxy .site-header.is-scrolled .nav-cta { --b-bg: #fff; --b-fg: #02040b; --b-bd: #fff; }
.is-galaxy .kicker { color: var(--ice); }
.is-galaxy .section h2, .is-galaxy .section .lead, .is-galaxy .section-head p { text-shadow: 0 2px 24px rgba(2, 4, 11, .85), 0 0 2px rgba(2, 4, 11, .6); }
.is-galaxy .btn:not(.btn--accent):not(.btn--glass):not(.btn--ghost):not(.btn--ghost-light) { --b-fg: #02040b; }
.is-galaxy .btn--accent, .is-galaxy .nav-cta {
	--b-bg: linear-gradient(135deg, #fff 0%, #e2f1ff 48%, #9fd8ff 100%); --b-fg: #04101f; --b-bd: rgba(255, 255, 255, .7);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .3) inset, 0 10px 34px -10px rgba(159, 216, 255, .7);
}
.is-galaxy .btn--accent:hover, .is-galaxy .nav-cta:hover {
	--b-bg: linear-gradient(135deg, #fff 0%, #eef7ff 48%, #bfe5ff 100%); --b-fg: #04101f; --b-bd: #fff;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset, 0 14px 44px -10px rgba(159, 216, 255, .95);
}
.btn--shine { position: relative; overflow: hidden; isolation: isolate; }
.btn--shine::after {
	content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
	background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .95) 50%, transparent 65%);
	transform: translateX(-120%); animation: btn-shine 5s ease-in-out 2.6s infinite;
}
@keyframes btn-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.is-galaxy .face-pull { --fp-disc-1: #2c4a7c; --fp-disc-2: #142442; --fp-disc-3: #080f22; --fp-ring: rgba(159, 216, 255, .12); }
.is-galaxy .face-pull__disc { outline: 1px solid rgba(159, 216, 255, .35); outline-offset: -1px; }
.btn--glass {
	--b-bg: rgba(255, 255, 255, .07); --b-fg: #fff; --b-bd: rgba(255, 255, 255, .22);
	-webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn--glass:hover { --b-bg: rgba(255, 255, 255, .14); --b-fg: #fff; --b-bd: rgba(255, 255, 255, .4); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em; }

/* ---------- 液態玻璃 ---------- */
.lg, .is-galaxy .cta-band .wrap {
	position: relative; isolation: isolate; border-radius: 26px;
	background: linear-gradient(140deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 45%, rgba(160, 200, 255, .07)), rgba(6, 10, 24, .5);
	-webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(255, 255, 255, .06), inset 0 0 30px rgba(160, 200, 255, .06), 0 30px 70px -30px rgba(0, 0, 0, .8);
}
.lg::before, .is-galaxy .cta-band .wrap::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
	background: radial-gradient(420px circle at var(--mx, 25%) var(--my, 0%), rgba(255, 255, 255, .8), rgba(255, 255, 255, .1) 40%, rgba(159, 216, 255, .2) 70%, rgba(255, 255, 255, .32));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.lg::after, .is-galaxy .cta-band .wrap::after {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
	background: radial-gradient(520px circle at var(--mx, 25%) var(--my, 0%), rgba(200, 230, 255, .12), transparent 45%);
}
html.lg-refract .lg, html.lg-refract .is-galaxy .cta-band .wrap {
	-webkit-backdrop-filter: url(#lg-refract) blur(14px) saturate(140%);
	backdrop-filter: url(#lg-refract) blur(14px) saturate(140%);
}

/* ---------- 一般卡片改成玻璃 ---------- */
.is-galaxy .case-card, .is-galaxy .tool-card, .is-galaxy .industries li {
	background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.is-galaxy .case-card:hover, .is-galaxy .tool-card:hover { border-color: rgba(159, 216, 255, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 20px 50px -20px rgba(140, 195, 255, .4); }
.is-galaxy .industries { gap: 12px; background: none; border: 0; }
.is-galaxy .industries li { border-radius: 16px; }
.is-galaxy .numbered__no { background: linear-gradient(180deg, #fff, rgba(159, 216, 255, .25)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.is-galaxy .marquee { background: rgba(255, 255, 255, .03); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.is-galaxy .marquee__group li::after { color: var(--ice); }
.is-galaxy .chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--ink-2); }
.is-galaxy .cta-band { background: transparent; padding-block: clamp(60px, 9vw, 120px); }
.is-galaxy .cta-band::before { display: none; }
.is-galaxy .cta-band .wrap { max-width: min(var(--maxw), calc(100% - 2 * var(--gutter))); padding: clamp(36px, 6vw, 80px); }

/* ---------- 流程圖 ---------- */
.flow { margin: 0; padding: clamp(18px, 2.4vw, 26px); }
.flow__head { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: rgba(200, 220, 255, .65); }
.flow__live { display: inline-flex; align-items: center; gap: 8px; color: var(--ice); }
.flow__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px var(--ice); animation: hero-dot 2s ease-in-out infinite; }
.flow__map { position: relative; aspect-ratio: 16 / 9; margin: 18px 0 14px; }
.flow__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow__lines--tall { display: none; }
.flow__path { fill: none; stroke: rgba(160, 200, 255, .22); stroke-width: .5; }
.flow__dash { fill: none; stroke: var(--ice); stroke-width: .6; stroke-dasharray: 2 4; opacity: .75; animation: flow-dash 1.4s linear infinite; animation-delay: calc(var(--k) * -.3s); }
@keyframes flow-dash { to { stroke-dashoffset: -12; } }
.flow__dot { fill: #fff; }
.flow__node {
	position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
	padding: 9px 13px; border-radius: 12px; text-align: center; white-space: nowrap;
	background: rgba(8, 14, 34, .94); border: 1px solid rgba(160, 200, 255, .24);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 26px -12px rgba(0, 0, 0, .8);
}
.flow__node b { display: block; font-size: 14px; color: #fff; }
.flow__node small { display: block; margin-top: 2px; font: 11px / 1.3 ui-monospace, Menlo, monospace; color: rgba(200, 220, 255, .6); }
.flow__node--goal { border-color: rgba(159, 216, 255, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 28px -4px rgba(159, 216, 255, .6); }
.flow__log { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12px; display: grid; gap: 8px; }
.flow__log li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; color: rgba(226, 234, 255, .82); }
.flow__log time { color: rgba(200, 220, 255, .45); }
.flow__log em { font-style: normal; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(159, 216, 255, .35); color: var(--ice); font-size: 11px; }
@media (max-width: 760px) {
	.flow__map { aspect-ratio: 3 / 4; }
	.flow__lines--wide { display: none; }
	.flow__lines--tall { display: block; }
	.flow__node { left: var(--mx); top: var(--my); }
}

/* ---------- 逐字主張 ---------- */
.statement { overflow: hidden; padding: clamp(44px, 8vw, 110px) clamp(24px, 6vw, 90px); text-align: center; }
.statement__kicker { margin: 0 0 22px; font-size: 12px; color: rgba(200, 220, 255, .6); }
.statement__text { position: relative; z-index: 1; margin: 0; font-size: clamp(30px, 5.4vw, 80px); line-height: 1.32; font-weight: 900; letter-spacing: .02em; }
.statement__text .ch { color: rgba(220, 232, 255, .14); transition: color .5s, text-shadow .5s; }
.statement__text .ch.on { color: #fff; text-shadow: 0 0 28px rgba(159, 216, 255, .4); }
.statement__mark { position: absolute; right: 4%; top: 50%; height: 130%; transform: translateY(-50%); fill: rgba(159, 216, 255, .05); pointer-events: none; }

/* ---------- 數據卡 ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.metric { grid-column: span 2; display: flex; flex-direction: column; min-height: 270px; padding: clamp(20px, 2.2vw, 28px); }
.metric--3, .metric--4 { grid-column: span 3; }
.metric__label { margin: 0; font-size: 12px; color: rgba(200, 220, 255, .7); }
.metric__value { margin: 14px 0 18px; font-family: var(--f-display); font-weight: 700; font-size: clamp(46px, 5vw, 74px); line-height: 1; color: #fff; text-shadow: 0 0 30px rgba(159, 216, 255, .25); }
.metric__value small { margin-left: 6px; font-family: var(--f-body); font-size: .3em; font-weight: 700; color: var(--ink-2); }
.metric__viz { margin-top: auto; display: flex; align-items: flex-end; height: 64px; }
.metric__note { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.viz-seg { display: flex; gap: 5px; width: 100%; height: 30px; }
.viz-seg i { flex: 1; border-radius: 5px; background: rgba(159, 216, 255, .12); transition: background .3s, box-shadow .3s; transition-delay: calc(var(--k) * 90ms + .3s); }
.is-in .viz-seg i { background: linear-gradient(180deg, #e3f2ff, #7fb4e6); box-shadow: 0 0 10px -2px rgba(159, 216, 255, .7); }
.viz-line, .viz-spark { width: 100%; height: 64px; overflow: visible; }
.viz-line polyline, .viz-spark .stroke { fill: none; stroke: #cfe9ff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(159, 216, 255, .8)); }
.is-in .viz-line polyline, .is-in .viz-spark .stroke { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease) .3s; }
.viz-line circle { fill: #fff; opacity: 0; }
.is-in .viz-line circle { opacity: 1; transition: opacity .4s 2s; }
.viz-spark .area { opacity: 0; }
.is-in .viz-spark .area { opacity: 1; transition: opacity 1s 1.2s; }
.viz-bars { display: flex; align-items: flex-end; gap: 8px; width: 100%; height: 64px; }
.viz-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #eaf5ff, #5f93c8); transform: scaleY(0); transform-origin: bottom; opacity: .9; }
.viz-bars i:last-child { box-shadow: 0 0 22px -2px rgba(159, 216, 255, .9); }
.is-in .viz-bars i { transform: scaleY(1); transition: transform 1s var(--ease); transition-delay: calc(var(--k) * 110ms + .3s); }
.viz-dots { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 6px; width: 100%; }
.viz-dots i { aspect-ratio: 1; border-radius: 50%; background: rgba(159, 216, 255, .14); transition: background .3s, box-shadow .3s; transition-delay: calc(var(--k) * 30ms + .3s); }
.is-in .viz-dots i { background: var(--ice); box-shadow: 0 0 6px var(--ice); }
@media (max-width: 900px) {
	.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.metric, .metric--3 { grid-column: span 1; }
	.metric--4 { grid-column: span 2; }
}
@media (max-width: 560px) {
	.bento { grid-template-columns: minmax(0, 1fr); }
	.metric, .metric--3, .metric--4 { grid-column: auto; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.flow__dash { animation: none; }
	.statement__text .ch { color: #fff; }
}

/* ---------- 服務列：數字描邊後填色、標題逐字浮起、線稿畫出、捲到中央的列亮起 ---------- */
.svc { isolation: isolate; transition: opacity .6s var(--ease), padding .35s var(--ease); }
.numbered--svc.has-active .svc:not(.is-active) { opacity: .5; }
.svc::before {
	content: ""; position: absolute; inset: 0 -28px; z-index: -1; border-radius: 28px; pointer-events: none;
	background: radial-gradient(460px circle at var(--mx, 30%) var(--my, 50%), rgba(159, 216, 255, .09), transparent 60%);
	opacity: 0; transition: opacity .5s;
}
.svc:hover::before, .svc.is-active::before { opacity: 1; }
.svc::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; transform-origin: left;
	background: linear-gradient(90deg, transparent, #9fd8ff 40%, #fff 50%, #9fd8ff 60%, transparent);
	transform: scaleX(0); opacity: 0;
}
.svc.is-in::after { animation: svc-line 1.6s var(--ease) .1s; }
.svc.is-active::after { transform: scaleX(1); opacity: .45; transition: opacity .6s; }
@keyframes svc-line { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.is-galaxy .svc .numbered__no { position: relative; background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 100%; transition: filter .5s; }
.svc .numbered__no::after { content: attr(data-no); position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 1px rgba(159, 216, 255, .45); pointer-events: none; }
.svc.pre .numbered__no { background-size: 100% 0%; }
.svc.is-in .numbered__no { transition: background-size 1.4s var(--ease) .25s, filter .5s; }
.svc.is-active .numbered__no, .svc:hover .numbered__no { filter: drop-shadow(0 0 18px rgba(159, 216, 255, .45)); }
.svc__t .c { display: inline-block; transition: transform .8s var(--ease), opacity .8s var(--ease), color .4s, text-shadow .4s; transition-delay: calc(.2s + var(--i) * 45ms); }
.svc.pre .svc__t .c { opacity: 0; transform: translateY(.7em) rotate(4deg); }
.svc:hover .svc__t .c, .svc.is-active .svc__t .c { text-shadow: 0 0 22px rgba(159, 216, 255, .45); }
.svc .numbered__body p { transition: opacity .8s var(--ease) .35s, transform .8s var(--ease) .35s; }
.svc.pre .numbered__body p { opacity: 0; transform: translateY(14px); }
.svc .chip { transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .3s, background .3s; transition-delay: calc(.55s + var(--k) * 70ms); }
.svc.pre .chip { opacity: 0; transform: translateY(10px) scale(.92); }
.svc:hover .chip { border-color: rgba(159, 216, 255, .35); background: rgba(159, 216, 255, .08); }

.svc-viz { display: block; width: min(100%, 250px); height: auto; margin-top: 26px; overflow: visible; }
.svc-viz .o { fill: none; stroke: rgba(190, 222, 255, .5); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.svc:hover .svc-viz .o, .svc.is-active .svc-viz .o { stroke: rgba(214, 236, 255, .8); }
.svc.pre .svc-viz .o { stroke-dasharray: 1; stroke-dashoffset: 1; }
.svc.is-in .svc-viz .o { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease) .35s, stroke .4s; }
.sv-bars rect { fill: rgba(159, 216, 255, .22); stroke: rgba(159, 216, 255, .7); stroke-width: 1; transform-box: fill-box; transform-origin: 50% 100%; animation: sv-bar 3.6s ease-in-out infinite; animation-delay: calc(var(--k) * -.7s); }
.svc.pre .sv-bars rect { transform: scaleY(0); }
.svc.is-in .sv-bars rect { transition: transform 1s var(--ease); transition-delay: calc(.6s + var(--k) * 90ms); }
@keyframes sv-bar { 50% { scale: 1 .8; } }
.svc-viz .sv-line { stroke: #cfe9ff; stroke-width: 1.6; filter: drop-shadow(0 0 3px rgba(159, 216, 255, .9)); }
.sv-dot { fill: #fff; filter: drop-shadow(0 0 4px #9fd8ff); animation: sv-blink 2s ease-in-out infinite; }
@keyframes sv-blink { 50% { opacity: .3; } }
.sv-pointer { transform-box: view-box; transform-origin: 198px 80px; animation: sv-point 4s ease-in-out infinite; }
@keyframes sv-point { 50% { rotate: -9deg; } }
.sv-node circle { fill: rgba(8, 14, 32, .92); stroke: rgba(159, 216, 255, .55); stroke-width: 1; }
.sv-node text { fill: rgba(220, 236, 255, .85); font: 600 8px ui-monospace, Menlo, monospace; text-anchor: middle; letter-spacing: .04em; }
.sv-node { transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease), opacity .7s; transition-delay: calc(.5s + var(--k) * 90ms); }
.svc.pre .sv-node { opacity: 0; transform: scale(.4); }
.sv-hub circle { stroke: #9fd8ff; stroke-width: 1.4; filter: drop-shadow(0 0 6px rgba(159, 216, 255, .7)); animation: sv-hub 2.6s ease-in-out infinite; }
.sv-hub text { font-size: 10px; fill: #fff; }
@keyframes sv-hub { 50% { stroke-width: 2.6; } }
.sv-pulse { fill: #fff; filter: drop-shadow(0 0 3px #9fd8ff); }
.sv-arc { fill: none; stroke: #9fd8ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .74 1; filter: drop-shadow(0 0 4px rgba(159, 216, 255, .8)); }
.svc.pre .sv-arc { stroke-dashoffset: .74; }
.svc.is-in .sv-arc { transition: stroke-dashoffset 1.8s var(--ease) .5s; }
.sv-ticks path { stroke: rgba(190, 222, 255, .45); stroke-width: 1; }
.sv-needle { transform-box: view-box; transform-origin: 120px 108px; rotate: 43deg; animation: sv-needle 5s ease-in-out 2.4s infinite; }
.sv-needle path { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.sv-needle circle { fill: #9fd8ff; }
.svc.pre .sv-needle { rotate: -88deg; }
.svc.is-in .sv-needle { transition: rotate 1.8s var(--ease) .5s; }
@keyframes sv-needle { 50% { transform: rotate(-7deg); } }
.sv-label { fill: rgba(220, 236, 255, .7); font: 600 9px ui-monospace, Menlo, monospace; text-anchor: middle; letter-spacing: .12em; }
@media (max-width: 899px) { .svc-viz { width: 200px; margin-top: 14px; } }

/* ---------- 產業翻牌：正面產業描述，背面標誌與成果 ---------- */
.flip-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; perspective: 1400px; }
.flip { position: relative; min-height: 220px; cursor: pointer; border-radius: 18px; -webkit-tap-highlight-color: transparent; }
.flip:focus-visible { outline: 2px solid var(--ice); outline-offset: 4px; }
.flip__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
@media (hover: hover) { .flip:hover .flip__inner { transform: rotateY(180deg); } }
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip-grid.is-peek .flip__inner { animation: flip-peek 2.6s cubic-bezier(.3, .7, .2, 1) calc(var(--k) * 110ms) both; }
@keyframes flip-peek { 0% { transform: none; } 30%, 62% { transform: rotateY(180deg); } 100% { transform: none; } }
.flip__face {
	position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border-radius: 18px; overflow: hidden;
	-webkit-backface-visibility: hidden; backface-visibility: hidden;
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 50px -30px rgba(0, 0, 0, .9);
}
.flip__front { background: linear-gradient(150deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 55%), rgba(8, 12, 26, .72); }
.flip__front::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(360px circle at var(--mx, 80%) var(--my, 0%), rgba(159, 216, 255, .12), transparent 55%);
}
.flip__idx { font-size: 12px; color: rgba(159, 216, 255, .7); }
.flip__name { margin-top: auto; font-size: 18px; line-height: 1.45; color: #fff; }
.flip__type { font-size: 13px; color: var(--muted); }
.flip__hint { position: absolute; right: 20px; top: 20px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(200, 222, 255, .55); }
.flip__hint svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; animation: flip-spin 3.2s var(--ease) infinite; }
@keyframes flip-spin { 0%, 60% { transform: none; } 100% { transform: rotate(360deg); } }
.flip__back {
	transform: rotateY(180deg); gap: 10px;
	background: radial-gradient(120% 90% at 88% 0%, rgba(159, 216, 255, .24), transparent 55%), linear-gradient(160deg, #101b36, #060a17);
	border-color: rgba(159, 216, 255, .32);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 40px -12px rgba(159, 216, 255, .35);
}
.flip__logo { display: flex; align-items: center; height: 34px; }
.flip__logo .co-logo { height: calc(var(--lh) * .72px); max-height: 34px; width: auto; max-width: 100%; filter: brightness(0) invert(1); opacity: .95; }
.flip__wordmark { font: 600 15px / 1.3 var(--f-body); letter-spacing: .06em; color: #fff; }
.flip__num { margin: auto 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.flip__num b { font: 600 40px / 1 var(--f-display); color: #fff; text-shadow: 0 0 26px rgba(159, 216, 255, .55); }
.flip__num span { font-size: 12px; color: var(--ice); }
.flip__win { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(226, 234, 255, .86); }
.flip__logo + .flip__win { margin-top: auto; }
@media (max-width: 980px) { .flip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .flip-grid { grid-template-columns: minmax(0, 1fr); } .flip { min-height: 200px; } }
@media (prefers-reduced-motion: reduce) {
	.flip__inner { transition: none; }
	.svc.pre .svc__t .c, .svc.pre .chip, .svc.pre .numbered__body p { opacity: 1; transform: none; }
}