/* ===== TRC VISION — UI/UX PREMIUM v2 ===== */

/* ── SCROLL PROGRESS ─────────────────────────────────────────────── */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 9999;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #10b981);
  width: 0%; transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(59,130,246,0.7);
}

/* ── AMBIENT LIGHTS ──────────────────────────────────────────────── */
.ambient-light  { animation: ambientPulse  8s ease-in-out infinite alternate; }
.ambient-light-2{ animation: ambientPulse 10s ease-in-out infinite alternate-reverse; }
@keyframes ambientPulse {
  0%   { opacity:.5; transform:scale(1); }
  100% { opacity:1;  transform:scale(1.2); }
}

/* ── GLASSMORPHISM CARDS ─────────────────────────────────────────── */
.card-premium {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
}
.card-premium::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,0.07),transparent);
  pointer-events:none; border-radius:inherit;
}
.card-premium:hover {
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.6),
              0 0 35px rgba(59,130,246,.12),
              inset 0 1px 0 rgba(255,255,255,.05);
}

/* ── GRADIENT TEXT ANIMATION ─────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, #60a5fa, #a855f7, #34d399);
  background-size: 300% 300%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 5s ease infinite;
}
@keyframes gradientShift {
  0%  { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* ── BUTTON SHINE ────────────────────────────────────────────────── */
.btn-shine { position:relative; overflow:hidden; }
.btn-shine::after {
  content:''; position:absolute;
  top:-50%; left:-75%; width:50%; height:200%;
  background:rgba(255,255,255,.1);
  transform:skewX(-25deg);
  transition:left .6s ease;
}
.btn-shine:hover::after { left:125%; }

/* ── SPLASH SCREEN ───────────────────────────────────────────────── */
.particle {
  position:absolute; border-radius:50%;
  animation: particleDrift linear infinite; pointer-events:none;
}
@keyframes particleDrift {
  0%  { transform:translateY(100vh) scale(0); opacity:0; }
  10% { opacity:1; }
  90% { opacity:1; }
  100%{ transform:translateY(-120px) scale(1); opacity:0; }
}
.splash-ring {
  position:absolute; border-radius:50%;
  border:1px solid rgba(59,130,246,.12);
  animation: ringExpand 4s ease-out infinite;
}
.splash-ring:nth-child(2){ animation-delay:1.4s; }
.splash-ring:nth-child(3){ animation-delay:2.8s; }
@keyframes ringExpand {
  0%  { width:80px;  height:80px;  opacity:.7; }
  100%{ width:550px; height:550px; opacity:0; }
}

/* ── NAVBAR HAMBURGER ────────────────────────────────────────────── */
.hamburger-line {
  display:block; width:22px; height:2px;
  background:white; border-radius:2px;
  transition:all .3s ease; transform-origin:center;
}
.menu-open .hamburger-line:nth-child(1){ transform:rotate(45deg) translate(3px,3px); }
.menu-open .hamburger-line:nth-child(2){ opacity:0; transform:scaleX(0); }
.menu-open .hamburger-line:nth-child(3){ transform:rotate(-45deg) translate(3px,-3px); }

/* ── MOBILE MENU ─────────────────────────────────────────────────── */
#mobile-menu {
  transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  max-height: 0; opacity: 0; overflow: hidden;
}
#mobile-menu.menu-visible { max-height: 520px; opacity: 1; }

/* ── ACTIVE NAV ──────────────────────────────────────────────────── */
nav a.nav-active {
  color: #60a5fa !important;
  background: rgba(255,255,255,.06) !important;
}

/* ── STAT COUNTER BOUNCE ─────────────────────────────────────────── */
@keyframes statBounce {
  0%  { transform:scale(1); }
  50% { transform:scale(1.15); }
  100%{ transform:scale(1); }
}
.stat-bounce { animation: statBounce .45s ease; }

/* ── PRICING — FIX € symbol size ────────────────────────────────── */
/* Make the € sign match the price number */
.price-currency {
  font-size: 1.75rem !important;
  font-weight: 900;
  color: white;
  align-self: flex-start;
  margin-top: 0.5rem;
  margin-right: 2px;
}
/* Strikethrough old prices — more visible */
.price-old {
  font-size: 0.95rem !important;
  color: #94a3b8 !important;
  text-decoration: line-through;
  text-decoration-color: #ef4444;
  text-decoration-thickness: 2px;
  align-self: flex-end;
  margin-bottom: 0.4rem;
}
/* Savings badge */
.savings-badge {
  display: inline-block;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.25);
  color: #f87171;
  font-size: .65rem; font-weight: 800;
  letter-spacing:.08em; text-transform:uppercase;
  padding: 2px 8px; border-radius: 999px;
  margin-left: 6px;
}

/* ── SERVICES BADGE — FIX OVERFLOW ON MOBILE ─────────────────────── */
.badge-incontournable {
  position: absolute; top: 0; right: 0;
  background: #2563eb; color: white;
  font-size: .6rem; font-weight: 800;
  padding: 4px 10px;
  border-bottom-left-radius: .75rem;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}

