/* ============================================================================
   CreatVolt — Piku "Home 5 / Project Management" visual system
   ----------------------------------------------------------------------------
   This stylesheet is loaded LAST in layouts/app.blade.php, so it layers on top
   of main.css / custom.css / color.php. It ports the Piku Home 5 design
   language (typography, button geometry, section spacing, cards, accordion,
   pricing, header/footer) onto CreatVolt's existing markup WITHOUT changing
   any routes, backend logic, data or component structure.

   Reference source (exact values extracted from):
     piku/public/assets/scss/style.scss  -> compiled piku/public/assets/css/style.css
     piku/src/components/homes/home-5/*   (component structure)
     piku/public/assets/fonts/gordita/*   (primary font, copied into this theme)

   CreatVolt stays dark-themed; Home 5's dark hero (#171417) and dark CTA
   sections map naturally onto CreatVolt's existing dark aesthetic. The
   CreatVolt brand accent (hsl(var(--base)) from color.php) is preserved and
   used wherever Home 5 used its yellow accent, so the result reads as
   "CreatVolt built on the Home 5 system" rather than a Piku clone.
   ============================================================================ */

/* -------------------------------------------------------------------------- */
/* 1. GORDITA — Home 5 primary font (self-hosted, copied from Piku)           */
/* -------------------------------------------------------------------------- */
@font-face {
    font-family: "Gordita";
    src: url("../fonts/gordita/Gordita-Light.woff2") format("woff2"),
         url("../fonts/gordita/Gordita-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Gordita";
    src: url("../fonts/gordita/Gordita-Regular.woff2") format("woff2"),
         url("../fonts/gordita/Gordita-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Gordita";
    src: url("../fonts/gordita/Gordita-Medium.woff2") format("woff2"),
         url("../fonts/gordita/Gordita-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Gordita";
    src: url("../fonts/gordita/Gordita-Bold.woff2") format("woff2"),
         url("../fonts/gordita/Gordita-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Gordita";
    src: url("../fonts/gordita/Gordita-Black.woff2") format("woff2"),
         url("../fonts/gordita/Gordita-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Manrope — Home 5 secondary/body-accent font (Google Fonts, same as Piku) */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

/* -------------------------------------------------------------------------- */
/* 2. CREATVOLT DESIGN TOKENS — populated from Home 5's exact source values   */
/* -------------------------------------------------------------------------- */
:root {
    /* Fonts (Home 5: Gordita primary, Manrope secondary) */
    --cv-font-primary: "Gordita", sans-serif;
    --cv-font-secondary: "Manrope", sans-serif;

    /* Type scale — exact Home 5 desktop values (style.css) */
    --cv-font-size-hero: 96px;      /* Home 5 hero 180px scaled for CreatVolt dark layout + long product copy */
    --cv-font-size-h1: 78px;        /* .title-four h2 = 78px */
    --cv-font-size-h2: 58px;        /* feature-block h3 = 58px / title scale */
    --cv-font-size-h3: 36px;        /* pricing plane-name 36px */
    --cv-font-size-h4: 32px;        /* base h4 = 32px */
    --cv-font-size-h5: 24px;        /* base h5 = 24px */
    --cv-font-size-lead: 28px;      /* hero supporting .fs-28 = 28px */
    --cv-font-size-body: 18px;      /* base body = 18px */
    --cv-font-size-label: 18px;     /* badge-tag / uppercase label 18px */
    --cv-font-size-nav: 18px;       /* nav links (tightened from Home 5 22px for CreatVolt menu) */
    --cv-font-size-btn: 18px;       /* buttons 18-20px */

    /* Line heights — Home 5 */
    --cv-lh-hero: 0.92;             /* hero-heading 0.84em (relaxed slightly for multi-word CreatVolt headline) */
    --cv-lh-heading: 1.1;           /* .title-four 1.1025em */
    --cv-lh-body: 1.777;            /* base p line-height */

    /* Letter spacing — Home 5 */
    --cv-ls-heading: -1.5px;        /* title-four -2px (eased) */
    --cv-ls-btn: -0.5px;            /* btn-thirteen -0.5px */

    /* Home 5 accent palette (exact) */
    --cv-accent-yellow: #FFD542;    /* btn-thirteen bg */
    --cv-accent-pink: #F51AC5;      /* hover / title-eight span */
    --cv-accent-purple: #8A42FF;    /* btn-eleven hover / link hover */
    --cv-ink: #171417;              /* hero-banner-five / feedback bg */

    /* Border radii — Home 5 (pill buttons 30px, cards ~20-40px) */
    --cv-radius-pill: 30px;
    --cv-radius-lg: 40px;           /* feedback-block 40px */
    --cv-radius-md: 20px;           /* card radius */
    --cv-radius-sm: 10px;

    /* Spacing — Home 5 section rhythm */
    --cv-space-section: 150px;      /* mt-150 standard section gap */
    --cv-space-section-lg: 80px;    /* lg-mt-80 */
    --cv-space-block: 130px;        /* pt-130 block feature */

    /* Containers — Bootstrap default used by Piku + CreatVolt */
    --cv-container-max: 1320px;     /* xxl container */
    --cv-gutter: 12px;

    /* Compose brand tokens from the hue vars that main.css OR error.php provide.
       These formulas match main.css exactly, so re-declaring them is a no-op on
       normal pages but lets the error pages (which load error.php for the hue
       but not main.css) still resolve --base / --btn-color / --white. */
    --base: var(--base-h) var(--base-s) var(--base-l);
    --btn-color: 102 81% 4%;
    --white: 0 0% 100%;
}

/* -------------------------------------------------------------------------- */
/* 3. BASE TYPOGRAPHY — swap CreatVolt (Outfit/Lexend) to Home 5 (Gordita)    */
/* -------------------------------------------------------------------------- */
body {
    font-family: var(--cv-font-primary);
    font-weight: 400;
    font-size: var(--cv-font-size-body);
    line-height: var(--cv-lh-body);
    letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--cv-font-primary);
    font-weight: 700;
    letter-spacing: var(--cv-ls-heading);
    line-height: var(--cv-lh-heading);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

h1, .h1 { font-size: var(--cv-font-size-h1); }
h2, .h2 { font-size: var(--cv-font-size-h2); }
h3, .h3 { font-size: var(--cv-font-size-h3); letter-spacing: -1px; }
h4, .h4 { font-size: var(--cv-font-size-h4); letter-spacing: -0.5px; line-height: 1.25; }
h5, .h5 { font-size: var(--cv-font-size-h5); letter-spacing: -0.3px; line-height: 1.3; }
h6, .h6 { font-size: 22px; letter-spacing: 0; }

p { line-height: var(--cv-lh-body); }

/* Manrope accents used by Home 5 lead paragraphs */
.cv-font-secondary,
.hero__title p,
.subscribe-content__text { font-family: var(--cv-font-secondary); }

/* -------------------------------------------------------------------------- */
/* 4. BUTTONS — Home 5 pill geometry (btn-thirteen / btn-eleven / btn-fifteen)*/
/* -------------------------------------------------------------------------- */
.btn {
    font-family: var(--cv-font-primary);
    font-weight: 500;
    font-size: var(--cv-font-size-btn);
    letter-spacing: var(--cv-ls-btn);
    padding: 0 40px;
    line-height: 58px;
    border-radius: var(--cv-radius-pill);   /* Home 5 pill 30px */
    text-transform: none;
    gap: 10px;
}

/* Primary — Home 5 "btn-thirteen" shape; uses CreatVolt brand accent fill */
.btn--base {
    background-color: hsl(var(--base)) !important;
    color: hsl(var(--btn-color)) !important;
    border: 1px solid transparent !important;
    border-radius: var(--cv-radius-pill);
}
.btn--base:hover,
.btn--base:focus,
.btn--base:focus-visible {
    background-color: var(--cv-accent-pink) !important;  /* Home 5 pink hover */
    border-color: var(--cv-accent-pink) !important;
    color: #fff !important;
}

/* Outline/secondary buttons -> Home 5 "btn-fourteen/btn-fifteen" ghost pill.
   Transparent fill + accent border; inverts to filled accent on hover. */
.btn--base.btn--outline,
.btn.btn--outline,
.btn-outline-base {
    background-color: transparent !important;
    color: hsl(var(--white)) !important;
    border: 1px solid hsl(var(--base)) !important;
    border-radius: var(--cv-radius-pill) !important;
}
.btn--base.btn--outline:hover,
.btn--base.btn--outline:focus,
.btn.btn--outline:hover,
.btn-outline-base:hover {
    background-color: hsl(var(--base)) !important;
    color: hsl(var(--btn-color)) !important;
    border-color: hsl(var(--base)) !important;
}

/* Smaller control buttons keep a softer pill but stay compact */
.btn.btn-sm,
.btn--sm { padding: 0 24px; line-height: 42px; font-size: 15px; }

/* -------------------------------------------------------------------------- */
/* 5. HEADER / NAV — Home 5 "menu-style-six" dimensions & hover               */
/* -------------------------------------------------------------------------- */
.header {
    transition: all 0.4s ease-in-out 0s;
}
.header .navbar {
    padding-top: 22px;
    padding-bottom: 22px;
}
.header.fixed-header {
    background-color: hsl(var(--section-bg) / 0.92);
    box-shadow: 0 13px 35px -12px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid hsl(var(--white) / 0.05);
}
.header .nav-menu .nav-item .nav-link,
.header .navbar-nav .nav-link {
    font-family: var(--cv-font-primary);
    font-weight: 500;
    font-size: var(--cv-font-size-nav);
    letter-spacing: -0.3px;
    transition: all 0.2s ease-in-out 0s;
}
.header .nav-item:hover .nav-link,
.header .nav-item.active .nav-link {
    color: var(--cv-accent-pink);
}
.header .top-button .btn--base {
    line-height: 48px;
    padding: 0 30px;
}

/* -------------------------------------------------------------------------- */
/* 6. HERO — Home 5 "hero-banner-five": dark stage, massive bold heading      */
/* -------------------------------------------------------------------------- */
.hero__area {
    background-color: var(--cv-ink);
    position: relative;
    overflow: hidden;
    padding-top: 200px;
    padding-bottom: 60px;
}
.hero__title {
    text-align: center;
    margin-bottom: 4rem;
}
.hero__title h1 {
    font-family: var(--cv-font-primary);
    font-weight: 700;
    font-size: var(--cv-font-size-hero);
    line-height: var(--cv-lh-hero);
    letter-spacing: -2px;
    color: hsl(var(--white));
    margin-bottom: 0;
}
.hero__title p,
.hero__title .hero__text {
    font-family: var(--cv-font-secondary);
    font-size: var(--cv-font-size-lead);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 30px;
    margin-bottom: 20px;
}
.hero__title .btn {
    margin-top: 10px;
}
/* Home 5 badge-tag eyebrow */
.hero__title .hero__eyebrow,
.hero .badge-tag {
    display: inline-block;
    font-family: var(--cv-font-secondary);
    font-size: var(--cv-font-size-label);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--cv-ink);
    background: var(--cv-accent-yellow);
    line-height: 36px;
    padding: 0 22px;
    border-radius: var(--cv-radius-pill);
    margin-bottom: 24px;
}
.hero-thumb img {
    border-radius: var(--cv-radius-md);
}

/* -------------------------------------------------------------------------- */
/* 7. SECTION HEADINGS — Home 5 "title-four": uppercase label + bold title    */
/* -------------------------------------------------------------------------- */
.section-heading { margin-bottom: 60px; }
.section-heading__subtitle {
    font-family: var(--cv-font-primary);
    font-size: var(--cv-font-size-label);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: hsl(var(--base));
    margin-bottom: 14px;
    display: inline-block;
}
.section-heading__title {
    font-family: var(--cv-font-primary);
    font-weight: 700;
    font-size: var(--cv-font-size-h1);
    line-height: var(--cv-lh-heading);
    letter-spacing: var(--cv-ls-heading);
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
}

/* Section vertical rhythm (Home 5 my-150 ~ 150px). CreatVolt uses .my-120 */
.my-120 { margin-top: 120px; margin-bottom: 120px; }

/* -------------------------------------------------------------------------- */
/* 8. CARDS / FEATURE BLOCKS — Home 5 "card-style-seven" + "feature-block"    */
/* -------------------------------------------------------------------------- */
.feature__item__list,
.tutorials__main__single,
.card.custom--card {
    border-radius: var(--cv-radius-md);
}
.tutorials__main__single .title,
.feature__item__list h5 {
    font-family: var(--cv-font-primary);
    font-weight: 700;
    letter-spacing: -0.5px;
}
.tutorials__main__single .number {
    font-family: var(--cv-font-primary);
    font-weight: 900;
}

/* -------------------------------------------------------------------------- */
/* 9. PRICING — Home 5 "pricing-section-four" card feel                       */
/* -------------------------------------------------------------------------- */
.pricing-item {
    border-radius: var(--cv-radius-md);
    padding: 2.5rem;
}
.pricing-item__amount {
    font-family: var(--cv-font-secondary);  /* Home 5 price uses Manrope */
    font-size: 64px;
    font-weight: 700;
    letter-spacing: -2px;
}
.pricing-item__amount span {
    font-family: var(--cv-font-secondary);
    font-size: 18px;
    font-weight: 500;
}
.pricing-item__title {
    font-family: var(--cv-font-primary);
    font-size: var(--cv-font-size-h3);
    font-weight: 500;
    letter-spacing: -1px;
}
.pricing-item__btn .btn {
    border-radius: var(--cv-radius-pill);
}

/* -------------------------------------------------------------------------- */
/* 10. FAQ ACCORDION — Home 5 "accordion-style-two" clean, radiused           */
/* -------------------------------------------------------------------------- */
.custom--accordion .accordion-item {
    border-radius: var(--cv-radius-md);
    overflow: hidden;
}
.custom--accordion .accordion-button {
    font-family: var(--cv-font-primary);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.3px;
}
.custom--accordion .accordion-button:not(.collapsed)::after,
.custom--accordion .accordion-button[aria-expanded=true]::after {
    color: hsl(var(--base));
}
.custom--accordion .accordion-body {
    font-size: var(--cv-font-size-body);
    line-height: 1.7;
}

/* -------------------------------------------------------------------------- */
/* 11. CTA / SUBSCRIBE — Home 5 "fancy-banner-five" dark stage                */
/* -------------------------------------------------------------------------- */
.subscribe-wrapper {
    border-radius: var(--cv-radius-lg);
    background-color: var(--cv-ink);
}
.subscribe-content__title {
    font-family: var(--cv-font-primary);
    font-weight: 700;
    font-size: var(--cv-font-size-h2);
    letter-spacing: -1px;
}
.subscribe-content__text {
    font-family: var(--cv-font-secondary);
    font-size: var(--cv-font-size-lead);
}

/* -------------------------------------------------------------------------- */
/* 12. FOOTER — Home 5 "footer-three version-two" link + social hover         */
/* -------------------------------------------------------------------------- */
.footer__area .footer__single h4 {
    font-family: var(--cv-font-primary);
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: -0.3px;
}
.footer__area .footer__single ul li a:hover,
.footer__area .footer__copyright span a:hover {
    color: var(--cv-accent-purple);
}
.footer__area .social__icon li a {
    border-radius: 50%;
    transition: all 0.3s ease-in-out 0s;
}
.footer__area .social__icon li a:hover {
    background: var(--cv-accent-purple);
    border-color: var(--cv-accent-purple);
    color: #fff;
}

/* -------------------------------------------------------------------------- */
/* 13. AUTH PAGES — Home 5 typography + pill controls (account / card)        */
/* -------------------------------------------------------------------------- */
.account-form__title,
.contact-form__title,
.verification-text {
    font-family: var(--cv-font-primary);
    font-weight: 700;
    letter-spacing: -0.5px;
}
.card.custom--card { border-radius: var(--cv-radius-md); }
.form--control,
.form-control.form--control {
    border-radius: var(--cv-radius-sm);
    font-family: var(--cv-font-primary);
}
.form--label {
    font-family: var(--cv-font-primary);
    font-weight: 500;
}

/* -------------------------------------------------------------------------- */
/* 14. AUTHENTICATED DASHBOARD — carry Home 5 font/buttons, keep density      */
/* -------------------------------------------------------------------------- */
.dashboard,
.dashboard__right,
.dashboard-body { font-family: var(--cv-font-primary); }
.dashboard .sidebar-menu-list__link,
.dashboard .sidebar-submenu-list__link,
.dashboard .user-info__name {
    font-family: var(--cv-font-primary);
    font-weight: 500;
}
.dashboard .sidebar-menu-list__link.active,
.dashboard .sidebar-menu-list__item.active > a {
    color: hsl(var(--base));
}
/* Dashboard cards adopt Home 5 radius but keep operational padding */
.dashboard .card,
.dashboard .custom--card { border-radius: var(--cv-radius-md); }
/* Dashboard buttons slightly tighter pill so dense toolbars stay usable */
.dashboard .btn { line-height: 46px; padding: 0 28px; }
.dashboard .btn.btn-sm { line-height: 38px; padding: 0 18px; font-size: 14px; }

/* -------------------------------------------------------------------------- */
/* 15. EDITOR GUARD — never let marketing geometry disturb editor controls    */
/* -------------------------------------------------------------------------- */
.video-editor, .clip-editor, .editor__area, .timeline, .video-canvas {
    font-family: var(--cv-font-primary);
}
.video-editor .btn, .clip-editor .btn, .editor__area .btn,
.timeline .btn {
    line-height: 40px;
    padding: 0 16px;
    border-radius: var(--cv-radius-sm);   /* keep compact rectangles, not marketing pills */
}

/* -------------------------------------------------------------------------- */
/* 16. RESPONSIVE — Home 5 breakpoint behaviour (1400 / 1200 / 992 / 768 /    */
/*     576 / mobile). Headings scale down, hero reflows, spacing compresses.  */
/* -------------------------------------------------------------------------- */

/* Large desktop (<= 1400px) */
@media (max-width: 1399px) {
    :root {
        --cv-font-size-hero: 84px;
        --cv-font-size-h1: 66px;
        --cv-font-size-h2: 50px;
    }
}

/* Normal desktop / small laptop (<= 1200px) */
@media (max-width: 1199px) {
    :root {
        --cv-font-size-hero: 72px;
        --cv-font-size-h1: 56px;
        --cv-font-size-h2: 44px;
        --cv-font-size-lead: 24px;
    }
    .hero__area { padding-top: 170px; }
}

/* Tablet (<= 991px) */
@media (max-width: 991px) {
    :root {
        --cv-font-size-hero: 58px;
        --cv-font-size-h1: 46px;
        --cv-font-size-h2: 38px;
        --cv-font-size-h3: 30px;
        --cv-font-size-lead: 22px;
    }
    .hero__area { padding-top: 140px; padding-bottom: 40px; }
    .hero__title { margin-bottom: 3rem; }
    .section-heading { margin-bottom: 40px; }
    .my-120 { margin-top: 80px; margin-bottom: 80px; }
    .custom--accordion .accordion-button { font-size: 18px; }
}

/* Landscape phone (<= 767px) */
@media (max-width: 767px) {
    :root {
        --cv-font-size-hero: 44px;
        --cv-font-size-h1: 38px;
        --cv-font-size-h2: 32px;
        --cv-font-size-h4: 26px;
        --cv-font-size-lead: 20px;
        --cv-font-size-nav: 18px;
    }
    .hero__title h1 { letter-spacing: -1px; line-height: 1; }
    .pricing-item__amount { font-size: 52px; }
    .btn { padding: 0 32px; line-height: 52px; }
}

/* Small phone (<= 575px) */
@media (max-width: 575px) {
    :root {
        --cv-font-size-hero: 38px;
        --cv-font-size-h1: 32px;
        --cv-font-size-h2: 28px;
        --cv-font-size-h3: 26px;
        --cv-font-size-body: 16px;
    }
    .hero__area { padding-top: 120px; }
    .section-heading { margin-bottom: 30px; }
    .hero__title .hero__eyebrow,
    .hero .badge-tag { font-size: 14px; line-height: 32px; padding: 0 18px; }
    .custom--accordion .accordion-button { font-size: 16px; line-height: 1.4; }
    .pricing-item { padding: 1.75rem; }
    .pricing-item__amount { font-size: 46px; }
}

/* Extra small (<= 390px) keeps hero readable without overflow */
@media (max-width: 390px) {
    :root {
        --cv-font-size-hero: 32px;
        --cv-font-size-h1: 26px;
        --cv-ls-heading: -0.5px;
    }
}

/* -------------------------------------------------------------------------- */
/* 17. OVERFLOW SAFETY — tightened letter-spacing + wrapping below prevents    */
/*     the big Home 5 display type from pushing horizontal scroll on phones.   */
/* -------------------------------------------------------------------------- */
html, body { overflow-x: hidden; }

.hero__title h1,
.section-heading__title,
.subscribe-content__title {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: none;
}

@media (max-width: 767px) {
    :root { --cv-ls-heading: -0.5px; }
    .hero__title h1 { letter-spacing: -0.5px; }
    .hero__area .container,
    .section-heading { padding-left: 16px; padding-right: 16px; }

    /* Keep the Home 5 display type inside the viewport on phones */
    .hero__title,
    .section-heading__title,
    .hero__title h1,
    .hero__title .hero__text { max-width: 100%; }

    /* Stacked, full-width CTAs so wide pill buttons never overflow */
    .hero__cta { flex-direction: column; align-items: stretch; width: 100%; }
    .hero__cta .btn { width: 100%; padding: 0 20px; }
}

/* ========================================================================== */
/* 18. LIGHT MARKETING SURFACE — Home 5 architecture                          */
/* ----------------------------------------------------------------------------
   Piku Home 5's public marketing design is a LIGHT page with a DARK hero and
   DARK CTA/accent blocks. The previous CreatVolt pass kept an all-dark body;
   this section re-architects the PUBLIC marketing pages to Home 5's light
   surface while leaving the authenticated dashboard/editor dark.

   Scope: `main.section__wrap` wraps only public/marketing pages (home, plan,
   contact, blog, policy, breadcrumb inner pages). The dashboard uses
   `.dashboard` and auth uses `.account`, so neither is affected here.
   ========================================================================== */
main.section__wrap {
    /* Home 5 light palette */
    --body-bg: 0 0% 100%;
    --section-bg: 0 0% 97%;
    --body-color: 240 6% 20%;     /* ~#303033 body text (Home 5 rgba(0,0,0,.7)) */
    --heading-color: 0 0% 4%;     /* near-black headings (Home 5 #000) */
    --border-color: 0 0% 0%;
    background-color: hsl(var(--body-bg));
    color: hsl(var(--body-color));
}

/* Base page canvas behind the marketing main */
body:has(main.section__wrap) {
    background-color: #fff;
}

/* Headings + body text on light surface */
main.section__wrap h1,
main.section__wrap h2,
main.section__wrap h3,
main.section__wrap h4,
main.section__wrap h5,
main.section__wrap h6,
main.section__wrap .section-heading__title {
    color: #0a0a0a;
}
main.section__wrap p,
main.section__wrap li,
main.section__wrap .feature__item__list p,
main.section__wrap .tutorials__main__single .text {
    color: rgba(0, 0, 0, 0.7);
}
main.section__wrap .section-heading__subtitle {
    color: hsl(var(--base));
}

/* Neutralize the dark decorative gradients/gears on the light surface */
main.section__wrap .body-bg,
main.section__wrap .gear__sp,
main.section__wrap .pricing__star,
main.section__wrap .tutorials__star,
main.section__wrap .faq__star { opacity: 0.04; }

/* ---- HERO stays DARK (Home 5 hero-banner-five accent block) ---- */
main.section__wrap .hero__area {
    background-color: var(--cv-ink);
    color: #fff;
}
main.section__wrap .hero__area h1 { color: #fff; }

/* ---- Feature / workflow / why-choose cards -> Home 5 light cards ---- */
main.section__wrap .feature__item__list,
main.section__wrap .tutorials__main__single,
main.section__wrap .choose-us__single,
main.section__wrap .why-choose__item,
main.section__wrap .blog-item,
main.section__wrap .card.custom--card {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.04);
}
main.section__wrap .feature__item__list h5,
main.section__wrap .tutorials__main__single .title,
main.section__wrap .blog-item__title-link,
main.section__wrap .latest-blog__title a { color: #0a0a0a; }

/* ---- Workflow big faded numbers: dark ghost on light ---- */
main.section__wrap .tutorials__main__single .number { color: rgba(0, 0, 0, 0.06); }

/* ---- PRICING cards -> Home 5 white card, teal border, dark text ---- */
main.section__wrap .pricing-item {
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.05);
}
main.section__wrap .pricing-item.pricing__active {
    border: 2px solid hsl(var(--base));
    background-image: none !important;
}
main.section__wrap .pricing-item.pricing__active .pricing-item__list ul li,
main.section__wrap .pricing-item__title,
main.section__wrap .pricing-item__amount { color: #0a0a0a; }
main.section__wrap .pricing-item__desc,
main.section__wrap .pricing-list__item { color: rgba(0, 0, 0, 0.7); }
main.section__wrap .pricing-item__topbar { border-bottom-color: rgba(0, 0, 0, 0.08); }

/* ---- FAQ accordion on light (Home 5 accordion-style-two) ---- */
main.section__wrap .custom--accordion .accordion-item {
    background: #fff;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0.09);
}
main.section__wrap .custom--accordion .accordion-button { color: #0a0a0a; }
main.section__wrap .custom--accordion .accordion-button:not(.collapsed) { color: #0a0a0a; }
main.section__wrap .custom--accordion .accordion-body { color: rgba(0, 0, 0, 0.7); }

/* ---- Counter strip keeps the brand teal accent band (Home 5 accent block) --- */
main.section__wrap .counter-section,
main.section__wrap .counter__area { color: #0a0a0a; }

/* ---- Brand logos strip on light ---- */
main.section__wrap .brand-section,
main.section__wrap .brand__area { background: transparent; }

/* ---- SUBSCRIBE / CTA stays DARK (Home 5 fancy-banner-five accent block) ---- */
main.section__wrap .subscribe-wrapper {
    background-color: var(--cv-ink);
    color: #fff;
}
main.section__wrap .subscribe-content__title,
main.section__wrap .subscribe-content__text { color: #fff; }

/* ---- Breadcrumb (inner page banners) keep dark hero feel ---- */
main.section__wrap .breadcrumb-section,
main.section__wrap .inner-hero { color: #fff; }

/* ---- FOOTER -> Home 5 light footer (footer-three version-two) ---- */
body:has(main.section__wrap) .footer__area {
    background-color: #f7f7f7;
    color: #0a0a0a;
}
body:has(main.section__wrap) .footer__area .footer__single h4,
body:has(main.section__wrap) .footer__area .footer__about p,
body:has(main.section__wrap) .footer__area .footer__single ul li a,
body:has(main.section__wrap) .footer__area .footer-contact-menu__item-content p,
body:has(main.section__wrap) .footer__area .footer__copyright span { color: #0a0a0a; }
body:has(main.section__wrap) .footer__area .footer__single ul li a:hover { color: var(--cv-accent-purple); }
body:has(main.section__wrap) .footer__area .social__icon li a {
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #0a0a0a;
}
body:has(main.section__wrap) .footer__area .social__icon li a:hover {
    background: var(--cv-accent-purple);
    border-color: var(--cv-accent-purple);
    color: #fff;
}

/* ---- Header: dark text on the light marketing pages (except over dark hero) --- */
body:has(main.section__wrap) .header:not(.fixed-header) .nav-menu .nav-item .nav-link {
    color: #fff;   /* header overlays the dark hero at top, so keep light */
}
body:has(main.section__wrap) .header.fixed-header {
    background-color: rgba(255, 255, 255, 0.95);
}
body:has(main.section__wrap) .header.fixed-header .nav-menu .nav-item .nav-link {
    color: #0a0a0a;
}
body:has(main.section__wrap) .header.fixed-header .nav-item:hover .nav-link,
body:has(main.section__wrap) .header.fixed-header .nav-item.active .nav-link {
    color: var(--cv-accent-pink);
}

/* Form controls on light marketing pages (contact form) */
main.section__wrap .form-control.form--control {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #0a0a0a;
}
main.section__wrap .form--label { color: #0a0a0a; }


/* ============================================================================
   20. GAP CLOSURE — exact Piku Home 5 section geometry, LIGHT surface
   ----------------------------------------------------------------------------
   Home 5 is a predominantly LIGHT template (body #fff) with dark accent blocks
   (hero / feedback / fancy-banner). The marketing pages are already switched to
   that light palette above (main.section__wrap). This block ports the exact
   Home 5 card geometry onto those light surfaces.
   Verbatim values from piku/public/assets/scss/style.scss:
     .pricing-section-four .pr-column   (L7484)
     .feedback-section-five .feedback-block (L8603)
     .card-style-seven                  (L6894)
     .block-feature-sixteen .list-item  (L5448)
     .faq-section-three / title-four    (L2513)
   Scoped to main.section__wrap so the dark dashboard/editor are untouched.
   ============================================================================ */

/* ---- 18.1 PRICING — Home 5 .pr-column: white card, 3px accent border,
   40px radius, Manrope price, check list, full-width pill CTA w/ arrow chip -- */
main.section__wrap .pricing-item.cv-pricing-card {
    background: #fff !important;
    background-image: none !important;
    border: 3px solid hsl(var(--base));                 /* Home 5 3px colored border */
    border-radius: var(--cv-radius-lg);                 /* 40px */
    padding: 40px 35px 45px;                            /* Home 5 pr-column padding */
    position: relative;
    z-index: 1;
    box-shadow: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
main.section__wrap .pricing-item.cv-pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
}
main.section__wrap .pricing-item.cv-pricing-card .pricing-item__topbar {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 28px;
    padding-bottom: 26px;
}
main.section__wrap .pricing-item.cv-pricing-card .pricing-item__icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: hsl(var(--base) / 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Home 5 price: Manrope, huge, tight tracking, ink colour */
main.section__wrap .pricing-item.cv-pricing-card .pricing-item__amount {
    font-family: var(--cv-font-secondary) !important;
    font-size: 72px;                                    /* Home 5 82px, eased for card width */
    font-weight: 600;
    letter-spacing: -3px;
    line-height: 1;
    color: #0a0a0a !important;
    margin-top: 10px;
}
main.section__wrap .pricing-item.cv-pricing-card .pricing-item__amount span {
    font-family: var(--cv-font-secondary);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.5px;
    color: rgba(0, 0, 0, 0.5);
}
main.section__wrap .pricing-item.cv-pricing-card .pricing-item__title {
    font-family: var(--cv-font-primary);
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -1px;
    color: #0a0a0a !important;
}
main.section__wrap .pricing-item.cv-pricing-card .pricing-item__desc {
    color: rgba(0, 0, 0, 0.6);
}
main.section__wrap .pricing-item.cv-pricing-card .pricing-list__item {
    color: rgba(0, 0, 0, 0.78);
    align-items: flex-start;
}
main.section__wrap .pricing-item.cv-pricing-card .pricing-list__item i {
    color: hsl(var(--base));
    background: hsl(var(--base) / 0.12);
    border-radius: 50%;
    flex: 0 0 auto;
}
main.section__wrap .pricing-item.cv-pricing-card .pricing-card-badge {
    color: #0a0a0a;
}
/* Home 5 btn-eleven: full-width pill CTA with circular arrow chip */
main.section__wrap .pricing-item.cv-pricing-card .pricing-item__btn .btn {
    border-radius: var(--cv-radius-pill);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 28px;
    line-height: 56px;
}
main.section__wrap .pricing-item.cv-pricing-card .pricing-item__btn .btn .icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: hsl(var(--btn-color) / 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
}

/* ---- 18.2 TESTIMONIALS — Home 5 .feedback-block: white card, 40px radius,
   italic quote, avatar + name/role, gold 5-star rating -------------------- */
main.section__wrap .testimonial__area .testimonial__slider__single.feedback-block {
    position: relative;
    text-align: left;
    border-radius: var(--cv-radius-lg);                 /* 40px */
    padding: 40px 40px 44px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}
main.section__wrap .testimonial__area .testimonial__slider__single.feedback-block::before,
main.section__wrap .testimonial__area .testimonial__slider__single.feedback-block::after {
    content: none !important;
}
main.section__wrap .testimonial__area .feedback-block .thumb {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 0 4px;
}
main.section__wrap .testimonial__area .feedback-block blockquote.desc {
    font-family: var(--cv-font-primary);
    font-size: 24px;                                    /* Home 5 32px, eased for 3-up grid */
    font-weight: 500;
    font-style: italic;
    line-height: 1.6;
    color: #0a0a0a;
    margin: 26px 0 28px;
    text-align: left;
}
main.section__wrap .testimonial__area .feedback-block__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
main.section__wrap .testimonial__area .feedback-block__person h4 {
    font-family: var(--cv-font-primary);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: #0a0a0a;
    margin: 0;
}
main.section__wrap .testimonial__area .feedback-block__person h5 {
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5);
    margin: 2px 0 0;
}
main.section__wrap .testimonial__area .feedback-block__rating {
    display: flex;
    gap: 3px;
    margin: 0;
}
main.section__wrap .testimonial__area .feedback-block__rating li i {
    font-size: 15px;
    color: #FFC736;                                     /* Home 5 star gold */
}
main.section__wrap .testimonial__area .feedback-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
}
/* Home 5 highlights the active card with a soft accent tint + border */
main.section__wrap .testimonial__area .swiper-slide-active .feedback-block {
    border-color: hsl(var(--base) / 0.6);
    box-shadow: 0 40px 90px hsl(var(--base) / 0.12);
}

/* ---- 18.3 WHY-CHOOSE — Home 5 .card-style-seven: centered, icon, bottom dot - */
main.section__wrap .choose-us-section .choose-item.cv-card-seven {
    text-align: center;
    border-radius: var(--cv-radius-md);
    padding: 48px 28px 44px;
    position: relative;
}
main.section__wrap .choose-us-section .choose-item.cv-card-seven::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: hsl(var(--base));                        /* Home 5 bottom dot (accent) */
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    opacity: 1;
}
main.section__wrap .choose-us-section .choose-item.cv-card-seven .choose-item__icon {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
main.section__wrap .choose-us-section .choose-item.cv-card-seven .choose-item__title {
    font-family: var(--cv-font-primary);
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* ---- 18.4 FEATURE LIST — Home 5 .block-feature-sixteen .list-item --------- */
main.section__wrap .feature__item__list.cv-feature-block {
    border-radius: var(--cv-radius-md);
    padding: 22px 24px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.03);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
main.section__wrap .feature__item__list.cv-feature-block::after { content: none !important; }
main.section__wrap .feature__item__list.cv-feature-block:hover {
    border-color: hsl(var(--base) / 0.45);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.06);
}
main.section__wrap .feature__item__list.cv-feature-block h5 {
    font-family: var(--cv-font-primary);
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    color: #0a0a0a;
}

/* ---- 18.5 BRAND MARQUEE — Home 5 .client-logo-wrapper: bordered, greyscale -- */
main.section__wrap .brand__area {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 70px;
}
main.section__wrap .brand__area .brand__slider__single img {
    opacity: 0.55;
    filter: grayscale(1);
    transition: opacity 0.3s ease, filter 0.3s ease;
}
main.section__wrap .brand__area .brand__slider__single:hover img {
    opacity: 1;
    filter: grayscale(0);
}

/* ---- 18.6 FAQ TWO-COLUMN — Home 5 .faq-section-three (left title+CTA) ----- */
main.section__wrap .faq__area .faq__heading {
    margin-bottom: 32px;
    text-align: left;
}
main.section__wrap .faq__area .faq__heading .section-heading__title {
    margin-left: 0;
    text-align: left;
    max-width: none;
}
main.section__wrap .faq__area .faq__cta { margin-top: 8px; }
main.section__wrap .faq__area .faq__accordion .accordion-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    box-shadow: none;
}
main.section__wrap .faq__area .faq__accordion .accordion-item:last-child { border-bottom: none; }
main.section__wrap .faq__area .faq__accordion .accordion-button {
    font-family: var(--cv-font-primary);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.3px;
    padding: 28px 0;
    background: transparent;
    color: #0a0a0a;
}
main.section__wrap .faq__area .faq__accordion .accordion-body {
    padding: 0 30px 28px 0;
    color: rgba(0, 0, 0, 0.7);
}

/* ---- 18.7 RESPONSIVE — mirror Home 5 responsive.css for the new blocks ---- */
@media (max-width: 1199px) {
    main.section__wrap .pricing-item.cv-pricing-card .pricing-item__amount { font-size: 56px; }
    main.section__wrap .testimonial__area .feedback-block blockquote.desc { font-size: 22px; }
}
@media (max-width: 991px) {
    main.section__wrap .pricing-item.cv-pricing-card { padding: 32px 24px 36px; border-radius: var(--cv-radius-md); }
    main.section__wrap .testimonial__area .testimonial__slider__single.feedback-block { padding: 28px 26px 32px; border-radius: var(--cv-radius-md); }
    main.section__wrap .faq__area .faq__accordion .accordion-button { font-size: 18px; padding: 22px 0; }
}
@media (max-width: 767px) {
    main.section__wrap .pricing-item.cv-pricing-card .pricing-item__amount { font-size: 48px; }
    main.section__wrap .testimonial__area .feedback-block blockquote.desc { font-size: 20px; margin: 20px 0 22px; }
}
@media (max-width: 575px) {
    main.section__wrap .pricing-item.cv-pricing-card { padding: 28px 20px 30px; }
    main.section__wrap .pricing-item.cv-pricing-card .pricing-item__amount { font-size: 42px; letter-spacing: -2px; }
    main.section__wrap .choose-us-section .choose-item.cv-card-seven { padding: 36px 20px 34px; }
}


/* ---- 18.8 OUTLINE BUTTONS on the LIGHT marketing surface ------------------
   The global ghost pill uses white text (correct over the dark hero). On the
   light Home 5 body it must use ink text; it still inverts to the filled
   accent on hover. The dark hero keeps its white-text outline button. -------- */
main.section__wrap .btn--base.btn--outline,
main.section__wrap .btn.btn--outline,
main.section__wrap .btn-outline-base {
    color: #0a0a0a !important;
    border-color: hsl(var(--base)) !important;
}
main.section__wrap .btn--base.btn--outline:hover,
main.section__wrap .btn--base.btn--outline:focus,
main.section__wrap .btn.btn--outline:hover,
main.section__wrap .btn-outline-base:hover {
    color: hsl(var(--btn-color)) !important;
    background-color: hsl(var(--base)) !important;
}
/* Keep the hero's outline CTA white (it sits on the dark hero stage) */
main.section__wrap .hero__area .btn--base.btn--outline,
main.section__wrap .hero__area .btn.btn--outline {
    color: #fff !important;
}
main.section__wrap .hero__area .btn--base.btn--outline:hover,
main.section__wrap .hero__area .btn.btn--outline:hover {
    color: hsl(var(--btn-color)) !important;
    background-color: hsl(var(--base)) !important;
}
/* FAQ "Contact us" CTA: ensure the label is always visible */
main.section__wrap .faq__area .faq__cta { color: #0a0a0a !important; }
main.section__wrap .faq__area .faq__cta:hover { color: hsl(var(--btn-color)) !important; }


/* ============================================================================
   19. INNER-PAGE FIDELITY — pricing-v1 / faq-v2 / contact-v2 / blog-v2
   ----------------------------------------------------------------------------
   Home 5 header + footer stay global (handled above). Only the BODY sections
   of these pages are re-skinned to their exact Piku inner-template sources.
   Exact values from piku/public/assets/scss/style.scss:
     faq-v2  -> .accordion-style-two (L6410) + .title-two (L2475)
     contact-v2 -> .card-style-sixteen (L7082) + .form-style-two (L9602) + .btn-three (L2723)
     blog-v2 -> .blog-meta-two (L9097) + .pagination-one (L6679)
     pricing-v1 -> .pricing-section-six .pr-column (L7631) + .price-compare-table (L7824)
   All colour values re-toned to the CreatVolt light surface + brand accent.
   ============================================================================ */

/* ---- 19.0 BREADCRUMB / INNER HERO — clean dark band, white centered title.
   Removes the legacy dark-photo-on-dark-text ViserShort banner; keeps content. */
main.section__wrap .breadcrumb {
    background-image: none !important;
    background-color: var(--cv-ink) !important;   /* Home 5 dark accent stage */
}
main.section__wrap .breadcrumb::before,
main.section__wrap .breadcrumb::after { background: transparent !important; opacity: 1 !important; }
main.section__wrap .breadcrumb .breadcrumb__wrapper { text-align: center; }
main.section__wrap .breadcrumb h2,
main.section__wrap .breadcrumb .breadcrumb__title {
    color: #fff !important;                        /* override the light-palette dark heading */
    font-family: var(--cv-font-primary);
    font-weight: 700;
    letter-spacing: var(--cv-ls-heading);
}

/* ---- 19.1 CONTACT (contact-v2): white info cards (card-style-sixteen tone),
   dark legible text, form-style-two inputs, btn-three submit ---------------- */
main.section__wrap .contact-item {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--cv-radius-md);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.04);
    padding: 32px 28px;
}
main.section__wrap .contact-item::before { content: none !important; }
main.section__wrap .contact-item__icon {
    background: hsl(var(--base) / 0.12) !important;
    color: hsl(var(--base)) !important;
    border-radius: 16px;
}
main.section__wrap .contact-item__title { color: #0a0a0a !important; }
main.section__wrap .contact-item__desc,
main.section__wrap .contact-item__desc .link {
    color: rgba(0, 0, 0, 0.7) !important;          /* FIX: email/phone were white-on-white */
    font-size: 18px;
}
main.section__wrap .contact-item__desc .link:hover { color: hsl(var(--base)) !important; }

/* contact form panel + form-style-two inputs (#F2F2F2 fill, 10px radius, 70px) */
main.section__wrap .contact-bottom .contact-form {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--cv-radius-md);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.04);
}
main.section__wrap .contact-form__title { color: #0a0a0a !important; }
main.section__wrap .contact-form .form--label { color: #0a0a0a !important; font-weight: 500; }
main.section__wrap .contact-form .form-control.form--control {
    background: #F2F2F2 !important;                /* form-style-two fill */
    border: 1px solid transparent !important;
    border-radius: var(--cv-radius-sm) !important; /* 10px */
    color: #0a0a0a !important;
    min-height: 58px;
    padding: 0 20px;
}
main.section__wrap .contact-form textarea.form-control.form--control {
    min-height: 160px;
    padding: 15px 20px;
}
main.section__wrap .contact-form .form-control.form--control::placeholder { color: rgba(0, 0, 0, 0.45); }
main.section__wrap .contact-form .form-control.form--control:focus {
    border-color: hsl(var(--base)) !important;
    background: #fff !important;
}
main.section__wrap .contact-bottom__map iframe {
    border-radius: var(--cv-radius-md);
    min-height: 450px;
}

/* ---- 19.2 BLOG LISTING (blog-v2 = blog-meta-two): rounded image w/ date
   badge, Manrope title, round arrow btn, hover underline -------------------- */
main.section__wrap .blog__area .blog-item {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--cv-radius-md);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
main.section__wrap .blog__area .blog-item::after { content: none !important; }
main.section__wrap .blog__area .blog-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
}
main.section__wrap .blog-item__thumb { border-radius: 0; }
/* blog-meta-two date pill: white chip on image */
main.section__wrap .blog-item__date {
    background: #fff !important;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
main.section__wrap .blog-item__date .date-time,
main.section__wrap .blog-item__date .month { color: #0a0a0a !important; }
main.section__wrap .blog-item__title-link {
    font-family: var(--cv-font-primary);
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #0a0a0a !important;
}
main.section__wrap .blog-item__title-link:hover { color: hsl(var(--base)) !important; text-decoration: underline; }
main.section__wrap .blog-item__desc { color: rgba(0, 0, 0, 0.7) !important; }
main.section__wrap .blog-item__btn {
    font-family: var(--cv-font-primary);
    font-weight: 500;
    color: hsl(var(--base)) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
main.section__wrap .blog-item__btn:hover { color: var(--cv-accent-pink) !important; }
/* pagination-one: circular items, dark active */
main.section__wrap .pagination .page-link,
main.section__wrap .pagination li a {
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #0a0a0a;
    font-weight: 500;
}
main.section__wrap .pagination .active .page-link,
main.section__wrap .pagination li a:hover {
    background: hsl(var(--base)) !important;
    border-color: hsl(var(--base)) !important;
    color: hsl(var(--btn-color)) !important;
}

/* ---- 19.3 BLOG DETAIL (blog-v2 language): light content + sidebar --------- */
main.section__wrap .blog-detials .blog-details,
main.section__wrap .blog-detials .blog-sidebar .sidebar-item {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--cv-radius-md);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.04);
}
main.section__wrap .blog-details__title,
main.section__wrap .blog-details__content h4,
main.section__wrap .blog-detials .sidebar-item__title {
    color: #0a0a0a !important;
    font-family: var(--cv-font-primary);
    font-weight: 700;
    letter-spacing: -0.5px;
}
main.section__wrap .blog-detials .content-item__desc,
main.section__wrap .blog-detials p { color: rgba(0, 0, 0, 0.72) !important; }
main.section__wrap .blog-detials .latest-blog__title a { color: #0a0a0a !important; }
main.section__wrap .blog-detials .latest-blog__title a:hover { color: hsl(var(--base)) !important; }
main.section__wrap .blog-item__date {
    overflow: hidden;
}

/* ---- 19.4 FAQ (faq-v2 = accordion-style-two) exact values ----------------- */
main.section__wrap .faq__area .custom--accordion,
main.section__wrap .faq__accordion {
    /* keep transparent two-column Home-5 layout; items are divided rows */
}
main.section__wrap .faq__area .custom--accordion .accordion-button,
main.section__wrap .faq__accordion .accordion-button {
    font-size: 26px;                               /* accordion-style-two exact */
    font-weight: 500;
    line-height: 1.35em;
    padding: 36px 0;
    color: #0a0a0a;
}
main.section__wrap .faq__area .custom--accordion .accordion-body,
main.section__wrap .faq__accordion .accordion-body { font-size: 20px; }

/* ---- 19.5 PRICING page (pricing-v1): page pricing reuses cv-pricing-card.
   Ensure the standalone /plan page cards get the same treatment as home. ---- */
main.section__wrap .pricing__area .pricing-item {
    /* standalone plan page cards already carry .cv-pricing-card via partial */
}

/* ---- 19.6 RESPONSIVE for inner blocks (mirror Piku responsive.css) -------- */
@media (max-width: 1199px) {
    main.section__wrap .faq__area .custom--accordion .accordion-button,
    main.section__wrap .faq__accordion .accordion-button { font-size: 22px; padding: 30px 0; }
    main.section__wrap .blog-item__title-link { font-size: 22px; }
}
@media (max-width: 991px) {
    main.section__wrap .breadcrumb { padding-top: 120px; padding-bottom: 60px; }
    main.section__wrap .contact-item { padding: 24px 20px; }
}
@media (max-width: 575px) {
    main.section__wrap .faq__area .custom--accordion .accordion-button,
    main.section__wrap .faq__accordion .accordion-button { font-size: 18px; padding: 22px 0; line-height: 1.4; }
    main.section__wrap .contact-form .form-control.form--control { min-height: 52px; }
}


/* ============================================================================
   20. STRUCTURAL REBUILD — Home 5 workflow + feature blocks
   ----------------------------------------------------------------------------
   The old ViserShort "How It Works" rendered as a circular arc of cards with
   connector shapes. Home 5 / Project Management uses a flat row of numbered
   step cards. The Blade markup for how_it_work was rebuilt to a 4-up grid;
   this CSS kills the legacy arc/connectors and styles the new .cv-step-card
   to the Home 5 card language (light surface, soft-square icon, ghost number).
   ============================================================================ */

/* ---- 20.1 Kill legacy circular workflow decorations ---------------------- */
main.section__wrap .tutorials__area .tutorials__shape,
main.section__wrap .tutorials__area .shape-two,
main.section__wrap .tutorials__area .tutorials__sp,
main.section__wrap .tutorials__area .tutorials__star,
main.section__wrap .tutorials__main__single::after,
main.section__wrap .tutorials__main__single::before { display: none !important; content: none !important; }

/* ---- 20.2 Home 5 numbered step card (card-style-seven-adjacent) ---------- */
main.section__wrap .cv-workflow .tutorials__main__single.cv-step-card {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--cv-radius-md);            /* 20px */
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.04);
    padding: 40px 32px 44px !important;
    text-align: left;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
main.section__wrap .cv-workflow .tutorials__main__single.cv-step-card:hover {
    transform: translateY(-6px);
    border-color: hsl(var(--base) / 0.45);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
}
/* soft-square accent icon chip (Home 5 feature-card icon) */
main.section__wrap .cv-workflow .cv-step-card .icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: hsl(var(--base) / 0.12);
    color: hsl(var(--base));
    font-size: 28px;
    margin: 0 0 26px;
}
main.section__wrap .cv-workflow .cv-step-card .icon i { line-height: 1; }
main.section__wrap .cv-workflow .cv-step-card .title {
    font-family: var(--cv-font-primary);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.5px;
    color: #0a0a0a;
    margin: 0 0 10px;
}
main.section__wrap .cv-workflow .cv-step-card .text {
    color: rgba(0, 0, 0, 0.65);
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}
/* big ghost step number, bottom-right (Home 5 workflow numeral) */
main.section__wrap .cv-workflow .cv-step-card .number {
    position: absolute;
    right: 24px;
    bottom: 4px;
    margin: 0;
    font-family: var(--cv-font-secondary);
    font-weight: 700;
    font-size: 72px;
    line-height: 1;
    letter-spacing: -2px;
    color: hsl(var(--base) / 0.12);
    pointer-events: none;
}

/* ---- 20.3 Responsive: 4-up -> 2-up -> 1-up (Home 5 stacking) ------------- */
@media (max-width: 991px) {
    main.section__wrap .cv-workflow .tutorials__main__single.cv-step-card { padding: 32px 26px 36px !important; }
    main.section__wrap .cv-workflow .cv-step-card .number { font-size: 60px; }
}
@media (max-width: 575px) {
    main.section__wrap .cv-workflow .cv-step-card .title { font-size: 22px; }
    main.section__wrap .cv-workflow .cv-step-card .icon { width: 56px; height: 56px; font-size: 24px; margin-bottom: 20px; }
}


/* ============================================================================
   21. FEATURES REBUILD — Home 5 BLockFeature (card-style-seven icon cards)
   ----------------------------------------------------------------------------
   The old ViserShort feature section was a two-column copy + framed-image panel.
   Home 5 / Project Management opens its feature block with a row of centered
   icon cards. The Blade markup was rebuilt to a 3-up card row; this styles the
   new .cv-feature-card to the Home 5 card language. CreatVolt titles/descriptions
   are preserved verbatim; icons are decorative (data has no icon field).
   ============================================================================ */
main.section__wrap .cv-blockfeature .cv-feature-card {
    text-align: center;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--cv-radius-md);            /* 20px */
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.04);
    padding: 48px 32px 44px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
main.section__wrap .cv-blockfeature .cv-feature-card:hover {
    transform: translateY(-6px);
    border-color: hsl(var(--base) / 0.45);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
}
/* Home 5 bottom-center accent dot (card-style-seven signature) */
main.section__wrap .cv-blockfeature .cv-feature-card::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: hsl(var(--base));
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
main.section__wrap .cv-blockfeature .cv-feature-card__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: hsl(var(--base) / 0.12);
    color: hsl(var(--base));
    font-size: 34px;
}
main.section__wrap .cv-blockfeature .cv-feature-card__icon i { line-height: 1; }
main.section__wrap .cv-blockfeature .cv-feature-card__title {
    font-family: var(--cv-font-primary);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.5px;
    color: #0a0a0a;
    margin: 0 0 12px;
}
main.section__wrap .cv-blockfeature .cv-feature-card__text {
    color: rgba(0, 0, 0, 0.65);
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}
/* Retire any leftover old feature panel decorations if present */
main.section__wrap .cv-blockfeature .feature__one__sp,
main.section__wrap .cv-blockfeature .feature__cut,
main.section__wrap .cv-blockfeature .feature__list { display: none !important; }

@media (max-width: 575px) {
    main.section__wrap .cv-blockfeature .cv-feature-card { padding: 36px 22px 32px; }
    main.section__wrap .cv-blockfeature .cv-feature-card__icon { width: 60px; height: 60px; font-size: 28px; margin-bottom: 20px; }
    main.section__wrap .cv-blockfeature .cv-feature-card__title { font-size: 22px; }
}