/* =====================================================
   WebCraft Hero Section — v1.0.0
   Semua selector di-scope ke .wc-hero-wrap
   ===================================================== */

.wc-hero-wrap {
  position: relative;
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
  color: #fff;
  --wc-sky:        #0EA5E9;
  --wc-sky-light:  #7DD3FC;
  --wc-sky-pale:   #BAE6FD;
  --wc-sky-deep:   #0369A1;
  --wc-navy:       #0C1A2E;
  --wc-gold:       #F59E0B;
  --wc-gold-light: #FCD34D;
  --wc-green:      #22C55E;
  --wc-red:        #EF4444;
  --wc-server-border: rgba(14,165,233,0.3);
}

/* ── SKY BG ────────────────────────────────────────── */
.wc-sky-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,#082F49 0%,#0C4A6E 18%,#075985 35%,#0369A1 55%,#0284C7 70%,#0EA5E9 85%,#38BDF8 100%);
  overflow: hidden;
}
.wc-stars { position: absolute; inset: 0; overflow: hidden; }
.wc-star {
  position: absolute;
  border-radius: 50%;
  background: white;
  animation: wcTwinkle var(--dur,3s) ease-in-out infinite alternate;
}
@keyframes wcTwinkle {
  from { opacity: var(--a1,0.2); transform: scale(1); }
  to   { opacity: var(--a2,0.8); transform: scale(1.3); }
}
.wc-sun-glow {
  position: absolute;
  width: 280px; height: 280px;
  top: -60px; right: 8%;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(251,191,36,0.35) 0%,rgba(14,165,233,0.12) 50%,transparent 70%);
  animation: wcSunPulse 6s ease-in-out infinite alternate;
}
@keyframes wcSunPulse { from{transform:scale(1);opacity:0.8} to{transform:scale(1.15);opacity:1} }

.wc-data-streams { position: absolute; inset: 0; overflow: hidden; }
.wc-stream {
  position: absolute;
  width: 1px;
  background: linear-gradient(180deg,transparent,rgba(14,165,233,0.5),transparent);
  animation: wcStreamFlow var(--sd,4s) linear infinite;
  opacity: 0;
}
@keyframes wcStreamFlow {
  0%   { top:-30%; opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { top:110%; opacity:0; }
}

/* ── CLOUDS ────────────────────────────────────────── */
.wc-clouds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wc-cloud {
  position: absolute;
  filter: drop-shadow(0 8px 24px rgba(255,255,255,0.15));
  opacity: 0;
  animation: wcCloudDrift var(--cd,60s) linear infinite, wcCloudIn 2s ease var(--cfi,1s) both;
}
@keyframes wcCloudDrift { from{transform:translateX(-120%)} to{transform:translateX(110vw)} }
@keyframes wcCloudIn    { from{opacity:0} to{opacity:var(--co,0.85)} }

/* ── HERO LAYOUT ───────────────────────────────────── */
.wc-hero {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  padding: 60px 6vw 100px;
}
.wc-hero-text { display: flex; flex-direction: column; align-items: flex-start; }

.wc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--wc-sky-light);
  margin-bottom: 22px;
  opacity: 0;
  animation: wcFadeUp 0.7s ease 0.4s both;
}
.wc-eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--wc-sky-light);
  opacity: 0.6;
}

