/* =========================================================
   Design tokens
   ========================================================= */
:root {
  --max-w: min(1200px, 92%);

  --space-0: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm: .375rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;

  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* Light mode colors */
  --fg: #0b0b0b;
  --fg-muted: #444;
  --bg: #ffffff;
  --bg-alt: #f5f5f7;

  --primary: #aeaaff;        /* brand purple */
  --primary-strong: #5544fd; /* accent for shadows */
  --border: #e6e6ea;
  
  /* Dark mode colors */
  --fg-dark: #ffffff;
  --fg-muted-dark: #a0a0a0;
  --bg-dark: #0a0a0a;
  --bg-alt-dark: #1a1a1a;
  --border-dark: #2a2a2a;
  
  /* Theme-aware color variables */
  --text-primary: var(--fg);
  --text-secondary: var(--fg-muted);
  --background-primary: var(--bg);
  --background-secondary: var(--bg-alt);
  --border-color: var(--border);
}

/* =========================================================
   Base
   ========================================================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background-primary);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  line-height: 1.5;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode theme */
[data-theme="dark"] {
  --text-primary: var(--fg-dark);
  --text-secondary: var(--fg-muted-dark);
  --background-primary: var(--bg-dark);
  --background-secondary: var(--bg-alt-dark);
  --border-color: var(--border-dark);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;   /* centers horizontally */
}a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

h1, h2, h3 {
  margin: var(--space-6);
  line-height: 1.25;      /* consistent across */
  text-align: center;     /* proper centering */
}

/* Optionally tweak per level */
h2, h3 {
  line-height: 1.6;       /* more readable than 3.25 */
}
/* Buttons */
.btn {
  display: inline-block;
  padding: .75rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  transform: translateZ(0);
}
.btn--primary { 
  background: var(--primary); color: #fff; 
}
.btn--primary:hover { 
  filter: brightness(.95); text-decoration: none; 
  filter: brightness(1.05);  /* Slightly brighter instead of darker */
  transform: translateY(-2px); /* Gentle lift */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Soft shadow */
  text-decoration: none; 
}

/* Hero-specific larger CTA */
.hero .btn--secondary {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 3rem;
  font-size: 1.225rem;
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: 6px 6px 0 rgba(85, 68, 253, 0.25);
}

.hero .btn--secondary:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

/* =========================================================
   Header
   ========================================================= */

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;   /* space between mark and text */
  text-decoration: none;
}

.brand-logo {
  height: 48px;   /* adjust to taste */
  width: auto;
  display: block;
}

.brand-text {
  font-weight: 800;                  /* bolder for more presence */
  font-size: 1.25rem;                 /* slightly larger */
  letter-spacing: 0.02em;             /* crisp spacing */
  color: #111;                        /* keep original */
  text-shadow: 0 1px 2px rgba(0,0,0,0.06); /* subtle lift */
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

[data-theme="dark"] .site-header {
  background: rgba(10,10,10,0.85);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-3) 0;
}

