/* =============================================
   HOME PAGE — home.css
   ============================================= */

/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 60%, #fff 100%);
}
.hero-bg-circles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.circle { position:absolute; border-radius:50%; opacity:0.08; }
.c1 { width:500px; height:500px; background:var(--primary); top:-180px; right:-120px; animation: drift 10s ease-in-out infinite; }
.c2 { width:260px; height:260px; background:var(--secondary); bottom:5%; left:-80px; animation: drift 13s ease-in-out infinite 2s; }
.c3 { width:180px; height:180px; background:var(--accent); top:40%; right:12%; animation: drift 8s ease-in-out infinite 1s; }

@keyframes drift {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-28px) scale(1.04); }
}

.hero-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:60px; padding-top:80px; padding-bottom:60px;
}
.hero-text { flex:1; max-width:580px; }

.hero-badge {
  display:inline-block;
  background:linear-gradient(135deg,#fff3cd,#ffe69c);
  color:#856404; padding:8px 20px; border-radius:50px;
  font-size:0.88rem; font-weight:700; margin-bottom:20px;
  border:2px solid #ffc107;
  animation: fadeUp 0.6s ease 0.1s both;
}
.hero-title {
  font-family:var(--font-display); font-size:clamp(2rem,5vw,3.5rem);
  font-weight:800; line-height:1.15; margin-bottom:20px; color:var(--text);
  animation: fadeUp 0.6s ease 0.25s both;
}
.hero-sub {
  font-size:1.08rem; color:var(--text-light); margin-bottom:32px; line-height:1.8;
  animation: fadeUp 0.6s ease 0.4s both;
}
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; animation: fadeUp 0.6s ease 0.55s both; }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Laptop illustration */
.hero-visual { flex:1; display:flex; justify-content:center; animation: fadeUp 0.8s ease 0.3s both; }
.laptop-wrap { width:320px; animation: floatLaptop 4s ease-in-out infinite; }

@keyframes floatLaptop {
  0%,100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-18px) rotate(1.5deg); }
}

