/* ============================================================
   Smart.Payment.WEB — public (customer) design system
   Ported from the s3vending.eu reference design.
   Admin pages do NOT use this file (they keep Bootstrap).
   ============================================================ */

/* ============ FONTS (self-hosted) ============ */
/* Sora — display. Latin only (no Cyrillic glyphs exist for this family). */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Figtree — body. Latin only (no Cyrillic glyphs exist for this family). */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope — Cyrillic-capable fallback: Sora/Figtree claim only Latin ranges,
   so Bulgarian text falls through here instead of Segoe UI. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* IBM Plex Mono — mono accents; has native Cyrillic. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexmono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexmono-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ============ TOKENS ============ */
:root{
  --grass:#57B33B;        /* primary — light grass green */
  --grass-deep:#3D8F27;   /* hover / emphasis */
  --lime:#A9E18B;         /* light accent */
  --mist:#F1F8EC;         /* tinted surface */
  --line:#DCEBD1;         /* hairlines on tint */
  --ink:#16240F;          /* near-black green */
  --slate:#4C5A45;        /* muted body text */
  --white:#FFFFFF;
  --display:'Sora','Manrope','Segoe UI',Arial,sans-serif;
  --body:'Figtree','Manrope','Segoe UI',Arial,sans-serif;
  --mono:'IBM Plex Mono','Courier New',monospace;
  --radius:16px;
  --container:1120px;
}

/* ============ BASE ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--white);line-height:1.6;font-size:17px;min-height:100vh;display:flex;flex-direction:column}
img,svg{display:block}
a{color:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;width:100%}
h1,h2,h3{font-family:var(--display);line-height:1.14;letter-spacing:-0.02em}
:focus-visible{outline:3px solid var(--grass);outline-offset:3px;border-radius:4px}
main{flex:1;display:flex;flex-direction:column}
main>*{width:100%}

/* keypad slot-code eyebrow */
.slot{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--grass-deep);text-transform:uppercase;margin-bottom:18px}
.slot .key{display:inline-grid;place-items:center;width:34px;height:34px;border:1.5px solid var(--grass);border-radius:9px;background:var(--white);color:var(--ink);font-weight:500;letter-spacing:0;box-shadow:0 2px 0 var(--line)}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:16px;text-decoration:none;padding:14px 26px;border-radius:999px;transition:transform .15s ease,background .15s ease,color .15s ease;cursor:pointer;border:0}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--grass);color:var(--white)}
.btn-primary:hover{background:var(--grass-deep)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--grass);color:var(--grass-deep)}

/* ============ NAV ============ */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.brand svg{width:38px;height:38px;flex:none}
.brand-name{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.02em;white-space:nowrap}
.brand-name em{font-style:normal;color:var(--grass)}
.nav-right{display:flex;align-items:center;gap:26px}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none}
.nav-links a{text-decoration:none;font-weight:500;font-size:15.5px;color:var(--slate)}
.nav-links a:hover{color:var(--grass-deep)}
.nav .btn{padding:10px 20px;font-size:15px}
.nav-links a.btn{color:var(--white)}
.lang{display:flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.lang button{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;padding:7px 13px;background:var(--white);border:0;color:var(--slate);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--grass);color:var(--white)}
.lang button:not([aria-pressed="true"]):hover{color:var(--grass-deep)}

