/* Language selector */
.language-selector{position:relative;display:inline-flex}
.language-selector__trigger{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;background:var(--surface-2);border:1px solid color-mix(in oklab,var(--brand-base),transparent 70%);border-radius:var(--radius-1);color:var(--fg);font-size:14px;font-weight:500;cursor:pointer;transition:all 233ms cubic-bezier(.2,.8,.2,1)}
.language-selector__trigger:hover{background:var(--surface-3);border-color:var(--brand-base)}
.language-selector__trigger[aria-expanded="true"]{background:var(--surface-3);border-color:var(--brand-base)}
.language-selector__icon{font-size:18px;line-height:1}
.language-selector__current{text-transform:uppercase;letter-spacing:0.5px}
.language-selector__dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface-2);border:1px solid color-mix(in oklab,var(--brand-base),transparent 70%);border-radius:var(--radius-2);box-shadow:var(--shadow-lg);min-width:200px;z-index:100;animation:languageDropdownFadeIn 233ms cubic-bezier(.2,.8,.2,1);backdrop-filter:blur(8px)}
.language-selector__dropdown[hidden]{display:none}
.language-selector__dropdown::before{content:"";position:absolute;top:-6px;right:16px;width:12px;height:12px;background:var(--surface-2);border-left:1px solid color-mix(in oklab,var(--brand-base),transparent 70%);border-top:1px solid color-mix(in oklab,var(--brand-base),transparent 70%);transform:rotate(45deg)}
.language-selector__list{padding:8px}
.language-selector__option{display:flex;align-items:center;gap:12px;width:100%;padding:10px 13px;background:transparent;border:none;border-radius:var(--radius-1);color:var(--fg);font-size:14px;font-weight:500;text-align:left;cursor:pointer;transition:all 200ms cubic-bezier(.2,.8,.2,1);text-decoration:none;position:relative;overflow:hidden}
.language-selector__option:hover{background:var(--surface-3);color:var(--fg)}
.language-selector__option.active{background:color-mix(in oklab,var(--brand-base),transparent 90%);color:var(--brand-base)}
.language-selector__option:active{transform:scale(0.98)}
.language-selector__option:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px;background:var(--surface-3)}
.language-selector__trigger:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.language-selector__option.changing{opacity:0.7;transform:scale(0.95);pointer-events:none}
.language-selector__option.changing::after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--brand-base),transparent 70%),transparent);animation:shimmer 800ms ease-in-out}

/* Language suggestion notification */
.language-suggestion{position:fixed;bottom:24px;right:24px;background:var(--surface-2);border:1px solid color-mix(in oklab,var(--brand-base),transparent 70%);border-radius:var(--radius-2);box-shadow:var(--shadow-lg);padding:0;max-width:360px;z-index:1000;transform:translateY(200px);opacity:0;transition:all 300ms cubic-bezier(.2,.8,.2,1)}
.language-suggestion.show{transform:translateY(0);opacity:1}
.language-suggestion__content{display:flex;align-items:center;gap:16px;padding:16px}
.language-suggestion__icon{font-size:32px;line-height:1}
.language-suggestion__text{flex:1}
.language-suggestion__text strong{display:block;margin-bottom:4px;color:var(--fg)}
.language-suggestion__text p{margin:0;color:var(--fg-tertiary);font-size:14px}
.language-suggestion__actions{display:flex;gap:8px;align-items:center}
.language-suggestion .btn--sm{padding:6px 12px;font-size:13px}

@media (max-width:767.98px){
  .language-suggestion{left:16px;right:16px;bottom:16px;max-width:none}
  .language-suggestion__content{gap:12px}
  .language-suggestion__icon{font-size:24px}
}
.language-selector__flag{font-size:20px;line-height:1;transition:transform 200ms cubic-bezier(.2,.8,.2,1)}
.language-selector__option:hover .language-selector__flag{transform:scale(1.1)}

@keyframes languageDropdownFadeIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes shimmer{
  0%{left:-100%}
  100%{left:100%}
}