.laptop-screen {
  background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);
  border-radius:14px 14px 0 0; border:6px solid #2c2c2c;
  height:200px; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.screen-shine {
  position:absolute; top:-30px; left:-30px; width:120px; height:120px;
  background:radial-gradient(circle, rgba(66,133,244,0.35) 0%, transparent 70%);
  border-radius:50%; animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
.screen-msg {
  font-family:var(--font-display); font-size:1.4rem; font-weight:800;
  color:#fff; text-align:center; position:relative; z-index:1; line-height:1.5;
}
.laptop-hinge { background:linear-gradient(#ccc,#999); height:10px; border:3px solid #888; border-top:none; }
.laptop-base {
  background:linear-gradient(180deg,#ddd,#bbb);
  border-radius:0 0 14px 14px;
  padding:12px 16px; display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
}
.key { background:#fff; border-radius:4px; height:12px; width:28px; box-shadow:0 2px 4px rgba(0,0,0,0.12); }
.key.wide { width:80px; }

/* ===== STATS STRIP ===== */
.stats-strip {
  background:linear-gradient(135deg,var(--primary),#4285f4);
  padding:32px 0;
}
.stats-row {
  display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap;
}
.stat-item { text-align:center; padding:0 40px; }
.stat-num-wrap {
  font-family:var(--font-display); font-size:2.4rem; font-weight:800; color:#fff;
  display:flex; align-items:baseline; gap:3px; justify-content:center;
}
.stat-num-wrap span:last-child { font-size:1.6rem; }
.stat-item p { color:rgba(255,255,255,0.82); font-weight:600; font-size:0.92rem; margin-top:4px; }
.stat-div { width:2px; height:60px; background:rgba(255,255,255,0.2); }

/* ===== TICKER ===== */
.ticker-bar { background:#1a1a2e; overflow:hidden; padding:14px 0; }
.ticker-track {
  display:inline-flex; white-space:nowrap;
  animation: ticker 28s linear infinite;
  color:rgba(255,255,255,0.85); font-weight:700; font-size:0.97rem;
}
.ticker-track span { padding:0 4px; }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ===== QUICK SERVICES ===== */
.qs-section { background:#fff; }
.qs-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.qs-card {
  background:var(--bg); border-radius:var(--radius);
  padding:30px 24px; text-decoration:none; color:var(--text);
  border:2px solid transparent; transition:all 0.3s ease;
  border-top:5px solid transparent; display:block;
}
.qs-card[data-color="blue"]   { border-top-color:var(--primary); }
.qs-card[data-color="green"]  { border-top-color:var(--green); }
.qs-card[data-color="orange"] { border-top-color:var(--secondary); }
.qs-card[data-color="purple"] { border-top-color:var(--purple); }
.qs-card[data-color="red"]    { border-top-color:var(--red); }
.qs-card[data-color="teal"]   { border-top-color:var(--teal); }
.qs-card:hover { transform:translateY(-8px); box-shadow:var(--card-shadow); border-color:#e8f0fe; background:#fff; }
.qs-icon { font-size:2.8rem; margin-bottom:14px; }
.qs-card h3 { font-family:var(--font-display); font-size:1.2rem; font-weight:800; margin-bottom:6px; }
.qs-card p  { color:var(--text-light); font-size:0.93rem; }

/* ===== BRANDS ===== */
.brands-section { background:var(--bg); }
.brands-row { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.brand-pill {
  padding:14px 32px; border-radius:50px;
  font-size:1.1rem; font-weight:900; letter-spacing:1px;
  transition:all 0.3s; cursor:default;
}
.brand-pill.dell   { background:#007db8; color:#fff; }
.brand-pill.lenovo { background:#e2231a; color:#fff; }
.brand-pill.asus   { background:#00539b; color:#fff; font-style:italic; }
.brand-pill.acer   { background:#83b81a; color:#fff; }
.brand-pill.hp     { background:#0096d6; color:#fff; }
.brand-pill.apple  { background:#111; color:#fff; }
.brand-pill:hover  { transform:translateY(-4px) scale(1.06); box-shadow:0 8px 24px rgba(0,0,0,0.2); }

/* ===== WHY US ===== */
.why-strip { background:#fff; }
.why-grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.why-card  {
  background:var(--bg); border-radius:var(--radius); padding:28px 20px;
  text-align:center; border:2px solid transparent; transition:all 0.3s;
}
.why-card:hover { border-color:var(--primary); background:#fff; transform:translateY(-5px); box-shadow:var(--card-shadow); }
.why-icon { font-size:2.4rem; margin-bottom:12px; }
.why-card h4 { font-family:var(--font-display); font-size:1.1rem; font-weight:800; margin-bottom:8px; }
.why-card p  { color:var(--text-light); font-size:0.92rem; }

/* ===== CTA BANNER ===== */
.cta-banner { background:linear-gradient(135deg,#1a1a2e,#16213e); padding:70px 0; }
.cta-inner  {
  display:flex; align-items:center; justify-content:space-between;
  gap:30px; flex-wrap:wrap;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius); padding:44px 48px;
}
.cta-text h2 { font-family:var(--font-display); font-size:1.8rem; font-weight:800; color:#fff; margin-bottom:10px; }
.cta-text p  { color:rgba(255,255,255,0.72); font-size:1rem; }
.cta-btns    { display:flex; gap:14px; flex-wrap:wrap; }

/* ===== RESPONSIVE ===== */
@media (max-width:900px) {
  .hero-inner { flex-direction:column; text-align:center; padding-top:100px; }
  .hero-btns  { justify-content:center; }
  .hero-visual { display:none; }
  .qs-grid   { grid-template-columns:1fr 1fr; }
  .why-grid  { grid-template-columns:1fr 1fr; }
  .stats-row { gap:10px; }
  .stat-item { padding:0 20px; }
}
@media (max-width:600px) {
  .qs-grid   { grid-template-columns:1fr; }
  .why-grid  { grid-template-columns:1fr 1fr; }
  .cta-inner { flex-direction:column; text-align:center; padding:30px 20px; }
  .stat-div  { display:none; }
  .stat-item { padding:10px 20px; }
}