/* =================================================================
   PLIRET 2026 - SISTEMA DE DISEÑO MODERNO
   Mobile-first · Dark theme · Glassmorphism · Aurora gradients
   ================================================================= */

/* ---------- 1. RESET MODERNO ---------- */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
   -webkit-tap-highlight-color: transparent;
}

body {
   font-family: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   font-size: 16px;
   line-height: 1.6;
   color: var(--c-text);
   background: var(--c-bg);
   overflow-x: hidden;
   min-height: 100vh;
   font-feature-settings: 'kern', 'liga', 'calt';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
}

img,
picture,
video,
svg {
   max-width: 100%;
   display: block;
}

a {
   color: inherit;
   text-decoration: none;
   transition: color .25s ease;
}

button {
   font: inherit;
   cursor: pointer;
   border: none;
   background: transparent;
}

input,
textarea,
select {
   font: inherit;
   color: inherit;
}

ul,
ol {
   list-style: none;
}

/* ---------- 2. DESIGN TOKENS ---------- */
:root {
   /* Colores marca Pliret */
   --c-lime: #99FF00;
   --c-lime-bright: #B3FF40;
   --c-lime-dark: #5DAA00;
   --c-lime-text: #4A8800;          /* darker shade — readable as text on white */
   --c-lime-glow: rgba(153, 255, 0, .35);

   /* Light surfaces */
   --c-bg: #FFFFFF;
   --c-bg-2: #F8FAFC;
   --c-bg-3: #F1F5F9;
   --c-surface: #FFFFFF;
   --c-surface-2: #F8FAFC;
   --c-surface-hover: #F1F5F9;
   --c-border: rgba(15, 23, 42, .08);
   --c-border-2: rgba(15, 23, 42, .14);

   /* Text */
   --c-text: #0F172A;
   --c-text-2: #334155;
   --c-text-3: #64748B;
   --c-text-strong: #020617;

   /* Aurora gradients (lighter, more pastel for white background) */
   --grad-aurora: linear-gradient(135deg, #99FF00 0%, #00FFAA 50%, #00BFFF 100%);
   --grad-lime: linear-gradient(135deg, #99FF00 0%, #7ACC00 100%);
   --grad-glow: radial-gradient(circle at 50% 50%, rgba(153, 255, 0, .18) 0%, transparent 70%);
   --grad-mesh: radial-gradient(ellipse at 20% 0%, rgba(153, 255, 0, .10) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 100%, rgba(0, 255, 170, .06) 0%, transparent 50%);

   /* Shadows (light theme — softer) */
   --shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
   --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
   --shadow-lg: 0 24px 64px rgba(15, 23, 42, .12);
   --shadow-glow: 0 0 40px var(--c-lime-glow);
   --shadow-glow-strong: 0 0 80px var(--c-lime-glow);

   /* Radius */
   --r-xs: 6px;
   --r-sm: 10px;
   --r-md: 16px;
   --r-lg: 24px;
   --r-xl: 32px;
   --r-pill: 999px;

   /* Spacing */
   --sp-1: .25rem;
   --sp-2: .5rem;
   --sp-3: .75rem;
   --sp-4: 1rem;
   --sp-5: 1.5rem;
   --sp-6: 2rem;
   --sp-7: 3rem;
   --sp-8: 4rem;
   --sp-9: 6rem;
   --sp-10: 8rem;

   /* Typography scale (mobile-first, fluid) */
   --fs-xs: clamp(.75rem, .73rem + .1vw, .8rem);
   --fs-sm: clamp(.875rem, .85rem + .1vw, .9375rem);
   --fs-md: clamp(1rem, .95rem + .15vw, 1.0625rem);
   --fs-lg: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
   --fs-xl: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
   --fs-2xl: clamp(1.5rem, 1.3rem + .8vw, 2rem);
   --fs-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
   --fs-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem);
   --fs-5xl: clamp(2.75rem, 2rem + 3.75vw, 5.5rem);
   --fs-6xl: clamp(3.5rem, 2.25rem + 6vw, 7.5rem);

   /* Transitions */
   --ease: cubic-bezier(.22, .61, .36, 1);
   --ease-out: cubic-bezier(.16, 1, .3, 1);
   --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
   --t-fast: .2s;
   --t-med: .35s;
   --t-slow: .6s;

   /* Layout */
   --max-w: 1280px;
   --max-w-narrow: 880px;
   --header-h: 68px;
}

@media (min-width: 768px) {
   :root {
      --header-h: 80px;
   }
}

/* ---------- 3. TIPOGRAFÍA ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');

h1, h2, h3, h4, h5, h6 {
   font-family: 'Space Grotesk', 'Inter', sans-serif;
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: -0.02em;
   color: var(--c-text-strong);
}

h1 { font-size: var(--fs-5xl); letter-spacing: -0.04em; }
h2 { font-size: var(--fs-4xl); letter-spacing: -0.03em; }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: .08em; }

p { font-size: var(--fs-md); color: var(--c-text-2); }

.eyebrow {
   display: inline-flex;
   align-items: center;
   gap: var(--sp-2);
   padding: var(--sp-2) var(--sp-4);
   border-radius: var(--r-pill);
   background: rgba(153, 255, 0, .12);
   border: 1px solid rgba(153, 255, 0, .35);
   font-size: var(--fs-xs);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .12em;
   color: var(--c-lime-text);
}

.eyebrow::before {
   content: "";
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--c-lime-text);
   box-shadow: 0 0 12px var(--c-lime);
   animation: pulse-dot 2s ease-in-out infinite;
}

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

.text-gradient,
.text-grad {
   background: linear-gradient(135deg, var(--c-lime-text) 0%, #00B894 50%, #0984E3 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
}

.text-lime { color: var(--c-lime-text); font-weight: 700; }
.text-muted { color: var(--c-text-2); }
.text-soft { color: var(--c-text-3); }

/* ---------- 4. LAYOUT UTILITIES ---------- */
.container {
   width: 100%;
   max-width: var(--max-w);
   margin: 0 auto;
   padding: 0 var(--sp-5);
}

.container-narrow {
   max-width: var(--max-w-narrow);
}

@media (min-width: 768px) {
   .container { padding: 0 var(--sp-6); }
}

.section {
   padding: var(--sp-9) 0;
   position: relative;
}

@media (min-width: 768px) {
   .section { padding: var(--sp-10) 0; }
}

.section-header {
   text-align: center;
   max-width: 720px;
   margin: 0 auto var(--sp-8);
}

.section-header h2 { margin-bottom: var(--sp-4); }
.section-header p { font-size: var(--fs-lg); }

.grid {
   display: grid;
   gap: var(--sp-5);
}

.flex {
   display: flex;
}

.flex-center {
   display: flex;
   align-items: center;
   justify-content: center;
}

/* ---------- 5. BACKGROUND DECOR ---------- */
.bg-mesh {
   position: relative;
}

.bg-mesh::before {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--grad-mesh);
   pointer-events: none;
   z-index: 0;
}

.bg-mesh > * { position: relative; z-index: 1; }

.bg-grid {
   background-image:
      linear-gradient(var(--c-border) 1px, transparent 1px),
      linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
   background-size: 48px 48px;
   background-position: -1px -1px;
   mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
}

.aurora-blob {
   position: absolute;
   border-radius: 50%;
   filter: blur(80px);
   opacity: .25;
   pointer-events: none;
   z-index: 0;
}

.aurora-blob.blob-1 {
   width: 400px;
   height: 400px;
   background: radial-gradient(circle, var(--c-lime) 0%, transparent 70%);
   top: -100px;
   left: -100px;
   animation: float-blob 20s ease-in-out infinite;
}

.aurora-blob.blob-2 {
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, #00FFAA 0%, transparent 70%);
   bottom: -150px;
   right: -150px;
   opacity: .12;
   animation: float-blob 25s ease-in-out infinite reverse;
}

@keyframes float-blob {
   0%, 100% { transform: translate(0, 0) scale(1); }
   33% { transform: translate(50px, 30px) scale(1.1); }
   66% { transform: translate(-30px, 50px) scale(.9); }
}

