/*==========================================================
FTN PLATFORM
Branding System
Version 1.0
==========================================================*/


/*==========================================================
GLOBAL
==========================================================*/

body{

background:
radial-gradient(circle at top right,
rgba(215,25,32,.12),
transparent 35%),

linear-gradient(
180deg,
#050505 0%,
#0B0B0B 100%);

color:var(--text-primary);

font-family:var(--font-body);

}


/*==========================================================
HEADER
==========================================================*/

.broadcast-header{

position:sticky;

top:0;

z-index:var(--z-header);

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

padding:18px 40px;

background:rgba(8,8,8,.90);

backdrop-filter:blur(18px);

border-bottom:1px solid var(--border-medium);

box-shadow:var(--shadow-sm);

}


.broadcast-header__brand{

display:flex;

align-items:center;

gap:20px;

}


.broadcast-title{

margin:0;

font-size:2rem;

font-weight:800;

color:white;

letter-spacing:-.03em;

}


.broadcast-subtitle{

margin-top:4px;

font-size:.9rem;

color:var(--text-secondary);

}


.broadcast-nav{

display:flex;

align-items:center;

gap:28px;

}


.broadcast-nav a{

text-decoration:none;

color:var(--text-secondary);

font-weight:600;

transition:var(--transition-fast);

}


.broadcast-nav a:hover{

color:white;

}


.broadcast-status{

display:flex;

align-items:center;

gap:10px;

font-size:.8rem;

font-weight:700;

color:white;

}


.live-dot{

width:10px;

height:10px;

border-radius:999px;

background:#27AE60;

box-shadow:
0 0 12px
rgba(39,174,96,.65);

}


/*==========================================================
LOGO
==========================================================*/

.logo{

width:62px;

height:62px;

display:flex;

align-items:center;

justify-content:center;

border-radius:14px;

background:

linear-gradient(
180deg,
#D71920,
#9B1117);

color:white;

font-size:1.6rem;

font-weight:900;

letter-spacing:-.05em;

box-shadow:

var(--shadow-red);

}


/*==========================================================
HERO
==========================================================*/

.executive-hero{

display:grid;

grid-template-columns:

2fr
1fr;

gap:40px;

align-items:center;

padding:70px;

margin-top:25px;

background:

linear-gradient(
180deg,
rgba(255,255,255,.02),
rgba(255,255,255,.01));

border:

1px solid
var(--border-medium);

border-radius:

var(--radius-xl);

}


.hero__meta{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-bottom:24px;

}


.hero__meta span{

padding:

6px
14px;

background:

rgba(215,25,32,.12);

border:

1px solid
rgba(215,25,32,.35);

border-radius:

999px;

font-size:.8rem;

font-weight:700;

}


.hero h2{

margin:0;

font-size:3.3rem;

line-height:1.05;

font-weight:800;

letter-spacing:-.04em;

}


.hero-actions{

display:flex;

gap:16px;

margin-top:34px;

flex-wrap:wrap;

}


/*==========================================================
BRIEFING
==========================================================*/

.hero__briefing{

display:flex;

flex-direction:column;

gap:20px;

}


.briefing-card{

padding:22px;

background:var(--surface-2);

border-radius:var(--radius-lg);

border:1px solid var(--border-light);

box-shadow:var(--shadow-md);

}


.briefing-card strong{

display:block;

margin-top:10px;

font-size:1.35rem;

}


.briefing-card p{

margin-top:12px;

}


.briefing-label{

font-size:.75rem;

font-weight:700;

color:var(--text-muted);

text-transform:uppercase;

letter-spacing:.08em;

}


.briefing-grid{

display:grid;

grid-template-columns:

1fr
1fr;

gap:16px;

}


/*==========================================================
SECTION HEADINGS
==========================================================*/

.section-heading{

margin-bottom:30px;

}


.section-heading h2{

margin:0;

font-size:2.1rem;

font-weight:800;

letter-spacing:-.03em;

}


.section-heading p{

margin-top:10px;

max-width:720px;

}


/*==========================================================
FOOTER
==========================================================*/

.platform-footer{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:40px;

margin-top:70px;

padding:40px;

border-top:

1px solid
var(--border-medium);

background:

rgba(255,255,255,.02);

}


.platform-footer strong{

display:block;

margin-bottom:8px;

font-size:1.15rem;

}


.platform-footer span{

display:block;

color:var(--text-muted);

margin-top:4px;

}


/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:1100px){

.executive-hero{

grid-template-columns:1fr;

}

.broadcast-header{

flex-direction:column;

align-items:flex-start;

}

.broadcast-nav{

flex-wrap:wrap;

}

}


@media(max-width:768px){

.broadcast-header{

padding:20px;

}

.executive-hero{

padding:28px;

}

.hero h2{

font-size:2.3rem;

}

.platform-footer{

flex-direction:column;

}

.briefing-grid{

grid-template-columns:1fr;

}

}