/* ═══════════════════════════════════════════════════════════════════════════
   TetrsoftNeu.css — Neumorphic ("soft UI") skin for the tetrsoft site.

   Loaded ONLY by Components/Layout/MainLayout_TetrsoftNeu.razor, and every rule
   is scoped under the `.tsneu` wrapper that layout puts around the whole page.
   Nothing here can reach the classic MainLayout_Tetrsoft or any other site.

   The class contract is identical to the inline <style> block of
   MainLayout_Tetrsoft (.ts-topbar / .ts-header / .ts-nav / .ts-mega /
   .ts-footer plus the .ts-inner-hero, .ts-feat-card, .ts-btn-gold … page
   vocabulary), so the existing tetrsoft pages and section widgets render
   unchanged — only repainted.

   Surfaces and shadows follow TetrFramework/Themes/NeuMorphism.xaml (the WPF
   soft-UI theme); the accent stays the tetrsoft brand gold instead of that
   theme's blue.
   ═══════════════════════════════════════════════════════════════════════════ */

.tsneu {
    /* ── Typography (3 levels, same contract as the classic layout) ─────── */
    --type-d: clamp(1.875rem, 3vw, 2.5rem);
    --type-h: 1.125rem;
    --type-b: 0.9rem;

    /* ── Light soft-UI surface ──────────────────────────────────────────── */
    --neu-bg:        #eceff4;
    --neu-sh-d:      #c8cfdb;
    --neu-sh-l:      #ffffff;
    --neu-text:      #4a5468;
    --neu-text-2:    #8a94a6;
    --neu-ink:       #2b3242;

    /* ── Dark soft-UI surface (topbar / hero / CTA / footer) ────────────── */
    --neud-bg:       #23262c;
    --neud-sh-d:     #17191d;
    --neud-sh-l:     #2f343c;
    --neud-text:     rgba(255,255,255,.72);
    --neud-text-2:   rgba(255,255,255,.45);

    /* ── Brand accent ───────────────────────────────────────────────────── */
    --neu-accent:      #FFC107;
    --neu-accent-deep: #e6a000;

    /* ── Gold soft-UI surface — the low-contrast band that replaces the
          template's black stripes. A warm sibling of --neu-bg, close enough
          in value that it reads as a section change, not a hard cut. ────── */
    --neug-bg:   #f3eddc;
    --neug-sh-d: #d6cfb6;
    --neug-sh-l: #fffef7;

    /* ── Depth primitives ───────────────────────────────────────────────── */
    --neu-out-sm: 3px 3px 7px var(--neu-sh-d), -3px -3px 7px var(--neu-sh-l);
    --neu-out:    6px 6px 15px var(--neu-sh-d), -6px -6px 15px var(--neu-sh-l);
    --neu-out-lg: 12px 12px 30px var(--neu-sh-d), -12px -12px 30px var(--neu-sh-l);
    --neu-in:     inset 4px 4px 9px var(--neu-sh-d), inset -4px -4px 9px var(--neu-sh-l);
    --neu-in-sm:  inset 2px 2px 5px var(--neu-sh-d), inset -2px -2px 5px var(--neu-sh-l);

    --neud-out-sm: 3px 3px 7px var(--neud-sh-d), -3px -3px 7px var(--neud-sh-l);
    --neud-out:    6px 6px 15px var(--neud-sh-d), -6px -6px 15px var(--neud-sh-l);
    --neud-in:     inset 4px 4px 9px var(--neud-sh-d), inset -4px -4px 9px var(--neud-sh-l);

    --neug-out-sm: 3px 3px 7px var(--neug-sh-d), -3px -3px 7px var(--neug-sh-l);
    --neug-out:    6px 6px 15px var(--neug-sh-d), -6px -6px 15px var(--neug-sh-l);
    --neug-in:     inset 5px 5px 11px var(--neug-sh-d), inset -5px -5px 11px var(--neug-sh-l);
    --neug-in-sm:  inset 2px 2px 5px var(--neug-sh-d), inset -2px -2px 5px var(--neug-sh-l);

    --neu-r:      18px;
    --neu-r-sm:   12px;
    --neu-r-pill: 999px;

    --neu-header-h: 72px;
    --neu-topbar-h: 54px;   /* taller than the classic 36px strip */
    --neu-ease: all .28s cubic-bezier(.4,0,.2,1);

    background: var(--neu-bg);
    color: var(--neu-text);
    font-size: var(--type-b);
    line-height: 1.75;
}

/* The soft-UI effect only reads correctly when everything sits on one flat
   surface of exactly --neu-bg, so the document ground is painted to match.
   The layout also sets this on <body> via JS for browsers without :has(). */
body.tsneu-body { background: #eceff4; }

/* ── Typography levels ──────────────────────────────────────────────────── */
.tsneu p,
.tsneu li,
.tsneu td,
.tsneu label,
.tsneu .section-header p,
.tsneu #services .description,
.tsneu #why-us .why-us-content .features p,
.tsneu #why-us .counters p,
.tsneu .about-content p,
.tsneu .ts-nav-link,
.tsneu .ts-topbar,
.tsneu .ts-topbar *,
.tsneu #portfolio-flters li,
.tsneu .btn-get-started,
.tsneu .btn-services,
.tsneu .ts-footer-links a,
.tsneu .ts-footer-links span,
.tsneu .ts-footer-brand p,
.tsneu .ts-footer-bottom,
.tsneu .ts-footer-bottom *      { font-size: var(--type-b) !important; }

.tsneu h2, .tsneu h3, .tsneu h4, .tsneu h5, .tsneu h6,
.tsneu #about .about-content h2,
.tsneu #why-us .why-us-content .features h4,
.tsneu #services .title         { font-size: var(--type-h) !important; font-weight: 700; line-height: 1.4; }

.tsneu .section-header h3,
.tsneu .section-title,
.tsneu #why-us .counters span   { font-size: var(--type-d) !important; font-weight: 800; line-height: 1.2; }

.tsneu h1, .tsneu h2, .tsneu h3, .tsneu h4, .tsneu h5, .tsneu h6 { color: var(--neu-ink); }
.tsneu .section-header h3,
.tsneu .section-header h3 a     { color: var(--neu-ink) !important; }
.tsneu .section-header p        { color: var(--neu-text-2); }

/* ═══════════════════ Top Info Bar ═══════════════════════════════════════ */
/* Light soft-UI bar on the same surface as the page, set slightly into it as
   a shallow full-width well — that inset is what separates it from the header
   plane above, since both are now the same grey. */
.tsneu .ts-topbar {
    background: var(--neu-bg);
    color: var(--neu-ink);
    font-size: var(--type-b);
    min-height: var(--neu-topbar-h);
    display: flex;
    align-items: center;
    box-shadow: var(--neu-in-sm);
}
.tsneu .ts-topbar .container    { display: flex; justify-content: space-between; align-items: center; }
.tsneu .ts-topbar-left,
.tsneu .ts-topbar-right         { display: flex; align-items: center; gap: 18px; }
.tsneu .ts-topbar span          { color: var(--neu-ink); }
.tsneu .ts-topbar a             { color: var(--neu-ink); text-decoration: none; font-weight: 500; transition: var(--neu-ease); }
.tsneu .ts-topbar a:hover       { color: var(--neu-accent-deep); }
.tsneu .ts-topbar i             { color: var(--neu-accent-deep); }
.tsneu .ts-topbar .sep          { opacity: .2; color: var(--neu-text-2); }

/* Social chips — raised Neu icon buttons that sink when pressed */
.tsneu .ts-t-social             { display: flex; align-items: center; gap: 10px; }
.tsneu .ts-t-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--neu-bg); color: var(--neu-text);
    box-shadow: var(--neu-out-sm);
    font-size: var(--type-b); transition: var(--neu-ease);
}
.tsneu .ts-t-social a:hover     { color: var(--neu-accent-deep); box-shadow: var(--neu-out); transform: translateY(-1px); }
.tsneu .ts-t-social a:active    { color: var(--neu-accent-deep); box-shadow: var(--neu-in-sm); transform: translateY(0); }
.tsneu .ts-t-social a i         { color: inherit; }

