/* VLens webfonts.
   Brand typeface is Visby CF (licensed, Connary Fagen) - font files NOT yet provided.
   Per the CI master file, Poppins is the approved web substitute for Visby.
   When Visby .woff2 files arrive, add @font-face rules here and update
   --font-display in tokens/typography.css. */

/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-400-arabic.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic-ext */

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-400-latin-ext.woff2") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-400-latin.woff2") format('woff2');
  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;
}
/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-500-arabic.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic-ext */

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-500-latin-ext.woff2") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-500-latin.woff2") format('woff2');
  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;
}
/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-600-arabic.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic-ext */

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-600-latin-ext.woff2") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-600-latin.woff2") format('woff2');
  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;
}
/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-400-latin-ext.woff2") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-400-latin.woff2") format('woff2');
  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;
}
/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-400-latin-ext.woff2") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-400-latin.woff2") format('woff2');
  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;
}
/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-400-latin-ext.woff2") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-400-latin.woff2") format('woff2');
  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;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500-latin.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500-latin-ext.woff2") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500-latin.woff2") format('woff2');
  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;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600-latin.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600-latin-ext.woff2") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600-latin.woff2") format('woff2');
  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;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700-latin.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700-latin-ext.woff2") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700-latin.woff2") format('woff2');
  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;
}


/* VLens color tokens - from the official CI master file (2023).
   Black dominates (~60%); Eucalyptus is the scarce "verified" signal (~14%);
   Iris + Catalina add depth for gradients and illustration only. */

:root {
  /* ── Base palette ───────────────────────────────────────── */
  --piano-black: #000000;
  --eucalyptus: #39F1AD;      /* signal of verification - keep scarce */
  --logo-green: #00E192;      /* embedded in logo artwork only - never repaint */
  --iris: #6C40CA;
  --catalina: #093176;
  --cool-gray: #B0B4BF;
  --white: #F4F6F8;
  --panel: #0A0D12;           /* raised dark surface */

  /* ── Semantic: surfaces ─────────────────────────────────── */
  --surface-page: var(--piano-black);
  --surface-panel: var(--panel);
  --surface-card: var(--panel);
  --surface-inverse: #FFFFFF;       /* on-white contexts (print, docs) */
  --surface-accent: var(--eucalyptus);

  /* ── Semantic: text ─────────────────────────────────────── */
  --text-primary: var(--white);
  --text-secondary: var(--cool-gray);
  --text-on-accent: #00130B;        /* near-black green-tinted ink on Eucalyptus */
  --text-on-inverse: #0A0D12;
  --text-accent: var(--eucalyptus);

  /* ── Semantic: borders & lines ──────────────────────────── */
  --border-subtle: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.22);
  --border-accent: var(--eucalyptus);

  /* ── Semantic: states ───────────────────────────────────── */
  --state-success: var(--eucalyptus);
  --state-danger: #E5484D;
  --state-warning: #F5C518;
  --focus-ring: rgba(57, 241, 173, 0.45);

  /* ── Gradient - social tiles & campaign art ONLY ────────── */
  --gradient-signature: linear-gradient(135deg, #39F1AD, #6C40CA); /* @kind color */
}

/* VLens typography tokens.
   Visby CF is the official brand typeface (licensed) - Poppins is the
   approved substitute until Visby files are provided.
   Inter handles body & UI. IBM Plex Sans Arabic carries Arabic with equal
   weight - Arabic is an original, never a translation. */

:root {
  /* ── Families ───────────────────────────────────────────── */
  --font-display: 'Poppins', 'Visby CF', system-ui, sans-serif;  /* headlines, lockups */
  --font-body: 'Inter', system-ui, sans-serif;                   /* body, UI, captions */
  --font-arabic: 'IBM Plex Sans Arabic', 'Inter', sans-serif;    /* all Arabic copy */
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;        /* hex codes, API keys */

  /* ── Scale (px) ─────────────────────────────────────────── */
  --fs-display-xl: 56px;   /* hero headlines */
  --fs-display: 40px;      /* section headlines */
  --fs-title: 28px;        /* card / page titles */
  --fs-subtitle: 20px;     /* leads, subtitles */
  --fs-body: 16px;         /* default body & UI */
  --fs-small: 14px;        /* secondary UI */
  --fs-caption: 12px;      /* captions, labels */

  /* ── Weights ────────────────────────────────────────────── */
  --fw-display: 700;       /* @kind font */ /* Poppins bold for heroes */
  --fw-heading: 600;       /* @kind font */ /* Poppins semibold for titles */
  --fw-medium: 500;        /* @kind font */
  --fw-body: 400;          /* @kind font */

  /* ── Rhythm ─────────────────────────────────────────────── */
  --lh-display: 1.15;      /* @kind font */
  --lh-heading: 1.25;      /* @kind font */
  --lh-body: 1.6;          /* @kind font */ /* per CI: Inter line-height 1.6 */
  --ls-display: -0.01em;   /* slight tightening on headlines */
  --ls-label: 0.18em;      /* uppercase eyebrow labels */
}

/* VLens spacing, radius, border & elevation tokens.
   Derived from measured usage in the CI guidelines document (boards 18px,
   cards 14-16px, chips 12px; depth is flat - 1px hairlines on dark panels,
   no drop shadows). Flagged as DERIVED, not explicitly specified in the CI. */

