:root{
  --bg: #0B0A09;
  --bg-raise: #17140F;
  --bg-raise-2: #1F1B15;
  --ink: #F6F2EA;
  --body: #C7C0B4;
  --muted: #79746A;
  --accent-a: #FF8F5E;
  --accent-b: #8C9EFF;
  --hairline: rgba(246,242,234,0.09);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{ font-family:'Inter Tight','Inter',sans-serif; color:var(--ink); margin:0; }
p{ margin:0; }
a{ color:inherit; }
button{ font-family:inherit; border:none; }

.narrow{ max-width:640px; margin:0 auto; text-align:center; }

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; font-weight:600; text-decoration:none; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(120deg,var(--accent-a),var(--accent-b));
  color:#18120A;
  padding:0.95rem 1.85rem;
  font-size:1rem;
}
.btn-primary:not(:disabled):hover{ transform:translateY(-1px); }
.btn-primary:disabled{ opacity:0.55; cursor:default; transform:none; }
.btn-small{ padding:0.6rem 1.2rem; font-size:0.86rem; }
.btn-text{
  background:none; color:var(--body); padding:0; font-weight:500; font-size:0.92rem;
  border-bottom:1px solid var(--hairline); border-radius:0;
}
.btn-text:hover{ color:var(--ink); border-color:var(--body); }
.btn-text:disabled{ opacity:0.5; cursor:default; }
.link-row{ display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; margin-top:1.4rem; }

/* ---------------- NAV ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  background:rgba(11,10,9,0.7);
  border-bottom:1px solid var(--hairline);
}
.nav-inner{
  max-width:1100px; margin:0 auto; padding:1rem 1.75rem;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo{ font-weight:700; font-size:1.05rem; letter-spacing:-0.01em; text-decoration:none; }

/* ---------------- HERO ---------------- */
.hero{
  padding:10.5rem 1.75rem 4.5rem;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.8rem;
}
.hero-text{ max-width:700px; animation:hero-in 1s cubic-bezier(.2,.7,.2,1) both; }
.hero-text h1{
  font-size:clamp(2.3rem,5.6vw,4rem); font-weight:800; line-height:1.1; letter-spacing:-0.02em;
}
.hero-text .sub{
  margin-top:1.3rem; font-size:clamp(1.02rem,2vw,1.18rem); line-height:1.6;
  color:var(--body); max-width:48ch; margin-left:auto; margin-right:auto;
}
.hero-cta{
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
  margin-top:0.4rem; animation:hero-in 1.05s cubic-bezier(.2,.7,.2,1) both; animation-delay:.05s;
}
.hero-cta .reassure{ font-size:0.85rem; color:var(--muted); }
.hero-cta .secondary-link{ font-size:0.85rem; color:var(--muted); margin-top:0.15rem; }
.hero-cta .secondary-link a{ color:var(--body); border-bottom:1px solid var(--hairline); }
.hero-cta .secondary-link a:hover{ color:var(--ink); border-color:var(--body); }

@keyframes hero-in{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }

.device-stage{
  position:relative; width:min(250px, 60vw); margin-top:0.4rem;
  animation:hero-in 1.2s cubic-bezier(.2,.7,.2,1) both; animation-delay:0.12s;
}
.device{
  position:relative; aspect-ratio: 9 / 17.5; border-radius:2.4rem;
  background:linear-gradient(180deg,var(--bg-raise-2),var(--bg-raise) 70%);
  border:1px solid var(--hairline);
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.06);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  padding:1.7rem 1.1rem; transform:rotate(-2.5deg);
}
.ripple-field{ position:relative; width:96px; height:96px; display:flex; align-items:center; justify-content:center; }
.ripple{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(255,143,94,0.4); animation:ripple 3.2s ease-out infinite; }
.ripple.r2{ animation-delay:1.05s; border-color:rgba(140,158,255,0.35); }
.ripple.r3{ animation-delay:2.1s; border-color:rgba(255,143,94,0.28); }
@keyframes ripple{ 0%{ transform:scale(0.72); opacity:0;} 18%{ opacity:0.9;} 100%{ transform:scale(1.55); opacity:0;} }
.orb-core{
  width:44px; height:44px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #FFC79A, var(--accent-a) 55%, var(--accent-b) 130%);
  box-shadow:0 0 38px 6px rgba(255,143,94,0.45);
  animation:breathe 4.4s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }
.waveform{ display:flex; align-items:flex-end; gap:3px; height:34px; }
.waveform span{
  display:block; width:3px; border-radius:2px;
  background:linear-gradient(180deg,var(--accent-a),var(--accent-b));
  height:var(--h); animation:eq 1.7s ease-in-out infinite alternate; animation-delay:var(--d); opacity:0.85;
}
@keyframes eq{ from{ transform:scaleY(0.4);} to{ transform:scaleY(1);} }
.device-time{ font-size:0.74rem; color:var(--muted); font-variant-numeric:tabular-nums; }

