/* Ringover homepage reference: https://www.ringover.fr/, inspected 2026-10-19.
   Shared presentation layer. Page content, photographs and conversion hooks stay in place. */
:root {
  --hero-ink: #001b39;
  --hero-cyan: #27c9d6;
  --hero-text: #e3edf7;
}

.hero {
  --ring-x: calc(50% + 320px);
  --ring-y: 305px;
  position: relative;
  isolation: isolate;
  padding-block: 64px 72px;
  color: var(--hero-text);
  background:
    radial-gradient(circle at var(--ring-x) var(--ring-y),
      transparent 0 200px, #ffffff14 200px 201.5px,
      transparent 201.5px 350px, #ffffff14 350px 351.5px,
      transparent 351.5px 500px, #ffffff14 500px 501.5px,
      transparent 501.5px 650px, #ffffff14 650px 651.5px,
      transparent 651.5px),
    radial-gradient(165.85% 63.32% at 99.17% -1.47%, #1d91ed80 0%, #1d91ed00 100%),
    radial-gradient(105.74% 60.55% at 54.49% 103.94%, #1d91ed80 0%, #1d91ed00 100%),
    var(--hero-ink);
}

.hero > .container {
  width: min(1280px, calc(100% - 2 * clamp(20px, 4vw, 40px)));
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
}
.hero .hero-copy { min-width: 0; max-width: 640px; }
.hero .hero-copy > .badge {
  background: #ffffff14;
  border: 1px solid #ffffff40;
  color: #fff;
  padding: 7px 13px;
  font: 600 12px/1.5 var(--font-body);
  letter-spacing: .01em;
}
.hero .badge-dot { background: var(--hero-cyan); }
.hero h1 {
  margin: 20px 0 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: initial;
}
.hero h1 > span { display: block; }
.hero .hero-copy > h1:first-child { margin-top: 0; }
.hero h1 .accent {
  color: #ffc54f;
  background: linear-gradient(115deg, #e9dfff 0%, #cf8fe4 30%, #ffc54f 76%, #ffc54f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.hero .intro {
  margin: 28px 0;
  max-width: 620px;
  color: #fff;
  font: 400 18px/1.5 var(--font-body);
}
.hero .trial-form { margin-top: 0; max-width: 590px; }
.hero .trial-form label { color: #fff; }
.hero .trial-row { display: flex; flex-direction: row; gap: 10px; }
.hero .trial-row input {
  background: #fff;
  border-color: #fff;
  color: var(--hero-ink);
  min-height: 54px;
  border-radius: 9px;
}
.hero .trial-row :is(.button, .btn) {
  flex: 0 0 auto;
  background: var(--hero-cyan);
  border: 1px solid var(--hero-cyan);
  color: var(--hero-ink);
  padding: 12px 17px;
  border-radius: 9px;
  min-height: 54px;
  font: 600 15px/1.4 var(--font-body);
}
.hero .trial-row :is(.button, .btn):hover {
  background: #70e0e8;
  border-color: #70e0e8;
}
.hero .divider { color: #c9d9e9; margin-block: 13px; }
.hero .divider::before, .hero .divider::after { background: #ffffff40; }
.hero :is(.button--outline, .btn-outline) {
  min-height: 48px;
  background: #ffffff08;
  color: #fff;
  border: 1px solid #ffffff80;
  border-radius: 9px;
}
.hero :is(.button--outline, .btn-outline):hover { background: #ffffff1a; }
.hero :is(.google-mark, .google-slot) { color: #fff; border-color: #ffffff80; }
.hero :is(.checks, .benefits) {
  color: var(--hero-text);
  gap: 7px 16px;
  font-size: 12px;
  line-height: 1.6;
  margin-top: 18px;
}
.hero .checks li::before, .hero .check { color: var(--hero-cyan); }
.hero .demo-link { color: #fff; font-size: 14px; }
.hero .demo-link .icon-disc {
  background: #ffffff14;
  color: var(--hero-cyan);
  border: 1px solid #ffffff40;
}
.hero .rating-line { color: #c9d9e9; margin-top: 20px; }
.hero .rating-line strong { color: #e3edf7; font-weight: 500; }
.hero .stars { color: #ffc54f; }
.hero :is(.form-status, .form-message, .form-error) { color: #ffd2d2; }
.hero input[aria-invalid=true] { border: 2px solid #ffc5c5 !important; }
.hero :focus-visible { outline: 3px solid var(--hero-cyan); outline-offset: 4px; }
.hero input:focus-visible { outline-color: #ffc54f; }
.hero .hero-visual {
  width: 100%;
  max-width: 600px;
  min-width: 0;
  padding: 24px;
  background: #001b3966;
  border: 1px solid #ffffff33;
  border-radius: 24px;
  box-shadow: 0 24px 64px #00112626, inset 0 1px #ffffff0a;
}

@media (min-width: 1440px) {
  .hero h1 { font-size: 48px; }
}
@media (max-width: 1199px) {
  .hero h1 { font-size: 36px; }
  .hero .trial-row { flex-direction: column; }
}
@media (max-width: 1023px) {
  .hero { --ring-x: 50%; --ring-y: calc(100% - 330px); }
  .hero > .container { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero .hero-copy { max-width: 690px; margin-inline: auto; width: 100%; }
  .hero .trial-form { max-width: none; }
  .hero .hero-visual { max-width: 690px; justify-self: center; }
  .hero .trial-row { flex-direction: row; }
}
@media (max-width: 767px) {
  .hero { padding-block: 40px 48px; }
  .hero h1 { font-size: clamp(30px, 7.8vw, 36px); line-height: 1.22; letter-spacing: -.02em; }
  .hero .intro { font-size: 16px; line-height: 1.6; margin-block: 24px; }
  .hero .trial-row { flex-direction: column; }
  .hero .trial-row :is(.button, .btn) { font-size: 16px; width: 100%; }
  .hero .hero-visual { padding: 16px; border-radius: 20px; }
  .hero .hero-copy > .badge { font-size: 11px; }
}
@media (forced-colors: active) {
  .hero h1 .accent { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}