/*
 * Copyright 2026 Associazione di Promozione Sociale DigitalValut (ETS)
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* The front door. Same colours, same shapes and the same restraint as the app
   behind it, so arriving here and then opening it feels like one thing rather
   than two. Deliberately short: a page that takes a minute to read is a page
   nobody sends to anybody. */

:root{
  --bg:#08090b; --bg2:#0d0f13; --panel:#15181e; --line:#2a3039;
  --ink:#f4f6f8; --dim:#a4aeb9; --faint:#6b747f;
  --accent:#ff914d; --accent2:#ffab73; --accent-ink:#1a0e05;
  --ok:#3ddc97;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
  --r:18px;
  --shadow:0 10px 34px rgba(0,0,0,.40);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 560px at 50% -8%, rgba(255,145,77,.13), transparent 62%),
    radial-gradient(800px 500px at 88% 8%, rgba(255,95,109,.06), transparent 60%),
    var(--bg);
  color:var(--ink);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
main{max-width:940px;margin:0 auto;padding:0 20px}

/* ------------------------------------------------------------------ top -- */
.top{max-width:940px;margin:0 auto;padding:18px 20px;
  display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:0.9375rem}
.brand img{border-radius:9px}
.top select{margin-inline-start:auto;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:0.875rem;
  font-family:inherit}

/* ----------------------------------------------------------------- hero -- */
.hero{text-align:center;padding:34px 0 12px}
.hero .mark{border-radius:26px;box-shadow:var(--shadow)}
h1{font-size:clamp(1.9rem, 6vw, 3rem);line-height:1.15;margin:22px auto 0;
  max-width:16em;letter-spacing:-0.02em}
.lede{color:var(--dim);font-size:clamp(1rem, 2.4vw, 1.1875rem);
  margin:16px auto 0;max-width:32em}
.under{color:var(--faint);font-size:0.875rem;margin:14px 0 0}

.cta{display:inline-block;margin-top:26px;
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  color:var(--accent-ink);text-decoration:none;font-weight:800;
  font-size:1.125rem;padding:16px 38px;border-radius:99px;
  box-shadow:0 8px 26px rgba(255,145,77,.30);
  transition:transform .12s ease, box-shadow .12s ease}
.cta:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(255,145,77,.38)}
.cta:active{transform:translateY(0)}

/* ---------------------------------------------------------------- cards -- */
.cards{display:grid;gap:16px;margin:46px 0 0}
@media(min-width:760px){ .cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} }
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:var(--r);padding:22px;
  box-shadow:var(--shadow)}
.card h2{margin:0 0 8px;font-size:1.0625rem;line-height:1.35}
.card p{margin:0;color:var(--dim);font-size:0.9375rem}

/* ---------------------------------------------------------------- steps -- */
.sectitle{font-size:0.75rem;letter-spacing:.14em;color:var(--faint);
  text-transform:uppercase;font-weight:700;margin:0 0 14px}
.steps{margin:52px 0 0}
.steps ol{margin:0;padding:0;list-style:none;counter-reset:s;
  display:grid;gap:12px}
.steps li{counter-increment:s;position:relative;
  padding:15px 18px 15px 58px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg2);color:var(--dim);font-size:0.9375rem}
.steps li::before{content:counter(s);position:absolute;inset-inline-start:18px;top:14px;
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,145,77,.14);color:var(--accent2);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:0.8125rem}
[dir="rtl"] .steps li{padding:15px 58px 15px 18px}

/* -------------------------------------------------------------- hero QR -- */
/* Stays white even in dark mode, same rule as the app's own QR card: a
   scanner needs that contrast, and a QR inverted to match a dark theme is
   one most cameras refuse to read. */
.heroqr{display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  margin:28px auto 0;padding:14px;background:#fff;border-radius:14px;
  box-shadow:var(--shadow)}
.heroqr canvas{display:block;width:112px;height:112px;image-rendering:pixelated}
.heroqr span{color:#3a3f47;font-size:0.75rem;font-weight:700}

/* -------------------------------------------------------------- compare -- */
.compare{margin:52px 0 0}
.compare table{width:100%;border-collapse:collapse;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;font-size:0.9375rem}
.compare th,.compare td{padding:13px 14px;text-align:start;border-bottom:1px solid var(--line)}
.compare thead th{background:var(--bg2);color:var(--faint);font-size:0.75rem;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.compare thead th:nth-child(2){color:var(--accent2)}
.compare tbody td{color:var(--dim);background:var(--panel)}
.compare tbody td:first-child{color:var(--ink)}
.compare tbody tr:last-child td{border-bottom:none}
.compare tbody td:nth-child(2){color:var(--ok);font-weight:700}
.compare table{table-layout:fixed}
.compare th:not(:first-child),.compare td:not(:first-child){width:22%;text-align:center}

.last{text-align:center;margin:52px 0 10px}

/* --------------------------------------------------------------- footer -- */
footer{max-width:940px;margin:44px auto 0;padding:26px 20px 44px;
  border-top:1px solid var(--line);color:var(--faint);font-size:0.8125rem}
footer p{margin:0 0 8px}
footer a{color:var(--accent2)}

@media(prefers-reduced-motion:reduce){
  .cta{transition:none}
  .cta:hover{transform:none}
}