/* ============================================================
   Versenix — shared stylesheet
   Apple-inspired glass, system fonts, no frameworks, no JS.
   ============================================================ */

:root{
  /* Brand blues carried over from the original site */
  --accent:        #2563eb;
  --accent-dark:   #1e40af;
  --accent-light:  #60a5fa;
  --accent-red:    #ef4444;
  --accent-red-dark:#dc2626;

  /* Apple-style neutrals */
  --ink:           #1d1d1f;
  --ink-secondary: #6e6e73;
  --bg:            #fbfcfe;
  --surface:       #ffffff;
  --hairline:      rgba(0,0,0,.08);

  /* Glass */
  --glass-bg:      rgba(255,255,255,.62);
  --glass-bg-dark: rgba(30,41,59,.45);
  --glass-border:  rgba(255,255,255,.45);
  --glass-blur:    18px;

  --radius-lg:     22px;
  --radius-md:     14px;
  --radius-pill:   980px;

  --shadow-sm:     0 2px 10px rgba(15,23,42,.06);
  --shadow-md:     0 12px 34px rgba(15,23,42,.10);
  --shadow-lg:     0 24px 60px rgba(15,23,42,.18);

  --ease:          cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
              "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }

a{ color:var(--accent); }

/* -------------------- Skip link (a11y) -------------------- */
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  background:var(--ink);
  color:#fff;
  padding:12px 20px;
  border-radius:0 0 10px 0;
  z-index:1000;
  font-weight:600;
}
.skip-link:focus{
  left:0;
  top:0;
}

/* -------------------- Focus states -------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible{
  outline:3px solid var(--accent-light);
  outline-offset:3px;
  border-radius:8px;
}

/* -------------------- Sticky glass nav -------------------- */
.site-nav{
  position:sticky;
  top:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px clamp(18px,4vw,48px);
  background:rgba(251,252,254,.72);
  -webkit-backdrop-filter:saturate(180%) blur(var(--glass-blur));
  backdrop-filter:saturate(180%) blur(var(--glass-blur));
  border-bottom:1px solid var(--hairline);
}
.site-nav .brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
  font-weight:700;
  font-size:15px;
  letter-spacing:-.01em;
}
.site-nav .brand img{
  width:26px;
  height:26px;
  border-radius:7px;
}
.site-nav .nav-links{
  display:flex;
  align-items:center;
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
}
.site-nav .nav-links a{
  color:var(--ink-secondary);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  transition:color .2s var(--ease);
}
.site-nav .nav-links a:hover{ color:var(--ink); }
.site-nav .nav-cta{
  font-size:13px;
  padding:8px 18px;
}
.nav-toggle{ display:none; }

@media (max-width:720px){
  .site-nav .nav-links{ display:none; }
}

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  margin:6px;
  border-radius:var(--radius-pill);
  text-decoration:none;
  font-size:16px;
  font-weight:600;
  letter-spacing:-.01em;
  border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  cursor:pointer;
}
.btn:active{ transform:scale(.97); }

.btn.install{
  background:#fff;
  color:var(--accent-dark);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.btn.install:hover{
  background:#eef2ff;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}

.btn.video{
  background:var(--accent-red);
  color:#fff;
  border-color:rgba(255,255,255,.2);
}
.btn.video:hover{
  background:var(--accent-red-dark);
}

.btn.ghost{
  background:var(--glass-bg);
  color:var(--accent-dark);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
}
.btn.ghost:hover{ background:rgba(255,255,255,.85); }

.buttons{
  margin-top:35px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

/* -------------------- Hero -------------------- */
header.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1100px 520px at 18% -10%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(96,165,250,.35), transparent 55%),
    linear-gradient(160deg,#2563eb 0%,#1e40af 65%,#16306e 100%);
  color:#fff;
  text-align:center;
  padding:88px 20px 60px;
}

.eyebrow{
  display:inline-block;
  padding:6px 16px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:22px;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

header.hero h1{
  font-size:clamp(2.4rem,5.6vw,3.9rem);
  line-height:1.06;
  letter-spacing:-.02em;
  font-weight:700;
  margin:0 0 18px;
}

header.hero > .lede{
  font-size:clamp(1.05rem,2vw,1.3rem);
  max-width:720px;
  margin:0 auto;
  color:rgba(255,255,255,.92);
}

.screen-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin:30px auto 0;
  max-width:820px;
  list-style:none;
  padding:0;
}
.screen-badges li{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  font-size:14.5px;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.screen-badges strong{ font-weight:700; }

/* ---- signature element: floating three-display stack ---- */
.device-stack{
  position:relative;
  height:300px;
  max-width:640px;
  margin:64px auto 0;
}
.device{
  position:absolute;
  border-radius:18px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 30px 60px rgba(8,15,40,.35);
  padding:16px 18px;
  text-align:left;
  color:#fff;
}
.device .dots{ display:flex; gap:6px; margin-bottom:14px; }
.device .dots span{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.55); }
.device .label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; opacity:.85; margin-bottom:8px; }
.device .line{ height:7px; border-radius:4px; background:rgba(255,255,255,.28); margin-bottom:8px; }
.device .line.short{ width:55%; }

.device-congregation{
  width:min(360px,58%);
  height:200px;
  left:50%;
  top:14px;
  transform:translateX(-50%) rotate(0deg);
  z-index:2;
}
.device-control{
  width:min(240px,46%);
  height:160px;
  left:2%;
  top:96px;
  transform:rotate(-6deg);
  z-index:3;
}
.device-stage{
  width:min(220px,42%);
  height:150px;
  right:2%;
  top:104px;
  transform:rotate(6deg);
  z-index:1;
  opacity:.92;
}

@media (max-width:640px){
  .device-stack{
    height:auto;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .device{
    position:static;
    width:100% !important;
    height:auto !important;
    transform:none !important;
  }
}

/* -------------------- Layout helpers -------------------- */
.container{
  width:92%;
  max-width:1080px;
  margin:auto;
  padding:70px 0;
}
section{ margin-bottom:10px; }
.section-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 40px;
}
h2{
  color:var(--ink);
  font-size:clamp(1.7rem,3vw,2.3rem);
  letter-spacing:-.02em;
  margin:0 0 12px;
}
.section-head p{ color:var(--ink-secondary); font-size:16.5px; }

/* -------------------- Feature cards -------------------- */
.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px;
  list-style:none;
  padding:0;
  margin:0;
}
.card{
  background:var(--glass-bg);
  border:1px solid var(--hairline);
  padding:26px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}
