/* =====================================================
   Cellero landing page — cellero.net format
   -----------------------------------------------------
   Ported from the brand's own landing template:
   D:\Cellero.Branding\brands\cellero\web-landing\web\landing\index.html
   Read that folder's README.md before changing anything here — it records why
   the headline is two spans, why the login button is a ghost, and which knobs
   govern the background's feel.

   Three deliberate differences from the source, all forced by this being a
   Blazor page inside an ABP/LeptonX host rather than a static file:

   1. Every selector is prefixed `.cl` so LeptonX and Bootstrap base styles
      (which reset inputs, buttons, h1 and footer) cannot reach in, and so
      nothing here leaks out to the rest of the application.
   2. The body rules hang off `body.cellero-landing`, a class added and removed
      by landing.js, because this page is one route in a SPA rather than a
      whole document.
   3. This file is NOT Blazor-scoped CSS. The contact form replaces itself with
      a `.sent` panel built in JavaScript, and a scoped stylesheet would not
      match an element Blazor never rendered.

   The mark is the mirrored brand asset rather than the template's inlined SVG —
   same file, but refreshed by the directory copy like every other logo here.
   ===================================================== */

/* The body class is added by landing.js, which cannot run until the Blazor circuit
   connects — so anything that depends on it is unpainted for the first frames. Only
   the scroll lock lives here for that reason. The dark ground is painted by `.cl`
   below, which is in the prerendered HTML and styled by this file from the first
   byte: without that split the page shows the LeptonX theme's background — white on
   the light theme — until the circuit is up, which is the load flash. */
body.cellero-landing {
    background: #131316 !important;
    color: #F2F2F4;
    overflow: hidden;
}

.cl {
    --ink: #131316;
    --ink-2: #1B1B1F;
    --text: #F2F2F4;
    --muted: #9C9CA5;
    --muted-dim: #6E6E77;
    --orange: #F48A3F;
    --orange-deep: #D9702A;
    --edge: rgba(255, 255, 255, .09);
    --stack: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    font-family: var(--stack);
    font-weight: 300;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* Covers the viewport and paints the ground on the very first frame, before
       any script has run. See the note on body.cellero-landing above. */
    min-height: 100vh;
    background: var(--ink);
}

.cl *, .cl *::before, .cl *::after { box-sizing: border-box; }
.cl h1, .cl p, .cl form, .cl label { margin: 0; padding: 0; }
.cl [hidden] { display: none !important; }

/* ---------- the quiet floor ---------- */
/* The canvas keeps its default 300x150 bitmap until landing.js sizes it, and an
   unpainted canvas is transparent — so it carries the ground colour itself rather
   than letting whatever is behind it show through for those first frames. */
.cl #floor { position: fixed; inset: 0; z-index: 0; display: block; background: var(--ink); }

.cl .veil {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(ellipse 58% 46% at 50% 45%,
            rgba(19, 19, 22, .90) 0%, rgba(19, 19, 22, .62) 42%,
            rgba(19, 19, 22, .18) 68%, rgba(19, 19, 22, 0) 84%),
        linear-gradient(168deg, rgba(40, 34, 32, .55) 0%, rgba(19, 19, 22, 0) 46%, rgba(35, 26, 20, .45) 100%);
}

/* ---------- client login — utility, not navigation ---------- */
/* Pinned to the visual viewport rather than to `.page`.
   Reported missing on iPhone (2026-08-17). Ruled out by inspection of the live site:
   the button IS in the served DOM, the deployed landing.css is byte-identical to this
   file, no LeptonX or Bootstrap stylesheet defines a competing `.login` rule, and
   landing.js runs (the canvas paints). So it is rendered and unhidden — which points
   at where it is, not whether it exists.
   `.page` is `min-height: 100vh`, and on iOS `100vh` is the large viewport, so that box
   does not match what is on screen; any document scroll also carries an absolutely
   positioned element out of view. Fixed positioning is measured from the visual
   viewport and is immune to both. The page is scroll-locked
   (`body.cellero-landing { overflow: hidden }`), so fixed and absolute are otherwise
   indistinguishable here and desktop is unchanged.
   ⚠ Not confirmed on a device — this removes a class of cause rather than a proven
   one. If it persists, the discriminating test is landscape: the only mobile-specific
   rules live in `@media (max-width: 560px)`, so appearing above that width implicates
   the breakpoint block instead. */
.cl .login {
    position: fixed;
    top: max(clamp(20px, 3.4vw, 38px), env(safe-area-inset-top, 0px) + 12px);
    right: max(clamp(20px, 4vw, 44px), env(safe-area-inset-right, 0px) + 12px);
    z-index: 4;
    display: inline-flex; align-items: center; gap: .55em;
    font-family: var(--stack);
    font-size: .68rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
    color: #8B8B94; text-decoration: none;
    padding: .7em 1.1em; border: 1px solid rgba(255, 255, 255, .10); border-radius: 999px;
    background: rgba(255, 255, 255, .02);
    cursor: pointer;
    transition: color .3s ease, border-color .3s ease, background .3s ease;
}

