/* ---------- Design Tokens ---------- */
:root{
    --bg: #f7f7f7;
    --layer: #ffffff;
    --ink: #0b1220;
    --muted: #6b7280;
  
    --brand: #10b981;       /* emerald-500 */
    --brand-ink: #064e3b;   /* emerald-900 */
  
    --border: rgba(0,0,0,.08);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 6px 18px rgba(0,0,0,.08);
  
    --radius: 14px;
  
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-20: 5rem;
  }
  
  @media (prefers-color-scheme: dark){
    :root{
      --bg: #0b1220;
      --layer: #0f172a;
      --ink: #e5e7eb;
      --muted: #9ca3af;
      --border: rgba(255,255,255,.1);
      --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
      --shadow-md: 0 10px 30px rgba(0,0,0,.5);
    }
  }
  
  /* ---------- Resets ---------- */
  *{ box-sizing: border-box; margin:0; padding:0; }
  html,body{ height: 100%; }
  body{
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
  }
  
  /* Links */
  a{ color: inherit; text-decoration: none; }
  a:focus-visible,
  button:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px rgba(16,185,129,.35);
    border-radius: 10px;
  }
  
  /* Containers */
  .container{
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: var(--space-4);
  }
  
  /* ---------- Header & Nav ---------- */
  .site-header{
    position: sticky; top:0; z-index:10;
    background: var(--layer);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
  }
  .nav-container{
    display:flex; align-items:center; justify-content:space-between;
    padding-block: .75rem;
  }
  .logo{
    font-weight: 700; font-size: 1.25rem;
    color: var(--ink);
  }
  .nav-list{ list-style:none; display:flex; gap: var(--space-6); }
  .nav-link{
    color: var(--muted); font-weight:600; padding:.5rem .25rem; border-radius:10px;
    transition: color .2s ease, background .2s ease;
  }
  .nav-link:hover{ color: var(--ink); background: rgba(0,0,0,.04); }
  .nav-link.is-active{ color: var(--brand-ink); background: rgba(16,185,129,.12); }
  
  /* ---------- Hero ---------- */
  .hero{
    padding-block: clamp(3rem, 6vw, 6rem);
    background:
      radial-gradient(1200px 600px at 20% -20%, rgba(16,185,129,.15), transparent 60%),
      radial-gradient(1000px 400px at 120% 0%, rgba(16,185,129,.08), transparent 60%);
  }
  .hero-grid{
    display:grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-12);
  }
  @media (max-width: 900px){
    .hero-grid{ grid-template-columns: 1fr; }
  }
  .hero-copy h1{
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.1;
    font-weight: 700;
  }
  .lead{ margin-top: var(--space-4); color: var(--muted); font-size: 1.1rem; }
  .hero-ctas{ margin-top: var(--space-6); display:flex; gap: var(--space-4); flex-wrap:wrap; }
  .hero-points{ margin-top: var(--space-6); color: var(--muted); display:grid; gap: .25rem; }
  
  /* ---------- Hero Highlight Stat ---------- */
  /* ---------- Hero Highlight Stat ---------- */
  .hero-stat {
    font-size: 9rem;          /* ≈3× bigger than h1 (adjust as desired) */
    font-weight: 800;
    line-height: 1;
    color: var(--brand);
    margin-bottom: 0.25em;
    display: block;
    text-align: left;         /* or center if used in centered hero */
  }
  
  .hero-title {
    font-size: 3rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.1;
  }

  
  /* Hero visual (code card) */
  .code-card{
    background: var(--layer);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }
  .code-header{
    padding: .6rem .9rem;
    background: rgba(16,185,129,.08);
    color: var(--brand-ink);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
  }
  .code{
    padding: var(--space-6);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .9rem;
    color: var(--ink);
    overflow:auto;
  }
  .result-bar{
    display:flex; justify-content:space-between; align-items:center;
    gap: var(--space-4);
    padding: .75rem .9rem;
    border-top: 1px solid var(--border);
    background: linear-gradient(to right, rgba(16,185,129,.08), transparent);
  }
  .metric .label{ display:block; font-size:.75rem; color: var(--muted); }
  .metric .value{ font-weight:700; }
  
  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    border-radius: 999px; font-weight:600; padding: .75rem 1rem;
    transition: transform .04s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    border: 1px solid transparent;
  }
  .btn:active{ transform: translateY(1px); }
  .btn-primary{
    background: var(--brand); color: #fff; border-color: rgba(16,185,129,.2);
    box-shadow: 0 8px 24px rgba(16,185,129,.25);
  }
  .btn-primary:hover{ background: #0ea472; }
  .btn-ghost{
    background: transparent; color: var(--ink); border-color: var(--border);
  }
  .btn-ghost:hover{ background: rgba(0,0,0,.04); }
  .btn-small{ padding: .45rem .75rem; font-size: .9rem; }
  
  /* ---------- Sections ---------- */
  section{ padding-block: var(--space-20); }
  h2{
    text-align:center; font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    margin-bottom: var(--space-12);
  }
  
  /* What it is */
  .what-it-is{
    background: linear-gradient(180deg, transparent, rgba(16,185,129,.06));
  }
  .info-cards{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
  }
  @media (max-width: 900px){
    .info-cards{ grid-template-columns: 1fr; }
  }
  .card{
    background: var(--layer); border:1px solid var(--border); border-radius: var(--radius);
    padding: var(--space-8); text-align:center; box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .card img{ width:60px; height:60px; margin-bottom: var(--space-4); }
  .card h3{ font-size:1.25rem; margin-bottom: .25rem; }
  .card p{ color: var(--muted); }
  
  /* Features */
  .features{ background: var(--bg); }
  .features-grid{
    display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6);
  }
  @media (max-width: 900px){
    .features-grid{ grid-template-columns: 1fr; }
  }
  .feature-bubble{
    background: var(--layer); border:1px solid var(--border); border-radius: calc(var(--radius) + 6px);
    padding: var(--space-8); text-align:center; box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .feature-bubble:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .feature-bubble img{
    width: 140px; max-width: 40%; border-radius: 10px; margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
  }
  .feature-text h3{ font-size:1.3rem; margin-bottom:.25rem; }
  .feature-text p{ color: var(--muted); }
  
  /* Downloads */
  .downloads{
    background:
      radial-gradient(800px 300px at 10% 0%, rgba(16,185,129,.12), transparent 60%),
      var(--layer);
    text-align:center; border-top: 1px solid var(--border);
  }
  .downloads p{ color: var(--muted); margin-bottom: var(--space-6); }
  
  /* ---------- Footer ---------- */
  footer{
    background: var(--layer);
    border-top: 1px solid var(--border);
    padding-block: var(--space-8);
    color: var(--muted);
  }
  .footer-container{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-6); flex-wrap:wrap; }
  .footer-logo{ font-weight:700; color: var(--ink); }
  .footer-links{ display:flex; gap: var(--space-4); flex-wrap:wrap; }
  .footer-links a{ color: var(--muted); }
  .footer-links a:hover{ color: var(--ink); }
  .social-links{ display:flex; gap: var(--space-4); }
  .social-icon{ color: var(--muted); }
  .social-icon:hover{ color: var (--ink); }
  
  /* ---------- Utilities ---------- */
  .hidden{ display:none !important; }

/* Demo Video Section */
.demo-video {
    padding: 50px 20px;
    background: var(--bg); /* Use the same background as the rest of the page */
    text-align: center;
}

.demo-video h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--ink); /* Ensure text color matches the rest of the page */
}

.demo-video p {
    font-size: 1rem;
    color: var(--muted); /* Use the muted text color for consistency */
    margin-bottom: 30px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    border-radius: var(--radius); /* Use the same border radius as other sections */
    box-shadow: var(--shadow-md); /* Add a subtle shadow for consistency */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 1000;
  
    /* Flexbox centering */
    display: flex;
    justify-content: center;
    align-items: center;
  }

.modal-content {
    background: var(--layer);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    text-align: center;
    max-width: 500px;
    width: 90%;
    position: relative; /* For positioning close button, if needed */
  
    /* Optional: subtle entry animation */
    transform: translateY(0);
    animation: fadeIn 0.2s ease;
  }

.modal-content h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--ink);
}

.modal-content p {
  font-size: 1rem;
  color: var (--muted);
}

.modal-content a {
  color: var(--brand);
  text-decoration: underline;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--muted);
  cursor: pointer;
}

/* Highlight Red for "burning" */
.highlight-red {
    color: #b91c1c; /* A darker, muted red that fits the UI */
}