:root {
    --tv-bg: #0a0a0c;
    --tv-surface: #1c1c21;
    --tv-focus: #f39c12;
    --tv-text: #ffffff;
    --tv-text-muted: #8e8e93;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--tv-bg); color: var(--tv-text);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    overflow-x: hidden;
}

/* 10-foot UI Top Bar */
.tv-header {
    padding: 40px 60px; display: flex; justify-content: space-between; align-items: center;
}
.tv-brand { font-size: 32px; font-weight: bold; letter-spacing: 2px;}
.tv-nav { display: flex; gap: 40px; }
.tv-nav a {
    color: var(--tv-text-muted); text-decoration: none; font-size: 24px; padding: 10px 20px;
    border-radius: 8px; transition: all 0.2s; border: 2px solid transparent;
}
.tv-nav a:focus, .tv-nav a:hover, .tv-nav a.active {
    color: var(--tv-text); border-color: var(--tv-focus); background: rgba(243,156,18,0.1); outline: none;
}

/* TV Main Content */
.tv-main { padding: 0 60px 60px 60px; }

/* Large Showcase */
.tv-hero {
    background: var(--tv-surface); border-radius: 20px; padding: 60px;
    display: flex; flex-direction: column; justify-content: flex-end;
    height: 500px; position: relative; overflow: hidden; margin-bottom: 40px;
    border: 3px solid transparent; transition: border-color 0.2s;
}
.tv-hero:focus-within, .tv-hero:hover { border-color: var(--tv-focus); }
.tv-hero::before {
    content: ''; position: absolute; top:0; left:0; right:0; bottom:0;
    background: linear-gradient(to top, #0a0a0c 10%, transparent 80%), url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="%231c1c21"/><circle cx="50" cy="50" r="2" fill="%23333"/></svg>') repeat;
    z-index: 0; opacity: 0.5;
}
.hero-content { position: relative; z-index: 1; max-width: 800px;}
.hero-content h1 { font-size: 64px; margin-bottom: 20px; line-height: 1.1;}
.hero-content p { font-size: 24px; color: var(--tv-text-muted); margin-bottom: 40px;}

.tv-btn {
    display: inline-block; padding: 20px 50px; font-size: 28px; font-weight: bold;
    color: var(--tv-bg); background: var(--tv-text); border-radius: 12px;
    text-decoration: none; border: 3px solid transparent; transition: all 0.2s;
}
.tv-btn:focus, .tv-btn:hover { background: var(--tv-focus); outline: none; transform: scale(1.05); }

/* Horizontal Tile Scroller */
.tv-row-title { font-size: 28px; margin-bottom: 20px; font-weight: 500;}
.tv-row { display: flex; gap: 30px; overflow-x: auto; padding-bottom: 20px; scroll-snap-type: x mandatory;}
.tv-row::-webkit-scrollbar { display: none; }

.tv-tile {
    flex: 0 0 400px; background: var(--tv-surface); border-radius: 16px; padding: 30px;
    border: 3px solid transparent; transition: all 0.2s; scroll-snap-align: start; cursor: pointer; outline: none;
}
.tv-tile:focus, .tv-tile:hover { border-color: var(--tv-focus); transform: translateY(-10px); }
.tv-tile h3 { font-size: 24px; margin-bottom: 15px;}
.tv-tile p { font-size: 18px; color: var(--tv-text-muted); line-height: 1.5;}

.tv-tile.data-tile { text-align: center; padding: 50px 30px;}
.tv-tile.data-tile h3 { font-size: 48px; color: var(--tv-focus); margin-bottom: 10px;}

/* FAQ Accordion for TV */
.tv-faq-item { background: var(--tv-surface); border-radius: 12px; margin-bottom: 15px; border: 3px solid transparent;}
.tv-faq-item:focus-within { border-color: var(--tv-focus); }
.faq-q { padding: 25px 30px; font-size: 24px; cursor: pointer; outline: none; display:block; width:100%; text-align:left; background:transparent; border:none; color:#fff;}
.faq-a { padding: 0 30px; font-size: 20px; color: var(--tv-text-muted); max-height: 0; overflow: hidden; transition: max-height 0.3s; line-height: 1.6;}
.tv-faq-item.active .faq-a { padding-bottom: 25px; max-height: 500px; }

@media (max-width: 1000px) {
    .tv-header { padding: 20px; flex-direction: column; gap: 20px; }
    .tv-main { padding: 20px; }
    .tv-hero { height: auto; padding: 30px;}
    .hero-content h1 { font-size: 40px;}
    .hero-content p { font-size: 18px;}
    .tv-tile { flex: 0 0 300px; padding: 20px;}
}