/* ---------- 6. BUTTONS ---------- */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--sp-2);
   padding: var(--sp-3) var(--sp-5);
   border-radius: var(--r-pill);
   font-weight: 600;
   font-size: var(--fs-md);
   line-height: 1;
   white-space: nowrap;
   transition: all var(--t-med) var(--ease);
   cursor: pointer;
   border: 1px solid transparent;
   user-select: none;
   -webkit-user-select: none;
   min-height: 48px;
   text-decoration: none;
   position: relative;
   overflow: hidden;
   isolation: isolate;
}

.btn:active { transform: translateY(1px) scale(.98); }

.btn-primary {
   background: var(--c-lime);
   color: #000;
   box-shadow: 0 0 0 0 var(--c-lime-glow);
}

.btn-primary::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, var(--c-lime-bright), var(--c-lime));
   z-index: -1;
   transition: opacity var(--t-med) var(--ease);
   opacity: 0;
}

.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 32px var(--c-lime-glow);
}

.btn-ghost {
   background: var(--c-surface);
   color: var(--c-text);
   border-color: var(--c-border-2);
}

.btn-ghost:hover {
   background: var(--c-lime);
   border-color: var(--c-lime);
   color: var(--c-bg);
}

.btn-sm { padding: var(--sp-2) var(--sp-4); min-height: 40px; font-size: var(--fs-sm); }
.btn-lg { padding: var(--sp-4) var(--sp-6); min-height: 56px; font-size: var(--fs-lg); }
.btn-block { display: flex; width: 100%; }

.btn .arrow {
   display: inline-block;
   transition: transform var(--t-med) var(--ease);
}

.btn:hover .arrow { transform: translateX(4px); }

/* ---------- 7. CARDS ---------- */
.card {
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: var(--r-lg);
   padding: var(--sp-5);
   transition: all var(--t-med) var(--ease);
   position: relative;
   overflow: hidden;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
}

.card:hover {
   border-color: var(--c-border-2);
   transform: translateY(-4px);
   background: var(--c-surface-2);
}

.card-glow {
   position: relative;
}

.card-glow::before {
   content: "";
   position: absolute;
   inset: -1px;
   border-radius: inherit;
   padding: 1px;
   background: linear-gradient(135deg, transparent, var(--c-lime) 50%, transparent);
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   opacity: 0;
   transition: opacity var(--t-med) var(--ease);
   pointer-events: none;
}

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

.card-icon {
   width: 56px;
   height: 56px;
   border-radius: var(--r-md);
   background: linear-gradient(135deg, var(--c-lime-glow), transparent);
   border: 1px solid var(--c-lime);
   display: grid;
   place-items: center;
   margin-bottom: var(--sp-4);
   color: var(--c-lime);
   font-size: 24px;
   transition: all var(--t-med) var(--ease);
}

.card:hover .card-icon {
   transform: scale(1.1) rotate(-5deg);
   box-shadow: 0 0 24px var(--c-lime-glow);
}

.card h3 {
   font-size: var(--fs-xl);
   margin-bottom: var(--sp-3);
}

.card p {
   font-size: var(--fs-sm);
   color: var(--c-text-2);
}

@media (min-width: 768px) {
   .card { padding: var(--sp-6); }
}

/* ---------- 8. NAVIGATION ---------- */
.site-header {
   position: sticky;
   top: 0;
   z-index: 100;
   width: 100%;
   background: rgba(255, 255, 255, .85);
   backdrop-filter: saturate(180%) blur(20px);
   -webkit-backdrop-filter: saturate(180%) blur(20px);
   border-bottom: 1px solid transparent;
   transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.site-header.scrolled {
   background: rgba(255, 255, 255, .96);
   border-bottom-color: var(--c-border);
   box-shadow: 0 1px 0 rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
}

.nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--sp-5);
   height: var(--header-h);
   max-width: var(--max-w);
   margin: 0 auto;
   padding: 0 var(--sp-5);
}

@media (min-width: 768px) {
   .nav { padding: 0 var(--sp-6); }
}

.nav-logo {
   display: flex;
   align-items: center;
   gap: var(--sp-3);
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 700;
   font-size: var(--fs-xl);
   color: var(--c-text-strong);
   z-index: 110;
}

.nav-logo img { height: 36px; width: auto; }

.nav-menu {
   display: none;
   align-items: center;
   gap: var(--sp-2);
}

@media (min-width: 1024px) {
   .nav-menu { display: flex; }
}

