/* ==========================================================================
   EurekaGO Site Kit — v1
   Derived from the HERMES site (hermes.eurekabike.it), which is the first
   production site built to the brand playbook. Tokens come from chapter 02
   (Color System) and chapter 03 (Typography); nothing here is invented.

   Azure #00AEEF is both the master-brand operative colour and the BIKE
   vertical primary — see doc 02, and doc 01 where the "Azure Bike" swatch
   was aligned to the same token.
   ========================================================================== */

:root {
  --ink: #0A0A0A;
  --fuchsia: #E0007A;
  --azure: #00AEEF;
  --azure-dark: #0090C6;
  --cream: #F5F3EC;
  --white: #FFFFFF;
  --fog: #8A8780;
  --ink-60: rgba(10, 10, 10, .6);
  --ink-10: rgba(10, 10, 10, .08);
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --font: 'Archivo', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--white); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
p a:not(.btn), li a:not(.btn) { color: var(--azure); }
p a:not(.btn):hover, li a:not(.btn):hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }

/* Keyboard focus must stay visible: the nav and cards are all anchors. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--azure);
  outline-offset: 2px;
}
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--white); padding: 12px 20px; z-index: 200; }
.skip-link:focus { left: 0; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--azure); display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--azure); flex-shrink: 0; }
.section-title { font-size: clamp(28px, 4vw, 46px); font-weight: 900; line-height: 1.08; letter-spacing: -.025em; }
.section-title em { font-style: normal; color: var(--azure); }
.section-sub { font-size: 17px; color: var(--fog); line-height: 1.6; margin-top: 14px; max-width: 580px; }

.btn { display: inline-flex; align-items: center; gap: 7px; padding: 13px 24px; border-radius: var(--r-sm); font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer; transition: all .18s ease; border: 2px solid transparent; white-space: nowrap; }
.btn-primary { background: var(--azure); color: var(--white); border-color: var(--azure); }
.btn-primary:hover { background: var(--azure-dark); border-color: var(--azure-dark); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(26, 26, 46, .2); }
.btn-ghost:hover { border-color: var(--ink); background: var(--ink-10); }

/* --- TOP BAR ------------------------------------------------------------ */
.top-bar { background: var(--ink); padding: 0 32px; min-height: 44px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 101; }
.top-bar-inner { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 1160px; padding: 6px 0; }
.top-bar-text { font-size: 12px; color: rgba(255, 255, 255, .7); text-align: center; }
.top-bar-text strong { color: var(--white); font-weight: 700; }

/* --- EUREKABIKE LOCKUP --------------------------------------------------
   Wordmark EUREKA (SVG) + "BIKE" set in Archivo 600, per the brand
   architecture rule: the endorser is present but subordinate.             */
.eb-lockup { display: inline-flex; align-items: baseline; gap: 0; vertical-align: baseline; }
.eb-lockup .eb-mark { display: inline-block; width: auto; vertical-align: baseline; }
.eb-lockup .eb-bike { font-family: var(--font); font-weight: 600; letter-spacing: .02em; line-height: 1; color: inherit; }

/* The sector word carries the vertical's own primary — but ONLY where the
   vertical is the subject of the page, as it is on this site. Playbook ch. 04
   is explicit that an endorser "appears in Ink on light surfaces, White on
   dark — never in the vertical's primary color", so on a product site such as
   HERMES or AGORA this lockup stays monochrome and must not take this class. */
.eb-lockup.eb-subject .eb-bike { color: var(--azure); }
.eb-lockup.eb-xs .eb-mark { height: 8px; }  .eb-lockup.eb-xs .eb-bike { font-size: 11px; }
.eb-lockup.eb-sm .eb-mark { height: 12px; } .eb-lockup.eb-sm .eb-bike { font-size: 16px; }
.eb-lockup.eb-md .eb-mark { height: 20px; } .eb-lockup.eb-md .eb-bike { font-size: 28px; }
.eb-lockup.eb-lg .eb-mark { height: 30px; } .eb-lockup.eb-lg .eb-bike { font-size: 42px; }

