/* ===== Brand Tokens ===== */
:root{
  --navy:#1A2B4C; --charcoal:#2C2C2C;
  --aqua:#00B8D9; --teal:#17C3B2;
  --lime:#9EDC3D; --limeDark:#7CC022;
  --cream:#FAF3E0; --text:#243342;
  --muted:#6A7785; --mutedLight:#e7eef6;
  --green:#7CC022; --red:#C62828;
  --border:#EEF1F4; --radius:14px;
  --shadow:0 12px 32px rgba(26,43,76,.14);
  --maxw:1150px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Open Sans",system-ui,Segoe UI,Roboto,Arial,sans-serif;font-size:18px;line-height:1.7;color:var(--text);background:#fff}
h1,h2,h3{font-family:"Montserrat",system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:0 0 .6rem}
h1{font-size:clamp(2.2rem,4.2vw,3.4rem)}
h2{font-size:clamp(1.7rem,3vw,2.2rem)}
h3{font-size:clamp(1.15rem,2.1vw,1.35rem)}
p{margin:0 0 1rem} a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;height:auto;border-radius:var(--radius)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.prose{max-width:65ch}
.btn{display:inline-block;padding:1rem 1.25rem;border-radius:12px;font-weight:700;border:2px solid transparent;transition:.2s}
.btn.primary{background:var(--lime);color:#0c2b36;position:relative;overflow:hidden;box-shadow:0 4px 15px rgba(158,220,61,.3)}
.btn.primary:hover{background:var(--limeDark);transform:translateY(-2px);box-shadow:0 8px 25px rgba(158,220,61,.4)}
.btn.primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}
.btn.primary:hover::before{left:100%}
.link{font-weight:600;color:var(--aqua)}

/* ===== Header ===== */
header{position:sticky;top:0;z-index:50;background:rgba(26,43,76,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid rgba(255,255,255,.12);color:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:700}
.brand-logo{height:40px;width:auto}
/* Extra left padding for logo area */
.brand{padding-left:10px}
.brand-mark{width:36px;height:36px;border-radius:9px;border:2px solid var(--aqua);position:relative}
.brand-mark:before{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:14px;height:2px;background:var(--aqua);border-radius:2px}
header nav{display:flex;align-items:center;gap:.6rem}
header nav a{margin-left:0;color:#eaf5f8;padding:.4rem .6rem;border-radius:8px;transition:transform .25s ease, color .25s ease}
header nav a:hover{color:#fff;background:transparent;transform:translateY(-2px)}
header nav a.active{color:#eaf5f8;background:transparent}

/* Dropdown */
.nav-dropdown{position:relative}
.nav-dropbtn{background:transparent;color:#eaf5f8;border:none;padding:.4rem .6rem;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:.4rem;transition:transform .25s ease, color .25s ease;font-size:inherit}
.nav-dropbtn:hover{background:transparent;color:#fff;transform:translateY(-2px)}
.nav-dropbtn .chev{display:inline-block;width:8px;height:8px;border-right:2px solid #eaf5f8;border-bottom:2px solid #eaf5f8;transform:rotate(45deg);transition:transform .2s ease}
.nav-dropdown.open .nav-dropbtn .chev,.nav-dropdown:hover .nav-dropbtn .chev{transform:rotate(225deg)}
.nav-dropbtn:hover .chev{border-right-color:#fff;border-bottom-color:#fff}
.nav-dropdown-content{display:none;position:absolute;top:calc(100% + 8px);left:0;background:#132035;border:1px solid rgba(255,255,255,.15);border-radius:10px;min-width:200px;box-shadow:0 12px 28px rgba(0,0,0,.35);padding:.35rem}
.nav-dropdown-content a{display:block;padding:.5rem .6rem;margin:0;border-radius:8px;color:#eaf5f8}
.nav-dropdown-content a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-dropdown.open .nav-dropdown-content{display:block}
.nav-cta{border:1px solid rgba(158,220,61,.6);color:#fff;background:linear-gradient(180deg,rgba(158,220,61,.18),rgba(158,220,61,.08));}

/* Enable hover-open only on hover-capable devices */
@media (hover:hover){
  .nav-dropdown:hover .nav-dropdown-content{display:block}
  .nav-dropdown.open .nav-dropbtn .chev,.nav-dropdown:hover .nav-dropbtn .chev{transform:rotate(225deg)}
}

/* Mobile nav toggle */
.nav-toggle{display:none;background:transparent;border:none;cursor:pointer;padding:.4rem .5rem;border-radius:8px}
.nav-toggle .bar{display:block;width:22px;height:2px;background:#eaf5f8;margin:5px 0;border-radius:2px;transition:transform .2s ease, opacity .2s ease}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== Hero ===== */
.hero{background:var(--navy);color:#fff;overflow:hidden}
.hero .grid{display:grid;gap:28px;grid-template-columns:1.05fr .95fr;align-items:center;padding:clamp(56px,8vw,120px) 0}
.hero h1{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.hero .sub{color:#e7eef6;font-weight:600}

/* Pills ABOVE headline */
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.hero .pills.full-row{grid-column:1 / -1;justify-content:center;margin-top:12px}
.pill{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.55rem .85rem;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  transform:translateY(0);transition:transform .25s ease, box-shadow .25s ease;
}
.pill:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.22)}
.i-green{width:18px;height:18px;display:inline-block}
.i-green svg{display:block;width:18px;height:18px;stroke:var(--green);stroke-width:2;fill:none}

/* Rolling word effect */
.title-line {
    display: block;
    margin-bottom: 0.2em;
}

.rolling-word {
    position: relative;
    display: inline-block;
    color: var(--aqua);
    font-weight: 800;
    text-shadow: 0 0 20px rgba(0, 184, 217, 0.5);
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

.rolling-word::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--aqua), var(--teal));
    border-radius: 2px;
    animation: underlineGlow 2s ease-in-out infinite;
}

@keyframes underlineGlow {
    0%, 100% {
        opacity: 0.7;
        transform: scaleX(1);
    }
    50% {
        opacity: 1;
        transform: scaleX(1.05);
    }
}

/* hero visual */
.hero .visual{border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18)}
.hero .mock{height:460px;border-radius:var(--radius);
  background:
    linear-gradient(135deg,rgba(0,0,0,.30),rgba(0,0,0,.30)),
    url('images/hero.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:80% center;}

/* ===== Problem (split) ===== */
.problem{padding:90px 0;background:#fff}
.problem-title{color:var(--navy);text-align:center;margin-bottom:3rem;font-size:clamp(1.7rem,3vw,2.2rem)}
.problem .grid{display:grid;gap:28px;grid-template-columns:1fr 1fr;align-items:center}
.badlist{display:grid;gap:20px;margin-top:10px;list-style:none;padding:0}
.bad{display:flex;gap:1rem;align-items:flex-start;padding:0;background:none;border:none;box-shadow:none}
.ico-red{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--red);flex-shrink:0;margin-top:2px}
.ico-red svg{width:18px;height:18px;stroke:#fff;stroke-width:2.5;fill:none}
.bad div{font-size:1rem;line-height:1.55;color:var(--text)}

/* Comparison container */
.comparison-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
}

.old-vending, .new-vending {
    text-align: center;
}

.old-vending h3, .new-vending h3 {
    margin-bottom: .8rem;
    font-size: 1rem;
    white-space: nowrap;
}

.old-vending h3 {
    color: #666;
}

.new-vending h3 {
    color: var(--navy);
}

.vs {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--lime);
    background: var(--navy);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.vending-comparison {
    width: 100%;
    max-width: 180px;
    height: auto;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.1));
}

/* ===== Vending Comparison Section ===== */
.comparison-section {
    padding: 90px 0;
    background: var(--mutedLight);
}

.comparison-section h2 {
    text-align: center;
    color: var(--navy);
    margin-bottom: 3rem;
}

.comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

.old-vending, .new-vending {
    text-align: center;
}

.old-vending h3, .new-vending h3 {
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.old-vending h3 {
    color: #666;
}

.new-vending h3 {
    color: var(--navy);
}

.vs {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--lime);
    background: var(--navy);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.vending-comparison {
    width: 100%;
    max-width: 200px;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

/* ===== Solution ===== */
.solution{padding:90px 0;background:var(--cream)}
.solution .grid{display:grid;gap:28px;grid-template-columns:1fr 1fr;align-items:center}
.solution h2{color:var(--navy)}
.solution p strong{font-weight:700}

/* ===== Benefits (cards with images) ===== */
.benefits{padding:90px 0;background:#fff}
.benefits h2{color:var(--navy);text-align:center;font-size:clamp(2.2rem,4.5vw,3rem);margin-bottom:3rem;font-weight:800;letter-spacing:-0.02em}
.b-grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);margin-top:16px}
.b:nth-child(1){animation:floatCard 6s ease-in-out infinite}
.b:nth-child(2){animation:floatCard 6s ease-in-out infinite 2s}
.b:nth-child(3){animation:floatCard 6s ease-in-out infinite 4s}
@keyframes floatCard{0%,100%{transform:translateY(0px)}50%{transform:translateY(-5px)}}
.b{border:1px solid var(--border);border-radius:20px;background:#fff;box-shadow:0 15px 35px rgba(26,43,76,.08);overflow:hidden;transform:translateY(0);transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);position:relative}
.b::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--aqua),var(--lime));transform:scaleX(0);transition:transform .4s ease;z-index:1}
.b:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 25px 50px rgba(26,43,76,.15)}
.b:hover::before{transform:scaleX(1)}
.b:hover .img img{transform:scale(1.1)}
.b:hover .mini .dot{transform:scale(1.2);background:var(--lime);color:#fff}
.b:hover h3{color:var(--aqua)}
.b .img{height:160px;background:#f6f8fb;overflow:hidden;position:relative}
.b .img img{transition:transform .4s cubic-bezier(0.4, 0, 0.2, 1)}
.b .body{padding:20px;position:relative;z-index:2}
.b h3{margin:.2rem 0 .45rem;color:var(--navy);transition:color .3s ease;font-weight:700}
.b .mini{display:flex;align-items:center;gap:.5rem;color:#6b7b8b;font-weight:600;margin-bottom:.35rem}
.mini .dot{width:22px;height:22px;border-radius:50%;background:#ecf8d9;color:#3f7a00;display:grid;place-items:center;font-size:.95rem;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1)}
.b .prose{transition:color .3s ease}
.b:hover .prose{color:var(--muted)}

/* ===== How It Works Section ===== */
.how-it-works{padding:90px 0;background:linear-gradient(135deg,var(--navy) 0%,var(--aqua) 100%);position:relative;overflow:hidden}
.how-it-works::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');pointer-events:none}
.how-it-works .wrap{position:relative;z-index:1}
.how-it-works h2{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.how-it-works .step h3{color:#fff}
.how-it-works .step p{color:rgba(255,255,255,.9)}
.how-it-works-description{text-align:center;max-width:800px;margin:0 auto}
.how-it-works-description p{font-size:1.1rem;line-height:1.7;color:rgba(255,255,255,.9)}
.how-it-works h2{text-align:center;margin-bottom:3rem;font-size:clamp(1.7rem,3vw,2.2rem)}
.steps-container{display:grid;gap:3rem;grid-template-columns:repeat(3,1fr);margin-bottom:3rem}
.step{text-align:center;position:relative}
.step-number{width:60px;height:60px;background:var(--lime);color:#0c2b36;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;margin:0 auto 1.5rem;box-shadow:0 8px 20px rgba(158,220,61,.4)}
.step h3{margin-bottom:1.5rem;font-size:1.3rem;color:inherit}
.step-image{height:200px;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:center;position:relative;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.step-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.step:hover .step-image img{transform:scale(1.05)}
.step p{font-size:1rem;line-height:1.6;max-width:250px;margin:0 auto}

/* Step 1: Phone Mockup */
.phone-mockup{display:flex;align-items:center;gap:1rem}
.phone-screen{width:120px;height:200px;background:#000;border-radius:20px;padding:20px;position:relative;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.qr-code{width:60px;height:60px;background:#fff;border-radius:8px;margin:0 auto 20px;position:relative}
.qr-code::before{content:'';position:absolute;top:8px;left:8px;width:44px;height:44px;background:repeating-linear-gradient(0deg,transparent,transparent 2px,#000 2px,#000 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,#000 2px,#000 4px)}
.scan-button{background:var(--aqua);color:#fff;padding:8px 16px;border-radius:20px;font-size:.8rem;font-weight:600;text-align:center}
.vending-display{width:150px;height:180px;background:linear-gradient(135deg,#1A2B4C,#2C4A6B);border-radius:12px;padding:15px;box-shadow:0 8px 20px rgba(26,43,76,.3)}
.product-shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;height:100%}
.product{background:var(--lime);border-radius:4px;opacity:.8}

/* Step 2: Grab Mockup */
.grab-mockup{display:flex;align-items:center;gap:1rem;position:relative}
.person-silhouette{width:80px;height:120px;background:#333;border-radius:40px 40px 20px 20px;position:relative}
.person-silhouette::before{content:'';position:absolute;top:20px;left:50%;transform:translateX(-50%);width:40px;height:40px;background:#666;border-radius:50%}
.vending-open{width:150px;height:180px;background:linear-gradient(135deg,#1A2B4C,#2C4A6B);border-radius:12px;padding:15px;box-shadow:0 8px 20px rgba(26,43,76,.3);position:relative}
.vending-open::before{content:'';position:absolute;top:0;left:0;right:0;height:20px;background:var(--lime);border-radius:12px 12px 0 0}
.shelf-stocked{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;height:100%;margin-top:10px}
.item{background:var(--lime);border-radius:4px;opacity:.9}

/* Step 3: Enjoy Mockup */
.enjoy-mockup{display:flex;align-items:center;gap:1rem;position:relative}
.happy-person{width:80px;height:120px;background:linear-gradient(135deg,#FFB6C1,#FFA0B4);border-radius:40px 40px 20px 20px;position:relative}
.happy-person::before{content:'';position:absolute;top:20px;left:50%;transform:translateX(-50%);width:40px;height:40px;background:#FFB6C1;border-radius:50%}
.happy-person::after{content:'';position:absolute;top:35px;left:50%;transform:translateX(-50%);width:20px;height:10px;background:#333;border-radius:0 0 10px 10px}
.snack-item{width:60px;height:80px;background:linear-gradient(135deg,#8B4513,#A0522D);border-radius:8px;position:relative}
.snack-item::before{content:'';position:absolute;top:10px;left:10px;right:10px;height:40px;background:linear-gradient(135deg,#DEB887,#F4A460);border-radius:4px}


/* ===== Partners Section ===== */
.partners{padding:90px 0;background:#fff}
.partners h2{color:var(--navy);text-align:center;margin-bottom:1rem}
.partners-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:2rem}
.partner-card{text-align:center;padding:2rem 1.5rem;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(26,43,76,.06);transition:transform .25s ease, box-shadow .25s ease}
.partner-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(26,43,76,.12)}
.partner-icon{width:60px;height:60px;margin:0 auto 1rem;background:var(--mutedLight);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--aqua)}
.partner-icon svg{width:28px;height:28px;stroke:currentColor;stroke-width:2;fill:none}
.partner-card h3{color:var(--navy);margin-bottom:.5rem;font-size:1.1rem}
.partner-card p{color:var(--muted);font-size:.95rem;line-height:1.5;margin:0}

/* ===== Social Proof Section ===== */
.social-proof{padding:90px 0;background:linear-gradient(135deg,#f8f9fa 0%,#ffffff 100%)}
.social-proof h2{color:var(--navy);text-align:center;margin-bottom:3rem;font-size:clamp(1.8rem,3.5vw,2.4rem)}
.property-showcase{margin-bottom:4rem;overflow:hidden}
.property-strip{display:flex;animation:scrollProperties 40s linear infinite;gap:1rem;width:max-content}
.property-image{flex-shrink:0;width:300px;height:200px;border-radius:12px;overflow:hidden;box-shadow:0 8px 25px rgba(26,43,76,.15)}
.property-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.property-image:hover img{transform:scale(1.05)}
@keyframes scrollProperties{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.client-showcase{position:relative}
.client-card{background:#fff;border-radius:20px;padding:2rem;box-shadow:0 10px 30px rgba(26,43,76,.08);border:1px solid rgba(26,43,76,.06);transition:all .4s ease;position:relative;overflow:hidden;height:100%}
.client-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--aqua),var(--lime));transform:scaleX(0);transition:transform .4s ease}
.client-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(26,43,76,.15)}
.client-card:hover::before{transform:scaleX(1)}
.client-logo{margin-bottom:1.5rem}
.logo-placeholder{font-size:1.2rem;font-weight:700;color:var(--navy);padding:1rem;background:linear-gradient(135deg,var(--aqua),var(--lime));color:#fff;border-radius:12px;text-align:center}
.client-info{margin-bottom:1.5rem}
.client-info h3{color:var(--navy);font-size:1.3rem;margin-bottom:.5rem;font-weight:700}
.client-info p{color:var(--muted);font-size:1rem;line-height:1.5}
.client-stats{display:flex;gap:2rem;justify-content:space-between}
.stat{text-align:center}
.stat-number{display:block;font-size:1.8rem;font-weight:800;color:var(--aqua);line-height:1}
.stat-label{display:block;font-size:.9rem;color:var(--muted);margin-top:.25rem;text-transform:uppercase;letter-spacing:.5px}

.testimonials-showcase{display:grid;gap:2rem;grid-template-columns:repeat(2,1fr)}
.testimonial-card{background:#fff;border-radius:20px;padding:2.5rem;box-shadow:0 15px 40px rgba(26,43,76,.1);border:1px solid rgba(26,43,76,.08);transition:all .4s ease;position:relative;overflow:hidden}
.testimonial-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--lime),var(--aqua));transform:scaleX(0);transition:transform .4s ease}
.testimonial-card:hover{transform:translateY(-8px);box-shadow:0 25px 60px rgba(26,43,76,.2)}
.testimonial-card:hover::before{transform:scaleX(1)}
.testimonial-content{position:relative}
.quote-mark{font-size:4rem;color:var(--aqua);opacity:.3;position:absolute;top:-1rem;left:-.5rem;font-family:serif;line-height:1}
.testimonial-content p{font-size:1.1rem;line-height:1.7;color:var(--navy);margin-bottom:1.5rem;font-style:italic;position:relative;z-index:1}
.testimonial-author{display:flex;justify-content:space-between;align-items:center}
/* (reverted) keep default author layout; stars remain to the right on desktop */
.author-info h4{color:var(--navy);font-size:1.1rem;margin-bottom:.25rem;font-weight:700}
.author-info span{color:var(--muted);font-size:.95rem}
.rating{color:var(--lime);font-size:1.2rem}

/* ===== CTA / FAQ / Footer ===== */
.cta{padding:90px 0;text-align:center;background:linear-gradient(135deg,var(--navy) 0%,var(--aqua) 100%);color:#fff;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');pointer-events:none}
.cta h2{margin-bottom:.3rem;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.cta p{color:rgba(255,255,255,.9)}
.faq{padding:90px 0;background:#fff}
.qgrid{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.q{border:1px solid var(--border);border-radius:12px;padding:16px;background:#fff;box-shadow:0 6px 18px rgba(26,43,76,.06)}
.q h3{color:var(--navy);margin-bottom:.3rem}
footer{padding:40px 0;background:var(--charcoal);color:#fff}
footer .row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ===== Contact ===== */
.contact{padding:90px 0;background:var(--navy)}
.contact h2{text-align:center;color:#fff;margin-bottom:1.5rem}
.contact-form{max-width:640px;margin:0 auto;display:grid;gap:14px}
.contact-form label{display:grid;gap:6px;font-weight:600;color:#fff}
.contact-form input,.contact-form textarea{width:100%;padding:.8rem 1rem;border:1px solid var(--border);border-radius:10px;background:#fff;font-size:1rem;color:var(--text)}
.contact-form input:focus,.contact-form textarea:focus{outline:3px solid rgba(0,184,217,.2);border-color:var(--aqua)}
.btn-cta{display:inline-block;justify-self:start;background:var(--lime);color:#0c2b36;border:none;padding:.9rem 1.1rem;border-radius:12px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(158,220,61,.3)}
.btn-cta:hover{background:var(--limeDark);transform:translateY(-2px)}

/* ===== Micro Animations ===== */
/* float for pills */
@keyframes floaty { from { transform:translateY(0) } 50% { transform:translateY(-3px) } to { transform:translateY(0) } }
.pill:nth-child(1){animation:floaty 5s ease-in-out infinite}
.pill:nth-child(2){animation:floaty 5.6s ease-in-out infinite}
.pill:nth-child(3){animation:floaty 6.2s ease-in-out infinite}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* upward reveal for problem section */
.problem .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease, transform .8s ease}
.problem .reveal.in{opacity:1;transform:translateY(0)}

/* micro animations for benefits and partners */
.benefits .b{opacity:0;transform:translateY(30px) scale(0.95);transition:all .6s ease}
.benefits .b.in{opacity:1;transform:translateY(0) scale(1)}

.partners .partner-card{opacity:0;transform:translateY(30px) scale(0.95);transition:all .6s ease}
.partners .partner-card.in{opacity:1;transform:translateY(0) scale(1)}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* ===== Premium Effects ===== */
.hero{position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%,rgba(0,184,217,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(158,220,61,.1) 0%,transparent 50%);pointer-events:none}

.benefits .b{position:relative;overflow:hidden}
.benefits .b::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .6s}
.benefits .b:hover::after{left:100%}

.partner-card{position:relative;overflow:hidden}
.partner-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--aqua),var(--lime));transform:scaleX(0);transition:transform .3s ease}
.partner-card:hover::before{transform:scaleX(1)}

.step{position:relative}
.step::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(0,184,217,.1),transparent);border-radius:50%;transform:translate(-50%,-50%);transition:all .6s ease}
.step:hover::before{width:200px;height:200px}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .hero .grid,.problem .grid,.solution .grid,.b-grid,.qgrid{grid-template-columns:1fr}
  .comparison-container{grid-template-columns:1fr;gap:1rem}
  .vs{margin:1rem auto}
  .logos{grid-template-columns:repeat(2,1fr)}
  .partners-grid{grid-template-columns:repeat(2,1fr)}
  .steps-container{grid-template-columns:1fr;gap:2rem}
  .property-image{width:250px;height:160px}
  .testimonials-showcase{grid-template-columns:1fr;gap:1.5rem}
}

@media (max-width:768px){
  /* tighten spacing for problem title section */
  .solution{padding:64px 0}
  .problem-title{margin-bottom:1.5rem;font-size:clamp(1.4rem,5vw,1.8rem)}
  /* (reverted) keep original testimonial layout on mobile */
  .logos{grid-template-columns:1fr}
  .pills{justify-content:center}
  .hero .pills.full-row{grid-column:1 / -1;margin-top:12px;order:3}
  .hero .grid{gap:2rem}
  .hero .visual{order:2}
  .hero .grid > div:first-child{padding-left:8px}
  header .nav{align-items:center}
  .nav-toggle{display:block}
  header nav{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(26,43,76,.98);border-bottom:1px solid rgba(255,255,255,.12);padding:.6rem 20px;flex-direction:column;align-items:flex-start;gap:.2rem}
  header nav.open{display:flex}
  header nav a{padding:.6rem .4rem}
  .nav-dropdown{width:100%}
  .nav-dropdown-content{position:static;min-width:0;width:100%;margin-top:.2rem}
  .nav-dropbtn{width:100%;justify-content:space-between;padding:.6rem .4rem}
  .nav-cta{align-self:stretch;text-align:center;margin-top:.2rem}
  .partners-grid{grid-template-columns:1fr}
  .comparison-container{max-width:100%}
  /* Keep old vs smart inline on mobile; scale to avoid overflow */
  .comparison-container{grid-template-columns:42% auto 42%;gap:clamp(6px,3vw,16px)}
  .vending-comparison{width:100%;max-width:none;height:auto}
  .vs{width:clamp(24px,12vw,40px);height:clamp(24px,12vw,40px);font-size:1rem}
  .phone-mockup,.grab-mockup,.enjoy-mockup{flex-direction:column;gap:.5rem}
  .phone-screen{width:100px;height:160px}
  .vending-display,.vending-open{width:120px;height:140px}
}

/* Ultra-small devices (e.g., iPhone SE) */
@media (max-width:360px){
  .wrap{padding:0 12px}
  /* prevent any overflow in the solution/comparison area */
  .solution .wrap{overflow:hidden}
  .comparison-container{max-width:100%;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px}
  .vending-comparison{max-width:90px;width:90px;height:auto}
  .old-vending h3, .new-vending h3{font-size:.9rem;white-space:normal;margin-bottom:.5rem}
  .vs{width:28px;height:28px;font-size:.85rem}
}

/* Prevent horizontal overflow */
html,body{overflow-x:hidden}