@media (max-width:767.98px){
  .language-selector__trigger{padding:6px 10px;font-size:13px}
  .language-selector__icon{font-size:16px}
  .language-selector__dropdown{min-width:180px;right:-8px}
  .language-selector__option{padding:8px 10px;font-size:13px}
  .language-selector__flag{font-size:18px}
}

/* ===== THEME TOGGLE - Premium Pill Switch ===== */
/* Inspired by iOS toggle with Sacred Geometry proportions */

.theme-toggle {
  --toggle-width: 60px;
  --toggle-height: 32px;
  --thumb-size: 24px;
  --thumb-offset: 4px;
  --icon-size: 14px;

  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;

  /* Ensure 48x48 touch target */
  min-width: 48px;
  min-height: 48px;
  justify-content: center;
}

/* Hidden checkbox for accessibility */
.theme-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Track (the pill background) */
.theme-toggle__track {
  position: relative;
  width: var(--toggle-width);
  height: var(--toggle-height);
  border-radius: var(--radius-full);
  pointer-events: none; /* Allow clicks to pass through to checkbox */

  /* Light mode: warm gradient */
  background: linear-gradient(
    135deg,
    var(--sand-200) 0%,
    var(--sand-300) 50%,
    var(--sand-400) 100%
  );

  /* Border with subtle glow */
  border: var(--border-2) solid color-mix(in oklab, var(--sand-500), transparent 40%);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.05);

  /* Smooth transitions */
  transition:
    background var(--duration-base) cubic-bezier(0.4, 0, 0.2, 1),
    border-color var(--duration-base) cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow var(--duration-base) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Thumb (the sliding circle) */
