/* ─────────────────────────────────────────────────────────────────────
   Innovatek Software — global stylesheet · "terminal" edition
   Dark-tech direction: near-black canvas, electric-lime accent, mono-
   forward type (JetBrains Mono display/UI + Hanken Grotesk body), product
   cards rendered as terminal windows, grid + glow atmosphere.
   Fonts self-hosted (privacy-first: no Google Fonts network calls).
   Per-product accents preserved (Moneto / Car Control / Workio / Lalo).
   ──────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Canvas */
  --bg:        #0a0e12;   /* near-black */
  --bg-2:      #0c1219;   /* alt section */
  --panel:     #0f161d;   /* card surface */
  --panel-2:   #0c1218;   /* terminal title bar */
  --line:      #1e2a34;   /* hairline */
  --line-2:    #2b3b48;   /* stronger border */

  /* Text */
  --txt:       #cfd8e3;
  --txt-dim:   #8a97a6;
  --txt-faint: #59636f;

  /* Accents */
  --acc:       #c6ff3a;   /* electric lime */
  --acc-2:     #4de2ff;   /* cyan */
  --acc-soft:  rgba(198, 255, 58, 0.12);
  --glow:      rgba(198, 255, 58, 0.35);

  /* Per-product (brightened for dark) */
  --p-moneto:     #37e07a;
  --p-carcontrol: #ffb020;
  --p-workio:     #5b9dff;
  --p-lalo:       #ff8a5c;
  --p-laloscuola: #b48cff;
  --p-netblade:   #4de2ff;

  /* Legacy brand tokens (kept for any stray references) */
  --brand-violet: #7c5cff;
  --brand-blue:   #4de2ff;
  --brand-accent: #c6ff3a;

  /* Layout */
  --container-max: 1200px;
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 8px;

  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.62;
  color: var(--txt);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  font-family: var(--font-mono);
  line-height: 1.08;
  color: #fff;
  letter-spacing: -.02em;
  font-weight: 600;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight: 700; letter-spacing: -.03em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.15rem; font-weight: 600; }

p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--txt-dim); }
.micro { font-size: .85rem; }

a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 3px;
}

@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ── Header ────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 14, 18, 0.72);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; gap: 16px;
}
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-mark {
  width: 58px; height: 58px; display: block; object-fit: contain;
  aspect-ratio: 1/1; flex-shrink: 0;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), filter .2s;
  /* the mark is dark blue — lift it off the near-black header */
  filter: brightness(1.25) drop-shadow(0 0 8px rgba(120, 190, 255, .35));
}
.brand:hover .brand-mark {
  transform: rotate(-8deg) scale(1.06);
  filter: brightness(1.35) drop-shadow(0 0 14px rgba(120, 190, 255, .55));
}
@media (max-width: 480px) { .brand-mark { width: 50px; height: 50px; } }

.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a {
  color: var(--txt-dim); font-family: var(--font-mono);
  font-weight: 500; font-size: .85rem; position: relative; padding: 4px 0;
}
.site-nav a:not(.cta-mini)::before { content: "> "; color: var(--acc); opacity: 0; margin-right: -.6ch; transition: opacity .2s, margin .2s; }
.site-nav a:not(.cta-mini):hover { color: #fff; text-decoration: none; }
.site-nav a:not(.cta-mini):hover::before { opacity: 1; margin-right: .2ch; }
/* (the topbar contact link is a plain nav link — no pill) */

/* Language picker */
.lang-picker { position: relative; }
.lang-picker summary {
  list-style: none; cursor: pointer;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line-2);
  font-family: var(--font-mono); font-size: .76rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel); color: var(--txt);
  transition: border-color .15s, box-shadow .15s;
}
.lang-picker summary::-webkit-details-marker { display: none; }
.lang-picker summary:hover { border-color: var(--acc); box-shadow: 0 0 16px rgba(198,255,58,.15); }
.lang-picker[open] summary { border-color: var(--acc); }
.lang-picker .flag {
  width: 20px; height: 14px; border-radius: 2px; flex: 0 0 auto; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}
.lang-picker .lang-code { letter-spacing: .06em; }
.lang-picker .caret { opacity: .55; font-size: .8em; }
.lang-picker ul {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: 0 18px 44px rgba(0,0,0,.5);
  list-style: none; padding: 6px; margin: 0; min-width: 190px; z-index: 60;
}
.lang-picker li a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 4px;
  color: var(--txt); font-size: .9rem; font-weight: 500;
}
.lang-picker li a:hover { background: var(--bg-2); text-decoration: none; }
.lang-picker li a[aria-current="page"] { background: var(--acc-soft); color: var(--acc); }
.lang-picker li a[aria-current="page"] .flag { box-shadow: 0 0 0 1px rgba(198,255,58,.4); }

/* Mobile menu (hamburger) — CSS-only <details>, same pattern as the picker */
.header-actions { display: flex; align-items: center; gap: 10px; }
.nav-menu { position: relative; display: none; }
.nav-menu summary {
  list-style: none; cursor: pointer;
  width: 40px; height: 36px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--panel);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, box-shadow .15s;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:hover, .nav-menu[open] summary {
  border-color: var(--acc); box-shadow: 0 0 16px rgba(198,255,58,.15);
}
.nav-menu .burger { display: block; width: 17px; }
.nav-menu .burger i {
  display: block; height: 2px; border-radius: 2px; background: var(--txt);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), opacity .15s, background .15s;
}
.nav-menu .burger i + i { margin-top: 4px; }
.nav-menu[open] .burger i { background: var(--acc); }
.nav-menu[open] .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-menu[open] .burger i:nth-child(2) { opacity: 0; }
.nav-menu[open] .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-menu > nav {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: 0 18px 44px rgba(0,0,0,.5);
  padding: 6px; min-width: 200px; z-index: 60;
  display: flex; flex-direction: column;
}
.nav-menu > nav a {
  padding: 11px 13px; border-radius: 4px;
  color: var(--txt); font-family: var(--font-mono);
  font-weight: 500; font-size: .86rem;
}
.nav-menu > nav a::before { content: "> "; color: var(--acc); opacity: .45; }
.nav-menu > nav a:hover { background: var(--bg-2); color: #fff; text-decoration: none; }
.nav-menu > nav a:hover::before { opacity: 1; }

@media (max-width: 760px) {
  .site-nav { display: none; }
  .nav-menu { display: block; }
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-mono); font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), background .18s, box-shadow .18s, color .18s, border-color .18s;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { transition: transform .2s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn-primary, .btn-accent {
  background: var(--acc); color: #0a0e12;
  box-shadow: 0 0 0 rgba(198,255,58,0);
  position: relative; overflow: hidden;
}
.btn-primary:hover, .btn-accent:hover { box-shadow: 0 0 28px var(--glow); }
/* periodic light sweep across accent CTAs */
.btn-primary::after, .btn-accent::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 42%; left: -60%;
  transform: skewX(-22deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: shine 3.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes shine { 0%, 55% { left: -60%; } 100% { left: 170%; } }
.btn-ghost { background: transparent; color: var(--txt); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--acc); color: var(--acc); }
.btn-outline { background: transparent; color: var(--acc); border-color: currentColor; }
.btn-outline:hover { background: currentColor; }
.btn-outline:hover span, .btn-outline:hover svg { color: #0a0e12; }
.btn-large { padding: 16px 30px; font-size: 1rem; }

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 460px at 82% -12%, rgba(198,255,58,0.10), transparent 60%),
    radial-gradient(720px 520px at 6% 108%, rgba(77,226,255,0.10), transparent 60%),
    var(--bg);
  color: #fff;
  padding: clamp(76px, 13vh, 140px) 0 clamp(72px, 11vh, 116px);
  border-bottom: 1px solid var(--line);
}
.hero::before {   /* grid */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 82%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 82%);
  pointer-events: none;
}
.hero::after {   /* grain */
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .04; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero .container { position: relative; z-index: 1; max-width: 1000px; }

.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 500; letter-spacing: .04em;
  padding: 7px 14px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--line-2);
  color: var(--txt-dim); margin-bottom: 26px;
}
.hero-kicker::before { content: "innovatek/software"; color: var(--acc); }
.hero-kicker::after { content: "▊"; color: var(--acc); animation: blink 1.1s step-end infinite; margin-left: -4px; }

.hero h1 { color: #fff; margin-bottom: 20px; max-width: 20ch; }
.hero h1 .accent {
  color: var(--acc); position: relative;
  display: inline-block; overflow: hidden; white-space: nowrap;
  vertical-align: bottom; max-width: 0;
  animation: typing 1.5s steps(15, end) .5s forwards;
}
@keyframes typing { from { max-width: 0; } to { max-width: 15ch; } }
.hero h1 .accent::after {
  content: "_"; color: var(--acc); animation: blink 1.1s step-end infinite; margin-left: .06em;
}

/* floating glow orbs */
.hero-orb {
  position: absolute; border-radius: 50%; filter: blur(70px);
  opacity: .35; pointer-events: none; z-index: 0;
}
.hero-orb-a {
  width: 380px; height: 380px; right: -90px; top: -130px;
  background: radial-gradient(circle, rgba(198,255,58,.5), transparent 70%);
  animation: drift 11s ease-in-out infinite alternate;
}
.hero-orb-b {
  width: 320px; height: 320px; left: -110px; bottom: -150px;
  background: radial-gradient(circle, rgba(77,226,255,.45), transparent 70%);
  animation: drift 14s ease-in-out infinite alternate-reverse;
}
.hero-orb-c {
  width: 260px; height: 260px; left: 46%; top: 34%;
  background: radial-gradient(circle, rgba(124,92,255,.34), transparent 70%);
  animation: drift 17s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(46px,34px,0) scale(1.18); }
}
.hero .lead {
  font-family: var(--font-sans);
  font-size: clamp(1.06rem, 1.6vw, 1.24rem); max-width: 56ch;
  color: var(--txt-dim); margin-bottom: 32px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 46px; }
