/* Page sections: aurora hero, examples strip, offers, about, CTA band and contact. */

/* hero */
.hero { position: relative; overflow: hidden; isolation: isolate; padding-block: 84px 72px; text-align: center; }
.hero .h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.hero .sub { margin-left: auto; margin-right: auto; }
.hero .ctas, .hero .values { justify-content: center; }
.shine { color: var(--shine-1); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .shine {
    background: linear-gradient(90deg, var(--shine-1), var(--shine-2), var(--shine-1));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* aurora: three blurred brand-colour blobs drifting slowly behind the hero */
.aurora { position: absolute; inset: -20%; z-index: -1; filter: blur(70px); opacity: var(--aurora-opacity); pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.aurora i:nth-child(1) { width: 55%; height: 60%; left: 5%; top: 5%; background: var(--cobalto); }
.aurora i:nth-child(2) { width: 45%; height: 50%; right: 5%; top: 0; background: var(--menta); }
.aurora i:nth-child(3) { width: 50%; height: 45%; left: 30%; bottom: 0; background: var(--cobalto-claro); }

/* chat in a glass frame */
.glass {
  position: relative; margin: 56px auto 0; max-width: 680px; padding: 10px;
  border-radius: 28px; background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .45);
}
.chat { border-radius: 20px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; height: 460px; text-align: left; }
.chat .msgs { flex: 1; padding: 18px; background: var(--sunk); }
.glass .f1 { left: -120px; top: 70px; }
.glass .f2 { right: -110px; bottom: 90px; animation-delay: -3s; }

/* examples strip */
.examples { padding: 28px 0 8px; }
.examples h2 { text-align: center; color: var(--muted); font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 16px; }

/* offers */
.feats { display: grid; gap: 96px; margin-top: 64px; }
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feat:nth-child(2) .ft-art { order: -1; }
.feat > *, .ft-art > * { min-width: 0; }
.feat .tag { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); padding: 4px 10px; border-radius: 999px; background: var(--ok-bg); }
.feat h3 { margin: 14px 0 10px; font-size: clamp(1.7rem, 2.8vw, 2.3rem); letter-spacing: -.025em; line-height: 1.12; }
.feat p { margin: 0; color: var(--muted); font-size: 1.0625rem; max-width: 46ch; }
.link { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; color: var(--primary); font-weight: 600; text-decoration: none; }
.link svg { width: 16px; height: 16px; transition: transform .3s; }
.link:hover svg { transform: translateX(4px); }
.ft-art { position: relative; border-radius: var(--radius-card); padding: 28px; background: var(--sunk); border: 1px solid var(--line); min-height: 340px; display: grid; align-content: center; overflow: hidden; }
.ft-art .float-chip { right: 18px; bottom: 18px; }

/* about */
.aboutband { border-radius: 28px; padding: 56px; background: var(--sunk); border: 1px solid var(--line); display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.aboutband p { margin: 0; color: var(--muted); font-size: 1.125rem; }
.aboutband .values { margin-top: 24px; flex-direction: column; align-items: flex-start; gap: 12px; }

/* CTA band */
.ctaband {
  position: relative; overflow: hidden; border-radius: 28px; padding: 64px 40px; text-align: center; color: var(--nevoa);
  background: linear-gradient(135deg, var(--noite), #1E3B72 60%, var(--cobalto));
  background-size: 200% 200%;
}
.ctaband::after {
  content: ""; position: absolute; left: 50%; bottom: -60px; width: 560px; height: 120px; transform: translateX(-50%); pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 120'%3E%3Cpath d='M10 70c80-60 140 40 240-10s160-50 300 10' fill='none' stroke='%235FD3B5' stroke-width='14' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");
}
.ctaband h2 { position: relative; z-index: 1; margin: 0; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.03em; line-height: 1.1; }
.ctaband p { position: relative; z-index: 1; margin: 14px auto 0; color: #C1CFE7; max-width: 44ch; font-size: 1.125rem; }
.ctaband .ctas { position: relative; z-index: 1; justify-content: center; }
.ctaband .btn-p { background: var(--menta); color: var(--noite); }
.ctaband .btn-p:hover { background: var(--menta-hover); }
.ctaband .btn-s { background: transparent; color: var(--nevoa); border-color: rgba(238, 240, 255, .35); }

@media (max-width: 1000px) {
  .glass .float-chip { display: none; }
}
@media (max-width: 900px) {
  .feat, .aboutband { grid-template-columns: 1fr; gap: 32px; }
  .feat:nth-child(2) .ft-art { order: 0; }
  .feats { gap: 64px; }
  .aboutband { padding: 28px; }
  .ctaband { padding: 44px 22px; }
  .ft-art { min-height: 0; padding: 18px; }
  .ft-art .float-chip { display: none; }
}
@media (max-width: 700px) {
  .hero { padding-top: 44px; }
  .chat { height: 440px; }
  .glass { padding: 6px; }
}