/* ============================================================
   Categora Design System — Foundations
   Brand: Cosmobile srl · Product: Categora (PIM / Data Hub)
   Background is ALWAYS #FFFFFF. Never use dark/colored page bg.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Gilroy";
  src: url("assets/gilroy-300.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/gilroy-400.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/gilroy-400-italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/gilroy-500.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/gilroy-600.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/gilroy-700.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/gilroy-700-italic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/gilroy-800.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/gilroy-900.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* ── Fixed brand palette (same across every Cosmobile site) ── */
  --ink:           #39464e;   /* primary text + lines + icons */
  --ink-2:         #5a6a73;   /* secondary text */
  --ink-3:         #8a949b;   /* tertiary / placeholder text */
  --accent:        #dddc01;   /* fixed accent — borders, dots, underlines, pill */
  --paper:         #ffffff;   /* page bg — NEVER override */
  --paper-2:       #fafbfb;   /* subtle alt section */
  --hairline:      #e7eaec;   /* dividers, card borders */
  --shadow-soft:   0 14px 38px -18px rgba(57,70,78,0.18);
  --shadow-card:   0 12px 24px -16px rgba(57,70,78,0.12);
  --shadow-press:  0 4px 10px -6px rgba(57,70,78,0.22);

  /* ── Per-site decorative gradient (Categora = pastel blue → mint → teal) ──
     Pastello, basso contrasto. Solo per cerchi decorativi, blob, dot,
     ombre colorate e band-promo. Mai su body text. Mai sullo sfondo pagina. */
  --grad-start:    #BFE1F2;   /* pastel sky */
  --grad-mid:      #CFECE2;   /* pastel mint */
  --grad-end:      #CAEBE8;   /* pastel aqua */
  --color-grad: linear-gradient(135deg, var(--grad-start) 0%, var(--grad-mid) 50%, var(--grad-end) 100%);
  --color-grad-band: linear-gradient(90deg, var(--grad-start) 0%, var(--grad-mid) 47%, var(--grad-end) 100%);
  --color-grad-soft: linear-gradient(135deg, #eaf5fb 0%, #eef8f4 100%);

  /* ── Radii — pill buttons are the signature ── */
  --r-pill:        999px;     /* primary CTAs */
  --r-button:      6px;       /* secondary nav button (legacy) */
  --r-card:        15px;      /* content cards */
  --r-tag:         6px;       /* tag/badge chip */

  /* ── Layout widths ── */
  --header-max-w:  1920px;    /* header is fluid (follows the screen) and capped at the 1920px design canvas, then centred */

  /* ── Spacing ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ── Type scale (per brand spec) ── */
  --font-sans: "Gilroy", "Helvetica Neue", Arial, sans-serif;

  --h1-size: 60px;   --h1-line: 1.08 /* @kind other */;  --h1-weight: 700;
  --h2-size: 40px;   --h2-line: 1.15 /* @kind other */;  --h2-weight: 700;
  --h3-size: 24px;   --h3-line: 1.25 /* @kind other */;  --h3-weight: 600;
  --h4-size: 20px;   --h4-line: 1.3 /* @kind other */;   --h4-weight: 600;
  --body-size: 17px; --body-line: 1.65 /* @kind other */; --body-weight: 400;
  --small-size: 15px; --small-line: 1.55 /* @kind other */;
  --label-size: 12px; --label-line: 1.4 /* @kind other */; --label-weight: 600;
  --label-tracking: 0.08em;
}

/* ---------- Base / semantic ---------- */
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: var(--body-weight);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  font-weight: var(--h1-weight);
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h2, .h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  font-weight: var(--h2-weight);
  letter-spacing: -0.008em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h3, .h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  font-weight: var(--h3-weight);
  color: var(--ink);
  margin: 0;
}
h4, .h4 {
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  font-weight: var(--h4-weight);
  color: var(--ink);
  margin: 0;
}
p, .p {
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.lede {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
}
.small { font-size: var(--small-size); line-height: var(--small-line); color: var(--ink-2); }

.label, .eyebrow {
  font-size: var(--label-size);
  line-height: var(--label-line);
  font-weight: var(--label-weight);
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  color: var(--accent);
}

/* ---------- Accent details ---------- */
.accent-dot  { display: inline-block; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; }

/* ---------- Bullet list ---------- */
.bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bullet-list li {
  position: relative;
  padding-left: 38px;
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--ink);
}
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 26px;
  height: 26px;
  background: url("assets/bullet-check.svg") no-repeat center / contain;
  transform: translateY(-50%);
}

