:root{
  --red:#FF4A47;
  --blue:#007EC4;
  --teal:#64CCCC;
  --lime:#EEFF41;
  --ink:#0B0F14;
  --gray:#2D2D2D;
  --muted:#667085;
  --bg:#05070A;
  --card:#0E1218;
  --line:rgba(255,255,255,.10);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius: 20px;
  --max: 1120px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:#fff;
  background: radial-gradient(1200px 800px at 20% -10%, rgba(100,204,204,.18), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(0,126,196,.18), transparent 50%),
              radial-gradient(900px 600px at 70% 90%, rgba(255,74,71,.10), transparent 55%),
              var(--bg);
  line-height:1.5;
}

a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.9; }
img{ max-width:100%; display:block; border-radius:16px; }

.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto; padding:10px 12px; border-radius:10px;
  background:#fff; color:#000; z-index:9999;
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(5,7,10,.55);
  border-bottom: 1px solid var(--line);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
}

.brand__logo{
  height:26px;
  width:auto;
}

.nav{
  display:flex;
  align-items:center;
  gap:18px;
  font-weight:600;
  color:rgba(255,255,255,.88);
}
.nav a{ padding:10px 10px; border-radius:12px; }
.nav a:hover{ background: rgba(255,255,255,.06); }

.menu-btn{
  display:none;
  background:transparent;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  color:#fff;
}
.menu-btn__bars{
  display:block;
  width:18px; height:12px;
  border-top:2px solid #fff;
  border-bottom:2px solid #fff;
  position:relative;
}
.menu-btn__bars::after{
  content:"";
  position:absolute; left:0; top:4px;
  width:18px; height:2px; background:#fff;
}

.mobile-menu{
  display:none;
  padding:12px 20px 18px;
  border-top: 1px solid var(--line);
}
.mobile-menu a{
  display:block;
  padding:12px 8px;
  border-radius:12px;
  font-weight:700;
}
.mobile-menu a:hover{ background: rgba(255,255,255,.06); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:16px;
  font-weight:900;
  letter-spacing:.02em;
  border: 2px solid transparent;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.btn:active{ transform: translateY(0px); }
.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(238,255,65,.22), 0 10px 26px rgba(0,0,0,.35);
}

.btn--primary{
  background: var(--red);
  color: #0B0F14;
  border-color: rgba(255,255,255,.10);
}
.btn--primary:hover{
  box-shadow: 0 0 0 3px rgba(255,74,71,.22), 0 10px 26px rgba(0,0,0,.35);
}

.btn--secondary{
  background: var(--blue);
  color: #0B0F14;
  border-color: rgba(255,255,255,.10);
}
.btn--secondary:hover{
  box-shadow: 0 0 0 3px rgba(0,126,196,.22), 0 10px 26px rgba(0,0,0,.35);
}

.btn--accent{
  background: var(--lime);
  color: #0B0F14;
  border-color: rgba(255,255,255,.18);
}
.btn--accent:hover{
  box-shadow: 0 0 0 3px rgba(238,255,65,.22), 0 10px 26px rgba(0,0,0,.35);
}

.btn--full{ width:100%; }

