:root{
 --primary:#2563eb;
 --primary-dark:#1d4ed8;
 --primary-light:#3b82f6;
 --primary-pale:#eff6ff;
 --accent:#06b6d4;
 --surface:#ffffff;
 --surface-secondary:#f8fafc;
 --text:#0f172a;
 --text-secondary:#475569;
 --text-muted:#94a3b8;
 --border:#e2e8f0;
 --success:#22c55e;
 --error:#ef4444;
 --shadow-sm:0 1px 2px rgba(0,0,0,0.04);
 --shadow-md:0 4px 12px rgba(0,0,0,0.06);
 --shadow-lg:0 12px 32px rgba(0,0,0,0.08);
}

*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}


.sr-only{
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0, 0, 0, 0);
 white-space:nowrap;
 border:0;
}

html{
 scroll-behavior:smooth;
}

body{
 font-family:'Inter', system-ui, -apple-system, sans-serif;
 background:var(--surface);
 color:var(--text);
 line-height:1.6;
 font-size:16px;
 -webkit-font-smoothing:antialiased;
}

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

img{
 max-width:100%;
 height:auto;
}



nav{
 position:fixed;
 top:0;
 left:0;
 right:0;
 z-index:1000;
 padding:1rem 1.5rem;
 background:rgba(255, 255, 255, 0.92);
 backdrop-filter:blur(12px);
 border-bottom:1px solid var(--border);
 display:flex;
 justify-content:space-between;
 align-items:center;
 transition:all 0.3s ease;
}

nav.scrolled{
 padding:0.75rem 1.5rem;
 box-shadow:var(--shadow-sm);
}

.logo svg{
 height:32px;
 width:auto;
 display:block;
}

.nav-links{
 display:none;
 position:absolute;
 top:100%;
 left:0;
 right:0;
 background:var(--surface);
 flex-direction:column;
 padding:1rem;
 gap:0;
 list-style:none;
 border-bottom:1px solid var(--border);
 box-shadow:var(--shadow-md);
}

.nav-links.active{
 display:flex;
}

.nav-links li{
 border-bottom:1px solid var(--border);
}

.nav-links li:last-child{
 border-bottom:none;
}

.nav-links a{
 display:block;
 padding:1rem;
 color:var(--text-secondary);
 font-size:0.9rem;
 font-weight:500;
 transition:color 0.2s;
}

.nav-links a:hover,
.nav-links a.active{
 color:var(--primary);
}

.nav-toggle{
 display:flex;
 flex-direction:column;
 gap:5px;
 cursor:pointer;
 padding:5px;
 background:transparent;
 border:none;
}

.nav-toggle span{
 width:24px;
 height:2px;
 background:var(--text);
 transition:all 0.3s ease;
}



.btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:0.5rem;
 padding:0.75rem 1.5rem;
 background:var(--primary);
 color:white;
 border:none;
 border-radius:8px;
 font-size:0.9rem;
 font-weight:500;
 font-family:inherit;
 cursor:pointer;
 transition:all 0.2s;
 
 min-height:44px;
}

.btn:hover{
 background:var(--primary-dark);
 transform:translateY(-1px);
 box-shadow:0 4px 12px rgba(37, 99, 235, 0.25);
}


@media (hover:none){
 .btn:active{
 transform:scale(0.98);
 box-shadow:none;
}
}

.btn-secondary{
 background:var(--surface);
 color:var(--text);
 border:1px solid var(--border);
}

.btn-secondary:hover{
 background:var(--surface-secondary);
 border-color:var(--primary);
 box-shadow:none;
}

.btn-large{
 padding:1rem 2rem;
 font-size:1rem;
}

.btn-full{
 width:100%;
}

.text-center{
 text-align:center;
}

.cta-subtitle{
 margin-bottom:2rem;
}



.hero{
 padding:7rem 1.5rem 3rem;
 max-width:1200px;
 margin:0 auto;
 display:grid;
 grid-template-columns:1fr;
 gap:2rem;
 align-items:center;
}

.hero-content h1{
 font-size:2rem;
 font-weight:700;
 line-height:1.15;
 letter-spacing:-0.03em;
 color:var(--text);
 margin-bottom:1.25rem;
}

.hero-content h1 span{
 color:var(--primary);
}

.hero-content p{
 font-size:1rem;
 color:var(--text-secondary);
 margin-bottom:1.5rem;
 line-height:1.7;
}

.hero-buttons{
 display:flex;
 flex-direction:column;
 gap:1rem;
 margin-bottom:2rem;
}

.hero-stats{
 display:flex;
 flex-direction:column;
 gap:1.5rem;
 padding-top:1.5rem;
 border-top:1px solid var(--border);
}

.stat-item{
 display:flex;
 flex-direction:column;
}

.stat-value{
 font-size:1.5rem;
 font-weight:700;
 color:var(--primary);
}

.stat-label{
 font-size:0.85rem;
 color:var(--text-secondary);
}


.hero-visual{
 display:none;
 position:relative;
}

.hero-card{
 background:var(--surface);
 border:1px solid var(--border);
 border-radius:16px;
 padding:2rem;
 box-shadow:var(--shadow-lg);
}

.hero-card-header{
 display:flex;
 align-items:center;
 gap:0.5rem;
 margin-bottom:1.5rem;
 padding-bottom:1rem;
 border-bottom:1px solid var(--border);
}

.dot{
 width:10px;
 height:10px;
 border-radius:50%;
}

