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

/* =========================
   ROOT VARIABLES
========================= */
:root{
  --qiro-primary: #12637E;
  --qiro-primary-dark: #0B4F63;
  --qiro-primary-light: #1B7F9C;
  --qiro-bg: #FFFFFF;
  --qiro-bg-soft: #F4FAFC;
  --qiro-card: rgba(255, 255, 255, 0.9);
  --qiro-text: #12313A;
  --qiro-muted: #5E747C;
  --qiro-border: rgba(18, 99, 126, 0.18);
  --qiro-shadow: 0 20px 60px rgba(18, 99, 126, 0.16);
  --bg:var(--qiro-bg);
  --bg-2:var(--qiro-bg-soft);
  --text:var(--qiro-text);
  --muted:var(--qiro-muted);
  --line:var(--qiro-border);
  --accent:var(--qiro-primary);
  --dark:var(--qiro-primary-dark);
  --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;
}

.topbar .brand-logo{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  flex-shrink:0;
}

.topbar .brand-logo-icon{
  height:46px;
  width:46px;
  object-fit:contain;
  display:block;
}

.topbar .brand-logo-text{
  color:#12637E;
  white-space:nowrap;
  font-size:34px;
  font-weight:700;
  letter-spacing:14px;
  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;
  }

  .topbar .brand-logo-text{
    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;
  }

  .topbar .brand-logo{
    gap:10px;
  }

  .topbar .brand-logo-icon{
    height:34px;
    width:34px;
  }

  .topbar .brand-logo-text{
    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: #12637E;
}

.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);
  }
}

.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f2f2;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.aura-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    pointer-events: none;
}

.aura-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0;
    animation: fadeInAura 2s ease-in-out forwards;
}

.orange-aura {
    width: 55vw;
    height: 55vw;
    max-width: 600px;
    max-height: 600px;
    background: #ff7a00;
    transform: translateX(-15%);
    animation-delay: 0.2s;
}

.yellow-aura {
    width: 45vw;
    height: 45vw;
    max-width: 500px;
    max-height: 500px;
    background: #ffc200;
    transform: translateX(15%);
    animation-delay: 0.6s;
}

@keyframes fadeInAura {
    0% { opacity: 0; transform: scale(0.8) translateX(var(--tx, 0)); }
    100% { opacity: 0.65; transform: scale(1) translateX(var(--tx, 0)); }
}

.orange-aura { --tx: -15%; }
.yellow-aura { --tx: 15%; }

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    padding: 0 20px;
}

.hero-heading {
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 400;
    color: #111;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 20px 0;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUpText 1s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards;
}

.hero-subheading {
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    color: #555;
    line-height: 1.5;
    margin: 0 auto 40px auto;
    max-width: 600px;
    font-weight: 400;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUpText 1s cubic-bezier(0.25, 1, 0.5, 1) 0.7s forwards;
}

.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #111;
    color: #fff;
    padding: 12px 28px;
    border-radius: 40px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUpText 1s cubic-bezier(0.25, 1, 0.5, 1) 0.9s forwards;
}

.hero-button:hover {
    background-color: #333;
}

@keyframes fadeUpText {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.ideas-section{
  position: relative;
  min-height: 100vh;
  background: #efefed;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.ideas-bg-circle{
  position: absolute;
  width: min(74vw, 980px);
  aspect-ratio: 1 / 1;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(245, 236, 222, 0.95);
  background: radial-gradient(circle at center, rgba(245, 241, 235, 0.5) 0%, rgba(239,239,237,0.08) 72%);
  z-index: 1;
}

.ideas-bg-glow{
  position: absolute;
  width: 620px;
  height: 620px;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(255,153,48,0.70) 0%,
      rgba(255,170,84,0.38) 28%,
      rgba(255,188,116,0.16) 52%,
      rgba(255,205,146,0.06) 68%,
      transparent 78%);
  filter: blur(90px);
  z-index: 2;
}

.ideas-content{
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1450px;
  text-align: center;
}

.ideas-title{
  margin: 0 0 28px;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(64px, 7.8vw, 142px);
  line-height: .92;
  letter-spacing: -4px;
  font-weight: 300;
  color: #101822;
}

.ideas-title span{
  font-weight: 600;
}

.ideas-text{
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(18px, 1.5vw, 34px);
  line-height: 1.02;
  font-weight: 300;
  color: #2d333b;
}

.ideas-text span{
  color: #9ca0a3;
}

@media (max-width: 1200px){
  .ideas-bg-circle{
    width: 92vw;
  }

  .ideas-bg-glow{
    width: 500px;
    height: 500px;
  }

  .ideas-title{
    letter-spacing: -2.5px;
  }
}

@media (max-width: 767px){
  .ideas-section{
    min-height: 78vh;
    padding: 40px 16px;
  }

  .ideas-bg-circle{
    width: 150vw;
  }

  .ideas-bg-glow{
    width: 280px;
    height: 280px;
    filter: blur(50px);
  }

  .ideas-title{
    font-size: clamp(42px, 11vw, 76px);
    line-height: .96;
    letter-spacing: -1.8px;
    margin-bottom: 18px;
  }

  .ideas-text{
    font-size: 15px;
    line-height: 1.15;
  }
}

.showreel-card {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 50px auto;
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Arial', sans-serif;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Video Styling */
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Video stretch na hota full screen fit hote */
    z-index: 1;
}

/* Overlay to ensure text readability */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Video thoda dark karnya sathi */
    z-index: 2;
}

/* Baki contents z-index layer var aanle aahet */
.top-info, .play-action-center {
    z-index: 3;
}

.top-info {
    position: absolute;
    top: 25px;
    left: 0;
    width: 100%;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
}

.brand-logo {
    color: white;
    font-weight: bold;
    letter-spacing: 1px;
}

.charging-info {
    text-align: right;
}

.charging-info .label {
    color: #ccc;
    font-size: 14px;
    display: block;
}

.charging-info .value {
    color: white;
    font-size: 26px;
    font-weight: 700;
}

.play-action-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.play-icon {
    width: 40px;
    height: 40px;
}

.divider {
    color: white;
    font-size: 20px;
}

.action-text {
    color: white;
    font-size: 22px;
    letter-spacing: 1px;
}

.build-stack-wrap{
  position: relative;
  height: 180vh; /* stack/pin length */
  background: #efefed;
}

.build-stack-section{
  position: sticky;
  top: 0;
  min-height: 100vh;
  background: #efefed;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* blob */
.build-blob-wrap{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.build-blob-glow{
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,168,70,.62) 0%, rgba(255,190,112,.22) 42%, transparent 74%);
  filter: blur(76px);
  z-index: 1;
}

.build-blob{
  position: absolute;
  width: 650px;
  height: 650px;
  border-radius: 48% 52% 45% 55% / 52% 48% 55% 45%;
  background:
    radial-gradient(circle at 50% 56%,
      rgba(255,198,132,.68) 0%,
      rgba(255,214,170,.30) 28%,
      rgba(255,236,220,.12) 56%,
      rgba(255,255,255,.9) 100%);
  box-shadow:
    inset 0 18px 70px rgba(255,255,255,.78),
    inset 0 -12px 30px rgba(0,0,0,.03),
    0 30px 90px rgba(220,200,170,.18);
  filter: blur(.2px);
  z-index: 2;
}

/* text */
.build-content{
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 1400px;
  padding: 0 20px;
}

.build-content h2{
  margin: 0 0 10px;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(64px, 7vw, 132px);
  line-height: .92;
  letter-spacing: -4px;
  font-weight: 300;
  color: #101822;
}

.build-content h2 span{
  font-weight: 600;
}

.build-content p{
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(20px, 1.5vw, 28px);
  line-height: 1.02;
  font-weight: 300;
  color: #2f353d;
}

.build-content p span{
  color: #9ca0a4;
}

/* pills */
.build-pill{
  position: absolute;
  z-index: 6;
  padding: 16px 34px;
  border-radius: 999px;
  border: 1px solid #efb06e;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: #20262e;
  box-shadow: 0 10px 28px rgba(0,0,0,.04);
}

.pill-ui{
  top: 10%;
  left: 12%;
}

.pill-dev{
  top: 11%;
  right: 8%;
}

.pill-brand{
  bottom: 14%;
  left: 11%;
}

.pill-anim{
  bottom: 14%;
  right: 9%;
}

@media (max-width: 1200px){
  .build-stack-wrap{
    height: 160vh;
  }

  .build-blob{
    width: 520px;
    height: 520px;
  }

  .build-blob-glow{
    width: 340px;
    height: 340px;
  }

  .build-content h2{
    letter-spacing: -2.5px;
  }
}

@media (max-width: 768px){
  .build-stack-wrap{
    height: 145vh;
  }

  .build-blob{
    width: 82vw;
    height: 82vw;
    max-width: 390px;
    max-height: 390px;
  }

  .build-blob-glow{
    width: 58vw;
    height: 58vw;
    max-width: 260px;
    max-height: 260px;
    filter: blur(44px);
  }

  .build-content h2{
    font-size: clamp(42px, 10vw, 76px);
    line-height: .96;
    letter-spacing: -2px;
  }

  .build-content p{
    font-size: 16px;
    line-height: 1.15;
  }

  .build-pill{
    padding: 10px 18px;
    font-size: 13px;
  }

  .pill-ui{ top: 14%; left: 4%; }
  .pill-dev{ top: 14%; right: 4%; }
  .pill-brand{ bottom: 14%; left: 4%; }
  .pill-anim{ bottom: 14%; right: 4%; }
}

.contact-mdx-section{
  --bg:#efefed;
  --panel:#f3eee7;
  --text:#111822;
  --muted:#98a0a6;
  --line:#30363f;
  --accent:#12637E;
  --dark:#071321;

  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-columns: 0.98fr 1.02fr;
  background:
    linear-gradient(90deg, #f2ebe2 0%, #f2ebe2 38%, #efefed 38%, #efefed 100%);
  overflow:hidden;
  font-family:'Outfit', sans-serif;
}

.contact-mdx-section *{
  box-sizing:border-box;
}

.contact-mdx-left{
  padding:84px 64px 54px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:100vh;
}

.contact-mdx-kicker{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--accent);
  font-size:18px;
  font-weight:400;
}

.contact-mdx-kicker .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  flex:0 0 auto;
}

.contact-mdx-title{
  margin:26px 0 0;
  color:var(--text);
  font-size:clamp(60px, 5.3vw, 86px);
  line-height:.95;
  letter-spacing:-2.7px;
  font-weight:300;
}

.contact-mdx-line{
  width:72px;
  height:2px;
  background:#74808a;
  margin:38px 0 34px;
}

.contact-mdx-mail{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:#75808a;
  font-size:20px;
  text-decoration:underline;
  text-underline-offset:6px;
}

.mail-icon{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#75808a;
}

.mail-icon svg{
  width:20px;
  height:20px;
}

.contact-mdx-socials{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
  padding-top:44px;
}

.contact-mdx-socials a{
  width:44px;
  height:44px;
  border-radius:50%;
  border:1.5px solid #7e8891;
  color:#6f7983;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:22px;
  line-height:1;
}

.contact-mdx-right{
  position:relative;
  padding:72px 72px 72px 64px;
  background:
    radial-gradient(circle at 55% 70%, rgba(247,201,149,.22), transparent 28%),
    linear-gradient(180deg, #efefed 0%, #efefed 100%);
}

.contact-mdx-form-title{
  margin:0 0 48px;
  color:var(--text);
  font-size:clamp(52px, 4vw, 74px);
  line-height:1;
  font-weight:300;
  letter-spacing:-2px;
}

.contact-mdx-form{
  width:100%;
}

.contact-mdx-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px 24px;
  margin-bottom:34px;
}

.field{
  position:relative;
}

.field input,
.field textarea{
  width:100%;
  border:none;
  border-bottom:1.5px solid #2f363f;
  background:transparent;
  outline:none;
  color:var(--text);
  font-family:'Outfit', sans-serif;
  font-size:22px;
  font-weight:300;
  padding:18px 0 12px;
  border-radius:0;
}

.field textarea{
  min-height:124px;
  resize:none;
  padding-top:26px;
}

.field label{
  position:absolute;
  left:0;
  top:6px;
  color:#9ea3a6;
  font-size:18px;
  font-weight:300;
  pointer-events:none;
  transition:.2s ease;
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
  top:-10px;
  font-size:14px;
  color:#7d858c;
}

.interest-wrap{
  margin:8px 0 28px;
}

.interest-label{
  color:#9ea3a6;
  font-size:18px;
  margin-bottom:14px;
  font-weight:300;
}

.interest-options{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.interest-chip{
  position:relative;
  display:inline-flex;
  cursor:pointer;
}

.interest-chip input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.interest-chip span{
  min-height:44px;
  padding:0 24px;
  border-radius:999px;
  border:1.4px solid #5d6570;
  background:transparent;
  color:#2a3139;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:300;
  transition:.2s ease;
}

.interest-chip.active span,
.interest-chip input:checked + span{
  background:var(--dark);
  border-color:var(--dark);
  color:#fff;
  box-shadow:0 10px 18px rgba(7,19,33,.18);
}

.field-textarea{
  margin-bottom:38px;
}

.contact-mdx-submit{
  width:100%;
  min-height:62px;
  border:none;
  border-radius:999px;
  background:linear-gradient(180deg, #081321 0%, #05111d 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-family:'Outfit', sans-serif;
  font-size:20px;
  letter-spacing:2px;
  font-weight:400;
  box-shadow:0 16px 34px rgba(7,19,33,.2);
  cursor:pointer;
}

.contact-mdx-submit .arrow{
  color:var(--accent);
  font-size:30px;
  line-height:1;
  transform:translateY(-1px);
}

@media (max-width: 1200px){
  .contact-mdx-section{
    grid-template-columns:1fr;
    background:#efefed;
  }

  .contact-mdx-left,
  .contact-mdx-right{
    min-height:auto;
  }

  .contact-mdx-left{
    background:#f2ebe2;
    padding:56px 28px 40px;
  }

  .contact-mdx-right{
    padding:48px 28px 56px;
  }
}

@media (max-width: 768px){
  .contact-mdx-grid{
    grid-template-columns:1fr;
    gap:28px;
  }

  .contact-mdx-title{
    font-size:clamp(44px, 10vw, 64px);
  }

  .contact-mdx-form-title{
    font-size:clamp(40px, 10vw, 56px);
  }

  .contact-mdx-mail{
    font-size:18px;
  }

  .contact-mdx-socials a{
    width:40px;
    height:40px;
    font-size:18px;
  }

  .field input,
  .field textarea{
    font-size:20px;
  }

  .field label,
  .interest-label{
    font-size:16px;
  }
}

.footer-mdx{
  background:#000;
  color:#f2f2f2;
  padding:42px 46px 24px;
  font-family:'Outfit', sans-serif;
  overflow:hidden;
}

.footer-mdx a{
  color:inherit;
  text-decoration:none;
}

.footer-mdx-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
}

.footer-mdx-left{
  max-width:720px;
}

.footer-mdx-heading{
  margin:0 0 38px;
  font-size:clamp(52px, 4.4vw, 86px);
  line-height:0.92;
  letter-spacing:-2.8px;
  font-weight:300;
  color:#f5f5f5;
}

.footer-mdx-heading span{
  color:#757575;
  font-weight:300;
}

.footer-mdx-email{
  display:inline-flex;
  align-items:center;
  gap:16px;
  font-size:28px;
  font-weight:500;
  letter-spacing:-0.8px;
}

.footer-mdx-email-icon{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#f4f4f4;
  flex:0 0 auto;
}

.footer-mdx-email-icon svg{
  width:34px;
  height:34px;
  display:block;
}

.footer-mdx-nav{
  display:flex;
  align-items:center;
  gap:46px;
  padding-bottom:18px;
  flex-wrap:wrap;
}

.footer-mdx-nav a{
  font-size:24px;
  line-height:1;
  font-weight:400;
  color:#f1f1f1;
}

.footer-mdx-divider{
  width:100%;
  height:2px;
  background:#1f1f1f;
  margin:54px 0 32px;
}

.footer-mdx-logo-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  align-items:end;
  gap:24px;
}

.footer-mdx-logo{
  font-size:clamp(170px, 22vw, 430px);
  line-height:0.82;
  font-weight:700;
  color:#e9e9eb;
  user-select:none;
}

.footer-mdx-logo-q{
  text-align:left;
  letter-spacing:-18px;
}

.footer-mdx-logo-i,
.footer-mdx-logo-r{
  text-align:center;
  letter-spacing:-18px;
}

.footer-mdx-logo-o{
  text-align:right;
  letter-spacing:-18px;
}

.footer-mdx-bottom{
  margin-top:12px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
}

.footer-mdx-socials{
  display:flex;
  align-items:center;
  gap:34px;
}

.footer-mdx-socials a{
  color:#8f8f92;
  font-size:30px;
  line-height:1;
  font-weight:500;
}

