:root {
  --cyan: #29B6F6;
  --blue: #1565C0;
  --navy: #0A1628;
  --accent: #1A73E8;
  --light: #F6F8FC;
  --white: #FFFFFF;
  --surface: #EDF1F8;
  --border: #DAE2F0;
  --text: #1C2B3A;
  --muted: #5E7490;
  --success: #10B981;
  --font-display: 'Syne', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-mono);
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Override Bootstrap defaults */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--navy);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--blue);
}

/* ---- UTILITY ---- */
.font-mono {
  font-family: var(--font-mono) !important;
}

.font-display {
  font-family: var(--font-display) !important;
}

.text-accent {
  color: var(--accent) !important;
}

.text-muted-custom {
  color: var(--muted) !important;
}

.text-navy {
  color: var(--navy) !important;
}

.bg-surface {
  background: var(--surface) !important;
}

.bg-navy {
  background: var(--navy) !important;
}

.border-custom {
  border-color: var(--border) !important;
}

.gradient-text {
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.section-label::before {
  content: '//';
  opacity: 0.4;
}

.tag-pill {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(26, 115, 232, 0.06);
  border: 1px solid rgba(26, 115, 232, 0.2);
  padding: 0.25rem 0.65rem;
  border-radius: 2px;
  display: inline-block;
}

.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  overflow: hidden;
}

.language-switch a,
.language-switch span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0.42rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.language-switch a:hover {
  color: var(--accent);
}

.language-switch .active {
  background: var(--accent);
  color: var(--white);
}

/* ---- SCROLL PROGRESS ---- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--accent));
  z-index: 9999;
  transition: width 0.05s linear;
}

/* ---- NAVBAR ---- */
.navbar-lad {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  height: 64px;
  transition: box-shadow 0.3s;
}

.navbar-lad.scrolled {
  box-shadow: 0 1px 20px rgba(10, 22, 40, 0.06);
}

.navbar-lad .navbar-brand img {
  height: 34px;
  width: auto;
}

.navbar-lad .nav-link {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted) !important;
  padding: 0.5rem 0 !important;
  margin: 0 1.1rem;
  position: relative;
  transition: color 0.25s;
}

.navbar-lad .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--accent);
  transition: width 0.3s ease;
}

.navbar-lad .nav-link:hover,
.navbar-lad .nav-link.active {
  color: var(--accent) !important;
}

.navbar-lad .nav-link:hover::after,
.navbar-lad .nav-link.active::after {
  width: 100%;
}

.navbar-lad .btn-cta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent);
  color: white;
  border: none;
  padding: 0.5rem 1.2rem;
  border-radius: 3px;
  transition: background 0.2s, transform 0.2s;
}

.navbar-lad .btn-cta:hover {
  background: var(--blue);
  transform: translateY(-1px);
  color: white;
}

.navbar-lad .dropdown-menu {
    margin-top: 0.65rem;
    padding: 0.5rem;
    min-width: 220px;

    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.10),
        0 2px 8px rgba(15, 23, 42, 0.04);
}

.navbar-lad .dropdown-item {
    padding: 0.7rem 0.85rem;

    font-size: 0.76rem;
    color: var(--text);

    border-radius: 5px;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.navbar-lad .dropdown-item:hover,
.navbar-lad .dropdown-item:focus {
    background: rgba(41, 182, 246, 0.08);
    color: var(--accent);
    transform: translateX(2px);
}

.navbar-lad .dropdown-divider {
    margin: 0.4rem 0;
    border-color: var(--border);
}

.navbar-lad .dropdown-toggle::after {
    margin-left: 0.45rem;
    vertical-align: 0.15em;
    border-top-width: 0.3em;
    border-right-width: 0.3em;
    border-left-width: 0.3em;
}

/* Burger custom */
.navbar-toggler {
  border: none !important;
  padding: 0.4rem;
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

.burger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  margin: 5px 0;
  transition: transform 0.3s, opacity 0.3s;
}

/* ---- HERO ---- */
.hero {
  min-height: calc(100vh - 64px);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.3;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(41, 182, 246, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(26, 115, 232, 0.06);
  border: 1px solid rgba(26, 115, 232, 0.18);
  padding: 0.4rem 1rem;
  margin-bottom: 2rem;
  animation: fadeUp 0.8s ease both;
}

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

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

.hero h1 {
  font-size: clamp(2.8rem, 5.5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--navy);
  margin-bottom: 1.5rem;
  animation: fadeUp 0.8s 0.15s ease both;
}

.hero-sub {
  font-size: 0.88rem;
  line-height: 1.9;
  color: var(--muted);
  max-width: 480px;
  margin-bottom: 2.5rem;
  animation: fadeUp 0.8s 0.3s ease both;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  animation: fadeUp 0.8s 0.45s ease both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero code window */
.code-window {
  background: var(--navy);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 24px 80px rgba(10, 22, 40, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  animation: fadeUp 1s 0.5s ease both;
  position: relative;
}

.code-window::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--accent));
}

.code-titlebar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.code-titlebar .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.code-titlebar .dot-r {
  background: #FF5F57;
}

.code-titlebar .dot-y {
  background: #FEBC2E;
}

.code-titlebar .dot-g {
  background: #28C840;
}

.code-titlebar .filename {
  margin-left: auto;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.08em;
}

.code-body {
  padding: 1.2rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 2.1;
  color: rgba(255, 255, 255, 0.4);
}

.code-body .kw {
  color: #4FC3F7;
}

.code-body .fn {
  color: #82AAFF;
}

.code-body .str {
  color: #C3E88D;
}

.code-body .cm {
  color: #3D5475;
}

.code-body .num {
  color: #F78C6C;
}

.code-body .var {
  color: #EEFFFF;
}

/* ---- BUTTONS ---- */
.btn-lad-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--accent), var(--blue));
  color: white;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85rem 1.8rem;
  border: none;
  border-radius: 3px;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  text-decoration: none;
}

.btn-lad-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(26, 115, 232, 0.3);
  color: white;
}

