:root{
  --bg1:#8fc4ea; --bg2:#c7e1ef; --bg3:#2c78ef;
  --ink:#273654; --muted:#71809b;
  --blue:#4d75ff; --purple:#8857ff; --green:#1aae73;
  --glass1:rgba(255,255,255,.82); --glass2:rgba(255,255,255,.60);
  --shadow:0 20px 54px rgba(40,72,134,.12), inset 0 1px 0 rgba(255,255,255,.45);
  --loop:26s;
}
*{box-sizing:border-box}
body .ai-hero {
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  line-height: 1.1em;
  position:relative;width:min(1220px,94vw);aspect-ratio:16/9;min-height:640px;overflow:hidden;border-radius:34px;
	background: url(/wp-content/uploads/2026/03/gradient-bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  max-width: 1180px;
}
.particle{position:absolute;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));opacity:.14}
.p1{left:132px;top:210px;animation:float1 6.2s ease-in-out infinite}
.p2{left:388px;top:560px;animation:float2 5.8s ease-in-out infinite}
.p3{right:390px;top:116px;animation:float3 6.6s ease-in-out infinite}
.p4{right:220px;top:482px;animation:float4 5.1s ease-in-out infinite}

.glass{
  position:absolute;background:linear-gradient(180deg,var(--glass1),var(--glass2));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.42);box-shadow:var(--shadow);overflow:hidden;
  will-change:opacity,transform;
}

/* ── LARGE GREETING (Phase 0) ──────────────────────────────── */
.greeting-large{
  position:absolute;
  left:50%;top:50%;
  display:flex;align-items:center;gap:18px;
  white-space:nowrap;
  font-size:58px;font-weight:800;letter-spacing:-.04em;color:var(--ink);
  z-index:50;
  animation:greetLargePhase var(--loop) linear infinite;
}
.wave-lg{display:inline-block;transform-origin:70% 70%;animation:wave 1.8s ease-in-out infinite}

/* ── ONBOARDING BOX (Phase 1) ──────────────────────────────── */
.onboarding{
  left:50%;top:50%;
  width:860px;height:340px;
  border-radius:15px;padding:22px 24px;
  z-index:30;
  margin-left:-430px;margin-top:-170px;
  background: #fff;
  animation:onboardingPhase var(--loop) linear infinite;
}
.on-top{display:flex;align-items:center;gap:16px}
.spark-badge{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background: linear-gradient(116deg, rgb(103, 33, 190) 0%, rgb(203, 70, 89) 100%);color:#fff;font-size:18px;
}
.on-title{font-size:22px;font-weight:700;letter-spacing:-.03em;display:flex;align-items:center;gap:10px;line-height:1.1}
.wave{display:inline-block;transform-origin:70% 70%;animation:wave 1.8s ease-in-out infinite}
.on-sub{margin-top:6px;font-size:16px;color:var(--muted)}
.greeting-large .on-sub {
	margin-top: 6px;
	font-size: 16px;
	color: #fff;
	width: 100%;
	letter-spacing: 0;
}

