:root {
  --content-width: 1180px;
  --paper: #fcfbf9;
  --surface: #edf6f6;
  --white: #fff;
  --ink: #0f2426;
  --ink-soft: #33484a;
  --muted: #5c7173;
  --line: #dce7e7;
  --cyan: #00b2ba;
  --cyan-dark: #00949b;
  --cyan-pale: #d6f2f3;
  --rose: #b2787c;
  --rose-pale: #f5e9ea;
  --section-radius: 22px;
  --sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --display: "Plus Jakarta Sans", "Figtree", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.6 var(--sans); }
a { color: inherit; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { margin: 0; font-family: var(--display); line-height: 1.08; letter-spacing: -0.04em; }
h1 { max-width: 760px; font-size: clamp(2.7rem, 6vw, 5.8rem); }
h2 { max-width: 780px; font-size: clamp(2.05rem, 4.4vw, 4.1rem); }
h3 { font-size: 1.28rem; }
p { color: var(--ink-soft); }

.site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(var(--content-width), calc(100% - 48px)); min-height: 72px; margin: auto; padding: 14px 0; background: rgba(252,251,249,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.brand, .top-nav, .hero-actions, .site-footer { display: flex; align-items: center; }
.brand { gap: 10px; font-weight: 700; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--ink); color: var(--paper); font: 800 .78rem var(--display); }
.top-nav { gap: 24px; color: var(--muted); font-weight: 600; }
.top-nav a, .site-footer a { text-decoration: none; }
.top-nav a:hover, .site-footer a:hover, .text-link:hover { color: var(--cyan-dark); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 10px; font-weight: 700; text-decoration: none; transition: background .18s, transform .18s; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 40px; padding: 0 14px; font-size: .9rem; }
.button-primary { border-color: var(--cyan); background: var(--cyan); color: var(--ink); }
.button-primary:hover { background: var(--cyan-dark); border-color: var(--cyan-dark); }
.button-secondary { background: var(--white); }
.button-secondary:hover { background: var(--surface); }
.section { width: min(var(--content-width), calc(100% - 48px)); margin-inline: auto; padding: clamp(72px, 7vw, 96px) 0; }
.eyebrow { margin: 0 0 18px; color: var(--cyan-dark); font-size: .76rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.section-heading { margin-bottom: 42px; }
.section-heading > p:last-child { max-width: 680px; margin: 22px 0 0; font-size: 1.12rem; }

.hero { width: 100%; min-height: calc(100svh - 72px); display: grid; align-items: center; padding: 80px max(16px, calc((100% - 1088px)/2)); border-bottom: 1px solid var(--line); }
.hero-copy { width: min(900px, 100%); }
.hero-lead { max-width: 690px; margin: 26px 0 0; font-size: clamp(1.15rem, 2vw, 1.42rem); }
.hero-actions { flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-meta { margin: 26px 0 0; color: var(--muted); font-size: .93rem; }
.hero-visual { position: relative; min-height: 470px; overflow: hidden; border-radius: 14px; background: var(--ink); }
.hero-visual p { position: absolute; top: 32px; left: 32px; margin: 0; color: var(--paper); font: 700 clamp(1.6rem, 4vw, 3.2rem)/1.05 var(--display); }
.hero-visual p strong { color: var(--cyan); }
.hero-orbit { position: absolute; border: 1px solid rgba(0,178,186,.6); border-radius: 50%; transform: rotate(-24deg); }
.orbit-one { width: 470px; height: 260px; top: 120px; left: -80px; }
.orbit-two { width: 400px; height: 190px; top: 190px; left: 20px; border-color: rgba(242,233,234,.45); }
.hero-note { position: absolute; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--cyan); color: var(--ink); font: 800 1.2rem var(--display); }
.note-one { top: 188px; left: 22%; } .note-two { top: 300px; left: 54%; background: var(--rose); color: var(--white); } .note-three { top: 126px; right: 16%; background: var(--cyan-pale); }
.hero-keyboard { position: absolute; right: -12px; bottom: 0; left: -12px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; height: 164px; padding: 12px; background: var(--cyan-pale); transform: rotate(-4deg); }
.hero-keyboard span { background: var(--white); border-radius: 0 0 5px 5px; } .hero-keyboard span:nth-child(2n) { background: var(--ink-soft); transform: translateY(-30px); }
.app-hero-visual { padding: 18px; background: var(--surface); } .app-window-bar { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .78rem; font-weight: 700; } .app-window-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); } .app-window-bar span:nth-child(2) { background: var(--cyan); } .app-window-bar span:nth-child(3) { background: var(--ink); } .app-window-bar strong { margin-left: 8px; } .app-hero-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 28px; } .app-hero-controls span { padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); color: var(--muted); font-size: .72rem; font-weight: 700; } .app-hero-title { display: grid; gap: 9px; margin-top: 28px; } .app-hero-title small { color: var(--cyan-dark); font-weight: 700; } .app-hero-title strong { color: var(--ink); font: 800 1.6rem var(--display); } .app-score { position: relative; display: flex; align-items: center; gap: 14px; height: 74px; margin-top: 22px; padding: 0 20px; border-block: 1px solid var(--line); } .app-score::before, .app-score::after { position: absolute; right: 10px; left: 10px; height: 1px; background: var(--line); content: ""; } .app-score::before { top: 24px; } .app-score::after { bottom: 24px; } .app-score i, .app-score b { position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); } .app-score i:nth-child(2n) { transform: translateY(-13px); background: var(--cyan-dark); } .app-score b { width: 2px; height: 32px; border-radius: 0; background: var(--rose); } .app-hero-chords { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 16px; } .app-hero-chords span { padding: 12px 5px; border-radius: 7px; background: var(--white); color: var(--ink); font-weight: 800; text-align: center; } .app-hero-chords span:nth-child(2) { background: var(--cyan-pale); } .app-hero-chords span:nth-child(3) { background: var(--rose-pale); } .app-hero-status { display: flex; justify-content: space-between; margin-top: 18px; color: var(--cyan-dark); font-size: .74rem; font-weight: 700; } .app-hero-visual > p { top: auto; right: 20px; bottom: 18px; left: auto; color: var(--ink); font-size: 1.18rem; text-align: right; } .app-hero-visual > p strong { color: var(--cyan-dark); }