.hero-products {
  display: flex; align-items: center; flex-wrap: wrap;
  font-family: var(--font-mono); color: var(--txt-faint);
  font-weight: 500; font-size: .78rem; letter-spacing: .04em;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.hero-products strong { color: var(--txt); font-weight: 500; }
.hero-products .dot { color: var(--acc); opacity: .5; margin: 0 12px; }

.hero-kicker, .hero h1, .hero .lead, .hero-actions, .hero-products {
  animation: rise .7s cubic-bezier(.2,.8,.2,1) both;
}
.hero h1 { animation-delay: .06s; }
.hero .lead { animation-delay: .14s; }
.hero-actions { animation-delay: .22s; }
.hero-products { animation-delay: .30s; }

/* ── Sections ──────────────────────────────────────────────────────── */
.section { padding: clamp(64px, 9vw, 104px) 0; }
.section-alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 760px; margin: 0 0 clamp(36px, 5vw, 54px); }
.section-pill {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--font-mono); font-size: .76rem; font-weight: 500; letter-spacing: .08em;
  color: var(--acc); margin-bottom: 18px; text-transform: uppercase;
}
.section-index { color: var(--txt-faint); font-variant-numeric: tabular-nums; }
.section-index::after { content: "//"; margin-left: 10px; color: var(--line-2); }
.section-head h2 { margin-bottom: 14px; max-width: 20ch; }
.section-head .muted { font-size: clamp(1.02rem, 1.4vw, 1.14rem); line-height: 1.6; }

/* ── Product cards — terminal windows ──────────────────────────────── */
.products-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 820px) { .products-grid { grid-template-columns: 1fr; } }
.product-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  /* 3D tilt driven by --rx/--ry (pointer) + --ty lift on hover */
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  will-change: transform;
  transition: transform .16s ease-out, box-shadow .26s, border-color .26s;
}
/* terminal title bar (full-bleed via negative margins on the 30px padding) */
.term-bar {
  display: flex; align-items: center; gap: 7px;
  margin: -30px -30px 22px; padding: 11px 16px;
  background: var(--panel-2); border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
}
.term-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); flex: 0 0 auto; }
.term-dot:nth-child(1) { background: #ff5f57; }
.term-dot:nth-child(2) { background: #febc2e; }
.term-dot:nth-child(3) { background: #28c840; }
.term-path { margin-left: auto; font-size: .72rem; color: var(--txt-faint); letter-spacing: .02em; }
.product-card:hover .term-path { color: var(--txt-dim); }

/* mouse-tracking spotlight (–-mx/–-my set by a tiny inline script) */
.product-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity .3s;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(198,255,58,.20), transparent 68%);
}
.product-card:hover::before { opacity: 1; }
.product-card.product-moneto::before     { background: radial-gradient(440px circle at var(--mx,50%) var(--my,50%), rgba(55,224,122,.22), transparent 68%); }
.product-card.product-carcontrol::before { background: radial-gradient(440px circle at var(--mx,50%) var(--my,50%), rgba(255,176,32,.22), transparent 68%); }
.product-card.product-workio::before     { background: radial-gradient(440px circle at var(--mx,50%) var(--my,50%), rgba(91,157,255,.22), transparent 68%); }
.product-card.product-lalo::before       { background: radial-gradient(440px circle at var(--mx,50%) var(--my,50%), rgba(255,138,92,.22), transparent 68%); }

.product-card::after { /* accent underglow line */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--acc); transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.product-card.product-moneto::after     { background: var(--p-moneto); }
.product-card.product-carcontrol::after { background: var(--p-carcontrol); }
.product-card.product-workio::after     { background: var(--p-workio); }
.product-card.product-lalo::after        { background: var(--p-lalo); }
.product-card:hover { --ty: -6px; border-color: var(--line-2); box-shadow: 0 24px 50px rgba(0,0,0,.5); }
.product-card:hover::after { transform: scaleX(1); }
.product-card.product-moneto:hover     { box-shadow: 0 24px 50px rgba(0,0,0,.5), 0 0 30px rgba(55,224,122,.12); }
.product-card.product-carcontrol:hover { box-shadow: 0 24px 50px rgba(0,0,0,.5), 0 0 30px rgba(255,176,32,.12); }
.product-card.product-workio:hover     { box-shadow: 0 24px 50px rgba(0,0,0,.5), 0 0 30px rgba(91,157,255,.12); }
.product-card.product-lalo:hover        { box-shadow: 0 24px 50px rgba(0,0,0,.5), 0 0 30px rgba(255,138,92,.12); }

.product-head { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
.product-icon {
  width: 60px; height: 60px; border-radius: 14px; flex: 0 0 auto; object-fit: cover;
  box-shadow: 0 6px 18px rgba(0,0,0,.4); background: #fff;
  transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
.product-card:hover .product-icon { transform: scale(1.05) rotate(-3deg); }
.product-tag {
  display: inline-block; font-family: var(--font-mono);
  font-size: .68rem; font-weight: 500; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 4px; margin-bottom: 8px;
  background: rgba(255,255,255,.05); color: var(--txt-dim);
  border: 1px solid var(--line); text-transform: lowercase;
}
.product-card.product-moneto     .product-tag { color: var(--p-moneto);     border-color: rgba(55,224,122,.3); }
.product-card.product-carcontrol .product-tag { color: var(--p-carcontrol); border-color: rgba(255,176,32,.3); }
.product-card.product-workio     .product-tag { color: var(--p-workio);     border-color: rgba(91,157,255,.3); }
.product-card.product-lalo       .product-tag { color: var(--p-lalo);       border-color: rgba(255,138,92,.3); }

.product-card h3.product-name { font-size: 1.5rem; font-weight: 600; margin-bottom: 0; line-height: 1.05; color: #fff; }
.product-headline { color: #fff; font-family: var(--font-mono); font-size: 1rem; font-weight: 500; margin-bottom: 10px; letter-spacing: -.01em; }
.product-body { color: var(--txt-dim); margin-bottom: 20px; font-size: .96rem; }
.product-features { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 11px; }
.product-features li { display: flex; gap: 11px; align-items: flex-start; font-size: .93rem; color: var(--txt); line-height: 1.45; }
.feature-check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--acc-soft); color: var(--acc); margin-top: 1px;
}
.product-card.product-moneto     .feature-check { background: rgba(55,224,122,.14);  color: var(--p-moneto); }
.product-card.product-carcontrol .feature-check { background: rgba(255,176,32,.14);  color: var(--p-carcontrol); }
.product-card.product-workio     .feature-check { background: rgba(91,157,255,.14);  color: var(--p-workio); }
.product-card.product-lalo       .feature-check { background: rgba(255,138,92,.14);  color: var(--p-lalo); }
.product-platforms {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .02em;
  color: var(--txt-faint); margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line);
}
.product-cta { margin-top: 18px; margin-bottom: 4px; }
.product-card .btn-outline { width: 100%; }
.product-card.product-moneto     .btn-outline { color: var(--p-moneto); }
.product-card.product-carcontrol .btn-outline { color: var(--p-carcontrol); }
.product-card.product-workio     .btn-outline { color: var(--p-workio); }
.product-card.product-lalo       .btn-outline { color: var(--p-lalo); }

/* Lalo Scuola (in arrivo) — violet */
.product-card.product-laloscuola::before      { background: radial-gradient(440px circle at var(--mx,50%) var(--my,50%), rgba(180,140,255,.22), transparent 68%); }
.product-card.product-laloscuola::after        { background: var(--p-laloscuola); }
.product-card.product-laloscuola:hover          { box-shadow: 0 24px 50px rgba(0,0,0,.5), 0 0 30px rgba(180,140,255,.14); }
.product-card.product-laloscuola .product-tag   { color: var(--p-laloscuola); border-color: rgba(180,140,255,.32); }
.product-card.product-laloscuola .feature-check { background: rgba(180,140,255,.16);  color: var(--p-laloscuola); }
.product-card.product-laloscuola .btn-outline   { color: var(--p-laloscuola); }

/* NetBlade (in arrivo) — cyan */
.product-card.product-netblade::before      { background: radial-gradient(440px circle at var(--mx,50%) var(--my,50%), rgba(77,226,255,.22), transparent 68%); }
.product-card.product-netblade::after        { background: var(--p-netblade); }
.product-card.product-netblade:hover          { box-shadow: 0 24px 50px rgba(0,0,0,.5), 0 0 30px rgba(77,226,255,.14); }
.product-card.product-netblade .product-tag   { color: var(--p-netblade); border-color: rgba(77,226,255,.32); }
.product-card.product-netblade .feature-check { background: rgba(77,226,255,.16);  color: var(--p-netblade); }
.product-card.product-netblade .btn-outline   { color: var(--p-netblade); }

/* "Presto / coming soon" badge on unreleased apps */
.product-badge {
  display: inline-block; font-family: var(--font-mono);
  font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 4px; margin-bottom: 8px; margin-left: 8px; vertical-align: middle;
  color: #0a0e12; background: var(--pc, var(--acc));
}

/* ── Store buttons (contextual per platform) ───────────────────────── */
.product-card.product-moneto     { --pc: var(--p-moneto); }
.product-card.product-carcontrol { --pc: var(--p-carcontrol); }
.product-card.product-workio     { --pc: var(--p-workio); }
.product-card.product-lalo       { --pc: var(--p-lalo); }
.product-card.product-laloscuola { --pc: var(--p-laloscuola); }
.product-card.product-netblade   { --pc: var(--p-netblade); }

.product-stores { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 4px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: 9px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.03);
  color: var(--txt); font-family: var(--font-mono); font-size: .82rem; font-weight: 500;
  text-decoration: none; line-height: 1;
  transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.store-btn svg { color: var(--pc, var(--acc)); flex: 0 0 auto; }
a.store-btn:hover { border-color: var(--pc, var(--acc)); color: #fff; background: rgba(255,255,255,.06); transform: translateY(-2px); }
.store-btn.is-soon { opacity: .6; border-style: dashed; cursor: default; }
.store-btn.is-soon svg { color: var(--txt-dim); }
.store-soon {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--pc, var(--acc)); border: 1px solid currentColor; border-radius: 4px;
  padding: 2px 6px; margin-left: 2px;
}

/* ── Values grid ───────────────────────────────────────────────────── */
.values-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.value-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; text-align: left; position: relative; overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s, box-shadow .22s;
}
.value-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 80%) var(--my, 20%), rgba(198,255,58,.18), transparent 70%);
  transition: opacity .3s;
}
.value-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.value-card:hover::before { opacity: 1; }
.value-icon {
  width: 50px; height: 50px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--acc-soft); color: var(--acc); border: 1px solid rgba(198,255,58,.25);
  margin-bottom: 20px; position: relative; z-index: 1;
}
.value-card h3 { font-size: 1.1rem; margin-bottom: 8px; color: #fff; position: relative; z-index: 1; }
.value-card p { color: var(--txt-dim); font-size: .94rem; margin: 0; line-height: 1.58; position: relative; z-index: 1; }

/* ── About + stats ─────────────────────────────────────────────────── */
.about-grid { display: grid; gap: 48px; grid-template-columns: 1.15fr .85fr; align-items: center; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 36px; } }
.about-grid .muted { font-size: 1.04rem; }
.about-stats {
  display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr);
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.about-stat { text-align: center; padding: 32px 14px; background: var(--panel); }
.about-stat .num {
  font-family: var(--font-mono); font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 700;
  line-height: 1; color: var(--acc); display: block; margin-bottom: 8px; letter-spacing: -.03em;
  text-shadow: 0 0 24px rgba(198,255,58,.25);
}
.about-stat .lbl { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-faint); }

