/* drone-cert.com — the card IS the site.
   Navy strip atmosphere + EU-flag yellow, Bricolage Grotesque display,
   IBM Plex Sans body (self-hosted, see fonts/fonts.css). */

:root {
  --navy-950:#071a33; --navy-900:#0c2952; --navy-800:#0f2f5c; --navy-700:#123a6e;
  --yellow:#ffcc00; --yellow-deep:#eebc00;
  --coral:#f2685c; --berry:#9e1656;
  --paper:#f2f5fa; --card:#ffffff; --ink:#10203a; --muted:#51617a;
  --line:#dbe3ef;
  --display:"Bricolage Grotesque", "IBM Plex Sans", sans-serif;
  --body:"IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --radius:14px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--body); color:var(--ink); background:var(--paper);
       line-height:1.55; font-size:16px; }
h1,h2,h3 { font-family:var(--display); line-height:1.12; margin:0 0 .5em; }
h2 { font-size:clamp(26px,3.4vw,38px); font-weight:700; letter-spacing:-.01em; }
a { color:inherit; }
img { max-width:100%; height:auto; }

/* ---------------------------------------------------------------- header */
.site-header { position:sticky; top:0; z-index:50; display:flex; align-items:center;
  gap:26px; padding:10px 22px; background:var(--navy-950); color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08); }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:8px;
  background:var(--yellow); color:var(--navy-900); font-size:15px; transform:rotate(-45deg); }
.brand-mark, .brand:hover .brand-mark { transition:transform .35s cubic-bezier(.22,1,.36,1); }
.brand:hover .brand-mark { transform:rotate(0deg); }
.brand-name { font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.01em; }
.brand-name i { font-style:normal; color:var(--yellow); }
.top-nav { display:flex; gap:20px; margin-left:8px; }
.top-nav a { color:#c7d5ea; text-decoration:none; font-size:14px; }
.top-nav a:hover { color:var(--yellow); }
.header-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.lang-switch { display:flex; border:1px solid rgba(255,255,255,.25); border-radius:8px;
  overflow:hidden; font-size:12.5px; font-weight:600; }
.lang-switch a { padding:5px 10px; color:#c7d5ea; text-decoration:none; }
.lang-switch a.on { background:var(--yellow); color:var(--navy-900); }
@media (max-width:760px) { .top-nav { display:none; } }

/* ---------------------------------------------------------------- buttons */
.btn { display:inline-block; background:var(--yellow); color:var(--navy-900);
  font-family:var(--display); font-weight:700; text-decoration:none; border:0;
  border-radius:10px; padding:12px 24px; font-size:16px; cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.18); transition:transform .12s, background .12s; }
.btn:hover { background:var(--yellow-deep); transform:translateY(-1px); }
.btn:active { transform:translateY(1px); box-shadow:none; }
.btn-big { padding:15px 34px; font-size:18px; border-radius:12px; }
.btn-small { padding:8px 16px; font-size:13.5px; }

/* ---------------------------------------------------------------- hero */
.hero { position:relative; color:#fff; overflow:hidden;
  background:linear-gradient(115deg, var(--navy-950) 0%, var(--navy-800) 46%,
             var(--navy-700) 72%, var(--navy-900) 100%); }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg, transparent 0 90px,
             rgba(255,255,255,.035) 90px 160px); }
.hero-inner { position:relative; max-width:1080px; margin:0 auto; display:grid;
  grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;
  padding:72px 24px 88px; }
