/* ================================================================
   AlphaTechPlus — site styles
   Design system: Poppins/Open Sans · navy/cyan primary (from the brand logo:
   deep navy "A" mark + circuit/cloud motif in bright cyan) · bento cards
   ================================================================ */
:root {
    --atp-navy: #14275c;       /* deep navy — matches the logo's "ALPHA" wordmark and A-mark gradient start */
    --atp-blue: #1487d9;       /* primary interactive blue — midpoint of the logo's A-mark gradient */
    --atp-blue-deep: #0b3d75;  /* deep blue — hover state / gradient partner for --atp-blue */
    --atp-cyan: #22b8ea;       /* bright cyan — matches the logo's cloud icon, plus symbol and circuit accents */
    --atp-primary: var(--atp-blue); /* alias — hero_slides chip data references this name */
    --atp-red: #ea4335;
    --atp-yellow: #fbbc05;
    --atp-green: #34a853;
    --atp-ink: #0b1220;
    --atp-ink-2: #131a2b;
    --atp-surface: #f7f9fc;
    --atp-border: #e5eaf2;
    --atp-text: #1f2937;
    --atp-muted: #64748b;
    --radius-lg: 1.25rem;
    --radius-md: .875rem;
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, .1);
    --shadow-lg: 0 20px 50px rgba(11, 18, 32, .18);
    /* One vertical rhythm for the whole site. Section padding and every
       "clear the fixed navbar" offset derive from these, so the header height
       and the inner-page hero can never drift apart again. */
    --nav-h: 78px;
    --topbar-h: 0px;
    --space-section: clamp(3.25rem, 6vw, 5rem);
    --space-section-sm: clamp(2.25rem, 4vw, 3.25rem);
}
@media (min-width: 992px) {
    :root { --topbar-h: 38px; }
}

html { scroll-behavior: smooth; }
html { overflow-x: clip; }
/* Anchor targets were landing underneath the fixed navbar — every in-page jump
   (#services, the FAQ accordion, skip-to-content) hid its own heading. */
html { scroll-padding-top: calc(var(--nav-h) + 1rem); }
body {
    font-family: 'Open Sans', system-ui, sans-serif;
    color: var(--atp-text);
    background: #fff;
    overflow-x: clip;
}
h1, h2, h3, h4, h5, h6, .navbar-brand, .btn { font-family: 'Poppins', sans-serif; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; }
a { cursor: pointer; }
img { max-width: 100%; }