.site-header__logo {
  width: 140px;           
  height: 140px;          
  background-image: url("img/logo-principal-pozitiv@4x.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link { 
  font-size: var(--text-md); 
  font-weight: 600;                   /* make nav links pop */
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.15s ease, text-shadow 0.15s ease;
}

.site-nav__link:hover {
  transform: translateY(-1px);        /* tiny lift */
  text-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.site-header__actions { 
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* =========================================================
   Hero
   ========================================================= */
.hero { padding: var(--space-12) 0 var(--space-10); }
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--background-primary) 0%, #fafaff 60%, var(--background-secondary) 130%);
  transition: background 0.3s ease;
}

[data-theme="dark"] .hero {
  background: linear-gradient(180deg, var(--background-primary) 0%, #1a1a2e 60%, var(--background-secondary) 130%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 520px;
  height: 520px;
  background: radial-gradient(45% 45% at 50% 50%, rgba(85,68,253,.16) 0%, rgba(85,68,253,0) 70%);
  filter: blur(6px);
  pointer-events: none;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr; /* text / image */
  align-items: center;
  gap: var(--space-10);
}
.hero__title {
  font-size: clamp(2.25rem, 4vw + 1rem, 4rem);
  font-weight: 800;
  max-width: 16ch;
  margin-bottom: var(--space-6);
}
.hero__subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 60ch;
}
.hero__cta {
  display: flex;
  justify-content: center;      /* centered CTA as in mock */
  margin-top: var(--space-8);
}
.hero__cta-image {
  max-width: 520px;
  width: 100%;
} 

.hero__illustration {
  width: 220px;
  height: 220px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  place-items: center;
  animation: floatY 8s cubic-bezier(.22,.61,.36,1) infinite;
  margin: 0 auto;
}
.hero__illustration .piece {
  width: 94px;
  height: 94px;
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 10%, #ffffff), color-mix(in srgb, var(--primary) 25%, #ecebff));
  box-shadow: 0 10px 20px rgba(85,68,253,.14);
  transform-origin: center;
  will-change: transform, border-radius, clip-path, box-shadow, background;
  animation: tilePulse 5.2s cubic-bezier(.22,.61,.36,1) infinite, tileMorph 9s cubic-bezier(.22,.61,.36,1) infinite;
}
.hero__illustration .piece:nth-child(1) { background: linear-gradient(145deg, var(--primary-strong), var(--primary)); animation-delay: 0s; }
.hero__illustration .piece:nth-child(2) {
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary-strong) 70%, #ffffff), var(--primary));
  animation: tilePulse 5.6s cubic-bezier(.22,.61,.36,1) infinite, tileMorph 10s cubic-bezier(.22,.61,.36,1) infinite;
}
.hero__illustration .piece:nth-child(3) {
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 45%, #ffffff), color-mix(in srgb, var(--primary-strong) 35%, #ffffff));
  clip-path: none;
  animation: tilePulse 5.8s cubic-bezier(.22,.61,.36,1) infinite, tileMorph 11s cubic-bezier(.22,.61,.36,1) infinite;
}
.hero__illustration .piece:nth-child(4) {
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 20%, #ffffff), color-mix(in srgb, var(--primary) 35%, #ffffff));
  clip-path: none;
  animation: tilePulse 6s cubic-bezier(.22,.61,.36,1) infinite, tileMorph 12s cubic-bezier(.22,.61,.36,1) infinite;
}

/* Animation keyframes */
@keyframes squareToCircle {
  0% {
    border-radius: 0 0 0 0;
    background: #5544fd;
    transform: rotate(0deg);
  }
  25% {
    border-radius: 50% 0 0 0;
    background: #aeaaff;
    transform: rotate(45deg);
  }
  50% {
    border-radius: 50% 50% 0 0;
    background: #aeaaff;
    transform: rotate(90deg);
  }
  75% {
    border-radius: 50% 50% 50% 0;
    background: #5544fd;
    transform: rotate(135deg);
  }
  100% {
    border-radius: 50% 50% 50% 50%;
    background: #aeaaff;
    transform: rotate(180deg);
  }
}

/* Tile animation for 2x2 squares */
@keyframes tilePulse {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 10px 20px rgba(85,68,253,.14); }
  25% { transform: translateY(-4px) scale(1.02) rotate(-.5deg); box-shadow: 0 14px 26px rgba(85,68,253,.20); }
  50% { transform: translateY(0) scale(1); }
  75% { transform: translateY(4px) scale(0.99) rotate(.5deg); box-shadow: 0 8px 16px rgba(85,68,253,.12); }
}

/* Shape morphing between square ↔ circle */
@keyframes tileMorph {
  0%, 100% { border-radius: 16px; }
  50% { border-radius: 999px; }
}

/* Diamond rotation + scale */
/* (no diamond/triangle/hex animations; keeping only squares and circles) */

/* Triangle polygon morph (triangle ↔ pentagon-ish ↔ triangle) */
/* removed complex clip-path morphs */

@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}



/* =========================================================
   Platform / Features band
   ========================================================= */
.platform {
  padding: var(--space-12) 0;
  background: var(--background-secondary);
  transition: background-color 0.3s ease;
}

