/* ── BTC Lottery — About Page Stylesheet ── */

    :root {
      --btc: #f7931a;
      --btc-light: #ffb347;
      --bg: #050508;
    }

    * { font-family: 'Inter', sans-serif; }

    body {
      background-color: var(--bg);
      background-image:
        linear-gradient(rgba(247,147,26,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(247,147,26,0.025) 1px, transparent 1px);
      background-size: 40px 40px;
      color: #fff;
      min-height: 100vh;
    }

    /* BG blobs */
    .blob-orange {
      position: fixed; top: -200px; right: -100px;
      width: 600px; height: 600px; border-radius: 50%;
      background: radial-gradient(circle, rgba(247,147,26,0.1), transparent 70%);
      filter: blur(80px); pointer-events: none; z-index: 0;
    }
    .blob-blue {
      position: fixed; bottom: 0; left: -100px;
      width: 400px; height: 400px; border-radius: 50%;
      background: radial-gradient(circle, rgba(79,195,247,0.06), transparent 70%);
      filter: blur(80px); pointer-events: none; z-index: 0;
    }

    /* Navbar */
    .navbar {
      background: rgba(5,5,8,0.85) !important;
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .brand-icon { font-size: 1.5rem; color: var(--btc); filter: drop-shadow(0 0 10px rgba(247,147,26,0.5)); }
    .brand-name { font-family: 'Rajdhani', sans-serif; font-weight: 900; font-size: 1.1rem; letter-spacing: 3px; color: var(--btc); line-height: 1; }
    .brand-sub  { font-size: 9px; letter-spacing: 3px; color: rgba(247,147,26,0.4); font-weight: 600; }

    .nav-link-custom {
      font-size: 12px; font-weight: 600; letter-spacing: 1px;
      text-transform: uppercase; text-decoration: none;
      color: rgba(255,255,255,0.3);
      transition: color 0.2s;
      padding: 4px 2px;
      border-bottom: 2px solid transparent;
    }
    .nav-link-custom:hover  { color: rgba(255,255,255,0.7); }
    .nav-link-custom.active { color: var(--btc); border-bottom-color: var(--btc); }

    /* Content layout */
    main { position: relative; z-index: 1; }

    /* Hero */
    .page-hero {
      text-align: center;
      padding: 72px 0 56px;
      border-bottom: 1px solid rgba(247,147,26,0.08);
      margin-bottom: 64px;
    }
    .page-hero-tag {
      display: inline-block;
      font-size: 10px; font-weight: 700; letter-spacing: 3px;
      text-transform: uppercase; color: rgba(247,147,26,0.6);
      border: 1px solid rgba(247,147,26,0.2);
      background: rgba(247,147,26,0.06);
      border-radius: 100px; padding: 4px 14px; margin-bottom: 20px;
    }
    .page-hero h1 {
      font-family: 'Rajdhani', sans-serif; font-weight: 900;
      font-size: clamp(2.5rem, 6vw, 4rem);
      line-height: 1.1;
      background: linear-gradient(135deg, #fff 0%, rgba(247,147,26,0.9) 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .page-hero p {
      font-size: 1.05rem; color: rgba(255,255,255,0.4);
      max-width: 520px; margin: 0 auto; line-height: 1.7;
    }

    /* Section headings */
    .section-label {
      font-size: 10px; font-weight: 700; letter-spacing: 3px;
      text-transform: uppercase; color: rgba(247,147,26,0.5);
      margin-bottom: 10px;
    }
    .section-title {
      font-family: 'Rajdhani', sans-serif; font-weight: 800;
      font-size: 1.8rem; color: #fff; margin-bottom: 16px; line-height: 1.2;
    }
    .section-body {
      color: rgba(255,255,255,0.45); line-height: 1.8; font-size: 15px;
    }

    /* Step cards */
    .step-card {
      background: rgba(247,147,26,0.03);
      border: 1px solid rgba(247,147,26,0.1);
      border-radius: 20px;
      padding: 28px;
      height: 100%;
      transition: border-color 0.25s, transform 0.25s;
      position: relative;
      overflow: hidden;
    }
    .step-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, var(--btc), transparent);
      opacity: 0; transition: opacity 0.3s;
    }
    .step-card:hover { border-color: rgba(247,147,26,0.3); transform: translateY(-4px); }
    .step-card:hover::before { opacity: 1; }

    .step-num {
      font-family: 'Rajdhani', sans-serif; font-weight: 900;
      font-size: 3rem; color: rgba(247,147,26,0.12); line-height: 1;
      position: absolute; top: 16px; right: 24px;
    }
    .step-icon {
      width: 48px; height: 48px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
      background: rgba(247,147,26,0.1);
      margin-bottom: 18px;
    }
    .step-title { font-weight: 700; font-size: 1rem; margin-bottom: 10px; color: #fff; }
    .step-body  { font-size: 13px; color: rgba(255,255,255,0.4); line-height: 1.7; }

    /* Code block */
    .code-block {
      background: rgba(0,0,0,0.5);
      border: 1px solid rgba(247,147,26,0.15);
      border-radius: 16px;
      padding: 24px 28px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 14px;
      line-height: 1.9;
      overflow-x: auto;
    }
    .code-comment { color: rgba(255,255,255,0.2); }
    .code-keyword { color: #c792ea; }
    .code-fn      { color: #82aaff; }
    .code-str     { color: #c3e88d; }
    .code-num     { color: #f78c6c; }
    .code-btc     { color: var(--btc); font-weight: 600; }

    /* Info boxes */
    .info-box {
      border-radius: 16px;
      padding: 24px 28px;
    }
    .info-box-green  { background: rgba(34,197,94,0.06);  border: 1px solid rgba(34,197,94,0.15); }
    .info-box-orange { background: rgba(247,147,26,0.06); border: 1px solid rgba(247,147,26,0.15); }
    .info-box-red    { background: rgba(239,68,68,0.06);  border: 1px solid rgba(239,68,68,0.15); }
    .info-box-blue   { background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.15); }

    .info-box-icon { font-size: 1.4rem; margin-bottom: 12px; }
    .info-box-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
    .info-box-body  { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.7; }

    /* FAQ */
    .faq-item {
      border-bottom: 1px solid rgba(255,255,255,0.06);
      padding: 20px 0;
    }
    .faq-item:last-child { border-bottom: none; }
    .faq-q { font-weight: 600; font-size: 15px; color: rgba(255,255,255,0.85); margin-bottom: 8px; }
    .faq-a { font-size: 14px; color: rgba(255,255,255,0.4); line-height: 1.7; }

    /* Divider */
    .section-divider { border: none; border-top: 1px solid rgba(247,147,26,0.08); margin: 64px 0; }

    /* Highlight text */
    .text-btc       { color: var(--btc); }
    .text-btc-light { color: var(--btc-light); }

    /* Comparison table */
    .compare-table { border-collapse: separate; border-spacing: 0; width: 100%; }
    .compare-table th {
      font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
      text-transform: uppercase; color: rgba(255,255,255,0.3);
      padding: 10px 16px; background: rgba(255,255,255,0.03);
    }
    .compare-table th:first-child { border-radius: 10px 0 0 0; }
    .compare-table th:last-child  { border-radius: 0 10px 0 0; }
    .compare-table td {
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      font-size: 14px; color: rgba(255,255,255,0.5);
    }
    .compare-table td:first-child { color: rgba(255,255,255,0.75); font-weight: 500; }
    .compare-table .yes { color: #4ade80; font-weight: 600; }
    .compare-table .no  { color: #f87171; font-weight: 600; }
    .compare-table tr:last-child td { border-bottom: none; }

    /* Footer */
    footer {
      border-top: 1px solid rgba(255,255,255,0.05);
      padding: 40px 0;
      text-align: center;
      color: rgba(255,255,255,0.2);
      font-size: 13px;
      position: relative; z-index: 1;
    }

    @keyframes pulse-slow {
      0%,100% { opacity: 1; }
      50%      { opacity: 0.55; }
    }
    .pulse-slow { animation: pulse-slow 2s ease-in-out infinite; }

    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .fade-in { animation: fade-in-up 0.6s ease both; }
    .fade-in-2 { animation: fade-in-up 0.6s 0.15s ease both; }
    .fade-in-3 { animation: fade-in-up 0.6s 0.3s ease both; }