/* ==========================================================================
   SS PIXELCRAFT — shared-style.css
   Design system: warm signal-orange + ink black + paper cream
   Display: Sora (headings) / Body: Poppins / Accent script: Caveat
   ========================================================================== */

:root{
  --orange:        #ffb81c;
  --orange-dark:   #ffb81c;
  --orange-deep:   #1f2a55;
  --orange-light:  #ffd36b;
  --gold:          #FFB800;
  --dark:          #070b1a;
  --ink:           #e8ecff;
  --text:          #9aa6d6;
  --muted:         #9aa6d6;
  --gray:          #0e1530;
  --gray-deep:     #0b1130;
  --card:          #0e1530;
  --cream:         #070b1a;
  --white:         #0e1530;
  --line:          rgba(255,255,255,.07);
  --success:       #22c55e;
  --whatsapp:      #25D366;
  --shadow-sm:     6px 6px 16px #0a0b11, -6px -6px 16px #262a3d;
  --shadow-md:     10px 10px 26px #090a0f, -10px -10px 26px #282c42;
  --shadow-lg:     16px 16px 40px #08090e, -16px -16px 40px #2a2f46;
  --radius:        16px;
  --radius-sm:     10px;
  --radius-lg:     26px;
  --ease:          cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Hind',sans-serif;
  color:var(--text);
  background:var(--cream);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{
  font-family:'Bricolage Grotesque',sans-serif;
  color:var(--tx);
  margin:0 0 .5em;
  line-height:1.2;
}
p{ margin:0 0 1em; }
a{ color:var(--orange); }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,select,textarea{ font-family:inherit; }
:focus-visible{ outline:3px solid var(--orange-light); outline-offset:2px; }
::selection{ background:var(--yel); color:#111; }

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

.container{ max-width:1140px; margin:0 auto; padding:0 5%; }

section{ padding:90px 5%; position:relative; }
section#home{ padding:0; }

/* ── Section headers ─────────────────────────────────────────── */
.services-header{ text-align:center; max-width:720px; margin:0 auto 56px; }
.section-tag{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:6px; }
.section-tag .dot{ width:8px; height:8px; border-radius:50%; background:var(--yel); box-shadow:0 0 0 4px rgba(255,184,28,.15); }
.section-title{ font-size:clamp(1.7rem,3.4vw,2.4rem); font-weight:800; }
.section-title span{ color:var(--orange); }
.underline-accent{ width:64px; height:4px; border-radius:4px; background:var(--yel); margin-top:10px; }

/* ── Reveal-on-scroll ─────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible{ opacity:1; transform:none; }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
nav{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 5%;
  background:rgba(20,22,31,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.logo{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.5rem;
  color:var(--ink); letter-spacing:.5px;
}
.logo i{ color:var(--orange); }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  text-decoration:none; color:var(--text); font-weight:600; font-size:.94rem;
  position:relative; padding:6px 0; transition:color .25s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--yel); transition:width .3s var(--ease);
}
.nav-links a:hover,
.nav-links a.active{ color:var(--orange); }
.nav-links a:hover::after,
.nav-links a.active::after{ width:100%; }

.btn-talk{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--yel); color:#111 !important; text-decoration:none;
  padding:12px 22px; border-radius:50px; font-weight:700; font-size:.88rem;
  box-shadow:0 10px 24px rgba(255,184,28,.3);
  transition:transform .25s var(--ease), box-shadow .25s;
}
.btn-talk:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(255,184,28,.4); }

.hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:1200; }
.hamburger span{ width:26px; height:2.5px; background:var(--ink); border-radius:2px; transition:.3s; }

.mobile-menu{
  position:fixed; inset:0 0 auto auto; top:0; right:-100%;
  width:78%; max-width:320px; height:100vh;
  background:var(--dark); z-index:1100;
  display:flex; flex-direction:column; gap:4px;
  padding:100px 10px 40px; transition:right .4s var(--ease);
  box-shadow:-10px 0 40px rgba(0,0,0,.3);
}
.mobile-menu.open{ right:0; }
.mobile-menu a{
  display:flex; align-items:center; gap:12px;
  color:rgba(255,255,255,.85); text-decoration:none; font-weight:600;
  padding:14px 18px; border-radius:10px; transition:background .2s,color .2s;
}
.mobile-menu a i{ width:18px; color:var(--orange-light); }
.mobile-menu a:hover{ background:rgba(255,184,28,.15); color:#fff; }

/* ==========================================================================
   HERO
   ========================================================================== */
#home{
  min-height:92vh; display:flex; align-items:center; flex-wrap:wrap;
  gap:40px; padding:60px 5% 40px; position:relative; overflow:hidden;
}
.hero-blobs{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-blob{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
  background:radial-gradient(circle,var(--orange) 0%,var(--gold) 100%);
  animation:blobFloat 14s ease-in-out infinite;
}
.hero-blob:nth-child(1){ width:420px; height:420px; top:-140px; left:-120px; }
.hero-blob:nth-child(2){ width:340px; height:340px; bottom:-120px; right:-80px; animation-delay:3s; background:radial-gradient(circle,var(--orange-light) 0%,var(--orange) 100%); }
.hero-blob:nth-child(3){ width:260px; height:260px; top:38%; left:52%; animation-delay:6s; opacity:.2; }
@keyframes blobFloat{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(40px,-30px) scale(1.08);} }

.hero-text{ flex:1 1 520px; max-width:640px; z-index:1; }
.hello-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  padding:8px 18px; border-radius:50px; font-weight:600; font-size:.82rem;
  color:var(--orange-dark); margin-bottom:22px;
}
.hello-badge i{ color:var(--gold); }
.hero-text h1{
  font-size:clamp(2rem,4.6vw,3.2rem); font-weight:800; letter-spacing:-.5px;
  margin-bottom:14px;
}
.highlight-word{ color:var(--orange); position:relative; }
.subtitle{ font-family:'Caveat',cursive; font-size:1.7rem; color:var(--ink); margin-bottom:14px; }
.subtitle span{ color:var(--orange); font-weight:700; }
.hero-text > p:not(.subtitle){ font-size:1.02rem; max-width:560px; margin-bottom:26px; }

