/* ============================================
   DEVPATH — RETRO TERMINAL STYLE
   bg: #000  |  primary: limegreen  |  mono fonts
============================================ */

:root {
     --black: #000000;
     --green: #32ff00;
     --green-dim: #1a8c00;
     --green-glow: rgba(50, 255, 0, 0.15);
     --green-border: rgba(50, 255, 0, 0.35);
     --white: #e8ffe8;
     --gray: #444;
     --font-mono: 'Share Tech Mono', monospace;
     --font-body: 'Roboto', sans-serif;
}

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

html {
     scroll-behavior: smooth;
}

body {
     background-color: var(--black);
     color: var(--white);
     font-family: var(--font-body);
     overflow-x: hidden;
     position: relative;
}

/* SCANLINES */
.scanlines {
     pointer-events: none;
     position: fixed;
     inset: 0;
     z-index: 999;
     background: repeating-linear-gradient(to bottom,
               transparent,
               transparent 2px,
               rgba(0, 0, 0, 0.18) 2px,
               rgba(0, 0, 0, 0.18) 4px);
}

.accent {
     color: var(--green);
}

/* =====================
   HERO
===================== */
.hero {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 6rem 2rem 4rem;
     position: relative;
     background:
          radial-gradient(ellipse 60% 50% at 50% 60%, rgba(50, 255, 0, 0.07) 0%, transparent 70%),
          var(--black);
     border-bottom: 1px solid var(--green-border);
}

.hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image:
          linear-gradient(var(--green-border) 1px, transparent 1px),
          linear-gradient(90deg, var(--green-border) 1px, transparent 1px);
     background-size: 60px 60px;
     opacity: 0.07;
     pointer-events: none;
}

.hero__badge {
     font-family: var(--font-mono);
     font-size: 0.75rem;
     color: var(--green);
     letter-spacing: 0.3em;
     border: 1px solid var(--green-border);
     padding: 0.4rem 1.2rem;
     margin-bottom: 2rem;
     text-transform: uppercase;
}

.hero__title {
     font-family: var(--font-mono);
     font-size: clamp(2.8rem, 8vw, 7rem);
     line-height: 1.05;
     letter-spacing: -0.02em;
     color: var(--white);
     text-shadow: 0 0 40px rgba(50, 255, 0, 0.3);
     margin-bottom: 1.5rem;
}

.hero__sub {
     font-size: clamp(1rem, 2vw, 1.25rem);
     color: #aacfaa;
     max-width: 560px;
     line-height: 1.7;
     font-weight: 300;
     margin-bottom: 2rem;
}

.hero__cursor {
     color: var(--green);
     font-size: 2rem;
     animation: blink 1s step-start infinite;
}

@keyframes blink {

     0%,
     100% {
          opacity: 1;
     }

     50% {
          opacity: 0;
     }
}

/* =====================
   CARDS SECTION
===================== */
.cards-section {
     padding: 5rem 2rem 6rem;
     max-width: 1300px;
     margin: 0 auto;
}

.section-label {
     font-family: var(--font-mono);
     font-size: 0.8rem;
     color: var(--green-dim);
     letter-spacing: 0.2em;
     margin-bottom: 3rem;
}

.cards-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 2px;
}

/* CARD */
.card {
     background: #050f05;
     border: 1px solid var(--green-border);
     padding: 2.5rem 2rem;
     position: relative;
     display: flex;
     flex-direction: column;
     gap: 1rem;
     transition: background 0.3s, box-shadow 0.3s;
     cursor: default;
}

.card:hover {
     background: #091409;
     box-shadow: 0 0 40px rgba(50, 255, 0, 0.12), inset 0 0 30px rgba(50, 255, 0, 0.03);
}

.card--featured {
     border-color: var(--green);
     box-shadow: 0 0 30px rgba(50, 255, 0, 0.2);
     background: #071207;
}

.card--featured:hover {
     box-shadow: 0 0 60px rgba(50, 255, 0, 0.3);
}

.card__index {
     font-family: var(--font-mono);
     font-size: 4rem;
     color: rgba(50, 255, 0, 0.08);
     line-height: 1;
     position: absolute;
     top: 1.2rem;
     right: 1.5rem;
     pointer-events: none;
     user-select: none;
}

.card__tag {
     font-family: var(--font-mono);
     font-size: 0.65rem;
     letter-spacing: 0.25em;
     color: var(--green);
     background: rgba(50, 255, 0, 0.08);
     border: 1px solid var(--green-border);
     display: inline-block;
     padding: 0.25rem 0.75rem;
     width: fit-content;
}

.card__tag--hot {
     color: #ffd700;
     background: rgba(255, 215, 0, 0.08);
     border-color: rgba(255, 215, 0, 0.3);
}

