/* FinixCore theme. Loaded after every section stylesheet, so swapped-in designs pick it up too. */
/* The whole palette. Near-black with an indigo glow and white marks, as on the company's own print. */
:root {
  --bg-color: #090a13;    /* page */
  --theme-color: #121330; /* panels and cards */
  --fx-raise: #1a1b40;    /* a panel on a panel */
  --fx-line: #262858;     /* lines and borders */
  --main-color: #6457e6;  /* the accent: buttons, highlights */
  --fx-soft: #a9a0ff;     /* the accent where it is text on the dark page */
  --fx-deep: #2f2a8f;     /* the glow */
}
body { background: var(--bg-color); color: #fff; }

/* The gradient title */
.fx-grad { background: linear-gradient(90deg, #fff, var(--fx-soft) 55%, var(--main-color)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* Logo */
.navbar .logo { display: inline-flex; align-items: center; gap: 10px; width: auto; }
.navbar .logo img { width: 36px; height: 36px; }
.fx-logo-text { color: #fff; font-weight: 600; font-size: 18px; white-space: nowrap; }

/* Loader */
.loader-wrap svg path { fill: var(--bg-color); }
.loader-wrap-heading .load-text img { animation: fx-pulse 1.4s ease-in-out infinite; }
@keyframes fx-pulse { 50% { filter: drop-shadow(0 0 22px rgba(100, 87, 230, .9)); } }

/* Primary buttons */
.butn.butn-rounded:not(.butn-bord) { background: linear-gradient(90deg, var(--main-color), #8a7dff); color: #fff; }

/* Hero: the indigo glow from the top corner, phoenix inside the badge */
.header-dm { position: relative; overflow: hidden; background: radial-gradient(70% 70% at 88% 0%, rgba(100, 87, 230, .5), transparent 70%), radial-gradient(55% 60% at 40% 0%, rgba(47, 42, 143, .45), transparent 72%); }
.header-dm .caption h1 { position: relative; z-index: 2; }
.fx-tag { display: block; margin-top: .25em; font-size: .46em; font-weight: 400; line-height: 1.25; letter-spacing: -.01em; color: #fff; }
.fx-foot-logo { width: 56px !important; height: 56px; display: block; }
.header-dm .text p { max-width: 340px; }
.d-digital-marketing .header-dm .imgs-cube .imgs .circle:after { background: rgba(9, 10, 19, .55) url(/assets/brand/logo-mark.png) center / 56% no-repeat; }

/* Client names, in place of the template's sample logos */
.fx-client { display: block; padding: 24px 12px; text-align: center; font-size: 28px; font-weight: 600; color: #fff; }
.fx-client:hover { color: var(--fx-soft); }

/* The template's skill percentages are invented, so bars show without numbers */
.skill-progress .progres:after { content: none !important; }

/* Links inside cards keep the card's look */
.services-mda a.d-block { color: inherit; }

/* Nav stays readable over whatever scrolls under it */
.navbar.nav-scroll { background: rgba(9, 10, 19, .88) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Slider labels collide on phones; the arrows stay */
@media (max-width: 767px) { .works-ma .swiper-controls span { display: none; } }

/* One spacing rhythm for every section; the template's 140px doubles at each seam */
:root { --fx-pad: clamp(56px, 5.6vw, 80px); }
.section-padding { padding-top: var(--fx-pad); padding-bottom: var(--fx-pad); }
/* The first section clears the fixed nav, and whichever section sits above an overlapping one keeps room for it */
main > [data-section]:first-child > .section-padding { padding-top: 140px; }
[data-section]:has(+ [data-section] > .goup) > :first-child { padding-bottom: calc(var(--fx-pad) + 80px) !important; }
/* A rounded dark panel has no space of its own below it */
[data-section]:has(> .box-dark) + [data-section] > .pt-0 { padding-top: var(--fx-pad) !important; }

/* The big number holds three characters here, not the template's two */
.d-creative_agency2 .intro-crv .exp h2 { font-size: min(26vw, 380px); white-space: nowrap; margin-bottom: 0; }
.d-creative_agency2 .intro-crv .skills.pb-100 { padding-bottom: 0 !important; }
@media (max-width: 991px) { .d-creative_agency2 .intro-crv .exp h2 { font-size: 44vw; } .d-creative_agency2 .intro-crv .exp { padding-block: 56px; } }

/* Bots fill this in, people never see it */
.fx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Keyboard users: a way past the menu, and the focus ring the template removes */
.fx-skip { position: fixed; left: 16px; top: -80px; z-index: 100000; padding: 10px 16px; border-radius: 8px; background: #fff; color: #121330; font-weight: 600; }
.fx-skip:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--fx-soft) !important; outline-offset: 3px; }
main:focus { outline: none !important; }

/* The opening curtain plays once per visit (fx.js) */
.fx-quick .loader-wrap { display: none !important; }

/* Visitors who ask their device for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cursor { display: none !important; }
}

/* Dark throughout. tools/darken.mjs handles flat colours; these are the gradients and drawn icons it cannot read. */
.d-creative_agency .header-ca .main-box { background-image: linear-gradient(to bottom, var(--theme-color), var(--fx-deep)); }
.d-creative_agency .about-ca .team .img { background-image: linear-gradient(to bottom, var(--fx-raise), var(--fx-deep)); }
.d-modern_portfolio .header-mp { background-image: linear-gradient(170deg, var(--main-color), var(--bg-color) 80%); }
.main-marq:after { background: linear-gradient(to left, var(--bg-color), transparent 280px, transparent calc(100% - 280px), var(--bg-color)); }
.main-marqv:after { background: linear-gradient(to top, var(--bg-color), transparent 80px, transparent calc(100% - 80px), var(--bg-color)); }
.award-box .arrow svg path { fill: #fff; }
a.view svg path, a.view svg line, a.view svg polyline { stroke: #fff; }
.d-digital_studio .faqs-ds .accordion-item.active p { color: rgba(255, 255, 255, .88); }
.d-creative_agency2 .header-crv { background-image: radial-gradient(80% 90% at 88% 0%, rgba(100, 87, 230, .55), transparent 70%), radial-gradient(60% 70% at 25% 0%, rgba(47, 42, 143, .5), transparent 72%); }
/* A utility class that is a section in one design and a button in another: buttons keep the brand colour */
.butn.bg-light, .butn.bg-white { background-color: var(--main-color) !important; color: #fff; }
/* Embedded maps are drawn light, so they are shown inverted */
iframe[src*="maps.google"], iframe[src*="google.com/maps"] { filter: invert(.92) hue-rotate(180deg) saturate(.7); }
/* Skill bars are sized by script, so the tool never sees them at full size: three shades of the brand */
.d-creative_agency2 .intro-crv .skills-box .skill-progress .progres.gray { background: var(--fx-line); }
.d-creative_agency2 .intro-crv .skills-box .skill-progress .progres.dark { background: var(--fx-deep); }
/* A line drawing with black lines on white shapes: shown as white lines only */
img[src$="/monoline_anim.svg"] { filter: invert(1); mix-blend-mode: screen; }
/* A black line drawing with labels: lines and labels swap light for dark, colours keep their hue */
img[src$="/process.svg"] { filter: invert(1) hue-rotate(180deg); }