.hero-btns{ display:flex; flex-wrap:wrap; gap:16px; }
.btn-primary,.btn-secondary{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border-radius:50px; font-weight:700; font-size:.94rem;
  text-decoration:none; transition:transform .25s var(--ease), box-shadow .25s, background .25s;
}
.btn-primary{
  background:var(--yel);
  color:#111; box-shadow:0 10px 24px rgba(255,184,28,.32);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(255,184,28,.4); }
.btn-secondary{
  background:var(--card); color:var(--ink); border:1.5px solid var(--line);
}
.btn-secondary:hover{ border-color:var(--orange); color:var(--orange); transform:translateY(-3px); }

.hero-avatar{ flex:0 0 auto; z-index:1; margin:0 auto; }
.avatar-ring{
  width:340px; height:340px; border-radius:50%; padding:10px;
  background:var(--yel);
  animation:spin 10s linear infinite;
  display:flex; align-items:center; justify-content:center;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.avatar-circle{
  width:100%; height:100%; border-radius:50%; overflow:hidden;
  background:var(--dark); border:6px solid var(--cream);
  animation:spinBack 10s linear infinite;
}
@keyframes spinBack{ to{ transform:rotate(-360deg); } }
.avatar-circle img{ width:100%; height:100%; object-fit:cover; }

.scroll-cue{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:.78rem; font-weight:600; color:var(--muted); text-decoration:none;
  animation:bob 2.2s ease-in-out infinite; z-index:1;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

/* ==========================================================================
   STATS BAR
   ========================================================================== */
.stats-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:30px; background:var(--dark); color:#fff; padding:36px 5%;
}
.stat-item{ display:flex; align-items:center; gap:14px; }
.stat-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,184,28,.18); color:var(--orange-light); font-size:1.2rem; flex:none;
}
.stat-num{ font-family:'Bricolage Grotesque',sans-serif; font-size:1.7rem; font-weight:800; color:#fff; }
.stat-label{ font-size:.78rem; color:rgba(255,255,255,.6); font-weight:500; }
.connect-block{ display:flex; flex-direction:column; gap:10px; }
.connect-label{ font-size:.75rem; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.5); }
.social-row{ display:flex; gap:10px; }
.social-icon{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); color:#fff; text-decoration:none; transition:.25s;
}
.social-icon:hover{ background:var(--yel); transform:translateY(-3px); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
#about{ background:var(--gray); }
.about-grid{
  display:grid; grid-template-columns:.85fr 1.3fr 1fr; gap:44px; align-items:start; max-width:1180px; margin:0 auto;
}
.about-photo{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); border:6px solid var(--card);
}
.about-underline{ width:56px; height:4px; border-radius:4px; background:var(--yel); margin:6px 0 18px; }
.about-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--card); border:1px solid var(--line); padding:8px 16px; border-radius:50px;
  font-size:.82rem; font-weight:600; color:var(--ink);
}
.chip i{ color:var(--orange); }
.about-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.about-card{
  background:var(--card); border-radius:var(--radius); padding:22px 18px;
  box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s;
}
.about-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.about-card-icon{
  width:46px; height:46px; border-radius:12px; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,184,28,.1); color:var(--orange); font-size:1.15rem;
}
.about-card h4{ font-size:.98rem; margin-bottom:4px; }
.about-card p{ font-size:.82rem; color:var(--muted); margin:0; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(34,197,94,.2);} 50%{ box-shadow:0 0 0 7px rgba(34,197,94,.08);} }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process-steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:1140px; margin:0 auto;
}
.process-step{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 22px 26px; text-align:center; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.process-step:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:transparent; }
.process-step .step-number{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  background:var(--yel); color:#111;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:.78rem;
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(255,184,28,.35);
}
.process-step i{ font-size:1.7rem; color:var(--orange); margin:20px 0 14px; display:block; }
.process-step h4{ font-size:1.02rem; margin-bottom:8px; }
.process-step p{ font-size:.86rem; color:var(--muted); margin:0; }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:1180px; margin:0 auto;
}
.service-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 26px; transition:transform .35s var(--ease), box-shadow .35s, border-color .35s;
  position:relative; overflow:hidden;
}
.service-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--yel);
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.service-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:transparent; }
.service-card:hover::before{ transform:scaleX(1); }
.service-icon{
  font-size:1.7rem; color:var(--orange); width:56px; height:56px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; background:rgba(255,184,28,.1);
  margin-bottom:18px;
}
.service-card h3{ font-size:1.12rem; margin-bottom:8px; }
.service-card > p{ font-size:.88rem; color:var(--text); margin-bottom:16px; }
.service-features{ display:flex; flex-direction:column; gap:9px; }
.service-features li{
  font-size:.83rem; color:var(--ink); padding-left:22px; position:relative; font-weight:500;
}
.service-features li::before{
  content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900;
  position:absolute; left:0; top:1px; color:var(--orange); font-size:.72rem;
}

