.transition-body { min-height: 100vh; overflow-x: hidden; background: #030a20; }
.transition-scene { position: relative; isolation: isolate; display: grid; min-height: 100vh; min-height: 100svh; place-items: center; overflow: hidden; padding: 34px 18px 42px; background: radial-gradient(ellipse at 50% 44%, rgba(12, 33, 77, .62), transparent 54%), linear-gradient(125deg, #020817, #06132d 53%, #03091c); }
.transition-scene::after { position: absolute; z-index: -1; inset: 0; content: ""; pointer-events: none; background: linear-gradient(90deg, rgba(1, 6, 20, .46), rgba(1, 7, 22, .12) 48%, rgba(1, 6, 20, .48)), linear-gradient(0deg, rgba(1, 6, 20, .32), transparent 45%, rgba(1, 6, 20, .12)); }
.transition-stars { position: absolute; z-index: -2; inset: 0; opacity: .56; pointer-events: none; background-image: radial-gradient(1px 1px at 35px 28px, rgba(228, 241, 255, .85) 99%, transparent), radial-gradient(1px 1px at 148px 95px, rgba(137, 190, 255, .78) 99%, transparent), radial-gradient(1.5px 1.5px at 242px 43px, rgba(231, 219, 255, .8) 99%, transparent), radial-gradient(1px 1px at 335px 155px, rgba(170, 204, 255, .7) 99%, transparent), radial-gradient(1px 1px at 420px 76px, rgba(233, 244, 255, .8) 99%, transparent); background-size: 510px 230px; }
.transition-earth-aura { position: absolute; z-index: -2; top: 50%; left: -420px; width: min(900px, 86vw); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 52% 50%, transparent 59%, rgba(20, 184, 255, .13) 65%, rgba(76, 224, 255, .37) 69%, rgba(47, 170, 255, .19) 73%, transparent 78%); filter: blur(19px); pointer-events: none; }
.transition-earth { position: absolute; z-index: -2; top: 50%; left: -385px; width: min(840px, 80vw); aspect-ratio: 1; transform: translateY(-50%); overflow: hidden; border-radius: 50%; background: #06132d; opacity: .56; box-shadow: inset 18px 0 48px rgba(73, 218, 255, .27), inset -80px -70px 130px rgba(0, 3, 23, .7), 0 0 44px rgba(38, 205, 255, .3); }
.transition-earth .earth-canvas, .transition-earth .earth-atmosphere, .transition-earth .earth-shadow, .transition-earth .earth-gloss { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.transition-earth .earth-atmosphere { border: 2px solid rgba(114, 234, 255, .35); box-shadow: inset 0 0 28px rgba(99, 232, 255, .17), 0 0 22px rgba(58, 220, 255, .26); }
.transition-earth .earth-shadow { background: radial-gradient(ellipse at 32% 25%, rgba(166, 213, 255, .06), transparent 38%), radial-gradient(ellipse at 102% 55%, rgba(0, 2, 18, .66) 4%, rgba(0, 2, 18, .3) 35%, transparent 68%), radial-gradient(ellipse at 50% 110%, rgba(0, 2, 16, .72), transparent 50%); }
.transition-earth .earth-gloss { background: radial-gradient(ellipse at 80% 13%, rgba(98, 247, 255, .66), rgba(63, 218, 255, .24) 1.1%, transparent 12%); mix-blend-mode: screen; }
.transition-content { position: relative; z-index: 1; display: flex; width: min(100%, 520px); flex-direction: column; align-items: center; gap: 23px; }
.next-steps-card { width: min(100%, 468px); min-height: 408px; padding: 24px 24px 20px; border: 1px solid rgba(64, 157, 218, .68); border-radius: 17px; background: linear-gradient(145deg, rgba(5, 11, 34, .95), rgba(5, 10, 31, .93)); box-shadow: 0 18px 65px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 28px rgba(24, 105, 206, .11); backdrop-filter: blur(12px); }
.next-steps-kicker { margin: 0 0 8px; color: #65dff6; font-size: 10px; font-weight: 700; letter-spacing: 1.7px; }
.next-steps-card h1 { margin: 0 0 16px; color: #fafaff; font-size: clamp(20px, 4.2vw, 23px); font-weight: 700; letter-spacing: -.035em; line-height: 1.3; }
.next-steps-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.next-steps-list li { display: grid; min-height: 41px; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; }
.next-step-number { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(221, 45, 231, .84); border-radius: 50%; color: #e35bec; background: rgba(83, 20, 111, .18); box-shadow: inset 0 0 13px rgba(205, 43, 234, .08), 0 0 12px rgba(204, 48, 235, .09); font-size: 11px; font-weight: 700; }
.next-step-copy { display: grid; min-width: 0; gap: 3px; }
.next-step-copy strong { color: #f3f1fa; font-size: 13px; font-weight: 600; line-height: 1.25; }
.next-step-tamil { color: #aebbd3; font-size: 11px; font-weight: 400; line-height: 1.45; }
.next-step-final .next-step-number { border-color: #1ccde6; color: #55e6f1; background: rgba(7, 76, 106, .2); box-shadow: inset 0 0 12px rgba(25, 207, 233, .08), 0 0 13px rgba(34, 193, 235, .08); }
.next-steps-note { display: flex; align-items: center; gap: 10px; margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(125, 147, 194, .2); }
.next-steps-note p { margin: 0; color: #b6b8ca; font-size: 10.5px; line-height: 1.45; }
.note-orbit { position: relative; display: grid; width: 14px; height: 14px; flex: 0 0 14px; place-items: center; border: 1px solid #52cce9; border-radius: 50%; }
.note-orbit::before, .note-orbit i { display: block; width: 7px; height: 7px; border: 1px solid #52cce9; border-radius: 50%; content: ""; }
.note-orbit i { position: absolute; width: 3px; height: 3px; border: 0; background: #64e2f4; box-shadow: 0 0 7px #44dcff; }
.pricing-loader { display: grid; justify-items: center; gap: 3px; min-height: 80px; text-align: center; }
.loader-title { margin: 0; color: transparent; background: linear-gradient(100deg, #e8f8ff 5%, #62dcff 38%, #b772ff 67%, #f15adf 90%); background-size: 220% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: clamp(23px, 5vw, 31px); font-weight: 700; letter-spacing: -.03em; animation: loading-shimmer 2.3s linear infinite; filter: drop-shadow(0 0 13px rgba(61, 158, 255, .27)); }
.loader-title-ta { font-size: clamp(17px, 4vw, 21px); letter-spacing: 0; }
.loader-dots { display: inline-flex; width: 1.15em; text-align: left; }
.loader-dots i { font-style: normal; animation: loading-dot 1.1s ease-in-out infinite; }
.loader-dots i:nth-child(2) { animation-delay: .16s; }
.loader-dots i:nth-child(3) { animation-delay: .32s; }
.loader-progress { display: flex; align-items: center; justify-content: center; gap: 7px; height: 10px; margin: 4px 0 2px; }
.loader-progress i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #70e4ff; opacity: .2; box-shadow: 0 0 0 rgba(89, 216, 255, 0); animation: loading-trail 1.15s ease-in-out infinite; }
.loader-progress i:nth-child(3n + 2) { background: #9b72ff; }
.loader-progress i:nth-child(3n) { background: #e45bff; }
.loader-progress i:nth-child(2) { animation-delay: .08s; }
.loader-progress i:nth-child(3) { animation-delay: .16s; }
.loader-progress i:nth-child(4) { animation-delay: .24s; }
.loader-progress i:nth-child(5) { animation-delay: .32s; }
.loader-progress i:nth-child(6) { animation-delay: .4s; }
.loader-progress i:nth-child(7) { animation-delay: .48s; }
.loader-progress i:nth-child(8) { animation-delay: .56s; }
.loader-progress i:nth-child(9) { animation-delay: .64s; }
.loader-progress i:nth-child(10) { animation-delay: .72s; }
.loader-progress i:nth-child(11) { animation-delay: .8s; }
.loader-caption { margin: 0; color: #b5c6e1; font-size: 11px; letter-spacing: .04em; }
.loader-orbit { position: relative; display: none; }
@keyframes loading-shimmer { from { background-position: 100% 0; } to { background-position: -120% 0; } }
@keyframes loading-dot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
@keyframes loading-trail { 0%, 100% { opacity: .2; transform: translateY(0) scale(.72); box-shadow: 0 0 0 rgba(89, 216, 255, 0); } 45% { opacity: 1; transform: translateY(-2px) scale(1.25); box-shadow: 0 0 10px currentColor; } }
@media (max-width: 520px) {
  .transition-scene { padding: 22px 16px 30px; }
  .transition-content { gap: 18px; }
  .next-steps-card { min-height: 0; padding: 22px 18px 18px; border-radius: 15px; }
  .next-steps-card h1 { margin-bottom: 14px; }
  .next-steps-list { gap: 10px; }
  .next-steps-list li { grid-template-columns: 34px minmax(0, 1fr); gap: 9px; }
  .next-step-number { width: 32px; height: 32px; }
  .next-step-copy strong { font-size: 12px; }
  .next-step-copy small { font-size: 10px; }
  .next-steps-note { margin-top: 14px; padding-top: 13px; }
  .transition-earth, .transition-earth-aura { left: auto; right: -450px; width: 680px; opacity: .43; }
  .transition-earth-aura { opacity: .75; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-title, .loader-dots i, .loader-progress i { animation: none; }
}