.card__title {
     font-family: var(--font-mono);
     font-size: clamp(1.4rem, 2.5vw, 1.8rem);
     line-height: 1.2;
     color: var(--white);
}

.card__desc {
     font-size: 0.95rem;
     color: #aacfaa;
     line-height: 1.75;
     font-weight: 300;
}

.card__divider {
     border: none;
     border-top: 1px solid var(--green-border);
     margin: 0.5rem 0;
}

.card__checklist-title {
     font-family: var(--font-mono);
     font-size: 0.72rem;
     color: var(--green-dim);
     letter-spacing: 0.2em;
     margin-bottom: 0.5rem;
}

/* CHECKLIST */
.checklist {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 0.55rem;
     flex: 1;
}

.checklist li {
     font-family: var(--font-mono);
     font-size: 0.82rem;
     color: #c5e8c5;
     line-height: 1.4;
     display: flex;
     gap: 0.5rem;
     align-items: flex-start;
     transition: color 0.2s;
}

.checklist li:hover {
     color: var(--green);
}

.check {
     color: var(--green);
     flex-shrink: 0;
     margin-top: 0.05rem;
}

/* CARD FOOTER */
.card__footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
     margin-top: auto;
     padding-top: 1.5rem;
     border-top: 1px solid var(--green-border);
     flex-wrap: wrap;
}

.card__price {
     font-family: var(--font-mono);
     font-size: 1.6rem;
     color: var(--green);
     text-shadow: 0 0 15px rgba(50, 255, 0, 0.5);
}

/* BUTTONS */
.btn {
     font-family: var(--font-mono);
     font-size: 0.75rem;
     letter-spacing: 0.1em;
     color: var(--black);
     background: var(--green);
     padding: 0.65rem 1.25rem;
     text-decoration: none;
     display: inline-block;
     transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
     border: none;
     cursor: pointer;
}

.btn:hover {
     background: #6fff4a;
     box-shadow: 0 0 20px rgba(50, 255, 0, 0.6);
     transform: translateY(-1px);
}

.btn--outline {
     background: transparent;
     color: var(--green);
     border: 1px solid var(--green);
}

.btn--outline:hover {
     background: var(--green-glow);
     color: var(--green);
     box-shadow: 0 0 20px rgba(50, 255, 0, 0.4);
}

/* =====================
   SAMPLES BAR
===================== */
.samples-bar {
     margin-top: 3rem;
     padding: 1.25rem 1.75rem;
     border: 1px solid var(--green-border);
     background: #020a02;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
     flex-wrap: wrap;
}

.samples-bar__label {
     font-family: var(--font-mono);
     font-size: 0.75rem;
     color: var(--green-dim);
     letter-spacing: 0.2em;
}

.samples-bar__link {
     font-family: var(--font-mono);
     font-size: 0.82rem;
     color: var(--green);
     text-decoration: none;
     letter-spacing: 0.05em;
     border-bottom: 1px solid var(--green-border);
     padding-bottom: 1px;
     transition: color 0.2s, border-color 0.2s;
}

.samples-bar__link:hover {
     color: #6fff4a;
     border-color: var(--green);
}

/* =====================
   PROOF BAR
===================== */
.proof-bar {
     border-top: 1px solid var(--green-border);
     border-bottom: 1px solid var(--green-border);
     padding: 1.25rem 2rem;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     gap: 0.75rem;
     background: #020a02;
}

.proof-bar span {
     font-family: var(--font-mono);
     font-size: 0.78rem;
     letter-spacing: 0.15em;
     color: var(--green-dim);
}

.proof-bar .sep {
     color: rgba(50, 255, 0, 0.2);
}

/* =====================
   FOOTER
===================== */
.footer {
     padding: 3rem 2rem;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
}

.footer__text {
     font-family: var(--font-mono);
     font-size: 0.75rem;
     color: var(--green-dim);
     letter-spacing: 0.15em;
}

.footer__links {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     font-family: var(--font-mono);
     font-size: 0.75rem;
}

.footer__link {
     color: var(--green-dim);
     text-decoration: none;
     transition: color 0.2s;
}

.footer__link:hover {
     color: var(--green);
}

.footer__sep {
     color: var(--green-border);
}

.footer__blink {
     font-family: var(--font-mono);
     color: var(--green);
     animation: blink 1s step-start infinite;
}

/* =====================
   RESPONSIVE
===================== */
@media (max-width: 720px) {
     .cards-grid {
          gap: 1px;
     }

     .card {
          padding: 2rem 1.5rem;
     }

     .card__footer {
          flex-direction: column;
          align-items: flex-start;
     }

     .btn {
          width: 100%;
          text-align: center;
     }

     .samples-bar {
          flex-direction: column;
          align-items: flex-start;
     }
}