.wc-hero-wrap h1,
.wc-h1 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(2.2rem, 4.2vw, 3.8rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -1px !important;
  color: #fff !important;
  margin-bottom: 20px !important;
  opacity: 0;
  animation: wcFadeUp 0.8s ease 0.55s both;
  text-align: left !important;
}
.wc-h1 em {
  font-style: normal;
  background: linear-gradient(135deg,var(--wc-sky-pale),var(--wc-sky-light),var(--wc-sky));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.wc-h1 .wc-gold-text {
  background: linear-gradient(135deg,var(--wc-gold-light),var(--wc-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wc-subtitle {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(186,230,253,0.75);
  max-width: 480px;
  line-height: 1.75;
  margin-bottom: 36px;
  opacity: 0;
  animation: wcFadeUp 0.8s ease 0.7s both;
}
.wc-subtitle strong { color: var(--wc-sky-pale); font-weight: 500; }

/* Stats */
.wc-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 36px;
  opacity: 0;
  animation: wcFadeUp 0.8s ease 0.85s both;
}
.wc-stat { text-align: left; }
.wc-stat-num {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--wc-sky-light);
  line-height: 1;
  margin-bottom: 4px;
}
.wc-stat-label {
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(186,230,253,0.5);
  font-weight: 500;
}
.wc-stat-div { width:1px; height:44px; background:rgba(125,211,252,0.2); align-self:center; }

/* Countdown */
.wc-countdown-wrap {
  opacity: 0;
  animation: wcFadeUp 0.8s ease 1s both;
  margin-bottom: 32px;
  width: 100%;
}
.wc-countdown-label {
  font-size: 0.68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wc-red);
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wc-pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--wc-red);
  animation: wcPulseDot 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes wcPulseDot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.8);opacity:0.4} }

.wc-countdown { display: flex; gap: 10px; align-items: stretch; }
.wc-cd-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(8,47,73,0.7);
  border: 1px solid rgba(14,165,233,0.35);
  border-radius: 12px;
  padding: 16px 22px;
  min-width: 80px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.wc-cd-block::before {
  content: '';
  position: absolute;
  top:0; left:0; right:0;
  height: 2px;
  background: linear-gradient(90deg,transparent,var(--wc-sky),transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.wc-cd-block:hover::before { opacity: 1; }
.wc-cd-block:hover { border-color: rgba(14,165,233,0.7); box-shadow: 0 0 20px rgba(14,165,233,0.2); }
.wc-cd-num {
  font-family: 'Poppins', sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--wc-sky-light);
  line-height: 1;
  margin-bottom: 6px;
}
.wc-cd-num.wc-flip { animation: wcFlipNum 0.3s ease; }
@keyframes wcFlipNum { from{transform:translateY(-10px);opacity:0} to{transform:translateY(0);opacity:1} }
.wc-cd-unit {
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(125,211,252,0.45);
  font-weight: 600;
}
.wc-cd-sep {
  font-family: 'Poppins', sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--wc-sky);
  opacity: 0.6;
  align-self: center;
  margin-bottom: 8px;
  animation: wcBlink 1s step-end infinite;
}
@keyframes wcBlink { 0%,100%{opacity:0.6} 50%{opacity:0.15} }

/* CTA */
.wc-cta-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  animation: wcFadeUp 0.8s ease 1.15s both;
  margin-bottom: 28px;
}
.wc-btn-wa {
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
  background: linear-gradient(135deg,#22C55E,#16A34A) !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  padding: 16px 32px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  box-shadow: 0 6px 30px rgba(34,197,94,0.3) !important;
}
.wc-btn-wa::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,rgba(255,255,255,0.15),transparent);
  opacity: 0;
  transition: opacity 0.2s;
}
.wc-btn-wa:hover::before { opacity: 1; }
.wc-btn-wa:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 40px rgba(34,197,94,0.4) !important; }
.wc-btn-wa:active { transform: translateY(0) !important; }
.wc-wa-icon { width:22px; height:22px; animation: wcWaWiggle 2.5s ease-in-out infinite; }
@keyframes wcWaWiggle { 0%,88%,100%{transform:rotate(0)} 92%{transform:rotate(-12deg)} 96%{transform:rotate(12deg)} }

.wc-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(14,165,233,0.1) !important;
  color: var(--wc-sky-light) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  padding: 16px 28px !important;
  border-radius: 100px !important;
  border: 1px solid rgba(14,165,233,0.3) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.wc-btn-secondary:hover {
  background: rgba(14,165,233,0.2) !important;
  border-color: var(--wc-sky) !important;
  color: #fff !important;
}

