/* ══════════════════════════════════════════════════════
   A3i Accel – Modern Tech Brand  (Electric Violet)
   ══════════════════════════════════════════════════════ */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #f8fafc;
  --bg-alt:    #f1f5f9;
  --bg-white:  #ffffff;
  --bg-navy:   #0e0720;

  --primary:   #7c3aed;
  --primary-dk:#5b21b6;
  --primary-lt:#f5f3ff;

  --gradient-brand: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
  --gradient-glow:  0 4px 22px rgba(124,58,237,.38);

  --text:      #0f172a;
  --text-md:   #334155;
  --text-muted:#64748b;

  --border:    #e2e8f0;
  --border-md: #cbd5e1;

  --shadow-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.05);
  --shadow-md: 0 4px 16px rgba(15,23,42,.1), 0 2px 6px rgba(15,23,42,.06);
  --shadow-lg: 0 12px 40px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.07);

  --radius:    10px;
  --radius-sm: 6px;
  --nav-h:     62px;
  --transition:.25s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.container { max-width: 1260px; margin: 0 auto; padding: 0 2.5rem; }

/* ── Typography ── */
h1 { font-size: clamp(2.2rem,4.5vw,3.6rem); font-weight:800; line-height:1.12; color:var(--text); }
h2 { font-size: clamp(1.6rem,2.8vw,2.4rem); font-weight:700; line-height:1.2;  color:var(--text); margin-bottom:.6rem; }
h3 { font-size: 1.1rem;  font-weight:700;  color:var(--text); margin-bottom:.35rem; }
h4 { font-size: .95rem;  font-weight:700;  color:var(--text); margin-bottom:.25rem; }
h5 { font-size: .75rem;  font-weight:700;  letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:.7rem; }
p  { color: var(--text-muted); }

.gradient-text {
  background: linear-gradient(135deg, #7c3aed 0%, #818cf8 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.accent { color: var(--primary); }

/* ── Buttons ── */
.btn-primary {
  display:inline-flex; align-items:center; gap:.45rem;
  background: var(--gradient-brand); color:#fff;
  padding:.62rem 1.5rem; border-radius:var(--radius-sm);
  font-weight:600; font-size:.9rem; border:none; cursor:pointer;
  transition:var(--transition); white-space:nowrap; text-decoration:none;
  background-size: 200% auto;
}
.btn-primary:hover { background-position: right center; box-shadow: var(--gradient-glow); transform:translateY(-1px); }
.btn-primary.btn-lg   { padding:.78rem 1.8rem; font-size:.95rem; }
.btn-primary.btn-full { width:100%; justify-content:center; }

.btn-ghost {
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--bg-white); color:var(--text-md);
  padding:.62rem 1.5rem; border-radius:var(--radius-sm);
  font-weight:600; font-size:.9rem; border:1px solid var(--border-md);
  cursor:pointer; transition:var(--transition); text-decoration:none;
}
.btn-ghost:hover { background:var(--bg-alt); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn-ghost.btn-lg { padding:.78rem 1.8rem; font-size:.95rem; }

.btn-outline {
  display:inline-flex; align-items:center; gap:.4rem;
  background:transparent; color:var(--primary);
  padding:.58rem 1.3rem; border-radius:var(--radius-sm);
  font-weight:600; font-size:.88rem; border:1.5px solid var(--primary);
  cursor:pointer; transition:var(--transition); text-decoration:none; margin-top:1.4rem;
}
.btn-outline:hover { background:var(--primary-lt); transform:translateY(-1px); }

/* ── Live badge ── */
.live-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.74rem; font-weight:600; color:#a5f3c6;
  background:rgba(165,243,198,.1); border:1px solid rgba(165,243,198,.25);
  padding:.26rem .8rem; border-radius:50px;
  font-variant-numeric:tabular-nums;
}
.pulse-dot {
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#10b981; box-shadow:0 0 0 0 rgba(16,185,129,.5);
  animation:pulse 1.8s infinite;
}
@keyframes pulse {
  0%  { box-shadow:0 0 0 0 rgba(16,185,129,.4); }
  70% { box-shadow:0 0 0 7px rgba(16,185,129,0); }
  100%{ box-shadow:0 0 0 0 rgba(16,185,129,0); }
}

/* ══════════════════════  NAVBAR  ══════════════════════ */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--nav-h);
  background: #0e0720;
  border-bottom:1px solid rgba(124,58,237,.18);
  transition:var(--transition);
}
.navbar.scrolled { box-shadow:0 2px 24px rgba(124,58,237,.25); }

.nav-inner {
  max-width:1400px; margin:0 auto; padding:0 2rem;
  height:100%; display:flex; align-items:center; gap:1.6rem;
}

