/* =========================================================
   SCHOOL ERP — DESIGN SYSTEM
   Identity: bright, friendly and modern. Pure white surfaces
   with a confident pink brand color driving buttons, links,
   headings and accents; a wax-seal trust stamp as the
   signature mark.
   ========================================================= */

:root {
    --ink: #F50CA0;
    --ink-2: #C8007F;
    --ink-soft: #FF4FC0;
    --gold: #F50CA0;
    --gold-dark: #C8007F;
    --green: #2F8F5B;
    --red: #C4443C;
    --paper: #FFF;
    --white: #FFF;
    --text: #3A0A24;
    --muted: #8E5772;
    --line: #F6D3E4;
    --line-soft: #FCE7F0;

    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 28px;

    --shadow-sm: 0 2px 10px rgba(245, 12, 160, .08);
    --shadow: 0 18px 40px rgba(245, 12, 160, .10);
    --shadow-lg: 0 30px 70px rgba(245, 12, 160, .16);

    --font-display: 'Sora', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

/* ===== AOS FAIL-SAFE =====
   AOS's own CSS sets [data-aos] elements to opacity:0 the instant the
   page renders, and only reveals them once aos.js loads AND AOS.init()
   runs AND the element scrolls into view. On slow connections that gap
   can last seconds, showing up as blank white space where the hero
   text/eyebrow/counters should be. Forcing full visibility here removes
   the fade-in effect but guarantees content is never invisible,
   regardless of connection speed or whether AOS loads at all. */
[data-aos] {
    opacity: 1 !important;
    transform: none !important;
}

/* ===== RESET & BASE ===== */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--paper);
    line-height: 1.7;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
    padding-top: 78px; /* fallback matching .navbar's rendered height, so content isn't hidden under the fixed navbar before script.js measures the exact value */
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
}

a {
    text-decoration: none;
    color: var(--ink);
}

img {
    max-width: 100%;
    height: auto;
}

/* Global overflow guard: nothing should ever create a horizontal scrollbar on mobile */
.container,
.container-fluid,
section,
.row {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    color: var(--ink);
    letter-spacing: -0.01em;
}

section {
    padding: clamp(56px, 8vw, 100px) 0;
}

.container {
    max-width: 1220px;
}

::selection {
    background: var(--gold);
    color: #fff;
}

/* Focus visibility for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== EYEBROW / LABEL ===== */
.eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 6px;
    gap: 8px;
    max-width: 100%;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-dark);
    text-align: center;
}

.eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    background: var(--gold);
    display: inline-block;
    flex-shrink: 0;
}

@media (max-width: 420px) {
    .eyebrow {
        flex-direction: column;
        row-gap: 4px;
        margin-bottom: 0.6rem !important;
    }
}

/* AFTER — keeps everything on one line, no stray gap */
@media (max-width: 420px) {
    .eyebrow {
        margin-bottom: 0.6rem !important;
    }
    .eyebrow::before {
        display: none; /* dash isn't worth the space on very narrow phones */
    }
}


.bg-primary .eyebrow {
    color: #fff;
}

.bg-primary .eyebrow::before {
    background: #fff;
}

/* ===== NAVBAR ===== */
.navbar {
    background: var(--gold);
    backdrop-filter: blur(14px);
    border-bottom: none;
    padding: 14px 0;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
    transition: padding 0.25s ease, box-shadow 0.25s ease;
}

.navbar.scrolled {
    padding: 8px 0;
    box-shadow: 0 8px 30px rgba(245, 12, 160, .12);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: white !important;
}

.brand-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    line-height: 0;
    flex-shrink: 0;
}

.brand-icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    display: block;
}

.brand-text {
    display: inline;
}

.navbar-toggler {
    border: none;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-shadow: none !important;
    transition: background-color 0.2s ease;
}

.navbar-toggler:hover,
.navbar-toggler:active {
    background-color: rgba(255, 255, 255, .15);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
}

/* Mobile dropdown menu: guaranteed to work even if the Bootstrap CSS bundle
   hasn't finished loading yet — .navbar-collapse is hidden by default here,
   and .show reveals it. This mirrors Bootstrap's own behavior but doesn't
   depend on it, so the toggle is reliable on slow connections. */