.nav-menu > li > a,
.nav-menu .dropdown-toggle {
   display: inline-flex;
   align-items: center;
   gap: var(--sp-2);
   padding: var(--sp-2) var(--sp-4);
   border-radius: var(--r-pill);
   font-size: var(--fs-sm);
   font-weight: 600;
   color: var(--c-text);
   text-decoration: none;
   transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.nav-menu > li > a:hover,
.nav-menu .dropdown-toggle:hover {
   color: var(--c-bg);
   background: var(--c-lime);
}

.nav-menu .has-dropdown {
   position: relative;
}

/* Invisible bridge to keep dropdown open while moving cursor down */
.nav-menu .has-dropdown::before {
   content: '';
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   height: 12px;
   background: transparent;
   pointer-events: none;
}
.nav-menu .has-dropdown:hover::before,
.nav-menu .has-dropdown:focus-within::before {
   pointer-events: auto;
}

.nav-menu .dropdown {
   position: absolute;
   top: calc(100% + 8px);
   left: 50%;
   transform: translateX(-50%) translateY(-8px);
   min-width: 240px;
   padding: var(--sp-2);
   background: #FFFFFF;
   border: 1px solid var(--c-border);
   border-radius: var(--r-md);
   box-shadow: 0 20px 40px -10px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.06);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity var(--t-fast) var(--ease), visibility var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.nav-menu .has-dropdown:hover .dropdown,
.nav-menu .has-dropdown:focus-within .dropdown {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transform: translateX(-50%) translateY(0);
}

.dropdown a {
   display: block;
   padding: var(--sp-3) var(--sp-4);
   border-radius: var(--r-sm);
   font-size: var(--fs-sm);
   font-weight: 500;
   color: var(--c-text);
   transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.dropdown a:hover {
   background: var(--c-lime);
   color: var(--c-bg);
}

.nav-actions {
   display: flex;
   align-items: center;
   gap: var(--sp-3);
}

.lang-switch {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: var(--sp-2) var(--sp-3);
   border-radius: var(--r-pill);
   border: 1px solid var(--c-border);
   font-size: var(--fs-xs);
   font-weight: 600;
   color: var(--c-text-2);
   transition: all var(--t-fast) var(--ease);
}

.lang-switch:hover {
   border-color: var(--c-lime);
   color: var(--c-lime);
}

/* Burger */
.burger {
   width: 44px;
   height: 44px;
   display: grid;
   place-items: center;
   border-radius: var(--r-pill);
   background: var(--c-surface);
   border: 1px solid var(--c-border-2);
   z-index: 110;
   cursor: pointer;
   padding: 0;
   transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.burger:hover {
   background: var(--c-bg-2);
   border-color: var(--c-lime);
}

@media (min-width: 1024px) {
   .burger { display: none; }
}

.burger span {
   display: block;
   width: 18px;
   height: 2px;
   background: var(--c-text);
   border-radius: 2px;
   transition: all var(--t-med) var(--ease);
   position: relative;
}

.burger span::before,
.burger span::after {
   content: "";
   position: absolute;
   left: 0;
   width: 18px;
   height: 2px;
   background: var(--c-text);
   border-radius: 2px;
   transition: all var(--t-med) var(--ease);
}

.burger span::before { top: -6px; }
.burger span::after { top: 6px; }

.burger.active span,
.burger.open span { background: transparent; }
.burger.active span::before,
.burger.open span::before { top: 0; transform: rotate(45deg); }
.burger.active span::after,
.burger.open span::after { top: 0; transform: rotate(-45deg); }

/* Mobile drawer */
.mobile-drawer {
   position: fixed;
   inset: 0;
   z-index: 99;
   background: rgba(255, 255, 255, .98);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   padding: calc(var(--header-h) + var(--sp-5)) var(--sp-5) var(--sp-5);
   overflow-y: auto;
   opacity: 0;
   visibility: hidden;
   transition: opacity var(--t-med) var(--ease), visibility var(--t-med) var(--ease);
}

.mobile-drawer.active,
.mobile-drawer.open {
   opacity: 1;
   visibility: visible;
}

.mobile-drawer ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.mobile-drawer ul li a,
.mobile-drawer ul li .submenu-toggle {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--sp-4) var(--sp-3);
   font-size: var(--fs-lg);
   font-weight: 600;
   color: var(--c-text);
   border-bottom: 1px solid var(--c-border);
   width: 100%;
   text-decoration: none;
   background: transparent;
   border-left: none;
   border-right: none;
   border-top: none;
   cursor: pointer;
   font-family: inherit;
   text-align: left;
}

.mobile-drawer ul li a:hover,
.mobile-drawer ul li .submenu-toggle:hover,
.mobile-drawer ul li .submenu-toggle.active {
   color: var(--c-lime-text);
   background: rgba(153, 255, 0, .08);
}

.mobile-drawer .submenu {
   display: none;
   padding-left: var(--sp-4);
   list-style: none;
   margin: 0;
}

.mobile-drawer .submenu.active,
.mobile-drawer .submenu.open { display: block; }

.mobile-drawer .submenu a {
   font-size: var(--fs-md);
   color: var(--c-text-2);
   padding: var(--sp-3) var(--sp-3);
   border-bottom: 1px solid var(--c-border);
   font-weight: 500;
}

.mobile-drawer .submenu a:hover { color: var(--c-lime-text); background: rgba(153, 255, 0, .08); }

.mobile-drawer .drawer-cta {
   margin-top: var(--sp-6);
   width: 100%;
}

/* ---------- 9. HERO ---------- */
.hero {
   position: relative;
   padding: var(--sp-9) 0 var(--sp-8);
   overflow: hidden;
   isolation: isolate;
}

@media (min-width: 768px) {
   .hero { padding: var(--sp-10) 0; }
}

.hero-content {
   position: relative;
   z-index: 2;
   text-align: center;
   max-width: 900px;
   margin: 0 auto;
}

.hero h1 {
   margin-bottom: var(--sp-5);
}

.hero h1 .accent {
   display: block;
   background: linear-gradient(135deg, var(--c-lime-text) 0%, #00B894 50%, #0984E3 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
   animation: gradient-shift 8s ease infinite;
   background-size: 200% 200%;
}

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

.hero p.lead {
   font-size: var(--fs-lg);
   color: var(--c-text-2);
   max-width: 640px;
   margin: 0 auto var(--sp-6);
}

.hero-cta {
   display: flex;
   flex-direction: column;
   gap: var(--sp-3);
   align-items: center;
   margin-bottom: var(--sp-8);
}

@media (min-width: 480px) {
   .hero-cta {
      flex-direction: row;
      justify-content: center;
   }
}

.hero-stats {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--sp-4);
   max-width: 720px;
   margin: 0 auto;
}

@media (min-width: 768px) {
   .hero-stats { grid-template-columns: repeat(4, 1fr); }
}

.stat {
   text-align: center;
   padding: var(--sp-4) var(--sp-3);
   border-radius: var(--r-md);
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   backdrop-filter: blur(10px);
}

.stat-num {
   display: block;
   font-family: 'Space Grotesk', sans-serif;
   font-size: var(--fs-3xl);
   font-weight: 700;
   color: var(--c-lime);
   line-height: 1;
   margin-bottom: var(--sp-1);
}

.stat-label {
   font-size: var(--fs-xs);
   color: var(--c-text-2);
   text-transform: uppercase;
   letter-spacing: .08em;
}

/* Trusted by row */
.trust-row {
   margin-top: var(--sp-8);
   padding-top: var(--sp-6);
   border-top: 1px solid var(--c-border);
}

.trust-label {
   text-align: center;
   font-size: var(--fs-xs);
   text-transform: uppercase;
   letter-spacing: .12em;
   color: var(--c-text-3);
   margin-bottom: var(--sp-4);
}

.trust-logos {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: var(--sp-6);
   flex-wrap: wrap;
   opacity: .7;
   filter: grayscale(1);
}

.trust-logos img { height: 28px; width: auto; }

/* ---------- 10. BENTO GRID ---------- */
.bento {
   display: grid;
   gap: var(--sp-4);
   grid-template-columns: 1fr;
}

@media (min-width: 768px) {
   .bento {
      grid-template-columns: repeat(6, 1fr);
      gap: var(--sp-5);
   }
   .bento-tall { grid-column: span 6; grid-row: span 2; }
   .bento-wide { grid-column: span 6; }
   .bento-half { grid-column: span 3; }
   .bento-third { grid-column: span 2; }
}

.bento-card {
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: var(--r-lg);
   padding: var(--sp-5);
   position: relative;
   overflow: hidden;
   transition: all var(--t-med) var(--ease);
   min-height: 200px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
   .bento-card { padding: var(--sp-6); }
}

.bento-card:hover {
   border-color: var(--c-lime);
   transform: translateY(-2px);
   box-shadow: var(--shadow-md), 0 0 0 1px var(--c-lime);
}

.bento-card-feature {
   background: linear-gradient(135deg, rgba(153, 255, 0, .15) 0%, rgba(0, 255, 170, .05) 100%);
   border-color: rgba(153, 255, 0, .25);
}

.bento-card-feature::before {
   content: "";
   position: absolute;
   width: 200px;
   height: 200px;
   background: radial-gradient(circle, var(--c-lime-glow) 0%, transparent 70%);
   top: -50%;
   right: -50%;
   pointer-events: none;
}

/* ---------- 11. SERVICES SECTION ---------- */
.services-grid {
   display: grid;
   gap: var(--sp-5);
   grid-template-columns: 1fr;
}

@media (min-width: 768px) {
   .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
   .services-grid { grid-template-columns: repeat(3, 1fr); }
}

.service-card {
   position: relative;
   padding: var(--sp-6);
   border-radius: var(--r-lg);
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   overflow: hidden;
   transition: all var(--t-med) var(--ease);
   isolation: isolate;
   box-shadow: var(--shadow-sm);
}

.service-card::before {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--grad-glow);
   opacity: 0;
   transition: opacity var(--t-med) var(--ease);
   z-index: -1;
}

.service-card:hover {
   border-color: var(--c-lime);
   transform: translateY(-6px);
   box-shadow: var(--shadow-lg), 0 0 0 2px var(--c-lime);
}

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

.service-num {
   font-family: 'Space Grotesk', sans-serif;
   font-size: 5rem;
   font-weight: 700;
   line-height: 1;
   color: transparent;
   -webkit-text-stroke: 1.5px var(--c-text);
   text-shadow: 0 4px 16px rgba(15, 23, 42, .25), 0 2px 4px rgba(15, 23, 42, .15);
   margin-bottom: var(--sp-4);
   transition: -webkit-text-stroke var(--t-med) var(--ease), text-shadow var(--t-med) var(--ease);
}

.service-card:hover .service-num {
   -webkit-text-stroke-color: var(--c-lime-text);
   text-shadow: 0 6px 20px rgba(74, 136, 0, .35), 0 2px 6px rgba(15, 23, 42, .2);
}

.service-card h3 {
   font-size: var(--fs-2xl);
   margin-bottom: var(--sp-3);
}

.service-card .arrow-link {
   margin-top: var(--sp-5);
   display: inline-flex;
   align-items: center;
   gap: var(--sp-2);
   font-weight: 700;
   color: var(--c-text);
   font-size: var(--fs-sm);
   text-decoration: none;
   transition: color var(--t-fast) var(--ease);
}

.service-card .arrow-link:hover {
   color: var(--c-lime-text);
}

.service-card:hover .arrow-link svg {
   transform: translateX(4px);
}

.arrow-link svg {
   transition: transform var(--t-med) var(--ease);
}

/* ---------- 12. STEPS / PROCESS ---------- */
.steps {
   display: grid;
   gap: var(--sp-5);
   counter-reset: step;
}

@media (min-width: 768px) {
   .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
   .steps { grid-template-columns: repeat(4, 1fr); }
}

.step {
   position: relative;
   padding: var(--sp-6) var(--sp-5);
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: var(--r-lg);
   counter-increment: step;
}

.step::before {
   content: counter(step, decimal-leading-zero);
   font-family: 'Space Grotesk', sans-serif;
   font-size: var(--fs-2xl);
   font-weight: 700;
   color: var(--c-lime);
   display: block;
   margin-bottom: var(--sp-3);
}

.step h4 {
   margin-bottom: var(--sp-2);
}

.step p {
   font-size: var(--fs-sm);
}

/* ---------- 13. FORM ---------- */
.form {
   display: flex;
   flex-direction: column;
   gap: var(--sp-5);
}

.form-row {
   display: grid;
   gap: var(--sp-4);
}

@media (min-width: 640px) {
   .form-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
}

.field {
   display: flex;
   flex-direction: column;
   gap: var(--sp-2);
}

.field label {
   font-size: var(--fs-sm);
   font-weight: 500;
   color: var(--c-text);
}

.field label .req { color: var(--c-lime); }

.field input,
.field textarea,
.field select {
   width: 100%;
   padding: var(--sp-3) var(--sp-4);
   font-size: var(--fs-md);
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: var(--r-sm);
   color: var(--c-text-strong);
   transition: all var(--t-fast) var(--ease);
   min-height: 48px;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
   outline: none;
   border-color: var(--c-lime);
   background: var(--c-surface-2);
   box-shadow: 0 0 0 3px var(--c-lime-glow);
}

.field input::placeholder,
.field textarea::placeholder {
   color: var(--c-text-3);
}

.field textarea {
   min-height: 140px;
   resize: vertical;
   font-family: inherit;
}

.field-hint {
   font-size: var(--fs-xs);
   color: var(--c-text-3);
}

.field-error {
   font-size: var(--fs-xs);
   color: #ff6b6b;
   display: none;
}

.field.has-error input,
.field.has-error textarea {
   border-color: #ff6b6b;
}

.field.has-error .field-error { display: block; }

/* Captcha */
.captcha-box {
   padding: var(--sp-4);
   border-radius: var(--r-md);
   background: var(--c-surface-2);
   border: 1px dashed var(--c-border-2);
   display: flex;
   flex-direction: column;
   gap: var(--sp-3);
}

.captcha-question {
   font-family: 'Space Grotesk', monospace;
   font-size: var(--fs-lg);
   font-weight: 600;
   color: var(--c-lime);
   user-select: none;
   -webkit-user-select: none;
   letter-spacing: .04em;
}

.captcha-row {
   display: flex;
   gap: var(--sp-3);
   align-items: center;
}

.captcha-refresh {
   width: 44px;
   height: 44px;
   display: grid;
   place-items: center;
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: var(--r-sm);
   color: var(--c-text-2);
   transition: all var(--t-fast) var(--ease);
   flex-shrink: 0;
}

.captcha-refresh:hover {
   color: var(--c-lime);
   border-color: var(--c-lime);
   transform: rotate(90deg);
}

.form-status {
   padding: var(--sp-4);
   border-radius: var(--r-md);
   font-size: var(--fs-sm);
   display: none;
}

.form-status.success {
   display: block;
   background: rgba(153, 255, 0, .1);
   border: 1px solid var(--c-lime);
   color: var(--c-lime);
}

.form-status.error {
   display: block;
   background: rgba(255, 107, 107, .1);
   border: 1px solid #ff6b6b;
   color: #ff6b6b;
}

/* ---------- 14. FAQ / ACCORDION ---------- */
.faq {
   display: flex;
   flex-direction: column;
   gap: var(--sp-3);
}

.faq-item {
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: var(--r-md);
   overflow: hidden;
   transition: all var(--t-fast) var(--ease);
}

.faq-item[open] {
   border-color: var(--c-lime);
   background: var(--c-surface-2);
}

.faq-item summary {
   padding: var(--sp-4) var(--sp-5);
   cursor: pointer;
   font-weight: 600;
   font-size: var(--fs-md);
   color: var(--c-text-strong);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--sp-4);
   list-style: none;
   user-select: none;
   -webkit-user-select: none;
}

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