/* ═══════════════════ Header ═════════════════════════════════════════════ */
/* Flat while at the top — it is the same plane as the page — then lifts into
   a soft raised bar once content scrolls under it. */
.tsneu .ts-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: var(--neu-bg);
    height: var(--neu-header-h);
    display: flex;
    align-items: center;
    border: none;
    transition: box-shadow .3s, background .3s;
}
.tsneu .ts-header.scrolled      { box-shadow: 0 8px 20px var(--neu-sh-d), 0 -2px 0 var(--neu-sh-l); }
.tsneu .ts-header .container    { display: flex; align-items: center; width: 100%; }

/* ── Logo — deliberately plain ──────────────────────────────────────────── */
/* The mark is the one element that must not look like a soft-UI control: no
   frame, no raised pill, no shadow. It sits flat on the surface. */
.tsneu .ts-logo {
    display: flex; align-items: center; cursor: pointer; flex-shrink: 0;
    padding: 0; border: none; border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: opacity .2s;
}
.tsneu .ts-logo:hover,
.tsneu .ts-logo:active          { box-shadow: none; transform: none; }
.tsneu .ts-logo:hover           { opacity: .78; }
.tsneu .ts-logo img             { height: 32px; width: auto; object-fit: contain; box-shadow: none; }

/* ═══════════════════ Navigation ═════════════════════════════════════════ */
.tsneu .ts-nav                  { display: flex; align-items: center; margin-left: auto; gap: 6px; }
.tsneu .ts-nav-item             { position: relative; }
.tsneu .ts-nav-link {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: var(--neu-r-pill);
    font-size: var(--type-b); font-weight: 600;
    color: var(--neu-text); text-decoration: none; white-space: nowrap;
    border: none; background: transparent;
    transition: var(--neu-ease);
}
.tsneu .ts-nav-link:hover       { color: var(--neu-ink); box-shadow: var(--neu-out-sm); }
.tsneu .ts-nav-link.active      { color: var(--neu-ink); box-shadow: var(--neu-in-sm); }
.tsneu .ts-nav-item:hover > .ts-nav-link { box-shadow: var(--neu-out-sm); }
.tsneu .ts-nav-link .ts-chev    { font-size: var(--type-b); transition: transform .25s; opacity: .55; }
.tsneu .ts-nav-item:hover .ts-chev { transform: rotate(180deg); opacity: 1; }

/* ── Hover bridge ───────────────────────────────────────────────────────── */
/* The panels hang 10px below the link. That gap is dead space: the pointer
   crosses it, the item loses :hover and the panel snaps shut before it can be
   reached. This invisible strip spans the gap so the travel stays "inside" the
   item. It is only clickable while the item is hovered, so it never intercepts
   anything the rest of the time. */
.tsneu .ts-nav-item:has(.ts-mega)::after,
.tsneu .ts-nav-item:has(.ts-drop)::after {
    content: ''; position: absolute;
    top: 100%; left: 50%; transform: translateX(-50%);
    width: calc(100% + 140px); height: 14px;
    pointer-events: none;
}
.tsneu .ts-nav-item:has(.ts-mega):hover::after,
.tsneu .ts-nav-item:has(.ts-drop):hover::after { pointer-events: auto; }

/* ── Dropdown ───────────────────────────────────────────────────────────── */
/* Closing is delayed by holding `visibility` for 280ms after the pointer
   leaves (a discrete transition, works everywhere), instead of flipping
   pointer-events instantly. Within that grace window the panel is still
   visible, so :hover on the panel itself can catch the pointer and hold it
   open — which is what makes a diagonal move to a far corner survive. */
.tsneu .ts-drop {
    position: absolute; top: calc(100% + 10px); left: 0;
    background: var(--neu-bg); border: none;
    border-radius: var(--neu-r);
    box-shadow: var(--neu-out-lg);
    min-width: 210px; padding: 10px;
    opacity: 0; visibility: hidden;
    transform: translateY(10px);
    transition: opacity .22s cubic-bezier(.4,0,.2,1),
                transform .22s cubic-bezier(.4,0,.2,1),
                visibility 0s linear .28s;
}
.tsneu .ts-nav-item:hover > .ts-drop,
.tsneu .ts-drop:hover {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity .22s cubic-bezier(.4,0,.2,1),
                transform .22s cubic-bezier(.4,0,.2,1),
                visibility 0s linear 0s;
}
.tsneu .ts-drop a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: var(--neu-r-sm);
    font-size: var(--type-b); font-weight: 500;
    color: var(--neu-text); text-decoration: none;
    transition: var(--neu-ease);
}
.tsneu .ts-drop a:hover         { color: var(--neu-ink); box-shadow: var(--neu-in-sm); }
.tsneu .ts-drop a i             { width: 15px; color: var(--neu-accent-deep); font-size: var(--type-b); }

/* ── Mega menu ──────────────────────────────────────────────────────────── */
.tsneu .ts-mega {
    position: absolute; top: calc(100% + 10px);
    left: 50%; transform: translateX(-50%) translateY(10px);
    background: var(--neu-bg); border: none;
    border-radius: var(--neu-r);
    box-shadow: var(--neu-out-lg);
    width: 720px; padding: 28px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px;
    opacity: 0; visibility: hidden;
    transition: opacity .22s cubic-bezier(.4,0,.2,1),
                transform .22s cubic-bezier(.4,0,.2,1),
                visibility 0s linear .28s;
}
.tsneu .ts-nav-item:hover > .ts-mega,
.tsneu .ts-mega:hover {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity .22s cubic-bezier(.4,0,.2,1),
                transform .22s cubic-bezier(.4,0,.2,1),
                visibility 0s linear 0s;
}
/* The panel is far wider than its nav item, so once the pointer is inside it
   the item's own :hover has usually been lost — .ts-mega:hover above is what
   holds it open from there. Keep the chevron flipped to match. */