/* ---------- Buttons (signature: pill, radius 50px) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.032em;
  line-height: 1.25;
  padding: 18px 36px;
  border-radius: var(--r-pill);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .15s ease;
  white-space: nowrap;
  will-change: transform;
}
.btn-primary {
  background: var(--color-grad);
  color: #ffffff;
  box-shadow: 0 12px 28px -14px color-mix(in oklab, var(--grad-mid) 80%, black);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 38px -16px color-mix(in oklab, var(--grad-mid) 80%, black); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-press); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.btn-secondary:hover { background: var(--ink); color: var(--paper); }
.btn-secondary:active { transform: translateY(1px); }

.btn-accent {
  background: var(--accent);
  color: var(--ink);
}
.btn-accent:hover { filter: brightness(0.96); }

.btn-ghost {
  background: transparent; color: var(--ink); padding: 14px 18px;
}
.btn-ghost:hover { color: color-mix(in oklab, var(--ink) 80%, black); }

.btn-sm  { padding: 12px 24px; font-size: 14px; }
.btn-lg  { padding: 22px 44px; font-size: 17px; }

/* ---------- Tag / badge ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: var(--r-tag);
  background: var(--accent); color: var(--ink);
  letter-spacing: 0.02em;
}
.tag-outline {
  background: transparent; border: 1.5px solid var(--accent); color: var(--ink);
}

/* ---------- Card ---------- */
.card {
  background: var(--paper);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* ---------- Decorative dot grid (signature) ---------- */
.dot-grid {
  background-image: radial-gradient(currentColor 1.5px, transparent 1.6px);
  background-size: 14px 14px;
  color: color-mix(in oklab, var(--grad-mid) 60%, white);
  opacity: 0.55;
}

/* ---------- Decorative blob — soft feathered edge ---------- */
.blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in oklab, var(--grad-start) 45%, transparent) 0%,
    color-mix(in oklab, var(--grad-start) 32%, transparent) 18%,
    color-mix(in oklab, var(--grad-end)   18%, transparent) 40%,
    color-mix(in oklab, var(--grad-end)    7%, transparent) 65%,
    transparent 100%);
  pointer-events: none;
}

/* ---------- Header / top nav ---------- */
/* The site header is FLUID: it follows the screen width at 100% and is
   capped at the 1920px design canvas, then centred. Both the header bar
   AND its inner content column scale with the viewport up to that max —
   the content is held off the edges with horizontal padding rather than a
   narrower fixed column, so the header always "follows the screen".
   Token: --header-max-w (1920px). */
.site-header,
header.nav {
  width: 100%;
  max-width: var(--header-max-w);
  margin-inline: auto;
}
/* Inner content row: same fluid-up-to-1920px behaviour, padded off edges. */
.site-header > .nav-inner,
header.nav > .nav-inner {
  max-width: var(--header-max-w);
}

/* ===========================================================
   Aikuboard — UI Kit page styles
   Brand: Cosmobile srl · Product: Aikuboard (Sales Dashboard)
   Depends on global tokens in ../colors_and_type.css.
   Gradient (per-site): lavanda → crema → giallo accent.
   =========================================================== */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
::selection { background: var(--accent); color: var(--ink); }

/* per-site decorative gradient */
:root {
  --akb-grad: linear-gradient(135deg, #e4ecf6 0%, #f4f6ec 52%, #dddc01 145%);
}

@keyframes akb-float { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-9px); } }

/* scroll offset under the sticky nav */
#funzionalita, #ai, #integrazioni, #target, #ciclo, #cta, #contatti { scroll-margin-top: 96px; }
#top { scroll-margin-top: 0; }

/* reveal-on-scroll */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-in { opacity: 1; transform: translateY(0); }

/* nav links */
.akb-nav a { transition: opacity .15s ease; }

/* contact eyebrow — match Aikuboard marker (ink text + yellow dot), not the
   default yellow .eyebrow, so it reads on the light section */
.contact .akb-eyebrow { color: var(--ink); }

/* ===========================================================
   Contact section — Cosmobile design system
   Self-contained: depends only on global tokens in
   colors_and_type.css (--ink, --accent, --hairline, --paper-2,
   --font-sans, --r-pill, --h2-*). Brand-neutral, identical
   across every product site (matches the Visiq contact form).
   =========================================================== */
.contact{ background: var(--paper-2); padding: 96px 0; position:relative; scroll-margin-top: 100px; }
.contact-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:64px; align-items:start; }
.contact-intro .eyebrow{ margin-bottom: 14px; }
.contact-intro h2{ font-size: var(--h2-size); line-height: var(--h2-line); font-weight: var(--h2-weight); color:var(--ink); margin: 18px 0 20px; letter-spacing:-.012em; text-wrap:balance; }
.contact-intro p{ font-size:18px; line-height:1.65; color:var(--ink-2); max-width: 440px; margin:0; text-wrap:pretty; }
.contact-meta{ margin-top:32px; display:flex; flex-direction:column; gap:16px; }
.contact-meta a, .contact-meta span{ font-size:16px; color:var(--ink); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:12px; }
.contact-meta .ico{ width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--hairline); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.contact-meta .ico span{ width:8px; height:8px; border-radius:50%; background:var(--accent); }

