:root {
        --page-bg-rgb: 245 245 245;
        --page-bg: rgb(var(--page-bg-rgb));
        --ink: #111713;
        --muted: #4f5d53;
        --muted-2: #58635b;
        --green: #84c89a;
        --green-strong: #4b9d69;
        --soft-green: #a7ddb8;
        --panel-dark: #000;
        --card-radius: 32px;
        --panel-radius: 48px;
        --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        min-height: 100vh;
        overflow-x: hidden;
        background: var(--page-bg);
        color: var(--ink);
        font-family:
          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          sans-serif;
        letter-spacing: 0;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      button,
      .button {
        display: inline-flex;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid rgb(0 0 0 / 8%);
        border-radius: 999px;
        padding: 0 24px;
        background: #111713;
        color: #fff;
        font: inherit;
        font-weight: 560;
        cursor: pointer;
        transition:
          transform 180ms ease,
          background 180ms ease,
          border-color 180ms ease;
      }

      button:hover,
      .button:hover {
        transform: translateY(-3px) scale(1.015);
        background: #0a0f0b;
      }

      .button.secondary {
        background: rgb(255 255 255 / 60%);
        color: var(--ink);
        backdrop-filter: blur(18px);
      }

      .button.secondary:hover {
        background: rgb(255 255 255 / 82%);
      }

      .icon {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
      }

      .page {
        position: relative;
        isolation: isolate;
        min-height: 100vh;
        background: var(--page-bg);
        transition: background-color 120ms linear;
      }

      .ribbon-bg {
        pointer-events: none;
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
      }

      .ribbon-bg svg {
        position: absolute;
        inset-inline: 0;
        top: 0;
        width: 100%;
        height: 170rem;
      }

      .ribbon-bg path {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: drawRibbon 3.68s linear 0.5s forwards;
      }

      @keyframes drawRibbon {
        to {
          stroke-dashoffset: 0;
        }
      }

      .site-header {
        position: fixed;
        inset-inline: 0;
        top: 0;
        z-index: 50;
        animation: fadeDown 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      .header-inner {
        display: flex;
        max-width: 1280px;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin: 0 auto;
        padding: 16px 24px;
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 70px;
        border: 1px solid rgb(255 255 255 / 72%);
        border-radius: 999px;
        padding: 6px 22px 6px 8px;
        background:
          linear-gradient(135deg, rgb(255 255 255 / 62%), rgb(255 255 255 / 28%)),
          rgb(255 255 255 / 38%);
        box-shadow:
          0 20px 58px rgb(18 24 18 / 11%),
          inset 0 1px 0 rgb(255 255 255 / 70%);
        backdrop-filter: blur(28px) saturate(1.2);
        font-size: 18px;
        font-weight: 550;
        letter-spacing: -0.03em;
        transition:
          transform 180ms ease,
          box-shadow 180ms ease,
          border-color 180ms ease;
      }

      .brand:hover {
        transform: translateY(-2px);
        border-color: rgb(255 255 255 / 86%);
        box-shadow:
          0 24px 66px rgb(18 24 18 / 14%),
          inset 0 1px 0 rgb(255 255 255 / 82%);
      }

      .brand-logo {
        position: relative;
        display: grid;
        width: 58px;
        height: 58px;
        flex: 0 0 auto;
        place-items: center;
        border-radius: 20px;
        animation: float 5.5s ease-in-out infinite;
      }

      .brand-logo::before {
        content: none;
      }

      .brand-logo img {
        display: block;
        width: 54px;
        height: 54px;
        object-fit: contain;
      }

      .glass {
        border: 1px solid rgb(255 255 255 / 70%);
        background: rgb(255 255 255 / 45%);
        box-shadow: 0 20px 60px rgb(18 24 18 / 10%);
        backdrop-filter: blur(30px);
      }

      .nav {
        display: flex;
        align-items: center;
        gap: 28px;
        border-radius: 999px;
        padding: 12px 16px;
        color: #4f5d53;
        font-size: 14px;
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 14px;
      }

      .nav-toggle {
        display: none;
        width: 54px;
        min-height: 54px;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border-color: rgb(255 255 255 / 72%);
        padding: 0;
        background:
          linear-gradient(135deg, rgb(255 255 255 / 62%), rgb(255 255 255 / 28%)),
          rgb(255 255 255 / 38%);
        box-shadow: 0 18px 46px rgb(18 24 18 / 11%);
        backdrop-filter: blur(24px);
      }

      .nav-toggle span {
        width: 20px;
        height: 2px;
        border-radius: 999px;
        background: #111713;
        transition:
          transform 180ms ease,
          opacity 180ms ease;
      }

      .nav-open .nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }

      .nav-open .nav-toggle span:nth-child(2) {
        opacity: 0;
      }

      .nav-open .nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      .nav a {
        transition: color 180ms ease;
      }

      .nav .button {
        transition:
          transform 180ms ease,
          background 180ms ease,
          border-color 180ms ease,
          color 180ms ease;
      }

      .nav a[aria-current="page"] {
        color: var(--ink);
        font-weight: 700;
      }

      .nav a:hover {
        color: var(--ink);
      }

      .nav .button:hover {
        background: #0a0f0b;
        color: #fff;
      }

      main {
        position: relative;
        z-index: 10;
        padding-top: 84px;
      }

      .container {
        width: min(100% - 48px, 1280px);
        margin-inline: auto;
      }

      .hero {
        display: flex;
        min-height: calc(106vh - 92px);
        align-items: center;
        justify-content: center;
        padding-block: 34px 96px;
        text-align: center;
      }

      .hero-content {
        max-width: 780px;
      }

      .hero h1 {
        margin: 0;
        color: var(--ink);
        font-size: clamp(54px, 8vw, 88px);
        font-weight: 680;
        line-height: 0.92;
        letter-spacing: -0.07em;
      }

      .hero p {
        max-width: 680px;
        margin: 28px auto 0;
        color: var(--muted);
        font-size: 20px;
        line-height: 1.65;
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        margin-top: 40px;
      }

      .fade-up {
        opacity: 0;
        transform: translateY(28px);
        animation: fadeUp 750ms cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      .delay-1 {
        animation-delay: 90ms;
      }

      .delay-2 {
        animation-delay: 180ms;
      }

      .section-label {
        margin: 0;
        color: #6a746c;
        font-size: 14px;
        letter-spacing: 0.28em;
        text-transform: uppercase;
      }

      .features {
        padding-block: 96px;
      }

      .section-heading {
        max-width: 720px;
      }

      .section-heading h2 {
        margin: 16px 0 0;
        font-size: clamp(40px, 5vw, 56px);
        font-weight: 650;
        line-height: 1;
        letter-spacing: -0.05em;
      }

      .feature-flow {
        position: relative;
        min-height: 68rem;
        margin-top: 64px;
      }

      .feature-stack {
        position: relative;
        z-index: 2;
        display: flex;
        min-height: 68rem;
        flex-direction: column;
      }

      .feature-card {
        width: min(100%, 448px);
        padding: 28px;
        border-radius: 32px;
        transition:
          transform 220ms ease,
          box-shadow 220ms ease;
      }

      .feature-card:hover {
        transform: translateY(-6px) scale(1.01);
        box-shadow: 0 28px 70px rgb(18 24 18 / 14%);
      }

      .feature-item:nth-child(1) {
        margin-left: 10%;
      }

      .feature-item:nth-child(2) {
        align-self: end;
        margin-top: 96px;
        margin-right: 12%;
      }

      .feature-item:nth-child(3) {
        margin-top: 80px;
        margin-left: 18%;
      }

      .feature-item:nth-child(4) {
        align-self: end;
        margin-top: 80px;
        margin-right: 18%;
      }

      .feature-pill {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
        border: 1px solid rgb(0 0 0 / 8%);
        border-radius: 999px;
        padding: 8px 12px;
        background: rgb(255 255 255 / 75%);
        color: #516057;
        font-size: 14px;
      }

      .feature-number {
        display: inline-grid;
        width: 28px;
        height: 28px;
        place-items: center;
        border-radius: 999px;
        background: #7fcf9a;
        color: var(--ink);
        font-size: 12px;
        font-weight: 700;
      }

      .feature-card h3 {
        margin: 0;
        font-size: 26px;
        font-weight: 650;
        letter-spacing: -0.03em;
      }

      .feature-card p:last-child {
        margin: 16px 0 0;
        color: #58635b;
        font-size: 15px;
        line-height: 1.75;
      }

      .reveal {
        opacity: 0;
        transform: translateY(34px);
        transition:
          opacity 750ms cubic-bezier(0.22, 1, 0.36, 1),
          transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      .packages {
        position: relative;
        z-index: 20;
        padding-block: 112px;
      }

      .eyebrow {
        display: inline-flex;
        border: 1px solid rgb(0 0 0 / 8%);
        border-radius: 999px;
        padding: 8px 16px;
        background: rgb(255 255 255 / 65%);
        color: #6a746c;
        box-shadow: 0 8px 30px rgb(18 24 18 / 6%);
        font-size: 14px;
        letter-spacing: 0.18em;
      }

      .packages h2 {
        max-width: 960px;
        margin: 32px 0 0;
        color: var(--ink);
        font-size: clamp(50px, 7vw, 77px);
        font-weight: 650;
        line-height: 0.94;
        letter-spacing: -0.07em;
      }

      .packages-intro {
        max-width: 780px;
        margin-top: 32px;
        color: #5b645e;
        font-size: 20px;
        line-height: 1.8;
      }

      .packages-glow {
        display: none;
      }

      .package-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px;
        margin-top: 64px;
      }

      .package {
        position: relative;
        overflow: hidden;
        height: 100%;
        border: 1px solid rgb(255 255 255 / 70%);
        border-radius: 38px;
        padding: 32px 36px 36px;
        background: linear-gradient(
          145deg,
          rgb(255 255 255 / 62%),
          rgb(255 255 255 / 34%)
        );
        color: var(--ink);
        box-shadow:
          inset 0 1px 0 rgb(255 255 255 / 82%),
          inset 0 -42px 72px rgb(255 255 255 / 22%),
          0 24px 70px rgb(18 24 18 / 8%);
        backdrop-filter: blur(30px) saturate(1.16);
        -webkit-backdrop-filter: blur(30px) saturate(1.16);
        transition:
          opacity 850ms var(--ease-out),
          transform 850ms var(--ease-out),
          box-shadow 220ms ease;
      }

      .package::before {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: inherit;
        pointer-events: none;
        background:
          radial-gradient(circle at 20% 0%, rgb(255 255 255 / 54%), transparent 34%),
          linear-gradient(135deg, rgb(255 255 255 / 24%), transparent 44%);
      }

      .package > * {
        position: relative;
        z-index: 1;
      }

      .package.reveal {
        transform: translateY(42px) scale(0.985);
      }

      .package.reveal.is-visible {
        transform: translateY(0) scale(1);
      }

      .package-grid .package:nth-child(2) {
        transition-delay: 90ms;
      }

      .package-grid .package:nth-child(3) {
        transition-delay: 180ms;
      }

      .package:hover {
        transform: translateY(-8px) scale(1.01);
      }

      .package.featured {
        position: relative;
        overflow: hidden;
        border-color: rgb(127 224 176 / 44%);
        background: #000;
        color: #fff;
        box-shadow:
          0 34px 100px rgb(0 0 0 / 24%),
          0 0 0 1px rgb(127 224 176 / 18%),
          0 0 56px rgb(127 224 176 / 18%);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .package.featured::before {
        content: none;
      }

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

      .package-pages {
        margin: 0;
        color: #7d7d7d;
        font-size: 25px;
      }

      .featured .package-pages {
        color: rgb(255 255 255 / 60%);
      }

      .package h3 {
        margin: 16px 0 0;
        color: #171b31;
        font-size: 36px;
        font-weight: 650;
        letter-spacing: -0.04em;
      }

      .featured h3 {
        color: #fff;
      }

      .badge {
        border: 1px solid rgb(0 0 0 / 8%);
        border-radius: 999px;
        padding: 8px 16px;
        background: rgb(127 224 176 / 20%);
        color: #3f8c5a;
        font-size: 14px;
        font-weight: 650;
      }

      .featured .badge {
        border-color: rgb(255 255 255 / 14%);
        background: rgb(127 224 176 / 16%);
        color: #7fe0b0;
      }

      .price {
        margin-top: 48px;
        color: #171b31;
        font-size: clamp(44px, 5vw, 64px);
        font-weight: 650;
        line-height: 1;
        letter-spacing: -0.07em;
      }

      .featured .price {
        color: #fff;
      }

      .package-description {
        max-width: 440px;
        margin: 32px 0 0;
        color: #616161;
        font-size: 19px;
        line-height: 1.9;
      }

      .featured .package-description {
        color: rgb(255 255 255 / 72%);
      }

      .bullet-list {
        display: grid;
        gap: 20px;
        margin-top: 40px;
      }

      .bullet {
        display: flex;
        align-items: center;
        gap: 16px;
        color: #525252;
        font-size: 18px;
      }

      .featured .bullet {
        color: rgb(255 255 255 / 84%);
      }

      .check {
        color: #62c58c;
      }

      .featured .check {
        color: #7fe0b0;
      }

      .package .button {
        width: 100%;
        margin-top: 40px;
        min-height: 56px;
        font-size: 18px;
      }

      .package.featured .button {
        background: #fff;
        color: #000;
      }

      .workflow {
        position: relative;
        height: 560vh;
      }

      .workflow-sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
      }

      .workflow-center {
        position: relative;
        z-index: 10;
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;
        padding: 112px 24px 64px;
      }

      .workflow-inner {
        width: min(100%, 960px);
      }

      .workflow-heading {
        margin-bottom: 42px;
        text-align: center;
        opacity: 0;
        transform: translateY(48px);
      }

      .workflow-heading p {
        margin: 0 0 16px;
        color: rgb(255 255 255 / 50%);
        font-size: 14px;
        letter-spacing: 0.35em;
        text-transform: uppercase;
      }

      .workflow-heading h2 {
        margin: 0;
        color: #fff;
        font-size: clamp(40px, 7vw, 72px);
        font-weight: 650;
        line-height: 1.08;
        letter-spacing: 0;
      }

      .workflow-cards {
        max-width: 680px;
        margin-inline: auto;
        overflow: visible;
        padding: 0;
      }

      .workflow.is-scrollable .workflow-cards {
        max-height: var(--workflow-cards-max-height, 62vh);
        overflow-y: auto;
        padding: 2px 8px 10px;
        scrollbar-width: thin;
      }

      .workflow-card {
        margin-top: 16px;
        border: 1px solid rgb(255 255 255 / 12%);
        border-radius: 24px;
        padding: 18px 22px;
        background: rgb(255 255 255 / 8%);
        backdrop-filter: blur(14px);
        opacity: 0;
        transform: translateY(28px) scale(0.985);
      }

      .workflow-card-row {
        display: flex;
        align-items: flex-start;
        gap: 16px;
      }

      .workflow-number {
        display: grid;
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid rgb(255 255 255 / 20%);
        border-radius: 999px;
        background: rgb(255 255 255 / 10%);
        color: rgb(255 255 255 / 80%);
        font-weight: 560;
      }

      .workflow-card h3 {
        margin: 0;
        color: #fff;
        font-size: 23px;
        font-weight: 560;
        letter-spacing: 0;
      }

      .workflow-title-highlight {
        background: linear-gradient(90deg, #329653, #65d487);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        text-shadow:
          0 0 8px rgb(79 191 114 / 24%),
          0 0 18px rgb(79 191 114 / 14%);
      }

      .workflow-card p {
        margin: 4px 0 0;
        color: rgb(255 255 255 / 50%);
        line-height: 1.6;
      }

      .scroll-note {
        position: absolute;
        bottom: 24px;
        left: 50%;
        color: rgb(255 255 255 / 35%);
        font-size: 13px;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        transform: translateX(-50%);
      }

      .cta {
        position: relative;
        z-index: 20;
        padding-block: 96px;
      }

      .dark-panel {
        overflow: hidden;
        border-radius: 48px;
        background: #000;
        padding: 56px;
        color: #fff;
        box-shadow: 0 40px 120px rgb(0 0 0 / 20%);
      }

      .cta-grid {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 56px;
      }

      .dark-eyebrow {
        display: inline-flex;
        border: 1px solid rgb(255 255 255 / 10%);
        border-radius: 999px;
        padding: 8px 16px;
        background: rgb(255 255 255 / 5%);
        color: rgb(255 255 255 / 70%);
        font-size: 14px;
        letter-spacing: 0.18em;
      }

      .dark-panel h2 {
        margin: 28px 0 0;
        font-size: clamp(46px, 6vw, 77px);
        font-weight: 650;
        line-height: 0.92;
        letter-spacing: -0.07em;
      }

      .dark-panel p {
        margin: 32px 0 0;
        color: rgb(255 255 255 / 68%);
        font-size: 20px;
        line-height: 1.9;
      }

      .dark-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 40px;
      }

      .button.light {
        background: #fff;
        color: var(--ink);
      }

      .button.dark-outline {
        border-color: rgb(255 255 255 / 14%);
        background: rgb(255 255 255 / 5%);
        color: #fff;
      }

      .standard-list {
        display: grid;
        gap: 20px;
      }

      .standard-item {
        display: flex;
        align-items: center;
        gap: 16px;
        border: 1px solid rgb(255 255 255 / 10%);
        border-radius: 999px;
        padding: 24px;
        background: rgb(255 255 255 / 3%);
        color: rgb(255 255 255 / 86%);
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
        font-size: 18px;
        transition: transform 180ms ease;
      }

      .standard-item:hover {
        transform: translateX(4px);
      }

      .contact {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding: 40px 24px 112px;
        z-index: 2;
      }

      .footer-glow {
        display: none;
      }

      .footer-glow div {
        width: 70rem;
        height: 28rem;
        border-radius: 999px;
        background: rgb(127 212 158 / 45%);
        filter: blur(120px);
      }

      .contact-inner {
        position: relative;
        z-index: 10;
        max-width: 1152px;
        margin-inline: auto;
      }

      .contact-panel {
        border: 1px solid rgb(255 255 255 / 8%);
        border-radius: 44px;
        background: #000;
        padding: 48px;
        color: #fff;
        box-shadow: 0 36px 120px rgb(0 0 0 / 20%);
      }

      .contact-grid {
        display: grid;
        grid-template-columns: 0.95fr 1.05fr;
        gap: 56px;
      }

      .contact h2 {
        margin: 24px 0 0;
        font-size: clamp(38px, 5vw, 56px);
        font-weight: 650;
        line-height: 1;
        letter-spacing: -0.05em;
      }

      .contact p {
        color: rgb(255 255 255 / 68%);
      }

      .contact-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }

      .contact-card {
        height: 100%;
        border: 1px solid rgb(255 255 255 / 10%);
        border-radius: 27px;
        padding: 20px;
        background: rgb(255 255 255 / 4%);
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
        transition: transform 180ms ease;
      }

      .contact-card:hover {
        transform: translateY(-4px) scale(1.01);
      }

      .contact-icon {
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
        border: 1px solid rgb(255 255 255 / 10%);
        border-radius: 16px;
        background: rgb(255 255 255 / 5%);
        color: #7fe0b0;
      }

      .contact-title {
        margin: 20px 0 0;
        color: rgb(255 255 255 / 42%);
        font-size: 14px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
      }

      .contact-value {
        margin: 12px 0 0;
        color: rgb(255 255 255 / 86%);
        font-size: 18px;
        line-height: 1.75;
        overflow-wrap: anywhere;
      }

      .line-transition {
        pointer-events: none;
        position: relative;
        z-index: 0;
        height: 360px;
        margin-top: 0;
        overflow: visible;
      }

      .line-transition::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(rgb(0 0 0 / 0%), rgb(245 245 245 / 42%) 42%, rgb(245 245 245 / 94%) 82%, rgb(245 245 245));
      }

      .transition-line {
        display: none;
      }

      .transition-line-left {
        left: -40px;
        transform: rotate(-20deg);
      }

      .transition-line-right {
        right: -40px;
        transform: rotate(20deg);
      }

      .post-process-zone {
        position: relative;
        z-index: 10;
        margin-top: -150px;
        overflow: hidden;
      }

      .post-ribbon-bg {
        pointer-events: none;
        position: absolute;
        inset: -30px 0 0;
        z-index: 1;
        overflow: hidden;
      }

      .post-ribbon-bg svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }

      .post-ribbon-bg path {
        fill: none;
        stroke: #84c89a;
        stroke-width: 74;
        stroke-linecap: round;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        opacity: 0.86;
        filter: drop-shadow(0 24px 48px rgb(132 200 154 / 28%));
        animation: drawPostRibbon 2.4s linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 36%;
      }

      @keyframes drawPostRibbon {
        to {
          stroke-dashoffset: 0;
        }
      }

      .post-workflow {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
        gap: 48px;
        align-items: center;
        margin-top: -26px;
        padding-block: 58px 88px;
      }

      .positioning-copy {
        max-width: 760px;
      }

      .positioning-copy h2,
      .contact-open h2 {
        margin: 28px 0 0;
        color: #111713;
        font-size: clamp(46px, 6vw, 77px);
        font-weight: 650;
        line-height: 0.92;
        letter-spacing: -0.07em;
      }

      .positioning-copy p,
      .contact-open p {
        margin: 30px 0 0;
        color: #58635b;
        font-size: 20px;
        line-height: 1.85;
      }

      .post-workflow .dark-eyebrow,
      .contact-open .dark-eyebrow {
        border-color: rgb(0 0 0 / 8%);
        background: rgb(255 255 255 / 60%);
        color: #6a746c;
      }

      .post-workflow .button.light,
      .contact-open .button.light {
        background: #111713;
        color: #fff;
      }

      .post-workflow .button.dark-outline,
      .contact-open .button.dark-outline {
        border-color: rgb(0 0 0 / 8%);
        background: rgb(255 255 255 / 58%);
        color: #111713;
      }

      .post-workflow .standard-item {
        border-color: rgb(0 0 0 / 8%);
        background: rgb(255 255 255 / 48%);
        color: #111713;
      }

      .contact-open .contact-card {
        border-color: rgb(0 0 0 / 8%);
        background: rgb(255 255 255 / 46%);
      }

      .contact-open .contact-title {
        color: rgb(0 0 0 / 42%);
      }

      .contact-open .contact-value {
        color: #111713;
      }

      .contact-open .contact-icon {
        border-color: rgb(0 0 0 / 8%);
        background: rgb(255 255 255 / 70%);
      }

      .hero-kicker {
        display: inline-flex;
        margin: 0 0 22px;
        border: 1px solid rgb(0 0 0 / 8%);
        border-radius: 999px;
        padding: 9px 16px;
        background: rgb(255 255 255 / 58%);
        color: #3f8c5a;
        box-shadow: 0 14px 38px rgb(18 24 18 / 8%);
        font-size: 14px;
        font-weight: 650;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        backdrop-filter: blur(20px);
      }

      .hero-note {
        max-width: 700px;
        margin: 24px auto 0;
        color: #5b645e;
        font-size: 15.5px;
        line-height: 1.75;
      }

      .page-hero {
        display: grid;
        min-height: 58vh;
        align-items: end;
        padding-block: 130px 78px;
      }

      .page-hero h1 {
        max-width: 980px;
        margin: 22px 0 0;
        font-size: clamp(54px, 8vw, 92px);
        font-weight: 680;
        line-height: 0.94;
        letter-spacing: -0.07em;
      }

      .page-hero p {
        max-width: 820px;
        margin: 28px 0 0;
        color: #5b645e;
        font-size: 20px;
        line-height: 1.8;
      }

      .about-hero {
        min-height: 54vh;
        align-items: center;
        padding-block: 150px 72px;
        text-align: center;
      }

      .about-hero .reveal {
        max-width: 1120px;
        margin-inline: auto;
      }

      .about-hero h1 {
        margin-inline: auto;
      }

      .content-band {
        position: relative;
        z-index: 20;
        padding-block: 72px;
      }

      .split-grid {
        display: grid;
        grid-template-columns: 0.95fr 1.05fr;
        gap: 56px;
        align-items: start;
      }

      .text-panel {
        border: 1px solid rgb(255 255 255 / 68%);
        border-radius: 36px;
        padding: 34px;
        background: rgb(255 255 255 / 54%);
        box-shadow: 0 24px 70px rgb(18 24 18 / 8%);
        backdrop-filter: blur(28px);
      }

      .text-panel h2,
      .section-title {
        margin: 0;
        font-size: clamp(38px, 5vw, 62px);
        font-weight: 650;
        line-height: 1;
        letter-spacing: -0.06em;
      }

      .text-panel p {
        color: #5b645e;
        font-size: 18px;
        line-height: 1.85;
      }

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

      .mini-card {
        border: 1px solid rgb(255 255 255 / 68%);
        border-radius: 28px;
        padding: 24px;
        background: rgb(255 255 255 / 52%);
        box-shadow: 0 18px 54px rgb(18 24 18 / 7%);
        backdrop-filter: blur(24px);
      }

      .mini-card h3 {
        margin: 0;
        font-size: 22px;
        letter-spacing: -0.03em;
      }

      .mini-card p {
        margin: 12px 0 0;
        color: #58635b;
        line-height: 1.75;
      }

      .comparison-wrap {
        overflow-x: auto;
        border: 1px solid rgb(255 255 255 / 68%);
        border-radius: 32px;
        background: rgb(255 255 255 / 56%);
        box-shadow: 0 24px 70px rgb(18 24 18 / 8%);
        backdrop-filter: blur(28px);
      }

      .comparison-table {
        width: 100%;
        min-width: 760px;
        border-collapse: collapse;
      }

      .comparison-table th,
      .comparison-table td {
        border-bottom: 1px solid rgb(0 0 0 / 7%);
        padding: 18px;
        text-align: left;
        vertical-align: top;
      }

      .comparison-table th {
        color: #111713;
        font-size: 18px;
      }

      .comparison-table td {
        color: #58635b;
        line-height: 1.55;
      }

      .comparison-table tr:last-child td {
        border-bottom: 0;
      }

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

      .founder-card {
        border-radius: 36px;
        padding: 30px;
      }

      .founder-card h3 {
        margin: 0;
        font-size: 34px;
        letter-spacing: -0.04em;
      }

      .founder-role {
        margin: 10px 0 0;
        color: #4b9d69;
        font-weight: 650;
      }

      .founder-card > p:not(.founder-role) {
        color: #58635b;
      }

      .focus-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 24px 0;
      }

      .focus-list span,
      .trust-badge {
        border: 1px solid rgb(0 0 0 / 8%);
        border-radius: 999px;
        padding: 8px 12px;
        background: rgb(255 255 255 / 58%);
        color: #516057;
        font-size: 14px;
      }

      .trust-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 28px;
      }

      .timeline {
        display: grid;
        gap: 16px;
      }

      .timeline-step {
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: 16px;
        align-items: start;
        border: 1px solid rgb(255 255 255 / 68%);
        border-radius: 26px;
        padding: 20px;
        background: rgb(255 255 255 / 52%);
        box-shadow: 0 16px 46px rgb(18 24 18 / 6%);
        backdrop-filter: blur(24px);
        transition:
          transform 220ms var(--ease-out),
          box-shadow 220ms ease,
          background 220ms ease;
      }

      .timeline-step:hover {
        transform: translateY(10px);
        background: rgb(255 255 255 / 68%);
        box-shadow: 0 24px 68px rgb(18 24 18 / 10%);
      }

      .contact-timeline .timeline-step:hover {
        transform: none;
        background: rgb(255 255 255 / 52%);
        box-shadow: 0 16px 46px rgb(18 24 18 / 6%);
      }

      .timeline-number {
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
        border-radius: 999px;
        background: #111713;
        color: #fff;
        font-weight: 650;
      }

      .timeline-step h3 {
        margin: 0;
        font-size: 20px;
        letter-spacing: -0.03em;
      }

      .timeline-step p {
        margin: 8px 0 0;
        color: #58635b;
        line-height: 1.65;
      }

      .site-footer {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1.2fr 1fr 1.2fr;
        gap: 32px;
        align-items: center;
        padding-block: 34px 54px;
        color: #4f5d53;
      }

      .footer-brand {
        display: flex;
        align-items: center;
        gap: 14px;
      }

      .footer-brand img {
        width: 52px;
        height: 52px;
        object-fit: contain;
        filter: drop-shadow(0 12px 22px rgb(132 200 154 / 28%));
      }

      .footer-brand strong {
        color: #111713;
        font-size: 18px;
      }

      .footer-brand p,
      .footer-meta p {
        margin: 5px 0 0;
      }

      .footer-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
      }

      .process-heading {
        max-width: 820px;
        margin: 0 auto 44px;
        text-align: center;
      }

      .process-heading p {
        max-width: 680px;
        margin: 22px auto 0;
        color: #5b645e;
        font-size: 18px;
        line-height: 1.75;
      }

      .process-heading .button {
        margin-top: 26px;
      }

      .contact-timeline {
        max-width: 880px;
        margin: 0 auto;
      }

      .contact-hero {
        text-align: center;
      }

      .contact-hero h1,
      .contact-hero p {
        margin-inline: auto;
      }

      .contact-process {
        padding-top: 108px;
      }

      .about-story-band {
        padding-top: 56px;
      }

      .about-story-layout {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
      }

      .about-story-panel {
        max-width: 860px;
        margin: 0 auto;
        text-align: center;
      }

      .about-story-panel h2 {
        margin: 0;
        font-size: clamp(38px, 5vw, 62px);
        font-weight: 650;
        line-height: 1;
        letter-spacing: -0.06em;
      }

      .about-story-panel p {
        color: #5b645e;
        font-size: 18px;
        line-height: 1.85;
      }

      .about-attribute-grid {
        margin-top: 28px;
      }

      .icon-card {
        text-align: center;
      }

      .attribute-icon {
        display: grid;
        width: 46px;
        height: 46px;
        place-items: center;
        margin: 0 auto 16px;
        border-radius: 999px;
        background: #111713;
        color: #7fe0b0;
        font-weight: 700;
      }

      .values-band {
        padding-top: 54px;
        padding-bottom: 70px;
      }

      .important-values-band {
        padding-top: 28px;
        padding-bottom: 118px;
      }

      .important-values-band .mini-grid {
        margin-top: 38px;
      }

      .footer-meta {
        text-align: right;
        font-size: 14px;
      }

      @keyframes fadeUp {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes fadeDown {
        from {
          opacity: 0;
          transform: translateY(-16px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes float {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-3px);
        }
      }

      @media (max-width: 980px) {
        .header-inner {
          align-items: center;
          padding-inline: 16px;
        }

        .header-actions {
          position: relative;
          margin-left: auto;
        }

        .nav {
          position: absolute;
          top: calc(100% + 12px);
          right: 0;
          display: grid;
          width: min(78vw, 310px);
          gap: 6px;
          border-radius: 26px;
          padding: 14px;
          opacity: 0;
          pointer-events: none;
          transform: translateY(-8px) scale(0.98);
          transform-origin: top right;
          transition:
            opacity 180ms ease,
            transform 180ms ease;
        }

        .nav-open .nav {
          opacity: 1;
          pointer-events: auto;
          transform: translateY(0) scale(1);
        }

        .nav a {
          display: flex;
          width: 100%;
          min-height: 44px;
          align-items: center;
          justify-content: center;
          border-radius: 999px;
          padding-inline: 14px;
        }

        .nav .button {
          margin-top: 4px;
        }

        .nav-toggle {
          display: inline-flex;
        }

        .brand {
          min-height: 66px;
          padding-right: 18px;
        }

        .brand-logo {
          width: 54px;
          height: 54px;
        }

        .brand-logo img {
          width: 50px;
          height: 50px;
        }

        .package-grid,
        .cta-grid,
        .contact-grid,
        .post-workflow,
        .split-grid,
        .site-footer,
        .about-story-layout {
          grid-template-columns: 1fr;
        }

        .about-story-panel {
          grid-column: 1;
        }

        .mini-grid,
        .founder-grid {
          grid-template-columns: 1fr;
        }

        .site-footer,
        .footer-meta {
          text-align: left;
        }

        .footer-nav {
          justify-content: flex-start;
        }

        .feature-item:nth-child(n) {
          align-self: auto;
          margin-right: 0;
          margin-left: 0;
        }

        .feature-item:nth-child(2),
        .feature-item:nth-child(3),
        .feature-item:nth-child(4) {
          margin-top: 56px;
        }

        .dark-panel,
        .contact-panel {
          padding: 40px 28px;
          border-radius: 32px;
        }

        .post-workflow {
          gap: 30px;
          margin-top: -12px;
          padding-block: 44px 66px;
        }
      }

      @media (max-width: 640px) {
        body {
          overflow-x: hidden;
        }

        .container {
          width: min(100% - 32px, 1280px);
        }

        main {
          padding-top: 76px;
        }

        .site-header {
          left: 0;
          right: 0;
        }

        .header-inner {
          gap: 10px;
          padding: 10px 12px;
        }

        .hero {
          min-height: auto;
          padding-block: 72px 58px;
        }

        .hero h1 {
          font-size: clamp(42px, 14vw, 56px);
          line-height: 0.96;
          letter-spacing: -0.055em;
        }

        .hero p {
          font-size: 16px;
          line-height: 1.65;
        }

        .hero-note {
          font-size: 15px;
          line-height: 1.7;
        }

        .hero-actions,
        .dark-actions {
          align-items: stretch;
          flex-direction: column;
        }

        .button,
        button {
          width: 100%;
        }

        .nav-toggle {
          width: 48px;
          min-height: 48px;
          border-radius: 999px;
        }

        .brand {
          min-height: 54px;
          max-width: calc(100vw - 78px);
          gap: 8px;
          padding: 5px 12px 5px 6px;
          font-size: 14px;
        }

        .brand-logo {
          width: 44px;
          height: 44px;
        }

        .brand-logo img {
          width: 40px;
          height: 40px;
        }

        .nav {
          top: calc(100% + 8px);
          right: -2px;
          width: calc(100vw - 24px);
          max-width: 340px;
          border-radius: 24px;
        }

        .features,
        .packages,
        .cta {
          padding-block: 58px;
        }

        .section-heading h2,
        .packages h2,
        .section-title,
        .text-panel h2,
        .about-story-panel h2 {
          font-size: clamp(34px, 11vw, 46px);
          line-height: 1.02;
          letter-spacing: -0.055em;
        }

        .feature-flow,
        .feature-stack {
          min-height: auto;
        }

        .feature-card {
          width: 100%;
          padding: 22px;
          border-radius: 26px;
        }

        .feature-pill {
          flex-wrap: wrap;
          border-radius: 20px;
          line-height: 1.35;
        }

        .packages-intro,
        .page-hero p,
        .positioning-copy p,
        .contact-open p,
        .text-panel p,
        .about-story-panel p {
          font-size: 16px;
          line-height: 1.7;
        }

        .package-grid {
          gap: 18px;
          margin-top: 38px;
        }

        .package {
          padding: 28px 24px 32px;
          border-radius: 30px;
        }

        .package h3 {
          font-size: 32px;
        }

        .price {
          font-size: clamp(42px, 14vw, 52px);
          letter-spacing: -0.055em;
        }

        .package-description {
          font-size: 16px;
          line-height: 1.7;
        }

        .bullet {
          align-items: flex-start;
          font-size: 15px;
          line-height: 1.45;
        }

        .workflow-heading {
          margin-bottom: 32px;
        }

        .workflow-card {
          padding: 18px;
        }

        .workflow-card h3 {
          font-size: 20px;
        }

        .standard-item {
          align-items: flex-start;
          border-radius: 24px;
          padding: 18px;
          font-size: 16px;
        }

        .contact-cards {
          grid-template-columns: 1fr;
        }

        .page-hero {
          min-height: auto;
          padding-block: 94px 50px;
        }

        .page-hero h1 {
          font-size: clamp(40px, 13vw, 52px);
          line-height: 0.98;
          letter-spacing: -0.055em;
        }

        .text-panel,
        .founder-card {
          padding: 26px;
          border-radius: 28px;
        }

        .timeline-step {
          grid-template-columns: 1fr;
        }

        .workflow {
          height: auto;
          min-height: auto;
          padding-block: 76px 62px;
          background: #000;
        }

        .workflow-sticky {
          position: relative;
          height: auto;
          min-height: auto;
          overflow: visible;
        }

        .workflow-center {
          height: auto;
          align-items: start;
          padding: 0 16px;
        }

        .workflow-heading {
          opacity: 1 !important;
          transform: none !important;
          margin-bottom: 28px;
        }

        .workflow-heading h2 {
          font-size: clamp(34px, 11vw, 46px);
          line-height: 1.05;
        }

        .workflow-heading p,
        .workflow-heading h2 {
          color: #fff !important;
        }

        .workflow-cards {
          max-height: none;
          overflow: visible;
          padding: 0;
          opacity: 1 !important;
          transform: none !important;
        }

        .workflow-card {
          opacity: 1 !important;
          transform: none !important;
          background: rgb(255 255 255 / 8%) !important;
          border-color: rgb(255 255 255 / 12%) !important;
        }

        .workflow-card h3 {
          color: #fff !important;
        }

        .workflow-card p {
          color: rgb(255 255 255 / 64%) !important;
        }

        .workflow-number {
          color: rgb(255 255 255 / 86%) !important;
          background: rgb(255 255 255 / 10%) !important;
          border-color: rgb(255 255 255 / 20%) !important;
        }

        .scroll-note {
          display: none;
        }

        .line-transition {
          display: none;
        }

        .post-process-zone {
          margin-top: 0;
        }

        .post-ribbon-bg path {
          stroke-width: 48;
          opacity: 0.72;
        }

        .workflow-card {
          border-radius: 20px;
        }

        .process-heading {
          margin-bottom: 30px;
        }

        .post-workflow {
          padding-block: 36px 56px;
        }

        .positioning-copy h2,
        .contact-open h2 {
          font-size: clamp(36px, 11vw, 48px);
          line-height: 1;
          letter-spacing: -0.055em;
        }

        .contact {
          padding: 36px 16px 70px;
        }

        .contact-card {
          padding: 18px;
          border-radius: 24px;
        }

        .contact-value {
          font-size: 16px;
          line-height: 1.55;
        }

        .mini-card,
        .timeline-step {
          padding: 20px;
          border-radius: 24px;
        }

        .comparison-table {
          min-width: 640px;
        }

        .comparison-table th,
        .comparison-table td {
          padding: 14px;
          font-size: 14px;
        }

        .site-footer {
          gap: 22px;
          padding-block: 26px 42px;
        }

        .footer-brand {
          align-items: flex-start;
        }

        .footer-nav {
          gap: 10px 14px;
        }

        .footer-meta {
          font-size: 13px;
          line-height: 1.5;
        }
      }