.theme-toggle__thumb {
  position: absolute;
  top: var(--thumb-offset);
  left: var(--thumb-offset);
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;

  /* Sun-like appearance for light mode */
  background: linear-gradient(
    145deg,
    var(--sand-100) 0%,
    var(--sand-300) 100%
  );

  /* Depth and glow */
  box-shadow:
    0 2px 8px rgba(193, 143, 74, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* Bounce animation on slide */
  transition:
    transform var(--duration-base) cubic-bezier(0.34, 1.56, 0.64, 1),
    background var(--duration-base) cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow var(--duration-base) cubic-bezier(0.4, 0, 0.2, 1),
    left var(--duration-base) cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Icons container */
.theme-toggle__icons {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  pointer-events: none;
}

/* Sun icon */
.theme-toggle__sun {
  font-size: var(--icon-size);
  line-height: 1;
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition:
    opacity var(--duration-base) ease,
    transform var(--duration-base) cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 1px 2px rgba(193, 143, 74, 0.5));
}

/* Moon icon */
.theme-toggle__moon {
  font-size: var(--icon-size);
  line-height: 1;
  opacity: 0.4;
  transform: scale(0.8) rotate(-20deg);
  transition:
    opacity var(--duration-base) ease,
    transform var(--duration-base) cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== DARK MODE (checked state) ===== */
.theme-toggle__input:checked + .theme-toggle__track {
  /* Night sky gradient */
  background: linear-gradient(
    135deg,
    var(--jungle-900) 0%,
    var(--jungle-800) 50%,
    color-mix(in oklab, var(--jungle-700), var(--orchid-600) 15%) 100%
  );

  border-color: var(--jungle-600);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 0 12px color-mix(in oklab, var(--orchid-500), transparent 80%);
}

.theme-toggle__input:checked + .theme-toggle__track .theme-toggle__thumb {
  /* Slide to right */
  left: calc(100% - var(--thumb-size) - var(--thumb-offset));

  /* Moon-like appearance */
  background: linear-gradient(
    145deg,
    var(--jungle-100) 0%,
    var(--jungle-300) 100%
  );

  /* Moonlight glow */
  box-shadow:
    0 2px 8px color-mix(in oklab, var(--jungle-200), transparent 40%),
    0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 16px color-mix(in oklab, var(--jungle-300), transparent 70%);
}

/* Icons state when checked */
.theme-toggle__input:checked + .theme-toggle__track .theme-toggle__sun {
  opacity: 0.3;
  transform: scale(0.8) rotate(20deg);
}

.theme-toggle__input:checked + .theme-toggle__track .theme-toggle__moon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  filter: drop-shadow(0 1px 3px color-mix(in oklab, var(--jungle-200), transparent 50%));
}

/* ===== HOVER STATES ===== */
.theme-toggle:hover .theme-toggle__track {
  border-color: var(--sand-500);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 0 0 3px color-mix(in oklab, var(--sand-500), transparent 85%);
}

.theme-toggle:hover .theme-toggle__thumb {
  transform: scale(1.08);
}

.theme-toggle:hover .theme-toggle__input:checked + .theme-toggle__track {
  border-color: var(--jungle-400);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 0 0 3px color-mix(in oklab, var(--orchid-500), transparent 85%),
    0 0 16px color-mix(in oklab, var(--orchid-500), transparent 75%);
}

/* ===== ACTIVE STATE (pressing) ===== */
.theme-toggle:active .theme-toggle__thumb {
  transform: scale(0.92);
  transition-duration: var(--duration-fast);
}

/* ===== FOCUS STATE (keyboard navigation) ===== */
.theme-toggle__input:focus-visible + .theme-toggle__track {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ===== LABEL (optional text beside toggle) ===== */
.theme-toggle__label {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  cursor: pointer;
  user-select: none;
  margin-left: var(--space-2);
  transition: color var(--duration-fast) ease;
}

.theme-toggle:hover .theme-toggle__label {
  color: var(--fg);
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle__track,
  .theme-toggle__thumb,
  .theme-toggle__sun,
  .theme-toggle__moon,
  .theme-toggle__label {
    transition: none;
  }
}

/* ===== LEGACY CHECKBOX SUPPORT ===== */
/* For backwards compatibility with existing HTML structure */
.theme-toggle__checkbox {
  /* Size for touch target */
  width: 60px;
  height: 32px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;

  /* Track styling */
  background: linear-gradient(
    135deg,
    var(--sand-200) 0%,
    var(--sand-300) 50%,
    var(--sand-400) 100%
  );
  border: var(--border-2) solid color-mix(in oklab, var(--sand-500), transparent 40%);
  border-radius: var(--radius-full);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.05);

  transition:
    background var(--duration-base) cubic-bezier(0.4, 0, 0.2, 1),
    border-color var(--duration-base) cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow var(--duration-base) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Thumb for legacy checkbox */
.theme-toggle__checkbox::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;

  background: linear-gradient(
    145deg,
    var(--sand-100) 0%,
    var(--sand-300) 100%
  );
  box-shadow:
    0 2px 8px rgba(193, 143, 74, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);

  transition:
    transform var(--duration-base) cubic-bezier(0.34, 1.56, 0.64, 1),
    background var(--duration-base) ease,
    box-shadow var(--duration-base) ease,
    left var(--duration-base) cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Sun icon for legacy */
.theme-toggle__checkbox::before {
  content: "☀️";
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%) scale(1);
  font-size: 12px;
  line-height: 1;
  opacity: 1;
  transition:
    opacity var(--duration-base) ease,
    transform var(--duration-base) cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 0;
  filter: drop-shadow(0 1px 2px rgba(193, 143, 74, 0.5));
}

/* Dark mode for legacy checkbox */
.theme-toggle__checkbox:checked {
  background: linear-gradient(
    135deg,
    var(--jungle-900) 0%,
    var(--jungle-800) 50%,
    color-mix(in oklab, var(--jungle-700), var(--orchid-600) 15%) 100%
  );
  border-color: var(--jungle-600);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 0 12px color-mix(in oklab, var(--orchid-500), transparent 80%);
}

.theme-toggle__checkbox:checked::after {
  left: calc(100% - 26px);
  background: linear-gradient(
    145deg,
    var(--jungle-100) 0%,
    var(--jungle-300) 100%
  );
  box-shadow:
    0 2px 8px color-mix(in oklab, var(--jungle-200), transparent 40%),
    0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 16px color-mix(in oklab, var(--jungle-300), transparent 70%);
}

.theme-toggle__checkbox:checked::before {
  content: "🌙";
  left: auto;
  right: 8px;
  transform: translateY(-50%) scale(1);
  filter: drop-shadow(0 1px 3px color-mix(in oklab, var(--jungle-200), transparent 50%));
}

/* Hover for legacy */
.theme-toggle__checkbox:hover {
  border-color: var(--sand-500);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.1),
    0 0 0 3px color-mix(in oklab, var(--sand-500), transparent 85%);
}

