*{
    box-sizing:border-box;
}

:root{
    --bg:#020712;
    --panel:#071426;
    --line:rgba(148,163,184,.22);
    --text:#f8fafc;
    --muted:#aebbd0;
    --gold:#f5bd4f;
    --gold2:#ffd777;
    --blue:#5ab8ff;
    --cyan:#38e8ff;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;
    color:var(--text);
    font-family:Inter, Segoe UI, Arial, sans-serif;
    background:
        radial-gradient(circle at 74% 10%, rgba(245,189,79,.13), transparent 27%),
        radial-gradient(circle at 86% 34%, rgba(37,99,235,.14), transparent 30%),
        linear-gradient(180deg,#020714 0%,#020712 40%,#04101f 100%);
    overflow-x:hidden;
}

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

.site-glow{
    position:fixed;
    width:430px;
    height:430px;
    border-radius:50%;
    filter:blur(95px);
    opacity:.16;
    z-index:-1;
    pointer-events:none;
}

.glow-left{
    left:-180px;
    top:20px;
    background:#2563eb;
}

.glow-right{
    right:-180px;
    top:230px;
    background:#f5bd4f;
}

.header{
    width:min(1180px,92%);
    height:88px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.logo-wrap{
    display:flex;
    align-items:center;
    gap:13px;
}

.logo-mark{
    width:44px;
    height:44px;
    border:2px solid var(--gold);
    color:var(--gold);
    display:grid;
    place-items:center;
    border-radius:12px 4px 12px 4px;
    font-weight:900;
    font-size:12px;
    box-shadow:0 0 28px rgba(245,189,79,.18);
    position:relative;
}

.logo-mark:before{
    content:"";
    position:absolute;
    inset:7px;
    border-left:2px solid var(--gold);
    border-bottom:2px solid var(--gold);
    transform:skewY(-20deg);
    opacity:.58;
}

.logo-mark span{
    position:relative;
    z-index:2;
}

.logo-title{
    font-weight:900;
    letter-spacing:5px;
    font-size:20px;
}

.logo-subtitle{
    margin-top:2px;
    color:var(--gold);
    letter-spacing:7px;
    font-size:10px;
    font-weight:900;
}

.nav{
    display:flex;
    gap:34px;
    color:#edf2fb;
    font-size:15px;
}

.nav a{
    transition:.2s;
    opacity:.92;
}

.nav a:hover{
    color:var(--gold);
}

.offer-btn{
    padding:15px 21px;
    border:1px solid rgba(245,189,79,.75);
    border-radius:10px;
    font-weight:800;
    background:rgba(245,189,79,.04);
    transition:.22s ease;
}

.offer-btn:hover{
    background:var(--gold);
    color:#06111f;
    transform:translateY(-2px);
}

main{
    width:min(1180px,92%);
    margin:0 auto;
}

.hero{
    min-height:590px;
    display:grid;
    grid-template-columns:.98fr 1.12fr;
    align-items:center;
    gap:34px;
    padding:22px 0 20px;
}

.hero-copy{
    z-index:3;
}

h1{
    margin:0;
    font-size:clamp(42px,5.4vw,64px);
    line-height:1.06;
    letter-spacing:-2px;
    text-shadow:0 8px 26px rgba(0,0,0,.28);
}

h1 span{
    display:block;
    color:var(--gold);
}

.intro{
    max-width:590px;
    color:#cfd8e8;
    line-height:1.67;
    font-size:17px;
    margin:26px 0 33px;
}

.stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    max-width:500px;
}

.stats div{
    min-height:152px;
    padding:22px 20px;
    border:1px solid var(--line);
    border-radius:11px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.05), transparent 40%),
        linear-gradient(180deg,rgba(10,24,43,.78),rgba(5,15,29,.66));
    box-shadow:0 20px 60px rgba(0,0,0,.20);
}

.stat-icon{
    color:var(--gold);
    font-size:30px;
}

.stats strong{
    display:block;
    margin:16px 0 7px;
    font-size:34px;
}

.stats p{
    margin:0;
    color:#edf2fb;
    line-height:1.33;
}

.globe-stage{
    position:relative;
    min-height:500px;
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
}

#globeCanvas{
    width:min(570px,100%);
    aspect-ratio:1;
    display:block;
    filter:
        drop-shadow(0 0 34px rgba(59,130,246,.20))
        drop-shadow(0 0 62px rgba(245,189,79,.13));
    z-index:2;
}

.orbit{
    position:absolute;
    width:78%;
    aspect-ratio:1;
    border:1px solid rgba(245,189,79,.55);
    border-radius:50%;
    z-index:3;
    box-shadow:0 0 25px rgba(245,189,79,.20);
    pointer-events:none;
}

