/* manrope-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/manrope-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* manrope-cyrillic-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/manrope-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* manrope-greek-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/manrope-greek-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* manrope-vietnamese-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/manrope-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* manrope-latin-ext-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/manrope-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* manrope-latin-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --dp-role-manager: #A78BFA;
  --dp-role-traffic: #38BDF8;
  --dp-role-designer: #F472B6;
  --dp-role-copy: #FB923C;
  --dp-role-developer: #4ADE80;
  --dp-role-social: #34D399;
}

/**
 * The Deskprise palette — visual direction v4 (ADR 087, the owner's approval of 2026-10-28).
 *
 * The office is the app and the interface is glass over it. A near-black ground, panels told
 * from it by a dark veil, a hairline and a deep black shadow, and one accent: cobalt. Nothing
 * glows (ADR 087 §3.1): no coloured halo, no patch of light behind a pane, no light moving
 * behind the planes. Depth is a black shadow and a 1px line; the only light left is a 1px
 * hairline along the top of a featured card.
 *
 * Every colour is a token. Nothing in a component may name a hex value: an avatar, a status
 * dot and a button have to agree, and they only agree if they read from the same place.
 *
 * The names are older than this palette and were kept, so no component had to change to be
 * repainted (ADR 035, ADR 045, ADR 087). `--dp-cyan` is the brand's colour whatever it is
 * called; today it is cobalt. The `--dp-glow-*` and `--dp-light-*` names, once the halos and
 * the lit button of visual v3, now hold a hairline and a flat fill: the components that ask
 * for them were repainted by changing what they hold.
 */
:root {
  /* ---- Ground: the room the interface sits in ------------------------------------------- */
  --dp-bg-void: #04060a; /* ground-deep */
  --dp-bg-base: #06080c; /* ground: a near-black, the office behind it */
  /* raised: what floats over a surface — a dialog, a sheet, a tip. Almost solid: a dialog is
     read, not looked through. */
  --dp-bg-raise: rgb(17 18 21 / 96%);
  --dp-bg-sunken: #04060a; /* sunken: wells — a field, a meter's track */

  /* ---- Surface: a panel is a veil of glass over the ground, plus a line ----------------- */
  --dp-surface: rgb(13 14 16 / 90%); /* surface: blurred and saturated by `--dp-glass` */
  /* A card (ADR 087 §2): a dark gradient, a hairline and a black shadow. A neutral black, a
     little lighter at the top: no blue in it, so it sits on the ground's black-to-grey instead of
     standing apart from it (the owner, 2026-10-29: "azul petróleo… desconexo"). */
  --dp-surface-card: linear-gradient(180deg, rgb(26 27 30 / 92%), rgb(12 13 15 / 95%));
  /* Glass over the office (ADR 087 §2), with a 24–28px blur (`--dp-glass`). */
  --dp-glass-fill: linear-gradient(180deg, rgb(22 23 26 / 78%), rgb(10 11 13 / 86%));
  /* The one light left: a 1px hairline along the top of a featured card. */
  --dp-hairline-top: inset 0 1px 0 rgb(255 255 255 / 6%);
  --dp-surface-strong: var(--dp-bg-raise); /* a control resting on a surface */
  /* What a pointer or a finger adds to whatever it is over — ground, surface or raised alike,
     which is why these two are a veil of white and not a colour of their own. */
  --dp-surface-hover: #ffffff12;
  --dp-surface-active: #ffffff1c;
  /* A part of a screen (ADR 055): a soft tone of the pane, with no edge, no blur and no light. One
     level only: nothing inside it is filled again. */
  --dp-surface-group: rgb(255 255 255 / 3.5%);
  /* A line of a part that answers a pointer. */
  --dp-surface-group-hover: rgb(255 255 255 / 4.5%);
  --dp-border: #ffffff14; /* line */
  --dp-border-strong: #ffffff24; /* line-strong */
  --dp-border-faint: #ffffff0d; /* a divider inside a panel: fainter than its edge */

  /* ---- Ink ------------------------------------------------------------------------------ */
  --dp-text: #edeff3; /* ink */
  --dp-text-bright: #f4f6fa; /* ink, brightest: the wordmark */
  --dp-text-muted: #9aa3b5; /* ink-muted */
  /* ink-dim. ONLY for text of 16px and up, and for the lines of an icon: on these grounds it
     reaches 3:1 but not the 4.5:1 small text needs. Anything smaller is `--dp-text-muted`. */
  --dp-text-dim: #6b7385;
  /* A label (ADR 087 §1): sentence case, 600, 12.5–13px, in this grey. */
  --dp-text-label: #8c95a6;
  /* The figures that sit beside a hero number: its R$ and its cents (ADR 087 §1). */
  --dp-text-currency: #c9ced8;
  --dp-text-cents: #7f889a;
  --dp-text-inverse: #050b20; /* on-brand: what is written on a filled cobalt button */
  --dp-text-on-gold: #1a1300; /* on-gold: what is written on a filled gold one */

  /* ---- Cobalt: the brand and the action. Named cyan since the brand was teal ------------ */
  --dp-cyan: #4c7bff; /* cobalt */
  --dp-cyan-bright: #8eaaff; /* cobalt, light: a link, an accent on the dark */
  --dp-cyan-dim: #3a6cf0; /* cobalt, one step back: the filled button (white on it reads 4.6:1), and planning */
  /* The filled button under a pointer: a step deeper still, white on it above 5:1. */
  --dp-cyan-press: #3360e0;
  --dp-cyan-deep: #1d3fae; /* cobalt, deep: a pressed fill */
  --dp-cyan-ice: #c9d6ff; /* cobalt, palest: a working ring */
  --dp-cyan-wash: rgb(76 123 255 / 12%);
  --dp-cyan-edge: rgb(76 123 255 / 42%);
  /* Azure: the subscription screens' light blue, where the light cobalt read as lilac (2026-10-29). */
  --dp-azure: #5aa8ff;
  --dp-azure-ice: #cfe5ff;

  /* ---- Green: success, completion, health ----------------------------------------------- */
  --dp-green: #45d49a;
  --dp-green-dim: #2a9e70;
  --dp-green-wash: rgb(69 212 154 / 12%);
  --dp-green-edge: rgb(69 212 154 / 35%);

  /* ---- Gold: an approval, and nothing else ----------------------------------------------
     An agent is stopped until a person decides. No warning, no badge of rank, no avatar: the
     moment gold means two things it stops meaning this one. The places that may use it are
     listed, one by one, in `test/brand-v2.test.ts`. */
  --dp-gold: #ffd24a;
  --dp-gold-dim: #c79a1f;
  --dp-gold-wash: rgb(255 210 74 / 12%);
  --dp-gold-edge: rgb(255 210 74 / 40%);

  /* ---- Amber: waiting, and every warning that is not an approval ------------------------ */
  --dp-amber: #f2b44b;
  --dp-amber-wash: rgb(242 180 75 / 12%);
  --dp-amber-edge: rgb(242 180 75 / 32%);

  /* ---- Red: failure --------------------------------------------------------------------- */
  --dp-red: #ff6b6b;
  --dp-red-light: #ff8a8a;
  --dp-red-dim: #b32f3f;
  --dp-red-wash: rgb(255 107 107 / 12%);
  --dp-red-wash-strong: rgb(255 107 107 / 20%); /* the danger button under a pointer */
  --dp-red-edge: rgb(255 107 107 / 35%);

  /* ---- Violet: who an agent is, never a status ------------------------------------------
     The only colour here that does not mean a state. It marks an agent — its avatar — and is
     deliberately outside the status vocabulary so that it can never be read as one. */
  --dp-violet: #b4a6ff;
  --dp-violet-wash: rgb(180 166 255 / 12%);
  --dp-violet-edge: rgb(180 166 255 / 32%);

  /* ---- Slate: at rest, and everything that should recede -------------------------------- */
  --dp-slate: #8c95a6;
  --dp-slate-wash: rgb(140 149 166 / 12%);
  --dp-slate-edge: rgb(140 149 166 / 28%);

  /* ---- Miraggen: a partner's own colours, on its card only ------------------------------
     The magenta-to-blue of Miraggen's symbol (ADR 072), worn by the way to buy its credits
     beside the balance (the owner, 2026-10-27: "um botãozinho de comprar crédito bem
     sofisticado"). Nowhere else: it is Miraggen's, not the brand's. */
  --dp-miraggen-rim: linear-gradient(120deg, #d946ef, #8b5cf6 45%, #3b82f6 75%, #22d3ee);
  --dp-miraggen-wash: linear-gradient(transparent, transparent);
  --dp-miraggen-focus: #a78bfa;

  /* ---- Pix: the Banco Central's own green, on Pix's mark only ---------------------------
     A person paying by Pix looks for its mark, in its colour (the subscription's payment,
     2026-10-28). Nowhere else: it is Pix's, not the brand's, and it means no state. */
  --dp-pix: #32bcad;

  /* ---- The filled button and the hairlines (ADR 087: nothing glows) -------------------
     The brand's button is a flat fill of cobalt one step deep, with white on it and a 1px
     hairline along its top; the quiet button is a sheet of white at 4%. The `glow` names are
     visual v3's; they now hold a hairline and a black shadow, never a coloured halo. */
  --dp-light-brand: linear-gradient(var(--dp-cyan-dim), var(--dp-cyan-dim));
  --dp-light-brand-hover: linear-gradient(var(--dp-cyan-press), var(--dp-cyan-press));
  --dp-glow-button: inset 0 1px 0 rgb(255 255 255 / 16%);
  --dp-glow-button-hover: inset 0 1px 0 rgb(255 255 255 / 22%);
  --dp-sheen: linear-gradient(transparent, transparent);
  --dp-glass-button: linear-gradient(rgb(255 255 255 / 4%), rgb(255 255 255 / 4%));
  --dp-glass-button-hover: linear-gradient(rgb(255 255 255 / 7%), rgb(255 255 255 / 7%));
  --dp-glass-edge: inset 0 1px 0 rgb(255 255 255 / 6%);
  --dp-text-on-brand: #ffffff;
  --dp-text-on-brand-shade: 0 0 0 transparent;
  /* The one thing on a screen that is the action: a hairline and a deep black shadow. */
  --dp-glow-brand: 0 0 0 1px rgb(255 255 255 / 10%), 0 24px 60px rgb(0 0 0 / 45%);
  /* What waits for a person: a 1px gold line, no halo. */
  --dp-glow-gold: 0 0 0 1px rgb(255 210 74 / 45%), 0 24px 60px rgb(0 0 0 / 45%);

  /* ---- The sky's icon (ADR 087 §4): the colours of the weather, and of nothing else --------- */
  --dp-weather-sun: #f5c76a;
  --dp-weather-cloud: #e4e8f0;
  --dp-weather-moon: #c9d6ff;

  /* ---- The landing page and the "vidro" finish (owner, 2026-10-15) ----------------------- */
  /* The top of a filled gold button's light. */
  --dp-gold-light: #ffe7a1;
  /* The colour of each role (--dp-role-manager, -copy, -designer, -traffic, -developer and
     -other) is not written here: the office's canvas paints the same colours, so they live in
     one table, `roles.ts`, which the root layout writes on the page. */
}

/**
 * One colour per status, declared once.
 *
 * The agents list, the office and the activity feed all draw the same seven states. If each
 * screen picked its own colour, "working" would mean something slightly different in each
 * place — which is exactly the kind of drift that makes a dashboard untrustworthy. When the
 * PixiJS office arrives in the next checkpoint it reads these same variables, so a robot and
 * its row in a table can never disagree.
 */
:root {
  --dp-status-idle: var(--dp-slate);
  --dp-status-idle-wash: var(--dp-slate-wash);
  --dp-status-idle-edge: var(--dp-slate-edge);

  --dp-status-planning: var(--dp-cyan-dim);
  --dp-status-planning-wash: var(--dp-cyan-wash);
  --dp-status-planning-edge: var(--dp-cyan-edge);

  --dp-status-working: var(--dp-cyan);
  --dp-status-working-wash: var(--dp-cyan-wash);
  --dp-status-working-edge: var(--dp-cyan-edge);

  --dp-status-waiting: var(--dp-amber);
  --dp-status-waiting-wash: var(--dp-amber-wash);
  --dp-status-waiting-edge: var(--dp-amber-edge);

  --dp-status-needs_approval: var(--dp-gold);
  --dp-status-needs_approval-wash: var(--dp-gold-wash);
  --dp-status-needs_approval-edge: var(--dp-gold-edge);

  --dp-status-completed: var(--dp-green);
  --dp-status-completed-wash: var(--dp-green-wash);
  --dp-status-completed-edge: var(--dp-green-edge);

  --dp-status-error: var(--dp-red);
  --dp-status-error-wash: var(--dp-red-wash);
  --dp-status-error-edge: var(--dp-red-edge);

  /* Task statuses reuse the same vocabulary, so a task and the agent on it read alike. */
  --dp-status-pending: var(--dp-slate);
  --dp-status-pending-wash: var(--dp-slate-wash);
  --dp-status-pending-edge: var(--dp-slate-edge);

  --dp-status-blocked: var(--dp-amber);
  --dp-status-blocked-wash: var(--dp-amber-wash);
  --dp-status-blocked-edge: var(--dp-amber-edge);

  --dp-status-in_progress: var(--dp-cyan);
  --dp-status-in_progress-wash: var(--dp-cyan-wash);
  --dp-status-in_progress-edge: var(--dp-cyan-edge);

  --dp-status-done: var(--dp-green);
  --dp-status-done-wash: var(--dp-green-wash);
  --dp-status-done-edge: var(--dp-green-edge);

  --dp-status-failed: var(--dp-red);
  --dp-status-failed-wash: var(--dp-red-wash);
  --dp-status-failed-edge: var(--dp-red-edge);

  --dp-status-cancelled: var(--dp-slate);
  --dp-status-cancelled-wash: var(--dp-slate-wash);
  --dp-status-cancelled-edge: var(--dp-slate-edge);

  /* Project statuses. */
  --dp-status-draft: var(--dp-slate);
  --dp-status-draft-wash: var(--dp-slate-wash);
  --dp-status-draft-edge: var(--dp-slate-edge);

  --dp-status-active: var(--dp-cyan);
  --dp-status-active-wash: var(--dp-cyan-wash);
  --dp-status-active-edge: var(--dp-cyan-edge);

  --dp-status-paused: var(--dp-amber);
  --dp-status-paused-wash: var(--dp-amber-wash);
  --dp-status-paused-edge: var(--dp-amber-edge);

  --dp-status-archived: var(--dp-slate);
  --dp-status-archived-wash: var(--dp-slate-wash);
  --dp-status-archived-edge: var(--dp-slate-edge);

  --dp-status-approved: var(--dp-green);
  --dp-status-approved-wash: var(--dp-green-wash);
  --dp-status-approved-edge: var(--dp-green-edge);

  --dp-status-rejected: var(--dp-red);
  --dp-status-rejected-wash: var(--dp-red-wash);
  --dp-status-rejected-edge: var(--dp-red-edge);

  --dp-status-expired: var(--dp-slate);
  --dp-status-expired-wash: var(--dp-slate-wash);
  --dp-status-expired-edge: var(--dp-slate-edge);
}

/**
 * Type, space, radius, depth and motion.
 *
 * One family (ADR 087 §1, the owner's approval of 2026-10-28): Manrope, the face of ViktoPay,
 * from 400 to 800. The three names below are older than it and were kept so no component had
 * to change: a title, a text and a figure all read Manrope now. There is no monospaced face:
 * its slashed zero was one of the things that made money look like code. A figure is Manrope
 * with tabular digits (`font-variant-numeric: tabular-nums`).
 *
 * It is a variable font from a pinned `@fontsource-variable` package, imported once in
 * `app/layout.tsx` and served from this origin.
 */
:root {
  --dp-font-display: 'Manrope Variable', system-ui, sans-serif;
  --dp-font-ui: 'Manrope Variable', system-ui, sans-serif;
  /* No monospaced face (ADR 087): an identifier is Manrope too, with tabular digits. */
  --dp-font-mono: 'Manrope Variable', system-ui, sans-serif;

  /* The weights and sizes of ADR 087 §1. */
  --dp-weight-regular: 400;
  --dp-weight-medium: 500;
  --dp-weight-label: 600;
  --dp-weight-bold: 700;
  --dp-weight-heavy: 800;
  /* A screen's title: 800, 38px, −0.035em. A section's: 800, 16–17px, −0.02em. */
  --dp-title-screen: 2.375rem;
  --dp-title-section: 1.0625rem;
  --dp-tracking-title: -0.035em;
  --dp-tracking-section: -0.02em;
  --dp-tracking-hero: -0.045em;
  /* A label: sentence case, 600, 12.5–13px, in `--dp-text-label`. */
  --dp-text-label-size: 0.8125rem;

  --dp-text-2xs: 0.6875rem;
  --dp-text-xs: 0.75rem;
  --dp-text-sm: 0.8125rem;
  --dp-text-md: 0.9375rem;
  --dp-text-lg: 1.0625rem;
  --dp-text-xl: 1.375rem;
  --dp-text-2xl: 1.75rem;
  --dp-text-3xl: 2.25rem;
  --dp-text-display: 2.75rem;

  --dp-leading-tight: 1.15;
  --dp-leading-snug: 1.35;
  --dp-leading-normal: 1.55;

  --dp-tracking-wide: 0.08em;
  --dp-tracking-wider: 0.14em;

  /* ---- Space: a 4px grid ---------------------------------------------------------------- */
  --dp-space-1: 0.25rem;
  --dp-space-2: 0.5rem;
  --dp-space-3: 0.75rem;
  --dp-space-4: 1rem;
  --dp-space-5: 1.25rem;
  --dp-space-6: 1.5rem;
  --dp-space-8: 2rem;
  --dp-space-10: 2.5rem;
  --dp-space-12: 3rem;
  --dp-space-16: 4rem;

  --dp-radius-xs: 4px;
  --dp-radius-sm: 8px;
  --dp-radius-md: 12px;
  --dp-radius-lg: 16px;
  --dp-radius-xl: 22px;
  --dp-radius-pill: 999px;

  /* ---- Depth: a shadow lifts, and has no colour ------------------------------------------
     Black for what floats, a hairline of white for a top edge. A shadow that carries a hue is
     a glow, and nothing here glows. */
  --dp-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --dp-shadow-md: 0 8px 24px -8px rgb(0 0 0 / 60%);
  /* The depth of ADR 087 §3.1: what a card or a pane stands on. */
  --dp-shadow-lg: 0 24px 60px rgb(0 0 0 / 45%);
  --dp-shadow-inset: inset 0 1px 0 rgb(255 255 255 / 6%);

  /* For the bars content scrolls under — the top bar, the phone's bottom bar. */
  --dp-blur: 14px;
  --dp-blur-strong: 24px;
  /* Glass (ADR 045): a panel blurs and saturates the moving light behind it, so the light
     reads through it as colour and never as shape. `--dp-glass` is the whole filter — since
     ADR 051, Revisão 6, the liquid glass's own (below), so a pane drawn by hand and a pane of the
     `Glass` component blur what is behind them the same way. */
  --dp-glass: var(--dp-glass-liquid);
  /* A sheet of glass: its top edge catching the light, then its hairline. */
  --dp-shadow-glass: inset 0 1px 0 rgb(255 255 255 / 6%), 0 30px 80px rgb(0 0 0 / 50%);

  /* ---- Liquid glass (`ds/components/Glass.tsx`, ADR 051) ---------------------------------
     The material of every piece that floats over the office once the office is the app. The
     veils are chosen by contrast, not by eye: over a uniform mid-grey backdrop (sRGB 128),
     with the pointer's highlight and the grain at their peak, `--dp-text-muted` still reads
     4.93:1 on the plain veil and 6.18:1 on the deep one, which holds 4.86:1 even over pure
     white. The numbers, and the script's method, are in `docs/design/design-system-v3`. */
  --dp-glass-veil: rgb(6 8 12 / 72%);
  /* For a panel with long text, and for an approval: readable over anything the office shows. */
  --dp-glass-veil-deep: rgb(6 8 12 / 86%);
  /* Where nothing behind is blurred — no `backdrop-filter`, or less transparency asked for —
     the office would show through sharp, so the veil is all but solid. */
  --dp-glass-veil-solid: rgb(10 12 16 / 95%);
  /* What the glass does to what is behind it: blurred to colour, its colour lifted. */
  --dp-glass-liquid: blur(26px) saturate(140%);
  /* The same glass for a device that cannot afford it: a smaller blur, a lighter lift. */
  --dp-glass-liquid-cheap: blur(10px) saturate(140%);
  /* Under a refracting pane (Chromium only), the blur before the bend: an 18px blur leaves
     nothing a bend could be seen in, so the shapes are kept a little longer, then bent. */
  --dp-glass-liquid-refract: blur(10px) saturate(165%);
  /* The rim: a 1px edge catching a light from the top left, faint along the sides, and a
     glint of the brand's ice at the foot. */
  --dp-glass-rim: rgb(255 255 255 / 34%);
  --dp-glass-rim-soft: rgb(255 255 255 / 12%);
  --dp-glass-rim-faint: rgb(255 255 255 / 5%);
  --dp-glass-rim-foot: rgb(255 255 255 / 5%);
  /* The light a pointer carries over an interactive pane, at its centre. */
  --dp-glass-highlight: rgb(255 255 255 / 5%);
  /* Clear glass (ADR 051, Revisão 6; the owner, 2026-10-20: "vidro mais transparente"): the
     frame's glass where it holds icons and a field — the folded rail, the request composer, the
     office's pills. A thinner veil and a wider blur, so the office reads through it as light.
     Its words keep 4.5:1 because each of these stands over the dark scrims laid along the
     office's edges (`features/cinema`), measured over the noon sun in
     docs/status/interface-vidro. Glass that holds lines of words keeps the glass's own veil (the
     strip's islands) or the deep one (the HUD, the open rail, a pane, a dialog). */
  --dp-glass-veil-clear: rgb(6 8 12 / 60%);
  --dp-glass-liquid-clear: blur(28px) saturate(140%);
  /* The hairline of a pane drawn by hand, where the glass's own rim cannot be (a pill inside
     another pane, a control the office draws): the same light as the rim's sides. */
  --dp-glass-edge: rgb(255 255 255 / 11%);

  /* ---- Motion ---------------------------------------------------------------------------
     Motion instead of light (ADR 087 §3.6). What arrives comes up 16px and fades in, on
     `--dp-ease-enter`, in `--dp-duration-enter`, one card `--dp-stagger` after another; a hero
     number counts up in `--dp-duration-count`; the backdrop of a full screen pans in
     `--dp-duration-pan`. What leaves eases in, in 70% of the time. With
     `prefers-reduced-motion`, everything stops (below, and `ds.css`). */
  --dp-ease-enter: cubic-bezier(0.16, 0.84, 0.24, 1);
  --dp-duration-enter: 900ms;
  --dp-stagger: 90ms;
  --dp-duration-count: 1700ms;
  --dp-duration-draw: 1800ms;
  --dp-duration-pan: 80s;
  --dp-duration-kenburns: 50s;
  --dp-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dp-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --dp-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dp-duration-fast: 160ms;
  --dp-duration: 240ms;
  --dp-duration-slow: 420ms;
  --dp-duration-scene: 900ms;

  /* ---- Frame ---------------------------------------------------------------------------- */
  --dp-topbar-height: 60px;
  /* The phone's bottom bar, without the home indicator's inset: what anything fixed above it
     has to clear. One row of 52px targets, its padding and its top border. */
  --dp-bottombar-height: 61px;
  /* The request form held at the bottom of the Work Center, as tall as it is right now. Zero
     everywhere else: the form writes its own height here while it is on screen (`CommandDock`)
     and takes it away when it leaves. */
  --dp-dock-height: 0px;
  /* The bottom bar and the request form above it, together: what something on the Work Center
     has to clear when it sticks to the bottom of a phone's screen. Elsewhere it is the bar. */
  --dp-bottom-stack-height: calc(var(--dp-bottombar-height) + var(--dp-dock-height));
  /* The panel of glass at the left, with the 14px it floats at. */
  --dp-sidebar-width: 262px;
  /* The page takes the screen beside the panel; only a very wide screen gets margins. */
  --dp-content-max: 1760px;

  --dp-z-base: 0;
  --dp-z-sticky: 10;
  --dp-z-drawer: 40;
  --dp-z-modal: 50;
  --dp-z-tooltip: 60;
  --dp-z-toast: 70;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dp-duration-fast: 1ms;
    --dp-duration: 1ms;
    --dp-duration-slow: 1ms;
    --dp-duration-scene: 1ms;
    --dp-duration-enter: 1ms;
    --dp-duration-count: 1ms;
    --dp-duration-draw: 1ms;
    --dp-stagger: 0ms;
  }
}

