/* ==========================================================
   RYFT AIM - Website  |  Rift blue/purple theme
   ========================================================== */

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

:root {
  --bg:        #0a0a16;
  --surface:   #101024;
  --card:      #14143a;
  --border:    #1f1f45;
  --glow:      #6c5ce7;
  --blue:      #4fc3f7;
  --purple:    #9c27b0;
  --cyan:      #00e5ff;
  --text:      #e6e6ff;
  --dim:       #7a7aa0;
  --danger:    #ff4757;
  --success:   #2ed573;
  --grad:      linear-gradient(135deg, #4fc3f7 0%, #9c27b0 100%);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== HEADER ===== */
header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 2.5rem;
  background: rgba(10,10,22,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.logo { display:flex; align-items:center; gap:.7rem; }
.logo-box {
  width:38px; height:38px; border-radius:9px;
  background: var(--grad);
  display:grid; place-items:center;
  font-weight:900; font-size:1.15rem; color:#fff;
}
.logo span {
  font-size:1.3rem; font-weight:800;
  background: var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
nav { display:flex; gap:2rem; }
nav a { color:var(--dim); font-weight:600; font-size:.88rem; transition:color .2s; }
nav a:hover { color:var(--text); text-decoration:none; }

/* ===== HERO ===== */
.hero {
  text-align:center; padding:6rem 2rem 4rem;
  position:relative;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 60% at 50% 30%,rgba(79,195,247,.10),transparent);
  pointer-events:none;
}
.hero h1 {
  font-size:4rem; font-weight:900; line-height:1.1;
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:1rem; position:relative;
}
.hero .tagline {
  font-size:1.25rem; color:var(--dim); margin-bottom:.3rem; position:relative;
}
.hero .sub {
  font-size:.95rem; color:var(--dim); opacity:.7;
  max-width:480px; margin:0 auto 2.5rem; position:relative;
}

/* ===== BUTTONS ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 2.4rem; border-radius:8px;
  font-weight:700; font-size:.95rem; cursor:pointer;
  border:none; transition:all .2s; text-decoration:none;
}
.btn-pri {
  background:var(--grad); color:#fff;
  box-shadow:0 4px 24px rgba(79,195,247,.25);
}
.btn-pri:hover {
  transform:translateY(-2px); box-shadow:0 6px 32px rgba(79,195,247,.35);
  text-decoration:none;
}
.btn-sec {
  background:var(--card); color:var(--text); border:1px solid var(--border);
}
.btn-sec:hover {
  border-color:var(--glow); text-decoration:none;
}

/* ===== CONTAINER ===== */
.wrap { max-width:1100px; margin:0 auto; padding:0 2rem; }

/* ===== FEATURES ===== */
.features {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem; padding:3rem 0;
}
.feat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:1.8rem; transition:border-color .3s;
}
.feat-card:hover { border-color:var(--glow); }
.feat-card h3 { color:var(--blue); font-size:1.05rem; margin-bottom:.4rem; }
.feat-card p  { color:var(--dim); font-size:.88rem; }

/* ===== PRICING ===== */
.pricing { padding:4rem 0; }
.pricing h2 { text-align:center; font-size:2rem; margin-bottom:.3rem; }
.pricing .sub { text-align:center; color:var(--dim); margin-bottom:2.5rem; }
.pgrid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.5rem;
}
.pcard {
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:2rem 1.5rem; text-align:center;
  transition:border-color .3s, transform .3s;
}
.pcard:hover { border-color:var(--glow); transform:translateY(-4px); }
.pcard.pop {
  border-color:var(--blue);
  position:relative;
}
.pcard.pop::before {
  content:'BEST VALUE'; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--grad); color:#fff; font-size:.6rem; font-weight:800;
  letter-spacing:.1em; padding:.25rem .7rem; border-radius:20px;
}
.pcard h3 { color:var(--dim); font-size:.95rem; font-weight:600; margin-bottom:.4rem; }
.pcard .price {
  font-size:2.5rem; font-weight:900;
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.pcard .price small { font-size:.9rem; font-weight:400; -webkit-text-fill-color:var(--dim); }
.pcard .desc { color:var(--dim); font-size:.82rem; margin:.6rem 0 1.5rem; }
.pcard .btn { width:100%; }

/* ===== REQUIREMENTS ===== */
.req { padding:3rem 0; border-top:1px solid var(--border); }
.req h2 { font-size:1.5rem; margin-bottom:1.2rem; }
.req ul { list-style:none; }
.req li {
  padding:.55rem 0; color:var(--dim); font-size:.9rem;
  border-bottom:1px solid rgba(31,31,69,.5);
}
.req li::before { content:'▸ '; color:var(--blue); }

/* ===== PURCHASE PAGE ===== */
.purchase-wrap {
  max-width:480px; margin:3.5rem auto; padding:0 2rem;
}
.purchase-wrap h2 { font-size:1.8rem; text-align:center; margin-bottom:.3rem; }
.purchase-wrap .sub { color:var(--dim); text-align:center; margin-bottom:2rem; }
.fg { margin-bottom:1.2rem; }
.fg label {
  display:block; font-size:.82rem; font-weight:600;
  color:var(--dim); margin-bottom:.35rem;
}
.fg input, .fg select {
  width:100%; padding:.7rem 1rem;
  background:var(--surface); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:.92rem; outline:none;
  transition:border-color .2s;
}
.fg input:focus, .fg select:focus { border-color:var(--glow); }
.fg input::placeholder { color:var(--dim); opacity:.45; }
.fg .hint { font-size:.72rem; color:var(--dim); margin-top:.25rem; opacity:.7; }
.fg select {
  cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237a7aa0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem;
}
.fg select option { background:var(--surface); color:var(--text); }
.purchase-wrap .btn { width:100%; margin-top:.5rem; }
.err { color:var(--danger); font-size:.82rem; margin-top:.4rem; display:none; }

/* ===== SUCCESS PAGE ===== */
.success-wrap {
  max-width:560px; margin:3rem auto; padding:0 2rem; text-align:center;
}
.check-circle {
  width:80px; height:80px; border-radius:50%;
  background:rgba(46,213,115,.12);
  display:grid; place-items:center;
  margin:0 auto 1.5rem; font-size:2.5rem;
}
.success-wrap h2 { font-size:1.8rem; margin-bottom:.3rem; }
.success-wrap .sub { color:var(--dim); margin-bottom:2rem; }

.key-box {
  background:var(--surface); border:1px solid var(--glow);
  border-radius:12px; padding:1.5rem; margin-bottom:1.5rem;
}
.key-box .lbl {
  font-size:.7rem; font-weight:700; color:var(--dim);
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:.6rem;
}
.key-box .key {
  font-family:'Consolas','Courier New',monospace; font-size:.95rem;
  word-break:break-all; background:rgba(0,0,0,.3);
  padding:.7rem; border-radius:6px; color:var(--cyan); user-select:all;
}
.key-box .acts { margin-top:1rem; display:flex; gap:.7rem; justify-content:center; }

.info-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:1.4rem; text-align:left; margin-bottom:2rem;
}
.info-card p { color:var(--dim); font-size:.85rem; margin-bottom:.4rem; }
.info-card strong { color:var(--text); }

/* ===== FOOTER ===== */
footer {
  border-top:1px solid var(--border);
  padding:2rem; text-align:center; color:var(--dim); font-size:.78rem;
  margin-top:3rem;
}

/* ===== LOADING SPINNER ===== */
.spinner {
  width:18px; height:18px; border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff; border-radius:50%;
  animation:spin .6s linear infinite; display:inline-block;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ===== RESPONSIVE ===== */
@media (max-width:768px) {
  header { padding:1rem 1.2rem; }
  nav { gap:1.2rem; }
  .hero h1 { font-size:2.4rem; }
  .pgrid { grid-template-columns:1fr; max-width:340px; margin:0 auto; }
}