/* ==========================================================================
   TechBiz Security — site-polish.css

   Loaded last on the MAIN site only (not the academy, which has its own UI
   layer). Refinement rather than redesign: the existing structure, palette and
   typography are sound, so this tightens the details that separate a competent
   page from a professional one.

   The brief was "professional" — so deliberately no violet wash, no glow
   effects and no animation here. This site sells penetration testing to
   businesses; restraint reads as competence, and the gamified treatment that
   suits the academy would undercut it.
   ========================================================================== */

/* --------------------------------------------------------- 1. Focus states */
/* A security company whose own site cannot be navigated by keyboard is a bad
   look, and :focus-visible only shows for keyboard users, so mouse users see
   no change at all. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}
:where(a, button):focus:not(:focus-visible) { outline: none; }

/* Skip-link, if the markup provides one, becomes reachable rather than lost. */
.skip-link:focus-visible { position: fixed; top: 12px; left: 12px; z-index: 2000;
    padding: .7rem 1.1rem; background: var(--accent); color: var(--text-on-accent);
    font-weight: 700; border-radius: 8px; }

/* ------------------------------------------------------------ 2. Typography */
/* A measure of ~70 characters is the readable range; full-width paragraphs on
   a 1600px monitor are the most common reason a page feels amateur. */
.section__head p,
.page-hero p { max-width: 68ch; }
.section__head p { margin-inline: auto; }

/* Headings were letter-spacing 0; tightening the large sizes only. */
h1 { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.015em; }

/* Figures in stat rows and pricing line up instead of jittering. */
.stat__num, .stats__num, .pricing__amount, .cpromo__price { font-variant-numeric: tabular-nums; }

/* Body copy sits slightly open for long-form service pages. */
.section p, .page-hero p { line-height: 1.75; }

/* ----------------------------------------------------------- 3. Link affordance */
/* Colour alone is not an affordance, and it fails for colour-blind readers.
   An offset underline on hover is quiet and unambiguous. */
.section a:not(.btn):not(.card):not(.card__link):not(.nav__link):hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* ---------------------------------------------------------------- 4. Cards */
/* The lift was -6px, which reads as playful. Half that, plus a precise accent
   rule along the top edge, reads as engineered — which is what is being sold. */
.card--hover { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.card--hover:hover { transform: translateY(-3px); }

.card--hover::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.card--hover:hover::before { transform: scaleX(1); }

/* The icon tile gains a hairline so it reads as a component, not a colour blob. */
.card__icon { border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); }

/* "Learn more" arrows move on hover — a small, cheap signal of interactivity. */
.card__link i { transition: transform .22s ease; }
.card:hover .card__link i, .card__link:hover i { transform: translateX(4px); }

/* --------------------------------------------------------------- 5. Buttons */
.btn { transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease; }
.btn:active { transform: translateY(1px); }

/* ------------------------------------------------------- 6. The course promo */
/* course-promo.php emits its own <style> block in the BODY, so those rules come
   AFTER this file in document order and win at equal specificity. Every
   override here is therefore doubled (.cpromo.cpromo) to outrank it regardless
   of order — not a hack for its own sake, the alternative is editing a widget
   that is working.

   The card is dropped above 1280px too, not just on laptops: the container is
   1200px wide and centred, so a 340px card pinned 18px from the right edge
   still sits over the third column on any screen narrower than about 1950px.
   The bar is the honest answer at every desktop size. */

/* It is a real revenue mechanic and stays, but at laptop widths a 340px card
   pinned bottom-right sits squarely on top of the third column of a 3-up grid
   — on an 800px viewport it hid an entire service card. Narrower below 1280px,
   and calmer throughout so it reads as part of the site rather than an advert
   someone pasted on. */
/* Between phone and large desktop, a pinned card covers a whole column of a
   3-up grid — at 800px it hid the Network Security Assessment card entirely.
   A full-width bar along the bottom costs a thin strip instead of a card, is a
   pattern people already understand, and needs no JavaScript. */