/* ── Contact / CTA strip ───────────────────────────────────────────── */
.contact-strip {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 360px at 100% 0%, rgba(198,255,58,0.10), transparent 60%),
    radial-gradient(560px 320px at 0% 100%, rgba(77,226,255,0.10), transparent 62%),
    var(--bg-2);
  color: #fff; padding: clamp(64px, 10vw, 96px) 0;
  border-top: 1px solid var(--line);
}
.contact-strip .section-head { margin: 0 auto 26px; text-align: center; }
.contact-strip .section-pill { justify-content: center; }
.contact-strip h2 { margin-inline: auto; }
.contact-strip .muted { color: var(--txt-dim); }
.contact-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }

/* ── Footer ────────────────────────────────────────────────────────── */
.site-footer { background: #070a0d; color: var(--txt-dim); padding: 62px 0 26px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; gap: 40px; grid-template-columns: 1.5fr 1fr 1fr 1fr; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-brand img { width: 36px; height: 36px; }
.footer-brand strong { font-family: var(--font-mono); font-size: 1.02rem; color: #fff; letter-spacing: -.01em; }
.site-footer h4 { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--txt); margin-bottom: 16px; font-weight: 500; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer-links a { color: var(--txt-dim); font-size: .92rem; }
.footer-links a:hover { color: var(--acc); text-decoration: none; }
.footer-bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .76rem; color: var(--txt-faint); letter-spacing: .02em;
}

/* ── Legal pages ───────────────────────────────────────────────────── */
.legal-wrap { padding: 64px 0 96px; background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 55%); }
.legal-page {
  max-width: 760px; margin: 0 auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 50px clamp(20px, 4vw, 56px);
}
.legal-page h1 { font-size: clamp(1.9rem, 3.4vw, 2.4rem); margin-bottom: 8px; color: #fff; }
.legal-page .updated { font-family: var(--font-mono); color: var(--txt-faint); font-size: .8rem; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.legal-page .lead-p { font-size: 1.04rem; color: var(--txt); line-height: 1.7; }
.legal-page h2 { font-size: 1.25rem; margin: 36px 0 12px; color: #fff; font-weight: 600; }
.legal-page p { color: var(--txt-dim); line-height: 1.75; font-size: .97rem; margin: 0 0 14px; }
.legal-page a { color: var(--acc); text-decoration: underline; text-decoration-color: rgba(198,255,58,.4); text-underline-offset: 2px; }
.legal-page a:hover { text-decoration-color: var(--acc); }

/* ── 404 ───────────────────────────────────────────────────────────── */
.not-found { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 60px 24px; }
.not-found h1 { font-size: clamp(3.6rem, 11vw, 6.5rem); margin-bottom: 0; color: var(--acc); text-shadow: 0 0 40px var(--glow); }

/* ── Services / custom software ────────────────────────────────────── */
.services {
  position: relative; overflow: hidden;
  background:
    radial-gradient(680px 380px at 90% 8%, rgba(198,255,58,.06), transparent 60%),
    radial-gradient(560px 360px at 4% 96%, rgba(77,226,255,.07), transparent 62%),
    var(--bg);
}
.services::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 120% at 80% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 120% at 80% 0%, #000 20%, transparent 75%);
}
.services .container { position: relative; z-index: 1; }
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .services-grid { grid-template-columns: 1fr; gap: 34px; } }
.services-copy h2 { max-width: 17ch; }
.services-copy > .muted { max-width: 48ch; }
.services-list {
  list-style: none; padding: 0; margin: 22px 0 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px;
}
@media (max-width: 520px) { .services-list { grid-template-columns: 1fr; } }
.services-list li { display: flex; gap: 11px; align-items: center; font-size: .94rem; color: var(--txt); }
.services-cta { margin-top: 4px; }

.services-term {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.5);
  transform: perspective(1300px) rotateY(-4deg) rotateX(2deg);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.services-term:hover { transform: perspective(1300px) rotateY(0) rotateX(0); box-shadow: 0 34px 70px rgba(0,0,0,.55), 0 0 40px rgba(198,255,58,.10); }
.services-term .term-bar { margin: 0; padding: 12px 16px; }
.term-body {
  position: relative; overflow: hidden;
  font-family: var(--font-mono); font-size: .86rem; line-height: 1.95;
  padding: 20px 20px 24px; color: var(--txt);
}
.term-body p { margin: 0; white-space: nowrap; }
.term-prompt { color: var(--acc); margin-right: 8px; }
.term-ok { color: var(--txt-dim); }
.term-ok::before { content: "\2713"; color: var(--acc); margin-right: 10px; font-weight: 700; }
.term-type { color: #fff; margin-top: 8px !important; }
.term-caret { display: inline-block; color: var(--acc); margin-left: 1px; animation: blink 1.1s step-end infinite; }
.term-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 46px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(198,255,58,.10), transparent);
  animation: scan 4.4s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes scan { 0% { transform: translateY(-50px); } 100% { transform: translateY(360px); } }

/* ── Scroll-driven reveals (progressive enhancement) ───────────────── */
@supports (animation-timeline: view()) {
  .section-head, .products-grid, .values-grid, .services-grid,
  .about-grid, .contact-actions {
    animation: reveal both;
    animation-timeline: view();
    animation-range: entry 5% entry 38%;
  }
  @keyframes reveal {
    from { opacity: 0; transform: translateY(46px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ── Niceties ──────────────────────────────────────────────────────── */
::selection { background: var(--acc); color: #0a0e12; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--txt-faint); }

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

/* ── NetBlade product page (/netblade) ─────────────────────────────── */
:root {
  --nb:       #4de2ff;   /* NetBlade cyan (mirrors --p-netblade) */
  --nb-soft:  rgba(77, 226, 255, .12);
  --nb-glow:  rgba(77, 226, 255, .32);
}

/* Hero */
.nb-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 480px at 88% -14%, rgba(77,226,255,.14), transparent 60%),
    radial-gradient(760px 520px at 2% 106%, rgba(124,92,255,.12), transparent 62%),
    var(--bg);
  padding: clamp(46px, 7vh, 76px) 0 clamp(56px, 9vh, 96px);
  border-bottom: 1px solid var(--line);
}
.nb-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 82%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 82%);
}
.nb-orb { position: absolute; border-radius: 50%; filter: blur(72px); opacity: .34; pointer-events: none; z-index: 0; }
.nb-orb-a {
  width: 400px; height: 400px; right: -110px; top: -150px;
  background: radial-gradient(circle, rgba(77,226,255,.55), transparent 70%);
  animation: drift 12s ease-in-out infinite alternate;
}
.nb-orb-b {
  width: 320px; height: 320px; left: -120px; bottom: -160px;
  background: radial-gradient(circle, rgba(124,92,255,.42), transparent 70%);
  animation: drift 16s ease-in-out infinite alternate-reverse;
}
.nb-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 52px; align-items: center;
}
@media (max-width: 980px) { .nb-hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.nb-back {
  display: inline-block; font-family: var(--font-mono); font-size: .76rem;
  color: var(--txt-faint); letter-spacing: .04em; margin-bottom: 26px;
}
.nb-back:hover { color: var(--nb); text-decoration: none; }

.nb-title-row { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.nb-app-icon {
  width: 92px; height: 92px; border-radius: 20px; flex: 0 0 auto; object-fit: cover;
  box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 34px rgba(77,226,255,.18);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.nb-app-icon:hover { transform: scale(1.05) rotate(-3deg); }
@media (max-width: 480px) { .nb-app-icon { width: 68px; height: 68px; border-radius: 16px; } }
.nb-kicker {
  display: block; font-family: var(--font-mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--nb); margin-bottom: 6px;
}
.nb-kicker::before { content: "~/"; opacity: .55; }
.nb-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.2rem); margin: 0; color: #fff;
  letter-spacing: -.04em; text-shadow: 0 0 44px rgba(77,226,255,.28);
}
.nb-headline {
  font-family: var(--font-mono); font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  color: #fff; font-weight: 500; letter-spacing: -.01em; margin-bottom: 14px; max-width: 30ch;
}
.nb-lead { color: var(--txt-dim); max-width: 58ch; font-size: 1.02rem; margin-bottom: 24px; }

.nb-badges { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 9px; }
.nb-badges li {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .05em;
  padding: 6px 11px; border-radius: 5px; color: var(--txt-dim);
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
}
.nb-badges li:first-child { color: var(--nb); border-color: rgba(77,226,255,.32); }

.nb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.btn.nb-btn {
  background: var(--nb); color: #06121a; position: relative; overflow: hidden;
}
.btn.nb-btn svg { color: #06121a; }
.btn.nb-btn:hover { box-shadow: 0 0 30px var(--nb-glow); }
.btn.nb-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 42%; left: -60%;
  transform: skewX(-22deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: shine 3.4s cubic-bezier(.4,0,.2,1) infinite;
}
.nb-actions .store-btn.is-soon { --pc: var(--nb); }
.nb-meta { font-family: var(--font-mono); font-size: .72rem; color: var(--txt-faint); margin: 0; letter-spacing: .02em; }

/* Hero terminal */
.nb-term {
  position: relative; z-index: 1;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: 0 30px 64px rgba(0,0,0,.55);
  transform: perspective(1400px) rotateY(-5deg) rotateX(2deg);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
}
.nb-term:hover {
  transform: perspective(1400px) rotateY(0) rotateX(0);
  box-shadow: 0 34px 74px rgba(0,0,0,.6), 0 0 44px rgba(77,226,255,.14);
}
.nb-term .term-bar { margin: 0; padding: 12px 16px; }
.nb-term-body { overflow-x: auto; padding: 18px 16px 22px; line-height: 1.75; font-size: .78rem; }
.nb-term-body p { margin: 0; white-space: nowrap; }
.nb-prompt { color: var(--nb); margin-right: 8px; }
.nb-cmd { color: #fff; margin-bottom: 10px !important; min-width: 420px; }
.nb-row {
  display: grid; min-width: 420px; gap: 0 12px;
  grid-template-columns: 13px 96px minmax(94px, 1fr) 80px 44px auto;
  animation: rise .5s cubic-bezier(.2,.8,.2,1) var(--d, 0s) both;
}
.nb-ok     { color: var(--nb); }
.nb-ip     { color: var(--txt); }
.nb-host   { color: #fff; }
.nb-vendor { color: var(--txt-faint); }
.nb-ms     { color: var(--acc); text-align: right; }
.nb-ports  { color: rgba(77,226,255,.72); }
.nb-note { color: #fff; margin-top: 10px !important; min-width: 420px; }
.nb-note .term-caret { color: var(--nb); }
.nb-scan { background: linear-gradient(180deg, transparent, rgba(77,226,255,.12), transparent); }

/* Stats strip */
.nb-stats-wrap { padding: clamp(40px, 6vw, 66px) 0 0; }
.nb-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
@media (max-width: 720px) { .nb-stats { grid-template-columns: repeat(2, 1fr); } }
.nb-stat { background: var(--panel); text-align: center; padding: 30px 14px; }
.nb-stat .num {
  display: block; font-family: var(--font-mono); font-weight: 700; line-height: 1;
  font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--nb); letter-spacing: -.03em;
  margin-bottom: 9px; text-shadow: 0 0 26px rgba(77,226,255,.3);
}
.nb-stat .lbl {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt-faint);
}

/* Shared page accents */
.section-pill.nb-pill { color: var(--nb); }
.nb-check { background: rgba(77,226,255,.16); color: var(--nb); }

/* Feature cards */
.nb-scan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 980px) { .nb-scan-grid { grid-template-columns: 1fr; } }
.nb-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .nb-split { grid-template-columns: 1fr; } }
.nb-card {
  position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), border-color .24s, box-shadow .24s;
}
.nb-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--nb), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.nb-card:hover {
  transform: translateY(-5px); border-color: var(--line-2);
  box-shadow: 0 22px 46px rgba(0,0,0,.5), 0 0 30px rgba(77,226,255,.12);
}
.nb-card:hover::after { transform: scaleX(1); }
.nb-card-icon {
  width: 48px; height: 48px; border-radius: 12px; margin-bottom: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--nb-soft); color: var(--nb); border: 1px solid rgba(77,226,255,.26);
}
.nb-card h3 { font-size: 1.2rem; color: #fff; margin-bottom: 8px; }
.nb-card-body { color: var(--txt-dim); font-size: .95rem; margin-bottom: 18px; }
.nb-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.nb-features li { display: flex; gap: 11px; align-items: flex-start; font-size: .92rem; line-height: 1.45; color: var(--txt); }

/* Screenshot gallery */
.nb-gallery { overflow: hidden; }
/* The shots are the store's own marketing tiles: each already carries a device
   frame, its caption and a slice of one continuous panorama, so they sit edge to
   edge (gap 0) and the background flows across them exactly as in the Play carousel.
   No CSS frame, no separate figcaption — both are baked into the image. */
.nb-shots {
  display: flex; gap: 0; overflow-x: auto;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  padding: 0 max(24px, calc((100% - var(--container-max)) / 2));
  scroll-padding-left: max(24px, calc((100% - var(--container-max)) / 2));
  border-radius: 20px;
}
.nb-shot {
  flex: 0 0 auto; width: clamp(240px, 78vw, 320px); height: auto;
  display: block; margin: 0; scroll-snap-align: start;
}
.nb-shots::-webkit-scrollbar { height: 10px; }
.nb-shots::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 3px solid var(--bg-2); }
.nb-shots::-webkit-scrollbar-thumb:hover { background: var(--nb); }

