/**
* Cuptoopia theme layer
*
* Sits on top of the BizLand v3.2.0 vendor stylesheet (assets/css/style.css),
* which is left untouched so it stays upgradable. This file MUST load after it.
*
* Every rule in section 1 mirrors a vendor selector exactly, so specificity ties
* and source order decides the winner. No !important is needed anywhere.
*
* Reverting the entire theme = removing the single <link> in base.html.
*/

/*--------------------------------------------------------------
# Design tokens
--------------------------------------------------------------*/
:root {
  /* Brand ramp. Hue 269deg is Cuptoopia purple #7a27d3 expressed in HSL,
     so every step below stays on the same hue as the logo. */
  --brand-hue: 269;

  --brand-300: hsl(var(--brand-hue) 70% 69%);   /* decorative, replaces #6ba7f5 */
  --brand-500: hsl(var(--brand-hue) 72% 63%);   /* light accent, replaces #3b8af2 */
  --brand-hover: hsl(var(--brand-hue) 72% 56%); /* hover,       replaces #247cf0 / #3284f1 */
  --brand-600: #7a27d3;                         /* PRIMARY,     replaces #106eea */
  --brand-700: hsl(var(--brand-hue) 69% 41%);   /* dark accent, replaces #0d58ba */

  /* Primary as raw channels, for translucent shadows and overlays. */
  --brand-rgb: 122, 39, 211;

  /* Pale surface tints. Lightness matched to the blues they replace so the
     vendor's contrast relationships survive the hue swap. */
  --tint-50:  hsl(var(--brand-hue) 60% 98%);  /* replaces #f6f9fe */
  --tint-75:  hsl(var(--brand-hue) 60% 97%);  /* replaces #f1f6fe */
  --tint-100: hsl(var(--brand-hue) 65% 95%);  /* replaces #e7f1fd */
  --tint-150: hsl(var(--brand-hue) 65% 94%);  /* replaces #e2eefd */
  --tint-200: hsl(var(--brand-hue) 65% 93%);  /* replaces #deebfd */
  --tint-300: hsl(var(--brand-hue) 65% 91%);  /* replaces #d4e5fc */
  --tint-400: hsl(var(--brand-hue) 65% 89%);  /* replaces #cbe0fb */
  --tint-500: hsl(var(--brand-hue) 65% 84%);  /* replaces #b3d1fa */

  /* Elevation. Tinted rather than neutral grey so shadows feel part of the brand. */
  --shadow-sm: 0 1px 2px rgba(var(--brand-rgb), 0.04),
               0 2px 8px rgba(var(--brand-rgb), 0.06);
  --shadow-md: 0 2px 4px rgba(var(--brand-rgb), 0.05),
               0 8px 24px rgba(var(--brand-rgb), 0.10);
  --shadow-lg: 0 4px 8px rgba(var(--brand-rgb), 0.06),
               0 16px 40px rgba(var(--brand-rgb), 0.14);

  /* Geometry */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 50px;

  /* Motion. Referenced by the reduced-motion guard at the end of this file. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --speed: 0.25s;
}

/*--------------------------------------------------------------
# 1. Accent overrides
#
# One entry per vendor rule that hardcoded a stock-theme blue.
# Selectors are copied verbatim from style.css so nothing escalates.
--------------------------------------------------------------*/

/* General */
a {
  color: var(--brand-600);
}

a:hover {
  color: var(--brand-500);
}

/* Preloader */
#preloader:before {
  border: 6px solid var(--brand-600);
  border-top-color: var(--tint-150);
}

/* Back to top */
.back-to-top {
  background: var(--brand-600);
}

.back-to-top:hover {
  background: var(--brand-hover);
}

/* Top bar */
#topbar {
  background: var(--brand-600);
}

/* Header */
#header .logo a span {
  color: var(--brand-600);
}

/* Navigation */
.navbar > ul > li > a:before {
  background-color: var(--brand-600);
}

