/* ---------------------------------------------------------------------
   Design tokens
--------------------------------------------------------------------- */
:root {
  --ink: #0B1220;
  --surface: #131B2E;
  --surface-2: #1A2438;
  --border: #26324A;
  --indigo: #4361EE;
  --indigo-hover: #5A75F5;
  --amber: #F2B84B;
  --coral: #FF6B5E;
  --teal: #2DD4A6;
  --text: #F1F4F9;
  --text-muted: #8B95AC;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --nav-height: 68px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
  color: var(--text);
}

a { color: var(--indigo-hover); }

a:focus-visible, button:focus-visible, textarea:focus-visible, input:focus-visible {
  outline: 2px solid var(--indigo-hover);
  outline-offset: 2px;
}

/* Sections that get jumped to via nav links need this, or the sticky nav
   covers part of the heading when the browser scrolls to it. */
#how, #tool { scroll-margin-top: var(--nav-height); }

/* ---------------------------------------------------------------------
   Nav
--------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: rgba(11, 18, 32, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand-link { display: flex; align-items: center; }
.brand-logo { height: 128px; width: auto; display: block; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-cta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  background: var(--indigo);
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--indigo-hover); }

/* Language toggle -- one pill split into two halves, like the reference
   site's EN | ع switch. */
.lang-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.lang-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 8px 12px;
  cursor: pointer;
}
.lang-btn.active { background: var(--indigo); color: white; }
.lang-btn:not(.active):hover { background: var(--surface-2); color: var(--text); }

/* ---------------------------------------------------------------------
   Hero + signature scanning animation
--------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 24px 80px;
}
.hero-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(67, 97, 238, 0.25) 0%, rgba(67, 97, 238, 0) 60%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

/* Larger, bolder headline per feedback -- question in white, answer in
   the same accent color as the primary button, tying the headline
   visually to the call to action. */
#hero-headline {
  font-size: 56px;
  line-height: 1.12;
  letter-spacing: -1px;
  display: block;
}
.headline-white { color: var(--text); display: block; }
.headline-accent { color: var(--indigo-hover); display: block; }

.hero-sub {
  color: var(--text-muted);
  font-size: 18px;
  margin-top: 22px;
  max-width: 46ch;
}
.hero-note {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 14px;
}

.btn-primary {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: white;
  background: var(--indigo);
  border: none;
  padding: 14px 24px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  margin-top: 28px;
}
.btn-primary:hover { background: var(--indigo-hover); }

.scan-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 13px;
}
.scan-card-header { display: flex; gap: 6px; margin-bottom: 16px; }
.scan-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.scan-line { color: var(--text-muted); padding: 6px 0; direction: ltr; text-align: left; }
.scan-line-2 { color: var(--text); }

.scan-beam {
  position: absolute;
  left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, rgba(67,97,238,0) 0%, rgba(67,97,238,0.35) 50%, rgba(67,97,238,0) 100%);
  top: 0%;
  animation: beamSweep 4s ease-in-out infinite;
}
@keyframes beamSweep {
  0%   { top: -10%; opacity: 1; }
  75%  { top: 95%; opacity: 1; }
  100% { top: 95%; opacity: 0; }
}

.scan-flag {
  position: absolute;
  right: 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  background: rgba(255, 107, 94, 0.15);
  color: var(--coral);
  border: 1px solid rgba(255, 107, 94, 0.4);
  padding: 4px 10px;
  border-radius: 999px;
  opacity: 0;
}
.scan-flag-1 { top: 48px; animation: flagPop 4s ease-in-out infinite; animation-delay: 0.6s; }
.scan-flag-2 { top: 118px; animation: flagPop 4s ease-in-out infinite; animation-delay: 2.4s; }
@keyframes flagPop {
  0%, 15%  { opacity: 0; transform: translateX(6px); }
  25%, 85% { opacity: 1; transform: translateX(0); }
  100%     { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scan-beam, .scan-flag-1, .scan-flag-2 { animation: none; opacity: 0; }
}

/* ---------------------------------------------------------------------
   How it works
--------------------------------------------------------------------- */
.how { max-width: 1100px; margin: 0 auto; padding: 80px 24px; text-align: center; }
.how h2 { font-size: 30px; margin-bottom: 48px; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: left; }
.how-step { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 28px; }
.how-num { font-family: var(--font-mono); color: var(--indigo-hover); font-size: 13px; }
.how-step h3 { font-size: 19px; margin-top: 8px; }
.how-step p { color: var(--text-muted); font-size: 14.5px; margin-top: 10px; }
[dir="rtl"] .how-grid { text-align: right; }

/* ---------------------------------------------------------------------
   Tool section
--------------------------------------------------------------------- */
.tool { max-width: 760px; margin: 0 auto; padding: 40px 24px 100px; }
.tool h2 { font-size: 28px; text-align: center; margin-bottom: 24px; }

.disclaimer {
  background: rgba(67, 97, 238, 0.12);
  border: 1px solid rgba(67, 97, 238, 0.4);
  border-left: 4px solid var(--indigo);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--text);
  margin-bottom: 24px;
}
[dir="rtl"] .disclaimer { border-left: 1px solid rgba(67, 97, 238, 0.4); border-right: 4px solid var(--indigo); }