/* ---------------- accessibility: skip link ---------------- */
.skip-link {
    position: absolute; left: 1rem; top: -100px; z-index: 2000;
    background: var(--atp-navy); color: #fff; font-weight: 600;
    padding: .7rem 1.1rem; border-radius: 0 0 .6rem .6rem; text-decoration: none;
    transition: top .18s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* ---------------- utility bar ---------------- */
.topbar {
    background: var(--atp-navy); color: #c7d6ef;
    font-size: .82rem; line-height: 1; height: var(--topbar-h);
    position: relative; z-index: 1035;
}
.topbar > .container { height: 100%; }
.topbar-note { color: #9fb6da; }
.topbar-link { color: #dce8fa; text-decoration: none; font-weight: 600; transition: color .18s; }
.topbar-link:hover { color: #fff; }

/* ---------------- brand ---------------- */
.brand-mark {
    display: inline-grid; place-items: center;
    width: 40px; height: 40px; border-radius: 12px;
    font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.35rem; color: #fff;
    background: linear-gradient(140deg, var(--atp-navy), var(--atp-blue) 55%, var(--atp-cyan));
    box-shadow: 0 6px 16px rgba(20, 135, 217, .35);
}
.brand-text { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.t-blue { color: var(--atp-blue); }
.t-navy { color: var(--atp-navy); }
.t-cyan { color: var(--atp-cyan); }
/* legacy aliases — kept so any CMS content still emitting these keeps its colour */
.t-red { color: var(--atp-red); }
.t-green { color: var(--atp-green); }
.site-nav .brand-text { color: #fff; }
.site-nav .brand-text .t-navy { color: #cfe0f7; }
.site-nav.solid .brand-text, .site-nav.always-solid .brand-text { color: var(--atp-navy); }
.site-nav.solid .brand-text .t-navy, .site-nav.always-solid .brand-text .t-navy { color: var(--atp-navy); }
.mobile-nav .brand-text .t-navy { color: var(--atp-navy); }

/* ---------------- nav ----------------
   Height is fixed rather than derived from padding so --nav-h stays truthful and
   the navbar doesn't visibly resize (and reflow the page) on the first scroll. */
.site-nav {
    min-height: var(--nav-h);
    padding: .5rem 0;
    top: var(--topbar-h);
    transition: background .25s ease, box-shadow .25s ease, top .25s ease;
    background: rgba(9, 18, 40, .55);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.site-nav.solid, .site-nav.always-solid {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px rgba(11, 18, 32, .09);
    border-bottom-color: var(--atp-border);
    top: 0;
}
/* The uploaded logo is a dark wordmark on a light background. Over the dark hero
   it was rendering dark-on-dark and simply vanished; the plate gives it the light
   backing it needs and disappears once the navbar turns white. */
.brand-plate {
    padding: .3rem .6rem; border-radius: .65rem;
    background: rgba(255, 255, 255, .94);
    transition: background .25s ease, padding .25s ease, box-shadow .25s ease;
    box-shadow: 0 2px 10px rgba(4, 10, 24, .18);
}
.site-nav.solid .brand-plate, .site-nav.always-solid .brand-plate {
    background: transparent; box-shadow: none; padding: .3rem 0;
}
.brand-logo { height: 50px; width: auto; max-width: 260px; display: block; object-fit: contain; }
@media (max-width: 575.98px) {
    .brand-logo { height: 40px; max-width: 200px; }
}
.site-nav .nav-link {
    position: relative;
    color: #e7ecf5; font-weight: 600; font-size: .93rem;
    padding: .55rem .7rem !important; border-radius: .5rem;
    transition: color .2s, background .2s;
}
.site-nav.solid .nav-link, .site-nav.always-solid .nav-link { color: #33415c; }
.site-nav .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.site-nav.solid .nav-link:hover, .site-nav.always-solid .nav-link:hover { color: var(--atp-blue-deep); background: rgba(20, 135, 217, .08); }
/* Colour alone was carrying the current-page state, and on the translucent dark
   navbar the blue-on-navy contrast made it effectively invisible. An underline
   bar reads in both navbar states and doesn't depend on hue perception. */
.site-nav .nav-link.active { color: #fff; }
.site-nav.solid .nav-link.active, .site-nav.always-solid .nav-link.active { color: var(--atp-blue-deep); }
/* Deliberately ::before, not ::after — Bootstrap draws the dropdown caret with
   .dropdown-toggle::after, and this rule is more specific, so using ::after here
   replaced the caret with the underline bar. That made the submenu arrow vanish
   on exactly the pages inside that menu's own section (e.g. no caret on
   "Company" while viewing Careers), which reads as an intermittent glitch. */
.site-nav .nav-link.active::before {
    content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .15rem; height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--atp-cyan), var(--atp-blue));
}
/* Give the caret a little breathing room from the label. */
.site-nav .nav-link.dropdown-toggle::after { margin-left: .4em; vertical-align: .15em; }
.site-nav .navbar-toggler { border: none; color: #fff; font-size: 1.75rem; padding: .15rem .5rem; line-height: 1; }
.site-nav.solid .navbar-toggler, .site-nav.always-solid .navbar-toggler { color: var(--atp-navy); }
.site-nav .btn-cta { white-space: nowrap; }
.site-dropdown { border: none; box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: .5rem; }
.site-dropdown .dropdown-item { border-radius: .5rem; padding: .5rem .75rem; font-size: .92rem; }
.site-dropdown .dropdown-item:hover { background: rgba(20, 135, 217, .08); color: var(--atp-blue); }

/* ---------------- mega menu ----------------
   Positioning (left/top/position) is computed in JS on open (site.js "Mega menu
   positioning") and clamped to the viewport — Bootstrap dropdown positioning here
   depends on which ancestor ends up as the nearest positioned element, and that
   was unreliable across real browsers, so this file only carries the panel's
   visual styling, not its placement. */
.mega-panel {
    border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: 1.75rem;
    width: min(94vw, 920px);
    margin: 0 !important;
}
/* An animation (not a transition) is used deliberately — Bootstrap toggles this
   panel's display via its own .show class rule, and a transition can't interpolate
   from display:none, but an animation on the freshly-visible element still plays.

   The keyframes deliberately animate transform ONLY. Fading opacity from 0 made
   the panel's visibility depend on the animation actually running to completion:
   whenever it was frozen (a throttled/backgrounded tab stops advancing
   animations) the panel stayed stuck on its first frame at opacity 0 — rendered,
   positioned and on top, but completely invisible. Animating only the offset
   means the worst case is an un-animated menu, never a missing one. */
.mega-panel.show { animation: mega-fade-in .18s ease; }
@keyframes mega-fade-in {
    from { transform: translateY(6px); }
    to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .mega-panel.show { animation: none; }
}
.mega-panel-narrow { width: min(94vw, 520px); }
.mega-panel-inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
.mega-col-label {
    font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--atp-navy); margin-bottom: .75rem; display: flex; align-items: center;
}
.mega-col-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.mega-col-list a {
    color: var(--atp-text); font-size: .88rem; text-decoration: none; display: block;
    padding: .3rem .4rem; border-radius: .4rem; transition: background .15s, color .15s, padding-left .15s;
}
.mega-col-list a:hover { background: rgba(20, 135, 217, .08); color: var(--atp-blue); padding-left: .6rem; }
.mega-panel-footer { border-top: 1px solid var(--atp-border); margin-top: 1.25rem; padding-top: 1rem; text-align: right; }
.mega-view-all { color: var(--atp-navy); font-weight: 600; font-size: .9rem; text-decoration: none; }
.mega-view-all:hover { color: var(--atp-blue); }
.mega-panel-inner-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.mega-industry-link {
    display: flex; align-items: center; gap: .65rem;
    padding: .7rem .85rem; border-radius: .65rem; border: 1px solid var(--atp-border);
    color: var(--atp-text); text-decoration: none; font-size: .88rem; font-weight: 600;
    transition: border-color .15s, background .15s, transform .15s;
}
.mega-industry-link i { color: var(--atp-navy); font-size: 1.1rem; }
.mega-industry-link:hover { border-color: var(--atp-blue); background: rgba(20, 135, 217, .06); transform: translateY(-1px); }
@media (max-width: 1279px) {
    .mega-panel-inner { grid-template-columns: repeat(3, 1fr); }
}
.mega-panel-hint { font-size: .82rem; color: var(--atp-muted); }
.mega-panel-hint i { color: var(--atp-cyan); }

/* ---------------- mobile nav ---------------- */
.mobile-nav { width: min(88vw, 360px); }
.mobile-nav .offcanvas-header { border-bottom: 1px solid var(--atp-border); }
.mobile-nav-list { gap: .1rem; }
.mobile-nav-list > li { border-bottom: 1px solid var(--atp-border); }
.mobile-nav .nav-link {
    color: var(--atp-text); font-weight: 600; font-size: 1rem;
    padding: .8rem .25rem; border-radius: .5rem;
}
.mobile-nav .nav-link.active { color: var(--atp-blue-deep); }
.mobile-nav-toggle {
    width: 100%; background: none; border: none; text-align: left;
    display: flex; align-items: center; justify-content: space-between;
}
.mobile-nav-toggle i { transition: transform .2s ease; font-size: .95rem; color: var(--atp-muted); }
.mobile-nav-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.mobile-nav-sub { list-style: none; margin: 0 0 .75rem; padding: 0 0 0 .25rem; display: grid; gap: .1rem; }
.mobile-nav-sub a {
    display: block; padding: .5rem .6rem; border-radius: .45rem;
    color: var(--atp-muted); font-size: .9rem; text-decoration: none;
    border-left: 2px solid var(--atp-border);
}
.mobile-nav-sub a:hover { color: var(--atp-blue); background: rgba(20, 135, 217, .06); border-left-color: var(--atp-blue); }

/* ---------------- buttons ---------------- */
.btn-cta {
    /* Deep blue to a mid cyan-blue — NOT the full-brightness --atp-cyan (#22b8ea):
       computed contrast for white text against that end-stop is ~2.4:1, well under
       WCAG AA. #0a6f9c keeps the same visual direction (mirrors the logo's own
       A-mark gradient) while clearing ~5.6:1. --atp-cyan itself stays untouched
       for uses that aren't white-text-on-fill (icons, borders, glows, hero text). */
    background: linear-gradient(135deg, var(--atp-blue-deep) 0%, #0a6f9c 100%);
    color: #fff; font-weight: 600; border: none; border-radius: .65rem;
    padding: .6rem 1.4rem;
    box-shadow: 0 4px 14px rgba(20, 135, 217, .35);
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(34, 184, 234, .45); }
.btn-ghost {
    background: rgba(255, 255, 255, .08); color: #fff; font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .25); border-radius: .65rem; padding: .6rem 1.4rem;
    backdrop-filter: blur(6px);
    transition: background .2s, border-color .2s;
}
.btn-ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .45); }

/* ---------------- hero ---------------- */
.hero-3d {
    position: relative;
    min-height: 100svh;
    display: flex; align-items: center;
    background: radial-gradient(ellipse 90% 60% at 70% 20%, #16305e 0%, #0c1c3f 45%, #060d20 100%);
    color: #fff;
    overflow: hidden;
    padding: calc(var(--nav-h) + var(--topbar-h) + 2.5rem) 0 3.5rem;
}
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-content { position: relative; z-index: 2; }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: #a9d9f5;
    background: rgba(34, 184, 234, .14);
    border: 1px solid rgba(34, 184, 234, .35);
    padding: .4rem 1rem; border-radius: 2rem;
}
.hero-title { font-size: clamp(2.3rem, 6vw, 4.75rem); font-weight: 800; line-height: 1.1; max-width: 1100px; }
.hero-title .grad {
    background: linear-gradient(90deg, #5eb3f0, #22c1e8 55%, #7ceeff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { color: #aab8d4; font-size: 1.15rem; max-width: 820px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-col { max-width: 1180px; }
.hero-chip {
    font-size: .8rem; font-weight: 600; color: #cdd9f0;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
    padding: .35rem .85rem; border-radius: 2rem;
}

/* ---------------- hero slider ---------------- */
.hero-slider { position: relative; min-height: 420px; }
.hero-slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}
.hero-slide.active {
    position: relative; opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
    transition: opacity .6s ease, transform .6s ease, visibility 0s;
}
.hero-slide .hero-eyebrow {
    border-color: color-mix(in srgb, var(--slide-accent, var(--atp-navy)) 45%, transparent);
    background: color-mix(in srgb, var(--slide-accent, var(--atp-navy)) 16%, transparent);
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: opacity .2s linear, visibility 0s; transform: none; }
    .hero-slide.active { transition: opacity .2s linear, visibility 0s; }
}
.hero-dots { display: flex; gap: .25rem; margin-top: 1.25rem; }
/* The visible indicator is a 4px bar, but a 4px-tall button is far too small to
   tap reliably. Vertical padding grows the hit area to 24px while background-clip
   keeps the paint confined to the content box, so the control still LOOKS like a
   thin bar and the touch target meets WCAG 2.5.8. */
.hero-dot {
    width: 32px; height: 4px; border-radius: 2px; border: none;
    padding: 10px 0; background-clip: content-box; box-sizing: content-box;
    background-color: rgba(255, 255, 255, .22); cursor: pointer;
    transition: background-color .25s ease, transform .2s ease;
}
.hero-dot:hover { background-color: rgba(255, 255, 255, .4); }
.hero-dot.active { background-image: linear-gradient(90deg, var(--atp-blue), var(--atp-cyan)); }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-stats { border-top: 1px solid rgba(255, 255, 255, .1); }
.hero-stat .num { font-family: 'Poppins'; font-size: 1.8rem; font-weight: 700; color: #fff; }
.hero-stat .lbl { font-size: .8rem; color: #8b9cbd; }
.scroll-cue {
    position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
    color: #6c7fa5; z-index: 2; animation: cue 2s infinite;
}
@keyframes cue { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ---------------- sections ---------------- */
.section { padding: var(--space-section) 0; }
.section-tight { padding: var(--space-section-sm) 0; }
.section-dark { background: var(--atp-ink); color: #fff; }
.section-soft { background: var(--atp-surface); }
.section-eyebrow {
    font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--atp-blue);
}
.section-title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.section-sub { color: var(--atp-muted); max-width: 640px; }
.section-dark .section-sub { color: #93a3c0; }

/* ---------------- 3D tilt cards ---------------- */
.tilt-card { transform-style: preserve-3d; will-change: transform; transition: transform .18s ease-out, box-shadow .25s; }
.tilt-card:hover { box-shadow: var(--shadow-lg); }
.tilt-card .tilt-inner { transform: translateZ(28px); }

.service-card {
    position: relative; height: 100%;
    background: #fff; border: 1px solid var(--atp-border); border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    text-decoration: none; color: inherit;
    display: block;
}
.service-card::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: var(--card-accent, var(--atp-blue));
    opacity: 0; transition: opacity .25s;
}
.service-card:hover::before { opacity: 1; }
.service-icon {
    width: 56px; height: 56px; border-radius: 16px;
    display: grid; place-items: center; font-size: 1.5rem; color: #fff;
    background: var(--card-accent, var(--atp-blue));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--card-accent, var(--atp-blue)) 40%, transparent);
}
.service-card h3 { font-size: 1.15rem; font-weight: 600; }
.service-card p { color: var(--atp-muted); font-size: .92rem; }
.service-card .go { color: var(--card-accent, var(--atp-blue)); font-weight: 600; font-size: .9rem; }

/* bento grid */
.bento-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(12, 1fr); }
.bento-item { grid-column: span 12; }
@media (min-width: 768px) {
    .bento-item { grid-column: span 6; }
    .bento-item.wide { grid-column: span 8; }
    .bento-item.narrow { grid-column: span 4; }
}
@media (min-width: 1200px) {
    .bento-item { grid-column: span 4; }
    .bento-item.wide { grid-column: span 8; }
    .bento-item.narrow { grid-column: span 4; }
}

/* ---------------- portfolio ---------------- */
.portfolio-card {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    background: var(--atp-ink-2); color: #fff;
    aspect-ratio: 16/11; display: block; text-decoration: none;
    box-shadow: var(--shadow-sm);
}
.portfolio-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.portfolio-card:hover img { transform: scale(1.06); }
.portfolio-card .overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(7, 12, 24, .92) 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1.5rem; color: #fff;
}
.portfolio-card .cat { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #8ab4f8; }
.portfolio-ph {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #1c2b4a, #0e1730);
    font-family: 'Poppins'; font-size: 2.4rem; font-weight: 800; color: rgba(255,255,255,.25);
}

/* ---------------- ambient section backgrounds ----------------
   Soft floating gradient blobs for sections that otherwise read as flat white/navy
   slabs — a lighter-weight motion cue than the hero's canvas animation. Apply to a
   handful of sections per page, never stacked back-to-back. */
.section-tech { position: relative; overflow: hidden; }
.section-tech::before, .section-tech::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(70px);
    opacity: .28; pointer-events: none; z-index: 0;
}
.section-tech::before { width: 420px; height: 420px; background: var(--atp-cyan); top: -160px; right: -120px; }
.section-tech::after { width: 380px; height: 380px; background: var(--atp-blue); bottom: -160px; left: -100px; }
.section-tech > .container { position: relative; z-index: 1; }
.section-tech.on-dark::before { opacity: .2; }
.section-tech.on-dark::after { opacity: .16; }
@media (prefers-reduced-motion: no-preference) {
    .section-tech::before { animation: atp-float-blob 15s ease-in-out infinite; }
    .section-tech::after { animation: atp-float-blob 19s ease-in-out infinite reverse; }
}
@keyframes atp-float-blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-22px, 26px) scale(1.08); }
}

/* Subtle hover motion on icon tiles — reinforces interactivity beyond color. */
.service-icon { transition: transform .35s ease; }
.service-card:hover .service-icon { transform: scale(1.08) rotate(-4deg); }

/* ---------------- testimonials ---------------- */
.testimonial-card {
    background: #fff; border: 1px solid var(--atp-border); border-radius: var(--radius-lg);
    padding: 1.75rem; height: 100%;
    box-shadow: var(--shadow-sm);
}
.testimonial-card .stars { color: var(--atp-yellow); }
.testimonial-card .msg { color: var(--atp-text); font-size: .95rem; }
.avatar-initials {
    width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center; color: #fff; font-weight: 700;
    background: linear-gradient(135deg, var(--atp-navy), var(--atp-cyan));
}

/* ---------------- blog cards ---------------- */
.blog-card {
    background: #fff; border: 1px solid var(--atp-border); border-radius: var(--radius-lg);
    overflow: hidden; height: 100%; display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    transition: transform .25s, box-shadow .25s;
    box-shadow: var(--shadow-sm);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); color: inherit; }
.blog-card .thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--atp-ink-2); display: grid; place-items: center; }
.blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-card:hover .thumb img { transform: scale(1.05); }
.blog-card h2, .blog-card h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
.blog-card:hover h2, .blog-card:hover h3 { color: var(--atp-blue-deep); }
.blog-card .meta { font-size: .8rem; color: var(--atp-muted); }