/* ==========================================================================
   PORTFOLIO / 3D CAROUSEL
   ========================================================================== */
#portfolio{ background:var(--dark); color:#fff; }
#portfolio .section-title{ color:#fff; }
#portfolio .services-header p{ color:rgba(255,255,255,.62) !important; }

.portfolio-filter{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:50px;
}
.filter-btn{
  padding:9px 20px; border-radius:50px; border:1px solid rgba(255,255,255,.18);
  background:transparent; color:rgba(255,255,255,.7); font-weight:600; font-size:.82rem;
  transition:.25s;
}
.filter-btn:hover{ border-color:var(--orange); color:#fff; }
.filter-btn.active{ background:var(--yel); border-color:var(--orange); color:#111; }

.carousel-3d-wrap{
  position:relative; display:flex; align-items:center; justify-content:center; gap:18px;
}
.autoplay-toggle{
  position:absolute; top:-46px; right:0;
  display:flex; align-items:center; gap:7px; font-size:.76rem; color:rgba(255,255,255,.55);
  cursor:pointer; padding:6px 12px; border-radius:50px; border:1px solid rgba(255,255,255,.15);
}
.autoplay-toggle:hover{ color:#fff; border-color:var(--orange); }
.carousel-nav-btn{
  flex:none; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1rem; transition:.25s; z-index:5;
}
.carousel-nav-btn:hover{ background:var(--yel); border-color:var(--orange); }
.carousel-3d{
  width:100%; max-width:900px; height:400px; perspective:1400px; position:relative; overflow:hidden;
}
.carousel-track{ position:absolute; inset:0; transform-style:preserve-3d; }
.project-card{
  position:absolute; top:50%; left:50%; width:300px;
  background:var(--card); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.5); cursor:pointer;
  transition:transform .55s var(--ease), opacity .55s var(--ease);
}
.project-card.is-hidden{ opacity:0; pointer-events:none; }
.project-card:not(.is-center){ opacity:.45; }
.project-card.is-center{ opacity:1; cursor:default; }
.project-card-img{ width:100%; height:180px; overflow:hidden; }
.project-card-img img{ width:100%; height:100%; object-fit:cover; }
.project-info{ padding:18px; }
.project-info h4{ color:#fff; font-size:.98rem; margin-bottom:6px; }
.project-info p{ color:rgba(255,255,255,.55); font-size:.78rem; margin-bottom:12px; }
.project-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{
  font-size:.68rem; font-weight:600; color:var(--orange-light);
  background:rgba(255,184,28,.14); padding:4px 10px; border-radius:50px;
}
.carousel-dots{ display:flex; justify-content:center; gap:8px; margin-top:28px; }
.carousel-dot{
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.2); transition:.25s;
}
.carousel-dot.active{ background:var(--yel); width:26px; border-radius:5px; }
.carousel-progress-track{
  max-width:220px; height:3px; margin:16px auto 0; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden;
}
.carousel-progress-bar{ height:100%; width:0; background:var(--yel); }

/* ==========================================================================
   SKILLS
   ========================================================================== */
.skills-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:1000px; margin:0 auto; }
.skill-category h4{
  display:flex; align-items:center; gap:10px; font-size:1.02rem; margin-bottom:22px;
}
.skill-category h4 i{ color:var(--orange); }
.skill-item{ margin-bottom:18px; }
.skill-name{ display:flex; justify-content:space-between; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:8px; }
.skill-bar{ height:8px; border-radius:6px; background:var(--gray-deep); overflow:hidden; }
.skill-progress{
  height:100%; border-radius:6px; width:0;
  background:var(--yel);
  transition:width 1.1s var(--ease);
}

.tools-section{ max-width:1140px; margin:70px auto 0; text-align:center; }
.tools-section h4{ font-size:1rem; margin-bottom:22px; }
.tools-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.tool-badge{
  display:inline-flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--line);
  padding:10px 18px; border-radius:50px; font-size:.85rem; font-weight:600; color:var(--ink);
  box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s;
}
.tool-badge:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }

/* ==========================================================================
   LOGO MARQUEE
   ========================================================================== */
.logo-marquee{
  overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.logo-track{ display:flex; gap:50px; width:max-content; animation:marquee 26s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.logo-item{
  flex:none; width:130px; height:80px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; display:flex; align-items:center; justify-content:center; padding:14px;
}
.logo-item img{ max-width:100%; max-height:100%; object-fit:contain; }

/* ==========================================================================
   FAQ
   ========================================================================== */
#faq{ background:var(--gray); }
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:border-color .25s, box-shadow .25s;
}
.faq-item.open{ border-color:var(--orange); box-shadow:var(--shadow-sm); }
.faq-question{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:19px 24px; font-weight:600; font-size:.94rem; color:var(--ink); cursor:pointer;
}
.faq-question i{ color:var(--orange); transition:transform .3s var(--ease); flex:none; }
.faq-item.open .faq-question i{ transform:rotate(45deg); }
.faq-item.open .faq-question .fa-chevron-down{ transform:rotate(180deg); }
.faq-answer{
  max-height:0; overflow:hidden; transition:max-height .4s var(--ease), padding .4s var(--ease);
  padding:0 24px;
}
.faq-item.open .faq-answer{ max-height:600px; padding:0 24px 22px; }
.faq-answer p{ font-size:.87rem; color:var(--text); margin:0; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1140px; margin:0 auto; }
.testimonial-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 24px; box-shadow:var(--shadow-sm);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
#contact{ background:var(--dark); }
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:50px; max-width:1100px; margin:0 auto; align-items:start;
}
.contact-info h2{ font-size:clamp(1.5rem,3vw,2rem); margin-bottom:14px; }
.contact-info > p{ font-size:.96rem; margin-bottom:30px; }
.contact-details{ display:flex; flex-direction:column; gap:18px; margin-bottom:26px; }
.contact-detail-item{ display:flex; align-items:center; gap:16px; }
.contact-detail-icon{
  width:48px; height:48px; border-radius:13px; flex:none;
  background:rgba(255,184,28,.1); color:var(--orange); display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.contact-detail-item a{ color:var(--ink); font-weight:600; text-decoration:none; font-size:.94rem; }
.contact-detail-item a:hover{ color:var(--orange); }
.availability-badge{
  display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:700;
  color:#5eead4; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3); padding:9px 18px; border-radius:50px;
}
.availability-badge::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--success); animation:pulse 2s infinite; }