.tsneu .ts-nav-item:has(.ts-mega:hover) .ts-chev,
.tsneu .ts-nav-item:has(.ts-drop:hover) .ts-chev { transform: rotate(180deg); opacity: 1; }
.tsneu .ts-mega-col h6 {
    font-size: var(--type-b) !important; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: var(--neu-text-2);
    margin-bottom: 16px; padding: 8px 12px;
    border: none; border-radius: var(--neu-r-pill);
    box-shadow: var(--neu-in-sm);
}
.tsneu .ts-mega-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 12px; border-radius: var(--neu-r-sm);
    text-decoration: none; transition: var(--neu-ease); margin-bottom: 8px;
}
.tsneu .ts-mega-item:hover      { box-shadow: var(--neu-out-sm); }
.tsneu .ts-mega-icon {
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--neu-bg) !important;
    color: var(--neu-accent-deep); font-size: var(--type-h); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--neu-out-sm);
    transition: var(--neu-ease);
}
.tsneu .ts-mega-item:hover .ts-mega-icon { box-shadow: var(--neu-in-sm); color: var(--neu-ink); }
.tsneu .ts-mega-text strong     { display: block; font-size: var(--type-h); font-weight: 600; color: var(--neu-ink); line-height: 1.35; }
.tsneu .ts-mega-text span       { font-size: var(--type-b); color: var(--neu-text-2); line-height: 1.5; }

/* ── Feature tags — small inset chips ───────────────────────────────────── */
.tsneu .ts-tags                 { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.tsneu .ts-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--type-b); padding: 5px 12px; border-radius: var(--neu-r-pill);
    background: var(--neu-bg); color: var(--neu-text-2); font-weight: 500;
    box-shadow: var(--neu-in-sm);
}
.tsneu .ts-tag i                { font-size: var(--type-b); color: var(--neu-accent-deep); }

/* ── Header CTA ─────────────────────────────────────────────────────────── */
.tsneu .ts-nav-cta {
    display: inline-flex; align-items: center; gap: 8px;
    margin-left: 14px; padding: 11px 22px;
    background: var(--neu-bg) !important; color: var(--neu-ink) !important;
    border: none; border-radius: var(--neu-r-pill);
    font-size: var(--type-b); font-weight: 700;
    text-decoration: none; white-space: nowrap;
    box-shadow: var(--neu-out-sm), inset 0 0 0 2px var(--neu-accent);
    transition: var(--neu-ease);
}
.tsneu .ts-nav-cta:hover        { box-shadow: var(--neu-out), inset 0 0 0 2px var(--neu-accent-deep); transform: translateY(-1px); }
.tsneu .ts-nav-cta:active       { box-shadow: var(--neu-in-sm), inset 0 0 0 2px var(--neu-accent-deep); transform: translateY(0); }

/* ── Language bar — keep it on the soft surface ─────────────────────────── */
.tsneu .ts-nav-lang {
    display: flex; align-items: center;
    margin-left: 4px; padding: 4px 10px;
    border-radius: var(--neu-r-pill);
    box-shadow: var(--neu-in-sm);
}

/* ── Mobile hamburger ───────────────────────────────────────────────────── */
.tsneu .ts-hamburger {
    display: none; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; cursor: pointer; margin-left: auto;
    width: 44px; height: 44px;
    border: none; background: var(--neu-bg);
    border-radius: var(--neu-r-sm);
    box-shadow: var(--neu-out-sm);
    transition: var(--neu-ease);
}
.tsneu .ts-hamburger:active,
.tsneu .ts-hamburger.open       { box-shadow: var(--neu-in-sm); }
.tsneu .ts-hamburger span {
    display: block; width: 20px; height: 2px;
    background: var(--neu-text); border-radius: 2px; transition: var(--neu-ease);
}

/* ── Mobile drawer ──────────────────────────────────────────────────────── */
.tsneu .ts-mobile-nav {
    display: none;
    background: var(--neu-bg);
    padding: 14px 0 22px;
    box-shadow: inset 0 8px 16px -10px var(--neu-sh-d);
}
.tsneu .ts-mobile-nav.open      { display: block; }
.tsneu .ts-mobile-nav a {
    display: flex; align-items: center; gap: 10px;
    margin: 8px 0; padding: 12px 18px;
    border-radius: var(--neu-r-sm);
    color: var(--neu-text); text-decoration: none;
    font-size: var(--type-b); font-weight: 600;
    box-shadow: var(--neu-out-sm);
    transition: var(--neu-ease);
}
.tsneu .ts-mobile-nav a:active  { box-shadow: var(--neu-in-sm); }

/* ═══════════════════ Inner page vocabulary ══════════════════════════════ */
/* .ts-inner-hero / .ts-inner-cta were black full-bleed stripes in the classic
   layout. A hard dark cut is the one thing soft UI cannot absorb — it breaks
   the single continuous surface the shadow pairs depend on. Here they become
   shallow gold-tinted wells instead: close enough in value to --neu-bg that
   they read as a section change rather than a slab, with the depth carried by
   an inset shadow and the brand carried by the warm tint and gold accents.
   Headings stay dark ink — gold text on a gold surface is unreadable. */
.tsneu .ts-inner-hero {
    background: var(--neug-bg);
    color: var(--neu-text);
    padding: 72px 0 60px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--neug-in);
}
.tsneu .ts-inner-hero h1        { color: var(--neu-ink) !important; margin-bottom: .5rem; }
.tsneu .ts-inner-hero .ts-hero-sub { color: var(--neu-text-2); max-width: 620px; }
.tsneu .ts-inner-hero .ts-badge {
    display: inline-block; background: var(--neug-bg); color: var(--neu-accent-deep);
    padding: 7px 18px; border-radius: var(--neu-r-pill);
    box-shadow: var(--neug-out-sm);
    font-size: var(--type-b); font-weight: 700; margin-bottom: 18px;
}
.tsneu .ts-inner-hero .ts-feat-card,
.tsneu .ts-inner-cta  .ts-feat-card { background: var(--neug-bg); box-shadow: var(--neug-out); }

/* ── Band tones ─────────────────────────────────────────────────────────── */
/* A tone class only re-points the three --neug-* source tokens; every derived
   shadow (--neug-out/-in/…) resolves against the element it is used on, so the
   whole band — surface, shadow pair, buttons, cards — retints from these three
   lines. Put a tone class next to .ts-inner-hero / .ts-inner-cta.
   No tone class = the default gold/cream defined on .tsneu. */
.tsneu .ts-tone-lemon {
    --neug-bg:   #f5f2cc;
    --neug-sh-d: #d4d1a6;
    --neug-sh-l: #fffef2;
}
.tsneu .ts-tone-orange {
    --neug-bg:   #f7ebdc;
    --neug-sh-d: #dcc8b0;
    --neug-sh-l: #fffcf6;
}

/* .ts-feat-card — the signature raised soft card */
.tsneu .ts-feat-grid            { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1.75rem; margin-top: 2rem; }
.tsneu .ts-feat-card {
    padding: 1.75rem;
    border: none !important;
    border-radius: var(--neu-r);
    background: var(--neu-bg);
    box-shadow: var(--neu-out);
    transition: var(--neu-ease);
}
.tsneu .ts-feat-card:hover      { box-shadow: var(--neu-out-lg); transform: translateY(-4px); }
.tsneu .ts-feat-icon {
    width: 48px; height: 48px; border-radius: 14px;
    background: var(--neu-bg) !important;
    box-shadow: var(--neu-out-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--neu-accent-deep); font-size: 19px; margin-bottom: 16px;
    transition: var(--neu-ease);
}
.tsneu .ts-feat-card:hover .ts-feat-icon { box-shadow: var(--neu-in-sm); }
.tsneu .ts-feat-card h4         { color: var(--neu-ink); margin-bottom: 8px; }
.tsneu .ts-feat-card p          { color: var(--neu-text-2); margin: 0; }

