:root {
  --bg: #f5f8fc;
  --surface: #ffffff;
  --surface-soft: #f8fafc;

  --text: #202124;
  --text-soft: #667085;
  --text-light: #98a2b3;

  --line: #e4e9f1;

  --blue: #1a73e8;
  --blue-2: #4285f4;
  --blue-soft: #eaf2ff;

  --green: #34a853;
  --green-soft: #eaf7ee;

  --yellow: #fbbc04;
  --yellow-soft: #fff7d6;

  --red: #ea4335;
  --red-soft: #fdecea;

  --shadow:
    0 14px 35px rgba(31, 45, 75, 0.07);

  --shadow-soft:
    0 8px 20px rgba(31, 45, 75, 0.05);

  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
}


/* =========================
   RESET
========================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(66, 133, 244, 0.08),
      transparent 25%
    ),
    radial-gradient(
      circle at 90% 20%,
      rgba(52, 168, 83, 0.05),
      transparent 20%
    ),
    var(--bg);

  color: var(--text);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}


/* =========================
   ESTRUTURA
========================= */

.app-shell {
  width:
    min(
      1220px,
      calc(100% - 32px)
    );

  margin:
    0 auto;

  padding-bottom:
    80px;
}


/* =========================
   TOPO
========================= */

.topbar {
  min-height:
    82px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;
}

.brand {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}

.brand-mark {
  width:
    42px;

  height:
    42px;

  border-radius:
    13px;

  background:
    var(--surface);

  border:
    1px solid var(--line);

  box-shadow:
    var(--shadow-soft);

  position:
    relative;

  flex-shrink:
    0;
}

.brand-dot {
  width:
    9px;

  height:
    9px;

  border-radius:
    999px;

  position:
    absolute;
}

.brand-dot.blue {
  background:
    var(--blue-2);

  left:
    9px;

  top:
    9px;
}

.brand-dot.red {
  background:
    var(--red);

  right:
    9px;

  top:
    9px;
}

.brand-dot.yellow {
  background:
    var(--yellow);

  left:
    9px;

  bottom:
    9px;
}

.brand-dot.green {
  background:
    var(--green);

  right:
    9px;

  bottom:
    9px;
}

.brand-copy strong,
.brand-copy span {
  display:
    block;
}

.brand-copy strong {
  font-size:
    15px;

  letter-spacing:
    -0.01em;
}

.brand-copy span {
  margin-top:
    3px;

  font-size:
    11px;

  color:
    var(--text-soft);
}

.system-status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    8px 11px;

  border-radius:
    999px;

  background:
    var(--surface);

  border:
    1px solid var(--line);

  color:
    var(--text-soft);

  font-size:
    11px;

  font-weight:
    700;
}

.system-status-dot {
  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    var(--green);

  box-shadow:
    0 0 0 4px rgba(52, 168, 83, 0.11);
}


/* =========================
   HERO
========================= */

.hero {
  min-height:
    370px;

  padding:
    42px 0 36px;

  display:
    grid;

  grid-template-columns:
    1.15fr 0.85fr;

  align-items:
    center;

  gap:
    50px;
}

.eyebrow,
.section-kicker {
  display:
    inline-block;

  color:
    var(--blue);

  font-size:
    11px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.11em;
}

.hero h1 {
  max-width:
    760px;

  margin:
    15px 0 16px;

  font-size:
    clamp(
      40px,
      5vw,
      68px
    );

  line-height:
    1.02;

  letter-spacing:
    -0.055em;

  font-weight:
    700;
}

.hero p {
  max-width:
    720px;

  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    17px;

  line-height:
    1.65;
}


/* =========================
   VISUAL HERO
========================= */

.hero-dashboard {
  min-height:
    290px;

  position:
    relative;
}

.hero-mini-card {
  position:
    absolute;

  padding:
    17px 19px;

  min-width:
    165px;

  background:
    rgba(255, 255, 255, 0.95);

  border:
    1px solid var(--line);

  border-radius:
    18px;

  box-shadow:
    var(--shadow);

  animation:
    floatingCard 5s ease-in-out infinite;
}

.hero-mini-card span,
.hero-mini-card strong {
  display:
    block;
}

.hero-mini-card span {
  font-size:
    11px;

  color:
    var(--text-soft);
}

.hero-mini-card strong {
  margin-top:
    5px;

  font-size:
    27px;

  letter-spacing:
    -0.04em;
}

.hero-card-one {
  left:
    10px;

  top:
    34px;
}

.hero-card-two {
  right:
    0;

  bottom:
    40px;

  animation-delay:
    -2s;
}

