*,
*::before,
*::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}

html {
     scroll-behavior: smooth;
     font-size: 16px;
}

body {
     background: #060a06;
     color: #d8ecd0;
     font-family: 'Inter', sans-serif;
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
}

body::before {
     content: '';
     position: fixed;
     inset: 0;
     background: repeating-linear-gradient(0deg,
               transparent,
               transparent 2px,
               rgba(0, 0, 0, 0.03) 2px,
               rgba(0, 0, 0, 0.03) 4px);
     pointer-events: none;
     z-index: 1;
}

/* ─── GLOWS ──────────────────────────────────────── */

.hero-glow {
     position: absolute;
     top: -160px;
     right: -120px;
     width: 600px;
     height: 600px;
     background: radial-gradient(ellipse at center, rgba(110, 227, 74, 0.12) 0%, transparent 70%);
     pointer-events: none;
}

.hero-glow-left {
     position: absolute;
     bottom: 0;
     left: -140px;
     width: 440px;
     height: 440px;
     background: radial-gradient(ellipse at center, rgba(110, 227, 74, 0.06) 0%, transparent 70%);
     pointer-events: none;
}

/* ─── ANIMATIONS ─────────────────────────────────── */

@keyframes float {

     0%,
     100% {
          transform: translateY(0px) rotate(-2deg);
     }

     50% {
          transform: translateY(-10px) rotate(-2deg);
     }
}

.book-float {
     animation: float 5s ease-in-out infinite;
}

@keyframes fadeUp {
     from {
          opacity: 0;
          transform: translateY(18px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

.fade-up {
     animation: fadeUp 0.75s ease both;
}

.d1 {
     animation-delay: 0.05s;
}

.d2 {
     animation-delay: 0.15s;
}

.d3 {
     animation-delay: 0.28s;
}

.d4 {
     animation-delay: 0.42s;
}

.d5 {
     animation-delay: 0.58s;
}

@keyframes blink {

     0%,
     100% {
          opacity: 1;
     }

     50% {
          opacity: 0;
     }
}

/* ─── ATOMS ──────────────────────────────────────── */

.neon-line {
     display: block;
     width: 36px;
     height: 2px;
     background: #6ee34a;
     box-shadow: 0 0 8px #6ee34a;
     margin-bottom: 1.125rem;
}

.tag {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     border: 1px solid #1a2e18;
     background: #0c110c;
     border-radius: 3px;
     padding: 0.28rem 0.7rem;
     font-family: 'Space Mono', monospace;
     font-size: 0.65rem;
     letter-spacing: 0.08em;
     color: #4a5e45;
}

.tag-dot {
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: #6ee34a;
     box-shadow: 0 0 6px #6ee34a;
}

.cursor {
     display: inline-block;
     width: 2px;
     height: 1em;
     background: #6ee34a;
     vertical-align: text-bottom;
     margin-left: 2px;
     animation: blink 1s step-end infinite;
}

.divider {
     border: none;
     border-top: 1px solid #0f1c0e;
}

/* ─── TOC ────────────────────────────────────────── */

.toc-row {
     display: flex;
     align-items: flex-start;
     gap: 1.25rem;
     padding: 1rem 0;
     border-top: 1px solid #0f1c0e;
     transition: all 0.2s;
}

.toc-row:hover .toc-title {
     color: #6ee34a;
}

.toc-row:hover .toc-num {
     color: #6ee34a;
}

.toc-num {
     font-family: 'Space Mono', monospace;
     font-size: 0.68rem;
     color: #2a4028;
     min-width: 2rem;
     letter-spacing: 0.1em;
     transition: color 0.2s;
     padding-top: 0.25rem;
}

.toc-title {
     font-family: 'Syne', sans-serif;
     font-weight: 600;
     font-size: 1.1rem;
     color: #d8ecd0;
     transition: color 0.2s;
     line-height: 1.3;
}

.toc-sub {
     font-family: 'Space Mono', monospace;
     font-size: 0.7rem;
     color: #3a5038;
     margin-top: 0.25rem;
     letter-spacing: 0.03em;
     line-height: 1.6;
}

/* ─── PRICE CARD ─────────────────────────────────── */

.price-card {
     background: #0a0f0a;
     border: 1px solid #1a2e18;
     border-radius: 4px;
     position: relative;
     overflow: hidden;
}

.price-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, #6ee34a, transparent);
}

.price-card::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, #1a2e18, transparent);
}

/* ─── CTA BUTTON ─────────────────────────────────── */

.cta-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.7rem;
     background: #6ee34a;
     color: #060a06;
     font-family: 'Syne', sans-serif;
     font-weight: 700;
     font-size: 0.95rem;
     padding: 1rem 2rem;
     border-radius: 3px;
     text-decoration: none;
     letter-spacing: 0.02em;
     transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
     box-shadow: 0 0 18px rgba(110, 227, 74, 0.3);
     white-space: nowrap;
}

.cta-btn:hover {
     background: #88f060;
     box-shadow: 0 0 28px rgba(110, 227, 74, 0.5);
     transform: translateY(-1px);
}

.cta-btn:active {
     transform: translateY(0);
}

/* ─── CONTACT LINKS ──────────────────────────────── */

.contact-link {
     display: inline-flex;
     align-items: center;
     gap: 0.55rem;
     font-family: 'Space Mono', monospace;
     font-size: 0.78rem;
     letter-spacing: 0.05em;
     color: #3a5038;
     text-decoration: none;
     transition: color 0.2s;
}

.contact-link:hover {
     color: #6ee34a;
}

/* ─── MEDIA QUERIES ──────────────────────────────── */

/* Tablet – 768px+ */
@media (min-width: 768px) {
     .neon-line {
          width: 44px;
          margin-bottom: 1.375rem;
     }

     .toc-row {
          padding: 1.1rem 0;
          align-items: center;
     }

     .toc-num {
          font-size: 0.7rem;
          padding-top: 0;
     }

     .toc-title {
          font-size: 1.2rem;
     }

     .toc-sub {
          font-size: 0.76rem;
     }

     .contact-link {
          font-size: 0.82rem;
     }

     .cta-btn {
          font-size: 1rem;
          padding: 1.05rem 2.2rem;
     }
}

/* Desktop – 1024px+ */
@media (min-width: 1024px) {
     .neon-line {
          width: 52px;
          margin-bottom: 1.5rem;
     }

     .toc-row {
          padding: 1.2rem 0;
     }

     .toc-title {
          font-size: 1.3rem;
     }

     .toc-sub {
          font-size: 0.8rem;
     }

     .contact-link {
          font-size: 0.88rem;
     }

     .cta-btn {
          font-size: 1.05rem;
          padding: 1.1rem 2.4rem;
     }

     .price-card::before {
          height: 2px;
     }

     .hero-glow {
          width: 780px;
          height: 780px;
     }

     .hero-glow-left {
          width: 560px;
          height: 560px;
     }
}

/* Wide – 1280px+ */
@media (min-width: 1280px) {
     .toc-title {
          font-size: 1.4rem;
     }

     .cta-btn {
          font-size: 1.1rem;
          padding: 1.15rem 2.6rem;
     }
}