.orbit-one{
    transform:rotate(-17deg) scaleX(1.22);
}

.orbit-two{
    transform:rotate(19deg) scaleX(1.15);
    opacity:.63;
}

.orbit-three{
    transform:rotate(70deg) scaleX(1.05);
    opacity:.32;
}

.gold-line{
    position:absolute;
    height:1px;
    width:62%;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,rgba(245,189,79,.9),transparent);
    box-shadow:0 0 18px rgba(245,189,79,.70);
    z-index:5;
    pointer-events:none;
}

.line-one{
    transform:rotate(-22deg);
    top:57%;
    left:18%;
}

.line-two{
    transform:rotate(13deg);
    top:73%;
    left:22%;
    width:48%;
    opacity:.62;
}

.gold-flare{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 20px var(--gold),0 0 50px rgba(245,189,79,.75);
    z-index:6;
}

.flare-one{
    left:71%;
    top:61%;
}

.flare-two{
    left:32%;
    top:80%;
}

.digital-floor{
    position:absolute;
    width:82%;
    height:28%;
    bottom:7%;
    right:6%;
    background:
        repeating-linear-gradient(90deg,rgba(59,130,246,.18) 0 1px,transparent 1px 34px),
        repeating-linear-gradient(0deg,rgba(59,130,246,.14) 0 1px,transparent 1px 28px);
    transform:perspective(500px) rotateX(68deg);
    opacity:.38;
    filter:blur(.2px);
    z-index:0;
    pointer-events:none;
}

.scroll-cue{
    width:42px;
    height:42px;
    margin:-10px auto 22px;
    border:1px solid rgba(245,189,79,.28);
    border-radius:999px;
    display:grid;
    place-items:center;
    background:rgba(5,15,29,.48);
    box-shadow:0 0 26px rgba(245,189,79,.10);
    transition:.25s ease;
    user-select:none;
    -webkit-user-select:none;
    outline:none;
}

.scroll-cue:hover{
    border-color:rgba(245,189,79,.75);
    box-shadow:0 0 34px rgba(245,189,79,.22);
    transform:translateY(-2px);
}

.scroll-cue span{
    width:10px;
    height:10px;
    border-right:2px solid var(--gold);
    border-bottom:2px solid var(--gold);
    transform:rotate(45deg);
    animation:bounceArrow 1.45s ease-in-out infinite;
}

@keyframes bounceArrow{
    0%,100%{transform:translateY(-3px) rotate(45deg); opacity:.65;}
    50%{transform:translateY(4px) rotate(45deg); opacity:1;}
}

.section{
    padding:46px 0 40px;
    border-top:1px solid rgba(148,163,184,.12);
}

.section-title.centered{
    text-align:center;
    margin-bottom:27px;
}

.section-title span{
    color:var(--gold);
    font-size:31px;
    text-shadow:0 0 20px rgba(245,189,79,.35);
}

.section-title h2{
    margin:9px 0 8px;
    font-size:clamp(30px,4vw,40px);
    letter-spacing:-1px;
}

.section-title p{
    margin:0;
    color:var(--muted);
    font-size:17px;
}

.featured-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.domain-card{
    min-height:305px;
    padding:28px 24px;
    border:1px solid var(--line);
    border-radius:13px;
    background:
        radial-gradient(circle at 50% 0%,rgba(255,255,255,.06),transparent 34%),
        linear-gradient(180deg,rgba(10,24,43,.84),rgba(4,13,27,.88));
    box-shadow:0 18px 60px rgba(0,0,0,.22);
    display:flex;
    flex-direction:column;
    text-align:center;
    transition:.25s ease;
}

.domain-card:hover{
    transform:translateY(-6px);
    border-color:rgba(245,189,79,.55);
    box-shadow:0 24px 80px rgba(245,189,79,.12);
}

.icon-badge{
    width:58px;
    height:58px;
    border-radius:50%;
    display:grid;
    place-items:center;
    margin:0 auto 18px;
    font-size:26px;
    border:1px solid rgba(255,255,255,.12);
}