.logo {
  display:flex; align-items:center; gap:.45rem;
  font-size:1.2rem; font-weight:800; flex-shrink:0; color:#fff;
}
.logo-icon { font-size:1.25rem; filter: drop-shadow(0 0 6px rgba(167,139,250,.7)); }
.logo-text  { font-size:1.2rem; font-weight:800; color:#fff; letter-spacing:-.01em; font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif; }
.logo .accent {
  background: linear-gradient(135deg, #a78bfa, #818cf8);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.nav-links {
  display:flex; align-items:center; gap:.25rem;
  margin-left:auto;
}
.nav-link {
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.83rem; font-weight:500; color:#94a3b8;
  padding:.4rem .7rem; border-radius:var(--radius-sm);
  transition:var(--transition); white-space:nowrap;
  text-decoration:none;
}
.nav-link:hover { color:#e2e8f0; background:rgba(124,58,237,.15); }
.nav-link.active { color:#fff; background:rgba(124,58,237,.25); font-weight:600; border-bottom:2px solid #a78bfa; }
.nav-link i { font-size:.8rem; }

.nav-actions {
  display:flex; align-items:center; gap:.8rem; margin-left:.6rem; flex-shrink:0;
}

.btn-nav-login {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.84rem; font-weight:600; color:#c4b5fd;
  padding:.38rem .9rem; border-radius:var(--radius-sm);
  border:1px solid rgba(167,139,250,.35);
  transition:var(--transition); background:rgba(124,58,237,.1);
  text-decoration:none;
}
.btn-nav-login:hover { background:rgba(124,58,237,.2); color:#ddd6fe; }

.hamburger { display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; margin-left:auto; }
.hamburger span { display:block; width:22px; height:2px; background:#94a3b8; border-radius:2px; }

/* ══════════════════════  SPA PAGES  ══════════════════════ */
#appMain { padding-top: var(--nav-h); min-height:calc(100vh - var(--nav-h)); }

.page { display:none; }
.page.active { display:block; }

.page-wrap { min-height: calc(100vh - var(--nav-h) - 1px); }

/* ══════════════════════  HERO  ══════════════════════ */
.hero {
  position:relative; min-height:calc(100vh - var(--nav-h));
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:4rem 2rem 3rem; overflow:hidden;
  background:#ffffff;
}
.hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 75% 60% at 50% -5%,  rgba(124,58,237,.09), transparent 65%),
    radial-gradient(ellipse 50% 45% at 90% 80%,  rgba(79,70,229,.07),  transparent 55%),
    radial-gradient(ellipse 40% 35% at 8%  75%,  rgba(167,139,250,.05),transparent 55%);
}
#particleCanvas { position:absolute; inset:0; width:100%; height:100%; opacity:.45; }

.hero-content { position:relative; z-index:1; max-width:800px; margin:0 auto; }

.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--primary-lt); border:1px solid rgba(124,58,237,.3);
  color:var(--primary); font-size:.76rem; font-weight:700;
  letter-spacing:.06em; padding:.3rem .95rem; border-radius:50px; margin-bottom:1.6rem;
  text-transform:uppercase; box-shadow: 0 0 0 4px rgba(124,58,237,.06);
}
.hero-title { color:var(--text); margin-bottom:1rem; min-height:1.3em; }
.hero-title span { display:block; min-height:1.2em; }

.hero-subtitle {
  font-size:clamp(.95rem,1.4vw,1.1rem); max-width:570px; margin:0 auto 2.2rem; color:var(--text-muted);
}
.hero-cta { display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; margin-bottom:3.5rem; }

.hero-stats {
  display:flex; align-items:center; justify-content:center;
  gap:2.5rem; flex-wrap:wrap;
  background:var(--bg-white); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.2rem 2.5rem; box-shadow:var(--shadow-md);
}
.stat { text-align:center; }
.stat-num  { font-size:1.85rem; font-weight:800; color:var(--primary); }
.stat-unit { font-size:1.1rem;  font-weight:700; color:var(--primary); }
.stat-label{ display:block; font-size:.73rem; color:var(--text-muted); margin-top:.15rem; font-weight:500; }
.stat-divider { width:1px; height:36px; background:var(--border); }

.scroll-cue {
  position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  font-size:.72rem; color:var(--text-muted); animation:bounceY 2s infinite;
}
@keyframes bounceY {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(6px); }
}

/* ── Quick-links strip ── */
.home-quicklinks { background:var(--bg-alt); border-top:1px solid var(--border); padding:2rem 0 2.5rem; }
.ql-label { text-align:center; font-size:.8rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:1.1rem; }
.ql-grid  { display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }
.ql-card  {
  display:flex; align-items:center; gap:.55rem;
  background:var(--bg-white); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:.6rem 1.1rem;
  font-size:.84rem; font-weight:600; color:var(--text-md);
  transition:var(--transition); box-shadow:var(--shadow-sm); text-decoration:none;
}
.ql-card:hover { border-color:var(--border-md); box-shadow:var(--shadow-md); transform:translateY(-2px); color:var(--primary); }
.ql-card i { font-size:1rem; }
.ql-all   { color:var(--text-muted); }

/* ══════════════════════  SECTIONS  ══════════════════════ */
.section { padding:5rem 0; }
.section-alt { background:var(--bg-alt); }

.section-header { text-align:center; max-width:660px; margin:0 auto 3rem; }
.section-header p { margin-top:.55rem; font-size:1rem; }

.section-tag {
  display:inline-block;
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--primary); background:var(--primary-lt);
  border:1px solid rgba(124,58,237,.25); padding:.22rem .8rem; border-radius:50px; margin-bottom:.85rem;
}

/* ══════════════════════  ACCELERATORS GRID  ══════════════════════ */
.accel-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:1.2rem;
}
.accel-card {
  position:relative; background:var(--bg-white); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.6rem; cursor:pointer;
  transition:var(--transition); overflow:hidden; display:block;
  text-decoration:none; box-shadow:var(--shadow-sm);
}
.accel-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--c,var(--primary)); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.accel-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--border-md); }
.accel-card:hover::after { transform:scaleX(1); }

.accel-icon {
  width:46px; height:46px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; color:#fff; margin-bottom:1rem;
}
.accel-tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.75rem; }
.accel-tags span {
  font-size:.67rem; font-weight:600; background:var(--bg-alt);
  border:1px solid var(--border); padding:.18rem .55rem; border-radius:50px; color:var(--text-muted);
}
.accel-arrow {
  position:absolute; bottom:1.3rem; right:1.3rem;
  opacity:0; transform:translateX(-4px); transition:var(--transition); color:var(--primary);
}
.accel-card:hover .accel-arrow { opacity:1; transform:translateX(0); }

