@charset "UTF-8";

/* A self-contained addition to the HOME page; existing page styles stay shared. */
.seolens-feature {
  --lens-blue: #4564d9;
  margin-top: 110px;
  border-top: 1px solid #dfe3ed;
  border-bottom: 1px solid #dfe3ed;
  padding: 27px 0 40px;
  scroll-margin-top: 110px;
}
.seolens-kicker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .045em;
}
.seolens-kicker > span:last-child { color: #596174; letter-spacing: .02em; }
.seolens-layout {
  display: grid;
  grid-template-columns: minmax(200px, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(35px, 7vw, 100px);
}
.seolens-visual {
  display: grid;
  justify-items: center;
  align-content: center;
  align-self: stretch;
  min-height: 310px;
  padding: 18px;
  background: radial-gradient(ellipse at 48% 45%, #edf2ff, #f9faff 70%);
}
.seolens-visual svg { display: block; width: 275px; max-width: 100%; height: auto; }
.seolens-visual > span { color: #687797; font-size: 8px; letter-spacing: .15em; }
.seolens-copy { min-width: 0; padding: 14px 0; }
.seolens-copy h3 {
  font-family: var(--sans);
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.055em;
}
.seolens-copy h3 span { color: var(--lens-blue); }
.seolens-copy .seolens-tagline {
  margin-top: 24px;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.65;
}
.seolens-description { margin-top: 15px; color: #596174; font-size: 13px; line-height: 1.95; }
.seolens-cta {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 38px;
  min-height: 50px;
  margin-top: 28px;
  padding: 12px 22px;
  background: var(--lens-blue);
  color: #fff;
  border-radius: 28px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  transition: background .2s;
}
.seolens-cta svg { flex: 0 0 20px; transition: transform .2s; }
.seolens-cta:hover { background: #344fbc; }
.seolens-cta:hover svg { transform: translateX(3px); }
@media (max-width: 1050px) {
  .seolens-desktop-break { display: none; }
}
@media (max-width: 700px) {
  .seolens-feature { margin-top: 75px; padding: 23px 0 32px; }
  .seolens-kicker { font-size: 9px; gap: 12px; margin-bottom: 22px; }
  .seolens-layout { grid-template-columns: 1fr; gap: 28px; }
  .seolens-visual { min-height: 0; padding: 10px 18px 17px; }
  .seolens-visual svg { width: 210px; }
  .seolens-visual > span { font-size: 7px; }
  .seolens-copy { padding: 0; }
  .seolens-copy h3 { font-size: 36px; }
  .seolens-copy .seolens-tagline { margin-top: 18px; font-size: 21px; }
  .seolens-description { margin-top: 12px; font-size: 12px; }
  .seolens-cta { margin-top: 24px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .seolens-cta, .seolens-cta svg { transition: none; }
}
.motion-off .seolens-cta, .motion-off .seolens-cta svg { transition: none; }
@media print {
  .seolens-feature { break-inside: avoid; margin-top: 35px; }
}