/* ---------------- counters ---------------- */
.counter-tile { text-align: center; }
.counter-tile .num { font-family: 'Poppins'; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
.counter-tile .lbl { color: #93a3c0; font-size: .9rem; }

/* ---------------- CTA band ---------------- */
.cta-band {
    background:
        radial-gradient(ellipse 70% 120% at 85% 10%, rgba(34, 184, 234, .22), transparent 60%),
        radial-gradient(ellipse 70% 120% at 10% 90%, rgba(20, 135, 217, .3), transparent 60%),
        var(--atp-ink);
    border-radius: var(--radius-lg);
    color: #fff;
    padding: 3.5rem 2rem;
    position: relative; overflow: hidden;
}

/* ---------------- forms ---------------- */
.form-card {
    background: #fff; border: 1px solid var(--atp-border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); padding: 2rem;
}
.form-control, .form-select { padding: .65rem .9rem; border-radius: .6rem; border-color: var(--atp-border); }
.form-control:focus, .form-select:focus { border-color: var(--atp-blue); box-shadow: 0 0 0 .2rem rgba(20, 135, 217, .15); }
.form-label { font-weight: 600; font-size: .88rem; }

/* ---------------- page hero (inner pages) ----------------
   The old fixed 9rem top pad was hand-tuned against a navbar that has since
   changed height, leaving a visible dead band under the header on every inner
   page. Deriving it from --nav-h keeps the gap correct and consistent. */
.page-hero {
    background:
        radial-gradient(ellipse 80% 90% at 80% -10%, #1d3468 0%, transparent 60%),
        var(--atp-ink);
    color: #fff;
    padding: calc(var(--nav-h) + 2.75rem) 0 3rem;
    position: relative; overflow: hidden;
}
/* Topic photo behind the inner-page header. Held at low opacity over the dark
   base so the white heading keeps its contrast ratio — the picture sets the
   subject, it never competes with the text. Pages set --hero-bg inline; without
   it this layer simply paints nothing. */
.page-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: var(--hero-bg, none);
    background-size: cover;
    background-position: center;
    opacity: .22;
}
/* Scrim: keeps the left side (where the h1 and breadcrumb sit) darkest regardless
   of how bright the underlying photo happens to be. */
.page-hero > .container::before {
    content: ''; position: absolute; inset: -100% -50% -100% -50%;
    background: linear-gradient(90deg, rgba(8, 14, 30, .92) 0%, rgba(8, 14, 30, .78) 45%, rgba(8, 14, 30, .45) 100%);
    z-index: -1; pointer-events: none;
}

/* faint circuit-grid so the inner-page header isn't a flat slab */
.page-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 100% at 75% 0%, #000, transparent 70%);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .breadcrumb { --bs-breadcrumb-divider-color: #64748b; font-size: .85rem; }
.page-hero .breadcrumb a { color: #9db8e8; text-decoration: none; }
.page-hero .breadcrumb a:hover { color: #fff; text-decoration: underline; }
.page-hero .breadcrumb .active { color: #cbd5e1; }
.page-hero .section-sub { color: #a7b8d6 !important; }
.page-hero-lede { max-width: 760px; font-size: 1.05rem; }

/* ---------------- scroll reveal ---------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }

/* ---------------- prose (blog/page body) ---------------- */
.prose { font-size: 1.02rem; line-height: 1.75; }
.prose img { border-radius: var(--radius-md); }
.prose h2, .prose h3 { margin-top: 2rem; }

/* ---------------- pagination ----------------
   Laravel now renders the Bootstrap 5 paginator (set in AppServiceProvider);
   this restyles it as rounded pills to match the filter chips above the grid,
   and stacks the "showing X of Y" summary above the controls on mobile. */
.pagination { --bs-pagination-border-radius: 2rem; gap: .35rem; margin-bottom: 0; }
.page-link {
    border-radius: 2rem !important;
    border-color: var(--atp-border);
    color: var(--atp-navy);
    font-size: .9rem; font-weight: 600;
    padding: .45rem .9rem;
    transition: background .15s, border-color .15s, color .15s;
}
.page-link:hover { background: rgba(20, 135, 217, .08); border-color: var(--atp-blue); color: var(--atp-blue); }
.page-item.active .page-link {
    background: linear-gradient(135deg, var(--atp-blue), var(--atp-blue-deep));
    border-color: transparent; color: #fff;
}
.page-item.disabled .page-link { color: var(--atp-muted); background: transparent; border-color: var(--atp-border); opacity: .55; }
/* The paginator wrapper is a flex row on desktop (summary left, links right);
   on narrow screens center both and stack them so nothing overflows. */
nav[role="navigation"] .flex-fill { justify-content: center; }
@media (max-width: 575.98px) {
    .pagination { flex-wrap: wrap; justify-content: center; }
}

/* ---------------- footer ---------------- */
.site-footer {
    background: #0b1220; color: #cbd5e1;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, var(--atp-navy), var(--atp-blue), var(--atp-cyan), var(--atp-blue)) 1;
}
.footer-heading {
    color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    margin-bottom: 1.1rem; position: relative; padding-bottom: .6rem;
}
.footer-heading::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px;
    background: linear-gradient(90deg, var(--atp-blue), var(--atp-cyan));
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .55rem; }
/* Icon + label. The icon is a fixed-width flex item so multi-line labels
   ("Healthcare & MedTech", "Custom Software Development") stay hanging-indented
   under the text rather than wrapping back beneath the icon. */
.footer-links a {
    color: #94a3b8; text-decoration: none; font-size: .9rem; line-height: 1.45;
    display: flex; align-items: flex-start; gap: .55rem;
    transition: color .2s ease, transform .2s ease;
}
.footer-links a > i {
    flex: 0 0 1.05rem; width: 1.05rem; margin-top: .12rem;
    font-size: .9rem; color: var(--atp-cyan); opacity: .8;
    transition: opacity .2s ease, color .2s ease;
}
.footer-links a:hover { color: #fff; transform: translateX(3px); }
.footer-links a:hover > i { opacity: 1; }
.footer-links a span > i { font-size: .8rem; vertical-align: baseline; }

.social-link {
    width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .07); color: #cbd5e1;
    transition: background .2s, color .2s, transform .2s;
}
.social-link:hover { background: var(--atp-blue); color: #fff; transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); }

/* ---------------- misc ---------------- */
.badge-tech {
    font-size: .78rem; font-weight: 600;
    background: rgba(20, 135, 217, .08); color: var(--atp-blue-deep);
    border: 1px solid rgba(20, 135, 217, .2);
    padding: .35rem .8rem; border-radius: 2rem;
}
.faq-accordion .accordion-item { border: 1px solid var(--atp-border); border-radius: var(--radius-md) !important; margin-bottom: .75rem; overflow: hidden; }
.faq-accordion .accordion-button { font-weight: 600; font-size: .98rem; }
.faq-accordion .accordion-button:not(.collapsed) { background: rgba(20, 135, 217, .06); color: var(--atp-blue-deep); box-shadow: none; }

/* ---------------- accessibility: visible focus states (WCAG 2.1 AA, 2.4.7) ----------------
   No rule in this file removes the native outline, but several custom interactive
   elements (cards, pill buttons, nav links) sit on backgrounds where the default
   outline has poor contrast. This gives every focusable element a consistent,
   high-contrast ring regardless of what it's sitting on. */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.service-card:focus-visible, .tilt-card:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
.nav-link:focus-visible, .accordion-button:focus-visible {
    outline: 3px solid var(--atp-blue);
    outline-offset: 2px;
    border-radius: 4px;
}
/* On dark hero/CTA sections the blue ring loses contrast against the dark background —
   swap to a light ring wherever a dark section wrapper is present. */
.hero-3d :focus-visible, .page-hero :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible {
    outline-color: #fff;
}

/* ---------------- floating contact CTA ---------------- */
.floating-cta {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1040;
    display: flex; flex-direction: column; gap: .65rem;
}
.floating-cta-btn {
    display: inline-grid; place-items: center;
    width: 52px; height: 52px; border-radius: 50%;
    color: #fff; font-size: 1.3rem;
    box-shadow: var(--shadow-lg);
    transition: transform .15s ease, box-shadow .15s ease;
    border: none; cursor: pointer; font-family: inherit;
}
.floating-cta-btn:hover, .floating-cta-btn:focus-visible { transform: translateY(-3px) scale(1.05); color: #fff; }
.floating-cta-whatsapp { background: #25d366; }
.floating-cta-call { background: var(--atp-blue); animation: cta-pulse 2.4s ease-in-out infinite; }
.floating-cta-chat { background: linear-gradient(135deg, var(--atp-navy), var(--atp-blue)); }
@keyframes cta-pulse {
    0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(20, 135, 217, .35); }
    50% { box-shadow: var(--shadow-lg), 0 0 0 10px rgba(20, 135, 217, 0); }
}
@media (max-width: 576px) {
    .floating-cta { right: .85rem; bottom: .85rem; }
    .floating-cta-btn { width: 46px; height: 46px; font-size: 1.15rem; }
}

/* ---------------- chat widget ---------------- */
.chatbot-panel {
    position: fixed; right: 1.25rem; bottom: 5.75rem; z-index: 1041;
    width: min(92vw, 360px); max-height: min(75vh, 560px);
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; overflow: hidden;
    animation: chatbot-pop .2s ease;
}
@keyframes chatbot-pop {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.chatbot-header {
    background: linear-gradient(135deg, var(--atp-navy), var(--atp-blue-deep));
    color: #fff; padding: 1rem 1.1rem;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    flex-shrink: 0;
}
.chatbot-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; font-size: 1.1rem;
    background: rgba(255, 255, 255, .14);
}
.chatbot-status { font-size: .75rem; color: #a9d9f5; display: flex; align-items: center; gap: .35rem; }
.chatbot-status .dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; display: inline-block; }
.chatbot-close {
    background: transparent; border: none; color: #fff; opacity: .8;
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    cursor: pointer; transition: background .15s, opacity .15s;
}
.chatbot-close:hover, .chatbot-close:focus-visible { opacity: 1; background: rgba(255, 255, 255, .14); }
.chatbot-body { padding: 1.1rem; overflow-y: auto; }
.chatbot-greeting { font-size: .9rem; color: var(--atp-text); margin-bottom: 1rem; }
.chatbot-quick-actions { display: flex; flex-direction: column; gap: .55rem; }
.chatbot-quick-btn {
    display: flex; align-items: center; gap: .6rem;
    padding: .65rem .9rem; border-radius: .7rem; border: 1px solid var(--atp-border);
    background: var(--atp-surface); color: var(--atp-text); text-decoration: none;
    font-size: .87rem; font-weight: 600; text-align: left; cursor: pointer; width: 100%;
    transition: border-color .15s, background .15s, transform .15s;
}
.chatbot-quick-btn i { color: var(--atp-blue); font-size: 1.05rem; }
.chatbot-quick-btn:hover { border-color: var(--atp-blue); background: rgba(20, 135, 217, .06); transform: translateY(-1px); color: var(--atp-text); }
.chatbot-back {
    background: none; border: none; color: var(--atp-blue); font-weight: 600; font-size: .85rem;
    padding: 0; margin-bottom: .75rem; cursor: pointer; display: flex; align-items: center; gap: .35rem;
}
.chatbot-search { margin-bottom: .75rem; }
.chatbot-faq-results { display: flex; flex-direction: column; gap: .5rem; max-height: 280px; overflow-y: auto; }
.chatbot-faq-item { border: 1px solid var(--atp-border); border-radius: .6rem; overflow: hidden; }
.chatbot-faq-q {
    width: 100%; text-align: left; background: #fff; border: none; padding: .65rem .8rem;
    font-size: .85rem; font-weight: 600; color: var(--atp-text); cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.chatbot-faq-q i { color: var(--atp-muted); transition: transform .15s; flex-shrink: 0; }
.chatbot-faq-q.open i { transform: rotate(180deg); }
.chatbot-faq-a { padding: 0 .8rem .75rem; font-size: .83rem; color: var(--atp-muted); line-height: 1.5; }
.chatbot-faq-empty { font-size: .85rem; color: var(--atp-muted); padding: .5rem 0; }
.chatbot-form .form-control { font-size: .87rem; }

@media (max-width: 576px) {
    .chatbot-panel { right: .85rem; bottom: 4.75rem; width: calc(100vw - 1.7rem); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .scroll-cue { animation: none; }
    .floating-cta-call { animation: none; }
    .chatbot-panel { animation: none; }
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ================================================================
   Media cards, trust elements and footer — added in the UI/SEO pass
   ================================================================ */

/* ---------------- card media ----------------
   Every listing card now leads with a topic image instead of an icon on a flat
   card. The image is a fixed aspect box so the grid never reflows while covers
   load, and the icon badge sits on top so the icon language from the old design
   survives. */
.card-media {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 16 / 9; background: var(--atp-ink-2);
    border-radius: var(--radius-md);
}
.card-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s ease;
}
.service-card:hover .card-media img,
.media-card:hover .card-media img { transform: scale(1.06); }
.card-media-badge {
    position: absolute; left: .85rem; bottom: .85rem;
    width: 44px; height: 44px; border-radius: 13px;
    display: grid; place-items: center; font-size: 1.15rem; color: #fff;
    background: var(--card-accent, var(--atp-blue));
    box-shadow: 0 8px 18px rgba(4, 10, 24, .45);
}
.card-media-tag {
    position: absolute; right: .85rem; top: .85rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; background: rgba(7, 17, 39, .72); backdrop-filter: blur(6px);
    padding: .3rem .6rem; border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, .18);
}

/* image-led variant of .service-card.
   Inside the bento grid the media uses a fixed height rather than an aspect
   ratio: a wide card and a narrow card sit in the same grid row, so ratio-based
   sizing made the wide card's image ~2x taller and left the narrow card padded
   out with dead space to match. Equal image heights let the text decide the
   row height instead. */
.service-card--media { padding: 0; display: flex; flex-direction: column; }
.service-card--media .card-media {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    aspect-ratio: auto; height: 210px;
}
.service-card--media .card-body-pad { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.service-card--media .go { margin-top: auto; }
.service-card--media h3 { font-size: 1.1rem; margin-bottom: .5rem; }
/* .bento-item and .service-card--media land on the SAME element, so this has to
   be a compound selector — a descendant selector here silently never matches. */
.bento-item.wide.service-card--media .card-media { height: 250px; }
@media (max-width: 767.98px) {
    .service-card--media .card-media,
    .bento-item.wide.service-card--media .card-media { height: 190px; }
}

/* generic image-led card used by industries/locations */
.media-card {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid var(--atp-border); border-radius: var(--radius-lg);
    overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.media-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(20, 135, 217, .3); color: inherit; }
.media-card .card-media { border-radius: 0; }
.media-card-body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.media-card h3 { font-size: 1.08rem; font-weight: 600; margin-bottom: .45rem; }
.media-card p { color: var(--atp-muted); font-size: .92rem; }
.media-card .go { color: var(--atp-blue); font-weight: 600; font-size: .9rem; margin-top: auto; }

/* full-width detail-page banner */
.detail-banner {
    width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block;
    border-radius: var(--radius-lg);
}
@media (max-width: 767.98px) { .detail-banner { aspect-ratio: 16 / 9; } }

/* ---------------- trust + proof elements ---------------- */
.trust-strip {
    display: flex; flex-wrap: wrap; gap: 1rem 2rem;
    align-items: center; justify-content: center;
}
.trust-strip span {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .88rem; font-weight: 600; color: var(--atp-muted);
}
.trust-strip i { color: var(--atp-blue); font-size: 1.05rem; }

.value-tile {
    height: 100%; background: #fff; border: 1px solid var(--atp-border);
    border-radius: var(--radius-md); padding: 1.4rem;
    box-shadow: var(--shadow-sm);
}
.value-tile i { font-size: 1.5rem; color: var(--atp-blue); }
.value-tile h3 { font-size: 1rem; font-weight: 600; margin: .75rem 0 .4rem; }
.value-tile p { font-size: .9rem; color: var(--atp-muted); margin: 0; }

/* numbered delivery process */
.process-step { position: relative; padding-left: 3.4rem; }
.process-step + .process-step { margin-top: 1.75rem; }
.process-step .step-num {
    position: absolute; left: 0; top: 0;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    display: grid; place-items: center;
    font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .95rem; color: #fff;
    background: linear-gradient(140deg, var(--atp-navy), var(--atp-blue));
}
.process-step h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: .35rem; }
.process-step p { color: var(--atp-muted); font-size: .93rem; margin: 0; }

/* inline lead magnet / conversion strip inside long pages */
.lead-strip {
    background: linear-gradient(135deg, rgba(20, 39, 92, .05), rgba(34, 184, 234, .09));
    border: 1px solid rgba(20, 135, 217, .18);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.75rem;
}
.lead-strip h3 { font-size: 1.12rem; font-weight: 700; margin-bottom: .3rem; }
.lead-strip p { color: var(--atp-muted); font-size: .93rem; margin: 0; }

/* on-page table of contents for long-form articles */
.toc { border: 1px solid var(--atp-border); border-radius: var(--radius-md); padding: 1.1rem 1.25rem; background: var(--atp-surface); }
.toc-title { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--atp-muted); margin-bottom: .6rem; }
.toc ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.toc a { color: var(--atp-blue-deep); text-decoration: none; font-size: .92rem; }
.toc a:hover { text-decoration: underline; }

/* ---------------- prose hardening ----------------
   Body copy comes from a rich-text editor, so these rules have to hold whatever
   markup the CMS produces. */
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.2rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: .4rem; }
.prose a { color: var(--atp-blue-deep); text-underline-offset: 3px; }
.prose blockquote {
    margin: 1.75rem 0; padding: .35rem 0 .35rem 1.15rem;
    border-left: 3px solid var(--atp-cyan); color: var(--atp-muted); font-style: italic;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .93rem; }
.prose th, .prose td { border: 1px solid var(--atp-border); padding: .6rem .75rem; text-align: left; }
.prose th { background: var(--atp-surface); font-weight: 600; }
.prose img { height: auto; }
.prose figure { margin: 1.5rem 0; }
.prose figcaption { font-size: .85rem; color: var(--atp-muted); margin-top: .5rem; }
.prose pre {
    background: var(--atp-ink); color: #e2e8f0; padding: 1rem 1.15rem;
    border-radius: var(--radius-md); overflow-x: auto; font-size: .87rem;
}
.prose :not(pre) > code {
    background: rgba(20, 135, 217, .08); color: var(--atp-blue-deep);
    padding: .12rem .4rem; border-radius: .3rem; font-size: .9em;
}

/* ---------------- footer ---------------- */
.footer-cta {
    background:
        radial-gradient(ellipse 60% 140% at 88% 0%, rgba(34, 184, 234, .28), transparent 62%),
        radial-gradient(ellipse 70% 140% at 5% 100%, rgba(20, 135, 217, .3), transparent 60%),
        var(--atp-navy);
    color: #fff; padding: 3rem 0;
}
.footer-cta-title { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; }
.footer-cta-sub { color: #b9cbe8; font-size: .97rem; max-width: 62ch; }
.footer-brand { text-decoration: none; }
.footer-logo-plate {
    display: inline-block; background: #fff; border-radius: .6rem; padding: .35rem .6rem;
    line-height: 0;
}
.footer-logo-plate img { height: 46px; width: auto; max-width: 200px; object-fit: contain; }
.footer-about { color: #93a3b8; font-size: .89rem; line-height: 1.65; }
.footer-nap { font-style: normal; color: #93a3b8; font-size: .88rem; line-height: 1.55; }
.footer-nap i { color: var(--atp-cyan); font-size: .85rem; }
.footer-nap a { color: #cbd5e1; text-decoration: none; }
.footer-nap a:hover { color: #fff; }
.footer-heading {
    color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.footer-link-all { color: var(--atp-cyan) !important; font-weight: 600; }
.footer-trust {
    display: flex; flex-wrap: wrap; gap: .75rem 2rem;
    padding: 1.1rem 0; border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer-trust span { display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; color: #9fb0c7; }
.footer-trust i { color: var(--atp-cyan); font-size: 1rem; }
.footer-bottom { color: #94a3b8; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-legal a { color: #94a3b8; text-decoration: none; }
.footer-legal a:hover { color: #fff; }
.back-to-top { font-weight: 600; }

/* ---------------- small-screen tuning ---------------- */
@media (max-width: 991.98px) {
    .hero-slider { min-height: 460px; }
    .cta-band { padding: 2.5rem 1.25rem; }
    .footer-cta { padding: 2.25rem 0; }
}
@media (max-width: 575.98px) {
    .hero-stats { gap: 1.25rem !important; }
    .hero-stat .num { font-size: 1.5rem; }
    .service-card { padding: 1.35rem; }
    .form-card { padding: 1.35rem; }
    .lead-strip { padding: 1.25rem; }
    .btn-lg { padding: .6rem 1.15rem; font-size: 1rem; }
}

/* ---------------- technology marquee (home) ----------------
   Two rows scrolling in opposite directions. The track contains the list twice
   and translates to -50%, which loops seamlessly ONLY because spacing lives on
   each chip's margin-right rather than on a flex gap — with gap, the two halves
   differ by one gap width and the seam visibly jumps every cycle. */
.tech-band {
    background:
        radial-gradient(ellipse 60% 120% at 88% -10%, rgba(34, 184, 234, .22), transparent 62%),
        radial-gradient(ellipse 70% 120% at 6% 110%, rgba(20, 135, 217, .24), transparent 60%),
        var(--atp-ink);
    color: #fff;
    overflow: hidden;
}
.tech-marquee {
    position: relative;
    overflow: hidden;
    padding: .45rem 0;
    /* Fade both edges so chips enter and leave instead of being hard-cropped. */
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tech-track {
    display: flex;
    width: max-content;
    animation: tech-scroll 46s linear infinite;
    will-change: transform;
}
.tech-track--reverse { animation-direction: reverse; animation-duration: 58s; }
/* Pause on hover and on keyboard focus, so a visitor can actually read a chip
   they're interested in instead of chasing it across the screen. */
.tech-marquee:hover .tech-track,
.tech-marquee:focus-within .tech-track { animation-play-state: paused; }
@keyframes tech-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.tech-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    flex: 0 0 auto; margin-right: .85rem;
    padding: .6rem 1.15rem; border-radius: 2rem;
    font-size: .92rem; font-weight: 600; color: #dbe6f7; white-space: nowrap;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.tech-chip i { color: var(--tech-accent, var(--atp-cyan)); font-size: 1.05rem; }
.tech-logo { width: 20px; height: 20px; flex: 0 0 auto; display: block; }
.tech-chip:hover {
    color: #fff;
    background: color-mix(in srgb, var(--tech-accent, var(--atp-cyan)) 14%, transparent);
    border-color: color-mix(in srgb, var(--tech-accent, var(--atp-cyan)) 55%, transparent);
}
@media (max-width: 575.98px) {
    .tech-chip { font-size: .85rem; padding: .5rem .95rem; margin-right: .6rem; }
}
/* Reduced motion: stop the scroll entirely and let the row wrap into a static
   list, rather than leaving half the catalog permanently off-screen. */
@media (prefers-reduced-motion: reduce) {
    .tech-marquee { mask-image: none; -webkit-mask-image: none; padding-inline: 1rem; }
    .tech-track {
        animation: none;
        width: auto; flex-wrap: wrap; justify-content: center; row-gap: .6rem;
    }
    /* Drop every repeated chip and the mirrored second row, so what remains is
       the catalog exactly once as a static wrapped list. */
    .tech-chip--dup { display: none; }
    .tech-marquee + .tech-marquee { display: none; }
}

/* ---------------- quote page ----------------
   The form is the page's whole purpose, so on desktop it stays in view while the
   trust column scrolls past it, and on mobile it leads (see the order-* classes
   in quote.blade.php). */
@media (min-width: 992px) {
    .quote-form-card { position: sticky; top: calc(var(--nav-h) + 1.25rem); }
}

/* ---------------- mobile form ergonomics ----------------
   iOS Safari zooms the viewport whenever a focused control's font-size is under
   16px, which visually breaks the layout mid-typing and cannot be undone by the
   user. Holding inputs at 16px on small screens prevents that, and the taller
   min-height keeps every control above the 44px minimum touch target. */
@media (max-width: 767.98px) {
    .form-control, .form-select {
        font-size: 16px;
        min-height: 48px;
        padding-top: .7rem; padding-bottom: .7rem;
    }
    textarea.form-control { min-height: 130px; }
    /* The chatbot panel uses .form-control-sm, which is below the 16px iOS zoom
       threshold — the popup is small and fixed-position, so a zoom while typing
       pushes it off screen entirely. */
    .chatbot-panel .form-control, .chatbot-panel .form-control-sm { font-size: 16px; min-height: 44px; }
    .form-label { font-size: .92rem; margin-bottom: .3rem; }
    /* Full-width primary action: a half-width submit button on a phone is an
       easy target to miss and reads as secondary. */
    .form-card .btn-cta, .quote-form-card .btn-cta { width: 100%; justify-content: center; }
    .form-card { padding: 1.25rem; }
    /* Category/filter pills render at ~31px, which clears the WCAG minimum but is
       an uncomfortable thumb target; 40px matches the rest of the mobile UI. */
    .btn-sm { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
}