/* ============ HERO ============ */
.hero{background:linear-gradient(180deg,var(--white) 0%,var(--mist) 100%);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:84px 0 72px}
.hero h1{font-size:clamp(36px,4.6vw,56px);font-weight:700;margin-bottom:22px}
.hero h1 .hl{color:var(--grass)}
.hero p.lede{font-size:19px;color:var(--slate);max-width:34em;margin-bottom:34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-note{margin-top:26px;font-family:var(--mono);font-size:13px;color:var(--slate)}
.hero-note b{color:var(--grass-deep);font-weight:500}

/* the machine */
.machine-wrap{display:flex;justify-content:center}
.machine{width:min(380px,100%);filter:drop-shadow(0 24px 40px rgba(22,36,15,.14))}

/* machine animation — one orchestrated 8s loop: phone in → scan pulse → paid → vend */
@keyframes phoneIn{
  0%,4%{transform:translate(92px,30px);opacity:0}
  14%,58%{transform:translate(0,0);opacity:1}
  68%,100%{transform:translate(92px,30px);opacity:0}
}
@keyframes scanPulse{
  0%,14%{transform:scale(.55);opacity:0}
  20%{transform:scale(.6);opacity:.9}
  32%{transform:scale(1.25);opacity:0}
  38%{transform:scale(.6);opacity:.9}
  48%{transform:scale(1.25);opacity:0}
  100%{opacity:0}
}
@keyframes showAmount{0%,46%{opacity:1}51%,94%{opacity:0}100%{opacity:1}}
@keyframes showOk{0%,46%{opacity:0}51%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes phoneOk{0%,46%{opacity:0}51%,64%{opacity:1}68%,100%{opacity:0}}
@keyframes ledBlink{0%,46%{fill:#C9DFBE}51%,90%{fill:#57B33B}100%{fill:#C9DFBE}}
@keyframes drop{
  0%,55%{transform:translateY(0);opacity:1}
  63%{transform:translateY(148px);opacity:1}
  66%{transform:translateY(140px)}
  69%,84%{transform:translateY(148px);opacity:1}
  90%,96%{transform:translateY(148px);opacity:0}
  97%,100%{transform:translateY(0);opacity:0}
}
.anim-phone{animation:phoneIn 8s ease-in-out infinite;transform-box:fill-box}
.anim-pulse{animation:scanPulse 8s ease-out infinite;transform-box:fill-box;transform-origin:center}
.anim-amount{animation:showAmount 8s steps(1) infinite}
.anim-ok{animation:showOk 8s steps(1) infinite}
.anim-phone-ok{animation:phoneOk 8s steps(1) infinite}
.anim-led{animation:ledBlink 8s steps(1) infinite}
.anim-drop{animation:drop 8s cubic-bezier(.5,0,.7,1) infinite;transform-box:fill-box}

/* ============ TICKER ============ */
.ticker{background:var(--ink);color:var(--mist);overflow:hidden}
.ticker-track{display:flex;width:max-content;animation:tick 36s linear infinite;padding:13px 0}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker span{font-family:var(--mono);font-size:13.5px;letter-spacing:.06em;white-space:nowrap;padding:0 28px;border-right:1px solid rgba(255,255,255,.14)}
.ticker .ok{color:var(--lime)}

/* ============ SECTIONS ============ */
section{padding:96px 0}
.sec-head{max-width:640px;margin-bottom:52px}
.sec-head h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;margin-bottom:14px}
.sec-head p{color:var(--slate);font-size:18px}

/* how it works */
#how{background:var(--white)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:var(--mist);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;position:relative;transition:transform .18s ease,box-shadow .18s ease}
.step:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(22,36,15,.08)}
.step .press{font-family:var(--mono);font-size:13px;color:var(--grass-deep);letter-spacing:.14em;display:inline-block;border:1.5px solid var(--grass);border-radius:8px;padding:5px 10px;margin-bottom:18px;background:var(--white);box-shadow:0 2px 0 var(--line)}
.step .s-icon{width:52px;height:52px;border-radius:14px;background:var(--grass);display:grid;place-items:center;margin-bottom:20px}
.step h3{font-size:20px;margin-bottom:10px}
.step p{color:var(--slate);font-size:16px}
.step::after{content:"";position:absolute;top:50%;right:-22px;width:22px;height:2px;background:var(--grass);opacity:.5}
.step:last-child::after{display:none}
.how-note{margin-top:34px;font-family:var(--mono);font-size:13.5px;color:var(--slate);display:flex;align-items:center;gap:10px}
.how-note .dot{width:8px;height:8px;border-radius:50%;background:var(--grass);flex:none}

/* demo / reviewers & partners */
#demo{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.demo-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.demo-copy h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:20px}
.demo-copy p{color:var(--slate);margin-bottom:18px;font-size:17.5px}
.demo-link{font-family:var(--display);font-weight:600;color:var(--grass-deep);text-decoration:none;font-size:17px;border-bottom:2px solid var(--lime);padding-bottom:2px}
.demo-link:hover{color:var(--ink);border-color:var(--grass)}
.demo-card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:0 18px 36px rgba(22,36,15,.07)}
.demo-card .dc-top{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.demo-card .dc-top svg{width:30px;height:30px}
.demo-card .dc-top b{font-family:var(--display);font-size:15.5px}
.demo-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px dashed var(--line);font-size:15.5px}
.demo-row:last-of-type{border-bottom:0}
.demo-row .lbl{color:var(--slate)}
.demo-row .val{font-family:var(--mono);font-size:13.5px}
.demo-row .val.ok{color:var(--grass-deep);font-weight:500}
.demo-card .btn{width:100%;justify-content:center;margin-top:16px}

/* network map — online machines (landing) */
#network{background:var(--white)}
.map-canvas{height:460px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--mist)}
.map-note{margin-top:26px;font-family:var(--mono);font-size:13.5px;color:var(--slate);display:flex;align-items:center;gap:10px}
.map-note .dot{width:8px;height:8px;border-radius:50%;background:var(--grass);flex:none}

