/* ============================================================
   MEETAPPER LANDING
   Design tokens lifted directly from the app (theme/variables.scss)
   Single locked dark theme. Accent = brand blue #027bbc.
   Signature brand gradient = #1E30FD -> #3369DD -> #62EA94.
   Success/danger greens & reds are semantic (statuses, responses),
   matching the real in-app components.
   ============================================================ */

      :root {
        /* brand */
        --brand: #027bbc;
        --brand-tint: #1b88c3;
        --grad-a: #4a63e8;
        --grad-b: #22b8e6;
        --grad-c: #19d07a;
        --brand-gradient: linear-gradient(
          90deg,
          var(--grad-a) 0%,
          var(--grad-b) 48%,
          var(--grad-c) 100%
        );

        /* semantic (from app) */
        --success: #3ad17c;
        --success-rgb: 58, 209, 124;
        --danger: #cc3145;
        --danger-rgb: 204, 49, 69;
        --waiting: #6b73ff;

        /* surfaces (app dark steps) */
        --bg: #0f1115;
        --s-50: #1a1c20;
        --s-100: #25272b;
        --s-150: #303236;
        --s-200: #3c3d40;
        --s-250: #47484b;

        /* text (app steps) */
        --text: #eee;
        --t-200: #c1c2c3;
        --t-300: #abacad;
        --t-400: #959697;
        --t-500: #7f8082;
        --t-600: #68696c;
        --t-700: #525356;

        /* radius scale (locked) */
        --r-card: 22px;
        --r-md: 14px;
        --r-sm: 10px;
        --r-pill: 999px;

        --maxw: 1180px;
        --ease: cubic-bezier(0.16, 1, 0.3, 1);
      }

      * {
        box-sizing: border-box;
      }
      html {
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
        overflow-x: clip;
      }
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
      }

      body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font-family:
          "Inter",
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          sans-serif;
        font-size: 16px;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overflow-x: clip;
      }

      h1,
      h2,
      h3 {
        font-family: "Inter Tight", "Inter", sans-serif;
        margin: 0;
        line-height: 1.05;
        letter-spacing: -0.02em;
      }
      p {
        margin: 0;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      img,
      svg {
        display: block;
        max-width: 100%;
      }

      .wrap {
        width: 100%;
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 24px;
      }

      /* ambient brand glow backdrop */
      .glow {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
      }
      .glow::before,
      .glow::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(120px);
        opacity: 0.5;
      }
      .glow::before {
        width: 620px;
        height: 620px;
        top: -240px;
        left: 50%;
        transform: translateX(-60%);
        background: radial-gradient(
          circle,
          rgba(30, 48, 253, 0.35),
          transparent 70%
        );
      }
      .glow::after {
        width: 560px;
        height: 560px;
        top: 120px;
        right: -180px;
        background: radial-gradient(
          circle,
          rgba(98, 234, 148, 0.18),
          transparent 70%
        );
      }

      /* ---------------- NAV ---------------- */
      header {
        position: sticky;
        top: 0;
        z-index: 50;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        background: rgba(15, 17, 21, 0.72);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }
      .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 68px;
      }
      .brand-mark {
        display: flex;
        align-items: center;
        gap: 9px;
      }
      .brand-mark img {
        height: 30px;
        width: 30px;
        border-radius: 8px;
      }
      .brand-name {
        font-family: "Inter Tight", sans-serif;
        font-weight: 700;
        font-size: 19px;
        letter-spacing: -0.02em;
        color: var(--text);
      }
      .nav-actions {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .nav-link {
        color: var(--t-300);
        font-weight: 500;
        font-size: 15px;
        padding: 8px 12px;
        border-radius: var(--r-sm);
        transition: color 0.2s var(--ease);
      }
      .nav-link:hover {
        color: var(--text);
      }

      /* ---- language switcher ---- */
      .lang-switch {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 3px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--r-pill);
        background: rgba(255, 255, 255, 0.04);
      }
      .lang-switch a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        padding: 5px 8px;
        border-radius: var(--r-pill);
        font-weight: 600;
        font-size: 13px;
        line-height: 1;
        letter-spacing: 0.02em;
        color: var(--t-300);
        transition:
          color 0.2s var(--ease),
          background 0.2s var(--ease);
      }
      .lang-switch a:hover {
        color: var(--text);
      }
      .lang-switch a.is-active {
        background: var(--brand-gradient);
        color: #06121b;
      }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        font-weight: 600;
        font-size: 15px;
        border-radius: var(--r-pill);
        padding: 11px 20px;
        cursor: pointer;
        border: 1px solid transparent;
        transition:
          transform 0.15s var(--ease),
          background 0.2s var(--ease),
          border-color 0.2s var(--ease);
        white-space: nowrap;
        line-height: 1;
      }
      .btn:active {
        transform: translateY(1px);
      }
      .btn-ghost {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.12);
        color: var(--text);
      }
      .btn-ghost:hover {
        background: rgba(255, 255, 255, 0.09);
        border-color: rgba(255, 255, 255, 0.2);
      }
      .btn-primary {
        background: var(--brand);
        color: #fff;
        box-shadow: 0 8px 26px rgba(2, 123, 188, 0.35);
      }
      .btn-primary:hover {
        background: var(--brand-tint);
      }
      .btn-lg {
        font-size: 16px;
        padding: 13px 24px;
      }
      .btn-lg svg {
        width: 19px;
        height: 19px;
      }

      a:focus-visible,
      .btn:focus-visible,
      .btn-app:focus-visible,
      .gp-link:focus-visible {
        outline: 2px solid var(--grad-b);
        outline-offset: 3px;
      }

      /* official Google Play badge (required by Google brand guidelines) */
      .gp-link {
        display: inline-flex;
        align-items: center;
        transition: opacity 0.2s var(--ease);
      }
      .gp-link:hover {
        opacity: 0.85;
      }
      .gp-link:active {
        transform: translateY(1px);
      }
      .gp-badge {
        height: 54px;
        width: auto;
        display: block;
      }
      .gp-badge.nav-badge {
        height: 42px;
      }
      .btn-app {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: var(--brand-gradient);
        color: #000;
        font-weight: 600;
        font-size: 16.5px;
        border-radius: var(--r-pill);
        padding: 14px 26px;
        line-height: 1;
        white-space: nowrap;
        box-shadow: 0 10px 30px rgba(34, 184, 230, 0.28);
        transition:
          transform 0.15s var(--ease),
          box-shadow 0.2s var(--ease),
          filter 0.2s var(--ease);
      }
      .btn-app:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 38px rgba(34, 184, 230, 0.42);
        filter: brightness(1.05);
      }
      .btn-app:active {
        transform: translateY(0);
      }
      .btn-app svg {
        width: 20px;
        height: 20px;
      }
      .btn-app.sm {
        font-size: 14px;
        padding: 9px 16px;
        gap: 7px;
        box-shadow: 0 6px 18px rgba(34, 184, 230, 0.25);
      }
      .btn-app.sm svg {
        width: 16px;
        height: 16px;
      }
      .avail-note a {
        color: var(--grad-b);
        font-weight: 500;
      }
      .avail-note a:hover {
        text-decoration: underline;
      }

      /* ---------------- HERO ---------------- */
      .hero {
        position: relative;
        z-index: 1;
        padding: 50px 0 76px;
        text-align: center;
        overflow: hidden;
      }
      .hero-inner {
        position: relative;
        z-index: 3;
        max-width: 720px;
        margin: 0 auto;
      }

      /* background places-constellation */
      .pins {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
      }
      .pin {
        position: absolute;
        display: block;
        animation: floatP 7s ease-in-out infinite;
      }
      .pin svg {
        display: block;
      }
      .pin.blue {
        color: #3b6bff;
        filter: drop-shadow(0 0 11px rgba(59, 107, 255, 0.55));
      }
      .pin.green {
        color: #2fce85;
        filter: drop-shadow(0 0 11px rgba(47, 206, 133, 0.5));
      }
      .p1 {
        top: 16%;
        left: 11%;
        opacity: 0.55;
        animation-delay: 0s;
      }
      .p2 {
        top: 20%;
        right: 12%;
        opacity: 0.5;
        animation-delay: 1.1s;
      }
      .p3 {
        top: 55%;
        left: 8%;
        opacity: 0.42;
        animation-delay: 0.6s;
      }
      .p4 {
        top: 49%;
        right: 7%;
        opacity: 0.48;
        animation-delay: 1.7s;
      }
      .p5 {
        top: 79%;
        left: 17%;
        opacity: 0.4;
        animation-delay: 0.9s;
      }
      .p6 {
        top: 82%;
        right: 16%;
        opacity: 0.44;
        animation-delay: 2.3s;
      }
      .p7 {
        top: 38%;
        right: 4%;
        opacity: 0.3;
        animation-delay: 1.4s;
      }
      .p8 {
        top: 88%;
        left: 47%;
        opacity: 0.26;
        animation-delay: 2.9s;
      }
      @keyframes floatP {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-12px);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .pin {
          animation: none;
        }
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--t-600);
        margin-bottom: 22px;
      }

      .hero h1 {
        font-size: clamp(38px, 4.8vw, 58px);
        font-weight: 800;
      }
      .hero h1 .accent {
        background: var(--brand-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        white-space: nowrap;
      }
      .hero-sub {
        margin: 20px auto 0;
        font-size: 16px;
        line-height: 1.55;
        color: var(--t-500);
        max-width: 40em;
      }
      .hero-sub b {
        color: var(--text);
        font-weight: 600;
      }

      .cta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 32px;
        justify-content: center;
      }
      .avail-note {
        margin-top: 18px;
        font-size: 14px;
        color: var(--t-400);
        text-align: center;
      }
      .avail-note svg {
        display: inline-block;
        width: 16px;
        height: 16px;
        color: var(--success);
        vertical-align: -3px;
        margin-right: 5px;
      }

      /* ---------- phone mockup ---------- */
      .phone-wrap {
        position: relative;
        z-index: 3;
        display: flex;
        justify-content: center;
        margin-top: 56px;
      }
      .phone {
        position: relative;
        width: 300px;
        max-width: 86vw;
        border-radius: 46px;
        padding: 10px;
        background: linear-gradient(160deg, #2a2c31, #131418);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow:
          0 40px 90px rgba(0, 0, 0, 0.6),
          inset 0 1px 0 rgba(255, 255, 255, 0.12);
      }
      .phone-screen {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 36px;
        overflow: hidden;
        background: var(--bg);
        display: flex;
        flex-direction: column;
      }
      .phone-notch {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 92px;
        height: 26px;
        background: #000;
        border-radius: var(--r-pill);
        z-index: 4;
      }
      /* TEMPORARY: real screenshot filling the phone screen */
      .phone-shot {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        display: block;
      }

      /* ===== AVATARS (mirror app avatar + status badge) ===== */
      .av {
        position: relative;
        border-radius: 50%;
        flex: none;
        overflow: visible;
      }
      .av img,
      .av .av-fb {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        display: block;
      }
      .av-fb {
        display: grid;
        place-items: center;
        color: #fff;
        font-weight: 600;
        background: linear-gradient(135deg, #8a8d93, #5c6068);
        font-size: 12px;
      }
      .av-28 {
        width: 28px;
        height: 28px;
      }

      /* floating chips around phone */
      .chip {
        position: absolute;
        z-index: 4;
        background: rgba(28, 30, 35, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--r-md);
        padding: 11px 13px;
        backdrop-filter: blur(12px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
        text-align: left;
        animation: float 6s ease-in-out infinite;
      }
      .chip-notif {
        top: -24px;
        left: 50%;
        width: 340px;
        max-width: 84vw;
        transform: translateX(-50%) translateY(-46px) scale(0.92);
        opacity: 0;
        animation: none; /* hidden until the phone scrolls into view */
        will-change: transform, opacity;
      }
      /* drop-in on scroll: triggered once the phone is scrolled into view */
      .phone-wrap.notif-go .chip-notif {
        animation:
          notif-in 0.72s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both,
          floatC 6s ease-in-out 0.82s infinite;
      }
      @keyframes float {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10px);
        }
      }
      @keyframes notif-in {
        0% {
          opacity: 0;
          transform: translateX(-50%) translateY(-46px) scale(0.92);
        }
        55% {
          opacity: 1;
        }
        100% {
          opacity: 1;
          transform: translateX(-50%) translateY(0) scale(1);
        }
      }
      @keyframes floatC {
        0%,
        100% {
          transform: translate(-50%, 0);
        }
        50% {
          transform: translate(-50%, -9px);
        }
      }
      .pill-decide.grad {
        color: #fff;
      }

      @media (prefers-reduced-motion: reduce) {
        .chip {
          animation: none;
        }
        .chip-notif,
        .phone-wrap.notif-go .chip-notif {
          animation: none !important;
          opacity: 1 !important;
          transform: translateX(-50%) !important;
        }
      }

      .notif-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 7px;
      }
      .notif-head img {
        width: 18px;
        height: 18px;
        border-radius: 5px;
      }
      .notif-head .nh-app {
        font-size: 11px;
        font-weight: 600;
        color: var(--t-300);
      }
      .notif-head .nh-time {
        font-size: 11px;
        color: var(--t-500);
        margin-left: auto;
      }
      .notif-title {
        font-size: 13px;
        font-weight: 600;
      }
      .notif-body {
        font-size: 12px;
        color: var(--t-300);
        margin-top: 2px;
      }
      .notif-actions {
        display: flex;
        gap: 7px;
        margin-top: 10px;
      }

      /* decision pills (mirror availability-actions-bar) */
      .pill-decide {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-radius: var(--r-pill);
        font-size: 12.5px;
        font-weight: 700;
        padding: 9px 14px;
        line-height: 1;
        border: 1px solid var(--s-250);
        background: #3c3c3c30;
        color: var(--text);
      }
      .pill-decide svg {
        width: 14px;
        height: 14px;
      }
      .pill-decide.reject {
        border-color: rgba(177, 177, 177, 0.22);
        color: #b1b1b1;
      }

      /* ---------------- SECTION SHELL ---------------- */
      section {
        position: relative;
        z-index: 1;
      }
      .sec-head {
        max-width: 800px;
        margin: 0 auto 44px;
        text-align: center;
      }
      .sec-head h2 {
        font-size: clamp(30px, 4.4vw, 46px);
        font-weight: 700;
      }
      .sec-head p {
        margin-top: 16px;
        font-size: 18px;
        color: var(--t-300);
      }

      /* ---------------- FEATURES BENTO ---------------- */
      .features {
        padding: 56px 0 30px;
      }
      .bento {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
      }
      .cell {
        background: var(--s-50);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: var(--r-card);
        padding: 30px;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
        transition:
          border-color 0.25s var(--ease),
          transform 0.25s var(--ease);
      }
      /* stagger within bento rows */
      .bento .cell:nth-child(3),
      .bento .cell:nth-child(5) {
        transition-delay: 0.12s;
      }
      .bento .cell:nth-child(3):hover,
      .bento .cell:nth-child(5):hover {
        transition-delay: 0s;
      }
      .cell:hover {
        border-color: rgba(255, 255, 255, 0.16);
        transform: translateY(-3px);
      }
      .cell.wide {
        grid-column: span 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        align-items: stretch;
      }
      .f1-copy {
        display: flex;
        flex-direction: column;
      }
      .f1-acts {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        margin-top: auto;
        padding-top: 28px;
      }
      .act {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--s-100);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--r-pill);
        padding: 8px 13px;
        font-size: 14px;
        font-weight: 500;
        color: var(--t-200);
        transition:
          border-color 0.2s var(--ease),
          transform 0.2s var(--ease),
          color 0.2s var(--ease);
      }
      .act:hover {
        border-color: rgba(255, 255, 255, 0.2);
        color: var(--text);
        transform: translateY(-1px);
      }
      .cell-label {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-size: 13px;
        font-weight: 600;
        color: var(--grad-c);
        margin-bottom: 14px;
      }
      .cell-label svg {
        width: 18px;
        height: 18px;
      }
      .cell h3 {
        font-size: 23px;
        font-weight: 700;
        letter-spacing: -0.01em;
      }
      .cell p {
        margin-top: 11px;
        font-size: 15.5px;
        color: var(--t-300);
        line-height: 1.55;
        max-width: 34em;
      }
      .cell-demo {
        margin: auto 0;
        padding-top: 22px;
      }
      .cell.wide .cell-demo {
        margin: 0;
        padding-top: 0;
      }
      .f1-shot {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 400px;
        margin: 0 auto;
        border-radius: 16px;
      }
      .demo-shot {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 350px;
        margin: 2px auto 0;
      }

      /* F3 demo: places */
      .place-panel {
        background: var(--bg);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: var(--r-md);
        padding: 16px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
      }
      .place-search {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--s-150);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--r-pill);
        padding: 10px 16px;
        font-size: 14px;
        color: var(--t-300);
        margin-bottom: 14px;
      }
      .place-search svg {
        width: 17px;
        height: 17px;
        color: var(--t-400);
      }
      .place-search .cnt {
        margin-left: auto;
        font-size: 12px;
        color: var(--t-500);
      }
      /* place discovery: real venue cards (photo + category + rating) */
      .place-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      .pcard {
        position: relative;
        display: block;
        height: 132px;
        min-width: 0;
        border-radius: var(--r-md);
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: var(--s-100);
      }
      .pcard img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .pcard::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.82) 0%,
          rgba(0, 0, 0, 0.12) 48%,
          transparent 72%
        );
      }
      .pcat {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: rgba(15, 17, 21, 0.72);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--r-pill);
        padding: 3px 8px;
        font-size: 10.5px;
        font-weight: 600;
      }
      .pcat svg {
        width: 11px;
        height: 11px;
      }
      .pcat.k {
        color: var(--success);
      }
      .pcat.kino {
        color: #ff7a5c;
      }
      .pcat.pub {
        color: #4db4e6;
      }
      .pcat.cafe {
        color: #e0a45c;
      }
      .pcard-info {
        position: absolute;
        left: 11px;
        right: 11px;
        bottom: 9px;
        z-index: 2;
      }
      .pcard-name {
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .pcard-rate {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.82);
        margin-top: 3px;
      }
      .pcard-rate svg {
        width: 12px;
        height: 12px;
        color: #ffc107;
      }

      /* F4 demo: chat */
      .chat {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .bubble {
        max-width: 78%;
        padding: 9px 12px;
        border-radius: 12px;
        font-size: 14px;
        line-height: 1.35;
      }
      .bubble.other {
        background: var(--s-100);
        align-self: flex-start;
        border-bottom-left-radius: 3px;
      }
      .bubble.own {
        background: var(--brand);
        color: #fff;
        align-self: flex-end;
        border-bottom-right-radius: 3px;
      }
      .typing {
        align-self: flex-start;
        background: var(--s-100);
        border-radius: 12px;
        border-bottom-left-radius: 3px;
        padding: 12px 14px;
        display: inline-flex;
        gap: 4px;
      }
      .typing i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--t-400);
        animation: bounce 1.4s ease-in-out infinite;
      }
      .typing i:nth-child(2) {
        animation-delay: 0.2s;
      }
      .typing i:nth-child(3) {
        animation-delay: 0.4s;
      }
      @keyframes bounce {
        0%,
        60%,
        100% {
          transform: translateY(0);
          opacity: 0.6;
        }
        30% {
          transform: translateY(-4px);
          opacity: 1;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .typing i {
          animation: none;
        }
      }

      /* F5 demo: groups */
      .group-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .group-row {
        display: flex;
        align-items: center;
        gap: 13px;
        background: var(--s-100);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: var(--r-md);
        padding: 13px 15px;
      }
      .group-row .g-name {
        font-size: 15px;
        font-weight: 600;
      }
      .group-row .g-meta {
        font-size: 12px;
        color: var(--t-400);
      }
      .group-row .lock {
        margin-left: auto;
        color: var(--t-500);
        display: grid;
        place-items: center;
      }
      .group-row .lock svg {
        width: 16px;
        height: 16px;
      }
      .stack {
        display: flex;
      }
      .stack .av {
        border: 2px solid var(--s-100);
        border-radius: 50%;
      }
      .stack .av:not(:first-child) {
        margin-left: -10px;
      }
      .stack .more {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--s-200);
        border: 2px solid var(--s-100);
        display: grid;
        place-items: center;
        font-size: 11px;
        font-weight: 600;
        color: var(--t-200);
        margin-left: -10px;
        z-index: 2;
      }

      /* ---------------- CLOSING CTA ---------------- */
      .closing {
        padding: 80px 0 90px;
      }
      .closing-card {
        position: relative;
        border-radius: 30px;
        padding: 64px 40px;
        text-align: center;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background:
          radial-gradient(
            circle at 50% -20%,
            rgba(30, 48, 253, 0.28),
            transparent 60%
          ),
          linear-gradient(180deg, var(--s-50), #14161a);
      }
      .closing-card::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 6px;
        background: var(--brand-gradient);
      }
      .closing-card h2 {
        font-size: clamp(34px, 5vw, 56px);
        font-weight: 800;
      }
      .closing-card h2 .accent {
        background: var(--brand-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .closing-card p {
        margin: 18px auto 0;
        font-size: 18px;
        color: var(--t-300);
        max-width: 30em;
      }
      .closing-card .cta-row {
        justify-content: center;
      }

      /* ---------------- FOOTER ---------------- */
      footer {
        position: relative;
        z-index: 1;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        padding: 44px 0 40px;
      }
      .foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
      }
      .foot-brand {
        display: flex;
        align-items: center;
        gap: 9px;
      }
      .foot-brand img {
        height: 28px;
        width: 28px;
        border-radius: 7px;
      }
      .foot-brand span {
        font-family: "Inter Tight", sans-serif;
        font-weight: 700;
        font-size: 18px;
        letter-spacing: -0.02em;
        color: var(--text);
      }
      .foot-links {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
      }
      .foot-links a {
        color: var(--t-400);
        font-size: 14px;
        transition: color 0.2s var(--ease);
      }
      .foot-links a:hover {
        color: var(--text);
      }
      .foot-copy {
        color: var(--t-600);
        font-size: 13px;
        margin-top: 22px;
      }

      /* ---------------- REVEAL ---------------- */
      .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition:
          opacity 0.7s var(--ease),
          transform 0.7s var(--ease);
      }
      .reveal.in {
        opacity: 1;
        transform: none;
      }
      @media (prefers-reduced-motion: reduce) {
        .reveal {
          opacity: 1;
          transform: none;
          transition: none;
        }
      }

      /* ---------------- RESPONSIVE ---------------- */
      @media (max-width: 940px) {
        .hero {
          padding-top: 40px;
        }
        .cell.wide {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 720px) {
        .bento {
          grid-template-columns: 1fr;
        }
        .cell.wide {
          grid-column: span 1;
        }
        .nav-link.hide-sm {
          display: none;
        }
        .pins {
          display: none;
        }
        .hero h1 {
          white-space: normal;
          font-size: clamp(38px, 7.8vw, 58px);
        }
      }
      @media (max-width: 560px) {
        .wrap {
          padding: 0 18px;
        }
        .nav-actions .btn-app {
          display: none;
        }
        .closing-card {
          padding: 44px 22px;
        }
        .hero-sub {
          font-size: 17px;
        }
      }