:root {
    --bg: #030a1d;
    --bg2: #07122d;
    --panel: #0a1736;
    --panel2: #0b1d42;
    --line: #233a78;
    --white: #f7fbff;
    --muted: #aebceb;
    --blue: #35b9ff;
    --purple: #8f46ff;
    --pink: #ff4fad;
    --orange: #ff7a1a;
    --teal: #16d9bd;
    --green: #54f5ae;
    --cyan: #5ee7ff;
    --grad: linear-gradient(100deg, #4c83ff 0%, #8e41ff 48%, #ff4da1 100%);
    --grad2: linear-gradient(135deg, #13265a 0%, #5122a8 50%, #ec3d9b 100%);
    --shadow:
        0 28px 90px rgba(45, 69, 255, 0.25),
        inset 0 1px rgba(255, 255, 255, 0.12);
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family: Inter, system-ui, sans-serif;
    background:
        radial-gradient(
            circle at 70% 7%,
            rgba(100, 42, 255, 0.25),
            transparent 24%
        ),
        radial-gradient(
            circle at 12% 22%,
            rgba(0, 153, 255, 0.14),
            transparent 28%
        ),
        linear-gradient(180deg, #020817 0%, #061127 42%, #030817 100%);
    color: var(--white);
    letter-spacing: -0.015em;
}
.page {
    width: min(1320px, calc(100% - 48px));
    margin: auto;
}
.nav {
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo {
    font-size: 28px;
    font-weight: 900;
}
.logo span {
    background: var(--grad);
    -webkit-background-clip: text;
    color: transparent;
}
.logo-img {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.logo-img img {
    height: 180px;
    width: auto;
    display: block;
}
.links {
    display: flex;
    gap: 42px;
    font-size: 13px;
    font-weight: 800;
}
.links a {
    color: #f7fbff;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.25s ease;
}
.links a:hover {
    color: #ff61bd;
}
.section,
.title,
.stats,
.how,
.pricing,
.testimonials,
.banner,
footer {
    scroll-margin-top: 105px;
}
.actions {
    display: flex;
    gap: 16px;
}
.btn {
    border: 1px solid rgba(132, 154, 255, 0.38);
    border-radius: 12px;
    padding: 14px 22px;
    color: white;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    background: rgba(9, 18, 42, 0.72);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
}
.btn.primary {
    background: var(--grad);
    border: 0;
    box-shadow: 0 16px 38px rgba(236, 65, 172, 0.35);
}
.hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 48px;
    align-items: center;
    min-height: 610px;
    padding: 28px 0 36px;
}
.pill {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(132, 103, 255, 0.4);
    background: rgba(77, 56, 180, 0.22);
    border-radius: 999px;
    color: #d8dcff;
    font-size: 14px;
    font-weight: 800;
    padding: 10px 18px;
    margin-bottom: 30px;
}
.hero h1 {
    font-size: 57px;
    line-height: 1.06;
    margin: 0 0 28px;
    font-weight: 900;
}
.gradText {
    background: linear-gradient(90deg, #31c7ff, #7647ff, #ff4ca9);
    -webkit-background-clip: text;
    color: transparent;
}
.underline {
    display: inline-block;
    position: relative;
}
.underline:after {
    content: "";
    position: absolute;
    height: 6px;
    left: 4px;
    right: 8px;
    bottom: -8px;
    background: linear-gradient(90deg, #30c7ff, #ffb72e);
    border-radius: 99px;
    transform: rotate(-3deg);
}
.hero p {
    color: #d6dffc;
    font-size: 17px;
    line-height: 1.75;
    max-width: 520px;
    margin: 0 0 34px;
}
.cta {
    display: flex;
    gap: 20px;
    margin-bottom: 50px;
}
.mini {
    display: flex;
    gap: 40px;
    color: #d4ddff;
    font-size: 12px;
    font-weight: 800;
}
.mini span:before {
    content: "✦";
    color: #56dfff;
    margin-right: 8px;
}
.ai-note {
    position: absolute;
    left: 45%;
    top: 145px;
    color: #ff65db;
    font-weight: 800;
    font-size: 15px;
    transform: rotate(-10deg);
}
.visual {
    position: relative;
    min-height: 580px;
}
.poster-grid {
    display: grid;
    grid-template-columns: repeat(2, 210px);
    gap: 16px;
    position: absolute;
    left: 96px;
    top: 0;
    z-index: 3;
}
.poster {
    height: 285px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 18px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow);
    background: linear-gradient(135deg, #19104d, #9b2fff);
}
.poster:after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 86% 28%,
            rgba(255, 255, 255, 0.42),
            transparent 25%
        ),
        linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent 55%);
}
.poster h3 {
    position: relative;
    z-index: 1;
    font-size: 26px;
    line-height: 0.98;
    margin: 18px 0 8px;
}
.poster small {
    position: relative;
    z-index: 2;
    color: #eaf1ff;
}
.poster .tag {
    position: absolute;
    z-index: 2;
    bottom: 18px;
    left: 18px;
    background: white;
    color: #271547;
    font-size: 10px;
    font-weight: 900;
    border-radius: 4px;
    padding: 8px 10px;
}
.poster.teal {
    background: linear-gradient(135deg, #072f3d, #0bbfa5);
}
.poster.orange {
    background: linear-gradient(135deg, #65130f, #ff7a16);
}
.poster.blue {
    background: linear-gradient(135deg, #071741, #0f7cff);
}
.orb {
    position: absolute;
    border-radius: 50%;
    filter: drop-shadow(0 20px 30px rgba(191, 53, 255, 0.4));
    background: radial-gradient(
        circle at 25% 25%,
        #63e8ff,
        #953dff 45%,
        #ff4c9b
    );
    display: grid;
    place-items: center;
    font-size: 44px;
}
.orb.one {
    width: 96px;
    height: 96px;
    left: 0;
    top: 290px;
}
.right-ui {
    position: absolute;
    right: 0;
    top: 170px;
    width: 230px;
    height: 170px;
    border-radius: 18px;
    background: linear-gradient(150deg, #4a2bea, #1a245d);
    box-shadow: var(--shadow);
    transform: rotate(-4deg);
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.right-ui:before {
    content: "";
    display: block;
    width: 120px;
    height: 20px;
    border-radius: 8px;
    background: #9d72ff;
    margin-bottom: 24px;
}
.right-ui:after {
    content: "";
    display: block;
    width: 135px;
    height: 78px;
    border-radius: 12px;
    background: linear-gradient(135deg, #8256ff, #f45ab0);
    opacity: 0.8;
}
.float {
    position: absolute;
    background: linear-gradient(135deg, #5d35ff, #bb44ff);
    border: 1px solid rgba(255, 255, 255, 0.23);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(91, 56, 255, 0.33);
    display: grid;
    place-items: center;
    font-weight: 900;
}
.aa {
    width: 58px;
    height: 58px;
    right: 50px;
    top: 98px;
    font-size: 23px;
}
.palette {
    width: 64px;
    height: 64px;
    right: 10px;
    top: 340px;
    border-radius: 50%;
    font-size: 28px;
}
.dotted {
    position: absolute;
    right: 40px;
    top: 34px;
    width: 220px;
    height: 420px;
    border: 2px dashed rgba(187, 104, 255, 0.5);
    border-radius: 120px;
    z-index: 1;
}
.section {
    border: 1px solid rgba(92, 113, 213, 0.55);
    border-radius: 16px;
    background: linear-gradient(
        180deg,
        rgba(12, 28, 67, 0.8),
        rgba(8, 18, 42, 0.9)
    );
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
    margin: 28px 0;
    padding: 30px;
}
.register {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 34px;
    align-items: center;
}
.megaphone {
    display: flex;
    align-items: center;
    gap: 28px;
}
.mega {
    font-size: 92px;
    filter: drop-shadow(0 10px 20px rgba(255, 58, 203, 0.35));
}
.register h2 {
    color: #a46aff;
    margin: 0 0 10px;
    font-size: 26px;
}
.register p {
    color: #cbd8ff;
    margin: 0;
    line-height: 1.6;
}
.form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.field label {
    display: block;
    font-weight: 800;
    font-size: 12px;
    margin: 0 0 8px;
    color: #eef3ff;
}
.field input,
.field select {
    width: 100%;
    background: #07132e;
    border: 1px solid #2b3f7d;
    border-radius: 7px;
    color: #dfe8ff;
    padding: 13px 14px;
}
.phone-combo {
    display: flex;
    width: 100%;
    background: #07132e;
    border: 1px solid #2b3f7d;
    border-radius: 7px;
    overflow: hidden;
}
.phone-combo select {
    width: 135px;
    flex-shrink: 0;
    background: #07132e;
    border: 0;
    border-right: 1px solid #2b3f7d;
    color: #dfe8ff;
    padding: 13px 10px;
    outline: none;
}
.phone-combo input {
    flex: 1;
    background: #07132e;
    border: 0;
    color: #dfe8ff;
    padding: 13px 14px;
    outline: none;
    min-width: 0;
}
.checks {
    font-size: 12px;
    color: #d6e0ff;
    display: grid;
    gap: 10px;
}
.form-errors {
    background: rgba(255, 79, 173, 0.12);
    border: 1px solid rgba(255, 79, 173, 0.45);
    color: #ffd8ec;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
}
.form-errors p {
    margin: 4px 0;
}
.oldnew {
    position: relative;
    display: grid;
    grid-template-columns: 1.18fr 1.02fr 92px 1.02fr 1.18fr;
    align-items: stretch;
    gap: 0;
    min-height: 198px;
    overflow: hidden;
    padding: 0;
    background: linear-gradient(
        90deg,
        rgba(6, 18, 43, 0.98) 0%,
        rgba(9, 24, 55, 0.98) 34%,
        rgba(25, 22, 75, 0.97) 50%,
        rgba(33, 18, 80, 0.97) 66%,
        rgba(9, 23, 55, 0.98) 100%
    );
    border-color: rgba(84, 108, 221, 0.72);
}
.oldnew:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 14% 48%,
            rgba(58, 104, 184, 0.22),
            transparent 31%
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(124, 73, 255, 0.26),
            transparent 18%
        ),
        radial-gradient(
            circle at 84% 48%,
            rgba(193, 65, 255, 0.28),
            transparent 31%
        );
    z-index: 0;
}
.oldnew:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(194, 123, 255, 0.46),
        transparent
    );
    z-index: 1;
}
.oldnew > * {
    position: relative;
    z-index: 2;
}
.old-visual,
.new-visual {
    height: 198px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}
.old-visual {
    background: linear-gradient(
        90deg,
        rgba(6, 15, 34, 0.98),
        rgba(9, 20, 45, 0.48) 72%,
        transparent
    );
}
.new-visual {
    background: linear-gradient(
        270deg,
        rgba(34, 14, 70, 0.98),
        rgba(25, 18, 61, 0.54) 72%,
        transparent
    );
    padding-right: 26px;
}
.old-visual:before {
    content: "";
    position: absolute;
    left: 24px;
    right: 18px;
    bottom: 16px;
    height: 80px;
    background: radial-gradient(
        ellipse at 50% 100%,
        rgba(81, 105, 155, 0.18),
        transparent 70%
    );
    border-radius: 50%;
    filter: blur(1px);
}
.new-visual:before {
    content: "";
    position: absolute;
    left: 12px;
    right: 30px;
    bottom: 14px;
    height: 90px;
    background: radial-gradient(
        ellipse at 52% 100%,
        rgba(170, 69, 255, 0.26),
        transparent 70%
    );
    border-radius: 50%;
    filter: blur(1px);
}
.person {
    position: relative;
    width: 210px;
    height: 166px;
    border-radius: 28px 28px 0 0;
    display: grid;
    place-items: center;
    font-size: 88px;
    filter: grayscale(1) saturate(0.4);
    background: radial-gradient(
        circle at 50% 20%,
        rgba(255, 255, 255, 0.13),
        transparent 35%
    );
    text-shadow: 0 20px 38px rgba(0, 0, 0, 0.58);
    transform: translateY(10px);
    z-index: 2;
}
.person:after {
    content: "";
    position: absolute;
    left: 35px;
    right: 35px;
    bottom: 0;
    height: 24px;
    border-radius: 14px 14px 0 0;
    background: rgba(3, 8, 22, 0.55);
}
.person.happy {
    filter: none;
    background: radial-gradient(
        circle at 57% 16%,
        rgba(255, 97, 222, 0.42),
        transparent 34%
    );
    text-shadow: 0 24px 48px rgba(126, 55, 255, 0.46);
    transform: translateY(8px) scale(1.03);
    z-index: 6;
}
.laptop-old,
.laptop-new {
    position: absolute;
    bottom: 28px;
    width: 126px;
    height: 58px;
    border-radius: 7px 7px 4px 4px;
    background: linear-gradient(150deg, #151f36, #0a0f21);
    border: 1px solid rgba(130, 147, 194, 0.22);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
    z-index: 3;
}
.laptop-old {
    right: 34px;
    filter: grayscale(1);
    opacity: 0.85;
}
.laptop-new {
    left: 30px;
    background: linear-gradient(150deg, #3821a8, #101a45);
    border-color: rgba(201, 121, 255, 0.4);
}
.laptop-old:after,
.laptop-new:after {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    bottom: -12px;
    height: 13px;
    border-radius: 4px;
    background: linear-gradient(90deg, #0b1024, #1f2949, #0b1024);
}
.laptop-new:after {
    background: linear-gradient(90deg, #251070, #7042ff, #251070);
}
.comparison-list {
    display: grid;
    gap: 12px;
    padding: 30px 22px 26px;
    color: #e9edff;
    font-size: 14px;
    line-height: 1.15;
    align-content: center;
}
.comparison-list b {
    justify-self: start;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 8px 16px;
    margin-bottom: 2px;
    font-size: 11px;
    letter-spacing: 0.05em;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.09);
}
.comparison-list.new b {
    background: linear-gradient(90deg, #8b49ff, #f149b7);
    color: white;
    border: 0;
    box-shadow: 0 10px 26px rgba(177, 69, 255, 0.35);
}
.comparison-list div {
    display: flex;
    gap: 11px;
    align-items: center;
    font-weight: 650;
    white-space: nowrap;
}
.comparison-list div:before {
    content: "✓";
    width: 19px;
    height: 19px;
    border: 1px solid rgba(211, 224, 255, 0.78);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    color: #d8e4ff;
    flex: 0 0 19px;
}
.comparison-list.new div:before {
    border-color: #c486ff;
    color: #e78aff;
    background: rgba(154, 73, 255, 0.12);
}
.vs {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 28% 22%,
        #6ff1ff 0%,
        #7a4dff 50%,
        #ff53b7 100%
    );
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 22px;
    box-shadow:
        0 0 52px rgba(168, 74, 255, 0.82),
        inset 0 1px rgba(255, 255, 255, 0.32);
    margin: auto;
    z-index: 5;
    border: 1px solid rgba(255, 255, 255, 0.22);
}
.sparkle-tile {
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, #6e41ff, #d34cff);
    box-shadow: 0 18px 34px rgba(149, 61, 255, 0.42);
    display: grid;
    place-items: center;
    color: white;
    font-weight: 900;
    z-index: 4;
}
.sparkle-tile.t1 {
    right: 166px;
    top: 32px;
}
.sparkle-tile.t2 {
    right: 96px;
    bottom: 36px;
}
.sparkle-tile.t3 {
    right: 232px;
    bottom: 58px;
}
.sparkle-tile.t4 {
    right: 56px;
    top: 52px;
}
.sparkle-tile.t5 {
    right: 132px;
    top: 88px;
}
.title {
    text-align: center;
    font-size: 25px;
    font-weight: 900;
    margin: 30px 0 18px;
}
.title span {
    color: #f058ca;
}
.stats,
.pricing,
.testimonials {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.card {
    border: 1px solid rgba(73, 100, 188, 0.75);
    border-radius: 13px;
    background: linear-gradient(
        150deg,
        rgba(13, 36, 80, 0.78),
        rgba(8, 18, 43, 0.9)
    );
    padding: 28px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.09);
}
.stat b {
    font-size: 32px;
    color: #4bc5ff;
}
.stat i {
    font-size: 50px;
    font-style: normal;
    float: left;
    margin-right: 18px;
}
.how {
    display: grid;
    grid-template-columns: 1fr 55px 1fr 55px 1fr;
    gap: 16px;
    align-items: center;
}
.step {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 16px;
    align-items: center;
}
.circle {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: radial-gradient(circle, #fa5ac5, #5534fb);
    display: grid;
    place-items: center;
    font-size: 38px;
    position: relative;
}
.circle em {
    position: absolute;
    right: 0;
    top: -4px;
    background: #bd50fb;
    border-radius: 50%;
    font-size: 14px;
    padding: 5px 9px;
    font-style: normal;
}
.arrow {
    text-align: center;
    color: #eb85ff;
    font-size: 26px;
}
.gallery {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    padding-right: 18px;
}
.chiprow {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.chip {
    text-align: center;
    background: #18254d;
    border-radius: 999px;
    color: #dfe7ff;
    font-size: 12px;
    font-weight: 800;
    padding: 9px;
}
.miniPoster {
    height: 210px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 16px;
    background: linear-gradient(135deg, #12195b, #c12aff);
    position: relative;
    overflow: hidden;
}
.miniPoster:nth-child(2) {
    background: linear-gradient(135deg, #080f24, #0988bd);
}
.miniPoster:nth-child(3) {
    background: linear-gradient(135deg, #7a1f12, #ff7d18);
}
.miniPoster:nth-child(4) {
    background: linear-gradient(135deg, #09214a, #6decab);
}
.miniPoster:nth-child(5) {
    background: linear-gradient(135deg, #071d43, #9e18ef);
}
.miniPoster:nth-child(6) {
    background: linear-gradient(135deg, #151634, #38437d);
}
.miniPoster h4 {
    font-size: 22px;
    line-height: 1;
    margin: 0 0 12px;
}
.price {
    min-height: 300px;
}
.price h3 {
    font-size: 20px;
    margin: 0;
}
.price .amount {
    font-size: 34px;
    color: #40c8ff;
    font-weight: 900;
    margin: 20px 0;
}
.price ul {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
    display: grid;
    gap: 12px;
    color: #edf2ff;
}
.price li:before {
    content: "✓";
    margin-right: 9px;
}
.sales {
    background: var(--grad2);
    padding: 34px;
    border-radius: 14px;
}
.testimonial {
    grid-column: auto;
}
.testimonial .stars {
    color: #ffbf37;
    font-size: 20px;
}
.avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd3b4, #7cc8ff);
    display: inline-block;
    margin-right: 16px;
    vertical-align: middle;
}
.banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(100deg, #1a39c9, #761dce, #ec3e97);
    border-radius: 16px;
    padding: 38px 54px;
    margin: 32px 0;
}
.footer {
    background: #040a18;
    border-top: 1px solid rgba(83, 103, 189, 0.35);
    padding: 42px 0;
}
.footgrid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.6fr;
    gap: 36px;
    color: #c6d3fb;
}
.footgrid h4 {
    color: white;
    margin: 0 0 16px;
}
.footgrid a {
    display: block;
    color: #c6d3fb;
    text-decoration: none;
    margin: 12px 0;
}
.copy {
    text-align: center;
    color: #7e8bb5;
    margin-top: 28px;
    font-size: 13px;
}
@media (max-width: 1000px) {
    .links {
        display: none;
    }
    .hero {
        grid-template-columns: 1fr;
    }
    .visual {
        min-height: 620px;
    }
    .poster-grid {
        left: 50%;
        transform: translateX(-50%);
    }
    .register,
    .stats,
    .pricing,
    .testimonials,
    .gallery,
    .chiprow,
    .how {
        grid-template-columns: 1fr;
    }
    .oldnew {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 18px;
    }
    .old-visual,
    .new-visual {
        height: 138px;
    }
    .person {
        height: 130px;
    }
    .comparison-list {
        padding: 10px 18px;
    }
    .vs {
        margin: 8px auto;
    }
    .arrow {
        display: none;
    }
    .form {
        grid-template-columns: 1fr;
    }
    .footgrid {
        grid-template-columns: 1fr 1fr;
    }
    .banner {
        display: block;
    }
    .hero h1 {
        font-size: 42px;
    }
    .mini {
        flex-wrap: wrap;
    }
}
@media (max-width: 620px) {
    .page {
        width: min(100% - 28px, 1320px);
    }
    .actions {
        display: none;
    }
    .poster-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .poster {
        width: 160px;
        height: 225px;
    }
    .poster h3 {
        font-size: 19px;
    }
    .right-ui,
    .dotted,
    .float {
        display: none;
    }
    .section {
        padding: 18px;
    }
    .stats {
        grid-template-columns: 1fr;
    }
    .footgrid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {
    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 700px) {
    .testimonial-grid {
        grid-template-columns: 1fr !important;
    }
}