.hero-score {
  width:
    170px;

  height:
    170px;

  position:
    absolute;

  right:
    45px;

  top:
    60px;

  padding:
    13px;

  border-radius:
    50%;

  background:
    conic-gradient(
      var(--blue)
      0deg
      150deg,
      var(--green)
      150deg
      215deg,
      var(--yellow)
      215deg
      260deg,
      #edf1f6
      260deg
      360deg
    );

  box-shadow:
    0 20px 45px rgba(66, 133, 244, 0.15);
}

.hero-score-inner {
  width:
    100%;

  height:
    100%;

  border-radius:
    50%;

  background:
    var(--surface);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;
}

.hero-score-inner strong {
  font-size:
    48px;

  letter-spacing:
    -0.06em;
}

.hero-score-inner span {
  margin-top:
    2px;

  font-size:
    12px;

  color:
    var(--text-soft);
}

@keyframes floatingCard {
  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-8px);
  }
}


/* =========================
   PAINÉIS
========================= */

.panel {
  background:
    var(--surface);

  border:
    1px solid var(--line);

  border-radius:
    var(--radius-xl);

  box-shadow:
    var(--shadow);
}

.search-panel {
  padding:
    30px;
}

.panel-heading {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    20px;
}

.panel-heading h2 {
  margin:
    8px 0 0;

  font-size:
    28px;

  letter-spacing:
    -0.04em;
}

.ready-badge {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    9px 12px;

  border-radius:
    999px;

  background:
    var(--green-soft);

  color:
    #23793a;

  font-size:
    11px;

  font-weight:
    700;

  white-space:
    nowrap;
}

.ready-badge span {
  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    var(--green);

  box-shadow:
    0 0 0 4px rgba(52, 168, 83, 0.11);
}


/* =========================
   FORMULÁRIO
========================= */

.analysis-form {
  margin-top:
    26px;

  display:
    grid;

  grid-template-columns:
    1.2fr 1fr 1fr 0.7fr auto;

  gap:
    14px;

  align-items:
    end;
}

.field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}

.field label,
.services-heading label {
  font-size:
    11px;

  font-weight:
    700;

  color:
    #475467;
}

.field input,
.field select {
  width:
    100%;

  height:
    50px;

  padding:
    0 14px;

  border-radius:
    12px;

  border:
    1px solid #d7dde7;

  background:
    #ffffff;

  outline:
    none;

  color:
    var(--text);

  transition:
    0.2s ease;
}

.field input:focus,
.field select:focus {
  border-color:
    var(--blue-2);

  box-shadow:
    0 0 0 4px rgba(66, 133, 244, 0.1);
}

.primary-button {
  min-height:
    50px;

  padding:
    0 20px;

  border:
    0;

  border-radius:
    12px;

  background:
    var(--blue);

  color:
    #ffffff;

  font-weight:
    700;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  box-shadow:
    0 10px 20px rgba(26, 115, 232, 0.2);

  transition:
    0.2s ease;
}

.primary-button:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 13px 24px rgba(26, 115, 232, 0.24);
}

.button-radar-icon {
  font-size:
    17px;
}

.form-disclaimer {
  margin:
    17px 0 0;

  color:
    var(--text-light);

  font-size:
    10px;

  line-height:
    1.55;
}


/* =========================
   SERVIÇOS
========================= */

.services-field {
  grid-column:
    1 / -1;

  padding:
    18px;

  border-radius:
    16px;

  background:
    var(--surface-soft);

  border:
    1px solid #edf0f4;
}

.services-heading {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  margin-bottom:
    13px;
}

.services-heading > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}

.services-heading span {
  font-size:
    10px;

  color:
    var(--text-light);
}

.text-button {
  border:
    0;

  background:
    transparent;

  color:
    var(--blue);

  font-size:
    10px;

  font-weight:
    700;
}

.services-list {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;
}

.service-option {
  position:
    relative;
}

.service-option input {
  position:
    absolute;

  opacity:
    0;

  pointer-events:
    none;
}

.service-option label {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    38px;

  padding:
    0 13px;

  border-radius:
    999px;

  border:
    1px solid #dde3ec;

  background:
    #ffffff;

  color:
    #475467;

  font-size:
    10px;

  font-weight:
    600;

  cursor:
    pointer;

  transition:
    0.2s ease;
}

.service-option input:checked + label {
  border-color:
    #b8d2fb;

  background:
    var(--blue-soft);

  color:
    var(--blue);

  box-shadow:
    inset 0 0 0 1px rgba(26, 115, 232, 0.05);
}


/* =========================
   LOADING
========================= */

.loading-panel {
  margin-top:
    20px;

  padding:
    38px;

  display:
    grid;

  grid-template-columns:
    140px 1fr;

  align-items:
    center;

  gap:
    35px;

  overflow:
    hidden;

  position:
    relative;
}

.loader-visual {
  width:
    112px;

  height:
    112px;

  margin:
    0 auto;

  position:
    relative;
}

.loader-orbit {
  position:
    absolute;

  border-radius:
    50%;

  border:
    2px solid transparent;
}

