:root{
  --bg:#09121a;
  --panel:rgba(8,17,25,.48);
  --panel-strong:rgba(8,17,25,.68);
  --line:rgba(255,255,255,.16);
  --line-strong:rgba(255,255,255,.32);
  --text:#f4f7fb;
  --muted:rgba(244,247,251,.74);
  --accent:#ff6b00;
  --accent-soft:rgba(255,107,0,.22);
  --shadow:0 18px 60px rgba(0,0,0,.35);
  --pad:clamp(18px,2.4vw,34px);
  --title:clamp(54px,19vw,116px);
  --subtitle:clamp(18px,2.2vw,28px);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Inter, Arial, Helvetica, sans-serif;
  color:var(--text);
  background:#03070b;
  overflow:hidden;
}
.bg-stack,
.bg-slide,
.bg-shade,
.bg-vignette{position:fixed; inset:0}
.bg-stack{z-index:0; overflow:hidden; background:linear-gradient(135deg,#0b1722,#081018)}
.bg-slide{
  opacity:0;
  transition:opacity 2.4s ease-in-out;
  background-size:cover;
  background-position:center center;
  filter:saturate(1.05) contrast(1.03) brightness(.92);
  will-change:opacity;
}
.bg-slide.active{opacity:1}
.bg-shade{
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(120deg, rgba(3,7,11,.92) 0%, rgba(3,7,11,.52) 28%, rgba(3,7,11,.18) 56%, rgba(3,7,11,.66) 100%),
    linear-gradient(180deg, rgba(3,7,11,.12) 0%, rgba(3,7,11,.08) 35%, rgba(3,7,11,.58) 100%);
}
.bg-vignette{
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,9,14,.10) 0%, rgba(4,9,14,.14) 24%, rgba(4,9,14,.30) 55%, rgba(4,9,14,.82) 100%),
    linear-gradient(90deg, rgba(4,9,14,.82), rgba(4,9,14,.22) 38%, rgba(4,9,14,.18) 62%, rgba(4,9,14,.82));
}
.frame{position:fixed; inset:12px; z-index:7; border:1px solid rgba(255,255,255,.12); pointer-events:none}
.frame::before,.frame::after{content:""; position:absolute; width:110px; height:110px; border-color:rgba(255,255,255,.46); border-style:solid}
.frame::before{left:16px; top:16px; border-width:2px 0 0 2px}
.frame::after{right:16px; bottom:16px; border-width:0 2px 2px 0}
.page{position:relative; z-index:8; min-height:100vh; display:flex; flex-direction:column; padding:var(--pad)}
.topbar{display:flex; justify-content:space-between; align-items:flex-start; gap:18px}
.brand,.status,.panel,.feature{border:1px solid var(--line); background:linear-gradient(180deg, var(--panel-strong), var(--panel)); box-shadow:var(--shadow); backdrop-filter:blur(11px)}
.brand{display:inline-flex; align-items:center; gap:16px; padding:14px 18px}
.mark{width:50px; height:50px; position:relative; border:1px solid rgba(255,255,255,.18); background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02))}
.mark::before,.mark::after{content:""; position:absolute; left:7px; right:7px; border-bottom:2px solid #fff; transform-origin:bottom}
.mark::before{bottom:12px; transform:skewX(-39deg)}
.mark::after{bottom:19px; right:15px; border-color:var(--accent); transform:skewX(-48deg)}
.brandtext strong{display:block; font-size:28px; letter-spacing:-.045em}
.brandtext strong span{color:var(--accent)}
.brandtext small{display:block; margin-top:4px; color:var(--muted); text-transform:uppercase; letter-spacing:.16em; font-size:11px}
.status{padding:14px 16px; min-width:260px; text-align:right}
.status .label{color:rgba(255,255,255,.58); text-transform:uppercase; letter-spacing:.14em; font-size:11px}
.status .value{display:inline-flex; align-items:center; gap:10px; margin-top:8px; font-size:15px; letter-spacing:.08em; text-transform:uppercase}
.status .value::before{content:""; width:10px; height:10px; background:var(--accent); box-shadow:0 0 18px rgba(255,107,0,.85); animation:pulse 3.8s ease-in-out infinite}
.hero{flex:1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.7fr); gap:clamp(22px,4vw,70px); align-items:center; padding:3vh 0 4vh}
.eyebrow{display:inline-flex; align-items:center; gap:12px; margin-bottom:18px; padding:10px 12px; border-left:4px solid var(--accent); background:rgba(8,17,25,.42); color:rgba(255,255,255,.84); text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:700}
h1{margin:0; font-size:var(--title); line-height:.74; letter-spacing:-.03em; font-weight:900; text-shadow:0 20px 44px rgba(0,0,0,.62)}
h1 .accent{color:var(--accent)}
.subline{display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:start; margin-top:26px; max-width:820px}
.subline::before{content:""; height:2px; margin-top:.78em; background:linear-gradient(90deg, var(--accent), rgba(255,107,0,0)); box-shadow:0 0 24px rgba(255,107,0,.46)}
.subline p{margin:0; font-size:var(--subtitle); line-height:1.45; color:rgba(255,255,255,.88); max-width:42ch}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 22px; border:1px solid var(--line-strong); background:rgba(8,17,25,.38); color:#fff; text-decoration:none; text-transform:uppercase; letter-spacing:.12em; font-size:13px; font-weight:800; transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.56); background:rgba(8,17,25,.52); box-shadow:0 14px 30px rgba(0,0,0,.26)}
.btn.primary{background:linear-gradient(90deg, var(--accent), #d95300); border-color:rgba(255,107,0,.78); box-shadow:0 16px 38px rgba(255,107,0,.22)}
.side{display:grid; gap:14px; align-self:end}
.panel{padding:16px}
.panel .title{margin:0 0 12px; color:rgba(255,255,255,.62); text-transform:uppercase; letter-spacing:.18em; font-size:11px}
.panel p{margin:0; color:rgba(255,255,255,.84); line-height:1.56}
.feature-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.feature{padding:14px}
.feature strong{display:block; font-size:15px; margin-bottom:6px; color:#fff}
.feature span{display:block; color:var(--muted); font-size:13px; line-height:1.45}
.contact-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
.contact-row div{border-top:1px solid var(--line); padding-top:10px; color:var(--muted); font-size:13px; line-height:1.45}
.contact-row strong{display:block; color:#fff; margin-bottom:4px; font-size:14px}
.contact-row a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,107,0,.62); padding-bottom:2px}
.contact-row a:hover{color:#ffb070}
.footer{display:flex; justify-content:space-between; align-items:end; gap:20px; color:rgba(255,255,255,.62); font-size:12px; text-transform:uppercase; letter-spacing:.11em}
.footer .right{text-align:right}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.92}}
@media (max-width:1040px){
  body{overflow:auto}
  .hero{grid-template-columns:1fr; align-items:end}
  .side{align-self:start}
  .status{min-width:0; text-align:left}
  .footer{flex-direction:column; align-items:flex-start}
  .footer .right{text-align:left}
}
@media (max-width:720px){
  .frame{inset:8px}
  .frame::before,.frame::after{width:72px; height:72px}
  .topbar{flex-direction:column; align-items:stretch}
  .brand,.status{width:100%}
  h1{font-size:clamp(50px,18vw,88px)}
  .subline{grid-template-columns:1fr}
  .subline::before{width:84px}
  .actions{flex-direction:column}
  .btn{width:100%}
  .feature-grid,.contact-row{grid-template-columns:1fr}
}