/* Cards that land inside a gold well take that surface's shadow pair */
.tsneu .ts-inner-hero .ts-feat-icon,
.tsneu .ts-inner-cta  .ts-feat-icon { background: var(--neug-bg) !important; box-shadow: var(--neug-out-sm); }
.tsneu .ts-inner-hero .ts-feat-card:hover,
.tsneu .ts-inner-cta  .ts-feat-card:hover { box-shadow: var(--neug-out); }

/* .ts-inner-cta — same gold well, centred */
.tsneu .ts-inner-cta            { background: var(--neug-bg); padding: 68px 0; text-align: center; box-shadow: var(--neug-in); }
.tsneu .ts-inner-cta h2         { color: var(--neu-ink) !important; margin-bottom: .5rem; }
.tsneu .ts-inner-cta p          { color: var(--neu-text-2); max-width: 520px; margin: 0 auto 30px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
/* Soft UI has no filled buttons: the accent becomes a thin inset ring on a
   raised pill, and pressing sinks the pill instead of darkening it. */
.tsneu .ts-btn-gold {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--neu-bg) !important; color: var(--neu-ink) !important;
    padding: 14px 30px; border: none; border-radius: var(--neu-r-pill);
    font-weight: 700; text-decoration: none; font-size: var(--type-b);
    box-shadow: var(--neu-out-sm), inset 0 0 0 2px var(--neu-accent);
    transition: var(--neu-ease);
}
.tsneu .ts-btn-gold:hover       { box-shadow: var(--neu-out), inset 0 0 0 2px var(--neu-accent-deep); transform: translateY(-2px); color: var(--neu-ink) !important; }
.tsneu .ts-btn-gold:active      { box-shadow: var(--neu-in-sm), inset 0 0 0 2px var(--neu-accent-deep); transform: translateY(0); }

/* Inside a gold well the buttons keep the same shape but swap to the gold
   shadow pair, so they stay part of that surface instead of floating on it. */
.tsneu .ts-inner-hero .ts-btn-gold,
.tsneu .ts-inner-cta  .ts-btn-gold {
    background: var(--neug-bg) !important; color: var(--neu-ink) !important;
    box-shadow: var(--neug-out-sm), inset 0 0 0 2px var(--neu-accent);
}
.tsneu .ts-inner-hero .ts-btn-gold:hover,
.tsneu .ts-inner-cta  .ts-btn-gold:hover  { box-shadow: var(--neug-out), inset 0 0 0 2px var(--neu-accent-deep); color: var(--neu-ink) !important; }
.tsneu .ts-inner-hero .ts-btn-gold:active,
.tsneu .ts-inner-cta  .ts-btn-gold:active { box-shadow: var(--neug-in-sm), inset 0 0 0 2px var(--neu-accent-deep); }

/* .ts-btn-dark is the secondary action — a plain raised pill, no accent ring */
.tsneu .ts-btn-dark {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--neu-bg); border: none; color: var(--neu-text) !important;
    padding: 14px 30px; border-radius: var(--neu-r-pill);
    font-weight: 700; text-decoration: none; font-size: var(--type-b);
    box-shadow: var(--neu-out-sm);
    transition: var(--neu-ease); margin-left: 12px;
}
.tsneu .ts-btn-dark:hover       { color: var(--neu-ink) !important; box-shadow: var(--neu-out); transform: translateY(-2px); }
.tsneu .ts-btn-dark:active      { box-shadow: var(--neu-in-sm); transform: translateY(0); }

.tsneu .ts-inner-hero .ts-btn-dark,
.tsneu .ts-inner-cta  .ts-btn-dark {
    background: var(--neug-bg); color: var(--neu-text) !important;
    box-shadow: var(--neug-out-sm);
}
.tsneu .ts-inner-hero .ts-btn-dark:hover,
.tsneu .ts-inner-cta  .ts-btn-dark:hover  { color: var(--neu-ink) !important; box-shadow: var(--neug-out); }
.tsneu .ts-inner-hero .ts-btn-dark:active,
.tsneu .ts-inner-cta  .ts-btn-dark:active { box-shadow: var(--neug-in-sm); }

/* ── Page sections ──────────────────────────────────────────────────────── */
/* .ts-bg-light was an alternating grey band; on one continuous soft surface
   an inset well is the equivalent signal. */
.tsneu .ts-page-section         { padding: 68px 0; background: var(--neu-bg); }
.tsneu .ts-page-section.ts-bg-light {
    background: var(--neu-bg);
    box-shadow: var(--neu-in);
}
.tsneu .ts-section-label {
    display: inline-block; background: var(--neu-bg); color: var(--neu-accent-deep);
    padding: 7px 16px; border-radius: var(--neu-r-pill);
    box-shadow: var(--neu-in-sm);
    font-size: var(--type-b); font-weight: 700; margin-bottom: 16px;
}

/* ═══════════════════ Home-page section blocks ═══════════════════════════ */
/* The shared widgets (@IndexTetrsoft, __Block_WhyChooseUs, __FAQ,
   __StripKeyParties …) arrive styled by software_dev_template/css/style.css.
   These rules repaint them onto the soft surface without touching that file. */

.tsneu #intro {
    background: var(--neu-bg) !important;
    height: auto !important;
    padding: 70px 0 80px;
}
.tsneu #intro .intro-info h2       { color: var(--neu-ink) !important; margin-bottom: 32px; }
.tsneu #intro .intro-info h2 span  { color: var(--neu-accent-deep) !important; }
.tsneu #intro .intro-img img {
    border-radius: var(--neu-r);
    padding: 18px;
    background: var(--neu-bg);
    box-shadow: var(--neu-out-lg);
}
.tsneu #intro .intro-info .btn-get-started,
.tsneu #intro .intro-info .btn-services,
.tsneu .btn-get-started,
.tsneu .btn-services {
    background: var(--neu-bg) !important;
    color: var(--neu-ink) !important;
    border: none !important;
    border-radius: var(--neu-r-pill) !important;
    padding: 14px 34px !important;
    box-shadow: var(--neu-out-sm), inset 0 0 0 2px var(--neu-accent);
    transition: var(--neu-ease);
}
.tsneu #intro .intro-info .btn-get-started:hover,
.tsneu #intro .intro-info .btn-services:hover,
.tsneu .btn-get-started:hover,
.tsneu .btn-services:hover {
    background: var(--neu-bg) !important;
    color: var(--neu-ink) !important;
    box-shadow: var(--neu-out), inset 0 0 0 2px var(--neu-accent-deep);
    transform: translateY(-2px);
}
.tsneu .btn-get-started:active,
.tsneu .btn-services:active     { box-shadow: var(--neu-in-sm), inset 0 0 0 2px var(--neu-accent-deep); transform: translateY(0); }

