.srs-hero{
  --maxw: 1320px;
  --padX: clamp(14px, 4vw, 28px);
  --padY: clamp(30px, 7vh, 78px);
  --r: 10px;

  --title: #0b1220;
  --muted: #3b4a66;
  --line: #e8ecf4;

  --g1:#7c3aed;
  --g2:#ec4899;
  --g3:#fb7185;
  --g4:#f59e0b;
  --g5:#10b981;

  --safeL: env(safe-area-inset-left, 0px);
  --safeR: env(safe-area-inset-right, 0px);

  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--padY) calc(var(--padX) + var(--safeR)) var(--padY) calc(var(--padX) + var(--safeL));

  border: 1px solid var(--line);
  border-radius: var(--r);
  background-clip: padding-box;

  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(1000px 500px at 90% 0%, rgba(16,185,129,.22), transparent 65%),
    linear-gradient(120deg, rgba(124,58,237,.06), rgba(236,72,153,.05) 40%, rgba(245,158,11,.06) 75%, rgba(16,185,129,.06));

  contain: layout paint;
  color: var(--title);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  overflow-wrap: anywhere;
  hyphens: none;
}

.srs-hero,
.srs-hero *{ box-sizing: border-box; }

.srs-container{
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  min-width: 0;
}

.srs-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(210px, 14vw, 255px);
  gap: clamp(12px, 2vw, 22px);
  align-items: end;
  min-width: 0;
  max-width: 100%;
}

.srs-content{ min-width: 0; }

/* Background elements */
.srs-glow,
.srs-ring{
  position: absolute;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

.srs-glow{
  inset: -40% -20% auto;
  height: 80vh;
  min-height: 520px;
  background:
    radial-gradient(closest-side, rgba(236,72,153,.15), transparent 70%) 65% 25%/45% 45% no-repeat,
    radial-gradient(closest-side, rgba(124,58,237,.18), transparent 70%) 20% 10%/40% 40% no-repeat,
    radial-gradient(closest-side, rgba(16,185,129,.16), transparent 70%) 80% 5%/35% 35% no-repeat;
  filter: blur(30px);
  opacity: .72;
  animation: srs-drift 18s linear infinite alternate;
}

@keyframes srs-drift{
  to{ transform: translateY(20px) translateX(-10px) scale(1.02); }
}

.srs-ring{
  inset: -120px -120px auto auto;
  width: 420px;
  height: 420px;
  background: conic-gradient(from 140deg, var(--g1), var(--g2), var(--g3), var(--g4), var(--g5), var(--g1));
  -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
          mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
  filter: blur(18px) saturate(1.2);
  opacity: .35;
  animation: srs-spin 24s linear infinite;
}

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

/* Eyebrow */
.srs-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;

  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  color: #0b1220;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(16,24,40,.08);
  opacity: .98;

  max-width: 100%;
  white-space: normal;
  flex-wrap: wrap;
}

/* Title */
.srs-title{
  margin: 22px 0 18px;
  font-size: clamp(26px, 5.2vw, 58px);
  line-height: 1.06;
  letter-spacing: -.02em;
  font-weight: 900;
  max-width: 100%;
  text-wrap: balance;
}

@supports not (text-wrap: balance){
  .srs-title{ overflow-wrap: anywhere; }
}

.srs-lead{
  margin: 0 0 22px;
  color: var(--muted);
  font-size: clamp(14px, 1.75vw, 18px);
  line-height: 1.65;
  max-width: 100%;
}

.srs-lead strong{ font-weight: 800; }

/* Chips */
.srs-chips{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, .85vw, 10px);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 100%;
}

.srs-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(7px, .65vw, 8px) clamp(10px, .85vw, 12px);
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--r);
  font-weight: 800;
  font-size: clamp(12px, .9vw, 13px);
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
}

.srs-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.srs-c-cyan{ color: #06b6d4; }
.srs-c-violet{ color: #8b5cf6; }
.srs-c-amber{ color: #f59e0b; }
.srs-c-emerald{ color: #10b981; }

/* Trusted box */
.srs-trustedBox{
  width: 100%;
  justify-self: end;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 12px;

  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 40px rgba(16,24,40,.12);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  min-width: 0;
  max-width: 100%;
}

.srs-trustedTop{
  display: flex;
  align-items: center;
  justify-content: center;
}

.srs-trustedTitle{
  width: 100%;
  text-align: center;
  overflow-wrap: anywhere;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(11,18,32,.65);
}

/* Logo card */
.srs-trustedLogo{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;

  border-radius: var(--r);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 10px 26px rgba(16,185,129,.10);

  flex: 0 0 auto;
  max-width: 100%;
  min-width: 0;
}

.srs-trustedLogo img{
  display: block;
  width: auto;
  height: auto;
  max-height: 34px;
  max-width: min(210px, 70vw);
}

/* Link micro-interaction (scoped) */
.srs-trustedLink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r);
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, filter .18s ease;
}

.srs-trustedLink:hover{
  transform: translateY(-1px);
  filter: saturate(1.04);
}

.srs-trustedLink:active{ transform: translateY(0); }

.srs-trustedLink:focus-visible{
  box-shadow: 0 0 0 3px rgba(124,58,237,.25);
}

.srs-reviews{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}

.srs-stars{
  display: inline-flex;
  justify-content: center;
  width: 100%;

  gap: 3px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #f59e0b;
}

.srs-stars span{ transform: translateY(-.5px); }

/* Responsive */
@media (max-width: 1200px){
  .srs-layout{
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }

  .srs-trustedBox{
    width: fit-content;
    max-width: 100%;
    margin: 12px auto 0;
    justify-self: center;
    align-self: start;
  }
}

@media (max-width: 680px){
  .srs-hero{
    padding: 30px calc(var(--padX) + var(--safeR)) 30px calc(var(--padX) + var(--safeL));
  }

  .srs-title{ font-size: 28px; line-height: 1.08; }
  .srs-lead{ font-size: 14px; }
  .srs-chips{ justify-content: center; }

  .srs-chip{
    white-space: normal;
    text-align: center;
    justify-content: center;
  }

  .srs-trustedLogo img{ max-height: 28px; max-width: 100%; }
  .srs-glow{ opacity: .6; filter: blur(26px); }
  .srs-ring{ width: 300px; height: 300px; opacity: .26; }
}

@media (max-width: 420px){
  .srs-trustedBox{
    width: 100%;
    max-width: 100%;
    margin: 12px 0 0;
    padding: 12px;
  }

  .srs-trustedLogo{ padding: 10px 12px; width: 100%; }

  .srs-eyebrow{
    justify-content: center;
    text-align: center;
    width: fit-content;
  }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  .srs-glow, .srs-ring{ animation: none; }
  .srs-trustedLink{ transition: none; }
}