:root {
      --blue: #00b4fa;
      --sand: #e7d7b6;
      --bg-dark: #10151b;
      --card-bg: #192332e6;
      --glow: 0 0 24px #00b4fa55, 0 2px 32px #00b4fa33;
      --shine-grad: linear-gradient(90deg, #fff 8%, #00b4fa 60%, #23e6ff 98%);
    }
    body {
      margin: 0; padding: 0;
      font-family: 'Share Tech Mono', monospace;
      background: var(--bg-dark) url('https://e1.pxfuel.com/desktop-wallpaper/767/930/desktop-wallpaper-printed-circuit-board-video-motherboard-blue-and-purple-digital-circuit-board-background.jpg') no-repeat center center fixed;
      background-size: cover;
      min-height: 100vh;
      color: var(--sand);
      overflow-x: hidden;
      position: relative;
    }
    body::before {
      content: "";
      position: fixed; top:0; left:0; right:0; bottom:0;
      background: linear-gradient(115deg, #0c0c10bb 0%, #191a24b7 90%);
      z-index: 0;
      pointer-events: none;
      opacity: 0.85;
      mix-blend-mode: multiply;
    }
    .story-main {
      max-width: 900px;
      margin: 0 auto;
      padding: 46px 6vw 28px 6vw;
      z-index: 2;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 36px;
    }
    .story-logo {
      width: 120px;
      border-radius: 22px;
      box-shadow: var(--glow);
      border: 2px solid #00b4fa44;
      margin: 0 auto 18px auto;
      display: block;
      background: #161922;
    }
    .story-headline {
      font-size: 2.1rem;
      font-weight: bold;
      letter-spacing: 1.2px;
      margin-bottom: 18px;
      background: var(--shine-grad);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0 2px 18px #22213866, 0 0 8px #00b4fa88;
      filter: brightness(1.19);
      text-transform: uppercase;
      text-align: center;
    }
    .story-highlight {
      background: var(--card-bg);
      border-radius: 16px;
      box-shadow: var(--glow);
      border: 2px solid #00b4fa44;
      padding: 32px 22px 22px 22px;
      font-size: 1.13em;
      color: #fff;
      font-weight: bold;
      margin-bottom: 0;
      transition: transform .15s, box-shadow .2s;
      margin-top: 0;
      text-align: left;
      line-height: 1.6;
    }
    .story-section-title {
      font-size: 1.32em;
      margin-bottom: 13px;
      background: var(--shine-grad);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0 2px 18px #00b4fa66, 0 0 8px #00315599;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1.1px;
    }
    .story-reasons-list {
      margin-top: 15px;
      margin-bottom: 0;
      padding-left: 20px;
      color: #23e6ff;
      font-size: 1.04em;
    }
    .story-cards-row {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      margin-top: 20px;
      margin-bottom: 20px;
      justify-content: center;
    }
    .story-card {
      background: #181a2aee;
      border-radius: 14px;
      box-shadow: 0 4px 20px #00b4fa33;
      border: 2px solid #00b4fa22;
      padding: 20px 18px;
      min-width: 210px;
      max-width: 340px;
      flex: 1 1 230px;
      font-size: 1.07em;
      color: #e7d7b6;
      font-weight: bold;
      margin-bottom: 0;
      text-align: center;
      transition: transform .12s, box-shadow .17s;
    }
    .story-card i {
      font-size: 1.6em;
      color: var(--blue);
      margin-bottom: 10px;
      filter: drop-shadow(0 2px 10px #00b4fa44);
      display: block;
    }
    .story-card-title {
      color: #00b4fa;
      font-weight: bold;
      font-size: 1.07em;
      margin-bottom: 8px;
    }
    .story-card-desc {
      font-size: 0.98em;
      color: #e7d7b6;
    }
    .story-btn-row {
      margin-top: 32px;
      text-align: center;
    }
    .buy-btn {
      background: linear-gradient(90deg, #00b4fa 10%, #00ffd0 90%);
      color: #181a1b;
      font-family: 'Share Tech Mono', monospace;
      border: none;
      border-radius: 14px;
      padding: 14px 36px;
      font-size: 1.16em;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 6px 32px #00b4fa22;
      transition: background .18s, color .17s, transform .13s;
      letter-spacing: 1px;
      margin-top: 0;
      min-width: 180px;
      outline: none;
      display: inline-block;
    }
    .buy-btn:hover {
      background: #e7d7b6;
      color: #002a37;
      transform: scale(1.045);
    }
    .back-link-bottom {
      display: inline-block;
      margin: 36px auto 8px auto;
      color: var(--blue);
      font-size: 1.09em;
      font-family: 'Share Tech Mono', monospace;
      font-weight: bold;
      text-decoration: none;
      background: #172432b3;
      padding: 10px 24px 10px 16px;
      border-radius: 16px;
      box-shadow: 0 2px 15px #00b4fa33;
      transition: background .16s, color .13s;
      letter-spacing: 1.1px;
      text-align: center;
    }
    .back-link-bottom i {
      margin-right: 7px;
      font-size: 1.09em;
    }
    .back-link-bottom:hover {
      background: #e7d7b6;
      color: #003a5c;
      text-decoration: underline;
    }
    @media (max-width:700px) {
      .story-main { padding: 20px 2vw 18px 2vw; }
      .story-logo { width: 68vw; min-width:100px; }
      .story-headline { font-size: 1.27em;}
      .story-cards-row { flex-direction: column; gap: 18px; }
      .story-card { max-width: 98vw; min-width:unset; }
    }


.reveal-card { opacity: 0; transform: translateY(20px); }
.reveal-card.is-visible { opacity: 1; transform: translateY(0); }
.page-footer { text-align: center; color: #e7d7b6; padding: 18px 0 8px; }