/* Belvista Digital Solutions: shared styles.
   Dark navy, the line-art B, a faint dot grid with soft blue/grey blobs
   (the same treatment as the Facebook cover), mono labels for detail. */

:root {
  --bg: #080B12;
  --bg-2: #0C111B;
  --panel: #0F1522;
  --ink: #F2F4F8;
  --muted: #9AA3B5;
  --dim: #5C6578;
  --blue: #3558F5;
  --blue-2: #5373FF;
  --line: rgba(242, 244, 248, 0.10);
  --line-2: rgba(242, 244, 248, 0.18);
  --sans: "Inter", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --wrap: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: rgba(53, 88, 245, 0.45); }
:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.mono { font-family: var(--mono); }
.label { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 12px; }
.label::before { content: ""; width: 7px; height: 7px; background: var(--blue-2); flex: none; }
.label.plain::before { display: none; }

/* Background: blobs + dots. Radial gradients only (no blur filters,
   which iPhone Safari draws as boxes). */
.bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blob { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent); }
.dots { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(242, 244, 248, 0.16) 1px, transparent 1.6px); background-size: 26px 26px; background-position: 13px 13px; -webkit-mask-image: radial-gradient(ellipse at 60% 45%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse at 60% 45%, #000 20%, transparent 78%); }
.dots.blue { background-image: radial-gradient(circle, rgba(83, 115, 255, 0.7) 1.1px, transparent 1.8px); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(8, 11, 18, 0.78); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand .m { height: 30px; width: auto; }
.brand .w { height: 21px; width: auto; }
.nav { display: flex; align-items: center; gap: 32px; font-size: 14px; }
.nav a { text-decoration: none; color: var(--muted); transition: color 0.2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.menu-btn { display: none; background: none; border: 0; color: var(--ink); width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: transform 0.25s, opacity 0.2s; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
.menu-btn span::before { top: -6px; }
.menu-btn span::after { top: 6px; }
.menu-open .menu-btn span { background: transparent; }
.menu-open .menu-btn span::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-btn span::after { transform: translateY(-6px) rotate(-45deg); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; text-decoration: none; font-family: var(--sans); font-size: 14.5px; font-weight: 500; padding: 13px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s; }
.btn .arr { transition: transform 0.2s; }
.btn:hover .arr { transform: translate(2px, -2px); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-2); }
.btn-line { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn-line:hover { border-color: rgba(242, 244, 248, 0.45); }
.btn-sm { padding: 10px 18px; font-size: 13.5px; }

/* Hero */
.hero { position: relative; padding: 112px 0 120px; border-bottom: 1px solid var(--line); }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
h1, h2, h3 { font-weight: 400; letter-spacing: -0.03em; line-height: 1.04; }
h1 { font-size: clamp(46px, 6.4vw, 86px); margin-top: 28px; }
h1 .soft, h2 .soft { color: var(--muted); }
.lede { margin-top: 28px; font-size: 18.5px; color: var(--muted); max-width: 33em; }
.ctas { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 12px; }
.meta-row { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 28px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--dim); text-transform: uppercase; }
.meta-row b { color: var(--blue-2); font-weight: 500; margin-right: 8px; }

/* Blueprint B */
.figure { position: relative; }
.figure svg { width: 100%; height: auto; }
.figure .cap { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--dim); text-transform: uppercase; }

/* Sections */
section { position: relative; padding: 120px 0; border-bottom: 1px solid var(--line); }
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; }
h2 { font-size: clamp(36px, 4.4vw, 58px); margin-top: 22px; }
.sec-head p { color: var(--muted); font-size: 17px; max-width: 30em; }

/* Offer (free preview) */
.offer { background: var(--bg-2); overflow: hidden; }
.offer .wrap { position: relative; z-index: 1; }
.steps { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-2); }
.step { padding: 32px 32px 8px 0; }
.step + .step { padding-left: 32px; border-left: 1px solid var(--line); }
.step .n { font-family: var(--mono); font-size: 12px; color: var(--blue-2); letter-spacing: 0.12em; }
.step h3 { font-size: 26px; margin-top: 16px; letter-spacing: -0.02em; }
.step p { margin-top: 10px; color: var(--muted); font-size: 15.5px; }
.offer .ctas { margin-top: 56px; }

