/* Easy-OnAir Ticker — design system */
:root{
  --bg: #111315;
  --sidebar: #181B1F;
  --panel: #1D2125;
  --surface: #24292E;
  --border: #30363B;
  --primary: #3B82F6;
  --success: #22C55E;
  --warning: #F59E0B;
  --error: #EF4444;
  --text-primary: #E5E7EB;
  --text-secondary: #9CA3AF;
  --radius: 8px;
  --container: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text-primary);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-weight:700;letter-spacing:-0.01em;margin:0 0 16px;}
h1{font-size:2.75rem;line-height:1.15;}
h2{font-size:2rem;line-height:1.2;}
h3{font-size:1.25rem;}
p{color:var(--text-secondary);margin:0 0 16px;}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.container.narrow{max-width:760px;}
.center{text-align:center;}
.center-text{text-align:center;max-width:640px;margin:24px auto 0;}

/* Global pre-launch notice */
.site-notice{
  background:var(--primary);
  color:#fff;
  text-align:center;
  padding:10px 20px;
  font-size:.9rem;
  font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.12);
  position:relative;
  z-index:60;
}
.site-notice strong{font-weight:800;letter-spacing:.04em;}
.site-notice a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
.site-notice a:hover{opacity:.9;}

/* Header */
.site-header{
  background:var(--sidebar);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
}
.nav-inner{
  max-width:var(--container);margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{font-weight:800;font-size:1.15rem;color:var(--text-primary);}
.logo span{color:var(--primary);}
/* Brand lockup: final identity */
.site-header .logo,.site-footer .logo{font-size:0;display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;}
.site-header .logo::before,.site-footer .logo::before{content:"easy-onair";font-size:1.15rem;font-weight:800;color:var(--text-primary);}
.site-header .logo::after,.site-footer .logo::after{content:"Broadcast Graphics. Made Simple.";font-size:.62rem;font-weight:500;letter-spacing:.02em;color:var(--text-secondary);margin-top:3px;}
.main-nav{display:flex;gap:28px;}
.main-nav a{color:var(--text-secondary);font-weight:500;font-size:0.95rem;transition:color .15s;}
.main-nav a:hover{color:var(--text-primary);}
.nav-actions{display:flex;align-items:center;gap:12px;}
.nav-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text-primary);border-radius:var(--radius);padding:6px 10px;font-size:1.1rem;cursor:pointer;}

/* Buttons */
.btn{
  display:inline-block;padding:10px 20px;border-radius:var(--radius);
  font-weight:600;font-size:0.95rem;border:1px solid transparent;cursor:pointer;transition:all .15s;
}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:#2f6fd8;}
.btn-secondary{background:var(--surface);color:var(--text-primary);border:1px solid var(--border);}
.btn-secondary:hover{border-color:var(--primary);}
.btn-lg{padding:14px 28px;font-size:1.05rem;}

/* Hero */
.hero{padding:100px 0 80px;text-align:center;border-bottom:1px solid var(--border);}
.eyebrow{color:var(--primary);font-weight:700;letter-spacing:0.12em;font-size:0.8rem;text-transform:uppercase;margin-bottom:16px;}
.hero h1{max-width:820px;margin:0 auto 24px;}
.hero-sub{max-width:680px;margin:0 auto 32px;font-size:1.05rem;}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:28px;}
.hero-meta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;color:var(--text-secondary);font-size:0.85rem;}
.page-hero{padding:72px 0 48px;border-bottom:1px solid var(--border);}

/* Sections */
.section{padding:80px 0;}
.section-alt{background:var(--panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.section-sub{color:var(--text-secondary);margin-top:-8px;margin-bottom:40px;}

/* Tier cards */
.tier-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px;}
.tier-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:32px;display:flex;flex-direction:column;
}
.tier-card-pro{border-color:var(--primary);}
.tier-badge{
  display:inline-block;background:var(--panel);border:1px solid var(--border);color:var(--text-secondary);
  font-size:0.72rem;font-weight:700;letter-spacing:0.08em;padding:4px 10px;border-radius:999px;margin-bottom:16px;width:fit-content;
}
.tier-badge-pro{color:#fff;background:var(--primary);border-color:var(--primary);}
.tier-res{color:var(--text-primary);font-weight:600;margin-bottom:16px;}
.tier-list{list-style:none;padding:0;margin:0 0 24px;}
.tier-list li{
  padding-left:22px;position:relative;margin-bottom:10px;color:var(--text-secondary);font-size:0.95rem;
}
.tier-list li::before{content:"—";position:absolute;left:0;color:var(--primary);}
.price-placeholder{font-size:1.4rem;color:var(--text-primary);font-weight:700;margin-bottom:20px;}
.price-var{color:var(--primary);}

/* Info card */
.info-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:32px;max-width:820px;margin:0 auto;
}
.fine-print{color:var(--text-secondary);font-size:0.85rem;margin-top:16px;}

/* Workflow strip */
.workflow-strip{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin:32px 0;
}
.workflow-step{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 20px;font-weight:600;font-size:0.9rem;color:var(--text-primary);
}
.workflow-step-end{border-color:var(--primary);color:var(--primary);}
.workflow-arrow{color:var(--text-secondary);}

/* Features */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px;}
.feature-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.feature-item h3{color:var(--text-primary);margin-bottom:8px;}

/* FAQ */
.faq-list{margin-top:24px;}
.faq-item{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 20px;margin-bottom:12px;
}
.faq-item summary{cursor:pointer;font-weight:600;color:var(--text-primary);}
.faq-item p{margin-top:12px;margin-bottom:0;}

/* CTA final */
.cta-final{text-align:center;padding:96px 0;}

/* Footer */
.site-footer{background:var(--sidebar);border-top:1px solid var(--border);padding:56px 0 24px;}
.footer-inner{
  max-width:var(--container);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;
}
.footer-col h4{color:var(--text-primary);font-size:0.85rem;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:16px;}
.footer-col a{display:block;color:var(--text-secondary);margin-bottom:10px;font-size:0.92rem;}
.footer-col a:hover{color:var(--primary);}
.footer-tagline{color:var(--text-secondary);margin-top:12px;font-size:0.9rem;}
.footer-bottom{
  max-width:var(--container);margin:32px auto 0;padding:24px 24px 0;border-top:1px solid var(--border);
  color:var(--text-secondary);font-size:0.85rem;
}

/* Responsive */
@media (max-width: 860px){
  .tier-grid{grid-template-columns:1fr;}
  .feature-grid{grid-template-columns:1fr 1fr;}
  .footer-inner{grid-template-columns:1fr;}
}
@media (max-width: 640px){
  .main-nav{
    position:absolute;top:100%;left:0;right:0;background:var(--sidebar);
    flex-direction:column;padding:16px 24px;border-bottom:1px solid var(--border);
    display:none;
  }
  .main-nav.open{display:flex;}
  .nav-toggle{display:block;}
  h1{font-size:2rem;}
  .feature-grid{grid-template-columns:1fr;}
  .hero{padding:64px 0 48px;}
  .site-notice{padding:9px 14px;font-size:.82rem;line-height:1.45;}
  .site-header .logo::after,.site-footer .logo::after{font-size:.58rem;}
}