/* critical.bundle.css — generated by scripts/build-css.mjs — do not edit */

/* ===== tokens.css ===== */
:root {
  /* Layout */
  --n7-page-width: 1440px;
  --n7-container-pad: 80px;

  /* Z-index stack */
  --n7-z-nav: 100;
  --n7-z-balance-card: 60;
  --n7-z-activity-card: 40;
  --n7-z-hero-photo: 1;
  --n7-z-hero-glow: 0;

  /* Colors */
  /* Figma palette */
  --n7-ink-000D12: #000D12;
  --n7-gray-0D0D0C: #0D0D0C;
  --n7-gray-0B0B0B: #0B0B0B;
  --n7-gray-0F0F0F: #0F0F0F;
  --n7-gray-1D1D1D: #1D1D1D;
  --n7-gray-1B1B1B: #1B1B1B;
  --n7-blue-568EB4: #568EB4;
  --n7-offwhite-FCFEF5: #FCFEF5;
  --n7-offwhite-F5F5F5: #F5F5F5;
  --n7-surface-F8F8F8: #F8F8F8;
  --n7-gray-D9D9D9: #D9D9D9;
  --n7-gray-E7E7E7: #E7E7E7;
  --n7-white: #FFFFFF;
  --n7-white-70: rgba(255, 255, 255, 0.7);
  --n7-white-40: rgba(255, 255, 255, 0.4);
  --n7-snow-FFFAFA: #FFFAFA;
  --n7-snow-FFFAFA-20: rgba(255, 250, 250, 0.2);
  --n7-navy-081E69: #081E69;
  --n7-ice-E9F4F9: #E9F4F9;
  --n7-blue-1738AD: #1738AD;
  --n7-purple-9280FD: #9280FD;
  --n7-blue-013ACF: #013ACF;
  --n7-cyan-01B4FD: #01B4FD;
  --n7-mint-74F1AE: #74F1AE;

  /* Hero wash (linear gradients around hero) */
  --n7-hero-wash-top: linear-gradient(180deg, color-mix(in srgb, var(--n7-blue-013ACF) 22%, transparent) 0%, transparent 70%);
  --n7-hero-wash-left: linear-gradient(90deg, color-mix(in srgb, var(--n7-cyan-01B4FD) 18%, transparent) 0%, transparent 65%);
  --n7-hero-wash-bottom: linear-gradient(0deg, color-mix(in srgb, var(--n7-mint-74F1AE) 10%, transparent) 0%, transparent 60%);

  --n7-bg: var(--n7-ink-000D12);
  --n7-text: #ffffff;
  --n7-text-muted: rgba(255, 255, 255, 0.65);
  --n7-gray-100: var(--n7-gray-0D0D0C);
  --n7-nav-bg: rgba(47, 47, 47, 0.7);
  --n7-nav-border-color:transparent;
  --n7-nav-border-width: 1.5px;
  --n7-nav-cta-border-color: rgba(255, 255, 255, 0.9);
  --n7-nav-cta-border-width: 1.5px;
  /* Primary blues (use Figma swatches) */
  --n7-blue: var(--n7-blue-568EB4);
  --n7-blue-dark: var(--n7-blue-1738AD);
  --n7-glow: color-mix(in srgb, var(--n7-blue) 55%, transparent);

  /* Typography — Chivo Mono Medium = weight 500 */
  --n7-font: "Chivo Mono", ui-monospace, monospace;
  --n7-font-chivo-mono: var(--n7-font);
  --n7-font-medium: 500;
  --n7-font-regular: 400;
  --n7-nav-link-size: 12px;
  --n7-nav-link-weight: var(--n7-font-regular); /* Chivo Mono Regular */
  --n7-nav-link-line: 1.3; /* 130% */
  --n7-nav-link-tracking: 0;
  --n7-nav-brand-size: 24px;
  --n7-nav-brand-line: 1.2; /* 120% */
  --n7-nav-brand-weight: 500; /* Archivo Medium */
  --n7-font-display: "Inter", system-ui, sans-serif;
  --n7-font-archivo: "Archivo", "Inter", system-ui, sans-serif;

  /* Nav (Figma Frame 7) — at 1440 viewport, centered = 362.27px side margin */
  --n7-nav-x: 362.27px;
  --n7-nav-y: 31px;
  --n7-nav-width: 715.46px;
  --n7-nav-height: 47px;
  --n7-nav-pad-left: 10px;
  --n7-nav-pad-right: 10px; /* gap: Request Demo box → outer navbar edge */
  --n7-nav-pad-y: 9px;
  --n7-nav-gap: 160px; /* Figma Frame 7: gap between logo | nav group */
  --n7-nav-group-gap: 80px; /* Figma Frame 19: About Us → Request Demo */
  --n7-nav-cta-width: 161px;
  --n7-nav-cta-height: 26px;
  --n7-nav-cta-pad-x: 37.5px;
  --n7-nav-cta-radius: 6px;
  --n7-nav-links-gap: 20px; /* between nav items */
  --n7-nav-label-chevron-gap: 4px; /* label ↔ chevron inside item */
  --n7-nav-chevron-size: 13.73px;
  --n7-nav-radius: 12px;

  /* Buttons */
  --n7-btn-radius: 999px;

  /* Hero */
  --n7-hero-title-size: 67px;
  --n7-hero-title-tracking: -0.67px;
  --n7-hero-title-color: #E9F4F9;
  --n7-hero-sub-width: 356.169px;
  --n7-hero-sub-size: 16px;
  --n7-hero-sub-line: 1.3;
  --n7-hero-sub-opacity: 0.8;
  --n7-hero-sub-color: #E9F4F9;
  --n7-hero-gap-text-to-cta: 52px;
  /* Figma 1440 — gap between Contact us & Request demo */
  --n7-cta-pair-gap: 20px;
  --n7-hero-gap-cta: var(--n7-cta-pair-gap);
  --n7-hero-btn-radius: 10px;
  --n7-hero-btn-pad-y: 15px;
  --n7-hero-btn-primary-pad-x: 51px;
  --n7-hero-btn-outline-pad-x: 59px;
  /* Figma 1440 — Contact us & Request demo label size */
  --n7-cta-btn-font-size: 15px;
  --n7-hero-btn-font-size: var(--n7-cta-btn-font-size);
  /* Figma Request demo — 210×49 (label 108×19 centered via flex) */
  --n7-request-demo-width: 210px;
  --n7-request-demo-height: 49px;
  /* Figma Contact us — 208×49 */
  --n7-contact-us-width: 208px;
  --n7-contact-us-height: 49px;
  --n7-hero-btn-gradient: linear-gradient(141.821deg, #00B4FD 5.6799%, #003ACE 86.975%);
  --n7-hero-btn-outline-border: #E9F4F9;
  --n7-hero-glow-size: 520px;
  /* Figma left block x=80 (container pad is zeroed on hero stage) */
  --n7-hero-content-x: 80px;
  --n7-hero-content-y: 211.96px;
  --n7-hero-content-width: 607px;
  --n7-hero-content-height: 319px;
  --n7-hero-stage-height: 811px; /* Desktop - 1 — solutions starts at this Y */
  --n7-hero-media-x: 818px;
  --n7-hero-media-y: 255px;
  --n7-hero-media-width: 562px;
  --n7-hero-media-height: 301px;
  /* Figma Ellipse — 398.87×398.87, 50% opacity (centered on hero photo in CSS) */
  --n7-hero-glow-circle-size: 398.87px;
  --n7-hero-glow-offset-x: 0px;
  --n7-hero-glow-offset-y: 0px;
  --n7-hero-glow-circle-opacity: 1;
  --n7-hero-glow-rotation: 0deg;
  --n7-hero-glow-layer-blur: 72px; /* Figma Layer blur — lower = tighter spread */
  /* Ring matches photo footprint inside circle (362.64 / 398.87) */
  --n7-hero-glow-ring-rx: 46%;
  --n7-hero-glow-ring-ry: 38%;
  --n7-hero-glow-ring-inner: 70%; /* transparent — inside photo */
  --n7-hero-glow-ring-peak: 78%; /* brightest — at photo edge */
  --n7-hero-glow-ring-outer: 90%; /* fade ends before circle edge */
  /* Subtle L→R wash (dim right) on top of ring */
  --n7-hero-glow-fill: linear-gradient(
    90deg,
    rgba(0, 180, 253, 0.6) 0%,
    rgba(0, 58, 206, 0.38) 45%,
    transparent 100%
  );
  --n7-trusted-x: 80px;
  --n7-trusted-y: 655.0635px;
  --n7-trusted-width: 621.3569px;
  --n7-trusted-label-size: 16px;
  --n7-trusted-label-gap: 12px;
  --n7-trusted-logo-gap: 18px;
  --n7-trusted-logo-height: 19px;
  --n7-hero-photo-width: 362.64px;
  --n7-hero-photo-height: 300.71px;
  --n7-hero-photo-radius: 31px;

  /* Glass cards (activity — left) */
  --n7-glass-bg: rgba(255, 255, 255, 0.08);
  --n7-glass-border: rgba(255, 255, 255, 0.14);
  --n7-glass-blur: 18px;
  --n7-activity-card-width: 254px;
  --n7-activity-card-height: 117px;
  --n7-activity-card-radius: 12px;
  --n7-activity-card-x: -128px;
  --n7-activity-card-y: 150px;
  --n7-activity-card-pad: 8px 10px;
  --n7-activity-title-size: 11px;
  --n7-activity-title-color: var(--n7-gray-0D0D0C);
  --n7-activity-tabs-gap: 6px;
  --n7-activity-tab-size: 7.5px;
  --n7-activity-tab-pad-x: 6px;
  --n7-activity-tab-pad-y: 3px;
  --n7-activity-tab-gap: 3px;
  --n7-activity-tab-radius: 999px;
  --n7-activity-tab-bg: var(--n7-white);
  --n7-activity-tab-color: var(--n7-gray-0D0D0C);
  --n7-activity-tab-active-bg: var(--n7-navy-081E69);
  --n7-activity-tab-active-color: var(--n7-white);
  --n7-activity-row-gap: 8px;
  --n7-activity-icon-size: 26px;
  --n7-activity-icon-radius: 8px;
  --n7-activity-icon-bg: var(--n7-purple-9280FD);
  --n7-activity-meta-size: 9px;
  --n7-activity-label-muted-color: rgba(13, 13, 12, 0.55);
  --n7-activity-date-size: 7px;
  --n7-activity-date-color: rgba(13, 13, 12, 0.5);
  --n7-activity-amount-size: 10px;
  --n7-activity-amount-color: var(--n7-gray-0D0D0C);

  /* Balance glass card (right) — Figma */
  --n7-balance-card-offset-right: -56px;
  --n7-balance-card-width: 208px;
  --n7-balance-card-height: 177px;
  --n7-balance-card-pad: 12px 14px;
  --n7-balance-card-radius: 12px;
  /* Outer glass shell padding (Figma): X 5px, Y 4.5px */
  --n7-balance-shell-pad-x: 5px;
  --n7-balance-shell-pad-y: 4.5px;
  --n7-balance-shell-bg: rgba(255, 255, 255, 0.18);
  --n7-balance-panel-bg: var(--n7-white-70);
  --n7-balance-glass-blur: 20px;
  --n7-balance-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  --n7-balance-text: #1a1a1a;
  --n7-balance-text-muted: rgba(26, 26, 26, 0.55);
  --n7-balance-amount-color: var(--n7-navy-081E69);
  --n7-balance-amount-size: 19.2px;
  --n7-balance-avatar-size: 32px;
  --n7-balance-action-icon-size: 13.84px;
  --n7-balance-action-icon-color: #FFFAFA;
  --n7-balance-divider-color: rgba(255, 250, 250, 0.55);

  /* Solutions section (Figma node 24:4030) */
  --n7-solutions-offset-top: var(--n7-hero-stage-height);
  --n7-solutions-pad-top: 0;
  --n7-solutions-pad-bottom: 0;
  --n7-solutions-glow-size: 380px;
  --n7-solutions-intro-width: 433px;
  --n7-solutions-grid-x: 730px;
  --n7-solutions-grid-y: 47.09px;
  --n7-solutions-grid-width: 613.01px;
  --n7-solutions-grid-gap-x: 76px;
  --n7-solutions-grid-gap-y: 52px;
  --n7-solutions-grid-height: 1085px;
  --n7-solutions-card-width: calc(
    (var(--n7-solutions-grid-width) - var(--n7-solutions-grid-gap-x)) / 2
  );
  --n7-solutions-title-size: 37px;
  --n7-solutions-title-line: 1.12;
  --n7-solutions-title-tracking: -0.48px;
  --n7-solutions-title-gap: 36px;
  --n7-solutions-cta-pad-x: 40px;
  --n7-solutions-cta-pad-y: 14px;
  --n7-solutions-cta-radius: 10px;
  --n7-solutions-cta-size: 12px;
  --n7-solutions-icon-size: 36px;
  --n7-solutions-icon-gap: 26px;
  --n7-solutions-card-title-size: 20px;
  --n7-solutions-card-title-gap: 32px;
  --n7-solutions-desc-size: 16px;
  --n7-solutions-desc-line: 1.5;
  --n7-solutions-desc-color: rgba(233, 244, 249, 0.68);
  --n7-solutions-desc-gap: 18px;
  --n7-solutions-link-gap: 26px;
  --n7-solutions-link-size: 14px;
  --n7-solutions-link-width: 102.57px;
  --n7-solutions-link-height: 21px;
  --n7-solutions-link-arrow-gap: 5px;
  --n7-solutions-link-arrow-width: 13.57px;
  --n7-solutions-link-arrow-height: 14.5px;
  --n7-solutions-link-underline-width: 32.58px;
  --n7-solutions-link-underline-gap: 8px;
  --n7-solutions-badge-size: 12px;
  --n7-solutions-badge-opacity: 0.6;
  --n7-core-banking-offset-top: 1988px;
  --n7-solutions-stage-height: calc(
    var(--n7-core-banking-offset-top) - var(--n7-solutions-offset-top)
  );
  --n7-solutions-stage-min-height: calc(
    var(--n7-solutions-grid-y) + var(--n7-solutions-grid-height)
  );
  --n7-core-banking-pad-top: 0;
  --n7-core-banking-pad-bottom: 0;
  --n7-core-banking-stage-height: 619px;
  /* Core Banking — Frame 14 text block (607.83 × 308 @ y 156.88) */
  --n7-core-banking-content-width: 607.83px;
  --n7-core-banking-content-height: 308px;
  --n7-core-banking-content-y: 156.88px;
  --n7-core-banking-title-size: 53px;
  --n7-core-banking-title-line: 1.15;
  --n7-core-banking-title-tracking: -0.48px;
  --n7-core-banking-title-gap: 16px;
  --n7-core-banking-sub-size: 16px;
  --n7-core-banking-sub-line: 1.45;
  --n7-core-banking-sub-opacity: 0.8;
  --n7-core-banking-sub-width: 327.19px;
  --n7-core-banking-sub-height: 42px;
  /* Frame 1 — actions @ y 222 inside content frame */
  --n7-core-banking-actions-y: 222px;
  --n7-core-banking-cta-gap: 16px;
  --n7-core-banking-cta-width: var(--n7-request-demo-width);
  --n7-core-banking-cta-height: var(--n7-request-demo-height);
  --n7-core-banking-link-width: 102.57px;
  --n7-core-banking-link-height: 18px;
  --n7-core-banking-layout-gap: 10px;
  --n7-core-banking-media-x: 810px;
  --n7-core-banking-media-y: 80.17px;
  --n7-core-banking-media-width: 651.67px;
  --n7-core-banking-media-height: 461.42px;
  --n7-core-banking-mark-size: 540px;
  --n7-core-banking-mark-stroke: rgba(1, 180, 253, 0.18);
  --n7-core-banking-mark-x: 44%;
  --n7-core-banking-mark-c-shift: 24%;
  --n7-core-banking-mark-bottom: calc(
    var(--n7-core-banking-stage-height) - var(--n7-core-banking-media-y) -
      var(--n7-core-banking-media-height)
  );

  /* Efficient core section (Figma y 2607, height 681) */
  --n7-efficient-core-offset-top: 2607px;
  --n7-efficient-core-pad-top: 0;
  --n7-efficient-core-pad-bottom: 0;
  --n7-efficient-core-stage-height: 681px;
  --n7-efficient-core-media-x: -159px; /* page / 1440 frame left */
  --n7-efficient-core-media-y: 110px;
  --n7-efficient-core-media-width: 651.67px;
  --n7-efficient-core-media-height: 461.42px;
  --n7-efficient-core-media-native-width: 792px;
  --n7-efficient-core-media-native-height: 462px;
  --n7-efficient-core-media-scale-x: calc(
    var(--n7-efficient-core-media-width) / var(--n7-efficient-core-media-native-width)
  );
  --n7-efficient-core-media-scale-y: calc(
    var(--n7-efficient-core-media-height) / var(--n7-efficient-core-media-native-height)
  );
  --n7-efficient-core-content-gap: 277px;
  --n7-efficient-core-media-layout-x: calc(
    var(--n7-efficient-core-media-x) - var(--n7-container-pad)
  );
  --n7-efficient-core-content-layout-x: calc(
    var(--n7-efficient-core-media-layout-x) + var(--n7-efficient-core-media-width) +
      var(--n7-efficient-core-content-gap)
  );
  --n7-efficient-core-content-y: 168.68px;
  --n7-efficient-core-content-width: 590px;
  --n7-efficient-core-content-min-height: 350.41px;
  --n7-efficient-core-checklist-height: 246.41px;
  --n7-efficient-core-title-size: 27px;
  --n7-efficient-core-title-line: 1.2;
  --n7-efficient-core-title-tracking: -0.4px;
  --n7-efficient-core-title-gap: 34px;
  --n7-efficient-core-subtitle-size: 16px;
  --n7-efficient-core-subtitle-gap: 24px;
  --n7-efficient-core-checklist-y: calc(204.63px - var(--n7-efficient-core-content-y));
  --n7-efficient-core-checklist-offset-top: var(--n7-efficient-core-title-gap);
  --n7-efficient-core-list-size: 16px;
  --n7-efficient-core-list-line: 21px;
  --n7-efficient-core-list-text-height: 21px;
  --n7-efficient-core-list-left-text-width: 261.02px;
  --n7-efficient-core-list-right-text-width: calc(
    var(--n7-efficient-core-list-right-width) - var(--n7-efficient-core-check-width) -
      var(--n7-efficient-core-check-gap)
  );
  --n7-efficient-core-list-opacity: 0.8;
  --n7-efficient-core-list-col-gap: 29px;
  --n7-efficient-core-list-row-gap: 4px;
  /* Checklist columns wrt content block */
  --n7-efficient-core-list-left-width: 296px;
  --n7-efficient-core-list-right-width: 265px;
  --n7-efficient-core-list-item-height: 31.41px;
  --n7-efficient-core-list-right-offset-y: 0px;
  --n7-efficient-core-check-width: 29.98px;
  --n7-efficient-core-check-height: 31.41px;
  --n7-efficient-core-check-circle-x: 5.62px;
  --n7-efficient-core-check-circle-y: 6.79px;
  --n7-efficient-core-check-circle-size: 18.52px;
  --n7-efficient-core-check-box-x: 8.32px;
  --n7-efficient-core-check-box-y: 9.48px;
  --n7-efficient-core-check-box-size: 13.14px;
  --n7-efficient-core-check-tick-x: 2.1px;
  --n7-efficient-core-check-tick-y: 3.29px;
  --n7-efficient-core-check-tick-width: 9.17px;
  --n7-efficient-core-check-tick-height: 6.88px;
  --n7-efficient-core-check-gap: 5px;

  /* Paperless — after dashboard only (not .n7-digital; 110 + 427 + 127 = 664) */
  --n7-paperless-after-dashboard-bg: var(--n7-bg);
  --n7-paperless-section-pad-top: 0px;
  --n7-paperless-section-pad-bottom: 0px;
  /* In-digital paperless — top Y from .n7-digital__stage top (Figma 1440 digital frame) */
  --n7-paperless-card-y: 2104.43px;
  --n7-paperless-canvas-width: var(--n7-page-width);
  --n7-paperless-canvas-height: calc(
    var(--n7-paperless-section-pad-top) + var(--n7-paperless-card-height) +
      var(--n7-paperless-section-pad-bottom)
  );
  --n7-paperless-card-width: 1279px;
  --n7-paperless-card-height: 427px;
  --n7-paperless-card-x: 81px;
  --n7-paperless-card-radius: 27px;
  --n7-paperless-card-border: rgba(1, 180, 253, 0.5);
  --n7-paperless-card-fill-start: #031E2A;
  --n7-paperless-card-fill-end: var(--n7-ink-000D12);
  --n7-paperless-card-fill-end-stop: 63%;
  --n7-paperless-card-bg: linear-gradient(
    180deg,
    var(--n7-paperless-card-fill-start) 0%,
    var(--n7-paperless-card-fill-end) var(--n7-paperless-card-fill-end-stop)
  );
  --n7-paperless-content-x: 65px;
  --n7-paperless-content-y: 112.28px;
  --n7-paperless-content-width: 607.83px;
  --n7-paperless-content-height: 202px;
  --n7-paperless-actions-width: calc(
    var(--n7-contact-us-width) + var(--n7-cta-pair-gap) + var(--n7-request-demo-width)
  );
  --n7-paperless-actions-height: 49px;
  --n7-paperless-actions-x: 757px; /* Figma: wrt inner card */
  --n7-paperless-actions-y: calc(
    (var(--n7-paperless-card-height) - var(--n7-paperless-actions-height)) / 2
  ); /* 189px — matches Figma Y */
  --n7-paperless-title-size: 53px;
  --n7-paperless-title-width: 607.83px;
  --n7-paperless-title-height: 128px;
  --n7-paperless-title-line: 1.2;
  --n7-paperless-title-tracking: -0.01em;
  --n7-paperless-title-gap: 16px;
  --n7-paperless-sub-size: 16px;
  --n7-paperless-sub-width: 462.92px;
  --n7-paperless-sub-height: 42px;
  --n7-paperless-sub-line: 1.3;
  --n7-paperless-sub-tracking: 0;
  --n7-paperless-sub-opacity: 80%;
  --n7-paperless-btn-gap: var(--n7-cta-pair-gap);
  --n7-paperless-contact-width: var(--n7-contact-us-width);
  --n7-paperless-demo-width: var(--n7-request-demo-width);
  /* CB7 watermark — after-dashboard paperless only */
  --n7-paperless-cb7-mark-width: 1141px;
  --n7-paperless-cb7-mark-height: 687px;
  --n7-paperless-cb7-mark-x: 223.56px;
  --n7-paperless-cb7-mark-y: -160.72px;
  /* N7 watermark — in-digital paperless only (outer + inner 744×687) */
  --n7-paperless-marks-inner-width: 744px;
  --n7-paperless-marks-inner-height: 687px;
  --n7-paperless-marks-inner-x: 620.56px;
  --n7-paperless-marks-inner-y: -162.72px; /* + text y 162.72 in frame → outline at card top */
  --n7-paperless-marks-text-y: 162.72px;
  --n7-paperless-mark-size: 572.63px;
  --n7-paperless-mark-line: 1.2;
  --n7-paperless-mark-tracking: 0;
  --n7-paperless-mark-opacity: 0.5;
  --n7-paperless-mark-stroke-width: 1.59px;
  --n7-paperless-mark-stroke: var(--n7-cyan-01B4FD);

  /* Marquee banner (Figma Property 1=Default, 1440×116) */
  --n7-marquee-bg: #ffffff;

  /* Digital banking — stage incl. in-frame paperless @ Y 2104.43 */
  --n7-digital-stage-height: calc(
    var(--n7-paperless-card-y) + var(--n7-paperless-card-height) + 127px
  );
  /* 110px between pairs (flex gap) + 110px from pairs bottom to paperless card top */
  --n7-digital-part-gap: 110px;
  /* Pair row height: block-y + 3×row + 3×110 = paperless-card-y (2104.43) */
  --n7-digital-pair-box-height: calc(
    (
      var(--n7-paperless-card-y) - var(--n7-digital-block-y) -
        3 * var(--n7-digital-part-gap)
    ) / 3
  );
  /* Flex column: 3 rows + 2 gaps (third 110px is pairs bottom → card, not flex gap) */
  --n7-digital-pairs-stack-height: calc(
    3 * var(--n7-digital-pair-box-height) + 2 * var(--n7-digital-part-gap)
  );
  --n7-digital-bg: #E9F4F9;
  --n7-digital-body-color: #000D12;
  --n7-digital-title-color: #000000;
  --n7-digital-title-opacity: 0.95;
  --n7-digital-learn-color: #003ACE;
  /* Part 1 — left intro block (exact Figma) */
  --n7-digital-left-x: 81px;
  --n7-digital-left-y: 100px;
  --n7-digital-left-width: 438.99px;
  --n7-digital-left-height: 308px;
  --n7-digital-title-size: 53px;
  --n7-digital-sub-size: 16px;
  --n7-digital-sub-width: 379.03px;
  /* Part 1 — .n7-digital__pairs column (phones + asides live inside each pair box) */
  --n7-digital-p1-phone-x: 622px;
  /* Same section Y as left intro — pair innards use relative/absolute offsets inside the box */
  --n7-digital-p1-phone-y: var(--n7-digital-left-y);
  /* Figma phone frame (both pairs) — SVG exports may include extra canvas padding */
  --n7-digital-phone-frame-width: 268.31px;
  --n7-digital-phone-frame-height: 542.9px;
  /* Home.svg native artboard (283×528 incl. shadow bounds) */
  --n7-digital-p1-phone-width: 268.31px;
  --n7-digital-p1-phone-height: 542.9px;
  /* Part 1 aside — Figma 302×363.82 Hug; x/y relative to pair box */
  --n7-digital-p1-aside-x: 348.31px; /* phone 268.31 + 80 gap */
  --n7-digital-p1-aside-y: 89.54px;
  --n7-digital-p1-aside-width: 302px;
  --n7-digital-p1-phone-gap: 80px;
  --n7-digital-aside-heading-gap: 24px;
  --n7-digital-aside-title-size: 16px;
  --n7-digital-aside-text-size: 16px;
  /* N7 background watermark (Figma: X277 Y-66.74, 744×687, 50%) */
  --n7-digital-mark-x: 277px;
  /* Figma text FRAME top is -66.74, but N7.svg is the tight glyph (680×396).
     The glyph sits ~146px below the frame top (ascender + 120% leading):
     -66.74 + 146 = 79.26 → places the ink where Figma renders it. */
  --n7-digital-mark-y: 79.26px;
  --n7-digital-mark-width: 680px; /* N7.svg natural glyph width (50% opacity baked in) */
  /* Decorative swirl vector (Figma: X-763.25 Y418.17, 1243.25×1245.21, 20%).
     SVG is pre-clipped to the visible right 480px → right edge at x=480 → left:0 */
  --n7-digital-vector-x: 0px;
  --n7-digital-vector-y: 418.17px;
  --n7-digital-vector-width: 480px;

  /* Decorative "7" watermark (Figma frame 886.92×861 · 861×1829, 20%).
     Figma Y 957.28 overlaps Part 2 phone (bottom ≈1259.8) — repositioned to
     Part 2 pair bottom + 110px gap (= Part 3 / background area start). */
  --n7-digital-seven-x: 886.92px;
  /* Part 3 pair top = block + 2×(542.9 + 110) */
  --n7-digital-seven-y: calc(
    var(--n7-digital-block-y) + 2 *
      (var(--n7-digital-pair-box-height) + var(--n7-digital-part-gap))
  );
  --n7-digital-seven-width: 861px;
  --n7-digital-seven-height: 1829px;

  /* Phone + content pairs — .n7-digital__pairs column: 3 boxes, 2×110px gaps. */
  --n7-digital-block-x: var(--n7-digital-p1-phone-x); /* 622 */
  --n7-digital-block-y: var(--n7-digital-p1-phone-y); /* 100 — aligned with intro */
  --n7-digital-phone-gap: 76px;
  --n7-digital-p1-pair-offset-x: 0.7px;
  --n7-digital-p2-pair-offset-x: 19.2px;
  --n7-digital-p2-pair-offset-y: calc(
    var(--n7-digital-pair-box-height) + var(--n7-digital-part-gap)
  );
  --n7-digital-p2-aside-y: 110.54px; /* relative to pair box */
  --n7-digital-p2-copy-width: 269px;
  /* Part 3 — Profile.svg phone + right copy */
  --n7-digital-p3-pair-offset-x: 0.7px;
  --n7-digital-p3-aside-x: 348.31px;
  --n7-digital-p3-aside-y: 115.84px; /* relative to pair box */
  --n7-digital-p3-copy-width: 302px;

  /* Fintech Insights — Figma 1440×853 @ page Y 6732 */
  --n7-insights-page-y: 6732px;
  --n7-insights-height: 853px;
  --n7-insights-footer-link-height: 16px;
  --n7-insights-stack-height: calc(
    var(--n7-insights-cards-y) + var(--n7-insights-card-height) +
      var(--n7-insights-row-gap) + var(--n7-insights-pair-height) +
      var(--n7-insights-all-link-y) + var(--n7-insights-footer-link-height)
  );
  --n7-insights-bg: var(--n7-ink-000D12);
  --n7-insights-circle-size: 556.77px;
  --n7-insights-circle-x: 50.23px;
  --n7-insights-circle-y: 160.23px;
  --n7-insights-circle-gradient: linear-gradient(90deg, #00b4fd 0%, #003ace 100%);
  --n7-insights-circle-layer-blur: 88px;
  --n7-insights-circle-opacity: 0.1;
  /* 0 + --n7-container-pad (80px) = 80px from page left */
  --n7-insights-intro-x: 0px;
  --n7-insights-intro-y: 80.17px;
  --n7-insights-intro-width: 463.26px;
  --n7-insights-title-size: 37px;
  --n7-insights-title-line: 1.2;
  --n7-insights-title-tracking: -0.01em;
  --n7-insights-title-gap: 40px;
  --n7-insights-cta-pad-y: 15px;
  --n7-insights-cta-pad-x: 40px;
  --n7-insights-cta-radius: 10px;
  --n7-insights-cta-size: 15px;
  --n7-insights-cards-x: 650px;
  --n7-insights-cards-y: 80px;
  --n7-insights-sitare-width: 295px;
  --n7-insights-sitare-height: 267px;
  --n7-insights-card-width: 670px;
  --n7-insights-card-height: 318px;
  --n7-insights-sitare-x: 24px;
  --n7-insights-sitare-y: 25.5px;
  --n7-insights-card-body-x: 351.88px;
  --n7-insights-card-body-y: 39.91px;
  --n7-insights-card-body-width: 289.13px;
  --n7-insights-cards-width: var(--n7-insights-card-width);
  --n7-insights-row-gap: 24px;
  --n7-insights-pair-gap: 29px;
  --n7-insights-compact-card-width: 320.5px;
  --n7-insights-compact-card-height: 318px;
  --n7-insights-pair-width: calc(
    var(--n7-insights-compact-card-width) * 2 + var(--n7-insights-pair-gap)
  );
  --n7-insights-pair-height: var(--n7-insights-compact-card-height);
  --n7-insights-compact-2-left: calc(
    var(--n7-insights-compact-card-width) + var(--n7-insights-pair-gap)
  );
  --n7-insights-compact-body-x: 28px;
  --n7-insights-compact-body-width: calc(
    var(--n7-insights-compact-card-width) - 2 * var(--n7-insights-compact-body-x)
  );
  --n7-insights-compact-btn-x: 16.25px;
  --n7-insights-compact-btn-y: 250px;
  --n7-insights-card-radius: 20px;
  --n7-insights-card-bg: #031e2a;
  --n7-insights-card-text-gap: 11px;
  --n7-insights-card-kicker-size: 12px;
  --n7-insights-card-title-size: 27px;
  --n7-insights-card-meta-size: 14px;
  --n7-insights-card-meta-color: #64A8C4;
  --n7-insights-card-btn-x: 351.88px;
  --n7-insights-card-btn-y: 244px;
  --n7-insights-card-btn-width: 287px;
  --n7-insights-card-btn-height: 36px;
  --n7-insights-card-btn-pad-x: 111px;
  --n7-insights-card-btn-pad-y: 10px;
  --n7-insights-card-btn-radius: 10px;
  --n7-insights-card-btn-gap: 8px;
  --n7-insights-card-btn-color: rgba(233, 244, 249, 0.5);
  --n7-insights-card-btn-border: rgba(233, 244, 249, 0.5);
  --n7-insights-all-link-y: 24px;
  --n7-insights-all-link-line-width: 32.58px;

  /* Case studies — Figma 1440×872 */
  /* Case studies — Figma frame 1440×872 */
  --n7-cases-width: var(--n7-page-width);
  --n7-cases-height: 872px;
  --n7-cases-bottom-gap: 0px;
  --n7-cases-footer-block-height: 64px;
  --n7-cases-title-carousel-gap: calc(
    var(--n7-cases-carousel-y) - var(--n7-cases-title-y) - var(--n7-cases-title-height)
  );
  --n7-cases-bg: var(--n7-ink-000D12);
  --n7-cases-title-x: 488.37px;
  --n7-cases-title-y: 43.17px;
  --n7-cases-title-width: 463.26px;
  --n7-cases-title-height: 64px;
  --n7-cases-title-size: 53px;
  --n7-cases-title-line: 1.2;
  --n7-cases-title-tracking: -0.01em;
  --n7-cases-carousel-width: 1015px;
  --n7-cases-carousel-height: 438px;
  --n7-cases-carousel-x: calc(
    (var(--n7-page-width) - var(--n7-cases-carousel-width)) / 2
  );
  --n7-cases-card-y: 179.17px;
  --n7-cases-carousel-y: var(--n7-cases-card-y);
  --n7-cases-card-radius: 20px;
  --n7-cases-card-bg: #031e2a;
  --n7-cases-card-behind-offset-x: -48px;
  --n7-cases-card-behind-offset-y: 12px;
  --n7-cases-card-behind-scale: 0.98;
  --n7-cases-card-behind-opacity: 0.42;
  --n7-cases-sitare-x: 24px;
  --n7-cases-sitare-y: 25.5px;
  --n7-cases-combined-sitare-x: 24px;
  --n7-cases-combined-sitare-y: 25.5px;
  --n7-cases-content-gap: 77px;
  --n7-cases-sitare-slot-width: calc(
    var(--n7-cases-carousel-width) - var(--n7-cases-sitare-x) -
      var(--n7-cases-content-gap) - var(--n7-cases-card-body-width)
  );
  --n7-cases-sitare-width: 434px;
  --n7-cases-sitare-height: 392px;
  --n7-cases-card-body-x: calc(
    var(--n7-cases-sitare-x) + var(--n7-cases-sitare-slot-width) +
      var(--n7-cases-content-gap)
  );
  --n7-cases-card-body-y: 55.5px;
  --n7-cases-card-body-width: 480px;
  --n7-cases-card-body-min-height: 327.01px;
  --n7-cases-card-kicker-size: 12px;
  --n7-cases-card-title-size: 40px;
  --n7-cases-card-text-gap: 11px;
  --n7-cases-brand-btn-gap: 46px;
  --n7-cases-card-btn-width: 431px;
  --n7-cases-card-btn-height: 36px;
  --n7-cases-card-btn-pad-x: 111px;
  --n7-cases-card-btn-pad-y: 10px;
  --n7-cases-card-btn-color: rgba(233, 244, 249, 0.5);
  --n7-cases-card-btn-border: rgba(233, 244, 249, 0.5);
  /* Prev/next + dots — x from inner carousel card left */
  --n7-cases-nav-x: 475.34px;
  --n7-cases-nav-gap: 24px;
  --n7-cases-nav-y: 24px;
  --n7-cases-view-all-line-width: 32.58px;
  --n7-cases-split-visual-width: calc(
    var(--n7-cases-carousel-width) - var(--n7-cases-content-gap) -
      var(--n7-cases-card-body-width)
  );
  --n7-cases-card-copy-size: 16px;
  --n7-cases-slide-duration: 0.45s;

  /* Paperless CTA bar — Figma 1440×316 @ page Y 8457 (below case studies) */
  --n7-paperless-cta-page-y: 8457px;
  --n7-paperless-cta-height: 316px;
  --n7-paperless-cta-bg: var(--n7-ink-000D12);
  --n7-paperless-cta-title-size: 53px;
  --n7-paperless-cta-title-width: 607.83px;
  --n7-paperless-cta-title-height: 128px;
  --n7-paperless-cta-title-sub-gap: 32px;
  --n7-paperless-cta-content-x: 80px;
  --n7-paperless-cta-content-y: 57px;
  --n7-paperless-cta-content-width: 607.83px;
  --n7-paperless-cta-content-height: calc(
    var(--n7-paperless-cta-title-height) + var(--n7-paperless-cta-title-sub-gap) +
      var(--n7-paperless-cta-sub-height)
  );
  --n7-paperless-cta-sub-width: 462.92px;
  --n7-paperless-cta-sub-height: 42px;
  --n7-paperless-cta-content-actions-gap: 214px;
  --n7-paperless-cta-actions-x: 902px;
  --n7-paperless-cta-actions-y: 133.5px;
  --n7-paperless-cta-actions-width: calc(
    var(--n7-contact-us-width) + var(--n7-cta-pair-gap) + var(--n7-request-demo-width)
  );
  --n7-paperless-cta-actions-height: 49px;

  /* Site footer — Figma 1440×787 (below paperless CTA) */
  --n7-footer-width: var(--n7-page-width);
  --n7-footer-height: 787px;
  --n7-footer-bg: var(--n7-ink-000D12);
  --n7-footer-logo-grid-gap: calc(
    var(--n7-footer-grid-x) - var(--n7-footer-logo-x) - var(--n7-footer-logo-width)
  );
  /* Footer blur ellipse — Figma 1440×556.77 @ 0,547.54 · linear · 5% · layer blur */
  --n7-footer-glow-x: 0px;
  --n7-footer-glow-y: 547.54px;
  --n7-footer-glow-width: var(--n7-page-width);
  --n7-footer-glow-height: 556.77px;
  --n7-footer-glow-gradient: linear-gradient(90deg, #00b4fd 0%, #003ace 100%);
  --n7-footer-glow-layer-blur: 64px;
  --n7-footer-glow-opacity: 0.05;
  --n7-footer-logo-x: 53px;
  --n7-footer-logo-y: 130.17px;
  --n7-footer-logo-width: 440px;
  --n7-footer-logo-height: 233px;
  --n7-footer-grid-x: 543.68px;
  --n7-footer-grid-y: 130px;
  --n7-footer-grid-width: 816.32px;
  --n7-footer-grid-height: 509px;
  --n7-footer-col-gap: 107px;
  --n7-footer-col-width: calc(
    (var(--n7-footer-grid-width) - 2 * var(--n7-footer-col-gap)) / 3
  );
  --n7-footer-row-gap: 126px;
  --n7-footer-heading-size: 18px;
  --n7-footer-heading-line: 1.3;
  --n7-footer-heading-gap: 16px;
  --n7-footer-body-size: 14px;
  --n7-footer-body-line: 1.45;
  --n7-footer-body-opacity: 75%;
  --n7-footer-link-size: 16px;
  --n7-footer-link-line: 1.3;
  --n7-footer-link-opacity: 70%;
  --n7-footer-link-label-width: 136.45px;
  --n7-footer-link-label-height: 21px;
  --n7-footer-link-label-height-wrap: 42px;
  --n7-footer-link-gap: 14px;
  --n7-footer-link-row-width: calc(
    var(--n7-footer-link-label-width) + var(--n7-footer-link-gap) +
      var(--n7-footer-arrow-width)
  );
  --n7-footer-links-list-gap: 10px;
  --n7-footer-arrow-width: 14px;
  --n7-footer-arrow-height: 15px;
  --n7-footer-copy-x: 543.68px;
  --n7-footer-copy-y: 718.96px;
  --n7-footer-copy-width: 779.43px;
  --n7-footer-copy-height: 36px;
  --n7-footer-copy-size: 14px;
  --n7-footer-copy-line: calc(var(--n7-footer-copy-height) / var(--n7-footer-copy-size));
  --n7-footer-copy-opacity: 30%;
}

/* ===== base.css ===== */
*
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body.n7-body {
  margin: 0;
  min-height: 100vh;
  background: var(--n7-bg);
  color: var(--n7-text);
  font-family: var(--n7-font-display);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

@media (max-width: 991px) {
  body.n7-body.n7-nav-menu-open {
    overflow: hidden;
  }
}

/* Sections stack flush — spacing lives inside each section layout only */
main > section,
main > .n7-site-footer {
  margin-block: 0;
  padding-block: 0;
}

/*
 * Project canvas (all sections):
 * max-width 1440px + width 100% ? pixel-perfect at 1440, fluid below
 */
.n7-page {
  position: relative;
  width: 100%;
  max-width: var(--n7-page-width);
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
}

.n7-page .container {
  width: 100%;
  max-width: var(--n7-page-width);
  padding-left: var(--n7-container-pad);
  padding-right: var(--n7-container-pad);
}

/*
 * Bootstrap Reboot: img { max-width: 100%; height: auto; } shrinks Figma-positioned
 * SVGs (laptops, phones, hero) and can push layout off-canvas. Scoped override only.
 */
.n7-hero__photo,
.n7-core-banking__media img,
.n7-efficient-core__media img,
.n7-digital__phone,
.n7-digital__marks,
.n7-digital__vector,
.n7-digital__seven,
.n7-marquee__img {
  max-width: none;
}

@media (max-width: 991px) {
  .n7-core-banking__media img,
  .n7-efficient-core__media img {
    max-width: 100%;
  }
}

.n7-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--n7-font);
  font-weight: var(--n7-font-medium);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--n7-btn-radius);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.n7-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.n7-btn--ghost {
  color: var(--n7-text);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Nav Request Demo sets its own padding via .n7-btn--nav-cta */

.n7-btn--outline {
  padding: var(--n7-hero-btn-pad-y) var(--n7-hero-btn-outline-pad-x);
  border-radius: var(--n7-hero-btn-radius);
  font-size: var(--n7-hero-btn-font-size);
  line-height: 1.3;
  color: var(--n7-hero-title-color);
  background: transparent;
  border: 1px solid var(--n7-hero-btn-outline-border);
}

/* Contact us & Request demo — Figma 15px Chivo Mono Medium */
.n7-hero__actions .n7-btn--primary,
.n7-hero__actions .n7-btn--outline,
.n7-paperless__btn-contact.n7-btn--outline,
.n7-paperless__btn-demo.n7-btn--primary,
.n7-paperless-cta__btn-contact.n7-btn--outline,
.n7-paperless-cta__btn-demo.n7-btn--primary,
.n7-btn--primary {
  font-size: var(--n7-cta-btn-font-size);
  line-height: 1;
  letter-spacing: 0;
}

/* Contact us — Figma 208×49 (not used on Read more outline buttons) */
.n7-hero__actions .n7-btn--outline,
.n7-paperless__btn-contact.n7-btn--outline,
.n7-paperless-cta__btn-contact.n7-btn--outline {
  box-sizing: border-box;
  width: var(--n7-contact-us-width);
  height: var(--n7-contact-us-height);
  min-width: var(--n7-contact-us-width);
  min-height: var(--n7-contact-us-height);
  padding: 0;
  flex-shrink: 0;
}

/* Request demo (primary) — Figma 210×49 everywhere */
.n7-btn--primary {
  box-sizing: border-box;
  width: var(--n7-request-demo-width);
  height: var(--n7-request-demo-height);
  min-width: var(--n7-request-demo-width);
  min-height: var(--n7-request-demo-height);
  padding: 0;
  border-radius: var(--n7-hero-btn-radius);
  color: #ffffff;
  border: none;
  background: var(--n7-hero-btn-gradient);
  box-shadow: none;
  flex-shrink: 0;
}

@media (min-width: 1440px) {
  .n7-hero__actions .n7-btn--primary,
  .n7-hero__actions .n7-btn--outline,
  .n7-paperless__btn-contact.n7-btn--outline,
  .n7-paperless__btn-demo.n7-btn--primary,
  .n7-paperless-cta__btn-contact.n7-btn--outline,
  .n7-paperless-cta__btn-demo.n7-btn--primary,
  .n7-btn--primary {
    font-size: var(--n7-cta-btn-font-size);
  }
}

/* ===== motion.css ===== */
/*
 * Motion layer — compositor-friendly hints when GSAP is active.
 * Initial hide only while scripts load; cleared by motion.js or .n7-motion-static.
 */

/* Navbar + left copy visible immediately; right media + trusted animate in */
html:not(.n7-motion-ready):not(.n7-motion-static) .n7-hero__media-stage,
html:not(.n7-motion-ready):not(.n7-motion-static) .n7-trusted {
  visibility: hidden;
}

html.n7-motion-ready .n7-hero__media-stage,
html.n7-motion-ready .n7-trusted,
html.n7-motion-static .n7-hero__media-stage,
html.n7-motion-static .n7-trusted {
  visibility: visible;
}

html.n7-motion-enabled .n7-hero__photo-wrap {
  transform-origin: 50% 72%;
}

html.n7-motion-enabled .n7-activity-card {
  transform-origin: left center;
}

html.n7-motion-enabled .n7-balance-card {
  transform-origin: right center;
}

/* GSAP owns transform on these; avoid fighting CSS transitions */
html.n7-motion-enabled .n7-cases__track {
  transition: none;
}

/* Page CTAs only — not navbar Request Demo (keeps navbar.css hover opacity) */
html.n7-motion-enabled .n7-btn:not(.n7-btn--nav-cta),
html.n7-motion-enabled .n7-btn:not(.n7-btn--nav-cta):hover {
  transition: background 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  transform: none;
}

/* Navbar text/buttons: no GSAP opacity/transform; original link + CTA styling */
html.n7-motion-enabled .n7-nav__link,
html.n7-motion-enabled .n7-nav__link:hover,
html.n7-motion-enabled .n7-nav__cta .n7-btn,
html.n7-motion-enabled .n7-nav__cta .n7-btn:hover,
html.n7-motion-enabled .n7-brand,
html.n7-motion-enabled .n7-brand__text {
  transform: none;
}

html.n7-motion-enabled .n7-nav__link {
  transition: opacity 0.2s ease;
}

html.n7-motion-enabled .n7-nav__link:hover {
  opacity: 0.75;
}

/* Request demo / Contact us — never dimmed or delayed by scroll-hide */
html.n7-motion-enabled .n7-hero__actions .n7-btn,
html.n7-motion-enabled .n7-solutions__cta,
html.n7-motion-enabled .n7-core-banking__cta,
html.n7-motion-enabled .n7-paperless__btn-contact,
html.n7-motion-enabled .n7-paperless__btn-demo,
html.n7-motion-enabled .n7-digital__request,
html.n7-motion-enabled .n7-paperless-cta__btn-contact,
html.n7-motion-enabled .n7-paperless-cta__btn-demo {
  opacity: 1;
}

html.n7-motion-enabled .n7-solution-card__link:hover,
html.n7-motion-enabled .n7-core-banking__link:hover,
html.n7-motion-enabled .n7-paperless-cta__btn-contact:hover,
html.n7-motion-enabled .n7-paperless-cta__btn-demo:hover {
  transform: none;
}

/* Compositor hint only on carousel track (slides use xPercent) */
html.n7-motion-enabled .n7-cases__track {
  will-change: transform;
}

@media (max-width: 991px) {
  html.n7-motion-enabled .n7-activity-card,
  html.n7-motion-enabled .n7-balance-card {
    will-change: transform;
  }
}

/* Glow pulse starts after entrance — avoid will-change during load */

/* Digital — smooth entrance origins; GSAP clears transform after each tween */
html.n7-motion-enabled .n7-digital__phone-wrap {
  transform-origin: 50% 85%;
}

html.n7-motion-enabled .n7-digital__aside-title,
html.n7-motion-enabled .n7-digital__aside-text,
html.n7-motion-enabled .n7-digital__check-item {
  transform-origin: left center;
}

html.n7-motion-enabled .n7-digital__pair--2 .n7-digital__phone-wrap {
  transform-origin: 50% 85%;
}

html.n7-motion-enabled .n7-digital__pair--2 .n7-digital__aside-title,
html.n7-motion-enabled .n7-digital__pair--2 .n7-digital__aside-text,
html.n7-motion-enabled .n7-digital__pair--2 .n7-digital__check-item {
  transform-origin: right center;
}

html.n7-motion-enabled .n7-core-banking__layout {
  perspective: 1600px;
  perspective-origin: 50% 58%;
}

html.n7-motion-enabled .n7-core-banking__marks {
  transform-origin: 50% 88%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

html.n7-motion-enabled .n7-insights__glow-orbit {
  transform-origin: 50% 50%;
}

html.n7-motion-enabled .n7-digital__marks,
html.n7-motion-enabled .n7-digital__vector,
html.n7-motion-enabled .n7-digital__seven {
  transform-origin: 50% 50%;
}

html.n7-motion-enabled .n7-paperless--in-digital .n7-paperless__canvas {
  perspective: 1400px;
  perspective-origin: 50% 58%;
}

html.n7-motion-enabled .n7-paperless--in-digital .n7-paperless__marks-inner {
  transform-origin: 50% 72%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

html.n7-motion-enabled .n7-paperless--in-digital .n7-paperless__sub,
html.n7-motion-enabled .n7-paperless--in-digital .n7-paperless__actions {
  transform-origin: left center;
}

html.n7-motion-enabled .n7-insights__card--featured .n7-insights__sitare {
  transform-origin: right center;
}

html.n7-motion-enabled .n7-insights__card--compact {
  transform-origin: 50% 85%;
}

html.n7-motion-enabled .n7-insights__card--featured .n7-insights__card-kicker,
html.n7-motion-enabled .n7-insights__card--featured .n7-insights__card-meta {
  transform-origin: left center;
}

html.n7-motion-enabled .n7-cases__viewport {
  transform-origin: 50% 85%;
}

html.n7-motion-enabled .n7-cases__card-copy {
  transform-origin: left center;
}

html.n7-motion-enabled .n7-paperless-cta__sub {
  transform-origin: left center;
}

html.n7-motion-enabled .n7-paperless-cta__actions {
  transform-origin: right center;
}

html.n7-motion-enabled .n7-site-footer__glow-orbit {
  transform-origin: 50% 50%;
}

html.n7-motion-enabled .n7-site-footer__logo {
  transform-origin: left top;
}

html.n7-motion-enabled .n7-site-footer__grid,
html.n7-motion-enabled .n7-site-footer__copy {
  transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
  html.n7-motion-enabled .n7-cases__track {
    transition: transform var(--n7-cases-slide-duration) ease;
  }

  html.n7-motion-enabled .n7-btn:not(.n7-btn--nav-cta),
  html.n7-motion-enabled .n7-btn:not(.n7-btn--nav-cta):hover {
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
  }
}

/* ===== components/navbar.css ===== */
.n7-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--n7-z-nav);
  width: 100%;
  padding-top: var(--n7-nav-y);
}

/*
 * At 1440px: margin auto + width 715.46 = left offset 362.27 (Figma X)
 * Below 1440: stays centered in fluid canvas
 */
.n7-nav {
  display: flex;
  width: fit-content;
  max-width: calc(100% - 32px); /* don’t cap at 715px — that was crushing the 10px right gap */
  margin-left: auto;
  margin-right: auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  height: var(--n7-nav-height);
  padding-top: var(--n7-nav-pad-y);
  padding-bottom: var(--n7-nav-pad-y);
  padding-left: var(--n7-nav-pad-left);
  padding-right: 0; /* right gap = .n7-nav__cta margin-right (10px) */
  gap: var(--n7-nav-gap);
  box-sizing: border-box;
  background: var(--n7-nav-bg);
  border: var(--n7-nav-border-width) solid var(--n7-nav-border-color);
  border-radius: var(--n7-nav-radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.n7-brand {
  text-decoration: none;
  flex-shrink: 0;
}

.n7-brand__text {
  font-family: var(--n7-font-archivo);
  font-weight: var(--n7-nav-brand-weight);
  font-size: var(--n7-nav-brand-size);
  line-height: var(--n7-nav-brand-line);
  letter-spacing: 0;
  color: var(--n7-ice-E9F4F9);
}

/* Figma Frame 19: links + Request Demo, gap 80px */
.n7-nav__group {
  display: flex;
  align-items: center;
  gap: var(--n7-nav-group-gap);
  flex-shrink: 0;
}

/* Figma Frame 11: gap 20px between Solutions | Resources | About Us */
.n7-nav__links {
  display: flex;
  align-items: center;
  gap: var(--n7-nav-links-gap);
  flex-shrink: 0;
}

/* Figma Frame 8/9: gap 4px between label and chevron */
.n7-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--n7-nav-label-chevron-gap);
  height: auto;
  font-family: var(--n7-font-chivo-mono);
  font-weight: var(--n7-nav-link-weight); /* Chivo Mono Regular */
  font-size: var(--n7-nav-link-size); /* 12px */
  line-height: var(--n7-nav-link-line); /* 130% */
  letter-spacing: var(--n7-nav-link-tracking);
  text-transform: uppercase;
  color: var(--n7-text);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.n7-nav__link:hover {
  opacity: 0.75;
}

.n7-nav__label {
  display: inline-block;
  font: inherit;
  letter-spacing: inherit;
  line-height: var(--n7-nav-link-line);
}

.n7-nav__chevron {
  display: block;
  flex-shrink: 0;
  width: var(--n7-nav-chevron-size);
  height: var(--n7-nav-chevron-size);
  opacity: 0.85;
}

/* 10px from Request Demo border → navbar inner edge (Figma) */
.n7-nav__cta {
  flex-shrink: 0;
  margin-right: var(--n7-nav-pad-right);
}

/* Request Demo — 161×26, pad-x 37.5, radius 6 */
.n7-nav__cta .n7-btn--nav-cta {
  box-sizing: border-box;
  width: var(--n7-nav-cta-width);
  height: var(--n7-nav-cta-height);
  padding: 0 var(--n7-nav-cta-pad-x);
  border-radius: var(--n7-nav-cta-radius);
  border: var(--n7-nav-cta-border-width) solid var(--n7-nav-cta-border-color);
  font-family: var(--n7-font-chivo-mono);
  font-weight: var(--n7-font-medium);
  font-size: var(--n7-nav-link-size);
  line-height: var(--n7-nav-link-line);
  letter-spacing: var(--n7-nav-link-tracking);
}

.n7-nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.n7-nav__toggle-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--n7-text);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ===== responsive/navbar.css ===== */
/*
 * Navbar — tablet & mobile only (≥992px uses styles/components/navbar.css as-is)
 * Breakpoints align with the rest of the site: 991px / 767px / 479px
 */

/* Tablet + mobile: hamburger shell */
@media (max-width: 991px) {
  .n7-header {
    padding-top: clamp(16px, 3vw, 24px);
  }

  .n7-nav {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    width: calc(100% - 32px);
    max-width: none;
    height: auto;
    min-height: var(--n7-nav-height);
    margin-left: auto;
    margin-right: auto;
    padding: 10px 12px 10px 14px;
    gap: 0;
    flex-wrap: unset;
  }

  .n7-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .n7-nav__toggle {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.2s ease;
  }

  .n7-nav__toggle:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .n7-nav__toggle:focus-visible {
    outline: 2px solid var(--n7-cyan-01B4FD);
    outline-offset: 2px;
  }

  .n7-nav__group {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    width: 100%;
    margin-top: 0;
    padding-top: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
      max-height 0.35s ease,
      opacity 0.25s ease,
      padding 0.35s ease,
      margin 0.35s ease;
  }

  .n7-nav.is-open .n7-nav__group {
    display: flex;
    margin-top: 12px;
    padding-top: 16px;
    max-height: 480px;
    opacity: 1;
    pointer-events: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .n7-nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
  }

  .n7-nav__link {
    justify-content: space-between;
    min-height: 44px;
    padding: 10px 4px;
    white-space: normal;
  }

  .n7-nav__cta {
    width: 100%;
    margin-right: 0;
  }

  .n7-nav__cta .n7-btn--nav-cta {
    width: 100%;
    max-width: none;
    height: 44px;
    padding: 0 20px;
  }

  /* Hamburger → X when open */
  .n7-nav.is-open .n7-nav__toggle-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .n7-nav.is-open .n7-nav__toggle-line:nth-child(2) {
    opacity: 0;
  }

  .n7-nav.is-open .n7-nav__toggle-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .n7-header {
    padding-top: 14px;
  }

  .n7-nav {
    width: calc(100% - 24px);
    padding: 8px 10px 8px 12px;
    border-radius: 10px;
  }

  .n7-brand__text {
    font-size: 22px;
  }

  .n7-nav.is-open .n7-nav__group {
    margin-top: 10px;
    padding-top: 14px;
    gap: 18px;
  }
}

/* Small phones */
@media (max-width: 479px) {
  .n7-nav {
    width: calc(100% - 20px);
    padding-left: 10px;
  }
}

/* ===== components/activity-card.css ===== */
/* Left glass card — same shell/panel styling as balance card */

.n7-activity-card {
  position: absolute;
  z-index: var(--n7-z-activity-card);
  left: var(--n7-activity-card-x);
  top: var(--n7-activity-card-y);
  width: var(--n7-activity-card-width);
  height: var(--n7-activity-card-height);
  padding: var(--n7-balance-shell-pad-y) var(--n7-balance-shell-pad-x);
  border-radius: var(--n7-activity-card-radius);
  box-sizing: border-box;
  background: var(--n7-balance-shell-bg);
  backdrop-filter: blur(var(--n7-balance-glass-blur));
  -webkit-backdrop-filter: blur(var(--n7-balance-glass-blur));
  box-shadow: var(--n7-balance-glass-shadow);
}

.n7-activity-card__panel {
  width: 100%;
  height: 100%;
  padding: var(--n7-activity-card-pad);
  border-radius: calc(var(--n7-activity-card-radius) - var(--n7-balance-shell-pad-y));
  box-sizing: border-box;
  background: var(--n7-white-40);
  backdrop-filter: blur(var(--n7-balance-glass-blur));
  -webkit-backdrop-filter: blur(var(--n7-balance-glass-blur));
  display: flex;
  flex-direction: column;
  gap: var(--n7-activity-tabs-gap);
  overflow: hidden;
}

.n7-activity-card__title {
  margin: 0;
  font-family: var(--n7-font-display);
  font-size: var(--n7-activity-title-size);
  font-weight: 600;
  line-height: 1.2;
  color: var(--n7-activity-title-color);
}

.n7-activity-card__tabs {
  display: flex;
  align-items: center;
  gap: var(--n7-activity-tab-gap);
  flex-wrap: nowrap;
}

.n7-activity-card__tab {
  flex-shrink: 0;
  font-family: var(--n7-font-display);
  font-size: var(--n7-activity-tab-size);
  font-weight: 500;
  line-height: 1.2;
  padding: var(--n7-activity-tab-pad-y) var(--n7-activity-tab-pad-x);
  border-radius: var(--n7-activity-tab-radius);
  color: var(--n7-activity-tab-color);
  background: var(--n7-activity-tab-bg);
  white-space: nowrap;
}

.n7-activity-card__tab.is-active {
  color: var(--n7-activity-tab-active-color);
  background: var(--n7-activity-tab-active-bg);
}

.n7-activity-card__row {
  display: flex;
  align-items: center;
  gap: var(--n7-activity-row-gap);
  margin-top: auto;
}

.n7-activity-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--n7-activity-icon-size);
  height: var(--n7-activity-icon-size);
  border-radius: var(--n7-activity-icon-radius);
  background: var(--n7-activity-icon-bg);
  color: var(--n7-white);
}

.n7-activity-card__icon svg {
  width: 11px;
  height: 11px;
}

.n7-activity-card__meta {
  flex: 1;
  min-width: 0;
}

.n7-activity-card__label {
  margin: 0 0 2px;
  font-family: var(--n7-font-display);
  font-size: var(--n7-activity-meta-size);
  line-height: 1.2;
  color: var(--n7-gray-0D0D0C);
}

.n7-activity-card__label strong {
  font-weight: 600;
}

.n7-activity-card__label-muted {
  font-weight: 400;
  color: var(--n7-activity-label-muted-color);
}

.n7-activity-card__date {
  display: block;
  font-family: var(--n7-font-display);
  font-size: var(--n7-activity-date-size);
  font-weight: 400;
  line-height: 1.2;
  color: var(--n7-activity-date-color);
}

.n7-activity-card__amount {
  flex-shrink: 0;
  font-family: var(--n7-font-display);
  font-size: var(--n7-activity-amount-size);
  font-weight: 600;
  line-height: 1.2;
  color: var(--n7-activity-amount-color);
}

/* ===== components/balance-card.css ===== */
/* Right balance card — outer shell (blur rim) + inner panel (content) */

.n7-balance-card {
  position: absolute;
  z-index: var(--n7-z-balance-card);
  right: var(--n7-balance-card-offset-right);
  top: 8%;
  width: var(--n7-balance-card-width);
  height: var(--n7-balance-card-height);
  padding: var(--n7-balance-shell-pad-y) var(--n7-balance-shell-pad-x);
  border-radius: var(--n7-balance-card-radius);
  box-sizing: border-box;
  background: var(--n7-balance-shell-bg);
  backdrop-filter: blur(var(--n7-balance-glass-blur));
  -webkit-backdrop-filter: blur(var(--n7-balance-glass-blur));
  box-shadow: var(--n7-balance-glass-shadow);
}

.n7-balance-card__panel {
  width: 100%;
  height: 100%;
  padding: var(--n7-balance-card-pad);
  border-radius: calc(var(--n7-balance-card-radius) - var(--n7-balance-shell-pad-y));
  box-sizing: border-box;
  background: var(--n7-balance-panel-bg);
  backdrop-filter: blur(var(--n7-balance-glass-blur));
  -webkit-backdrop-filter: blur(var(--n7-balance-glass-blur));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.n7-balance-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.n7-balance-card__user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.n7-balance-card__avatar {
  flex-shrink: 0;
  width: var(--n7-balance-avatar-size);
  height: var(--n7-balance-avatar-size);
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.n7-balance-card__user-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.n7-balance-card__name {
  font-family: var(--n7-font-display);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--n7-balance-text);
}

.n7-balance-card__greet {
  font-family: var(--n7-font-display);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--n7-gray-100);
}

.n7-balance-card__notify {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.91px;
  height: 12.91px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--n7-balance-text);
  cursor: pointer;
}

