:root {
  --orange: #f47a12;
  --orange-2: #ff9b2f;
  --bg: #07080b;
  --panel: rgba(14, 17, 22, .78);
  --panel-2: rgba(24, 27, 33, .72);
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(244,122,18,.65);
  --text: #fff;
  --muted: #aeb3bb;
  --shadow: 0 22px 70px rgba(0,0,0,.55);
  --radius: 24px;
  --font: "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
.screen-body {
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
  background:
    radial-gradient(circle at 77% 40%, rgba(244,122,18,.25), transparent 28%),
    radial-gradient(circle at 20% 85%, rgba(244,122,18,.14), transparent 22%),
    linear-gradient(135deg, #08090d 0%, #12151c 52%, #050608 100%);
}
.screen-shell {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 94px 1fr 78px;
  gap: 18px;
  padding: 18px 24px 16px;
  position: relative;
}
.screen-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
  pointer-events: none;
}
.screen-header,
.screen-main,
.ticker-bar { position: relative; z-index: 1; }
.screen-header {
  height: 94px;
  display: grid;
  grid-template-columns: 30% 40% 30%;
  align-items: center;
  border-bottom: 1px solid rgba(244,122,18,.38);
  background: linear-gradient(180deg, rgba(10,12,16,.68), rgba(10,12,16,.18));
  border-radius: 0 0 22px 22px;
}
.brand-block { display: flex; align-items: center; gap: 16px; padding-left: 10px; }
.phoenix-mark {
  width: 62px; height: 62px; border-radius: 18px;
  display: grid; place-items: center;
  color: var(--orange); font-size: 40px;
  background: linear-gradient(135deg, rgba(244,122,18,.18), rgba(244,122,18,.03));
  border: 1px solid rgba(244,122,18,.35);
  transform: rotate(45deg);
  box-shadow: 0 0 28px rgba(244,122,18,.25);
}
.phoenix-mark::first-letter { transform: rotate(-45deg); }
.brand-name { font-size: clamp(32px, 2.8vw, 54px); font-weight: 950; letter-spacing: 2px; line-height: .9; }
.brand-subtitle { color: #e6e6e6; font-size: clamp(14px, 1vw, 19px); letter-spacing: .4px; margin-top: 8px; }
.weather-time-card {
  justify-self: center;
  height: 70px;
  min-width: 560px;
  display: grid;
  grid-template-columns: 1.4fr 72px 1fr .75fr;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.052);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.location-block strong { display:block; font-size: 25px; }
.location-block span, .weather-data span { color: var(--muted); font-size: 14px; }
.weather-icon { font-size: 45px; text-align: center; filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); }
.weather-data strong { color: var(--orange-2); font-size: 42px; line-height: 1; margin-right: 7px; }
.weather-range { color: #e7e7e7; font-size: 22px; border-left: 1px solid var(--line); padding-left: 18px; }
.clock-block { text-align: right; padding-right: 10px; }
.clock-block strong { display:block; font-size: clamp(42px, 4vw, 66px); line-height: .9; }
.clock-block span { color: #e9e9e9; font-size: clamp(15px, 1.2vw, 22px); margin-top: 8px; display:block; }
.screen-main {
  display: grid;
  grid-template-columns: minmax(420px, 30%) 1fr;
  gap: 18px;
  min-height: 0;
}
.left-column {
  display: grid;
  grid-template-rows: 34% 1fr;
  gap: 18px;
  min-height: 0;
}
.glass-card {
  background: linear-gradient(160deg, rgba(20,23,29,.82), rgba(8,10,13,.72));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
  overflow: hidden;
}
.offers-card { padding: 18px; }
.card-title {
  color: var(--orange-2);
  font-size: clamp(22px, 1.7vw, 32px);
  font-weight: 900;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.offers-list { display: grid; gap: 10px; }
.offer-item {
  display: grid;
  grid-template-columns: 58px 1fr 78px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.047);
  border: 1px solid rgba(255,255,255,.08);
}
.offer-icon { font-size: 34px; width: 48px; height: 48px; display:grid; place-items:center; background:rgba(255,255,255,.08); border-radius: 14px; }
.offer-title { font-size: clamp(16px, 1vw, 21px); font-weight: 800; }
.offer-subtitle { color: var(--muted); margin-top: 3px; font-size: clamp(13px, .85vw, 17px); }
.offer-discount { color: var(--orange-2); font-weight: 950; font-size: clamp(21px, 1.6vw, 34px); text-align: right; line-height: .95; }
.turn-card {
  border-color: rgba(244,122,18,.42);
  box-shadow: var(--shadow), 0 0 30px rgba(244,122,18,.14), inset 0 1px rgba(255,255,255,.08);
  padding: 28px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.turn-label { color: var(--orange-2); text-transform: uppercase; font-weight: 950; font-size: clamp(23px, 1.8vw, 34px); letter-spacing: .8px; }
.turn-number {
  font-size: clamp(88px, 7.2vw, 145px);
  line-height: .9;
  font-weight: 1000;
  letter-spacing: -4px;
  margin: 14px 0 12px;
  text-shadow: 0 10px 20px rgba(0,0,0,.35), 0 0 28px rgba(255,255,255,.12);
}
.desk-name { color: var(--orange-2); font-weight: 900; font-size: clamp(30px, 2.5vw, 52px); }
.turn-glow-line { width: 72%; height: 2px; margin: 24px auto 16px; background: linear-gradient(90deg, transparent, rgba(244,122,18,.85), transparent); }
.mini-title { color: var(--muted); text-transform: uppercase; font-size: clamp(15px, 1vw, 21px); font-weight: 900; margin-bottom: 12px; }
.history-list { display: grid; gap: 10px; }
.history-item {
  display: grid; grid-template-columns: 1fr 1.35fr; align-items:center;
  padding: 11px 15px; border-radius: 999px;
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  font-size: clamp(16px, 1.15vw, 24px);
}
.history-item strong { text-align:left; }
.history-item span { color:#f2f2f2; text-align:left; }
.right-column { min-width: 0; min-height: 0; }
.media-card { height: 100%; display: grid; grid-template-rows: 58px 1fr; }
.media-header {
  background: linear-gradient(90deg, #d7600d, var(--orange), #ff9b2f);
  display: flex; align-items: center; gap: 18px;
  padding: 0 28px;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 8px 24px rgba(244,122,18,.25);
}
.media-header strong { font-size: clamp(20px, 1.7vw, 34px); }
.media-header span { font-size: clamp(14px, 1.1vw, 21px); border-left: 1px solid rgba(255,255,255,.35); padding-left: 18px; opacity: .93; }
.media-stage { position: relative; background:#000; min-height:0; }
.media-stage iframe { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:2; background:#000; }
.media-stage iframe[src=""] { display:none; }
.media-fallback {
  position:absolute; inset:0;
  display:grid; grid-template-columns: 52% 48%; align-items:center;
  padding: 5% 6%;
  background:
    radial-gradient(circle at 85% 35%, rgba(244,122,18,.26), transparent 28%),
    linear-gradient(135deg, #090b0f 0%, #141820 55%, #06070a 100%);
}
.fallback-copy .eyebrow-line { color:#fff; text-transform:uppercase; font-weight:900; font-size: clamp(22px, 2.2vw, 48px); font-style: italic; }
.fallback-copy h1 { margin: 10px 0 24px; font-size: clamp(45px, 4.4vw, 90px); line-height:.92; text-transform:uppercase; }
.fallback-copy h1 strong { color: var(--orange-2); }
.fallback-copy p { max-width: 650px; color:#e3e6ea; font-size: clamp(18px, 1.45vw, 30px); line-height:1.24; }
.product-visual { position:relative; height:70%; }
.cable-ring { position:absolute; width:45%; aspect-ratio:1; border:26px solid #a84d12; border-radius:50%; left:8%; bottom:12%; box-shadow: inset 0 0 0 12px #ec7520, 0 20px 55px rgba(0,0,0,.55); }
.breaker { position:absolute; width:22%; height:34%; background:#eee; border-radius:12px; left:42%; bottom:22%; box-shadow:0 16px 35px rgba(0,0,0,.5); }
.breaker::before { content:""; position:absolute; inset:16% 18%; background:linear-gradient(90deg,var(--orange) 0 35%, #222 35% 42%, var(--orange) 42% 76%, #222 76%); border-radius:6px; }
.light-panel { position:absolute; width:34%; height:42%; right:5%; bottom:18%; background:#111; border:16px solid #222; border-radius:22px; box-shadow:0 0 55px rgba(244,122,18,.22); }
.light-panel::before { content:""; position:absolute; inset:14%; background:radial-gradient(circle, #ffdf92 10%, transparent 13%) 0 0/25% 25%; filter: drop-shadow(0 0 8px #ffb24a); }
.ticker-bar {
  display:grid;
  grid-template-columns: auto 1fr 132px;
  align-items:center;
  border:1px solid rgba(244,122,18,.4);
  border-radius: 16px;
  overflow:hidden;
  background: rgba(8,10,13,.86);
  box-shadow: 0 0 30px rgba(244,122,18,.12), inset 0 1px rgba(255,255,255,.08);
}
.ticker-label {
  height:100%; display:flex; align-items:center; gap:12px;
  padding:0 28px;
  color:var(--orange-2); font-weight:950; font-size: clamp(22px, 1.8vw, 34px);
  background: linear-gradient(90deg, rgba(244,122,18,.34), rgba(244,122,18,.08));
  border-right:1px solid rgba(255,255,255,.14);
}
.ticker-window { overflow:hidden; white-space:nowrap; height:100%; display:flex; align-items:center; }
.ticker-track {
  display:inline-block;
  padding-left:100%;
  animation: ticker 34s linear infinite;
  font-size: clamp(19px, 1.35vw, 28px);
  color:#f7f7f7;
}
.ticker-dot { color: var(--orange-2); margin:0 26px; }
.qr-box { height:100%; display:grid; grid-template-columns: 56px 1fr; align-items:center; gap:8px; padding:8px 14px; border-left:1px solid rgba(255,255,255,.12); }
.qr-box img { width:56px; height:56px; background:#fff; border-radius:8px; padding:4px; }
.qr-box span { font-size:13px; color:#e6e6e6; font-weight:700; line-height:1.05; }
.turn-pop { animation: turnPop .75s ease; }
@keyframes ticker { to { transform: translateX(-100%); } }
@keyframes turnPop { 0%{ transform:scale(.94); filter:brightness(1.5);} 70%{ transform:scale(1.04); } 100%{ transform:scale(1); filter:brightness(1);} }
@media (max-width: 1200px) {
  .weather-time-card { min-width: 430px; grid-template-columns: 1fr 56px 1fr; }
  .weather-range { display:none; }
  .screen-main { grid-template-columns: 32% 1fr; }
}