.loader-orbit-one {
  inset:
    0;

  border-top-color:
    var(--blue);

  border-right-color:
    rgba(26, 115, 232, 0.2);

  animation:
    spin 1.1s linear infinite;
}

.loader-orbit-two {
  inset:
    15px;

  border-left-color:
    var(--green);

  border-bottom-color:
    rgba(52, 168, 83, 0.2);

  animation:
    spinReverse 1.6s linear infinite;
}

.loader-center {
  position:
    absolute;

  inset:
    37px;

  display:
    grid;

  place-items:
    center;
}

.loader-center span {
  width:
    18px;

  height:
    18px;

  border-radius:
    50%;

  background:
    var(--yellow);

  box-shadow:
    0 0 0 8px rgba(251, 188, 4, 0.12);

  animation:
    pulse 1.2s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform:
      rotate(360deg);
  }
}

@keyframes spinReverse {
  to {
    transform:
      rotate(-360deg);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform:
      scale(0.8);
  }

  50% {
    transform:
      scale(1.08);
  }
}

.loading-content h2 {
  margin:
    7px 0 8px;

  font-size:
    27px;

  letter-spacing:
    -0.04em;
}

.loading-content p {
  margin:
    0 0 20px;

  color:
    var(--text-soft);

  font-size:
    12px;
}

.progress-track {
  width:
    100%;

  height:
    8px;

  border-radius:
    999px;

  background:
    #edf1f6;

  overflow:
    hidden;
}

.progress-bar {
  width:
    5%;

  height:
    100%;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      #67a4ff
    );

  transition:
    width 0.45s cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    );
}

.loading-steps {
  margin-top:
    18px;

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    10px;
}

.loading-step {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(--text-light);

  font-size:
    10px;

  transition:
    0.2s ease;
}

.loading-step > span {
  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    #d8dee7;
}

.loading-step.active {
  color:
    var(--blue);

  font-weight:
    700;
}

.loading-step.active > span {
  background:
    var(--blue);

  box-shadow:
    0 0 0 4px rgba(26, 115, 232, 0.1);
}

.loading-step.done {
  color:
    var(--green);
}

.loading-step.done > span {
  background:
    var(--green);
}


/* =========================
   RESULTADOS
========================= */

.results {
  margin-top:
    28px;
}

.results-toolbar {
  display:
    none;
}

.results-heading {
  margin-bottom:
    24px;
}

.results-heading h2 {
  margin:
    8px 0 0;

  font-size:
    34px;

  letter-spacing:
    -0.045em;
}

.results-heading p {
  margin:
    8px 0 0;

  color:
    var(--text-soft);

  font-size:
    13px;
}


/* =========================
   CABEÇALHOS DE SESSÃO
========================= */

.result-section-heading {
  margin:
    32px 0 14px;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}

.result-section-heading > span {
  width:
    32px;

  height:
    32px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    9px;

  background:
    var(--blue-soft);

  color:
    var(--blue);

  font-size:
    10px;

  font-weight:
    800;
}

.result-section-heading strong,
.result-section-heading p {
  display:
    block;
}

.result-section-heading strong {
  font-size:
    14px;
}

.result-section-heading p {
  margin:
    3px 0 0;

  font-size:
    10px;

  color:
    var(--text-light);
}


/* =========================
   MÉTRICAS
========================= */

.metric-grid {
  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    14px;
}

.metric-card {
  min-height:
    190px;

  padding:
    21px;

  position:
    relative;

  overflow:
    hidden;

  background:
    var(--surface);

  border:
    1px solid var(--line);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-soft);
}

.metric-primary {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f5f9ff
    );

  border-color:
    #d7e6ff;
}

.metric-top {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    10px;

  align-items:
    center;
}

.metric-top > span:first-child,
.metric-title {
  color:
    var(--text-soft);

  font-size:
    11px;

  font-weight:
    600;
}

.estimate-badge {
  padding:
    4px 7px;

  border-radius:
    999px;

  border:
    1px solid var(--line);

  color:
    var(--text-soft);

  font-size:
    8px;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    0.07em;
}

.metric-number {
  display:
    block;

  margin-top:
    13px;

  font-size:
    50px;

  line-height:
    1;

  letter-spacing:
    -0.06em;
}

.metric-description {
  display:
    block;

  margin-top:
    8px;

  color:
    var(--text-soft);

  font-size:
    11px;
}

.metric-indicator {
  margin-top:
    17px;

  font-size:
    10px;

  font-weight:
    700;
}

.metric-indicator.green {
  color:
    var(--green);
}

.metric-indicator.warning {
  color:
    #b57a00;
}

.metric-score {
  display:
    flex;

  align-items:
    baseline;

  gap:
    4px;

  margin-top:
    13px;
}

.metric-score strong {
  font-size:
    48px;

  letter-spacing:
    -0.06em;
}