.n7-balance-card__notify svg {
  width: 16px;
  height: 16px;
}

.n7-balance-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 0;
}

.n7-balance-card__label {
  font-family: var(--n7-font-display);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--n7-gray-100);
  margin: 0 0 4px;
}

.n7-balance-card__amount {
  margin: 0;
  font-family: var(--n7-font-display);
  font-size: var(--n7-balance-amount-size);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--n7-balance-amount-color);
}

.n7-balance-card__amount-currency {
  font-size: 12px;
  font-weight: 600;
}

.n7-balance-card__actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
}

.n7-balance-card__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  font-family: var(--n7-font-display);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--n7-gray-100);
  text-align: center;
}

.n7-balance-card__action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  color: var(--n7-balance-action-icon-color);
}

.n7-balance-card__divider {
  height: 1px;
  width: calc(100% + 2px);
  margin: 6px -1px 8px;
  background: var(--n7-balance-divider-color);
  opacity: 1;
}


.n7-balance-card__action-svg {
  width: var(--n7-balance-action-icon-size);
  height: var(--n7-balance-action-icon-size);
  object-fit: contain;
  display: block;
}

/* ===== sections/hero.css ===== */
.n7-hero {
  position: relative;
  padding: 0;
  overflow: visible;
  /* Figma Frame fill: #000D12 (solid) */
  background: var(--n7-bg);
}