.theme-toggle__checkbox:hover::after {
  transform: scale(1.08);
}

.theme-toggle__checkbox:checked:hover {
  border-color: var(--jungle-400);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 0 3px color-mix(in oklab, var(--orchid-500), transparent 85%),
    0 0 16px color-mix(in oklab, var(--orchid-500), transparent 75%);
}

/* Active for legacy */
.theme-toggle__checkbox:active::after {
  transform: scale(0.92);
  transition-duration: var(--duration-fast);
}

/* Focus for legacy */
.theme-toggle__checkbox:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Reduced motion for legacy */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle__checkbox,
  .theme-toggle__checkbox::after,
  .theme-toggle__checkbox::before {
    transition: none;
  }
}

/* Chips, badges (variantes) */
.chip--outline{background:transparent;border-color:color-mix(in oklab,var(--brand-base),transparent 60%)}
.chip--glow{box-shadow:0 0 0 6px color-mix(in oklab,var(--brand-base),transparent 92%)}

/* Vector card keywords */
.vector-card__keywords{font-size:0.9rem;color:var(--brand-base);margin-top:8px;font-style:italic;opacity:0.9;font-weight:500;letter-spacing:0.01em}

/* Improved cards with better elevation */
.vector-card,
.product-card{
  transition:transform 300ms cubic-bezier(0.4,0,0.2,1),box-shadow 300ms cubic-bezier(0.4,0,0.2,1),border-color 200ms ease;
}

.vector-card:hover,
.product-card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:var(--shadow-lg);
  border-color:color-mix(in oklab,var(--brand-base),transparent 50%);
}

.vector-card:active,
.product-card:active{
  transform:translateY(-2px) scale(1.005);
  transition-duration:100ms;
}

/* Cards showcase extras */
.product-card__badge{align-self:flex-start}
.product-card__variants{display:flex;gap:8px;flex-wrap:wrap}
.product-card__variants .chip{height:34px;padding:0 13px}
.product-card__meta{display:flex;justify-content:space-between;align-items:center;color:var(--fg-tertiary)}
.product-card__image{background:linear-gradient(135deg,var(--brand-base) 0%,color-mix(in oklab,var(--brand-base),white 30%) 100%);border-radius:var(--radius-2);height:200px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-2);position:relative;overflow:hidden}
.product-card__image-emoji{font-size:4rem;opacity:.9;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}
.product-card__title{margin:0 0 var(--space-1) 0}
.product-card__teaser{margin:0 0 var(--space-2) 0;color:var(--fg-tertiary)}
.product-card__price-large{font-size:1.5rem;font-weight:700}

/* Modal / toast (esqueleto) */
.modal{background:var(--surface-2);border:1px solid color-mix(in oklab,var(--brand-base),transparent 80%);border-radius:var(--radius-3);padding:21px;box-shadow:var(--shadow)}
.toast{background:var(--surface-3);border:1px solid color-mix(in oklab,var(--brand-base),transparent 80%);border-radius:var(--radius-2);padding:13px 21px;box-shadow:var(--shadow)}

/* Account + monitor */
.auth-alt{margin-top:var(--space-2);font-size:.9rem}
.auth-alt a{color:var(--brand-base);text-decoration:underline}
.auth-highlights{list-style:none;margin:var(--space-3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.auth-checkbox{margin-top:var(--space-2)}

.account-shell{padding-block:var(--space-5)}
.account-shell__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gutter)}
.account-shell__intro{padding:var(--space-4);border-radius:var(--radius-4);background:var(--surface-1);box-shadow:var(--shadow)}
.account-metrics{display:flex;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-3) 0 0;padding:0}
.account-metrics dt{font-size:.85rem;color:var(--fg-tertiary)}
.account-metrics dd{font-size:1.8rem;margin:0;font-weight:600}