.footer-mdx-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:52px;
  color:#8b8b8e;
  font-size:18px;
  line-height:1.2;
  flex-wrap:wrap;
}

.footer-mdx-meta a{
  color:#8b8b8e;
}

.footer-mdx-scrolltop{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#f1f1f1;
  font-size:20px;
  line-height:1;
  font-weight:500;
}

.footer-mdx-scrolltop-icon{
  width:24px;
  height:24px;
  border:1.5px solid #e9e9eb;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  transform:translateY(-1px);
}

@media (max-width: 1200px){
  .footer-mdx-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-mdx-nav{
    gap:26px;
    padding-bottom:0;
  }

  .footer-mdx-logo-row{
    grid-template-columns:1fr;
    gap:18px;
  }

  .footer-mdx-logo,
  .footer-mdx-logo-i,
  .footer-mdx-logo-r,
  .footer-mdx-logo-o{
    text-align:left;
  }

  .footer-mdx-bottom{
    grid-template-columns:1fr;
    justify-items:start;
  }

  .footer-mdx-meta{
    justify-content:flex-start;
    gap:22px 34px;
  }
}

@media (max-width: 768px){
  .footer-mdx{
    padding:28px 18px 20px;
  }

  .footer-mdx-heading{
    font-size:clamp(40px, 12vw, 64px);
    margin-bottom:24px;
  }

  .footer-mdx-email{
    font-size:18px;
    gap:10px;
  }

  .footer-mdx-email-icon,
  .footer-mdx-email-icon svg{
    width:24px;
    height:24px;
  }

  .footer-mdx-nav a{
    font-size:18px;
  }

  .footer-mdx-divider{
    margin:30px 0 20px;
  }

  .footer-mdx-logo{
    font-size:clamp(150px, 34vw, 240px);
    letter-spacing:-10px;
  }

  .footer-mdx-socials{
    gap:20px;
  }

  .footer-mdx-socials a{
    font-size:22px;
  }

  .footer-mdx-meta{
    font-size:14px;
  }

  .footer-mdx-scrolltop{
    font-size:16px;
  }
}

.showcase-section{
  background:#000;
  color:#f4f4f4;
  padding:44px 42px 36px;
  font-family:'Outfit',sans-serif;
}

.showcase-section *{
  box-sizing:border-box;
}

.showcase-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px;
}

.showcase-title{
  margin:0;
  font-size:clamp(46px,4vw,76px);
  line-height:.95;
  letter-spacing:-2px;
  font-weight:300;
  color:#f4f4f4;
}

.showcase-viewall{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#f2f2f2;
  text-decoration:none;
}

.showcase-viewall span:first-child{
  min-height:34px;
  padding:0 18px;
  border:1.4px solid #494949;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  letter-spacing:.4px;
}

.showcase-viewall-icon{
  width:32px;
  height:32px;
  border-radius:50%;
  background:#f4f4f4;
  color:#111;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
}

.showcase-filters{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:28px;
}

.filter-btn{
  min-height:66px;
  padding:0 54px;
  border-radius:999px;
  border:1.4px solid #2e2e2e;
  background:transparent;
  color:#d8d8d8;
  font-family:'Outfit',sans-serif;
  font-size:22px;
  font-weight:300;
  cursor:pointer;
}

.filter-btn.active{
  background:#12637E;
  color:#fff;
  border-color:#12637E;
}

.showcase-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.showcase-card{
  display:flex;
  flex-direction:column;
}

.showcase-thumb{
  border-radius:28px;
  overflow:hidden;
  background:#111;
  margin-bottom:18px;
}

.showcase-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.showcase-meta{
  color:#9d9d9d;
  font-size:17px;
  line-height:1.1;
  margin-bottom:10px;
  letter-spacing:.2px;
}

.showcase-card-title{
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:#f2f2f2;
  text-decoration:none;
  font-size:clamp(34px,2.6vw,56px);
  line-height:1;
  font-weight:300;
  letter-spacing:-1.4px;
}

.showcase-card-title span{
  color:#12637E;
  font-size:.9em;
}

@media (max-width: 1100px){
  .showcase-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 768px){
  .showcase-section{
    padding:28px 16px 26px;
  }

  .showcase-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .showcase-title{
    font-size:clamp(38px,10vw,56px);
  }

  .filter-btn{
    min-height:52px;
    padding:0 24px;
    font-size:18px;
  }

  .showcase-meta{
    font-size:14px;
  }

  .showcase-card-title{
    font-size:clamp(28px,8vw,42px);
  }
}

.portfolio-dark-section{
  background:#000;
  padding:44px 54px 52px;
  font-family:'Outfit', sans-serif;
}

.portfolio-dark-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.portfolio-dark-card{
  display:flex;
  flex-direction:column;
}

.portfolio-dark-thumb{
  width:100%;
  height:300px;
  border-radius:32px;
  overflow:hidden;
  background:#111;
}

.portfolio-dark-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.portfolio-dark-meta{
  margin-top:24px;
  color:#8e8e92;
  font-size:18px;
  line-height:1.1;
  font-weight:300;
  letter-spacing:.2px;
}

.portfolio-dark-title{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:16px;
  color:#f2f2f2;
  text-decoration:none;
  font-size:clamp(38px, 2.9vw, 58px);
  line-height:1;
  font-weight:300;
  letter-spacing:-1.4px;
}

.portfolio-dark-title span{
  color:#12637E;
  font-size:.92em;
  line-height:1;
}

@media (max-width: 1200px){
  .portfolio-dark-thumb{
    height:420px;
  }
}

@media (max-width: 900px){
  .portfolio-dark-section{
    padding:28px 18px 34px;
  }

  .portfolio-dark-grid{
    grid-template-columns:1fr;
    gap:26px;
  }

  .portfolio-dark-thumb{
    height:300px;
    border-radius:22px;
  }

  .portfolio-dark-meta{
    margin-top:16px;
    font-size:15px;
  }

  .portfolio-dark-title{
    font-size:clamp(30px, 8vw, 44px);
    gap:12px;
  }
}

.footer-mdx-logo{
  font-size:clamp(260px, 29vw, 520px);
  line-height:0.82;
  font-weight:700;
  color:#e9e9eb;
  user-select:none;

  opacity:0;
  transform:translateX(-140px);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-mdx-logo.show{
  opacity:1;
  transform:translateX(0);
}

.footer-mdx-logo-q{ transition-delay:0s; }
.footer-mdx-logo-i{ transition-delay:.14s; }
.footer-mdx-logo-r{ transition-delay:.28s; }
.footer-mdx-logo-o{ transition-delay:.42s; }

/* =========================
   MENU OVERLAY
========================= */
.menu-overlay{
  position: fixed;
  inset: 0;
  background: rgba(240, 232, 221, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
  padding: 22px;
}

.menu-overlay.active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.menu-panel{
  position: relative;
  width: 100%;
  height: 100%;
  background: #f4efe8;
  border-radius: 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,.08);
  overflow: hidden;

  transform: translateY(26px) scale(.985);
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}

.menu-overlay.active .menu-panel{
  transform: translateY(0) scale(1);
}

.menu-close{
  position: absolute;
  top: 26px;
  right: 26px;
  width: 72px;
  height: 72px;
  border: none;
  border-radius: 22px;
  background: #efdcc7;
  color: #1d2430;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  z-index: 20;
}

.menu-content{
  display: grid;
  grid-template-columns: 1.15fr .72fr .72fr;
  gap: 60px;
  padding: 92px 58px 28px;
}

/* left */
.menu-left{
  opacity: 0;
  transform: translateY(30px);
  transition: .55s cubic-bezier(.22,1,.36,1);
  transition-delay: .08s;
}

.menu-overlay.active .menu-left{
  opacity: 1;
  transform: translateY(0);
}

.menu-kicker{
  display: flex;
  align-items: center;
  gap: 14px;
  color: #12637E;
  font-size: 18px;
  margin-bottom: 28px;
}

.menu-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #12637E;
  display: inline-block;
}

.menu-title{
  margin: 0;
  color: #101822;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(58px, 5vw, 94px);
  line-height: .94;
  letter-spacing: -2.8px;
  font-weight: 300;
}

.menu-line{
  width: 70px;
  height: 2px;
  background: #a5adb4;
  margin: 34px 0 34px;
}

.menu-email{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #76808a;
  text-decoration: underline;
  text-underline-offset: 6px;
  font-size: 18px;
  margin-bottom: 56px;
}

.menu-mail-icon{
  font-size: 18px;
}

.menu-talk-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 28px;
  border-radius: 999px;
  background: linear-gradient(180deg,#091321,#06111f);
  color: #fff;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  box-shadow: 0 18px 34px rgba(9,19,33,.16);
}

.menu-talk-btn span{
  color: #12637E;
  font-size: 24px;
}

/* columns */
.menu-col{
  opacity: 0;
  transform: translateY(30px);
  transition: .55s cubic-bezier(.22,1,.36,1);
}

.menu-overlay.active .menu-col:nth-child(2){
  opacity: 1;
  transform: translateY(0);
  transition-delay: .18s;
}

.menu-overlay.active .menu-col:nth-child(3){
  opacity: 1;
  transform: translateY(0);
  transition-delay: .28s;
}

.menu-col-title{
  color: #7f8991;
  font-size: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #d7d1ca;
}

.menu-col-title-space{
  margin-top: 42px;
}

.menu-link{
  display: block;
  color: #7f868d;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  line-height: 1.28;
  font-weight: 300;
  margin-bottom: 14px;
}

.menu-link.active{
  color: #161e28;
  position: relative;
  padding-left: 30px;
}

.menu-link.active::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #12637E;
  transform: translateY(-50%);
}

.menu-link.muted{
  color: #8f9499;
}

.menu-col:nth-child(3){
  max-height: calc(100vh - 265px);
  overflow-y: auto;
  padding-right: 8px;
}

.menu-col:nth-child(3) .menu-link{
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.08;
  margin-bottom: 8px;
}

/* bottom */
.menu-bottom{
  position: absolute;
  left: 58px;
  right: 58px;
  bottom: 34px;
  padding-top: 24px;
  border-top: 2px solid #a7aeb4;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;

  opacity: 0;
  transform: translateY(20px);
  transition: .55s cubic-bezier(.22,1,.36,1);
  transition-delay: .36s;
}

.menu-overlay.active .menu-bottom{
  opacity: 1;
  transform: translateY(0);
}

.menu-copy{
  color: #76808a;
  font-size: 16px;
}

.menu-socials{
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.menu-socials a{
  width: 40px;
  height: 40px;
  border: 1.4px solid #8f979d;
  border-radius: 50%;
  color: #73808a;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.menu-policies{
  display: flex;
  justify-content: flex-end;
  gap: 42px;
}

.menu-policies a{
  color: #76808a;
  text-decoration: none;
  font-size: 16px;
}

@media (max-width: 1200px){
  .menu-content{
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 90px 28px 150px;
    overflow: auto;
    height: 100%;
  }

  .menu-bottom{
    left: 28px;
    right: 28px;
    bottom: 24px;
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .menu-policies{
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px){
  .menu-overlay{
    padding: 10px;
  }

  .menu-close{
    top: 16px;
    right: 16px;
    width: 58px;
    height: 58px;
    font-size: 28px;
    border-radius: 18px;
  }

  .menu-content{
    padding: 84px 18px 150px;
  }

  .menu-title{
    font-size: clamp(42px, 10vw, 66px);
    letter-spacing: -2px;
  }

  .menu-link{
    font-size: 22px;
  }

  .menu-bottom{
    left: 18px;
    right: 18px;
  }
}

.vision-section{
  position: relative;
  min-height: 100vh;
  background: #efefed;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 20px;
}

.vision-circle{
  position: absolute;
  width: min(78vw, 1050px);
  aspect-ratio: 1 / 1;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(246, 238, 227, 0.95);
  background: radial-gradient(circle at center, rgba(246,241,234,0.52) 0%, rgba(239,239,237,0.06) 72%);
  z-index: 1;
}

.vision-glow{
  position: absolute;
  width: 520px;
  height: 520px;
  left: 50%;
  top: 23%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,153,48,0.78) 0%,
    rgba(255,171,84,0.42) 30%,
    rgba(255,192,122,0.18) 54%,
    rgba(255,210,158,0.06) 68%,
    transparent 80%);
  filter: blur(78px);
  z-index: 2;
}

.vision-content{
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  text-align: center;
}

.vision-title{
  margin: 0 0 26px;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(62px, 7.2vw, 132px);
  line-height: .92;
  letter-spacing: -4px;
  font-weight: 300;
  color: #101822;
}

.vision-title span{
  font-weight: 600;
}

.vision-text{
  max-width: 980px;
  margin: 0 auto 42px;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(18px, 1.35vw, 28px);
  line-height: 1.08;
  font-weight: 300;
  color: #5f6670;
}

.vision-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60px;
  padding: 0 34px;
  border-radius: 999px;
  background: linear-gradient(180deg, #071321 0%, #04101b 100%);
  color: #fff;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  letter-spacing: 3px;
  box-shadow: 0 18px 34px rgba(8,19,33,.18);
}

.vision-btn span{
  color: #12637E;
  font-size: 26px;
  line-height: 1;
}

@media (max-width: 1200px){
  .vision-circle{
    width: 92vw;
  }

  .vision-glow{
    width: 420px;
    height: 420px;
  }

  .vision-title{
    letter-spacing: -2.5px;
  }
}

@media (max-width: 768px){
  .vision-section{
    min-height: 82vh;
    padding: 50px 16px;
  }

  .vision-circle{
    width: 150vw;
    top: 52%;
  }

  .vision-glow{
    width: 260px;
    height: 260px;
    top: 22%;
    filter: blur(44px);
  }

  .vision-title{
    font-size: clamp(42px, 11vw, 72px);
    line-height: .96;
    letter-spacing: -2px;
    margin-bottom: 18px;
  }

  .vision-text{
    max-width: 95%;
    font-size: 16px;
    line-height: 1.18;
    margin-bottom: 28px;
  }

  .vision-btn{
    min-height: 52px;
    padding: 0 24px;
    font-size: 16px;
    letter-spacing: 2px;
  }
}

.about-intro-section{
  position: relative;
  min-height: 100vh;
  background: #efefed;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 20px 110px;
}

.about-intro-circle{
  position: absolute;
  width: min(96vw, 1700px);
  aspect-ratio: 1 / 1;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(243, 236, 226, 0.95);
  background: radial-gradient(circle at center, rgba(245,241,235,0.45) 0%, rgba(239,239,237,0.06) 72%);
  z-index: 1;
}

.about-intro-glow{
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 2;
}

.about-intro-glow-left{
  width: 360px;
  height: 620px;
  left: 10%;
  top: 18%;
  background: radial-gradient(circle, rgba(255,170,75,0.42) 0%, rgba(255,190,118,0.18) 42%, transparent 76%);
}

.about-intro-glow-right{
  width: 340px;
  height: 620px;
  right: 10%;
  bottom: 12%;
  background: radial-gradient(circle, rgba(255,176,92,0.34) 0%, rgba(255,198,132,0.14) 42%, transparent 76%);
}

.about-intro-content{
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1500px;
  text-align: center;
}

.about-intro-tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1.4px solid #7a838c;
  border-radius: 999px;
  color: #5f6871;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 300;
  margin-bottom: 34px;
}

.about-intro-title{
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(52px, 5.6vw, 104px);
  line-height: .98;
  letter-spacing: -3px;
  font-weight: 300;
  color: #111822;
}

.about-intro-title span{
  color: #b8bcc1;
  font-weight: 300;
}

.about-intro-line{
  width: 2px;
  height: 120px;
  background: #8f979f;
  margin: 110px auto 0;
  border-radius: 10px;
}

@media (max-width: 1200px){
  .about-intro-circle{
    width: 130vw;
  }

  .about-intro-title{
    letter-spacing: -2px;
  }

  .about-intro-glow-left,
  .about-intro-glow-right{
    width: 240px;
    height: 360px;
    filter: blur(60px);
  }
}

@media (max-width: 768px){
  .about-intro-section{
    min-height: 85vh;
    padding: 50px 16px 80px;
  }

  .about-intro-circle{
    width: 170vw;
    top: 52%;
  }

  .about-intro-tag{
    min-height: 34px;
    padding: 0 14px;
    font-size: 13px;
    margin-bottom: 22px;
  }

  .about-intro-title{
    font-size: clamp(34px, 8.8vw, 58px);
    line-height: 1.02;
    letter-spacing: -1.5px;
  }

  .about-intro-line{
    height: 80px;
    margin-top: 70px;
  }
}
.about-quote-section{
  position: relative;
  background: #efefed;
  padding: 0 60px 90px;
}

.about-quote-line{
  width: 2px;
  height: 210px;
  background: #8f979f;
  margin: 0 auto 90px;
  border-radius: 10px;
}

.about-quote-bottom{
  max-width: 1220px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}

.about-quote-author{
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-left: 10px;
}

