/* Phasewake veeb: puhas must, vedelklaasist paneelid, šampanjakuld; üks veerg loetavale tekstile, seadmed paremal */
:root {
  color-scheme: dark;
  --black: #000;
  --night: #070708;
  --panel-a: rgba(255,255,255,.075);
  --panel-b: rgba(255,255,255,.025);
  --edge: rgba(255,255,255,.09);
  --mist: #F2F1EE;
  --slate-light: #B9B8B4;
  --slate: #8A8985;
  --faint: #3A3A42;
  --dawn: #E0BA7C;
  --gold-a: #EDD6AC;
  --gold-b: #C8995B;
  --on-gold: #1A1206;
  --display: "Outfit", system-ui, sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --glass: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.03) 45%, rgba(255,255,255,.015));
  --glass-hi: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.02);
  --w: 1140px;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body { margin: 0; background: var(--black); color: var(--mist); font: 17px/1.6 var(--body); -webkit-font-smoothing: antialiased }
img { max-width: 100%; display: block }
a { color: inherit }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--dawn); outline-offset: 3px; border-radius: 6px }
.wrap { max-width: var(--w); margin: 0 auto; padding-inline: 24px }
@media (max-width: 520px) { .wrap { padding-inline: 18px } }

/* Ankrud ei jää kleepuva päise alla */
[id] { scroll-margin-top: 80px }

/* Päis */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(0,0,0,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.06) }
.site-head .wrap { display: flex; align-items: center; gap: 18px; height: 64px }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 300 22px/1 var(--display); letter-spacing: -.01em; color: var(--mist) }
.brand svg { width: 34px; height: 28px }
.site-head nav { display: flex; gap: 22px; margin-left: auto; font-size: 15px }
.site-head nav a { color: var(--slate-light); text-decoration: none }
.site-head nav a:hover, .site-head nav a[aria-current="page"] { color: var(--mist) }
.lang { position: relative }
.lang > button { font: 500 14px var(--body); color: var(--slate-light); background: none; border: 1px solid var(--edge); border-radius: 999px; padding: 6px 12px; cursor: pointer }
.lang ul { position: absolute; right: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: 6px; min-width: 170px; background: rgba(22,22,24,.86); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid var(--edge); border-radius: 16px; box-shadow: var(--glass-hi), 0 18px 40px rgba(0,0,0,.6) }
.lang li a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; text-decoration: none; font-size: 15px; color: var(--slate-light) }
.lang li a:hover { background: rgba(255,255,255,.05); color: var(--mist) }
.lang li a[aria-current="true"] { color: var(--dawn) }
.lang li a span { color: var(--slate); font-size: 12.5px }
.head-cta { display: none }
@media (max-width: 760px) { .site-head nav { display: none } .lang { margin-left: auto } }

/* Nupud */
.btn-play { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px 0 18px; border-radius: 999px; text-decoration: none; color: var(--on-gold); font-weight: 600;
  background: linear-gradient(180deg, var(--gold-a) 0%, var(--dawn) 50%, var(--gold-b) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(90,55,15,.3), 0 10px 34px rgba(224,186,124,.22) }
.btn-play svg { width: 24px; height: 24px; flex: none }
.btn-play small { display: block; font: 500 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; opacity: .75 }
.btn-play b { display: block; font: 600 18px/1.15 var(--body) }
.btn-play:hover { filter: brightness(1.04) }
.link-arrow { color: var(--slate-light); text-decoration: none; font-weight: 500 }
.link-arrow:hover { color: var(--mist) }

/* Pealkirjad ja tekst */
.eyebrow { font: 500 12.5px var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--dawn) }
h1, h2, h3 { font-family: var(--display); font-weight: 300; margin: 0; text-wrap: balance }
h1 { font-size: clamp(40px, 6.2vw, 72px); line-height: 1.04; letter-spacing: -.025em; font-weight: 200 }
h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -.015em }
h3 { font-size: 24px; line-height: 1.2 }
.lede { font-size: clamp(18px, 2vw, 21px); color: var(--slate-light); max-width: 34ch; margin: 0 }
p { margin: 0 }
.copy { color: var(--slate-light); max-width: 58ch }
section { padding-block: 96px }
@media (max-width: 760px) { section { padding-block: 64px } }