.navbar a:hover,
.navbar .active,
.navbar li:hover > a {
  color: var(--brand-600);
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
  color: var(--brand-600);
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
  color: var(--brand-600);
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover > a {
  color: var(--brand-600);
}

/* Hero */
#hero h1 span {
  color: var(--brand-600);
}

#hero .btn-get-started {
  background: var(--brand-600);
}

#hero .btn-get-started:hover {
  background: var(--brand-hover);
}

#hero .btn-watch-video i {
  color: var(--brand-600);
}

#hero .btn-watch-video:hover {
  color: var(--brand-600);
}

#hero .btn-watch-video:hover i {
  color: var(--brand-500);
}

/* Sections general */
.section-bg {
  background-color: var(--tint-50);
}

.section-title h2 {
  background: var(--tint-100);
  color: var(--brand-600);
}

.section-title h3 span {
  color: var(--brand-600);
}

/* Breadcrumbs */
.breadcrumbs {
  background-color: var(--tint-75);
}

/* Featured services */
.featured-services .icon-box::before {
  background: var(--tint-400);
}

.featured-services .icon-box:hover::before {
  background: var(--brand-600);
}

.featured-services .icon i {
  color: var(--brand-600);
}

/* About */
.about .content ul i {
  box-shadow: 0px 6px 15px rgba(var(--brand-rgb), 0.12);
  color: var(--brand-600);
}

/* Skills */
.skills .progress-bar-wrap {
  background: var(--tint-150);
}

.skills .progress-bar {
  background-color: var(--brand-600);
}

/* Counts */
.counts .count-box {
  background: var(--tint-75);
}

.counts .count-box i {
  background: var(--brand-600);
}

/* Services cards */
.services .icon-box {
  border: 1px solid var(--tint-150);
}

.services .icon-box .icon {
  background: var(--tint-75);
  border: 1px solid var(--tint-200);
}

.services .icon-box .icon i {
  color: var(--brand-500);
}

.services .icon-box:hover {
  box-shadow: 0px 0 25px 0 rgba(var(--brand-rgb), 0.1);
}

.services .icon-box:hover h4 a,
.services .icon-box:hover .icon i {
  color: var(--brand-600);
}

.services .icon-box:hover .icon {
  border-color: var(--brand-600);
}

/* Testimonials */
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--brand-600);
}

/* Portfolio */
.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
  color: var(--brand-600);
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: var(--brand-600);
}

.portfolio .portfolio-item .portfolio-links a:hover {
  color: var(--brand-300);
}

/* Portfolio details */
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  border: 1px solid var(--brand-600);
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--brand-600);
}

/* Team */
.team .member {
  box-shadow: 0px 2px 15px rgba(var(--brand-rgb), 0.15);
}

.team .member .social a {
  background: rgba(var(--brand-rgb), 0.8);
}

.team .member .social a:hover {
  background: var(--brand-500);
}

/* Pricing */
.pricing .box h4 {
  color: var(--brand-600);
}

.pricing .box ul i {
  color: var(--brand-600);
}

.pricing .btn-buy {
  background: var(--brand-600);
}

.pricing .btn-buy:hover {
  background: var(--brand-500);
}

.pricing .featured h3 {
  background: var(--brand-600);
}

.pricing .advanced {
  background: var(--brand-600);
}

/* FAQ
   Note: the vendor rule also sets `font-family: #106eea`, which is invalid and
   ignored by every browser. Not reproduced here. */
.faq .faq-list li {
  border-bottom: 1px solid var(--tint-300);
}

.faq .faq-list .question {
  color: var(--brand-700);
}

.faq .faq-list .collapsed:hover {
  color: var(--brand-600);
}

/* Contact */
.contact .info-box i {
  color: var(--brand-600);
  border: 2px dotted var(--tint-500);
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--brand-600);
}

.contact .php-email-form button[type="submit"] {
  background: var(--brand-600);
}