/* ══════════════════════  FEATURE PAGES  ══════════════════════ */
.feature-layout {
  display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:center;
}
.feature-layout.reverse { direction:rtl; }
.feature-layout.reverse > * { direction:ltr; }

.feature-text { max-width:500px; }
.feature-text h2 { margin-top:.5rem; }
.feature-text p  { font-size:1rem; margin-top:.5rem; margin-bottom:1.1rem; }

.feature-list {
  list-style:none; display:flex; flex-direction:column; gap:.65rem; margin-bottom:.6rem;
}
.feature-list li {
  display:flex; align-items:center; gap:.65rem;
  font-size:.93rem; color:var(--text-md);
}
.feature-list i { flex-shrink:0; font-size:.95rem; }

.feature-actions { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-top:1.5rem; }

.feature-visual { display:flex; align-items:center; justify-content:center; }

.animate-float { animation:floatUpDown 4.5s ease-in-out infinite; }
@keyframes floatUpDown { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* ── Doc demo ── */
.doc-card {
  background:var(--bg-white); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.4rem; width:310px; box-shadow:var(--shadow-lg);
}
.doc-header {
  display:flex; align-items:center; gap:.5rem;
  font-weight:600; font-size:.88rem; color:var(--text);
  padding-bottom:.75rem; border-bottom:1px solid var(--border); margin-bottom:.9rem;
}
.doc-highlight {
  display:flex; align-items:center; gap:.65rem;
  padding:.5rem .65rem; border-radius:var(--radius-sm);
  background:var(--bg-alt); margin-bottom:.45rem;
  animation:fadeSlide .5s ease forwards; font-size:.86rem; color:var(--text-md);
}
@keyframes fadeSlide { from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:translateX(0)} }
.tag-chip { font-size:.68rem; font-weight:700; padding:.18rem .5rem; border-radius:4px; white-space:nowrap; }
.doc-status {
  display:flex; align-items:center; gap:.5rem;
  font-size:.76rem; color:var(--text-muted); margin-top:.9rem;
}

