/* Main stylesheet: Futuristic tech theme for Topnogoogle */
:root{
  --bg: #0A0F1F;
  --bg-alt: #0D1326;
  --primary: #2D5BFF; /* provided */
  --secondary: #0F172A; /* provided */
  --neutrals-100: #F1F5F9; /* provided */
  --neutrals-900: #0B1220;
  --text: #CBD5E1;
  --text-strong: #E2E8F0;
  --muted: #94A3B8;
  --accent: #7C3AED; /* futuristic purple accent */
  --success: #22C55E;
  --warning: #EAB308;
  --danger: #EF4444;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --container: 1200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--neutrals-100);text-decoration:none}
a:hover{color:#fff}

.container{max-width:var(--container);padding:0 24px;margin:0 auto}
.section-spacing{padding:96px 0}
.alt-bg{background:linear-gradient(180deg, rgba(13,19,38,0.6), rgba(10,15,31,0.8))}
.left{text-align:left}
.center{text-align:center}
.mt-24{margin-top:24px}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,15,31,.8);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-family:Poppins,Inter,sans-serif;letter-spacing:.4px}
.logo img{width:28px;height:28px}
.nav-toggle{display:none}
.nav-list{display:flex;gap:20px;align-items:center;list-style:none;margin:0;padding:0}
.nav-list a{padding:10px 12px;border-radius:10px;color:var(--text)}
.nav-list a:hover{background:rgba(255,255,255,.06)}

/* Hero */
.hero{position:relative}
.hero:before{content:"";position:absolute;inset:-2px;background:radial-gradient(800px 400px at 10% 10%, rgba(45,91,255,.25), transparent 60%), radial-gradient(600px 300px at 90% 20%, rgba(124,58,237,.18), transparent 60%);filter:blur(30px);z-index:-1}
.hero.hero--bg{background:#0A0F1F center/cover no-repeat}
.hero.hero--bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,15,31,.62), rgba(10,15,31,.85)), radial-gradient(1000px 600px at 10% 20%, rgba(45,91,255,.25), transparent 50%);z-index:0}
.hero.hero--bg .container{position:relative;z-index:1}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-family:Poppins,Inter,sans-serif;font-size:48px;line-height:1.15;color:var(--neutrals-100);margin:12px 0 16px}
.lead{font-size:18px;color:#A8B3C6;max-width:62ch}
.actions{display:flex;gap:14px;margin-top:20px}
.rating-badge{display:flex;align-items:center;gap:10px;margin-top:20px}
.stars span{color:#FBBF24;letter-spacing:2px}
.trust-logos{display:flex;gap:18px;opacity:.85;margin-top:10px}
.trust-logos img{height:24px;filter:grayscale(1) brightness(1.1)}
.hero-media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:linear-gradient(180deg, rgba(45,91,255,.12), rgba(124,58,237,.08))}

/* Cards */
.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:22px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.card:hover{transform:translateY(-3px);transition:transform .2s ease}
.card .icon img{width:36px;height:36px;filter:drop-shadow(0 0 12px rgba(45,91,255,.4));transition:filter .2s ease, transform .2s ease}
.card.service:hover .icon img{filter:drop-shadow(0 0 18px rgba(124,58,237,.55));transform:translateY(-1px)}
.card h3{color:#E8EEFA;margin:10px 0}
.card.service .icon{color:#E2E8F0}
.card ul{margin:10px 0 0 18px;color:#A4B0C3}

/* Portfolio */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.portfolio-card{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03)}
.portfolio-card img{aspect-ratio:16/9;object-fit:cover}
.pc-body{padding:16px}
.pc-body h3{margin:0 0 6px;color:#E8EEFA}

/* Reviews */
.reviews-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.review-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:16px}
.review-head{display:flex;align-items:center;gap:12px}
.review-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg, #2D5BFF, #7C3AED)}
.review-name{font-weight:600;color:#E2E8F0}
.review-stars{color:#FBBF24}
.review-text{color:#B6C2D2;margin-top:8px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:18px}
.step-num{font-family:Poppins,Inter,sans-serif;color:var(--primary);font-weight:700}

/* FAQ */
.faq details{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-sm);padding:14px}
.faq details + details{margin-top:10px}
.faq summary{cursor:pointer;color:#E2E8F0}

/* Contact */
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{margin-bottom:8px}
.contact-form{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:18px}
.contact-form .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label span{display:block;margin-bottom:6px;color:#A8B3C6}
input,select,textarea{width:100%;background:#0C1428;border:1px solid rgba(255,255,255,.08);color:#E2E8F0;border-radius:10px;padding:10px 12px}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:36px 0;background:rgba(8,12,25,.8)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.footer-logo{display:flex;align-items:center;gap:12px}
.footer-grid h4{margin:0 0 10px;color:#E8EEFA}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid a{color:#AFC2D8}
.footer-legal{margin-top:10px;color:#8898AA}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:12px 16px;font-weight:600;border:1px solid transparent}
.btn-primary{background:linear-gradient(135deg, var(--primary), var(--accent));color:white;box-shadow:0 8px 24px rgba(45,91,255,.35)}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.18);color:#E2E8F0}
.btn-ghost{background:transparent;color:#E2E8F0}
.btn-sm{padding:8px 12px}

/* Utilities */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#000;color:#fff;padding:8px;border-radius:6px}