/* =========================
   RESET
========================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* =========================
   ROOT VARIABLES
========================= */
:root{
  --bg:#efefed;
  --bg-2:#ecebe8;
  --text:#101722;
  --muted:#8f918f;
  --line:#252b35;
  --accent:#ff7b22;
  --dark:#0b1420;
  --white:#ffffff;
  --header-h:104px;
}

/* Smooth scrolling */
html{
  scroll-behavior:smooth;
}

/* Body base style */
body{
  font-family:'Outfit', sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* Remove default underline */
a{
  text-decoration:none;
}

/* =========================
   HEADER
========================= */
.topbar{
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  height:var(--header-h);
  background:rgba(239,239,237,0.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 30px;
  border-bottom:1px solid rgba(20,25,35,0.05);
}

.nav-left,
.nav-right{
  display:flex;
  align-items:center;
  gap:22px;
}

.logo{
  font-size:34px;
  font-weight:700;
  letter-spacing:14px;
  color:#000;
  white-space:nowrap;
  line-height:1;
}

.divider{
  width:1px;
  height:34px;
  background:#1e1e1e;
  opacity:0.75;
}

/* Audio button */
.audio-trigger{
  width:58px;
  height:58px;
  border-radius:50%;
  border:1px solid #d6d6d6;
  background:transparent;
  color:#333;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.3s ease;
}

.audio-trigger:hover{
  transform:scale(1.06);
  background:rgba(255,255,255,0.35);
  border-color:#c5c5c5;
}

.audio-trigger.playing{
  background:#101722;
  color:#fff;
  border-color:#101722;
  box-shadow:0 12px 28px rgba(16,23,34,.18);
}

/* Center nav */
.nav-center{
  display:flex;
  align-items:center;
  gap:42px;
}

.nav-center a{
  font-size:18px;
  color:#9d9d9d;
  font-weight:400;
  transition:.3s ease;
}

.nav-center a.active,
.nav-center a:hover{
  color:#1d2430;
}

/* Let's talk link */
.talk-link{
  position:relative;
  font-size:20px;
  color:#1d2430;
  font-weight:400;
  padding-bottom:2px;
}

.talk-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:126px;
  height:1px;
  background:#1d2430;
}

.talk-link span{
  color:var(--accent);
  font-size:24px;
  margin-left:8px;
}

/* Menu button */
.menu-btn{
  width:90px;
  height:54px;
  border:none;
  background:transparent;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  cursor:pointer;
}

.menu-btn span{
  display:block;
  height:4px;
  background:#1d2430;
  border-radius:10px;
  width:92px;
}

/* =========================
   HERO
========================= */
.hero{
  position:relative;
  min-height:calc(100vh - var(--header-h));
  background:
    radial-gradient(circle at 50% 16%, rgba(233,220,204,.78), transparent 22%),
    linear-gradient(to bottom, #efefed 0%, #f1f0ee 45%, #eceae7 100%);
  overflow:hidden;
}

.hero-noise{
  position:absolute;
  inset:0;
  opacity:.07;
  background-image:radial-gradient(rgba(0,0,0,.28) .6px, transparent .8px);
  background-size:8px 8px;
  pointer-events:none;
  mix-blend-mode:soft-light;
}

.hero-inner{
  position:relative;
  min-height:calc(100vh - var(--header-h));
  display:grid;
  grid-template-columns:1.12fr 1.18fr .92fr;
  align-items:end;
  gap:20px;
  padding:28px 28px 56px;
  z-index:2;
}

/* Left hero text */
.hero-left{
  align-self:end;
  padding-bottom:44px;
  max-width:570px;
}

.hero-left h1{
  font-size:clamp(48px, 4.2vw, 76px);
  line-height:.98;
  font-weight:400;
  letter-spacing:-1.8px;
  color:#111926;
  margin-bottom:22px;
}

.hero-left p{
  max-width:560px;
  font-size:clamp(18px, 1.45vw, 23px);
  line-height:1.14;
  color:#999a98;
  font-weight:300;
  margin-bottom:28px;
}

/* CTA button */
.cta-btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:linear-gradient(180deg,#091321,#06111f);
  color:#fff;
  padding:18px 34px;
  border-radius:999px;
  font-size:18px;
  letter-spacing:2px;
  box-shadow:0 18px 40px rgba(9,19,33,.18);
  transition:.35s ease;
}

.cta-btn span{
  color:var(--accent);
  font-size:24px;
  line-height:1;
}

.cta-btn:hover{
  transform:translateY(-4px);
}

/* =========================
   ORB
========================= */
.hero-center{
  position:relative;
  min-height:calc(100vh - var(--header-h));
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.orb-stage{
  position:relative;
  width:min(40vw, 650px);
  height:min(40vw, 650px);
  min-width:320px;
  min-height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  will-change:transform, filter;
}

.orb-aura{
  position:absolute;
  inset:-14%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 226, 191, 0.60) 0%,
      rgba(255, 226, 191, 0.22) 22%,
      rgba(255, 226, 191, 0.00) 62%);
  filter:blur(30px);
  animation:auraPulse 5s ease-in-out infinite;
  opacity:.95;
}

.orb-shell{
  position:relative;
  width:100%;
  height:100%;
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%,
      rgba(255, 232, 204, 0.95) 0%,
      rgba(249, 236, 219, 0.82) 23%,
      rgba(244, 239, 233, 0.58) 58%,
      rgba(255, 255, 255, 0.96) 100%);
  box-shadow:
    inset 0 18px 50px rgba(255,255,255,.72),
    inset 0 -18px 45px rgba(0,0,0,.03),
    0 35px 90px rgba(224,209,193,.28);
  animation:orbFloat 5.8s ease-in-out infinite;
  transform-origin:center;
}

