/* Keep the centered brand figure and navigation in separate layout tracks. */
header.home-header{display:grid;grid-template-columns:1fr 70px 1fr;grid-template-rows:82px auto;gap:0 24px;height:auto;min-height:138px;padding:0 6% 14px;align-items:center}
.home-header>.brand{justify-self:start}.home-header>.button{justify-self:end;white-space:nowrap}
.home-header>.observer{position:relative;inset:auto;width:60px;max-width:none;justify-self:center;margin:0;opacity:1}
header.home-header nav{position:static;transform:none;grid-column:1/-1;width:100%;height:auto;display:flex!important;flex-wrap:wrap;justify-content:center;gap:10px 30px;padding:8px 0 0}
header.home-header nav>a{display:block;white-space:nowrap;font-size:13px;line-height:1.5;padding:4px 0}
.intro-support{display:block;margin-top:12px;color:#b8b8bd;font-size:.9em}
.hero-copy .intro{max-width:590px}
@media(max-width:600px){header.home-header{grid-template-columns:1fr 44px 1fr;grid-template-rows:76px auto;column-gap:10px;min-height:150px;padding:0 5% 12px}.home-header>.observer{width:44px}header.home-header nav{gap:4px 18px}header.home-header nav>a{font-size:11px}.home-header>.button.small{font-size:11px;padding:9px 8px;gap:6px}.home-header .wordmark-name{font-size:19px}.hero-copy{padding-top:195px}.hero-copy .intro{max-width:100%;line-height:1.65}.hero-copy .intro br{display:block}.hero{min-height:880px}}
@media(max-width:360px){.home-header .wordmark-name{font-size:16px}.home-header>.button.small{font-size:10px}.home-header>.observer{width:38px}header.home-header{column-gap:6px}}

/* Silver navigation rail with a muted-gold accent for custom builds. */
header.home-header{padding-bottom:18px;background:linear-gradient(180deg,#090909f5,#111113d9);border-bottom:1px solid #c1ad7826}
header.home-header nav{width:max-content;max-width:100%;justify-self:center;gap:6px;padding:6px;background:linear-gradient(135deg,#202023b3,#0d0d0ff0);border:1px solid #ffffff1c;border-radius:12px;box-shadow:inset 0 1px #ffffff08,0 10px 28px #0003}
header.home-header nav>a{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;padding:10px 18px;border:1px solid transparent;border-radius:7px;color:#babac1;font-size:12px;letter-spacing:.15px;transition:color .2s,background .2s,border-color .2s,transform .2s}
header.home-header nav>a:hover,header.home-header nav>a:focus-visible{color:#fff;background:#ffffff09;border-color:#ffffff24;transform:translateY(-1px)}
header.home-header nav>.nav-learn{color:#e0e0e5;background:linear-gradient(135deg,#ffffff0b,#ffffff03);border-color:#ffffff16}
header.home-header nav>.nav-build{color:#d9c28e;background:linear-gradient(125deg,#bda36c15,#bda36c05);border-color:#bda36c40}
.nav-build::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 25%,#e8d3a020 50%,transparent 75%);transform:translateX(-150%);animation:nav-shimmer 8s ease-in-out infinite}
.nav-spark{font-size:14px;animation:nav-spark 6s ease-in-out infinite}
.home-header>.button.small{border-radius:7px;border-color:#d2c19c80;background:linear-gradient(135deg,#dedee2,#a7a7af);color:#171719;box-shadow:inset 0 1px #fff8;transition:transform .2s,box-shadow .2s}
.home-header>.button.small:hover{box-shadow:0 0 20px #c1ad7826;transform:translateY(-2px)}
.home-header>.button.small>span{animation:join-nudge 7s ease-in-out infinite}
@keyframes nav-shimmer{0%,68%{transform:translateX(-150%)}88%,100%{transform:translateX(150%)}}
@keyframes nav-spark{0%,70%,100%{opacity:.65}80%{opacity:1}}
@keyframes join-nudge{0%,75%,100%{transform:translate(0,0)}83%{transform:translate(2px,-2px)}91%{transform:translate(0,0)}}
@media(max-width:800px){header.home-header nav>a{padding:9px 12px;font-size:11px}header.home-header nav{gap:4px}}
@media(max-width:600px){header.home-header{padding-bottom:12px}header.home-header nav{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));width:100%;gap:4px;padding:5px}header.home-header nav>a{grid-column:span 2;font-size:10px;letter-spacing:0;padding:9px 4px}header.home-header nav>a:nth-child(4),header.home-header nav>a:nth-child(5){grid-column:span 3}.hero-copy{padding-top:210px}.home-header>.button.small{padding:9px 8px}}
@media(prefers-reduced-motion:reduce){.nav-build::after,.nav-spark,.home-header>.button.small>span{animation:none!important}.nav-build::after{display:none}header.home-header nav>a:hover,.home-header>.button.small:hover{transform:none}}

/* Lead with the setup: strong hook, clear product detail, readable on motion. */
.hero-copy .hook-block{max-width:620px;margin-top:24px;padding:22px 24px;border-left:2px solid #c8ad70;background:linear-gradient(100deg,#0c0c0e70,#0c0c0e38 72%,#0c0c0e00);border-radius:0 10px 10px 0;box-shadow:none;text-shadow:0 2px 10px #000c}
.hook-title{margin:0 0 16px;color:#f4f4f6;font-size:clamp(25px,2.7vw,37px);font-weight:750;line-height:1.15;letter-spacing:-.8px;text-wrap:balance}
.hook-title span{color:#ddc48f}.hook-description{margin:0;color:#ceced4;font-size:16px;line-height:1.65}.hook-description strong{color:#f4f4f6;font-weight:650}
.hook-levels{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.hook-levels span{border:1px solid #c8ad7045;border-radius:4px;padding:6px 10px;color:#e2cda3;background:#c8ad700b;font-size:10px;font-weight:700;letter-spacing:1.4px;line-height:1.4}
.hook-block .intro-support{margin:0;color:#bdbdc5;font-size:14px;line-height:1.6}
@media(max-width:600px){.hero-copy .hook-block{padding:18px 16px;margin-top:22px}.hook-title{font-size:27px;letter-spacing:-.6px}.hook-description{font-size:15px}.hook-block .intro-support{font-size:13px}.hero{min-height:1040px}}

/* Transparent, feathered shading keeps the interactive scene visible. */
.hero-shade{background:linear-gradient(90deg,#0c0c0e9c 0%,#0c0c0e59 34%,transparent 73%),linear-gradient(0deg,#0c0c0e,transparent 22%)}
.hero-copy h1,.hero-copy .eyebrow{text-shadow:0 2px 14px #000b}
@media(max-width:600px){.hero-shade{background:linear-gradient(180deg,#0c0c0ed9 0%,#0c0c0e73 32%,#0c0c0e33 60%,transparent 78%,#0c0c0e 100%)}.hero-copy .hook-block{background:linear-gradient(100deg,#0c0c0e80,#0c0c0e40 75%,transparent)}}