/* =====================================================================
   KIN — shared design system
   css/kin4471.css
   Tokens: black-void ground, brushed-silver glass, Playfair Display for
   voice, Inter for reading. The signature motif is a pair of glass orbs
   that drift apart and merge — two people, one room.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* ground */
  --bg: #08080a;
  --bg-soft: #0c0c0f;
  --panel: #121215;
  --panel-2: #17171b;

  /* glass */
  --glass: rgba(255,255,255,0.055);
  --glass-strong: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.20);

  /* ink */
  --text: #f2f2f4;
  --text-dim: #9d9da5;
  --text-faint: #67676f;

  /* metal accent */
  --silver: #eceef1;
  --silver-deep: #c7c9ce;

  /* call semantics */
  --go: #35d399;
  --go-deep: #1fae7c;
  --end: #f0453d;
  --end-deep: #c93830;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-soft: 0 24px 70px rgba(0,0,0,0.5);
  --shadow-lift: 0 10px 30px rgba(0,0,0,0.35);

  --ease: cubic-bezier(.16,.84,.44,1);

  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ height:100%; -webkit-text-size-adjust: 100%; }
body{
  min-height:100%;
  margin:0;
  background: radial-gradient(120% 90% at 18% -10%, #17171b 0%, #0c0c0f 42%, #08080a 100%);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; margin:0; letter-spacing:-0.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background: rgba(236,238,241,0.22); color:#fff; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.14); border-radius:10px; border:2px solid transparent; background-clip:padding-box; }

:focus-visible{
  outline: 2px solid rgba(236,238,241,0.75);
  outline-offset: 3px;
  border-radius: 6px;
}

.container{ width:100%; max-width:1160px; margin:0 auto; padding:0 28px; }

/* ---------- glass primitives ---------- */
.glass{
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), var(--shadow-soft);
}
.glass-strong{
  background: var(--glass-strong);
  border: 1px solid var(--border-strong);
}

/* ---------- buttons ---------- */
.btn{
  --h: 52px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height: var(--h);
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight:600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor:pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), opacity .2s ease;
  white-space: nowrap;
  user-select:none;
}
.btn:active{ transform: scale(0.97); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

.btn-primary{
  background: linear-gradient(180deg, #f5f6f8, #d7d9de);
  color:#0a0a0b;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 14px 30px rgba(0,0,0,0.35);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 18px 38px rgba(0,0,0,0.45); }

.btn-ghost{
  background: var(--glass);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover{ background: var(--glass-strong); border-color: rgba(255,255,255,0.3); }

.btn-go{
  background: linear-gradient(180deg, var(--go), var(--go-deep));
  color:#04231a;
  box-shadow: 0 14px 28px rgba(53,211,153,0.28);
}
.btn-go:hover{ transform: translateY(-1px); }

.btn-end{
  background: linear-gradient(180deg, var(--end), var(--end-deep));
  color:#2a0806;
  box-shadow: 0 14px 28px rgba(240,69,61,0.3);
}
.btn-end:hover{ transform: translateY(-1px); }

.btn-icon{
  --h: 52px;
  width: var(--h); height: var(--h); padding:0; border-radius:50%;
}

.btn-block{ width:100%; }

/* ---------- nav ---------- */
.kin-nav{
  position: sticky; top:0; z-index:40;
  padding: 16px 0;
}
.kin-nav .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.kin-nav-inner{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding: 10px 16px 10px 14px;
  border-radius: 999px;
}
.kin-brand{ display:flex; align-items:center; gap:11px; }
.kin-brand img{ width:34px; height:34px; border-radius: 9px; }
.kin-brand span{
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--silver);
}
.kin-links{ display:flex; align-items:center; gap:30px; }
.kin-links a{
  font-size: 0.88rem; color: var(--text-dim); font-weight:500;
  transition: color .25s ease;
}
.kin-links a:hover{ color: var(--text); }
.kin-nav-actions{ display:flex; align-items:center; gap:12px; }

/* ---------- footer ---------- */
.kin-footer{
  padding: 46px 0 34px;
  margin-top: 40px;
  border-top: 1px solid var(--border);
}
.kin-footer .container{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center;
}
.kin-footer-mark{ display:flex; align-items:center; gap:9px; margin-bottom:6px; opacity:0.9; }
.kin-footer-mark img{ width:20px; height:20px; border-radius:5px; }
.kin-footer-mark span{ font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--silver); }
.kin-footer p{ font-size: 0.8rem; color: var(--text-faint); letter-spacing:0.01em; }
.kin-footer .copyright{ color: var(--text-dim); }

/* ---------- signature: the kin orbs ---------- */
.kin-orbs{ position:relative; }
.kin-orb{
  position:absolute; border-radius:50%;
  filter: blur(0.5px);
  mix-blend-mode: screen;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.95), rgba(200,203,210,0.55) 45%, rgba(120,122,132,0.05) 72%);
}
@keyframes kin-drift-a{
  0%,100%{ transform: translate(-8%, -4%) scale(1); }
  50%{ transform: translate(6%, 4%) scale(1.05); }
}
@keyframes kin-drift-b{
  0%,100%{ transform: translate(8%, 4%) scale(1); }
  50%{ transform: translate(-6%, -4%) scale(1.04); }
}
@keyframes kin-pulse{
  0%,100%{ opacity:.55; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.08); }
}

/* ---------- toast ---------- */
.kin-toast{
  position: fixed; left:50%; bottom:34px; transform: translate(-50%, 20px);
  padding: 13px 22px; border-radius: 999px;
  font-size: 0.86rem; font-weight:500; color: var(--text);
  z-index: 200; opacity:0; pointer-events:none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.kin-toast.is-visible{ opacity:1; transform: translate(-50%, 0); pointer-events:auto; }

/* ---------- modal ---------- */
.kin-modal-backdrop{
  position: fixed; inset:0; background: rgba(5,5,6,0.6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding: 24px; z-index:100;
  opacity:0; pointer-events:none; transition: opacity .3s var(--ease);
}
.kin-modal-backdrop.is-open{ opacity:1; pointer-events:auto; }
.kin-modal{
  width: 100%; max-width: 420px;
  padding: 34px 30px 28px;
  transform: translateY(14px) scale(0.98);
  transition: transform .35s var(--ease);
}
.kin-modal-backdrop.is-open .kin-modal{ transform: translateY(0) scale(1); }
.kin-modal-close{
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--glass); border:1px solid var(--border);
  color: var(--text-dim); cursor:pointer;
}
.kin-modal-close:hover{ color: var(--text); }

/* ---------- form controls ---------- */
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.field label{ font-size:0.8rem; color: var(--text-dim); font-weight:500; letter-spacing:0.01em; }
.field input{
  height:50px; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04);
  border:1px solid var(--border);
  color: var(--text);
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  transition: border-color .25s ease, background .25s ease;
}
.field input::placeholder{ color: var(--text-faint); }
.field input:focus{ outline:none; border-color: rgba(236,238,241,0.5); background: rgba(255,255,255,0.06); }
.field-error{ font-size:0.78rem; color:#ff8a83; min-height:16px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim); font-weight:600;
}
.eyebrow::before{
  content:''; width:16px; height:1px; background: var(--text-faint);
}

.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

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

@media (max-width: 760px){
  .container{ padding:0 18px; }
  .kin-links{ display:none; }
}