/* ============================================================
   TanyaDigital Bali — Premium Digital Marketing Agency CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@600;700;800;900&display=swap');

/* ─── RESET & BASE ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* === THEME: OCEAN (default) === */
  --cyan:    #06B6D4;
  --cyan2:   #22D3EE;
  --purple:  #8B5CF6;
  --purple2: #A78BFA;
  --orange:  #F59E0B;
  --green:   #10B981;
  --dark:    #020617;
  --dark2:   #0F172A;
  --dark3:   #1E293B;
  --text:    #CBD5E1;
  --glow1: rgba(6,182,212,0.18);
  --glow2: rgba(139,92,246,0.15);
  --hero-bg1: #020617;
  --hero-bg2: #0c1a3a;
  --hero-bg3: #0d1f4a;
}

/* === AURORA: Purple + Pink === */
[data-theme="aurora"] {
  --cyan:    #A855F7;
  --cyan2:   #C084FC;
  --purple:  #EC4899;
  --purple2: #F472B6;
  --glow1: rgba(168,85,247,0.2);
  --glow2: rgba(236,72,153,0.15);
  --hero-bg1: #0d0517;
  --hero-bg2: #1a0a2e;
  --hero-bg3: #200d38;
}

/* === SUNSET: Orange + Red === */
[data-theme="sunset"] {
  --cyan:    #F97316;
  --cyan2:   #FB923C;
  --purple:  #EF4444;
  --purple2: #F87171;
  --glow1: rgba(249,115,22,0.2);
  --glow2: rgba(239,68,68,0.15);
  --hero-bg1: #0c0802;
  --hero-bg2: #1f0f05;
  --hero-bg3: #2a1107;
}

/* === FOREST: Green + Teal === */
[data-theme="forest"] {
  --cyan:    #10B981;
  --cyan2:   #34D399;
  --purple:  #06B6D4;
  --purple2: #22D3EE;
  --glow1: rgba(16,185,129,0.2);
  --glow2: rgba(6,182,212,0.15);
  --hero-bg1: #020d08;
  --hero-bg2: #071a0f;
  --hero-bg3: #0a2015;
}

/* === MIDNIGHT: Indigo + Violet === */
[data-theme="midnight"] {
  --cyan:    #6366F1;
  --cyan2:   #818CF8;
  --purple:  #8B5CF6;
  --purple2: #A78BFA;
  --glow1: rgba(99,102,241,0.2);
  --glow2: rgba(139,92,246,0.15);
  --dark:    #030308;
  --dark2:   #0a0a1a;
  --dark3:   #10102a;
  --hero-bg1: #030308;
  --hero-bg2: #0a0520;
  --hero-bg3: #0d0828;
}

/* === NEON: Cyberpunk Pink + Electric Blue === */
[data-theme="neon"] {
  --cyan:    #E81CFF;
  --cyan2:   #F472B6;
  --purple:  #40E0D0;
  --purple2: #22D3EE;
  --glow1: rgba(232,28,255,0.25);
  --glow2: rgba(64,224,208,0.2);
  --hero-bg1: #050505;
  --hero-bg2: #0a010d;
  --hero-bg3: #12011a;
}

/* === CORPORATE: Trust Navy + Royal Blue === */
[data-theme="corporate"] {
  --cyan:    #2563EB;
  --cyan2:   #3B82F6;
  --purple:  #1D4ED8;
  --purple2: #60A5FA;
  --glow1: rgba(37,99,235,0.15);
  --glow2: rgba(29,78,216,0.15);
  --hero-bg1: #0F172A;
  --hero-bg2: #1E293B;
  --hero-bg3: #0F172A;
}

/* === CREATIVE: Vibrant Yellow + Violet === */
[data-theme="creative"] {
  --cyan:    #EAB308;
  --cyan2:   #FDE047;
  --purple:  #9333EA;
  --purple2: #C084FC;
  --glow1: rgba(234,179,8,0.2);
  --glow2: rgba(147,51,234,0.15);
  --hero-bg1: #0A0A0A;
  --hero-bg2: #141005;
  --hero-bg3: #1C150A;
}

/* === GLASS: Light Ice Blue + Frost === */
[data-theme="glass"] {
  --cyan:    #38BDF8;
  --cyan2:   #7DD3FC;
  --purple:  #818CF8;
  --purple2: #A78BFA;
  --glow1: rgba(56,189,248,0.25);
  --glow2: rgba(129,140,248,0.2);
  --hero-bg1: #0B1121;
  --hero-bg2: #0F172A;
  --hero-bg3: #131E38;
}

