/* =====================================================================
   NICEHOSTING — 3D PREMIUM ENHANCEMENT LAYER  (nice3d.css)
   Loaded LAST on every public page. Self-contained --n3 design tokens
   so it renders identically regardless of each page's own :root vars.
   Adds: glass depth, true 3D card tilt, aurora backgrounds, glossy
   buttons, floating isometric server scene, scroll reveal.
   ===================================================================== */

:root {
    --n3-ink:        #12082b;
    --n3-violet:     #7b2cbf;
    --n3-violet-lt:  #9d4edd;
    --n3-orange:     #ff6b35;
    --n3-orange-lt:  #ff8c5a;
    --n3-cyan:       #00f5d4;
    --n3-gold:       #ffd700;
    --n3-glass:      rgba(255,255,255,.08);
    --n3-glass-brd:  rgba(255,255,255,.16);
    --n3-ease:       cubic-bezier(.22,1,.36,1);
    --n3-shadow-3d:
        0 2px 4px rgba(18,8,43,.06),
        0 8px 18px rgba(18,8,43,.08),
        0 22px 48px rgba(123,44,191,.14);
    --n3-shadow-pop:
        0 10px 24px rgba(123,44,191,.20),
        0 30px 70px rgba(255,107,53,.20);
}

/* ---- global polish -------------------------------------------------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

::selection { background: var(--n3-orange); color: #fff; }

/* gradient scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #efe9fb; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--n3-violet), var(--n3-orange));
    border-radius: 20px;
    border: 2px solid #efe9fb;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .05ms !important; }
}

/* =====================================================================
   AURORA / DEPTH BACKDROP on dark gradient sections
   ===================================================================== */
.hero, .features, .cta { position: relative; isolation: isolate; }

.hero::after, .features::after, .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(40% 55% at 12% 18%, rgba(0,245,212,.16), transparent 60%),
        radial-gradient(45% 60% at 88% 12%, rgba(255,107,53,.18), transparent 60%),
        radial-gradient(55% 65% at 50% 110%, rgba(157,78,221,.22), transparent 60%);
    mix-blend-mode: screen;
    animation: n3Aurora 18s ease-in-out infinite alternate;
}
/* keep real content above the aurora */
.hero > .container, .features > .container, .cta > .container,
.hero-content, .cta-content { position: relative; z-index: 2; }

@keyframes n3Aurora {
    0%   { transform: translate3d(0,0,0)     scale(1); opacity: .9; }
    50%  { transform: translate3d(-2%,2%,0)  scale(1.08); opacity: 1; }
    100% { transform: translate3d(2%,-1%,0)  scale(1.04); opacity: .85; }
}

/* faint engineering grid for "data-center" depth */
.features::before {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
            mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
}

/* =====================================================================
   NAVBAR — frosted glass with depth
   ===================================================================== */
.navbar.scrolled {
    background: rgba(18,8,43,.72) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%);
            backdrop-filter: blur(22px) saturate(160%);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 40px rgba(0,0,0,.35) !important;
}

/* =====================================================================
   TRUE 3D CARD TILT  (JS drives --n3-rx / --n3-ry)
   ===================================================================== */
.services-grid, .features-grid, .pricing-grid,
.testimonials-grid, .tld-grid, .values-grid { perspective: 1400px; }

.service-card, .feature-card, .pricing-card, .testimonial-card,
.tld-card, .value-card, .info-card, [data-tilt] {
    transform: perspective(1100px)
               rotateX(var(--n3-rx, 0deg))
               rotateY(var(--n3-ry, 0deg))
               translateZ(0);
    transform-style: preserve-3d;
    transition: transform .25s var(--n3-ease), box-shadow .35s var(--n3-ease);
    will-change: transform;
    position: relative;
}

.service-card.n3-lift, .feature-card.n3-lift, .pricing-card.n3-lift,
.testimonial-card.n3-lift, .tld-card.n3-lift,
.value-card.n3-lift, [data-tilt].n3-lift {
    box-shadow: var(--n3-shadow-pop);
}

/* lift inner content toward viewer for parallax depth */
.service-card > *, .pricing-card > *, .feature-card > * { transform: translateZ(22px); }
.service-card .service-icon,
.feature-card .feature-icon { transform: translateZ(46px); }

/* moving glare highlight injected by JS */
.n3-glare {
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(220px circle at var(--n3-gx,50%) var(--n3-gy,0%),
                rgba(255,255,255,.35), transparent 60%);
    opacity: 0;
    transition: opacity .3s ease;
    mix-blend-mode: soft-light;
    z-index: 5;
}
.n3-lift .n3-glare { opacity: 1; }

/* =====================================================================
   GLOSSY 3D BUTTONS  (applies to existing .btn-primary / submits)
   ===================================================================== */
.btn-primary, .auth-submit, .domain-search-form button {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}
.btn-primary::after, .auth-submit::after, .domain-search-form button::after {
    content: "";
    position: absolute; top: 0; left: -120%;
    width: 80%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg);
    transition: left .6s var(--n3-ease);
}
.btn-primary:hover::after, .auth-submit:hover::after,
.domain-search-form button:hover::after { left: 130%; }
.btn-primary:active, .auth-submit:active { transform: translateY(1px) scale(.99); }

/* magnetic helper set by JS */
.n3-magnetic { transition: transform .25s var(--n3-ease); }

