:root{--brand-700:#0f5366;--brand-600:#0f6f7a;--brand-500:#139ea6;--brand-400:#27b9b5;--brand-300:#66d5cf;--brand-50:#f6fbfb;--bg:#ffffff;--surface:#ffffff;--border:#e9eef4;--ink-900:#0f172a;--ink-700:#1f2937;--ink-600:#334155;--ink-500:#475569;--ink-400:#64748b;--ink-300:#94a3b8;--radius-lg:24px;--radius-md:16px;--shadow:0 10px 30px rgba(15,23,42,.06),0 2px 10px rgba(15,23,42,.04);--maxw:1200px}
[data-theme="dark"]{--bg:#0b1220;--surface:#0e172a;--border:#1f2a44;--ink-900:#e5e7eb;--ink-700:#cbd5e1;--ink-600:#94a3b8;--ink-500:#94a3b8;--ink-400:#a9b4c6;--ink-300:#c3cfdf;--brand-50:#0b2830}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:var(--ink-700);background:var(--bg);line-height:1.6;transition:background .2s,color .2s}
a{color:var(--brand-600);text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.9rem 1.2rem;border-radius:var(--radius-md);font-weight:600;border:1px solid transparent;transition:.2s;background:var(--brand-600);color:#fff}
.btn:hover{transform:translateY(-1px);background:var(--brand-700)}
.btn.secondary{background:var(--surface);color:var(--ink-700);border-color:var(--border)}
.btn.linkedin-btn{background:#0077b5;color:white}
.btn.linkedin-btn:hover{background:#005885;transform:translateY(-1px)}
/* Inline CTA under portfolio card content */
.cta-inline{margin-top:8px}
/* Small button variant */
.btn.btn-sm{padding:8px 12px;font-size:.85rem;line-height:1}
.linkedin-header{color:#0077b5 !important;transition:all 0.2s ease}
.linkedin-header:hover{color:#005885 !important;transform:scale(1.1)}
header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(8px);background:rgba(255,255,255,.75);border-bottom:1px solid var(--border);z-index:50}
[data-theme="dark"] header{background:rgba(11,18,32,.6)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:.75rem}
.brand img{width:36px;height:36px}
.brand b{font-size:1.05rem;letter-spacing:.4px;color:var(--ink-900)}
nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
nav a{padding:.5rem .8rem;border-radius:12px;color:var(--ink-600)}
nav a:hover{background:var(--brand-50);color:var(--brand-700)}
.menu-btn{display:none}
.switches{display:flex;gap:8px;align-items:center}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--ink-700);display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:0}
.icon-btn svg{display:block}
.hero{padding:72px 0 48px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2rem,4.2vw,3rem);line-height:1.15;margin:0 0 16px;color:var(--ink-900)}
.hero p{font-size:1.05rem;color:var(--ink-500);margin:0 0 28px}
.hero-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow)}
.hero-art{display:none}
.badges{display:flex;gap:.6rem;flex-wrap:wrap;margin:12px 0 0}
.badge{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.45rem .8rem;font-size:.9rem;color:var(--ink-600)}
.section{padding:64px 0}
.section h2{font-size:1.8rem;margin:0 0 12px;color:var(--ink-900)}
.section p.lead{margin:0 0 28px;color:var(--ink-500)}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;background:var(--surface);box-shadow:var(--shadow);transition:all 0.3s ease}
.card:hover{border-color:var(--brand-200);box-shadow:0 8px 25px rgba(0,0,0,0.1);transform:translateY(-2px)}
.service-card{text-align:center;position:relative;overflow:hidden}
.service-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,0,0,0.15);border-color:var(--brand-300)}
.service-card:hover .service-icon{transform:scale(1.1);color:var(--brand-600)}
.service-icon{display:flex;align-items:center;justify-content:center;width:60px;height:60px;margin:0 auto 16px;background:var(--brand-50);border-radius:12px;color:var(--brand-500);transition:all 0.3s ease}
.service-card h3{margin:0 0 12px 0;color:var(--ink-900)}
.service-card .muted{margin:0;line-height:1.5}
.card h3{margin:0 0 6px;font-size:1.1rem;color:var(--ink-900)}
.muted{color:var(--ink-500);font-size:.98rem}
.pill{display:inline-block;background:var(--brand-50);color:var(--brand-700);border:1px solid #e6f2f1;border-radius:999px;padding:.35rem .7rem;font-weight:600;font-size:.8rem}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.calc .panel{border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;background:var(--surface);box-shadow:var(--shadow)}
.input{display:flex;align-items:center;gap:.8rem;border:1px solid var(--border);border-radius:14px;padding:.6rem .8rem;background:var(--surface)}
.input input[type="number"], .input input[type="text"], .input input[type="email"], .input input[type="tel"]{width:100%;border:0;outline:0;font-size:1rem;color:var(--ink-700);background:transparent}
.textarea{display:block;width:100%;min-height:120px;border:1px solid var(--border);border-radius:14px;padding:.6rem .8rem;background:var(--surface);font:inherit;color:var(--ink-700)}
.range{width:100%}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:.4rem .8rem;cursor:pointer}
.chip.active{background:var(--brand-600);border-color:transparent;color:#fff}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.price{background:var(--brand-50);border:1px solid #e6f2f1;border-radius:18px;padding:16px}
.price b{display:block;font-size:1.2rem;color:var(--ink-900)}
.label{font-size:.9rem;color:var(--ink-500)}
.bar{height:12px;border-radius:999px;background:linear-gradient(90deg,var(--brand-600) 10%,transparent 10%);border:1px solid var(--border)}
/* Seção de equipe com design limpo */
.team-section{margin:32px 0;position:relative}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px;position:relative;z-index:1}
.team-member{text-align:center;transition:transform 0.3s ease;animation:fadeInUp 0.6s ease-out forwards;opacity:0}
.team-member:nth-child(1){animation-delay:0.1s}
.team-member:nth-child(2){animation-delay:0.2s}
.team-member:nth-child(3){animation-delay:0.3s}
.team-member:hover{transform:none}
.team-photo{position:relative;margin-bottom:20px;overflow:hidden;display:flex;justify-content:center;align-items:center;border-radius:16px}
.team-photo img{width:180px;height:180px;object-fit:cover;border-radius:16px;transition:transform 0.3s ease,filter 0.3s ease;margin:0 auto;display:block}
.team-photo:hover img{transform:scale(1.05);filter:brightness(0.8)}
.team-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.8));padding:20px 10px 10px;transform:translateY(100%);transition:transform 0.3s ease;display:flex;justify-content:center;align-items:end;border-radius:0 0 16px 16px}
.team-photo:hover .team-overlay{transform:translateY(0)}

