@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/space-grotesk.ttf) format("truetype");font-weight:300 700;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/assets/fonts/dm-sans.ttf) format("truetype");font-weight:100 1000;font-display:swap}

/* Wakever's own palette ("Rust"): paper, ink, ember only for actions, shift colours only as dots, and the Sunrise gradient of the wake-up screen. */
:root{--paper:#F5F3EE;--ink:#17181C;--ember:#C2541B;--muted:#5F5C54;--line:#E0DBCF;--sun:#F2B56B;--vroeg:#2F7D4F;--laat:#2F5FAA;--nacht:#B8730F;--vrij:#9A978E}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 "DM Sans",system-ui,sans-serif}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.25rem}
a{color:inherit}
a:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:.25rem}
.hero a:focus-visible,.own a:focus-visible{outline-color:var(--sun)}
h1,h2,h3{font-family:"Space Grotesk",system-ui,sans-serif;margin:0}
h2{font-size:clamp(1.7rem,3.5vw,2.6rem);line-height:1.1;letter-spacing:-.02em;font-weight:700;max-width:26ch;margin-bottom:2rem}

/* hero: the page opens like the Sunrise screen and ends in paper */
.hero{color:#fff;background:linear-gradient(180deg,#1B2340 0%,#5B4A78 30%,#D9774A 66%,#F2B56B 86%,var(--paper) 100%);overflow:hidden}
.top{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 0}
.brand{font:700 1.3rem "Space Grotesk",sans-serif;letter-spacing:-.01em;text-decoration:none}
.lang{border:1px solid #ffffff66;border-radius:999px;padding:.25rem .9rem;font-size:.9rem;text-decoration:none;color:#ffffffe6}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2rem;align-items:start;padding:1.25rem 0 0}
.hero-text{padding-bottom:3.5rem}
h1{font-size:clamp(2.5rem,5.6vw,4.5rem);line-height:1.02;letter-spacing:-.035em;font-weight:700;margin-bottom:1.1rem}
.sub{font-size:1.22rem;max-width:33rem;margin:0 0 1.6rem;color:#ffffffeb}
.cta{display:flex;gap:.75rem;flex-wrap:wrap;margin:0 0 1.2rem}
.btn{display:inline-block;background:var(--paper);color:var(--ink);font-weight:650;padding:.85rem 1.45rem;border-radius:999px;text-decoration:none}
.btn:hover{background:#fff}
.ghost{display:inline-block;color:#fff;border:1px solid #ffffff99;padding:.85rem 1.45rem;border-radius:999px;text-decoration:none}
.facts{list-style:none;display:flex;gap:.35rem 1.4rem;flex-wrap:wrap;padding:0;margin:0 0 2.2rem;color:#ffffffe0;font-size:.95rem}
.facts li::before{content:"";display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:var(--sun);margin-right:.5rem}
.clock{display:block;max-width:30rem;padding-top:.9rem;border-top:1px solid #ffffff44}
.clock .t{display:block;font:300 clamp(4.2rem,10vw,7.6rem)/.95 "Space Grotesk",sans-serif;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.clock .cap{display:block;margin-top:.4rem;color:#ffffffd9}
.phones{display:flex;gap:1.1rem;justify-content:center;align-items:flex-start}
.phones img{width:min(15.5rem,40vw);height:auto;border-radius:2.1rem;border:.45rem solid #0E0F12;background:#0E0F12;box-shadow:0 1.6rem 3.2rem #0e0f1266}
.phones .p1{margin-top:3.2rem}

/* how it works */
.how{padding:4.5rem 0 4rem}
.how-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3.5rem;align-items:start}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:2rem}
.steps li{display:grid;grid-template-columns:2.6rem 1fr;column-gap:1.1rem}
.steps .n{grid-row:1/3;width:2.6rem;height:2.6rem;display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:50%;font:600 1.05rem "Space Grotesk",sans-serif}
.steps h3{font-size:1.3rem;font-weight:650;margin:.2rem 0 .3rem}
.steps p{margin:0;color:var(--muted)}
.week{margin:0;background:#fff;border:1px solid var(--line);border-radius:1.6rem;padding:1.4rem}
.week ol{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:.2rem;padding:0;margin:0 0 1.1rem;text-align:center}
.week li{display:grid;gap:.2rem;justify-items:center;padding:.55rem 0;border-radius:1.1rem}
.week li.on{outline:2px solid var(--ink)}
.week span{color:var(--muted);font-size:.85rem}
.week b{font:600 1.3rem "Space Grotesk",sans-serif;font-variant-numeric:tabular-nums}
.dot{display:inline-block;width:.62rem;height:.62rem;border-radius:50%}
.dot.vroeg{background:var(--vroeg)}.dot.laat{background:var(--laat)}.dot.nacht{background:var(--nacht)}.dot.vrij{background:var(--vrij)}
.legend{display:flex;gap:.4rem 1rem;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 .8rem;font-size:.92rem}
.legend .dot{margin-right:.4rem}
.week figcaption{color:var(--muted);font-size:.92rem}

/* features: plain text under a rule, no cards */
.features{padding:4.5rem 0;background:#fff;border-block:1px solid var(--line)}
.feat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.6rem 3.5rem}
.feat-grid h3{font-size:1.25rem;font-weight:650;padding-top:.85rem;border-top:2px solid var(--ink);margin-bottom:.7rem}
.feat-grid ul{margin:0;padding-left:1.1rem;color:#35342f}
.feat-grid li{margin:.4rem 0}

/* real screens, swipeable */
.screens{padding:4.5rem 0 3rem}
.rail{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;--gut:max(1.25rem,calc((100vw - 72rem)/2 + 1.25rem));padding:0 var(--gut) 1.5rem;scroll-padding-inline:var(--gut)}
.rail figure{flex:0 0 min(15.5rem,72vw);margin:0;scroll-snap-align:start}
.rail img{display:block;width:100%;height:auto;border-radius:1.9rem;border:.42rem solid #0E0F12;background:#0E0F12}
.rail figcaption{margin-top:.8rem;font-size:.95rem;color:var(--muted)}

/* yours, and the honest Cloud Sync note */
.own{background:var(--ink);color:var(--paper);padding:4.5rem 0}
.own-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.5rem}
.own h2{color:#fff}
.own p{color:#dcd8ce;max-width:36rem;margin:0}
.sync{border-left:2px solid var(--sun);padding-left:1.6rem}
.sync h3{font-size:1.35rem;font-weight:650;margin-bottom:.6rem}
.badge{font:500 .8rem "DM Sans",sans-serif;color:var(--sun);border:1px solid var(--sun);border-radius:999px;padding:.1rem .65rem;vertical-align:middle;margin-left:.5rem}

.get{padding:4.5rem 0}
.get p{max-width:34rem;color:var(--muted)}
.get .btn{background:var(--ember);color:#fff}
.get .btn:hover{background:#a84714}
.btn.big{padding:1rem 1.9rem;font-size:1.15rem}
.ver{font-size:.95rem}
footer{border-top:1px solid var(--line);padding:1.3rem 0 2rem;color:var(--muted);font-size:.92rem}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

@media(max-width:60rem){
  .hero-grid,.how-grid,.own-grid,.feat-grid{grid-template-columns:minmax(0,1fr)}
  .hero-text{padding-bottom:1.5rem}
  .phones .p1{margin-top:2rem}
  .phones{padding-bottom:1.5rem}
  .how-grid{gap:2.5rem}
}