/* Section headers get a soft inset rule instead of the template's underline */
.tsneu .section-header          { margin-bottom: 34px; }
.tsneu .section-header h3::after {
    content: ''; display: block; width: 74px; height: 6px; margin: 16px auto 0;
    border-radius: var(--neu-r-pill); background: var(--neu-bg);
    box-shadow: var(--neu-in-sm);
}

/* About */
.tsneu #about                   { background: var(--neu-bg); }
.tsneu #about .about-img img    { border-radius: var(--neu-r); box-shadow: var(--neu-out); }
.tsneu #about .about-img::before,
.tsneu #about .about-img::after { display: none !important; }
.tsneu #about .about-content ul li i { color: var(--neu-accent-deep); }

/* Services */
.tsneu #services                { background: var(--neu-bg); }
.tsneu #services .box {
    background: var(--neu-bg) !important;
    border-radius: var(--neu-r) !important;
    box-shadow: var(--neu-out) !important;
    transition: var(--neu-ease) !important;
}
.tsneu #services .box:hover     { transform: translateY(-5px) !important; box-shadow: var(--neu-out-lg) !important; }
.tsneu #services .icon {
    background: var(--neu-bg) !important;
    box-shadow: var(--neu-out-sm);
    display: flex !important; align-items: center; justify-content: center;
    padding-top: 0 !important;
    transition: var(--neu-ease);
}
.tsneu #services .icon i        { color: var(--neu-accent-deep) !important; }
.tsneu #services .box:hover .icon { box-shadow: var(--neu-in-sm); }
.tsneu #services .title a       { color: var(--neu-ink) !important; }
.tsneu #services .box:hover .title a { color: var(--neu-accent-deep) !important; }
.tsneu #services .description   { color: var(--neu-text-2); }

/* Why us */
.tsneu #why-us                  { background: var(--neu-bg); }
.tsneu #why-us .why-us-content .features {
    padding: 18px !important;
    border-radius: var(--neu-r-sm);
    box-shadow: var(--neu-out-sm);
    transition: var(--neu-ease);
}
.tsneu #why-us .why-us-content .features:hover { box-shadow: var(--neu-out); }
.tsneu #why-us .why-us-content .features i  { color: var(--neu-accent-deep); }
.tsneu #why-us .why-us-content .features h4 { color: var(--neu-ink) !important; }
.tsneu #why-us .why-us-content .features p  { color: var(--neu-text-2) !important; }
.tsneu #why-us .why-us-img img  { border-radius: var(--neu-r); box-shadow: var(--neu-out); }
.tsneu #why-us .counters span   { color: var(--neu-ink) !important; }
.tsneu #why-us .counters p      { color: var(--neu-text-2) !important; }

/* Call to action — the template's third dark stripe, same gold well treatment */
.tsneu #call-to-action            { background: var(--neug-bg) !important; box-shadow: var(--neug-in); }
.tsneu #call-to-action .cta-title { color: var(--neu-ink); }
.tsneu #call-to-action .cta-text  { color: var(--neu-text-2); }
.tsneu #call-to-action .cta-btn {
    background: var(--neug-bg) !important; color: var(--neu-ink) !important;
    border: none !important; border-radius: var(--neu-r-pill) !important;
    box-shadow: var(--neug-out-sm), inset 0 0 0 2px var(--neu-accent);
    transition: var(--neu-ease);
}
.tsneu #call-to-action .cta-btn:hover  { box-shadow: var(--neug-out), inset 0 0 0 2px var(--neu-accent-deep); color: var(--neu-ink) !important; }
.tsneu #call-to-action .cta-btn:active { box-shadow: var(--neug-in-sm), inset 0 0 0 2px var(--neu-accent-deep); }

/* Portfolio */
/* __Block_Portfolio.razor carries its own inline <style> (dark #0f172a wrap,
   flat chips, a drop shadow); these rules out-specify it via .tsneu. */
.tsneu #portfolio               { background: var(--neu-bg); }
.tsneu #portfolio #portfolio-flters li {
    border-radius: var(--neu-r-pill) !important; padding: 8px 20px; margin: 0 !important;
    background: var(--neu-bg) !important; color: var(--neu-text) !important;
    border: none !important;
    box-shadow: var(--neu-out-sm) !important; transition: var(--neu-ease);
}
.tsneu #portfolio #portfolio-flters li:hover {
    color: var(--neu-ink) !important;
    box-shadow: var(--neu-out) !important;
}
.tsneu #portfolio #portfolio-flters li.filter-active {
    color: var(--neu-ink) !important;
    box-shadow: var(--neu-in-sm) !important;
}
.tsneu #portfolio #portfolio-flters li i { color: var(--neu-accent-deep); }

/* Each image sits in a soft raised frame, recessed into it by an inset ring —
   the Neu equivalent of a picture mount rather than a hard border. */
.tsneu #portfolio .portfolio-item { overflow: visible !important; }
.tsneu #portfolio .portfolio-item .portfolio-wrap {
    position: relative;
    background: var(--neu-bg) !important;
    padding: 14px;
    border-radius: var(--neu-r) !important;
    overflow: visible !important;
    box-shadow: var(--neu-out) !important;
    transition: var(--neu-ease);
}
.tsneu #portfolio .portfolio-item .portfolio-wrap:hover { box-shadow: var(--neu-out-lg) !important; transform: translateY(-4px); }
.tsneu #portfolio .portfolio-wrap img {
    display: block;
    border-radius: var(--neu-r-sm);
    box-shadow: var(--neu-in-sm);
}
/* The frame must stay visible on hover, so the overlay is inset by the same
   padding and carries its own dark ground instead of relying on the old
   #0f172a wrap colour showing through a faded image. */
.tsneu #portfolio .portfolio-wrap:hover img { opacity: 1 !important; transform: scale(1.02); }
.tsneu #portfolio .portfolio-wrap .portfolio-info {
    top: 14px; left: 14px; right: 14px; bottom: 14px;
    border-radius: var(--neu-r-sm);
    background: rgba(35,38,44,.88);
}
.tsneu #portfolio .portfolio-info .link-preview,
.tsneu #portfolio .portfolio-info .link-details {
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    box-shadow: 2px 2px 5px rgba(0,0,0,.35), -2px -2px 5px rgba(255,255,255,.07);
    transition: var(--neu-ease);
}
.tsneu #portfolio .portfolio-info .link-preview:hover,
.tsneu #portfolio .portfolio-info .link-details:hover {
    background: rgba(255,193,7,.22) !important; color: var(--neu-accent) !important;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,.35), inset -2px -2px 5px rgba(255,255,255,.07);
}

/* Stats strip — soft divider instead of the 1px rules */
.tsneu #portfolio .pf-stats     { border-top: none !important; box-shadow: inset 0 3px 6px -4px var(--neu-sh-d); }
.tsneu #portfolio .pf-stat      { border-right: none !important; }
.tsneu #portfolio .pf-header-sub { color: var(--neu-text-2); }

