/* ==========================================================================
   LC-SYSTEM — DESIGN TOKENS
   ========================================================================== */
:root{
  --bg-0:#050505;
  --bg-1:#080b0a;
  --bg-2:#0d1210;
  --surface:#0f1512;
  --surface-hover:#131a16;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(53,242,160,.28);
  --text-0:#f4f7f5;
  --text-1:#aeb8b3;
  --text-2:#6d7772;
  --accent:#35F2A0;
  --accent-dim:#1c8f60;
  --accent-glow:rgba(53,242,160,.35);
  --danger:#ff6b6b;

  --font-display:'Space Grotesk', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --container:1180px;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --ease: cubic-bezier(.16,.8,.28,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}
body{
  margin:0;
  background:var(--bg-0);
  color:var(--text-0);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit;}
h1,h2,h3{font-family:var(--font-display); font-weight:600; line-height:1.08; margin:0; letter-spacing:-.01em;}
p{margin:0;}
.mono{font-family:var(--font-mono);}

.container{max-width:var(--container); margin:0 auto; padding:0 28px;}

::selection{background:var(--accent); color:#04120a;}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;
}

/* ==========================================================================
   PRELOADER
   ========================================================================== */
#preloader{
  position:fixed; inset:0; z-index:9999; background:var(--bg-0);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#preloader.hidden{opacity:0; visibility:hidden; pointer-events:none;}
.preloader-inner{display:flex; flex-direction:column; align-items:center; gap:10px;}
.preloader-mark{animation:pulse 1.6s ease-in-out infinite; width:auto;}
@keyframes pulse{0%,100%{opacity:.5; transform:scale(.94);} 50%{opacity:1; transform:scale(1);}}
.preloader-text{font-family:var(--font-display); font-size:20px; letter-spacing:.02em; margin-top:8px;}
.preloader-sub{font-family:var(--font-mono); font-size:12px; color:var(--text-2); margin-top:4px;}
.dots span{animation:blink 1.4s infinite; opacity:0;}
.dots span:nth-child(2){animation-delay:.2s;}
.dots span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,20%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}
.preloader-bar{width:160px; height:2px; background:rgba(255,255,255,.08); margin-top:18px; border-radius:2px; overflow:hidden;}
.preloader-bar-fill{width:0%; height:100%; background:var(--accent); box-shadow:0 0 10px var(--accent-glow); transition:width 1s var(--ease);}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:18px 0;
  transition:background .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
  border-bottom:1px solid transparent;
}
.navbar.scrolled{
  background:rgba(5,6,6,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:12px 0;
  border-bottom-color:var(--border);
}
.navbar-inner{
  max-width:var(--container); margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-size:18px; font-weight:600;}
.brand img{width:auto; display:block;}
.brand-dash{color:var(--accent);}
.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links a{font-size:14px; color:var(--text-1); transition:color .2s;}
.nav-links a:hover{color:var(--text-0);}
.navbar-actions{display:flex; align-items:center; gap:14px;}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px;}
.nav-toggle span{width:20px; height:2px; background:var(--text-0); border-radius:2px; transition:transform .25s var(--ease), opacity .25s var(--ease);}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:999px; font-size:14px; font-weight:600;
  border:1px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--accent); color:#04120a; box-shadow:0 0 0 rgba(53,242,160,0);}
