.jjv-page {
  --jjv-bg: #06110f;
  --jjv-surface: rgba(255,255,255,.045);
  --jjv-surface-2: rgba(121,218,204,.055);
  --jjv-border: rgba(173,236,228,.13);
  --jjv-border-strong: rgba(173,236,228,.24);
  --jjv-text: #f4fbf9;
  --jjv-soft: #c9d8d4;
  --jjv-muted: #92aaa4;
  --jjv-mint: #82d8cc;
  --jjv-teal: #0c8b7b;
  --jjv-cyan: #49d5e8;
  --jjv-blue: #2478b6;
  --jjv-navy: #071e2d;
}
.jjv-page .site-header {
  background: rgba(5, 12, 12, .80);
  border-bottom: 1px solid rgba(255,255,255,.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.jjv-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 110px;
}
.jjv-hero::before,
.jjv-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(12px);
}
.jjv-hero::before {
  width: 700px; height: 700px; left: -180px; top: -250px;
  background: radial-gradient(circle, rgba(24,183,169,.22), transparent 68%);
}
.jjv-hero::after {
  width: 640px; height: 640px; right: -170px; top: -100px;
  background: radial-gradient(circle, rgba(23,111,166,.25), transparent 68%);
}
.jjv-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin-bottom: 38px; color: var(--text-muted); font-size: .82rem;
}
.jjv-breadcrumb a { color: var(--text-soft); }
.jjv-breadcrumb a:hover { color: var(--text); }
.jjv-breadcrumb span[aria-hidden="true"] { opacity: .45; }
.jjv-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: 72px;
  align-items: center;
}
.jjv-brand-row { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; }
.jjv-icon {
  width: 108px; height: 108px; object-fit: cover; border-radius: 27px;
  border: 1px solid rgba(119,235,224,.18);
  box-shadow: 0 22px 55px rgba(0,0,0,.36);
}
.jjv-kicker {
  margin: 0 0 7px; color: var(--jjv-mint); font-size: .76rem;
  font-weight: 780; letter-spacing: .12em; text-transform: uppercase;
}
.jjv-hero h1 { margin: 0; font-size: clamp(3.3rem, 6.1vw, 5.8rem); line-height: .96; }
.jjv-hero-copy > h2 { max-width: 760px; margin: 0 0 22px; font-size: clamp(2.05rem, 3.75vw, 3.8rem); }
.jjv-lead { max-width: 730px; margin: 0; color: var(--jjv-soft); font-size: clamp(1.04rem, 1.45vw, 1.2rem); line-height: 1.72; }
.jjv-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.jjv-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.jjv-meta span, .feature-pills span, .trust-chip {
  padding: 7px 10px; border: 1px solid var(--jjv-border); border-radius: 999px;
  background: rgba(255,255,255,.025); color: var(--jjv-muted); font-size: .72rem; font-weight: 690;
}
.jjv-hero-visual { position: relative; min-height: 700px; display: grid; place-items: center; }
.jjv-glow {
  position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(130,216,204,.22), transparent 34%), radial-gradient(circle at 70% 70%, rgba(20,109,164,.34), transparent 54%);
  filter: blur(30px);
}
.phone-mockup {
  position: relative; width: min(100%, 304px); padding: 10px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 42px;
  background: linear-gradient(145deg, #2a3432, #070b0a 65%);
  box-shadow: 0 38px 88px rgba(0,0,0,.44);
}
.phone-screen { overflow: hidden; border-radius: 33px; background: #06110f; }
.phone-screen img { display:block; width:100%; height:auto; }
.hero-icon-float {
  position: absolute; right: 20px; bottom: 72px; width: 122px; height: 122px;
  object-fit: cover; border-radius: 30px; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 50px rgba(0,0,0,.34);
}
.hero-note {
  position: absolute; left: 0; bottom: 112px; width: 230px; padding: 15px 17px;
  border: 1px solid var(--jjv-border); border-radius: 17px; background: rgba(5,17,16,.84);
  backdrop-filter: blur(14px); box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
.hero-note strong { display:block; margin-bottom:5px; font-size:.9rem; }
.hero-note p { margin:0; color:var(--jjv-soft); font-size:.77rem; line-height:1.5; }
.section-space { padding: 104px 0; }
.section-muted { background: linear-gradient(180deg, rgba(255,255,255,.016), rgba(255,255,255,.009)); }
.jjv-summary { padding-top:0; }
.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:16px; border:1px solid var(--jjv-border); border-radius:27px; background:rgba(255,255,255,.025); }
.summary-grid > div { min-height:116px; padding:18px; border:1px solid rgba(255,255,255,.06); border-radius:20px; background:rgba(255,255,255,.02); }
.summary-label { display:block; margin-bottom:10px; color:var(--jjv-mint); font-size:.71rem; font-weight:780; letter-spacing:.09em; text-transform:uppercase; }
.summary-grid strong { display:block; font-size:1.02rem; line-height:1.35; }
.eyebrow { margin:0 0 10px; color:var(--jjv-mint); font-size:.78rem; font-weight:780; letter-spacing:.11em; text-transform:uppercase; }
.section-heading { max-width: 840px; margin-bottom: 38px; }
.section-heading h2, .intro-grid h2, .cta-copy h2 { margin-bottom:18px; font-size:clamp(2rem,3.6vw,3.55rem); line-height:1.03; }
.section-heading p, .intro-copy p, .cta-copy p { color:var(--jjv-soft); }
.intro-grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:46px; align-items:start; }
.intro-copy p + p { margin-top:16px; }
.trust-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:38px; }
.trust-card { min-height:190px; padding:22px; border:1px solid var(--jjv-border); border-radius:24px; background:rgba(255,255,255,.025); }
.trust-card .trust-chip { display:inline-flex; margin-bottom:20px; color:var(--jjv-mint); }
.trust-card h3 { margin-bottom:9px; font-size:1.15rem; }
.trust-card p { margin:0; color:var(--jjv-soft); font-size:.91rem; }
.feature-stack { display:grid; gap:18px; }
.feature-card {
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr); gap:36px; align-items:center;
  padding:30px; border:1px solid var(--jjv-border); border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.016));
}
.feature-card.is-reverse { grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr); }
.feature-card.is-reverse .feature-media { order:-1; }
.feature-copy { max-width:620px; }
.feature-pills { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:14px; }
.feature-card h3 { margin-bottom:14px; font-size:clamp(1.55rem,2.25vw,2.15rem); line-height:1.08; }
.feature-card p { margin:0; color:var(--jjv-soft); font-size:1.01rem; line-height:1.7; }
.feature-list { display:grid; gap:9px; margin:21px 0 0; padding-left:20px; color:var(--jjv-soft); font-size:.97rem; line-height:1.55; }
.feature-list li::marker { color:var(--jjv-mint); }
.feature-media { display:flex; justify-content:center; align-items:center; min-height:430px; padding:22px; border:1px solid rgba(255,255,255,.065); border-radius:22px; background:radial-gradient(circle at 50% 20%, rgba(130,216,204,.08), transparent 50%), rgba(255,255,255,.018); }
.feature-media img { display:block; width:min(100%,275px); height:auto; border-radius:26px; box-shadow:0 24px 58px rgba(0,0,0,.28); }
.plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.plan-card { padding:28px; border:1px solid var(--jjv-border); border-radius:27px; background:rgba(255,255,255,.025); }
.plan-card.is-pro { background:radial-gradient(circle at 100% 0%,rgba(130,216,204,.10),transparent 20rem),rgba(255,255,255,.03); border-color:var(--jjv-border-strong); }
.plan-card .plan-label { display:inline-flex; margin-bottom:20px; padding:7px 10px; border-radius:999px; border:1px solid var(--jjv-border); color:var(--jjv-mint); font-size:.72rem; font-weight:760; text-transform:uppercase; letter-spacing:.08em; }
.plan-card h3 { margin-bottom:10px; font-size:1.7rem; }
.plan-card p { color:var(--jjv-soft); }
.plan-card ul { display:grid; gap:10px; margin:22px 0 0; padding-left:20px; color:var(--jjv-soft); }
.platform-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.platform-card { padding:27px; border:1px solid var(--jjv-border); border-radius:25px; background:rgba(255,255,255,.025); }
.platform-card strong { display:block; margin-bottom:8px; font-size:1.25rem; }
.platform-card p { margin:0; color:var(--jjv-soft); }
.platform-card.is-coming { opacity:.88; }
.screenshot-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.screenshot-card { overflow:hidden; border:1px solid var(--jjv-border); border-radius:25px; background:rgba(255,255,255,.02); }
.screenshot-card img { display:block; width:100%; height:auto; }
.screenshot-card figcaption { padding:13px 15px 16px; color:var(--jjv-soft); font-size:.84rem; }
.notice-card { padding:21px 23px; border:1px solid var(--jjv-border); border-left:3px solid var(--jjv-mint); border-radius:17px; background:rgba(255,255,255,.025); }
.notice-card strong { display:block; margin-bottom:6px; }
.notice-card p { margin:0; color:var(--jjv-soft); }
.cta-panel { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr); gap:38px; align-items:center; padding:34px; border:1px solid var(--jjv-border); border-radius:32px; background:radial-gradient(circle at 0 0,rgba(130,216,204,.09),transparent 22rem),radial-gradient(circle at 100% 100%,rgba(27,105,155,.15),transparent 24rem),rgba(255,255,255,.025); }
.cta-links { display:flex; flex-wrap:wrap; gap:13px; margin-top:27px; }
.cta-visual { display:grid; place-items:center; min-height:280px; }
.cta-visual img { width:min(100%,240px); border-radius:55px; box-shadow:0 28px 65px rgba(0,0,0,.34); }
@media (max-width:1080px) {
  .jjv-hero-grid,.intro-grid,.cta-panel { grid-template-columns:1fr; }
  .summary-grid,.trust-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature-card,.feature-card.is-reverse { grid-template-columns:1fr; }
  .feature-card.is-reverse .feature-media { order:0; }
  .jjv-hero-visual { min-height:auto; padding-top:20px; }
  .hero-note { left:12%; bottom:55px; }
  .screenshot-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .jjv-hero { padding:52px 0 82px; }
  .section-space { padding:82px 0; }
  .jjv-brand-row { align-items:flex-start; gap:15px; }
  .jjv-icon { width:84px; height:84px; border-radius:22px; }
  .summary-grid,.trust-grid,.plan-grid,.platform-grid,.screenshot-grid { grid-template-columns:1fr; }
  .phone-mockup { width:min(100%,280px); }
  .hero-note {
    position: static;
    width: min(100%, 360px);
    margin-top: 20px;
    justify-self: center;
  }
  /* The floating app icon is decorative on desktop. Hiding it on small
     screens keeps it from overlapping the phone mockup and the note. */
  .hero-icon-float { display: none; }
  .feature-media { min-height:auto; }
}
@media (max-width:430px) {
  .feature-card,.cta-panel { padding:22px; }
  .jjv-actions .button,.cta-links .button { width:100%; }
}