.metric-score span {
  color:
    var(--text-light);

  font-size:
    13px;

  font-weight:
    700;
}

.mini-meter {
  height:
    8px;

  margin-top:
    20px;

  border-radius:
    999px;

  overflow:
    hidden;

  background:
    #edf1f6;
}

.mini-meter span {
  display:
    block;

  width:
    0;

  height:
    100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      var(--red),
      var(--yellow),
      var(--green)
    );

  transition:
    width 1s cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    );
}

.micro-chart {
  position:
    absolute;

  left:
    21px;

  right:
    21px;

  bottom:
    20px;

  height:
    40px;

  display:
    flex;

  align-items:
    flex-end;

  gap:
    5px;
}

.micro-chart span {
  flex:
    1;

  border-radius:
    6px 6px 2px 2px;

  background:
    #d7e6ff;
}

.micro-chart span:nth-child(1) {
  height:
    35%;
}

.micro-chart span:nth-child(2) {
  height:
    49%;
}

.micro-chart span:nth-child(3) {
  height:
    42%;
}

.micro-chart span:nth-child(4) {
  height:
    60%;
}

.micro-chart span:nth-child(5) {
  height:
    72%;
}

.micro-chart span:nth-child(6) {
  height:
    88%;
}


/* =========================
   OPORTUNIDADE
========================= */

.opportunity-message {
  margin-top:
    16px;

  padding:
    26px 28px;

  display:
    grid;

  grid-template-columns:
    0.65fr 1.35fr;

  gap:
    28px;

  align-items:
    center;

  background:
    linear-gradient(
      125deg,
      #ffffff,
      #f6faff
    );

  border:
    1px solid #dbe8fd;

  border-radius:
    var(--radius-xl);

  box-shadow:
    var(--shadow-soft);
}

.opportunity-percentage {
  padding-right:
    25px;

  border-right:
    1px solid var(--line);
}

.opportunity-percentage strong,
.opportunity-percentage span {
  display:
    block;
}

.opportunity-percentage strong {
  font-size:
    68px;

  line-height:
    1;

  letter-spacing:
    -0.065em;

  color:
    var(--blue);
}

.opportunity-percentage span {
  margin-top:
    8px;

  font-size:
    11px;

  color:
    var(--text-soft);
}

.opportunity-copy h3 {
  margin:
    8px 0 7px;

  font-size:
    25px;

  letter-spacing:
    -0.04em;
}

.opportunity-copy p {
  margin:
    0;

  max-width:
    600px;

  color:
    var(--text-soft);

  font-size:
    12px;

  line-height:
    1.6;
}


/* =========================
   SCORE
========================= */

.score-panel {
  padding:
    28px;
}

.score-main {
  display:
    grid;

  grid-template-columns:
    180px 1fr;

  align-items:
    center;

  gap:
    30px;
}

.score-gauge {
  width:
    170px;

  height:
    170px;

  border-radius:
    50%;

  padding:
    13px;

  background:
    conic-gradient(
      var(--blue)
      0deg,
      #edf1f6
      0deg
    );

  transition:
    background 0.5s ease;
}

.score-gauge-inner {
  width:
    100%;

  height:
    100%;

  border-radius:
    50%;

  background:
    var(--surface);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  border:
    1px solid var(--line);
}

.score-gauge-inner strong {
  font-size:
    52px;

  letter-spacing:
    -0.06em;
}

.score-gauge-inner span {
  margin-top:
    2px;

  color:
    var(--text-soft);

  font-size:
    11px;
}

.score-copy h3 {
  margin:
    8px 0 7px;

  font-size:
    28px;

  letter-spacing:
    -0.04em;
}

.score-copy p {
  max-width:
    560px;

  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    12px;

  line-height:
    1.6;
}

.score-indicators {
  margin-top:
    28px;

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    15px;
}

.score-indicator {
  padding:
    16px;

  border-radius:
    15px;

  background:
    var(--surface-soft);

  border:
    1px solid #edf0f4;
}

.score-indicator-heading {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    10px;
}

.score-indicator-heading span {
  color:
    var(--text-soft);

  font-size:
    10px;
}

.score-indicator-heading strong {
  font-size:
    10px;
}

.score-bar {
  height:
    7px;

  margin-top:
    10px;

  border-radius:
    999px;

  overflow:
    hidden;

  background:
    #e9edf3;
}

.score-bar span {
  display:
    block;

  width:
    0;

  height:
    100%;

  border-radius:
    inherit;

  background:
    var(--blue);

  transition:
    width 1s cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    );
}

.system-reading {
  margin-top:
    20px;

  padding:
    17px;

  border-radius:
    15px;

  border:
    1px solid #d9e7fc;

  background:
    #f8fbff;
}

.system-reading span,
.system-reading strong {
  display:
    block;
}