.n7-hero__inner {
  position: relative;
  height: var(--n7-hero-stage-height);
  padding: 0;
  overflow: visible;
}

.n7-hero__content {
  position: absolute;
  left: var(--n7-hero-content-x);
  top: var(--n7-hero-content-y);
  width: var(--n7-hero-content-width);
  height: var(--n7-hero-content-height);
  max-width: none;
  text-align: left;
}

.n7-hero__title {
  margin: 0 0 16px;
  font-family: var(--n7-font-archivo);
  font-weight: 500; /* Archivo Medium */
  font-size: var(--n7-hero-title-size);
  line-height: 1.2;
  letter-spacing: var(--n7-hero-title-tracking);
  color: var(--n7-hero-title-color);
}

.n7-hero__sub {
  margin: 0 0 var(--n7-hero-gap-text-to-cta);
  width: var(--n7-hero-sub-width);
  font-family: var(--n7-font-archivo);
  font-weight: 400;
  font-size: var(--n7-hero-sub-size);
  line-height: var(--n7-hero-sub-line);
  color: var(--n7-hero-sub-color);
  opacity: var(--n7-hero-sub-opacity);
}

.n7-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--n7-hero-gap-cta);
}

/* Media column */
.n7-hero__media {
  position: absolute;
  left: var(--n7-hero-media-x);
  top: var(--n7-hero-media-y);
  width: var(--n7-hero-media-width);
  height: var(--n7-hero-media-height);
  display: block;
  overflow: visible;
}

