:root{
  --green:#2F6F4E;
  --green-dark:#1F5139;
  --green-light:#EAF5EF;
  --mint:#F3FAF6;
  --text:#243746;
  --muted:#667985;
  --line:#E6ECE8;
  --white:#fff;
  --shadow:0 20px 60px rgba(47,111,78,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"DM Sans",Arial,sans-serif;color:var(--text);background:#fff;line-height:1.6}
a{text-decoration:none;color:inherit}
.container{width:min(1160px,calc(100% - 40px));margin:auto}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(230,236,232,.8)}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.logo{display:flex;align-items:center;gap:7px;font-size:23px;font-weight:700;color:var(--green)}
.logo-pin,.brand-mark{display:inline-flex;align-items:center;justify-content:center;color:var(--green);font-size:25px}
.nav-links{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:600}
.nav-links a{position:relative;padding:25px 0}
.nav-links a.active,.nav-links a:hover{color:var(--green)}
.nav-links a.active:after{content:"";position:absolute;height:2px;width:24px;background:var(--green);left:50%;bottom:17px;transform:translateX(-50%)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:9px;font-size:13px;font-weight:700}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 8px 18px rgba(47,111,78,.18)}
.menu-toggle{display:none;background:none;border:0;font-size:25px;color:var(--green)}