.hero{
  padding:72px 0 34px;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:28px;
  align-items:center;
}
.eyebrow{
  margin:0 0 8px;
  color: rgba(255,255,255,.72);
  font-weight:700;
  letter-spacing:.02em;
}
.hero__headline{
  margin:0 0 14px;
  line-height: .95;
  font-size: clamp(44px, 5vw, 70px);
  letter-spacing: .02em;
}
.stack{ display:block; }
.lead{
  margin:0;
  color: rgba(255,255,255,.80);
  font-size: 18px;
  max-width: 58ch;
}
.hero__cta{
  display:flex;
  gap:12px;
  margin-top:22px;
  flex-wrap:wrap;
}
.hero__media{
  position:relative;
  min-height: 320px;
}
.hero__glow{
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(280px 220px at 20% 30%, rgba(100,204,204,.28), transparent 70%),
    radial-gradient(260px 220px at 80% 40%, rgba(0,126,196,.22), transparent 70%),
    radial-gradient(300px 250px at 60% 80%, rgba(255,74,71,.16), transparent 75%);
  filter: blur(16px);
  opacity:.9;
}
.hero__card{
  position:relative;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero__card-top{
  height: 10px;
  background: linear-gradient(90deg, var(--teal), var(--blue), var(--red));
}
.hero__card-body{
  padding: 18px 18px 14px;
  display:grid;
  gap:14px;
}
.metric{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  padding: 14px 14px;
  border-radius: 16px;
}
.metric__label{
  color: rgba(255,255,255,.70);
  font-weight:800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing:.08em;
}
.metric__value{
  margin-top:6px;
  font-size: 16px;
  font-weight:800;
}

.feature{
  padding: 46px 0;
}
.feature__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items:center;
}
.feature__copy h2{
  margin:0 0 10px;
  font-size: 34px;
  letter-spacing:.02em;
}
.subhead{
  margin:0 0 10px;
  color: rgba(255,255,255,.72);
  font-weight:800;
}
.feature__copy p{
  margin: 0 0 12px;
  color: rgba(255,255,255,.80);
}
.feature--alt{
  background: rgba(255,255,255,.02);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.services{
  padding: 54px 0;
}
.services__header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom: 18px;
}
.services__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.pill{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  font-weight:800;
  color: rgba(255,255,255,.86);
}
.services__media{
  margin-top: 18px;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
}

.promise{
  padding: 54px 0;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.promise__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 20px;
  align-items:stretch;
}
.promise__copy h2{ margin:0 0 10px; font-size: 34px; }
.promise__copy p{ margin:0 0 12px; color: rgba(255,255,255,.80); }
.promise__card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow);
  padding: 18px;
}
.promise__card h3{ margin:0 0 6px; color: rgba(255,255,255,.80); }
.promise__card .big{
  margin:0 0 10px;
  font-weight: 900;
  font-size: 22px;
  letter-spacing:.02em;
}
.promise__card p{ margin:0 0 14px; color: rgba(255,255,255,.80); }

.contact{
  padding: 54px 0 70px;
  border-top: 1px solid var(--line);
}
.contact__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.contact__details{
  margin-top: 18px;
  display:grid;
  gap: 12px;
}
.detail{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  border-radius: 16px;
  padding: 14px;
}
.detail__label{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing:.08em;
  font-size: 12px;
  color: rgba(255,255,255,.65);
}
.detail__value{
  margin-top: 8px;
  color: rgba(255,255,255,.85);
}
.sep{ opacity:.6; padding: 0 6px; }

.form{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.form label{
  display:grid;
  gap: 6px;
  margin-bottom: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.80);
}
.form span{ font-size: 13px; text-transform: uppercase; letter-spacing:.08em; }
input, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color:#fff;
  outline:none;
}
input:focus, textarea:focus{
  border-color: rgba(100,204,204,.55);
  box-shadow: 0 0 0 4px rgba(100,204,204,.12);
}
.form__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form__note{
  margin: 12px 0 0;
  color: rgba(255,255,255,.65);
  font-size: 13px;
}
.form__success{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(100,204,204,.12);
  border: 1px solid rgba(100,204,204,.35);
}

.footer{
  border-top: 1px solid var(--line);
  padding: 18px 0;
  color: rgba(255,255,255,.70);
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.footer__tag{ font-weight: 900; color: rgba(255,255,255,.82); }

@media (max-width: 880px){
  .nav{ display:none; }
  .menu-btn{ display:inline-flex; }
  .mobile-menu{ display:block; }
  .hero__grid, .feature__grid, .services__grid, .promise__grid, .contact__grid{
    grid-template-columns: 1fr;
  }
  .hero{ padding-top: 46px; }
  .hero__media{ min-height: 240px; }
  .form__row{ grid-template-columns: 1fr; }
  .services__grid{ grid-template-columns: 1fr; }
}


/* === SECTION BACKGROUND IMAGES === */

.feature {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5,7,10,.85),
    rgba(5,7,10,.65)
  );
}

.feature > .container {
  position: relative;
  z-index: 2;
}


.feature--alt {
  background-image: url("assets/audience-obsessed.png");
}

.services {
  position: relative;
  background-image: url("assets/make-your-brand-shine.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.services::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5,7,10,.9),
    rgba(5,7,10,.7)
  );
}

.services > .container {
  position: relative;
  z-index: 2;
}

