/* ============================================================
   NOVADIGITAL — Theme layer (visual refresh)
   Loaded after style.css and responsive.css, so everything here
   overrides the base styles without touching your HTML structure.
   Brand: navy #101B46 · purple #5425E8 · blue #2878FF
   ============================================================ */

:root {
  --navy: #101B46;
  --navy-deep: #0A1233;
  --purple: #5425E8;
  --blue: #2878FF;
  --cyan: #19C3FB;
  --light: #F6F7FF;
  --border: #E4E8F7;
  --text: #1A2447;
  --text-soft: #56618A;
  --gradient: linear-gradient(120deg, #5425E8 0%, #2878FF 62%, #19C3FB 120%);
  --gradient-soft: linear-gradient(135deg, rgba(84,37,232,.09), rgba(40,120,255,.09));
  --shadow-sm: 0 2px 6px rgba(16,27,70,.04), 0 8px 20px rgba(16,27,70,.05);
  --shadow-md: 0 4px 10px rgba(16,27,70,.04), 0 22px 50px rgba(16,27,70,.10);
  --shadow-lg: 0 8px 18px rgba(16,27,70,.05), 0 40px 80px rgba(16,27,70,.16);
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Poppins", "Inter", system-ui, sans-serif;
}

/* ---------- Base type ---------- */

body { font-family: var(--font); font-size: 1rem; background: #fff; }

h1, h2, h3, h4, h5, h6, .brand-logo, .btn-grad, .btn-outline-navy, .btn-white-ghost,
.filter-btn, .stat-num, .t-name {
  font-family: var(--font-display);
}

h1, h2, h3 { letter-spacing: -0.035em; }

.display-hero {
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.display-section {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 700;
  line-height: 1.12;
}

.lead-text { font-size: 1.1rem; line-height: 1.7; }

.text-gradient {
  background-image: linear-gradient(110deg, #5425E8 0%, #2878FF 55%, #19C3FB 100%);
  background-size: 140% 100%;
}

:focus-visible { outline: 3px solid rgba(40,120,255,.55); outline-offset: 3px; border-radius: 8px; }

/* Section label: quieter pill, sentence case */
.section-eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-size: .86rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: .4rem 1rem .4rem .85rem;
}

.section-eyebrow::before { width: 8px; height: 8px; box-shadow: 0 0 0 4px rgba(84,37,232,.12); }

.bg-light-section {
  background-color: var(--light);
  background-image: radial-gradient(rgba(16,27,70,.055) 1px, transparent 1px);
  background-size: 24px 24px;
}

.section-padding { padding: 7rem 0; }

/* ---------- Buttons ---------- */

.btn-grad {
  position: relative;
  overflow: hidden;
  background-image: var(--gradient);
  background-size: 130% 100%;
  background-position: 0 0;
  font-weight: 600;
  padding: .95rem 2.1rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 12px 30px -6px rgba(84,37,232,.55);
  transition: transform .25s ease, box-shadow .25s ease, background-position .4s ease;
}

.btn-grad::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -80%;
  width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}

.btn-grad:hover { filter: none; background-position: 100% 0; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 18px 38px -6px rgba(84,37,232,.6); }
.btn-grad:hover::after { left: 130%; }

.btn-outline-navy {
  background: rgba(255,255,255,.7);
  border: 1.5px solid rgba(16,27,70,.14);
  padding: .95rem 2.1rem;
  backdrop-filter: blur(6px);
}

.btn-outline-navy:hover { border-color: var(--purple); background: #fff; box-shadow: var(--shadow-sm); }

.btn-white-ghost { padding: .95rem 2.1rem; backdrop-filter: blur(6px); }

/* ---------- Header: floating glass bar ---------- */

.site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none !important;
  padding: .9rem 0 0;
  margin-bottom: -5.6rem;
  pointer-events: none;
}

.site-header .container {
  pointer-events: auto;
  width: calc(100% - 1.5rem);
  max-width: 1160px;
  padding: .5rem .55rem .5rem 1.2rem;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(1.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 100px;
  box-shadow: 0 1px 0 #fff inset, 0 10px 36px rgba(16,27,70,.09);
  transition: background .3s ease, box-shadow .3s ease;
}

.site-header.is-scrolled .container {
  background: rgba(255,255,255,.9);
  box-shadow: 0 1px 0 #fff inset, 0 14px 44px rgba(16,27,70,.16);
}

.brand-mark { width: 40px; height: 40px; border-radius: 12px; background-image: var(--gradient); }
.brand-logo { font-size: 1.28rem; }

.site-header .navbar-nav .nav-link { font-size: .93rem; font-weight: 500; color: var(--text); }
.site-header .navbar-nav .nav-link:hover { color: var(--purple); background: rgba(84,37,232,.06); }

.site-header .navbar-nav .nav-link.active {
  background: var(--navy);
  color: #fff;
  font-weight: 500;
}

.dropdown-menu { border: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: .7rem; min-width: 280px; }
.dropdown-item { padding: .65rem .9rem; }
.dropdown-item i { width: 30px; height: 30px; border-radius: 9px; background: var(--gradient-soft); display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; }

@media (max-width: 991.98px) {
  .site-header .container { border-radius: 28px; padding: .55rem .7rem .55rem 1.1rem; }
  .navbar-collapse { background: transparent; box-shadow: none; padding: .6rem 0 .4rem; margin-top: .4rem; border-top: 1px solid var(--border); border-radius: 0; }
  .site-header .navbar-nav .nav-link.active { display: inline-block; }
}

/* ---------- Home hero: aurora ---------- */

.hero-section {
  padding: 11rem 0 6.5rem;
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(40,120,255,.20), transparent 62%),
    radial-gradient(760px 480px at 6% 82%, rgba(84,37,232,.17), transparent 62%),
    radial-gradient(520px 340px at 55% 105%, rgba(25,195,251,.16), transparent 70%),
    #F5F6FF;
}

.hero-shape { filter: blur(90px); opacity: .6; animation: drift 16s ease-in-out infinite alternate; }
.hero-shape.one { width: 420px; height: 420px; background: rgba(84,37,232,.28); top: -120px; right: 6%; }
.hero-shape.two { width: 360px; height: 360px; background: rgba(25,195,251,.26); bottom: -120px; left: 28%; animation-delay: -6s; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(50px, 36px, 0) scale(1.12); }
}

.hero-grid-lines { background-size: 64px 64px; opacity: .8; }

.hero-eyebrow-ring {
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  font-weight: 500;
  font-size: .88rem;
}

/* Dashboard: glass card with gradient edge and a gentle 3D tilt */

.dash-shell {
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(84,37,232,.55), rgba(40,120,255,.35) 50%, rgba(25,195,251,.55)) border-box;
  box-shadow: 0 50px 100px -30px rgba(84,37,232,.45), 0 20px 40px -20px rgba(16,27,70,.25);
  padding: 1.5rem;
  transform: perspective(1600px) rotateY(-7deg) rotateX(3deg);
  animation: dash-float 7s ease-in-out infinite;
}