/* Testimonials / team / clients */
.tsneu #testimonials            { background: var(--neu-bg); }
.tsneu #testimonials .testimonial-item .testimonial-img { box-shadow: var(--neu-out-sm); }
.tsneu #testimonials .owl-dot,
.tsneu #clients .owl-dot        { background: var(--neu-bg) !important; box-shadow: var(--neu-in-sm); border: none !important; }
.tsneu #testimonials .owl-dot.active,
.tsneu #clients .owl-dot.active { box-shadow: var(--neu-out-sm); }
.tsneu #team .member            { border-radius: var(--neu-r); overflow: hidden; box-shadow: var(--neu-out); }
.tsneu #clients                 { background: var(--neu-bg); }

/* Key-parties strip — that widget hardcodes bg-white on its tiles */
.tsneu .logo-box,
.tsneu .key-tile-box {
    background: var(--neu-bg) !important;
    border-radius: var(--neu-r-sm);
    box-shadow: var(--neu-out-sm);
    transition: var(--neu-ease);
}
.tsneu .logo-box:hover,
.tsneu .key-tile-box:hover      { box-shadow: var(--neu-out); transform: translateY(-3px); }

/* Pricing */
.tsneu #pricing .card {
    background: var(--neu-bg) !important;
    border: none !important; border-radius: var(--neu-r) !important;
    box-shadow: var(--neu-out) !important;
}
.tsneu #pricing .card:after     { display: none !important; }
.tsneu #pricing .card:hover     { box-shadow: var(--neu-out-lg) !important; transform: translateY(-5px); }
.tsneu #pricing .card .list-group-item { background: transparent !important; border: none !important; }

/* FAQ — each question is a soft raised bar; the open one sinks in */
.tsneu #faq                     { background: var(--neu-bg); }
.tsneu #faq #faq-list li {
    background: var(--neu-bg);
    border: none !important;
    border-radius: var(--neu-r-sm);
    box-shadow: var(--neu-out-sm);
    margin-bottom: 14px; padding: 4px 8px;
    transition: var(--neu-ease);
}
.tsneu #faq #faq-list li:hover  { box-shadow: var(--neu-out); }
.tsneu #faq #faq-list a         { color: var(--neu-ink); font-weight: 600; }
.tsneu #faq #faq-list a:not(.collapsed) { color: var(--neu-accent-deep); }
.tsneu #faq #faq-list i         { color: var(--neu-accent-deep); }
.tsneu #faq #faq-list p         { color: var(--neu-text-2); }

/* Any leftover hardcoded white box inside the skin */
.tsneu .bg-white                { background: var(--neu-bg) !important; }

/* ═══════════════════ "Under one roof" block ═════════════════════════════ */
/* __Block_BmsOneRoof.razor ships neutral self-contained styles so it renders
   anywhere; these give it the soft-UI reading. The whole point of the right
   panel is that seven modules share ONE surface, so it is a single raised slab
   with inset seams — never seven cards. The left panel is the opposite: loose
   chips floating on a well, none of them connected to the surface. */
.tsneu .orf                     { margin-top: 58px; }
.tsneu .orf-eyebrow {
    background: var(--neu-bg); color: var(--neu-accent-deep);
    box-shadow: var(--neu-in-sm);
}
.tsneu .orf-head h3             { color: var(--neu-ink); }
.tsneu .orf-head p              { color: var(--neu-text-2); }

.tsneu .orf-panel {
    background: var(--neu-bg);
    border: none !important;
    border-radius: var(--neu-r);
    box-shadow: var(--neu-out);
}
.tsneu .orf-before              { box-shadow: var(--neu-in); }
.tsneu .orf-panel-label         { box-shadow: var(--neu-in-sm); }
.tsneu .orf-before .orf-panel-label { background: var(--neu-bg) !important; color: var(--neu-text-2); }
.tsneu .orf-after  .orf-panel-label { background: var(--neu-bg) !important; color: var(--neu-accent-deep); }
.tsneu .orf-note                { color: var(--neu-text-2); }
.tsneu .orf-note strong         { color: var(--neu-ink); }

/* Left — disconnected chips, each lifted off the surface on its own */
.tsneu .orf-chip {
    background: var(--neu-bg);
    border: 1px dashed var(--neu-sh-d);
    color: var(--neu-text-2);
    box-shadow: var(--neu-out-sm);
}
.tsneu .orf-chip i              { color: var(--neu-text-2); }
.tsneu .orf-tangle path         { stroke: var(--neu-sh-d); }
.tsneu .orf-break {
    background: var(--neu-bg); border: none;
    color: #c98b8b; box-shadow: var(--neu-out-sm);
}

/* Right — one slab: gold lintel, then modules divided only by inset seams */
.tsneu .orf-roof {
    background: var(--neu-bg);
    color: var(--neu-accent-deep);
    box-shadow: var(--neu-in-sm), inset 0 -3px 0 var(--neu-accent);
    border-radius: var(--neu-r-sm) var(--neu-r-sm) 4px 4px;
}
.tsneu .orf-stack {
    background: transparent;
    gap: 0;
    box-shadow: var(--neu-in-sm);
    border-radius: 4px 4px var(--neu-r-sm) var(--neu-r-sm);
}
.tsneu .orf-mod {
    background: transparent;
    color: var(--neu-text);
    box-shadow: inset 0 -1px 0 var(--neu-sh-d), inset -1px 0 0 var(--neu-sh-d);
}
.tsneu .orf-mod:nth-child(2n)   { box-shadow: inset 0 -1px 0 var(--neu-sh-d); }
.tsneu .orf-mod:last-child      { box-shadow: none; }
.tsneu .orf-mod i {
    background: var(--neu-bg) !important; color: var(--neu-accent-deep);
    box-shadow: var(--neu-out-sm);
}
.tsneu .orf-arrow {
    background: var(--neu-bg); border: none;
    color: var(--neu-accent-deep);
    box-shadow: var(--neu-out-sm);
}

/* Inside a toned band the block adopts that band's shadow pair */
.tsneu .ts-tone-lemon .orf-panel,
.tsneu .ts-tone-orange .orf-panel { background: var(--neug-bg); box-shadow: var(--neug-out); }
.tsneu .ts-tone-lemon .orf-before,
.tsneu .ts-tone-orange .orf-before { box-shadow: var(--neug-in); }

/* ═══════════════════ Downloads page ═════════════════════════════════════ */
/* PageDownloadForTetr.razor ships neutral self-contained .tsd-* styles so it
   renders under the classic layout too; these give it the soft-UI reading.
   The whole card is the anchor, so the press state belongs on the card — it
   sinks into the surface on :active, which is the soft-UI "button pushed". */
.tsneu .tsd-card {
    background: var(--neu-bg);
    border: none !important;
    border-radius: var(--neu-r);
    box-shadow: var(--neu-out);
}
.tsneu .tsd-card:hover  { box-shadow: var(--neu-out-lg) !important; transform: translateY(-4px); }
.tsneu .tsd-card:active { box-shadow: var(--neu-in) !important; transform: translateY(0); }

.tsneu .tsd-ico {
    background: var(--neu-bg) !important; color: var(--neu-accent-deep);
    box-shadow: var(--neu-out-sm);
    transition: var(--neu-ease);
}
.tsneu .tsd-card:hover .tsd-ico { box-shadow: var(--neu-in-sm); }
.tsneu .tsd-title h4    { color: var(--neu-ink); }
.tsneu .tsd-title span  { color: var(--neu-text-2); }
.tsneu .tsd-desc        { color: var(--neu-text-2); }

