:root{--bg:#eceeea;--surface:#f7f8f5;--ink:#14201f;--muted:#4f5d5b;--green:#0f3b33;--brass:#9a7634;--line:#c9cfc8;--hand:#14201f;--on:#f1efe6}
@media (prefers-color-scheme:dark){:root{--bg:#0d1514;--surface:#141f1e;--ink:#ecebe3;--muted:#a3b0ad;--green:#1a5246;--brass:#c9a35a;--line:#2a3a38;--hand:#ecebe3}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{background:var(--bg);color:var(--ink);font:17px/1.7 "Inter Tight",system-ui,sans-serif}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;line-height:1.05;letter-spacing:-.01em}
a{color:inherit}:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
header{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top{display:flex;justify-content:space-between;align-items:center;height:58px}
.logo{font-family:"Cormorant Garamond",serif;font-size:1.5rem;font-weight:600;text-decoration:none}
.sub{display:flex;gap:24px;overflow-x:auto;padding:0 0 10px;font-size:.92rem;white-space:nowrap;scrollbar-width:none}
.sub a{text-decoration:none;color:var(--muted)}.sub a:hover,.sub a[aria-current]{color:var(--ink)}.sub a[aria-current]{border-bottom:2px solid var(--brass)}
.btn{display:inline-block;background:var(--green);color:var(--on);padding:12px 24px;border-radius:999px;text-decoration:none;border:0;font:500 1rem "Inter Tight",sans-serif;cursor:pointer;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px);background:var(--brass)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:70px 0 80px}
.hero h1,.ph h1{font-size:clamp(3rem,8vw,6.2rem)}
.ph{padding:64px 0 48px}.ph h1{font-size:clamp(2.6rem,6.5vw,5rem);max-width:16ch}
.crumb{font-size:.88rem;color:var(--muted);margin-bottom:18px}.crumb a{text-decoration:none}
.lead{font-size:1.15rem;color:var(--muted);max-width:52ch;margin:24px 0 30px}
.clockbox{text-align:center}.clockbox svg{width:100%;max-width:420px;filter:drop-shadow(0 24px 40px rgba(0,0,0,.18))}
.digital{margin-top:16px;font-family:"Cormorant Garamond",serif;font-size:2.2rem;font-variant-numeric:tabular-nums}
.digital small{display:block;font:500 .85rem "Inter Tight",sans-serif;color:var(--muted)}
section{padding:72px 0;border-top:1px solid var(--line)}
section h2{font-size:clamp(2.1rem,4.5vw,3.3rem);margin-bottom:16px;max-width:20ch}
.txt p{color:var(--muted);max-width:66ch;margin-bottom:14px}.txt p strong{color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:26px;display:flex;flex-direction:column;gap:10px;text-decoration:none;transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-4px);border-color:var(--brass)}.card:nth-child(2n){border-radius:28px 6px}
.card svg{width:92px;height:92px}.card h3{font-size:1.65rem}.card p{color:var(--muted);font-size:.95rem}
.card b{margin-top:auto;color:var(--green);font-size:.92rem}
.band{background:var(--green);color:var(--on);border-top:0}.band .txt p{color:#cfd8d2}
.viz{background:var(--surface);border:1px solid var(--line);border-radius:6px 30px 6px 30px;padding:30px;margin-top:34px}
.viz h3{font-size:1.8rem;margin-bottom:6px}.viz .note{font-size:.85rem;color:var(--muted);margin-top:14px}
.viz input[type=range]{width:100%;accent-color:var(--brass);margin:12px 0}
.bar{display:grid;grid-template-columns:120px 1fr 90px;gap:12px;align-items:center;margin:10px 0;font-size:.95rem}
.bar span{height:16px;background:var(--line);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--green);border-radius:99px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.bar.b i{background:var(--brass)}.in .bar i{width:var(--w)}
.bar em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.mv{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.mv h4{font:600 1rem "Inter Tight";margin-bottom:6px}
.mv .bar{grid-template-columns:90px 1fr;font-size:.85rem}
.gears svg,.chr svg,.sz svg{width:100%;max-width:420px;display:block;margin:0 auto}
.gear{animation:spin 24s linear infinite}.gear.r{animation-direction:reverse}@keyframes spin{to{transform:rotate(360deg)}}
.chr .row{display:flex;gap:10px;justify-content:center;margin-top:12px;align-items:center;flex-wrap:wrap}
.chr output{font:500 2rem "Cormorant Garamond";min-width:130px;text-align:center;font-variant-numeric:tabular-nums}
.sz .out{text-align:center;margin-top:8px;font-size:1.05rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px;counter-reset:s}
.steps div{counter-increment:s;border-top:2px solid var(--brass);padding-top:14px}
.steps div:before{content:counter(s);font:2.2rem "Cormorant Garamond";color:var(--brass)}
.steps h3{font-size:1.45rem}.steps p{color:var(--muted);font-size:.95rem}
.formbox{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:flex;flex-direction:column;gap:6px;font-size:.92rem;font-weight:500}.full{grid-column:1/-1}
input,select,textarea{font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
textarea{min-height:100px;resize:vertical}
.ok{display:none;grid-column:1/-1;padding:16px;border-left:3px solid var(--brass);background:var(--surface)}
details{border-bottom:1px solid var(--line);padding:16px 0}
summary{cursor:pointer;font:1.5rem "Cormorant Garamond",serif;list-style:none;display:flex;justify-content:space-between}
summary:after{content:"+";transition:transform .25s}details[open] summary:after{transform:rotate(45deg)}
details p{color:var(--muted);margin-top:8px;max-width:65ch}
.rel{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.rel a{border:1px solid var(--line);padding:8px 16px;border-radius:99px;text-decoration:none;font-size:.92rem;background:var(--surface)}.rel a:hover{border-color:var(--brass)}
footer{padding:48px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
footer .rel a{font-size:.85rem}
.hand{transform-origin:200px 200px}
@media(max-width:860px){.hero,.formbox{grid-template-columns:1fr}.grid,.steps,.mv{grid-template-columns:1fr}form{grid-template-columns:1fr}.bar{grid-template-columns:90px 1fr 76px}.hero{padding:40px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.gear{animation:none}.btn,.card,.bar i{transition:none}}