/* =============================================================================
   SoberSoft — public homepage (Views/Home/Index.cshtml)

   Everything is scoped to #ssHome or a .ss-* class, so nothing here reaches the
   Limitless shell (sidebar, navbar, footer) that wraps the page.

   ── ONE CONCEPT ───────────────────────────────────────────────────────────
   THE SOBERSOFT INTELLIGENCE CORE. The butterfly sits at the centre of a
   luminous field; personal recovery, resources, organizations, community and
   reporting all connect inward and resolve into it. That composition is the
   hero, and it returns once as the Recovery Intelligence climax. It appears
   nowhere else. The product itself is shown further down, not above the fold.

   ── OVERFLOW POLICY (this page previously shipped a horizontal scrollbar) ──
   1. The hero composition is a SINGLE SVG with preserveAspectRatio="xMidYMid
      meet". Its labels and network live INSIDE the viewBox, so the artwork is
      mathematically incapable of exceeding its box at any width.
   2. No element on this page is sized in vw. Decorative layers are sized in %
      of the section they live in, so a narrow content area (the shell's
      sidebar takes ~260px) can never be overflowed by viewport-relative maths.
   3. There is NO horizontally scrolling component. The previous design's
      scroll-snap rail held 1339px of content in a 719px box and rendered a
      visible scrollbar at every width below 992px. It is gone.
   4. overflow-x: clip on the root is defence-in-depth ONLY — with rules 1-3 it
      has nothing left to catch.

   ── COLOUR ────────────────────────────────────────────────────────────────
   Near-black, charcoal, deep purple-black, SoberSoft purple, violet, muted
   indigo, white, grey. No other hue family. Sections step through a surface
   ladder so no two neighbours share a background.

   ── MOTION ────────────────────────────────────────────────────────────────
   Five verbs only: reveal, settle, draw, pulse, lift. Ambient loops are gated
   behind .is-live so nothing animates off screen.

   Regions: 1 tokens · 2 primitives · 3 hero+core · 4 platform · 5 personal
            6 resources · 7 organizations · 8 intelligence · 9 trust+final
            10 motion · 11 small screens · 12 SuperUser-only legacy
   ============================================================================= */

