/* Home redesign v2 — dark, uses tokens from style.css */
body.home{--bg:#090909;--card:#141414;--elev:#1c1c1c;--ink:#F5F5F2;--soft:#A5A5A0;--muted:#6F6F6A;--line:rgba(255,255,255,.08);--or-text:#FF7E26;--on-ink:#111}
.home section{padding:clamp(36px,5.4vw,68px) 0}
.h-hero{position:relative;overflow-x:clip;padding:clamp(20px,4vh,48px) 0 clamp(60px,10vh,96px)!important}
.h-glow{position:absolute;left:50%;bottom:-120px;width:min(1400px,140%);height:340px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(255,106,0,.2),transparent 70%);pointer-events:none}
.h-line{position:absolute;left:0;right:0;bottom:26px;height:1px;background:linear-gradient(90deg,transparent,var(--or) 50%,transparent);opacity:.7}
.h-hero-copy{position:relative}
.h-hero h1{font-size:clamp(2.4rem,5.6vw,5rem);line-height:1;margin:10px 0 16px;max-width:13ch}
.h-hero h1 em{display:block;color:var(--or-text)}
.h-sub{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--soft);max-width:44ch;margin:0 0 22px}
.h-cta .btn{padding:15px 30px}
.h-sec h2{font-size:clamp(2rem,4.4vw,3.6rem);max-width:20ch;margin:10px 0 14px}
.h-alt{background:var(--card);border-block:1px solid var(--line)}
.h-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 20px}
.h-card{position:relative;display:flex;min-height:260px;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--ink);text-decoration:none;transition:border-color .3s,transform .5s var(--ease)}
.h-card:nth-child(1){background:radial-gradient(110% 90% at 15% 0%,#2a2118,#101010 70%)}
.h-card:nth-child(2){background:radial-gradient(110% 90% at 15% 0%,#22221c,#101010 70%)}
.h-card:nth-child(3){background:radial-gradient(110% 90% at 15% 0%,#1c2026,#101010 70%)}
.h-card:hover,.h-card:focus-visible{border-color:var(--or);transform:translateY(-4px)}
.h-art{position:absolute;right:12px;top:-30px;font:italic 12rem/1 var(--serif);color:rgba(255,255,255,.05);pointer-events:none}
.h-body{position:relative;margin-top:auto;padding:24px;display:flex;flex-direction:column;gap:6px}
.h-body h3{font-size:1.8rem;margin:4px 0 0}.h-body p{margin:0;color:var(--soft);font-size:.98rem;line-height:1.5}
.h-tag{align-self:flex-start;font:500 .68rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--or-text);border:1px solid rgba(255,126,38,.4);border-radius:99px;padding:3px 10px}
.h-jcopy .btn{margin-top:6px}
.h-journey{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,6vw,80px);align-items:center}
.h-mock{padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.h-mock-top{display:flex;justify-content:space-between;align-items:center;font:500 .72rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.h-priv{color:var(--or-text);border:1px solid rgba(255,126,38,.4);border-radius:99px;padding:3px 10px;font-weight:500}
.h-mock h3{font-size:1.6rem;margin:18px 0 8px}.h-mock p{color:var(--soft);margin:0 0 14px;font-size:1rem}
.h-goal{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.h-goal li{display:flex;gap:10px;align-items:center;font-size:.95rem;color:var(--ink)}
.h-goal li::before{content:"";width:16px;height:16px;border:1.5px solid var(--muted);border-radius:50%;flex:none}
.h-goal li.done{color:var(--soft)}.h-goal li.done::before{background:var(--or);border-color:var(--or)}
.h-mock small{color:var(--muted)}
.h-final{text-align:center;border-top:1px solid var(--line)}
.h-dot{position:relative;display:block;width:min(70vw,620px);height:12px;margin:0 auto 22px;background:linear-gradient(90deg,transparent,rgba(255,170,110,.5) 50%,transparent) center/100% 1px no-repeat}
.h-dot::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;transform:translate(-50%,-50%);border-radius:50%;background:#FF9A55;box-shadow:0 0 14px rgba(255,150,80,.45)}
.h-final h2{font-size:clamp(2.2rem,5.5vw,4.4rem);max-width:16ch;margin:0 auto 14px}
.h-final .lead{margin:0 auto 24px}
.h-empty{grid-column:1/-1;color:var(--soft)}
@media (prefers-reduced-motion:no-preference){
.h-in{opacity:0;transform:translateY(16px);animation:hin .9s var(--ease) forwards}
.h-hero .h-in:nth-child(2){animation-delay:.1s}.h-hero .h-in:nth-child(3){animation-delay:.25s}.h-hero .h-in:nth-child(4){animation-delay:.4s}
@keyframes hin{to{opacity:1;transform:none}}
.h-glow{animation:hglow 9s ease-in-out infinite alternate}
@keyframes hglow{from{opacity:.6}to{opacity:1}}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}}
@media (max-width:900px){.h-cards{grid-template-columns:1fr}.h-post:nth-child(n){margin:0}.h-card{min-height:200px}.h-jcopy .btn{margin-top:6px}
.h-journey{grid-template-columns:1fr}.h-hero{min-height:0}}

/* community feed mock */
.h-feed{display:grid;gap:12px;position:relative}
.h-post{--c:var(--or);padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--c);border-radius:var(--r-md);background:var(--bg);box-shadow:0 0 0 0 transparent;transition:transform .5s var(--ease),border-color .3s}
.h-post:nth-child(even){margin-left:clamp(0px,4vw,44px)}.h-post:nth-child(odd){margin-right:clamp(0px,4vw,44px)}
.h-post:hover{transform:translateY(-3px);border-color:var(--c)}
.h-pt{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.h-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 .8rem var(--sans);color:#111;background:var(--c)}
.h-an{font-weight:500;font-size:.92rem}
.h-pt .h-tag{margin-left:auto;color:var(--c);border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.h-post h3{font-size:1.2rem;margin:0 0 4px}.h-post p{margin:0;color:var(--soft);font-size:.95rem;line-height:1.5}
.h-react{display:flex;gap:16px;margin-top:10px;color:var(--muted);font-size:.82rem}
.h-cap{justify-self:end;color:var(--muted);font-size:.75rem}
.h-steps{list-style:none;margin:6px auto 26px;padding:0;display:flex;justify-content:center;gap:clamp(14px,4vw,44px);flex-wrap:wrap;font:1.25rem var(--serif)}
.h-steps b{display:block;font:500 .7rem var(--sans);letter-spacing:.16em;color:var(--or-text)}
.h-final .btn.alt{margin-left:6px}
@media (max-width:900px){.h-post:nth-child(n){margin:0}}

/* ===== Light theme (v1) — applies only when data-theme="light"; dark rules above are untouched ===== */
:root[data-theme=light] body.home{--bg:#F7F5F0;--card:#FFFEFB;--elev:#F0ECE4;--ink:#252525;--soft:#6B6863;--muted:#9A968F;--line:#E7E3DC;--or-text:#B84700;--on-ink:#F7F5F0;--l-btn:#D8D2C6}
/* hero: quiet warm glow instead of a strong one */
:root[data-theme=light] .h-glow{background:radial-gradient(50% 50% at 50% 50%,rgba(255,106,0,.11),transparent 70%)}
:root[data-theme=light] .h-line{opacity:.55}
:root[data-theme=light] .h-hero h1 em{color:#E25A00}
/* story cards: milk surface, barely-there warm tint, thin outline */
:root[data-theme=light] .h-card:nth-child(1){background:linear-gradient(160deg,#FFFEFB,#F8EFE2)}
:root[data-theme=light] .h-card:nth-child(2){background:linear-gradient(160deg,#FFFEFB,#F5F1E6)}
:root[data-theme=light] .h-card:nth-child(3){background:linear-gradient(160deg,#FFFEFB,#EFF0EC)}
:root[data-theme=light] .h-art{color:rgba(255,106,0,.09)}
:root[data-theme=light] .h-tag,:root[data-theme=light] .h-priv{border-color:rgba(184,71,0,.35)}
:root[data-theme=light] .h-pt .h-tag{border-color:color-mix(in srgb,var(--c) 55%,transparent)}
:root[data-theme=light] .h-card:hover,:root[data-theme=light] .h-card:focus-visible{border-color:var(--or);box-shadow:0 10px 30px -18px rgba(37,37,37,.18)}
:root[data-theme=light] .h-post:hover{box-shadow:0 8px 24px -18px rgba(37,37,37,.18)}
:root[data-theme=light] .h-mock{box-shadow:0 1px 0 rgba(37,37,37,.03)}
:root[data-theme=light] .h-goal li::before{border-color:#B9B4AA}
:root[data-theme=light] .h-dot{background:linear-gradient(90deg,transparent,rgba(255,106,0,.45) 50%,transparent) center/100% 1px no-repeat}
:root[data-theme=light] .h-dot::after{background:var(--or);box-shadow:0 0 10px rgba(255,106,0,.3)}
/* buttons: primary = brand orange with dark text (AA contrast), secondary = light with neat border */
:root[data-theme=light] .home .btn{background:var(--or);border-color:var(--or);color:#1D1409}
:root[data-theme=light] .home .btn:hover{background:var(--or2);border-color:var(--or2);color:#1D1409}
:root[data-theme=light] .home .btn.alt{background:transparent;color:var(--ink);border-color:var(--l-btn)}
:root[data-theme=light] .home .btn.alt:hover{background:transparent;border-color:var(--or);color:var(--or-text)}
:root[data-theme=light] .home .btn:active{transform:translateY(1px)}
/* header, theme button, menus & dialogs: light and without heavy shadows */
:root[data-theme=light] header{background:color-mix(in srgb,#FFFEFB 78%,transparent);border-color:var(--line)}
:root[data-theme=light] .theme:hover{border-color:var(--or)}
:root[data-theme=light] .acc-m{box-shadow:0 14px 34px -20px rgba(37,37,37,.22)}
:root[data-theme=light] .ul-dlg{box-shadow:0 18px 50px -24px rgba(37,37,37,.25)}
:root[data-theme=light] .ul-dlg-ov{background:rgba(37,37,37,.28)}
