/* The hero: one whole day across the full width of the page.

   The sky fills the header. A frosted veil over the left half carries the
   words; the phone on the right shows the part of the app that belongs to the
   hour — the alarm at sunrise, Focus through the day, Wind-down at sunset,
   Sleep at night. sky.js runs the day (48 s) on one smooth clock: it paints
   the sky and the veil every frame, sets one phase class on .hero for the
   phone, and `ink-light` once it is dark enough for white type. */
.hero{position:relative;min-height:max(680px,min(100vh,920px));display:flex;align-items:center;
  padding:110px 0 70px;overflow:hidden;color:var(--ink);--ink:#0D1526;--ink-soft:#4C566A;
  --veil:rgba(244,246,250,.80);transition:color 1.4s ease}
.hero .scene-svg.hero-sky{position:absolute;inset:0;width:100%;height:100%}
.hero-veil{position:absolute;inset:0;background:linear-gradient(90deg,var(--veil) 0%,var(--veil) 34%,transparent 64%);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 66%);mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 66%)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:120px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.hero.ink-light{--ink:#FFFFFF;--ink-soft:rgba(234,240,252,.8)}

.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,60px);align-items:center;width:100%}
.hero h1{margin:22px 0 20px;color:var(--ink);transition:color 1.4s ease}
.hero .lede{color:var(--ink-soft);transition:color 1.4s ease}
.hero .trust{color:var(--ink-soft);transition:color 1.4s ease}
.hero.ink-light .trust svg{color:#86E05A}
.hero .kicker{background:rgba(255,255,255,.9);color:#0D1526}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}

/* The day, as a bar: three leaves of the routine and a dot for now. */
.daybar{margin-top:34px;max-width:440px}
.daybar .dtrack{position:relative;height:8px;border-radius:8px;display:grid;grid-template-columns:20fr 30fr 12fr 35fr 3fr;gap:3px}
.daybar .dtrack i{border-radius:8px;opacity:.35;transition:opacity 1.4s}
.daybar .dtrack i:nth-child(1),.daybar .dtrack i:nth-child(5){background:var(--orange-lit)}
.daybar .dtrack i:nth-child(2){background:var(--green-lit)}
.daybar .dtrack i:nth-child(3){background:linear-gradient(90deg,var(--orange-lit),var(--blue-lit))}
.daybar .dtrack i:nth-child(4){background:var(--blue-lit)}
.hero.ph-wake .daybar .dtrack i:nth-child(1),.hero.ph-wake .daybar .dtrack i:nth-child(5),
.hero.ph-focus .daybar .dtrack i:nth-child(2),.hero.ph-sunset .daybar .dtrack i:nth-child(3),
.hero.ph-night .daybar .dtrack i:nth-child(4){opacity:1}
.daybar .now{position:absolute;top:50%;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(13,21,38,.12),0 4px 10px rgba(13,21,38,.25)}
.daybar .labels{display:flex;justify-content:space-between;margin-top:10px;font:600 12.5px/1 var(--body);color:var(--ink-soft);transition:color 1.4s}
.daybar .labels span{transition:color 1.4s}
.hero.ph-wake .daybar .l-wake{color:var(--orange-lit)}
.hero.ph-focus .daybar .l-focus{color:var(--green-lit)}
.hero.ph-night .daybar .l-sleep,.hero.ph-sunset .daybar .l-wind{color:var(--blue)}
.hero.ink-light.ph-night .daybar .l-sleep,.hero.ink-light.ph-sunset .daybar .l-wind{color:#8DB6F7}

/* The phone, and the screen for the hour */
.hero-stage{position:relative;height:min(640px,72vh);min-height:540px}
.hero-stage .phone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(268px,36vw);
  box-shadow:0 50px 90px -30px rgba(8,18,40,.6),inset 0 0 0 1.5px rgba(255,255,255,.14)}
.hero-stage .phone .screens{position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;background:#F4F6FA}
.hero-stage .phone .screens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;
  opacity:0;transform:scale(1.03) translateY(8px);transition:opacity 1.8s ease,transform 2.2s cubic-bezier(.2,.8,.2,1)}
.hero-stage .phone .screens img.on{opacity:1;transform:none}
.phase{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:99px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);font:600 13.5px/1 var(--body);color:var(--orange);white-space:nowrap;
  box-shadow:var(--shadow-sm);transition:color .8s;z-index:3}
.phase i{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* The chips: the one that belongs to the hour steps forward. */
.hero .chip{transition:opacity 1.4s ease,transform 1.4s cubic-bezier(.2,.8,.2,1),box-shadow 1.4s;opacity:.55;transform:scale(.92);z-index:3}
.hero .chip.on{opacity:1;transform:scale(1.04);box-shadow:0 22px 44px -16px rgba(8,18,40,.45)}
.chip.c1{left:-4%;top:16%}.chip.c2{right:-6%;top:30%}.chip.c3{left:-8%;bottom:20%}.chip.c4{right:-2%;bottom:8%}
.chip .count{display:inline-block;min-width:1.3em}

@media (max-width:960px){
  .hero{min-height:0;padding:100px 0 40px}
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{text-align:center}.hero .lede{margin:0 auto}.hero-ctas,.trust{justify-content:center}
  .daybar{margin:30px auto 0}
  .hero-veil{background:linear-gradient(180deg,var(--veil) 0%,var(--veil) 46%,transparent 70%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 72%);mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 72%)}
  .hero-stage{height:600px;min-height:0}
  .hero-stage .phone{width:min(250px,62vw)}
  .chip.c1{left:0}.chip.c3{left:0}.chip.c2,.chip.c4{right:0}
}
@media (max-width:560px){.hero .chip{transform:scale(.82)}.hero .chip.on{transform:scale(.9)}}
@media (prefers-reduced-motion:reduce){.hero .chip{opacity:1;transform:none}}
/* At night the top of the page is dark: the menu turns light with it. */
.nav .brand,.nav-links a{transition:color 1.2s ease}
body.hero-night .nav:not(.scrolled) .brand,body.hero-night .nav:not(.scrolled) .nav-links a{color:#fff}
body.hero-night .nav:not(.scrolled) .burger span{background:#fff}
.hero .btn-ghost{color:#0D1526;background:rgba(255,255,255,.94)}
.hero .chip{opacity:.78}
.hero::after{height:80px}
.hero .chip{color:#0D1526}