.orb-core{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,214,170,.55) 0%,
      rgba(255,214,170,.20) 24%,
      rgba(255,214,170,0) 48%);
  filter:blur(4px);
}

.orb-highlight{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.18) 16%,
      rgba(255,255,255,0) 26%);
  mix-blend-mode:screen;
  opacity:.95;
}

.orb-specks{
  position:absolute;
  inset:0;
  border-radius:50%;
  background-image:
    radial-gradient(rgba(255,255,255,.98) 1px, transparent 1.8px),
    radial-gradient(rgba(255,255,255,.78) 1px, transparent 1.8px),
    radial-gradient(rgba(255,245,235,.80) 1px, transparent 2px);
  background-size:18px 18px, 26px 26px, 34px 34px;
  background-position:0 0, 12px 8px, 22px 16px;
  mix-blend-mode:screen;
  opacity:.78;
  animation:specksDrift 16s linear infinite;
}

.orb-floor-shadow{
  position:absolute;
  left:50%;
  bottom:-112px;
  transform:translateX(-50%);
  width:min(29vw, 450px);
  height:48px;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(0,0,0,.18) 0%,
      rgba(0,0,0,.10) 34%,
      rgba(0,0,0,0) 72%);
  filter:blur(16px);
  opacity:.34;
  will-change:transform, width, opacity;
}

/* =========================
   RIGHT HERO TEXT
========================= */
.hero-right{
  align-self:end;
  padding-bottom:54px;
  max-width:440px;
  margin-left:auto;
}

.hero-right p{
  font-size:clamp(20px, 1.55vw, 34px);
  line-height:1.06;
  font-weight:300;
  color:#7f807e;
  margin-bottom:22px;
}

.hero-right p strong{
  color:#222c37;
  font-weight:400;
}

/* Pills */
.pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 20px;
  border-radius:999px;
  border:2px solid #2b323d;
  color:#2b323d;
  font-size:14px;
  letter-spacing:.4px;
  transition:.3s ease;
  background:transparent;
}

.pill:hover{
  background:#1c232c;
  color:#fff;
  transform:translateY(-2px);
}

.pill.plus{
  min-width:42px;
  padding:0;
  font-size:18px;
}

/* =========================
   AFTER SECTION
========================= */
.after-section{
  position:relative;
  min-height:130vh;
  padding:180px 30px 120px;
  background:linear-gradient(to bottom, #eceae7 0%, #e8e6e3 100%);
  overflow:hidden;
}

.after-section .container{
  max-width:1280px;
  margin:0 auto;
}

.eyebrow{
  font-size:14px;
  letter-spacing:3px;
  color:#7b7c7a;
  margin-bottom:20px;
  text-transform:uppercase;
}

.after-section h2{
  font-size:clamp(46px, 5vw, 90px);
  line-height:.94;
  letter-spacing:-2px;
  font-weight:400;
  max-width:980px;
  margin-bottom:24px;
  color:#111926;
}

.after-section p{
  max-width:740px;
  font-size:clamp(20px, 1.4vw, 28px);
  line-height:1.15;
  color:#878884;
  font-weight:300;
}

/* =========================
   ANIMATIONS
========================= */
@keyframes orbFloat{
  0%,100%{ transform:translateY(0px) scale(1); }
  50%{ transform:translateY(-18px) scale(1.01); }
}

@keyframes auraPulse{
  0%,100%{ transform:scale(1); opacity:.82; }
  50%{ transform:scale(1.06); opacity:1; }
}

@keyframes specksDrift{
  0%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(8px,-5px) rotate(1deg); }
  100%{ transform:translate(0,0) rotate(0deg); }
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1200px){
  .hero-inner{
    grid-template-columns:1fr;
    align-items:center;
    padding-top:24px;
    padding-bottom:40px;
  }

  .hero-left,
  .hero-right{
    max-width:100%;
    margin:0;
    padding-bottom:0;
  }

  .hero-center{
    min-height:auto;
    order:-1;
    padding:30px 0 10px;
  }

  .orb-stage{
    width:min(54vw, 540px);
    height:min(54vw, 540px);
  }
}

