/* Herms Local Video product page */
.herms-page .site-header nav a[aria-current="page"] { color: #48c7ff; }
.herms-hero { position: relative; width: min(var(--max), calc(100% - 40px)); min-height: 100svh; margin: 0 auto; padding: 148px 0 78px; display: grid; grid-template-columns: .88fr 1.12fr; gap: 70px; align-items: center; overflow: visible; }
.herms-copy { position: relative; z-index: 2; min-width: 0; }
.herms-copy h1 { max-width: 800px; margin: 0; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', Manrope, sans-serif; font-size: clamp(74px, 8.2vw, 136px); line-height: .82; letter-spacing: -.025em; text-transform: uppercase; text-shadow: 0 8px 36px #000; }
.herms-copy h1 strong { color: #1688ff; background: linear-gradient(180deg, #29baff 0%, #0566ed 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 18px rgba(14,119,255,.32)); }
.herms-console { position: relative; min-height: 650px; overflow: hidden; border: 1px solid rgba(38,129,255,.48); background: radial-gradient(circle at 78% 26%, rgba(22,143,255,.28), transparent 22%), radial-gradient(circle at 25% 82%, rgba(7,59,157,.3), transparent 33%), #020711; box-shadow: 0 30px 100px #000, 0 0 60px rgba(0,103,255,.16); }
.herms-console::before { content: ""; position: absolute; inset: 60px 0 44px; opacity: .28; background-size: 38px 38px; background-image: linear-gradient(rgba(43,133,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(43,133,255,.22) 1px, transparent 1px); mask-image: radial-gradient(circle at 58% 44%, #000, transparent 66%); }
.console-top, .console-foot { position: absolute; z-index: 4; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; border-color: rgba(56,133,255,.3); background: rgba(1,5,14,.8); backdrop-filter: blur(10px); }
.console-top { top: 0; min-height: 62px; padding: 0 20px; border-bottom: 1px solid rgba(56,133,255,.3); }
.console-top > div { display: flex; align-items: center; gap: 10px; }.console-top b { color: #8fa4c4; font: 500 9px DM Mono, monospace; letter-spacing: .08em; }
.console-body { position: relative; z-index: 2; padding: 92px 32px 72px; }.console-label { color: #42c7ff; font: 500 9px DM Mono, monospace; letter-spacing: .1em; }
.source-frame { position: relative; height: 250px; margin-top: 15px; overflow: hidden; border: 1px solid rgba(46,135,255,.45); background: linear-gradient(135deg, #031a3d, #071a34 46%, #02060f); box-shadow: inset 0 0 80px rgba(0,117,255,.14); }.source-light { position: absolute; width: 270px; height: 270px; left: 8%; top: -45%; border-radius: 50%; background: #119eff; filter: blur(55px); opacity: .65; }.source-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(84,194,255,.35), transparent 28%, transparent 70%, rgba(12,98,240,.18)); }
.source-card { position: absolute; z-index: 2; left: 28px; bottom: 28px; max-width: 260px; padding: 16px 18px; border-left: 2px solid #39c8ff; background: linear-gradient(90deg, rgba(0,25,70,.9), rgba(0,25,70,.25)); }.source-card span, .source-card small { display:block; color:#91a8c9; font:500 8px DM Mono,monospace; letter-spacing:.1em; }.source-card b { display:block; margin:6px 0; color:#fff; font-size:17px; line-height:1.2; }.camera-rings { position:absolute; z-index:1; right:14%; top:50%; width:145px; height:145px; border:1px solid rgba(66,194,255,.58); border-radius:50%; box-shadow:0 0 0 25px rgba(39,154,255,.08),0 0 0 51px rgba(39,154,255,.04); transform:translateY(-50%); }
.prompt-preview { position: relative; z-index: 3; width: min(430px, calc(100% - 20px)); margin: -28px 0 0 auto; padding: 17px; border: 1px solid rgba(38,129,255,.5); background: rgba(2,8,20,.92); box-shadow: 0 18px 55px rgba(0,0,0,.5), 0 0 30px rgba(0,105,255,.08); }.prompt-preview > span, .render-meter span { color: #42c7ff; font:500 8px DM Mono,monospace; letter-spacing:.1em; }.prompt-preview p { margin:10px 0 15px; color:#d4e3f8; font-size:12px; line-height:1.6; }.prompt-preview div { display:flex; align-items:center; gap:8px; color:#9fb3d0; font:500 8px DM Mono,monospace; letter-spacing:.07em; }.prompt-preview div i { color:#42c7ff; font-style:normal; }.prompt-preview em { margin-left:auto; color:#41cbff; font-style:normal; }
.render-meter { position:absolute; z-index:3; left:32px; bottom:64px; padding:12px 15px; border:1px solid rgba(38,129,255,.34); background:rgba(2,8,20,.88); }.render-meter b { display:block; margin-top:4px; color:#d4e5fb; font:500 9px DM Mono,monospace; letter-spacing:.08em; }.render-meter i { position:absolute; right:12px; top:14px; color:#41cbff; font-style:normal; text-shadow:0 0 14px #1688ff; }.console-foot { bottom:0; min-height:44px; padding:0 18px; border-top:1px solid rgba(56,133,255,.3); color:#8192ac; font:500 8px DM Mono,monospace; letter-spacing:.06em; }
.herms-work { border-bottom: 1px solid rgba(47,125,237,.22); }.herms-steps { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }.herms-steps article { position:relative; min-height:305px; padding:30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(7,23,48,.46),rgba(2,5,13,.72)); }.herms-steps article>span { position:absolute; right:20px; top:18px; color:#667d9b; font:500 10px DM Mono,monospace; }.herms-steps h3 { margin:0; font-size:17px; }.herms-steps p { margin:12px 0 0; color:var(--muted); font-size:12px; line-height:1.7; }
.herms-boundary { padding-top:40px; }.boundary-panel { display:grid; grid-template-columns:1.1fr .9fr; gap:75px; align-items:center; min-height:590px; padding:70px; border:1px solid rgba(40,133,255,.42); background:radial-gradient(circle at 75% 25%,rgba(0,110,255,.16),transparent 27%), #040a14; }.boundary-panel h2 { margin:0; font-size:clamp(48px,4.7vw,75px); line-height:.98; letter-spacing:-.055em; }.boundary-panel h2 span { color:#1688ff; }.boundary-panel>div>p:not(.section-kicker) { max-width:620px; margin:28px 0 0; color:var(--muted); font-size:16px; line-height:1.75; }.boundary-panel ul { margin:0; padding:0; list-style:none; }.boundary-panel li { display:grid; grid-template-columns:28px 1fr; gap:12px; padding:18px 0; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.65; }.boundary-panel li>i { width:24px; height:24px; display:grid; place-items:center; border-radius:0; color:#38c7ff; background:rgba(13,94,210,.12); font-style:normal; }.boundary-panel li b { display:block; margin-bottom:3px; color:var(--ink); font-size:13px; }
@media (max-width:1180px) { .herms-hero { grid-template-columns:1fr; }.herms-console { max-width:860px; width:100%; margin-left:auto; }.herms-steps { grid-template-columns:repeat(2,1fr); } }
@media (max-width:860px) { .herms-hero { width:min(100% - 28px,var(--max)); padding-top:120px; gap:42px; }.boundary-panel { grid-template-columns:1fr; gap:35px; padding:48px 34px; }.herms-work, .herms-boundary { width:min(100% - 28px,var(--max)); } }
@media (max-width:620px) { .herms-copy h1 { font-size:clamp(58px,18vw,82px); line-height:.83; }.herms-console { min-height:570px; }.console-body { padding:88px 16px 72px; }.source-frame { height:230px; }.source-card { left:16px; bottom:16px; }.prompt-preview { margin-top:-14px; }.render-meter { left:16px; }.console-foot span:nth-child(2) { display:none; }.herms-steps { grid-template-columns:1fr; }.herms-steps article { min-height:245px; }.boundary-panel { padding:38px 20px; }.boundary-panel h2 { font-size:44px; } }