:root{
--primary:#dc2626;--primary-dark:#991b1b;--primary-light:#ef4444;--background-dark:#0a0a0a;--background-card:#1a1a1a;--text-primary:#ffffff;--text-secondary:#a3a3a3;--border:rgba(255,255,255,0.1);}
*{
margin:0;
padding:0;
box-sizing:border-box;}
body{
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
background:var(--background-dark);
color:var(--text-primary);
line-height:1.6;
overflow-x:auto;}
html.customer-portal-page body{
min-height:100vh;
display:flex;
flex-direction:column;
width:100%;
max-width:100%;}
.bg-gradient{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:radial-gradient(circle at 50% 0%,rgba(220,38,38,0.15) 0%,transparent 50%);
pointer-events:none;
z-index:-1;}
.grid-overlay{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);
background-size:50px 50px;
pointer-events:none;
z-index:-1;}
.star-overlay{
position:fixed;
inset:0;
pointer-events:none;
z-index:-1;
overflow:hidden;
background:radial-gradient(circle at 45% 12%,rgba(220,38,38,0.22),transparent 55%),radial-gradient(circle at 68% 78%,rgba(127,29,29,0.14),transparent 60%),radial-gradient(circle at 18% 65%,rgba(76,5,5,0.12),transparent 62%);
mix-blend-mode:screen;}
.star-overlay::before,.star-overlay::after{
content:"";
position:absolute;
inset:-18%;
background-repeat:repeat;
will-change:transform,opacity;}
.star-overlay::before{
background-image:radial-gradient(1.8px 1.8px at 12% 25%,rgba(255,255,255,0.75),transparent 58%),radial-gradient(1.4px 1.4px at 48% 74%,rgba(248,113,113,0.65),transparent 60%),radial-gradient(1.6px 1.6px at 82% 32%,rgba(255,255,255,0.7),transparent 62%),radial-gradient(1.3px 1.3px at 22% 55%,rgba(255,255,255,0.6),transparent 56%),radial-gradient(1px 1px at 64% 18%,rgba(255,255,255,0.45),transparent 52%);
background-size:160px 160px,200px 200px,240px 240px,280px 280px,340px 340px;
opacity:0.7;
animation:starDrift 60s linear infinite;}
.star-overlay::after{
background-image:radial-gradient(3px 3px at 18% 30%,rgba(220,38,38,0.8),transparent 72%),radial-gradient(2.6px 2.6px at 68% 68%,rgba(255,255,255,0.7),transparent 74%),radial-gradient(3.5px 3.5px at 52% 48%,rgba(248,113,113,0.65),transparent 78%),radial-gradient(2px 2px at 30% 72%,rgba(255,255,255,0.55),transparent 70%),radial-gradient(1.4px 1.4px at 78% 15%,rgba(255,255,255,0.5),transparent 66%);
background-size:220px 220px,300px 300px,380px 380px,340px 340px,420px 420px;
opacity:0.55;
animation:starPulse 8s ease-in-out infinite alternate,starDriftAlt 70s linear infinite;}
@keyframes starDrift{
0%{
transform:translate3d(0,0,0) scale(1);}
50%{
transform:translate3d(-90px,-60px,0) scale(1.05);}
100%{
transform:translate3d(-180px,-120px,0) scale(1.08);}
}
@keyframes starDriftAlt{
0%{
transform:translate3d(0,0,0) scale(1);}
50%{
transform:translate3d(80px,55px,0) scale(1.04);}
100%{
transform:translate3d(150px,110px,0) scale(1.07);}
}
@keyframes starPulse{
0%{
opacity:0.35;
filter:saturate(0.9);}
50%{
opacity:0.65;
filter:saturate(1.3);}
100%{
opacity:0.4;
filter:saturate(1);}
}
::selection{
background:var(--primary);
color:white;}
nav{
position:fixed;
top:0;
left:0;
right:0;
background:rgba(10,10,10,0.95);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--border);
padding:1rem 3rem;
display:grid;
grid-template-columns:260px 1fr auto;
align-items:center;
gap:2rem;
z-index:1000;
transition:all 0.3s;}
nav.scrolled{
padding:0.75rem 3rem;
background:rgba(10,10,10,0.98);
box-shadow:0 4px 20px rgba(0,0,0,0.3);}
.logo{
display:flex;
align-items:center;
text-decoration:none;
transition:all 0.3s;}
.logo img{
height:50px;
width:auto;
transition:all 0.3s;
filter:drop-shadow(0 2px 8px rgba(220,38,38,0.3));}
.logo:hover img{
transform:scale(1.05);
filter:drop-shadow(0 4px 12px rgba(220,38,38,0.5));}
nav.scrolled .logo img{
height:45px;}
.nav-links{
display:flex;
list-style:none;
gap:0;
margin:0;
padding:0;
align-items:center;
justify-content:center;
margin-right:2rem;}
.nav-links>li{
position:relative;
padding:0 1.5rem;}
.nav-links>li:not(:last-child)::after{
content:'';
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
width:1px;
height:20px;
background:linear-gradient(to bottom,transparent,rgba(255,255,255,0.35),transparent);}
.nav-links a{
color:var(--text-primary);
text-decoration:none;
font-weight:600;
font-size:1rem;
transition:all 0.3s;
position:relative;
padding:0.75rem 0.5rem;
display:flex;
align-items:center;
gap:0.35rem;
white-space:nowrap;}
.nav-links a:hover,.nav-links a.active{
color:var(--primary);}
.nav-links a::after{
content:'';
position:absolute;
bottom:0;
left:0.5rem;
right:0.5rem;
height:2px;
background:var(--primary);
transform:scaleX(0);
transition:transform 0.3s;
border-radius:2px;}
.nav-links a:hover::after,.nav-links a.active::after{
transform:scaleX(1);}
.nav-actions{
display:flex;
gap:0.75rem;
align-items:center;
justify-content:center;}
.nav-actions .btn{
flex-shrink:0;}
.cookie-banner{
position:fixed;
left:50%;
bottom:20px;
transform:translateX(-50%);
width:min(620px,calc(100% - 2rem));
background:rgba(26,26,26,0.95);
border:1px solid rgba(255,255,255,0.08);
border-radius:18px;
padding:1.25rem 1.5rem;
box-shadow:0 20px 60px rgba(0,0,0,0.45);
backdrop-filter:blur(18px);
display:none;
align-items:flex-start;
gap:1.25rem;
z-index:1200;}
.cookie-banner.show{
display:flex;}
.cookie-banner .cookie-icon{
font-size:1.75rem;
line-height:1;
margin-top:0.1rem;}
.cookie-banner .cookie-content{
flex:1 1 auto;}
.cookie-banner h3{
font-size:1.05rem;
margin-bottom:0.35rem;
color:var(--text-primary);}
.cookie-banner p{
margin:0;
font-size:0.9rem;
color:var(--text-secondary);
line-height:1.5;}
.cookie-banner a{
color:var(--primary-light);
text-decoration:underline;}
.cookie-banner a:hover{
color:var(--primary);}
.cookie-banner .cookie-actions{
display:flex;
flex-direction:column;
gap:0.65rem;
flex:0 0 auto;}
.cookie-banner .cookie-actions button,.cookie-banner .cookie-actions .learn-btn{
border:none;
border-radius:999px;
padding:0.6rem 1.5rem;
font-weight:600;
cursor:pointer;
transition:all 0.25s ease;
text-align:center;
display:inline-block;}
.cookie-banner .cookie-actions .accept-btn{
background:var(--primary);
color:white;
box-shadow:0 12px 30px rgba(220,38,38,0.4);}
.cookie-banner .cookie-actions .accept-btn:hover{
background:var(--primary-dark);
box-shadow:0 16px 40px rgba(220,38,38,0.5);
transform:translateY(-1px);}
.cookie-banner .cookie-actions .learn-btn{
background:transparent;
color:var(--text-secondary);
border:1px solid rgba(255,255,255,0.2);
text-decoration:none;}
.cookie-banner .cookie-actions .learn-btn:hover{
color:var(--text-primary);
border-color:rgba(255,255,255,0.4);}
@media (max-width:768px){
.cookie-banner{
flex-direction:column;
align-items:stretch;
gap:1rem;
padding:1.15rem;
bottom:12px;}
.cookie-banner .cookie-actions{
flex-direction:row;
justify-content:flex-end;}
}
@media (max-width:520px){
.cookie-banner{
width:calc(100% - 1.5rem);
bottom:12px;
padding:1rem;}
.cookie-banner .cookie-actions{
flex-direction:column;
align-items:stretch;}
.cookie-banner .cookie-actions button{
width:100%;}
}
.currency-selector{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.25rem;
padding:0.3rem 0.5rem;
width:90px;
background:rgba(255,255,255,0.05);
border-radius:0.5rem;
cursor:pointer;
font-size:0.85rem;
color:var(--text-primary);
transition:all 0.3s;
user-select:none;
text-align:center;
margin:0 auto;}
.currency-selector:hover{
background:rgba(255,255,255,0.08);}
.currency-dropdown{
position:absolute;
top:100%;
left:50%;
margin-top:0.6rem;
background:var(--background-card);
border:1px solid var(--border);
border-radius:0.5rem;
width:90px;
opacity:0;
visibility:hidden;
transform:translate(-50%,0);
transition:all 0.2s ease;
box-shadow:0 10px 40px rgba(0,0,0,0.3);
z-index:100;
pointer-events:none;
padding-top:0.4rem;}
.currency-selector:hover .currency-dropdown,.currency-dropdown:hover{
opacity:1;
visibility:visible;
transform:translate(-50%,0);
pointer-events:auto;}
.currency-dropdown::before{
content:'';
position:absolute;
top:-0.5rem;
left:0;
right:0;
height:0.5rem;
background:transparent;}
.currency-dropdown a{
display:block;
padding:0.5rem 0.6rem;
color:var(--text-primary);
text-decoration:none;
transition:all 0.3s;
border-bottom:1px solid var(--border);
text-align:center;
font-size:0.85rem;}
.currency-dropdown a:last-child{
border-bottom:none;}
.currency-dropdown a:hover{
background:rgba(220,38,38,0.1);
color:var(--primary);}
.dropdown{
position:relative;}
.dropdown-arrow{
font-size:0.65rem;
opacity:0.8;
transition:all 0.3s;
margin-left:0.15rem;}
.dropdown:hover .dropdown-arrow{
transform:rotate(180deg);
opacity:1;}
.dropdown-menu{
position:absolute;
top:calc(100%+1.25rem);
left:50%;
transform:translateX(-50%);
background:rgba(26,26,26,0.98);
backdrop-filter:blur(20px);
border:1px solid rgba(220,38,38,0.3);
border-radius:0.75rem;
min-width:300px;
opacity:0;
visibility:hidden;
transform:translateX(-50%) translateY(-10px);
transition:all 0.3s;
box-shadow:0 20px 60px rgba(0,0,0,0.4),0 0 0 1px rgba(220,38,38,0.1);
padding:0.75rem;
z-index:100;}
.dropdown:hover .dropdown-menu{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);}
.dropdown-item{
display:flex;
align-items:center;
gap:1rem;
padding:1.1rem 1.25rem;
border-radius:0.5rem;
text-decoration:none;
color:var(--text-primary);
transition:all 0.3s;
margin-bottom:0.35rem;
border:1px solid transparent;}
.dropdown-item:last-child{
margin-bottom:0;}
.dropdown-item:hover{
background:rgba(220,38,38,0.15);
border-color:rgba(220,38,38,0.3);
transform:translateX(3px);}
.dropdown-icon{
font-size:1.75rem;
opacity:0.9;
flex-shrink:0;}
.dropdown-item:hover .dropdown-icon{
opacity:1;
transform:scale(1.1);
transition:all 0.3s;}
.dropdown-item strong{
display:block;
margin-bottom:0.35rem;
color:var(--text-primary);
font-size:1rem;
font-weight:700;}
.dropdown-item small{
display:block;
color:var(--text-secondary);
font-size:0.85rem;
line-height:1.4;}
.mobile-menu-btn{
display:none;
background:none;
border:none;
color:var(--text-primary);
font-size:1.5rem;
cursor:pointer;
padding:0.5rem;
transition:color 0.3s;}
.mobile-menu-btn:hover{
color:var(--primary);}
.mobile-menu{
position:fixed;
top:0;
right:-100%;
width:100%;
max-width:400px;
height:100vh;
background:var(--background-card);
border-left:1px solid var(--border);
padding:2rem;
overflow-y:auto;
transition:right 0.3s;
z-index:1000;
box-shadow:-5px 0 20px rgba(0,0,0,0.3);}
.mobile-menu.active{
right:0;}
.mobile-menu a{
display:block;
padding:1rem;
color:var(--text-primary);
text-decoration:none;
transition:all 0.3s;
border-radius:0.5rem;
margin-bottom:0.5rem;}
.mobile-menu a:hover{
background:rgba(220,38,38,0.1);
color:var(--primary);
transform:translateX(5px);}
.mobile-menu-section{
margin-bottom:1.5rem;}
.mobile-menu-section strong{
display:block;
color:var(--text-secondary);
font-size:0.85rem;
text-transform:uppercase;
letter-spacing:0.05em;
margin-bottom:0.75rem;
padding:0 1rem;}
.mobile-menu-section a{
padding-left:1.5rem;}
.mobile-menu-divider{
height:1px;
background:var(--border);
margin:1.5rem 0;}
.mobile-menu .btn{
width:100%;
margin-bottom:0.75rem;}
.btn{
display:inline-block;
padding:0.75rem 1.5rem;
border-radius:0.5rem;
text-decoration:none;
font-weight:600;
transition:all 0.3s;
cursor:pointer;
border:none;
font-size:0.95rem;
white-space:nowrap;}
.btn-primary{
background:var(--primary);
color:white;}
.btn-primary:hover{
background:var(--primary-dark);
transform:translateY(-2px);
box-shadow:0 10px 30px rgba(220,38,38,0.3);}
.btn-secondary{
background:rgba(255,255,255,0.05);
color:var(--text-primary);
border:1px solid var(--border);}
.btn-secondary:hover{
background:rgba(255,255,255,0.1);
border-color:var(--primary);
color:var(--primary);
transform:translateY(-2px);}
.btn-ghost{
background:transparent;
color:var(--text-primary);
border:1px solid var(--border);}
.btn-ghost:hover{
background:rgba(255,255,255,0.05);
border-color:var(--primary);
color:var(--primary);}
.btn-transfer{
background:rgba(220,38,38,0.1);
color:var(--primary);
border:1px solid rgba(220,38,38,0.4);}
.btn-transfer:hover{
background:rgba(220,38,38,0.2);
border-color:var(--primary);
color:var(--primary);
transform:translateY(-2px);
box-shadow:0 5px 15px rgba(220,38,38,0.2);}
.btn-large{
padding:1rem 2rem;
font-size:1.1rem;}
.hero{
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:8rem 2rem 4rem;
position:relative;
z-index:1;
overflow:hidden;}
.hero-badge{
display:inline-flex;
align-items:center;
gap:0.5rem;
padding:0.5rem 1.5rem;
background:rgba(220,38,38,0.1);
border:1px solid rgba(220,38,38,0.3);
border-radius:50px;
font-size:0.9rem;
font-weight:500;
margin-bottom:2rem;
color:var(--text-primary);}
.pulse-dot{
width:8px;
height:8px;
background:var(--primary);
border-radius:50%;
animation:pulse 2s infinite;}
@keyframes pulse{
0%,100%{
opacity:1;
transform:scale(1);}
50%{
opacity:0.5;
transform:scale(1.2);}
}
.hero h1{
font-size:clamp(2.5rem,6vw,4.5rem);
font-weight:900;
line-height:1.1;
margin-bottom:1.5rem;}
.gradient-text{
background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;}
.hero p{
font-size:clamp(1rem,2vw,1.25rem);
color:var(--text-secondary);
margin-bottom:2.5rem;
line-height:1.8;
max-width:700px;}
.domain-search{
width:100%;
max-width:600px;
margin-bottom:2rem;}
.search-container{
display:flex;
gap:0.5rem;}
.search-container input[type="text"]{
flex:1;
padding:1rem 1.5rem;
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:0.5rem;
color:var(--text-primary);
font-size:1rem;
transition:all 0.3s;}
.search-container input[type="text"]:focus{
outline:none;
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(220,38,38,0.1);}
.search-container button{
padding:1rem 2rem;
background:var(--primary);
color:white;
border:none;
border-radius:0.5rem;
font-weight:600;
cursor:pointer;
transition:all 0.3s;
white-space:nowrap;}
.search-container button:hover{
background:var(--primary-dark);}
.domain-results{
margin-top:2rem;
width:100%;
max-width:800px;
background:rgba(26,26,26,0.8);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:15px;
padding:1.5rem;
animation:slideDown 0.3s ease;}
@keyframes slideDown{
from{
opacity:0;
transform:translateY(-10px);}
to{
opacity:1;
transform:translateY(0);}
}
.scroll-indicator{
position:absolute;
bottom:2rem;
left:50%;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:0.5rem;
opacity:0.7;
transition:opacity 0.3s ease;
cursor:pointer;}
.scroll-indicator:hover{
opacity:1;}
.scroll-indicator span{
font-size:0.75rem;
color:var(--text-secondary);
text-transform:uppercase;
letter-spacing:1px;}
.scroll-mouse{
width:24px;
height:38px;
border:2px solid var(--text-secondary);
border-radius:12px;
position:relative;}
.scroll-wheel{
width:4px;
height:8px;
background:var(--primary);
border-radius:2px;
position:absolute;
top:6px;
left:50%;
transform:translateX(-50%);
animation:scrollWheel 1.5s ease-in-out infinite;}
@keyframes scrollWheel{
0%,100%{
opacity:1;
transform:translateX(-50%) translateY(0);}
50%{
opacity:0.3;
transform:translateX(-50%) translateY(10px);}
}
.domain-results-header{
margin-bottom:1.5rem;}
.domain-results-header h3{
font-size:1.3rem;
color:var(--text-primary);
margin:0;}
.domain-loading,.domain-error{
text-align:center;
padding:2rem;
color:var(--text-secondary);}
.domain-error{
color:var(--primary);}
.domain-results-list{
display:flex;
flex-direction:column;
gap:1rem;}
.domain-result-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:1rem;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:10px;
transition:all 0.3s ease;}
.domain-result-item:hover{
background:rgba(255,255,255,0.05);
border-color:var(--primary);}
.domain-result-item.available{
border-left:3px solid var(--primary);}
.domain-result-item.unavailable{
opacity:0.6;
border-left:3px solid #666;}
.domain-info{
display:flex;
flex-direction:column;
gap:0.5rem;
flex:1;}
.domain-name{
font-size:1.1rem;
font-weight:600;
color:var(--text-primary);}
.domain-price{
font-size:0.95rem;
color:var(--primary);
font-weight:500;}
.domain-status{
font-size:0.9rem;
color:var(--text-secondary);}
.btn-sm{
padding:0.6rem 1.2rem;
font-size:0.9rem;}
.hero-actions{
display:flex;
gap:1rem;
flex-wrap:wrap;
justify-content:center;}
@keyframes heroAurora{
0%{
transform:translate3d(-4%,-2%,0) scale(1.05);}
50%{
transform:translate3d(6%,3%,0) scale(1.1);}
100%{
transform:translate3d(-2%,4%,0) scale(1.08);}
}
@keyframes heroGridDrift{
0%{
background-position:0 0,0 0,0 0;}
100%{
background-position:0 120px,120px 0,0 120px;}
}
@keyframes heroNoise{
0%{
transform:translate3d(0,0,0);}
100%{
transform:translate3d(-5%,-5%,0);}
}
.free-migration-banner{
background:linear-gradient(135deg,rgba(220,38,38,0.15) 0%,rgba(153,27,27,0.1) 100%);
border-top:2px solid rgba(220,38,38,0.3);
border-bottom:2px solid rgba(220,38,38,0.3);
padding:2.5rem 2rem;
position:relative;
overflow:hidden;
margin:3rem 0;}
.free-migration-banner::before{
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(220,38,38,0.1),transparent);
animation:shimmer 3s infinite;}
@keyframes shimmer{
0%{
left:-100%;}
100%{
left:100%;}
}
.migration-container{
max-width:1200px;
margin:0 auto;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:2rem;
position:relative;
z-index:1;}
.migration-icon-wrapper{
position:relative;
display:flex;
align-items:center;
justify-content:center;}
.migration-icon{
font-size:4rem;
display:block;
animation:float 3s ease-in-out infinite;
filter:drop-shadow(0 4px 12px rgba(220,38,38,0.4));}
@keyframes float{
0%,100%{
transform:translateY(0px);}
50%{
transform:translateY(-10px);}
}
.migration-pulse{
position:absolute;
width:100px;
height:100px;
border-radius:50%;
background:radial-gradient(circle,rgba(220,38,38,0.4) 0%,transparent 70%);
animation:pulse-ring 2s ease-out infinite;}
@keyframes pulse-ring{
0%{
transform:scale(0.8);
opacity:1;}
100%{
transform:scale(1.5);
opacity:0;}
}
.migration-content h3{
font-size:clamp(1.5rem,3vw,2rem);
font-weight:800;
margin-bottom:0.5rem;
background:linear-gradient(135deg,var(--text-primary) 0%,var(--primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;}
.migration-content p{
color:var(--text-secondary);
font-size:clamp(0.95rem,1.5vw,1.1rem);
line-height:1.6;
margin:0;}
.btn-migration{
white-space:nowrap;
padding:1rem 2rem;
font-size:1.1rem;
box-shadow:0 4px 20px rgba(220,38,38,0.3);
animation:pulse-btn 2s ease-in-out infinite;}
@keyframes pulse-btn{
0%,100%{
box-shadow:0 4px 20px rgba(220,38,38,0.3);}
50%{
box-shadow:0 4px 30px rgba(220,38,38,0.5);}
}
.btn-migration:hover{
transform:translateY(-3px);
box-shadow:0 8px 35px rgba(220,38,38,0.5);}
@media (max-width:968px){
.migration-container{
grid-template-columns:1fr;
text-align:center;
gap:1.5rem;}
.migration-icon{
font-size:3rem;}
.btn-migration{
width:100%;}
}
@media (max-width:640px){
.free-migration-banner{
padding:2rem 1rem;
margin:2rem 0;}
.migration-icon{
font-size:2.5rem;}
}
.who-were-for{
padding:4rem 2rem;
max-width:1200px;
margin:0 auto;
position:relative;
z-index:1;
text-align:center;}
.who-were-for .container{
max-width:800px;
margin:0 auto;}
.who-were-for h2{
font-size:clamp(2rem,4vw,2.5rem);
font-weight:800;
margin-bottom:1.5rem;
color:var(--text-primary);}
.who-were-for p{
font-size:clamp(1.1rem,2vw,1.3rem);
color:var(--text-secondary);
line-height:1.8;
max-width:700px;
margin:0 auto;}
@media (max-width:768px){
.who-were-for{
padding:3rem 1.5rem;}
.who-were-for p{
font-size:1.1rem;}
}
.services{
padding:5rem 2rem;
max-width:1400px;
margin:0 auto;
position:relative;
z-index:1;}
.section-header{
text-align:center;
margin-bottom:4rem;}
.section-header h2{
font-size:clamp(2rem,4vw,3rem);
font-weight:800;
margin-bottom:1rem;}
.section-header p{
font-size:1.1rem;
color:var(--text-secondary);
max-width:600px;
margin:0 auto;}
.services-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:1.5rem;}
@media (max-width:1400px){
.services-grid{
grid-template-columns:repeat(3,1fr);}
}
@media (max-width:968px){
.services-grid{
grid-template-columns:1fr;}
}
.service-card{
background:var(--background-card);
border:1px solid var(--border);
border-radius:1rem;
padding:2.5rem;
transition:all 0.3s;
position:relative;
overflow:hidden;
cursor:pointer;
display:flex;
flex-direction:column;}
.service-card::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:linear-gradient(90deg,var(--primary),var(--primary-dark));
transform:scaleX(0);
transition:transform 0.3s;}
.service-card:hover::before{
transform:scaleX(1);}
.service-card:hover{
transform:translateY(-10px);
border-color:var(--primary);
box-shadow:0 20px 60px rgba(220,38,38,0.2);}
.service-icon{
font-size:3rem;
margin-bottom:1.5rem;
display:block;
height:4rem;
line-height:4rem;
flex-shrink:0;}
.service-card h3{
font-size:1.5rem;
margin-bottom:1rem;
font-weight:700;
min-height:4.5rem;
display:flex;
align-items:flex-start;
flex-shrink:0;
line-height:1.4;}
.service-card p{
color:var(--text-secondary);
margin-bottom:1.5rem;
line-height:1.7;
flex-grow:1;}
.price-tag{
font-size:2rem;
font-weight:800;
color:var(--primary);
margin-bottom:0.5rem;
display:inline-flex;
align-items:baseline;
gap:0.35rem;
white-space:nowrap;}
.price-tag .amount{
font-size:2rem;
line-height:1;}
.price-tag .period{
font-size:1rem;
color:var(--text-secondary);
font-weight:400;
line-height:1.2;}
.price-note{
color:var(--text-secondary);
font-size:0.9rem;
margin-top:0.25rem;}
.features{
padding:5rem 2rem;
max-width:1400px;
margin:0 auto;
position:relative;
z-index:1;}
.features-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:2rem;
margin-top:3rem;}
.hosting-features-section .features-grid{
grid-template-columns:repeat(4,1fr) !important;
gap:1.25rem !important;}
@media (max-width:1024px){
.hosting-features-section .features-grid{
grid-template-columns:repeat(3,1fr) !important;}
}
@media (max-width:768px){
.hosting-features-section .features-grid{
grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width:640px){
.hosting-features-section .features-grid{
grid-template-columns:1fr !important;}
}
.use-cases-grid{
grid-template-columns:repeat(3,1fr) !important;
gap:1.5rem !important;}
.pricing-cards.email-archiving-cards{
display:grid !important;
grid-template-columns:repeat(4,280px) !important;
justify-content:center !important;
align-items:stretch !important;
gap:1rem !important;
width:fit-content !important;
max-width:100% !important;
margin-left:auto !important;
margin-right:auto !important;
grid-auto-rows:1fr !important;}
@media (max-width:1600px){
.pricing-cards.email-archiving-cards{
grid-template-columns:repeat(4,260px) !important;}
}
@media (max-width:1200px){
.pricing-cards.email-archiving-cards{
grid-template-columns:repeat(2,280px) !important;}
}
@media (max-width:640px){
.pricing-cards.email-archiving-cards{
grid-template-columns:1fr !important;}
}
.pricing-cards.nextcloud-instances-cards{
display:grid !important;
grid-template-columns:repeat(3,280px) !important;
justify-content:center !important;
align-items:stretch !important;
gap:1rem !important;
width:fit-content !important;
max-width:100% !important;
margin-left:auto !important;
margin-right:auto !important;
grid-auto-rows:1fr !important;}
@media (max-width:1200px){
.pricing-cards.nextcloud-instances-cards{
grid-template-columns:repeat(3,260px) !important;}
}
@media (max-width:968px){
.pricing-cards.nextcloud-instances-cards{
grid-template-columns:repeat(3,240px) !important;}
}
@media (max-width:840px){
.pricing-cards.nextcloud-instances-cards{
grid-template-columns:repeat(2,280px) !important;}
}
@media (max-width:640px){
.pricing-cards.nextcloud-instances-cards{
grid-template-columns:1fr !important;}
}
.pricing-cards.ssl-cards{
display:grid !important;
grid-template-columns:repeat(6,1fr) !important;
gap:1rem !important;
margin-bottom:2rem !important;
width:100% !important;
align-items:stretch !important;
grid-auto-rows:1fr !important;}
.pricing-cards.ssl-cards.center-cards,.pricing-cards.ssl-cards.center-4-cards,.pricing-cards.ssl-cards.center-5-cards{
display:grid !important;
width:fit-content !important;
max-width:100% !important;
margin-left:auto !important;
margin-right:auto !important;
justify-content:center !important;
justify-items:stretch !important;}
.pricing-cards.ssl-cards.center-cards{
grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important;}
.pricing-cards.ssl-cards.center-4-cards{
grid-template-columns:repeat(4,280px) !important;}
.pricing-cards.ssl-cards.center-5-cards{
grid-template-columns:repeat(5,260px) !important;}
@media (max-width:1600px){
.pricing-cards.ssl-cards{
grid-template-columns:repeat(3,1fr) !important;}
.pricing-cards.ssl-cards.center-cards{
grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important;}
.pricing-cards.ssl-cards.center-4-cards{
grid-template-columns:repeat(4,280px) !important;}
.pricing-cards.ssl-cards.center-5-cards{
grid-template-columns:repeat(3,280px) !important;}
}
@media (max-width:968px){
.pricing-cards.ssl-cards{
grid-template-columns:repeat(2,1fr) !important;}
.pricing-cards.ssl-cards.center-cards,.pricing-cards.ssl-cards.center-4-cards,.pricing-cards.ssl-cards.center-5-cards{
grid-template-columns:repeat(2,280px) !important;}
}
@media (max-width:640px){
.pricing-cards.ssl-cards{
grid-template-columns:1fr !important;}
.pricing-cards.ssl-cards.center-cards,.pricing-cards.ssl-cards.center-4-cards,.pricing-cards.ssl-cards.center-5-cards{
grid-template-columns:1fr !important;}
}
.features-grid.ssl-benefits-grid{
display:grid !important;
grid-template-columns:repeat(3,1fr) !important;
gap:2rem !important;
max-width:1200px !important;
margin-left:auto !important;
margin-right:auto !important;}
@media (max-width:1024px){
.features-grid.ssl-benefits-grid{
grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width:640px){
.features-grid.ssl-benefits-grid{
grid-template-columns:1fr !important;}
}
.feature-item{
text-align:center;
padding:2rem;}
.feature-icon{
font-size:2.5rem;
margin-bottom:1rem;
display:block;}
.feature-item h4{
font-size:1.25rem;
margin-bottom:0.75rem;
font-weight:600;}
.feature-item p{
color:var(--text-secondary);
line-height:1.6;}
.testimonials-section{
padding:6rem 2rem;
max-width:1400px;
margin:0 auto;
position:relative;
z-index:1;}
.testimonials-header{
text-align:center;
margin-bottom:5rem;}
.testimonials-header h2{
font-size:clamp(2.5rem,5vw,3.5rem);
font-weight:800;
margin-bottom:1rem;
background:linear-gradient(135deg,#ffffff 0%,var(--primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;}
.testimonials-header p{
font-size:1.2rem;
color:var(--text-secondary);
max-width:600px;
margin:0 auto;}
.testimonials-carousel{
position:relative;
padding:0 60px;
max-width:100%;}
.testimonials-track{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1.5rem;}
.testimonial-card{
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:20px;
padding:2rem;
transition:all 0.3s ease;
display:flex;
flex-direction:column;
height:500px;}
.testimonial-card:hover{
transform:translateY(-5px);
border-color:var(--primary);
box-shadow:0 20px 60px rgba(220,38,38,0.2);}
.testimonial-header{
display:flex;
align-items:flex-start;
gap:1.5rem;
margin-bottom:1.5rem;
min-height:80px;}
.testimonial-avatar-wrapper{
width:80px;
height:80px;
min-width:80px;
min-height:80px;
border-radius:50%;
border:2px solid var(--primary);
overflow:hidden !important;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
background-color:rgba(255,255,255,0.05);
position:relative;
box-sizing:border-box;
padding:12px;}
.testimonial-avatar-wrapper img.testimonial-avatar,.testimonial-avatar-wrapper .testimonial-avatar{
width:56px !important;
height:56px !important;
object-fit:contain !important;
object-position:center center !important;
display:block !important;
margin:0 !important;
padding:0 !important;
border:none !important;
border-radius:0 !important;
box-sizing:border-box !important;}
.testimonial-avatar-placeholder{
width:80px;
height:80px;
border-radius:50%;
background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
display:flex;
align-items:center;
justify-content:center;
font-size:1.5rem;
font-weight:700;
color:white;
flex-shrink:0;}
.testimonial-info{
flex:1;
min-width:0;}
.testimonial-info h4{
color:var(--text-primary);
font-weight:700;
margin-bottom:0.25rem;
font-size:1rem;
line-height:1.3;
word-wrap:break-word;
overflow-wrap:break-word;}
.testimonial-position{
color:var(--text-secondary);
font-size:0.85rem;
word-wrap:break-word;
overflow-wrap:break-word;
line-height:1.4;}
.testimonial-rating{
display:flex;
gap:0.25rem;
margin-bottom:1.5rem;}
.star{
color:#fbbf24;
font-size:1.2rem;}
.star.empty{
color:rgba(251,191,36,0.3);}
.testimonial-text{
color:var(--text-secondary);
line-height:1.7;
flex-grow:1;
font-size:0.95rem;
margin-bottom:1.5rem;
overflow:hidden;
display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;}
.testimonial-company{
display:flex;
align-items:center;
gap:1rem;
padding-top:1.5rem;
border-top:1px solid var(--border);
margin-top:auto;}
.company-logo{
height:30px;
width:auto;
opacity:0.7;
filter:grayscale(100%);
transition:all 0.3s ease;}
.testimonial-card:hover .company-logo{
opacity:1;
filter:grayscale(0%);}
.company-name{
color:var(--text-secondary);
font-size:0.9rem;
font-weight:600;}
.carousel-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(26,26,26,0.8);
border:1px solid var(--border);
width:50px;
height:50px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all 0.3s ease;
z-index:10;}
.carousel-nav:hover{
background:var(--primary);
border-color:var(--primary);
transform:translateY(-50%) scale(1.1);}
.carousel-nav.prev{
left:0;}
.carousel-nav.next{
right:0;}
.carousel-nav svg{
width:24px;
height:24px;
fill:var(--text-primary);}
.carousel-indicators{
display:flex;
justify-content:center;
gap:0.75rem;
margin-top:3rem;}
.indicator{
width:12px;
height:12px;
border-radius:50%;
background:rgba(255,255,255,0.2);
border:1px solid var(--border);
cursor:pointer;
transition:all 0.3s ease;}
.indicator.active{
background:var(--primary);
border-color:var(--primary);
width:30px;
border-radius:6px;}
.about-hero{
position:relative;
z-index:1;
max-width:1400px;
margin:0 auto;
padding:10rem 2rem 4rem;
text-align:center;}
.about-hero h1{
font-size:clamp(2.5rem,5vw,4rem);
font-weight:800;
margin-bottom:1.5rem;
background:linear-gradient(135deg,#ffffff 0%,var(--primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;}
.about-hero p{
font-size:1.3rem;
color:var(--text-secondary);
max-width:700px;
margin:0 auto;
line-height:1.6;}
.about-section{
max-width:1200px;
margin:0 auto;
padding:4rem 2rem;}
.content-card{
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:20px;
padding:3rem;
margin-bottom:3rem;}
.content-card h2{
font-size:2.5rem;
font-weight:700;
margin-bottom:1.5rem;
color:var(--text-primary);}
.content-card p{
color:var(--text-secondary);
line-height:1.8;
margin-bottom:1rem;
font-size:1.1rem;}
.values-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:2rem;
margin-top:2rem;}
.value-card{
background:rgba(10,10,10,0.6);
border:1px solid var(--border);
border-radius:15px;
padding:2rem;
transition:all 0.3s ease;}
.value-card:hover{
transform:translateY(-5px);
border-color:var(--primary);
box-shadow:0 10px 30px rgba(220,38,38,0.2);}
.value-icon{
font-size:3rem;
margin-bottom:1rem;}
.value-card h3{
font-size:1.4rem;
font-weight:600;
color:var(--text-primary);
margin-bottom:0.8rem;}
.value-card p{
font-size:1rem;
color:var(--text-secondary);
line-height:1.6;}
.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:2rem;
margin-top:3rem;}
.stat-card{
text-align:center;
padding:2rem;
background:linear-gradient(135deg,rgba(220,38,38,0.1) 0%,rgba(153,27,27,0.1) 100%);
border:1px solid rgba(220,38,38,0.2);
border-radius:15px;}
.stat-number{
font-size:3rem;
font-weight:800;
color:var(--primary);
display:block;
margin-bottom:0.5rem;}
.stat-label{
color:var(--text-secondary);
font-weight:500;}
.sister-company{
background:linear-gradient(135deg,rgba(220,38,38,0.1) 0%,rgba(10,10,10,0.6) 100%);
border:1px solid rgba(220,38,38,0.3);
padding:3rem;
border-radius:20px;
text-align:center;}
.sister-company h2{
font-size:2rem;
font-weight:700;
margin-bottom:1rem;
color:var(--text-primary);}
.sister-company p{
font-size:1.1rem;
color:var(--text-secondary);
margin-bottom:2rem;}
.sister-company-btn{
display:inline-block;
padding:1rem 2.5rem;
background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
color:white;
text-decoration:none;
border-radius:10px;
font-weight:600;
transition:all 0.3s ease;}
.sister-company-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 30px rgba(220,38,38,0.4);}
.timeline{
margin-top:3rem;}
.timeline-item{
display:flex;
gap:2rem;
margin-bottom:2rem;
padding-bottom:2rem;
border-bottom:1px solid var(--border);}
.timeline-item:last-child{
border-bottom:none;}
.timeline-year{
font-size:2rem;
font-weight:800;
color:var(--primary);
flex-shrink:0;
width:100px;}
.timeline-content h3{
font-size:1.3rem;
font-weight:600;
color:var(--text-primary);
margin-bottom:0.5rem;}
.timeline-content p{
color:var(--text-secondary);
line-height:1.6;}
.legal-page{
position:relative;
z-index:1;
max-width:900px;
margin:0 auto;
padding:10rem 2rem 4rem;}
.legal-page h1{
font-size:clamp(2.5rem,5vw,3.5rem);
font-weight:800;
margin-bottom:1rem;
background:linear-gradient(135deg,#ffffff 0%,#737373 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;}
.legal-page .last-updated{
color:var(--text-secondary);
font-size:0.95rem;
margin-bottom:3rem;}
.legal-content{
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:20px;
padding:3rem;
line-height:1.8;}
.legal-content h2{
font-size:1.8rem;
font-weight:700;
margin-top:2.5rem;
margin-bottom:1rem;
color:var(--text-primary);}
.legal-content h2:first-child{
margin-top:0;}
.legal-content h3{
font-size:1.3rem;
font-weight:600;
margin-top:1.5rem;
margin-bottom:0.8rem;
color:var(--primary-light);}
.legal-content p{
margin-bottom:1rem;
color:var(--text-secondary);}
.legal-content ul,.legal-content ol{
margin-bottom:1rem;
padding-left:2rem;
color:var(--text-secondary);}
.legal-content li{
margin-bottom:0.5rem;}
.legal-content strong{
color:var(--text-primary);}
.warning-box{
background:rgba(220,38,38,0.1);
border:1px solid rgba(220,38,38,0.3);
border-radius:12px;
padding:1.5rem;
margin:2rem 0;}
.warning-box strong{
color:var(--primary-light);}
.contact-hero{
position:relative;
z-index:1;
max-width:1400px;
margin:0 auto;
padding:10rem 2rem 4rem;
text-align:center;}
.contact-hero h1{
font-size:clamp(2.5rem,5vw,4rem);
font-weight:800;
margin-bottom:1.5rem;
background:linear-gradient(135deg,#ffffff 0%,var(--primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;}
.contact-hero p{
font-size:1.2rem;
color:var(--text-secondary);
max-width:600px;
margin:0 auto 3rem;}
.contact-container{
max-width:1200px;
margin:0 auto;
padding:0 2rem 6rem;
display:grid;
grid-template-columns:1fr 1fr;
gap:3rem;}
.contact-info{
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:20px;
padding:3rem;}
.contact-info h2{
font-size:2rem;
font-weight:700;
margin-bottom:1.5rem;
color:var(--text-primary);}
.contact-method{
display:flex;
align-items:flex-start;
gap:1.5rem;
padding:1.5rem 0;
border-bottom:1px solid var(--border);
transition:all 0.3s ease;}
.contact-method:last-child{
border-bottom:none;}
.contact-method:hover{
padding-left:0.5rem;}
.contact-icon{
width:50px;
height:50px;
background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.5rem;
flex-shrink:0;}
.contact-details h3{
font-size:1.2rem;
font-weight:600;
color:var(--text-primary);
margin-bottom:0.5rem;}
.contact-details p{
color:var(--text-secondary);
line-height:1.6;}
.contact-details a{
color:var(--primary);
text-decoration:none;
transition:color 0.3s ease;}
.contact-details a:hover{
color:var(--text-primary);}
.contact-status{
display:block;
margin-top:0.5rem;
font-size:0.9rem;
font-weight:600;
color:#10b981;}
.contact-form{
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:20px;
padding:3rem;}
.contact-form h2{
font-size:2rem;
font-weight:700;
margin-bottom:1.5rem;
color:var(--text-primary);}
.contact-form .form-group{
margin-bottom:1.5rem;}
.contact-form .form-group label{
display:block;
font-weight:600;
margin-bottom:0.5rem;
color:var(--text-primary);}
.contact-form .form-group input,.contact-form .form-group textarea,.contact-form .form-group select{
width:100%;
padding:1rem;
background:rgba(10,10,10,0.6);
border:1px solid var(--border);
border-radius:10px;
color:var(--text-primary);
font-size:1rem;
transition:all 0.3s ease;}
.contact-form .form-group input:focus,.contact-form .form-group textarea:focus,.contact-form .form-group select:focus{
outline:none;
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(220,38,38,0.1);}
.contact-form .form-group textarea{
resize:vertical;
min-height:150px;}
.contact-form .form-group select{
cursor:pointer;}
.contact-form .form-group select option{
background:#1a1a1a;
color:var(--text-primary);}
.contact-form .submit-btn{
width:100%;
padding:1rem 2rem;
background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
color:white;
border:none;
border-radius:10px;
font-size:1.1rem;
font-weight:600;
cursor:pointer;
transition:all 0.3s ease;}
.contact-form .submit-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 30px rgba(220,38,38,0.3);}
.contact-form .submit-btn:disabled{
opacity:0.6;
cursor:not-allowed;
transform:none;}
.contact-form .alert{
padding:1rem;
border-radius:10px;
margin-bottom:1.5rem;
display:none;}
.contact-form .alert.success{
background:rgba(34,197,94,0.1);
border:1px solid rgba(34,197,94,0.3);
color:#22c55e;}
.contact-form .alert.error{
background:rgba(239,68,68,0.1);
border:1px solid rgba(239,68,68,0.3);
color:#ef4444;}
.business-hours{
margin-top:2rem;
padding:1.5rem;
background:rgba(10,10,10,0.4);
border-radius:12px;}
.business-hours h3{
font-size:1.1rem;
font-weight:600;
color:var(--text-primary);
margin-bottom:1rem;}
.hours-list{
display:flex;
flex-direction:column;
gap:0.5rem;}
.hours-item{
display:flex;
justify-content:space-between;
color:var(--text-secondary);
font-size:0.95rem;}
.hours-item .day{
font-weight:500;}
.tutorials-hero{
position:relative;
z-index:1;
max-width:1400px;
margin:0 auto;
padding:6rem 2rem 2rem;
text-align:center;}
.tutorials-hero h1{
font-size:clamp(2rem,4vw,2.5rem);
font-weight:700;
margin-bottom:0.75rem;
background:linear-gradient(135deg,#ffffff 0%,var(--primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;}
.tutorials-hero p{
font-size:1rem;
color:var(--text-secondary);
max-width:700px;
margin:0 auto 1.5rem;}
.search-box{
max-width:600px;
margin:0 auto;}
.search-input-wrapper{
position:relative;}
.search-input{
width:100%;
padding:0.75rem 3rem 0.75rem 1rem;
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:10px;
color:var(--text-primary);
font-size:0.9rem;
transition:all 0.3s ease;}
.search-input:focus{
outline:none;
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(220,38,38,0.1);}
.search-btn{
position:absolute;
right:8px;
top:50%;
transform:translateY(-50%);
background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
border:none;
padding:0.5rem 1rem;
border-radius:8px;
color:white;
font-weight:500;
font-size:0.85rem;
cursor:pointer;
transition:all 0.3s ease;}
.search-btn:hover{
transform:translateY(-50%) scale(1.05);}
.tutorials-container{
max-width:1400px;
margin:0 auto;
padding:1.5rem 2rem;}
.filter-section{
margin-bottom:1.5rem;}
.category-filters{
display:flex;
gap:1rem;
flex-wrap:wrap;
justify-content:center;}
.filter-btn{
padding:0.5rem 1rem;
background:rgba(26,26,26,0.6);
border:1px solid var(--border);
border-radius:8px;
color:var(--text-secondary);
font-weight:500;
font-size:0.85rem;
cursor:pointer;
transition:all 0.3s ease;
text-decoration:none;
display:inline-block;}
.filter-btn:hover{
border-color:var(--primary);
color:var(--text-primary);}
.filter-btn.active{
background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
border-color:var(--primary);
color:white;}
.tutorials-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:1rem;
margin-top:1.5rem;}
.tutorial-card{
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:10px;
padding:1rem;
transition:all 0.3s ease;
text-decoration:none;
display:block;}
.tutorial-card:hover{
transform:translateY(-3px);
border-color:var(--primary);
box-shadow:0 5px 15px rgba(220,38,38,0.15);}
.tutorial-meta{
display:flex;
gap:0.5rem;
margin-bottom:0.5rem;
flex-wrap:wrap;}
.tutorial-category{
padding:0.25rem 0.75rem;
background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
color:white;
border-radius:12px;
font-size:0.75rem;
font-weight:500;}
.tutorial-difficulty{
padding:0.25rem 0.75rem;
background:rgba(64,64,64,0.6);
color:var(--text-secondary);
border-radius:12px;
font-size:0.75rem;
font-weight:500;}
.tutorial-card h3{
font-size:1.1rem;
font-weight:600;
color:var(--text-primary);
margin-bottom:0.5rem;
line-height:1.4;}
.tutorial-card p{
color:var(--text-secondary);
line-height:1.5;
margin-bottom:0.75rem;
font-size:0.85rem;}
.tutorial-footer{
display:flex;
justify-content:space-between;
align-items:center;
padding-top:0.5rem;
border-top:1px solid var(--border);
font-size:0.8rem;}
.tutorial-duration{
color:var(--text-secondary);
font-size:0.75rem;}
.tutorial-arrow{
color:var(--primary);
font-weight:500;
font-size:0.8rem;}
.no-results{
text-align:center;
padding:4rem 2rem;
color:var(--text-secondary);}
.no-results h3{
font-size:1.8rem;
color:var(--text-primary);
margin-bottom:1rem;}
.featured-section{
background:linear-gradient(135deg,rgba(220,38,38,0.1) 0%,rgba(10,10,10,0.6) 100%);
border:1px solid rgba(220,38,38,0.3);
border-radius:12px;
padding:1.5rem;
margin-bottom:1.5rem;
text-align:center;}
.featured-section h2{
font-size:1.4rem;
font-weight:600;
color:var(--text-primary);
margin-bottom:0.5rem;}
.featured-section p{
color:var(--text-secondary);
margin-bottom:1rem;
font-size:0.9rem;}
.quick-links{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:0.75rem;
margin-top:1rem;}
.quick-link{
padding:1rem;
background:rgba(10,10,10,0.6);
border:1px solid var(--border);
border-radius:10px;
text-decoration:none;
transition:all 0.3s ease;
display:flex;
flex-direction:column;
align-items:center;
gap:0.5rem;}
.quick-link:hover{
border-color:var(--primary);
transform:translateY(-2px);}
.quick-link-icon{
font-size:1.8rem;}
.quick-link-text{
color:var(--text-primary);
font-weight:500;
font-size:0.85rem;}
.tutorial-breadcrumb{
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border-bottom:1px solid var(--border);
padding:0.75rem 0;
margin-top:80px;}
.breadcrumb{
max-width:1400px;
margin:0 auto;
padding:0 2rem;
display:flex;
align-items:center;
gap:0.5rem;
color:var(--text-secondary);
font-size:0.8rem;}
.breadcrumb a{
color:var(--text-secondary);
text-decoration:none;
transition:color 0.3s;}
.breadcrumb a:hover{
color:var(--primary);}
.breadcrumb span{
color:var(--text-primary);}
.tutorial-header-section{
background:linear-gradient(135deg,rgba(220,38,38,0.1) 0%,rgba(10,10,10,0.6) 100%);
padding:1.5rem 0;
border-bottom:1px solid var(--border);}
.tutorial-header-content{
max-width:1400px;
margin:0 auto;
padding:0 2rem;}
.tutorial-meta-header{
display:flex;
gap:0.5rem;
margin-bottom:0.75rem;
flex-wrap:wrap;}
.category-badge{
padding:0.25rem 0.75rem;
background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
color:white;
border-radius:12px;
font-size:0.75rem;
font-weight:500;}
.difficulty-badge{
padding:0.25rem 0.75rem;
background:rgba(64,64,64,0.6);
color:var(--text-secondary);
border-radius:12px;
font-size:0.75rem;
font-weight:500;}
.tutorial-header-section h1{
font-size:clamp(1.5rem,3vw,2rem);
margin-bottom:0.5rem;
line-height:1.3;
color:var(--text-primary);}
.tutorial-info{
display:flex;
gap:1rem;
color:var(--text-secondary);
font-size:0.85rem;
flex-wrap:wrap;}
.tutorial-info span{
display:flex;
align-items:center;
gap:0.5rem;}
.tutorial-content-wrapper{
padding:2rem 0;
background:var(--background-dark);}
.tutorial-layout{
display:grid;
grid-template-columns:1fr 280px;
gap:2rem;
max-width:1400px;
margin:0 auto;
padding:0 2rem;}
.tutorial-main{
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:12px;
padding:1.5rem;}
.tutorial-content{
color:var(--text-primary);
line-height:1.6;
font-size:0.95rem;}
.tutorial-content h1,.tutorial-content h2,.tutorial-content h3{
margin-top:1.5rem;
margin-bottom:0.75rem;
color:var(--text-primary);}
.tutorial-content h2{
font-size:1.4rem;
border-bottom:1px solid var(--border);
padding-bottom:0.4rem;}
.tutorial-content h3{
font-size:1.15rem;}
.tutorial-content p{
margin-bottom:1rem;}
.tutorial-content ul,.tutorial-content ol{
margin-bottom:1rem;
padding-left:1.5rem;}
.tutorial-content li{
margin-bottom:0.5rem;}
.tutorial-content code{
background:rgba(220,38,38,0.1);
padding:0.2rem 0.5rem;
border-radius:4px;
font-family:'Courier New',monospace;
font-size:0.9em;}
.tutorial-content pre{
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:8px;
padding:1.5rem;
overflow-x:auto;
margin-bottom:1.5rem;}
.tutorial-content pre code{
background:none;
padding:0;}
.tutorial-content img{
max-width:100%;
height:auto;
border-radius:6px;
margin:1rem 0;
border:1px solid var(--border);
box-shadow:0 2px 8px rgba(0,0,0,0.2);}
.tutorial-content blockquote{
border-left:4px solid var(--primary);
padding-left:1.5rem;
margin:1.5rem 0;
color:var(--text-secondary);
font-style:italic;}
.tutorial-sidebar{
position:sticky;
top:100px;
height:fit-content;}
.sidebar-section{
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:10px;
padding:1rem;
margin-bottom:1rem;}
.sidebar-section h3{
font-size:0.95rem;
margin-bottom:0.75rem;
color:var(--text-primary);
font-weight:600;}
.tutorial-actions{
display:flex;
flex-direction:column;
gap:0.5rem;}
.action-btn{
display:flex;
align-items:center;
gap:0.5rem;
padding:0.5rem 0.75rem;
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:6px;
color:#ffffff;
text-decoration:none;
transition:all 0.3s ease;
font-size:0.85rem;}
.action-btn:hover{
background:rgba(220,38,38,0.1);
border-color:var(--primary);}
.sidebar-info-content{
display:flex;
flex-direction:column;
gap:0.5rem;}
.sidebar-info-item{
display:flex;
flex-direction:column;
gap:0.2rem;}
.sidebar-info-item strong{
color:var(--text-secondary);
font-size:0.75rem;}
.sidebar-info-item span{
color:var(--text-primary);
font-size:0.85rem;}
.related-tutorials{
padding:2rem 0;
background:transparent;
border-top:none;}
.related-tutorials h2{
text-align:center;
margin-bottom:1.5rem;
font-size:1.4rem;}
.related-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:1rem;
max-width:1400px;
margin:0 auto;
padding:0 2rem;}
.related-card{
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:10px;
padding:1rem;
text-decoration:none;
color:var(--text-primary);
transition:all 0.3s;}
.related-card:hover{
transform:translateY(-5px);
border-color:var(--primary);}
.related-card h3{
font-size:1.2rem;
margin-bottom:0.5rem;}
.related-card p{
color:var(--text-secondary);
font-size:0.9rem;}
.hero-section{
position:relative;
padding:10rem 2rem 4rem;
text-align:center;
background:transparent;
overflow:hidden;
z-index:1;}
.hero-section::before,.hero-section::after{
content:none;}
.hero-section .container{
max-width:1400px;
margin:0 auto;
position:relative;
z-index:1;}
.hero-section h1{
font-size:clamp(2.5rem,5vw,4rem);
font-weight:800;
margin-bottom:1.5rem;
line-height:1.2;}
.hero-section h1 .gradient-text{
background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;}
.hero-subtitle{
font-size:1.2rem;
color:var(--text-secondary);
max-width:700px;
margin:0 auto 2rem;}
.trust-indicators{
display:flex;
justify-content:center;
gap:3rem;
flex-wrap:wrap;
margin-top:3rem;
padding:2rem 0;}
.trust-item{
text-align:center;}
.trust-icon{
font-size:3rem;
margin-bottom:0.5rem;}
.trust-value{
color:var(--text-primary);
font-size:1.5rem;
font-weight:700;
display:block;}
.trust-label{
color:var(--text-secondary);
font-size:0.9rem;}
.hosting-pricing-section{
padding:4rem 2rem;
background:transparent;
border-top:none;
border-bottom:none;}
.hosting-pricing-section .container{
max-width:1400px;
margin:0 auto;
display:flex;
flex-direction:column;
align-items:center;}
.pricing-cards{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:1rem;
margin-bottom:2rem;
width:100%;
align-items:stretch;
grid-auto-rows:1fr;}
.pricing-cards.center-cards{
display:grid !important;
grid-template-columns:repeat(3,280px) !important;
justify-content:center !important;
align-items:stretch !important;
gap:1rem !important;
width:fit-content !important;
max-width:100% !important;
margin-left:auto !important;
margin-right:auto !important;}
.pricing-cards.center-4-cards{
display:grid !important;
grid-template-columns:repeat(4,280px) !important;
justify-content:center !important;
align-items:stretch !important;
gap:1rem !important;
width:fit-content !important;
max-width:100% !important;
margin-left:auto !important;
margin-right:auto !important;
grid-auto-rows:1fr !important;}
.pricing-cards.center-5-cards{
display:grid !important;
grid-template-columns:repeat(5,260px) !important;
justify-content:center !important;
align-items:stretch !important;
gap:1rem !important;
width:fit-content !important;
max-width:100% !important;
margin-left:auto !important;
margin-right:auto !important;
grid-auto-rows:1fr !important;}
@media (max-width:1400px){
.pricing-cards.center-5-cards{
grid-template-columns:repeat(3,280px) !important;}
}
@media (max-width:968px){
.pricing-cards.center-5-cards{
grid-template-columns:repeat(2,280px) !important;}
}
@media (max-width:640px){
.pricing-cards.center-5-cards{
grid-template-columns:1fr !important;}
}
.pricing-cards.center-cards .pricing-card{
width:100% !important;
height:100% !important;}
@media (max-width:1600px){
.pricing-cards{
grid-template-columns:repeat(3,1fr);
align-items:stretch;
grid-auto-rows:1fr;}
.pricing-cards.center-cards{
display:grid !important;
grid-template-columns:repeat(3,280px) !important;
justify-content:center !important;
align-items:stretch !important;
gap:1rem !important;
grid-auto-rows:1fr !important;}
.pricing-cards.center-cards .pricing-card{
width:100% !important;
height:100% !important;}
}
@media (max-width:968px){
.pricing-cards{
grid-template-columns:repeat(2,1fr);
align-items:stretch;
grid-auto-rows:1fr;}
.pricing-cards.center-cards{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:1rem;}
.pricing-cards.center-cards .pricing-card{
flex:0 1 auto;
min-width:200px;}
}
@media (max-width:640px){
.pricing-cards{
grid-template-columns:1fr;}
}
.pricing-card{
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:12px;
padding:1.25rem;
text-align:center;
transition:all 0.3s ease;
position:relative;
display:flex;
flex-direction:column;
height:100%;}
.plan-features{
flex:1 1 auto;
margin-bottom:1rem;
min-height:0;
list-style:none;
padding:0;
margin:0;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;}
.pricing-card .btn-full{
margin-top:auto;}
.pricing-card.featured{
border-color:var(--primary);
box-shadow:0 0 20px rgba(220,38,38,0.2);
transform:scale(1.02);}
.pricing-card:hover{
transform:translateY(-3px);}
.pricing-card.featured:hover{
transform:translateY(-3px) scale(1.02);}
.popular-badge{
position:absolute;
top:-12px;
left:50%;
transform:translateX(-50%);
background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
color:white;
padding:0.35rem 1rem;
border-radius:50px;
font-size:0.75rem;
font-weight:700;
letter-spacing:0.5px;}
.plan-name{
font-size:1.1rem;
font-weight:700;
margin-bottom:0.75rem;
color:var(--text-primary);
flex-shrink:0;
min-height:3.5rem;
display:flex;
align-items:flex-start;
justify-content:center;
line-height:1.4;}
.plan-price{
font-size:1.75rem;
font-weight:800;
color:var(--primary);
margin-bottom:0.25rem;
line-height:1;
flex-shrink:0;}
.plan-price small{
font-size:0.75rem;
color:var(--text-secondary);
font-weight:400;}
.plan-annual{
font-size:0.75rem;
color:var(--text-secondary);
margin-bottom:0.75rem;}
.savings-badge{
display:inline-block;
background:rgba(16,185,129,0.2);
color:#10b981;
padding:0.15rem 0.4rem;
border-radius:4px;
font-size:0.65rem;
font-weight:600;
margin-left:0.25rem;}
.plan-description{
color:var(--text-secondary);
margin-bottom:1rem;
line-height:1.4;
font-size:0.85rem;
min-height:4.5rem;
max-height:4.5rem;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
overflow:hidden;}
.plan-features li{
padding:0.4rem 0;
color:var(--text-secondary);
display:flex;
align-items:center;
justify-content:center;
gap:0.5rem;
border-bottom:1px solid rgba(255,255,255,0.05);
font-size:0.8rem;
text-align:center;
line-height:1.4;
width:100%;}
.plan-features li:last-child{
border-bottom:none;}
.plan-features li:before{
content:"✓";
flex-shrink:0;
color:var(--primary);
font-weight:bold;
flex-shrink:0;
font-size:1.2rem;}
.btn-full{
width:100%;
margin-top:auto;}
.pricing-note{
text-align:center;
color:var(--text-secondary);
font-size:0.9rem;
padding:2rem;}
.pricing-note a{
color:var(--primary);
text-decoration:none;
font-weight:600;}
.pricing-note a:hover{
text-decoration:underline;}
.hosting-difference-section{
padding:5rem 2rem;
background:transparent;
border-top:none;
border-bottom:none;}
.hosting-difference-section .container{
max-width:1400px;
margin:0 auto;}
.difference-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:2rem;
margin-top:3rem;}
.difference-card{
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:20px;
padding:2.5rem;
transition:all 0.3s ease;
display:flex;
flex-direction:column;}
.difference-card:hover{
transform:translateY(-5px);
border-color:var(--primary);
box-shadow:0 10px 30px rgba(220,38,38,0.2);
background:rgba(26,26,26,0.8);}
.difference-icon{
font-size:3rem;
margin-bottom:1.5rem;
line-height:1;}
.difference-card h3{
font-size:1.75rem;
margin-bottom:1rem;
color:var(--text-primary);
font-weight:700;}
.difference-card p{
color:var(--text-secondary);
line-height:1.8;
margin:0;
font-size:1.05rem;}
@media (max-width:968px){
.difference-grid{
grid-template-columns:1fr;
gap:1.5rem;}
.difference-card{
padding:2rem;}
.difference-card h3{
font-size:1.5rem;}
}
.hosting-features-section{
padding:4rem 2rem;
background:transparent;
border-top:none;
border-bottom:none;}
.hosting-features-section .container{
max-width:1400px;
margin:0 auto;}
.feature-card{
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:20px;
padding:2rem;
transition:all 0.3s ease;
display:flex;
flex-direction:column;}
.hosting-features-section .feature-card{
padding:1.25rem;
border-radius:16px;}
.hosting-features-section .feature-card:hover{
transform:translateY(-3px);
border-color:var(--primary);
box-shadow:0 8px 20px rgba(220,38,38,0.15);}
.hosting-features-section .feature-card h3{
font-size:1.125rem;
margin-bottom:0.75rem;
color:var(--text-primary);
min-height:auto;
line-height:1.3;}
.hosting-features-section .feature-card p{
color:var(--text-secondary);
line-height:1.5;
margin:0;
font-size:0.9rem;}
.hosting-features-section .feature-icon{
font-size:1.75rem;
margin-bottom:0.75rem;}
.feature-card:hover{
transform:translateY(-5px);
border-color:var(--primary);
box-shadow:0 10px 30px rgba(220,38,38,0.2);}
.feature-card h3{
font-size:1.5rem;
margin-bottom:1rem;
color:var(--text-primary);
min-height:4rem;
line-height:1.3;}
.feature-card p{
color:var(--text-secondary);
line-height:1.6;
margin:0;}
.support-back-section{
padding:5rem 2rem;
background:transparent;
border-top:none;
border-bottom:none;}
.support-back-section .container{
max-width:1400px;
margin:0 auto;}
.support-back-content{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:2rem;
margin-top:3rem;}
.support-back-card{
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:20px;
padding:2.5rem;
transition:all 0.3s ease;
display:flex;
flex-direction:column;}
.support-back-card:hover{
transform:translateY(-5px);
border-color:var(--primary);
box-shadow:0 10px 30px rgba(220,38,38,0.2);
background:rgba(26,26,26,0.8);}
.support-back-icon{
font-size:3rem;
margin-bottom:1.5rem;
line-height:1;}
.support-back-card h3{
font-size:1.75rem;
margin-bottom:1rem;
color:var(--text-primary);
font-weight:700;}
.support-back-card p{
color:var(--text-secondary);
line-height:1.8;
margin:0;
font-size:1.05rem;}
@media (max-width:968px){
.support-back-content{
grid-template-columns:1fr;
gap:1.5rem;}
.support-back-card{
padding:2rem;}
.support-back-card h3{
font-size:1.5rem;}
}
.hosting-comparison-section{
padding:4rem 2rem;
background:transparent;
border-top:none;
border-bottom:none;}
.hosting-comparison-section .container{
max-width:1400px;
margin:0 auto;}
.technical-groups{
display:flex;
flex-direction:column;
gap:0.25rem;
max-width:780px;
margin:0 auto;}
.technical-group{
background:rgba(26,26,26,0.6);
border:1px solid var(--border);
border-radius:8px;
overflow:hidden;
transition:none;}
.technical-group[open]{
border-color:rgba(220,38,38,0.4);
box-shadow:0 4px 12px rgba(0,0,0,0.25);}
.technical-group,.technical-group *{
animation:none !important;
transition:none !important;}
.technical-group-toggle{
width:100%;
list-style:none;
cursor:pointer;
padding:0.4rem 0.75rem;
display:flex;
align-items:center;
justify-content:space-between;
gap:0.5rem;
font-weight:500;
color:var(--text-primary);
user-select:none;-webkit-tap-highlight-color:transparent;
background:transparent;
border:none;
text-align:left;
font-family:inherit;
font-size:inherit;}
.technical-group-toggle:hover{
opacity:0.9;}
.technical-group summary::-webkit-details-marker{
display:none;}
.technical-group summary:focus-visible{
outline:2px solid var(--primary);
outline-offset:4px;}
.technical-group[open] summary{
border-bottom:1px solid var(--border);}
.technical-group .group-title{
font-size:0.7rem;
letter-spacing:0.05em;
text-transform:uppercase;
opacity:0.85;}
.group-toggle-icon{
font-size:0.7rem;
transition:none;
opacity:0.6;}
.technical-group[open] .group-toggle-icon{
transform:rotate(180deg);
opacity:1;}
.technical-table-wrapper{
overflow-x:auto;
width:min(760px,100%);
margin:0 auto 0.5rem;
padding:0 0.75rem;
contain:layout style;}
.technical-table{
width:100%;
border-collapse:collapse;
table-layout:fixed;
contain:layout style;}
.technical-table td{
padding:0.45rem 0.7rem;
border-bottom:1px solid var(--border);
line-height:1.3;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-align:left;
font-size:0.85rem;
contain:layout style paint;}
.technical-table tr:last-child td{
border-bottom:none;}
.technical-table td:first-child{
color:var(--text-primary);
font-weight:600;
width:36%;
padding-right:1.25rem;
white-space:nowrap;
position:relative;}
.technical-table td:last-child{
color:var(--text-secondary);
padding-left:1rem;
white-space:normal;}
.technical-table .text-muted{
color:rgba(255,255,255,0.35);}
.technical-info-trigger{
margin-left:0.4rem;
display:inline-flex;
align-items:center;
justify-content:center;
width:20px;
height:20px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.5);
background:transparent;
color:rgba(255,255,255,0.85);
font-size:0.75rem;
cursor:pointer;
transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease;}
.technical-info-trigger:hover,.technical-info-trigger:focus-visible{
background:rgba(220,38,38,0.15);
color:#fff;
border-color:rgba(220,38,38,0.45);
outline:none;}
.technical-tooltip{
position:absolute;
z-index:1300;
max-width:260px;
background:rgba(12,12,12,0.95);
border:1px solid rgba(220,38,38,0.4);
border-radius:10px;
padding:0.75rem 0.9rem;
color:var(--text-secondary);
font-size:0.85rem;
line-height:1.5;
box-shadow:0 12px 30px rgba(0,0,0,0.35);
pointer-events:auto;
opacity:0;
transform:translateY(4px);
transition:opacity 0.15s ease,transform 0.15s ease;}
.technical-tooltip.show{
opacity:1;
transform:translateY(0);}
.technical-tooltip::after{
content:'';
position:absolute;
top:-6px;
left:16px;
width:12px;
height:12px;
background:inherit;
border-left:inherit;
border-top:inherit;
transform:rotate(45deg);}
.hosting-cta-section{
text-align:center;
padding:6rem 2rem;
background:transparent;
border-top:none;
border-bottom:none;}
.hosting-cta-section .container{
max-width:800px;
margin:0 auto;}
.hosting-cta-section h2{
font-size:2.5rem;
margin-bottom:1rem;
color:var(--text-primary);}
.hosting-cta-section p{
font-size:1.2rem;
color:var(--text-secondary);
margin-bottom:2rem;}
.cta-buttons{
display:flex;
gap:1rem;
justify-content:center;
flex-wrap:wrap;}
.shared-badge,.reseller-badge,.vps-badge,.wordpress-badge,.dedicated-badge{
display:inline-flex;
align-items:center;
gap:0.5rem;
padding:0.5rem 1rem;
border-radius:50px;
font-size:0.9rem;
margin-bottom:2rem;}
.reseller-badge{
background:rgba(245,158,11,0.1);
border:1px solid rgba(245,158,11,0.3);
color:#fbbf24;}
.vps-badge{
background:rgba(59,130,246,0.1);
border:1px solid rgba(59,130,246,0.3);
color:#60a5fa;}
.wordpress-badge{
background:rgba(0,115,170,0.1);
border:1px solid rgba(0,115,170,0.3);
color:#5eb3d6;}
.dedicated-badge{
background:rgba(139,92,246,0.1);
border:1px solid rgba(139,92,246,0.3);
color:#a78bfa;}
.specs-section,.management-section,.infrastructure-section,.use-cases-section,.benefits-section{
padding:4rem 2rem;}
.specs-grid,.management-grid,.infrastructure-grid,.use-cases-grid,.benefits-grid,.included-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:2rem;
max-width:1200px;
margin:0 auto;}
.infrastructure-section .infrastructure-grid{
grid-template-columns:repeat(3,1fr) !important;}
@media (max-width:1024px){
.infrastructure-section .infrastructure-grid{
grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width:640px){
.infrastructure-section .infrastructure-grid{
grid-template-columns:1fr !important;}
}
.spec-card,.management-card,.benefit-item{
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:15px;
padding:2rem;
text-align:center;}
.spec-icon,.management-icon{
font-size:2.5rem;
margin-bottom:1rem;}
.benefit-number{
display:inline-flex;
align-items:center;
justify-content:center;
width:50px;
height:50px;
background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
border-radius:50%;
color:white;
font-size:1.5rem;
font-weight:700;
margin-bottom:1rem;}
.spec-card h3,.management-card h3,.benefit-item h3{
font-size:1.2rem;
margin-bottom:0.5rem;
color:var(--text-primary);}
.spec-card p,.management-card p,.benefit-item p{
color:var(--text-secondary);
font-size:0.95rem;}
.infrastructure-item{
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:15px;
padding:2rem;
display:flex;
align-items:flex-start;
gap:1rem;}
.infra-icon{
font-size:2.5rem;
flex-shrink:0;}
.infra-content h3{
font-size:1.2rem;
margin-bottom:0.5rem;
color:var(--text-primary);}
.infra-content p{
color:var(--text-secondary);
font-size:0.9rem;
line-height:1.5;}
.use-case-card{
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:20px;
padding:2rem;}
.use-case-card h3{
font-size:1.5rem;
margin-bottom:1rem;
color:var(--text-primary);
display:flex;
align-items:center;
gap:0.75rem;}
.use-case-card ul{
list-style:none;
padding:0;
margin:0;}
.use-case-card li{
padding:0.5rem 0;
color:var(--text-secondary);
display:flex;
align-items:flex-start;
gap:0.5rem;}
.use-case-card li:before{
content:"→";
color:var(--primary);
flex-shrink:0;}
.management-highlight-section{
padding:3.5rem 2rem;
background:transparent;}
.management-highlight-card{
background:rgba(26,26,26,0.65);
backdrop-filter:blur(22px);
border:1px solid rgba(255,255,255,0.08);
border-radius:20px;
padding:2.5rem;
display:grid;
gap:2.5rem;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
align-items:center;}
.management-highlight-copy h2{
font-size:2rem;
margin-bottom:1.25rem;
color:var(--text-primary);}
.management-highlight-copy p{
color:var(--text-secondary);
font-size:0.95rem;
line-height:1.7;}
.management-feature-list{
list-style:none;
padding:0;
margin:0;
display:grid;
gap:0.6rem;}
.management-feature-list li{
position:relative;
padding-left:1.5rem;
color:var(--text-secondary);
font-size:0.95rem;
line-height:1.6;}
.management-feature-list li::before{
content:'✓';
position:absolute;
left:0;
top:0.15rem;
color:var(--primary);
font-size:0.85rem;}
.management-highlight-cta{
background:rgba(220,38,38,0.1);
border:1px solid rgba(220,38,38,0.25);
border-radius:16px;
padding:1.8rem;
display:grid;
gap:1rem;
color:var(--text-secondary);}
.management-price-tag{
display:inline-flex;
align-items:center;
padding:0.4rem 0.9rem;
background:rgba(220,38,38,0.18);
border-radius:999px;
font-weight:600;
letter-spacing:0.06em;
text-transform:uppercase;
color:#fecaca;
font-size:0.82rem;}
.management-highlight-cta p{
font-size:0.9rem;
color:var(--text-secondary);}
.management-highlight-card .btn{
align-self:flex-start;}
@media (max-width:768px){
.management-highlight-card{
padding:2rem;
gap:2rem;}
}
.specs-section,.management-section,.infrastructure-section,.use-cases-section,.benefits-section,.os-section,.included-section,.custom-section,.cta-section{
background:transparent;
border-top:none;
border-bottom:none;}
.os-section{
padding:4rem 2rem;}
.os-grid{
display:grid;
grid-template-columns:repeat(8,minmax(0,1fr));
gap:1rem;
max-width:1100px;
margin:0 auto;}
.os-item{
background:rgba(26,26,26,0.6);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:12px;
padding:1.1rem 0.75rem;
text-align:center;
transition:all 0.3s ease;}
.os-item:hover{
border-color:var(--primary);
transform:translateY(-3px);}
.os-logo{
font-size:2.4rem;
margin-bottom:0.35rem;}
.os-name{
color:var(--text-primary);
font-weight:600;
font-size:0.95rem;
letter-spacing:0.01em;}
@media (max-width:1200px){
.os-grid{
grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
max-width:100%;}
.os-item{
padding:1rem;}
}
.included-section{
padding:4rem 2rem;}
.included-item{
display:flex;
align-items:center;
gap:1rem;
padding:1rem;
background:rgba(26,26,26,0.6);
border:1px solid var(--border);
border-radius:10px;}
.included-icon{
font-size:2rem;
flex-shrink:0;}
.included-text{
color:var(--text-primary);
font-weight:500;}
.custom-section{
background:linear-gradient(135deg,rgba(220,38,38,0.1) 0%,rgba(10,10,10,0.6) 100%);
padding:4rem 2rem;
text-align:center;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);}
.custom-section h2{
font-size:2.5rem;
margin-bottom:1rem;}
.custom-section p{
font-size:1.2rem;
color:var(--text-secondary);
max-width:700px;
margin:0 auto 2rem;}
.cta-section{
text-align:center;
padding:6rem 2rem;
background:var(--background-dark);}
.cta-section h2{
font-size:2.5rem;
margin-bottom:1rem;}
.cta-section p{
font-size:1.2rem;
color:var(--text-secondary);
margin-bottom:2rem;}
footer{
background:var(--background-card);
border-top:1px solid var(--border);
padding:4rem 2rem 0;
margin-top:5rem;
position:relative;
z-index:1;}
.footer-content{
max-width:1400px;
margin:0 auto;
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr 1fr;
gap:3rem;
margin-bottom:3rem;}
.footer-brand{
padding-right:2rem;}
.footer-brand .logo{
margin-bottom:1.5rem;}
.footer-brand .logo img{
height:50px;}
.footer-brand p{
color:var(--text-secondary);
line-height:1.7;
margin-bottom:1.5rem;}
.social-links{
display:flex;
gap:1rem;}
.social-links a{
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
background:rgba(255,255,255,0.05);
border-radius:0.5rem;
color:var(--text-primary);
text-decoration:none;
transition:all 0.3s;
font-size:1.2rem;}
.social-links a:hover{
background:var(--primary);
transform:translateY(-3px);}
.footer-section h4{
font-size:1.1rem;
margin-bottom:1.5rem;
font-weight:600;}
.footer-section ul{
list-style:none;}
.footer-section ul li{
margin-bottom:0.75rem;}
.footer-section a{
color:var(--text-secondary);
text-decoration:none;
transition:all 0.3s;
display:inline-block;}
.footer-section a:hover{
color:var(--primary);
transform:translateX(5px);}
.footer-bottom{
max-width:1400px;
margin:0 auto;
padding:2rem 0;
border-top:1px solid var(--border);
display:flex;
justify-content:space-between;
align-items:center;
color:var(--text-secondary);
font-size:0.9rem;}
.footer-bottom a{
color:var(--primary);
text-decoration:none;
transition:all 0.3s;}
.footer-bottom a:hover{
text-decoration:underline;}
.sister-link{
font-weight:500;}
@media (max-width:1200px){
nav{
grid-template-columns:240px 1fr 240px;}
.nav-links{
gap:0;}
.nav-links>li{
padding:0 1.25rem;}
.nav-links a{
font-size:0.95rem;
padding:0.65rem 0.35rem;}
.testimonials-track{
grid-template-columns:repeat(3,1fr);}
}
@media screen and (max-width:1200px) and (min-width:969px){
nav{
padding:1rem 1.5rem;
gap:1rem;
grid-template-columns:180px 1fr 170px;}
.nav-links>li{
padding:0 0.75rem;}
.nav-links a{
font-size:0.9rem;
padding:0.75rem 0.35rem;}
.nav-actions{
gap:0.5rem;}
.nav-actions .btn{
padding:0.5rem 1rem;
font-size:0.85rem;
flex-shrink:1;}
.currency-selector{
font-size:0.85rem;
padding:0.5rem 0.75rem;
width:auto;
min-width:70px;}
}
@media screen and (max-width:1100px) and (min-width:969px){
nav{
padding:1rem 0.75rem;
gap:0.5rem;
grid-template-columns:160px 1fr 150px;}
.nav-links>li{
padding:0 0.5rem;}
.nav-links a{
font-size:0.85rem;
padding:0.75rem 0.25rem;}
.logo{
max-width:180px;}
.nav-actions{
gap:0.25rem;}
.nav-actions .btn{
padding:0.4rem 0.6rem;
font-size:0.8rem;
flex-shrink:1;
min-width:auto;}
.nav-actions .btn span{
display:none;}
.currency-selector{
font-size:0.8rem;
padding:0.4rem 0.6rem;
width:auto;
min-width:65px;}
}
@media (max-width:768px){
nav{
grid-template-columns:1fr auto;
padding:1rem 1.5rem;}
.logo img{
height:50px;}
nav.scrolled .logo img{
height:45px;}
.nav-links,.nav-actions{
display:none;}
.mobile-menu-btn{
display:inline-flex !important;
align-items:center;
justify-content:center;}
.hero{
padding:6rem 1rem 3rem;}
.section-header h2{
font-size:2rem;}
.services-grid,.features-grid{
grid-template-columns:1fr;}
.use-cases-grid{
grid-template-columns:1fr !important;}
.testimonials-carousel{
padding:0 50px;}
.testimonials-track{
grid-template-columns:repeat(2,1fr);}
.tutorial-layout{
grid-template-columns:1fr;}
.tutorial-sidebar{
position:relative;
top:0;}
.tutorial-main{
padding:2rem;}
.contact-container{
grid-template-columns:1fr;}
.pricing-cards{
grid-template-columns:1fr;}
.pricing-card.featured{
transform:scale(1);}
.pricing-card.featured:hover{
transform:translateY(-5px);}
footer{
padding:3rem 1.5rem 0;}
.footer-content{
grid-template-columns:1fr;
gap:2.5rem;}
.footer-brand{
padding-right:0;}
.footer-bottom{
flex-direction:column;
gap:1rem;
text-align:center;}
.about-section .content-card{
padding:2rem 1.5rem;}
.timeline-item{
flex-direction:column;
gap:0.5rem;}
.timeline-year{
width:auto;}
.legal-content{
padding:2rem 1.5rem;}
}
@media (max-width:640px){
nav{
padding:0.75rem 1rem;}
.logo img{
height:45px;}
.hero-actions{
flex-direction:column;
width:100%;}
.hero-actions .btn{
width:100%;}
.search-container{
flex-direction:column;}
.search-container button{
width:100%;}
.mobile-menu{
max-width:100%;}
.service-card,.feature-item{
padding:1.5rem;}
.testimonials-carousel{
padding:0 40px;}
.testimonials-track{
grid-template-columns:1fr;}
.carousel-nav{
width:40px;
height:40px;}
.carousel-nav svg{
width:20px;
height:20px;}
.tutorials-grid{
grid-template-columns:1fr;}
.contact-info,.contact-form{
padding:2rem 1.5rem;}
.cta-buttons{
flex-direction:column;
align-items:stretch;}
.technical-groups{
gap:0.25rem;
max-width:100%;}
.technical-group summary{
padding:0.4rem 0.7rem;}
.group-toggle-icon{
font-size:0.9rem;}
.technical-table-wrapper{
width:100%;
margin:0 auto 1rem;
padding:0 1rem 1rem;}
.technical-table{
width:100%;}
.technical-table td{
padding:0.55rem 0.75rem;
font-size:0.9rem;
line-height:1.3;
white-space:normal;}
.technical-table td:first-child{
width:auto;
white-space:nowrap;}
.specs-grid,.management-grid,.infrastructure-grid,.use-cases-grid,.benefits-grid,.included-grid,.os-grid{
grid-template-columns:1fr;}
}
.text-center{
text-align:center;}
.text-right{
text-align:right;}
.container{
max-width:1400px;
margin:0 auto;
padding:0 2rem;}
.badge{
display:inline-block;
padding:0.25rem 0.75rem;
border-radius:12px;
font-size:0.85rem;
font-weight:500;}
.badge-info{
background:rgba(59,130,246,0.2);
color:#60a5fa;
border:1px solid rgba(59,130,246,0.3);}
.badge-success{
background:rgba(16,185,129,0.2);
color:#34d399;
border:1px solid rgba(16,185,129,0.3);}
.badge-warning{
background:rgba(245,158,11,0.2);
color:#fbbf24;
border:1px solid rgba(245,158,11,0.3);}
.badge-danger{
background:rgba(239,68,68,0.2);
color:#f87171;
border:1px solid rgba(239,68,68,0.3);}
.badge-active,.badge-published{
background:rgba(16,185,129,0.2);
color:#6ee7b7;
border:1px solid rgba(16,185,129,0.3);}
.badge-inactive,.badge-draft{
background:rgba(156,163,175,0.2);
color:#d1d5db;
border:1px solid rgba(156,163,175,0.3);}
.badge-archived{
background:rgba(239,68,68,0.2);
color:#fca5a5;
border:1px solid rgba(239,68,68,0.3);}
.form-group{
margin-bottom:1.5rem;}
.form-group label{
display:block;
font-weight:600;
margin-bottom:0.5rem;
color:var(--text-primary);}
.form-control{
width:100%;
padding:0.75rem;
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:8px;
color:var(--text-primary);
font-size:0.95rem;
transition:all 0.3s ease;
font-family:inherit;}
.form-control:focus{
outline:none;
border-color:var(--primary);
background:rgba(255,255,255,0.08);
box-shadow:0 0 0 3px rgba(220,38,38,0.1);}
input[type="text"],input[type="number"],input[type="email"],input[type="tel"],input[type="password"],input[type="card"],input[name*="card"],input[name*="Card"],input[id*="card"],input[id*="Card"],input[name*="cvv"],input[name*="CVV"],input[name*="cvc"],input[name*="CVC"],input[name*="expiry"],input[name*="Expiry"],input[name*="exp"],input[name*="Exp"],input[name*="ccnumber"],input[name*="ccnumber"],input[id*="ccnumber"],input[class*="card"],input[class*="Card"]{
pointer-events:auto !important;
position:relative !important;
z-index:10 !important;
background:rgba(255,255,255,0.05) !important;
color:var(--text-primary) !important;-webkit-user-select:text !important;
user-select:text !important;}
#card-element,#card-number,#card-expiry,#card-cvc,[id*="card-element"],[id*="card-number"],[id*="card-expiry"],[id*="card-cvc"]{
pointer-events:auto !important;
position:relative !important;
z-index:10 !important;}
#card-element iframe,#card-number iframe,#card-expiry iframe,#card-cvc iframe,[id*="card-element"] iframe,[id*="card-number"] iframe,[id*="card-expiry"] iframe,[id*="card-cvc"] iframe,#card-element *,#card-number *,#card-expiry *,#card-cvc *{
pointer-events:auto !important;
z-index:10 !important;
position:relative !important;}
#payment-form,#payment-form *{
pointer-events:auto !important;}
form,.form-group,.payment-form,.checkout-form,#payment-form,#checkout-form,fieldset,.payment-fieldset{
position:relative;
z-index:1;}
.bg-gradient,.star-overlay,.grid-overlay{
z-index:-1 !important;
pointer-events:none !important;}
html.customer-portal-page .bg-gradient,html.customer-portal-page .star-overlay,html.customer-portal-page .grid-overlay{
pointer-events:none !important;
z-index:-1 !important;}
.bg-gradient,.star-overlay,.grid-overlay{
pointer-events:none !important;}
input,textarea,select,button,form,fieldset,label{
pointer-events:auto !important;}
.form-control::placeholder{
color:rgba(255,255,255,0.3);}
select.form-control{
cursor:pointer;}
textarea.form-control{
resize:vertical;
min-height:100px;}
.alert{
padding:1rem 1.25rem;
border-radius:10px;
margin-bottom:1.5rem;
font-size:0.9rem;}
.alert-success{
background:rgba(16,185,129,0.1);
border:1px solid rgba(16,185,129,0.3);
color:#6ee7b7;}
.alert-error{
background:rgba(239,68,68,0.1);
border:1px solid rgba(239,68,68,0.3);
color:#fca5a5;}
.alert-warning{
background:rgba(245,158,11,0.1);
border:1px solid rgba(245,158,11,0.3);
color:#fcd34d;}
.alert-info{
background:rgba(59,130,246,0.1);
border:1px solid rgba(59,130,246,0.3);
color:#93c5fd;}
.currency-selector{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.25rem;
padding:0.3rem 0.5rem;
width:90px;
background:rgba(255,255,255,0.05);
border-radius:0.5rem;
cursor:pointer;
font-size:0.85rem;
color:var(--text-primary);
transition:all 0.3s;
user-select:none;
text-align:center;
margin:0 auto;}
.currency-selector:hover{
background:rgba(255,255,255,0.08);}
.currency-dropdown{
position:absolute;
top:100%;
left:50%;
margin-top:0.25rem;
background:var(--background-card);
border:1px solid var(--border);
border-radius:0.5rem;
width:90px;
opacity:0;
visibility:hidden;
transform:translate(-50%,-5px);
transition:all 0.2s ease;
box-shadow:0 10px 40px rgba(0,0,0,0.3);
z-index:100;
pointer-events:none;
padding-top:0.4rem;
margin-top:-0.25rem;}
.currency-selector:hover .currency-dropdown,.currency-dropdown:hover{
opacity:1;
visibility:visible;
transform:translate(-50%,0);
pointer-events:auto;}
.currency-dropdown::before{
content:'';
position:absolute;
top:-0.5rem;
left:0;
right:0;
height:0.5rem;
background:transparent;}
.currency-dropdown a{
display:block;
padding:0.5rem 0.6rem;
color:var(--text-primary);
text-decoration:none;
transition:all 0.3s;
border-bottom:1px solid var(--border);
text-align:center;
font-size:0.85rem;}
.currency-dropdown a:last-child{
border-bottom:none;}
.currency-dropdown a:hover{
background:rgba(220,38,38,0.1);
color:var(--primary);}
html.customer-portal-page .customer-nav~.container{
flex:1;
min-height:60vh;
padding-bottom:2rem;
max-width:1400px !important;
width:100% !important;}
html.customer-portal-page footer{
margin-top:auto;
flex-shrink:0;}
.customer-nav{
background:rgba(10,10,10,0.98);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--border);
padding:1.5rem 0;
margin-bottom:3rem;
position:sticky;
top:0;
z-index:1000;
margin-top:0;
box-shadow:0 2px 10px rgba(0,0,0,0.2);
flex-shrink:0;}
nav.customer-nav,#customer-portal-nav{
position:sticky !important;
top:0 !important;
left:auto !important;
right:auto !important;
background:linear-gradient(180deg,rgba(10,10,10,0.98) 0%,rgba(15,15,15,0.95) 100%) !important;
backdrop-filter:blur(20px) saturate(180%) !important;
border-bottom:1px solid rgba(220,38,38,0.2) !important;
padding:2rem 0 !important;
margin-bottom:3rem !important;
z-index:1000 !important;
box-shadow:0 4px 20px rgba(0,0,0,0.3),0 0 0 1px rgba(220,38,38,0.1) inset !important;
width:100% !important;
text-align:center !important;
display:block !important;
grid-template-columns:none !important;
grid-template-rows:none !important;
align-items:unset !important;
gap:0 !important;
transition:all 0.3s ease !important;
position:relative;}
nav.customer-nav::before,#customer-portal-nav::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:1px;
background:linear-gradient(90deg,transparent,rgba(220,38,38,0.5),transparent);
opacity:0.6;}
nav.customer-nav>.container,#customer-portal-nav>.container,nav.customer-nav>div:first-child,#customer-portal-nav>div:first-child{
max-width:1400px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:0 3rem !important;
text-align:center !important;
display:block !important;}
nav.customer-nav .container,#customer-portal-nav .container{
max-width:1400px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:0 3rem !important;
text-align:center !important;
display:block !important;}
nav.customer-nav .customer-nav-title,#customer-portal-nav .customer-nav-title{
margin-bottom:2rem !important;
text-align:center !important;
display:block !important;
width:100% !important;
position:relative;
padding-bottom:1.5rem;}
nav.customer-nav .customer-nav-title::after{
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:80px;
height:3px;
background:linear-gradient(90deg,transparent,var(--primary),transparent);
border-radius:2px;}
nav.customer-nav .customer-nav-title h2,#customer-portal-nav .customer-nav-title h2{
margin:0 auto 0.75rem auto !important;
font-size:1.75rem !important;
font-weight:800 !important;
background:linear-gradient(135deg,#ffffff 0%,#fca5a5 50%,#dc2626 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;
line-height:1.2 !important;
text-align:center !important;
white-space:nowrap !important;
display:block !important;
width:fit-content !important;
position:relative;
text-shadow:0 0 30px rgba(220,38,38,0.3);}
nav.customer-nav .customer-nav-title .subtitle,#customer-portal-nav .customer-nav-title .subtitle{
font-size:0.9rem !important;
color:rgba(255,255,255,0.7) !important;
font-weight:400 !important;
display:block !important;
text-align:center !important;
white-space:nowrap !important;
margin:0 auto !important;
width:fit-content !important;
text-transform:uppercase;
letter-spacing:0.1em;}
nav.customer-nav .customer-nav-links,#customer-portal-nav .customer-nav-links{
display:flex !important;
flex-direction:row !important;
gap:0.5rem !important;
align-items:center !important;
justify-content:center !important;
flex-wrap:nowrap !important;
margin:0 auto !important;
width:100% !important;
max-width:100% !important;
text-align:center !important;
overflow-x:auto !important;
overflow-y:visible !important;-webkit-overflow-scrolling:touch !important;
scrollbar-width:thin !important;
scrollbar-color:rgba(220,38,38,0.3) transparent !important;
padding-top:4px !important;
padding-bottom:0.5rem !important;}
nav.customer-nav .customer-nav-links::-webkit-scrollbar,#customer-portal-nav .customer-nav-links::-webkit-scrollbar{
height:4px;}
nav.customer-nav .customer-nav-links::-webkit-scrollbar-track,#customer-portal-nav .customer-nav-links::-webkit-scrollbar-track{
background:transparent;}
nav.customer-nav .customer-nav-links::-webkit-scrollbar-thumb,#customer-portal-nav .customer-nav-links::-webkit-scrollbar-thumb{
background:rgba(220,38,38,0.3);
border-radius:2px;}
nav.customer-nav .customer-nav-links::-webkit-scrollbar-thumb:hover,#customer-portal-nav .customer-nav-links::-webkit-scrollbar-thumb:hover{
background:rgba(220,38,38,0.5);}
nav.customer-nav .customer-nav-links a,#customer-portal-nav .customer-nav-links a{
color:rgba(255,255,255,0.8);
text-decoration:none;
padding:0.6rem 1rem;
border-radius:10px;
transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
font-weight:600;
font-size:0.8rem;
white-space:nowrap;
display:inline-flex;
align-items:center;
flex-shrink:0;
gap:0.4rem;
position:relative;
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(10px);
overflow:hidden;}
nav.customer-nav .customer-nav-links a:hover,#customer-portal-nav .customer-nav-links a:hover{
background:rgba(220,38,38,0.15);
color:#ffffff;
border-color:rgba(220,38,38,0.3);
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(220,38,38,0.2);}
nav.customer-nav .customer-nav-links a.active,#customer-portal-nav .customer-nav-links a.active{
background:linear-gradient(135deg,#dc2626 0%,#b91c1c 50%,#991b1b 100%);
color:white;
box-shadow:0 8px 25px rgba(220,38,38,0.4),0 0 20px rgba(220,38,38,0.3);
border-color:rgba(255,255,255,0.2);
position:relative;}
nav.customer-nav .customer-nav-links a.active:hover,#customer-portal-nav .customer-nav-links a.active:hover{
background:linear-gradient(135deg,#ef4444 0%,#dc2626 50%,#b91c1c 100%);
transform:translateY(-3px);
box-shadow:0 12px 30px rgba(220,38,38,0.5),0 0 25px rgba(220,38,38,0.4);}
nav.customer-nav .customer-nav-links a[href*="dashboard"]::before,#customer-portal-nav .customer-nav-links a[href*="dashboard"]::before{
content:'📊 ';
font-size:0.9em;
line-height:1;}
nav.customer-nav .customer-nav-links a[href*="invoices"]::before,#customer-portal-nav .customer-nav-links a[href*="invoices"]::before{
content:'🧾 ';
font-size:0.9em;
line-height:1;}
nav.customer-nav .customer-nav-links a[href*="services"]::before,#customer-portal-nav .customer-nav-links a[href*="services"]::before{
content:'⚙️ ';
font-size:0.9em;
line-height:1;}
nav.customer-nav .customer-nav-links a[href*="domains"]::before,#customer-portal-nav .customer-nav-links a[href*="domains"]::before{
content:'🌐 ';
font-size:0.9em;
line-height:1;}
nav.customer-nav .customer-nav-links a[href*="ssl"]::before,#customer-portal-nav .customer-nav-links a[href*="ssl"]::before{
content:'🔒 ';
font-size:0.9em;
line-height:1;}
nav.customer-nav .customer-nav-links a[href*="profile"]::before,#customer-portal-nav .customer-nav-links a[href*="profile"]::before{
content:'👤 ';
font-size:0.9em;
line-height:1;}
nav.customer-nav .customer-nav-links a[href*="payment"]::before,#customer-portal-nav .customer-nav-links a[href*="payment"]::before{
content:'💳 ';
font-size:0.9em;
line-height:1;}
nav.customer-nav .customer-nav-links a[href*="tickets"]::before,#customer-portal-nav .customer-nav-links a[href*="tickets"]::before{
content:'🎫 ';
font-size:0.9em;
line-height:1;}
nav.customer-nav .customer-nav-links a[href*="logout"]::before,#customer-portal-nav .customer-nav-links a[href*="logout"]::before{
content:'🚪 ';
font-size:0.9em;
line-height:1;}
.customer-form-input,.customer-form-select{
background:rgba(255,255,255,0.05) !important;
border:1px solid rgba(255,255,255,0.1) !important;
border-radius:8px !important;
color:var(--text-primary) !important;
padding:0.75rem !important;
font-size:0.95rem !important;
transition:all 0.3s !important;}
.customer-form-input:focus,.customer-form-select:focus{
outline:none !important;
border-color:var(--primary) !important;
background:rgba(255,255,255,0.08) !important;
box-shadow:0 0 0 3px rgba(220,38,38,0.1) !important;}
.customer-form-select option{
background:#1a1a1a !important;
color:var(--text-primary) !important;}
.customer-portal-view-btn{
display:inline-block;
padding:0.5rem 1rem;
background:rgba(255,255,255,0.1);
border:1px solid rgba(255,255,255,0.2);
border-radius:6px;
color:var(--text-primary);
text-decoration:none;
font-size:0.875rem;
font-weight:500;
transition:all 0.3s;}
.customer-portal-view-btn:hover{
background:rgba(255,255,255,0.15);
border-color:var(--primary);
color:var(--primary) !important;
text-decoration:none;}
/* Customer Mobile Menu Button - Hidden on Desktop */
.customer-mobile-menu-btn{
display:none;
background:none;
border:none;
color:rgba(255,255,255,0.9);
font-size:1.5rem;
cursor:pointer;
padding:0.5rem;
transition:color 0.3s;
position:absolute;
top:50%;
right:1.5rem;
transform:translateY(-50%);
z-index:1001;}
.customer-mobile-menu-btn:hover{
color:#ffffff;}
/* Customer Mobile Menu - Hidden on Desktop */
.customer-mobile-menu{
display:none;
position:fixed;
top:0;
right:-100%;
width:100%;
max-width:400px;
height:100vh;
background:linear-gradient(180deg,rgba(10,10,10,0.98) 0%,rgba(15,15,15,0.95) 100%);
backdrop-filter:blur(20px) saturate(180%);
border-left:1px solid rgba(220,38,38,0.2);
padding:0;
overflow-y:auto;
transition:right 0.3s ease;
z-index:1002;
box-shadow:-5px 0 20px rgba(0,0,0,0.5);}
.customer-mobile-menu.active{
right:0;}
.customer-mobile-menu-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:1.5rem;
border-bottom:1px solid rgba(220,38,38,0.2);
background:rgba(220,38,38,0.1);}
.customer-mobile-menu-header h3{
margin:0;
font-size:1.25rem;
font-weight:700;
background:linear-gradient(135deg,#ffffff 0%,#fca5a5 50%,#dc2626 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;}
.customer-mobile-menu-close{
background:none;
border:none;
color:rgba(255,255,255,0.9);
font-size:2rem;
cursor:pointer;
padding:0;
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:6px;
transition:all 0.3s;}
.customer-mobile-menu-close:hover{
background:rgba(220,38,38,0.2);
color:#ffffff;}
.customer-mobile-menu-content{
padding:1rem 0;}
.customer-mobile-menu-content a{
display:block;
padding:1rem 1.5rem;
color:rgba(255,255,255,0.8);
text-decoration:none;
transition:all 0.3s;
border-left:3px solid transparent;
font-weight:600;
font-size:0.95rem;}
.customer-mobile-menu-content a:hover{
background:rgba(220,38,38,0.15);
color:#ffffff;
border-left-color:var(--primary);
transform:translateX(5px);}
.customer-mobile-menu-content a.active{
background:linear-gradient(135deg,rgba(220,38,38,0.2) 0%,rgba(220,38,38,0.1) 100%);
color:#ffffff;
border-left-color:var(--primary);}
@media (max-width:968px){
.customer-nav .container{
padding:0 1.5rem;
gap:1rem;
position:relative;}
nav.customer-nav,#customer-portal-nav{
padding:1.5rem 0 !important;}
.customer-nav-title h2{
font-size:1.5rem;}
.customer-nav-title .subtitle{
font-size:0.85rem;}
.customer-nav-links{
width:100%;
gap:0.5rem;
flex-wrap:wrap;
justify-content:center;}
.customer-nav-links a{
flex:1 1 auto;
min-width:100px;
text-align:center;
padding:0.75rem 1rem;
font-size:0.9rem;}
nav.customer-nav .customer-nav-links a::before,#customer-portal-nav .customer-nav-links a::before{
font-size:0.9em;}
}
@media (max-width:768px){
nav.customer-nav .customer-nav-links{
display:none !important;}
.customer-mobile-menu-btn{
display:block !important;}
.customer-nav .container{
padding-right:4rem;}
.customer-nav-title{
margin-bottom:0 !important;}
}
.customer-nav-links{
width:100%;
gap:0.5rem;
flex-wrap:wrap;
justify-content:center;}
.customer-nav-links a{
flex:1 1 auto;
min-width:100px;
text-align:center;
padding:0.75rem 1rem;
font-size:0.9rem;}
nav.customer-nav .customer-nav-links a::before,#customer-portal-nav .customer-nav-links a::before{
font-size:0.9em;}
}
.customer-form{
background:rgba(26,26,26,0.6);
padding:2.5rem;
border-radius:16px;
border:1px solid var(--border);}
.customer-form h2{
font-size:1.5rem;
font-weight:700;
margin-bottom:1.5rem;
color:var(--text-primary);
padding-bottom:1rem;
border-bottom:2px solid var(--border);}
.customer-form .form-group{
margin-bottom:1.5rem;}
.customer-form .form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:1.5rem;
margin-bottom:1.5rem;}
.customer-form label{
display:block;
margin-bottom:0.5rem;
font-weight:600;
color:var(--text-primary);
font-size:0.95rem;}
.customer-form input[type="text"],.customer-form input[type="email"],.customer-form input[type="tel"],.customer-form input[type="password"],.customer-form select,.customer-form textarea{
width:100%;
padding:0.875rem 1rem;
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:8px;
color:var(--text-primary);
font-size:1rem;
font-family:inherit;
transition:all 0.3s;}
.customer-form input[type="text"]:focus,.customer-form input[type="email"]:focus,.customer-form input[type="tel"]:focus,.customer-form input[type="password"]:focus,.customer-form select:focus,.customer-form textarea:focus{
outline:none;
border-color:var(--primary);
background:rgba(255,255,255,0.08);
box-shadow:0 0 0 3px rgba(220,38,38,0.1);}
.customer-form input:disabled{
opacity:0.5;
cursor:not-allowed;}
.customer-form small{
display:block;
margin-top:0.5rem;
color:var(--text-secondary);
font-size:0.85rem;
line-height:1.4;}
.customer-login-link{
color:var(--primary);
text-decoration:none;
font-weight:500;
transition:all 0.3s ease;
border-bottom:1px solid transparent;}
.customer-login-link:hover{
color:var(--primary-light);
border-bottom-color:var(--primary-light);
text-decoration:none;}
@media (max-width:768px){
.customer-form .form-row{
grid-template-columns:1fr;
gap:0;}
.customer-form{
padding:1.5rem;}
}
.status-badge{
display:inline-block;
padding:0.4rem 0.9rem;
border-radius:6px;
font-size:0.875rem;
font-weight:600;
text-transform:capitalize;
white-space:nowrap;}
.status-badge.status-badge-draft{
background:rgba(107,114,128,0.2);
color:#9ca3af;
border:1px solid rgba(107,114,128,0.3);}
.status-badge.status-badge-sent{
background:rgba(59,130,246,0.2);
color:#60a5fa;
border:1px solid rgba(59,130,246,0.4);}
.status-badge.status-badge-paid{
background:rgba(16,185,129,0.2);
color:#34d399;
border:1px solid rgba(16,185,129,0.4);}
.status-badge.status-badge-overdue{
background:rgba(239,68,68,0.25);
color:#f87171;
border:1px solid rgba(239,68,68,0.5);}
.status-badge.status-badge-due-now{
background:rgba(245,158,11,0.25);
color:#fbbf24;
border:1px solid rgba(245,158,11,0.5);}
.status-badge.status-badge-cancelled{
background:rgba(156,163,175,0.2);
color:#9ca3af;
border:1px solid rgba(156,163,175,0.3);}