1,600&family=Space+Grotesk:wght@300;500;700&display=swap");
.ipx-hero{--ipx-accent:#1D5DC7;--ipx-accent-2:#00C3A6;--ipx-ease:cubic-bezier(.22,1,.36,1)}
.ipx-hero .c{display:inline-block}
.ipx-hero h1::after{content:"";display:block;height:4px;width:min(8rem,30%);margin-top:1rem;border-radius:4px;background:linear-gradient(90deg,var(--ipx-accent),var(--ipx-accent-2));transform-origin:left}

/* headline: ONE paragraph, four styled phrases */
.ipx-h2{display:block;margin:0;max-width:21em;font-family:"Space Grotesk",system-ui,sans-serif;font-weight:300;font-size:clamp(1.6rem,4.3vw,3.2rem);line-height:1.3;color:#c3d0ee}
.ipx-h2 .seg{transition:opacity .5s,text-decoration-color .4s;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:3px;text-underline-offset:.16em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ipx-h2 .seg.dim{opacity:.25}
.ipx-h2 .seg.focus{text-decoration-color:var(--ipx-accent-2)}
/* 1 · bold white with a teal marker highlight */
.ipx-h2 .p1{font-weight:700;color:#fff;letter-spacing:-.02em;background:linear-gradient(transparent 62%,rgba(0,195,166,.5) 62%) no-repeat 0 0/0 100%;transition:background-size .8s var(--ipx-ease),opacity .5s,text-decoration-color .4s}
.ipx-h2 .p1.fill{background-size:100% 100%}
/* 2 · elegant italic serif */
.ipx-h2 .p2{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:400;font-size:1.1em;color:#9db9f5}
/* 3 · glowing gradient */
.ipx-h2 .p3{font-weight:700;letter-spacing:-.03em;font-size:1.12em;background:linear-gradient(90deg,#7fb0ff,var(--ipx-accent-2),#7fb0ff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(0,195,166,.35))}
.ipx-hero.settled .p3{animation:ipx-shimmer 5s linear infinite}
/* 4 · outlined caps that fill onto a blue highlight */
.ipx-h2 .p4{font-weight:700;font-size:.8em;letter-spacing:.07em;text-transform:uppercase;padding:.04em .3em;border-radius:.22em;color:transparent;-webkit-text-stroke:1.2px #7fb0ff;background:linear-gradient(rgba(29,93,199,.75),rgba(29,93,199,.75)) no-repeat 0 0/0 100%;transition:color .9s,-webkit-text-stroke-color .9s,background-size .9s var(--ipx-ease),opacity .5s,text-decoration-color .4s}
.ipx-h2 .p4.fill{color:#fff;-webkit-text-stroke-color:transparent;background-size:100% 100%}
.ipx-h2 .p4 .dot{color:#3df5d3}

/* typing + caret */
.js .ch{visibility:hidden;position:relative}
.js .ch.on{visibility:visible}
.js .ch.cur::after{content:"";position:absolute;left:100%;top:.08em;bottom:.04em;width:.06em;min-width:2px;margin-left:.05em;background:var(--ipx-accent-2);box-shadow:0 0 10px var(--ipx-accent-2);-webkit-text-stroke:0;animation:ipx-blink .9s steps(1) infinite}
.ipx-hero.typing .ch.cur::after{animation:none}

/* hidden start state (JS only, so no-JS visitors still see the text) */
.js .ipx-hero .c,.js .ipx-hero [data-fade]{opacity:0}
.js .ipx-hero h1::after{transform:scaleX(0)}
.ipx-hero.play .c{animation:ipx-char .9s var(--ipx-ease) calc(.15s + var(--i)*55ms) both}
.ipx-hero.play h1::after{animation:ipx-sweep .9s var(--ipx-ease) 1s both}
.ipx-hero.play [data-fade="in"],.ipx-hero.typed [data-fade="end"]{animation:ipx-fade .8s var(--ipx-ease) var(--d,0s) both}

@keyframes ipx-char{from{opacity:0;transform:translateY(60%);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes ipx-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ipx-sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ipx-shimmer{to{background-position:200% 0}}
@keyframes ipx-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .js .ipx-hero *{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .js .ipx-hero h1::after{transform:none!important}
}

.hero.ipx-hero.play h1 .c{opacity:1}.hero.ipx-hero.typed [data-fade="end"]{opacity:1;transform:none}.hero.ipx-hero h2.ipx-h2{color:#17212b;line-height:1.55;margin-top:28px;margin-bottom:32px;max-width:24em}.hero.ipx-hero .ipx-h2 .seg{word-spacing:.06em}.hero.ipx-hero .ipx-h2 .p1{color:#17212b}.hero.ipx-hero .ipx-h2 .p2{color:#2458df}.hero.ipx-hero .ipx-h2 .p3{background-image:linear-gradient(90deg,#2458df,#087c70,#2458df);filter:none}.hero.ipx-hero .ipx-h2 .p4{font-size:1em;text-transform:none;letter-spacing:0}.hero.ipx-hero .ipx-h2 .p4 .dot{color:inherit}@media(max-width:600px){.hero.ipx-hero h2.ipx-h2{line-height:1.5;margin-top:20px;margin-bottom:24px}}
.hero.ipx-hero .hero-photo{transform-origin:65% 45%}html .hero.ipx-hero.typed .hero-photo{animation:hero-gentle-image-zoom 20s cubic-bezier(.25,.1,.25,1) forwards!important}@keyframes hero-gentle-image-zoom{from{scale:1}to{scale:1.10}}@media(prefers-reduced-motion:reduce){html .hero.ipx-hero.typed .hero-photo{animation:none!important;scale:1}}
.js .hero.ipx-hero .actions .btn{opacity:0;transform:translateY(12px)}html .hero.ipx-hero.typed .actions .btn{animation:hero-button-arrive .65s cubic-bezier(.22,1,.36,1) both!important}html .hero.ipx-hero.typed .actions .btn:nth-child(2){animation-delay:.5s!important}@keyframes hero-button-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){html .hero.ipx-hero .actions .btn{animation:none!important;opacity:1;transform:none}}
.hero.ipx-hero .ipx-h2{font-family:Inter,system-ui,sans-serif;font-size:31px}.hero.ipx-hero .ipx-h2 .seg{letter-spacing:0}.hero.ipx-hero.play h1::after{animation:ipx-sweep .9s var(--ipx-ease) 1s both!important}.hero.ipx-hero.settled .p3{animation:ipx-shimmer 5s linear infinite!important}@media(max-width:600px){.hero.ipx-hero .ipx-h2{font-size:26px}}@media(prefers-reduced-motion:reduce){html .hero.ipx-hero.play h1::after,html .hero.ipx-hero.settled .p3{animation:none!important}}