/* styles.css - F&I Studio landing (blue / black / white), modern startup feel */
:root{
  --blue:#1D4ED8;
  --blue-dark:#0f172a;
  --white:#ffffff;
  --glass: rgba(255,255,255,0.06);
  --card: rgba(255,255,255,0.04);
  --accent: #60a5fa;
  --max-width: 1100px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(2,6,23,0.6);
  --glass-border: rgba(255,255,255,0.06);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
body{background:linear-gradient(180deg,var(--blue-dark) 0%, #000000 55%); color:var(--white); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

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

/* Hero */
.hero{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:56px 0;}
.hero-left{flex:1}
.logo{width:140px;height:auto;display:block;margin-bottom:18px;filter:drop-shadow(0 6px 18px rgba(0,0,0,0.6));}
.h-title{font-size:2.3rem;line-height:1.02;margin:0 0 12px;font-weight:800; background: linear-gradient(90deg,var(--blue),var(--white)); -webkit-background-clip:text; background-clip:text; color: transparent;}
.h-sub{margin:0 0 20px;color:rgba(255,255,255,0.88);font-size:1.05rem;max-width:680px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;}
.btn{background:var(--blue);color:var(--white);padding:14px 22px;border-radius:999px;text-decoration:none;font-weight:700;box-shadow:var(--shadow);display:inline-flex;align-items:center;gap:10px;transition:transform .22s ease, box-shadow .22s ease;}
.btn:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(2,6,23,0.6)}
.btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--white);font-weight:600}

/* video mockup */
.mockup{flex:0 0 480px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:18px;padding:8px;box-shadow:0 16px 44px rgba(2,6,23,0.5);}
.mockup video, .mockup img{width:100%;border-radius:12px;display:block}

/* Problem section */
.section{padding:60px 0}
.card-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:900px;margin:20px auto 0}
.card{background:var(--card);padding:18px;border-radius:12px;border:1px solid var(--glass-border);backdrop-filter: blur(6px);}

/* benefits */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.benefit{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:12px;text-align:left;box-shadow:0 10px 30px rgba(2,6,23,0.5)}
.benefit h4{margin:0 0 8px;font-size:1.1rem}

/* testimonials */
.testimonials{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:18px}
.test{background:var(--card);padding:18px;border-radius:12px;border:1px solid var(--glass-border)}
.test p{margin:0;font-style:italic;color:rgba(255,255,255,0.95)}

/* Offer / pricing cards */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.price{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:22px;border-radius:14px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 18px 40px rgba(2,6,23,0.6)}
.price h3{margin:0 0 10px}
.price .price-amt{font-size:1.8rem;font-weight:800;color:var(--blue);margin-bottom:12px}

/* FAQ */
.faq{max-width:900px;margin:0 auto}
.faq details{background:var(--card);padding:14px;border-radius:10px;margin-bottom:10px;border:1px solid rgba(255,255,255,0.03)}

/* footer */
footer{padding:28px 0;color:rgba(255,255,255,0.6);text-align:center;font-size:0.95rem}

/* responsive */
@media(max-width:900px){
  .hero{flex-direction:column-reverse;padding:28px 0}
  .mockup{width:100%}
  .benefits{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .card-list{grid-template-columns:1fr}
  .h-title{font-size:1.6rem}
}