/* === MINIMALIST: Brutalist Pure White + Slate === */
[data-theme="minimalist"] {
  --cyan:    #F8FAFC;
  --cyan2:   #E2E8F0;
  --purple:  #94A3B8;
  --purple2: #CBD5E1;
  --glow1: rgba(255,255,255,0.1);
  --glow2: rgba(148,163,184,0.1);
  --hero-bg1: #000000;
  --hero-bg2: #050505;
  --hero-bg3: #0A0A0A;
}

html { scroll-behavior: smooth; }
body { background: var(--dark); color: var(--text); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

[x-cloak] { display: none !important; }

/* ─── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(6,182,212,0.4); }

::selection { background: rgba(6,182,212,0.3); color: #fff; }
a, button { transition: all 0.2s ease; }

/* ─── TYPOGRAPHY UTILITIES ─────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-purple {
  background: linear-gradient(135deg, var(--purple2), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-orange {
  background: linear-gradient(135deg, var(--orange), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 0.5rem;
}
.section-padding { padding: 6rem 0; }

/* ─── LINE CLAMP ────────────────────────────────────────────── */
.line-clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ─── HERO SECTION ──────────────────────────────────────────── */
.hero-section { min-height: 100vh; position: relative; }

.hero-bg {
  background: linear-gradient(135deg,
    var(--hero-bg1, #020617) 0%,
    var(--hero-bg2, #0c1a3a) 25%,
    var(--hero-bg3, #0d1f4a) 50%,
    var(--hero-bg2, #090d1f) 75%,
    var(--hero-bg1, #020617) 100%
  );
}

.hero-grid {
  background-image:
    linear-gradient(rgba(6,182,212,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,182,212,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Glow orbs */
.glow-orb { pointer-events: none; filter: blur(80px); }
.orb-1 {
  background: radial-gradient(circle, var(--glow1, rgba(6,182,212,0.18)) 0%, transparent 70%);
  animation: orb-float 8s ease-in-out infinite;
  will-change: transform;
}
.orb-2 {
  background: radial-gradient(circle, var(--glow2, rgba(139,92,246,0.15)) 0%, transparent 70%);
  animation: orb-float 10s ease-in-out infinite reverse;
  will-change: transform;
}
.orb-3 {
  background: radial-gradient(circle, var(--glow1, rgba(6,182,212,0.08)) 0%, transparent 70%);
  animation: orb-float 12s ease-in-out infinite;
  will-change: transform;
}
@keyframes orb-float {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(30px,-30px) scale(1.05); }
  66%       { transform: translate(-20px,20px) scale(0.95); }
}

/* Floating particles */
.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(6,182,212,0.5);
  animation: particle-rise linear infinite;
  pointer-events: none;
}
@keyframes particle-rise {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-100vh) scale(0.3); opacity: 0; }
}

/* Hero badge (glass pill) */
.glass-badge {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(6,182,212,0.25);
  backdrop-filter: blur(12px);
}

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

/* Hero CTA buttons */
.hero-btn-primary {
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  box-shadow: 0 0 30px rgba(6,182,212,0.3), 0 8px 32px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}
.hero-btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.hero-btn-primary:hover::after { opacity: 1; }
.hero-btn-primary:hover {
  box-shadow: 0 0 50px rgba(6,182,212,0.5), 0 12px 40px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}

.hero-btn-secondary {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
}
.hero-btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(6,182,212,0.4);
  box-shadow: 0 0 20px rgba(6,182,212,0.1);
}

/* Stats cards */
.stat-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  cursor: default;
}
.stat-card:hover {
  border-color: rgba(6,182,212,0.3);
  background: rgba(6,182,212,0.05);
  box-shadow: 0 0 30px rgba(6,182,212,0.08);
}
.stat-icon-wrap {
  background: rgba(6,182,212,0.1);
  border: 1px solid rgba(6,182,212,0.2);
}

/* Scroll indicator */
.scroll-line { animation: scroll-bounce 2s ease-in-out infinite; }
@keyframes scroll-bounce {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50%       { opacity: 1; transform: scaleY(1.2); }
}

/* ─── HERO DASHBOARD VISUAL ─────────────────────────────────── */
.hero-dashboard {
  background: rgba(15,23,42,0.8);
  border: 1px solid rgba(6,182,212,0.15);
  backdrop-filter: blur(20px);
  box-shadow: 0 25px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}
.hero-dashboard::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(6,182,212,0.3), transparent 50%, rgba(139,92,246,0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
.hero-metric-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.hero-float-badge {
  animation: float-badge 4s ease-in-out infinite;
  z-index: 10;
}
.hero-float-badge:nth-child(2) { animation-delay: 2s; }
@keyframes float-badge {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}



/* ─── SERVICE CARDS ─────────────────────────────────────────── */
.service-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
}
.service-card:hover {
  border-color: rgba(6,182,212,0.35);
  background: rgba(6,182,212,0.03);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 30px rgba(6,182,212,0.08);
}
.service-card-glow {
  background: linear-gradient(135deg, rgba(6,182,212,0.06), rgba(139,92,246,0.06));
}
.service-icon { filter: drop-shadow(0 0 12px rgba(6,182,212,0.3)); }

/* ─── WHY US SECTION ────────────────────────────────────────── */
.feature-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
}
.feature-card:hover {
  border-color: rgba(139,92,246,0.3);
  background: rgba(139,92,246,0.04);
}
.badge-pill {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #94a3b8;
}
.gradient-avatar {
  background: linear-gradient(135deg, var(--cyan), var(--purple));
}

/* ─── TESTIMONIAL CARDS ─────────────────────────────────────── */
.testi-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
}
.testi-card:hover {
  border-color: rgba(245,158,11,0.3);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* ─── PRICING CARDS ─────────────────────────────────────────── */
.pricing-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
}
.pricing-featured {
  background: rgba(6,182,212,0.05);
  border-color: rgba(6,182,212,0.4) !important;
  box-shadow: 0 0 50px rgba(6,182,212,0.12), 0 30px 80px rgba(0,0,0,0.4);
}
.badge-featured {
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  box-shadow: 0 4px 15px rgba(6,182,212,0.4);
}
.pricing-btn-featured {
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  color: #fff;
}
.pricing-btn-featured:hover { opacity: 0.9; transform: translateY(-1px); }
.pricing-btn-regular {
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
}
.pricing-btn-regular:hover { background: rgba(255,255,255,0.05); }

/* ─── BLOG CARDS ────────────────────────────────────────────── */
.blog-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
}
.blog-card:hover {
  border-color: rgba(6,182,212,0.3);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.blog-card-placeholder {
  background: linear-gradient(135deg, rgba(6,182,212,0.08), rgba(139,92,246,0.08));
}

/* ─── FAQ ITEMS ─────────────────────────────────────────────── */
.faq-item {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
}
.faq-item:hover { border-color: rgba(139,92,246,0.3); }

/* ─── CTA SECTION ───────────────────────────────────────────── */
.cta-bg {
  background: linear-gradient(135deg,
    rgba(6,182,212,0.08) 0%,
    rgba(139,92,246,0.1) 50%,
    rgba(6,182,212,0.08) 100%
  );
}

/* ─── CLIENT SLIDER ─────────────────────────────────────────── */
.client-marquee-wrap {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
@keyframes marquee-center { 0% { transform: translateX(0); } 100% { transform: translateX(-25%); } }
.animate-scroll {
  animation: marquee-center 25s linear infinite;
  width: max-content;
  display: flex;
  align-items: center;
  will-change: transform;
}
.animate-scroll:hover { animation-play-state: paused; }


/* ─── NAVBAR ────────────────────────────────────────────────── */
nav a.active { color: var(--cyan); }
#navbar.scrolled {
  background: rgba(2,6,23,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 4px 30px rgba(0,0,0,0.4);
}

/* ─── LAZY IMAGES ───────────────────────────────────────────── */
img.lazy { opacity: 0; transition: opacity 0.4s ease; }
img.lazy.loaded { opacity: 1; }

/* ─── PAGINATION ────────────────────────────────────────────── */
.pagination { display:flex; gap:8px; justify-content:center; margin-top:2rem; }
.page-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; font-size:0.8rem;
  background:rgba(255,255,255,0.05); color:#94a3b8;
  border:1px solid rgba(255,255,255,0.1); transition:all 0.2s;
}
.page-btn:hover, .page-btn.active {
  background:linear-gradient(135deg,var(--cyan),var(--purple));
  color:#fff; border-color:transparent;
}

/* ─── ALERTS ────────────────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:12px; font-size:0.875rem; margin-bottom:1rem; }
.alert-success { background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.2); color:#86efac; }
.alert-error   { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.2); color:#fca5a5; }

/* ─── EMBED VIDEO ───────────────────────────────────────────── */
.embed-responsive { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px; }
.embed-responsive iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

/* ─── FOCUS RING ────────────────────────────────────────────── */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}

/* ─── AOS CUSTOM ────────────────────────────────────────────── */
[data-aos] { transition-duration: 600ms !important; }

/* ─── ANIMATIONS ────────────────────────────────────────────── */
@keyframes fade-in-down {
  0%   { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-down { animation: fade-in-down 0.6s ease forwards; }

/* Counter number glow on complete */
.counter-done {
  text-shadow: 0 0 20px rgba(6,182,212,0.5);
  animation: counter-pop 0.3s ease;
}
@keyframes counter-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .section-padding { padding: 4rem 0; }
  .hero-section { padding-top: 5rem; }
  .hero-btn-primary, .hero-btn-secondary { width: 100%; justify-content: center; }
}
@media (max-width: 1024px) {
  .pricing-featured { transform: scale(1) !important; }
}