.tool-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }

.tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.tab-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.tab-btn.active { background: var(--indigo); color: white; border-color: var(--indigo); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

textarea#email-text {
  width: 100%;
  min-height: 220px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  font-family: var(--font-body);
  font-size: 14px;
  resize: vertical;
}
textarea#email-text:focus {
  border-color: var(--indigo-hover);
  outline: none;
}

.upload-hint { color: var(--text-muted); font-size: 13.5px; margin-bottom: 14px; }
.file-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 16px;
  text-align: center;
  padding: 16px;
  word-break: break-word;
}
.file-drop:hover { border-color: var(--indigo-hover); color: var(--text); }
.file-drop.drag-active {
  border-color: var(--indigo-hover);
  background: rgba(67, 97, 238, 0.08);
  color: var(--text);
}

.checks-remaining { color: var(--text-muted); font-size: 12.5px; font-family: var(--font-mono); margin-top: 16px; text-align: right; }
[dir="rtl"] .checks-remaining { text-align: left; }

#result-area { margin-top: 20px; }
.verdict-card { border-radius: 12px; padding: 22px 24px; border: 1px solid; }
.verdict-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.verdict-summary { margin-top: 10px; font-size: 15px; }
.verdict-confidence {
  margin-top: 10px; font-size: 12px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted);
}
.flag-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-top: 12px; }
.flag-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.flag-explanation { color: var(--text-muted); font-size: 14px; margin-top: 6px; }
.evidence-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
  word-break: break-all;
  max-width: 100%;
}
.error-box { background: rgba(255, 107, 94, 0.12); border: 1px solid var(--coral); color: var(--text); padding: 14px 18px; border-radius: 10px; }

/* Technical details (progressive disclosure) */
.tech-details { margin-top: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); padding: 4px 18px; overflow: hidden; }
.tech-details summary {
  cursor: pointer;
  padding: 12px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
}
.tech-details[open] summary { color: var(--text); }
.tech-details-body { padding: 4px 0 16px; font-size: 13.5px; }
.tech-row { padding: 6px 0; border-top: 1px solid var(--border); overflow-wrap: break-word; }
.tech-row:first-child { border-top: none; }
.auth-badge {
  font-family: var(--font-mono);
  font-size: 11.5px;
  border: 1px solid;
  border-radius: 5px;
  padding: 2px 7px;
  margin-inline-end: 6px;
  display: inline-block;
}

/* ---------------------------------------------------------------------
   Footer
--------------------------------------------------------------------- */
.footer { max-width: 760px; margin: 0 auto; padding: 0 24px 60px; color: var(--text-muted); font-size: 13px; text-align: center; }

/* ---------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------- */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  #hero-headline { font-size: 36px; }
  .how-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .nav-inner { flex-wrap: wrap; height: auto; padding: 10px 16px; }
  .nav { height: auto; }
  .brand { font-size: 15px; }
  /* The nav's "Check an email" button is redundant on phones -- the hero
     directly below already has its own large CTA doing the same job.
     Hiding it here avoids the nav wrapping onto an awkward, unbalanced
     second row on narrow screens. Desktop is untouched. */
  .nav-cta { display: none; }

  #hero-headline { font-size: 30px; }
  .hero { padding: 48px 16px 56px; }
  .hero-sub { font-size: 16px; }
  /* The scan-card animation is purely decorative (aria-hidden) and its
     badges are positioned assuming a wider card -- on narrow phones the
     same-length text runs right into them. Rather than doing fragile
     width-dependent repositioning math, we simply don't show this
     specific flourish on phone-sized screens; nothing informational is
     lost, since the headline/copy already carry the actual message. */
  .hero-visual { display: none; }

  .tool { padding: 32px 16px 72px; }
  .tool-panel { padding: 16px; }
  .tabs { flex-direction: column; }
  .tab-btn { width: 100%; }
}