.faq-item summary::after {
   content: "+";
   font-family: 'Space Grotesk', sans-serif;
   font-size: 1.5rem;
   color: var(--c-lime);
   transition: transform var(--t-fast) var(--ease);
   line-height: 1;
}

.faq-item[open] summary::after {
   transform: rotate(45deg);
}

.faq-item .faq-content {
   padding: 0 var(--sp-5) var(--sp-5);
   color: var(--c-text-2);
   font-size: var(--fs-sm);
}

/* ---------- 15. FOOTER ---------- */
.site-footer {
   margin-top: var(--sp-9);
   padding: var(--sp-9) 0 var(--sp-5);
   background: var(--c-bg-2);
   border-top: 1px solid var(--c-border);
   position: relative;
   overflow: hidden;
}

.site-footer::before {
   content: "";
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   max-width: 600px;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--c-lime), transparent);
   opacity: .5;
}

.footer-grid {
   display: grid;
   gap: var(--sp-7);
   grid-template-columns: 1fr;
   margin-bottom: var(--sp-7);
}

@media (min-width: 768px) {
   .footer-grid {
      grid-template-columns: 2fr 1fr 1fr 1fr;
   }
}

.footer-brand img { height: 40px; margin-bottom: var(--sp-4); }

.footer-brand p {
   font-size: var(--fs-sm);
   max-width: 320px;
   margin-bottom: var(--sp-4);
}

.footer-socials {
   display: flex;
   gap: var(--sp-3);
}

.footer-social {
   width: 40px;
   height: 40px;
   display: grid;
   place-items: center;
   border-radius: var(--r-pill);
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   color: var(--c-text-2);
   transition: all var(--t-fast) var(--ease);
}

.footer-social:hover {
   background: var(--c-lime);
   color: #000;
   border-color: var(--c-lime);
   transform: translateY(-3px);
}

.footer-col h6 {
   margin-bottom: var(--sp-4);
   color: var(--c-text-strong);
}

.footer-col ul li {
   margin-bottom: var(--sp-2);
}

.footer-col ul li a {
   font-size: var(--fs-sm);
   color: var(--c-text-2);
}

.footer-col ul li a:hover { color: var(--c-lime-text); }

.footer-bottom {
   padding-top: var(--sp-5);
   border-top: 1px solid var(--c-border);
   display: flex;
   flex-direction: column;
   gap: var(--sp-3);
   align-items: center;
   text-align: center;
   font-size: var(--fs-xs);
   color: var(--c-text-3);
}

@media (min-width: 768px) {
   .footer-bottom {
      flex-direction: row;
      justify-content: space-between;
      text-align: left;
   }
}

/* ---------- 16. ANIMATIONS / REVEAL ---------- */
/* Content is ALWAYS visible. The .in / .in-view classes are kept for backward compat
   but content no longer hides waiting for JavaScript. This guarantees the site works
   even if JS is blocked, slow, or fails. */
.reveal {
   opacity: 1;
   transform: none;
   transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}

.reveal.in-view,
.reveal.in {
   opacity: 1;
   transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
   }
}

/* ---------- 17. UTILITY CLASSES ---------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.mt-auto { margin-top: auto; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }

.divider {
   height: 1px;
   background: var(--c-border);
   border: 0;
   margin: var(--sp-7) 0;
}

.badge {
   display: inline-flex;
   align-items: center;
   gap: var(--sp-2);
   padding: var(--sp-1) var(--sp-3);
   border-radius: var(--r-pill);
   font-size: var(--fs-xs);
   font-weight: 600;
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   color: var(--c-text-2);
}

.badge-lime {
   background: rgba(153, 255, 0, .1);
   border-color: var(--c-lime);
   color: var(--c-lime);
}

.icon-list {
   display: flex;
   flex-direction: column;
   gap: var(--sp-3);
}

.icon-list li {
   display: flex;
   align-items: flex-start;
   gap: var(--sp-3);
   font-size: var(--fs-md);
   color: var(--c-text);
}

.icon-list .check {
   flex-shrink: 0;
   width: 24px;
   height: 24px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: var(--c-lime);
   color: #000;
   font-weight: 700;
   font-size: 14px;
   margin-top: 2px;
}

/* Marquee for tech logos */
.marquee {
   overflow: hidden;
   width: 100%;
   mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee-track {
   display: flex;
   gap: var(--sp-8);
   width: max-content;
   animation: marquee 40s linear infinite;
}

@keyframes marquee {
   to { transform: translateX(-50%); }
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-item {
   font-family: 'Space Grotesk', sans-serif;
   font-size: var(--fs-2xl);
   font-weight: 600;
   color: var(--c-text-3);
   white-space: nowrap;
   transition: color var(--t-fast) var(--ease);
}

.marquee-item:hover { color: var(--c-lime); }

.marquee-item .dot {
   display: inline-block;
   margin-left: var(--sp-7);
   color: var(--c-lime);
   opacity: .5;
}

/* ---------- 18. BACK TO TOP ---------- */
.back-to-top {
   position: fixed;
   bottom: var(--sp-5);
   right: var(--sp-5);
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--c-lime);
   color: #000;
   display: grid;
   place-items: center;
   z-index: 90;
   opacity: 0;
   visibility: hidden;
   transform: translateY(20px);
   transition: all var(--t-med) var(--ease);
   box-shadow: var(--shadow-md);
}

.back-to-top.visible,
.back-to-top.show {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.back-to-top:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow-glow);
}

/* ---------- 19. WHATSAPP FLOAT ---------- */
.wa-float {
   position: fixed;
   bottom: var(--sp-5);
   left: var(--sp-5);
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: #25D366;
   color: #fff;
   display: grid;
   place-items: center;
   z-index: 90;
   box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
   transition: all var(--t-med) var(--ease);
}

.wa-float:hover {
   transform: scale(1.08);
   box-shadow: 0 12px 32px rgba(37, 211, 102, .5);
}

.wa-float::before {
   content: "";
   position: absolute;
   inset: -4px;
   border-radius: 50%;
   border: 2px solid #25D366;
   opacity: .5;
   animation: wa-pulse 2s ease-out infinite;
}

@keyframes wa-pulse {
   0% { transform: scale(1); opacity: .7; }
   100% { transform: scale(1.4); opacity: 0; }
}

/* ---------- 20. SCROLLBAR ---------- */
::-webkit-scrollbar {
   width: 8px;
   height: 8px;
}

::-webkit-scrollbar-track {
   background: var(--c-bg-2);
}

::-webkit-scrollbar-thumb {
   background: var(--c-border-2);
   border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
   background: var(--c-lime);
}

/* ---------- 21. SELECTION ---------- */
::selection {
   background: var(--c-lime);
   color: #000;
}

/* ---------- 22. PAGE HERO (interior pages) ---------- */
.page-hero {
   padding: var(--sp-9) 0 var(--sp-7);
   position: relative;
   overflow: hidden;
   text-align: center;
}

.page-hero h1 {
   font-size: var(--fs-4xl);
   margin-bottom: var(--sp-4);
}

.page-hero p {
   font-size: var(--fs-lg);
   max-width: 720px;
   margin: 0 auto;
}

/* Hero typography classes (used inline in HTML) */
.hero-title {
   font-family: 'Space Grotesk', sans-serif;
   font-size: clamp(2.25rem, 5.5vw, 4.5rem);
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: -0.02em;
   margin: 0 0 var(--sp-4);
   color: var(--c-text-strong);
}

.hero-sub {
   font-size: clamp(1.05rem, 1.4vw, 1.25rem);
   line-height: 1.55;
   color: var(--c-text-2);
   max-width: 720px;
   margin: 0 auto;
}

/* Aurora decorative background — soft for light theme */
.bg-aurora {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: -1;
   background:
      radial-gradient(ellipse 80% 50% at 20% 0%, rgba(153, 255, 0, .18) 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 80% 30%, rgba(0, 191, 255, .08) 0%, transparent 60%),
      radial-gradient(ellipse 50% 40% at 50% 100%, rgba(0, 255, 170, .08) 0%, transparent 70%);
   filter: blur(20px);
   opacity: .85;
}

.breadcrumbs {
   display: flex;
   justify-content: center;
   gap: var(--sp-2);
   font-size: var(--fs-sm);
   color: var(--c-text-3);
   margin-bottom: var(--sp-4);
}

.breadcrumbs a:hover { color: var(--c-lime); }
.breadcrumbs span { color: var(--c-text-3); }

/* ---------- 23. SPLIT SECTION ---------- */
.split {
   display: grid;
   gap: var(--sp-7);
   align-items: center;
}

@media (min-width: 1024px) {
   .split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
   .split.reverse > :first-child { order: 2; }
}

.split-img {
   border-radius: var(--r-lg);
   overflow: hidden;
   position: relative;
   aspect-ratio: 4/3;
}

.split-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.split-img::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, transparent 60%, rgba(153, 255, 0, .12));
   pointer-events: none;
}

/* ---------- 24. CTA BANNER ---------- */
.cta-banner {
   border-radius: var(--r-xl);
   padding: var(--sp-7) var(--sp-5);
   background: linear-gradient(135deg, rgba(153, 255, 0, .12) 0%, rgba(0, 255, 170, .04) 100%);
   border: 1px solid rgba(153, 255, 0, .25);
   text-align: center;
   position: relative;
   overflow: hidden;
}

@media (min-width: 768px) {
   .cta-banner { padding: var(--sp-8) var(--sp-7); }
}

.cta-banner::before {
   content: "";
   position: absolute;
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, var(--c-lime-glow) 0%, transparent 70%);
   top: -300px;
   right: -200px;
   pointer-events: none;
}

.cta-banner h2 {
   margin-bottom: var(--sp-3);
   position: relative;
}

.cta-banner p {
   font-size: var(--fs-lg);
   max-width: 580px;
   margin: 0 auto var(--sp-5);
   position: relative;
}

.cta-banner-actions {
   display: flex;
   flex-direction: column;
   gap: var(--sp-3);
   align-items: center;
   justify-content: center;
   position: relative;
}

@media (min-width: 480px) {
   .cta-banner-actions { flex-direction: row; }
}

/* ---------- 25. PILLS / TAGS ---------- */
.pills {
   display: flex;
   flex-wrap: wrap;
   gap: var(--sp-2);
}

.pill {
   padding: var(--sp-2) var(--sp-3);
   border-radius: var(--r-pill);
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   font-size: var(--fs-xs);
   font-weight: 500;
   color: var(--c-text-2);
   transition: all var(--t-fast) var(--ease);
}

.pill:hover {
   border-color: var(--c-lime);
   color: var(--c-lime);
}

/* ---------- 26. CONTACT BLOCK ---------- */
.contact-info-card {
   padding: var(--sp-5);
   border-radius: var(--r-md);
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   display: flex;
   align-items: flex-start;
   gap: var(--sp-4);
   transition: all var(--t-fast) var(--ease);
}

.contact-info-card:hover {
   border-color: var(--c-lime);
   transform: translateY(-2px);
}

.contact-info-card .icon {
   width: 44px;
   height: 44px;
   border-radius: var(--r-sm);
   background: rgba(153, 255, 0, .1);
   color: var(--c-lime);
   display: grid;
   place-items: center;
   flex-shrink: 0;
}

.contact-info-card h5 {
   font-size: var(--fs-sm);
   text-transform: uppercase;
   letter-spacing: .08em;
   color: var(--c-text-3);
   margin-bottom: var(--sp-1);
   font-weight: 600;
}

.contact-info-card p,
.contact-info-card a {
   font-size: var(--fs-md);
   color: var(--c-text-strong);
   font-weight: 500;
   margin: 0;
}

.contact-info-card a:hover { color: var(--c-lime); }

/* ---------- 27. AI BADGE ---------- */
.ai-badge {
   display: inline-flex;
   align-items: center;
   gap: var(--sp-2);
   padding: var(--sp-2) var(--sp-3);
   border-radius: var(--r-pill);
   background: linear-gradient(135deg, rgba(153, 255, 0, .15), rgba(0, 255, 170, .1));
   border: 1px solid rgba(153, 255, 0, .3);
   font-size: var(--fs-xs);
   font-weight: 600;
   color: var(--c-lime);
}

.ai-badge svg { width: 14px; height: 14px; }