/* #region 1. Tokens & base ------------------------------------------------- */
#ssHome {
    /* Surface ladder — every section picks one, neighbours never match. */
    --home-bg-0: #06060d;          /* deepest near-black */
    --home-bg-1: #0a0a13;          /* charcoal / indigo undertone */
    --home-bg-2: #191622;          /* raised charcoal-purple */
    --home-bg-purple: #120c1f;     /* deep purple-black */
    --home-bg-calm: #050508;       /* quietest */

    --home-surface: #15121f;       /* card on a deep section */
    --home-surface-raised: #100d19;/* card on a raised section (goes darker) */

    /* Brand. --color-primary* come from site.css. */
    --home-purple: var(--color-primary, #9f01f1);
    --home-purple-lit: var(--color-primary-light, #b224fb);
    --home-purple-soft: var(--color-primary-lighter, #c882ec);
    --home-purple-pale: var(--color-primary-lightest, #e8ccfa);
    --home-indigo: #7d78d6;

    --home-text: var(--text-primary, #ffffff);
    --home-text-2: #d2cee6;
    --home-muted: #9b96b8;

    --home-line: rgba(180, 160, 255, .14);
    --home-line-lit: rgba(180, 160, 255, .34);

    --home-radius: 16px;
    --home-ease: cubic-bezier(.22, 1, .36, 1);

    color: var(--home-text);
    background: var(--home-bg-0);
    line-height: 1.6;
    /* Defence-in-depth only; nothing on this page relies on it. */
    overflow-x: clip;
}

/* Element resets at (0,0,1). :where() drops the id weight so these lose to
   every .ss-* class rule but still beat Bootstrap's element rules — the view
   links this sheet from the body, after the theme sheets. */
:where(#ssHome) h1,
:where(#ssHome) h2,
:where(#ssHome) h3 { color: var(--home-text); margin: 0; }
:where(#ssHome) p { margin: 0; }
:where(#ssHome) ul,
:where(#ssHome) ol { list-style: none; margin: 0; padding: 0; }

#ssHome *,
#ssHome *::before,
#ssHome *::after { box-sizing: border-box; }

#ssHome a { text-decoration: none; }

/* The shell's navbar is static and #innerContentArea is the scroll container,
   so there is no fixed header to offset against — just a breathing gap. */
#ssHome > section[id] { scroll-margin-top: .75rem; }

.ss-section { position: relative; isolation: isolate; padding: clamp(4rem, 7vw, 7rem) 1rem; }
.ss-wrap { max-width: 1160px; margin: 0 auto; }

/* Section atmosphere. Always inset:0 of the section — never viewport-sized. */
.ss-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.ss-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--home-purple-soft);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.ss-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 9px currentColor;
    flex-shrink: 0;
}

.ss-h2 {
    font-size: clamp(1.9rem, 3.8vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin: .8rem 0 .9rem;
    text-wrap: balance;
}

.ss-lead {
    color: var(--home-text-2);
    font-size: clamp(1rem, 1.15vw, 1.08rem);
    line-height: 1.7;
    max-width: 38rem;
}

.ss-head { max-width: 42rem; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.ss-head.is-mid { margin-left: auto; margin-right: auto; text-align: center; }
.ss-head.is-mid .ss-lead { margin-left: auto; margin-right: auto; }

/* Headline emphasis: violet by default, brightened per section. */
.ss-em {
    background-image: linear-gradient(104deg, var(--em-a, #e2b6ff), var(--em-b, #9b82ee));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--em-a, #e2b6ff);
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .ss-em { background: none; -webkit-text-fill-color: currentColor; }
}
/* #endregion */

/* #region 2. Primitives ---------------------------------------------------- */
.ss-panel {
    background: var(--home-surface);
    border: 1px solid var(--home-line);
    border-radius: var(--home-radius);
    box-shadow: 0 24px 56px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 255, 255, .05);
}

.ss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 50px;
    padding: .85rem 1.7rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    transition: transform .25s var(--home-ease), box-shadow .25s ease,
                background .25s ease, border-color .25s ease, color .25s ease;
}

.ss-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ss-btn i { font-size: .82em; transition: transform .25s var(--home-ease); }

/* 16px bold sits under the 18.7px "large text" line, so the lightest gradient
   stop must still clear 4.5:1 on white. --home-purple-lit (#b224fb) is 4.6:1;
   a lighter start measured 3.4:1 under the first glyphs. */
.ss-btn-1 {
    color: #fff;
    background: linear-gradient(135deg, var(--home-purple-lit), var(--home-purple) 55%, #6d00bb);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 12px 32px rgba(159, 1, 241, .42), inset 0 1px rgba(255, 255, 255, .22);
}

.ss-btn-1:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 46px rgba(159, 1, 241, .58), inset 0 1px rgba(255, 255, 255, .28);
}

.ss-btn-2 {
    color: var(--home-purple-pale);
    background: rgba(159, 1, 241, .09);
    border: 1px solid rgba(200, 130, 236, .4);
}

.ss-btn-2:hover {
    color: #fff;
    background: rgba(159, 1, 241, .2);
    border-color: rgba(200, 130, 236, .8);
    transform: translateY(-2px);
}

.ss-btn-1:active, .ss-btn-2:active { transform: translateY(0); }
.ss-cta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

.ss-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    color: var(--home-purple-soft);
    font-size: .95rem;
    font-weight: 600;
    transition: color .2s ease;
}

.ss-link i { font-size: .8em; transition: transform .25s var(--home-ease); }
.ss-link:hover { color: #fff; }
.ss-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* Tool/feature chip. A link, never a fake UI element. */
.ss-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 38px;
    padding: .4rem .85rem;
    border: 1px solid var(--home-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    color: var(--home-text-2);
    font-size: .82rem;
    font-weight: 600;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .25s var(--home-ease);
}

.ss-chip i { color: var(--home-purple-soft); font-size: .85em; }
a.ss-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* #endregion */

/* #region 3. Hero + the Intelligence Core ---------------------------------- */
.ss-hero {
    --em-a: #f0c9ff;
    --em-b: #9b7bff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2.75rem, 5vw, 4.5rem) 1rem clamp(3rem, 5vw, 4.5rem);
    text-align: center;
    background: var(--home-bg-0);
}

/* Three light layers, all inset:0 of the hero — no viewport maths anywhere. */
.ss-hero-lum {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 46% 40% at 50% 62%, rgba(159, 1, 241, .34), transparent 70%),
        radial-gradient(ellipse 62% 34% at 50% 0%, rgba(90, 50, 190, .26), transparent 72%),
        linear-gradient(180deg, #0a0817 0%, var(--home-bg-0) 52%, #0c0a1b 100%);
}

.ss-hero-haze {
    position: absolute;
    inset: -10% -6%;
    z-index: -2;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(178, 36, 251, .2), transparent 62%);
    pointer-events: none;
}

.ss-hero-mesh {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(180, 160, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180, 160, 255, .055) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(ellipse 58% 56% at 50% 56%, #000, transparent 76%);
    mask-image: radial-gradient(ellipse 58% 56% at 50% 56%, #000, transparent 76%);
}

.ss-hero-inner { max-width: 1100px; margin: 0 auto; }

.ss-hero-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--home-purple-soft);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
}

.ss-hero-brand::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

.ss-hero-title {
    font-size: clamp(2.5rem, 5.6vw, 4.9rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.045em;
    margin: 1rem 0 1.15rem;
}

.ss-hero-title span { display: block; }

.ss-hero-lead {
    max-width: 34rem;
    margin: 0 auto 1.9rem;
    color: var(--home-text-2);
    font-size: clamp(1.02rem, 1.25vw, 1.16rem);
    line-height: 1.6;
}

.ss-hero .ss-cta { justify-content: center; }

/* ── THE CORE ────────────────────────────────────────────────────────────
   One SVG, preserveAspectRatio="xMidYMid meet". Network, nodes and labels all
   live inside the viewBox, so the artwork letterboxes inside this box and can
   never exceed it — at any viewport, in any container. */
.ss-core {
    position: relative;
    width: 100%;
    max-width: 940px;
    margin: clamp(1.5rem, 3vw, 2.75rem) auto 0;
}

.ss-core-art { display: block; width: 100%; height: auto; }
.ss-core-wide { display: block; }
.ss-core-tall { display: none; }

/* Field rings. fill:none on ALL of them — an SVG <circle> with no fill
   defaults to solid black, which turns a ring into an opaque disc. */
.ss-ring,
.ss-ring-2,
.ss-ring-lit { fill: none; }

.ss-ring { stroke: rgba(180, 160, 255, .13); stroke-width: 1; }
.ss-ring-2 { stroke: rgba(180, 160, 255, .08); }
.ss-ring-lit { stroke: rgba(200, 130, 236, .4); stroke-width: 1.2; }

/* Connectors: drawn once on load, then still. */
.ss-wire {
    fill: none;
    stroke: var(--home-purple-soft);
    stroke-width: 1.1;
    stroke-linecap: round;
    opacity: .5;
}

/* One travelling signal per connector. The gap exceeds the longest path so a
   second dash can never follow the first. */
.ss-signal {
    fill: none;
    stroke: var(--home-purple-pale);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 10 460;
    stroke-dashoffset: 470;
    opacity: 0;
}

.ss-node { fill: var(--home-purple-lit); }
.ss-node-ring { fill: none; stroke: rgba(200, 130, 236, .45); stroke-width: 1; }

.ss-label {
    fill: var(--home-text-2);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
}

.ss-core-word {
    fill: var(--home-purple-pale);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
}

/* The butterfly. Sized as a % of the core box, so it scales with the artwork
   and cannot overflow. Circular because a disc reads as a nucleus; the mark is
   square artwork with the butterfly inside the inscribed circle, so the crop
   removes only empty gradient and never touches the logo. */
.ss-core-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 15.5%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}

.ss-core-mark img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .2),
        0 0 0 9px rgba(159, 1, 241, .1),
        0 24px 56px rgba(0, 0, 0, .7),
        0 0 72px rgba(178, 36, 251, .5);
}

.ss-core-bloom {
    position: absolute;
    inset: -60%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 36, 251, .4), transparent 62%);
    pointer-events: none;
}

/* The hero does not stop at a hard edge — the field continues downward. */
.ss-hero-tail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;
    z-index: -1;
    background: linear-gradient(180deg, transparent, rgba(25, 22, 34, .85));
    pointer-events: none;
}
/* #endregion */

/* #region 4. Platform map — what is connected ------------------------------ */
.ss-platform {
    --em-a: #cbb0ff;
    --em-b: #8fa2ff;
    background: linear-gradient(180deg, var(--home-bg-2) 0%, #16131f 60%, #141120 100%);
    border-bottom: 1px solid var(--home-line);
}

.ss-platform .ss-glow {
    background:
        radial-gradient(ellipse 44% 34% at 20% 6%, rgba(159, 1, 241, .16), transparent 70%),
        radial-gradient(ellipse 40% 30% at 82% 20%, rgba(125, 120, 214, .13), transparent 70%);
}

.ss-spine { display: grid; justify-items: center; }

.ss-spine-hub {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.35rem;
    border: 1px solid var(--home-line-lit);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(159, 1, 241, .36), rgba(109, 90, 220, .3));
    color: #fff;
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .03em;
    box-shadow: 0 0 34px rgba(159, 1, 241, .34);
}

/* Fan: dasharray must exceed the longest branch or the "draw" dash tiles and
   the curve renders as a dashed line instead of a connector. */
.ss-fan { display: block; width: 100%; height: 66px; }

.ss-fan path {
    fill: none;
    stroke: var(--home-purple-soft);
    stroke-width: 1;
    stroke-dasharray: 520;
    stroke-dashoffset: 0;
    opacity: .55;
}

.ss-pillars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--home-line);
    border: 1px solid var(--home-line);
    border-radius: var(--home-radius);
    overflow: hidden;
}

.ss-pillar {
    position: relative;
    min-width: 0;
    padding: 1.5rem 1.3rem 1.55rem;
    background: var(--home-surface-raised);
    transition: background .25s ease;
}

.ss-pillar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--home-purple-lit), transparent);
    opacity: .7;
}

