@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 {
  --bg: #090717;
  --bg2: #100c26;
  --surface: #1d1835;
  --text: #f7f6ff;
  --muted: #aaa7c0;
  --blue: #4587ff;
  --purple: #885aff;
  --border: rgba(221, 215, 255, 0.14);
  --radius: 22px;
  --max: 1200px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 94px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}
::selection {
  background: #6451cc;
  color: white;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
img {
  max-width: 100%;
  display: block;
}
.container {
  width: min(var(--max), calc(100% - 64px));
  margin-inline: auto;
}
.section {
  position: relative;
  padding: 118px 0;
}
.page-glow {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  filter: blur(100px);
  border-radius: 50%;
}
.page-glow-left {
  width: 390px;
  height: 390px;
  top: 0;
  left: -260px;
  background: #332875;
}
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background 0.3s, box-shadow 0.3s;
  background: rgba(9, 7, 23, 0.64);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}
.site-header.scrolled {
  background: rgba(9, 7, 23, 0.94);
  box-shadow: 0 8px 30px #0002;
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 91px;
  gap: 24px;
}
.brand {
  width: 216px;
  flex-shrink: 0;
}
.brand img {
  width: 100%;
  height: auto;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 29px;
}
.nav-link {
  font-size: 13px;
  font-weight: 600;
  color: #c9c5dc;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-link:hover,
.nav-link.active {
  color: white;
}
.nav-link.active::after {
  content: "";
  display: block;
  background: var(--blue);
  height: 2px;
  margin: 7px auto -9px;
  width: 17px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 51px;
  padding: 14px 24px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 13px;
  transition: transform 0.2s, box-shadow 0.2s, border 0.2s;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn:hover {
  transform: translateY(-3px);
}
.btn-primary {
  background: linear-gradient(110deg, #456ff0, #7855e8);
  box-shadow: 0 12px 35px #564bef3a;
  color: white;
}
.btn-primary:hover {
  box-shadow: 0 16px 45px #564bef67;
}
.btn-outline {
  border-color: #5d557c;
  background: #ffffff05;
  color: white;
}
.btn-outline:hover {
  border-color: #a59cef;
}
.btn-light {
  background: white;
  color: #221442;
}
.nav-cta {
  min-height: 44px;
  padding: 11px 18px;
}
.menu-toggle {
  display: none;
  background: none;
  border: 0;
  width: 42px;
  height: 42px;
  padding: 8px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.menu-toggle span {
  width: 100%;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: transform 0.2s;
}
.hero {
  padding-top: 195px;
  padding-bottom: 55px;
  min-height: 760px;
  overflow: hidden;
  background: radial-gradient(
      ellipse 58% 75% at 78% 50%,
      rgba(62, 35, 126, 0.31),
      transparent 78%
    ),
    radial-gradient(
      ellipse 55% 55% at 18% 95%,
      rgba(34, 46, 113, 0.15),
      transparent
    );
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 45px;
}
.hero-copy {
  z-index: 2;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #bbb6e0;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 2.1px;
}
.eyebrow-dot {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background: #7892ff;
  box-shadow: 0 0 16px #7892ff;
}
.hero h1 {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: clamp(42px, 5vw, 69px);
  letter-spacing: -3.7px;
  line-height: 1.13;
  margin: 30px 0 25px;
}
.gradient-text {
  background: linear-gradient(95deg, #e9e6ff 0%, #bdb5ff 45%, #719aff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-description {
  max-width: 515px;
  color: #b7b2ce;
  font-size: 16px;
  line-height: 1.95;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  margin-top: 37px;
}
.play-icon {
  font-size: 9px;
  width: 23px;
  height: 23px;
  background: #ffffff15;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.hero-proof {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 62px;
  color: #a49dbd;
  font-size: 12px;
  line-height: 1.7;
}
.hero-proof strong {
  color: #eae7fb;
  font-weight: 600;
}
.proof-mark {
  width: 41px;
  height: 41px;
  border-radius: 13px;
  background: #7563e42b;
  border: 1px solid #ffffff27;
  color: #ac9bff;
  display: grid;
  place-items: center;
  font-size: 22px;
}
.hero-visual {
  height: 610px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.visual-halo {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #593de44d 0%,
    #30245b20 60%,
    transparent 70%
  );
  filter: blur(15px);
}
.hero-main-card {
  position: relative;
  width: min(355px, 85%);
  height: 414px;
  border-radius: 28px;
  border: 1px solid #aba1e469;
  background: linear-gradient(135deg, #403863dc, #1b193ae8 47%, #17142ee6);
  box-shadow: 25px 32px 90px #0006, inset 0 1px 1px #fff6, 0 0 80px #4d40b32c;
  transform: rotate(-7deg);
  padding: 25px;
  overflow: hidden;
}
.hero-main-card::after {
  content: "";
  position: absolute;
  width: 290px;
  height: 290px;
  border-radius: 50%;
  background: #5e55e95c;
  filter: blur(55px);
  right: -115px;
  bottom: -110px;
  pointer-events: none;
}
.main-card-head,
.main-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.mini-chip {
  font-size: 9px;
  letter-spacing: 1.2px;
  font-weight: 800;
  color: #dedbff;
}
.mini-chip i {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #79dbf8;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 7px;
}
.decor-spark {
  font-size: 27px;
  color: #b3a6ef;
}
.hero-letter {
  font: 800 196px/0.95 Manrope, sans-serif;
  text-align: center;
  letter-spacing: -21px;
  color: #f4f2ff;
  text-shadow: 10px 20px 35px #0005;
}
.hero-letter span {
  color: #7789ff;
}
.waveform {
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative;
  z-index: 1;
  margin-top: 10px;
}
.waveform i {
  display: block;
  width: 3px;
  height: 12px;
  border-radius: 9px;
  background: #aca3ff;
}
.waveform i:nth-child(3n) {
  height: 25px;
  background: #6aa3ff;
}
.waveform i:nth-child(4n) {
  height: 17px;
}
.waveform i:nth-child(5n) {
  height: 7px;
}
.main-card-foot {
  margin-top: 24px;
  font-size: 13px;
  line-height: 1.5;
  color: #c8c1e5;
}
.main-card-foot b {
  color: white;
}
.round-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff2a;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.glass-orbit {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  border: 1px solid #fff4;
  border-radius: 17px;
  backdrop-filter: blur(16px);
  background: linear-gradient(140deg, #686187b0, #1d193bba);
  box-shadow: 0 12px 40px #0005;
}
.orbit-top {
  top: 46px;
  right: 0;
  padding: 13px 17px;
  gap: 10px;
  color: #f2edff;
  font-size: 11px;
  font-weight: 700;
  transform: rotate(6deg);
}
.orbit-icon {
  color: #af9aff;
  font-size: 20px;
}
.orbit-bottom {
  left: -6px;
  bottom: 30px;
  transform: rotate(5deg);
  padding: 11px 14px;
  gap: 12px;
}
.mini-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(120deg, #5d6cff, #b16aef);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
}
.orbit-bottom b {
  font-size: 11px;
  display: block;
}
.orbit-bottom small {
  font-size: 10px;
  color: #ccc5e3;
  display: block;
  margin-top: 5px;
}
.check-circle {
  background: #58d7bd;
  color: #102c35;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  margin-left: 10px;
}
.visual-star {
  position: absolute;
  color: #6b65b8;
  font-size: 25px;
}
.star-one {
  top: 55px;
  left: 20px;
}
.star-two {
  right: -8px;
  bottom: 70px;
  font-size: 40px;
}
.hero-bottom {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  margin-top: 68px;
  color: #84809e;
  letter-spacing: 2px;
  font-weight: 700;
  font-size: 9px;
}
.scroll-line {
  height: 1px;
  background: #514a73;
  flex: 1;
  max-width: 120px;
  margin-right: auto;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.orb-one {
  height: 280px;
  width: 280px;
  background: #6147b218;
  left: -200px;
  top: 180px;
  filter: blur(50px);
}
.orb-two {
  height: 380px;
  width: 380px;
  background: #3857ad13;
  right: -270px;
  top: 250px;
  filter: blur(50px);
}
.brand-strip {
  background: #17132e;
  border-block: 1px solid #ffffff12;
  overflow: hidden;
  padding: 23px 0;
}
.ticker-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 42px;
  animation: marquee 35s linear infinite;
}
.ticker-track span {
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #ded9f4;
}
.ticker-track b {
  color: #8476d2;
  font-size: 19px;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
.about-section {
  background: radial-gradient(
    ellipse 40% 60% at 5% 60%,
    #25204c55,
    transparent
  );
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 95px;
  align-items: center;
}
.about-visual {
  position: relative;
  padding: 0 24px 27px 0;
}
.about-frame {
  min-height: 474px;
  border-radius: 30px;
  position: relative;
  background: linear-gradient(135deg, #3a3563, #1b183b 54%, #13112a);
  border: 1px solid #8880bc66;
  overflow: hidden;
  padding: 32px;
  box-shadow: 0 25px 60px #0004;
}
.about-gridlines {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#ffffff0c 1px, transparent 1px),
    linear-gradient(90deg, #ffffff0c 1px, transparent 1px);
  background-size: 45px 45px;
  mask-image: linear-gradient(to top, transparent, black);
}
.about-small-title {
  position: relative;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 3px;
  line-height: 1.7;
  color: #ada6d3;
}
.about-small-title em {
  font-style: normal;
  color: #7570a4;
}
.about-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 340px;
}
.big-quote {
  position: absolute;
  font: 800 420px/0.8 Georgia, serif;
  color: #9786ff28;
  left: -10px;
  top: 0;
}
.about-art-text {
  font: 800 clamp(45px, 5vw, 75px) / 1.06 Manrope, sans-serif;
  letter-spacing: -4px;
  z-index: 1;
}
.about-art-text i {
  font-style: normal;
  color: #9f91ff;
}
.about-corner {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 2px;
  color: #bbb0d7;
}
.floating-label {
  position: absolute;
  bottom: 0;
  right: -20px;
  background: #f0edff;
  color: #292043;
  border-radius: 15px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 20px 50px #0005;
}
.star-icon {
  color: #6452d7;
  font-size: 25px;
}
.section-title {
  font: 800 clamp(35px, 3.7vw, 50px) / 1.23 Manrope, sans-serif;
  letter-spacing: -2px;
  margin: 22px 0 23px;
}
.about-content p,
.section-heading > p,
.section-heading.center > p {
  color: #aaa5c1;
  line-height: 1.95;
  font-size: 15px;
}
.about-content p {
  margin: 0 0 20px;
}
.about-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 12px;
  margin: 31px 0;
}
.about-points > div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #dedaf0;
}
.point-icon {
  color: #8f80ff;
  background: #8676ff26;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.text-link {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  color: #b7aaff;
  font-weight: 800;
  font-size: 13px;
  border-bottom: 1px solid #8b7be5;
  padding-bottom: 9px;
}
.text-link span {
  font-size: 18px;
}
.services-section {
  background: #100d23;
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 43px;
}
.section-heading .section-title {
  margin-bottom: 0;
}
.section-heading > p {
  max-width: 330px;
  margin: 0 0 5px;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.service-card,
.service-cta {
  border: 1px solid var(--border);
  border-radius: 22px;
  min-height: 295px;
  padding: 27px;
  position: relative;
  overflow: hidden;
}
.service-card {
  background: linear-gradient(145deg, #27223e, #171428 70%);
  transition: transform 0.3s, border 0.3s, background 0.3s;
}
.service-card:hover {
  transform: translateY(-7px);
  border-color: #a193fd7d;
  background: linear-gradient(145deg, #363052, #211b3b 70%);
}
.service-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.service-number {
  font-size: 10px;
  letter-spacing: 1.4px;
  font-weight: 800;
  color: #afa8c7;
}
.service-icon {
  font-size: 30px;
  color: #9889ec;
}
.service-card h3 {
  font: 800 27px/1.15 Manrope, sans-serif;
  letter-spacing: -0.8px;
  margin: 31px 0 15px;
}
.service-card p {
  font-size: 13px;
  line-height: 1.8;
  color: #b6b0ca;
  max-width: 300px;
  padding-right: 5px;
  margin: 0 0 34px;
}
.service-arrow {
  position: absolute;
  right: 23px;
  bottom: 21px;
  border-radius: 50%;
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  background: #ffffff15;
  font-size: 19px;
  border: 1px solid #ffffff2a;
}
.service-arrow:hover {
  background: #8471ef;
}
.service-cta {
  background: linear-gradient(135deg, #7162eb, #432c9e);
  border-color: #9e8dff75;
}
.cta-spark {
  font-size: 25px;
}
.service-cta h3 {
  font: 800 28px/1.2 Manrope, sans-serif;
  letter-spacing: -1px;
  margin: 18px 0 15px;
}
.service-cta p {
  font-size: 13px;
  line-height: 1.8;
  color: #e2ddff;
  max-width: 270px;
}
.service-cta .btn {
  margin-top: 8px;
}
.classes-section {
  background: radial-gradient(
      ellipse 65% 70% at 50% 90%,
      #2d205d66,
      transparent
    ),
    #090717;
}
.section-heading.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  margin-bottom: 52px;
}
.section-heading.center .section-title {
  margin: 18px 0 15px;
}
.section-heading.center > p {
  max-width: 560px;
}
.class-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 31px;
}
.class-panel {
  background: linear-gradient(137deg, #29243e, #1a172d 55%, #141128);
  border: 1px solid #aaa4c254;
  border-radius: 20px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 1px #ffffff30, 0 20px 60px #0002;
}
.class-panel::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  top: -125px;
  left: -125px;
  background: #6557d2;
  filter: blur(65px);
  opacity: 0.53;
  pointer-events: none;
}
.class-panel:last-child::before {
  left: auto;
  right: -125px;
  background: #4a80cb;
}
.class-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 23px;
}
.class-symbol {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: #ffffff15;
  border: 1px solid #ffffff25;
  border-radius: 13px;
  font-size: 24px;
  color: #a4a5ff;
}
.class-heading h3 {
  font: 800 25px Manrope, sans-serif;
  margin: 0;
}
.class-badge {
  margin-left: auto;
  color: #b3acdc;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 1.3px;
  border: 1px solid #ffffff2c;
  padding: 8px 10px;
  border-radius: 100px;
}
.class-options {
  display: grid;
  gap: 17px;
}
.class-option {
  min-height: 89px;
  border: 1px solid #a49cb965;
  border-radius: 16px;
  background: linear-gradient(140deg, #ffffff28, #ffffff09 75%);
  box-shadow: inset 0 2px 3px #ffffff25, 0 7px 20px #0002;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 24px 24px;
  text-align: center;
  font-size: 17px;
  color: #e1ddeb;
  font-weight: 600;
  transition: transform 0.25s, background 0.25s;
}
.class-option:hover {
  transform: translateX(3px);
  background: #ffffff25;
}
.class-option span {
  color: #b3a2ed;
  font-size: 18px;
}
.class-footnote {
  text-align: center;
  font-size: 12px;
  color: #9e97ba;
  margin: 25px 0 0;
}
.classes-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  color: #aca5c5;
  font-size: 12px;
}
.journey-section {
  padding-top: 45px;
  padding-bottom: 45px;
}
.journey-inner {
  background: linear-gradient(110deg, #5b4bc7, #403091 55%, #282063);
  border-radius: 31px;
  min-height: 375px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 60px 70px;
}
.journey-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#ffffff26 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.5;
}
.journey-copy {
  position: relative;
  z-index: 2;
  max-width: 550px;
}
.journey-copy .eyebrow {
  color: #ede8ff;
}
.journey-copy h2 {
  font: 800 clamp(35px, 4vw, 53px) / 1.2 Manrope, sans-serif;
  letter-spacing: -2px;
  margin: 20px 0;
}
.journey-copy em {
  font-style: normal;
  color: #cfc6ff;
}
.journey-copy p {
  font-size: 14px;
  line-height: 1.9;
  color: #e2dcff;
  max-width: 420px;
  margin-bottom: 28px;
}
.journey-art {
  position: absolute;
  right: 20px;
  top: 0;
  width: 430px;
  height: 100%;
}
.journey-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ffffff36;
  border-radius: 50%;
  width: 360px;
  height: 360px;
}
.ring-b {
  width: 520px;
  height: 520px;
}
.journey-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-13deg);
  width: 250px;
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(140deg, #ddd6ff, #9d8cfd);
  box-shadow: 0 20px 65px #150b5980;
  color: #292061;
  font: 800 53px/0.9 Manrope, sans-serif;
  letter-spacing: -3px;
}
.journey-circle span {
  font-size: 30px;
  letter-spacing: -1px;
}
.journey-circle b {
  font-size: 30px;
  margin-top: 14px;
}
.journey-tiny {
  position: absolute;
  right: 42px;
  top: 60px;
  font-size: 37px;
  color: #bcb1ff;
}
.contact-section {
  background: #100d21;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 24px;
}
.contact-form-card,
.contact-details {
  border: 1px solid var(--border);
  background: linear-gradient(130deg, #252039, #171329);
  border-radius: 24px;
  padding: 35px;
}
.contact-form-card h3 {
  font: 800 25px Manrope, sans-serif;
  display: flex;
  justify-content: space-between;
  margin: 0;
}
.contact-form-card h3 span {
  color: #9b8ae9;
}
.contact-form-card > p,
.contact-info > p {
  font-size: 13px;
  color: #aba4c2;
  line-height: 1.8;
  margin-bottom: 26px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
label {
  display: block;
  color: #dcd6ef;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 21px;
}
input,
select,
textarea {
  width: 100%;
  display: block;
  background: #0e0c1e;
  border: 1px solid #5c536f82;
  color: white;
  border-radius: 12px;
  outline: 0;
  padding: 15px;
  margin-top: 10px;
  font-size: 13px;
  transition: border 0.2s, box-shadow 0.2s;
}
input::placeholder,
textarea::placeholder {
  color: #807994;
}
select {
  color: #bdb6d1;
}
select option {
  background: #17132b;
  color: white;
}
input:focus,
textarea:focus,
select:focus {
  border-color: #9d8aff;
  box-shadow: 0 0 0 3px #8577ef22;
}
textarea {
  min-height: 126px;
  resize: vertical;
}
.full-btn {
  width: 100%;
  justify-content: space-between;
}
.form-status {
  font-size: 12px;
  line-height: 1.7;
  color: #d6c9ff;
  margin: 12px 0 0;
}
.form-status:empty {
  display: none;
}
.contact-info h3 {
  font: 800 24px Manrope, sans-serif;
  margin: 0;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
}
.contact-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #8273da23;
  color: #b3a3ff;
  display: grid;
  place-items: center;
  font-size: 19px;
  flex-shrink: 0;
}
.contact-item b {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}
.contact-item div span {
  font-size: 12px;
  color: #aaa3c0;
}
.map-wrap {
  margin-top: 30px;
  border: 1px solid #827c9a77;
  border-radius: 16px;
  overflow: hidden;
  background: #141126;
}
.map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  color: #bbb2d9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
}
.map-head a {
  color: #bbaaff;
  white-space: nowrap;
}
.map-wrap iframe {
  width: 100%;
  height: 220px;
  display: block;
  border: 0;
  background: #242038;
}
.map-note {
  color: #9f97b5;
  font-size: 10px;
  line-height: 1.5;
  padding: 10px 15px;
}
.footer {
  background: #090717;
  border-top: 1px solid #ffffff16;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1.3fr 1fr;
  gap: 45px;
  padding: 70px 0;
}
.footer-brand img {
  width: 240px;
}
.footer-brand p {
  font-size: 13px;
  line-height: 1.8;
  color: #a69fbe;
  margin-top: 26px;
}
.footer-col h4 {
  font-size: 13px;
  margin: 0 0 22px;
}
.footer-col a {
  display: block;
  font-size: 12px;
  color: #a69fbe;
  line-height: 2.7;
  transition: color 0.2s;
}
.footer-col a:hover {
  color: white;
}
.footer-bottom {
  border-top: 1px solid #ffffff17;
  padding: 25px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #817b9a;
  font-size: 11px;
}
.back-to-top {
  position: fixed;
  z-index: 40;
  right: 24px;
  bottom: 25px;
  width: 42px;
  height: 42px;
  border: 1px solid #ffffff40;
  border-radius: 50%;
  background: #5446b9e8;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(15px);
  transition: opacity 0.2s, transform 0.2s;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1090px) {
  .nav-links {
    gap: 17px;
  }
  .brand {
    width: 180px;
  }
  .nav-link {
    font-size: 12px;
  }
  .nav-cta {
    padding-inline: 13px;
  }
  .hero h1 {
    font-size: 54px;
  }
  .about-grid {
    gap: 55px;
  }
  .class-option {
    font-size: 15px;
  }
  .footer-top {
    gap: 20px;
  }
}
@media (max-width: 850px) {
  .container {
    width: min(var(--max), calc(100% - 42px));
  }
  .section {
    padding: 85px 0;
  }
  .nav-wrap {
    min-height: 76px;
  }
  .brand {
    width: 205px;
  }
  .menu-toggle {
    display: flex;
  }
  .nav-links {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: #100c27f7;
    box-shadow: 0 20px 35px #0008;
    border-bottom: 1px solid #ffffff25;
    padding: 24px 30px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-link {
    font-size: 15px;
  }
  .nav-link.active::after {
    display: none;
  }
  .nav-cta {
    align-self: flex-start;
  }
  .hero {
    padding-top: 155px;
    padding-bottom: 45px;
    min-height: auto;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hero-copy {
    text-align: center;
  }
  .hero-description {
    margin-inline: auto;
  }
  .hero-actions,
  .hero-proof {
    justify-content: center;
  }
  .hero-proof {
    text-align: left;
    margin-top: 38px;
  }
  .hero-visual {
    height: 490px;
    max-width: 525px;
    width: 100%;
    margin: auto;
  }
  .hero-bottom {
    margin-top: 0;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }
  .about-visual {
    max-width: 590px;
    width: 100%;
    margin: auto;
  }
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .class-grid {
    gap: 15px;
  }
  .class-panel {
    padding: 22px;
  }
  .class-heading {
    flex-wrap: wrap;
  }
  .class-badge {
    margin-left: 0;
  }
  .class-option {
    min-height: 80px;
    padding: 19px;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .journey-art {
    right: -100px;
    opacity: 0.45;
  }
  .journey-copy {
    max-width: 550px;
  }
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
  }
}
@media (max-width: 600px) {
  .container {
    width: calc(100% - 34px);
  }
  .section {
    padding: 73px 0;
  }
  .brand {
    width: 178px;
  }
  .hero {
    padding-top: 135px;
    padding-bottom: 35px;
  }
  .hero h1 {
    font-size: clamp(38px, 9.5vw, 51px);
    letter-spacing: -2.6px;
  }
  .hero-description {
    font-size: 14px;
    line-height: 1.8;
  }
  .hero-actions {
    gap: 10px;
  }
  .hero-actions .btn {
    min-height: 46px;
    padding: 12px 17px;
    font-size: 12px;
  }
  .hero-visual {
    height: 420px;
  }
  .hero-main-card {
    width: 270px;
    height: 332px;
    padding: 18px;
    border-radius: 20px;
  }
  .hero-letter {
    font-size: 156px;
  }
  .main-card-foot {
    margin-top: 12px;
    font-size: 11px;
  }
  .waveform {
    margin-top: 3px;
  }
  .glass-orbit {
    font-size: 10px;
  }
  .orbit-top {
    right: -4px;
    top: 25px;
  }
  .orbit-bottom {
    left: -2px;
    bottom: 8px;
  }
  .hero-bottom {
    display: none;
  }
  .section-title {
    font-size: clamp(30px, 8vw, 39px);
    letter-spacing: -1.5px;
  }
  .section-heading {
    display: block;
  }
  .section-heading > p {
    max-width: 100%;
    margin-top: 18px;
  }
  .about-frame {
    min-height: 380px;
  }
  .about-art {
    height: 250px;
  }
  .about-art-text {
    font-size: 50px;
  }
  .big-quote {
    font-size: 310px;
  }
  .about-grid {
    gap: 37px;
  }
  .floating-label {
    right: -7px;
    padding: 13px 15px;
    font-size: 11px;
  }
  .about-points {
    grid-template-columns: 1fr 1fr;
    gap: 17px 6px;
  }
  .about-points > div {
    font-size: 11px;
  }
  .service-grid,
  .class-grid {
    grid-template-columns: 1fr;
  }
  .service-card,
  .service-cta {
    min-height: 265px;
  }
  .class-panel {
    padding: 22px;
  }
  .class-heading {
    gap: 10px;
  }
  .class-heading h3 {
    font-size: 23px;
  }
  .class-badge {
    margin-left: auto;
  }
  .class-option {
    min-height: 79px;
    font-size: 15px;
  }
  .classes-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .journey-section {
    padding-top: 20px;
  }
  .journey-inner {
    padding: 55px 28px;
    min-height: 370px;
  }
  .journey-art {
    opacity: 0.19;
    right: -220px;
  }
  .journey-copy h2 {
    font-size: 38px;
  }
  .contact-form-card,
  .contact-details {
    padding: 25px 20px;
  }
  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px 20px;
  }
  .footer-brand {
    grid-column: 1/-1;
  }
  .footer-brand img {
    width: 220px;
  }
  .footer-bottom {
    flex-direction: column;
    line-height: 1.7;
  }
  .contact-section {
    padding-bottom: 70px;
  }
}
@media (max-width: 360px) {
  .hero-main-card {
    width: 245px;
  }
  .orbit-top {
    right: -8px;
  }
  .orbit-bottom {
    left: -8px;
  }
  .hero-actions {
    flex-direction: column;
  }
  .hero-actions .btn {
    width: 100%;
  }
  .class-badge {
    font-size: 8px;
  }
  .about-points {
    grid-template-columns: 1fr;
  }
}

/* === MOTION EDITION — interactive details and a 3D opening storybook === */
.hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-particles i {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #a89cff;
  border-radius: 50%;
  left: var(--x);
  top: var(--y);
  opacity: 0;
  box-shadow: 0 0 18px 4px #7c72ff72;
  animation: particleDrift var(--time) ease-in-out infinite var(--delay);
}
.hero-particles i:nth-child(1) {
  --x: 10%;
  --y: 16%;
  --time: 7s;
  --delay: 0s;
}
.hero-particles i:nth-child(2) {
  --x: 37%;
  --y: 33%;
  --time: 9s;
  --delay: -4s;
}
.hero-particles i:nth-child(3) {
  --x: 85%;
  --y: 12%;
  --time: 8s;
  --delay: -2s;
}
.hero-particles i:nth-child(4) {
  --x: 74%;
  --y: 70%;
  --time: 10s;
  --delay: -6s;
}
.hero-particles i:nth-child(5) {
  --x: 21%;
  --y: 75%;
  --time: 8s;
  --delay: -5s;
}
.hero-particles i:nth-child(6) {
  --x: 56%;
  --y: 20%;
  --time: 9s;
  --delay: -3s;
}
.hero-particles i:nth-child(7) {
  --x: 93%;
  --y: 85%;
  --time: 7s;
  --delay: -1s;
}
.hero-particles i:nth-child(8) {
  --x: 49%;
  --y: 90%;
  --time: 11s;
  --delay: -7s;
}
@keyframes particleDrift {
  0%,
  100% {
    transform: translateY(28px) scale(0.4);
    opacity: 0;
  }
  30%,
  70% {
    opacity: 0.75;
  }
  50% {
    transform: translateY(-22px) scale(1.2);
  }
}
.hero-visual .hero-main-card {
  animation: heroFloat 6s ease-in-out infinite;
}
.hero-visual .orbit-top {
  animation: floatTag 5s ease-in-out infinite;
}
.hero-visual .orbit-bottom {
  animation: floatTag 5.6s ease-in-out infinite -2s;
}
.hero-visual .visual-star {
  animation: starTwinkle 3.5s ease-in-out infinite alternate;
}
.hero-visual .waveform i {
  animation: soundWave 0.9s ease-in-out infinite alternate;
}
.hero-visual .waveform i:nth-child(3n) {
  animation-delay: -0.4s;
}
.hero-visual .waveform i:nth-child(4n) {
  animation-delay: -0.7s;
}
@keyframes heroFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-7deg);
  }
  50% {
    transform: translateY(-13px) rotate(-5deg);
  }
}
@keyframes floatTag {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -11px;
  }
}
@keyframes starTwinkle {
  to {
    opacity: 0.35;
    transform: scale(0.7) rotate(25deg);
  }
}
@keyframes soundWave {
  from {
    transform: scaleY(0.55);
  }
  to {
    transform: scaleY(1.35);
  }
}
.story-section {
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 66% 50%, #2b235b75, transparent 52%),
    linear-gradient(180deg, #0c091d, #17102e 60%, #0e0a20);
}
.story-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 65px;
  align-items: center;
  min-height: 525px;
}
.story-text {
  position: relative;
  z-index: 4;
}
.story-text .section-title {
  margin: 24px 0;
}
.story-text p {
  color: #b7b0d0;
  line-height: 1.9;
  max-width: 450px;
}
.story-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 30px;
}
.story-pills span {
  font-size: 11px;
  font-weight: 700;
  padding: 11px 14px;
  border-radius: 100px;
  border: 1px solid #9d89df50;
  background: #ffffff0b;
  color: #d8d0ff;
}
.story-ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
}
.ambient-a {
  height: 310px;
  width: 310px;
  left: -190px;
  top: 70px;
  background: #6441b552;
}
.ambient-b {
  height: 400px;
  width: 400px;
  right: -160px;
  bottom: -120px;
  background: #3454b04d;
}
.book-stage {
  height: 475px;
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1200px;
  isolation: isolate;
}
.book-aura {
  position: absolute;
  inset: 12% 5%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    #8670e451 0%,
    #6e4fd72d 39%,
    transparent 69%
  );
  filter: blur(16px);
  animation: auraBreathe 5s ease-in-out infinite;
}
.book-scene {
  width: 100%;
  height: 100%;
  position: relative;
  perspective: 1200px;
  transform: translateX(40px);
}
.book-shadow {
  position: absolute;
  left: 44%;
  top: 83%;
  width: 340px;
  height: 38px;
  transform: translateX(-50%) rotate(-8deg);
  background: #03020d95;
  filter: blur(20px);
  border-radius: 50%;
}
.book-volume {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 225px;
  height: 305px;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotate(-8deg) rotateX(12deg) rotateY(-13deg);
  filter: drop-shadow(10px 25px 24px #0401138f);
  transition: transform 1.4s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.book-back,
.book-cover,
.book-paper {
  position: absolute;
  inset: 0;
  border-radius: 5px 14px 14px 5px;
  transform-origin: 0 50%;
  backface-visibility: visible;
  transform-style: preserve-3d;
}
.book-back {
  background: linear-gradient(105deg, #e9e5ff, #fefeff 20%, #dfd8fb);
  border: 3px solid #c8c0ef;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #4c378d;
  box-shadow: inset 10px 0 20px #654c9b2c;
}
.book-back-label {
  letter-spacing: 2px;
  font-size: 9px;
  font-weight: 800;
}
.book-back-mark {
  font: 800 112px Manrope, sans-serif;
  letter-spacing: -11px;
}
.book-back small {
  letter-spacing: 2px;
  font-size: 8px;
  font-weight: 800;
}
.book-paper {
  background: linear-gradient(90deg, #d0c7ed, #fff 9%, #faf8ff 94%, #e2def4);
  border: 1px solid #ddd4f4;
  box-shadow: 4px 2px 4px #17102724;
  transition: transform 1.25s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.paper-one {
  z-index: 2;
}
.paper-two {
  z-index: 3;
}
.paper-inside {
  padding: 32px 23px;
  color: #51388f;
  display: flex;
  flex-direction: column;
  gap: 21px;
}
.paper-inside span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
}
.paper-inside b {
  font: 800 30px/1.2 Manrope, sans-serif;
  letter-spacing: -1.5px;
}
.paper-inside i {
  font-style: normal;
  font-size: 56px;
  color: #795de0;
}
.book-cover {
  z-index: 5;
  background: linear-gradient(130deg, #8876dc 0%, #4a368c 38%, #231747 100%);
  border: 1px solid #b6a5ff;
  box-shadow: inset 7px 0 12px #d4c9ff29, inset -5px 0 12px #100a36,
    7px 5px 15px #05020d44;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  padding: 30px 15px 22px;
  transition: transform 1.55s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.book-cover:after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid #c8b5ff52;
  border-radius: 3px 10px 10px 3px;
  pointer-events: none;
}
.cover-top {
  font-size: 9px;
  letter-spacing: 4px;
  text-align: center;
  line-height: 1.9;
  font-weight: 800;
}
.cover-graphic {
  font: 800 110px Manrope, sans-serif;
  letter-spacing: -10px;
  text-shadow: 0 12px 20px #110c3699;
}
.cover-graphic span {
  color: #aabbff;
}
.cover-bottom {
  font-size: 8px;
  letter-spacing: 2px;
  font-weight: 700;
}
.cover-bottom b {
  font-size: 17px;
  margin-left: 10px;
}
.book-spine {
  position: absolute;
  left: -12px;
  top: 2px;
  width: 16px;
  height: 300px;
  border-radius: 4px;
  background: #49367e;
  transform: translateZ(-5px) rotateY(30deg);
  box-shadow: inset 4px 0 3px #bd9af54a;
}
.book-stage.book-open .book-cover {
  transform: rotateY(-155deg);
}
.book-stage.book-open .paper-two {
  transform: rotateY(-127deg);
  transition-delay: 0.26s;
}
.book-stage.book-open .paper-one {
  transform: rotateY(-90deg);
  transition-delay: 0.48s;
}
.book-stage.book-open .book-volume {
  transform: translate(-32%, -50%) rotate(-3deg) rotateX(7deg) rotateY(0deg);
}
.book-stage.book-open .book-aura {
  background: radial-gradient(
    ellipse,
    #a58aff70 0%,
    #7452cf39 36%,
    transparent 70%
  );
}
.book-spark {
  position: absolute;
  color: #c4b2ff;
  text-shadow: 0 0 28px #c3afff;
  font-size: 35px;
  z-index: 4;
  animation: sparkFloat 4s ease-in-out infinite;
  opacity: 0.7;
}
.spark-a {
  left: 14%;
  top: 22%;
}
.spark-b {
  right: 8%;
  top: 18%;
  animation-delay: -1.6s;
}
.spark-c {
  right: 14%;
  bottom: 18%;
  animation-delay: -2.4s;
}
.book-instruction {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #b2a2e1;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 800;
}
.story-section .text-link {
  display: inline-flex;
}
.story-pills span {
  transition: transform 0.3s, background 0.3s;
}
.story-pills span:hover {
  transform: translateY(-4px);
  background: #8265d62c;
}
@keyframes sparkFloat {
  0%,
  100% {
    translate: 0 0;
    opacity: 0.35;
  }
  50% {
    translate: 5px -16px;
    opacity: 1;
  }
}
@keyframes auraBreathe {
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
}
.tilt-card {
  will-change: transform;
  transition: transform 0.25s ease, background 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}
.tilt-card.visible {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg)) translateY(var(--raise, 0px));
}
.tilt-card:hover {
  --raise: -6px;
  box-shadow: 0 20px 45px #0005;
}
.service-icon {
  display: inline-block;
  animation: iconHover 4s ease-in-out infinite;
}
.service-card:nth-child(2n) .service-icon {
  animation-delay: -2s;
}
@keyframes iconHover {
  50% {
    transform: rotate(15deg) scale(1.17);
  }
}
.service-arrow,
.round-arrow {
  transition: transform 0.3s, background 0.3s;
}
.service-card:hover .service-arrow {
  transform: rotate(45deg) scale(1.09);
}
.journey-ring {
  animation: ringPulse 8s ease-in-out infinite;
}
.journey-ring.ring-b {
  animation-delay: -4s;
}
.journey-circle {
  animation: journeyHover 7s ease-in-out infinite;
}
@keyframes ringPulse {
  50% {
    scale: 1.07;
    opacity: 0.5;
  }
}
@keyframes journeyHover {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
}
.reveal {
  transition-duration: 0.85s;
  transition-timing-function: cubic-bezier(0.2, 0.75, 0.2, 1);
}
.service-grid .reveal:nth-child(2),
.class-grid .reveal:nth-child(2) {
  transition-delay: 0.1s;
}
.service-grid .reveal:nth-child(3) {
  transition-delay: 0.18s;
}
@media (max-width: 850px) {
  .story-grid {
    grid-template-columns: 1fr;
    gap: 4px;
    text-align: center;
  }
  .story-text p {
    margin-inline: auto;
  }
  .story-pills {
    justify-content: center;
  }
  .story-section .text-link {
    justify-content: center;
  }
  .book-stage {
    height: 415px;
  }
  .book-scene {
    transform: translateX(20px);
  }
}
@media (max-width: 600px) {
  .story-section {
    padding-bottom: 72px;
  }
  .story-grid {
    gap: 5px;
  }
  .book-stage {
    height: 380px;
  }
  .book-scene {
    transform: translateX(4px);
  }
  .book-volume {
    scale: 0.78;
  }
  .book-shadow {
    width: 230px;
  }
  .book-spark {
    font-size: 24px;
  }
  .story-pills span {
    font-size: 10px;
    padding: 9px 10px;
  }
  .book-instruction {
    font-size: 9px;
  }
  .story-text .section-title {
    margin: 17px 0;
  }
  .story-text p {
    font-size: 14px;
  }
}
@media (hover: none), (pointer: coarse) {
  .tilt-card.visible {
    transform: translateY(var(--raise, 0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .book-volume,
  .book-cover,
  .book-paper {
    transition: none !important;
  }
  .book-stage.book-open .book-cover {
    transform: rotateY(-155deg);
  }
  .book-stage.book-open .paper-two {
    transform: rotateY(-127deg);
  }
  .book-stage.book-open .paper-one {
    transform: rotateY(-90deg);
  }
  .hero-visual .hero-main-card {
    transform: rotate(-7deg);
  }
  .tilt-card.visible {
    transform: none;
  }
}

/* === CONTINUOUS IELTS TIP BOOK — loops without stopping === */
.book-stage .book-volume {
  transform: translate(-32%, -50%) rotate(-3deg) rotateX(7deg) rotateY(0deg);
}
.book-stage .book-cover {
  transform: rotateY(-158deg);
  z-index: 1;
  transition: transform 1.45s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.book-stage .book-back {
  z-index: 0;
}
.book-stage .book-paper {
  transform: rotateY(0deg);
  transition: none;
  animation: ieltsPageTurn 10s linear infinite;
  will-change: transform, opacity;
  backface-visibility: hidden;
  box-shadow: 5px 4px 13px #24134b30;
}
.book-stage .paper-one {
  z-index: 4;
  animation-delay: 0s;
}
.book-stage .paper-two {
  z-index: 5;
  animation-delay: -7.5s;
}
.book-stage .paper-three {
  z-index: 6;
  animation-delay: -5s;
}
.book-stage .paper-four {
  z-index: 7;
  animation-delay: -2.5s;
}
.book-stage.book-open .book-paper {
  transform: rotateY(0deg);
  transition: none;
}
.book-stage.book-open .book-volume {
  transform: translate(-32%, -50%) rotate(-3deg) rotateX(7deg) rotateY(0deg);
}
.book-stage .paper-inside {
  gap: 15px;
  padding: 26px 20px 22px;
  align-items: flex-start;
  position: relative;
  height: 100%;
  justify-content: flex-start;
}
.book-stage .paper-inside span {
  font-size: 9px;
  letter-spacing: 1.3px;
  color: #7a5eb3;
}
.book-stage .paper-inside b {
  font: 800 23px/1.25 Manrope, sans-serif;
  letter-spacing: -0.9px;
}
.book-stage .paper-inside p {
  color: #6c6483;
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
  max-width: 180px;
}
.book-stage .paper-inside i {
  position: absolute;
  bottom: 10px;
  right: 20px;
  font-size: 34px;
  color: #a38ce8;
}
.book-stage .book-paper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 12px;
  background: linear-gradient(90deg, #6e56a335, transparent);
  pointer-events: none;
}
/* One page travels right to left, disappears on the left, then resets
   invisibly to the right. Four staggered pages create an endless sequence. */
@keyframes ieltsPageTurn {
  0% {
    transform: rotateY(-5deg);
    opacity: 1;
  }
  21% {
    transform: rotateY(-162deg);
    opacity: 1;
  }
  24% {
    transform: rotateY(-162deg);
    opacity: 0;
  }
  25%,
  99.9% {
    transform: rotateY(-5deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(-5deg);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .book-stage .book-paper,
  .book-stage.book-open .book-paper {
    animation: none !important;
    transform: rotateY(-6deg) !important;
  }
  .book-stage .book-cover {
    transform: rotateY(-158deg) !important;
  }
}

/* BOOK TIP-ONLY CONTINUOUS FLIP FIX: covers never interrupt IELTS pages. */
.book-stage .book-cover,
.book-stage .book-back {
  visibility: hidden !important;
}
.book-stage .book-paper {
  animation: none !important;
  transition: none !important;
}
.book-stage .book-paper.book-tip-base {
  position: absolute;
  z-index: 3 !important;
  opacity: 1 !important;
  transform: rotateY(0deg) !important;
  visibility: visible !important;
  backface-visibility: hidden;
}
.book-stage .book-paper.book-tip-turning {
  position: absolute;
  z-index: 12 !important;
  transform-origin: 0 50%;
  opacity: 1;
  backface-visibility: hidden;
  animation: tipPageSweep 1.8s linear forwards !important;
  pointer-events: none;
}
@keyframes tipPageSweep {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }
  85% {
    transform: rotateY(-160deg);
    opacity: 1;
  }
  99% {
    transform: rotateY(-178deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(-178deg);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .book-stage .book-paper.book-tip-turning {
    animation: none !important;
    display: none !important;
  }
}

/* Two-page OPEN book: the quiet left leaf stays visible while every IELTS tip
   turns from the right leaf to the left. No branded cover between turns. */
.book-stage .book-volume,
.book-stage.book-open .book-volume {
  transform: translate(0, -50%) rotate(-3deg) rotateX(7deg) rotateY(0deg);
  /* A filter here flattens the turning sheets into the book's plane. */
  filter: none;
}
.book-stage .book-left-page {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  box-sizing: border-box;
  border-radius: 14px 4px 4px 14px;
  background: linear-gradient(
    95deg,
    #ded5f3 0%,
    #f8f5ff 10%,
    #fffdfd 75%,
    #dfd7f3 100%
  );
  border: 2px solid #c9bde8;
  box-shadow: inset -20px 0 27px -20px #6e52a66e, -7px 7px 18px #13092446;
  z-index: 2;
  pointer-events: none;
}
.book-stage .book-left-page-inner {
  position: absolute;
  inset: 10px;
  border: 1px solid #a78ed52e;
  border-radius: 10px 2px 2px 10px;
  display: grid;
  place-items: center;
}
.book-stage .left-page-ornament {
  font-size: 34px;
  color: #b7a5da;
  opacity: 0.22;
}
.book-stage .book-spine {
  z-index: 11;
  left: -5px;
  width: 9px;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, #826db3, #ebe3ff 47%, #aa96d0);
  transform: none;
  border-radius: 2px;
  box-shadow: 0 0 8px #4e377c55;
  pointer-events: none;
}
.book-stage .book-paper.book-tip-turning {
  backface-visibility: visible;
}
/* Reverse of the turning sheet is a blank paper surface, never a cover. */
.book-stage .book-paper.book-tip-turning .paper-inside {
  backface-visibility: hidden;
}
.book-stage .book-paper.book-tip-turning::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f3edff 0%, #fffefd 80%, #ddd1f4 100%);
  border: 1px solid #d6c9ed;
  border-radius: 5px 14px 14px 5px;
  transform: rotateY(180deg) translateZ(1px);
  backface-visibility: hidden;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .book-stage .book-paper.book-tip-base,
  .book-stage.book-open .book-paper.book-tip-base {
    transform: rotateY(0deg) !important;
  }
}
@media (max-width: 600px) {
  .book-scene {
    transform: translateX(0);
  }
  .book-stage .book-volume,
  .book-stage.book-open .book-volume {
    transform: translate(0, -50%) rotate(-3deg) rotateX(7deg) rotateY(0deg);
  }
}

/* --- Hero standalone portrait update --- */
.hero-visual {
  height: 620px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero-portrait-standalone {
  position: relative;
  z-index: 2;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 34px 60px rgba(0, 0, 0, 0.3));
  animation: heroPortraitFloat 6.5s ease-in-out infinite;
}
.hero-visual .visual-halo {
  width: 450px;
  height: 450px;
  background: radial-gradient(
    circle,
    rgba(94, 71, 220, 0.22) 0%,
    rgba(71, 50, 145, 0.14) 40%,
    rgba(46, 35, 91, 0.06) 58%,
    transparent 75%
  );
  filter: blur(10px);
}
@keyframes heroPortraitFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@media (max-width: 850px) {
  .hero-visual {
    height: 500px;
  }
  .hero-portrait-standalone {
    max-height: 98%;
  }
}
@media (max-width: 600px) {
  .hero-visual {
    height: 430px;
  }
  .hero-portrait-standalone {
    max-height: 100%;
  }
}

/* --- Organic splash glow behind hero right-side image --- */
.hero-visual {
  isolation: isolate;
}
.hero-visual::before,
.hero-visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.hero-visual::before {
  width: 560px;
  height: 500px;
  left: 50%;
  bottom: 55px;
  transform: translateX(-50%) rotate(-12deg);
  border-radius: 42% 58% 51% 49% / 45% 40% 60% 55%;
  background: radial-gradient(
      circle at 32% 30%,
      rgba(179, 167, 255, 0.34) 0%,
      rgba(179, 167, 255, 0.18) 16%,
      transparent 36%
    ),
    radial-gradient(
      circle at 68% 28%,
      rgba(88, 133, 255, 0.26) 0%,
      rgba(88, 133, 255, 0.14) 18%,
      transparent 40%
    ),
    radial-gradient(
      circle at 42% 62%,
      rgba(134, 103, 255, 0.38) 0%,
      rgba(94, 71, 220, 0.28) 28%,
      rgba(69, 135, 255, 0.14) 55%,
      transparent 76%
    ),
    radial-gradient(
      circle at 72% 70%,
      rgba(91, 224, 255, 0.16) 0%,
      rgba(91, 224, 255, 0.08) 15%,
      transparent 34%
    );
  filter: blur(26px);
  opacity: 0.98;
  animation: heroSplashFloat 7.5s ease-in-out infinite;
}
.hero-visual::after {
  width: 450px;
  height: 410px;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%) rotate(10deg);
  border-radius: 57% 43% 62% 38% / 36% 54% 46% 64%;
  background: radial-gradient(
    circle at 48% 48%,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(160, 137, 255, 0.22) 22%,
    rgba(98, 83, 220, 0.16) 46%,
    transparent 72%
  );
  filter: blur(20px);
  opacity: 0.9;
  animation: heroSplashFloatSecondary 8s ease-in-out infinite;
}
.hero-visual .visual-halo {
  z-index: 1;
  width: 430px;
  height: 430px;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(151, 126, 255, 0.22) 18%,
    rgba(94, 71, 220, 0.16) 42%,
    rgba(69, 135, 255, 0.08) 62%,
    transparent 76%
  );
  filter: blur(14px);
  animation: heroGlowPulseSoft 7s ease-in-out infinite;
}
.hero-portrait-standalone {
  z-index: 2;
}
@keyframes heroSplashFloat {
  0%,
  100% {
    transform: translateX(-50%) rotate(-12deg) scale(0.98);
  }
  50% {
    transform: translateX(-50%) rotate(-8deg) scale(1.04);
  }
}
@keyframes heroSplashFloatSecondary {
  0%,
  100% {
    transform: translateX(-50%) rotate(10deg) scale(0.97);
    opacity: 0.82;
  }
  50% {
    transform: translateX(-50%) rotate(14deg) scale(1.02);
    opacity: 0.98;
  }
}
@keyframes heroGlowPulseSoft {
  0%,
  100% {
    transform: translateX(-50%) scale(0.96);
    opacity: 0.75;
  }
  50% {
    transform: translateX(-50%) scale(1.03);
    opacity: 0.95;
  }
}
@media (max-width: 850px) {
  .hero-visual::before {
    width: 450px;
    height: 400px;
    bottom: 34px;
  }
  .hero-visual::after {
    width: 360px;
    height: 320px;
    bottom: 76px;
  }
  .hero-visual .visual-halo {
    width: 340px;
    height: 340px;
    bottom: 58px;
  }
}
@media (max-width: 600px) {
  .hero-visual::before {
    width: 340px;
    height: 300px;
    bottom: 18px;
  }
  .hero-visual::after {
    width: 270px;
    height: 240px;
    bottom: 60px;
  }
  .hero-visual .visual-halo {
    width: 250px;
    height: 250px;
    bottom: 46px;
  }
}

/* Floating Button */
.chat-toggle {
  position: fixed;
  top: auto;
  left: auto;
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
   background: linear-gradient(110deg, #456ff0, #7855e8);
  box-shadow: 0 12px 35px #564bef3a;
  color: white;
  /* color: #fff; */
  padding: 12px 18px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
}

/* Chat Widget Box */
.chat-widget {
  position: fixed;
  top: auto;
  left: auto;
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
  width: 320px;
  max-width: 95%;
  max-height: calc(100dvh - 120px - env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: none;
  flex-direction: column;
  z-index: 10000;
}

/* Header */
.chat-header {
  display: flex;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #eee;
  background: #f9f9f9;
}

.chat-header img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-right: 10px;
}

.chat-header .online-status {
  font-size: 12px;
  color: green;
}

.chat-header .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: green;
  border-radius: 50%;
  margin-left: 5px;
}

.chat-header button {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
}

/* Body */
.chat-body {
  padding: 15px;
  overflow-y: auto;
}

.message-time {
  font-size: 12px;
  color: #999;
  text-align: center;
  margin-bottom: 10px;
}

.message-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
}

.message-bubble img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.message-bubble p {
  background: #f0f0f0;
  padding: 10px 15px;
  color: #000;
  border-radius: 15px;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.stl strong {
  color: #000;
}

.connect-title {
  margin: 20px 0 10px;
  font-weight: bold;
  color: #000;
  text-align: center;
}

.chat-actions {
  display: flex;
  justify-content: space-evenly;
  /* gap: 10px; */
  flex-wrap: wrap;
}

.chat-actions a {
  background: #e0f0ff;
  color: #007bff;
  padding: 10px 30px 10px 30px;
  border-radius: 12px;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-decoration: none;
}

.chat-actions a:hover {
  background: #f0f0f0;
  /* light grey */
  color: #0056b3;
  /* darker blue on hover */
}

/* Responsive Adjustments */
@media (max-width: 480px) {
  .chat-toggle {
    bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    right: calc(15px + env(safe-area-inset-right, 0px));
    font-size: 14px;
    padding: 10px 16px;
  }

  .chat-widget {
    right: 10px;
    left: 10px;
    width: auto;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 90px - env(safe-area-inset-bottom, 0px));
  }

  .chat-actions {
    justify-content: space-evenly;
  }

  .chat-header img,
  .message-bubble img {
    width: 35px;
    height: 35px;
  }

  .chat-header button {
    font-size: 24px;
  }

  .message-bubble p {
    font-size: 13px;
  }
}

.connect-title {
  margin: 20px 0 10px;
  font-weight: bold;
  color: #000;
  text-align: center;
}
/* chating wedges end */

/* Hide button while chat is open */
.chat-toggle[aria-expanded="true"] {
  display: none !important;
}

/* Chat modal at the same position */
.chat-widget {
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
  width: 320px;
  max-width: calc(100vw - 40px);
  z-index: 10000;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .chat-widget {
    bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    right: 15px;
    left: auto;
    width: min(320px, calc(100vw - 30px));
  }
}

.back-to-top {
  display: none !important;
}

/* Multi-page extension — uses the existing Brythonic palette */
.inner-main {
  padding-top: 100px;
  min-height: 75vh;
  overflow: hidden;
}
.inner-hero {
  position: relative;
  padding: 90px 0 72px;
  background: radial-gradient(
    ellipse at 82% 20%,
    rgba(130, 86, 232, 0.16),
    transparent 52%
  );
}
.inner-hero .eyebrow {
  margin-bottom: 22px;
}
.inner-hero h1 {
  font-size: clamp(2.65rem, 6vw, 5.4rem);
  line-height: 1.08;
  letter-spacing: -0.05em;
  max-width: 920px;
  margin: 16px 0 24px;
}
.inner-hero p {
  max-width: 680px;
  font-size: 1.1rem;
  line-height: 1.85;
  opacity: 0.78;
}
.bread {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.88rem;
  opacity: 0.7;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.bread a {
  color: inherit;
  text-decoration: none;
}
.inner-section {
  padding: 75px 0;
}
.inner-section.alt {
  background: rgba(130, 86, 232, 0.045);
}
.inner-section h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.3rem);
  letter-spacing: -0.035em;
  line-height: 1.16;
  margin: 12px 0 25px;
}
.inner-section p {
  line-height: 1.9;
  opacity: 0.78;
}
.inner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 23px;
}
.inner-card {
  padding: 32px;
  border: 1px solid rgba(150, 120, 220, 0.23);
  background: rgba(148, 116, 235, 0.055);
  border-radius: 22px;
  transition: transform 0.25s, border 0.25s;
}
.inner-card:hover {
  transform: translateY(-4px);
  border-color: rgba(150, 120, 220, 0.55);
}
.inner-card h3 {
  font-size: 1.35rem;
  margin: 13px 0;
}
.inner-card p {
  margin: 0;
}
.inner-card a {
  display: inline-flex;
  margin-top: 22px;
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}
.inner-pill {
  display: inline-block;
  border: 1px solid rgba(153, 120, 220, 0.32);
  padding: 9px 15px;
  border-radius: 99px;
  font-size: 0.82rem;
  margin: 7px 8px 0 0;
}
.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 55px;
  align-items: center;
}
.profile-photo {
  min-height: 440px;
  display: flex;
  align-items: end;
  justify-content: center;
  background: radial-gradient(
    circle at 50% 48%,
    rgba(164, 115, 255, 0.3),
    transparent 60%
  );
  border: 1px solid rgba(150, 120, 220, 0.19);
  border-radius: 30px;
  overflow: hidden;
}
.profile-photo img {
  width: 100%;
  max-width: 490px;
  /* max-height: 520px; */
  object-fit: contain;
  object-position: bottom;
  display: block;
}
.inner-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 29px;
}
.editable-note {
  margin-top: 18px;
  padding: 20px 22px;
  border: 1px dashed rgba(150, 120, 220, 0.45);
  border-radius: 16px;
  font-size: 0.93rem;
  line-height: 1.8;
  opacity: 0.87;
}
.big-cta {
  padding: 60px;
  border-radius: 30px;
  background: linear-gradient(
    135deg,
    rgba(109, 65, 208, 0.21),
    rgba(203, 85, 175, 0.1)
  );
  border: 1px solid rgba(150, 120, 220, 0.2);
}
.big-cta h2 {
  max-width: 700px;
}
.inner-tag {
  font-size: 0.77rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 750;
  opacity: 0.65;
}
.steps {
  counter-reset: step;
}
.step {
  position: relative;
  padding: 24px 24px 24px 70px;
  border-bottom: 1px solid rgba(150, 120, 220, 0.2);
}
.step:before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 26px;
  font-weight: 800;
  color: #a781ed;
}
.step h3 {
  margin: 0 0 8px;
}
.step p {
  margin: 0;
}
.inner-main .btn {
  display: inline-flex;
}
.course-link {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}
.mini-label {
  color: #a68ce0;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.09em;
}
.inner-main section {
  scroll-margin-top: 110px;
}
@media (max-width: 800px) {
  .inner-main {
    padding-top: 75px;
  }
  .inner-hero {
    padding: 65px 0 48px;
  }
  .inner-grid,
  .profile-grid {
    grid-template-columns: 1fr;
  }
  .profile-photo {
    min-height: 320px;
  }
  .big-cta {
    padding: 30px;
  }
  .inner-section {
    padding: 53px 0;
  }
  .inner-card {
    padding: 24px;
  }
}