/* === HERO INTEREST ELEMENT (Fractal-inspired overlay) === */
.hero{
  position: relative;
  overflow: hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-120px -120px -120px -120px;
  background:
    radial-gradient(800px 520px at 18% 20%, rgba(100,204,204,.22), transparent 60%),
    radial-gradient(720px 520px at 82% 18%, rgba(0,126,196,.22), transparent 58%),
    radial-gradient(860px 620px at 60% 92%, rgba(255,74,71,.16), transparent 62%),
    radial-gradient(520px 420px at 60% 50%, rgba(238,255,65,.08), transparent 62%);
  filter: blur(0px);
  opacity: 1;
  pointer-events:none;
  z-index: 0;
}

.hero::after{
  content:"";
  position:absolute;
  inset:-80px;
  opacity:.35;
  pointer-events:none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='920' height='620' viewBox='0 0 920 620'%3E%3Cg fill='none' stroke='%23EEFF41' stroke-opacity='0.20' stroke-width='1.2'%3E%3Cpath d='M80 310 C170 120, 290 120, 360 250 S540 420, 640 310 S820 190, 880 310'/%3E%3Cpath d='M110 350 C210 190, 320 190, 390 300 S560 430, 680 330 S820 250, 870 350'/%3E%3Cpath d='M210 140 L260 230 L160 230 Z'/%3E%3Cpath d='M520 120 L570 210 L470 210 Z'/%3E%3Cpath d='M720 140 L770 230 L670 230 Z'/%3E%3Cpath d='M300 480 L350 570 L250 570 Z'/%3E%3Cpath d='M590 470 L640 560 L540 560 Z'/%3E%3Cpath d='M440 210 C420 250, 420 310, 460 350 C500 390, 540 430, 520 470'/%3E%3Cpath d='M420 200 C380 260, 380 320, 430 380 C480 440, 520 470, 490 520'/%3E%3C/g%3E%3Cg fill='none' stroke='%23007EC4' stroke-opacity='0.16' stroke-width='1.0'%3E%3Cpath d='M60 290 C160 90, 300 90, 380 240 S560 450, 660 290 S820 150, 900 300'/%3E%3C/g%3E%3Cg fill='none' stroke='%23FF4A47' stroke-opacity='0.14' stroke-width='1.0'%3E%3Cpath d='M40 320 C150 160, 280 140, 360 260 S540 420, 650 320 S820 220, 900 320'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 1100px 740px;
  background-repeat: repeat;
  mix-blend-mode: screen;
  animation: heroDrift 18s linear infinite;
}

@keyframes heroDrift{
  0% { transform: translate3d(0,0,0); background-position: 0 0; }
  50%{ transform: translate3d(20px,-10px,0); background-position: 260px 140px; }
  100%{ transform: translate3d(0,0,0); background-position: 520px 280px; }
}

.hero__grid{ position: relative; z-index: 2; }

/* Slight lift for the hero card now that the background has more energy */
.hero__card{
  backdrop-filter: blur(8px);
}