/* Soft section dividers for structure */
.platform,
.features,
.team { box-shadow: inset 0 1px 0 rgba(0,0,0,0.04); }

/* Make the section title clearly above the grid */
.platform .section-title {
  text-align: center;
  font-size: var(--text-3xl);
  font-weight: 800;
  margin-bottom: var(--space-8); /* space between title and features */
}
.inline-logo { height: 28px; width: auto; vertical-align: middle; margin-right: .35rem; }

.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
.feature-card {
  background: var(--background-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 4px 10px rgba(0,0,0,.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}
.feature-card__icon img { width: 28px; height: 28px; }
.feature-card__title { font-size: var(--text-xl); margin-top: var(--space-2); }
.platform .feature-card__title {
  position: relative;
  padding-left: 2rem;           /* space for icon */
  text-align: left;             /* align with icon */
}
.platform .feature-card__title::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 20px; height: 20px;
  transform: translateY(-50%);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.06));
}

/* Card 1: Succeed with AI (sparkles) */
.platform .feature-card:nth-child(1) .feature-card__title::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%235544FD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v2"/><path d="M12 19v2"/><path d="M3 12h2"/><path d="M19 12h2"/><path d="M7.8 7.8l1.4 1.4"/><path d="M14.8 14.8l1.4 1.4"/><path d="M7.8 16.2l1.4-1.4"/><path d="M14.8 9.2l1.4-1.4"/><path d="M12 8l2 4-4 2 2-6z"/></svg>');
}

/* Card 2: Democratize insights (search) */
.platform .feature-card:nth-child(2) .feature-card__title::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%235544FD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>');
}

/* Card 3: Drive down costs (trending-down) */
.platform .feature-card:nth-child(3) .feature-card__title::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%235544FD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 16-6-6-4 4-6-6"/><path d="M21 10v6h-6"/></svg>');
}
.feature-card__text {
  color: var(--text-secondary);
  max-width: 38ch;        /* keeps good readability */
  margin-inline: auto;    /* centers the block itself */
  text-align: center;     /* centers the text inside */
}
/* =========================================================
   Products
   ========================================================= */
.products { padding: var(--space-12) 0; }
.section-title {
  font-weight: 800;
  position: relative;
}
.section-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: var(--space-2) auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-strong), color-mix(in srgb, var(--primary) 45%, white));
}
.platform .section-title { margin: 0 0 var(--space-8); }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-muted);
  font-size: var(--text-lg);
  text-align: center;
  margin-bottom: var(--space-2);
}
.products .section-title {
  max-width: 32ch;
  margin: 0 auto var(--space-8);
}
/* Pill Buttons */
.pill {
  padding: 0.8rem 1.50rem;
  border-radius: 999px;   /* full pill shape */
  border: 1px solid var(--border, #e6e8ef);
  background: linear-gradient(145deg, #fff, #f9f9fb);
  font-weight: 600;
  font-size: 0.95rem;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* Pill Tabs wrapper */
.pill-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;         /* wrap on smaller screens */
  gap: 1.25rem;            /* increase spacing between pills */
  margin: 1rem auto 2rem;  /* top & bottom breathing room */
}


/* Hover: slight lift with glow */
.pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(85,68,253,0.15);
  border-color: var(--primary, #5544FD);
  color: var(--primary, #5544FD);
}
.pill:focus-visible:not(.is-active) {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, #ffffff);
}

/* Accessible focus for buttons */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, #ffffff);
}



/* Active/selected state */
.pill.is-active,
.pill:focus-visible {
  outline: none;
  border-color: var(--primary, #5544FD);
  background: var(--primary, #5544FD);
  color: #fff;
  box-shadow: 0 4px 12px rgba(85,68,253,0.25);
}

/* Active pressed down */
.pill:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 6px rgba(85,68,253,0.25);
}

/* Product row */
.product-card {
  display: grid;
  grid-template-columns: 1.1fr .9fr; /* text left, image right */
  gap: var(--space-8);
  align-items: center;
}
.product-card__title { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.product-card__text { color: var(--fg-muted); font-size: var(--text-md); max-width: 70ch; }
.product-card__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.product-figure {
  max-width: 860px;
  margin: var(--space-6) auto 0;
}
.product-figure img {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* ===== Team section ===== */
.team {
  padding: var(--space-12) 0;
  background: var(--background-primary);
  transition: background-color 0.3s ease;
}

.team .section-title {
  text-align: center;
  margin-bottom: var(--space-8);
}

/* Grid that stays centered and wraps cleanly */
.team__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: min(100%, var(--max-w));     /* matches your container width */
  margin-inline: auto;                     /* center the grid itself */
  place-items: stretch center;             /* center cards within tracks */
}

/* Each item just provides the track; no fixed width needed */
.team__member {
  display: contents; /* let the card fill the grid cell */
}

/* Card */
.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  background: linear-gradient(180deg, var(--background-primary), var(--background-secondary));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  min-height: 16rem;                       /* consistent presence, not rigid */
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background 0.3s ease;
  will-change: transform;
}

.team-card:hover,
.team-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.12);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}

/* Avatar */
.team-card__avatar img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-alt);
  padding: 2px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--border);     /* subtle ring */
}