/**
 * The app's own cursors (ADR 054).
 *
 * The owner's review of staging, 2026-10-20: in the office the pointer was the system's little
 * hand, closing when a drag began — "eu queria que fosse um cursor personalizado… visível,
 * sofisticado, para o próprio aplicativo". So the app draws its own, in the brand: a dart in
 * white and ice for pointing, the same dart in cobalt for what can be pressed (no hand anywhere),
 * a slim beam for text, the grey dart with a red badge for what is switched off, and, over the
 * office, a sight that closes in when the office is being moved.
 *
 * The pictures are PNGs at 1x and 2x (`scripts/cursor/build.mjs` draws them; why not SVG is said
 * there), offered through `image-set()` so a dense screen gets the sharp one. The number pair
 * after each is its hotspot — the pixel that clicks — and the keyword after the comma is what a
 * browser that cannot load the picture shows instead: the system's own cursor for the same thing.
 *
 * A screen's stylesheet never names a system cursor (`cursor: pointer`): it names one of these
 * tokens, and a test (`test/cursors.test.ts`) says so. The rules at the foot give every
 * element its cursor by what it is, at no specificity, so a module's own rule still wins.
 */

:root {
  --dp-cursor-arrow:
    image-set(url('/cursor/seta.png') 1x, url('/cursor/seta@2x.png') 2x) 3 2, default;
  --dp-cursor-action:
    image-set(url('/cursor/acao.png') 1x, url('/cursor/acao@2x.png') 2x) 3 2, pointer;
  --dp-cursor-text:
    image-set(url('/cursor/texto.png') 1x, url('/cursor/texto@2x.png') 2x) 16 16, text;
  --dp-cursor-blocked:
    image-set(url('/cursor/bloqueado.png') 1x, url('/cursor/bloqueado@2x.png') 2x) 3 2, not-allowed;
  --dp-cursor-move:
    image-set(url('/cursor/mover.png') 1x, url('/cursor/mover@2x.png') 2x) 16 16, grab;
  --dp-cursor-moving:
    image-set(url('/cursor/movendo.png') 1x, url('/cursor/movendo@2x.png') 2x) 16 16, grabbing;
}

/* Everything points with the dart unless it is something else. Said twice: a browser that does
   not take `image-set()` in a cursor keeps the first, plain picture. */
html {
  cursor:
    url('/cursor/seta.png') 3 2,
    default;
  cursor: var(--dp-cursor-arrow);
}

:where(
  a[href],
  button,
  summary,
  label[for],
  select,
  input:is(
    [type='checkbox'],
    [type='radio'],
    [type='range'],
    [type='file'],
    [type='color'],
    [type='submit'],
    [type='button'],
    [type='reset']
  )
) {
  cursor: var(--dp-cursor-action);
}

:where(
  textarea,
  [contenteditable='true'],
  input:not(
    [type='checkbox'],
    [type='radio'],
    [type='range'],
    [type='file'],
    [type='color'],
    [type='submit'],
    [type='button'],
    [type='reset'],
    [type='hidden']
  )
) {
  cursor: var(--dp-cursor-text);
}

:where(:disabled, [aria-disabled='true']) {
  cursor: var(--dp-cursor-blocked);
}

/**
 * Instagram's own dark mode, for the one place the product draws another app: the phone of the
 * DM flow preview (ADR 099, `features/dm-flows/instagram-preview.module.css`). A flow happens
 * inside Instagram, and the preview reads as Instagram only if it looks like it. Nothing else in
 * the product uses these names.
 */
:root {
  --dp-ig-bg: #000;
  --dp-ig-sheet: #121212;
  --dp-ig-text: #f5f5f5;
  --dp-ig-muted: #a8a8a8;
  --dp-ig-line: #262626;
  --dp-ig-bubble: #262626;
  --dp-ig-button-line: #3a3a3a;
  --dp-ig-avatar: #363636;
  --dp-ig-frame: #1c1c1e;
  --dp-ig-frame-edge: #3a3a3c;
  --dp-ig-placeholder: #1f1f1f;
  --dp-ig-placeholder-deep: #0b0b0b;
  --dp-ig-commenter: #3a3a3a;
  --dp-ig-commenter-light: #555;
  --dp-ig-mention: #e0f1ff;
  --dp-ig-branch-edge: #6b5a2a;
  --dp-ig-branch-text: #e3b341;
  /* The ring round a profile picture. */
  --dp-ig-ring-1: #feda75;
  --dp-ig-ring-2: #fa7e1e;
  --dp-ig-ring-3: #d62976;
  --dp-ig-ring-4: #962fbf;
  --dp-ig-ring-5: #4f5bd5;
  /* The bubble of what the person sends. */
  --dp-ig-mine-1: #a033ff;
  --dp-ig-mine-2: #5b51d8;
  --dp-ig-mine-3: #3797f0;
  --dp-font-instagram:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

:root {
  --lp-04060b: #04060b;
  --lp-04060b-a0: rgb(4 6 11 / 0%);
  --lp-04060b-a28: rgb(4 6 11 / 28%);
  --lp-04060b-a45: rgb(4 6 11 / 45%);
  --lp-04060b-a72: rgb(4 6 11 / 72%);
  --lp-047857: #047857;
  --lp-05070c: #05070c;
  --lp-05070c-a78: rgb(5 7 12 / 78%);
  --lp-05070d: #05070d;
  --lp-060912: #060912;
  --lp-060912-a0: rgb(6 9 18 / 0%);
  --lp-060912-a35: rgb(6 9 18 / 35%);
  --lp-060912-a62: rgb(6 9 18 / 62%);
  --lp-060912-a88: rgb(6 9 18 / 88%);
  --lp-060912-a90: rgb(6 9 18 / 90%);
  --lp-070a12: #070a12;
  --lp-070a12-a94: rgb(7 10 18 / 94%);
  --lp-070a14: #070a14;
  --lp-080b13-a82: rgb(8 11 19 / 82%);
  --lp-080b13-a86: rgb(8 11 19 / 86%);
  --lp-080c16-a90: rgb(8 12 22 / 90%);
  --lp-0866ff: #0866ff;
  --lp-0a0b10: #0a0b10;
  --lp-0a0c13: #0a0c13;
  --lp-0a0d16-a66: rgb(10 13 22 / 66%);
  --lp-0a0e18: #0a0e18;
  --lp-0a0e18-a82: rgb(10 14 24 / 82%);
  --lp-0a0e1a: #0a0e1a;
  --lp-0b0e18: #0b0e18;
  --lp-0b0f19: #0b0f19;
  --lp-0b6e57: #0b6e57;
  --lp-0b7a5f: #0b7a5f;
  --lp-0c101b-a72: rgb(12 16 27 / 72%);
  --lp-0c1428-a90: rgb(12 20 40 / 90%);
  --lp-0e1018: #0e1018;
  --lp-0e1630: #0e1630;
  --lp-0ea5e9-a10: rgb(14 165 233 / 10%);
  --lp-101933: #101933;
  --lp-10a37f: #10a37f;
  --lp-10b981: #10b981;
  --lp-12151f: #12151f;
  --lp-141a2a: #141a2a;
  --lp-16203a: #16203a;
  --lp-1a1d27: #1a1d27;
  --lp-1e40af-a26: rgb(30 64 175 / 26%);
  --lp-202a44: #202a44;
  --lp-2550f0-a30: rgb(37 80 240 / 30%);
  --lp-2550f0-a35: rgb(37 80 240 / 35%);
  --lp-262626: #262626;
  --lp-2b1408: #2b1408;
  --lp-2c3242: #2c3242;
  --lp-2f5bff: #2f5bff;
  --lp-2f5bff-a20: rgb(47 91 255 / 20%);
  --lp-2f5bff-a30: rgb(47 91 255 / 30%);
  --lp-3455af: #3455af;
  --lp-34d399: #34d399;
  --lp-363636: #363636;
  --lp-3797f0: #3797f0;
  --lp-3878ff-a20: rgb(56 120 255 / 20%);
  --lp-388cff-a24: rgb(56 140 255 / 24%);
  --lp-38aaff-a12: rgb(56 170 255 / 12%);
  --lp-38bdf8: #38bdf8;
  --lp-38bdf8-a16: rgb(56 189 248 / 16%);
  --lp-3a3f4e: #3a3f4e;
  --lp-3a6aed: #3a6aed;
  --lp-3b1f0e: #3b1f0e;
  --lp-3b5bdb: #3b5bdb;
  --lp-3d68f5: #3d68f5;
  --lp-3d68f5-a18: rgb(61 104 245 / 18%);
  --lp-3d68f5-a45: rgb(61 104 245 / 45%);
  --lp-3d68f5-a60: rgb(61 104 245 / 60%);
  --lp-3d6bff: #3d6bff;
  --lp-45d49a-a10: rgb(69 212 154 / 10%);
  --lp-45d49a-a14: rgb(69 212 154 / 14%);
  --lp-45d49a-a16: rgb(69 212 154 / 16%);
  --lp-45d49a-a20: rgb(69 212 154 / 20%);
  --lp-45d49a-a22: rgb(69 212 154 / 22%);
  --lp-45d49a-a7: rgb(69 212 154 / 7%);
  --lp-45d49a-a8: rgb(69 212 154 / 8%);
  --lp-4a5266: #4a5266;
  --lp-4ade80: #4ade80;
  --lp-4c7bff-a10: rgb(76 123 255 / 10%);
  --lp-4c7bff-a12: rgb(76 123 255 / 12%);
  --lp-4c7bff-a14: rgb(76 123 255 / 14%);
  --lp-4c7bff-a16: rgb(76 123 255 / 16%);
  --lp-4c7bff-a18: rgb(76 123 255 / 18%);
  --lp-4c7bff-a20: rgb(76 123 255 / 20%);
  --lp-4c7bff-a30: rgb(76 123 255 / 30%);
  --lp-4c7bff-a35: rgb(76 123 255 / 35%);
  --lp-4c7bff-a6: rgb(76 123 255 / 6%);
  --lp-4c9bff: #4c9bff;
  --lp-555555: #555555;
  --lp-5b2a12: #5b2a12;
  --lp-5b51f5: #5b51f5;
  --lp-5b85ff: #5b85ff;
  --lp-5b8cff: #5b8cff;
  --lp-5b8cff-a0: rgb(91 140 255 / 0%);
  --lp-5b8cff-a12: rgb(91 140 255 / 12%);
  --lp-5b8cff-a25: rgb(91 140 255 / 25%);
  --lp-5b8cff-a35: rgb(91 140 255 / 35%);
  --lp-5b8cff-a45: rgb(91 140 255 / 45%);
  --lp-5b8cff-a60: rgb(91 140 255 / 60%);
  --lp-5b8cff-a65: rgb(91 140 255 / 65%);
  --lp-5b8cff-a70: rgb(91 140 255 / 70%);
  --lp-5b8cff-a80: rgb(91 140 255 / 80%);
  --lp-6366f1-a16: rgb(99 102 241 / 16%);
  --lp-6b7488: #6b7488;
  --lp-6b93ff: #6b93ff;
  --lp-6f7a90: #6f7a90;
  --lp-7295f4: #7295f4;
  --lp-7c9ef8: #7c9ef8;
  --lp-7f889a: #7f889a;
  --lp-8ba9fa: #8ba9fa;
  --lp-8c96aa: #8c96aa;
  --lp-8caaff-a16: rgb(140 170 255 / 16%);
  --lp-8fb0ff: #8fb0ff;
  --lp-8fb0ff-a10: rgb(143 176 255 / 10%);
  --lp-8fb0ff-a12: rgb(143 176 255 / 12%);
  --lp-8fb0ff-a14: rgb(143 176 255 / 14%);
  --lp-8fb0ff-a18: rgb(143 176 255 / 18%);
  --lp-8fb0ff-a22: rgb(143 176 255 / 22%);
  --lp-8fb0ff-a30: rgb(143 176 255 / 30%);
  --lp-8fb0ff-a32: rgb(143 176 255 / 32%);
  --lp-8fb0ff-a50: rgb(143 176 255 / 50%);
  --lp-8fb0ff-a6: rgb(143 176 255 / 6%);
  --lp-94a0b6: #94a0b6;
  --lp-9aa4b8: #9aa4b8;
  --lp-9db8ff: #9db8ff;
  --lp-a3adc0: #a3adc0;
  --lp-a4bcff: #a4bcff;
  --lp-a8492f: #a8492f;
  --lp-b4553a: #b4553a;
  --lp-b4bdce: #b4bdce;
  --lp-c3cad8: #c3cad8;
  --lp-c7cedc: #c7cedc;
  --lp-c89b5a: #c89b5a;
  --lp-c9ced8: #c9ced8;
  --lp-c9d6ff: #c9d6ff;
  --lp-d97757: #d97757;
  --lp-db2777: #db2777;
  --lp-dce6ff: #dce6ff;
  --lp-dd2a7b: #dd2a7b;
  --lp-dde2ec: #dde2ec;
  --lp-e2eaff: #e2eaff;
  --lp-e58fb0: #e58fb0;
  --lp-e6eaf2: #e6eaf2;
  --lp-ede9fe: #ede9fe;
  --lp-edf0f6: #edf0f6;
  --lp-eef3ff: #eef3ff;
  --lp-f0f3fc: #f0f3fc;
  --lp-f2f5ff: #f2f5ff;
  --lp-f4f6fb: #f4f6fb;
  --lp-f58529: #f58529;
  --lp-f6d7b0: #f6d7b0;
  --lp-fb923c: #fb923c;
  --lp-ff3040: #ff3040;
  --lp-ffe3c4: #ffe3c4;
  --lp-fff4e2: #fff4e2;
  --lp-45d49a-a40: rgb(69 212 154 / 40%);
  --lp-45d49a-a5: rgb(69 212 154 / 5%);
  --lp-b9c6f2: #b9c6f2;
  --lp-e4eaff: #e4eaff;
  --lp-afc0f5: #afc0f5;
  --lp-000: #000;
  --lp-fff: #fff;
}








/**
 * The base layer.
 *
 * Deskprise is dark only. There is no light theme and no theme switch: the whole palette — the
 * ground, the surfaces a step above it, the accents that each mean one thing — is built on a
 * dark base. A light mode would be a second palette to keep true, not a setting, so
 * `color-scheme` states it rather than leaving the browser to guess. (The brand has an ink for
 * light paper, `#0C1820`, and it is used where the mark is printed on one: the light files in
 * `/public/brand`. No screen of the product is light.)
 *
 * The page is a near-black with the office behind it. Nothing glows (ADR 087 §3.1): depth is a
 * black shadow and a hairline, and the brand test keeps it so.
 */

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

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--dp-bg-base);
  color: var(--dp-text);
  font-family: var(--dp-font-ui);
  font-size: var(--dp-text-md);
  line-height: var(--dp-leading-normal);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

