/* Livit for Schools, landing page v4. Same visual language as the promo film
 * (navy glow darks, #EEF4FE dot-grid lights, Fredoka + Nunito, brick blue/orange).
 * Layouts for tablets and phones, and the new v4 parts, are in v4.css. */
:root {
    --ink: #101828; --muted: #475467; --line: #E4E7EC; --light: #EEF4FE;
    --blue: #2BA3F2; --orange: #FFB820; --orange2: #FF8A00;
    --display: 'Fredoka', 'Nunito', system-ui, sans-serif;
    --body: 'Nunito', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --swift: cubic-bezier(.16, 1, .3, 1);
    --gut: clamp(16px, 5vw, 96px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden;
       background: var(--light) radial-gradient(rgba(64,98,160,.18) 1.4px, transparent 1.6px) 0 0 / 32px 32px; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.abs { position: absolute; left: 0; top: 0; }
.center { text-align: center; }

/* reveal on scroll: only when JavaScript runs, so the page reads fine without it */
.js .r { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--swift), transform 1.1s var(--swift); transition-delay: calc(var(--d, 0) * 90ms); }
.js .r.in { opacity: 1; transform: none; }

/* ── primitives ── */
.btn { --h: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
       font: 900 17px var(--body); text-decoration: none; white-space: nowrap; position: relative; overflow: hidden; transition: transform .4s var(--swift), box-shadow .3s, background .3s; }
.btn.small { --h: 42px; padding: 0 18px; font-size: 15px; }
.btn.primary { background: linear-gradient(90deg, var(--orange), var(--orange2)); color: #101828; box-shadow: 0 14px 34px -12px rgba(255,138,0,.75), inset 0 1px 0 rgba(255,255,255,.45); }
.btn.primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%); transform: translateX(-120%); transition: transform .8s var(--swift); }
.btn.primary:hover { transform: translateY(-2px); } .btn.primary:hover::after { transform: translateX(120%); }
.btn.ghost { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.24); }
.btn.ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.btn .arr { transition: transform .4s var(--swift); } .btn:hover .arr { transform: translateX(4px); }
.chip { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 16px 8px 13px;
        font: 800 16px var(--body); white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(16,24,40,.18); }