/* Tools */
.nb-toolsec {
  position: relative;
  background:
    radial-gradient(640px 380px at 92% 10%, rgba(77,226,255,.07), transparent 62%),
    var(--bg);
}
.nb-tools-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .nb-tools-grid { grid-template-columns: 1fr; gap: 30px; } }
.nb-tools-grid h2 { max-width: 16ch; }
.nb-tools-grid .muted { max-width: 52ch; margin-bottom: 0; }
.nb-tool-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.nb-tool {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .79rem; font-weight: 500; color: var(--txt);
  padding: 9px 13px; border-radius: 8px; line-height: 1;
  background: rgba(255,255,255,.025); border: 1px solid var(--line);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s, color .18s, box-shadow .18s;
}
.nb-tool-mark { color: var(--nb); font-size: .7em; }
.nb-tool:hover {
  transform: translateY(-3px); color: #fff;
  border-color: rgba(77,226,255,.5); box-shadow: 0 0 22px rgba(77,226,255,.14);
}

/* Privacy panel */
.nb-privacy {
  display: grid; grid-template-columns: 66px 1fr; gap: 28px; align-items: start;
  background:
    radial-gradient(560px 300px at 8% 0%, rgba(77,226,255,.10), transparent 62%),
    var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 46px);
}
@media (max-width: 620px) { .nb-privacy { grid-template-columns: 1fr; gap: 20px; } }
.nb-privacy-icon {
  width: 66px; height: 66px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--nb-soft); color: var(--nb); border: 1px solid rgba(77,226,255,.26);
}
.nb-privacy h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 12px; }
.nb-privacy .muted { font-size: 1rem; }
.nb-privacy-note {
  font-family: var(--font-mono); font-size: .78rem; line-height: 1.65; color: var(--txt-faint);
  border-left: 2px solid rgba(77,226,255,.45); padding-left: 14px; margin: 0 0 22px;
}
.nb-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .84rem; font-weight: 500; color: var(--nb);
}
.nb-link:hover { text-decoration: none; }
.nb-link svg { transition: transform .2s ease; }
.nb-link:hover svg { transform: translateX(4px); }

/* Download strip */
.nb-cta {
  position: relative; overflow: hidden; text-align: center;
  background:
    radial-gradient(720px 360px at 100% 0%, rgba(77,226,255,.12), transparent 60%),
    radial-gradient(560px 320px at 0% 100%, rgba(124,92,255,.10), transparent 62%),
    var(--bg-2);
  padding: clamp(60px, 9vw, 92px) 0;
  border-top: 1px solid var(--line);
}
.nb-cta h2 { margin: 0 auto 12px; max-width: 18ch; }
.nb-cta .muted { max-width: 56ch; margin: 0 auto; }
.nb-cta-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.nb-cta-actions .store-btn.is-soon { --pc: var(--nb); }

@supports (animation-timeline: view()) {
  .nb-stats, .nb-scan-grid, .nb-split, .nb-tools-grid, .nb-privacy {
    animation: reveal both;
    animation-timeline: view();
    animation-range: entry 5% entry 38%;
  }
}

/* Prominent link on product cards → the app's own site, or its page here.
   Same weight on every card so no product looks like an afterthought. */
.product-more {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 16px; padding: 13px 16px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--pc, var(--acc)) 42%, transparent);
  background: color-mix(in srgb, var(--pc, var(--acc)) 8%, transparent);
  font-family: var(--font-mono); font-size: .84rem; font-weight: 600;
  color: var(--pc, var(--acc)); line-height: 1;
  transition: background .2s, border-color .2s, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.product-more:hover {
  text-decoration: none; transform: translateY(-2px);
  background: color-mix(in srgb, var(--pc, var(--acc)) 16%, transparent);
  border-color: var(--pc, var(--acc));
  box-shadow: 0 0 24px color-mix(in srgb, var(--pc, var(--acc)) 22%, transparent);
}
.product-more .more-host {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 500; opacity: .78; letter-spacing: .01em;
}
.product-more svg { transition: transform .2s ease; }
.product-more:hover svg { transform: translateX(4px); }
@media (max-width: 420px) {
  .product-more { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── Link-in-bio page (/links) ─────────────────────────────────────── */
.lk {
  position: relative; overflow: hidden;
  min-height: 78vh; padding: clamp(38px, 7vw, 70px) 20px clamp(56px, 8vw, 90px);
  background:
    radial-gradient(760px 420px at 82% -10%, rgba(198,255,58,.10), transparent 62%),
    radial-gradient(680px 460px at 4% 104%, rgba(77,226,255,.10), transparent 62%),
    var(--bg);
}
.lk::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(110% 80% at 50% 0%, #000 30%, transparent 82%);
  -webkit-mask-image: radial-gradient(110% 80% at 50% 0%, #000 30%, transparent 82%);
}
.lk-inner { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; text-align: center; }
.lk-logo {
  width: 88px; height: 88px; margin: 0 auto 20px; object-fit: contain;
  filter: brightness(1.25) drop-shadow(0 0 14px rgba(120,190,255,.45));
}
.lk h1 { font-size: clamp(1.7rem, 6vw, 2.3rem); margin-bottom: 10px; }
.lk-sub { color: var(--txt-dim); font-size: 1rem; margin-bottom: 34px; }

.lk-list { display: grid; gap: 12px; text-align: left; }
.lk-item {
  --pc: var(--acc);
  display: flex; align-items: center; gap: 15px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--txt); text-decoration: none;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .2s, background .2s;
}
.lk-item:hover {
  text-decoration: none; transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--pc) 55%, transparent);
  box-shadow: 0 16px 34px rgba(0,0,0,.45), 0 0 26px color-mix(in srgb, var(--pc) 18%, transparent);
}
.lk-item > img, .lk-ico {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 13px; object-fit: cover;
  box-shadow: 0 6px 16px rgba(0,0,0,.45); background: #fff;
}
.lk-ico {
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--pc) 14%, transparent);
  color: var(--pc); border: 1px solid color-mix(in srgb, var(--pc) 30%, transparent);
  box-shadow: none;
}
.lk-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.lk-name {
  font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: #fff;
  display: flex; align-items: center; gap: 8px; letter-spacing: -.01em;
}
.lk-badge {
  font-family: var(--font-mono); font-size: .58rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px; color: #0a0e12; background: var(--pc);
}
.lk-tag { font-size: .84rem; color: var(--txt-dim); line-height: 1.35; }
.lk-dest {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .74rem; font-weight: 500;
  color: var(--pc); opacity: .85;
}
.lk-dest svg { transition: transform .2s ease; }
.lk-item:hover .lk-dest svg { transform: translateX(4px); }

