@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --navy:#1A1A2E;
  --green:#16C79A;
  --green-light:#e8faf4;
  --white:#ffffff;
  --gray:#f5f7fa;
  --text:#333;
  --text-light:#666;
  --radius:12px;
  --pill:50px;
}

html{scroll-behavior:smooth}
body{font-family:'Manrope',sans-serif;color:var(--text);background:var(--white);line-height:1.7;font-size:16px}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
ul,ol{padding-left:1.4em}

/* Accent bar top */
.accent-bar{height:4px;background:var(--green);width:100%;position:fixed;top:0;left:0;z-index:1001}

/* Header */
.header{position:sticky;top:4px;background:var(--white);z-index:1000;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.logo{font-weight:800;font-size:1.3rem;color:var(--navy);display:flex;align-items:center;gap:8px}
.logo span{color:var(--green)}
nav ul{display:flex;gap:24px;list-style:none}
nav a{color:var(--navy);font-weight:600;font-size:.95rem;transition:color .2s}
nav a:hover{color:var(--green);text-decoration:none}

.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.burger span{display:block;width:26px;height:3px;background:var(--navy);border-radius:2px}

/* Container */
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Hero */
.hero{padding:80px 0 60px;text-align:center}
.hero h1{font-size:2.8rem;font-weight:800;color:var(--navy);line-height:1.2;margin-bottom:20px}
.hero p{font-size:1.15rem;color:var(--text-light);max-width:680px;margin:0 auto 36px}

/* VIN form */
.vin-form{display:flex;gap:12px;max-width:560px;margin:0 auto}
.vin-form input{flex:1;padding:16px 20px;border:2px solid #e0e0e0;border-radius:var(--pill);font-size:1rem;font-family:inherit;outline:none;text-transform:uppercase}
.vin-form input:focus{border-color:var(--green)}

/* Buttons */
.btn{display:inline-block;padding:14px 36px;border-radius:var(--pill);font-weight:700;font-size:1rem;cursor:pointer;border:none;font-family:inherit;text-align:center}
.btn-green{background:var(--green);color:var(--white)}
.btn-green:hover{background:#13b68a;text-decoration:none;color:var(--white)}
.btn-outline{background:transparent;border:2px solid var(--green);color:var(--green)}
.btn-outline:hover{background:var(--green);color:var(--white);text-decoration:none}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-navy:hover{background:#12122a;text-decoration:none;color:var(--white)}

/* Section */
.section{padding:70px 0}
.section-gray{background:var(--gray)}
.section-title{font-size:2rem;font-weight:800;color:var(--navy);text-align:center;margin-bottom:16px}
.section-subtitle{text-align:center;color:var(--text-light);max-width:640px;margin:0 auto 48px;font-size:1.05rem}

/* Horizontal cards */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card-h{display:flex;flex-direction:row;align-items:flex-start;gap:20px;background:var(--white);border:1px solid #eee;border-radius:var(--radius);padding:28px;transition:box-shadow .2s}
.card-h:hover{box-shadow:0 4px 20px rgba(22,199,154,.1)}
.card-h .card-icon{flex-shrink:0;width:52px;height:52px;background:var(--green-light);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.card-h .card-body h3{font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:6px}
.card-h .card-body p{font-size:.93rem;color:var(--text-light);line-height:1.6}

/* Stats row */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat-item{padding:32px 16px;background:var(--white);border-radius:var(--radius);border:1px solid #eee}
.stat-item .num{font-size:2.4rem;font-weight:800;color:var(--green)}
.stat-item .label{font-size:.93rem;color:var(--text-light);margin-top:6px}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.price-card{background:var(--white);border:2px solid #eee;border-radius:var(--radius);padding:36px 28px;text-align:center;position:relative}
.price-card.featured{border-color:var(--green);box-shadow:0 8px 30px rgba(22,199,154,.12)}
.price-card .badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--green);color:var(--white);padding:4px 20px;border-radius:var(--pill);font-size:.8rem;font-weight:700}
.price-card h3{font-size:1.2rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.price-card .price{font-size:2.4rem;font-weight:800;color:var(--green);margin:16px 0 8px}
.price-card .price small{font-size:.9rem;font-weight:500;color:var(--text-light)}
.price-card ul{list-style:none;padding:0;margin:20px 0 28px;text-align:left}
.price-card ul li{padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:.93rem;color:var(--text-light);padding-left:24px;position:relative}
.price-card ul li::before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:700}

/* FAQ cards */
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.faq-card{background:var(--white);border:1px solid #eee;border-radius:var(--radius);padding:28px;border-left:4px solid var(--green)}
.faq-card h3{font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:10px}
.faq-card p{font-size:.93rem;color:var(--text-light);line-height:1.7}

/* CTA section */
.cta-section{background:var(--navy);padding:64px 0;text-align:center;color:var(--white)}
.cta-section h2{font-size:2rem;font-weight:800;margin-bottom:14px}
.cta-section p{color:rgba(255,255,255,.7);margin-bottom:32px;font-size:1.05rem}

/* Footer */
.footer{background:var(--navy);color:rgba(255,255,255,.65);padding:56px 0 28px}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-bottom:40px}
.footer h4{color:var(--white);font-size:1rem;font-weight:700;margin-bottom:16px}
.footer ul{list-style:none;padding:0}
.footer li{margin-bottom:10px}
.footer a{color:rgba(255,255,255,.65)}
.footer a:hover{color:var(--green)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;text-align:center;font-size:.85rem}

/* Breadcrumbs */
.breadcrumbs{padding:20px 0 0;font-size:.88rem;color:var(--text-light)}
.breadcrumbs a{color:var(--green)}
.breadcrumbs span{margin:0 6px;color:#ccc}

/* Article */
.article{max-width:820px;margin:0 auto;padding:40px 20px 60px}
.article h1{font-size:2.2rem;font-weight:800;color:var(--navy);margin-bottom:20px;line-height:1.25}
.article h2{font-size:1.5rem;font-weight:700;color:var(--navy);margin:36px 0 14px}
.article h3{font-size:1.2rem;font-weight:700;color:var(--navy);margin:28px 0 10px}
.article p{margin-bottom:16px;color:var(--text);line-height:1.8}
.article ul,.article ol{margin-bottom:16px}
.article li{margin-bottom:6px;line-height:1.7}
.article blockquote{border-left:4px solid var(--green);padding:16px 24px;background:var(--green-light);border-radius:0 var(--radius) var(--radius) 0;margin:24px 0}
.article .cta-inline{background:var(--green-light);border-radius:var(--radius);padding:28px;text-align:center;margin:36px 0}
.article .cta-inline p{margin-bottom:16px;font-weight:600;color:var(--navy)}

/* Platform cards */
.platform-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:40px auto}
.platform-card{background:var(--white);border:2px solid #eee;border-radius:var(--radius);padding:36px 28px;text-align:center}
.platform-card:hover{border-color:var(--green)}
.platform-card .p-icon{font-size:2.4rem;margin-bottom:16px}
.platform-card h3{font-size:1.1rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.platform-card p{font-size:.9rem;color:var(--text-light);margin-bottom:20px}

/* Video embed */
.video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius);margin:32px 0}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* Responsive */
@media(max-width:960px){
  .cards-grid,.pricing-grid,.footer-grid{grid-template-columns:repeat(2,1fr)}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:2rem}
  .platform-cards{grid-template-columns:1fr}
}
@media(max-width:700px){
  .cards-grid,.pricing-grid,.faq-grid,.footer-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:1.6rem}
  .hero{padding:50px 0 40px}
  .vin-form{flex-direction:column}
  nav ul{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--white);padding:20px;gap:16px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
  nav ul.open{display:flex}
  .burger{display:flex}
  .section-title{font-size:1.5rem}
  .article h1{font-size:1.6rem}
}