/* hero.css — Opening section: headline, buttons, and the rotating brand orbit. */

.hero{padding-block:clamp(48px,7vw,96px) clamp(56px,7vw,96px);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero-copy{display:grid;gap:28px;min-width:0}
.hero h1{font-size:clamp(40px,6.2vw,84px);line-height:1.02;font-weight:700;letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--brass);font-weight:700}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-meta{display:flex;flex-wrap:wrap;gap:12px 32px;padding-top:28px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink-soft)}
.hero-meta b{color:var(--ink);font-weight:500}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* Brand orbit */
.orbit{position:relative;width:100%;max-width:520px;aspect-ratio:1;margin-inline:auto;--r1:30%;--r2:46%}
.ring{position:absolute;inset:0;margin:auto;border-radius:50%;border:1px solid var(--line)}
.ring.r1{width:60%;height:60%}
.ring.r2{width:92%;height:92%;border-style:dashed}
.ring.r0{width:100%;height:100%;border-color:transparent;background:radial-gradient(circle at center,var(--brass-soft) 0,transparent 55%);opacity:.7}
.core{position:absolute;inset:0;margin:auto;width:30%;height:30%;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;text-align:center;box-shadow:0 30px 60px -30px rgba(14,37,48,.6);z-index:3}
.core span{font-family:var(--display);font-size:clamp(16px,2.2vw,22px);letter-spacing:.2em;font-weight:600;line-height:1.1}
.core-mark{display:block;width:34%;height:auto;margin:0 auto 6px;color:var(--paper);--brass:#D7B46E}
.core small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.3em;opacity:.7;margin-top:4px}
.spin{position:absolute;inset:0;animation:spin 90s linear infinite}
.spin.inner{animation-duration:70s;animation-direction:reverse}
.node{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(-1 * var(--r)))}
.node a{position:absolute;transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;width:120px}
.node .counter{animation:spin 90s linear infinite reverse;display:flex;flex-direction:column;align-items:center;gap:6px}
.spin.inner .node .counter{animation:spin 70s linear infinite}
.dot{width:46px;height:46px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--petrol);transition:transform .25s,border-color .25s,background .25s}
:root[data-theme="dark"] .dot{color:var(--brass)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .dot{color:var(--brass)}}
.dot svg{width:22px;height:22px}
.node a:hover .dot{transform:scale(1.12);border-color:var(--brass)}
.node .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);text-align:center;line-height:1.3;background:color-mix(in srgb,var(--paper) 80%,transparent);padding:1px 4px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:520px){.node .lbl{font-size:9px}.dot{width:38px;height:38px}.dot svg{width:18px;height:18px}.node a{width:90px}}
@media (prefers-reduced-motion:reduce){.spin,.node .counter{animation:none!important}html{scroll-behavior:auto}}