/* =========================================================
   PrintKhata — shared stylesheet
   Reused across every page (index, blogs, calculator, etc.)
   Same visual system as the other PlayCoda products.
   ========================================================= */

:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#3b82f6;
  --accent-2:#48c78e;
  --muted:#9aa4b2;
  --glass: rgba(255,255,255,0.03);
  --max-width:1200px;
  --radius:12px;
  --shadow: 0 10px 30px rgba(2,6,23,0.6);
  --text:#e6eef8;
  --input-bg: rgba(255,255,255,0.02);
  --input-border: rgba(255,255,255,0.08);
  --input-text: var(--text);
  --input-placeholder: rgba(255,255,255,0.5);
  --status-success: #22c55e;
  --status-error: #ef4444;
  --status-info: #3b82f6;
}

/* ---------- Light Theme ---------- */
:root[data-theme="light"]{
  --bg:#f6f8fc;
  --card:#ffffff;
  --glass: rgba(0,0,0,0.04);
  --text:#0f1724;
  --muted:#5b6472;
  --accent:#2563eb;
  --accent-2:#16a34a;
  --shadow: 0 12px 28px rgba(0,0,0,0.12);
  --input-bg: #ffffff;
  --input-border: rgba(0,0,0,0.15);
  --input-text: #0f1724;
  --input-placeholder: rgba(0,0,0,0.5);
  --status-success: #16a34a;
  --status-error: #dc2626;
  --status-info: #2563eb;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto;
  background:
    linear-gradient(
      rgba(5,10,20,0.85),
      rgba(5,10,20,0.92)
    ),
    url('../Images/printbg.webp') center/cover no-repeat fixed;
  color:var(--text);
  line-height:1.5;
}

:root[data-theme="light"] body{
  background:
    linear-gradient(
      rgba(245,247,255,0.92),
      rgba(245,247,255,0.96)
    ),
    url('../Images/printbg.webp') center/cover no-repeat fixed;
}

a{color:var(--accent); text-decoration:none}
.container{max-width:var(--max-width);margin:0 auto;padding:24px;}

/* ---------- Header ---------- */
header.site-header{
  position:sticky; top:0; z-index:60;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(7,11,22,0.55), rgba(7,11,22,0.25));
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

:root[data-theme="light"] header.site-header{
  background: rgba(255,255,255,0.7);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 24px;
  max-width:var(--max-width); margin:0 auto;
}
.brand-link{text-decoration:none;color:inherit}
.brand{display:flex;align-items:center;cursor:pointer;gap:12px}
.brand .logo{
  width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#6ea8ff);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:white;
  box-shadow: var(--shadow);
}
.logo-img{
  width:44px;
  height:44px;
  object-fit:contain;
  border-radius:8px;
}
.brand h1{font-size:16px;margin:0}
nav.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{
  display:inline-block;padding:10px 14px;border-radius:10px;border:none;cursor:pointer;font-weight:600;
  background:transparent;color:var(--text);
}
.btn.cta{background:var(--accent); color:#fff; box-shadow: 0 6px 18px rgba(59,130,246,0.18)}
.btn.secondary{border:1px solid rgba(255,255,255,0.06); color:var(--muted)}
.btn{transition: all 0.25s ease;}
.btn:hover{transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.25);}
.btn.secondary:hover{background: rgba(255,255,255,0.06);}

/* ---------- Section ---------- */
section{margin: 48px 0;}

.pricing{display:flex; gap:20px; margin-top:20px; flex-wrap:wrap;}
.card-pricing{
  padding:20px; border-radius:12px; flex:1; min-width:240px;
  display:flex; flex-direction:column; gap:10px;
}
.card-pricing:hover{
  transform: translateY(-4px);
  transition: all 0.25s ease;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,0.05);
}
.card-pricing ul{padding-left:16px; margin:6px 0;}
.card-pricing li{margin-bottom:6px;}
.card-pricing .btn{margin-top:auto;}
section h3{margin-bottom:16px;}

/* ---------- Hero ---------- */
.hero{
  padding:40px 0 24px;
  display:grid;
  grid-template-columns:1fr 420px;
  gap:32px;
  align-items:center;
}
.hero-left h2{margin-bottom: 10px;}
.hero-left .lead{margin-bottom: 16px;}
.stat-row{margin-top: 18px;}
.bottom-cta{margin-top:10px; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;}
.hero-cta{display: flex; align-items: center; gap: 12px; flex-wrap: wrap;}
.stat{background:var(--glass); padding:10px 12px;border-radius:10px;color:var(--muted); font-size:14px}

.hero-card{padding:18px; border-radius:14px; box-shadow: var(--shadow);}
.dash-img{
  width:100%;height:260px;border-radius:10px;background:
  linear-gradient(90deg, rgba(59,130,246,0.12), rgba(72,199,142,0.06));
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.55);
  font-weight:600;
}

/* ---------- Features ---------- */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:28px 0;}
.feature{padding:18px; border-radius:12px; min-height:110px; display:flex; flex-direction:column; gap:8px;}
.feature .icon{width:44px;height:44px;border-radius:10px;background:rgba(0,0,0,0.14);display:flex;align-items:center;justify-content:center;font-weight:700}