/* ── FAQ SMOOTH ANIMATION ────────────────────────────────────────── */
details > p, details > div {
  animation: faqOpen .3s ease;
}
@keyframes faqOpen {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── PORTFOLIO OVERLAY ───────────────────────────────────────────── */
.portfolio-overlay {
  background: linear-gradient(to top, #020617 0%, rgba(2,6,23,.65) 45%, transparent 100%);
  transition: background .4s ease;
}
.group:hover .portfolio-overlay {
  background: linear-gradient(to top, #020617 0%, rgba(2,6,23,.45) 60%, rgba(2,6,23,.1) 100%);
}

/* ── CONTACT SECTION — reduce excessive spacing ──────────────────── */
#contact .max-w-7xl { gap: 2.5rem; }
@media (min-width: 1024px) {
  #contact .max-w-7xl { gap: 4rem; }
}

/* ── FORM VALIDATION STATES ──────────────────────────────────────── */
.input-premium.is-valid {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.1);
}
.input-premium.is-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}
.field-hint {
  font-size:.68rem; margin-top:4px; padding-left:4px;
  min-height:16px; transition:all .2s ease;
}

/* ── TOAST ───────────────────────────────────────────────────────── */
#toast {
  position:fixed; bottom:110px; left:50%;
  transform:translateX(-50%) translateY(16px);
  background:#0f172a; border:1px solid #1e293b;
  color:white; padding:12px 24px; border-radius:14px;
  font-weight:700; font-size:.875rem; white-space:nowrap;
  opacity:0; transition:all .35s cubic-bezier(.34,1.56,.64,1);
  z-index:99999; box-shadow:0 20px 40px rgba(0,0,0,.5);
  pointer-events:none;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#toast.toast-success { border-color:rgba(16,185,129,.4); color:#10b981; }
#toast.toast-error   { border-color:rgba(239,68,68,.4);  color:#ef4444; }

/* ── FOOTER SOCIAL ICONS ─────────────────────────────────────────── */
.social-link {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  border:1px solid #1e293b; color:#64748b;
  transition:all .2s ease;
}
.social-link:hover {
  border-color:#3b82f6; color:#3b82f6;
  background:rgba(59,130,246,.08);
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(59,130,246,.15);
}

/* ── WHATSAPP FAB ────────────────────────────────────────────────── */
.fab-wa {
  position:fixed; bottom:2rem; right:2rem; z-index:50;
  width:56px; height:56px; border-radius:50%;
  background:#10b981; display:none; align-items:center; justify-content:center;
  box-shadow:0 0 28px rgba(16,185,129,.5);
  transition:all .3s ease; cursor:pointer;
  text-decoration:none;
}
@media(min-width:768px){ .fab-wa { display:flex; } }
.fab-wa:hover { transform:scale(1.12); box-shadow:0 0 40px rgba(16,185,129,.7); }

/* ── MOBILE BOTTOM BAR — more compact ───────────────────────────── */
.bottom-bar {
  padding: .6rem .75rem;
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
}
.bottom-bar-btn {
  padding: .75rem .5rem;
  font-size: .8rem;
  transition: transform .15s ease, filter .15s ease;
  border-radius:.875rem;
}
.bottom-bar-btn:active { transform:scale(.94); }

/* ── HERO STATS CARDS ────────────────────────────────────────────── */
#home .grid > div {
  padding: 1rem .5rem;
  border-radius:1rem;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.04);
  transition:all .3s ease;
}
#home .grid > div:hover {
  background:rgba(59,130,246,.05);
  border-color:rgba(59,130,246,.15);
  transform:translateY(-2px);
}

/* ── SERVICES CARDS — list left-aligned ─────────────────────────── */
article ul li {
  text-align: left !important;
}

/* ── PRICING — list left-aligned on all screens ──────────────────── */
#pricing-oneshot ul li,
#pricing-sub ul li {
  text-align: left !important;
  align-items: flex-start;
}

/* ── OFFER BANNER — better padding ──────────────────────────────── */
.offer-banner {
  padding: 1.5rem 2rem !important;
  gap: 1.25rem !important;
}

/* ── SECTION NUMBERS ─────────────────────────────────────────────── */
.section-badge {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.65rem; font-weight:800; letter-spacing:.15em;
  color:#3b82f6; text-transform:uppercase; margin-bottom:14px;
}
.section-badge::before {
  content:''; display:block; width:20px; height:2px;
  background:linear-gradient(90deg,#3b82f6,#8b5cf6); border-radius:2px;
}

/* ── CARD TILT (CSS only, subtle) ────────────────────────────────── */
@media (hover:hover) {
  .card-premium { transform-style: preserve-3d; will-change:transform; }
}

/* ── SCROLLBAR ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:#020617; }
::-webkit-scrollbar-thumb { background:#1e293b; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#3b82f6; }

/* ── COOKIE BANNER — improved position ───────────────────────────── */
#cookie-banner {
  bottom: 90px !important;
}
@media(min-width:768px){
  #cookie-banner { bottom:1.5rem !important; }
}

/* ── INPUT FOCUS GLOW ────────────────────────────────────────────── */
.input-premium:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
  background: #020617;
}

/* ── MODAL ENTER ANIMATION ───────────────────────────────────────── */
#mbx, #legal-mbx {
  transform: scale(.94) translateY(12px);
  opacity: 0;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}

/* ── PRICING TOGGLE ANIMATION ────────────────────────────────────── */
#btn-oneshot, #btn-sub {
  transition:all .25s cubic-bezier(.4,0,.2,1);
}

/* ── HERO CTA BUTTON GROUP ───────────────────────────────────────── */
#home .flex.flex-col.sm\:flex-row {
  gap: 1rem;
}
#home .flex.flex-col.sm\:flex-row a {
  min-width: 180px;
}