:root {
  /* Dark palette (default) */
  --bg: #000000;
  --bg-rgb: 0,0,0;
  --bg-alt: #0a0a0a;
  --surface: #111113;
  --surface-elevated: #1a1a1e;
  --text-primary: #f5f5f7;
  --text-secondary: #86868b;
  --text-tertiary: #48484a;
  --accent: #7c3aed;
  --accent-soft: rgba(124,58,237,.12);
  --accent-glow: rgba(124,58,237,.25);
  /* Alias per il sistema popup generico (gm-pop, lib/site-editor.ts): lo veste
     come il tema denkhub - card scura, accento viola, font e raggi del tema -
     invece dei fallback generici bianco/blu/system-ui. */
  --paper: var(--surface);
  --ink-0: var(--text-primary);
  --rosso: var(--accent);
  --r-2: var(--radius-md);
  --font-sans: var(--font-body);
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --gradient-text-1: #f5f5f7;
  --gradient-text-2: #6e6e73;
  --shadow-card: 0 8px 30px rgba(0,0,0,.35);
  --shadow-hover: 0 16px 50px rgba(0,0,0,.5);

  /* Light section overrides */
  --light-bg: #241248;
  --light-surface: #33206b;
  --light-text: #f1ecff;
  --light-text-sec: #bcaee6;
  --light-border: rgba(255,255,255,.12);

  /* Spacing */
  --sp-2xs: .25rem;
  --sp-xs: .5rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2.5rem;
  --sp-xl: 4rem;
  --sp-2xl: 6rem;
  --sp-3xl: 8rem;
  --sp-4xl: 10rem;

  /* Type scale */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono','Fira Code','Menlo', monospace;

  --ts-xs: .8125rem;
  --ts-sm: .875rem;
  --ts-base: 1.0625rem;
  --ts-lg: clamp(1.15rem, 1.5vw + .5rem, 1.35rem);
  --ts-xl: clamp(1.5rem, 2vw + .5rem, 2rem);
  --ts-2xl: clamp(2rem, 3vw + .5rem, 3rem);
  --ts-3xl: clamp(2.5rem, 5vw + .5rem, 4.5rem);
  --ts-hero: clamp(3rem, 6vw + 1rem, 6rem);

  /* Layout */
  --container: 1200px;
  --container-tight: 900px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-full: 999px;

  /* Timing */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .2s;
  --dur-normal: .4s;
  --dur-slow: .8s;
  --dur-reveal: 1s;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

/* Scrollbar del DOCUMENTO (la finestra/iframe). Quella scopata a .site
   piu' sotto vale solo per i contenitori interni: lo scroller di pagina
   e' html/body, di cui .site e' figlio, percio' va stilizzato qui o resta
   la barra di sistema chiara (la "barra bianca" su sfondo nero). */
html {
  scrollbar-color: var(--surface-elevated) var(--bg);
  scrollbar-width: thin;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: var(--bg);
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: var(--surface-elevated);
  border-radius: 6px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

.site {
  box-sizing: border-box;
}

.site *,
.site *::before,
.site *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.site {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.site {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.site img {
  max-width: 100%;
  height: auto;
  display: block;
}

.site a {
  text-decoration: none;
  color: inherit;
}

.site ul,
.site ol {
  list-style: none;
}

/* Scrollbar */
.site ::-webkit-scrollbar {
  width: 8px;
}

.site ::-webkit-scrollbar-track {
  background: var(--bg);
}

.site ::-webkit-scrollbar-thumb {
  background: var(--surface-elevated);
  border-radius: 4px;
}

.site ::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* Typography */
.site h1,
.site h2,
.site h3,
.site h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
}

.site .t-hero {
  font-size: var(--ts-hero);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.02;
}

.site .t-display {
  font-size: var(--ts-3xl);
  letter-spacing: -.035em;
}

.site .t-title {
  font-size: var(--ts-2xl);
}

.site .t-subtitle {
  font-size: var(--ts-xl);
  font-weight: 600;
}

.site .t-body-lg {
  font-size: var(--ts-lg);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-secondary);
}

.site .t-body {
  font-size: var(--ts-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
}

.site .t-label {
  font-family: var(--font-display);
  font-size: var(--ts-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.site .t-mono {
  font-family: var(--font-mono);
  font-size: var(--ts-sm);
  letter-spacing: .02em;
}

/* Gradient text */
.site .text-gradient {
  background: linear-gradient(135deg, var(--accent) 0%, #64d2ff 50%, var(--accent) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease-in-out infinite;
}

.site .text-gradient-subtle {
  background: linear-gradient(90deg, var(--gradient-text-1), var(--gradient-text-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Layout */
.site .container {
  width: 90%;
  max-width: var(--container);
  margin: 0 auto;
}

.site .container-tight {
  max-width: var(--container-tight);
}

.site .section {
  padding: var(--sp-3xl) 0;
  position: relative;
}

.site .section-sm {
  padding: var(--sp-2xl) 0;
}

.site .section-full {
  padding: var(--sp-4xl) 0;
}

.site .section-light {
  background: var(--light-bg);
  color: var(--light-text);
}

.site .section-light .t-body-lg,
.site .section-light .t-body,
.site .section-light .t-label {
  color: var(--light-text-sec);
}

.site .section-light .card {
  background: var(--light-surface);
  border-color: var(--light-border);
  --shadow-card: 0 4px 20px rgba(0,0,0,.06);
}

.site .section-light .card:hover {
  --shadow-hover: 0 12px 40px rgba(0,0,0,.1);
}

.site .section-surface {
  background: var(--surface);
}

/* Flex utilities */
.site .flex {
  display: flex;
}

.site .flex-col {
  flex-direction: column;
}

.site .flex-wrap {
  flex-wrap: wrap;
}

.site .items-center {
  align-items: center;
}

.site .justify-center {
  justify-content: center;
}

.site .justify-between {
  justify-content: space-between;
}

.site .gap-xs { gap: var(--sp-xs); }
.site .gap-sm { gap: var(--sp-sm); }
.site .gap-md { gap: var(--sp-md); }
.site .gap-lg { gap: var(--sp-lg); }
.site .gap-xl { gap: var(--sp-xl); }

.site .text-center {
  text-align: center;
}

.site .mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.site .mb-xs { margin-bottom: var(--sp-xs); }
.site .mb-sm { margin-bottom: var(--sp-sm); }
.site .mb-md { margin-bottom: var(--sp-md); }
.site .mb-lg { margin-bottom: var(--sp-lg); }
.site .mb-xl { margin-bottom: var(--sp-xl); }
.site .mb-2xl { margin-bottom: var(--sp-2xl); }

.site .max-ch-60 { max-width: 60ch; }
.site .max-ch-50 { max-width: 50ch; }

/* Header */
.site .site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: var(--sp-sm) 0;
  background: rgba(var(--bg-rgb), .72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-normal) ease, padding var(--dur-normal) ease;
}

.site .site-header.scrolled {
  padding: var(--sp-xs) 0;
  background: rgba(var(--bg-rgb), .88);
}

.site .header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site .logo img {
  height: 36px;
  width: auto;
  transition: opacity var(--dur-fast) ease;
}

.site .logo:hover img {
  opacity: .8;
}

.site .site-nav > ul {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site .site-nav a {
  font-family: var(--font-body);
  font-size: var(--ts-sm);
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--dur-fast) ease;
  position: relative;
}

.site .site-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--accent);
  transition: width var(--dur-normal) var(--ease-out-expo);
}

.site .site-nav a:hover,
.site .site-nav a.active {
  color: var(--text-primary);
}

.site .site-nav a:hover::after,
.site .site-nav a.active::after {
  width: 100%;
}

.site .site-nav a.nav-cta,
.site .nav-cta {
  font-family: var(--font-body);
  font-size: var(--ts-sm);
  font-weight: 500;
  padding: 8px 20px;
  background: var(--accent);
  color: #fff !important;
  border-radius: var(--radius-full);
  transition: transform var(--dur-fast) ease, background var(--dur-fast) ease;
}

.site .site-nav a.nav-cta:hover,
.site .nav-cta:hover {
  background: #0077ed;
  transform: scale(1.03);
  color: #fff !important;
}

.site .nav-cta::after {
  display: none;
}

.site .menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
}

.site .menu-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform var(--dur-normal) var(--ease-out-expo), opacity var(--dur-fast) ease;
  transform-origin: center;
}

.site .menu-toggle.active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.site .menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.site .menu-toggle.active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 768px) {
  .site .menu-toggle {
    display: flex;
  }

  .site .logo img {
    height: 28px;
  }

  .site .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background: rgba(var(--bg-rgb), .96);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-normal) ease;
  }

  .site .site-nav.open {
    opacity: 1;
    pointer-events: all;
  }

  .site .site-nav > ul {
    flex-direction: column;
    gap: var(--sp-xl);
    text-align: center;
  }

  .site .site-nav a {
    font-size: var(--ts-xl);
    font-weight: 600;
    font-family: var(--font-display);
  }

  .site .nav-cta {
    font-size: var(--ts-lg);
    padding: 14px 36px;
  }
}

/* Hero */
.site .hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: 80px;
  position: relative;
  overflow: hidden;
}