.ss-pillar-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: .9rem;
    border: 1px solid rgba(200, 130, 236, .3);
    border-radius: 12px;
    background: rgba(159, 1, 241, .13);
    color: var(--home-purple-pale);
    font-size: 1.05rem;
    transition: transform .3s var(--home-ease), box-shadow .3s ease;
}

.ss-pillar h3 { font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: .5rem; }
.ss-pillar p { color: var(--home-muted); font-size: .88rem; line-height: 1.65; }
/* #endregion */

/* #region 5. Personal recovery --------------------------------------------- */
.ss-personal {
    --em-a: #f0bcff;
    --em-b: #b98cff;
    background: linear-gradient(180deg, #0c0817 0%, var(--home-bg-purple) 42%, #170f2a 100%);
    padding-top: clamp(4.5rem, 7vw, 7rem);
    padding-bottom: clamp(4.5rem, 7vw, 7rem);
}

.ss-personal .ss-glow {
    background:
        radial-gradient(ellipse 44% 42% at 80% 32%, rgba(159, 1, 241, .2), transparent 72%),
        radial-gradient(ellipse 38% 38% at 12% 78%, rgba(178, 36, 251, .12), transparent 74%);
}

.ss-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4.5vw, 4rem);
    align-items: center;
}

.ss-split-visual { min-width: 0; }

