@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--ink:#17172f;--navy:#11112b;--purple:#714bff;--pink:#ff4c9b;--cyan:#5ce1e6;--yellow:#ffd85a;--muted:#77788f;--pale:#f7f6ff;--line:#e9e7f3;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;color:var(--ink);font-family:'DM Sans',Arial,sans-serif;background:#fff}a{color:inherit;text-decoration:none}.announcement{background:linear-gradient(90deg,#714bff,#f247a2);color:#fff;text-align:center;padding:9px 14px;font-size:11px;font-weight:700;letter-spacing:.2px}.header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,6vw,88px);background:#fff;position:sticky;top:0;z-index:30;border-bottom:1px solid #f0eef7}.brand{display:flex;align-items:center;gap:10px}.brand-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(140deg,var(--purple),var(--pink));color:#fff;font:700 19px 'Space Grotesk',sans-serif;box-shadow:0 7px 18px #714bff35}.brand-icon span{color:var(--yellow)}.brand-name{font:700 17px 'Space Grotesk',sans-serif;letter-spacing:-.5px}.brand-name>span{color:var(--purple)}.brand-name small{display:block;font:600 9px 'DM Sans',sans-serif;color:#89879e;letter-spacing:1.1px;text-transform:uppercase;margin-top:3px}.nav{display:flex;align-items:center;gap:27px;font-size:12px;font-weight:700}.nav>a:not(.nav-button){color:#5d5b74}.nav>a:hover{color:var(--purple)}.nav-button{background:var(--ink);color:#fff;padding:12px 16px;border-radius:9px}.menu-toggle{display:none;border:0;background:none;font-size:26px;color:var(--ink)}
.hero{min-height:550px;position:relative;overflow:hidden;background:#11112b;color:#fff;padding:86px clamp(25px,9vw,135px);display:flex;align-items:center}.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.13) .7px,transparent .7px);background-size:22px 22px;opacity:.35}.hero-glow{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}.glow-one{width:500px;height:500px;right:-40px;top:-190px;background:radial-gradient(circle,#714bff5a,transparent 68%)}.glow-two{width:360px;height:360px;right:15%;bottom:-260px;background:radial-gradient(circle,#ff4c9b40,transparent 70%)}.hero-content{position:relative;z-index:2;max-width:610px}.eyebrow,.section-kicker{font-size:10px;font-weight:700;letter-spacing:2px;color:#b9aaff}.eyebrow{display:flex;align-items:center;gap:10px}.eyebrow span{height:7px;width:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px #5ce1e61c}.hero h1{font:600 clamp(43px,5.3vw,70px)/1.06 'Space Grotesk',sans-serif;letter-spacing:-3px;margin:24px 0 20px}.hero h1 span{background:linear-gradient(90deg,#9f8aff,#ff75b4 70%,#ffd85a);background-clip:text;color:transparent}.hero-content>p{max-width:490px;color:#c6c5db;font-size:14px;line-height:1.85;margin-bottom:26px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:14px 18px;border-radius:9px;font-size:12px;font-weight:700;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-2px)}.primary{color:#fff;background:linear-gradient(110deg,var(--purple),#a14cff);box-shadow:0 10px 24px #714bff30}.secondary{border:1px solid #ffffff45;color:#fff}.hero-points{display:flex;flex-wrap:wrap;gap:17px;margin-top:26px;color:#aaa9c4;font-size:10px}.hero-points span:first-letter{color:var(--cyan)}.hero-visual{position:absolute;width:420px;height:390px;right:clamp(10px,8vw,120px);top:83px}.domain-orbit{position:absolute;border:1px solid #8d7bff40;border-radius:50%;inset:15px;transform:rotate(-24deg)}.orbit-b{inset:52px;border-style:dashed;transform:rotate(20deg)}.domain-window{position:absolute;width:330px;top:90px;left:45px;padding:16px;background:#fff;border-radius:16px;box-shadow:0 30px 70px #05051585;transform:rotate(-3deg)}.window-dots{display:flex;gap:5px;margin-bottom:22px}.window-dots i{width:7px;height:7px;border-radius:50%;background:#ff6c98}.window-dots i:nth-child(2){background:#ffd85a}.window-dots i:nth-child(3){background:#5ce1b7}.window-search{height:49px;background:#f4f2ff;border:1px solid #e8e2ff;border-radius:8px;padding:15px 11px;font-size:12px;font-weight:700;color:#44415c}.window-search span{color:var(--purple)}.window-search b{float:right;font-size:20px;line-height:12px;color:var(--purple)}.window-result{display:flex;align-items:center;gap:10px;padding:17px 2px 2px}.available-dot{width:9px;height:9px;border-radius:50%;background:#2bc98a;box-shadow:0 0 0 4px #2bc98a1c}.window-result div{flex:1}.window-result strong,.window-result small{display:block}.window-result strong{font-size:11px;color:#25243e}.window-result small{font-size:10px;color:#8a889f;margin-top:4px}.window-result>b{color:var(--purple)}.float-badge{position:absolute;background:#fff;color:#25243e;padding:11px 14px;border-radius:10px;box-shadow:0 15px 35px #0004;font:700 14px 'Space Grotesk',sans-serif}.float-badge small{display:block;font:700 8px 'DM Sans',sans-serif;letter-spacing:1px;color:#85839b;margin-top:4px}.badge-one{top:48px;right:12px}.badge-two{bottom:40px;left:0}.section{padding:76px clamp(22px,7vw,100px)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:27px}.section-kicker{color:var(--purple);margin-bottom:12px}.section-heading h2,.hosting-copy h2,.contact-band h2{font:600 clamp(28px,3.2vw,40px)/1.12 'Space Grotesk',sans-serif;letter-spacing:-1.5px;margin:0}.heading-dot{color:var(--pink)}.section-heading>p{max-width:340px;font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 3px}.market-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:19px}.search-input{display:flex;align-items:center;gap:10px;max-width:550px;width:100%;height:49px;padding:0 13px;border:1px solid var(--line);border-radius:9px;background:#fbfaff}.search-input>span{font-size:23px;color:var(--purple)}.search-input input{border:0;outline:0;background:transparent;flex:1;min-width:0;font:12px 'DM Sans',sans-serif;color:var(--ink)}.search-input button{border:0;background:transparent;font-size:20px;color:#8e8aa6;cursor:pointer}.market-count{font-size:11px;font-weight:700;color:#85829c;white-space:nowrap}.domain-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.domain-card{position:relative;border:1px solid var(--line);border-radius:13px;padding:21px 18px 17px;background:#fff;display:flex;flex-direction:column;min-height:230px;transition:transform .2s,border-color .2s,box-shadow .2s;overflow:hidden}.domain-card:before{content:"";height:4px;position:absolute;left:0;right:0;top:0;background:linear-gradient(90deg,var(--purple),var(--pink),var(--yellow))}.domain-card:hover{transform:translateY(-4px);border-color:#c8bbff;box-shadow:0 14px 35px #33205b0d}.domain-top{display:flex;align-items:center;justify-content:space-between;margin:5px 0 20px}.domain-chip{font-size:9px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;background:#f0edff;color:#714bff;padding:6px 8px;border-radius:5px}.domain-symbol{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff0f7;color:#e63d8a;font-size:16px}.domain-card h3{font:700 17px 'Space Grotesk',sans-serif;overflow-wrap:anywhere;margin:0 0 10px}.domain-card p{font-size:11px;line-height:1.65;color:#77758d;margin:0 0 15px;flex:1}.domain-price{font:700 17px 'Space Grotesk',sans-serif;color:#282543;margin:0 0 15px}.domain-price small{font:500 10px 'DM Sans',sans-serif;color:#89869f}.domain-enquire{display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:#fff;border-radius:7px;padding:11px 12px;font-size:10px;font-weight:700}.domain-enquire:hover{background:var(--purple)}.empty-results{text-align:center;padding:35px;color:var(--muted);font-size:13px}.market-note{display:flex;gap:12px;margin-top:23px;padding:15px 17px;border-radius:9px;background:#f8f6ff;color:#79758e}.market-note>span{font-size:18px;color:var(--purple)}.market-note p{font-size:10px;line-height:1.7;margin:0}.market-note strong{color:#34304d}.hosting-section{background:#11112b;color:#fff;display:grid;grid-template-columns:.85fr 1.15fr;gap:55px;align-items:center;position:relative;overflow:hidden}.hosting-section:after{content:"";position:absolute;width:450px;height:450px;right:-180px;bottom:-250px;border-radius:50%;background:radial-gradient(circle,#714bff50,transparent 70%)}.hosting-copy,.hosting-features{position:relative;z-index:1}.light-kicker{color:#b5a7ff}.hosting-copy h2{font-size:clamp(30px,3.6vw,43px);margin-bottom:18px}.hosting-copy>p{color:#b8b7ce;font-size:12px;line-height:1.8;max-width:400px;margin-bottom:23px}.light-button{background:#fff;color:#18162f}.hosting-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.hosting-features article{padding:20px 16px;background:#ffffff0b;border:1px solid #ffffff1b;border-radius:12px}.feature-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;font-size:18px;margin-bottom:19px}.feature-icon.blue{background:#714bff32;color:#b4a5ff}.feature-icon.pink{background:#ff4c9b24}.feature-icon.yellow{background:#ffd85a22;color:var(--yellow)}.hosting-features h3{font:600 14px 'Space Grotesk',sans-serif;margin:0 0 9px}.hosting-features p{font-size:10px;line-height:1.7;color:#b4b2cb;margin:0}.directory-section{background:#fbfaff}.directory-placeholder{display:flex;align-items:center;gap:18px;padding:24px;border:1px solid var(--line);background:#fff;border-radius:13px}.directory-symbol{flex-shrink:0;width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:#f0edff;color:var(--purple);font-size:25px}.directory-placeholder>div:nth-child(2){flex:1}.directory-placeholder h3{font:600 16px 'Space Grotesk',sans-serif;margin:0 0 7px}.directory-placeholder p{font-size:11px;line-height:1.7;color:var(--muted);margin:0}.text-link{font-size:11px;font-weight:700;color:var(--purple);white-space:nowrap}.text-link span{font-size:16px;margin-left:5px}.contact-band{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:44px clamp(22px,7vw,100px);background:linear-gradient(105deg,#714bff,#a14cff 55%,#f247a2);color:#fff}.contact-band h2{font-size:29px;margin-bottom:9px}.contact-band p{font-size:12px;color:#f0e9ff;margin:0}.whatsapp-button{background:#fff;color:#25213e;white-space:nowrap}.footer{padding:29px clamp(20px,6vw,88px) 0;background:#11112b;color:#fff}.footer-brand .brand-icon{width:37px;height:37px;font-size:16px}.footer-brand .brand-name{font-size:15px}.footer-brand .brand-name small{color:#aaa8c5}.footer>p{font-size:11px;color:#aaa8c5;margin:19px 0 24px}.footer-bottom{border-top:1px solid #ffffff20;padding:16px 0;display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#aaa8c5}.footer-bottom a{color:#c1b3ff;font-weight:700}
@media(max-width:1050px){.hero-visual{right:-90px;opacity:.65}.hero-content{max-width:560px}.domain-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.hosting-section{gap:28px}.hosting-features{grid-template-columns:1fr}.hosting-features article{display:grid;grid-template-columns:42px 1fr;column-gap:12px;align-items:center;padding:14px}.feature-icon{grid-row:span 2;margin:0}.hosting-features h3{margin-bottom:4px}.hosting-features p{grid-column:2}}
@media(max-width:700px){.header{height:72px;padding:0 17px}.brand-icon{width:38px;height:38px}.brand-name{font-size:15px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:71px;left:0;right:0;background:#fff;padding:22px;box-shadow:0 15px 25px #17172f18;flex-direction:column;align-items:stretch;gap:20px}.nav.open{display:flex}.nav-button{text-align:center}.hero{min-height:530px;padding:64px 23px 55px}.hero h1{font-size:45px;letter-spacing:-2px}.hero-content>p{font-size:13px}.hero-visual{width:250px;height:240px;right:-95px;top:auto;bottom:-75px;opacity:.24}.domain-window{transform:none;left:28px;top:40px;width:230px}.window-search{font-size:9px;padding-top:17px}.badge-one{top:8px;right:0}.badge-two{bottom:0;left:0}.hero-points{gap:9px 13px;font-size:9px}.section{padding:54px 20px}.section-heading{align-items:flex-start;flex-direction:column;gap:12px}.section-heading h2{font-size:32px}.section-heading>p{max-width:100%}.market-toolbar{align-items:flex-start;flex-direction:column;gap:10px}.search-input{max-width:none}.domain-cards{grid-template-columns:1fr}.domain-card{min-height:205px}.hosting-section{grid-template-columns:1fr;gap:30px}.hosting-copy h2{font-size:34px}.hosting-features{grid-template-columns:1fr}.directory-placeholder{align-items:flex-start;flex-wrap:wrap;padding:18px}.directory-placeholder>div:nth-child(2){flex-basis:calc(100% - 70px)}.text-link{margin-left:64px}.contact-band{align-items:flex-start;flex-direction:column;padding:35px 22px}.contact-band h2{font-size:27px}.footer-bottom{flex-direction:column;line-height:1.6}.footer>p{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}


/* Hosted website directory */
.directory-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 17px}
.directory-intro>p{font-size:12px;line-height:1.7;color:#77758d;margin:0}
.directory-intro>p strong{color:#393451}
.directory-search{display:flex;align-items:center;gap:9px;max-width:330px;width:100%;height:43px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
.directory-search>span{font-size:22px;color:var(--purple)}
.directory-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;font:11px 'DM Sans',sans-serif}
.directory-filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.directory-filter{padding:8px 12px;border:1px solid #e5e1f4;border-radius:7px;background:#fff;color:#716d89;font:700 10px 'DM Sans',sans-serif;cursor:pointer}
.directory-filter:hover,.directory-filter.active{background:var(--ink);border-color:var(--ink);color:#fff}
.directory-count{font-size:10px;font-weight:700;color:#8a86a0;margin:0 0 12px}
.hosted-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hosted-card{padding:20px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;flex-direction:column;min-height:185px;transition:transform .2s,border-color .2s,box-shadow .2s}
.hosted-card:hover{transform:translateY(-3px);border-color:#c8bbff;box-shadow:0 12px 28px #33205b0d}
.hosted-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:17px}
.hosted-category{background:#f0edff;color:var(--purple);padding:6px 8px;border-radius:5px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.7px}
.hosted-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:linear-gradient(140deg,#714bff,#ff4c9b);color:#fff;font:700 13px 'Space Grotesk',sans-serif}
.hosted-card h3{font:700 16px 'Space Grotesk',sans-serif;margin:0 0 6px}
.hosted-card p{font-size:11px;line-height:1.65;color:#77758d;margin:0 0 16px;flex:1}
.hosted-visit{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f0edf7;padding-top:12px;color:var(--purple);font-size:10px;font-weight:700;overflow-wrap:anywhere;gap:10px}
.hosted-visit span:first-child{overflow-wrap:anywhere}
.directory-empty{grid-column:1/-1;text-align:center;padding:30px 15px;color:#85819c;font-size:12px;border:1px dashed #dcd6f1;border-radius:10px}
.directory-footer-note{display:flex;align-items:center;gap:13px;margin-top:20px;padding:17px;border-radius:10px;background:#f0edff}
.directory-footer-note>span{display:grid;place-items:center;flex-shrink:0;width:37px;height:37px;border-radius:10px;background:#fff;color:var(--purple);font-size:23px}
.directory-footer-note>div{flex:1}
.directory-footer-note strong{font-size:12px;color:#34304d}
.directory-footer-note p{font-size:10px;line-height:1.6;color:#77758d;margin:4px 0 0}
@media(max-width:900px){.hosted-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.directory-intro{align-items:stretch;flex-direction:column;gap:12px}.directory-search{max-width:none}.hosted-grid{grid-template-columns:1fr}.hosted-card{min-height:165px}.directory-footer-note{align-items:flex-start;flex-wrap:wrap}.directory-footer-note>div{flex-basis:calc(100% - 55px)}.directory-footer-note .text-link{margin-left:50px}}

/* =====================================
   DOMAINS GALORE — STICKY WHITE HEADER
   ===================================== */

.header {
    position: sticky;
    top: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    box-sizing: border-box;
    background: #ffffff;

    padding: 12px 5%;
    border-bottom: 1px solid #eeeeF4;
    box-shadow: 0 3px 12px rgba(17, 17, 43, 0.06);
}

/* Logo */

.header .brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    background: transparent;
}

.header .brand-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 270px;
    max-height: 65px;
    object-fit: contain;
}

/* Navigation */

.header .nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.header .nav > a {
    color: #17172f;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.header .nav > a:hover {
    color: #852de0;
}

/* Get Started button */

.header .nav > .nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 12px 20px;
    border-radius: 8px;

    color: #ffffff;
    background: linear-gradient(110deg, #6829df, #e72b9a);

    font-weight: 600;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.header .nav > .nav-button:hover {
    color: #ffffff;
    opacity: 0.92;
    transform: translateY(-1px);
}

/* Hamburger button */

.header .menu-toggle {
    color: #17172f;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 27px;
}

/* Mobile layout */

@media (max-width: 768px) {
    .header {
        padding: 10px 5%;
        flex-wrap: wrap;
    }

    .header .brand-logo {
        max-width: 220px;
        max-height: 55px;
    }

    .header .nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;

        width: 100%;
        padding-top: 12px;
    }

    .header .nav.active {
        display: flex;
    }

    .header .nav > a {
        display: block;
        padding: 13px 5px;
    }

    .header .nav > .nav-button {
        margin-top: 8px;
        text-align: center;
    }
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    margin-bottom: 15px;
}

.footer-brand .brand-logo {
    display: block;
    width: auto;
    max-width: 250px;
    max-height: 65px;
    object-fit: contain;
}

/* Footer logo */
.footer-brand {
    display: inline-flex;
    align-items: center;
    margin-bottom: 15px;
}

.footer-brand .brand-logo {
    display: block;
    width: auto;
    max-width: 250px;
    max-height: 65px;
    object-fit: contain;
}

/* Responsive footer logo */
@media (max-width: 768px) {
    .footer-brand .brand-logo {
        max-width: 210px;
        max-height: 55px;
    }
}


/* ======================================
   ONE-PAGE WEBSITE PROMOTION
   Domains Galore
   ====================================== */

.onepage-promo {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    align-items: center;
    gap: 55px;
    overflow: hidden;
    isolation: isolate;
    padding: 90px 7%;
    margin: 0;
    background: #f8f7ff;
    border-top: 1px solid #eeebfa;
    border-bottom: 1px solid #eeebfa;
}

.onepage-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.onepage-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: #7029d9;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.promo-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e52b9a;
    box-shadow: 0 0 0 5px rgba(229, 43, 154, 0.10);
}

.onepage-content h2 {
    margin: 0 0 20px;
    color: #11112b;
    font-size: clamp(34px, 4.2vw, 54px);
    line-height: 1.12;
    letter-spacing: -1.8px;
}

.onepage-content h2 span {
    display: block;
    color: #7a2be2;
    background: linear-gradient(100deg, #6429dd, #e32c9b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.onepage-intro {
    max-width: 530px;
    margin: 0 0 26px;
    color: #62647a;
    font-size: 16px;
    line-height: 1.8;
}

.onepage-price {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 28px 0;
}

.price-amount {
    color: #17172f;
    font-size: clamp(55px, 6vw, 76px);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -3px;
}

.price-amount .currency {
    margin-right: 4px;
    color: #7a2be2;
    font-size: 0.52em;
    vertical-align: top;
    letter-spacing: -1px;
}

.price-period {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-left: 18px;
    border-left: 1px solid #d9d4eb;
}

.price-period strong {
    color: #752cda;
    font-size: 13px;
    letter-spacing: 1.5px;
}

.price-period span {
    color: #77788d;
    font-size: 12px;
}

.onepage-benefits {
    display: grid;
    gap: 13px;
    padding: 0;
    margin: 0 0 30px;
    list-style: none;
}

.onepage-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: #34354d;
    font-size: 14px;
    line-height: 1.5;
}

.onepage-benefits li span {
    display: inline-flex;
    flex: 0 0 21px;
    width: 21px;
    height: 21px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #6829df, #e72b9a);
    font-size: 12px;
    font-weight: 800;
}

.onepage-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}

.onepage-actions .promo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 16px 25px;
    border: 0;
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(110deg, #6829df, #e72b9a);
    box-shadow: 0 9px 24px rgba(112, 41, 217, 0.20);
    font-weight: 750;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.onepage-actions .promo-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(112, 41, 217, 0.27);
}

.promo-note {
    color: #77788d;
    font-size: 12px;
    line-height: 1.5;
}

/* Website mockup illustration */

.onepage-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 410px;
}

.promo-glow {
    position: absolute;
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(126, 62, 230, 0.17),
        rgba(226, 43, 154, 0.07) 48%,
        transparent 72%
    );
}

.website-preview {
    position: relative;
    z-index: 1;
    width: 88%;
    overflow: hidden;
    border: 1px solid rgba(120, 93, 175, 0.22);
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 25px 65px rgba(39, 23, 83, 0.16);
    transform: rotate(-3deg);
}

.preview-browser {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 14px;
    background: #ffffff;
    border-bottom: 1px solid #eeedf5;
}

.preview-browser > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d6d0e5;
}

.preview-browser > span:first-child {
    background: #ee8d9f;
}

.preview-browser > span:nth-child(2) {
    background: #f0ce79;
}

.preview-browser > span:nth-child(3) {
    background: #87cfa7;
}

.preview-address {
    flex: 1;
    margin-left: 10px;
    padding: 6px 10px;
    border-radius: 5px;
    color: #88859a;
    background: #f7f6fb;
    font-size: 9px;
}

.preview-page {
    padding: 0 7% 7%;
    background: #ffffff;
}

.preview-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 0;
}

.preview-logo {
    color: #17172f;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.6px;
}

.preview-menu {
    display: flex;
    gap: 4px;
}

.preview-menu span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #8a42dc;
}

.preview-hero {
    position: relative;
    overflow: hidden;
    padding: 38px 22px;
    border-radius: 7px;
    background: linear-gradient(125deg, #21164b, #6529b9 65%, #b833c4);
}

.preview-kicker {
    margin-bottom: 12px;
    color: #e4caff;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.preview-heading {
    color: #ffffff;
    font-size: clamp(19px, 2.6vw, 32px);
    font-weight: 800;
    line-height: 1.15;
}

.preview-line {
    width: 75%;
    height: 5px;
    margin-top: 15px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.32);
}

.preview-line.short {
    width: 52%;
    margin-top: 7px;
}

.preview-cta {
    display: inline-block;
    margin-top: 19px;
    padding: 9px 13px;
    border-radius: 4px;
    color: #6226b4;
    background: #ffffff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.6px;
}

.preview-services {
    display: flex;
    gap: 10px;
    padding-top: 15px;
}

.preview-services span {
    flex: 1;
    height: 40px;
    border: 1px solid #eeeaf7;
    border-radius: 5px;
    background: linear-gradient(180deg, #faf9ff, #f0ebfb);
}

.preview-phone {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 8px;
    width: 28%;
    max-width: 150px;
    padding: 8px;
    border: 3px solid #28243e;
    border-radius: 22px;
    background: #17152b;
    box-shadow: 0 18px 35px rgba(23, 17, 47, 0.25);
    transform: rotate(5deg);
}

.phone-camera {
    position: absolute;
    z-index: 3;
    top: 9px;
    left: 50%;
    width: 28%;
    height: 6px;
    border-radius: 6px;
    background: #28243e;
    transform: translateX(-50%);
}

.phone-screen {
    min-height: 225px;
    overflow: hidden;
    padding: 24px 9px 12px;
    border-radius: 14px;
    background: #ffffff;
}

.phone-brand {
    margin-bottom: 12px;
    color: #201a3b;
    font-size: 7px;
    font-weight: 850;
    text-align: center;
}

.phone-image {
    height: 72px;
    border-radius: 5px;
    background: linear-gradient(135deg, #4924a2, #8a36db 55%, #e12e9d);
}

.phone-heading {
    margin-top: 12px;
    color: #21173d;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.15;
}

.phone-line {
    width: 100%;
    height: 4px;
    margin-top: 8px;
    border-radius: 4px;
    background: #e7e3ef;
}

.phone-line.short {
    width: 65%;
    margin-top: 5px;
}

.phone-button {
    margin-top: 12px;
    padding: 8px 4px;
    border-radius: 5px;
    color: #ffffff;
    background: #762bd8;
    font-size: 7px;
    font-weight: 800;
    text-align: center;
}

.promo-floating-card {
    position: absolute;
    z-index: 3;
    right: 2%;
    top: 9%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border: 1px solid #eeebf7;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(39, 23, 83, 0.10);
}

.floating-check {
    display: flex;
    width: 29px;
    height: 29px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #6829df, #e72b9a);
    font-size: 14px;
    font-weight: 800;
}

.promo-floating-card div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.promo-floating-card strong {
    color: #211b3c;
    font-size: 11px;
}

.promo-floating-card small {
    color: #77788d;
    font-size: 9px;
}

/* Responsive layout */

@media (max-width: 900px) {
    .onepage-promo {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 65px 6%;
    }

    .onepage-content {
        max-width: 650px;
    }

    .onepage-visual {
        width: 100%;
        max-width: 580px;
        margin: 0 auto;
        min-height: 350px;
    }

    .website-preview {
        width: 82%;
    }

    .onepage-content h2 {
        font-size: clamp(34px, 7vw, 48px);
    }
}

@media (max-width: 480px) {
    .onepage-promo {
        gap: 20px;
        padding: 48px 6%;
    }

    .onepage-label {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .onepage-content h2 {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .onepage-intro {
        font-size: 14px;
    }

    .onepage-visual {
        min-height: 275px;
    }

    .website-preview {
        width: 88%;
    }

    .preview-hero {
        padding: 25px 15px;
    }

    .preview-heading {
        font-size: 23px;
    }

    .preview-phone {
        width: 27%;
        padding: 6px;
        border-radius: 17px;
    }

    .phone-screen {
        min-height: 185px;
        padding: 20px 7px 9px;
    }

    .phone-image {
        height: 53px;
    }

    .phone-heading {
        font-size: 12px;
    }

    .promo-floating-card {
        top: 1%;
        right: 0;
        gap: 6px;
        padding: 8px;
    }

    .promo-floating-card strong {
        font-size: 9px;
    }

    .promo-floating-card small {
        font-size: 8px;
    }

    .onepage-actions .promo-button {
        width: 100%;
        box-sizing: border-box;
    }
}