/* option-row — each card animates individually */
.option-row{margin-top:50px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.option{
  min-height:114px;border-radius:10px;padding:18px 16px 14px;
  background:rgba(255,255,255,.42);border:1px solid rgba(147,171,235,.24);
}
.option-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:18px;margin-bottom:16px}
.email .option-icon{background:rgba(244,79,79,.08);color:#ff4a4a}
.sms .option-icon{background:rgba(30,174,115,.08);color:#0f9e6a}
.lp .option-icon{background:rgba(190,104,255,.09);color:#b34cff}
.aud .option-icon{background:rgba(77,117,255,.08);color:#3f73ff}
.option-title{font-size:16px;font-weight:700;line-height:1.1}
.option-sub{margin-top:6px;font-size:12px;color:var(--muted);line-height:1.35}

/* Staggered card entrances + float + email border select */
.option.email{ animation:opt2Phase var(--loop) linear infinite, choiceFloat 5s ease-in-out infinite, emailSelectPhase var(--loop) linear infinite }
.option.sms  { animation:opt3Phase var(--loop) linear infinite, choiceFloat 5s .12s ease-in-out infinite }
.option.lp   { animation:opt4Phase var(--loop) linear infinite, choiceFloat 5s .24s ease-in-out infinite }
.option.aud  { animation:opt1Phase var(--loop) linear infinite, choiceFloat 5s .36s ease-in-out infinite }

/* ── PROMPT ──────────────────────────────────────────────────── */
.prompt{
  left:50%;margin-left:-370px;top:50%;margin-top:-52px;
  width:740px;height:104px;border-radius:15px;
  display:flex;align-items:center;gap:20px;padding:0 24px 0 28px;z-index:22;
  animation:promptPhase var(--loop) linear infinite; background:#fff;
}
.spark{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;color:#fff;font-size:20px}
.spark .ai {
	width: 100%;
	height: 100%;
}
.spark .ai svg, .spark-badge svg {
  width: 20px;
}
.prompt-copy-wrap{flex:1;min-width:0;overflow:hidden}
.prompt-copy{
  font-size:22px;line-height:1.1;letter-spacing:-.03em;color:#516078;white-space:nowrap;overflow:hidden;width:0;
  animation:typePrompt var(--loop) linear infinite;
}
.caret{width:2px;height:38px;background:#22314c;border-radius:2px;animation:blink .9s steps(1) infinite,caretWindow var(--loop) linear infinite}
.send{margin-left:auto;width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.84);flex:0 0 auto}
.send::before{content:"";width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid #1d2940;transform:translateX(2px)}

/* ── BOARD ───────────────────────────────────────────────────── */
.board{left:50%;margin-left:-380px;top:50%;margin-top:-200px;width:760px;height:400px;border-radius:12px;padding:22px 24px;z-index:12;animation:boardPhase var(--loop) linear infinite}
.board-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.board-title {
   font-size: 24px;
   font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.15;
	display: flex;
	gap: 10px;
}
.board-sub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.35;margin-left: 30px;}
.board-pill{padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.46);border:1px solid rgba(145,170,235,.25);font-size:10px;color:#61708d;font-weight:700;white-space:nowrap}
.board-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;height:248px}
.panel{background:rgba(255,255,255,.72);border:1px solid rgba(147,171,235,.18);border-radius:8px;padding:16px}
.panel-kicker{    font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .12em;color:#9aa6bd;font-weight:800;margin-bottom:8px}
.panel-title{font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.15;margin-bottom:12px}
.board-grid .panel-title {
	font-weight: 700;
}
.signal-list{display:grid;gap:8px}
.signal-row{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:8px;background:rgba(255,255,255,.44);border:1px solid rgba(160,185,236,.15)}
.signal-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;background:linear-gradient(135deg,var(--blue),var(--purple));flex:0 0 auto}
.signal-dot.green{background:var(--green)}
.signal-main{font-size:13px;font-weight:700;color:#394963;line-height:1.25}
.signal-sub{font-size:11px;color:#8d99af;margin-top:2px;line-height:1.3}
.split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.metric-sm{padding:12px;border-radius:8px;background:rgba(255,255,255,.44);border:1px solid rgba(160,185,236,.15)}
.metric-sm .label{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#98a5bb;font-weight:700}
.metric-sm .value{font-size:19px;font-weight:900;letter-spacing:-.04em;margin-top:6px;line-height:1}
.bars{display:grid;gap:9px;margin-top:12px}
.tiny{font-size:11px;color:#7e8aa0;display:flex;justify-content:space-between;gap:10px}
.track{margin-top:5px;height:5px;border-radius:999px;background:#d9e2ee;overflow:hidden}
.fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--purple));transform-origin:left center}
.f1{width:78%;animation:grow1 var(--loop) linear infinite}
.f2{width:62%;animation:grow2 var(--loop) linear infinite}
.f3{width:44%;animation:grow3 var(--loop) linear infinite}

/* ── GHOST ───────────────────────────────────────────────────── */
.ghost{
  left:50%;margin-left:-195px;
  top:178px;width:390px;height:274px;border-radius:26px;z-index:9;
  animation:ghostPhase var(--loop) linear infinite
}
.ghost::before,.ghost::after{content:"";position:absolute;left:22px;right:22px;height:48px;border-radius:16px;background:rgba(255,255,255,.30);border:1px solid rgba(152,175,232,.12)}
.ghost::before{top:66px}.ghost::after{top:128px}
.ghost-small{position:absolute;left:22px;right:126px;bottom:24px;height:78px;border-radius:18px;background:rgba(255,255,255,.30);border:1px solid rgba(152,175,232,.12)}

/* ── PHONE ───────────────────────────────────────────────────── */
.phone{
 left: 50%;
 margin-left: -114px;
 top: 120px;
 width: 254px;
 height: 450px;
 border-radius: 34px;
 padding: 16px 16px 18px;
 background: #fff;
 z-index: 17;animation:phonePhase var(--loop) linear infinite
}
.notch{width: 60px;
  height: 9px;
  border-radius: 0 0 12px 12px;
  background: rgba(201, 214, 236, .66);margin:0 auto 14px}
.phone-top{display:flex;justify-content:space-between;font-size:11px;color:#92a0b6;margin-bottom:12px}
.brand{font-size:22px;font-weight:900;letter-spacing:-.03em;color:#2d3f63;line-height:.95;text-align: center;}
.mini-copy{font-size:11px;color:#8592aa;margin-top:6px;line-height:1.35}
.email-hero{margin-top:16px;border-radius:20px;padding:0;}
.hello{font-size: 22px;
  font-weight: 600;
  color: #2779cc;
  line-height: 1.2;
  text-align: center;}
.body-copy{font-size:11px;color:#6b7892;line-height:1.4;margin-top:4px}
.photo{margin-top:12px;height:88px;border-radius:16px;text-align: center;}
.photo img {
  width: 100%;
  object-fit: cover;
}
.offer{margin-top:48px;padding:16px 14px;text-align:center;border-radius: 0 0 10px 10px;background: #fff;border:1px solid rgba(160,188,232,.34)}
.offer-tiny{font-size:10px;color:#74819b;letter-spacing:.04em;text-transform:uppercase}
.offer-big{font-size:21px;font-weight:900;letter-spacing:-.06em;color:#17395f;margin:5px 0 8px;line-height:1}
.cta{display:inline-block;padding:7px 16px;border-radius:999px;border:1.5px solid #24486f;color:#24486f;font-size:12px;font-weight:700}

/* ── SUPPORT CARDS ───────────────────────────────────────────── */
.support{position:absolute;z-index:14}
.support-one {
left: calc(50% - 332px);
top: 196px;
width: 190px;
height: 120px;
border-radius: 10px;
padding: 14px;
  animation:supportOne var(--loop) linear infinite
}
.support-one .num{font-size:30px;font-weight:800;letter-spacing:-.01em;margin-top:12px;line-height:.95}
.support-desc{font-size:10px;color:#6f7f9c;margin-top:4px;line-height:1.35}
.support-two{
  left:calc(50% - 332px);top:346px;
  width:190px;height:126px;border-radius:10px;padding:14px;
  animation:supportTwo var(--loop) linear infinite
}
.metric-row{display:flex;justify-content:space-between;font-size:12px;color:#63728f;margin-top:8px;gap:10px}
.tiny-track{margin-top:5px;height:5px;border-radius:999px;background:#d7e0ec;overflow:hidden}
.tiny-fill{height:100%;width:0;border-radius:999px;background:#22b574;animation:tinyGrow var(--loop) linear infinite}

/* ── TAGS ────────────────────────────────────────────────────── */
.tag{position:absolute;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 9px;border-radius:999px;background:rgba(255,255,255,.90);border:1px solid rgba(130,149,255,.20);box-shadow:0 10px 24px rgba(43,73,134,.10);font-size:12px;color:#223457;z-index:22;white-space:nowrap}
.ai svg { width: 14px;
}
.ai{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background: linear-gradient(116deg, rgb(103, 33, 190) 0%, rgb(203, 70, 89) 100%);color:#fff;font-size:9px;font-weight:800}
.tag.one{left: calc(50% - 310px);
  top: 135px;animation:pillOne var(--loop) linear infinite}
.tag.two{left: calc(50% - 298px);top: 500px;;animation:pillTwo var(--loop) linear infinite}

/* ── PATHS & PULSES ──────────────────────────────────────────── */
.path{position:absolute;border-top:2px dashed rgba(82,128,255,.28);height:2px;z-index:13}
.path.one{left:calc(50% - 162px);top:230px;width:46px;transform:rotate(-4deg);animation:pathOne var(--loop) linear infinite}
.path.two{left:calc(50% - 158px);top:370px;width:46px;transform:rotate(3deg);animation:pathTwo var(--loop) linear infinite}
.pulse{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 8px rgba(77,117,255,.08)}
.pulse.one{left:calc(50% - 162px);top:226px;animation:pulseOne var(--loop) linear infinite}
.pulse.two{left:calc(50% - 158px);top:366px;animation:pulseTwo var(--loop) linear infinite}

/* ── METRICS ─────────────────────────────────────────────────── */
.metrics{
  position:absolute;
  right:calc(50% - 117px - 24px - 214px);
  top:148px;z-index:19
}
.metric-primary{width:188px;height:140px;border-radius:12px;padding:16px;background:linear-gradient(180deg,#2928a8,#2d2ca1 56%,#24258a);color:#fff;box-shadow:0 18px 40px rgba(35,37,120,.24);border:1px solid rgba(255,255,255,.12);animation:metricOne var(--loop) linear infinite}
.metric-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:rgba(240,242,255,.74);font-weight:800}
.metric-value{font-size:22px;font-weight:900;letter-spacing:-.01em;line-height:.92;margin-top:10px}
.metric-copy{font-size:11px;color:rgba(240,242,255,.84);margin-top:6px;line-height:1.3}
.metric-secondary{margin-top:22px;width:198px;height:165px;border-radius:12px;padding:14px;animation:metricTwo var(--loop) linear infinite}
.metric-label{font-size:12px;font-weight:800;color:#3d4d68}
.metric-sub{font-size:11px;color:#7d8aa0;margin-top:2px}
.metric-line{margin-top:12px}
.metric-line .value{font-weight:800;color:#40516f}


/* ════════════════════════════════════════════════════════════════
   KEYFRAMES  ·  20s loop
   ════════════════════════════════════════════════════════════ */

@keyframes greetLargePhase{
  0%,2%   { opacity:0; transform:translate(-50%,-50%) scale(.88); visibility:visible }
  4%      { opacity:1; transform:translate(-50%,-50%) scale(1) }
  8%      { opacity:1; transform:translate(-50%,-50%) scale(1) }
  11%     { opacity:0; transform:translate(calc(-50% - 305px), calc(-50% - 138px)) scale(.1) }
  12%,100%{ opacity:0; visibility:hidden }
}

@keyframes onboardingPhase{
  0%,9% { opacity:0; visibility:hidden; transform:scale(.98) }
  12%    { opacity:1; visibility:visible; transform:scale(1) }
  27%    { opacity:1 }
  29%    { opacity:0; visibility:visible; transform:translateY(-8px) scale(.97) }
  33%,100%{ opacity:0; visibility:hidden }
}

@keyframes opt1Phase{
  0%,11%  { opacity:0; transform:translateY(16px) }
  14%,26% { opacity:1; transform:translateY(0) }
  28%,100%{ opacity:0; transform:translateY(-6px) }
}
@keyframes opt2Phase{
  0%,12%  { opacity:0; transform:translateY(16px) }
  15%,26% { opacity:1; transform:translateY(0) }
  28%,100%{ opacity:0; transform:translateY(-6px) }
}
@keyframes opt3Phase{
  0%,14%  { opacity:0; transform:translateY(16px) }
  17%,26% { opacity:1; transform:translateY(0) }
  28%,100%{ opacity:0; transform:translateY(-6px) }
}
@keyframes opt4Phase{
  0%,16%  { opacity:0; transform:translateY(16px) }
  19%,26% { opacity:1; transform:translateY(0) }
  28%,100%{ opacity:0; transform:translateY(-6px) }
}

@keyframes emailSelectPhase{
  0%,20%  { border-color:rgba(147,171,235,.18); box-shadow:none }
  21%,38% { border-color:rgba(77,117,255,.82); box-shadow:0 0 0 3px rgba(77,117,255,.18), 0 12px 28px rgba(77,117,255,.18), inset 0 1px 0 rgba(255,255,255,.7) }
  50%,100%{ border-color:rgba(147,171,235,.18); box-shadow:none }
}

@keyframes promptPhase{
  0%,31%  { opacity:0; visibility:hidden; transform:translateY(12px) scale(.98) }
  32%     { opacity:1; visibility:visible; transform:translateY(0) scale(1) }
  45%     { opacity:1; visibility:visible }
  48%     { opacity:0; visibility:visible; transform:translateY(-6px) scale(.97) }
  49%,100%{ opacity:0; visibility:hidden }
}
@keyframes typePrompt{
  0%,30%  { width:0 }
  44%,100%{ width:600px }
}
@keyframes caretWindow{
  0%,44%  { opacity:1 }
  47%,100%{ opacity:0 }
}

@keyframes boardPhase{
  0%,46%  { opacity:0; visibility:hidden; transform:translateY(14px) scale(.98) }
  49%     { opacity:1; visibility:visible; transform:translateY(0) scale(1) }
  62%     { opacity:1 }
  66%     { opacity:0; visibility:visible; transform:translateY(-3px) }
  67%,100%{ opacity:0; visibility:hidden }
}

@keyframes ghostPhase{
  0%,62%  { opacity:0; visibility:hidden }
  66%     { opacity:.06; visibility:visible }
  86%     { opacity:.06 }
  90%,100%{ opacity:0; visibility:hidden }
}

@keyframes phonePhase{
  0%,62%  { opacity:0; visibility:hidden; transform:translateY(16px) scale(.97) }
  66%     { opacity:1; visibility:visible; transform:translateY(0) scale(1) }
  88%     { opacity:1 }
  92%,100%{ opacity:0; visibility:hidden }
}

@keyframes supportOne{
  0%,67%  { opacity:0; visibility:hidden; transform:translateY(10px) scale(.97) }
  71%     { opacity:.96; visibility:visible; transform:translateY(0) scale(1) }
  88%     { opacity:.96 }
  91%,100%{ opacity:0; visibility:hidden }
}

@keyframes supportTwo{
  0%,73%  { opacity:0; visibility:hidden; transform:translateY(10px) scale(.97) }
  77%     { opacity:.96; visibility:visible; transform:translateY(0) scale(1) }
  88%     { opacity:.96 }
  91%,100%{ opacity:0; visibility:hidden }
}

@keyframes pillOne{
  0%,70%  { opacity:0; visibility:hidden; transform:translateY(7px) }
  73%     { opacity:1; visibility:visible; transform:translateY(0) }
  88%     { opacity:1 }
  91%,100%{ opacity:0; visibility:hidden; transform:translateY(-4px) }
}
@keyframes pillTwo{
  0%,76%  { opacity:0; visibility:hidden; transform:translateY(7px) }
  79%     { opacity:1; visibility:visible; transform:translateY(0) }
  86%     { opacity:1 }
  90%,100%{ opacity:0; visibility:hidden; transform:translateY(-4px) }
}

@keyframes pathOne{
  0%,71%  { opacity:0; visibility:hidden }
  73%,87% { opacity:1; visibility:visible }
  91%,100%{ opacity:0; visibility:hidden }
}
@keyframes pathTwo{
  0%,77%  { opacity:0; visibility:hidden }
  79%,87% { opacity:1; visibility:visible }
  91%,100%{ opacity:0; visibility:hidden }
}

@keyframes pulseOne{
  0%,71%  { opacity:0; visibility:hidden; transform:translate(0,0) }
  72%     { opacity:1; visibility:visible; transform:translate(0,0) }
  74%     { opacity:1; transform:translate(38px,-4px) }
  75%,100%{ opacity:0; visibility:hidden; transform:translate(38px,-4px) }
}
@keyframes pulseTwo{
  0%,77%  { opacity:0; visibility:hidden; transform:translate(0,0) }
  78%     { opacity:1; visibility:visible; transform:translate(0,0) }
  80%     { opacity:1; transform:translate(38px,3px) }
  81%,100%{ opacity:0; visibility:hidden; transform:translate(38px,3px) }
}

@keyframes metricOne{
  0%,79%  { opacity:0; visibility:hidden; transform:translateY(12px) }
  83%     { opacity:1; visibility:visible; transform:translateY(0) }
  88%     { opacity:1 }
  91%,100%{ opacity:0; visibility:hidden }
}
@keyframes metricTwo{
  0%,81%  { opacity:0; visibility:hidden; transform:translateY(12px) }
  85%     { opacity:1; visibility:visible; transform:translateY(0) }
  88%     { opacity:1 }
  91%,100%{ opacity:0; visibility:hidden }
}

@keyframes grow1{0%,47%{transform:scaleX(0)}53%,100%{transform:scaleX(1)}}
@keyframes grow2{0%,49%{transform:scaleX(0)}55%,100%{transform:scaleX(1)}}
@keyframes grow3{0%,51%{transform:scaleX(0)}57%,100%{transform:scaleX(1)}}
@keyframes tinyGrow{0%,72%{width:0}78%,100%{width:100%}}

@keyframes wave{0%,100%{transform:rotate(0deg)}20%{transform:rotate(16deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(14deg)}80%{transform:rotate(0deg)}}
@keyframes blink{50%{opacity:0}}
@keyframes choiceFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,-12px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-10px,10px)}}
@keyframes float3{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-8px)}}
@keyframes float4{0%,100%{transform:translate(0,0)}50%{transform:translate(-8px,-10px)}}

@media (max-width:767px) {
	.ai-hero {
		display: none !important;
	}
}
@media (min-width:768px) {
	.video-wrapper:before {
		position: absolute;
		content: "";
		bottom: 0;
		width: 100%;
		height: 405px;
		left: 0;
		background: #fff;
	} 
}