.dot-red{background:#ef4444}
.dot-yellow{background:#f59e0b}
.dot-green{background:#22c55e}

.hero-card-title{
 margin-left:auto;
 font-size:0.8rem;
 color:var(--text-secondary);
}

.service-preview{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:1rem;
}

.service-preview-item{
 display:flex;
 align-items:center;
 gap:0.75rem;
 padding:1rem;
 background:var(--surface-secondary);
 border-radius:10px;
 transition:all 0.2s;
}

.service-preview-item:hover{
 background:var(--primary-pale);
}

.service-preview-icon{
 width:40px;
 height:40px;
 background:var(--surface);
 border-radius:8px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:1.2rem;
 box-shadow:var(--shadow-sm);
}

.service-preview-text{
 font-size:0.9rem;
 font-weight:500;
}

.service-preview-sub{
 font-size:0.75rem;
 color:var(--text-secondary);
}

.floating-badge{
 position:absolute;
 background:var(--surface);
 padding:0.75rem 1rem;
 border-radius:10px;
 box-shadow:var(--shadow-md);
 border:1px solid var(--border);
 display:flex;
 align-items:center;
 gap:0.6rem;
 font-size:0.85rem;
 font-weight:500;
 animation:float 4s ease-in-out infinite;
}

.floating-badge-1{
 top:-10px;
 right:-20px;
}

.floating-badge-2{
 bottom:40px;
 left:-30px;
 animation-delay:1.5s;
}

@keyframes float{
 0%, 100%{transform:translateY(0)}
 50%{transform:translateY(-8px)}
}

.badge-icon{
 width:28px;
 height:28px;
 background:var(--primary-pale);
 border-radius:6px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:0.9rem;
}



section{
 padding:3rem 1.5rem;
 max-width:1200px;
 margin:0 auto;
}

.section-full{
 max-width:none;
 padding:3rem 1.5rem;
}

.section-full .container{
 max-width:1200px;
 margin:0 auto;
}

.section-alt{
 background:var(--surface-secondary);
}

.section-header{
 text-align:center;
 margin-bottom:2.5rem;
}

.section-label{
 display:inline-block;
 font-size:0.75rem;
 font-weight:600;
 color:var(--primary);
 background:var(--primary-pale);
 padding:0.35rem 1rem;
 border-radius:100px;
 margin-bottom:0.75rem;
 letter-spacing:0.5px;
}

.section-title{
 font-size:1.75rem;
 font-weight:700;
 letter-spacing:-0.02em;
 margin-bottom:0.75rem;
}

.section-subtitle{
 font-size:1rem;
 color:var(--text-secondary);
 max-width:600px;
 margin:0 auto;
}



.services-grid{
 display:grid;
 grid-template-columns:1fr;
 gap:1.25rem;
}

.service-card{
 background:var(--surface);
 border:1px solid var(--border);
 border-radius:12px;
 padding:1.5rem;
 transition:all 0.25s;
}

.service-card:hover{
 border-color:var(--primary);
 box-shadow:var(--shadow-md);
 transform:translateY(-4px);
}


@media (hover:none){
 .service-card:active{
 border-color:var(--primary);
 transform:scale(0.99);
}
 .service-card:hover{
 transform:none;
}
}

.service-icon{
 width:48px;
 height:48px;
 background:var(--primary-pale);
 border-radius:10px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:1.4rem;
 margin-bottom:1.25rem;
 transition:all 0.25s;
}

.service-card:hover .service-icon{
 background:var(--primary);
 transform:scale(1.05);
}

.service-card:hover .service-icon span{
 filter:grayscale(1) brightness(10);
}

.service-card h3{
 font-size:1.05rem;
 font-weight:600;
 margin-bottom:0.5rem;
}

.service-card p{
 font-size:0.9rem;
 color:var(--text-secondary);
 margin-bottom:1rem;
 line-height:1.6;
}

.service-tags{
 display:flex;
 flex-wrap:wrap;
 gap:0.4rem;
}

.service-tag{
 font-size:0.75rem;
 padding:0.25rem 0.6rem;
 background:var(--surface-secondary);
 border-radius:4px;
 color:var(--text-muted);
}

.service-card-link{
 display:inline-block;
 margin-top:1rem;
 font-size:0.85rem;
 font-weight:500;
 color:var(--primary);
 padding:0.5rem 0;
 transition:color 0.2s;
}

.service-card-link:hover{
 color:var(--primary-dark);
}



.hosting-grid{
 display:grid;
 grid-template-columns:1fr;
 gap:1.5rem;
 max-width:400px;
 margin:0 auto;
}

.hosting-card{
 background:var(--surface);
 border:2px solid var(--border);
 border-radius:16px;
 padding:1.5rem;
 text-align:center;
 transition:all 0.25s;
 position:relative;
}

.hosting-card.featured{
 border-color:var(--primary);
}

.hosting-card.featured::before{
 content:'Empfohlen';
 position:absolute;
 top:-12px;
 left:50%;
 transform:translateX(-50%);
 background:var(--primary);
 color:white;
 font-size:0.7rem;
 font-weight:600;
 padding:0.3rem 1rem;
 border-radius:100px;
}

.hosting-card:hover{
 border-color:var(--primary);
 box-shadow:var(--shadow-lg);
}

.hosting-name{
 font-size:0.8rem;
 font-weight:600;
 color:var(--primary);
 letter-spacing:1px;
 margin-bottom:0.75rem;
}

.hosting-price{
 font-size:2.5rem;
 font-weight:700;
 color:var(--text);
 line-height:1;
}

.hosting-price span{
 font-size:1rem;
 font-weight:500;
 color:var(--text-muted);
}

.hosting-period{
 font-size:0.9rem;
 color:var(--text-muted);
 margin-bottom:1.5rem;
}

.hosting-features{
 list-style:none;
 text-align:left;
 margin-bottom:1.5rem;
}

.hosting-features li{
 display:flex;
 justify-content:space-between;
 padding:0.7rem 0;
 border-bottom:1px solid var(--border);
 font-size:0.9rem;
 color:var(--text-secondary);
}

.hosting-features li:last-child{
 border-bottom:none;
}

.hosting-features strong{
 color:var(--text);
 font-weight:600;
}



.about-grid{
 display:grid;
 grid-template-columns:1fr;
 gap:2rem;
 align-items:center;
}

.about-content h3{
 font-size:1.5rem;
 font-weight:700;
 margin-bottom:1rem;
 letter-spacing:-0.02em;
}

.about-content p{
 color:var(--text-secondary);
 margin-bottom:1rem;
 line-height:1.7;
}

.about-features{
 display:grid;
 grid-template-columns:1fr;
 gap:0.75rem;
 margin-top:1.5rem;
}

.about-feature{
 display:flex;
 align-items:center;
 gap:0.75rem;
 padding:0.9rem 1rem;
 background:var(--surface-secondary);
 border-radius:8px;
}

.about-feature-icon{
 font-size:1.1rem;
}

.about-feature span{
 font-size:0.9rem;
 font-weight:500;
}


.timeline{
 background:var(--surface);
 border:1px solid var(--border);
 border-radius:16px;
 padding:1.5rem;
}

.timeline-item{
 position:relative;
 padding-left:1.75rem;
 padding-bottom:1.75rem;
 border-left:2px solid var(--border);
 margin-left:0.5rem;
}

.timeline-item:last-child{
 padding-bottom:0;
 border-left-color:transparent;
}

.timeline-item::before{
 content:'';
 position:absolute;
 left:-7px;
 top:0;
 width:12px;
 height:12px;
 background:var(--primary);
 border-radius:50%;
 border:2px solid var(--surface);
}

.timeline-year{
 display:inline-block;
 font-size:0.75rem;
 font-weight:600;
 color:var(--primary);
 background:var(--primary-pale);
 padding:0.2rem 0.6rem;
 border-radius:100px;
 margin-bottom:0.4rem;
}

.timeline-title{
 font-weight:600;
 margin-bottom:0.3rem;
 font-size:0.95rem;
}

.timeline-desc{
 font-size:0.85rem;
 color:var(--text-secondary);
 line-height:1.6;
}



.contact-grid{
 display:grid;
 grid-template-columns:1fr;
 gap:2rem;
}

.contact-info h3{
 font-size:1.25rem;
 font-weight:600;
 margin-bottom:1rem;
}

.contact-info > p{
 color:var(--text-secondary);
 margin-bottom:1.5rem;
 line-height:1.7;
}

.contact-card{
 display:flex;
 align-items:center;
 gap:1rem;
 padding:1rem;
 background:var(--surface);
 border:1px solid var(--border);
 border-radius:10px;
 margin-bottom:0.75rem;
 transition:all 0.2s;
}

.contact-card:hover{
 border-color:var(--primary);
}

.contact-card-icon{
 width:42px;
 height:42px;
 background:var(--primary-pale);
 border-radius:8px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:1.1rem;
 flex-shrink:0;
}

.contact-card-content strong{
 display:block;
 font-size:0.9rem;
 margin-bottom:0.15rem;
}

.contact-card-content span{
 font-size:0.85rem;
 color:var(--text-muted);
}


.contact-form{
 background:var(--surface);
 border:1px solid var(--border);
 border-radius:16px;
 padding:1.5rem;
}

.form-row{
 display:grid;
 grid-template-columns:1fr;
 gap:1rem;
}

.form-group{
 margin-bottom:1rem;
}

.form-group label{
 display:block;
 font-size:0.85rem;
 font-weight:500;
 margin-bottom:0.4rem;
 color:var(--text);
}

.form-group input,
.form-group textarea,
.form-group select{
 width:100%;
 padding:0.85rem 1rem;
 background:var(--surface-secondary);
 border:1px solid var(--border);
 border-radius:8px;
 font-family:inherit;
 font-size:16px;
 color:var(--text);
 transition:all 0.2s;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
 color:var(--text-muted);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
 outline:none;
 border-color:var(--primary);
 background:var(--surface);
 box-shadow:0 0 0 3px var(--primary-pale);
}

.form-group textarea{
 min-height:120px;
 resize:vertical;
}


.form-message{
 padding:1rem;
 border-radius:8px;
 margin-bottom:1rem;
 font-size:0.9rem;
}

.form-message.success{
 background:#dcfce7;
 color:#166534;
 border:1px solid #bbf7d0;
}

.form-message.error{
 background:#fee2e2;
 color:#991b1b;
 border:1px solid #fecaca;
}


.hp-field{
 position:absolute;
 left:-9999px;
}



footer{
 background:var(--text);
 color:white;
 padding:3rem 1.5rem;
}

.footer-content{
 max-width:1200px;
 margin:0 auto;
 display:grid;
 grid-template-columns:1fr;
 gap:2rem;
 text-align:center;
}

.footer-brand p{
 color:rgba(255,255,255,0.6);
 font-size:0.9rem;
 margin-top:1rem;
 line-height:1.6;
}

.footer-title{
 font-size:0.85rem;
 font-weight:600;
 margin-bottom:1.25rem;
}

.footer-links{
 list-style:none;
}

.footer-links li{
 margin-bottom:0.6rem;
}

.footer-links a{
 color:rgba(255,255,255,0.6);
 font-size:0.9rem;
 transition:color 0.2s;
}

.footer-links a:hover{
 color:var(--accent);
}

.footer-bottom{
 max-width:1200px;
 margin:2rem auto 0;
 padding-top:1.5rem;
 border-top:1px solid rgba(255,255,255,0.1);
 text-align:center;
 color:rgba(255,255,255,0.4);
 font-size:0.8rem;
}

.footer-bottom a{
 color:rgba(255,255,255,0.6);
 margin:0 0.5rem;
}

.footer-bottom a:hover{
 color:var(--accent);
}



.page-header{
 padding:7rem 1.5rem 2.5rem;
 background:var(--surface-secondary);
 text-align:center;
}

.page-header h1{
 font-size:1.75rem;
 font-weight:700;
 margin-bottom:0.75rem;
 letter-spacing:-0.02em;
}

.page-header p{
 font-size:1rem;
 color:var(--text-secondary);
 max-width:600px;
 margin:0 auto;
}



.legal-content{
 max-width:800px;
 margin:0 auto;
 padding:2.5rem 1.5rem;
}

.legal-content h2{
 font-size:1.35rem;
 font-weight:600;
 margin:1.75rem 0 0.85rem;
 color:var(--text-primary, #0f172a);
}

.legal-content h3{
 font-size:1rem;
 font-weight:600;
 margin:1.25rem 0 0.6rem;
 color:var(--text-primary, #0f172a);
}

.legal-content p{
 color:var(--text-secondary);
 margin-bottom:1rem;
 line-height:1.7;
}

.legal-content ul{
 color:var(--text-secondary);
 margin-bottom:1rem;
 padding-left:1.5rem;
}

.legal-content li{
 margin-bottom:0.5rem;
}


.privacy-table{
 width:100%;
 border-collapse:collapse;
 margin:1rem 0 1.5rem 0;
 font-size:0.9rem;
 background:var(--bg-primary, #ffffff);
 border-radius:8px;
 overflow:hidden;
 border:1px solid var(--border-color, #e2e8f0);
}

.privacy-table th,
.privacy-table td{
 text-align:left;
 padding:0.75rem 1rem;
 border-bottom:1px solid var(--border-color, #e2e8f0);
}

.privacy-table th{
 background:var(--bg-secondary, #f8fafc);
 font-weight:600;
 color:var(--text-primary, #0f172a);
 font-size:0.8rem;
 text-transform:uppercase;
 letter-spacing:0.025em;
}

.privacy-table td{
 color:var(--text-secondary, #475569);
}

.privacy-table tr:last-child td{
 border-bottom:none;
}

.privacy-table td strong{
 color:var(--text-primary, #0f172a);
}

@media (max-width:600px){
 .privacy-table{
 font-size:0.8rem;
}

 .privacy-table th,
 .privacy-table td{
 padding:0.5rem 0.6rem;
}
}



@media (min-width:480px){
 .hero-content h1{
 font-size:2.25rem;
}

 .hero-buttons{
 flex-direction:row;
 flex-wrap:wrap;
}

 .hero-stats{
 flex-direction:row;
 flex-wrap:wrap;
 gap:2rem;
}

 .hosting-price{
 font-size:2.75rem;
}

 .form-row{
 grid-template-columns:1fr 1fr;
}

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



@media (min-width:768px){
 nav{
 padding:1rem 2rem;
}

 nav.scrolled{
 padding:0.75rem 2rem;
}

 .nav-links{
 display:flex;
 position:static;
 flex-direction:row;
 gap:2rem;
 padding:0;
 background:transparent;
 border-bottom:none;
 box-shadow:none;
}

 .nav-links li{
 border-bottom:none;
}

 .nav-links a{
 display:inline;
 padding:0;
}

 .nav-toggle{
 display:none;
}

 .hero{
 padding:8rem 2rem 4rem;
 gap:3rem;
}

 .hero-content h1{
 font-size:2.75rem;
}

 .hero-content p{
 font-size:1.1rem;
}

 section{
 padding:4rem 2rem;
}

 .section-full{
 padding:4rem 2rem;
}

 .section-header{
 margin-bottom:3rem;
}

 .section-label{
 font-size:0.8rem;
}

 .section-title{
 font-size:2rem;
}

 .section-subtitle{
 font-size:1.05rem;
}

 .services-grid{
 grid-template-columns:1fr 1fr;
 gap:1.5rem;
}

 .service-card{
 padding:1.75rem;
}

 .about-grid{
 gap:3rem;
}

 .about-content h3{
 font-size:1.65rem;
}

 .timeline{
 padding:2rem;
}

 .contact-form{
 padding:2rem;
}

 .footer-content{
 grid-template-columns:1fr 1fr;
 text-align:left;
 gap:2.5rem;
}

 footer{
 padding:3.5rem 2rem;
}

 .footer-bottom{
 font-size:0.85rem;
}

 .footer-bottom a{
 margin:0 1rem;
}

 .page-header{
 padding:9rem 2rem 3.5rem;
}

 .page-header h1{
 font-size:2.25rem;
}

 .page-header p{
 font-size:1.05rem;
}

 .legal-content{
 padding:3.5rem 2rem;
}

 .legal-content h2{
 font-size:1.45rem;
 margin:2rem 0 1rem;
}

 .legal-content h3{
 font-size:1.05rem;
 margin:1.5rem 0 0.75rem;
}
}



@media (min-width:1024px){
 nav{
 padding:1rem 4rem;
}

 nav.scrolled{
 padding:0.75rem 4rem;
}

 .nav-links{
 gap:2.5rem;
}

 .hero{
 padding:10rem 4rem 6rem;
 grid-template-columns:1fr 1fr;
 gap:4rem;
}

 .hero-content h1{
 font-size:3.2rem;
 margin-bottom:1.5rem;
}

 .hero-content p{
 font-size:1.15rem;
 margin-bottom:2rem;
}

 .hero-buttons{
 margin-bottom:3rem;
}

 .hero-stats{
 gap:3rem;
 padding-top:2rem;
}

 .hero-visual{
 display:block;
}

 section{
 padding:6rem 4rem;
}

 .section-full{
 padding:6rem 4rem;
}

 .section-header{
 margin-bottom:4rem;
}

 .section-title{
 font-size:2.25rem;
}

 .section-subtitle{
 font-size:1.1rem;
}

 .services-grid{
 grid-template-columns:repeat(4, 1fr);
}

 .hosting-grid{
 grid-template-columns:repeat(3, 1fr);
 max-width:none;
}

 .hosting-card{
 padding:2rem;
}

 .about-grid{
 grid-template-columns:1fr 1fr;
 gap:4rem;
}

 .about-content h3{
 font-size:1.75rem;
 margin-bottom:1.25rem;
}

 .about-features{
 margin-top:2rem;
 gap:1rem;
}

 .contact-grid{
 grid-template-columns:1fr 1.4fr;
}

 .contact-info h3{
 font-size:1.4rem;
}

 .contact-info > p{
 margin-bottom:2rem;
}

 .footer-content{
 grid-template-columns:2fr 1fr 1fr 1fr;
 gap:3rem;
}

 footer{
 padding:4rem;
}

 .footer-bottom{
 margin-top:3rem;
 padding-top:2rem;
}

 .page-header{
 padding:10rem 4rem 4rem;
}

 .page-header h1{
 font-size:2.5rem;
 margin-bottom:1rem;
}

 .page-header p{
 font-size:1.1rem;
}

 .legal-content{
 padding:4rem 2rem;
}

 .legal-content h2{
 font-size:1.5rem;
}

 .legal-content h3{
 font-size:1.1rem;
}
}



@media (hover:none) and (pointer:coarse){
 
 .service-card:hover{
 transform:none;
}

 .hosting-card:hover{
 transform:none;
}

 .btn:hover{
 transform:none;
}

 
 .service-card:active{
 border-color:var(--primary);
 background:var(--primary-pale);
}

 .hosting-card:active{
 border-color:var(--primary);
}

 .btn:active{
 background:var(--primary-dark);
 transform:scale(0.98);
}

 .btn-secondary:active{
 background:var(--surface-secondary);
 border-color:var(--primary);
}

 .contact-card:active{
 border-color:var(--primary);
 background:var(--primary-pale);
}

 .nav-links a:active{
 color:var(--primary);
}

 .footer-links a:active{
 color:var(--accent);
}
}



@media (prefers-reduced-motion:reduce){
 *,
 *::before,
 *::after{
 animation-duration:0.01ms !important;
 animation-iteration-count:1 !important;
 transition-duration:0.01ms !important;
}

 html{
 scroll-behavior:auto;
}

 .floating-badge{
 animation:none;
}
}



.server-configurator{
 max-width:1000px;
 margin:0 auto;
}

.configurator-grid{
 display:grid;
 grid-template-columns:1fr;
 gap:2rem;
}

.configurator-sliders{
 display:flex;
 flex-direction:column;
 gap:1.5rem;
}

.slider-group{
 background:var(--surface);
 border:1px solid var(--border);
 border-radius:12px;
 padding:1.25rem;
}

.slider-header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:1rem;
}

.slider-label{
 display:flex;
 align-items:center;
 gap:0.5rem;
 font-weight:600;
 color:var(--text);
}

.slider-icon{
 width:20px;
 height:20px;
 min-width:20px;
 max-width:20px;
 flex-shrink:0;
 color:var(--primary);
}

.slider-value{
 font-weight:700;
 color:var(--primary);
 font-size:1.1rem;
}

.config-slider{
 width:100%;
 height:8px;
 border-radius:4px;
 background:var(--border);
 outline:none;
 -webkit-appearance:none;
 appearance:none;
 cursor:pointer;
}

.config-slider::-webkit-slider-thumb{
 -webkit-appearance:none;
 appearance:none;
 width:24px;
 height:24px;
 border-radius:50%;
 background:var(--primary);
 cursor:pointer;
 box-shadow:0 2px 8px rgba(37, 99, 235, 0.4);
 transition:transform 0.2s;
}

.config-slider::-webkit-slider-thumb:hover{
 transform:scale(1.1);
}

.config-slider::-moz-range-thumb{
 width:24px;
 height:24px;
 border-radius:50%;
 background:var(--primary);
 cursor:pointer;
 border:none;
 box-shadow:0 2px 8px rgba(37, 99, 235, 0.4);
}

.slider-labels{
 display:flex;
 justify-content:space-between;
 margin-top:0.5rem;
 font-size:0.8rem;
 color:var(--text-secondary);
}

.location-buttons{
 display:flex;
 flex-wrap:wrap;
 gap:0.75rem;
}

.location-btn{
 padding:0.6rem 1rem;
 border:2px solid var(--border);
 border-radius:8px;
 background:var(--surface);
 color:var(--text);
 font-size:0.9rem;
 font-weight:500;
 cursor:pointer;
 transition:all 0.2s;
}

.location-btn:hover{
 border-color:var(--primary);
}

.location-btn.active{
 border-color:var(--primary);
 background:var(--primary);
 color:white;
}


.summary-card{
 background:var(--surface);
 border:2px solid var(--primary);
 border-radius:16px;
 padding:1.5rem;
 position:sticky;
 top:100px;
}

.summary-title{
 font-size:1.1rem;
 font-weight:700;
 margin-bottom:1.25rem;
 color:var(--text);
}

.summary-specs{
 display:flex;
 flex-direction:column;
 gap:0.75rem;
}

.spec-row{
 display:flex;
 justify-content:space-between;
 font-size:0.95rem;
}

.spec-row span{
 color:var(--text-secondary);
}

.spec-row strong{
 color:var(--text);
}

.summary-divider{
 height:1px;
 background:var(--border);
 margin:1.25rem 0;
}

.summary-price{
 text-align:center;
 margin-bottom:1.25rem;
}

.price-label{
 font-size:0.85rem;
 color:var(--text-secondary);
}

.price-amount{
 display:flex;
 align-items:baseline;
 justify-content:center;
 gap:0.25rem;
 margin-top:0.25rem;
}

.price-value{
 font-size:2.5rem;
 font-weight:700;
 color:var(--primary);
}

.price-currency{
 font-size:1.25rem;
 font-weight:600;
 color:var(--text-secondary);
}

.summary-features{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:0.5rem;
 margin-bottom:1.5rem;
}

.feature-item{
 font-size:0.85rem;
 color:var(--text-secondary);
}


.server-location-selector{
 max-width:900px;
 margin:0 auto 2rem;
}

.server-location-selector .location-buttons{
 display:flex;
 justify-content:center;
 flex-wrap:wrap;
 gap:0.75rem;
}


.server-types-table{
 max-width:900px;
 margin:0 auto 2rem;
 background:var(--surface);
 border:1px solid var(--border);
 border-radius:12px;
 overflow:hidden;
}

.server-table-loading{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:0.75rem;
 padding:3rem;
 color:var(--text-muted);
}

.loading-spinner{
 width:24px;
 height:24px;
 border:3px solid var(--border);
 border-top-color:var(--primary);
 border-radius:50%;
 animation:spin 0.8s linear infinite;
}

@keyframes spin{
 to{transform:rotate(360deg)}
}

.server-table{
 width:100%;
 border-collapse:collapse;
}

.server-table thead{
 background:var(--surface-secondary);
}

.server-table th{
 padding:0.875rem 1rem;
 text-align:left;
 font-size:0.75rem;
 font-weight:600;
 color:var(--text-muted);
 text-transform:uppercase;
 letter-spacing:0.05em;
 border-bottom:1px solid var(--border);
}

.server-table th.th-price{
 text-align:right;
}

.server-table tbody tr{
 cursor:pointer;
 transition:background 0.15s;
}

.server-table tbody tr:hover{
 background:var(--primary-pale);
}

.server-table tbody tr:not(:last-child) td{
 border-bottom:1px solid var(--border);
}

.server-table td{
 padding:1rem;
 font-size:0.95rem;
}

.server-table .td-name{
 font-weight:600;
 color:var(--text);
}

.server-table .td-price{
 text-align:right;
 font-weight:700;
 color:var(--primary);
}

.server-table .cpu-badge{
 display:inline-block;
 padding:0.15rem 0.4rem;
 background:var(--surface-secondary);
 border-radius:4px;
 font-size:0.65rem;
 font-weight:600;
 color:var(--text-muted);
 margin-left:0.4rem;
 vertical-align:middle;
}


.server-features-grid{
 display:flex;
 justify-content:center;
 flex-wrap:wrap;
 gap:1.5rem 2.5rem;
 max-width:900px;
 margin:0 auto 2rem;
}

.server-feature{
 display:flex;
 align-items:center;
 gap:0.5rem;
 font-size:0.95rem;
 color:var(--text-secondary);
}

.server-feature .feature-icon{
 color:var(--success);
 font-weight:bold;
}


.server-cta{
 text-align:center;
}


.email-grid{
 display:flex;
 flex-direction:column;
 gap:1.5rem;
 max-width:400px;
 margin:0 auto;
 padding:0 1.5rem;
}


.billing-toggle{
 display:flex;
 gap:0.25rem;
 margin-bottom:1rem;
 padding:3px;
 background:rgba(0, 0, 0, 0.25);
 border-radius:8px;
}

.billing-btn{
 flex:1;
 padding:0.5rem 0.6rem;
 border:none;
 background:transparent;
 border-radius:6px;
 font-size:0.8rem;
 font-weight:600;
 color:rgba(255, 255, 255, 0.9);
 cursor:pointer;
 transition:all 0.2s ease;
}

.billing-btn:hover{
 background:rgba(255, 255, 255, 0.2);
 color:white;
}

.billing-btn.active{
 background:white;
 color:#1e3a5f;
 box-shadow:0 1px 3px rgba(0, 0, 0, 0.15);
}

.discount-badge{
 display:inline-block;
 padding:0.1rem 0.35rem;
 background:#22c55e;
 color:white;
 border-radius:3px;
 font-size:0.65rem;
 font-weight:700;
 margin-left:0.2rem;
 vertical-align:middle;
}


@media (min-width:768px){
 .configurator-grid{
 grid-template-columns:1fr 350px;
}

 .email-grid{
 flex-direction:row;
 justify-content:center;
 max-width:800px;
}

 .email-grid .hosting-card{
 flex:0 1 340px;
}
}

@media (min-width:1024px){
 .configurator-grid{
 grid-template-columns:1fr 380px;
}
}



:root{
 
 --bg-primary:#ffffff;
 --bg-secondary:#f8fafc;
 --bg-tertiary:#f1f5f9;
 --text-primary:#0f172a;
 --text-secondary:#475569;
 --text-muted:#94a3b8;
 --border-color:#e2e8f0;
 --shadow-color:rgba(0, 0, 0, 0.08);
 --card-bg:#ffffff;
 --nav-bg:rgba(255, 255, 255, 0.92);
 --input-bg:#f8fafc;
 --code-bg:#f1f5f9;
 --footer-bg:#0f172a;
 --footer-text:#ffffff;
}

[data-theme="dark"]{
 
 --bg-primary:#0f172a;
 --bg-secondary:#1e293b;
 --bg-tertiary:#334155;
 --text-primary:#f1f5f9;
 --text-secondary:#cbd5e1;
 --text-muted:#94a3b8;
 --border-color:#334155;
 --shadow-color:rgba(0, 0, 0, 0.4);
 --card-bg:#1e293b;
 --nav-bg:rgba(15, 23, 42, 0.95);
 --input-bg:#1e293b;
 --code-bg:#1e293b;
 --footer-bg:#020617;
 --footer-text:#ffffff;

 --primary:#3b82f6;
 --primary-dark:#2563eb;
 --primary-light:#60a5fa;
 --primary-pale:rgba(59, 130, 246, 0.15);
}


body,
nav,
section,
footer,
.service-card,
.hosting-card,
.contact-form,
.contact-card,
.timeline,
.cookie-banner,
.cookie-settings-modal{
 transition:background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}


body{
 background:var(--bg-primary);
 color:var(--text-primary);
}


nav{
 background:var(--nav-bg);
 border-bottom-color:var(--border-color);
}

nav.scrolled{
 box-shadow:0 1px 3px var(--shadow-color);
}

.nav-links a{
 color:var(--text-secondary);
}

.nav-links a:hover,
.nav-links a.active{
 color:var(--primary);
}

.nav-toggle span{
 background:var(--text-primary);
}


.logo-light{display:block}
.logo-dark{display:none}

[data-theme="light"] .logo-light{display:block}
[data-theme="light"] .logo-dark{display:none}

[data-theme="dark"] .logo-light{display:none}
[data-theme="dark"] .logo-dark{display:block}


.nav-login-btn{
 padding:0.4rem 0.9rem !important;
 font-size:0.9rem;
 font-weight:500;
 color:var(--text-secondary);
 border:1px solid var(--border-color);
 border-radius:6px;
 background:transparent;
 transition:all 0.2s;
 white-space:nowrap;
}

.nav-login-btn:hover{
 color:var(--primary) !important;
 border-color:var(--primary);
 background:var(--primary-pale, rgba(37, 99, 235, 0.05));
}


.theme-toggle{
 display:flex;
 align-items:center;
 justify-content:center;
 width:40px;
 height:40px;
 border:1px solid var(--border-color);
 background:var(--bg-secondary);
 border-radius:10px;
 cursor:pointer;
 transition:all 0.2s;
 margin-right:0.75rem;
 flex-shrink:0;
 
 min-width:44px;
 min-height:44px;
}

.theme-toggle:hover{
 background:var(--bg-tertiary);
 border-color:var(--primary);
}


@media (hover:none){
 .theme-toggle:active{
 background:var(--bg-tertiary);
 border-color:var(--primary);
 transform:scale(0.95);
}
}

.theme-toggle svg{
 width:18px;
 height:18px;
 color:var(--text-secondary);
 transition:color 0.2s;
}

.theme-toggle:hover svg{
 color:var(--primary);
}

.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}

[data-theme="dark"] .theme-toggle .icon-sun{display:block}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}


.hero-content h1{
 color:var(--text-primary);
}

.hero-content h1 span{
 color:var(--primary);
}

.hero-content p{
 color:var(--text-secondary);
}

.hero-stats{
 border-top-color:var(--border-color);
}

.stat-value{
 color:var(--primary);
}

.stat-label{
 color:var(--text-muted);
}


.hero-card{
 background:var(--card-bg);
 border-color:var(--border-color);
 box-shadow:0 12px 32px var(--shadow-color);
}

.hero-card-header{
 border-bottom-color:var(--border-color);
}

.hero-card-title{
 color:var(--text-muted);
}

.service-preview-item{
 background:var(--bg-secondary);
}

.service-preview-item:hover{
 background:var(--primary-pale);
}

.service-preview-icon{
 background:var(--bg-primary);
 box-shadow:0 1px 2px var(--shadow-color);
}

.service-preview-text{
 color:var(--text-primary);
}

.service-preview-sub{
 color:var(--text-muted);
}

.floating-badge{
 background:var(--card-bg);
 border-color:var(--border-color);
 box-shadow:0 4px 12px var(--shadow-color);
 color:var(--text-primary);
}

.badge-icon{
 background:var(--primary-pale);
}


.section-header .section-title{
 color:var(--text-primary);
}

.section-header .section-subtitle{
 color:var(--text-secondary);
}

.section-label{
 background:var(--primary-pale);
 color:var(--primary);
}


.section-alt{
 background:var(--bg-secondary);
}


.service-card{
 background:var(--card-bg);
 border-color:var(--border-color);
}

.service-card:hover{
 border-color:var(--primary);
 box-shadow:0 4px 12px var(--shadow-color);
}

.service-card h3{
 color:var(--text-primary);
}

.service-card p{
 color:var(--text-secondary);
}

.service-icon{
 background:var(--primary-pale);
}

.service-card:hover .service-icon{
 background:var(--primary);
}

.service-tag{
 background:var(--bg-secondary);
 color:var(--text-muted);
}


.hosting-card{
 background:var(--card-bg);
 border-color:var(--border-color);
}

.hosting-card:hover{
 border-color:var(--primary);
 box-shadow:0 12px 32px var(--shadow-color);
}

.hosting-card.featured{
 border-color:var(--primary);
}

.hosting-name{
 color:var(--primary);
}

.hosting-price{
 color:var(--text-primary);
}

.hosting-price span{
 color:var(--text-muted);
}

.hosting-period{
 color:var(--text-muted);
}

.hosting-features li{
 border-bottom-color:var(--border-color);
 color:var(--text-secondary);
}

.hosting-features strong{
 color:var(--text-primary);
}


.about-content h3{
 color:var(--text-primary);
}

.about-content p{
 color:var(--text-secondary);
}

.about-feature{
 background:var(--bg-secondary);
 color:var(--text-primary);
}

.about-feature span{
 color:var(--text-primary);
}


.timeline{
 background:var(--card-bg);
 border-color:var(--border-color);
}

.timeline-item{
 border-left-color:var(--border-color);
}

.timeline-item::before{
 background:var(--primary);
 border-color:var(--card-bg);
}

.timeline-year{
 background:var(--primary-pale);
 color:var(--primary);
}

.timeline-title{
 color:var(--text-primary);
}

.timeline-desc{
 color:var(--text-secondary);
}


.contact-info h3{
 color:var(--text-primary);
}

.contact-info > p{
 color:var(--text-secondary);
}

.contact-card{
 background:var(--card-bg);
 border-color:var(--border-color);
}

.contact-card:hover{
 border-color:var(--primary);
}

.contact-card-icon{
 background:var(--primary-pale);
}

.contact-card-content strong{
 color:var(--text-primary);
}

.contact-card-content span{
 color:var(--text-muted);
}


.contact-form{
 background:var(--card-bg);
 border-color:var(--border-color);
}

.form-group label{
 color:var(--text-primary);
}

.form-group input,
.form-group textarea,
.form-group select{
 background:var(--input-bg);
 border-color:var(--border-color);
 color:var(--text-primary);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
 border-color:var(--primary);
 background:var(--bg-primary);
 box-shadow:0 0 0 3px var(--primary-pale);
}

.form-group input::placeholder,
.form-group textarea::placeholder{
 color:var(--text-muted);
}


.form-message.success{
 background:rgba(34, 197, 94, 0.1);
 color:#22c55e;
 border-color:rgba(34, 197, 94, 0.3);
}

.form-message.error{
 background:rgba(239, 68, 68, 0.1);
 color:#ef4444;
 border-color:rgba(239, 68, 68, 0.3);
}


.page-header{
 background:var(--bg-secondary);
}

.page-header h1{
 color:var(--text-primary);
}

.page-header p{
 color:var(--text-secondary);
}


.legal-content h2{
 color:var(--text-primary);
}

.legal-content h3{
 color:var(--text-primary);
}

.legal-content p{
 color:var(--text-secondary);
}

.legal-content ul{
 color:var(--text-secondary);
}

.legal-content a{
 color:var(--primary);
}


footer{
 background:var(--footer-bg);
 color:var(--footer-text);
}

.footer-brand p{
 color:rgba(255, 255, 255, 0.6);
}

.footer-title{
 color:var(--footer-text);
}

.footer-links a{
 color:rgba(255, 255, 255, 0.6);
}

.footer-links a:hover{
 color:var(--accent);
}

.footer-bottom{
 color:rgba(255, 255, 255, 0.4);
 border-top-color:rgba(255, 255, 255, 0.1);
}

.footer-bottom a{
 color:rgba(255, 255, 255, 0.6);
}

.footer-bottom a:hover{
 color:var(--accent);
}


.btn{
 background:var(--primary);
 color:white;
}

.btn:hover{
 background:var(--primary-dark);
}

.btn-secondary{
 background:var(--bg-secondary);
 color:var(--text-primary);
 border-color:var(--border-color);
}

.btn-secondary:hover{
 background:var(--bg-tertiary);
 border-color:var(--primary);
}


.cookie-banner{
 background:var(--card-bg);
 border-top-color:var(--border-color);
 box-shadow:0 -4px 20px var(--shadow-color);
}

.cookie-banner-text h4{
 color:var(--text-primary);
}

.cookie-banner-text p{
 color:var(--text-secondary);
}

.cookie-banner-text a{
 color:var(--primary);
}

.cookie-settings-modal{
 background:var(--card-bg);
}

.cookie-settings-header{
 border-bottom-color:var(--border-color);
}

.cookie-settings-header h3{
 color:var(--text-primary);
}

.cookie-settings-close{
 background:var(--bg-secondary);
 color:var(--text-muted);
}

.cookie-settings-close:hover{
 background:var(--bg-tertiary);
 color:var(--text-primary);
}

.cookie-settings-intro{
 color:var(--text-secondary);
}

.cookie-category{
 background:var(--bg-secondary);
 border-color:var(--border-color);
}

.cookie-category-title{
 color:var(--text-primary);
}

.cookie-category-desc{
 color:var(--text-secondary);
}

.cookie-settings-footer{
 border-top-color:var(--border-color);
}

.cookie-btn-secondary{
 background:var(--bg-secondary);
 color:var(--text-secondary);
 border-color:var(--border-color);
}

.cookie-btn-secondary:hover{
 background:var(--bg-tertiary);
 color:var(--text-primary);
}

.cookie-btn-link{
 color:var(--text-secondary);
}

.cookie-btn-link:hover{
 color:var(--primary);
}


.nav-links{
 background:var(--bg-primary);
 border-bottom-color:var(--border-color);
 box-shadow:0 4px 12px var(--shadow-color);
}

.nav-links li{
 border-bottom-color:var(--border-color);
}


@media (min-width:768px){
 .nav-links{
 background:transparent;
 border-bottom:none;
 box-shadow:none;
}

 .nav-links li{
 border-bottom:none;
}
}


[data-theme="dark"]::-webkit-scrollbar{
 width:10px;
}

[data-theme="dark"]::-webkit-scrollbar-track{
 background:var(--bg-secondary);
}

[data-theme="dark"]::-webkit-scrollbar-thumb{
 background:var(--bg-tertiary);
 border-radius:5px;
}

[data-theme="dark"]::-webkit-scrollbar-thumb:hover{
 background:var(--text-muted);
}


[data-theme="dark"]::selection{
 background:var(--primary);
 color:white;
}


.server-types-table{
 background:var(--card-bg);
 border-color:var(--border-color);
}

.server-table-loading{
 color:var(--text-muted);
}

.loading-spinner{
 border-color:var(--border-color);
 border-top-color:var(--primary);
}

.server-table thead{
 background:var(--bg-secondary);
}

.server-table th{
 color:var(--text-muted);
 border-bottom-color:var(--border-color);
}

.server-table tbody tr:hover{
 background:var(--primary-pale);
}

.server-table tbody tr td{
 border-bottom-color:var(--border-color);
}

.server-table .td-name{
 color:var(--text-primary);
}

.server-table td{
 color:var(--text-secondary);
}

.server-table .td-price{
 color:var(--primary);
}

.server-table .cpu-badge{
 background:var(--bg-tertiary);
 color:var(--text-muted);
}

.server-feature{
 color:var(--text-secondary);
}

.server-feature .feature-icon{
 color:var(--success);
}


[data-theme="dark"] .billing-btn{
 color:rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .billing-btn:hover{
 color:white !important;
}

[data-theme="dark"] .billing-btn.active{
 color:#1e3a5f !important;
 background:white;
}


.slider-group{
 background:var(--card-bg);
 border-color:var(--border-color);
}

.slider-label{
 color:var(--text-primary);
}

.slider-icon{
 color:var(--primary);
}

.slider-value{
 color:var(--primary);
}

.slider-labels{
 color:var(--text-muted);
}

.config-slider{
 background:var(--bg-tertiary);
}

.location-btn{
 background:var(--card-bg);
 border-color:var(--border-color);
 color:var(--text-primary);
}

.location-btn:hover{
 border-color:var(--primary);
}

.location-btn.active{
 background:var(--primary);
 border-color:var(--primary);
 color:white;
}


.summary-card{
 background:var(--card-bg);
 border-color:var(--primary);
}

.summary-title{
 color:var(--text-primary);
}

.spec-row span{
 color:var(--text-secondary);
}

.spec-row strong{
 color:var(--text-primary);
}

.summary-divider{
 background:var(--border-color);
}

.price-label{
 color:var(--text-muted);
}

.price-value{
 color:var(--primary);
}

.price-currency{
 color:var(--text-secondary);
}

.feature-item{
 color:var(--text-secondary);
}




[data-theme="dark"] .config-slider{
 background:var(--bg-tertiary);
}

[data-theme="dark"] .config-slider::-webkit-slider-runnable-track{
 background:var(--bg-tertiary);
}

[data-theme="dark"] .config-slider::-webkit-slider-thumb{
 background:var(--primary);
 box-shadow:0 2px 8px rgba(59, 130, 246, 0.5);
}

[data-theme="dark"] .config-slider::-moz-range-track{
 background:var(--bg-tertiary);
}

[data-theme="dark"] .config-slider::-moz-range-thumb{
 background:var(--primary);
 box-shadow:0 2px 8px rgba(59, 130, 246, 0.5);
}


[data-theme="dark"] .summary-card{
 background:var(--card-bg);
 border-color:var(--primary);
 box-shadow:0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .summary-specs{
 background:var(--bg-secondary);
 border-radius:8px;
}


[data-theme="dark"] .server-configurator{
 background:transparent;
}

[data-theme="dark"] .configurator-sliders{
 background:transparent;
}


[data-theme="dark"] .slider-group{
 background:var(--card-bg);
 border-color:var(--border-color);
 box-shadow:0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .slider-header{
 color:var(--text-primary);
}

[data-theme="dark"] .slider-value{
 color:var(--primary);
 background:var(--primary-pale);
 padding:0.25rem 0.5rem;
 border-radius:4px;
}


[data-theme="dark"] .slider-labels{
 color:var(--text-muted);
}

[data-theme="dark"] .slider-labels span{
 color:var(--text-muted);
}



.cookie-banner{
 position:fixed;
 bottom:0;
 left:0;
 right:0;
 z-index:9999;
 background:#ffffff;
 border-top:1px solid #e2e8f0;
 box-shadow:0 -4px 20px rgba(0, 0, 0, 0.1);
 padding:1.25rem 1rem;
 transform:translateY(100%);
 transition:transform 0.3s ease;
}

.cookie-banner.visible{
 transform:translateY(0);
}

.cookie-banner-content{
 max-width:1200px;
 margin:0 auto;
 display:flex;
 flex-direction:column;
 align-items:stretch;
 gap:1rem;
}

.cookie-banner-text{
 flex:1;
}

.cookie-banner-heading{
 font-size:1rem;
 font-weight:600;
 color:#0f172a;
 margin-bottom:0.5rem;
 display:flex;
 align-items:center;
 gap:0.5rem;
}

.cookie-banner-text p{
 font-size:0.9rem;
 color:#475569;
 line-height:1.6;
 margin:0;
}

.cookie-banner-text a{
 color:#2563eb;
 text-decoration:underline;
}

.cookie-banner-text a:hover{
 color:#1d4ed8;
}

.cookie-banner-actions{
 display:flex;
 gap:0.75rem;
 flex-wrap:wrap;
 justify-content:stretch;
}

.cookie-banner-actions .cookie-btn{
 flex:1;
}

.cookie-banner-actions .cookie-btn-link{
 flex:none;
 width:100%;
}

.cookie-btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 padding:0.7rem 1.25rem;
 border-radius:8px;
 font-size:0.9rem;
 font-weight:500;
 font-family:inherit;
 cursor:pointer;
 transition:all 0.2s;
 border:none;
 white-space:nowrap;
 
 min-height:44px;
}


@media (hover:none){
 .cookie-btn:active{
 transform:scale(0.98);
}
}

.cookie-btn-primary{
 background:#2563eb;
 color:white;
}

.cookie-btn-primary:hover{
 background:#1d4ed8;
}

.cookie-btn-secondary{
 background:#f1f5f9;
 color:#475569;
 border:1px solid #e2e8f0;
}

.cookie-btn-secondary:hover{
 background:#e2e8f0;
 color:#0f172a;
}

.cookie-btn-link{
 background:transparent;
 color:#475569;
 padding:0.7rem 0.5rem;
}

.cookie-btn-link:hover{
 color:#2563eb;
}


.cookie-settings-overlay{
 position:fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 z-index:10000;
 background:rgba(0, 0, 0, 0.5);
 display:flex;
 align-items:center;
 justify-content:center;
 padding:1rem;
 opacity:0;
 visibility:hidden;
 transition:opacity 0.3s ease, visibility 0.3s ease;
}

.cookie-settings-overlay.visible{
 opacity:1;
 visibility:visible;
}

.cookie-settings-modal{
 background:#ffffff;
 border-radius:16px;
 max-width:550px;
 width:100%;
 max-height:90vh;
 overflow-y:auto;
 box-shadow:0 20px 50px rgba(0, 0, 0, 0.2);
 transform:translateY(20px);
 transition:transform 0.3s ease;
}

.cookie-settings-overlay.visible .cookie-settings-modal{
 transform:translateY(0);
}

.cookie-settings-header{
 padding:1.25rem;
 border-bottom:1px solid #e2e8f0;
 display:flex;
 justify-content:space-between;
 align-items:center;
}

.cookie-settings-header h3{
 font-size:1.15rem;
 font-weight:600;
 color:#0f172a;
 margin:0;
}

.cookie-settings-close{
 width:36px;
 height:36px;
 border-radius:8px;
 border:none;
 background:#f1f5f9;
 color:#64748b;
 cursor:pointer;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:1.25rem;
 transition:all 0.2s;
 
 min-width:44px;
 min-height:44px;
}

.cookie-settings-close:hover{
 background:#e2e8f0;
 color:#0f172a;
}

.cookie-settings-body{
 padding:1.25rem;
}

.cookie-settings-intro{
 font-size:0.9rem;
 color:#475569;
 line-height:1.6;
 margin-bottom:1.25rem;
}

.cookie-category{
 background:#f8fafc;
 border:1px solid #e2e8f0;
 border-radius:12px;
 padding:1rem;
 margin-bottom:0.85rem;
}

.cookie-category:last-child{
 margin-bottom:0;
}

.cookie-category-header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:0.5rem;
}

.cookie-category-title{
 font-size:0.95rem;
 font-weight:600;
 color:#0f172a;
}

.cookie-category-desc{
 font-size:0.85rem;
 color:#64748b;
 line-height:1.5;
}


.cookie-toggle{
 position:relative;
 width:48px;
 height:26px;
 
 min-width:48px;
 min-height:26px;
}

.cookie-toggle input{
 opacity:0;
 width:0;
 height:0;
}

.cookie-toggle-slider{
 position:absolute;
 cursor:pointer;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-color:#cbd5e1;
 transition:0.3s;
 border-radius:26px;
}

.cookie-toggle-slider:before{
 position:absolute;
 content:"";
 height:20px;
 width:20px;
 left:3px;
 bottom:3px;
 background-color:white;
 transition:0.3s;
 border-radius:50%;
 box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
}

.cookie-toggle input:checked + .cookie-toggle-slider{
 background-color:#2563eb;
}

.cookie-toggle input:checked + .cookie-toggle-slider:before{
 transform:translateX(22px);
}

.cookie-toggle input:disabled + .cookie-toggle-slider{
 background-color:#22c55e;
 cursor:not-allowed;
}

.cookie-toggle-label{
 font-size:0.75rem;
 color:#64748b;
 margin-left:0.5rem;
}

.cookie-settings-footer{
 padding:1rem 1.25rem;
 border-top:1px solid #e2e8f0;
 display:flex;
 flex-direction:column;
 gap:0.75rem;
}

.cookie-settings-footer .cookie-btn{
 width:100%;
}



@media (min-width:480px){
 .cookie-banner-actions .cookie-btn-link{
 flex:1;
 width:auto;
}

 .cookie-settings-header{
 padding:1.5rem;
}

 .cookie-settings-header h3{
 font-size:1.25rem;
}

 .cookie-settings-body{
 padding:1.5rem;
}

 .cookie-category{
 padding:1.25rem;
 margin-bottom:1rem;
}

 .cookie-settings-footer{
 flex-direction:row;
 padding:1.25rem 1.5rem;
 justify-content:flex-end;
}

 .cookie-settings-footer .cookie-btn{
 width:auto;
}
}



@media (min-width:768px){
 .cookie-banner{
 padding:1.5rem 2rem;
}

 .cookie-banner-content{
 flex-direction:row;
 align-items:center;
 gap:2rem;
 flex-wrap:wrap;
}

 .cookie-banner-text{
 min-width:300px;
}

 .cookie-banner-actions{
 justify-content:flex-end;
}

 .cookie-banner-actions .cookie-btn{
 flex:none;
}

 .cookie-banner-actions .cookie-btn-link{
 flex:none;
 width:auto;
}
}



@media (hover:none) and (pointer:coarse){
 .cookie-btn-primary:active{
 background:#1d4ed8;
}

 .cookie-btn-secondary:active{
 background:#e2e8f0;
 color:#0f172a;
}

 .cookie-btn-link:active{
 color:#2563eb;
}

 .cookie-settings-close:active{
 background:#e2e8f0;
 color:#0f172a;
}
}



.cookie-details{
 margin-top:0.75rem;
 border-top:1px solid #e2e8f0;
 padding-top:0.75rem;
}

.cookie-details summary{
 cursor:pointer;
 color:#2563eb;
 font-size:0.85rem;
 font-weight:500;
 padding:0.5rem 0;
 user-select:none;
}

.cookie-details summary:hover{
 color:#1d4ed8;
}

.cookie-details[open] summary{
 margin-bottom:0.75rem;
}

.cookie-table{
 width:100%;
 border-collapse:collapse;
 font-size:0.8rem;
 margin-bottom:0.75rem;
}

.cookie-table th,
.cookie-table td{
 text-align:left;
 padding:0.5rem 0.4rem;
 border-bottom:1px solid #e2e8f0;
}

.cookie-table th{
 font-weight:600;
 color:#0f172a;
 background:#f1f5f9;
 font-size:0.75rem;
 text-transform:uppercase;
 letter-spacing:0.025em;
}

.cookie-table td{
 color:#475569;
}

.cookie-table tr:last-child td{
 border-bottom:none;
}

.cookie-privacy-note{
 font-size:0.8rem;
 color:#64748b;
 margin-top:0.5rem;
 padding:0.5rem;
 background:#f8fafc;
 border-radius:6px;
}

.cookie-privacy-note a{
 color:#2563eb;
}

.cookie-category-info{
 background:#fefce8;
 border-color:#fef08a;
}


@media (max-width:480px){
 .cookie-table{
 font-size:0.75rem;
}

 .cookie-table th,
 .cookie-table td{
 padding:0.4rem 0.25rem;
}

 
 .cookie-table th:nth-child(2),
 .cookie-table td:nth-child(2){
 display:none;
}
}


[data-theme="dark"] .cookie-banner{
 background:#1e293b;
 border-top-color:#334155;
}

[data-theme="dark"] .cookie-banner-heading{
 color:#f1f5f9;
}

[data-theme="dark"] .cookie-banner-text p{
 color:#94a3b8;
}

[data-theme="dark"] .cookie-settings-modal{
 background:#1e293b;
}

[data-theme="dark"] .cookie-settings-header{
 border-bottom-color:#334155;
}

[data-theme="dark"] .cookie-settings-header h3{
 color:#f1f5f9;
}

[data-theme="dark"] .cookie-settings-intro{
 color:#94a3b8;
}

[data-theme="dark"] .cookie-category{
 background:#0f172a;
 border-color:#334155;
}

[data-theme="dark"] .cookie-category-title{
 color:#f1f5f9;
}

[data-theme="dark"] .cookie-category-desc{
 color:#94a3b8;
}

[data-theme="dark"] .cookie-toggle-slider{
 background-color:#475569;
}

[data-theme="dark"] .cookie-btn-secondary{
 background:#334155;
 color:#e2e8f0;
 border-color:#475569;
}

[data-theme="dark"] .cookie-btn-secondary:hover{
 background:#475569;
}

[data-theme="dark"] .cookie-settings-footer{
 border-top-color:#334155;
}

[data-theme="dark"] .cookie-settings-close{
 background:#334155;
 color:#94a3b8;
}

[data-theme="dark"] .cookie-settings-close:hover{
 background:#475569;
 color:#f1f5f9;
}

[data-theme="dark"] .cookie-details{
 border-top-color:#334155;
}

[data-theme="dark"] .cookie-table th{
 background:#1e293b;
 color:#e2e8f0;
}

[data-theme="dark"] .cookie-table td{
 color:#94a3b8;
 border-bottom-color:#334155;
}

[data-theme="dark"] .cookie-table th,
[data-theme="dark"] .cookie-table td{
 border-bottom-color:#334155;
}

[data-theme="dark"] .cookie-privacy-note{
 background:#0f172a;
 color:#94a3b8;
}

[data-theme="dark"] .cookie-category-info{
 background:#422006;
 border-color:#854d0e;
}