/*
Theme Name: Auriqon Theme
Author: Minhazul Haque
Description: Auriqon App Landing Page Theme based on provided HTML
Version: 1.0
*/

/* ====== BASIC RESET ====== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter, "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:#f4f9ff;color:#0b1b2b;line-height:1.45}

/* ====== HEADER ====== */
.topbar{background:#fff;border-bottom:1px solid #eef3fb;position:sticky;top:0;z-index:999}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,#0b6ef6,#7c3aed);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:18px}
.brand h1{font-size:18px;color:#072144; margin: 0;}
.menu{display:flex;gap:18px;align-items:center; list-style: none;}
.menu li {display: inline-block;}
.menu a{color:#2b3b55;text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px; display: inline-block;}
.menu a.cta{background:linear-gradient(90deg,#0b6ef6,#00aaff);color:#fff}
.menu a:hover{opacity:0.95}

/* ====== HERO ====== */
.hero{display:grid;grid-template-columns:1fr 480px;gap:30px;align-items:center;padding:64px 20px}
.hero-left h2{font-size:34px;color:#072144;margin-bottom:12px}
.hero-left p{color:#475b7a;margin-bottom:18px;font-size:16px}
.kpis{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.kpi{background:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 8px 24px rgba(11,110,246,0.06);min-width:150px}
.kpi b{display:block;color:#0b6ef6;font-size:18px}
.hero-ctas{display:flex;gap:12px;margin-top:18px}
.btn{padding:12px 18px;border-radius:12px;border:none;cursor:pointer;font-weight:700; text-decoration: none; display: inline-block;}
.btn.primary{background:linear-gradient(90deg,#0b6ef6,#00aaff);color:#fff}
.btn.ghost{background:transparent;border:1px solid #dbeafe;color:#0b2540}
.screenshot{background:linear-gradient(180deg,#fff,#f8fbff);padding:18px;border-radius:18px;box-shadow:0 30px 70px rgba(11,110,246,0.06)}
.screenshot img{width:100%;border-radius:12px;display:block}

/* QR & download area */
.download-box{display:flex;gap:12px;align-items:center;margin-top:18px}
.qr{width:100px;height:100px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(11,110,246,0.06)}
.dl-links{display:flex;flex-direction:column;gap:8px}

/* ====== FEATURE GRID ====== */
.features{padding:36px 20px;background:#f7fbff}
.features h3{text-align:center;margin-bottom:18px;color:#072144}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;max-width:1200px;margin:0 auto}
.feature-card{background:#fff;padding:18px;border-radius:14px;box-shadow:0 12px 30px rgba(11,110,246,0.04)}
.feature-card h4{color:#0b6ef6;margin-bottom:8px}

/* ====== WHY CHOOSE / BIG HIGHLIGHTS ====== */
.why{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:36px 20px}
.why .big{background:linear-gradient(180deg,#fff,#f2fbff);padding:20px;border-radius:14px;box-shadow:0 12px 30px rgba(11,110,246,0.04)}
.pros{display:flex;flex-direction:column;gap:12px}
.pro{display:flex;gap:12px;align-items:flex-start}

/* ====== DETAILED SECTIONS ====== */
section.detail{padding:36px 20px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}
.detail-cards{display:grid;gap:12px}

/* ====== PRICING ====== */
.pricing{padding:36px 20px;background:linear-gradient(180deg,#f8fbff,#ffffff)}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;max-width:1100px;margin:0 auto}
.plan{background:#fff;border-radius:12px;padding:18px;box-shadow:0 12px 30px rgba(11,110,246,0.04);text-align:center}
.plan h4{color:#0b6ef6}

/* ====== TESTIMONIALS ====== */
.testimonials{padding:36px 20px}
.t-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}

/* ====== FAQ ====== */
.faq{padding:36px 20px;background:#f7fbff}

/* ====== CONTACT ====== */
.contact{padding:36px 20px}
.contact .flex{display:grid;grid-template-columns:1fr 420px;gap:18px}

/* ====== FOOTER ====== */
footer{background:#072144;color:#fff;padding:28px 20px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;max-width:1200px;margin:0 auto}
.footer-grid a {text-decoration: none;}

/* ====== RESPONSIVE ====== */
@media(max-width:980px){
  .hero{grid-template-columns:1fr; padding:36px 20px}
  .two-col{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .contact .flex{grid-template-columns:1fr}
  .nav {height: auto; flex-direction: column; padding: 10px 0;}
  .menu {flex-wrap: wrap; justify-content: center; padding-top: 10px;}
}

/* small helpers */
.muted{color:#6b7280}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#eef4ff;color:#0b6ef6;font-weight:700}
.center{text-align:center}
.mb-12{margin-bottom:12px}
.mb-18{margin-bottom:18px}

.custom-logo { max-height: 48px; width: auto; }