/* Shared public-site visual system. Loaded after page styles so shared
   components stay consistent without changing the Orchid admin surfaces. */
:root {
    --cyb-ink: #0b1020;
    --cyb-ink-soft: #30384b;
    --cyb-muted: #626b80;
    --cyb-purple: #7c3aed;
    --cyb-magenta: #d946ef;
    --cyb-navy: #151525;
    --cyb-line: #e7e2ef;
    --cyb-surface: #ffffff;
    --cyb-surface-soft: #f5f3ff;
    --cyb-shadow-card: 0 14px 38px rgba(28, 16, 51, .07);
    --cyb-shadow-hover: 0 22px 52px rgba(28, 16, 51, .14);
    --cyb-radius-card: 20px;
    --cyb-radius-panel: 26px;
    --cyb-section-space: clamp(76px, 8vw, 112px);
    --cyb-content-width: 1360px;
}

.site-skip-link {
    position: fixed;
    z-index: 2000;
    top: .75rem;
    left: .75rem;
    padding: .7rem 1rem;
    transform: translateY(-160%);
    border: 1px solid var(--cyb-line);
    border-radius: .65rem;
    background: var(--cyb-surface);
    color: var(--cyb-ink) !important;
    box-shadow: var(--cyb-shadow-card);
}
.site-skip-link:focus { transform: none; }

html,
body { max-width: 100%; }

@supports (overflow: clip) {
    html,
    body { overflow-x: clip; }
}

img,
svg,
video,
canvas { max-width: 100%; }

/* Keep editor-managed page content inside the same responsive frame as the
   hand-built landing pages. CMS text can contain long URLs, media, or tables. */
#main-content,
#main-content .cms-content,
#main-content .cms-section { min-width: 0; }

#main-content .cms-content { overflow-wrap: anywhere; }
#main-content .cms-content :is(img, video, iframe, embed, object) {
    display: block;
    max-width: 100%;
}
#main-content .cms-content :is(video, iframe) { width: 100%; }
#main-content .cms-content iframe { aspect-ratio: 16 / 9; height: auto; }
#main-content .cms-content :is(pre, table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}
#main-content .cms-content :is(pre, code) { overflow-wrap: anywhere; }

.container { max-width: min(var(--cyb-content-width), calc(100% - 2rem)); }
.row > * { min-width: 0; }

#main-content {
    color: var(--cyb-ink);
    font-size: 1rem;
    line-height: 1.65;
}

#main-content p { color: var(--cyb-muted); line-height: 1.75; }
#main-content h1,
#main-content h2,
#main-content h3,
#main-content h4 { color: var(--cyb-ink); text-wrap: balance; }

.section-padding { padding-block: var(--cyb-section-space); }
.section-padding.pt-0 { padding-top: 0; }
.section-padding.pb-0 { padding-bottom: 0; }
.section-title { font-size: clamp(1.9rem, 3.2vw, 3.15rem); line-height: 1.12; letter-spacing: -.035em; }
.section-subtitle { max-width: 68ch; font-size: clamp(1rem, 1.12vw, 1.125rem); line-height: 1.8; }
.section-header { max-width: 860px; margin-bottom: clamp(30px, 4vw, 48px); }
.page-hero { padding: clamp(126px, 13vw, 174px) 0 clamp(44px, 6vw, 76px); }
.page-hero .section-title,
.page-hero .page-title { max-width: 19ch; font-size: clamp(2.25rem, 5vw, 4.15rem); line-height: 1.06; letter-spacing: -.045em; }
.page-hero .section-subtitle,
.page-hero .page-intro { max-width: 66ch; font-size: clamp(1rem, 1.2vw, 1.15rem); }

/* Homepage: emphasize the two-column story and product preview without
   changing the dashboard mockup, its content, or its underlying behavior. */
.home-page .hero {
    padding-top: clamp(148px, 14vw, 188px);
    padding-bottom: clamp(68px, 7vw, 94px);
    background:
        radial-gradient(ellipse at 82% 22%, rgba(153, 54, 225, .075), transparent 34%),
        radial-gradient(ellipse at 8% 78%, rgba(24, 181, 164, .045), transparent 30%);
}

