/* ── Artbreeze SEO Scanner — Brand-matched styles v1.2 ── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

.abseo-wrap {
  /* ── Artbreeze brand palette (matches artbreeze.marketing) ── */
  --ab-bg:        #010432;   /* deep navy — matches site header */
  --ab-surface:   #0d1a8a;   /* slightly lighter navy */
  --ab-surface2:  #1228a0;   /* hover / active surface */
  --ab-border:    #1e3ab8;   /* border lines */
  --ab-border2:   #2d52d4;   /* stronger border on hover */
  --ab-text:      #ffffff;   /* white text */
  --ab-muted:     #a0b4e8;   /* muted / secondary text */
  --ab-accent:    #ffffff;   /* white CTAs (matches "GET STARTED" button) */
  --ab-accent-d:  #e8eeff;
  --ab-accent-b:  #7eb3ff;   /* light blue highlights */
  --ab-red:       #ff6b6b;
  --ab-amber:     #ffc94d;
  --ab-green:     #4dffc3;
  --ab-wa:        #25D366;
  --ab-r:         6px;
  --ab-rlg:       10px;
  --ab-font-h:    'Montserrat', sans-serif;  /* matches site nav font */
  --ab-font-b:    'Montserrat', sans-serif;

  background: var(--ab-bg);
  color: var(--ab-text);
  font-family: var(--ab-font-b);
  font-size: 13px;
  line-height: 1.6;
  /*
  border-radius: 12px;*/
  padding: 2.5rem 2rem 3rem;
  max-width: 960px;
  margin: 2rem auto;
  -webkit-font-smoothing: antialiased;
}

/* ── Hero ── */
.abseo-hero { margin-bottom: 2rem; }

.abseo-hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .65rem; text-transform: uppercase; letter-spacing: .2em;
  color: var(--ab-muted); margin-bottom: 1rem; font-weight: 600;
}
.abseo-dot {
  width: 7px; height: 7px;
  background: #7eb3ff; border-radius: 50%;
  animation: abseo-pulse 2s ease infinite;
}
@keyframes abseo-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.abseo-hero-title {
  font-family: var(--ab-font-h);
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  margin: 0 0 .6rem; color: #ffffff !important;
}
.abseo-hero-title span { color: #ebbd03 !important; }
.abseo-hero-sub {
  font-size: .82rem; color: var(--ab-muted);
  max-width: 52ch; line-height: 1.75; margin: 0; font-weight: 400;
}

/* ── Input card ── */
.abseo-input-card {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: var(--ab-rlg) !important; padding: 1.25rem !important; margin-bottom: 1.25rem !important;
}
.abseo-scan-row { display: flex; gap: 8px; }
.abseo-url-wrap { flex: 1; position: relative; }
.abseo-prefix {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ab-muted); font-size: .75rem; pointer-events: none;
}
.abseo-url-input {
  width: 100%; height: 46px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: var(--ab-r); color: #fff !important;
  font-family: var(--ab-font-b); font-size: .82rem !important;
  padding: 0 12px 0 54px; outline: none; transition: border-color .2s !important;
}
.abseo-url-input:focus { border-color: rgba(255,255,255,.5); !important }
.abseo-url-input::placeholder { color: var(--ab-muted) !important; }

.abseo-btn-scan {
  height: 46px; padding: 0 1.4rem;
  background: #ffffff !important; color: #0a1172 !important;
  border: none; border-radius: var(--ab-r) !important;
  font-family: var(--ab-font-h); font-size: .78rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  white-space: nowrap; transition: background .15s, transform .1s;
}
.abseo-btn-scan:hover  { background: #e8eeff; }
.abseo-btn-scan:active { transform: scale(.97); }
.abseo-btn-scan:disabled { opacity: .4; cursor: not-allowed; }

.abseo-note { margin-top: .75rem; font-size: .67rem; color: var(--ab-muted); }

/* ── Loading ── */
.abseo-loading {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--ab-rlg); padding: 2.5rem 1.5rem;
  text-align: center; margin-bottom: 1.25rem;
}
.abseo-spinner {
  width: 44px; height: 44px; margin: 0 auto 1.25rem;
  border: 2.5px solid rgba(255,255,255,.15);
  border-top-color: #ffffff; border-radius: 50%;
  animation: abseo-spin .8s linear infinite;
}
@keyframes abseo-spin { to { transform: rotate(360deg); } }
.abseo-loading-msg {
  font-family: var(--ab-font-h); font-size: .95rem;
  font-weight: 700; color: #fff;
}
.abseo-steps {
  display: inline-flex; flex-direction: column;
  gap: 5px; text-align: left; margin-top: .75rem;
}
.abseo-step {
  display: flex; align-items: center; gap: 8px;
  font-size: .7rem; color: var(--ab-muted); transition: color .3s;
}
.abseo-step.done { color: var(--ab-green); }
.abseo-step-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; flex-shrink: 0; transition: background .3s;
}
.abseo-step.done .abseo-step-dot {
  background: var(--ab-green); border-color: var(--ab-green); color: #0a1172;
}