.results, .dark-section, .demo-section, .rhythm-section, .app-section, .level-requirements, .offers-section, .guarantees-section { width: min(1280px, calc(100% - 48px)); margin-inline: auto; padding-inline: clamp(24px, 3.5vw, 56px); }
.results { border-radius: var(--section-radius); background: var(--surface); }
.results + .dark-section { margin-top: 28px; }
.result-grid, .levels-grid, .offers-grid, .guarantees-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.result-grid article, .level-card, .offer-card, .guarantees-grid article, .requirement-card { border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.result-grid article { min-height: 0; padding: 24px; } .result-grid span, .level-number { color: var(--cyan-dark); font-weight: 700; } .result-grid h3 { margin-top: 22px; } .result-grid p { margin-bottom: 0; font-size: .96rem; }
.dark-section { background: var(--ink); } .dark-inner { width: min(960px, 100%); margin-inline: auto; } .dark-inner h2, .dark-inner p { color: var(--paper); } .dark-inner p:not(.eyebrow) { max-width: 720px; color: rgba(252,251,249,.76); font-size: 1.1rem; }
.principles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; } .principles button, .principles span { padding: 8px 12px; border: 1px solid rgba(214,242,243,.45); border-radius: 999px; color: var(--cyan-pale); background: transparent; font: 600 .9rem var(--sans); cursor: pointer; } .principles button:hover { border-color: var(--cyan); background: rgba(0,178,186,.12); }
.level-card { min-height: 310px; padding: 26px; } .level-card.level-one { border-top: 4px solid var(--cyan); } .level-card.level-two { border-top: 4px solid var(--cyan-dark); } .level-card.level-three { border-top: 4px solid var(--rose); }
.level-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .level-tag { color: var(--muted); font-size: .78rem; font-weight: 700; } .level-card h3 { margin-top: 64px; } .level-card p { min-height: 76px; } code { display: inline-block; padding: 9px 12px; border-radius: 8px; background: var(--surface); color: var(--ink); font: 600 .95rem var(--sans); }
.voicing-note { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 20px; padding: 18px 20px; border-radius: 10px; background: var(--cyan-pale); color: var(--ink-soft); font-size: .92rem; } .voicing-note strong { color: var(--ink); } .voicing-note button, .voicing-note span { border: 0; padding: 0; color: var(--cyan-dark); background: transparent; font: 600 .92rem var(--sans); text-align: left; text-decoration: underline; text-decoration-color: rgba(0,148,155,.35); text-underline-offset: 3px; cursor: pointer; } .voicing-note button::before, .voicing-note span::before { content: "✓"; margin-right: 6px; text-decoration: none; }
.demo-section { background: var(--surface); }
.video-placeholder { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); } .video-screen { min-height: 420px; display: grid; place-items: center; align-content: center; gap: 10px; border-radius: 10px; background: var(--ink); color: var(--paper); text-align: center; } .video-screen span { font: 700 1.1rem var(--display); } .video-screen small { color: var(--cyan-pale); } .video-play { display: grid; place-items: center; width: 72px; height: 72px; padding-left: 4px; border-radius: 50%; background: var(--cyan); color: var(--ink); } .media-caption, .app-footnote, .final-note { margin: 12px 0 0; color: var(--muted); font-size: .85rem; text-align: center; }
.split-section, .rhythm-section { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } .split-section p, .rhythm-copy > p:not(.eyebrow) { max-width: 570px; font-size: 1.1rem; } .text-link { display: inline-block; margin-top: 18px; color: var(--cyan-dark); font-weight: 700; text-decoration: none; }
.support-list { display: grid; gap: 0; } .support-list div { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); } .support-list strong { color: var(--cyan-dark); } .support-list p { margin: 0; font-weight: 600; }
.dark-section, .demo-section, .rhythm-section, .app-section, .level-requirements, .offers-section, .guarantees-section { border-radius: var(--section-radius); }
.dark-section { overflow: hidden; }
.demo-section, .app-section, .rhythm-section, .level-requirements, .offers-section, .guarantees-section { margin-top: 24px; }
.rhythm-section { align-items: start; padding-block: 72px; background: var(--rose-pale); } .rhythm-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; } .rhythm-pills button { padding: 8px 12px; border: 1px solid rgba(178,120,124,.35); border-radius: 999px; color: var(--rose); background: transparent; font: 600 .9rem var(--sans); cursor: pointer; } .rhythm-pills button:hover, .rhythm-pills button.is-active { background: var(--white); border-color: var(--rose); box-shadow: 0 0 0 2px rgba(178,120,124,.16); } .small-note { font-size: .9rem !important; color: var(--muted); }
.rhythm-visual { min-height: 300px; padding: 24px; border-radius: 14px; background: var(--white); } .rhythm-header, .rhythm-legend { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .8rem; font-weight: 700; } .rhythm-header { padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--ink-soft); } .rhythm-grid { display: grid; gap: 9px; margin: 28px 0; } .rhythm-row { display: grid; grid-template-columns: 42px repeat(8, minmax(18px, 1fr)); gap: 5px; align-items: center; } .rhythm-row strong { color: var(--ink-soft); font-size: .75rem; } .rhythm-row i { display: block; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 4px; background: var(--white); } .rhythm-right i:nth-child(2), .rhythm-right i:nth-child(4), .rhythm-right i:nth-child(6), .rhythm-right i:nth-child(8) { background: var(--cyan-pale); border-color: var(--cyan); } .rhythm-left i:nth-child(2), .rhythm-left i:nth-child(5), .rhythm-left i:nth-child(8) { background: var(--rose-pale); border-color: var(--rose); } .rhythm-legend { align-items: center; justify-content: flex-start; font-weight: 500; } .rhythm-legend span { display: inline-flex; align-items: center; gap: 6px; } .rhythm-legend b { width: 8px; height: 8px; border-radius: 2px; background: var(--cyan); } .rhythm-legend span:nth-child(2) b { background: var(--rose); } .rhythm-next { margin-left: auto; color: var(--cyan-dark); }
.rhythm-real-app { align-self: start; padding: 18px; } .rhythm-iframe-wrap { position: relative; overflow: hidden; height: 440px; margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); } .rhythm-real-app iframe { display: block; width: 100%; height: 440px; border: 0; pointer-events: none; } .rhythm-visual-only { display: none; } .rhythm-embed-note { margin: 10px 0 0; color: var(--muted); font-size: .78rem; }
.rhythm-app-mock { margin-top: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #f8fbfb; } .rhythm-score { padding: 16px 14px 12px; border-bottom: 1px solid var(--line); background: var(--white); } .rhythm-staff + .rhythm-staff { margin-top: 12px; } .rhythm-staff h4 { margin: 0 0 6px; color: var(--ink); font: 800 1rem var(--display); } .staff-line { position: relative; display: flex; align-items: center; justify-content: space-around; height: 52px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(to bottom, transparent 48%, #9aabad 49%, #9aabad 51%, transparent 52%); } .staff-line::before, .staff-line::after { position: absolute; top: 8px; bottom: 8px; width: 2px; background: #9aabad; content: ""; } .staff-line::before { left: 10px; } .staff-line::after { right: 10px; } .staff-line i { position: relative; z-index: 1; display: block; width: 15px; height: 10px; border-radius: 50%; background: var(--cyan-dark); transform: rotate(-12deg); } .staff-line i::before { position: absolute; bottom: 5px; left: 11px; width: 2px; height: 21px; background: currentColor; content: ""; } .staff-line i.beam::after { position: absolute; top: -8px; left: 0; width: 25px; height: 4px; border-radius: 4px; background: currentColor; content: ""; } .staff-line i.rest { width: 10px; height: 14px; border-radius: 0; background: transparent; border-bottom: 5px solid var(--muted); transform: skew(-18deg); } .rhythm-staff.left .staff-line i { background: var(--rose); } .rhythm-settings { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; background: var(--white); } .rhythm-settings span { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-soft); font-size: .7rem; font-weight: 700; } .rhythm-settings button, .stage-controls button { border: 1px solid var(--ink-soft); border-radius: 7px; background: var(--white); color: var(--ink); font: 600 .72rem var(--sans); } .rhythm-stage { padding: 12px 14px; background: var(--cyan-pale); } .stage-label { margin-bottom: 7px; color: var(--muted); font-size: .7rem; } .stage-controls { display: grid; grid-template-columns: 32px 1fr 32px; gap: 6px; align-items: center; } .stage-controls strong { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); font-size: .76rem; } .stage-controls label { display: none; } .rhythm-grid-mock { padding: 14px; background: var(--white); } .grid-row { display: grid; grid-template-columns: 92px repeat(var(--rhythm-cols, 8), minmax(10px, 1fr)); gap: 4px; align-items: center; margin-top: 6px; } .grid-row strong { color: var(--muted); font-size: .68rem; } .grid-row i, .grid-row b { display: grid; place-items: center; min-height: 27px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--cyan-dark); font-size: .7rem; font-style: normal; } .grid-row i.on { background: var(--cyan-pale); border-left: 3px solid var(--ink); } .grid-row i.left-on { background: var(--rose-pale); border-left-color: var(--ink); } .beat-row { margin-top: 0; } .beat-row span { color: var(--ink); font: 700 .72rem var(--display); text-align: center; } .syllable-row b { background: var(--cyan-pale); border-top: 3px solid var(--ink); color: var(--ink); } .syllable-row span { color: var(--muted); font-size: .68rem; text-align: center; }
.rhythm-app-mock[data-division="12"] .rhythm-grid-mock { background: #f4fbfb; } .rhythm-app-mock[data-division="12"] .syllable-row b { border-radius: 999px; } .rhythm-app-mock[data-division="16"] .rhythm-grid-mock { background: #fbf7f7; } .rhythm-app-mock[data-division="16"] .grid-row i.on { background: #d9f1f2; }
.staff-line .note-group { position: relative; display: flex; align-items: center; justify-content: space-between; width: 19%; height: 100%; } .staff-line .note-group::before { position: absolute; top: 9px; right: 2px; left: 2px; height: 4px; border-radius: 4px; background: var(--cyan-dark); content: ""; } .staff-line .note-group i { flex: 0 0 auto; } .rhythm-staff.left .staff-line .note-group::before { background: var(--rose); }
.app-section { background: var(--surface); } .app-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; } .app-mock { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--white); } .app-main { padding: 18px; } .mock-top { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .83rem; font-weight: 700; } .mock-top span:last-child { color: var(--cyan-dark); } .mock-progression { padding: 34px 22px 24px; } .mock-progression small { color: var(--cyan-dark); font-weight: 700; } .mock-progression strong { display: block; margin-top: 8px; font: 700 1.45rem var(--display); } .mock-chords { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 26px; } .mock-chords b { padding: 20px 8px; border-radius: 8px; background: var(--cyan-pale); text-align: center; } .mock-actions { display: flex; justify-content: space-between; margin-top: 16px; color: var(--cyan-dark); font-size: .8rem; font-weight: 700; } .app-mock > p { margin: 12px 18px 18px; color: var(--muted); font-size: .8rem; } .app-side { display: grid; gap: 16px; } .app-small { padding: 18px; } .transforms { display: grid; gap: 8px; margin-top: 24px; } .transforms button { padding: 10px 12px; border: 0; border-radius: 8px; background: var(--surface); color: var(--ink-soft); font: 600 1rem var(--sans); text-align: left; cursor: pointer; } .transforms button:nth-child(2) { background: var(--cyan-pale); } .transforms button:nth-child(3) { background: var(--rose-pale); } .transforms button:hover, .transforms button.is-active { outline: 2px solid var(--cyan-dark); outline-offset: 1px; } .progress-track { height: 8px; margin: 28px 0 12px; border-radius: 99px; background: var(--line); } .progress-track i { display: block; width: 64%; height: 100%; border-radius: inherit; background: var(--cyan); } .app-small strong { font-family: var(--display); }
.mock-score { display: flex; align-items: center; gap: 7px; height: 42px; margin-top: 22px; padding: 0 10px; border-block: 1px solid var(--line); } .mock-score i, .mock-score b { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); } .mock-score b { width: 2px; height: 27px; border-radius: 0; background: var(--cyan); } .mock-actions { display: flex; justify-content: space-between; margin-top: 16px; color: var(--cyan-dark); font-size: .8rem; font-weight: 700; }
.app-capture-card { padding: 12px; } .app-real-capture { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; } .app-capture-card figcaption { padding: 12px 6px 4px; color: var(--muted); font-size: .8rem; }
.calendar-section { text-align: center; } .calendar-section .section-heading > p:last-child { margin-right: auto; margin-left: auto; } .calendar-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-block: 1px solid var(--line); } .calendar-grid div { padding: 26px 14px; border-right: 1px solid var(--line); } .calendar-grid div:last-child { border-right: 0; } .calendar-grid strong, .calendar-grid span { display: block; } .calendar-grid strong { font-family: var(--display); } .calendar-grid span { margin-top: 6px; color: var(--muted); font-size: .9rem; } .practice-line { margin-top: 28px; }
.level-requirements { background: var(--surface); } .requirement-card { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: clamp(26px, 5vw, 54px); background: var(--cyan-pale); } .requirement-card ul { display: grid; gap: 10px; align-content: center; padding: 0; margin: 0; list-style: none; } .requirement-card li::before { content: "✓"; margin-right: 10px; color: var(--cyan-dark); font-weight: 700; } .requirement-card > p { grid-column: 1 / -1; max-width: 920px; margin: 0; }
.offers-section { background: var(--cyan-pale); } .offers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } .offer-card { position: relative; display: flex; flex-direction: column; padding: 30px; } .offer-card.featured { border: 2px solid var(--cyan); } .offer-badge { align-self: flex-start; padding: 6px 10px; border-radius: 999px; background: var(--cyan-pale); color: var(--cyan-dark); font-size: .78rem; font-weight: 700; } .offer-badge.rose { background: var(--rose-pale); color: var(--rose); } .offer-card h3 { margin-top: 24px; font-size: 1.65rem; } .offer-card h3 em { color: var(--cyan-dark); font-style: normal; } .offer-description { min-height: 76px; } .offer-price { display: flex; align-items: baseline; gap: 8px; padding: 20px 0; border-block: 1px solid var(--line); } .offer-price strong { font: 800 clamp(2.4rem, 5vw, 4rem) var(--display); letter-spacing: -.06em; } .offer-price span { color: var(--muted); } .installments { min-height: 68px; font-size: .9rem; } .offer-card ul { display: grid; gap: 10px; padding: 0; margin: 14px 0 26px; list-style: none; } .offer-card li::before { content: "✓"; margin-right: 10px; color: var(--cyan-dark); font-weight: 700; } .annual-bonus { margin: 0 0 24px; padding: 16px 18px; border: 1px solid rgba(0, 148, 155, .28); border-radius: 12px; background: var(--surface); } .annual-bonus span { display: inline-block; margin-bottom: 7px; color: var(--cyan-dark); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .annual-bonus strong { display: block; font-family: var(--display); } .annual-bonus p { margin: 7px 0 0; font-size: .88rem; line-height: 1.45; } .offer-card .button { width: 100%; margin-top: auto; }
.guarantees-section { background: var(--rose-pale); } .guarantees-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .guarantees-grid article { position: relative; min-height: 300px; padding: 34px; overflow: hidden; } .guarantee-card { border-top: 5px solid var(--rose) !important; } .guarantee-result { border-top-color: var(--cyan-dark) !important; } .guarantee-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .guarantee-number { display: block; color: var(--rose); font: 800 clamp(2.1rem, 4vw, 3.4rem)/1 var(--display); letter-spacing: -.06em; } .guarantee-result .guarantee-number { color: var(--cyan-dark); } .guarantees-grid h3 { margin-top: 42px; font-size: 1.45rem; } .guarantees-grid p { max-width: 460px; } .guarantees-grid small { display: block; margin-top: 18px; color: var(--muted); font-size: .82rem; } .guarantees-intro { max-width: 760px; margin: 0 auto 42px; text-align: center; } .guarantees-intro h2 { max-width: 660px; margin-inline: auto; } .guarantee-icon { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; background: var(--rose-pale); color: var(--rose); font: 800 1.3rem var(--display); } .guarantee-result .guarantee-icon { background: var(--cyan-pale); color: var(--cyan-dark); }
.faq { width: min(860px, calc(100% - 32px)); } .faq-list { display: grid; gap: 10px; } details { padding: 0 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); } summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; cursor: pointer; font-weight: 700; list-style: none; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; color: var(--cyan-dark); font-size: 1.5rem; } details[open] summary::after { content: "−"; } details p { margin: 0 0 20px; }
.final-cta { width: min(780px, calc(100% - 32px)); margin-block: 28px; padding: clamp(48px, 6vw, 72px) clamp(24px, 5vw, 64px); border-radius: var(--section-radius); background: var(--surface); text-align: center; } .final-cta h2, .final-cta > div > p { margin-right: auto; margin-left: auto; } .final-cta > div > p:not(.eyebrow):not(.final-note) { max-width: 620px; font-size: 1.15rem; } .final-note { margin-top: 18px !important; }
.video-modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(15,36,38,.72); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; } .video-modal.is-open { opacity: 1; visibility: visible; } .video-modal-card { position: relative; width: min(620px, 100%); padding: 32px; border-radius: 14px; background: var(--white); transform: translateY(12px); transition: transform .2s; } .video-modal.is-open .video-modal-card { transform: translateY(0); } .video-modal-card h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); } .video-modal-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 1.5rem; cursor: pointer; } .video-modal-screen { display: grid; place-items: center; gap: 8px; min-height: 230px; margin: 24px 0; border-radius: 10px; background: var(--ink); color: var(--paper); text-align: center; } .video-modal-screen span { font: 700 1.05rem var(--display); } .video-modal-screen small { color: var(--cyan-pale); }
.site-footer { justify-content: space-between; width: min(var(--content-width), calc(100% - 48px)); min-height: 84px; margin-inline: auto; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
[data-reveal] { opacity: 0; transform: translateY(24px) scale(.985); will-change: opacity, transform; transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } [data-reveal].is-visible { opacity: 1; transform: translateY(0) scale(1); } .result-grid article:nth-child(2), .levels-grid .level-card:nth-child(2), .guarantees-grid article:nth-child(2), .offers-grid .offer-card:nth-child(2), .app-side .app-mock:nth-child(2) { transition-delay: .1s; } .result-grid article:nth-child(3), .levels-grid .level-card:nth-child(3) { transition-delay: .18s; }
@media (max-width: 820px) { .top-nav { display: none; } .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 72px; } .hero-visual { min-height: 360px; } .result-grid, .levels-grid { grid-template-columns: repeat(2, 1fr); } .split-section, .rhythm-section, .app-grid { grid-template-columns: 1fr; gap: 42px; } .app-side { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .site-header { min-height: 64px; } .brand span:last-child { display: none; } .button-small { width: auto; } .section { padding: 70px 0; } .results, .dark-section, .demo-section, .rhythm-section, .app-section, .level-requirements, .offers-section, .guarantees-section { padding-inline: 18px; } .results + .dark-section, .demo-section, .app-section, .rhythm-section, .level-requirements, .offers-section, .guarantees-section { margin-top: 16px; } .dark-section, .demo-section, .rhythm-section, .app-section, .level-requirements, .offers-section, .guarantees-section, .results, .final-cta { border-radius: 16px; } .final-cta { margin-block: 16px; padding: 48px 24px; } .hero { padding-inline: 16px; } .hero-actions .button { width: 100%; } .result-grid, .levels-grid, .offers-grid, .guarantees-grid, .requirement-card { grid-template-columns: 1fr; } .level-card h3 { margin-top: 40px; } .offer-description, .installments { min-height: auto; } .calendar-grid { grid-template-columns: repeat(2, 1fr); } .calendar-grid div:nth-child(2) { border-right: 0; } .calendar-grid div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .app-side { grid-template-columns: 1fr; } .requirement-card > p { grid-column: auto; } .rhythm-visual { padding: 18px 12px; } .rhythm-iframe-wrap, .rhythm-real-app iframe { height: 520px; } .rhythm-row { grid-template-columns: 34px repeat(8, minmax(15px, 1fr)); gap: 4px; } .rhythm-next { display: none !important; } .site-footer { display: grid; gap: 8px; padding: 24px 0; } }
@media (max-width: 600px) { .calendar-grid div:nth-child(even) { border-right: 0; } .calendar-grid div:nth-child(-n+4) { border-bottom: 1px solid var(--line); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

.hero-deadline { margin: 10px 0 0; color: var(--rose); font-weight: 700; }
.teacher-section { width: min(1280px, calc(100% - 48px)); margin: 24px auto 0; padding: clamp(40px, 5vw, 64px) clamp(24px, 3.5vw, 56px); border: 1px solid var(--line); border-radius: var(--section-radius); background: var(--white); }
.teacher-card { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.teacher-photo { margin: 0; overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 3; background: var(--rose-pale); }
.teacher-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; }
.teacher-card .eyebrow { margin-top: 0; }
.teacher-card h2 { max-width: 700px; margin-bottom: 24px; font-size: clamp(1.8rem, 3.4vw, 3rem); }
.teacher-card p:not(.eyebrow) { max-width: 610px; margin: 8px 0; font-size: 1.04rem; }
.offer-annual { border: 2px solid var(--rose); }
.offer-annual .annual-bonus { margin: 4px 0 22px; padding: 20px; border: 2px solid var(--rose); border-radius: 14px; background: var(--rose-pale); box-shadow: 0 10px 26px rgba(178, 120, 124, .12); }
.offer-annual .annual-bonus span { color: var(--rose); }
.offer-annual .annual-bonus strong { font-size: 1.04rem; line-height: 1.25; }
.mobile-buy { display: none; }
@media (max-width: 820px) { .teacher-card { grid-template-columns: 1fr; gap: 8px; } }
@media (max-width: 600px) { body { padding-bottom: 84px; } .final-cta .button { display: none; } .teacher-section { width: min(1280px, calc(100% - 32px)); margin-top: 16px; padding: 32px 24px; border-radius: 16px; } .mobile-buy { position: fixed; right: 16px; bottom: 14px; left: 16px; z-index: 25; display: flex; align-items: center; justify-content: center; min-height: 54px; border-radius: 12px; background: var(--cyan); box-shadow: 0 10px 28px rgba(15,36,38,.24); color: var(--ink); font-weight: 800; text-decoration: none; } }