/* Landing page custom colors & animations */
:root{
  --primary:#0d6efd;
  --accent-1:#fb7185; /* rose */
  --accent-2:#3b82f6; /* blue */
  --accent-3:#f59e0b; /* amber */
  --accent-4:#6366f1; /* indigo */
  --surface:#0b0e12;
}

/* Colorful hero overlay */
.hero{position:relative;}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(1200px 500px at 10% 10%, rgba(99,102,241,.25), transparent 60%),
              radial-gradient(800px 400px at 90% 20%, rgba(245,158,11,.25), transparent 60%),
              radial-gradient(900px 450px at 20% 80%, rgba(59,130,246,.2), transparent 60%);
  mix-blend-mode: screen;
}

/* Animated gradient text */
.gradient-text{
  background-image: linear-gradient(45deg,var(--accent-4),var(--primary),var(--accent-1),var(--accent-3));
  background-size: 300% 300%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: gradientMove 10s ease infinite;
}
@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Buttons and chips micro-interactions */
.btn-cta{background-image: linear-gradient(135deg,var(--primary),var(--accent-4)); border:0;}
.btn-cta:hover{transform: translateY(-2px); box-shadow:0 10px 24px rgba(13,110,253,.25)}
.mini-chip{background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);}
.mini-chip::after{content:''; display:inline-block; width:6px; height:6px; margin-left:8px; border-radius:50%; background:var(--accent-2); animation:pulse 1.6s ease infinite}
@keyframes pulse{0%{opacity:.6; transform:scale(1)}50%{opacity:1; transform:scale(1.6)}100%{opacity:.6; transform:scale(1)}}

/* Glass cards with colorful edges */
.glass{border:1px solid rgba(255,255,255,.08); box-shadow:0 8px 28px rgba(0,0,0,.35)}
.glass.card-gradient-1{border-color: rgba(99,102,241,.35)}
.glass.card-gradient-2{border-color: rgba(245,158,11,.35)}
.feature-icon{width:44px; height:44px; display:grid; place-items:center; border-radius:10px; color:#fff;
  background-image: linear-gradient(135deg,var(--accent-1),var(--accent-3));}

/* Section colorful background */
.section-colored{background: linear-gradient(180deg, rgba(12,16,22,.6), rgba(12,16,22,.2));}
.section-title small{color:var(--accent-3)}

/* Price card accent */
.price-card{position:relative;}
.price-card::after{content:''; position:absolute; inset:-1px; border-radius:16px; padding:1px; background:linear-gradient(135deg,var(--accent-4),var(--accent-1)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude}
.badge.badge-soft{background: rgba(99,102,241,.1); color:#c7c8ff;}

/* Gallery */
#galeri img{transition: transform .4s ease, box-shadow .4s ease}
#galeri img:hover{transform: translateY(-4px) scale(1.02); box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* Logos */
.logo-grid img{filter: grayscale(1) opacity(.85); transition: filter .3s ease, transform .3s ease}
.logo-grid img:hover{filter:none; transform: scale(1.05)}

/* Reveal on scroll */
.reveal{opacity:0; transform: translateY(16px);}
.reveal.show{opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease}
.anim-slide-left{transform: translateX(-20px)}
.anim-scale-in{transform: scale(.96)}

/* Footer */
.footer-border{border-color: rgba(255,255,255,.08)!important}

/* === High-contrast adjustments for Portal Demo === */
.theme-dark{background-color:var(--surface); color:#fff}
.theme-dark .text-secondary{color:#d6d8e3}

.nav-glass{
  position:sticky; top:0; z-index:1020;
  background: rgba(16,20,28,.75); backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.1);
}

.gradient{background: linear-gradient(180deg, #0b0e12 0%, #0c1016 50%, #101520 100%)}

.btn-cta{color:#fff}
.btn-outline-light{color:#fff; border-color:rgba(255,255,255,.7)}
.btn-outline-light:hover{background: rgba(255,255,255,.14); color:#fff}

.glass{background: rgba(20,24,32,.72); backdrop-filter: blur(10px); color:#eef1f8; border-color: rgba(255,255,255,.12); box-shadow:0 8px 28px rgba(0,0,0,.45)}