@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #15332b;
  --muted: #60756e;
  --canvas: #fbfaf5;
  --accent: #f7bb28;
  --accent-deep: #e6a810;
  --line: rgba(21, 51, 43, .14);
  --shadow: 0 20px 60px rgba(24, 65, 52, .12);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: var(--canvas); font-family: Manrope, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, select { font: inherit; }
.site-shell { isolation: isolate; display: flex; flex-direction: column; min-height: 100vh; overflow: hidden; padding: 30px clamp(24px, 7vw, 112px) 28px; background: radial-gradient(circle at 83% 15%, rgba(247, 187, 40, .2), transparent 21rem), radial-gradient(circle at 11% 88%, rgba(93, 170, 130, .11), transparent 23rem); }
.site-header, .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 19px; font-weight: 800; letter-spacing: -1.1px; text-decoration: none; }
.brand-mark { width: 28px; height: 28px; color: #e9ae17; }
.language-picker { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, .5); color: var(--ink); }
.language-picker svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.language-picker select { max-width: 105px; cursor: pointer; border: 0; outline: none; color: inherit; background: transparent; font-size: 13px; font-weight: 700; }
.hero { position: relative; z-index: 1; width: min(720px, 100%); margin: auto; padding: 80px 0 90px; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; color: #567168; font-family: "DM Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow-dot, .status > span:first-child { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(247, 187, 40, .18); }
h1 { max-width: 690px; margin: 0 auto; font-size: clamp(42px, 6vw, 76px); line-height: 1.07; letter-spacing: -.065em; font-weight: 800; }
.intro { max-width: 570px; margin: 27px auto 0; color: var(--muted); font-size: clamp(15px, 1.65vw, 17px); line-height: 1.75; }
.progress-area { width: min(430px, 100%); margin: 44px auto 0; text-align: left; }
.progress-label { display: flex; justify-content: space-between; margin-bottom: 10px; color: #456158; font-family: "DM Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.progress-track { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(21, 51, 43, .1); }
.progress-track span { display: block; width: 68%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f4b51c, #ffd55d); box-shadow: 0 0 14px rgba(247, 187, 40, .55); animation: grow 1.2s ease-out both; transform-origin: left; }
.honeycomb { position: absolute; z-index: -1; width: clamp(108px, 16vw, 190px); aspect-ratio: .866; border: 1px solid rgba(21, 51, 43, .1); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.honeycomb::before, .honeycomb::after { position: absolute; inset: 22%; content: ""; border: inherit; clip-path: inherit; }
.honeycomb-one { top: 9%; right: -21%; transform: rotate(15deg); background: rgba(255, 213, 93, .08); }
.honeycomb-two { bottom: 1%; left: -23%; transform: rotate(-14deg); background: rgba(93, 170, 130, .06); }
.site-footer { position: relative; z-index: 1; color: #71837c; font-size: 12px; font-weight: 600; }
.site-footer p { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.footer-separator { color: #b1bdb8; }
.status { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; color: #47655a; }
.status > span:first-child { width: 6px; height: 6px; background: #6aac82; box-shadow: 0 0 0 4px rgba(106, 172, 130, .12); }
.cookie-banner { position: fixed; z-index: 10; right: 24px; bottom: 24px; display: grid; grid-template-columns: auto 1fr; gap: 0 13px; width: min(470px, calc(100% - 32px)); padding: 20px; border: 1px solid rgba(21, 51, 43, .1); border-radius: 16px; background: rgba(255, 255, 255, .94); box-shadow: var(--shadow); backdrop-filter: blur(14px); animation: enter .5s .25s both; }
.cookie-banner[hidden] { display: none; }
.cookie-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: #fff1c8; color: #b47700; font-size: 17px; }
.cookie-copy h2 { margin: 2px 0 4px; font-size: 14px; letter-spacing: -.02em; }
.cookie-copy p { margin: 0; color: #657973; font-size: 12px; line-height: 1.5; }
.cookie-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 8px; margin-top: 17px; }
.button { min-height: 34px; cursor: pointer; border: 1px solid #e3a812; border-radius: 8px; padding: 0 12px; color: #2d2919; background: var(--accent); font-size: 12px; font-weight: 800; transition: transform .18s ease, background .18s ease; }
.button:hover { background: #ffca3d; transform: translateY(-1px); }
.button-quiet { border-color: transparent; color: #547067; background: transparent; }
.button-quiet:hover { background: #edf1ee; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(231, 170, 19, .55); outline-offset: 3px; }
@keyframes grow { from { transform: scaleX(.15); } to { transform: scaleX(1); } }
@keyframes enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 560px) { .site-shell { padding: 22px 20px; } .hero { padding: 68px 0 70px; } .site-footer { align-items: flex-start; flex-direction: column-reverse; gap: 12px; } .cookie-banner { right: 16px; bottom: 16px; padding: 17px; } .cookie-actions { justify-content: stretch; } .button { flex: 1; } .honeycomb-one { right: -35%; } .honeycomb-two { left: -40%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }