/* ==========================================================================
   Vodel landing — sleek/futuristic with glass cards
   Brand gradient: Vodel Blue (#2563EB) → Orbit Purple (#7C3AED)
   Accents: Mint (#10B981), Amber (#F59E0B)
   ========================================================================== */

:root {
  /* brand */
  --blue: #2563EB;      /* vodelBlue */
  --purple: #7C3AED;    /* orbitPurple */
  --mint: #10B981;      /* mintGreen */
  --amber: #F59E0B;     /* amberWarn */

  /* dark */
  --bg: #0A0D19;
  --bg-elev: #0F1324;
  --text: #E7E9F7;
  --muted: #A0A6C5;

  --glass: rgba(255,255,255,0.06);
  --glass-stroke: rgba(255,255,255,0.16);

  --radius: 16px;

  --grad: linear-gradient(135deg, var(--blue), var(--purple));
  --shadow-glow: 0 0 0 rgba(0,0,0,0), 0 30px 70px rgba(0,0,0,0.45);

  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F7F8FF;
  --bg-elev: #ffffff;
  --text: #0A0D19;
  --muted: #4B4F6B;

  --glass: rgba(10,13,25,0.04);
  --glass-stroke: rgba(10,13,25,0.12);

  --shadow-glow: 0 10px 24px rgba(37,99,235,.10), 0 12px 30px rgba(124,58,237,.08);

  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { transition: background-color .25s ease, color .25s ease; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Seamless background (no lines) =====
   Soft gradient blobs + a gentle conic halo + noise veil.
   No grid overlay; zero seams. */
.fx-bg {
  position: fixed; inset: -40vmax; z-index: -3; pointer-events: none;
  background:
    radial-gradient(1200px 900px at 15% -10%, rgba(124,58,237,.24), transparent 60%),
    radial-gradient(1200px 900px at 110% 0%, rgba(37,99,235,.22), transparent 62%),
    conic-gradient(from 210deg at 50% 50%, rgba(37,99,235,.18), rgba(124,58,237,.18), transparent 55%);
  filter: blur(60px) saturate(120%);
  opacity: .40;
  animation: slowspin 26s linear infinite;
}
:root[data-theme="light"] .fx-bg { opacity: .33; filter: blur(70px) saturate(110%); }
@keyframes slowspin { to { transform: rotate(360deg); } }

/* subtle noise to break banding */
.fx-noise {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'>\
    <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 .06 .09 .06 0 0 0'/></feComponentTransfer></filter>\
    <rect width='100%' height='100%' filter='url(%23n)'/>\
  </svg>");
  background-size: 240px 240px;
  opacity: .35;
  mix-blend-mode: soft-light;
}
:root[data-theme="light"] .fx-noise { opacity: .18; mix-blend-mode: multiply; }

/* container */
.container { width: min(1120px, 92%); margin: 0 auto; }

/* header */
.site-header { display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.brand { display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--text); }
.brand-glyph { width:28px; height:28px; border-radius:8px; background:var(--grad);
  box-shadow: 0 8px 24px rgba(37,99,235,.25), 0 12px 28px rgba(124,58,237,.22);}
.brand-text { font-weight: 800; letter-spacing: .2px; }

.nav { display:flex; gap:18px; align-items:center; }
.nav a { color: var(--muted); text-decoration:none; font-weight:600; }
.nav a:hover { color: var(--text); }

.btn-ghost { background:transparent; border:1px solid var(--glass-stroke); color:var(--text);
  border-radius:999px; padding:8px 14px; cursor:pointer; display:flex; align-items:center; gap:8px; }
.btn-ghost .dot { width:10px; height:10px; border-radius:50%; background:var(--grad); }

/* hero */
.hero { margin-top:14px; padding:28px 28px 32px; }
.hero .crumb { display:inline-flex; align-items:center; gap:8px; font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); }
.hero .crumb::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,.18); }

.display {
  margin: 8px 0 8px;
  font-size: clamp(32px, 6vw, 48px);
  font-weight: 800; line-height: 1.05;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 30px rgba(37,99,235,.15));
}

.lede { max-width:60ch; color:var(--muted); font-size:1.08rem; line-height:1.65; }