/* ---------- Screenshots (carousel) ---------- */
.screenshots{margin: 28px 0; display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: stretch;}
.carousel{
  height:380px; border-radius:12px;
  background:linear-gradient(180deg,#0b1220,#071024);
  border:1px solid rgba(255,255,255,0.03);
  overflow:hidden; position:relative;
}
.carousel-track{display:flex; height:100%; width:100%; transition:transform 0.6s ease-in-out;}
.carousel-slide{min-width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.carousel-slide img{width:100%; height:100%; object-fit:contain; border-radius:12px;}

.side-features{
  display: flex; flex-direction: column; gap: 12px;
  max-height: 380px; overflow-y: auto; padding-right: 6px;
}
.side-feat{
  padding: 12px 14px; border-radius: 10px; border-left: 3px solid transparent;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--glass); backdrop-filter: blur(6px);
  transition: all 0.25s ease;
}
.side-feat strong{font-size: 14px;}
.side-feat .small{line-height: 1.4;}
.side-feat:hover{transform: translateY(-2px); border-left: 3px solid var(--accent); background: rgba(255,255,255,0.05);}
:root[data-theme="light"] .side-feat:hover{background: rgba(0,0,0,0.04);}

@media (max-width:980px){
  .screenshots{grid-template-columns: 1fr;}
  .side-features{max-height: none; overflow: visible;}
}

/* ---------- Pricing extras ---------- */
.price{font-size:28px;font-weight:700;color:var(--accent)}
.price-sub{color:var(--muted); font-size:14px}

/* ---------- Forms ---------- */
.form-row{display:flex;gap:8px;margin-bottom:10px}
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:10px; border-radius:8px;
  border:1px solid var(--input-border); background:var(--input-bg); color:var(--input-text);
  transition: all 0.2s ease;
}
.form-row input::placeholder, .form-row textarea::placeholder{color: var(--input-placeholder);}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
}
.form-row select{
  appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg fill='%239aa4b2' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5 7l5 5 5-5H5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px;
}
.small{font-size:13px;color:var(--muted)}

/* ---------- Testimonials ---------- */
.testimonials{display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;}
.testimonial{padding: 16px; border-radius: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 110px; transition: all 0.25s ease;}
.testimonial:hover{transform: translateY(-3px);}
.testimonial strong{font-size: 15px;}
.testimonial .small{line-height: 1.5;}
@media (max-width: 900px){ .testimonials{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 560px){ .testimonials{grid-template-columns: 1fr;} }

/* ---------- FAQ ---------- */
.faq{margin:18px 0}
.faq-item{background:rgba(255,255,255,0.02); padding:12px;border-radius:8px;margin-bottom:8px}
.faq-item:hover{
  transform: translateY(-4px); transition: all 0.25s ease;
  border-left: 3px solid var(--accent); background: rgba(255,255,255,0.05);
}

/* ---------- Footer ---------- */
footer{margin-top:36px;padding:30px 0;color:var(--muted);font-size:14px}

/* ---------- Modal ---------- */
.modal{position:fixed;left:0;top:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:120}
.modal.show{display:flex}
.modal-box{
  background: var(--card); color: var(--text); padding: 24px; border-radius: 12px;
  width: 420px; max-width: 95%; display: flex; flex-direction: column; gap: 12px;
  transform: translateY(20px); opacity:0; transition: all 0.25s ease;
}
.modal-box h3{margin: 0 0 4px;}
.modal-box p{margin: 0 0 8px;}
.modal.show .modal-box{transform: translateY(0); opacity:1;}

#demoStatus{font-size:13px;margin-top:10px;transition: all 0.2s ease;}
#demoStatus.success{color: var(--status-success);}
#demoStatus.error{color: var(--status-error);}
#demoStatus.info{color: var(--status-info);}

#leadStatus{font-size: 13px; min-height: 16px;}
#leadStatus.success{ color: var(--status-success); }
#leadStatus.error{ color: var(--status-error); }
#leadStatus.info{ color: var(--status-info); }

.demo-input{
  width:100%; padding:10px; border-radius:8px;
  border:1px solid var(--input-border); background:var(--input-bg); color:var(--input-text);
  transition: all 0.2s ease;
}
.modal-box input{margin-top:8px;}
.lead-form{margin-top: 12px;}
.demoForm{display: flex; flex-direction: column; gap: 10px;}
.demoForm > div:last-of-type{display: flex; gap: 8px; align-items: center;}
.demo-input::placeholder{color: var(--input-placeholder);}
.demo-input:focus{outline:none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59,130,246,0.2);}
.modal h3{margin:0 0 10px}
.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

/* ---------- Responsive ---------- */
@media (max-width:600px){
  .hero-left p.lead{font-size:15px;}
  .btn{padding:12px 16px; font-size:15px;}
  .hero-left h2{font-size:28px;}
}
@media (max-width:980px){
  .hero{grid-template-columns:1fr; padding:22px 0}
  .screenshots{grid-template-columns:1fr; gap:12px}
  .features{grid-template-columns:repeat(2,1fr)}
  .container{padding:14px}
}
@media (max-width:560px){
  .features{grid-template-columns:1fr}
}

.muted{color:var(--muted)}
.center{text-align:center}
.mb8{margin-bottom:8px}

/* ---------- Blogs ---------- */
.blog-section{margin: 40px 0;}
.blog-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;}
.blog-card{padding: 16px; border-radius: 12px; box-shadow: var(--shadow); transition: transform 0.25s ease, background 0.25s ease;}
.blog-card:hover{transform: translateY(-4px); background: rgba(255,255,255,0.05);}
.blog-img{width: 100%; height: 160px; border-radius: 10px; object-fit: cover; margin-bottom: 12px; opacity: 0.95;}
.blog-title{font-size: 18px; font-weight: 600; margin-bottom: 6px;}
.blog-desc{font-size: 14px; color: var(--muted); margin-bottom: 10px;}
.blog-link{font-size: 14px; color: var(--accent); font-weight: 600;}

.feature, .blog-card, .hero-card, .faq-item{background: var(--glass); backdrop-filter: blur(8px);}

@media (max-width: 900px){ .blog-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .blog-grid{ grid-template-columns: 1fr; } }