@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
  --navy-950: #041126;
  --navy-900: #071736;
  --navy-800: #0c2a56;
  --navy-700: #15407a;
  --blue: #4aa5ff;
  --blue-strong: #2c7de6;
  --cyan: #7fd4ff;
  --white: #f5f9ff;
  --muted: #9eb7d6;
  --line: rgba(167, 205, 255, .18);
  --surface: rgba(12, 36, 73, .72);
  --green: #22d99b;
  --red: #ff6474;
  --yellow: #ffc857;
  --purple: #b067ff;
}

* { box-sizing: border-box; }
html { height: 100%; background: var(--navy-950); }
body { min-height: 100%; margin: 0; overflow: hidden; background: var(--navy-950); color: var(--white); font-family: "DM Sans", sans-serif; }
button, a { font: inherit; }
button { color: inherit; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(1000px 650px at 74% 42%, rgba(24, 89, 176, .3), transparent 68%), linear-gradient(145deg, #041126, #071b3c 55%, #0b2b59); }
.orb { position: absolute; border-radius: 50%; filter: blur(4px); opacity: .46; animation: drift 12s ease-in-out infinite alternate; }
.orb--one { width: 430px; height: 430px; top: -260px; right: 12%; background: rgba(74, 165, 255, .24); }
.orb--two { width: 320px; height: 320px; bottom: -220px; left: 34%; background: rgba(0, 214, 255, .16); animation-delay: -5s; }
.orb--three { width: 250px; height: 250px; left: -180px; top: 34%; background: rgba(74, 113, 255, .18); animation-delay: -8s; }
.grid-light { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(127,212,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(127,212,255,.12) 1px, transparent 1px); background-size: 70px 70px; mask-image: radial-gradient(circle at 72% 45%, #000, transparent 65%); }

.topbar { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 84px; display: grid; grid-template-columns: 250px 1fr 90px; align-items: center; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(4, 17, 38, .74); backdrop-filter: blur(22px); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--white); text-decoration: none; }
.brand__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(145deg, #63bdff, #276fd0); box-shadow: 0 8px 24px rgba(44,125,230,.32), inset 0 1px rgba(255,255,255,.3); font: 800 19px Manrope; }
.brand strong, .brand small { display: block; line-height: 1.15; }
.brand strong { font: 700 17px Manrope; letter-spacing: -.02em; }
.brand small { margin-top: 3px; color: #7798be; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.topbar__center { justify-self: center; text-align: center; }
.topbar__center span, .topbar__center strong { display: block; }
.topbar__eyebrow { color: #6f94bf; font-size:10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.topbar__center strong { margin-top: 3px; font: 700 14px Manrope; }
.topbar__meta { justify-self: end; display: flex; gap: 8px; align-items: baseline; color: #6486ad; font: 700 11px Manrope; }
.topbar__meta span:first-child { color: var(--cyan); font-size: 22px; }
.topbar__meta i { width: 18px; height: 1px; background: #3c5f89; }

.wizard { position: relative; z-index: 2; display: grid; grid-template-columns: 215px 1fr; height: 100vh; padding: 84px 0 76px; }
.rail { position: relative; padding: 28px 15px 18px 34px; border-right: 1px solid var(--line); background: rgba(3, 15, 34, .4); }
.rail ol { display: grid; align-content: space-between; height: 100%; margin: 0; padding: 0; list-style: none; }
.rail li { position: relative; z-index: 2; }
.rail button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 2px 0; border: 0; background: transparent; color: #617fa4; text-align: left; cursor: pointer; transition: color .25s, transform .25s; }
.rail button:hover { color: #b9d6f7; transform: translateX(3px); }
.rail button span { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; border: 1px solid #26476e; border-radius: 50%; background: #071a38; font: 700 10px Manrope; transition: .3s; }
.rail button b { font: 600 11px Manrope; letter-spacing: .01em; }
.rail li.is-active button { color: #eff8ff; }
.rail li.is-active button span { color: #071736; border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 0 5px rgba(127,212,255,.09), 0 0 20px rgba(127,212,255,.3); }
.rail li.is-done button span { color: var(--cyan); border-color: #3988c5; }
.rail__track { position: absolute; z-index: 1; top: 43px; bottom: 33px; left: 47px; width: 1px; background: #183b64; }
.rail__track span { display: block; width: 1px; height: 0; background: linear-gradient(var(--cyan), var(--blue)); box-shadow: 0 0 8px var(--blue); transition: height .65s cubic-bezier(.2,.75,.25,1); }

.stage { position: relative; overflow: hidden; }
.slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(380px, .88fr) minmax(500px, 1.12fr); align-items: center; gap: clamp(36px, 5vw, 94px); max-width: 1410px; margin: 0 auto; padding: 30px clamp(42px, 6vw, 105px); opacity: 0; visibility: hidden; transform: translateX(7%) scale(.98); transition: opacity .55s ease, transform .62s cubic-bezier(.2,.78,.25,1), visibility 0s .62s; }
.slide.is-active { opacity: 1; visibility: visible; transform: translateX(0) scale(1); transition-delay: 0s; }
.slide.is-leaving-left { opacity: 0; visibility: visible; transform: translateX(-6%) scale(.98); }
.slide.is-leaving-right { opacity: 0; visibility: visible; transform: translateX(6%) scale(.98); }
.slide.is-entering-left { transform: translateX(-7%) scale(.98); }
.slide.is-entering-right { transform: translateX(7%) scale(.98); }
.slide--intro { grid-template-columns: minmax(440px, .95fr) minmax(480px, 1.05fr); }
.slide-copy { max-width: 520px; }
.step-tag, .kicker { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.slide h1, .slide h2 { margin: 14px 0 18px; font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.055em; line-height: 1.05; }
.slide h1 { max-width: 700px; font-size: clamp(43px, 4.7vw, 74px); }
.slide h1 em { color: var(--cyan); font-style: normal; text-shadow: 0 0 40px rgba(127,212,255,.22); }
.slide h2 { font-size: clamp(35px, 3.5vw, 58px); }
.slide-copy > p, .lead { max-width: 620px; margin: 0; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.72; }
.slide-copy > p strong, .slide-copy li strong { color: #e9f5ff; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid rgba(127,212,255,.2); border-radius: 999px; background: rgba(127,212,255,.08); color: #c8eaff; font-size: 11px; font-weight: 700; }
.pill svg { color: var(--cyan); }
.intro-copy .kicker { margin-top: 28px; }
.intro-copy .lead { font-size: clamp(16px, 1.25vw, 19px); }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; margin-top: 30px; padding: 0 23px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #62baff, #2b79db); box-shadow: 0 15px 35px rgba(34,113,211,.34), inset 0 1px rgba(255,255,255,.35); color: white; font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 20px 42px rgba(34,113,211,.44); }
.key-hint { margin: 16px 0 0; color: #6587ae; font-size: 11px; }
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-right: 5px; border: 1px solid #345a85; border-radius: 5px; background: rgba(255,255,255,.04); color: #a9c8ea; font: 11px sans-serif; }

.hero-orbit { position: relative; width: min(42vw, 570px); aspect-ratio: 1; justify-self: center; }
.orbit { position: absolute; inset: 13%; border: 1px solid rgba(127,212,255,.14); border-radius: 50%; animation: spin 28s linear infinite; }
.orbit::before, .orbit::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.orbit::before { top: 9%; left: 22%; }.orbit::after { right: 5%; bottom: 27%; }
.orbit--b { inset: 4%; border-style: dashed; animation-direction: reverse; animation-duration: 38s; opacity: .7; }
.orbit--c { inset: 24%; animation-duration: 18s; }
.hero-core { position: absolute; inset: 31%; display: grid; place-content: center; justify-items: center; border: 1px solid rgba(160,215,255,.25); border-radius: 50%; background: radial-gradient(circle at 35% 25%, rgba(73,155,243,.7), rgba(10,45,94,.96) 65%); box-shadow: 0 0 70px rgba(46,128,225,.3), inset 0 1px rgba(255,255,255,.22); text-align: center; }
.hero-core svg { width: 36px; height: 36px; margin-bottom: 10px; color: var(--cyan); }.hero-core strong { font: 800 22px/1 Manrope; }
.float-card { position: absolute; display: flex; align-items: center; gap: 11px; min-width: 145px; padding: 13px 15px; border: 1px solid rgba(168,214,255,.2); border-radius: 15px; background: linear-gradient(145deg, rgba(22,58,110,.91), rgba(7,27,59,.91)); box-shadow: 0 18px 36px rgba(0,8,25,.34); backdrop-filter: blur(12px); animation: float 4.5s ease-in-out infinite; }
.float-card > svg { width: 23px; height: 23px; color: var(--cyan); }.float-card b,.float-card small { display:block; }.float-card b { font: 700 12px Manrope; }.float-card small { margin-top:3px;color:#7395bd;font-size:10px; }
.float-card--a { left: 0; top: 23%; }.float-card--b { right: 0; top: 19%; animation-delay: -1.7s; }.float-card--c { right: 5%; bottom: 13%; animation-delay: -3.1s; }

.tips { display: grid; gap: 12px; margin: 25px 0 0; padding: 0; list-style: none; }
.tips li { display: flex; align-items: center; gap: 11px; color: #b5cbe5; font-size: 14px; }
.tips li > svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: rgba(34,217,155,.12); color: var(--green); }
.info-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 25px; padding: 14px 16px; border: 1px solid rgba(127,212,255,.13); border-radius: 13px; background: rgba(127,212,255,.06); color: #8faece; font-size: 12px; line-height: 1.55; }
.info-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--cyan); }.info-note--accent { border-color: rgba(255,200,87,.2); background: rgba(255,200,87,.07); }.info-note--accent svg { color: var(--yellow); }

.demo-window, .access-card-demo, .panel-demo, .summary-demo, .progress-card, .table-demo, .activities-demo, .quiz-demo, .chart-card { border: 1px solid var(--line); background: linear-gradient(155deg, rgba(17,46,91,.94), rgba(6,24,52,.96)); box-shadow: 0 28px 65px rgba(0,7,22,.42), inset 0 1px rgba(255,255,255,.06); }
.demo-window { position: relative; width: min(100%, 590px); overflow: hidden; border-radius: 22px; transform: perspective(1100px) rotateY(-3deg) rotateX(1deg); }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); background: rgba(3,14,32,.55); }.browser-bar span { width: 7px;height:7px;border-radius:50%;background:#34577e; }.browser-bar b { margin-left: 12px; color:#6080a7;font-size:10px;font-weight:600; }
.login-demo { max-width: 395px; margin: 26px auto 30px; padding: 28px; border: 1px solid rgba(167,205,255,.14); border-radius: 18px; background: rgba(8,29,62,.7); }
.mini-brand { display:flex;align-items:center;gap:9px;color:#b9d1ea;font-size:11px;font-weight:700; }.mini-brand span { display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:linear-gradient(145deg,#62baff,#286fc9);color:white;font:800 12px Manrope; }
.micro-label { display:block;margin-top:25px;color:var(--cyan);font-size:10px;font-weight:800;letter-spacing:.15em; }.login-demo h3 { margin:7px 0 22px;font:800 23px Manrope;letter-spacing:-.04em; }.login-demo label { display:block;margin-bottom:7px;color:#87a8cc;font-size:10px;font-weight:700; }
.fake-field { display:flex;align-items:center;height:48px;padding:0 14px;border:1px solid #286aa3;border-radius:11px;background:#f8fbff;color:#153653;font:700 14px Manrope;letter-spacing:.07em;box-shadow:0 0 0 4px rgba(74,165,255,.08); }.fake-field i { width:1px;height:19px;margin-left:2px;background:#1d5c91;animation:blink .8s steps(1) infinite; }
.fake-button { display:flex;align-items:center;justify-content:center;gap:8px;height:46px;margin-top:13px;padding:0 16px;border:0;border-radius:11px;background:linear-gradient(135deg,#4daaff,#2874d7);color:white;font-size:11px;font-weight:800;box-shadow:0 12px 24px rgba(28,99,190,.25); }.login-demo .fake-button { width:100%; }.login-demo > small { display:block;margin-top:12px;color:#6384a9;text-align:center;font-size:10px; }
.cursor { position:absolute;right:15%;bottom:23%;width:22px;height:26px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.35));animation:cursorMove 3s ease-in-out infinite; }.cursor::before { content:"";display:block;width:0;height:0;border-top:20px solid white;border-right:12px solid transparent;transform:rotate(-20deg); }.cursor i { position:absolute;width:6px;height:10px;left:11px;top:13px;background:white;transform:rotate(-20deg); }

.mail-scene { position:relative;width:min(100%,580px);padding:50px 35px; }.mail-card { position:relative;z-index:2;padding:28px;border:1px solid rgba(167,205,255,.2);border-radius:22px;background:linear-gradient(155deg,rgba(19,51,98,.96),rgba(7,27,59,.98));box-shadow:0 30px 70px rgba(0,7,22,.45);transform:rotate(1deg); }.mail-head { display:flex;align-items:center;gap:10px;padding-bottom:18px;border-bottom:1px solid var(--line); }.mail-avatar { display:grid;place-items:center;width:37px;height:37px;border-radius:12px;background:linear-gradient(145deg,#61b9ff,#2a74d2);font:800 15px Manrope; }.mail-head b,.mail-head small { display:block; }.mail-head b {font-size:12px}.mail-head small{color:#7192b8;font-size:10px}.mail-head time{margin-left:auto;color:#6688ae;font-size:10px}.mail-card h3{margin:24px 0 8px;font:800 22px Manrope;letter-spacing:-.035em}.mail-card>p{margin:0;color:#8eacd0;font-size:12px}.mail-code{display:flex;gap:10px;margin:22px 0}.mail-code span{display:grid;place-items:center;width:52px;height:58px;border:1px solid rgba(127,212,255,.32);border-radius:12px;background:rgba(127,212,255,.08);color:white;font:800 23px Manrope;box-shadow:inset 0 1px rgba(255,255,255,.08)}.mail-security{display:flex;align-items:center;gap:7px;color:#6587ae;font-size:10px}.mail-security svg{color:var(--green)}
.mail-ring { position:absolute;border:1px solid rgba(127,212,255,.1);border-radius:50%;animation:pulse 3s ease-out infinite; }.mail-ring--1{inset:10%}.mail-ring--2{inset:-2%;animation-delay:1s}.delivered{position:absolute;z-index:3;right:0;bottom:30px;display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid rgba(34,217,155,.25);border-radius:14px;background:rgba(8,38,65,.94);box-shadow:0 18px 32px rgba(0,7,22,.35)}.delivered>svg{display:block;width:28px;height:28px;padding:6px;border-radius:50%;background:rgba(34,217,155,.14);color:var(--green)}.delivered b,.delivered small{display:block}.delivered b{font-size:11px}.delivered small{margin-top:2px;color:#7194b8;font-size:10px}

.access-card-demo { justify-self:center;width:min(100%,480px);padding:34px;border-radius:23px;background:linear-gradient(160deg,rgba(246,251,255,.98),rgba(225,239,250,.98));color:#143b58;transform:perspective(1000px) rotateY(-2deg); }.demo-badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(15,122,191,.1);color:#0f6da6;font-size:10px;font-weight:800;letter-spacing:.1em}.access-card-demo h3{margin:13px 0 7px;font:800 25px Manrope;letter-spacing:-.04em}.access-card-demo>p{margin:0;color:#647f91;font-size:11px}.code-boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:25px 0 17px}.code-boxes span{display:grid;place-items:center;height:62px;border:1px solid #b9d2e2;border-radius:13px;background:white;box-shadow:0 8px 18px rgba(22,72,105,.08);font:800 23px Manrope;animation:codePop .4s both}.code-boxes span:nth-child(2){animation-delay:.12s}.code-boxes span:nth-child(3){animation-delay:.24s}.code-boxes span:nth-child(4){animation-delay:.36s}.remember{display:flex;align-items:flex-start;gap:10px;color:#31546b;font-size:10px;line-height:1.4}.fake-check{display:grid;place-items:center;flex:0 0 auto;width:19px;height:19px;border-radius:5px;background:#1687cb;color:white}.fake-check svg{width:13px}.fake-button--wide{width:100%;margin-top:20px}.secure-line{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;color:#7b96a7;font-size:10px}.secure-line svg{color:#25a97d}

.panel-demo { width:min(100%,630px);padding:27px;border-radius:22px; }.panel-top { display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.panel-top small{color:var(--cyan);font-size:10px;font-weight:800;letter-spacing:.13em}.panel-top h3{margin:5px 0 0;font:800 25px Manrope;letter-spacing:-.04em}.avatar{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(167,205,255,.25);border-radius:50%;background:linear-gradient(145deg,#7e8da4,#d9e4ef);color:#163d5c;font-weight:800}.action-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.action-card{position:relative;overflow:hidden;min-height:150px;padding:17px;border:1px solid rgba(167,205,255,.14);border-radius:15px;background:rgba(255,255,255,.035)}.action-card>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#dba224,#ffc857);box-shadow:0 10px 23px rgba(220,157,30,.2)}.action-card--check>span{background:linear-gradient(145deg,#02af81,#25daa2)}.action-card--upload>span{background:linear-gradient(145deg,#2771d3,#53adff)}.action-card p{position:absolute;left:17px;bottom:16px;margin:0}.action-card b,.action-card small{display:block}.action-card b{font:700 13px Manrope}.action-card small{margin-top:4px;color:#799bc0;font-size:10px}.action-card--quiz{border-color:rgba(255,200,87,.27);box-shadow:inset 0 0 40px rgba(255,200,87,.06)}.action-card--quiz>i{position:absolute;top:16px;right:16px;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:pulseDot 1.5s infinite}.callout{display:flex;align-items:center;gap:8px;position:absolute;color:var(--cyan);font-size:10px;font-weight:700;letter-spacing:.05em}.panel-demo{position:relative}.callout--right{top:42%;right:-57px;transform:rotate(-5deg)}.callout svg{width:30px}

.summary-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(100%,630px);padding:20px;border-radius:22px}.summary-item{display:grid;grid-template-columns:43px 1fr;grid-template-rows:auto auto;column-gap:11px;min-height:105px;padding:16px;border:1px solid rgba(167,205,255,.13);border-radius:14px;background:rgba(255,255,255,.035);transition:.25s}.summary-item:hover{transform:translateY(-4px);border-color:rgba(127,212,255,.32)}.summary-item>span{grid-row:1/3;display:grid;place-items:center;width:43px;height:43px;border-radius:12px;background:linear-gradient(145deg,rgba(72,158,250,.4),rgba(38,91,177,.4));color:#dff4ff;font:800 11px Manrope}.summary-item small{align-self:end;color:#6f91b8;font-size:10px;font-weight:800;letter-spacing:.09em}.summary-item b{align-self:start;margin-top:4px;font:700 11px/1.3 Manrope}.number-highlight{display:flex;align-items:center;gap:15px;margin:25px 0 12px}.number-highlight strong{color:var(--cyan);font:800 65px/1 Manrope;text-shadow:0 0 35px rgba(127,212,255,.28)}.number-highlight span{color:#b5cde8;font:700 12px/1.35 Manrope;text-transform:uppercase;letter-spacing:.08em}.muted-copy{font-size:13px!important}.progress-scene{width:min(100%,620px)}.progress-card{padding:28px;border-radius:22px}.progress-head{display:flex;align-items:center;gap:14px}.progress-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,#4fa7ff,#2369d6)}.progress-head h3{margin:0;font:800 18px Manrope}.progress-head p{margin:4px 0 0;color:#7799bf;font-size:10px}.progress-head>strong{margin-left:auto;padding:7px 11px;border-radius:999px;background:rgba(74,165,255,.13);color:var(--cyan);font:800 12px Manrope}.big-progress{position:relative;height:26px;margin-top:25px;overflow:hidden;border:1px solid rgba(167,205,255,.12);border-radius:999px;background:rgba(255,255,255,.06)}.big-progress span{position:absolute;inset:0 43% 0 0;border-radius:inherit;background:linear-gradient(90deg,#4293ff,#63c4ff);box-shadow:0 0 20px rgba(74,165,255,.35);animation:grow 1.3s cubic-bezier(.2,.8,.25,1) both}.big-progress b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 10px Manrope}.progress-facts{display:flex;align-items:center;justify-content:center;gap:34px;margin-top:18px}.progress-facts div{text-align:center}.progress-facts small,.progress-facts b{display:block}.progress-facts small{color:#6688ae;font-size:10px;font-weight:800;letter-spacing:.1em}.progress-facts b{margin-top:5px;font:800 21px Manrope}.progress-facts i{width:1px;height:30px;background:var(--line)}

.status-explain{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:10px;margin-top:25px}.status{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;font:800 10px Manrope;font-style:normal}.status--p{background:rgba(34,217,155,.14);color:#44e5ae;border:1px solid rgba(34,217,155,.28)}.status--f{background:rgba(255,100,116,.13);color:#ff7886;border:1px solid rgba(255,100,116,.25)}.status-explain p{margin:0}.status-explain b,.status-explain small{display:block}.status-explain b{font-size:11px}.status-explain small{margin-top:3px;color:#7395bb;font-size:10px}.table-demo{width:min(100%,640px);overflow:hidden;border-radius:22px}.table-title,.activity-head,.chart-title{display:flex;align-items:center;gap:12px;padding:20px}.table-title>span,.activity-head>span,.chart-title>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#00b984,#22d99b)}.table-title h3,.activity-head h3,.chart-title h3{margin:0;font:800 16px Manrope}.table-title p,.activity-head p,.chart-title p{margin:4px 0 0;color:#7395ba;font-size:10px}.table-row{display:grid;grid-template-columns:.7fr .75fr 1.8fr .5fr;align-items:center;min-height:50px;padding:0 20px;border-top:1px solid rgba(167,205,255,.1);color:#8faed0;font-size:10px}.table-row--head{min-height:35px;background:rgba(34,99,170,.14);color:#6488b2;font-size:10px;letter-spacing:.08em}.table-row strong{color:#c6daf0;font-weight:600}.table-row .status{width:27px;height:24px}.table-footer{display:flex;gap:18px;padding:13px 20px;border-top:1px solid rgba(167,205,255,.1);color:#6e91b8;font-size:10px}.table-footer span:first-child{color:var(--green)}.table-footer span:last-child{color:var(--red)}

.activities-demo{width:min(100%,620px);overflow:hidden;border-radius:22px}.activity-head>span{background:linear-gradient(145deg,#397fe3,#57b1ff)}.activity-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:17px 20px;border-top:1px solid rgba(167,205,255,.1)}.file-icon{display:grid;place-items:center;width:41px;height:45px;border-radius:10px;background:rgba(255,100,116,.13);color:#ff8290;font:800 10px Manrope}.file-icon--done{background:rgba(34,217,155,.12);color:var(--green)}.activity-item b,.activity-item small{display:block}.activity-item b{font:700 11px Manrope}.activity-item small{margin-top:5px;color:#6d90b6;font-size:10px}.chip{padding:6px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.07em}.chip--open{background:rgba(255,200,87,.11);color:var(--yellow)}.chip--done{background:rgba(34,217,155,.11);color:var(--green)}.activity-footer{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:rgba(3,15,34,.25);color:#6689b0;font-size:10px}.activity-footer button{display:flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--cyan);font-size:10px;font-weight:800}.activity-footer button svg{width:13px}

.quiz-demo{width:min(100%,590px);padding:28px;border-radius:22px}.quiz-live{display:flex;align-items:center;gap:8px;color:var(--yellow);font-size:10px;font-weight:800;letter-spacing:.12em}.quiz-live time{margin-left:auto;padding:5px 8px;border:1px solid rgba(255,200,87,.18);border-radius:7px;background:rgba(255,200,87,.07)}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red);animation:pulseDot 1.4s infinite}.quiz-demo>h3{max-width:460px;margin:22px 0 18px;font:800 20px/1.35 Manrope;letter-spacing:-.025em}.quiz-options{display:grid;gap:8px}.quiz-options button{display:flex;align-items:center;gap:11px;min-height:43px;padding:0 12px;border:1px solid rgba(167,205,255,.12);border-radius:11px;background:rgba(255,255,255,.03);color:#a7c0dc;text-align:left;font-size:10px}.quiz-options button span{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.06);font-weight:800}.quiz-options button.is-selected{border-color:rgba(74,165,255,.6);background:rgba(74,165,255,.1);color:#eef8ff;box-shadow:0 0 0 3px rgba(74,165,255,.06)}.quiz-options button.is-selected span{background:#3a91ed;color:white}.quiz-send{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:43px;margin-top:14px;border:0;border-radius:11px;background:linear-gradient(135deg,#4ba8ff,#2874d7);color:white;font-size:10px;font-weight:800}.quiz-history{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}.quiz-history>svg{width:25px;height:25px;padding:5px;border-radius:50%;background:rgba(34,217,155,.12);color:var(--green)}.quiz-history b,.quiz-history small{display:block}.quiz-history b{font-size:10px}.quiz-history small{margin-top:3px;color:#6688ad;font-size:10px}

.feature-list{display:grid;gap:11px;margin-top:25px}.feature-list>div{display:flex;align-items:center;gap:12px}.feature-list>div>span{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border:1px solid rgba(127,212,255,.18);border-radius:10px;background:rgba(127,212,255,.07);color:var(--cyan);font:800 10px Manrope}.feature-list p{margin:0}.feature-list b,.feature-list small{display:block}.feature-list b{font:700 12px Manrope}.feature-list small{margin-top:3px;color:#7798bd;font-size:10px}.feature-list--compact>div>span{width:43px;height:43px}.feature-list--compact svg{width:21px;height:21px}.charts-demo{display:grid;grid-template-columns:1fr 1fr;gap:13px;width:min(100%,660px)}.chart-card{min-height:340px;border-radius:18px}.chart-title>span{background:linear-gradient(145deg,#3e8df0,#61baff)}.chart-title>span.purple{background:linear-gradient(145deg,#b067ff,#ff6474)}.bars{display:flex;align-items:end;justify-content:space-around;height:210px;padding:15px 20px 22px}.bars>div{display:flex;flex-direction:column;justify-content:end;align-items:center;width:17%;height:100%;gap:8px}.bars i{display:block;width:100%;height:var(--h);border-radius:7px 7px 3px 3px;background:linear-gradient(#62c4ff,#317bdc);box-shadow:0 0 16px rgba(74,165,255,.16);animation:barGrow 1.1s both;transform-origin:bottom}.bars div:nth-child(2) i{animation-delay:.1s}.bars div:nth-child(3) i{animation-delay:.2s}.bars div:nth-child(4) i{animation-delay:.3s}.bars small{color:#6f91b7;font-size:10px}.donut{display:grid;place-items:center;width:150px;height:150px;margin:15px auto;border-radius:50%;background:conic-gradient(var(--green) 0 58%,var(--red) 58% 66%,rgba(255,255,255,.08) 66%);box-shadow:0 0 30px rgba(34,217,155,.11)}.donut>div{display:grid;place-content:center;width:104px;height:104px;border-radius:50%;background:#0b2852;text-align:center}.donut strong,.donut small{display:block}.donut strong{font:800 23px Manrope}.donut small{color:#7093b8;font-size:10px}.legend{display:flex;justify-content:center;gap:11px}.legend span{display:flex;align-items:center;gap:4px;color:#698caf;font-size:10px}.legend i{width:6px;height:6px;border-radius:50%;background:var(--green)}.legend span:nth-child(2) i{background:var(--red)}.legend span:nth-child(3) i{background:#375478}

.slide--final{grid-template-columns:1fr;place-items:center;overflow-y:auto}.final-card{width:min(920px,100%);text-align:center}.final-icon{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 22px;border:1px solid rgba(34,217,155,.3);border-radius:50%;background:rgba(34,217,155,.12);box-shadow:0 0 50px rgba(34,217,155,.14)}.final-icon svg{width:34px;height:34px;color:var(--green)}.final-card h2{margin:10px 0 12px;font-size:clamp(38px,4vw,58px)}.final-card>p:not(.kicker){max-width:620px;margin:0 auto;color:var(--muted);font-size:16px;line-height:1.65}.logout-tip{display:grid;grid-template-columns:290px 1fr;align-items:center;gap:34px;margin:30px auto 0;padding:22px;border:1px solid var(--line);border-radius:20px;background:rgba(12,36,73,.58);text-align:left}.avatar-menu{display:grid;grid-template-columns:42px 1fr;align-items:start;gap:10px}.avatar-menu>span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(145deg,#8192a9,#dfe9f3);color:#17405e;font-weight:800}.avatar-menu>div{padding:13px;border:1px solid var(--line);border-radius:12px;background:#092047;box-shadow:0 13px 25px rgba(0,0,0,.22)}.avatar-menu b,.avatar-menu small{display:block}.avatar-menu b{font-size:10px}.avatar-menu small{margin-top:3px;color:#7294ba;font-size:10px}.avatar-menu hr{border:0;border-top:1px solid var(--line)}.avatar-menu button{display:flex;align-items:center;gap:7px;width:100%;padding:7px;border:0;border-radius:7px;background:linear-gradient(135deg,#4ba8ff,#2874d7);font-size:10px;font-weight:700}.logout-tip h3{margin:8px 0 7px;font:800 17px Manrope}.logout-tip p{margin:0;color:#839fc0;font-size:11px;line-height:1.55}.final-actions{display:flex;justify-content:center;gap:12px}.final-actions .cta{margin-top:23px}.restart{display:flex;align-items:center;gap:8px;margin-top:23px;padding:0 18px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04);color:#9db9d7;font-size:11px;font-weight:700;cursor:pointer}.restart:hover{background:rgba(255,255,255,.08)}

.controls { position:fixed;z-index:20;left:0;right:0;bottom:0;display:grid;grid-template-columns:215px 140px 1fr 140px;align-items:center;height:76px;border-top:1px solid var(--line);background:rgba(4,17,38,.8);backdrop-filter:blur(22px); }.controls>p{margin:0;padding-left:28px;color:#6689b0;font-size:10px}.nav-button{display:flex;align-items:center;justify-content:center;gap:8px;height:100%;border:0;background:transparent;color:#8eacce;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.2s}.nav-button:hover{color:white;background:rgba(255,255,255,.04)}.nav-button svg{width:16px}.nav-button--back{border-right:1px solid var(--line)}.nav-button--next{border-left:1px solid var(--line);background:rgba(74,165,255,.07);color:var(--cyan)}.nav-button:disabled{opacity:.25;cursor:default}.mobile-progress{display:none}

@media (min-width: 801px) {
  .controls .nav-button--next {
    grid-column: 3 / 5;
  }
}

@keyframes drift{to{transform:translate(30px,20px) scale(1.08)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-9px)}}
@keyframes blink{50%{opacity:0}}
@keyframes cursorMove{0%,20%{transform:translate(22px,18px)}55%,75%{transform:translate(0,0)}100%{transform:translate(22px,18px)}}
@keyframes pulse{0%{transform:scale(.85);opacity:0}45%{opacity:.8}100%{transform:scale(1.12);opacity:0}}
@keyframes codePop{from{opacity:0;transform:translateY(8px) scale(.85)}to{opacity:1;transform:none}}
@keyframes grow{from{right:100%}}
@keyframes barGrow{from{transform:scaleY(0)}}
@keyframes pulseDot{50%{opacity:.35;transform:scale(.75)}}

@media (max-width:1100px){
  .topbar{grid-template-columns:200px 1fr 70px;padding:0 22px}.wizard{grid-template-columns:74px 1fr}.rail{padding:27px 0 18px 23px}.rail button b{display:none}.rail__track{left:36px}.controls{grid-template-columns:74px 100px 1fr 120px}.nav-button--back span{display:none}.slide{grid-template-columns:minmax(320px,.85fr) minmax(430px,1.15fr);gap:35px;padding:28px 45px}.callout{display:none}.slide--intro{grid-template-columns:minmax(390px,.95fr) minmax(420px,1.05fr)}
}

@media (max-width:800px){
  body{overflow:auto}.ambient{position:fixed}.topbar{height:68px;grid-template-columns:1fr auto;padding:0 18px}.topbar__center{display:none}.brand__mark{width:34px;height:34px}.wizard{display:block;height:auto;min-height:100vh;padding:68px 0 78px}.rail{display:none}.stage{min-height:calc(100vh - 146px);overflow:hidden}.slide,.slide--intro{position:absolute;inset:0;grid-template-columns:1fr;align-content:start;gap:34px;padding:34px 22px 45px;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}.slide::-webkit-scrollbar{display:none}.slide-copy{max-width:none}.slide h1{font-size:42px}.slide h2{font-size:36px}.hero-orbit{width:min(100%,430px);margin:-15px auto 0}.demo-window,.access-card-demo,.panel-demo,.summary-demo,.progress-scene,.table-demo,.activities-demo,.quiz-demo,.charts-demo{justify-self:center}.controls{grid-template-columns:62px 1fr 85px;height:78px}.controls>p{display:none}.mobile-progress{display:block;height:3px;margin:0 16px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}.mobile-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .5s}.nav-button--next span,.nav-button--back span{display:none}.summary-demo{grid-template-columns:repeat(2,1fr)}.charts-demo{grid-template-columns:1fr;padding-bottom:30px}.chart-card{min-height:300px}.slide--final{align-content:start}.logout-tip{grid-template-columns:1fr;max-width:580px}.final-card{padding-bottom:20px}
}

@media (max-width:520px){
  .slide{padding:28px 17px 40px}.slide h1{font-size:36px}.slide h2{font-size:31px}.slide-copy>p,.lead{font-size:15px}.hero-orbit{margin-top:0}.float-card{min-width:120px;padding:10px}.float-card--a{left:-4%}.float-card--b{right:-3%}.mail-scene{padding:35px 0}.mail-card{padding:21px}.delivered{right:-5px}.access-card-demo{padding:24px}.code-boxes span{height:54px}.action-cards{grid-template-columns:1fr}.action-card{min-height:90px}.action-card p{left:72px;bottom:26px}.summary-demo{gap:8px;padding:10px}.summary-item{grid-template-columns:35px 1fr;min-height:90px;padding:11px}.summary-item>span{width:35px;height:35px}.progress-card{padding:20px}.progress-head>strong{align-self:flex-start}.table-row{grid-template-columns:.6fr .8fr 1.4fr .45fr;padding:0 10px;font-size:10px}.activity-item{padding:15px 13px}.quiz-demo{padding:20px}.logout-tip{padding:16px}.final-actions{flex-direction:column;align-items:stretch}.final-actions .cta,.restart{margin-top:12px;min-height:50px;justify-content:center}.status-explain{grid-template-columns:auto 1fr}.charts-demo{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.field-prefix {
  margin-right: 4px;
  color: #7993a6;
  font: 800 12px Manrope;
  letter-spacing: .08em;
}

.meeting-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.meeting-rules > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 11px 12px;
  border: 1px solid rgba(127, 212, 255, .15);
  border-radius: 13px;
  background: rgba(127, 212, 255, .055);
}

.meeting-rules > div > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: linear-gradient(145deg, #4aa5ff, #2c7de6);
  box-shadow: 0 9px 20px rgba(44, 125, 230, .22);
  color: #fff;
  font: 800 18px Manrope;
}

.meeting-rules > div:nth-child(2) > span {
  background: linear-gradient(145deg, #20c997, #138f72);
  box-shadow: 0 9px 20px rgba(32, 201, 151, .18);
}

.meeting-rules p,
.meeting-rules b,
.meeting-rules small {
  display: block;
  margin: 0;
}

.meeting-rules b {
  color: #dceeff;
  font: 700 10px Manrope;
}

.meeting-rules small {
  margin-top: 4px;
  color: #7899be;
  font-size:10px;
  line-height: 1.35;
}

.slide[data-title="Encontros e presença"] .info-note {
  margin-top: 10px;
}

.checkin-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 22px;
}

.checkin-steps > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px 11px;
  border: 1px solid rgba(127, 212, 255, .13);
  border-radius: 12px;
  background: rgba(127, 212, 255, .045);
}

.checkin-steps > div > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 1px solid rgba(127, 212, 255, .3);
  border-radius: 9px;
  background: rgba(74, 165, 255, .12);
  color: var(--cyan);
  font: 800 10px Manrope;
}

.checkin-steps p,
.checkin-steps b,
.checkin-steps small {
  display: block;
  margin: 0;
}

.checkin-steps b { color: #e3f1ff; font: 700 10px Manrope; }
.checkin-steps small { margin-top: 3px; color: #7697bd; font-size:10px; line-height: 1.35; }
.slide[data-title="Check-in por QR Code"] .info-note { margin-top: 11px; }

.receipt-email-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 11px;
  padding: 12px 13px;
  border: 1px solid rgba(34, 217, 155, .22);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(34, 217, 155, .09), rgba(74, 165, 255, .055));
}

.receipt-email-note > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: rgba(34, 217, 155, .13);
  color: var(--green);
}

.receipt-email-note b { display: block; margin-bottom: 4px; color: #eafff7; font: 700 11px Manrope; }
.receipt-email-note p { margin: 0; color: #8caecc; font-size: 10px; line-height: 1.45; }
.receipt-email-note p + p { margin-top: 3px; color: #b6d8ec; }

.checkin-session-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 7px 0 0 !important;
  color: #7899bc !important;
  font-size:10px !important;
  line-height: 1.4 !important;
}

.checkin-session-note svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--cyan); }

.checkin-email-receipt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 9px 0 0 !important;
  padding: 9px 11px;
  border: 1px solid rgba(34, 217, 155, .2);
  border-radius: 11px;
  background: rgba(34, 217, 155, .07);
  color: #9bbbd3 !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
}

.checkin-email-receipt svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--green); }
.checkin-email-receipt strong { color: #dff9ef; }

.qr-scene {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 570px);
  min-height: 530px;
}

.phone-frame {
  position: relative;
  z-index: 2;
  width: 286px;
  padding: 9px;
  border: 1px solid rgba(191, 224, 255, .28);
  border-radius: 38px;
  background: linear-gradient(145deg, #152c4d, #07162d);
  box-shadow: 0 35px 70px rgba(0, 7, 22, .48), inset 0 1px rgba(255, 255, 255, .17);
  transform: rotate(2deg);
}

.phone-speaker {
  position: absolute;
  z-index: 3;
  top: 17px;
  left: 50%;
  width: 60px;
  height: 5px;
  border-radius: 999px;
  background: #041126;
  transform: translateX(-50%);
}

.phone-screen {
  min-height: 505px;
  padding: 31px 18px 19px;
  overflow: hidden;
  border-radius: 30px;
  background: radial-gradient(280px 160px at 50% 30%, rgba(74, 165, 255, .17), transparent 68%), linear-gradient(165deg, #0d2d5c, #061a39);
}

.scanner-head { display: flex; align-items: center; gap: 9px; }
.scanner-head > span { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(167, 205, 255, .16); border-radius: 9px; color: #9dc4eb; }
.scanner-head small, .scanner-head b { display: block; }
.scanner-head small { color: var(--cyan); font-size:10px; font-weight: 800; letter-spacing: .1em; }
.scanner-head b { margin-top: 3px; font: 700 11px Manrope; }

.scanner-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(34, 217, 155, .1);
  color: #80e6c3;
  font-size:10px;
  font-weight: 700;
}

.scanner-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulseDot 1.4s infinite; }

.qr-reader {
  position: relative;
  display: grid;
  place-items: center;
  width: 212px;
  height: 212px;
  margin: 17px auto 14px;
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(2, 11, 25, .78), rgba(11, 42, 80, .66));
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .34);
}

.qr-pattern {
  display: grid;
  grid-template-columns: repeat(3, 22px);
  grid-template-rows: repeat(3, 22px);
  gap: 5px;
  padding: 13px;
  border: 7px solid #eaf7ff;
  border-radius: 8px;
  background: #eaf7ff;
  box-shadow: 0 0 26px rgba(127, 212, 255, .22);
}

.qr-pattern i { background: #0a2a53; }
.qr-pattern i:nth-child(2), .qr-pattern i:nth-child(4), .qr-pattern i:nth-child(8) { border: 6px solid #0a2a53; background: #eaf7ff; }
.qr-pattern i:nth-child(5), .qr-pattern i:nth-child(9) { transform: scale(.55); }

.scan-line {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  top: 22px;
  height: 2px;
  background: #55eebb;
  box-shadow: 0 0 13px #55eebb;
  animation: qrScan 2.2s ease-in-out infinite;
}

.corner { position: absolute; width: 26px; height: 26px; border-color: var(--cyan); border-style: solid; }
.corner--tl { top: 10px; left: 10px; border-width: 2px 0 0 2px; border-radius: 8px 0 0; }
.corner--tr { top: 10px; right: 10px; border-width: 2px 2px 0 0; border-radius: 0 8px 0 0; }
.corner--bl { bottom: 10px; left: 10px; border-width: 0 0 2px 2px; border-radius: 0 0 0 8px; }
.corner--br { right: 10px; bottom: 10px; border-width: 0 2px 2px 0; border-radius: 0 0 8px; }

.phone-screen > p { margin: 0 auto; color: #789bc0; font-size:10px; line-height: 1.45; text-align: center; }
.phone-screen > button { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 39px; margin-top: 14px; border: 0; border-radius: 11px; background: linear-gradient(135deg, #4ba8ff, #2874d7); color: #fff; font-size:10px; font-weight: 800; }

.checkin-success {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 54px;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 225px;
  padding: 14px 16px;
  border: 1px solid rgba(34, 217, 155, .32);
  border-radius: 15px;
  background: rgba(7, 38, 61, .96);
  box-shadow: 0 20px 42px rgba(0, 7, 22, .42);
  animation: checkinFloat 4s ease-in-out infinite;
}

.checkin-success > span { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 auto; border-radius: 50%; background: rgba(34, 217, 155, .14); color: var(--green); }
.checkin-success b, .checkin-success small { display: block; }
.checkin-success b { color: #e9fff7; font: 700 11px Manrope; }
.checkin-success small { margin-top: 4px; color: #7da995; font-size:10px; }
.qr-glow { position: absolute; z-index: 1; width: 390px; height: 390px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 217, 155, .14), rgba(74, 165, 255, .08) 45%, transparent 70%); animation: pulse 3.5s ease-in-out infinite; }

@keyframes qrScan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(166px); } }
@keyframes checkinFloat { 50% { transform: translateY(-8px); } }

.experimental-final { max-width: 940px; }

.experimental-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 17px;
  border: 1px solid rgba(255, 200, 87, .34);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(255, 200, 87, .2), rgba(255, 100, 116, .14));
  box-shadow: 0 0 44px rgba(255, 169, 60, .12);
  color: var(--yellow);
  transform: rotate(3deg);
}

.experimental-icon svg { width: 31px; height: 31px; }

.experimental-panel {
  max-width: 800px;
  margin: 24px auto 0;
  overflow: hidden;
  border: 1px solid rgba(255, 200, 87, .24);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(77, 48, 26, .32), rgba(17, 37, 71, .68));
  text-align: left;
}

.experimental-panel__head {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 200, 87, .15);
}

.experimental-panel__head > span {
  display: inline-flex;
  justify-content: center;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(255, 200, 87, .12);
  color: var(--yellow);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

.experimental-panel__head h3 { margin: 0; color: #fff2d6; font: 800 17px Manrope; }
.experimental-panel__head p { margin: 5px 0 0; color: #bec6d3; font-size: 12px; line-height: 1.5; }

.experimental-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 200, 87, .1);
}

.experimental-grid > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background: rgba(8, 28, 59, .92);
}

.experimental-grid > div > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: rgba(255, 200, 87, .1);
  color: var(--yellow);
  font: 800 12px Manrope;
}

.experimental-grid p, .experimental-grid b, .experimental-grid small { display: block; margin: 0; }
.experimental-grid b { color: #f3f7ff; font: 700 12px Manrope; }
.experimental-grid small { margin-top: 4px; color: #91a8c3; font-size: 11px; line-height: 1.4; }

.experimental-official {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 800px;
  margin: 12px auto 0;
  padding: 11px 14px;
  border: 1px solid rgba(255, 100, 116, .3);
  border-radius: 12px;
  background: rgba(119, 18, 43, .2);
  color: #e3b9c1;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}

.experimental-official svg { flex: 0 0 auto; color: var(--red); }
.experimental-official strong { color: #ffe7eb; }

.official-warning {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 22px;
  padding: 16px 17px;
  overflow: hidden;
  border: 1px solid rgba(255, 100, 116, .52);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(171, 27, 51, .34), rgba(89, 13, 35, .3)),
    rgba(44, 9, 27, .56);
  box-shadow: 0 15px 34px rgba(92, 6, 29, .2), inset 0 1px rgba(255, 255, 255, .06);
}

.official-warning::after {
  content: "";
  position: absolute;
  top: -55px;
  right: -35px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255, 66, 87, .12);
  filter: blur(2px);
}

.official-warning__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 145, 156, .3);
  border-radius: 12px;
  background: linear-gradient(145deg, #ff6474, #be2947);
  box-shadow: 0 9px 22px rgba(190, 41, 71, .3);
  color: #fff;
}

.official-warning__icon svg {
  width: 22px;
  height: 22px;
}

.official-warning > div {
  position: relative;
  z-index: 1;
}

.official-warning strong {
  display: block;
  margin-bottom: 7px;
  color: #fff0f2;
  font: 800 13px Manrope;
  letter-spacing: -.01em;
}

.official-warning p {
  margin: 0;
  color: #e7b6bf;
  font-size: 10px;
  line-height: 1.5;
}

.official-warning p + p {
  margin-top: 6px;
  color: #ffd3d8;
}

.official-warning b {
  color: #fff;
}

/* Etapa 5: números com dois dígitos e atalhos com leitura confortável. */
.slide[data-title="Ações rápidas"] .feature-list > div > span {
  width: 40px;
  height: 40px;
  font-size: 12px;
}

.slide[data-title="Ações rápidas"] .feature-list b,
.panel-demo--actions .action-card b {
  font-size: 15px;
}

.slide[data-title="Ações rápidas"] .feature-list small,
.panel-demo--actions .action-card small {
  color: #a0bddb;
  font-size: 11px;
  line-height: 1.4;
}

/* Versão integrada ao portal: preserva a navegação e o rodapé oficiais. */
body.wizard-portal-page {
  overflow: auto;
}

body.wizard-portal-page .topbar {
  position: relative;
}

body.wizard-portal-page .colorlib-nav {
  position: relative;
  z-index: 30;
}

body.wizard-portal-page .wizard {
  height: clamp(650px, 75vh, 790px);
  padding: 0;
}

body.wizard-portal-page .controls {
  position: relative;
}

body.wizard-portal-page .cta,
body.wizard-portal-page .cta:hover,
body.wizard-portal-page .cta:focus {
  color: #fff;
}

body.wizard-portal-page #colorlib-footer {
  position: relative;
  z-index: 3;
}

@media (max-width: 800px) {
  body.wizard-portal-page .wizard {
    height: auto;
    min-height: 0;
    padding: 0;
  }

  body.wizard-portal-page .stage {
    height: calc(100svh - 146px);
    min-height: 610px;
  }
}

@media (max-width: 520px) {
  .meeting-rules {
    grid-template-columns: 1fr;
  }

  .checkin-steps {
    grid-template-columns: 1fr;
  }

  .qr-scene {
    min-height: 550px;
  }

  .checkin-success {
    right: 4px;
  }

  .experimental-panel__head,
  .experimental-grid {
    grid-template-columns: 1fr;
  }

  .experimental-panel__head {
    gap: 10px;
  }
}