:root {
  color-scheme: dark;
  --teal: #69d8c2;
  --teal-deep: #dfe5e4;
  --teal-050: rgba(255, 255, 255, .055);
  --ink: #f5f6f7;
  --slate: #adb2bb;
  --muted: #777e89;
  --coral: #f3f4f6;
  --coral-deep: #ffffff;
  --ground: #050607;
  --card: rgba(14, 16, 20, .72);
  --border: rgba(255, 255, 255, .085);
  --wa: #27c493;
  --wa-bubble: rgba(101, 214, 181, .13);
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", sans-serif;
  --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .025);
  --shadow-md: 0 24px 64px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .035);
  --shadow-lg: 0 54px 110px -44px rgba(0, 0, 0, .96), inset 0 1px 0 rgba(255, 255, 255, .05);
  --radius: 24px;
}

html {
  scroll-behavior: smooth;
  background: var(--ground);
}

body {
  position: relative;
  color: var(--slate);
  background:
    radial-gradient(ellipse 68% 42% at 78% 4%, rgba(255, 255, 255, .07), transparent 60%),
    radial-gradient(ellipse 46% 34% at 10% 37%, rgba(255, 255, 255, .035), transparent 66%),
    var(--ground);
  font-family: var(--sans);
  line-height: 1.62;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  width: min(70vw, 1050px);
  aspect-ratio: 1;
  top: -52vw;
  right: -19vw;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .1);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .24), transparent 12%),
    linear-gradient(145deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .012) 48%, rgba(255, 255, 255, .065));
  box-shadow: inset 34px 28px 80px rgba(255, 255, 255, .05), inset -44px -38px 100px rgba(0, 0, 0, .52);
  opacity: .72;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 88vw;
  height: 34vw;
  min-height: 360px;
  left: -8vw;
  bottom: -27vw;
  border-radius: 50% 50% 0 0 / 80% 72% 0 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(170deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .006) 60%);
  pointer-events: none;
}

h1,
h2,
h3 {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 650;
  letter-spacing: -.045em;
}

.wrap {
  max-width: 1180px;
}

header {
  background: rgba(5, 6, 7, .68);
  border-color: var(--border);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
  backdrop-filter: blur(24px) saturate(125%);
}

.nav {
  height: 72px;
}

/* a marca virou SVG inline (clinby-logo.svg): uma cor só, herdada por currentColor —
   o tile "C" do ::before saiu porque o ícone agora faz parte do próprio desenho */
.logo {
  color: var(--ink);
}

.nav-links {
  color: #9097a2;
}

.nav-links a,
.ghost,
.foot-links a {
  transition: color .18s ease;
}

.nav-links a:hover,
.ghost:hover,
.foot-links a:hover {
  color: #fff;
}

.ghost {
  color: #c8ccd2;
}

.btn {
  min-height: 48px;
  border-radius: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.btn-primary,
.btn-teal {
  color: #08090b;
  background: linear-gradient(180deg, #fff, #dfe2e6);
  box-shadow: 0 16px 38px -18px rgba(255, 255, 255, .42), inset 0 1px 0 #fff;
}

.btn-primary:hover,
.btn-teal:hover {
  color: #050607;
  background: #fff;
  box-shadow: 0 20px 44px -18px rgba(255, 255, 255, .5);
}

.btn-ghost {
  color: #e5e7ea;
  border-color: var(--border);
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .075);
}

.hero {
  min-height: 770px;
  padding: 104px 0 58px;
  overflow: hidden;
}

.hero::before {
  width: min(68vw, 920px);
  height: min(68vw, 920px);
  top: -46%;
  right: -19%;
  border: 1px solid rgba(255, 255, 255, .12);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .21), transparent 13%),
    radial-gradient(circle at 52% 48%, rgba(255, 255, 255, .06), transparent 55%),
    linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .01) 50%, rgba(255, 255, 255, .06));
  box-shadow: inset 30px 22px 70px rgba(255, 255, 255, .05), inset -38px -30px 90px rgba(0, 0, 0, .55);
  filter: none;
  opacity: .68;
}

.hero::after {
  width: 78vw;
  height: 30vw;
  left: -12vw;
  bottom: -23vw;
  border-radius: 50% 50% 0 0 / 78% 72% 0 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(170deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .005) 62%);
  filter: none;
}

.hero-grid {
  grid-template-columns: 1.08fr .92fr;
  gap: 74px;
}

.hero h1 {
  max-width: 12ch;
  margin: 0 0 24px;
  font-size: clamp(3.25rem, 6.2vw, 6rem);
  font-weight: 650;
  line-height: .94;
  letter-spacing: -.07em;
}

.hero h1 .hl {
  color: #fff;
  font-family: inherit;
  font-weight: inherit;
}

.hero p.lead {
  max-width: 47ch;
  color: #aeb3bc;
  font-size: clamp(1.06rem, 1.35vw, 1.22rem);
  line-height: 1.7;
}

.hero-actions {
  margin: 34px 0 25px;
}

.trust {
  color: #7d848e;
  gap: 11px 20px;
}

.trust span::before {
  color: #d9dde1;
}

.phone-stage {
  min-height: 590px;
  perspective: 1400px;
}

.phone {
  width: 300px;
  height: 610px;
  border: 9px solid #171a1f;
  border-radius: 46px;
  background: #090b0e;
  box-shadow: 0 55px 110px -35px #000, 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .06);
  transform: rotateY(-7deg) rotateX(2deg);
}

.phone .notch {
  background: #15181c;
}

.wa-head {
  background: rgba(20, 23, 28, .96);
  border-bottom: 1px solid var(--border);
}