/* Services */
.services { margin-top: 64px; border-top: 1px solid var(--line-2); }
.svc { display: grid; grid-template-columns: 90px 1fr 1.2fr; gap: 32px; padding: 36px 0; border-bottom: 1px solid var(--line); align-items: start; }
.svc .n { font-family: var(--mono); font-size: 13px; color: var(--blue-2); letter-spacing: 0.1em; padding-top: 8px; }
.svc h3 { font-size: 32px; letter-spacing: -0.025em; }
.svc p { color: var(--muted); font-size: 16px; }
.svc ul { list-style: none; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.svc li { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }

/* Process */
.process { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.proc { padding: 28px 28px 0 0; border-top: 1px solid var(--line-2); position: relative; }
.proc::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--blue-2); }
.proc .n { font-family: var(--mono); font-size: 12px; color: var(--dim); letter-spacing: 0.12em; }
.proc h3 { font-size: 22px; margin-top: 12px; letter-spacing: -0.02em; }
.proc p { margin-top: 8px; color: var(--muted); font-size: 15px; }

/* Care plans */
.plans { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.plan { padding: 36px 32px 34px; display: flex; flex-direction: column; background: rgba(15, 21, 34, 0.55); }
.plan + .plan { border-left: 1px solid var(--line-2); }
.plan.featured { background: linear-gradient(180deg, rgba(53, 88, 245, 0.14), rgba(53, 88, 245, 0.02) 60%), rgba(15, 21, 34, 0.55); }
.plan .tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.plan.featured .tag { color: var(--blue-2); }
.plan h3 { font-size: 26px; margin-top: 14px; letter-spacing: -0.02em; }
.plan .price { margin-top: 18px; font-size: 48px; letter-spacing: -0.04em; line-height: 1; }
.plan .price small { font-size: 15px; letter-spacing: 0; color: var(--muted); margin-left: 4px; }
.plan .desc { margin-top: 14px; color: var(--muted); font-size: 15px; min-height: 48px; }
.plan ul { list-style: none; margin: 24px 0 30px; border-top: 1px solid var(--line); flex: 1; }
.plan li { padding: 11px 0 11px 26px; border-bottom: 1px solid var(--line); font-size: 14.5px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 10px; height: 1.5px; background: var(--blue-2); }
.plan .btn { align-self: flex-start; }
.plans-note { margin-top: 22px; font-size: 14px; color: var(--dim); }

/* FAQ */
.faq { margin-top: 56px; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 26px 48px 26px 0; font-size: 20px; letter-spacing: -0.015em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-75%) rotate(45deg); transition: transform 0.25s; }
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq .a { padding: 0 0 28px; color: var(--muted); max-width: 46em; font-size: 16px; }

