/* ============================================================
   Wristband — liquid glass design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=DM+Serif+Display:ital@0;1&display=swap');

/* ── Tokens ── */
:root {
  --teal:   #5DCAA5;
  --teal-d: #04342C;
  --teal-m: #1D9E75;
  --teal-b: #0F6E56;
  --teal-l: #9FE1CB;
  --pur:    #7F77DD;
  --pur-d:  #1D1B30;
  --pur-b:  #534AB7;
  --g100:   rgba(241,239,232,0.95);
  --g300:   rgba(241,239,232,0.65);
  --g500:   rgba(241,239,232,0.42);
  --g700:   rgba(241,239,232,0.25);
  --g800:   rgba(241,239,232,0.15);
  --bg:     #0a0e14;
  --pill:   100px;
  --fd:     'DM Serif Display', Georgia, serif;
  --fb:     'DM Sans', system-ui, sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--g100);
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; font-family: var(--fb); border: none; background: none; }

/* ── Ambient background orbs ── */
/* Always include .bg-orbs + orb divs in body.
   These are what the glass refracts — essential for the effect. */
.bg-orbs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.o1 { width:640px; height:640px; background:#0d3d2e; top:-180px;  left:-180px;  opacity:.95; }
.o2 { width:500px; height:500px; background:#1a0e2e; bottom:-140px; right:-120px; opacity:.85; }
.o3 { width:340px; height:340px; background:#0f2a3a; top:38%;    left:52%;    opacity:.65; }
.o4 { width:260px; height:260px; background:#2a1a08; bottom:22%; left:8%;     opacity:.55; }
.o5 { width:200px; height:200px; background:#04342C; top:20%;    right:12%;   opacity:.5;  }

/* ── Liquid Glass surface ──────────────────────────────────────
   The definitive glass recipe. Apply .glass to any container.

   Key layers:
   1. backdrop-filter — frosted blur + color saturation
   2. rgba fill — the glass tint
   3. box-shadow stack:
      outer diffuse shadow (depth)
      inset top → specular edge (most important — mimics glass thickness)
      inset sides → subtle thickness feel
      inset bottom → base shadow
   4. ::before diagonal shimmer → refraction / caustic light
──────────────────────────────────────────────────────────────── */
.glass {
  background: rgba(255,255,255,0.065);
  backdrop-filter: blur(32px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.05);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 12px 48px rgba(0,0,0,.5),
    0 2px 8px rgba(0,0,0,.3),
    inset 0 1.5px 0 rgba(255,255,255,.26),
    inset 1px 0 0 rgba(255,255,255,.1),
    inset -1px 0 0 rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(0,0,0,.25);
  position: relative;
  overflow: hidden;
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    128deg,
    rgba(255,255,255,.09) 0%,
    rgba(255,255,255,.03) 35%,
    transparent 55%,
    rgba(255,255,255,.02) 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.glass > * { position: relative; z-index: 1; }

/* Glass variants */
.glass-sm {
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow:
    0 6px 24px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.2);
  position: relative; overflow: hidden;
}
.glass-sm::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(128deg, rgba(255,255,255,.07) 0%, transparent 50%);
  border-radius: inherit; pointer-events: none; z-index: 0;
}
.glass-sm > * { position: relative; z-index: 1; }

/* ── Glass pill ── */
.g-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.g-pill-teal {
  background: rgba(93,202,165,.1);
  border: 1px solid rgba(93,202,165,.22);
  color: var(--teal);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 12px rgba(93,202,165,.1);
}
.g-pill-purple {
  background: rgba(127,119,221,.1);
  border: 1px solid rgba(127,119,221,.22);
  color: var(--pur);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 12px rgba(127,119,221,.1);
}
.g-pill-dim {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  color: var(--g500);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* ── Glass buttons ── */
.btn-glass-teal {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  padding: 12px 26px;
  border-radius: var(--pill);
  letter-spacing: .04em;
  cursor: pointer;
  font-family: var(--fb);
  background: rgba(29,158,117,.7);
  border: 1px solid rgba(93,202,165,.45);
  color: rgba(4,52,44,1);
  box-shadow:
    0 4px 24px rgba(29,158,117,.28),
    inset 0 1.5px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(0,0,0,.15);
  backdrop-filter: blur(8px);
  transition: opacity .15s, transform .12s;
}
.btn-glass-teal:hover  { opacity:.88; transform:scale(1.015); }
.btn-glass-teal:active { transform:scale(.98); }

.btn-glass-dim {
  display: inline-block;
  font-size: 13px;
  font-weight: 400;
  padding: 12px 26px;
  border-radius: var(--pill);
  letter-spacing: .04em;
  cursor: pointer;
  font-family: var(--fb);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--g500);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  transition: opacity .15s, transform .12s;
}
.btn-glass-dim:hover  { opacity:.85; }
.btn-glass-dim:active { transform:scale(.98); }

/* ── Nav ── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 64px;
  background: rgba(10,14,20,.55);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.04);
}
.nav-logo {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(93,202,165,.8);
}
.nav-links { display: flex; gap: 32px; }
.nav-links a {
  font-size: 13px;
  color: var(--g500);
  transition: color .15s;
}
.nav-links a:hover { color: var(--g100); }
.nav-cta {
  font-size: 12px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: var(--pill);
  background: rgba(29,158,117,.65);
  border: 1px solid rgba(93,202,165,.4);
  color: rgba(4,52,44,1);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.3);
  letter-spacing: .04em;
  transition: opacity .15s;
}
.nav-cta:hover { opacity:.85; }

/* ── Section helpers ── */
.section { padding: 80px 48px; position: relative; z-index: 2; }
.section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(93,202,165,.7);
  margin-bottom: 10px;
}
.section h2 {
  font-family: var(--fd);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.12;
  color: var(--g100);
  margin-bottom: 14px;
}
.section h2 em { font-style: italic; color: var(--teal); }
.section-desc {
  font-size: 15px;
  font-weight: 300;
  color: var(--g500);
  max-width: 540px;
  line-height: 1.75;
  margin-bottom: 40px;
}

/* ── Feature cards ── */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.feat-card { padding: 22px 20px 20px; }
.feat-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.fi-t {
  background: rgba(93,202,165,.1);
  border: 1px solid rgba(93,202,165,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.fi-p {
  background: rgba(127,119,221,.1);
  border: 1px solid rgba(127,119,221,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.feat-icon svg { width:18px; height:18px; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.fi-t svg { stroke: var(--teal); }
.fi-p svg { stroke: var(--pur); }
.feat-title { font-size:14px; font-weight:500; color:var(--g100); margin-bottom:6px; }
.feat-body  { font-size:12px; color:var(--g500); line-height:1.65; font-weight:300; }

/* ── Stats ── */
.stat-card { padding: 22px 12px 18px; text-align: center; }
.stat-n {
  font-family: var(--fd);
  font-size: 40px; color: var(--teal);
  line-height: 1; margin-bottom: 6px;
}
.stat-l {
  font-size:10px; color:var(--g700);
  text-transform:uppercase; letter-spacing:.09em;
}

/* ── Tier cards ── */
.tier-teal {
  background: rgba(93,202,165,.08);
  backdrop-filter: blur(32px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.05);
  border: 1px solid rgba(93,202,165,.2);
  border-radius: 28px;
  box-shadow:
    0 12px 48px rgba(0,0,0,.4),
    inset 0 1.5px 0 rgba(93,202,165,.3),
    inset 0 -1px 0 rgba(0,0,0,.2);
  position: relative; overflow: hidden;
}
.tier-teal::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(128deg, rgba(93,202,165,.08) 0%, transparent 50%);
  border-radius: inherit; pointer-events: none;
}
.tier-teal > * { position: relative; z-index: 1; }

/* ── Role cards ── */
.role-card { padding: 20px 22px; }
.role-name { font-size:14px; font-weight:500; margin-bottom:12px; }
.rn-t { color:var(--teal); }
.rn-p { color:var(--pur); }
.perm-list { display:flex; flex-direction:column; gap:7px; }
.perm { font-size:12px; display:flex; align-items:center; gap:8px; font-weight:300; }
.perm.yes { color:var(--g500); }
.perm.no  { color:var(--g800); }
.pm { font-size:10px; width:14px; text-align:center; flex-shrink:0; }

/* ── Footer ── */
.site-footer {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 32px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  background: rgba(10,14,20,.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.footer-logo { font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(93,202,165,.55); margin-bottom:4px; }
.footer-tag  { font-size:12px; color:var(--g800); font-weight:300; }
.tech-stack  { display:flex; gap:7px; flex-wrap:wrap; }
.tech {
  font-size:11px; color:var(--g700); font-weight:300;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 6px; padding: 3px 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.footer-copy { font-size:11px; color:var(--g800); font-weight:300; }

/* ── Trust strip ── */
.trust-strip {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 15px 48px;
  display: flex; gap: 36px;
  justify-content: center; flex-wrap: wrap;
}
.strip-item { font-size:12px; color:var(--g700); display:flex; align-items:center; gap:8px; font-weight:300; }
.strip-dot  { width:5px; height:5px; border-radius:50%; background:var(--teal); flex-shrink:0; }

/* ── Key / password unlock ── */
.key-btn {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 50;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex; align-items: center; justify-content: center;
  opacity: .2; transition: opacity .2s; cursor: pointer;
}
.key-btn:hover { opacity:.65; }
.key-btn svg { width:14px; height:14px; stroke:rgba(241,239,232,.85); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.pw-drawer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 60;
  padding: 20px 24px 36px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: rgba(10,14,20,.65);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 -8px 32px rgba(0,0,0,.4);
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.pw-drawer.open { transform: translateY(0); }
.pw-handle { width:28px; height:3px; background:rgba(255,255,255,.18); border-radius:2px; margin-bottom:6px; }
.pw-label  { font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--g700); }
.pw-row    { display:flex; gap:8px; width:100%; max-width:320px; }

.pw-input {
  flex:1;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--pill);
  padding: 10px 16px;
  font-size: 13px; font-family: var(--fb);
  color: var(--g100); outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.2);
  backdrop-filter: blur(8px);
  transition: border-color .15s;
}
.pw-input::placeholder { color:var(--g800); }
.pw-input:focus { border-color:rgba(93,202,165,.4); }
.pw-input.shake { animation:shake .35s ease; border-color:rgba(226,75,74,.6); }

.pw-submit {
  background: rgba(29,158,117,.65);
  border: 1px solid rgba(93,202,165,.4);
  color: rgba(4,52,44,1);
  font-size: 12px; font-weight: 500;
  padding: 10px 18px; border-radius: var(--pill);
  cursor: pointer; font-family: var(--fb);
  letter-spacing: .04em; white-space: nowrap;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.3);
  transition: opacity .15s;
}
.pw-submit:hover { opacity:.85; }
.pw-error { font-size:11px; color:rgba(226,75,74,.8); min-height:14px; text-align:center; }
.pw-close {
  position:absolute; top:16px; right:18px;
  background:none; border:none; color:var(--g700);
  font-size:20px; line-height:1; cursor:pointer; padding:4px;
  transition:color .15s;
}
.pw-close:hover { color:var(--g300); }

.unlock-flash {
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  display:none; align-items:center; justify-content:center;
  font-family:var(--fd); font-size:28px; font-style:italic;
  color:var(--teal); opacity:0; transition:opacity .3s ease;
}

/* ── Animations ── */
@keyframes pulse  { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes shake  {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}

.fade-up   { animation:fadeUp .6s ease both; }
.fade-up-1 { animation-delay:.1s; }
.fade-up-2 { animation-delay:.22s; }
.fade-up-3 { animation-delay:.34s; }

/* ── Responsive ── */
@media (max-width:900px) {
  .feat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .site-nav { padding:0 20px; }
  .nav-links { display:none; }
  .section { padding:56px 20px; }
  .trust-strip { padding:14px 20px; gap:16px; }
  .site-footer { padding:28px 20px; flex-direction:column; align-items:flex-start; }
  .feat-grid { grid-template-columns:1fr; }
}