*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter, sans-serif;
}

body{
background:#F7F8FA;
color:#0F172A;
overflow-x:hidden;
}

.hero{
position:relative;
min-height:100vh;

/* PREMIUM FINTECH GRADIENT */
background:linear-gradient(
135deg,
#169B74 0%,
#13916B 50%,
#015E42 100%
);

display:flex;
align-items:center;
justify-content:space-between;
padding:120px 8%;
overflow:hidden;
color:white;
}
.text-white{
color:#FFFFFF;
}

.text-gold{
color:#FFB800;
}
/* STARS */
.stars{
position:absolute;
width:100%;
height:100%;
background:radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
background-size:3px 3px;
animation:moveStars 60s linear infinite;
opacity:0.4;
}

/* PLANETS */
.planets{
position:absolute;
width:100%;
height:100%;
}

.planet{
position:absolute;
border-radius:50%;
background:rgba(255,255,255,0.15);
animation:float 8s infinite ease-in-out;
}

.p1{width:120px;height:120px;top:20%;left:10%;}
.p2{width:180px;height:180px;top:60%;left:70%;}
.p3{width:90px;height:90px;top:30%;left:80%;}

/* HERO CONTENT */
.hero-content{
z-index:2;
max-width:600px;
}

.hero-image img{
width:420px;
animation:float 6s ease-in-out infinite;
z-index:2;
}

/* BADGE */
.badge{
background:rgba(255,255,255,0.15);
padding:6px 12px;
border-radius:999px;
font-size:12px;
display:inline-block;
margin-bottom:20px;
}

/* TEXT */
h1{
font-size:58px;
line-height:1.1;
font-weight:800;
}

p{
margin-top:20px;
color:rgba(255,255,255,0.85);
}

/* BUTTONS */
.actions{
margin-top:30px;
display:flex;
gap:15px;
}

.primary{
background:white;
color:#169C74;
border:none;
padding:12px 18px;
border-radius:10px;
cursor:pointer;
font-weight:600;
}

.secondary{
background:#169B74;
border:1px solid rgba(255,255,255,0.4);
color:white;
padding:12px 18px;
border-radius:10px;
cursor:pointer;
}

/* STATS */
.stats{
margin-top:50px;
display:flex;
gap:40px;
}

.stats b{
display:block;
font-size:18px;
}

/* SECTIONS */
.section, .services, .pricing, .contact{
padding:120px 8%;
text-align:center;
}

h2{
font-size:38px;
margin-bottom:40px;
}

/* SUPPORT SECTION */
.support-section{
padding:120px 8%;
background:#F7F8FA;
}

/* CONTAINER */
.container{
max-width:1200px;
margin:auto;
}

/* TITLE */
.section-title{
text-align:center;
font-size:40px;
font-weight:800;
color:#0F172A;
}

.section-title span{
color:#169C74;
}

/* SUBTEXT */
.section-sub{
text-align:center;
max-width:700px;
margin:15px auto 60px;
color:#64748B;
font-size:16px;
}

/* GRID */
.support-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

/* CARD */
.support-card{
background:white;
padding:35px 30px;
border-radius:16px;
border:1px solid #E2E8F0;
transition:0.35s ease;
position:relative;
overflow:hidden;
}

/* HOVER EFFECT */
.support-card:hover{
transform:translateY(-10px);
border-color:#169C74;
box-shadow:0 15px 40px rgba(0,0,0,0.06);
}

/* ICON BOX */
.icon-box{
width:60px;
height:60px;
border-radius:14px;

background:linear-gradient(
135deg,
#169C74,
#065F45
);

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

color:white;
font-size:22px;

margin-bottom:20px;

transition:0.3s;
}

/* ICON ANIMATION */
.support-card:hover .icon-box{
transform:scale(1.1) rotate(5deg);
}

/* TITLE */
.support-card h3{
font-size:20px;
font-weight:700;
margin-bottom:10px;
color:#0F172A;
}

/* TEXT */
.support-card p{
font-size:15px;
color:#64748B;
line-height:1.6;
}

/* RESPONSIVE */
@media(max-width:900px){

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

.section-title{
font-size:30px;
}

}
.support-icon{
    font-size:40px;
    color:#065F45; /* your green */
    margin-bottom:15px;
    display:inline-block;
}

/* Optional hover animation */
.support-box:hover .support-icon{
    transform:scale(1.1);
    transition:0.3s;
}
/* COMPACT FINTECH HOSTING STYLE */