.system-reading span {
  color:
    var(--blue);

  font-size:
    9px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.08em;
}

.system-reading strong {
  margin-top:
    7px;

  font-size:
    13px;

  line-height:
    1.5;
}


/* =========================
   KEYWORDS
========================= */

.keywords-panel {
  padding:
    26px;
}

.keywords-header {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    20px;
}

.keywords-header h3 {
  margin:
    7px 0 0;

  font-size:
    23px;

  letter-spacing:
    -0.035em;
}

.count-badge {
  padding:
    7px 10px;

  border-radius:
    999px;

  border:
    1px solid var(--line);

  color:
    var(--text-soft);

  font-size:
    9px;

  font-weight:
    700;

  white-space:
    nowrap;
}

.keywords-list {
  margin-top:
    20px;

  display:
    grid;

  gap:
    0;
}

.keyword-row {
  display:
    grid;

  grid-template-columns:
    minmax(180px, 1.3fr)
    2fr
    70px;

  align-items:
    center;

  gap:
    18px;

  padding:
    13px 0;

  border-bottom:
    1px solid #eff2f5;
}

.keyword-row:last-child {
  border-bottom:
    0;
}

.keyword-name {
  font-size:
    11px;

  font-weight:
    650;
}

.keyword-bar {
  height:
    7px;

  border-radius:
    999px;

  overflow:
    hidden;

  background:
    #edf1f6;
}

.keyword-bar span {
  display:
    block;

  width:
    0;

  height:
    100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      #82aff7,
      var(--blue-2)
    );

  transition:
    width 1s cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    );
}

.keyword-volume {
  text-align:
    right;
}

.keyword-volume strong,
.keyword-volume span {
  display:
    block;
}

.keyword-volume strong {
  font-size:
    11px;
}

.keyword-volume span {
  margin-top:
    2px;

  font-size:
    8px;

  color:
    var(--text-light);
}

.expand-button {
  width:
    100%;

  min-height:
    42px;

  margin-top:
    12px;

  border:
    1px solid #d9e5f8;

  border-radius:
    11px;

  background:
    #f8fbff;

  color:
    var(--blue);

  font-size:
    10px;

  font-weight:
    700;
}


/* =========================
   DIAGNÓSTICO
========================= */

.diagnosis-panel {
  padding:
    12px;
}

.diagnosis-accordion + .diagnosis-accordion {
  border-top:
    1px solid #edf0f4;
}

.diagnosis-trigger {
  width:
    100%;

  padding:
    17px 14px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  border:
    0;

  background:
    transparent;

  text-align:
    left;
}

.diagnosis-main {
  display:
    flex;

  align-items:
    center;

  gap:
    13px;
}

.diagnosis-main > div:last-child span,
.diagnosis-main > div:last-child strong {
  display:
    block;
}

.diagnosis-main > div:last-child span {
  color:
    var(--text-light);

  font-size:
    8px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.08em;
}

.diagnosis-main > div:last-child strong {
  margin-top:
    4px;

  font-size:
    12px;
}

.diagnosis-icon {
  width:
    42px;

  height:
    42px;

  border-radius:
    13px;

  display:
    grid;

  place-items:
    center;

  flex-shrink:
    0;

  font-weight:
    800;
}

.diagnosis-icon.google {
  background:
    var(--blue-soft);

  color:
    var(--blue);
}

.diagnosis-icon.authority {
  background:
    var(--green-soft);

  color:
    var(--green);
}

.diagnosis-icon.review {
  background:
    var(--yellow-soft);

  color:
    #a67a00;
}

.diagnosis-result {
  display:
    flex;

  align-items:
    baseline;

  gap:
    3px;
}

.diagnosis-result strong {
  font-size:
    21px;

  letter-spacing:
    -0.04em;
}

.diagnosis-result span {
  color:
    var(--text-light);

  font-size:
    8px;
}

.diagnosis-result i {
  margin-left:
    8px;

  width:
    24px;

  height:
    24px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #f1f5f9;

  color:
    var(--text-soft);

  font-style:
    normal;

  font-size:
    14px;

  transition:
    transform 0.25s ease;
}

.diagnosis-accordion.open
.diagnosis-result i {
  transform:
    rotate(45deg);
}

.diagnosis-content {
  max-height:
    0;

  overflow:
    hidden;

  transition:
    max-height 0.3s ease;
}

.diagnosis-content p {
  margin:
    0;

  padding:
    0 70px 17px;

  color:
    var(--text-soft);

  font-size:
    10px;

  line-height:
    1.6;
}

.diagnosis-accordion.open
.diagnosis-content {
  max-height:
    180px;
}


/* =========================
   SOLUÇÃO
========================= */

