/* HERO */
.hero{padding:140px 32px 0;min-height:100vh;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--light-bg)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,80,0,0.1);color:var(--orange);font-size:13px;font-weight:600;padding:6px 16px;border-radius:var(--radius-pill);margin-bottom:28px}
.hero-eyebrow-dot{width:6px;height:6px;background:var(--orange);border-radius:50%}
.hero h1{font-size:52px;font-weight:900;line-height:1.1;letter-spacing:-1.5px;color:var(--text-dark);margin-bottom:16px;max-width:600px}
.hero-sub{font-size:16px;color:#666;font-weight:400;margin-bottom:20px;max-width:420px;line-height:1.6}
.hero-price{font-size:15px;color:#888;margin-bottom:32px;font-weight:500}
.hero-price strong{color:var(--text-dark)}
.hero-btn-row{display:flex;flex-direction:column;gap:12px;align-items:center;margin-bottom:56px}
.hero-btn-note{font-size:14px;font-weight:500;color:#888}

/* PHONE MOCKUP */
.hero-phone-wrap{position:relative;width:260px;margin:0 auto}
.hero-phone-frame{width:260px;height:auto;position:relative;z-index:2;display:block}
.hero-screen-overlay{position:absolute;top:3%;left:7%;right:7%;bottom:2.5%;border-radius:24px;overflow:hidden;z-index:1;background:#000}
.hero-screen-overlay img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* FEATURES */
.features{padding:96px 32px;background:white}
.feature-grid{display:flex;flex-direction:column;gap:16px}
.feature-card{background:var(--light-card);border-radius:var(--radius-card);padding:28px 24px}
.feature-icon{width:44px;height:44px;background:rgba(255,80,0,0.1);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:22px}
.feature-card h3{font-size:18px;font-weight:700;margin-bottom:8px;color:var(--text-dark)}
.feature-card p{font-size:14px;color:#666;line-height:1.6;font-weight:400}

/* PRICING */
.pricing{padding:96px 32px;background:var(--light-bg)}
.pricing-intro{text-align:center;margin-bottom:48px}
.pricing-intro p{font-size:15px;color:#888;font-weight:400;margin-top:8px}
.pricing-cards{display:flex;flex-direction:column;gap:16px;max-width:560px;margin:0 auto}
.pricing-card{background:white;border-radius:24px;padding:32px 28px;border:1px solid rgba(0,0,0,0.07)}
.pricing-card.featured{background:var(--black);border-color:var(--black)}
.pricing-badge{display:inline-block;background:var(--orange);color:white;font-size:11px;font-weight:700;padding:4px 12px;border-radius:var(--radius-pill);margin-bottom:20px;letter-spacing:0.5px}
.pricing-name{font-size:22px;font-weight:800;color:var(--text-dark);margin-bottom:4px}
.pricing-card.featured .pricing-name{color:white}
.pricing-price{font-size:40px;font-weight:900;color:var(--text-dark);letter-spacing:-1px;margin-bottom:4px}
.pricing-card.featured .pricing-price{color:white}
.pricing-price span{font-size:16px;font-weight:400;color:#999}
.pricing-desc{font-size:14px;color:#888;margin-bottom:24px;font-weight:400}
.pricing-card.featured .pricing-desc{color:#aaa}
.pricing-features-list{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.pricing-feature{display:flex;align-items:center;gap:10px;font-size:14px;color:#444;font-weight:500}
.pricing-card.featured .pricing-feature{color:#ccc}
.pricing-check{width:20px;height:20px;background:rgba(255,80,0,0.15);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;color:var(--orange);font-weight:800}
.pricing-card.featured .pricing-check{background:rgba(255,80,0,0.25)}
.pricing-btn{display:block;text-align:center;padding:14px;border-radius:var(--radius-pill);font-size:15px;font-weight:700;transition:all 0.15s}
.pricing-btn-outline{border:2px solid #e0e0e0;color:var(--text-dark)}
.pricing-btn-outline:hover{border-color:var(--orange);color:var(--orange)}
.pricing-btn-fill{background:var(--orange);color:white}
.pricing-btn-fill:hover{background:var(--orange-dark)}

@media(min-width:768px){
  .hero{padding:160px 64px 0}
  .hero h1{font-size:68px}
  .hero-phone-wrap{width:300px}
  .hero-phone-frame{width:300px}
  .features{padding:120px 64px}
  .feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .pricing{padding:120px 64px}
  .pricing-cards{flex-direction:row;max-width:760px}
  .pricing-card{flex:1}
}
@media(min-width:1200px){
  .hero{padding:160px 10% 0}
  .hero h1{font-size:80px;max-width:720px}
  .hero-phone-wrap{width:320px}
  .hero-phone-frame{width:320px}
  .features{padding:140px 10%}
  .feature-grid{grid-template-columns:repeat(3,1fr)}
  .section-title{font-size:44px}
  .pricing{padding:140px 10%}
}