/* ---------- 28. PRINT ---------- */
@media print {
   .site-header,
   .site-footer,
   .back-to-top,
   .wa-float,
   .mobile-drawer,
   .burger { display: none !important; }
   body { background: #fff; color: #000; }
}

/* ---------- 29. FOCUS VISIBLE A11Y ---------- */
:focus-visible {
   outline: 3px solid var(--c-lime);
   outline-offset: 2px;
   border-radius: var(--r-xs);
}

button:focus-visible,
.btn:focus-visible {
   outline-offset: 4px;
}

/* ---------- 30. SKIP LINK ---------- */
.skip-link {
   position: absolute;
   top: -100px;
   left: var(--sp-5);
   z-index: 999;
   padding: var(--sp-3) var(--sp-4);
   background: var(--c-lime);
   color: #000;
   border-radius: var(--r-sm);
   font-weight: 600;
   transition: top var(--t-fast) var(--ease);
}

.skip-link:focus {
   top: var(--sp-3);
}

/* ---------- 31. PAGE EXTENSIONS (services / dev / contact / etc) ---------- */

/* Hero pills */
.hero-pills {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   gap: var(--sp-2);
   margin-top: var(--sp-5);
   padding: 0;
}
.hero-pills li {
   font-size: var(--fs-xs);
   padding: 6px 14px;
   border-radius: 999px;
   background: rgba(255,255,255,.04);
   border: 1px solid var(--c-border);
   color: var(--c-text-2);
   font-family: 'Space Grotesk', sans-serif;
   letter-spacing: .03em;
}

/* Section alt (subtle background variation) */
.section-alt {
   background:
     radial-gradient(ellipse at 30% 0%, rgba(153,255,0,.04) 0%, transparent 50%),
     var(--c-bg-2);
}

/* Check list */
.check-list {
   list-style: none;
   padding: 0;
   margin: var(--sp-4) 0 0;
   display: grid;
   gap: var(--sp-2);
}
.check-list li {
   position: relative;
   padding-left: 28px;
   color: var(--c-text-2);
   font-size: var(--fs-sm);
   line-height: 1.55;
}
.check-list li::before {
   content: "";
   position: absolute;
   left: 0; top: 6px;
   width: 18px; height: 18px;
   background: var(--c-lime);
   border-radius: 50%;
   mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M5 12l5 5L20 7' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 70% no-repeat;
   -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M5 12l5 5L20 7' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 70% no-repeat;
}

/* Service card bullets */
.card-bullets {
   list-style: none;
   padding: 0;
   margin: var(--sp-3) 0 0;
   display: grid;
   gap: 6px;
}
.card-bullets li {
   font-size: 13px;
   color: var(--c-text-3);
   padding-left: 16px;
   position: relative;
}
.card-bullets li::before {
   content: "→";
   position: absolute;
   left: 0;
   color: var(--c-lime);
   font-weight: 700;
}

/* Step time */
.step-time {
   display: inline-block;
   margin-top: var(--sp-3);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--c-lime);
   padding: 4px 10px;
   background: rgba(153,255,0,.08);
   border: 1px solid rgba(153,255,0,.2);
   border-radius: 999px;
}

/* Tech stack grid */
.tech-stack-grid {
   display: grid;
   gap: var(--sp-5);
   grid-template-columns: 1fr;
}
@media (min-width: 600px) { .tech-stack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tech-stack-grid { grid-template-columns: repeat(3, 1fr); } }
.tech-stack-col {
   padding: var(--sp-5);
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: var(--r-lg);
   transition: all var(--t-base) var(--ease);
}
.tech-stack-col:hover {
   border-color: var(--c-lime);
   transform: translateY(-2px);
}
.tech-stack-col h4 {
   font-family: 'Space Grotesk', sans-serif;
   margin: 0 0 var(--sp-3);
   font-size: var(--fs-md);
   color: var(--c-text);
   letter-spacing: .02em;
}
.tag-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}
.tag-list li {
   font-size: 13px;
   padding: 5px 12px;
   border-radius: 6px;
   background: rgba(255,255,255,.04);
   border: 1px solid var(--c-border);
   color: var(--c-text-2);
   font-family: 'Space Grotesk', sans-serif;
}

