/* eightforex — design tokens, DARK. Aligned with Brand Guidelines v1.0.1 (Maya, 2026-10-19):
   values copied 1:1 from /workspace/branding/brand-guidelines/eightforex-tokens.css (Maya's --ef-* names),
   then (2) v1.0.1 project notes and (3) legacy aliases so the v4 generator keeps working.
   Fonts: local @font-face for offline renders; production loads Google Fonts per v1.0. */

/* ===== 1. Brand Guidelines v1.0.1 (verbatim, dark theme) ===== */
:root, [data-theme="dark"] {
  color-scheme: dark;
  /* brand (theme-independent) */
  --ef-green: #1CA638;
  --ef-green-rgb: 28, 166, 56;
  --ef-black: #000000;
  --ef-white: #FFFFFF;
  --ef-green-400: #3CC165;
  --ef-on-green: #0A0A0A;
  --ef-state-hover-overlay: rgba(0, 0, 0, 0.08);
  --ef-state-pressed-overlay: rgba(0, 0, 0, 0.12);
  --ef-green-tint-light: #E8F6EB;

  /* color: dark theme */
  --ef-color-bg: #0B0F0D;
  --ef-color-bg-sunken: #070A09;
  --ef-color-surface: #121815;
  --ef-color-surface-2: #18201C;
  --ef-color-surface-3: #1E2722;
  --ef-color-overlay: rgba(0, 0, 0, 0.64);
  --ef-color-border-subtle: #1F2823;
  --ef-color-border: #2A3530;
  --ef-color-border-strong: #3A4640;
  --ef-color-border-input: #5E6A64;
  --ef-color-text: #E9EEEB;
  --ef-color-text-2: #B4BFBA;
  --ef-color-text-muted: #8C9893;
  --ef-color-text-disabled: #5A6560;
  --ef-color-text-on-brand: #0A0A0A;
  --ef-color-text-inverse: #0B0F0D;
  --ef-color-link: #3CC165;
  --ef-color-focus-ring: #3CC165;
  --ef-color-primary: #1CA638;
  --ef-color-primary-hover: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)) #1CA638;
  --ef-color-primary-pressed: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)) #1CA638;
  --ef-color-primary-tint: rgba(28, 166, 56, 0.16);
  --ef-color-primary-tint-text: #3CC165;
  --ef-color-positive: #1CA638;
  --ef-color-positive-text: #3CC165;
  --ef-color-positive-tint: rgba(28, 166, 56, 0.16);
  --ef-color-negative: #E5484D;
  --ef-color-negative-text: #F0686C;
  --ef-color-negative-tint: rgba(229, 72, 77, 0.16);
  --ef-color-warning: #E0A100;
  --ef-color-warning-text: #F5B83D;
  --ef-color-warning-tint: rgba(224, 161, 0, 0.16);
  --ef-color-info: #3B9EFF;
  --ef-color-info-text: #6CB6FF;
  --ef-color-info-tint: rgba(59, 158, 255, 0.16);
  --ef-color-destructive: #E5484D;
  --ef-color-destructive-text: #F0686C;
  --ef-color-destructive-hover-bg: rgba(229, 72, 77, 0.16);
  --ef-color-destructive-pressed-bg: rgba(229, 72, 77, 0.24);
  --ef-color-chart-grid: rgba(255, 255, 255, 0.06);
  --ef-color-chart-axis: #8C9893;
  --ef-color-chart-crosshair: rgba(255, 255, 255, 0.24);
  --ef-color-chart-1: #1CA638;
  --ef-color-chart-2: #3B9EFF;
  --ef-color-chart-3: #E0A100;
  --ef-color-chart-4: #A78BFA;
  --ef-color-chart-5: #2EC4B6;
  --ef-color-chart-6: #8C9893;
  --ef-color-chart-area-from: rgba(28, 166, 56, 0.28);
  --ef-color-chart-area-to: rgba(28, 166, 56, 0);
  --ef-color-tooltip-bg: #000000;
  --ef-color-tooltip-border: #2F3833;
  --ef-color-tooltip-text: #E9EEEB;
  --ef-color-skeleton: #1B231F;
  --ef-color-skeleton-shine: #232D28;

  /* elevation: dark theme (surfaces get lighter + shadow deepens) */
  --ef-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --ef-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --ef-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.55);
  --ef-shadow-4: 0 24px 64px rgba(0, 0, 0, 0.65);
  --ef-highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* typography */
  --ef-font-family-heading: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ef-font-family-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ef-font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ef-font-numeric: tabular-nums;
  --ef-font-weight-regular: 400;
  --ef-font-weight-medium: 500;
  --ef-font-weight-semibold: 600;
  --ef-font-weight-bold: 700;
  --ef-font-weight-extrabold: 800;
  --ef-font-tracking-tight: -0.01em;
  --ef-font-tracking-normal: 0;
  --ef-font-tracking-caps: 0.04em;
  --ef-font-tracking-logo-sub: 0.2em;
  --ef-type-display: 800 56px/64px var(--ef-font-family-heading); --ef-type-display-tracking: -0.02em;
  --ef-type-h1: 800 40px/48px var(--ef-font-family-heading); --ef-type-h1-tracking: -0.01em;
  --ef-type-h2: 700 28px/36px var(--ef-font-family-heading); --ef-type-h2-tracking: -0.01em;
  --ef-type-h3: 700 20px/28px var(--ef-font-family-heading); --ef-type-h3-tracking: -0.01em;
  --ef-type-h4: 700 16px/24px var(--ef-font-family-heading); --ef-type-h4-tracking: 0;
  --ef-type-body-lg: 400 18px/28px var(--ef-font-family-body); --ef-type-body-lg-tracking: 0;
  --ef-type-body: 400 16px/24px var(--ef-font-family-body); --ef-type-body-tracking: 0;
  --ef-type-ui: 400 14px/20px var(--ef-font-family-body); --ef-type-ui-tracking: 0;
  --ef-type-label: 600 14px/20px var(--ef-font-family-body); --ef-type-label-tracking: 0;
  --ef-type-caption: 400 12px/16px var(--ef-font-family-body); --ef-type-caption-tracking: 0;
  --ef-type-overline: 600 11px/16px var(--ef-font-family-body); --ef-type-overline-tracking: 0.04em;
  --ef-type-kpi: 700 28px/36px var(--ef-font-family-body); --ef-type-kpi-tracking: -0.01em;
  --ef-type-num: 500 14px/20px var(--ef-font-family-body); --ef-type-num-tracking: 0;

  /* spacing: 8-pt grid (4px half-step allowed for tight UI) */
  --ef-space-0: 0px;
  --ef-space-0-5: 4px;
  --ef-space-1: 8px;
  --ef-space-1-5: 12px;
  --ef-space-2: 16px;
  --ef-space-3: 24px;
  --ef-space-4: 32px;
  --ef-space-5: 40px;
  --ef-space-6: 48px;
  --ef-space-8: 64px;
  --ef-space-10: 80px;
  --ef-space-12: 96px;
  --ef-space-16: 128px;

  /* radius */
  --ef-radius-xs: 4px;
  --ef-radius-sm: 6px;
  --ef-radius-md: 8px;
  --ef-radius-lg: 12px;
  --ef-radius-xl: 16px;
  --ef-radius-2xl: 24px;
  --ef-radius-full: 9999px;

  /* layout */
  --ef-max-width: 1200px;
  --ef-section-background: full-bleed (100vw); content stays inside max-width;
  /* desktop-ref: 1440x900 */
  /* mobile-ref: 390x844 */
  --ef-gutter-desktop: 32px;
  --ef-gutter-tablet: 24px;
  --ef-gutter-mobile: 16px;
  --ef-grid-columns-desktop: 12;
  --ef-grid-columns-mobile: 4;
  --ef-grid-gap-desktop: 24px;
  --ef-grid-gap-mobile: 16px;
  --ef-header-height-desktop: 80px;
  --ef-header-height-mobile: 56px;
  --ef-sidebar-width: 240px;
  --ef-bottom-nav-height: 64px;
  --ef-touch-target-min: 44px;
  --ef-breakpoint-sm: 480px;
  --ef-breakpoint-md: 760px;
  --ef-breakpoint-lg: 1024px;
  --ef-breakpoint-xl: 1440px;
  --ef-logo-height-desktop: 60px;
  --ef-logo-width-desktop: 172px;
  --ef-logo-height-mobile: 38px;
  --ef-logo-height-mobile-min: 32px;
  --ef-logo-height-mobile-max: 40px;
  --ef-trust-strip-columns-desktop: 4;
  --ef-trust-strip-columns-mobile: 2;
  --ef-leaderboard-columns-desktop: 12;
  --ef-calendar-columns-desktop: 12;
  --ef-logo-min-width: 100px;

  /* motion */
  --ef-duration-fast: 120ms;
  --ef-duration-base: 200ms;
  --ef-duration-slow: 320ms;
  --ef-duration-hero: 600ms;
  --ef-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ef-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* z-index */
  --ef-z-base: 0;
  --ef-z-sticky: 20;
  --ef-z-header: 40;
  --ef-z-dropdown: 50;
  --ef-z-overlay: 60;
  --ef-z-modal: 70;
  --ef-z-toast: 80;
  --ef-z-tooltip: 90;
}