.contact-form{
  background:var(--gray); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px; box-shadow:var(--shadow-sm);
}
.contact-form h3{ font-size:1.1rem; margin-bottom:20px; }
.send-toggle{ display:flex; gap:8px; margin-bottom:20px; background:rgba(255,255,255,.04); padding:6px; border-radius:50px; border:1px solid var(--line); box-shadow:inset 3px 3px 8px rgba(0,0,0,.35),inset -2px -2px 6px rgba(255,255,255,.03); }
.send-tab{
  flex:1; padding:10px 14px; border-radius:50px; font-weight:700; font-size:.84rem;
  color:var(--muted); display:flex; align-items:center; justify-content:center; gap:7px; transition:.25s;
}
.send-tab.wa-active{ background:var(--whatsapp); color:#fff; }
.send-tab.email-active{ background:var(--yel); color:#111; }
.cf-fields{ display:flex; flex-direction:column; gap:14px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cf-fields input,.cf-fields select,.cf-fields textarea{
  width:100%; padding:13px 16px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:rgba(255,255,255,.04); font-size:.9rem; color:var(--ink); resize:vertical; transition:border-color .25s, box-shadow .25s;
  box-shadow:inset 3px 3px 8px rgba(0,0,0,.35), inset -2px -2px 6px rgba(255,255,255,.03);
}
.cf-fields input:focus,.cf-fields select:focus,.cf-fields textarea:focus{
  border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,184,28,.12); outline:none;
}
.send-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:15px; border-radius:var(--radius-sm); font-weight:700; font-size:.92rem; color:#fff;
  transition:transform .25s var(--ease), opacity .25s;
}
.send-btn-wa{ background:var(--whatsapp); }
.send-btn-email{ background:var(--yel); }
.send-btn:hover{ transform:translateY(-2px); }
.hidden{ display:none !important; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{ background:var(--dark); color:rgba(255,255,255,.72); padding:64px 5% 0; }
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; max-width:1180px; margin:0 auto; padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-logo{ color:#fff; }
.footer-brand p{ font-size:.86rem; margin:14px 0 18px; color:rgba(255,255,255,.55); max-width:320px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); color:#fff; text-decoration:none; transition:.25s;
}
.footer-social a:hover{ background:var(--yel); transform:translateY(-3px); }
.footer-col h3{ color:#fff; font-size:.92rem; margin-bottom:16px; }
.footer-links{ display:flex; flex-direction:column; gap:10px; }
.footer-links a{ color:rgba(255,255,255,.55); text-decoration:none; font-size:.86rem; transition:.2s; }
.footer-links a:hover{ color:var(--orange-light); }
.footer-bottom{
  max-width:1180px; margin:0 auto; padding:22px 0; text-align:center;
  font-size:.8rem; color:rgba(255,255,255,.45);
}
.footer-bottom span{ color:#fff; font-weight:600; }

/* ==========================================================================
   FLOATING BUTTONS
   ========================================================================== */
.wa-float{
  position:fixed; bottom:26px; right:26px; z-index:900;
  width:58px; height:58px; border-radius:50%; background:var(--whatsapp); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  box-shadow:0 10px 26px rgba(37,211,102,.45); text-decoration:none;
  animation:waPulse 2.4s ease-in-out infinite;
}
@keyframes waPulse{ 0%,100%{ box-shadow:0 10px 26px rgba(37,211,102,.45);} 50%{ box-shadow:0 10px 26px rgba(37,211,102,.7),0 0 0 10px rgba(37,211,102,.12);} }
.back-to-top{
  position:fixed; bottom:26px; right:96px; z-index:900;
  width:46px; height:46px; border-radius:50%; background:var(--dark); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .3s,transform .3s; box-shadow:var(--shadow-md);
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:none; }
.back-to-top:hover{ background:var(--yel); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .about-grid{ grid-template-columns:1fr 1fr; }
  .about-cards{ grid-column:1 / -1; grid-template-columns:repeat(4,1fr); }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .process-steps{ grid-template-columns:repeat(2,1fr); }
  .testimonial-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  .nav-links,.btn-talk{ display:none; }
  .hamburger{ display:flex; }
  #home{ padding-top:40px; text-align:center; justify-content:center; }
  .hero-text{ margin:0 auto; }
  .hero-btns{ justify-content:center; }
  .hero-avatar{ order:-1; }
  .avatar-ring{ width:240px; height:240px; }
  .stats-bar{ justify-content:center; text-align:left; }
  .connect-block{ width:100%; align-items:center; }
  .contact-grid{ grid-template-columns:1fr; }
  .skills-grid{ grid-template-columns:1fr; gap:30px; }
}

@media (max-width:640px){
  section{ padding:64px 6%; }
  .about-grid{ grid-template-columns:1fr; }
  .about-cards{ grid-template-columns:1fr 1fr; }
  .services-grid{ grid-template-columns:1fr; }
  .process-steps{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; text-align:center; }
  .footer-brand p{ margin-left:auto; margin-right:auto; }
  .footer-social{ justify-content:center; }
  .carousel-3d{ height:340px; }
  .project-card{ width:230px; }
  .back-to-top{ right:20px; bottom:96px; }
  .wa-float{ width:52px; height:52px; font-size:1.4rem; }
}