.tsneu .tsd-meta span {
    background: var(--neu-bg) !important; color: var(--neu-text-2);
    box-shadow: var(--neu-in-sm);
}
.tsneu .tsd-meta span i { color: var(--neu-accent-deep); }

/* Same treatment as .ts-btn-gold: raised pill, gold ring, no fill */
.tsneu .tsd-go {
    background: var(--neu-bg) !important; color: var(--neu-ink) !important;
    box-shadow: var(--neu-out-sm), inset 0 0 0 2px var(--neu-accent);
    transition: var(--neu-ease);
}
.tsneu .tsd-card:hover  .tsd-go { background: var(--neu-bg) !important; box-shadow: var(--neu-out), inset 0 0 0 2px var(--neu-accent-deep); }
.tsneu .tsd-card:active .tsd-go { box-shadow: var(--neu-in-sm), inset 0 0 0 2px var(--neu-accent-deep); }

.tsneu .tsd-note i {
    background: var(--neu-bg) !important; color: var(--neu-accent-deep);
    box-shadow: var(--neu-out-sm);
}
.tsneu .tsd-note strong { color: var(--neu-ink); }
.tsneu .tsd-note p      { color: var(--neu-text-2); }

/* ═══════════════════ Contact page ═══════════════════════════════════════ */
/* PageContactUs.razor renders a tetrsoft-only branch using these classes and
   plain inputs — no MatBlazor, so there is no Material outline to fight. */
.tsneu .tsc-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 28px;
    align-items: start;
}

/* ── Left: company details ──────────────────────────────────────────────── */
.tsneu .tsc-info {
    background: var(--neu-bg);
    border-radius: var(--neu-r);
    box-shadow: var(--neu-out);
    padding: 28px 26px;
}
.tsneu .tsc-info-title {
    color: var(--neu-ink); margin: 0 0 22px;
    padding-bottom: 16px;
    box-shadow: inset 0 -2px 4px -3px var(--neu-sh-d);
}
.tsneu .tsc-row {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 12px; margin-bottom: 8px;
    border-radius: var(--neu-r-sm);
    text-decoration: none;
    transition: var(--neu-ease);
}
.tsneu a.tsc-row:hover          { box-shadow: var(--neu-out-sm); }
.tsneu a.tsc-row:active         { box-shadow: var(--neu-in-sm); }
.tsneu .tsc-ico {
    flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--neu-bg); color: var(--neu-accent-deep);
    box-shadow: var(--neu-out-sm);
    font-size: var(--type-b);
}
.tsneu .tsc-row-txt             { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tsneu .tsc-row-txt em {
    font-style: normal; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--neu-text-2);
}
.tsneu .tsc-row-txt strong      { font-size: var(--type-b); font-weight: 600; color: var(--neu-ink); line-height: 1.5; }
.tsneu a.tsc-row:hover .tsc-row-txt strong { color: var(--neu-accent-deep); }

.tsneu .tsc-social              { display: flex; gap: 10px; margin-top: 22px; padding-left: 12px; }
.tsneu .tsc-social a {
    width: 38px; height: 38px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--neu-bg); color: var(--neu-text);
    box-shadow: var(--neu-out-sm);
    text-decoration: none; font-size: var(--type-b);
    transition: var(--neu-ease);
}
.tsneu .tsc-social a:hover      { color: var(--neu-accent-deep); box-shadow: var(--neu-out); transform: translateY(-2px); }
.tsneu .tsc-social a:active     { box-shadow: var(--neu-in-sm); transform: translateY(0); }

