/* ═══════════════════════════════════════════════════════
   EVIZ — MEET OUR TEAM
═══════════════════════════════════════════════════════ */

:root{
  --mot-charcoal:#10151d;
  --mot-charcoal-2:#171f2a;
  --mot-blue:#4c8ef7;
  --mot-blue-soft:#dfeaff;
  --mot-splash:#4fd7ff;
  --mot-accent:#ffd55f;
  --mot-cream:#f7f5f0;
  --mot-text:#2a3242;
}

/* =====================================================
   HERO
===================================================== */

.mot-hero{
  position:relative;
  overflow:hidden;

  padding:180px 6vw 140px;

  text-align:center;

  background:
    radial-gradient(circle at 20% 20%, rgba(79,215,255,.22), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(255,213,95,.12), transparent 24%),
    linear-gradient(135deg, #0f131b 0%, #141a26 35%, #1b2432 100%);
}

.mot-hero::before{
  content:"";

  position:absolute;

  width:1200px;
  height:1200px;

  right:-400px;
  top:-400px;

  border-radius:50%;

  background:rgba(76,142,247,.04);
  box-shadow:
    0 0 0 150px rgba(76,142,247,.05),
    0 0 0 300px rgba(76,142,247,.03);
  animation: pulseGlow 14s ease-in-out infinite;
}

.mot-hero::after{
  content:"TEAM";

  position:absolute;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  font-size:18vw;
  font-weight:700;

  color:rgba(255,255,255,.03);

  pointer-events:none;

  font-family:'Playfair Display',serif;
  letter-spacing:8px;
}

.mot-eyebrow{
  display:inline-block;

  color:var(--mot-blue);

  font-size:11px;
  letter-spacing:4px;
  text-transform:uppercase;

  margin-bottom:22px;

  position:relative;
  z-index:2;
}

.mot-hero h1{
  position:relative;
  z-index:2;

  font-family:'Playfair Display',serif;

  font-size:clamp(60px,9vw,110px);

  color:white;

  line-height:.95;

  margin-bottom:28px;
  text-shadow:0 16px 40px rgba(0,0,0,.35);
}

.mot-hero p{
  position:relative;
  z-index:2;

  max-width:820px;
  margin:auto;

  color:rgba(220,230,255,.82);

  line-height:2;
  font-size:15px;
}

.mot-hero-word{
  position:absolute;
  left:50%;
  top:35%;
  transform:translateX(-50%);
  font-family:'Playfair Display',serif;
  font-size:13rem;
  line-height:1;
  color:rgba(46, 45, 45, 0.178);
  letter-spacing:12px;
  text-transform:uppercase;
  z-index:1;
  pointer-events:none;
}

.mot-orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(12px);
  opacity:.86;
}

.orb1{
  width:220px;
  height:220px;
  top:12%;
  left:8%;
  background:rgba(79,215,255,.18);
  animation: orbFloat 16s ease-in-out infinite;
}

.orb2{
  width:180px;
  height:180px;
  bottom:10%;
  right:10%;
  background:rgba(255,213,95,.16);
  animation: orbFloat 18s ease-in-out infinite;
}

@keyframes orbFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-22px);}
}

@keyframes pulseGlow{
  0%,100%{opacity:.75;transform:scale(1);}
  50%{opacity:.9;transform:scale(1.03);}
}

/* =====================================================
   SECTIONS
===================================================== */

.mot-section{
  position:relative;

  padding:130px 6vw;

  background:var(--mot-cream);
}

.mot-section:nth-child(even){
  background:white;
}

.mot-heading{
  text-align:center;
  margin-bottom:100px;
}

.mot-heading span{
  display:block;

  color:var(--mot-blue);

  letter-spacing:3px;
  text-transform:uppercase;

  font-size:11px;

  margin-bottom:18px;
}

.mot-heading h2{
  font-family:'Playfair Display',serif;

  font-size:clamp(40px,5vw,70px);

  color:var(--mot-text);

  line-height:1.05;
}

/* =====================================================
   FOUNDERS
===================================================== */

.mot-founder{
  position:relative;

  display:grid;
  grid-template-columns:460px 1fr;

  gap:0;

  align-items:center;

  margin-bottom:140px;
}