@media (max-width:1100px){
  .nav-center{
    display:none;
  }

  .topbar{
    padding:0 22px;
  }

  .logo{
    font-size:28px;
    letter-spacing:10px;
  }

  .talk-link{
    font-size:17px;
  }

  .talk-link::after{
    width:106px;
  }

  .menu-btn span{
    width:70px;
  }
}

@media (max-width:768px){
  :root{
    --header-h:88px;
  }

  .topbar{
    height:var(--header-h);
    padding:0 16px;
  }

  .audio-trigger{
    width:48px;
    height:48px;
    font-size:22px;
  }

  .divider{
    height:26px;
  }

  .logo{
    font-size:22px;
    letter-spacing:7px;
  }

  .talk-link,
  .nav-right .divider{
    display:none;
  }

  .menu-btn{
    width:60px;
  }

  .menu-btn span{
    width:48px;
    height:3px;
  }

  .hero{
    min-height:auto;
  }

  .hero-inner{
    min-height:calc(100vh - var(--header-h));
    padding:18px 20px 40px;
    gap:24px;
  }

  .hero-left h1{
    font-size:clamp(42px, 9vw, 66px);
    margin-bottom:18px;
  }

  .hero-left p,
  .hero-right p{
    font-size:20px;
  }

  .orb-stage{
    width:78vw;
    height:78vw;
    min-width:260px;
    min-height:260px;
  }

  .orb-floor-shadow{
    width:62vw;
    height:34px;
    bottom:-68px;
  }

  .cta-btn{
    padding:16px 28px;
    font-size:16px;
  }

  .pill{
    min-height:38px;
    padding:0 16px;
    font-size:13px;
  }

  .after-section{
    padding:120px 20px 90px;
  }
}

.mdx-section{
  position: relative;
  height: 100vh;
  background: #efefed;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* background */
.mdx-bg{
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: scale(1);
  will-change: transform;
}

.mdx-circle{
  position: absolute;
  width: min(95vw, 1800px);
  aspect-ratio: 1/1;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at center, #f3f1ee 0%, #efefed 70%);
  border: 1px solid rgba(229, 204, 175, 0.25);
}

/* glow */
.mdx-glow{
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.mdx-glow.left{
  width: 420px;
  height: 600px;
  left: 12%;
  top: 8%;
  background: radial-gradient(circle, #ffa94a 0%, transparent 70%);
}

.mdx-glow.right{
  width: 380px;
  height: 520px;
  right: 12%;
  bottom: 6%;
  background: radial-gradient(circle, #ffb366 0%, transparent 70%);
}

/* content */
.mdx-content{
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 1400px;
}

.mdx-content h2{
  font-family: 'Outfit', sans-serif;
  font-size: clamp(60px, 8vw, 140px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -3px;
  color: #111822;
  margin-bottom: 20px;
}

.mdx-content p{
  max-width: 900px;
  margin: auto;
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  color: #444;
  margin-bottom: 30px;
}

.mdx-content p span{
  color: #999;
}

/* button */
.mdx-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  border-radius: 50px;
  background: #0b1420;
  color: #fff;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 2px;
  transition: 0.3s;
}

.mdx-btn span{
  color: #ff7b22;
}

.mdx-btn:hover{
  transform: translateY(-4px);
}

/* brain image style */
.brain-img{
  width: 100%;
  height: 100%;

  object-fit: cover;              /* 👈 FULL FILL */
  object-position: center 60%;    /* 👈 brain center fix */

  transform: scale(1.2);          /* 👈 zoom */

  filter:
    drop-shadow(0 40px 60px rgba(255, 180, 120, 0.25))
    brightness(1.05)
    contrast(1.05);

  animation: brainFloat 5s ease-in-out infinite;
}
/* floating animation */
@keyframes brainFloat{
  0%,100%{
    transform: translateY(0px) scale(1);
  }
  50%{
    transform: translateY(-20px) scale(1.02);
  }
}