.site .hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
  align-items: center;
}

.site .hero-text {
  position: relative;
  z-index: 2;
}

.site .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 6px 16px;
  background: var(--accent-soft);
  border: 1px solid rgba(0,113,227,.2);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--ts-xs);
  font-weight: 500;
  color: var(--accent);
  margin-bottom: var(--sp-lg);
}

.site .hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.4); }
}

.site .hero-heading {
  margin-bottom: var(--sp-md);
}

.site .hero-sub {
  max-width: 48ch;
  margin-bottom: var(--sp-xl);
}

.site .hero-visual {
  position: relative;
  z-index: 1;
}

.site .hero-image-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.site .hero-image-wrap:hover {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}

.site .hero-image-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.site .hero-image-wrap::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  z-index: -1;
  opacity: .6;
  filter: blur(60px);
}

.site .img-placeholder {
  width: 100%;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-elevated) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border-strong);
  position: relative;
  overflow: hidden;
}

.site .img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, var(--accent-soft) 0%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(100,210,255,.06) 0%, transparent 50%);
}

.site .img-placeholder span {
  font-family: var(--font-mono);
  font-size: var(--ts-xs);
  color: var(--text-tertiary);
  z-index: 1;
  padding: 6px 12px;
  background: rgba(0,0,0,.3);
  border-radius: var(--radius-sm);
}

.site .img-placeholder.square { aspect-ratio: 1/1; }
.site .img-placeholder.portrait { aspect-ratio: 3/4; }
.site .img-placeholder.wide { aspect-ratio: 21/9; }

.site .img-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.site .img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.site .img-frame:hover img {
  transform: scale(1.03);
}

@media (max-width: 768px) {
  .site .hero {
    min-height: auto;
    padding: calc(80px + var(--sp-xl)) 0 var(--sp-2xl);
  }

  .site .hero .container {
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
  }

  .site .hero-image-wrap {
    transform: none;
  }
}

/* Buttons */
.site .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--ts-base);
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}

.site .btn:active {
  transform: scale(.97);
}

.site .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.site .btn-primary {
  background: var(--accent);
  color: #fff;
}

.site .btn-primary:hover {
  background: #0077ed;
  box-shadow: 0 4px 20px var(--accent-glow);
  transform: translateY(-1px);
}

.site .btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}

.site .btn-secondary:hover {
  background: var(--surface-elevated);
  border-color: var(--text-tertiary);
}

.site .btn-ghost {
  background: transparent;
  color: var(--accent);
  padding: 14px 8px;
}

.site .btn-ghost:hover {
  opacity: .8;
}

.site .btn-ghost svg,
.site .btn svg {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-fast) ease;
}

.site .btn-ghost:hover svg {
  transform: translateX(4px);
}

.site .cta-group {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  flex-wrap: wrap;
  margin-top: var(--sp-lg);
}

.site .section-light .btn-secondary {
  color: var(--light-text);
  border-color: var(--light-border);
}

.site .section-light .btn-secondary:hover {
  background: rgba(0,0,0,.04);
}

/* Service Cards */
.site .services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
}

.site .service-card {
  position: relative;
  padding: var(--sp-xl) var(--sp-lg);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform var(--dur-normal) var(--ease-out-expo), box-shadow var(--dur-normal) ease, border-color var(--dur-normal) ease;
  cursor: default;
}

.site .service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-strong);
}

.site .service-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-md);
}

.site .service-card-icon svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
}

.site .service-card h3 {
  font-size: var(--ts-xl);
  margin-bottom: var(--sp-sm);
}

.site .service-card p {
  color: var(--text-secondary);
  font-size: var(--ts-base);
  max-width: 38ch;
}

.site .service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity var(--dur-normal) ease;
}

.site .service-card:hover::before {
  opacity: 1;
}

.site .service-card[data-accent="ai"] .service-card-icon { background: rgba(175,82,222,.12); }
.site .service-card[data-accent="ai"] .service-card-icon svg { color: #af52de; }
.site .service-card[data-accent="ai"]::before { background: linear-gradient(90deg, transparent, #af52de, transparent); }

.site .service-card[data-accent="auto"] .service-card-icon { background: rgba(255,159,10,.12); }
.site .service-card[data-accent="auto"] .service-card-icon svg { color: #ff9f0a; }
.site .service-card[data-accent="auto"]::before { background: linear-gradient(90deg, transparent, #ff9f0a, transparent); }

.site .service-card[data-accent="web"] .service-card-icon { background: rgba(48,209,88,.12); }
.site .service-card[data-accent="web"] .service-card-icon svg { color: #30d158; }
.site .service-card[data-accent="web"]::before { background: linear-gradient(90deg, transparent, #30d158, transparent); }

@media (max-width: 768px) {
  .site .services-grid {
    grid-template-columns: 1fr;
  }
}

/* Portfolio Grid */
.site .portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}

.site .portfolio-item {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--light-surface);
  border: 1px solid var(--light-border);
  transition: transform var(--dur-normal) var(--ease-out-expo), box-shadow var(--dur-normal) ease;
}

.site .portfolio-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,.1);
}

.site .portfolio-image {
  width: 100%;
  overflow: hidden;
  background: #e5e5ea;
  aspect-ratio: 16/9;
}

.site .portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.site .portfolio-item:hover .portfolio-image img {
  transform: scale(1.04);
}

.site .portfolio-info {
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.site .portfolio-info h3 {
  font-size: var(--ts-lg);
  color: var(--light-text);
  margin-bottom: var(--sp-2xs);
}

.site .portfolio-info p {
  font-size: var(--ts-sm);
  color: var(--light-text-sec);
  margin-bottom: var(--sp-sm);
  min-height: 2.8em;
}

.site .portfolio-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  background: rgba(0,0,0,.05);
  color: var(--light-text-sec);
}

@media (max-width: 900px) {
  .site .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .site .portfolio-grid { grid-template-columns: 1fr; }
}

/* Feature Showcase */
.site .showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl);
  align-items: center;
}

.site .showcase.reverse {
  direction: rtl;
}

.site .showcase.reverse > * {
  direction: ltr;
}

.site .showcase-text {
  max-width: 52ch;
}

.site .showcase-visual {
  position: relative;
}

@media (max-width: 768px) {
  .site .showcase,
  .site .showcase.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: var(--sp-xl);
  }
}

/* Product Cards */
.site .products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
}

.site .product-card {
  position: relative;
  padding: var(--sp-xl);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform var(--dur-normal) var(--ease-out-expo), box-shadow var(--dur-normal) ease;
  display: flex;
  flex-direction: column;
}

.site .product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.site .product-card-manager {
  background: linear-gradient(150deg, #0c0e12 0%, #151820 50%, #0f1218 100%);
  border-color: rgba(255,255,255,.1);
}

.site .product-card-manager h3,
.site .product-card-manager p {
  color: #e8edf6;
}

.site .product-card-manager .t-body {
  color: #9aa5b8;
}

.site .product-card-analytics {
  background: linear-gradient(150deg, #f0f4ff 0%, #e8f0fe 50%, #f5f8ff 100%);
  border-color: rgba(0,60,150,.12);
}

.site .product-card-analytics h3 {
  color: #0f1d33;
}

.site .product-card-analytics .t-body {
  color: #3d5478;
}

.site .product-card-logo {
  height: clamp(28px, 3vw, 38px);
  width: auto;
  margin-bottom: var(--sp-md);
}

.site .product-card .tag {
  margin-bottom: var(--sp-md);
}

.site .product-card h3 {
  font-size: var(--ts-xl);
  margin-bottom: var(--sp-sm);
}

@media (max-width: 768px) {
  .site .products-grid {
    grid-template-columns: 1fr;
  }
}

/* Tags */
.site .tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site .tag-live { background: rgba(52,199,89,.15); color: #34c759; }
.site .tag-beta { background: rgba(255,149,0,.15); color: #ff9500; }
.site .tag-dev { background: rgba(0,113,227,.15); color: var(--accent); }
.site .tag-spec { background: rgba(134,134,139,.15); color: var(--text-secondary); }

/* Process Steps */
.site .process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
  counter-reset: step;
}

.site .process-step {
  position: relative;
  padding: var(--sp-xl) var(--sp-lg);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  counter-increment: step;
}

.site .process-step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--ts-3xl);
  font-weight: 800;
  color: var(--surface-elevated);
  line-height: 1;
  margin-bottom: var(--sp-md);
  display: block;
  background: linear-gradient(180deg, var(--text-tertiary), transparent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.site .process-step h3 {
  font-size: var(--ts-lg);
  margin-bottom: var(--sp-sm);
}

.site .process-step p {
  color: var(--text-secondary);
  font-size: var(--ts-base);
}

.site .process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--sp-md) / 2);
  width: var(--sp-md);
  height: 1px;
  background: var(--border-strong);
  transform: translateX(50%);
}

@media (max-width: 768px) {
  .site .process-grid {
    grid-template-columns: 1fr;
  }

  .site .process-step:not(:last-child)::after {
    display: none;
  }
}

/* Stats */
.site .stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-lg);
  text-align: center;
}