.scroll-cue{ margin-top:0.2rem; opacity:0.55; animation:bob 2.2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* ---------------- SECTION RHYTHM ---------------- */
section{ padding:6.2rem 1.75rem; border-top:1px solid var(--hairline); }
section h2{ font-size:clamp(1.65rem,3.2vw,2.25rem); font-weight:700; line-height:1.2; letter-spacing:-0.01em; }

/* ---------------- TWO-COLUMN (used by "it talks back") ---------------- */
.two-col-inner{
  max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:2.8rem; align-items:center;
}
@media (min-width:860px){
  .two-col-inner{ grid-template-columns:0.85fr 1.15fr; }
  .two-col-inner .copy, .two-col-inner .copy h2, .two-col-inner .copy p{ text-align:left; }
  .two-col-inner .copy{ margin:0; max-width:540px; }
}
.two-col-inner .visual{ display:flex; justify-content:center; }
.two-col-inner .copy{ text-align:center; max-width:540px; margin:0 auto; }
.two-col-inner .copy p.lead{ margin-top:1.25rem; font-size:1.05rem; line-height:1.7; }

.chat-mock{
  width:100%; max-width:280px; display:flex; flex-direction:column; gap:0.7rem;
  padding:1.4rem; border-radius:1.3rem; background:var(--bg-raise); border:1px solid var(--hairline);
}
.bubble{ padding:0.65rem 0.95rem; border-radius:1.1rem; font-size:0.88rem; line-height:1.5; max-width:88%; }
.bubble.user{
  align-self:flex-end; background:var(--bg-raise-2); color:var(--body);
  border-bottom-right-radius:0.3rem;
}
.bubble.reply{
  align-self:flex-start; color:var(--ink); border-bottom-left-radius:0.3rem;
  background:linear-gradient(120deg, rgba(255,143,94,0.16), rgba(140,158,255,0.16));
  border:1px solid rgba(255,143,94,0.25);
}
.diff-list{ margin-top:1.6rem; padding-top:1.5rem; border-top:1px solid var(--hairline); }
.diff-list p{ font-size:0.98rem; line-height:1.7; margin-bottom:0.9rem; color:var(--body); }
.diff-list p:last-child{ margin-bottom:0; }
.diff-list strong{ color:var(--ink); font-weight:600; }

/* ---------------- RECORD ANYWHERE ---------------- */
.anywhere .lines{
  display:flex; flex-direction:column; align-items:center; gap:1.15rem; margin:2.2rem 0 1.8rem;
}
.line-item{ display:flex; align-items:center; gap:0.9rem; max-width:440px; text-align:left; }
.line-icon{ flex-shrink:0; color:var(--accent-a); opacity:0.9; }
.line-item:nth-child(2) .line-icon{ color:var(--accent-b); }
.anywhere .line{
  font-style:italic; font-size:clamp(1.02rem,2.1vw,1.2rem);
  color:var(--ink); opacity:0.86; line-height:1.5; margin:0;
}
.anywhere p.body{ margin-top:1.6rem; font-size:1.04rem; line-height:1.75; }

.callout{
  max-width:660px; margin:2.8rem auto 0;
  padding-left:1.5rem; border-left:2px solid var(--accent-a);
}
.callout-inner{ display:flex; flex-direction:column; gap:1.4rem; align-items:flex-start; text-align:left; }
@media (min-width:600px){
  .callout-inner{ flex-direction:row; align-items:center; gap:1.8rem; }
  .call-mock{ flex-shrink:0; }
}
.call-mock{ width:100px; text-align:center; margin:0 auto; }
.call-ring-wrap{
  position:relative; width:60px; height:60px; margin:0 auto 0.55rem;
  display:flex; align-items:center; justify-content:center;
}
.call-mock .ripple{ animation-duration:2.3s; }
.call-avatar{
  width:32px; height:32px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #FFC79A, var(--accent-a) 55%, var(--accent-b) 130%);
  box-shadow:0 0 22px 4px rgba(255,143,94,0.4);
}
.call-name{ font-size:0.85rem; font-weight:600; color:var(--ink); margin:0; }
.call-status{ font-size:0.72rem; color:var(--muted); margin:0.15rem 0 0; }
.callout .callout-label{ font-size:0.88rem; color:var(--muted); margin-bottom:0.5rem; }
.callout p.callout-body{ font-size:1.02rem; line-height:1.7; color:var(--body); }

/* ---------------- THREE WAYS TO LOOK BACK ---------------- */
.lookback h2{ text-align:center; margin-bottom:3.2rem; }
.panels3{
  max-width:980px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:2.6rem;
}
@media (min-width:800px){
  .panels3{ grid-template-columns:repeat(3,1fr); gap:0; }
  .panel3{ padding:0 1.9rem; }
  .panel3.mid{ border-left:1px solid var(--hairline); border-right:1px solid var(--hairline); }
}
.panel3 .rule{ width:2rem; height:2px; border-radius:2px; margin:0 auto 1.1rem; }
.panel3.a .rule{ background:var(--accent-a); }
.panel3.b .rule{ background:var(--accent-b); }
.panel3.c .rule{ background:linear-gradient(90deg,var(--accent-a),var(--accent-b)); }
.panel3{ text-align:center; }
.panel3 h3{ font-size:1.15rem; font-weight:700; margin-bottom:0.6rem; }
.panel3 p{ font-size:0.98rem; line-height:1.68; max-width:30ch; margin:0 auto; }

.mock-card{
  width:100%; max-width:220px; margin:0 auto 1.5rem; padding:1.15rem 1.25rem;
  border-radius:1rem; background:var(--bg-raise); border:1px solid var(--hairline); text-align:left;
}
.skel{ display:block; height:8px; border-radius:4px; background:var(--hairline); margin-bottom:9px; }
.skel:last-child{ margin-bottom:0; }
.mock-card.themes{ text-align:center; }
.pill{ display:inline-block; padding:0.36rem 0.75rem; border-radius:999px; font-size:0.74rem; margin:0.2rem; }
.pill.a{ background:rgba(255,143,94,0.14); color:var(--accent-a); border:1px solid rgba(255,143,94,0.32); }
.pill.b{ background:rgba(140,158,255,0.14); color:var(--accent-b); border:1px solid rgba(140,158,255,0.32); }
.t-line{ display:flex; gap:0.55rem; font-size:0.74rem; padding:0.3rem 0.35rem; border-radius:0.5rem; margin-bottom:0.15rem; }
.t-time{ color:var(--muted); font-variant-numeric:tabular-nums; flex-shrink:0; }
.t-text{ color:var(--body); }
.t-line.hl{ background:rgba(140,158,255,0.16); }
.t-line.hl .t-text{ color:var(--ink); }

/* ---------------- FINAL / FEEDBACK CTA (on index.html) ---------------- */
.final{ text-align:center; }
.final .closing-line{
  font-size:clamp(1.6rem,3.8vw,2.3rem); font-weight:700; color:var(--ink); letter-spacing:-0.015em;
}
.final .final-sub{ margin:1.2rem auto 2.4rem; max-width:48ch; font-size:1.03rem; line-height:1.7; }

.reaction{ margin-top:0.2rem; }
.reaction-label{ font-size:0.95rem; color:var(--body); margin-bottom:1rem; }
.reaction-buttons{ display:flex; gap:0.9rem; justify-content:center; flex-wrap:wrap; }
.reaction-result{ margin-top:1.1rem; font-size:0.85rem; color:var(--muted); min-height:1.3em; }

/* ---------------- FOOTER ---------------- */
footer{ padding:3rem 1.75rem 4rem; text-align:center; color:var(--muted); font-size:0.85rem; line-height:1.7; }
footer .mark{ color:var(--body); font-weight:600; margin-bottom:0.35rem; }

/* ---------------- FEEDBACK PAGE ---------------- */
.feedback-hero{ padding:9.5rem 1.75rem 2.5rem; text-align:center; border-top:none; }
.feedback-hero h1{
  font-size:clamp(2rem,4.6vw,3rem); font-weight:800; line-height:1.12; letter-spacing:-0.02em;
}
.feedback-hero .sub{
  margin-top:1.1rem; font-size:1.05rem; line-height:1.6; color:var(--body);
  max-width:44ch; margin-left:auto; margin-right:auto;
}
.feedback-form-section{ padding:0 1.75rem 7rem; border-top:none; }
.form-narrow{ max-width:520px; }
.field{ margin-bottom:1.4rem; text-align:left; }
.field label{ display:block; font-size:0.9rem; color:var(--body); margin-bottom:0.5rem; font-weight:500; }
.field label .optional{ color:var(--muted); font-weight:400; }
.field textarea, .field input{
  width:100%; padding:0.85rem 1rem; border-radius:0.9rem;
  background:var(--bg-raise); border:1px solid var(--hairline); color:var(--ink);
  font-family:inherit; font-size:0.98rem; line-height:1.6; resize:vertical;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea::placeholder, .field input::placeholder{ color:var(--muted); }
.field textarea:focus, .field input:focus{
  outline:none; border-color:var(--accent-a);
  box-shadow:0 0 0 3px rgba(255,143,94,0.18);
}
.field-hint{ margin-top:0.5rem; font-size:0.85rem; color:var(--muted); line-height:1.55; }
#feedback-form .btn-primary{ width:100%; padding:1rem; font-size:1rem; margin-top:0.2rem; }
.form-note{ margin-top:1rem; font-size:0.82rem; color:var(--muted); text-align:center; }
.form-success{ text-align:center; padding:2rem 0; }
.form-success .success-line{ font-size:1.5rem; font-weight:700; color:var(--ink); }
.form-success .success-sub{ margin-top:0.6rem; color:var(--body); font-size:1rem; }
.form-success .btn-text{ display:inline-block; margin-top:1.6rem; }
.form-error{ margin-top:1rem; text-align:center; color:var(--accent-a); font-size:0.9rem; }

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