@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --blue: #1a7de8;
  --blue-light: #4da3ff;
  --blue-ultra: #7ec8ff;
  --blue-dark: #0a4fa0;
  --silver: #b8cde4;
  --white: #eef4ff;
  --dark: #050912;
  --dark2: #090f1e;
  --dark3: #0d1628;
  --dark4: #111d35;
  --gold: #f0b429;
  --glass: rgba(26,125,232,0.07);
  --glass2: rgba(255,255,255,0.03);
  --border: rgba(26,125,232,0.18);
  --border2: rgba(255,255,255,0.06);
  --shadow-blue: 0 0 40px rgba(26,125,232,0.25);
  --shadow-glow: 0 0 80px rgba(26,125,232,0.15);
  --gradient-main: linear-gradient(135deg, var(--blue-dark), var(--blue), var(--blue-light));
  --gradient-text: linear-gradient(135deg, #fff 0%, var(--blue-ultra) 50%, var(--blue-light) 100%);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background: var(--dark);
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  overflow-x: hidden;
  cursor: none;
}

/* ── CUSTOM CURSOR ── */
.cursor {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue-light); position: fixed; pointer-events: none;
  z-index: 9999; transform: translate(-50%,-50%);
  transition: transform 0.1s, background 0.2s;
  mix-blend-mode: screen;
}
.cursor-ring {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(77,163,255,0.5);
  position: fixed; pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: all 0.15s ease;
}

/* ── NOISE OVERLAY ── */
body::after {
  content:''; position:fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 9990; opacity: 0.4;
}

/* ── GRID BG ── */
.grid-bg {
  position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(26,125,232,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,125,232,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}

/* ── ORBS ── */
.orb { position:fixed; border-radius:50%; filter:blur(100px); pointer-events:none; z-index:0; }
.orb-1 { width:600px;height:600px;background:rgba(26,125,232,0.08);top:-200px;left:-200px;animation:orbFloat 18s ease-in-out infinite alternate; }
.orb-2 { width:400px;height:400px;background:rgba(10,79,160,0.1);bottom:-100px;right:-100px;animation:orbFloat 14s ease-in-out infinite alternate-reverse; }
.orb-3 { width:300px;height:300px;background:rgba(77,163,255,0.06);top:40%;left:60%;animation:orbFloat 20s ease-in-out infinite alternate; }
@keyframes orbFloat { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(60px,40px) scale(1.15)} }

/* ── NAV ── */
.nav {
  position: fixed; top:0; left:0; right:0; z-index:500;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 64px; height: 76px;
  background: rgba(5,9,18,0.75);
  backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid var(--border2);
}

.nav-brand {
  display:flex; align-items:center; gap:14px; text-decoration:none;
}
.nav-brand img {
  height:62px; width:62px; object-fit:cover; border-radius:50%;
  filter: drop-shadow(0 0 10px rgba(26,125,232,0.5));
  border: 1px solid rgba(26,125,232,0.25);
}
.nav-brand-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem; letter-spacing: 3px;
  background: var(--gradient-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.nav-menu { display:flex; align-items:center; gap:8px; }
.nav-menu a {
  font-size:0.82rem; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--silver); text-decoration:none; padding: 8px 16px; border-radius:6px;
  transition: all 0.3s; position:relative;
}
.nav-menu a:hover, .nav-menu a.active {
  color: var(--blue-light); background: rgba(26,125,232,0.08);
}

.nav-dropdown {
  position: relative;
}
.nav-dropdown > a::after { content: ' ▾'; font-size:0.7rem; }
.dropdown-menu {
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background: var(--dark3); border:1px solid var(--border);
  border-radius:12px; padding:8px; min-width:220px;
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(-8px);
  transition: all 0.25s; z-index:600;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), var(--shadow-blue);
}
.nav-dropdown:hover .dropdown-menu {
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.dropdown-menu a {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px; color:var(--silver);
  font-size:0.82rem; text-transform:none; letter-spacing:0.5px;
}
.dropdown-menu a:hover { color:var(--white); background:rgba(26,125,232,0.12); }
.dropdown-menu a .dm-icon { font-size:1rem; width:20px; text-align:center; }

.nav-actions { display:flex; align-items:center; gap:12px; }
.btn-nav-login {
  padding: 8px 20px; border:1px solid var(--border);
  color:var(--silver); background:transparent;
  font-family:'Outfit',sans-serif; font-size:0.82rem; font-weight:600;
  letter-spacing:1px; text-transform:uppercase;
  border-radius:6px; cursor:pointer; text-decoration:none;
  transition:all 0.3s;
}
.btn-nav-login:hover { border-color:var(--blue-light); color:var(--blue-light); }

.btn-nav-cta {
  padding: 9px 22px;
  background: var(--blue); color:#fff;
  border:none; border-radius:6px; cursor:pointer;
  font-family:'Outfit',sans-serif; font-size:0.82rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; text-decoration:none;
  box-shadow: 0 0 20px rgba(26,125,232,0.4);
  transition:all 0.3s;
}
.btn-nav-cta:hover { background:var(--blue-light); box-shadow: 0 0 30px rgba(77,163,255,0.5); transform:translateY(-1px); }

/* ── COMMON SECTION LAYOUT ── */
.section { position:relative; z-index:1; padding:100px 80px; }
.section-sm { padding:60px 80px; }

.label-tag {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace; font-size:0.75rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--blue-light); margin-bottom:20px;
}
.label-tag::before { content:''; width:30px; height:1px; background:var(--blue); }
.label-tag::after  { content:''; width:30px; height:1px; background:var(--blue); }