/* Mobile type scale (<= 760px) */
@media (max-width: 760px) {
  :root, [data-theme] {
    --ef-type-display: 800 36px/44px var(--ef-font-family-heading);
    --ef-type-h1: 800 28px/36px var(--ef-font-family-heading);
    --ef-type-h2: 700 22px/30px var(--ef-font-family-heading);
    --ef-type-h3: 700 18px/26px var(--ef-font-family-heading);
    --ef-type-h4: 700 16px/24px var(--ef-font-family-heading);
    --ef-type-body-lg: 400 16px/26px var(--ef-font-family-body);
    --ef-type-body: 400 16px/24px var(--ef-font-family-body);
    --ef-type-ui: 400 15px/22px var(--ef-font-family-body);
    --ef-type-label: 600 15px/20px var(--ef-font-family-body);
    --ef-type-caption: 400 12px/16px var(--ef-font-family-body);
    --ef-type-overline: 600 11px/16px var(--ef-font-family-body);
    --ef-type-kpi: 700 22px/28px var(--ef-font-family-body);
    --ef-type-num: 500 14px/20px var(--ef-font-family-body);
  }
}

/* ===== 2. v1.0.1 notes (project values; formerly "overrides pending v1.0.1", now in Maya's v1.0.1 tokens) =====
   - Primary: bg #1CA638, label #0A0A0A (6.19:1). Hover = 8% black overlay (= #1A9934, 5.33:1). Pressed = 12% black overlay (= #199231, 4.90:1). Focus 2px #3CC165, 2px offset.
   - Header 80px desktop (logo 172x60) / 56px mobile (logo 36-40px). Touch targets >= 44px.
   - Calendar caption "Times shown in your local time (GMT+7)." — offset is dynamic (visitor timezone).
   - Trust strip: one line on desktop, 2x2 on mobile. Content max 1200px; section backgrounds full-bleed. */