/* glass */
.glass {
  background: linear-gradient(180deg, var(--glass), transparent 120%);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-glow);
}
.glass:hover { border-color: rgba(255,255,255,.24); }

/* ctas */
.cta-row { display:flex; gap:12px; margin:18px 0 6px; flex-wrap:wrap; }
.btn { appearance:none; cursor:pointer; border-radius:999px; padding:12px 18px; font-weight:700; border:1px solid transparent; text-decoration:none; display:inline-flex; align-items:center; gap:10px; }
.btn-primary { color:#fff; background:var(--grad); border-color:transparent;
  box-shadow: 0 12px 30px rgba(37,99,235,.22), 0 10px 26px rgba(124,58,237,.18); transform: translateZ(0); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-outline { color:var(--text); background:transparent; border-color:var(--glass-stroke); }
.btn-outline:hover { border-color: rgba(255,255,255,.28); }

/* info pills */
.pill-row { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin:18px 0 8px; }
.pill { padding:12px 14px; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--glass-stroke); color:var(--muted); }
.pill strong { color:var(--text); font-weight:700; }

/* stats */
.stats { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-top:10px; }
.stat { padding:16px; border-radius:12px; border:1px solid var(--glass-stroke); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); text-align:left; }
.stat-value { font-weight:800; font-size:22px; }
.stat-label { color:var(--muted); margin-top:4px; }

/* sections */
.section { margin:46px 0; }
.section-title { font-size:20px; font-weight:800; margin-bottom:16px; letter-spacing:.2px; position:relative; display:inline-block; padding-left:14px; }
.section-title::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:var(--grad); box-shadow:0 0 0 6px rgba(37,99,235,.14); }

/* features */
.feature-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
.feature { padding:18px; }
.feature-title { font-weight:800; display:flex; align-items:center; gap:10px; margin:0 0 6px; }
.feature p { margin:0; color:var(--muted); }

.chip { width:10px; height:10px; border-radius:50%; display:inline-block; box-shadow:0 0 0 6px rgba(255,255,255,.04); }
.chip-blue { background:var(--blue); box-shadow:0 0 0 6px rgba(37,99,235,.18); }
.chip-purple { background:var(--purple); box-shadow:0 0 0 6px rgba(124,58,237,.18); }
.chip-amber { background:var(--amber); box-shadow:0 0 0 6px rgba(245,158,11,.18); }
.chip-access { background:var(--mint); box-shadow:0 0 0 6px rgba(16,185,129,.18); }

/* screenshots */
.shots { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; }
.shot { aspect-ratio:16/9; border-radius:14px; background:
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
  radial-gradient(80% 80% at 100% 0%, rgba(124,58,237,.18), transparent 60%),
  radial-gradient(80% 80% at 0% 100%, rgba(37,99,235,.18), transparent 60%),
  #0B1020;
  border:1px solid var(--glass-stroke); }

/* reviews */
.reviews { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; }
.review { padding:18px; display:flex; flex-direction:column; gap:12px; }
.review-stars { display:flex; gap:6px; }
.star {
  width:18px; height:18px; display:inline-block; background:var(--grad);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>') no-repeat center/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>') no-repeat center/contain;
}
.review blockquote { margin:0; line-height:1.6; color:var(--text); }
.reviewer { display:flex; align-items:center; gap:12px; }
.avatar { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; background:var(--grad);
  box-shadow: 0 8px 20px rgba(37,99,235,.25), 0 10px 22px rgba(124,58,237,.22); }
.reviewer .meta .name { font-weight:800; }
.reviewer .meta .role { color:var(--muted); font-size:.95rem; }

/* footer */
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:28px 0; color:var(--muted); }
.site-footer a { color:var(--muted); text-decoration:none; }
.site-footer a:hover { color:var(--text); }
.site-footer .links { display:flex; gap:16px; }

/* responsive */
@media (max-width: 900px) {
  .pill-row, .stats { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .shots { grid-template-columns: 1fr; }
  .reviews { grid-template-columns: 1fr; }
}

/* motion respect */
@media (prefers-reduced-motion: reduce) {
  .fx-bg { animation: none; }
}

.brand-logo{ width:50px; height:50px; border-radius:8px; object-fit:contain; display:block; }