/* Typography hierarchy */
.team-card__name {
  font-size: clamp(1.05rem, 1vw + .9rem, 1.25rem);
  font-weight: 800;
  letter-spacing: .1px;
}

.team-card__role {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 30ch;                         /* keeps copy readable */
  display: -webkit-box;
  -webkit-line-clamp: 6;                   /* optional: prevent overly tall cards */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* add standard property for linter hint */
.team-card__role { line-clamp: 6; }

/* Spacing rhythm on larger screens */
@media (min-width: 1280px) {
  .team__list { gap: var(--space-6); }
  .team-card { padding: var(--space-6) var(--space-5); }
}

/* Narrow screens: slightly larger avatars and softer elevation */
@media (max-width: 640px) {
  .team-card__avatar img { width: 64px; height: 64px; }
  .team-card { box-shadow: 0 3px 8px rgba(0,0,0,.06); }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer { 
  border-top: 1px solid var(--border-color); 
  background: var(--background-primary);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.site-footer__inner { padding: var(--space-8) 0; }
.site-footer__copy { color: var(--text-secondary); font-size: var(--text-sm); margin: 0; }

/* Invisible anchors to offset sticky header */
.anchor-only { height: 1px; width: 1px; position: relative; top: -80px; visibility: hidden; }

/* Extend grey background from Platform to end of page and prevent white gaps */
.platform,
.platform ~ section {
  background: var(--bg-alt);
  display: flow-root; /* prevent margin-collapsing gaps between sections */
}
.platform ~ footer.site-footer {
  background: var(--bg-alt);
  border-top: none; /* remove contrasting line */
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .hero__inner,
  .product-card { grid-template-columns: 1fr; }
  .features__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .team__list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .hero__cta { justify-content: flex-start; }
}

@media (max-width: 680px) {
  .site-header__inner { flex-wrap: wrap; row-gap: var(--space-3); }
  .site-nav__list { flex-wrap: wrap; justify-content: center; width: 100%; order: 3; gap: var(--space-4); }
  .site-header__actions { order: 2; }
  .site-header__brand { order: 1; }
  .hero { padding-top: var(--space-10); }
}

/* Base button styles remain the same, add animation props */
.btn {
  display: inline-block;
  padding: .75rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;   /* smooth animation */
  transform: translateZ(0);    /* enable GPU accel */
  position: relative;          /* for effects */
  overflow: hidden;            /* clip shines/ripples */
}

/* Secondary (purple) button */
.btn--secondary {
  background: var(--primary);
  color: #fff;
  box-shadow: 6px 6px 0 rgba(85, 68, 253, 0.25);  /* bottom-right shadow */
  background-image: linear-gradient(135deg, var(--primary-strong), var(--primary));
  background-size: 200% 200%;
  transition: background-position .45s ease, transform .2s ease, box-shadow .2s ease;
}

/* Hover: lift slightly */
.btn--secondary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 8px 8px 12px rgba(85, 68, 253, 0.35);
  background-position: 100% 0%;
  text-decoration: none;
}

/* Active (pressed): sink down */
.btn--secondary:active {
  transform: translateY(2px) scale(0.97);
  box-shadow: 3px 3px 6px rgba(85, 68, 253, 0.4);
}

/* CTA button subtle sheen */
.btn--cta-red {
  position: relative;
  overflow: hidden;
}
.btn--cta-red::after,
.btn--secondary::after,
.btn::after {
  content: "";
  position: absolute;
  inset: -20% -40%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  transform: translateX(-120%);
  opacity: 0;
  transition: transform .7s ease, opacity .35s ease;
  pointer-events: none;
}
.btn:hover::after,
.btn--secondary:hover::after,
.btn--cta-red:hover::after {
  transform: translateX(120%);
  opacity: .35;
}

/* Generic press feedback */
.btn:active { filter: brightness(.98); }

/* Optional center ripple without JS (subtle) */
.btn:active::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  animation: btnRipple .6s ease-out forwards;
  pointer-events: none;
}

@keyframes btnRipple {
  0% { opacity: .4; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(18); }
}

/* --- Header layout: Databricks-like compact bar --- */
.site-header--compact {
  background: #fff;
  border-bottom: 1px solid var(--border, #e6e6ea);
}
.site-header--compact .site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;  /* brand | nav | utilities */
  align-items: center;
  gap: 1rem;
  padding: .75rem 0;                      /* compact height */
}

/* Brand: logo mark cropped via background; text next to it */
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
}
.brand-mark {
  width: 28px;          /* adjust visible size */
  height: 28px;
  background-image: url("img/logo-principal-pozitiv@4x.png"); /* your file */
  background-repeat: no-repeat;
  background-size: contain;   /* ignores transparent padding in the PNG */
  background-position: center;
}
.brand-text {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .1px;
}