/* Four modes as a real grid — no horizontal scrolling anywhere on this page. */
.ss-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--home-line); border: 1px solid var(--home-line); border-radius: var(--home-radius); overflow: hidden; }

.ss-mode {
    min-width: 0;
    padding: 1.15rem 1.1rem 1.25rem;
    background: var(--home-surface);
    transition: background .25s ease;
}

.ss-mode-key {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    color: var(--home-purple-soft);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ss-mode-key i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(200, 130, 236, .28);
    border-radius: 9px;
    background: rgba(159, 1, 241, .14);
    color: var(--home-purple-pale);
    font-size: .8rem;
    flex-shrink: 0;
}

.ss-mode-tools { display: flex; flex-wrap: wrap; gap: .4rem; }
/* #endregion */

/* #region 6. Resource intelligence ----------------------------------------- */
.ss-resources {
    --em-a: #c8b6ff;
    --em-b: #8f8ae0;
    background: linear-gradient(180deg, #08080f 0%, var(--home-bg-1) 42%, #090911 100%);
    border-top: 1px solid var(--home-line);
    border-bottom: 1px solid var(--home-line);
}

.ss-resources .ss-glow {
    background:
        radial-gradient(ellipse 46% 44% at 84% 46%, rgba(125, 120, 214, .16), transparent 72%),
        radial-gradient(ellipse 38% 36% at 10% 18%, rgba(159, 1, 241, .12), transparent 74%);
}

/* A record SCHEMA, not a fake screenshot: this is the shape of the data the
   Resource Database actually stores, presented as a diagram. */
.ss-schema { padding: 1.15rem 1.2rem 1.25rem; }

.ss-schema-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .9rem;
    margin-bottom: .2rem;
    border-bottom: 1px solid var(--home-line);
}