.solution-card {
  padding:
    30px;

  background:
    linear-gradient(
      125deg,
      #ffffff,
      #f6faff
    );

  border:
    1px solid #dce8fb;

  border-radius:
    var(--radius-xl);

  box-shadow:
    var(--shadow);
}

.solution-card h3 {
  max-width:
    750px;

  margin:
    8px 0 9px;

  font-size:
    30px;

  letter-spacing:
    -0.045em;
}

.solution-card > p {
  max-width:
    700px;

  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    12px;

  line-height:
    1.6;
}

.solution-list {
  margin-top:
    23px;

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    12px;
}

.solution-item {
  min-height:
    95px;

  padding:
    16px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    11px;

  background:
    #ffffff;

  border:
    1px solid var(--line);

  border-radius:
    15px;
}

.solution-check {
  width:
    26px;

  height:
    26px;

  display:
    grid;

  place-items:
    center;

  flex-shrink:
    0;

  border-radius:
    50%;

  background:
    var(--green-soft);

  color:
    var(--green);

  font-size:
    11px;

  font-weight:
    800;
}

.solution-item strong,
.solution-item div span {
  display:
    block;
}

.solution-item strong {
  font-size:
    11px;
}

.solution-item div span {
  margin-top:
    4px;

  color:
    var(--text-soft);

  font-size:
    9px;

  line-height:
    1.45;
}

.legal-note {
  max-width:
    850px;

  margin:
    17px auto 0;

  text-align:
    center;

  color:
    var(--text-light);

  font-size:
    9px;

  line-height:
    1.5;
}


/* =========================
   ANIMAÇÕES
========================= */

.result-enter {
  animation:
    resultEnter
    0.55s
    cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    )
    both;
}

