/* =============================================
   NOW4 STUDIO — Minimal Custom CSS
   (Tailwind handles layout/colors/spacing)
   ============================================= */

/* ---- Background blobs ---- */
.blob-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 1;
  animation: blobDrift 16s ease-in-out infinite;
}
@keyframes blobDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(30px,-30px) scale(1.06); }
  66%     { transform: translate(-20px,20px) scale(0.96); }
}

/* ---- Scroll progress ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: #2563eb;
  z-index: 2000;
  width: 0%;
  transition: width 0.1s linear;
  opacity: 0.8;
}

/* ---- Header glass on scroll ---- */
.header.scrolled {
  background: rgba(247,248,252,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* ---- Typed cursor ---- */
.typed-cursor {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  background: #2563eb;
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ---- Badge pulse ---- */
@keyframes pulse {
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.4; transform:scale(1.4); }
}
.badge-pulse { animation: pulse 2s ease-in-out infinite; }

/* ---- Float badges ---- */
.float-badge { animation: floatY 4s ease-in-out infinite; }
.fb1 { animation-delay: 0s; }
.fb2 { animation-delay: 2s; }
.fb3 { animation-delay: 4s; }
@keyframes floatY {
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-7px); }
}

/* ---- Marquee ---- */
.marquee-inner {
  animation: marquee 30s linear infinite;
  width: max-content;
}
@keyframes marquee {
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* ---- Sections above blobs ---- */
section, footer, .marquee-wrap {
  position: relative;
  z-index: 1;
}

/* ---- Reveal animation ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: none;
}

/* ---- Service list row hover icon ---- */
.svc-list .svc-card:hover .svc-icon { background: #2563eb !important; }
.svc-list .svc-card:hover .svc-icon svg { stroke: white; }

/* ---- Portfolio hover ---- */
.pf-thumb:hover .pf-over { opacity: 1 !important; }
.pf-thumb:hover { transform: scale(1.02); transition: transform 0.3s ease; }
.pf-item.hidden { display: none !important; }

/* ---- Portfolio filter active ---- */
.pf-btn.active {
  background: #2563eb !important;
  color: white !important;
  border-color: #2563eb !important;
}

/* ---- FAQ open state ---- */
.faq-item.open { border-color: rgba(37,99,235,0.2) !important; }
.faq-item.open .faq-ico { transform: rotate(45deg); color: #2563eb; }

/* ---- Price tabs ---- */
.price-tab { cursor: pointer; }
.price-tab.active { background: white; color: #0f172a; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.price-tab:not(.active) { background: transparent; color: #64748b; }

/* ---- Scroll top / WA visible ---- */
.scroll-top.visible,
.wa-btn.visible {
  opacity: 1 !important;
  pointer-events: all !important;
}
.scroll-top:hover { transform: translateY(-3px); }
.wa-btn:hover { transform: translateY(-3px) scale(1.05); }

/* ---- Mobile nav ---- */
.nav-links {
  transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
}
@media (max-width: 1023px) {
  .nav-links {
    position: fixed;
    top: 0; right: -100%;
    width: 260px;
    height: 100vh;
    background: rgba(15,15,22,0.97);
    backdrop-filter: blur(24px);
    border-left: 1px solid rgba(255,255,255,0.07);
    flex-direction: column;
    align-items: flex-start;
    padding: 72px 20px 24px;
    gap: 2px;
    z-index: 999;
    display: flex !important;
  }
  .nav-links.open { right: 0; }
  .nav-links a { width: 100%; display: block; padding: 10px 14px; }
  .nav-links .nav-cta { margin-left: 0 !important; margin-top: 8px; display: inline-flex !important; width: auto; }
}

/* ---- Hamburger open state ---- */
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ---- Nav active link ---- */
.nav-links a.nav-active { color: #2563eb; background: rgba(37,99,235,0.06); }
.nav-links a.nav-cta.nav-active {
  background: linear-gradient(135deg,#1d4ed8 0%,#0ea5e9 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 0 22px rgba(14,165,233,0.45), 0 2px 8px rgba(29,78,216,0.35) !important;
}
.nav-cta { color: #ffffff !important; }

/* ---- About right mobile ---- */
@media (max-width: 1023px) {
  .about-img-badge { position: static !important; transform: none !important; margin-top: 16px; }
}


/* ---- Portfolio responsive ---- */
@media (max-width: 767px) {
  .pf-grid { grid-template-columns: 1fr !important; }
  .pf-wide { grid-column: span 1 !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .pf-grid { grid-template-columns: 1fr 1fr !important; }
  .pf-wide { grid-column: span 2 !important; }
}

/* ---- Hero visual mobile ---- */
@media (max-width: 1023px) {
  .hero-img { height: 280px !important; }
  .fb3 { display: none; }
  .fb1 { left: 0 !important; bottom: -8px !important; }
  .fb2 { right: 0 !important; top: -8px !important; }
}

/* ---- Testimonials grid mobile ---- */
@media (max-width: 1023px) {
  .testi-grid { grid-template-columns: 1fr !important; max-width: 480px; margin: 0 auto; }
}

/* ---- Price grid mobile ---- */
@media (max-width: 1023px) {
  .price-grid { grid-template-columns: 1fr !important; max-width: 420px; margin: 0 auto; }
}

/* ---- Contact grid mobile ---- */
@media (max-width: 1023px) {
  .contact-grid { grid-template-columns: 1fr !important; }
  .cform-row { grid-template-columns: 1fr !important; }
}

/* ---- Footer mobile ---- */
@media (max-width: 639px) {
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ---- Pricing card popular highlight ---- */
.price-card.popular {
  border-color: rgba(37,99,235,0.25) !important;
  background: rgba(239,246,255,0.7) !important;
}

/* ---- Form select arrow ---- */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px !important;
}

/* ---- Background grid patterns ---- */
.bg-grid-light {
  background-image:
    linear-gradient(rgba(37,99,235,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
}
.bg-grid-dark {
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 44px 44px;
}
.bg-grid-blue {
  background-image:
    linear-gradient(rgba(37,99,235,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ---- Section decorative symbols ---- */
.sec-sym {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.ss-el { position: absolute; opacity: 0.22 !important; }
@keyframes bgSymFloat {
  0%,100% { transform: translate(0,0); }
  33%     { transform: translate(18px,-18px); }
  66%     { transform: translate(-12px,12px); }
}
@keyframes bgSymRot {
  0%,100% { transform: rotate(45deg) translate(0,0); }
  33%     { transform: rotate(55deg) translate(12px,-12px); }
  66%     { transform: rotate(38deg) translate(-8px,8px); }
}

/* ---- Campaign banner pulse ---- */
.campaign-banner { animation: campaignPulse 3s ease-in-out infinite; }
@keyframes campaignPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
  50%     { box-shadow: 0 0 0 6px rgba(251,191,36,0.12); }
}

/* ---- pfReveal keyframe ---- */
@keyframes pfReveal {
  from { opacity:0; transform: scale(0.96) translateY(8px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}