@keyframes dash-float {
  0%, 100% { transform: perspective(1600px) rotateY(-7deg) rotateX(3deg) translateY(0); }
  50% { transform: perspective(1600px) rotateY(-7deg) rotateX(3deg) translateY(-12px); }
}

.dash-stat, .dash-chart, .ring-wrap { background: #F7F8FF; border-color: #EBEEFB; }
.dash-stat .label { text-transform: none; letter-spacing: 0; font-size: .74rem; font-weight: 600; }
.dash-stat .value { font-family: var(--font-display); letter-spacing: -0.03em; }
.bar { background: linear-gradient(180deg, #2878FF, rgba(40,120,255,.25)); }
.bar.alt { background: linear-gradient(180deg, #5425E8, rgba(84,37,232,.25)); }
.ring { background: conic-gradient(var(--purple), var(--blue) calc(var(--pct) * 1%), #E4E8F7 0); }

.float-chip {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,.9);
  box-shadow: 0 16px 40px rgba(16,27,70,.14);
}

@media (max-width: 991.98px) {
  .hero-section { padding: 9rem 0 4.5rem; }
  .dash-shell { transform: none; animation: float-slow 6s ease-in-out infinite; }
}

/* ---------- Services ticker (home) ---------- */

.marquee {
  overflow: hidden;
  padding: 1.5rem 0;
  background: #fff;
  border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: marquee 38s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: #A7B0CE;
  white-space: nowrap;
}

.marquee-track span::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 3px;
  transform: rotate(45deg);
  background: var(--gradient);
}

@keyframes marquee { to { transform: translateX(calc(-50% - 1.5rem)); } }

/* ---------- Stats band ---------- */

.stats-band {
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(84,37,232,.55), transparent 62%),
    radial-gradient(520px 280px at 0% 100%, rgba(40,120,255,.45), transparent 62%),
    var(--navy-deep);
  padding: 3.8rem 2rem;
  box-shadow: var(--shadow-lg);
}

.stats-band::before, .stats-band::after { display: none; }

.stat-item .stat-num {
  font-size: clamp(2.6rem, 4.6vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.045em;
}

.stat-item .stat-num .suffix {
  background: linear-gradient(120deg, #C4B5FD, #67E8F9);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (min-width: 768px) {
  .stat-item + .stat-item { border-left: 1px solid rgba(255,255,255,.12); }
}

/* ---------- Cards (shared) ---------- */

.service-card, .testimonial-card, .portfolio-card, .team-card, .achieve-card,
.contact-info-card, .compare-col, .hours-box, .faq-item {
  --mx: -999px; --my: -999px;
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  background-image: radial-gradient(420px circle at var(--mx) var(--my), rgba(84,37,232,.07), transparent 45%);
}

.service-card { padding: 2.3rem; border-radius: var(--radius-lg); }
.service-card.tint-a, .service-card.tint-b { background-color: #fff; }
.service-card::after { display: none; }

.service-card:hover, .portfolio-card:hover, .team-card:hover, .testimonial-card:hover {
  border-color: rgba(84,37,232,.28);
  box-shadow: var(--shadow-lg);
}

.service-icon {
  width: 60px; height: 60px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(84,37,232,.12), rgba(40,120,255,.08));
  border: 1px solid rgba(84,37,232,.16);
}

.service-card:hover .service-icon { background-image: var(--gradient); border-color: transparent; }

.service-card h4 { font-weight: 600; font-size: 1.2rem; }
.service-card .link-more { color: var(--purple); }

.feature-row .f-icon, .contact-info-card .ci-icon, .mv-card .mv-icon, .avatar-initials {
  background-image: var(--gradient);
}

.avatar-initials.alt { background-image: linear-gradient(135deg, #0EA5E9, #2878FF); }
.avatar-initials.alt2 { background-image: linear-gradient(135deg, #F59E0B, #EF4444); }
.avatar-initials.alt3 { background-image: linear-gradient(135deg, #10B981, #0EA5E9); }

.process-step .step-num { font-family: var(--font-display); border-width: 2px; box-shadow: var(--shadow-sm); }
.process-step:hover .step-num { background-image: var(--gradient); }

/* ---------- Testimonials ---------- */

.testimonial-card { padding: 2.2rem; border-radius: var(--radius-lg); }
.testimonial-card .quote-ic { font-size: 2.6rem; opacity: 1; background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.testimonial-card p.quote { font-style: normal; font-size: 1rem; line-height: 1.75; color: var(--text); }

/* ---------- FAQ ---------- */

.faq-item { border-radius: var(--radius-md); }
.faq-item:has(.accordion-button:not(.collapsed)) { border-color: rgba(84,37,232,.3); box-shadow: var(--shadow-md); }
.accordion-button { font-family: var(--font-display); font-weight: 600; }

/* ---------- CTA band ---------- */

.cta-band {
  padding: 5rem 2.5rem;
  background:
    radial-gradient(700px 360px at 108% -20%, rgba(25,195,251,.45), transparent 60%),
    radial-gradient(640px 340px at -8% 120%, rgba(84,37,232,.75), transparent 60%),
    linear-gradient(135deg, #101B46, #1B1F6B);
  box-shadow: var(--shadow-lg);
}

.cta-band .btn-grad { background-image: none; background: #fff; color: var(--navy); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.cta-band .btn-grad:hover { color: var(--purple); }

/* ---------- Footer ---------- */

.site-footer { background: var(--navy-deep); }
.site-footer::before { background: radial-gradient(circle, rgba(84,37,232,.35), transparent 70%); }

.site-footer .inner::before {
  content: "";
  position: absolute;
  top: -5rem; left: 12px; right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(40,120,255,.7), rgba(84,37,232,.7), transparent);
}

.site-footer h6.footer-title { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }
.newsletter-box { background: rgba(255,255,255,.05); backdrop-filter: blur(8px); }
.newsletter-box .btn-nl { background-image: var(--gradient); }
.social-btn:hover { background-image: var(--gradient); }

/* ---------- Inner page heroes (each page gets its own colour mood) ---------- */

body { --g1: rgba(84,37,232,.55); --g2: rgba(40,120,255,.5); }
.page-about { --g1: rgba(168,85,247,.55); --g2: rgba(236,72,153,.38); }
.page-services { --g1: rgba(40,120,255,.6); --g2: rgba(25,195,251,.42); }
.page-why-choose-us { --g1: rgba(84,37,232,.6); --g2: rgba(20,184,166,.4); }
.page-portfolio { --g1: rgba(124,58,237,.6); --g2: rgba(251,146,60,.35); }
.page-contact { --g1: rgba(40,120,255,.6); --g2: rgba(124,58,237,.5); }

.page-hero {
  padding: 10.5rem 0 6rem;
  border-radius: 0 0 56px 56px;
  background:
    radial-gradient(700px 380px at 88% -10%, var(--g2), transparent 62%),
    radial-gradient(640px 360px at 4% 120%, var(--g1), transparent 62%),
    var(--navy-deep);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 72%);
  pointer-events: none;
}

.page-hero .display-hero { font-size: clamp(2.3rem, 5vw, 3.8rem); }
.page-hero .text-gradient { background-image: linear-gradient(110deg, #C4B5FD, #67E8F9) !important; }
.page-hero .hero-shape.one { background: var(--g1); }
.page-hero .hero-shape.two { background: var(--g2); }
.page-hero .crumb { backdrop-filter: blur(8px); color: #DDD6FE; }
.page-hero .crumb a { color: #DDD6FE; }

@media (max-width: 767.98px) {
  .page-hero { padding: 8.5rem 0 4rem; border-radius: 0 0 32px 32px; }
  .section-padding { padding: 4.5rem 0; }
}

/* ---------- Portfolio, contact, team, misc ---------- */

.filter-btn { font-weight: 500; }
.filter-btn.active { background-image: var(--gradient); }

.p-cat { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .74rem; }

.browser-mockup { box-shadow: var(--shadow-sm); }
.mock-hero { background-image: linear-gradient(135deg, #5425E8, #2878FF); }

.case-band, .compare-col.us, .mv-card.vision {
  background-color: var(--navy-deep);
}

.form-card { border-radius: var(--radius-lg); border-color: var(--border); position: relative; overflow: hidden; }
.form-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--gradient); }

.form-control, .form-select { background-color: #FAFBFF; border-radius: 14px; padding: .8rem 1.05rem; }
.form-control:focus, .form-select:focus { background-color: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(40,120,255,.14); }

.team-avatar { box-shadow: 0 16px 34px rgba(84,37,232,.3); }
.team-social a:hover { background-image: var(--gradient); }
.team-card .t-role { color: var(--blue); }

.back-to-top { background-image: var(--gradient); }

/* ---------- Motion: gentler reveal, honour reduced-motion ---------- */

.reveal { transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }

@media (prefers-reduced-motion: reduce) {
  .hero-shape, .dash-shell, .marquee-track { animation: none !important; }
  .marquee { overflow-x: auto; }
}

/* Logo: remove the flex gap between "Nova" and "Digital" */
.brand-logo > span:not(.brand-mark) { margin-left: -.65rem; }

/* Keep the Instagram chip clear of the goal ring */
.chip-ig { bottom: -26px; left: 9%; }
@media (max-width: 1199.98px) { .chip-ig { left: 4%; } }

/* Inner pages: header starts as dark glass over the dark hero, turns white once scrolled */
body:not(.page-index) .site-header:not(.is-scrolled) .container {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 36px rgba(0,0,0,.28);
}
body:not(.page-index) .site-header:not(.is-scrolled) .brand-logo,
body:not(.page-index) .site-header:not(.is-scrolled) .navbar-nav .nav-link,
body:not(.page-index) .site-header:not(.is-scrolled) .navbar-toggler { color: #fff; }
body:not(.page-index) .site-header:not(.is-scrolled) .brand-logo span.dot { color: #C4B5FD; }
body:not(.page-index) .site-header:not(.is-scrolled) .navbar-nav .nav-link:hover { color: #C4B5FD; background: rgba(255,255,255,.08); }
body:not(.page-index) .site-header:not(.is-scrolled) .navbar-nav .nav-link.active { background: #fff; color: var(--navy); }
body:not(.page-index) .site-header:not(.is-scrolled) .navbar-collapse { border-top-color: rgba(255,255,255,.16); }