/* software-consulting.css - cleaned and spacing fixes
   Replace the file contents with this to remove overlap issues
*/

/* Fallback variables (safe) */
:root{
  --primary-accent: #f97316;
  --primary-accent-dark: #c2410c;
  --text-dark: #2b1f1a;
  --text-gray: #7a7a7a;
  --bg-white: #ffffff;
  --bg-light-gray: #fbf7f5;
  --border-gray: #ece6e3;
  --container-max: 1400px;
}

/* Base */
* { box-sizing: border-box; }
html,body { height:100%; }
body{
  margin:0;
  font-family:"Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(135deg, var(--bg-light-gray) 0%, var(--bg-white) 50%, rgba(249,115,22,0.05) 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:var(--text-dark);
  line-height:1.5;
}

/* animated background orbs (behind content) */
.animated-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.gradient-orb{
  position:absolute;
  width:340px;
  height:340px;
  border-radius:50%;
  filter: blur(100px);
  opacity:0.28;
  pointer-events:none;
  animation: float-orb 20s infinite ease-in-out;
}
.orb1{ top:8%; left:6%; background: radial-gradient(circle, rgba(249,115,22,0.18), transparent); }
.orb2{ right:8%; bottom:12%; background: radial-gradient(circle, rgba(0,0,0,0.03), transparent); animation-delay:6s; }
.orb3{ left:50%; top:48%; transform: translate(-10%, -10%); background: radial-gradient(circle, rgba(249,115,22,0.12), transparent); animation-delay:12s; }
@keyframes float-orb { 0%,100%{transform:translateY(0) scale(1);} 33%{transform:translateY(-18px) scale(1.03);} 66%{transform:translateY(12px) scale(0.98);} }

/* container helper (ensures content sits above orbs) */
.container{ width:92%; max-width:var(--container-max); margin:0 auto; position:relative; z-index:2; }

/* HERO */
.hero{ position:relative; min-height:80vh; display:flex; align-items:center; justify-content:center; padding:4rem 0; text-align:center; z-index:2; }
.hero-content{ max-width:1000px; margin:0 auto; padding:0 1rem; }
.hero-badge{ display:inline-flex; align-items:center; gap:0.9rem; background:rgba(249,115,22,0.08); border:1px solid rgba(249,115,22,0.2); padding:0.8rem 2rem; border-radius:60px; margin-bottom:1.4rem; box-shadow:0 6px 24px rgba(249,115,22,0.06); transition:transform .22s, box-shadow .22s; }
.hero-badge.hovered, .hero-badge:hover{ transform:translateY(-6px); box-shadow:0 18px 48px rgba(249,115,22,0.12); }
.badge-box{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.badge-box img{ width:100%; height:auto; display:block; transform-origin:center; animation: icon-tilt 6s ease-in-out infinite; }
@keyframes icon-tilt { 0%,100%{transform:rotate(0deg);} 50%{transform:rotate(-6deg);} }
.badge-text{ font-size:1.05rem; font-weight:800; color:var(--primary-accent-dark); letter-spacing:0.6px; text-transform:uppercase; white-space:nowrap; }
.hero h1{ font-size:clamp(2.2rem,5vw,3.8rem); font-weight:900; margin:0.6rem 0; line-height:1.02; background:linear-gradient(135deg,var(--text-dark) 0%,var(--primary-accent-dark) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.highlight{ background:linear-gradient(135deg,var(--primary-accent-dark),var(--primary-accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.hero p{ color:var(--text-gray); font-size:1.05rem; max-width:820px; margin:0 auto 1.5rem; line-height:1.7; }
.hero-buttons{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:0.6rem; padding:0.9rem 1.8rem; border-radius:40px; font-weight:800; text-decoration:none; cursor:pointer; background:linear-gradient(135deg,var(--primary-accent),var(--primary-accent-dark)); color:#fff; border:none; box-shadow:0 8px 30px rgba(249,115,22,0.18); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(249,115,22,0.2); }
.btn-secondary{ background:rgba(255,255,255,0.75); border:2px solid rgba(249,115,22,0.28); color:var(--primary-accent); padding:1rem 2.2rem; border-radius:50px; font-weight:700; }

/* SECTION HEADER (common) */
.section-header{ text-align:center; margin-bottom:1.25rem; }
.section-badge{ display:inline-block; padding:0.35rem 0.9rem; border-radius:999px; background:rgba(249,115,22,0.08); color:var(--primary-accent); border:1px solid rgba(249,115,22,0.12); font-weight:700; margin-bottom:0.75rem; }
.section-title{ font-size:clamp(1.6rem,3.2vw,2.4rem); font-weight:800; margin:.25rem 0; }
.section-subtitle{ color:var(--text-gray); max-width:760px; margin:.65rem auto 1.5rem; }

/* SERVICES */
.services-section{ padding:6.25rem 0 4rem; background:transparent; }
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; max-width:var(--container-max); margin:3rem auto 0; grid-auto-rows:180px; }
.service-card{ background:var(--bg-light-gray); border:1px solid var(--border-gray); border-radius:16px; padding:1.5rem; transition:transform .28s, box-shadow .28s, border-color .28s; display:flex; flex-direction:column; justify-content:space-between; z-index:2; }
.service-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,0.06); border-color:rgba(249,115,22,0.12); }
.service-card.large{ grid-column:span 2; grid-row:span 2; }
.service-card.wide{ grid-column:span 2; }
.service-icon{ font-size:1.8rem; color:var(--primary-accent-dark); margin-bottom:0.75rem; }
.service-card h4{ color:var(--text-dark); font-size:1.2rem; font-weight:700; margin-bottom:0.5rem; }
.service-card p{ color:var(--text-gray); font-size:1rem; line-height:1.5; }

/* PROPS / WHY US - fix for overlapping numbers */
.props-section{ padding:6.5rem 0; background:linear-gradient(180deg,var(--bg-light-gray) 0%, rgba(249,115,22,0.06) 100%); }
.props-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; max-width:1200px; margin:3rem auto 0; }
.prop-card{ position:relative; background:var(--bg-white); border:1px solid var(--border-gray); border-radius:16px; padding:3.4rem 1.8rem 2.2rem 1.8rem; transition: transform .28s, box-shadow .28s, border-color .28s; overflow:visible; z-index:2; }
.prop-card:hover{ transform:translateY(-6px); box-shadow:0 15px 40px rgba(249,115,22,0.12); border-color:rgba(249,115,22,0.28); }
.prop-number{ position:absolute; top:14px; left:14px; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--primary-accent),var(--primary-accent-dark)); box-shadow:0 8px 20px rgba(249,115,22,0.16); font-size:0.95rem; z-index:3; }
.prop-card h4{ margin:0 0 0.6rem 0; color:var(--text-dark); font-size:1.25rem; font-weight:700; }
.prop-card p{ color:var(--text-gray); margin:0; font-size:1rem; line-height:1.55; }

/* BENEFITS / WHO WE HELP - make bigger & avoid overlap with previous */
.benefits-section{ padding:7.5rem 0 5rem; background:linear-gradient(180deg, rgba(249,115,22,0.04) 0%, rgba(255,255,255,0) 60%); }
.benefits-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; max-width:1300px; margin:3.5rem auto 0; }
.benefit-card{ padding:2.6rem 2.2rem; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.92)); border:1px solid rgba(229,220,216,0.7); box-shadow:0 10px 30px rgba(0,0,0,0.04); transition:transform .28s, box-shadow .28s; z-index:2; }
.benefit-card:hover{ transform:translateY(-6px); box-shadow:0 16px 36px rgba(0,0,0,0.06); }
.benefit-card h4{ margin:0 0 0.75rem 0; color:var(--primary-accent-dark); font-size:1.12rem; font-weight:800; }
.benefit-card ul{ margin:0; padding-left:1rem; color:var(--text-gray); font-size:0.98rem; line-height:1.6; }
.benefit-card li{ margin-bottom:0.5rem; }