.card{background:var(--surface-1);padding:var(--space-3);border-radius:var(--radius-4);border:1px solid color-mix(in oklab,var(--brand-base),transparent 85%);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:var(--space-2)}
.card--wide{grid-column:1 / -1}
.token-value{font-family:"Baloo 2","Josefin Sans",sans-serif;font-size:1.2rem;letter-spacing:.08em;background:color-mix(in oklab,var(--brand-base),transparent 90%);padding:var(--space-2);border-radius:var(--radius-3)}
.token-form{display:flex;justify-content:flex-end}
.token-hint{font-size:.9rem;color:var(--fg-tertiary);margin:var(--space-1) 0 0}
.activity-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.activity-list li{display:flex;justify-content:space-between;gap:var(--space-2);border:1px solid color-mix(in oklab,var(--brand-base),transparent 85%);border-radius:var(--radius-3);padding:var(--space-2)}
.telemetry-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-2)}
.telemetry-stream{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-2);margin-top:var(--space-3)}
.telemetry-stream article{border:1px solid color-mix(in oklab,var(--brand-base),transparent 80%);border-radius:var(--radius-3);padding:var(--space-2);background:color-mix(in oklab,var(--surface-1),transparent 0%)}
.telemetry-stream header{display:flex;justify-content:space-between;font-size:.9rem;color:var(--fg-tertiary)}

.integration-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gutter)}
.integration-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}
.integration-output{min-height:120px;background:var(--surface-2);padding:var(--space-2);border-radius:var(--radius-3);border:1px solid color-mix(in oklab,var(--brand-base),transparent 80%);overflow:auto;font-size:.85rem}

.flash-stack{position:sticky;top:var(--space-2);z-index:var(--z-1000);display:flex;flex-direction:column;gap:var(--space-2);margin:var(--space-2)}
.flash{padding:var(--space-2);border-radius:var(--radius-3);border:1px solid color-mix(in oklab,var(--brand-base),transparent 80%);background:color-mix(in oklab,var(--brand-base),transparent 90%);color:var(--fg)}
.flash--success{background:color-mix(in oklab,var(--brand-base),transparent 80%)}
.flash--error{background:color-mix(in oklab,var(--error-500, #FF5A78),transparent 70%)}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.list-skinny{list-style:none;padding:0;margin:1rem 0}
.list-skinny li{margin-bottom:.35rem}
.meta-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;margin:1rem 0}
.meta-list dt{font-size:.85rem;text-transform:uppercase;color:var(--fg-tertiary)}
.meta-list dd{font-size:1.25rem;margin:0}

/* Shop catalog utilities */
.store-search__field-grid{display:grid;grid-template-columns:1fr repeat(4,auto);gap:13px;align-items:center}
.store-search__input-sm{height:40px}
.store-search__input-narrow{width:110px}
.catalog-pagination{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2);margin-top:var(--space-2)}

/* Interactive Ecosystem */
.interactive-ecosystem{background:var(--surface-1);border-radius:var(--radius-4);margin:var(--space-4) 0;padding:var(--space-5) 0}
.ecosystem-tabs{display:flex;gap:var(--space-2);justify-content:center;margin-bottom:var(--space-4);flex-wrap:wrap}
.tab-button{padding:var(--space-2) var(--space-4);border-radius:var(--radius-3);border:1.5px solid color-mix(in oklab,var(--brand-base),transparent 70%);background:transparent;color:var(--fg);cursor:pointer;transition:all 233ms cubic-bezier(.2,.8,.2,1);font-weight:600}
.tab-button:hover{border-color:var(--brand-base);background:color-mix(in oklab,var(--brand-base),transparent 90%)}
.tab-button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.tab-button.active{background:var(--brand-base);color:var(--on-brand);border-color:var(--brand-base)}
.tab-content{opacity:0;transform:translateY(20px);transition:all 400ms ease;display:none}
.tab-content.active{opacity:1;transform:translateY(0);display:block}

/* User Stories */
.user-stories{}
.stories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gutter)}
.story-card{background:var(--surface-1);padding:var(--space-3);border-radius:var(--radius-3);border:1px solid color-mix(in oklab,var(--brand-base),transparent 80%);display:flex;flex-direction:column;gap:var(--space-2)}
.story-card__avatar{font-size:3rem;line-height:1;text-align:center}
.story-card blockquote{margin:0;font-size:1.05rem;line-height:1.6;color:var(--fg);font-style:italic}
.story-card__meta{display:flex;flex-direction:column;gap:4px;margin-top:auto}
.story-card__meta strong{color:var(--fg);font-size:1rem}
.story-card__meta span{font-size:.9rem;color:var(--fg-tertiary)}

