/* HIROS landing — tokens, type, layout, navigation, footer.
   Concept: Apple product page. Paper and black sections alternate, one idea per screen,
   the product (the HIROS interface) is always shown live and large. */
/* Inter, served from this site (no third-party font service): one variable file, every weight. */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../media/fonts/inter-var.woff2") format("woff2"); }
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --font: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* paper sections (follow the theme) */
  --bg: #ffffff; --bg-alt: #f5f5f7; --fg: #1d1d1f; --fg-2: #6e6e73; --line: #d2d2d7; --tile: #ffffff; --chip: #e8e8ed;
  --link: #0066cc;
  /* black sections (fixed) */
  --k-bg: #000000; --k-fg: #f5f5f7; --k-fg-2: #86868b; --k-card: #1d1d1f; --k-line: #424245; --k-link: #2997ff;
  /* accents */
  --blue: #0071e3; --blue-hover: #0077ed; --green: #1fa553; --amber: #b25000; --amber-bg: #fff2df;
  --ai: linear-gradient(90deg, #0894ff 0%, #c959dd 34%, #ff2e54 68%, #ff9004 100%);
  --ai-conic: conic-gradient(from var(--spin), #0894ff, #c959dd, #ff2e54, #ff9004, #0894ff);
  --nav: rgba(255, 255, 255, .72); --nav-line: rgba(0, 0, 0, .16);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: max(16px, 4.5vw);
}
/* One fixed look, as on Apple product pages: paper and black sections, whatever the system theme. */
:root { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 17px; line-height: 1.47; letter-spacing: -.022em; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
html.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

/* layout */
.wrap { width: min(980px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.wide { width: min(1260px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.sec { position: relative; padding-block: clamp(84px, 11vw, 150px); }
.sec.k { background: var(--k-bg); color: var(--k-fg); }
.sec.alt { background: var(--bg-alt); }
.sec, .wrap, .wide { min-width: 0; }
.prerequisites { max-width: 640px; margin: 20px auto 0; color: #b5b5bd; font-size: 15px; line-height: 1.5; }
.center { text-align: center; }

/* type */
.eyebrow { margin: 0 0 8px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; letter-spacing: .004em; line-height: 1.19; }
.eyebrow.new { background: var(--ai); -webkit-background-clip: text; background-clip: text; color: transparent; }
.headline { margin: 0; font-size: clamp(40px, 6.4vw, 80px); font-weight: 600; letter-spacing: -.015em; line-height: 1.05; text-wrap: balance; }
.headline.xl { font-size: clamp(48px, 8.4vw, 96px); }
.title { margin: 0; font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.01em; line-height: 1.1; text-wrap: balance; }
.subhead { margin: 20px 0 0; font-size: clamp(19px, 1.9vw, 24px); font-weight: 500; line-height: 1.33; letter-spacing: .003em; color: var(--fg-2); text-wrap: balance; }
.k .subhead, .k .muted { color: var(--k-fg-2); }
.center .subhead { margin-inline: auto; max-width: 760px; }
.muted { color: var(--fg-2); }
.grad { background: var(--ai); -webkit-background-clip: text; background-clip: text; color: transparent; }
.subhead strong { color: var(--fg); font-weight: 600; }
.k .subhead strong { color: var(--k-fg); }

/* buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 11px 22px; border: 0; border-radius: 980px; background: var(--blue); color: #fff; font-size: 17px; line-height: 1.18; cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.btn:hover { background: var(--blue-hover); }
.btn:active { transform: scale(.97); }
.btn.sm { min-height: 28px; padding: 4px 12px; font-size: 12px; }
.btn.ghost { background: transparent; color: var(--link); box-shadow: inset 0 0 0 1px currentColor; }
.k .btn.ghost { color: var(--k-link); }
.more { color: var(--link); font-size: clamp(17px, 1.6vw, 21px); }
.k .more { color: var(--k-link); }
.more:hover { text-decoration: underline; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; justify-content: center; margin-top: 30px; }

/* local navigation */
.lnav { --nav-fg: #1d1d1f; --menu-bg: #ffffff; --menu-line: #e8e8ed; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 100; height: 52px; color: var(--nav-fg); background: var(--nav); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--nav-line); transition: background .4s ease, color .4s ease, border-color .4s ease; }
.lnav.on-dark { --nav: rgba(22, 22, 23, .74); --nav-line: rgba(255, 255, 255, .12); --nav-fg: #f5f5f7; --menu-bg: #000000; --menu-line: #2c2c2e; }
.lnav .in { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; }
.nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; justify-self: end; }
.nav-login { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
.nav-login:hover { text-decoration: underline; }
.lnav .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 500; letter-spacing: .26em; justify-self: start; }
.lnav .brand-mark { display: block; width: 24px; height: 28px; }
.lnav ul { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; font-size: 12px; letter-spacing: -.01em; }
.lnav ul a { display: inline-flex; align-items: center; min-height: 44px; opacity: .8; transition: opacity .2s, color .2s; }
.lnav ul a:hover { opacity: 1; }
.lnav ul a[aria-current="true"] { opacity: 1; font-weight: 600; }
.lnav .chev { display: none; width: 40px; height: 40px; margin-right: -6px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 50%; }
.lnav .chev svg { width: 18px; height: 18px; margin: auto; overflow: visible; }
/* Menu button: two lines (Apple style) that turn into a cross when the menu is open. */
.lnav .chev path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transform-origin: 9px 9px; transition: transform .4s var(--ease); }
.lnav.open .chev .l1 { transform: translateY(2.5px) rotate(45deg); }
.lnav.open .chev .l2 { transform: translateY(-2.5px) rotate(-45deg); }
.lnav .menu-only { display: none; }
@media (max-width: 1000px) {
  .lnav .in { display: flex; gap: 8px; }
  .lnav .brand { margin-right: auto; }
  /* full-screen sheet; opaque because a blur nested inside the bar's own blur does not render */
  .lnav.open { background: var(--menu-bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--menu-line); }
  .lnav ul { position: absolute; top: 51px; left: 0; right: 0; height: calc(100dvh - 52px - env(safe-area-inset-top, 0px)); flex-direction: column; gap: 0; padding: 22px max(var(--gutter), 38px) 48px; overflow-y: auto; overscroll-behavior: contain; background: var(--menu-bg); font-size: 28px; font-weight: 600; letter-spacing: .004em; line-height: 1.15; visibility: hidden; opacity: 0; transition: opacity .35s var(--ease), visibility .35s; }
  .lnav ul li { opacity: 0; transform: translateY(-10px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 45ms); }
  .lnav ul li a { display: block; padding: 9px 0; opacity: 1; }
  .lnav ul a[aria-current="true"] { color: var(--link); }
  .lnav.on-dark ul a[aria-current="true"] { color: var(--k-link); }
  .lnav.open ul { visibility: visible; opacity: 1; transition: opacity .35s var(--ease); }
  .lnav.open ul li { opacity: 1; transform: none; }
  .lnav .chev { display: grid; }
  /* Small screens: the bar keeps only the brand and the menu; Accedi and Richiedi accesso live in the menu. */
  .lnav .nav-actions { display: none; }
  .lnav .menu-only { display: list-item; font-size: 21px; }
  .lnav ul li:not(.menu-only) + li.menu-only { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--menu-line); }
  .lnav .btn.sm { min-height: 44px; }
}
.lnav .btn.sm { transition: background .2s, transform .2s var(--ease), opacity .3s; }
.lnav.open .btn.sm { visibility: hidden; opacity: 0; pointer-events: none; }
.lnav.open .nav-login { visibility: hidden; }
.skip { position: absolute; left: 12px; top: -100px; z-index: 200; padding: 10px 16px; border-radius: 12px; background: #fff; color: #1d1d1f; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); transition: top .2s; }
.skip:focus { top: 12px; }
::selection { background: rgba(0, 113, 227, .22); }
.k ::selection { background: rgba(41, 151, 255, .4); }
html { -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility; }
/* infinite animations rest while their section is off screen */
.idle, .idle * { animation-play-state: paused !important; }

/* reveal: visible at rest, armed by script only below the fold */
.rv.arm { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.arm.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { .lnav .chev path { transition: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rv.arm { opacity: 1; transform: none; }
}