.home-page .hero .row.align-items-center { --bs-gutter-y: clamp(2rem, 4vw, 3.5rem); }
.home-page .hero-title {
    max-width: 12ch;
    font-size: clamp(2.65rem, 5.25vw, 4.9rem);
    line-height: 1.015;
    letter-spacing: -.055em;
}

.home-page .hero-text { max-width: 58ch; font-size: clamp(1.02rem, 1.2vw, 1.16rem); }
.home-page .hero-actions { gap: 12px; }
.home-page .hero-actions .btn { min-width: 176px; }
.home-page .dashboard-frame {
    padding: clamp(18px, 2.1vw, 30px);
    border: 1px solid rgba(152, 76, 213, .17);
    border-radius: var(--cyb-radius-panel);
    background: linear-gradient(150deg, rgba(255,255,255,.97), rgba(249,247,255,.93));
    box-shadow: 0 28px 76px rgba(41, 28, 76, .12), 0 4px 16px rgba(20,38,61,.04);
}

.home-page .dashboard-top strong { color: var(--cyb-ink); font-size: clamp(1rem, 1.4vw, 1.2rem); }
.home-page .ui-panel,
.home-page .ui-small { border-color: rgba(226, 229, 240, .9); border-radius: 20px; }
.home-page .ui-panel { min-height: 275px; }
.home-page .ui-bars span { box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.home-page .metric { border-radius: 16px; }
.home-page .mini-stats { gap: 12px; }
.home-page .mini-stat { padding: 16px; border-radius: 17px; }
.home-page .mini-stat strong { font-size: 1.08rem; }
.home-page .mini-stat span { font-size: .9rem; line-height: 1.5; }

.trust-card,
.small-highlight { min-height: 90px; border-radius: 18px; box-shadow: 0 8px 24px rgba(20,38,61,.045); }
.trust-card .bi,
.icon-box,
.contact-icon { background: linear-gradient(145deg, rgba(145, 40, 220, .13), rgba(193, 53, 165, .08)); color: var(--cyb-purple); }

/* Three-column service bento: one large lead card and differentiated
   supporting cards, with a clean two/one-column collapse. */
.cyb-services-bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
    margin-right: 0;
    margin-left: 0;
}