@media (min-width: 561px) {
    .cpromo.cpromo {
        left: 0; right: 0; bottom: 0;
        width: auto; max-width: none;
        border-radius: 0;
        border-left: 0; border-right: 0; border-bottom: 0;
        padding: .85rem 3rem .85rem 1.2rem;
        display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    }
    /* The long pitch and the phone line are what make it tall. On a bar the
       title, the price and one action are enough to carry the offer. */
    .cpromo.cpromo .cpromo__sub,
    .cpromo.cpromo .cpromo__foot { display: none; }
    /* The international price stays: the PKR batch and the $65 English course
       are two different products, and dropping the line is how someone turns
       up expecting a $65 seat in the Urdu batch. */
    .cpromo.cpromo .cpromo__intl {
        order: 3; margin: 0; font-size: .72rem; color: var(--text-secondary);
        padding-left: .9rem; border-left: 1px solid var(--border);
    }

    .cpromo.cpromo .cpromo__tag { margin: 0; order: 1; }
    .cpromo.cpromo .cpromo__t { margin: 0; order: 2; font-size: 1rem; }
    .cpromo.cpromo .cpromo__price {
        order: 3; margin: 0; padding: 0; border: 0;
        display: flex; align-items: baseline; gap: .35rem;
    }
    .cpromo.cpromo .cpromo__price strong { font-size: 1.15rem; }
    .cpromo.cpromo .cpromo__price em { font-size: .72rem; }
    .cpromo.cpromo .cpromo__cta { order: 4; margin: 0 0 0 auto; display: flex; gap: .5rem; }
    .cpromo.cpromo .cpromo__x { top: 50%; right: 10px; transform: translateY(-50%); }
}
.cpromo.cpromo {
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.cpromo.cpromo .cpromo__x { width: 30px; height: 30px; border-radius: 50%; }
.cpromo.cpromo .cpromo__x:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }

/* Phone: the original rule leaves the full card pinned across the bottom, and
   at 375x812 it took roughly a third of the screen — the pitch, the two prices,
   two buttons and a phone number, all sitting on top of the page until
   dismissed. Same answer as desktop: title, price, one action. The detail is
   one tap away on /courses. */
@media (max-width: 560px) {
    .cpromo.cpromo {
        left: 0; right: 0; bottom: 0;
        width: auto; max-width: none;
        border-radius: 0;
        border-left: 0; border-right: 0; border-bottom: 0;
        padding: .7rem 2.4rem .75rem .9rem;
        display: flex; align-items: center; gap: .5rem .7rem; flex-wrap: wrap;
    }
    .cpromo.cpromo .cpromo__sub,
    .cpromo.cpromo .cpromo__foot,
    .cpromo.cpromo .cpromo__intl { display: none; }

    .cpromo.cpromo .cpromo__tag { margin: 0; order: 1; font-size: .6rem; }
    .cpromo.cpromo .cpromo__t {
        margin: 0; order: 2; font-size: .92rem; line-height: 1.25;
        flex: 1 1 100%;
    }
    .cpromo.cpromo .cpromo__price {
        order: 3; margin: 0; padding: 0; border: 0;
        display: flex; align-items: baseline; gap: .3rem;
    }
    .cpromo.cpromo .cpromo__price strong { font-size: 1.05rem; }
    .cpromo.cpromo .cpromo__price em { display: none; }

    /* One action on a phone. "Free demo class" is the softer of the two and
       the page it leads to is reachable from the nav anyway. */
    .cpromo.cpromo .cpromo__cta { order: 4; margin-left: auto; }
    .cpromo.cpromo .cpromo__cta .btn--ghost { display: none; }
    .cpromo.cpromo .cpromo__cta .btn { padding: .5rem .9rem; font-size: .8rem; }

    .cpromo.cpromo .cpromo__x { top: 8px; right: 8px; transform: none; }
}

/* ------------------------------------------------------------- 7. Selection */
::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); color: var(--text); }

/* ------------------------------------------------------------ 8. Scrollbar */
/* Dark-theme only: a default light scrollbar against a near-black page is the
   kind of detail that quietly cheapens an otherwise careful design. */
:root:not([data-theme="light"]) * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 38%, transparent) transparent;
}
:root:not([data-theme="light"]) ::-webkit-scrollbar { width: 10px; height: 10px; }
:root:not([data-theme="light"]) ::-webkit-scrollbar-track { background: transparent; }
:root:not([data-theme="light"]) ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
:root:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent) 55%, transparent);
    background-clip: content-box;
}

/* -------------------------------------------------------- 9. Images & media */
img, svg, video { max-width: 100%; height: auto; }

