/* ============================================
   Webica Labs - Bold Redesign
   ============================================ */

/* --- Palette & Custom Properties --- */
:root {
  --blue: #1a56db;
  --cyan: #06b6d4;
  --green: #10b981;
  --gradient: linear-gradient(135deg, #1a56db, #06b6d4, #10b981);
  --text: #1f2937;
  --text-light: #6b7280;
  --bg: #ffffff;
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.h-18 { height: 4.5rem; }

.nav-link { position: relative; }
.nav-link::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:var(--gradient); border-radius:1px; transition:width 0.3s var(--ease-out); }
.nav-link:hover::after { width: 100%; }

.btn-shimmer { position: relative; overflow: hidden; }
.btn-shimmer::after { content:''; position:absolute; top:0; left:-100%; width:50%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); transform:skewX(-15deg); animation:shimmer 2.8s ease-in-out infinite; }
@keyframes shimmer { 0%{left:-100%} 60%{left:200%} 100%{left:200%} }

.orb { position:absolute; border-radius:50%; pointer-events:none; z-index:0; will-change:transform; transform:translateZ(0); }
.orb-1 { width:700px; height:700px; background:radial-gradient(circle at 40% 40%, rgba(26,86,219,0.30), transparent 70%); top:-200px; right:-200px; filter:blur(40px); animation:floatOrb1 9s ease-in-out infinite; }
.orb-2 { width:600px; height:600px; background:radial-gradient(circle at 60% 60%, rgba(6,182,212,0.28), transparent 70%); bottom:-100px; left:-150px; filter:blur(50px); animation:floatOrb2 7s ease-in-out infinite; animation-delay:-3s; }
.orb-3 { width:500px; height:500px; background:radial-gradient(circle at 50% 50%, rgba(16,185,129,0.20), transparent 70%); top:30%; left:35%; filter:blur(60px); animation:floatOrb1 11s ease-in-out infinite; animation-delay:-5s; }

@keyframes floatOrb1 { 0%,100%{transform:translateZ(0) translateY(0px) scale(1)} 50%{transform:translateZ(0) translateY(-40px) scale(1.06)} }
@keyframes floatOrb2 { 0%,100%{transform:translateZ(0) translateY(0px) translateX(0px)} 33%{transform:translateZ(0) translateY(-25px) translateX(15px)} 66%{transform:translateZ(0) translateY(15px) translateX(-10px)} }

@media (max-width:768px) {
  .orb-1{width:250px;height:250px;filter:blur(20px);animation:none;opacity:0.5}
  .orb-2{width:200px;height:200px;filter:blur(20px);animation:none;opacity:0.5}
  .orb-3{display:none}
  header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,0.97)!important}
  .glass-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,0.15)}
  .cta-gradient-bg{animation-duration:20s}
  .btn-shimmer::after{animation:none}
}

.badge-gradient { background:linear-gradient(white,white) padding-box, var(--gradient) border-box; border:1.5px solid transparent; animation:badgePulse 2.5s ease-in-out infinite; }
@keyframes badgePulse { 0%,100%{box-shadow:0 0 0 0 rgba(6,182,212,0.2)} 50%{box-shadow:0 0 0 7px rgba(6,182,212,0)} }

.hero-word-inner { display:block; transform:translateY(80px); opacity:0; }

.glass-card { background:rgba(255,255,255,0.10); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.20); transition:all 0.35s var(--ease-smooth); }
.glass-card:hover { background:rgba(255,255,255,0.20); transform:translateY(-6px) scale(1.01); box-shadow:0 24px 48px rgba(0,0,0,0.22); border-color:rgba(255,255,255,0.35); }

.cta-gradient-bg { background:linear-gradient(-45deg,#1a56db,#0ea5e9,#06b6d4,#10b981,#0ea5e9,#1a56db); background-size:400% 400%; animation:gradientShift 10s ease infinite; }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.gradient-strip { height:5px; background:var(--gradient); }

.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.75s var(--ease-out),transform 0.75s var(--ease-out); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal:nth-child(1){transition-delay:0s}
.reveal:nth-child(2){transition-delay:0.09s}
.reveal:nth-child(3){transition-delay:0.18s}
.reveal:nth-child(4){transition-delay:0.27s}
.reveal:nth-child(5){transition-delay:0.36s}
.reveal:nth-child(6){transition-delay:0.45s}

.context-card { position:relative; overflow:hidden; transition:transform 0.3s var(--ease-smooth),box-shadow 0.3s var(--ease-smooth); }
.context-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; border-radius:1rem 1rem 0 0; transition:background 0.3s; }
.context-card-1::before{background:var(--blue)}
.context-card-2::before{background:var(--cyan)}
.context-card-3::before{background:var(--green)}
.context-card-4::before{background:linear-gradient(90deg,var(--blue),var(--cyan))}
.context-card:hover{transform:translateY(-8px);box-shadow:0 28px 56px rgba(0,0,0,0.13)}
.context-card:hover::before{background:var(--gradient)}

.form-input:focus { outline: none; }
.form-input::placeholder { color: #9ca3af; }

.whatsapp-btn { animation:whatsappPulse 2.5s ease-in-out infinite; }
@keyframes whatsappPulse { 0%,100%{box-shadow:0 4px 14px rgba(37,211,102,0.3),0 0 0 0 rgba(37,211,102,0.3)} 50%{box-shadow:0 4px 14px rgba(37,211,102,0.3),0 0 0 10px rgba(37,211,102,0)} }

[x-cloak]{display:none!important}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
::selection{background-color:rgba(6,182,212,0.15);color:var(--text)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#f1f5f9}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}

@media (prefers-reduced-motion:reduce) {
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-word-inner{transform:none;opacity:1}
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
}

/* === WEBICA LAB SPECIFIC === */

/* Score ring */
.score-ring { transition: stroke-dashoffset 1s ease-out; }

/* Tool card hover */
.tool-card {
  transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}
.tool-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.12);
}

/* Auth modal overlay */
.auth-overlay {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}

/* Tab indicator */
.tab-active {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border-bottom: 2px solid var(--blue);
}

/* Post card */
.post-card {
  transition: transform 0.2s ease;
}
.post-card:hover { transform: translateY(-2px); }

/* Loading spinner */
.spinner {
  border: 3px solid #e5e7eb;
  border-top-color: var(--blue);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Score colors */
.score-green { color: #10b981; }
.score-orange { color: #f59e0b; }
.score-red { color: #ef4444; }
.ring-green { stroke: #10b981; }
.ring-orange { stroke: #f59e0b; }
.ring-red { stroke: #ef4444; }

/* Chart.js container */
.chart-container { position: relative; height: 300px; }