/*
Theme Name: Benchmark Smart IT
Theme URI: https://benchmarksmartit.com
Description: Modern MSP theme focused on cybersecurity and local IT services
Version: 1.0
Author: Benchmark Smart IT
Author URI: https://benchmarksmartit.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: benchmark-smart-it
*/

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Tahoma,sans-serif;line-height:1.6;color:#333}
header{background:linear-gradient(135deg,#0f2942 0%,#1a4d7a 100%);color:#fff;padding:1rem 0;position:fixed;width:100%;top:0;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,.1)}
nav{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 2rem}
.logo{font-size:1.5rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.logo a{color:#fff;text-decoration:none}
.anniversary{font-size:.8rem;background:#ff6b35;padding:.2rem .6rem;border-radius:20px;margin-left:1rem}
nav ul{display:flex;list-style:none;gap:2rem}
nav a{color:#fff;text-decoration:none;transition:color .3s}
nav a:hover{color:#64b5f6}
.hero{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:150px 2rem 100px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><path d="M10 10h80v80H10z" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/></svg>');opacity:.1}
.hero-content{max-width:900px;margin:0 auto;position:relative;z-index:1}
.hero h1{font-size:3rem;margin-bottom:1rem;animation:fadeInUp 1s ease}
.hero p{font-size:1.3rem;margin-bottom:2rem;animation:fadeInUp 1s ease .2s both}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.cta-button{display:inline-block;background:#fff;color:#667eea;padding:1rem 2.5rem;text-decoration:none;border-radius:50px;font-weight:700;transition:all .3s;animation:fadeInUp 1s ease .4s both;box-shadow:0 4px 15px rgba(0,0,0,.2)}
.cta-button:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.section{padding:80px 2rem;max-width:1200px;margin:0 auto}
.section-title{text-align:center;font-size:2.5rem;margin-bottom:1.5rem;color:#0f2942}
.section-subtitle{text-align:center;font-size:1.2rem;color:#666;max-width:800px;margin:0 auto 3rem}
.pain-points{background:#f8f9fa}
.pain-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:2rem}
.pain-item{background:#fff;padding:1.5rem;border-left:4px solid #e74c3c;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.pain-item strong{color:#e74c3c;font-size:1.1rem}
.benefits-section{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}
.benefits-section .section-title{color:#fff}
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:3rem}
.benefit-card{background:rgba(255,255,255,.1);padding:2rem;border-radius:15px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);transition:all .3s}
.benefit-card:hover{background:rgba(255,255,255,.15);transform:translateY(-5px)}
.benefit-icon{font-size:3rem;margin-bottom:1rem}
.benefit-card h3{font-size:1.3rem;margin-bottom:.5rem}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;margin-top:3rem}
.service-card{background:#fff;padding:2rem;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,.1);transition:all .3s;border-top:4px solid #667eea}
.service-card:hover{transform:translateY(-10px);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.service-icon{font-size:3rem;margin-bottom:1rem}
.service-card h3{color:#0f2942;margin-bottom:1rem;font-size:1.5rem}
.why-us{background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%)}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:2rem}
.feature{background:#fff;padding:2rem;border-radius:12px;text-align:center;box-shadow:0 3px 15px rgba(0,0,0,.08);transition:all .3s}
.feature:hover{transform:translateY(-5px);box-shadow:0 5px 20px rgba(0,0,0,.12)}
.feature-icon{font-size:2.5rem;margin-bottom:1rem}
.feature h3{color:#0f2942;margin-bottom:.5rem}
.getting-started{background:#fff;text-align:center}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-top:3rem;max-width:900px;margin-left:auto;margin-right:auto}
.step-number{width:60px;height:60px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;margin:0 auto 1rem}
.step h3{color:#0f2942;margin-bottom:.5rem}
.contact-section{background:linear-gradient(135deg,#0f2942 0%,#1a4d7a 100%);color:#fff;text-align:center}
.contact-info{display:flex;justify-content:center;gap:3rem;margin-top:2rem;flex-wrap:wrap}
.contact-item{display:flex;align-items:center;gap:1rem}
.contact-item a{color:#fff;text-decoration:none}
.contact-item a:hover{text-decoration:underline}
.contact-icon{font-size:2rem}
footer{background:#1a1a1a;color:#fff;text-align:center;padding:2rem}
@media(max-width:768px){
.hero h1{font-size:2rem}
nav ul{gap:1rem;font-size:.9rem}
.anniversary{display:none}
.services-grid,.features-grid,.benefits-grid{grid-template-columns:1fr}
}