.site .stat-item {
  padding: var(--sp-lg) var(--sp-sm);
}

.site .stat-number {
  font-family: var(--font-display);
  font-size: var(--ts-3xl);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--text-primary);
  margin-bottom: var(--sp-xs);
}

.site .stat-label {
  color: var(--text-secondary);
  font-size: var(--ts-sm);
}

/* CTA Section */
.site .cta-section {
  text-align: center;
  position: relative;
}

.site .cta-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  opacity: .3;
  filter: blur(80px);
  pointer-events: none;
}

.site .cta-section .t-display {
  max-width: 16ch;
  margin-left: auto;
  margin-right: auto;
}

.site .cta-section .t-body-lg {
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

/* Footer */
.site .site-footer {
  padding: var(--sp-2xl) 0 var(--sp-xl);
  border-top: 1px solid var(--border);
}

.site .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-md);
}

.site .footer-copy {
  color: var(--text-tertiary);
  font-size: var(--ts-xs);
}

.site .footer-links {
  display: flex;
  gap: var(--sp-sm) var(--sp-lg);
  flex-wrap: wrap;
}

.site .footer-links a {
  color: var(--text-secondary);
  font-size: var(--ts-sm);
  transition: color var(--dur-fast) ease;
}

.site .footer-links a:hover {
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .site .footer-inner {
    flex-direction: column;
    text-align: center;
  }

  .site .footer-links {
    justify-content: center;
    gap: var(--sp-xs) var(--sp-md);
  }

  .site .footer-copy {
    word-break: break-word;
  }
}

/* Reveal Animations */
.site .reveal {
  opacity: 1;
  transform: none;
  animation: revealFadeIn var(--dur-reveal) var(--ease-out-expo) forwards;
}

.site .reveal-left {
  opacity: 1;
  transform: none;
  animation: revealSlideLeft var(--dur-reveal) var(--ease-out-expo) forwards;
}

.site .reveal-right {
  opacity: 1;
  transform: none;
  animation: revealSlideRight var(--dur-reveal) var(--ease-out-expo) forwards;
}

.site .reveal-scale {
  opacity: 1;
  transform: none;
  animation: revealScale var(--dur-reveal) var(--ease-out-expo) forwards;
}

.site .reveal.visible {
  animation-play-state: running;
}

@keyframes revealFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes revealSlideLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes revealSlideRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes revealScale {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .site .reveal,
  .site .reveal-left,
  .site .reveal-right,
  .site .reveal-scale {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .site {
    scroll-behavior: auto;
  }
}

/* Docs Layout */
.site .docs-hero {
  min-height: auto;
  padding-top: calc(80px + var(--sp-xl));
  padding-bottom: var(--sp-lg);
  display: flex;
  align-items: center;
}

.site .docs-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--sp-xl);
  align-items: start;
}

.site .docs-sidebar {
  position: sticky;
  top: calc(80px + var(--sp-sm));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--sp-md);
}

.site .docs-sidebar-title {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-sm);
}

.site .docs-nav {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.site .docs-nav a {
  color: var(--text-secondary);
  font-size: .92rem;
  line-height: 1.35;
  transition: color var(--dur-fast) ease;
}

.site .docs-nav a:hover {
  color: var(--text-primary);
}

.site .docs-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
}

.site .docs-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: clamp(1.2rem, 2vw, 2rem);
}

.site .docs-block-manager {
  background: linear-gradient(140deg, #0c0e12, #161a21);
  border-color: rgba(255,255,255,.1);
}

.site .docs-block-manager .docs-title,
.site .docs-block-manager .docs-subtitle,
.site .docs-block-manager .docs-list strong {
  color: #eef3ff;
}

.site .docs-block-manager .docs-text,
.site .docs-block-manager .docs-list li {
  color: #9aa8be;
}

.site .docs-block-manager .docs-table th {
  color: #eef3ff;
  border-bottom-color: rgba(255,255,255,.12);
}

.site .docs-block-manager .docs-table td {
  color: #9aa8be;
  border-bottom-color: rgba(255,255,255,.08);
}

.site .docs-block-manager-soft {
  background: linear-gradient(140deg, rgba(12,14,18,.95), rgba(22,26,33,.95));
  border-color: rgba(255,255,255,.08);
}

.site .docs-block-manager-soft .docs-title,
.site .docs-block-manager-soft .docs-subtitle {
  color: #eef3ff;
}

.site .docs-block-manager-soft .docs-text,
.site .docs-block-manager-soft .docs-list-ordered li {
  color: #9aa8be;
}

.site .docs-block-analytics {
  background: linear-gradient(160deg, #f5f9ff, #e8f0fe, #f0f5ff);
  border-color: rgba(0,80,200,.15);
}

.site .docs-block-analytics .docs-title,
.site .docs-block-analytics .docs-subtitle,
.site .docs-block-analytics .docs-list strong,
.site .docs-block-analytics .docs-table th {
  color: #0f1d33;
}

.site .docs-block-analytics .docs-text,
.site .docs-block-analytics .docs-list li,
.site .docs-block-analytics .docs-table td {
  color: #3d5478;
}

.site .docs-block-analytics .docs-table th,
.site .docs-block-analytics .docs-table td {
  border-bottom-color: rgba(15,35,64,.1);
}

.site .docs-block-analytics-soft {
  background: linear-gradient(160deg, #ffffff, #f6fbff, #f0f7ff);
  border-color: rgba(0,80,200,.12);
}

.site .docs-block-analytics-soft .docs-title,
.site .docs-block-analytics-soft .docs-subtitle {
  color: #0f1d33;
}

.site .docs-block-analytics-soft .docs-text,
.site .docs-block-analytics-soft .docs-list-ordered li {
  color: #3d5478;
}

.site .docs-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  margin-bottom: .75rem;
  letter-spacing: -.02em;
}

.site .docs-subtitle {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  margin-top: 1.2rem;
  margin-bottom: .6rem;
}

.site .docs-text {
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: .65rem;
}

.site .docs-product-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.site .docs-product-logo {
  height: clamp(32px, 3vw, 44px);
  width: auto;
}

.site .docs-product-actions {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.site .docs-block-manager .btn-secondary {
  color: #d6e0f0;
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
}

.site .docs-block-manager .btn-secondary:hover {
  background: rgba(255,255,255,.12);
}

.site .docs-list,
.site .docs-list-ordered {
  margin: .4rem 0 .75rem 1.1rem;
}

.site .docs-list {
  list-style: disc;
}

.site .docs-list-ordered {
  list-style: decimal;
}

.site .docs-list li,
.site .docs-list-ordered li {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: .4rem;
}

.site .docs-table-wrap {
  overflow-x: auto;
}

.site .docs-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
  font-size: .88rem;
}

.site .docs-table th,
.site .docs-table td {
  border-bottom: 1px solid var(--border);
  text-align: left;
  padding: .6rem .7rem;
  vertical-align: top;
}

.site .docs-table th {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-primary);
}

.site .docs-table td {
  color: var(--text-secondary);
}

.site .docs-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-sm);
  margin-top: var(--sp-sm);
}