/* Figma Ellipse — centered on photo (not page X/Y; that shifted glow right) */
.n7-hero__glow-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--n7-hero-glow-circle-size);
  height: var(--n7-hero-glow-circle-size);
  border-radius: 50%;
  overflow: visible; /* let blur feather — gradients fade before edge */
  opacity: var(--n7-hero-glow-circle-opacity);
  transform: translate(
      calc(-50% + var(--n7-hero-glow-offset-x)),
      calc(-50% + var(--n7-hero-glow-offset-y))
    )
    rotate(var(--n7-hero-glow-rotation));
  pointer-events: none;
  z-index: var(--n7-z-hero-glow);
}

.n7-hero__media-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Peak at photo edge; all stops fade to transparent before the circle edge
     so the Gaussian blur reads as a soft halo (not a hard-clipped disc) */
  background:
    radial-gradient(
      ellipse var(--n7-hero-glow-ring-rx) var(--n7-hero-glow-ring-ry) at 50% 50%,
      transparent 0%,
      transparent var(--n7-hero-glow-ring-inner),
      rgba(0, 180, 253, 1) var(--n7-hero-glow-ring-peak),
      rgba(0, 58, 206, 0.7) 86%,
      transparent var(--n7-hero-glow-ring-outer)
    ),
    radial-gradient(
      50% 26% at 50% 30%,
      rgba(0, 180, 253, 1) 0%,
      rgba(0, 58, 206, 0.6) 36%,
      transparent 64%
    ),
    radial-gradient(
      26% 50% at 30% 50%,
      rgba(0, 58, 206, 1) 0%,
      rgba(0, 180, 253, 0.6) 36%,
      transparent 64%
    ),
    radial-gradient(
      50% 26% at 50% 70%,
      rgba(0, 180, 253, 1) 0%,
      rgba(146, 128, 253, 0.55) 36%,
      transparent 64%
    ),
    radial-gradient(20% 38% at 72% 50%, rgba(0, 58, 206, 0.1) 0%, transparent 50%),
    var(--n7-hero-glow-fill);
  filter: blur(var(--n7-hero-glow-layer-blur));
  -webkit-filter: blur(var(--n7-hero-glow-layer-blur));
  will-change: filter;
}

