:root {
  --bg: #06060b;
  --panel: #0e0d17;
  --line: #2d293a;
  --ink: #f5f2fa;
  --muted: #b6b0c0;
  --violet: #9148ff;
  --violet2: #c268ff;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: "Space Grotesk", sans-serif;
}
h1 {
  font-size: clamp(3rem, 6vw, 5rem);
  letter-spacing: -0.07em;
  font-weight: 700;
}
h1 span,
h2 span {
  color: #a252ff;
}
h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.05em;
  font-weight: 700;
}
.section-pad {
  padding: 105px 0;
}
.navbar {
  padding: 18px 0;
  background: transparent;
  transition: 0.25s;
}
.navbar.scrolled {
  background: #090911ef;
  box-shadow: 0 2px 20px #0008;
  backdrop-filter: blur(14px);
}
.navbar-brand {
  font: 700 17px/12px "Space Grotesk";
  color: white !important;
}
.navbar-brand small {
  display: block;
  font-size: 13px;
  color: #974fff;
  letter-spacing: 0.04em;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  margin-right: 9px;
  border: 3px solid #8841f5;
  border-right-color: #261243;
  border-radius: 50%;
  color: #b068ff;
}
.nav-link {
  color: #e6e0ed !important;
  font-size: 14px;
}
.nav-link.active,
.nav-link:hover {
  color: #a757ff !important;
}
.navbar-toggler {
  color: #fff;
  border: 1px solid #4a405b;
}
.btn {
  font-weight: 700;
  border-radius: 7px;
  padding: 11px 18px;
}
.btn-violet {
  border: 0;
  color: #fff;
  background: linear-gradient(110deg, #6931e6, #af43ff);
  box-shadow: 0 12px 28px #7428cf40;
}
.btn-violet:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 15px 32px #7428cf70;
}
.hero {
  padding-top: 165px;
  background: radial-gradient(
    ellipse 45% 55% at 75% 42%,
    #4b129b7a,
    transparent 70%
  );
}
.eyebrow {
  font-size: 11px;
  color: #ce9aff;
  letter-spacing: 1.8px;
  font-weight: 700;
}
.hero-copy,
.lead-copy {
  font-size: 17px;
  color: var(--muted);
  max-width: 540px;
  margin: 22px 0 28px;
}
.chip {
  font-size: 12px;
  border: 1px solid #42394f;
  padding: 7px 12px;
  border-radius: 6px;
  color: #ddd6e8;
}
.device-stage {
  height: 415px;
  position: relative;
  perspective: 900px;
}
.orb {
  position: absolute;
  width: 75%;
  height: 70%;
  top: 8%;
  left: 12%;
  background: radial-gradient(
    ellipse,
    #8b2cff 0%,
    #4d0b9c6c 36%,
    transparent 70%
  );
  filter: blur(3px);
}
.laptop {
  position: absolute;
  z-index: 2;
  top: 40px;
  left: 5%;
  width: 70%;
  height: 245px;
  padding: 6px;
  border: 5px solid #97909e;
  border-bottom-width: 12px;
  border-radius: 13px 13px 5px 5px;
  background: #050509;
  transform: rotate(-6deg);
  box-shadow:
    -15px 25px 28px #000,
    0 0 30px #8f36fd;
}
.laptop-screen {
  height: 100%;
  padding: 20px;
  background: linear-gradient(145deg, #121024, #070813 65%, #280b55);
}
.laptop-screen small {
  font-size: 8px;
  color: #bc75ff;
}
.laptop h3 {
  font-size: clamp(14px, 2vw, 21px);
  margin: 25px 0 13px;
}
.tiny-btn {
  font-size: 8px;
  padding: 5px 7px;
  border-radius: 3px;
  background: #7837ea;
}
.mini-stats {
  display: flex;
  gap: 7px;
  margin-top: 24px;
}
.mini-stats i {
  height: 42px;
  flex: 1;
  border: 1px solid #49306e;
  border-radius: 4px;
  background: #20113e;
}
.keyboard {
  position: absolute;
  width: 112%;
  height: 25px;
  bottom: -35px;
  left: -6%;
  border-radius: 4px 4px 18px 18px;
  background: linear-gradient(#aaa2ad, #312e38);
  box-shadow: 0 8px 8px #000;
}
.phone {
  position: absolute;
  z-index: 3;
  right: 4%;
  top: 110px;
  width: 24%;
  height: 255px;
  padding: 22px 10px 12px;
  background: #090914;
  border: 5px solid #b6afbd;
  border-radius: 21px;
  transform: rotate(8deg);
  box-shadow:
    0 12px 30px #000,
    0 0 25px #8333de;
}
.phone > span {
  position: absolute;
  top: 5px;
  left: 33%;
  width: 34%;
  height: 5px;
  background: #66606d;
  border-radius: 99px;
}
.phone h6 {
  font-size: clamp(7px, 1.1vw, 11px);
  line-height: 1.5;
}
.phone b {
  color: #a959ff;
}
.phone-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 18px;
}
.phone-cards i {
  height: 47px;
  border: 1px solid #422b67;
  border-radius: 5px;
  background: linear-gradient(135deg, #331567, #0e0e1a);
}
.stat-box {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #0c0c15;
  overflow: hidden;
}
.stat {
  padding: 25px 15px;
  border-right: 1px solid var(--line);
}
.stat:last-child {
  border: 0;
}
.stat i {
  display: block;
  color: #bc76ff;
  font-size: 23px;
}
.stat b {
  display: block;
  font: 700 29px "Space Grotesk";
  color: #a557ff;
}
.stat small {
  font-size: 12px;
}
.about-panel,
.service-card,
.testimonial,
.contact-form {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #11101c, #0b0b12);
  border-radius: 11px;
}
.about-panel {
  padding: 42px;
}
.about-panel h3 {
  font-size: 28px;
}
.quote-mark {
  display: block;
  font: 70px/45px "Space Grotesk";
  color: #a456ff;
}
.about-panel p,
.service-card p,
.project-card p,
.process-row p,
.testimonial p {
  color: var(--muted);
  font-size: 14px;
}
.about-panel h5 i {
  color: #a557ff;
}
.avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 50px;
  border-radius: 50%;
  font-weight: 700;
}
.service-card {
  height: 100%;
  padding: 28px;
  transition: 0.25s;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: #7540b4;
  box-shadow: 0 15px 35px #4c159b22;
}
.service-card > i {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 23px;
  border-radius: 50%;
  font-size: 22px;
  color: #d5adff;
  background: radial-gradient(circle at 35% 30%, #6431af, #1e103a 68%);
}
.service-card h3 {
  font-size: 18px;
}
.filter-group {
  display: flex;
  gap: 6px;
}
.filter {
  border: 1px solid #3a3445;
  border-radius: 6px;
  background: transparent;
  color: #ded8e6;
  font: 600 13px "DM Sans";
  padding: 7px 12px;
}
.filter.active,
.filter:hover {
  border-color: #9a4eff;
  color: #fff;
  background: #5d25bf;
}
.project-card {
  overflow: hidden;
  border-radius: 5px;
}
.project-visual {
  height: 220px;
  display: flex;
  align-items: center;
  padding: 28px;
  color: #fff;
  font: 700 26px/1.05 "Space Grotesk";
  letter-spacing: -0.05em;
}
.shop {
  background:
    radial-gradient(circle at 80% 10%, #a259ff, transparent 27%),
    linear-gradient(135deg, #131527, #522185);
}
.dashboard {
  background: linear-gradient(135deg, #101928, #33235c);
}
.portfolio {
  background:
    radial-gradient(circle at 70% 40%, #2454ae, transparent 15%),
    linear-gradient(135deg, #091724, #22113f);
}
.food {
  background:
    radial-gradient(circle at 70% 30%, #bd4e0b, transparent 17%),
    linear-gradient(135deg, #602100, #26100b);
}
.project-body {
  padding: 24px;
}
.project-body small {
  font-size: 10px;
  color: #c783ff;
  letter-spacing: 1.3px;
}
.project-body h3 {
  margin: 8px 0;
  font-size: 23px;
}
.project {
  transition: 0.25s;
}
.project.hidden {
  display: none;
}
.process-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
  gap: 16px;
}
.process-row:before {
  content: "";
  position: absolute;
  top: 34px;
  width: 80%;
  left: 10%;
  border-top: 2px dotted #8435e9;
}
.process-row article {
  text-align: center;
  position: relative;
  z-index: 1;
}
.process-row i {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin: auto;
  border-radius: 50%;
  font-size: 28px;
  color: #c586ff;
  border: 1px solid #6d36b2;
  background: #100c21;
}
.process-row b {
  display: block;
  font-size: 10px;
  color: #c0afcf;
  margin-top: 9px;
}
.process-row h3 {
  font-size: 17px;
  margin: 6px 0;
}
.testimonials {
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #0d0c16;
}
.testimonial {
  height: 100%;
  padding: 20px;
}
.testimonial > span {
  float: left;
  font: 50px/35px "Space Grotesk";
  color: #a757ff;
  margin-right: 12px;
}
.testimonial > b {
  display: block;
  color: #ffd630;
  letter-spacing: 3px;
  font-size: 13px;
}
.testimonial small {
  display: block;
  margin-top: 11px;
}
.carousel-indicators [data-bs-target] {
  width: 20px;
  height: 3px;
  border: 0;
  border-radius: 8px;
  background: #a758ff;
}
.contact-section {
  background:
    radial-gradient(ellipse at 60% 30%, #3c137c78, transparent 60%), #0a0912;
}
.contact-detail {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 15px;
  color: #ddd5e8;
}
.contact-detail i {
  color: #bb75ff;
  font-size: 20px;
}
.contact-form {
  padding: 28px;
}
.contact-form label {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
}
.form-control,
.form-select {
  background: #090911;
  border: 1px solid #393242;
  color: #fff;
  padding: 12px;
}
.form-control:focus,
.form-select:focus {
  background: #090911;
  color: #fff;
  border-color: #a758ff;
  box-shadow: 0 0 0 0.2rem #6f34bd33;
}
.form-message {
  min-height: 20px;
  margin: 12px 0 0;
  font-size: 13px;
}
.form-message.success {
  color: #81e4ae;
}
.form-message.error {
  color: #ff9a9a;
}
.modal-content {
  background: #10101a;
  border: 1px solid #4a3670;
  color: #fff;
}
.modal-header,
.modal-footer {
  border-color: #332a42;
}
.back-top {
  display: none;
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 10;
  width: 43px;
  height: 43px;
  color: #fff;
  border: 0;
  border-radius: 50%;
  background: #7732dd;
  box-shadow: 0 6px 18px #0006;
}
.back-top.show {
  display: block;
}
footer {
  padding: 25px 0;
  background: #08080e;
  color: #aaa5b3;
  font-size: 13px;
}
@media (max-width: 991px) {
  .hero {
    padding-top: 130px;
  }
  .device-stage {
    max-width: 580px;
    margin: auto;
  }
  .process-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .process-row:before {
    display: none;
  }
}
@media (max-width: 575px) {
  .section-pad {
    padding: 72px 0;
  }
  .hero-copy,
  .lead-copy {
    font-size: 15px;
  }
  .device-stage {
    height: 280px;
    transform: scale(0.84);
    transform-origin: top left;
    width: 119%;
    margin-bottom: -40px;
  }
  .laptop {
    height: 205px;
  }
  .phone {
    height: 220px;
  }
  .stat {
    padding: 18px 5px;
  }
  .stat:nth-child(2) {
    border-right: 0;
  }
  .stat:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  .process-row {
    grid-template-columns: 1fr 1fr;
  }
  .project-visual {
    height: 175px;
  }
  .contact-form {
    padding: 20px;
  }
}
/* Brand, typography, and motion refinements */
:root {
  --violet: #7c3aed;
  --violet2: #a855f7;
  --blue: #2563eb;
}
body {
  font-family: "Manrope", sans-serif;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: "Sora", sans-serif;
}
.navbar-brand {
  font: inherit;
}
.navbar-brand img {
  display: block;
  width: 180px;
  height: auto;
}
.brand-mark {
  display: none;
}
.btn {
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.btn-violet {
  background: linear-gradient(110deg, #2563eb, #7c3aed 48%, #a855f7);
}
.device-stage {
  animation: device-float 12s ease-in-out infinite;
}
.orb {
  animation: orb-breathe 8s ease-in-out infinite;
}
.service-card:hover > i {
  animation: icon-pop 0.55s ease;
}
.project-card {
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.project-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 40px #0008;
}
.footer-logo {
  width: 130px;
  height: auto;
}
.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
@keyframes device-float {
  50% {
    transform: translateY(-3px);
  }
}
@keyframes orb-breathe {
  50% {
    transform: scale(1.035);
    opacity: 0.9;
  }
}
@keyframes icon-pop {
  50% {
    transform: scale(1.16) rotate(-7deg);
  }
}
.legacy-projects {
  display: none;
}
.reference-showcase {
  border: 1px solid #292637;
  border-radius: 10px;
  padding: 7px;
  background: #0b0b13;
}
.showcase-feature {
  display: grid;
  grid-template-columns: 50% 1fr 35px;
  min-height: 315px;
  gap: 26px;
}
.showcase-image {
  position: relative;
  width: 100%;
  height: 300px;

  overflow: hidden;
  border-radius: 7px;
  background:
    radial-gradient(circle at 75% 20%, #7e31ca 0, transparent 24%),
    linear-gradient(135deg, #171521, #2c1551);
}
.showcase-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.shop-browser {
  position: absolute;
  width: 74%;
  height: 72%;
  top: 14%;
  left: 13%;
  padding: 16px;
  transform: rotate(-7deg);
  border: 6px solid #27242d;
  border-radius: 7px;
  background: #efeff6;
  box-shadow: 0 22px 30px #000;
}
.shop-browser span {
  display: block;
  height: 48%;
  padding: 20px;
  background: linear-gradient(135deg, #25104f, #8d49e9);
  font: 700 19px/1.05 "Sora";
  color: #fff;
}
.shop-browser i {
  display: inline-block;
  width: 17%;
  height: 27%;
  margin: 11px 3%;
  background: linear-gradient(145deg, #decdfa, #6d3ac0);
  border-radius: 3px;
}
.shop-phone {
  position: absolute;
  width: 80px;
  height: 145px;
  right: 7%;
  bottom: 9%;
  border: 5px solid #d4d2dc;
  border-radius: 13px;
  background: linear-gradient(150deg, #11101c, #6540aa);
  box-shadow: 0 10px 20px #000;
  transform: rotate(-8deg);
}
.showcase-copy {
  padding: 31px 0;
}
.showcase-copy small {
  color: #c783ff;
  font-size: 10px;
  letter-spacing: 1.3px;
}
.showcase-copy h3 {
  margin: 13px 0;
  font-size: 27px;
}
.showcase-copy p {
  font-size: 13px;
  color: #c0bbc7;
}
.feature-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin: 22px 0;
  font-size: 12px;
}
.feature-points i {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 50%;
  color: #fff;
  background: #6f2bc6;
}
.showcase-steps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  color: #a8a1b4;
  font-size: 12px;
}
.showcase-steps b {
  color: #c877ff;
  font-size: 16px;
}
.showcase-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.mini-work h4{
  padding-top: 5px;
}
.mini-work {
  position: relative;
  padding: 10px 9px 13px;
  border: 1px solid #2b2838;
  border-radius: 7px;
  background: #11111a;
}
.mini-work img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  overflow: hidden;
}

.mini-work.blue > div {
  background: linear-gradient(135deg, #e8eaff, #7653d5);
}
.mini-work.dash > div {
  background:
    radial-gradient(circle at 67% 27%, #8a50d6, transparent 13%),
    linear-gradient(135deg, #111b2c, #33204c);
}
.mini-work.creator > div {
  background:
    radial-gradient(circle at 73% 45%, #2d63c9, transparent 12%),
    linear-gradient(135deg, #111a24, #180d31);
}
.mini-work.burger > div {
  background:
    radial-gradient(circle at 70% 43%, #dc6d19, transparent 16%),
    linear-gradient(135deg, #55200d, #1d0e09);
}
.mini-work h4 {
  font-size: 13px;
  margin: 0;
}
.mini-work small {
  font-size: 11px;
  color: #bdb5c6;
}
.mini-work button {
  position: absolute;
  right: 9px;
  bottom: 13px;
  border: 0;
  border-radius: 50%;
  background: #25143f;
  color: #bf7cff;
}
.project-detail {
  cursor: pointer;
}
@media (max-width: 991px) {
  .showcase-feature {
    grid-template-columns: 1fr;
  }

  .showcase-copy {
    padding: 12px 18px;
  }
  .showcase-steps {
    display: none;
  }
}
@media (max-width: 575px) {
  .navbar-brand img {
    width: 145px;
  }
  .showcase-mini-grid {
    grid-template-columns: 1fr 1fr;
  }
  .mini-work > div {
    height: 95px;
  }
  .project-card {
    border-radius: 7px;
    overflow: hidden; /* ensures image respects rounded corners */
    background: #11111a; /* fallback background */
  }

  .project-card .image-box {
    width: 100%;
    height: 180px; /* fixed height for uniform cards */
    overflow: hidden; /* crops anything outside */
  }

  .project-card .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fills box neatly without distortion */
    display: block; /* removes inline gaps */
  }

  .feature-points {
    grid-template-columns: 1fr;
  }
  .showcase-copy h3 {
    font-size: 22px;
  }
}
.all-work-link {
  color: #b56dff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.all-work-link:hover {
  color: #e4c7ff;
}
.showcase-steps {
  align-items: center;
}
.showcase-step {
  padding: 0;
  border: 0;
  background: transparent;
  color: #aaa2b6;
  font: 600 12px "Sora";
  cursor: pointer;
  transition:
    color 0.2s,
    transform 0.2s;
}
.showcase-step:hover,
.showcase-step.active {
  color: #c877ff;
  transform: scale(1.18);
}
.showcase-image {
  transition:
    background 0.35s ease,
    opacity 0.25s ease;
}
.showcase-image.dashboard-feature {
  background:
    radial-gradient(circle at 75% 20%, #3169b6 0, transparent 24%),
    linear-gradient(135deg, #111d2d, #261545);
}
.showcase-image.portfolio-feature {
  background:
    radial-gradient(circle at 70% 25%, #a755eb 0, transparent 22%),
    linear-gradient(135deg, #1c0d33, #101522);
}
@media (max-width: 991px) {
  .navbar {
    background: #090911f2;
    backdrop-filter: blur(14px);
  }
  .navbar-collapse {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #3b314b;
    border-radius: 10px;
    background: #100d19;
    box-shadow: 0 16px 30px #0008;
  }
  .navbar-nav {
    gap: 2px !important;
  }
  .nav-link {
    padding: 10px 12px !important;
  }
  .nav-cta {
    display: inline-flex;
    margin: 12px 0 3px;
  }
}
.device-stage {
  animation: none !important;
  display: grid;
  place-items: center;
}
.hero-device {
  position: relative;
  z-index: 2;
  display: block;
  width: 118%;
  max-width: 690px;
  height: auto;
  filter: drop-shadow(0 28px 30px #000a);
  animation: hero-image-float 8s ease-in-out infinite;
  will-change: transform;
}
@keyframes hero-image-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -7px, 0);
  }
}
@media (max-width: 575px) {
  .hero-device {
    width: 104%;
    animation-duration: 9s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-device {
    animation: none !important;
  }
}
.stat i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 8px;
  border: 1px solid #6935b0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #52258f, #160c2b 68%);
  box-shadow: 0 0 18px #7125c455;
  color: #c27aff;
  font-size: 21px;
}
.stat b {
  font-family: "Sora", sans-serif;
}
.hero-device {
  animation: desktop-hero-float 5.5s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
  transform-origin: center bottom;
}
@keyframes desktop-hero-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -14px, 0) scale(1.012);
  }
}

/* --- Image Fix Overrides --- */
.project-card {
  overflow: hidden;
  border-radius: 5px;
}

.project-card .image-box {
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.project-card .image-box img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

#showcaseDemo{
  display:none
}