:root {
  --oo: #172840;        /* talveöö aknast */
  --oo-2: #22385a;
  --lumi: #f4f6f8;      /* külm lumi, mitte kreem */
  --punane: #8e1b27;    /* jõuluvana mütsi punane */
  --punane-2: #6f1420;
  --kuld: #e3b057;      /* küünlavalgus */
  --tint: #1f2733;      /* põhitekst */
  --hall: #5a6576;
  --joon: #d5dbe3;
  --hand: "Caveat", cursive;
  --text: "Alegreya Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--lumi); color: var(--tint);
  font: 400 1.125rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--punane); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--kuld); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--hand); font-weight: 700; line-height: 1.05; margin: 0 0 .4em; }
h1 { font-size: clamp(2.6rem, 5.5vw, 4.4rem); }
h2 { font-size: clamp(2.2rem, 4vw, 3.1rem); color: var(--punane-2); }
h3 { font-size: 1.9rem; color: var(--tint); }

/* ---------- päis ---------- */
.top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px clamp(16px, 4vw, 48px); background: var(--oo); color: #fff;
}
.logo { font: 700 2rem/1 var(--hand); color: #fff; text-decoration: none; }
.top-cta { color: var(--kuld); font-weight: 500; text-decoration: none; }
.top-cta:hover { text-decoration: underline; }

/* ---------- hero ---------- */
.hero {
  background: var(--oo); color: #f1f3f7;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px);
  align-items: center; padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 48px) clamp(40px, 6vw, 80px);
}
.hero h1 { color: #fff; }
.lead { font-size: 1.25rem; max-width: 34em; color: #d7deea; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 28px; }
.hero .link { color: #fff; }
.hero-video { margin: 0; }
.hero-video video {
  width: 100%; aspect-ratio: 16 / 9; background: #000;
  border-radius: 6px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -20px rgba(0,0,0,.6);
}
.hero-video figcaption { margin-top: 10px; font-size: .95rem; color: #9fb0c8; }

.btn {
  display: inline-block; background: var(--punane); color: #fff; border: 0; cursor: pointer;
  font: 700 1.1rem/1 var(--text); padding: 16px 22px; border-radius: 4px; text-decoration: none;
}
.btn:hover { background: var(--punane-2); }
.hero .btn { background: var(--kuld); color: var(--oo); }
.hero .btn:hover { background: #f0c374; }
.btn:disabled { opacity: .6; cursor: wait; }

/* ---------- kaheksakanna-kudumi riba: lehe üks julge element ---------- */
.band {
  height: 44px;
  background-color: var(--punane);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 11 11' shape-rendering='crispEdges' fill='%23f4f6f8'%3E%3Cpath d='M5 1h1v1H5zM2 2h1v1H2zM8 2h1v1H8zM3 3h1v1H3zM5 3h1v1H5zM7 3h1v1H7zM1 5h1v1H1zM3 5h1v1H3zM7 5h1v1H7zM9 5h1v1H9zM4 4h3v3H4zM3 7h1v1H3zM5 7h1v1H5zM7 7h1v1H7zM2 8h1v1H2zM8 8h1v1H8zM5 9h1v1H5z'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: center;
  border-top: 4px solid var(--kuld); border-bottom: 4px solid var(--kuld);
}

/* ---------- sektsioonid ---------- */
.sec { padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 48px); max-width: 1180px; margin: 0 auto; }

.raamat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.raamat-pilt img { border-radius: 4px; box-shadow: 0 20px 40px -24px rgba(23,40,64,.55); }
.isiklik { list-style: none; padding: 0; margin: 0; }
.isiklik li { padding: 12px 0; border-bottom: 1px solid var(--joon); }
.isiklik li:last-child { border-bottom: 0; }
.note { font: 500 1.5rem/1.2 var(--hand); color: var(--punane-2); margin-top: 18px; }

/* tegevuse järjekord on päris järjestus, seega nummerdame */
.sammud { list-style: none; counter-reset: s; padding: 0; margin: 32px 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.sammud li { counter-increment: s; position: relative; padding-top: 72px; }
.sammud li::before {
  content: counter(s); position: absolute; top: 0; left: 0;
  font: 700 4rem/1 var(--hand); color: var(--kuld);
}
.sammud p { margin: 0; color: var(--hall); max-width: 30em; }

.pakett-list { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0; margin-top: 28px;
  border-top: 2px solid var(--tint); }
.pakett { padding: 24px clamp(16px, 2vw, 28px) 8px 0; }
.pakett + .pakett { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--joon); }
.pakett p { color: var(--hall); margin: 0 0 12px; }
.pakett-pea h3 { color: var(--punane-2); font-size: 2.3rem; }
.hind { font-weight: 700; color: var(--tint) !important; }

/* ---------- eelregistreerumine ---------- */
.teavita { max-width: none; background: var(--oo); color: #e9eef6; }
.teavita-sisu { max-width: 560px; margin: 0 auto; }
.teavita h2 { color: #fff; }
.teavita a { color: var(--kuld); }
form { display: grid; gap: 8px; margin-top: 24px; }
label { font-weight: 500; margin-top: 10px; }
input[type=email], select {
  font: inherit; padding: 13px 14px; border-radius: 4px; border: 1px solid #44597a;
  background: #0f1d31; color: #fff; width: 100%;
}
input[type=email]:focus, select:focus { border-color: var(--kuld); }
.nõus { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-weight: 400; font-size: 1rem; color: #c4cfdf; margin: 16px 0 8px; }
.nõus input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--kuld); }
.mesi { position: absolute; left: -9999px; width: 1px; height: 1px; }
.teavita .btn { background: var(--kuld); color: var(--oo); justify-self: start; }
.teavita .btn:hover { background: #f0c374; }
.vastus { min-height: 1.6em; margin: 6px 0 0; font-weight: 500; color: #fff; }

/* ---------- KKK ---------- */
.kkk { max-width: 820px; }
details { border-bottom: 1px solid var(--joon); }
summary { cursor: pointer; padding: 18px 32px 18px 0; font-weight: 700; font-size: 1.2rem; list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font: 700 1.9rem/1 var(--hand); color: var(--punane); transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 0 0 20px; color: var(--hall); max-width: 40em; }
@media (prefers-reduced-motion: reduce) { summary::after { transition: none; } }

.jalus { padding: 32px clamp(16px, 4vw, 48px); background: var(--tint); color: #b8c2d0; font-size: .95rem; }
.jalus p { margin: 4px 0; }
.jalus a { color: #fff; }

/* ---------- privaatsusleht ---------- */
.dok { max-width: 760px; }
.dok h2 { font-size: 2rem; margin-top: 1.4em; }
.dok li { margin-bottom: 6px; }

/* ---------- mobiil ---------- */
@media (max-width: 860px) {
  .hero, .raamat { grid-template-columns: 1fr; }
  .hero-video { order: -1; }
  .sammud { grid-template-columns: 1fr; }
  .pakett-list { grid-template-columns: 1fr; }
  .pakett, .pakett + .pakett { padding: 20px 0; border-left: 0; }
  .pakett + .pakett { border-top: 1px solid var(--joon); }
}