/* Type (ADR 087 §1): one family, Manrope. A screen's title is 800 at 38px, tight; a section's is
   800 at 16–17px; a label is 600 in sentence case, never in capitals. Every figure is tabular,
   so a column of money lines up and a number counting up does not shake. */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--dp-font-ui);
  font-weight: var(--dp-weight-heavy);
  line-height: var(--dp-leading-tight);
  letter-spacing: var(--dp-tracking-section);
}

h1 {
  letter-spacing: var(--dp-tracking-title);
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

code,
kbd,
samp {
  font-family: var(--dp-font-mono);
  font-size: 0.9em;
}

:focus-visible {
  outline: 2px solid var(--dp-cyan);
  outline-offset: 2px;
  border-radius: var(--dp-radius-xs);
}

::selection {
  background: var(--dp-cyan-edge);
  color: var(--dp-text);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--dp-border-strong);
  border: 3px solid transparent;
  border-radius: var(--dp-radius-pill);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--dp-slate);
  background-clip: content-box;
}

/* Visually hidden, still read aloud. */
.dp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The angle a conic light turns through: declared so it can be animated (the working ring). */
@property --dp-spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/*
 * The keyframes below are global, and a CSS module cannot name them: the build scopes every
 * animation name a module writes ("dp-rise" becomes "a1b2_dp-rise", which no @keyframes
 * defines), and it has no syntax to say "the global one". So it was found on 2026-10-24 that the
 * modules' pulses, spinners and arrivals had never run in a build. A module names one through its
 * variable here instead — `animation: var(--dp-anim-rise) …` — whose value the build leaves as
 * it is. `test/animation-names.test.ts` keeps it so.
 */
:root {
  --dp-anim-orbit: dp-orbit;
  --dp-anim-pulse: dp-pulse;
  --dp-anim-spin: dp-spin;
  --dp-anim-rise: dp-rise;
  --dp-anim-enter: dp-enter;
  --dp-anim-fill: dp-fill;
  --dp-anim-draw: dp-draw;
  --dp-anim-draw-line: dp-draw-line;
  --dp-anim-wait: dp-wait;
  --dp-anim-grow: dp-grow;
  --dp-anim-pan: dp-pan;
  --dp-anim-kenburns: dp-kenburns;
  --dp-anim-grain: dp-grain;
  --dp-anim-live: dp-live;
  --dp-anim-sun: dp-sun;
  --dp-anim-drift: dp-drift;
  --dp-anim-fall: dp-fall;
  --dp-anim-flash: dp-flash;
  --dp-anim-voice-scan: dp-voice-scan;
  --dp-anim-voice-shine: dp-voice-shine;
  --dp-anim-voice-rec: dp-voice-rec;
}

@keyframes dp-orbit {
  to {
    --dp-spin: 360deg;
  }
}

@keyframes dp-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.45;
    transform: scale(0.82);
  }
}

@keyframes dp-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dp-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* A card arriving (ADR 087 §3.6): 16px from below, fading in, on `--dp-ease-enter`. */
@keyframes dp-enter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* A bar filling from its start to the value it holds. */
@keyframes dp-fill {
  from {
    transform: scaleX(0);
  }
}

/* An arc drawing itself round to the length it holds: the end keyframe is the arc's own. */
@keyframes dp-draw {
  from {
    stroke-dasharray: 0 1000;
  }
}

/* A line of a chart drawing itself, start to end: the path is given `pathLength="1"` and a dash
   of 1, so one keyframe draws a line of any length. */
@keyframes dp-draw-line {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* A placeholder for something on its way: it fades, it does not shine. */
@keyframes dp-wait {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

/* A bar growing from its base (a chart's column): scaled from nothing, upward. */
@keyframes dp-grow {
  from {
    transform: scaleY(0);
  }
}

/* The office behind a full screen, out of focus, panning slowly (ADR 087 §3.6). */
@keyframes dp-pan {
  from {
    transform: scale(1.22) translate3d(-2.5%, -1.5%, 0);
  }

  to {
    transform: scale(1.32) translate3d(2.5%, 1.5%, 0);
  }
}

/* The office behind the conversations, in focus, a slow zoom. */
@keyframes dp-kenburns {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.05);
  }
}

/* Film grain, stepping about. */
@keyframes dp-grain {
  0%,
  100% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(-22px, 12px);
  }

  40% {
    transform: translate(14px, -18px);
  }

  60% {
    transform: translate(-10px, -6px);
  }

  80% {
    transform: translate(18px, 8px);
  }
}

/* The live dot: a ring that leaves it and fades. Drawn by a pseudo-element's scale, not by a
   shadow, so it costs a composite and nothing else. */
@keyframes dp-live {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }

  80%,
  100% {
    opacity: 0;
    transform: scale(3);
  }
}

/* The weather's icon: the sun turning behind its cloud, the cloud drifting, rain falling, a
   flash of lightning. */
@keyframes dp-sun {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dp-drift {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(1.5px);
  }
}

@keyframes dp-fall {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }

  40% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateY(4px);
  }
}

@keyframes dp-flash {
  0%,
  86%,
  100% {
    opacity: 0;
  }

  88%,
  92% {
    opacity: 1;
  }
}

/* Asking by voice (features/voice): the ripple through the stopped wave, the shine through
   "Transcrevendo", and the red dot breathing beside the clock. */
@keyframes dp-voice-scan {
  0%,
  100% {
    opacity: 0.35;
    transform: scaleY(1);
  }

  50% {
    opacity: 1;
    transform: scaleY(4);
  }
}

@keyframes dp-voice-shine {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -120% 0;
  }
}

@keyframes dp-voice-rec {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

/**
 * For somebody who asked for less motion, the state stays and the movement goes.
 *
 * The duration tokens already collapse to a millisecond under this preference, which covers
 * every transition written with them. This covers the rest — the pulses and spinners whose
 * timing is written out, and anything added later by someone who did not know the tokens
 * were the mechanism. Nothing on this page carries meaning in its movement alone: a status has
 * its colour and its word, and a loading state says that it is loading.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* The mark takes the size its `width` and `height` say, and gives way in a narrow place by
   scaling down whole — never by being cut, and never by being squeezed out of its ratio. */
.mark {
  display: block;
  max-width: 100%;
  height: auto;
}

/*
 * The moving ground behind the landing and the screens that let somebody in: three blobs of
 * cobalt light, a ribbon and a floor of lines. The landing turns its mood with the section in
 * view (`m-deep`, `m-cyan`, `m-night`); elsewhere it stays as it opens.
 */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(
    120% 80% at 50% -10%,
    var(--lp-0e1630) 0%,
    var(--lp-070a14) 55%,
    var(--lp-05070d) 100%
  );
}
.blob {
  position: absolute;
  border-radius: 50%;
  transition: background-color 2.4s ease;
  -webkit-mask-image: radial-gradient(
    closest-side,
    var(--lp-000) 0%,
    rgb(0 0 0 / 55%) 45%,
    transparent 100%
  );
  mask-image: radial-gradient(
    closest-side,
    var(--lp-000) 0%,
    rgb(0 0 0 / 55%) 45%,
    transparent 100%
  );
  will-change: transform;
}
.b1 {
  width: 1100px;
  height: 900px;
  left: -280px;
  top: -260px;
  background-color: var(--lp-2f5bff-a30);
  animation: dr1 38s ease-in-out infinite alternate;
}
.b2 {
  width: 1000px;
  height: 1000px;
  right: -320px;
  top: 10%;
  background-color: var(--lp-3878ff-a20);
  animation: dr2 46s ease-in-out infinite alternate;
}
.b3 {
  width: 1200px;
  height: 800px;
  left: 20%;
  bottom: -420px;
  background-color: var(--lp-38aaff-a12);
  animation: dr3 52s ease-in-out infinite alternate;
}
@keyframes dr1 {
  to {
    transform: translate3d(320px, 180px, 0) scale(1.15);
  }
}
@keyframes dr2 {
  to {
    transform: translate3d(-260px, 220px, 0) scale(0.9);
  }
}
@keyframes dr3 {
  to {
    transform: translate3d(-200px, -160px, 0) scale(1.2);
  }
}
.m-deep .b1 {
  background-color: var(--lp-2550f0-a30);
}
.m-deep .b2 {
  background-color: var(--lp-1e40af-a26);
}
.m-deep .b3 {
  background-color: var(--lp-4c7bff-a12);
}
.m-cyan .b1 {
  background-color: var(--lp-388cff-a24);
}
.m-cyan .b2 {
  background-color: var(--lp-38bdf8-a16);
}
.m-cyan .b3 {
  background-color: var(--lp-4c7bff-a16);
}

.m-night .b1 {
  background-color: var(--lp-2f5bff-a20);
}
.m-night .b2 {
  background-color: var(--lp-6366f1-a16);
}
.m-night .b3 {
  background-color: var(--lp-0ea5e9-a10);
}
.ribbon {
  position: absolute;
  left: 50%;
  top: -8%;
  width: 2200px;
  height: 1400px;
  margin-left: -1100px;
  opacity: 0.55;
  will-change: transform;
  animation: rb 60s ease-in-out infinite alternate;
}
@keyframes rb {
  from {
    transform: rotate(-4deg) translate3d(-60px, 0, 0);
  }
  to {
    transform: rotate(5deg) translate3d(80px, 40px, 0);
  }
}
.floor {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: -6%;
  height: 62%;
  perspective: 900px;
  -webkit-mask-image: linear-gradient(0deg, rgb(0 0 0 / 90%), transparent 85%);
  mask-image: linear-gradient(0deg, rgb(0 0 0 / 90%), transparent 85%);
  opacity: 0.5;
}
.floor > div {
  position: absolute;
  left: 0;
  right: 0;
  top: -40%;
  height: 180%;
  transform: rotateX(68deg);
  transform-origin: 50% 100%;
}
.floor > div > div {
  position: absolute;
  inset: -80px 0 0 0;
  background-image:
    linear-gradient(var(--lp-8caaff-a16) 1px, transparent 1px),
    linear-gradient(90deg, var(--lp-8caaff-a16) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: fl 6s linear infinite;
  will-change: transform;
}
@keyframes fl {
  to {
    transform: translate3d(0, 80px, 0);
  }
}

/* GENERATED by the v6 converter, then edited by hand. */
.landing {
  position: relative;
  width: 100%;
  color: var(--lp-f4f6fb);
  font-family: var(--dp-font-ui);
  overflow: clip;
}
.sh-td-helena {
  background-size: 100% 100%;
  animation: sx66 5.5s steps(66, jump-none) infinite;
}
.near .sh-td-helena {
  background-image: url(/landing/sprites/tour-dia-helena.webp);
}
.sy-td-helena {
  animation: sy3 16.5s steps(3, jump-none) infinite;
}
.sh-td-rafael {
  background-size: 100% 100%;
  animation: sx66 5.5s steps(66, jump-none) infinite;
}
.near .sh-td-rafael {
  background-image: url(/landing/sprites/tour-dia-rafael.webp);
}
.sy-td-rafael {
  animation: sy3 16.5s steps(3, jump-none) infinite;
}
.sh-td-bruno {
  background-size: 100% 100%;
  animation: sx66 5.5s steps(66, jump-none) infinite;
}
.near .sh-td-bruno {
  background-image: url(/landing/sprites/tour-dia-bruno.webp);
}
.sy-td-bruno {
  animation: sy3 16.5s steps(3, jump-none) infinite;
}
.sh-td-livia {
  background-size: 100% 100%;
  animation: sx66 5.5s steps(66, jump-none) infinite;
}
.near .sh-td-livia {
  background-image: url(/landing/sprites/tour-dia-livia.webp);
}
.sy-td-livia {
  animation: sy3 16.5s steps(3, jump-none) infinite;
}
.sh-td-caio {
  background-size: 100% 100%;
  animation: sx66 5.5s steps(66, jump-none) infinite;
}
.near .sh-td-caio {
  background-image: url(/landing/sprites/tour-dia-caio.webp);
}
.sy-td-caio {
  animation: sy3 16.5s steps(3, jump-none) infinite;
}
.sh-td-bia {
  background-size: 100% 100%;
  animation: sx60 5s steps(60, jump-none) infinite;
}
.near .sh-td-bia {
  background-image: url(/landing/sprites/tour-dia-bia.webp);
}
.sy-td-bia {
  animation: sy2 10s steps(2, jump-none) infinite;
}
.sh-tn-helena {
  background-size: 100% 100%;
  animation: sx99 8.25s steps(99, jump-none) infinite;
}
.near .sh-tn-helena {
  background-image: url(/landing/sprites/classico-noite-helena.webp);
}
.sy-tn-helena {
  animation: sy2 16.5s steps(2, jump-none) infinite;
}
.sh-tn-rafael {
  background-size: 100% 100%;
  animation: sx99 8.25s steps(99, jump-none) infinite;
}
.near .sh-tn-rafael {
  background-image: url(/landing/sprites/classico-noite-rafael.webp);
}
.sy-tn-rafael {
  animation: sy2 16.5s steps(2, jump-none) infinite;
}
.sh-tn-bruno {
  background-size: 100% 100%;
  animation: sx99 8.25s steps(99, jump-none) infinite;
}
.near .sh-tn-bruno {
  background-image: url(/landing/sprites/classico-noite-bruno.webp);
}
.sy-tn-bruno {
  animation: sy2 16.5s steps(2, jump-none) infinite;
}
.sh-tn-livia {
  background-size: 100% 100%;
  animation: sx99 8.25s steps(99, jump-none) infinite;
}
.near .sh-tn-livia {
  background-image: url(/landing/sprites/classico-noite-livia.webp);
}
.sy-tn-livia {
  animation: sy2 16.5s steps(2, jump-none) infinite;
}
.sh-tn-caio {
  background-size: 100% 100%;
  animation: sx99 8.25s steps(99, jump-none) infinite;
}
.near .sh-tn-caio {
  background-image: url(/landing/sprites/classico-noite-caio.webp);
}
.sy-tn-caio {
  animation: sy2 16.5s steps(2, jump-none) infinite;
}
.sh-tn-bia {
  background-size: 100% 100%;
  animation: sx119 9.917s steps(119, jump-none) infinite;
}
.near .sh-tn-bia {
  background-image: url(/landing/sprites/classico-noite-bia.webp);
}
.sh-cobertura-noite-helena {
  background-size: 100% 100%;
  animation: sx198 16.5s steps(198, jump-none) infinite;
}
.near .sh-cobertura-noite-helena {
  background-image: url(/landing/sprites/cobertura-noite-helena.webp);
}
.sh-cobertura-noite-rafael {
  background-size: 100% 100%;
  animation: sx198 16.5s steps(198, jump-none) infinite;
}
.near .sh-cobertura-noite-rafael {
  background-image: url(/landing/sprites/cobertura-noite-rafael.webp);
}
.sh-cobertura-noite-bruno {
  background-size: 100% 100%;
  animation: sx198 16.5s steps(198, jump-none) infinite;
}
.near .sh-cobertura-noite-bruno {
  background-image: url(/landing/sprites/cobertura-noite-bruno.webp);
}
.sh-cobertura-noite-livia {
  background-size: 100% 100%;
  animation: sx198 16.5s steps(198, jump-none) infinite;
}
.near .sh-cobertura-noite-livia {
  background-image: url(/landing/sprites/cobertura-noite-livia.webp);
}
.sh-cobertura-noite-caio {
  background-size: 100% 100%;
  animation: sx36 1.5s steps(36, jump-none) infinite;
}
.near .sh-cobertura-noite-caio {
  background-image: url(/landing/sprites/cobertura-noite-caio.webp);
}
.sh-cobertura-noite-bia {
  background-size: 100% 100%;
  animation: sx36 1.5s steps(36, jump-none) infinite;
}
.near .sh-cobertura-noite-bia {
  background-image: url(/landing/sprites/cobertura-noite-bia.webp);
}
.sh-sede-noite-helena {
  background-size: 100% 100%;
  animation: sx198 16.5s steps(198, jump-none) infinite;
}
.near .sh-sede-noite-helena {
  background-image: url(/landing/sprites/sede-noite-helena.webp);
}
.sh-sede-noite-rafael {
  background-size: 100% 100%;
  animation: sx198 16.5s steps(198, jump-none) infinite;
}
.near .sh-sede-noite-rafael {
  background-image: url(/landing/sprites/sede-noite-rafael.webp);
}
.sh-sede-noite-bruno {
  background-size: 100% 100%;
  animation: sx198 16.5s steps(198, jump-none) infinite;
}
.near .sh-sede-noite-bruno {
  background-image: url(/landing/sprites/sede-noite-bruno.webp);
}
.sh-sede-noite-livia {
  background-size: 100% 100%;
  animation: sx198 16.5s steps(198, jump-none) infinite;
}
.near .sh-sede-noite-livia {
  background-image: url(/landing/sprites/sede-noite-livia.webp);
}
.sh-sede-noite-caio {
  background-size: 100% 100%;
  animation: sx48 2s steps(48, jump-none) infinite;
}
.near .sh-sede-noite-caio {
  background-image: url(/landing/sprites/sede-noite-caio.webp);
}
.sh-sede-noite-bia {
  background-size: 100% 100%;
  animation: sx48 2s steps(48, jump-none) infinite;
}
.near .sh-sede-noite-bia {
  background-image: url(/landing/sprites/sede-noite-bia.webp);
}
.sh-cd-helena {
  background-size: 100% 100%;
  animation: sx60 5s steps(60, jump-none) infinite;
}
.near .sh-cd-helena {
  background-image: url(/landing/cards/card-helena.webp);
}
.sy-cd-helena {
  animation: sy2 10s steps(2, jump-none) infinite;
}
.sh-cd-rafael {
  background-size: 100% 100%;
  animation: sx60 5s steps(60, jump-none) infinite;
}
.near .sh-cd-rafael {
  background-image: url(/landing/cards/card-rafael.webp);
}
.sy-cd-rafael {
  animation: sy2 10s steps(2, jump-none) infinite;
}
.sh-cd-bruno {
  background-size: 100% 100%;
  animation: sx60 5s steps(60, jump-none) infinite;
}
.near .sh-cd-bruno {
  background-image: url(/landing/cards/card-bruno.webp);
}
.sy-cd-bruno {
  animation: sy2 10s steps(2, jump-none) infinite;
}
.sh-cd-livia {
  background-size: 100% 100%;
  animation: sx60 5s steps(60, jump-none) infinite;
}
.near .sh-cd-livia {
  background-image: url(/landing/cards/card-livia.webp);
}
.sy-cd-livia {
  animation: sy2 10s steps(2, jump-none) infinite;
}
.sh-cd-bia {
  background-size: 100% 100%;
  animation: sx60 5s steps(60, jump-none) infinite;
}
.near .sh-cd-bia {
  background-image: url(/landing/cards/card-bia.webp);
}
.sy-cd-bia {
  animation: sy2 10s steps(2, jump-none) infinite;
}
.sh-cd-caio {
  background-size: 100% 100%;
  animation: sx60 5s steps(60, jump-none) infinite;
}
.near .sh-cd-caio {
  background-image: url(/landing/cards/card-caio.webp);
}
.sy-cd-caio {
  animation: sy2 10s steps(2, jump-none) infinite;
}
@keyframes sx66 {
  to {
    transform: translate3d(-98.484848%, 0, 0);
  }
}
@keyframes sx99 {
  to {
    transform: translate3d(-98.989899%, 0, 0);
  }
}
@keyframes sx36 {
  to {
    transform: translate3d(-97.222222%, 0, 0);
  }
}
@keyframes sx198 {
  to {
    transform: translate3d(-99.494949%, 0, 0);
  }
}
@keyframes sx48 {
  to {
    transform: translate3d(-97.916667%, 0, 0);
  }
}
@keyframes sx119 {
  to {
    transform: translate3d(-99.159664%, 0, 0);
  }
}
@keyframes sx60 {
  to {
    transform: translate3d(-98.333333%, 0, 0);
  }
}
@keyframes sy2 {
  to {
    transform: translate3d(0, -50%, 0);
  }
}
@keyframes sy3 {
  to {
    transform: translate3d(0, -66.666667%, 0);
  }
}
.landing {
  background: var(--lp-060912);
}
.landing * {
  box-sizing: border-box;
}
.landing a {
  text-decoration: none;
  color: inherit;
}
.landing button {
  font-family: inherit;
  cursor: var(--dp-cursor-action);
}
.landing ::selection {
  background: var(--lp-5b8cff-a35);
}
/* ---------- type & buttons */
.h {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.02;
  color: var(--lp-f4f6fb);
}
.grad {
  background: linear-gradient(
    92deg,
    var(--lp-e2eaff) 0%,
    var(--lp-9db8ff) 38%,
    var(--lp-5b8cff) 72%,
    var(--lp-3d6bff) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.g {
  color: var(--lp-6f7a90);
}
.sub {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--lp-94a0b6);
}
.lbl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(255 255 255 / 9%);
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-c7cedc);
}
.lbl b {
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--lp-fff);
  background: linear-gradient(90deg, var(--lp-5b8cff), var(--lp-2f5bff));
}
.lbl i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp-5b8cff);
  margin-left: 8px;
}
.btn1 {
  position: relative;
  height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(180deg, var(--lp-6b93ff), var(--lp-3d68f5));
  color: var(--lp-fff);
  font-size: 15.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 35%),
    0 0 0 1px var(--lp-5b8cff-a60),
    0 14px 40px var(--lp-3d68f5-a45);
  transition:
    transform 0.35s cubic-bezier(0.16, 0.84, 0.24, 1),
    box-shadow 0.35s ease;
}
.btn1:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 35%),
    0 0 0 1px var(--lp-5b8cff-a80),
    0 18px 50px var(--lp-3d68f5-a60);
}
.btn2 {
  height: 54px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 14%);
  background: rgb(255 255 255 / 3%);
  color: var(--lp-e6eaf2);
  font-size: 15.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}