/* Hero */
.hero { position: relative; overflow: hidden; padding-block: 72px 88px }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center }
.hero-text { display: grid; gap: 22px; position: relative; z-index: 1 }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; margin-top: 8px }
.facts { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--slate); font-size: 14.5px; list-style: none; padding: 0; margin: 6px 0 0 }
.facts li { display: flex; align-items: center; gap: 8px }
.facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dawn) }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr } .hero { padding-block: 48px 64px } }

/* Seadmed (mustandis fotode asemel) */
.stage { position: relative; display: flex; justify-content: center; align-items: center; min-height: 520px; z-index: 1 }
.phone { width: 236px; max-width: 46vw; aspect-ratio: 720 / 1604; border-radius: 34px; padding: 8px; background: linear-gradient(160deg, #2A2A2F, #0C0C0E 60%); box-shadow: 0 0 0 1px #2C2C33, 0 30px 80px rgba(0,0,0,.7) }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 27px }
.watch { width: 250px; max-width: 48vw; aspect-ratio: 1; border-radius: 50%; padding: 18px; background: radial-gradient(circle at 30% 25%, #3A3A40, #121214 55%, #050506); box-shadow: 0 0 0 2px #2A2A30, 0 0 0 9px #0B0B0D, 0 0 0 10px #2A2A30, 0 30px 70px rgba(0,0,0,.75) }
.watch img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover }
.stage .phone { transform: translateX(-30%) rotate(-4deg) }
.stage .watch { position: absolute; transform: translate(42%, 18%) }
.watch.sm { width: 190px; padding: 14px }
.watch.lg { width: 300px; padding: 22px }
.photo-note { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--slate); white-space: nowrap }

/* Päris hommiku graafik */
.proof .wrap { display: grid; gap: 34px }
.proof-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 48px; align-items: end }
@media (max-width: 860px) { .proof-head { grid-template-columns: 1fr } }
.chart-card { border-radius: 28px; background: var(--glass); border: 1px solid var(--edge); box-shadow: var(--glass-hi); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: hidden; position: relative }
.chart-card svg { width: 100%; height: auto; display: block }
.chart-legend { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 16px 24px 20px; border-top: 1px solid rgba(255,255,255,.06); color: var(--slate); font-size: 14px }
.chart-legend b { color: var(--mist); font-weight: 500 }
.chart-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 8px }
.chart-scroll { overflow-x: auto }
.chart-scroll svg { min-width: 640px }

/* Põhjused */
.reasons .wrap { display: grid; gap: 110px }
.reason { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center }
.reason:nth-child(even) .visual { order: -1 }
.reason .text { display: grid; gap: 16px }
.reason .visual { display: flex; justify-content: center; align-items: center; gap: 22px; position: relative; min-height: 360px }
.reason .visual .glow { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(224,186,124,.16), transparent 62%); z-index: 0 }
.reason .visual > :not(.glow) { position: relative; z-index: 1 }
.points { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px }
.points li { display: flex; gap: 12px; align-items: baseline; color: var(--slate-light) }
.points li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--dawn); transform: translateY(-2px) }
@media (max-width: 860px) { .reason { grid-template-columns: 1fr; gap: 30px } .reason:nth-child(even) .visual { order: 0 } .reasons .wrap { gap: 72px } .reason .visual { min-height: 0 } }

/* Privaatsus */
.private-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; width: 100% }
.private-list li { border-radius: 999px; padding: 16px 22px; display: flex; gap: 12px; align-items: center; background: var(--glass); border: 1px solid var(--edge); box-shadow: var(--glass-hi); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); font-size: 16px }
.private-list li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F6E6C4, var(--dawn) 55%, var(--gold-b)); box-shadow: 0 0 12px rgba(224,186,124,.6); flex: none }
@media (max-width: 520px) { .private-list { grid-template-columns: 1fr } }