.about-quote-accent{
  width: 3px;
  height: 74px;
  background: #12637E;
  border-radius: 10px;
  flex: 0 0 auto;
}

.about-quote-author-text h3{
  margin: 0 0 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  line-height: 1;
  font-weight: 300;
  color: #111822;
}

.about-quote-author-text p{
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 400;
  color: #12637E;
}

.about-quote-text p{
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(22px, 1.7vw, 34px);
  line-height: 1.08;
  font-weight: 300;
  color: #8e9398;
  letter-spacing: -.4px;
}

@media (max-width: 1200px){
  .about-quote-bottom{
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-quote-line{
    height: 150px;
    margin-bottom: 60px;
  }
}

@media (max-width: 768px){
  .about-quote-section{
    padding: 0 18px 60px;
  }

  .about-quote-line{
    height: 90px;
    margin-bottom: 36px;
  }

  .about-quote-author{
    gap: 16px;
    padding-left: 0;
  }

  .about-quote-accent{
    height: 56px;
  }

  .about-quote-author-text h3{
    font-size: 22px;
  }

  .about-quote-author-text p{
    font-size: 18px;
  }

  .about-quote-text p{
    font-size: 18px;
    line-height: 1.18;
  }
}
/* ===== VALUES SECTION ===== */
.values-mdx-section{
  position:relative;
  background:#efefed;
  padding:72px 54px 88px;
  overflow:hidden;
  font-family:'Outfit',sans-serif;
}

.values-mdx-glow{
  position:absolute;
  left:50%;
  bottom:-120px;
  transform:translateX(-50%);
  width:920px;
  height:620px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,143,36,.42) 0%,
    rgba(255,169,87,.2) 28%,
    rgba(255,199,139,.08) 50%,
    transparent 72%);
  filter:blur(80px);
  pointer-events:none;
}

.values-mdx-top{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:30px;
  align-items:start;
  margin-bottom:52px;
}

.values-mdx-title{
  margin:0;
  color:#101822;
  font-size:clamp(62px,6.1vw,112px);
  line-height:.94;
  letter-spacing:-3px;
  font-weight:300;
}

.values-mdx-title span{
  font-weight:600;
}

.values-mdx-text{
  margin:8px 0 0 auto;
  max-width:590px;
  color:#1f2832;
  font-size:clamp(18px,1.45vw,33px);
  line-height:1.08;
  font-weight:300;
}

.values-mdx-text span{
  color:#9ca2a8;
}

.values-mdx-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}

.values-mdx-card{
  position:relative;
  min-height:468px;
  border:1.5px solid #efb06e;
  border-radius:30px;
  background:rgba(255,255,255,.2);
  overflow:hidden;
  opacity:0;
  transform:translateY(44px);
  transition:opacity .7s ease, transform .7s ease;
}

.values-mdx-card.show{
  opacity:1;
  transform:translateY(0);
}

.values-mdx-card:nth-child(1){transition-delay:.05s;}
.values-mdx-card:nth-child(2){transition-delay:.14s;}
.values-mdx-card:nth-child(3){transition-delay:.23s;}
.values-mdx-card:nth-child(4){transition-delay:.32s;}

.values-mdx-card-inner{
  position:relative;
  height:100%;
  padding:28px;
}

/* outer grid */
.values-mdx-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(191,194,198,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191,194,198,.12) 1px, transparent 1px);
  background-size:120px 110px;
  opacity:.55;
}

/* inner dashed frame */
.values-mdx-card::after{
  content:"";
  position:absolute;
  inset:28px;
  border:2px dashed rgba(207,209,212,.45);
  border-radius:26px;
  pointer-events:none;
}

/* icon */
.values-mdx-icon{
  position:relative;
  z-index:3;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#d8d8d8;
  color:#8d9298;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
}

/* copy */
.values-mdx-copy{
  position:absolute;
  left:28px;
  right:28px;
  bottom:34px;
  z-index:3;
}

.values-mdx-copy h3{
  margin:0 0 16px;
  color:#111822;
  font-size:clamp(26px,2.05vw,48px);
  line-height:1;
  letter-spacing:-1.4px;
  font-weight:300;
}

.values-mdx-copy p{
  margin:0;
  color:#6d7580;
  font-size:clamp(18px,1.15vw,24px);
  line-height:1.28;
  font-weight:300;
}

/* small orange dots */
.values-mdx-dot{
  position:absolute;
  z-index:3;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#f3c395;
}

.values-mdx-dot-top{
  top:54px;
  left:50%;
  transform:translateX(-50%);
}

.values-mdx-dot-left{
  top:148px;
  left:42px;
  width:10px;
  height:10px;
}

.values-mdx-dot-right{
  top:142px;
  right:42px;
}

.values-mdx-dot-bottom{
  bottom:186px;
  right:52px;
  width:10px;
  height:10px;
}

.values-mdx-dot-single{
  top:142px;
  left:50%;
  transform:translateX(-50%);
}

/* custom soft patterns */
.values-mdx-pattern{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.55;
}

/* card 1 */
.values-mdx-pattern-1::before,
.values-mdx-pattern-1::after{
  content:"";
  position:absolute;
  border-radius:20px;
  border:2px solid rgba(214,214,214,.45);
}
.values-mdx-pattern-1::before{
  left:34px;
  right:34px;
  top:36px;
  bottom:36px;
  border-style:dashed;
  border-color:rgba(210,211,214,.45);
}
.values-mdx-pattern-1::after{
  top:40px;
  left:34px;
  width:34px;
  height:4px;
  border:none;
  background:rgba(208,208,208,.8);
  border-radius:10px;
  box-shadow:302px 0 0 rgba(208,208,208,.8);
}

/* card 2 */
.values-mdx-pattern-2::before,
.values-mdx-pattern-2::after{
  content:"";
  position:absolute;
  border:2px solid rgba(216,216,216,.5);
  border-radius:26px;
}
.values-mdx-pattern-2::before{
  left:78px;
  right:78px;
  top:92px;
  height:160px;
}
.values-mdx-pattern-2::after{
  left:66px;
  right:86px;
  top:104px;
  height:176px;
}
.values-mdx-pattern-2{
  background:
    linear-gradient(rgba(191,194,198,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191,194,198,.15) 1px, transparent 1px);
  background-size:160px 140px;
}
.values-mdx-pattern-2 span{
  display:none;
}

/* card 3 */
.values-mdx-pattern-3::before,
.values-mdx-pattern-3::after{
  content:"";
  position:absolute;
  border:2px solid rgba(216,216,216,.5);
  border-radius:22px;
}
.values-mdx-pattern-3::before{
  top:34px;
  left:82px;
  right:82px;
  height:70px;
}
.values-mdx-pattern-3::after{
  top:110px;
  left:26px;
  right:26px;
  bottom:40px;
  border-style:dashed;
  border-color:rgba(209,210,213,.48);
}

/* card 4 */
.values-mdx-pattern-4::before,
.values-mdx-pattern-4::after{
  content:"";
  position:absolute;
  border:2px solid rgba(216,216,216,.45);
}
.values-mdx-pattern-4::before{
  left:36px;
  top:90px;
  width:72px;
  bottom:82px;
  border-radius:22px;
  border-right:none;
}
.values-mdx-pattern-4::after{
  right:36px;
  top:110px;
  width:72px;
  bottom:104px;
  border-radius:22px;
  border-left:none;
}
.values-mdx-pattern-4{
  background:
    linear-gradient(rgba(191,194,198,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191,194,198,.15) 1px, transparent 1px);
  background-size:150px 150px;
}

@media (max-width: 1350px){
  .values-mdx-grid{
    grid-template-columns:repeat(4, 1fr);
  }
}

@media (max-width: 960px){
  .values-mdx-top{
    grid-template-columns:1fr;
    gap:18px;
  }

  .values-mdx-text{
    margin-left:0;
  }
}

@media (max-width: 768px){
  .values-mdx-section{
    padding:44px 16px 58px;
  }

  .values-mdx-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .values-mdx-title{
    font-size:clamp(42px,10vw,70px);
    letter-spacing:-2px;
  }

  .values-mdx-text{
    font-size:16px;
    line-height:1.16;
  }

  .values-mdx-card{
    min-height:360px;
    border-radius:24px;
  }

  .values-mdx-card::after{
    inset:16px;
    border-radius:18px;
  }

  .values-mdx-card-inner{
    padding:20px;
  }

  .values-mdx-icon{
    width:52px;
    height:52px;
    font-size:24px;
  }

  .values-mdx-copy{
    left:20px;
    right:20px;
    bottom:24px;
  }

  .values-mdx-copy h3{
    font-size:34px;
  }

  .values-mdx-copy p{
    font-size:16px;
  }
}
/* ===== PROOF SECTION ===== */
.proof-section{
  position:relative;
  min-height:100vh;
  background:#000;
  overflow:hidden;
  padding:74px 48px 58px;
  font-family:'Outfit',sans-serif;
}

.proof-bg-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(95px);
  pointer-events:none;
}

.proof-bg-glow-left{
  width:620px;
  height:620px;
  left:10%;
  top:20%;
  background:radial-gradient(circle,
    rgba(255,145,33,.34) 0%,
    rgba(255,125,20,.18) 30%,
    rgba(255,90,0,.05) 54%,
    transparent 74%);
}

.proof-bg-glow-right{
  width:540px;
  height:540px;
  right:8%;
  bottom:8%;
  background:radial-gradient(circle,
    rgba(184,28,0,.42) 0%,
    rgba(255,92,0,.14) 34%,
    transparent 72%);
}

.proof-curve{
  position:absolute;
  left:-6%;
  bottom:-14%;
  width:70%;
  height:58%;
  border:1px solid rgba(255,255,255,.06);
  border-radius:50%;
  transform:rotate(-8deg);
  pointer-events:none;
}

.proof-layout{
  position:relative;
  z-index:2;
  min-height:calc(100vh - 132px);
  display:grid;
  grid-template-columns:.9fr 1fr .82fr;
  gap:34px;
  align-items:center;
}

.proof-left{
  align-self:center;
}

.proof-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 18px;
  border:1.5px solid rgba(255,255,255,.58);
  border-radius:999px;
  color:#d9d9d9;
  font-size:18px;
  font-weight:300;
  margin-bottom:28px;
}

.proof-title{
  margin:0;
  color:#f6f6f6;
  font-size:clamp(66px,5.8vw,118px);
  line-height:.92;
  letter-spacing:-3px;
  font-weight:300;
}

.proof-center{
  display:flex;
  align-items:center;
  justify-content:center;
}

.proof-card-stack{
  position:relative;
  width:min(30vw, 520px);
  min-width:360px;
  aspect-ratio:0.72 / 1;
}

.proof-card{
  position:absolute;
  inset:0;
  border-radius:28px;
}

.proof-card-back-2{
  background:rgba(187,200,205,.22);
  transform:translateY(-28px) scale(.96);
  opacity:.38;
  animation:proofFloatBack2 5.8s ease-in-out infinite;
}

.proof-card-back-1{
  background:rgba(197,205,208,.22);
  transform:translateY(-14px) scale(.98);
  opacity:.44;
  animation:proofFloatBack1 5.8s ease-in-out infinite;
}

.proof-card-front{
  background:#9eced1;
  color:#f7f7f2;
  padding:34px 34px 30px;
  box-shadow:0 28px 60px rgba(0,0,0,.25);
  animation:proofFloatFront 5.8s ease-in-out infinite;
}

.proof-card-topmark{
  font-size:48px;
  line-height:1;
  font-weight:700;
  margin-bottom:34px;
}

.proof-card-title{
  margin:0 0 20px;
  color:#268b92;
  font-size:clamp(40px,3.3vw,64px);
  line-height:.98;
  letter-spacing:-1.5px;
  font-weight:700;
}

.proof-card-title br:nth-child(2){
  display:block;
}

.proof-card-author{
  color:#f3f0ea;
  font-size:18px;
  font-weight:600;
  margin-bottom:auto;
}

.proof-card-front{
  display:flex;
  flex-direction:column;
}

.proof-card-footer{
  margin-top:auto;
  display:grid;
  grid-template-columns:1fr 20px;
  gap:16px;
  align-items:end;
  margin-bottom:22px;
}

.proof-card-copy{
  color:rgba(255,255,255,.68);
  font-size:11px;
  line-height:1.35;
  max-width:180px;
  margin-left:auto;
}

.proof-card-side{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  color:rgba(255,255,255,.65);
  font-size:14px;
  letter-spacing:.6px;
  text-align:right;
}

.proof-card-bottom{
  display:flex;
  gap:4px;
  align-items:center;
  color:#f2efe8;
  font-size:18px;
  font-weight:600;
}

.proof-card-bottom span:last-child{
  color:#31828a;
}

.proof-right{
  align-self:end;
  padding-bottom:74px;
}

.proof-right p{
  margin:0;
  max-width:420px;
  color:#87837f;
  font-size:clamp(24px,1.7vw,34px);
  line-height:1.08;
  font-weight:300;
}

.proof-right p span{
  color:#b0aaa6;
}

.proof-right p strong{
  color:#f2f2f2;
  font-weight:400;
}

@keyframes proofFloatFront{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-10px) rotate(.2deg); }
}

@keyframes proofFloatBack1{
  0%,100%{ transform:translateY(-14px) scale(.98); }
  50%{ transform:translateY(-22px) scale(.98); }
}

@keyframes proofFloatBack2{
  0%,100%{ transform:translateY(-28px) scale(.96); }
  50%{ transform:translateY(-36px) scale(.96); }
}

@media (max-width: 1200px){
  .proof-layout{
    grid-template-columns:1fr;
    gap:30px;
    text-align:left;
  }

  .proof-center{
    order:2;
  }

  .proof-left{
    order:1;
  }

  .proof-right{
    order:3;
    padding-bottom:0;
  }

  .proof-card-stack{
    width:min(62vw, 500px);
  }
}

@media (max-width: 768px){
  .proof-section{
    padding:34px 16px 44px;
  }

  .proof-pill{
    min-height:40px;
    font-size:14px;
    padding:0 14px;
    margin-bottom:18px;
  }

  .proof-title{
    font-size:clamp(42px,12vw,72px);
    letter-spacing:-2px;
  }

  .proof-card-stack{
    min-width:0;
    width:88vw;
    max-width:420px;
  }

  .proof-card-front{
    padding:22px 22px 18px;
    border-radius:22px;
  }

  .proof-card,
  .proof-card-back-1,
  .proof-card-back-2{
    border-radius:22px;
  }

  .proof-card-topmark{
    font-size:34px;
    margin-bottom:22px;
  }

  .proof-card-title{
    font-size:clamp(34px,9vw,54px);
  }

  .proof-right p{
    font-size:18px;
    line-height:1.18;
  }
}
/* ===== PHILOSOPHY SECTION ===== */
.philosophy-section{
  position:relative;
  min-height:100vh;
  background:#efefed;
  overflow:hidden;
  padding:120px 48px 90px;
  font-family:'Outfit',sans-serif;
}

.philosophy-glow{
  position:absolute;
  left:15%;
  bottom:16%;
  width:860px;
  height:360px;
  background:radial-gradient(ellipse at center,
    rgba(255,126,20,.82) 0%,
    rgba(255,163,54,.46) 28%,
    rgba(255,191,120,.20) 52%,
    rgba(255,214,170,.08) 68%,
    transparent 82%);
  filter:blur(70px);
  transform:rotate(-12deg);
  pointer-events:none;
}

.philosophy-pill{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 18px;
  border:1.5px solid #66727d;
  border-radius:999px;
  color:#69727a;
  font-size:18px;
  font-weight:300;
  margin-bottom:34px;
}

.philosophy-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:40px;
  align-items:start;
}

.philosophy-left{
  max-width:1050px;
}

.philosophy-title{
  margin:0;
  color:#101822;
  font-size:clamp(72px,6.8vw,132px);
  line-height:.94;
  letter-spacing:-3.6px;
  font-weight:300;
}

.philosophy-title span{
  font-weight:600;
}

.philosophy-right{
  align-self:end;
  justify-self:end;
  max-width:520px;
  padding-top:360px;
}

.philosophy-right p{
  margin:0;
  color:#202830;
  font-size:clamp(22px,1.65vw,34px);
  line-height:1.1;
  font-weight:300;
}

.philosophy-right p span{
  color:#979da3;
}

@media (max-width: 1200px){
  .philosophy-section{
    padding:90px 28px 70px;
  }

  .philosophy-grid{
    grid-template-columns:1fr;
  }

  .philosophy-right{
    justify-self:start;
    padding-top:80px;
    max-width:700px;
  }

  .philosophy-glow{
    left:10%;
    width:700px;
    height:300px;
  }
}