:root {
  /* ── Spacing (4px base) ─────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ── Corner radii ───────────────────────────────────────── */
  --radius-sm: 8px;        /* inputs, chips, small controls */
  --radius-md: 12px;       /* buttons, tags */
  --radius-lg: 16px;       /* cards, swatches */
  --radius-xl: 18px;       /* boards, large panels */
  --radius-pill: 999px;

  /* ── Borders ────────────────────────────────────────────── */
  --border-width: 1px;     /* hairlines everywhere; depth comes from borders, not shadows */

  /* ── Elevation ──────────────────────────────────────────── */
  /* The brand is FLAT on dark: panels separate via --surface-panel +
     --border-subtle. No drop shadows on dark surfaces. */
  --shadow-none: none;
  --shadow-inverse: 0 2px 12px rgba(10, 13, 18, 0.08);  /* on-white contexts only */
}

/* scroll-driven demos (pinned, scrubbed by scroll) */
.pin-track { height: 780vh; }
/* v1.6 - Apple-style title reveal */
.tw-title { position: relative; z-index: 6; }
.tw-zoom { position: fixed; inset: 0; z-index: 61; pointer-events: none; display: none; overflow: hidden; }
.tw-zoom-word { position: absolute; margin: 0; }
.tw-fill { background-image: linear-gradient(118deg, #39F1AD 8%, #A9F8D6 20%, #39F1AD 34%, #6C40CA 60%, #093176 80%, #39F1AD 97%); background-size: 260% 260%; -webkit-background-clip: text; background-clip: text; color: transparent; }
html.theme-light .tw-fill { background-image: linear-gradient(118deg, #0BAE78 8%, #39F1AD 22%, #0BAE78 36%, #6C40CA 62%, #093176 82%, #0BAE78 97%); }
.scroll-cue { position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 7px; z-index: 9; pointer-events: none; width: max-content; padding: 10px 22px 12px; border-radius: 999px; background: rgba(5, 7, 10, 0.55); border: 1px solid rgba(57, 241, 173, 0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.scroll-cue .sc-txt { font-size: 0.92rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #F4F6F8; }
html[dir="rtl"] .scroll-cue .sc-txt { letter-spacing: 0; font-size: 1.08rem; }
.scroll-cue i { width: 14px; height: 14px; border-right: 3px solid var(--accent); border-bottom: 3px solid var(--accent); transform: rotate(45deg); animation: cueBob 1.5s ease-in-out infinite; }
.scroll-cue i + i { margin-top: -8px; animation-delay: 0.15s; }
.scroll-cue { padding: 14px 28px 16px; gap: 9px; border-color: rgba(57, 241, 173, 0.5); background: rgba(5, 7, 10, 0.72); transition: box-shadow 0.3s, opacity 0.25s linear; will-change: opacity; }
.scroll-cue .sc-txt { font-size: 1rem; text-transform: none; letter-spacing: 0.02em; }
html[dir="rtl"] .scroll-cue .sc-txt { font-size: 1.15rem; }
.scroll-cue.nudge { animation: cuePulse 1.1s ease-in-out infinite; }
@keyframes cuePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(57, 241, 173, 0); } 50% { box-shadow: 0 0 0 12px rgba(57, 241, 173, 0.22); } }
.skip-btn { position: fixed; top: 84px; inset-inline-end: 18px; z-index: 62; display: none; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(57, 241, 173, 0.55); background: rgba(5, 7, 10, 0.74); color: #F4F6F8; font-family: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color 0.2s, color 0.2s; }
.skip-btn.on { display: inline-flex; }
.skip-btn:hover { border-color: var(--accent); color: var(--accent); }
.skip-btn i { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -4px; }
html.theme-light .skip-btn { background: rgba(255, 255, 255, 0.88); color: #0A0D12; border-color: rgba(11, 174, 120, 0.6); }
@media (max-width: 700px) { .skip-btn { top: 78px; padding: 10px 14px; font-size: 0.84rem; } }
@keyframes cueBob { 0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.3; } 50% { transform: translateY(6px) rotate(45deg); opacity: 1; } }
.demo-prog { position: absolute; top: 14px; bottom: 14px; inset-inline-end: 7px; width: 4px; border-radius: 4px; background: rgba(127, 138, 150, 0.30); opacity: 0; transition: opacity 0.35s; z-index: 40; pointer-events: none; }
.demo-prog i { position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: var(--accent); border-radius: 4px; }
@keyframes owFlow { 0% { background-position: 10% 30%; } 100% { background-position: 90% 70%; } }
.tw-overlay { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0; visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 30px; background-image: linear-gradient(118deg, #39F1AD 8%, #A9F8D6 20%, #39F1AD 34%, #6C40CA 60%, #093176 80%, #39F1AD 97%); background-size: 300% 300%; animation: owFlow 8s ease-in-out infinite alternate; }
html.theme-light .tw-overlay { background-image: linear-gradient(118deg, #0BAE78 8%, #39F1AD 22%, #0BAE78 36%, #6C40CA 62%, #093176 82%, #0BAE78 97%); }
.tw-overlay .sc-txt { font-size: 0.95rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.96); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
html[dir="rtl"] .tw-overlay .sc-txt { letter-spacing: 0; font-size: 1.1rem; }
.tw-overlay i { width: 15px; height: 15px; border-right: 3px solid rgba(255, 255, 255, 0.96); border-bottom: 3px solid rgba(255, 255, 255, 0.96); transform: rotate(45deg); animation: cueBob 1.5s ease-in-out infinite; margin-top: 8px; }
.tw-overlay i + i { margin-top: -7px; animation-delay: 0.15s; }
.pin-inner { position: -webkit-sticky; position: sticky; top: 78px; }
#demo.scan-section { padding: 50px 0 130px; }
#contracting { padding: 50px 0 130px; }
.replay { display: none; }
@media (max-width: 900px) { .pin-track { height: 640vh; } }