.cl .login:hover { color: #F48A3F; border-color: rgba(244, 138, 63, .45); background: rgba(244, 138, 63, .07); }
.cl .login:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.cl .login svg { width: .8em; height: .8em; opacity: .75; transition: transform .35s cubic-bezier(.2, .8, .3, 1); }
.cl .login:hover svg { transform: translateX(2px); opacity: 1; }

@media (max-width: 560px) {
    .cl .login { font-size: .6rem; padding: .62em .95em; letter-spacing: .12em; }
    .cl .login .word { display: none; }
}

/* ---------- layout ---------- */
.cl .page {
    position: relative; z-index: 2;
    min-height: 100vh; display: flex; flex-direction: column;
    padding: clamp(22px, 4vw, 44px);
}

.cl main {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    gap: clamp(20px, 3.4vh, 34px);
}

/* ---------- logo ---------- */
/* ⚠ `.mark` collides with Bootstrap's highlighter utility — `mark, .mark` sets
   `background-color: var(--bs-highlight-bg)` (#fff3cd) and a padding, which
   paints a cream box exactly the size of the logo. The source template never
   met Bootstrap; this page does, so the class name has to be neutralised
   explicitly. `.mark` is the only name in this file Bootstrap also claims. */
.cl .mark {
    position: relative; display: inline-flex;
    padding: 0; background: none; color: inherit;
}
.cl .mark img { width: clamp(196px, 23vw, 258px); height: auto; display: block; position: relative; z-index: 1; }

.cl .mark::before {
    content: ''; position: absolute; left: 12.5%; top: 50%; width: 150px; height: 150px;
    transform: translate(-50%, -50%); border-radius: 50%; z-index: 0;
    background: radial-gradient(circle, rgba(244, 138, 63, .26) 0%, rgba(244, 138, 63, .085) 44%, transparent 72%);
    filter: blur(18px);
    animation: cl-breathe 9.5s ease-in-out infinite;
}

@keyframes cl-breathe {
    0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.94); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.1); }
}

/* ---------- words ---------- */
.cl h1 {
    display: flex; flex-direction: column; align-items: center; gap: .02em;
    letter-spacing: -.02em; line-height: 1.08;
    font-size: clamp(2.15rem, 5.7vw, 4.05rem);
}