@keyframes resultEnter {
  from {
    opacity:
      0;

    transform:
      translateY(12px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }
}


/* =========================
   TABLET
========================= */

@media (
  max-width: 980px
) {

  .hero {
    grid-template-columns:
      1fr;

    min-height:
      auto;

    gap:
      10px;

    padding:
      30px 0;
  }

  .hero-dashboard {
    display:
      none;
  }

  .analysis-form {
    grid-template-columns:
      1fr 1fr;
  }

  .primary-button {
    grid-column:
      1 / -1;
  }

  .metric-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .opportunity-message {
    grid-template-columns:
      0.8fr 1.2fr;
  }

  .solution-list {
    grid-template-columns:
      1fr;
  }

}


/* =========================
   MOBILE
========================= */

@media (
  max-width: 680px
) {

  body {
    background:
      linear-gradient(
        180deg,
        #f7faff,
        #f3f7fb
      );
  }

  .app-shell {
    width:
      100%;

    padding:
      0 14px 65px;
  }


  /* TOPO */

  .topbar {
    min-height:
      64px;

    padding:
      0 3px;
  }

  .brand-mark {
    width:
      36px;

    height:
      36px;

    border-radius:
      11px;
  }

  .brand-dot {
    width:
      7px;

    height:
      7px;
  }

  .brand-dot.blue {
    left:
      8px;

    top:
      8px;
  }

  .brand-dot.red {
    right:
      8px;

    top:
      8px;
  }

  .brand-dot.yellow {
    left:
      8px;

    bottom:
      8px;
  }

  .brand-dot.green {
    right:
      8px;

    bottom:
      8px;
  }

  .brand-copy span {
    display:
      none;
  }

  .brand-copy strong {
    font-size:
      13px;
  }

  .system-status {
    padding:
      7px 9px;

    font-size:
      9px;
  }


  /* HERO */

  .hero {
    padding:
      25px 4px 28px;
  }

  .hero h1 {
    margin-top:
      12px;

    font-size:
      38px;

    line-height:
      1.04;

    letter-spacing:
      -0.052em;
  }

  .hero p {
    font-size:
      14px;

    line-height:
      1.6;
  }


  /* FORM */

  .search-panel {
    padding:
      20px;

    border-radius:
      24px;
  }

  .panel-heading {
    flex-direction:
      column;

    gap:
      15px;
  }

  .panel-heading h2 {
    font-size:
      27px;

    line-height:
      1.12;
  }

  .ready-badge {
    align-self:
      flex-start;
  }

  .analysis-form {
    margin-top:
      22px;

    grid-template-columns:
      1fr;

    gap:
      14px;
  }

  .field input,
  .field select {
    height:
      48px;

    font-size:
      14px;
  }

  .services-field {
    grid-column:
      1;

    padding:
      15px;
  }

  .services-heading {
    align-items:
      flex-start;
  }

  .services-list {
    gap:
      7px;
  }

  .service-option label {
    min-height:
      35px;

    padding:
      0 11px;

    font-size:
      9px;
  }

  .primary-button {
    grid-column:
      1;

    min-height:
      52px;

    border-radius:
      13px;
  }


  /* LOADING */

  .loading-panel {
    margin-top:
      14px;

    padding:
      25px 20px;

    grid-template-columns:
      1fr;

    gap:
      22px;

    text-align:
      center;

    border-radius:
      24px;
  }

  .loader-visual {
    width:
      95px;

    height:
      95px;
  }

  .loader-center {
    inset:
      31px;
  }

  .loading-content h2 {
    font-size:
      24px;
  }

  .loading-steps {
    grid-template-columns:
      repeat(2, 1fr);

    text-align:
      left;
  }


  /* TOOLBAR RESULTADO */

  .results-toolbar {
    position:
      sticky;

    top:
      8px;

    z-index:
      20;

    margin:
      0 0 18px;

    padding:
      10px 12px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    gap:
      12px;

    border:
      1px solid rgba(221, 227, 237, 0.9);

    border-radius:
      15px;

    background:
      rgba(255, 255, 255, 0.92);

    backdrop-filter:
      blur(14px);

    box-shadow:
      0 10px 24px rgba(31, 45, 75, 0.08);
  }

  .results-toolbar div span,
  .results-toolbar div strong {
    display:
      block;
  }

  .results-toolbar div span {
    font-size:
      8px;

    color:
      var(--text-light);

    text-transform:
      uppercase;

    letter-spacing:
      0.08em;

    font-weight:
      800;
  }

  .results-toolbar div strong {
    margin-top:
      2px;

    max-width:
      160px;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    font-size:
      11px;
  }

  .toolbar-button {
    padding:
      8px 10px;

    border:
      0;

    border-radius:
      10px;

    background:
      var(--blue-soft);

    color:
      var(--blue);

    font-size:
      9px;

    font-weight:
      700;
  }


  /* RESULT HEADING */

  .results {
    margin-top:
      20px;
  }

  .results-heading {
    padding:
      0 4px;

    margin-bottom:
      18px;
  }

  .results-heading h2 {
    font-size:
      30px;

    line-height:
      1.08;
  }

  .results-heading p {
    font-size:
      11px;

    line-height:
      1.5;
  }


  /* TÍTULOS DE SESSÃO */

  .result-section-heading {
    margin:
      24px 4px 11px;
  }

  .result-section-heading > span {
    width:
      28px;

    height:
      28px;

    font-size:
      9px;
  }

  .result-section-heading strong {
    font-size:
      12px;
  }

  .result-section-heading p {
    font-size:
      8px;
  }


  /* MÉTRICAS 2X2 */

  .metric-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      9px;
  }

  .metric-card {
    min-height:
      145px;

    padding:
      15px;

    border-radius:
      18px;
  }

  .metric-top {
    align-items:
      flex-start;
  }

  .metric-top > span:first-child,
  .metric-title {
    font-size:
      9px;
  }

  .estimate-badge {
    padding:
      3px 5px;

    font-size:
      6px;
  }

  .metric-number {
    margin-top:
      12px;

    font-size:
      39px;
  }

  .metric-description {
    margin-top:
      5px;

    font-size:
      9px;

    line-height:
      1.35;
  }

  .metric-indicator {
    margin-top:
      12px;

    font-size:
      8px;

    line-height:
      1.35;
  }

  .metric-score {
    margin-top:
      11px;
  }

  .metric-score strong {
    font-size:
      38px;
  }

  .metric-score span {
    font-size:
      10px;
  }

  .mini-meter {
    height:
      6px;

    margin-top:
      14px;
  }

  .micro-chart {
    left:
      15px;

    right:
      15px;

    bottom:
      15px;

    height:
      28px;
  }


  /* OPORTUNIDADE */

  .opportunity-message {
    margin-top:
      10px;

    padding:
      20px;

    grid-template-columns:
      1fr;

    gap:
      16px;

    border-radius:
      20px;
  }

  .opportunity-percentage {
    padding:
      0 0 16px;

    border-right:
      0;

    border-bottom:
      1px solid var(--line);
  }

  .opportunity-percentage strong {
    font-size:
      58px;
  }

  .opportunity-percentage span {
    font-size:
      9px;
  }

  .opportunity-copy h3 {
    font-size:
      21px;
  }

  .opportunity-copy p {
    font-size:
      10px;
  }


  /* SCORE */

  .score-panel {
    padding:
      20px;

    border-radius:
      22px;
  }

  .score-main {
    grid-template-columns:
      115px 1fr;

    gap:
      18px;
  }

  .score-gauge {
    width:
      112px;

    height:
      112px;

    padding:
      9px;
  }

  .score-gauge-inner strong {
    font-size:
      36px;
  }

  .score-gauge-inner span {
    font-size:
      8px;
  }

  .score-copy h3 {
    margin:
      6px 0 5px;

    font-size:
      19px;

    line-height:
      1.15;
  }

  .score-copy p {
    font-size:
      9px;

    line-height:
      1.45;
  }

  .score-indicators {
    margin-top:
      20px;

    grid-template-columns:
      1fr;

    gap:
      8px;
  }

  .score-indicator {
    padding:
      12px;

    border-radius:
      12px;
  }

  .system-reading {
    margin-top:
      12px;

    padding:
      14px;
  }

  .system-reading strong {
    font-size:
      11px;
  }


  /* KEYWORDS */

  .keywords-panel {
    padding:
      20px;

    border-radius:
      22px;
  }

  .keywords-header {
    gap:
      10px;
  }

  .keywords-header h3 {
    font-size:
      20px;

    line-height:
      1.15;
  }

  .count-badge {
    padding:
      6px 8px;

    font-size:
      8px;
  }

  .keywords-list {
    margin-top:
      15px;
  }

  .keyword-row {
    grid-template-columns:
      1fr 45px;

    gap:
      8px;

    padding:
      11px 0;
  }

  .keyword-name {
    font-size:
      10px;
  }

  .keyword-bar {
    grid-column:
      1 / -1;

    grid-row:
      2;

    height:
      5px;
  }

  .keyword-volume strong {
    font-size:
      10px;
  }

  .keyword-volume span {
    display:
      none;
  }


  /* DIAGNÓSTICO */

  .diagnosis-panel {
    border-radius:
      22px;
  }

  .diagnosis-trigger {
    padding:
      14px 10px;
  }

  .diagnosis-main {
    gap:
      10px;
  }

  .diagnosis-icon {
    width:
      38px;

    height:
      38px;

    border-radius:
      11px;
  }

  .diagnosis-main
  > div:last-child
  span {
    font-size:
      7px;
  }

  .diagnosis-main
  > div:last-child
  strong {
    font-size:
      10px;
  }

  .diagnosis-result strong {
    font-size:
      18px;
  }

  .diagnosis-result i {
    width:
      22px;

    height:
      22px;

    margin-left:
      5px;
  }

  .diagnosis-content p {
    padding:
      0 48px 14px;

    font-size:
      9px;
  }


  /* SOLUÇÃO */

  .solution-card {
    padding:
      21px;

    border-radius:
      22px;
  }

  .solution-card h3 {
    font-size:
      24px;

    line-height:
      1.08;
  }

  .solution-card > p {
    font-size:
      10px;
  }

  .solution-list {
    margin-top:
      18px;

    grid-template-columns:
      1fr;

    gap:
      8px;
  }

  .solution-item {
    min-height:
      auto;

    padding:
      13px;
  }

  .legal-note {
    padding:
      0 12px;

    font-size:
      8px;
  }

}