.display-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem,7vw,6.5rem); letter-spacing:2px; line-height:0.95;
  background: var(--gradient-text);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-size:200% 200%; animation: gradAnimate 6s ease infinite;
}
@keyframes gradAnimate { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.body-text {
  font-size:1rem; color:var(--silver); line-height:1.9; font-weight:300;
}

/* ── BUTTONS ── */
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 36px; background:var(--blue); color:#fff;
  border:none; border-radius:8px; cursor:pointer; text-decoration:none;
  font-family:'Outfit',sans-serif; font-size:0.9rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  box-shadow: 0 0 30px rgba(26,125,232,0.45);
  transition:all 0.35s; position:relative; overflow:hidden;
}
.btn-primary::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.1),transparent);
  transform:translateX(-100%); transition:transform 0.4s;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 50px rgba(26,125,232,0.6); }
.btn-primary:hover::after { transform:translateX(0); }

.btn-ghost {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 36px; background:transparent; color:var(--silver);
  border:1px solid var(--border); border-radius:8px; cursor:pointer; text-decoration:none;
  font-family:'Outfit',sans-serif; font-size:0.9rem; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; transition:all 0.3s;
}
.btn-ghost:hover { border-color:var(--blue-light); color:var(--white); transform:translateY(-3px); }

/* ── CARDS ── */
.card {
  background:var(--dark3); border:1px solid var(--border2);
  border-radius:16px; overflow:hidden; transition:all 0.4s;
  position:relative;
}
.card:hover {
  border-color:var(--border); transform:translateY(-6px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.4), var(--shadow-blue);
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  transform:scaleX(0); transition:transform 0.4s;
}
.card:hover::before { transform:scaleX(1); }