.team-info h3{margin:0 0 8px;font-size:1.2rem;color:var(--ink-900);font-weight:600}
.team-role{margin:0;color:var(--brand-600);font-weight:500;font-size:1rem}
/* Seção Por que a Refatorize */
.why-section{margin:32px 0;padding:0}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:32px}
.why-item{text-align:center;padding:24px;background:var(--surface);border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.08);transition:all 0.3s ease}
.why-item:hover{transform:translateY(-5px);box-shadow:0 8px 30px rgba(0,0,0,0.12)}
.why-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 auto 16px;background:var(--brand-100);border-radius:12px;color:var(--brand-600)}
.why-item h3{margin:0 0 12px;font-size:1.1rem;color:var(--ink-900)}
.why-item p{margin:0;color:var(--ink-600);line-height:1.5}

/* Animações */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0px) rotate(0deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes pulse{0%,100%{box-shadow:0 15px 35px rgba(15,23,42,.1),0 5px 15px rgba(15,23,42,.08)}50%{box-shadow:0 20px 40px rgba(15,23,42,.15),0 8px 20px rgba(15,23,42,.12)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}

/* Animações de scroll */
.card, .hero-card{opacity:0;transform:translateY(30px);transition:all 0.6s ease-out}
.card.animate-in, .hero-card.animate-in{opacity:1;transform:translateY(0)}
.card:nth-child(even).animate-in{animation:slideInRight 0.6s ease-out forwards}
.card:nth-child(odd).animate-in{animation:slideInLeft 0.6s ease-out forwards}
.hero-card.animate-in{animation:scaleIn 0.8s ease-out forwards}

/* Animação contínua para a imagem hero */
.hero-art img{animation:gentleFloat 6s ease-in-out infinite}
@keyframes gentleFloat{0%,100%{transform:translateY(0px)}50%{transform:translateY(-10px)}}
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover}
.footer{padding:36px 0;border-top:1px solid var(--border);color:var(--ink-500)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.field{margin-bottom:12px}
.field label{display:block;margin:0 0 6px;color:var(--ink-600);font-weight:600}
.status{margin-top:8px;font-size:.95rem}
.status.ok{color:#059669}
.status.err{color:#dc2626}
@media (min-width: 980px){.hero-art{display:block}}
@media (max-width: 980px){.hero-grid{grid-template-columns:1fr}.calc{grid-template-columns:1fr}.grid.cols-3{grid-template-columns:1fr 1fr}.team-grid{grid-template-columns:1fr 1fr;gap:24px}.team-photo img{width:160px;height:160px;border-radius:16px}.why-grid{grid-template-columns:1fr 1fr;gap:24px}.cta-row{justify-content:center}}
@media (max-width: 640px){nav ul{display:none}.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--surface)}.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}.team-grid{grid-template-columns:1fr;gap:20px}.team-photo img{width:140px;height:140px;border-radius:16px}.team-section{margin:16px 0}.why-grid{grid-template-columns:1fr;gap:20px}.why-section{padding:0}.cta-row{flex-direction:column;align-items:center}.btn.linkedin-btn{width:100%;max-width:200px}}
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(2,6,23,.6);z-index:100}
[data-theme="dark"] .modal{background:rgba(2,6,23,.75)}
.modal.open{display:grid}
.modal .dialog{width:min(96vw,1000px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow)}

/* Modern Portfolio Cards */
#portfolio .grid{gap:28px;align-items:stretch}
#portfolio .card{position:relative;overflow:hidden;cursor:pointer;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:0;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);box-shadow:0 4px 20px rgba(15,23,42,.08)}
#portfolio .card:hover{transform:translateY(-8px);border-color:var(--brand-200);box-shadow:0 20px 60px rgba(15,23,42,.12),0 8px 30px rgba(15,23,42,.08)}
#portfolio .card img{width:100%;height:200px;object-fit:cover;border-radius:20px 20px 0 0;transition:all 0.4s ease}
#portfolio .card:hover img{transform:scale(1.05)}
#portfolio .card h3{margin:0;padding:20px 20px 8px;font-size:1.2rem;font-weight:600;color:var(--ink-900)}
#portfolio .card .card-content{padding:0 20px 20px}
#portfolio .card .card-desc{color:var(--ink-500);font-size:0.9rem;line-height:1.5;margin:0}

/* FAQ Accordion Styles */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: var(--brand-200);
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.1);
}

.faq-item.open {
  border-color: var(--brand-400);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.15);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: none;
  border: none;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.faq-question:hover {
  color: var(--brand-600);
}

.faq-question::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--brand-500);
  transition: transform 0.3s ease;
}

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

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 24px;
  background: var(--bg-secondary);
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer:not([hidden]) {
  padding: 0 24px 20px;
}

.faq-answer p {
  margin: 0;
  padding-top: 4px;
  color: var(--ink-600);
  line-height: 1.6;
}

.faq-answer a {
  color: var(--brand-600);
  text-decoration: none;
  font-weight: 500;
}

.faq-answer a:hover {
  text-decoration: underline;
}

/* About page card layouts */
.about-cards {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin: 32px 0;
}

.about-card {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: all 0.3s ease;
  text-align: center;
}