/* Kuidas: kolm sammu */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 36px 0 0; counter-reset: s }
.steps li { border-radius: 26px; padding: 26px 24px 28px; background: var(--glass); border: 1px solid var(--edge); box-shadow: var(--glass-hi); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: grid; gap: 10px; align-content: start }
.steps .time { font: 200 34px/1 var(--display); color: var(--dawn); font-variant-numeric: tabular-nums }
.steps h3 { font-size: 21px }
.steps p { color: var(--slate-light); font-size: 15.5px }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr } }

/* Ühilduvus */
.compat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-radius: 28px; overflow: hidden; border: 1px solid var(--edge); background: var(--glass); box-shadow: var(--glass-hi) }
.compat > div { padding: 26px 28px; display: grid; gap: 6px }
.compat > div + div { border-left: 1px solid rgba(255,255,255,.07) }
.compat .k { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--dawn) }
.compat .v { font: 300 22px/1.25 var(--display) }
.compat .s { color: var(--slate); font-size: 14.5px }
@media (max-width: 760px) { .compat { grid-template-columns: 1fr } .compat > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.07) } }

/* KKK */
.faq { display: grid; gap: 10px; margin-top: 30px; max-width: 820px }
.faq details { border-radius: 22px; background: var(--glass); border: 1px solid var(--edge); box-shadow: var(--glass-hi); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px) }
.faq summary { cursor: pointer; list-style: none; padding: 20px 24px; font-size: 18px; display: flex; justify-content: space-between; gap: 18px; align-items: center }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; color: var(--dawn); font: 200 28px/1 var(--display); transition: transform .2s }
.faq details[open] summary::after { transform: rotate(45deg) }
.faq details > div { padding: 0 24px 22px; color: var(--slate-light); max-width: 66ch }

/* Lõpu üleskutse */
.final { text-align: center }
.final .wrap { display: grid; gap: 22px; justify-items: center }

/* Jalus */
.site-foot { border-top: 1px solid rgba(255,255,255,.07); padding-block: 48px 64px; color: var(--slate); font-size: 14.5px }
.site-foot .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 32px }
.site-foot h4 { margin: 0 0 10px; font: 500 13px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-light) }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px }
.site-foot a { color: var(--slate); text-decoration: none }
.site-foot a:hover { color: var(--mist) }
.mail { display: inline-flex; gap: 8px; align-items: center }
.mail button { font: 500 12.5px var(--body); color: var(--slate-light); background: none; border: 1px solid var(--edge); border-radius: 999px; padding: 3px 10px; cursor: pointer }
.legal { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.06); font-size: 13px; line-height: 1.6 }
@media (max-width: 760px) { .site-foot .wrap { grid-template-columns: 1fr 1fr } .site-foot .wrap > :first-child { grid-column: 1 / -1 } }

/* Alamleht: pikk tekst */
.article { max-width: 760px }
.article h2 { font-size: clamp(28px, 3.4vw, 36px); margin: 64px 0 16px }
.article p, .article li { color: var(--slate-light); font-size: 18px }
.article p + p { margin-top: 14px }
.article ul { padding-left: 22px; display: grid; gap: 8px; margin: 14px 0 0 }
.article li::marker { color: var(--dawn) }
.article strong { color: var(--mist); font-weight: 600 }
.timeline { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 0; position: relative }
.timeline li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 20px; padding-bottom: 28px; position: relative }
.timeline li::before { content: ""; position: absolute; left: 100px; top: 12px; bottom: -6px; width: 1px; background: linear-gradient(var(--faint), transparent) }
.timeline li:last-child::before { display: none }
.timeline .t { font: 300 22px/1.2 var(--display); color: var(--dawn); font-variant-numeric: tabular-nums; text-align: right }
.timeline h3 { font-size: 21px; margin-bottom: 6px; position: relative; padding-left: 22px }
.timeline h3::before { content: ""; position: absolute; left: -6px; top: 9px; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F6E6C4, var(--dawn) 55%, var(--gold-b)); box-shadow: 0 0 12px rgba(224,186,124,.6) }
.timeline p { color: var(--slate-light); padding-left: 22px }
@media (max-width: 520px) { .timeline li { grid-template-columns: 64px minmax(0, 1fr); gap: 14px } .timeline li::before { left: 71px } .timeline .t { font-size: 18px } }
.crumbs { font-size: 14px; color: var(--slate); margin-bottom: 18px }
.crumbs a { color: var(--slate); text-decoration: none }
.note { border-radius: 22px; padding: 20px 24px; margin-top: 22px; background: linear-gradient(145deg, rgba(224,186,124,.13), rgba(255,255,255,.025) 55%); border: 1px solid rgba(224,186,124,.24); box-shadow: var(--glass-hi) }
.note p { color: var(--slate-light) }