.lk-netblade   { --pc: var(--p-netblade); }
.lk-moneto     { --pc: var(--p-moneto); }
.lk-carcontrol { --pc: var(--p-carcontrol); }
.lk-workio     { --pc: var(--p-workio); }
.lk-lalo       { --pc: var(--p-lalo); }
.lk-laloacademy{ --pc: var(--p-laloscuola); }
.lk-services   { --pc: var(--acc); }

.lk-foot {
  margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-mono); font-size: .78rem; color: var(--txt-faint);
}
.lk-foot a { color: var(--txt-dim); }
.lk-foot a:hover { color: var(--acc); text-decoration: none; }

@media (max-width: 420px) {
  .lk-dest { font-size: 0; gap: 0; }        /* on phones the arrow alone is enough */
  .lk-dest svg { font-size: 1rem; }
}

/* ── Blog: index list ──────────────────────────────────────────────── */
.blog-list { background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 40%); }
/* auto-fill + a max width so a single article does not stretch across the page */
.posts { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.post-card { max-width: 480px; }
.post-card {
  --pc: var(--acc);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  color: var(--txt); text-decoration: none;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), border-color .24s, box-shadow .24s;
}
.post-card:hover {
  text-decoration: none; transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--pc) 45%, transparent);
  box-shadow: 0 22px 46px rgba(0,0,0,.5), 0 0 30px color-mix(in srgb, var(--pc) 16%, transparent);
}
.post-cover { width: 100%; aspect-ratio: 1024 / 500; object-fit: cover; border-bottom: 1px solid var(--line); }
.post-card-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1 1 auto; }
.post-card-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.post-tag {
  display: inline-block; font-family: var(--font-mono);
  font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px;
  color: var(--pc); border: 1px solid color-mix(in srgb, var(--pc) 38%, transparent);
  background: color-mix(in srgb, var(--pc) 10%, transparent);
}
.post-date { font-family: var(--font-mono); font-size: .74rem; color: var(--txt-faint); margin: 0; }
.post-card h3 { font-size: 1.4rem; line-height: 1.15; margin-bottom: 10px; color: #fff; }
.post-card p { color: var(--txt-dim); font-size: .96rem; margin-bottom: 20px; }
.post-read {
  margin-top: auto; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .82rem; font-weight: 600; color: var(--pc);
}
.post-read svg { transition: transform .2s ease; }
.post-card:hover .post-read svg { transform: translateX(4px); }

/* ── Blog: article ─────────────────────────────────────────────────── */
.post { --pc: var(--acc); }
.post-head {
  position: relative; overflow: hidden;
  padding: clamp(40px, 6vw, 68px) 0 clamp(34px, 5vw, 52px);
  background:
    radial-gradient(820px 420px at 84% -12%, color-mix(in srgb, var(--pc) 16%, transparent), transparent 62%),
    var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.post-head .container { max-width: 820px; }
.post-back {
  display: block; width: fit-content; font-family: var(--font-mono); font-size: .76rem;
  color: var(--txt-faint); letter-spacing: .04em; margin-bottom: 26px;
}
.post-back:hover { color: var(--pc); text-decoration: none; }
.post-head h1 {
  font-size: clamp(2rem, 4.6vw, 3.1rem); margin: 16px 0 12px; max-width: 20ch;
  text-shadow: 0 0 50px color-mix(in srgb, var(--pc) 26%, transparent);
}
.post-head .post-date { margin-bottom: 22px; }
.post-lead { font-size: clamp(1.06rem, 1.7vw, 1.2rem); line-height: 1.6; color: var(--txt); margin: 0; }

.post-body { max-width: 820px; padding-top: clamp(38px, 5vw, 56px); }
.post-section { margin-bottom: clamp(30px, 4vw, 44px); }
.post-section h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.65rem); margin-bottom: 12px; color: #fff;
  padding-left: 16px; border-left: 3px solid var(--pc);
}
.post-section p { color: var(--txt-dim); font-size: 1.02rem; line-height: 1.75; margin: 0; }

/* ── Blog: screenshot carousel ─────────────────────────────────────── */
.post-gallery { padding: clamp(20px, 3vw, 34px) 0 clamp(34px, 5vw, 50px); overflow: hidden; }
.gallery-head {
  max-width: 820px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-bottom: 24px;
}
.gallery-head h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin: 0; color: #fff; }
.gallery-nav { display: flex; gap: 10px; }
.gal-btn {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line-2); color: var(--txt);
  font-family: var(--font-mono); font-size: 1rem; line-height: 1;
  transition: border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.gal-btn:hover {
  border-color: var(--pc); color: var(--pc); transform: translateY(-2px);
  box-shadow: 0 0 20px color-mix(in srgb, var(--pc) 20%, transparent);
}
.gallery-track {
  display: flex; gap: 22px; overflow-x: auto;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  padding: 6px max(24px, calc((100% - 820px) / 2)) 18px;
  scroll-padding-left: max(24px, calc((100% - 820px) / 2));
}
.gallery-item { flex: 0 0 232px; scroll-snap-align: start; margin: 0; }
@media (max-width: 520px) { .gallery-item { flex-basis: 72vw; } }
.gallery-phone {
  border-radius: 22px; padding: 6px; background: #080c11;
  border: 1px solid var(--line-2); overflow: hidden;
  box-shadow: 0 20px 42px rgba(0,0,0,.5);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
.gallery-phone img { width: 100%; border-radius: 17px; }
.gallery-item:hover .gallery-phone {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--pc) 45%, transparent);
  box-shadow: 0 26px 50px rgba(0,0,0,.55), 0 0 30px color-mix(in srgb, var(--pc) 16%, transparent);
}
.gallery-item figcaption {
  margin-top: 13px; font-family: var(--font-mono); font-size: .71rem;
  line-height: 1.5; color: var(--txt-dim);
}
.gallery-track::-webkit-scrollbar { height: 10px; }
.gallery-track::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 3px solid var(--bg); }
.gallery-track::-webkit-scrollbar-thumb:hover { background: var(--pc); }