@media (max-width: 768px){
  .philosophy-section{
    min-height:auto;
    padding:60px 16px 50px;
  }

  .philosophy-pill{
    min-height:40px;
    padding:0 14px;
    font-size:14px;
    margin-bottom:20px;
  }

  .philosophy-title{
    font-size:clamp(42px,11vw,68px);
    line-height:.98;
    letter-spacing:-2px;
  }

  .philosophy-right{
    padding-top:40px;
  }

  .philosophy-right p{
    font-size:18px;
    line-height:1.18;
  }

  .philosophy-glow{
    left:6%;
    bottom:18%;
    width:420px;
    height:220px;
    filter:blur(46px);
  }
}
/* ===== TEAM SECTION ===== */
.team-showcase-section{
  background:#efefed;
  padding:34px 28px 46px;
  overflow:hidden;
  font-family:'Outfit',sans-serif;
}

.team-showcase-top{
  text-align:center;
  margin-bottom:34px;
}

.team-showcase-title{
  margin:0 0 24px;
  color:#111822;
  font-size:clamp(58px,6.2vw,122px);
  line-height:.92;
  letter-spacing:-3px;
  font-weight:300;
}

.team-showcase-title span{
  font-weight:600;
}

.team-showcase-filters{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}

.team-filter{
  border:none;
  background:none;
  color:#8f969d;
  font-family:'Outfit',sans-serif;
  font-size:18px;
  font-weight:300;
  cursor:pointer;
  padding:0;
}

.team-filter.active{
  color:#1a212b;
}

.team-filter-line{
  width:28px;
  height:2px;
  background:#737b84;
  border-radius:10px;
}

.team-showcase-row{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:36px;
  padding-top:22px;
}

.team-card{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  flex:0 0 auto;
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s ease, transform .8s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.04);
}

.team-card.show{
  opacity:1;
  transform:translateY(0) rotate(0deg);
}

.team-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.small-card{
  width:265px;
  height:430px;
  margin-top:58px;
}

.medium-card{
  width:250px;
  height:515px;
  margin-top:24px;
}

.main-card{
  width:440px;
  height:560px;
}

.tilt-left{
  transform:translateY(40px) rotate(-7deg);
}

.tilt-right{
  transform:translateY(40px) rotate(7deg);
}

.team-card-overlay{
  position:absolute;
  left:24px;
  right:24px;
  bottom:20px;
  z-index:2;
}

.team-card-overlay h3{
  margin:0 0 6px;
  color:#f5f5f5;
  font-size:28px;
  line-height:1;
  font-weight:400;
  letter-spacing:-1px;
}

.team-card-overlay p{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:18px;
  line-height:1.1;
  font-weight:300;
}

.main-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.56) 0%, rgba(0,0,0,0) 34%);
  pointer-events:none;
}

@media (max-width: 1400px){
  .team-showcase-row{
    gap:24px;
  }

  .small-card{
    width:220px;
    height:380px;
  }

  .medium-card{
    width:220px;
    height:460px;
  }

  .main-card{
    width:370px;
    height:520px;
  }
}

@media (max-width: 1100px){
  .team-showcase-row{
    flex-wrap:wrap;
    gap:20px;
  }

  .small-card,
  .medium-card,
  .main-card{
    margin-top:0;
  }

  .small-card,
  .medium-card{
    width:calc(50% - 10px);
    max-width:280px;
    height:420px;
  }

  .main-card{
    width:min(100%, 420px);
    height:540px;
  }
}

@media (max-width: 768px){
  .team-showcase-section{
    padding:28px 16px 38px;
  }

  .team-showcase-title{
    font-size:clamp(42px,11vw,68px);
    letter-spacing:-2px;
  }

  .team-showcase-filters{
    gap:8px;
  }

  .team-filter{
    font-size:14px;
  }

  .team-filter-line{
    width:18px;
  }

  .team-showcase-row{
    gap:16px;
  }

  .small-card,
  .medium-card,
  .main-card{
    width:100%;
    max-width:none;
    height:420px;
  }

  .team-card{
    border-radius:20px;
  }

  .team-card-overlay h3{
    font-size:24px;
  }

  .team-card-overlay p{
    font-size:16px;
  }
}
/* ===== SERVICES HERO SECTION ===== */
.services-hero-section{
  position:relative;
  min-height:100vh;
  background:#efefed;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:70px 20px;
}

.services-hero-circle{
  position:absolute;
  width:min(82vw, 1120px);
  aspect-ratio:1 / 1;
  left:50%;
  top:54%;
  transform:translate(-50%, -50%);
  border-radius:50%;
  border:1px solid rgba(245,238,228,.95);
  background:radial-gradient(circle at center,
    rgba(245,240,234,.52) 0%,
    rgba(239,239,237,.06) 72%);
  z-index:1;
}

.services-hero-glow{
  position:absolute;
  width:520px;
  height:520px;
  left:50%;
  top:25%;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,153,48,.78) 0%,
    rgba(255,171,84,.42) 30%,
    rgba(255,192,122,.18) 54%,
    rgba(255,210,158,.06) 68%,
    transparent 80%);
  filter:blur(78px);
  z-index:2;
}

.services-hero-content{
  position:relative;
  z-index:3;
  width:100%;
  max-width:1450px;
  text-align:center;
}

.services-hero-title{
  margin:0 0 24px;
  font-family:'Outfit', sans-serif;
  font-size:clamp(64px, 7.4vw, 136px);
  line-height:.92;
  letter-spacing:-4px;
  font-weight:300;
  color:#101822;
}

.services-hero-title span{
  font-weight:600;
}

.services-hero-text{
  max-width:1050px;
  margin:0 auto 42px;
  font-family:'Outfit', sans-serif;
  font-size:clamp(18px, 1.25vw, 26px);
  line-height:1.08;
  font-weight:300;
  color:#5f6670;
}

.services-hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:60px;
  padding:0 34px;
  border-radius:999px;
  background:linear-gradient(180deg, #071321 0%, #04101b 100%);
  color:#fff;
  text-decoration:none;
  font-family:'Outfit', sans-serif;
  font-size:18px;
  letter-spacing:3px;
  box-shadow:0 18px 34px rgba(8,19,33,.18);
}

.services-hero-btn span{
  color:#12637E;
  font-size:26px;
  line-height:1;
}

@media (max-width: 1200px){
  .services-hero-circle{
    width:94vw;
  }

  .services-hero-glow{
    width:430px;
    height:430px;
  }

  .services-hero-title{
    letter-spacing:-2.6px;
  }
}

@media (max-width: 768px){
  .services-hero-section{
    min-height:82vh;
    padding:50px 16px;
  }

  .services-hero-circle{
    width:155vw;
    top:52%;
  }

  .services-hero-glow{
    width:260px;
    height:260px;
    top:22%;
    filter:blur(44px);
  }

  .services-hero-title{
    font-size:clamp(42px, 11vw, 74px);
    line-height:.96;
    letter-spacing:-2px;
    margin-bottom:18px;
  }

  .services-hero-text{
    max-width:95%;
    font-size:16px;
    line-height:1.18;
    margin-bottom:28px;
  }

  .services-hero-btn{
    min-height:52px;
    padding:0 24px;
    font-size:16px;
    letter-spacing:2px;
  }
}
/* ===== SERVICES EXPERTISE SECTION ===== */
.services-expertise-section{
  background:#efefed;
  padding:18px 34px 28px;
  overflow:hidden;
  font-family:'Outfit', sans-serif;
}

.services-expertise-top{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:20px;
  align-items:start;
  margin-bottom:22px;
}

.services-expertise-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 16px;
  border:1.4px solid #72808a;
  border-radius:999px;
  color:#63707a;
  font-size:16px;
  font-weight:300;
  margin-bottom:12px;
}

.services-expertise-title{
  margin:0;
  color:#111822;
  font-size:clamp(58px, 6.6vw, 122px);
  line-height:.9;
  letter-spacing:-3px;
  font-weight:300;
}

.services-expertise-title span{
  font-weight:600;
}

.services-expertise-top-right{
  display:flex;
  justify-content:flex-end;
  padding-top:8px;
}

.services-expertise-top-right p{
  margin:0;
  max-width:520px;
  color:#1e2731;
  font-size:clamp(20px, 1.45vw, 34px);
  line-height:1.1;
  font-weight:300;
}

.services-expertise-top-right p span{
  color:#97a0a8;
}

.services-expertise-board{
  position:relative;
  border-radius:40px;
  background:linear-gradient(180deg, rgba(247,241,233,.84) 0%, rgba(244,238,231,.68) 100%);
  padding:38px 38px 36px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:34px;
  overflow:hidden;
}

.services-expertise-glow{
  position:absolute;
  left:28%;
  bottom:-140px;
  width:760px;
  height:340px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(255,129,22,.7) 0%,
    rgba(255,167,77,.34) 32%,
    rgba(255,208,154,.08) 58%,
    transparent 78%);
  filter:blur(72px);
  pointer-events:none;
}

.services-expertise-left,
.services-expertise-right{
  position:relative;
  z-index:2;
}

.services-expertise-left{
  display:flex;
  flex-direction:column;
  gap:22px;
  padding-top:12px;
}

.service-item{
  display:grid;
  grid-template-columns:56px 1fr auto;
  align-items:center;
  gap:20px;
  color:#121a24;
}

.service-item-icon{
  width:54px;
  height:54px;
  border-radius:50%;
  background:#dddddd;
  color:#8b9196;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  flex:0 0 auto;
}

.service-item-copy h3{
  margin:0;
  color:#101822;
  font-size:clamp(28px, 2.6vw, 58px);
  line-height:1;
  letter-spacing:-1.4px;
  font-weight:300;
}

.service-item-copy p{
  margin:14px 0 0;
  color:#77808a;
  font-size:clamp(18px, 1.2vw, 24px);
  line-height:1.15;
  font-weight:300;
  max-width:330px;
}

.service-item-arrow{
  width:54px;
  height:54px;
  border-radius:50%;
  background:#12637E;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  flex:0 0 auto;
}

.service-item.active{
  background:rgba(255,255,255,.34);
  border:1.4px solid #efb16f;
  border-radius:34px;
  padding:28px 24px 26px 22px;
  box-shadow:0 8px 24px rgba(255,255,255,.18);
}

.services-expertise-right{
  display:flex;
  align-items:center;
  justify-content:center;
}

.services-ui-visual{
  position:relative;
  width:100%;
  max-width:660px;
  min-height:520px;
  border-radius:34px;
  background:rgba(255,255,255,.28);
  overflow:hidden;
}

.services-ui-window{
  position:absolute;
  top:66px;
  left:88px;
  right:88px;
  bottom:84px;
  border:2px solid rgba(218,218,218,.7);
  border-radius:20px;
}

.services-ui-browser-dots{
  position:absolute;
  top:82px;
  left:120px;
  display:flex;
  gap:10px;
}

.services-ui-browser-dots span{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#dddddd;
}

.services-ui-card{
  position:absolute;
  border:2px solid rgba(216,216,216,.72);
  border-radius:20px;
  background:rgba(255,255,255,.12);
}

.services-ui-phone{
  left:132px;
  top:152px;
  width:200px;
  height:270px;
  border-radius:26px;
}

.services-ui-top-card{
  right:116px;
  top:154px;
  width:192px;
  height:122px;
}

.services-ui-bottom-card{
  right:116px;
  top:294px;
  width:192px;
  height:146px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.services-ui-mini-line{
  height:8px;
  border-radius:999px;
  background:#dddddd;
}

.services-ui-mini-line.short{
  width:48px;
}

.services-ui-mini-line.long{
  width:96px;
}

.services-ui-mini-line.orange{
  background:#ff9b26;
}

.services-ui-phone .services-ui-mini-line{
  margin-left:28px;
  margin-top:72px;
}

.services-ui-phone .services-ui-mini-line.long{
  margin-top:18px;
}

.services-ui-top-card .services-ui-mini-line{
  margin-left:28px;
  margin-top:34px;
}

.services-ui-top-card .services-ui-mini-line.long{
  margin-top:12px;
}

.services-ui-button{
  position:absolute;
  left:34px;
  right:34px;
  bottom:28px;
  height:34px;
  border-radius:999px;
  background:#12637E;
  box-shadow:0 8px 18px rgba(255,138,0,.24);
}

.services-ui-button::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:42px;
  height:6px;
  border-radius:999px;
  background:#ffe8cf;
}

.services-ui-plus{
  color:#ff6f0f;
  font-size:28px;
  line-height:1;
}

.services-ui-cursor{
  position:absolute;
  left:286px;
  bottom:154px;
  width:0;
  height:0;
  border-left:18px solid #2e3640;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  transform:rotate(-30deg);
}

.services-ui-dot{
  position:absolute;
  border-radius:50%;
  background:#d6d6d6;
}

.dot-1{
  top:160px;
  left:76px;
  width:4px;
  height:4px;
}

.dot-2{
  top:254px;
  left:244px;
  width:10px;
  height:10px;
}

.dot-3{
  top:188px;
  right:186px;
  width:4px;
  height:4px;
}

.dot-4{
  top:276px;
  right:74px;
  width:5px;
  height:5px;
}

.services-ui-wire{
  position:absolute;
  bottom:126px;
  width:84px;
  height:54px;
  border-bottom:2px solid rgba(205,205,205,.7);
}

.services-ui-wire-left{
  left:0;
  border-right:2px solid rgba(205,205,205,.7);
  border-bottom-right-radius:26px;
}

.services-ui-wire-right{
  right:0;
  border-left:2px solid rgba(205,205,205,.7);
  border-bottom-left-radius:26px;
}

@media (max-width: 1200px){
  .services-expertise-top{
    grid-template-columns:1fr;
  }

  .services-expertise-top-right{
    justify-content:flex-start;
  }

  .services-expertise-board{
    grid-template-columns:1fr;
  }
}

@media (max-width: 768px){
  .services-expertise-section{
    padding:20px 16px 24px;
  }

  .services-expertise-pill{
    min-height:34px;
    padding:0 12px;
    font-size:14px;
  }

  .services-expertise-title{
    font-size:clamp(42px, 11vw, 72px);
    letter-spacing:-2px;
  }

  .services-expertise-top-right p{
    font-size:16px;
    line-height:1.18;
  }

  .services-expertise-board{
    padding:18px;
    border-radius:24px;
  }

  .service-item{
    grid-template-columns:48px 1fr auto;
    gap:14px;
  }

  .service-item-icon,
  .service-item-arrow{
    width:46px;
    height:46px;
    font-size:22px;
  }

  .service-item-copy h3{
    font-size:22px;
  }

  .service-item-copy p{
    font-size:15px;
    margin-top:8px;
  }

  .service-item.active{
    padding:18px 16px;
    border-radius:22px;
  }

  .services-ui-visual{
    min-height:360px;
    border-radius:22px;
  }

  .services-ui-window{
    top:42px;
    left:34px;
    right:34px;
    bottom:52px;
  }

  .services-ui-browser-dots{
    top:56px;
    left:58px;
  }

  .services-ui-phone{
    left:58px;
    top:112px;
    width:142px;
    height:188px;
  }

  .services-ui-top-card{
    right:48px;
    top:112px;
    width:124px;
    height:82px;
  }

  .services-ui-bottom-card{
    right:48px;
    top:214px;
    width:124px;
    height:92px;
  }

  .services-ui-phone .services-ui-mini-line,
  .services-ui-top-card .services-ui-mini-line{
    margin-left:20px;
  }

  .services-ui-phone .services-ui-mini-line{
    margin-top:46px;
  }

  .services-ui-top-card .services-ui-mini-line{
    margin-top:22px;
  }

  .services-ui-button{
    left:22px;
    right:22px;
    bottom:18px;
    height:26px;
  }

  .services-ui-cursor{
    left:180px;
    bottom:108px;
    border-left-width:14px;
    border-top-width:10px;
    border-bottom-width:10px;
  }
}
/* ===== DELIVERY PHILOSOPHY SECTION ===== */
.delivery-philosophy-section{
  position:relative;
  min-height:100vh;
  background:#efefed;
  overflow:hidden;
  padding:170px 52px 90px;
  font-family:'Outfit',sans-serif;
}

.delivery-glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.delivery-glow-top{
  top:-90px;
  right:-120px;
  width:900px;
  height:300px;
  background:radial-gradient(ellipse at center,
    rgba(255,126,20,.82) 0%,
    rgba(255,164,61,.46) 28%,
    rgba(255,198,134,.18) 52%,
    rgba(255,220,182,.06) 68%,
    transparent 82%);
  filter:blur(62px);
  transform:rotate(22deg);
}

.delivery-glow-bottom{
  left:-120px;
  bottom:-130px;
  width:560px;
  height:220px;
  background:radial-gradient(ellipse at center,
    rgba(255,169,82,.34) 0%,
    rgba(255,206,160,.12) 46%,
    transparent 76%);
  filter:blur(58px);
}

.delivery-pill{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 16px;
  border:1.4px solid #6b7882;
  border-radius:999px;
  color:#69737c;
  font-size:16px;
  font-weight:300;
  margin-bottom:26px;
}

.delivery-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:40px;
  min-height:calc(100vh - 286px);
}

.delivery-left{
  align-self:start;
  max-width:1180px;
}