.btn-lad-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85rem 1.8rem;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  transition: border-color 0.2s, color 0.2s;
  cursor: pointer;
  text-decoration: none;
}

.btn-lad-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.cta-section .btn-lad-ghost {
    color: rgba(255,255,255,0.88);
    border-color: rgba(255,255,255,0.45);
    background: transparent;
}

.cta-section .btn-lad-ghost:hover,
.cta-section .btn-lad-ghost:focus {
    color: #fff;
    border-color: #fff;
    background: rgba(255,255,255,0.08);
}

/* ---- STATS STRIP ---- */
.stats-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.stat-item {
  text-align: center;
  padding: 2.2rem 1rem;
}

.stat-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.stat-num span {
  color: var(--accent);
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- SECTION SPACING ---- */
.section-pad {
  padding: 6rem 0;
}

.section-pad-lg {
  padding: 7rem 0;
}

/* ---- PROJECT CARDS ---- */
.project-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  position: relative;
}

.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  opacity: 0;
  transition: opacity 0.3s;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(10, 22, 40, 0.1);
  border-color: rgba(26, 115, 232, 0.25);
}

.project-card:hover::before {
  opacity: 1;
}

.project-card .card-body {
  padding: 1.8rem;
}

.project-card .project-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(41, 182, 246, 0.1), rgba(21, 101, 192, 0.1));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 1.2rem;
}

.project-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.project-card .project-desc {
  font-size: 0.76rem;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 1.2rem;
}

.project-card .project-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--success);
  margin-bottom: 1rem;
}

.project-card .project-status .dot-live {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
}

/* ---- SKILL BARS (new style) ---- */
.skill-category {
  margin-bottom: 2.5rem;
}

.skill-category h4 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
}

.skill-row {
  display: flex;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(218, 226, 240, 0.5);
}

.skill-row:last-child {
  border-bottom: none;
}

.skill-name {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text);
  min-width: 110px;
  font-weight: 500;
}

.skill-bar-track {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 1rem;
}

.skill-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--accent));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.skill-bar-fill.animated {
  transform: scaleX(var(--level));
}

.skill-level {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--accent);
  min-width: 32px;
  text-align: right;
}

/* ---- ARCHITECTURE CARDS ---- */
.arch-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.8rem;
  transition: transform 0.25s, box-shadow 0.25s;
  height: 100%;
}

.arch-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(10, 22, 40, 0.06);
}

.arch-card h5 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.arch-card p {
  font-size: 0.72rem;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}

/* ---- SERVICES ---- */
.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2.2rem;
  transition: transform 0.3s, box-shadow 0.3s;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.service-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  opacity: 0;
  transition: opacity 0.3s;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(10, 22, 40, 0.08);
}

.service-card:hover::after {
  opacity: 1;
}

.service-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(41, 182, 246, 0.1), rgba(21, 101, 192, 0.1));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 1.3rem;
}

.service-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.service-card p {
  font-size: 0.75rem;
  line-height: 1.75;
  color: var(--muted);
}

.service-features {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.service-features li {
  font-size: 0.7rem;
  color: var(--text);
  padding: 0.35rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: 1.5;
}

.service-features li .arrow {
  color: var(--accent);
  flex-shrink: 0;
  font-weight: 600;
}

/* ---- TIMELINE ---- */
.timeline-entry {
  display: flex;
  gap: 1.5rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--border);
}

.timeline-entry:last-child {
  border-bottom: none;
}

.timeline-year {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  min-width: 80px;
  padding-top: 0.2rem;
}

.timeline-title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.2rem;
}

.timeline-desc {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ---- PROCESS STEPS ---- */
.process-step {
  text-align: center;
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--border);
  height: 100%;
}

.process-step:last-child {
  border-right: none;
}

.process-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--border);
  margin-bottom: 0.8rem;
}

.process-step h5 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.process-step p {
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.7;
}

/* ---- CONTACT FORM ---- */
.form-label-lad {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.form-control-lad {
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.75rem 1rem;
  border-radius: 3px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control-lad:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.08);
  outline: none;
}

.form-control-lad::placeholder {
  color: rgba(94, 116, 144, 0.5);
}

.form-microcopy-lad {
  font-size: 0.68rem;
  color: var(--muted);
  margin: 0.45rem 0 0;
  line-height: 1.6;
}

.grecaptcha-badge {
  visibility: hidden !important;
}

.recaptcha-notice {
  font-size: 0.64rem;
  color: var(--muted);
  margin: 0.55rem 0 0;
  line-height: 1.6;
}

.recaptcha-notice a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- WHATSAPP CTA ---- */
.whatsapp-cta {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  max-width: min(420px, calc(100vw - 2rem));
}

.whatsapp-cta-text {
  position: relative;
  width: 300px;
  padding: 0.9rem 2.75rem 0.9rem 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(10, 22, 40, 0.16);
}

.whatsapp-cta-close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: inline-flex;
  width: 30px;
  height: 30px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: 400 1.15rem/1 var(--font-sans);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.whatsapp-cta-close:hover,
.whatsapp-cta-close:focus-visible {
  background: var(--surface);
  color: var(--text);
}

.whatsapp-cta-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.whatsapp-cta-text span {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.55;
}

.whatsapp-cta-text span:first-of-type {
  color: var(--text);
  font-weight: 600;
}

.whatsapp-cta-text a {
  display: inline-flex;
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.whatsapp-cta-icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.whatsapp-cta-icon:hover {
  transform: scale(1.08);
}

.whatsapp-cta-icon img {
  width: 50px;
  height: 50px;
  display: block;
}

@media (max-width: 575.98px) {
  .whatsapp-cta {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .whatsapp-cta-text {
    flex: 1 1 auto;
    width: auto;
    padding: 0.8rem 2.65rem 0.8rem 0.9rem;
  }

  .whatsapp-cta-text span {
    font-size: 0.68rem;
  }
}

/* ---- FOOTER ---- */
.site-footer {
    padding: 3rem 0 2rem;
}

.footer-lad {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.4);
}

.footer-lad a {
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.2s;
}

.footer-lad a:hover {
  color: var(--cyan);
}

.footer-tagline {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.2);
  margin-top: 0.6rem;
}

