/* ebook-style.css — professional, responsive, dark theme with accent */
:root{
  --bg: #0f1117;
  --card: rgba(255,255,255,0.04);
  --muted: #bfc7d1;
  --accent: #00d8ff;
  --glass: rgba(255,255,255,0.03);
  --radius: 12px;
  --container: 1100px;
  --gap: 20px;
  --text: #e4e6eb;
  --shadow: 0 8px 30px rgba(0,216,255,0.06);
  --glass-strong: rgba(255,255,255,0.06);
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
html,body{height:100%;}
body{
  background: linear-gradient(180deg,var(--bg), #0b0c10);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  scroll-behavior:smooth;
}

/* Container */
.container{max-width:var(--container);margin:0 auto;padding:36px 20px;}

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:linear-gradient(180deg, rgba(10,11,15,0.55), transparent);backdrop-filter: blur(6px);border-bottom:1px solid rgba(255,255,255,0.03);}
.header-inner{display:flex;align-items:center;gap:16px;justify-content:space-between;}
.brand{font-weight:700;color:var(--text);text-decoration:none;font-size:1.05rem;}
.main-nav ul{display:flex;gap:18px;list-style:none;align-items:center;}
.main-nav a{color:var(--muted);text-decoration:none;padding:10px;border-radius:8px;}
.main-nav a:hover{color:var(--accent);background:var(--glass);transition:all .18s ease;}
.social-links a{color:var(--muted);text-decoration:none;margin-left:10px;font-size:0.95rem;padding:8px;border-radius:8px;}
.social-links a:hover{color:var(--accent);background:var(--glass);}

/* Hero */
.hero{padding:56px 0 28px;}
.hero-grid{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center;}
.hero-text h1{font-size:2rem;margin-bottom:6px;}
.accent{color:var(--accent);}
.lead{color:var(--muted);font-size:1.05rem;margin-bottom:10px;}
.muted{color:var(--muted);font-size:0.95rem;}
.hero-image img{width:260px;height:260px;object-fit:cover;border-radius:18px;border:4px solid rgba(0,216,255,0.06);box-shadow:var(--shadow);}

/* Buttons */
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600;}
.btn.primary{background:linear-gradient(90deg,var(--accent),#00b3e8);color:#051018;border:none;}
.btn.outline{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);}

/* Panels / sections */
.panel{padding:36px 0;}
.bg-soft{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border-top:1px solid rgba(255,255,255,0.02);}

/* About two-column */
.two-col{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start;}
.panel-card{background:var(--card);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow);}

/* Skills list */
.skills-list{list-style:none;padding-left:0;margin-top:8px;}
.skills-list li{padding:8px 0;border-bottom:1px dashed rgba(255,255,255,0.02);color:var(--muted);}

/* Book section */
.book-grid
.book-cover img
.book-sub
.status-row
.badge
.meta
.book-actions
.book-list

/* Book list */
.book-list{list-style:disc;margin-left:18px;color:var(--muted);}

/* Cards grid (projects) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:18px;}
.card{background:var(--card);padding:14px;border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;}
.card img{width:100%;height:110px;object-fit:cover;border-radius:8px;}
.muted-link{color:var(--accent);font-weight:600;text-decoration:none;}

/* Contact grid */
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start;}
.contact-form{display:flex;flex-direction:column;gap:10px;}
.contact-form label{font-size:0.9rem;color:var(--muted);}
.contact-form input, .contact-form textarea{padding:12px;border-radius:10px;border:none;background:rgba(255,255,255,0.03);color:var(--text);outline:none;}
.contact-form input::placeholder, .contact-form textarea::placeholder{color:#9ea7b2;}
.panel-card .social-list{list-style:none;padding-left:0;}
.panel-card .social-list li{margin:8px 0;}
.panel-card .social-list a{color:var(--accent);text-decoration:none;font-weight:600;}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:20px 0;margin-top:40px;color:var(--muted);}

/* Responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:24px;text-align:center;}
  .hero-image img{margin:0 auto;}
  .two-col{grid-template-columns:1fr; gap:18px;}
  .book-grid{grid-template-columns:1fr; text-align:center;}
  .contact-grid{grid-template-columns:1fr; }
  .header-inner{flex-direction:column;gap:12px;padding:12px 0;}
  .main-nav ul{flex-wrap:wrap;justify-content:center;}
}
@media (max-width:480px){
  .brand{font-size:1rem;}
  .hero-text h1{font-size:1.5rem;}
  .hero-image img{width:180px;height:180px;}
}
/* Products section (reuses card system) */
#products .cards {
  margin-top: 20px;
}

.product-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-card img {
  height: 180px;
  object-fit: contain;
  background: rgba(255,255,255,0.02);
  padding: 12px;
}

.product-card h3 {
  font-size: 1.05rem;
}

.product-card p {
  color: var(--muted);
  font-size: 0.95rem;
}

.product-card .price {
  margin-top: 6px;
  font-size: 0.95rem;
  color: var(--accent);
}

.product-card .btn {
  margin-top: 8px;
  text-align: center;
}
.product-card:hover {
  transform: translateY(-3px);
  transition: transform 0.2s ease;
}