/*
Theme Name: Xtreme PC Theme V7.4 Data Backup Section
Version: 7.4
Description: Premium one-page WordPress theme with selectable hero background and data backup graphic.
*/

body{margin:0;font-family:Arial,sans-serif;background:#050505;color:#fff;line-height:1.5}
.topbar{position:fixed;top:24px;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:6px 60px;background:rgba(10,10,10,.92);z-index:999;box-sizing:border-box}
.left-group{display:flex;align-items:center;gap:14px;z-index:2;margin-left:120px}
.top-left img{max-height:82px;width:auto!important}
.phone{font-size:30px;font-weight:800}
.phone a{color:#fff;text-decoration:none}
.banner-middle{position:absolute;left:50%;transform:translateX(-50%);width:68%;display:flex;justify-content:center}
.banner-middle img{max-height:126px;max-width:100%}
.top-right{z-index:2;margin-right:120px}
.top-right img{max-height:82px;width:auto!important}
.container{max-width:1000px;margin:auto}
.hero{min-height:56vh;display:flex;align-items:center;justify-content:center;text-align:center;background-size:cover;background-position:center;padding:170px 20px 35px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(115deg,rgba(255,255,255,.18) 0 1px,transparent 1px 9px),linear-gradient(115deg,rgba(160,210,255,.10) 0 1px,transparent 1px 12px);background-size:90px 180px,130px 220px;animation:rainfall 1.6s linear infinite;opacity:.28;mix-blend-mode:screen}
@keyframes rainfall{from{background-position:0 -220px,0 -260px}to{background-position:-90px 180px,-130px 220px}}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 42%, rgba(255,190,70,.16), transparent 14%),radial-gradient(circle at 62% 38%, rgba(80,180,90,.12), transparent 11%),linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.52));animation:techPulse 4s ease-in-out infinite alternate;mix-blend-mode:screen}
@keyframes techPulse{0%{opacity:.45}50%{opacity:.75}100%{opacity:.50}}
.hero .container{position:relative;z-index:2}
h1{font-size:46px;margin-bottom:10px;line-height:1.05;text-shadow:0 3px 18px rgba(0,0,0,.85)}
.hero p,.section-text{font-size:18px;color:#c8c0ad}
section{padding:24px 20px}
h2{font-size:30px;margin-bottom:8px;text-align:center}
.data-backup-section{text-align:center;padding-top:10px}
.data-backup-section img{max-width:100%;width:850px;border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:16px}
.card{background:#111;padding:20px;border-radius:14px;border:1px solid rgba(255,255,255,.08);text-align:center}
.highlight{background:#101010;border-left:4px solid #b68a2e;padding:20px;border-radius:14px;margin-top:14px}
.cta{text-align:center;padding-bottom:26px}
.cta a{display:inline-block;padding:14px 28px;background:#b30000;border-radius:12px;text-decoration:none;font-size:24px;font-weight:800;color:#fff;box-shadow:0 0 18px rgba(255,0,0,.28)}
.site-footer{text-align:center;padding:18px 20px 26px;color:#858585;font-size:14px;border-top:1px solid rgba(255,255,255,.06);background:#050505}

@media(max-width:768px){
.topbar{top:10px;padding:6px 10px}
.left-group{margin-left:0;gap:8px}
.top-right{margin-right:0}
.top-left img,.top-right img{max-height:46px}
.phone{font-size:16px}
.banner-middle{width:76%;top:4px}
.banner-middle img{max-height:76px}
.hero{padding-top:135px;min-height:42vh}
h1{font-size:30px}
h2{font-size:24px}
}