:root{
  --navy-950:#0A1533; --navy-900:#0D1B4C; --navy-700:#1F2F6E; --navy-600:#2C3E7C;
  --orange-500:#E8611C; --orange-600:#C94F13;
  --paper:#F6F4EF; --card:#FFFFFF; --ink:#14162A;
  --slate-500:#6B7290; --slate-300:#C7CADA; --hairline:#E4E1D8;
  --green:#2FAE66; --amber:#DB9A2C; --red:#D6473F;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Space Grotesk',system-ui,sans-serif;letter-spacing:-0.01em;margin:0;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;}

.shell{display:flex;min-height:100vh;}
.sidebar{width:264px;flex-shrink:0;background:var(--navy-950);color:#EDEFFB;padding:28px 16px;display:flex;flex-direction:column;gap:26px;}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px;}
.brand-mark{width:32px;height:32px;border-radius:8px;flex-shrink:0;background:linear-gradient(135deg,var(--orange-500),var(--orange-600));display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700;font-size:14px;color:#fff;box-shadow:0 3px 8px rgba(232,97,28,.35);}
.brand-name{font-family:'Space Grotesk';font-weight:600;font-size:14.5px;line-height:1.25;white-space:nowrap;}
.brand-name span{display:block;font-size:10px;color:#8992C4;font-weight:400;margin-top:2px;white-space:nowrap;}
.navgroup-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#5C63A0;padding:0 10px;margin-bottom:2px;}
nav.pages{display:flex;flex-direction:column;gap:2px;}
nav.pages a{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:8px;font-size:13.5px;color:#AEB4DC;text-decoration:none;border-left:2px solid transparent;}
nav.pages a .ic{width:16px;text-align:center;opacity:.8;}
nav.pages a:hover{background:#141E44;color:#fff;}
nav.pages a.active{background:var(--navy-700);color:#fff;border-left-color:var(--orange-500);}
.sidebar-foot{margin-top:auto;padding:12px 10px;border-top:1px solid #1B2555;font-size:12px;}
.main{flex:1;min-width:0;padding:36px 40px 60px;max-width:1180px;}
.topbar{height:64px;margin:-36px -40px 30px;padding:0 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--hairline);}
.topbar-title{font-size:13px;color:var(--slate-500);}
.topbar-title b{color:var(--ink);font-weight:600;}

.lamp{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 9px;border-radius:100px;font-family:'JetBrains Mono';font-size:11.5px;font-weight:500;border:1px solid var(--hairline);background:var(--card);}
.lamp .bulb{width:8px;height:8px;border-radius:50%;position:relative;}
.lamp .bulb::after{content:'';position:absolute;inset:-4px;border-radius:50%;opacity:.35;}
.lamp.ready .bulb{background:var(--green);} .lamp.ready .bulb::after{background:var(--green);animation:pulse 2.4s infinite;}
.lamp.training .bulb{background:var(--amber);} .lamp.training .bulb::after{background:var(--amber);animation:pulse 1.6s infinite;}
@keyframes pulse{0%{transform:scale(1);opacity:.35;}70%{transform:scale(2.2);opacity:0;}100%{opacity:0;}}

.eyebrow{font-family:'JetBrains Mono';font-size:11px;color:var(--orange-600);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;}
.page-sub{color:var(--slate-500);font-size:14px;margin:6px 0 28px;max-width:640px;}
.card{background:var(--card);border:1px solid var(--hairline);border-radius:12px;box-shadow:0 1px 2px rgba(20,22,42,.04),0 6px 16px rgba(20,22,42,.03);}

.btn{cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:11px 20px;border-radius:9px;font-size:13.5px;font-weight:600;border:none;text-decoration:none;}
.btn-primary{background:var(--orange-500);color:#fff;}
.btn-primary:hover{background:var(--orange-600);}
.btn-ghost{background:transparent;border:1px solid var(--hairline);color:var(--ink);}
.btn-dark{background:var(--navy-900);color:#fff;}
.btn[disabled]{opacity:.4;cursor:not-allowed;}

label.field-label{display:block;font-size:12.5px;font-weight:600;color:var(--navy-900);margin-bottom:6px;}
input[type=text],input[type=email],input[type=password],input[type=datetime-local],textarea,select{width:100%;padding:10px 13px;border-radius:8px;border:1px solid var(--slate-300);font-family:inherit;font-size:13.5px;background:#fff;color:var(--ink);}
input:focus,textarea:focus,select:focus{outline:2px solid var(--orange-500);outline-offset:1px;border-color:var(--orange-500);}

/* Login */
.login-wrap{display:flex;min-height:100vh;}
.login-left{flex:1.1;background:var(--navy-950);color:#fff;padding:56px 60px;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.login-left::before{content:'';position:absolute;inset:0;background-image:linear-gradient(#1B245A 1px,transparent 1px),linear-gradient(90deg,#1B245A 1px,transparent 1px);background-size:34px 34px;opacity:.22;mask-image:radial-gradient(circle at 30% 40%,black,transparent 68%);}
.login-left>*{position:relative;z-index:1;}
.login-tagline{font-size:33px;font-family:'Space Grotesk';font-weight:600;line-height:1.22;max-width:430px;margin-top:56px;}
.login-tagline em{font-style:normal;color:var(--orange-500);}
.login-features{margin-top:34px;display:flex;flex-direction:column;gap:14px;max-width:400px;}
.login-features .f{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:#C4C8E8;line-height:1.5;}
.login-foot{margin-top:auto;padding-top:28px;border-top:1px solid #1B2555;font-family:'JetBrains Mono';font-size:11px;color:#5C63A0;}
.login-right{flex:1;display:flex;align-items:center;justify-content:center;padding:60px;background:var(--paper);}
.login-form{width:100%;max-width:360px;}
.login-form .field{margin-bottom:16px;}
.error-box{background:#FBEAE9;border:1px solid #F1C6C3;color:#9A2E27;font-size:13px;padding:10px 14px;border-radius:8px;margin-bottom:16px;}

/* Dashboard */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;}
.stat-card{padding:20px;}
.stat-card .label{font-size:11.5px;color:var(--slate-500);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;}
.stat-card .value{font-family:'Space Grotesk';font-size:26px;font-weight:600;}
.cta-banner{background:var(--navy-950);color:#fff;border-radius:14px;padding:26px 30px;display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;flex-wrap:wrap;gap:16px;}
.cta-banner h3{color:#fff;font-size:18px;}
.cta-banner p{margin:4px 0 0;color:#9AA1D4;font-size:13px;}
.journal-row{display:grid;grid-template-columns:2.2fr 1fr 1fr auto;gap:14px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--hairline);}
.journal-row:last-child{border-bottom:none;}
.journal-title{font-weight:600;font-size:13.5px;}
.journal-meta{font-size:11.5px;color:var(--slate-500);margin-top:2px;}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:100px;font-size:11px;font-weight:600;font-family:'JetBrains Mono';}
.tag.draft{background:#EFEDE6;color:#6B6753;}
.tag.text{background:#E3E8FB;color:var(--navy-700);}
.tag.audio{background:#E2F3E9;color:#1E7A46;}

/* Onboarding */
.upload-zone{border:1.5px dashed var(--slate-300);border-radius:12px;padding:32px;text-align:center;background:#FCFBF8;}
.progress-track{height:8px;border-radius:5px;background:var(--hairline);overflow:hidden;margin:10px 0;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--orange-500),var(--orange-600));}
.goal-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--slate-500);font-family:'JetBrains Mono';}
.consent-box{display:flex;gap:12px;align-items:flex-start;background:#FCFBF8;border:1px solid var(--hairline);border-radius:10px;padding:16px;}

/* Wizard */
.stepper{display:flex;margin-bottom:26px;border:1px solid var(--hairline);border-radius:10px;overflow:hidden;flex-wrap:wrap;}
.stepper .s{flex:1;min-width:110px;padding:11px 14px;font-size:12px;font-weight:600;color:var(--slate-500);background:#fff;border-right:1px solid var(--hairline);display:flex;align-items:center;gap:8px;}
.stepper .s .n{width:18px;height:18px;border-radius:50%;background:var(--hairline);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;}
.stepper .s.active{background:var(--navy-900);color:#fff;} .stepper .s.active .n{background:var(--orange-500);}
.stepper .s.complete .n{background:var(--green);} .stepper .s.complete{color:var(--navy-900);}
.sujet-card{padding:16px 18px;margin-bottom:12px;display:flex;gap:14px;}
.drag-handle{padding-top:14px;cursor:grab;}
.grip{display:grid;grid-template-columns:repeat(2,3px);grid-template-rows:repeat(3,3px);gap:3px;width:9px;height:15px;}
.grip span{width:3px;height:3px;border-radius:50%;background:var(--slate-300);}
.ghost-card{border:1.5px dashed var(--slate-300);border-radius:12px;padding:16px 18px;text-align:center;color:var(--slate-500);font-size:13px;font-weight:600;cursor:pointer;background:transparent;width:100%;}
.ghost-card:hover{border-color:var(--orange-500);color:var(--orange-600);}
.wizard-layout{display:grid;grid-template-columns:1fr 300px;gap:24px;}
.side-panel{padding:20px;height:fit-content;}
.tone-pills{display:flex;flex-wrap:wrap;gap:6px;}
.pill{padding:6px 12px;border-radius:100px;border:1px solid var(--slate-300);font-size:12px;cursor:pointer;background:#fff;}
.pill.selected{background:var(--navy-900);color:#fff;border-color:var(--navy-900);}
.remove-sujet{color:var(--red);cursor:pointer;font-size:11px;font-weight:600;background:none;border:none;}

/* Génération / validation / audio */
.loading-box{text-align:center;padding:50px 20px;}
.spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--hairline);border-top-color:var(--orange-500);margin:0 auto 18px;animation:spin 0.9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.player-card{padding:26px;background:var(--navy-950);color:#fff;border-radius:14px;}
.export-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px;}
.export-tile{padding:18px;text-align:left;text-decoration:none;color:var(--ink);display:block;}
.export-tile .t{font-size:13px;font-weight:600;}
.export-tile .d{font-size:11.5px;color:var(--slate-500);margin-top:2px;}

/* Library */
.filter-bar{display:flex;gap:10px;margin-bottom:20px;}
.lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.lib-card{padding:18px;text-decoration:none;color:var(--ink);display:block;}
.lib-card .date{font-family:'JetBrains Mono';font-size:11px;color:var(--slate-500);margin-bottom:8px;}
.lib-card .t{font-weight:600;font-size:14px;margin-bottom:10px;}

@media(max-width:1000px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .wizard-layout{grid-template-columns:1fr;}
  .export-grid{grid-template-columns:repeat(2,1fr);}
  .lib-grid{grid-template-columns:1fr;}
  .login-wrap{flex-direction:column;}
  .jingle-grid{grid-template-columns:1fr;}
  .jingle-type-grid{grid-template-columns:repeat(2,1fr);}
}

/* ===== JINGLES RADIO ===== */

/* Grille liste */
.jingle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:4px;}

/* Carte jingle */
.jingle-card{padding:20px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .18s ease,transform .18s ease;}
.jingle-card:hover{box-shadow:0 4px 24px rgba(20,22,42,.09);transform:translateY(-2px);}
.jingle-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.jingle-card-name{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:15px;line-height:1.3;}
.jingle-card-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--slate-500);font-family:'JetBrains Mono',monospace;}
.jingle-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;padding-top:12px;border-top:1px solid var(--hairline);}
.jingle-texte-preview{font-size:12.5px;color:var(--slate-500);line-height:1.6;background:var(--paper);border-radius:8px;padding:10px 12px;border:1px solid var(--hairline);}

/* Badge type jingle */
.jingle-type-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:600;font-family:'JetBrains Mono',monospace;border:1px solid var(--slate-300);background:#F0EFEE;color:var(--slate-500);}

/* Grille sélection de type (formulaire création) */
.jingle-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px;}
.type-card{border:1.5px solid var(--hairline);border-radius:12px;padding:14px 12px;cursor:pointer;text-align:center;transition:border-color .15s,background .15s;background:#fff;}
.type-card:hover{border-color:var(--orange-500);background:#FFF8F4;}
.type-card.selected{border-color:var(--navy-900);background:var(--navy-900);}
.type-card-ic{font-size:22px;margin-bottom:6px;}
.type-card-label{font-weight:700;font-size:12.5px;margin-bottom:3px;color:var(--ink);}
.type-card.selected .type-card-label,.type-card.selected .type-card-desc{color:#fff;}
.type-card-desc{font-size:11px;color:var(--slate-500);line-height:1.4;}

/* ===== LANDING PAGE STYLES (PRO & PREMIUM - LIGHT GLASSMORPHIC) ===== */
.landing-page { scroll-behavior: smooth; }
.landing-body { 
  background: var(--paper); 
  color: var(--ink); 
  font-family: 'Inter', system-ui, sans-serif; 
  overflow-x: hidden; 
}

.landing-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.text-center { text-align: center; }

/* Sticky Header Glassmorphic Light */
.landing-header { 
  position: sticky; 
  top: 0; 
  z-index: 1000; 
  background: rgba(246, 244, 239, 0.82); 
  backdrop-filter: blur(16px) saturate(180%); 
  -webkit-backdrop-filter: blur(16px) saturate(180%); 
  border-bottom: 1px solid rgba(228, 225, 216, 0.8); 
  padding: 14px 0; 
  box-shadow: 0 4px 20px rgba(10, 21, 51, 0.03);
}
.nav-container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.brand-landing { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark-lg { 
  width: 38px; 
  height: 38px; 
  border-radius: 10px; 
  background: linear-gradient(135deg, var(--orange-500), #FF7733); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-family: 'Space Grotesk', sans-serif; 
  font-weight: 700; 
  font-size: 17px; 
  color: #fff; 
  box-shadow: 0 4px 14px rgba(232, 97, 28, 0.35); 
}
.brand-text { display: flex; flex-direction: column; }
.brand-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; color: var(--navy-950); letter-spacing: -0.01em; }
.brand-sub { font-size: 10px; color: var(--slate-500); font-weight: 600; letter-spacing: 0.04em; }

.landing-nav-links { display: flex; align-items: center; gap: 28px; }
.landing-nav-links a { color: var(--navy-700); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: color .2s; }
.landing-nav-links a:hover { color: var(--orange-500); }

.landing-nav-actions { display: flex; align-items: center; gap: 12px; }
.btn-ghost-light { 
  background: rgba(255, 255, 255, 0.7); 
  border: 1px solid var(--hairline); 
  color: var(--navy-950); 
  backdrop-filter: blur(8px);
  transition: all .2s;
}
.btn-ghost-light:hover { 
  background: #ffffff; 
  border-color: var(--slate-300);
  color: var(--orange-500); 
  box-shadow: 0 4px 12px rgba(10, 21, 51, 0.06);
}
.btn-glow { 
  box-shadow: 0 4px 18px rgba(232, 97, 28, 0.35); 
  transition: transform .2s, box-shadow .2s; 
}
.btn-glow:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 6px 24px rgba(232, 97, 28, 0.5); 
}

/* Hero Section */
.hero-section { 
  position: relative; 
  padding: 80px 0 90px; 
  overflow: hidden; 
  background: 
    radial-gradient(circle at 15% 20%, rgba(232, 97, 28, 0.09) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(31, 47, 110, 0.08) 0%, transparent 45%),
    linear-gradient(180deg, #F8F6F0 0%, #F1EEE6 100%); 
}
.hero-bg-glow { 
  position: absolute; 
  top: -5%; 
  left: 50%; 
  transform: translateX(-50%); 
  width: 900px; 
  height: 500px; 
  background: radial-gradient(circle, rgba(232, 97, 28, 0.12) 0%, rgba(31, 47, 110, 0.04) 60%, transparent 80%); 
  pointer-events: none; 
  filter: blur(60px); 
}
.hero-grid-pattern { 
  position: absolute; 
  inset: 0; 
  background-image: linear-gradient(rgba(10, 21, 51, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 21, 51, 0.03) 1px, transparent 1px); 
  background-size: 44px 44px; 
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%); 
  pointer-events: none; 
}

.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center; }

.hero-badge { 
  display: inline-flex; 
  align-items: center; 
  gap: 9px; 
  padding: 6px 16px; 
  border-radius: 100px; 
  background: rgba(255, 255, 255, 0.85); 
  border: 1px solid rgba(232, 97, 28, 0.3); 
  box-shadow: 0 4px 14px rgba(232, 97, 28, 0.1);
  margin-bottom: 24px; 
  backdrop-filter: blur(10px);
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange-500); box-shadow: 0 0 8px var(--orange-500); animation: pulseDot 1.8s infinite; }
@keyframes pulseDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.4; } }
.badge-text { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--orange-600); text-transform: uppercase; letter-spacing: 0.05em; }

.hero-title { font-family: 'Space Grotesk', sans-serif; font-size: 48px; font-weight: 700; line-height: 1.12; color: var(--navy-950); letter-spacing: -0.02em; margin-bottom: 20px; }
.hero-title span { background: linear-gradient(135deg, var(--orange-500) 0%, var(--orange-600) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.hero-description { font-size: 16.5px; line-height: 1.65; color: #4A5274; margin-bottom: 34px; max-width: 540px; }
.hero-cta-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.btn-lg { padding: 14px 28px; font-size: 15px; border-radius: 11px; }
.btn-dark-glass { 
  background: rgba(255, 255, 255, 0.85); 
  border: 1px solid var(--hairline); 
  color: var(--navy-950); 
  text-decoration: none; 
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(10, 21, 51, 0.05);
  transition: all .2s;
}
.btn-dark-glass:hover { 
  background: #ffffff; 
  border-color: var(--slate-300);
  box-shadow: 0 6px 20px rgba(10, 21, 51, 0.09);
  transform: translateY(-2px);
  color: var(--navy-950); 
}

.hero-trust-proof { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.avatars-stack { display: flex; align-items: center; }
.av-item { width: 32px; height: 32px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--paper); margin-left: -8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.av-item:first-child { margin-left: 0; }
.trust-text { font-size: 13px; color: var(--slate-500); margin: 0; }
.trust-text strong { color: var(--navy-950); }

/* Hero Visual / Sleek Glassmorphic Broadcast Card */
.studio-card-wrapper { 
  background: rgba(10, 21, 51, 0.94); 
  border: 1px solid rgba(255, 255, 255, 0.18); 
  border-radius: 22px; 
  padding: 26px; 
  backdrop-filter: blur(20px); 
  box-shadow: 0 24px 60px rgba(10, 21, 51, 0.22), 0 0 35px rgba(232, 97, 28, 0.15); 
}
.studio-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.studio-card-title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; color: #fff; }
.live-indicator { background: rgba(47, 174, 102, 0.25); border: 1px solid rgba(47, 174, 102, 0.5); color: #4ADE80; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; padding: 2px 8px; border-radius: 4px; font-weight: 700; }
.voice-badge { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #A0A7D0; background: rgba(255, 255, 255, 0.08); padding: 4px 10px; border-radius: 100px; }

.script-preview-box { background: rgba(7, 13, 30, 0.7); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.script-tag { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #FF8533; margin-bottom: 6px; text-transform: uppercase; }
.script-text { font-size: 12.5px; line-height: 1.55; color: #D5DAED; margin: 0; font-style: italic; }

.waveform-player-box { display: flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.play-demo-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--orange-500); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: transform .15s, background .15s; }
.play-demo-btn:hover { background: var(--orange-600); transform: scale(1.06); }
.play-demo-btn.playing { background: #10B981; }

.waveform-bars-container { display: flex; align-items: center; gap: 3.5px; height: 36px; flex: 1; overflow: hidden; }
.waveform-bars-container .bar { flex: 1; width: 3px; background: rgba(255, 255, 255, 0.35); border-radius: 2px; transition: height .15s ease, background .15s ease; }
.play-demo-btn.playing + .waveform-bars-container .bar { background: var(--orange-500); }

.time-display { font-size: 11px; color: #9AA2CE; }

.audio-meta-row { display: flex; gap: 8px; flex-wrap: wrap; }
.meta-pill { font-size: 10.5px; padding: 3px 9px; border-radius: 100px; background: rgba(255, 255, 255, 0.07); color: #B0B7DE; display: inline-flex; align-items: center; gap: 5px; }
.meta-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.meta-pill .dot.green { background: #2FAE66; }
.meta-pill.orange { color: #FFA366; background: rgba(232, 97, 28, 0.18); }

.studio-card-footer { padding-top: 12px; margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 11.5px; color: #A0A7D0; }
.status-icon { color: #2FAE66; font-weight: 700; margin-right: 4px; }

/* Metrics Bar Glassmorphic */
.metrics-section { 
  background: rgba(255, 255, 255, 0.65); 
  backdrop-filter: blur(16px); 
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--hairline); 
  border-bottom: 1px solid var(--hairline); 
  padding: 38px 0; 
}
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.metric-card { padding: 10px; }
.metric-value { font-family: 'Space Grotesk', sans-serif; font-size: 38px; font-weight: 700; color: var(--navy-950); margin-bottom: 4px; }
.metric-label { font-size: 13.5px; color: var(--slate-500); font-weight: 500; }

/* Features Section (Glassmorphic Light Cards) */
.features-section { padding: 90px 0; position: relative; }
.section-header { margin-bottom: 54px; max-width: 680px; margin-left: auto; margin-right: auto; }
.section-title { font-family: 'Space Grotesk', sans-serif; font-size: 36px; font-weight: 700; color: var(--navy-950); margin-top: 10px; margin-bottom: 14px; letter-spacing: -0.01em; }
.section-sub { font-size: 15.5px; color: var(--slate-500); line-height: 1.6; margin: 0; }

.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card { 
  background: rgba(255, 255, 255, 0.75); 
  backdrop-filter: blur(18px) saturate(180%); 
  -webkit-backdrop-filter: blur(18px) saturate(180%); 
  border: 1px solid rgba(255, 255, 255, 0.9); 
  border-radius: 18px; 
  padding: 30px; 
  box-shadow: 0 10px 30px -5px rgba(10, 21, 51, 0.05), 0 2px 6px -1px rgba(10, 21, 51, 0.03); 
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease; 
}
.feature-card:hover { 
  transform: translateY(-5px); 
  background: rgba(255, 255, 255, 0.95); 
  border-color: rgba(232, 97, 28, 0.4); 
  box-shadow: 0 18px 40px -8px rgba(232, 97, 28, 0.14), 0 4px 12px rgba(10, 21, 51, 0.04); 
}

.feature-icon-box { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.feature-icon-box.orange { background: rgba(232, 97, 28, 0.12); color: var(--orange-600); }
.feature-icon-box.blue { background: rgba(31, 47, 110, 0.1); color: var(--navy-700); }
.feature-icon-box.green { background: rgba(47, 174, 102, 0.12); color: #1E7A46; }
.feature-icon-box.purple { background: rgba(147, 51, 234, 0.12); color: #8B5CF6; }
.feature-icon-box.amber { background: rgba(219, 154, 44, 0.12); color: #D97706; }
.feature-icon-box.red { background: rgba(214, 71, 63, 0.12); color: #DC2626; }

.feature-card h3 { font-size: 18.5px; font-weight: 600; color: var(--navy-950); margin-bottom: 10px; }
.feature-card p { font-size: 14px; color: var(--slate-500); line-height: 1.6; margin: 0; }

/* Workflow Section */
.workflow-section { 
  padding: 90px 0; 
  background: linear-gradient(180deg, rgba(238, 235, 226, 0.5) 0%, rgba(246, 244, 239, 0.8) 100%); 
  border-top: 1px solid var(--hairline); 
  border-bottom: 1px solid var(--hairline); 
}
.workflow-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 50px; }
.step-card { 
  background: rgba(255, 255, 255, 0.82); 
  backdrop-filter: blur(14px); 
  -webkit-backdrop-filter: blur(14px); 
  border: 1px solid rgba(255, 255, 255, 0.95); 
  border-radius: 18px; 
  padding: 26px; 
  box-shadow: 0 8px 24px rgba(10, 21, 51, 0.04); 
  position: relative; 
  transition: transform .2s, box-shadow .2s;
}
.step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(10, 21, 51, 0.07);
}
.step-number { font-family: 'Space Grotesk', sans-serif; font-size: 30px; font-weight: 700; color: var(--orange-500); margin-bottom: 12px; }
.step-card h4 { font-size: 16.5px; color: var(--navy-950); margin-bottom: 8px; }
.step-card p { font-size: 13.5px; color: var(--slate-500); line-height: 1.55; margin: 0; }

/* Demo Section */
.demo-section { padding: 90px 0; }
.demo-box-wrapper { 
  display: grid; 
  grid-template-columns: 1.1fr 1fr; 
  gap: 40px; 
  align-items: center; 
  background: rgba(255, 255, 255, 0.8); 
  backdrop-filter: blur(20px); 
  -webkit-backdrop-filter: blur(20px); 
  border: 1px solid rgba(255, 255, 255, 0.95); 
  border-radius: 24px; 
  padding: 46px; 
  box-shadow: 0 20px 50px rgba(10, 21, 51, 0.06); 
}
.demo-info h2 { font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 700; color: var(--navy-950); margin: 10px 0 16px; line-height: 1.25; }
.demo-info p { font-size: 15px; color: var(--slate-500); line-height: 1.6; margin-bottom: 22px; }
.demo-bullets { list-style: none; padding: 0; margin: 0 0 30px 0; }
.demo-bullets li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--navy-900); margin-bottom: 10px; font-weight: 500; }
.check-ic { color: #2FAE66; font-weight: 700; }

.audio-card-demo { 
  background: var(--navy-950); 
  border: 1px solid rgba(255, 255, 255, 0.15); 
  border-radius: 18px; 
  padding: 24px; 
  color: #fff; 
  box-shadow: 0 16px 40px rgba(10, 21, 51, 0.2); 
}
.card-badge { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #FF8533; letter-spacing: 0.06em; font-weight: 600; }
.demo-audio-control { display: flex; align-items: center; gap: 16px; margin: 20px 0; background: rgba(255, 255, 255, 0.06); padding: 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); }
.btn-play-big { width: 50px; height: 50px; border-radius: 50%; background: var(--orange-500); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .15s; }
.btn-play-big:hover { transform: scale(1.08); background: var(--orange-600); }
.demo-progress-wrap { flex: 1; }
.demo-wave-visual { display: flex; align-items: center; gap: 4px; height: 28px; margin-bottom: 6px; }
.w-bar { flex: 1; height: 40%; background: rgba(255, 255, 255, 0.3); border-radius: 2px; transition: height .15s; }

.quote-box { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 12.5px; font-style: italic; color: #A0A7D0; line-height: 1.5; }
.quote-author { font-style: normal; font-size: 11px; color: #FF8533; margin-top: 6px; font-weight: 600; }

/* Summit Section */
.summit-section { padding: 60px 0; }
.summit-card { 
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 100%); 
  border: 1px solid rgba(232, 97, 28, 0.35); 
  border-radius: 22px; 
  padding: 44px; 
  color: #fff; 
  box-shadow: 0 20px 50px rgba(10, 21, 51, 0.18); 
  position: relative; 
  overflow: hidden; 
}
.summit-card::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(232, 97, 28, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.summit-content { position: relative; z-index: 1; }
.summit-content h2 { font-family: 'Space Grotesk', sans-serif; font-size: 28px; color: #FFF; margin: 8px 0 14px; }
.summit-content p { font-size: 15px; color: #B5BDDF; line-height: 1.65; max-width: 820px; margin-bottom: 22px; }
.summit-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.s-pill { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; background: rgba(255, 255, 255, 0.1); color: #FFF; padding: 6px 14px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.15); }

/* FAQ Section (Glassmorphic Light) */
.faq-section { padding: 90px 0; }
.faq-list { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; }
.faq-item { 
  background: rgba(255, 255, 255, 0.78); 
  backdrop-filter: blur(16px); 
  -webkit-backdrop-filter: blur(16px); 
  border: 1px solid rgba(255, 255, 255, 0.95); 
  border-radius: 14px; 
  padding: 20px 24px; 
  cursor: pointer; 
  box-shadow: 0 4px 16px rgba(10, 21, 51, 0.03); 
  transition: background .2s, box-shadow .2s; 
}
.faq-item:hover { 
  background: rgba(255, 255, 255, 0.95); 
  box-shadow: 0 6px 22px rgba(10, 21, 51, 0.06); 
}
.faq-item summary { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16.5px; color: var(--navy-950); outline: none; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 22px; color: var(--orange-500); font-weight: 400; }
.faq-item[open] summary::after { content: '−'; }
.faq-ans { margin-top: 12px; font-size: 14.5px; color: var(--slate-500); line-height: 1.6; padding-top: 12px; border-top: 1px solid var(--hairline); }

/* Final CTA Section */
.cta-section { padding: 80px 0 100px; }
.cta-card { 
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 100%); 
  border: 1px solid rgba(232, 97, 28, 0.4); 
  border-radius: 24px; 
  padding: 56px 40px; 
  text-align: center; 
  box-shadow: 0 20px 50px rgba(10, 21, 51, 0.2); 
  color: #fff; 
}
.cta-content h2 { font-family: 'Space Grotesk', sans-serif; font-size: 34px; color: #FFF; margin-bottom: 12px; }
.cta-content p { font-size: 15.5px; color: #B0B8E0; max-width: 580px; margin: 0 auto 32px; }
.cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* Footer */
.landing-footer { background: var(--navy-950); border-top: 1px solid #1B2555; padding-top: 60px; font-size: 13.5px; color: #8992C4; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; }
.brand-col .footer-desc { margin-top: 16px; line-height: 1.6; color: #8992C4; max-width: 320px; }
.footer-col h5 { font-family: 'Space Grotesk', sans-serif; color: #FFF; font-size: 14px; margin: 0 0 16px; font-weight: 600; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { color: #AEB4DC; text-decoration: none; transition: color .2s; }
.footer-col ul li a:hover { color: #FFF; }
.footer-bottom { border-top: 1px solid #1B2555; padding: 22px 0; font-size: 12px; }
.bottom-inner p { margin: 0; text-align: center; color: #6F79AB; }
.bottom-inner p strong { color: #AEB4DC; }

/* Responsive Landing Page */
@media (max-width: 992px) {
  .hero-inner, .demo-box-wrapper { grid-template-columns: 1fr; gap: 40px; }
  .hero-title { font-size: 38px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .workflow-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
  .landing-nav-links { display: none; }
}

@media (max-width: 600px) {
  .hero-title { font-size: 30px; }
  .features-grid, .workflow-steps-grid, .metrics-grid, .footer-inner { grid-template-columns: 1fr; }
  .cta-card { padding: 36px 20px; }
  .hero-section { padding: 50px 0 60px; }
}