.ss-schema-name { color: var(--home-text); font-size: .95rem; font-weight: 700; }
.ss-schema-kind { color: var(--home-purple-soft); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

.ss-field-row {
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 8rem) minmax(0, 1fr);
    gap: .7rem;
    align-items: baseline;
    padding: .62rem 0;
    border-bottom: 1px solid rgba(180, 160, 255, .07);
}

.ss-field-row:last-child { border-bottom: 0; }
.ss-field-row > i { color: var(--home-purple-soft); font-size: .8rem; }
.ss-field-key { color: var(--home-text); font-size: .82rem; font-weight: 600; }
.ss-field-val { color: var(--home-muted); font-size: .82rem; line-height: 1.5; min-width: 0; }
/* #endregion */

/* #region 7. Organizations ------------------------------------------------- */
.ss-org {
    --em-a: #bdb6ff;
    --em-b: #8f8ae0;
    background: linear-gradient(180deg, #14121f 0%, var(--home-bg-2) 45%, #141122 100%);
    border-top: 1px solid var(--home-line);
}

.ss-org .ss-glow {
    background:
        radial-gradient(ellipse 56% 38% at 50% 100%, rgba(159, 1, 241, .17), transparent 72%),
        radial-gradient(ellipse 32% 28% at 88% 10%, rgba(125, 120, 214, .12), transparent 74%);
}

/* The real access model: roles carry explicit permissions. */
.ss-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}

.ss-matrix caption {
    caption-side: top;
    text-align: left;
    padding: 1.05rem 1.1rem .8rem;
    color: var(--home-purple-soft);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ss-matrix th,
.ss-matrix td { padding: .6rem .7rem; border-top: 1px solid var(--home-line); }
.ss-matrix thead th { border-top: 0; color: var(--home-text-2); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ss-matrix thead th:not(:first-child),
.ss-matrix tbody td { text-align: center; }
.ss-matrix tbody th { text-align: left; font-weight: 600; color: var(--home-text-2); min-width: 0; }

.ss-yes,
.ss-no {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .03);
}

.ss-yes { background: rgba(178, 36, 251, .4); border-color: rgba(200, 130, 236, .6); }

.ss-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--home-line); border: 1px solid var(--home-line); border-radius: var(--home-radius); overflow: hidden; margin-top: 1.5rem; }
.ss-cap { min-width: 0; padding: 1.1rem 1.15rem; background: var(--home-surface-raised); transition: background .25s ease; }
.ss-cap i { display: block; margin-bottom: .5rem; color: var(--home-purple-soft); font-size: 1rem; }
.ss-cap b { display: block; margin-bottom: .18rem; color: var(--home-text); font-size: .88rem; }
.ss-cap span { display: block; color: var(--home-muted); font-size: .8rem; line-height: 1.5; }
/* #endregion */

/* #region 8. Recovery Intelligence — the climax ---------------------------- */
.ss-intel {
    --em-a: #efc8ff;
    --em-b: #9b7bff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(4.5rem, 8vw, 7.5rem) 1rem;
    text-align: center;
    border-top: 1px solid var(--home-line);
}