/* Urgency */
.wc-urgency {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 100px;
  padding: 9px 18px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
  opacity: 0;
  animation: wcFadeUp 0.8s ease 1.3s both;
}
.wc-urgency strong { color: #FCA5A5; }
.wc-urgency-icon { width:8px; height:8px; border-radius:50%; background:var(--wc-red); animation:wcPulseDot 1s ease-in-out infinite; flex-shrink:0; }

/* ── RIGHT VISUAL ──────────────────────────────────── */
.wc-hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  opacity: 0;
  animation: wcFadeUp 1s ease 0.8s both;
}
.wc-laptop-scene {
  position: relative;
  width: 100%;
  max-width: 500px;
  filter: drop-shadow(0 40px 80px rgba(14,165,233,0.35));
  animation: wcLaptopFloat 5s ease-in-out infinite alternate;
}
.wc-laptop-scene svg { width:100%; height:auto; }
@keyframes wcLaptopFloat {
  from { transform: translateY(0px) rotate(-1deg); }
  to   { transform: translateY(-14px) rotate(1deg); }
}

/* Code line animations */
.wc-code-l { opacity:0; animation: wcCodeAppear 0.4s ease both; }
.wc-code-l:nth-child(1)  { animation-delay:1.4s; }
.wc-code-l:nth-child(2)  { animation-delay:1.7s; }
.wc-code-l:nth-child(3)  { animation-delay:2.0s; }
.wc-code-l:nth-child(4)  { animation-delay:2.3s; }
.wc-code-l:nth-child(5)  { animation-delay:2.6s; }
.wc-code-l:nth-child(6)  { animation-delay:2.9s; }
.wc-code-l:nth-child(7)  { animation-delay:3.2s; }
.wc-code-l:nth-child(8)  { animation-delay:3.5s; }
.wc-code-l:nth-child(9)  { animation-delay:3.8s; }
.wc-code-l:nth-child(10) { animation-delay:4.1s; }
@keyframes wcCodeAppear { from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:translateX(0)} }

.wc-cursor-blink { animation: wcCursorBlink 1.2s step-end infinite; }
@keyframes wcCursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }

.wc-preview-block { opacity:0; animation: wcBlockIn 0.5s ease both; }
.wc-preview-block:nth-child(1) { animation-delay:1.6s; }
.wc-preview-block:nth-child(2) { animation-delay:2.0s; }
.wc-preview-block:nth-child(3) { animation-delay:2.4s; }
.wc-preview-block:nth-child(4) { animation-delay:2.8s; }
.wc-preview-block:nth-child(5) { animation-delay:3.2s; }
@keyframes wcBlockIn { from{opacity:0;transform:scaleX(0)} to{opacity:1;transform:scaleX(1)} }

/* Server rack */
.wc-server-row { display:flex; gap:16px; align-items:stretch; width:100%; max-width:500px; }
.wc-server-unit {
  flex:1;
  background: rgba(8,40,60,0.85);
  border: 1px solid var(--wc-server-border);
  border-radius: 12px;
  padding: 14px 16px;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.wc-server-unit::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background: linear-gradient(90deg,transparent,var(--wc-sky),transparent);
  animation: wcScanLine 3s ease-in-out infinite;
}
.wc-server-unit:nth-child(2)::before { animation-delay:1s; }
.wc-server-unit:nth-child(3)::before { animation-delay:2s; }
@keyframes wcScanLine { 0%,100%{opacity:0.3} 50%{opacity:1} }

.wc-server-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.wc-server-title { font-size:0.65rem; letter-spacing:1.5px; text-transform:uppercase; color:rgba(125,211,252,0.6); font-weight:600; }
.wc-server-lights { display:flex; gap:4px; }
.wc-s-light { width:6px; height:6px; border-radius:50%; animation:wcLightBlink var(--lb,1.5s) ease-in-out infinite; }
.wc-s-light.on   { background:var(--wc-green); --lb:2.2s; }
.wc-s-light.warn { background:var(--wc-gold);  --lb:0.8s; }
.wc-s-light.off  { background:rgba(255,255,255,0.15); animation:none; }
@keyframes wcLightBlink { 0%,100%{opacity:1} 50%{opacity:0.2} }