.cyb-services-bento > * { width: auto; max-width: none; padding: 0; }
.cyb-services-bento > :nth-child(4n + 1),
.cyb-services-bento > :nth-child(4n) { grid-column: span 2; }
.cyb-services-bento > :nth-child(4n + 1) .card-modern { background: linear-gradient(145deg, #fff, #faf6ff); }
.cyb-services-bento > :nth-child(4n + 2) .card-modern { background: linear-gradient(145deg, #fff, #f7fbff); }
.cyb-services-bento > :nth-child(4n + 3) .card-modern { background: linear-gradient(145deg, #fff, #f7fbfa); }
.cyb-services-bento > :nth-child(4n) .card-modern { background: linear-gradient(145deg, #fff, #fff8fb); }
.cyb-services-bento .card-modern { display: flex; flex-direction: column; padding: clamp(22px, 2.5vw, 34px); border-radius: var(--cyb-radius-card); box-shadow: var(--cyb-shadow-card); }
.cyb-services-bento .card-modern p { max-width: 62ch; }
.cyb-services-bento .card-modern .feature-list { margin-top: auto; padding-top: 8px; }

/* Public services directory: clear category rhythm with lighter, easy-to-scan cards. */
.cyb-service-hero { padding-bottom: clamp(36px, 4.5vw, 60px); }
.cyb-service-hero .section-title { max-width: 18ch; }
.cyb-service-overview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
    margin-top: 28px;
    color: var(--cyb-muted);
    font-size: .94rem;
}
.cyb-service-overview > span,
.cyb-service-overview > a { display: inline-flex; align-items: center; gap: 7px; }
.cyb-service-overview strong { color: var(--cyb-ink); font-size: 1.12rem; }
.cyb-service-overview > span:first-child { padding: 8px 13px; border: 1px solid var(--cyb-line); border-radius: 999px; background: #fff; }
.cyb-service-overview > a { color: var(--cyb-purple); font-weight: 700; }
.cyb-service-overview > a:hover { color: var(--cyb-magenta); }
.cyb-service-directory { padding-bottom: clamp(72px, 8vw, 112px); }
.cyb-service-family + .cyb-service-family { margin-top: clamp(40px, 6vw, 68px); }
.cyb-service-family-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cyb-line);
}
.cyb-service-family-heading > div { display: flex; align-items: center; gap: 13px; }
.cyb-service-family-heading h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.65rem); letter-spacing: -.025em; }
.cyb-service-index { color: var(--cyb-purple); font-size: .8rem; font-weight: 800; letter-spacing: .08em; }
.cyb-service-count { color: var(--cyb-muted); font-size: .88rem; white-space: nowrap; }
.cyb-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cyb-service-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding: clamp(19px, 2vw, 25px);
    border: 1px solid var(--cyb-line);
    border-radius: 18px;
    background: var(--cyb-surface);
    box-shadow: 0 7px 22px rgba(20, 38, 61, .035);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cyb-service-card:hover { transform: translateY(-3px); border-color: rgba(143, 40, 220, .3); box-shadow: var(--cyb-shadow-card); }
.cyb-service-card-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px; color: var(--cyb-purple); background: linear-gradient(145deg, rgba(145, 40, 220, .13), rgba(193, 53, 165, .08)); font-size: 1.15rem; }
.cyb-service-card-copy { min-width: 0; }
.cyb-service-card h3 { margin: 0 0 7px; font-size: 1.08rem; line-height: 1.35; letter-spacing: -.015em; }
.cyb-service-card p { margin: 0; font-size: .94rem; line-height: 1.65; }
.cyb-service-link { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; color: var(--cyb-purple); font-size: .91rem; font-weight: 750; }
.cyb-service-link span { transition: transform .2s ease; }
.cyb-service-link:hover { color: var(--cyb-magenta); }
.cyb-service-link:hover span { transform: translateX(3px); }

/* Keep individual service pages spacious and legible as content grows. */
.service-faq { padding: 18px 0; border-bottom: 1px solid var(--cyb-line); }
.service-faq:last-child { border-bottom: 0; }
.service-faq summary { color: var(--cyb-ink); font-weight: 700; line-height: 1.5; cursor: pointer; }
.service-faq p { margin: 10px 0 0; }
.service-detail-page .content-card,
.service-detail-page .info-panel { padding: clamp(24px, 3vw, 38px); }
.service-detail-page .process-step { padding: 24px; }

@media (max-width: 991.98px) {
    .cyb-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .cyb-service-grid { grid-template-columns: 1fr; gap: 12px; }
    .cyb-service-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 12px; padding: 17px; }
    .cyb-service-card-copy { grid-column: 2; }
    .cyb-service-link { grid-column: 2; }
    .cyb-service-family-heading { align-items: flex-end; }
    .cyb-service-count { font-size: .8rem; }
}

/* Consistent card rhythm; keep integration copy compact so logos and labels
   remain aligned across marketplace, payment, and shipping groups. */
.card-modern,
.pricing-card,
.content-card,
.legal-card,
.contact-card,
.info-panel,
.showcase-box,
.process-step,
.testimonial,
.integration-card,
.int-card,
.platform-stat,
.company-point {
    border-color: var(--cyb-line);
    border-radius: var(--cyb-radius-card);
    box-shadow: var(--cyb-shadow-card);
}

.card-modern:hover,
.pricing-card:hover,
.content-card:hover,
.integration-card:hover,
.int-card:hover { box-shadow: var(--cyb-shadow-hover); }

.integration-card,
.int-card { min-height: 146px; padding: clamp(18px, 2vw, 24px); }
.integration-brand { align-items: flex-start; gap: 14px; }
.integration-logo,
.integration-icon-wrap { width: 50px; height: 50px; flex: 0 0 50px; padding: 8px; border-radius: 14px; }
.integration-brand .integration-title,
.int-card .card-title { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.35; }
.integration-brand p,
.int-card .section-text { margin: 0; font-size: .94rem; line-height: 1.6; }
.integration-category { display: inline-flex; margin-top: 12px; padding: 5px 10px; border-radius: 999px; background: #f5effb; color: #7231aa; font-size: .78rem; font-weight: 700; }

.pricing-card { border-radius: 28px; box-shadow: 0 18px 54px rgba(20,38,61,.075); }
.pricing-card.popular-card,
.pricing-card.offer-card { box-shadow: 0 24px 60px rgba(143,40,220,.13); }
.pricing-card .pricing-title { font-size: clamp(1.3rem, 1.6vw, 1.55rem); }
.pricing-card .feature-list li { font-size: .96rem; }

.highlight-box {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(153, 92, 221, .22);
    border-radius: var(--cyb-radius-panel);
    background: linear-gradient(135deg, #f8f2ff 0%, #fff 48%, #fff5fb 100%);
    box-shadow: 0 22px 60px rgba(42, 26, 74, .09);
    padding: clamp(28px, 5vw, 58px);
}

.highlight-box > * { position: relative; z-index: 1; }
.highlight-box::after { position: absolute; top: -105px; right: -72px; width: 280px; aspect-ratio: 1; content: ""; border-radius: 50%; background: radial-gradient(circle, rgba(161,55,220,.15), transparent 68%); pointer-events: none; }
.home-page .highlight-box { color: #fff; border-color: rgba(255,255,255,.12); background: linear-gradient(115deg, #111e35 0%, #34205a 60%, #53275d 100%); box-shadow: 0 28px 70px rgba(34,22,66,.2); }
.home-page #main-content .highlight-box h2 { color: #fff; }
.home-page .highlight-box p { max-width: 66ch; margin-inline: auto; color: rgba(255,255,255,.78)!important; }
.home-page .highlight-box .badge-soft { color: #f1d6ff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); }
.home-page .highlight-box .btn-ghost { color: var(--cyb-ink); background: #fff; border-color: #fff; }
.home-page .highlight-box .btn-main { color: #fff; background: linear-gradient(135deg, #a83de2, #da4eaf); box-shadow: 0 12px 30px rgba(9,4,24,.2); }

.navbar .navbar-brand-logo { max-width: min(100%, 178px); object-fit: contain; }
.navbar .nav-link { padding-inline: clamp(5px, .7vw, 10px); font-size: .94rem; }
.navbar .navbar-nav { gap: 2px; }
.navbar .btn-main { box-shadow: 0 9px 22px rgba(143,40,220,.2); }

.home-page .hero-title-accent {
    color: #a63de0;
    background: linear-gradient(100deg, #8045ff 0%, #bd35d8 58%, #e5489c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.navbar .cart-count {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #c13bd8);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

.cybinix-footer { padding-top: clamp(38px, 5vw, 68px); }
.cybinix-footer .footer-main { row-gap: clamp(28px, 4vw, 48px)!important; }
.cybinix-footer .footer-description,
.cybinix-footer .footer-contact-card,
.cybinix-footer .footer-newsletter-text { font-size: .95rem; line-height: 1.7; }
.cybinix-footer .footer-links li { margin-bottom: 11px; }
.cybinix-footer .footer-info-list strong { overflow-wrap: anywhere; }
.cybinix-footer .footer-logo { max-width: 190px; }

.form-control,
.form-select { min-width: 0; font-size: 1rem; }
.form-control::placeholder { opacity: 1; }
.whatsapp-float { width: 54px; height: 54px; }

@media (min-width: 1600px) {
    :root { --cyb-content-width: 1440px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-brand-logo { height: 42px; }
    .navbar .nav-link { padding-inline: 4px; font-size: .86rem; }
    .navbar .navbar-nav { gap: 0; }
    .navbar .btn-main { padding-inline: 15px; }
    .home-page .hero-title { font-size: clamp(3rem, 5vw, 3.8rem); }
}

@media (max-width: 991.98px) {
    :root { --cyb-section-space: 76px; }
    .home-page .hero { padding-top: 138px; }
    .home-page .mini-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-page .ui-grid { grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr); }
    .cyb-services-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cyb-services-bento > :nth-child(n) { grid-column: span 1; }
    .cybinix-footer .footer-main > [class*="col-"] { min-width: 0; }
}

@media (max-width: 767.98px) {
    :root { --cyb-section-space: 62px; }
    .container { max-width: calc(100% - 1.25rem); }
    .section-header { margin-bottom: 30px; }
    .page-hero { padding-top: 118px; padding-bottom: 46px; }
    .home-page .hero { padding-top: 116px; padding-bottom: 54px; }
    .home-page .hero-title { max-width: 13ch; font-size: clamp(2.45rem, 9.2vw, 3.6rem); }
    .home-page .mini-stats { grid-template-columns: 1fr; max-width: none; }
    .home-page .mini-stat { display: grid; grid-template-columns: minmax(100px, .65fr) 1fr; align-items: center; gap: 10px; }
    .home-page .mini-stat strong { margin: 0; }
    .home-page .ui-grid { grid-template-columns: 1fr; }
    .home-page .ui-panel { min-height: 240px; }
    .cyb-services-bento { grid-template-columns: 1fr; gap: 16px; }
    .cyb-services-bento > :nth-child(n) { grid-column: auto; }
    .integration-card,
    .int-card { min-height: 0; }
    .cybinix-footer .footer-highlight-title { max-width: 24ch; }
    .whatsapp-float { width: 50px; height: 50px; }
}

@media (max-width: 575.98px) {
    :root { --cyb-section-space: 54px; }
    .container { max-width: calc(100% - 1rem); }
    .section-title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
    .page-hero .section-title,
    .page-hero .page-title { font-size: clamp(2rem, 9.5vw, 2.8rem); }
    .page-hero .section-subtitle,
    .page-hero .page-intro { font-size: 1rem; line-height: 1.7; }
    .home-page .hero-title { font-size: clamp(2.35rem, 10.6vw, 3.1rem); }
    .home-page .hero .row { margin-right: 0; margin-left: 0; }
    .home-page .hero .row > * { padding-right: 0; padding-left: 0; }
    .home-page .hero-content,
    .home-page .hero-visual,
    .home-page .hero-content > * { min-width: 0; max-width: 100%; }
    .home-page .hero-text { overflow-wrap: anywhere; }
    .home-page .hero-actions .btn { width: 100%; }
    .home-page .mini-stat { grid-template-columns: 1fr; gap: 2px; }
    .home-page .dashboard-frame { border-radius: 22px; }
    .home-page .ui-panel,
    .home-page .ui-small { padding: 17px; }
    .home-page .ui-panel { min-height: 220px; }
    .home-page .ui-bars { height: 128px; }
    .highlight-box { border-radius: 22px; padding: 26px 20px; }
    .highlight-box .btn { width: 100%; margin: 8px 0 0!important; }
    .footer-newsletter-control { gap: 10px; }
    .navbar .navbar-brand-logo { max-width: 148px; }
    .whatsapp-float {
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 359.98px) {
    .home-page .hero-title { max-width: 100%; font-size: 2.2rem; }
    .home-page .dashboard-top { align-items: flex-start; gap: 10px; }
    .home-page .dashboard-top strong { font-size: .95rem; }
    .home-page .ui-panel,
    .home-page .ui-small { padding: 14px; }
    .integration-brand { gap: 10px; }
    .integration-logo,
    .integration-icon-wrap { width: 44px; height: 44px; flex-basis: 44px; }
}

/* Keep the public page canvas clean and neutral. Brand color remains on
   intentional components (cards, badges, buttons, and the footer), not as a
   decorative wash behind the full page or its hero sections. */
body { background: #fff; }
#main-content > .page-hero,
body.home-page #main-content > .hero { background: #fff; }
#main-content > .page-hero::before,
body.home-page #main-content > .hero::before,
body.home-page #main-content > .hero::after { display: none; }
.status-page { background: #fff; }
#main-content > .cyx-404 { background: #fff; }
#main-content > .cyx-404::before { display: none; }