/* Industries grid */
.industries-grid {
   display: grid;
   gap: var(--sp-4);
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.industry-tile {
   padding: var(--sp-5);
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: var(--r-lg);
   transition: all var(--t-base) var(--ease);
   text-align: center;
}
.industry-tile:hover {
   border-color: var(--c-lime);
   transform: translateY(-4px);
   box-shadow: 0 20px 40px -20px rgba(153,255,0,.2);
}
.industry-tile span {
   font-size: 38px;
   display: block;
   margin-bottom: var(--sp-2);
}
.industry-tile h4 {
   font-family: 'Space Grotesk', sans-serif;
   margin: 0 0 var(--sp-2);
   font-size: var(--fs-md);
}
.industry-tile p {
   color: var(--c-text-3);
   font-size: var(--fs-sm);
   margin: 0;
   line-height: 1.5;
}

/* CTA card */
.cta-card {
   text-align: center;
   max-width: 800px;
   margin: 0 auto;
   padding: var(--sp-7) var(--sp-5);
   border-radius: var(--r-xl);
   background:
     radial-gradient(ellipse at center, rgba(153,255,0,.1), transparent 70%),
     var(--c-surface);
   border: 1px solid var(--c-border);
}
.cta-card h2 {
   font-size: clamp(28px, 4vw, 44px);
   margin: 0 0 var(--sp-3);
}
.cta-card p {
   color: var(--c-text-2);
   margin: 0 0 var(--sp-5);
   font-size: var(--fs-md);
   max-width: 540px;
   margin-left: auto;
   margin-right: auto;
}
.cta-card .hero-cta { justify-content: center; }

/* Pricing cards */
.pricing-grid {
   display: grid;
   gap: var(--sp-5);
   grid-template-columns: 1fr;
}
@media (min-width: 800px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.pricing-card {
   padding: var(--sp-6);
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: var(--r-lg);
   position: relative;
}
.pricing-card.featured {
   border-color: var(--c-lime);
   background:
     radial-gradient(ellipse at top, rgba(153,255,0,.08), transparent 60%),
     var(--c-surface);
   transform: scale(1.02);
}
.pricing-card.featured::before {
   content: "Recomendado";
   position: absolute;
   top: -12px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--c-lime);
   color: #000;
   padding: 4px 14px;
   border-radius: 999px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
}
.pricing-card h4 {
   font-family: 'Space Grotesk', sans-serif;
   font-size: var(--fs-lg);
   margin: 0 0 var(--sp-2);
}
.pricing-card .price {
   font-family: 'Space Grotesk', sans-serif;
   font-size: 36px;
   color: var(--c-lime);
   font-weight: 700;
   margin: var(--sp-3) 0;
}
.pricing-card .price small {
   font-size: 14px;
   color: var(--c-text-3);
   font-weight: 400;
}

/* Contact form */
.contact-grid {
   display: grid;
   gap: var(--sp-6);
   grid-template-columns: 1fr;
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.contact-info-card {
   padding: var(--sp-6);
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: var(--r-lg);
   display: grid;
   gap: var(--sp-4);
   align-content: start;
}
.contact-info-item {
   display: flex;
   gap: var(--sp-3);
   align-items: flex-start;
}
.contact-info-item .icon {
   flex-shrink: 0;
   width: 44px;
   height: 44px;
   border-radius: var(--r-md);
   background: rgba(153,255,0,.12);
   color: var(--c-lime);
   display: grid;
   place-items: center;
}
.contact-info-item h5 {
   margin: 0 0 4px;
   font-family: 'Space Grotesk', sans-serif;
   font-size: var(--fs-sm);
   color: var(--c-text-3);
   text-transform: uppercase;
   letter-spacing: .08em;
   font-weight: 500;
}
.contact-info-item p, .contact-info-item a {
   margin: 0;
   color: var(--c-text);
   font-size: var(--fs-md);
   text-decoration: none;
}
.contact-info-item a:hover { color: var(--c-lime); }

.form-card {
   padding: var(--sp-6);
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: var(--r-lg);
}
.form-row {
   display: grid;
   gap: var(--sp-4);
   margin-bottom: var(--sp-4);
}
@media (min-width: 600px) { .form-row.cols-2 { grid-template-columns: 1fr 1fr; } }
.form-field { display: grid; gap: 6px; }
.form-field label {
   font-size: 13px;
   font-weight: 500;
   color: var(--c-text-2);
   font-family: 'Space Grotesk', sans-serif;
   letter-spacing: .02em;
}
.form-field input,
.form-field textarea,
.form-field select {
   width: 100%;
   padding: 13px 14px;
   background: rgba(255,255,255,.03);
   border: 1px solid var(--c-border);
   border-radius: var(--r-sm);
   color: var(--c-text);
   font-size: var(--fs-md);
   font-family: 'Inter', sans-serif;
   transition: all var(--t-fast) var(--ease);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
   outline: none;
   border-color: var(--c-lime);
   background: rgba(153,255,0,.04);
   box-shadow: 0 0 0 3px rgba(153,255,0,.12);
}
.form-field textarea { resize: vertical; min-height: 130px; }

/* Honeypot (must be invisible to humans) */
.hp-field {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

/* Captcha box */
.captcha-box {
   display: flex;
   align-items: stretch;
   gap: var(--sp-3);
   padding: var(--sp-3);
   background: rgba(153,255,0,.05);
   border: 1px solid rgba(153,255,0,.2);
   border-radius: var(--r-md);
   margin-bottom: var(--sp-2);
}
.captcha-box .captcha-q {
   flex: 1;
   font-family: 'Space Grotesk', sans-serif;
   font-size: var(--fs-md);
   font-weight: 600;
   color: var(--c-text);
   display: flex;
   align-items: center;
   padding: 0 var(--sp-2);
   user-select: none;
}
.captcha-box .captcha-q strong {
   color: var(--c-lime);
   margin: 0 6px;
   font-size: 1.15em;
}
.captcha-box input {
   width: 90px;
   padding: 10px 12px;
   background: var(--c-bg);
   border: 1px solid var(--c-border);
   border-radius: var(--r-sm);
   color: var(--c-text);
   font-size: var(--fs-md);
   font-family: 'Space Grotesk', sans-serif;
   text-align: center;
   font-weight: 600;
}
.captcha-box input:focus {
   outline: none;
   border-color: var(--c-lime);
   box-shadow: 0 0 0 3px rgba(153,255,0,.15);
}
.captcha-refresh {
   background: transparent;
   border: 1px solid var(--c-border);
   border-radius: var(--r-sm);
   color: var(--c-text-2);
   width: 42px;
   cursor: pointer;
   transition: all var(--t-fast) var(--ease);
   display: grid;
   place-items: center;
}
.captcha-refresh:hover {
   border-color: var(--c-lime);
   color: var(--c-lime);
   transform: rotate(180deg);
}
.captcha-help {
   font-size: 12px;
   color: var(--c-text-3);
   margin-top: 6px;
}

.form-msg {
   padding: 14px 16px;
   border-radius: var(--r-sm);
   margin-top: var(--sp-3);
   font-size: var(--fs-sm);
   display: none;
}
.form-msg.success {
   background: rgba(46,213,115,.1);
   border: 1px solid rgba(46,213,115,.3);
   color: #2ed573;
   display: block;
}
.form-msg.error {
   background: rgba(255,71,87,.1);
   border: 1px solid rgba(255,71,87,.3);
   color: #ff4757;
   display: block;
}

/* Generic page header for inner pages */
.inner-page-header {
   padding: 140px 0 60px;
   text-align: center;
   position: relative;
   overflow: hidden;
}
.inner-page-header h1 {
   font-size: clamp(36px, 6vw, 64px);
   margin: 0 0 var(--sp-3);
   font-family: 'Space Grotesk', sans-serif;
   letter-spacing: -.02em;
   line-height: 1.05;
}
.inner-page-header p {
   max-width: 720px;
   margin: 0 auto;
   color: var(--c-text-2);
   font-size: var(--fs-md);
}

/* Two-column content rows */
.two-col {
   display: grid;
   gap: var(--sp-7);
   align-items: center;
   grid-template-columns: 1fr;
}
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }
.two-col.reverse > :first-child { order: 1; }
@media (min-width: 900px) { .two-col.reverse > :first-child { order: 2; } }

/* Stat strip */
.stat-strip {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--sp-4);
   padding: var(--sp-6);
   border-radius: var(--r-lg);
   background: var(--c-surface);
   border: 1px solid var(--c-border);
}
@media (min-width: 700px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }
.stat-strip .stat {
   text-align: center;
}
.stat-strip .stat-num {
   font-family: 'Space Grotesk', sans-serif;
   font-size: clamp(28px, 4vw, 44px);
   color: var(--c-lime);
   font-weight: 700;
   line-height: 1;
   margin-bottom: 6px;
}
.stat-strip .stat-label {
   font-size: 13px;
   color: var(--c-text-3);
   text-transform: uppercase;
   letter-spacing: .08em;
}

/* Blog cards */
.blog-grid {
   display: grid;
   gap: var(--sp-5);
   grid-template-columns: 1fr;
}
@media (min-width: 700px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card {
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: var(--r-lg);
   overflow: hidden;
   transition: all var(--t-base) var(--ease);
}
.blog-card:hover {
   border-color: var(--c-lime);
   transform: translateY(-4px);
}
.blog-card-img {
   aspect-ratio: 16 / 9;
   background: var(--c-bg-2);
   overflow: hidden;
}
.blog-card-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform var(--t-slow) var(--ease);
}
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-body { padding: var(--sp-5); }
.blog-card-meta {
   font-size: 12px;
   color: var(--c-text-3);
   text-transform: uppercase;
   letter-spacing: .08em;
   margin-bottom: var(--sp-2);
}
.blog-card h3 {
   font-family: 'Space Grotesk', sans-serif;
   font-size: var(--fs-lg);
   margin: 0 0 var(--sp-2);
   line-height: 1.3;
}
.blog-card h3 a {
   color: var(--c-text);
   text-decoration: none;
}
.blog-card h3 a:hover { color: var(--c-lime); }
.blog-card p {
   color: var(--c-text-3);
   font-size: var(--fs-sm);
   margin: 0 0 var(--sp-3);
}
.blog-card .read-more {
   color: var(--c-lime);
   font-size: 13px;
   font-weight: 600;
   text-decoration: none;
   font-family: 'Space Grotesk', sans-serif;
}

/* Map embed wrapper */
.map-wrap {
   border-radius: var(--r-lg);
   overflow: hidden;
   border: 1px solid var(--c-border);
   aspect-ratio: 16 / 9;
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; }

/* Marker dot pulse for eyebrow */
.dot-pulse {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--c-lime);
   margin-right: 8px;
   box-shadow: 0 0 0 0 var(--c-lime);
   animation: dot-pulse 2s ease-out infinite;
   vertical-align: middle;
}
@keyframes dot-pulse {
   0% { box-shadow: 0 0 0 0 rgba(153,255,0,.6); }
   80%, 100% { box-shadow: 0 0 0 12px rgba(153,255,0,0); }
}

/* Privacy / TOS prose */
.prose {
   max-width: 760px;
   margin: 0 auto;
}
.prose h2 {
   font-family: 'Space Grotesk', sans-serif;
   margin-top: var(--sp-7);
   font-size: var(--fs-xl);
}
.prose h3 {
   margin-top: var(--sp-5);
   font-size: var(--fs-lg);
}
.prose p, .prose li {
   color: var(--c-text-2);
   line-height: 1.7;
}
.prose ul, .prose ol { padding-left: 1.4em; }
.prose a { color: var(--c-lime); }

