/* Front page hero: kanji draw + fill, "browser builds itself" card. CSS only. Values from the Main design. */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-wrap{position:relative;padding-top:clamp(72px,11vw,148px);padding-bottom:clamp(72px,9vw,120px)}
.hero-copy{display:flex;flex-direction:column;gap:28px;max-width:760px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-price{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:-12px 0 0;font-size:16px;color:var(--text)}
.h1-muted{color:var(--muted)}
/* delays for .rise (the 800ms rise animation lives in base.css) */
.dl80{animation-delay:80ms}
.dl180{animation-delay:180ms}
.dl300{animation-delay:300ms}
.dl360{animation-delay:360ms}
.dl420{animation-delay:420ms}
.dl700{animation-delay:700ms}
/* kanji */
.kanji-art{position:absolute;right:max(-40px,calc((100% - 1240px)/2 - 20px));top:40px;width:min(46vw,560px);height:auto;pointer-events:none}
.kanji-art .stroke{fill:none;stroke:var(--acc-fg);stroke-width:1.1;stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.8s cubic-bezier(.6,0,.2,1) 200ms forwards}
.kanji-art .stroke.b{animation-delay:900ms}
.kanji-art .fillin{fill:var(--accent);opacity:0;animation:fillin 1.6s ease 2.4s forwards}
.light .kanji-art .fillin{animation-name:fillinLight}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{opacity:.07}}
@keyframes fillinLight{to{opacity:.14}}
/* browser card */
.curve-card{background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line2);border-radius:16px;box-shadow:0 1px 2px var(--drop),0 24px 60px -28px var(--drop);position:absolute;right:clamp(16px,4vw,40px);bottom:clamp(48px,7vw,96px);width:340px;overflow:hidden}
.bar{display:block;border-radius:4px;background:var(--line2)}
.tile{display:block;height:46px;border-radius:7px;background:var(--bg3);border:1px solid var(--line2)}
.sk{opacity:0;transform:translateY(6px);animation:rise 600ms cubic-bezier(.2,.7,.2,1) var(--d) forwards}
.d1000{--d:1.0s}
.d1250{--d:1.25s}
.d1400{--d:1.4s}
.d1550{--d:1.55s}
.d1700{--d:1.7s}
.d2000{--d:2.0s}
.d2150{--d:2.15s}
.d2300{--d:2.3s}
.d2800{--d:2.8s}
.d3400{--d:3.4s}
.bc-chrome{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line2)}
.bc-dots{display:flex;gap:5px}
.bc-dots span{width:8px;height:8px;border-radius:50%;background:var(--line3)}
.bc-url{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:24px;border-radius:6px;background:var(--bg3);font-size:11px;color:var(--muted)}
.bc-live{width:6px;height:6px;border-radius:50%;background:var(--acc-fg);display:inline-block}
.bc-body{padding:16px;display:flex;flex-direction:column;gap:10px;height:176px}
.bc-head{display:flex;justify-content:space-between;align-items:center}
.bc-nav{display:flex;gap:6px}
.bar-logo{width:52px;height:8px}
.bar-nav{width:22px;height:5px}
.bar-h1{width:82%;height:13px;margin-top:8px}
.bar-h2{width:58%;height:13px}
.bar-p{width:72%;height:5px}
.bc-btn{width:64px;height:18px;border-radius:5px;background:var(--accent)}
.bc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:auto}
.bc-steps{list-style:none;margin:0;padding:12px 14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;border-top:1px solid var(--line2);font-size:11px}
.st{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.st:not(:last-child)::after{content:"";position:absolute;top:5px;left:calc(50% + 10px);right:calc(-50% + 7px);height:1px;background:var(--line2)}
.st .dot{width:11px;height:11px;border-radius:50%;border:1px solid var(--line3);display:grid;place-items:center}
.st .fill{width:11px;height:11px;border-radius:50%;background:var(--acc-fg);opacity:0;transform:scale(.4);animation:pop 400ms cubic-bezier(.2,.7,.2,1.4) var(--d) forwards}
.st .lbl{color:var(--muted);opacity:.55;animation:lbl 300ms ease var(--d) forwards}
.st.now .fill{animation:pop 400ms cubic-bezier(.2,.7,.2,1.4) var(--d) forwards,pulse 2.4s ease-in-out calc(var(--d) + 600ms) infinite}
@keyframes pop{to{opacity:1;transform:none}}
@keyframes lbl{to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (max-width:900px){.kanji-art{width:88vw;right:-22vw;top:120px;opacity:.55}.curve-card{display:none !important}}
/* Reduced motion: final state, no motion. (Design uses .08 for the fill in both themes; here it matches each theme's animation end value.) */
@media (prefers-reduced-motion:reduce){.rise,.sk,.kanji-art .stroke,.kanji-art .fillin,.st .fill,.st .lbl{animation:none !important}.rise,.sk,.st .fill,.st .lbl{opacity:1;transform:none}.kanji-art .stroke{stroke-dashoffset:0}.kanji-art .fillin{opacity:.07}.light .kanji-art .fillin{opacity:.14}}