/* Kreatum.ee — kirjastiil v2. Värvid ja fondid on muutujatena, et neid saaks ühest kohast vahetada. */
:root {
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ink: #0A0A0A;
  --body: #262626;
  --muted: #4A5565;
  --faint: #636363;
  --line: #E2E8F0;
  --line-soft: #EDEDED;
  --soft: #F6F8FB;
  --blue: #0A5BB5;
  --blue-dark: #063F80;
  --blue-soft: #E6F0FB;
  --yellow: #FFD84D;
  --green: #1F9D55;
  --navy: #0B1B2E;
  --navy-2: #0F2339;
  --navy-line: #23364D;
  --radius: 18px;
  --wrap: 1120px;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: #FFFFFF; color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased }
img { max-width: 100%; height: auto }
a { color: var(--blue) }
a:hover { color: var(--blue-dark) }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px }
h1, h2, h3 { margin: 0; text-wrap: balance }
p { margin: 0 }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 24px; padding-right: 24px }
.serif { font-family: var(--serif); font-weight: 500; letter-spacing: -0.03em }
.h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 6.4vw, 66px); line-height: 1.06; letter-spacing: -0.035em; overflow-wrap: break-word; hyphens: auto }
.h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.1; letter-spacing: -0.03em }
.h3 { font-size: 18px; font-weight: 600 }
.muted { color: var(--muted) }
.mono { font-family: var(--mono) }
.dots { background-image: radial-gradient(#D6DCE4 1px, transparent 1px); background-size: 18px 18px }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* Nupud ja sildid */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font: inherit; font-weight: 500; font-size: 15px; padding: 13px 22px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; min-height: 46px }
.btn-blue { background: var(--blue); color: #FFFFFF; box-shadow: 0 6px 18px -6px rgba(10, 91, 181, .6) }
.btn-blue:hover { background: var(--blue-dark); color: #FFFFFF }
.btn-dark { background: var(--ink); color: #FFFFFF; padding: 7px 14px; min-height: 36px; border-radius: 8px; font-size: 14px }
.btn-dark:hover { color: #FFFFFF; background: #262626 }
.btn-ghost { background: #FFFFFF; color: var(--ink); border-color: #D6DEE8 }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink) }
.btn-yellow { background: var(--yellow); color: #2B2000; font-weight: 600 }
.btn-yellow:hover { color: #2B2000; background: #FFCE1A }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px }
.tag { font-family: var(--mono); font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 6px }
.f-PRIA { background: #E7F6EC; color: #13703A }
.f-EIS { background: #E6F0FB; color: #0A4C96 }
.f-KIK { background: #E3F6F5; color: #0B6560 }
.f-RTK { background: #F0EAFB; color: #5B33A0 }
.f-LEADER { background: #FFF1E2; color: #8A3F06 }
.f-muu { background: #F1F3F6; color: #404040 }
.c0 { background: #E7F6EC; color: #13703A } .c1 { background: #E6F0FB; color: #0A4C96 } .c2 { background: #FFF4CC; color: #6B4E00 }
.c3 { background: #F0EAFB; color: #5B33A0 } .c4 { background: #FFF1E2; color: #8A3F06 } .c5 { background: #E3F6F5; color: #0B6560 }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; flex: none }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 85, .45) } 70% { box-shadow: 0 0 0 8px rgba(31, 157, 85, 0) } 100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0) } }
@media (prefers-reduced-motion: reduce) { .live { animation: none } html { scroll-behavior: auto } }
.check { width: 22px; height: 22px; border-radius: 6px; background: var(--green); display: inline-flex; align-items: center; justify-content: center; flex: none }

/* Ülemine riba ja päis */
.topbar { background: var(--blue); color: #FFFFFF; font-size: 14px }
.topbar .wrap { padding-top: 9px; padding-bottom: 9px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; text-align: center }
.topbar .badge { background: var(--yellow); color: #3D2E00; font-weight: 600; font-size: 12px; padding: 2px 8px; border-radius: 6px }
.topbar a { color: #FFFFFF; font-weight: 600 }
.header { border-bottom: 1px solid var(--line-soft); background: #FFFFFF }
.header .wrap { padding-top: 14px; padding-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 17px }
.logo:hover { color: var(--ink) }
.logo-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--blue); display: flex; align-items: center; justify-content: center }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; font-size: 14px }
.nav a:not(.btn) { text-decoration: none; color: #404040 }
.nav a:not(.btn):hover { color: var(--ink) }

/* Avaplokk */
.hero { border-bottom: 1px solid #F0F0F0 }
.hero .wrap { padding-top: 72px; padding-bottom: 56px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center }
.status { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; background: #FFFFFF; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px 6px 10px; font-size: 13px; color: var(--body); box-shadow: 0 1px 2px rgba(0, 0, 0, .05) }
.status:hover { color: var(--ink); border-color: #CBD5E1 }
.mark { background: linear-gradient(transparent 55%, var(--yellow) 55%); padding: 0 6px }
.lead { max-width: 580px; color: var(--muted); font-size: 17px; line-height: 1.65 }
.row-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px }
.byline { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font-size: 14px; color: var(--muted) }
.face { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--ink); background: #FFFFFF; border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px 3px 3px; font-weight: 600 }
.face img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: 50% 30% }

/* Kliendid */
.clients { border-bottom: 1px solid #F0F0F0 }
.clients .wrap { padding-top: 28px; padding-bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 16px }
.eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint) }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 40px; margin: 0; padding: 0; list-style: none }
.logos img { height: 30px; width: auto; max-width: 130px; object-fit: contain; filter: grayscale(1); opacity: .6 }
.logos img.sil { filter: grayscale(1) brightness(0); opacity: .55 }

/* Konsultant */
.about .wrap { padding-top: 80px; padding-bottom: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 48px }
.portrait { flex: 1 1 300px; max-width: 400px; margin: 0 auto; position: relative }
.portrait::before { content: ""; position: absolute; inset: 18px -14px -14px 18px; border-radius: 28px; background: var(--yellow) }
.portrait img { position: relative; display: block; width: 100%; aspect-ratio: 314 / 335; object-fit: cover; border-radius: 24px; border: 1px solid var(--line) }
.portrait .float { position: absolute; left: -12px; bottom: 26px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .25); display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.35 }
.about .text { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 18px; font-size: 17px; line-height: 1.75; color: var(--body) }
.about .text strong { color: var(--ink) }
.kicker { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); font-weight: 600 }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chips span { border-radius: 999px; padding: 5px 12px; font-size: 14px; font-weight: 500 }

/* Tagasiside */
.quotes .wrap { padding-bottom: 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px }
.quote { margin: 0; border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 18px }
.quote:nth-child(odd) { background: #FFFBEA; border: 1px solid #F5E6A8 }
.quote:nth-child(even) { background: #EEF5FD; border: 1px solid #CFE0F5 }
.quote blockquote { margin: 0; font-family: var(--serif); font-size: 22px; line-height: 1.4; color: var(--ink) }
.quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; font-size: 14px; line-height: 1.4 }
.quote figcaption img, .avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none }
.avatar { background: #0B7069; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-weight: 600 }
.stars { display: flex; gap: 2px }

/* Toetused */
.grants { background: var(--soft); border-top: 1px solid #E8EDF3; border-bottom: 1px solid #E8EDF3 }
.grants .wrap { padding-top: 80px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 28px }
.split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px }
.split > div { display: flex; flex-direction: column; gap: 10px; max-width: 640px }
.updated { display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--body) }
.filters { display: flex; flex-wrap: wrap; gap: 8px }
.filters button { font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid #D6DEE8; background: #FFFFFF; color: var(--body) }
.filters button[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; border-color: var(--ink) }
.grant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px }
.grant { text-decoration: none; color: var(--ink); background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, transform .15s }
.grant:hover { color: var(--ink); border-color: #9DB7D6; transform: translateY(-1px) }
.grant .top { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.grant .due { font-size: 12px; font-weight: 500; color: #13703A }
.grant .due.soon { color: #B4410A }
.grant .t { font-weight: 600; font-size: 16px; line-height: 1.35 }
.grant .w { font-size: 14px; color: var(--muted); line-height: 1.5 }
.grant .more { font-size: 13px; font-weight: 500; color: var(--blue) }
.grant[hidden] { display: none }

/* Töö käik (vahekaardid) */
.process .wrap { padding-top: 80px; padding-bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 22px }
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; background: #EEF1F5; padding: 4px; border-radius: 12px }
.tabs button { font: inherit; font-size: 14px; font-weight: 500; border: 0; cursor: pointer; padding: 8px 16px; border-radius: 9px; min-height: 36px; display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--muted) }
.tabs button[aria-selected="true"] { background: #FFFFFF; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12) }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none }
.d0 { background: #1F9D55 } .d1 { background: #0A5BB5 } .d2 { background: #E8740C } .d3 { background: #7B4FD0 }
.window { width: 100%; max-width: 980px; border: 1px solid var(--line); border-radius: 14px; background: #FFFFFF; box-shadow: 0 24px 60px -24px rgba(10, 40, 80, .22); overflow: hidden }
.window .bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); background: #FAFAFA }
.window .lights { display: flex; gap: 6px }
.window .lights span { width: 10px; height: 10px; border-radius: 50% }
.window .label { flex: 1; display: flex; justify-content: center }
.window .label span { font-family: var(--mono); font-size: 12px; color: var(--faint); background: #F0F0F0; padding: 3px 12px; border-radius: 6px }
.window .body { display: flex; flex-wrap: wrap; min-height: 360px }
.window .side { flex: 1 1 200px; max-width: 240px; border-right: 1px solid var(--line-soft); padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 14px }
.window .side .item { padding: 7px 8px; border-radius: 8px; display: flex; align-items: center; gap: 8px; color: var(--muted) }
.window .side .item.on { background: #EEF3F9; color: var(--ink); font-weight: 500 }
.window .panel { flex: 999 1 420px; min-width: 0; padding: 26px 28px }
.window .panel[hidden] { display: none }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 18px }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; font-size: 14px }
.kv div { border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px }
.kv small { display: block; color: var(--faint); font-size: 12px }
.kv b { font-weight: 500 }
@media (max-width: 560px) { .kv { grid-template-columns: minmax(0, 1fr) } .window .side { max-width: none; border-right: 0; border-bottom: 1px solid var(--line-soft) } }

/* Teenused */
.features .wrap { padding-top: 72px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 32px }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px }
.feature { background: var(--soft); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 14px }
.feature .num { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 500; font-size: 15px }
.feature p { color: var(--muted); font-size: 15px }

/* Tulemused (tume plokk) */
.dark { background: var(--navy); color: #FFFFFF; border-radius: 24px; padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; gap: 36px }
.dark p { color: #B7C3D1 }
.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px }
.result { border: 1px solid var(--navy-line); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 6px; background: var(--navy-2) }
.result .bar { width: 28px; height: 4px; border-radius: 2px }
.result .v { font-family: var(--serif); font-size: 44px; line-height: 1.05; letter-spacing: -0.03em }
.result small { font-size: 13px; color: #A3B2C4 }
.r0 { color: #7EE2A8 } .r1 { color: #8DB3E2 } .r2 { color: #FFD84D }
.rb0 { background: #7EE2A8 } .rb1 { background: #8DB3E2 } .rb2 { background: #FFD84D }
.table-box { overflow-x: auto; border: 1px solid var(--navy-line); border-radius: 16px }
.table-box table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px }
.table-box th { color: #A3B2C4; text-align: left; padding: 12px 18px; font-weight: 500; border-bottom: 1px solid var(--navy-line) }
.table-box td { padding: 12px 18px; border-bottom: 1px solid #1A2E45 }
.table-box tr:last-child td { border-bottom: 0 }
.table-box .num { text-align: right; font-family: var(--mono); white-space: nowrap; color: #7EE2A8 }

/* Tasu */
.price .wrap { padding-top: 80px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 32px }
.price-card { background: #FFFFFF; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 60px -30px rgba(10, 40, 80, .22); display: flex; flex-wrap: wrap; overflow: hidden }
.price-calc { flex: 3 1 420px; min-width: 0; padding: 32px; display: flex; flex-direction: column; gap: 20px; border-right: 1px solid var(--line-soft) }
.price-calc .big { font-family: var(--serif); font-size: clamp(44px, 6vw, 64px); line-height: 1; letter-spacing: -0.03em }
.bars { display: flex; align-items: flex-end; gap: 10px; min-height: 180px }
.bars button { flex: 1; border: 0; border-radius: 10px; cursor: pointer; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; font: inherit; font-family: var(--mono); font-size: 12px; background: #E6EEF8; color: #0A4C96; min-width: 0 }
.bars button[aria-pressed="true"] { background: var(--blue); color: #FFFFFF }
.bar-labels { display: flex; gap: 10px; font-size: 12px; color: var(--muted); font-family: var(--mono) }
.bar-labels span { flex: 1; text-align: center }
.price-side { flex: 2 1 300px; min-width: 0; padding: 32px; display: flex; flex-direction: column; gap: 18px }
.price-side .big { font-family: var(--serif); font-size: 40px; line-height: 1.1; letter-spacing: -0.02em }
.includes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; font-size: 14px; margin: 0; padding: 0; list-style: none }
.includes li { display: flex; gap: 8px; align-items: flex-start }

/* Küsimused */
.faq .wrap { padding-top: 88px; padding-bottom: 88px; display: flex; flex-wrap: wrap; gap: 32px 64px }
.faq h2 { flex: 1 1 260px }
.faq .list { flex: 2 1 480px; min-width: 0; border-top: 1px solid #E5E5E5 }
.faq details { border-bottom: 1px solid #E5E5E5 }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-size: 16px; font-weight: 500; cursor: pointer; list-style: none }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; font-size: 20px; color: var(--blue); transition: transform .2s }
.faq details[open] summary::after { transform: rotate(45deg) }
.faq details p { margin: 0 0 18px; color: var(--muted); font-size: 15px; max-width: 60ch }

/* Päring (sinine lõpuplokk) */
.ask { background: var(--blue); color: #FFFFFF }
.ask .wrap { padding-top: 88px; padding-bottom: 88px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start }
.ask .intro { flex: 1 1 340px; display: flex; flex-direction: column; gap: 18px }
.ask .intro p { color: #DCE8F7 }
.ask .intro a { color: #FFFFFF; font-weight: 600 }
.form { flex: 1 1 440px; min-width: 0; background: #FFFFFF; color: var(--ink); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .5) }
.field { display: flex; flex-direction: column; gap: 6px }
.field label { font-weight: 600; font-size: 14px }
.field input, .field select, .field textarea { font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid #A8B3C2; border-radius: 10px; background: #FFFFFF; color: var(--ink); width: 100%; min-height: 46px }
.field textarea { resize: vertical; min-height: 90px }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue) }
.field .err { font-size: 14px; color: #B4442E; font-weight: 600 }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px }
.alert { background: #FBEAE6; border-radius: 10px; padding: 12px 16px; color: #8A2E1C; font-weight: 600 }
.sent { flex: 1 1 440px; background: #FFFFFF; color: var(--ink); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 10px }
.form .privacy { font-size: 13px; color: var(--muted) }

/* Jalus */
.footer .wrap { padding-top: 56px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 40px }
.footer .cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px }
.footer .brand { flex: 1 1 280px; display: flex; flex-direction: column; gap: 12px; max-width: 360px }
.footer .links { display: flex; flex-wrap: wrap; gap: 32px 56px; font-size: 14px }
.footer .links div { display: flex; flex-direction: column; gap: 8px }
.footer .links a { text-decoration: none; color: var(--body) }
.footer .links a:hover { color: var(--blue) }
.footer .bottom { border-top: 1px solid var(--line-soft); padding-top: 20px; font-size: 13px; color: var(--faint); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px }

/* Meetmeleht */
.m-hero { border-bottom: 1px solid #F0F0F0 }
.m-hero .wrap { padding-top: 40px; padding-bottom: 56px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start }
.m-hero .main { flex: 3 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px }
.m-hero .main .h1 { font-size: clamp(30px, 5.4vw, 58px) }
.crumbs { font-size: 13px; color: var(--faint); display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none }
.crumbs li + li::before { content: "/"; margin-right: 6px }
.crumbs a { color: var(--faint); text-decoration: none }
.m-lead { color: var(--muted); font-size: 17px; max-width: 58ch }
.m-lead strong { color: var(--ink) }
.m-by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted) }
.m-by img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: 50% 30% }
.round { flex: 2 1 320px; min-width: 0; background: #FFFFFF; border: 1px solid var(--line); border-radius: 20px; padding: 24px; box-shadow: 0 24px 60px -30px rgba(10, 40, 80, .25); display: flex; flex-direction: column; gap: 16px }
.round .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.round .stats div { background: var(--soft); border-radius: 12px; padding: 12px 14px }
.round .stats small { display: block; font-size: 12px; color: var(--faint) }
.round .stats b { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1 }
.meter { height: 12px; border-radius: 6px; background: #FDE2E0; overflow: hidden }
.meter span { display: block; height: 100%; background: var(--blue); border-radius: 6px }
.round .rows { border-top: 1px solid var(--line-soft); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 14px }
.round .rows div { display: flex; justify-content: space-between; gap: 10px }
.round .rows span:first-child { color: var(--muted) }
.round .rows span:last-child { font-weight: 500; text-align: right }
.facts .wrap { padding-top: 56px; padding-bottom: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px }
.fact { border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 4px }
.fact small { font-size: 12px; font-weight: 500 }
.fact b { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.15; color: var(--ink) }
.fact span { font-size: 13px; color: var(--muted) }
.cond .wrap { padding-top: 48px; padding-bottom: 48px; display: flex; flex-wrap: wrap; gap: 24px }
.cond .col { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px }
.cond .col.boxed { background: var(--soft); border-radius: 20px; padding: 28px }
.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px }
.ticks li { display: flex; gap: 12px; align-items: flex-start }
.ticks .check { margin-top: 2px }
.what { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px }
.what li { background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; font-weight: 500 }
.what .num { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; font-weight: 500; flex: none }
.note { font-size: 13px; color: var(--faint) }
.plan { background: var(--soft); border-top: 1px solid #E8EDF3; border-bottom: 1px solid #E8EDF3 }
.plan .wrap { padding-top: 72px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 28px }
.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px }
.steps li { background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 8px }
.steps .pill { align-self: flex-start }
.steps span:last-child { font-size: 14px; color: var(--muted) }
.m-results .dark { flex-direction: row; flex-wrap: wrap; gap: 32px }
.m-results .dark > div:first-child { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px }
.m-results .table-box { flex: 2 1 460px; min-width: 0 }
.duo .wrap { padding-bottom: 56px; display: flex; flex-wrap: wrap; gap: 16px }
.duo .quote, .duo .fee { flex: 1 1 380px; min-width: 0 }
.fee { background: #FFFBEA; border: 1px solid #F5E6A8; border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 10px }
.fee .big { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--blue) }
.preview-bar { background: #FFF4CC; color: #3D2E00; text-align: center; font-size: 14px; padding: 8px 16px; font-weight: 500 }

/* Admin-paneelis lisatud plokid */
.blk-text .wrap { padding-top: 64px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 16px; max-width: 820px; font-size: 17px; line-height: 1.75; color: var(--body) }
.blk-text.soft { background: var(--soft); border-top: 1px solid #E8EDF3; border-bottom: 1px solid #E8EDF3 }
.blk-media .wrap { padding-top: 64px; padding-bottom: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 40px }
.blk-media.right .wrap { flex-direction: row-reverse }
.blk-media .media { flex: 1 1 360px; min-width: 0 }
.blk-media .media img { width: 100%; border-radius: 20px; display: block }
.blk-media .text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; font-size: 17px; line-height: 1.75; color: var(--body) }
.blk-quote .wrap { padding-top: 48px; padding-bottom: 48px; max-width: 820px }
.blk-quote .quote { background: #FFFBEA; border: 1px solid #F5E6A8 }
.blk-cta .wrap { padding-top: 40px; padding-bottom: 40px }
.blk-cta .box { background: var(--blue); color: #FFFFFF; border-radius: 24px; padding: clamp(28px, 5vw, 56px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px }
.blk-cta .t { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px }
.blk-cta .t p { color: #DCE8F7 }
.blk-cta .t a { color: #FFFFFF }

/* Küpsiste nõusolek */
.consent { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50; max-width: 560px; margin-left: auto; background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 48px -16px rgba(11, 27, 46, .35); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; font-size: 15px }
.consent[hidden] { display: none }
.consent-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end }
.consent-btns .btn { min-height: 42px; padding: 10px 18px }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer }
.footer .bottom a { color: inherit }
.legal .wrap { padding-top: 64px; padding-bottom: 80px; max-width: 760px; display: flex; flex-direction: column; gap: 16px; font-size: 16px; line-height: 1.75; color: var(--body) }