.about-card:hover {
  border-color: var(--brand-200);
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.about-card .card-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  display: block;
}

.about-card h3 {
  margin: 0 0 12px;
  font-size: 1.3rem;
  color: var(--ink-900);
}

.about-card p {
  margin: 0;
  color: var(--ink-600);
  line-height: 1.6;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

.value-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  transition: all 0.3s ease;
}

.value-item:hover {
  border-color: var(--brand-200);
  transform: translateY(-2px);
}

.value-emoji {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.value-text {
  font-weight: 500;
  color: var(--ink-800);
  margin: 0;
}

/* Responsive adjustments for FAQ and About */
@media (max-width: 640px) {
  .faq-question {
    padding: 16px 20px;
    font-size: 1rem;
  }
  
  .faq-answer {
    padding: 0 20px;
  }
  
  .faq-answer:not([hidden]) {
    padding: 0 20px 16px;
  }
  
  .about-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .values-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .value-item {
    padding: 16px;
  }
}
#portfolio .card img{border-radius:20px 20px 0 0;transition:all 0.4s ease}
#portfolio .card:hover img{transform:scale(1.05)}
#portfolio .card h3{margin:0;padding:20px 20px 8px;font-size:1.2rem;font-weight:600;color:var(--ink-900)}
#portfolio .card .card-content{padding:0 20px 20px}
#portfolio .card .card-desc{color:var(--ink-500);font-size:0.9rem;line-height:1.5;margin:0}

/* Featured card special styling */
.portfolio-card.featured{background:linear-gradient(135deg,var(--brand-50) 0%,var(--surface) 100%);border-color:var(--brand-300)}
.portfolio-card.featured:hover{border-color:var(--brand-400);box-shadow:0 25px 70px rgba(15,23,42,.15),0 10px 35px rgba(15,23,42,.1)}

/* Featured flag - minimalist badge */
.portfolio-flag{position:absolute;top:16px;right:16px;background:linear-gradient(135deg,var(--brand-600),var(--brand-500));color:#fff;padding:6px 12px;border-radius:20px;font-size:0.75rem;font-weight:600;letter-spacing:0.025em;box-shadow:0 4px 12px rgba(15,23,42,.15);z-index:2}

@media (max-width:980px){
  #portfolio .grid.cols-3{grid-template-columns:1fr 1fr;gap:20px}
  #portfolio .card img{height:160px}
}
@media (max-width:640px){
  #portfolio .grid.cols-3{grid-template-columns:1fr;gap:16px}
}

/* Clean up - remove unused pill styles for portfolio */
#portfolio .pill{display:none}
@media (max-width:980px){
  #portfolio .grid.cols-3{grid-template-columns:1fr}
}

/* LinkedIn Toast - removed unused styles */
#portfolio .card h3{margin:0;padding:20px 20px 8px;font-size:1.2rem;font-weight:600;color:var(--ink-900)}
#portfolio .card .card-content{padding:0 20px 20px}
#portfolio .card .card-desc{color:var(--ink-500);font-size:0.9rem;line-height:1.5;margin:0}

/* Featured card special styling */
.portfolio-card.featured{background:linear-gradient(135deg,var(--brand-50) 0%,var(--surface) 100%);border-color:var(--brand-300)}
.portfolio-card.featured:hover{border-color:var(--brand-400);box-shadow:0 25px 70px rgba(15,23,42,.15),0 10px 35px rgba(15,23,42,.1)}

/* Featured flag - minimalist badge */
.portfolio-flag{position:absolute;top:16px;right:16px;background:linear-gradient(135deg,var(--brand-600),var(--brand-500));color:#fff;padding:6px 12px;border-radius:20px;font-size:0.75rem;font-weight:600;letter-spacing:0.025em;box-shadow:0 4px 12px rgba(15,23,42,.15);z-index:2}

@media (max-width:980px){
  #portfolio .grid.cols-3{grid-template-columns:1fr 1fr;gap:20px}
  #portfolio .card img{height:160px}
}
@media (max-width:640px){
  #portfolio .grid.cols-3{grid-template-columns:1fr;gap:16px}
}

/* Clean up - remove unused pill styles for portfolio */
#portfolio .pill{display:none}
@media (max-width:980px){
  #portfolio .grid.cols-3{grid-template-columns:1fr}
}

/* === New Portfolio Design: Clean cards with bottom text panel === */
#portfolio .grid { 
  align-items: stretch;
  gap: 32px;
}

.portfolio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 8px 32px rgba(15,23,42,.08);
  transition: all .35s cubic-bezier(.2,.8,.2,1);
  cursor: pointer;
}

.portfolio-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
  transition: transform .4s ease;
}

/* Clean content panel at bottom */
.portfolio-card .card-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
}

.portfolio-card h3 {
  margin: 0;
  padding: 0;
  color: var(--ink-900);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
}

/* Description using pseudo-element for clean layout */
.portfolio-card .card-desc {
  color: var(--ink-600);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hover effects */
.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(15,23,42,.15);
  border-color: var(--brand-200);
}

.portfolio-card:hover img {
  transform: scale(1.03);
}

/* Featured card styling */
.portfolio-card.featured {
  border-color: var(--brand-300);
  box-shadow: 0 12px 40px rgba(56,189,248,.12), 0 4px 16px rgba(15,23,42,.08);
}

.portfolio-card.featured:hover {
  box-shadow: 0 20px 56px rgba(56,189,248,.18), 0 8px 24px rgba(15,23,42,.12);
}

/* Clean flag design */
.portfolio-flag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--brand-600);
  color: white;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  box-shadow: 0 4px 12px rgba(15,23,42,.15);
  z-index: 2;
}

/* Remove old overlay styles */
.portfolio-card::before,
.portfolio-card::after {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .portfolio-card img { height: 200px; }
  .portfolio-card .card-content { padding: 16px; }
}

