:root{
    --bt-primary:#3525cd;
    --bt-primary-dark:#2a1ca8;
    --bt-secondary:#6b38d4;
    --bt-bg:#faf8ff;
    --bt-surface:#ffffff;
    --bt-surface-alt:#f2f3ff;
    --bt-surface-high:#e2e7ff;
    --bt-text:#131b2e;
    --bt-text-muted:#5a5972;
    --bt-border:#dfe0ee;
    --bt-error:#ba1a1a;
  }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--bt-bg);
    color:var(--bt-text);
    font-family:'Inter',sans-serif;
    padding-top:80px;
  }
  h1,h2,h3,h4,.font-display{ font-family:'Plus Jakarta Sans',sans-serif; }
  .mono{ font-family:'JetBrains Mono',monospace; }

  /* ---- Brand color overrides on top of Bootstrap ---- */
  .btn-primary{ background-color:var(--bt-primary); border-color:var(--bt-primary); }
  .btn-primary:hover, .btn-primary:focus{ background-color:var(--bt-primary-dark); border-color:var(--bt-primary-dark); }
  .btn-outline-primary{ color:var(--bt-primary); border-color:var(--bt-primary); }
  .btn-outline-primary:hover{ background-color:var(--bt-primary); border-color:var(--bt-primary); }
  .text-primary{ color:var(--bt-primary) !important; }
  .text-secondary-brand{ color:var(--bt-secondary) !important; }
  .bg-primary{ background-color:var(--bt-primary) !important; }
  .bg-primary-subtle-brand{ background-color:rgba(53,37,205,0.08) !important; }
  .border-primary{ border-color:var(--bt-primary) !important; }
  .bg-brand-gradient{ background:linear-gradient(135deg,var(--bt-primary),var(--bt-secondary)); }
  .text-muted{ color:var(--bt-text-muted) !important; }
  .bg-surface{ background-color:var(--bt-surface); }
  .bg-surface-alt{ background-color:var(--bt-surface-alt); }
  .bg-surface-high{ background-color:var(--bt-surface-high); }
  .rounded-4x{ border-radius:1.25rem; }
  .shadow-soft{ box-shadow:0 10px 30px rgba(79,70,229,0.08); }
  .shadow-soft-lg{ box-shadow:0 20px 50px rgba(15,23,42,0.15); }

  /* ---- Navbar ---- */
  .navbar-glass{
    background:rgba(250,248,255,0.85);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
  .nav-link-brand{ color:var(--bt-text-muted); font-weight:600; }
  .nav-link-brand.active, .nav-link-brand:hover{ color:var(--bt-primary); }
  .brand-badge{
    width:40px; height:40px; border-radius:12px;
    background:linear-gradient(135deg,var(--bt-primary),var(--bt-secondary));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1.1rem;
  }

  /* ---- Hover / reveal ---- */
  .card-hover{ transition:transform .25s ease, box-shadow .25s ease; }
  .card-hover:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(79,70,229,0.12); }

  @keyframes fadeInUp{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }
  .reveal{ opacity:0; animation:fadeInUp .6s ease forwards; }

  @keyframes popIn{ from{opacity:0; transform:scale(.92) translateY(10px);} to{opacity:1; transform:scale(1) translateY(0);} }
  .modal-pop{ animation:popIn .3s cubic-bezier(.16,1,.3,1) forwards; }

  @keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-3px);} 75%{transform:translateX(3px);} }
  .shake{ animation:shake .15s ease; }

  /* ---- Typing widget ---- */
  #typing-app{ position:relative; }
  #typing-area{ position:relative; overflow:hidden; cursor:text; background:var(--bt-bg); border:1px solid var(--bt-border); }
  #text-scroll{ position:relative; overflow:hidden; height:100px; scroll-behavior:smooth; }
  #text-display{ font-size:1.15rem; line-height:1.7; letter-spacing:.01em; user-select:none; }
  #typing-input{
    position:absolute; inset:0; width:100%; height:100%;
    opacity:0; border:none; outline:none; resize:none; cursor:text; background:transparent;
  }
  #start-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-end; padding:.75rem; transition:opacity .3s ease; pointer-events:none; }
  .active-word{ background-color:rgba(107,56,212,0.12); border-radius:4px; padding:0 2px; }
  .correct{ color:var(--bt-primary); }
  .incorrect{ color:var(--bt-error); text-decoration:underline; text-decoration-color:rgba(186,26,26,.5); }
  .untyped{ color:#8b899c; }
  #progress-bar{ transition:width .3s ease; height:6px; }

  #result-modal{
    position:fixed; inset:0; z-index:1050; display:none;
    align-items:center; justify-content:center; padding:1rem;
  }
  #result-modal.is-visible{ display:flex; }
  #modal-backdrop{ position:absolute; inset:0; background:rgba(19,27,46,.45); backdrop-filter:blur(2px); }

  .stat-box{ background:var(--bt-surface-alt); border-radius:14px; padding:1rem; text-align:center; }
  .icon-tile{ width:56px; height:56px; border-radius:14px; background:rgba(53,37,205,.08); display:flex; align-items:center; justify-content:center; }
  .icon-tile i{ color:var(--bt-primary); font-size:1.4rem; }

  .accordion-button:not(.collapsed){ color:var(--bt-primary); background-color:var(--bt-surface-alt); box-shadow:none; }
  .accordion-button:focus{ box-shadow:none; border-color:var(--bt-border); }

  footer a{ color:var(--bt-text-muted); text-decoration:none; }
  footer a:hover{ color:var(--bt-primary); }

  .section-py{ padding:5rem 0; }
  @media (max-width:768px){ .section-py{ padding:3rem 0; } }

  .duration-pill{
    padding:.4rem 1rem; border-radius:999px; font-weight:600; font-size:.85rem;
    background:var(--bt-surface-alt); color:var(--bt-text-muted); border:1px solid var(--bt-border);
    text-decoration:none; display:inline-flex; align-items:center; gap:.35rem;
  }
  .duration-pill:hover{ background:var(--bt-primary); color:#fff; border-color:var(--bt-primary); }

  @media (min-width:768px){
    .nav-hover-dropdown .dropdown-menu{ display:block; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .15s ease, transform .15s ease, visibility .15s; margin-top:.5rem; }
    .nav-hover-dropdown:hover .dropdown-menu{ opacity:1; visibility:visible; transform:translateY(0); }
  }
  .dropdown-item:hover, .dropdown-item:focus{ background-color:var(--bt-surface-alt); color:var(--bt-primary); }

  .col-fifth{ flex:0 0 auto; width:50%; }
  @media (min-width:576px){ .col-fifth{ width:33.333%; } }
  @media (min-width:992px){ .col-fifth{ width:20%; } }