/* CTO section (spacious card) */
.cto-section{ padding:7rem 0 5rem; }
.cto-content{ max-width:1180px; margin:0 auto; padding:4rem 3rem; background:var(--bg-white); border:1px solid var(--border-gray); border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,0.06); z-index:2; }
.cto-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:1.6rem; }
.cto-feature{ min-height:88px; padding:1.45rem 1.3rem; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95)); border:1px solid rgba(233,226,222,0.8); display:flex; flex-direction:column; justify-content:center; gap:0.35rem; transition:transform .28s, box-shadow .28s; z-index:2; }
.cto-feature:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.05); }
.cto-feature h5{ margin:0; font-size:1rem; font-weight:700; display:flex; align-items:center; gap:0.45rem; }
.cto-feature p{ margin:0; color:var(--text-gray); font-size:0.95rem; line-height:1.5; }

/* CTA */
.final-cta-section{ padding:6rem 0 6rem; background:var(--bg-white); }
.cta-card{ max-width:1000px; margin:0 auto; padding:3rem; border-radius:16px; text-align:center; background:var(--bg-white); border:1px solid rgba(249,115,22,0.28); box-shadow:0 20px 60px rgba(249,115,22,0.14); z-index:2; }
.cta-title{ font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:900; margin-bottom:0.8rem; background:linear-gradient(135deg,var(--text-dark) 0%, var(--primary-accent-dark) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.cta-desc{ color:var(--text-gray); font-size:1.05rem; margin-bottom:1.5rem; }

/* Reveal on scroll animations */
.reveal{ opacity:0; transform: translateY(18px) scale(0.995); transition: opacity 620ms cubic-bezier(.2,.8,.2,1), transform 620ms cubic-bezier(.2,.8,.2,1); will-change: opacity, transform; }
.reveal.visible{ opacity:1; transform: translateY(0) scale(1); }

/* Responsive adjustments */
@media (max-width:1200px){
  .services-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .props-grid{ grid-template-columns:repeat(2,1fr); }
  .benefits-grid{ grid-template-columns:repeat(2,1fr); max-width:1000px; }
  .cto-features{ grid-template-columns:repeat(2,1fr); }
  .prop-card{ padding-top:2.8rem; }
}
@media (max-width:768px){
  .hero{ padding-top:5.5rem; padding-bottom:3rem; min-height:auto; }
  .hero h1{ font-size: clamp(1.6rem,6vw,2.4rem); }
  .badge-text{ font-size:0.95rem; }
  .badge-box{ width:30px; height:30px; }
  .services-grid, .props-grid, .benefits-grid, .cto-features{ grid-template-columns:1fr; }
  .prop-number{ width:36px; height:36px; font-size:0.92rem; top:12px; left:12px; }
  .prop-card{ padding-top:2.4rem; }
  .cto-content{ padding:2rem; }
  .benefit-card{ padding:1.8rem; }
  .service-card.large{ grid-column:span 1; grid-row:span 1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .gradient-orb, .badge-box img, .reveal, .service-card, .prop-card, .benefit-card, .cto-feature { animation:none; transition:none; transform:none; }
  .reveal{ opacity:1; transform:none; }
}