/* Photo + glass cards — overflow visible so cards extend past image */
.n7-hero__media-stage {
  position: relative;
  z-index: 1;
  width: var(--n7-hero-photo-width);
  height: var(--n7-hero-photo-height);
  overflow: visible;
}

.n7-hero__photo-wrap {
  position: relative;
  z-index: var(--n7-z-hero-photo);
  width: var(--n7-hero-photo-width);
  height: var(--n7-hero-photo-height);
  flex-shrink: 0;
  overflow: visible;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  background: var(--n7-bg); /* WebP matte — hero dark shows through alpha */
}

.n7-hero__photo {
  position: relative;
  z-index: var(--n7-z-hero-photo);
  display: block;
  width: var(--n7-hero-photo-width);
  height: var(--n7-hero-photo-height);
  object-fit: cover;
  object-position: center;
  border-radius: var(--n7-hero-photo-radius);
}

/* Activity card → styles/components/activity-card.css */
/* Balance card → styles/components/balance-card.css */

/* Trusted-by block (Desktop-1: x=80, y=655.06) */
.n7-trusted {
  position: absolute;
  left: var(--n7-trusted-x);
  top: var(--n7-trusted-y);
  width: var(--n7-trusted-width);
  display: grid;
  grid-template-rows: auto auto;
  justify-items: start;
  row-gap: var(--n7-trusted-label-gap);
  margin: 0;
  padding: 0;
}