/* Centered primary nav */
.site-nav { justify-self: center; }
.site-nav__list {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__link {
  text-decoration: none;
  color: #111;
  font-size: 0.98rem;
}
.site-nav__link:hover { text-decoration: underline; }

/* Utilities on the right (icons + small links + CTA) */
.site-header__utilities {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: #444;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: #f1f1f4; border-color: #e6e6ea; }

.util-link {
  font-size: .95rem;
  color: #334;
  text-decoration: none;
}
.util-link:hover { text-decoration: underline; }

/* CTA in Databricks style (red) */
.btn--cta-red {
  background: #5544fd;     /* Databricks-like red */
  color: #fff;
  border-radius: .5rem;
  padding: .55rem 1rem;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.btn--cta-red:hover { filter: brightness(.95); text-decoration: none; }

/* Keep your existing purple secondary for the hero CTA */
.btn--secondary {
  background: var(--primary-strong, #5544fd);
  color: #fff;
  box-shadow: 6px 6px 0 rgba(85,68,253,.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn--secondary:hover { transform: translateY(-2px) scale(1.03); box-shadow: 8px 8px 12px rgba(85,68,253,.35); }
.btn--secondary:active { transform: translateY(2px) scale(0.97); box-shadow: 3px 3px 6px rgba(85,68,253,.4); }

/* Responsive: stack nav or collapse spacing when narrow */
@media (max-width: 980px) {
  .site-header--compact .site-header__inner {
    grid-template-columns: auto auto 1fr; /* brand | CTA | spill to right */
    gap: .5rem;
  }
  .site-nav { display: none; }            /* hide full nav; (optional: add burger later) */
  .site-header__utilities { justify-self: end; gap: .5rem; }
  .brand-text { font-size: 1rem; }
  .brand-mark { width: 26px; height: 26px; }
}

/* =========================================================
   Demo page: form + card styling (no overlap, no floating labels)
   ========================================================= */

/* ----- Brand header band + accent line ----- */
.brand-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.brand-header .brand-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
}
.brand-accent {
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 85%, white), #c0bfff 35%, #e9e8ff);
}

/* ----- Section wrapper ----- */
.request-demo {
  padding: clamp(2.5rem, 4vw, 4rem) 0;
  background: var(--bg-alt);
}

/* Decorative soft glow in the corner */
.request-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 40% at 85% 10%, color-mix(in srgb, var(--primary) 20%, transparent) 0%, transparent 60%)
    no-repeat;
  background-size: 700px 420px;
  background-position: right -120px top -120px;
}

/* ----- Card ----- */
.request-demo .card {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(1.25rem, 3.5vw, 2rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow:
    0 1px 1px rgba(0,0,0,.03),
    0 10px 30px rgba(85, 68, 253, .06);
  position: relative;
  overflow: hidden;
}

/* Subtle top accent line */
.request-demo .card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-strong), color-mix(in srgb, var(--primary) 35%, #fff));
  opacity: .8;
}

/* Title */
.request-demo .section-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  margin-bottom: var(--space-6);
}
.request-demo #demo-sub {
  text-align: center;
  color: var(--fg-muted);
  margin-top: calc(var(--space-2) * -1);
  margin-bottom: var(--space-6);
}