/* === PROMISE BACKGROUND IMAGE === */
.promise{
  position: relative;
  background-image: url("assets/its-good-business.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.promise::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(5,7,10,.88), rgba(5,7,10,.68));
  pointer-events:none;
}

.promise > .container{
  position: relative;
  z-index: 2;
}

/* === CONTACT BACKGROUND IMAGE === */
.contact{
  position: relative;
  background-image: url("assets/lets-connect.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.contact::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(5,7,10,.90), rgba(5,7,10,.72));
  pointer-events:none;
}

.contact > .container{
  position: relative;
  z-index: 2;
}


/* === OVERLAY TUNING (faces visible, still readable) === */

/* Be More Human: lighten overlay so people read through */

/* It's Good Business: bias crop upward for faces + slightly lighter overlay */
.promise{
  background-position: center 22%;
}

.promise::before{
  background: linear-gradient(
    180deg,
    rgba(5,7,10,.66),
    rgba(5,7,10,.52)
  );
}

/* Boost content panels a touch so text remains crisp on brighter photos */
.promise__card,
.form,
.detail,
.metric{
  background: rgba(0,0,0,.36);
  border-color: rgba(255,255,255,.12);
}



/* === FINAL OVERLAY LIGHTENING (REQUESTED) === */

/* It's Good Business: 20% lighter */
.promise::before{
  background: linear-gradient(
    180deg,
    rgba(5,7,10,.38),
    rgba(5,7,10,.26)
  );
}

/* Be More Human: ensure people photo is visible */

/* Make Your Brand Shine: 15% lighter */
.services::before{
  background: linear-gradient(
    180deg,
    rgba(5,7,10,.72),
    rgba(5,7,10,.54)
  );
}

/* Let's Connect: 15% lighter */
.contact::before{
  background: linear-gradient(
    180deg,
    rgba(5,7,10,.70),
    rgba(5,7,10,.52)
  );
}


/* === Be More Human Background (explicit fix) === */
.feature--human{
  background-image: url("assets/be-more-human.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.feature--human::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(5,7,10,.48),
    rgba(5,7,10,.32)
  );
}


/* === FACE-WEIGHTED LIGHTING + MOTION ACCENTS === */

/* Face-weighted lighting: brighten upper-mid (where faces usually are), keep readability */
.feature--human::before,
.promise::before,
.services::before,
.contact::before{
  background:
    radial-gradient(520px 360px at 55% 28%, rgba(255,255,255,.18), transparent 65%),
    linear-gradient(180deg, rgba(5,7,10,.46), rgba(5,7,10,.32));
}

/* Section-specific tuning */
.services::before{
  background:
    radial-gradient(520px 360px at 55% 24%, rgba(255,255,255,.14), transparent 65%),
    linear-gradient(180deg, rgba(5,7,10,.68), rgba(5,7,10,.50));
}
.contact::before{
  background:
    radial-gradient(520px 360px at 55% 26%, rgba(255,255,255,.14), transparent 65%),
    linear-gradient(180deg, rgba(5,7,10,.66), rgba(5,7,10,.48));
}

/* Motion accents: subtle floating glow orbs behind content */
.hero .container,
.feature > .container,
.promise > .container,
.services > .container,
.contact > .container{
  position: relative;
}

.section-orb{
  position:absolute;
  width: 380px;
  height: 380px;
  border-radius: 999px;
  filter: blur(26px);
  opacity: .22;
  pointer-events:none;
  mix-blend-mode: screen;
  animation: orbFloat 16s ease-in-out infinite;
}

.section-orb--red{ background: radial-gradient(circle at 30% 30%, rgba(255,74,71,.55), transparent 60%); }
.section-orb--blue{ background: radial-gradient(circle at 30% 30%, rgba(0,126,196,.55), transparent 60%); }
.section-orb--lime{ background: radial-gradient(circle at 30% 30%, rgba(238,255,65,.45), transparent 60%); }
.section-orb--teal{ background: radial-gradient(circle at 30% 30%, rgba(100,204,204,.50), transparent 60%); }

@keyframes orbFloat{
  0% { transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(22px,-16px,0) scale(1.05); }
  100%{ transform: translate3d(0,0,0) scale(1); }
}

/* Button motion accent: sheen on hover */
.btn{
  position: relative;
  overflow: hidden;
}
.btn::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-30%;
  width: 60%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: rotate(18deg) translateX(-120%);
  transition: transform .38s ease;
  pointer-events:none;
}
.btn:hover::after{
  transform: rotate(18deg) translateX(260%);
}

/* Service pills: micro-motion */
.pill{
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.pill:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.07);
  border-color: rgba(238,255,65,.22);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero::after, .section-orb{ animation: none !important; }
  .btn::after{ transition:none; }
}


/* === Be More Human – Face-focused background tuning === */
.feature--human{
  background-position: center 22%;
}

.feature--human::before{
  background:
    radial-gradient(520px 360px at 62% 32%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(180deg, rgba(5,7,10,.46), rgba(5,7,10,.30));
}


/* === Social icon links === */
.social-icons{
  display:flex;
  gap:12px;
  align-items:center;
}
.social-icon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.social-icon:hover{
  transform: translateY(-2px);
  border-color: rgba(238,255,65,.30);
  box-shadow: 0 0 0 3px rgba(238,255,65,.14);
  color: var(--lime);
}
.social-icon:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(238,255,65,.22);
  border-color: rgba(238,255,65,.35);
}