.chip.sm { font-size: 13px; padding: 5px 12px; box-shadow: none; background: color-mix(in srgb, var(--a, #2D9CDB) 8%, #fff); border-color: color-mix(in srgb, var(--a, #2D9CDB) 25%, #fff); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dots { display: flex; gap: 7px; } .dots i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.dots i:nth-child(1) { background: #FF5F57; } .dots i:nth-child(2) { background: #FEBC2E; } .dots i:nth-child(3) { background: #28C840; }
.grad { background: linear-gradient(90deg, #2BA3F2 0%, #7CC8FF 45%, #FFB820 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── dark scenes ── */
.dark { position: relative; overflow: hidden; color: #fff; background: radial-gradient(120% 90% at 50% 38%, #142347 0%, #0A1128 42%, #05070F 100%); }
.dark::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(3,5,12,.7) 100%); }
.glow { position: absolute; border-radius: 50%; pointer-events: none; }
.glow.gb { width: 1400px; height: 1400px; left: -560px; top: -680px; background: radial-gradient(circle, rgba(0,145,234,.3), rgba(0,145,234,0) 62%); animation: drift 12s ease-in-out infinite alternate; }
.glow.go { width: 1300px; height: 1300px; right: -560px; bottom: -700px; background: radial-gradient(circle, rgba(255,171,0,.17), rgba(255,171,0,0) 62%); animation: drift 14s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(120px, 90px); } }
.grain { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .09; background-image: var(--grain); }
.dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ── nav ── */
.nav { position: fixed; left: 0; right: 0; top: 14px; z-index: 50; padding: 0 var(--gut); pointer-events: none; }
.nav-in { pointer-events: auto; max-width: 1240px; margin: 0 auto; height: 64px; border-radius: 22px; display: flex; align-items: center; gap: 18px; padding: 0 12px 0 18px;
          background: rgba(10,17,40,.5); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
          box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 20px 40px -24px rgba(0,0,0,.6); color: #fff; transition: background .4s, color .4s; }
.nav[data-theme=light] .nav-in { background: rgba(255,255,255,.76); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(16,24,40,.08), 0 20px 40px -26px rgba(16,24,40,.35); }
.nav-logo img { height: 40px; width: auto; display: block; }
.nav[data-theme=dark] .nav-logo img { filter: drop-shadow(0 0 1px rgba(255,255,255,.8)); }
.nav-links { display: flex; gap: 2px; margin: 0 auto; }
.nav-links a { text-decoration: none; font: 800 15px var(--body); padding: 9px 13px; border-radius: 12px; opacity: .82; transition: opacity .2s, background .2s; }
.nav-links a:hover { opacity: 1; background: rgba(127,127,127,.14); }

/* ── hero copy ── */
.badge-pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 7px 16px 7px 12px; border-radius: 999px; font: 800 14px var(--body);
              background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: #DCEBFF; }
.bp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px var(--orange); animation: blink 1.6s ease-in-out infinite; }
.bp-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.4); }
@keyframes blink { 50% { opacity: .35; } }
.hero-sub { margin: 22px 0 0; max-width: 560px; font: 700 clamp(16px, 1.35vw, 20px)/1.55 var(--body); color: #B4C6E4; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-facts { display: flex; gap: 26px; list-style: none; padding: 0; margin: 38px 0 0; flex-wrap: wrap; }
.hero-facts li { font: 800 14px var(--body); color: #9FB3D3; letter-spacing: .02em; }
.hero-facts b { display: block; font: 700 34px/1 var(--display); color: #fff; margin-bottom: 4px; }

/* try-it editor */
.try { position: relative; }
.try-win { position: relative; z-index: 2; border-radius: 22px; background: #fff; overflow: hidden; color: var(--ink);
           box-shadow: 0 60px 120px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.12), 0 0 80px -20px rgba(43,163,242,.35); }
.try-bar { height: 58px; display: flex; align-items: center; gap: 16px; padding: 0 14px 0 18px; border-bottom: 1px solid #EEF0F4; }
.try-tabs { position: relative; display: flex; gap: 2px; background: #F2F4F7; border-radius: 12px; padding: 4px; }
.try-tabs button { position: relative; z-index: 1; border: 0; background: none; padding: 7px 14px; border-radius: 9px; font: 800 14px var(--body); color: #667085; cursor: pointer; transition: color .3s; }
.try-tabs button[aria-selected=true] { color: var(--ink); }
.tab-ink { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 9px; background: #fff; box-shadow: 0 2px 6px rgba(16,24,40,.12); transition: transform .5s var(--swift), width .5s var(--swift); }
.run { margin-left: auto; width: 42px; height: 38px; border-radius: 10px; border: 0; background: #E9F7EE; display: grid; place-items: center; cursor: pointer; transition: transform .2s, background .2s; }
.run:hover { background: #C9EFD5; } .run:active { transform: scale(.9); }
.run.on { background: #C9EFD5; box-shadow: 0 0 0 3px rgba(76,191,86,.35); }
.try-body { display: grid; grid-template-columns: 1.05fr 1fr; height: clamp(300px, 30vw, 380px); }
.try-code { position: relative; background: #F9FAFB radial-gradient(#DDE3EC 1.2px, transparent 1.3px) 0 0 / 22px 22px; border-right: 1px solid #EEF0F4; overflow: hidden; }
.pane { position: absolute; inset: 0; padding: 18px; animation: paneIn .5s var(--swift); }
@keyframes paneIn { from { opacity: 0; transform: translateY(12px); } }
.blocks-svg { width: 100%; height: 100%; overflow: visible; }
.pane.code { background: #0F172A; color: #E2E8F0; font: 600 clamp(12px, 1.02vw, 15px)/1.75 var(--mono); white-space: pre; padding: 20px 18px; }
.pane.code .ln { display: block; padding: 0 8px; border-radius: 6px; transition: background .2s; }
.pane.code .ln.hot { background: rgba(124,200,255,.16); }
.pane.code .num { color: #475569; display: inline-block; width: 22px; }
.k { color: #C792EA; } .f { color: #82AAFF; } .n { color: #F78C6C; } .s { color: #C3E88D; } .d { color: #FFCB6B; } .c { color: #64748B; } .p { color: #89DDFF; }
.blocks-svg .glow-on { filter: drop-shadow(0 0 5px #FFD500) drop-shadow(0 0 2px #FFD500); }
.try-stage { position: relative; overflow: hidden; background: #E9F1FC; }
.st-sky { position: absolute; inset: 14px; border-radius: 14px; overflow: hidden; border: 1px solid #D0D5DD; background: linear-gradient(180deg,#BFE3FF 0%,#E8F5FF 62%,#CDEBC0 62%,#A8DC95 100%); }
.st-sky .cl { position: absolute; border-radius: 20px; background: #fff; opacity: .9; animation: cloud 18s linear infinite; }
.cl.c1 { width: 70px; height: 22px; left: 10%; top: 12%; } .cl.c2 { width: 52px; height: 18px; left: 60%; top: 22%; animation-duration: 24s; }
@keyframes cloud { from { translate: -40px 0; } to { translate: 60px 0; } }
.st-sky .hill { position: absolute; border-radius: 50%; }
.hill.h1 { left: -15%; top: 55%; width: 70%; height: 60%; background: #B7E3A6; } .hill.h2 { left: 40%; top: 58%; width: 80%; height: 62%; background: #9ED68A; }
.st-qubi { position: absolute; left: 0; bottom: 20%; height: 42%; width: auto; transform-origin: 50% 100%; z-index: 2; }
.st-shadow { position: absolute; left: 0; bottom: calc(20% - 6px); width: 60px; height: 12px; border-radius: 50%; background: rgba(20,60,20,.25); z-index: 1; }
.st-xy { position: absolute; left: 24px; bottom: 22px; font: 700 12px var(--mono); color: #344054; background: rgba(255,255,255,.8); padding: 4px 8px; border-radius: 6px; z-index: 3; white-space: pre; }
.st-board[hidden] { display: none; }
.st-board { position: absolute; inset: 14px; border-radius: 14px; background: #0F172A radial-gradient(rgba(255,255,255,.06) 1.2px, transparent 1.3px) 0 0 / 18px 18px; display: grid; place-items: center; z-index: 4; }
.brd { width: 70%; aspect-ratio: 330 / 236; border-radius: 14px; background: linear-gradient(160deg,#128C95,#0B6E77); border: 3px solid #075158; position: relative; display: grid; place-items: center; }
.brd span { position: absolute; bottom: 12%; font: 800 12px var(--mono); color: #CFFAFE; }
.led { width: 26%; aspect-ratio: 1; border-radius: 50%; background: #7F1D1D; border: 4px solid #450A0A; transition: background .08s, box-shadow .08s; }
.led.on { background: radial-gradient(circle at 40% 35%, #FFF1F1, #FF3B3B 45%, #B91C1C); box-shadow: 0 0 40px 14px rgba(255,59,59,.6); }
.try-hint { margin: 16px 0 0 6px; font: 700 14px var(--body); color: #9FB3D3; }
.try-hint b { color: #86EFAC; }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* sections */
.sec { position: relative; padding: clamp(80px, 12vh, 140px) var(--gut); }
.sec-head { max-width: 1240px; margin: 0 auto; }
.sec-head.center { text-align: center; } .sec-head.center .sec-sub { margin-left: auto; margin-right: auto; }
.eyebrow { margin: 0; font: 900 14px var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--c, #2D9CDB); }
.sec-title { margin: 12px 0 0; font: 700 clamp(42px, 5.2vw, 84px)/1.04 var(--display); letter-spacing: -0.014em; }
.sec-title.sm { font-size: clamp(34px, 4vw, 64px); }
.sec-sub { margin: 18px 0 0; max-width: 640px; font: 700 clamp(17px, 1.45vw, 22px)/1.5 var(--body); color: var(--muted); }
.dark .sec-sub { color: #B4C6E4; }

/* ═════════ TOOLS BENTO ═════════ */
.filters { max-width: 1240px; margin: 34px auto 0; display: flex; gap: 8px; flex-wrap: wrap; }
.filters button { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 18px; font: 800 15px var(--body); cursor: pointer; transition: all .3s var(--swift); display: inline-flex; align-items: center; gap: 8px; }
.filters button i { width: 10px; height: 10px; border-radius: 50%; }
.filters button:hover { transform: translateY(-2px); }
.filters button[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.bento { max-width: 1240px; margin: 22px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; grid-auto-flow: dense; gap: 16px; }
.tile { position: relative; border-radius: 22px; overflow: hidden; background: color-mix(in srgb, var(--a) 7%, #fff); border: 2px solid color-mix(in srgb, var(--a) 30%, #fff);
        box-shadow: 0 20px 40px -26px color-mix(in srgb, var(--a) 70%, transparent); padding: 20px 22px; display: flex; flex-direction: column; cursor: default;
        transition: transform .5s var(--swift), box-shadow .4s, border-color .4s, opacity .4s; }
.tile:hover { transform: translateY(-6px); border-color: var(--a); box-shadow: 0 30px 50px -24px color-mix(in srgb, var(--a) 80%, transparent); }
.tile.big { grid-column: span 2; grid-row: span 2; } .tile.wide { grid-column: span 2; }
.tile-art { position: absolute; right: 12px; bottom: 10px; width: 46%; height: 74%; display: grid; place-items: center; transition: transform .6s var(--swift); }
.tile:hover .tile-art { transform: translateY(-6px) rotate(-3deg) scale(1.05); }
.tile-art svg { width: 100%; height: 100%; }
.tile-art img { max-width: 90%; max-height: 90%; width: auto; object-fit: contain; }
.tile-art.imgbg { border-radius: 16px; }
.tile-cat { font: 900 11px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--a); position: relative; z-index: 1; }
.tile h3 { margin: 6px 0 0; font: 700 clamp(20px, 1.8vw, 26px)/1.1 var(--display); position: relative; z-index: 1; }
.tile.big h3 { font-size: clamp(30px, 2.8vw, 42px); }
.tile p { margin: 8px 0 0; font: 700 14px/1.45 var(--body); color: var(--muted); max-width: 52%; position: relative; z-index: 1; }
.tile.big p { font-size: 17px; max-width: 70%; }
.tile.gone { display: none; }

/* ═════════ LEARNING PATH ═════════ */
.path-track { position: relative; max-width: 1240px; margin: 50px auto 0; height: 520px; }
.path-svg { position: absolute; left: 0; top: 0; width: 100%; height: 270px; overflow: visible; }
.path-link { stroke: rgba(16,24,40,.18); stroke-width: 3; stroke-dasharray: 4 8; stroke-linecap: round; }
.path-bg { fill: none; stroke: rgba(16,24,40,.08); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 2 26; }
.path-fg { fill: none; stroke: url(#pathGrad); stroke-width: 10; stroke-linecap: round; }
.path-qubi { position: absolute; left: 0; top: 0; height: 110px; width: auto; transform-origin: 50% 100%; z-index: 3; filter: drop-shadow(0 14px 14px rgba(16,24,40,.25)); }
.steps4 { position: absolute; left: 0; right: 0; top: 270px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step { position: relative; background: #fff; border-radius: 22px; padding: 22px; box-shadow: 0 24px 50px -30px rgba(16,24,40,.4), 0 0 0 1px rgba(16,24,40,.06); transition: transform .6s var(--swift), box-shadow .5s; opacity: .55; transform: scale(.96); }
.step.on { opacity: 1; transform: none; box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--c) 80%, transparent), 0 0 0 2px var(--c); }
.step-n { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 700 20px var(--display); color: #fff; background: var(--c); }
.step h3 { margin: 14px 0 0; font: 700 24px var(--display); }
.step p { margin: 6px 0 12px; font: 700 15px/1.45 var(--body); color: var(--muted); }

/* ═════════ AI EXPLORER ═════════ */
.ai-in { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 4vw, 70px); align-items: center; }
.ai-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 30px; }
.ai-list button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 0; cursor: pointer; text-align: start;
                  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #DCEBFF; font: 800 15px var(--body); transition: background .3s, box-shadow .3s, transform .4s var(--swift); }
.ai-list button:hover { background: rgba(255,255,255,.1); transform: translateX(4px); }
.ai-list button[aria-pressed=true] { background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: inset 0 0 0 1.5px var(--c); color: #fff; }
.ai-list .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--c); padding: 7px; flex: none; }
.ai-list .ic svg { width: 100%; height: 100%; display: block; }
.ai-demo { position: relative; }
.cam { border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 60px 120px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.12), 0 0 90px -30px rgba(139,92,246,.6); }
.cam-bar { height: 52px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid #EEF0F4; color: #344054; font: 800 16px var(--body); }
.live { margin-left: auto; background: #EF4444; color: #fff; font: 900 13px var(--body); padding: 5px 10px; border-radius: 999px; }
.cam-body { position: relative; aspect-ratio: 720 / 520; overflow: hidden; background: linear-gradient(180deg,#E9E7FF 0%,#F5F3FF 70%); }
.room .win-pane { position: absolute; left: 5.5%; top: 7.7%; width: 23.6%; height: 40%; border-radius: 10px; background: linear-gradient(180deg,#BAE6FD,#E0F2FE); border: 8px solid #fff; }
.room .desk { position: absolute; left: 0; right: 0; bottom: 0; height: 17.3%; background: linear-gradient(180deg,#D6B48C,#B98E5E); }
.nova { position: absolute; left: 19%; bottom: 0; height: 87%; width: auto; transform-origin: 50% 100%; animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateY(-4px) rotate(.4deg); } }
.ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ov .g { opacity: 0; transition: opacity .35s; } .ov .g.on { opacity: 1; }
.ov .draw { stroke-dasharray: var(--l); stroke-dashoffset: var(--l); } .ov .g.on .draw { animation: draw .7s var(--swift) forwards; animation-delay: calc(var(--i, 0) * 25ms); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.ov .g.on .pop { animation: pop .5s var(--swift) both; animation-delay: calc(var(--i, 0) * 18ms); transform-box: fill-box; transform-origin: center; }
@keyframes pop { from { transform: scale(0); } }
.ai-card { position: absolute; right: 3%; top: 5%; min-width: 42%; max-width: 56%; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.96); color: var(--ink);
           box-shadow: 0 20px 40px -18px rgba(16,24,40,.45); font: 800 15px/1.4 var(--body); animation: cardIn .55s var(--swift); }
.ai-card .t { display: flex; align-items: center; gap: 10px; font: 900 16px var(--body); }
.ai-card .t i { width: 30px; height: 30px; border-radius: 9px; padding: 6px; display: block; flex: none; }
.ai-card .t svg { width: 100%; height: 100%; display: block; }
.ai-card p { margin: 8px 0 0; color: var(--muted); font-weight: 700; }
.ai-card .tag { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 8px; color: #fff; font: 900 13px var(--body); }
@keyframes cardIn { from { opacity: 0; transform: translateY(12px) scale(.96); } }

/* ═════════ MAKER ═════════ */
.make-grid { max-width: 1240px; margin: 44px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mk { position: relative; background: #fff; border-radius: 26px; padding: 18px 18px 24px; box-shadow: 0 30px 60px -34px rgba(16,24,40,.45), 0 0 0 1px rgba(16,24,40,.06); transition: transform .5s var(--swift), box-shadow .4s; }
.mk:hover { transform: translateY(-8px); box-shadow: 0 40px 70px -30px color-mix(in srgb, var(--a) 60%, transparent), 0 0 0 2px var(--a); }
.mk-art { height: 230px; border-radius: 18px; overflow: hidden; position: relative; background: color-mix(in srgb, var(--a) 8%, #F8FAFC); }
.mk h3 { margin: 20px 4px 0; font: 700 28px var(--display); }
.mk p { margin: 8px 4px 16px; font: 700 16px/1.5 var(--body); color: var(--muted); }
.mk .chips { padding: 0 4px; }
.mk-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ═════════ PUBLISH ═════════ */
.pub-card { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 32px;
            background: linear-gradient(135deg, #fff 0%, #FFF4E5 100%); box-shadow: 0 40px 80px -40px rgba(255,138,0,.45), 0 0 0 1px rgba(255,138,0,.18); }
.pub-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; font: 800 14px var(--mono); color: #667085; }
.qr { width: 220px; height: 220px; padding: 14px; background: #fff; border-radius: 22px; box-shadow: 0 20px 40px -20px rgba(16,24,40,.4), 0 0 0 1px var(--line); }

/* ═════════ FAQ ═════════ */
.faq-list { max-width: 860px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 12px; }
details { background: #fff; border-radius: 18px; box-shadow: 0 14px 30px -24px rgba(16,24,40,.4), 0 0 0 1px rgba(16,24,40,.06); padding: 0 24px; }
summary { cursor: pointer; list-style: none; padding: 22px 0; font: 700 20px var(--display); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font: 600 28px/1 var(--display); color: var(--blue); transition: transform .4s var(--swift); }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 0 0 22px; font: 700 16px/1.6 var(--body); color: var(--muted); }

/* ═════════ CTA ═════════ */
.cta { padding: clamp(90px, 14vh, 150px) var(--gut); text-align: center; }
.rays { position: absolute; left: 50%; top: 42%; width: 1100px; height: 1100px; translate: -50% -50%; border-radius: 50%;
        background: repeating-conic-gradient(from 0deg, rgba(124,200,255,.07) 0deg 6deg, rgba(124,200,255,0) 6deg 18deg);
        -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 100%); mask: radial-gradient(closest-side, #000 20%, transparent 100%); animation: spin 60s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.cta-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.cta-bricks { width: 220px; height: 200px; overflow: visible; animation: bob 5s ease-in-out infinite; filter: drop-shadow(0 0 40px rgba(43,163,242,.35)); }
.cta-title { margin: 10px 0 0; font: 600 clamp(40px, 5vw, 76px)/1.08 var(--display); }
.cta-qubi { position: absolute; right: clamp(8px, 6vw, 130px); bottom: -8px; height: clamp(160px, 28vh, 300px); width: auto; z-index: 3; animation: wave 3s ease-in-out infinite; transform-origin: 50% 100%; pointer-events: none; }
@keyframes wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(3deg) translateY(-10px); } 75% { transform: rotate(-2deg) translateY(-4px); } }

/* ═════════ FOOTER ═════════ */
.foot { background: #05070F; color: #B4C6E4; padding: 56px var(--gut) 28px; }
.foot-in { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-brand img { height: 52px; width: auto; filter: drop-shadow(0 0 1px rgba(255,255,255,.7)); }
.foot-brand p { margin: 12px 0 0; font: 700 15px var(--body); }
.foot-cols { display: flex; gap: clamp(28px, 6vw, 90px); flex-wrap: wrap; }
.foot-cols div { display: flex; flex-direction: column; gap: 10px; }
.foot-cols b { color: #fff; font: 800 14px var(--body); letter-spacing: .12em; text-transform: uppercase; }
.foot-cols a { text-decoration: none; font: 700 15px var(--body); opacity: .8; } .foot-cols a:hover { opacity: 1; color: #fff; }
.foot-legal { max-width: 1240px; margin: 44px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); font: 700 13px var(--body); opacity: .6; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .001s !important; } .js .r { opacity: 1; transform: none; } html { scroll-behavior: auto; } }