.n7-trusted__label {
  display: block;
  width: 100%;
  margin: 0;
  font-family: var(--n7-font-archivo);
  font-weight: 500;
  font-size: var(--n7-trusted-label-size);
  line-height: 1.3;
  color: var(--n7-ice-E9F4F9);
  opacity: 0.7;
  text-transform: lowercase;
}

.n7-trusted__logos {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: var(--n7-trusted-logo-gap);
  width: 100%;
}

.n7-trusted__logo {
  display: block;
  height: var(--n7-trusted-logo-height);
  width: auto;
  flex-shrink: 0;
}

/* ===== responsive/hero.css ===== */
/*
 * Hero + Trusted By — tablet & mobile only (≥992px unchanged in hero.css)
 * Glass cards scale with the photo (same proportions / gaps as 1440 layout).
 */

/* ─── Tablet + mobile (≤991px) ─── */
@media (max-width: 991px) {
  .n7-hero {
    overflow-x: clip;
  }

  .n7-hero .n7-hero__inner.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    min-height: 0;
    padding-top: clamp(96px, 18vw, 120px);
    padding-bottom: clamp(40px, 8vw, 56px);
    padding-left: clamp(20px, 5vw, 32px);
    padding-right: clamp(20px, 5vw, 32px);
    gap: 0;
  }

  .n7-hero__content {
    position: static;
    order: 1;
    width: 100%;
    max-width: 640px;
    height: auto;
    margin: 0 auto;
    text-align: center;
  }

  .n7-hero__title {
    font-size: clamp(36px, 7.2vw, 52px);
    letter-spacing: clamp(-0.4px, -0.012em, var(--n7-hero-title-tracking));
    margin-bottom: clamp(12px, 3vw, 16px);
  }

  .n7-hero__sub {
    width: 100%;
    max-width: min(356px, 92vw);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(28px, 6vw, var(--n7-hero-gap-text-to-cta));
    font-size: clamp(15px, 2.2vw, var(--n7-hero-sub-size));
  }

  .n7-hero__actions {
    justify-content: center;
    gap: clamp(12px, 3vw, var(--n7-hero-gap-cta));
  }

  .n7-hero__media {
    position: static;
    order: 2;
    width: 100%;
    max-width: min(400px, calc(100vw - 32px));
    height: auto;
    margin: clamp(28px, 6vw, 40px) auto clamp(20px, 5vw, 32px);
    /* Space for cards that extend past photo (same bleed as laptop) */
    padding-inline: clamp(20px, 8vw, 48px);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    overflow: visible;
  }

  .n7-hero__media-stage {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
  }

  /* Single coordinate system for both cards (matches laptop) */
  .n7-hero__photo-wrap {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 362.64 / 300.71;
    overflow: visible;
    border-radius: clamp(20px, 5vw, var(--n7-hero-photo-radius));
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    background: var(--n7-bg); /* WebP matte — hero dark shows through alpha */
    container-type: size;
    container-name: n7-hero-photo;
    --n7-hcw: calc(100cqw / var(--n7-hero-photo-width));
    --n7-hch: calc(100cqh / var(--n7-hero-photo-height));
    --n7-card-k: 0.78;
  }

  .n7-hero__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: clamp(20px, 5vw, var(--n7-hero-photo-radius));
  }

  .n7-hero__glow-orbit {
    width: calc(var(--n7-hero-glow-circle-size) * 100cqw / var(--n7-hero-photo-width));
    height: calc(var(--n7-hero-glow-circle-size) * 100cqh / var(--n7-hero-photo-height));
  }

  .n7-hero__media-glow {
    filter: blur(calc(var(--n7-hero-glow-layer-blur) * 100cqw / var(--n7-hero-photo-width)));
    -webkit-filter: blur(calc(var(--n7-hero-glow-layer-blur) * 100cqw / var(--n7-hero-photo-width)));
  }

  /*
   * Glass cards — same Figma anchors as laptop, scaled by photo + --n7-card-k
   * Activity: left -128, top 150 | Balance: right -56, top 8%
   */
  .n7-hero .n7-activity-card {
    left: calc(
      var(--n7-activity-card-x) * var(--n7-hcw) * var(--n7-card-k) + 24px
    );
    right: auto;
    top: calc(var(--n7-activity-card-y) * var(--n7-hch) * var(--n7-card-k));
    bottom: auto;
    width: calc(var(--n7-activity-card-width) * var(--n7-hcw) * var(--n7-card-k));
    height: calc(
      (var(--n7-activity-card-height) + 4px) * var(--n7-hch) * var(--n7-card-k)
    );
    min-height: 0;
    max-height: calc(
      (var(--n7-activity-card-height) + 4px) * var(--n7-hch) * var(--n7-card-k)
    );
    z-index: var(--n7-z-activity-card);
    padding: calc(var(--n7-balance-shell-pad-y) * var(--n7-hcw) * var(--n7-card-k))
      calc(var(--n7-balance-shell-pad-x) * var(--n7-hcw) * var(--n7-card-k));
    border-radius: calc(var(--n7-activity-card-radius) * var(--n7-hcw) * var(--n7-card-k));
    backdrop-filter: blur(calc(var(--n7-balance-glass-blur) * var(--n7-hcw) * var(--n7-card-k)));
    -webkit-backdrop-filter: blur(calc(var(--n7-balance-glass-blur) * var(--n7-hcw) * var(--n7-card-k)));
    box-shadow: 0 calc(8px * var(--n7-hcw) * var(--n7-card-k))
      calc(32px * var(--n7-hcw) * var(--n7-card-k)) rgba(0, 0, 0, 0.12);
  }

  .n7-hero .n7-activity-card__panel {
    height: 100%;
    overflow: hidden;
    padding: calc(6px * var(--n7-hch) * var(--n7-card-k))
      calc(8px * var(--n7-hcw) * var(--n7-card-k));
    gap: calc(4px * var(--n7-hcw) * var(--n7-card-k));
    border-radius: calc(
      (var(--n7-activity-card-radius) - var(--n7-balance-shell-pad-y)) * var(--n7-hcw) *
        var(--n7-card-k)
    );
  }

  .n7-hero .n7-activity-card__title {
    font-size: calc(var(--n7-activity-title-size) * var(--n7-hcw) * var(--n7-card-k));
  }

  /* Four period pills — one row, Figma 45.15×15.53 scaled, equal columns */
  .n7-hero .n7-activity-card__tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    width: 100%;
    column-gap: calc(2px * var(--n7-hcw) * var(--n7-card-k));
  }

  .n7-hero .n7-activity-card__tab {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: calc(15.53px * var(--n7-hch) * var(--n7-card-k));
    min-height: calc(15.53px * var(--n7-hch) * var(--n7-card-k));
    max-height: calc(15.53px * var(--n7-hch) * var(--n7-card-k));
    padding: 0 calc(2px * var(--n7-hcw) * var(--n7-card-k));
    text-align: center;
    font-size: calc(7px * var(--n7-hcw) * var(--n7-card-k));
    line-height: 1;
    border-radius: calc(999px * var(--n7-hcw) * var(--n7-card-k));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .n7-hero .n7-activity-card__row {
    gap: calc(var(--n7-activity-row-gap) * var(--n7-hcw) * var(--n7-card-k));
  }

  .n7-hero .n7-activity-card__icon {
    width: calc(var(--n7-activity-icon-size) * var(--n7-hcw) * var(--n7-card-k));
    height: calc(var(--n7-activity-icon-size) * var(--n7-hcw) * var(--n7-card-k));
    border-radius: calc(var(--n7-activity-icon-radius) * var(--n7-hcw) * var(--n7-card-k));
  }

  .n7-hero .n7-activity-card__icon svg {
    width: calc(11px * var(--n7-hcw) * var(--n7-card-k));
    height: calc(11px * var(--n7-hcw) * var(--n7-card-k));
  }

  .n7-hero .n7-activity-card__label {
    font-size: calc(var(--n7-activity-meta-size) * var(--n7-hcw) * var(--n7-card-k));
  }

  .n7-hero .n7-activity-card__date {
    font-size: calc(var(--n7-activity-date-size) * var(--n7-hcw) * var(--n7-card-k));
  }

  .n7-hero .n7-activity-card__amount {
    font-size: calc(var(--n7-activity-amount-size) * var(--n7-hcw) * var(--n7-card-k));
  }

  .n7-hero .n7-balance-card {
    left: auto;
    right: calc(var(--n7-balance-card-offset-right) * var(--n7-hcw) * var(--n7-card-k));
    top: 8%;
    bottom: auto;
    width: calc(var(--n7-balance-card-width) * var(--n7-hcw) * var(--n7-card-k));
    height: calc(var(--n7-balance-card-height) * var(--n7-hch) * var(--n7-card-k));
    min-height: 0;
    max-height: calc(var(--n7-balance-card-height) * var(--n7-hch) * var(--n7-card-k));
    z-index: var(--n7-z-balance-card);
    padding: calc(var(--n7-balance-shell-pad-y) * var(--n7-hcw) * var(--n7-card-k))
      calc(var(--n7-balance-shell-pad-x) * var(--n7-hcw) * var(--n7-card-k));
    border-radius: calc(var(--n7-balance-card-radius) * var(--n7-hcw) * var(--n7-card-k));
    backdrop-filter: blur(calc(var(--n7-balance-glass-blur) * var(--n7-hcw) * var(--n7-card-k)));
    -webkit-backdrop-filter: blur(calc(var(--n7-balance-glass-blur) * var(--n7-hcw) * var(--n7-card-k)));
    box-shadow: 0 calc(8px * var(--n7-hcw) * var(--n7-card-k))
      calc(32px * var(--n7-hcw) * var(--n7-card-k)) rgba(0, 0, 0, 0.12);
  }

  .n7-hero .n7-balance-card__panel {
    height: 100%;
    overflow: hidden;
    justify-content: space-between;
    padding: calc(12px * var(--n7-hch) * var(--n7-card-k)) calc(14px * var(--n7-hcw) * var(--n7-card-k));
    border-radius: calc(
      (var(--n7-balance-card-radius) - var(--n7-balance-shell-pad-y)) * var(--n7-hcw) *
        var(--n7-card-k)
    );
  }

  .n7-hero .n7-balance-card__header {
    gap: calc(8px * var(--n7-hcw) * var(--n7-card-k));
  }

  .n7-hero .n7-balance-card__user {
    gap: calc(8px * var(--n7-hcw) * var(--n7-card-k));
  }

  .n7-hero .n7-balance-card__avatar {
    width: calc(var(--n7-balance-avatar-size) * var(--n7-hcw) * var(--n7-card-k));
    height: calc(var(--n7-balance-avatar-size) * var(--n7-hcw) * var(--n7-card-k));
  }

  .n7-hero .n7-balance-card__name {
    font-size: calc(11px * var(--n7-hcw) * var(--n7-card-k));
  }

  .n7-hero .n7-balance-card__greet {
    font-size: calc(9px * var(--n7-hcw) * var(--n7-card-k));
  }

  .n7-hero .n7-balance-card__notify svg {
    width: calc(16px * var(--n7-hcw) * var(--n7-card-k));
    height: calc(16px * var(--n7-hcw) * var(--n7-card-k));
  }

  .n7-hero .n7-balance-card__label {
    font-size: calc(10px * var(--n7-hcw) * var(--n7-card-k));
    margin-bottom: calc(4px * var(--n7-hch) * var(--n7-card-k));
  }

  .n7-hero .n7-balance-card__amount {
    font-size: calc(var(--n7-balance-amount-size) * var(--n7-hcw) * var(--n7-card-k));
    line-height: 1.1;
  }

  .n7-hero .n7-balance-card__amount-currency {
    font-size: calc(12px * var(--n7-hcw) * var(--n7-card-k));
  }

  .n7-hero .n7-balance-card__body {
    padding: calc(2px * var(--n7-hch) * var(--n7-card-k)) 0;
  }

  .n7-hero .n7-balance-card__divider {
    margin: calc(4px * var(--n7-hch) * var(--n7-card-k)) calc(-1px * var(--n7-hcw) * var(--n7-card-k))
      calc(6px * var(--n7-hch) * var(--n7-card-k));
  }

  .n7-hero .n7-balance-card__actions {
    gap: calc(4px * var(--n7-hcw) * var(--n7-card-k));
  }

  .n7-hero .n7-balance-card__action {
    font-size: calc(8px * var(--n7-hcw) * var(--n7-card-k));
    gap: calc(3px * var(--n7-hch) * var(--n7-card-k));
  }

  .n7-hero .n7-balance-card__action-icon {
    width: calc(28px * var(--n7-hcw) * var(--n7-card-k));
    height: calc(28px * var(--n7-hcw) * var(--n7-card-k));
  }

  .n7-hero .n7-balance-card__action-svg {
    width: calc(var(--n7-balance-action-icon-size) * var(--n7-hcw) * var(--n7-card-k));
    height: calc(var(--n7-balance-action-icon-size) * var(--n7-hcw) * var(--n7-card-k));
  }

  /* Trusted By — reset desktop absolute offsets (left/top were shifting this block) */
  .n7-trusted {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    order: 3;
    width: 100%;
    max-width: min(var(--n7-trusted-width), 100%);
    margin: clamp(40px, 10vw, 56px) auto 0;
    padding: 0;
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    align-content: start;
    row-gap: clamp(14px, 3.5vw, var(--n7-trusted-label-gap));
    text-align: center;
    z-index: 2;
    clear: both;
  }

  .n7-trusted__label {
    width: auto;
    margin: 0;
    font-size: clamp(14px, 3.6vw, var(--n7-trusted-label-size));
    text-transform: lowercase;
    opacity: 0.7;
  }

  .n7-trusted__logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    align-items: center;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    gap: clamp(14px, 4vw, 20px) clamp(10px, 3vw, var(--n7-trusted-logo-gap));
  }

  .n7-trusted__logo {
    display: block;
    height: clamp(14px, 3.8vw, var(--n7-trusted-logo-height));
    width: auto;
    max-width: 100%;
    object-fit: contain;
    flex-shrink: 0;
  }
}