/* ── Error ── */
.abseo-error-box {
  background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.35);
  border-radius: var(--ab-r); padding: 1rem 1.25rem;
  color: #ff9999; font-size: .8rem; margin-bottom: 1.25rem;
}

/* ── Score hero ── */
.abseo-score-hero {
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem;
  align-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--ab-rlg); padding: 1.25rem; margin-bottom: .875rem;
}
.abseo-ring-wrap { position: relative; width: 90px; height: 90px; flex-shrink: 0; }
.abseo-ring-wrap svg { transform: rotate(-90deg); }
.abseo-ring-label {
  position: absolute; inset: 0; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
}
.abseo-ring-num {
  font-family: var(--ab-font-h); font-size: 1.6rem;
  font-weight: 800; color: #fff; line-height: 1;
}
.abseo-ring-sub { font-size: .6rem; color: var(--ab-muted); text-transform: uppercase; letter-spacing: .1em; }
#abseo-ring-arc { transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1), stroke .4s; }

.abseo-score-heading {
  font-family: var(--ab-font-h); font-size: 1rem; font-weight: 700;
  color: #fff !important; margin: 0 0 .25rem;
}
.abseo-score-desc { font-size: .72rem; color: var(--ab-muted); margin: 0 0 .5rem; }

/* ── Grade pill ── */
.abseo-grade-pill {
  display: inline-block; font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  padding: 3px 12px; border-radius: 99px; font-family: var(--ab-font-h);
}
.abseo-grade-good { background: rgba(77,255,195,.15); color: var(--ab-green); border: 1px solid rgba(77,255,195,.3); }
.abseo-grade-avg  { background: rgba(255,201,77,.15);  color: var(--ab-amber); border: 1px solid rgba(255,201,77,.3); }
.abseo-grade-poor { background: rgba(255,107,107,.15); color: var(--ab-red);   border: 1px solid rgba(255,107,107,.3); }

/* ── Metrics grid ── */
.abseo-metrics-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 8px; margin-bottom: .875rem;
}
.abseo-metric-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--ab-r); padding: .75rem 1rem;
}
.abseo-metric-label {
  font-size: .6rem; color: var(--ab-muted);
  text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: .35rem; font-weight: 600;
}
.abseo-metric-val {
  font-family: var(--ab-font-h); font-size: 1rem;
  font-weight: 700; margin-bottom: .35rem; line-height: 1.2;
}
.abseo-metric-bar { height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.abseo-metric-fill { height: 100%; border-radius: 2px; width: 0; transition: width 1.1s cubic-bezier(.4,0,.2,1); }

/* ── Category tiles ── */
.abseo-cat-grid {
  display: grid; grid-template-columns: repeat(7,1fr);
  gap: 8px; margin-bottom: .875rem;
}
.abseo-cat-tile {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--ab-r); padding: .75rem .55rem .6rem;
  cursor: pointer; transition: border-color .15s, background .15s;
  position: relative; overflow: hidden;
}
.abseo-cat-tile::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: var(--tile-color, rgba(255,255,255,.2));
}
.abseo-cat-tile:hover  { background: rgba(255,255,255,.1); }
.abseo-cat-tile.active {
  border-color: var(--tile-color);
  background: rgba(255,255,255,.12);
}
.abseo-tile-icon { font-size: .9rem; margin-bottom: 4px; }
.abseo-tile-name {
  font-size: .52rem; color: var(--ab-muted); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 3px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.abseo-tile-score {
  font-family: var(--ab-font-h); font-size: 1.1rem;
  font-weight: 800; line-height: 1;
}
.abseo-new-badge {
  display: inline-block; font-size: .48rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 1px 5px; border-radius: 3px; line-height: 1.5;
  background: rgba(232,121,249,.25); color: #e879f9; margin-bottom: 2px;
}
.abseo-new-badge.aeo { background: rgba(56,189,248,.2); color: #38bdf8; }
.abseo-geo-explain {
  background: rgba(232,121,249,.07); border: 1px solid rgba(232,121,249,.2);
  border-radius: var(--ab-r); padding: .65rem 1rem;
  font-size: .7rem; color: var(--ab-muted); line-height: 1.6;
  margin: .5rem 1.25rem .25rem;
}
.abseo-aeo-explain {
  background: rgba(56,189,248,.07); border: 1px solid rgba(56,189,248,.2);
  border-radius: var(--ab-r); padding: .65rem 1rem;
  font-size: .7rem; color: var(--ab-muted); line-height: 1.6;
  margin: .5rem 1.25rem .25rem;
}

/* ── Detail panel ── */
.abseo-detail-panel {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--ab-rlg); overflow: hidden; margin-bottom: .875rem;
}
.abseo-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  gap: 1rem; flex-wrap: wrap;
}
.abseo-detail-header h4{}