.site .docs-kpi {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.site .docs-kpi-project {
  background: linear-gradient(150deg, #0e1015, #181c24);
  border-color: rgba(255,255,255,.1);
}

.site .docs-kpi-project strong,
.site .docs-kpi-project .docs-kpi-label,
.site .docs-kpi-project .docs-kpi-note {
  color: #c8d4e8;
}

.site .docs-kpi-project-light {
  background: linear-gradient(160deg, #f5f9ff, #e8f0fe);
  border-color: rgba(0,60,180,.15);
}

.site .docs-kpi-project-light strong {
  color: #0f1d33;
}

.site .docs-kpi-project-light .docs-kpi-label,
.site .docs-kpi-project-light .docs-kpi-note {
  color: #3d5478;
}

.site .docs-kpi-logo {
  height: clamp(24px, 2.4vw, 32px);
  width: auto;
  margin-bottom: .25rem;
}

.site .docs-kpi-label {
  font-family: var(--font-display);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-tertiary);
  font-weight: 700;
}

.site .docs-kpi strong {
  font-size: 1rem;
}

.site .docs-kpi-note {
  color: var(--text-secondary);
  font-size: .84rem;
}

@media (max-width: 900px) {
  .site .docs-shell {
    grid-template-columns: 1fr;
  }

  .site .docs-sidebar {
    position: static;
  }

  .site .docs-table {
    min-width: 500px;
  }
}

/* Split Layout */
.site .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl);
  align-items: center;
}

.site .split.reverse {
  direction: rtl;
}

.site .split.reverse > * {
  direction: ltr;
}

@media (max-width: 768px) {
  .site .split,
  .site .split.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: var(--sp-xl);
  }
}

/* Grain Overlay */
.site::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: .5;
  mix-blend-mode: overlay;
}

/* Divider */
.site .divider {
  width: 60px;
  height: 2px;
  background: var(--accent);
  border: none;
  border-radius: 1px;
}

.site .section-light .divider {
  background: var(--light-text);
  opacity: .2;
}

/* Service Detail Blocks */
.site .service-detail {
  padding: var(--sp-xl);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.site .service-detail h3 {
  font-size: var(--ts-xl);
  margin-bottom: var(--sp-sm);
}

.site .service-detail p {
  color: var(--text-secondary);
  max-width: 65ch;
}

.site .service-detail-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
}

.site .service-detail-feature {
  padding: var(--sp-md);
  background: var(--surface-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.site .service-detail-feature strong {
  display: block;
  font-size: var(--ts-sm);
  margin-bottom: .25rem;
}

.site .service-detail-feature span {
  color: var(--text-secondary);
  font-size: var(--ts-sm);
}

/* Timeline */
.site .timeline {
  position: relative;
  padding-left: var(--sp-xl);
}

.site .timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--border));
}

.site .timeline-item {
  position: relative;
  padding-bottom: var(--sp-2xl);
}

.site .timeline-item:last-child {
  padding-bottom: 0;
}

.site .timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-xl) + 8px);
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--accent);
}

.site .timeline-item h3 {
  font-size: var(--ts-xl);
  margin-bottom: var(--sp-xs);
}

.site .timeline-item p {
  color: var(--text-secondary);
  max-width: 55ch;
}

/* Nav Dropdown */
.site .has-dropdown {
  position: relative;
}

.site .has-dropdown .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-xs) 0;
  min-width: 220px;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
  z-index: 100;
  list-style: none;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.site .has-dropdown:hover .dropdown,
.site .has-dropdown:focus-within .dropdown {
  display: block;
}

.site .has-dropdown .dropdown li {
  padding: 0;
}

.site .has-dropdown .dropdown a {
  display: block;
  padding: var(--sp-xs) var(--sp-sm);
  font-size: var(--ts-sm);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out-expo), background var(--dur-fast);
  white-space: nowrap;
}

.site .has-dropdown .dropdown a:hover {
  color: var(--text-primary);
  background: var(--accent-soft);
}

@media (max-width: 768px) {
  .site .has-dropdown .dropdown {
    position: static;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 0 var(--sp-sm);
    min-width: 0;
    display: block;
    backdrop-filter: none;
  }

  .site .has-dropdown .dropdown a {
    font-size: var(--ts-base);
    padding: var(--sp-2xs) 0;
  }
}

/* Footer Form */
.site .footer-form-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-xl);
  padding-bottom: var(--sp-xl);
  margin-bottom: var(--sp-lg);
  border-bottom: 1px solid var(--border);
}

.site .footer-form-text {
  flex: 0 0 280px;
}

.site .footer-form-text h3 {
  margin-bottom: var(--sp-2xs);
}

.site .footer-form {
  flex: 1;
}

.site .footer-form-fields {
  display: flex;
  gap: var(--sp-xs);
  flex-wrap: wrap;
  align-items: center;
}

.site .form-input {
  flex: 1;
  min-width: 140px;
  padding: .65rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--ts-sm);
  font-family: inherit;
  transition: border-color var(--dur-fast);
}

.site .form-input:focus {
  outline: none;
  border-color: var(--accent);
}

.site .form-input-wide {
  flex: 2;
  min-width: 200px;
}

.site .form-input::placeholder {
  color: var(--text-tertiary);
}

.site .btn-sm {
  padding: .65rem 1.2rem;
  font-size: var(--ts-sm);
}

.site .form-feedback {
  margin-top: var(--sp-xs);
  font-size: var(--ts-sm);
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius-sm);
}

.site .form-feedback.success {
  display: block !important;
  background: rgba(48,209,88,.1);
  color: #30d158;
}

.site .form-feedback.error {
  display: block !important;
  background: rgba(255,62,62,.1);
  color: #ff3e3e;
}

@media (max-width: 768px) {
  .site .footer-form-wrap {
    flex-direction: column;
    gap: var(--sp-md);
  }

  .site .footer-form-text {
    flex: none;
  }

  .site .footer-form-fields {
    flex-direction: column;
  }

  .site .form-input,
  .site .form-input-wide {
    min-width: 0;
    width: 100%;
    flex: none;
  }

  .site .btn-sm {
    width: 100%;
  }
}

/* Breadcrumb */
.site .breadcrumb {
  display: flex;
  gap: var(--sp-2xs);
  font-size: var(--ts-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--sp-md);
}

.site .breadcrumb a {
  color: var(--text-secondary);
}

.site .breadcrumb a:hover {
  color: var(--accent);
}

.site .breadcrumb span {
  color: var(--text-tertiary);
}

/* FAQ Accordion */
.site .faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.site .faq-item {
  border-bottom: 1px solid var(--border);
}

