:root{
  --orange:#f57c00;
  --orange-dark:#cf6300;
  --charcoal:#32323b;
  --ink:#17171d;
  --muted:#666873;
  --soft:#f5f5f7;
  --white:#fff;
  --shadow:0 28px 70px rgba(20,20,28,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif; color:var(--ink); background:linear-gradient(180deg,#fff 0%,#f7f7fa 100%); overflow-x:hidden;}
a{color:inherit; text-decoration:none}.section-pad{padding:clamp(70px,9vw,120px) clamp(20px,5vw,78px)}
.site-header{position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; padding:18px clamp(20px,5vw,78px); backdrop-filter:blur(16px); background:rgba(255,255,255,.82); border-bottom:1px solid rgba(0,0,0,.06)}
/*.brand{font-weight:900; line-height:.85; letter-spacing:-.05em; font-size:clamp(24px,4vw,46px)}*/
.brand-direct{display:block; color:var(--orange); font-style:italic} /*not in use */
.brand-vending{display:block; color:#111; letter-spacing:-.03em} /*not in use */
.brand {display: flex; align-items: center;  text-decoration: none; }
.brand-logo { height: 80px; width: auto; display: block; }

nav{display:flex; gap:22px; font-size:14px; font-weight:700; color:var(--charcoal)}nav a:hover{color:var(--orange)}

.hero{min-height:calc(100vh - 88px); display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.9fr); gap:48px; align-items:center; position:relative; overflow:hidden;}
.hero:after{content:""; position:absolute; left:-8vw; right:-8vw; bottom:9%; height:110px ; background:linear-gradient(90deg,var(--orange),var(--charcoal)); transform:skewY(-5deg); opacity:.12; z-index:-1}

.eyebrow{text-transform:uppercase; letter-spacing:.13em; color:var(--orange); font-weight:900; font-size:13px; margin:0 0 14px}h1,h2,h3{letter-spacing:-.055em; margin:0}h1{font-size:clamp(46px,8vw,92px); line-height:.91; max-width:780px}h2{font-size:clamp(34px,5.4vw,66px); line-height:.95}h3{font-size:24px}
.intro{font-size:clamp(18px,2vw,22px); line-height:1.55; color:var(--muted); max-width:660px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}
.button{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; border-radius:999px; font-weight:900}
.button-primary{background:var(--orange); color:white; box-shadow:0 18px 38px rgba(245,124,0,.28)}
.button-primary:hover{background:var(--orange-dark)}
.button-ghost{background:#fff; border:1px solid rgba(0,0,0,.12)}
.hero-machine{position:relative; display:grid; place-items:center; min-height:560px}
.machine-card{position:relative; padding:32px; background:white; border-radius:42px; box-shadow:var(--shadow); transform:rotate(-2deg)}.orbit{position:absolute; border-radius:50%; border:24px solid var(--orange); width:530px; height:230px; transform:rotate(-16deg); opacity:.9}
/*.orbit-two{border-color:var(--charcoal); width:580px; height:250px; opacity:.8; transform:rotate(8deg)}*/


.machine-wrapper { position: relative; display: inline-block; overflow: hidden; }
.hero-machine-image { width: 100%; max-width: 550px; height: auto; display: block; /*filter: drop-shadow(0 30px 40px rgba(0,0,0,.12));*/ }
.png-glass-shine { position: absolute; inset: 0; pointer-events: none; 
    background: 
        radial-gradient( 
            circle at var(--shine-x, 50%) var(--shine-y, 50%), 
            rgba(255,255,255,.45), 
            rgba(255,255,255,.12) 12%, 
            rgba(255,255,255,0) 28% ); 
    mix-blend-mode: screen; opacity: 0; transition: opacity .25s ease; }

.machine-png-wrap:hover .glass-shine {
  opacity: 1;
}

.machine-wrapper:hover .png-glass-shine { opacity: 1; }
.machine-png-wrap { position: relative; width: min(500px, 100%); margin: 0 auto; }
.interactive-machine-png { width: 100%; height: auto; display: block; filter: drop-shadow(0 28px 40px rgba(0,0,0,.35)); }
.machine-png-wrap .hotspot { position: absolute; left: 38%; width: 38%; height: 11%; border: 0; border-radius: 999px; background: rgba(255, 122, 24, 0); cursor: pointer; z-index: 3; }

.machine-png-wrap .shelf-top { top: 18%; }
.machine-png-wrap .shelf-middle { top: 36%; }
.machine-png-wrap .shelf-bottom { top: 58%; }
.machine-png-wrap .hotspot:hover, .machine-png-wrap .hotspot.is-active { background: rgba(255, 122, 24, .18); box-shadow: 0 0 24px rgba(255, 122, 24, .55); }

.machine-png-wrap .glass-shine { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient( circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255,255,255,.38), rgba(255,255,255,.1) 12%, rgba(255,255,255,0) 28% ); mix-blend-mode: screen; opacity: 0; transition: opacity .25s ease; }
.machine-png-wrap:hover .glass-shine { opacity: 1; }

.glass-shine{position:absolute; inset:-25%; background:radial-gradient(circle at var(--shine-x) 38%,rgba(255,255,255,.55),transparent 18%); opacity:.22; pointer-events:none; z-index:6}
.shelf{position:absolute; left:6%; right:6%; height:20%; border:0; border-bottom:7px solid #484b58; background:repeating-linear-gradient(90deg,#e9562b 0 18px,#ffd55b 18px 34px,#31a86b 34px 50px,#43a4df 50px 66px); border-radius:10px; box-shadow:inset 0 -18px 20px rgba(0,0,0,.3); transition:transform 
    .35s ease,filter .35s ease,box-shadow .35s ease; cursor:pointer}

.hotspot:hover,.hotspot.is-active{transform:translateX(10px) scale(1.03); filter:saturate(1.25) brightness(1.12); box-shadow:0 0 28px rgba(245,124,0,.9),inset 0 -18px 20px rgba(0,0,0,.25)}

.section-heading{max-width:760px; margin-bottom:36px}
.feature-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.feature-card{background:white; border-radius:28px; padding:28px; box-shadow:0 16px 45px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.05)}
.feature-card span{font-size:34px}
.feature-card p{color:var(--muted); line-height:1.55}
.interactive{background:var(--charcoal); color:white}
.interactive .section-heading h2{max-width:840px}
.machine-demo{display:grid; grid-template-columns:minmax(300px,.75fr) minmax(280px,.55fr); gap:48px; align-items:center}
.interactive-machine{margin:auto}
.shelf-info{background:white; color:var(--ink); border-radius:34px; padding:34px; box-shadow:var(--shadow); min-height:340px}
.shelf-info p{color:var(--muted); font-size:18px; line-height:1.55}
.shelf-info ul{display:grid; gap:12px; margin:24px 0 0; padding:0; list-style:none}
.shelf-info li{padding:13px 16px; border-radius:14px; background:#f3f3f5; font-weight:800}

.cost{display:grid; grid-template-columns:1fr .8fr; gap:44px; align-items:center; background:white}
.cost h2{color:var(--orange); font-size:clamp(64px,11vw,130px)}
.cost p{font-size:20px; color:var(--muted); max-width:650px}
.cost-points{display:grid; gap:14px;}
.cost-points span{background:var(--soft); border-radius:22px; padding:22px; font-weight:900; font-size:20px;}
.contact{background:linear-gradient(135deg,var(--orange),#ff9b25); color:white;}
.contact-card{max-width:980px; margin:auto; text-align:center;}
.contact .eyebrow{color:white;}
.contact-links{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:34px;}
.contact-links a{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); padding:16px 20px; border-radius:999px; font-weight:900;}
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1; transform:none}

.machine-fit { background: radial-gradient(circle at top left, rgba(255, 122, 24, .16), transparent 32%), #f7f7f7;}
.fit-calculator { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr); gap: 2rem; align-items: stretch; max-width: 980px; margin: 0 auto; }
.slider-card, .result-card { background: #fff; border-radius: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.10); }
.slider-card { padding: 2rem; }
.slider-card label { display: block; font-weight: 800; color: #2f2f37; margin-bottom: 1rem; }
.employee-value { display: flex; align-items: baseline; gap: .5rem; margin-bottom: 1.4rem; }
.employee-value span { font-size: clamp(3rem, 8vw, 6rem); line-height: .9; font-weight: 900; color: #ff7a18; }
.employee-value small { font-size: 1rem; font-weight: 700; color: #555; }
.slider-card input[type="range"] { width: 100%; accent-color: #ff7a18; }
.range-labels { display: flex; justify-content: space-between; margin-top: .7rem; color: #777; font-weight: 700; }
.fit-results { display: grid; gap: 1rem; }
.result-card { padding: 1.35rem 1.5rem; }
.result-card span { display: block; color: #777; font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .35rem; }
.result-card strong { display: block; color: #2f2f37; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.1; }
.result-card.highlight { background: linear-gradient(135deg, #ff7a18, #ff9d2e); }
.result-card.highlight span, .result-card.highlight strong { color: #fff; }

@media (max-width: 760px) { .fit-calculator { grid-template-columns: 1fr; } }

@media (max-width:900px){.hero,.machine-demo,.cost{grid-template-columns:1fr}
    .hero-machine{min-height:460px}
    .feature-grid{grid-template-columns:repeat(2,1fr)}nav{display:none}
    .orbit{width:390px; height:170px}
    .orbit-two{width:430px; height:190px}}
@media (max-width:560px){
    .feature-grid{grid-template-columns:1fr}
    .site-header{align-items:flex-start}.machine-card{padding:18px}.mini{width:250px}.contact-links{flex-direction:column}.hero-actions{flex-direction:column}.button{width:100%}}