:root {
        --bg: #040814;
        --bg-2: #030611;
        --panel: rgba(12, 18, 35, 0.92);
        --surface: rgba(255, 255, 255, 0.035);
        --surface-2: rgba(255, 255, 255, 0.045);
        --line: rgba(255, 255, 255, 0.08);
        --line-soft: rgba(255, 255, 255, 0.055);
        --text: #eef2ff;
        --muted: rgba(238, 242, 255, 0.72);
        --muted-2: rgba(238, 242, 255, 0.48);
        --accent-a: #7dd3fc;
        --accent-b: #06b6d4;
        --accent-c: #22d3ee;
        --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
        --transition: 520ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        min-height: 100vh;
        font-family:
          Inter,
          ui-sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;
        color: var(--text);
        background:
          radial-gradient(circle at 20% 0%, rgba(125, 211, 252, 0.1), transparent 28%),
          radial-gradient(circle at 70% 90%, rgba(6, 182, 212, 0.06), transparent 22%),
          linear-gradient(180deg, #030611 0%, #030817 54%, #040814 100%);
        overflow-x: hidden;
      }

      img,
      svg,
      canvas,
      video {
        max-width: 100%;
        display: block;
      }

      .page {
        position: relative;
        min-height: 100vh;
        overflow: hidden;
      }

      .page::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          radial-gradient(circle at 18% 20%, rgba(125, 211, 252, 0.1), transparent 16%),
          radial-gradient(circle at 82% 66%, rgba(6, 182, 212, 0.06), transparent 16%);
      }

      .container {
        position: relative;
        z-index: 1;
        width: min(1220px, calc(100% - 40px));
        margin: 0 auto;
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: max(20px, env(safe-area-inset-top)) 0 8px;
      }

      .brand-mark {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        text-transform: uppercase;
        letter-spacing: 0.34em;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
      }

      @media (max-width: 640px) {
        .brand-mark {
          min-height: 34px;
          font-size: 10px;
          letter-spacing: 0.26em;
        }
      }

      .brand {
        color: rgba(255, 255, 255, 0.54);
      }

      .login-button,
      .cta-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        text-decoration: none;
        transition:
          transform var(--transition),
          border-color var(--transition),
          background var(--transition),
          box-shadow var(--transition),
          filter var(--transition),
          opacity var(--transition);
      }

      .login-button {
        min-width: 104px;
        height: 40px;
        padding: 0 18px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.05),
          0 10px 24px rgba(0, 0, 0, 0.18);
        color: rgba(255, 255, 255, 0.92);
        font-size: 12px;
        font-weight: 600;
        backdrop-filter: blur(16px);
      }

      .login-button:hover,
      .cta-button:hover {
        transform: translateY(-1px);
        filter: saturate(1.03);
      }

      .hero {
        flex: 1;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.82fr);
        gap: clamp(28px, 4vw, 60px);
        align-items: center;
        padding: 8px 0 18px;
      }

      .copy {
        max-width: 620px;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.035);
        backdrop-filter: blur(18px);
        font-size: 10px;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.6);
      }

      .eyebrow::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
        box-shadow: 0 0 18px rgba(125, 211, 252, 0.3);
      }

      h1 {
        margin-top: 18px;
        font-size: clamp(30px, 3.2vw, 46px);
        line-height: 1.02;
        letter-spacing: -0.05em;
        font-weight: 650;
        text-wrap: balance;
      }

      .description {
        margin-top: 18px;
        max-width: 540px;
        font-size: clamp(16px, 1.22vw, 20px);
        line-height: 1.72;
        color: var(--muted);
      }

      .hero-actions {
        margin-top: 28px;
      }

      .cta-button {
        position: relative;
        min-width: 220px;
        height: 56px;
        padding: 0 28px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: linear-gradient(180deg, rgba(20, 27, 48, 0.96), rgba(9, 14, 28, 0.98));
        color: #f8fbff;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.01em;
        backdrop-filter: blur(14px);
        box-shadow:
          0 18px 40px rgba(0, 0, 0, 0.34),
          0 0 0 1px rgba(125, 211, 252, 0.14),
          inset 0 1px 0 rgba(255, 255, 255, 0.09),
          inset 0 -1px 0 rgba(255, 255, 255, 0.03);
      }

      .cta-button:hover {
        transform: translateY(-2px);
        filter: none;
        border-color: rgba(255, 255, 255, 0.18);
        background: linear-gradient(180deg, rgba(24, 33, 58, 0.98), rgba(11, 17, 33, 1));
        box-shadow:
          0 22px 46px rgba(0, 0, 0, 0.38),
          0 0 0 1px rgba(219, 239, 255, 0.22),
          inset 0 1px 0 rgba(255, 255, 255, 0.11),
          inset 0 -1px 0 rgba(255, 255, 255, 0.04);
      }

      .cta-button:focus-visible {
        outline: none;
        border-color: rgba(125, 211, 252, 0.3);
        box-shadow:
          0 0 0 3px rgba(125, 211, 252, 0.16),
          0 18px 40px rgba(0, 0, 0, 0.34),
          0 0 0 1px rgba(219, 239, 255, 0.18),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }

      .cta-button::before {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        top: 0;
        height: 1px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(124, 58, 237, 0), rgba(219, 239, 255, 0.9), rgba(34, 211, 238, 0.7), rgba(34, 211, 238, 0));
        opacity: 0.95;
        pointer-events: none;
      }

      .cta-button::after {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 55%);
      }

      .hero-note {
        display: none;
      }

      .stage {
        position: relative;
        height: 100%;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .glow {
        position: absolute;
        left: 52%;
        top: 50%;
        width: 220px;
        height: 220px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        filter: blur(52px);
        opacity: 0.52;
        transition:
          background var(--transition),
          opacity var(--transition);
      }

      .phone-wrap {
        position: relative;
        width: min(clamp(300px, 24vw, 360px), calc((100dvh - 150px) * 0.53));
        aspect-ratio: 332 / 628;
        display: flex;
        align-items: center;
        justify-content: center;
        perspective: 1800px;
      }

      .phone {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 44px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: linear-gradient(145deg, rgba(30, 36, 56, 0.92), rgba(7, 11, 24, 0.98));
        box-shadow:
          0 56px 130px rgba(0, 0, 0, 0.52),
          inset 0 1px 0 rgba(255, 255, 255, 0.06),
          inset 0 12px 24px rgba(255, 255, 255, 0.03),
          inset 0 -10px 20px rgba(0, 0, 0, 0.3);
        padding: 10px;
        transform-style: preserve-3d;
        animation: phoneFloat 11s ease-in-out infinite;
      }

      .phone::before {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: 42px;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.02) 75%, rgba(0, 0, 0, 0.2));
      }

      .phone::after {
        content: "";
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: 96px;
        height: 24px;
        border-radius: 0 0 18px 18px;
        background: linear-gradient(180deg, #060914, #0b1020);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
        z-index: 4;
      }

      .phone-screen {
        position: relative;
        height: 100%;
        border-radius: 34px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background:
          radial-gradient(circle at 70% 0%, rgba(30, 77, 137, 0.18), transparent 28%),
          linear-gradient(180deg, rgba(14, 21, 39, 0.98), rgba(5, 10, 22, 1));
        padding: 14px 14px 12px;
      }

      .screen-light {
        position: absolute;
        left: -12%;
        right: -12%;
        top: -10%;
        height: 24%;
        border-radius: 999px;
        opacity: 0.1;
        filter: blur(32px);
        transition: background var(--transition);
      }

      .screen-content {
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        flex-direction: column;
      }

      .statusbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px 6px 0;
        font-size: 10px;
        color: rgba(255, 255, 255, 0.46);
      }

      .status-icons {
        display: flex;
        gap: 4px;
        align-items: center;
      }
      .status-icons span {
        width: 5px;
        height: 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.32);
      }

      .app-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-top: 28px;
      }

      .app-title {
        font-size: 20px;
        line-height: 1;
        letter-spacing: -0.045em;
        font-weight: 650;
      }

      .app-subtitle {
        margin-top: 6px;
        font-size: 10px;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.42);
      }

      .plus-button {
        width: 34px;
        height: 34px;
        border-radius: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.78);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
      }

      .plus-button svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
      }

      .phone-screen-stack {
        position: relative;
        flex: 1;
        min-height: 0;
        padding-top: 30px;
        padding-bottom: 60px;
      }

      .phone-panel {
        position: absolute;
        inset: 0;
        opacity: 0;
        transform: translateY(12px);
        pointer-events: none;
        transition:
          opacity 420ms ease,
          transform 420ms ease;
      }

      .phone-panel.active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }

      .section-top {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 10px;
      }

      .section-label {
        font-size: 9px;
        line-height: 1;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.34);
      }

      .section-meta {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.5);
      }

      .overview-card,
      .money-card {
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.024));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
      }

      .overview-card {
        padding: 11px;
      }

      .stat-grid {
        margin-top: 12px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .stat-pill {
        padding: 10px 10px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.045);
        background: rgba(255, 255, 255, 0.022);
      }

      .stat-value {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.24;
        color: rgba(255, 255, 255, 0.94);
      }

      .agenda {
        margin-top: 18px;
        display: grid;
        gap: 2px;
      }

      .agenda-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 9px;
        padding: 9px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.035);
      }

      .agenda-row:last-child {
        border-bottom: none;
      }

      .row-left {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
      }

      .icon-wrap {
        width: 26px;
        height: 26px;
        border-radius: 9px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.026);
        border: 1px solid rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.72);
        flex: 0 0 auto;
      }

      .icon-wrap.is-accent {
        background: linear-gradient(135deg, rgba(125, 211, 252, 0.24), rgba(6, 182, 212, 0.14));
        color: #f3f7ff;
        box-shadow: 0 8px 18px rgba(125, 211, 252, 0.1);
      }

      .icon {
        width: 13px;
        height: 13px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .row-title {
        font-size: 9px;
        line-height: 1.36;
        color: rgba(255, 255, 255, 0.92);
      }

      .row-meta {
        margin-top: 3px;
        font-size: 7px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.32);
      }

      .row-time {
        flex: 0 0 auto;
        font-size: 9px;
        color: rgba(255, 255, 255, 0.34);
      }

      .row-left > div:last-child {
        min-width: 0;
      }

      .row-title,
      .goal-name,
      .stat-value,
      .finance-balance {
        overflow-wrap: anywhere;
      }

      .money-card {
        padding: 11px;
      }

      .finance-balance {
        margin-top: 7px;
        font-size: 21px;
        line-height: 1;
        letter-spacing: -0.04em;
        font-weight: 650;
      }

      .finance-sub {
        margin-top: 4px;
        font-size: 10px;
        color: rgba(255, 255, 255, 0.4);
      }

      .goal-card {
        margin-top: 12px;
        padding: 10px;
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 0.045);
        background: rgba(255, 255, 255, 0.02);
      }

      .goal-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
      }

      .goal-name {
        margin-top: 3px;
        font-size: 11px;
        line-height: 1.32;
        color: rgba(255, 255, 255, 0.94);
      }

      .goal-percent {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.5);
      }

      .goal-track {
        margin-top: 8px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        overflow: hidden;
      }

      .goal-track span,
      .goal-track__fill {
        display: block;
        width: 68%;
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--accent-a), var(--accent-b), var(--accent-c));
      }

      .goal-track__fill--68 {
        width: 68%;
      }

      .goal-track__fill--62 {
        width: 62%;
      }

      .operations {
        margin-top: 18px;
        display: grid;
        gap: 2px;
      }

      .ops-heading {
        font-size: 9px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.32);
      }

      .habit-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .habit-list {
        margin-top: 18px;
        display: grid;
        gap: 2px;
      }

      .habit-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 9px;
        padding: 9px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.035);
      }

      .habit-row:last-child {
        border-bottom: none;
      }

      .habit-state {
        flex: 0 0 auto;
        font-size: 8px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .habit-state.done {
        color: rgba(255, 255, 255, 0.8);
      }
      .habit-state.progress {
        color: rgba(255, 255, 255, 0.6);
      }
      .habit-state.muted {
        color: rgba(255, 255, 255, 0.38);
      }

      .phone-nav {
        position: absolute;
        left: 50%;
        bottom: 2px;
        transform: translateX(-50%);
        display: flex;
        gap: 3px;
        padding: 3px;
        border-radius: 999px;
        background: rgba(10, 14, 27, 0.38);
        border: 1px solid rgba(255, 255, 255, 0.04);
        box-shadow:
          0 8px 16px rgba(0, 0, 0, 0.14),
          inset 0 1px 0 rgba(255, 255, 255, 0.02);
        backdrop-filter: blur(16px);
      }

      .phone-tab {
        width: 26px;
        height: 26px;
        border-radius: 10px;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.44);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition:
          background var(--transition),
          color var(--transition),
          transform var(--transition),
          box-shadow var(--transition);
      }

      .phone-tab .icon {
        width: 14px;
        height: 14px;
      }

      .phone-tab.active {
        color: rgba(255, 255, 255, 0.96);
        background: linear-gradient(135deg, rgba(125, 211, 252, 0.22), rgba(6, 182, 212, 0.1));
        box-shadow:
          0 8px 18px rgba(125, 211, 252, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.05);
      }

      .money-card-compact .section-top {
        align-items: center;
      }

      .money-overview {
        margin-top: 10px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 10px;
      }

      .money-month-pill {
        flex: 0 0 auto;
        padding: 6px 9px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.045);
        background: rgba(255, 255, 255, 0.022);
        font-size: 7px;
        color: rgba(255, 255, 255, 0.42);
        line-height: 1;
      }

      .money-stats-inline {
        margin-top: 12px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .money-inline-item {
        padding: 9px 10px;
        border-radius: 13px;
        border: 1px solid rgba(255, 255, 255, 0.04);
        background: rgba(255, 255, 255, 0.02);
      }

      .money-inline-label {
        font-size: 7px;
        line-height: 1;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.3);
      }

      .money-inline-value {
        margin-top: 6px;
        font-size: 11px;
        line-height: 1.15;
        color: rgba(255, 255, 255, 0.9);
      }

      .goal-card.goal-card-compact {
        margin-top: 10px;
        padding: 9px 10px 10px;
      }

      .goal-card-compact .goal-top {
        align-items: center;
      }

      .goal-card-compact .goal-name {
        margin-top: 2px;
      }

      .operations.operations-compact {
        margin-top: 14px;
      }

      .operations-compact .ops-heading {
        margin-bottom: 2px;
      }

      .operations-compact .agenda-row {
        padding: 8px 0;
      }

      @media (max-width: 640px) {
        .money-overview {
          margin-top: 8px;
          gap: 8px;
        }

        .money-month-pill {
          padding: 5px 8px;
          font-size: 6px;
        }

        .money-stats-inline {
          margin-top: 10px;
          gap: 4px;
        }

        .money-inline-item {
          padding: 8px 8px;
          border-radius: 12px;
        }

        .money-inline-label {
          font-size: 6px;
        }

        .money-inline-value {
          margin-top: 5px;
          font-size: 10px;
        }

        .goal-card.goal-card-compact {
          margin-top: 8px;
          padding: 8px 9px 9px;
        }

        .operations.operations-compact {
          margin-top: 12px;
        }

        .operations-compact .agenda-row {
          padding: 7px 0;
        }
      }

      .phone-panel > .overview-card,
      .phone-panel > .money-card,
      .phone-panel > .habit-summary,
      .phone-panel > .surface-card {
        margin-top: 2px;
      }

      @media (max-width: 640px) {
        .phone-screen-stack {
          padding-top: 24px;
        }

        .phone-panel > .overview-card,
        .phone-panel > .money-card,
        .phone-panel > .habit-summary,
        .phone-panel > .surface-card {
          margin-top: 2px;
        }
      }

      @keyframes phoneFloat {
        0%,
        100% {
          transform: translateY(0) rotateY(0deg) rotateX(0deg);
        }
        25% {
          transform: translateY(-9px) rotateY(-3.2deg) rotateX(1.2deg);
        }
        75% {
          transform: translateY(4px) rotateY(3.2deg) rotateX(-1.2deg);
        }
      }

      @media (max-width: 1100px) {
        .hero {
          grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
          gap: 24px;
        }

        .phone-wrap {
          width: min(clamp(280px, 28vw, 320px), calc((100dvh - 150px) * 0.525));
        }
      }

      @media (max-width: 920px) {
        .hero {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto;
          gap: 16px;
          padding: 6px 0 18px;
          justify-items: center;
          align-content: center;
        }

        .copy {
          order: 2;
          max-width: 540px;
          text-align: center;
        }

        .description,
        h1,
        .eyebrow {
          margin-left: auto;
          margin-right: auto;
        }

        .hero-actions {
          display: flex;
          justify-content: center;
        }
        .hero-note {
          text-align: center;
        }
        .stage {
          order: 1;
          width: 100%;
          height: auto;
          min-height: 0;
          padding-top: 2px;
        }

        .phone-wrap {
          width: min(clamp(240px, 42vw, 300px), calc((100dvh - 265px) * 0.525));
        }
      }

      @media (max-width: 640px) {
        .container {
          width: min(100% - 24px, 1180px);
        }
        .header {
          padding-top: max(16px, calc(env(safe-area-inset-top) + 6px));
          padding-bottom: 8px;
        }


        .login-button {
          min-width: 88px;
          height: 34px;
          font-size: 11px;
        }

        .hero {
          gap: 12px;
          padding-bottom: 14px;
        }

        .copy {
          max-width: 320px;
        }
        h1 {
          margin-top: 12px;
          font-size: clamp(20px, 5.4vw, 28px);
          line-height: 1.05;
          letter-spacing: -0.035em;
        }

        .description {
          margin-top: 12px;
          font-size: 14px;
          line-height: 1.56;
        }

        .cta-button {
          min-width: 184px;
          height: 48px;
          font-size: 14px;
        }

        .hero-note {
          display: none;
        }

        .stage {
          min-height: auto;
          padding-top: 10px;
        }

        .glow {
          width: 170px;
          height: 170px;
          filter: blur(28px);
          opacity: 0.44;
        }

        .phone-wrap {
          width: min(clamp(214px, 58vw, 270px), calc((100dvh - 240px) * 0.52));
        }

        .phone {
          border-radius: 34px;
          padding: 7px;
          animation: none;
        }

        .phone::before {
          border-radius: 32px;
        }
        .phone::after {
          width: 82px;
          height: 22px;
          top: 9px;
        }

        .phone-screen {
          border-radius: 26px;
          padding: 11px 11px 10px;
        }

        .app-head {
          margin-top: 20px;
        }

        .app-title {
          font-size: 17px;
        }
        .app-subtitle {
          font-size: 9px;
        }
        .plus-button {
          width: 28px;
          height: 28px;
          border-radius: 10px;
        }

        .phone-screen-stack {
          padding-top: 16px;
          padding-bottom: 56px;
        }

        .overview-card,
        .money-card {
          border-radius: 18px;
        }

        .stat-grid,
        .habit-summary {
          gap: 4px;
        }

        .stat-pill {
          padding: 8px;
          border-radius: 12px;
        }

        .stat-value {
          font-size: 12px;
        }

        .agenda,
        .operations,
        .habit-list {
          margin-top: 14px;
          gap: 2px;
        }

        .agenda-row,
        .habit-row {
          padding: 8px 0;
        }

        .row-title {
          font-size: 8px;
        }

        .row-meta,
        .habit-state,
        .section-label {
          font-size: 6px;
        }

        .row-time,
        .section-meta,
        .finance-sub,
        .goal-percent {
          font-size: 8px;
        }

        .finance-balance {
          font-size: 17px;
        }

        .phone-nav {
          bottom: 2px;
          gap: 3px;
          padding: 3px;
        }

        .phone-tab {
          width: 27px;
          height: 27px;
          border-radius: 11px;
        }
      }