/* ============================================================================
   Software4.net — Shared page components premium layer
   ----------------------------------------------------------------------------
   Loaded site-wide from _Layout, AFTER site.css but BEFORE the page-level
   @section Styles block — so pages with their own sheet (home-premium,
   services-premium) still override this, while the pages that don't
   (Contact, About, Products, Blog) inherit the refined treatment.

   CSS-only and component-scoped: it upgrades the shared .section-label /
   .section-title / .section-subtitle typography and the generic card and
   hero patterns those pages already use, so no page markup changes.
   ========================================================================== */

/* ── Section eyebrow ─────────────────────────────────────────────────── */
/* site.css renders this as a wide pale pill. On a page with several
   sections that reads as repeated chrome, so it's reduced to a compact
   tracked label — the same treatment the redesigned pages use. */
.section-label {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase;
    color: #1677FF !important;
    margin-bottom: .85rem !important;
}
/* Eyebrows sitting on a dark hero need light text instead. */
[style*="var(--s4-navy"] .section-label,
[style*="#0d1b2a"] .section-label,
[style*="gradient-hero"] .section-label {
    color: rgba(255,255,255,.88) !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    padding: .4rem .9rem !important;
    border-radius: 6px !important;
    backdrop-filter: blur(8px);
}

/* ── Section headings ────────────────────────────────────────────────── */
.section-title {
    font-size: clamp(1.7rem, 3.1vw, 2.5rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
    line-height: 1.15 !important;
    color: #071A33 !important;
    text-wrap: balance;
}
.section-subtitle {
    font-size: 1rem !important;
    line-height: 1.72 !important;
    color: #64748B !important;
}

/* Page heroes on these pages are inline-styled navy→blue gradients. Deepening
   them to the refined palette keeps them consistent with the redesigned
   pages without touching each page's markup. */
section[style*="padding:120px 0 80px"],
section[style*="padding:130px 0 80px"],
section[style*="padding:140px 0 80px"],
div[style*="padding:140px 0 80px"] {
    position: relative; overflow: hidden;
    background: linear-gradient(140deg, #050F1F 0%, #071A33 46%, #0B3B73 100%) !important;
}
section[style*="padding:120px 0 80px"]::before,
section[style*="padding:130px 0 80px"]::before,
section[style*="padding:140px 0 80px"]::before,
div[style*="padding:140px 0 80px"]::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 72% 76% at 50% 42%, #000 16%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 72% 76% at 50% 42%, #000 16%, transparent 72%);
}
section[style*="padding:120px 0 80px"] > *,
section[style*="padding:130px 0 80px"] > *,
section[style*="padding:140px 0 80px"] > *,
div[style*="padding:140px 0 80px"] > * { position: relative; z-index: 1; }

section[style*="padding:120px 0 80px"] h1,
section[style*="padding:140px 0 80px"] h1,
div[style*="padding:140px 0 80px"] h1 {
    letter-spacing: -.032em !important;
    line-height: 1.09 !important;
}

/* ── Generic cards ───────────────────────────────────────────────────── */
/* These pages lean on Bootstrap .card plus a few bespoke card classes.
   Softening the radius and giving one consistent hover lift keeps them
   coherent with the redesigned sections. */
.service-card, .product-card, .blog-card, .team-card,
.value-card, .info-card, .feature-card {
    border-radius: 14px;
    transition: transform .32s cubic-bezier(.22,1,.36,1),
                box-shadow .32s cubic-bezier(.22,1,.36,1),
                border-color .28s ease;
}
.service-card:hover, .product-card:hover, .blog-card:hover,
.team-card:hover, .value-card:hover, .info-card:hover, .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -24px rgba(7,26,51,.26);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary-s4 {
    border-radius: 8px !important;
    font-weight: 650 !important;
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.btn-primary-s4:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px rgba(22,119,255,.8);
}
.btn-outline-s4 { border-radius: 8px !important; font-weight: 650 !important; }

/* ── Forms (Contact / Blog subscribe) ────────────────────────────────── */
.form-control, .form-select {
    border-radius: 9px;
    transition: border-color .24s ease, box-shadow .24s ease;
}
.form-control:focus, .form-select:focus {
    border-color: rgba(22,119,255,.55);
    box-shadow: 0 0 0 4px rgba(22,119,255,.12);
}
@media (max-width: 575.98px) {
    /* 16px stops iOS zooming in when a field takes focus. */
    .form-control, .form-select { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .service-card:hover, .product-card:hover, .blog-card:hover,
    .team-card:hover, .value-card:hover, .info-card:hover,
    .feature-card:hover, .btn-primary-s4:hover { transform: none; }
}

/* ========================================================================== 
   Unified dark product language for every public inner page
   ========================================================================== */
body.public-inner-page {
    --inner-bg: #061426;
    --inner-bg-2: #081a30;
    --inner-panel: rgba(14, 38, 68, .88);
    --inner-panel-soft: rgba(13, 34, 61, .7);
    --inner-line: rgba(117, 181, 231, .19);
    --inner-ink: #f5f9ff;
    --inner-muted: #a9bad0;
    background: var(--inner-bg) !important;
    color: var(--inner-ink);
}
body.public-inner-page main {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(900px circle at 92% 12%, rgba(22,119,255,.16), transparent 58%),
        linear-gradient(rgba(75,216,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75,216,255,.035) 1px, transparent 1px),
        linear-gradient(145deg, #061426, #071a31 58%, #09284d);
    background-size: auto, 56px 56px, 56px 56px, auto;
}
body.public-inner-page main > section,
body.public-inner-page main > div:not([class*="hero"]) {
    border-bottom: 1px solid rgba(75,216,255,.1);
}
body.public-inner-page main section[style*="background:#fff"],
body.public-inner-page main section[style*="background: #fff"],
body.public-inner-page main section[style*="background:var(--s4-white)"],
body.public-inner-page main section[style*="background:var(--s4-off-white)"],
body.public-inner-page main section[style*="background:#f8faff"] {
    background: transparent !important;
}
body.public-inner-page .section-label { color: #4bd8ff !important; }
body.public-inner-page .section-title,
body.public-inner-page main h2,
body.public-inner-page main h3,
body.public-inner-page main h4,
body.public-inner-page main h5,
body.public-inner-page main h6 {
    color: var(--inner-ink) !important;
}
body.public-inner-page .section-subtitle,
body.public-inner-page main p,
body.public-inner-page main .text-muted,
body.public-inner-page main [style*="color:var(--s4-gray-500)"],
body.public-inner-page main [style*="color: var(--s4-gray-500)"] {
    color: var(--inner-muted) !important;
}
body.public-inner-page main [style*="color:var(--s4-dark)"],
body.public-inner-page main [style*="color:var(--s4-text)"] {
    color: var(--inner-ink) !important;
}
body.public-inner-page main [style*="background:#f8faff"],
body.public-inner-page main [style*="background: #f8faff"],
body.public-inner-page main [style*="background:#fff"],
body.public-inner-page main [style*="background: #fff"],
body.public-inner-page main [style*="background:var(--s4-gray-100)"],
body.public-inner-page main [style*="background:var(--s4-off-white)"],
body.public-inner-page main [style*="background:linear-gradient(135deg,#f0f4ff"],
body.public-inner-page main [style*="background:rgba(124,58,237,.05)"],
body.public-inner-page main [style*="background:rgba(8,145,178,.05)"] {
    background: var(--inner-panel-soft) !important;
    border-color: var(--inner-line) !important;
    box-shadow: 0 24px 60px -36px rgba(0,0,0,.9);
}
body.public-inner-page main .rounded-3,
body.public-inner-page main .rounded-4,
body.public-inner-page main .data-card {
    border-color: var(--inner-line) !important;
}
body.public-inner-page main .data-card {
    overflow: hidden;
    background: var(--inner-panel) !important;
    box-shadow: 0 30px 70px -38px rgba(0,0,0,.95);
}
body.public-inner-page main .data-card-header {
    background: rgba(255,255,255,.025) !important;
    border-bottom-color: var(--inner-line) !important;
}
body.public-inner-page .form-label { color: #dce9f8 !important; }
body.public-inner-page .form-control,
body.public-inner-page .form-select {
    color: #edf6ff !important;
    background-color: rgba(4,15,29,.72) !important;
    border-color: rgba(117,181,231,.25) !important;
}
body.public-inner-page .form-control::placeholder { color: #7288a3 !important; }
body.public-inner-page .form-select option { color: #eaf4ff; background: #0a1c32; }
body.public-inner-page .form-control:focus,
body.public-inner-page .form-select:focus {
    border-color: rgba(75,216,255,.58) !important;
    box-shadow: 0 0 0 4px rgba(75,216,255,.1) !important;
}
body.public-inner-page .btn-outline-s4,
body.public-inner-page main .btn-outline-secondary {
    color: #eaf4ff !important;
    border-color: rgba(151,197,235,.35) !important;
    background: rgba(255,255,255,.035) !important;
}
body.public-inner-page .btn-outline-s4:hover,
body.public-inner-page main .btn-outline-secondary:hover {
    color: #fff !important;
    border-color: #4bd8ff !important;
    background: rgba(75,216,255,.1) !important;
}
body.public-inner-page main a:not(.btn-primary-s4):not(.btn-nav-cta) { color: #69dfff; }

@media (max-width: 767.98px) {
    body.public-inner-page main > section { padding-top: 56px !important; padding-bottom: 56px !important; }
}
/* ========================================================================== */
/* Products catalog                                                           */
/* ========================================================================== */
.catalog-page { --catalog-line: rgba(110,181,238,.18); color:#dceaff; background:#061426; }
.catalog-page, .catalog-page * { box-sizing:border-box; }
.catalog-hero { position:relative; overflow:hidden; padding:clamp(8.5rem,13vw,11rem) 0 clamp(5rem,8vw,7rem); text-align:center; background:linear-gradient(135deg,#04101f 0%,#082849 52%,#0b4c85 100%); border-bottom:1px solid var(--catalog-line); }
.catalog-hero::before, .catalog-section::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(105,182,240,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(105,182,240,.055) 1px,transparent 1px); background-size:56px 56px; }
.catalog-hero-inner, .catalog-section>.container { position:relative; z-index:1; }
.catalog-orb { position:absolute; border-radius:50%; filter:blur(10px); opacity:.45; }
.catalog-orb-one { width:420px; height:420px; right:-110px; top:40px; background:radial-gradient(circle,#087eff55,transparent 68%); }
.catalog-orb-two { width:380px; height:380px; left:-140px; bottom:-160px; background:radial-gradient(circle,#25d7ef3d,transparent 68%); }
.catalog-kicker { display:inline-flex; color:#47d8f5; font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.catalog-hero h1 { max-width:940px; margin:1.1rem auto 1.25rem; color:#fff; font-size:clamp(2.55rem,5.8vw,5.15rem); line-height:.98; letter-spacing:-.055em; font-weight:900; text-wrap:balance; }
.catalog-hero h1 span { background:linear-gradient(90deg,#44daf4,#3489ff 54%,#8d7bff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.catalog-hero p { max-width:730px; margin:0 auto; color:#acc2d7; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.75; }
.catalog-hero-actions { display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap; margin:2rem 0; }
.catalog-btn { display:inline-flex; align-items:center; justify-content:center; gap:.65rem; min-height:50px; padding:.8rem 1.3rem; border-radius:10px; text-decoration:none; font-weight:750; transition:.25s ease; }
.catalog-btn-primary { color:#fff; background:linear-gradient(120deg,#087eff,#19c8ec); box-shadow:0 16px 34px -16px #087eff; }
.catalog-btn-secondary { color:#d9ecff; border:1px solid rgba(157,204,240,.28); background:rgba(4,19,36,.38); }
.catalog-btn:hover { color:#fff; transform:translateY(-2px); }
.catalog-trust { display:flex; justify-content:center; gap:clamp(1rem,4vw,2.4rem); flex-wrap:wrap; color:#9eb7cf; font-size:.82rem; }
.catalog-trust i { margin-right:.35rem; color:#35d4f3; }
.catalog-jump { position:sticky; top:70px; z-index:20; background:rgba(4,17,32,.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--catalog-line); }
.catalog-jump-inner { display:flex; justify-content:center; gap:.45rem; padding:.72rem 1rem; overflow-x:auto; }
.catalog-jump a { color:#9fb5cb; text-decoration:none; white-space:nowrap; padding:.55rem 1rem; border-radius:8px; font-size:.82rem; font-weight:700; }
.catalog-jump a:hover { color:#fff; background:rgba(48,164,245,.12); }
.catalog-section { position:relative; overflow:hidden; padding:clamp(4.5rem,8vw,7rem) 0; background:linear-gradient(180deg,#061426,#071a30); }
.catalog-section-head { max-width:770px; margin:0 auto clamp(2.5rem,5vw,4rem); text-align:center; }
.catalog-section-head h2, .catalog-approach h2, .catalog-final-cta h2 { color:#f7fbff; font-size:clamp(2rem,3.7vw,3.25rem); font-weight:850; letter-spacing:-.04em; margin:.8rem 0; text-wrap:balance; }
.catalog-section-head p, .catalog-approach p, .catalog-final-cta p { color:#96aec5; line-height:1.75; margin:0; }
.catalog-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
.catalog-feature-card { --accent:#1688ff; display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid rgba(102,178,236,.22); border-radius:22px; background:linear-gradient(155deg,rgba(16,47,78,.96),rgba(7,27,49,.98)); box-shadow:0 26px 60px -42px #000; transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; }
.catalog-feature-card:hover { transform:translateY(-7px); border-color:color-mix(in srgb,var(--accent) 58%,transparent); box-shadow:0 32px 70px -38px var(--accent); }
.catalog-accent-violet { --accent:#7d69ff; }.catalog-accent-cyan { --accent:#13bed1; }
.catalog-product-visual { height:220px; display:grid; place-items:center; background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--accent) 32%,transparent),transparent 60%),linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,#102943),#102943); border-bottom:1px solid rgba(118,186,239,.15); }
.catalog-product-visual img { width:190px; height:190px; object-fit:contain; filter:drop-shadow(0 18px 25px rgba(0,0,0,.34)); transition:transform .35s ease; }
.catalog-feature-card:hover .catalog-product-visual img { transform:scale(1.06) translateY(-3px); }
.catalog-product-copy { display:flex; flex:1; flex-direction:column; padding:1.5rem; }
.catalog-card-top { display:flex; align-items:center; justify-content:space-between; gap:.7rem; color:var(--accent); font-size:.65rem; font-weight:800; letter-spacing:.1em; }
.catalog-ai-pill { color:#cbe9ff; letter-spacing:0; padding:.28rem .5rem; border-radius:999px; background:rgba(101,178,235,.12); border:1px solid rgba(101,178,235,.17); }
.catalog-product-copy h3, .catalog-loop-card h3 { color:#fff; font-size:1.45rem; font-weight:820; letter-spacing:-.025em; margin:.9rem 0 .55rem; }
.catalog-product-copy>p, .catalog-loop-card>p { color:#9fb5ca; line-height:1.68; font-size:.91rem; }
.catalog-product-copy ul, .catalog-loop-card ul { display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1rem; list-style:none; padding:1.1rem 0; margin:auto 0 1rem; border-top:1px solid rgba(115,181,232,.14); }
.catalog-product-copy li, .catalog-loop-card li { position:relative; padding-left:1rem; color:#c7d8e8; font-size:.8rem; }
.catalog-product-copy li::before, .catalog-loop-card li::before { content:""; position:absolute; left:0; top:.48em; width:5px; height:5px; border-radius:50%; background:var(--accent,#21c7e8); box-shadow:0 0 10px var(--accent,#21c7e8); }
.catalog-card-actions, .catalog-loop-actions { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
.catalog-card-actions a, .catalog-loop-actions a { display:flex; align-items:center; justify-content:center; gap:.4rem; min-height:43px; padding:.65rem; border-radius:9px; text-align:center; text-decoration:none; font-size:.78rem; font-weight:750; }
.catalog-card-actions a:first-child, .catalog-loop-actions a:first-child { color:#fff; background:linear-gradient(120deg,var(--accent,#118cff),color-mix(in srgb,var(--accent,#118cff) 65%,#2ae1ef)); }
.catalog-card-actions a:last-child, .catalog-loop-actions a:last-child { color:#c9dced; border:1px solid rgba(124,186,235,.22); }
/* The global inner-page link color is intentionally cyan, but primary card
   actions sit on saturated gradients and require a solid high-contrast label. */
body.public-inner-page main .catalog-card-actions a:first-child,
body.public-inner-page main .catalog-loop-actions a:first-child {
    color:#fff !important;
    font-weight:850;
    text-shadow:0 1px 2px rgba(0,18,38,.42);
}
body.public-inner-page main .catalog-card-actions a:first-child:hover,
body.public-inner-page main .catalog-card-actions a:first-child:focus-visible,
body.public-inner-page main .catalog-loop-actions a:first-child:hover,
body.public-inner-page main .catalog-loop-actions a:first-child:focus-visible {
    color:#fff !important;
    filter:brightness(1.08) saturate(1.05);
    box-shadow:0 12px 26px -14px var(--accent,#118cff);
}
body.public-inner-page main .catalog-card-actions a:first-child:focus-visible,
body.public-inner-page main .catalog-loop-actions a:first-child:focus-visible {
    outline:3px solid #fff;
    outline-offset:3px;
}
.catalog-loop-section { background:linear-gradient(135deg,#061222,#09284b); border-block:1px solid var(--catalog-line); }
.catalog-loop-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.catalog-loop-card { --accent:#1bc5e8; display:flex; min-width:0; flex-direction:column; padding:1.25rem; border:1px solid rgba(110,181,238,.22); border-radius:20px; background:linear-gradient(150deg,rgba(17,47,78,.96),rgba(8,29,53,.98)); transition:.3s ease; }
.catalog-loop-card:hover { transform:translateY(-6px); border-color:color-mix(in srgb,var(--accent) 52%,transparent); }
.catalog-loop-card.loop-seo { --accent:#2b86ff; }.catalog-loop-card.loop-ads { --accent:#ffa400; }.catalog-loop-card.loop-dev { --accent:#8976ff; }
.catalog-loop-icon { height:145px; display:grid; place-items:center; margin:-.25rem -.25rem .8rem; border-radius:15px; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent 67%); }
.catalog-loop-icon img { width:136px; height:136px; object-fit:contain; filter:drop-shadow(0 14px 18px rgba(0,0,0,.32)); }
.catalog-loop-label { color:var(--accent); font-size:.62rem; font-weight:800; letter-spacing:.11em; }
.catalog-loop-card ul { grid-template-columns:1fr; margin-top:auto; }
.catalog-approach { background:#061426; }
.catalog-approach-panel { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,6vw,5rem); align-items:center; padding:clamp(1.8rem,4vw,3.5rem); border:1px solid var(--catalog-line); border-radius:24px; background:radial-gradient(circle at 0 0,rgba(30,147,232,.14),transparent 43%),#091d34; }
.catalog-principles { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.catalog-principles article { padding:1.2rem; border-radius:15px; background:rgba(6,22,40,.72); border:1px solid rgba(112,181,235,.16); }
.catalog-principles i { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; color:#3dd7f3; background:rgba(61,215,243,.1); }
.catalog-principles h3 { color:#f4f9ff; font-size:1rem; margin:1rem 0 .35rem; }.catalog-principles p { font-size:.8rem; }
.catalog-final-cta { padding:clamp(3.5rem,7vw,5.5rem) 0; background:linear-gradient(120deg,#07213d,#0b4a82); border-top:1px solid var(--catalog-line); }
.catalog-final-cta>.container { display:flex; align-items:center; justify-content:space-between; gap:2rem; }.catalog-final-cta h2 { margin-bottom:.55rem; }.catalog-final-cta p { max-width:720px; }
@media(max-width:1100px){.catalog-feature-grid{grid-template-columns:repeat(2,1fr)}.catalog-loop-grid{grid-template-columns:repeat(2,1fr)}.catalog-feature-card:last-child{grid-column:1/-1;max-width:620px;justify-self:center}.catalog-approach-panel{grid-template-columns:1fr}}
@media(max-width:700px){.catalog-hero{padding-top:7rem}.catalog-feature-grid,.catalog-loop-grid,.catalog-principles{grid-template-columns:1fr}.catalog-feature-card:last-child{grid-column:auto}.catalog-jump{top:60px}.catalog-jump-inner{justify-content:flex-start}.catalog-product-copy ul{grid-template-columns:1fr}.catalog-final-cta>.container{align-items:flex-start;flex-direction:column}.catalog-final-cta .catalog-btn{width:100%}}
@media(prefers-reduced-motion:reduce){.catalog-feature-card:hover,.catalog-loop-card:hover,.catalog-btn:hover,.catalog-feature-card:hover .catalog-product-visual img{transform:none}}