/* ── Blog: article CTA ─────────────────────────────────────────────── */
.post-cta {
  max-width: 820px; margin-bottom: clamp(56px, 8vw, 90px);
  padding: clamp(28px, 4vw, 40px); border-radius: var(--radius-lg);
  background:
    radial-gradient(520px 260px at 92% 0%, color-mix(in srgb, var(--pc) 14%, transparent), transparent 62%),
    var(--panel);
  border: 1px solid var(--line);
}
.post-cta h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 10px; }
.post-cta .muted { margin-bottom: 22px; }
.post-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn.post-btn { background: var(--pc); color: #06121a; }
.btn.post-btn svg { color: #06121a; }
.btn.post-btn:hover { box-shadow: 0 0 28px color-mix(in srgb, var(--pc) 34%, transparent); }

/* ── Canali social ──────────────────────────────────────────────────
   Due presenze: una riga sobria nel footer e, nella sezione contatti,
   due schede grandi con il colore vero di ciascuna piattaforma — il
   grigio uniforme le farebbe sparire accanto al lime del bottone mail. */

.footer-social-head { margin-top: 22px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-social a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--panel);
  color: var(--txt-dim); font-family: var(--font-mono);
  font-size: .78rem; font-weight: 500;
  transition: color .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.footer-social a:hover {
  color: #fff; text-decoration: none; transform: translateY(-2px);
  border-color: var(--acc); box-shadow: 0 0 18px rgba(198,255,58,.18);
}

.contact-social { margin-top: 56px; text-align: center; }
.cs-label {
  display: block; margin-bottom: 20px;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--txt-faint);
}
.cs-links { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.cs-link {
  --sc: var(--acc);
  position: relative; overflow: hidden;
  /* griglia invece di flex: l'icona occupa entrambe le righe e nome e handle
     si impilano, invece di stare in fila su una riga sola */
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px;
  align-items: center; justify-items: start;
  padding: 20px 28px; min-width: 268px; border-radius: var(--radius);
  border: 1px solid var(--line-2); background: var(--panel); color: var(--txt);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s;
}
/* alone che si accende dall'angolo, come le card prodotto */
.cs-link::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px 200px at 88% -30%, color-mix(in srgb, var(--sc) 26%, transparent), transparent 62%);
  transition: opacity .3s;
}
.cs-link:hover {
  text-decoration: none; transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--sc) 55%, transparent);
  box-shadow: 0 20px 44px rgba(0,0,0,.5), 0 0 34px color-mix(in srgb, var(--sc) 20%, transparent);
}
.cs-link:hover::after { opacity: 1; }
.cs-link svg { color: var(--sc); grid-row: 1 / span 2; align-self: center; }
.cs-name {
  grid-column: 2;
  font-family: var(--font-mono); font-weight: 600; font-size: 1.02rem; color: #fff;
  line-height: 1.2;
}
.cs-handle { grid-column: 2; font-family: var(--font-mono); font-size: .8rem; color: var(--txt-faint); }
.cs-link > span:not(.cs-name):not(.cs-handle) { display: block; }
.cs-instagram { --sc: #ff4d8d; }
.cs-facebook  { --sc: #4d9bff; }

@media (max-width: 560px) {
  .cs-links { flex-direction: column; align-items: stretch; }
  .cs-link { min-width: 0; }
}
/* ── Lalo product page (/lalo) ─────────────────────────── */
:root {
  --la:       #ff8a5c;   /* Lalo orange (mirrors --p-lalo) */
  --la-soft:  rgba(255, 138, 92, .12);
  --la-glow:  rgba(255, 138, 92, .34);
}

/* Hero */
.la-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 480px at 88% -14%, rgba(255,138,92,.14), transparent 60%),
    radial-gradient(760px 520px at 2% 106%, rgba(124,92,255,.12), transparent 62%),
    var(--bg);
  padding: clamp(46px, 7vh, 76px) 0 clamp(56px, 9vh, 96px);
  border-bottom: 1px solid var(--line);
}
.la-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 82%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 82%);
}
.la-orb { position: absolute; border-radius: 50%; filter: blur(72px); opacity: .34; pointer-events: none; z-index: 0; }
.la-orb-a {
  width: 400px; height: 400px; right: -110px; top: -150px;
  background: radial-gradient(circle, rgba(255,138,92,.55), transparent 70%);
  animation: drift 12s ease-in-out infinite alternate;
}
.la-orb-b {
  width: 320px; height: 320px; left: -120px; bottom: -160px;
  background: radial-gradient(circle, rgba(124,92,255,.42), transparent 70%);
  animation: drift 16s ease-in-out infinite alternate-reverse;
}
.la-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 52px; align-items: center;
}
@media (max-width: 980px) { .la-hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.la-back {
  display: inline-block; font-family: var(--font-mono); font-size: .76rem;
  color: var(--txt-faint); letter-spacing: .04em; margin-bottom: 26px;
}
.la-back:hover { color: var(--la); text-decoration: none; }

.la-title-row { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.la-app-icon {
  width: 92px; height: 92px; border-radius: 20px; flex: 0 0 auto; object-fit: cover;
  box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 34px rgba(255,138,92,.18);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.la-app-icon:hover { transform: scale(1.05) rotate(-3deg); }
@media (max-width: 480px) { .la-app-icon { width: 68px; height: 68px; border-radius: 16px; } }
.la-kicker {
  display: block; font-family: var(--font-mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--la); margin-bottom: 6px;
}
.la-kicker::before { content: "~/"; opacity: .55; }
.la-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.2rem); margin: 0; color: #fff;
  letter-spacing: -.04em; text-shadow: 0 0 44px rgba(255,138,92,.28);
}
.la-headline {
  font-family: var(--font-mono); font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  color: #fff; font-weight: 500; letter-spacing: -.01em; margin-bottom: 14px; max-width: 30ch;
}
.la-lead { color: var(--txt-dim); max-width: 58ch; font-size: 1.02rem; margin-bottom: 24px; }

.la-badges { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 9px; }
.la-badges li {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .05em;
  padding: 6px 11px; border-radius: 5px; color: var(--txt-dim);
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
}
.la-badges li:first-child { color: var(--la); border-color: rgba(255,138,92,.32); }

.la-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.btn.la-btn {
  background: var(--la); color: #06121a; position: relative; overflow: hidden;
}
.btn.la-btn svg { color: #06121a; }
.btn.la-btn:hover { box-shadow: 0 0 30px var(--la-glow); }
.btn.la-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 42%; left: -60%;
  transform: skewX(-22deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: shine 3.4s cubic-bezier(.4,0,.2,1) infinite;
}
.la-actions .store-btn.is-soon { --pc: var(--la); }
.la-meta { font-family: var(--font-mono); font-size: .72rem; color: var(--txt-faint); margin: 0; letter-spacing: .02em; }

/* Hero terminal */
.la-scan { background: linear-gradient(180deg, transparent, rgba(255,138,92,.12), transparent); }

/* Stats strip */
.la-stats-wrap { padding: clamp(40px, 6vw, 66px) 0 0; }
.la-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
@media (max-width: 720px) { .la-stats { grid-template-columns: repeat(2, 1fr); } }
.la-stat { background: var(--panel); text-align: center; padding: 30px 14px; }
.la-stat .num {
  display: block; font-family: var(--font-mono); font-weight: 700; line-height: 1;
  font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--la); letter-spacing: -.03em;
  margin-bottom: 9px; text-shadow: 0 0 26px rgba(255,138,92,.3);
}
.la-stat .lbl {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt-faint);
}

/* Shared page accents */
.section-pill.la-pill { color: var(--la); }
.la-check { background: rgba(255,138,92,.16); color: var(--la); }

/* Feature cards */
.la-scan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 980px) { .la-scan-grid { grid-template-columns: 1fr; } }
.la-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .la-split { grid-template-columns: 1fr; } }
.la-card {
  position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), border-color .24s, box-shadow .24s;
}
.la-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--la), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.la-card:hover {
  transform: translateY(-5px); border-color: var(--line-2);
  box-shadow: 0 22px 46px rgba(0,0,0,.5), 0 0 30px rgba(255,138,92,.12);
}
.la-card:hover::after { transform: scaleX(1); }
.la-card-icon {
  width: 48px; height: 48px; border-radius: 12px; margin-bottom: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--la-soft); color: var(--la); border: 1px solid rgba(255,138,92,.26);
}
.la-card h3 { font-size: 1.2rem; color: #fff; margin-bottom: 8px; }
.la-card-body { color: var(--txt-dim); font-size: .95rem; margin-bottom: 18px; }
.la-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.la-features li { display: flex; gap: 11px; align-items: flex-start; font-size: .92rem; line-height: 1.45; color: var(--txt); }

/* Screenshot gallery */
.la-gallery { overflow: hidden; }
.la-shots {
  display: flex; gap: 22px; overflow-x: auto;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  padding: 6px max(24px, calc((100% - var(--container-max)) / 2)) 20px;
  scroll-padding-left: max(24px, calc((100% - var(--container-max)) / 2));
}
.la-shot { flex: 0 0 232px; scroll-snap-align: start; margin: 0; }
@media (max-width: 520px) { .la-shot { flex-basis: 74vw; } }
.la-phone {
  border-radius: 22px; padding: 6px; background: #080c11;
  border: 1px solid var(--line-2); overflow: hidden;
  box-shadow: 0 20px 42px rgba(0,0,0,.5);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.la-phone img { width: 100%; border-radius: 17px; }
.la-shot:hover .la-phone {
  transform: translateY(-7px);
  border-color: rgba(255,138,92,.45);
  box-shadow: 0 28px 54px rgba(0,0,0,.58), 0 0 34px rgba(255,138,92,.15);
}
.la-shot figcaption {
  font-family: var(--font-mono); font-size: .71rem; line-height: 1.5;
  color: var(--txt-dim); margin-top: 14px; letter-spacing: .01em;
}
.la-shots::-webkit-scrollbar { height: 10px; }
.la-shots::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 3px solid var(--bg-2); }
.la-shots::-webkit-scrollbar-thumb:hover { background: var(--la); }

/* Tools */
.la-toolsec {
  position: relative;
  background:
    radial-gradient(640px 380px at 92% 10%, rgba(255,138,92,.07), transparent 62%),
    var(--bg);
}
.la-tools-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .la-tools-grid { grid-template-columns: 1fr; gap: 30px; } }
.la-tools-grid h2 { max-width: 16ch; }
.la-tools-grid .muted { max-width: 52ch; margin-bottom: 0; }
.la-tool-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.la-tool {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .79rem; font-weight: 500; color: var(--txt);
  padding: 9px 13px; border-radius: 8px; line-height: 1;
  background: rgba(255,255,255,.025); border: 1px solid var(--line);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s, color .18s, box-shadow .18s;
}
.la-tool-mark { color: var(--la); font-size: .7em; }
.la-tool:hover {
  transform: translateY(-3px); color: #fff;
  border-color: rgba(255,138,92,.5); box-shadow: 0 0 22px rgba(255,138,92,.14);
}

/* Privacy panel */
.la-privacy {
  display: grid; grid-template-columns: 66px 1fr; gap: 28px; align-items: start;
  background:
    radial-gradient(560px 300px at 8% 0%, rgba(255,138,92,.10), transparent 62%),
    var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 46px);
}
@media (max-width: 620px) { .la-privacy { grid-template-columns: 1fr; gap: 20px; } }
.la-privacy-icon {
  width: 66px; height: 66px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--la-soft); color: var(--la); border: 1px solid rgba(255,138,92,.26);
}
.la-privacy h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 12px; }
.la-privacy .muted { font-size: 1rem; }
.la-privacy-note {
  font-family: var(--font-mono); font-size: .78rem; line-height: 1.65; color: var(--txt-faint);
  border-left: 2px solid rgba(255,138,92,.45); padding-left: 14px; margin: 0 0 22px;
}
.la-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .84rem; font-weight: 500; color: var(--la);
}
.la-link:hover { text-decoration: none; }
.la-link svg { transition: transform .2s ease; }
.la-link:hover svg { transform: translateX(4px); }

/* Download strip */
.la-cta {
  position: relative; overflow: hidden; text-align: center;
  background:
    radial-gradient(720px 360px at 100% 0%, rgba(255,138,92,.12), transparent 60%),
    radial-gradient(560px 320px at 0% 100%, rgba(124,92,255,.10), transparent 62%),
    var(--bg-2);
  padding: clamp(60px, 9vw, 92px) 0;
  border-top: 1px solid var(--line);
}
.la-cta h2 { margin: 0 auto 12px; max-width: 18ch; }
.la-cta .muted { max-width: 56ch; margin: 0 auto; }
.la-cta-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.la-cta-actions .store-btn.is-soon { --pc: var(--la); }

@supports (animation-timeline: view()) {
  .la-stats, .la-scan-grid, .la-split, .la-tools-grid, .la-privacy {
    animation: reveal both;
    animation-timeline: view();
    animation-range: entry 5% entry 38%;
  }
}

/* Lalo — i pezzi che non esistono su NetBlade -------------------------- */

/* L'eroe: il menu dell'app ricostruito, sedici mattonelle che atterrano
   una dopo l'altra. Sostituisce il terminale, che qui sarebbe fuori luogo. */
.la-menu {
  position: relative; border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, #fdf3e6, #f7e6d2);
  border: 1px solid rgba(255,138,92,.35);
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 70px rgba(255,138,92,.16);
}
.la-menu-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; background: rgba(255,255,255,.6);
  border-bottom: 1px solid rgba(255,138,92,.22);
}
.la-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--la); flex: 0 0 auto; }
.la-menu-name {
  font-family: var(--font-mono); font-weight: 700; font-size: .9rem;
  color: #8a5a3c; letter-spacing: .02em;
}
.la-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 20px;
}
.la-tile {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px;
  background: #fff; border: 1px solid rgba(255,138,92,.28);
  box-shadow: 0 4px 0 rgba(255,138,92,.22);
  font-size: 1.5rem; font-weight: 700; color: #8a5a3c;
  opacity: 0; transform: translateY(14px) scale(.9);
  animation: la-pop .5s cubic-bezier(.2,1.3,.4,1) var(--d, 0s) forwards;
}
@keyframes la-pop { to { opacity: 1; transform: none; } }