@media (max-width: 640px) {
  .portfolio-card img { height: 180px; }
  .portfolio-card .card-content { padding: 16px; gap: 6px; }
  .portfolio-card h3 { font-size: 1rem; }
}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.calc .panel{border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;background:var(--surface);box-shadow:var(--shadow)}
.input{display:flex;align-items:center;gap:.8rem;border:1px solid var(--border);border-radius:14px;padding:.6rem .8rem;background:var(--surface)}
.input input[type="number"], .input input[type="text"], .input input[type="email"], .input input[type="tel"]{width:100%;border:0;outline:0;font-size:1rem;color:var(--ink-700);background:transparent}
.textarea{display:block;width:100%;min-height:120px;border:1px solid var(--border);border-radius:14px;padding:.6rem .8rem;background:var(--surface);font:inherit;color:var(--ink-700)}
.range{width:100%}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:.4rem .8rem;cursor:pointer}
.chip.active{background:var(--brand-600);border-color:transparent;color:#fff}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.price{background:var(--brand-50);border:1px solid #e6f2f1;border-radius:18px;padding:16px}
.price b{display:block;font-size:1.2rem;color:var(--ink-900)}
.label{font-size:.9rem;color:var(--ink-500)}
.bar{height:12px;border-radius:999px;background:linear-gradient(90deg,var(--brand-600) 10%,transparent 10%);border:1px solid var(--border)}
/* Seção de equipe com design limpo */
.team-section{margin:32px 0;position:relative}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px;position:relative;z-index:1}
.team-member{text-align:center;transition:transform 0.3s ease;animation:fadeInUp 0.6s ease-out forwards;opacity:0}
.team-member:nth-child(1){animation-delay:0.1s}
.team-member:nth-child(2){animation-delay:0.2s}
.team-member:nth-child(3){animation-delay:0.3s}
.team-member:hover{transform:none;filter:none}
.team-photo{position:relative;margin-bottom:20px;overflow:hidden;display:flex;justify-content:center;align-items:center;border-radius:16px}
.team-photo img{width:180px;height:180px;object-fit:cover;border-radius:16px;transition:transform 0.3s ease,filter 0.3s ease;margin:0 auto;display:block}
.team-photo:hover img{transform:none;filter:none}
.team-overlay{position:absolute;bottom:0;left:0;right:0;background:none;padding:20px 10px 10px;transform:translateY(100%);transition:transform 0.3s ease;display:flex;justify-content:center;align-items:end;border-radius:0 0 16px 16px}
.team-photo:hover .team-overlay{transform:translateY(0)}

.team-info h3{margin:0 0 8px;font-size:1.2rem;color:var(--ink-900);font-weight:600}
.team-role{margin:0;color:var(--brand-600);font-weight:500;font-size:1rem}
/* Seção Por que a Refatorize */
.why-section{margin:32px 0;padding:0}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:32px}
.why-item{text-align:center;padding:24px;background:var(--surface);border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.08);transition:all 0.3s ease}
.why-item:hover{transform:translateY(-5px);box-shadow:0 8px 30px rgba(0,0,0,0.12)}
.why-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 auto 16px;background:var(--brand-100);border-radius:12px;color:var(--brand-600)}
.why-item h3{margin:0 0 12px;font-size:1.1rem;color:var(--ink-900)}
.why-item p{margin:0;color:var(--ink-600);line-height:1.5}

/* Animações */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0px) rotate(0deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes pulse{0%,100%{box-shadow:0 15px 35px rgba(15,23,42,.1),0 5px 15px rgba(15,23,42,.08)}50%{box-shadow:0 20px 40px rgba(15,23,42,.15),0 8px 20px rgba(15,23,42,.12)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}

/* Animações de scroll */
.card, .hero-card{opacity:0;transform:translateY(30px);transition:all 0.6s ease-out}
.card.animate-in, .hero-card.animate-in{opacity:1;transform:translateY(0)}
.card:nth-child(even).animate-in{animation:slideInRight 0.6s ease-out forwards}
.card:nth-child(odd).animate-in{animation:slideInLeft 0.6s ease-out forwards}
.hero-card.animate-in{animation:scaleIn 0.8s ease-out forwards}

/* Animação contínua para a imagem hero */
.hero-art img{animation:gentleFloat 6s ease-in-out infinite}
@keyframes gentleFloat{0%,100%{transform:translateY(0px)}50%{transform:translateY(-10px)}}
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover}
.footer{padding:36px 0;border-top:1px solid var(--border);color:var(--ink-500)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.field{margin-bottom:12px}
.field label{display:block;margin:0 0 6px;color:var(--ink-600);font-weight:600}
.status{margin-top:8px;font-size:.95rem}
.status.ok{color:#059669}
.status.err{color:#dc2626}
@media (min-width: 980px){.hero-art{display:block}}
@media (max-width: 980px){.hero-grid{grid-template-columns:1fr}.calc{grid-template-columns:1fr}.grid.cols-3{grid-template-columns:1fr 1fr}.team-grid{grid-template-columns:1fr 1fr;gap:24px}.team-photo img{width:160px;height:160px;border-radius:16px}.why-grid{grid-template-columns:1fr 1fr;gap:24px}.cta-row{justify-content:center}}
@media (max-width: 640px){nav ul{display:none}.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--surface)}.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}.team-grid{grid-template-columns:1fr;gap:20px}.team-photo img{width:140px;height:140px;border-radius:16px}.team-section{margin:16px 0}.why-grid{grid-template-columns:1fr;gap:20px}.why-section{padding:0}.cta-row{flex-direction:column;align-items:center}.btn.linkedin-btn{width:100%;max-width:200px}}
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(2,6,23,.6);z-index:100}
[data-theme="dark"] .modal{background:rgba(2,6,23,.75)}
.modal.open{display:grid}
.modal .dialog{width:min(96vw,1000px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow)}