.site .faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-md) 0;
  cursor: pointer;
  font-size: var(--ts-lg);
  font-weight: 600;
  color: var(--text-primary);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: color var(--dur-fast);
}

.site .faq-question:hover {
  color: var(--accent);
}

.site .faq-question::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--text-tertiary);
  transition: transform var(--dur-normal) var(--ease-out-expo);
  flex-shrink: 0;
  margin-left: var(--sp-sm);
}

.site .faq-item.open .faq-question::after {
  transform: rotate(45deg);
  color: var(--accent);
}

.site .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-normal) var(--ease-out-expo);
}

.site .faq-answer-inner {
  padding: 0 0 var(--sp-md) 0;
  color: var(--text-secondary);
  line-height: 1.7;
}

.site .faq-item.open .faq-answer {
  max-height: 500px;
}

/* Contact Page */
.site .contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-xl);
  align-items: start;
}

.site .contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
}

.site .contact-form .form-group {
  margin-bottom: var(--sp-sm);
}

.site .contact-form .form-label {
  display: block;
  font-size: var(--ts-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary);
  margin-bottom: var(--sp-2xs);
  font-weight: 500;
}

.site .contact-form textarea.form-input {
  resize: vertical;
  min-height: 120px;
}

.site .contact-form select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2386868b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.5rem;
}

.site .contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.site .contact-info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
}

.site .contact-info-card h3 {
  font-size: var(--ts-base);
  margin-bottom: var(--sp-xs);
}

.site .contact-info-card p,
.site .contact-info-card ol {
  font-size: var(--ts-sm);
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .site .contact-grid {
    grid-template-columns: 1fr;
  }

  .site .contact-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* Problem/Solution Grid */
.site .problem-solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
  position: relative;
}

.site .problem-solution-grid::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.site .problem-col,
.site .solution-col {
  padding: var(--sp-md) 0;
}

@media (max-width: 768px) {
  .site .problem-solution-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }

  .site .problem-solution-grid::before {
    display: none;
  }
}

/* Landing Hero */
.site .landing-hero {
  padding: var(--sp-2xl) 0 var(--sp-2xl);
  position: relative;
}

.site .landing-hero .hero-text {
  max-width: 700px;
}

@media (max-width: 768px) {
  .site .landing-hero {
    padding: var(--sp-xs) 0 var(--sp-lg);
  }
}

/* Newsletter Popup */
.site .nl-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: nlFadeIn .4s var(--ease-out-expo);
}

.site .nl-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site .nl-popup-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 440px;
  width: 90%;
  box-shadow: var(--shadow-hover);
  text-align: center;
  animation: nlSlideUp .5s var(--ease-out-expo);
}

.site .nl-popup-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  transition: all var(--dur-fast);
}

.site .nl-popup-close:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,.1);
}

.site .nl-popup-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: var(--sp-md);
}

.site .nl-popup-title {
  font-size: var(--ts-xl);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: var(--sp-xs);
}

.site .nl-popup-desc {
  color: var(--text-secondary);
  font-size: var(--ts-sm);
  line-height: 1.65;
  margin-bottom: var(--sp-lg);
  max-width: 36ch;
  margin-inline: auto;
}

.site .nl-popup-desc strong {
  color: var(--text-primary);
}

.site .nl-popup-fields {
  display: flex;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-sm);
}

.site .nl-input {
  flex: 1;
  text-align: center;
}

.site .nl-submit {
  width: 100%;
  min-height: 44px;
  font-size: var(--ts-sm);
  font-weight: 600;
}

.site .nl-popup-note {
  margin-top: var(--sp-sm);
  font-size: .7rem;
  color: var(--text-tertiary);
}

@keyframes nlFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes nlSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
  .site .nl-popup-fields {
    flex-direction: column;
  }

  .site .nl-input {
    text-align: left;
  }
}