/* ── Right: the form ────────────────────────────────────────────────────── */
.tsneu .tsc-formcard {
    background: var(--neu-bg);
    border-radius: var(--neu-r);
    box-shadow: var(--neu-out);
    padding: 30px 28px;
}
.tsneu .tsc-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.tsneu .tsc-field-wide          { grid-column: 1 / -1; }
.tsneu .tsc-field label {
    display: block; margin-bottom: 8px;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--neu-text-2);
}
/* Inputs are wells, not boxes — no border anywhere, the inset carries it */
.tsneu .tsc-field input,
.tsneu .tsc-field textarea {
    width: 100%;
    border: none; outline: none;
    background: var(--neu-bg);
    border-radius: var(--neu-r-sm);
    box-shadow: var(--neu-in);
    padding: 13px 16px;
    color: var(--neu-ink);
    font-size: var(--type-b);
    font-family: inherit;
    line-height: 1.6;
    transition: box-shadow .2s;
}
.tsneu .tsc-field textarea      { resize: vertical; min-height: 140px; }
.tsneu .tsc-field input::placeholder,
.tsneu .tsc-field textarea::placeholder { color: var(--neu-text-2); }
.tsneu .tsc-field input:focus,
.tsneu .tsc-field textarea:focus { box-shadow: var(--neu-in), inset 0 0 0 2px var(--neu-accent); }
.tsneu .tsc-field input:disabled,
.tsneu .tsc-field textarea:disabled { box-shadow: var(--neu-in-sm); color: var(--neu-text-2); cursor: not-allowed; }
/* Blazor's own validation classes */
.tsneu .tsc-field input.invalid,
.tsneu .tsc-field textarea.invalid { box-shadow: var(--neu-in), inset 0 0 0 2px #d98b8b; }
.tsneu .tsc-field .validation-message {
    display: block; margin-top: 6px;
    font-size: .74rem; color: #c06a6a;
}

.tsneu .tsc-actions             { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.tsneu .tsc-actions .ts-btn-gold,
.tsneu .tsc-actions .ts-btn-dark { cursor: pointer; margin-left: 0; font-family: inherit; }
.tsneu .tsc-custom              { margin-top: 26px; color: var(--neu-text-2); }

.tsneu .tsc-result {
    display: flex; align-items: flex-start; gap: 12px;
    margin-top: 24px; padding: 16px 18px;
    border-radius: var(--neu-r-sm);
    background: var(--neu-bg);
    box-shadow: var(--neu-in-sm);
    font-size: var(--type-b);
}
.tsneu .tsc-result i            { margin-top: 3px; font-size: 1rem; }
.tsneu .tsc-result.ok           { color: var(--neu-ink); }
.tsneu .tsc-result.ok i         { color: #4f9d69; }
.tsneu .tsc-result.bad          { color: var(--neu-ink); }
.tsneu .tsc-result.bad i        { color: #c06a6a; }

/* ── Map ────────────────────────────────────────────────────────────────── */
.tsneu .tsc-map {
    height: 460px; width: 100%;
    border-radius: var(--neu-r);
    background: var(--neu-bg);
    box-shadow: var(--neu-in);
    overflow: hidden;
}

@media (max-width: 900px) {
    .tsneu .tsc-grid   { grid-template-columns: 1fr; }
    .tsneu .tsc-fields { grid-template-columns: 1fr; }
    .tsneu .tsc-map    { height: 340px; }
}

/* ═══════════════════ Footer ═════════════════════════════════════════════ */
/* Two variants, both kept:
     .ts-footer               → light soft-UI (default)
     .ts-footer.ts-footer-dark → the original dark slab
   Switched by the FooterDark field in MainLayout_TetrsoftNeu.razor, which
   adds/omits the ts-footer-dark class. Nothing else needs to change. */

/* ── Light (default) ────────────────────────────────────────────────────── */
/* Same surface as the page, set into it as a full-width well — the inset is
   what marks the boundary now that there is no colour change to do it. */
.tsneu .ts-footer {
    background: var(--neu-bg);
    color: var(--neu-text);
    padding-top: 68px;
    box-shadow: inset 0 9px 18px -12px var(--neu-sh-d);
}
.tsneu .ts-footer-brand img     { height: 34px; filter: none; }
.tsneu .ts-footer-brand p       { font-size: var(--type-b); line-height: 1.75; margin-top: 16px; max-width: 290px; color: var(--neu-text-2); }
/* Smaller than body text: uppercase + letter-spacing made these wide enough
   that "BMS Features" wrapped to two lines inside a col-lg-2. */
.tsneu .ts-footer h6 {
    font-size: .75rem !important; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--neu-ink); margin-bottom: 20px;
    display: inline-block; padding: 6px 12px;
    white-space: nowrap;
    border-radius: var(--neu-r-pill);
    box-shadow: var(--neu-in-sm);
}
.tsneu .ts-footer-links         { list-style: none; padding: 0; margin: 0; }
.tsneu .ts-footer-links li      { margin-bottom: 10px; display: flex; align-items: flex-start; gap: 10px; }
.tsneu .ts-footer-links i       { width: 14px; color: var(--neu-accent-deep); font-size: var(--type-b); margin-top: 4px; flex-shrink: 0; }
.tsneu .ts-footer-links a,
.tsneu .ts-footer-links span    { font-size: var(--type-b); color: var(--neu-text); text-decoration: none; transition: var(--neu-ease); }
.tsneu .ts-footer-links a:hover { color: var(--neu-accent-deep); }
.tsneu .ts-f-social             { display: flex; gap: 10px; margin-top: 24px; }
.tsneu .ts-f-social a {
    width: 38px; height: 38px; border-radius: 12px;
    background: var(--neu-bg);
    display: flex; align-items: center; justify-content: center;
    color: var(--neu-text); font-size: var(--type-b);
    box-shadow: var(--neu-out-sm);
    text-decoration: none; transition: var(--neu-ease);
}
.tsneu .ts-f-social a:hover     { color: var(--neu-accent-deep); box-shadow: var(--neu-out); transform: translateY(-2px); }
.tsneu .ts-f-social a:active    { color: var(--neu-accent-deep); box-shadow: var(--neu-in-sm); transform: translateY(0); }
.tsneu .ts-footer-bottom {
    border-top: none;
    padding: 20px 0; margin-top: 54px;
    font-size: var(--type-b); color: var(--neu-text-2);
    box-shadow: inset 0 3px 6px -4px var(--neu-sh-d);
}
.tsneu .ts-footer-bottom a       { color: var(--neu-text-2); text-decoration: none; transition: var(--neu-ease); }
.tsneu .ts-footer-bottom a:hover { color: var(--neu-accent-deep); }

/* ── Dark (opt-in, the original) ────────────────────────────────────────── */
.tsneu .ts-footer.ts-footer-dark {
    background: var(--neud-bg);
    color: var(--neud-text);
    box-shadow: none;
}
.tsneu .ts-footer-dark .ts-footer-brand img { filter: brightness(0) invert(1); }
.tsneu .ts-footer-dark .ts-footer-brand p   { color: var(--neud-text); }
.tsneu .ts-footer-dark h6       { color: #fff; box-shadow: var(--neud-in); }
.tsneu .ts-footer-dark .ts-footer-links i   { color: var(--neu-accent); }
.tsneu .ts-footer-dark .ts-footer-links a,
.tsneu .ts-footer-dark .ts-footer-links span { color: var(--neud-text); }
.tsneu .ts-footer-dark .ts-footer-links a:hover { color: var(--neu-accent); }
.tsneu .ts-footer-dark .ts-f-social a {
    background: var(--neud-bg);
    color: var(--neud-text);
    box-shadow: var(--neud-out-sm);
}
.tsneu .ts-footer-dark .ts-f-social a:hover  { color: var(--neu-accent); box-shadow: var(--neud-in); }
.tsneu .ts-footer-dark .ts-f-social a:active { color: var(--neu-accent); box-shadow: var(--neud-in); }
.tsneu .ts-footer-dark .ts-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.06);
    color: var(--neud-text-2);
    box-shadow: none;
}
.tsneu .ts-footer-dark .ts-footer-bottom a       { color: var(--neud-text-2); }
.tsneu .ts-footer-dark .ts-footer-bottom a:hover { color: var(--neu-accent); }

/* ═══════════════════ Back to top ════════════════════════════════════════ */
/* AppDigital.razor renders the software_dev_template's own orange .back-to-top
   in the host body — outside .tsneu, so it cannot be reached by a .tsneu rule
   and showed up as a second button next to ours. Hidden via the body class the
   layout stamps on, which keeps it working for the classic MainLayout_Tetrsoft.
   !important is required: main.js fadeIn() writes display:block inline. */
body.tsneu-body .back-to-top    { display: none !important; }

.tsneu .ts-to-top {
    position: fixed; right: 24px; bottom: 24px; z-index: 9998;
    width: 48px; height: 48px; border: none; border-radius: 50%;
    background: var(--neu-bg); color: var(--neu-text);
    box-shadow: var(--neu-out);
    display: none; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--neu-ease);
}
.tsneu .ts-to-top.show          { display: flex; }
.tsneu .ts-to-top:hover         { color: var(--neu-accent-deep); box-shadow: var(--neu-out-lg); }
.tsneu .ts-to-top:active        { box-shadow: var(--neu-in-sm); }

/* ═══════════════════ Responsive ═════════════════════════════════════════ */
@media (max-width: 991px) {
    .tsneu .ts-nav         { display: none !important; }
    .tsneu .ts-hamburger   { display: flex; }
    .tsneu .ts-topbar-left { display: none; }
}
@media (max-width: 767px) {
    .tsneu .ts-mega      { width: 94vw; grid-template-columns: 1fr; }
    .tsneu .ts-feat-grid { gap: 1.25rem; }
    .tsneu #intro        { padding: 44px 0 56px; }

    /* Bootstrap gives .container only 15px of side padding. Against a
       full-bleed tinted band (the lemon/gold .ts-inner-hero and .ts-inner-cta
       especially) that reads as no gutter at all — the heading and sub-text
       sit right on the edge. Set once here for every band in the skin so the
       chrome, the grey sections and the toned bands all share one gutter. */
    .tsneu .container    { padding-left: 25px; padding-right: 25px; }
}

/* Soft UI leans on large blurred shadows; reduced-motion drops the movement
   but keeps the depth. */
@media (prefers-reduced-motion: reduce) {
    .tsneu *,
    .tsneu *::before,
    .tsneu *::after { transition-duration: .01ms !important; }
    .tsneu .ts-feat-card:hover,
    .tsneu #services .box:hover,
    .tsneu .logo-box:hover,
    .tsneu .key-tile-box:hover { transform: none !important; }
}