.hosting-types.compact{
padding:70px 20px;
background:#f7faf9;
}

/* GRID SMALLER */
.types-container.compact{
max-width:1050px;
margin:auto;

display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:20px;
}

/* SMALLER CARD */
.type-card.compact{
background:#fff;
padding:28px 22px;
border-radius:16px;
text-align:center;
position:relative;

box-shadow:0 10px 25px rgba(0,0,0,0.05);

transition:0.3s;
}

.type-card.compact:hover{
transform:translateY(-8px);
box-shadow:0 18px 45px rgba(6,95,69,0.15);
}

/* ICON SMALLER */
.type-icon{
width:55px;
height:55px;

margin:auto;
margin-bottom:12px;

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

background:linear-gradient(135deg,#065F45,#10b981);

color:white;
font-size:20px;

border-radius:14px;
}

/* TEXT SMALLER */
.type-card.compact h3{
font-size:18px;
margin-bottom:6px;
color:#0f172a;
}

.save{
font-size:12px;
color:#64748b;
}

.save span{
color:#10b981;
font-weight:600;
}

.from{
font-size:12px;
color:#94a3b8;
margin-top:6px;
}

/* PRICE SMALL */
.price{
font-size:28px;
color:#065F45;
font-weight:700;
margin:8px 0 15px;
}

.price span{
font-size:12px;
color:#64748b;
}

/* BUTTON SMALL */
.type-btn{
display:inline-block;
padding:10px 20px;

font-size:13px;
font-weight:600;

background:#065F45;
color:#fff;

border-radius:8px;
text-decoration:none;

transition:0.3s;
}

.type-btn:hover{
background:#10b981;
transform:scale(1.05);
}

/* FEATURED CARD */
.featured-type{
border:2px solid #065F45;
transform:scale(1.03);
}

.popular-badge{
position:absolute;
top:-10px;
right:15px;

background:#065F45;
color:#fff;

padding:4px 10px;
font-size:11px;

border-radius:50px;
}

/* FEATURED BUTTON */
.featured-btn{
background:#10b981;
}
.featured-btn:hover{
background:#065F45;
}
/* SECTION LAYER FIX */
.hosting-types{
    position:relative;
    overflow:hidden;
}

/* BACKGROUND WRAPPER */
.spider-bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
}

/* REAL SPIDER WEB (VISIBLE LINES) */
.web-lines{
    position:absolute;
    inset:0;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(6,95,69,0.08) 0px,
            rgba(6,95,69,0.08) 1px,
            transparent 1px,
            transparent 60px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(6,95,69,0.06) 0px,
            rgba(6,95,69,0.06) 1px,
            transparent 1px,
            transparent 60px
        ),
        radial-gradient(circle at center,
            rgba(16,185,129,0.08),
            transparent 60%
        );

    animation:webMove 12s linear infinite;
}


/* KEEP CARDS ABOVE EVERYTHING */
.types-container{
    position:relative;
    z-index:2;
}

/* WEB MOVING EFFECT */
@keyframes webMove{
    0%{ transform:translate(0,0); }
    100%{ transform:translate(30px,30px); }
}


    25%{
        top:5%;
        left:85%;
        transform:rotate(90deg);
    }

    50%{
        top:80%;
        left:85%;
        transform:rotate(180deg);
    }

    75%{
        top:80%;
        left:5%;
        transform:rotate(270deg);
    }

    100%{
        top:5%;
        left:5%;
        transform:rotate(360deg);
    }

}

/* SECTION SETUP */
.hosting-types{
    position:relative;
    overflow:hidden;
    background:#f7faf9;
}

/* CONTENT ABOVE BACKGROUND */
.types-container{
    position:relative;
    z-index:2;
}

/* STRIPE-STYLE MESH BACKGROUND */
.mesh-bg{
    position:absolute;
    inset:-20%;
    z-index:0;
    pointer-events:none;

    background:
        radial-gradient(circle at 20% 30%, rgba(6,95,69,0.25), transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(16,185,129,0.20), transparent 45%),
        radial-gradient(circle at 60% 80%, rgba(6,95,69,0.15), transparent 50%),
        radial-gradient(circle at 10% 90%, rgba(16,185,129,0.18), transparent 55%);

    filter: blur(60px);
    opacity:0.7;

    animation:meshMove 12s ease-in-out infinite alternate;
}