/* ─── Mobile (≤767px) — stronger shrink, same laptop anchors ─── */
@media (max-width: 767px) {
  .n7-hero__photo-wrap {
    --n7-card-k: 0.7;
  }

  .n7-hero .n7-hero__inner.container {
    padding-top: clamp(88px, 22vw, 104px);
    padding-bottom: 48px;
  }

  .n7-hero__title {
    font-size: clamp(30px, 8.5vw, 40px);
    line-height: 1.15;
  }

  .n7-hero__sub {
    max-width: 100%;
    margin-bottom: 24px;
  }

  .n7-hero__actions {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .n7-hero__actions .n7-btn--outline {
    margin-inline: auto;
  }

  .n7-hero__media {
    max-width: min(360px, calc(100vw - 32px));
    margin-top: 24px;
    margin-bottom: 36px;
  }

  .n7-hero .n7-balance-card__amount {
    font-size: calc(var(--n7-balance-amount-size) * var(--n7-hcw) * var(--n7-card-k) * 0.9);
  }

  .n7-hero .n7-balance-card__action-icon {
    width: calc(24px * var(--n7-hcw) * var(--n7-card-k));
    height: calc(24px * var(--n7-hcw) * var(--n7-card-k));
  }

  .n7-trusted {
    margin-top: clamp(48px, 12vw, 64px);
    max-width: 100%;
  }

  .n7-trusted__logos {
    max-width: min(320px, 100%);
    gap: 16px 12px;
  }

  .n7-trusted__logo {
    height: clamp(13px, 3.5vw, 17px);
  }
}

/* ─── Small phones (≤479px) — iPhone SE etc. ─── */
@media (max-width: 479px) {
  .n7-hero__photo-wrap {
    --n7-card-k: 0.64;
  }

  .n7-hero__media {
    padding-inline: clamp(20px, 7.5vw, 32px);
  }

  .n7-hero .n7-activity-card {
    left: calc(
      var(--n7-activity-card-x) * var(--n7-hcw) * var(--n7-card-k) + 32px
    );
    width: calc(var(--n7-activity-card-width) * var(--n7-hcw) * var(--n7-card-k) * 0.94);
  }

  .n7-hero .n7-activity-card__tab {
    height: calc(15.53px * var(--n7-hch) * var(--n7-card-k));
    min-height: calc(15.53px * var(--n7-hch) * var(--n7-card-k));
    font-size: calc(6.5px * var(--n7-hcw) * var(--n7-card-k));
    padding: 0 1px;
  }

  .n7-hero .n7-hero__inner.container {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 84px;
    padding-bottom: 40px;
  }

  .n7-hero__title {
    font-size: clamp(26px, 7.8vw, 32px);
  }

  .n7-hero__title br {
    display: none;
  }

  .n7-hero__media {
    max-width: calc(100vw - 32px);
  }

  .n7-hero__photo-wrap {
    border-radius: 18px;
  }

  .n7-hero .n7-balance-card__amount {
    font-size: calc(var(--n7-balance-amount-size) * var(--n7-hcw) * var(--n7-card-k) * 0.85);
  }

  .n7-hero .n7-balance-card__action {
    font-size: calc(7px * var(--n7-hcw) * var(--n7-card-k));
  }

  .n7-trusted {
    margin-top: 44px;
  }

  .n7-trusted__logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 280px;
    gap: 14px 10px;
  }

  .n7-trusted__logo {
    height: 13px;
  }
}

/* Fallback when container queries are unavailable (keeps laptop-like anchors) */
@supports not (width: 1cqw) {
  @media (max-width: 991px) {
    .n7-hero .n7-activity-card {
      left: calc(-35.35% * var(--n7-card-k, 0.78) + 24px);
      top: calc(49.88% * var(--n7-card-k, 0.78));
      width: calc(70.04% * var(--n7-card-k, 0.78));
      height: calc(38.91% * var(--n7-card-k, 0.78));
    }

    @media (max-width: 479px) {
      .n7-hero .n7-activity-card {
        left: calc(-35.35% * var(--n7-card-k, 0.64) + 32px);
        width: calc(70.04% * var(--n7-card-k, 0.64));
      }
    }

    .n7-hero .n7-balance-card {
      right: calc(-15.45% * var(--n7-card-k, 0.78));
      top: 8%;
      width: calc(57.38% * var(--n7-card-k, 0.78));
      height: calc(58.86% * var(--n7-card-k, 0.78));
    }
  }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .n7-hero__media-glow {
    will-change: auto;
  }
}