.domain-card.purple .icon-badge{background:rgba(124,58,237,.30);color:#d8b4fe}
.domain-card.blue .icon-badge{background:rgba(37,99,235,.28);color:#bfdbfe}
.domain-card.green .icon-badge{background:rgba(34,197,94,.24);color:#bbf7d0}
.domain-card.red .icon-badge{background:rgba(239,68,68,.22);color:#fecaca}
.domain-card.gold .icon-badge{background:rgba(245,189,79,.22);color:#fde68a}
.domain-card.cyan .icon-badge{background:rgba(6,182,212,.22);color:#a5f3fc}

.domain-card h3{
    margin:0 0 12px;
    font-size:clamp(22px,2vw,27px);
    letter-spacing:-.5px;
    word-break:break-word;
}

.pill{
    display:inline-block;
    align-self:center;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(245,189,79,.13);
    color:#ffd777;
    font-size:13px;
    font-weight:800;
    line-height:1.25;
}

.domain-card.purple .pill{background:rgba(124,58,237,.20);color:#d8b4fe}
.domain-card.blue .pill{background:rgba(37,99,235,.18);color:#bfdbfe}
.domain-card.green .pill{background:rgba(34,197,94,.16);color:#bbf7d0}
.domain-card.red .pill{background:rgba(239,68,68,.18);color:#fecaca}
.domain-card.cyan .pill{background:rgba(6,182,212,.18);color:#a5f3fc}

.domain-card p{
    color:#d7e0ee;
    line-height:1.58;
    margin:18px 0;
    font-size:15px;
}

.domain-card strong{
    margin-top:auto;
    color:var(--gold);
    font-size:15px;
}

.lower-grid{
    display:grid;
    grid-template-columns:2fr .95fr;
    gap:28px;
    padding:36px 0 56px;
}

.portfolio-box,
.contact-box{
    border:1px solid var(--line);
    border-radius:14px;
    background:linear-gradient(180deg,rgba(10,24,43,.78),rgba(5,15,29,.72));
    padding:28px;
}

.box-heading{
    display:flex;
    gap:16px;
    align-items:flex-start;
    margin-bottom:22px;
}

.box-heading span,
.mail-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    display:grid;
    place-items:center;
    color:var(--gold);
    border:1px solid rgba(245,189,79,.28);
    background:rgba(245,189,79,.08);
    font-size:22px;
}

.box-heading h2,
.contact-box h2{
    margin:0;
    font-size:27px;
}

.box-heading p,
.contact-box p,
.contact-box small{
    color:var(--muted);
}

.portfolio-links{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:11px;
}

.portfolio-links a{
    text-align:center;
    padding:14px 10px;
    border-radius:8px;
    border:1px solid rgba(148,163,184,.16);
    background:rgba(3,12,25,.68);
    font-weight:700;
    font-size:14px;
    transition:.2s;
}

.portfolio-links a:hover{
    color:#061425;
    background:var(--gold);
    border-color:var(--gold);
}

.contact-box a{
    display:block;
    margin:22px 0 18px;
    text-align:center;
    padding:16px;
    border-radius:8px;
    color:var(--gold2);
    background:rgba(3,12,25,.75);
    border:1px solid rgba(245,189,79,.20);
    font-weight:800;
    word-break:break-word;
}

.contact-box small{
    display:block;
    text-align:center;
}

.footer{
    width:min(1180px,92%);
    margin:0 auto;
    padding:28px 0;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;
    gap:20px;
    color:var(--muted);
    font-size:14px;
}

.footer p{
    text-align:center;
    margin:0;
    line-height:1.55;
}

.logo-wrap.small .logo-mark{
    width:36px;
    height:36px;
    font-size:11px;
}

.logo-wrap.small .logo-title{
    font-size:15px;
}

.socials{
    justify-self:end;
    display:flex;
    gap:14px;
}

@media(max-width:1050px){
    .hero{
        grid-template-columns:1fr;
        text-align:center;
    }

    .intro,
    .stats{
        margin-left:auto;
        margin-right:auto;
    }

    .globe-stage{
        min-height:430px;
    }

    #globeCanvas{
        width:min(520px,100%);
    }

    .orbit{
        width:min(430px,78%);
    }

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

    .lower-grid{
        grid-template-columns:1fr;
    }

    .portfolio-links{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:760px){
    .header{
        height:auto;
        flex-direction:column;
        padding:20px 0;
    }

    .nav{
        gap:18px;
        flex-wrap:wrap;
        justify-content:center;
    }

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

    .stats,
    .featured-grid,
    .portfolio-links,
    .footer{
        grid-template-columns:1fr;
    }

    .globe-stage{
        min-height:340px;
    }

    .footer,
    .footer p{
        text-align:center;
    }

    .socials{
        justify-self:center;
    }
}


/* Prevent accidental text cursor/selection on decorative areas */
.header,
.logo-wrap,
.nav,
.offer-btn,
.stats,
.globe-stage,
.section-title,
.icon-badge,
.scroll-cue,
.footer{
    user-select:none;
    -webkit-user-select:none;
}

.scroll-cue:focus{
    outline:none;
}