.delivery-title{
  margin:0;
  color:#101822;
  font-size:clamp(72px, 7vw, 138px);
  line-height:.94;
  letter-spacing:-3.6px;
  font-weight:300;
}

.delivery-title span{
  font-weight:600;
}

.delivery-right{
  align-self:end;
  justify-self:end;
  max-width:520px;
  padding-bottom:34px;
}

.delivery-right p{
  margin:0;
  color:#9da3a8;
  font-size:clamp(22px, 1.45vw, 32px);
  line-height:1.08;
  font-weight:300;
}

@media (max-width: 1200px){
  .delivery-philosophy-section{
    padding:120px 28px 70px;
  }

  .delivery-grid{
    grid-template-columns:1fr;
    min-height:auto;
    gap:70px;
  }

  .delivery-right{
    justify-self:start;
    max-width:700px;
    padding-bottom:0;
  }
}

@media (max-width: 768px){
  .delivery-philosophy-section{
    min-height:auto;
    padding:70px 16px 54px;
  }

  .delivery-pill{
    min-height:36px;
    padding:0 12px;
    font-size:14px;
    margin-bottom:18px;
  }

  .delivery-title{
    font-size:clamp(42px, 11vw, 72px);
    line-height:.98;
    letter-spacing:-2px;
  }

  .delivery-right p{
    font-size:18px;
    line-height:1.16;
  }

  .delivery-glow-top{
    width:520px;
    height:180px;
    right:-120px;
    filter:blur(42px);
  }

  .delivery-glow-bottom{
    width:320px;
    height:150px;
    left:-80px;
    filter:blur(34px);
  }
}
/* ===== OUTCOMES SECTION ===== */
.outcomes-section{
  position:relative;
  min-height:100vh;
  background:#efefed;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:120px 24px 80px;
  font-family:'Outfit', sans-serif;
}

.outcomes-glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(72px);
}

.outcomes-glow-left{
  width:320px;
  height:100%;
  left:-70px;
  top:0;
  background:linear-gradient(180deg,
    rgba(246,221,192,.9) 0%,
    rgba(246,221,192,.38) 34%,
    rgba(246,221,192,0) 72%);
  filter:blur(38px);
}

.outcomes-glow-right{
  width:620px;
  height:320px;
  right:-120px;
  bottom:-40px;
  background:radial-gradient(ellipse at center,
    rgba(255,132,24,.82) 0%,
    rgba(255,171,74,.42) 30%,
    rgba(255,206,153,.14) 54%,
    transparent 76%);
  transform:rotate(-18deg);
}

.outcomes-content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1450px;
  text-align:center;
}

.outcomes-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border:1.4px solid #6f7c86;
  border-radius:999px;
  color:#67727c;
  font-size:16px;
  font-weight:300;
  margin-bottom:26px;
}

.outcomes-title{
  margin:0 0 26px;
  color:#111822;
  font-size:clamp(64px, 7vw, 136px);
  line-height:.94;
  letter-spacing:-3.6px;
  font-weight:300;
}

.outcomes-title span{
  font-weight:600;
}

.outcomes-text{
  margin:0;
  color:#202932;
  font-size:clamp(22px, 1.6vw, 34px);
  line-height:1.08;
  font-weight:300;
}

.outcomes-text span{
  color:#9aa1a8;
}

@media (max-width: 1200px){
  .outcomes-section{
    padding:90px 20px 70px;
  }

  .outcomes-title{
    letter-spacing:-2.4px;
  }
}

@media (max-width: 768px){
  .outcomes-section{
    min-height:auto;
    padding:70px 16px 52px;
  }

  .outcomes-pill{
    min-height:36px;
    padding:0 14px;
    font-size:14px;
    margin-bottom:18px;
  }

  .outcomes-title{
    font-size:clamp(42px, 11vw, 74px);
    line-height:.98;
    letter-spacing:-2px;
    margin-bottom:18px;
  }

  .outcomes-text{
    font-size:18px;
    line-height:1.16;
  }

  .outcomes-glow-left{
    width:180px;
    left:-50px;
  }

  .outcomes-glow-right{
    width:360px;
    height:220px;
    right:-80px;
    bottom:-20px;
    filter:blur(44px);
  }
}
/* ===== LET'S TALK SECTION ===== */
.talk-page-mdx{
  min-height:100vh;
  background:#efe7dc;
  padding:14px;
  font-family:'Outfit', sans-serif;
}

.talk-page-shell{
  min-height:calc(100vh - 28px);
  background:#f3efea;
  border-radius:28px;
  overflow:hidden;
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
}

.talk-page-left{
  background:#f2ebe2;
  padding:96px 62px 42px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.talk-page-kicker{
  display:flex;
  align-items:center;
  gap:14px;
  color:#12637E;
  font-size:18px;
  font-weight:400;
  margin-bottom:28px;
}

.talk-page-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#12637E;
}

.talk-page-title{
  margin:0;
  color:#111822;
  font-size:clamp(58px, 5vw, 92px);
  line-height:.94;
  letter-spacing:-2.7px;
  font-weight:300;
}

.talk-page-line{
  width:70px;
  height:2px;
  background:#89949d;
  margin:46px 0 34px;
}

.talk-page-email{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:#70808b;
  font-size:18px;
  text-decoration:underline;
  text-underline-offset:6px;
}

.talk-page-mail-icon{
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.talk-page-mail-icon svg{
  width:20px;
  height:20px;
}

.talk-page-contact-copy{
  margin-top:28px;
  max-width:520px;
  color:#6f7b85;
  font-size:16px;
  line-height:1.45;
  font-weight:300;
}

.talk-page-contact-copy p{
  margin:0 0 16px;
}

.talk-page-contact-copy strong{
  color:#111822;
  font-weight:500;
}

.talk-page-socials{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:50px;
}

.talk-page-socials a{
  width:38px;
  height:38px;
  border-radius:50%;
  border:1.5px solid #87919a;
  color:#74808a;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:18px;
}

.talk-page-right{
  padding:82px 72px 70px 62px;
  background:
    radial-gradient(circle at 60% 72%, rgba(245,193,136,.18), transparent 28%),
    linear-gradient(180deg, #f3efea 0%, #f3efea 100%);
}

.talk-page-heading{
  margin:0 0 44px;
  color:#111822;
  font-size:clamp(52px, 4vw, 72px);
  line-height:1;
  letter-spacing:-2px;
  font-weight:300;
}

.talk-page-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px 20px;
  margin-bottom:34px;
}

.talk-field{
  position:relative;
}

.talk-field input,
.talk-field textarea{
  width:100%;
  border:none;
  border-bottom:1.5px solid #2d343d;
  background:transparent;
  outline:none;
  color:#111822;
  font-family:'Outfit', sans-serif;
  font-size:22px;
  font-weight:300;
  padding:16px 0 12px;
  border-radius:0;
}

.talk-field textarea{
  min-height:120px;
  resize:none;
  padding-top:26px;
}

.talk-field label{
  position:absolute;
  left:0;
  top:6px;
  color:#9ca3a8;
  font-size:18px;
  font-weight:300;
  pointer-events:none;
  transition:.2s ease;
}

.talk-field input:focus + label,
.talk-field input:not(:placeholder-shown) + label,
.talk-field textarea:focus + label,
.talk-field textarea:not(:placeholder-shown) + label{
  top:-10px;
  font-size:14px;
  color:#7d858d;
}

.talk-interest-wrap{
  margin:12px 0 28px;
}

.talk-interest-label{
  margin:0 0 14px;
  color:#9ca3a8;
  font-size:18px;
  font-weight:300;
}

.talk-interest-options{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.talk-interest-chip{
  position:relative;
  display:inline-flex;
  cursor:pointer;
}

.talk-interest-chip input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.talk-interest-chip span{
  min-height:42px;
  padding:0 24px;
  border-radius:999px;
  border:1.4px solid #5d6570;
  color:#2a3139;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:300;
  background:transparent;
  transition:.2s ease;
}

.talk-interest-chip.active span,
.talk-interest-chip input:checked + span{
  background:#071321;
  border-color:#071321;
  color:#fff;
  box-shadow:0 10px 18px rgba(7,19,33,.16);
}

.talk-field-message{
  margin:18px 0 42px;
}

.talk-send-btn{
  width:100%;
  min-height:58px;
  border:none;
  border-radius:999px;
  background:linear-gradient(180deg,#071321 0%, #04101b 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-family:'Outfit', sans-serif;
  font-size:18px;
  letter-spacing:2px;
  cursor:pointer;
  box-shadow:0 16px 34px rgba(7,19,33,.18);
}

.talk-send-btn .arrow{
  color:#12637E;
  font-size:28px;
  line-height:1;
}

@media (max-width: 1200px){
  .talk-page-shell{
    grid-template-columns:1fr;
  }

  .talk-page-left{
    padding:56px 28px 34px;
  }

  .talk-page-right{
    padding:48px 28px 52px;
  }
}

@media (max-width: 768px){
  .talk-page-mdx{
    padding:8px;
  }

  .talk-page-shell{
    min-height:calc(100vh - 16px);
    border-radius:20px;
  }

  .talk-page-title{
    font-size:clamp(42px, 11vw, 64px);
  }

  .talk-page-heading{
    font-size:clamp(40px, 10vw, 56px);
  }

  .talk-page-grid{
    grid-template-columns:1fr;
    gap:26px;
  }

  .talk-field input,
  .talk-field textarea{
    font-size:20px;
  }

  .talk-field label,
  .talk-interest-label{
    font-size:16px;
  }

  .talk-interest-chip span{
    min-height:40px;
    padding:0 18px;
    font-size:14px;
  }

  .talk-page-socials{
    flex-wrap:wrap;
  }
}
/* ===== UI/UX HERO SECTION ===== */
.uiux-hero-section{
  background:#efefed;
  min-height:280px;
  padding:30px 40px 20px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
  font-family:'Outfit', sans-serif;
}

.uiux-hero-inner{
  width:100%;
  max-width:1680px;
}

.uiux-hero-kicker{
  margin:0 0 18px;
  color:#12637E;
  font-size:18px;
  line-height:1;
  font-weight:400;
}

.uiux-hero-title{
  margin:0;
  color:#061423;
  font-size:clamp(80px, 10vw, 140px);
  line-height:.88;
  letter-spacing:-8px;
  font-weight:500;
}

.uiux-hero-text{
  margin:34px 0 0;
  color:#0f1822;
  font-size:clamp(24px, 1.9vw, 38px);
  line-height:1.12;
  font-weight:300;
}

.uiux-hero-text span{
  color:#8f969d;
}

@media (max-width: 1200px){
  .uiux-hero-section{
    min-height:400px;
    padding:46px 24px 34px;
  }

  .uiux-hero-title{
    letter-spacing:-4px;
  }
}

@media (max-width: 768px){
  .uiux-hero-section{
    min-height:280px;
    padding:34px 16px 24px;
  }

  .uiux-hero-kicker{
    font-size:14px;
    margin-bottom:12px;
  }

  .uiux-hero-title{
    font-size:clamp(54px, 15vw, 92px);
    letter-spacing:-2px;
  }

  .uiux-hero-text{
    margin-top:18px;
    font-size:16px;
    line-height:1.2;
  }
}
/* ===== UI/UX PURPOSE SECTION ===== */
.uiux-purpose-section{
  position:relative;
  min-height:100vh;
  background:#efefed;
  overflow:hidden;
  padding:48px 46px 58px;
  font-family:'Outfit', sans-serif;
}

.uiux-purpose-glow{
  position:absolute;
  left:2%;
  bottom:-6%;
  width:980px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(255,128,22,.82) 0%,
    rgba(255,167,73,.44) 28%,
    rgba(255,203,138,.16) 52%,
    rgba(255,225,188,.06) 68%,
    transparent 80%);
  filter:blur(72px);
  transform:rotate(18deg);
  pointer-events:none;
}

.uiux-purpose-pill{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border:1.4px solid #7a858d;
  border-radius:999px;
  color:#7f8990;
  font-size:16px;
  font-weight:300;
  margin-bottom:28px;
}

.uiux-purpose-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:38px;
  min-height:calc(100vh - 160px);
}

.uiux-purpose-left{
  align-self:start;
  max-width:1180px;
}

.uiux-purpose-title{
  margin:0;
  color:#091321;
  font-size:clamp(72px, 7vw, 142px);
  line-height:.92;
  letter-spacing:-4px;
  font-weight:300;
}

.uiux-purpose-title span{
  font-weight:600;
}

.uiux-purpose-right{
  align-self:end;
  justify-self:end;
  max-width:430px;
  padding-bottom:120px;
}

.uiux-purpose-right p{
  margin:0;
  color:#2a3138;
  font-size:clamp(22px, 1.38vw, 30px);
  line-height:1.12;
  font-weight:300;
}

@media (max-width: 1200px){
  .uiux-purpose-section{
    padding:38px 24px 46px;
  }

  .uiux-purpose-grid{
    grid-template-columns:1fr;
    min-height:auto;
    gap:54px;
  }

  .uiux-purpose-right{
    justify-self:start;
    max-width:700px;
    padding-bottom:0;
  }

  .uiux-purpose-title{
    letter-spacing:-2.5px;
  }
}

@media (max-width: 768px){
  .uiux-purpose-section{
    min-height:auto;
    padding:28px 16px 34px;
  }

  .uiux-purpose-pill{
    min-height:36px;
    padding:0 12px;
    font-size:14px;
    margin-bottom:18px;
  }

  .uiux-purpose-title{
    font-size:clamp(44px, 11vw, 74px);
    line-height:.98;
    letter-spacing:-2px;
  }

  .uiux-purpose-right p{
    font-size:18px;
    line-height:1.18;
  }

  .uiux-purpose-glow{
    width:520px;
    height:240px;
    left:-8%;
    bottom:-4%;
    filter:blur(42px);
  }
}
/* ===== OUR PROCESS SECTION ===== */
.uiux-process-section{
  position:relative;
  background:#efefed;
  padding:18px 54px 64px;
  overflow:hidden;
  font-family:'Outfit', sans-serif;
}

.uiux-process-top{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:30px;
  align-items:start;
  margin-bottom:46px;
}

.uiux-process-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border:1.4px solid #7a858d;
  border-radius:999px;
  color:#7a858d;
  font-size:16px;
  font-weight:300;
  margin-bottom:24px;
}

.uiux-process-title{
  margin:0;
  color:#091321;
  font-size:clamp(64px, 6.3vw, 118px);
  line-height:.92;
  letter-spacing:-3px;
  font-weight:300;
}

.uiux-process-title span{
  font-weight:600;
}

.uiux-process-right{
  display:flex;
  justify-content:flex-end;
  padding-top:18px;
}

.uiux-process-right p{
  margin:0;
  max-width:520px;
  color:#1f2730;
  font-size:clamp(22px, 1.45vw, 32px);
  line-height:1.12;
  font-weight:300;
}

.uiux-process-right p span{
  color:#9aa1a8;
  display:block;
}

.uiux-process-cards{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}

.uiux-process-card{
  position:relative;
  min-height:420px;
  border:1.5px solid #efb06e;
  border-radius:30px;
  background:rgba(255,255,255,.22);
  padding:54px 36px 34px;
}

.uiux-process-step{
  color:#12637E;
  font-size:18px;
  line-height:1;
  font-weight:400;
  margin-bottom:62px;
}

.uiux-process-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  background:#dddddd;
  color:#8c9298;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin-bottom:46px;
}

.uiux-process-card h3{
  margin:0 0 18px;
  color:#111822;
  font-size:clamp(24px, 1.9vw, 40px);
  line-height:1.05;
  letter-spacing:-1px;
  font-weight:300;
  max-width:280px;
}

.uiux-process-card p{
  margin:0;
  color:#7b838b;
  font-size:clamp(18px, 1.1vw, 22px);
  line-height:1.18;
  font-weight:300;
  max-width:310px;
}

.uiux-process-glow{
  position:absolute;
  right:-80px;
  bottom:-90px;
  width:760px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(255,128,22,.82) 0%,
    rgba(255,167,73,.42) 28%,
    rgba(255,203,138,.14) 52%,
    transparent 78%);
  filter:blur(66px);
  transform:rotate(-12deg);
  pointer-events:none;
}

@media (max-width: 1280px){
  .uiux-process-cards{
    grid-template-columns:repeat(4, 1fr);
  }
}

@media (max-width: 980px){
  .uiux-process-top{
    grid-template-columns:1fr;
    gap:18px;
  }

  .uiux-process-right{
    justify-content:flex-start;
    padding-top:0;
  }
}