/* Modern Portfolio Cards */
#portfolio .grid{gap:28px;align-items:stretch}
#portfolio .card{position:relative;overflow:hidden;cursor:pointer;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:0;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);box-shadow:0 4px 20px rgba(15,23,42,.08)}
#portfolio .card:hover{transform:translateY(-8px);border-color:var(--brand-200);box-shadow:0 20px 60px rgba(15,23,42,.12),0 8px 30px rgba(15,23,42,.08)}
#portfolio .card img{width:100%;height:200px;object-fit:cover;border-radius:20px 20px 0 0;transition:all 0.4s ease}
#portfolio .card:hover img{transform:scale(1.05)}
#portfolio .card h3{margin:0;padding:20px 20px 8px;font-size:1.2rem;font-weight:600;color:var(--ink-900)}
#portfolio .card .card-content{padding:0 20px 20px}
#portfolio .card .card-desc{color:var(--ink-500);font-size:0.9rem;line-height:1.5;margin:0}

/* Featured card special styling */
.portfolio-card.featured{background:linear-gradient(135deg,var(--brand-50) 0%,var(--surface) 100%);border-color:var(--brand-300)}
.portfolio-card.featured:hover{border-color:var(--brand-400);box-shadow:0 25px 70px rgba(15,23,42,.15),0 10px 35px rgba(15,23,42,.1)}

/* Featured flag - minimalist badge */
.portfolio-flag{position:absolute;top:16px;right:16px;background:linear-gradient(135deg,var(--brand-600),var(--brand-500));color:#fff;padding:6px 12px;border-radius:20px;font-size:0.75rem;font-weight:600;letter-spacing:0.025em;box-shadow:0 4px 12px rgba(15,23,42,.15);z-index:2}

@media (max-width:980px){
  #portfolio .grid.cols-3{grid-template-columns:1fr 1fr;gap:20px}
  #portfolio .card img{height:160px}
}
@media (max-width:640px){
  #portfolio .grid.cols-3{grid-template-columns:1fr;gap:16px}
}

/* Clean up - remove unused pill styles for portfolio */
#portfolio .pill{display:none}
@media (max-width:980px){
  #portfolio .grid.cols-3{grid-template-columns:1fr}
}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.calc .panel{border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;background:var(--surface);box-shadow:var(--shadow)}
.input{display:flex;align-items:center;gap:.8rem;border:1px solid var(--border);border-radius:14px;padding:.6rem .8rem;background:var(--surface)}
.input input[type="number"], .input input[type="text"], .input input[type="email"], .input input[type="tel"]{width:100%;border:0;outline:0;font-size:1rem;color:var(--ink-700);background:transparent}
.textarea{display:block;width:100%;min-height:120px;border:1px solid var(--border);border-radius:14px;padding:.6rem .8rem;background:var(--surface);font:inherit;color:var(--ink-700)}
.range{width:100%}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:.4rem .8rem;cursor:pointer}
.chip.active{background:var(--brand-600);border-color:transparent;color:#fff}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.price{background:var(--brand-50);border:1px solid #e6f2f1;border-radius:18px;padding:16px}
.price b{display:block;font-size:1.2rem;color:var(--ink-900)}
.label{font-size:.9rem;color:var(--ink-500)}
.bar{height:12px;border-radius:999px;background:linear-gradient(90deg,var(--brand-600) 10%,transparent 10%);border:1px solid var(--border)}
/* Seção de equipe com design limpo */
.team-section{margin:32px 0;position:relative}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px;position:relative;z-index:1}
.team-member{text-align:center;transition:transform 0.3s ease;animation:fadeInUp 0.6s ease-out forwards;opacity:0}
.team-member:nth-child(1){animation-delay:0.1s}
.team-member:nth-child(2){animation-delay:0.2s}
.team-member:nth-child(3){animation-delay:0.3s}
.team-member:hover{transform:none;filter:none}
.team-photo{position:relative;margin-bottom:20px;overflow:hidden;display:flex;justify-content:center;align-items:center;border-radius:16px}
.team-photo img{width:180px;height:180px;object-fit:cover;border-radius:16px;transition:transform 0.3s ease,filter 0.3s ease;margin:0 auto;display:block}
.team-photo:hover img{transform:none;filter:none}
.team-overlay{position:absolute;bottom:0;left:0;right:0;background:none;padding:20px 10px 10px;transform:translateY(100%);transition:transform 0.3s ease;display:flex;justify-content:center;align-items:end;border-radius:0 0 16px 16px}
.team-photo:hover .team-overlay{transform:translateY(0)}

.team-info h3{margin:0 0 8px;font-size:1.2rem;color:var(--ink-900);font-weight:600}
.team-role{margin:0;color:var(--brand-600);font-weight:500;font-size:1rem}
/* Seção Por que a Refatorize */
.why-section{margin:32px 0;padding:0}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:32px}
.why-item{text-align:center;padding:24px;background:var(--surface);border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.08);transition:all 0.3s ease}
.why-item:hover{transform:translateY(-5px);box-shadow:0 8px 30px rgba(0,0,0,0.12)}
.why-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 auto 16px;background:var(--brand-100);border-radius:12px;color:var(--brand-600)}
.why-item h3{margin:0 0 12px;font-size:1.1rem;color:var(--ink-900)}
.why-item p{margin:0;color:var(--ink-600);line-height:1.5}