:root, [data-theme="dark"] {
  --ef-green-hover-computed: #1A9934;   /* reference only: flattened 8% overlay */
  --ef-green-pressed-computed: #199231; /* reference only: flattened 12% overlay */
}

/* ===== 3. Legacy aliases (v4 generator names -> v1.0 tokens) ===== */
:root, [data-theme="dark"] {
  --ef-bg: var(--ef-color-bg);
  --ef-bg-2: var(--ef-color-bg-sunken);
  --ef-surface: var(--ef-color-surface);
  --ef-surface-2: var(--ef-color-surface-2);
  --ef-surface-3: var(--ef-color-surface-3);
  --ef-border: var(--ef-color-border);
  --ef-border-strong: var(--ef-color-border-strong);
  --ef-text: var(--ef-color-text);
  --ef-text-2: var(--ef-color-text-2);
  --ef-text-3: var(--ef-color-text-muted);
  --ef-loss: var(--ef-color-negative);
  --ef-loss-text: var(--ef-color-negative-text);
  --ef-green-text: var(--ef-color-positive-text);
  --ef-green-tint: var(--ef-color-primary-tint);
  --ef-green-ring: rgba(var(--ef-green-rgb), .35);
  --ef-sample: var(--ef-color-text-muted);
  --ef-font-head: var(--ef-font-family-heading);
  --ef-font-ui: var(--ef-font-family-body);
  --ef-num: var(--ef-font-numeric);
  --ef-ls-head: var(--ef-font-tracking-tight);
  --ef-ls-eyebrow: var(--ef-font-tracking-caps);
  --ef-content-max: var(--ef-max-width);   /* 1200px */
  --ef-page-max: 100%;                     /* full-bleed sections */
  --ef-green-hover-overlay: var(--ef-state-hover-overlay);
  --ef-green-pressed-overlay: var(--ef-state-pressed-overlay);
  --ef-header-h: var(--ef-header-height-desktop);
  --ef-header-h-m: var(--ef-header-height-mobile);
  --ef-touch-min: var(--ef-touch-target-min);
  --ef-dur-fast: var(--ef-duration-fast);
  --ef-r-sm: var(--ef-radius-md); --ef-r-md: var(--ef-radius-lg); --ef-r-lg: var(--ef-radius-xl); --ef-r-xl: var(--ef-radius-2xl); --ef-r-pill: var(--ef-radius-full);
  /* icons (v1.0 §7): Lucide outline, stroke 1.5 @20–24px, 2 @16px; sizes 16/20/24; currentColor; icon+label gap 8 */
  --ef-icon-sm: 16px; --ef-icon-md: 20px; --ef-icon-lg: 24px; --ef-icon-stroke: 1.5; --ef-icon-stroke-sm: 2; --ef-icon-gap: 8px;
}
@media (prefers-reduced-motion: reduce) { :root, [data-theme] { --ef-duration-fast:0ms; --ef-duration-base:0ms; --ef-duration-slow:0ms; --ef-duration-hero:0ms; } }