.btn2:hover {
  background: rgb(255 255 255 / 7%);
  border-color: rgb(255 255 255 / 24%);
}
.nav a.l {
  color: var(--lp-a3adc0);
  font-size: 13.5px;
  font-weight: 600;
  transition: color 0.2s ease;
}
.nav a.l:hover {
  color: var(--lp-f4f6fb);
}
.glass {
  background: var(--lp-0c101b-a72);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / 9%);
}
.card {
  background: linear-gradient(180deg, rgb(255 255 255 / 4.5%), rgb(255 255 255 / 1.5%));
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 24px;
}
/* reveal */
.mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.mask > span {
  display: block;
  transition: transform 1.2s cubic-bezier(0.16, 0.84, 0.24, 1);
}
.js .rv:not(.on) .mask > span {
  transform: translate3d(0, 110%, 0);
}
.fd {
  transition:
    opacity 1.1s cubic-bezier(0.16, 0.84, 0.24, 1),
    transform 1.2s cubic-bezier(0.16, 0.84, 0.24, 1);
}
.js .fd:not(.on) {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
}
.zm {
  transition:
    opacity 1.2s cubic-bezier(0.16, 0.84, 0.24, 1),
    transform 1.4s cubic-bezier(0.16, 0.84, 0.24, 1);
}
.js .zm:not(.on) {
  opacity: 0;
  transform: perspective(1400px) rotateX(16deg) translate3d(0, 80px, 0) scale(0.94);
}
/* ---------- sprites */
.spr {
  position: absolute;
  overflow: hidden;
  contain: strict;
}
.spr > div {
  width: 100%;
  will-change: transform;
}
.spr > div > div {
  height: 100%;
  will-change: transform;
}
.paused .spr *,
.paused .cardspr * {
  animation-play-state: paused !important;
}
/* A card's sheet is most of a megabyte; its first frame, a few kilobytes, stands in its place
   until the sheet has decoded (`ready`, set by the script), so the line-up is never empty. */
