@font-face {
      font-family: "Magistral";
      src: url("fonts/Magistral-Light.woff2") format("woff2"),
        url("fonts/Magistral-Light.woff") format("woff"),
        url("fonts/Magistral-Light.ttf") format("truetype");
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Magistral";
      src: url("fonts/Magistral-Book.woff2") format("woff2"),
        url("fonts/Magistral-Book.woff") format("woff"),
        url("fonts/Magistral-Book.ttf") format("truetype");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Magistral";
      src: url("fonts/Magistral-Medium.woff2") format("woff2"),
        url("fonts/Magistral-Medium.woff") format("woff"),
        url("fonts/Magistral-Medium.ttf") format("truetype");
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Magistral";
      src: url("fonts/Magistral-Bold.woff2") format("woff2"),
        url("fonts/Magistral-Bold.woff") format("woff"),
        url("fonts/Magistral-Bold.ttf") format("truetype");
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Magistral";
      src: url("fonts/Magistral-Bold.woff2") format("woff2"),
        url("fonts/Magistral-Bold.woff") format("woff"),
        url("fonts/Magistral-Bold.ttf") format("truetype");
      font-weight: 800;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --purple: #7a42b6;
      --purple-dark: #28143f;
      --purple-soft: #f4effb;
      --green: #7a42b6;
      --green-soft: #f4effb;
      --ink: #16121d;
      --body: #676071;
      --line: #e9e3f1;
      --white: #fff;
      --bg: #fbfafc;
      --radius: 22px;
      --radius-lg: 38px;
      --pill: 999px;
      --shadow: 0 24px 70px rgba(31, 20, 48, .14);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--bg);
      font-family: Magistral, Arial, Helvetica, sans-serif;
      font-weight: 400;
      font-synthesis: none;
      overflow-x: hidden;
    }

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

    img {
      display: block;
      max-width: 100%;
    }

    .font {
      font-family: Magistral, Arial, Helvetica, sans-serif;
      letter-spacing: 0;
    }

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

    .top-strip {
      background: var(--purple-dark);
      color: rgba(255, 255, 255, .86);
      font-size: 13px;
    }

    .top-strip .container {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 30;
      background: rgba(255, 255, 255, .92);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(18px);
    }

    .nav-inner {
      height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 26px;
    }

    .brand img {
      width: 202px;
      height: auto;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 20px;
      color: #453d51;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .nav-toggle {
      display: none;
      width: 44px;
      height: 44px;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      color: var(--purple);
      font-size: 20px;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(31, 20, 48, .08);
    }

    .mobile-menu {
      display: none;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 22px;
      border: 1px solid transparent;
      border-radius: var(--pill);
      background: var(--purple);
      color: var(--white);
      box-shadow: 0 12px 28px rgba(122, 66, 182, .2);
      font: 800 13px/1 Magistral, Arial, Helvetica, sans-serif;
      text-transform: uppercase;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
      white-space: nowrap;
    }

    .btn:hover {
      transform: translateY(-2px);
      background: #6833a0;
      box-shadow: 0 16px 34px rgba(122, 66, 182, .28);
    }

    .btn.secondary {
      color: var(--purple);
      background: var(--white);
      border-color: var(--line);
      box-shadow: none;
    }

    .hero {
      position: relative;
      min-height: calc(100vh - 124px);
      padding: 82px 0 70px;
      overflow: hidden;
      color: #fff;
      background:
        radial-gradient(circle at 76% 20%, rgba(255, 255, 255, .18), transparent 26%),
        radial-gradient(circle at 18% 78%, rgba(255, 255, 255, .14), transparent 30%),
        radial-gradient(circle at 42% 44%, rgba(173, 119, 234, .34), transparent 34%),
        linear-gradient(135deg, #2d1248 0%, #7a42b6 54%, #3d1761 100%);
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      pointer-events: none;
      border-radius: var(--pill);
      transform: rotate(-18deg);
    }

    .hero::before {
      width: 620px;
      height: 220px;
      right: -180px;
      top: 86px;
      background: linear-gradient(90deg, rgba(255, 255, 255, .22) 0 49%, rgba(255, 255, 255, .74) 50% 100%);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 24px 70px rgba(20, 8, 32, .18);
      opacity: .62;
    }

    .hero::after {
      width: 400px;
      height: 146px;
      left: -128px;
      bottom: 76px;
      background: linear-gradient(90deg, rgba(255, 255, 255, .74) 0 49%, rgba(122, 66, 182, .62) 50% 100%);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 24px 70px rgba(20, 8, 32, .16);
      opacity: .66;
    }

    .hero-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(360px, .82fr);
      gap: 44px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
      color: var(--purple);
      font: 800 14px/1 Magistral, Arial, Helvetica, sans-serif;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 28px;
      height: 3px;
      border-radius: 999px;
      background: var(--green);
    }

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

    h1,
    h2,
    h3 {
      font-family: Magistral, Arial, Helvetica, sans-serif;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    h1 {
      max-width: 720px;
      font-size: clamp(44px, 6vw, 78px);
      line-height: .98;
    }

    h1 .line {
      display: block;
    }

    h1 .accent {
      color: #efe5ff;
      text-shadow: 0 12px 34px rgba(20, 8, 32, .18);
    }

    .lead {
      max-width: 610px;
      margin-top: 22px;
      color: rgba(255, 255, 255, .78);
      font-size: 18px;
      line-height: 1.7;
    }

    .hero .eyebrow {
      color: rgba(255, 255, 255, .88);
    }

    .hero .eyebrow::before {
      background: #fff;
    }

    .hero .btn {
      background: #fff;
      color: var(--purple);
      box-shadow: 0 16px 36px rgba(20, 8, 32, .16);
    }

    .hero .btn:hover {
      background: #f7f1ff;
      box-shadow: 0 18px 42px rgba(20, 8, 32, .22);
    }

    .hero .btn.secondary {
      background: rgba(255, 255, 255, .13);
      color: #fff;
      border-color: rgba(255, 255, 255, .22);
      box-shadow: none;
      backdrop-filter: blur(14px);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }

    .hero-points {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 42px;
    }

    .hero-point {
      padding: 18px;
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .13);
      box-shadow: 0 18px 46px rgba(20, 8, 32, .16);
      backdrop-filter: blur(14px);
    }

    .hero-point strong {
      display: block;
      color: #fff;
      font: 800 22px/1 Magistral, Arial, Helvetica, sans-serif;
      text-transform: uppercase;
    }

    .hero-point span {
      display: block;
      margin-top: 8px;
      color: rgba(255, 255, 255, .74);
      font-size: 14px;
      line-height: 1.45;
    }

    .hero-visual {
      position: relative;
      min-height: 540px;
      display: grid;
      place-items: center;
    }

    .capsule-cloud {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .capsule {
      position: absolute;
      border-radius: var(--pill);
      opacity: .9;
      box-shadow: 0 22px 54px rgba(20, 8, 32, .22);
      animation: drift 6s ease-in-out infinite;
    }

    .capsule.a {
      width: 142px;
      height: 52px;
      left: 0;
      top: 80px;
      background: linear-gradient(90deg, var(--purple) 0 50%, #fff 50% 100%);
      transform: rotate(-24deg);
    }

    .capsule.b {
      width: 92px;
      height: 34px;
      right: 12px;
      top: 160px;
      background: linear-gradient(90deg, var(--green) 0 50%, #fff 50% 100%);
      transform: rotate(22deg);
      animation-delay: -1.8s;
    }

    .capsule.c {
      width: 118px;
      height: 44px;
      left: 26px;
      bottom: 70px;
      background: linear-gradient(90deg, #fff 0 50%, var(--purple) 50% 100%);
      transform: rotate(18deg);
      animation-delay: -3s;
    }

    .visual-card {
      position: relative;
      width: min(430px, 100%);
      min-height: 500px;
      display: grid;
      place-items: end center;
      padding: 30px 30px 0;
      border: 1px solid var(--line);
      border-radius: 58px 58px var(--radius-lg) var(--radius-lg);
      background:
        radial-gradient(circle at 74% 18%, rgba(255, 255, 255, .24), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .1));
      box-shadow: 0 30px 80px rgba(20, 8, 32, .28);
      overflow: hidden;
    }

    .photo-card {
      width: min(560px, 100%);
      min-height: 0;
      aspect-ratio: 16 / 10;
      display: block;
      padding: 14px;
      border-radius: 44px;
      border: 1px solid rgba(255, 255, 255, .24);
    }

    .hero-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 32px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 18px 48px rgba(20, 8, 32, .22);
    }

    .visual-card::before {
      content: "";
      position: absolute;
      width: 72%;
      height: 18px;
      left: 14%;
      bottom: 22px;
      border-radius: 50%;
      background: rgba(40, 20, 63, .1);
      filter: blur(8px);
    }

    .visual-logo {
      position: absolute;
      top: 28px;
      left: 30px;
      width: 230px;
      padding: 12px 16px;
      border-radius: 18px;
      background: #0f0818;
    }

    .visual-card .mascot {
      position: relative;
      z-index: 2;
      width: min(310px, 80%);
      filter: drop-shadow(0 24px 34px rgba(31, 20, 48, .18));
      animation: soft-float 4.8s ease-in-out infinite;
    }

    section {
      padding: 88px 0;
    }

    .section-heading {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 36px;
    }

    .section-heading h2 {
      max-width: 680px;
      font-size: clamp(34px, 4vw, 54px);
      line-height: 1.05;
    }

    .section-heading p {
      max-width: 430px;
      color: var(--body);
      font-size: 16px;
      line-height: 1.65;
    }

    .about {
      background: var(--white);
    }

    .about-grid {
      display: grid;
      grid-template-columns: .82fr 1.18fr;
      gap: 28px;
      align-items: stretch;
    }

    .about-image {
      min-height: 380px;
      position: relative;
      padding: 14px;
      border-radius: var(--radius-lg);
      background:
        radial-gradient(circle at 24% 24%, rgba(122, 66, 182, .16), transparent 32%),
        linear-gradient(145deg, var(--purple-soft), #ffffff);
      border: 1px solid var(--line);
      overflow: hidden;
    }

    .about-photo {
      width: 100%;
      height: 100%;
      min-height: 380px;
      object-fit: cover;
      border-radius: 28px;
      box-shadow: 0 20px 58px rgba(31, 20, 48, .12);
    }

    .about-content {
      display: grid;
      gap: 16px;
    }

    .info-row {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 18px;
      align-items: start;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
    }

    .info-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 17px;
      background: var(--green-soft);
      color: var(--purple);
      font-size: 19px;
    }

    .info-row h3 {
      font-size: 22px;
      line-height: 1.1;
    }

    .info-row p {
      margin-top: 8px;
      color: var(--body);
      line-height: 1.6;
    }

    .services {
      position: relative;
      overflow: hidden;
      color: #fff;
      background:
        radial-gradient(circle at 14% 22%, rgba(255, 255, 255, .18), transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(255, 255, 255, .12), transparent 26%),
        linear-gradient(135deg, #2d1248 0%, #7a42b6 54%, #432068 100%);
      background-attachment: fixed;
    }

    .services::before,
    .services::after {
      content: "";
      position: absolute;
      pointer-events: none;
      border-radius: var(--pill);
      box-shadow: 0 24px 60px rgba(21, 8, 34, .2);
      opacity: .36;
    }

    .services::before {
      width: 520px;
      height: 170px;
      left: -160px;
      top: 70px;
      background: linear-gradient(90deg, rgba(255, 255, 255, .92) 0 50%, rgba(122, 66, 182, .82) 50% 100%);
      transform: rotate(-18deg);
    }

    .services::after {
      width: 390px;
      height: 128px;
      right: -120px;
      bottom: 80px;
      background: linear-gradient(90deg, rgba(122, 66, 182, .8) 0 50%, rgba(255, 255, 255, .9) 50% 100%);
      transform: rotate(18deg);
    }

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

    .services .eyebrow {
      color: rgba(255, 255, 255, .88);
    }

    .services .eyebrow::before {
      background: #fff;
    }

    .services .section-heading p {
      color: rgba(255, 255, 255, .76);
    }

    .services .section-heading .btn {
      margin-top: 18px;
      background: #fff;
      color: var(--purple);
      box-shadow: 0 16px 36px rgba(20, 8, 32, .16);
    }

    .services .section-heading .btn:hover {
      background: #f7f1ff;
      box-shadow: 0 18px 42px rgba(20, 8, 32, .22);
    }

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

    .service-card {
      position: relative;
      min-height: 420px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 34px;
      background: rgba(255, 255, 255, .12);
      box-shadow: 0 24px 58px rgba(21, 8, 34, .2);
      backdrop-filter: blur(16px);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .service-card:hover {
      transform: translateY(-5px);
      border-color: rgba(255, 255, 255, .34);
      box-shadow: 0 28px 70px rgba(21, 8, 34, .28);
    }

    .service-photo {
      position: relative;
      min-height: 190px;
      overflow: hidden;
      border-radius: 30px 30px 0 0;
    }

    .service-photo img {
      width: 100%;
      height: 100%;
      min-height: 190px;
      object-fit: cover;
      transition: transform .35s ease;
    }

    .service-card:hover .service-photo img {
      transform: scale(1.04);
    }

    .service-photo::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(40, 20, 63, 0) 34%, rgba(40, 20, 63, .54) 100%);
      pointer-events: none;
    }

    .service-body {
      position: relative;
      flex: 1;
      padding: 24px 22px 26px;
    }

    .service-card .pill {
      position: absolute;
      top: -28px;
      left: 22px;
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      color: var(--purple);
      background: #fff;
      box-shadow: 0 16px 34px rgba(21, 8, 34, .18);
      font-size: 20px;
    }

    .service-card h3 {
      margin-top: 18px;
      min-height: 52px;
      font-size: 21px;
      line-height: 1.15;
      color: #fff;
    }

    .service-card p {
      margin-top: 12px;
      color: rgba(255, 255, 255, .75);
      font-size: 15px;
      line-height: 1.55;
    }

    .process {
      position: relative;
      overflow: hidden;
      color: var(--ink);
      background:
        radial-gradient(circle at 16% 18%, rgba(122, 66, 182, .13), transparent 30%),
        radial-gradient(circle at 86% 76%, rgba(122, 66, 182, .12), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #fbf7ff 48%, #f0e6ff 100%);
    }

    .process::before,
    .process::after {
      content: "";
      position: absolute;
      pointer-events: none;
      border-radius: var(--pill);
      opacity: .5;
      box-shadow: 0 22px 60px rgba(31, 20, 48, .12);
    }

    .process::before {
      width: 460px;
      height: 150px;
      right: -120px;
      top: 76px;
      background: linear-gradient(90deg, rgba(122, 66, 182, .24) 0 50%, rgba(255, 255, 255, .9) 50% 100%);
      transform: rotate(-18deg);
    }

    .process::after {
      width: 340px;
      height: 112px;
      left: -110px;
      bottom: 58px;
      background: linear-gradient(90deg, rgba(255, 255, 255, .92) 0 50%, rgba(122, 66, 182, .22) 50% 100%);
      transform: rotate(16deg);
    }

    .process .container {
      position: relative;
      z-index: 1;
    }

    .process .section-heading {
      align-items: center;
    }

    .process .eyebrow {
      color: var(--purple);
    }

    .process .eyebrow::before {
      background: var(--purple);
    }

    .process .section-heading p {
      color: var(--body);
    }

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

    .process-step {
      position: relative;
      padding: 28px;
      min-height: 280px;
      border-radius: 34px;
      background: rgba(255, 255, 255, .78);
      border: 1px solid rgba(122, 66, 182, .13);
      box-shadow: 0 22px 54px rgba(31, 20, 48, .09);
      backdrop-filter: blur(16px);
      overflow: hidden;
    }

    .process-step::after {
      content: "";
      position: absolute;
      right: -44px;
      bottom: -30px;
      width: 150px;
      height: 54px;
      border-radius: var(--pill);
      background: linear-gradient(90deg, rgba(122, 66, 182, .22) 0 50%, rgba(255, 255, 255, .88) 50% 100%);
      transform: rotate(-24deg);
      opacity: .7;
    }

    .process-step strong {
      display: inline-grid;
      place-items: center;
      width: 52px;
      height: 52px;
      margin-bottom: 24px;
      border-radius: 18px;
      background: var(--purple);
      color: #fff;
      font: 800 16px/1 Magistral, Arial, Helvetica, sans-serif;
    }

    .process-step h3 {
      font-size: 24px;
      color: var(--purple-dark);
    }

    .process-step p {
      margin-top: 12px;
      color: var(--body);
      line-height: 1.6;
    }

    .process-note {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: center;
      margin-top: 22px;
      padding: 24px;
      border: 1px solid rgba(122, 66, 182, .14);
      border-radius: 34px;
      background: rgba(255, 255, 255, .84);
      box-shadow: 0 24px 60px rgba(31, 20, 48, .1);
      backdrop-filter: blur(16px);
    }

    .process-note h3 {
      color: var(--purple-dark);
      font-size: clamp(24px, 3vw, 34px);
      line-height: 1.08;
    }

    .process-note p {
      max-width: 720px;
      margin-top: 10px;
      color: var(--body);
      line-height: 1.65;
    }

    .process-note .btn {
      background: var(--purple);
      color: #fff;
      box-shadow: 0 16px 36px rgba(122, 66, 182, .22);
    }

    .process-note .btn:hover {
      background: #6833a0;
    }

    .testimonials {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #ffffff 0%, #fbf7ff 58%, #f4ecff 100%);
    }

    .testimonials .container {
      position: relative;
      z-index: 1;
    }

    .testimonial-layout {
      display: grid;
      grid-template-columns: 330px minmax(0, 1fr);
      gap: 18px;
      align-items: stretch;
    }

    .testimonial-carousel {
      position: relative;
      min-width: 0;
    }

    .testimonial-track {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(310px, 42%);
      gap: 18px;
      height: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scrollbar-width: none;
      cursor: grab;
      user-select: none;
    }

    .testimonial-track::-webkit-scrollbar {
      display: none;
    }

    .testimonial-track.is-dragging {
      cursor: grabbing;
      scroll-behavior: auto;
    }

    .testimonial-track .testimonial-card {
      scroll-snap-align: start;
    }

    .testimonial-controls {
      position: absolute;
      right: 18px;
      top: -72px;
      display: flex;
      gap: 10px;
      z-index: 2;
    }

    .testimonial-arrow {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(122, 66, 182, .18);
      border-radius: 16px;
      background: #fff;
      color: var(--purple);
      box-shadow: 0 14px 34px rgba(31, 20, 48, .1);
      font-size: 17px;
      cursor: pointer;
      transition: transform .2s ease, background .2s ease, color .2s ease;
    }

    .testimonial-arrow:hover {
      transform: translateY(-2px);
      background: var(--purple);
      color: #fff;
    }

    .rating-card,
    .testimonial-card {
      border: 1px solid rgba(122, 66, 182, .14);
      border-radius: 34px;
      background: rgba(255, 255, 255, .82);
      backdrop-filter: blur(16px);
    }

    .rating-card {
      position: relative;
      overflow: hidden;
      padding: 28px;
      color: #fff;
      background:
        radial-gradient(circle at 86% 18%, rgba(255, 255, 255, .22), transparent 30%),
        linear-gradient(135deg, #3b175f, #7a42b6);
    }

    .rating-card::after {
      content: "";
      position: absolute;
      right: -58px;
      bottom: -28px;
      width: 170px;
      height: 58px;
      border-radius: var(--pill);
      background: linear-gradient(90deg, rgba(255, 255, 255, .78) 0 50%, rgba(122, 66, 182, .78) 50% 100%);
      transform: rotate(-22deg);
      opacity: .42;
    }

    .rating-number {
      display: block;
      font: 800 72px/.9 Magistral, Arial, Helvetica, sans-serif;
      letter-spacing: 0;
    }

    .stars {
      display: flex;
      gap: 5px;
      margin-top: 18px;
      color: #ffd66b;
      font-size: 18px;
    }

    .rating-card h3 {
      margin-top: 18px;
      color: #fff;
      font-size: 24px;
      line-height: 1.1;
    }

    .rating-card p {
      margin-top: 12px;
      color: rgba(255, 255, 255, .76);
      line-height: 1.55;
    }

    .testimonial-card {
      position: relative;
      min-height: 290px;
      padding: 26px;
      display: flex;
      flex-direction: column;
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .testimonial-card:hover {
      transform: translateY(-5px);
    }

    .testimonial-card::before {
      content: "\201C";
      position: absolute;
      right: 24px;
      top: 16px;
      color: rgba(122, 66, 182, .14);
      font: 800 76px/.8 Georgia, serif;
    }

    .testimonial-card .stars {
      margin-top: 0;
      color: var(--purple);
      font-size: 15px;
    }

    .testimonial-card p {
      position: relative;
      margin-top: 22px;
      color: var(--body);
      line-height: 1.65;
    }

    .testimonial-author {
      display: block;
      margin-top: auto;
      padding-top: 24px;
    }

    .testimonial-author strong {
      display: block;
      width: fit-content;
      padding: 9px 14px;
      border-radius: var(--pill);
      background: var(--purple-soft);
      color: var(--purple-dark);
      font: 800 16px/1.1 Magistral, Arial, Helvetica, sans-serif;
      text-transform: uppercase;
    }

    .testimonial-author span {
      display: block;
      margin-top: 4px;
      color: var(--body);
      font-size: 13px;
    }

    .contact {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 12% 18%, rgba(122, 66, 182, .11), transparent 30%),
        radial-gradient(circle at 92% 82%, rgba(122, 66, 182, .14), transparent 28%),
        #fff;
    }

    .contact::before {
      content: "";
      position: absolute;
      right: -150px;
      top: 70px;
      width: 420px;
      height: 138px;
      border-radius: var(--pill);
      background: linear-gradient(90deg, rgba(122, 66, 182, .18) 0 50%, rgba(255, 255, 255, .9) 50% 100%);
      transform: rotate(-18deg);
      pointer-events: none;
    }

    .contact-box {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 34px;
      align-items: stretch;
      padding: 40px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, .82);
      box-shadow: var(--shadow);
      backdrop-filter: blur(16px);
    }

    .contact-box h2 {
      max-width: 720px;
      font-size: 50px;
      line-height: 1.04;
    }

    .contact-box p {
      max-width: 650px;
      margin-top: 16px;
      color: var(--body);
      font-size: 17px;
      line-height: 1.7;
    }

    .contact-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 28px;
    }

    .contact-card {
      display: grid;
      grid-template-columns: 70px 1fr;
      gap: 16px;
      align-items: center;
      min-height: 96px;
      padding: 16px 18px;
      border-radius: var(--radius);
      background: var(--white);
      border: 1px solid var(--line);
      box-shadow: 0 14px 38px rgba(31, 20, 48, .08);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .contact-card:hover {
      transform: translateY(-3px);
      border-color: rgba(122, 66, 182, .28);
      box-shadow: 0 18px 46px rgba(31, 20, 48, .12);
    }

    .contact-icon {
      width: 70px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 24px;
      background: var(--purple-soft);
      color: var(--purple);
      font-size: 34px;
      line-height: 1;
    }

    .contact-icon i {
      display: block;
      line-height: 1;
    }

    .contact-card strong {
      display: block;
      color: var(--purple-dark);
      font: 800 18px/1.1 Magistral, Arial, Helvetica, sans-serif;
      text-transform: uppercase;
    }

    .contact-text span {
      display: block;
      margin-top: 6px;
      color: var(--body);
      font-size: 14px;
      line-height: 1.35;
    }

    .contact-panel {
      display: grid;
      gap: 16px;
    }

    .address-card {
      min-height: 100%;
      padding: 26px;
      border: 1px solid rgba(122, 66, 182, .16);
      border-radius: 34px;
      background:
        radial-gradient(circle at 90% 16%, rgba(122, 66, 182, .13), transparent 32%),
        linear-gradient(135deg, #ffffff, #f8f2ff);
      box-shadow: 0 18px 46px rgba(31, 20, 48, .09);
    }

    .address-card h3 {
      color: var(--purple-dark);
      font-size: 26px;
      line-height: 1.1;
    }

    .address-card p {
      margin-top: 12px;
      color: var(--body);
      line-height: 1.65;
    }

    .address-list {
      display: grid;
      gap: 14px;
      margin-top: 22px;
    }

    .address-item {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 14px;
      align-items: start;
      padding: 16px;
      border: 1px solid rgba(122, 66, 182, .12);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .72);
    }

    .address-icon {
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20px;
      background: var(--purple-soft);
      color: var(--purple);
      font-size: 24px;
      line-height: 1;
    }

    .address-icon i {
      display: block;
      line-height: 1;
    }

    .address-item strong {
      display: block;
      color: var(--purple-dark);
      font: 800 17px/1.1 Magistral, Arial, Helvetica, sans-serif;
      text-transform: uppercase;
    }

    .address-text span {
      display: block;
      margin-top: 7px;
      color: var(--body);
      line-height: 1.5;
    }

    .mini-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }

    .mini-cta .btn.secondary {
      background: #fff;
    }

    .faq {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 12% 18%, rgba(122, 66, 182, .1), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #fbf7ff 58%, #f3ebff 100%);
    }

    .faq-grid {
      display: grid;
      grid-template-columns: .82fr 1.18fr;
      gap: 28px;
      align-items: start;
    }

    .faq-intro {
      position: sticky;
      top: 112px;
      padding: 30px;
      border: 1px solid rgba(122, 66, 182, .14);
      border-radius: 34px;
      background:
        radial-gradient(circle at 90% 16%, rgba(255, 255, 255, .18), transparent 30%),
        linear-gradient(135deg, #3b175f, #7a42b6);
      color: #fff;
      box-shadow: 0 24px 60px rgba(31, 20, 48, .14);
    }

    .faq-intro h2 {
      color: #fff;
      font-size: clamp(32px, 4vw, 48px);
      line-height: 1.06;
    }

    .faq-intro p {
      margin-top: 16px;
      color: rgba(255, 255, 255, .76);
      line-height: 1.65;
    }

    .faq-list {
      display: grid;
      gap: 14px;
    }

    .faq-item {
      border: 1px solid rgba(122, 66, 182, .14);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .82);
      box-shadow: 0 16px 42px rgba(31, 20, 48, .08);
      overflow: hidden;
    }

    .faq-question {
      width: 100%;
      display: grid;
      grid-template-columns: 44px 1fr 34px;
      gap: 14px;
      align-items: center;
      padding: 18px;
      border: 0;
      background: transparent;
      color: var(--purple-dark);
      text-align: left;
      cursor: pointer;
      font: 800 18px/1.2 Magistral, Arial, Helvetica, sans-serif;
      text-transform: uppercase;
    }

    .faq-question .faq-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: var(--purple-soft);
      color: var(--purple);
      font-size: 18px;
    }

    .faq-question .faq-plus {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--purple-soft);
      color: var(--purple);
      transition: transform .2s ease;
    }

    .faq-item.is-open .faq-plus {
      transform: rotate(45deg);
    }

    .faq-answer {
      display: none;
      padding: 0 22px 22px 76px;
      color: var(--body);
      line-height: 1.65;
    }

    .faq-item.is-open .faq-answer {
      display: block;
    }

    footer {
      padding: 54px 0 24px;
      color: var(--body);
      background:
        radial-gradient(circle at 90% 18%, rgba(122, 66, 182, .12), transparent 26%),
        #fff;
      border-top: 1px solid var(--line);
      font-size: 14px;
    }

    .footer-inner {
      display: grid;
      grid-template-columns: minmax(260px, 1.25fr) repeat(3, minmax(0, .75fr));
      gap: 32px;
      align-items: start;
    }

    .footer-inner img {
      width: 170px;
    }

    .footer-inner a {
      color: inherit;
    }

    .footer-brand p {
      max-width: 330px;
      margin-top: 18px;
      color: var(--body);
      line-height: 1.65;
    }

    .footer-col h3 {
      margin: 0 0 16px;
      color: var(--purple-dark);
      font: 800 18px/1.1 Magistral, Arial, Helvetica, sans-serif;
      text-transform: uppercase;
    }

    .footer-links,
    .footer-info,
    .footer-social {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footer-links a,
    .footer-info a {
      transition: color .2s ease;
    }

    .footer-links a:hover,
    .footer-info a:hover,
    .footer-copy a:hover {
      color: var(--purple);
    }

    .footer-info li {
      line-height: 1.55;
    }

    .footer-social {
      grid-template-columns: repeat(2, 44px);
      gap: 10px;
    }

    .footer-social a {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: var(--purple-soft);
      color: var(--purple);
      font-size: 20px;
      transition: transform .2s ease, background .2s ease, color .2s ease;
    }

    .footer-social a:hover {
      transform: translateY(-2px);
      background: var(--purple);
      color: #fff;
    }

    .footer-copy {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-top: 34px;
      padding-top: 22px;
      border-top: 1px solid var(--line);
      color: var(--body);
      font-size: 13px;
    }

    .footer-copy a {
      color: var(--purple);
      font-weight: 800;
    }

    .whatsapp-float {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 40;
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: #18b966;
      box-shadow: 0 14px 30px rgba(24, 185, 102, .28);
      font-size: 28px;
      line-height: 1;
    }

    .whatsapp-float i {
      display: block;
      line-height: 1;
    }

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

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    @keyframes soft-float {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-12px);
      }
    }

    @keyframes drift {
      0%, 100% {
        translate: 0 0;
      }
      50% {
        translate: 0 -14px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }

      .capsule,
      .visual-card .mascot {
        animation: none;
      }
    }

    @media (max-width: 980px) {
      .top-strip {
        display: none;
      }

      .nav-links {
        display: none;
      }

      .nav-toggle {
        display: grid;
      }

      .mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: grid;
        gap: 4px;
        padding: 18px 20px 22px;
        border-bottom: 1px solid var(--line);
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 24px 60px rgba(31, 20, 48, .12);
        transform: translateY(-10px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease, transform .2s ease;
      }

      .mobile-menu.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
      }

      .mobile-menu a {
        padding: 14px 0;
        color: var(--purple-dark);
        font: 800 15px/1 Magistral, Arial, Helvetica, sans-serif;
        text-transform: uppercase;
        border-bottom: 1px solid var(--line);
      }

      .mobile-menu .btn {
        width: fit-content;
        margin-top: 12px;
        padding: 0 20px;
        border-bottom: 0;
        color: #fff;
      }

      .hero-grid,
      .about-grid,
      .contact-box,
      .process-note,
      .faq-grid {
        grid-template-columns: 1fr;
      }

      .faq-intro {
        position: relative;
        top: auto;
      }

      .hero {
        min-height: auto;
        padding-top: 54px;
      }

      .hero-visual {
        min-height: 460px;
      }

      .services {
        background-attachment: scroll;
      }

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

      .testimonial-layout {
        grid-template-columns: 1fr;
      }

      .testimonial-track {
        grid-auto-columns: minmax(300px, 54%);
      }

      .testimonial-controls {
        position: static;
        justify-content: flex-end;
        margin-bottom: 14px;
      }

      .section-heading {
        align-items: flex-start;
        flex-direction: column;
      }

      .process {
        background-attachment: scroll;
      }

      .process-note .btn {
        width: fit-content;
      }
    }

    @media (max-width: 640px) {
      html,
      body {
        max-width: 100%;
        overflow-x: hidden;
      }

      .container {
        width: min(100% - 28px, 1160px);
      }

      .nav-inner {
        height: 72px;
      }

      .brand img {
        width: 154px;
      }

      .nav-inner > .btn {
        width: 42px;
        min-height: 42px;
        padding: 0;
        font-size: 0;
      }

      .nav-inner > .btn::before {
        content: "\f232";
        font: 400 17px/1 "Font Awesome 6 Brands";
      }

      h1 {
        font-size: clamp(32px, 9.4vw, 38px);
      }

      .lead {
        font-size: 16px;
        max-width: 96%;
        line-height: 1.65;
      }

      .hero-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .hero-actions .btn {
        width: 100%;
      }

      .hero-points,
      .services-grid,
      .process-grid {
        grid-template-columns: 1fr;
      }

      .testimonial-track {
        grid-auto-columns: minmax(280px, 86%);
      }

      .service-card {
        min-height: auto;
      }

      .hero-visual {
        min-height: 390px;
      }

      .visual-card {
        min-height: 370px;
        border-radius: 34px;
      }

      .visual-logo {
        width: 188px;
        left: 22px;
        top: 22px;
      }

      .visual-card .mascot {
        width: min(230px, 82%);
      }

      section {
        padding: 64px 0;
      }

      .section-heading h2,
      .contact-box h2 {
        font-size: clamp(32px, 9.5vw, 42px);
      }

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

      .process-step {
        min-height: auto;
      }

      .process-note {
        padding: 22px;
      }

      .process-note .btn {
        width: 100%;
      }

      .about-image {
        min-height: 280px;
      }

      .info-row {
        grid-template-columns: 1fr;
      }

      .contact-box {
        padding: 24px;
      }

      .contact-box h2 {
        max-width: 100%;
        font-size: clamp(30px, 8.2vw, 38px);
        line-height: 1.08;
        overflow-wrap: anywhere;
      }

      .contact-box p {
        max-width: 100%;
        font-size: 16px;
      }

      .contact-card {
        grid-template-columns: 58px 1fr;
        gap: 14px;
        min-height: 86px;
        padding: 14px;
      }

      .contact-icon {
        width: 58px;
        height: 58px;
        border-radius: 20px;
        font-size: 28px;
      }

      .contact-card strong {
        font-size: 17px;
      }

      .faq-question {
        grid-template-columns: 40px 1fr 32px;
        font-size: 16px;
      }

      .faq-answer {
        padding: 0 18px 20px;
      }

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

      .footer-copy {
        align-items: flex-start;
        flex-direction: column;
      }
    }