/* Animações */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0px) rotate(0deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes pulse{0%,100%{box-shadow:0 15px 35px rgba(15,23,42,.1),0 5px 15px rgba(15,23,42,.08)}50%{box-shadow:0 20px 40px rgba(15,23,42,.15),0 8px 20px rgba(15,23,42,.12)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}

/* Animações de scroll */
.card, .hero-card{opacity:0;transform:translateY(30px);transition:all 0.6s ease-out}
.card.animate-in, .hero-card.animate-in{opacity:1;transform:translateY(0)}
.card:nth-child(even).animate-in{animation:slideInRight 0.6s ease-out forwards}
.card:nth-child(odd).animate-in{animation:slideInLeft 0.6s ease-out forwards}
.hero-card.animate-in{animation:scaleIn 0.8s ease-out forwards}

/* Animação contínua para a imagem hero */
.hero-art img{animation:gentleFloat 6s ease-in-out infinite}
@keyframes gentleFloat{0%,100%{transform:translateY(0px)}50%{transform:translateY(-10px)}}
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover}
.footer{padding:36px 0;border-top:1px solid var(--border);color:var(--ink-500)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.field{margin-bottom:12px}
.field label{display:block;margin:0 0 6px;color:var(--ink-600);font-weight:600}
.status{margin-top:8px;font-size:.95rem}
.status.ok{color:#059669}
.status.err{color:#dc2626}
@media (min-width: 980px){.hero-art{display:block}}
@media (max-width: 980px){.hero-grid{grid-template-columns:1fr}.calc{grid-template-columns:1fr}.grid.cols-3{grid-template-columns:1fr 1fr}.team-grid{grid-template-columns:1fr 1fr;gap:24px}.team-photo img{width:160px;height:160px;border-radius:16px}.why-grid{grid-template-columns:1fr 1fr;gap:24px}.cta-row{justify-content:center}}
@media (max-width: 640px){nav ul{display:none}.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--surface)}.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}.team-grid{grid-template-columns:1fr;gap:20px}.team-photo img{width:140px;height:140px;border-radius:16px}.team-section{margin:16px 0}.why-grid{grid-template-columns:1fr;gap:20px}.why-section{padding:0}.cta-row{flex-direction:column;align-items:center}.btn.linkedin-btn{width:100%;max-width:200px}}
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(2,6,23,.6);z-index:100}
[data-theme="dark"] .modal{background:rgba(2,6,23,.75)}
.modal.open{display:grid}
.modal .dialog{width:min(96vw,1000px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow)}

/* Modern Portfolio Cards */
#portfolio .grid{gap:28px;align-items:stretch}
#portfolio .card{position:relative;overflow:hidden;cursor:pointer;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:0;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);box-shadow:0 4px 20px rgba(15,23,42,.08)}
#portfolio .card:hover{transform:translateY(-8px);border-color:var(--brand-200);box-shadow:0 20px 60px rgba(15,23,42,.12),0 8px 30px rgba(15,23,42,.08)}
#portfolio .card img{width:100%;height:200px;object-fit:cover;border-radius:20px 20px 0 0;transition:all 0.4s ease}
#portfolio .card:hover img{transform:scale(1.05)}
#portfolio .card h3{margin:0;padding:20px 20px 8px;font-size:1.2rem;font-weight:600;color:var(--ink-900)}
#portfolio .card .card-content{padding:0 20px 20px}
#portfolio .card .card-desc{color:var(--ink-500);font-size:0.9rem;line-height:1.5;margin:0}

/* Featured card special styling */
.portfolio-card.featured{background:linear-gradient(135deg,var(--brand-50) 0%,var(--surface) 100%);border-color:var(--brand-300)}
.portfolio-card.featured:hover{border-color:var(--brand-400);box-shadow:0 25px 70px rgba(15,23,42,.15),0 10px 35px rgba(15,23,42,.1)}

/* Featured flag - minimalist badge */
.portfolio-flag{position:absolute;top:16px;right:16px;background:linear-gradient(135deg,var(--brand-600),var(--brand-500));color:#fff;padding:6px 12px;border-radius:20px;font-size:0.75rem;font-weight:600;letter-spacing:0.025em;box-shadow:0 4px 12px rgba(15,23,42,.15);z-index:2}

@media (max-width:980px){
  #portfolio .grid.cols-3{grid-template-columns:1fr 1fr;gap:20px}
  #portfolio .card img{height:160px}
}
@media (max-width:640px){
  #portfolio .grid.cols-3{grid-template-columns:1fr;gap:16px}
}

/* Clean up - remove unused pill styles for portfolio */
#portfolio .pill{display:none}
@media (max-width:980px){
  #portfolio .grid.cols-3{grid-template-columns:1fr}
}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.calc .panel{border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;background:var(--surface);box-shadow:var(--shadow)}
.input{display:flex;align-items:center;gap:.8rem;border:1px solid var(--border);border-radius:14px;padding:.6rem .8rem;background:var(--surface)}
.input input[type="number"], .input input[type="text"], .input input[type="email"], .input input[type="tel"]{width:100%;border:0;outline:0;font-size:1rem;color:var(--ink-700);background:transparent}
.textarea{display:block;width:100%;min-height:120px;border:1px solid var(--border);border-radius:14px;padding:.6rem .8rem;background:var(--surface);font:inherit;color:var(--ink-700)}
.range{width:100%}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:.4rem .8rem;cursor:pointer}
.chip.active{background:var(--brand-600);border-color:transparent;color:#fff}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.price{background:var(--brand-50);border:1px solid #e6f2f1;border-radius:18px;padding:16px}
.price b{display:block;font-size:1.2rem;color:var(--ink-900)}
.label{font-size:.9rem;color:var(--ink-500)}
.bar{height:12px;border-radius:999px;background:linear-gradient(90deg,var(--brand-600) 10%,transparent 10%);border:1px solid var(--border)}
/* Seção de equipe com design limpo */
.team-section{margin:32px 0;position:relative}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px;position:relative;z-index:1}
.team-member{text-align:center;transition:transform 0.3s ease;animation:fadeInUp 0.6s ease-out forwards;opacity:0}
.team-member:nth-child(1){animation-delay:0.1s}
.team-member:nth-child(2){animation-delay:0.2s}
.team-member:nth-child(3){animation-delay:0.3s}
.team-member:hover{transform:none;filter:none}
.team-photo{position:relative;margin-bottom:20px;overflow:hidden;display:flex;justify-content:center;align-items:center;border-radius:16px}
.team-photo img{width:180px;height:180px;object-fit:cover;border-radius:16px;transition:transform 0.3s ease,filter 0.3s ease;margin:0 auto;display:block}
.team-photo:hover img{transform:none;filter:none}
.team-overlay{position:absolute;bottom:0;left:0;right:0;background:none;padding:20px 10px 10px;transform:translateY(100%);transition:transform 0.3s ease;display:flex;justify-content:center;align-items:end;border-radius:0 0 16px 16px}
.team-photo:hover .team-overlay{transform:translateY(0)}