/* ── Audio demo ── */
.audio-demo {
  background:var(--bg-white); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.4rem; width:330px; box-shadow:var(--shadow-lg);
}
.waveform-wrap { margin-bottom:.9rem; }
.waveform { display:flex; align-items:center; justify-content:center; gap:3px; height:48px; }
.waveform .bar {
  width:4px; border-radius:2px;
  animation:barAnim var(--d,.5s) ease-in-out infinite alternate;
}
@keyframes barAnim { from{height:var(--min,6px)} to{height:var(--max,38px)} }
.transcript-scroll { margin-bottom:.9rem; }
.transcript-line {
  display:flex; flex-direction:column; gap:.12rem;
  padding:.45rem .55rem; border-radius:var(--radius-sm); margin-bottom:.35rem; font-size:.78rem;
}
.transcript-line.speaker-a { background:#eff6ff; }
.transcript-line.speaker-b { background:#f0fdf4; }
.transcript-line.tag-live   { flex-direction:row; align-items:center; gap:.5rem; color:var(--text-muted); }
.transcript-line span:first-child { font-weight:700; font-size:.7rem; color:var(--primary); }
.tline { color:var(--text-md); }
.sentiment-bar { display:flex; align-items:center; gap:.65rem; font-size:.76rem; color:var(--text-muted); }
.bar-track { flex:1; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.bar-fill  { height:100%; border-radius:3px; }

/* ── Video demo ── */
.video-demo {
  background:var(--bg-white); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; width:330px; box-shadow:var(--shadow-lg);
}
.video-screen { position:relative; background:#e8f0f8; height:190px; overflow:hidden; }
.video-overlay-box { position:absolute; border:2px solid; border-radius:4px; }
.box-label {
  position:absolute; top:-22px; left:0;
  font-size:.64rem; font-weight:700; color:#fff; padding:2px 6px; border-radius:3px; white-space:nowrap;
}
.video-hud {
  position:absolute; top:8px; right:8px;
  display:flex; gap:.6rem; font-size:.66rem; color:var(--text-muted);
  background:rgba(255,255,255,.85); padding:.2rem .5rem; border-radius:4px; border:1px solid var(--border);
}
.video-meta-strip { display:flex; flex-wrap:wrap; gap:.35rem; padding:.75rem .9rem; }
.meta-pill {
  font-size:.7rem; font-weight:600; background:var(--bg-alt);
  padding:.22rem .55rem; border-radius:50px; color:var(--text-md); border:1px solid var(--border);
}

/* ── Translate demo ── */
.translate-demo { width:100%; max-width:430px; }
.translate-card {
  background:var(--bg-white); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow-lg);
}
.translate-row { display:flex; align-items:center; gap:.75rem; }
.lang-box {
  flex:1; background:var(--bg-alt); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:.75rem;
}
.lang-flag  { font-size:1.3rem; }
.lang-label { font-size:.68rem; font-weight:700; color:var(--text-muted); margin:.18rem 0; text-transform:uppercase; letter-spacing:.05em; }
.lang-text  { font-size:.8rem; color:var(--text-md); line-height:1.5; }
.translate-arrow { font-size:.95rem; color:var(--text-muted); flex-shrink:0; }
.translate-stats {
  display:flex; gap:1.4rem; margin-top:.9rem; padding-top:.75rem;
  border-top:1px solid var(--border); font-size:.78rem; color:var(--text-muted);
}

/* ── Match demo ── */
.match-demo {
  width:300px; background:var(--bg-white); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow-lg);
}
.match-graph { position:relative; height:255px; margin-bottom:.9rem; }
.node {
  position:absolute;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.12rem;
  background:#fffbeb; border:1px solid #fde68a;
  border-radius:var(--radius-sm); padding:.3rem .65rem;
  font-size:.7rem; font-weight:700; color:#92400e; white-space:nowrap; z-index:2;
}
.node-center { top:50%; left:50%; transform:translate(-50%,-50%); background:#fef3c7; border-color:#f59e0b; font-size:.8rem; color:#78350f; }
.node-1 { top:4px;   left:50%; transform:translateX(-50%); }
.node-2 { top:50%;   left:4px;  transform:translateY(-50%); }
.node-3 { top:50%;   right:4px; transform:translateY(-50%); }
.node-4 { bottom:4px; left:50%; transform:translateX(-50%); }
.match-edges { position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.score-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:.38rem 0; border-bottom:1px solid var(--border); font-size:.8rem; color:var(--text-muted);
}
.score-row:last-child { border-bottom:none; }
.score-val { font-weight:700; }

/* ══════════════════════  MORE CARDS  ══════════════════════ */
.more-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:1.1rem;
}
.more-card {
  background:var(--bg-white); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.4rem;
  position:relative; transition:var(--transition); box-shadow:var(--shadow-sm);
}
.more-card:hover { border-color:var(--border-md); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.more-card i { font-size:1.35rem; margin-bottom:.6rem; display:block; }
.more-card p { font-size:.83rem; }

.badge-status {
  position:absolute; top:.9rem; right:.9rem;
  font-size:.62rem; font-weight:700; padding:.18rem .5rem; border-radius:50px;
}
.badge-status.live { background:#ecfdf5; color:#059669; border:1px solid #a7f3d0; }
.badge-status.beta { background:#fffbeb; color:#b45309; border:1px solid #fde68a; }
.badge-status.soon { background:var(--bg-alt); color:var(--text-muted); border:1px solid var(--border); }

/* ══════════════════════  ABOUT  ══════════════════════ */
.about-layout { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.about-text p { font-size:1rem; margin-top:.55rem; }
.about-text em { color:var(--primary); font-style:normal; font-weight:600; }
.about-pillars { display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:2rem; }
.pillar {
  flex:1; min-width:120px; background:var(--bg-alt);
  border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem;
}
.pillar i { font-size:1.2rem; margin-bottom:.45rem; display:block; }
.pillar h5 { font-size:.82rem; color:var(--text); margin-bottom:.25rem; }
.pillar p  { font-size:.78rem; }

/* Orbit */
.orbit-wrap { position:relative; width:300px; height:300px; margin:auto; }
.orbit-center {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; background:var(--primary); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:800; color:#fff; z-index:2;
  box-shadow:0 0 0 8px rgba(124,58,237,.1);
}
.orbit {
  position:absolute; top:50%; left:50%;
  border:1px dashed var(--border-md); border-radius:50%;
  transform:translate(-50%,-50%); animation:spinOrbit var(--s,14s) linear infinite;
}
.orbit-1 { width:190px; height:190px; --s:18s; }
.orbit-2 { width:290px; height:290px; --s:28s; }
@keyframes spinOrbit { to{transform:translate(-50%,-50%) rotate(360deg)} }

.orbit-node {
  position:absolute; width:36px; height:36px;
  background:var(--bg-white); border:1px solid var(--border-md); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; color:var(--primary);
  top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(var(--ang,0deg)) translateY(-50%) rotate(calc(-1 * var(--ang,0deg)));
  animation:counterSpin var(--s,14s) linear infinite;
  box-shadow:var(--shadow-sm);
}
.orbit-1 .orbit-node { --s:18s; }
.orbit-2 .orbit-node { --s:28s; }
@keyframes counterSpin {
  0%  { transform:translate(-50%,-50%) rotate(var(--ang,0deg)) translateY(-50%) rotate(calc(-1 * var(--ang,0deg))); }
  100%{ transform:translate(-50%,-50%) rotate(calc(var(--ang,0deg) + 360deg)) translateY(-50%) rotate(calc(-1 * (var(--ang,0deg) + 360deg))); }
}

/* ══════════════════════  CONTACT (navy bg)  ══════════════════════ */
.section-navy { background:var(--bg-navy); }
.section-navy h2 { color:#fff; }
.section-navy p  { color:#c4b5fd; }
.section-navy .section-tag { color:#c4b5fd; background:rgba(167,139,250,.12); border-color:rgba(167,139,250,.3); }

.contact-inner { max-width:620px; margin:0 auto; }
.contact-form  { display:flex; flex-direction:column; gap:.9rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }

.contact-form input,
.contact-form select,
.contact-form textarea {
  width:100%; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2); border-radius:var(--radius-sm);
  padding:.72rem 1rem; color:#fff;
  font-family:inherit; font-size:.9rem; transition:border-color .2s; outline:none;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color:rgba(255,255,255,.45); }
.contact-form select { color:rgba(255,255,255,.85); }
.contact-form select option { background:var(--bg-navy); color:#fff; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color:#c4b5fd; box-shadow:0 0 0 3px rgba(167,139,250,.15); }

.contact-confirm { text-align:center; padding:3rem; }
.contact-confirm i  { font-size:2.8rem; color:#86efac; margin-bottom:.9rem; }
.contact-confirm h3 { font-size:1.4rem; margin-bottom:.45rem; color:#fff; }
.contact-confirm p  { color:#c4b5fd; }

/* ══════════════════════  LOGIN PAGE  ══════════════════════ */
.login-split {
  display:grid; grid-template-columns:1fr 1fr;
  min-height:calc(100vh - var(--nav-h));
}

/* Left brand panel */
.login-brand {
  background:var(--bg-navy);
  display:flex; align-items:center; justify-content:center;
  padding:3rem 3.5rem;
  background-image:
    radial-gradient(ellipse 70% 60% at 20% 30%,rgba(124,58,237,.4),transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 80%,rgba(3,105,161,.3),transparent 60%);
}
.login-brand-inner { max-width:380px; }

.login-logo { margin-bottom:2.5rem; }

.login-tagline {
  font-size:clamp(1.8rem,2.5vw,2.6rem); font-weight:800;
  color:#fff; line-height:1.18; margin-bottom:1rem;
}
.login-sub { font-size:.95rem; color:#c4b5fd; line-height:1.65; margin-bottom:2rem; }

.login-features { display:flex; flex-direction:column; gap:.65rem; }
.lf-item {
  display:flex; align-items:center; gap:.65rem;
  font-size:.88rem; font-weight:500; color:#ddd6fe;
}
.lf-item i { color:#34d399; font-size:.85rem; flex-shrink:0; }

/* Right form panel */
.login-form-panel {
  background:var(--bg-white);
  display:flex; align-items:center; justify-content:center;
  padding:3rem 3.5rem;
}
.login-form-inner { width:100%; max-width:400px; }

.login-form-header { margin-bottom:2rem; }
.login-form-header h3 { font-size:1.6rem; font-weight:800; color:var(--text); }
.login-form-header p  { font-size:.9rem; color:var(--text-muted); margin-top:.25rem; }

.login-form { display:flex; flex-direction:column; gap:1.1rem; }

.login-field { display:flex; flex-direction:column; gap:.45rem; }
.login-field label {
  display:flex; justify-content:space-between; align-items:center;
  font-size:.82rem; font-weight:600; color:var(--text-md);
}
.forgot-link { font-size:.8rem; font-weight:500; color:var(--primary); }
.forgot-link:hover { text-decoration:underline; }

.input-icon-wrap {
  position:relative;
}
.input-icon-wrap > i:first-child {
  position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  font-size:.85rem; color:var(--text-muted); pointer-events:none;
}
.input-icon-wrap input {
  width:100%; padding:.72rem 1rem .72rem 2.4rem;
  background:var(--bg);
  border:1px solid var(--border-md); border-radius:var(--radius-sm);
  font-family:inherit; font-size:.9rem; color:var(--text);
  transition:border-color .2s; outline:none;
}
.input-icon-wrap input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(124,58,237,.1); }

.toggle-pw {
  position:absolute; right:.85rem; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--text-muted);
  font-size:.85rem; padding:.2rem;
}
.toggle-pw:hover { color:var(--text); }

.remember-me {
  display:flex; align-items:center; gap:.55rem;
  font-size:.83rem; color:var(--text-muted); cursor:pointer; user-select:none;
}
.remember-me input[type="checkbox"] {
  width:15px; height:15px; accent-color:var(--primary); cursor:pointer;
}

.login-btn { margin-top:.4rem; }

.login-divider {
  display:flex; align-items:center; gap:.8rem;
  margin:1.4rem 0 1rem;
  font-size:.78rem; color:var(--text-muted);
}
.login-divider::before,
.login-divider::after { content:''; flex:1; height:1px; background:var(--border); }

.login-sso { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.sso-btn {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--bg); border:1px solid var(--border-md);
  border-radius:var(--radius-sm); padding:.6rem 1rem;
  font-size:.84rem; font-weight:600; color:var(--text-md);
  cursor:pointer; transition:var(--transition); font-family:inherit;
}
.sso-btn:hover { background:var(--bg-alt); border-color:var(--border-md); }
.sso-btn i { font-size:.95rem; }

.login-signup {
  text-align:center; font-size:.83rem; color:var(--text-muted); margin-top:1.4rem;
}
.login-signup a { color:var(--primary); font-weight:600; }
.login-signup a:hover { text-decoration:underline; }

/* ══════════════════════  FOOTER  ══════════════════════ */
.footer { background:var(--bg-navy); padding:3.5rem 0 2rem; }
.footer-inner { display:flex; gap:4rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.footer-brand { max-width:200px; }
.footer-brand .logo-text { color:#fff; font-size:1.15rem; }
.footer-brand .accent {
  background: linear-gradient(135deg, #a78bfa, #818cf8);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.footer-brand p { font-size:.83rem; color:#c4b5fd; margin-top:.45rem; }
.social-row { display:flex; gap:.7rem; margin-top:1rem; }
.social-row a {
  width:32px; height:32px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; color:#c4b5fd; transition:var(--transition);
}
.social-row a:hover { background:rgba(255,255,255,.18); color:#fff; }
.footer-links { flex:1; display:flex; gap:3rem; flex-wrap:wrap; }
.footer-links > div { display:flex; flex-direction:column; gap:.45rem; min-width:110px; }
.footer-links h5 { color:#cbd5e1; }
.footer-links a { font-size:.83rem; color:#94a3b8; transition:color .18s; }
.footer-links a:hover { color:#fff; }
.footer-bottom {
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.08);
  font-size:.78rem; color:#64748b;
}

/* ══════════════════════════════════════════════════════
   DOCUMENT CONVERTER  –  Upload · Preview · Progress · Result
   ══════════════════════════════════════════════════════ */

/* Centred wrapper */
.converter-wrap {
  max-width: 740px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Upload Zone ── */
.upload-zone {
  border: 2px dashed var(--border-md);
  border-radius: var(--radius);
  background: var(--bg-white);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-sm);
}
.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--primary);
  background: var(--primary-lt);
  box-shadow: 0 0 0 4px rgba(124,58,237,.08);
}
.upload-zone input[type="file"] { display: none; }

.upload-zone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  text-align: center;
  pointer-events: none;
}
.upload-icon-circle {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--primary-lt);
  border: 2px solid #ddd6fe;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: var(--primary);
  margin-bottom: .4rem;
  transition: var(--transition);
}
.upload-zone:hover .upload-icon-circle,
.upload-zone.drag-over .upload-icon-circle {
  background: var(--primary); color: #fff; border-color: var(--primary);
  transform: scale(1.06);
}
.upload-primary {
  font-size: 1.05rem; font-weight: 700; color: var(--text);
}
.upload-secondary {
  font-size: .88rem; color: var(--text-muted);
}
.upload-browse {
  color: var(--primary); font-weight: 600; text-decoration: underline; cursor: pointer;
}
.upload-type-pills {
  display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: .35rem;
}
.upload-type-pills span {
  display: inline-flex; align-items: center; gap: .28rem;
  font-size: .7rem; font-weight: 600;
  background: var(--bg-alt); border: 1px solid var(--border);
  padding: .2rem .6rem; border-radius: 50px; color: var(--text-muted);
}
.upload-limit {
  font-size: .74rem; color: var(--text-muted); margin-top: .2rem;
  display: flex; align-items: center; gap: .3rem;
}

/* ── Error box ── */
.converter-error {
  display: flex; align-items: center; gap: .6rem;
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: var(--radius-sm); padding: .75rem 1rem;
  font-size: .86rem; color: #dc2626; margin-top: .75rem;
}

/* ── File preview panel ── */
.file-preview-panel {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.file-info-bar {
  display: flex; align-items: center; gap: .85rem;
  padding: .9rem 1.2rem;
  background: var(--bg-alt); border-bottom: 1px solid var(--border);
}
.file-info-icon {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .95rem; flex-shrink: 0;
  transition: background .2s;
}
.file-info-details { flex: 1; min-width: 0; }
.file-info-name {
  font-size: .88rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-info-meta {
  display: flex; align-items: center; gap: .35rem;
  font-size: .74rem; color: var(--text-muted); margin-top: .1rem;
}
.meta-dot { color: var(--border-md); }

.file-remove-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: .9rem;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition); flex-shrink: 0;
}
.file-remove-btn:hover { background: #fee2e2; color: #dc2626; }

/* Preview content area */
.preview-area {
  padding: 1.5rem;
  min-height: 200px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
#previewImg {
  max-width: 100%; max-height: 320px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  object-fit: contain;
}
.preview-text-box {
  width: 100%; max-height: 260px; overflow-y: auto;
  background: var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1rem 1.2rem;
  font-size: .8rem; font-family: 'Courier New', monospace;
  color: var(--text-md); line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
  margin: 0;
}
.preview-pdf-placeholder {
  display: flex; flex-direction: column; align-items: center;
  gap: .65rem; padding: 2.5rem 1rem; color: var(--text-muted);
}
.preview-pdf-placeholder i { font-size: 3.2rem; color: #dc2626; }
.preview-pdf-placeholder span { font-size: .9rem; font-weight: 600; color: var(--text-md); }
.preview-pdf-sub { font-size: .78rem; color: var(--text-muted); font-weight: 400 !important; }

/* Options row */
.convert-options {
  display: flex; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.2rem;
  border-top: 1px solid var(--border);
  background: var(--bg-white);
}
.option-group {
  display: flex; flex-direction: column; gap: .3rem;
  flex: 1; min-width: 150px;
}
.option-group label {
  font-size: .7rem; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em;
}
.option-select {
  background: var(--bg-alt); border: 1px solid var(--border-md);
  border-radius: var(--radius-sm); padding: .5rem .75rem;
  font-size: .86rem; font-family: inherit; color: var(--text);
  cursor: pointer; outline: none; transition: border-color .2s;
}
.option-select:focus { border-color: var(--primary); }

/* Convert button row */
.convert-action-bar {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.2rem;
  border-top: 1px solid var(--border);
  background: var(--bg-white);
}

/* ── Progress ── */
.converter-progress {
  background: var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 3.5rem 2rem;
  text-align: center; box-shadow: var(--shadow-md);
}
.cp-icon { font-size: 2.6rem; color: var(--primary); margin-bottom: 1rem; }
.cp-label { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 1.4rem; }
.cp-track {
  height: 8px; background: var(--bg-alt);
  border-radius: 50px; overflow: hidden; margin-bottom: .6rem;
}
.cp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #60a5fa);
  border-radius: 50px; width: 0%;
  transition: width .18s ease;
}
.cp-pct { font-size: .85rem; font-weight: 700; color: var(--primary); }

/* ── Result ── */
.converter-result {
  background: var(--bg-white); border: 1px solid #bbf7d0;
  border-radius: var(--radius); padding: 3.5rem 2rem;
  text-align: center; box-shadow: var(--shadow-md);
}
.cr-icon { font-size: 3rem; color: #059669; margin-bottom: .8rem; }
.cr-title {
  font-size: 1.5rem; font-weight: 800; color: var(--text); margin-bottom: .5rem;
}
.cr-meta {
  display: flex; align-items: center; justify-content: center;
  gap: .4rem; font-size: .85rem; color: var(--text-muted); margin-bottom: 1.8rem;
}
.cr-actions {
  display: flex; align-items: center; justify-content: center;
  gap: .9rem; flex-wrap: wrap;
}

/* ── Responsive tweaks ── */
@media (max-width: 600px) {
  .convert-options { flex-direction: column; }
  .upload-zone     { padding: 2rem 1rem; }
}

/* ══════════════════════  RESPONSIVE  ══════════════════════ */
@media (max-width:1050px) {
  .nav-links { display:none; }
  .nav-links.mobile-open {
    display:flex; flex-direction:column; align-items:flex-start; gap:.25rem;
    position:fixed; top:var(--nav-h); left:0; right:0;
    background:var(--bg-navy); padding:1rem 1.5rem;
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 8px 24px rgba(0,0,0,.3);
    z-index:199;
  }
  .nav-links.mobile-open .nav-link { width:100%; padding:.55rem .75rem; }
  .hamburger { display:flex; }
  .nav-actions .live-badge { display:none; }
}

@media (max-width:860px) {
  .feature-layout, .feature-layout.reverse, .about-layout {
    grid-template-columns:1fr; direction:ltr;
  }
  .feature-visual { order:-1; }
  .login-split { grid-template-columns:1fr; }
  .login-brand  { display:none; }
  .orbit-wrap  { width:240px; height:240px; }
  .orbit-1     { width:150px; height:150px; }
  .orbit-2     { width:230px; height:230px; }
}

@media (max-width:600px) {
  .hero-stats { gap:1.2rem; padding:1rem 1.2rem; }
  .stat-num   { font-size:1.5rem; }
  .form-row   { grid-template-columns:1fr; }
  .footer-links { gap:2rem; }
  .about-pillars { gap:.75rem; }
  .container  { padding:0 1.25rem; }
}

/* ══════════════════════════════════════════════════════
   DOCUMENT TOOLS – Side-by-Side Grid
   ══════════════════════════════════════════════════════ */
.doc-tools-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 0;
}

.doc-tool-panel {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
}

/* override the centred max-width inside panels */
.doc-tool-panel .converter-wrap {
  max-width: none;
  margin: 0;
}
.doc-tool-panel .fmt-toggle-row {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.doc-tool-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.doc-tool-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff;
  flex-shrink: 0;
}
.doc-tool-header h3 {
  margin: 0 0 .2rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.doc-tool-header p {
  margin: 0;
  font-size: .83rem;
  color: var(--text-muted);
}

/* Vertical "or" divider */
.tools-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 0 1.75rem;
  align-self: stretch;
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tools-divider::before,
.tools-divider::after {
  content: '';
  flex: 1;
  width: 1px;
  background: var(--border-md);
}

@media (max-width: 1020px) {
  .doc-tools-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .tools-divider {
    flex-direction: row;
    padding: 0;
    align-self: auto;
  }
  .tools-divider::before,
  .tools-divider::after {
    width: auto;
    height: 1px;
    flex: 1;
  }
}

/* ══════════════════════════════════════════════════════
   PDF EXTRACTOR – Format Toggle
   ══════════════════════════════════════════════════════ */
.fmt-toggle-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 0 auto 2rem;
  max-width: 520px;
}

.fmt-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 1.35rem 1rem;
  border: 2px solid var(--border-md);
  border-radius: var(--radius);
  background: var(--bg-white);
  cursor: pointer;
  transition:
    border-color var(--transition),
    box-shadow   var(--transition),
    transform    var(--transition),
    background   var(--transition);
}
.fmt-btn:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.fmt-btn.active {
  border-color: var(--primary);
  background: var(--primary-lt);
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}

.fmt-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  flex-shrink: 0;
}
.docx-icon { background: #2563eb; }
.xlsx-icon { background: #16a34a; }

.fmt-label {
  font-weight: 600;
  font-size: .92rem;
  color: var(--text);
}
.fmt-sub {
  font-size: .75rem;
  color: var(--text-muted);
  font-family: 'Courier New', monospace;
  letter-spacing: .02em;
}

@media (max-width:480px) {
  .fmt-toggle-row { gap:.6rem; }
  .fmt-btn { padding:1rem .75rem; }
  .fmt-icon { width:40px; height:40px; font-size:1.15rem; }
}

/* ══════════════════════════════════════════════════════
   AUDIO TOOLS – Three-column operation cards
   ══════════════════════════════════════════════════════ */
.audio-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.audio-tool-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Card header */
.atc-header {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.atc-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-navy);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.atc-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: #fff;
  flex-shrink: 0;
}
.atc-header h3 { margin: 0 0 .12rem; font-size: .97rem; font-weight: 700; color: var(--text); }
.atc-header p  { margin: 0; font-size: .77rem; color: var(--text-muted); }

/* Card body */
.atc-body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  flex: 1;
}

/* Placeholder (mic off state) */
.atc-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: 1.5rem;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: .82rem;
  text-align: center;
}
.atc-placeholder i { font-size: 1.8rem; opacity: .35; }

/* Full-width button */
.atc-btn { width: 100%; justify-content: center; }

/* Recording waveform */
.atc-waveform {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.25rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
}
.atc-wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 30px;
}
.atc-wave-bar {
  width: 4px;
  min-height: 4px;
  border-radius: 2px;
  background: #dc2626;
  transform-origin: center bottom;
  animation: atcBarPulse .8s infinite ease-in-out;
}
@keyframes atcBarPulse {
  0%, 100% { transform: scaleY(.2); opacity: .5; }
  50%       { transform: scaleY(1);  opacity: 1;  }
}
.atc-timer {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #dc2626;
  white-space: nowrap;
}

/* Audio playback */
.atc-audio { width: 100%; border-radius: var(--radius-sm); }

/* Done action row */
.atc-done-actions {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}
.atc-done-actions .btn-primary,
.atc-done-actions .btn-ghost {
  flex: 1;
  justify-content: center;
  padding: .5rem .75rem;
  font-size: .82rem;
  white-space: nowrap;
}

/* Upload zone for audio */
.atc-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 1.25rem 1rem;
  border: 2px dashed var(--border-md);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  text-align: center;
  color: var(--text-muted);
  font-size: .83rem;
  position: relative;
}
.atc-upload-zone:hover,
.atc-upload-zone:focus-within { border-color: var(--primary); background: var(--primary-lt); }
.atc-upload-zone i            { font-size: 1.4rem; color: var(--primary); }
.atc-upload-zone small        { font-size: .7rem; }
.atc-upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* "or" divider inside card */
.atc-or-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.atc-or-row::before,
.atc-or-row::after { content: ''; flex: 1; height: 1px; background: var(--border-md); }

/* Transcript box */
.atc-transcript-box {
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .9rem;
  font-size: .8rem;
  line-height: 1.55;
  scroll-behavior: smooth;
}
.atc-tx-status {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--text-muted);
  font-style: italic;
  font-size: .8rem;
}
.atc-interim-line {
  font-size: .78rem;
  color: var(--text-muted);
  font-style: italic;
  min-height: 1.2em;
  padding: 0 .25rem;
}
.transcript-entry { margin-bottom: .65rem; }
.transcript-entry:last-child { margin-bottom: 0; }
.te-speaker {
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .1rem;
}
.te-time   { font-weight: 400; font-size: .68rem; color: var(--text-muted); margin-left: .35rem; }
.te-text   { color: var(--text); }
.spk-a { color: var(--primary); }
.spk-b { color: #047857; }
.spk-c { color: #b45309; }
.spk-d { color: #7c3aed; }

/* Textarea for summary input */
.atc-textarea {
  width: 100%;
  min-height: 150px;
  border: 1px solid var(--border-md);
  border-radius: var(--radius-sm);
  padding: .75rem .9rem;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-white);
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.atc-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}

/* Processing spinner */
.atc-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
  font-size: .88rem;
}
.atc-processing i { font-size: 1.8rem; color: var(--primary); }

/* Summary result box */
.atc-summary-box {
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .9rem;
  font-size: .8rem;
  line-height: 1.55;
}
.sum-section       { margin-bottom: .85rem; }
.sum-section:last-child { margin-bottom: 0; }
.sum-title {
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--primary);
  padding-bottom: .3rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}
.sum-list         { list-style: none; padding: 0; margin: 0; }
.sum-list li      { display: flex; align-items: flex-start; gap: .4rem; padding: .18rem 0; color: var(--text); }
.sum-list li i    { margin-top: .18rem; flex-shrink: 0; font-size: .72rem; color: var(--primary); }

/* Responsive */
@media (max-width: 960px) {
  .audio-tools-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   VIDEO TOOLS – camera preview + rec bar
   ══════════════════════════════════════════════════════ */
.vtc-preview {
  width: 100%;
  border-radius: var(--radius-sm);
  background: #0f172a;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.vtc-rec-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .9rem;
  background: #1e0505;
  border-radius: var(--radius-sm);
  border: 1px solid #7f1d1d;
}
.vtc-rec-dot {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  color: #fca5a5;
  letter-spacing: .06em;
}
.vtc-rec-dot i {
  font-size: .55rem;
  color: #ef4444;
  animation: recBlink 1s infinite;
}
@keyframes recBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Card highlight pulse – used when linking between tool cards */
@keyframes cardPulse {
  0%   { box-shadow: 0 0 0 0 rgba(180, 83, 9, .5); }
  60%  { box-shadow: 0 0 0 10px rgba(180, 83, 9, 0); }
  100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0); }
}
.card-pulse {
  animation: cardPulse 1.2s ease-out;
  border-color: #b45309 !important;
}

/* ── Card 3 direct-transcription bar ─────────────────── */
.vsm-tx-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.25);
  border-radius: var(--radius);
  padding: .55rem .9rem;
  font-size: .82rem;
  color: var(--text-secondary);
  width: 100%;
}
.vsm-tx-bar .pulse-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  animation: recBlink 1s ease-in-out infinite;
}
#vSumTxStatus {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-style: italic;
}
.vsm-stop-btn {
  flex-shrink: 0;
  padding: .25rem .65rem !important;
  font-size: .78rem !important;
}

/* ══════════════════════════════════════════════════════
   TRANSLATION TOOLS
══════════════════════════════════════════════════════ */
.tr-tools-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .tr-tools-grid { grid-template-columns: 1fr; }
}

/* Language selectors */
.tr-lang-row {
  display: flex;
  align-items: flex-end;
  gap: .65rem;
  width: 100%;
}
.tr-lang-pick {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1;
}
.tr-lang-pick label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tr-select {
  width: 100%;
  padding: .45rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: .88rem;
  cursor: pointer;
  appearance: auto;
}
.tr-select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Swap button */
.tr-swap-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
  margin-bottom: 1px;
}
.tr-swap-btn:hover { background: #7c3aed; color: #fff; border-color: #7c3aed; }

/* Dual-panel transcript box */
.tr-dual-box {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: .6rem;
  width: 100%;
}
.tr-panel { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.tr-panel-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--border);
}
.tr-live-box,
.tr-result-box {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-height: 190px;
  overflow-y: auto;
  padding: .1rem 0;
}
.tr-divider { background: var(--border); }

/* Individual transcript entries */
.tr-entry {
  font-size: .81rem;
  line-height: 1.55;
  padding: .3rem .55rem;
  border-radius: 6px;
  word-break: break-word;
}
.tr-entry-orig  { background: rgba(124,58,237,.07);  color: var(--text); }
.tr-entry-trans { background: rgba(124,58,237,.07); color: var(--text); }
.tr-pending     { color: var(--text-secondary); font-style: italic; }

/* Interim text */
.tr-interim {
  font-size: .8rem;
  color: var(--text-secondary);
  font-style: italic;
  min-height: 1.1em;
  padding: .1rem 0;
  word-break: break-word;
}