/* Closing CTA */
.closing { overflow: hidden; text-align: left; }
.closing .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; }
.closing h2 { font-size: clamp(40px, 5vw, 68px); max-width: 12.5em; }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.field label .opt { color: var(--dim); text-transform: none; letter-spacing: 0.02em; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: rgba(15, 21, 34, 0.8); border: 1px solid var(--line-2); border-radius: 6px; padding: 13px 14px; transition: border-color 0.2s, background 0.2s; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-2); background: rgba(15, 21, 34, 1); }
.field select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239AA3B5' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.field select option { background: #0F1522; color: var(--ink); }
.choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.choice label { cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: block; height: 100%; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 6px; font-family: var(--sans); font-size: 14.5px; letter-spacing: 0; text-transform: none; color: var(--ink); transition: border-color 0.2s, background 0.2s; }
.choice span small { display: block; color: var(--dim); font-size: 12.5px; margin-top: 2px; }
.choice input:checked + span { border-color: var(--blue-2); background: rgba(53, 88, 245, 0.12); }
.choice input:focus-visible + span { outline: 2px solid var(--blue-2); outline-offset: 2px; }
.turnstile:empty, .turnstile .cf-turnstile:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.form-foot p { font-size: 13px; color: var(--dim); max-width: 34em; }
.form-foot p a { color: var(--muted); }
.form-status { grid-column: 1 / -1; font-size: 15px; padding: 14px 16px; border-radius: 6px; display: none; }
.form-status.err { display: block; background: rgba(229, 72, 77, 0.1); border: 1px solid rgba(229, 72, 77, 0.35); color: #FFB4B4; }
.sent { display: none; padding: 48px 0; }
.sent h3 { font-size: 34px; letter-spacing: -0.025em; margin-top: 18px; }
.sent p { color: var(--muted); margin-top: 12px; max-width: 32em; }
.is-sent form { display: none; }
.is-sent .sent { display: block; }

/* Prose (privacy) */
.prose { max-width: 720px; }
.prose h2 { font-size: 26px; margin: 48px 0 12px; letter-spacing: -0.02em; }
.prose p, .prose li { color: var(--muted); font-size: 16px; }
.prose p + p { margin-top: 12px; }
.prose ul { margin: 12px 0 0 20px; }
.prose li + li { margin-top: 6px; }

/* Footer */
.site-footer { padding: 72px 0 40px; position: relative; overflow: hidden; }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.foot-top .brand .m { height: 36px; }
.foot-top .brand .w { height: 24px; }
.foot-top p { color: var(--muted); font-size: 14.5px; margin-top: 18px; max-width: 26em; }
.foot-col h4 { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; }
.foot-col a, .foot-col span { display: block; text-decoration: none; color: var(--muted); font-size: 14.5px; padding: 4px 0; }
.foot-col a:hover { color: var(--ink); }
.foot-bot { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--dim); text-transform: uppercase; }
.foot-bot a { text-decoration: none; }
.foot-bot a:hover { color: var(--muted); }

/* Reveal on scroll (opacity + transform only) */
/* Below the fold: hidden only once the script has run (html.js), then
   revealed as it scrolls into view. The first screen animates on its own
   with CSS, so it never waits on the script. */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.js .rv.in { opacity: 1; transform: none; }
.hero .rv, .js .hero .rv { opacity: 1; transform: none; transition: none; animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero .rv:nth-child(2) { animation-delay: 0.06s; }
.hero .rv:nth-child(3) { animation-delay: 0.12s; }
.hero .rv:nth-child(4) { animation-delay: 0.18s; }
.hero .rv:nth-child(5) { animation-delay: 0.24s; }
.hero .figure.rv { animation-delay: 0.2s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .js .rv, .hero .rv { opacity: 1; transform: none; transition: none; animation: none; } html { scroll-behavior: auto; } }

/* Tablet */
@media (max-width: 980px) {
  .wrap { padding: 0 24px; }
  .hero { padding: 72px 0 88px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 56px; }
  .hero .figure { max-width: 420px; }
  section { padding: 88px 0; }
  .sec-head { grid-template-columns: 1fr; gap: 20px; }
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .svc { grid-template-columns: 56px 1fr; }
  .svc > div:last-child { grid-column: 2; }
  .process { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .plans { grid-template-columns: 1fr; }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--line-2); }
  .plan .desc { min-height: 0; }
  .closing .wrap { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-top > div:first-child { grid-column: 1 / -1; }
}

/* Phone */
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .site-header .wrap { height: 64px; }
  .menu-btn { display: inline-flex; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 64px); height: calc(100dvh - 64px); overflow-y: auto; background: var(--bg); border-top: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 12px 16px 32px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.25s; }
  .nav a { font-size: 22px; color: var(--ink); padding: 18px 0; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: 24px; font-size: 16px; padding: 15px 22px; border-bottom: 0; color: #fff; }
  .menu-open .nav { opacity: 1; transform: none; pointer-events: auto; }
  .menu-open { overflow: hidden; }
  .hero { padding: 56px 0 72px; }
  .lede { font-size: 17px; }
  .meta-row { flex-direction: column; gap: 10px; margin-top: 44px; }
  section { padding: 72px 0; }
  .svc { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
  .svc > div:last-child { grid-column: 1; }
  .svc .n { padding-top: 0; }
  .process { grid-template-columns: 1fr; gap: 28px; }
  .plan { padding: 28px 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .choice { grid-template-columns: 1fr; }
  .faq summary { font-size: 18px; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ctas .btn { flex: 1 1 auto; }
}