.contact .php-email-form button[type="submit"]:hover {
  background: var(--brand-hover);
}

/* Footer */
#footer {
  background: var(--tint-75);
}

#footer .footer-newsletter {
  background: var(--tint-75);
}

#footer .footer-newsletter form input[type="submit"] {
  background: var(--brand-600);
}

#footer .footer-newsletter form input[type="submit"]:hover {
  background: var(--brand-700);
}

#footer .footer-top .footer-contact h3 span {
  color: var(--brand-600);
}

#footer .footer-top .footer-links ul i {
  color: var(--brand-600);
}

#footer .footer-top .footer-links ul a:hover {
  color: var(--brand-600);
}

#footer .footer-top .social-links a {
  background: var(--brand-600);
}

#footer .footer-top .social-links a:hover {
  background: var(--brand-500);
}

/* Vendor sets these to #777777. On the tinted footer that measures 4.48:1 —
   just under the 4.5:1 AA threshold for 14px text. Darkened to clear it. */
#footer .footer-top .footer-links ul a,
#footer .footer-top .footer-contact p {
  color: #595959;
}

/*--------------------------------------------------------------
# 2. Header polish
--------------------------------------------------------------*/

/* The logo previously used an inline `width: 6%`, which scaled with the
   viewport and caused layout shift. Fixed dimensions instead. */
#header .logo-img {
  width: auto;
  height: 48px;
  transition: height var(--speed) var(--ease);
}

#header.fixed-top .logo-img {
  height: 40px;
}

#header {
  box-shadow: var(--shadow-sm);
}

/* Footer logo previously used width="40%" plus a `margin-top: -10%` hack, so its
   size and vertical offset both tracked the container width. Fixed instead. */
#footer .footer-contact .footer-logo {
  width: auto;
  height: 72px;
  margin-bottom: 12px;
}

/*--------------------------------------------------------------
# 3. Product cards
#
# The vendor card was designed for a 3-up grid: `padding: 80px 20px`
# (style.css:892) on a flat, square-cornered box. Modernized here without
# touching any of the 59 card markup blocks across the six listing templates.
--------------------------------------------------------------*/

/* Vendor `section { overflow: hidden }` (style.css:565) would shear the hover
   shadow off the first and last card in every row. `clip` on the x-axis only
   keeps AOS from producing a horizontal scrollbar while letting the shadow
   bleed vertically. */
.services {
  overflow-x: clip;
  overflow-y: visible;
}

/* mobileapps.html wraps each card in an <a> that sits between the column and
   the card. As an inline box it swallowed `align-items-stretch`, so those
   cards never matched heights. Making it a block-level flex container lets
   the stretch pass through — no markup change needed. */
.services .row > [class*="col-"] > a {
  display: flex;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.services .icon-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 14px;
  padding: 32px 24px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.services .icon-box:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--tint-300);
}

/* Product logos are artwork, not glyphs — drop the vendor's 64px tinted chip
   and give them room to actually read. */
.services .icon-box .icon {
  width: 100%;
  max-width: 104px;
  height: 104px;
  margin: 0 auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  flex: 0 0 auto;
}

.services .icon-box .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* guideline.html is the one page whose cards use Boxicon glyphs rather than
   product artwork; those keep the tinted chip treatment. */
.services .icon-box .icon--glyph {
  max-width: 72px;
  height: 72px;
  background: var(--tint-75);
  border: 1px solid var(--tint-200);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Titles come in two shapes across the templates — some wrapped in <a>, some
   bare text. Unify so a row never looks half-linked. */
.services .icon-box h4 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  flex: 0 0 auto;
}

.services .icon-box h4,
.services .icon-box h4 a {
  color: #222222;
}

/* `<br><small>(Coming Soon)</small>` becomes a proper caption. The <br> is
   redundant once <small> is a block. */
.services .icon-box h4 br {
  display: none;
}

.services .icon-box h4 small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  color: #777777;
}

