:root{
    --green: #ADD786;
    --green-dim: #8fbf63;
    --dark: #290611;
    --dark-2: #3a0d1c;
    --gray: #F3F2F0;
    --gray-2: #E4E2DE;
    --white: #FFFFFF;
    --ink: #2b2b28;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --sans: 'Manrope', -apple-system, sans-serif;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}

  body{
    font-family:var(--sans);
    background:var(--gray);
    color:var(--ink);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  ::selection{ background:var(--green); color:var(--dark); }

  /* ===== Background noise / grid texture ===== */
  .noise-grid{
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(173,215,134,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(173,215,134,0.06) 1px, transparent 1px);
    background-size: 42px 42px;
    pointer-events:none;
  }

  /* ===== HERO ===== */
  .hero{
    position:relative;
    background: radial-gradient(120% 90% at 15% 0%, var(--dark-2) 0%, var(--dark) 55%, #1c040b 100%);
    color:var(--white);
    padding: 28px 6vw 90px;
    overflow:hidden;
    border-bottom-left-radius: 64px;
    border-bottom-right-radius: 64px;
  }

  .glow{
    position:absolute;
    width:520px; height:520px;
    background: radial-gradient(circle, rgba(173,215,134,0.35) 0%, rgba(173,215,134,0) 70%);
    border-radius:50%;
    filter: blur(10px);
    pointer-events:none;
  }
  .glow-1{ top:-220px; right:-140px; }
  .glow-2{ bottom:-260px; left:-160px; width:420px; height:420px; opacity:.6; }

  /* fake terminal top bar */
  

  .hero-inner{
    position:relative; z-index:2;
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns: 1.3fr 1fr;
    gap:48px;
    align-items:center;
  }

  .eyebrow{
    font-family:var(--mono);
    font-size:13px;
    color:var(--green);
    letter-spacing:.15em;
    text-transform:uppercase;
    display:flex; align-items:center; gap:10px;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:"";
    width:26px; height:1px;
    background:var(--green);
    display:inline-block;
  }

  .hero h1{
    font-family:var(--mono);
    font-weight:800;
    font-size:clamp(2.4rem, 5.2vw, 4.2rem);
    line-height:1.05;
    letter-spacing:-.01em;
  }
  .hero h1 .muted{ color: rgba(255,255,255,0.38); }
  .cursor{
    display:inline-block;
    width:.5ch;
    background:var(--green);
    margin-left:4px;
    animation: blink 1.05s step-end infinite;
  }
  @keyframes blink{ 50%{ opacity:0; } }

  .hero p.lead{
    margin-top:22px;
    font-size:1.05rem;
    line-height:1.7;
    color: rgba(255,255,255,0.68);
    max-width:46ch;
  }

  .hero-stats{
    margin-top:34px;
    display:flex;
    gap:34px;
    flex-wrap:wrap;
  }
  .hero-stats .stat b{
    display:block;
    font-family:var(--mono);
    font-size:1.6rem;
    color:var(--green);
  }
  .hero-stats .stat span{
    font-size:12.5px;
    color: rgba(255,255,255,0.5);
    letter-spacing:.03em;
  }

  /* console card on the right */
  .console{
    position:relative;
    background: rgba(255,255,255,0.035);
    border:1px solid rgba(173,215,134,0.2);
    border-radius:22px;
    padding:22px 22px 26px;
    font-family:var(--mono);
    font-size:13px;
    line-height:1.85;
    color: rgba(255,255,255,0.75);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55);
  }
  .console .line .k{ color:var(--green); }
  .console .line .s{ color:#f0d9b5; }
  .console .line .c{ color: rgba(255,255,255,0.4); }
  .console .prompt{ color:var(--green); margin-right:6px; }

  /* ===== SCROLL CUE ===== */
  .scrollcue{
    display:flex;
    justify-content:center;
    margin-top: -46px;
    position:relative;
    z-index:3;
  }
  .scrollcue a{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--white);
    color:var(--dark);
    font-family:var(--mono);
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-decoration:none;
    padding:14px 24px;
    border-radius:9px;
    box-shadow: 0 16px 34px -12px rgba(41,6,17,0.35);
    border:1px solid var(--gray-2);
    animation: floaty 2.6s ease-in-out infinite;
  }
  .scrollcue svg{ width:14px; height:14px; }
  @keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

  /* ===== STACK SECTION ===== */
  .stack{
    max-width:1180px;
    margin: 90px auto 0;
    padding: 0 6vw 120px;
  }

  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:36px;
    flex-wrap:wrap;
  }
  .section-head h2{
    font-family:var(--mono);
    font-size:clamp(1.5rem, 3vw, 2.1rem);
    color:var(--dark);
  }
  .section-head h2 span{ color: var(--green-dim); }
  .section-head p{
    max-width:38ch;
    color:#6b6862;
    font-size:.95rem;
    line-height:1.6;
  }

  /* filter chips */
  .filters{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:38px;
  }
  .chip{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.03em;
    padding:9px 18px;
    border-radius:999px;
    border:1px solid var(--gray-2);
    background:var(--white);
    color:#6b6862;
    cursor:pointer;
    transition: all .25s ease;
    user-select:none;
  }
  .chip:hover{ border-color: var(--green); color:var(--dark); }
  .chip.active{
    background:var(--dark);
    border-color:var(--dark);
    color:var(--green);
  }

  /* grid */
  .grid{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap:20px;
  }

  .card{
    position:relative;
    background:var(--white);
    border:1px solid var(--gray-2);
    border-radius:20px;
    padding:26px 18px 22px;
    text-align:center;
    overflow:hidden;
    cursor:default;
    opacity:0;
    transform: translateY(26px);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
    transition-delay: var(--d, 0s);
  }
  .card.in-view{ opacity:1; transform: translateY(0); }

  .card::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(173,215,134,0.12), rgba(173,215,134,0) 55%);
    opacity:0;
    transition: opacity .35s ease;
  }
  .card:hover{
    transform: translateY(-8px);
    border-color: var(--green);
    box-shadow: 0 22px 40px -18px rgba(41,6,17,0.28);
  }
  .card:hover::before{ opacity:1; }

  .card-tag{
    position:absolute;
    top:14px; left:14px;
    font-family:var(--mono);
    font-size:9.5px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--green-dim);
    background: rgba(173,215,134,0.14);
    padding:4px 9px;
    border-radius:999px;
    font-weight:700;
  }

  .card-icon-wrap{
    width:76px; height:76px;
    margin: 18px auto 16px;
    border-radius:20px;
    background: var(--gray);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
    transition: transform .4s cubic-bezier(.2,.8,.2,1), background .35s ease;
  }
  .card:hover .card-icon-wrap{
    transform: rotate(-6deg) scale(1.08);
    background: #EAF4DF;
  }
  .card-icon{
    width:42px; height:42px;
    object-fit:contain;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.12));
  }

  .card-title{
    position:relative; z-index:1;
    font-family:var(--mono);
    font-size:14.5px;
    font-weight:700;
    color:var(--dark);
    margin-bottom:6px;
  }
  .card-blurb{
    position:relative; z-index:1;
    font-size:12px;
    color:#8a877f;
    line-height:1.5;
  }

  /* ===== FOOTER CTA ===== */
  /* .footer{
    background: var(--dark);
    color: rgba(255,255,255,0.75);
    padding: 70px 6vw 40px;
    border-top-left-radius:64px;
    border-top-right-radius:64px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .footer h3{
    font-family:var(--mono);
    color:var(--white);
    font-size:clamp(1.4rem,3vw,2rem);
    margin-bottom:14px;
  }
  .footer h3 span{ color:var(--green); }
  .footer p{
    max-width:50ch;
    margin:0 auto 30px;
    font-size:.95rem;
    line-height:1.6;
    color:rgba(255,255,255,0.5);
  }
  .footer .signature{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color: rgba(255,255,255,0.35);
    margin-top:50px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,0.08);
  }
  .footer .signature b{ color:var(--green); } */

  /* ===== RESPONSIVE ===== */
  @media (max-width: 980px){
    .hero-inner{ grid-template-columns:1fr; }
    .grid{ grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 640px){
    .hero{ padding: 24px 6vw 70px; border-radius:0 0 40px 40px;}
    .termbar{ flex-wrap:wrap; gap:10px; }
    .grid{ grid-template-columns: repeat(2, 1fr); }
    /* .footer{ border-radius:40px 40px 0 0; } */
    .section-head{ align-items:flex-start; flex-direction:column; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  }

  :focus-visible{
    outline: 2px solid var(--green);
    outline-offset: 3px;
  }