.near .cardspr {
  background: 0 0 / 100% 100% no-repeat;
}
.near .cardspr:has(.sh-cd-helena) {
  background-image: url(/landing/cards/card-helena-0.webp);
}
.near .cardspr:has(.sh-cd-rafael) {
  background-image: url(/landing/cards/card-rafael-0.webp);
}
.near .cardspr:has(.sh-cd-livia) {
  background-image: url(/landing/cards/card-livia-0.webp);
}
.near .cardspr:has(.sh-cd-bruno) {
  background-image: url(/landing/cards/card-bruno-0.webp);
}
.near .cardspr:has(.sh-cd-bia) {
  background-image: url(/landing/cards/card-bia-0.webp);
}
.near .cardspr:has(.sh-cd-caio) {
  background-image: url(/landing/cards/card-caio-0.webp);
}
.cardspr:not(.ready) > * {
  visibility: hidden;
}
.near .cardspr.ready {
  background-image: none;
}
/* ---------- tour */
.win {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 80px;
  bottom: 20px;
  border-radius: 24px;
  background: var(--lp-05070c);
  overflow: hidden;
  transform-origin: 50% 0;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 10%),
    0 40px 120px rgb(0 0 0 / 60%),
    0 0 140px var(--lp-3d68f5-a18);
}
.vp {
  position: absolute;
  left: 0;
  right: 0;
  top: 52px;
  bottom: 0;
  overflow: hidden;
  background: var(--lp-04060b);
}
.cam {
  position: absolute;
  left: 0;
  top: 0;
  width: 4096px;
  height: 2560px;
  transform-origin: 0 0;
}
.lay {
  position: absolute;
  inset: 0;
}
.pin {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.pin .t {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px 0 4px;
  border-radius: 999px;
  background: var(--lp-080b13-a82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgb(255 255 255 / 12%);
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--lp-f4f6fb);
}
.pin .t img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}
.pin .t span {
  font-weight: 600;
  color: var(--lp-9aa4b8);
}
.pin .ln {
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, rgb(255 255 255 / 40%), rgb(255 255 255 / 0%));
}
.ov {
  position: absolute;
  pointer-events: none;
}
.ov > * {
  pointer-events: auto;
}
.ka {
  animation: ka 0.9s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
.kb {
  animation: kb 0.9s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
@keyframes ka {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes kb {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ka .s1,
.kb .s1 {
  opacity: 0;
}
.ka .s1 {
  animation: ka 0.7s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
.kb .s1 {
  animation: kb 0.7s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
.ka .wp {
  animation: wpa 1s cubic-bezier(0.65, 0, 0.35, 1) both;
}
.kb .wp {
  animation: wpb 1s cubic-bezier(0.65, 0, 0.35, 1) both;
}
@keyframes wpa {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes wpb {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
.ka .gen,
.kb .gen {
  position: relative;
  overflow: hidden;
}
.ka .gen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--lp-141a2a) 30%,
    var(--lp-202a44) 50%,
    var(--lp-141a2a) 70%
  );
  background-size: 300% 100%;
  animation: gena 1.6s ease both;
}
.kb .gen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--lp-141a2a) 30%,
    var(--lp-202a44) 50%,
    var(--lp-141a2a) 70%
  );
  background-size: 300% 100%;
  animation: genb 1.6s ease both;
}
@keyframes gena {
  0% {
    opacity: 1;
    background-position: 100% 0;
  }
  80% {
    opacity: 1;
    background-position: 0 0;
  }
  100% {
    opacity: 0;
    background-position: 0 0;
  }
}
@keyframes genb {
  0% {
    opacity: 1;
    background-position: 100% 0;
  }
  80% {
    opacity: 1;
    background-position: 0 0;
  }
  100% {
    opacity: 0;
    background-position: 0 0;
  }
}
.ka .bar,
.kb .bar {
  transform-origin: left center;
}
.ka .bar {
  animation: bra 1.4s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
.kb .bar {
  animation: brb 1.4s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
@keyframes bra {
  from {
    transform: scaleX(0);
  }
}
@keyframes brb {
  from {
    transform: scaleX(0);
  }
}
.prog {
  animation: prg 9s linear infinite;
  transform-origin: left center;
}
@keyframes prg {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.typ {
  animation: wpa 1.6s cubic-bezier(0.65, 0, 0.35, 1) both;
}
.caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--lp-8fb0ff);
  vertical-align: -0.12em;
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.live {
  animation: live 1.8s ease-in-out infinite;
}
@keyframes live {
  50% {
    opacity: 0.3;
  }
}
.toast {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: 18px;
  min-width: 280px;
  transition: opacity 0.4s ease;
}
.toast .ic {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bob1 {
  animation: bob 6s ease-in-out infinite;
}
.bob2 {
  animation: bob 7s ease-in-out infinite;
  animation-delay: -2s;
}
.bob3 {
  animation: bob 6.5s ease-in-out infinite;
  animation-delay: -4s;
}
@keyframes bob {
  50% {
    transform: translate3d(0, -10px, 0);
  }
}
.rowin {
  animation: rowin 0.7s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
@keyframes rowin {
  from {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.rowin2 {
  animation: rowin2 0.7s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
@keyframes rowin2 {
  from {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
/* ---------- chat */
.ag {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  transition: background 0.25s ease;
}
.ag:hover {
  background: rgb(255 255 255 / 4%);
}
.ca .ln {
  animation: cla 0.7s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
.cb .ln {
  animation: clb 0.7s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
@keyframes cla {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes clb {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp-8fb0ff);
  margin-right: 4px;
  animation: dt 1.2s ease-in-out infinite;
}
.dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.dots span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes dt {
  0%,
  100% {
    opacity: 0.25;
    transform: none;
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.mcp .m1 {
  animation: mc 9s ease infinite both;
}
.mcp .m2 {
  animation: mc2 9s ease infinite both;
}
.mcp .m3 {
  animation: mc3 9s ease infinite both;
}
@keyframes mc {
  0%,
  3% {
    opacity: 0;
    transform: translateY(8px);
  }
  8%,
  92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
@keyframes mc2 {
  0%,
  18% {
    opacity: 0;
    transform: translateY(8px);
  }
  24%,
  92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
@keyframes mc3 {
  0%,
  36% {
    opacity: 0;
    transform: translateY(8px);
  }
  42%,
  92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
/* ---------- integrations */
.node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 220px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  transition:
    transform 0.4s cubic-bezier(0.16, 0.84, 0.24, 1),
    border-color 0.3s ease,
    background 0.3s ease;
  cursor: var(--dp-cursor-arrow);
}
.node:hover {
  transform: translate(-50%, -50%) scale(1.05);
}
.node .ic {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  margin: -90px 0 0 -90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.core::before {
  content: '';
  position: absolute;
  inset: -60px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--lp-5b8cff-a45), var(--lp-5b8cff-a0));
  animation: corep 4s ease-in-out infinite;
}
@keyframes corep {
  50% {
    transform: scale(1.12);
    opacity: 0.7;
  }
}
.ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid var(--lp-8fb0ff-a14);
  transform: translate(-50%, -50%);
}
.spin {
  animation: spin 40s linear infinite;
}
@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* ---------- templates marquee */
.mq {
  display: flex;
  gap: 22px;
  width: max-content;
  will-change: transform;
}
.mqa {
  animation: mqa 60s linear infinite;
}
.mqb {
  animation: mqb 66s linear infinite;
}
@keyframes mqa {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes mqb {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.mqwrap:hover .mq {
  animation-play-state: paused;
}
.tpl {
  width: 290px;
  height: 400px;
  border-radius: 18px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 8%),
    0 30px 60px rgb(0 0 0 / 45%);
  font-family: var(--dp-font-ui);
}
.tpl .tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--lp-05070c-a78);
  color: var(--lp-e6eaf2);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.qo {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid rgb(255 255 255 / 12%);
  background: rgb(255 255 255 / 4%);
  color: var(--lp-f4f6fb);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}
.qo:hover {
  background: var(--lp-8fb0ff-a12);
  border-color: var(--lp-8fb0ff-a50);
  transform: translateX(4px);
}
/* ---------- misc */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(255 255 255 / 8%);
}
.seg button {
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  font-size: 13.5px;
  font-weight: 700;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}
.namein {
  background: transparent;
  border: 0;
  color: var(--lp-f4f6fb);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  width: 160px;
  outline: none;
  font-family: inherit;
  padding: 2px 0;
  border-bottom: 1px dashed rgb(255 255 255 / 18%);
  transition: border-color 0.25s ease;
}
.namein:hover {
  border-bottom-color: rgb(255 255 255 / 40%);
}
.namein:focus {
  border-bottom: 1px solid var(--lp-5b8cff);
}
.faq {
  border-bottom: 1px solid rgb(255 255 255 / 7%);
}
.swap {
  animation: swap 0.6s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
@keyframes swap {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.swap2 {
  animation: swap2 0.6s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
@keyframes swap2 {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.igin {
  animation: igin 0.55s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
@keyframes igin {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.igsl {
  animation: igsl 0.6s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
@keyframes igsl {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fl1 {
  animation: fl1 1.2s ease;
}
@keyframes fl1 {
  0% {
    background: var(--lp-45d49a-a16);
  }
  100% {
    background: transparent;
  }
}
.fl2 {
  animation: fl2 1.2s ease;
}
@keyframes fl2 {
  0% {
    background: var(--lp-45d49a-a16);
  }
  100% {
    background: transparent;
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
.lg-c {
  display: inline-block;
  text-align: center;
}
.lg-i {
  position: relative;
}
.lg-dot {
  position: absolute;
  left: 50%;
  top: 0.08em;
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background: var(--dp-cyan);
  transform: translateX(-50%);
}
.lg-cur {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--dp-cyan);
  opacity: 0;
  pointer-events: none;
}

.nav {
  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.16, 0.84, 0.24, 1);
}
.nav.hid {
  opacity: 0;
  transform: translate(-50%, -90px) !important;
  pointer-events: none;
}
.hud {
  position: absolute;
  right: 22px;
  top: 18px;
  width: 300px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    opacity 0.6s ease,
    transform 0.7s cubic-bezier(0.16, 0.84, 0.24, 1);
}
.hud.off {
  opacity: 0;
  transform: translate3d(0, -12px, 0);
  pointer-events: none;
}
.hbar {
  flex: 1 1 0;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lp-8fb0ff), var(--lp-3d6bff));
  transform-origin: bottom center;
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.24, 1);
}
.salet {
  animation: salet 4.2s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
.salet2 {
  animation: salet2 4.2s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
@keyframes salet {
  0% {
    opacity: 0;
    transform: translate3d(0, -8px, 0) scale(0.96);
  }
  10% {
    opacity: 1;
    transform: none;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes salet2 {
  0% {
    opacity: 0;
    transform: translate3d(0, -8px, 0) scale(0.96);
  }
  10% {
    opacity: 1;
    transform: none;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.scrollimg {
  animation: scrimg 26s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  will-change: transform;
}
@keyframes scrimg {
  0%,
  6% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, var(--sy), 0);
  }
}
/* instagram */
.ig {
  font-family: var(--dp-font-instagram);
  color: var(--dp-ig-text);
  background: var(--lp-000);
}
.ig .u {
  font-weight: 600;
  font-size: 13px;
  color: var(--dp-ig-text);
}
.ig .m {
  font-size: 12px;
  color: var(--dp-ig-muted);
}
.igring {
  padding: 2px;
  border-radius: 50%;
  background: conic-gradient(
    from 200deg,
    var(--dp-ig-ring-1),
    var(--dp-ig-ring-2),
    var(--dp-ig-ring-3),
    var(--dp-ig-ring-4),
    var(--dp-ig-ring-5),
    var(--dp-ig-ring-1)
  );
}
.igring > span {
  display: block;
  border-radius: 50%;
  padding: 2px;
  background: var(--lp-000);
}
.igring img,
.igring i {
  display: block;
  border-radius: 50%;
}
.heart {
  animation: heart 1s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
@keyframes heart {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  25% {
    opacity: 1;
    transform: scale(1.15);
  }
  45% {
    transform: scale(0.95);
  }
  60% {
    transform: scale(1);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
.sheet {
  animation: sheet 0.55s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
@keyframes sheet {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: none;
  }
}
/* journey */
.jc {
  position: relative;
  width: 250px;
  padding: 16px;
  border-radius: 22px;
  background: var(--lp-0a0e18-a82);
  border: 1px solid rgb(255 255 255 / 8%);
  transition:
    border-color 0.5s ease,
    box-shadow 0.5s ease,
    transform 0.6s cubic-bezier(0.16, 0.84, 0.24, 1),
    opacity 0.5s ease;
}
.jc.on {
  border-color: var(--lp-5b8cff-a65);
  box-shadow:
    0 0 0 4px var(--lp-5b8cff-a12),
    0 30px 80px var(--lp-2550f0-a35);
  transform: translate3d(0, -6px, 0);
}
.jc.dim {
  opacity: 0.55;
}
.mover {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--lp-dce6ff);
  box-shadow:
    0 0 0 4px var(--lp-5b8cff-a25),
    0 0 24px 6px var(--lp-5b8cff-a70);
  offset-rotate: 0deg;
}
.pkt {
  position: absolute;
  left: 0;
  top: 0;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--lp-dce6ff);
  background: var(--lp-0c1428-a90);
  border: 1px solid var(--lp-5b8cff-a45);
  box-shadow:
    0 8px 24px rgb(0 0 0 / 40%),
    0 0 18px var(--lp-4c7bff-a35);
  offset-rotate: 0deg;
  transform: translate(-50%, -50%);
}
/* buildings */
.bl {
  position: absolute;
  inset: 0;
  transition:
    opacity 1.2s ease,
    transform 2.4s cubic-bezier(0.16, 0.84, 0.24, 1);
}
.btx {
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.16, 0.84, 0.24, 1);
}
/* phone */
.phone {
  position: relative;
  border-radius: 52px;
  background: var(--lp-000);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 16%),
    inset 0 0 0 8px var(--lp-0a0b10),
    0 60px 140px rgb(0 0 0 / 60%);
  overflow: hidden;
  flex-shrink: 0;
}
.phone .isl {
  position: absolute;
  left: 50%;
  top: 13px;
  width: 96px;
  height: 28px;
  border-radius: 16px;
  background: var(--lp-000);
  transform: translateX(-50%);
  z-index: 6;
}
.qzimg {
  position: absolute;
  inset: 8px;
  border-radius: 44px;
  overflow: hidden;
  background: var(--lp-f0f3fc);
}
.qzimg img {
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  width: 100%;
  height: calc(100% - 40px);
  object-fit: cover;
  object-position: top;
  transition:
    opacity 0.6s ease,
    transform 0.7s cubic-bezier(0.16, 0.84, 0.24, 1);
}
.tap {
  animation: tap 2.6s ease infinite;
}
@keyframes tap {
  0%,
  60% {
    opacity: 0;
    transform: scale(0.6);
  }
  70% {
    opacity: 0.9;
    transform: scale(1);
  }
  90% {
    opacity: 0;
    transform: scale(1.6);
  }
  100% {
    opacity: 0;
  }
}
.tab6 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}
.cmp td,
.cmp th {
  padding: 18px 20px;
  border-top: 1px solid rgb(255 255 255 / 6%);
  text-align: center;
  font-size: 15px;
}
.cmp th {
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-8c96aa);
  border-top: 0;
}
.cmp td:first-child,
.cmp th:first-child {
  text-align: left;
}
@media (prefers-reduced-motion: reduce) {
  .landing *:not(#still) {
    animation: none;
    transition: none;
  }
  .js .fd:not(.on),
  .js .zm:not(.on) {
    opacity: 1;
    transform: none;
  }
  .js .rv:not(.on) .mask > span {
    transform: none;
  }
}
@keyframes pkm {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  86% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
@keyframes spin2 {
  to {
    transform: rotate(360deg);
  }
}
@keyframes mvA {
  0% {
    offset-distance: 0%;
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 1;
  }
}
@keyframes mvB {
  0% {
    offset-distance: 0%;
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 1;
  }
}
.pkt {
  transform: none;
}
.nav1 {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  width: min(1320px, calc(100% - 48px));
  height: 60px;
  padding: 0 9px 0 24px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1%)), var(--lp-0a0d16-a66);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgb(255 255 255 / 8%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 6%),
    0 24px 60px rgb(0 0 0 / 38%);
}
.nav2 {
  display: flex;
  align-items: center;
  justify-self: start;
  opacity: 0.96;
  transition: opacity 0.2s ease;
}
.nav2:hover {
  opacity: 1;
}
.nav3 {
  position: relative;
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--lp-f4f6fb);
  white-space: nowrap;
}
.nav4 {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / 2.5%);
  border: 1px solid rgb(255 255 255 / 5%);
  white-space: nowrap;
}
.nav .nav4 a.l {
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 13.5px;
  letter-spacing: 0.005em;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}
.nav .nav4 a.l:hover {
  background: rgb(255 255 255 / 6%);
}
.nav5 {
  height: 42px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 13.5px;
}
.nav7 {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 6px;
}
.nav8 {
  height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 12px;
  color: var(--lp-e6eaf2);
  font-size: 13.5px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}
.nav8:hover {
  background: rgb(255 255 255 / 6%);
}
.nav6 {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--dp-cyan), var(--lp-a4bcff));
  transform-origin: left center;
  transform: scaleX(0);
}
.tour1 {
  position: relative;
  height: calc(10.5 * min(100vh, 1000px));
}
.tour2 {
  position: sticky;
  top: 0;
  height: min(100vh, 1000px);
  overflow: hidden;
}
.tour3 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.tour4 {
  left: 4%;
  top: 63%;
}
.tour5 {
  background: var(--lp-45d49a-a14);
  color: var(--dp-green);
}
.tour6 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}
.tour7 {
  font-size: 13.5px;
  font-weight: 800;
}
.tour8 {
  font-size: 12px;
  color: var(--lp-8c96aa);
  font-weight: 600;
}
.tour9 {
  font-size: 14px;
  font-weight: 800;
  color: var(--dp-green);
  margin-left: 10px;
}
.tour10 {
  right: 4%;
  top: 59%;
}
.tour11 {
  background: var(--lp-8fb0ff-a14);
  color: var(--lp-8fb0ff);
}
.tour12 {
  right: 7%;
  top: 72%;
}
.tour13 {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 28px;
  transform: perspective(1800px) translate3d(0, 640px, 0) scale(0.84) rotateX(22deg);
}
.tour14 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 22px;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
  background: var(--lp-070a12-a94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  z-index: 3;
}
.tour15 {
  position: relative;
  display: inline-block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--lp-f4f6fb);
  white-space: nowrap;
}
.tour16 {
  width: 1px;
  height: 20px;
  background: rgb(255 255 255 / 10%);
}
.tour17 {
  display: flex;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-8c96aa);
}
.tour18 {
  height: 32px;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
.tour19 {
  height: 32px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: 10px;
  color: var(--lp-f4f6fb);
  font-weight: 700;
  background: rgb(255 255 255 / 8%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
}
.tour20 {
  flex: 1 1 auto;
}
.tour21 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
  font-size: 12px;
  font-weight: 700;
  color: var(--lp-c9ced8);
}
.tour22 {
  display: flex;
}
.tour23 {
  margin-left: 0px;
  display: flex;
}
.tour24 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow: 0 0 0 2px var(--lp-0b0f19);
}
.tour25 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tour26 {
  margin-left: -7px;
  display: flex;
}
.tour27 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dp-green);
}
.tour28 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lp-9aa4b8);
}
.tour29 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lp-3b5bdb), var(--dp-cyan-bright));
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tour30 {
  top: 56px;
}
.tour31 {
  opacity: 1;
}
.tour32 {
  position: absolute;
  left: 0;
  top: 0;
  width: 4096px;
  height: 2560px;
}
.tour33 {
  left: 1786px;
  top: 628px;
  width: 104px;
  height: 137px;
}
.tour34 {
  height: 300%;
  animation-delay: -0s;
}
.tour35 {
  width: 6600%;
  animation-delay: -0s;
}
.tour36 {
  left: 926px;
  top: 926px;
  width: 106px;
  height: 152px;
}
.tour37 {
  height: 300%;
  animation-delay: -2.3s;
}
.tour38 {
  width: 6600%;
  animation-delay: -2.3s;
}
.tour39 {
  left: 2810px;
  top: 989px;
  width: 115px;
  height: 153px;
}
.tour40 {
  height: 300%;
  animation-delay: -4.6s;
}
.tour41 {
  width: 6600%;
  animation-delay: -4.6s;
}
.tour42 {
  left: 1103px;
  top: 1567px;
  width: 109px;
  height: 140px;
}
.tour43 {
  height: 300%;
  animation-delay: -6.9s;
}
.tour44 {
  width: 6600%;
  animation-delay: -6.9s;
}
.tour45 {
  left: 2651px;
  top: 1900px;
  width: 116px;
  height: 145px;
}
.tour46 {
  height: 300%;
  animation-delay: -9.2s;
}
.tour47 {
  width: 6600%;
  animation-delay: -9.2s;
}
.tour48 {
  left: 2811px;
  top: 1494px;
  width: 78px;
  height: 194px;
}
.tour49 {
  height: 200%;
  animation-delay: -11.5s;
}
.tour50 {
  width: 6000%;
  animation-delay: -11.5s;
}
.tour51 {
  left: 1785px;
  top: 627px;
  width: 106px;
  height: 140px;
}
.tour52 {
  height: 200%;
  animation-delay: -0s;
}
.tour53 {
  width: 9900%;
  animation-delay: -0s;
}
.tour54 {
  left: 925px;
  top: 924px;
  width: 108px;
  height: 154px;
}
.tour55 {
  height: 200%;
  animation-delay: -2.3s;
}
.tour56 {
  width: 9900%;
  animation-delay: -2.3s;
}
.tour57 {
  left: 2808px;
  top: 988px;
  width: 117px;
  height: 155px;
}
.tour58 {
  height: 200%;
  animation-delay: -4.6s;
}
.tour59 {
  width: 9900%;
  animation-delay: -4.6s;
}
.tour60 {
  left: 1102px;
  top: 1566px;
  width: 111px;
  height: 142px;
}
.tour61 {
  height: 200%;
  animation-delay: -6.9s;
}
.tour62 {
  width: 9900%;
  animation-delay: -6.9s;
}
.tour63 {
  left: 2651px;
  top: 1899px;
  width: 118px;
  height: 146px;
}
.tour64 {
  height: 200%;
  animation-delay: -9.2s;
}
.tour65 {
  width: 9900%;
  animation-delay: -9.2s;
}
.tour66 {
  left: 2806px;
  top: 1493px;
  width: 84px;
  height: 195px;
}
.tour67 {
  height: 100%;
}
.tour68 {
  width: 11900%;
  animation-delay: -11.5s;
}
.tour69 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      var(--lp-04060b-a72) 0%,
      var(--lp-04060b-a28) 24%,
      var(--lp-04060b-a0) 40%
    ),
    linear-gradient(0deg, var(--lp-04060b-a45) 0%, var(--lp-04060b-a0) 16%);
}
.tour70 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tour71 {
  opacity: 0;
}
.tour72 {
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tour73 {
  box-shadow: 0 0 0 1.5px var(--dp-role-manager);
}
.tour74 {
  box-shadow: 0 0 0 1.5px var(--dp-role-copy);
}
.tour75 {
  box-shadow: 0 0 0 1.5px var(--dp-role-designer);
}
.tour76 {
  box-shadow: 0 0 0 1.5px var(--dp-role-traffic);
}
.tour77 {
  box-shadow: 0 0 0 1.5px var(--dp-role-social);
}
.tour78 {
  box-shadow: 0 0 0 1.5px var(--dp-role-developer);
}
.tour79 {
  inset: 0;
}
.tour80 {
  position: absolute;
  left: 32px;
  top: 30px;
  width: 460px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tour81 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--lp-9aa4b8);
  font-variant-numeric: tabular-nums;
}
.tour82 {
  font-size: 42px;
  letter-spacing: -0.045em;
  line-height: 1.04;
  text-shadow: 0 4px 30px rgb(0 0 0 / 60%);
}
.tour83 {
  animation-delay: 150ms;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--lp-b4bdce);
  max-width: 410px;
  text-shadow: 0 2px 16px rgb(0 0 0 / 80%);
}
.tour84 {
  display: flex;
  gap: 5px;
  margin-top: 4px;
}
.tour85 {
  position: absolute;
  right: 26px;
  top: 0;
  bottom: 92px;
  display: flex;
  align-items: center;
}
.tour86 {
  animation-delay: 350ms;
}
.tour87 {
  width: 400px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--lp-080c16-a90);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 55%);
}
.tour88 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tour89 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-manager);
}
.tour90 {
  font-size: 14px;
  font-weight: 800;
}
.tour91 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lp-8c96aa);
}
.tour92 {
  animation-delay: 250ms;
  align-self: flex-end;
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 16px 16px 4px 16px;
  background: linear-gradient(180deg, var(--lp-5b85ff), var(--lp-3d68f5));
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 600;
}
.tour93 {
  animation-delay: 900ms;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lp-dde2ec);
}
.tour94 {
  display: flex;
  flex-direction: column;
}
.tour95 {
  animation-delay: 1300ms;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgb(255 255 255 / 6%);
}
.tour96 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-copy);
}
.tour97 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.tour98 {
  font-size: 12.5px;
  font-weight: 800;
}
.tour99 {
  font-size: 12px;
  color: var(--lp-8c96aa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tour100 {
  color: var(--dp-role-copy);
  background: rgb(255 255 255 / 5%);
}
.tour101 {
  animation-delay: 1560ms;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgb(255 255 255 / 6%);
}
.tour102 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-designer);
}
.tour103 {
  color: var(--dp-role-designer);
  background: rgb(255 255 255 / 5%);
}
.tour104 {
  animation-delay: 1820ms;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgb(255 255 255 / 6%);
}
.tour105 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-developer);
}
.tour106 {
  color: var(--lp-8c96aa);
  background: rgb(255 255 255 / 5%);
}
.tour107 {
  animation-delay: 2080ms;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgb(255 255 255 / 6%);
}
.tour108 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-traffic);
}
.tour109 {
  color: var(--dp-amber);
  background: rgb(255 255 255 / 5%);
}
.tour110 {
  width: 410px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--lp-080c16-a90);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 55%);
}
.tour111 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-copy);
}
.tour112 {
  animation-delay: 200ms;
  display: flex;
  gap: 6px;
}
.tour113 {
  color: var(--lp-f4f6fb);
  background: var(--lp-4c7bff-a30);
}
.tour114 {
  color: var(--lp-9aa4b8);
  background: rgb(255 255 255 / 5%);
}
.tour115 {
  color: var(--lp-9aa4b8);
  background: transparent;
}
.tour116 {
  padding: 16px;
  border-radius: 16px;
  background: rgb(255 255 255 / 3.5%);
  border: 1px solid rgb(255 255 255 / 6%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tour117 {
  animation-delay: 0.5s;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.22;
}
.tour118 {
  animation-delay: 1.4s;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lp-c3cad8);
}
.tour119 {
  animation-delay: 2.2s;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--lp-8fb0ff);
}
.tour120 {
  animation-delay: 2800ms;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dp-green);
}
.tour121 {
  width: 430px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--lp-080c16-a90);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 55%);
}
.tour122 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-designer);
}
.tour123 {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.tour124 {
  position: relative;
  flex: 1.15 1 0;
  aspect-ratio: 4/5;
  border-radius: 14px;
  overflow: hidden;
}
.tour125 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tour126 {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--lp-101933);
}
.tour127 {
  position: absolute;
  left: 10px;
  bottom: 10px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--lp-101933);
  color: var(--lp-ede9fe);
  font-size: 10.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
}
.tour128 {
  position: relative;
  flex: 0.9 1 0;
  aspect-ratio: 9/16;
  border-radius: 14px;
  overflow: hidden;
  background: var(--lp-000);
}
.tour129 {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0%) 50%, rgb(0 0 0 / 65%));
}
.tour130 {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: rgb(255 255 255 / 90%);
  color: var(--lp-101933);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tour131 {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 22px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
.tour132 {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 10px;
  height: 3px;
  border-radius: 2px;
  background: rgb(255 255 255 / 30%);
  overflow: hidden;
}
.tour133 {
  display: block;
  height: 100%;
  background: var(--lp-fff);
}
.tour134 {
  position: absolute;
  right: 7px;
  top: 7px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgb(0 0 0 / 45%);
}
.tour135 {
  position: relative;
  flex: 0.9 1 0;
  aspect-ratio: 9/16;
  border-radius: 14px;
  overflow: hidden;
  background: var(--lp-eef3ff);
}
.tour136 {
  animation-delay: 1700ms;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tour137 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--lp-c3cad8);
}
.tour138 {
  width: 24px;
  height: 24px;
  display: flex;
}
.tour139 {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tour140 {
  color: var(--dp-green);
  background: var(--lp-45d49a-a10);
}
.tour141 {
  width: 420px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--lp-080c16-a90);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 55%);
}
.tour142 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-traffic);
}
.tour143 {
  animation-delay: 200ms;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--lp-45d49a-a7);
  border: 1px solid var(--lp-45d49a-a20);
}
.tour144 {
  color: var(--dp-green);
  display: flex;
}
.tour145 {
  flex: 1 1 auto;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--lp-dde2ec);
}
.tour146 {
  display: flex;
  gap: 22px;
  font-variant-numeric: tabular-nums;
}
.tour147 {
  animation-delay: 500ms;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tour148 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.tour149 {
  animation-delay: 650ms;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tour150 {
  animation-delay: 800ms;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tour151 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--dp-green);
}
.tour152 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tour153 {
  animation-delay: 1000ms;
  display: grid;
  grid-template-columns: 1fr 52px 38px;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid rgb(255 255 255 / 6%);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.tour154 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.tour155 {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tour156 {
  height: 4px;
  border-radius: 2px;
  background: rgb(255 255 255 / 6%);
}
.tour157 {
  display: block;
  height: 100%;
  width: 94%;
  border-radius: 2px;
  background: var(--dp-green);
  animation-delay: 1.1s;
}
.tour158 {
  color: var(--lp-8c96aa);
  text-align: right;
}
.tour159 {
  font-weight: 800;
  text-align: right;
  color: var(--dp-green);
}
.tour160 {
  animation-delay: 1200ms;
  display: grid;
  grid-template-columns: 1fr 52px 38px;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid rgb(255 255 255 / 6%);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.tour161 {
  display: block;
  height: 100%;
  width: 62%;
  border-radius: 2px;
  background: var(--dp-green);
  animation-delay: 1.3s;
}
.tour162 {
  animation-delay: 1400ms;
  display: grid;
  grid-template-columns: 1fr 52px 38px;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid rgb(255 255 255 / 6%);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.tour163 {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: 2px;
  background: var(--dp-amber);
  animation-delay: 1.5s;
}
.tour164 {
  font-weight: 800;
  text-align: right;
  color: var(--dp-amber);
}
.tour165 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
.tour166 {
  width: 300px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 12%);
  box-shadow: 0 30px 80px rgb(0 0 0 / 60%);
}
.tour167 {
  width: 300px;
  border-radius: 0;
  overflow: hidden;
}
.tour168 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.tour169 {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.tour170 {
  width: 100%;
  height: 100%;
}
.tour171 {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--lp-ede9fe);
  position: relative;
}
.tour172 {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  object-fit: cover;
}
.tour173 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tour174 {
  font-size: 11px;
}
.tour175 {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.tour176 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tour177 {
  position: absolute;
  left: 14px;
  top: 16px;
  right: 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--lp-101933);
}
.tour178 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -45px;
  animation-delay: 1s;
  opacity: 0;
}
.tour179 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 6px;
  color: var(--dp-ig-text);
}
.tour180 {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.4;
}
.tour181 {
  font-weight: 600;
}
.tour182 {
  animation-delay: 1600ms;
  display: flex;
  gap: 6px;
}
.tour183 {
  animation-delay: 2600ms;
  display: flex;
  gap: 6px;
}
.tour184 {
  font-size: 11px;
  margin-top: 2px;
}
.tour185 {
  animation-delay: 3200ms;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px 0 6px;
  border-radius: 999px;
  background: var(--lp-080c16-a90);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 55%);
}
.tour186 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-social);
}
.tour187 {
  font-size: 13px;
  font-weight: 700;
}
.tour188 {
  width: 470px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--lp-080c16-a90);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 55%);
}
.tour189 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-developer);
}
.tour190 {
  position: relative;
}
.tour191 {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 10%);
  background: var(--lp-f2f5ff);
}
.tour192 {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: var(--lp-1a1d27);
}
.tour193 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lp-3a3f4e);
}
.tour194 {
  margin-left: 8px;
  flex: 1 1 auto;
  height: 18px;
  border-radius: 6px;
  background: var(--lp-0e1018);
  font-size: 10px;
  font-weight: 700;
  color: var(--lp-9aa4b8);
  display: flex;
  align-items: center;
  padding: 0 8px;
}
.tour195 {
  position: relative;
  height: 270px;
  overflow: hidden;
}
.tour196 {
  --sy: -1500px;
  display: block;
  width: 100%;
}
.tour197 {
  position: absolute;
  right: -14px;
  bottom: -22px;
  width: 118px;
  height: 250px;
  border-radius: 26px;
}
.tour198 {
  inset: 4px;
  border-radius: 22px;
}
.tour199 {
  top: 10px;
  height: calc(100% - 10px);
}
.tour200 {
  animation-delay: 1500ms;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.tour201 {
  color: var(--lp-8fb0ff);
  background: var(--lp-8fb0ff-a10);
}
.tour202 {
  animation-delay: 300ms;
}
.tour203 {
  width: 390px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--lp-080c16-a90);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 55%);
}
.tour204 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.tour205 {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.tour206 {
  font-size: 16px;
  font-weight: 800;
}
.tour207 {
  font-size: 12px;
  font-weight: 600;
  color: var(--lp-6b7488);
}
.tour208 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lp-8c96aa);
}
.tour209 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-8fb0ff);
}
.tour210 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tour211 {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lp-8c96aa);
}
.tour212 {
  display: flex;
  align-items: flex-start;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tour213 {
  font-size: 20px;
  font-weight: 700;
  color: var(--lp-c9ced8);
  margin-top: 7px;
  margin-right: 6px;
}
.tour214 {
  font-size: 60px;
  font-weight: 800;
  letter-spacing: -0.045em;
}
.tour215 {
  font-size: 22px;
  font-weight: 700;
  color: var(--lp-7f889a);
  margin-top: 7px;
  margin-left: 2px;
}
.tour216 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dp-green);
}
.tour217 {
  width: 100%;
  height: 84px;
}
.tour218 {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: draw 1.8s 0.3s cubic-bezier(0.16, 0.84, 0.24, 1) forwards;
}
.tour219 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid rgb(255 255 255 / 7%);
  padding-top: 12px;
  font-variant-numeric: tabular-nums;
}
.tour220 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tour221 {
  font-size: 11.5px;
  color: var(--lp-8c96aa);
  font-weight: 600;
}
.tour222 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.tour223 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgb(255 255 255 / 5%);
}
.tour224 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dp-green);
  flex-shrink: 0;
}
.tour225 {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tour226 {
  font-size: 12.5px;
  font-weight: 700;
}
.tour227 {
  font-size: 11.5px;
  color: var(--lp-6b7488);
}
.tour228 {
  font-size: 13px;
  font-weight: 800;
}
.tour229 {
  background: var(--lp-080c16-a90);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 55%);
}
.tour230 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tour231 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tour232 {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--lp-6b7488);
}
.tour233 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--lp-8c96aa);
}
.tour234 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.tour235 {
  font-size: 15px;
  font-weight: 700;
  color: var(--lp-c9ced8);
  margin-top: 5px;
  margin-right: 5px;
}
.tour236 {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.045em;
}
.tour237 {
  font-size: 16px;
  font-weight: 700;
  color: var(--lp-7f889a);
  margin-top: 5px;
  margin-left: 1px;
}
.tour238 {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
  width: 92px;
}
.tour239 {
  height: 30%;
  transform: scaleY(0);
}
.tour240 {
  height: 36%;
  transform: scaleY(0);
}
.tour241 {
  height: 42%;
  transform: scaleY(0);
}
.tour242 {
  height: 48%;
  transform: scaleY(0);
}
.tour243 {
  height: 54%;
  transform: scaleY(0);
}
.tour244 {
  height: 60%;
  transform: scaleY(0);
}
.tour245 {
  height: 66%;
  transform: scaleY(0);
}
.tour246 {
  height: 72%;
  transform: scaleY(0);
}
.tour247 {
  height: 78%;
  transform: scaleY(0);
}
.tour248 {
  height: 84%;
  transform: scaleY(0);
}
.tour249 {
  height: 90%;
  transform: scaleY(0);
}
.tour250 {
  height: 96%;
  transform: scaleY(0);
}
.tour251 {
  display: flex;
  gap: 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--lp-c9ced8);
  font-variant-numeric: tabular-nums;
  padding-top: 10px;
  border-top: 1px solid rgb(255 255 255 / 7%);
}
.tour252 {
  color: var(--lp-6b7488);
  font-weight: 600;
}
.tour253 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  background: var(--lp-45d49a-a8);
  border: 1px solid var(--lp-45d49a-a22);
}
.tour254 {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--lp-45d49a-a16);
  color: var(--dp-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tour255 {
  font-size: 11px;
  color: var(--lp-8c96aa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tour256 {
  font-size: 13px;
  font-weight: 800;
  color: var(--dp-green);
}
.tour257 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.tour258 {
  pointer-events: auto;
  width: 620px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 10px;
  border-radius: 20px;
  background: var(--lp-080c16-a90);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 55%);
}
.tour259 {
  height: 36px;
  padding: 0 12px 0 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / 5%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  flex-shrink: 0;
}
.tour260 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-manager);
}
.tour261 {
  color: var(--lp-8c96aa);
  font-weight: 600;
}
.tour262 {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
}
.tour263 {
  color: var(--lp-edf0f6);
  display: inline-block;
  animation-delay: 0.2s;
}
.tour264 {
  color: var(--lp-6b7488);
}
.tour265 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--lp-9aa4b8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tour266 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--lp-fff);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease;
}
.tour267 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--dp-cyan), var(--lp-8fb0ff));
  transform-origin: left center;
  transform: scaleX(0);
}
.value1 {
  position: relative;
  padding: 110px 40px 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
}
.value2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}
.value3 {
  padding: 0 14px;
}
.value4 {
  margin-left: 0;
}
.value5 {
  font-size: 64px;
}
.value6 {
  transition-delay: 0ms;
}
.value7 {
  transition-delay: 120ms;
}
.value8 {
  max-width: 660px;
  transition-delay: 200ms;
}
.value9 {
  width: 100%;
  max-width: 1080px;
  padding: 8px 8px 4px;
  overflow: hidden;
}
.value10 {
  width: 100%;
  border-collapse: collapse;
}
.value11 {
  color: var(--lp-f4f6fb);
  background: var(--lp-4c7bff-a10);
  border-radius: 14px 14px 0 0;
}
.value12 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.value13 {
  width: 18px;
  height: auto;
}
.value14 {
  font-weight: 600;
  color: var(--lp-dde2ec);
}
.value15 {
  color: var(--lp-8c96aa);
}
.value16 {
  background: var(--lp-4c7bff-a6);
}
.value17 {
  color: var(--lp-f4f6fb);
}
.value18 {
  color: var(--lp-4a5266);
  font-size: 18px;
  font-weight: 700;
}
.value19 {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lp-4c7bff-a18);
  color: var(--lp-8fb0ff);
  align-items: center;
  justify-content: center;
}
.value20 {
  display: flex;
  gap: 14px;
  align-items: center;
}
.value21 {
  font-size: 14px;
  color: var(--lp-8c96aa);
}
.chat1 {
  position: relative;
  padding: 120px 40px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}
