/* =========================================================
   INSURANCE — PHASE 01 HERO
   ========================================================= */

:root {
    --insurance-p1-ink: #14233b;
    --insurance-p1-muted: #58677b;
    --insurance-p1-blue: #145db4;
    --insurance-p1-surface: #f8fbff;
}

html { scroll-behavior: smooth; }

.insurance-phase-one,
.insurance-phase-one * { box-sizing: border-box; }

.insurance-phase-one {
    overflow: hidden;
    background: linear-gradient(135deg, #fff 0%, #f9fcff 55%, #f5f9ff 100%);
    color: var(--insurance-p1-ink);
}

.insurance-phase-one__container {
    display: grid;
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    align-items: center;
    gap: clamp(24px, 4vw, 60px);
    width: min(100% - 48px, 1200px);
    min-height: clamp(650px, calc(100vh - 120px), 790px);
    margin: 0 auto;
    padding: clamp(58px, 7vw, 94px) 0;
}

.insurance-phase-one__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.insurance-phase-one__eyebrow {
    margin: 0 0 16px;
    padding: 8px 13px;
    border: 1px solid #cbdff5;
    border-radius: 999px;
    background: rgba(237, 246, 255, .8);
    color: #145db4;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
}

.insurance-phase-one__title {
    max-width: 650px;
    margin: 0;
    font-size: clamp(2.35rem, 4.1vw, 4.25rem);
    font-weight: 700;
    letter-spacing: -.048em;
    line-height: 1.08;
}

.insurance-phase-one__subhead {
    margin: 18px 0 0;
    color: #225b91;
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    font-weight: 700;
    line-height: 1.5;
}

.insurance-phase-one__description {
    max-width: 610px;
    margin: 13px 0 0;
    color: var(--insurance-p1-muted);
    font-size: clamp(.92rem, 1.15vw, 1.02rem);
    line-height: 1.72;
}

.insurance-phase-one__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 11px;
    margin: 27px 0 0;
    padding: 0;
    list-style: none;
}