@media (max-width: 991.98px) {
    .navbar-collapse {
        display: none;
    }

    .navbar-collapse.show {
        display: block;
        animation: fade-up 0.2s ease-out;
    }
}

.navbar-nav {
    align-items: center;
}

.navbar-nav .nav-link {
    font-size: 0.92rem;
    font-weight: 500;
    color: white !important;
    opacity: .8;
    padding: 8px 14px !important;
    border-radius: 8px;
    position: relative;
    transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #F50CA0 !important;
    opacity: 1;
    background: white;
}

.navbar-nav .nav-link.active {
    background: white;
}

.navbar-nav .btn-primary {
    background: #F50CA0;
    border-color: var(--ink);
    color: white;
}

.navbar-nav .btn-primary1 {
    background: white;
    border-color: var(--ink);
    color: #F50CA0;
}

.navbar-nav .btn-primary:hover {
    background: var(--ink-2);
    border-color: var(--ink-2);
    color: #fff;
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--line);
        max-height: calc(100vh - 90px);
        overflow-y: auto;
    }

    .navbar-nav {
        align-items: stretch;
        gap: 2px;
    }

    .navbar-nav .nav-link {
        padding: 14px 12px !important;
        min-height: 44px;
        display: flex;
        align-items: center;
        border-radius: 10px;
    }

    .navbar-nav .nav-item .btn {
        margin-top: 10px;
        width: 100%;
        text-align: center;
    }
}

/* ===== BUTTONS ===== */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: 12px;
    padding: 12px 26px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn-lg {
    padding: 14px 32px;
}

.btn-primary {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--ink-2);
    border-color: var(--ink-2);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(245, 12, 160, .28);
}

.btn-outline-primary {
    color: var(--ink);
    border: 1.5px solid var(--ink);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--ink);
    color: #fff;
}

.btn-outline-light {
    border: 1.5px solid rgba(255, 255, 255, .55);
    color: #fff;
}

.btn-outline-light:hover {
    background: #fff;
    color: var(--ink);
    border-color: #fff;
}

.btn-light {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
    font-weight: 700;
}

.btn-light:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    color: #fff;
    transform: translateY(-2px);
}

.btn-hover:hover {
    transform: translateY(-2px);
}

.z-2 {
    position: relative;
    z-index: 2;
}

/* ===== HERO ===== */
.hero {
    padding-top: 40px;
    padding-bottom: 70px;
    background: #fff;
    color: var(--text);
    position: relative;
    overflow: hidden;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 88% 8%, rgba(245, 12, 160, .12), transparent 42%);
    pointer-events: none;
}

.hero-title {
    color: var(--ink);
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: 700;
    line-height: 1.16;
}

.hero-subtitle {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: var(--muted);
    max-width: 620px;
}

.hero .badge {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    background: var(--line-soft) !important;
    color: var(--gold-dark) !important;
    border: 1px solid var(--line);
}

.hero-card {
    background: var(--white);
    border: 2px solid var(--gold);
    box-shadow: var(--shadow-lg);
    position: relative;
}

/* Signature: wax-seal trust stamp */
.trust-stamp {
    position: absolute;
    top: -22px;
    right: -14px;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: rotate(-9deg);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
    border: 3px dashed rgba(245, 12, 160, .35);
    z-index: 3;
    font-family: var(--font-mono);
}

.trust-stamp strong {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 800;
}

.trust-stamp span {
    font-size: 0.56rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 2px;
}

@media (max-width: 767.98px) {
    .trust-stamp {
        width: 84px;
        height: 84px;
        top: -14px;
        right: -8px;
    }

    .trust-stamp strong {
        font-size: 1.1rem;
    }

    .trust-stamp span {
        font-size: 0.62rem;
        letter-spacing: 0.02em;
    }
}

/* Trust row: avatar stack + rating */
.avatar-stack {
    display: flex;
}

.avatar-stack img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid var(--ink);
    margin-left: -12px;
}

.avatar-stack img:first-child {
    margin-left: 0;
}

@media (max-width: 991.98px) {
    .trust-row {
        justify-content: center;
    }
}

/* Scroll cue */
.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    color: var(--muted);
    font-size: 1.1rem;
    animation: float 2.2s ease-in-out infinite;
    z-index: 2;
}