.chat2 {
  width: 1180px;
  height: 640px;
  display: flex;
  border-radius: 26px;
  overflow: hidden;
  background: var(--lp-080b13-a86);
  border: 1px solid rgb(255 255 255 / 9%);
  box-shadow:
    0 50px 140px rgb(0 0 0 / 55%),
    0 0 120px var(--lp-4c7bff-a16);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.chat3 {
  width: 330px;
  flex-shrink: 0;
  border-right: 1px solid rgb(255 255 255 / 7%);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat4 {
  padding: 0 12px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-8c96aa);
}
.chat5 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-manager);
}
.chat6 {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chat7 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.chat8 {
  font-size: 11px;
  color: var(--lp-6b7488);
  font-weight: 600;
}
.chat9 {
  font-size: 12.5px;
  color: var(--lp-8c96aa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat10 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-copy);
}
.chat11 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-designer);
}
.chat12 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-traffic);
}
.chat13 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-social);
}
.chat14 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-developer);
}
.chat15 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chat16 {
  height: 68px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
}
.chat17 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
}
.chat18 {
  font-size: 15px;
  font-weight: 800;
}
.chat19 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--lp-8c96aa);
  font-weight: 600;
}
.chat20 {
  flex: 1 1 auto;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.chat21 {
  align-self: flex-end;
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;
  background: linear-gradient(180deg, var(--lp-5b85ff), var(--lp-3d68f5));
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}
.chat22 {
  animation-delay: 0.5s;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.chat23 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.chat24 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.chat25 {
  animation-delay: 1.9s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  background: rgb(255 255 255 / 3%);
  border: 1px solid rgb(255 255 255 / 7%);
  width: 420px;
}
.chat26 {
  display: grid;
  grid-template-columns: 190px 1fr 40px;
  gap: 12px;
  align-items: center;
  font-size: 12.5px;
}
.chat27 {
  font-weight: 700;
}
.chat28 {
  height: 6px;
  border-radius: 3px;
  background: rgb(255 255 255 / 6%);
}
.chat29 {
  display: block;
  height: 100%;
  width: 94%;
  border-radius: 3px;
  background: var(--dp-green);
}
.chat30 {
  display: block;
  height: 100%;
  width: 62%;
  border-radius: 3px;
  background: var(--dp-green);
}
.chat31 {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: 3px;
  background: var(--dp-amber);
}
.chat32 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 460px;
}
.chat33 {
  animation-delay: 1.6s;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgb(255 255 255 / 3%);
  border: 1px solid rgb(255 255 255 / 7%);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.chat34 {
  color: var(--dp-role-copy);
  font-variant-numeric: tabular-nums;
}
.chat35 {
  animation-delay: 2s;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgb(255 255 255 / 3%);
  border: 1px solid rgb(255 255 255 / 7%);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.chat36 {
  animation-delay: 2.3s;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgb(255 255 255 / 3%);
  border: 1px solid rgb(255 255 255 / 7%);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.chat37 {
  animation-delay: 1.6s;
  display: flex;
  gap: 12px;
}
.chat38 {
  width: 150px;
  height: 188px;
  border-radius: 14px;
  background: linear-gradient(170deg, var(--lp-fff4e2), var(--lp-f6d7b0));
  position: relative;
  overflow: hidden;
}
.chat39 {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 14px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--lp-3b1f0e);
}
.chat40 {
  width: 150px;
  height: 188px;
  border-radius: 14px;
  background: linear-gradient(170deg, var(--lp-2b1408), var(--lp-5b2a12));
  position: relative;
  overflow: hidden;
}
.chat41 {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 14px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--lp-ffe3c4);
}
.chat42 {
  animation-delay: 1.9s;
  display: flex;
  gap: 10px;
}
.chat43 {
  min-width: 120px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgb(255 255 255 / 3%);
  border: 1px solid rgb(255 255 255 / 7%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat44 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.chat45 {
  animation-delay: 1.6s;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgb(255 255 255 / 3%);
  border: 1px solid rgb(255 255 255 / 7%);
  width: 400px;
}
.chat46 {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--lp-3a6aed), var(--lp-db2777));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lp-fff);
}
.chat47 {
  font-size: 12.5px;
  color: var(--lp-8fb0ff);
  font-weight: 600;
}
.chat48 {
  animation-delay: 2.4s;
  display: flex;
  gap: 8px;
}
.chat49 {
  padding: 16px 22px 20px;
}
.chat50 {
  height: 52px;
  border-radius: 16px;
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(255 255 255 / 8%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 18px;
  font-size: 14px;
  color: var(--lp-6b7488);
}
.chat51 {
  color: var(--lp-9aa4b8);
  display: flex;
}
.chat52 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgb(255 255 255 / 8%);
  color: var(--lp-c9ced8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat53 {
  width: 1180px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 40px;
}
.chat54 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.chat55 {
  font-size: 40px;
}
.chat56 {
  font-size: 16px;
  max-width: 470px;
}
.chat57 {
  display: flex;
  gap: 20px;
  transition-delay: 150ms;
}
.chat58 {
  flex: 1 1 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 300px;
}
.chat59 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
}
.chat60 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--lp-10a37f), var(--lp-0b7a5f));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lp-fff);
}
.chat61 {
  align-self: flex-end;
  max-width: 80%;
  padding: 11px 14px;
  border-radius: 16px 16px 4px 16px;
  background: rgb(255 255 255 / 8%);
  font-size: 14px;
  line-height: 1.45;
}
.chat62 {
  color: var(--lp-c9ced8);
  background: rgb(255 255 255 / 5%);
  align-self: flex-start;
}
.chat63 {
  font-size: 14px;
  line-height: 1.6;
  color: var(--lp-dde2ec);
}
.chat64 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--lp-d97757), var(--lp-b4553a));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lp-fff);
}
.integ1 {
  position: relative;
  padding: 110px 40px 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.integ2 {
  position: relative;
  width: 1240px;
  height: 700px;
}
.integ3 {
  width: 280px;
  height: 280px;
  border-color: var(--lp-8fb0ff-a22);
}
.integ4 {
  width: 420px;
  height: 420px;
  border-style: dashed;
  border-color: var(--lp-8fb0ff-a14);
}
.integ5 {
  width: 600px;
  height: 600px;
  border-color: var(--lp-8fb0ff-a6);
}
.integ6 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.integ7 {
  offset-path: path('M 300.0 140.0 C 423.2 140.0 400.8 312.2 524.0 312.2');
  animation: pkm 6.5s linear infinite;
  animation-delay: -0s;
}
.integ8 {
  offset-path: path('M 524.0 312.2 C 400.8 312.2 423.2 140.0 300.0 140.0');
  animation: pkm 6.5s linear infinite;
  animation-delay: -3.1s;
}
.integ9 {
  offset-path: path('M 270.0 350.0 C 409.7 350.0 384.3 350.0 524.0 350.0');
  animation: pkm 6.9s linear infinite;
  animation-delay: -1.3s;
}
.integ10 {
  offset-path: path('M 524.0 350.0 C 384.3 350.0 409.7 350.0 270.0 350.0');
  animation: pkm 6.9s linear infinite;
  animation-delay: -4.4s;
}
.integ11 {
  offset-path: path('M 300.0 560.0 C 423.2 560.0 400.8 387.8 524.0 387.8');
  animation: pkm 7.3s linear infinite;
  animation-delay: -2.6s;
}
.integ12 {
  offset-path: path('M 940.0 140.0 C 816.8 140.0 839.2 312.2 716.0 312.2');
  animation: pkm 7.7s linear infinite;
  animation-delay: -3.9s;
}
.integ13 {
  offset-path: path('M 970.0 350.0 C 830.3 350.0 855.7 350.0 716.0 350.0');
  animation: pkm 8.1s linear infinite;
  animation-delay: -5.2s;
}
.integ14 {
  offset-path: path('M 716.0 350.0 C 855.7 350.0 830.3 350.0 970.0 350.0');
  animation: pkm 8.1s linear infinite;
  animation-delay: -8.3s;
}
.integ15 {
  offset-path: path('M 940.0 560.0 C 816.8 560.0 839.2 387.8 716.0 387.8');
  animation: pkm 8.5s linear infinite;
  animation-delay: -6.5s;
}
.integ16 {
  width: 190px;
  height: 190px;
  margin: -95px 0 0 -95px;
}
.integ17 {
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 50px;
  background: linear-gradient(160deg, var(--lp-16203a), var(--lp-0a0e1a));
  border: 1px solid var(--lp-8fb0ff-a32);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 14%),
    0 30px 80px rgb(0 0 0 / 60%),
    0 0 80px var(--lp-4c7bff-a35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.integ18 {
  width: 100px;
  height: auto;
}
.integ19 {
  left: 180px;
  top: 140px;
  width: 240px;
  padding: 14px 16px;
  border-radius: 20px;
}
.integ20 {
  background: linear-gradient(135deg, var(--lp-f58529), var(--lp-dd2a7b) 55%, var(--lp-3455af));
  color: var(--lp-fff);
}
.integ21 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}
.integ22 {
  font-size: 12px;
  line-height: 1.4;
  color: var(--lp-8c96aa);
}
.integ23 {
  left: 150px;
  top: 350px;
  width: 240px;
  padding: 14px 16px;
  border-radius: 20px;
}
.integ24 {
  background: linear-gradient(135deg, var(--lp-0866ff), var(--lp-4c9bff));
  color: var(--lp-fff);
}
.integ25 {
  left: 180px;
  top: 560px;
  width: 240px;
  padding: 14px 16px;
  border-radius: 20px;
}
.integ26 {
  background: var(--lp-0b0e18);
  border: 1px solid rgb(255 255 255 / 10%);
  padding: 6px;
}
.integ27 {
  left: 1060px;
  top: 140px;
  width: 240px;
  padding: 14px 16px;
  border-radius: 20px;
}
.integ28 {
  background: linear-gradient(135deg, var(--lp-10b981), var(--lp-047857));
  color: var(--lp-fff);
}
.integ29 {
  left: 1090px;
  top: 350px;
  width: 240px;
  padding: 14px 16px;
  border-radius: 20px;
}
.integ30 {
  background: linear-gradient(135deg, var(--lp-10a37f), var(--lp-0b6e57));
  color: var(--lp-fff);
}
.integ31 {
  left: 1060px;
  top: 560px;
  width: 240px;
  padding: 14px 16px;
  border-radius: 20px;
}
.integ32 {
  background: linear-gradient(135deg, var(--lp-d97757), var(--lp-a8492f));
  color: var(--lp-fff);
}
.integ33 {
  font-size: 13px;
  color: var(--lp-6b7488);
}
.pages1 {
  position: relative;
  padding: 110px 40px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.pages2 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(255 255 255 / 8%);
}
.pages3 {
  opacity: 0.55;
  font-weight: 600;
}
.pages4 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.pages5 {
  position: relative;
  width: 880px;
  flex-shrink: 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--lp-0e1018);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 12%),
    0 60px 140px rgb(0 0 0 / 60%),
    0 0 120px var(--lp-4c7bff-a18);
}
.pages6 {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: var(--lp-12151f);
  border-bottom: 1px solid rgb(255 255 255 / 6%);
}
.pages7 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--lp-2c3242);
}
.pages8 {
  margin-left: 14px;
  flex: 1 1 auto;
  max-width: 420px;
  height: 26px;
  border-radius: 8px;
  background: var(--lp-0a0c13);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lp-9aa4b8);
}
.pages9 {
  position: relative;
  height: 560px;
  overflow: hidden;
  background: var(--lp-fff);
}
.pages10 {
  --sy: -3040px;
  display: block;
  width: 100%;
}
.pages11 {
  --sy: -2480px;
  display: block;
  width: 100%;
}
.pages12 {
  width: 310px;
  height: 660px;
  cursor: var(--dp-cursor-action);
  margin-left: -90px;
  margin-top: 70px;
  z-index: 2;
}
.pages13 {
  width: 1100px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  margin-top: 30px;
}
.pages14 {
  transition-delay: 0ms;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pages15 {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--lp-4c7bff-a14);
  color: var(--lp-8fb0ff);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pages16 {
  font-size: 15px;
  line-height: 1.6;
  color: var(--lp-8c96aa);
}
.pages17 {
  transition-delay: 120ms;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pages18 {
  transition-delay: 240ms;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tools1 {
  position: relative;
  padding: 110px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
.tools2 {
  font-size: 60px;
}
.tools3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  width: 100%;
}
.tools4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.tools5 {
  font-size: 44px;
}
.tools6 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 72px;
  width: 100%;
  transition-delay: 150ms;
}
.tools7 {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: right;
}
.tools8 {
  font-size: 12px;
  font-weight: 700;
  color: var(--lp-6b7488);
  font-variant-numeric: tabular-nums;
}
.tools9 {
  width: 330px;
  height: 690px;
}
.tools10 {
  position: absolute;
  inset: 8px;
  border-radius: 44px;
  overflow: hidden;
  background: var(--lp-000);
}
.tools11 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.tools12 {
  height: 50px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 28px 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dp-ig-text);
}
.tools13 {
  display: flex;
  gap: 5px;
  align-items: center;
}
.tools14 {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
}
.tools15 {
  font-family: 'Manrope';
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.tools16 {
  width: 314px;
  border-radius: 0;
  overflow: hidden;
}
.tools17 {
  position: absolute;
  inset: 0;
}
.tools18 {
  position: absolute;
  inset: 0;
  opacity: 0.35;
}
.tools19 {
  height: 44px;
}
.tools20 {
  width: 100%;
  display: block;
}
.tools21 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 74%;
  border-radius: 18px 18px 0 0;
  background: var(--lp-262626);
  display: flex;
  flex-direction: column;
}
.tools22 {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--lp-555555);
  align-self: center;
  margin: 8px 0;
}
.tools23 {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lp-363636);
}
.tools24 {
  flex: 1 1 auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.tools25 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.tools26 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lp-7c9ef8);
  flex-shrink: 0;
}
.tools27 {
  font-size: 12.5px;
}
.tools28 {
  font-size: 13.5px;
}
.tools29 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lp-e58fb0);
  flex-shrink: 0;
}
.tools30 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lp-c89b5a);
  flex-shrink: 0;
}
.tools31 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tools32 {
  font-size: 13.5px;
  line-height: 1.35;
}
.tools33 {
  color: var(--dp-ig-muted);
  padding-top: 6px;
}
.tools34 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-left: 42px;
}
.tools35 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--lp-ede9fe);
}
.tools36 {
  width: 140%;
  height: 140%;
  margin: -20%;
  object-fit: cover;
}
.tools37 {
  font-size: 11px;
  color: var(--dp-ig-muted);
}
.tools38 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 26px;
  border-top: 1px solid var(--lp-363636);
}
.tools39 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lp-c89b5a);
}
.tools40 {
  flex: 1 1 auto;
  height: 38px;
  border-radius: 20px;
  border: 1px solid var(--lp-363636);
  font-size: 13px;
  color: var(--dp-ig-muted);
  display: flex;
  align-items: center;
  padding: 0 14px;
}
.tools41 {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-bottom: 1px solid var(--lp-262626);
}
.tools42 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--lp-ede9fe);
}
.tools43 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.tools44 {
  font-size: 15px;
}
.tools45 {
  font-size: 11.5px;
}
.tools46 {
  width: 8px;
}
.tools47 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 14px 12px;
}
.tools48 {
  text-align: center;
  font-size: 11.5px;
  margin-bottom: 8px;
}
.tools49 {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.tools50 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--lp-ede9fe);
  flex-shrink: 0;
}
.tools51 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 76%;
}
.tools52 {
  padding: 9px 13px;
  border-radius: 20px;
  background: var(--lp-262626);
  font-size: 14px;
  line-height: 1.35;
}
.tools53 {
  border-radius: 18px;
  overflow: hidden;
  background: var(--lp-262626);
}
.tools54 {
  display: block;
  height: 128px;
  overflow: hidden;
}
.tools55 {
  width: 100%;
  display: block;
  margin-top: -40px;
}
.tools56 {
  display: block;
  padding: 9px 12px;
}
.tools57 {
  display: block;
  font-size: 13px;
  font-weight: 600;
}
.tools58 {
  align-self: flex-end;
  max-width: 72%;
  padding: 9px 13px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--lp-5b51f5), var(--lp-3797f0));
  font-size: 14px;
  line-height: 1.35;
}
.tools59 {
  align-self: flex-end;
  font-size: 11px;
  animation-delay: 0.3s;
}
.tools60 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 10px 26px;
  height: 44px;
  padding: 0 6px;
  border-radius: 22px;
  background: var(--lp-262626);
}
.tools61 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lp-3797f0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lp-fff);
}
.tools62 {
  flex: 1 1 auto;
  font-size: 14px;
  color: var(--dp-ig-muted);
}
.tools63 {
  width: 6px;
}
.tools64 {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tools65 {
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-6b7488);
}
.tools66 {
  height: 58px;
  width: 220px;
  padding: 0 20px;
  border-radius: 16px;
  border: 1px solid var(--lp-8fb0ff-a30);
  background: var(--lp-8fb0ff-a6);
  color: var(--lp-f4f6fb);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-family: inherit;
  outline: none;
}
.tools67 {
  font-size: 14px;
  line-height: 1.6;
  color: var(--lp-8c96aa);
  max-width: 280px;
}
.tools68 {
  font-size: 17px;
  max-width: 640px;
}
.tools69 {
  position: relative;
  width: 1120px;
  height: 330px;
  transition-delay: 150ms;
}
.tools70 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.tools71 {
  position: absolute;
  left: 0px;
  top: 40px;
}
.tools72 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--lp-8c96aa);
  margin-bottom: 10px;
}
.tools73 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--lp-4c7bff-a16);
  color: var(--lp-8fb0ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
}
.tools74 {
  display: flex;
  gap: 10px;
  align-items: center;
}
.tools75 {
  width: 52px;
  height: 66px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.tools76 {
  font-size: 11.5px;
  color: var(--lp-8c96aa);
}
.tools77 {
  position: absolute;
  left: 290px;
  top: 150px;
}
.tools78 {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--lp-c9ced8);
  word-break: break-all;
}
.tools79 {
  color: var(--lp-8fb0ff);
}
.tools80 {
  position: absolute;
  left: 580px;
  top: 40px;
}
.tools81 {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 800;
}
.tools82 {
  position: absolute;
  left: 870px;
  top: 150px;
}
.tools83 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--dp-green);
}
.tools84 {
  font-size: 12px;
  color: var(--lp-8c96aa);
}
.tools85 {
  offset-path: path('M 250 110 C 280 110, 260 220, 290 220');
}
.tools86 {
  offset-path: path('M 540 220 C 570 220, 550 110, 580 110');
}
.tools87 {
  offset-path: path('M 830 110 C 860 110, 840 220, 870 220');
}
.tools88 {
  width: 100%;
  display: flex;
  justify-content: center;
  transition-delay: 250ms;
}
.tools89 {
  width: 100%;
  max-width: 1120px;
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
  padding: 10px 6px;
}
.tools90 {
  display: grid;
  grid-template-columns: 2.2fr 1fr 0.8fr 1fr 1.4fr;
  gap: 12px;
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--lp-6b7488);
}
.tools91 {
  text-align: right;
}
.tools92 {
  display: grid;
  grid-template-columns: 2.2fr 1fr 0.8fr 1fr 1.4fr;
  gap: 12px;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid rgb(255 255 255 / 6%);
  font-size: 15px;
}
.tools93 {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}
.tools94 {
  width: 110px;
  height: 6px;
  border-radius: 3px;
  background: rgb(255 255 255 / 6%);
}
.team1 {
  position: relative;
  padding: 110px 40px 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}
