/* arroweb.it entry funnel — dark navy splash (matches /pacchetto-ristorante/),
   gold accent, white 2-column tiles, top Arrow bar + drop-down menu, HTMX fade. */

@font-face { font-family:'Plus Jakarta Sans'; font-weight:400; font-style:normal; font-display:swap;
  src:url("../../home/fonts/plus-jakarta-sans-v12-latin-regular.503e7cbdb484.woff2") format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:600; font-style:normal; font-display:swap;
  src:url("../../home/fonts/plus-jakarta-sans-v12-latin-600.79e62f3332cd.woff2") format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:700; font-style:normal; font-display:swap;
  src:url("../../home/fonts/plus-jakarta-sans-v12-latin-700.5b629bd8abb4.woff2") format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:800; font-style:normal; font-display:swap;
  src:url("../../home/fonts/plus-jakarta-sans-v12-latin-800.408ecc6630e8.woff2") format('woff2'); }

:root{
  --fn-ink:#1c1726; --fn-ink-soft:#54506a; --fn-muted:#8b86a0;
  --fn-bg:#0c0e13;
  --fn-on:#f1ede5; --fn-on-soft:#bdb7c6; --fn-on-faint:#8f8a9e;
  --fn-tile:#ffffff; --fn-border:#e3e0ec;
  --fn-accent:#c8a15a; --fn-accent-ink:#8a6a23; --fn-accent-soft:#f6efde; --fn-gold-ink:#241a06;
  --fn-radius:15px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }

.fn-body{
  min-height:100vh;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  color:var(--fn-on);
  background-color:var(--fn-bg);
  background-image:radial-gradient(1200px 760px at 50% 30%, #1a2030 0%, #0c0e13 62%);
  background-attachment:fixed; background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; align-items:center;
  padding:90px 18px 56px;   /* top room for the fixed Arrow bar */
}
.fn-wrap{ width:100%; max-width:600px; display:flex; flex-direction:column; }

/* ── Arrow bar (top, all viewports) — dark glass launcher + drop-down menu ── */
.fn-topbar{ position:fixed; top:0; left:0; right:0; z-index:120; height:60px; border:0; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(12,14,19,.66); -webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.06); }
.fn-topbar img{ height:28px; width:auto; display:block; filter:drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.fn-topbar-glow{ position:absolute; left:0; right:0; bottom:0; height:2px; opacity:.9;
  background:linear-gradient(100deg,#7b2ff7,#d81b8c,#e8451e,#f2a800,#4fb03a,#1ca9e0); }

.nav-backdrop{ position:fixed; inset:0; z-index:115; background:rgba(6,5,12,.5);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; }
.nav-backdrop.open{ opacity:1; visibility:visible; }

.nav-sheet{ position:fixed; top:0; left:0; right:0; z-index:118; background:#0c0816;
  border-bottom-left-radius:22px; border-bottom-right-radius:22px;
  box-shadow:0 26px 60px rgba(0,0,0,.5); padding:74px 16px 20px;
  transform:translateY(-100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
  max-height:90dvh; overflow-y:auto; }
.nav-sheet.open{ transform:translateY(0); }
.nav-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; max-width:520px; margin:0 auto; }
.nav-grid a{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#e9e6f2;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); border-radius:12px;
  padding:11px 12px; font-size:13px; font-weight:600; transition:background .12s, border-color .12s; }
.nav-grid a:hover{ background:rgba(255,255,255,.08); border-color:rgba(200,161,90,.5); }
.nav-grid .nav-ico{ width:18px; height:18px; flex:0 0 auto; color:var(--fn-accent); }
.nav-grid a span{ min-width:0; }
.sheet-lang{ display:flex; gap:8px; justify-content:center; margin:14px auto 0; }
.sheet-lang a{ text-decoration:none; font-size:12px; font-weight:700; color:var(--fn-on-faint);
  border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:6px 12px; }
.sheet-lang a.active{ background:var(--fn-accent); color:var(--fn-gold-ink); border-color:var(--fn-accent); }
@media (max-width:520px){ .nav-grid{ grid-template-columns:1fr; } }

/* Stage + HTMX cross-fade */
.fn-stage{ transition:opacity .16s ease; }
.fn-stage.htmx-swapping{ opacity:0; }
.fn-step{ animation:fn-in .26s ease both; }
@keyframes fn-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .fn-step{ animation:none; } .fn-stage{ transition:none; } }

/* On-background type (light, on the navy splash) */
.fn-eyebrow{ font-size:11px; font-weight:700; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--fn-accent); margin:0 0 9px; }
.fn-q{ margin:0 0 8px; font-size:30px; line-height:1.12; font-weight:800; letter-spacing:-.01em; color:var(--fn-on); }
.fn-sub{ margin:0 0 22px; font-size:15px; line-height:1.55; color:var(--fn-on-soft); }
@media (max-width:520px){ .fn-q{ font-size:25px; } }

/* Tiles — 2 columns, compact, white panels */
.fn-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:480px){ .fn-tiles{ grid-template-columns:1fr; } }
.fn-tile{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; font:inherit;
  color:var(--fn-ink); background:var(--fn-tile); border:1px solid transparent; border-radius:var(--fn-radius);
  padding:12px 13px; box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.fn-tile:hover{ transform:translateY(-1px); border-color:var(--fn-accent); box-shadow:0 12px 28px rgba(0,0,0,.32); }
.fn-tile:focus-visible{ outline:2px solid var(--fn-accent); outline-offset:2px; }
.fn-tile-ico{ flex:0 0 auto; display:grid; place-content:center; width:38px; height:38px; border-radius:11px;
  background:var(--fn-accent-soft); color:var(--fn-accent-ink); }
.fn-ico{ width:20px; height:20px; display:block; }
.fn-tile-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.fn-tile-label{ font-size:14.5px; font-weight:600; line-height:1.25; }
.fn-tile-tag{ align-self:flex-start; font-size:9.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:var(--fn-muted); background:#f1eff5; border-radius:999px; padding:2px 8px; }
.fn-tile-tag.fn-tile-live{ color:#177a3e; background:#e6f6ec; }

/* Back link (on dark) */
.fn-back{ align-self:flex-start; border:0; background:none; cursor:pointer; font:inherit; font-size:13px;
  font-weight:600; color:var(--fn-on-faint); padding:0 0 16px; }
.fn-back:hover{ color:var(--fn-accent); }

/* Result CTAs */
.fn-actions{ display:flex; flex-direction:column; gap:10px; }
.fn-cta{ display:flex; align-items:center; gap:13px; text-decoration:none; font:inherit; cursor:pointer;
  color:var(--fn-ink); background:var(--fn-tile); border:1px solid transparent; border-radius:var(--fn-radius);
  padding:15px 16px; box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.fn-cta strong{ display:block; font-size:15px; font-weight:700; }
.fn-cta small{ display:block; font-size:12.5px; color:var(--fn-muted); margin-top:1px; }
.fn-cta .fn-tile-go{ margin-left:auto; flex:0 0 auto; color:var(--fn-muted); font-size:18px; line-height:1; }
.fn-cta:hover{ transform:translateY(-1px); border-color:var(--fn-accent); box-shadow:0 12px 28px rgba(0,0,0,.32); }
.fn-cta-primary{ background:var(--fn-accent); border-color:var(--fn-accent); color:var(--fn-gold-ink);
  box-shadow:0 10px 26px rgba(200,161,90,.30); }
.fn-cta-primary .fn-tile-ico{ background:rgba(36,26,6,.14); color:var(--fn-gold-ink); }
.fn-cta-primary small{ color:rgba(36,26,6,.72); }
.fn-cta-primary .fn-tile-go{ color:var(--fn-gold-ink); }
.fn-cta-primary:hover{ box-shadow:0 14px 32px rgba(200,161,90,.45); }

/* Placeholder lead form */
.fn-contact{ display:flex; flex-direction:column; gap:10px; }
.fn-input{ font:inherit; font-size:16px; color:var(--fn-ink); background:var(--fn-tile);
  border:1px solid var(--fn-border); border-radius:12px; padding:12px 14px; width:100%; }
.fn-input::placeholder{ color:#9a93ad; }
.fn-input:focus{ outline:none; border-color:var(--fn-accent); box-shadow:0 0 0 3px rgba(200,161,90,.25); }
textarea.fn-input{ min-height:84px; resize:vertical; }
.fn-check{ display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.5; color:var(--fn-on-soft); cursor:pointer; }
.fn-check input{ flex:0 0 auto; margin-top:2px; }
.fn-check a{ color:var(--fn-accent); }
.fn-cta-submit{ justify-content:center; margin-top:4px; }
.fn-err{ color:#ff9a9a; font-size:12.5px; font-weight:600; margin:0; }
.fn-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Thanks step */
.fn-step[data-step="thanks"]{ text-align:center; }
.fn-step[data-step="thanks"] .fn-tile-ico{ background:rgba(23,122,62,.18); color:#5fdc8e; }
.fn-step[data-step="thanks"] .fn-cta{ display:inline-flex; justify-content:center; margin-top:18px; }
.fn-tile-ico-big{ width:58px; height:58px; border-radius:17px; margin:0 auto 18px; }
.fn-tile-ico-big .fn-ico{ width:30px; height:30px; }

/* Footer */
.fn-foot{ text-align:center; margin-top:34px; font-size:11.5px; line-height:1.7; color:var(--fn-on-faint); }
.fn-foot a{ color:var(--fn-on-soft); text-decoration:none; }
.fn-foot a:hover{ color:var(--fn-accent); text-decoration:underline; }

/* ── Coexistence with home/css/style.css ──────────────────────────────────
   The landing also renders the /agenzia/ sections below the funnel stage, so
   home's stylesheet is on the page too (loaded FIRST — this file wins every
   shared declaration). Re-assert the funnel chrome where home's element/class
   rules would otherwise leak in. */
.fn-wrap{ text-align:left; }                    /* style.css centers body text */
.fn-agenzia{ width:100%; text-align:center; }   /* home sections render as on /agenzia/ */
.fn-foot{ width:100%; }                         /* fn-body is a centered flex column */
.fn-tile-tag{ line-height:normal; }
.fn-back{ line-height:normal; }
.fn-input{ line-height:1.5; }
.nav-grid a{ text-transform:none; letter-spacing:normal; }