@media (max-width: 768px){
  .uiux-process-section{
    padding:24px 16px 42px;
  }

  .uiux-process-pill{
    min-height:36px;
    padding:0 12px;
    font-size:14px;
    margin-bottom:16px;
  }

  .uiux-process-title{
    font-size:clamp(42px, 11vw, 72px);
    letter-spacing:-2px;
  }

  .uiux-process-right p{
    font-size:18px;
    line-height:1.18;
  }

  .uiux-process-cards{
    grid-template-columns:1fr;
    gap:18px;
  }

  .uiux-process-card{
    min-height:auto;
    border-radius:24px;
    padding:28px 22px 24px;
  }

  .uiux-process-step{
    font-size:16px;
    margin-bottom:30px;
  }

  .uiux-process-icon{
    width:50px;
    height:50px;
    font-size:22px;
    margin-bottom:28px;
  }

  .uiux-process-card h3{
    font-size:30px;
  }

  .uiux-process-card p{
    font-size:16px;
    line-height:1.22;
  }

  .uiux-process-glow{
    width:420px;
    height:180px;
    right:-70px;
    bottom:-40px;
    filter:blur(40px);
  }
}
/* ===== UI/UX OUTCOMES SECTION ===== */
.uiux-outcomes-section{
  position:relative;
  min-height:760px;
  background:#efefed;
  overflow:hidden;
  display:flex;
  justify-content:center;
  padding:54px 24px 80px;
  font-family:'Outfit', sans-serif;
}

.uiux-outcomes-glow{
  position:absolute;
  pointer-events:none;
}

.uiux-outcomes-glow-left{
  left:-40px;
  top:0;
  width:240px;
  height:100%;
  background:linear-gradient(180deg,
    rgba(245,225,198,.9) 0%,
    rgba(245,225,198,.34) 38%,
    rgba(245,225,198,0) 78%);
  filter:blur(28px);
}

.uiux-outcomes-glow-right{
  right:-90px;
  bottom:-30px;
  width:700px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(255,132,24,.84) 0%,
    rgba(255,171,74,.44) 30%,
    rgba(255,205,154,.14) 56%,
    transparent 78%);
  filter:blur(68px);
  transform:rotate(-14deg);
}

.uiux-outcomes-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1460px;
  text-align:center;
}

.uiux-outcomes-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border:1.4px solid #6f7c86;
  border-radius:999px;
  color:#67727c;
  font-size:16px;
  font-weight:300;
  margin-bottom:28px;
}

.uiux-outcomes-title{
  margin:0 0 26px;
  color:#091321;
  font-size:clamp(74px, 7vw, 138px);
  line-height:.94;
  letter-spacing:-3.6px;
  font-weight:300;
}

.uiux-outcomes-title span{
  font-weight:600;
}

.uiux-outcomes-text{
  margin:0;
  color:#1c2530;
  font-size:clamp(24px, 1.55vw, 34px);
  line-height:1.08;
  font-weight:300;
}

.uiux-outcomes-text span{
  color:#9aa1a8;
}

@media (max-width: 1200px){
  .uiux-outcomes-section{
    min-height:620px;
    padding:44px 20px 64px;
  }

  .uiux-outcomes-title{
    letter-spacing:-2.4px;
  }
}

@media (max-width: 768px){
  .uiux-outcomes-section{
    min-height:auto;
    padding:34px 16px 48px;
  }

  .uiux-outcomes-pill{
    min-height:36px;
    padding:0 14px;
    font-size:14px;
    margin-bottom:18px;
  }

  .uiux-outcomes-title{
    font-size:clamp(42px, 11vw, 72px);
    line-height:.98;
    letter-spacing:-2px;
    margin-bottom:18px;
  }

  .uiux-outcomes-text{
    font-size:18px;
    line-height:1.18;
  }

  .uiux-outcomes-glow-left{
    width:150px;
    left:-30px;
    filter:blur(18px);
  }

  .uiux-outcomes-glow-right{
    width:360px;
    height:180px;
    right:-60px;
    bottom:-10px;
    filter:blur(40px);
  }
}
.services-expertise-left{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding-top:8px;
}

.service-item{
  display:grid;
  grid-template-columns:64px 1fr 74px;
  align-items:center;
  gap:18px;
  min-height:104px;
  padding:18px 26px;
  border-radius:36px;
  border:1.5px solid transparent;
  text-decoration:none;
  background:transparent;
  transition:
    background .28s ease,
    border-color .28s ease,
    transform .28s ease,
    box-shadow .28s ease;
}

.service-item:hover{
  border-color:#efb16f;
  background:rgba(255,255,255,.26);
}

.service-item.active{
  border-color:#efb16f;
  background:rgba(255,255,255,.32);
  box-shadow:0 8px 24px rgba(255,255,255,.16);
}

.service-item-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  background:#dddddd;
  color:#8b9196;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  flex:0 0 auto;
}

.service-item-copy h3{
  margin:0;
  color:#101822;
  font-size:clamp(24px, 2.2vw, 52px);
  line-height:1;
  letter-spacing:-1.2px;
  font-weight:300;
}

.service-item-copy p{
  margin:10px 0 0;
  color:#77808a;
  font-size:clamp(16px, 1.05vw, 22px);
  line-height:1.15;
  font-weight:300;
  max-width:360px;
}

.service-item-arrow{
  width:54px;
  height:54px;
  border-radius:50%;
  background:#12637E;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  line-height:1;
  justify-self:end;
  opacity:0;
  transform:scale(.72);
  transition:opacity .25s ease, transform .25s ease;
}

.service-item:hover .service-item-arrow,
.service-item.active .service-item-arrow{
  opacity:1;
  transform:scale(1);
}
/* ===== APP DEVELOPMENT PHILOSOPHY SECTION ===== */
.app-dev-philosophy-section{
  position:relative;
  min-height:100vh;
  background:#efefed;
  overflow:hidden;
  padding:54px 44px 70px;
  font-family:'Outfit', sans-serif;
}

.app-dev-philosophy-glow{
  position:absolute;
  left:2%;
  bottom:-8%;
  width:980px;
  height:440px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(255,127,22,.84) 0%,
    rgba(255,166,73,.46) 28%,
    rgba(255,204,139,.18) 52%,
    rgba(255,226,189,.06) 68%,
    transparent 80%);
  filter:blur(74px);
  transform:rotate(18deg);
  pointer-events:none;
}

.app-dev-philosophy-pill{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border:1.4px solid #7a858d;
  border-radius:999px;
  color:#7f8990;
  font-size:16px;
  font-weight:300;
  margin-bottom:26px;
}

.app-dev-philosophy-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:34px;
  min-height:calc(100vh - 150px);
}

.app-dev-philosophy-left{
  align-self:start;
  max-width:1220px;
}

.app-dev-philosophy-title{
  margin:0;
  color:#091321;
  font-size:clamp(72px, 7vw, 144px);
  line-height:.92;
  letter-spacing:-4px;
  font-weight:300;
}

.app-dev-philosophy-title span{
  font-weight:600;
}

.app-dev-philosophy-right{
  align-self:end;
  justify-self:end;
  max-width:500px;
  padding-bottom:110px;
}

.app-dev-philosophy-right p{
  margin:0;
  color:#1f2730;
  font-size:clamp(22px, 1.38vw, 31px);
  line-height:1.12;
  font-weight:300;
}

.app-dev-philosophy-right p span{
  color:#98a0a7;
}

@media (max-width: 1200px){
  .app-dev-philosophy-section{
    padding:40px 24px 46px;
  }

  .app-dev-philosophy-grid{
    grid-template-columns:1fr;
    min-height:auto;
    gap:54px;
  }

  .app-dev-philosophy-right{
    justify-self:start;
    max-width:700px;
    padding-bottom:0;
  }

  .app-dev-philosophy-title{
    letter-spacing:-2.5px;
  }
}

@media (max-width: 768px){
  .app-dev-philosophy-section{
    min-height:auto;
    padding:28px 16px 34px;
  }

  .app-dev-philosophy-pill{
    min-height:36px;
    padding:0 12px;
    font-size:14px;
    margin-bottom:18px;
  }

  .app-dev-philosophy-title{
    font-size:clamp(44px, 11vw, 74px);
    line-height:.98;
    letter-spacing:-2px;
  }

  .app-dev-philosophy-right p{
    font-size:18px;
    line-height:1.18;
  }

  .app-dev-philosophy-glow{
    width:520px;
    height:240px;
    left:-8%;
    bottom:-4%;
    filter:blur(42px);
  }
}
/* ===== APP DEVELOPMENT PROCESS SECTION ===== */
.appdev-process-section{
  position:relative;
  background:#efefed;
  padding:22px 48px 62px;
  overflow:hidden;
  font-family:'Outfit', sans-serif;
}

.appdev-process-top{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:30px;
  align-items:start;
  margin-bottom:54px;
}

.appdev-process-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border:1.4px solid #7a858d;
  border-radius:999px;
  color:#7a858d;
  font-size:16px;
  font-weight:300;
  margin-bottom:22px;
}

.appdev-process-title{
  margin:0;
  color:#091321;
  font-size:clamp(66px, 6.2vw, 122px);
  line-height:.92;
  letter-spacing:-3px;
  font-weight:300;
}

.appdev-process-title span{
  font-weight:600;
}

.appdev-process-right{
  display:flex;
  justify-content:flex-end;
  padding-top:22px;
}

.appdev-process-right p{
  margin:0;
  max-width:560px;
  color:#1f2730;
  font-size:clamp(22px, 1.4vw, 31px);
  line-height:1.14;
  font-weight:300;
}

.appdev-process-right p span{
  color:#99a0a7;
  display:block;
}

.appdev-process-cards{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}

.appdev-process-card{
  position:relative;
  min-height:430px;
  border:1.5px solid #efb06e;
  border-radius:30px;
  background:rgba(255,255,255,.18);
  padding:56px 36px 34px;
}

.appdev-process-step{
  color:#12637E;
  font-size:18px;
  line-height:1;
  font-weight:400;
  margin-bottom:60px;
}

.appdev-process-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  background:#dddddd;
  color:#8c9298;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin-bottom:46px;
}

.appdev-process-card h3{
  margin:0 0 18px;
  color:#111822;
  font-size:clamp(24px, 1.85vw, 38px);
  line-height:1.06;
  letter-spacing:-1px;
  font-weight:300;
  max-width:290px;
}

.appdev-process-card p{
  margin:0;
  color:#7b838b;
  font-size:clamp(17px, 1.05vw, 21px);
  line-height:1.18;
  font-weight:300;
  max-width:310px;
}

.appdev-process-glow{
  position:absolute;
  right:-80px;
  bottom:-90px;
  width:760px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(255,128,22,.84) 0%,
    rgba(255,167,73,.42) 28%,
    rgba(255,203,138,.14) 52%,
    transparent 78%);
  filter:blur(66px);
  transform:rotate(-12deg);
  pointer-events:none;
}

@media (max-width: 1280px){
  .appdev-process-cards{
    grid-template-columns:repeat(4, 1fr);
  }
}

@media (max-width: 980px){
  .appdev-process-top{
    grid-template-columns:1fr;
    gap:18px;
  }

  .appdev-process-right{
    justify-content:flex-start;
    padding-top:0;
  }
}

@media (max-width: 768px){
  .appdev-process-section{
    padding:24px 16px 42px;
  }

  .appdev-process-pill{
    min-height:36px;
    padding:0 12px;
    font-size:14px;
    margin-bottom:16px;
  }

  .appdev-process-title{
    font-size:clamp(42px, 11vw, 72px);
    letter-spacing:-2px;
  }

  .appdev-process-right p{
    font-size:18px;
    line-height:1.18;
  }

  .appdev-process-cards{
    grid-template-columns:1fr;
    gap:18px;
  }

  .appdev-process-card{
    min-height:auto;
    border-radius:24px;
    padding:28px 22px 24px;
  }

  .appdev-process-step{
    font-size:16px;
    margin-bottom:30px;
  }

  .appdev-process-icon{
    width:50px;
    height:50px;
    font-size:22px;
    margin-bottom:28px;
  }

  .appdev-process-card h3{
    font-size:30px;
  }

  .appdev-process-card p{
    font-size:16px;
    line-height:1.22;
  }

  .appdev-process-glow{
    width:420px;
    height:180px;
    right:-70px;
    bottom:-40px;
    filter:blur(40px);
  }
}
/* ===== APP DEVELOPMENT OUTCOMES SECTION ===== */
.appdev-outcomes-section{
  position:relative;
  min-height:760px;
  background:#efefed;
  overflow:hidden;
  display:flex;
  justify-content:center;
  padding:54px 24px 80px;
  font-family:'Outfit', sans-serif;
}

.appdev-outcomes-glow{
  position:absolute;
  pointer-events:none;
}

.appdev-outcomes-glow-left{
  left:-40px;
  top:0;
  width:240px;
  height:100%;
  background:linear-gradient(180deg,
    rgba(245,225,198,.9) 0%,
    rgba(245,225,198,.34) 38%,
    rgba(245,225,198,0) 78%);
  filter:blur(28px);
}

.appdev-outcomes-glow-right{
  right:-90px;
  bottom:-30px;
  width:700px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(255,132,24,.84) 0%,
    rgba(255,171,74,.44) 30%,
    rgba(255,205,154,.14) 56%,
    transparent 78%);
  filter:blur(68px);
  transform:rotate(-14deg);
}

.appdev-outcomes-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1460px;
  text-align:center;
}

.appdev-outcomes-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border:1.4px solid #6f7c86;
  border-radius:999px;
  color:#67727c;
  font-size:16px;
  font-weight:300;
  margin-bottom:28px;
}

.appdev-outcomes-title{
  margin:0 0 26px;
  color:#091321;
  font-size:clamp(74px, 7vw, 138px);
  line-height:.94;
  letter-spacing:-3.6px;
  font-weight:300;
}

.appdev-outcomes-title span{
  font-weight:600;
}

.appdev-outcomes-text{
  margin:0;
  color:#1c2530;
  font-size:clamp(24px, 1.55vw, 34px);
  line-height:1.08;
  font-weight:300;
}

.appdev-outcomes-text span{
  color:#9aa1a8;
}

@media (max-width: 1200px){
  .appdev-outcomes-section{
    min-height:620px;
    padding:44px 20px 64px;
  }

  .appdev-outcomes-title{
    letter-spacing:-2.4px;
  }
}

@media (max-width: 768px){
  .appdev-outcomes-section{
    min-height:auto;
    padding:34px 16px 48px;
  }

  .appdev-outcomes-pill{
    min-height:36px;
    padding:0 14px;
    font-size:14px;
    margin-bottom:18px;
  }

  .appdev-outcomes-title{
    font-size:clamp(42px, 11vw, 72px);
    line-height:.98;
    letter-spacing:-2px;
    margin-bottom:18px;
  }

  .appdev-outcomes-text{
    font-size:18px;
    line-height:1.18;
  }

  .appdev-outcomes-glow-left{
    width:150px;
    left:-30px;
    filter:blur(18px);
  }

  .appdev-outcomes-glow-right{
    width:360px;
    height:180px;
    right:-60px;
    bottom:-10px;
    filter:blur(40px);
  }
}
/* ===== 3D ANIMATION PHILOSOPHY SECTION ===== */
.animation-purpose-section{
  position:relative;
  min-height:100vh;
  background:#efefed;
  overflow:hidden;
  padding:54px 44px 70px;
  font-family:'Outfit', sans-serif;
}

.animation-purpose-glow{
  position:absolute;
  left:1%;
  bottom:-10%;
  width:1040px;
  height:460px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(255,127,22,.88) 0%,
    rgba(255,166,73,.48) 28%,
    rgba(255,204,139,.18) 52%,
    rgba(255,226,189,.06) 68%,
    transparent 80%);
  filter:blur(76px);
  transform:rotate(18deg);
  pointer-events:none;
}

.animation-purpose-pill{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border:1.4px solid #7a858d;
  border-radius:999px;
  color:#7f8990;
  font-size:16px;
  font-weight:300;
  margin-bottom:28px;
}

.animation-purpose-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:34px;
  min-height:calc(100vh - 150px);
}

.animation-purpose-left{
  align-self:start;
  max-width:1220px;
}

.animation-purpose-title{
  margin:0;
  color:#091321;
  font-size:clamp(72px, 7vw, 144px);
  line-height:.92;
  letter-spacing:-4px;
  font-weight:300;
}

.animation-purpose-title span{
  font-weight:600;
}

.animation-purpose-right{
  align-self:end;
  justify-self:end;
  max-width:510px;
  padding-bottom:100px;
}

.animation-purpose-right p{
  margin:0;
  color:#1f2730;
  font-size:clamp(22px, 1.38vw, 31px);
  line-height:1.12;
  font-weight:300;
}

.animation-purpose-right p span{
  color:#98a0a7;
}

@media (max-width: 1200px){
  .animation-purpose-section{
    padding:40px 24px 46px;
  }

  .animation-purpose-grid{
    grid-template-columns:1fr;
    min-height:auto;
    gap:54px;
  }

  .animation-purpose-right{
    justify-self:start;
    max-width:700px;
    padding-bottom:0;
  }

  .animation-purpose-title{
    letter-spacing:-2.5px;
  }
}