.team2 {
  position: relative;
  width: 100%;
  max-width: 1240px;
  display: flex;
  gap: 8px;
}
.team3 {
  transition-delay: 0ms;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.team4 {
  position: relative;
  height: 290px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.team5 {
  position: absolute;
  bottom: -30px;
  left: 50%;
  width: 190px;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--dp-role-manager) 40%, transparent),
    transparent
  );
}
.team6 {
  position: absolute;
  bottom: -16px;
  left: 50%;
  width: 132px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--dp-role-manager) 33%, transparent);
}
.team7 {
  position: relative;
  width: 93px;
  height: 233px;
  margin-bottom: -14px;
  overflow: hidden;
}
.team8 {
  display: block;
  height: 200%;
  animation-delay: -0s;
}
.team9 {
  display: block;
  width: 6000%;
  height: 100%;
  animation-delay: -0s;
}
.team10 {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--dp-role-manager);
  margin-top: 10px;
  letter-spacing: 0.02em;
}
.team11 {
  transition-delay: 90ms;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.team12 {
  position: absolute;
  bottom: -30px;
  left: 50%;
  width: 190px;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--dp-role-copy) 40%, transparent),
    transparent
  );
}
.team13 {
  position: absolute;
  bottom: -16px;
  left: 50%;
  width: 132px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--dp-role-copy) 33%, transparent);
}
.team14 {
  position: relative;
  width: 95px;
  height: 234px;
  margin-bottom: -14px;
  overflow: hidden;
}
.team15 {
  display: block;
  height: 200%;
  animation-delay: -1.3s;
}
.team16 {
  display: block;
  width: 6000%;
  height: 100%;
  animation-delay: -1.3s;
}
.team17 {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--dp-role-copy);
  margin-top: 10px;
  letter-spacing: 0.02em;
}
.team18 {
  transition-delay: 180ms;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.team19 {
  position: absolute;
  bottom: -30px;
  left: 50%;
  width: 190px;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--dp-role-designer) 40%, transparent),
    transparent
  );
}
.team20 {
  position: absolute;
  bottom: -16px;
  left: 50%;
  width: 132px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--dp-role-designer) 33%, transparent);
}
.team21 {
  position: relative;
  width: 96px;
  height: 229px;
  margin-bottom: -12px;
  overflow: hidden;
}
.team22 {
  display: block;
  height: 200%;
  animation-delay: -2.6s;
}
.team23 {
  display: block;
  width: 6000%;
  height: 100%;
  animation-delay: -2.6s;
}
.team24 {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--dp-role-designer);
  margin-top: 10px;
  letter-spacing: 0.02em;
}
.team25 {
  transition-delay: 270ms;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.team26 {
  position: absolute;
  bottom: -30px;
  left: 50%;
  width: 190px;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--dp-role-traffic) 40%, transparent),
    transparent
  );
}
.team27 {
  position: absolute;
  bottom: -16px;
  left: 50%;
  width: 132px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--dp-role-traffic) 33%, transparent);
}
.team28 {
  position: relative;
  width: 97px;
  height: 233px;
  margin-bottom: -13px;
  overflow: hidden;
}
.team29 {
  display: block;
  height: 200%;
  animation-delay: -3.9s;
}
.team30 {
  display: block;
  width: 6000%;
  height: 100%;
  animation-delay: -3.9s;
}
.team31 {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--dp-role-traffic);
  margin-top: 10px;
  letter-spacing: 0.02em;
}
.team32 {
  transition-delay: 360ms;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.team33 {
  position: absolute;
  bottom: -30px;
  left: 50%;
  width: 190px;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--dp-role-social) 40%, transparent),
    transparent
  );
}
.team34 {
  position: absolute;
  bottom: -16px;
  left: 50%;
  width: 132px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--dp-role-social) 33%, transparent);
}
.team35 {
  position: relative;
  width: 86px;
  height: 230px;
  margin-bottom: -10px;
  overflow: hidden;
}
.team36 {
  display: block;
  height: 200%;
  animation-delay: -5.2s;
}
.team37 {
  display: block;
  width: 6000%;
  height: 100%;
  animation-delay: -5.2s;
}
.team38 {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--dp-role-social);
  margin-top: 10px;
  letter-spacing: 0.02em;
}
.team39 {
  transition-delay: 450ms;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.team40 {
  position: absolute;
  bottom: -30px;
  left: 50%;
  width: 190px;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--dp-role-developer) 40%, transparent),
    transparent
  );
}
.team41 {
  position: absolute;
  bottom: -16px;
  left: 50%;
  width: 132px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--dp-role-developer) 33%, transparent);
}
.team42 {
  position: relative;
  width: 101px;
  height: 233px;
  margin-bottom: -13px;
  overflow: hidden;
}
.team43 {
  display: block;
  height: 200%;
  animation-delay: -6.5s;
}
.team44 {
  display: block;
  width: 6000%;
  height: 100%;
  animation-delay: -6.5s;
}
.team45 {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--dp-role-developer);
  margin-top: 10px;
  letter-spacing: 0.02em;
}
.build1 {
  position: relative;
  height: calc(3.6 * min(100vh, 1000px));
}
.build2 {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    var(--lp-000) 16%,
    var(--lp-000) 84%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    var(--lp-000) 16%,
    var(--lp-000) 84%,
    transparent 100%
  );
}
.build3 {
  opacity: 1;
  transform: scale(1.06);
}
.build4 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, calc(min(100vh, 1000px) * 1.8278));
  transform: translate(-50%, -50%);
}
.build5 {
  position: relative;
  width: 100%;
  aspect-ratio: 3820 / 2090;
  overflow: hidden;
}
.build6 {
  position: absolute;
  left: -3.6649%;
  top: -9.0909%;
  width: 107.2251%;
  aspect-ratio: 4096 / 2560;
}
.build7 {
  left: 43.5791%;
  top: 24.4922%;
  width: 2.5879%;
  height: 5.4688%;
}
.build8 {
  left: 22.583%;
  top: 36.0938%;
  width: 2.6367%;
  height: 6.0156%;
}
.build9 {
  height: 200%;
  animation-delay: -1.9s;
}
.build10 {
  width: 9900%;
  animation-delay: -1.9s;
}
.build11 {
  left: 68.5547%;
  top: 38.5938%;
  width: 2.8564%;
  height: 6.0547%;
}
.build12 {
  height: 200%;
  animation-delay: -3.8s;
}
.build13 {
  width: 9900%;
  animation-delay: -3.8s;
}
.build14 {
  left: 26.9043%;
  top: 61.1719%;
  width: 2.71%;
  height: 5.5469%;
}
.build15 {
  height: 200%;
  animation-delay: -5.7s;
}
.build16 {
  width: 9900%;
  animation-delay: -5.7s;
}
.build17 {
  left: 64.7217%;
  top: 74.1797%;
  width: 2.8809%;
  height: 5.7031%;
}
.build18 {
  height: 200%;
  animation-delay: -7.6s;
}
.build19 {
  width: 9900%;
  animation-delay: -7.6s;
}
.build20 {
  left: 68.5059%;
  top: 58.3203%;
  width: 2.0508%;
  height: 7.6172%;
}
.build21 {
  width: 11900%;
  animation-delay: -9.5s;
}
.build22 {
  opacity: 0;
  transform: scale(1.06);
}
.build23 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, calc(min(100vh, 1000px) * 1.9692));
  transform: translate(-50%, -50%);
}
.build24 {
  position: relative;
  width: 100%;
  aspect-ratio: 2560 / 1300;
  overflow: hidden;
}
.build25 {
  position: absolute;
  left: -2.3438%;
  top: -6.1538%;
  width: 105%;
  aspect-ratio: 2688 / 1408;
}
.build26 {
  left: 33.2031%;
  top: 22.2656%;
  width: 1.9717%;
  height: 4.9716%;
}
.build27 {
  width: 19800%;
  animation-delay: -0s;
}
.build28 {
  left: 17.2061%;
  top: 32.848%;
  width: 2.0089%;
  height: 5.4688%;
}
.build29 {
  width: 19800%;
  animation-delay: -1.9s;
}
.build30 {
  left: 52.2321%;
  top: 35.0852%;
  width: 2.1577%;
  height: 5.5398%;
}
.build31 {
  width: 19800%;
  animation-delay: -3.8s;
}
.build32 {
  left: 20.4985%;
  top: 55.6108%;
  width: 2.0833%;
  height: 5.0426%;
}
.build33 {
  width: 19800%;
  animation-delay: -5.7s;
}
.build34 {
  left: 69.5126%;
  top: 65.4474%;
  width: 1.4881%;
  height: 6.6761%;
}
.build35 {
  width: 3600%;
  animation-delay: -7.6s;
}
.build36 {
  left: 64.8065%;
  top: 70.1349%;
  width: 1.3765%;
  height: 6.4631%;
}
.build37 {
  width: 3600%;
  animation-delay: -9.5s;
}
.build38 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, calc(min(100vh, 1000px) * 1.7703));
  transform: translate(-50%, -50%);
}
.build39 {
  position: relative;
  width: 100%;
  aspect-ratio: 2620 / 1480;
  overflow: hidden;
}
.build40 {
  position: absolute;
  left: -9.9237%;
  top: -8.1081%;
  width: 112.3664%;
  aspect-ratio: 2944 / 1664;
}
.build41 {
  left: 67.1196%;
  top: 18.8401%;
  width: 1.8003%;
  height: 4.2067%;
}
.build42 {
  left: 77.2588%;
  top: 31.7007%;
  width: 1.8342%;
  height: 4.6274%;
}
.build43 {
  left: 49.5414%;
  top: 29.6875%;
  width: 1.9701%;
  height: 4.6875%;
}
.build44 {
  left: 78.6345%;
  top: 47.0553%;
  width: 1.9022%;
  height: 4.2668%;
}
.build45 {
  left: 29.161%;
  top: 53.756%;
  width: 1.4266%;
  height: 5.5288%;
}
.build46 {
  width: 4800%;
  animation-delay: -7.6s;
}
.build47 {
  left: 30.8933%;
  top: 55.8293%;
  width: 1.3927%;
  height: 5.649%;
}
.build48 {
  width: 4800%;
  animation-delay: -9.5s;
}
.build49 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--lp-060912-a90) 0%,
    var(--lp-060912-a62) 30%,
    var(--lp-060912-a0) 58%
  );
}
.build50 {
  position: absolute;
  left: 7%;
  top: 50%;
  transform: translateY(-50%);
  width: 480px;
  height: 460px;
}
.build51 {
  padding: 0 14px;
  position: absolute;
  top: -70px;
  left: 0;
}
.build52 {
  position: absolute;
  left: 0;
  top: 0;
  width: 470px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 1;
  transform: translate3d(0, 0px, 0);
}
.build53 {
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-8fb0ff);
  font-variant-numeric: tabular-nums;
}
.build54 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lp-c9d6ff);
}
.build55 {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--lp-a3adc0);
}
.build56 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.build57 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--lp-dde2ec);
}
.build58 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lp-4c7bff-a20);
  color: var(--lp-8fb0ff);
  display: flex;
  align-items: center;
  justify-content: center;
}
.build59 {
  position: absolute;
  left: 0;
  top: 0;
  width: 470px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}