/* Eight Forex Home v2 (dark). Mobile-first. Tokens: tokens-dark.css (Brand Guidelines v1.0.1), prepended by the build. */
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:Montserrat;font-style:normal;font-weight:600 800;font-display:swap;src:url(../fonts/montserrat-latin.woff2) format('woff2')}
/* Logo 1.5x (Taufan, 2026-10-19): header logo 60->90px desktop, 38->57px mobile; footer 22->33px. Header grows to 104/72px. */
:root{--hdr-h-d:104px;--hdr-h-m:72px;--logo-h-d:90px;--logo-h-m:57px;--logo-h-f:33px}
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ef-color-bg-sunken);scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h-m) + 8px)}
body{background:var(--ef-color-bg);color:var(--ef-color-text);font:var(--ef-type-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.n,td,.ev .r,.ev .t{font-variant-numeric:tabular-nums}
.ic{flex:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--ef-color-surface-2);padding:10px 14px;border-radius:8px}
.skip:focus{top:8px}
:focus-visible{outline:2px solid var(--ef-color-focus-ring);outline-offset:2px;border-radius:4px}
.w{max-width:calc(var(--ef-max-width) + 2*var(--ef-gutter-mobile));margin:0 auto;padding:0 var(--ef-gutter-mobile)}
h1,h2,h3,h4{font-family:var(--ef-font-family-heading)}
h1{font:800 clamp(30px,9.4vw,36px)/1.22 var(--ef-font-family-heading);letter-spacing:-.02em}
h2{font:800 28px/36px var(--ef-font-family-heading);letter-spacing:-.01em}
h3{font:700 18px/26px var(--ef-font-family-heading);letter-spacing:-.01em}
.lead{font:400 16px/26px var(--ef-font-family-body);color:var(--ef-color-text-2)}
.cap{font:var(--ef-type-caption);color:var(--ef-color-text-muted)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:var(--ef-type-overline);letter-spacing:var(--ef-type-overline-tracking);text-transform:uppercase;color:var(--ef-color-primary-tint-text)}
.eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ef-green);box-shadow:0 0 0 4px var(--ef-color-primary-tint)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--ef-radius-md);font:var(--ef-type-label);border:1px solid var(--ef-color-border-strong);color:var(--ef-color-text);background:transparent;white-space:nowrap;cursor:pointer;transition:background var(--ef-duration-fast) var(--ef-ease-out),border-color var(--ef-duration-fast) var(--ef-ease-out)}
.btn:hover{background:var(--ef-color-surface-2);border-color:#4A5650}
.btn:active{background:var(--ef-color-surface-3)}
.btn.pri{background:var(--ef-green);border-color:var(--ef-green);color:var(--ef-on-green)}
.btn.pri:hover{background:linear-gradient(var(--ef-state-hover-overlay),var(--ef-state-hover-overlay)),var(--ef-green)}
.btn.pri:active{background:linear-gradient(var(--ef-state-pressed-overlay),var(--ef-state-pressed-overlay)),var(--ef-green)}
.btn:focus-visible{outline:2px solid var(--ef-color-focus-ring);outline-offset:2px;border-radius:var(--ef-radius-md)}
.btn.lg{min-height:48px;padding:0 24px;font:600 16px/24px var(--ef-font-family-body)}
.btn .ic{width:20px;height:20px}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--ef-radius-sm);border:1px dashed var(--ef-color-border-strong);color:var(--ef-color-text-muted);font:600 11px/16px var(--ef-font-family-body);background:rgba(11,15,13,.72);white-space:nowrap}
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;border:1px solid var(--ef-color-border-strong);color:var(--ef-color-text-2);font:600 11.5px/1 var(--ef-font-family-body);background:rgba(11,15,13,.6);white-space:nowrap}
.badge .ic{width:16px;height:16px}
.card{background:var(--ef-color-surface);border:1px solid var(--ef-color-border);border-radius:var(--ef-radius-lg)}
/* header */
.hdr{position:sticky;top:0;z-index:var(--ef-z-header);height:var(--hdr-h-m);background:var(--ef-color-surface);border-bottom:1px solid var(--ef-color-border)}
.hdr .w{height:100%;display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;min-height:44px}
.logo img{height:var(--logo-h-m);width:auto}
.hdr .logo img{height:var(--logo-h-m)}
@media (max-width:399px){.hdr .w{gap:6px;padding:0 14px}}
@media (max-width:340px){.hdr .logo img{height:45px}}  /* spec v3: 45px logo at <=340px, 57px above */
.hdr .start,.burger{flex:none}
.hdr .logo{flex:none}
.hdr .sp{flex:1}
.nav,.hdr .login{display:none}
.hdr .start{min-height:44px;padding:0 18px;font-size:15px}
@media (max-width:399px){.hdr .w{gap:8px}.hdr .start{padding:0 12px;font-size:14px}}
.burger{width:44px;height:44px;border-radius:var(--ef-radius-md);border:1px solid var(--ef-color-border-strong);display:flex;align-items:center;justify-content:center;transition:background var(--ef-duration-fast) var(--ef-ease-out)}
.burger:hover{background:var(--ef-color-surface-2)}
.burger .ic{width:20px;height:20px}.burger .i-x{display:none}
.burger[aria-expanded=true] .i-x{display:block}.burger[aria-expanded=true] .i-menu{display:none}
/* mobile menu */
.mmenu{position:fixed;top:var(--hdr-h-m);left:0;right:0;bottom:0;z-index:var(--ef-z-overlay);background:var(--ef-color-bg);padding:8px 20px 24px;display:flex;flex-direction:column;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity var(--ef-duration-base) var(--ef-ease-out),visibility 0s linear var(--ef-duration-base)}
.mmenu.open{opacity:1;visibility:visible;transition:opacity var(--ef-duration-base) var(--ef-ease-out)}
.mmenu nav a{display:flex;align-items:center;justify-content:space-between;min-height:61px;padding:0 4px;border-bottom:1px solid var(--ef-color-border);font:600 20px/1.2 var(--ef-font-family-heading);letter-spacing:-.01em}
.mmenu nav a .ic{width:20px;height:20px;color:var(--ef-color-text)}
.mmenu .acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
.mmenu .acts .btn{min-height:48px;font-size:15px}
.mmenu .cap{text-align:center;margin-top:14px;font-size:13px;color:var(--ef-color-text-muted)}
.mmenu .wm{margin:auto auto 0;padding-top:32px;height:auto;opacity:.35}.mmenu .wm img{height:24px;width:auto}
/* sections */
section{padding:64px 0}
.sh{margin-bottom:24px}.sh h2{margin-bottom:8px}.sh .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sh .row h2{margin-bottom:0}.sh .row+.lead{margin-top:8px}
.band{border-top:1px solid var(--ef-color-border)}
/* hero */
.hero{position:relative;padding:32px 0 48px;overflow:hidden}
.hero:before{content:"";position:absolute;top:-200px;right:-100px;width:700px;height:700px;background:radial-gradient(closest-side,rgba(28,166,56,.14),transparent);pointer-events:none}
.hgrid{position:relative;display:grid;grid-template-areas:"text" "trust" "vis" "note"}
.htext{grid-area:text}.trust{grid-area:trust}.hv{grid-area:vis}
.hero h1{margin:16px 0 14px}
.hero .lead{margin-bottom:24px}
.ctarow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.ctarow .note{display:flex;align-items:center;gap:6px;color:var(--ef-color-text-2);font:var(--ef-type-ui)}
.ctarow .note .ic{width:16px;height:16px;color:var(--ef-color-primary-tint-text)}
.trust{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-top:24px;padding-top:20px;border-top:1px solid var(--ef-color-border);list-style:none}
.trust li{display:flex;gap:8px;align-items:flex-start;color:var(--ef-color-text-2);font:15px/22px var(--ef-font-family-body)}
.trust .ic{width:16px;height:16px;margin-top:3px;color:var(--ef-color-primary-tint-text)}
.trust .sep{display:none}
.hv{position:relative;margin-top:32px}
.hnote{grid-area:note;margin-top:34px;color:var(--ef-color-text-muted)}  /* hero gain disclaimer, under the visual; clears the float card (bottom:-22px) on mobile */
.photo{position:relative;border-radius:var(--ef-radius-2xl);overflow:hidden;border:1px solid var(--ef-color-border-strong);box-shadow:var(--ef-shadow-2);aspect-ratio:4/3;background:var(--ef-color-surface)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,15,13,.6));pointer-events:none}
.photo .tag{position:absolute;top:12px;right:12px;z-index:2}
.float{position:absolute;z-index:3;left:12px;bottom:-22px;display:flex;gap:12px;align-items:center;padding:12px 14px;background:rgba(18,24,21,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--ef-color-border-strong);border-radius:var(--ef-radius-lg);box-shadow:var(--ef-shadow-1)}
.float .ico{width:36px;height:36px;border-radius:10px;background:var(--ef-color-primary-tint);color:var(--ef-color-primary-tint-text);display:flex;align-items:center;justify-content:center}
.float .ico .ic{width:20px;height:20px}
.float b{display:block;font:600 15px/1.25 var(--ef-font-family-body);font-variant-numeric:tabular-nums}
.float .syn{display:block;color:var(--ef-color-text-2);font-size:12.5px;line-height:1.5}
.chip{position:absolute;z-index:3;font:800 12px/1 var(--ef-font-family-body);letter-spacing:.06em;color:var(--ef-color-text);background:var(--ef-color-surface-2);border:1px solid var(--ef-color-border-strong);border-radius:8px;padding:7px 9px;box-shadow:var(--ef-shadow-1)}
.hv .chip{right:12px;bottom:-14px}
/* steps */
.steps{display:grid;gap:var(--ef-grid-gap-mobile);list-style:none}
.st{padding:16px;border-radius:var(--ef-radius-lg);background:var(--ef-color-surface);border:1px solid var(--ef-color-border)}
.st .num{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.st .num b{font:var(--ef-type-overline);letter-spacing:var(--ef-type-overline-tracking);text-transform:uppercase;color:var(--ef-color-primary-tint-text)}
.st .num .ic{width:20px;height:20px;color:var(--ef-color-text-muted)}
.st p,.fc p,.nc p{font:var(--ef-type-body);color:var(--ef-color-text-2);margin-top:4px}
.helper{display:flex;gap:10px;align-items:flex-start;margin-top:16px;color:var(--ef-color-text-muted);font:14px/24px var(--ef-font-family-body)}
.helper .ic{width:16px;height:16px;margin-top:4px}
/* leaderboard */
.lb{position:relative;overflow:hidden}
table{width:100%;border-collapse:collapse}
th{background:var(--ef-color-surface-2);font:var(--ef-type-overline);letter-spacing:var(--ef-type-overline-tracking);text-transform:uppercase;color:var(--ef-color-text-muted);text-align:left;padding:12px 8px;border-bottom:1px solid var(--ef-color-border);white-space:nowrap}
td{height:44px;padding:8px;font:var(--ef-type-num);font-size:14px;color:var(--ef-color-text);border-bottom:1px solid var(--ef-color-border-subtle);white-space:nowrap;transition:background var(--ef-duration-fast) var(--ef-ease-out),box-shadow var(--ef-duration-fast) var(--ef-ease-out)}
.r{text-align:right}
td.rk{width:22px;color:var(--ef-color-text-muted)}
.trd{display:flex;align-items:center;gap:8px;font-weight:500;min-height:44px}
.av{width:24px;height:24px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 10px/1 var(--ef-font-family-body);background:linear-gradient(135deg,#2f3833,#1b201d);border:1px solid var(--ef-color-border-strong)}
td .sc{font-weight:700}
.hide-m{display:none}
tbody tr:not(.bl):hover td{background:var(--ef-color-surface-2)}
tbody tr:not(.bl):hover td:first-child{box-shadow:inset 3px 0 0 var(--ef-green)}
tbody tr:not(.bl):hover .trd span:last-child,.trd:focus-visible span:last-child{text-decoration:underline;text-underline-offset:3px}
tr.bl td{filter:blur(8px);opacity:.55;user-select:none}
.lock{position:absolute;left:0;right:0;bottom:0;height:156px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding-bottom:22px;background:linear-gradient(180deg,rgba(18,24,21,0),rgba(18,24,21,.86) 38%,rgba(18,24,21,.97))}
.lock .cap{color:var(--ef-color-text-2)}
.lbnote{margin-top:12px;color:var(--ef-color-text-2)}
.lbcap{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13px;line-height:18px}
.lbcap .ic{width:16px;height:16px;margin-top:1px}
/* features */
.jgrid{display:flex;flex-direction:column}
.jgrid .ftext{order:1}.jgrid .devwrap{order:2}
.feat{display:grid;gap:var(--ef-grid-gap-mobile);list-style:none}
.fc{display:flex;gap:16px;align-items:flex-start;padding:16px;border-radius:var(--ef-radius-lg);background:var(--ef-color-surface);border:1px solid var(--ef-color-border)}
.fi{width:44px;height:44px;flex:none;border-radius:var(--ef-radius-lg);background:var(--ef-color-primary-tint);border:1px solid rgba(28,166,56,.3);color:var(--ef-color-primary-tint-text);display:flex;align-items:center;justify-content:center}
.fi .ic{width:24px;height:24px}
.devwrap{margin-top:24px}
.devs{position:relative;width:100%;max-width:560px;aspect-ratio:358/300}
.lap{position:absolute;left:0;top:6%;width:83.8%}
.lap .scr{position:relative;border:6px solid #2A3530;border-bottom-width:8px;border-radius:var(--ef-radius-xl) var(--ef-radius-xl) 0 0;overflow:hidden;background:#000;box-shadow:var(--ef-shadow-2)}
.lap .base{height:10px;margin:0 -7%;background:linear-gradient(#4a504c,#2a2f2c);border-radius:0 0 14px 14px}
.lap .base:after{content:"";display:block;width:20%;height:4px;margin:0 auto;background:#1a1e1c;border-radius:0 0 6px 6px}
.phn{position:absolute;right:0;top:14.7%;width:34%;border:5px solid #2A3530;border-radius:22px;overflow:hidden;background:#000;box-shadow:var(--ef-shadow-2)}
.scr img,.phn img{width:100%;height:auto}
.scrbox{position:relative}
.pl{position:absolute;background:#121815}
.pl svg{width:100%;height:100%}
.pl-d{left:21.016%;top:42.271%;width:43.75%;height:23.5%}
.pl-p{left:8.974%;top:58.338%;width:83.59%;height:16.35%}
.devs .chip{left:3%;top:0}
.devwrap .tag{margin-top:12px}
/* calendar */
.calh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--ef-color-border)}
.calh b{font:600 16px/24px var(--ef-font-family-body)}
.ev{display:grid;grid-template-columns:52px 54px 1fr auto;gap:12px;align-items:center;padding:0 16px;min-height:56px;border-bottom:1px solid var(--ef-color-border-subtle);font:15px/22px var(--ef-font-family-body)}
.evlist>.ev:last-child,.evmore .ev:last-child{border-bottom:0}
.evlist.has-more>.ev:last-of-type{border-bottom:1px solid var(--ef-color-border-subtle)}
.ev .t{font-weight:600}
.ev .x{display:none}
.evh{display:none}
.ccy{font:700 11.5px/1 var(--ef-font-family-body);letter-spacing:.04em;padding:5px 0;text-align:center;border-radius:6px;background:var(--ef-color-surface-2);border:1px solid var(--ef-color-border-strong);width:54px}
.imp{display:flex;gap:3px;align-items:flex-end;height:16px}
.imp i{width:4px;border-radius:2px;background:var(--ef-color-surface-3)}
.imp i:nth-child(1){height:8px}.imp i:nth-child(2){height:12px}.imp i:nth-child(3){height:16px}
.imp i.on{background:var(--ef-color-text)}
.evmore[hidden]{display:none}
.calcap{margin-top:14px}
.ctr{display:flex;justify-content:center;margin-top:16px}
.ctr .btn .ic{width:16px;height:16px;transition:transform var(--ef-duration-base) var(--ef-ease-out)}
.ctr .btn[aria-expanded=true] .ic{transform:rotate(180deg)}
/* news */
.news{display:grid;gap:var(--ef-grid-gap-mobile);list-style:none}
.news li[hidden]{display:none}
.nc{display:flex;flex-direction:column;height:100%;background:var(--ef-color-surface);border:1px solid var(--ef-color-border);border-radius:var(--ef-radius-lg);overflow:hidden;transition:transform var(--ef-duration-fast) var(--ef-ease-out),border-color var(--ef-duration-fast) var(--ef-ease-out),background var(--ef-duration-fast) var(--ef-ease-out),box-shadow var(--ef-duration-fast) var(--ef-ease-out)}
.nc .im{aspect-ratio:16/5;background:linear-gradient(135deg,var(--ef-color-surface-3),var(--ef-color-surface-2));display:flex;align-items:center;justify-content:center;color:var(--ef-color-border-strong);border-bottom:1px solid var(--ef-color-border)}
.nc .im .ic{width:24px;height:24px}
.nc .bd{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.nc .src{margin-top:auto;padding-top:6px;display:flex;align-items:center;gap:6px;color:var(--ef-color-text-muted);font-size:12.5px}
.nc .src .ic{width:16px;height:16px}
.nc:hover{border-color:var(--ef-color-border-strong);background:var(--ef-color-surface-2);transform:translateY(-2px);box-shadow:var(--ef-shadow-2)}
.nc:hover h3,.nc:focus-visible h3{text-decoration:underline;text-underline-offset:3px}
.newscap{margin-top:14px}
.ctr .btn.more .ic{transform:none}
/* faq */
.fgrid{display:grid;gap:24px}
.faq{display:grid;gap:var(--ef-grid-gap-mobile)}
.q{background:var(--ef-color-surface);border:1px solid var(--ef-color-border);border-radius:var(--ef-radius-lg);transition:border-color var(--ef-duration-fast) var(--ef-ease-out),background var(--ef-duration-fast) var(--ef-ease-out)}
.q:hover{border-color:var(--ef-color-border-strong)}
.q summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:16px 20px;font:600 16px/24px var(--ef-font-family-body);cursor:pointer;border-radius:var(--ef-radius-lg)}
.q summary::-webkit-details-marker{display:none}
.q summary .ic{width:20px;height:20px;color:var(--ef-color-text-2)}
.q .i-minus{display:none}.q[open] .i-minus{display:block}.q[open] .i-plus{display:none}
.q[open]{border-color:var(--ef-color-border-strong);background:var(--ef-color-surface-2)}
.q .qa{padding:0 20px 20px;margin-top:-4px;color:var(--ef-color-text-2);font:var(--ef-type-body)}
/* company */
.about{display:grid;gap:24px}
.about p{color:var(--ef-color-text-2);font:16px/26px var(--ef-font-family-body);margin-bottom:14px}
.about .btn{margin-top:8px}
.about .btn .ic{width:20px;height:20px}
.contact{padding:22px;display:flex;flex-direction:column;gap:6px;align-self:start}
.contact h3{margin-bottom:4px}
.contact li{display:flex;gap:12px;align-items:center;min-height:36px;color:var(--ef-color-text-2);font:var(--ef-type-body);list-style:none}
.contact .ic{width:20px;height:20px;color:var(--ef-color-text-muted)}
.contact a{color:var(--ef-color-text);font-weight:500;min-height:44px;display:flex;align-items:center}
.contact a:hover{text-decoration:underline;text-underline-offset:3px}
/* final cta */
.cta{position:relative;overflow:hidden;text-align:center;padding:48px 24px;border-radius:var(--ef-radius-2xl);background:radial-gradient(120% 140% at 50% 0%,rgba(28,166,56,.16),transparent 60%),var(--ef-color-surface);border:1px solid var(--ef-color-border-strong)}
.cta h2{margin-bottom:10px}.cta .lead{margin:0 auto 24px;max-width:520px}
.cta .badge{margin-top:18px}
/* footer */
footer{border-top:1px solid var(--ef-color-border);background:var(--ef-color-bg-sunken);padding:40px 0 28px}
.fcols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 28px}
.fcols .fwm img{height:var(--logo-h-f);width:auto}
.fcols h2{font:600 13px/20px var(--ef-font-family-heading);color:var(--ef-color-text-2);margin-bottom:8px}
.fcols ul{list-style:none}
.fcols li{font:var(--ef-type-ui);color:var(--ef-color-text-muted);min-height:30px;display:flex;align-items:center}
.fcols a{min-height:44px;display:flex;align-items:center}
.fcols a:hover{color:var(--ef-color-text);text-decoration:underline;text-underline-offset:3px}
.disc{border-top:1px solid var(--ef-color-border);padding-top:20px;font:var(--ef-type-caption);color:var(--ef-color-text-muted)}
.disc b{display:block;color:var(--ef-color-text-2);font-weight:600;margin-bottom:6px}
.disc:empty{display:none}
.fbot{display:flex;align-items:center;justify-content:space-between;margin-top:20px;font:var(--ef-type-caption);color:var(--ef-color-text-muted)}
.fbot img{width:28px;height:28px}
/* motion (JS adds .anim only when motion is allowed) */
.anim .lbrows tr{opacity:0;transform:translateY(12px)}
.anim .lbrows tr.in{opacity:1;transform:none;transition:opacity 600ms var(--ef-ease-out),transform 600ms var(--ef-ease-out)}
.anim .lbrows tr.bl.in{opacity:1}
.anim .pl .bar{transform:scaleY(0);transform-box:fill-box}
.anim .pl .bar.up{transform-origin:50% 100%}.anim .pl .bar.dn{transform-origin:50% 0}
.anim .pl.in .bar{transform:scaleY(1);transition:transform var(--bar-dur,760ms) var(--ef-ease-out)}
.anim .float .syn{opacity:0}
.anim .float .syn.in{opacity:1;transition:opacity 200ms var(--ef-ease-out)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:0ms!important;animation-duration:0ms!important}.nc:hover{transform:none}}
/* tablet */
@media (min-width:760px){
  .w{padding:0 var(--ef-gutter-tablet);max-width:calc(var(--ef-max-width) + 2*var(--ef-gutter-tablet))}
  .trust{grid-template-columns:repeat(4,auto);justify-content:start;gap:12px 28px}
  .hide-m{display:table-cell}
  th,td{padding-left:12px;padding-right:12px}
  .steps,.news{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nc .im{aspect-ratio:16/8}
  .fcols{grid-template-columns:2fr 1fr 1fr 1fr}
  .ev .x{display:block}
  .ev{grid-template-columns:72px 64px 1fr 72px 80px 80px 80px}
  .evh{display:grid;min-height:40px;background:var(--ef-color-surface-2);font:var(--ef-type-overline);letter-spacing:var(--ef-type-overline-tracking);text-transform:uppercase;color:var(--ef-color-text-muted)}
  .ev .r{text-align:right}
}
/* desktop */
@media (min-width:1024px){
  html{scroll-padding-top:calc(var(--hdr-h-d) + 8px)}
  .w{padding:0 var(--ef-gutter-desktop);max-width:calc(var(--ef-max-width) + 2*var(--ef-gutter-desktop))}
  .hdr{height:var(--hdr-h-d)}
  .hdr .w{gap:20px}
  .logo img,.hdr .logo img{height:var(--logo-h-d)}
  .hdr .start,.hdr .login{min-height:40px;padding:0 16px;font-size:14px}
  .hdr .login{display:inline-flex}
  .mmenu{top:var(--hdr-h-d)}
  h1{font:var(--ef-type-display);letter-spacing:var(--ef-type-display-tracking)}
  h2{font:var(--ef-type-h1);letter-spacing:var(--ef-type-h1-tracking)}
  h3{font:var(--ef-type-h3);letter-spacing:var(--ef-type-h3-tracking)}
  .lead{font:var(--ef-type-body-lg)}
  section{padding:96px 0}
  .sh{margin-bottom:36px}
  .hero{padding:72px 0 96px}
  .hgrid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ef-grid-gap-desktop);grid-template-areas:"text text text text text text vis vis vis vis vis vis" "text text text text text text note note note note note note" "trust trust trust trust trust trust trust trust trust trust trust trust";align-items:center}
  .hero h1{margin:20px 0 18px}.hero .lead{margin-bottom:32px;max-width:540px}
  .hv{margin:0}
  .hnote{margin-top:12px}
  .photo{aspect-ratio:1/1.02}
  .float{left:-36px;bottom:40px}
  .hv .chip{right:-14px;top:64px;bottom:auto}
  .trust{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;margin-top:56px;padding:16px 20px;border:1px solid var(--ef-color-border);border-radius:var(--ef-radius-lg);background:rgba(18,24,21,.6)}
  .trust li{align-items:center;font:var(--ef-type-ui);white-space:nowrap}
  .trust .ic{margin-top:0}
  .trust .sep{display:block;width:4px;height:4px;border-radius:50%;background:var(--ef-color-border-strong)}
  .steps,.news{gap:var(--ef-grid-gap-desktop)}
  .st,.fc{padding:24px}
  .st p,.fc p,.nc p{font:var(--ef-type-ui)}
  .nc .bd{padding:24px}
  .helper{font:var(--ef-type-caption);align-items:center}.helper .ic{margin-top:0}
  .lb th,.lb td{padding-left:20px;padding-right:20px}
  td{height:40px}
  td.rk{width:56px}
  .av{width:28px;height:28px;font-size:11px}.trd{gap:10px}
  .lbcap{font:var(--ef-type-caption)}
  .jgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ef-grid-gap-desktop);align-items:center}
  .jgrid .devwrap{order:0;grid-column:1/span 7;margin:0}
  .jgrid .ftext{order:0;grid-column:9/span 4}
  .devs{max-width:none;aspect-ratio:686/405}
  .lap{width:72.9%;top:7%}
  .phn{width:26%;top:15.3%;right:-.9%;border-width:7px;border-radius:30px}
  .devs .chip{left:2.5%;top:-1%}
  .ev{grid-template-columns:96px 110px 1fr 120px 130px 130px 130px;gap:16px;padding:0 24px}
  .calh{padding:16px 24px}
  .fgrid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ef-grid-gap-desktop);align-items:start}
  .fgrid>:first-child{grid-column:1/span 4}.fgrid>:last-child{grid-column:5/span 8}
  .faq{gap:var(--ef-space-2)}
  .about{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ef-grid-gap-desktop)}
  .about>:first-child{grid-column:1/span 7}.about>:last-child{grid-column:9/span 4}
  .about p{font:var(--ef-type-body)}
  .about .sh{margin-bottom:16px}
  .fcols li,.fcols a{min-height:28px}
  .fcols li{margin-bottom:6px}
  .cta{padding:72px 24px}
  footer{padding:56px 0 36px}
  .fcols{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ef-grid-gap-desktop);margin-bottom:36px}
  .fcols>:first-child{grid-column:span 6}.fcols>:not(:first-child){grid-column:span 2}
  .fbot img{width:32px;height:32px}
}
@media (min-width:1280px){
  .nav{display:flex;gap:0;margin-left:4px}
  .nav a{white-space:nowrap;padding:8px 10px;min-height:40px;display:flex;align-items:center;border-radius:var(--ef-radius-md);font:500 14px/20px var(--ef-font-family-body);color:var(--ef-color-text-2);border:1px solid transparent;transition:background var(--ef-duration-fast) var(--ef-ease-out),color var(--ef-duration-fast) var(--ef-ease-out)}
  .nav a:hover{background:var(--ef-color-primary-tint);color:var(--ef-color-primary-tint-text)}
  .burger,.mmenu{display:none}
}