@font-face{font-family:Outfit;src:url("fonts/outfit-latin-wght-normal.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--ink:#fffdf7;--blue:#206bff;--teal:#00e5c4;--navy:#0B1D3A}*{box-sizing:border-box}html{min-height:100%;background:var(--navy)}body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}main{min-height:100svh;position:relative;display:grid;place-items:center;padding:76px 24px 108px;overflow:hidden}.identity{width:min(520px,76vw);text-align:center}h1{margin:0;font-size:clamp(84px,29vw,168px);line-height:.82;font-weight:900;letter-spacing:-.075em;text-align:center}.word{display:block;white-space:nowrap}.word:first-child{margin-bottom:.11em;letter-spacing:-.08em}.word:last-child{letter-spacing:-.06em}.ai{color:var(--teal)}.wave{display:block;width:100%;height:auto;margin:18px 0 33px;overflow:visible}.wave-crest{fill:var(--teal)}.wave-current{fill:var(--blue)}p{font-size:clamp(15px,2.7vw,21px);line-height:1.5;letter-spacing:-.025em;margin:0;white-space:nowrap}.contact{position:absolute;bottom:max(32px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font-size:14px;letter-spacing:.06em;text-decoration:none;color:#c2d4df;padding:12px;white-space:nowrap}.contact > span[aria-hidden]{margin-left:10px}.contact-ai{color:var(--teal)}.contact:hover{color:white;text-decoration:underline;text-underline-offset:6px}.contact:focus-visible{outline:2px solid var(--teal);outline-offset:5px}@media(min-width:700px){.identity{width:485px}h1{font-size:160px}}@media(max-width:380px){main{padding-inline:18px}.identity{width:82vw}h1{font-size:27vw}p{font-size:14px}.wave{margin-block:20px 28px}}@media(max-height:650px) and (min-width:700px){main{padding-top:35px;padding-bottom:85px}.identity{width:310px}h1{font-size:102px}.wave{margin-block:15px 20px}p{font-size:16px}.contact{bottom:15px}}

/* Static styles are the default, including when reduced motion is requested. */
.wave-art{transform-box:view-box;transform-origin:300px 100px;transform:scaleX(-1)}
@media(prefers-reduced-motion:no-preference){
  .wave{animation:wave-arrives 1050ms cubic-bezier(.22,.7,.18,1) 100ms backwards}
  .wave-art{animation:wave-turns-left 650ms cubic-bezier(.65,0,.35,1) 1200ms backwards}
  h1{animation:name-arrives 850ms cubic-bezier(.2,.7,.2,1) 260ms backwards}
  .ai{animation:title-teal-arrives 650ms ease-in-out 1200ms backwards}
  .tagline{animation:tagline-arrives 600ms cubic-bezier(.16,1,.3,1) 2450ms backwards}
  .contact{animation:hello-arrives 650ms ease-out 3150ms backwards}
}
@keyframes wave-arrives{from{clip-path:inset(-15% 101% -20% -2%)}to{clip-path:inset(-15% -2% -20% -2%)}}
@keyframes name-arrives{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes teal-arrives{from{background-position:0% 0}to{background-position:100% 0}}
@keyframes tagline-arrives{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes hello-arrives{from{opacity:0}to{opacity:1}}

.tagline-ai{color:var(--teal);font-weight:700}

h1{font-family:Outfit,Arial,sans-serif;font-weight:850;letter-spacing:-.055em}.word:first-child{letter-spacing:-.055em}.word:last-child{letter-spacing:-.045em}

/* Title color and wave flip share one beat; the tagline follows. */
@keyframes wave-turns-left{from{transform:scaleX(1)}to{transform:scaleX(-1)}}


/* The tagline keeps its soft teal sweep after the flip. */
.ai,.tagline-ai{
  background-image:linear-gradient(90deg,var(--ink) 33.333%,var(--teal) 66.667%);
  background-size:300% 100%;
  background-position:100% 0;
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
}

/* The title changes color uniformly; its timing stays ahead of the tagline reveal. */
.ai{background-image:none;color:var(--teal)}
@keyframes title-teal-arrives{from{color:var(--ink)}to{color:var(--teal)}}

@media(max-width:699px){
  .tagline{font-size:19px;line-height:1.45;white-space:normal}
  .tagline-line{display:block}
}

/* Keep the slogan AI white throughout the reveal and final state. */
.tagline-ai{background-image:none;color:var(--ink)}