.btn-primary:hover{box-shadow:0 0 44px var(--accent-glow), 0 10px 30px -10px rgba(0,0,0,.6); transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--text-0); border-color:var(--border);}
.btn-ghost:hover{border-color:var(--border-strong); background:rgba(53,242,160,.07); box-shadow:0 0 26px -6px var(--accent-glow); transform:translateY(-2px);}
.btn-sm{padding:9px 18px; font-size:13px;}
.btn-block{width:100%;}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:140px 24px 80px; overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, #0a1512 0%, var(--bg-0) 60%);
}
#heroCanvas{position:absolute; inset:0; width:100%; height:100%; opacity:.55;}
.hero-grid-overlay{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(53,242,160,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(53,242,160,.05) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 60% 50% at 50% 30%, black 0%, transparent 75%);
  pointer-events:none;
}
.hero-content{position:relative; z-index:2; max-width:840px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12.5px;
  color:var(--accent); border:1px solid var(--border-strong); background:rgba(53,242,160,.06);
  padding:7px 16px; border-radius:999px; margin-bottom:26px; letter-spacing:.01em;
}
.dot-live{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent-glow); animation:blink-dot 2s infinite;}
@keyframes blink-dot{0%,100%{opacity:1;}50%{opacity:.35;}}
.hero-title{font-size:clamp(38px,6.4vw,74px); margin-bottom:22px;}
.text-accent{color:var(--accent);}
.hero-sub{font-size:clamp(15px,1.6vw,18px); color:var(--text-1); max-width:600px; margin:0 auto 38px; line-height:1.6;}
.hero-actions{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;}
.hero-meta{display:flex; align-items:center; justify-content:center; gap:22px; margin-top:56px; color:var(--text-2); font-size:13px;}
.hero-meta-item{display:flex; flex-direction:column; align-items:center; gap:2px;}
.hero-meta-item .mono{color:var(--text-0); font-size:16px;}
.hero-meta-sep{width:1px; height:28px; background:var(--border);}
.scroll-cue{position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2;}
.scroll-cue span{display:block; width:1px; height:34px; background:linear-gradient(var(--accent), transparent); animation:scrollcue 1.8s infinite;}
@keyframes scrollcue{0%{opacity:0; transform:translateY(-8px);}30%{opacity:1;}100%{opacity:0; transform:translateY(14px);}}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.section{padding:120px 0;}
.section-alt{background:var(--bg-1); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.section-head{max-width:640px; margin:0 auto 64px; text-align:center;}
.section-head-inline{max-width:640px; margin:0 auto 40px; text-align:center;}
.eyebrow-label{
  display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.section-head h2, .section-head-inline h2{font-size:clamp(28px,3.6vw,42px);}
.section-desc{margin-top:16px; color:var(--text-1); font-size:15.5px; line-height:1.6;}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ==========================================================================
   SERVICE CARDS (cursor-follow glow)
   ========================================================================== */
.cards-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.glow-card{
  position:relative; padding:26px 22px; border-radius:var(--radius-md);
  background:var(--surface); border:1px solid var(--border);
  overflow:hidden; transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.glow-card::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .35s;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(53,242,160,.14), transparent 70%);
  pointer-events:none;
}
.glow-card:hover{border-color:var(--border-strong); transform:translateY(-6px); background:var(--surface-hover); box-shadow:0 24px 60px -20px rgba(0,0,0,.65), 0 0 40px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.04);}
.glow-card:hover::before{opacity:1;}
.glow-card:hover .card-icon{background:rgba(53,242,160,.16); box-shadow:0 0 24px -4px var(--accent-glow);}
.card-index{font-family:var(--font-mono); font-size:12px; color:var(--text-2); display:block; margin-bottom:16px;}
.card-icon{width:38px; height:38px; border-radius:10px; background:rgba(53,242,160,.08); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--accent); transition:background .3s var(--ease), box-shadow .3s var(--ease);}
.glow-card h3{font-size:17px; margin-bottom:8px;}
.glow-card p{font-size:13.8px; color:var(--text-1); line-height:1.55;}

/* ==========================================================================
   PRODUCTS
   ========================================================================== */
.products-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.product-card{
  position:relative; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border);
  padding:24px; display:flex; flex-direction:column; gap:14px; transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  overflow:hidden;
}
.product-card:hover{transform:translateY(-7px); border-color:var(--border-strong); box-shadow:0 26px 64px -22px rgba(0,0,0,.7), 0 0 44px -8px var(--accent-glow);}
.product-glyph{
  width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg, rgba(53,242,160,.16), rgba(53,242,160,.02));
  border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); color:var(--accent); font-weight:700; font-size:15px;
  transition:box-shadow .3s var(--ease);
}
.product-card:hover .product-glyph{box-shadow:0 0 26px -4px var(--accent-glow);}
.product-card h3{font-size:16px;}
.product-card p{font-size:13.3px; color:var(--text-1); line-height:1.55; flex:1;}
.product-status{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-2); display:flex; align-items:center; gap:6px;}
.product-status .dot-live{width:5px; height:5px;}

/* ==========================================================================
   SHOWCASE
   ========================================================================== */
.showcase-wrap{display:flex; flex-direction:column; gap:80px;}
.showcase-item{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.showcase-item.reverse{direction:rtl;}
.showcase-item.reverse > *{direction:ltr;}
.showcase-copy .eyebrow-label{margin-bottom:10px;}
.showcase-copy h3{font-size:24px; margin-bottom:12px;}
.showcase-copy p{color:var(--text-1); font-size:14.5px; line-height:1.65; margin-bottom:18px;}
.showcase-tags{display:flex; gap:8px; flex-wrap:wrap;}
.tag{font-family:var(--font-mono); font-size:11px; padding:5px 10px; border:1px solid var(--border); border-radius:6px; color:var(--text-1);}
.mock-frame{
  border-radius:var(--radius-lg); border:1px solid var(--border); background:linear-gradient(160deg, #0b100e, #060807);
  padding:16px; box-shadow:0 30px 80px -30px rgba(0,0,0,.7); position:relative;
}
.mock-topbar{display:flex; align-items:center; gap:6px; margin-bottom:14px; padding:0 4px;}
.mock-topbar span{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.14);}
.mock-body{display:grid; grid-template-columns:70px 1fr; gap:12px; min-height:220px;}
.mock-side{background:rgba(255,255,255,.03); border-radius:8px; padding:10px 6px; display:flex; flex-direction:column; gap:8px;}
.mock-side i{display:block; height:8px; border-radius:4px; background:rgba(255,255,255,.08);}
.mock-side i.on{background:var(--accent); opacity:.6;}
.mock-main{display:flex; flex-direction:column; gap:8px;}
.mock-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}
.mock-stat{background:rgba(255,255,255,.03); border-radius:8px; padding:10px; border:1px solid var(--border);}
.mock-stat b{display:block; font-family:var(--font-mono); font-size:15px; color:var(--accent);}
.mock-stat span{font-size:10px; color:var(--text-2);}
.mock-chart{flex:1; background:rgba(255,255,255,.03); border-radius:8px; border:1px solid var(--border); padding:10px; display:flex; align-items:flex-end; gap:5px;}
.mock-chart i{flex:1; background:linear-gradient(180deg, var(--accent), rgba(53,242,160,.1)); border-radius:3px 3px 0 0; opacity:.7;}

/* ==========================================================================
   TRANSFORM (antes/despues)
   ========================================================================== */
.transform-panel{display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch; max-width:900px; margin:0 auto; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;}
.transform-col{padding:38px 34px;}
.transform-before{background:var(--bg-1);}
.transform-after{background:linear-gradient(160deg, rgba(53,242,160,.07), transparent);}
.transform-label{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); display:block; margin-bottom:18px;}
.transform-after .transform-label{color:var(--accent);}
.transform-col li{padding:9px 0; font-size:14.5px; color:var(--text-1); border-bottom:1px dashed var(--border); display:flex; align-items:center; gap:10px;}
.transform-col li:last-child{border-bottom:none;}
.transform-after li{color:var(--text-0);}
.transform-center{display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; background:var(--bg-0); padding:0 26px;}
.transform-line{position:absolute; top:0; bottom:0; left:50%; width:1px; background:linear-gradient(var(--border), var(--accent-glow), var(--border));}
.transform-node{width:44px; height:44px; border-radius:12px; background:var(--accent); display:flex; align-items:center; justify-content:center; position:relative; z-index:1; box-shadow:0 0 30px var(--accent-glow);}

/* ==========================================================================
   FLOW DIAGRAM
   ========================================================================== */
.flow-diagram{display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; max-width:980px; margin:0 auto;}
.flow-node{
  display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 16px; min-width:130px; text-align:center;
}
.flow-node-icon{
  width:52px; height:52px; border-radius:14px; background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--accent); transition:border-color .3s, box-shadow .3s;
}
.flow-node.active .flow-node-icon{border-color:var(--accent); box-shadow:0 0 22px var(--accent-glow);}
.flow-node span{font-size:12.5px; color:var(--text-1); font-family:var(--font-mono);}
.flow-arrow{width:38px; height:1px; background:linear-gradient(90deg, var(--border), var(--accent-glow)); position:relative; flex-shrink:0;}
.flow-arrow::after{content:''; position:absolute; right:-1px; top:-3px; width:6px; height:6px; border-right:1px solid var(--accent-dim); border-bottom:1px solid var(--accent-dim); transform:rotate(-45deg);}
.flow-caption{text-align:center; margin-top:36px; font-size:14px; color:var(--text-1); max-width:640px; margin-left:auto; margin-right:auto; line-height:1.7;}
.flow-caption b{color:var(--text-0); font-weight:600;}

/* ==========================================================================
   TECH MARQUEE
   ========================================================================== */
.tech-marquee{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:900px; margin:0 auto;}
.tech-pill{
  display:flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); font-family:var(--font-mono); font-size:13px; color:var(--text-1); transition:border-color .25s, color .25s, transform .25s;
}
.tech-pill:hover{border-color:var(--border-strong); color:var(--text-0); transform:translateY(-3px); box-shadow:0 16px 34px -14px rgba(0,0,0,.6), 0 0 22px -6px var(--accent-glow);}
.tech-pill .tdot{width:6px; height:6px; border-radius:50%; background:var(--accent);}

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process-rail{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; position:relative;}
.process-rail::before{content:''; position:absolute; top:24px; left:5%; right:5%; height:1px; background:var(--border); z-index:0;}
.process-step{position:relative; z-index:1; display:flex; flex-direction:column; gap:14px;}
.process-num{
  width:48px; height:48px; border-radius:50%; background:var(--bg-0); border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); color:var(--accent); font-size:14px;
}
.process-step h3{font-size:16px;}
.process-step p{font-size:13.3px; color:var(--text-1); line-height:1.55;}

/* ==========================================================================
   PROJECTS
   ========================================================================== */
.projects-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.project-card{
  border-radius:var(--radius-md); border:1px solid var(--border); background:var(--surface); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .3s var(--ease), border-color .3s, box-shadow .3s var(--ease);
}
.project-card:hover{transform:translateY(-7px); border-color:var(--border-strong); box-shadow:0 26px 64px -22px rgba(0,0,0,.7), 0 0 44px -8px var(--accent-glow);}
.project-media{
  height:150px; position:relative; background:linear-gradient(135deg, #0c1310, #060807);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.project-media svg{opacity:.9;}
.project-media::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.5)); }
.project-body{padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1;}
.project-body h3{font-size:16.5px;}
.project-body .p-desc{font-size:13.3px; color:var(--text-1); line-height:1.55;}
.project-meta{display:flex; flex-direction:column; gap:6px; margin-top:6px; font-size:12px;}
.project-meta div{display:flex; gap:6px;}
.project-meta b{color:var(--text-2); font-weight:600; min-width:64px; flex-shrink:0;}
.project-meta span{color:var(--text-1);}
.project-tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}

/* ==========================================================================
   METRICS
   ========================================================================== */
.metrics-section{padding:80px 0;}
.metrics-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center;}
.metric-item{padding:30px 20px; border:1px solid var(--border); border-radius:var(--radius-md);}
.metric-num{font-family:var(--font-mono); font-size:clamp(28px,3.4vw,40px); color:var(--accent); display:block;}
.metric-label{font-size:13px; color:var(--text-1); margin-top:6px; display:block;}

/* ==========================================================================
   PYME
   ========================================================================== */
.pyme-section{background:var(--bg-1); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.pyme-inner{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center;}
.pyme-copy h2{font-size:clamp(26px,3.2vw,36px); margin:14px 0 30px;}
.pyme-questions{display:flex; flex-direction:column; gap:12px;}
.pyme-q{
  padding:18px 20px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);
  font-size:14.5px; color:var(--text-1); display:flex; gap:12px; align-items:flex-start; transition:border-color .25s, color .25s;
}
.pyme-q:hover{border-color:var(--border-strong); color:var(--text-0);}
.pyme-q .q-mark{color:var(--accent); font-family:var(--font-mono); flex-shrink:0;}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta-section{padding:140px 0; text-align:center; background:radial-gradient(ellipse 70% 100% at 50% 100%, rgba(53,242,160,.08), transparent);}
.cta-inner h2{font-size:clamp(30px,4.4vw,52px); margin-bottom:18px;}
.cta-inner p{color:var(--text-1); font-size:16px; max-width:520px; margin:0 auto 36px;}

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */
.contact-inner{max-width:760px;}
.contact-form{display:flex; flex-direction:column; gap:18px;}
.contact-form[hidden]{display:none;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field label{font-size:13px; color:var(--text-1); font-family:var(--font-mono);}
.field input, .field select, .field textarea{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-0);
  padding:13px 14px; font-family:var(--font-body); font-size:14.5px; transition:border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent); outline:none;}
.field textarea{resize:vertical; min-height:100px;}
.form-hint{font-size:12px; color:var(--text-2); text-align:center; margin-top:2px;}
.form-success{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:60px 20px;
}
.form-success[hidden]{display:none;}
.form-success h3{font-size:22px;}
.form-success p{color:var(--text-1); font-size:14.5px;}

/* ==========================================================================
   WHATSAPP FLOAT
   ========================================================================== */
.whatsapp-float{
  position:fixed; bottom:26px; right:26px; z-index:400;
  width:56px; height:56px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 30px rgba(53,242,160,.35);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.whatsapp-float:hover{transform:scale(1.09); box-shadow:0 14px 54px rgba(53,242,160,.65);}
.whatsapp-tooltip{
  position:absolute; right:66px; white-space:nowrap; background:var(--surface); border:1px solid var(--border);
  padding:8px 14px; border-radius:8px; font-size:13px; color:var(--text-0); opacity:0; transform:translateX(6px);
  transition:opacity .2s, transform .2s; pointer-events:none;
}
.whatsapp-float:hover .whatsapp-tooltip{opacity:1; transform:translateX(0);}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--bg-1); border-top:1px solid var(--border); padding:70px 0 0;}
.footer-inner{display:grid; grid-template-columns:1.2fr 2fr; gap:60px; padding-bottom:56px;}
.footer-brand p{color:var(--text-1); font-size:14px; margin:14px 0 20px; max-width:280px; line-height:1.6;}
.footer-social{display:flex; gap:10px;}
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  color:var(--text-1); transition:border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.footer-social a:hover{border-color:var(--border-strong); color:var(--accent); transform:translateY(-3px); box-shadow:0 10px 24px -10px rgba(0,0,0,.6), 0 0 18px -6px var(--accent-glow);}
.footer-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.footer-col h4{font-size:13px; color:var(--text-2); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px; font-weight:500;}
.footer-col a{display:block; font-size:14px; color:var(--text-1); padding:6px 0; transition:color .2s;}
.footer-col a:hover{color:var(--accent);}
.footer-col-contact a{display:flex; align-items:flex-start; gap:9px;}
.footer-contact-icon{flex-shrink:0; display:inline-flex; color:var(--accent); opacity:.85; margin-top:2px;}
.footer-bottom{border-top:1px solid var(--border); padding:20px 0;}
.footer-bottom-inner{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--text-2); flex-wrap:wrap; gap:10px;}
.footer-tag{color:var(--accent);}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .cards-grid, .products-grid{grid-template-columns:repeat(2,1fr);}
  .projects-grid{grid-template-columns:repeat(2,1fr);}
  .metrics-grid{grid-template-columns:repeat(2,1fr);}
  .showcase-item, .showcase-item.reverse{grid-template-columns:1fr; direction:ltr;}
  .pyme-inner{grid-template-columns:1fr; gap:40px;}
  .footer-inner{grid-template-columns:1fr; gap:40px;}
  .footer-cols{grid-template-columns:repeat(2,1fr);}
  .process-rail{grid-template-columns:repeat(3,1fr); row-gap:36px;}
  .process-rail::before{display:none;}
}
@media (max-width:760px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px); background:var(--bg-1);
    border-left:1px solid var(--border); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:100px 30px; gap:6px; transform:translateX(100%); transition:transform .35s var(--ease); z-index:400;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{padding:12px 0; width:100%; border-bottom:1px solid var(--border); font-size:16px;}
  .nav-toggle{display:flex;}
  .navbar-actions .btn-sm{display:none;}
  .cards-grid, .products-grid, .projects-grid, .metrics-grid{grid-template-columns:1fr;}
  .transform-panel{grid-template-columns:1fr;}
  .transform-center{padding:26px 0;}
  .transform-line{left:26px; top:0; bottom:0; width:1px; height:auto;}
  .form-row{grid-template-columns:1fr;}
  .process-rail{grid-template-columns:1fr 1fr;}
  .flow-node{min-width:100px;}
  .footer-cols{grid-template-columns:1fr 1fr;}
  .hero{padding-top:120px;}
}
@media (max-width:480px){
  .process-rail{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:1fr;}
}

/* Nav toggle open state (X) */
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}