/* VarsityRide public site — shared styles */
:root{
  --green1:#1E2B1B; --green2:#3B5731; --green3:#5B783F; --green4:#95A85F; --green5:#EAEDA8;
  --bg:#F5F5F0; --surface:#fff; --text:#1A1A1A; --muted:#6b6b6b; --border:#E7E7E1;
  --badgeGreen:#E8F5EE; --maxw:1140px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text); background:var(--bg);
     -webkit-font-smoothing:antialiased; line-height:1.55;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.mi{font-family:'Material Symbols Outlined'; line-height:1; vertical-align:middle;
    font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;}
.mio{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:100; background:rgba(20,27,17,.92);
     backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid rgba(255,255,255,.08);}
.nav .wrap{display:flex; align-items:center; height:72px; gap:28px;}
.brand{display:flex; align-items:center; gap:11px; color:#fff; font-weight:800; font-size:20px;}
.brand .logo{width:38px; height:38px; border-radius:11px;
     background:linear-gradient(135deg,var(--green2),var(--green3)); display:flex; align-items:center; justify-content:center;}
.brand .logo .mi{color:#fff; font-size:22px;}
.brand-img{height:50px; width:auto; display:block;}
.footer .brand-img{height:54px;}
.nav .links{display:flex; gap:26px; margin-left:auto; align-items:center;}
.nav .links a{color:rgba(255,255,255,.82); font-size:15px; font-weight:600;}
.nav .links a:hover{color:#fff;}
.nav .cta{background:linear-gradient(135deg,var(--green4),var(--green5)); color:var(--green1);
     padding:11px 20px; border-radius:11px; font-weight:800; font-size:14px;
     box-shadow:0 6px 18px rgba(149,168,95,.4); transition:filter .15s, transform .15s;}
.nav .cta:hover{filter:brightness(1.07); transform:translateY(-1px);}
@media(max-width:760px){ .nav .links a:not(.cta){display:none;} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-weight:800; border-radius:14px;
     padding:15px 24px; font-size:16px; cursor:pointer; border:0;}
.btn-store{background:#fff; color:var(--green1); box-shadow:0 12px 30px rgba(0,0,0,.22);
     transition:transform .15s, box-shadow .15s;}
.btn-store:hover{transform:translateY(-2px); box-shadow:0 18px 38px rgba(0,0,0,.28);}
.btn-store .mi{font-size:26px;}
.btn-store small{display:block; font-size:11px; font-weight:600; opacity:.6; line-height:1;}
.btn-store b{display:block; font-size:18px; line-height:1.15; margin-top:2px;}
.btn-ghost{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);}

/* ---------- hero ---------- */
.hero{background:linear-gradient(158deg,#15200e 0%,#27381f 46%,#3B5731 100%); color:#fff; position:relative; overflow:hidden;}
.hero::after{content:''; position:absolute; top:-200px; right:-160px; width:760px; height:760px;
     background:radial-gradient(circle, rgba(234,237,168,.16), rgba(234,237,168,0) 70%);}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
     padding:84px 24px 90px; position:relative; z-index:2;}
.hero h1{font-size:60px; font-weight:800; line-height:1.04; letter-spacing:-1.5px;}
.hero p.sub{font-size:21px; color:#dfe6cf; margin-top:22px; max-width:520px;}
.hero .ctas{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.hero .tag{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.1);
     border:1px solid rgba(255,255,255,.18); color:var(--green5); padding:8px 15px; border-radius:30px;
     font-size:13px; font-weight:700; margin-bottom:22px;}
.hero-phones{position:relative; height:560px;}
.hero-phones img{position:absolute; width:262px; filter:drop-shadow(0 30px 50px rgba(0,0,0,.4)); border-radius:34px;}
.hero-phones img:nth-child(1){left:34%; top:0; z-index:3;}
.hero-phones img:nth-child(2){left:2%; top:54px; z-index:2; transform:rotate(-7deg);}
.hero-phones img:nth-child(3){right:0; top:54px; z-index:2; transform:rotate(7deg);}
@media(max-width:880px){
  .hero .wrap{grid-template-columns:1fr; padding:60px 24px 50px;}
  .hero h1{font-size:42px;}
  .hero-phones{height:420px; margin-top:10px;}
  .hero-phones img{width:200px;}
}

/* ---------- sections ---------- */
section{padding:84px 0;}
.eyebrow{color:var(--green3); font-weight:800; font-size:14px; letter-spacing:1.4px; text-transform:uppercase;}
.h2{font-size:38px; font-weight:800; letter-spacing:-1px; margin-top:10px;}
.lead{font-size:18px; color:var(--muted); margin-top:14px; max-width:640px;}
.center{text-align:center;} .center .lead{margin-left:auto; margin-right:auto;}

.grid{display:grid; gap:22px; margin-top:48px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){ .grid-3,.grid-4{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .grid-3,.grid-4{grid-template-columns:1fr;} }

.feature{background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:28px; text-align:center;}
.feature .ico{width:54px; height:54px; border-radius:15px; background:var(--badgeGreen);
     display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}
.feature .ico .mi{color:var(--green2); font-size:28px;}
.feature h3{font-size:20px; font-weight:800;}
.feature p{color:var(--muted); margin-top:8px; font-size:15.5px;}

.steps{counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:48px;}
.step{position:relative; padding-top:8px;}
.step .n{width:46px; height:46px; border-radius:50%; background:var(--green1); color:#fff;
     display:flex; align-items:center; justify-content:center; font-weight:800; font-size:19px; margin-bottom:16px;}
.step h3{font-size:18px; font-weight:800;}
.step p{color:var(--muted); margin-top:7px; font-size:15px;}
@media(max-width:900px){ .steps{grid-template-columns:1fr 1fr;} }
@media(max-width:520px){ .steps{grid-template-columns:1fr;} }

.band{background:linear-gradient(158deg,#1a2614,#34502b 60%,#5B783F); color:#fff;}
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:40px;}
.gallery img{width:100%; border-radius:30px; filter:drop-shadow(0 26px 44px rgba(0,0,0,.36));}
@media(max-width:900px){ .gallery{grid-template-columns:1fr 1fr;} }

.split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.split img{margin:0 auto; width:300px;}
@media(max-width:820px){ .split{grid-template-columns:1fr;} .split .imgcol{order:-1;} }

.cta-band{background:linear-gradient(158deg,#15200e,#3B5731); color:#fff; text-align:center;}
.cta-band h2{font-size:40px; font-weight:800; letter-spacing:-1px;}
.cta-band p{color:#dfe6cf; font-size:18px; margin:14px auto 30px; max-width:520px;}

/* ---------- article (support / privacy) ---------- */
.page-head{background:linear-gradient(158deg,#15200e 0%,#27381f 50%,#3B5731 100%); color:#fff; padding:70px 0 64px;}
.page-head h1{font-size:46px; font-weight:800; letter-spacing:-1px;}
.page-head p{color:#dfe6cf; font-size:18px; margin-top:14px; max-width:640px;}
.article{padding:64px 0 90px;}
.article .wrap{max-width:840px;}
.article h2{font-size:26px; font-weight:800; margin:38px 0 12px; letter-spacing:-.5px;}
.article h3{font-size:19px; font-weight:800; margin:24px 0 8px;}
.article p{color:#333; margin:10px 0; font-size:16.5px;}
.article ul{margin:10px 0 10px 22px; color:#333;}
.article li{margin:7px 0; font-size:16.5px;}
.article a{color:var(--green3); font-weight:700;}
.muted{color:var(--muted); font-size:14.5px;}

.faq{margin-top:34px;}
.qa{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px 24px; margin-bottom:14px;}
.qa h3{font-size:18px; font-weight:800; margin:0 0 7px;}
.qa p{margin:0; color:var(--muted); font-size:15.5px;}

.contact-card{background:var(--green1); color:#fff; border-radius:24px; padding:38px; display:flex;
     align-items:center; gap:26px; flex-wrap:wrap;}
.contact-card .ico{width:64px; height:64px; border-radius:18px; background:rgba(255,255,255,.12);
     display:flex; align-items:center; justify-content:center;}
.contact-card .ico .mi{font-size:34px; color:var(--green5);}
.contact-card h3{font-size:22px; font-weight:800;}
.contact-card a.mail{color:var(--green5); font-size:20px; font-weight:800;}

/* ---------- footer ---------- */
.footer{background:#15200e; color:#cfd6c2; padding:56px 0 40px;}
.footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px;}
.footer .brand{color:#fff; margin-bottom:14px;}
.footer h4{color:#fff; font-size:14px; letter-spacing:.5px; text-transform:uppercase; margin-bottom:14px; opacity:.7;}
.footer a{display:block; color:#cfd6c2; padding:5px 0; font-size:15px;}
.footer a:hover{color:#fff;}
.footer .bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:36px; padding-top:22px;
     display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:14px; opacity:.8;}
@media(max-width:700px){ .footer .cols{grid-template-columns:1fr;} }