.footer-heading {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 1rem;
}

.footer-link {
  display: block;
  font-size: 0.72rem;
  padding: 0.3rem 0;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1.5rem 0;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.2);
}

/* ---- REVEAL ANIMATION ---- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-d1 {
  transition-delay: 0.1s;
}

.reveal-d2 {
  transition-delay: 0.2s;
}

.reveal-d3 {
  transition-delay: 0.3s;
}

.reveal-d4 {
  transition-delay: 0.4s;
}

/* ---- CTA SECTION ---- */
.cta-section {
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* ---- RESPONSIVE OVERRIDES ---- */

@media (max-width: 991.98px) {

  /* =========================================================
     NAVBAR MOBILE / TABLET
     ========================================================= */

  .navbar-lad {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /*
   * La collapse è dentro .container, ma la rendiamo assoluta
   * rispetto alla navbar fixed-top.
   *
   * In questo modo il pannello occupa tutta la larghezza
   * della topbar e non soltanto quella del container Bootstrap.
   */
  .navbar-lad .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    width: 100%;

    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    box-shadow: 0 14px 30px rgba(10, 22, 40, 0.08);

    max-height: calc(100dvh - 64px);
    overflow-y: auto;

    z-index: 10;
  }


  /*
   * A tablet replichiamo circa la larghezza
   * del container Bootstrap.
   */
  .navbar-lad .navbar-nav {
    width: 100%;
    max-width: 720px;

    margin: 0 auto;
    padding: 0.75rem 0 1rem;

    background: transparent;
  }

  .navbar-lad .nav-item {
    width: 100%;
  }

  .navbar-lad .nav-link {
    width: 100%;

    margin: 0;
    padding: 0.75rem 1rem !important;

    border-bottom: 1px solid rgba(218, 226, 240, 0.65);
  }


  /*
   * La sottolineatura desktop su mobile produce
   * quei piccoli trattini blu che si vedono nello screenshot.
   */
  .navbar-lad .nav-link::after {
    display: none;
  }


  /* CTA */
  .navbar-lad .navbar-nav .btn-lad-primary {
    margin: 0.85rem 1rem 0.2rem;
  }


  /* Dropdown interni al menu mobile */
  .navbar-lad .dropdown-menu {
    position: static;

    min-width: 0;

    margin: 0.15rem 1rem 0.6rem;
    padding: 0.35rem;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 6px;

    box-shadow: none;
  }

  .navbar-lad .dropdown-item {
    padding: 0.65rem 0.8rem;
  }


  /* =========================================================
     RESTO DEL RESPONSIVE ESISTENTE
     ========================================================= */

  .hero {
    min-height: auto;
    padding: 4rem 0 3rem;
  }

  .hero h1 {
    font-size: clamp(2rem, 6vw, 3rem);
  }

  .section-pad {
    padding: 4rem 0;
  }

  .process-step {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .process-step:last-child {
    border-bottom: none;
  }
}


/* Tablet piccolo */
@media (max-width: 767.98px) {

  .navbar-lad .navbar-nav {
    max-width: 540px;
  }

  .stat-item {
    border-right: none !important;
  }
}


/* Smartphone */
@media (max-width: 575.98px) {

  .navbar-lad {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .navbar-lad .navbar-nav {
    max-width: none;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .navbar-lad .navbar-nav .btn-lad-primary {
    display: flex;
    width: calc(100% - 2rem);

    margin-left: 1rem;
    margin-right: 1rem;

    justify-content: center;
  }
}

/* ---- COOKIE BANNER ---- */
#ladCookieConsent[hidden],
.cookie-banner[hidden],
.cookie-preferences[hidden] {
  display: none !important;
}

.cookie-banner {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  left: clamp(1rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  width: min(1080px, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow-y: auto;
  color: var(--text);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 22px 65px rgba(10, 22, 40, 0.22);
  z-index: 11000;
  animation: cookieSlideUp 0.25s ease-out;
}

@keyframes cookieSlideUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cookie-banner h2,
.cookie-preferences h2 {
  margin: 0.35rem 2.5rem 0.85rem 0;
  color: var(--navy);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}

.cookie-copy {
  display: grid;
  gap: 0.45rem;
  max-width: 760px;
}

.cookie-copy p,
.cookie-preferences__intro,
.cookie-category p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.65;
}

.cookie-policy-link,
.footer-legal-links a {
  color: var(--accent);
  font-size: 0.7rem;
  text-underline-offset: 3px;
}

.cookie-policy-link {
  display: inline-block;
  margin-top: 0.75rem;
}

.footer-legal-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-legal-links a {
  color: var(--muted);
  text-decoration: none;
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: var(--accent);
}

.cookie-actions {
  align-self: end;
  display: grid;
  gap: 0.6rem;
  min-width: 178px;
}

.cookie-action {
  min-height: 42px;
  padding: 0.65rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, transform 0.18s;
}

.cookie-action--primary,
.cookie-action:hover {
  color: #fff;
  background: var(--accent);
}

.cookie-action:hover {
  transform: translateY(-1px);
}

.cookie-action:focus-visible,
.cookie-close:focus-visible,
.cookie-switch input:focus-visible + span,
.cookie-policy-link:focus-visible,
.footer-legal-links a:focus-visible {
  outline: 3px solid rgba(30, 111, 217, 0.25);
  outline-offset: 3px;
}

.cookie-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.cookie-close:hover {
  color: var(--accent);
  border-color: var(--border);
}

.cookie-preferences {
  position: fixed;
  inset: 0;
  display: grid;
  padding: 1rem;
  overflow-y: auto;
  place-items: center;
  background: rgba(10, 22, 40, 0.52);
  backdrop-filter: blur(4px);
  z-index: 11001;
}

.cookie-preferences__card {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 2rem);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 22px 70px rgba(10, 22, 40, 0.3);
}

.cookie-category {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--border);
}

.cookie-category h3 {
  margin: 0 0 0.35rem;
  color: var(--navy);
  font-size: 0.95rem;
}

.cookie-switch {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  cursor: pointer;
}

.cookie-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.cookie-switch input + span {
  position: relative;
  display: block;
  width: 46px;
  height: 25px;
  background: #c8d1dc;
  border-radius: 999px;
  transition: background 0.18s;
}

.cookie-switch input + span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(10, 22, 40, 0.22);
  content: '';
  transition: transform 0.18s;
}

.cookie-switch input:checked + span {
  background: var(--accent);
}

.cookie-switch input:checked + span::after {
  transform: translateX(21px);
}

.cookie-switch--locked {
  color: var(--muted);
  cursor: default;
  font: 0.62rem var(--font-mono);
  text-transform: uppercase;
}

.cookie-personalization-note {
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  color: var(--muted);
  background: rgba(30, 111, 217, 0.07);
  border-left: 3px solid var(--accent);
  font-size: 0.72rem;
}

.cookie-actions--preferences {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

body.cookie-preferences-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .cookie-banner {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .cookie-actions {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .cookie-actions--preferences {
    grid-template-columns: 1fr;
  }

  .cookie-category {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner,
  .cookie-action,
  .cookie-switch input + span,
  .cookie-switch input + span::after {
    animation: none;
    transition: none;
  }
}

/* =============================================================================
   PROGETTO DETTAGLIO — CSS AGGIUNTIVO
   =============================================================================
   Aggiungere a public/css/main.css
   ============================================================================= */


/* ─── Hero grid: info + logo ─── */

.progetto-hero-grid {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
}

.progetto-hero-info {
  flex: 1;
  min-width: 0;
}

.progetto-hero-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1rem;
}

.progetto-hero-logo img {
  border-radius: 1.2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  .progetto-hero-grid {
    flex-direction: column-reverse;
    gap: 1.5rem;
    align-items: flex-start;
  }

  .progetto-hero-logo img {
    width: 80px;
    height: 80px;
  }
}


/* ─── Stato badge ─── */

.stato-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 100px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.stato-live {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.stato-dev {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.dot-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  animation: pulse-dot 2s ease-in-out infinite;
}

.dot-dev {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F59E0B;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}


/* ─── Bottone disabilitato ─── */

.btn-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}


/* ─── FAQ Accordion (details/summary nativo) ─── */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-item {
  border-bottom: 1px solid var(--border, rgba(0, 30, 60, 0.08));
}

.faq-item:first-child {
  border-top: 1px solid var(--border, rgba(0, 30, 60, 0.08));
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 0;
  font-family: 'Syne', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary, #0a1628);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.2s ease;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: '+';
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--accent, #0ea5e9);
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform 0.25s ease;
}

.faq-item[open] .faq-question::after {
  content: '−';
  transform: rotate(0deg);
}

.faq-item[open] .faq-question {
  color: var(--accent, #0ea5e9);
}

.faq-answer {
  padding: 0 0 1.2rem 0;
}

.faq-answer p {
  font-size: 0.84rem;
  line-height: 1.85;
  color: var(--text-muted, #5a6a7a);
  margin: 0;
}


/* ─── Screenshot Gallery ─── */

.screenshot-gallery {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
  scrollbar-width: thin;
}

.screenshot-item {
  flex-shrink: 0;
  scroll-snap-align: start;
}

.screenshot-item img {
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  display: block;
  height: auto;
  max-height: 480px;
  width: auto;
}

@media (max-width: 768px) {
  .screenshot-item img {
    max-height: 360px;
  }
}


/* ─── Progetto hero meta ─── */

.progetto-hero-meta {
  margin-top: 1.2rem;
}

.progetto-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}


body>main>.page-hero-section {
  padding-top: 90px;
}

.solution-preview-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f1f5f9;
}

.solution-preview-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Sito Web Essenziale: catalogo e configurazione */
.swe-filters { display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:2rem; }
.swe-filter { border:1px solid var(--border); background:var(--white); color:var(--text); border-radius:999px; padding:.45rem .8rem; font-size:.72rem; cursor:pointer; }
.swe-filter.is-active, .swe-filter:hover { border-color:var(--accent); color:var(--accent); }
.swe-theme-preview { display:block; width:100%; aspect-ratio:16 / 10; object-fit:cover; border-radius:5px; border:1px solid var(--border); }
.swe-theme-for { font-size:.7rem!important; color:var(--muted); margin-top:auto; }
.swe-wizard-wrap { max-width:900px; }
.swe-progress { margin:2rem 0; font-size:.72rem; color:var(--muted); }
.swe-progress>div { height:6px; background:var(--border); border-radius:99px; margin-top:.55rem; overflow:hidden; }.swe-progress i { display:block; height:100%; width:14%; background:var(--accent); transition:width .2s; }
.swe-step { display:none; border:1px solid var(--border); background:var(--white); padding:clamp(1.2rem,3vw,2rem); border-radius:8px; }.swe-step.is-active { display:block; }.swe-step legend { font-size:1.15rem; font-weight:700; padding:0 .4rem; }.swe-step label { display:flex; flex-direction:column; gap:.35rem; margin:.8rem 0; font-size:.74rem; color:var(--muted); }.swe-step input,.swe-step select,.swe-step textarea { width:100%; border:1px solid var(--border); border-radius:4px; min-height:42px; padding:.65rem; font:inherit; color:var(--text); }.swe-step textarea { min-height:120px; }.swe-step .swe-check { flex-direction:row; align-items:flex-start; color:var(--text); }.swe-step .swe-check input { width:auto; min-height:auto; margin-top:.25rem; }.swe-actions { display:flex; justify-content:space-between; gap:1rem; margin-top:1.5rem; }.swe-notice { padding:1rem; background:var(--surface); border-left:3px solid var(--accent); font-size:.78rem; }
.swe-services-list { display:grid; gap:1.2rem; }
.swe-service-card { padding:clamp(1.1rem,2.5vw,1.5rem); border:1px solid var(--border); border-radius:9px; background:var(--surface); }
.swe-service-card__header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.15rem; padding-bottom:.85rem; border-bottom:1px solid var(--border); }
.swe-service-card__header h4 { margin:0; font-size:1rem; }
.swe-service-controls { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.4rem; }
.swe-service-controls[hidden] { display:none; }
.swe-service-controls button { min-height:34px; padding:.35rem .65rem; border:1px solid var(--border); border-radius:4px; background:var(--white); color:var(--text); font:inherit; font-size:.7rem; cursor:pointer; }
.swe-service-controls button:hover,.swe-service-controls button:focus-visible { border-color:var(--accent); color:var(--accent); }
.swe-service-controls button:disabled { opacity:.4; cursor:not-allowed; }
.swe-service-controls .swe-service-delete:not(:disabled) { color:#b42318; }
.swe-service-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; }
.swe-service-field { display:grid; min-width:0; gap:.42rem; }
.swe-service-field[hidden] { display:none; }
.swe-service-field--wide { grid-column:1 / -1; }
.swe-service-field>label { display:flex; align-items:baseline; gap:.35rem; margin:0; color:var(--text); font-size:.73rem; font-weight:700; }
.swe-service-field>label span { color:var(--muted); font-weight:400; }
.swe-service-field>input,.swe-service-field>textarea { box-sizing:border-box; width:100%; min-height:44px; padding:.7rem .75rem; border:1px solid var(--border); border-radius:5px; background:var(--white); color:var(--text); font:inherit; }
.swe-service-field>textarea { min-height:110px; resize:vertical; }
.swe-service-field>input:focus,.swe-service-field>textarea:focus { outline:3px solid rgba(30,111,217,.1); border-color:var(--accent); }
.swe-service-field[data-price-wrap] { align-content:start; max-width:360px; }
.swe-price-input { display:flex; align-items:stretch; }
.swe-price-input span { display:grid; place-items:center; min-width:42px; border:1px solid var(--border); border-right:0; border-radius:4px 0 0 4px; background:var(--white); color:var(--muted); }
.swe-price-input input { box-sizing:border-box; width:100%; min-width:0; min-height:44px; padding:.7rem .75rem; border:1px solid var(--border); border-radius:0 4px 4px 0; background:var(--white); color:var(--text); font:inherit; }
.swe-price-input input:focus { position:relative; outline:3px solid rgba(30,111,217,.1); border-color:var(--accent); }
.swe-service-field [aria-invalid="true"] { border-color:#b42318; box-shadow:0 0 0 2px rgba(180,35,24,.08); }
.swe-field-error,.swe-field-warning { margin:.35rem 0 0; font-size:.7rem; line-height:1.45; }
.swe-field-error { color:#b42318; }
.swe-field-warning { color:#8a5b00; }
.swe-service-add { display:inline-flex; align-items:center; justify-content:center; margin-top:1rem; }
.swe-materials-input { position:absolute!important; width:1px!important; height:1px!important; min-height:0!important; padding:0!important; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0!important; }
.swe-materials-dropzone { display:flex; min-height:150px; padding:1.4rem; border:2px dashed var(--border); border-radius:7px; background:var(--surface); align-items:center; justify-content:center; flex-direction:column; gap:.35rem; text-align:center; cursor:pointer; transition:border-color .2s,background-color .2s; }
.swe-materials-dropzone:hover,.swe-materials-dropzone:focus-visible { border-color:var(--accent); background:var(--white); outline:none; box-shadow:0 0 0 3px rgba(30,111,217,.1); }
.swe-materials-dropzone.is-dragover { border-color:var(--accent); border-style:solid; background:rgba(30,111,217,.1); box-shadow:0 0 0 4px rgba(30,111,217,.16); outline:none; }
.swe-materials-dropzone.is-dragover strong { color:var(--accent); }
.swe-materials-dropzone span { color:var(--muted); font-size:.75rem; }
.swe-materials-status { min-height:1.3rem; margin:.65rem 0; color:var(--muted); font-size:.75rem; }
.swe-materials-status.is-error { color:#b42318; }
.swe-material-empty { padding:1rem!important; color:var(--muted); font-size:.75rem; text-align:center; }
.swe-summary-card { min-width:0; padding:1rem; border:1px solid var(--border); border-radius:7px; background:var(--surface); }
.swe-summary-data { display:grid; gap:.6rem; margin:.8rem 0 0; }
.swe-summary-data div { display:grid; grid-template-columns:minmax(100px,.45fr) minmax(0,1fr); gap:.75rem; }
.swe-summary-data dt { color:var(--muted); font-size:.68rem; }
.swe-summary-data dd { margin:0; overflow-wrap:anywhere; font-size:.75rem; }
@media(max-width:600px) { .swe-service-card__header { align-items:flex-start; flex-direction:column; }.swe-service-controls { width:100%; justify-content:flex-start; }.swe-service-grid { grid-template-columns:1fr; }.swe-service-field--wide { grid-column:auto; }.swe-service-field[data-price-wrap] { max-width:none; } }
@media(max-width:700px) { .swe-summary-data div { grid-template-columns:1fr; gap:.2rem; } }

/* Sito Web Essenziale: area cliente persistente */
.swe-client-area { min-height:70vh; background:linear-gradient(180deg,var(--surface),var(--white) 32%); }
.swe-client-shell { max-width:1080px; }
.swe-client-header { display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid var(--border); }
.swe-client-header h1 { margin:.15rem 0 .45rem; }
.swe-client-header p { max-width:720px; margin:0; }
.swe-client-status { flex:none; padding:.5rem .75rem; border:1px solid rgba(30,111,217,.3); border-radius:999px; background:rgba(30,111,217,.06); color:var(--accent); font-size:.7rem; font-weight:700; }
.swe-client-state { display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.35rem; align-items:flex-start; padding:clamp(1.5rem,4vw,2.6rem); border:1px solid var(--border); border-radius:12px; background:var(--white); box-shadow:0 20px 55px rgba(15,35,55,.07); }
.swe-client-state.is-negative { border-color:rgba(180,35,24,.22); }
.swe-client-state__icon { display:grid; width:54px; height:54px; place-items:center; border-radius:50%; background:rgba(30,111,217,.1); color:var(--accent); font-weight:800; }
.swe-client-state__icon.is-success { background:rgba(25,135,84,.11); color:#167044; }
.swe-client-state h2 { margin:.3rem 0 .7rem; }
.swe-client-state p { max-width:760px; color:var(--muted); line-height:1.75; }
.swe-client-state .btn-lad-primary { display:inline-flex; margin-top:.8rem; }
.swe-client-warning { padding:.8rem 1rem; border-left:3px solid #c58b00; background:rgba(197,139,0,.08); color:#725000!important; }
.swe-client-quote { padding:clamp(1.35rem,4vw,2.4rem); border:1px solid var(--border); border-radius:12px; background:var(--white); box-shadow:0 20px 55px rgba(15,35,55,.07); }
.swe-client-quote h2 { margin:.35rem 0 1.35rem; }
.swe-client-quote__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.swe-client-quote__grid>div { display:grid; gap:.35rem; padding:1rem; border:1px solid var(--border); border-radius:7px; background:var(--surface); }
.swe-client-quote__grid span { color:var(--muted); font-size:.68rem; }
.swe-client-quote__grid strong { font-size:1.15rem; }
.swe-client-quote__grid .is-total { border-color:rgba(30,111,217,.3); background:rgba(30,111,217,.06); }
.swe-client-quote__notes { margin-top:1rem; padding:1rem; border-left:3px solid var(--accent); background:var(--surface); }
.swe-client-quote__notes h3 { margin:0 0 .45rem; font-size:.85rem; }
.swe-client-quote__notes p { margin:0; color:var(--muted); font-size:.78rem; line-height:1.7; }
.swe-client-quote__items { display:grid; border-top:1px solid var(--border); }
.swe-client-quote__item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.2rem; align-items:start; padding:1rem 0; border-bottom:1px solid var(--border); }
.swe-client-quote__item>div:last-child { min-width:130px; text-align:right; }
.swe-client-quote__item strong,.swe-client-quote__item small { display:block; }
.swe-client-quote__item p { margin:.35rem 0 0; color:var(--muted); font-size:.76rem; line-height:1.6; }
.swe-client-quote__item small { margin-bottom:.3rem; color:var(--muted); font-size:.68rem; }
.swe-client-quote__total { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; padding:1rem; border:1px solid rgba(30,111,217,.3); border-radius:7px; background:rgba(30,111,217,.06); }
.swe-client-quote__total span { color:var(--muted); font-size:.76rem; }
.swe-client-quote__total strong { font-size:1.3rem; }
.swe-client-decision { margin-top:1.35rem; padding-top:1.2rem; border-top:1px solid var(--border); }
.swe-client-decision>p { color:var(--muted); font-size:.76rem; }
.swe-client-decision__actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.9rem; }
.swe-client-reject { margin-top:1rem; padding:1rem; border:1px solid rgba(180,35,24,.22); border-radius:7px; background:rgba(180,35,24,.035); }
.swe-client-reject label { display:block; margin-bottom:.45rem; font-size:.75rem; font-weight:700; }
.swe-client-reject label span { color:var(--muted); font-weight:400; }
.swe-client-reject textarea { width:100%; padding:.7rem; border:1px solid var(--border); border-radius:4px; color:var(--text); font:inherit; resize:vertical; }
.swe-client-message { min-height:1.2rem; margin:.75rem 0 0!important; color:var(--accent)!important; }
.swe-client-message.is-error { color:#b42318!important; }
.swe-acquisition-workspace { border:1px solid var(--border); border-radius:12px; background:var(--white); box-shadow:0 20px 55px rgba(15,35,55,.07); overflow:hidden; }
.swe-acquisition-workspace__head { display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; padding:clamp(1.25rem,3vw,2rem); }
.swe-acquisition-workspace__head h2 { margin:.35rem 0 .45rem; }
.swe-acquisition-workspace__head p { max-width:720px; margin:0; color:var(--muted); font-size:.78rem; line-height:1.65; }
.swe-acquisition-workspace__head>span { flex:none; padding:.4rem .65rem; border-radius:999px; background:var(--surface); color:var(--muted); font-size:.66rem; }
.swe-acquisition-tabs { display:flex; padding:0 clamp(1.25rem,3vw,2rem); border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface); overflow-x:auto; }
.swe-acquisition-tabs button { flex:none; padding:1rem .9rem; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font:inherit; font-size:.74rem; cursor:pointer; }
.swe-acquisition-tabs button:hover,.swe-acquisition-tabs button[aria-selected="true"] { color:var(--accent); }
.swe-acquisition-tabs button[aria-selected="true"] { border-color:var(--accent); font-weight:700; }
.swe-acquisition-tabs button span { display:inline-grid; min-width:20px; height:20px; margin-left:.25rem; padding:0 .3rem; place-items:center; border-radius:999px; background:var(--white); font-size:.62rem; }
.swe-acquisition-panel { padding:clamp(1.25rem,3vw,2rem); }
.swe-acquisition-panel[hidden] { display:none; }
.swe-panel-intro { margin-bottom:1.2rem; }
.swe-panel-intro h3 { margin:0 0 .35rem; }
.swe-panel-intro p { margin:0; color:var(--muted); font-size:.76rem; line-height:1.65; }
.swe-field { display:grid; gap:.42rem; margin-bottom:1.1rem; }
.swe-field label { font-size:.73rem; font-weight:700; }
.swe-field label span { color:var(--muted); font-weight:400; }
.swe-field label strong { color:#b42318; }
.swe-field input,.swe-field textarea { width:100%; min-height:44px; padding:.7rem .75rem; border:1px solid var(--border); border-radius:5px; background:var(--white); color:var(--text); font:inherit; }
.swe-field textarea { resize:vertical; }
.swe-field input:focus,.swe-field textarea:focus { outline:3px solid rgba(30,111,217,.1); border-color:var(--accent); }
.swe-price-choice { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin:0; padding:0; border:0; }
.swe-price-choice legend { grid-column:1 / -1; width:100%; margin:0 0 .15rem; padding:0; color:var(--text); font-size:.73rem; font-weight:700; }
.swe-price-choice label { position:relative; display:block; min-width:0; margin:0; }
.swe-price-choice input { position:absolute; opacity:0; pointer-events:none; }
.swe-price-choice span { display:grid; min-height:78px; padding:.8rem .9rem; border:1px solid var(--border); border-radius:6px; background:var(--white); color:var(--muted); align-content:center; gap:.22rem; cursor:pointer; }
.swe-price-choice strong,.swe-price-choice small { display:block; }
.swe-price-choice strong { color:var(--text); font-size:.78rem; }
.swe-price-choice small { font-size:.67rem; line-height:1.45; }
.swe-price-choice input:checked+span { border-color:var(--accent); background:rgba(30,111,217,.07); color:var(--accent); }
.swe-price-choice input:checked+span strong { color:var(--accent); }
.swe-price-choice input:focus-visible+span { outline:3px solid rgba(30,111,217,.13); }
@media(max-width:700px) { .swe-price-choice { grid-template-columns:1fr; } }
.swe-file-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.85rem; }
.swe-file-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:7px; background:var(--surface); }
.swe-file-preview { display:grid; width:100%; aspect-ratio:16/10; place-items:center; overflow:hidden; border:0; border-bottom:1px solid var(--border); background:#e9eef3; color:var(--muted); cursor:pointer; }
.swe-file-preview img { width:100%; height:100%; object-fit:cover; }
.swe-file-preview span { font-size:.72rem; font-weight:700; }
.swe-file-card__body { display:grid; gap:.55rem; padding:.75rem; }
.swe-file-card__body strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; }
.swe-file-card__body small { color:var(--muted); font-size:.64rem; }
.swe-file-card__body select { width:100%; min-height:38px; padding:.45rem; border:1px solid var(--border); border-radius:4px; background:var(--white); color:var(--text); font:inherit; font-size:.68rem; }
.swe-file-delete { padding:.42rem .55rem; border:1px solid rgba(180,35,24,.25); border-radius:4px; background:var(--white); color:#b42318; font:inherit; font-size:.66rem; cursor:pointer; }
.swe-summary-panel { background:linear-gradient(180deg,var(--white) 0%,#f8fbff 100%); }
.swe-summary-panel .swe-panel-intro { max-width:780px; }
.swe-summary-panel .swe-panel-intro .section-label { margin-bottom:.45rem; }
.swe-review-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.swe-review-card { display:flex; min-width:0; min-height:285px; padding:1.15rem; border:1px solid var(--border); border-radius:8px; background:var(--white); flex-direction:column; box-shadow:0 12px 32px rgba(15,35,55,.05); }
.swe-review-card.is-missing { border-color:rgba(180,35,24,.28); }
.swe-review-card>header { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; padding-bottom:.8rem; border-bottom:1px solid var(--border); }
.swe-review-card>header>div { display:flex; min-width:0; align-items:center; gap:.55rem; }
.swe-review-card>header span { display:grid; width:28px; height:28px; flex:none; place-items:center; border-radius:50%; background:rgba(30,111,217,.09); color:var(--accent); font-size:.62rem; font-weight:700; }
.swe-review-card h4 { margin:0; font-size:.82rem; }
.swe-review-status { flex:none; padding:.32rem .48rem; border-radius:999px; font-size:.58rem; line-height:1; white-space:nowrap; }
.swe-review-status.is-ready { background:rgba(25,135,84,.11); color:#167044; }
.swe-review-status.is-missing { background:rgba(180,35,24,.1); color:#a21d14; }
.swe-review-status.is-optional { background:var(--surface); color:var(--muted); }
.swe-review-card__body { flex:1; padding:.9rem 0; color:var(--muted); font-size:.7rem; line-height:1.55; }
.swe-review-details { display:grid; gap:.7rem; margin:0; }
.swe-review-details div { min-width:0; }
.swe-review-details dt { margin-bottom:.15rem; color:var(--muted); font-size:.58rem; text-transform:uppercase; letter-spacing:.08em; }
.swe-review-details dd { margin:0; overflow-wrap:anywhere; color:var(--text); }
.swe-review-details em { color:#a21d14; font-style:normal; }
.swe-review-empty { color:var(--muted); }
.swe-review-card.is-missing .swe-review-empty { color:#a21d14; }
.swe-review-list { display:grid; gap:.38rem; margin:0; padding:0; list-style:none; }
.swe-review-list li { overflow:hidden; padding-left:.8rem; text-overflow:ellipsis; white-space:nowrap; }
.swe-review-list li::before { content:'›'; margin-left:-.8rem; margin-right:.4rem; color:var(--accent); }
.swe-review-total { margin:.75rem 0 0; color:var(--muted); font-size:.62rem; }
.swe-review-edit { align-self:flex-start; padding:0; border:0; border-bottom:1px solid currentColor; background:transparent; color:var(--accent); font:inherit; font-size:.66rem; cursor:pointer; }
.swe-review-edit:hover,.swe-review-edit:focus-visible { color:var(--text); outline:none; }
.swe-submit-box { display:grid; grid-template-columns:1fr; gap:1.1rem; align-items:center; margin-top:1rem; padding:clamp(1.2rem,3vw,1.7rem); border:1px solid rgba(30,111,217,.24); border-radius:9px; background:#edf5ff; }
.swe-submit-box__copy { max-width:760px; }
.swe-submit-box__copy h4 { margin:.32rem 0 .4rem; }
.swe-submit-box__copy p { margin:0; color:var(--muted); font-size:.72rem; line-height:1.65; }
.swe-submit-confirm { display:flex; grid-column:1 / -1; align-items:flex-start; gap:.7rem; padding:.85rem; border:1px solid rgba(30,111,217,.18); border-radius:6px; background:var(--white); color:var(--text); font-size:.7rem; line-height:1.5; cursor:pointer; }
.swe-submit-confirm input { width:18px; height:18px; margin:.05rem 0 0; flex:none; accent-color:var(--accent); }
.swe-submit-confirm:focus-within { outline:3px solid rgba(30,111,217,.12); }
.swe-submit-box__actions { display:flex; align-items:center; justify-content:flex-end; gap:.7rem; }
.swe-submit-button { white-space:nowrap; }
.swe-submit-button:disabled { opacity:.5; cursor:not-allowed; }
.swe-acquisition-actions { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem clamp(1.25rem,3vw,2rem); border-top:1px solid var(--border); background:var(--surface); }
.swe-acquisition-actions>p { min-height:1rem; margin:0; color:var(--muted); font-size:.7rem; }
.swe-acquisition-actions>div { display:flex; flex:none; gap:.65rem; }
.swe-acquisition-actions button[hidden] { display:none; }
.tox-tinymce { border-color:var(--border)!important; border-radius:5px!important; }
@media(max-width:980px) { .swe-review-grid { grid-template-columns:1fr; }.swe-review-card { min-height:0; } }
@media(max-width:760px) { .swe-client-header,.swe-acquisition-workspace__head,.swe-acquisition-actions { align-items:stretch; flex-direction:column; }.swe-client-status,.swe-acquisition-workspace__head>span { align-self:flex-start; }.swe-client-quote__grid,.swe-file-gallery { grid-template-columns:1fr; }.swe-acquisition-actions>div { display:grid; grid-template-columns:1fr; }.swe-acquisition-actions .btn-lad-primary,.swe-acquisition-actions .btn-lad-ghost,.swe-submit-box__actions .btn-lad-primary,.swe-submit-box__actions .btn-lad-ghost { width:100%; }.swe-submit-box__actions { align-items:stretch; flex-direction:column; }.swe-client-state { grid-template-columns:1fr; }.swe-client-state__icon { width:46px; height:46px; } }
@media(max-width:520px) { .swe-client-decision__actions { align-items:stretch; flex-direction:column; }.swe-client-decision__actions .btn-lad-primary,.swe-client-decision__actions .btn-lad-ghost { width:100%; }.swe-acquisition-tabs { padding:0 .45rem; }.swe-acquisition-tabs button { padding:.85rem .6rem; font-size:.68rem; } }
@media(max-width:520px) { .swe-client-quote__item { grid-template-columns:1fr; }.swe-client-quote__item>div:last-child { min-width:0; text-align:left; } }
@media(prefers-reduced-motion:reduce) { .swe-materials-dropzone { transition:none; } }
.swe-modal-open { overflow:hidden; }
.swe-success-modal { position:fixed; z-index:1100; inset:0; display:grid; place-items:center; padding:1rem; }
.swe-success-modal[hidden] { display:none; }
.swe-success-modal__backdrop { position:absolute; inset:0; background:rgba(8,22,45,.72); backdrop-filter:blur(4px); }
.swe-success-modal__card { position:relative; width:min(100%,620px); max-height:calc(100vh - 2rem); overflow:auto; padding:clamp(1.75rem,4vw,2.75rem); border:1px solid rgba(41,182,246,.35); border-radius:14px; background:var(--white); box-shadow:0 24px 70px rgba(0,0,0,.28); }
.swe-success-modal__close { position:absolute; top:.9rem; right:1rem; width:36px; height:36px; border:0; border-radius:50%; background:var(--surface); color:var(--muted); font-size:1.45rem; line-height:1; cursor:pointer; }
.swe-success-modal__icon { display:grid; place-items:center; width:58px; height:58px; margin-bottom:1.25rem; border-radius:50%; background:rgba(16,185,129,.14); color:var(--success); font-size:1.65rem; font-weight:800; }
.swe-success-modal h2 { margin-bottom:.75rem; }
.swe-success-modal p { color:var(--muted); line-height:1.75; }
.swe-success-modal__steps { display:grid; gap:.85rem; margin:1.5rem 0 1.75rem; padding:0; list-style:none; counter-reset:swe-confirmation; }
.swe-success-modal__steps li { position:relative; min-height:48px; padding-left:3.35rem; counter-increment:swe-confirmation; font-size:.82rem; }
.swe-success-modal__steps li::before { content:counter(swe-confirmation); position:absolute; left:0; top:0; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--surface); color:var(--accent); font-weight:700; }
.swe-success-modal__steps span { display:block; margin-top:.2rem; color:var(--muted); font-size:.75rem; line-height:1.5; }


#app-prodotti .project-card {
    border-radius: 10px;
    padding: 0.25rem;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

#app-prodotti .project-card:hover {
    transform: translateY(-3px);
    border-color: rgba(41, 182, 246, 0.35);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

#app-prodotti .card-body {
    padding: 1.6rem;
}

#app-prodotti .project-status {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

#app-prodotti .project-icon {
    margin: 1.2rem 0 1rem;
}

#app-prodotti .project-icon img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 12px;
}

#app-prodotti .project-card h3 {
    font-size: 1.05rem;
    margin-bottom: 0.65rem;
}

#app-prodotti .project-desc {
    font-size: 0.78rem;
    line-height: 1.75;
    margin-bottom: 1rem;
}

#app-prodotti .tag-pill {
    font-size: 0.64rem;
}

#gestionali .project-card .card-body {
    padding: 1.7rem 1.8rem;
}

#gestionali .project-logo {
    display: flex;
    align-items: center;
    height: 48px;
    margin-bottom: 0.8rem;
}

#gestionali .project-logo img {
    max-width: 145px;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
}

#gestionali .project-card h3 {
    margin-bottom: 0.45rem;
}

#gestionali .project-card p {
    max-width: 620px;
    margin-bottom: 1rem;
}