@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

    :root {
      --ink: #0b0924;
      --blue: #3622ff;
      --pink: #ff426d;
      --yellow: #fff176;
      --muted: #b5b1d2;
      --line: rgba(255, 255, 255, .15)
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 110px
    }

    body {
      margin: 0;
      background: var(--ink);
      color: #fff;
      font-family: Manrope, sans-serif;
      line-height: 1.6
    }

    button,
    input,
    select,
    textarea {
      font: inherit
    }

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

    button,
    a {
      -webkit-tap-highlight-color: transparent
    }

    button {
      cursor: pointer
    }

    h1,
    h2,
    h3,
    p {
      margin: 0
    }

    h1,
    h2,
    h3 {
      font-family: Manrope, sans-serif;
      line-height: 1.08;
      letter-spacing: -.055em
    }

    p {
      color: var(--muted)
    }

    h2 {
      font-size: clamp(36px, 4.5vw, 62px);
      font-weight: 700
    }

    h3 {
      font-size: 25px;
      letter-spacing: -.035em
    }

    .wrap {
      max-width: 1240px;
      width: calc(100% - 80px);
      margin: auto
    }

    .section {
      padding: 110px 0
    }

    .eyebrow {
      font-size: 11px;
      letter-spacing: .18em;
      font-weight: 700;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px
    }

    .eyebrow:before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--pink);
      box-shadow: 0 0 15px var(--pink)
    }

    .gradient {
      background: linear-gradient(110deg, #9986ff, #d9c5ff 45%, #ff7fab 70%, #fff09c);
      background-size: 200%;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      animation: shade 8s ease infinite
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 15px 25px;
      border: 1px solid var(--line);
      border-radius: 100px;
      font-size: 13px;
      font-weight: 600;
      transition: transform .3s, box-shadow .3s;
      background: transparent;
      color: inherit
    }

    .btn:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px #5139ff45
    }

    .btn.primary {
      background: #fff;
      color: var(--ink);
      border-color: #fff
    }

    .btn.blue {
      background: var(--blue);
      color: #fff;
      border-color: var(--blue)
    }

    .btn.yellow {
      background: var(--yellow);
      color: var(--ink);
      border-color: var(--yellow)
    }

    .arrow {
      font-size: 20px
    }

    .head {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      width: calc(100% - 60px);
      max-width: 1280px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 25px;
      background: rgba(20, 15, 48, .65);
      backdrop-filter: blur(22px);
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: 0 10px 40px #0002
    }

    .logo img {
      width: 156px;
      display: block
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 30px;
      font-size: 12px
    }

    .nav a:not(.btn) {
      position: relative
    }

    .nav a:not(.btn):after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -7px;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, #8a70ff, var(--pink));
      transition: .3s
    }

    .nav a:hover:after {
      width: 100%
    }

    .head .btn {
      padding: 10px 19px;
      font-size: 12px
    }

    .menu {
      display: none;
      background: none;
      border: 0;
      color: white;
      font-size: 25px
    }

    .hero {
      position: relative;
      overflow: hidden;
      min-height: 900px;
      padding: 190px 0 75px;
      background: radial-gradient(ellipse at 82% 44%, #36226c 0, transparent 43%), radial-gradient(ellipse at 15% 5%, #30217c55, transparent 48%), #0b0924
    }

    .hero:before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: .2;
      background-image: linear-gradient(#8871bf20 1px, transparent 1px), linear-gradient(90deg, #8871bf20 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: linear-gradient(black, transparent)
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.03fr 1fr;
      align-items: center;
      gap: 30px;
      position: relative
    }

    .hero h1 {
      font-size: clamp(54px, 6.8vw, 91px);
      font-weight: 700;
      line-height: 1.06;
      max-width: 680px
    }

    .hero p {
      max-width: 430px;
      margin: 28px 0 31px;
      font-size: 16px;
      line-height: 1.8
    }

    .actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    .hero-tag {
      display: inline-flex;
      border: 1px solid #b099ff44;
      background: #7c51ff12;
      padding: 7px 12px;
      border-radius: 50px;
      font-size: 18px;
      
      margin-bottom: 28px;
      color: aqua;
    }
    .mobile {
        display: none;
    }
    .hero-tag span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #a995ff;
      margin: 5px 8px 0 0
    }

    .hero-bottom {
      margin-top: 70px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid var(--line);
      padding-top: 28px;
      font-size: 11px;
      color: #b1a8cf;
      letter-spacing: .08em;
      display: none
    }

    .hero-bottom strong {
      display: block;
      color: #fff;
      font-size: 23px;
      letter-spacing: -.04em;
      margin-bottom: 4px
    }

    .hero-bottom .scroll {
      display: flex;
      gap: 14px;
      align-items: center
    }

    .scroll i {
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      width: 34px;
      height: 34px;
      border-radius: 50%;
      font-style: normal
    }

    .orbital {
      height: 520px;
      position: relative;
      perspective: 1000px;
      --mx: 0deg;
      --my: 0deg
    }

    .orbital-inner {
      width: 100%;
      height: 100%;
      transform: rotateX(var(--my)) rotateY(var(--mx));
      transition: transform .3s
    }

    .orb {
      position: absolute;
      width: 365px;
      height: 365px;
      left: 50%;
      top: 48%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(circle at 30% 25%, #9980ff88, #3921d02b 40%, #ff57971c 70%, #151036);
      box-shadow: inset 0 0 60px #c3b2ff26, 0 0 100px #6648ff36;
      border: 1px solid #a592ff45;
      backdrop-filter: blur(5px)
    }

    .orb:before,
    .orb:after {
      content: '';
      position: absolute;
      inset: -37px;
      border: 1px solid #b6a0ff35;
      border-radius: 50%;
      transform: rotate(-30deg) scaleY(.44);
      animation: orbit 18s linear infinite
    }

    .orb:after {
      inset: -65px;
      transform: rotate(60deg) scaleY(.55);
      animation-direction: reverse
    }

    .orb .mark {
      width: 195px;
      height: 240px;
      object-fit: contain;
      position: absolute;
      top: 60px;
      left: 85px;
      filter: drop-shadow(10px 16px 0 #291994) drop-shadow(0 0 30px #b09cff);
      animation: float 6s ease-in-out infinite
    }

    .star {
      position: absolute;
      color: #fff3a2;
      font-size: 47px;
      top: 36px;
      right: 30px;
      animation: spin 18s linear infinite
    }

    .satellite {
      position: absolute;
      border: 1px solid #fff3;
      background: linear-gradient(130deg, #fff2, #ffffff08);
      backdrop-filter: blur(20px);
      border-radius: 20px;
      padding: 17px 21px;
      box-shadow: 0 15px 40px #0003;
      animation: float 7s ease-in-out infinite;
      font-size: 11px
    }

    .satellite strong {
      display: block;
      font-size: 13px;
      margin-top: 4px
    }

    .satellite.one {
      top: 50px;
      left: 3px;
      transform: rotate(-7deg)
    }

    .satellite.two {
      top: 100px;
      right: -20px;
      animation-delay: -2s
    }
    

    .satellite.three {
      bottom: 16px;
      left: 15px;
      animation-delay: -4s
    }
    .satellite.four {
      top: 300px;
      right: -5px;
      animation-delay: -2s;
      transform: rotate(7deg)
    }

    .mini-icon {
      font-size: 25px;
      color: #bda7ff;
      margin-bottom: 7px;
      display: block
    }

    .satellite.two .mini-icon {
      color: #fff
    }
    .mini-icon {
      color: #fff
    }
    .dot {
      position: absolute;
      width: 17px;
      height: 17px;
      left: 20%;
      top: 52%;
      border-radius: 50%;
      background: linear-gradient(135deg, #fff59b, #ff8f57);
      box-shadow: 0 0 24px #ffca8966
    }

    .dot.d2 {
      width: 9px;
      height: 9px;
      left: 84%;
      top: 78%;
      background: #ff78a4
    }

    .marquee {
      overflow: hidden;
      padding: 22px 0;
      background-color: #3026EA;
      
      width: 101%;
      margin: 0 -.5%;
      position: relative;
      z-index: 2
    }

    .marquee-inner {
      display: flex;
      width: max-content;
      animation: marquee 32s linear infinite;
      gap: 30px;
      font-size: 18px;
      
      font-family: Manrope, sans-serif;
      
    }

    .marquee-inner b {
      color: #fff176;
      font-size: 18px
    }

    .light {
      background: #f4f3fb;
      color: var(--ink);
      --muted: #68667b;
      --line: #dedce9
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 30px;
      margin-bottom: 45px
    }

    /*.section-head p {*/
    /*  max-width: 330px;*/
    /*  font-size: 14px*/
    /*}*/

    .services {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px
    }

    .card {
      position: relative;
      overflow: hidden;
      border-radius: 27px;
      background: white;
      border: 1px solid #e7e4f0;
      padding: 32px;
      isolation: isolate;
      transition: transform .35s, box-shadow .35s
    }

    .card:hover {
      transform: translateY(-7px);
      box-shadow: 0 20px 45px #3a24a41a
    }

    .card p {
      font-size: 13px;
      margin-top: 15px;
      line-height: 1.8
    }

    .card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 35px
    }

    .card .icon {
      display: grid;
      place-items: center;
      width: 51px;
      height: 51px;
      border-radius: 15px;
      background: #ece8ff;
      color: var(--blue);
      font-size: 24px
    }

    .card .number {
      color: #a09ab7;
      font-size: 11px
    }

    .card h3 {
      max-width: 220px
    }

    .card.featured {
      background: linear-gradient(140deg, #3622ff, #6843dc);
      color: #fff
    }

    .card.featured p {
      color: #ddd3ff
    }

    .card.featured .icon {
      background: #ffffff21;
      color: #fff
    }

    .card.featured .number {
      color: #cec4fc
    }

    .card-link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 25px;
      font-size: 11px;
      font-weight: 600
    }

    .beam:before {
      content: '';
      position: absolute;
      inset: 0;
      border: 1.5px solid transparent;
      border-radius: inherit;
      background: conic-gradient(from var(--angle), transparent 35%, #8871ff, #ff648e, #ffed97, transparent 80%) border-box;
      mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      pointer-events: none;
      animation: beam 5s linear infinite;
      opacity: .4
    }

    .beam:hover:before {
      opacity: 1
    }

    @property --angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false
    }

    .all-services {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 25px
    }

    .pill {
      border: 1px solid #ddd9ed;
      border-radius: 100px;
      padding: 10px 17px;
      font-size: 11px;
      background: #ffffff88
    }

    .web {
      background: radial-gradient(ellipse at 10% 70%, #3c268c55, transparent 60%), #0d0a28;
      position: relative;
      overflow: hidden
    }

    .web-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 90px;
      align-items: center
    }

    .web h2 {
      max-width: 540px
    }

    .web-copy>p {
      margin: 25px 0;
      font-size: 14px;
      max-width: 470px
    }

    .web .eyebrow {
      color: #cab9ff
    }

    .checklist {
      display: grid;
      grid-template-columns: auto;
      gap: 18px 12px;
      margin: 30px 0 35px;
      font-size: 12px;
      color: #dad3ed
    }

    .checklist span:before {
      content: '✓';
      color: #b9a3ff;
      margin-right: 10px
    }

    .browser-art {
      position: relative;
      padding-bottom: 50px
    }

    .window {
      border: 1px solid #fff3;
      border-radius: 22px;
      overflow: hidden;
      box-shadow: 0 35px 80px #0004;
      background: #eeedf6;
      transform: rotate(-5deg);
      transition: .4s
    }

    .window:hover {
      transform: rotate(0)
    }

    .windowbar {
      background: #fff;
      color: #978fa9;
      font-size: 10px;
      padding: 13px 16px;
      display: flex;
      gap: 5px;
      align-items: center
    }

    .windowbar i {
      display: block;
      width: 6px;
      height: 6px;
      background: #ded9e9;
      border-radius: 50%
    }

    .windowbar span {
      margin: auto
    }

    .mini-website {
      padding: 25px;
      background: #e8e3ff;
      color: #18113f
    }

    .mini-nav {
      display: flex;
      justify-content: space-between;
      font-size: 9px;
      font-weight: 600
    }

    .mini-hero {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      align-items: center;
      gap: 15px;
      padding: 35px 0
    }

    .mini-hero h3 {
      font-size: 36px;
      letter-spacing: -.05em
    }

    .mini-hero p {
      font-size: 8px;
      color: #675982;
      margin: 10px 0
    }

    .mini-button {
      display: inline-block;
      padding: 7px 11px;
      background: #3421f1;
      color: #fff;
      border-radius: 20px;
      font-size: 7px
    }

    .sculpture {
      height: 170px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative
    }

    .sculpture:before {
      content: '';
      width: 120px;
      height: 120px;
      border: 28px solid #7652fc;
      border-radius: 35px;
      transform: rotate(-32deg);
      box-shadow: inset 5px 8px 10px #2b139d, 12px 15px 0 #301497, 25px 35px 25px #31189b50;
      background: linear-gradient(135deg, #e7deff, #b5a5ff);
      animation: float 5s infinite
    }

    .mini-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px
    }

    .mini-row div {
      height: 48px;
      background: #ffffff88;
      border-radius: 10px;
      padding: 10px;
      font-size: 7px
    }

    .care-tag {
      position: absolute;
      right: -25px;
      bottom: 12px;
      background: #221a47dd;
      border: 1px solid #ffffff38;
      backdrop-filter: blur(15px);
      padding: 21px 25px;
      border-radius: 20px;
      box-shadow: 0 10px 40px #0004;
      animation: float 6s infinite
    }

    .care-tag strong {
      font-size: 14px
    }

    .care-tag p {
      font-size: 10px;
      margin-top: 3px
    }

    .status {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #91edb3;
      display: inline-block;
      margin-right: 8px;
      box-shadow: 0 0 20px #91edb3
    }

    .code-tag {
      position: absolute;
      top: -26px;
      right: 8px;
      background: var(--yellow);
      color: var(--ink);
      border-radius: 14px;
      padding: 11px 17px;
      font-size: 11px;
      transform: rotate(7deg)
    }

    .work {
      padding-bottom: 95px
    }

    .filters {
      display: flex;
      gap: 8px;
      margin-bottom: 30px;
      flex-wrap: wrap
    }

    .filter {
      border: 1px solid #dbd7e8;
      background: transparent;
      border-radius: 50px;
      padding: 10px 19px;
      font-size: 11px;
      color: #6a647d
    }

    .filter.active {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink)
    }

    .portfolio {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 25px
    }

    .project {
      background: white;
      border-radius: 28px;
      border: 1px solid #e0ddeb;
      overflow: hidden
    }

    .project[hidden] {
      display: none
    }

    .project-image {
      height: 310px;
      padding: 32px;
      overflow: hidden;
      background: #d8d1ec;
      position: relative;
      cursor: pointer
    }

    .project-image .project-window {
      height: 310px;
      background: #f7f4ed;
      color: #172b24;
      padding: 20px;
      border-radius: 12px;
      transform: rotate(-5deg) translateY(25px);
      box-shadow: 0 25px 40px #2c185f30;
      transition: transform .5s
    }

    .project-image:hover .project-window {
      transform: rotate(0) translateY(8px)
    }

    .project-window .small-nav {
      display: flex;
      justify-content: space-between;
      font-size: 8px
    }

    .project-window h3 {
      font-family: Georgia, serif;
      font-size: 46px;
      font-weight: 400;
      max-width: 260px;
      margin: 30px 0 13px;
      line-height: 1.1
    }

    .project-window p {
      font-size: 9px;
      color: #50685f;
      max-width: 220px
    }

    .plant {
      position: absolute;
      right: 40px;
      top: 85px;
      width: 90px;
      height: 125px;
      background: linear-gradient(130deg, #b4bd72, #335d40);
      border-radius: 90% 0 90% 0;
      transform: rotate(-30deg);
      box-shadow: 25px 45px 0 #86a477, 55px -30px 0 #56794d;
      opacity: .8
    }

    .project:nth-child(2) .project-image {
      background: linear-gradient(135deg, #efb7c7, #c998f7)
    }

    .project:nth-child(2) .project-window {
      background: #231732;
      color: white;
      transform: rotate(5deg) translateY(25px)
    }

    .project:nth-child(2) .project-image:hover .project-window {
      transform: rotate(0) translateY(8px)
    }

    .project:nth-child(2) h3 {
      font-family: Manrope;
      font-size: 37px;
      font-weight: 700
    }

    .project:nth-child(2) p {
      color: #cec0da
    }

    .poster-orb {
      position: absolute;
      width: 140px;
      height: 140px;
      border-radius: 50%;
      right: 40px;
      bottom: 20px;
      background: radial-gradient(circle at 30% 20%, #f1bfff, #be5de6 50%, #4c236d);
      box-shadow: 0 0 50px #bc77e77a
    }

    .project-info {
      padding: 24px 28px;
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .project-info h3 {
      font-size: 20px;
      letter-spacing: -.035em
    }

    .project-info p {
      font-size: 10px;
      margin-top: 7px
    }

    .round-btn {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      background: #eeeaff;
      border: 0;
      border-radius: 50%;
      color: var(--blue);
      font-size: 19px;
      transition: .3s
    }

    .round-btn:hover {
      background: var(--blue);
      color: #fff;
      transform: rotate(45deg)
    }

    .note {
      font-size: 10px;
      margin-top: 18px;
      color: #82798d
    }

    .offers {
      padding: 0 0 100px
    }

    .offer-grid {
      display: grid;
      grid-template-columns: 1.65fr 1fr;
      gap: 22px
    }

    .offer {
      border-radius: 32px;
      position: relative;
      overflow: hidden;
      padding: 40px;
      background: linear-gradient(120deg, #3826e9, #7551d8);
      color: white;
      min-height: 300px
    }

    .offer:after {
      content: '';
      position: absolute;
      width: 220px;
      height: 220px;
      right: -70px;
      bottom: -70px;
      border: 40px solid #ffffff15;
      border-radius: 60px;
      transform: rotate(35deg)
    }

    .offer h3 {
      font-size: 39px;
      max-width: 470px;
      margin: 16px 0
    }

    .offer p {
      color: #ddd4fa;
      max-width: 350px;
      font-size: 13px;
      margin-bottom: 25px
    }

    .offer .eyebrow {
      font-size: 9px;
      margin-bottom: 0
    }

    .offer.secondary {
      background: linear-gradient(135deg, #ffdfed, #e3d6ff);
      color: var(--ink)
    }

    .offer.secondary h3 {
      font-size: 32px
    }

    .offer.secondary p {
      color: #6c587d
    }

    .offer.secondary .btn {
      border-color: #9981b9
    }

    .offer .sparkle {
      position: absolute;
      right: 26px;
      top: 25px;
      font-size: 48px;
      color: #fff09b;
      animation: spin 25s infinite linear
    }

    .offer-label {
      font-size: 9px;
      margin-top: 17px;
      opacity: .75
    }

    .about {
      position: relative;
      background: radial-gradient(ellipse at 90% 15%, #402e7c55, transparent 60%), #100c29
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 90px;
      align-items: start
    }

    .about h2 {
      font-size: 49px
    }

    .about p {
      font-size: 14px;
      margin: 23px 0
    }

    .value {
      padding: 22px 0;
      border-bottom: 0px solid var(--line);
      display: flex;
      gap: 20px
    }

    .value span {
      font-size: 11px;
      color: #b297ff
    }

    .value h3 {
      font-size: 20px
    }

    .value p {
      font-size: 12px;
      margin: 10px 0 0
    }

    .clients {
      margin-top: 60px;
      padding-top: 35px;
      border-top: 1px solid var(--line)
    }

    .clients .eyebrow {
      font-size: 9px;
      color: #8d839e
    }

    .client-names {
      display: flex;
      justify-content: space-between;
      gap: 25px;
      flex-wrap: wrap;
      color: #e6deef;
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -.025em
    }

    .process {
      padding: 95px 0
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-top: 45px
    }

    .step {
      border-top: 1px solid #d2cede;
      padding-top: 22px
    }

    .step b {
      display: inline-block;
      font-size: 11px;
      color: var(--blue);
      margin-bottom: 25px
    }

    .step h3 {
      font-size: 21px
    }

    .step p {
      font-size: 12px;
      margin-top: 14px
    }

    .contact {
      padding: 95px 0;
      background: radial-gradient(ellipse at 15% 20%, #33228b88, transparent 65%), #0d0925
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 100px
    }

    .contact h2 {
      font-size: 62px
    }

    .contact p {
      font-size: 14px;
      margin: 23px 0 30px;
      max-width: 380px
    }

    .contact-links a {
      display: block;
      margin: 12px 0;
      font-size: 16px
    }

    .contact small {
      display: block;
      color: #a99dbf;
      margin-top: 35px;
      font-size: 11px
    }

    .form {
      padding: 30px;
      background: #ffffff07;
      border: 1px solid var(--line);
      border-radius: 26px
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px
    }

    .form label {
      display: block;
      font-size: 11px;
      color: #c7badb;
      margin: 0 0 8px
    }

    .form input,
    .form select,
    .form textarea {
      width: 100%;
      border: 1px solid #ffffff20;
      border-radius: 12px;
      background: #120d2f;
      color: #fff;
      padding: 12px;
      font-size: 12px;
      margin-bottom: 18px;
      outline: none
    }

    .form input:focus,
    .form select:focus,
    .form textarea:focus {
      border-color: #b6a4ff
    }

    .form textarea {
      resize: vertical;
      min-height: 100px
    }

    .form .btn {
      width: 100%
    }

    .form-note {
      font-size: 10px !important;
      margin: 13px 0 0 !important;
      color: #ab9bc6 !important
    }

    .footer {
      border-top: 1px solid var(--line);
      padding: 35px 0
    }

    .footer .wrap {
      display: flex;
      justify-content: space-between;
      gap: 30px;
      align-items: center;
      font-size: 10px;
      color: #9c91b3
    }

    .footer img {
      width: 130px
    }

    .footer-links {
      display: flex;
      gap: 20px
    }

    .progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      background: linear-gradient(90deg, #6a43ff, #ff6c96, #fff176);
      z-index: 50;
      width: 0
    }

    .reveal {
      opacity: 1;
      transform: none
    }

    .js-motion .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .8s, transform .8s
    }

    .js-motion .reveal.visible {
      opacity: 1;
      transform: none
    }

    .modal {
      border: 1px solid #ffffff30;
      border-radius: 25px;
      color: white;
      background: #17102e;
      padding: 35px;
      max-width: 550px;
      width: calc(100% - 40px);
      box-shadow: 0 30px 100px #0008
    }

    .modal::backdrop {
      background: #0b0924b0;
      backdrop-filter: blur(10px)
    }

    .modal h3 {
      font-size: 32px;
      margin: 20px 0
    }

    .modal p {
      font-size: 14px;
      margin-bottom: 25px
    }

    .modal .close {
      float: right;
      border: 0;
      background: #fff1;
      color: #fff;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      font-size: 20px
    }

    .motion-toggle {
      border: 0;
      background: none;
      color: #bcaed0;
      font-size: 10px;
      text-decoration: underline
    }

    .no-motion *,
    .no-motion *:before,
    .no-motion *:after {
      animation: none !important;
      scroll-behavior: auto !important;
      transition: none !important
    }

    .no-motion .reveal {
      opacity: 1;
      transform: none
    }

    @keyframes float {
      50% {
        translate: 0 -14px
      }
    }

    @keyframes shade {
      50% {
        background-position: 100%
      }
    }

    @keyframes spin {
      to {
        rotate: 360deg
      }
    }

    @keyframes orbit {
      50% {
        transform: rotate(45deg) scaleY(.55)
      }
    }

    @keyframes marquee {
      to {
        transform: translateX(-50%)
      }
    }

    @keyframes beam {
      to {
        --angle: 360deg
      }
    }

    @media(min-width:1450px) {
      .hero {
        min-height: 950px
      }

      .hero-grid {
        gap: 70px
      }
    }

    @media(max-width:1000px) {
      .wrap {
        width: calc(100% - 50px)
      }

      .nav {
        gap: 17px
      }

      .hero h1 {
        font-size: 65px
      }

      .orb {
        width: 280px;
        height: 280px
      }

      .orb .mark {
        width: 150px;
        height: 190px;
        left: 65px;
        top: 45px
      }

      .satellite {
        padding: 13px
      }

      .web-grid,
      .about-grid,
      .contact-grid {
        gap: 40px
      }

      .services {
        grid-template-columns: repeat(2, 1fr)
      }

      .section {
        padding: 80px 0
      }

      .project-window h3 {
        font-size: 34px
      }

      .plant {
        right: 20px;
        width: 70px
      }

      .checklist {
        grid-template-columns: 1fr
      }

      .hero {
        min-height: 830px
      }
    }

    @media(max-width:720px) {
      .wrap {
        width: calc(100% - 36px)
      }

      .head {
        top: 10px;
        width: calc(100% - 24px);
        padding: 15px 18px;
        border-radius: 18px
      }

      .logo img {
        width: 130px
      }

      .menu {
        display: block
      }

      .nav {
        display: none;
        position: absolute;
        top: 75px;
        left: 0;
        width: 100%;
        background: #181033;
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 25px;
        flex-direction: column;
        align-items: stretch
      }

      .nav.open {
        display: flex
      }

      .hero {
        padding: 145px 0 40px;
        min-height: auto
      }

      .hero-grid,
      .web-grid,
      .about-grid,
      .contact-grid {
        grid-template-columns: 1fr
      }

      .hero h1 {
        font-size: clamp(49px, 11vw, 76px)
      }

      .hero p {
        font-size: 14px
      }

      .orbital {
        height: 430px;
        margin-top: 15px
      }

      .orb {
        width: 290px;
        height: 290px
      }

      .orb .mark {
        left: 70px;
        top: 45px
      }

      .satellite.one {
        left: 5px;
        top: 35px
      }

      .satellite.two {
        right: 0;
        top: 170px
      }

      .satellite.three {
        left: 10px;
        bottom: 10px
      }

      .hero-bottom {
        margin-top: 25px;
        gap: 20px;
        flex-wrap: wrap
      }

      .hero-bottom strong {
        font-size: 18px
      }

      .hero-bottom .scroll {
        display: none
      }

      .section-head {
        display: block
      }

      .section-head p {
        margin-top: 20px
      }

      .section {
        padding: 70px 0
      }

      .services,
      .portfolio,
      .offer-grid {
        grid-template-columns: 1fr
      }

      .card {
        padding: 26px
      }

      .card-top {
        margin-bottom: 25px
      }

      .web-grid {
        gap: 65px
      }

      .care-tag {
        right: 0
      }

      .web h2,
      .about h2,
      .contact h2 {
        font-size: 43px
      }

      .portfolio {
        gap: 20px
      }

      .project-image {
        height: 290px;
        padding: 25px
      }

      .offer {
        padding: 28px
      }

      .offer h3 {
        font-size: 34px
      }

      .steps {
        grid-template-columns: 1fr 1fr;
        gap: 28px
      }

      .client-names {
        justify-content: flex-start;
        gap: 20px 30px;
        font-size: 15px
      }

      .contact-grid {
        gap: 35px
      }

      .form {
        padding: 22px
      }

      .footer .wrap {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px
      }

      .offers {
        padding-bottom: 70px
      }

      .section-head .btn {
        margin-top: 25px
      }
      .mobile {
         display:block; 
      }
      #mobile.hero-tag {
      display: inline-flex;
      border: 0px solid #b099ff44 !important;
      background: none !important;
      padding: 7px 0px !important;
      border-radius: 50px;
      font-size: 16px;
      
      margin-bottom: 10px;
      color: aqua;
      font-weight: bold;
    }
    .pc {
        display: none;
    }
    }

    @media(prefers-reduced-motion:reduce) {

      *,
      *:before,
      *:after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important
      }

      .js-motion .reveal {
        opacity: 1;
        transform: none
      }
    }

    :focus-visible {
      outline: 3px solid #ffdf76;
      outline-offset: 5px
    }


    /* Reels & Content Production — scoped addition. */
    .reels-heading {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 70px;
      align-items: center;
      margin-bottom: 45px;
    }
    .reels .hero-tag { color: #3026EA; margin-bottom: 20px; }
    .reels-gradient {
      background: linear-gradient(110deg, #3622ff, #8752dc 65%, #d34688);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }
    .reels-intro { font-size: 14px; line-height: 1.9; }
    .reels-showcase {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }
    .reels-metrics { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
    .reels-metric, .reels-panel {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      border: 1px solid #ddd7ef;
      border-radius: 27px;
      transition: transform .35s, box-shadow .35s;
    }
    .reels-metric:hover, .reels-panel:hover { transform: translateY(-5px); box-shadow: 0 20px 45px #3a24a41a; }
    .reels-metric {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 25px 16px;
      background: linear-gradient(140deg, #3622ff, #6843dc);
      color: #fff;
      text-align: center;
      min-height: 164px;
    }
    .reels-metric strong { font-family: Manrope, sans-serif; font-size: clamp(38px, 4.5vw, 62px); line-height: 1.1; letter-spacing: -.055em; }
    .reels-metric span { font-size: 13px; margin-top: 8px; }
    .reels-metric-secondary { background: linear-gradient(135deg, #e6dfff, #f9e5ef); color: #4f367d; }
    .reels-metric-secondary span { margin: 0; font-size: 13px; font-weight: 600; }
    .reels-panel {
      min-height: 344px;
      background: linear-gradient(145deg, #ffffff, #eae3ff);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 25px;
      padding: 28px 16px;
      text-align: center;
    }
    .reels-panel p { font-size: 13px; line-height: 1.65; color: #665779; position: relative; }
    .reels-placeholder-icon { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 30px; background: #ffffff99; border: 1px solid #cbbbf1; color: #7652da; font-size: 55px; }
    .reels-panel-video { background: radial-gradient(ellipse at 70% 20%, #7650e955, transparent 70%), #171035; }
    .reels-panel-video p { color: #d4c5ef; }
    .reels-panel-performance { background: linear-gradient(145deg, #eee8ff, #e3eaff); }
    .reels-phone { width: 115px; height: 196px; border: 5px solid #c5b3ee; border-radius: 23px; position: relative; background: linear-gradient(145deg, #8158e3, #34217a 65%, #c066a6); box-shadow: 10px 15px 30px #12083030; display: grid; place-items: center; transform: rotate(-5deg); }
    .reels-phone-camera { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 36px; height: 8px; border-radius: 20px; background: #1d133b; }
    .reels-play { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #ffffff88; border-radius: 50%; color: white; background: #ffffff15; font-size: 14px; padding-left: 3px; }
    .reels-phone-lines { position: absolute; bottom: 22px; left: 12px; width: 55px; height: 4px; background: #ffffffaa; border-radius: 4px; box-shadow: 0 10px 0 #ffffff55; }
    .reels-phone-chart { transform: rotate(5deg); background: #fcfaff; border-color: #7761b6; }
    .reels-chart-bars { display: flex; align-items: flex-end; gap: 5px; height: 85px; padding-bottom: 5px; border-bottom: 1px solid #ddd3ef; }
    .reels-chart-bars i { width: 11px; height: 22px; background: linear-gradient(#a98ce9, #5131cb); border-radius: 5px 5px 0 0; }
    .reels-chart-bars i:nth-child(2) { height: 36px; }
    .reels-chart-bars i:nth-child(3) { height: 47px; }
    .reels-chart-bars i:nth-child(4) { height: 62px; }
    .reels-chart-bars i:nth-child(5) { height: 78px; }
    .reels-bottom { display: flex; justify-content: space-between; align-items: center; gap: 35px; margin-top: 40px; }
    .reels-bottom .eyebrow { margin-bottom: 16px; }
    .reels-benefits { list-style: none; padding: 0; margin: 0; color: #68667b; font-size: 14px; }
    .reels-benefits li { padding-left: 24px; position: relative; margin: 9px 0; }
    .reels-benefits li:before { content: '✓'; position: absolute; left: 0; color: #7652da; }
    .reels-benefits strong, .reels-outcome strong { color: var(--ink); }
    .reels-outcome { font-size: 14px; margin-top: 20px; }
    .reels-bottom .btn { flex-shrink: 0; }
    @media(max-width:1000px) {
      .reels-heading { gap: 35px; }
      .reels-showcase { gap: 12px; }
      .reels-metrics { gap: 12px; }
      .reels-panel { padding: 25px 12px; }
    }
    @media(max-width:720px) {
      .reels-heading { grid-template-columns: 1fr; gap: 25px; margin-bottom: 30px; }
      .reels-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .reels-panel { min-height: 310px; border-radius: 22px; }
      .reels-metric { min-height: 149px; border-radius: 22px; }
      .reels-bottom { align-items: flex-start; flex-direction: column; gap: 25px; margin-top: 30px; }
    }


    /* Paid campaigns and brand identity — scoped section additions. */
    .paid-growth {
      background: radial-gradient(ellipse at 85% 15%, #5436b64a, transparent 60%), radial-gradient(ellipse at 10% 95%, #263bae38, transparent 55%), #0d0a28;
      position: relative;
    }
    .growth-heading { display: grid; grid-template-columns: 1.15fr 1fr; gap: 70px; align-items: center; margin-bottom: 45px; }
    .growth-heading>p { font-size: 14px; line-height: 1.9; max-width: 470px; }
    .paid-growth .eyebrow { color: #cab9ff; }
    .paid-growth .hero-tag { letter-spacing: .035em; margin-bottom: 20px; }
    .growth-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    .growth-card { position: relative; isolation: isolate; overflow: hidden; border: 1px solid #ffffff29; border-radius: 27px; background: linear-gradient(135deg, #ffffff10, #ffffff05); padding: 30px; transition: transform .35s, box-shadow .35s; }
    .growth-card:hover { transform: translateY(-7px); box-shadow: 0 20px 45px #0003; }
    .growth-card-featured { background: linear-gradient(140deg, #3622ff, #6843dc); border-color: #a68dfc55; }
    .growth-card-top { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 34px; }
    .growth-card-top>span:last-child { font-size: 10px; color: #bfb2dd; text-align: right; letter-spacing: .04em; max-width: 150px; }
    .growth-card-featured .growth-card-top>span:last-child { color: #e4d9ff; }
    .growth-icon { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #a48aff22; color: #d1c1ff; font-size: 25px; }
    .growth-card-featured .growth-icon { background: #ffffff22; color: #fff176; }
    .growth-card h3 { font-size: 32px; }
    .growth-card .growth-number { font-size: clamp(42px, 5vw, 64px); letter-spacing: -.055em; }
    .growth-revenue-label { font-size: 12px; color: #c9bbdf; margin-bottom: 9px; }
    .growth-card p { font-size: 13px; line-height: 1.8; margin-top: 22px; }
    .growth-card-featured p { color: #e3d9ff; }
    .growth-bottom { display: flex; align-items: center; justify-content: space-between; gap: 35px; margin-top: 38px; }
    .growth-benefits { list-style: none; padding: 0; margin: 0; font-size: 13px; color: #d2c7e5; }
    .growth-benefits li { position: relative; padding-left: 24px; margin: 10px 0; }
    .growth-benefits li:before { content: '✓'; position: absolute; left: 0; color: #b9a3ff; }
    .growth-bottom .btn { flex-shrink: 0; }
    .brand-growth-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 75px; align-items: center; }
    .brand-growth .eyebrow { font-size: 10px; letter-spacing: .12em; }
    .brand-growth .hero-tag { color: #3026EA;  margin-bottom: 20px; }
    .brand-growth-copy>p { margin-top: 25px; font-size: 14px; line-height: 1.9; max-width: 550px; }
    .brand-benefits-panel { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(145deg, #ffffff, #ece5ff 70%, #f6e5f1); border: 1px solid #ded5f1; border-radius: 30px; padding: 34px; box-shadow: 0 20px 50px #3a24a40a; }
    .brand-benefits-panel>.eyebrow { color: #76529e; margin-bottom: 12px; }
    .brand-benefits { list-style: none; margin: 0; padding: 0; }
    .brand-benefits li { display: flex; align-items: flex-start; gap: 18px; padding: 23px 0; border-bottom: 1px solid #dcd2ee; }
    .brand-benefits li:last-child { border-bottom: 0; padding-bottom: 0; }
    .brand-benefits li>span { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px; background: #7652da13; color: #7652da; font-size: 11px; font-weight: 700; }
    .brand-benefits p { color: #332746; font-family: Manrope, sans-serif; font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: -.025em; }
    @media(max-width:1000px) {
      .growth-heading, .brand-growth-grid { gap: 35px; }
      .growth-card { padding: 24px; }
      .growth-card h3 { font-size: 27px; }
      .growth-bottom { align-items: flex-start; flex-direction: column; gap: 25px; }
    }
    @media(max-width:720px) {
      .growth-heading, .brand-growth-grid { grid-template-columns: 1fr; gap: 25px; }
      .growth-heading { margin-bottom: 30px; }
      .growth-metrics { grid-template-columns: 1fr; gap: 16px; }
      .growth-card { padding: 28px; }
      .growth-card-top { margin-bottom: 25px; }
      .growth-card .growth-number { font-size: 52px; }
      .brand-benefits-panel { padding: 26px; margin-top: 10px; }
      .brand-benefits p { font-size: 16px; }
      .growth-bottom .btn { flex-shrink: 1; max-width: 100%; gap: 16px; }
    }

    /* Client logos and eight-review carousel — scoped additions. */
    .client-parade { background: radial-gradient(ellipse at 50% 100%, #5435bb50, transparent 65%), #100c29; padding: 85px 0; overflow: hidden; }
    .parade-heading { text-align: center; max-width: 820px; margin: 0 auto 38px; }
    .parade-heading .eyebrow { justify-content: center; }
    .parade-heading h2 { font-size: clamp(34px, 4vw, 52px); }
    .parade-heading>p { margin-top: 20px; font-size: 14px; }
    .logo-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); padding: 12px 0 22px; }
    .logo-runner { display: flex; width: max-content; animation: partner-drift 32s linear infinite; }
    .logo-group { display: flex; gap: 18px; padding-right: 18px; }
    .partner-logo { width: 235px; height: 112px; border: 1px solid #ffffff24; border-radius: 23px; background: linear-gradient(130deg, #ffffff10, #ffffff05); display: flex; align-items: center; justify-content: center; gap: 12px; color: #eee6ff; transition: background .3s, border-color .3s, transform .3s; }
    .partner-logo:hover { background: #ffffff19; border-color: #b79bff88; transform: translateY(-5px); }
    .partner-logo strong { font-family: Manrope, sans-serif; font-size: 23px; line-height: 1.1; letter-spacing: -.06em; }
    .partner-logo small { display: block; font-family: 'DM Sans', sans-serif; font-size: 8px; letter-spacing: .17em; color: #b6a4d5; margin-top: 8px; }
    .partner-symbol { font-size: 31px; color: #b8a0ff; }
    .partner-serif strong { font-family: Georgia, serif; font-size: 37px; font-style: italic; font-weight: 400; }
    .partner-serif small { font-style: normal; }
    .partner-placeholder-note { text-align: center; font-size: 11px; color: #a99bc3; margin-top: 8px; }
    .logo-marquee:hover .logo-runner, .logo-marquee:focus-within .logo-runner { animation-play-state: paused; }
    @keyframes partner-drift { to { transform: translateX(-50%); } }
    .client-stories { overflow: hidden; }
    .client-stories .section-head>p { font-size: 13px; }
    .stories-viewport { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 0 16px; }
    .stories-viewport::-webkit-scrollbar { display: none; }
    .story-card { flex: 0 0 calc((100% - 40px) / 3); min-width: 0; scroll-snap-align: start; position: relative; isolation: isolate; overflow: hidden; border: 1px solid #e2dcec; background: #fff; border-radius: 28px; padding: 29px; display: flex; flex-direction: column; transition: box-shadow .3s, border-color .3s; }
    .story-card:hover { border-color: #b6a1e7; box-shadow: 0 10px 30px #5231a615; }
    .story-card:nth-child(3n+2) { background: linear-gradient(145deg, #f0eaff, #fff 75%); }
    .story-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .story-stars { font-size: 17px; letter-spacing: 3px; color: #986312; }
    .story-quote-mark { font-family: Georgia, serif; font-size: 55px; line-height: .8; color: #bdabeb; }
    .story-card blockquote { margin: 26px 0 30px; font-size: 15px; line-height: 1.85; color: #493d5c; }
    .story-author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 21px; border-top: 1px solid #e6e0ee; }
    .story-avatar { display: grid; place-items: center; width: 43px; height: 43px; flex-shrink: 0; border-radius: 14px; background: linear-gradient(140deg, #3622ff, #9060dd); color: #fff; font-size: 12px; font-weight: 700; }
    .story-author strong { display: block; font-size: 13px; color: #261a3b; }
    .story-author small { display: block; font-size: 11px; color: #82728f; margin-top: 4px; }
    .stories-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 23px; }
    .stories-placeholder-note { font-size: 11px; color: #82728f; }
    .stories-controls { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
    .story-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #d9ceec; background: #ede7fb; color: #5132b3; font-size: 21px; transition: background .3s, color .3s; }
    .story-arrow:hover { background: #5132b3; color: #fff; }
    .story-position { font-size: 11px; color: #716080; min-width: 44px; text-align: center; }
    .story-pause { border: 0; background: transparent; color: #6b5289; text-decoration: underline; font-size: 11px; padding: 10px 4px; min-height: 44px; }
    @media(max-width:1000px) { .story-card { flex-basis: calc((100% - 20px) / 2); padding: 27px; } }
    @media(max-width:640px) {
      .client-parade { padding: 65px 0; }
      .partner-logo { width: 205px; height: 100px; }
      .story-card { flex-basis: 100%; padding: 26px; }
      .stories-toolbar { align-items: flex-start; flex-direction: column-reverse; gap: 16px; }
      .stories-controls { align-self: flex-end; }
    }
    @media(prefers-reduced-motion:reduce) {
      .logo-runner { animation: none; }
      .logo-marquee { overflow-x: auto; mask-image: none; }
      .logo-group[aria-hidden="true"] { display: none; }
    }


/* Animated color-changing logo inside the existing orb */
.orb .puzzle-motion {
  position: absolute;
  width: 54%;
  height: 66%;
  left: 23%;
  top: 17%;
  perspective: 800px;
  animation: puzzle-float 7s ease-in-out infinite;
}

.orb .puzzle-colors {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center;
  animation: puzzle-tilt 10s ease-in-out infinite;
  filter: drop-shadow(0 18px 18px #05031866)
          drop-shadow(0 0 22px #a58aff55);
}

.orb .puzzle-colors img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  backface-visibility: hidden;
  animation: puzzle-color 18s linear infinite;
  animation-delay: var(--color-delay);
}

/* Each image overlaps the next for a smooth crossfade */
@keyframes puzzle-color {
  0%, 11.111% {
    opacity: 1;
  }

  16.667%, 94.444% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes puzzle-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }
}

@keyframes puzzle-tilt {
  0%, 100% {
    transform: rotateX(5deg) rotateY(-16deg) rotateZ(-3deg);
  }

  50% {
    transform: rotateX(-5deg) rotateY(16deg) rotateZ(3deg);
  }
}

/* Works with your existing Pause animations button */
.no-motion .orb .puzzle-colors img {
  opacity: 0;
}

.no-motion .orb .puzzle-colors img:first-child {
  opacity: 1;
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
  .orb .puzzle-motion,
  .orb .puzzle-colors,
  .orb .puzzle-colors img {
    animation: none !important;
  }

  .orb .puzzle-colors img {
    opacity: 0;
  }

  .orb .puzzle-colors img:first-child {
    opacity: 1;
  }
}
.satellite.four .mini-icon {
  display: flex;
  align-items: center;
  gap: 14px;
}



.merriweather-uniquifier {
  font-family: "Merriweather", serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* Image carousels inside the existing three boxes */
.reels-panel.reels-image-carousel {
  display: block;
  padding: 0;
  gap: 0;
}

.reels-carousel-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.reels-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.reels-carousel-track > img {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Keep the existing animated border above the images */
.reels-image-carousel.beam::before {
  z-index: 3;
}

.reels-slide-btn {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #ffffff66;
  border-radius: 50%;
  background: #211340b3;
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, background .25s;
}

.reels-slide-prev {
  left: 10px;
}

.reels-slide-next {
  right: 10px;
}

.reels-image-carousel:hover .reels-slide-btn,
.reels-image-carousel:focus-within .reels-slide-btn {
  opacity: 1;
  pointer-events: auto;
}

.reels-slide-btn:hover {
  background: #6540d9;
}

/* Always show navigation on touch devices */
@media (hover: none), (pointer: coarse) {
  .reels-slide-btn {
    width: 44px;
    height: 44px;
    opacity: 1;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reels-carousel-track {
    transition: none;
  }
}



/* Static image — preserves the existing panel dimensions */
.reels-panel.reels-static-image {
  display: block;
  padding: 0;
  gap: 0;
}

.reels-static-image > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Keep the animated border visible */
.reels-static-image.beam::before {
  z-index: 2;
}

.growth-platform-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}