.wc-server-bars { display:flex; flex-direction:column; gap:5px; }
.wc-s-bar-row { display:flex; align-items:center; gap:6px; }
.wc-s-bar-label { font-size:0.55rem; color:rgba(125,211,252,0.45); width:28px; flex-shrink:0; }
.wc-s-bar-track { flex:1; height:4px; background:rgba(14,165,233,0.12); border-radius:100px; overflow:hidden; }
.wc-s-bar-fill { height:100%; border-radius:100px; }
.wc-s-bar-fill.cpu  { background:linear-gradient(90deg,#0EA5E9,#38BDF8); animation:wcCpuAnim 2.8s ease-in-out infinite alternate; }
.wc-s-bar-fill.ram  { background:linear-gradient(90deg,#8B5CF6,#A78BFA); animation:wcRamAnim 3.5s ease-in-out infinite alternate; }
.wc-s-bar-fill.disk { background:linear-gradient(90deg,#22C55E,#4ADE80); width:38%; }
.wc-s-bar-fill.net  { background:linear-gradient(90deg,#F59E0B,#FCD34D); animation:wcNetAnim 1.8s ease-in-out infinite alternate; }
@keyframes wcCpuAnim { from{width:55%} to{width:82%} }
@keyframes wcRamAnim { from{width:48%} to{width:66%} }
@keyframes wcNetAnim { from{width:70%} to{width:95%} }
.wc-s-bar-val { font-size:0.55rem; color:rgba(125,211,252,0.6); width:24px; text-align:right; flex-shrink:0; }

/* Chips */
.wc-chip {
  position:absolute;
  background:rgba(8,47,73,0.85);
  backdrop-filter:blur(12px);
  border:1px solid rgba(14,165,233,0.25);
  border-radius:50px;
  padding:8px 16px;
  font-size:0.72rem;
  font-weight:500;
  color:var(--wc-sky-pale);
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  pointer-events:none;
  z-index:10;
}
.wc-chip-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.wc-chip-1 { top:8%; right:-8%; animation:wcChipFloat1 4s ease-in-out infinite alternate, wcFadeUp 0.8s ease 1.8s both; }
.wc-chip-2 { bottom:32%; left:-8%; animation:wcChipFloat2 5s ease-in-out infinite alternate, wcFadeUp 0.8s ease 2s both; }
.wc-chip-3 { bottom:8%; right:-5%; animation:wcChipFloat3 4.5s ease-in-out infinite alternate, wcFadeUp 0.8s ease 2.2s both; }
@keyframes wcChipFloat1 { from{transform:translate(0,0)} to{transform:translate(-6px,-10px)} }
@keyframes wcChipFloat2 { from{transform:translate(0,0)} to{transform:translate(8px,-8px)} }
@keyframes wcChipFloat3 { from{transform:translate(0,0)} to{transform:translate(-5px,8px)} }

/* Marquee */
.wc-marquee-wrap {
  position:absolute;
  bottom:0; left:0; right:0;
  z-index:30;
  border-top:1px solid rgba(14,165,233,0.15);
  background:rgba(8,28,48,0.75);
  backdrop-filter:blur(10px);
  padding:11px 0;
  overflow:hidden;
}
.wc-marquee-track { display:flex; animation:wcMarqueeScroll 32s linear infinite; width:max-content; }
.wc-marquee-item {
  display:inline-flex; align-items:center; gap:10px;
  padding:0 32px;
  font-size:0.7rem; letter-spacing:1.5px; text-transform:uppercase;
  color:rgba(125,211,252,0.45); font-weight:500; white-space:nowrap;
}
.wc-marquee-sep { color:var(--wc-sky); opacity:0.5; }
@keyframes wcMarqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Utility animations */
@keyframes wcFadeUp   { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes wcFadeDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }

/* Responsive */
@media (max-width:900px) {
  .wc-hero { grid-template-columns:1fr; padding:40px 5vw 90px; text-align:center; }
  .wc-hero-text { align-items:center; }
  .wc-hero-wrap h1, .wc-h1 { text-align:center !important; }
  .wc-subtitle { text-align:center; }
  .wc-stats { justify-content:center; }
  .wc-hero-visual { display:none; }
  .wc-cta-group { justify-content:center; }
}