@media (max-width: 768px){
  .animation-purpose-section{
    min-height:auto;
    padding:28px 16px 34px;
  }

  .animation-purpose-pill{
    min-height:36px;
    padding:0 12px;
    font-size:14px;
    margin-bottom:18px;
  }

  .animation-purpose-title{
    font-size:clamp(44px, 11vw, 74px);
    line-height:.98;
    letter-spacing:-2px;
  }

  .animation-purpose-right p{
    font-size:18px;
    line-height:1.18;
  }

  .animation-purpose-glow{
    width:520px;
    height:240px;
    left:-8%;
    bottom:-4%;
    filter:blur(42px);
  }
}
/* ===== 3D ANIMATION PROCESS SECTION ===== */
.animation-process-section{
  position:relative;
  background:#efefed;
  padding:22px 48px 62px;
  overflow:hidden;
  font-family:'Outfit', sans-serif;
}

.animation-process-top{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:30px;
  align-items:start;
  margin-bottom:54px;
}

.animation-process-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border:1.4px solid #7a858d;
  border-radius:999px;
  color:#7a858d;
  font-size:16px;
  font-weight:300;
  margin-bottom:22px;
}

.animation-process-title{
  margin:0;
  color:#091321;
  font-size:clamp(66px, 6.2vw, 122px);
  line-height:.92;
  letter-spacing:-3px;
  font-weight:300;
}

.animation-process-title span{
  font-weight:600;
}

.animation-process-right{
  display:flex;
  justify-content:flex-end;
  padding-top:22px;
}

.animation-process-right p{
  margin:0;
  max-width:560px;
  color:#1f2730;
  font-size:clamp(22px, 1.4vw, 31px);
  line-height:1.14;
  font-weight:300;
}

.animation-process-right p span{
  color:#99a0a7;
}

.animation-process-cards{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}

.animation-process-card{
  position:relative;
  min-height:430px;
  border:1.5px solid #efb06e;
  border-radius:30px;
  background:rgba(255,255,255,.18);
  padding:56px 36px 34px;
}

.animation-process-step{
  color:#12637E;
  font-size:18px;
  line-height:1;
  font-weight:400;
  margin-bottom:60px;
}

.animation-process-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  background:#dddddd;
  color:#8c9298;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin-bottom:46px;
}

.animation-process-card h3{
  margin:0 0 18px;
  color:#111822;
  font-size:clamp(24px, 1.85vw, 38px);
  line-height:1.06;
  letter-spacing:-1px;
  font-weight:300;
  max-width:290px;
}

.animation-process-card p{
  margin:0;
  color:#7b838b;
  font-size:clamp(17px, 1.05vw, 21px);
  line-height:1.18;
  font-weight:300;
  max-width:310px;
}

.animation-process-glow{
  position:absolute;
  right:-80px;
  bottom:-90px;
  width:760px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(255,128,22,.84) 0%,
    rgba(255,167,73,.42) 28%,
    rgba(255,203,138,.14) 52%,
    transparent 78%);
  filter:blur(66px);
  transform:rotate(-12deg);
  pointer-events:none;
}

@media (max-width: 1280px){
  .animation-process-cards{
    grid-template-columns:repeat(4, 1fr);
  }
}

@media (max-width: 980px){
  .animation-process-top{
    grid-template-columns:1fr;
    gap:18px;
  }

  .animation-process-right{
    justify-content:flex-start;
    padding-top:0;
  }
}

@media (max-width: 768px){
  .animation-process-section{
    padding:24px 16px 42px;
  }

  .animation-process-pill{
    min-height:36px;
    padding:0 12px;
    font-size:14px;
    margin-bottom:16px;
  }

  .animation-process-title{
    font-size:clamp(42px, 11vw, 72px);
    letter-spacing:-2px;
  }

  .animation-process-right p{
    font-size:18px;
    line-height:1.18;
  }

  .animation-process-cards{
    grid-template-columns:1fr;
    gap:18px;
  }

  .animation-process-card{
    min-height:auto;
    border-radius:24px;
    padding:28px 22px 24px;
  }

  .animation-process-step{
    font-size:16px;
    margin-bottom:30px;
  }

  .animation-process-icon{
    width:50px;
    height:50px;
    font-size:22px;
    margin-bottom:28px;
  }

  .animation-process-card h3{
    font-size:30px;
  }

  .animation-process-card p{
    font-size:16px;
    line-height:1.22;
  }

  .animation-process-glow{
    width:420px;
    height:180px;
    right:-70px;
    bottom:-40px;
    filter:blur(40px);
  }
}
/* ===== 3D ANIMATION OUTCOMES SECTION ===== */
.animation-outcomes-section{
  position:relative;
  min-height:760px;
  background:#efefed;
  overflow:hidden;
  display:flex;
  justify-content:center;
  padding:54px 24px 80px;
  font-family:'Outfit', sans-serif;
}

.animation-outcomes-glow{
  position:absolute;
  pointer-events:none;
}

.animation-outcomes-glow-left{
  left:-40px;
  top:0;
  width:240px;
  height:100%;
  background:linear-gradient(180deg,
    rgba(245,225,198,.9) 0%,
    rgba(245,225,198,.34) 38%,
    rgba(245,225,198,0) 78%);
  filter:blur(28px);
}

.animation-outcomes-glow-right{
  right:-90px;
  bottom:-30px;
  width:700px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(255,132,24,.84) 0%,
    rgba(255,171,74,.44) 30%,
    rgba(255,205,154,.14) 56%,
    transparent 78%);
  filter:blur(68px);
  transform:rotate(-14deg);
}

.animation-outcomes-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1460px;
  text-align:center;
}

.animation-outcomes-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border:1.4px solid #6f7c86;
  border-radius:999px;
  color:#67727c;
  font-size:16px;
  font-weight:300;
  margin-bottom:28px;
}

.animation-outcomes-title{
  margin:0 0 26px;
  color:#091321;
  font-size:clamp(74px, 7vw, 138px);
  line-height:.94;
  letter-spacing:-3.6px;
  font-weight:300;
}

.animation-outcomes-title span{
  font-weight:600;
}

.animation-outcomes-text{
  margin:0;
  color:#1c2530;
  font-size:clamp(24px, 1.55vw, 34px);
  line-height:1.08;
  font-weight:300;
}

.animation-outcomes-text span{
  color:#9aa1a8;
}

@media (max-width: 1200px){
  .animation-outcomes-section{
    min-height:620px;
    padding:44px 20px 64px;
  }

  .animation-outcomes-title{
    letter-spacing:-2.4px;
  }
}

@media (max-width: 768px){
  .animation-outcomes-section{
    min-height:auto;
    padding:34px 16px 48px;
  }

  .animation-outcomes-pill{
    min-height:36px;
    padding:0 14px;
    font-size:14px;
    margin-bottom:18px;
  }

  .animation-outcomes-title{
    font-size:clamp(42px, 11vw, 72px);
    line-height:.98;
    letter-spacing:-2px;
    margin-bottom:18px;
  }

  .animation-outcomes-text{
    font-size:18px;
    line-height:1.18;
  }

  .animation-outcomes-glow-left{
    width:150px;
    left:-30px;
    filter:blur(18px);
  }

  .animation-outcomes-glow-right{
    width:360px;
    height:180px;
    right:-60px;
    bottom:-10px;
    filter:blur(40px);
  }
}
/* ===== BRANDING PROCESS SECTION ===== */
.branding-process-section{
  position:relative;
  background:#efefed;
  padding:22px 48px 62px;
  overflow:hidden;
  font-family:'Outfit', sans-serif;
}

.branding-process-top{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:30px;
  align-items:start;
  margin-bottom:54px;
}

.branding-process-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border:1.4px solid #7a858d;
  border-radius:999px;
  color:#7a858d;
  font-size:16px;
  font-weight:300;
  margin-bottom:22px;
}

.branding-process-title{
  margin:0;
  color:#091321;
  font-size:clamp(66px, 6.2vw, 122px);
  line-height:.92;
  letter-spacing:-3px;
  font-weight:300;
}

.branding-process-title span{
  font-weight:600;
}

.branding-process-right{
  display:flex;
  justify-content:flex-end;
  padding-top:22px;
}

.branding-process-right p{
  margin:0;
  max-width:560px;
  color:#1f2730;
  font-size:clamp(22px, 1.4vw, 31px);
  line-height:1.14;
  font-weight:300;
}

.branding-process-right p span{
  color:#99a0a7;
}

.branding-process-cards{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}

.branding-process-card{
  position:relative;
  min-height:430px;
  border:1.5px solid #efb06e;
  border-radius:30px;
  background:rgba(255,255,255,.18);
  padding:56px 36px 34px;
}

.branding-process-step{
  color:#12637E;
  font-size:18px;
  line-height:1;
  font-weight:400;
  margin-bottom:60px;
}

.branding-process-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  background:#dddddd;
  color:#8c9298;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin-bottom:46px;
}

.branding-process-card h3{
  margin:0 0 18px;
  color:#111822;
  font-size:clamp(24px, 1.85vw, 38px);
  line-height:1.06;
  letter-spacing:-1px;
  font-weight:300;
  max-width:290px;
}

.branding-process-card p{
  margin:0;
  color:#7b838b;
  font-size:clamp(17px, 1.05vw, 21px);
  line-height:1.18;
  font-weight:300;
  max-width:310px;
}

.branding-process-glow{
  position:absolute;
  right:-80px;
  bottom:-90px;
  width:760px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(255,128,22,.84) 0%,
    rgba(255,167,73,.42) 28%,
    rgba(255,203,138,.14) 52%,
    transparent 78%);
  filter:blur(66px);
  transform:rotate(-12deg);
  pointer-events:none;
}

@media (max-width: 1280px){
  .branding-process-cards{
    grid-template-columns:repeat(4, 1fr);
  }
}

@media (max-width: 980px){
  .branding-process-top{
    grid-template-columns:1fr;
    gap:18px;
  }

  .branding-process-right{
    justify-content:flex-start;
    padding-top:0;
  }
}

@media (max-width: 768px){
  .branding-process-section{
    padding:24px 16px 42px;
  }

  .branding-process-pill{
    min-height:36px;
    padding:0 12px;
    font-size:14px;
    margin-bottom:16px;
  }

  .branding-process-title{
    font-size:clamp(42px, 11vw, 72px);
    letter-spacing:-2px;
  }

  .branding-process-right p{
    font-size:18px;
    line-height:1.18;
  }

  .branding-process-cards{
    grid-template-columns:1fr;
    gap:18px;
  }

  .branding-process-card{
    min-height:auto;
    border-radius:24px;
    padding:28px 22px 24px;
  }

  .branding-process-step{
    font-size:16px;
    margin-bottom:30px;
  }

  .branding-process-icon{
    width:50px;
    height:50px;
    font-size:22px;
    margin-bottom:28px;
  }

  .branding-process-card h3{
    font-size:30px;
  }

  .branding-process-card p{
    font-size:16px;
    line-height:1.22;
  }

  .branding-process-glow{
    width:420px;
    height:180px;
    right:-70px;
    bottom:-40px;
    filter:blur(40px);
  }
}
/* ===== PROJECTS HERO SECTION ===== */
.projects-hero-section{
  position: relative;
  overflow: hidden;
  background: #000;
  padding: 40px 30px 10px;
  min-height: 400px;
  font-family: 'Outfit', sans-serif;
}

.projects-hero-inner{
  position: relative;
  z-index: 3;
  max-width: 1760px;
  margin: 0 auto;
}

.projects-hero-glow{
  position: absolute;
  left: 50%;
  top: 110px;
  transform: translateX(-50%);
  width: 980px;
  height: 420px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      rgba(255, 85, 0, 0.95) 0%,
      rgba(148, 34, 0, 0.62) 24%,
      rgba(78, 10, 0, 0.28) 48%,
      rgba(0, 0, 0, 0) 74%);
  filter: blur(34px);
  pointer-events: none;
  z-index: 1;
}

.projects-hero-arc{
  position: absolute;
  left: 50%;
  top: 195px;
  transform: translateX(-50%);
  width: 930px;
  height: 470px;
  border: 1px solid rgba(255, 103, 20, 0.18);
  border-bottom: none;
  border-radius: 930px 930px 0 0;
  pointer-events: none;
  z-index: 2;
}

.projects-hero-title{
  margin: 40px 0 40px;
  text-align: center;
  color: #f3f1ef;
  font-size: clamp(90px, 15vw, 180px);
  line-height: .9;
  letter-spacing: -6px;
  font-weight: 300;
}

.projects-filter-row{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.projects-filter-btn{
  min-width: 146px;
  height: 62px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: #f1efee;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -.3px;
  cursor: pointer;
  transition: .25s ease;
  font-family: inherit;
}

.projects-filter-btn.active{
  background: #efefef;
  color: #262d34;
  border-color: #efefef;
}

.projects-filter-btn:hover{
  border-color: rgba(255,255,255,.42);
}

@media (max-width: 1200px){
  .projects-hero-section{
    min-height: 500px;
    padding: 70px 20px 24px;
  }

  .projects-hero-title{
    margin: 70px 0 100px;
    letter-spacing: -4px;
  }

  .projects-hero-glow{
    width: 760px;
    height: 340px;
  }

  .projects-hero-arc{
    width: 720px;
    height: 360px;
  }
}

@media (max-width: 768px){
  .projects-hero-section{
    min-height: auto;
    padding: 54px 16px 22px;
  }

  .projects-hero-title{
    margin: 46px 0 64px;
    font-size: clamp(58px, 16vw, 94px);
    letter-spacing: -2px;
  }

  .projects-filter-row{
    gap: 10px;
  }

  .projects-filter-btn{
    min-width: auto;
    height: 48px;
    padding: 0 18px;
    font-size: 14px;
  }

  .projects-hero-glow{
    width: 460px;
    height: 240px;
    top: 90px;
    filter: blur(24px);
  }

  .projects-hero-arc{
    width: 420px;
    height: 210px;
    top: 165px;
  }
}
/* ===== PROJECTS GRID SECTION ===== */
.projects-showcase-section{
  background:#000;
  padding:18px 30px 42px;
  font-family:'Outfit', sans-serif;
}

.projects-showcase-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
}

.project-showcase-card{
  min-width:0;
}

.project-showcase-thumb{
  display:block;
  width:100%;
  aspect-ratio: 1.58 / 1;
  border-radius:0;
  overflow:hidden;
  background:#111;
}

.project-showcase-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .55s ease;
}

.project-showcase-card:hover .project-showcase-thumb img{
  transform:scale(1.03);
}

.project-showcase-meta{
  margin-top:18px;
  color:rgba(255,255,255,.72);
  font-size:16px;
  line-height:1;
  font-weight:300;
  letter-spacing:-.2px;
  text-transform:uppercase;
}

.project-showcase-title{
  margin-top:10px;
  display:inline-flex;
  align-items:flex-end;
  gap:18px;
  text-decoration:none;
  color:#f1efee;
}

.project-showcase-title span:first-child{
  font-size:clamp(42px, 3.2vw, 62px);
  line-height:.95;
  font-weight:300;
  letter-spacing:-1.8px;
}

.project-showcase-arrow{
  color:#12637E;
  font-size:42px;
  line-height:1;
  transform:translateY(-4px);
  transition:transform .25s ease;
}

.project-showcase-card:hover .project-showcase-arrow{
  transform:translateY(-4px) translateX(6px);
}

@media (max-width: 980px){
  .projects-showcase-grid{
    grid-template-columns:1fr;
  }

  .projects-showcase-section{
    padding:18px 16px 34px;
  }

  .project-showcase-meta{
    font-size:14px;
  }

  .project-showcase-title span:first-child{
    font-size:36px;
  }

  .project-showcase-arrow{
    font-size:32px;
  }
}
/* ===== DARK CTA HERO SECTION ===== */
.dark-cta-hero{
  position:relative;
  min-height:100vh;
  background:#000;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:80px 24px;
  font-family:'Outfit', sans-serif;
}

.dark-cta-inner{
  position:relative;
  z-index:3;
  width:100%;
  max-width:1400px;
  text-align:center;
}

.dark-cta-title{
  margin:0;
  color:#f4f2ef;
  font-size:clamp(62px, 6.6vw, 132px);
  line-height:.95;
  letter-spacing:-3px;
  font-weight:300;
}

.dark-cta-text{
  margin:34px 0 0;
  color:rgba(255,255,255,.38);
  font-size:clamp(20px, 1.45vw, 31px);
  line-height:1.18;
  font-weight:300;
}

.dark-cta-btn{
  margin-top:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:230px;
  height:66px;
  padding:0 28px;
  border-radius:999px;
  background:#f2f2f2;
  color:#2a2f35;
  text-decoration:none;
  font-size:18px;
  font-weight:400;
  letter-spacing:.12em;
  transition:.25s ease;
}

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

.dark-cta-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(62px);
  pointer-events:none;
  z-index:1;
}

