:root{
  --bg:#26192C;   /* match the video */
  --bg-2:#26192C; /* same, since we’re removing the gradient */
  --ink:#f7f2ff;
  --muted:#cbbfe0;
  --accent:#ff9c3a;
  --accent-2:#ff7a3d;
  --teal:#39d0c7;
  --gold:#f5c454;
  --violet:#7b5cff;
  --shadow:0 10px 40px rgba(0,0,0,.35);
}


*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color:var(--ink);
  background: var(--bg);   /* ← single solid color */
  overflow-x:hidden;
}


/* Sections */
section{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem 1.25rem 3rem;
  position:relative;
}
.wrap{
  width:min(1200px, 94vw);
  margin:0 auto;
}

h1,h2,h3{margin:0 0 .5rem 0; line-height:1.1}
h1{font-size: clamp(2.2rem, 5vw, 4rem);}
h2{font-size: clamp(1.8rem, 4vw, 2.8rem);}
p{
  margin:.5rem 0 0 0;
  color:var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}

/* Hero */
.hero{
  text-align:center;
}
.logo-hero{
  width:min(420px, 64vw);
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.45));
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe {
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-4px) scale(1.015); }
}
.hero .cta{
  margin-top:2rem;
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}
.btn{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#1a0f24;
  font-weight:700;
  padding: .95rem 1.2rem;
  border-radius:14px;
  border:none;
  cursor:pointer;
  box-shadow: var(--shadow);
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-2px); filter:brightness(1.05); }
.btn.ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid rgba(255,255,255,.2);
}

/* Cat Talk */
.card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding:1.25rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}
.grid{
  display:grid;
  gap:1rem;
}
.grid.cols-2{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.talk-bubble{
  position:relative;
  padding:1rem 1.1rem 1.1rem;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.talk-bubble::after{
  content:"";
  position:absolute;
  left:18px;
  bottom:-12px;
  border-width:12px 12px 0 0;
  border-style:solid;
  border-color: rgba(255,255,255,.12) transparent transparent transparent;
  filter: blur(.2px);
}
.talk-line{
  font-weight:700;
  color:#fff;
}
.translate{
  border-left:3px solid rgba(255,255,255,.08);
  padding-left:.75rem;
  margin-top:.5rem;
  color:var(--muted);
}

.switcher{
  margin-top:1rem;
  display:flex; gap:.5rem; align-items:center; justify-content:center;
}
.switcher input{ display:none; }
.switch{
  width:62px;height:34px;background:rgba(255,255,255,.12);
  border-radius:999px; position:relative; cursor:pointer;
}
.knob{
  position:absolute; top:3px; left:3px; width:28px; height:28px;
  background:#fff; border-radius:50%; transition: left .2s ease, background .2s ease;
}
input:checked + .switch .knob{ left:31px; background:var(--accent); }

/* Buckets */
.buckets{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top:1rem;
}
.bucket{
  padding:1rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.bucket h3{ font-size:1.2rem; margin-bottom:.25rem; }
.tag{
  display:inline-block; padding:.25rem .55rem; border-radius:999px;
  font-size:.85rem; font-weight:700; color:#1a0f24; margin:.35rem .25rem 0 0;
}
.tag.active{ background:var(--teal);}
.tag.chill{ background:var(--violet); color:#fff;}
.tag.fresh{ background:var(--teal); color:#1a0f24;}
.tag.prime{ background:#9b7aff; color:#fff;}
.tag.wise{ background:var(--gold); color:#1a0f24;}

/* Promise */
.promise-points{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top:1rem;
}
.point{ padding:1rem; border-radius:14px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); }
.point h4{ margin:.25rem 0; }
.icon{
  width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(255,156,58,.25), rgba(255,122,61,.18));
}

/* Demo */
.demo{
  margin-top:1rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:1rem;
}
.demo .row{
  display:grid; gap:.75rem; grid-template-columns: 1fr auto;
  align-items:center; margin:.25rem 0;
}
.paw{ font-size:1.2rem; margin-right:.25rem;}
.bar{
  height:12px; border-radius:8px; overflow:hidden; background:rgba(255,255,255,.12);
}
.fill{
  height:100%; border-radius:8px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  width:0%;
  transition: width 1s ease;
}

/* Pricing */
.pricing{
  display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top:1rem;
}
.price-card{
  border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:1.25rem; background:rgba(255,255,255,.04);
}
.price{
  font-size:2rem; font-weight:800; color:#fff; margin:.5rem 0;
}
.small{ color:var(--muted); font-size:.95rem; }

/* Closing */
.closing{ text-align:center; }
.badge{
  margin:.75rem auto 0; display:inline-flex; gap:.5rem; align-items:center;
  padding:.45rem .7rem; border-radius:999px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.badge img{ width:20px; height:20px; }

/* Anchor CTA */
.fab{
  position:fixed; right:14px; bottom:14px; z-index:50;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#1a0f24; padding:.9rem 1.1rem; border-radius:999px; box-shadow: var(--shadow);
  font-weight:800; border:none; cursor:pointer;
}
.fab:hover{ transform: translateY(-2px); }

/* Utility */
.center{ text-align:center; }
.mt1{ margin-top:1rem; }
.mt2{ margin-top:2rem; }
.mt3{ margin-top:3rem; }

a.btn{ text-decoration:none; display:inline-block; }
a{ color:#b4a4ff; }