:root {
--bg: #0A1128;
--bg-deep: #0B0C10;
--surface: #0E1730;
--surface-2: #131E3F;
--surface-3: #1A2850;
--navy: #16224A;
--navy-deep: #0E1B3D;
--cta: #F47A1F;
--cta-hover: #CC5F12;
--cta-rgb: 244, 122, 31;
--gold: #F9B233;
--gold-bright: #FFC24D;
--ink: #F5F6F8;
--ink-muted: #9AA1AD;
--ink-dim: #6B7380;
--success: #10b981;
--danger: #ef4444;
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.14);
--font-display: "Merriweather", Georgia, "Times New Roman", serif;
--font-body: "Inter", system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--text-hero: clamp(1.65rem, 4.2vw, 2.75rem);
--text-h2: clamp(1.45rem, 3.2vw, 2.25rem);
--text-h3: clamp(1.05rem, 1.6vw, 1.25rem);
--text-body: 1.0625rem;
--text-sm: 0.875rem;
--text-xs: 0.75rem;
--sp-1: 0.5rem;
--sp-2: 1rem;
--sp-3: 1.5rem;
--sp-4: 2rem;
--sp-5: 3.5rem;
--sp-6: 5.5rem;
--max-w: 1120px;
--header-h: 88px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--dur-micro: 180ms;
--dur-reveal: 650ms;
--radius-a: 16px;
--radius-b: 10px;
--radius-pill: 999px;
--shadow-raised:
0 1px 0 rgba(255, 255, 255, 0.04),
0 18px 48px -20px rgba(0, 0, 0, 0.65);
--shadow-cta:
0 1px 2px rgba(0, 0, 0, 0.35),
0 10px 28px -8px rgba(var(--cta-rgb), 0.55);
--shadow-glow: 0 0 40px rgba(var(--cta-rgb), 0.35);
--glow-orange: rgba(244, 122, 31, 0.18);
--glow-gold: rgba(249, 178, 51, 0.12);
--bp-line: rgba(255, 255, 255, 0.035);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: 1.65;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
text-wrap: balance;
color: var(--ink);
}
p { text-wrap: pretty; }
:focus-visible {
outline: 2px solid var(--cta);
outline-offset: 3px;
}
::selection {
background: rgba(var(--cta-rgb), 0.35);
color: var(--ink);
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
.grain {
pointer-events: none;
position: fixed;
inset: 0;
z-index: 9998;
opacity: 0.035;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.accent-stripe {
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
z-index: 9999;
background: linear-gradient(90deg, var(--navy-deep), var(--cta) 45%, var(--gold) 78%, var(--navy));
}
.container {
width: min(100% - 2rem, var(--max-w));
margin-inline: auto;
}
.section {
padding: var(--sp-6) 0;
position: relative;
scroll-margin-top: var(--header-h);
}
.section-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1rem;
}
.section-label::before {
content: "";
width: 18px;
height: 2px;
background: var(--cta);
border-radius: 2px;
}
.section-title {
font-size: var(--text-h2);
max-width: 18ch;
margin-bottom: 1rem;
}
.section-title.center { margin-inline: auto; text-align: center; }
.section-desc {
color: var(--ink-muted);
max-width: 56ch;
margin-bottom: 2.5rem;
font-size: 1.02rem;
}
.section-desc.center { margin-inline: auto; text-align: center; }
.hl-gold { color: var(--gold-bright); }
.hl-cta { color: var(--cta); }
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
height: var(--header-h);
display: flex;
align-items: center;
background: rgba(10, 17, 40, 0.72);
backdrop-filter: blur(16px) saturate(1.2);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
border-bottom: 1px solid transparent;
transition: border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
}
.site-header.is-scrolled {
border-bottom-color: var(--border);
background: rgba(10, 17, 40, 0.92);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: min(100% - 2rem, var(--max-w));
margin-inline: auto;
box-sizing: border-box;
}
.brand-logo {
display: flex;
align-items: center;
height: 56px;
flex-shrink: 0;
}
.brand-logo img {
height: 54px;
width: auto;
object-fit: contain;
}
.header-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.65rem 1.15rem;
border-radius: var(--radius-b);
background: var(--cta);
color: #0B0C10;
font-weight: 700;
font-size: 0.85rem;
box-shadow: var(--shadow-cta);
transition: transform var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.header-cta:hover {
background: var(--cta-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-glow);
}
.header-cta svg { flex-shrink: 0; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-weight: 700;
font-size: 0.95rem;
border-radius: var(--radius-b);
padding: 0.95rem 1.4rem;
transition:
transform var(--dur-micro) var(--ease),
background var(--dur-micro) var(--ease),
box-shadow var(--dur-micro) var(--ease),
border-color var(--dur-micro) var(--ease);
width: 100%;
}
.btn-primary {
background: var(--cta);
color: #0B0C10;
box-shadow: var(--shadow-cta);
animation: cta-pulse 2.4s ease-in-out infinite;
}
.btn-primary:hover {
background: var(--cta-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-glow), var(--shadow-cta);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled {
opacity: 0.7;
cursor: wait;
animation: none;
}
@keyframes cta-pulse {
0%, 100% { box-shadow: 0 0 18px rgba(var(--cta-rgb), 0.35), var(--shadow-cta); }
50% { box-shadow: 0 0 36px rgba(var(--cta-rgb), 0.55), 0 0 56px rgba(var(--cta-rgb), 0.2); }
}
.lead-form {
display: grid;
gap: 0.75rem;
width: 100%;
}
.field { display: grid; gap: 0.35rem; }
.field label {
font-size: 0.78rem;
font-weight: 600;
color: var(--ink-muted);
letter-spacing: 0.02em;
}
.field input {
width: 100%;
padding: 0.85rem 1rem;
border-radius: var(--radius-b);
border: 1px solid var(--border-strong);
background: rgba(14, 23, 48, 0.85);
color: var(--ink);
transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
}
.field input::placeholder { color: var(--ink-dim); }
.field input:hover { border-color: rgba(255, 255, 255, 0.22); }
.field input:focus {
outline: none;
border-color: var(--cta);
box-shadow: 0 0 0 3px rgba(var(--cta-rgb), 0.2);
background: var(--surface-2);
}
.field input.is-invalid {
border-color: var(--danger);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.field-error {
font-size: 0.75rem;
color: #fca5a5;
min-height: 1.1em;
}
.form-micro {
font-size: 0.78rem;
color: var(--ink-dim);
text-align: center;
line-height: 1.45;
}
.form-success {
display: none;
text-align: center;
padding: 1.25rem 1rem;
border-radius: var(--radius-a);
border: 1px solid rgba(16, 185, 129, 0.35);
background: rgba(16, 185, 129, 0.08);
}
.form-success.is-visible { display: block; }
.form-success strong {
display: block;
font-family: var(--font-display);
font-size: 1.15rem;
color: var(--success);
margin-bottom: 0.4rem;
}
.form-success p { color: var(--ink-muted); font-size: 0.92rem; }
.lead-form.is-done .form-fields { display: none; }
.hero {
position: relative;
min-height: min(100svh, 920px);
padding: calc(var(--header-h) + 2rem) 0 3.5rem;
display: flex;
align-items: center;
overflow: visible;
}
.hero-bg {
position: absolute;
inset: 0;
overflow: hidden;
background:
radial-gradient(ellipse 55% 50% at 85% 20%, var(--glow-orange) 0%, transparent 55%),
radial-gradient(ellipse 40% 40% at 10% 80%, var(--glow-gold) 0%, transparent 50%),
linear-gradient(180deg, #0A1128 0%, #0B0C10 55%, #0A1128 100%);
}
.hero-bg::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--bp-line) 1px, transparent 1px),
linear-gradient(90deg, var(--bp-line) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
opacity: 0.7;
}
.hero-layout {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: center;
width: min(100% - 2rem, var(--max-w));
margin-inline: auto;
min-width: 0;
max-width: 100%;
}
.hero-copy {
max-width: 560px;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.hero-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.65rem;
margin-top: 0.25rem;
}
.hero-actions .btn,
.hero-actions .btn-lg {
width: auto;
min-width: 0;
max-width: none;
padding: 0.85rem 1.35rem;
font-size: 0.95rem;
min-height: 0;
gap: 0.45rem;
}
.hero-actions .btn svg {
width: 16px;
height: 16px;
}
.hero-micro { text-align: left; max-width: 36ch; }
.btn-lg {
padding: 1rem 1.5rem;
font-size: 1.02rem;
min-height: 54px;
}
.hero-kicker {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.1rem;
max-width: 100%;
}
.hero-kicker__mark {
flex-shrink: 0;
width: 2px;
height: 1.15rem;
border-radius: 2px;
background: linear-gradient(180deg, var(--gold-bright), var(--cta));
box-shadow: 0 0 12px rgba(var(--cta-rgb), 0.35);
}
.hero-kicker__text {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem 0.55rem;
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.35;
color: var(--ink-muted);
text-transform: none;
}
.hero-kicker__text strong {
font-weight: 700;
color: var(--gold-bright);
letter-spacing: 0.02em;
}
.hero-kicker__sep {
display: inline-block;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(244, 122, 31, 0.55);
flex-shrink: 0;
}
.hero h1 {
font-size: clamp(1.32rem, 3vw, 2.05rem);
line-height: 1.18;
margin-bottom: 0.9rem;
max-width: min(100%, 34ch);
letter-spacing: -0.025em;
font-weight: 800;
}
.hero-title__rest {
display: inline;
font-weight: 700;
color: var(--ink);
}
.hl-offer {
display: block;
margin-bottom: 0.45rem;
}
.hl-offer__text {
display: inline;
font-size: clamp(1.55rem, 3.8vw, 2.55rem);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.08;
text-transform: uppercase;
background: linear-gradient(105deg, #FFC24D 0%, #F47A1F 45%, #FFC24D 90%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: offer-shine 4.5s ease-in-out infinite;
position: relative;
}
.hl-offer {
position: relative;
width: fit-content;
max-width: 100%;
}
.hl-offer::after {
content: "";
display: block;
height: 3px;
margin-top: 0.35rem;
border-radius: 3px;
background: linear-gradient(90deg, transparent, var(--cta) 12%, var(--gold-bright) 50%, var(--cta) 88%, transparent);
background-size: 200% 100%;
animation: underline-slide 2.8s ease-in-out infinite;
box-shadow: 0 0 16px rgba(var(--cta-rgb), 0.45);
}
@keyframes offer-shine {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes underline-slide {
0%, 100% { background-position: 0% 50%; opacity: 0.85; }
50% { background-position: 100% 50%; opacity: 1; }
}
.hl-mark {
font-style: normal;
font-weight: 800;
color: var(--gold-bright);
text-decoration: underline;
text-decoration-color: rgba(244, 122, 31, 0.55);
text-decoration-thickness: 2px;
text-underline-offset: 0.18em;
text-decoration-skip-ink: none;
}
.hero-sub {
color: var(--ink-muted);
font-size: clamp(0.88rem, 1.25vw, 0.98rem);
line-height: 1.55;
margin-bottom: 1.25rem;
max-width: min(100%, 58ch);
}
.hero-sub strong { color: var(--ink); font-weight: 700; }
.hero-sub .hl-vip {
color: var(--gold-bright);
font-weight: 800;
letter-spacing: 0.02em;
background: linear-gradient(180deg, transparent 62%, rgba(244, 122, 31, 0.22) 62%);
padding: 0 0.12em;
}
.hero-sub .hl-product {
color: var(--ink);
font-weight: 800;
white-space: nowrap;
}
.hero-sub .hl-meta {
color: var(--ink-dim);
font-size: 0.92em;
font-weight: 500;
}
.hero-form-card {
background: rgba(14, 23, 48, 0.72);
border: 1px solid var(--border-strong);
border-radius: var(--radius-a);
padding: 1.15rem;
box-shadow: var(--shadow-raised);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.hero-trust {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.25rem;
margin-top: 1rem;
}
.hero-trust-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
color: var(--ink-dim);
font-weight: 500;
}
.hero-trust-item svg { color: var(--success); flex-shrink: 0; }
.platform-mockup {
--mock-h: 480px;
position: relative;
width: 100%;
max-width: 520px;
margin-inline: auto;
border-radius: 18px;
background: var(--surface-2);
border: 1px solid var(--border-strong);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.05),
0 30px 70px -24px rgba(0, 0, 0, 0.75),
0 0 0 1px rgba(244, 122, 31, 0.08);
overflow: hidden;
}
.mockup-chrome {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 0.9rem;
background: var(--surface-3);
border-bottom: 1px solid var(--border);
}
.mockup-dots { display: flex; gap: 6px; }
.mockup-dots span {
width: 9px; height: 9px; border-radius: 50%; opacity: 0.7;
}
.mockup-dots .r { background: #ef4444; }
.mockup-dots .y { background: #eab308; }
.mockup-dots .g { background: #22c55e; }
.mockup-url {
flex: 1;
margin-left: 0.35rem;
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--ink-dim);
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.28rem 0.65rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mockup-shell {
display: grid;
grid-template-columns: 118px 1fr;
min-height: var(--mock-h);
}
.mockup-sidebar {
background: rgba(10, 17, 40, 0.95);
border-right: 1px solid var(--border);
padding: 0.75rem 0.45rem;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.mock-nav-item {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.42rem 0.5rem;
border-radius: 8px;
font-size: 0.65rem;
font-weight: 500;
color: var(--ink-dim);
transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
white-space: nowrap;
}
.mock-nav-item svg {
width: 13px; height: 13px; flex-shrink: 0; opacity: 0.75;
}
.mock-nav-item.is-active {
background: rgba(var(--cta-rgb), 0.14);
color: var(--gold-bright);
}
.mock-nav-item.is-active svg { opacity: 1; color: var(--cta); }
.mockup-stage {
position: relative;
background: linear-gradient(180deg, #0E1730 0%, #0A1128 100%);
min-height: var(--mock-h);
overflow: hidden;
}
.mock-screen {
position: absolute;
inset: 0;
padding: 0.9rem;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition:
opacity 0.45s var(--ease),
transform 0.45s var(--ease),
visibility 0.45s;
overflow: auto;
pointer-events: none;
}
.mock-screen.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.mock-screen-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding-bottom: 0.55rem;
border-bottom: 1px solid var(--border);
}
.mock-screen-title {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 700;
color: var(--ink);
}
.mock-badge {
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.22rem 0.55rem;
border-radius: var(--radius-pill);
background: rgba(var(--cta-rgb), 0.12);
color: var(--cta);
border: 1px solid rgba(var(--cta-rgb), 0.25);
}
.mock-q-label {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-dim);
margin-bottom: 0.35rem;
}
.mock-question {
font-size: 0.72rem;
line-height: 1.55;
color: var(--ink-muted);
padding: 0.65rem 0.7rem;
background: rgba(255, 255, 255, 0.025);
border-radius: 8px;
border-left: 3px solid var(--cta);
margin-bottom: 0.65rem;
}
.mock-options { display: grid; gap: 0.35rem; margin-bottom: 0.7rem; }
.mock-opt {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.6rem;
border-radius: 8px;
border: 1px solid var(--border);
font-size: 0.7rem;
color: var(--ink-muted);
background: rgba(0, 0, 0, 0.15);
transition:
border-color 0.35s var(--ease),
background 0.35s var(--ease),
color 0.35s var(--ease),
box-shadow 0.35s var(--ease);
}
.mock-opt .letter {
width: 18px; height: 18px;
border-radius: 5px;
display: grid; place-items: center;
font-size: 0.62rem;
font-weight: 700;
background: rgba(255, 255, 255, 0.06);
color: var(--ink-dim);
flex-shrink: 0;
transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.mock-opt.is-selected {
border-color: rgba(var(--cta-rgb), 0.55);
background: rgba(var(--cta-rgb), 0.1);
color: var(--ink);
}
.mock-opt.is-selected .letter {
background: rgba(var(--cta-rgb), 0.25);
color: var(--cta);
}
.mock-opt.is-correct {
border-color: rgba(16, 185, 129, 0.55);
background: rgba(16, 185, 129, 0.1);
color: #d1fae5;
box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.15);
}
.mock-opt.is-correct .letter {
background: rgba(16, 185, 129, 0.25);
color: var(--success);
}
.mock-phd {
border-radius: 10px;
border: 1px solid rgba(249, 178, 51, 0.2);
background: rgba(249, 178, 51, 0.05);
padding: 0.65rem 0.7rem;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.mock-phd.is-visible {
opacity: 1;
transform: translateY(0);
}
.mock-phd-head {
display: flex;
align-items: center;
gap: 0.45rem;
margin-bottom: 0.4rem;
font-size: 0.68rem;
font-weight: 700;
color: var(--gold-bright);
}
.mock-phd-av {
width: 20px; height: 20px;
border-radius: 6px;
display: grid; place-items: center;
background: rgba(249, 178, 51, 0.15);
color: var(--gold);
font-size: 0.7rem;
}
.mock-phd-body {
font-size: 0.68rem;
line-height: 1.5;
color: var(--ink-muted);
min-height: 2.8em;
}
.mock-phd-body .cursor {
display: inline-block;
width: 6px; height: 0.9em;
background: var(--gold);
margin-left: 2px;
vertical-align: text-bottom;
animation: blink 0.9s step-end infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.kpi-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.7rem;
}
.kpi-card {
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.6rem 0.7rem;
}
.kpi-card .kpi-label {
font-size: 0.58rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-dim);
font-weight: 600;
margin-bottom: 0.25rem;
}
.kpi-card .kpi-value {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: 1.05rem;
font-weight: 700;
color: var(--ink);
line-height: 1.1;
}
.kpi-card .kpi-value.accent { color: var(--cta); }
.kpi-card .kpi-value.gold { color: var(--gold-bright); }
.kpi-card .kpi-value.ok { color: var(--success); }
.kpi-card .kpi-delta {
font-size: 0.6rem;
color: var(--success);
margin-top: 0.2rem;
}
.mock-chart {
height: 88px;
border-radius: 10px;
border: 1px solid var(--border);
background:
linear-gradient(180deg, rgba(var(--cta-rgb), 0.08) 0%, transparent 70%),
rgba(0, 0, 0, 0.18);
position: relative;
overflow: hidden;
margin-bottom: 0.55rem;
padding: 0.5rem;
}
.mock-bars {
display: flex;
align-items: flex-end;
gap: 6px;
height: 100%;
}
.mock-bars span {
flex: 1;
border-radius: 3px 3px 0 0;
background: linear-gradient(180deg, var(--cta) 0%, rgba(var(--cta-rgb), 0.35) 100%);
transform-origin: bottom;
transform: scaleY(0.15);
transition: transform 0.7s var(--ease);
}
.mock-screen.is-active .mock-bars span { transform: scaleY(1); }
.mock-bars span:nth-child(1) { height: 42%; transition-delay: 0.05s; }
.mock-bars span:nth-child(2) { height: 58%; transition-delay: 0.1s; }
.mock-bars span:nth-child(3) { height: 48%; transition-delay: 0.15s; }
.mock-bars span:nth-child(4) { height: 72%; transition-delay: 0.2s; }
.mock-bars span:nth-child(5) { height: 64%; transition-delay: 0.25s; }
.mock-bars span:nth-child(6) { height: 88%; transition-delay: 0.3s; }
.mock-bars span:nth-child(7) { height: 76%; transition-delay: 0.35s; }
.weak-list { display: grid; gap: 0.35rem; }
.weak-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.65rem;
color: var(--ink-muted);
padding: 0.35rem 0.45rem;
border-radius: 6px;
background: rgba(255, 255, 255, 0.02);
}
.weak-row .pct {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--gold);
}
.edital-list { display: grid; gap: 0.55rem; }
.edital-row {
background: rgba(0, 0, 0, 0.18);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.55rem 0.65rem;
}
.edital-row-top {
display: flex;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.35rem;
font-size: 0.68rem;
}
.edital-row-top .name { color: var(--ink); font-weight: 600; }
.edital-row-top .pct {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--ink-muted);
font-size: 0.65rem;
}
.progress-track {
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
}
.progress-fill {
height: 100%;
width: 0;
border-radius: inherit;
background: linear-gradient(90deg, var(--cta), var(--gold));
transition: width 0.9s var(--ease);
}
.mock-screen.is-active .edital-row:nth-child(1) .progress-fill { width: 82%; transition-delay: 0.1s; }
.mock-screen.is-active .edital-row:nth-child(2) .progress-fill { width: 64%; transition-delay: 0.2s; }
.mock-screen.is-active .edital-row:nth-child(3) .progress-fill { width: 47%; transition-delay: 0.3s; }
.mock-screen.is-active .edital-row:nth-child(4) .progress-fill { width: 91%; transition-delay: 0.4s; }
.mock-screen.is-active .edital-row:nth-child(5) .progress-fill { width: 38%; transition-delay: 0.5s; }
.mock-status {
position: absolute;
bottom: 0.65rem;
right: 0.75rem;
display: flex;
gap: 4px;
z-index: 3;
}
.mock-status span {
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transition: background var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.mock-status span.is-on {
background: var(--cta);
transform: scale(1.2);
box-shadow: 0 0 8px rgba(var(--cta-rgb), 0.6);
}
.social-proof {
background: var(--bg-deep);
border-block: 1px solid var(--border);
padding: var(--sp-5) 0;
overflow: hidden;
}
.social-head {
text-align: center;
margin-bottom: 2rem;
}
.social-head .section-title { max-width: 22ch; }
.stat-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-bottom: 2.25rem;
}
.stat-pill {
display: flex;
flex-direction: column;
align-items: center;
min-width: 140px;
padding: 1rem 1.25rem;
border-radius: var(--radius-a);
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-raised);
}
.stat-pill .num {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: 1.45rem;
font-weight: 700;
color: var(--gold-bright);
line-height: 1.1;
}
.stat-pill .lbl {
font-size: 0.72rem;
color: var(--ink-dim);
margin-top: 0.3rem;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.marquee {
position: relative;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
margin-bottom: 2.5rem;
}
.marquee-track {
display: flex;
gap: 0.85rem;
width: max-content;
animation: marquee 48s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.print-card {
flex: 0 0 auto;
width: 230px;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12);
background: #ffffff;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 18px 40px -18px rgba(0, 0, 0, 0.65),
0 0 0 1px rgba(244, 122, 31, 0.12);
position: relative;
}
.print-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(22, 34, 74, 0.08);
}
.print-card img {
width: 100%;
height: 300px;
object-fit: cover;
object-position: top center;
display: block;
background: #fff;
}
.aprovados-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.aprovado-card {
position: relative;
border-radius: 14px;
overflow: hidden;
aspect-ratio: 3 / 4;
border: 1px solid var(--border);
background: var(--surface);
}
.aprovado-card img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
filter: saturate(0.92) contrast(1.02);
transition: transform 0.5s var(--ease), filter 0.5s var(--ease);
}
.aprovado-card:hover img {
transform: scale(1.04);
filter: saturate(1.05) contrast(1.05);
}
.aprovado-meta {
position: absolute;
inset: auto 0 0 0;
padding: 2.2rem 0.75rem 0.7rem;
background: linear-gradient(180deg, transparent, rgba(10, 17, 40, 0.95) 70%);
}
.aprovado-meta strong {
display: block;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 700;
color: var(--ink);
}
.aprovado-meta span {
font-size: 0.68rem;
color: var(--gold);
font-weight: 600;
}
.problema {
background:
radial-gradient(ellipse 50% 40% at 50% 0%, rgba(244, 122, 31, 0.06), transparent 60%),
var(--bg);
}
.problema .section-title { max-width: 22ch; }
.problem-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.85rem;
}
.problem-card {
position: relative;
padding: 1.35rem 1.25rem 1.25rem;
border-radius: var(--radius-a);
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-raised);
overflow: hidden;
}
.problem-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(244, 122, 31, 0.35), transparent);
}
.problem-card .number {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--cta);
margin-bottom: 0.55rem;
display: block;
}
.problem-card h3 {
font-family: var(--font-body);
font-size: 1.02rem;
font-weight: 700;
margin-bottom: 0.5rem;
letter-spacing: -0.01em;
}
.problem-card p {
color: var(--ink-muted);
font-size: 0.92rem;
line-height: 1.6;
}
.solucao {
background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
}
.solucao .section-title { max-width: 20ch; }
.dual-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.pillar {
position: relative;
border-radius: calc(var(--radius-a) + 2px);
padding: 1.5rem 1.35rem;
background: var(--surface);
border: 1px solid var(--border-strong);
box-shadow: var(--shadow-raised);
overflow: hidden;
}
.pillar::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(180deg, var(--cta), var(--gold));
}
.pillar-militares::after {
background: linear-gradient(180deg, var(--gold), var(--cta));
}
.pillar-petro::after {
background: linear-gradient(180deg, var(--cta), #fb8b2e);
}
.pillar-kicker {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.5rem;
}
.pillar h3 {
font-size: 1.25rem;
margin-bottom: 0.65rem;
}
.pillar > p {
color: var(--ink-muted);
font-size: 0.95rem;
margin-bottom: 1.1rem;
}
.pillar-list {
display: grid;
gap: 0.55rem;
}
.pillar-list li {
display: flex;
align-items: flex-start;
gap: 0.55rem;
font-size: 0.9rem;
color: var(--ink-muted);
line-height: 1.45;
}
.pillar-list li svg {
flex-shrink: 0;
margin-top: 0.15rem;
color: var(--cta);
}
.pillar-list li strong { color: var(--ink); font-weight: 600; }
.por-dentro {
background:
radial-gradient(ellipse 45% 50% at 90% 30%, rgba(244, 122, 31, 0.07), transparent 55%),
var(--bg);
}
.features-layout {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: center;
}
.feature-list { display: grid; gap: 0.85rem; }
.feature-item {
display: grid;
grid-template-columns: 42px 1fr;
gap: 0.85rem;
padding: 0.95rem 1rem;
border-radius: var(--radius-a);
background: var(--surface);
border: 1px solid var(--border);
transition: border-color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.feature-item:hover {
border-color: rgba(var(--cta-rgb), 0.35);
transform: translateY(-1px);
}
.feature-icon {
width: 42px; height: 42px;
border-radius: 12px;
display: grid; place-items: center;
background: rgba(var(--cta-rgb), 0.1);
color: var(--cta);
border: 1px solid rgba(var(--cta-rgb), 0.18);
}
.feature-item h3 {
font-family: var(--font-body);
font-size: 0.98rem;
font-weight: 700;
margin-bottom: 0.25rem;
letter-spacing: -0.01em;
}
.feature-item p {
font-size: 0.88rem;
color: var(--ink-muted);
line-height: 1.5;
}
.por-dentro .platform-mockup { max-width: 100%; }
.para-quem {
background: var(--bg-deep);
border-block: 1px solid var(--border);
}
.audience-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.audience-card {
border-radius: var(--radius-a);
padding: 1.5rem 1.35rem;
border: 1px solid var(--border);
background: var(--surface);
}
.audience-card.yes {
border-color: rgba(16, 185, 129, 0.25);
background:
linear-gradient(180deg, rgba(16, 185, 129, 0.06), transparent 40%),
var(--surface);
}
.audience-card.no {
border-color: rgba(239, 68, 68, 0.18);
background:
linear-gradient(180deg, rgba(239, 68, 68, 0.05), transparent 40%),
var(--surface);
}
.audience-card h3 {
font-family: var(--font-body);
font-size: 1.05rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.audience-card.yes h3 { color: #6ee7b7; }
.audience-card.no h3 { color: #fca5a5; }
.audience-card ul { display: grid; gap: 0.55rem; }
.audience-card li {
display: flex;
gap: 0.55rem;
align-items: flex-start;
font-size: 0.92rem;
color: var(--ink-muted);
line-height: 1.45;
}
.audience-card li svg { flex-shrink: 0; margin-top: 0.15rem; }
.audience-card.yes li svg { color: var(--success); }
.audience-card.no li svg { color: #f87171; }
.expert {
background:
radial-gradient(ellipse 40% 50% at 15% 50%, rgba(249, 178, 51, 0.07), transparent 55%),
var(--bg);
}
.expert-layout {
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
align-items: center;
}
.expert-photo {
position: relative;
border-radius: calc(var(--radius-a) + 4px);
overflow: hidden;
aspect-ratio: 3 / 4;
max-width: 380px;
margin-inline: auto;
border: 1px solid var(--border-strong);
box-shadow: var(--shadow-raised), 0 0 60px -20px rgba(var(--cta-rgb), 0.35);
}
.expert-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 18%;
filter: saturate(0.95) contrast(1.03);
}
.expert-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(10, 17, 40, 0.75) 100%);
pointer-events: none;
}
.expert-copy .section-title { max-width: 16ch; }
.expert-copy p {
color: var(--ink-muted);
margin-bottom: 0.9rem;
max-width: 48ch;
}
.expert-creds {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1.25rem;
}
.cred-chip {
font-size: 0.72rem;
font-weight: 600;
padding: 0.4rem 0.7rem;
border-radius: var(--radius-pill);
border: 1px solid var(--border-strong);
background: rgba(255, 255, 255, 0.03);
color: var(--ink-muted);
}
.fecho {
position: relative;
padding: var(--sp-6) 0;
overflow: hidden;
background:
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(244, 122, 31, 0.12), transparent 60%),
linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}
.fecho-card {
max-width: 560px;
margin-inline: auto;
text-align: center;
padding: 2rem 1.35rem;
border-radius: calc(var(--radius-a) + 4px);
background: rgba(14, 23, 48, 0.85);
border: 1px solid var(--border-strong);
box-shadow: var(--shadow-raised), 0 0 80px -30px rgba(var(--cta-rgb), 0.45);
backdrop-filter: blur(12px);
}
.fecho-card .section-title {
max-width: 18ch;
margin-inline: auto;
text-align: center;
}
.fecho-card .section-desc {
margin-inline: auto;
text-align: center;
margin-bottom: 1.5rem;
}
.fecho-card .lead-form { text-align: left; }
.site-footer {
padding: 1.75rem 0 2.25rem;
border-top: 1px solid var(--border);
background: #070A14;
text-align: center;
}
.site-footer img {
height: 36px;
width: auto;
margin: 0 auto 0.85rem;
opacity: 0.9;
}
.site-footer p {
font-size: 0.78rem;
color: var(--ink-dim);
line-height: 1.5;
}
.site-footer a {
color: var(--ink-muted);
text-decoration: underline;
text-underline-offset: 2px;
}
.site-footer a:hover { color: var(--gold); }
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.reveal.is-in {
opacity: 1;
transform: translateY(0);
}
.hero-enter > * {
opacity: 0;
transform: translateY(14px);
animation: hero-in 0.7s var(--ease) forwards;
}
.hero-enter > *:nth-child(1) { animation-delay: 0.05s; }
.hero-enter > *:nth-child(2) { animation-delay: 0.14s; }
.hero-enter > *:nth-child(3) { animation-delay: 0.22s; }
.hero-enter > *:nth-child(4) { animation-delay: 0.32s; }
.hero-enter > *:nth-child(5) { animation-delay: 0.4s; }
.hero-mock-enter {
opacity: 0;
transform: translateY(18px) scale(0.98);
animation: hero-in 0.85s var(--ease) 0.28s forwards;
}
@keyframes hero-in {
to { opacity: 1; transform: none; }
}
@media (min-width: 640px) {
.aprovados-grid { grid-template-columns: repeat(4, 1fr); }
.problem-grid { grid-template-columns: 1fr 1fr; }
.dual-grid { grid-template-columns: 1fr 1fr; }
.audience-grid { grid-template-columns: 1fr 1fr; }
.print-card { width: 240px; }
.print-card img { height: 300px; }
.fecho-card { padding: 2.5rem 2rem; }
.hero-form-card { padding: 1.35rem; }
}
@media (min-width: 960px) {
.hero-layout {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 2rem 1.75rem;
align-items: center;
}
.hero-copy { max-width: none; }
.hero h1 { max-width: min(100%, 26ch); }
.hero-sub { max-width: min(100%, 58ch); }
.platform-mockup { margin-inline: 0 0; margin-left: auto; }
.hero-mock-premium { margin-inline: 0; min-width: 0; }
.features-layout {
grid-template-columns: 1.05fr 0.95fr;
gap: 2.5rem;
}
.expert-layout {
grid-template-columns: 0.9fr 1.1fr;
gap: 3rem;
}
.expert-photo { margin-inline: 0; }
.problem-grid { gap: 1rem; }
}
@media (min-width: 1100px) {
.mockup-shell { grid-template-columns: 132px 1fr; }
.mock-nav-item { font-size: 0.68rem; }
}
@media (max-width: 420px) {
.mockup-shell { grid-template-columns: 44px 1fr; }
.mock-nav-item span { display: none; }
.mock-nav-item { justify-content: center; padding: 0.5rem; }
.platform-mockup { --mock-h: 420px; }
.print-card { width: 180px; }
.print-card img { height: 230px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal, .hero-enter > *, .hero-mock-enter {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
.marquee-track { animation: none; }
.btn-primary { animation: none; }
.mock-phd-body .cursor { animation: none; opacity: 1; }
}
.hero-mock-premium {
position: relative;
width: 100%;
min-width: 0;
max-width: 100%;
align-self: center;
overflow: visible;
}
.hero-mock-premium .mq-embed {
width: 100%;
max-width: 100%;
min-width: 0;
overflow: visible;
}
.hero-mock-premium .mq-stage {
min-height: 0;
padding: 40px 36px 48px;
perspective: 1400px;
max-width: 100%;
overflow: visible;
}
.hero-mock-premium .mq-stage__grid {
border-radius: 20px;
opacity: 0.7;
}
.hero-mock-premium .mq-embed .mq-frame,
.hero-mock-premium .mq-frame {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto;
box-sizing: border-box;
--rx: 2.5deg;
--ry: -5deg;
}
.hero-mock-premium .mq-app {
height: 460px;
grid-template-columns: 156px 1fr;
}
.hero-mock-premium .mq-sidebar__logo img {
height: 30px;
}
.hero-mock-premium .mq-nav__item {
font-size: 10.5px;
padding: 6px 8px;
}
.hero-mock-premium .mq-kpi {
overflow: visible;
padding: 10px 8px 8px;
min-width: 0;
}
.hero-mock-premium .mq-kpi__value {
font-size: 15px;
letter-spacing: -0.02em;
white-space: nowrap;
overflow: visible;
line-height: 1.15;
padding-right: 2px;
}
.hero-mock-premium .mq-kpi__label {
font-size: 8.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-mock-premium .mq-kpi__spark {
opacity: 0.35;
width: 36px;
height: 14px;
right: 6px;
bottom: 6px;
pointer-events: none;
}
.hero-mock-premium .mq-kpis {
gap: 6px;
margin-bottom: 10px;
}
.hero-mock-premium .mq-screen[data-screen="dashboard"] {
overflow-y: auto;
overflow-x: hidden;
}
.hero-mock-premium .mq-float {
z-index: 12;
max-width: min(210px, 46%);
pointer-events: none;
box-shadow:
0 16px 40px -12px rgba(0, 0, 0, 0.65),
0 0 0 1px rgba(255, 255, 255, 0.08);
}
.hero-mock-premium .mq-float--phd {
top: 52px;
right: 20px;
left: auto;
transform: none;
transform-origin: top right;
animation: mq-float-y 5s ease-in-out infinite;
}
.hero-mock-premium .mq-float--kpi {
bottom: 44px;
left: 20px;
right: auto;
transform: none;
transform-origin: bottom left;
animation: mq-float-y 5s ease-in-out infinite;
animation-delay: -2.2s;
}
@media (min-width: 1100px) {
.hero-mock-premium .mq-stage {
padding: 44px 40px 52px;
}
.hero-mock-premium .mq-float--phd {
top: 56px;
right: 28px;
}
.hero-mock-premium .mq-float--kpi {
bottom: 48px;
left: 28px;
}
}
.hero-lock {
margin: 14px 0 0;
font-size: 12.5px;
color: var(--text-muted, #9AA1AD);
line-height: 1.45;
max-width: 42ch;
}
.hero-title .hl,
#hero-title .hl {
color: var(--gold, #F9B233);
background: linear-gradient(120deg, #F9B233 0%, #F47A1F 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 1000px) {
.hero-mock-premium {
width: 100%;
max-width: 560px;
margin-inline: auto;
order: 2;
}
.hero-copy {
order: 1;
}
.hero-mock-premium .mq-float {
display: none;
}
.hero-mock-premium .mq-stage {
min-height: 0;
padding: 8px 0 16px;
}
.hero-mock-premium .mq-embed .mq-stage {
min-height: 0;
padding: 4px 0 12px;
}
.hero-mock-premium .mq-frame {
--rx: 0deg;
--ry: 0deg;
--tz: 0px;
width: 100%;
max-width: 100%;
transform: none;
}
.hero-mock-premium .mq-app {
display: block;
height: 440px;
min-height: 440px;
}
.hero-mock-premium .mq-sidebar {
display: none !important;
}
.hero-mock-premium .mq-content {
position: relative;
display: block;
width: 100%;
height: 100%;
min-height: 398px;
}
.hero-mock-premium .mq-screen {
padding: 12px 12px;
}
.hero-mock-premium .mq-kpis {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hero-mock-premium .mq-kpi__value {
font-size: 16px;
}
}
@media (max-width: 640px) {
.hero-mock-premium {
max-width: 100%;
}
.hero-mock-premium .mq-app {
height: 420px;
min-height: 420px;
}
.hero-mock-premium .mq-content {
min-height: 378px;
}
.hero-actions .btn,
.hero-actions .btn-lg {
padding: 0.78rem 1.2rem;
font-size: 0.92rem;
}
.hero-actions .btn {
width: auto;
max-width: none;
}
.hero-mock-premium .mq-q-enunciado {
font-size: 11.5px;
}
.hero-mock-premium .mq-alt {
font-size: 11px;
padding: 8px 10px;
}
.hero-mock-premium .mq-phd {
width: min(92%, 280px);
}
.hero-layout {
gap: 1.5rem;
}
}
.header-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.countdown {
display: flex;
align-items: center;
gap: 0.35rem;
flex: 1;
justify-content: center;
min-width: 0;
}
.countdown-unit {
display: flex;
flex-direction: column;
align-items: center;
min-width: 3rem;
padding: 0.35rem 0.5rem;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.countdown-num {
font-family: var(--font-mono);
font-size: 1.05rem;
font-weight: 700;
color: var(--gold-bright);
line-height: 1.1;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.countdown-lbl {
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-dim);
margin-top: 0.15rem;
}
.countdown-sep {
color: var(--cta);
font-weight: 700;
font-size: 1rem;
opacity: 0.7;
margin-bottom: 0.7rem;
}
button.header-cta {
border: none;
cursor: pointer;
font: inherit;
flex-shrink: 0;
}
@media (min-width: 1000px) {
.hero-layout {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 2.5rem 2rem;
align-items: center;
}
.hero-copy {
max-width: none;
padding-top: 0.5rem;
}
.hero-mock-premium {
align-self: center;
margin-top: 0;
}
.hero-mock-premium .mq-frame {
max-width: 100%;
}
.hero-mock-premium .mq-app {
height: 460px;
}
.hero {
padding-top: calc(var(--header-h) + 1.25rem);
padding-bottom: 2.5rem;
min-height: auto;
}
}
.section-head--center {
text-align: center;
max-width: 720px;
margin-inline: auto  auto;
margin-bottom: 2.25rem;
}
.section-head--center .section-label {
justify-content: center;
}
.section-head--center .section-title {
margin-inline: auto;
max-width: 28ch;
text-align: center;
}
.section-head--center .section-desc {
margin-inline: auto;
text-align: center;
max-width: 58ch;
}
.problem-grid--equal {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
align-items: stretch;
}
.problem-grid--equal .problem-card {
height: 100%;
display: flex;
flex-direction: column;
}
@media (min-width: 720px) {
.problem-grid--equal {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1100px) {
.problem-grid--equal {
grid-template-columns: repeat(4, 1fr);
}
}
.dual-grid--equal {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
align-items: stretch;
}
.dual-grid--equal .pillar {
height: 100%;
}
@media (min-width: 900px) {
.dual-grid--equal {
grid-template-columns: 1fr 1fr;
}
}
.stat-strip--equal {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
margin-top: 1.5rem;
}
@media (min-width: 900px) {
.stat-strip--equal {
grid-template-columns: repeat(3, 1fr);
}
}
.stat-strip--equal .stat-pill {
width: 100%;
justify-content: center;
text-align: center;
}
.fecho-card--cta {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.fecho-card--cta .section-title {
margin-inline: auto;
max-width: 22ch;
text-align: center;
}
.fecho-card--cta .section-desc {
margin-inline: auto;
text-align: center;
}
.popup-overlay {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
}
.popup-overlay[hidden] {
display: none !important;
}
.popup-backdrop {
position: absolute;
inset: 0;
background: rgba(6, 8, 16, 0.72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.popup-panel {
position: relative;
z-index: 1;
width: min(100%, 440px);
max-height: min(92svh, 720px);
overflow-y: auto;
padding: 1.75rem 1.5rem 1.5rem;
border-radius: 18px;
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(244, 122, 31, 0.12), transparent 55%),
linear-gradient(180deg, #131E3F 0%, #0A1128 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 32px 80px -20px rgba(0, 0, 0, 0.75),
0 0 60px -20px rgba(244, 122, 31, 0.25);
animation: popup-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes popup-in {
from { opacity: 0; transform: translateY(12px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.popup-close {
position: absolute;
top: 0.85rem;
right: 0.85rem;
width: 36px;
height: 36px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
color: var(--ink-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.2s, background 0.2s;
}
.popup-close:hover {
color: var(--ink);
background: rgba(255, 255, 255, 0.08);
}
.popup-brand {
margin-bottom: 0.85rem;
}
.popup-brand img {
height: 44px;
width: auto;
display: block;
}
.popup-kicker {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 0.5rem;
}
.popup-title {
font-family: var(--font-display);
font-size: clamp(1.25rem, 3vw, 1.45rem);
line-height: 1.25;
margin: 0 0 0.5rem;
color: var(--ink);
max-width: 22ch;
}
.popup-title .hl {
color: var(--gold-bright);
font-weight: 800;
white-space: nowrap;
}
.popup-sub {
font-size: 0.9rem;
color: var(--ink-muted);
margin: 0 0 1.25rem;
line-height: 1.5;
}
.popup-panel .lead-form .btn {
width: 100%;
}
body.popup-open {
overflow: hidden;
}
@media (max-width: 900px) {
.site-header .header-cta,
button.header-cta {
display: none !important;
}
.header-bar {
gap: 0.75rem;
}
.brand-logo {
height: 44px;
}
.brand-logo img {
height: 40px;
}
.countdown {
flex: 1 1 auto;
justify-content: flex-end;
gap: 0.25rem;
min-width: 0;
}
.countdown-unit {
min-width: 2.55rem;
padding: 0.3rem 0.4rem;
}
.countdown-num {
font-size: 0.92rem;
}
.countdown-lbl {
font-size: 0.48rem;
}
.countdown-sep {
font-size: 0.9rem;
margin-bottom: 0.55rem;
opacity: 0.55;
}
:root { --header-h: 72px; }
.site-header { height: var(--header-h); }
.section-label {
display: none !important;
}
.section-title,
.section-title.center,
.section-head--center .section-title,
.social-head .section-title,
.problema .section-title,
.solucao .section-title,
.expert-copy .section-title,
.fecho-card .section-title,
.fecho-card--cta .section-title,
.features-layout .section-title,
.para-quem .section-title {
text-align: center !important;
margin-inline: auto !important;
max-width: min(100%, 34ch) !important;
}
.section-desc,
.section-desc.center,
.section-head--center .section-desc,
.social-head .section-desc,
.expert-copy p,
.fecho-card--cta .section-desc {
text-align: center !important;
margin-inline: auto !important;
max-width: min(100%, 42ch) !important;
}
.section-head--center,
.social-head,
.reveal > .section-title,
.features-layout .reveal:first-child,
.para-quem .reveal:first-child,
.expert-copy {
text-align: center !important;
}
.expert-copy {
display: flex;
flex-direction: column;
align-items: center;
}
.expert-creds {
justify-content: center;
}
.hero-copy {
text-align: center;
align-items: center;
max-width: 100%;
}
.hero h1,
#hero-title {
text-align: center;
margin-inline: auto;
max-width: min(100%, 30ch);
font-size: clamp(1.22rem, 5.2vw, 1.55rem);
}
.hl-offer {
margin-inline: auto;
}
.hl-offer__text {
font-size: clamp(1.4rem, 6.5vw, 1.85rem);
}
.hero-sub {
text-align: center;
margin-inline: auto;
max-width: min(100%, 48ch);
font-size: clamp(0.84rem, 3.4vw, 0.95rem);
}
.hero-sub .hl-product {
white-space: normal;
}
.hero-actions {
align-items: center;
width: 100%;
}
.hero-actions .btn,
.hero-actions .btn-lg {
width: auto;
max-width: none;
}
.hero-micro,
.hero-actions .form-micro,
.form-micro.hero-micro {
display: none !important;
}
.hero-lock {
text-align: center;
margin-inline: auto;
max-width: 36ch;
}
.hero-trust {
justify-content: center;
text-align: center;
}
.stat-strip,
.stat-strip--equal {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0.4rem !important;
margin-top: 1.1rem;
margin-bottom: 1.5rem;
flex-wrap: nowrap;
}
.stat-strip--equal .stat-pill,
.stat-pill {
padding: 0.55rem 0.28rem !important;
gap: 0.12rem;
min-width: 0 !important;
width: 100%;
}
.stat-pill .num {
font-size: clamp(0.88rem, 3.8vw, 1.1rem) !important;
letter-spacing: -0.02em;
line-height: 1.05;
word-break: keep-all;
}
.stat-pill .lbl {
font-size: 0.55rem !important;
line-height: 1.15;
letter-spacing: 0.02em;
margin-top: 0.15rem !important;
hyphens: auto;
}
}
@media (max-width: 420px) {
.countdown-unit {
min-width: 2.2rem;
padding: 0.25rem 0.28rem;
}
.countdown-num { font-size: 0.82rem; }
.countdown-lbl { font-size: 0.42rem; }
.stat-pill .num {
font-size: 0.9rem;
}
.stat-pill .lbl {
font-size: 0.52rem;
}
.brand-logo img { height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
.popup-panel { animation: none; }
}
:root {
--navy-950: #0A1128;
--navy-900: #0E1730;
--navy-800: #131E3F;
--navy-700: #16224A;
--navy-600: #1A2850;
--navy-500: #24345E;
--cta: #F47A1F;
--cta-hot: #FB8B2E;
--cta-rgb: 244, 122, 31;
--gold: #F9B233;
--gold-bright: #FFC24D;
--success: #10b981;
--error: #ef4444;
--text: #F5F6F8;
--text-muted: #9AA1AD;
--text-dim: #6B7280;
--surface-1: #0B0C10;
--surface-2: #12141A;
--surface-3: #181B22;
--surface-4: #1C1F27;
--border: rgba(255, 255, 255, 0.09);
--border-subtle: rgba(255, 255, 255, 0.06);
--edge: rgba(255, 255, 255, 0.08);
--font: "Inter", system-ui, -apple-system, sans-serif;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--radius-frame: 16px;
--radius-card: 12px;
--radius-sm: 8px;
--shadow-frame:
0 40px 100px -20px rgba(0, 0, 0, 0.65),
0 0 80px -20px rgba(244, 122, 31, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.06);
--shadow-float:
0 20px 50px -12px rgba(0, 0, 0, 0.55),
0 0 40px -10px rgba(244, 122, 31, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.mq-page {
min-height: 100vh;
margin: 0;
font-family: var(--font);
background:
radial-gradient(1200px 600px at 50% -10%, rgba(22, 34, 74, 0.55), transparent 60%),
radial-gradient(800px 400px at 80% 80%, rgba(244, 122, 31, 0.08), transparent 50%),
var(--navy-950);
color: var(--text);
-webkit-font-smoothing: antialiased;
}
.mq-page *,
.mq-page *::before,
.mq-page *::after {
box-sizing: border-box;
}
.mq-showcase {
max-width: 1280px;
margin: 0 auto;
padding: 48px 24px 80px;
}
.mq-showcase__header {
text-align: center;
margin-bottom: 48px;
}
.mq-showcase__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 14px;
}
.mq-showcase__eyebrow::before {
content: "";
width: 18px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold));
}
.mq-showcase__title {
font-size: clamp(28px, 4vw, 42px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.1;
margin: 0 0 12px;
color: var(--text);
}
.mq-showcase__sub {
font-size: 15px;
color: var(--text-muted);
max-width: 520px;
margin: 0 auto;
line-height: 1.55;
}
.mq-stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 620px;
padding: 40px 20px 60px;
perspective: 1600px;
}
.mq-stage__grid {
position: absolute;
inset: 0;
border-radius: 24px;
background-image:
linear-gradient(rgba(244, 122, 31, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(244, 122, 31, 0.04) 1px, transparent 1px);
background-size: 32px 32px;
mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, black 20%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, black 20%, transparent 75%);
pointer-events: none;
}
.mq-stage__glow {
position: absolute;
width: 70%;
height: 55%;
top: 50%;
left: 50%;
transform: translate(-50%, -42%);
background:
radial-gradient(ellipse at center, rgba(244, 122, 31, 0.28) 0%, transparent 55%),
radial-gradient(ellipse at 40% 60%, rgba(249, 178, 51, 0.14) 0%, transparent 50%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
}
.mq-frame {
position: relative;
z-index: 2;
width: min(920px, 94vw);
border-radius: var(--radius-frame);
background: var(--surface-2);
box-shadow: var(--shadow-frame);
--rx: 3deg;
--ry: -6deg;
--tz: 0px;
transform: perspective(1600px) rotateY(var(--ry)) rotateX(var(--rx)) translateY(var(--tz));
transform-style: preserve-3d;
transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
will-change: transform;
}
.mq-frame::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
pointer-events: none;
z-index: 20;
}
.mq-frame::after {
content: "";
position: absolute;
top: -40%;
left: -60%;
width: 45%;
height: 180%;
background: linear-gradient(
105deg,
transparent 30%,
rgba(255, 255, 255, 0.045) 45%,
rgba(249, 178, 51, 0.06) 50%,
rgba(255, 255, 255, 0.03) 55%,
transparent 70%
);
transform: rotate(12deg);
pointer-events: none;
z-index: 25;
animation: mq-shine-sweep 7.5s ease-in-out infinite;
}
@keyframes mq-shine-sweep {
0%, 55% { left: -60%; opacity: 0; }
60% { opacity: 1; }
85% { left: 120%; opacity: 0.8; }
100% { left: 120%; opacity: 0; }
}
.mq-frame.is-hover {
--tz: -8px;
box-shadow:
0 48px 110px -18px rgba(0, 0, 0, 0.72),
0 0 100px -16px rgba(244, 122, 31, 0.32),
0 0 0 1px rgba(255, 255, 255, 0.08);
}
.mq-frame.is-flat {
--rx: 0deg;
--ry: 0deg;
--tz: 0px;
}
.mq-frame.is-flat.is-hover {
--tz: -4px;
}
.mq-chrome {
display: flex;
align-items: center;
gap: 12px;
height: 42px;
padding: 0 14px;
background: linear-gradient(180deg, #1a1d26 0%, #14161d 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
position: relative;
z-index: 5;
}
.mq-chrome::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}
.mq-traffic {
display: flex;
gap: 7px;
flex-shrink: 0;
}
.mq-traffic span {
width: 11px;
height: 11px;
border-radius: 50%;
box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.25);
}
.mq-traffic span:nth-child(1) { background: #ff5f57; }
.mq-traffic span:nth-child(2) { background: #febc2e; }
.mq-traffic span:nth-child(3) { background: #28c840; }
.mq-urlbar {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
height: 26px;
padding: 0 12px;
border-radius: 7px;
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.06);
min-width: 0;
}
.mq-urlbar__favicon {
width: 14px;
height: 14px;
border-radius: 3px;
object-fit: contain;
flex-shrink: 0;
}
.mq-urlbar__lock {
width: 10px;
height: 10px;
flex-shrink: 0;
color: var(--success);
opacity: 0.85;
}
.mq-urlbar__text {
font-size: 11.5px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.01em;
}
.mq-urlbar__text strong {
color: var(--text);
font-weight: 500;
}
.mq-chrome__actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.mq-chrome__actions i {
display: block;
width: 18px;
height: 18px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.mq-app {
display: grid;
grid-template-columns: 188px 1fr;
height: 520px;
background: var(--surface-1);
}
.mq-sidebar {
background: var(--navy-900);
border-right: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
flex-direction: column;
padding: 14px 0 12px;
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.03), 8px 0 28px -20px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.mq-sidebar__logo {
padding: 0 14px 12px;
}
.mq-sidebar__logo img {
height: 36px;
width: auto;
display: block;
}
.mq-sidebar__divider {
height: 1px;
margin: 0 14px 10px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}
.mq-sidebar__label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-dim);
padding: 0 16px 6px;
}
.mq-nav {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 8px;
flex: 1;
overflow: hidden;
}
.mq-nav__item {
position: relative;
display: flex;
align-items: center;
gap: 9px;
padding: 7px 10px;
border-radius: 9px;
font-size: 11.5px;
font-weight: 500;
color: rgba(245, 246, 248, 0.55);
transition: color 0.25s var(--ease), background 0.25s var(--ease);
cursor: default;
white-space: nowrap;
}
.mq-nav__item svg {
width: 14px;
height: 14px;
flex-shrink: 0;
opacity: 0.55;
transition: opacity 0.25s var(--ease);
}
.mq-nav__item.is-active {
color: #fff;
background: linear-gradient(180deg, #F47A1F 0%, #c45a12 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 8px 18px -10px rgba(244, 122, 31, 0.7);
}
.mq-nav__item.is-active svg {
opacity: 1;
color: #fff;
}
.mq-nav__item.is-active::before {
content: "";
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 16px;
border-radius: 0 3px 3px 0;
background: var(--gold);
}
.mq-nav__badge {
margin-left: auto;
font-size: 9px;
font-weight: 700;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 99px;
background: var(--cta);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-variant-numeric: tabular-nums;
}
.mq-nav__item.is-active .mq-nav__badge {
background: rgba(255, 255, 255, 0.22);
}
.mq-sidebar__timer {
margin: 8px 10px 0;
padding: 8px 10px;
border-radius: 9px;
background: var(--surface-3);
border: 1px solid var(--border-subtle);
display: flex;
align-items: center;
gap: 8px;
}
.mq-sidebar__timer-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--success);
box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
animation: mq-pulse-dot 2s ease-in-out infinite;
}
.mq-sidebar__timer-text {
font-size: 10px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.mq-sidebar__timer-text strong {
color: var(--text);
font-weight: 600;
}
@keyframes mq-pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.mq-content {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(22, 34, 74, 0.35), transparent 60%),
var(--surface-1);
}
.mq-screen {
position: absolute;
inset: 0;
padding: 16px 18px;
opacity: 0;
visibility: hidden;
transform: translateX(18px);
transition:
opacity 0.7s var(--ease),
transform 0.7s var(--ease),
visibility 0.7s;
overflow: hidden;
pointer-events: none;
}
.mq-screen.is-active {
opacity: 1;
visibility: visible;
transform: translateX(0);
pointer-events: auto;
z-index: 2;
}
.mq-screen.is-exit {
opacity: 0;
transform: translateX(-14px);
z-index: 1;
}
.mq-q-top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.mq-badge {
display: inline-flex;
align-items: center;
gap: 5px;
height: 22px;
padding: 0 9px;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mq-badge--banca {
background: rgba(244, 122, 31, 0.12);
color: var(--cta-hot);
border: 1px solid rgba(244, 122, 31, 0.25);
}
.mq-badge--cargo {
background: rgba(249, 178, 51, 0.1);
color: var(--gold-bright);
border: 1px solid rgba(249, 178, 51, 0.22);
}
.mq-badge--meta {
background: rgba(255, 255, 255, 0.04);
color: var(--text-muted);
border: 1px solid var(--border-subtle);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
.mq-q-discipline {
font-size: 10px;
color: var(--text-dim);
margin-bottom: 8px;
font-weight: 500;
}
.mq-q-enunciado {
font-size: 12.5px;
line-height: 1.55;
color: var(--text);
margin: 0 0 14px;
max-width: 100%;
}
.mq-q-enunciado strong {
color: var(--gold-bright);
font-weight: 600;
}
.mq-alts {
display: flex;
flex-direction: column;
gap: 6px;
}
.mq-alt {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 12px;
border-radius: 10px;
background: var(--surface-2);
border: 1px solid var(--border-subtle);
font-size: 11.5px;
line-height: 1.4;
color: rgba(245, 246, 248, 0.85);
transition:
border-color 0.3s var(--ease),
background 0.3s var(--ease),
box-shadow 0.3s var(--ease),
transform 0.3s var(--ease);
position: relative;
}
.mq-alt__letter {
width: 22px;
height: 22px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.05);
color: var(--text-muted);
border: 1px solid var(--border);
transition: all 0.3s var(--ease);
}
.mq-alt.is-hover {
border-color: rgba(244, 122, 31, 0.45);
background: rgba(244, 122, 31, 0.06);
transform: translateX(2px);
}
.mq-alt.is-hover .mq-alt__letter {
background: rgba(244, 122, 31, 0.18);
color: var(--cta-hot);
border-color: rgba(244, 122, 31, 0.4);
}
.mq-alt.is-correct {
border-color: rgba(16, 185, 129, 0.55);
background: rgba(16, 185, 129, 0.1);
box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.15), 0 0 24px -8px rgba(16, 185, 129, 0.35);
animation: mq-success-flash 0.55s var(--ease);
}
.mq-alt.is-correct .mq-alt__letter {
background: var(--success);
color: #fff;
border-color: var(--success);
}
.mq-alt.is-wrong {
border-color: rgba(239, 68, 68, 0.4);
background: rgba(239, 68, 68, 0.06);
opacity: 0.55;
}
@keyframes mq-success-flash {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
40% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.15), 0 0 32px rgba(16, 185, 129, 0.4); }
100% { box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.15), 0 0 24px -8px rgba(16, 185, 129, 0.35); }
}
.mq-alt__check {
margin-left: auto;
width: 16px;
height: 16px;
color: var(--success);
opacity: 0;
transform: scale(0.5);
transition: all 0.35s var(--ease);
flex-shrink: 0;
}
.mq-alt.is-correct .mq-alt__check {
opacity: 1;
transform: scale(1);
}
.mq-confetti {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 10;
}
.mq-confetti i {
position: absolute;
width: 5px;
height: 5px;
border-radius: 1px;
opacity: 0;
}
.mq-confetti.is-burst i {
animation: mq-confetti-burst 0.9s var(--ease) forwards;
}
@keyframes mq-confetti-burst {
0% {
opacity: 1;
transform: translate(0, 0) rotate(0deg) scale(1);
}
100% {
opacity: 0;
transform: translate(var(--cx), var(--cy)) rotate(var(--cr)) scale(0.4);
}
}
.mq-phd {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 46%;
max-width: 280px;
background: linear-gradient(180deg, #161922 0%, #12141a 100%);
border-left: 1px solid rgba(244, 122, 31, 0.2);
box-shadow: -16px 0 40px -12px rgba(0, 0, 0, 0.55);
transform: translateX(105%);
transition: transform 0.55s var(--ease);
z-index: 8;
display: flex;
flex-direction: column;
padding: 14px;
}
.mq-phd.is-open {
transform: translateX(0);
}
.mq-phd__head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-subtle);
}
.mq-phd__avatar {
width: 32px;
height: 32px;
border-radius: 9px;
background: linear-gradient(135deg, var(--navy-700), var(--cta));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px -4px rgba(244, 122, 31, 0.5);
}
.mq-phd__avatar svg {
width: 16px;
height: 16px;
color: #fff;
}
.mq-phd__meta {
min-width: 0;
}
.mq-phd__name {
font-size: 12px;
font-weight: 700;
color: var(--text);
line-height: 1.2;
}
.mq-phd__role {
font-size: 10px;
color: var(--cta-hot);
font-weight: 500;
margin-top: 2px;
}
.mq-phd__body {
font-size: 11px;
line-height: 1.55;
color: rgba(245, 246, 248, 0.78);
flex: 1;
overflow: hidden;
}
.mq-phd__body p {
margin: 0 0 8px;
}
.mq-phd__body strong {
color: var(--gold-bright);
font-weight: 600;
}
.mq-phd__cursor {
display: inline-block;
width: 1.5px;
height: 12px;
background: var(--cta);
margin-left: 1px;
vertical-align: text-bottom;
animation: mq-blink 0.85s step-end infinite;
}
@keyframes mq-blink {
50% { opacity: 0; }
}
.mq-phd__tag {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: auto;
padding: 5px 8px;
border-radius: 6px;
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.2);
font-size: 9.5px;
font-weight: 600;
color: var(--success);
}
.mq-cursor {
position: absolute;
width: 18px;
height: 18px;
z-index: 15;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.mq-cursor.is-visible {
opacity: 1;
}
.mq-cursor svg {
width: 18px;
height: 18px;
color: #fff;
}
.mq-dash__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 14px;
}
.mq-dash__label {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 4px;
}
.mq-dash__title {
font-size: 18px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text);
margin: 0;
line-height: 1.15;
}
.mq-dash__period {
display: flex;
gap: 4px;
}
.mq-dash__period span {
font-size: 10px;
padding: 4px 8px;
border-radius: 6px;
color: var(--text-muted);
background: transparent;
border: 1px solid transparent;
}
.mq-dash__period span.is-on {
color: var(--text);
background: rgba(244, 122, 31, 0.12);
border-color: rgba(244, 122, 31, 0.25);
font-weight: 600;
}
.mq-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.mq-kpi {
background: var(--surface-2);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card);
padding: 12px 10px 10px;
position: relative;
overflow: visible;
min-width: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.mq-kpi::before {
content: "";
position: absolute;
top: 0;
left: 12px;
right: 12px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(244, 122, 31, 0.35), transparent);
}
.mq-kpi__icon {
width: 26px;
height: 26px;
border-radius: 7px;
background: rgba(244, 122, 31, 0.1);
border: 1px solid rgba(244, 122, 31, 0.15);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
color: var(--cta-hot);
}
.mq-kpi__icon svg {
width: 13px;
height: 13px;
}
.mq-kpi__value {
font-size: 17px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text);
font-variant-numeric: tabular-nums;
line-height: 1.15;
margin-bottom: 4px;
white-space: nowrap;
overflow: visible;
}
.mq-kpi__label {
font-size: 9.5px;
font-weight: 500;
color: var(--text-dim);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.mq-kpi__spark {
position: absolute;
right: 8px;
bottom: 8px;
width: 48px;
height: 20px;
opacity: 0.7;
}
.mq-dash-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 8px;
}
.mq-panel {
background: var(--surface-2);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card);
padding: 12px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.mq-panel__title {
font-size: 11px;
font-weight: 700;
color: var(--text);
margin: 0 0 2px;
}
.mq-panel__sub {
font-size: 9.5px;
color: var(--text-dim);
margin-bottom: 10px;
}
.mq-edital-bar {
height: 8px;
border-radius: 99px;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
margin-bottom: 8px;
}
.mq-edital-bar__fill {
height: 100%;
width: 0;
border-radius: 99px;
background: linear-gradient(90deg, var(--cta), var(--gold));
box-shadow: 0 0 12px rgba(244, 122, 31, 0.4);
transition: width 1.4s var(--ease);
}
.mq-screen.is-active .mq-edital-bar__fill {
width: var(--pct, 42%);
}
.mq-edital-meta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.mq-edital-meta strong {
color: var(--gold-bright);
font-weight: 700;
}
.mq-heat {
display: grid;
grid-template-columns: repeat(14, 1fr);
gap: 3px;
}
.mq-heat i {
aspect-ratio: 1;
border-radius: 2px;
background: rgba(255, 255, 255, 0.05);
}
.mq-heat i[data-l="1"] { background: rgba(244, 122, 31, 0.2); }
.mq-heat i[data-l="2"] { background: rgba(244, 122, 31, 0.4); }
.mq-heat i[data-l="3"] { background: rgba(244, 122, 31, 0.65); }
.mq-heat i[data-l="4"] { background: var(--cta); box-shadow: 0 0 6px rgba(244, 122, 31, 0.4); }
.mq-recent {
display: flex;
flex-direction: column;
gap: 5px;
}
.mq-recent__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 8px;
border-radius: 7px;
background: var(--surface-3);
border: 1px solid var(--border-subtle);
font-size: 10px;
}
.mq-recent__row span {
color: rgba(245, 246, 248, 0.7);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mq-chip {
font-size: 9px;
font-weight: 700;
padding: 2px 7px;
border-radius: 99px;
flex-shrink: 0;
}
.mq-chip--ok {
background: rgba(16, 185, 129, 0.12);
color: var(--success);
border: 1px solid rgba(16, 185, 129, 0.25);
}
.mq-chip--err {
background: rgba(239, 68, 68, 0.1);
color: var(--error);
border: 1px solid rgba(239, 68, 68, 0.22);
}
.mq-an__head {
margin-bottom: 14px;
}
.mq-an__title {
font-size: 16px;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 2px;
}
.mq-an__sub {
font-size: 10.5px;
color: var(--text-muted);
}
.mq-disciplines {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.mq-disc {
display: grid;
grid-template-columns: 110px 1fr 52px auto;
align-items: center;
gap: 8px;
}
.mq-disc__name {
font-size: 10.5px;
font-weight: 600;
color: rgba(245, 246, 248, 0.85);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mq-disc__track {
height: 7px;
border-radius: 99px;
background: rgba(255, 255, 255, 0.05);
overflow: hidden;
}
.mq-disc__fill {
height: 100%;
width: 0;
border-radius: 99px;
background: linear-gradient(90deg, var(--navy-500), var(--cta));
transition: width 1.2s var(--ease);
}
.mq-disc__fill.is-gold {
background: linear-gradient(90deg, var(--cta), var(--gold));
}
.mq-screen.is-active .mq-disc__fill {
width: var(--pct);
}
.mq-disc__pct {
font-size: 10.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text);
text-align: right;
}
.mq-status {
font-size: 9px;
font-weight: 700;
padding: 2px 7px;
border-radius: 99px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.mq-status--ok {
background: rgba(16, 185, 129, 0.12);
color: var(--success);
border: 1px solid rgba(16, 185, 129, 0.22);
}
.mq-status--focus {
background: rgba(244, 122, 31, 0.12);
color: var(--cta-hot);
border: 1px solid rgba(244, 122, 31, 0.25);
}
.mq-status--mid {
background: rgba(249, 178, 51, 0.1);
color: var(--gold-bright);
border: 1px solid rgba(249, 178, 51, 0.22);
}
.mq-an-bottom {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.mq-radar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 6px;
height: 88px;
padding: 8px 4px 0;
}
.mq-radar__col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
height: 100%;
justify-content: flex-end;
}
.mq-radar__bar {
width: 100%;
max-width: 28px;
border-radius: 4px 4px 2px 2px;
background: linear-gradient(180deg, var(--cta-hot), rgba(244, 122, 31, 0.25));
height: 0;
transition: height 1.1s var(--ease);
box-shadow: 0 0 12px -4px rgba(244, 122, 31, 0.5);
}
.mq-screen.is-active .mq-radar__bar {
height: var(--h);
}
.mq-radar__col span {
font-size: 8px;
color: var(--text-dim);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.mq-insight {
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.mq-insight__card {
padding: 8px 10px;
border-radius: 8px;
background: var(--surface-3);
border: 1px solid var(--border-subtle);
font-size: 10px;
color: var(--text-muted);
line-height: 1.4;
}
.mq-insight__card strong {
display: block;
color: var(--text);
font-size: 11px;
font-weight: 700;
margin-bottom: 2px;
}
.mq-dots {
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
z-index: 6;
display: flex;
gap: 6px;
padding: 5px 8px;
border-radius: 99px;
background: rgba(10, 17, 40, 0.7);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(8px);
}
.mq-dots button {
width: 7px;
height: 7px;
border-radius: 99px;
border: none;
padding: 0;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: all 0.35s var(--ease);
}
.mq-dots button.is-active {
width: 20px;
background: linear-gradient(90deg, var(--cta), var(--gold));
box-shadow: 0 0 10px rgba(244, 122, 31, 0.5);
}
.mq-float {
position: absolute;
z-index: 4;
border-radius: 14px;
background: linear-gradient(160deg, rgba(28, 32, 44, 0.96) 0%, rgba(18, 20, 26, 0.94) 100%);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: var(--shadow-float);
backdrop-filter: blur(16px) saturate(1.25);
-webkit-backdrop-filter: blur(16px) saturate(1.25);
padding: 12px 14px;
animation: mq-float-y 5s ease-in-out infinite;
max-width: 230px;
}
.mq-float::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
pointer-events: none;
}
.mq-float--phd {
top: 16%;
right: max(1%, calc(50% - 530px));
animation-delay: 0s;
}
.mq-float--kpi {
bottom: 14%;
left: max(1%, calc(50% - 510px));
animation-delay: -2.2s;
}
@keyframes mq-float-y {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-12px) scale(1.02); }
}
.mq-float__row {
display: flex;
align-items: center;
gap: 10px;
}
.mq-float__avatar {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--navy-700), var(--cta));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px -4px rgba(244, 122, 31, 0.45);
}
.mq-float__avatar svg {
width: 16px;
height: 16px;
color: #fff;
}
.mq-float__title {
font-size: 11.5px;
font-weight: 700;
color: var(--text);
line-height: 1.2;
}
.mq-float__sub {
font-size: 10.5px;
color: var(--text-muted);
line-height: 1.35;
margin-top: 2px;
}
.mq-float__kpi-value {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--success);
font-variant-numeric: tabular-nums;
line-height: 1;
margin-bottom: 4px;
}
.mq-float__kpi-label {
font-size: 11px;
color: var(--text-muted);
line-height: 1.3;
}
.mq-float__kpi-label strong {
color: var(--text);
font-weight: 600;
}
.mq-legend {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
max-width: 920px;
margin: 36px auto 0;
}
.mq-legend__item {
padding: 14px 16px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.mq-legend__item h3 {
font-size: 12px;
font-weight: 700;
color: var(--gold-bright);
margin: 0 0 4px;
letter-spacing: 0.02em;
}
.mq-legend__item p {
font-size: 11.5px;
color: var(--text-muted);
margin: 0;
line-height: 1.45;
}
@media (max-width: 900px) {
.mq-float {
display: none;
}
.mq-frame {
transform: none;
width: min(100%, 720px);
}
.mq-frame:hover {
transform: translateY(-3px);
}
.mq-app {
grid-template-columns: 148px 1fr;
height: 460px;
}
.mq-kpis {
grid-template-columns: repeat(2, 1fr);
}
.mq-legend {
grid-template-columns: 1fr;
}
.mq-disc {
grid-template-columns: 80px 1fr 40px auto;
}
}
@media (max-width: 560px) {
.mq-showcase {
padding: 28px 14px 48px;
}
.mq-stage {
min-height: 0;
padding: 20px 0 32px;
}
.mq-app {
display: block;
grid-template-columns: 1fr;
height: 480px;
min-height: 480px;
}
.mq-sidebar {
display: none !important;
}
.mq-content {
position: relative;
width: 100%;
height: calc(100% - 0px);
min-height: 430px;
}
.mq-phd {
width: min(90%, 260px);
}
.mq-dash-grid,
.mq-an-bottom {
grid-template-columns: 1fr;
}
.mq-kpis {
grid-template-columns: repeat(2, 1fr);
}
.mq-kpi__value {
font-size: 17px;
}
.mq-embed .mq-stage {
min-height: 0;
padding: 8px 0 16px;
}
.mq-embed .mq-frame {
width: 100%;
}
.mq-embed .mq-app {
height: 420px;
min-height: 420px;
}
}
@media (prefers-reduced-motion: reduce) {
.mq-frame,
.mq-frame:hover {
transform: none !important;
transition: none !important;
}
.mq-float {
animation: none !important;
}
.mq-screen {
transition: none !important;
}
.mq-sidebar__timer-dot {
animation: none !important;
}
.mq-confetti.is-burst i,
.mq-phd__cursor {
animation: none !important;
}
.mq-alt.is-correct {
animation: none !important;
}
.mq-edital-bar__fill,
.mq-disc__fill,
.mq-radar__bar {
transition: none !important;
}
.mq-frame::after {
animation: none;
opacity: 0;
}
.mq-stage[data-reduced="true"] .mq-screen:not([data-screen="questao"]) {
display: none !important;
}
.mq-stage[data-reduced="true"] .mq-screen[data-screen="questao"] {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
}
.mq-embed {
position: relative;
width: 100%;
max-width: 980px;
margin: 0 auto;
min-width: 0;
}
.mq-embed .mq-stage {
min-height: 560px;
padding: 24px 12px 40px;
min-width: 0;
max-width: 100%;
overflow: hidden;
}
.mq-embed .mq-frame {
width: 100%;
max-width: min(860px, 100%);
}
.mq-embed .mq-app {
height: 480px;
max-width: 100%;
}