.build60 {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.build61 {
  width: 4px;
  height: 40px;
  border-radius: 2px;
  background: var(--lp-f4f6fb);
  transition:
    height 0.5s ease,
    background 0.4s ease;
}
.build62 {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: rgb(255 255 255 / 25%);
  transition:
    height 0.5s ease,
    background 0.4s ease;
}
.brain1 {
  position: relative;
  padding: 110px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.brain2 {
  position: relative;
  width: 980px;
  height: 660px;
}
.brain3 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
}
.brain4 {
  position: absolute;
  left: 490px;
  top: 80px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.brain5 {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 3px var(--lp-070a12),
    0 0 0 5px var(--dp-role-manager),
    0 0 30px color-mix(in srgb, var(--dp-role-manager) 40%, transparent);
}
.brain6 {
  position: absolute;
  left: 801.8px;
  top: 205px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.brain7 {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 3px var(--lp-070a12),
    0 0 0 5px var(--dp-role-copy),
    0 0 30px color-mix(in srgb, var(--dp-role-copy) 40%, transparent);
}
.brain8 {
  position: absolute;
  left: 801.8px;
  top: 455px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.brain9 {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 3px var(--lp-070a12),
    0 0 0 5px var(--dp-role-designer),
    0 0 30px color-mix(in srgb, var(--dp-role-designer) 40%, transparent);
}
.brain10 {
  position: absolute;
  left: 490px;
  top: 580px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.brain11 {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 3px var(--lp-070a12),
    0 0 0 5px var(--dp-role-traffic),
    0 0 30px color-mix(in srgb, var(--dp-role-traffic) 40%, transparent);
}
.brain12 {
  position: absolute;
  left: 178.2px;
  top: 455px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.brain13 {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 3px var(--lp-070a12),
    0 0 0 5px var(--dp-role-social),
    0 0 30px color-mix(in srgb, var(--dp-role-social) 40%, transparent);
}
.brain14 {
  position: absolute;
  left: 178.2px;
  top: 205px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.brain15 {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 3px var(--lp-070a12),
    0 0 0 5px var(--dp-role-developer),
    0 0 30px color-mix(in srgb, var(--dp-role-developer) 40%, transparent);
}
.brain16 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.brain17 {
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 6px 30px rgb(0 0 0 / 90%);
}
.brain18 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--lp-c9ced8);
  text-shadow: 0 2px 12px rgb(0 0 0 / 90%);
}
.brain19 {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--lp-8fb0ff);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.brain20 {
  width: 100%;
  max-width: 1160px;
  display: flex;
  gap: 16px;
}
.brain21 {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  transition:
    border-color 0.5s ease,
    background 0.5s ease;
}
.brain22 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brain23 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-copy);
}
.brain24 {
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-8c96aa);
}
.brain25 {
  font-size: 16px;
  line-height: 1.55;
  color: var(--lp-dde2ec);
  flex: 1 1 auto;
}
.brain26 {
  height: 40px;
  align-self: flex-start;
  font-size: 13.5px;
  padding: 0 18px;
}
.brain27 {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--dp-green);
}
.brain28 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-traffic);
}
.brain29 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--lp-0a0e18),
    0 0 0 3.5px var(--dp-role-social);
}
.faq1 {
  position: relative;
  padding: 100px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.faq2 {
  font-size: 52px;
}
.faq3 {
  width: 100%;
  max-width: 800px;
  border-top: 1px solid rgb(255 255 255 / 7%);
}
.faq4 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 26px 4px;
  border: 0;
  background: transparent;
  color: var(--lp-f4f6fb);
  font-size: 19px;
  font-weight: 700;
  text-align: left;
}
.faq5 {
  margin: 0;
  padding: 0 4px 26px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--lp-94a0b6);
}
.final1 {
  position: relative;
  height: min(100vh, 1000px);
  min-height: 760px;
  overflow: hidden;
}
.final2 {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    var(--lp-000) 20%,
    var(--lp-000) 80%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    var(--lp-000) 20%,
    var(--lp-000) 80%,
    transparent 100%
  );
}
.final3 {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 46% 50% at 50% 50%,
    var(--lp-060912-a88),
    var(--lp-060912-a35) 100%
  );
}
.final4 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
}
.final5 {
  font-size: 92px;
}
.final6 {
  max-width: 600px;
}
.final7 {
  display: flex;
  gap: 14px;
}
.final8 {
  height: 60px;
  padding: 0 32px;
  font-size: 16px;
}
.final9 {
  height: 60px;
}
.hero1 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding-top: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  z-index: 4;
}
.hero2 {
  font-size: 82px;
  max-width: 1240px;
}
.hero3 {
  max-width: 700px;
}
.foot1 {
  position: relative;
  padding: 56px 40px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  color: var(--lp-6b7488);
}
.foot2 {
  position: relative;
  display: inline-block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--lp-f4f6fb);
  white-space: nowrap;
}
.foot3 {
  display: flex;
  gap: 22px;
}
/* ---------- states the board wrote as computed styles, as classes (CSP: no style attribute) */
.faqIcon {
  display: flex;
  color: var(--lp-8c96aa);
  transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.24, 1);
}
.act {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
}
.actFirst {
  background: var(--lp-f4f6fb);
  color: var(--lp-070a12);
}
.actOther {
  border: 1px solid rgb(255 255 255 / 14%);
  color: var(--lp-e6eaf2);
}
.chatLine {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lp-dde2ec);
  max-width: 560px;
}
.tabOn {
  background: var(--lp-f4f6fb);
  color: var(--lp-070a12);
}
.tabOff {
  background: transparent;
  color: var(--lp-a3adc0);
}
.qzimg img.qOn {
  opacity: 1;
  transform: none;
}
.qzimg img.qPrev {
  opacity: 0;
  transform: translate3d(-24px, 0, 0);
}
.qzimg img.qNext {
  opacity: 0;
  transform: translate3d(24px, 0, 0);
}
.tapDot {
  position: absolute;
  left: 50%;
  top: 75%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgb(255 255 255 / 55%);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 70%);
  pointer-events: none;
  z-index: 5;
}
.igRow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid rgb(255 255 255 / 6%);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.16, 0.84, 0.24, 1);
  opacity: 0.35;
}
.mvA {
  animation: mvA 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.mvB {
  animation: mvB 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.mvOff {
  opacity: 0;
}
.barFill {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.16, 0.84, 0.24, 1);
  width: 0;
}
.barGood {
  background: linear-gradient(90deg, var(--lp-3d6bff), var(--dp-green));
}
.barWeak {
  background: var(--dp-amber);
}
.roas {
  width: 52px;
  text-align: right;
  font-weight: 800;
}
.good {
  color: var(--dp-green);
}
.weak {
  color: var(--dp-amber);
}
.content {
  position: relative;
  z-index: 1;
}

/* ---------- smaller screens (the board is drawn for 1440 only; these follow its look)
   Wide compositions — the integrations map, the Brain, the journey of a sale — shrink as one
   picture on a tablet and re-flow into a column on a phone. */
@media (max-width: 1279px) {
  .integ2,
  .brain2,
  .tools69 {
    zoom: 0.8;
  }
  .chat2,
  .chat53 {
    width: 100%;
  }
  .pages13 {
    width: 100%;
  }
  .tools6 {
    gap: 32px;
  }
}

@media (max-width: 1023px) {
  .integ2,
  .brain2,
  .tools69 {
    zoom: 0.6;
  }
  .nav4 {
    display: none;
  }
  .nav1 {
    grid-template-columns: 1fr auto;
    gap: 18px;
  }
  .landing h1.h {
    font-size: clamp(40px, 8.4vw, 82px);
  }
  .landing h2.h {
    font-size: clamp(34px, 6.4vw, 64px);
  }
  .landing h3.h {
    font-size: clamp(28px, 5vw, 40px);
  }
  .chat3 {
    width: 260px;
  }
  .pages12 {
    display: none;
  }
  .pages5 {
    width: 100%;
    max-width: 880px;
  }
  .pages13 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .tools6 {
    flex-direction: column;
  }
  .tools64 {
    flex: 0 0 auto;
    width: 100%;
    max-width: 420px;
  }
  .team2 {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 40px;
  }
  .team2 > * {
    flex: 0 0 calc(33.333% - 8px);
  }
  .brain20 {
    flex-direction: column;
    max-width: 560px;
  }
  .final5 {
    font-size: clamp(44px, 9vw, 92px);
  }
  .chat54 {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .value1,
  .chat1,
  .integ1,
  .pages1,
  .tools1,
  .team1,
  .brain1,
  .faq1 {
    padding: 72px 16px;
    gap: 36px;
  }
  .landing .sub {
    font-size: 16px;
  }
  .nav1 {
    top: 10px;
    width: calc(100% - 24px);
    height: 56px;
    padding: 0 7px 0 16px;
    border-radius: 16px;
  }
  .nav8 {
    display: none;
  }
  .hero1 {
    padding: 92px 16px 0;
    gap: 18px;
  }
  .landing .lbl {
    height: auto;
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
    text-align: left;
  }
  .value20,
  .final7 {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 340px;
  }
  .value20 > *,
  .final7 > * {
    justify-content: center;
  }
  .landing [id='toasts'],
  .hud {
    display: none;
  }
  /* A step's card sits at the foot of the screen, under the caption, over the request bar. */
  .tour80 {
    left: 16px;
    top: 18px;
    width: calc(100% - 32px);
  }
  .tour82 {
    font-size: 30px;
  }
  .tour85 {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 80px;
    padding-top: 0 !important;
    justify-content: center;
    align-items: flex-end;
    zoom: 0.82;
  }
  .tour85 > * {
    max-width: 100%;
  }
  .tour21,
  .tour28,
  .tour29 {
    display: none;
  }
  /* The comparison: the table keeps its columns and scrolls inside its card. */
  .value9 {
    overflow-x: auto;
  }
  .value10 {
    min-width: 640px;
  }
  .cmp td,
  .cmp th {
    padding: 14px 12px;
    font-size: 13px;
  }
  /* The conversation: the list of agents gives its room to the conversation. */
  .chat2 {
    height: auto;
    min-height: 560px;
  }
  .chat3 {
    display: none;
  }
  /* The integrations: the map becomes a list. */
  .integ2 {
    zoom: 1;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .integ2 > :not(.node) {
    display: none;
  }
  .integ2 .node {
    position: relative;
    left: auto !important;
    top: auto !important;
    transform: none;
    width: 100%;
  }
  .integ2 .node:hover {
    transform: none;
  }
  .pages4 {
    overflow: hidden;
  }
  .tools69 {
    zoom: 0.34;
  }
  .tools92 > *,
  .tools93 {
    font-size: 13px;
  }
  .tools89 {
    overflow-x: auto;
  }
  .team2 > * {
    flex: 0 0 calc(50% - 8px);
  }
  .brain2 {
    zoom: 0.38;
  }
  .build50 {
    left: 16px;
    right: 16px;
    width: auto;
    height: auto;
    top: auto;
    bottom: 32px;
    transform: none;
  }
  .final4 {
    padding: 0 16px;
  }
  .foot1 {
    padding: 48px 16px;
    text-align: center;
  }
  .chat42 {
    flex-wrap: wrap;
  }
  .pages2 {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 22px;
  }
  .landing .tab6 {
    padding: 0 12px;
    font-size: 12px;
  }
  .tools92,
  .tools90 {
    min-width: 640px;
  }
  .foot3 {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
  }
}

/* A step of the tour and an answer of the FAQ are always in the page, shown one at a time: the
   same markup serves deskprise.com, whose script shows them without React. */
.step {
  display: contents;
}
.step[hidden] {
  display: none;
}

/* Marks a picture whose sprites load when it is near (useLanding.ts), and pause off screen. */
.stage {
  --stage: 1;
}

/* The brand files (BrandLockup, BrandWordmark) at the size they are given, never squeezed by the
   flex row that holds them. */
.nav2,
.tour14 > :first-child {
  flex-shrink: 0;
}
.nav2 .nav3,
.foot1 .foot2,
.tour14 .tour15 {
  max-width: none;
}

/*
 * deskprise.com — what only the site needs, appended by scripts/build.ts AFTER the product's
 * own stylesheets (tokens, base layer, the mark and landing v6, read from apps/web at build
 * time). Everything here speaks in the product's tokens (`--dp-*`, `--lp-*`).
 *
 * The home is the landing itself and needs nothing from here. What is here: the skip link, and
 * the long texts (privacy, terms, deletion) and the 404, under `lg-`, so no name meets one of the
 * landing's. Those pages wear the landing's own nav and footer.
 */

.skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--dp-radius-sm);
  background: var(--dp-cyan);
  color: var(--dp-text-inverse);
  font-weight: 600;
}

.skip:focus {
  top: 12px;
}

/* ---- What the landing sets inline ------------------------------------------------------- */
/* ---- The long texts, inside the landing's nav and footer --------------------------------- */
.lg-page main {
  padding: 132px 24px 40px;
}

.section {
  max-width: 1160px;
  margin: 0 auto;
}

.heading {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}

.kick,
.label {
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-8c96aa);
}

.glassDark {
  border-radius: 24px;
  background: var(--lp-0c101b-a72);
  border: 1px solid rgb(255 255 255 / 9%);
}

.foot1 > span:last-child > span:last-child {
  max-width: 720px;
  text-align: center;
}

.lg-missing {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
}

.lg-missing .h {
  font-size: clamp(40px, 7vw, 72px);
}

.lg-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.lg {
  padding-top: 150px;
}

.lg-head h1 {
  margin: 0;
  font-family: var(--dp-font-display);
  font-size: clamp(36px, 5.2vw, 64px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.lg-meta {
  font-size: 13px;
  color: var(--dp-text-muted);
}

.lg-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.lg-toc {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 20px;
}

.lg-toc ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.4;
}

.lg-toc a {
  color: var(--dp-text-muted);
  transition: color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lg-toc a:hover {
  color: var(--dp-text);
}

.lg-prose {
  padding: clamp(24px, 4vw, 52px);
  border-radius: 24px;
  max-width: 880px;
}

.lg-prose section {
  scroll-margin-top: 100px;
}

.lg-prose section + section {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid rgb(255 255 255 / 8%);
}

.lg-prose h2 {
  margin: 0 0 16px;
  font-family: var(--dp-font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lg-prose p,
.lg-prose li,
.lg-prose td {
  color: var(--dp-text-muted);
  font-size: 15px;
  line-height: 1.7;
}

.lg-prose strong {
  color: var(--dp-text);
  font-weight: 600;
}

.lg-prose a {
  color: var(--dp-cyan-ice);
  text-decoration: underline;
  text-decoration-color: rgb(79 134 255 / 50%);
  text-underline-offset: 3px;
}

.lg-prose a:hover {
  color: var(--dp-text);
}

.lg-prose code {
  padding: 1px 6px;
  border-radius: 6px;
  background: rgb(79 134 255 / 14%);
  color: var(--dp-cyan-ice);
}

.lg-prose > section > * + * {
  margin-top: 14px;
}

.lg-prose ul {
  display: grid;
  gap: 8px;
  margin-bottom: 0;
  padding-left: 22px;
}

.lg-prose ul li::marker {
  color: var(--dp-cyan);
}

.lg-steps {
  display: grid;
  gap: 10px;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.lg-steps li {
  position: relative;
  padding: 14px 16px 14px 58px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 16px;
  background: rgb(255 255 255 / 2.5%);
  counter-increment: step;
}

.lg-steps li::before {
  content: counter(step);
  position: absolute;
  left: 14px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--dp-cyan), var(--dp-cyan-deep));
  color: var(--dp-text-inverse);
  font: 600 14px/1 var(--dp-font-display);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%);
}

.lg-note {
  padding: 14px 18px;
  border: 1px solid rgb(79 134 255 / 30%);
  border-radius: 16px;
  background: rgb(79 134 255 / 9%);
}

.lg-table {
  overflow-x: auto;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 16px;
}

.lg-table table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.lg-table th,
.lg-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
}

.lg-table th {
  font: 600 11px/1.3 var(--dp-font-display);
  font-stretch: 125%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dp-text-muted);
  background: rgb(255 255 255 / 3%);
}

.lg-table tr:last-child td {
  border-bottom: 0;
}

.lg-table td {
  font-size: 14px;
}

@media (width <= 900px) {
  .lg {
    padding-top: 120px;
  }

  .lg-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lg-toc {
    position: static;
  }
}