/* ----- Form layout ----- */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-6);
}

.form-row {
  display: grid;
  gap: var(--space-2);
}

/* Make textarea + button + status full width */
.form-row:has(textarea),
.form .btn,
#form-status {
  grid-column: 1 / -1;
}

/* Labels (static above controls to avoid overlap) */
.form label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #222;
}

/* Inputs & textarea */
.form input[type="text"],
.form input[type="email"],
.form textarea {
  appearance: none;
  width: 100%;
  padding: .9rem 1rem;            /* uniform padding (no extra top needed) */
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--fg);
  font-size: var(--text-md);
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Input icons (subtle) */
.form input#name {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%239aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>');
  background-repeat: no-repeat; background-position: .75rem 50%; background-size: 20px;
  padding-left: 2.5rem;
}
.form input#email {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%239aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>');
  background-repeat: no-repeat; background-position: .75rem 50%; background-size: 20px;
  padding-left: 2.5rem;
}
.form input#company {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%239aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21V7a2 2 0 0 1 2-2h7v16"/><path d="M13 21h8V3a2 2 0 0 0-2-2H9"/><path d="M9 7h1"/><path d="M9 11h1"/><path d="M9 15h1"/></svg>');
  background-repeat: no-repeat; background-position: .75rem 50%; background-size: 20px;
  padding-left: 2.5rem;
}
.form textarea#message {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%239aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>');
  background-repeat: no-repeat; background-position: .75rem .8rem; background-size: 20px;
  padding-left: 2.5rem;
}

/* Placeholder */
.form ::placeholder {
  color: #9aa;
}

/* Focus state (accessible) */
.form input:focus-visible,
.form textarea:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 65%, #fff);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* Hover affordance */
.form input:hover,
.form textarea:hover {
  border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}

/* Textarea sizing */
.form textarea {
  resize: vertical;
  min-height: 7rem;
}

/* Validation hints */
.form input:required:user-invalid,
.form input:required:invalid,
.form textarea:required:user-invalid,
.form textarea:required:invalid {
  border-color: #e66;
  background: #fff7f7;
}

/* Success look (you can toggle .is-success on .form if desired) */
.form.is-success input,
.form.is-success textarea {
  border-color: #4caf50;
  background: #f4fff5;
}

/* Button inside the form: brand style but sized for the card */
.request-demo .btn.btn--secondary {
  width: fit-content;
  justify-self: center;
  padding: 0.95rem 1.35rem;
  font-size: 1rem;
  border-radius: var(--radius-md);
  box-shadow: 0 6px 18px rgba(85,68,253,.25);
}
.request-demo .btn.btn--secondary#submit-btn {
  padding: 1rem 1.5rem;
}

/* Loading cue (optional: toggle aria-busy="true" on the button in JS) */
.request-demo .btn[aria-busy="true"] {
  pointer-events: none;
  opacity: .8;
}