/* Luks Demo & Token Flow */
.luks-demo{}
.token-flow{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-4);position:relative}
.flow-step{flex:1;background:var(--surface-1);padding:var(--space-3);border-radius:var(--radius-4);border:1px solid color-mix(in oklab,var(--brand-base),transparent 70%);text-align:center;position:relative;z-index:1}
.flow-step:hover{border-color:var(--brand-base);box-shadow:0 0 20px color-mix(in oklab,var(--brand-base),transparent 85%)}
.flow-icon{font-size:4rem;line-height:1;margin-bottom:var(--space-2)}
.flow-step h3{margin:var(--space-2) 0 var(--space-1);font-size:1.2rem}
.flow-step p{margin:0;color:var(--fg-tertiary)}
.flow-arrow{position:absolute;right:-24px;top:50%;transform:translateY(-50%);font-size:2.5rem;color:var(--brand-base);z-index:2;animation:pulse 2s infinite}
.flow-step:last-child .flow-arrow{display:none}
@keyframes pulse{0%,100%{opacity:.6;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.1)}}
@media (max-width:1023.98px){
  .token-flow{flex-direction:column}
  .flow-arrow{display:none}
}

/* Product Showcase */
.product-showcase{}
.product-showcase .landing-blueprint__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gutter)}

/* Buddy Demo */
.buddy-demo{}
.demo-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gutter);margin-top:var(--space-4)}
.demo-step{background:var(--surface-1);padding:var(--space-3);border-radius:var(--radius-4);border:1px solid color-mix(in oklab,var(--brand-base),transparent 80%);text-align:center;position:relative}
.demo-step__number{width:48px;height:48px;border-radius:50%;background:var(--brand-base);color:var(--on-brand);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;margin:0 auto var(--space-3)}
.demo-step h3{margin:var(--space-2) 0}
.demo-step p{color:var(--fg-tertiary)}

/* Beta Signup Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.8);display:none;align-items:center;justify-content:center;z-index:var(--z-1000);padding:var(--space-2)}
.modal.active{display:flex}
.modal__content{background:var(--surface-1);border-radius:var(--radius-4);max-width:480px;width:100%;padding:var(--space-4);border:1px solid color-mix(in oklab,var(--brand-base),transparent 70%)}
.modal__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3)}
.modal__close{background:transparent;border:none;color:var(--fg);font-size:1.5rem;cursor:pointer;padding:var(--space-2);border-radius:var(--radius-1)}
.modal__close:hover{background:var(--surface-2)}
.modal__close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.modal__title{margin:0;font-size:1.5rem}
.modal__form{display:flex;flex-direction:column;gap:var(--space-2)}
.modal__field{display:flex;flex-direction:column;gap:8px}
.modal__field label{font-weight:600}
.modal__field input,.modal__field select{background:var(--surface-2);border:1px solid color-mix(in oklab,var(--brand-base),transparent 70%);border-radius:var(--radius-2);padding:var(--space-2);color:var(--fg)}
.modal__submit{margin-top:var(--space-2)}

/* Ultra-Simple Store */
.store-catalog-ultra{}
.product-grid-ultra{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-4);margin-top:var(--space-4)}
.product-card-ultra{background:var(--surface-1);border-radius:var(--radius-4);padding:var(--space-3);border:2px solid color-mix(in oklab,var(--brand-base),transparent 85%);transition:all 300ms cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column}
.product-card-ultra:hover{transform:translateY(-8px);border-color:var(--brand-base);box-shadow:0 20px 40px color-mix(in oklab,var(--brand-base),transparent 85%)}
.product-image{background:linear-gradient(135deg,var(--brand-base) 0%,color-mix(in oklab,var(--brand-base),white 30%) 100%);border-radius:var(--radius-3);height:200px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-3);position:relative;overflow:hidden}
.product-emoji{font-size:6rem;filter:drop-shadow(0 8px 16px rgba(0,0,0,0.3));z-index:1}
.product-badge{position:absolute;top:12px;right:12px;z-index:2}
.product-title{margin:0 0 var(--space-2) 0;font-size:1.3rem}
.product-teaser{margin:0 0 var(--space-3) 0;color:var(--fg-tertiary);flex:1}
.product-footer{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3)}
.product-price{font-size:2rem;font-weight:800;color:var(--brand-base)}
.product-delivery{font-size:.9rem;color:var(--fg-muted)}
.add-to-cart-btn{width:100%;padding:var(--space-2);font-size:1.1rem;font-weight:700}
.add-to-cart-btn:disabled{opacity:.6;cursor:not-allowed}