/* La galleria: schermate orizzontali (2424x1080), non telefoni verticali */
.la-shots {
  display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 8px 24px 26px; scrollbar-width: thin;
}
.la-shot { flex: 0 0 min(560px, 82vw); scroll-snap-align: center; margin: 0; }
.la-frame {
  border-radius: 18px; padding: 8px; background: #080c11;
  border: 1px solid var(--line-2); overflow: hidden;
  box-shadow: 0 26px 54px rgba(0,0,0,.55), 0 0 40px rgba(255,138,92,.14);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.la-shot:hover .la-frame {
  transform: translateY(-5px);
  box-shadow: 0 32px 62px rgba(0,0,0,.6), 0 0 52px rgba(255,138,92,.24);
}
.la-frame img { display: block; width: 100%; height: auto; border-radius: 12px; }
.la-shot figcaption {
  margin-top: 14px; text-align: center; font-family: var(--font-mono);
  font-size: .82rem; line-height: 1.5; color: var(--txt-dim);
}

/* L'elenco delle sedici attività, con il simbolo vero di ciascuna */
.la-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.la-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--panel);
  color: var(--txt); font-size: .9rem;
}
.la-chip-mark { font-size: 1.05rem; line-height: 1; }
/* le quattro gratuite si distinguono: è l'informazione più utile della sezione */
.la-chip.is-free {
  border-color: color-mix(in srgb, var(--la) 55%, transparent);
  color: #fff;
  box-shadow: 0 0 18px color-mix(in srgb, var(--la) 16%, transparent);
}

.la-list-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 46px; align-items: start; }
@media (max-width: 900px) { .la-list-grid { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 560px) { .la-tiles { grid-template-columns: repeat(4, 1fr); gap: 9px; padding: 15px; } .la-tile { font-size: 1.15rem; border-radius: 13px; } }

@media (prefers-reduced-motion: reduce) {
  .la-tile { animation: none; opacity: 1; transform: none; }
}

/* Galleria del blog con immagini orizzontali (Lalo è solo in landscape):
   la larghezza tarata sui telefoni verticali le rimpicciolirebbe troppo. */
.gallery-track.is-wide .gallery-item { flex-basis: min(560px, 84vw); }
.gallery-track.is-wide .gallery-phone { border-radius: 16px; padding: 5px; }
.gallery-track.is-wide .gallery-phone img { border-radius: 12px; }

/* ── Lalo Academy product page (/lalo-academy) ────────────── */
/* Stessa impalcatura di /lalo, accento viola. La differenza vera e'
   nell'eroe: al posto delle sedici mattonelle del menu c'e' la griglia
   delle tabelline, cioe' cio' che l'app fa davvero. */
:root {
  --ac:       #b48cff;   /* Lalo Academy violet (mirrors --p-laloscuola) */
  --ac-soft:  rgba(180, 140, 255, .12);
  --ac-glow:  rgba(180, 140, 255, .34);
}

/* Hero */
.ac-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 480px at 88% -14%, rgba(180,140,255,.14), transparent 60%),
    radial-gradient(760px 520px at 2% 106%, rgba(124,92,255,.12), transparent 62%),
    var(--bg);
  padding: clamp(46px, 7vh, 76px) 0 clamp(56px, 9vh, 96px);
  border-bottom: 1px solid var(--line);
}
.ac-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 82%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 82%);
}
.ac-orb { position: absolute; border-radius: 50%; filter: blur(72px); opacity: .34; pointer-events: none; z-index: 0; }
.ac-orb-a {
  width: 400px; height: 400px; right: -110px; top: -150px;
  background: radial-gradient(circle, rgba(180,140,255,.55), transparent 70%);
  animation: drift 12s ease-in-out infinite alternate;
}
.ac-orb-b {
  width: 320px; height: 320px; left: -120px; bottom: -160px;
  background: radial-gradient(circle, rgba(124,92,255,.42), transparent 70%);
  animation: drift 16s ease-in-out infinite alternate-reverse;
}
.ac-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 52px; align-items: center;
}
@media (max-width: 980px) { .ac-hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.ac-back {
  display: inline-block; font-family: var(--font-mono); font-size: .76rem;
  color: var(--txt-faint); letter-spacing: .04em; margin-bottom: 26px;
}
.ac-back:hover { color: var(--ac); text-decoration: none; }

.ac-title-row { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.ac-app-icon {
  width: 92px; height: 92px; border-radius: 20px; flex: 0 0 auto; object-fit: cover;
  box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 34px rgba(180,140,255,.18);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.ac-app-icon:hover { transform: scale(1.05) rotate(-3deg); }
@media (max-width: 480px) { .ac-app-icon { width: 68px; height: 68px; border-radius: 16px; } }
.ac-kicker {
  display: block; font-family: var(--font-mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ac); margin-bottom: 6px;
}
.ac-kicker::before { content: "~/"; opacity: .55; }
.ac-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.2rem); margin: 0; color: #fff;
  letter-spacing: -.04em; text-shadow: 0 0 44px rgba(180,140,255,.28);
}
.ac-headline {
  font-family: var(--font-mono); font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  color: #fff; font-weight: 500; letter-spacing: -.01em; margin-bottom: 14px; max-width: 30ch;
}
.ac-lead { color: var(--txt-dim); max-width: 58ch; font-size: 1.02rem; margin-bottom: 24px; }

.ac-badges { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 9px; }
.ac-badges li {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .05em;
  padding: 6px 11px; border-radius: 5px; color: var(--txt-dim);
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
}
.ac-badges li:first-child { color: var(--ac); border-color: rgba(180,140,255,.32); }

.ac-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.btn.ac-btn {
  background: var(--ac); color: #06121a; position: relative; overflow: hidden;
}
.btn.ac-btn svg { color: #06121a; }
.btn.ac-btn:hover { box-shadow: 0 0 30px var(--ac-glow); }
.btn.ac-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 42%; left: -60%;
  transform: skewX(-22deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: shine 3.4s cubic-bezier(.4,0,.2,1) infinite;
}
.ac-actions .store-btn.is-soon { --pc: var(--ac); }
.ac-meta { font-family: var(--font-mono); font-size: .72rem; color: var(--txt-faint); margin: 0; letter-spacing: .02em; }

/* Hero terminal */
.ac-scan { background: linear-gradient(180deg, transparent, rgba(180,140,255,.12), transparent); }

/* Stats strip */
.ac-stats-wrap { padding: clamp(40px, 6vw, 66px) 0 0; }
.ac-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
@media (max-width: 720px) { .ac-stats { grid-template-columns: repeat(2, 1fr); } }
.ac-stat { background: var(--panel); text-align: center; padding: 30px 14px; }
.ac-stat .num {
  display: block; font-family: var(--font-mono); font-weight: 700; line-height: 1;
  font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--ac); letter-spacing: -.03em;
  margin-bottom: 9px; text-shadow: 0 0 26px rgba(180,140,255,.3);
}
.ac-stat .lbl {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt-faint);
}

/* Shared page accents */
.section-pill.ac-pill { color: var(--ac); }
.ac-check { background: rgba(180,140,255,.16); color: var(--ac); }

/* Feature cards */
.ac-scan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 980px) { .ac-scan-grid { grid-template-columns: 1fr; } }
.ac-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .ac-split { grid-template-columns: 1fr; } }
.ac-card {
  position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), border-color .24s, box-shadow .24s;
}
.ac-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--ac), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.ac-card:hover {
  transform: translateY(-5px); border-color: var(--line-2);
  box-shadow: 0 22px 46px rgba(0,0,0,.5), 0 0 30px rgba(180,140,255,.12);
}
.ac-card:hover::after { transform: scaleX(1); }
.ac-card-icon {
  width: 48px; height: 48px; border-radius: 12px; margin-bottom: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ac-soft); color: var(--ac); border: 1px solid rgba(180,140,255,.26);
}
.ac-card h3 { font-size: 1.2rem; color: #fff; margin-bottom: 8px; }
.ac-card-body { color: var(--txt-dim); font-size: .95rem; margin-bottom: 18px; }
.ac-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.ac-features li { display: flex; gap: 11px; align-items: flex-start; font-size: .92rem; line-height: 1.45; color: var(--txt); }

/* Screenshot gallery */
.ac-gallery { overflow: hidden; }
.ac-shots {
  display: flex; gap: 22px; overflow-x: auto;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  padding: 6px max(24px, calc((100% - var(--container-max)) / 2)) 20px;
  scroll-padding-left: max(24px, calc((100% - var(--container-max)) / 2));
}
.ac-shot { flex: 0 0 232px; scroll-snap-align: start; margin: 0; }
@media (max-width: 520px) { .ac-shot { flex-basis: 74vw; } }
.ac-phone {
  border-radius: 22px; padding: 6px; background: #080c11;
  border: 1px solid var(--line-2); overflow: hidden;
  box-shadow: 0 20px 42px rgba(0,0,0,.5);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.ac-phone img { width: 100%; border-radius: 17px; }
.ac-shot:hover .ac-phone {
  transform: translateY(-7px);
  border-color: rgba(180,140,255,.45);
  box-shadow: 0 28px 54px rgba(0,0,0,.58), 0 0 34px rgba(180,140,255,.15);
}
.ac-shot figcaption {
  font-family: var(--font-mono); font-size: .71rem; line-height: 1.5;
  color: var(--txt-dim); margin-top: 14px; letter-spacing: .01em;
}
.ac-shots::-webkit-scrollbar { height: 10px; }
.ac-shots::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 3px solid var(--bg-2); }
.ac-shots::-webkit-scrollbar-thumb:hover { background: var(--ac); }

/* Tools */
.ac-toolsec {
  position: relative;
  background:
    radial-gradient(640px 380px at 92% 10%, rgba(180,140,255,.07), transparent 62%),
    var(--bg);
}
.ac-tools-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .ac-tools-grid { grid-template-columns: 1fr; gap: 30px; } }
.ac-tools-grid h2 { max-width: 16ch; }
.ac-tools-grid .muted { max-width: 52ch; margin-bottom: 0; }
.ac-tool-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ac-tool {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .79rem; font-weight: 500; color: var(--txt);
  padding: 9px 13px; border-radius: 8px; line-height: 1;
  background: rgba(255,255,255,.025); border: 1px solid var(--line);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s, color .18s, box-shadow .18s;
}
.ac-tool-mark { color: var(--ac); font-size: .7em; }
.ac-tool:hover {
  transform: translateY(-3px); color: #fff;
  border-color: rgba(180,140,255,.5); box-shadow: 0 0 22px rgba(180,140,255,.14);
}