/* the set-up sits back; the payoff carries the light */
.cl h1 .l1 { font-weight: 500; color: #83838C; }

.cl h1 .l2 {
    font-weight: 700;
    animation: cl-headglow 9.5s ease-in-out -1.6s infinite;
    will-change: text-shadow;
}

@keyframes cl-headglow {
    0%, 100% {
        color: #ECECEF;
        text-shadow: 0 0 22px rgba(244, 138, 63, .045), 0 0 64px rgba(244, 138, 63, .02);
    }
    50% {
        color: #FFFFFF;
        text-shadow: 0 0 32px rgba(244, 138, 63, .22), 0 0 92px rgba(244, 138, 63, .11);
    }
}

/* not a full stop — a disc from the mark, which flares when a packet lands */
.cl h1 .dot {
    display: inline-block; vertical-align: baseline;
    width: .145em; height: .145em; margin-left: .06em;
    background: var(--orange); border-radius: 50%;
    animation: cl-dotbreathe 4.4s ease-in-out infinite;
    transition: box-shadow .5s ease, background .5s ease, transform .5s ease;
}

@keyframes cl-dotbreathe {
    0%, 100% { box-shadow: 0 0 5px rgba(244, 138, 63, .34); transform: scale(1); }
    50%      { box-shadow: 0 0 13px rgba(244, 138, 63, .62); transform: scale(1.09); }
}

.cl h1 .dot.flare {
    background: #FFC48E;
    box-shadow: 0 0 20px rgba(244, 138, 63, .9), 0 0 44px rgba(244, 138, 63, .4);
    transform: scale(1.24);
    transition: box-shadow .16s ease, background .16s ease, transform .16s ease;
}

.cl .sub {
    font-size: clamp(1rem, 1.62vw, 1.2rem); line-height: 1.6; color: var(--muted);
    max-width: 35ch; font-weight: 300;
}

.cl .cta {
    display: inline-flex; align-items: center; gap: .62em;
    background: var(--orange); color: #17130F;
    font-family: var(--stack); font-weight: 700; font-size: .83rem;
    letter-spacing: .11em; text-transform: uppercase; text-decoration: none;
    padding: 1.05em 2.1em; border-radius: 999px; border: 0; cursor: pointer;
    transition: transform .45s cubic-bezier(.2, .8, .3, 1), box-shadow .45s ease, background .3s ease;
    box-shadow: 0 8px 30px rgba(244, 138, 63, .20);
}

.cl .cta:hover { background: #FFA05A; transform: translateY(-2px); box-shadow: 0 14px 42px rgba(244, 138, 63, .34); }
.cl .cta:focus-visible { outline: 2px solid var(--orange); outline-offset: 5px; }
.cl .cta svg { width: .85em; height: .85em; transition: transform .45s cubic-bezier(.2, .8, .3, 1); }
.cl .cta:hover svg { transform: translateX(3px); }

/* ---------- contact panel ---------- */
.cl .contact {
    width: min(470px, 100%); display: flex; flex-direction: column; gap: 10px; text-align: left;
    animation: cl-rise .55s cubic-bezier(.2, .75, .3, 1) forwards;
}

.cl .contact[hidden] { display: none; }
.cl .contact .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cl .contact label { display: block; }

.cl .contact input, .cl .contact textarea {
    width: 100%; font: inherit; font-size: .92rem; font-weight: 300; color: var(--text);
    background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 10px; padding: .85em 1em; resize: vertical;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.cl .contact textarea { min-height: 96px; line-height: 1.55; }
.cl .contact input::placeholder, .cl .contact textarea::placeholder { color: #63636C; }

.cl .contact input:focus, .cl .contact textarea:focus {
    outline: none; border-color: rgba(244, 138, 63, .62); background: rgba(255, 255, 255, .05);
    box-shadow: 0 0 0 4px rgba(244, 138, 63, .11);
}

.cl .contact input[aria-invalid="true"], .cl .contact textarea[aria-invalid="true"] {
    border-color: rgba(229, 86, 62, .7); box-shadow: 0 0 0 4px rgba(229, 86, 62, .10);
}

.cl .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cl .contact .actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.cl .contact .send { flex: 0 0 auto; border: 0; cursor: pointer; }
.cl .contact .send[disabled] { opacity: .55; cursor: default; }

.cl .ghost {
    background: none; border: 0; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 500;
    letter-spacing: .13em; text-transform: uppercase; color: #6E6E77; padding: .6em .2em;
    transition: color .3s ease;
}

.cl .ghost:hover { color: #9C9CA5; }

.cl .formnote { font-size: .8rem; line-height: 1.55; color: #8B8B94; margin: 2px 0 0; min-height: 1.2em; }
.cl .formnote a { color: var(--orange); text-decoration: none; }
.cl .formnote a:hover { text-decoration: underline; }
.cl .formnote.bad { color: #E5A08E; }

.cl .sent {
    width: min(470px, 100%); display: flex; flex-direction: column; gap: 8px;
    animation: cl-rise .6s cubic-bezier(.2, .75, .3, 1) forwards;
}

.cl .sent b { font-weight: 500; font-size: 1.05rem; color: var(--text); }
.cl .sent span { font-size: .88rem; color: #8B8B94; line-height: 1.6; }

@media (max-width: 560px) {
    .cl .contact .pair { grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */
.cl footer {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    padding-top: 20px; border-top: 1px solid var(--edge);
    font-size: .7rem; letter-spacing: .19em; text-transform: uppercase; color: var(--muted-dim);
}

.cl footer a { color: var(--muted); text-decoration: none; transition: color .3s ease; }
.cl footer a:hover { color: var(--orange); }
.cl .triad { display: flex; gap: .85em; align-items: center; }
.cl .triad i { font-style: normal; width: 3px; height: 3px; border-radius: 50%; background: var(--orange); opacity: .75; }

/* ---------- entrance ---------- */
.cl .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cl .rise { opacity: 0; transform: translateY(14px); animation: cl-rise .95s cubic-bezier(.2, .75, .3, 1) forwards; }
.cl .d1 { animation-delay: .10s; } .cl .d2 { animation-delay: .30s; } .cl .d3 { animation-delay: .46s; }
.cl .d4 { animation-delay: .62s; } .cl .d5 { animation-delay: .86s; }

@keyframes cl-rise { to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
    .cl .sub { max-width: 29ch; }
    .cl footer { flex-direction: column; justify-content: center; text-align: center; gap: 11px; font-size: .63rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cl .mark::before { animation: none; opacity: .8; }
    .cl h1 .l2 { animation: none; color: #F2F2F4; text-shadow: 0 0 26px rgba(244, 138, 63, .10); }
    .cl h1 .dot { animation: none; box-shadow: 0 0 9px rgba(244, 138, 63, .5); }
    .cl .rise { animation: none; opacity: 1; transform: none; }
    .cl .cta { transition: none; }
}