/* Cart Toast */
.cart-toast{position:fixed;bottom:var(--space-4);right:var(--space-4);background:var(--surface-1);border:1px solid var(--brand-base);border-radius:var(--radius-3);padding:var(--space-3) var(--space-4);color:var(--fg);font-weight:600;z-index:var(--z-1000);transform:translateX(400px);transition:transform 300ms cubic-bezier(0.4,0,0.2,1);box-shadow:var(--shadow-lg)}
.cart-toast.show{transform:translateX(0);box-shadow:0 0 20px color-mix(in oklab,var(--brand-base),transparent 60%)}
@media (max-width:767.98px){
  .product-grid-ultra{grid-template-columns:1fr !important}
  .product-card-ultra{max-width:100%;overflow:hidden}
  .cart-toast{bottom:var(--space-2);right:var(--space-2);left:var(--space-2)}
}

/* ===== SCROLL REVEAL SYSTEM ===== */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 600ms cubic-bezier(0.4,0,0.2,1),transform 600ms cubic-bezier(0.4,0,0.2,1)}
[data-reveal].revealed{opacity:1;transform:translateY(0)}
[data-reveal-delay="1"]{transition-delay:100ms}
[data-reveal-delay="2"]{transition-delay:200ms}
[data-reveal-delay="3"]{transition-delay:300ms}
[data-reveal-delay="4"]{transition-delay:400ms}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ===== LOGO PLACEHOLDERS ===== */
.logo-placeholder{background:linear-gradient(135deg,color-mix(in oklab,var(--brand-base),transparent 85%),color-mix(in oklab,var(--brand-base),transparent 75%));border:2px dashed color-mix(in oklab,var(--brand-base),transparent 50%);border-radius:var(--radius-2);display:flex;align-items:center;justify-content:center;position:relative}
.logo-placeholder::after{content:attr(data-logo);font-size:var(--text-xs);color:var(--fg-muted);text-transform:uppercase;letter-spacing:.1em}
.logo-placeholder--croody{width:192px;height:64px}
.logo-placeholder--buddy,.logo-placeholder--luks{width:96px;height:96px;border-radius:50%}
.logo-placeholder--hero{width:100%;max-width:600px;aspect-ratio:1/1}

/* ===== FORM STATE SYSTEM ===== */
/* Sistema unificado de estados visuales para formularios */

/* Semantic accent variables (aliases to tokens) */
:root {
  --accent-success: var(--gator-500);
  --accent-danger: var(--error-500, #F06565);
  --accent-warning: var(--warn-500, #F5B454);
  --accent-info: var(--info-500, #31BFEA);
}

/* Form Group Container States */
.form-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Error State */
.form-group--error .form-input,
.form-group--error .auth-input,
.form-group--error input,
.form-group--error textarea,
.form-group--error select {
  border-color: var(--accent-danger);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-danger), transparent 85%);
}

/* Success State */
.form-group--success .form-input,
.form-group--success .auth-input,
.form-group--success input,
.form-group--success textarea,
.form-group--success select {
  border-color: var(--accent-success);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-success), transparent 85%);
}