.card h3{
  font-size:17.5px;
  letter-spacing:-.01em;
  margin:0 0 8px;
}
.card p{ color:var(--ink-secondary); margin:0; font-size:15.5px; }

/* -------------------- Steps -------------------- */
.steps{
  background:var(--surface);
  padding:clamp(24px,4vw,40px);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--hairline);
}
.steps ol{
  padding-left:0;
  margin:0;
  list-style:none;
  counter-reset:step;
}
.steps ol li{
  counter-increment:step;
  position:relative;
  padding-left:46px;
  margin-bottom:22px;
  color:var(--ink);
}
.steps ol li:last-child{ margin-bottom:0; }
.steps ol li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:-2px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;
  font-size:13.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* -------------------- Mission section -------------------- */
.mission{
  background:linear-gradient(150deg,rgba(37,99,235,.06),rgba(30,64,175,.03));
  border:1px solid var(--hairline);
}
.mission p{ color:var(--ink-secondary); margin-bottom:15px; }
.mission p:last-child{ margin-bottom:0; }
.mission .tagline{
  text-align:center;
  font-weight:700;
  color:var(--accent-dark);
  font-size:17px;
}

/* -------------------- Footer -------------------- */
footer.site-footer{
  background:var(--ink);
  color:#fff;
  text-align:center;
  padding:44px 20px;
}
footer.site-footer p{ margin:0; color:rgba(255,255,255,.7); font-size:14.5px; }
footer.site-footer .legal-links{ margin-top:14px; }
footer.site-footer .legal-links a{
  color:var(--accent-light);
  text-decoration:none;
  margin:0 4px;
}
footer.site-footer .legal-links a:hover{ text-decoration:underline; }
footer.site-footer .fine-print{
  margin-top:16px;
  font-size:13px;
  color:rgba(255,255,255,.55);
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}

/* ==================== Legal page specific ==================== */
header.legal-hero{
  background:linear-gradient(160deg,#2563eb 0%,#1e40af 100%);
  color:#fff;
  padding:64px 20px 54px;
  text-align:center;
}
header.legal-hero h1{
  font-size:clamp(2rem,4.4vw,2.9rem);
  letter-spacing:-.02em;
  margin:0 0 12px;
}
header.legal-hero p{
  font-size:17px;
  max-width:760px;
  margin:auto;
  color:rgba(255,255,255,.9);
}

nav.legal-nav{
  position:sticky;
  top:0;
  z-index:200;
  background:rgba(251,252,254,.78);
  -webkit-backdrop-filter:saturate(180%) blur(var(--glass-blur));
  backdrop-filter:saturate(180%) blur(var(--glass-blur));
  border-bottom:1px solid var(--hairline);
  padding:16px;
  text-align:center;
}
nav.legal-nav a{
  color:var(--accent);
  text-decoration:none;
  margin:0 15px;
  font-weight:600;
  font-size:14.5px;
}
nav.legal-nav a:hover{ text-decoration:underline; }

.legal-container{
  width:90%;
  max-width:900px;
  margin:48px auto;
}
.legal-card{
  background:var(--surface);
  padding:clamp(24px,4vw,42px);
  border-radius:var(--radius-lg);
  margin-bottom:36px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--hairline);
  scroll-margin-top:80px;
}
.legal-card h2{ margin-bottom:6px; }
.legal-card .updated{
  color:var(--ink-secondary);
  font-size:14.5px;
  margin-bottom:22px;
}
.legal-card h3{
  margin-top:26px;
  margin-bottom:8px;
  color:var(--ink);
  font-size:17px;
  letter-spacing:-.01em;
}
.legal-card ul{ padding-left:22px; margin:10px 0 15px; }
.legal-card li{ margin-bottom:8px; color:var(--ink-secondary); }
.legal-card p{ margin-bottom:15px; color:var(--ink-secondary); }
.legal-card strong{ color:var(--ink); }

.notice{
  background:rgba(37,99,235,.06);
  border-left:4px solid var(--accent);
  padding:14px 18px;
  border-radius:8px;
  margin:20px 0;
  font-weight:600;
  color:var(--accent-dark);
}