/* --- NAV ---------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ink-10); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.nav-logo { display: flex; align-items: baseline; gap: 8px; }
.nav-logo .wordmark { font-size: 24px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); }
.nav-logo .wordmark .h-accent { color: var(--azure); }
.nav-logo .tagline { font-size: 10px; font-weight: 600; color: var(--fog); letter-spacing: .05em; }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 600; color: var(--ink); opacity: .7; transition: opacity .15s; }
/* Six items since Data Policy joined the menu: a label never wraps onto two
   lines, and between the mobile breakpoint and a full desktop the gap gives
   way instead, so the bar still fits beside the logo and the actions. */
.nav-links a { white-space: nowrap; }
@media (max-width: 1120px) { .nav-links { gap: 20px; } }
.nav-links a:hover, .nav-links a.active { opacity: 1; color: var(--azure); }
.nav-actions { display: flex; align-items: center; gap: 10px; }

/* --- LANGUAGE SWITCHER ---------------------------------------------------
   Shows the language you are ON, with its flag, and opens onto the others.
   Built on <details> so it works with no JavaScript and is announced as a
   disclosure by assistive tech; the small script in the layout only closes it
   on an outside click or Escape.

   Flags are rectangular SVGs from the estate's own asset host. English uses
   the United States flag, matching the admin panel, which serves us.svg. */
.langsel { position: relative; }
.langsel > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 10px; border: 1.5px solid var(--ink-10); border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700; color: var(--ink); background: var(--white);
  transition: border-color .15s;
}
.langsel > summary::-webkit-details-marker { display: none; }
.langsel > summary:hover { border-color: rgba(10,10,10,.28); }
.langsel[open] > summary { border-color: var(--azure); }

.langsel-flag { width: 21px; height: 14px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(10,10,10,.10); flex-shrink: 0; }
.langsel-code { letter-spacing: .04em; }
.langsel-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--fog); transition: transform .15s; }
.langsel[open] .langsel-caret { transform: rotate(180deg); }

.langsel-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 120;
  min-width: 190px; margin: 0; padding: 6px; list-style: none;
  background: var(--white); border: 1px solid var(--ink-10);
  border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(10,10,10,.12);
}
.langsel-menu a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.langsel-menu a:hover { background: var(--cream); }
.langsel-menu .langsel-code { font-size: 12px; font-weight: 800; color: var(--fog); letter-spacing: .06em; }
.langsel-menu .langsel-name { font-weight: 600; }

/* The nav links collapse below 900px but this must not: on a phone it is the
   only way to change language. */
@media (max-width: 540px) {
  .langsel > summary { padding: 6px 8px; font-size: 12px; }
  .langsel-menu { min-width: 168px; }
  .nav-actions .btn { display: none; }
  #formSubmit { width: 100%; justify-content: center; }
}

/* --- HERO --------------------------------------------------------------- */
.hero { padding: 0; background: var(--white); position: relative; display: flex; align-items: center; min-height: calc(100vh - 108px); overflow: hidden; }
.hero::before { content: ''; position: absolute; top: -160px; right: -120px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(0, 174, 239, .05) 0%, transparent 65%); pointer-events: none; }
.hero::after { content: ''; position: absolute; bottom: -100px; left: 30%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(224, 0, 122, .03) 0%, transparent 65%); pointer-events: none; }
.hero-text { position: relative; z-index: 1; padding: 100px 0; text-align: center; }
.hero-text .eyebrow { justify-content: center; }
.hero h1 { font-size: clamp(38px, 5.5vw, 76px); font-weight: 900; line-height: 1.02; letter-spacing: -.04em; margin-bottom: 28px; max-width: 980px; margin-left: auto; margin-right: auto; }
.hero h1 em { font-style: normal; color: var(--azure); }
.hero-sub { font-size: 18px; color: var(--fog); line-height: 1.7; max-width: 620px; margin: 0 auto 40px; }
.hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-ctas { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hero-proof { margin-top: 32px; font-size: 12px; color: var(--fog); display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.hero-proof span { display: inline-flex; align-items: center; gap: 6px; }
.hero-proof span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--azure); }

/* Inner pages get a shorter hero than the home page. */
.hero.hero-page { min-height: 0; }
.hero.hero-page .hero-text { padding: 72px 0 56px; }
.hero.hero-page h1 { font-size: clamp(32px, 4.6vw, 58px); margin-bottom: 20px; }