/* ── FOOTER ── */
.footer {
  position:relative; z-index:1;
  background:var(--dark2); border-top:1px solid var(--border2);
  padding: 72px 80px 36px;
}
.footer-grid {
  display:grid; grid-template-columns:2.5fr 1fr 1fr 1fr;
  gap:60px; margin-bottom:60px;
}
.footer-logo-wrap { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.footer-logo-wrap img { height:38px; width:38px; object-fit:contain; border-radius:8px; }
.footer-logo-name {
  font-family:'Bebas Neue',sans-serif; font-size:1.6rem; letter-spacing:3px;
  background:var(--gradient-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.footer-desc { font-size:0.85rem; color:var(--silver); line-height:1.8; font-weight:300; margin-bottom:24px; max-width:280px; }
.footer-socials { display:flex; gap:10px; }
.social-icon {
  width:36px;height:36px;border-radius:8px;
  background:var(--glass2);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  color:var(--silver);text-decoration:none;font-size:0.85rem;
  transition:all 0.3s;
}
.social-icon:hover { background:rgba(26,125,232,0.15); border-color:var(--border); color:var(--blue-light); }
.footer-col h5 {
  font-family:'Outfit',sans-serif;font-weight:700;font-size:0.75rem;
  letter-spacing:3px;text-transform:uppercase;color:var(--white);margin-bottom:20px;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col ul a {
  color:var(--silver);text-decoration:none;font-size:0.85rem;
  transition:color 0.3s; font-weight:300;
}
.footer-col ul a:hover { color:var(--blue-light); }
.footer-bottom {
  border-top:1px solid var(--border2);padding-top:28px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:0.75rem;color:rgba(184,205,228,0.4);
}
.footer-tagline {
  font-family:'JetBrains Mono',monospace;letter-spacing:3px;
  text-transform:uppercase;font-size:0.7rem;
}

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideRight { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} }
@keyframes pulseGlow { 0%,100%{box-shadow:0 0 20px rgba(26,125,232,0.3)} 50%{box-shadow:0 0 40px rgba(26,125,232,0.6)} }

.anim-up    { animation: fadeUp 0.8s ease both; }
.anim-in    { animation: fadeIn 1s ease both; }
.anim-right { animation: slideRight 0.8s ease both; }
.d1 { animation-delay:0.1s } .d2{animation-delay:0.2s} .d3{animation-delay:0.3s}
.d4{animation-delay:0.4s} .d5{animation-delay:0.5s} .d6{animation-delay:0.6s}

.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.7s ease,transform 0.7s ease; }
.reveal.show { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:0.1s } .reveal-d2{transition-delay:0.2s} .reveal-d3{transition-delay:0.3s}
.reveal-d4{transition-delay:0.4s}

/* ── DIVIDER ── */
.glow-line {
  height:1px; width:100%;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  opacity:0.4;
}

/* TICKER */
.ticker-bar {
  overflow:hidden; padding:14px 0;
  background:linear-gradient(90deg,var(--dark2),var(--dark3),var(--dark2));
  border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);
  position:relative; z-index:1;
}
.ticker-inner {
  display:flex;gap:64px;width:max-content;
  animation:tickerScroll 25s linear infinite;
  font-family:'JetBrains Mono',monospace;font-size:0.72rem;
  letter-spacing:2px;text-transform:uppercase;color:var(--silver);
}
.ticker-inner em { color:var(--blue-light);font-style:normal; }
@keyframes tickerScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ══════════════════════════════════════════
   RESPONSIVE — Mobile-first, all breakpoints
   ══════════════════════════════════════════ */

.nav-hamburger { display:none; }  /* hidden on desktop, shown via media query below */
.nav-mobile-menu { display:none; } /* hidden by default */

/* ── TABLET  (max 1024px) ── */
@media(max-width:1024px){
  .nav { padding:0 32px; }
  .section { padding:80px 40px; }
  .section-sm { padding:48px 40px; }
  .footer { padding:60px 40px 28px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:40px; }
}

/* ── MOBILE NAV — hamburger menu ── */
@media(max-width:900px){
  .nav { padding:0 20px; height:64px; }
  .nav-menu { display:none; }

  /* Hamburger toggle */
  .nav-hamburger {
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:40px; height:40px; cursor:pointer; padding:6px;
    background:transparent; border:none; z-index:600;
  }
  .nav-hamburger span {
    display:block; height:2px; width:100%; background:var(--silver);
    border-radius:2px; transition:all 0.3s;
  }
  .nav-hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); background:var(--blue-light); }
  .nav-hamburger.open span:nth-child(2){ opacity:0; }
  .nav-hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); background:var(--blue-light); }

  /* Mobile slide-down menu */
  .nav-mobile-menu {
    display:none; position:fixed; top:64px; left:0; right:0;
    background:rgba(9,15,30,0.98); backdrop-filter:blur(24px);
    border-bottom:1px solid var(--border); padding:20px;
    z-index:490; flex-direction:column; gap:4px;
  }
  .nav-mobile-menu.open { display:flex; }
  .nav-mobile-menu a {
    display:block; padding:13px 16px; border-radius:8px;
    color:var(--silver); text-decoration:none;
    font-size:0.9rem; font-weight:500; letter-spacing:1px; text-transform:uppercase;
    transition:all 0.2s; border:1px solid transparent;
  }
  .nav-mobile-menu a:hover, .nav-mobile-menu a.active {
    color:var(--blue-light); background:rgba(26,125,232,0.08); border-color:var(--border2);
  }
  .nav-mobile-submenu { padding-left:16px; display:flex; flex-direction:column; gap:2px; }
  .nav-mobile-submenu a {
    font-size:0.82rem; letter-spacing:0.5px; text-transform:none; padding:10px 14px;
    display:flex; align-items:center; gap:8px;
  }
  .nav-mobile-services-label {
    padding:10px 16px 6px; font-size:0.68rem; letter-spacing:3px; text-transform:uppercase;
    color:var(--blue-light); font-family:'JetBrains Mono',monospace;
  }
  .nav-mobile-divider { height:1px; background:var(--border2); margin:8px 0; }
  .nav-mobile-actions { display:flex; gap:10px; padding:12px 16px 4px; }
  .nav-mobile-actions a {
    flex:1; text-align:center; padding:12px 16px; font-size:0.82rem;
    font-weight:700; border-radius:8px; letter-spacing:1px; text-transform:uppercase;
    text-decoration:none;
  }
  .nav-mobile-actions .btn-m-login {
    color:var(--silver); border:1px solid var(--border); background:transparent;
  }
  .nav-mobile-actions .btn-m-cta {
    color:#fff; background:var(--blue); border:1px solid transparent;
    box-shadow:0 0 20px rgba(26,125,232,0.4);
  }

  /* Shrink the brand on mobile */
  .nav-brand img { height:44px; width:44px; }
  .nav-brand-name { font-size:1.35rem; letter-spacing:2px; }
  /* hide the "Digital Marketing" h6 inside brand on very small screens */
  .nav-brand-name h6 { font-size:0.52rem; letter-spacing:1.5px; }

  /* hide desktop nav-actions on mobile (they're in mobile menu) */
  .nav-actions { display:none; }

  .section { padding:72px 20px; }
  .section-sm { padding:44px 20px; }

  .footer { padding:56px 20px 24px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .footer-bottom { flex-direction:column; gap:8px; text-align:center; }
}

/* ── SMALL MOBILE (max 600px) ── */
@media(max-width:600px){
  .section { padding:64px 16px; }
  .section-sm { padding:40px 16px; }

  /* Buttons full-width stacking */
  .btn-primary, .btn-ghost {
    padding:13px 28px; font-size:0.82rem;
  }

  /* Footer single column */
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer-desc { max-width:100%; }

  /* Label tag — tighter */
  .label-tag { font-size:0.68rem; letter-spacing:2px; }
  .label-tag::before, .label-tag::after { width:18px; }

  /* ticker smaller */
  .ticker-inner { font-size:0.65rem; gap:40px; }
}