/* Warning State */
.form-group--warning .form-input,
.form-group--warning .auth-input,
.form-group--warning input,
.form-group--warning textarea,
.form-group--warning select {
  border-color: var(--accent-warning);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-warning), transparent 90%);
}

/* Loading/Validating State */
.form-group--loading .form-input,
.form-group--loading .auth-input,
.form-group--loading input {
  border-color: var(--accent-info);
  background-image: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklab, var(--accent-info), transparent 90%),
    transparent
  );
  background-size: 200% 100%;
  animation: formValidating 1.5s ease-in-out infinite;
}

@keyframes formValidating {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Form Feedback Messages */
.form-feedback {
  font-size: var(--text-sm);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  line-height: var(--line-height-base);
}

.form-feedback--error {
  color: var(--accent-danger);
}

.form-feedback--success {
  color: var(--accent-success);
}

.form-feedback--warning {
  color: var(--accent-warning);
}

.form-feedback--hint {
  color: var(--fg-muted);
  font-size: var(--text-xs);
}

/* Feedback Icon (optional) */
.form-feedback__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Shake Animation for Errors */
@keyframes formShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.form-group--shake {
  animation: formShake var(--duration-base) var(--ease-base, cubic-bezier(0.4, 0, 0.2, 1));
}

/* Enhanced Focus States */
.form-input:focus,
.auth-input:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--brand-base);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-base), transparent 80%);
}

/* Focus within error state maintains error color */
.form-group--error .form-input:focus,
.form-group--error .auth-input:focus,
.form-group--error input:focus {
  border-color: var(--accent-danger);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-danger), transparent 75%);
}

/* Focus within success state maintains success color */
.form-group--success .form-input:focus,
.form-group--success .auth-input:focus,
.form-group--success input:focus {
  border-color: var(--accent-success);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-success), transparent 75%);
}

/* Required Field Indicator */
.form-label--required::after {
  content: '*';
  color: var(--accent-danger);
  margin-left: var(--space-half-1, 4px);
  font-weight: 600;
}

/* Optional Field Indicator */
.form-label--optional::after {
  content: '(opcional)';
  color: var(--fg-muted);
  margin-left: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 400;
}

/* Disabled State */
.form-group--disabled .form-input,
.form-group--disabled .auth-input,
.form-group--disabled input,
.form-group--disabled textarea,
.form-group--disabled select,
.form-input:disabled,
.auth-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--surface-2);
}

/* Character Counter */
.form-counter {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  text-align: right;
  margin-top: var(--space-half-1, 4px);
}

.form-counter--warning {
  color: var(--accent-warning);
}

.form-counter--error {
  color: var(--accent-danger);
}

/* Input with Icon */
.form-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input-wrapper .form-input,
.form-input-wrapper .auth-input {
  padding-left: calc(var(--space-3) + 20px);
}

.form-input-wrapper__icon {
  position: absolute;
  left: var(--space-2);
  color: var(--fg-muted);
  pointer-events: none;
  transition: color var(--duration-fast) ease;
}

.form-input-wrapper:focus-within .form-input-wrapper__icon {
  color: var(--brand-base);
}

.form-group--error .form-input-wrapper__icon {
  color: var(--accent-danger);
}

.form-group--success .form-input-wrapper__icon {
  color: var(--accent-success);
}

/* Status Icon in Input (right side) */
.form-input-wrapper--with-status .form-input,
.form-input-wrapper--with-status .auth-input {
  padding-right: calc(var(--space-3) + 20px);
}

.form-input-wrapper__status {
  position: absolute;
  right: var(--space-2);
  pointer-events: none;
}

.form-input-wrapper__status--success {
  color: var(--accent-success);
}

.form-input-wrapper__status--error {
  color: var(--accent-danger);
}

.form-input-wrapper__status--loading {
  color: var(--accent-info);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .form-group--shake {
    animation: none;
  }

  .form-group--loading .form-input,
  .form-group--loading .auth-input,
  .form-group--loading input {
    animation: none;
  }

  .form-input-wrapper__status--loading {
    animation: none;
  }
}