/* Product layout is loaded from hero-layout.json. Visual authoring: hero-editor.js / hero-editor.css. */
.hero-layered {
  --stage-width:40%; --stage-right:3.5%; --stage-bottom:21%;
  --shadow-opacity:.64; --reflection-opacity:.16; --reflection-blur:1.4px;
  --workshop-position:50% 43%; --workshop-brightness:.55;
}

/* Local overrides: the remainder of the homepage continues using reference.css. */
.site-header.hero-header { position:absolute; inset:0 0 auto; height:92px; z-index:20; background:transparent; color:#fff; border:0; box-shadow:none; padding:0 5.5%; gap:35px; }
.hero-header .brand { color:white; flex-shrink:0; }
.hero-header .brand strong { font-size:29px; line-height:1.1; }
.hero-header .brand span { font-size:10px; letter-spacing:.4px; }
.hero-header nav { flex:1; justify-content:flex-end; gap:clamp(16px,2.2vw,44px); font-size:16px; }
.hero-header nav a { color:#ecf1f6; white-space:nowrap; }
.hero-header nav a:first-child { text-underline-offset:14px; text-decoration:underline; text-decoration-color:#087cff; }
.hero-header nav .nav-cta { background:#006cf4; color:white; padding:11px 21px; border-radius:5px; }
.hero-layered.hero { position:relative; display:block; isolation:isolate; height:clamp(650px,39.6vw,850px); min-height:0; padding:0; overflow:hidden; background:#091827; color:white; }
.hero-layered .workshop-layer { position:absolute; z-index:-5; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--workshop-position); filter:brightness(var(--workshop-brightness)) saturate(.35) blur(2px); }
.hero-layered .atmosphere-layer { position:absolute; z-index:-4; inset:0; background:linear-gradient(90deg,rgba(0,15,28,.93),rgba(0,16,31,.66) 46%,rgba(2,20,36,.30)),linear-gradient(180deg,#06162450,transparent 50%,#05121b60); }
.hero-layered .table-layer { position:absolute; z-index:-3; inset:0; clip-path:polygon(0 75%,100% 59%,100% 100%,0 100%); background:repeating-linear-gradient(174deg,#becbd206 0 1px,transparent 1px 4px),linear-gradient(108deg,#243340,#526271 65%,#778692); }
.hero-layered .table-light-layer { position:absolute; z-index:-2; inset:0; clip-path:polygon(0 75%,100% 59%,100% 100%,0 100%); background:linear-gradient(100deg,#071b2bc9,transparent 64%),radial-gradient(ellipse at 83% 75%,#d4e5ed42,transparent 65%); }
.hero-layered .hero-copy { position:absolute; top:22%; left:5.5%; width:53%; z-index:7; }
.hero-layered .eyebrow { color:#a9b5c2; font-size:clamp(12px,1vw,20px); letter-spacing:1.8px; margin:0 0 12px; }
.hero-layered h1 { font-size:clamp(28px,2.5vw,51px); line-height:1.3; font-weight:700; letter-spacing:-1px; margin:0 0 14px; white-space:nowrap; }
.hero-layered h1 em { color:#0077ff; font-style:normal; }
.hero-layered h2 { font-size:clamp(17px,1.48vw,30px); font-weight:600; line-height:1.5; margin:0 0 10px; }
.hero-layered .lead { font-size:clamp(15px,1.25vw,25px); color:#c2cbd5; line-height:1.6; margin:0; }
.hero-layered .hero-benefits { display:flex; gap:0; margin:38px 0 26px; width:94%; }
.hero-benefits>div { display:flex; align-items:center; gap:12px; padding:0 20px; border-right:1px solid #007be377; }
.hero-benefits>div:first-child { padding-left:0; }
.hero-benefits>div:last-child { border:0; padding-right:0; }
.hero-layered svg { width:38px; height:38px; fill:none; stroke:#087bff; stroke-width:1.7; flex-shrink:0; }
.hero-benefits b { display:block; font-size:clamp(13px,.98vw,20px); font-weight:500; white-space:nowrap; }
.hero-benefits small { display:block; color:#c7d0da; font-size:clamp(10px,.68vw,14px); white-space:nowrap; }
.hero-layered .actions { display:flex; gap:30px; margin:0; }
.hero-layered .button { min-width:210px; padding:15px 30px; font-size:21px; justify-content:center; border-radius:5px; background:#0070fa; border:1px solid #0070fa; color:white; }
.hero-layered .button.secondary { min-width:245px; background:#04132055; border:1px solid #e6edf2; }
.hero-layered .hero-metrics { position:absolute; left:5.5%; bottom:11%; width:45%; display:flex; z-index:7; gap:0; }
.hero-metrics>div { flex:1; display:flex; align-items:center; gap:12px; padding:0 25px; border-right:1px solid #ffffff50; }
.hero-metrics>div:first-child { padding-left:0; }
.hero-metrics>div:last-child { border:0; }
.hero-metrics strong { display:block; font-size:clamp(20px,1.45vw,29px); line-height:1.25; white-space:nowrap; }
.hero-metrics strong small { font-size:15px; font-weight:400; }
.hero-metrics span { display:block; font-size:14px; color:#c3ced9; white-space:nowrap; }
.hero-layered .product-stage { position:absolute; right:var(--stage-right); bottom:var(--stage-bottom); width:var(--stage-width); aspect-ratio:2.2; z-index:3; }
.hero-layered .table-caption { position:absolute; right:4%; bottom:3%; color:#dbe5eb; font-size:16px; letter-spacing:3px; padding-bottom:8px; border-bottom:3px solid #087cff; transform:rotate(-5deg); z-index:4; }
@media(max-width:1500px){.hero-layered .hero-benefits{margin-top:28px}.hero-benefits>div{gap:8px;padding:0 12px}.hero-layered svg{width:30px;height:30px}.hero-layered .button{font-size:17px;min-width:170px;padding:13px 22px}.hero-layered .button.secondary{min-width:210px}.hero-metrics>div{padding:0 16px;gap:8px}.hero-metrics span{font-size:12px}.hero-header nav{font-size:13px;gap:20px}.hero-header .brand strong{font-size:25px}.hero-layered .hero-copy{top:23%}}
@media(max-width:1100px){.hero-header nav{gap:13px;font-size:12px}.hero-layered.hero{height:670px}.hero-layered h1{white-space:normal;max-width:510px}.hero-layered h2{font-size:17px}.hero-layered .hero-benefits{flex-wrap:wrap;gap:15px}.hero-benefits>div{width:45%;padding:0;border:0}.hero-layered .hero-metrics{width:53%;bottom:8%}.hero-metrics>div{padding:0 10px}.hero-metrics svg{display:none}.hero-layered .table-caption{font-size:12px}}
@media(max-width:760px){.site-header.hero-header{height:76px;min-height:0;padding:0 6%;flex-wrap:nowrap}.hero-header .menu-toggle{color:white;border-color:#597389}.hero-header nav{position:absolute;top:76px;left:0;right:0;background:#071e32;padding:20px;flex-wrap:wrap}.hero-layered.hero{height:990px}.hero-layered .hero-copy{left:6%;width:88%;top:116px}.hero-layered h1{font-size:31px;white-space:normal;max-width:100%}.hero-layered h2{font-size:18px}.hero-layered .eyebrow{font-size:10px;letter-spacing:1px}.hero-layered .lead{font-size:14px}.hero-layered .hero-benefits{margin:22px 0;gap:16px}.hero-benefits b{font-size:14px}.hero-benefits small{font-size:11px}.hero-layered .actions{gap:12px}.hero-layered .button,.hero-layered .button.secondary{min-width:0;flex:1;padding:13px 8px;font-size:15px}.hero-layered .product-stage{width:88%;right:6%;bottom:200px}.hero-layered .hero-metrics{left:6%;width:88%;bottom:56px;display:grid;grid-template-columns:1fr 1fr;gap:18px}.hero-metrics>div{padding:0;border:0}.hero-metrics svg{display:block}.hero-layered .table-caption{display:none}.hero-layered .table-layer,.hero-layered .table-light-layer{clip-path:polygon(0 64%,100% 59%,100% 100%,0 100%)}.hero-layered .aux-piece{display:none}}