/* =============================================================
   front-page.css — Landing/homepage styles
   @package Lotetree
   ============================================================= */

body{background:#fff}

/* Hero */
.hero{text-align:center;padding:4rem 5%;max-width:800px;margin:0 auto}
.hero h1{font-size:clamp(2.5rem,6vw,4rem);font-weight:800;line-height:1.1;margin-bottom:1.5rem;letter-spacing:-2px}
.hero h1 .highlight{background:linear-gradient(135deg,#3979f3,#5eeadc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:1.25rem;color:#666;margin-bottom:3rem}

/* Claim form */
.claim-form{display:flex;justify-content:center;gap:0;margin-bottom:1rem;flex-wrap:wrap}
.input-wrapper{display:flex;align-items:center;background:#f5f5f5;border-radius:50px 0 0 50px;padding-left:1.5rem;border:2px solid #f5f5f5}
.input-wrapper:focus-within{border-color:#3979f3}
.input-prefix{color:#888;font-weight:500}
.input-wrapper input{padding:1.1rem .5rem;font-size:1rem;border:none;background:transparent;width:180px;color:#222;font-weight:500}
.input-wrapper input:focus{outline:none}
.claim-form .btn{border-radius:0 50px 50px 0;padding:1.1rem 2rem}
.trust-text{color:#888;font-size:.9rem}

/* Phone mockup */
.mockup-section{padding:4rem 5%;display:flex;justify-content:center;background:linear-gradient(180deg,#fff 0%,#f0f7ff 50%,#fff 100%)}
.phone-mockup{width:400px;background:linear-gradient(180deg,#f8f9fa 0%,#fff 100%);border-radius:40px;padding:12px;box-shadow:0 50px 100px -20px rgba(57,121,243,.15)}
.phone-screen{background:#fff;border-radius:32px;padding:2rem 1.5rem;min-height:480px}
.phone-header{text-align:center;margin-bottom:2rem}
.phone-avatar{width:80px;height:80px;background:linear-gradient(135deg,#3979f3,#5eeadc);border-radius:50%;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center}
.phone-avatar i{font-size:2rem;color:#fff;opacity:.8}
.phone-name{font-weight:700;font-size:1.1rem}
.phone-handle{color:#888;font-size:.85rem}
.phone-links{display:flex;flex-direction:column;gap:.75rem}
.phone-link{background:#f5f5f5;padding:1rem;border-radius:12px;text-align:center;font-weight:500;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:.5rem}
.phone-link:nth-child(1){background:#3979f3;color:#fff}
.phone-link:nth-child(2){background:linear-gradient(135deg,#5eeadc,#3979f3);color:#fff}
.phone-link i{font-size:1.1rem}

/* Features */
.features{padding:6rem 5%;max-width:1200px;margin:0 auto}
.features-header{text-align:center;margin-bottom:4rem}
.features-header h2{font-size:2.5rem;font-weight:800;margin-bottom:1rem;letter-spacing:-1px}
.features-header p{color:#666;font-size:1.1rem}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}
.feature-card{padding:2rem;border-radius:20px;background:#f8f9fa}
.feature-card:hover{transform:translateY(-4px)}
.feature-icon{width:48px;height:48px;background:linear-gradient(135deg,#3979f3,#5eeadc);border-radius:12px;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:center}
.feature-icon i{font-size:1.25rem;color:#fff}
.feature-card h3{font-size:1.25rem;font-weight:700;margin-bottom:.75rem}
.feature-card p{color:#666;font-size:.95rem}

/* How it works */
.how-it-works{padding:6rem 5%;background:linear-gradient(180deg,#f8f9fa 0%,#f0f7ff 100%)}
.how-it-works-inner{max-width:1000px;margin:0 auto}
.how-it-works h2{text-align:center;font-size:2.5rem;font-weight:800;margin-bottom:4rem;letter-spacing:-1px}
.steps{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.step{flex:1;min-width:250px;text-align:center}
.step-number{width:60px;height:60px;background:linear-gradient(135deg,#3979f3,#5eeadc);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;margin:0 auto 1.5rem}
.step h3{font-size:1.2rem;font-weight:700;margin-bottom:.75rem}
.step p{color:#666;font-size:.95rem}

/* CTA */
.cta{padding:6rem 5%;text-align:center}
.cta h2{font-size:2.5rem;font-weight:800;margin-bottom:1.5rem;letter-spacing:-1px}
.cta p{color:#666;font-size:1.1rem;margin-bottom:2rem}

/* Responsive */
@media(max-width:768px){
    .nav-links .desktop-only{display:none}
    .nav-links{gap:.5rem}
    .nav-links .btn{padding:.6rem 1rem;font-size:.85rem}
    .claim-form{flex-direction:column;align-items:center;gap:1rem}
    .input-wrapper{border-radius:50px;width:100%;max-width:300px}
    .claim-form .btn{border-radius:50px;width:100%;max-width:300px}
    .steps{flex-direction:column}
}