@media (max-width: 767.98px) {
    .scroll-cue {
        display: none;
    }
}

/* ===== COUNTER / STATS ===== */
.counter-box {
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    padding: 22px 10px;
    border-radius: var(--radius-sm);
    text-align: center;
    height: 100%;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}

.counter-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.counter-box .number {
    font-family: var(--font-mono);
    font-size: clamp(1.3rem, 2vw, 1.9rem);
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
    white-space: nowrap;
}

.counter-box .small {
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 6px;
    display: block;
}

/* Stats strip above footer (light section) */
.stats-strip {
    background: var(--white);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.stat-num {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--ink);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
}

/* ===== SECTION TITLE ===== */
.section-title {
    margin-bottom: clamp(32px, 5vw, 56px);
}

.section-title h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    font-weight: 700;
    margin-top: 10px;
}

.section-title p {
    color: var(--muted);
    max-width: 640px;
    margin: 14px auto 0;
    font-size: 1.05rem;
}

.section-title.text-center .eyebrow {
    justify-content: center;
}

/* ===== CARDS (shared) ===== */
.benefit-card,
.feature-card,
.module-card,
.pricing-card,
.testimonial-card,
.blog-card,
.faq-item,
.contact-card {
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.gallery-card .feature-card {
    background: var(--white);
    border: 2px solid var(--gold);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.benefit-card,
.feature-card,
.module-card {
    padding: 30px 26px;
}

.benefit-card:hover,
.feature-card:hover,
.module-card:hover,
.pricing-card:hover,
.testimonial-card:hover,
.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: rgba(245, 12, 160, .5);
}

.icon-circle,
.icon-box {
    background: var(--ink);
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
}

.icon-circle i,
.icon-box i {
    color: #fff !important;
}

.icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 16px;
}

.icon-box {
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
}

.benefit-card h5,
.feature-card h5,
.module-card h5 {
    font-size: 1.08rem;
    font-weight: 700;
}

.feature-card ul li,
.module-card ul li {
    font-size: 0.9rem;
    color: var(--muted);
    padding: 4px 0;
}

.feature-card .fa-check,
.module-card .fa-check {
    color: var(--green);
}

/* ===== PRICING ===== */
.pricing-card {
    padding: clamp(28px, 4vw, 40px) 26px;
    position: relative;
    text-align: center;
}

.pricing-card.featured,
.pricing-card.border-primary {
    border: 2px solid var(--gold);
    box-shadow: var(--shadow);
}

.pricing-card h3,
.pricing-card h5 {
    font-weight: 700;
}

.pricing-card .display-6,
.pricing-card .display-4 {
    font-family: var(--font-mono);
    color: var(--ink);
    font-weight: 600;
}

.pricing-card ul li {
    font-size: 0.95rem;
    padding: 7px 0;
    color: var(--text);
}

.pricing-card .fa-check {
    color: var(--green);
}

.badge-accent {
    background: var(--gold);
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* ===== TESTIMONIALS ===== */
.testimonial-card {
    padding: 30px 28px;
    border-left: 4px solid var(--gold);
    position: relative;
}

.testimonial-card .fa-star {
    color: var(--gold);
    font-size: 0.95rem;
    margin-right: 3px;
}

.testimonial-card p {
    color: var(--text);
    font-style: italic;
}

/* ===== FAQ ===== */
.faq-item {
    overflow: hidden;
    padding: 0;
}

.faq-question {
    cursor: pointer;
    user-select: none;
}

.faq-question i {
    color: var(--gold-dark);
    transition: transform 0.25s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

.faq-answer {
    display: none;
    color: var(--muted);
}

.faq-item.active .faq-answer {
    display: block;
}

/* ===== CONTACT / FORMS ===== */
.contact-card {
    padding: clamp(24px, 4vw, 40px);
}

.form-control,
.form-select {
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: var(--paper);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(245, 12, 160, .22);
    background: #fff;
}

label {
    font-weight: 500;
    font-size: 0.92rem;
    margin-bottom: 6px;
}

/* ===== MOCKUP SCREEN ===== */
.mockup-screen {
    background: linear-gradient(160deg, var(--ink), var(--ink-2));
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(20px, 4vw, 36px);
    min-height: 220px;
    border: 1px solid rgba(255, 255, 255, .12);
}

/* ===== PAGE HEADER (inner pages) ===== */
.page-header {
    padding: 44px 0 60px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: relative;
}

.page-header h1 {
    color: var(--ink);
    font-size: clamp(1.8rem, 4vw, 2.75rem);
}

.breadcrumb {
    margin-top: 10px;
    margin-bottom: 0;
}

.breadcrumb a {
    color: var(--gold-dark);
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--muted);
}

.breadcrumb-item.active {
    color: var(--muted);
}

/* ===== GLASS CARD (about page, on light bg now solid) ===== */
.glass-card {
    background: var(--white);
    border: 2px solid var(--gold);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}

/* ===== TABLES ===== */
.table-responsive {
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table {
    margin-bottom: 0;
}

.table thead {
    background: var(--ink);
    color: #fff;
}

.table th {
    font-weight: 600;
    font-family: var(--font-display);
    border-color: rgba(255, 255, 255, .1);
    white-space: nowrap;
}

.table td {
    vertical-align: middle;
    border-color: var(--line-soft);
}

.table-bordered {
    border-color: var(--line);
}

/* ===== FOOTER ===== */
.footer {
    background: var(--ink);
    color: rgba(255, 255, 255, .82);
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .12), transparent 45%);
    pointer-events: none;
}

.footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .15) 60%, rgba(255, 255, 255, .75));
}

.footer .container {
    position: relative;
    z-index: 1;
}

.footer h4,
.footer h6 {
    color: #fff;
}

.footer h6 {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: .92;
}

.footer-brand {
    color: #fff !important;
    font-family: var(--font-display);
}

.footer-col>p {
    line-height: 1.75;
    max-width: 340px;
}

/* Divider between footer columns on desktop */
@media (min-width: 992px) {
    .footer .row>[class*="col-"]:not(:first-child) {
        border-left: 1px solid rgba(255, 255, 255, .14);
        padding-left: 32px;
    }
}

.footer-links a,
.footer-links li {
    color: rgba(255, 255, 255, .72);
    font-size: 0.95rem;
}

.footer-links li {
    margin-bottom: 2px;
}

.footer-links a {
    display: inline-block;
    padding: 5px 0;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-links a:hover {
    color: #fff;
    padding-left: 6px;
}

.footer-links li i,
.footer-col ul li i {
    width: 18px;
    text-align: center;
    color: rgba(255, 255, 255, .85);
}

.footer-bottom {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, .78);
}

.footer-bottom a {
    display: inline-flex;
    align-items: center;
    padding: 10px 2px;
}

.footer-bottom a:hover {
    color: #fff !important;
}

/* Social icons */
.social-icons a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color .2s ease;
}

.social-icons a:hover {
    background: #fff;
    color: var(--ink);
    border-color: #fff;
    transform: translateY(-3px);
}

/* App download badges */
.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-radius: 12px;
    background: #25D366;
    border: 2px solid white;
    color: black;
    box-shadow: 0 4px 8px black;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow .2s ease;
}

.app-badge:hover {
    background: white;
    border-color: black;
    color: black;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px white;
}

.app-badge:hover i,
.app-badge:hover small {
    color: var(--ink);
}

.app-badge i {
    font-size: 1.6rem;
    color: #fff;
    transition: color .2s ease;
}

.app-badge span {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
}

.app-badge small {
    font-size: 0.62rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .68);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color .2s ease;
}