.insurance-phase-one__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 14px;
    border: 1px solid rgba(190, 208, 230, .85);
    border-radius: 999px;
    background: rgba(255, 255, 255, .62);
    box-shadow: 0 5px 16px rgba(33, 73, 119, .08);
    color: #334b66;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    backdrop-filter: blur(9px);
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.insurance-phase-one__pill svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.insurance-phase-one__pill--life { color: #1c5f9f; }
.insurance-phase-one__pill--health { color: #078b83; }
.insurance-phase-one__pill--wealth { color: #a97618; }
.insurance-phase-one__pill--car { color: #2866bd; }
.insurance-phase-one__pill--bike { color: #5059a6; }

.insurance-phase-one__pill:hover {
    border-color: currentColor;
    background: #fff;
    box-shadow: 0 9px 22px rgba(33, 73, 119, .13);
    transform: translateY(-3px);
}

.insurance-phase-one__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    margin-top: 28px;
    padding: 14px 22px;
    border-radius: 9px;
    background: linear-gradient(135deg, #1264bc, #224bb2);
    box-shadow: 0 10px 24px rgba(20, 93, 180, .25);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.insurance-phase-one__cta:hover { box-shadow: 0 14px 28px rgba(20, 93, 180, .33); transform: translateY(-2px); }
.insurance-phase-one__cta:focus-visible { outline: 3px solid #0c79e8; outline-offset: 4px; }
.insurance-phase-one__cta span:last-child { font-size: 1.15rem; transition: transform 180ms ease; }
.insurance-phase-one__cta:hover span:last-child { transform: translateY(3px); }

.insurance-phase-one__disclaimer {
    max-width: 555px;
    margin: 14px 0 0;
    color: #69778a;
    font-size: .7rem;
    line-height: 1.6;
}

.insurance-phase-one__visual {
    display: grid;
    place-items: center;
    min-width: 0;
}

.insurance-phase-one__canvas { display: block; width: min(100%, 530px); height: auto; }
.insurance-phase-one__orbit { fill: none; stroke: #a6c9ee; }
.insurance-phase-one__orbit--large { stroke-width: 1.2; opacity: .65; }
.insurance-phase-one__orbit--small { stroke-dasharray: 3 8; stroke-width: 1.1; opacity: .8; }
.insurance-phase-one__connection { stroke: #91b9e4; stroke-dasharray: 3 6; stroke-width: 1.2; }
.insurance-phase-one__shield-back { fill: #dceaff; fill-opacity: .86; stroke: #91b9e4; stroke-width: 1.2; }
.insurance-phase-one__shield { fill: url(#phaseOneShield); }
.insurance-phase-one__family { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.insurance-phase-one__family-base { fill: none; stroke: #bfe0ff; stroke-linecap: round; stroke-width: 3; }
.insurance-phase-one__bubble > circle:first-child { fill: #fff; stroke-width: 1.4; }
.insurance-phase-one__bubble path, .insurance-phase-one__bubble circle:not(:first-child) { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.insurance-phase-one__bubble--health { color: #078b83; }.insurance-phase-one__bubble--health > circle:first-child { stroke: #5accc5; fill: #edfffc; }.insurance-phase-one__bubble--wealth { color: #aa791a; }.insurance-phase-one__bubble--wealth > circle:first-child { stroke: #e2bd59; fill: #fffaf0; }.insurance-phase-one__bubble--car { color: #2866bd; }.insurance-phase-one__bubble--car > circle:first-child { stroke: #7faeee; fill: #f1f7ff; }.insurance-phase-one__bubble--bike { color: #555bac; }.insurance-phase-one__bubble--bike > circle:first-child { stroke: #9297db; fill: #f4f4ff; }.insurance-phase-one__bubble--life { color: #1961a4; }.insurance-phase-one__bubble--life > circle:first-child { stroke: #71a9dd; fill: #eff8ff; }
.insurance-phase-one__pulse { stroke-dasharray: 2 3; opacity: .7; }.insurance-phase-one__spark { fill: #66a5e6; }

@media (max-width: 360px) {
    .insurance-phase-one__container { display: flex; flex-direction: column; width: 100%; min-height: 0; gap: 26px; padding: 46px 12px 38px; }
    .insurance-phase-one__title { font-size: 2.05rem; }
    .insurance-phase-one__pills { gap: 8px; margin-top: 23px; }
    .insurance-phase-one__pill { min-height: 44px; padding: 7px 10px; font-size: .74rem; }.insurance-phase-one__pill svg { width: 24px; height: 24px; }
    .insurance-phase-one__cta { width: 100%; }
}

@media (min-width: 361px) and (max-width: 480px) {
    .insurance-phase-one__container { display: flex; flex-direction: column; width: min(100% - 32px, 540px); min-height: 0; gap: 28px; padding: 52px 0 42px; }
    .insurance-phase-one__title { font-size: clamp(2.15rem, 10.5vw, 2.75rem); }
    .insurance-phase-one__pills { gap: 10px; }.insurance-phase-one__pill { min-height: 46px; }.insurance-phase-one__pill svg { width: 26px; height: 26px; }
    .insurance-phase-one__cta { width: 100%; }
}

@media (min-width: 481px) and (max-width: 767px) {
    .insurance-phase-one__container { display: flex; flex-direction: column; width: min(100% - 48px, 620px); min-height: 0; gap: 30px; padding: 62px 0 48px; }
    .insurance-phase-one__pills { gap: 11px; }.insurance-phase-one__cta { min-width: 285px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .insurance-phase-one__container { grid-template-columns: 1fr; width: min(100% - 64px, 820px); min-height: 0; gap: 24px; padding: 66px 0 56px; }
    .insurance-phase-one__visual { max-width: 520px; margin: 0 auto; }.insurance-phase-one__cta { min-width: 285px; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .insurance-phase-one__container { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); width: min(100% - 64px, 1160px); }
}

@media (min-width: 1280px) {
    .insurance-phase-one__container { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); width: min(100% - 64px, 1200px); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }.insurance-phase-one__pill, .insurance-phase-one__cta, .insurance-phase-one__cta span:last-child { transition: none; }
}