/* Status message */
#form-status {
  margin-top: .25rem;
  font-size: var(--text-sm);
  text-align: center;
  padding: .75rem 1rem;
  border-radius: var(--radius-md);
  display: none; /* revealed by JS */
  border: 1px solid transparent;
}
.form-note {
  margin-top: .5rem;
  font-size: var(--text-xs);
  color: var(--fg-muted);
  text-align: center;
  grid-column: 1 / -1; /* span both columns so centering is visually centered */
}
#form-status.success {
  display: block;
  color: #114b22;
  background: #eaf8ee;
  border-color: #bde5c8;
}
#form-status.success::before {
  content: "";
  display: inline-block;
  width: 16px; height: 16px;
  margin-right: .5rem;
  vertical-align: -2px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23114b22" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
  background-size: contain; background-repeat: no-repeat;
}
#form-status.error {
  display: block;
  color: #6b1111;
  background: #fdeeee;
  border-color: #f3c9c9;
}
#form-status.error::before {
  content: "";
  display: inline-block;
  width: 16px; height: 16px;
  margin-right: .5rem;
  vertical-align: -2px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%236b1111" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v5"/><path d="M12 16h.01"/></svg>');
  background-size: contain; background-repeat: no-repeat;
}

/* Fine-tune the brand link in header on this page */
.brand-header .site-header__brand .brand-text {
  color: #111;
}

/* Footer spacing harmony on this page */
.site-footer {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ---------- Responsive adjustments ---------- */
@media (max-width: 720px) {
  .form {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .request-demo .card {
    padding: clamp(1rem, 4vw, 1.5rem);
  }
  .form-row:has(textarea) { margin-bottom: .25rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* =========================================================
   Dark Mode Toggle Button
   ========================================================= */
.theme-toggle {
  position: relative;
  width: 50px;
  height: 24px;
  background: #e6e6ea;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .theme-toggle {
  background: #2a2a2a !important;
}

.theme-toggle:hover {
  background: #d0d0d0;
}

.theme-toggle:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}

.theme-toggle__slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .theme-toggle {
  background: #2a2a2a;
}

[data-theme="dark"] .theme-toggle:hover {
  background: #3a3a3a;
}

[data-theme="dark"] .theme-toggle__slider {
  transform: translateX(26px);
  background: #ffffff;
}


/* Dark mode specific adjustments */
[data-theme="dark"] .brand-text {
  color: var(--text-primary);
}

[data-theme="dark"] .site-nav__link {
  color: var(--text-primary);
}

[data-theme="dark"] .site-nav__link:hover {
  color: var(--primary);
}

[data-theme="dark"] .pill {
  background: linear-gradient(145deg, var(--background-secondary), var(--background-primary));
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .pill:hover {
  background: var(--primary);
  color: white;
}

[data-theme="dark"] .product-card__text {
  color: var(--text-secondary);
}

[data-theme="dark"] .product-card__media img {
  border-color: var(--border-color);
}

[data-theme="dark"] .product-figure img {
  border-color: var(--border-color);
}

/* Form dark mode styles */
[data-theme="dark"] .request-demo { 
  background: var(--background-secondary); 
}

[data-theme="dark"] .request-demo .card { 
  background: var(--background-primary); 
  border-color: var(--border-color); 
  box-shadow: 0 1px 1px rgba(0,0,0,.03), 0 10px 30px rgba(85, 68, 253, .1);
}

[data-theme="dark"] .form input[type="text"],
[data-theme="dark"] .form input[type="email"],
[data-theme="dark"] .form textarea {
  background: var(--background-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .form ::placeholder { 
  color: var(--text-secondary); 
}

[data-theme="dark"] .form input:hover,
[data-theme="dark"] .form textarea:hover { 
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border-color)); 
}

[data-theme="dark"] .form input:focus-visible,
[data-theme="dark"] .form textarea:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent);
  border-color: color-mix(in srgb, var(--primary) 65%, var(--border-color));
}

[data-theme="dark"] #form-status.success { 
  background: color-mix(in srgb, #4caf50 20%, var(--background-secondary)); 
  color: #cfead6; 
  border-color: #27452f; 
}

[data-theme="dark"] #form-status.error { 
  background: color-mix(in srgb, #f44336 20%, var(--background-secondary)); 
  color: #f3caca; 
  border-color: #532727; 
}