/* SMOOTH FLOATING MOTION */
@keyframes meshMove{
    0%{
        transform:translate(-2%, -2%) scale(1);
    }
    50%{
        transform:translate(2%, 3%) scale(1.05);
    }
    100%{
        transform:translate(-3%, 1%) scale(1.02);
    }
}
/* SECTION */
.hosting-types{
    position:relative;
    overflow:hidden;
    background:#f8fafc;
}

/* CONTENT ABOVE BACKGROUND */
.types-container{
    position:relative;
    z-index:2;
}

/* PREMIUM STRIPE-STYLE BACKGROUND */
.premium-bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:
        radial-gradient(circle at 20% 20%, rgba(6,95,69,0.18), transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(16,185,129,0.14), transparent 45%),
        radial-gradient(circle at 50% 80%, rgba(6,95,69,0.10), transparent 50%);

    animation:floatBg 16s ease-in-out infinite;
}

/* SOFT FLOATING MOTION */
@keyframes floatBg{
    0%{
        transform:translate(0,0) scale(1);
    }
    50%{
        transform:translate(1%, -1%) scale(1.03);
    }
    100%{
        transform:translate(-1%, 1%) scale(1);
    }
}
/.moneyback-section{
    padding:110px 20px;
    background:linear-gradient(180deg,#f8fafc,#ffffff);
}

/* CONTAINER */
.moneyback-container{
    max-width:1100px;
    margin:auto;

    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:60px;
    align-items:center;
}

/* BADGE */
.badge{
    display:inline-block;
    padding:6px 12px;
    font-size:12px;
    border-radius:999px;
    background:#e8f7f1;
    color:#169C74;
    margin-bottom:15px;
    font-weight:600;
}

/* TITLE */
.moneyback-text h2{
    font-size:38px;
    color:#0f172a;
    margin-bottom:15px;
}

.moneyback-text p{
    color:#64748b;
    line-height:1.6;
    margin-bottom:30px;
}

/* LIST */
.moneyback-list{
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* ITEM */
.item{
    display:flex;
    gap:15px;
    align-items:flex-start;
}

.item i{
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(135deg,#169C74,#065F45);
    color:white;
    border-radius:14px;
    font-size:18px;
    flex-shrink:0;
}

.item h3{
    font-size:16px;
    margin:0;
    color:#0f172a;
}

.item p{
    font-size:14px;
    margin-top:4px;
    color:#64748b;
}

/* RIGHT CARD */
.moneyback-card{
    position:relative;
    background:white;
    border-radius:20px;
    padding:40px 25px;
    text-align:center;

    border:1px solid #e2e8f0;
    box-shadow:0 20px 50px rgba(0,0,0,0.05);
    overflow:hidden;
}

/* GLOW */
.glow{
    position:absolute;
    inset:-50%;
    background:radial-gradient(circle,#169C74,transparent 60%);
    opacity:0.15;
    animation:floatGlow 6s infinite ease-in-out;
}

/* CIRCLE */
.circle{
    width:120px;
    height:120px;
    margin:25px auto 0;

    border-radius:50%;
    background:linear-gradient(135deg,#169C74,#065F45);
    color:white;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    font-weight:700;
}

.circle span{
    font-size:32px;
}

.circle small{
    font-size:12px;
    opacity:0.9;
}

/* ANIMATION */
@keyframes floatGlow{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(20px,-20px);}
}

/* RESPONSIVE */
@media(max-width:900px){
    .moneyback-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .item{
        justify-content:center;
        text-align:left;
    }
}
/* PREMIUM ICON BASE */
.icon{
    position:relative;

    width:70px;
    height:70px;

    margin:0 auto 15px;

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

    border-radius:18px;

    font-size:24px;
    color:white;

    background: linear-gradient(135deg, #0b6b50, #1dd1a1);

    box-shadow:
        0 15px 30px rgba(0,0,0,0.18),
        inset 0 0 15px rgba(255,255,255,0.15);

    overflow:hidden;

    transition:0.4s ease;
}

/* INNER SHINE LAYER */
.icon::before{
    content:"";
    position:absolute;
    inset:-50%;

    background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 60%);
    transform:rotate(25deg);

    animation:shineMove 3.5s linear infinite;
}

/* OUTER GLOW PULSE */
.icon-glow{
    position:absolute;
    width:100%;
    height:100%;
    border-radius:18px;

    background:rgba(29,209,161,0.25);
    filter:blur(15px);

    animation:glowPulse 2.8s ease-in-out infinite;
}

/* ICON TEXT ABOVE EVERYTHING */
.icon i{
    position:relative;
    z-index:2;
}

/* HOVER EFFECT */
.guarantee-card:hover .icon{
    transform:translateY(-6px) scale(1.1);
    box-shadow:
        0 25px 50px rgba(0,0,0,0.25),
        0 0 25px rgba(29,209,161,0.35);
}

/* ANIMATIONS */
@keyframes shineMove{
    0%{ transform:translateX(-60%) rotate(25deg); }
    100%{ transform:translateX(60%) rotate(25deg); }
}

@keyframes glowPulse{
    0%,100%{ opacity:0.4; transform:scale(1); }
    50%{ opacity:0.8; transform:scale(1.2); }
}

.feature-section{
    padding:100px 20px;
    background:#f8fafc;
}

.feature-container{
    max-width:1100px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

.feature-image img{
    width:100%;
    max-width:600px;
    height:auto;

    border-radius:0;     /* removes frame look */
    box-shadow:none;     /* removes card/frame effect */
    background:transparent;

    object-fit:contain;
}

.feature-content h2{
    font-size:34px;
    color:#0f172a;
    margin-bottom:10px;
}

.feature-content p{
    color:#64748b;
    margin-bottom:25px;
    line-height:1.6;
}

.feature-item{
    display:flex;
    gap:15px;
    margin-bottom:20px;
    align-items:flex-start;
}

.feature-item .icon{
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:linear-gradient(135deg,#065F45,#10b981);
    color:white;
    font-size:20px;
    flex-shrink:0;
}

.feature-item h3{
    margin:0;
    font-size:16px;
    color:#0f172a;
}

.feature-item p{
    margin:5px 0 0;
    font-size:14px;
    color:#64748b;
}

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

    .feature-item{
        justify-content:center;
        text-align:left;
    }
}

.reason-section{
    padding:100px 20px;
    background:#f8fafc;
}

.reason-container{
    max-width:1100px;
    margin:auto;
}

.reason-header{
    text-align:center;
    margin-bottom:50px;
}

.reason-header h2{
    font-size:36px;
    color:#0f172a;
}

.reason-header span{
    color:#169C74;
}

.reason-header p{
    margin-top:10px;
    color:#64748b;
}

/* GRID */
.reason-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
}

/* CARD */
.reason-card{
    background:white;
    padding:30px 25px;
    border-radius:16px;
    border:1px solid #e2e8f0;
    transition:0.3s;
}

.reason-card:hover{
    transform:translateY(-8px);
    border-color:#169C74;
    box-shadow:0 20px 50px rgba(0,0,0,0.06);
}

/* ICON */
.reason-icon{
    width:60px;
    height:60px;
    border-radius:14px;

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

    background:linear-gradient(135deg,#169C74,#065F45);
    color:white;
    font-size:22px;

    margin-bottom:15px;
}

/* TEXT */
.reason-card h3{
    font-size:18px;
    color:#0f172a;
    margin-bottom:10px;
}

.reason-card p{
    font-size:14px;
    color:#64748b;
    line-height:1.6;
}
.software-section{
    padding:100px 20px;
    background:linear-gradient(180deg,#f8fafc 0%, #ffffff 100%);
}

/* CONTAINER */
.software-container{
    max-width:1100px;
    margin:auto;
}

/* HEADER */
.software-header{
    text-align:center;
    margin-bottom:60px;
}

.software-header h2{
    font-size:38px;
    color:#0f172a;
    font-weight:800;
}

.software-header p{
    color:#64748b;
    margin-top:10px;
    font-size:15px;
}

/* GRID */
.software-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:22px;
}

/* CARD */
.software-card{
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:18px;

    padding:30px 20px;
    text-align:center;

    transition:0.35s ease;

    position:relative;
    overflow:hidden;
}

/* SOFT GREEN GLOW BACKGROUND */
.software-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top, rgba(22,155,116,0.12), transparent 60%);
    opacity:0;
    transition:0.4s ease;
}

/* HOVER EFFECT */
.software-card:hover{
    transform:translateY(-10px);
    border-color:#169C74;
    box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.software-card:hover::before{
    opacity:1;
}

/* ICON */
.software-card i{
    font-size:34px;
    color:#169C74;
    margin-bottom:12px;
    transition:0.3s;
}

/* ICON HOVER */
.software-card:hover i{
    transform:scale(1.2);
    color:#0f5f45;
}

/* TEXT */
.software-card span{
    font-size:14px;
    font-weight:600;
    color:#0f172a;
}

/* MOBILE */
@media(max-width:600px){
    .software-header h2{
        font-size:30px;
    }
}

/* HERO */
.domain-hero{
    background:linear-gradient(135deg,#065F45,#169C74);
    color:white;
    padding:100px 20px;
    text-align:center;
}

.domain-container{
    max-width:900px;
    margin:auto;
}

.domain-hero h1{
    font-size:42px;
    font-weight:800;
}

.domain-hero p{
    margin-top:10px;
    opacity:0.9;
}

/* SEARCH BOX */
.domain-search{
    margin-top:30px;
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
}

.domain-search input{
    padding:12px;
    width:300px;
    border:none;
    border-radius:8px;
    outline:none;
}

.domain-search select{
    padding:12px;
    border-radius:8px;
    border:none;
}

.domain-search button{
    padding:12px 18px;
    background:white;
    color:#065F45;
    border:none;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

.domain-search button:hover{
    background:#f1f1f1;
}

/* RESULTS */
.domain-results{
    padding:80px 20px;
    background:#f8fafc;
}

.results-container{
    max-width:1100px;
    margin:auto;
    text-align:center;
}

.domain-results h2{
    font-size:32px;
    margin-bottom:40px;
    color:#0f172a;
}

/* GRID */
.domain-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:20px;
}

/* CARD */
.domain-card{
    background:white;
    padding:25px;
    border-radius:14px;
    border:1px solid #e2e8f0;
    transition:0.3s;
}

.domain-card:hover{
    transform:translateY(-8px);
    border-color:#065F45;
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

.domain-card h3{
    font-size:26px;
    color:#065F45;
}

.domain-card p{
    color:#64748b;
    margin:5px 0;
}

.domain-card span{
    display:block;
    margin:10px 0;
    font-weight:600;
}

.domain-card button{
    background:#065F45;
    color:white;
    border:none;
    padding:10px 15px;
    border-radius:8px;
    cursor:pointer;
    transition:0.3s;
}

.domain-card button:hover{
    background:#169C74;
}
.domain-btn{
    display:inline-block;
    margin-top:10px;
    padding:10px 14px;

    background:#065F45;
    color:white;

    border-radius:8px;
    text-decoration:none;

    font-size:13px;
    font-weight:600;

    transition:0.3s ease;
}

/* HOVER EFFECT */
.domain-btn:hover{
    background:#169C74;
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(6,95,69,0.2);
}
.why-domains{
    padding:100px 20px;
    background:#f8fafc;
}

/* CONTAINER */
.why-container{
    max-width:1100px;
    margin:auto;

    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:50px;
    align-items:center;
}

/* TEXT */
.why-text h2{
    font-size:36px;
    color:#0f172a;
    margin-bottom:15px;
}

.why-text p{
    color:#64748b;
    line-height:1.6;
    margin-bottom:15px;
}

/* FEATURES */
.why-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-top:25px;
}

.why-item{
    display:flex;
    align-items:center;
    gap:10px;

    background:white;
    padding:12px 14px;
    border-radius:12px;

    border:1px solid #e2e8f0;
    transition:0.3s;
}

.why-item i{
    color:#065F45;
}

.why-item:hover{
    transform:translateY(-4px);
    border-color:#065F45;
}

/* RIGHT CARD */
.why-card{
    background:white;
    padding:35px;
    border-radius:18px;

    border:1px solid #e2e8f0;
    box-shadow:0 20px 40px rgba(0,0,0,0.05);
}

/* BADGE */
.why-badge{
    display:inline-block;
    background:#e8f7f1;
    color:#065F45;
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    margin-bottom:10px;
}

/* STATS */
.why-stats{
    display:flex;
    justify-content:space-between;
    margin-top:25px;
}

.why-stats b{
    font-size:22px;
    color:#065F45;
}

.why-stats span{
    font-size:12px;
    color:#64748b;
}

/* RESPONSIVE */
@media(max-width:900px){
    .why-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .why-features{
        grid-template-columns:1fr;
    }

    .why-stats{
        justify-content:center;
        gap:30px;
    }
}
.why-domains{
    padding:100px 20px;
    background:#f8fafc;
    position:relative;
    overflow:hidden;
}

/* SOFT FLOATING GRADIENT BLOBS */
.why-domains::before,
.why-domains::after{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;

    background:rgba(6,95,69,0.12);
    filter:blur(80px);

    animation:floatBlobs 12s ease-in-out infinite;
    z-index:0;
}

.why-domains::before{
    top:-100px;
    left:-100px;
}

.why-domains::after{
    bottom:-120px;
    right:-100px;
    background:rgba(22,156,116,0.12);
    animation-duration:16s;
}

/* CONTENT ABOVE BG */
.why-container{
    position:relative;
    z-index:2;
}

/* ANIMATION */
@keyframes floatBlobs{
    0%{
        transform:translate(0,0) scale(1);
    }
    50%{
        transform:translate(40px,30px) scale(1.1);
    }
    100%{
        transform:translate(0,0) scale(1);
    }
}
.private-registration{
    padding:100px 20px;
    background:#f8fafc;
    position:relative;
    overflow:hidden;
}

/* LAYOUT */
.private-container{
    max-width:1100px;
    margin:auto;

    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:50px;
    align-items:center;
}

/* TEXT */
.private-text h2{
    font-size:36px;
    color:#0f172a;
    margin-bottom:15px;
}

.private-text p{
    color:#64748b;
    line-height:1.6;
    margin-bottom:15px;
}

/* SUPPORT ITEMS */
.private-support{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:25px;
}

.support-item{
    display:flex;
    align-items:center;
    gap:10px;

    background:white;
    padding:12px 15px;
    border-radius:12px;

    border:1px solid #e2e8f0;
    transition:0.3s;
}

.support-item i{
    color:#065F45;
}

.support-item:hover{
    transform:translateY(-5px);
    border-color:#065F45;
}

/* RIGHT BOX */
.private-box{
    background:white;
    padding:35px;
    border-radius:18px;

    border:1px solid #e2e8f0;
    box-shadow:0 20px 40px rgba(0,0,0,0.05);
}

/* BADGE */
.private-box .badge{
    display:inline-block;
    background:#e8f7f1;
    color:#065F45;
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    margin-bottom:10px;
}

/* TITLE */
.private-box h3{
    font-size:22px;
    margin-bottom:10px;
    color:#0f172a;
}

/* CLOUD TEXT */
.cloud-text{
    margin-top:20px;
    padding:15px;
    background:#f1fbf7;
    border-left:4px solid #065F45;
    border-radius:10px;

    font-size:14px;
    color:#334155;
}

/* RESPONSIVE */
@media(max-width:900px){
    .private-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .private-support{
        justify-content:center;
    }
}
.why-domains{
    padding:100px 20px;
    background:#f8fafc;
}

/* MAIN LAYOUT */
.why-container{
    max-width:1100px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

/* LEFT SIDE */
.why-left h2{
    font-size:38px;
    color:#0f172a;
    margin-bottom:15px;
}

.why-left p{
    color:#64748b;
    line-height:1.6;
    margin-bottom:25px;
}

/* BUTTON */
.why-btn{
    padding:12px 20px;
    background:#065F45;
    color:white;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-weight:600;
}

/* RIGHT SIDE STACK */
.why-right{
    display:flex;
    flex-direction:column;
    gap:15px;
}

/* CARD (NEW STYLE) */
.why-card{
    background:white;
    padding:18px;
    border-radius:14px;

    display:flex;
    gap:15px;
    align-items:flex-start;

    border:1px solid #e2e8f0;
    transition:0.3s;
}

.why-card:hover{
    transform:translateX(6px);
    border-color:#065F45;
    box-shadow:0 10px 25px rgba(0,0,0,0.06);
}

/* ICON */
.why-card i{
    font-size:22px;
    color:#065F45;
    margin-top:3px;
}

/* TEXT */
.why-card h3{
    margin:0;
    font-size:16px;
    color:#0f172a;
}

.why-card p{
    margin:5px 0 0;
    font-size:13px;
    color:#64748b;
    line-height:1.5;
}

/* MOBILE */
@media(max-width:768px){
    .why-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .why-card{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }
}
.subdomains-section{
    padding:100px 20px;
    background:#f8fafc;
}

/* CONTAINER */
.subdomains-container{
    max-width:1100px;
    margin:auto;

    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:40px;
    align-items:center;
}

/* TEXT SIDE */
.subdomains-text h2{
    font-size:36px;
    color:#0f172a;
    margin-bottom:15px;
}

.subdomains-text p{
    color:#64748b;
    line-height:1.6;
    margin-bottom:15px;
}

/* DOMAIN TAGS */
.domain-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
}

.domain-tags span{
    background:white;
    border:1px solid #e2e8f0;
    padding:6px 12px;
    border-radius:8px;
    font-size:13px;
    color:#065F45;
    transition:0.3s;
}

.domain-tags span:hover{
    background:#065F45;
    color:white;
}

/* CARD */
.subdomains-card{
    background:white;
    padding:30px;
    border-radius:16px;

    border:1px solid #e2e8f0;
    box-shadow:0 15px 30px rgba(0,0,0,0.05);

    text-align:center;
}

/* ICON */
.subdomains-card .icon{
    width:60px;
    height:60px;

    margin:auto;
    margin-bottom:15px;

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

    background:linear-gradient(135deg,#065F45,#169C74);
    color:white;

    border-radius:14px;
    font-size:22px;
}

/* TITLE */
.subdomains-card h3{
    font-size:18px;
    color:#0f172a;
    margin-bottom:10px;
}

/* TEXT */
.subdomains-card p{
    font-size:14px;
    color:#64748b;
    line-height:1.6;
    margin-bottom:20px;
}

/* BUTTON */
.domain-btn{
    background:#065F45;
    color:white;
    border:none;
    padding:10px 18px;
    border-radius:10px;
    cursor:pointer;
    font-weight:600;
    transition:0.3s;
}

.domain-btn:hover{
    background:#0a7a58;
    transform:translateY(-2px);
}

/* RESPONSIVE */
@media(max-width:768px){
    .subdomains-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .domain-tags{
        justify-content:center;
    }
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:system-ui;
}

body{
background:#ffffff;
color:#0f172a;
}


/* CONTAINER */

.hero-container{
display:flex;
align-items:center;
justify-content:space-between;
gap:60px;
}

/* BADGE */

.hero-badge{
display:inline-flex;
gap:8px;
align-items:center;
background:rgba(255,255,255,0.15);
padding:8px 14px;
border-radius:999px;
font-size:13px;
margin-bottom:15px;
}

/* TEXT */

.hero-text{
flex:1;
}

.hero-text h1{
font-size:64px;
line-height:1.1;
}

.hero-text span{
display:block;
font-size:22px;
margin-top:10px;
opacity:0.9;
}

.hero-desc{
margin-top:20px;
color:#f5f1f1d9;
font-size:17px;
max-width:500px;
line-height:1.6;
}
.hero-desc{
color:#ffffff;
opacity:0.9;
line-height:1.6;
}
/* BUTTONS */

.hero-buttons{
display:flex;
gap:15px;
margin-top:30px;
}

.btn-primary{
background:white;
color:#065F45;
padding:14px 28px;
border-radius:12px;
text-decoration:none;
font-weight:700;
}

.btn-outline{
border:2px solid white;
color:white;
padding:14px 28px;
border-radius:12px;
text-decoration:none;
}

/* STATS */

.hero-stats{
display:flex;
gap:20px;
margin-top:30px;
font-size:14px;
opacity:0.9;
}

.hero-stats div{
display:flex;
align-items:center;
gap:8px;
}

/* IMAGE */

.hero-image{
flex:1;
display:flex;
justify-content:center;
}

.image-frame{
background:rgba(255,255,255,0.12);
padding:20px;
border-radius:20px;
backdrop-filter:blur(10px);
box-shadow:0 20px 50px rgba(0,0,0,0.2);
}

.image-frame img{
width:100%;
max-width:450px;
border-radius:14px;
}

/* RESPONSIVE */

@media (max-width: 768px){

.hero{
padding:100px 20px;
}

.hero-container{
flex-direction:column;
text-align:center;
}

.hero-text h1{
font-size:38px;
}

.hero-buttons{
flex-direction:column;
}

.hero-stats{
flex-direction:column;
align-items:center;
}

}

/* TRUST */

.trust{
display:flex;
justify-content:center;
gap:40px;
padding:40px;
background:#f8fafc;
color:#065F45;
font-weight:600;
}

/* PRICING */

.pricing{
padding:120px 80px;
text-align:center;
}

.pricing-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:50px;
}

.card{
background:white;
padding:40px;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.card h1{
color:#065F45;
}

.card ul{
list-style:none;
margin:20px 0;
}

.card ul li{
margin:10px 0;
}

.card a{
display:inline-block;
margin-top:10px;
background:#065F45;
color:white;
padding:12px 20px;
border-radius:10px;
text-decoration:none;
}

.popular{
border:2px solid #065F45;
position:relative;
}

.tag{
position:absolute;
top:-10px;
left:50%;
transform:translateX(-50%);
background:#065F45;
color:white;
padding:5px 12px;
border-radius:20px;
font-size:12px;
}

/* FEATURES */

.features{
padding:120px 80px;
background:#f8fafc;
text-align:center;
}

.feature-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-top:50px;
}

.feature i{
font-size:28px;
color:#065F45;
margin-bottom:10px;
}

/* CTA */

.cta{
padding:120px 80px;
text-align:center;
background:#065F45;
color:white;
}

.cta a{
display:inline-block;
margin-top:20px;
background:white;
color:#065F45;
padding:14px 28px;
border-radius:10px;
text-decoration:none;
font-weight:600;
}
/* SECTION TITLE */

.section-title{
font-size:42px;
text-align:center;
margin-bottom:10px;
}

.section-sub{
text-align:center;
color:hsl(0, 40%, 98%);
margin-bottom:60px;
}

/* GRID */

.feature-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
padding:0 80px 120px;
}

/* CARD */

.feature-card{
background:#ffffff;
border:1px solid #e5e7eb;
padding:35px;
border-radius:18px;
text-align:center;
transition:all .4s ease;
position:relative;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.04);
}

/* HOVER ANIMATION */

.feature-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 60px rgba(6,95,69,.15);
border-color:#065F45;
}

/* ICON BOX */

.icon-box{
width:70px;
height:70px;
margin:0 auto 20px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
background:#eaf7f1;
transition:all .4s ease;
}

/* ICON */

.icon-box i{
font-size:26px;
color:#065F45;
}

/* HOVER ICON EFFECT */

.feature-card:hover .icon-box{
background:#065F45;
transform:rotate(8deg) scale(1.05);
}

.feature-card:hover .icon-box i{
color:white;
}

/* TEXT */

.feature-card h3{
margin-bottom:10px;
font-size:20px;
}

.feature-card p{
color:#64748b;
font-size:14px;
line-height:1.6;
}
/* =========================
   TABLET + MOBILE FIXES
========================= */

@media (max-width: 1024px){

.hero{
padding:120px 40px;
}

.hero-container{
flex-direction:column;
text-align:center;
}

.hero-text{
order:1;
}

.hero-image{
order:2;
margin-top:30px;
}

.hero-text h1{
font-size:48px;
}

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

.feature-grid{
grid-template-columns:1fr 1fr;
padding:0 40px 100px;
}

.panel{
flex-direction:column;
padding:80px 40px;
}

}

/* =========================
   MOBILE (IMPORTANT FIX)
========================= */

@media (max-width: 768px){

.hero{
padding:100px 20px;
}
.hero-desc{
color:#ffffff;   /* white text */
font-weight:500;
line-height:1.6;
opacity:0.9;     /* optional softer white look */
}
.hero-text h1{
font-size:36px;
}

.hero-text p{
font-size:16px;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

.hero-tags{
flex-direction:column;
gap:10px;
}

.trust{
flex-direction:column;
gap:15px;
text-align:center;
}

.pricing{
padding:80px 20px;
}

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

.feature-grid{
grid-template-columns:1fr;
padding:0 20px 80px;
}

.panel{
padding:60px 20px;
}

.section-title{
font-size:28px;
}

.cta{
padding:80px 20px;
}

}

/* =========================
   SMALL PHONES
========================= */

@media (max-width: 480px){

.hero-text h1{
font-size:30px;
}

.btn-primary,
.btn-outline{
width:100%;
text-align:center;
}

.card{
padding:25px;
}

.feature-card{
padding:25px;
}

}

/* BRAND TITLE COLOR */

.brand{
color:#065F45;
font-weight:700;
}

/* HIGHLIGHTED WORDS */

.highlight{
color:#065F45;
font-weight:600;
}

/* OPTIONAL: nicer emphasis */

.hero p{
color:ffb800;
line-height:1.6;
}

.hero h1 span.brand{
display:block;
margin-top:10px;
}


.hero{
position:relative;
overflow:hidden;
background:#065F45;
}

/* THIS IS THE FIX */
#networkCanvas{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:0;
pointer-events:none;
}

/* content must sit above canvas */
.hero-grid{
position:relative;
z-index:2;
}
.hero {
    position: relative;
    overflow: hidden;
}

#networkCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-container {
    position: relative;
    z-index: 2;
}
.actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}

/* shared button style */
.btn {
display: inline-block;
padding: 12px 18px;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
transition: 0.3s;
}

/* PRIMARY BUTTON */
.primary {
background: #ffffff;
color: rgb(17, 1, 1);
border: 2px solid #065F45;
}

.primary:hover {
background: #0B4F3B;
}