/* ------------------------------------------------------- 10. Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .card--hover, .card--hover::before, .btn, .card__link i { transition: none !important; }
    .card--hover:hover { transform: none; }
    .card--hover:hover::before { transform: scaleX(1); }
}

/* ------------------------------------------------------------- 11. Print */
/* Proposals and service pages do get printed and emailed. */
@media print {
    .cpromo.cpromo, .cookie-bar, .intern-banner, .nav, .footer, .chatbot, [data-chat] { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .card { border: 1px solid #ccc !important; background: #fff !important; break-inside: avoid; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}

/* ==========================================================================
   12. Page presence
   --------------------------------------------------------------------------
   The first pass was detail work — focus rings, measure, hover states — and
   the page still read as flat: near-black from top to bottom with cards
   floating on nothing.

   This adds depth without borrowing the academy's violet. The palette stays
   the brand's green/cyan, the texture is a technical grid rather than a
   decorative pattern, and every value is low enough that it never competes
   with the text. A firm selling penetration testing should look engineered,
   not atmospheric.
   ========================================================================== */

body { position: relative; }

body::before,
body::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Real content sits above the backdrop. The header is sticky with its own
   z-index and is left alone — setting position on it would break that. */
body > main,
body > footer,
body > .footer { position: relative; z-index: 1; }

/* Accent light, spread down the document so scrolling actually changes
   something instead of passing a single static gradient. */
:root:not([data-theme="light"]) body::before {
    background:
        radial-gradient(ellipse 1100px 680px at 50% 0%,  rgba(0, 255, 136, .10), transparent 60%),
        radial-gradient(ellipse 820px  600px at 96% 26%, rgba(0, 200, 255, .08), transparent 58%),
        radial-gradient(ellipse 900px  640px at 2%  54%, rgba(0, 255, 136, .07), transparent 58%),
        radial-gradient(ellipse 880px  620px at 92% 82%, rgba(0, 200, 255, .07), transparent 58%);
}
:root[data-theme="light"] body::before {
    background:
        radial-gradient(ellipse 1100px 680px at 50% 0%,  rgba(0, 102, 204, .07), transparent 60%),
        radial-gradient(ellipse 820px  600px at 96% 26%, rgba(0, 160, 214, .05), transparent 58%),
        radial-gradient(ellipse 900px  640px at 2%  54%, rgba(0, 102, 204, .05), transparent 58%);
}

/* An engineering grid — straight lines, not a motif. Masked so it is strongest
   behind the hero and fades as the page becomes dense with text. */
body::after {
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(180deg, #000 0px, rgba(0, 0, 0, .35) 1100px, rgba(0, 0, 0, .18) 100%);
            mask-image: linear-gradient(180deg, #000 0px, rgba(0, 0, 0, .35) 1100px, rgba(0, 0, 0, .18) 100%);
}
:root:not([data-theme="light"]) body::after {
    background-image:
        linear-gradient(rgba(0, 255, 136, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 136, .055) 1px, transparent 1px);
}
:root[data-theme="light"] body::after {
    background-image:
        linear-gradient(rgba(16, 42, 74, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 42, 74, .05) 1px, transparent 1px);
}

/* The hero carries an opaque base gradient that would paint over all of the
   above, exactly as it did on the academy. Keep its accent light, drop the
   base, so the page is one continuous scene. */
:root:not([data-theme="light"]) .hero {
    background:
        radial-gradient(circle at 20% 20%, rgba(0, 255, 136, .10), transparent 45%),
        radial-gradient(circle at 80% 30%, rgba(0, 200, 255, .10), transparent 45%);
}
.section { background: transparent; }

/* Alternating bands give long pages a rhythm, so sections read as separate
   rather than as one continuous scroll. Very low contrast on purpose. */
:root:not([data-theme="light"]) .section:nth-of-type(even) {
    background: rgba(255, 255, 255, .016);
    border-block: 1px solid rgba(255, 255, 255, .04);
}
:root[data-theme="light"] .section:nth-of-type(even) {
    background: rgba(16, 42, 74, .022);
    border-block: 1px solid rgba(16, 42, 74, .05);
}

/* Cards gain a hairline of light along the top edge — the cheapest way to make
   a flat rectangle read as a raised surface. */
:root:not([data-theme="light"]) .card {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .3);
}
:root[data-theme="light"] .card {
    box-shadow: 0 1px 2px rgba(16, 42, 74, .06), 0 6px 20px rgba(16, 42, 74, .05);
}

/* Big figures carry the brand gradient instead of sitting flat. */
.stat__num, .stats__num {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

/* Section eyebrows read as a label rather than small green text. */
.section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .34rem .85rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    body::before, body::after { transition: none; }
}