/* Hero */
.hero{overflow:hidden;padding:82px 0 70px}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:35px}
.eyebrow{color:var(--green);font-size:11px;letter-spacing:2.3px;font-weight:700;margin-bottom:14px}
.eyebrow span{margin:0 6px}
.hero h1{font-size:64px;line-height:1;font-weight:700;color:var(--green);letter-spacing:-2px;margin-bottom:12px}
.brand-mark{font-size:54px;margin-right:4px}
.hero h2{font-size:27px;line-height:1.2;margin-bottom:16px}
.hero-text{max-width:510px;color:var(--muted);font-size:15px}
.store-buttons{display:flex;gap:12px;margin-top:27px}
.store-btn{display:flex;align-items:center;gap:10px;background:#101010;color:#fff;border-radius:7px;padding:8px 16px;min-width:154px;font-weight:600;font-size:15px;line-height:1.05}
.store-btn small{display:block;font-size:8px;font-weight:400;letter-spacing:.2px;margin-bottom:3px}
.store-icon{font-size:23px}
.apple{font-size:20px}

/* CSS phone mockups */
.hero-visual{height:510px;position:relative;display:flex;align-items:center;justify-content:center}
.soft-circle{position:absolute;width:400px;height:400px;border-radius:50%;background:var(--green-light);right:50px;top:55px}
.phone{background:#111;border-radius:38px;padding:8px;box-shadow:0 25px 50px rgba(0,0,0,.2);position:absolute;z-index:2}
.phone-main{width:245px;height:485px;transform:rotate(-2deg);right:205px;top:12px}
.phone-secondary{width:210px;height:415px;right:65px;top:60px;transform:rotate(5deg);z-index:3}
.phone-screen{height:100%;width:100%;overflow:hidden;background:#fff;border-radius:31px;position:relative}
.phone-notch{position:absolute;z-index:5;width:88px;height:20px;background:#111;border-radius:0 0 14px 14px;left:50%;transform:translateX(-50%);top:8px}
.app-top{display:flex;justify-content:space-between;align-items:center;padding:25px 14px 9px;color:var(--green);font-size:14px}
.search-box{margin:0 12px;padding:8px 10px;border:1px solid #e2e8e4;border-radius:12px;color:#8a969c;font-size:9px}
.post-types{display:flex;justify-content:space-around;padding:12px 5px;font-size:8px;color:#60716c}
.post-types b{color:var(--green);font-size:11px}
.map{height:325px;background:linear-gradient(135deg,#eef2ed 0 25%,#e1e8e0 25% 28%,#f7f8f4 28% 52%,#e6ece3 52% 55%,#f4f5ef 55%);position:relative;overflow:hidden}
.map:before,.big-map:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(22deg,transparent 0 34px,rgba(130,150,140,.18) 35px 37px),repeating-linear-gradient(112deg,transparent 0 54px,rgba(130,150,140,.14) 55px 57px)}
.map-dot,.big-dot{position:absolute;width:15px;height:15px;border-radius:50%;background:var(--green);border:3px solid #fff;box-shadow:0 2px 7px rgba(0,0,0,.12);z-index:2}
.d1{left:22%;top:25%}.d2{right:20%;top:16%}.d3{left:68%;top:46%}.d4{left:16%;top:63%}.d5{right:32%;bottom:20%}.d6{left:45%;bottom:12%}
.user-location,.big-user{position:absolute;left:50%;top:50%;width:18px;height:18px;background:#2d8ae0;border:4px solid white;border-radius:50%;z-index:4;transform:translate(-50%,-50%);box-shadow:0 0 0 7px rgba(45,138,224,.15)}
.radius,.big-radius{position:absolute;left:50%;top:50%;width:145px;height:145px;border-radius:50%;background:rgba(45,138,224,.08);border:1px solid rgba(45,138,224,.12);transform:translate(-50%,-50%)}
.phone-bottom{position:absolute;bottom:0;left:0;right:0;height:45px;background:#fff;display:flex;justify-content:space-around;align-items:center;color:var(--green);font-size:13px}
.phone-bottom small{display:block;font-size:7px;color:#65756e}
.listing-image{height:190px;background:#edf1eb;display:flex;align-items:center;justify-content:center;font-size:70px}
.listing{padding:16px;color:var(--text)}
.listing small{font-weight:600;font-size:11px}.listing strong{display:block;color:var(--green);font-size:18px;margin:7px 0}.listing p{font-size:9px;color:var(--muted)}.listing button{width:100%;border:0;background:var(--green);color:#fff;border-radius:8px;padding:9px;margin-top:15px}
.hero-note{position:absolute;color:var(--green);font-size:12px;font-weight:600;line-height:1.8;right:-15px;bottom:75px;transform:rotate(-5deg)}

/* Highlights */
.highlights{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:25px 0}
.highlight-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.highlight{display:flex;gap:12px;padding:0 22px;border-right:1px solid var(--line)}
.highlight:first-child{padding-left:0}.highlight:last-child{border-right:0;padding-right:0}
.icon-circle,.feature-icon{width:39px;height:39px;border-radius:50%;background:var(--green-light);color:var(--green);display:flex;align-items:center;justify-content:center;flex:none;font-size:18px}
.highlight h3{font-size:14px;margin-bottom:4px}.highlight p{font-size:10px;color:var(--muted);line-height:1.5}

/* How */
.how-section{background:var(--mint);padding:78px 0}
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.how-grid h2,.section-heading h2,.preview-grid h2{font-size:34px;line-height:1.15;letter-spacing:-.7px}
.steps{margin-top:28px;display:grid;gap:20px}
.step{display:grid;grid-template-columns:35px 1fr;gap:13px}.step>span{width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}.step h3{font-size:14px}.step p{font-size:11px;color:var(--muted);max-width:430px;line-height:1.55}
.map-card{height:375px;background:#fff;border:1px solid #dce9e0;border-radius:22px;padding:0;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.big-map{position:absolute;inset:0;background:linear-gradient(135deg,#eaf0e9,#f8f9f6);overflow:hidden}
.big-dot{width:17px;height:17px}.b1{left:17%;top:24%}.b2{right:22%;top:16%}.b3{left:66%;top:48%}.b4{left:21%;bottom:23%}.b5{right:28%;bottom:17%}
.big-user{width:20px;height:20px}.big-radius{width:185px;height:185px}
.radius-control{position:absolute;right:20px;top:20px;z-index:10;background:#fff;padding:12px 15px;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.09);width:185px}.radius-control strong{font-size:10px;display:block}.range{height:5px;background:#dbe5df;border-radius:10px;margin:10px 0;position:relative}.range span{display:block;width:65%;height:100%;background:var(--green);border-radius:10px}.range i{position:absolute;width:10px;height:10px;background:var(--green);border-radius:50%;left:63%;top:-3px}.radius-control small{font-size:9px;float:right}.map-legend{position:absolute;z-index:10;bottom:18px;left:50%;transform:translateX(-50%);background:#fff;border-radius:12px;padding:10px 17px;display:flex;gap:20px;font-size:9px;box-shadow:0 10px 25px rgba(0,0,0,.08);white-space:nowrap}.map-legend span{color:var(--green)}

/* Features */
.features-section{padding:75px 0}
.section-heading{text-align:center}.section-heading h2{font-size:29px}.heading-line{height:2px;width:40px;background:var(--green);margin:14px auto 40px}
.feature-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0}.feature{text-align:center;padding:0 25px;border-right:1px solid var(--line)}.feature:last-child{border:0}.feature-icon{margin:0 auto 13px}.feature h3{font-size:14px}.feature p{font-size:10px;color:var(--muted);line-height:1.6;margin-top:5px}

/* Preview */
.preview-section{background:var(--mint);padding:60px 0}
.preview-grid{display:grid;grid-template-columns:310px 1fr;align-items:center;gap:45px}.preview-grid>div>p:last-child{font-size:12px;color:var(--muted);margin-top:15px}
.mini-phones{display:flex;justify-content:space-between;align-items:end;gap:14px}.mini-phone{width:115px;height:230px;background:#111;border-radius:20px;padding:4px;box-shadow:0 12px 25px rgba(0,0,0,.16)}.mini-screen{height:100%;border-radius:16px;background:#fff;overflow:hidden;padding:15px 8px;font-size:9px;color:var(--green)}.mini-map{height:125px;background:#e7eee7;margin:10px -8px;position:relative}.mini-map:after{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:var(--green);left:50%;top:50%}.mini-nav{position:absolute;margin-top:3px;color:#52635c}.mini-form{display:grid;gap:8px;margin-top:15px;color:var(--text)}.mini-button{background:var(--green);color:#fff;text-align:center;padding:7px;border-radius:6px;margin-top:18px}.notification{margin-top:13px;background:#f1f6f2;padding:8px;border-radius:7px;color:var(--text);font-size:8px}.notification small{color:var(--muted)}

/* Download + FAQ */
.download-section{padding:65px 0;text-align:center}.download-inner{display:flex;align-items:center;justify-content:center;gap:70px}.download-section h2{font-size:24px;color:var(--green-dark)}.download-section p{font-size:11px;color:var(--muted)}.centered{justify-content:center}.download-arrow{font-size:40px;color:var(--green);font-weight:700}
.faq-section{background:var(--mint);padding:70px 0}.faq-inner{max-width:800px}.faq-section .section-heading{text-align:left;margin-bottom:30px}.faq-section .heading-line{margin-left:0}.faq-section details{border-top:1px solid #dce7e0;padding:18px 0}.faq-section summary{cursor:pointer;font-weight:700;font-size:14px}.faq-section details p{font-size:12px;color:var(--muted);padding-top:10px}

/* Footer */
footer{border-top:1px solid var(--line)}.footer-top{min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:25px}.footer-links{display:flex;gap:25px;font-size:11px;color:var(--muted)}.footer-links a:hover{color:var(--green)}.social{font-size:13px;color:var(--green)}.footer-bottom{text-align:right;border-top:1px solid var(--line);padding:12px 20px;font-size:9px;color:#8b9993}

/* Responsive */
@media(max-width:900px){
  .nav-links{display:none}.nav-links.open{display:flex;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:10px 20px 20px;border-bottom:1px solid var(--line);box-shadow:0 15px 30px rgba(0,0,0,.06)}.nav-links.open a{padding:12px}.nav-links.open a.active:after{display:none}.menu-toggle{display:block;margin-left:auto}.nav-download{display:none}
  .hero-grid,.how-grid,.preview-grid{grid-template-columns:1fr}.hero{padding-top:55px}.hero-copy{text-align:center}.hero-text{margin:auto}.store-buttons{justify-content:center}.hero-visual{margin-top:20px}.how-grid{gap:40px}.preview-grid>div:first-child{text-align:center;margin:auto}.mini-phones{justify-content:center;flex-wrap:wrap}
  .highlight-grid{grid-template-columns:repeat(2,1fr);gap:20px}.highlight{border-right:0;padding:10px 0!important}.feature-grid{grid-template-columns:repeat(2,1fr);gap:30px}.feature:nth-child(2){border-right:0}.feature:nth-child(3),.feature:nth-child(4),.feature:nth-child(5){border-top:1px solid var(--line);padding-top:25px}.feature:nth-child(5){grid-column:1/-1}
}
@media(max-width:600px){
  .container{width:min(100% - 28px,1160px)}.hero h1{font-size:48px}.hero h2{font-size:23px}.hero-visual{height:430px;transform:scale(.82);margin-left:-30px;margin-right:-30px}.phone-main{right:120px}.phone-secondary{right:10px}.soft-circle{right:0}.hero-note{display:none}.highlight-grid{grid-template-columns:1fr}.highlight{border-bottom:1px solid var(--line);padding-bottom:14px!important}.highlight:last-child{border:0}.how-grid h2,.section-heading h2,.preview-grid h2{font-size:27px}.map-card{height:330px}.map-legend{gap:10px;padding:8px 10px}.download-inner{gap:10px}.download-arrow{display:none}.footer-top{flex-direction:column;padding:25px 0}.footer-links{flex-wrap:wrap;justify-content:center}.footer-bottom{text-align:center}.store-buttons{flex-wrap:wrap}
}