/* Quadinel AI — Home page.
 * Base styles, keyframes, then one class per unique style block, grouped by page section.
 * Mobile overrides live in responsive.css. */

html, body { margin: 0; padding: 0; background: #f7f4f1; }
  body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #eef5f8; -webkit-font-smoothing: antialiased; }
  * { box-sizing: border-box; }
  a { color: #f04c1d; text-decoration: none; }
  a:hover { color: #ff7f57; }
  @keyframes hmCue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
  @keyframes hmBlink { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
  @keyframes hmCardScan { 0% { transform: translateY(-13%); } 50% { transform: translateY(670%); } 100% { transform: translateY(-13%); } }
  @keyframes hmFlow { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
  @keyframes hmMeter { 0%, 100% { transform: scaleX(.62); } 50% { transform: scaleX(1); } }
  @keyframes hmSoftDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(28px, 28px, 0); } }
  @keyframes hmPatternDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(34px, 34px, 0); } }
  [data-hm="navburger"] { display: none; }

[data-live] { font-style: normal; }

/* ---- shell ---- */
.qh-shell-1 { background: #fdf4f1; }
.qh-shell-2 { position: fixed; z-index: 39; top: 0; left: 0; right: 0; height: 70px; pointer-events: none; background: #ffffff; border-bottom: 1px solid rgba(20,24,27,.09); }

/* ---- nav ---- */
.qh-nav-1 { position: fixed; z-index: 40; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 15px 5.5vw; background: rgba(255,255,255,0); border-bottom: 1px solid rgba(11,20,24,0); transition: padding .4s cubic-bezier(.16,1,.3,1); }
.qh-nav-2 { display: flex; align-items: center; gap: 44px; }
.qh-nav-3 { display: flex; align-items: center; height: 35px; cursor: pointer; }
.qh-nav-4 { display: block; height: 35px; width: auto; }
.qh-nav-5 { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 500; }
.qh-nav-6 { color: rgba(20,24,27,.72); transition: color .3s ease; }
.qh-nav-6:hover { color: #c0360f; }
.qh-nav-7 { color: rgba(20,24,27,.78); transition: color .3s ease; }
.qh-nav-7:hover { color: #c0360f; }
.qh-nav-8 { display: flex; align-items: center; gap: 14px; }
.qh-nav-9 { appearance: none; cursor: pointer; display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(20,24,27,.18); border-radius: 10px; background: #ffffff; }
.qh-nav-10 { display: flex; flex-direction: column; gap: 4px; }
.qh-nav-11 { display: block; width: 18px; height: 1.5px; background: #14181b; }
.qh-nav-12 { appearance: none; cursor: pointer; background: transparent; font-family: inherit; padding: 11px 22px; border-radius: 9px; border: 1px solid rgba(20,24,27,.2); font-size: 14px; font-weight: 600; color: #14181b; background: #ffffff; transition: border-color .35s ease, color .35s ease, box-shadow .45s ease, transform .45s cubic-bezier(.16,1,.3,1); }
.qh-nav-12:hover { border-color: #f04c1d; color: #c0360f; box-shadow: 0 0 0 3px rgba(240,76,29,.14), 0 12px 26px -18px rgba(240,76,29,.7); transform: translateY(-1px); }

/* ---- navpanel ---- */
.qh-navpanel-1 { display: none; position: fixed; z-index: 41; top: 56px; left: 0; right: 0; flex-direction: column; gap: 2px; padding: 10px 5vw 16px; background: #ffffff; border-bottom: 1px solid rgba(20,24,27,.1); box-shadow: 0 26px 44px -30px rgba(20,24,27,.5); }
.qh-navpanel-2 { display: flex; align-items: center; min-height: 46px; font-size: 15px; font-weight: 500; color: #14181b; }
.qh-navpanel-3 { appearance: none; border: 0; cursor: pointer; font-family: inherit; width: 100%; min-height: 48px; margin-top: 8px; border-radius: 10px; background: #f04c1d; color: #2b0a02; font-size: 15px; font-weight: 600; }

/* ---- hero ---- */
.qh-hero-1 { position: relative; z-index: 1; height: 100vh; background: #f7f4f1; }
.qh-hero-2 { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #f7f4f1; }
.qh-hero-3 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100vw, 167vh); aspect-ratio: 1500 / 898; opacity: 0; will-change: opacity; }
.qh-hero-4 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qh-hero-5 { position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 50%, rgba(247,244,241,.62), rgba(247,244,241,.95)); opacity: .88; will-change: opacity; pointer-events: none; }
.qh-hero-6 { position: absolute; inset: 0; background-image: linear-gradient(rgba(240,76,29,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(240,76,29,.1) 1px, transparent 1px); background-size: 72px 72px; opacity: .4; will-change: opacity; pointer-events: none; }
.qh-hero-7 { position: absolute; inset: 0; pointer-events: none; opacity: .9; will-change: opacity; }
.qh-hero-8 { position: absolute; inset: -10%; background-image: radial-gradient(rgba(20,24,27,.1) 1px, transparent 1px); background-size: 34px 34px; animation: hmPatternDrift 34s linear infinite; }
.qh-hero-9 { position: absolute; left: -12%; top: -22%; width: 60vw; height: 60vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(240,76,29,.06), rgba(240,76,29,0)); animation: hmBloom 26s ease-in-out infinite; }
.qh-hero-10 { position: absolute; right: -18%; bottom: -26%; width: 66vw; height: 66vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(240,76,29,.07), rgba(240,76,29,0)); animation: hmBloom 30s ease-in-out 6s infinite; }
.qh-hero-11 { position: absolute; left: 46%; top: 8%; width: 34vw; height: 34vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(20,24,27,.045), rgba(20,24,27,0)); animation: hmBloom 22s ease-in-out 12s infinite; }
.qh-hero-12 { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(300px, 1.04fr) minmax(280px, 1fr); align-items: center; gap: 4vw; padding: clamp(64px, 8vh, 92px) 5.5vw clamp(90px, 12vh, 138px); pointer-events: none; }
.qh-hero-13 { position: relative; z-index: 12; display: flex; flex-direction: column; align-items: flex-start; text-align: left; will-change: transform, opacity; }
.qh-hero-14 { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 7px 15px 7px 11px; border: 1px solid rgba(240,76,29,.42); border-radius: 999px; background: rgba(240,76,29,.12); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #c0360f; }
.qh-hero-15 { width: 6px; height: 6px; border-radius: 50%; background: #f04c1d; animation: hmBlink 1.9s ease-in-out infinite; }
.qh-hero-16 { margin-bottom: 10px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(20,24,27,.55); }
.qh-hero-17 { margin: 0 0 16px; font-size: clamp(30px, min(4.1vw, 5.4vh), 56px); line-height: 1.04; font-weight: 600; letter-spacing: -.042em; color: #0e1214; max-width: 19ch; }
.qh-hero-18 { margin: 0 0 clamp(12px, 2.6vh, 18px); font-size: clamp(13.5px, 2.8vh, 15.5px); line-height: 1.55; font-weight: 300; color: rgba(20,24,27,.74); max-width: 44ch; text-wrap: pretty; }
.qh-hero-19 { display: flex; flex-wrap: wrap; gap: clamp(3px, .8vh, 5px); margin-bottom: clamp(12px, 2.6vh, 18px); max-width: 100%; pointer-events: none; }
.qh-hero-20 { padding: clamp(2px, .5vh, 4px) clamp(7px, 1.1vw, 10px); border: 1px solid rgba(20,24,27,.16); border-radius: 999px; background: rgba(255,255,255,.72); font-size: clamp(10px, 1.9vh, 11.5px); font-weight: 400; color: rgba(20,24,27,.72); white-space: nowrap; }
.qh-hero-21 { appearance: none; border: 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 10px; padding: 17px 30px; border-radius: 10px; background: #f04c1d; color: #2b0a02; font-size: 15.5px; font-weight: 600; pointer-events: auto; box-shadow: 0 14px 30px -18px rgba(240,76,29,.85); transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, background .35s ease; }
.qh-hero-21:hover { transform: translateY(-3px); background: #ff5f2e; box-shadow: 0 22px 44px -18px rgba(240,76,29,.95), 0 0 0 4px rgba(240,76,29,.16); }
.qh-hero-22 { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.qh-hero-23 { position: relative; z-index: 5; height: min(64vh, 100%); aspect-ratio: 4 / 5; max-width: 100%; border-radius: 22px; border: 1px solid rgba(240,76,29,.45); background: linear-gradient(180deg, #ffffff, #fbf7f4); box-shadow: 0 40px 80px -46px rgba(20,24,27,.42), inset 0 0 70px rgba(240,76,29,.05); overflow: hidden; will-change: transform, opacity; }
.qh-hero-24 { position: absolute; inset: 0; background-image: linear-gradient(rgba(240,76,29,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(240,76,29,.13) 1px, transparent 1px); background-size: 56px 56px; }
.qh-hero-25 { position: absolute; left: 0; right: 0; top: 0; height: 13%; background: linear-gradient(180deg, rgba(240,76,29,0), rgba(240,76,29,.34)); border-bottom: 1px solid rgba(240,76,29,.55); animation: hmCardScan 7s cubic-bezier(.45,.05,.55,.95) infinite; }
.qh-hero-26 { position: absolute; left: 22px; top: 22px; width: 18px; height: 18px; border-left: 2px solid rgba(240,76,29,.85); border-top: 2px solid rgba(240,76,29,.85); }
.qh-hero-27 { position: absolute; right: 22px; top: 22px; width: 18px; height: 18px; border-right: 2px solid rgba(240,76,29,.85); border-top: 2px solid rgba(240,76,29,.85); }
.qh-hero-28 { position: absolute; left: 22px; bottom: 22px; width: 18px; height: 18px; border-left: 2px solid rgba(240,76,29,.85); border-bottom: 2px solid rgba(240,76,29,.85); }
.qh-hero-29 { position: absolute; right: 22px; bottom: 22px; width: 18px; height: 18px; border-right: 2px solid rgba(240,76,29,.85); border-bottom: 2px solid rgba(240,76,29,.85); }
.qh-hero-30 { position: absolute; left: 30px; top: 24px; display: flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .08em; white-space: nowrap; color: #f04c1d; }
.qh-hero-31 { width: 6px; height: 6px; border-radius: 50%; background: #f04c1d; animation: hmBlink 1.8s ease-in-out infinite; }
.qh-hero-32 { position: absolute; left: 50%; top: 56%; height: 70%; aspect-ratio: 544 / 712; transform: translate(-50%, -50%); }
.qh-hero-33 { position: absolute; z-index: 7; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.qh-hero-34 { position: absolute; left: calc(73.67vw - 18.09vh); top: calc(50vh - 23.68vh); width: 36.18vh; transform-origin: 50% 50%; will-change: transform; }
.qh-hero-35 { display: block; width: 100%; height: auto; }
.qh-hero-36 { display: none; width: 100%; height: 100%; background-repeat: no-repeat; -webkit-mask-image: radial-gradient(ellipse 84% 92% at 50% 50%, #000 68%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(ellipse 84% 92% at 50% 50%, #000 68%, rgba(0,0,0,0) 100%); }
.qh-hero-37 { position: absolute; left: 0; bottom: 100%; transform-origin: 0 100%; will-change: transform; padding: 2px 6px; border-radius: 3px; background: #ff4d4d; color: #2a0505; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500; letter-spacing: .04em; white-space: nowrap; }
.qh-hero-38 { display: none; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 17% 32% at 61% 54%, rgba(255,38,10,.9), rgba(255,120,24,.66) 42%, rgba(255,196,44,.34) 70%, rgba(255,208,60,0) 100%), radial-gradient(ellipse 12% 24% at 30% 62%, rgba(255,150,26,.6), rgba(255,200,50,.24) 58%, rgba(255,200,50,0) 100%); mix-blend-mode: hard-light; }
.qh-hero-39 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100vw, 242vh); aspect-ratio: 1500 / 620; z-index: 8; pointer-events: none; }
.qh-hero-40 { position: absolute; left: 40%; top: 16.5%; width: 9%; height: 8%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-41 { position: absolute; inset: 0; border: 1.5px solid #f04c1d; border-radius: 2px; box-shadow: 0 0 20px rgba(240,76,29,.34); clip-path: inset(0 100% 0 0); }
.qh-hero-42 { position: absolute; bottom: calc(100% + 6px); left: -1.5px; padding: 3px 8px; border-radius: 4px; background: #f04c1d; color: #2b0a02; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; white-space: nowrap; opacity: 0; }
.qh-hero-43 { position: absolute; left: 58%; top: 39%; width: 3.6%; height: 9.5%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-44 { position: absolute; left: 66.5%; top: 59%; width: 3.6%; height: 10.5%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-45 { position: absolute; left: 46%; top: 79%; width: 26%; height: 17%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-46 { position: absolute; left: 72%; top: 92%; width: 5.5%; height: 9.5%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-47 { position: absolute; left: 85%; top: 29%; width: 12%; height: 15%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-48 { position: absolute; left: 28%; top: 60%; width: 14%; height: 11%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-49 { position: absolute; left: 63.5%; top: 24%; width: 4%; height: 8%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-50 { position: absolute; inset: 0; border: 1.5px solid #ff4d4d; border-radius: 2px; box-shadow: 0 0 20px rgba(255,77,77,.34); clip-path: inset(0 100% 0 0); }
.qh-hero-51 { position: absolute; bottom: calc(100% + 6px); left: -1.5px; padding: 3px 8px; border-radius: 4px; background: #ff4d4d; color: #260404; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; white-space: nowrap; opacity: 0; }
.qh-hero-52 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100vw, 167vh); aspect-ratio: 5 / 3; z-index: 8; pointer-events: none; }
.qh-hero-53 { position: absolute; left: 15%; top: 62%; width: 13%; height: 30%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-54 { position: absolute; left: 80.5%; top: 58%; width: 12%; height: 28%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-55 { position: absolute; left: 58%; top: 82%; width: 7%; height: 19%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-56 { position: absolute; left: 48.5%; top: 84%; width: 6%; height: 16%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-57 { position: absolute; left: 73%; top: 88%; width: 7%; height: 17%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-58 { position: absolute; left: 90%; top: 84%; width: 8%; height: 22%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-59 { position: absolute; left: 56%; top: 92%; width: 26%; height: 11%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-60 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100vw, 200vh); aspect-ratio: 2 / 1; z-index: 8; pointer-events: none; }
.qh-hero-61 { position: absolute; left: 50.8%; top: 73.65%; width: 3.2%; height: 8.8%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-62 { position: absolute; left: 36.5%; top: 63%; width: 7%; height: 10%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-63 { position: absolute; left: 33%; top: 44%; width: 6%; height: 9%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-64 { position: absolute; left: 21%; top: 47.5%; width: 9%; height: 10%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-65 { position: absolute; left: 69%; top: 55.5%; width: 6.5%; height: 6%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-66 { position: absolute; left: 61.6%; top: 82%; width: 2.4%; height: 9.5%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-67 { position: absolute; left: 24.5%; top: 79.5%; width: 7%; height: 7%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-68 { position: absolute; left: 35%; top: 93%; width: 30%; height: 5%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-69 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100vw, 181vh); aspect-ratio: 5 / 3; z-index: 8; pointer-events: none; }
.qh-hero-70 { position: absolute; left: 59.2%; top: 87%; width: 3%; height: 10%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-71 { position: absolute; inset: 0; border: 1.5px solid #ff4d4d; border-radius: 2px; box-shadow: 0 0 20px rgba(255,77,77,.4); clip-path: inset(0 100% 0 0); }
.qh-hero-72 { position: absolute; left: 37%; top: 85%; width: 3.2%; height: 10.5%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-73 { position: absolute; left: 69.5%; top: 77%; width: 2.8%; height: 8.5%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-74 { position: absolute; left: 42%; top: 60%; width: 26%; height: 8%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-75 { position: absolute; left: 86%; top: 62%; width: 15%; height: 9%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-76 { position: absolute; left: 20%; top: 62.5%; width: 3%; height: 8.5%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-77 { position: absolute; left: 24.5%; top: 64%; width: 3%; height: 8.5%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.qh-hero-78 { position: absolute; inset: 0; z-index: 30; padding-top: 70px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: #d9d3cd; will-change: opacity; }
.qh-hero-79 { position: relative; display: flex; flex-direction: column; appearance: none; cursor: pointer; border: 0; padding: 0; overflow: hidden; background: #f7f4f1; text-align: left; transition: filter .35s cubic-bezier(.16,1,.3,1); font-family: 'Plus Jakarta Sans', sans-serif; color: #14181b; }
.qh-hero-80 { position: absolute; inset: 0; overflow: hidden; }
.qh-hero-81 { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 72%; pointer-events: none; background: linear-gradient(180deg, rgba(6,9,11,0), rgba(6,9,11,.5) 16%, rgba(6,9,11,.78) 44%, rgba(6,9,11,.93)); }
.qh-hero-82 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.98) saturate(1); transition: transform 1.4s cubic-bezier(.16,1,.3,1), filter .8s ease; }
.qh-hero-82:hover { transform: scale(1.06); filter: brightness(1.05) saturate(1.06); }
.qh-hero-83 { position: absolute; inset: 0; background-image: linear-gradient(rgba(240,76,29,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(240,76,29,.08) 1px, transparent 1px); background-size: 54px 54px; opacity: .5; }
.qh-hero-84 { position: absolute; left: 0; right: 0; top: 0; height: 12%; background: linear-gradient(180deg, rgba(240,76,29,0), rgba(240,76,29,.09)); border-bottom: 1px solid rgba(240,76,29,.2); animation: hmCardScan 9s cubic-bezier(.45,.05,.55,.95) 0.0s infinite; }
.qh-hero-85 { z-index: 3; padding: 5px 10px; margin: -5px -10px; border-radius: 7px; background: rgba(255,255,255,.88); position: absolute; left: 20px; top: 26px; display: flex; align-items: center; gap: 16px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; color: rgba(158,60,20,.95); }
.qh-hero-86 { display: inline-flex; align-items: center; gap: 7px; }
.qh-hero-87 { width: 5px; height: 5px; border-radius: 50%; background: #f04c1d; animation: hmBlink 1.7s ease-in-out infinite; }
.qh-hero-88 { z-index: 3; position: absolute; right: 26px; top: 22px; display: flex; align-items: center; gap: 8px; }
.qh-hero-89 { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 90px 30px 26px; }
.qh-hero-90 { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.qh-hero-91 { font-size: clamp(20px, 2.1vw, 30px); font-weight: 600; letter-spacing: -.03em; color: #f4fafc; }
.qh-hero-92 { margin: 7px 0 0; font-size: 13px; line-height: 1.45; font-weight: 300; color: rgba(238,245,248,.72); max-width: 40ch; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qh-hero-93 { text-align: right; flex: 0 0 auto; }
.qh-hero-94 { font-family: 'JetBrains Mono', monospace; font-size: clamp(20px, 2vw, 28px); line-height: 1; color: #f4fafc; font-variant-numeric: tabular-nums; }
.qh-hero-95 { margin-top: 5px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .12em; color: rgba(238,245,248,.56); }
.qh-hero-96 { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em; color: #ff9878; }
.qh-hero-97 { width: 14px; height: 1px; background: #f04c1d; }
.qh-hero-98 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(240,76,29,.6); background: rgba(255,255,255,.9); backdrop-filter: blur(8px); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: #c0360f; opacity: 0; z-index: 6; }
.qh-hero-99 { position: absolute; left: 0; right: 0; top: 0; height: 12%; background: linear-gradient(180deg, rgba(240,76,29,0), rgba(240,76,29,.09)); border-bottom: 1px solid rgba(240,76,29,.2); animation: hmCardScan 9s cubic-bezier(.45,.05,.55,.95) 1.1s infinite; }
.qh-hero-100 { position: absolute; left: 0; right: 0; top: 0; height: 12%; background: linear-gradient(180deg, rgba(240,76,29,0), rgba(240,76,29,.09)); border-bottom: 1px solid rgba(240,76,29,.2); animation: hmCardScan 9s cubic-bezier(.45,.05,.55,.95) 3.3s infinite; }
.qh-hero-101 { position: absolute; left: 0; right: 0; top: 0; height: 12%; background: linear-gradient(180deg, rgba(240,76,29,0), rgba(240,76,29,.09)); border-bottom: 1px solid rgba(240,76,29,.2); animation: hmCardScan 9s cubic-bezier(.45,.05,.55,.95) 2.2s infinite; }
.qh-hero-102 { position: absolute; z-index: 31; left: 5.5vw; bottom: 36px; appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(240,76,29,.5); background: rgba(255,255,255,.86); backdrop-filter: blur(10px); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: #c0360f; opacity: 0; pointer-events: none; will-change: opacity; }
.qh-hero-103 { position: absolute; z-index: 13; right: 44px; bottom: 40px; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; color: rgba(20,24,27,.5); animation: hmCue 4.2s ease-in-out infinite; pointer-events: none; }
.qh-hero-104 { width: 1px; height: 22px; background: linear-gradient(180deg, rgba(20,24,27,.45), rgba(20,24,27,0)); }
.qh-hero-105 { position: absolute; z-index: 13; left: 5.5vw; top: 108px; display: flex; align-items: center; gap: 18px; padding: 12px 16px; border: 1px solid rgba(20,24,27,.12); border-radius: 12px; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); opacity: 0; will-change: transform, opacity; }
.qh-hero-106 { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .12em; color: #c0360f; }
.qh-hero-107 { width: 1px; height: 18px; background: rgba(20,24,27,.14); }
.qh-hero-108 { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: rgba(20,24,27,.68); }

/* ---- modal ---- */
.qh-modal-1 { display: none; position: fixed; inset: 0; z-index: 60; align-items: center; justify-content: center; padding: 24px; }
.qh-modal-2 { position: absolute; inset: 0; background: rgba(14,18,20,.62); backdrop-filter: blur(4px); }
.qh-modal-3 { position: relative; width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: auto; border-radius: 20px; background: #ffffff; box-shadow: 0 50px 90px -40px rgba(0,0,0,.6); }
.qh-modal-4 { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 30px 0; }
.qh-modal-5 { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #c0360f; }
.qh-modal-6 { margin: 10px 0 0; font-size: 14px; line-height: 1.55; font-weight: 300; color: rgba(20,24,27,.7); max-width: 42ch; }
.qh-modal-7 { flex: 0 0 auto; appearance: none; cursor: pointer; width: 34px; height: 34px; border: 1px solid rgba(20,24,27,.16); border-radius: 9px; background: #ffffff; font-size: 15px; line-height: 1; color: rgba(20,24,27,.7); transition: border-color .3s ease, color .3s ease; }
.qh-modal-7:hover { border-color: #f04c1d; color: #c0360f; }
.qh-modal-8 { min-width: 0; padding: 30px 30px 32px; border-radius: 16px; background: #ffffff; }
.qh-modal-9 { margin-bottom: 22px; font-size: 20px; font-weight: 600; letter-spacing: -.025em; color: #14181b; }
.qh-modal-10 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.qh-modal-11 { min-width: 0; grid-column: span 2; }
.qh-modal-12 { display: block; margin-bottom: 7px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(20,24,27,.6); }
.qh-modal-13 { width: 100%; padding: 13px 14px; border: 1px solid rgba(20,24,27,.16); border-radius: 9px; background: #ffffff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14.5px; color: #14181b; outline: none; transition: border-color .3s ease, box-shadow .3s ease; }
.qh-modal-14 { display: grid; grid-template-columns: 146px minmax(0, 1fr); gap: 10px; }
.qh-modal-15 { min-width: 0; padding: 13px 12px; border: 1px solid rgba(20,24,27,.16); border-radius: 9px; background: #ffffff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; color: #14181b; outline: none; cursor: pointer; transition: border-color .3s ease, box-shadow .3s ease; }
.qh-modal-16 { min-width: 0; padding: 13px 14px; border: 1px solid rgba(20,24,27,.16); border-radius: 9px; background: #ffffff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14.5px; color: #14181b; outline: none; transition: border-color .3s ease, box-shadow .3s ease; }
.qh-modal-17 { width: 100%; padding: 13px 14px; border: 1px solid rgba(20,24,27,.16); border-radius: 9px; background: #ffffff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14.5px; line-height: 1.55; color: #14181b; resize: vertical; outline: none; transition: border-color .3s ease, box-shadow .3s ease; }
.qh-modal-18 { grid-column: span 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.qh-modal-19 { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; padding: 15px 28px; border: 0; border-radius: 10px; background: linear-gradient(140deg, #c93a10, #8f240a); color: #ffffff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 600; box-shadow: 0 14px 30px -18px rgba(201,58,16,.9); transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; }
.qh-modal-19:hover { transform: translateY(-2px); box-shadow: 0 22px 42px -18px rgba(201,58,16,.95); }
.qh-modal-20 { font-size: 12.5px; font-weight: 300; color: rgba(20,24,27,.6); }