/* Service card as link */
.site a.service-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Responsive fine-tuning */
@media (max-width: 480px) {
  .site .section {
    padding: var(--sp-2xl) 0;
  }

  .site .section-full {
    padding: var(--sp-3xl) 0;
  }

  .site .t-hero {
    letter-spacing: -.03em;
  }

  .site .cta-group {
    flex-direction: column;
  }

  .site .cta-group .btn {
    width: 100%;
  }
}
/* blocco custom: Hero a doppia anima */
.hs{position:relative;min-height:92vh;overflow:hidden;padding-top:66px}
.hs .gm-switch{position:absolute;opacity:0;pointer-events:none}
.hs-text{position:absolute;top:120px;left:max(48px,calc(50vw - 660px));max-width:430px;z-index:5}
h1.t-comm{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(40px,5vw,72px);line-height:1.0;letter-spacing:-.01em;color:var(--txt)}
h1.t-comm em{font-style:italic;background:linear-gradient(120deg,#c3a9ff,#7c3aed);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h1.t-web{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:clamp(30px,3.6vw,50px);line-height:1.07;letter-spacing:-.03em;color:var(--txt)}
h1.t-web .sig{background:var(--sig);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h1.t-web em{font-style:normal;background:var(--sig);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hs .lead{margin-top:20px;font-size:15.5px;line-height:1.6;color:var(--txt2);max-width:44ch}
.hs .cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.hs-figure{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(620px,48vw);height:88vh;z-index:2;pointer-events:none}
.hs-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:51% bottom;-webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent 93%);mask-image:linear-gradient(to bottom,#000 66%,transparent 93%)}
.hs-figure::before{content:"";position:absolute;left:50%;top:9%;transform:translateX(-50%);width:128%;height:90%;z-index:-2;border-radius:50% 50% 44% 44%;opacity:0;transition:opacity .55s;background:radial-gradient(56% 60% at 50% 37%,rgba(170,140,255,.2),rgba(170,140,255,.07) 54%,transparent 76%)}
body:has(.gm-switch:checked) .hs-figure::before{opacity:0}
.hs-switch{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:18px;cursor:pointer;user-select:none}
.hs-switch .l{font-size:14px;font-weight:600;color:var(--txt3);white-space:nowrap;transition:color .3s}
.hs-switch .l-comm{color:var(--txt)}
body:has(.gm-switch:checked) .hs-switch .l-comm{color:var(--txt3)}
body:has(.gm-switch:checked) .hs-switch .l-web{color:var(--txt)}
.toggle.big{position:relative;width:148px;height:74px;border-radius:999px;background:var(--surf2);border:1px solid var(--bd);flex:none;transition:background .5s,border-color .5s}
body:has(.gm-switch:checked) .toggle.big{background:#3a2570}
.toggle.big .knob{position:absolute;top:50%;left:6px;width:62px;height:62px;border-radius:999px;background:var(--gv);box-shadow:var(--glow);display:flex;align-items:center;justify-content:center;color:#fff;transform:translateY(-50%);transition:left .42s cubic-bezier(.34,1.45,.5,1)}
body:has(.gm-switch:checked) .toggle.big .knob{left:80px}
.toggle.big .knob svg{width:54%;height:54%}
.toggle.big .ic-web{display:none}
body:has(.gm-switch:checked) .toggle.big .ic-comm{display:none}
body:has(.gm-switch:checked) .toggle.big .ic-web{display:block}
.hs-hint{position:absolute;left:50%;bottom:2vh;transform:translateX(-50%);z-index:8;font-size:11.5px;color:var(--txt3)}
.hs .only-web{display:none}
body:has(.gm-switch:checked) .hs .only-comm{display:none}
body:has(.gm-switch:checked) .hs .only-web{display:block}
.hs-figure .only-web{opacity:0;transition:opacity .4s}
body:has(.gm-switch:checked) .hs-figure .only-comm{opacity:0}
body:has(.gm-switch:checked) .hs-figure .only-web{opacity:1}
@media(max-width:900px){.hs{min-height:100svh;overflow:hidden;padding-top:24px}.hs-text{position:static;max-width:none;padding:8px 16px 0;text-align:center;animation:none}.hs-text .eyebrow,.hs-text h1,.hs-text .lead{position:relative;z-index:4}.hs-text .lead{margin-left:auto;margin-right:auto}.hs-text .cta{position:absolute;left:0;right:0;bottom:108px;top:auto;margin:0;padding:0 16px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;z-index:6}.hs-window{display:none}.hs-figure{position:absolute;left:50%;top:34%;bottom:auto;transform:translateX(-50%);width:min(116%,440px);height:auto;margin:0;z-index:1}.hs-figure img{position:static;inset:auto;width:100%;height:auto}.hs-switch{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 32px),360px);justify-content:center;margin:0;z-index:8}.hs-switch .l{flex:1 1 0}.hs-switch .l-comm{text-align:right}.hs-switch .l-web{text-align:left}.hs-hint{display:none}}
.win{border-radius:14px;overflow:hidden;border:1px solid var(--bd);background:var(--surf);
  box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 1px var(--bd2);transition:opacity .25s}
body:has(.gm-switch:checked) .win{box-shadow:0 40px 90px rgba(0,0,0,.45),0 0 0 1px var(--bd2)}
.win-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--bd2);background:var(--surf2)}
.win-bar .dot{width:11px;height:11px;border-radius:999px}
.win-bar .ttl{margin:0 auto;font-size:11.5px;color:var(--txt3)}
/* show/hide windows per mode (display-swap) */

/* IDE window */
.ide{display:grid;grid-template-columns:122px 1fr}
.ide .side{border-right:1px solid var(--bd2);padding:12px 0;font-size:11.5px;color:var(--txt3);background:color-mix(in srgb,var(--surf) 60%,var(--bg))}
.ide .side .ft{font-weight:600;color:var(--txt3);padding:0 14px 9px}
.ide .side .fi{padding:5px 14px}
.ide .side .fi.on{color:var(--txt);background:var(--bd2);border-left:2px solid var(--vio)}
.ide .code{padding:14px 16px;font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.85;overflow:hidden}
.ide .code .ln{display:flex;gap:14px}
.ide .code .ln .n{color:var(--txt3);width:14px;text-align:right;user-select:none}
.kw{color:#c792ea} .fn{color:#82aaff} .at{color:#22a6ff} .st{color:#c3e88d} .cm{color:var(--txt3)}
.ide .panel{border-top:1px solid var(--bd2);display:flex;gap:18px;padding:13px 16px;align-items:center;flex-wrap:wrap}
.lh{display:flex;gap:10px}
.deploy{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--txt3);text-align:right;line-height:1.7}
.deploy b{color:var(--ok)}
/* codice: niente a capo (clip come un editor vero) + token numero */
.ide .code .ln{white-space:nowrap;overflow:hidden}
.nm{color:#f78c6c}
/* Lighthouse: gauge ad anello SVG (arco proporzionale al punteggio) + etichetta */
.lh{display:flex;gap:15px;align-items:flex-start}
.lhm{display:flex;flex-direction:column;align-items:center;gap:7px}
.lhg{position:relative;width:44px;height:44px;flex:none}
.lhg svg{width:44px;height:44px;transform:rotate(-90deg)}
.lhg circle{fill:none;stroke-width:3}
.lhg .trk{stroke:var(--bd)}
.lhg .arc{stroke:var(--ok);stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--p,100));transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.25,1)}
.lhg .gv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;color:var(--ok)}
.lhl{font-size:9.5px;color:var(--txt3);letter-spacing:.03em}
/* DenkHub Manager mockup */
.mgr{display:grid;grid-template-columns:130px 1fr}
.mgr-side{border-right:1px solid var(--bd2);padding:12px 0;background:color-mix(in srgb,var(--surf) 55%,var(--bg))}
.mgr-side .ms-lbl{font-size:9.5px;letter-spacing:.1em;color:var(--txt3);padding:0 13px 9px}
.mgr-side .ms-i{display:flex;align-items:center;gap:8px;padding:6px 13px;font-size:12px;color:var(--txt2)}
.mgr-side .ms-i.on{color:var(--txt);background:var(--bd2);border-left:2px solid var(--vio)}
.mgr-side .ms-dot{width:7px;height:7px;border-radius:999px;flex:none}
.mgr-side .ms-sep{height:1px;background:var(--bd2);margin:11px 13px}
.mgr-side .ms-nav{display:flex;align-items:center;justify-content:space-between;padding:6px 13px;font-size:12px;color:var(--txt2)}
.mgr-side .ms-badge{background:var(--gv);color:#fff;font-size:10px;font-weight:600;border-radius:999px;padding:1px 7px}
.mgr-main{padding:13px 14px;display:flex;flex-direction:column;gap:9px}
.mgr-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2px}
.mgr-head .mh-t{font-size:14px;font-weight:600}
.mgr-head .mh-s{font-size:11px;color:var(--txt3)}
.mcard{display:flex;gap:11px;align-items:center;border:1px solid var(--bd2);border-radius:11px;padding:9px;background:var(--surf2)}
.mc-cover{width:42px;height:42px;border-radius:9px;flex:none}
.mc-b{min-width:0;flex:1}
.mc-cap{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-meta{display:flex;align-items:center;gap:8px;margin-top:5px}
.st-pill{font-size:10px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
.st-pill.ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.st-pill.wait{background:rgba(244,191,79,.18);color:#caa028}
.st-pill.prog{background:rgba(124,58,237,.2);color:#9b7dff}
body:has(.gm-switch:checked) .st-pill.prog{color:#c3a9ff}
.mc-d{font-size:10.5px;color:var(--txt3)}
.hs-window{position:absolute;top:104px;right:max(48px,calc(50vw - 660px));width:min(440px,38vw);z-index:1}
.hs-window .win{transition:opacity .25s}
.hs-figure{z-index:2}
@keyframes dh-rise{from{opacity:0;transform:translate(-50%,46px)}to{opacity:1;transform:translate(-50%,0)}}@keyframes dh-riseM{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
@keyframes dh-inL{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@keyframes dh-inR{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes dh-fadeup{from{opacity:0}to{opacity:1}}
.hs-figure{animation:dh-rise 1.05s cubic-bezier(.16,1.05,.3,1) both .08s}
.hs-text{animation:dh-inL .8s cubic-bezier(.16,1.05,.3,1) both .36s}
.hs-window{animation:dh-inR .85s cubic-bezier(.16,1.05,.3,1) both .5s}
.hs-switch{animation:dh-rise .8s cubic-bezier(.16,1.05,.3,1) both .62s}
/* hint: solo opacity, cosi' NON si perde il translateX(-50%) del centraggio (era il testo decentrato) */
.hs-hint{animation:dh-fadeup .8s ease both .8s}
@media(prefers-reduced-motion:reduce){.hs-figure,.hs-text,.hs-window,.hs-switch,.hs-hint{animation:none}}@media(max-width:900px){.hs-text{animation:none}}@media(max-width:900px){body:has(.gm-switch:checked) .hs-figure{left:44%}}.hs-text .eyebrow{visibility:hidden}

/* blocco override nav */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;700&display=swap');
/* ============================================================
   denkhub.io - design system condiviso (prototipo)
   Base del futuro theme.css del tema "denkhub" su Guacamedia.
   Pagine interne (single-mode) linkano questo file.
   La home (dual-mode) ha il suo CSS inline finche' non si porta nel tema.

   CONTRATTO CLASSI (per chi compone le pagine):
   - body                      : dark di default. <body class="gm-web"> = tema chiaro (lato Sviluppo).
   - header                    : <header class="dh-head"><div class="wrap">brand + nav</div></header>
   - nav link attivo           : <a class="nl on">
   - bottoni                   : .btn .btn-primary | .btn .btn-ghost
   - hero pagina interna       : <section class="phero"><div class="wrap"> eyebrow + h1.phero-h(+<em>) + p.phero-sub + .phero-cta </div></section>
   - sezione                   : <section class="blk"><div class="wrap(.wide)"> ... </div></section>
   - etichetta sezione         : <div class="sec-label"><span class="ln"></span>TESTO</div>
   - titolo sezione            : <h2 class="sec-h">testo <em>chiave</em>.</h2>  (serif, em viola)
   - sottotitolo               : <p class="sec-sub">...</p>
   - testo lungo               : <div class="prose"><p class="lead-line">..</p><p>..</p></div>
   - callout                   : <div class="callout"><b>..</b> ..</div>
   - griglia concetti          : <div class="cards"> .card (.asset per evidenziato) > .ctag + .ct + .cd </div>
   - portfolio                 : <div class="pgrid(.cols2/.cols3)"> a.pcard > .pcard-shot(--c:#hex) + .pcard-b(.pc-t + .pc-d + .pc-tag) </div>
   - prodotti                  : .cards > .card con .ct + .cd + .pc-tag (stato)
   - blog                      : .chips/.chip ; .feat ; .streams/.stream
   - form                      : .form > .field > label + input/textarea ; .field.row per 2 colonne
   - footer                    : <div class="wrap"><div class="foot">..</div></div>
   - keyword gradiente alt     : <span class="sig">parola</span> (blu->viola, per titoli lato sviluppo)
   ============================================================ */

:root{
  --bg:#0a0b0a; --bg2:#101110; --surf:#16181a; --surf2:#1c1f22;
  --txt:#f3f4ef; --txt2:#9aa09a; --txt3:#6b716b; --bd:rgba(255,255,255,.10); --bd2:rgba(255,255,255,.06);
  --vio:#8b5cf6; --gv:linear-gradient(135deg,#a883ff,#7c3aed 55%,#6d28d9);
  --glow:0 10px 40px rgba(124,58,237,.42); --sig:linear-gradient(90deg,#22a6ff,#9b7dff);
  --ok:#3ad29f;
}
body.gm-web{
  --bg:#f4f3ef; --bg2:#eceae3; --surf:#ffffff; --surf2:#f3f1ea;
  --txt:#16180f; --txt2:#5d6157; --txt3:#8a8f82; --bd:rgba(0,0,0,.11); --bd2:rgba(0,0,0,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased;
  transition:background .4s,color .4s}
.mono{font-family:'JetBrains Mono',monospace}
a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 48px}
.wrap.wide{max-width:1320px}

/* ---------- header ---------- */
.dh-head{position:fixed;top:0;left:0;right:0;z-index:60;height:66px;display:flex;align-items:center;
  background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--bd2)}
.dh-head .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1320px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.02em}
.brand-logo{width:23px;height:26px;flex:none;color:var(--txt)}
.brand .tld{background:var(--gv);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.head-nav{display:flex;align-items:center;gap:26px}
.head-nav .nl{font-size:13.5px;color:var(--txt2);transition:color .2s}
.head-nav .nl:hover,.head-nav .nl.on{color:var(--txt)}
.head-nav .nl.on{font-weight:600}

/* ---------- bottoni ---------- */
.btn{font-size:14px;font-weight:600;padding:13px 22px;border-radius:999px;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px;transition:transform .15s,box-shadow .3s,filter .3s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--gv);color:#fff;box-shadow:var(--glow)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--bd);color:var(--txt);background:transparent}
.btn-ghost:hover{border-color:var(--txt3)}

/* ---------- hero pagina interna ---------- */
.phero{padding:150px 0 30px;position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:900px;height:680px;z-index:0;
  background:radial-gradient(50% 50% at 50% 40%,rgba(124,58,237,.16),transparent 70%);pointer-events:none}
.phero .wrap{position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;color:var(--txt2);
  padding:7px 13px;border:1px solid var(--bd);border-radius:999px;margin-bottom:26px}
.eyebrow .d{width:7px;height:7px;border-radius:999px;background:var(--gv);box-shadow:0 0 9px rgba(124,58,237,.8)}
.phero-h{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(42px,5.4vw,78px);line-height:1.0;letter-spacing:-.01em;max-width:15ch}
.phero-h em{font-style:italic;background:linear-gradient(120deg,#c3a9ff,#7c3aed);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.phero-h .sig{background:var(--sig);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.phero-sub{margin-top:24px;font-size:17px;line-height:1.6;color:var(--txt2);max-width:60ch}
.phero-cta{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- sezioni ---------- */
.blk{padding:84px 0;border-top:1px solid var(--bd2)}
.blk.tight{padding:64px 0}
.sec-label{display:flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--vio);margin-bottom:18px}
.sec-label .ln{width:34px;height:1px;background:var(--vio);opacity:.6}
.sec-h{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(32px,4vw,52px);line-height:1.06;letter-spacing:-.01em;max-width:20ch}
.sec-h em{font-style:italic;background:linear-gradient(120deg,#c3a9ff,#7c3aed);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sec-h .sig{background:var(--sig);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sec-sub{margin-top:18px;color:var(--txt2);font-size:16px;max-width:62ch;line-height:1.65}

/* ---------- prose / callout ---------- */
.prose{max-width:62ch;font-size:18px;line-height:1.72;color:var(--txt)}
.prose p{margin-top:18px}
.prose p:first-child{margin-top:0}
.prose .lead-line{font-size:21px;line-height:1.55}
.prose strong{font-weight:600}
.prose .sig-line{background:var(--sig);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:600}
.callout{margin-top:30px;border-left:2px solid var(--vio);background:color-mix(in srgb,var(--vio) 9%,transparent);
  padding:16px 20px;border-radius:0 12px 12px 0;font-size:15px;color:var(--txt2);max-width:62ch}
.callout b{color:var(--txt)}

/* ---------- card concetti ---------- */
.cards{margin-top:42px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards.cols2{grid-template-columns:repeat(2,1fr)}
.cards.cols4{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid var(--bd2);border-radius:16px;padding:22px;background:var(--surf);position:relative}
.card .ctag{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.04em;color:var(--txt3);
  border:1px solid var(--bd2);border-radius:999px;padding:3px 10px;display:inline-block;margin-bottom:14px}
.card .ct{font-size:18px;font-weight:600;letter-spacing:-.01em}
.card .cd{margin-top:9px;font-size:14.5px;line-height:1.6;color:var(--txt2)}
.card.asset{border-color:color-mix(in srgb,var(--vio) 55%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--vio) 12%,var(--surf)),var(--surf));box-shadow:0 18px 50px rgba(124,58,237,.18)}
.card.asset .ctag{color:#c3a9ff;border-color:color-mix(in srgb,var(--vio) 45%,transparent);background:color-mix(in srgb,var(--vio) 14%,transparent)}

/* stato prodotto / tag tecnico inline */
.pc-tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--vio);border:1px solid var(--bd2);border-radius:999px;padding:2px 9px;display:inline-block;margin-top:12px}
.st-pill{font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap;display:inline-block}
.st-pill.ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.st-pill.wait{background:rgba(244,191,79,.18);color:#caa028}
.st-pill.prog{background:rgba(124,58,237,.2);color:#9b7dff}

/* ---------- portfolio / lavori ---------- */
.pgrid{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pgrid.cols2{grid-template-columns:repeat(2,1fr)}
.pcard{border:1px solid var(--bd2);border-radius:16px;overflow:hidden;background:var(--surf);display:block;transition:transform .2s,border-color .2s}
.pcard:hover{transform:translateY(-3px);border-color:var(--bd)}
.pcard-shot{height:168px;background:linear-gradient(150deg,color-mix(in srgb,var(--c,#8b5cf6) 70%,#000),color-mix(in srgb,var(--c,#8b5cf6) 22%,var(--surf)));position:relative}
.pcard-shot::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 28% 24%,rgba(255,255,255,.16),transparent 60%)}
.pcard-shot .bbar{position:absolute;top:11px;left:13px;display:flex;gap:5px;z-index:2}
.pcard-shot .bbar i{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.5)}
.pcard-b{padding:18px 20px 20px}
.pc-t{font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.pc-d{margin-top:5px;font-size:13.5px;color:var(--txt2);line-height:1.5}

/* lista step / flusso numerato */
.flow{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.flow-step{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--bd2)}
.flow-step:last-child{border-bottom:0}
.fs-n{flex:none;width:32px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--vio);padding-top:2px}
.fs-t{font-weight:600;font-size:15.5px}
.fs-d{font-size:13.5px;color:var(--txt2);margin-top:4px;line-height:1.55;max-width:54ch}

/* ---------- blog ---------- */
.blog-top{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:18px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.chip{font-size:13px;font-weight:600;color:var(--txt2);border:1px solid var(--bd);border-radius:999px;padding:8px 15px;cursor:pointer;transition:.2s}
.chip.on,.chip:hover{color:var(--txt);border-color:var(--vio)}
.chip.on{background:color-mix(in srgb,var(--vio) 14%,transparent)}
.feat{margin-top:26px;border:1px solid var(--bd2);border-radius:18px;overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;background:var(--surf)}
.feat-art{background:linear-gradient(135deg,#2a1457,#6d28d9 60%,#a883ff);position:relative;min-height:230px}
.feat-art::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 80% at 30% 25%,rgba(255,255,255,.18),transparent 60%)}
.feat-art .badge{position:absolute;top:16px;left:16px;z-index:2;font-family:'JetBrains Mono',monospace;font-size:11px;color:#fff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:4px 11px;backdrop-filter:blur(6px)}
.feat-b{padding:30px;display:flex;flex-direction:column;justify-content:center}
.feat-b .k{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--txt3);margin-bottom:12px}
.feat-b .ft{font-family:'Instrument Serif',serif;font-size:30px;line-height:1.1;letter-spacing:-.01em}
.feat-b .ft em{font-style:italic;background:linear-gradient(120deg,#c3a9ff,#7c3aed);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.feat-b .fd{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--txt2)}
.feat-b .fl{margin-top:18px;font-weight:600;font-size:14px;color:#c3a9ff}
.streams{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stream{border:1px solid var(--bd2);border-radius:16px;padding:20px;background:var(--surf)}
.stream .sk{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--vio);margin-bottom:10px}
.stream .st{font-size:16px;font-weight:600}
.stream .sd{margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--txt2)}
.stream .sl{margin-top:14px;font-size:12.5px;color:var(--txt3);font-family:'JetBrains Mono',monospace}
.blog-note{margin-top:22px;font-size:12.5px;color:var(--txt3);font-family:'JetBrains Mono',monospace}

/* ---------- form contatti ---------- */
.form{margin-top:34px;max-width:620px;display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;font-weight:600;color:var(--txt2)}
.field input,.field textarea,.field select{font-family:inherit;font-size:15px;color:var(--txt);background:var(--surf);border:1px solid var(--bd);border-radius:12px;padding:13px 15px;transition:border-color .2s}
.field textarea{resize:vertical;min-height:130px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--vio)}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---------- CTA finale ---------- */
.cta-cards{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cta-card{border:1px solid var(--bd2);border-radius:16px;padding:26px;background:var(--surf)}
.cta-card .ch{font-size:19px;font-weight:600}
.cta-card .cp{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--txt2)}
.cta-card .btn{margin-top:18px}

/* ---------- footer ---------- */
.foot{display:flex;align-items:center;justify-content:space-between;padding:30px 0;border-top:1px solid var(--bd2);color:var(--txt3);font-size:13px;flex-wrap:wrap;gap:10px}

@media(max-width:900px){
  .wrap{padding:0 22px}
  .head-nav .nl:not(.on){display:none}
  .phero{padding:120px 0 20px}
  .blk{padding:60px 0}
  .cards,.cards.cols2,.cards.cols4,.streams,.cta-cards,.pgrid,.pgrid.cols2{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr}
  .feat-art{min-height:150px}
  .field.two{grid-template-columns:1fr}
}

/* flip tema CSS-only via :has() (home interattiva o pagina light con checkbox nascosto checked) */
body:has(.gm-switch:checked){--bg:#241248;--bg2:#1b0e3a;--surf:#33206b;--surf2:#2a1857;--txt:#f1ecff;--txt2:#bcaee6;--txt3:#8b7fbf;--bd:rgba(255,255,255,.14);--bd2:rgba(255,255,255,.07)}
body{transition:background .45s,color .45s}
/* visibilita' per anima (solo home, che ha l'interruttore) */
body:has(.gm-switch) .gm-mode-web{display:none}
body:has(.gm-switch:checked) .gm-mode-comm{display:none}
body:has(.gm-switch:checked) .gm-mode-web{display:block}
/* bottoni: batto le regole .site .btn-primary del tema (blu) con pari specificita' + viola */
.site .btn-primary{background:var(--gv);color:#fff;box-shadow:var(--glow);border-color:transparent}
.site .btn-primary:hover{filter:brightness(1.08);background:var(--gv)}
.site .btn-ghost{background:transparent;border:1px solid var(--bd);color:var(--txt)}
.site .btn-ghost:hover{border-color:var(--txt3);background:transparent}
/* in light mode flippo anche le var di TESTO del tema (i titoli ereditano --text-primary) */
body:has(.gm-switch:checked){--text-primary:#f1ecff;--text-secondary:#bcaee6;--text-tertiary:#8b7fbf;--surface:#33206b}
/* interruttore compatto in header: collassato, si espande allo scroll sulla home spingendo le voci */
.dh-switch{display:flex;align-items:center;gap:9px;cursor:pointer;white-space:nowrap;max-width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:-26px;transition:max-width .55s cubic-bezier(.33,1,.34,1),opacity .4s,margin-left .55s cubic-bezier(.33,1,.34,1)}
body.dh-scrolled:has(.hs) .dh-switch{max-width:300px;opacity:1;margin-left:2px;pointer-events:auto}
.dh-switch .dh-l{font-size:12px;font-weight:600;color:var(--txt3);transition:color .3s}
.dh-switch .dh-l-comm{color:var(--txt)}
body:has(.gm-switch:checked) .dh-switch .dh-l-comm{color:var(--txt3)}
body:has(.gm-switch:checked) .dh-switch .dh-l-web{color:var(--txt)}
.toggle.sm{position:relative;width:46px;height:26px;border-radius:999px;background:var(--surf2);border:1px solid var(--bd);flex:none;transition:background .4s}
body:has(.gm-switch:checked) .toggle.sm{background:#3a2570}
.toggle.sm .knob{position:absolute;top:50%;left:3px;width:20px;height:20px;border-radius:999px;background:var(--gv);box-shadow:var(--glow);display:flex;align-items:center;justify-content:center;color:#fff;transform:translateY(-50%);transition:left .35s cubic-bezier(.34,1.45,.5,1)}
body:has(.gm-switch:checked) .toggle.sm .knob{left:23px}
.toggle.sm .knob svg{width:54%;height:54%}
.toggle.sm .ic-web{display:none}
body:has(.gm-switch:checked) .toggle.sm .ic-comm{display:none}
body:has(.gm-switch:checked) .toggle.sm .ic-web{display:block}
@media(max-width:900px){body.dh-scrolled:has(.hs) .dh-switch{max-width:70px}.dh-switch .dh-l{display:none}}

/* blocco custom: Sezione · lavori/portfolio */
.pcard-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:1;display:block}.pcard-shot:has(img){background:#0c0e0d}.pcard-shot:has(img)::after{display:none}.pcard-shot:has(img)::before{content:"";position:absolute;top:0;left:0;right:0;height:34px;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.34),transparent)}
.gm-langnav{position:fixed;bottom:16px;right:16px;z-index:2147482000;display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(20,20,20,.82);box-shadow:0 4px 16px rgba(0,0,0,.22);font-family:system-ui,-apple-system,sans-serif;font-size:12px;font-weight:600}.gm-langnav a,.gm-langnav span{display:inline-block;padding:4px 10px;border-radius:999px;text-decoration:none;text-transform:uppercase;letter-spacing:.04em;color:#fff;opacity:.65}.gm-langnav a:hover{opacity:1}.gm-langnav [aria-current]{background:#fff;color:#111;opacity:1}