/* ---------- 32. NAV ALIASES (compat) ---------- */
.nav-burger {
   display: inline-flex;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   width: 44px;
   height: 44px;
   padding: 0;
   background: transparent;
   border: 1px solid var(--c-border);
   border-radius: var(--r-sm);
   cursor: pointer;
   align-items: center;
}
@media (min-width: 960px) {
   .nav-burger { display: none; }
}
.nav-burger span {
   display: block;
   width: 22px;
   height: 2px;
   background: var(--c-text);
   border-radius: 2px;
   transition: all var(--t-fast) var(--ease);
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
   position: fixed;
   inset: 64px 0 0 0;
   background: var(--c-bg);
   z-index: 90;
   padding: var(--sp-6) var(--sp-5);
   transform: translateX(100%);
   transition: transform var(--t-base) var(--ease);
   overflow-y: auto;
   border-top: 1px solid var(--c-border);
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer ul {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   gap: 4px;
}
.nav-drawer ul li a {
   display: block;
   padding: 14px 16px;
   color: var(--c-text);
   text-decoration: none;
   font-size: var(--fs-md);
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 600;
   border-radius: var(--r-sm);
   border: 1px solid transparent;
   transition: all var(--t-fast) var(--ease);
}
.nav-drawer ul li a:hover,
.nav-drawer ul li a.active {
   background: var(--c-lime);
   border-color: var(--c-lime);
   color: var(--c-bg);
}
@media (min-width: 960px) {
   .nav-drawer { display: none; }
}

.nav-desktop { display: none; }
@media (min-width: 960px) {
   .nav-desktop { display: block; }
}
.nav-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   gap: 4px;
   align-items: center;
}
.nav-list > li > a {
   display: inline-block;
   padding: 10px 14px;
   color: var(--c-text);
   text-decoration: none;
   font-size: var(--fs-sm);
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 600;
   border-radius: var(--r-sm);
   transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-list > li > a:hover,
.nav-list > li > a.active {
   color: var(--c-bg);
   background: var(--c-lime);
}
.nav-list .lang-switch {
   margin-left: var(--sp-2);
   border: 1px solid var(--c-border);
   font-weight: 700;
   color: var(--c-text);
   background: var(--c-bg-2);
}
.nav-list .lang-switch:hover {
   border-color: var(--c-lime);
   background: var(--c-lime);
   color: var(--c-bg);
}
.has-dropdown { position: relative; }
.has-dropdown > a::after { content: ''; }

/* Invisible bridge between the menu item and the dropdown, so the cursor 
   can move down without losing hover state */
.has-dropdown::before {
   content: '';
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   height: 12px;
   background: transparent;
   pointer-events: none;
}
.has-dropdown:hover::before,
.has-dropdown:focus-within::before {
   pointer-events: auto;
}

.dropdown {
   position: absolute;
   top: calc(100% + 6px);
   left: 0;
   min-width: 240px;
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: var(--r-md);
   padding: 6px;
   list-style: none;
   margin: 0;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-6px);
   transition: opacity var(--t-fast) var(--ease), visibility var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
   box-shadow: 0 20px 40px -10px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.06);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}
.dropdown li a {
   display: block;
   padding: 10px 14px;
   color: var(--c-text);
   text-decoration: none;
   font-size: var(--fs-sm);
   font-weight: 500;
   border-radius: var(--r-xs);
   transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dropdown li a:hover,
.dropdown li a.active {
   background: var(--c-lime);
   color: var(--c-bg);
}

.nav-wrap {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--sp-4);
   padding: 14px 0;
}
.nav-logo img {
   height: 36px;
   width: auto;
   display: block;
}

/* ---------- 33. CLICK CAPTCHA (anti-robot) ---------- */
.click-captcha {
   display: inline-flex;
   align-items: center;
   gap: 14px;
   padding: 14px 20px;
   background: #FFFFFF;
   border: 2px solid #D5DBE3;
   border-radius: 6px;
   cursor: pointer;
   user-select: none;
   font-size: 15px;
   font-weight: 500;
   color: var(--c-text);
   transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
   min-width: 280px;
   max-width: 320px;
}

.click-captcha:hover {
   border-color: var(--c-lime);
   box-shadow: 0 0 0 4px rgba(153, 255, 0, .12);
}

.click-captcha:focus-visible {
   outline: none;
   border-color: var(--c-lime);
   box-shadow: 0 0 0 4px rgba(153, 255, 0, .25);
}

.cc-checkbox {
   width: 28px;
   height: 28px;
   border: 2px solid #B0B6C0;
   border-radius: 4px;
   background: #FFFFFF;
   display: grid;
   place-items: center;
   flex-shrink: 0;
   transition: all var(--t-fast) var(--ease);
}

.cc-checkbox .cc-spinner,
.cc-checkbox .cc-check {
   grid-column: 1;
   grid-row: 1;
   color: var(--c-lime-text);
   transition: opacity var(--t-fast) var(--ease);
}

.cc-checkbox .cc-spinner {
   opacity: 0;
   animation: cc-spin 1s linear infinite;
}

.cc-checkbox .cc-check {
   opacity: 0;
}

.click-captcha.checking .cc-checkbox .cc-spinner {
   opacity: 1;
}

.click-captcha.verified {
   border-color: var(--c-lime);
   background: #F8FFF0;
   cursor: default;
}

.click-captcha.verified .cc-checkbox {
   border-color: var(--c-lime);
   background: var(--c-lime);
}

.click-captcha.verified .cc-checkbox .cc-check {
   opacity: 1;
   color: #000;
}

.click-captcha.error {
   border-color: #ef4444;
   animation: cc-shake 0.4s ease-in-out;
}

.cc-label {
   flex: 1;
   font-family: 'Inter', sans-serif;
}

.cc-shield {
   color: var(--c-text-3);
   opacity: .65;
   flex-shrink: 0;
}

.click-captcha.verified .cc-shield {
   color: var(--c-lime-text);
   opacity: 1;
}

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

@keyframes cc-shake {
   0%, 100% { transform: translateX(0); }
   25% { transform: translateX(-6px); }
   75% { transform: translateX(6px); }
}

/* ---------- 34. SOFTWARE-DEV VALUE PROP GRID ---------- */
.value-prop-grid {
   display: grid;
   gap: var(--sp-4);
   grid-template-columns: 1fr;
}

@media (min-width: 700px) {
   .value-prop-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--sp-5);
   }
}

@media (min-width: 1024px) {
   .value-prop-grid {
      grid-template-columns: repeat(6, 1fr);
   }
   /* First and last cards span 3 cols (half each), middle 4 are smaller */
   .value-prop-grid > article:nth-child(1),
   .value-prop-grid > article:nth-child(6) {
      grid-column: span 3;
      grid-row: span 2;
   }
   .value-prop-grid > article.bento-lg {
      grid-column: span 3;
      grid-row: span 2;
   }
   .value-prop-grid > article:not(.bento-lg) {
      grid-column: span 3;
   }
}

.value-prop-grid > article {
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: var(--r-lg);
   padding: var(--sp-5);
   box-shadow: var(--shadow-sm);
   transition: all var(--t-med) var(--ease);
   display: flex;
   flex-direction: column;
   gap: var(--sp-3);
}

.value-prop-grid > article:hover {
   border-color: var(--c-lime);
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg);
}

.value-prop-grid .card-icon {
   font-size: 2.5rem;
   line-height: 1;
   margin-bottom: var(--sp-2);
}

.value-prop-grid h3 {
   font-family: 'Space Grotesk', sans-serif;
   font-size: 1.35rem;
   font-weight: 700;
   color: var(--c-text-strong);
   margin: 0;
}

.value-prop-grid p {
   color: var(--c-text-2);
   line-height: 1.6;
   margin: 0;
}

.value-prop-grid .check-list {
   list-style: none;
   padding: 0;
   margin: var(--sp-2) 0 0;
   display: grid;
   gap: 8px;
}

.value-prop-grid .check-list li {
   position: relative;
   padding-left: 28px;
   color: var(--c-text-2);
   font-size: 0.95rem;
}

.value-prop-grid .check-list li::before {
   content: "✓";
   position: absolute;
   left: 0;
   top: 0;
   width: 20px;
   height: 20px;
   background: var(--c-lime);
   color: #000;
   border-radius: 50%;
   font-size: 12px;
   font-weight: 700;
   display: grid;
   place-items: center;
}

/* ---------- 35. SOFTLAND BENTO FIX (services-grid-2 variant) ---------- */
.services-grid-2 {
   display: grid;
   gap: var(--sp-4);
   grid-template-columns: 1fr;
}

@media (min-width: 700px) {
   .services-grid-2 {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--sp-5);
   }
}

@media (min-width: 1024px) {
   .services-grid-2 {
      grid-template-columns: repeat(6, 1fr);
   }
   .services-grid-2 > .service-card-feature {
      grid-column: span 3;
      grid-row: span 2;
   }
   .services-grid-2 > .service-card-wide {
      grid-column: span 6;
   }
   .services-grid-2 > .service-card:not(.service-card-feature):not(.service-card-wide) {
      grid-column: span 3;
   }
}

.service-card-feature {
   background: linear-gradient(135deg, rgba(153, 255, 0, .12) 0%, rgba(0, 255, 170, .04) 100%);
   border-color: rgba(153, 255, 0, .35);
}

.services-grid-2 > .service-card h3 {
   font-family: 'Space Grotesk', sans-serif;
   font-size: 1.35rem;
   font-weight: 700;
   margin: 8px 0 12px;
}

.services-grid-2 > .service-card p {
   color: var(--c-text-2);
   line-height: 1.6;
   margin: 0;
}