/* Concept 04 — Immersive Signal */
.catalog-body { min-height: 100vh; overflow-x: hidden; background: #dfe2e8; color: #111318; font-family: Manrope, system-ui, sans-serif; }
.catalog-body::before { content: ""; position: fixed; z-index: 900; inset: 0; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.catalog-body::after { content: ""; position: fixed; z-index: 899; inset: 0; pointer-events: none; box-shadow: inset 0 0 150px rgba(36,43,58,.12); }
.catalog-ticker { display: flex; overflow: hidden; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.1); background: #07080b; color: #747984; font: 500 9px DM Mono, monospace; text-transform: uppercase; white-space: nowrap; }
.catalog-ticker span { display: inline-block; flex: 0 0 auto; min-width: 100%; padding-left: 3vw; letter-spacing: .2em; animation: catalog-marquee 28s linear infinite; }
@keyframes catalog-marquee { to { transform: translateX(-100%); } }
.catalog-nav { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 17px 2.6vw; border-bottom: 1px solid rgba(24,28,37,.13); background: linear-gradient(to bottom, rgba(248,249,252,.9), rgba(224,227,233,.82)); box-shadow: inset 0 1px rgba(255,255,255,.92), 0 10px 38px rgba(45,51,65,.08); backdrop-filter: blur(22px) saturate(125%); }
.catalog-brand { display: flex; align-items: center; gap: 11px; color: #111318; font: 650 13px Space Grotesk, sans-serif; letter-spacing: .12em; text-decoration: none; }
.catalog-brand b { position: relative; overflow: hidden; display: inline-grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(25,31,44,.48); border-radius: 50%; background: radial-gradient(circle at 31% 23%, #f7f9ff 0, #b9c5e2 9%, #64759f 23%, #1b2030 48%, #07080c 76%); box-shadow: inset -9px -12px 22px rgba(0,0,0,.58), inset 7px 7px 14px rgba(229,236,255,.11), inset 0 0 0 1px rgba(255,255,255,.08), 0 7px 18px rgba(44,55,82,.14); color: white; font-size: 10px; letter-spacing: .05em; text-shadow: 0 1px 6px rgba(255,255,255,.42); }
.catalog-brand b::before { content: ""; position: absolute; inset: 1px; border-radius: 50%; background: linear-gradient(138deg, rgba(255,255,255,.48) 0, rgba(255,255,255,.12) 19%, transparent 43%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.075); pointer-events: none; }
.catalog-brand > span { display: flex; flex-direction: column; gap: 3px; }
.catalog-brand small { color: #777d87; font: 400 8px DM Mono, monospace; letter-spacing: .12em; text-transform: uppercase; }
.catalog-nav-links { display: flex; align-items: center; gap: 30px; }
.catalog-nav-links a { color: #555b65; font: 500 10px DM Mono, monospace; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: color .2s ease; }
.catalog-nav-links a:hover { color: #0a0b0e; }
.catalog-nav-links a:last-child { padding: 10px 14px; border: 1px solid rgba(20,23,30,.2); border-radius: 999px; color: #22262e; background: rgba(255,255,255,.28); box-shadow: inset 0 1px rgba(255,255,255,.7); }
.catalog-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.05fr .95fr; min-height: calc(100vh - 94px); border-bottom: 1px solid rgba(25,29,38,.13); box-shadow: inset 0 1px rgba(255,255,255,.7), 0 34px 90px rgba(42,48,61,.11); }
.catalog-copy { position: relative; overflow: hidden; display: flex; min-height: 760px; flex-direction: column; justify-content: center; padding: clamp(64px, 7vw, 112px) clamp(28px, 4.8vw, 78px) 48px; border-right: 1px solid rgba(25,29,38,.13); background: radial-gradient(circle at 82% 22%, rgba(255,255,255,.95), transparent 29%), radial-gradient(circle at 48% 67%, rgba(151,172,229,.15), transparent 38%), linear-gradient(145deg, #f0f2f6 0, #d9dde5 55%, #cfd4de 100%); }
.catalog-copy::before { content: ""; position: absolute; width: min(55vw, 760px); aspect-ratio: 1; top: -18%; right: -31%; border: 1px solid rgba(69,79,101,.13); border-radius: 50%; box-shadow: 0 0 0 90px rgba(79,91,119,.035), 0 0 0 180px rgba(79,91,119,.022), inset 0 0 120px rgba(255,255,255,.34); pointer-events: none; }
.catalog-copy::after { content: ""; position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(112deg, transparent 28%, rgba(225,233,255,.18) 43%, rgba(255,255,255,.035) 50%, transparent 62%), linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-position: 150% 0, 0 0, 0 0; background-size: 90% 100%, 80px 80px, 80px 80px; background-repeat: no-repeat, repeat, repeat; mask-image: linear-gradient(to bottom, transparent, black 18%, black 84%, transparent); animation: catalog-surface-sheen 13s ease-in-out infinite; pointer-events: none; }
@keyframes catalog-surface-sheen { 0%, 14%, 100% { background-position: 180% 0, 0 0, 0 0; } 58% { background-position: -140% 0, 0 0, 0 0; } }
.catalog-copy > * { position: relative; z-index: 2; }
.catalog-label { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; color: #626975; font: 500 9px DM Mono, monospace; letter-spacing: .15em; text-transform: uppercase; }
.catalog-label::before { content: ""; width: 24px; height: 1px; background: #6479b5; box-shadow: 0 0 10px rgba(87,111,180,.35); }
.catalog-star { position: absolute; z-index: 3; top: 13%; right: 7%; width: 92px; height: 92px; display: grid; place-items: center; border: 1px solid rgba(37,43,55,.14); border-radius: 50%; background: rgba(244,246,250,.44); box-shadow: inset 0 1px rgba(255,255,255,.8), inset 0 0 35px rgba(109,132,196,.06), 0 12px 40px rgba(61,70,91,.08); color: #646b77; font: 500 8px/1.45 DM Mono, monospace; letter-spacing: .15em; text-align: center; backdrop-filter: blur(10px); }
.catalog-star::before, .catalog-star::after { content: ""; position: absolute; inset: -14px; border: 1px solid rgba(53,62,82,.07); border-radius: 50%; }
.catalog-star::after { inset: -29px; }
.catalog-star i, .catalog-live-stamp i, .catalog-stage-tags i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #9eb6ff; box-shadow: 0 0 12px #7799ff; animation: catalog-pulse 1.8s ease-in-out infinite; }
@keyframes catalog-pulse { 50% { opacity: .25; transform: scale(.72); } }
.catalog-copy h1 { max-width: 900px; margin: 38px 0 30px; font: 500 clamp(67px, 7vw, 124px)/.84 Space Grotesk, sans-serif; letter-spacing: -.075em; }
.catalog-copy h1 em { color: #777c86; font-style: normal; font-weight: 400; }
.catalog-copy h1 { color: #111318; }
.catalog-copy h1 em { color: #727985; }
.catalog-copy h1 span { background: linear-gradient(105deg, #171a20 0, #777f8d 22%, #171a20 39%, #aab1be 55%, #30353f 75%, #0c0e12 100%); background-size: 210% auto; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 24px rgba(64,75,105,.08)); animation: catalog-chrome-type 9s ease-in-out infinite; }
@keyframes catalog-chrome-type { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.catalog-copy > p { max-width: 540px; margin: 0; color: #5e6570; font-size: 15px; line-height: 1.75; }
.catalog-cta-row { display: flex; gap: 10px; margin-top: 36px; }
.catalog-btn { position: relative; min-height: 52px; overflow: hidden; padding: 13px 19px; border: 1px solid rgba(24,28,36,.16); border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.16) 55%, rgba(92,101,120,.06)); box-shadow: inset 0 1px rgba(255,255,255,.82), inset 0 -1px rgba(39,44,55,.12), 0 12px 30px rgba(44,50,63,.09); color: #353a44; cursor: pointer; font: 600 10px DM Mono, monospace; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.catalog-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.18) 46%, transparent 68%); transform: translateX(-125%); transition: transform .55s ease; }
.catalog-btn:hover::before { transform: translateX(125%); }
.catalog-btn:hover { border-color: rgba(21,25,32,.38); color: #090a0d; transform: translateY(-2px); }
.catalog-btn:active { transform: translateY(0); }
.catalog-btn.orange { border-color: #08090c; background: linear-gradient(135deg, #090a0d 0, #3c424e 38%, #111318 58%, #505867 100%); box-shadow: inset 0 1px rgba(255,255,255,.24), inset 0 -1px rgba(0,0,0,.55), 0 12px 35px rgba(32,37,48,.18); color: white; }
.catalog-btn.orange:hover { color: white; box-shadow: inset 0 1px rgba(255,255,255,.3), 0 16px 42px rgba(48,58,85,.23); }
.catalog-btn.orange span { margin-left: 26px; }
.catalog-manifesto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: auto; padding-top: 50px; color: #656c77; font: 500 8px DM Mono, monospace; letter-spacing: .08em; }
.catalog-manifesto span { padding-top: 13px; border-top: 1px solid rgba(28,32,41,.14); }
.catalog-cards { display: grid; grid-template-columns: 1fr 1fr; min-height: 760px; background: #d7dbe3; }
.catalog-mode { position: relative; overflow: hidden; min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; padding: 26px; border-right: 1px solid rgba(26,31,40,.12); border-bottom: 1px solid rgba(26,31,40,.12); background: radial-gradient(circle at 50% 43%, rgba(255,255,255,.74), transparent 35%), linear-gradient(155deg, rgba(255,255,255,.45), transparent 36%), #d7dbe3; box-shadow: inset 0 1px rgba(255,255,255,.68), inset 1px 0 rgba(255,255,255,.3); color: #15171c; text-decoration: none; transition: background .35s ease; }
.catalog-mode:nth-child(2n) { border-right: 0; }
.catalog-mode:nth-child(n+3) { border-bottom: 0; }
.catalog-mode:nth-child(2) { background: radial-gradient(circle at 50% 43%, rgba(255,255,255,.8), transparent 34%), linear-gradient(150deg, rgba(255,255,255,.35), transparent 42%), #cdd2dc; }
.catalog-mode:nth-child(3) { background: radial-gradient(circle at 50% 43%, rgba(255,255,255,.68), transparent 34%), linear-gradient(145deg, rgba(255,255,255,.28), transparent 45%), #d3d8e2; }
.catalog-mode:nth-child(4) { background: radial-gradient(circle at 50% 43%, rgba(255,255,255,.82), transparent 34%), linear-gradient(145deg, rgba(255,255,255,.4), transparent 44%), #c8ced9; }
.catalog-mode::before { content: ""; position: absolute; z-index: 1; inset: -30%; background: linear-gradient(112deg, transparent 35%, rgba(222,231,255,.085) 47%, rgba(255,255,255,.02) 52%, transparent 63%); transform: translateX(-48%); transition: transform .8s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.catalog-mode::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; box-shadow: inset 0 1px rgba(255,255,255,.035); transition: border-color .35s ease, box-shadow .35s ease; pointer-events: none; }
.catalog-mode:hover { background-color: #eef0f4; }
.catalog-mode:hover::before { transform: translateX(46%); }
.catalog-mode:hover::after { border-color: rgba(180,198,255,.23); box-shadow: inset 0 1px rgba(255,255,255,.12), inset 0 0 70px rgba(134,158,227,.05); }
.catalog-mode-index { position: relative; z-index: 2; color: #656c77; font: 500 8px DM Mono, monospace; letter-spacing: .13em; }
.catalog-mode h2 { position: relative; z-index: 2; margin: auto 0 8px; font: 500 clamp(30px, 3vw, 52px)/.92 Space Grotesk, sans-serif; letter-spacing: -.055em; }
.catalog-mode h2 b { color: #777e8a; font-size: .42em; font-weight: 400; vertical-align: middle; }
.catalog-mode small { position: relative; z-index: 2; max-width: 200px; color: #6f7682; font: 400 9px/1.55 DM Mono, monospace; letter-spacing: .05em; text-transform: uppercase; }
.catalog-mini-viz { position: absolute; z-index: 1; inset: 15% 8% 27%; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: .52; mask-image: linear-gradient(to bottom, transparent, black 22%, black 76%, transparent); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.catalog-mode:nth-child(2) .catalog-mini-viz { transform: rotate(90deg) scale(.85); }
.catalog-mode:nth-child(3) .catalog-mini-viz { transform: rotate(-90deg) scale(.78); }
.catalog-mode:hover .catalog-mini-viz { opacity: .9; transform: scale(1.05); }
.catalog-mode:nth-child(2):hover .catalog-mini-viz { transform: rotate(90deg) scale(.92); }
.catalog-mode:nth-child(3):hover .catalog-mini-viz { transform: rotate(-90deg) scale(.86); }
.catalog-mini-viz i { width: 2px; height: var(--h); border-radius: 99px; background: linear-gradient(to bottom, transparent, #25304d 30%, #7185bd 68%, transparent); box-shadow: 0 0 14px rgba(94,117,182,.22); }
.catalog-tool { display: grid; grid-template-columns: .82fr 1.18fr; min-height: 780px; border-bottom: 1px solid rgba(27,31,40,.13); background: #d7dbe3; }
.catalog-tool-copy { position: relative; overflow: hidden; padding: 68px clamp(28px, 4vw, 68px); border-right: 1px solid rgba(27,31,40,.13); background: linear-gradient(145deg, #eef0f4 0, #d9dde5 58%, #cbd1dc 100%); box-shadow: inset 0 1px rgba(255,255,255,.75); }
.catalog-tool-copy::before { content: ""; position: absolute; width: 440px; height: 440px; top: -230px; right: -220px; border-radius: 50%; background: radial-gradient(circle at 40% 42%, rgba(208,219,255,.2), rgba(112,139,215,.07) 28%, transparent 68%); filter: blur(8px); pointer-events: none; }
.catalog-tool-copy::after { content: ""; position: absolute; inset: 0; opacity: .2; background: repeating-linear-gradient(108deg, transparent 0 18px, rgba(72,83,107,.035) 18px 19px); pointer-events: none; }
.catalog-tool-copy > * { position: relative; z-index: 1; }
.catalog-tool-copy h2 { margin: 34px 0 18px; font: 500 clamp(61px, 6.5vw, 108px)/.87 Space Grotesk, sans-serif; letter-spacing: -.07em; }
.catalog-tool-copy h2 span { color: #717985; font-weight: 400; }
.catalog-tool-intro { max-width: 500px; margin: 0; color: #616975; font-size: 14px; line-height: 1.7; }
.catalog-upload { position: relative; display: flex; gap: 14px; align-items: center; margin: 34px 0 18px; padding: 17px; border: 1px solid rgba(28,33,42,.15); border-radius: 14px; background: linear-gradient(145deg, rgba(255,255,255,.68), rgba(255,255,255,.2) 48%, rgba(112,130,181,.08)); box-shadow: inset 0 1px rgba(255,255,255,.85), 0 16px 42px rgba(47,54,68,.1); cursor: pointer; backdrop-filter: blur(16px) saturate(120%); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.catalog-upload:hover { border-color: rgba(170,190,248,.38); background: rgba(148,171,236,.045); }
.catalog-upload-plus { width: 44px; height: 44px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(28,33,42,.18); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d9dfed 45%, #aeb8cf 100%); box-shadow: inset 0 1px white, 0 8px 20px rgba(59,69,91,.1); color: #242a35; font-size: 22px; font-weight: 300; }
.catalog-upload strong { display: block; color: #1f232b; font-size: 13px; font-weight: 550; }
.catalog-upload small { display: block; margin-top: 4px; color: #6e7581; font: 400 8px DM Mono, monospace; letter-spacing: .04em; text-transform: uppercase; }
.catalog-upload > b { margin-left: auto; padding-left: 14px; border-left: 1px solid rgba(28,33,42,.12); color: #686f7b; font: 500 8px/1.45 DM Mono, monospace; letter-spacing: .08em; }
.catalog-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.catalog-option { min-height: 63px; padding: 12px 14px; border: 1px solid rgba(28,33,42,.13); border-radius: 11px; background: linear-gradient(150deg, rgba(255,255,255,.62), rgba(255,255,255,.17) 52%, rgba(110,128,178,.06)); box-shadow: inset 0 1px rgba(255,255,255,.72), 0 10px 28px rgba(49,56,71,.08); backdrop-filter: blur(12px); }
.catalog-option span { display: block; margin-bottom: 6px; color: #68707d; font: 500 8px DM Mono, monospace; letter-spacing: .1em; text-transform: uppercase; }
.catalog-option strong { color: #343a45; font-size: 11px; font-weight: 500; }
.catalog-option select, .catalog-option input { width: 100%; border: 0; outline: 0; background: transparent; color: #252a33; font-size: 12px; font-weight: 500; }
.catalog-option input[type="color"] { height: 22px; padding: 0; cursor: pointer; }
.catalog-tool-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.catalog-tool-buttons .catalog-btn { width: 100%; }
.catalog-stage { position: relative; height: 720px; min-height: 720px; margin: 22px; overflow: hidden; border: 1px solid rgba(226,232,255,.19); border-radius: 22px; background: radial-gradient(circle at 50% 45%, #111725 0, #080a0f 43%, #030406 100%); box-shadow: 0 34px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.025), inset 0 1px rgba(255,255,255,.11), inset 0 0 140px rgba(123,150,229,.055); }
.catalog-stage::before { content: ""; position: absolute; z-index: 2; width: 72%; height: 160%; top: -30%; left: -82%; background: linear-gradient(108deg, transparent 22%, rgba(175,198,255,.035) 42%, rgba(244,247,255,.14) 50%, rgba(144,169,235,.03) 58%, transparent 76%); transform: skewX(-12deg); mix-blend-mode: screen; animation: catalog-stage-gloss 11s cubic-bezier(.55,0,.3,1) infinite; pointer-events: none; }
@keyframes catalog-stage-gloss { 0%, 20% { left: -82%; } 72%, 100% { left: 118%; } }
.catalog-stage::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(to bottom, rgba(4,5,8,.05) 30%, rgba(4,5,8,.35) 68%, rgba(4,5,8,.88) 100%); pointer-events: none; }
.catalog-stage canvas { height: 100%; min-height: 0; opacity: .9; }
.catalog-danger { position: absolute; z-index: 3; top: 50%; right: -72px; color: #5f6672; font: 500 8px DM Mono, monospace; letter-spacing: .2em; transform: rotate(90deg); }
.catalog-stage-tags { position: absolute; z-index: 3; top: 22px; left: 22px; right: 22px; display: flex; justify-content: space-between; }
.catalog-stage-tags span { color: #7c828d; font: 500 8px DM Mono, monospace; letter-spacing: .12em; }
.catalog-live-stamp { position: absolute; z-index: 3; top: 68px; right: 40px; width: 82px; height: 82px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: radial-gradient(circle at 34% 25%, rgba(255,255,255,.16), rgba(121,143,202,.035) 35%, rgba(7,9,13,.42) 72%); box-shadow: inset 0 1px rgba(255,255,255,.15), inset -10px -14px 25px rgba(0,0,0,.28), 0 12px 38px rgba(0,0,0,.26); color: #9299a6; font: 500 8px/1.5 DM Mono, monospace; letter-spacing: .1em; text-align: center; backdrop-filter: blur(16px) saturate(130%); }
.catalog-stage-copy { position: absolute; z-index: 3; inset: auto 34px 32px; color: white; pointer-events: none; }
.catalog-stage-copy h3 { margin: 0; color: #edeff4; font: 450 clamp(48px, 5.8vw, 96px)/.88 Space Grotesk, sans-serif; letter-spacing: -.065em; }
.catalog-stage-copy p { max-width: 470px; margin: 18px 0 0; color: #727985; font-size: 12px; line-height: 1.7; }
.catalog-bottom-tape { display: flex; align-items: center; justify-content: space-around; gap: 24px; padding: 23px 3vw; border-bottom: 1px solid rgba(26,31,40,.13); background: linear-gradient(180deg, #eef0f4 0, #d7dbe3 48%, #cdd2dc 100%); box-shadow: inset 0 1px rgba(255,255,255,.72); color: #5d6571; font: 500 8px DM Mono, monospace; letter-spacing: .18em; }
.catalog-bottom-tape i { width: 3px; height: 3px; border-radius: 50%; background: #7985a5; box-shadow: 0 0 8px #6f83bd; }

/* Moving edge light + luminous pointer */
@property --catalog-edge-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes catalog-edge-orbit { to { --catalog-edge-angle: 360deg; } }

.catalog-brand b,
.catalog-upload-plus,
.catalog-live-stamp { position: relative; }

.catalog-star::before,
.catalog-upload-plus::before,
.catalog-live-stamp::before,
.catalog-btn::after,
.catalog-mode::after,
.catalog-upload::after,
.catalog-option::after,
.catalog-stage-edge {
  content: "";
  position: absolute;
  pointer-events: none;
  padding: 1px;
  background: conic-gradient(from var(--catalog-edge-angle), transparent 0 73%, rgba(118,145,214,.12) 79%, rgba(205,220,255,.78) 84%, #fff 87%, rgba(129,159,235,.42) 91%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 5px rgba(118,148,226,.42));
  animation: catalog-edge-orbit var(--catalog-edge-speed, 7.5s) linear infinite;
}

.catalog-star::before { inset: -14px; border: 0; border-radius: 50%; --catalog-edge-speed: 8s; }
.catalog-upload-plus::before { inset: -2px; border-radius: 50%; --catalog-edge-speed: 6.5s; }
.catalog-live-stamp::before { inset: -2px; border-radius: 50%; --catalog-edge-speed: 6s; }

.catalog-btn::after,
.catalog-mode::after,
.catalog-upload::after,
.catalog-option::after { z-index: 4; inset: -1px; border: 0; border-radius: inherit; box-shadow: none; }
.catalog-btn::after { --catalog-edge-speed: 6s; }
.catalog-upload::after { --catalog-edge-speed: 8s; animation-delay: -2s; }
.catalog-option { position: relative; overflow: hidden; }
.catalog-option::after { --catalog-edge-speed: 9s; opacity: .72; }
.catalog-option:nth-child(2)::after { animation-delay: -2.25s; }
.catalog-option:nth-child(3)::after { animation-delay: -4.5s; }
.catalog-option:nth-child(4)::after { animation-delay: -6.75s; }
.catalog-mode::after { --catalog-edge-speed: 10s; opacity: .78; transition: opacity .25s ease; }
.catalog-mode:nth-child(2)::after { animation-delay: -2.5s; }
.catalog-mode:nth-child(3)::after { animation-delay: -5s; }
.catalog-mode:nth-child(4)::after { animation-delay: -7.5s; }
.catalog-mode:hover { box-shadow: inset 0 1px rgba(255,255,255,.84), inset 0 0 70px rgba(100,126,193,.1); }
.catalog-mode:hover::after { opacity: 1; border: 0; box-shadow: none; }

.catalog-stage-edge { z-index: 5; inset: 0; border-radius: inherit; --catalog-edge-speed: 9s; filter: drop-shadow(0 0 8px rgba(140,170,245,.64)); }

.catalog-cursor-glow {
  --cursor-x: -220px;
  --cursor-y: -220px;
  --cursor-scale: 1;
  position: fixed;
  z-index: 850;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,.96) 0 2%, rgba(190,211,255,.46) 8%, rgba(123,157,235,.19) 27%, rgba(106,139,218,.07) 45%, transparent 70%);
  box-shadow: 0 0 32px rgba(139,171,246,.12);
  mix-blend-mode: screen;
  transform: translate3d(var(--cursor-x), var(--cursor-y), 0) translate(-50%, -50%) scale(var(--cursor-scale));
  transition: opacity .24s ease, width .25s ease, height .25s ease, filter .25s ease;
  will-change: transform;
}
.catalog-cursor-glow.is-visible { opacity: .82; }
.catalog-cursor-glow.is-hot { --cursor-scale: 1.28; filter: saturate(1.25) brightness(1.12); }
.catalog-cursor-glow.is-pressed { --cursor-scale: .82; }

@media (prefers-reduced-motion: reduce) {
  .catalog-ticker span, .catalog-copy::after, .catalog-copy h1 span, .catalog-stage::before, .catalog-star i, .catalog-live-stamp i, .catalog-stage-tags i,
  .catalog-star::before, .catalog-upload-plus::before, .catalog-live-stamp::before, .catalog-btn::after, .catalog-mode::after, .catalog-upload::after, .catalog-option::after, .catalog-stage-edge { animation: none; }
  .catalog-cursor-glow { display: none; }
}

@media (pointer: coarse) { .catalog-cursor-glow { display: none; } }


/* Production homepage: keep the full product and SEO content in the same material system. */
.home-page { --ink: #171a21; --muted: #596170; --paper: #dfe2e8; --card: #eef0f5; --line: #bdc4d1; --mint: #dce3f5; --orange: #a6b5d8; --yellow: #dce3f5; --blue: #b7c9ff; font-size: 16px; line-height: 1.65; }
.home-page main { overflow: clip; }
.home-page .catalog-copy h1 { margin-left: 0; margin-right: 0; }
.home-page .catalog-upload > span:not(.catalog-upload-plus) { min-width: 0; }
.home-page .upload-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.home-page .file-name { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.home-page .catalog-upload-plus { flex-shrink: 0; }
.home-page .catalog-live-stamp { position: absolute; }
.home-page #visualizer-canvas { display: block; width: 100%; height: 100%; min-height: 0; }
.home-page .catalog-btn { display: inline-flex; justify-content: center; align-items: center; }
.home-page .catalog-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.home-page .catalog-btn:disabled::after { animation: none; }
.home-page .catalog-export-note { margin: 14px 0 10px; font-size: 12px; color: #596170; }
.home-page main > .catalog-tool:first-child { min-height: 0; }
.home-page main > .catalog-tool:first-child .catalog-tool-copy { padding-block: 40px; }
.home-page main > .catalog-tool:first-child .catalog-tool-copy h2 { margin-top: 24px; font-size: clamp(52px, 4.8vw, 76px); }
.home-page main > .catalog-tool:first-child .catalog-upload { margin-top: 24px; }
.home-page main > .catalog-tool:first-child .catalog-stage { height: clamp(560px, calc(100svh - 140px), 720px); min-height: 560px; }
.home-page .tool-message { color: #434d60; opacity: 1; min-height: 24px; margin: 0; overflow-wrap: anywhere; }
.home-page .tool-message[data-state="error"] { color: #923c40; }
.home-page .catalog-stage-copy p { color: #b1b9c9; }
.home-page .catalog-label, .home-page .catalog-mode small { color: #525b6a; }
.home-page :is(a, button, input, select, summary):focus-visible { outline: 2px solid #506cb0; outline-offset: 5px; }
.home-page .catalog-option:focus-within, .home-page .catalog-upload:focus-within { outline: 2px solid #506cb0; outline-offset: 4px; }
.home-page .skip-link { z-index: 950; }
.home-page .section { border-bottom: 1px solid rgba(27,31,40,.12); background: linear-gradient(140deg, #edf0f5, #dce1e9); }
.home-page .section.tint { background: linear-gradient(145deg, #d8dee8, #eef0f5); }
.home-page .section-heading h2, .home-page .split-copy h2, .home-page .cta-panel h2 { font-family: "Space Grotesk", Manrope, system-ui, sans-serif; font-weight: 500; }
.home-page .eyebrow { background: rgba(255,255,255,.32); color: #555f73; border-color: #b9c2d4; font-weight: 500; font-size: 12px; }
.home-page .eyebrow::before { background: #8499c8; box-shadow: 0 0 10px rgba(110,134,186,.3); }
.home-page .card, .home-page .keyword-link { background: linear-gradient(150deg, rgba(255,255,255,.78), rgba(243,245,250,.36)); border-color: #bac4d5; box-shadow: inset 0 1px rgba(255,255,255,.9), 0 16px 44px rgba(52,64,85,.07); }
.home-page .card .number, .home-page .card.orange .number, .home-page .card.blue .number { background: radial-gradient(circle at 32% 22%, #fff, #dbe3f4 56%, #b2bfd9); border-color: #a0aecb; font-weight: 500; }
.home-page .card h3 { font-weight: 600; }
.home-page .feature-list li::before { border-width: 1px; border-color: #7788ae; background: #c9d3e9; }
.home-page .art-panel { border: 1px solid #687893; box-shadow: inset 0 1px rgba(255,255,255,.2), 0 26px 65px rgba(25,34,53,.18); background: radial-gradient(circle, #263046, #090c13); }
.home-page .disc { background: repeating-radial-gradient(circle, #303a51 0 4px, #121a29 5px 9px); box-shadow: 0 0 0 22px rgba(184,200,243,.04), 0 0 70px rgba(144,163,223,.2); }
.home-page .disc::after { border-color: #aabbdc; background: #e7ebf4; }
.home-page .keyword-link::after { color: #536a9a; }
.home-page .cta-panel { border: 1px solid #aebad1; background: radial-gradient(circle at 50% 0, #fff, #d2daeb 75%); box-shadow: inset 0 1px white, 0 24px 60px rgba(58,72,101,.1); }
.home-page .cta-panel p { color: var(--muted); }
.home-page .button { background: linear-gradient(140deg, #202632, #49556a, #1c222e); color: #fff; border: 1px solid #273347; box-shadow: inset 0 1px rgba(255,255,255,.2), 0 10px 24px rgba(39,53,81,.1); }
.home-page .button.secondary { background: linear-gradient(145deg, #fff, #d4dcec); color: #26344d; border-color: #a2b1d0; }
.home-page .site-footer { background: linear-gradient(180deg, #e9edf4, #d5dce8); }
.home-page .site-footer .brand-mark { border: 1px solid #8898b9; background: linear-gradient(140deg, #f8fbff, #9daecc); box-shadow: inset 0 1px white; }
.home-page .site-footer .brand-mark::before { background: repeating-linear-gradient(90deg, #273347 0 2px, transparent 2px 4px); }
.home-page:lang(zh-CN) .catalog-copy h1 { font-family: Manrope, system-ui, sans-serif; font-size: clamp(52px, 6.1vw, 102px); line-height: 1.12; letter-spacing: -.055em; }
.home-page:lang(zh-CN) .catalog-tool-copy h2 { line-height: 1.1; font-size: clamp(52px, 5.6vw, 86px); }
.home-page:lang(zh-CN) .catalog-stage-copy h3 { line-height: 1.12; font-size: clamp(44px, 4.8vw, 74px); }
@media (max-width: 1100px) {
  .home-page .catalog-nav-links { gap: 18px; }
  .home-page .catalog-copy { padding-inline: 28px; }
  .home-page .catalog-copy h1 { font-size: clamp(62px, 7vw, 90px); }
}
@media (max-width: 900px) {
  .home-page .catalog-hero, .home-page .catalog-tool { grid-template-columns: 1fr; }
  .home-page .catalog-copy, .home-page .catalog-tool-copy { border-right: 0; border-bottom: 1px solid rgba(27,31,40,.13); }
  .home-page .catalog-copy { min-height: 660px; }
  .home-page .catalog-cards { min-height: 600px; }
  .home-page .catalog-mode { min-height: 300px; }
  .home-page .catalog-stage { height: 620px; min-height: 620px; }
  .home-page .catalog-stage canvas { height: 100%; min-height: 0; }
}
@media (max-width: 600px) {
  .home-page .catalog-nav { padding: 12px 14px; }
  .home-page .catalog-nav-links { gap: 8px; }
  .home-page .catalog-nav-links a:not(:last-child) { display: none; }
  .home-page .catalog-brand { font-size: 13px; }
  .home-page .catalog-copy { min-height: 650px; padding: 56px 18px 30px; }
  .home-page .catalog-copy h1 { margin-top: 64px; font-size: clamp(54px, 17.5vw, 82px); line-height: .9; }
  .home-page .catalog-star { top: 54px; right: 18px; width: 70px; height: 70px; font-size: 7px; }
  .home-page .catalog-copy > p { max-width: 100%; font-size: 14px; }
  .home-page .catalog-label { max-width: calc(100% - 76px); font-size: 8px; letter-spacing: .04em; }
  .home-page .catalog-cta-row { align-items: stretch; }
  .home-page .catalog-cta-row .catalog-btn { flex: 1; font-size: 10px; padding-inline: 12px; }
  .home-page .catalog-btn.orange span { margin-left: 8px; }
  .home-page .catalog-manifesto { gap: 12px; font-size: 8px; }
  .home-page .catalog-cards { min-height: 0; }
  .home-page .catalog-mode { min-height: 240px; padding: 18px; }
  .home-page .catalog-mode h2 { font-size: 32px; }
  .home-page .catalog-mode small { font-size: 9px; }
  .home-page .catalog-tool-copy { padding: 52px 18px; }
  .home-page .catalog-tool-copy h2 { font-size: 68px; }
  .home-page .catalog-upload > b { display: none; }
  .home-page .catalog-options { grid-template-columns: 1fr 1fr; }
  .home-page .catalog-tool-buttons { grid-template-columns: 1fr 1fr; }
  .home-page .catalog-stage { height: 520px; min-height: 520px; margin: 12px; border-radius: 16px; }
  .home-page .catalog-stage canvas { width: 100%; height: 100%; min-height: 0; }
  .home-page .catalog-danger, .home-page .catalog-live-stamp { display: none; }
  .home-page .catalog-stage-copy { inset: auto 18px 24px; }
  .home-page .catalog-stage-copy h3 { font-size: 48px; }
  .home-page .catalog-bottom-tape { gap: 20px; padding: 22px 18px; overflow: hidden; white-space: nowrap; }
  .home-page:lang(zh-CN) .catalog-copy h1 { font-size: clamp(49px, 14.5vw, 78px); line-height: 1.12; }
  .home-page:lang(zh-CN) .catalog-tool-copy h2 { font-size: 54px; }
  .home-page:lang(zh-CN) .catalog-stage-copy h3 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page *, .home-page *::before, .home-page *::after { scroll-behavior: auto; animation: none !important; transition: none !important; }
}