/* hero top line moved above container */
.uia .hero{position:relative}
.uia .hero-topline{position:absolute;top:12px;left:5%;right:5%;margin:0;z-index:20;text-align:left}
@media (max-width: 640px){
  .uia .hero-topline{top:8px;left:4%;right:4%;font-size:28px}
}

:root{ --teal:#75c3c7; --ink:#0d0d0d }
.uia *{box-sizing:border-box}
.uia{position:relative;background:transparent;color:#e6e6e6;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Helvetica,Arial,sans-serif;line-height:1.6}
.uia .container{max-width:1200px;margin:0 auto;padding:0 24px}
.uia section{padding:36px 0;border-top:1px solid #ffffff10}
@media (max-width: 900px){ .uia section{padding:26px 0} }

/* HERO */
.uia .hero{position:relative}
.uia .hero-inner{position:relative;padding:56px 0;display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center}
.uia .headline{font-size:44px;line-height:1.15;margin:0 0 8px;color:#75c3c7;text-shadow:0 2px 22px rgba(0,0,0,.55)}
.uia .sub{font-size:18px;color:#d4eeee;margin:0 0 18px;text-shadow:0 2px 22px rgba(0,0,0,.55)}
.uia .typed{position:relative;padding-right:6px}
.uia .typed::after{content:"";position:absolute;right:0;top:12%;bottom:12%;width:2px;border-radius:2px;background:var(--teal);box-shadow:0 0 6px rgba(117,195,199,.9),0 0 18px rgba(117,195,199,.35);animation:uiaCursorBlink 1s ease-in-out infinite}
@keyframes uiaCursorBlink{0%,100%{opacity:1}50%{opacity:.35}}
.uia .typed.glow{text-shadow:0 0 10px rgba(117,195,199,.25),0 0 22px rgba(117,195,199,.18)}

/* badges & ctas */
.uia .badges{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.uia .badge{border:2px solid var(--teal);border-radius:999px;padding:5px 10px;font-size:13px;background:#0f1414;box-shadow:0 0 10px rgba(117,195,199,.35)}
.uia .cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:4px}
.uia .cta-primary{padding:13px 18px;border-radius:12px;background:linear-gradient(180deg,#aef0f2,#69b9bc);color:#0a1111;font-weight:900;letter-spacing:.3px;box-shadow:0 8px 24px -12px rgba(105,185,188,.7);border:none;cursor:pointer;display:inline-block}
.uia .cta-ghost{padding:11px 14px;border-radius:12px;border:2px solid var(--teal);background:#0c1313;color:#e8ffff;font-weight:600;box-shadow:0 0 10px rgba(117,195,199,.25)}

/* hero figure */
.uia .hero-figure{position:relative;width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;border:2px solid var(--teal);box-shadow:0 0 16px rgba(117,195,199,.35),0 20px 50px -25px rgba(0,0,0,.8);background:radial-gradient(60% 60% at 50% 40%,rgba(117,195,199,.08),rgba(0,0,0,0) 70%)}
.uia .hero-figure img{display:block;width:100%;height:100%;object-fit:cover;-webkit-mask-image:radial-gradient(120% 120% at 50% 50%,#000 60%,transparent 95%);mask-image:radial-gradient(120% 120% at 50% 50%,#000 60%,transparent 95%)}

/* overlay card */
.uia .hero-figure .overlay-discover{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);width:86%;max-width:860px;z-index:5;pointer-events:none}
.uia .hero-figure .overlay-discover .panel{pointer-events:auto;padding:16px 20px;text-align:center;background:linear-gradient(180deg,rgba(6,12,13,.20) 0%,rgba(6,12,13,.55) 55%,rgba(6,12,13,.80) 100%);border-radius:10px;border:2px solid var(--teal);box-shadow:0 0 16px rgba(117,195,199,.45),0 26px 76px -30px rgba(0,0,0,.75);opacity:0;transform:translateY(10px)}
.uia .hero-figure .overlay-discover .panel.is-in{animation:uiaFadeRiseIn 1000ms cubic-bezier(.22,1,.36,1) both 120ms}
@keyframes uiaFadeRiseIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
.uia .overlay-discover .section-title{margin:0 0 8px;font-size:32px;line-height:1.15;color:#ecfff7;text-shadow:0 2px 16px rgba(0,0,0,.65)}
.uia .overlay-discover .section-sub{margin:0;color:#d7ecec;font-size:18px;text-shadow:0 2px 16px rgba(0,0,0,.65)}

/* grid cards */
.uia .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.uia .card{background:linear-gradient(180deg,#111,#0c0c0c);border:2px solid var(--teal);border-radius:10px;padding:18px;box-shadow:0 0 16px rgba(117,195,199,.35)}
.uia .card h3{margin:6px 0 8px;font-size:18px;color:#e9feff}
.uia .muted{color:#cbd6d6}

/* founders */
.uia .founders{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.uia .founder{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;background:linear-gradient(180deg,#101212,#0b0d0d);border:2px solid var(--teal);border-radius:10px;padding:16px;box-shadow:0 0 16px rgba(117,195,199,.35)}
.uia .portrait{width:120px;height:120px;border-radius:8px;overflow:hidden;border:2px solid var(--teal);box-shadow:0 0 12px rgba(117,195,199,.45)}
.uia .portrait img{width:100%;height:100%;object-fit:cover}
.uia .who{margin:0 0 6px;color:#ecffff;font-size:18px}
.uia .role{margin:0 0 8px;color:#bfe5e5;font-size:14px}
.uia .bio{margin:0;color:#d3e9e9;font-size:14px}

@media (max-width: 900px){
  .uia .hero-inner{grid-template-columns:1fr;gap:22px;padding:36px 0}
  .uia .headline{font-size:34px}
  .uia .typed::after{top:10%;bottom:10%}
  .uia .hero-figure .overlay-discover{position:static;transform:none;width:auto;max-width:none;margin-top:12px}
  .uia .hero-figure .overlay-discover .panel{opacity:1;transform:none;animation:none;text-align:left}
  .uia .grid-3{grid-template-columns:1fr}
  .uia .founders{grid-template-columns:1fr}
  .uia .founder{grid-template-columns:96px 1fr}
  .uia .portrait{width:96px;height:96px}
}


/* testimonial photos */
.uia .t-slide{display:flex;gap:16px;align-items:center}
.uia .t-slide .t-media{flex:0 0 auto;position:relative;width:120px;height:120px;border:2px solid var(--teal);border-radius:10px;overflow:hidden;box-shadow:0 0 16px rgba(117,195,199,.25)}
.uia .t-slide .t-media img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
/* hover shimmer */
.uia .t-slide .t-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);transform:translateX(-100%);}
.uia .t-slide .t-media:hover::after{animation:uiaShimmer 1500ms ease-in-out}
@keyframes uiaShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(120%)}}
/* text copy block */
.uia .t-slide .t-copy{flex:1 1 auto}
@media (max-width: 560px){
  .uia .t-slide{flex-direction:column;align-items:flex-start}
  .uia .t-slide .t-copy{width:100%}
}

/* testimonials */
.uia .t-slider{position:relative;overflow:hidden;border:2px solid var(--teal);border-radius:10px;background:linear-gradient(180deg,#0f1212,#0a0c0c);box-shadow:0 0 16px rgba(117,195,199,.35)}
.uia .t-track{display:flex;transition:transform 600ms cubic-bezier(.22,1,.36,1);will-change:transform}
.uia .t-slide{flex:0 0 100%;padding:22px}
.uia .t-quote{font-size:18px;color:#e8ffff;margin:0 0 8px}
.uia .t-who{font-size:14px;color:#bfe3e3}
.uia .t-nav{position:absolute;inset:auto 10px 10px auto;display:flex;gap:8px}
.uia .t-dot{width:10px;height:10px;border-radius:50%;background:#406c6d;border:1px solid #7dd1d4;opacity:.6;cursor:pointer}
.uia .t-dot.is-on{background:#7dd1d4;opacity:1}

/* CTA ribbon with glow */
.uia .cta-ribbon{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:9999;display:none}
.uia .cta-ribbon .inner{background:linear-gradient(180deg,#aef0f2,#69b9bc);color:#0a1111;border-radius:999px;padding:10px 14px;box-shadow:0 0 20px rgba(117,195,199,.5);display:flex;gap:10px;align-items:center;border:2px solid var(--teal)}
.uia .cta-ribbon a{color:#0a1111;font-weight:800;text-decoration:none;background:#ffffff;border-radius:999px;padding:6px 10px;border:2px solid var(--teal);box-shadow:0 0 10px rgba(117,195,199,.35)}
.uia .cta-ribbon .close{background:#0e1515;color:#eaffff;border:2px solid var(--teal);border-radius:999px;padding:6px 10px;cursor:pointer;box-shadow:0 0 10px rgba(117,195,199,.35)}

@media (prefers-reduced-motion: reduce){
  .uia *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important}
}

/* fresh lists safe */
.uia #fresh .thumb-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.uia #fresh .thumb-list li{display:flex;gap:10px;align-items:center}
.uia #fresh .thumb-list li .mini{flex:0 0 auto;width:48px;height:48px;border-radius:8px;border:2px solid var(--teal);box-shadow:0 0 8px rgba(117,195,199,.25);object-fit:cover}
.uia #fresh .thumb-list li a, .uia #fresh .thumb-list li span{color:#e6ffff;text-decoration:none;border-bottom:1px dashed rgba(117,195,199,.35);padding-bottom:2px}
.uia #fresh .thumb-list li a:hover{color:#75c3c7}


/* fresh list card shimmer */
.uia #fresh .list-card{position:relative;overflow:hidden}
.uia #fresh .list-card::before{
  content:"";
  position:absolute;
  top:0; left:-150%;
  width:50%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(117,195,199,.18), transparent);
  transform:skewX(-25deg);
  pointer-events:none;
}
.uia #fresh .list-card:hover::before{
  animation: uiaFreshShimmer 4s linear infinite;
}
@keyframes uiaFreshShimmer{
  0%{ left:-150%; }
  100%{ left:150%; }
}


/* === UIA: Global Hover Shimmer (gentle) === */
@keyframes uiaAllShimmer{
  0%{ transform:translateX(-150%) skewX(-25deg); }
  100%{ transform:translateX(150%) skewX(-25deg); }
}
/* Base hook for shimmerable elements */
.uia .uia-shimmer{ position:relative; overflow:hidden }
.uia .uia-shimmer::before{
  content:""; position:absolute; top:0; left:0; height:100%; width:50%;
  background:linear-gradient(120deg, transparent, rgba(117,195,199,.18), transparent);
  transform:translateX(-150%) skewX(-25deg);
  pointer-events:none; opacity:0;
  transition: opacity 200ms ease;
}
.uia .uia-shimmer:hover::before{
  opacity:1;
  animation: uiaAllShimmer 4s linear infinite;
}

/* Apply shimmer class to common components via selectors (no HTML changes needed) */
.uia .card,
.uia .t-slide,
.uia .cta-ribbon .inner,
.uia .badge,
.uia .list-card,
.uia .founders .card,
.uia .hero .card {
  position:relative; overflow:hidden;
}
.uia .card::before,
.uia .t-slide::before,
.uia .cta-ribbon .inner::before,
.uia .badge::before,
.uia .list-card::before,
.uia .founders .card::before,
.uia .hero .card::before{
  content:""; position:absolute; top:0; left:0; height:100%; width:50%;
  background:linear-gradient(120deg, transparent, rgba(117,195,199,.16), transparent);
  transform:translateX(-150%) skewX(-25deg);
  pointer-events:none; opacity:0; transition: opacity 200ms ease;
}
.uia .card:hover::before,
.uia .t-slide:hover::before,
.uia .cta-ribbon .inner:hover::before,
.uia .badge:hover::before,
.uia .list-card:hover::before,
.uia .founders .card:hover::before,
.uia .hero .card:hover::before{
  opacity:1;
  animation: uiaAllShimmer 4.5s linear infinite;
}

/* Buttons: keep subtle (already have link shimmer, but add fallback) */
.uia a.button, .uia button, .uia .cta-ghost{
  position:relative; overflow:hidden;
}
.uia a.button::before, .uia button::before, .uia .cta-ghost::before{
  content:""; position:absolute; top:0; left:0; height:100%; width:40%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.15), transparent);
  transform:translateX(-150%) skewX(-25deg);
  pointer-events:none; opacity:0; transition:opacity 200ms ease;
}
.uia a.button:hover::before, .uia button:hover::before, .uia .cta-ghost:hover::before{
  opacity:1; animation: uiaAllShimmer 3.8s linear infinite;
}


/* Shimmer fix: include .founder blocks */
.uia .founder{position:relative; overflow:hidden}
.uia .founder::before{
  content:""; position:absolute; top:0; left:0; height:100%; width:50%;
  background:linear-gradient(120deg, transparent, rgba(117,195,199,.16), transparent);
  transform:translateX(-150%) skewX(-25deg);
  pointer-events:none; opacity:0; transition: opacity 200ms ease;
}
.uia .founder:hover::before{ opacity:1; animation: uiaAllShimmer 4.5s linear infinite; }


/* Fresh Lists: align CTA at card bottom (v1.3.26) */
.uia #fresh .list-card{display:flex;flex-direction:column;justify-content:flex-start}
.uia #fresh .list-card .thumb-list{flex:1 1 auto}
.uia #fresh .list-card .cta-ghost{margin-top:auto;align-self:flex-start;transition:transform .2s ease, box-shadow .25s ease}
.uia #fresh .list-card .cta-ghost:hover{transform:translateY(-2px);box-shadow:0 0 12px rgba(117,195,199,.35)}
.quote {
  text-align: center;
  margin: 60px auto;
}


/* Full-width red Start Now button */

/* Full width red CTA button */
.cta-row.fullwidth-btn {
  display: block;
  width: 100%;
  max-width: 100%;
}

.cta-row.fullwidth-btn .cta-primary {
  display: block;
  width: 100%;
  text-align: center;
  color: red !important;
  border: 2px solid red;
  background: transparent;
  font-weight: 700;
  padding: 14px 0;
  border-radius: 8px;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

/* Hover with teal glow */
@keyframes tealPulse {
  0% { box-shadow: 0 0 0 rgba(117,195,199,0); }
  50% { box-shadow: 0 0 20px rgba(117,195,199,0.8); }
  100% { box-shadow: 0 0 0 rgba(117,195,199,0); }
}

.cta-row.fullwidth-btn .cta-primary:hover {
  background: red;
  color: #fff !important;
  transform: translateY(-1px);
  animation: tealPulse 1.2s ease-in-out infinite;
}





/* Force the "Start Now" button to match the full width of the text area */
.hero .cta-row.fullwidth-btn {
  display: block;
  width: 100%;
  max-width: 100%;
}

.hero .cta-row.fullwidth-btn .cta-primary {
  display: block;
  width: 100%;
  text-align: center;
  color: red !important;
  border: 2px solid red;
  background: transparent;
  font-weight: 700;
  padding: 14px 0;
  border-radius: 8px;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

/* Optional: smooth hover */
.hero .cta-row.fullwidth-btn .cta-primary:hover {
  background: red;
  color: #fff !important;
  transform: translateY(-1px);
}


@keyframes tealPulse {
  0% { box-shadow: 0 0 0 rgba(117,195,199,0); }
  50% { box-shadow: 0 0 20px rgba(117,195,199,0.8); }
  100% { box-shadow: 0 0 0 rgba(117,195,199,0); }
}

/* Apply the glow to the red Start Now button */
.hero .cta-row.fullwidth-btn .cta-primary:hover {
  background: red;
  color: #fff !important;
  transform: translateY(-1px);
  animation: tealPulse 1.2s ease-in-out infinite;
}









.quote-inner {
  max-width: 950px;
  margin: 0 auto;
}

.quote-line {
  border: none;
  border-top: 2px solid #ffffff;
  width: 60%;
  margin: 20px auto;
}

.quote-text {
  color: #75c3c7;
  font-size: 2.5rem;
  font-weight: 600;
  margin: 20px auto;
  font-family: 'Poppins', sans-serif;
}