.kicker { font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--yellow); font-weight:600; margin:0 0 14px; }
.hero h1 { font-size:clamp(38px,5.6vw,64px); font-weight:800; letter-spacing:-.02em; }
.hero h1 em { font-style:normal; color:var(--yellow); }
.hero-sub { max-width:52ch; color:#c7d5ea; font-size:17px; }
.hero-actions { display:flex; align-items:center; gap:18px; margin-top:26px; flex-wrap:wrap; }
.hero-note { font-size:13px; color:#9db4d6; max-width:24ch; }
.hero-card { justify-self:center; }
.hero-card img { width:min(340px,80vw); border-radius:18px; transform:rotate(4deg);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .4s cubic-bezier(.22,1,.36,1); }
.hero-card img:hover { transform:rotate(0deg) scale(1.02); }
.chevron-band { height:26px; background:
  repeating-linear-gradient(115deg, var(--yellow) 0 42px, transparent 42px 84px);
  opacity:.9; }
@media (max-width:860px) { .hero-inner { grid-template-columns:1fr; padding:48px 22px 64px; }
  .hero-card { order:-1; } }

/* ---------------------------------------------------------------- sections */
section { scroll-margin-top:64px; }
.how, .faq { max-width:1080px; margin:0 auto; padding:72px 24px; }
.section-sub { color:var(--muted); margin-top:-6px; }

.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:0;
  margin:34px 0 0; list-style:none; counter-reset:step; }
.step { position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 22px 22px; }
.step-no { position:absolute; top:-16px; left:20px; display:grid; place-items:center;
  width:34px; height:34px; border-radius:10px; font-family:var(--display);
  font-weight:800; color:#fff; background:var(--navy-800);
  box-shadow:0 4px 10px rgba(15,47,92,.35); }
.step:nth-child(2) .step-no { background:var(--coral); }
.step:nth-child(3) .step-no { background:var(--berry); }
.step h3 { font-size:19px; margin:6px 0 8px; }
.step p { color:var(--muted); font-size:14.5px; margin:0; }
@media (max-width:760px) { .steps { grid-template-columns:1fr; gap:28px; } }

/* ---------------------------------------------------------------- examples */
.examples { background:#e8edf5; border-block:1px solid var(--line); }
.examples > h2, .examples > .section-sub { max-width:1080px; margin-inline:auto;
  padding-inline:24px; }
.examples { padding:64px 0 72px; }
.examples > h2 { margin-bottom:8px; }
.example-grid { max-width:1080px; margin:30px auto 0; padding-inline:24px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.example-grid figure { margin:0; text-align:center; }
.example-grid img { border-radius:14px; box-shadow:0 18px 40px -14px rgba(15,47,92,.4);
  transition:transform .3s; }
.example-grid figure:nth-child(1) img { transform:rotate(-2deg); }
.example-grid figure:nth-child(3) img { transform:rotate(2deg); }
.example-grid figure:hover img { transform:rotate(0) translateY(-6px); }
.example-grid figcaption { margin-top:14px; font-size:13.5px; font-weight:600;
  color:var(--muted); letter-spacing:.02em; }
@media (max-width:760px) { .example-grid { grid-template-columns:1fr; max-width:420px; } }

/* ---------------------------------------------------------------- beer */
.beer { background:var(--yellow); padding:64px 24px; }
.beer-mat { max-width:920px; margin:0 auto; display:grid;
  grid-template-columns:auto 1fr; gap:40px; align-items:center; }
.beer-price { display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:210px; height:210px; border-radius:50%; background:var(--navy-900); color:#fff;
  text-align:center; box-shadow:0 14px 30px -8px rgba(7,26,51,.5);
  border:6px double rgba(255,255,255,.35); transform:rotate(-4deg); }
.beer-emoji { font-size:34px; }
.beer-amount { font-family:var(--display); font-weight:800; font-size:44px;
  color:var(--yellow); line-height:1; margin-top:2px; }
.beer-per { font-size:11.5px; color:#c7d5ea; max-width:17ch; margin-top:6px; }
.beer-copy h2 { color:var(--navy-900); }
.beer-copy p { color:#3c3407; max-width:60ch; }
.beer-notes { font-size:13.5px; font-weight:600; }
@media (max-width:760px) { .beer-mat { grid-template-columns:1fr; justify-items:center;
  text-align:center; } }

/* ---------------------------------------------------------------- disclaimer */
.disclaimer { padding:64px 24px; }
.disc-box { max-width:860px; margin:0 auto; background:var(--card);
  border:2px solid var(--coral); border-radius:var(--radius); padding:30px 34px;
  box-shadow:8px 8px 0 rgba(242,104,92,.18); }
.disc-box h2 { font-size:24px; color:#b03a2e; }
.disc-box p { margin:0; color:var(--ink); }

/* ---------------------------------------------------------------- eu states */
.eu-states { background:var(--navy-900); color:#fff; padding:64px 24px; }
.eu-inner { max-width:760px; margin:0 auto; text-align:center; }
.eu-stars { color:var(--yellow); letter-spacing:1.2em; font-size:14px; margin-bottom:14px; }
.eu-inner p { color:#c7d5ea; max-width:56ch; margin-inline:auto; }
.eu-mail { display:inline-block; margin-top:14px; font-family:var(--display);
  font-weight:700; font-size:20px; color:var(--yellow); text-decoration:none;
  border-bottom:2px solid var(--yellow); padding-bottom:2px; }
.eu-mail:hover { color:#fff; border-color:#fff; }

/* ---------------------------------------------------------------- faq */
.faq details { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; padding:16px 4px; font-family:var(--display);
  font-weight:600; font-size:17px; list-style:none; position:relative; }
.faq summary::after { content:"+"; position:absolute; right:8px; color:var(--yellow-deep);
  font-size:22px; font-weight:800; transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { margin:0 0 18px; padding:0 4px; color:var(--muted); max-width:70ch; }

/* ---------------------------------------------------------------- start form */
.start { background:linear-gradient(115deg, var(--navy-950), var(--navy-700));
  padding:72px 24px 88px; }
.start-card { max-width:680px; margin:0 auto; background:var(--card);
  border-radius:18px; padding:36px 38px; box-shadow:0 30px 70px -20px rgba(0,0,0,.55); }
.start-card h2 { margin-bottom:4px; }
.dropzones { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px 0; }
@media (max-width:560px) { .dropzones { grid-template-columns:1fr; } }
.dropzone { display:block; border:2px dashed #b8c6dc; border-radius:12px; padding:20px 14px;
  text-align:center; cursor:pointer; color:var(--muted); transition:border-color .15s; }
.dropzone:hover { border-color:var(--navy-700); }
.dropzone strong { display:block; margin-bottom:10px; color:var(--ink);
  font-family:var(--display); }
.dropzone input { display:block; margin:0 auto 8px; max-width:100%; font-size:13px; }
.dropzone span { font-size:12.5px; }
.langsel { border:1px solid var(--line); border-radius:12px; padding:12px 16px;
  margin:0 0 20px; display:flex; gap:22px; align-items:center; font-size:14px; }
.langsel legend { font-size:12.5px; color:var(--muted); padding:0 6px; }
.langsel label { display:flex; gap:6px; align-items:center; cursor:pointer; }
.tiny-note { font-size:12.5px; color:var(--muted); margin-top:16px; }

/* ---------------------------------------------------------------- flow pages */
.flow-page { max-width:760px; margin:0 auto; padding:48px 20px 72px; }
.flow-card { background:var(--card); border-radius:18px; padding:32px 34px;
  box-shadow:0 10px 34px rgba(15,47,92,.12); }
.flow-card h1 { font-size:clamp(24px,3vw,32px); }
.doc { border:1px solid var(--line); border-radius:12px; padding:14px 18px;
  margin-bottom:14px; }
.doc h2 { font-size:16px; }
.doc.fail { border-color:#e8b4b4; background:#fdf6f6; }
.doc dl { display:grid; grid-template-columns:150px 1fr; row-gap:6px; margin:8px 0 0; }
.doc dt { color:var(--muted); font-size:13px; }
.doc dd { margin:0; font-size:14px; overflow-wrap:anywhere; }
code { background:#eef2f8; padding:1px 6px; border-radius:5px; font-size:13px; }
.consent { display:flex; gap:10px; align-items:flex-start; font-size:13.5px;
  color:#39465a; margin:16px 0 20px; }
.notes { font-size:13px; color:var(--muted); padding-left:18px; }
.notes li { margin-bottom:4px; }
.devnote { background:#fff7e0; border:1px solid #eedc9a; border-radius:8px;
  padding:8px 12px; font-size:13px; }
.download-row { display:flex; justify-content:space-between; align-items:center; gap:14px;
  border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:12px; }
.wallet-btn { background:#000; color:#fff; text-decoration:none; border-radius:9px;
  padding:10px 16px; font-size:14px; font-weight:600; white-space:nowrap; }
.wallet-btn:hover { background:#222; }

/* payment page */
.pay-card { text-align:center; }
.pay-price { display:flex; flex-direction:column; gap:2px; margin:26px auto 24px;
  padding:20px; max-width:340px; border-radius:14px;
  background:linear-gradient(115deg, var(--navy-900), var(--navy-700)); color:#fff; }
.pay-price span { font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:#c7d5ea; }
.pay-price strong { font-family:var(--display); font-size:42px; color:var(--yellow);
  line-height:1.1; }
.pay-price small { font-size:12px; color:#9db4d6; }
.pay-action { margin:10px 0 4px; }
.coupon { margin-top:34px; border-top:1px dashed var(--line); padding-top:22px; }
.coupon h2 { font-size:17px; }
.coupon-form { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.coupon-form input[type=text] { border:1.5px solid var(--line); border-radius:10px;
  padding:11px 14px; font-size:15px; font-family:var(--body); width:200px;
  text-transform:uppercase; }
.coupon-form input[type=text]:focus { outline:2px solid var(--yellow); border-color:transparent; }
.coupon-error { color:#b03a2e; font-size:13.5px; font-weight:600; }

/* ---------------------------------------------------------------- footer */
.site-footer { background:var(--navy-950); color:#9db4d6; font-size:13px; }
.footer-inner { max-width:1080px; margin:0 auto; padding:30px 24px; display:flex;
  justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
.site-footer .brand-name { color:#fff; font-size:15px; }
.footer-disc { margin:6px 0 0; }
.footer-legal { margin:4px 0 0; font-size:12px; color:#7c8fae; }

.feedback-note { background:#eef4fb; border:1px solid #c9daf0; border-radius:8px;
  padding:10px 14px; font-size:13.5px; color:#39465a; }
.feedback-note a { font-weight:600; }

/* terms page */
.terms h2 { font-size:17px; margin-top:26px; }
.terms p { font-size:14px; color:#39465a; margin:6px 0; }
.footer-links { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.footer-links a { color:#c7d5ea; }
.footer-links a:hover { color:var(--yellow); }