.team-info h3{margin:0 0 8px;font-size:1.2rem;color:var(--ink-900);font-weight:600}
.team-role{margin:0;color:var(--brand-600);font-weight:500;font-size:1rem}
/* Seção Por que a Refatorize */
.why-section{margin:32px 0;padding:0}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:32px}
.why-item{text-align:center;padding:24px;background:var(--surface);border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.08);transition:all 0.3s ease}
.why-item:hover{transform:translateY(-5px);box-shadow:0 8px 30px rgba(0,0,0,0.12)}
.why-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 auto 16px;background:var(--brand-100);border-radius:12px;color:var(--brand-600)}
.why-item h3{margin:0 0 12px;font-size:1.1rem;color:var(--ink-900)}
.why-item p{margin:0;color:var(--ink-600);line-height:1.5}

/* Animações */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0px) rotate(0deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes pulse{0%,100%{box-shadow:0 15px 35px rgba(15,23,42,.1),0 5px 15px rgba(15,23,42,.08)}50%{box-shadow:0 20px 40px rgba(15,23,42,.15),0 8px 20px rgba(15,23,42,.12)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}

/* Animações de scroll */
.card, .hero-card{opacity:0;transform:translateY(30px);transition:all 0.6s ease-out}
.card.animate-in, .hero-card.animate-in{opacity:1;transform:translateY(0)}
.card:nth-child(even).animate-in{animation:slideInRight 0.6s ease-out forwards}
.card:nth-child(odd).animate-in{animation:slideInLeft 0.6s ease-out forwards}
.hero-card.animate-in{animation:scaleIn 0.8s ease-out forwards}

/* Animação contínua para a imagem hero */
.hero-art img{animation:gentleFloat 6s ease-in-out infinite}
@keyframes gentleFloat{0%,100%{transform:translateY(0px)}50%{transform:translateY(-10px)}}
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover}
.footer{padding:36px 0;border-top:1px solid var(--border);color:var(--ink-500)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.field{margin-bottom:12px}
.field label{display:block;margin:0 0 6px;color:var(--ink-600);font-weight:600}
.status{margin-top:8px;font-size:.95rem}
.status.ok{color:#059669}
.status.err{color:#dc2626}
@media (min-width: 980px){.hero-art{display:block}}
@media (max-width: 980px){.hero-grid{grid-template-columns:1fr}.calc{grid-template-columns:1fr}.grid.cols-3{grid-template-columns:1fr 1fr}.team-grid{grid-template-columns:1fr 1fr;gap:24px}.team-photo img{width:160px;height:160px;border-radius:16px}.why-grid{grid-template-columns:1fr 1fr;gap:24px}.cta-row{justify-content:center}}
@media (max-width: 640px){nav ul{display:none}.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--surface)}.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}.team-grid{grid-template-columns:1fr;gap:20px}.team-photo img{width:140px;height:140px;border-radius:16px}.team-section{margin:16px 0}.why-grid{grid-template-columns:1fr;gap:20px}.why-section{padding:0}.cta-row{flex-direction:column;align-items:center}.btn.linkedin-btn{width:100%;max-width:200px}}
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(2,6,23,.6);z-index:100}
[data-theme="dark"] .modal{background:rgba(2,6,23,.75)}
.modal.open{display:grid}
.modal .dialog{width:min(96vw,1000px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow)}

/* Modern Portfolio Cards */
#portfolio .grid{gap:28px;align-items:stretch}
#portfolio .card{position:relative;overflow:hidden;cursor:pointer;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:0;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);box-shadow:0 4px 20px rgba(15,23,42,.08)}
#portfolio .card:hover{transform:translateY(-8px);border-color:var(--brand-200);box-shadow:0 20px 60px rgba(15,23,42,.12),0 8px 30px rgba(15,23,42,.08)}
#portfolio .card img{width:100%;height:200px;object-fit:cover;border-radius:20px 20px 0 0;transition:all 0.4s ease}
#portfolio .card:hover img{transform:scale(1.05)}
#portfolio .card h3{margin:0;padding:20px 20px 8px;font-size:1.2rem;font-weight:600;color:var(--ink-900)}
#portfolio .card .card-content{padding:0 20px 20px}
#portfolio .card .card-desc{color:var(--ink-500);font-size:0.9rem;line-height:1.5;margin:0}

/* Featured card special styling */
.portfolio-card.featured{background:linear-gradient(135deg,var(--brand-50) 0%,var(--surface) 100%);border-color:var(--brand-300)}
.portfolio-card.featured:hover{border-color:var(--brand-400);box-shadow:0 25px 70px rgba(15,23,42,.15),0 10px 35px rgba(15,23,42,.1)}