/* Tootefotod: põhjuste juures ümarate nurkadega kaart; hero sulandub vasakult ja alt mustaks */
.shot { width: 100%; max-width: 540px; aspect-ratio: 1; position: relative; z-index: 1; border-radius: 32px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.6) }
.shot img { width: 100%; height: 100%; object-fit: cover }
.hero-shot { max-width: 700px; margin: -72px -24px -88px 0; justify-self: end; border-radius: 0; box-shadow: none; overflow: visible }
.hero-shot img { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%), linear-gradient(to left, transparent 0, #000 12%), linear-gradient(to top, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 14%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 14%), linear-gradient(to left, transparent 0, #000 12%), linear-gradient(to top, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 14%); mask-composite: intersect }
@media (max-width: 900px) { .hero-shot { width: calc(100% + 48px); max-width: none; margin: -24px -24px -40px; justify-self: stretch }
  .hero-shot img { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%), linear-gradient(to left, transparent 0, #000 8%), linear-gradient(to top, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 12%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%), linear-gradient(to left, transparent 0, #000 8%), linear-gradient(to top, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 12%) } }
@media (max-width: 520px) { .hero-shot { width: calc(100% + 36px); margin-inline: -18px } }
.policy h2 { font-size: 24px; margin: 40px 0 10px }
.policy p, .policy li { font-size: 17px }
.policy .mail { display: flex; gap: 10px; align-items: center }

/* Uinak: kolm fakti klaaskaartidel */
.nap-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 0 }
.nap-facts > div { border-radius: 20px; padding: 14px 16px; background: var(--glass); border: 1px solid var(--edge); box-shadow: var(--glass-hi); display: grid; gap: 2px }
.nap-facts b { font: 200 28px/1.1 var(--display); color: var(--mist); font-variant-numeric: tabular-nums; white-space: nowrap }
.nap-facts span { font-size: 13.5px; color: var(--slate); line-height: 1.35 }
@media (max-width: 520px) { .nap-facts b { font-size: 22px } .nap-facts > div { padding: 12px } }

/* Keelevalik juurlehel ja 404 */
.choose { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; list-style: none; padding: 0; margin: 0 }
.choose a { display: flex; gap: 12px; align-items: center; border-radius: 999px; padding: 14px 24px; text-decoration: none; font-size: 17px; background: var(--glass); border: 1px solid var(--edge); box-shadow: var(--glass-hi) }
.choose a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F6E6C4, var(--dawn) 55%, var(--gold-b)); box-shadow: 0 0 12px rgba(224,186,124,.6); flex: none }
.choose a:hover { border-color: rgba(224,186,124,.4) }
.choose a span { color: var(--slate); font-size: 13px }

/* Enne avaldamist: nupp pole link */
.btn-play.is-soon { cursor: default }
.btn-play.is-soon:hover { filter: none }

/* Korea ja jaapani keel: pealkirjad ei murdu keset sõna */
:lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(ko) .lede, :lang(ko) .copy, :lang(ko) .private-list li { word-break: keep-all }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { word-break: auto-phrase; line-break: strict }