/* ============ STATUS PAGES (Pay/Status, Pay/Result, Error) ============ */
main.main-status{flex-direction:row;align-items:center;background:linear-gradient(180deg,var(--white) 0%,var(--mist) 100%)}
.status-wrap{max-width:560px;margin:0 auto;padding:64px 24px 88px;text-align:center;width:100%}
.status-wrap h1{font-size:clamp(28px,6vw,40px);font-weight:700;margin-bottom:14px}
.status-wrap p.lede{color:var(--slate);font-size:18px;max-width:32em;margin:0 auto 30px}
.status-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.status-wrap .slot{justify-content:center}

/* status icon medallion */
.status-icon{width:88px;height:88px;border-radius:26px;display:grid;place-items:center;margin:0 auto 26px;background:var(--white);border:1.5px solid var(--line);box-shadow:0 14px 30px rgba(22,36,15,.08)}
.status-icon svg{width:44px;height:44px}

/* draw-on check */
@keyframes drawCheck{from{stroke-dashoffset:48}to{stroke-dashoffset:0}}
.check-path{stroke-dasharray:48;stroke-dashoffset:48;animation:drawCheck .6s .2s ease forwards}

/* mono hint line */
.status-note{margin-top:30px;font-family:var(--mono);font-size:13px;color:var(--slate);display:inline-flex;align-items:center;gap:10px}
.status-note .dot{width:8px;height:8px;border-radius:50%;background:var(--grass);flex:none}
.status-notes{display:grid;justify-items:center;gap:8px;margin-top:30px}
.status-notes .status-note{margin-top:0}