/* Featured flag - minimalist badge */
.portfolio-flag{position:absolute;top:16px;right:16px;background:linear-gradient(135deg,var(--brand-600),var(--brand-500));color:#fff;padding:6px 12px;border-radius:20px;font-size:0.75rem;font-weight:600;letter-spacing:0.025em;box-shadow:0 4px 12px rgba(15,23,42,.15);z-index:2}

@media (max-width:980px){
  #portfolio .grid.cols-3{grid-template-columns:1fr 1fr;gap:20px}
  #portfolio .card img{height:160px}
}
@media (max-width:640px){
  #portfolio .grid.cols-3{grid-template-columns:1fr;gap:16px}
}

/* Clean up - remove unused pill styles for portfolio */
#portfolio .pill{display:none}
@media (max-width:980px){
  #portfolio .grid.cols-3{grid-template-columns:1fr}
}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.calc .panel{border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;background:var(--surface);box-shadow:var(--shadow)}
.input{display:flex;align-items:center;gap:.8rem;border:1px solid var(--border);border-radius:14px;padding:.6rem .8rem;background:var(--surface)}
.input input[type="number"], .input input[type="text"], .input input[type="email"], .input input[type="tel"]{width:100%;border:0;outline:0;font-size:1rem;color:var(--ink-700);background:transparent}
.textarea{display:block;width:100%;min-height:120px;border:1px solid var(--border);border-radius:14px;padding:.6rem .8rem;background:var(--surface);font:inherit;color:var(--ink-700)}
.range{width:100%}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:.4rem .8rem;cursor:pointer}
.chip.active{background:var(--brand-600);border-color:transparent;color:#fff}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.price{background:var(--brand-50);border:1px solid #e6f2f1;border-radius:18px;padding:16px}
.price b{display:block;font-size:1.2rem;color:var(--ink-900)}
.label{font-size:.9rem;color:var(--ink-500)}
.bar{height:12px;border-radius:999px;background:linear-gradient(90deg,var(--brand-600) 10%,transparent 10%);border:1px solid var(--border)}
/* Seção de equipe com design limpo */
.team-section{margin:32px 0;position:relative}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px;position:relative;z-index:1}
.team-member{text-align:center;transition:transform 0.3s ease;animation:fadeInUp 0.6s ease-out forwards;opacity:0}
.team-member:nth-child(1){animation-delay:0.1s}
.team-member:nth-child(2){animation-delay:0.2s}
.team-member:nth-child(3){animation-delay:0.3s}
.team-member:hover{transform:none;filter:none}
.team-photo{position:relative;margin-bottom:20px;overflow:hidden;display:flex;justify-content:center;align-items:center;border-radius:16px}
.team-photo img{width:180px;height:180px;object-fit:cover;border-radius:16px;transition:transform 0.3s ease,filter 0.3s ease;margin:0 auto;display:block}
.team-photo:hover img{transform:none;filter:none}
.team-overlay{position:absolute;bottom:0;left:0;right:0;background:none;padding:20px 10px 10px;transform:translateY(100%);transition:transform 0.3s ease;display:flex;justify-content:center;align-items:end;border-radius:0 0 16px 16px}
.team-photo:hover .team-overlay{transform:translateY(0)}

.team-info h3{margin:0 0 8px;font-size:1.2rem;color:var(--ink-900);font-weight:600}
.team-role{margin:0;color:var(--brand-600);font-weight:500;font-size:1rem}
/* Seção Por que a Refatorize */
.why-section{margin:32px 0;padding:0}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:32px}
.why-item{text-align:center;padding:24px;background:var(--surface);border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.08);transition:all 0.3s ease}
.why-item:hover{transform:translateY(-5px);box-shadow:0 8px 30px rgba(0,0,0,0.12)}
.why-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 auto 16px;background:var(--brand-100);border-radius:12px;color:var(--brand-600)}
.why-item h3{margin:0 0 12px;font-size:1.1rem;color:var(--ink-900)}
.why-item p{margin:0;color:var(--ink-600);line-height:1.5}

/* Animações */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0px) rotate(0deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes pulse{0%,100%{box-shadow:0 15px 35px rgba(15,23,42,.1),0 5px 15px rgba(15,23,42,.08)}50%{box-shadow:0 20px 40px rgba(15,23,42,.15),0 8px 20px rgba(15,23,42,.12)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}

/* Animações de scroll */
.card, .hero-card{opacity:0;transform:translateY(30px);transition:all 0.6s ease-out}
.card.animate-in, .hero-card.animate-in{opacity:1;transform:translateY(0)}
.card:nth-child(even).animate-in{animation:slideInRight 0.6s ease-out forwards}
.card:nth-child(odd).animate-in{animation:slideInLeft 0.6s ease-out forwards}
.hero-card.animate-in{animation:scaleIn 0.8s ease-out forwards}

/* Animação contínua para a imagem hero */
.hero-art img{animation:gentleFloat 6s ease-in-out infinite}
@keyframes gentleFloat{0%,100%{transform:translateY(0px)}50%{transform:translateY(-10px)}}
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover}
.footer{padding:36px 0;border-top:1px solid var(--border);color:var(--ink-500)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.field{margin-bottom:12px}
.field label{display:block;margin:0 0 6px;color:var(--ink-600);font-weight:600}
.status{margin-top:8px;font-size:.95rem}
.status.ok{color:#059669}
.status.err{color:#dc2626}
@media (min-width: 980px){.hero-art{display:block}}
@media (max-width: 980px){.hero-grid{grid-template-columns:1fr}.calc{grid-template-columns:1fr}.grid.cols-3{grid-template-columns:1fr 1fr}.team-grid{grid-template-columns:1fr 1fr;gap:24px}.team-photo img{width:160px;height:160px;border-radius:16px}.why-grid{grid-template-columns:1fr 1fr;gap:24px}.cta-row{justify-content:center}}
@media (max-width: 640px){nav ul{display:none}.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--surface)}.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}.team-grid{grid-template-columns:1fr;gap:20px}.team-photo img{width:140px;height:140px;border-radius:16px}.team-section{margin:16px 0}.why-grid{grid-template-columns:1fr;gap:20px}.why-section{padding:0}.cta-row{flex-direction:column;align-items:center}.btn.linkedin-btn{width:100%;max-width:200px}}
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(2,6,23,.6);z-index:100}
[data-theme="dark"] .modal{background:rgba(2,6,23,.75)}
.modal.open{display:grid}
.modal .dialog{width:min(96vw,1000px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow)}

/* Modern Portfolio Cards */
#portfolio .grid{gap:28px;align-items:stretch}
#portfolio .card{position:relative;overflow:hidden;cursor:pointer;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:0;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);box-shadow:0 4px 20px rgba(15,23,42,.08)}
#portfolio .card:hover{transform:translateY(-8px);border-color:var(--brand-200);box-shadow:0 20px 60px rgba(15,23,42,.12),0 8px 30px rgba(15,23,42,.08)}
#portfolio .card img{width:100%;height:200px;object-fit:cover;border-radius