/* Privacy panel */
.ac-privacy {
  display: grid; grid-template-columns: 66px 1fr; gap: 28px; align-items: start;
  background:
    radial-gradient(560px 300px at 8% 0%, rgba(180,140,255,.10), transparent 62%),
    var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 46px);
}
@media (max-width: 620px) { .ac-privacy { grid-template-columns: 1fr; gap: 20px; } }
.ac-privacy-icon {
  width: 66px; height: 66px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ac-soft); color: var(--ac); border: 1px solid rgba(180,140,255,.26);
}
.ac-privacy h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 12px; }
.ac-privacy .muted { font-size: 1rem; }
.ac-privacy-note {
  font-family: var(--font-mono); font-size: .78rem; line-height: 1.65; color: var(--txt-faint);
  border-left: 2px solid rgba(180,140,255,.45); padding-left: 14px; margin: 0 0 22px;
}
.ac-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .84rem; font-weight: 500; color: var(--ac);
}
.ac-link:hover { text-decoration: none; }
.ac-link svg { transition: transform .2s ease; }
.ac-link:hover svg { transform: translateX(4px); }

/* Download strip */
.ac-cta {
  position: relative; overflow: hidden; text-align: center;
  background:
    radial-gradient(720px 360px at 100% 0%, rgba(180,140,255,.12), transparent 60%),
    radial-gradient(560px 320px at 0% 100%, rgba(124,92,255,.10), transparent 62%),
    var(--bg-2);
  padding: clamp(60px, 9vw, 92px) 0;
  border-top: 1px solid var(--line);
}
.ac-cta h2 { margin: 0 auto 12px; max-width: 18ch; }
.ac-cta .muted { max-width: 56ch; margin: 0 auto; }
.ac-cta-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.ac-cta-actions .store-btn.is-soon { --pc: var(--ac); }

@supports (animation-timeline: view()) {
  .ac-stats, .ac-scan-grid, .ac-split, .ac-tools-grid, .ac-privacy {
    animation: reveal both;
    animation-timeline: view();
    animation-range: entry 5% entry 38%;
  }
}

/* Lalo — i pezzi che non esistono su NetBlade -------------------------- */

/* L'eroe: il menu dell'app ricostruito, sedici mattonelle che atterrano
   una dopo l'altra. Sostituisce il terminale, che qui sarebbe fuori luogo. */
.ac-menu {
  position: relative; border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, #fdf3e6, #f7e6d2);
  border: 1px solid rgba(180,140,255,.35);
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 70px rgba(180,140,255,.16);
}
.ac-menu-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; background: rgba(255,255,255,.6);
  border-bottom: 1px solid rgba(180,140,255,.22);
}
.ac-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ac); flex: 0 0 auto; }
.ac-menu-name {
  font-family: var(--font-mono); font-weight: 700; font-size: .9rem;
  color: #8a5a3c; letter-spacing: .02em;
}
.ac-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 20px;
}
.ac-tile {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px;
  background: #fff; border: 1px solid rgba(180,140,255,.28);
  box-shadow: 0 4px 0 rgba(180,140,255,.22);
  font-size: 1.5rem; font-weight: 700; color: #8a5a3c;
  opacity: 0; transform: translateY(14px) scale(.9);
  animation: la-pop .5s cubic-bezier(.2,1.3,.4,1) var(--d, 0s) forwards;
}
@keyframes la-pop { to { opacity: 1; transform: none; } }

/* La galleria: schermate orizzontali (2424x1080), non telefoni verticali */
.ac-shots {
  display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 8px 24px 26px; scrollbar-width: thin;
}
.ac-shot { flex: 0 0 min(560px, 82vw); scroll-snap-align: center; margin: 0; }
.ac-frame {
  border-radius: 18px; padding: 8px; background: #080c11;
  border: 1px solid var(--line-2); overflow: hidden;
  box-shadow: 0 26px 54px rgba(0,0,0,.55), 0 0 40px rgba(180,140,255,.14);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.ac-shot:hover .ac-frame {
  transform: translateY(-5px);
  box-shadow: 0 32px 62px rgba(0,0,0,.6), 0 0 52px rgba(180,140,255,.24);
}
.ac-frame img { display: block; width: 100%; height: auto; border-radius: 12px; }
.ac-shot figcaption {
  margin-top: 14px; text-align: center; font-family: var(--font-mono);
  font-size: .82rem; line-height: 1.5; color: var(--txt-dim);
}

/* L'elenco delle sedici attività, con il simbolo vero di ciascuna */
.ac-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.ac-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--panel);
  color: var(--txt); font-size: .9rem;
}
.ac-chip-mark { font-size: 1.05rem; line-height: 1; }
/* le quattro gratuite si distinguono: è l'informazione più utile della sezione */
.ac-chip.is-free {
  border-color: color-mix(in srgb, var(--ac) 55%, transparent);
  color: #fff;
  box-shadow: 0 0 18px color-mix(in srgb, var(--ac) 16%, transparent);
}

.ac-list-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 46px; align-items: start; }
@media (max-width: 900px) { .ac-list-grid { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 560px) { .ac-tiles { grid-template-columns: repeat(4, 1fr); gap: 9px; padding: 15px; } .ac-tile { font-size: 1.15rem; border-radius: 13px; } }

@media (prefers-reduced-motion: reduce) {
  .ac-tile { animation: none; opacity: 1; transform: none; }
}

/* Galleria del blog con immagini orizzontali (Lalo è solo in landscape):
   la larghezza tarata sui telefoni verticali le rimpicciolirebbe troppo. */
.gallery-track.is-wide .gallery-item { flex-basis: min(560px, 84vw); }
.gallery-track.is-wide .gallery-phone { border-radius: 16px; padding: 5px; }
.gallery-track.is-wide .gallery-phone img { border-radius: 12px; }

/* Lalo Academy — la mappa di una tabellina nell'eroe.
   Sostituisce le mattonelle del menu di Lalo: qui il cuore dell'app e' sapere
   quali fatti sono acquisiti e quali no, quindi e' quello che si mostra. */
.ac-tables {
  position: relative; border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, #fbf6ea, #f3ead6);
  border: 1px solid rgba(180,140,255,.32);
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 70px rgba(180,140,255,.18);
}
.ac-tables-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; background: rgba(255,255,255,.6);
  border-bottom: 1px solid rgba(180,140,255,.22);
}
.ac-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ac); flex: 0 0 auto; }
.ac-tables-name {
  font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem;
  color: #6b4b8a; letter-spacing: .04em;
}
.ac-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 20px; }
.ac-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 12px 4px; border-radius: 14px;
  background: #fff; border: 1px solid rgba(180,140,255,.26);
  box-shadow: 0 3px 0 rgba(180,140,255,.2);
  opacity: 0; transform: translateY(12px) scale(.94);
  animation: ac-pop .45s cubic-bezier(.2,1.3,.4,1) var(--d, 0s) forwards;
}
.ac-cell b { font-family: var(--font-mono); font-size: .78rem; color: #9a86b5; font-weight: 600; }
.ac-cell i { font-style: normal; font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; color: #6b4b8a; }
/* acquisito: e' il segnale che conta, quindi e' l'unico colorato */
.ac-cell.is-known {
  background: linear-gradient(180deg, #eafbe9, #d8f5d6);
  border-color: rgba(60,170,90,.4); box-shadow: 0 3px 0 rgba(60,170,90,.28);
}
.ac-cell.is-known i { color: #2f7a45; }
.ac-cell.is-known b { color: #63a377; }
@keyframes ac-pop { to { opacity: 1; transform: none; } }

.ac-legend {
  display: flex; gap: 22px; justify-content: center; padding: 0 20px 20px;
  font-family: var(--font-mono); font-size: .74rem; color: #9a86b5;
}
.ac-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ac-key {
  width: 13px; height: 13px; border-radius: 4px;
  background: #fff; border: 1px solid rgba(180,140,255,.4);
}
.ac-key.is-known { background: #d8f5d6; border-color: rgba(60,170,90,.45); }

/* galleria orizzontale: le schermate sono 1920x1080 */
.ac-shots {
  display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 8px 24px 26px; scrollbar-width: thin;
}
.ac-shot { flex: 0 0 min(560px, 82vw); scroll-snap-align: center; margin: 0; }
.ac-frame {
  border-radius: 18px; padding: 8px; background: #080c11;
  border: 1px solid var(--line-2); overflow: hidden;
  box-shadow: 0 26px 54px rgba(0,0,0,.55), 0 0 40px rgba(180,140,255,.14);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.ac-shot:hover .ac-frame {
  transform: translateY(-5px);
  box-shadow: 0 32px 62px rgba(0,0,0,.6), 0 0 52px rgba(180,140,255,.24);
}
.ac-frame img { display: block; width: 100%; height: auto; border-radius: 12px; }
.ac-shot figcaption {
  margin-top: 14px; text-align: center; font-family: var(--font-mono);
  font-size: .82rem; line-height: 1.5; color: var(--txt-dim);
}

/* elenco delle materie */
.ac-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.ac-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--panel);
  color: var(--txt); font-size: .9rem;
}
.ac-chip-mark { font-size: 1.05rem; line-height: 1; }
.ac-chip.is-free {
  border-color: color-mix(in srgb, var(--ac) 55%, transparent);
  color: #fff; box-shadow: 0 0 18px color-mix(in srgb, var(--ac) 16%, transparent);
}
.ac-list-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 46px; align-items: start; }
@media (max-width: 900px) { .ac-list-grid { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 560px) { .ac-grid { gap: 8px; padding: 14px; } .ac-cell i { font-size: 1.05rem; } }
@media (prefers-reduced-motion: reduce) { .ac-cell { animation: none; opacity: 1; transform: none; } }