/* ===========================================================================
   KinkzAI — site styles
   ---------------------------------------------------------------------------
   Extends the app's identity rather than inventing a second one: the same
   near-black ground, the same pink→ice gradient, the same keycap buttons.
   Someone who downloads the app should recognise it instantly.

   The gradient is spent in ONE place per screen. It marks the wordmark and
   the affinity bar and nothing else — used everywhere it stops meaning
   anything.
   =========================================================================== */

:root {
  --ink:      #e8e8ee;
  --dim:      #9a8aa2;
  --faint:    #6a6b73;
  --ground:   #0a0b10;
  --panel:    #16171d;
  --edge:     rgba(255, 255, 255, 0.10);
  --pink:     #ff4fa3;
  --pink-lit: #ff7ec2;
  --ice:      #bfe7ff;
  --sweep:    linear-gradient(105deg, #ff4fa3, #ff7ec2 40%, #bfe7ff 84%, #fff);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* A single soft bloom behind the hero, so the page has a light source rather
   than being flat black. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 420px at 22% -8%, rgba(255, 79, 163, 0.13), transparent 68%),
    radial-gradient(620px 380px at 88% 4%, rgba(143, 212, 255, 0.08), transparent 70%);
  z-index: 0;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- wordmark ----------------------------------------------------------- */
.mark {
  font-family: "Bricolage Grotesque", "Instrument Sans", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}
.mark span {
  background: var(--sweep);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- header ------------------------------------------------------------- */
header {
  position: relative;
  z-index: 3;
  padding: 26px 0 0;
}
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.bar .mark { font-size: 1.5rem; }
nav { display: flex; align-items: center; gap: 26px; }
nav a {
  color: var(--dim);
  text-decoration: none;
  font-size: 0.87rem;
}
nav a:hover { color: var(--ink); }

/* ---- keycap button ------------------------------------------------------ */
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  color: #1b0a14;
  background: linear-gradient(180deg, #ff77b8, var(--pink));
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-top-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.07s, box-shadow 0.07s, filter 0.15s;
}
.key:hover { filter: brightness(1.08); }
.key:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.key.ghost {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(48, 49, 56, 0.9), rgba(24, 25, 30, 0.9));
  border-color: var(--edge);
  border-top-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }

/* ---- section furniture -------------------------------------------------- */
section { padding: 88px 0; }
.eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 12px;
}
h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 14px;
}
.lede {
  color: var(--dim);
  font-size: 1.02rem;
  max-width: 54ch;
  margin: 0 0 40px;
}

/* ---- hero --------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 76px 0 96px;
}
.hero h1 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(2.3rem, 5vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
}
.hero p {
  color: var(--dim);
  font-size: 1.08rem;
  max-width: 46ch;
  margin: 0 0 30px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-note {
  margin: 18px 0 0;
  font-size: 0.82rem;
  color: var(--faint);
}

/* Portrait frame — sized 3:4 so it holds its shape before any art is added.
   The empty state is designed, not broken: it says what belongs there. */
.portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 79, 163, 0.12), transparent 60%),
    var(--panel);
  border: 1px solid var(--edge);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portrait-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--faint);
  font-size: 0.8rem;
  text-align: center;
  padding: 24px;
}
.portrait-empty b { color: var(--dim); font-weight: 600; }

/* The signature: her live state, the thing nothing else has. Sits over the
   portrait's lower edge like the app's own status panels. */
.state {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 13px 15px;
  border-radius: 12px;
  background: rgba(10, 11, 16, 0.86);
  border: 1px solid var(--edge);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.state-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.state-mood {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  transition: opacity 0.3s;
}
.state-label {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}
.state-note {
  font-size: 0.76rem;
  color: var(--dim);
  min-height: 2.4em;
  transition: opacity 0.3s;
}
.state.turning .state-mood,
.state.turning .state-note { opacity: 0.25; }

.meter {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin: 10px 0 7px;
}
.meter i {
  display: block;
  height: 100%;
  width: 18%;
  border-radius: 3px;
  background: var(--sweep);
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.state-foot {
  display: flex;
  justify-content: space-between;
  font-size: 0.66rem;
  color: var(--faint);
}

/* ---- two modes ---------------------------------------------------------- */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mode {
  padding: 28px 26px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--edge);
}
.mode h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.mode .who {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 16px;
}
.mode ul { margin: 0; padding: 0; list-style: none; }
.mode li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  color: var(--dim);
  font-size: 0.92rem;
}
.mode li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--ice);
  opacity: 0.55;
}
.mode.paid li::before { background: var(--pink); }

/* ---- plans -------------------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.plan {
  padding: 22px 16px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--edge);
  text-align: center;
}
.plan.pick {
  border-color: rgba(255, 79, 163, 0.5);
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(255, 79, 163, 0.12), transparent 70%),
    var(--panel);
}
.plan .name {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}
.plan .price {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.plan .price small {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--faint);
  letter-spacing: 0;
}
.plan .msgs {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--edge);
  font-size: 0.84rem;
  color: var(--ink);
}
.plan .msgs span { display: block; color: var(--faint); font-size: 0.72rem; }
.plan .slots { margin-top: 8px; font-size: 0.75rem; color: var(--dim); }
.plans-note {
  margin-top: 22px;
  font-size: 0.84rem;
  color: var(--faint);
  text-align: center;
}

/* ---- footer ------------------------------------------------------------- */
footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--edge);
  padding: 34px 0 46px;
  margin-top: 30px;
}
.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.foot .mark { font-size: 1.05rem; }
.foot nav a { font-size: 0.83rem; }
.foot-fine {
  margin: 20px 0 0;
  font-size: 0.76rem;
  color: var(--faint);
}

/* ---- legal pages -------------------------------------------------------- */
.legal { padding: 56px 0 20px; max-width: 760px; }
.legal h1 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.legal .stamp { color: var(--faint); font-size: 0.84rem; margin: 0 0 40px; }
.legal h4 {
  font-family: "Bricolage Grotesque", sans-serif;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 34px 0 8px;
}
.legal h5 {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
  margin: 20px 0 6px;
}
.legal p { color: var(--dim); font-size: 0.94rem; margin: 0 0 12px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { color: var(--dim); font-size: 0.94rem; margin-bottom: 8px; }
.legal a { color: var(--pink-lit); }
.legal strong { color: var(--ink); }
.back {
  display: inline-block;
  margin-bottom: 30px;
  color: var(--dim);
  text-decoration: none;
  font-size: 0.86rem;
}
.back:hover { color: var(--ink); }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 48px; }
  .hero .portrait { max-width: 380px; margin: 0 auto; }
  .modes { grid-template-columns: 1fr; }
  .plans { grid-template-columns: repeat(2, 1fr); }
  section { padding: 64px 0; }
}
@media (max-width: 560px) {
  nav { gap: 16px; }
  nav a.hide-sm { display: none; }
  .plans { grid-template-columns: 1fr; }
  .foot { flex-direction: column; align-items: flex-start; }
}