/* Descriptions absorb the slack so cards with and without a <p> still end
   flush at the bottom of a row. */
.services .icon-box p {
  margin: 0;
  flex: 1 1 auto;
}

/*--------------------------------------------------------------
# 4. Homepage hero
#
# The vendor ships a complete #hero (style.css:442-558) that no template ever
# used. Reused here, with four of its declarations replaced.
--------------------------------------------------------------*/

#hero {
  /* Was `height: 75vh` — a hard height clips the portrait plus copy on short
     or narrow viewports. */
  height: auto;
  min-height: clamp(520px, 78vh, 780px);
  padding-block: clamp(3rem, 7vw, 6rem);

  /* Was a photographic background under a white scrim. A brand gradient reads
     cleaner behind a portrait and drops a 266 KB image request. */
  background: linear-gradient(155deg, var(--tint-100) 0%, #ffffff 55%, var(--tint-75) 100%);
}

/* The vendor scrim exists to mute the photo; with a gradient it just washes
   the colour out. Neutralised rather than deleted, so style.css stays intact. */
#hero:before {
  background: transparent;
}

.hero-eyebrow {
  margin: 0 0 12px;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brand-600);
}

#hero h2 {
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

/* Vendor `.btn-watch-video` carries `margin-left: 25px`, which double-counts
   against the flex gap. */
#hero .btn-watch-video {
  margin-left: 0;
}

#hero .btn-get-started {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

/* Portrait */
.hero-portrait {
  position: relative;
  margin: 0;
  max-width: 420px;
  margin-inline: auto;
}

/* Offset accent panel behind the photo. */
.hero-portrait::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  background: var(--tint-200);
  border-radius: var(--radius-lg);
  z-index: 0;
}

.hero-portrait img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.hero-portrait figcaption {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  text-align: center;
}

.hero-portrait figcaption strong {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  color: #222222;
}

.hero-portrait figcaption span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: #555555;
}

/* Vendor pins the background at >=1024px, which repaints on every scroll tick
   and is a no-op for a gradient. */
@media (min-width: 1024px) {
  #hero {
    background-attachment: scroll;
  }
}

/* Vendor forces `height: 100vh` here; that would strand a small portrait in a
   full-viewport box. Must be restated inside the same query to win. */
@media (max-width: 768px) {
  #hero {
    height: auto;
    min-height: 0;
  }
}

/* On phones the portrait leads, so it must not consume the whole viewport and
   push the headline below the fold. */
@media (max-width: 575.98px) {
  .hero-portrait {
    max-width: 250px;
  }

  .hero-portrait::before {
    inset: 12px -12px -12px 12px;
  }

  .hero-actions .btn-get-started {
    width: 100%;
    text-align: center;
  }
}

@media (max-height: 500px) {
  #hero {
    height: auto;
  }
}

/*--------------------------------------------------------------
# 5. About + pillars (homepage)
--------------------------------------------------------------*/

.about-heading {
  margin-bottom: 20px;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem);
}

/* Full-width prose ran to ~130 characters per line. */
.about .lead {
  max-width: 68ch;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #444444;
}

.pillar {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
  padding: 32px 24px;
  background: #fff;
  border: 1px solid var(--tint-150);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.pillar:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--tint-300);
}

.pillar i {
  font-size: 32px;
  line-height: 1;
  color: var(--brand-600);
}

.pillar h4 {
  margin: 0;
  font-size: 19px;
  color: #222222;
}

.pillar p {
  margin: 0;
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
}

/*--------------------------------------------------------------
# 6. Section rhythm
--------------------------------------------------------------*/

/* Vendor `section { padding: 60px 0 }` is cramped on wide screens. */
section {
  padding-block: clamp(3rem, 5vw, 5.5rem);
}

/*--------------------------------------------------------------
# 5. Motion preferences
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Suppress the displacement itself, not just its transition. */
  .services .icon-box:hover,
  .pillar:hover {
    transform: none;
  }
}