.ss-intel .ss-glow {
    background:
        radial-gradient(ellipse 48% 42% at 50% 48%, rgba(159, 1, 241, .34), transparent 72%),
        radial-gradient(ellipse 36% 30% at 12% 14%, rgba(178, 36, 251, .15), transparent 70%),
        radial-gradient(ellipse 36% 30% at 88% 14%, rgba(125, 120, 214, .15), transparent 70%),
        linear-gradient(180deg, #0b0916 0%, #1c1034 46%, #180f2c 78%, #100c20 100%);
}

.ss-intel-title {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: 900;
    line-height: 1.07;
    letter-spacing: -.035em;
    margin: .85rem 0 0;
    text-wrap: balance;
}

/* Callback to the hero core: the same convergence, stated as an outcome. */
.ss-converge { max-width: 860px; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.ss-converge-art { display: block; width: 100%; height: auto; }

.ss-conv-label {
    fill: var(--home-text-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ss-conv-core-text { fill: #fff; font-family: inherit; font-size: 19px; font-weight: 800; letter-spacing: .01em; }
.ss-conv-out { fill: var(--home-muted); font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.ss-intel-note {
    max-width: 42rem;
    margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
    color: var(--home-muted);
    font-size: .88rem;
    line-height: 1.65;
}

.ss-intel-note b { color: var(--home-text-2); font-weight: 600; }
/* #endregion */

/* #region 9. Trust + final ------------------------------------------------- */
.ss-trust {
    padding: clamp(2.75rem, 5vw, 4rem) 1rem;
    background: var(--home-bg-calm);
    border-top: 1px solid var(--home-line);
}

.ss-trust-title {
    margin-bottom: 1.3rem;
    color: var(--home-text-2);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-align: center;
}

.ss-trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--home-line); border: 1px solid var(--home-line); border-radius: var(--home-radius); overflow: hidden; }

.ss-trust-grid li {
    min-width: 0;
    padding: 1.1rem 1.15rem;
    background: #0b0b14;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: .7rem;
    align-items: center;
}

.ss-trust-grid i {
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(200, 130, 236, .28);
    border-radius: 10px;
    background: rgba(159, 1, 241, .12);
    color: var(--home-purple-soft);
    font-size: .9rem;
}

.ss-trust-grid b { color: var(--home-text); font-size: .86rem; }
.ss-trust-grid span { color: var(--home-muted); font-size: .78rem; line-height: 1.45; }
.ss-trust-foot { margin-top: .95rem; color: var(--home-muted); font-size: .74rem; text-align: center; }

/* Echoes the hero without repeating it: one focal glow, one primary action. */
.ss-final {
    --em-a: #f0c9ff;
    --em-b: #9b7bff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(5rem, 9vw, 8rem) 1rem clamp(4.5rem, 7vw, 6rem);
    text-align: center;
}

.ss-final .ss-glow {
    z-index: -2;
    background:
        radial-gradient(ellipse 50% 56% at 50% 100%, rgba(159, 1, 241, .4), transparent 72%),
        linear-gradient(180deg, var(--home-bg-purple), #0d0919 60%, #0a0814 100%);
}

.ss-final-mesh {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(200, 170, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200, 170, 255, .06) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(ellipse 58% 68% at 50% 100%, #000, transparent);
    mask-image: radial-gradient(ellipse 58% 68% at 50% 100%, #000, transparent);
}

.ss-final-title {
    max-width: 18ch;
    margin: 0 auto 1.15rem;
    font-size: clamp(2.1rem, 5vw, 3.7rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.04em;
}

.ss-final .ss-lead { margin: 0 auto 2.1rem; max-width: 32rem; }
.ss-final .ss-cta { justify-content: center; }
/* #endregion */

/* #region 10. Motion — five verbs ------------------------------------------ */
@keyframes ss-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ss-settle { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ss-settle-mid { from { opacity: 0; transform: translate(-50%, -50%) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes ss-draw { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }
@keyframes ss-pulse { 0% { stroke-dashoffset: 470; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { stroke-dashoffset: 10; opacity: 0; } }
@keyframes ss-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ss-breathe { 0%, 100% { opacity: .82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* Hero entrance: copy, core, wires, nodes — settled inside ~1.6s. */
.ss-hero-inner > * { animation: ss-reveal .6s var(--home-ease) both; }
.ss-hero-inner > :nth-child(1) { animation-delay: .04s; }
.ss-hero-inner > :nth-child(2) { animation-delay: .11s; }
.ss-hero-inner > :nth-child(3) { animation-delay: .19s; }
.ss-hero-inner > :nth-child(4) { animation-delay: .27s; }
.ss-hero-inner > .ss-core { animation: none; }

.ss-core-mark { animation: ss-settle-mid .7s var(--home-ease) .38s both; }
.ss-ring, .ss-ring-2, .ss-ring-lit { animation: ss-fade .8s ease .55s both; }
.ss-wire { stroke-dasharray: 520; animation: ss-draw .95s var(--home-ease) .62s both; }
.ss-wire:nth-of-type(2) { animation-delay: .70s; }
.ss-wire:nth-of-type(3) { animation-delay: .78s; }
.ss-wire:nth-of-type(4) { animation-delay: .86s; }
.ss-wire:nth-of-type(5) { animation-delay: .94s; }
.ss-wire:nth-of-type(6) { animation-delay: 1.02s; }
.ss-node, .ss-node-ring, .ss-label, .ss-core-word { animation: ss-fade .5s ease 1.15s both; }

/* Ambient — only while the section is on screen. */
.ss-hero.is-live .ss-core-bloom { animation: ss-breathe 9s ease-in-out infinite; }
.ss-hero.is-live .ss-signal { animation: ss-pulse 7s ease-in-out 1.6s infinite; }
.ss-hero.is-live .ss-signal:nth-of-type(2) { animation-delay: 2.7s; }
.ss-hero.is-live .ss-signal:nth-of-type(3) { animation-delay: 3.8s; }
.ss-hero.is-live .ss-signal:nth-of-type(4) { animation-delay: 4.9s; }
.ss-hero.is-live .ss-signal:nth-of-type(5) { animation-delay: 6s; }
.ss-hero.is-live .ss-signal:nth-of-type(6) { animation-delay: 7.1s; }
.ss-intel.is-live .ss-signal { animation: ss-pulse 8s ease-in-out infinite; }
.ss-intel.is-live .ss-signal:nth-of-type(2) { animation-delay: 1.1s; }
.ss-intel.is-live .ss-signal:nth-of-type(3) { animation-delay: 2.2s; }
.ss-intel.is-live .ss-signal:nth-of-type(4) { animation-delay: 3.3s; }

/* One-time reveals. Content is visible by default; the observer opts in. */
.ss-rise { opacity: 1; transform: none; }
#ssHome.ss-motion .ss-rise { opacity: 0; transform: translateY(16px); transition: opacity .55s ease-out, transform .55s var(--home-ease); }
#ssHome.ss-motion .ss-rise.is-in { opacity: 1; transform: none; }
#ssHome.ss-motion .ss-rise[data-d="1"] { transition-delay: .07s; }
#ssHome.ss-motion .ss-rise[data-d="2"] { transition-delay: .14s; }
#ssHome.ss-motion .ss-rise.ss-settle-in { transform: scale(.975); }
.is-in .ss-fan path { animation: ss-draw .85s var(--home-ease) .1s both; }

#ssHome .fade-in-on-scroll { opacity: 1; transform: none; }
#ssHome.ss-motion .fade-in-on-scroll:not(.visible) { opacity: 0; transform: translateY(14px); }

/* Lift — pointer devices only, so mobile never strands a hover state. */
@media (hover: hover) and (pointer: fine) {
    .ss-btn:hover i, .ss-link:hover i { transform: translateX(4px); }
    .ss-pillar:hover { background: #161320; }
    .ss-pillar:hover .ss-pillar-ico { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(159, 1, 241, .3); }
    .ss-mode:hover { background: #191527; }
    .ss-cap:hover { background: rgba(159, 1, 241, .08); }
    a.ss-chip:hover { color: #fff; background: rgba(159, 1, 241, .2); border-color: rgba(200, 130, 236, .55); transform: translateY(-1px); }
    .ss-trust-grid li:hover { background: #0e0e19; }
}

/* Reduced motion: everything lands, nothing loops, colour is untouched. */
@media (prefers-reduced-motion: reduce) {
    #ssHome *,
    #ssHome *::before,
    #ssHome *::after { animation: none !important; transition-duration: .01ms !important; }

    #ssHome.ss-motion .ss-rise,
    #ssHome.ss-motion .fade-in-on-scroll { opacity: 1; transform: none; }
    #ssHome .ss-wire, #ssHome .ss-fan path { stroke-dashoffset: 0; }
    /* Travelling signals have no static meaning — hide rather than freeze. */
    #ssHome .ss-signal { display: none; }
}
/* #endregion */

/* #region 11. Small screens ------------------------------------------------ */
@media (max-width: 991.98px) {
    .ss-split { grid-template-columns: 1fr; }
    .ss-pillars { grid-template-columns: 1fr 1fr; }
    .ss-caps { grid-template-columns: 1fr 1fr; }
    .ss-trust-grid { grid-template-columns: 1fr 1fr; }
}

/* Purpose-built phone hero: the wide six-node field is replaced by a compact
   three-node one — a different SVG, not the same artwork scaled down. */
@media (max-width: 767.98px) {
    .ss-hero { padding: 2.25rem 1rem 3rem; }
    .ss-hero-title { font-size: clamp(2.25rem, 10.5vw, 3rem); margin: .85rem 0 .95rem; }
    .ss-hero-lead { font-size: 1.01rem; margin-bottom: 1.4rem; }
    .ss-hero .ss-cta { flex-direction: column; align-items: stretch; }
    .ss-hero .ss-btn { width: 100%; }
    .ss-core { max-width: 420px; margin-top: 1.75rem; }
    .ss-core-wide { display: none; }
    .ss-core-tall { display: block; }
    .ss-core-mark { width: 21%; }
}

@media (max-width: 575.98px) {
    .ss-section { padding: 3.4rem 1rem; }
    .ss-h2 { font-size: clamp(1.8rem, 7.5vw, 2.2rem); }
    .ss-lead { font-size: .97rem; }
    .ss-head { margin-bottom: 1.65rem; }
    .ss-cta .ss-btn { width: 100%; }
    .ss-panel { box-shadow: 0 14px 32px rgba(0, 0, 0, .4); }

    .ss-pillars { grid-template-columns: 1fr; }
    .ss-fan { height: 44px; }
    .ss-pillar { padding: 1.05rem 1rem 1.15rem; }
    .ss-modes { grid-template-columns: 1fr; }
    .ss-caps { grid-template-columns: 1fr; }
    .ss-trust-grid { grid-template-columns: 1fr; }

    /* The matrix keeps all three role columns but loses its padding, so it
       still fits 320px without any horizontal scrolling. */
    .ss-matrix { font-size: .76rem; }
    .ss-matrix th, .ss-matrix td { padding: .5rem .3rem; }
    .ss-matrix caption { padding: .9rem .8rem .7rem; }

    .ss-field-row { grid-template-columns: 1.1rem minmax(0, 1fr); row-gap: .15rem; }
    .ss-field-row > i { grid-row: 1 / 3; }
    .ss-intel { padding: 3.6rem 1rem; }
    .ss-final { padding: 4rem 1rem 3.5rem; }
    .ss-final-title { font-size: clamp(1.95rem, 8vw, 2.4rem); }
}
/* #endregion */

/* #region 12. Legacy: Plans, SuperUser-only (gated in the view) ------------- */
.ss-legacy h2 { font-size: 2.5em; text-align: center; color: #fff; margin-bottom: 0; }
#ssHome .ss-legacy p { max-width: 600px; margin: 0 auto 1em; text-align: center; }

.section-title-hr {
    opacity: 1;
    height: 4px;
    width: 180px;
    border: none;
    margin: 1em auto 3em;
    background: linear-gradient(90deg, transparent, #d400ff, #9f01f1, #d400ff, transparent);
    filter: drop-shadow(0 0 10px #d400ff);
}

#plans { color: #eee; background-color: #2c2d33; padding: 4em 1em; }

/* minmax(220px,…) not 260px: at 320px viewport a 260px track plus the 1em
   section padding could not shrink, which is a horizontal-overflow risk. */
.plans-grid {
    display: grid;
    gap: 2em;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    max-width: 1200px;
    margin: 0 auto;
}

.plan-card { transition: transform .3s ease, box-shadow .3s ease; background: rgba(255, 255, 255, .08); border-radius: 15px; box-shadow: 0 8px 32px rgba(0, 0, 0, .4); cursor: default; min-width: 0; }
.plan-card:hover { transform: translateY(-8px); box-shadow: 5px 6px 8px 0 rgba(255, 255, 255, .75); }
.plan-card-body { padding: .1em 1.2em; }
.plan-card-header { background: linear-gradient(135deg, white, #9f01f1, #0f2027); padding: 1.5rem; text-align: center; }
.plan-card.fade-in-on-scroll { opacity: 0; transform: translateY(20px); }
.plan-card.visible { opacity: 1; transform: translateY(0); transition: transform .5s ease, opacity .5s ease; }
.plan-card h3 { font-size: 1.4em; margin-bottom: .75em; color: #fff; }
.plan-card .features { list-style: none; margin-bottom: 1em; padding: 0; }
.plan-card .features li { margin-bottom: .5em; color: #ccc; }
.plan-card .pricing { list-style: none; margin-bottom: 1em; padding: 0; }
.plan-card .pricing li { display: flex; justify-content: space-between; align-items: center; padding: 5px; }
.plan-card .pricing li span { color: #fff; font-weight: bold; }
.plan-card .pricing li small { color: #ccc; margin-left: .25em; }
.plan-card .btn { background: #9f01f1; color: #fff; padding: .5em 1em; border-radius: 8px; transition: background .3s ease; }
.plan-card .btn:hover { background: #7a00b1; }
.pricing li:hover { border: 1px solid #9f01f1; border-radius: 5px; }
.coming-soon-card { position: relative; overflow: hidden; }

.coming-soon-card .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 15px;
}

.coming-soon-card:hover .overlay { opacity: 1; cursor: not-allowed; font-weight: 400; border-top: 1px solid white; border-left: 1px solid white; }
.fade-in-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity .6s ease-out, transform .6s ease-out; }
.fade-in-on-scroll.visible { opacity: 1; transform: translateY(0); }
/* #endregion */