@font-face { font-family: "Aha Display"; src: url("assets/AhaDisplay-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
:root { color-scheme: light dark; --paper:#f5f6f8; --card:#fff; --ink:#1f2329; --secondary:#5f6672; --muted:#737b88; --line:#e3e6eb; --orange:#fd5203; --accent-text:#bd3e00; font-family:-apple-system,BlinkMacSystemFont,sans-serif; background:var(--paper); color:var(--ink); -webkit-text-size-adjust:100%; }
* { box-sizing:border-box; }
body { margin:0; }
a { color:inherit; text-underline-offset:4px; }
a:focus-visible,summary:focus-visible { outline:2px solid var(--orange); outline-offset:6px; border-radius:4px; }
.page { max-width:1184px; margin:auto; padding:0 32px; }
.skip-link { position:absolute; top:12px; left:12px; padding:12px; background:var(--card); z-index:10; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img { border-radius:10px; }
.brand span { font-family:"Aha Display",sans-serif; font-size:25px; letter-spacing:-.8px; }
.site-header nav { display:flex; align-items:center; gap:28px; }
.site-header nav a { font-size:13px; text-decoration:none; padding:12px 0; }
.site-header nav a:last-child { display:flex; gap:9px; align-items:center; }
.site-header nav span { color:var(--accent-text); }
.hero { text-align:center; padding-top:56px; }
.eyebrow { display:flex; align-items:center; justify-content:center; gap:9px; font:11px/1.5 ui-monospace,"SFMono-Regular",monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--secondary); margin:0 0 20px; }
.eyebrow > span { width:6px; height:6px; border-radius:50%; background:var(--orange); }
h1 { font-family:"Aha Display",-apple-system,sans-serif; font-size:clamp(52px,7.4vw,88px); line-height:1.02; letter-spacing:-.055em; margin:0; }
.period { color:var(--orange); }
.hero-copy { font-size:17px; line-height:1.65; color:var(--secondary); margin:24px auto; max-width:550px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:24px; padding:15px 22px; min-height:50px; border-radius:30px; background:var(--ink); color:var(--paper); font-size:13px; font-weight:600; text-decoration:none; }
.button span { font-size:17px; }
.clock-stage { display:flex; align-items:center; justify-content:center; gap:32px; max-width:800px; padding:66px 20px 0; margin:0 auto; scroll-margin-top:24px; }
.clock-card { margin:0; min-width:0; width:31%; }
.clock-card .phone { position:relative; border:6px solid #191b1f; border-radius:36px; overflow:hidden; background:#000; box-shadow:0 22px 44px -20px #202b4340,0 0 0 1px #0000001a; }
.clock-card img { display:block; width:100%; height:auto; }
.clock-polka { width:34%; transform:translateY(-16px); }
.clock-weather { transform:rotate(-5deg); }
.clock-nature { transform:rotate(5deg); }
figcaption { font-size:11px; color:var(--secondary); margin-top:20px; }
.features { padding:100px 0 80px; }
.section-heading { text-align:center; margin-bottom:32px; }
h2 { font-family:"Aha Display",-apple-system,sans-serif; font-size:clamp(32px,4vw,44px); line-height:1.12; letter-spacing:-.04em; margin:0; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.feature-grid article { background:var(--card); border-radius:24px; padding:28px; }
.feature-number { color:var(--accent-text); font:11px ui-monospace,monospace; }
h3 { font-size:18px; line-height:1.3; letter-spacing:-.025em; font-weight:600; margin:22px 0 12px; }
.feature-grid p { color:var(--secondary); font-size:14px; line-height:1.75; margin:0; }
.feature-note { text-align:center; color:var(--muted); font-size:11px; line-height:1.6; margin:20px 0 0; }
.support { display:grid; grid-template-columns:1fr 1.4fr; gap:64px; padding:64px 0 80px; border-top:1px solid var(--line); scroll-margin-top:28px; }
.support .eyebrow { justify-content:flex-start; color:var(--accent-text); }
.support-heading > p:last-child { max-width:260px; color:var(--secondary); font-size:14px; line-height:1.7; margin:20px 0 0; }
.faq { align-self:start; }
.faq details { border-bottom:1px solid var(--line); }
.faq details:first-child { border-top:1px solid var(--line); }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:20px; list-style:none; min-height:64px; padding:20px 0; font-size:14px; font-weight:500; line-height:1.5; cursor:pointer; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--secondary); font-size:22px; font-weight:400; flex-shrink:0; }
.faq details[open] summary::after { content:"−"; }
.faq details > div { padding:0 28px 22px 0; }
.faq p { font-size:14px; line-height:1.75; color:var(--secondary); margin:0; }
.faq p + p { margin-top:12px; }
.faq p a { display:inline-block; padding:5px 0; }
.site-footer { border-top:1px solid var(--line); padding:24px 0 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.studio { display:flex; align-items:center; gap:12px; text-decoration:none; }
.studio img { object-fit:contain; }
.studio span,.copyright { font-size:11px; color:var(--muted); }
.site-footer nav { display:flex; gap:22px; }
.site-footer nav a { display:inline-flex; align-items:center; min-height:44px; font-size:11px; color:var(--secondary); text-decoration:none; }
@media (prefers-color-scheme:dark) {
 :root { --paper:#101216; --card:#1b1e24; --ink:#f0f1f4; --secondary:#a6adb8; --muted:#9299a5; --line:#2b2f36; --accent-text:#ff9a6b; }
 .studio img { filter:invert(1); }
 .clock-card .phone { box-shadow:0 24px 44px -16px #0008,0 0 0 1px #ffffff1a; }
}
@media (max-width:700px) {
 .page { padding:0 22px; }
 .site-header { padding:20px 0; gap:16px; }
 .site-header nav { gap:16px; }
 .site-header nav a { font-size:12px; }
 .site-header nav a:first-child { display:none; }
 .brand span { font-size:23px; }
 .brand img { width:34px; height:34px; border-radius:9px; }
 .hero { padding-top:44px; }
 h1 { font-size:clamp(50px,12.4vw,72px); }
 .hero-copy { font-size:15px; max-width:360px; margin:22px auto; }
 .desktop-break { display:none; }
 .clock-stage { padding:52px 0 0; gap:12px; }
 .clock-card .phone { border-width:3px; border-radius:19px; }
 .clock-polka { transform:translateY(-8px); }
 figcaption { display:none; }
 .features { padding:64px 0 52px; }
 .section-heading { margin-bottom:24px; }
 .section-heading .eyebrow { font-size:10px; }
 .feature-grid { grid-template-columns:1fr; gap:12px; }
 .feature-grid article { padding:24px; border-radius:22px; }
 h3 { margin:14px 0 10px; }
 .feature-note { max-width:300px; margin:18px auto 0; }
 .support { grid-template-columns:1fr; gap:28px; padding:44px 0 48px; }
 .support-heading > p:last-child { max-width:100%; margin-top:16px; }
 .site-footer { flex-wrap:wrap; gap:8px 20px; padding:22px 0 26px; }
 .site-footer nav { margin-left:auto; gap:18px; }
 .studio span { display:none; }
 .copyright { width:100%; }
}
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }