/*!
Theme Name: webdesignvaliasolution
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Tema personalizado One Page para Valia Solution
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: webdesignvaliasolution
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

webdesignvaliasolution is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Variables
# Reset & Base
# Utilidades
# Botones
# Header / Nav
# Hero
# Cifras
# Clientes
# Servicios
# Por qué nosotros
# Portfolio
# FAQ
# Contacto
# Redes Sociales
# Footer
# Botones flotantes
# Modal WhatsApp
# Animaciones
# Responsive
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
:root{
  --bg-light: #f8f9fa;
  --bg-cream: #fdfbf7;
  --bg-dark: #0f1115;
  --bg-dark-soft: #161a20;
  --card-light: #ffffff;
  --card-dark: #1c2128;
  --accent: #ff6b2c;
  --accent-2: #ffb547;
  --accent-soft: rgba(255,107,44,.1);
  --text-dark: #1a1d24;
  --text-light: #f4f6f9;
  --muted-dark: #5a6270;
  --muted-light: #98a2ae;
  --border-light: rgba(0,0,0,.06);
  --border-dark: rgba(255,255,255,.08);
  --radius: 22px;
  --radius-sm: 14px;
  --radius-btn: 8px;
  --shadow-light: 0 20px 50px -15px rgba(0,0,0,.08);
  --shadow-dark: 0 30px 70px -20px rgba(0,0,0,.6);
  --container: 95%;
  --max: 1900px;
}

/*--------------------------------------------------------------
# Reset & Base
--------------------------------------------------------------*/
*, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg-light);
  color:var(--text-dark);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:'Space Grotesk',sans-serif; line-height:1.1; letter-spacing:-.025em; font-weight:700; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.container{ width:var(--container); max-width:var(--max); margin:0 auto; }
section{ position:relative; padding:120px 0; overflow:hidden; }

/*--------------------------------------------------------------
# Utilidades
--------------------------------------------------------------*/
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.76rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin-bottom:22px;
  padding:8px 18px; border-radius:999px; background:var(--accent-soft);
  border:1px solid rgba(255,107,44,.2);
}
.kicker::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 12px var(--accent);
}
h2.section-title{ font-size:clamp(2rem,4.5vw,3.4rem); margin-bottom:18px; max-width:820px; }
h2.section-title em{
  font-style:normal;
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-sub{ color:var(--muted-dark); font-size:1.08rem; max-width:640px; margin-bottom:64px; }

.section-dark{ background:var(--bg-dark); color:var(--text-light); }
.section-dark .section-sub{ color:var(--muted-light); }
.section-dark .kicker{ background:rgba(255,107,44,.15); border-color:rgba(255,107,44,.3); }

/*--------------------------------------------------------------
# Botones
--------------------------------------------------------------*/
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border-radius:var(--radius-btn);
  font-weight:600; font-size:.95rem;
  transition:all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor:pointer; border:0; font-family:inherit;
  position:relative; overflow:hidden;
}
.btn-primary{
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  color:#08090c; box-shadow:0 4px 15px -5px rgba(255,107,44,.4);
}
.btn-primary::after{
  content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;
  background:linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
  transform:skewX(-20deg); transition:all 0.5s;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 25px -5px rgba(255,107,44,.6); }
.btn-primary:hover::after{ left:150%; }
.btn-ghost{ background:transparent; color:var(--text-light); border:1px solid rgba(255,255,255,0.3); }
.btn-ghost:hover{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.8); transform:translateY(-2px); }

/*--------------------------------------------------------------
# Header / Nav
--------------------------------------------------------------*/
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(15,17,21,.85); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border-dark); transition:background 0.3s;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.logo{
  font-family:'Space Grotesk'; font-weight:700; font-size:1.25rem;
  display:flex; align-items:center; gap:10px; color:var(--text-light);
}
.logo .dot{
  width:10px; height:10px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 16px var(--accent);
}
.nav-links{ display:flex; gap:34px; align-items:center; }
.nav-links a:not(.btn){ font-size:.93rem; color:var(--muted-light); transition:color .2s; }
.nav-links a:not(.btn):hover{ color:var(--text-light); }
.menu-toggle{ display:none; background:none; border:0; color:var(--text-light); font-size:1.6rem; cursor:pointer; }

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.hero{
  position:relative; min-height:90vh; display:flex; align-items:center;
  justify-content:center; text-align:center; padding:150px 5% 100px;
  background:url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1920&q=80') center/cover no-repeat;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(15,17,21,0.6) 0%, rgba(15,17,21,0.95) 100%);
  z-index:1;
}
.hero-content{ position:relative; z-index:2; max-width:900px; color:var(--text-light); }
.hero h1{
  font-size:clamp(2.8rem, 6vw, 5.2rem); margin-bottom:24px; line-height:1.1;
  text-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.hero h1 .grad{
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ color:#d1d5db; font-size:clamp(1.1rem, 2vw, 1.3rem); margin:0 auto 40px; max-width:650px; line-height:1.6; }
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero .kicker{ background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.2); }

/*--------------------------------------------------------------
# Cifras
--------------------------------------------------------------*/
.stats{ padding-top:100px; padding-bottom:80px; background:var(--bg-dark); border-bottom:1px solid var(--border-dark); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat-card{
  background:var(--card-dark); border:1px solid var(--border-dark);
  border-radius:var(--radius); padding:38px 32px;
  transition:transform .3s,box-shadow .3s, border-color .3s;
}
.stat-card:hover{ transform:translateY(-8px); border-color:rgba(255,107,44,.4); box-shadow:var(--shadow-dark); }
.stat-card strong{
  font-family:'Space Grotesk'; font-size:3rem; display:block;
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1;
}
.stat-card span{ color:var(--muted-light); font-size:.92rem; margin-top:14px; display:block; line-height:1.5; }

/*--------------------------------------------------------------
# Clientes
--------------------------------------------------------------*/
.clients-section{ padding:60px 0 100px; background:var(--bg-dark); }
.clients-title{
  text-align:center; font-size:0.9rem; text-transform:uppercase;
  letter-spacing:0.2em; color:var(--muted-light); margin-bottom:50px; font-weight:600;
}
.clients-grid{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:60px; opacity:0.5; transition:opacity 0.3s;
}
.clients-grid:hover{ opacity:0.9; }
.clients-grid img{
  height:40px; width:auto;
  filter:grayscale(100%) brightness(200%);
  transition:filter 0.3s;
}
.clients-grid img:hover{ filter:grayscale(0%) brightness(1); }

/*--------------------------------------------------------------
# Servicios
--------------------------------------------------------------*/
.services-section{ background:var(--bg-cream); }
.services-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.service{
  position:relative; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border-light); background:var(--card-light);
  transition:transform .35s,box-shadow .35s;
  display:grid; grid-template-columns:1fr 1fr; min-height:320px;
  box-shadow:var(--shadow-light);
}
.service:hover{ transform:translateY(-8px); box-shadow:0 40px 80px -20px rgba(0,0,0,0.12); }
.service-text{ padding:44px; display:flex; flex-direction:column; justify-content:center; }
.service .icon{
  width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); font-size:1.5rem;
  margin-bottom:22px; border:1px solid rgba(255,107,44,.2);
  transition:transform .35s;
}
.service:hover .icon{ transform:rotate(-8deg) scale(1.08); }
.service h3{ font-size:1.45rem; margin-bottom:12px; color:var(--text-dark); }
.service p{ color:var(--muted-dark); font-size:.96rem; }
.service-img{ position:relative; overflow:hidden; }
.service-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s; }
.service:hover .service-img img{ transform:scale(1.1); }
.service-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right,var(--card-light),transparent 40%);
}

/*--------------------------------------------------------------
# Por qué nosotros
--------------------------------------------------------------*/
.why-section{ background:#ffffff; }
.why-layout{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.why-img{
  position:relative; border-radius:28px; overflow:hidden;
  border:1px solid var(--border-light); box-shadow:var(--shadow-light);
  aspect-ratio:1/1;
}
.why-img img{ width:100%; height:100%; object-fit:cover; }
.why-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top right,rgba(15,17,21,.3),transparent 60%);
}
.why-list{ display:grid; gap:18px; }
.why-item{
  display:flex; gap:20px; padding:26px; border-radius:var(--radius-sm);
  background:var(--bg-light); border:1px solid var(--border-light);
  transition:border-color .3s,transform .3s, background .3s;
}
.why-item:hover{ border-color:rgba(255,107,44,.3); transform:translateX(6px); background:#fff; }
.why-num{ font-family:'Space Grotesk'; font-weight:700; font-size:1.4rem; color:var(--accent); min-width:44px; }
.why-item h3{ font-size:1.1rem; margin-bottom:6px; color:var(--text-dark); }
.why-item p{ color:var(--muted-dark); font-size:.92rem; }

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio-section{ overflow:hidden; background:var(--bg-dark); }
.coverflow-container{
  position:relative; width:100%; height:550px;
  display:flex; justify-content:center; align-items:center;
  perspective:1200px;
}
.coverflow-track{
  position:relative; width:100%; height:100%;
  display:flex; justify-content:center; align-items:center;
  transform-style:preserve-3d;
}
.portfolio-item{
  position:absolute; width:850px; aspect-ratio:16/9;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(255,255,255,0.1); box-shadow:0 30px 60px rgba(0,0,0,0.8);
  transition:transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s, z-index 0s;
  cursor:pointer; opacity:0; z-index:1;
  transform:scale(0.6) translateX(0) translateZ(-200px);
  pointer-events:none; text-decoration:none !important;
}
.portfolio-item.active{
  opacity:1; z-index:10;
  transform:scale(1) translateX(0) translateZ(0);
  pointer-events:auto; border-color:rgba(255,107,44,0.4);
  box-shadow:0 40px 80px rgba(0,0,0,0.9), 0 0 40px rgba(255,107,44,0.15);
}
.portfolio-item.left{
  opacity:0.4; z-index:5;
  transform:scale(0.75) translateX(-65%) translateZ(-150px) rotateY(15deg);
  pointer-events:auto; filter:brightness(0.5);
}
.portfolio-item.right{
  opacity:0.4; z-index:5;
  transform:scale(0.75) translateX(65%) translateZ(-150px) rotateY(-15deg);
  pointer-events:auto; filter:brightness(0.5);
}
.portfolio-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.portfolio-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:40px;
  background:linear-gradient(to top,rgba(15,17,21,.95),transparent 60%);
  transition:background .35s;
}
.portfolio-overlay h3{
  font-size:2rem; margin-bottom:8px;
  transform:translateY(10px); transition:transform .35s; color:#fff;
}
.portfolio-overlay span{
  color:var(--accent); font-size:1rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  transform:translateY(10px); transition:transform .35s .1s; opacity:0;
}
.portfolio-item.active .portfolio-overlay h3,
.portfolio-item.active .portfolio-overlay span{ transform:translateY(0); opacity:1; }

.carousel-controls{ display:flex; justify-content:center; gap:16px; margin-top:20px; position:relative; z-index:20; }
.carousel-btn{
  width:50px; height:50px; border-radius:var(--radius-btn);
  background:var(--card-dark); border:1px solid var(--border-dark);
  color:var(--text-light); font-size:1.2rem;
  display:grid; place-items:center; cursor:pointer;
  transition:all 0.3s;
}
.carousel-btn:hover{ background:var(--accent); border-color:var(--accent); color:#08090c; transform:translateY(-2px); }

/*--------------------------------------------------------------
# FAQ
--------------------------------------------------------------*/
.faq-section{ background:var(--bg-light); }
.faq-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:start; }
.faq{ display:grid; gap:14px; }
details{
  background:var(--card-light); border:1px solid var(--border-light);
  border-radius:16px; padding:26px 30px;
  transition:border-color .3s, box-shadow .3s;
}
details:hover{ border-color:rgba(0,0,0,.15); box-shadow:var(--shadow-light); }
details[open]{ border-color:rgba(255,107,44,.4); }
summary{
  cursor:pointer; font-weight:600; font-size:1.05rem; list-style:none;
  display:flex; justify-content:space-between; gap:20px; align-items:center;
  color:var(--text-dark);
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:"+"; color:var(--accent); font-size:1.5rem; line-height:1;
  flex-shrink:0; transition:transform .3s;
}
details[open] summary::after{ content:"−"; transform:rotate(180deg); }
details p{ color:var(--muted-dark); font-size:.95rem; margin-top:16px; padding-right:20px; }

/*--------------------------------------------------------------
# Contacto
--------------------------------------------------------------*/
.contact-section{ background:var(--bg-cream); }
.contact-card{
  background:var(--card-light); border:1px solid var(--border-light);
  border-radius:32px; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr;
  box-shadow:var(--shadow-light);
}
.contact-form{ padding:60px; }
.contact-form form{ display:grid; gap:18px; }
.field label{ display:block; font-size:.82rem; color:var(--muted-dark); margin-bottom:8px; font-weight:500; }
input,select,textarea{
  width:100%; padding:16px 20px; border-radius:12px;
  background:var(--bg-light); border:1px solid var(--border-light);
  color:var(--text-dark); font-family:inherit; font-size:.95rem;
  transition:border-color .25s, box-shadow .25s;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}
textarea{ min-height:130px; resize:vertical; }

.contact-info{
  padding:60px; position:relative; overflow:hidden;
  background:#fff; border-left:1px solid var(--border-light);
  display:flex; flex-direction:column; justify-content:center;
}
.contact-info::before{
  content:""; position:absolute; width:300px; height:300px;
  border-radius:50%; background:var(--accent);
  filter:blur(120px); opacity:.1; top:-80px; right:-80px;
}
.contact-info h3{ font-size:1.6rem; margin-bottom:24px; position:relative; color:var(--text-dark); }

.contact-list{ display:flex; flex-direction:column; gap:20px; position:relative; z-index:2; }
.contact-list-item{ display:flex; align-items:flex-start; gap:16px; }
.contact-list-item .icon-svg{
  width:24px; height:24px; flex-shrink:0; color:var(--accent); margin-top:2px;
  display:flex; align-items:center; justify-content:center;
}
.contact-list-item .icon-svg svg{ width:100%; height:100%; }
.contact-list-item .content{ font-size:0.95rem; }
.contact-list-item strong{ display:block; font-size:1rem; color:var(--text-dark); margin-bottom:2px; }
.contact-list-item a, .contact-list-item span{ color:var(--muted-dark); transition:color 0.2s; }
.contact-list-item a:hover{ color:var(--accent); }

/*--------------------------------------------------------------
# Redes Sociales
--------------------------------------------------------------*/
.social-links-contact{
  margin-top:36px; padding-top:24px;
  border-top:1px solid var(--border-light);
  position:relative; z-index:2;
}
.social-links-contact p{ font-size:0.85rem; color:var(--muted-dark); margin-bottom:12px; font-weight:500; }
.social-icons-row{ display:flex; gap:12px; flex-wrap:wrap; }
.social-icon{
  width:44px; height:44px; border-radius:50%;
  background:var(--bg-light); border:1px solid var(--border-light);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dark); transition:all 0.3s;
}
.social-icon svg{ width:20px; height:20px; fill:currentColor; }
.social-icon:hover{
  background:var(--accent); color:#fff;
  border-color:var(--accent); transform:translateY(-3px);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer{
  background:var(--bg-dark); border-top:1px solid var(--border-dark);
  padding:50px 0; color:var(--muted-light); font-size:.9rem;
}
.footer-inner{
  display:flex; justify-content:space-between; align-items:center;
  gap:24px; flex-wrap:wrap;
}
footer a{ color:var(--text-light); transition:color .2s; }
footer a:hover{ color:var(--accent); }
.footer-legal{ display:flex; gap:15px; flex-wrap:wrap; }
.footer-legal span{ color:var(--border-dark); }

/*--------------------------------------------------------------
# Botones flotantes
--------------------------------------------------------------*/
.floating-buttons{
  position:fixed; bottom:30px; right:30px; z-index:999;
  display:flex; flex-direction:column; gap:16px;
}
.float-btn{
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 10px 25px rgba(0,0,0,0.3);
  transition:all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border:none; outline:none;
}
.float-btn:hover{ transform:translateY(-5px) scale(1.05); }
.float-btn svg{ width:28px; height:28px; fill:currentColor; }

.whatsapp-btn{ background:#25D366; color:white; }
.whatsapp-btn:hover{ background:#1ebe57; box-shadow:0 15px 35px rgba(37,211,102,0.4); }

.back-top-btn{
  background:var(--card-dark); color:var(--text-light); border:1px solid var(--border-dark);
  opacity:0; pointer-events:none; visibility:hidden;
}
.back-top-btn.show{ opacity:1; pointer-events:auto; visibility:visible; }
.back-top-btn:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }

/*--------------------------------------------------------------
# Modal WhatsApp
--------------------------------------------------------------*/
.modal-overlay{
  position:fixed; inset:0; background:rgba(15,17,21,0.8);
  backdrop-filter:blur(5px); z-index:1000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.3s ease;
  padding:20px;
}
.modal-overlay.active{ opacity:1; pointer-events:auto; }
.modal-content{
  background:var(--card-light); color:var(--text-dark);
  width:100%; max-width:500px; border-radius:20px;
  padding:40px; box-shadow:0 30px 60px rgba(0,0,0,0.4);
  transform:translateY(20px); transition:transform 0.3s ease;
  position:relative;
}
.modal-overlay.active .modal-content{ transform:translateY(0); }
.modal-close{
  position:absolute; top:20px; right:20px;
  background:none; border:none; font-size:1.5rem;
  cursor:pointer; color:var(--muted-dark); transition:color 0.2s;
}
.modal-close:hover{ color:var(--text-dark); }
.modal-content h3{ font-size:1.5rem; margin-bottom:16px; }
.modal-content p{ font-size:0.95rem; color:var(--muted-dark); margin-bottom:24px; line-height:1.6; }
.modal-checkbox{ display:flex; align-items:flex-start; gap:12px; margin-bottom:24px; cursor:pointer; }
.modal-checkbox input{ width:20px; height:20px; margin-top:2px; cursor:pointer; accent-color:var(--accent); }
.modal-checkbox label{ font-size:0.9rem; line-height:1.5; cursor:pointer; color:var(--text-dark); }
.modal-checkbox a{ color:var(--accent); text-decoration:underline; }
.modal-btn{
  width:100%; padding:16px; border-radius:8px;
  background:#25D366; color:white; font-weight:600; font-size:1rem;
  border:none; cursor:pointer; transition:background 0.2s;
  display:flex; justify-content:center; align-items:center; gap:8px;
}
.modal-btn:hover:not(:disabled){ background:#1ebe57; }
.modal-btn:disabled{ opacity:0.5; cursor:not-allowed; }

/*--------------------------------------------------------------
# Animaciones
--------------------------------------------------------------*/
.reveal{
  opacity:0; transform:translateY(40px);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal.visible{ opacity:1; transform:translateY(0); }

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media(max-width:1200px){
  .portfolio-item{ width:700px; }
  .portfolio-item.left{ transform:scale(0.7) translateX(-55%) translateZ(-150px) rotateY(20deg); }
  .portfolio-item.right{ transform:scale(0.7) translateX(55%) translateZ(-150px) rotateY(-20deg); }
}
@media(max-width:1100px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .service{ grid-template-columns:1fr; }
  .service-img{ min-height:220px; }
  .service-img::after{ background:linear-gradient(to top,var(--card-light),transparent 50%); }
  .portfolio-item{ width:600px; }
  .portfolio-item.left{ transform:scale(0.7) translateX(-50%) translateZ(-150px) rotateY(25deg); }
  .portfolio-item.right{ transform:scale(0.7) translateX(50%) translateZ(-150px) rotateY(-25deg); }
  .clients-grid{ gap:40px; }
  .clients-grid img{ height:30px; }
}
@media(max-width:900px){
  :root{ --container:92%; }
  section{ padding:80px 0; }
  .hero{ min-height:80vh; padding:130px 20px 80px; }
  .hero h1{ font-size:clamp(2.5rem, 8vw, 3.5rem); }
  .hero-actions{ flex-direction:column; }
  .btn{ width:100%; }
  .why-layout,.faq-wrap,.contact-card{ grid-template-columns:1fr; }
  .contact-info{ border-left:0; border-top:1px solid var(--border-light); }
  header.nav{ background:rgba(15,17,21,0.95); }
  .nav-links{
    position:fixed; top:73px; right:4%; left:4%; background:var(--bg-dark-soft);
    flex-direction:column; padding:30px; gap:22px;
    border:1px solid var(--border-dark); border-radius:var(--radius);
    transform:translateY(-160%); transition:transform .35s;
    opacity:0; pointer-events:none; box-shadow:var(--shadow-dark);
  }
  .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .menu-toggle{ display:block; }
  .services-grid{ grid-template-columns:1fr; }
  .coverflow-container{
    height:auto; perspective:none; overflow-x:auto;
    justify-content:flex-start; padding:20px 5%;
    scrollbar-width:none; display:block;
  }
  .coverflow-container::-webkit-scrollbar{ display:none; }
  .coverflow-track{ transform:none !important; display:flex; gap:20px; height:auto; }
  .portfolio-item{
    position:relative; width:85vw; opacity:1;
    transform:none !important; filter:none;
    pointer-events:auto; display:none;
  }
  .portfolio-item.active{ display:block; }
  .carousel-controls{ display:flex; margin-top:10px; }
  .footer-inner{ flex-direction:column; text-align:center; }
  .footer-legal{ justify-content:center; }
}
@media(max-width:600px){
  .stats-grid{ grid-template-columns:1fr; }
  .contact-form,.contact-info{ padding:36px; }
  .service-text{ padding:30px; }
  .clients-grid{ gap:30px; }
  .clients-grid img{ height:25px; }
  .floating-buttons{ bottom:20px; right:20px; }
  .float-btn{ width:50px; height:50px; }
  .float-btn svg{ width:24px; height:24px; }
}