/* =========================
   GERAR PROPOSTA
========================= */

.proposal-action {
  margin-top: 22px;

  padding: 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #f8fbff,
      #eef5ff
    );

  border:
    1px solid #d7e5fb;
}

.proposal-action-copy span,
.proposal-action-copy strong,
.proposal-action-copy p {
  display: block;
}

.proposal-action-copy span {
  color: var(--blue);

  font-size: 9px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.09em;
}

.proposal-action-copy strong {
  margin-top: 6px;

  font-size: 15px;

  letter-spacing: -0.025em;
}

.proposal-action-copy p {
  margin: 5px 0 0;

  color: var(--text-soft);

  font-size: 10px;

  line-height: 1.5;
}

.generate-proposal-button {
  min-height: 50px;

  padding: 0 18px;

  flex-shrink: 0;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 15px;

  border: 0;

  border-radius: 13px;

  background: var(--blue);

  color: #ffffff;

  font-size: 11px;

  font-weight: 700;

  box-shadow:
    0 10px 22px
    rgba(26, 115, 232, 0.2);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.generate-proposal-button:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 14px 28px
    rgba(26, 115, 232, 0.24);
}

.generate-proposal-button strong {
  font-size: 17px;
}


/* MOBILE */

@media (max-width: 680px) {

  .proposal-action {
    padding: 16px;

    flex-direction: column;

    align-items: stretch;

    gap: 15px;
  }

  .proposal-action-copy strong {
    font-size: 13px;
  }

  .proposal-action-copy p {
    font-size: 9px;
  }

  .generate-proposal-button {
    width: 100%;

    min-height: 50px;
  }

}

/* =========================
   MOBILE PEQUENO
========================= */

@media (
  max-width: 390px
) {

  .app-shell {
    padding-left:
      10px;

    padding-right:
      10px;
  }

  .hero h1 {
    font-size:
      34px;
  }

  .metric-card {
    padding:
      13px;
  }

  .metric-number {
    font-size:
      35px;
  }

  .metric-score strong {
    font-size:
      35px;
  }

  .score-main {
    grid-template-columns:
      100px 1fr;
  }

  .score-gauge {
    width:
      98px;

    height:
      98px;
  }

  .score-gauge-inner strong {
    font-size:
      31px;
  }

}