/* ===== FLOATING ACTIONS ===== */
.floating-actions {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.action-btn {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.action-btn:hover {
    transform: scale(1.08);
}

.action-btn.whatsapp {
    background: #25D366;
}

.action-btn.call {
    background: var(--ink);
}

.action-btn.demo {
    background: var(--gold);
    color: #fff;
}

@media (max-width: 575.98px) {
    .floating-actions {
        right: 12px;
        bottom: 12px;
    }

    .action-btn {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }
}

/* ===== GALLERY ===== */
.gallery-card img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ===== BG-PRIMARY (CTA sections) ===== */
.bg-primary {
    background: #F50CA0 !important;
    position: relative;
    overflow: hidden;
}

.bg-primary h2 {
    color: #fff;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}

/* ===== BADGES & UTILITIES ===== */
.text-primary {
    color: var(--ink) !important;
}

.text-accent {
    color: var(--gold-dark) !important;
}

.text-success {
    color: var(--green) !important;
}

.border-primary {
    border-color: var(--gold) !important;
}

/* ===== 404 ===== */
.error-code {
    font-family: var(--font-mono);
    font-size: clamp(4rem, 14vw, 8rem);
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
}

/* ===== ANIMATIONS (used sparingly) ===== */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

.floating-card {
    animation: float 5s ease-in-out infinite;
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== RESPONSIVE FINE-TUNING ===== */
@media (max-width: 991.98px) {
    .hero {
        text-align: center;
    }

    .hero .d-flex.flex-wrap {
        justify-content: center;
    }

    .hero-subtitle {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero .row>.col-lg-5 {
        margin-top: 40px;
    }
}

@media (max-width: 575.98px) {
    .hero .d-flex.flex-wrap.gap-3.mb-5 {
        margin-bottom: 24px !important;
    }
}

@media (max-width: 767.98px) {
    section {
        padding: 40px 0;
    }

    .page-header {
        padding: 32px 0 44px;
        text-align: center;
    }

    .benefit-card,
    .feature-card,
    .module-card {
        padding: 24px 20px;
    }

    .pricing-card {
        padding: 26px 20px;
    }

    .testimonial-card {
        padding: 24px 20px;
    }

    .icon-circle {
        width: 48px;
        height: 48px;
    }

    .icon-box {
        width: 56px;
        height: 56px;
    }

    .footer .col-lg-4,
    .footer .col-lg-2 {
        text-align: center;
        border-left: none !important;
        padding-left: 0 !important;
    }

    .footer-col>p {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .footer .row>[class*="col-"] {
        padding-top: 20px;
        padding-bottom: 20px;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .footer .row>[class*="col-"]:first-child {
        padding-top: 0;
        border-top: none;
    }

    .footer .social-icons,
    .footer .app-badges {
        justify-content: center;
    }

    .footer-bottom {
        text-align: center;
        padding-bottom: 64px;
    }

    .footer-bottom-links,
    .footer-bottom .d-flex {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .btn-lg {
        width: 100%;
        text-align: center;
    }

    .hero .btn-lg {
        padding: 13px 20px;
    }

    .counter-box {
        padding: 16px 10px;
    }
}

/* ===== HERO — COMPACT MOBILE LAYOUT =====
   Fixed (non-fluid) sizing for small phones so the hero stays tight
   and consistent instead of the vw-based clamp() values wrapping to
   extra lines and inflating vertical whitespace on narrower screens.
   Sizing restored to match the fuller, more confident hero look —
   still tight and responsive, just not as cramped as before. */
@media (max-width: 575.98px) {
    .hero {
        padding-top: 28px;
        padding-bottom: 32px;
    }

    .hero .eyebrow {
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        gap: 6px;
        margin-bottom: 0.75rem !important;
    }

    .hero .eyebrow::before {
        width: 18px;
    }

    .hero-title {
        font-size: 2rem;
        line-height: 1.18;
        margin-bottom: 0.75rem !important;
    }

    .hero-subtitle {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1.25rem !important;
    }

    .hero .d-flex.flex-wrap.gap-3 {
        gap: 10px !important;
        margin-bottom: 1.25rem !important;
    }

    .hero .row.g-3 {
        margin-top: 0;
    }

    .hero .counter-box {
        padding: 16px 10px;
    }

    .hero .counter-box .number {
        font-size: 1.4rem;
    }

    .hero .counter-box .small {
        font-size: 0.75rem;
        margin-top: 5px;
    }

    .hero .trust-row {
        margin-top: 1.1rem !important;
    }
}

@media (max-width: 380px) {
    .hero-title {
        font-size: 1.8rem;
    }

    .hero .eyebrow {
        font-size: 0.66rem;
        letter-spacing: 0.05em;
    }
}
/* ===== BLOG ARTICLE ===== */
.blog-article {
    max-width: 720px;
    font-size: 1.05rem;
    line-height: 1.8;
}

.blog-article p {
    margin-bottom: 1.1rem;
}

.blog-article .lead {
    color: var(--text);
    font-size: 1.2rem;
}

.cta-box {
    border: 1px solid var(--line);
}