.abseo-detail-title {
  color: #d8ff00;
  font-family: var(--ab-font-h); font-size: .88rem; 
  font-weight: 700; color: #fff; margin: 0 0 2px;
}
.abseo-detail-sub { font-size: .62rem; color: var(--ab-muted); margin: 0; }

.abseo-issue-list { padding: .25rem 0; }
.abseo-issue-row {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .7rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .12s;
}
.abseo-issue-row:last-child { border-bottom: none; }
.abseo-issue-row:hover { background: rgba(255,255,255,.05); }

.abseo-issue-sev {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px; font-size: .65rem; font-weight: 700;
}
.abseo-sev-high { background: rgba(255,107,107,.18); color: var(--ab-red); }
.abseo-sev-med  { background: rgba(255,201,77,.18);  color: var(--ab-amber); }
.abseo-sev-low  { background: rgba(77,255,195,.15);  color: var(--ab-green); }

.abseo-issue-body { flex: 1; }
.abseo-issue-title { font-size: .77rem; font-weight: 600; color: #fff; margin-bottom: 2px; }
.abseo-issue-desc  { font-size: .7rem; color: var(--ab-muted); line-height: 1.55; }

.abseo-issue-tag {
  font-size: .58rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; padding: 2px 8px; border-radius: 4px;
  flex-shrink: 0; align-self: flex-start; margin-top: 2px;
}
.abseo-tag-high { background: rgba(255,107,107,.18); color: var(--ab-red); }
.abseo-tag-med  { background: rgba(255,201,77,.18);  color: var(--ab-amber); }
.abseo-tag-low  { background: rgba(77,255,195,.15);  color: var(--ab-green); }

.abseo-real-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: .6rem;
  color: #7eb3ff; background: rgba(126,179,255,.1);
  border: 1px solid rgba(126,179,255,.25);
  padding: 2px 8px; border-radius: 4px; margin: .5rem 1.25rem .25rem;
  font-weight: 600;
}
.abseo-empty-state {
  padding: 2rem 1.25rem; color: var(--ab-muted);
  font-size: .75rem; text-align: center;
}

/* ── CTA panel ── */
.abseo-cta-panel {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--ab-rlg); padding: 1.75rem 1.5rem;
  display: grid; grid-template-columns: 1fr auto;
  gap: 1.5rem; align-items: center;
}
.abseo-cta-tag {
  font-size: .62rem; color: #7eb3ff; text-transform: uppercase;
  letter-spacing: .15em; margin: 0 0 .3rem; font-weight: 700;
}
.abseo-cta-title {
  font-family: var(--ab-font-h); font-size: 1rem; font-weight: 700;
  color: #fff; margin: 0 0 .4rem;
}
.abseo-cta-desc { font-size: .73rem; color: var(--ab-muted); line-height: 1.65; margin: 0; }

.abseo-cta-btns { display: flex; flex-direction: column; gap: 8px; min-width: 170px; }

.abseo-btn-wa {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; padding: 0 1.25rem; background: var(--ab-wa); color: #fff;
  border-radius: var(--ab-r); font-family: var(--ab-font-h); font-size: .75rem;
  font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: opacity .15s; border: none;
}
.abseo-btn-wa:hover { opacity: .88; color: #fff; text-decoration: none; }

.abseo-btn-contact {
  display: flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 1.25rem;
  background: #ffffff; color: #0a1172;
  border: none; border-radius: var(--ab-r);
  font-family: var(--ab-font-h); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none; white-space: nowrap; transition: background .15s;
}
.abseo-btn-contact:hover { background: #e8eeff; color: #0a1172; text-decoration: none; }

/* ── Branding ── */
.abseo-branding {
  text-align: center; margin-top: 1.5rem;
  font-size: .65rem; color: var(--ab-muted);
}
.abseo-branding a { color: var(--ab-muted); text-decoration: underline; }
.abseo-branding a:hover { color: #fff; }

/* ── Responsive ── */
@media (max-width: 780px) {
  .abseo-cat-grid { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 640px) {
  .abseo-wrap { padding: 1.5rem 1rem 2rem; }
  .abseo-metrics-grid { grid-template-columns: 1fr 1fr; }
  .abseo-cat-grid { grid-template-columns: repeat(4,1fr); }
  .abseo-cta-panel { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .abseo-cat-grid { grid-template-columns: repeat(3,1fr); }
  .abseo-scan-row { flex-direction: column; }
  .abseo-btn-scan { width: 100%; justify-content: center; }
}