.contact-form{ background:#fff; border:1px solid var(--hairline); border-radius:24px; padding:40px; box-shadow: 0 14px 38px -12px rgba(57,70,78,.12); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field label{ font-size:14px; font-weight:600; color:var(--ink); letter-spacing:.01em; }
.field .req, .consent .req{ color:var(--ink-3); }
.contact-form input, .contact-form textarea{ box-sizing:border-box; font-family: var(--font-sans); font-size:16px; color:var(--ink); background:var(--paper-2); border:1px solid var(--hairline); border-radius:10px; padding:14px 16px; width:100%; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:var(--ink-3); }
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--ink); background:#fff; box-shadow: 0 0 0 4px rgba(221,220,1,.18); }
.contact-form textarea{ resize:vertical; min-height:120px; }
.consent{ display:flex; align-items:flex-start; gap:12px; margin: 4px 0 26px; cursor:pointer; }
.consent input{ width:20px; height:20px; flex:none; margin-top:1px; accent-color: var(--ink); }
.consent span{ font-size:14px; line-height:1.5; color:var(--ink-2); }
.consent a{ color:var(--ink); text-decoration:underline; }
.contact-submit{ border:0; cursor:pointer; font-family:var(--font-sans); background: var(--ink); color:#fff; border-radius: var(--r-pill); padding: 18px 36px; font-weight:700; font-size:16px; letter-spacing:.032em; display:inline-flex; align-items:center; gap:10px; transition: background .2s ease; }
.contact-submit:hover{ background:#2c3940; }

.akb-hp{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }

@media (max-width: 900px){
  .contact{ padding: 72px 0; }
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .contact-form{ padding:28px; }
}

/* ===========================================================
   Aikuboard — Responsive overrides (fase di pubblicazione)
   La pagina usa layout inline: le regole sotto intervengono per
   breakpoint con !important sugli stessi pattern di griglia.
   =========================================================== */

/* ---- ≤1200px: griglia target 4 → 2 colonne ---- */
@media (max-width: 1200px){
  [style*="grid-template-columns:repeat(4,1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }
}

/* ---- ≤1060px: colonne principali → colonna singola ---- */
@media (max-width: 1060px){
  h1[style]{ font-size:50px !important; }
  h2[style]{ font-size:36px !important; }
  /* hero: testo sopra, mockup sotto */
  [style*="grid-template-columns:1.04fr 1fr"]{ grid-template-columns:1fr !important; gap:56px !important; }
  /* introduzione (titolo + paragrafo affiancati) */
  [style*="grid-template-columns:1.1fr 1fr"]{ grid-template-columns:1fr !important; gap:20px !important; }
  /* funzionalità: phone + tab */
  [style*="grid-template-columns:0.82fr 1fr"]{ grid-template-columns:1fr !important; gap:48px !important; }
  /* sezione AI */
  [style*="grid-template-columns:1fr 1fr;gap:64px"]{ grid-template-columns:1fr !important; gap:40px !important; }
  /* ciclo di vendita */
  [style*="grid-template-columns:1fr 1fr;gap:28px"]{ grid-template-columns:1fr !important; }
  /* CTA finale */
  [style*="grid-template-columns:1.3fr 1fr"]{ grid-template-columns:1fr !important; }
}

/* ---- ≤1000px: card a 3 colonne → 2 ---- */
@media (max-width: 1000px){
  [style*="grid-template-columns:repeat(3,1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }
}

/* ---- ≤900px: nav mobile, padding ridotti, footer 2 colonne ---- */
@media (max-width: 900px){
  .akb-nav{ display:none !important; }
  header > div[style]{ padding:0 20px !important; }
  section[style]{ padding-left:24px !important; padding-right:24px !important; }
  footer[style]{ padding-left:24px !important; padding-right:24px !important; }
  #top{ margin-left:20px !important; margin-right:20px !important; }
  [style*="grid-template-columns:1.5fr 1fr 1fr 1.2fr"]{ grid-template-columns:1fr 1fr !important; gap:36px !important; }
  /* box AI e CTA: padding interni */
  [style*="border-radius:28px;padding:64px;"]{ padding:36px 24px !important; }
  [style*="padding:64px 72px"]{ padding:40px 28px !important; }
  h1[style]{ font-size:42px !important; }
  h2[style]{ font-size:31px !important; }
  .contact-intro h2{ font-size:31px !important; }
  .contact > div[style]{ padding:0 20px !important; }
}

/* ---- ≤640px: tutto a colonna singola ---- */
@media (max-width: 640px){
  [style*="grid-template-columns:repeat(3,1fr)"]{ grid-template-columns:1fr !important; }
  [style*="grid-template-columns:repeat(4,1fr)"]{ grid-template-columns:1fr !important; }
  [style*="grid-template-columns:1.5fr 1fr 1fr 1.2fr"]{ grid-template-columns:1fr !important; }
  h1[style]{ font-size:35px !important; }
  h2[style]{ font-size:27px !important; }
  .contact-intro h2{ font-size:27px !important; }
  section[style]{ padding-left:18px !important; padding-right:18px !important; }
  #top{ padding:14px 18px !important; margin-left:14px !important; margin-right:14px !important; }
  /* hero: il contenitore del mockup non forza l'altezza */
  [style*="min-height:600px"]{ min-height:0 !important; padding:16px 0; }
  /* badge "coming soon" della sezione AI: vanno a capo */
  #ai [style*="display:flex;align-items:center;gap:12px"]{ flex-wrap:wrap !important; }
  /* header: logo + CTA compatti */
  header a[href="#contatti"][style]{ padding:10px 16px !important; font-size:13px !important; }
}