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

:root {
  --bg: #fbfbfe;
  --bg-2: #f3f3f3;
  --text: #101223;
  --muted: #72758b;
  --purple: #5b45e6;
  --purple-2: #9a49d6;
  --pink: #ef6c9e;
  --border: rgba(17, 18, 35, 0.09);
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: "Inter", sans-serif;
  color: var(--text);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.page-shell {
  width: min(100%, 1800px);
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
}

.navbar {
  height: 126px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  position: relative;
  z-index: 20;
}

.logo {
  height: 80px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 48px;
  font-size: 16px;
  font-weight: 500;
}

.nav-links > a:not(.nav-cta) {
  position: relative;
}

.nav-links > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 0;
  height: 1.5px;
  background: #111221;
  transition: width 0.25s ease;
}

.nav-links > a:not(.nav-cta):hover::after {
  width: 100%;
}

.nav-cta {
  padding: 15px 28px;
  border: 1px solid rgba(92, 69, 230, 0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 10px 30px rgba(34, 29, 80, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(74, 59, 160, 0.11);
}

.hero {
  min-height: calc(100vh - 126px);
  padding: 0 5vw ;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-copy {
  text-align: center;
  max-width: 960px;
  position: relative;
  z-index: 5;
}

h1 {
  font-size: clamp(54px, 6vw, 50px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 500;
}

h1 span {
  display: block;
  background: linear-gradient(100deg, #5b45e6 5%, #9555d9 48%, #ed6b91 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitle {
  margin-top: 15px;
  font-size: clamp(20px, 2vw, 22px);
  color: var(--muted);
  letter-spacing: 0.03em;
}

.primary-button {
  margin: 22px 0;
  min-width: 180px;
  height: 50px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(105deg, #5741e2, #9450dc);
  box-shadow:
    0 18px 40px rgba(89, 61, 219, 0.24),
    0 0 50px rgba(163, 81, 220, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.primary-button:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow:
    0 22px 52px rgba(89, 61, 219, 0.29),
    0 0 60px rgba(163, 81, 220, 0.17);
}

.primary-button span {
  font-size: 24px;
  line-height: 1;
}

.heroImage {
  height: 250px;
}


.services{width:100%;background:var(--bg);padding:92px 5vw 0}
.services-inner{width:min(1500px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,2fr);gap:clamp(54px,6vw,110px);align-items:start}
.services-intro{padding-top:30px;max-width:390px}.section-kicker{display:inline-flex;align-items:center;gap:10px;color:#6d4df1;font-size:12px;font-weight:800;letter-spacing:.18em}.section-kicker::after{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#6d4df1,#c987ff);box-shadow:0 0 18px rgba(111,77,241,.45)}
.services-title,.trusted-copy h2{margin-top:20px;font-size:clamp(36px,4.3vw,40px);line-height:.98;letter-spacing:-.055em;font-weight:500;color:var(--text)}.services-title span,.trusted-copy h2 span{display:block;background:linear-gradient(100deg,#5b45e6 5%,#9555d9 48%,#ed6b91 90%);-webkit-background-clip:text;background-clip:text;color:transparent}.section-line{display:block;width:48px;height:3px;margin-top:28px;border-radius:999px;background:linear-gradient(90deg,#5b45e6,#9a49d6)}
.services-copy,.trusted-copy p{margin-top:38px;color:#5f6678;font-size:16px;line-height:1.8}.services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.service-card{min-height:502px;padding:38px 36px 32px;border:1px solid rgba(110,82,225,.1);border-top:3px solid #8a54ef;border-radius:24px;background:#fff;box-shadow:0 24px 65px rgba(73,50,148,.08),0 0 45px rgba(118,76,230,.05);display:flex;flex-direction:column;transition:.28s}.service-card:nth-child(2){border-top-color:#5d59ff}.service-card:hover{transform:translateY(-6px);box-shadow:0 32px 75px rgba(73,50,148,.12),0 0 60px rgba(118,76,230,.08)}
.service-card h3{margin-top:26px;font-size:clamp(25px,2vw,32px);letter-spacing:-.035em;line-height:1.08}.service-description{margin-top:12px;min-height:86px;color:#4f5669;font-size:15px;line-height:1.7}.service-divider{height:1px;margin:24px 0;background:linear-gradient(90deg,rgba(107,72,237,.24),rgba(107,72,237,.08))}.service-features{list-style:none;display:grid;gap:15px}.service-features li{position:relative;padding-left:30px;color:#343a4d;font-size:14px}.service-features li::before{content:"✓";position:absolute;left:0;top:50%;width:17px;height:17px;transform:translateY(-50%);display:grid;place-items:center;border:2px solid #754ef4;border-radius:50%;color:#754ef4;font-size:10px;font-weight:800}.service-link{margin-top:auto;padding-top:30px;display:flex;align-items:center;justify-content:space-between;color:#17192a;font-weight:700;font-size:16px}.service-arrow{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;color:#fff;font-size:22px;background:linear-gradient(135deg,#5c42e4,#a84ee1);box-shadow:0 12px 25px rgba(111,70,225,.24);transition:.25s}.service-link:hover .service-arrow{transform:translateX(4px)}
.trusted-section{margin-top:86px;margin-inline:-5vw;padding:62px 5vw 54px;background:#fff;border-top:1px solid rgba(110,82,225,.06)}.trusted-inner{width:min(1500px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,2fr);gap:clamp(54px,6vw,110px);align-items:center}.trusted-copy{max-width:390px}.trusted-copy h2{font-size:clamp(36px,3.2vw,40px);line-height:1.02}.trusted-copy p{margin-top:26px;font-size:15px;line-height:1.75}.client-showcase{min-width:0}.client-logos{display:grid;grid-template-columns:repeat(5,minmax(90px,1fr));gap:26px;align-items:center}.client-logo{aspect-ratio:1;max-width:80px;width:100%;margin:0 auto;border-radius:28px;display:grid;place-items:center;color:#242537;font-size:24px;font-weight:800;background:rgba(255,255,255,.93);border:1px solid rgba(107,72,237,.06);box-shadow:0 18px 45px rgba(74,55,126,.08)}.carousel-dots{margin-top:38px;display:flex;justify-content:center;gap:14px}.carousel-dots span{width:9px;height:9px;border-radius:50%;background:#deddea}.carousel-dots span.active{background:linear-gradient(135deg,#5b45e6,#9a49d6);box-shadow:0 0 12px rgba(104,69,226,.3)}

/* =========================
   PORTFOLIO
========================= */

.portfolio {
  width: 100%;
  padding: 100px 5vw 120px;
  background:
    #ffffff;
}

.portfolio-inner {
  width: min(1500px, 100%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.75fr);
  gap: clamp(60px, 7vw, 120px);

  align-items: center;
}


/* LEFT PROJECT CARD */

.portfolio-card {
  min-height: 420px;

  display: grid;
  grid-template-columns: 34% 66%;

  border-radius: 34px;
  overflow: hidden;

  background: linear-gradient(
    145deg,
    #ffffff 0%,
    #fbf9ff 100%
  );

  border: 1px solid rgba(105, 75, 230, 0.08);

  box-shadow:
    0 30px 80px rgba(72, 48, 145, 0.10),
    0 0 50px rgba(105, 75, 230, 0.05);
}


/* PROJECT INFO */

.portfolio-info {
  padding: 56px 38px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border-right: 1px solid rgba(105, 75, 230, 0.08);
}

.portfolio-logo-placeholder {
  width: 80px;
  height: 80px;

  display: grid;
  place-items: center;

  border-radius: 28px;

  background: #ffffff;

  border: 1px solid rgba(105, 75, 230, 0.08);

  box-shadow:
    0 16px 40px rgba(70, 53, 120, 0.10);

  color: #242537;
  font-size: 24px;
  font-weight: 800;
}

.portfolio-info h2 {
  margin-top: 28px;

  font-size: clamp(18px, 2.5vw, 20px);
  line-height: 1.05;
  letter-spacing: -0.04em;

  font-weight: 600;
  color: var(--text);
}

.portfolio-type {
  margin-top: 16px;

  font-size: 15px;
  color: #5f6678;
}

.portfolio-button {
  margin-top: 34px;

  min-width: 190px;
  height: 54px;

  padding: 0 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;

  border-radius: 999px;

  color: #ffffff;
  font-size: 15px;
  font-weight: 700;

  background: linear-gradient(
    105deg,
    #5741e2,
    #9450dc,
    #ef6c9e
  );

  box-shadow:
    0 16px 34px rgba(106, 69, 220, 0.22);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.portfolio-button:hover {
  transform: translateY(-3px);

  box-shadow:
    0 22px 45px rgba(106, 69, 220, 0.28);
}


/* IMAGE GRID */

.portfolio-gallery {
  padding: 28px;

  display: grid;

  grid-template-columns: 0.75fr 1.25fr;
  grid-template-rows: repeat(2, 1fr);

  gap: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(248, 246, 255, 0.88),
      rgba(252, 251, 255, 0.96)
    );
}


.portfolio-shot {
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: center;

  border-radius: 16px;

  min-height: 140px;

  display: grid;
  place-items: center;

  color: white;
  font-weight: 700;
}

.shot-tall {
  grid-row: span 2;
}

.shot-wide {
  grid-column: 2;
}


/* RIGHT SIDE TEXT */

.portfolio-copy {
  max-width: 390px;
}

.portfolio-copy .section-kicker {
  margin-bottom: 0;
}

.portfolio-copy h2 {
  margin-top: 20px;

  font-size: clamp(36px, 4vw, 40px);
  line-height: 1;
  letter-spacing: -0.055em;

  font-weight: 500;

  color: var(--text);
}

.portfolio-copy h2 span {
  background: linear-gradient(
    100deg,
    #5b45e6 5%,
    #9555d9 48%,
    #ed6b91 90%
  );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.portfolio-copy p {
  margin-top: 38px;

  font-size: 16px;
  line-height: 1.8;

  color: #5f6678;
}

/* =========================
   CONTACT
========================= */

.contact-section {
  width: 100%;
  min-height: 100vh;

  padding: 110px 5vw 50px;

  background: var(--bg)
}

.contact-inner {
  width: min(1500px, 100%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.9fr);

  gap: clamp(60px, 7vw, 120px);

  align-items: center;
}


/* LEFT SIDE */

.contact-copy {
  max-width: 420px;
}

.contact-copy h2 {
  margin-top: 22px;

  font-size: clamp(36px, 4vw, 40px);
  line-height: 1;
  letter-spacing: -0.05em;

  font-weight: 500;
  color: var(--text);
}

.contact-description {
  margin-top: 34px;

  font-size: 17px;
  line-height: 1.8;

  color: #5f6678;
}

.contact-details {
  margin-top: 42px;

  display: grid;
  gap: 24px;
}

.contact-detail {
  display: grid;
  grid-template-columns: 48px 1fr;

  gap: 18px;

  align-items: start;
}

.contact-icon {
  width: 46px;
  height: 46px;

  border-radius: 50%;

  display: grid;
  place-items: center;

  color: #6d4df1;

  background:
    linear-gradient(
      135deg,
      rgba(91, 69, 230, 0.10),
      rgba(239, 108, 158, 0.12)
    );

  font-size: 20px;
}

.contact-detail strong {
  display: block;

  margin-bottom: 6px;

  font-size: 16px;
  color: var(--text);
}

.contact-detail p {
  color: #72758b;

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


/* FORM CARD */

.contact-form {
  padding: 48px 52px 42px;

  border-radius: 34px;

  background: rgba(255, 255, 255, 0.95);

  border: 1px solid rgba(105, 75, 230, 0.08);

  box-shadow:
    0 30px 80px rgba(73, 50, 148, 0.10),
    0 0 50px rgba(110, 75, 230, 0.05);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 36px;
}

.form-left {
  display: grid;
  gap: 30px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-group label {
  font-size: 16px;
  font-weight: 600;

  color: var(--text);
}

.form-group input,
.form-group textarea {
  width: 100%;

  border: 1px solid rgba(16, 18, 35, 0.13);

  background: #ffffff;

  color: var(--text);

  font-family: inherit;
  font-size: 15px;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.form-group input {
  height: 70px;
  padding: 0 22px;
  border-radius: 20px;
}

.form-group textarea {
  min-height: 238px;
  padding: 20px 22px;
  border-radius: 20px;
  resize: vertical;
}

.form-group select {
  width: 100%;
  min-height: 70px;

  justify-content: space-between;

  font-family: inherit;
  font-size: 15px;

  color: var(--text);

  &,
  &::picker(select) {
    appearance: base-select;
    align-items: center;

    padding: 0 22px;

    border: 1px solid rgba(16, 18, 35, 0.13);
    border-radius: 20px;

    background: #ffffff;

    color: var(--text);
  }

  &::picker(select) {
    margin-block-start: 10px;

    padding: 10px;

    border-radius: 20px;

    box-shadow:
      0 20px 50px rgba(73, 50, 148, 0.12);
  }

  &::picker-icon {
    display: none;
  }

  .picker {
    color: #7a55ef;
    rotate: 90deg;

    transition: rotate 0.3s ease;

    :open & {
      rotate: 0deg;
    }
  }

  selectedcontent > * {
    transition:
      translate 0.4s ease,
      opacity 0.4s ease;

    @starting-style {
      opacity: 0;
      translate: 0 8px;
    }
  }
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #9a9daf;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(107, 77, 241, 0.50);

  box-shadow:
    0 0 0 4px rgba(107, 77, 241, 0.07);
}

.form-group select option {
  padding: 14px 16px;

  border-radius: 14px;

  color: var(--text);

  cursor: pointer;
}

.form-group select option:hover {
  background: rgba(107, 77, 241, 0.08);
}


/* FORM BOTTOM */

.form-bottom {
  margin-top: 34px;

  padding-top: 30px;

  border-top: 1px solid rgba(16, 18, 35, 0.08);

  display: flex;
  justify-content: center;
}

.contact-button {
  min-width: 160px;
  height: 56px;

  padding: 0 28px;

  border: 0;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 16px;

  color: #ffffff;

  font-family: inherit;
  font-size: 16px;
  font-weight: 700;

  cursor: pointer;

  background:
    linear-gradient(
      105deg,
      #5741e2,
      #9450dc,
      #ef6c9e
    );

  box-shadow:
    0 16px 34px rgba(106, 69, 220, 0.22);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.contact-button span {
  font-size: 20px;
}

.contact-button:hover {
  transform: translateY(-3px);

  box-shadow:
    0 22px 45px rgba(106, 69, 220, 0.28);
}

.contact-copy {
  max-width: 420px;
}

.contact-title {
  margin-top: 20px;

  font-size: clamp(44px, 4.3vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.055em;

  font-weight: 500;

  color: var(--text);
}

.contact-title span {
  background: linear-gradient(
    100deg,
    #5b45e6 5%,
    #9555d9 48%,
    #ed6b91 90%
  );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.contact-copy .section-line {
  display: block;

  width: 48px;
  height: 3px;

  margin-top: 32px;

  border-radius: 999px;

  background: linear-gradient(
    90deg,
    #5b45e6,
    #9a49d6,
    #ef6c9e
  );
}

.contact-description {
  margin-top: 50px;

  color: #5f6678;

  font-size: 16px;
  line-height: 1.8;
}


/* FOOTER */

.contact-footer {
  width: min(1500px, 100%);

  margin: 110px auto 0;

  color: #72758b;

  font-size: 13px;
}

.success-popup {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(15, 18, 35, 0.35);
  backdrop-filter: blur(8px);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;

  z-index: 9999;
}

.success-popup.show {
  opacity: 1;
  visibility: visible;
}

.success-card {
  width: min(420px, calc(100% - 40px));

  padding: 42px 34px;

  border-radius: 28px;

  text-align: center;

  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(239, 108, 158, 0.10),
      transparent 35%
    ),
    #ffffff;

  border: 1px solid rgba(105, 75, 230, 0.08);

  box-shadow:
    0 30px 80px rgba(73, 50, 148, 0.20);

  transform: translateY(20px) scale(0.97);

  transition: transform 0.25s ease;
}

.success-popup.show .success-card {
  transform: translateY(0) scale(1);
}

.success-icon {
  width: 64px;
  height: 64px;

  margin: 0 auto 24px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #ffffff;
  font-size: 28px;
  font-weight: 700;

  background: linear-gradient(
    135deg,
    #5b45e6,
    #9a49d6,
    #ef6c9e
  );

  box-shadow:
    0 14px 30px rgba(106, 69, 220, 0.25);
}

.success-card h3 {
  font-size: 28px;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: var(--text);
}

.success-card p {
  margin-top: 14px;

  color: #676d80;

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

.success-card button {
  margin-top: 28px;

  min-width: 130px;
  height: 48px;

  border: 0;
  border-radius: 999px;

  color: white;

  font-family: inherit;
  font-size: 15px;
  font-weight: 700;

  cursor: pointer;

  background: linear-gradient(
    105deg,
    #5741e2,
    #9450dc
  );
}

/* APPEAR ON SCROLLING */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}


/* TABLET */

@media (max-width: 1050px) {

  .portfolio-inner {
    grid-template-columns: 1fr;
  }

  .portfolio-copy {
    order: -1;
    max-width: 620px;
  }

  .portfolio-card {
    min-height: 560px;
  }

  @media (max-width: 1050px) {

  .contact-inner {
    grid-template-columns: 1fr;
  }

  .contact-copy {
    max-width: 620px;
  }

}

}


/* MOBILE */

@media (max-width: 760px) {

  .portfolio {
    padding: 80px 22px;
  }

  .portfolio-gallery {
    display: none;
  }

  .portfolio-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .portfolio-info {
    padding: 40px 24px;

    border-right: 0;
    border-bottom: 1px solid rgba(105, 75, 230, 0.08);
  }

  .portfolio-shot,
  .shot-tall {
    grid-column: 1;
    grid-row: 1 / 3;
    background-size: contain;

    min-height: 180px;
  }

  .shot-wide {
    grid-column: 2;
    grid-row: auto;
  }

}

@media (max-width: 900px) {
  .navbar {
    height: 96px;
    padding-inline: 24px;
  }

  .nav-links {
    gap: 20px;
  }

  .nav-links a:not(.nav-cta) {
    display: none;
  }

  .hero {
    padding-inline: 20px;
    min-height: calc(100vh - 96px);
  }

  h1 {
    font-size: clamp(50px, 12vw, 50px);
  }
  .heroImage {
    height: 200px;
  }
}

@media (max-width:1050px){.services{padding-top:70px}.services-inner,.trusted-inner{grid-template-columns:1fr}.services-intro,.trusted-copy{max-width:620px}.services-grid{max-width:900px}.client-logos{grid-template-columns:repeat(5,minmax(78px,1fr))}}
@media (max-width:760px){.services{padding-inline:22px}.services-grid{grid-template-columns:1fr}.service-card{min-height:0}.trusted-section{margin-inline:-22px;padding-inline:22px}.client-logos{grid-template-columns:repeat(3,1fr)}.client-logo:nth-child(4),.client-logo:nth-child(5){display:none}}
@media (max-width: 620px) {
  .brand-text {
    font-size: 21px;
  }

  .brand-mark {
    width: 38px;
    height: 48px;
  }

  .nav-cta {
    padding: 12px 18px;
  }

  h1 {
    font-size: 48px;
  }

  .subtitle {
    font-size: 18px;
  }

  .laptop-screen {
    width: 92%;
    grid-template-columns: 1fr 0.85fr;
    border-width: 6px;
  }

  .screen-copy {
    padding: 28px 8px 22px 18px;
  }

  .screen-copy h2 {
    font-size: 17px;
  }

  .screen-copy p {
    font-size: 8px;
    margin-top: 8px;
  }

  .rating {
    margin-top: 15px;
  }

  .phone {
    width: 50%;
    right: 5%;
  }

  .laptop-base {
    height: 14px;
  }

  @media (max-width: 760px) {

  .contact-section {
    padding: 80px 22px 40px;
  }

  .contact-form {
    padding: 32px 24px;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .form-group textarea {
    min-height: 190px;
  }

  .contact-footer {
    margin-top: 70px;
  }

}
}