/* --- PILLARS ------------------------------------------------------------ */
.pillars { padding: 100px 0; background: var(--cream); }
.pillars-head { text-align: center; max-width: 700px; margin: 0 auto 64px; }
.pillars-head .eyebrow { justify-content: center; }
.pillars-head .section-sub { margin: 14px auto 0; }
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pillar { background: var(--white); padding: 36px 28px; border-radius: var(--r-lg); border: 1px solid var(--ink-10); transition: all .2s ease; display: flex; flex-direction: column; }
.pillar:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(10, 10, 10, .06); }
.pillar-num { font-size: 11px; font-weight: 800; color: var(--azure); letter-spacing: .18em; margin-bottom: 18px; }
.pillar-title { font-size: 22px; font-weight: 900; letter-spacing: -.015em; margin-bottom: 14px; }
.pillar-desc { font-size: 15px; color: var(--fog); line-height: 1.65; margin-bottom: 24px; flex-grow: 1; }
.pillar-link { font-size: 13px; font-weight: 700; color: var(--azure); display: inline-flex; align-items: center; gap: 6px; }
.pillar-link:hover { gap: 10px; transition: gap .15s; }

/* --- MODULE GRID --------------------------------------------------------
   Specific to the supersystem site: one card per platform module.         */
.modules { padding: 100px 0; background: var(--white); }
.modules-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.modules-head .eyebrow { justify-content: center; }
.modules-head .section-sub { margin: 14px auto 0; }
.modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.module { background: var(--white); border: 1px solid var(--ink-10); border-radius: var(--r-lg); padding: 28px 24px; display: flex; flex-direction: column; transition: all .2s ease; }
.module:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(10, 10, 10, .06); border-color: rgba(0, 174, 239, .35); }
.module-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.module-name { font-size: 19px; font-weight: 900; letter-spacing: -.015em; }
.module-name .h-accent { color: var(--azure); }
.module-role { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--fog); margin-bottom: 12px; }
.module-desc { font-size: 14px; color: var(--fog); line-height: 1.65; flex-grow: 1; }
.module-link { margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--azure); display: inline-flex; align-items: center; gap: 6px; }
.module-link:hover { gap: 10px; transition: gap .15s; }
.tag { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border-radius: 3px; white-space: nowrap; }
.tag-live { background: rgba(89, 152, 44, .12); color: #3F7519; }
.tag-pipeline { background: rgba(0, 174, 239, .12); color: #057688; }
.tag-standalone { background: rgba(224, 0, 122, .10); color: var(--fuchsia); }
.tag-soon { background: var(--ink-10); color: var(--fog); }

/* --- DARK "WHY" SECTION ------------------------------------------------- */
.why { padding: 100px 0; background: var(--ink); color: var(--white); }
.why-head { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.why-head .eyebrow { color: var(--azure); justify-content: center; }
.why-head .section-title { color: var(--white); }
.why-head .section-sub { color: rgba(255, 255, 255, .6); margin: 14px auto 0; }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 48px; max-width: 920px; margin: 0 auto; }
.why-item { display: flex; gap: 18px; align-items: flex-start; }
.why-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 174, 239, .15); display: flex; align-items: center; justify-content: center; color: var(--azure); font-weight: 900; font-size: 14px; border: 1.5px solid rgba(0, 174, 239, .3); }
.why-content h4 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.why-content p { font-size: 14px; color: rgba(255, 255, 255, .6); line-height: 1.65; }

/* --- NUMBERS ------------------------------------------------------------ */
.numbers { padding: 72px 0; background: var(--cream); }
.numbers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; text-align: center; }
.number-value { font-size: clamp(36px, 5vw, 56px); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.number-label { font-size: 13px; color: var(--fog); margin-top: 10px; line-height: 1.5; }

/* --- PROSE (inner content pages) ---------------------------------------- */
.prose { padding: 72px 0 88px; background: var(--white); }
.prose-inner { max-width: 760px; margin: 0 auto; }
.prose-inner h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 900; letter-spacing: -.02em; margin: 48px 0 16px; }
.prose-inner h2:first-child { margin-top: 0; }
.prose-inner h3 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 32px 0 12px; }
.prose-inner p { font-size: 16px; color: var(--ink-60); line-height: 1.75; margin-bottom: 16px; }
.prose-inner ul, .prose-inner ol { margin: 0 0 20px 22px; }
.prose-inner li { font-size: 16px; color: var(--ink-60); line-height: 1.75; margin-bottom: 8px; }
.prose-inner strong { color: var(--ink); font-weight: 600; }
.callout { background: var(--cream); border-left: 3px solid var(--azure); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 22px 26px; margin: 28px 0; }
.callout p:last-child { margin-bottom: 0; }