.wa-head .av {
  color: #08090b;
  background: #f5f6f7;
  font-family: inherit;
  font-weight: 760;
}

.wa-body {
  background:
    radial-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(180deg, #090b0e, #070809);
  background-size: 18px 18px, auto;
}

.msg {
  color: #e9ebee;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055), 0 4px 14px rgba(0, 0, 0, .18);
}

.msg.in,
.typing {
  background: #171a20;
}

.msg.out {
  background: #19312f;
}

.msg .t {
  color: #777f89;
}

.pill,
.agenda-card,
.metrics,
.card,
.step,
.faq details,
.demo-station,
.cta-band {
  border: 1px solid var(--border);
  background: linear-gradient(145deg, rgba(20, 23, 28, .78), rgba(9, 11, 14, .66));
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(22px) saturate(115%);
  backdrop-filter: blur(22px) saturate(115%);
}

.pill {
  color: #e8eaed;
  box-shadow: 0 20px 50px -24px #000, inset 0 1px 0 rgba(255, 255, 255, .04);
}

.pill .ic {
  background: rgba(255, 255, 255, .09) !important;
}

.agenda-card {
  color: #b8bdc5;
}

.agenda-card .ag-head {
  color: #f0f1f3;
}

.ag-row.new {
  color: #f0f1f3;
  background: rgba(255, 255, 255, .07);
}

.ag-row.new .tm,
.ag-row .tag {
  color: #dce0e4;
}

.ag-row .tag {
  background: rgba(255, 255, 255, .11);
}

.metrics {
  padding: 29px 22px;
}

.metric + .metric {
  border-color: var(--border);
}

.metric b {
  color: #f4f5f6;
  font-family: inherit;
  font-weight: 650;
  letter-spacing: -.04em;
}

.block {
  padding: 100px 0;
}

#como,
section.block[style] {
  background: transparent !important;
}

.head {
  max-width: 680px;
  margin-bottom: 54px;
}

.head h2 {
  font-size: clamp(2.15rem, 4vw, 3.65rem);
  letter-spacing: -.06em;
}

.head p {
  color: #969da7;
}

.card,
.step {
  border-radius: 24px;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.card:hover,
.step:hover {
  border-color: rgba(255, 255, 255, .145);
  background: linear-gradient(145deg, rgba(25, 28, 34, .86), rgba(11, 13, 16, .72));
  transform: translateY(-4px);
}

.card .ci {
  color: #dfe2e6;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .07);
}

.step .n {
  color: #dfe2e6;
  font-family: inherit;
  font-weight: 650;
}

@media (min-width: 821px) {
  .steps::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13) 18%, rgba(255, 255, 255, .13) 82%, transparent);
  }
}

#teste {
  background:
    radial-gradient(circle at 80% 10%, rgba(255, 255, 255, .075), transparent 35%),
    #080a0d;
  border-block: 1px solid var(--border);
}

#teste::after {
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .01));
}

#teste .eyebrow,
.eyebrow {
  color: #ccd0d5;
  border-color: var(--border);
  background: rgba(255, 255, 255, .05);
}

.eyebrow .dot,
#teste .eyebrow .dot {
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .07);
}

.demo-station {
  color: var(--slate);
}

.ds-toggle {
  background: rgba(255, 255, 255, .045);
}

.ds-opt {
  color: #8d949e;
}

.ds-opt.on {
  color: #f2f3f5;
  background: rgba(255, 255, 255, .085);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.ds-desc {
  color: #b4b9c1;
}

.ds-qr {
  border-color: var(--border);
  background: #fff;
}

.faq details {
  box-shadow: var(--shadow-sm);
}

.faq summary {
  color: #e7e9ec;
}

.faq summary::after {
  color: #aeb4bc;
}

.cta-band {
  padding: 62px 44px;
  border-radius: 30px;
}

.cta-band::after {
  border: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .006));
}

.cta-band p {
  color: #aeb4bc;
}

footer {
  border-color: var(--border);
}

.foot-legal {
  border-color: var(--border);
}

.powered {
  color: #8c939d;
}

.powered b {
  color: #cdd1d6;
}

/* Conteúdo continua visível mesmo se o observer/JS falhar; o vidro já faz a
   hierarquia visual sem depender de animação de entrada. */
.fade,
.fade.in {
  opacity: 1;
  transform: none;
}

.wa-float.wa-float {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(15, 18, 22, .82);
  color: #67d9b2;
  box-shadow: 0 22px 48px -18px #000, inset 0 1px 0 rgba(255, 255, 255, .055);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  animation: none;
}

.wa-float.wa-float:hover {
  background: rgba(26, 31, 36, .94);
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding-top: 76px;
  }

  .hero h1 {
    max-width: 13ch;
  }

  .phone {
    transform: none;
  }
}

@media (max-width: 820px) {
  .nav .ghost {
    color: #e6e8eb;
    border-color: var(--border);
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  }

  .block {
    padding: 72px 0;
  }

  .demo-station {
    padding: 26px 22px;
  }
}

@media (max-width: 520px) {
  .nav {
    height: 64px;
  }

  .logo-svg {
    height: 27px;
  }

  .hero {
    padding: 58px 0 36px;
  }

  .hero h1 {
    font-size: clamp(2.65rem, 13vw, 3.7rem);
    line-height: .96;
  }

  .hero p.lead {
    font-size: 1.02rem;
  }

  .hero-actions .btn-ghost {
    color: #c9cdd3;
  }

  .phone {
    width: 254px;
    height: 490px;
  }

  .metrics {
    border-radius: 21px;
  }

  .head h2 {
    font-size: 2.15rem;
  }

  .cta-band {
    padding: 42px 23px;
    border-radius: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}