.mot-founder.reverse{
  direction:rtl;
}

.mot-founder.reverse>*{
  direction:ltr;
}

.mot-founder-image{
  position:relative;
  z-index:1;
  overflow:hidden;
  border-radius:32px;
}

.mot-founder-image img{
  width:100%;
  height:600px;
  object-fit:cover;
  transition:transform .8s ease;
}

.mot-founder-image:hover img,
.mot-founder-image:focus-within img{
  transform:scale(1.05);
}

.mot-founder-image::after{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:26px;
  pointer-events:none;
}

.mot-founder-content{
  position:relative;
  z-index:2;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,245,240,.96));
  backdrop-filter:blur(28px);
  padding:70px;
  margin-left:-80px;
  border-radius:30px;
  box-shadow:
    0 30px 80px rgba(20,40,80,.14),
    inset 0 0 0 1px rgba(255,255,255,.14);
}

.mot-founder:before{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  border-radius:50%;
  background:rgba(79,215,255,.12);
  top:24px;
  left:-80px;
  z-index:0;
  filter:blur(10px);
}

.mot-founder.reverse:before{
  left:auto;
  right:-80px;
}

.mot-founder.reverse .mot-founder-content{
  margin-left:0;
  margin-right:-80px;
}

.mot-role{
  display:inline-block;

  padding:10px 18px;

  background:var(--mot-blue-soft);

  color:var(--mot-blue);

  border-radius:100px;

  font-size:11px;
  font-weight:600;

  letter-spacing:2px;
  text-transform:uppercase;

  margin-bottom:24px;
}

.mot-founder-content h3{
  font-family:'Playfair Display',serif;

  font-size:54px;

  color:var(--mot-text);

  margin-bottom:24px;
}

.mot-founder-content p{
  font-size:15px;

  color:#576074;

  line-height:2;
}

.mot-founder-number{
  position:absolute;

  top:-60px;
  right:-10px;

  font-size:140px;

  font-family:'Playfair Display',serif;

  background:linear-gradient(135deg, #78bfdd, #bc87ef);
  background-clip:text;
  color:transparent;

  line-height:1;
}
.mot-founder-numberss{
  position:absolute;

  top:-60px;
  left:-10px;

  font-size:140px;

  font-family:'Playfair Display',serif;

  background:linear-gradient(135deg, #78bfdd, #bc87ef);
  background-clip:text;
  color:transparent;

  line-height:1;
}

/* =====================================================
   TEAM GRID
===================================================== */

.mot-team-grid{
  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(300px,1fr));

  gap:35px;
}

.mot-team-card{
  position:relative;
  background:
    linear-gradient(180deg, white 0%, #f8fbff 100%);
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(76,142,247,.12);
  transition:transform .45s ease, box-shadow .45s ease, border-color .45s ease;
  box-shadow:
    0 10px 30px rgba(30,50,90,.08);
}

.mot-team-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top right, rgba(79,215,255,.18), transparent 30%);
  opacity:.8;
  pointer-events:none;
}

.mot-team-card:hover{
  transform:translateY(-12px);
  border-color:rgba(79,215,255,.28);
  box-shadow:
    0 30px 80px rgba(30,50,90,.18);
}

.mot-team-card img{
  width:100%;
  height:340px;

  object-fit:cover;
}

.mot-team-card h4{
  padding:26px 24px 8px;

  font-family:'Playfair Display',serif;

  font-size:28px;

  color:var(--mot-text);
}

.mot-team-card span{
  display:block;

  padding:0 24px 24px;

  color:var(--mot-blue);

  text-transform:uppercase;

  font-size:12px;

  letter-spacing:1.5px;
}

