/* RestroPOS marketing site — Black & Orange professional theme.
   Loaded only by the site layout (body.site-page); the app keeps app.css. */
:root{ --org:#ff7a18; --org2:#ffa03d; --ink2:#f4f1ea; --mut:#a8a29e; --panel:#101114; --panel2:#16171b; --line2:#26262c; }
body.site-page{ background:#07080a; color:var(--ink2); margin:0; font-family:inherit; }
body.site-page a{ text-decoration:none; }

/* Nav */
body.site-page .site-nav{ background:rgba(7,8,10,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line2); }
body.site-page .site-nav a{ color:#d6d3cd; font-weight:500; }
body.site-page .site-nav a:hover{ color:#fff; }
body.site-page .site-nav .logo{ color:#fff; letter-spacing:.2px; }
body.site-page .logo b{ color:var(--org); }
body.site-page .iconbtn{ background:#17181c; color:#e7e5e0; border:1px solid var(--line2); border-radius:9px; padding:6px 10px; cursor:pointer; }
body.site-page .btn{ display:inline-block; background:linear-gradient(135deg,var(--org),#ff8f2e); color:#14100b; font-weight:800;
  padding:13px 26px; border-radius:12px; border:0; box-shadow:0 8px 24px rgba(255,122,24,.28); transition:.18s; font-size:15.5px; }
body.site-page .btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(255,122,24,.38); }
body.site-page .btn.ghost{ background:transparent; color:#fff; border:1.5px solid #3a3a41; box-shadow:none; }
body.site-page .btn.ghost:hover{ border-color:var(--org); color:var(--org2); }
body.site-page .btn.dark{ background:#0c0c0e; color:#fff; box-shadow:none; }
body.site-page nav .btn{ padding:9px 18px; }

/* Hero */
body.site-page .hero{ background:
  radial-gradient(900px 480px at 85% -10%, rgba(255,122,24,.20), transparent 60%),
  radial-gradient(700px 400px at 8% 110%, rgba(255,122,24,.10), transparent 60%),
  linear-gradient(180deg, rgba(7,8,10,.80) 0%, rgba(7,8,10,.72) 55%, rgba(7,8,10,.94) 100%),
  url('../site/hero-food.jpg') center 38% / cover no-repeat, #07080a;
  color:#fff; padding:84px 28px 30px; text-align:center; }
body.site-page .hero h1{ font-size:46px; line-height:1.42; padding:10px 0 14px; margin:0 auto 18px; max-width:860px; font-weight:800; letter-spacing:-.5px; }
body.site-page .hero h1 .grad{ background:linear-gradient(92deg,var(--org),var(--org2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.site-page .hero p{ color:var(--mut); max-width:660px; margin:0 auto 28px; font-size:18px; line-height:1.65; }
body.site-page .badges{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:26px; }
body.site-page .badge{ border:1px solid #33333a; background:#121316; color:#e8e5df; border-radius:999px; padding:6px 14px; font-size:13px; font-weight:600; }
body.site-page .badge.hot{ border-color:rgba(255,122,24,.55); color:var(--org2); background:rgba(255,122,24,.08); }
body.site-page .trust{ color:#8a8782; font-size:13.5px; margin-top:16px; }
body.site-page .trust b{ color:#d8d5cf; font-weight:600; }

/* Hero product mock */
.mock{ max-width:980px; margin:44px auto 0; background:linear-gradient(180deg,#131418,#0c0d10); border:1px solid #2a2a31; border-radius:18px;
  box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,122,24,.06); overflow:hidden; text-align:left; }
.mock-bar{ display:flex; gap:7px; align-items:center; padding:12px 16px; border-bottom:1px solid #232329; background:#0e0f12; }
.mock-bar i{ width:11px; height:11px; border-radius:50%; background:#2c2c33; display:block; }
.mock-bar i:first-child{ background:var(--org); }
.mock-bar span{ margin-left:8px; color:#8a8782; font-size:12.5px; }
.mock-body{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:18px; }
.mock-stat{ background:var(--panel2); border:1px solid #232329; border-radius:13px; padding:14px; }
.mock-stat small{ color:#8a8782; display:block; font-size:12px; }
.mock-stat b{ font-size:20px; color:#fff; }
.mock-stat em{ font-style:normal; color:var(--org2); font-size:12px; font-weight:700; }
.mock-wide{ grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.mock-ticket{ background:#0f1013; border:1px solid #232329; border-left:4px solid var(--org); border-radius:11px; padding:12px 14px; }
.mock-ticket b{ color:#fff; font-size:14px; } .mock-ticket p{ color:#8a8782; font-size:12.5px; margin:5px 0 0; }
.mock-ticket .st{ color:var(--org2); font-weight:700; font-size:12px; }

/* Sections */
body.site-page .wrap{ max-width:1180px; margin:0 auto; padding:56px 28px; }
body.site-page .sec-head{ text-align:center; max-width:680px; margin:0 auto 34px; }
body.site-page .sec-head h2{ font-size:32px; margin:0 0 10px; color:#fff; letter-spacing:-.3px; }
body.site-page .sec-head p{ color:var(--mut); margin:0; line-height:1.6; }
body.site-page .eyebrow{ color:var(--org); font-weight:800; font-size:13px; letter-spacing:2.5px; text-transform:uppercase; display:block; margin-bottom:12px; }
body.site-page .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
body.site-page .card{ background:var(--panel); border:1px solid var(--line2); border-radius:16px; padding:24px; color:var(--ink2); }
body.site-page .card h3{ margin:0 0 9px; color:#fff; font-size:18.5px; }
body.site-page .card p{ color:var(--mut); line-height:1.65; margin:0; font-size:15px; }
body.site-page .ficon{ width:46px; height:46px; border-radius:12px; background:rgba(255,122,24,.13); border:1px solid rgba(255,122,24,.35);
  display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; }

/* Steps */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.step{ background:var(--panel); border:1px solid var(--line2); border-radius:16px; padding:24px; }
.step .n{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--org),#ff8f2e); color:#14100b;
  font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.step h3{ color:#fff; margin:0 0 8px; } .step p{ color:var(--mut); margin:0; line-height:1.6; font-size:15px; }

/* Checklist band */
.band{ background:linear-gradient(180deg,#0d0e11,#0a0b0d); border-top:1px solid var(--line2); border-bottom:1px solid var(--line2); }
.checks{ display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; max-width:900px; margin:0 auto; }
.checks div{ background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:13px 16px; color:#e8e5df; font-size:15px; }
.checks b{ color:var(--org2); margin-right:8px; }

/* Pricing teaser */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
.plan{ background:var(--panel); border:1px solid var(--line2); border-radius:18px; padding:26px; text-align:left; }
.plan.pop{ border-color:var(--org); box-shadow:0 18px 50px rgba(255,122,24,.15); position:relative; }
.plan .tag{ position:absolute; top:-12px; right:18px; background:linear-gradient(135deg,var(--org),#ff8f2e); color:#14100b; font-weight:800;
  font-size:12px; padding:4px 12px; border-radius:999px; }
.plan h3{ color:#fff; margin:0 0 4px; } .plan .price{ font-size:34px; font-weight:800; color:#fff; }
.plan .price small{ font-size:14px; color:var(--mut); font-weight:500; }
.plan ul{ list-style:none; padding:0; margin:16px 0 20px; color:var(--mut); line-height:2; font-size:14.5px; }
.plan ul li::before{ content:"✓"; color:var(--org); font-weight:800; margin-right:9px; }

/* CTA + footer */
.cta-band{ background:linear-gradient(120deg,#ff7a18,#ff8f2e 55%,#ffa03d); border-radius:22px; padding:44px 30px; text-align:center; color:#191104; }
.cta-band h2{ margin:0 0 10px; font-size:30px; } .cta-band p{ margin:0 auto 22px; max-width:560px; color:#3d2a12; line-height:1.6; }
body.site-page footer.site{ background:#050506; border-top:1px solid var(--line2); color:#8a8782; padding:34px 28px; }
body.site-page table.cmp{ background:var(--panel); color:var(--ink2); }
body.site-page input, body.site-page select, body.site-page textarea{ background:#121316; color:#fff; border-color:#2c2c33; }

@media(max-width:900px){
  body.site-page .grid, .steps, .plans{ grid-template-columns:1fr; }
  .checks{ grid-template-columns:1fr; }
  .mock-body{ grid-template-columns:1fr 1fr; } .mock-wide{ grid-template-columns:1fr; }
  body.site-page .hero{ padding:54px 18px 22px; } body.site-page .hero h1{ font-size:31px; }
  body.site-page .wrap{ padding:40px 18px; }
}