:root {
--orange: #F38B4B;
--orange-dark: #C8642A;
--orange-soft: #FFE2CF;
--green: #3D6E05;
--green-mid: #6DAA1A;
--lime: #A5D65A;
--green-pale: #E3EDD6;
--grey: #9C9C9C;
--charcoal: #2E2E2E;
--charcoal-2: #3A3A3A;
--ink: #16181A;
--body: #3E3E3E;
--muted: #595959;
--bg: #F2F2F0;
--soft: #E6E7E4;
--line: #D8D9D6;
--white: #FFFFFF;
--radius: 20px;
--display: 'Bricolage Grotesque', system-ui, sans-serif;
--text: 'IBM Plex Sans', system-ui, sans-serif;
--wrap: 1200px;
--gutter: clamp(16px, 4vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--text); font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); }
a:hover { color: var(--muted); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; margin: 0; line-height: 1.02; }
h1 { font-size: clamp(44px, 7vw, 92px); letter-spacing: -0.035em; line-height: 0.93; }
h2 { font-size: clamp(34px, 4.6vw, 60px); letter-spacing: -0.03em; }
h3 { font-size: clamp(22px, 2.2vw, 28px); }
p { margin: 0; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 12px 16px; z-index: 1000; }
.skip-link:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding-top: clamp(64px, 9vw, 112px); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; flex-wrap: wrap; }
.section-head .lead { max-width: 460px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.eyebrow { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--green); }
.eyebrow.on-dark { color: var(--lime); }
.lead { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: var(--body); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: 12px; font: inherit; font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: transform .15s ease, background .15s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-accent { background: var(--orange); color: var(--ink); }
.btn-accent:hover { background: #EA7A36; color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline-light { border-color: #fff; color: #fff; background: transparent; }
.btn-outline-light:hover { color: #fff; background: rgba(255,255,255,0.08); }
.btn-white { background: #fff; color: var(--ink); }
.btn-lg { min-height: 62px; padding: 0 28px; font-size: 18px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.ico { flex-shrink: 0; } .topbar { background: var(--charcoal); color: #E8E8E6; font-size: 14px; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar .lime { color: var(--lime); }
.topbar .tb-right { display: flex; gap: 22px; align-items: center; }
@media (max-width: 820px) { .topbar .hide-sm { display: none; } }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand img { height: 56px; width: auto; }
.brand-word { font-family: var(--display); font-weight: 800; font-size: 25px; letter-spacing: -0.02em; color: var(--ink); }
.brand-word span { color: var(--orange-dark); }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.main-nav a { text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 0; border-bottom: 3px solid transparent; }
.main-nav a[aria-current="page"] { border-color: var(--orange); font-weight: 700; }
.header-cta { display: flex; gap: 10px; align-items: center; }
.header-cta .btn { min-height: 48px; padding: 0 18px; font-size: 16px; }
.menu-toggle { display: none; width: 48px; height: 48px; border: none; background: transparent; cursor: pointer; align-items: center; justify-content: center; }
@media (max-width: 1180px) {
.main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 20px 30px -20px rgba(0,0,0,.25); }
.main-nav.open { display: block; }
.main-nav ul { flex-direction: column; gap: 0; padding: 8px var(--gutter) 16px; }
.main-nav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--soft); font-size: 17px; }
.main-nav a[aria-current="page"] { border-color: var(--soft); color: var(--orange-dark); }
.menu-toggle { display: inline-flex; }
}
@media (max-width: 640px) {
.header-cta .btn-outline { display: none; }
.brand img { height: 44px; }
.brand-word { font-size: 20px; }
.site-header .wrap { min-height: 68px; }
}
@media (max-width: 400px) { .brand-word { display: none; } } .hero { padding-top: clamp(40px, 6vw, 72px); }
.hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.creds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 6px; }
.cred { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 16px; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .creds { grid-template-columns: 1fr; } .hero-actions .btn { width: 100%; } } .qq { background: var(--charcoal); color: #fff; border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.45); }
.qq-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; background: var(--charcoal-2); border-radius: 14px; }
.qq-tabs button { min-height: 48px; border: none; border-radius: 10px; font: inherit; font-weight: 700; font-size: 15px; background: transparent; color: #CFCFCF; cursor: pointer; }
.qq-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); }
.qq-panel[hidden] { display: none; }
.size-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.size-pill { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 68px; padding: 10px 14px; border-radius: 12px; font: inherit; text-align: left; cursor: pointer; background: transparent; color: #fff; border: 2px solid #555; }
.size-pill b { font-family: var(--display); font-size: 24px; font-weight: 800; }
.size-pill span { font-size: 13px; }
.size-pill[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.skip-stage { height: 150px; border-radius: 16px; background: linear-gradient(180deg, #fff 0%, var(--soft) 100%); display: flex; align-items: center; justify-content: center; padding: 8px; }
.skip-stage img { max-height: 100%; width: auto; object-fit: contain; }
.qq-facts { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: #DADADA; }
.qq-facts span { display: flex; gap: 8px; align-items: center; }
.qq-facts .warn { color: #FFB27A; }
.qq-price { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 16px; border-top: 1px solid #474747; flex-wrap: wrap; }
.qq-price .big { font-family: var(--display); font-size: 38px; font-weight: 800; color: var(--orange); line-height: 1; }
.qq-price .sub { font-size: 14px; color: #BDBDBD; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 22px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; background: transparent; color: #fff; border: 2px solid #666; }
.chip[aria-pressed="true"] { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.chip.light { color: var(--ink); border-color: var(--line); background: #fff; }
.chip.light[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); } .field { display: flex; flex-direction: column; gap: 7px; font-size: 15px; font-weight: 600; }
.field input, .field select, .field textarea { min-height: 54px; padding: 0 16px; border-radius: 12px; border: 2px solid var(--line); background: #fff; font: inherit; font-size: 17px; font-weight: 400; color: var(--ink); width: 100%; }
.field textarea { padding: 14px 16px; min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: none; }
.on-dark .field { color: #BDBDBD; }
.on-dark .field input, .on-dark .field select, .on-dark .field textarea { border-color: transparent; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; }
.check { display: flex; gap: 12px; align-items: center; min-height: 44px; font-size: 16px; font-weight: 400; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--green); }
.form-msg { padding: 14px 18px; border-radius: 12px; font-weight: 600; }
.form-msg.ok { background: var(--green-pale); color: var(--green); }
.form-msg.err { background: var(--orange-soft); color: #8A3A00; }
.form-msg[hidden] { display: none; } .band-dark { background: var(--charcoal); color: #fff; }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-green { background: var(--green); color: #fff; }
.proof { padding: 56px 0; }
.proof .grid { gap: 24px; }
.stat { display: flex; flex-direction: column; gap: 8px; padding-left: 24px; border-left: 3px solid var(--orange); }
.stat b { font-family: var(--display); font-size: clamp(44px, 5vw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.stat span { color: #CFCFCF; font-size: 16px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
a.card { text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
a.card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(0,0,0,.35); color: var(--ink); }
.icon-box { width: 58px; height: 58px; border-radius: 16px; background: var(--soft); display: flex; align-items: center; justify-content: center; }
.icon-box.orange { background: var(--orange); }
.card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--soft); }
.card .tag { font-weight: 700; color: var(--green); }
.sector { display: flex; gap: 18px; padding: 24px; border: 1px solid #474747; border-radius: 18px; background: rgba(255,255,255,0.05); }
.sector strong { font-size: 20px; display: block; margin-bottom: 4px; }
.sector span { color: #CFCFCF; font-size: 15px; }
.step { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 3px solid var(--orange); }
.step .n { font-family: var(--display); font-size: 44px; font-weight: 800; color: var(--orange); line-height: 1; }
.step strong { font-size: 22px; }
.step p { color: var(--body); font-size: 16px; }
.comply { border-radius: 32px; padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .comply { grid-template-columns: 1fr; } }
.comply-item { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,0.1); font-weight: 600; font-size: 17px; } .skip-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.skip-card .pic { height: 190px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #fff 0%, var(--soft) 100%); border-radius: 16px; padding: 10px; }
.skip-card .pic img { max-height: 100%; width: auto; }
.skip-card .ttl { display: flex; justify-content: space-between; align-items: baseline; }
.skip-card .ttl h3 { font-size: 40px; letter-spacing: -0.03em; }
.skip-card .facts { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.skip-card .facts span { display: flex; gap: 8px; align-items: center; }
.skip-card .warn { color: #8A3A00; font-weight: 600; }
.skip-card .price { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--soft); }
.price-big { font-family: var(--display); font-size: 34px; font-weight: 800; line-height: 1; }
.notice { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 26px; background: #fff; border: 1px solid var(--line); border-radius: 18px; flex-wrap: wrap; } .cover-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .cover-grid { grid-template-columns: 1fr; } }
.legend { display: flex; gap: 14px; align-items: flex-start; }
.legend i { width: 18px; height: 18px; margin-top: 4px; border-radius: 9px; flex-shrink: 0; }
.map { position: relative; aspect-ratio: 1 / 0.9; border-radius: 28px; background: var(--soft); overflow: hidden; }
.map .ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.map .r30 { width: 88%; aspect-ratio: 1; background: rgba(109,170,26,.18); border: 3px dashed var(--green-mid); }
.map .rcore { width: 40%; aspect-ratio: 1; background: rgba(243,139,75,.2); border: 3px solid var(--orange); }
.map .depot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.map .pin { width: 50px; height: 50px; border-radius: 25px; background: var(--ink); display: flex; align-items: center; justify-content: center; }
.map .lbl { padding: 5px 11px; border-radius: 10px; background: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
.map .town { position: absolute; padding: 5px 11px; border-radius: 14px; background: #fff; border: 1px solid #C8CAC6; font-size: 13px; font-weight: 600; white-space: nowrap; transform: translate(-50%, -50%); }
.map .badge { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); padding: 5px 12px; border-radius: 12px; background: var(--green-mid); color: #fff; font-size: 13px; font-weight: 700; }
.map .note { position: absolute; right: 18px; bottom: 14px; font-size: 12px; color: var(--muted); }
.check-result { padding: 16px 18px; border-radius: 14px; font-weight: 600; }
.check-result.core { background: var(--orange-soft); color: #7A3200; }
.check-result.outer { background: var(--green-pale); color: var(--green); }
.check-result.unknown { background: #fff; border: 1px solid var(--line); }
.check-result[hidden] { display: none; } .cta { margin-top: clamp(72px, 10vw, 120px); }
.cta-box { background: var(--orange); border-radius: 32px; padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 72px); display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.cta-box h2 { font-size: clamp(36px, 4.6vw, 60px); line-height: .95; }
.cta-box .actions { display: flex; flex-direction: column; gap: 12px; min-width: min(320px, 100%); }
.site-footer { margin-top: clamp(72px, 10vw, 120px); background: var(--charcoal); color: #CFCFCF; padding: 64px 0 32px; font-size: 15px; }
.site-footer a { color: #CFCFCF; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid .about { grid-column: 1 / -1; } }
.foot-grid h4 { color: #fff; font-family: var(--text); font-size: 16px; font-weight: 700; letter-spacing: 0; margin-bottom: 14px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 26px; margin-top: 44px; border-top: 1px solid #474747; font-size: 14px; }
.mobile-bar { display: none; }
@media (max-width: 760px) {
.mobile-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
.mobile-bar a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; border-radius: 12px; font-weight: 700; text-decoration: none; font-size: 15px; }
.mobile-bar .call { border: 2px solid var(--ink); }
.mobile-bar .wa { background: var(--charcoal); color: #fff; }
.mobile-bar .book { background: var(--orange); }
body { padding-bottom: 76px; }
} .page-hero { padding-top: clamp(40px, 6vw, 80px); }
.page-hero .stack { gap: 20px; max-width: 900px; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.hero-img { background: linear-gradient(180deg, #fff 0%, var(--soft) 100%); border-radius: 32px; padding: 32px; } .finder { background: #fff; border: 1px solid var(--line); border-radius: 32px; padding: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .finder { grid-template-columns: 1fr; } }
.counter { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: var(--bg); border-radius: 16px; }
.counter .ctl { display: flex; align-items: center; gap: 12px; }
.counter button { width: 48px; height: 48px; border-radius: 12px; font: inherit; font-size: 24px; font-weight: 700; cursor: pointer; border: 2px solid var(--ink); background: #fff; }
.counter button.plus { background: var(--ink); color: #fff; }
.counter output { font-family: var(--display); font-size: 30px; font-weight: 800; min-width: 44px; text-align: center; }
.finder-out { background: var(--charcoal); color: #fff; border-radius: 24px; padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 18px; }
.finder-out .vol { font-family: var(--display); font-size: clamp(64px, 8vw, 88px); font-weight: 800; line-height: .9; color: var(--orange); }
.rec { display: flex; gap: 18px; align-items: center; padding: 16px; background: #fff; color: var(--ink); border-radius: 16px; }
.rec img { width: 150px; height: 86px; object-fit: contain; }
.bar-row { display: flex; flex-direction: column; gap: 6px; }
.bar-row .top { display: flex; justify-content: space-between; font-size: 15px; }
.bar { height: 12px; border-radius: 6px; background: #474747; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 6px; background: var(--green-mid); transition: width .25s ease; }
.bar i.over { background: var(--orange); } .compare { background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow-x: auto; }
.compare table { width: 100%; border-collapse: collapse; min-width: 720px; }
.compare th, .compare td { padding: 18px 24px; text-align: left; vertical-align: top; border-top: 1px solid var(--soft); font-size: 16px; }
.compare thead th { border-top: none; vertical-align: bottom; }
.compare thead img { max-width: 220px; }
.compare th[scope="row"] { font-weight: 700; width: 220px; }
.compare .price-big { font-size: 26px; } .search-box { display: flex; align-items: center; gap: 14px; max-width: 760px; min-height: 70px; padding: 0 20px; border-radius: 16px; background: #fff; color: var(--ink); }
.search-box input { flex: 1; min-height: 60px; border: none; font: inherit; font-size: 19px; outline: none; background: transparent; }
.items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .items { grid-template-columns: 1fr; } }
.item { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.item .top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.item .top strong { font-size: 17px; }
.verdict { flex-shrink: 0; padding: 4px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.v-yes { background: var(--green); color: #fff; }
.v-ask { background: var(--orange-soft); color: #8A3A00; }
.v-haz { background: #FFE9A8; color: #5A4300; }
.v-no { background: var(--ink); color: #fff; }
.item p { font-size: 15px; color: var(--body); }
details.faq { border-top: 1px solid #C8CAC6; }
details.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 72px; font-size: clamp(18px, 1.8vw, 21px); font-weight: 600; cursor: pointer; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; font-family: var(--display); font-size: 30px; font-weight: 800; }
details.faq[open] summary::after { content: '–'; }
details.faq p { padding-bottom: 22px; color: var(--body); max-width: 760px; } .book-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
@media (max-width: 1000px) { .book-grid { grid-template-columns: 1fr; } .book-summary { order: -1; } }
.progress { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.progress span { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #6B6B6B; }
.progress span::before { content: ''; height: 5px; border-radius: 3px; background: var(--line); }
.progress span.done, .progress span.cur { color: var(--ink); }
.progress span.done::before { background: var(--green-mid); }
.progress span.cur::before { background: var(--orange); }
@media (max-width: 640px) { .progress span { font-size: 0; } }
.wizard { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 3.5vw, 40px); display: flex; flex-direction: column; gap: 24px; }
.wizard fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.wizard fieldset[hidden] { display: none; }
.wizard legend { padding: 0; margin-bottom: 4px; }
.wizard legend h2 { font-size: clamp(30px, 3.4vw, 44px); }
.opt-grid { display: grid; gap: 12px; }
.opt { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px; border: 3px solid #E4DFD3; background: #fff; cursor: pointer; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt:has(input:checked) { border-color: var(--ink); box-shadow: 6px 6px 0 var(--orange); }
.opt:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 2px; }
.opt:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.opt strong { font-size: 18px; }
.opt span { font-size: 15px; color: var(--muted); }
.opt img { height: 96px; width: auto; align-self: center; }
.opt .p { font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--ink); }
.opt .flag { position: absolute; top: 12px; right: 12px; padding: 3px 8px; border-radius: 6px; background: var(--orange); color: var(--ink); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.wiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 22px; border-top: 1px solid var(--soft); }
.wiz-nav .hint { color: var(--muted); font-size: 15px; }
.warn-box { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--orange-soft); color: #7A3200; font-weight: 600; font-size: 15px; }
.warn-box[hidden] { display: none; }
.book-summary { position: sticky; top: 108px; background: var(--charcoal); color: #fff; border-radius: 24px; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.book-summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 15px; }
.book-summary dt { color: #A7ABAE; }
.book-summary dd { margin: 0; text-align: right; }
.book-summary .tot { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 16px; border-top: 1px solid #474747; }
.review { border: 1px solid var(--line); border-radius: 16px; }
.review div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--soft); }
.review div:first-child { border-top: none; }
.review dt { color: var(--muted); }
.done-box { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.done-box .tick { width: 84px; height: 84px; border-radius: 42px; background: var(--orange); display: flex; align-items: center; justify-content: center; } .timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 18px; }
.timeline .dot { width: 34px; height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; border: 2px solid #C8CAC6; color: #8A8A8A; background: #fff; }
.timeline .rail { display: flex; flex-direction: column; align-items: center; }
.timeline .rail::after { content: ''; width: 3px; flex: 1; min-height: 22px; background: #DEDFDC; }
.timeline li:last-child .rail::after { display: none; }
.timeline .txt { padding-bottom: 24px; }
.timeline .txt strong { display: block; font-size: 18px; color: #8A8A8A; }
.timeline li.done .dot { background: var(--green); border-color: var(--green); color: #fff; }
.timeline li.done .rail::after { background: var(--green); }
.timeline li.cur .dot { background: var(--orange); border-color: var(--orange); color: var(--ink); box-shadow: 0 0 0 6px rgba(243,139,75,.2); }
.timeline li.done strong, .timeline li.cur strong { color: var(--ink); } .content { max-width: 820px; }
.content h2 { font-size: 34px; margin: 36px 0 12px; }
.content p, .content ul { margin: 0 0 16px; }
.photo-ph { min-height: 380px; border-radius: 28px; overflow: hidden; background: var(--charcoal); display: flex; align-items: flex-end; }
[data-back] .ico { transform: rotate(180deg); }
[hidden] { display: none !important; }
.stack > img, .site-footer img { align-self: flex-start; width: auto; } .comply > *, .split > *, .hero-grid > *, .cover-grid > * { min-width: 0; }
@media (max-width: 900px) { .comply { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .btn { white-space: normal; text-align: center; } }
.qq-facts > span { display: block; }
.qq-facts > span > .ico { display: inline-block; vertical-align: -4px; margin-right: 8px; }
.finder > * { min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) !important; } .finder { grid-template-columns: minmax(0, 1fr); } } :root { --orange: #F38B4B; --orange-dark: #C8642A; --orange-soft: #FDEBDF; }
.card.band-green { background: var(--green); border: none; }
.card.band-green h3, .card.band-green p { color: #fff; }
.icon-box.orange { background: var(--orange-soft); }
.sector .icon-box.orange { background: rgba(243,139,75,.18); }
.sector .icon-box.orange svg { stroke: #F7A36F; }
.cta-box { background: var(--charcoal); color: #fff; }
.cta-box h2 { color: #fff; }
.cta-box .lead { color: #CFCFCF !important; }
.cta-box .btn-dark { background: var(--orange); color: var(--ink); }
.cta-box .btn-dark:hover { background: #EA7A36; color: var(--ink); }
.cta-box .btn-outline { border-color: #fff; color: #fff; }
.cta-box .btn-outline:hover { background: rgba(255,255,255,.08); color: #fff; }
.step { border-top-color: var(--line); }
.step .n { color: var(--orange); opacity: .9; }
.stat { border-left-color: var(--green-mid); }
.btn-accent:hover { background: #EA7A36; }
.map-card { position: relative; min-height: 260px; border-radius: 24px; overflow: hidden; background: var(--soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px; text-align: center; border: 1px solid var(--line); } .main-nav a { white-space: nowrap; }
@media (min-width: 1181px) and (max-width: 1400px) { .header-cta .btn-outline { display: none; } .main-nav ul { gap: 18px; } } .promo-video { position: relative; border-radius: 28px; overflow: hidden; background: var(--charcoal); aspect-ratio: 16 / 9; box-shadow: 0 30px 60px -30px rgba(0,0,0,.4); }
.promo-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.promo-sound { position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border: none; border-radius: 23px; background: rgba(22,24,26,.78); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; backdrop-filter: blur(6px); }
.promo-sound:hover { background: rgba(22,24,26,.92); } .btn-dark { background: var(--charcoal); color: #fff; }
.btn-dark:hover { background: #474747; color: #fff; }
.mobile-bar .wa { background: var(--charcoal); }  .hero-actions { align-items: center; }
.hero-link { gap: 10px; font-weight: 600; } .comply-light { background: #EEF4E6; border: 1px solid #D5E3C2; color: var(--ink); }
.comply-light h2 { color: var(--ink); }
.comply-light .comply-item { background: #fff; border: 1px solid #DCE7CE; color: var(--ink); } .cta-box { flex-wrap: wrap; }
.cta-biz { flex-basis: 100%; color: #CFCFCF; font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; margin-top: 4px; }
.cta-biz:hover { color: #fff; text-decoration: underline; }
.cta-biz svg { stroke: currentColor; }
.cta-biz { display: block; }
.cta-biz svg { display: inline-block; vertical-align: -3px; margin-left: 6px; } .skip-card .btn-outline { border-color: var(--ink); }
.skip-card .price { flex-wrap: wrap; gap: 12px 16px; }
.skip-card .price-big { white-space: nowrap; } [data-open-status] { display: inline-flex; align-items: center; gap: 8px; }
.open-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grey); flex-shrink: 0; }
.is-open .open-dot { background: #7BD13A; box-shadow: 0 0 0 0 rgba(123,209,58,.6); animation: openPulse 2s infinite; }
.is-closed .open-dot { background: var(--orange); }
@keyframes openPulse { 0% { box-shadow: 0 0 0 0 rgba(123,209,58,.55); } 70% { box-shadow: 0 0 0 7px rgba(123,209,58,0); } 100% { box-shadow: 0 0 0 0 rgba(123,209,58,0); } }
@media (prefers-reduced-motion: reduce) { .is-open .open-dot { animation: none; } } .wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 999px; background: #1FAF38; color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,.22); transition: transform .15s ease, background .15s ease; }
.wa-float:hover { background: #178F2D; color: #fff; transform: translateY(-2px); }
@media (max-width: 760px) { .wa-float { display: none; } }
@media (max-width: 1100px) { .wa-float span { display: none; } .wa-float { padding: 14px; } } .skor-mark { display: block; overflow: visible; }
.brand .skor-mark { width: 78px; height: auto; }
.skor-mark .sk-loop { transform-box: view-box; transform-origin: 120px 110px; }
.skor-mark .sk-head { transform-box: fill-box; transform-origin: center; } .sk-intro .sk-skip { animation: skDrop .7s cubic-bezier(.2,.9,.3,1.25) both; }
.sk-intro .sk-band, .sk-intro .sk-edge { stroke-dasharray: 100; animation: skDraw .55s cubic-bezier(.5,0,.2,1) both; animation-delay: calc(.25s + var(--i) * .2s); }
.sk-intro .sk-head { animation: skPop .35s cubic-bezier(.2,.9,.3,1.4) both; animation-delay: calc(.7s + var(--i) * .2s); }
.sk-intro .sk-word { animation: skWord .5s cubic-bezier(.2,.9,.3,1.3) 1.25s both; transform-box: fill-box; transform-origin: center; } .skor-mark .sk-edge, .skor-mark .sk-head { transition: stroke .35s ease, stroke-width .35s ease; }
.skor-mark .sk-band { transition: filter .35s ease; }
.brand:hover .sk-edge, .brand:focus-visible .sk-edge { stroke: #D8F5A2; stroke-width: 42px; }
.brand:hover .sk-head, .brand:focus-visible .sk-head { stroke: #D8F5A2; stroke-width: 8px; }
.brand:hover .sk-band, .brand:focus-visible .sk-band { filter: brightness(1.15); }
@keyframes skDrop { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes skDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes skPop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes skWord { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes skTurn { to { transform: rotate(120deg); } }
@keyframes skCycle { 0%, 72% { transform: rotate(0); } 100% { transform: rotate(120deg); } } .proof-emblem { display: grid; grid-template-columns: 1fr minmax(300px, 520px) 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; }
.proof-emblem .stats-col { display: grid; gap: 40px; }
.skor-emblem { width: 100%; height: auto; display: block; overflow: visible; }
.skor-emblem .se-in { transform-box: view-box; transform-origin: 340px 340px; animation: seIn 1.2s cubic-bezier(.2,.7,.2,1) both; }
.skor-emblem .se-ring { animation: seIn 1.2s cubic-bezier(.2,.7,.2,1) .2s both, seSpin 180s linear 1.4s infinite; }
.skor-emblem .se-core { animation: seIn 1.2s cubic-bezier(.2,.7,.2,1) both, seSpin 90s linear 1.2s infinite reverse; }
.skor-emblem .se-cap { font: 500 15px var(--text); fill: #CFCFCF; letter-spacing: .02em; }
.skor-emblem .se-route { stroke: #A5D65A; stroke-opacity: .28; stroke-width: 1.3; fill: none; stroke-dasharray: 4 8; animation: seFlow 2.4s linear infinite; }
.skor-emblem .se-st { transform-box: fill-box; transform-origin: center; animation: sePop .6s cubic-bezier(.2,.9,.3,1.3) both; }
.skor-emblem .se-lbl { font: 600 17px var(--text); fill: #fff; }
.skor-emblem .se-halo { transform-box: view-box; transform-origin: 340px 340px; animation: seHalo 5s ease-in-out infinite; }
.skor-emblem .se-mark .sk-edge { animation: skEdge 3.6s ease-in-out infinite; animation-delay: calc(1.5s + var(--i) * 1.2s); }
.skor-emblem .se-mark .sk-head { animation: skHeadGlow 3.6s ease-in-out infinite; animation-delay: calc(1.5s + var(--i) * 1.2s); }
.skor-emblem .se-mark .sk-band { animation: skBright 3.6s ease-in-out infinite; animation-delay: calc(1.5s + var(--i) * 1.2s); }
@keyframes skEdge { 0%, 70%, 100% { stroke: #fff; stroke-width: 35px; } 35% { stroke: #D8F5A2; stroke-width: 46px; } }
@keyframes skHeadGlow { 0%, 70%, 100% { stroke: #fff; stroke-width: 3.5px; } 35% { stroke: #D8F5A2; stroke-width: 10px; } }
@keyframes skBright { 0%, 70%, 100% { filter: none; } 35% { filter: brightness(1.22) saturate(1.1); } }
.skor-emblem.is-off *, .skor-emblem.is-off { animation-play-state: paused !important; }
@keyframes seIn { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes sePop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes seSpin { to { transform: rotate(360deg); } }
@keyframes seFlow { to { stroke-dashoffset: -24; } }
@keyframes seHalo { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } }
@media (max-width: 900px) {
.proof-emblem { grid-template-columns: 1fr 1fr; }
.proof-emblem .skor-emblem-wrap { grid-column: 1 / -1; order: -1; max-width: 460px; margin: 0 auto; width: 100%; }
.proof-emblem .stats-col { gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
.skor-mark *, .skor-emblem * { animation: none !important; }
.skor-emblem .se-truck { display: none; }
} .header-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--ink); padding: 0 6px; white-space: nowrap; }
.header-phone:hover { color: var(--orange-dark); }
@media (max-width: 640px) { .header-phone { display: none; } }
.wa-float { padding: 14px; }
.foot-mark { display: block; width: 104px; }
@media (max-width: 760px) {
.header-cta .btn-accent { display: none; } .proof-emblem .skor-emblem-wrap { padding: 0 9%; }
} .spec { background: var(--charcoal); color: #fff; border-radius: 24px; padding: clamp(24px, 3vw, 34px); }
.spec-h { font-size: 15px; font-family: var(--text); font-weight: 600; color: #CFCFCF; margin: 0 0 8px; letter-spacing: .02em; }
.spec-t { width: 100%; border-collapse: collapse; }
.spec-t tr { border-top: 1px solid #474747; }
.spec-t td, .spec-t th { padding: 14px 0; vertical-align: top; text-align: left; }
.spec-t .q { font-family: var(--display); font-size: 40px; font-weight: 800; color: var(--orange); line-height: .9; width: 56px; }
.spec-t th { font-size: 18px; color: #fff; width: 42%; padding-right: 12px; }
.spec-t .d { color: #CFCFCF; font-size: 15px; }
.spec-l { list-style: none; margin: 14px 0 0; padding: 16px 0 0; border-top: 1px solid #474747; display: grid; gap: 10px; }
.spec-l li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.eq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.eq { padding: 26px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.eq b { font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.eq span { font-weight: 600; color: var(--green); }
.eq p { margin: 8px 0 0; color: var(--body); font-size: 16px; }
@media (max-width: 900px) { .eq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .eq-grid { grid-template-columns: minmax(0, 1fr); } }
.seq { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.seq li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); }
.seq li:last-child { border-bottom: 1px solid var(--line); }
.seq .n { font-family: var(--display); font-size: 44px; font-weight: 800; color: var(--orange); line-height: 1; }
.seq strong { font-size: 22px; display: block; margin-bottom: 6px; }
.seq p { margin: 0; color: var(--body); max-width: 72ch; }
@media (max-width: 560px) { .seq li { grid-template-columns: minmax(0, 1fr); gap: 8px; } .seq .n { font-size: 32px; } }
.ws-table table { min-width: 760px; }
.ws-table th[scope="row"] { font-weight: 700; color: var(--ink); }
.planner-band { margin-top: clamp(40px, 6vw, 72px); }
.planner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .planner { grid-template-columns: minmax(0, 1fr); } }
.pl-f { display: grid; gap: 10px; font-weight: 600; color: #fff; grid-template-columns: 1fr auto; align-items: baseline; }
.pl-f output { font-family: var(--display); font-size: 26px; font-weight: 800; color: var(--orange); }
.pl-f input { grid-column: 1 / -1; width: 100%; accent-color: var(--orange); height: 28px; }
.pl-seg { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pl-seg legend { color: #CFCFCF; font-size: 15px; margin-bottom: 8px; padding: 0; }
.pl-seg label { display: inline-flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 12px; border: 1px solid #555; color: #fff; cursor: pointer; }
.pl-seg label:has(input:checked) { border-color: var(--orange); background: rgba(243,139,75,.12); }
.pl-seg input { accent-color: var(--orange); }
.pl-out { background: #fff; color: var(--ink); border-radius: 24px; padding: clamp(22px, 3vw, 32px); display: grid; gap: 0; }
.pl-row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--soft); }
.pl-row span { color: var(--muted); }
.pl-row b { font-family: var(--display); font-size: 24px; font-weight: 800; text-align: right; }
.pl-row:first-child b { color: var(--green); }
.pl-note { margin: 14px 0 18px; color: var(--body); font-size: 15px; min-height: 2.6em; }
.ctl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ctl li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--line); }
.ctl li div { display: grid; gap: 4px; }
.ctl strong { font-size: 18px; }
.ctl span { color: var(--body); }
.chips-static { display: flex; flex-wrap: wrap; gap: 10px; }
.chips-static span { padding: 10px 16px; border-radius: 999px; background: var(--soft); font-weight: 600; }
.notice-link { text-decoration: none; color: var(--ink); justify-content: space-between; flex-wrap: wrap; }
.notice-link:hover { color: var(--ink); border-color: var(--orange); }
@media (max-width: 560px) {
.spec-t tr { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 8px; padding: 12px 0; }
.spec-t td, .spec-t th { padding: 0; width: auto; }
.spec-t .q { grid-row: span 2; }
.spec-t .d { grid-column: 2; margin-top: 2px; }
} .sl-a img { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M509 67 476 32 436 10 424 6 373 6 363 10 346 22 328 45 233 231 261 256 288 276 411 266 424 250 511 77ZM439 0 449 10 486 29 506 51 594 234 614 272 607 282 584 298 576 308 581 314 699 369 707 375 727 381 739 391 749 394 757 385 767 304 772 285 772 269 777 250 777 234 782 215 782 199 787 179 787 163 789 160 789 147 784 141 759 160 749 163 682 32 667 13 649 0Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M509 67 476 32 436 10 424 6 373 6 363 10 346 22 328 45 233 231 261 256 288 276 411 266 424 250 511 77ZM439 0 449 10 486 29 506 51 594 234 614 272 607 282 584 298 576 308 581 314 699 369 707 375 727 381 739 391 749 394 757 385 767 304 772 285 772 269 777 250 777 234 782 215 782 199 787 179 787 163 789 160 789 147 784 141 759 160 749 163 682 32 667 13 649 0Z'/%3E%3C/svg%3E"); }
.sl-b img { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M469 830 607 997 617 997 617 968 622 949 749 946 767 939 779 929 802 897 895 708 890 702 865 728 850 737 822 747 787 747 784 744 749 744 747 747 744 744 742 747 739 744 624 744 619 728 622 724 622 696 612 686 479 814ZM910 522 900 538 855 692 805 715 799 721 802 731 810 740 820 740 845 731 875 708 910 663 920 644 930 612 930 577 920 538Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M469 830 607 997 617 997 617 968 622 949 749 946 767 939 779 929 802 897 895 708 890 702 865 728 850 737 822 747 787 747 784 744 749 744 747 747 744 744 742 747 739 744 624 744 619 728 622 724 622 696 612 686 479 814ZM910 522 900 538 855 692 805 715 799 721 802 731 810 740 820 740 845 731 875 708 910 663 920 644 930 612 930 577 920 538Z'/%3E%3C/svg%3E"); }
.sl-c img { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M100 394 95 401 105 413 128 426 130 433 83 564 75 596 75 622 88 660 178 840 185 849 190 843 193 830 201 862 216 897 241 933 261 946 271 949 318 949 321 952 449 952 454 946 454 865 446 856 381 840 246 734 203 734 195 744 193 740 273 522 278 519 316 542 321 535 283 311 278 304 263 308Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M100 394 95 401 105 413 128 426 130 433 83 564 75 596 75 622 88 660 178 840 185 849 190 843 193 830 201 862 216 897 241 933 261 946 271 949 318 949 321 952 449 952 454 946 454 865 446 856 381 840 246 734 203 734 195 744 193 740 273 522 278 519 316 542 321 535 283 311 278 304 263 308Z'/%3E%3C/svg%3E"); }
.skor-logo { position: relative; display: block; aspect-ratio: 300 / 234; }
.skor-logo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sl-glow { position: absolute; inset: 0; opacity: 0; filter: drop-shadow(0 0 var(--glow, 4px) rgba(196, 240, 120, .95)); transition: opacity .35s ease; pointer-events: none; }
.sl-glow img { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; filter: brightness(1.35) saturate(1.2); }
.brand .skor-logo { width: 74px; height: auto; }
.brand:hover .sl-glow, .brand:focus-visible .sl-glow { opacity: 1; }
.sl-intro .sl-glow { animation: slGlow 1.3s ease-in-out 1; animation-delay: calc(.4s + var(--i) * .35s); }
.foot-mark .skor-logo { width: 104px; }
.se-stage { position: relative; }
.se-logo { position: absolute; left: 50%; top: 50%; width: 47%; transform: translate(-50%, -52%); --glow: 12px; }
.se-logo .sl-glow { animation: slGlow 3.6s ease-in-out infinite; animation-delay: calc(1.2s + var(--i) * 1.2s); }
.se-stage:has(.skor-emblem.is-off) .sl-glow { animation-play-state: paused; }
@keyframes slGlow { 0%, 70%, 100% { opacity: 0; } 35% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sl-glow { animation: none !important; } } .map.is-live { background: #E9EEE3; aspect-ratio: auto; height: clamp(380px, 46vw, 560px); box-shadow: 0 30px 60px -36px rgba(30, 60, 0, .45); isolation: isolate; }
.map .map-canvas { position: absolute; inset: 0; z-index: 0; }
.map .map-key { position: absolute; left: 14px; bottom: 14px; z-index: 500; display: flex; flex-wrap: wrap; gap: 10px 14px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.94); font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px -10px rgba(0,0,0,.3); }
.map .map-key span { display: inline-flex; align-items: center; gap: 6px; }
.map .map-key i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.map .k-core { background: var(--orange); }
.map .k-outer { background: var(--green-mid); }
.map .map-locate { position: absolute; right: 14px; bottom: 14px; z-index: 500; border: 0; border-radius: 999px; padding: 10px 16px; font: inherit; font-weight: 700; font-size: 14px; background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 6px 20px -8px rgba(0,0,0,.35); }
.map .map-locate:hover { background: var(--green-pale); }
.town-pin span { display: inline-block; transform: translate(-11px, -50%); white-space: nowrap; padding: 5px 10px 5px 22px; border-radius: 999px; background: #fff; font: 700 13px/1.2 var(--text); color: var(--ink); box-shadow: 0 4px 14px -6px rgba(0,0,0,.4); position: relative; }
.town-pin span::before { content: ""; position: absolute; left: 8px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--green-mid); box-shadow: 0 0 0 3px rgba(109,170,26,.25); }
.town-pin.core span::before { background: var(--orange); box-shadow: 0 0 0 3px rgba(243,139,75,.3); }
.depot-pin { position: relative; }
.depot-pin .dp-dot { position: absolute; inset: 8px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 22px -6px rgba(0,0,0,.45); border: 3px solid var(--orange); }
.leaflet-container .depot-pin .dp-dot img { width: 34px !important; height: auto; max-width: 34px !important; }
.depot-pin .dp-ring { position: absolute; inset: 0; border-radius: 50%; background: rgba(243,139,75,.35); animation: dpPulse 2.6s ease-out infinite; }
@keyframes dpPulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .depot-pin .dp-ring { animation: none; } }
.leaflet-popup-content { font: 14px/1.45 var(--text); }
.leaflet-popup-content b { font-size: 15px; }
.pp-core { color: var(--orange-dark); font-weight: 600; }
.pp-outer { color: var(--green); font-weight: 600; }
.leaflet-container a.leaflet-popup-close-button { font-size: 20px; } .btn-dark { background: var(--green); color: #fff; }
.btn-dark:hover { background: #4E8A0B; color: #fff; }
.mobile-bar .wa { background: #1FAF38; color: #fff; }
.town-pin.side-l span { transform: translate(calc(-100% + 11px), -50%); padding: 5px 22px 5px 10px; }
.town-pin.side-l span::before { left: auto; right: 8px; }
@media (max-width: 600px) {
.map.is-live { height: 440px; }
.map .map-key { top: 12px; bottom: auto; left: 56px; right: 12px; font-size: 12px; padding: 8px 10px; }
.town-pin span { font-size: 11px; padding: 4px 8px 4px 19px; transform: translate(-9px, -50%); }
.town-pin.side-l span { padding: 4px 19px 4px 8px; transform: translate(calc(-100% + 9px), -50%); }
.town-pin span::before { width: 8px; height: 8px; margin-top: -4px; left: 6px; }
.town-pin.side-l span::before { right: 6px; }
}
@media (max-width: 600px) { .town-pin.dot-sm span { font-size: 0; padding: 0; width: 18px; height: 18px; } .town-pin.dot-sm span::before { left: 4.5px; } } .about-skips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; padding: 24px 16px 18px; border-radius: 28px; background: linear-gradient(180deg, #fff, var(--green-pale)); }
.about-skips figure { margin: 0; text-align: center; }
.about-skips img { width: 100%; height: auto; }
.about-skips figcaption { font-size: 14px; color: var(--muted); }
.about-skips figcaption b { font-family: var(--display); font-size: 20px; color: var(--ink); display: block; }
.band-green .stat { border-left-color: var(--lime); }
.band-green .stat span { color: var(--green-pale); }
.about-copy p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--body); max-width: 64ch; }
.values-card { background: linear-gradient(160deg, #4A8508, var(--green) 70%); color: #fff; }
.values-card p { margin: 0; }
.values-card strong { color: var(--lime); }
.values-card span { color: rgba(255,255,255,.88); }
@media (max-width: 700px) { .about-skips { grid-template-columns: 1fr 1fr; } .about-skips figure:last-child { grid-column: 1 / -1; } }
.contact-val { font-family: var(--display); font-size: 22px; line-height: 1.2; overflow-wrap: normal; word-break: normal; }
.contact-val.is-email { font-size: clamp(17px, 1.6vw, 21px); } .svc-hero { display: grid; gap: 28px; }
.picker { padding: 22px; border-radius: 24px; background: linear-gradient(135deg, #fff 0%, var(--green-pale) 100%); border: 1px solid var(--line); box-shadow: 0 24px 50px -36px rgba(61,110,5,.6); }
.picker-q { margin: 0 0 12px; font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--ink); }
.picker-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.picker-chips button { font: inherit; font-weight: 700; font-size: 15px; padding: 11px 18px; border-radius: 999px; border: 2px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.picker-chips button:hover { border-color: var(--green-mid); transform: translateY(-1px); }
.picker-chips button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.picker-out { margin: 12px 0 0; color: var(--muted); font-size: 15px; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.svc { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .25s ease, box-shadow .25s ease, opacity .3s ease, border-color .25s ease; }
.svc:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(0,0,0,.35); }
.svc h3 { margin: 4px 0 0; font-size: 22px; }
.svc p { margin: 0; color: var(--body); }
.svc-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--green-mid), var(--green)); box-shadow: 0 10px 20px -12px rgba(61,110,5,.8); }
.svc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.svc-tags span { padding: 4px 11px; border-radius: 999px; background: var(--soft); font-size: 13px; font-weight: 600; }
.svc-big { background: linear-gradient(140deg, var(--orange) 0%, #F7A56F 100%); border: none; }
.svc-big .svc-ic { background: #fff; box-shadow: none; }
.svc-big p { color: #2a1a0f; }
.svc-match { position: absolute; top: 16px; right: 16px; padding: 4px 10px; border-radius: 999px; background: var(--green); color: #fff; font-size: 12px; font-weight: 800; opacity: 0; transform: scale(.8); transition: opacity .25s ease, transform .25s ease; }
[data-picking] .svc.is-pick { border-color: var(--green); box-shadow: 0 0 0 3px rgba(109,170,26,.25), 0 24px 44px -30px rgba(61,110,5,.6); transform: translateY(-3px); }
[data-picking] .svc.is-pick .svc-match { opacity: 1; transform: none; }
[data-picking] .svc.is-dim { opacity: .38; }
.skip-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 18px; background: linear-gradient(180deg, #fff, var(--green-pale)); }
.skip-strip .ss { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); padding: 8px; border-radius: 16px; transition: background .2s ease; }
.skip-strip .ss:hover { background: rgba(255,255,255,.8); }
.skip-strip img { width: 100%; height: auto; }
.ss-name b { font-family: var(--display); font-size: 22px; }
.ss-price { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--orange-dark); }
.ss-price small { font-family: var(--text); font-weight: 500; font-size: 13px; color: var(--muted); }
@media (max-width: 700px) { .skip-strip { grid-template-columns: 1fr; } .skip-strip .ss { flex-direction: row; align-items: center; flex-wrap: wrap; } .skip-strip img { width: 45%; } }
@media (prefers-reduced-motion: reduce) { .svc, .svc-match, .picker-chips button { transition: none; } } .main-nav .caret { margin-left: 4px; vertical-align: middle; opacity: .7; }
.main-nav .has-sub { position: relative; }
@media (min-width: 1181px) {
.main-nav .sub { list-style: none; margin: 0; padding: 8px; position: absolute; left: -12px; top: 100%; min-width: 240px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 40px -24px rgba(0,0,0,.35); display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60; }
.main-nav .has-sub:hover .sub, .main-nav .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.main-nav .sub a { display: block; padding: 10px 12px; border-radius: 10px; border: 0; font-size: 15px; white-space: nowrap; }
.main-nav .sub a:hover { background: var(--green-pale); }
.main-nav .sub a[aria-current="page"] { color: var(--green); font-weight: 700; }
}
@media (max-width: 1180px) {
.main-nav .caret { display: none; }
.main-nav .sub { list-style: none; margin: 0; padding: 0 0 0 16px; }
.main-nav .sub a { font-size: 15px; color: var(--muted); }
} .ci-why { background: linear-gradient(150deg, #4A8508, var(--green) 65%); color: #fff; border-radius: 26px; padding: clamp(22px, 3vw, 32px); box-shadow: 0 30px 60px -34px rgba(61,110,5,.7); }
.ci-why h2 { color: #fff; font-size: 22px; margin: 0 0 6px; }
.ci-why-row { display: flex; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.18); font-weight: 600; }
.ci-why-row > span { flex: 0 0 34px; height: 34px; border-radius: 10px; background: var(--lime); display: grid; place-items: center; }
.ci-stats { margin-top: clamp(48px, 7vw, 80px); padding: 44px 0; background: var(--orange); }
.ci-stats .stat { border-left-color: #16181A; }
.ci-stats .stat b { color: #16181A; }
.ci-stats .stat span { color: #3A2414; font-weight: 600; }
.ci-week-wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 48px); align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: 30px; background: linear-gradient(140deg, #34600A, var(--green) 60%, #5C9A12); color: #fff; }
.ci-week-wrap h2 { color: #fff; }
.ci-week-wrap p { margin: 0; color: rgba(255,255,255,.9); }
.ci-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.ci-day { background: rgba(255,255,255,.96); color: var(--ink); border-radius: 16px; padding: 12px 8px; min-height: 170px; display: flex; flex-direction: column; gap: 8px; }
.ci-day b { font-family: var(--display); font-size: 16px; text-align: center; }
.ci-day.is-free { background: rgba(255,255,255,.55); }
.ci-job { font-size: 12px; font-weight: 700; line-height: 1.25; padding: 8px 7px; border-radius: 10px; color: #fff; animation: ciPop .5s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: calc(.15s + var(--d) * .14s); animation-play-state: paused; }
.ci-week.is-in .ci-job { animation-play-state: running; }
.ci-job.j-emp { background: #3A6F98; }
.ci-job.j-swap { background: var(--orange); color: #16181A; }
.ci-job.j-bags { background: #B08A00; }
.ci-free { font-size: 12px; color: var(--muted); text-align: center; margin-top: auto; }
@keyframes ciPop { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ci-job { animation: none; } }
@media (max-width: 900px) { .ci-week-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ci-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ci-day { min-height: 120px; } }
.ci-big { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding: 24px 28px; border-radius: 22px; text-decoration: none; color: #16181A; background: linear-gradient(120deg, var(--orange), #F7A56F); font-size: 18px; transition: transform .2s ease; }
.ci-big:hover { transform: translateY(-2px); color: #16181A; }
.ci-hero h1 { font-size: clamp(38px, 4.4vw, 60px); }
.ci-job { overflow-wrap: anywhere; hyphens: auto; } .sz { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 18px; box-shadow: 0 34px 60px -40px rgba(61,110,5,.55); }
.sz-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sz-tabs button { font: inherit; text-align: left; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--line); background: #fff; cursor: pointer; display: flex; flex-direction: column; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.sz-tabs button b { font-family: var(--display); font-size: 24px; line-height: 1.1; }
.sz-tabs button span { font-size: 13px; color: var(--muted); }
.sz-tabs button:hover { border-color: var(--green-mid); }
.sz-tabs button[aria-selected="true"] { background: var(--orange); border-color: var(--orange); }
.sz-tabs button[aria-selected="true"] span { color: #3A2414; }
.sz-stage { margin: 14px 0 6px; border-radius: 20px; background: radial-gradient(ellipse at 50% 85%, var(--green-pale), #fff 70%); }
.sz-stage img { width: 100%; height: auto; display: block; animation: szIn .45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes szIn { from { opacity: 0; transform: translateY(-12px) scale(.96); } to { opacity: 1; transform: none; } }
.sz-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sz-price b { font-family: var(--display); font-size: 40px; font-weight: 800; color: var(--orange-dark); line-height: 1; }
.sz-price span { color: var(--muted); font-size: 14px; }
.sz-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 10px; }
.sz-facts div { background: var(--soft); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; }
.sz-facts strong { font-family: var(--display); font-size: 20px; }
.sz-facts span { font-size: 13px; color: var(--muted); }
.sz-best { margin: 0 0 14px; color: var(--body); }
.sz-warn { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: #FFE9C7; color: #8A3A00; font-size: 13px; font-weight: 700; }
.scale-wrap { overflow-x: auto; }
.scale-scene { width: 100%; min-width: 640px; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .sz-stage img { animation: none; } } .area-facts { display: flex; flex-wrap: wrap; gap: 10px; }
.area-facts div { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; display: flex; flex-direction: column; min-width: 130px; }
.area-facts b { font-family: var(--display); font-size: 26px; line-height: 1.1; color: var(--green); }
.area-facts span { font-size: 14px; color: var(--muted); }
.area-skip { position: relative; border-radius: 30px; padding: clamp(20px, 4vw, 44px); background: radial-gradient(ellipse at 50% 80%, var(--green-pale), #fff 72%); border: 1px solid var(--line); }
.area-skip img { width: 100%; height: auto; display: block; }
.area-pin { position: absolute; top: 18px; left: 18px; display: inline-flex; gap: 6px; align-items: center; background: var(--orange); color: #16181A; font-weight: 700; border-radius: 999px; padding: 7px 14px 7px 10px; }
.area-size img { width: 100%; max-width: 300px; height: auto; align-self: center; }
.area-price { font-family: var(--display); font-size: 30px; font-weight: 800; color: var(--orange-dark); margin: 0; }
.area-price small { font-family: var(--body-font, inherit); font-size: 14px; font-weight: 400; color: var(--muted); }
.area-note { background: var(--soft); border-style: dashed; }
.area-biz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: 30px; background: linear-gradient(140deg, #34600A, var(--green) 60%, #5C9A12); color: #fff; }
.area-biz h2 { color: #fff; } .area-biz p { margin: 0; color: rgba(255,255,255,.9); }
.area-biz-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-weight: 600; font-size: 17px; }
.area-biz-list li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.1); }
.area-biz-list svg { flex: 0 0 22px; }
.area-faq details.faq:last-child { border-bottom: 1px solid #C8CAC6; }
.area-others a { font-weight: 600; }
.cov-areas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cov-areas a { padding: 10px 16px; border-radius: 999px; background: var(--green-pale); color: var(--green); font-weight: 700; text-decoration: none; }
.cov-areas a:hover { background: var(--lime); color: #16181A; }
@media (max-width: 900px) { .area-biz { grid-template-columns: minmax(0, 1fr); } } .nav-acct { display: none; }
@media (max-width: 1180px) { .main-nav .nav-acct { display: block; } .main-nav .nav-acct a { color: var(--green); font-weight: 700; } }
@media (max-width: 820px) { .topbar .tb-acct { display: none !important; } }
.topbar .tb-acct, .topbar .tb-right a { white-space: nowrap; } .topbar .tb-land { white-space: nowrap; } .topbar .tb-land { display: none; }
@media (min-width: 1200px) { .topbar .tb-land { display: inline; } .topbar .tb-mail { display: none; } } @media (min-width: 1181px) and (max-width: 1279px) { .site-header .header-phone { display: none; } }