/* --- FAQ ---------------------------------------------------------------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--ink-10); }
.faq-item summary { cursor: pointer; list-style: none; padding: 24px 44px 24px 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--azure); line-height: 1; }
.faq-item[open] summary::after { content: '−'; }
.faq-answer { padding: 0 44px 26px 0; }
.faq-answer p { font-size: 15px; color: var(--fog); line-height: 1.7; margin-bottom: 12px; }
.faq-answer p:last-child { margin-bottom: 0; }

/* --- FORM --------------------------------------------------------------- */
/* Honeypot. Moved off-screen rather than display:none or hidden — some bots
   skip fields the browser reports as invisible, but happily fill a positioned
   one. Kept out of the accessibility tree and the tab order by the markup. */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-wrap { max-width: 640px; margin: 0 auto; }
.form-row { margin-bottom: 20px; }
.form-row label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.form-row .req { color: var(--fuchsia); }
.form-row input, .form-row textarea, .form-row select {
  width: 100%; font-family: var(--font); font-size: 15px; color: var(--ink);
  padding: 13px 15px; border: 1.5px solid var(--ink-10); border-radius: var(--r-sm);
  background: var(--white); transition: border-color .15s;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { border-color: var(--azure); }
.form-row textarea { min-height: 130px; resize: vertical; }
.form-consent { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 24px; }
.form-consent input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--azure); }
.form-consent label { font-size: 13px; color: var(--fog); line-height: 1.6; font-weight: 400; }
.form-note { font-size: 13px; color: var(--fog); margin-top: 18px; line-height: 1.6; }
.form-msg { padding: 16px 18px; border-radius: var(--r-sm); font-size: 14px; margin-bottom: 20px; display: none; }
.form-msg.ok { display: block; background: rgba(89, 152, 44, .12); color: #3F7519; }
.form-msg.err { display: block; background: rgba(221, 98, 78, .12); color: #C32F18; }

/* --- CTA ---------------------------------------------------------------- */
.cta { padding: 100px 0; background: var(--white); text-align: center; }
.cta-card { max-width: 760px; margin: 0 auto; padding: 56px 40px; background: var(--cream); border-radius: var(--r-lg); border: 1.5px solid var(--ink-10); }
.cta h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 900; letter-spacing: -.025em; margin-bottom: 18px; }
.cta h2 em { font-style: normal; color: var(--azure); }
.cta p { font-size: 16px; color: var(--fog); margin-bottom: 32px; max-width: 540px; margin-left: auto; margin-right: auto; }

/* --- FOOTER ------------------------------------------------------------- */
.footer { background: var(--ink); color: rgba(255, 255, 255, .6); padding: 60px 0 32px; font-size: 13px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand { font-size: 24px; font-weight: 900; color: var(--white); margin-bottom: 12px; }
.footer-tag { font-size: 13px; color: rgba(255, 255, 255, .5); max-width: 280px; line-height: 1.6; }
.footer-col h5 { font-size: 11px; font-weight: 800; color: var(--white); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col li a { color: rgba(255, 255, 255, .6); transition: color .15s; }
.footer-col li a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; color: rgba(255, 255, 255, .4); }
.footer-bottom a { color: rgba(255, 255, 255, .4); text-decoration: underline; }

/* --- 404 ---------------------------------------------------------------- */
.err-page { min-height: calc(100vh - 108px); display: flex; align-items: center; text-align: center; }
.err-code { font-size: clamp(72px, 14vw, 168px); font-weight: 900; letter-spacing: -.06em; line-height: 1; color: var(--azure); }

/* --- NAV ON NARROW SCREENS ------------------------------------------------
   Three items - logo, language switcher, call to action - do not fit a phone.
   The wordmark is an <img> with max-width:100% and shrinks; the sector word
   beside it is text and does not, so the logo's content spills out of its box
   and lands under the switcher. Measured, the boxes never overlap: the content
   does.

   What gives way is the endorser. Playbook ch. 04 places it "bottom right on
   cover pages, footer on web, after the vertical mark in inline contexts" - the
   footer is its canonical web placement, and the footer still carries it. So on
   a product site the nav keeps the product name and drops "by EurekaBike".

   Where the lockup IS the site's own mark, as on home.eurekabike, it never
   drops - it scales. The sibling selector below draws exactly that line: a
   lockup preceded by a .wordmark is a signature, a lockup on its own is the
   subject.

   The language switcher is never hidden. Below 900px the nav links are already
   gone, so it is the only way left to change language. */
@media (max-width: 640px) {
  .nav-inner { gap: 10px; }

  /* Stop the logo shrinking below its own content. */
  .nav-logo { flex-shrink: 0; min-width: 0; }
  .nav-logo .wordmark { font-size: 19px; }
  .nav-logo .eb-lockup .eb-mark { height: 13px; }
  .nav-logo .eb-lockup .eb-bike { font-size: 18px; }

  /* Endorser only: a lockup that follows a product wordmark. */
  .nav-logo .wordmark ~ .tagline,
  .nav-logo .wordmark ~ .eb-lockup { display: none; }

  .nav-actions { gap: 8px; }
  .nav-actions .btn { padding: 10px 14px; font-size: 13px; }
  .langsel { flex-shrink: 0; }
  .langsel > summary { padding: 6px 8px; font-size: 12px; gap: 5px; }
}

/* --- MOBILE NAVIGATION --------------------------------------------------
   Below 900px .nav-links is hidden. Until this existed, nothing took its
   place: the site could not be navigated on a phone at all. Same <details>
   disclosure as the language switcher, so it works with JavaScript disabled.
   Hidden on desktop, where the real links are already in the bar. */
.navmenu { display: none; position: relative; }
.navmenu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; width: 38px; height: 34px; border-radius: 6px;
  border: 1.5px solid rgba(10,10,10,.12); background: var(--white);
}
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu[open] > summary { border-color: var(--azure); }
/* Three bars drawn from one element: the middle is the box, the outer two are
   its pseudo-elements. No icon font, no extra markup. */
.navmenu-bars, .navmenu-bars::before, .navmenu-bars::after {
  display: block; width: 17px; height: 2px; background: var(--ink);
  border-radius: 2px; content: '';
}
.navmenu-bars { position: relative; }
.navmenu-bars::before { position: absolute; top: -6px; }
.navmenu-bars::after  { position: absolute; top: 6px; }
.navmenu-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 208px; margin: 0; padding: 6px; list-style: none;
  background: var(--white); border: 1px solid rgba(10,10,10,.08);
  border-radius: 12px; box-shadow: 0 14px 36px rgba(10,10,10,.14);
}
.navmenu-list a {
  display: block; padding: 11px 12px; border-radius: 7px;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.navmenu-list li a:not(.btn):hover { background: var(--cream); color: var(--ink); }
.navmenu-list li a.active:not(.btn) { color: var(--azure); }

/* --- RESPONSIVE --------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .navmenu { display: inline-block; }
  .pillars-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .top-bar-text { font-size: 11px; }
}
@media (max-width: 540px) {
  .container { padding: 0 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-text { padding: 64px 0; }
  .cta-card { padding: 40px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Moduli non ancora pubblicati ------------------------------------------
   La card e' un <button>, quindi va riportata all'aspetto delle sorelle: il
   browser le darebbe font, allineamento e sfondo propri. */
.module-soon { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.module-link-soon { color: var(--fog); }
.module-soon:hover .module-link-soon { color: var(--azure); }

/* margin:auto centra i dialog modali: e' il browser a farlo, ma il reset del
   sito azzera i margini di tutto, quindi va rimesso qui o il popup si incolla
   in alto a sinistra. */
dialog.soon { border: 0; padding: 0; margin: auto; max-width: 460px; width: calc(100% - 40px);
  border-radius: var(--r-lg); background: var(--white); color: var(--ink);
  box-shadow: 0 24px 60px rgba(10, 10, 10, .18); }
dialog.soon::backdrop { background: rgba(10, 10, 10, .55); }
.soon-inner { padding: 34px 32px 28px; }
.soon-name { font-size: 30px; font-weight: 900; letter-spacing: -.02em; margin: 10px 0 12px; }
.soon-body { font-size: 15px; color: var(--fog); line-height: 1.65; margin: 0 0 26px; }
.soon-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 420px) { .soon-actions .btn { width: 100%; } }