.mot-tags{
  padding:0 24px 28px;

  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.mot-tags span{
  padding:7px 12px;

  background:#edf4ff;

  border-radius:50px;

  font-size:10px;

  color:var(--mot-blue);

  letter-spacing:1px;
}

/* =====================================================
   STATS
===================================================== */

.mot-stats{
  display:grid;

  grid-template-columns:
  repeat(4,1fr);

  gap:1px;

  background:#dde6f7;

  margin-top:80px;

  border-radius:24px;

  overflow:hidden;
}

.mot-stat{
  background:white;

  text-align:center;

  padding:45px 20px;
}

.mot-stat h3{
  font-size:52px;

  color:var(--mot-blue);

  margin-bottom:10px;
}

.mot-stat p{
  color:#667087;

  font-size:13px;

  letter-spacing:1px;
}

/* =====================================================
   CULTURE BANNER
===================================================== */

.mot-banner{
  position:relative;

  overflow:hidden;

  padding:140px 40px;

  text-align:center;

  background:
    radial-gradient(circle at 10% 20%, rgba(79,215,255,.12), transparent 22%),
    radial-gradient(circle at 90% 25%, rgba(255,213,95,.08), transparent 28%),
    linear-gradient(135deg, #111821 0%, #1b2431 52%, #131820 100%);
}

.mot-banner::before{
  content:"";

  position:absolute;

  inset:0;

  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.06), transparent 30%),
    radial-gradient(circle at 20% 85%, rgba(79,215,255,.1), transparent 22%);
}

.mot-banner::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  top:8%;
  right:12%;
  background:rgba(255,213,95,.12);
  filter:blur(14px);
}

.mot-banner-content{
  position:relative;
  z-index:2;

  max-width:900px;
  margin:auto;
}

.mot-banner span{
  display:block;

  color:var(--mot-splash);

  letter-spacing:4px;

  text-transform:uppercase;

  font-size:11px;

  margin-bottom:20px;
}

.mot-banner h2{
  font-family:'Playfair Display',serif;

  color:white;

  font-size:clamp(42px,6vw,78px);

  line-height:1.08;

  margin-bottom:25px;
  text-shadow:0 20px 40px rgba(0,0,0,.25);
}

.mot-banner p{
  color:rgba(220,230,255,.82);

  line-height:2;

  max-width:720px;

  margin:auto auto 40px;
}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

  .mot-hero{
    padding:110px 20px 80px;
  }

  .mot-hero-word,
  .mot-orb{
    display:none;
  }

  .mot-hero h1{
    font-size:48px;
  }

  .mot-hero p{
    font-size:16px;
  }

  .mot-section{
    padding:80px 20px;
  }

  .mot-heading{
    margin-bottom:60px;
  }

  .mot-founder{
    grid-template-columns:1fr;
    gap:30px;
    margin-bottom:80px;
  }

  .mot-founder.reverse{
    direction:ltr;
  }

  .mot-founder-content{
    margin:0;
    padding:35px;
  }

  .mot-founder.reverse .mot-founder-content{
    margin:0;
  }

  .mot-founder-image img{
    height:320px;
  }

  .mot-founder-content h3{
    font-size:34px;
  }

  .mot-founder-number{
    font-size:90px;
    top:-40px;
    right:0;
  }

  .mot-team-card img{
    height:260px;
  }

  .mot-team-grid{
    gap:24px;
  }

  .mot-stats{
    grid-template-columns:1fr 1fr;
  }

  .mot-banner{
    padding:90px 20px;
  }
}
.mot-section{
  position:relative;
  overflow:hidden;
}

.mot-section::before{
  content:"";

  position:absolute;
  inset:0;

  background-image:
  linear-gradient(
      rgba(76,142,247,.03) 1px,
      transparent 1px
  ),
  linear-gradient(
      90deg,
      rgba(76,142,247,.03) 1px,
      transparent 1px
  );

  background-size:60px 60px;

  animation:gridMove 25s linear infinite;

  pointer-events:none;
}

@keyframes gridMove{

  from{
    transform:translateY(0);
  }

  to{
    transform:translateY(60px);
  }

}
.mot-scroll-word{

  position:absolute;

  white-space:nowrap;

  top:50%;

  left:-20%;

  font-size:220px;

  font-family:'Playfair Display';

  color:rgba(27,58,107,.03);

  pointer-events:none;

  animation:
  horizontalFlow 40s linear infinite;
}

@keyframes horizontalFlow{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-40%);
  }

}
.mot-founder{

 opacity:0;

 transform:
 translateY(120px)
 scale(.95);

 transition:
 1.2s cubic-bezier(.22,.61,.36,1);
}

.mot-founder.revealed{

 opacity:1;

 transform:
 translateY(0)
 scale(1);
}