/* failed-state accents */
.state-failed .status-icon{border-color:#F3D9C9}
.state-failed .slot{color:#B4562A}
.state-failed .slot .key{border-color:#D97A48}

/* ============ CONTENT PAGES (About, Privacy, Legal, Demo, Dev) ============ */
.page{padding:64px 0 96px;background:var(--white);flex:1}
.page-mist{background:linear-gradient(180deg,var(--white) 0%,var(--mist) 100%)}
.container-narrow{max-width:760px;margin:0 auto;padding:0 24px;width:100%}
.page-head{margin-bottom:36px}
.page-head h1{font-size:clamp(28px,4vw,40px);font-weight:700;margin-bottom:10px}
.page-head .lede{color:var(--slate);font-size:18px;max-width:38em;margin-top:6px}
.page-date{margin-top:10px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--slate)}

.prose h2{font-size:21px;margin:36px 0 12px}
.prose p{color:var(--slate);margin-bottom:14px}
.prose ul,.prose ol{color:var(--slate);padding-left:22px;display:grid;gap:8px;margin-bottom:14px}
.prose a{color:var(--grass-deep);text-decoration:underline;text-decoration-color:var(--lime);text-underline-offset:3px}
.prose a:hover{color:var(--ink);text-decoration-color:var(--grass)}
.prose strong{color:var(--ink)}
code{font-family:var(--mono);font-size:.9em;background:var(--mist);border:1px solid var(--line);border-radius:6px;padding:2px 6px}

/* key/value definition grid (About company details, Dev test page) */
.kv{display:grid;grid-template-columns:220px 1fr;gap:10px 24px;margin:18px 0 28px}
.kv dt{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);font-weight:500}
.kv dd{margin:0}
.kv dd a{color:var(--grass-deep);text-decoration:underline;text-decoration-color:var(--lime);text-underline-offset:3px}

/* ============ DEMO PRODUCT GRID ============ */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
.product{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px 22px;text-align:center;transition:transform .18s ease,box-shadow .18s ease}
.product:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(22,36,15,.08)}
.product .p-emoji{font-size:44px;line-height:1;margin-bottom:14px}
.product h2{font-size:18px;margin-bottom:6px}
.product .p-slot{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--grass-deep);text-transform:uppercase}
.product .p-price{font-family:var(--display);font-weight:700;font-size:22px;margin:12px 0 16px}
.product .btn{width:100%;justify-content:center}

/* ============ FOOTER ============ */
footer{background:var(--ink);color:#BFCDB5;padding:56px 0 36px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;margin-bottom:44px}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.foot-brand svg{width:34px;height:34px;flex:none}
.foot-brand span{font-family:var(--display);font-weight:700;font-size:19px;color:var(--white)}
.foot-brand span em{font-style:normal;color:var(--lime)}
footer h5{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.18em;color:var(--lime);text-transform:uppercase;margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:10px}
footer a{color:#BFCDB5;text-decoration:none}
footer a:hover{color:var(--white)}
footer address{font-style:normal;line-height:1.7;max-width:32em}
.foot-legal{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em}
.foot-legal b{color:var(--white);font-weight:500}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .brand-name{font-size:18px}
}
/* the company wordmark is much longer than the reference's "s3vending.eu":
   below 700px it must wrap or it collides with the Demo pill */
@media (max-width:700px){
  .brand-name{font-size:16px;white-space:normal;line-height:1.15}
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;padding:56px 0 48px;gap:40px}
  .machine-wrap{order:-1}
  .machine{width:min(300px,82%)}
  .steps{grid-template-columns:1fr}
  .step::after{display:none}
  .demo-grid{grid-template-columns:1fr;gap:36px}
  .map-canvas{height:400px}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .nav-links li.hide-m{display:none}
  section{padding:72px 0}
  .products{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .nav-links a.btn{display:none}
  .status-wrap{padding:48px 20px 72px}
  .products{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dt{margin-top:12px}
  .page{padding:48px 0 72px}
  .map-canvas{height:auto;aspect-ratio:3/4;min-height:400px}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.step,.product{transition:none}
  .anim-phone{animation:none;transform:translate(0,0);opacity:1}
  .anim-pulse{animation:none;opacity:0}
  .anim-amount{animation:none;opacity:0}
  .anim-ok{animation:none;opacity:1}
  .anim-phone-ok{animation:none;opacity:1}
  .anim-led{animation:none;fill:#57B33B}
  .anim-drop{animation:none}
  .check-path{animation:none;stroke-dashoffset:0}
}