/* =====================================================================
   PRICING — featured card floats in 3D
   ===================================================================== */
.pricing-card.featured {
    animation: n3Float 6s ease-in-out infinite;
    box-shadow: var(--n3-shadow-pop), 0 0 70px rgba(123,44,191,.35) !important;
}
@keyframes n3Float {
    0%,100% { transform: translateY(0) scale(1.05); }
    50%     { transform: translateY(-14px) scale(1.05); }
}

/* =====================================================================
   STATS — glowing 3D numerals
   ===================================================================== */
.stat-number {
    text-shadow: 0 4px 14px rgba(0,0,0,.25);
    background: linear-gradient(180deg, #fff, rgba(255,255,255,.78));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =====================================================================
   HERO 3D ISOMETRIC SERVER SCENE  (markup injected by nice3d.js)
   ===================================================================== */
.n3-stage {
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    width: 260px; height: 300px;
    perspective: 900px;
    z-index: 1;
    pointer-events: none;
}
@media (max-width: 1100px) { .n3-stage { display: none; } }

.n3-rack {
    position: absolute; inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(-12deg) rotateY(-26deg);
    animation: n3Spin 16s ease-in-out infinite alternate;
}
@keyframes n3Spin {
    from { transform: rotateX(-12deg) rotateY(-28deg); }
    to   { transform: rotateX(-16deg) rotateY(-14deg); }
}

.n3-unit {
    position: absolute; left: 50%; width: 180px; height: 54px;
    margin-left: -90px;
    transform-style: preserve-3d;
    border-radius: 12px;
    background: linear-gradient(145deg, #2d1b4e, #1a0a2e);
    border: 1px solid rgba(157,78,221,.5);
    box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
    display: flex; align-items: center; gap: 8px; padding: 0 16px;
}
.n3-unit::before {            /* glowing status LEDs */
    content: "";
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--n3-cyan);
    box-shadow: 0 0 10px var(--n3-cyan), 14px 0 0 var(--n3-orange),
                14px 0 12px rgba(255,107,53,.7), 28px 0 0 var(--n3-gold);
    animation: n3Blink 1.6s steps(1) infinite;
}
.n3-unit::after {             /* drive slots */
    content: "";
    flex: 1; height: 22px; margin-left: 26px;
    border-radius: 4px;
    background: repeating-linear-gradient(90deg,
        rgba(255,255,255,.10) 0 6px, transparent 6px 14px);
}
@keyframes n3Blink { 50% { filter: brightness(.45); } }

.n3-unit.u1 { top: 26px;  animation: n3Hover1 5s ease-in-out infinite; }
.n3-unit.u2 { top: 96px;  animation: n3Hover2 5s ease-in-out infinite .4s; }
.n3-unit.u3 { top: 166px; animation: n3Hover1 5s ease-in-out infinite .8s; }
.n3-unit.u4 { top: 236px; animation: n3Hover2 5s ease-in-out infinite 1.2s; }
@keyframes n3Hover1 { 0%,100%{ transform: translateZ(0); } 50%{ transform: translateZ(26px); } }
@keyframes n3Hover2 { 0%,100%{ transform: translateZ(10px); } 50%{ transform: translateZ(40px); } }

.n3-orbit {                   /* glowing orbit ring behind rack */
    position: absolute; left: 50%; top: 50%;
    width: 340px; height: 340px; margin: -170px 0 0 -170px;
    border-radius: 50%;
    border: 1px dashed rgba(0,245,212,.35);
    box-shadow: 0 0 60px rgba(123,44,191,.4);
    animation: n3Ring 26s linear infinite;
}
@keyframes n3Ring { to { transform: rotate(360deg); } }

/* =====================================================================
   SCROLL REVEAL
   ===================================================================== */
.n3-reveal { opacity: 0; transform: translateY(34px) scale(.985); }
.n3-reveal.n3-in {
    opacity: 1; transform: none;
    transition: opacity .7s var(--n3-ease), transform .7s var(--n3-ease);
}

/* =====================================================================
   AUTH PAGES — 3D glass card + floating server on info panel
   ===================================================================== */
.auth-card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .3s var(--n3-ease), box-shadow .4s var(--n3-ease);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow:
        0 2px 4px rgba(18,8,43,.06),
        0 18px 40px rgba(18,8,43,.18),
        0 40px 90px rgba(123,44,191,.22) !important;
}
.auth-card::before {          /* top gloss line */
    content: "";
    position: absolute; top: 0; left: 8%; right: 8%; height: 3px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, var(--n3-orange), var(--n3-violet-lt), var(--n3-cyan));
}
.auth-feature {
    transition: transform .3s var(--n3-ease), background .3s ease;
    transform-style: preserve-3d;
}
.auth-feature:hover {
    transform: translateZ(18px) translateX(6px);
    background: rgba(255,255,255,.12) !important;
}
.auth-feature-icon { box-shadow: 0 10px 24px rgba(255,107,53,.4); }

.social-btn { transition: transform .25s var(--n3-ease), border-color .25s ease, box-shadow .25s ease; }
.social-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(18,8,43,.12); }

/* form inputs subtle depth on focus */
.auth-form .form-input:focus {
    box-shadow: 0 0 0 4px rgba(255,107,53,.12), 0 8px 22px rgba(123,44,191,.15) !important;
    transform: translateY(-1px);
}