@font-face { font-family: "Martian Grotesk"; src: url("../assets/fonts/martian-grotesk.woff2") format("woff2"); font-weight: 100 1000; font-stretch: 75% 200%; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../assets/fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #07101f;
  --ink-2: #0b1a33;
  --paper: #f1eadc;
  --paper-2: #ded4c2;
  --white: #f7f4ec;
  --blue: #1c54d8;
  --cyan: #1cc7df;
  --violet: #7354da;
  --coral: #ff684f;
  --green: #28b987;
  --line-dark: rgba(7, 16, 31, .18);
  --line-light: rgba(237, 244, 255, .16);
  --display: "Martian Grotesk", sans-serif;
  --body: "Hanken Grotesk", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
.shell { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }

.reading-line { position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.06); }
.reading-line i { display: block; width: 0; height: 100%; background: var(--coral); }
.site-header { position: fixed; z-index: 50; inset: 0 0 auto; color: var(--white); transition: background .25s, border-color .25s; }
.site-header.scrolled { border-bottom: 1px solid var(--line-light); background: rgba(7,16,31,.92); backdrop-filter: blur(14px); }
.nav { height: 78px; display: flex; align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand img { width: 44px; height: 44px; object-fit: contain; }
.brand span { display: grid; line-height: 1.05; }
.brand b { font-family: var(--display); font-size: 16px; font-stretch: 115%; letter-spacing: -.04em; }
.brand small { margin-top: 5px; color: #9aa8be; font-size: 10px; letter-spacing: .04em; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a { color: #aeb9ca; font-size: 13px; font-weight: 650; }
.nav-links a:hover { color: white; }
.nav-action { display: inline-flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.25); padding: 10px 15px; font-family: var(--display); font-size: 11px; font-weight: 650; }
.nav-action:hover { color: var(--ink); background: var(--white); }
.menu-button { display: none; width: 42px; height: 42px; margin-left: auto; border: 1px solid rgba(255,255,255,.25); background: transparent; }
.lang-switch { flex: none; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: var(--white); font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .04em; cursor: pointer; }
.lang-switch:hover { color: var(--ink); background: var(--white); }
.nav-links .lang-switch { display: none; }

.hero { position: relative; min-height: 990px; padding-top: 148px; color: var(--white); }
.hero::before { content: ""; position: absolute; z-index: -2; top: 0; left: calc((100vw - 100%)/-2); width: 100vw; height: 850px; background: var(--ink); }
.hero-copy { position: relative; z-index: 3; width: min(730px, 64%); }
.hero h1 { margin: 0; font-family: var(--display); font-size: clamp(54px, 7vw, 104px); font-weight: 760; font-stretch: 86%; line-height: .93; letter-spacing: -.075em; }
.hero h1 em, .closing h2 em { color: var(--cyan); font-style: normal; }
.hero-copy > p { width: min(610px, 92%); margin: 30px 0 0; color: #b6c2d4; font-size: 19px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 36px; }
.main-button { display: inline-flex; align-items: stretch; min-height: 58px; color: var(--ink); background: var(--cyan); font-family: var(--display); font-size: 12px; font-weight: 700; }
.main-button span { display: grid; place-items: center; padding: 0 24px; }
.main-button i { display: grid; place-items: center; width: 58px; }
.main-button:hover { background: white; }
.quiet-link { display: inline-flex; align-items: center; gap: 10px; color: #b6c2d4; font-size: 13px; font-weight: 700; }
.quiet-link i { color: var(--coral); }
.hero-image { position: absolute; z-index: 1; right: 0; top: 185px; width: 65%; height: 600px; margin: 0; overflow: hidden; }
.hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, transparent 28%), linear-gradient(0deg, rgba(7,16,31,.3), transparent 45%); }
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-facts { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); color: var(--ink); background: var(--paper); }
.hero-facts div { min-height: 138px; border-right: 1px solid var(--line-dark); padding: 28px 25px; }
.hero-facts div:last-child { border: 0; }
.hero-facts b { display: block; font-family: var(--display); font-size: 25px; font-stretch: 90%; letter-spacing: -.05em; }
.hero-facts span { display: block; margin-top: 8px; color: #59616d; font-size: 12px; }

.score-section, .movements, .faq-section { padding-block: 88px; }
.section-title { display: grid; grid-template-columns: 1fr; align-items: start; margin-bottom: 52px; }
.section-title h2 { max-width: 850px; margin: 0; font-family: var(--display); font-size: clamp(44px, 5vw, 74px); font-weight: 680; font-stretch: 86%; line-height: 1.02; letter-spacing: -.065em; }
.section-title p { max-width: 600px; margin: 18px 0 0; color: #646873; font-size: 16px; }
.section-title.light { color: var(--white); }
.section-title.light p { color: #a9b6ca; }
.score-path { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 0; }
.score-step { position: relative; min-height: 190px; border: 1px solid var(--line-dark); padding: 30px 30px 28px 96px; background: rgba(255,255,255,.38); }
.step-symbol { position: absolute; top: 30px; left: 28px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--paper); background: var(--ink); }
.score-step h3 { margin: 0 0 10px; font-family: var(--display); font-size: 22px; font-stretch: 90%; letter-spacing: -.04em; }
.score-step p { margin: 0; color: #626772; font-size: 14px; }

.modes-section, .result-section { padding-block: 96px; color: var(--white); background: var(--ink); }
.modes-layout { display: grid; grid-template-columns: .8fr 1.2fr; column-gap: 70px; }
.modes-layout .section-title { grid-column: 1; grid-template-columns: 1fr; }
.mode-selector { grid-column: 1; align-self: end; border-top: 1px solid var(--line-light); }
.mode-selector button { width: 100%; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--line-light); padding: 20px 0; color: #8492a9; text-align: left; background: transparent; cursor: pointer; }
.mode-selector button span { font-family: var(--display); font-size: 9px; }
.mode-selector button b { font-family: var(--display); font-size: 17px; font-stretch: 90%; }
.mode-selector button small { font-size: 11px; }
.mode-selector button.active { color: var(--white); }
.mode-selector button.active span { color: var(--coral); }
.mode-stage { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-rows: auto 1fr; min-height: 720px; }
.mode-stage-copy { padding: 0 0 45px 50px; }
.mode-stage-copy h3 { max-width: 650px; margin: 0 0 16px; font-family: var(--display); font-size: clamp(37px, 4.5vw, 62px); font-weight: 650; font-stretch: 86%; line-height: 1.03; letter-spacing: -.06em; }
.mode-stage-copy > p { max-width: 590px; margin: 0; color: #a7b4c8; font-size: 15px; }
.mode-detail { display: flex; align-items: center; gap: 14px; max-width: 510px; margin-top: 25px; }
.mode-detail > i { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); color: var(--cyan); }
.mode-detail span { display: grid; }
.mode-detail b { font-size: 13px; }.mode-detail small { color: #7f8ca3; font-size: 11px; }
.falling-score { position: relative; min-height: 430px; overflow: hidden; border-top: 1px solid var(--line-light); background: repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),rgba(255,255,255,.055) calc(12.5% - 1px),rgba(255,255,255,.055) 12.5%); }
.fall-note { position: absolute; top: -150px; width: 7%; height: 150px; background: var(--cyan); animation: fall 4s linear infinite; }
.fall-note.n1{left:9%;animation-delay:-3.3s}.fall-note.n2{left:25%;height:90px;background:var(--violet);animation-delay:-1.5s}.fall-note.n3{left:43%;height:190px;animation-delay:-2.2s}.fall-note.n4{left:57%;height:110px;background:var(--green);animation-delay:-.6s}.fall-note.n5{left:72%;height:130px;background:var(--violet);animation-delay:-3s}.fall-note.n6{left:87%;height:85px;animation-delay:-1.8s}
@keyframes fall { to { transform: translateY(570px); } }
.wait-message { position: absolute; z-index: 5; left: 50%; top: 42%; display: none; transform: translate(-50%,-50%); border: 1px solid var(--cyan); padding: 10px 14px; color: var(--white); background: rgba(7,16,31,.9); font-size: 11px; }
.mode-stage[data-mode="practice"] .wait-message { display: flex; gap: 8px; }.mode-stage[data-mode="practice"] .fall-note { animation-duration: 6s; }.mode-stage[data-mode="perform"] .fall-note { animation-duration: 2.7s; }
.stage-keys { position: absolute; inset: auto 0 0; display: flex; height: 92px; background: #030711; }
.stage-keys i:not(.black) { flex: 1; border-right: 1px solid #737b88; background: linear-gradient(90deg,#c9ccd0,#faf7ec); }
.stage-keys i.black { position: relative; z-index: 2; flex: 0 0 8%; height: 62%; margin: 0 -4%; background: #080b12; }

.movements .section-title { margin-bottom: 58px; }
.movement { position: relative; display: grid; min-height: 610px; margin-bottom: 56px; }
.movement:last-child { margin-bottom: 0; }
.movement-copy h3 { margin: 0 0 24px; font-family: var(--display); font-size: clamp(45px, 5vw, 72px); font-weight: 670; font-stretch: 83%; line-height: .98; letter-spacing: -.07em; }
.movement-copy p { max-width: 500px; margin: 0; color: inherit; font-size: 16px; }
.movement-copy ul { display: grid; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 12px; }
.movement-copy li::before { content: "—"; margin-right: 10px; color: var(--coral); }
.movement-dark { grid-template-columns: .75fr 1.25fr; color: var(--white); background: var(--ink-2); }
.movement-dark .movement-copy { align-self: center; padding: 70px; }.movement-dark .movement-copy p { color: #aeb9cc; }.movement-dark .movement-copy li { color: #8795aa; }
.waterfall-window { position: relative; overflow: hidden; min-height: 610px; background: radial-gradient(circle at 55% 100%,rgba(28,199,223,.25),transparent 42%),#050b17; }
.perspective-grid { position: absolute; inset: 0; transform: perspective(700px) rotateX(55deg) scale(1.4); transform-origin: bottom; background-image: linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px); background-size: 12.5% 35px; }
.wf { position: absolute; top: -20%; width: 8%; height: 57%; background: var(--cyan); transform: rotate(5deg); }.wf.a{left:12%;top:-4%}.wf.b{left:31%;height:72%;background:var(--violet)}.wf.c{left:50%;top:9%;height:45%}.wf.d{left:68%;top:-10%;height:66%;background:var(--green)}.wf.e{left:84%;top:18%;height:40%;background:var(--violet)}
.keyboard-edge { position: absolute; inset: auto 0 0; display: flex; height: 105px; }.keyboard-edge i { flex:1;border-right:2px solid #88909c;background:linear-gradient(90deg,#d9dbe0,#fffdf5) }
.movement-paper { grid-template-columns: 1.25fr .75fr; background: #e6dbc8; }
.movement-paper figure { min-width: 0; margin: 0; overflow: hidden; }.movement-paper figure img { width:100%;height:100%;object-fit:cover }.movement-paper .movement-copy { align-self:center;padding:65px; }.movement-paper .movement-copy p { color:#5d5b5b }.movement-paper .movement-copy li { color:#625f5a }
.movement-lines { grid-template-columns: .7fr 1.3fr; padding-block: 32px; }
.movement-lines .movement-copy { align-self: center; padding: 30px 50px 30px 30px; }
.movement-lines .movement-copy p { color:#626772 }.track-ledger { align-self:center;border-top:2px solid var(--ink) }.ledger-player { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:15px 10px;border-bottom:1px solid var(--line-dark) }.ledger-player button { display:inline-flex;align-items:center;gap:9px;border:0;padding:11px 15px;color:var(--white);background:var(--blue);font-family:var(--display);font-size:11px;font-weight:650 }.ledger-player button:disabled { opacity:.55;cursor:wait }.ledger-player strong { font-family:var(--display);font-size:12px }.ledger-player time { color:#686d76;font-family:var(--display);font-size:10px }.ledger-row { width:100%;display:grid;grid-template-columns:1fr 1.3fr 140px;align-items:center;gap:18px;border:0;border-bottom:1px solid var(--line-dark);padding:24px 10px;text-align:left;background:transparent;cursor:pointer }.ledger-row b { font-family:var(--display);font-size:18px;font-stretch:88% }.ledger-row > i { height:5px;background:rgba(7,16,31,.12) }.ledger-row em { display:block;width:0;height:100%;background:var(--blue);transition:width .08s linear }.ledger-row small { color:#656a73;font-size:11px }.ledger-row.selected { color:var(--white);background:var(--ink); }.ledger-row.selected small{color:#aeb8c7}.ledger-row.selected em{background:var(--cyan)}

.result-layout { display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:start }.result-layout .section-title { grid-template-columns:1fr;position:sticky;top:125px }.practice-sheet { color:var(--ink);background:var(--paper);padding:38px;box-shadow:18px 18px 0 #14274b }.sheet-head { display:grid;grid-template-columns:1fr auto;align-items:end;border-bottom:2px solid var(--ink);padding-bottom:18px }.sheet-head span { grid-column:1/-1;color:#73706b;font-family:var(--display);font-size:9px;letter-spacing:.12em }.sheet-head b { margin-top:8px;font-family:var(--display);font-size:23px;font-stretch:88% }.sheet-head small { font-family:var(--display);font-size:10px }.sheet-grade { display:grid;grid-template-columns:1.1fr 1fr 1fr;align-items:center;border-bottom:1px solid var(--line-dark);padding:30px 0 }.sheet-grade > strong { color:var(--blue);font-family:var(--display);font-size:100px;line-height:.8 }.sheet-grade span { display:grid }.sheet-grade span b { font-family:var(--display);font-size:29px }.sheet-grade span small { color:#686b71;font-size:10px }.measure-map { display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:30px 0;border-bottom:1px solid var(--line-dark);font-size:9px }.measure-map > span { grid-column:1/-1;font-family:var(--display);font-size:9px;letter-spacing:.1em }.measure-map div { display:grid;grid-template-columns:repeat(16,1fr);gap:3px }.measure-map i { height:15px;background:#456d8d }.measure-map i.medium{background:#d99057}.measure-map i.hard{background:var(--coral)}.sheet-note { display:flex;gap:18px;padding-top:27px }.sheet-note > i { color:var(--coral);font-size:24px }.sheet-note span { display:grid }.sheet-note b { font-size:14px }.sheet-note small { max-width:440px;color:#696a6c;font-size:11px }

.local-section { display:grid;grid-template-columns:1.15fr .85fr;gap:90px;padding-block:88px }.local-statement h2 { margin:0;font-family:var(--display);font-size:clamp(43px,5vw,72px);font-stretch:84%;font-weight:670;line-height:1;letter-spacing:-.065em }.local-facts { border-top:2px solid var(--ink) }.local-facts p { margin:0;border-bottom:1px solid var(--line-dark);padding:22px 5px;color:#5d626c;font-size:14px }.local-facts code { color:var(--ink);font-family:var(--display);font-size:11px }

.faq-section .section-title { margin-bottom:45px }.faq-list { border-top:2px solid var(--ink) }.faq-list details { border-bottom:1px solid var(--line-dark) }.faq-list summary { display:grid;grid-template-columns:55px 1fr auto;align-items:center;padding:23px 0;cursor:pointer;list-style:none;font-family:var(--display);font-size:20px;font-stretch:88%;font-weight:630 }.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-size:9px;color:#777}.faq-list summary i{color:var(--coral);font-size:14px;transition:transform .2s}.faq-list details[open] summary i{transform:rotate(45deg)}.faq-list p{max-width:720px;margin:0 0 24px 55px;color:#60656e;font-size:14px}

.closing { position:relative;margin-bottom:60px;padding:76px 60px;color:var(--white);background:var(--ink);overflow:hidden }.closing::after { content:"";position:absolute;right:-80px;top:-210px;width:560px;height:560px;border:1px solid rgba(28,199,223,.28);border-radius:50%;box-shadow:0 0 0 70px rgba(28,199,223,.04),0 0 0 140px rgba(28,199,223,.025) }.closing-mark { position:relative;z-index:2;display:flex;align-items:center;gap:18px }.closing-mark img { width:100px;height:100px }.closing-mark i { width:120px;height:1px;background:var(--coral) }.closing h2 { position:relative;z-index:2;margin:30px 0 20px;font-family:var(--display);font-size:clamp(50px,6vw,86px);font-weight:680;font-stretch:83%;line-height:.96;letter-spacing:-.075em }.closing p { position:relative;z-index:2;margin:0 0 30px;color:#aeb8c8 }.closing .main-button{position:relative;z-index:2}

.site-footer { color:#a8b3c5;background:#030711;padding:50px 0 24px }.footer-main { display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;gap:30px }.footer-main p { margin:0;font-size:12px }.footer-main > div { display:flex;justify-content:flex-end;gap:20px }.footer-main > div a{font-size:12px}.footer-bottom{display:flex;justify-content:space-between;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-family:var(--display);font-size:8px;letter-spacing:.08em}

.reveal { opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--delay,0ms) }.reveal.visible { opacity:1;transform:none }

@media (max-width: 1000px) {
  .nav-action{display:none}.hero-image{width:75%;opacity:.72}.hero-copy{width:80%}.modes-layout{grid-template-columns:1fr}.mode-stage{grid-column:1;grid-row:auto;margin-top:55px}.mode-stage-copy{padding-left:0}.movement-dark,.movement-paper,.movement-lines{grid-template-columns:1fr}.movement-paper figure{height:480px}.movement-lines .movement-copy{padding-left:20px}.result-layout{grid-template-columns:1fr}.result-layout .section-title{position:static}.local-section{grid-template-columns:1fr}.score-path{gap:30px}
}
@media (max-width: 760px) {
  .shell{width:calc(100% - 30px)}.nav{height:68px}.menu-button{display:grid;place-items:center}.nav-links{position:absolute;top:73px;left:15px;right:15px;display:none;flex-direction:column;gap:0;padding:10px;color:white;background:rgba(7,16,31,.98);border:1px solid var(--line-light)}.nav-links.open{display:flex}.nav-links a{padding:12px}
  #langToggle{display:none}.nav-links .lang-switch{display:block;width:auto;margin:6px 12px 0;padding:10px;text-align:left}
  .hero{min-height:1080px;padding-top:120px}.hero::before{height:940px}.hero-copy{width:100%}.hero h1{font-size:clamp(50px,14vw,75px)}.hero-image{top:455px;width:100%;height:430px;opacity:1}.hero-image::after{background:linear-gradient(180deg,var(--ink),transparent 25%)}.hero-facts{grid-template-columns:repeat(2,1fr)}.hero-facts div{min-height:105px;padding:18px}
  .score-section,.movements,.faq-section,.modes-section,.result-section{padding-block:64px}.section-title{margin-bottom:42px}.section-title h2{font-size:43px}.score-path{grid-template-columns:1fr}.score-step{min-height:0;padding:28px 24px 28px 88px}.step-symbol{top:26px;left:24px}.modes-layout .section-title,.result-layout .section-title{grid-template-columns:1fr}.mode-selector button{grid-template-columns:34px 1fr auto}.mode-stage{min-height:620px}.mode-stage-copy h3{font-size:42px}.falling-score{min-height:350px}.movement{margin-bottom:42px}.movement-copy h3{font-size:46px}.movement-dark .movement-copy,.movement-paper .movement-copy{padding:55px 25px}.waterfall-window{min-height:440px}.movement-paper figure{height:380px}.ledger-player{grid-template-columns:1fr auto}.ledger-player strong{display:none}.ledger-row{grid-template-columns:1fr 1fr}.ledger-row small{display:none}.practice-sheet{padding:24px;box-shadow:8px 8px 0 #14274b}.sheet-grade{grid-template-columns:1fr 1fr}.sheet-grade>strong{grid-column:1/-1;margin-bottom:30px}.local-section{padding-block:64px}.local-statement h2{font-size:46px}.faq-list summary{grid-template-columns:38px 1fr auto;font-size:16px}.faq-list p{margin-left:38px}.closing{padding:54px 25px}.footer-main{grid-template-columns:1fr}.footer-main>div{justify-content:flex-start}.footer-bottom{flex-direction:column;gap:10px}
}
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.fall-note{animation:none!important} }

/* ====================================================== konta i plany dostępu */
.nav-login { font-family: var(--display); font-size: 11px; font-weight: 650; letter-spacing: .04em; }
.hero-note { margin: 18px 0 0; max-width: 44ch; color: #5d626c; font-size: 13px; }

.plans-section { padding-block: 88px; }
.plans-section > .section-title { display: block; max-width: 760px; margin-inline: auto; text-align: center; }
.plans-section > .section-title p { margin-inline: auto; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.plan-grid.two-plans { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); max-width: 980px; margin-inline: auto; }

.plan-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-dark); background: var(--white);
  padding: 30px 28px 28px;
}
.plan-card header { border-bottom: 1px solid var(--line-dark); padding-bottom: 18px; margin-bottom: 20px; }
.plan-card header span {
  display: block; font-family: var(--display); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: #6a707c;
}
.plan-card header b {
  display: block; margin-top: 10px;
  font-family: var(--display); font-size: 25px; font-stretch: 84%;
  font-weight: 660; line-height: 1.05; letter-spacing: -.03em;
}
.plan-card ul { flex: 1; margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 12px; }
.plan-card li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 14px; line-height: 1.45; }
.plan-card li i { margin-top: 4px; color: var(--green); font-size: 12px; }
.plan-card li.off { color: #6a707c; }
.plan-card li.off i { color: #a8adb6; }

.plan-card.highlight { border-color: var(--blue); box-shadow: 10px 10px 0 rgba(28, 84, 216, .12); }
.plan-card.premium { background: var(--ink); border-color: var(--ink); color: var(--white); }
.plan-card.premium header { border-color: var(--line-light); }
.plan-card.premium header span { color: #9fb0cc; }
.plan-card.premium li i { color: var(--cyan); }
.plan-note { margin: 0; font-size: 12px; color: #9fb0cc; }
.plan-card.premium .plan-button { margin-bottom: 14px; background: var(--cyan); color: var(--ink); }

.plan-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 20px; text-decoration: none;
  background: var(--blue); color: var(--white);
  font-family: var(--display); font-size: 12px; font-weight: 650; letter-spacing: .04em;
}
.plan-button:hover { background: var(--ink); }
.plan-button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.plan-button.ghost:hover { background: var(--ink); color: var(--white); }

@media (max-width: 1080px) { .plan-grid, .plan-grid.two-plans { grid-template-columns: 1fr; max-width: none; } .plans-section { padding-block: 64px; } }