.dark-cta-glow-left{
  left:7%;
  top:10%;
  width:420px;
  height:760px;
  background:linear-gradient(180deg,
    rgba(18,99,126,.78) 0%,
    rgba(18,99,126,.38) 40%,
    rgba(18,99,126,0) 88%);
  transform:rotate(18deg);
}

.dark-cta-glow-right{
  right:8%;
  bottom:2%;
  width:420px;
  height:720px;
  background:linear-gradient(180deg,
    rgba(18,99,126,0) 0%,
    rgba(18,99,126,.34) 42%,
    rgba(18,99,126,.82) 100%);
  transform:rotate(-20deg);
}

.dark-cta-ring{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(92vw, 1500px);
  height:min(92vw, 1500px);
  border:1px solid rgba(18,99,126,.1);
  border-radius:50%;
  z-index:0;
  pointer-events:none;
}

@media (max-width: 768px){
  .dark-cta-hero{
    min-height:auto;
    padding:90px 16px;
  }

  .dark-cta-title{
    font-size:clamp(42px, 12vw, 72px);
    line-height:1;
    letter-spacing:-2px;
  }

  .dark-cta-text{
    margin-top:20px;
    font-size:16px;
    line-height:1.3;
  }

  .dark-cta-btn{
    margin-top:28px;
    min-width:190px;
    height:54px;
    font-size:14px;
    letter-spacing:.1em;
  }

  .dark-cta-glow-left,
  .dark-cta-glow-right{
    width:220px;
    height:420px;
    filter:blur(42px);
  }
}

/* =========================
   QIRO TECH LIGHT BRAND THEME
   Final override: clean white + teal corporate look
========================= */
:root{
  --qiro-primary:#12637E;
  --qiro-primary-dark:#0B4F63;
  --qiro-primary-light:#1B7F9C;
  --qiro-bg:#FFFFFF;
  --qiro-bg-soft:#F4FAFC;
  --qiro-card:rgba(255,255,255,0.9);
  --qiro-text:#12313A;
  --qiro-muted:#5E747C;
  --qiro-border:rgba(18,99,126,0.18);
  --qiro-shadow:0 20px 60px rgba(18,99,126,0.16);
  --qiro-soft-glow:rgba(18,99,126,0.22);
  --bg:var(--qiro-bg);
  --bg-2:var(--qiro-bg-soft);
  --text:var(--qiro-text);
  --muted:var(--qiro-muted);
  --line:var(--qiro-border);
  --accent:var(--qiro-primary);
  --dark:var(--qiro-primary-dark);
}

html,
body{
  background:var(--qiro-bg);
  color:var(--qiro-text);
}

body{
  background:
    radial-gradient(circle at 16% 8%, rgba(18,99,126,.08), transparent 28%),
    radial-gradient(circle at 82% 0%, rgba(27,127,156,.07), transparent 32%),
    var(--qiro-bg);
}

.topbar{
  background:rgba(255,255,255,.88);
  border-bottom:1px solid var(--qiro-border);
  box-shadow:0 14px 38px rgba(18,99,126,.08);
}

.logo{
  color:var(--qiro-primary-dark);
  text-shadow:none;
}

.logo::first-letter{
  color:var(--qiro-primary);
}

.nav-center a,
.talk-link{
  color:#465C64;
}

.nav-center a.active,
.nav-center a:hover,
.talk-link:hover{
  color:var(--qiro-primary);
}

.talk-link::after{
  background:linear-gradient(90deg, var(--qiro-primary), var(--qiro-primary-light));
  box-shadow:none;
}

.divider{
  background:var(--qiro-border);
}

.audio-trigger{
  color:var(--qiro-primary-dark);
  border-color:var(--qiro-border);
  background:rgba(255,255,255,.65);
  box-shadow:none;
}

.audio-trigger:hover,
.audio-trigger.playing{
  background:var(--qiro-primary);
  border-color:var(--qiro-primary);
  color:#fff;
  box-shadow:0 10px 30px rgba(18,99,126,.2);
}

.menu-btn span{
  background:var(--qiro-primary-dark);
  box-shadow:none;
}

.menu-btn:hover span{
  background:var(--qiro-primary);
  box-shadow:0 0 18px rgba(18,99,126,.18);
}

.hero,
.hero-section,
.ideas-section,
.build-stack-wrap,
.build-stack-section,
.showcase-section,
.portfolio-dark-section,
.contact-mdx-section,
.footer-mdx,
.vision-section,
.about-intro-section,
.about-quote-section,
.values-mdx-section,
.proof-section,
.philosophy-section,
.team-showcase-section,
.services-hero-section,
.services-expertise-section,
.delivery-philosophy-section,
.outcomes-section,
.talk-page-mdx,
.uiux-hero-section,
.uiux-purpose-section,
.uiux-process-section,
.uiux-outcomes-section,
.app-dev-philosophy-section,
.appdev-process-section,
.appdev-outcomes-section,
.animation-purpose-section,
.animation-process-section,
.animation-outcomes-section,
.branding-process-section,
.projects-hero-section,
.projects-showcase-section,
.dark-cta-hero{
  background:
    radial-gradient(circle at 50% 0%, rgba(18,99,126,.08), transparent 34%),
    linear-gradient(180deg, #FFFFFF 0%, #F4FAFC 100%);
  color:var(--qiro-text);
}

.hero::after{
  background:radial-gradient(circle, rgba(18,99,126,.18), rgba(18,99,126,.07), transparent 70%);
  filter:blur(30px);
  opacity:.75;
}

.hero-noise{
  opacity:.12;
}

.hero-left h1,
.hero-heading,
.ideas-title,
.build-content h2,
.showcase-title,
.vision-title,
.about-intro-title,
.values-mdx-title,
.proof-title,
.philosophy-title,
.services-hero-title,
.services-expertise-title,
.delivery-title,
.outcomes-title,
.talk-page-title,
.talk-page-heading,
.uiux-hero-title,
.uiux-purpose-title,
.uiux-process-title,
.uiux-outcomes-title,
.app-dev-philosophy-title,
.appdev-process-title,
.appdev-outcomes-title,
.animation-purpose-title,
.animation-process-title,
.animation-outcomes-title,
.branding-process-title,
.projects-hero-title,
.dark-cta-title,
.footer-mdx-heading{
  color:var(--qiro-text);
}

.hero-left h1,
.hero-heading,
.services-hero-title span,
.ideas-title span,
.build-content h2 span,
.vision-title span,
.about-intro-title span,
.values-mdx-title span,
.philosophy-title span,
.services-expertise-title span,
.delivery-title span,
.outcomes-title span,
.uiux-purpose-title span,
.uiux-process-title span,
.app-dev-philosophy-title span,
.appdev-process-title span,
.animation-purpose-title span,
.animation-process-title span,
.branding-process-title span{
  background:linear-gradient(90deg, #12637E, #1B7F9C);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-left p,
.hero-right p,
.hero-subheading,
.ideas-text,
.build-content p,
.showcase-meta,
.portfolio-dark-meta,
.vision-text,
.about-quote-text p,
.values-mdx-text,
.values-mdx-copy p,
.proof-right p,
.philosophy-right p,
.services-hero-text,
.services-expertise-top-right p,
.service-item-copy p,
.delivery-right p,
.outcomes-text,
.talk-page-contact-copy,
.uiux-hero-text,
.uiux-purpose-right p,
.uiux-process-right p,
.uiux-process-card p,
.uiux-outcomes-text,
.app-dev-philosophy-right p,
.appdev-process-right p,
.appdev-process-card p,
.appdev-outcomes-text,
.animation-purpose-right p,
.animation-process-right p,
.animation-process-card p,
.animation-outcomes-text,
.branding-process-right p,
.branding-process-card p,
.dark-cta-text,
.footer-mdx-meta,
.footer-mdx-meta a{
  color:var(--qiro-muted);
}

.hero-right p strong,
.talk-page-contact-copy strong,
.contact-mdx-form-title,
.field input,
.field textarea,
.talk-field input,
.talk-field textarea{
  color:var(--qiro-text);
}

.orb-aura,
.services-hero-glow,
.ideas-bg-glow,
.build-blob-glow,
.vision-glow,
.about-intro-glow,
.values-mdx-glow,
.proof-bg-glow,
.philosophy-glow,
.services-expertise-glow,
.delivery-glow,
.outcomes-glow,
.uiux-purpose-glow,
.uiux-process-glow,
.uiux-outcomes-glow,
.app-dev-philosophy-glow,
.appdev-process-glow,
.appdev-outcomes-glow,
.animation-purpose-glow,
.animation-process-glow,
.animation-outcomes-glow,
.branding-process-glow,
.projects-hero-glow,
.dark-cta-glow{
  background:radial-gradient(circle, rgba(18,99,126,.18), rgba(18,99,126,.08), transparent 70%) !important;
  filter:blur(42px);
  opacity:.9;
}

.orb-shell{
  background:#fff;
  border:1px solid rgba(18,99,126,.12);
  box-shadow:
    0 0 80px rgba(18,99,126,.22),
    0 30px 80px rgba(18,99,126,.12);
}

.orb-aura{
  background:radial-gradient(circle, rgba(18,99,126,.22), rgba(18,99,126,.08), transparent 72%) !important;
}

.orb-floor-shadow{
  background:radial-gradient(ellipse at center, rgba(18,99,126,.16), transparent 70%);
}

.cta-btn,
.hero-button,
.vision-btn,
.services-hero-btn,
.contact-mdx-submit,
.talk-send-btn,
.menu-talk-btn,
.dark-cta-btn{
  background:var(--qiro-primary);
  color:#fff;
  border:1px solid rgba(18,99,126,.2);
  box-shadow:0 10px 35px rgba(18,99,126,.22);
}

.cta-btn:hover,
.hero-button:hover,
.vision-btn:hover,
.services-hero-btn:hover,
.contact-mdx-submit:hover,
.talk-send-btn:hover,
.menu-talk-btn:hover,
.dark-cta-btn:hover{
  background:var(--qiro-primary-light);
  transform:translateY(-2px);
  box-shadow:0 10px 35px rgba(18,99,126,.25);
}

.cta-btn span,
.hero-button svg,
.vision-btn span,
.services-hero-btn span,
.contact-mdx-submit .arrow,
.talk-send-btn .arrow,
.menu-talk-btn span,
.dark-cta-btn span:last-child,
.showcase-viewall-icon,
.project-showcase-arrow,
.service-item-arrow{
  color:#fff;
}

.pill,
.build-pill,
.filter-btn,
.team-filter,
.interest-chip span,
.talk-interest-chip span,
.projects-filter-btn,
.services-expertise-pill,
.delivery-pill,
.outcomes-pill,
.uiux-hero-kicker,
.uiux-purpose-pill,
.uiux-process-pill,
.uiux-outcomes-pill,
.app-dev-philosophy-pill,
.appdev-process-pill,
.appdev-outcomes-pill,
.animation-purpose-pill,
.animation-process-pill,
.animation-outcomes-pill,
.branding-process-pill,
.proof-pill,
.philosophy-pill{
  background:rgba(255,255,255,.86);
  border-color:var(--qiro-border);
  color:var(--qiro-primary-dark);
  box-shadow:0 10px 28px rgba(18,99,126,.08);
}

.pill:hover,
.filter-btn.active,
.filter-btn:hover,
.team-filter.active,
.projects-filter-btn.active,
.projects-filter-btn:hover,
.interest-chip.active span,
.interest-chip input:checked + span,
.talk-interest-chip.active span,
.talk-interest-chip input:checked + span{
  background:var(--qiro-primary);
  border-color:var(--qiro-primary);
  color:#fff;
  box-shadow:0 10px 30px rgba(18,99,126,.22);
}

.showcase-card,
.portfolio-dark-card,
.values-mdx-card-inner,
.proof-card-front,
.services-expertise-board,
.service-item,
.services-ui-visual,
.contact-mdx-left,
.contact-mdx-right,
.talk-page-shell,
.talk-page-left,
.talk-page-right,
.uiux-process-card,
.appdev-process-card,
.animation-process-card,
.branding-process-card,
.project-showcase-thumb{
  background:rgba(255,255,255,.85);
  border:1px solid var(--qiro-border);
  box-shadow:var(--qiro-shadow);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.showcase-card:hover,
.portfolio-dark-card:hover,
.values-mdx-card:hover .values-mdx-card-inner,
.service-item:hover,
.service-item.active,
.uiux-process-card:hover,
.appdev-process-card:hover,
.animation-process-card:hover,
.branding-process-card:hover,
.project-showcase-card:hover .project-showcase-thumb{
  border-color:rgba(18,99,126,.46);
  box-shadow:0 24px 70px rgba(18,99,126,.2);
}

.service-item.active,
.service-item:hover{
  background:rgba(244,250,252,.92);
}

.service-item-icon,
.values-mdx-icon,
.contact-mdx-kicker .dot,
.menu-dot,
.talk-page-dot{
  background:var(--qiro-primary);
  color:#fff;
  box-shadow:0 10px 24px rgba(18,99,126,.24);
}

.service-item-copy h3,
.showcase-card-title,
.portfolio-dark-title,
.values-mdx-copy h3,
.uiux-process-card h3,
.appdev-process-card h3,
.animation-process-card h3,
.branding-process-card h3,
.project-showcase-title,
.footer-mdx-nav a,
.footer-mdx-email,
.contact-mdx-mail,
.talk-page-email{
  color:var(--qiro-text);
}

.footer-mdx{
  background:linear-gradient(180deg, #F4FAFC 0%, #FFFFFF 100%);
}

.footer-mdx-logo{
  color:rgba(18,99,126,.12);
  text-shadow:none;
}

.footer-mdx-meta,
.footer-mdx-meta a,
.footer-mdx-socials a,
.footer-mdx-scrolltop{
  color:var(--qiro-primary-dark);
}

.contact-mdx-line,
.talk-page-line,
.footer-mdx-divider,
.menu-line{
  background-color:var(--qiro-border);
}

.menu-bottom,
.menu-col-title{
  border-color:var(--qiro-border);
  background-color:transparent;
}

.field input,
.field textarea,
.talk-field input,
.talk-field textarea{
  border-bottom-color:rgba(18,99,126,.32);
}

.field label,
.talk-field label,
.interest-label,
.talk-interest-label{
  color:var(--qiro-muted);
}

.menu-overlay{
  background:rgba(244,250,252,.78);
}

.menu-panel{
  background:
    radial-gradient(circle at 18% 18%, rgba(18,99,126,.08), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,250,252,.98));
  border:1px solid var(--qiro-border);
  box-shadow:0 28px 80px rgba(18,99,126,.16);
}

.menu-close{
  background:#EAF5F8;
  color:var(--qiro-primary-dark);
  border:1px solid var(--qiro-border);
}

.menu-close:hover{
  background:var(--qiro-primary);
  color:#fff;
  box-shadow:0 10px 35px rgba(18,99,126,.25);
}

.menu-title,
.menu-link.active,
.menu-copy,
.menu-policies a,
.menu-socials a{
  color:var(--qiro-text);
}

.menu-kicker,
.menu-email,
.menu-col-title,
.menu-link,
.menu-link.muted{
  color:var(--qiro-muted);
}

.menu-link:hover{
  color:var(--qiro-primary);
}

.menu-link.active::before{
  background:var(--qiro-primary);
  box-shadow:none;
}

.footer-mdx-email-icon,
.footer-mdx-scrolltop-icon,
.contact-mdx-socials a,
.talk-page-socials a,
.footer-mdx-socials a,
.menu-socials a{
  border-color:var(--qiro-border);
  color:var(--qiro-primary-dark);
  background:rgba(255,255,255,.74);
}

.footer-mdx-email-icon,
.mail-icon,
.talk-page-mail-icon{
  color:var(--qiro-primary);
}

.dark-cta-ring,
.services-hero-circle,
.vision-circle,
.projects-hero-arc{
  border-color:rgba(18,99,126,.14);
}

.showreel-card{
  background:#fff;
  box-shadow:0 28px 80px rgba(18,99,126,.12);
}

.video-overlay{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(18,99,126,.1));
}

@media (max-width:768px){
  .hero::after{
    width:110vw;
    height:110vw;
    top:40%;
  }
}

/* Keep the hero visual clean when section text scrolls behind it. */
.hero{
  isolation:isolate;
  overflow:hidden;
  z-index:2;
}

.hero-center{
  z-index:5;
}

.orb-stage{
  z-index:6;
}

.orb-shell{
  isolation:isolate;
  z-index:7;
  overflow:hidden;
  background:#fff !important;
}

.orb-shell::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#fff;
  z-index:0;
  pointer-events:none;
}

.brain-img{
  position:relative;
  z-index:1;
  display:block;
}

.hero-section{
  z-index:0;
}

.orb-floor-shadow{
  display:none !important;
}

.orb-shell{
  border:none !important;
  border-bottom:none !important;
  outline:none !important;
}

.orb-shell::before,
.orb-shell::after{
  border:none !important;
  border-bottom:none !important;
  outline:none !important;
}