:root{
  --color-light: #DFD0B8;
  --color-muted: #948979;
  --color-mid:   #393E46;
  --color-dark:  #222831;
  --glass-bg: rgba(255,255,255,0.95);
  --glass-border: rgba(34,40,49,0.06);
}

.main-wrapper{
  min-height:100%;
  width:100%;
  background-color: #DFD0B8 !important;
  overflow-x:hidden;
}
*{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;box-sizing:border-box;margin:0;padding:0}
html,body{height:100%; color:#393E46 !important;}

@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
@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 float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
@keyframes shimmer{0%{background-position:-1000px 0}100%{background-position:1000px 0}}
@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.animate-on-scroll{opacity:0;transition:opacity 0.6s ease, transform 0.6s ease}
.animate-on-scroll.visible{animation:fadeInUp 0.8s ease forwards}

.glass-card{
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(34,40,49,0.06);
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.glass-card:hover{ transform: translateY(-8px); box-shadow:0 20px 40px rgba(34,40,49,0.08); border-color: #94897966 !important;}

.hero-bg{
  background: #222831fa !important;
  position:relative; overflow:hidden;
  height: 89vh;
}
@media screen and (max-width: 768px) {
  .hero-bg {
    height: 120vh;
  }
}
.hero-bg::before,
.hero-bg::after {
  display: none !important;
}

#hero-headline, .hero-bg h1 { font-size:3rem; font-weight:700; margin-bottom:1.5rem; line-height:1.1; color:#FFFFFF !important; text-wrap:balance; }
#hero-subheadline, .hero-bg p { font-size:1.25rem; font-weight:400; margin-bottom:3rem; color: #FFFFFF !important; max-width:700px; margin-left:auto; margin-right:auto; line-height:1.6; }

.hero-content > div[style*="backdrop-filter"]{ background: rgba(255,255,255,0.6) !important; }
.hero-content > div[style*="backdrop-filter"] span{ color: #222831 !important; font-size:0.875rem; font-weight:600; letter-spacing:0.05em; }

.btn-primary{
  position:relative; overflow:hidden;
  background:#DFD0B8 !important;
  color: #222831 !important;
  padding:1.1rem 2.25rem;
  border-radius:12px; font-weight:600; display:inline-flex; align-items:center; gap:0.5rem;
  box-shadow:0 6px 18px rgba(34,40,49,0.06);
  border: 1px solid #948979 !important;
}
.btn-primary:hover::before{ display:none !important; }
.btn-primary:hover{ background:#FFFFFF !important; transform:translateY(-2px); box-shadow:0 12px 30px rgba(34,40,49,0.08); }

.btn-secondary{
  background:transparent !important;
  color: #FFFFFF !important;
  padding:1.05rem 2.25rem !important;
  border-radius:12px;
  border:2px solid #DFD0B8 !important;
  font-weight:600;
  backdrop-filter: blur(6px);
}
.btn-secondary:hover{ background: #DFD0B8 !important; color:#222831 !important; transform:translateY(-2px); }

.floating-element{
  display:inline-flex; align-items:center; gap:1rem;
  background: rgba(255,255,255,0.15) !important;
  padding:1rem 2rem; border-radius:50px; backdrop-filter: blur(8px);
  border: 1px solid #DFD0B8 !important;
}
.floating-element .counter{ font-size:1.25rem; font-weight:700; color: #FFFFFF !important; }

.scroll-indicator svg{ stroke: #FFFFFF; }

section[style*="background: white"] { background: #FFFFFF; }

.problem-card, .service-card{
  padding:2.5rem; border-radius:20px;
  background: #FFFFFF !important;
  border: 1px solid #94897933 !important;
  box-shadow: 0 4px 12px rgba(148,137,121,0.08) !important;
}
.problem-card h3, .service-card h3{ font-size:1.5rem; font-weight:600; margin-bottom:1rem; color: #222831 !important; }
.problem-card p, .service-card p{ color: #393E46 !important; margin-bottom:1.5rem; line-height:1.7; }

.problem-card > div[style*="background: linear-gradient"], .service-icon, .value-icon-wrapper > div{
  background: #222831 !important;
  border-radius: 20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 8px rgba(34,40,49,0.15) !important;
}

.problem-card > div[style*="border-left"], .glass-card > div[style*="border-left"]{
  background: #DFD0B833 !important;
  border-left: 4px solid #948979 !important;
}

span[style*="background: rgba(26, 95, 74, 0.1)"], span[style*="background: rgba(26, 95, 74, 0.1);"],
div[style*="display: inline-block; padding: 0.5rem 1.5rem; background: rgba(26, 95, 74, 0.1)"]{
  background: #DFD0B8 !important;
  color: #393E46 !important;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  display: inline-block;
  font-size:0.875rem; font-weight:500;
  border: 1px solid #94897933 !important;
}

#cta-primary {
    background: #DFD0B8 !important;
    color: #222831 !important;
    border: 1px solid #948979 !important;
}

#cta-secondary {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 2px solid #DFD0B8 !important;
}

#cta-primary:hover {
    background: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 40, 49, 0.15) !important;
}

#cta-secondary:hover {
    background: #DFD0B8 !important;
    color: #222831 !important;
}

#problems-heading,
#services-heading,
#portfolio-heading,
#value-heading,
#testimonials-heading {
    color: #222831 !important;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(148, 137, 121, 0.12) !important;
}

.service-card span[style*="padding: 0.5rem 1rem"] {
    background: #DFD0B8 !important;
    color: #393E46 !important;
    border: 1px solid #94897933 !important;
}

.portfolio-overlay {
    background: rgba(34, 40, 49, 0.95) !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    border-radius: 20px !important;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1 !important;
}

.portfolio-content {
    transform: translateY(20px) !important;
    transition: transform 0.4s ease !important;
}

.portfolio-item:hover .portfolio-content {
    transform: translateY(0) !important;
}

.portfolio-item div[style*="background: linear-gradient"] {
    background: #393E46 !important;
}

.portfolio-overlay h3 {
    color: #DFD0B8 !important;
}

.portfolio-overlay p {
    color: #FFFFFF !important;
    opacity: 0.9;
}

.portfolio-overlay div[style*="display: inline-block; padding: 1rem 1.5rem"] {
    background: #DFD0B8 !important;
}

.portfolio-overlay div[style*="display: inline-block; padding: 1rem 1.5rem"] p:first-child {
    color: #222831 !important;
}

.portfolio-overlay div[style*="display: inline-block; padding: 1rem 1.5rem"] p:last-child {
    color: #393E46 !important;
}

/* VALUE PROPOSITION */
.value-icon-wrapper div[style*="background: linear-gradient"] {
    background: #222831 !important;
    box-shadow: 0 8px 16px rgba(34, 40, 49, 0.15) !important;
}

.value-icon-wrapper h3 {
    color: #222831 !important;
}

.testimonial-card {
    background: #FFFFFF !important;
    border: 1px solid #94897933 !important;
    box-shadow: 0 4px 12px rgba(148, 137, 121, 0.08) !important;
}

.testimonial-card h3 {
    color: #222831 !important;
}

.testimonial-card p {
    color: #393E46 !important;
}

.testimonial-card div[style*="width: 60px; height: 60px; background: linear-gradient"] {
    background: #393E46 !important;
}

.testimonial-card div[style*="padding: 1rem 1.5rem; background: linear-gradient"] {
    background: #DFD0B833 !important;
    border-left: 4px solid #948979 !important;
}

.testimonial-card div[style*="padding: 1rem 1.5rem; background: linear-gradient"] p {
    color: #222831 !important;
}

.decorative-line {
    background: #948979 !important;
    animation: none !important;
    height: 2px !important;
}

.problem-card a,
.service-card a {
    color: #393E46 !important;
}

.problem-card a:hover,
.service-card a:hover {
    color: #222831 !important;
}

[style*="gradient"],
[style*="linear-gradient"],
[style*="radial-gradient"] {
    background: #393E46 !important;
}

[style*="background: linear-gradient(135deg"] {
    background: #393E46 !important;
}

[style*="background: linear-gradient(180deg"] {
    background: #DFD0B8 !important;
}

#eteriatech-gradient-logo stop {
    stop-color: #393E46 !important;
}

circle[fill="#4bc997"] {
    fill: #948979 !important;
}

#pattern1 circle,
#pattern2 rect,
#pattern3 line {
    fill: rgba(255, 255, 255, 0.1) !important;
    stroke: rgba(255, 255, 255, 0.1) !important;
}

#project-counter {
    color: #222831 !important;
    -webkit-text-fill-color: #222831 !important;
    background: none !important;
}

@media (max-width: 768px) {
    .eteriatech-nav-menu {
        background: #FFFFFF !important;
    }

    .eteriatech-nav-item {
        border-bottom: 1px solid #DFD0B8 !important;
    }
}