*,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --black: #080808;
      --cream: #FFFFD6;
      --sf: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
      --serif: 'Instrument Serif', serif;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--black);
      color: var(--cream);
      font-family: var(--sf);
      overflow-x: hidden;
      font-weight: 400;
    }

    /* ═══ CURSOR — removed, using system default ═══ */



    /* ═══ SCROLL PROGRESS ═══ */
    #scroll-prog {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      width: 0%;
      background: linear-gradient(90deg, rgba(255, 255, 214, .15), rgba(255, 255, 214, .65), rgba(255, 255, 214, .15));
      z-index: 9996;
      transition: width .06s linear;
    }

    /* ═══ FULL-SITE GRID ═══ */
    #site-grid {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255, 255, 214, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 214, .03) 1px, transparent 1px);
      background-size: 68px 68px;
    }

    /* ═══ HERO GRID — less visible than site grid ═══ */
    .hero-grid-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image:
        linear-gradient(rgba(255, 255, 214, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 214, .025) 1px, transparent 1px);
      background-size: 68px 68px;
      mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 100%);
    }

    /* ═══ SITE ═══ */
    .site {
      position: relative;
      z-index: 1;
    }

    /* ═══ NAV — proper glass ═══ */
    nav {
      position: fixed;
      top: 18px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 48px);
      max-width: 1160px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 18px 12px 26px;
      background: rgba(10, 10, 10, 0.45);
      border: 1px solid rgba(255, 255, 214, 0.07);
      border-radius: 100px;
      backdrop-filter: blur(40px) saturate(180%);
      -webkit-backdrop-filter: blur(40px) saturate(180%);
      z-index: 500;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 214, .03), 0 4px 32px rgba(0, 0, 0, .4);
    }

    .nav-logo {
      font-family: var(--serif);
      font-size: 20px;
      color: var(--cream);
      text-decoration: none;
      letter-spacing: -.01em;
    }

    .nav-logo sub {
      font-family: var(--sf);
      font-size: 9px;
      letter-spacing: .18em;
      opacity: .3;
      vertical-align: middle;
      margin-left: 2px;
    }

    .nav-links {
      display: flex;
      gap: 26px;
      list-style: none;
    }

    .nav-links a {
      font-family: var(--sf);
      color: rgba(255, 255, 214, .4);
      text-decoration: none;
      font-size: 13px;
      position: relative;
      overflow: hidden;
      transition: color .2s;
      display: inline-block;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 1px;
      background: rgba(255, 255, 214, .4);
      transition: width .3s ease;
    }

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

    .nav-links a:hover::after {
      width: 100%;
    }

    .nav-cta {
      padding: 8px 20px;
      background: rgba(255, 255, 214, .06);
      border: 1px solid rgba(255, 255, 214, .12);
      border-radius: 100px;
      color: var(--cream);
      font-family: var(--sf);
      font-size: 13px;
      text-decoration: none;
      backdrop-filter: blur(8px);
      position: relative;
      overflow: hidden;
      transition: background .25s, border-color .25s, transform .2s, box-shadow .25s;
    }

    .nav-cta::before {
      content: '';
      position: absolute;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 214, .12), transparent);
      transition: right .45s;
      z-index: 1;
    }

    .nav-cta:hover {
      background: rgba(255, 255, 214, .12);
      border-color: rgba(255, 255, 214, .25);
      transform: translateY(-1px);
      box-shadow: 0 4px 20px rgba(255, 255, 214, .05);
    }

    .nav-cta:hover::before {
      right: 100%;
    }

    /* ═══ SHIMMER RIGHT→LEFT (universal) ═══ */
    .sh {
      position: relative;
      overflow: hidden;
    }

    .sh::before {
      content: '';
      position: absolute;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 214, .1), transparent);
      transition: right .5s ease;
      z-index: 1;
      pointer-events: none;
    }

    .sh:hover::before {
      right: 100%;
    }

    .sh:hover {
      transform: translateY(-2px);
    }

    /* ═══ HERO ═══ */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 150px 40px 80px;
      position: relative;
      overflow: hidden;
    }

    /* ANIMATED SE7EN GRADIENTS — strong tall curtain beams */
    .hg-left {
      position: absolute;
      top: 0;
      left: 0;
      width: 42%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 70% 120% at -5% 50%, rgba(255, 255, 214, .22) 0%, rgba(255, 255, 214, .1) 30%, rgba(255, 255, 214, .03) 55%, transparent 70%),
        radial-gradient(ellipse 35% 80% at 12% 20%, rgba(255, 255, 214, .14) 0%, rgba(255, 255, 214, .04) 40%, transparent 65%),
        radial-gradient(ellipse 22% 60% at 22% 80%, rgba(255, 255, 214, .1) 0%, transparent 55%);
      animation: hgL 9s ease-in-out infinite alternate;
      filter: blur(2px);
    }

    .hg-right {
      position: absolute;
      top: 0;
      right: 0;
      width: 42%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 70% 120% at 105% 50%, rgba(255, 255, 214, .2) 0%, rgba(255, 255, 214, .08) 30%, rgba(255, 255, 214, .02) 55%, transparent 70%),
        radial-gradient(ellipse 30% 75% at 88% 70%, rgba(255, 255, 214, .12) 0%, rgba(255, 255, 214, .03) 40%, transparent 60%),
        radial-gradient(ellipse 18% 55% at 78% 15%, rgba(255, 255, 214, .08) 0%, transparent 55%);
      animation: hgR 11s ease-in-out infinite alternate;
      filter: blur(2px);
    }

    /* multiple thin vertical light lines — the se7en curtain effect */
    .hg-lines {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      padding: 0 2%;
    }

    .hg-line {
      width: 1px;
      flex-shrink: 0;
      background: linear-gradient(to bottom,
          transparent 0%,
          rgba(255, 255, 214, .0) 5%,
          rgba(255, 255, 214, .18) 25%,
          rgba(255, 255, 214, .28) 50%,
          rgba(255, 255, 214, .18) 75%,
          rgba(255, 255, 214, .0) 95%,
          transparent 100%);
      opacity: 0;
    }

    .hg-line:nth-child(1) {
      animation: lineIn 1.2s .1s ease-out forwards;
    }

    .hg-line:nth-child(2) {
      animation: lineIn 1.2s .3s ease-out forwards;
    }

    .hg-line:nth-child(3) {
      animation: lineIn 1.2s .5s ease-out forwards;
    }

    .hg-line:nth-child(4) {
      animation: lineIn 1.2s .7s ease-out forwards;
    }

    .hg-line:nth-child(5) {
      animation: lineIn 1.2s .2s ease-out forwards;
    }

    .hg-line:nth-child(6) {
      animation: lineIn 1.2s .4s ease-out forwards;
    }

    .hg-line:nth-child(7) {
      animation: lineIn 1.2s .6s ease-out forwards;
    }

    .hg-line:nth-child(8) {
      animation: lineIn 1.2s .8s ease-out forwards;
    }

    .hg-line:nth-child(9) {
      animation: lineIn 1.2s .35s ease-out forwards;
    }

    .hg-line:nth-child(10) {
      animation: lineIn 1.2s .55s ease-out forwards;
    }

    /* Breathing animation on the lines themselves */
    .hg-line:nth-child(odd) {
      animation-name: lineIn, linePulse;
      animation-duration: 1.2s, 6s;
      animation-delay: .2s, 1.5s;
      animation-fill-mode: forwards, none;
      animation-iteration-count: 1, infinite;
      animation-timing-function: ease-out, ease-in-out;
    }

    .hg-line:nth-child(even) {
      animation-name: lineIn, linePulse2;
      animation-duration: 1.2s, 8s;
      animation-delay: .4s, 2s;
      animation-fill-mode: forwards, none;
      animation-iteration-count: 1, infinite;
      animation-timing-function: ease-out, ease-in-out;
    }

    @keyframes lineIn {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes linePulse {

      0%,
      100% {
        opacity: .7;
      }

      50% {
        opacity: 1;
      }
    }

    @keyframes linePulse2 {

      0%,
      100% {
        opacity: .5;
      }

      50% {
        opacity: .9;
      }
    }

    @keyframes hgL {
      0% {
        transform: scaleY(1) skewY(0deg);
      }

      50% {
        transform: scaleY(1.03) skewY(.3deg);
      }

      100% {
        transform: scaleY(.98) skewY(-.2deg);
      }
    }

    @keyframes hgR {
      0% {
        transform: scaleY(1) skewY(0deg);
      }

      50% {
        transform: scaleY(.97) skewY(-.4deg);
      }

      100% {
        transform: scaleY(1.04) skewY(.2deg);
      }
    }

    /* top center glow */
    .hg-top {
      position: absolute;
      top: -15%;
      left: 50%;
      transform: translateX(-50%);
      width: 55%;
      height: 50%;
      background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 214, .06) 0%, transparent 65%);
      pointer-events: none;
      z-index: 0;
    }

    /* ─ HERO CONTENT ─ */
    .hero-headline {
      font-size: clamp(36px, 5.2vw, 68px);
      line-height: 1.08;
      letter-spacing: -0.02em;
      max-width: 1080px;
      width: 100%;
      position: relative;
      z-index: 2;
      margin-bottom: 24px;
    }

    .hl-setup {
      display: block;
      font-family: var(--sf);
      font-weight: 600;
      font-size: clamp(28px, 3.8vw, 48px);
      color: rgba(255, 255, 214, 0.92);
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin-bottom: 6px;
    }

    .hl-impact {
      display: block;
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(30px, 4vw, 52px);
      color: rgba(255, 255, 214, 0.92);
      letter-spacing: -0.025em;
      line-height: 1.1;
    }

    .hl-impact em {
      font-style: italic;
    }

    .hero-sub {
      font-family: var(--sf);
      font-size: clamp(14px, 1.5vw, 16px);
      color: rgba(255, 255, 214, .62);
      max-width: 500px;
      line-height: 1.8;
      position: relative;
      z-index: 2;
      margin-bottom: 42px;
    }

    .hero-actions {
      position: relative;
      z-index: 2;
      margin-bottom: 64px;
    }

    .btn-primary {
      display: inline-block;
      padding: 14px 34px;
      background: rgba(255, 255, 214, .08);
      border: 1px solid rgba(255, 255, 214, .28);
      border-radius: 100px;
      color: var(--cream);
      font-family: var(--sf);
      font-size: 14px;
      text-decoration: none;
      cursor: pointer;
      backdrop-filter: blur(24px);
      position: relative;
      overflow: hidden;
      transition: background .25s, border-color .25s, transform .2s, box-shadow .25s;
    }

    .btn-primary::before {
      content: '';
      position: absolute;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 214, .14), transparent);
      transition: right .5s;
      z-index: 1;
    }

    .btn-primary:hover {
      background: rgba(255, 255, 214, .15);
      border-color: rgba(255, 255, 214, .48);
      transform: translateY(-2px);
      box-shadow: 0 10px 36px rgba(255, 255, 214, .07);
    }

    .btn-primary:hover::before {
      right: 100%;
    }

    /* PROOF STRIP — flat, embedded, no box */
    .hero-proof {
      display: flex;
      gap: 48px;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 214, .07);
    }

    .hp-item {
      text-align: center;
    }

    .hp-num {
      font-family: var(--serif);
      font-size: 30px;
      font-weight: 400;
      color: var(--cream);
      display: block;
      line-height: 1;
      margin-bottom: 5px;
    }

    .hp-lbl {
      font-family: var(--sf);
      font-size: 10px;
      color: rgba(255, 255, 214, .3);
      letter-spacing: .05em;
      line-height: 1.4;
    }

    .hp-div {
      width: 1px;
      height: 32px;
      background: rgba(255, 255, 214, .08);
    }

    /* ═══ TICKER ═══ */
    .ticker-wrap {
      border-top: 1px solid rgba(255, 255, 214, .05);
      border-bottom: 1px solid rgba(255, 255, 214, .05);
      padding: 14px 0;
      overflow: hidden;
      position: relative;
    }

    .ticker-wrap::before,
    .ticker-wrap::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100px;
      z-index: 2;
    }

    .ticker-wrap::before {
      left: 0;
      background: linear-gradient(90deg, var(--black), transparent);
    }

    .ticker-wrap::after {
      right: 0;
      background: linear-gradient(270deg, var(--black), transparent);
    }

    .ticker {
      display: flex;
      animation: tick 30s linear infinite;
      width: max-content;
      white-space: nowrap;
    }

    .ticker-item {
      display: inline-flex;
      align-items: center;
      gap: 20px;
      padding: 0 36px;
      font-family: var(--sf);
      font-size: 12px;
      color: rgba(255, 255, 214, .26);
      letter-spacing: .03em;
    }

    .ticker-item strong {
      color: rgba(255, 255, 214, .68);
      font-weight: 500;
    }

    .tdot {
      width: 3px;
      height: 3px;
      background: rgba(255, 255, 214, .18);
      border-radius: 50%;
      flex-shrink: 0;
    }

    @keyframes tick {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    /* ═══ SECTIONS ═══ */
    section {
      padding: 120px 24px;
      position: relative;
    }

    .container {
      max-width: 1160px;
      margin: 0 auto;
    }

    .sec-label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--sf);
      font-size: 11px;
      letter-spacing: .1em;
      color: rgba(255, 255, 214, .35);
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .sec-label::before {
      content: '';
      width: 18px;
      height: 1px;
      background: rgba(255, 255, 214, .2);
    }

    /* ═══ PROBLEM ═══ */
    .problem-headline {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(32px, 5vw, 60px);
      line-height: 1.15;
      letter-spacing: -.025em;
      max-width: 660px;
      margin-bottom: 18px;
    }

    .problem-headline em {
      font-style: italic;
      color: var(--cream);
    }

    .problem-sub {
      font-family: var(--sf);
      font-size: 15px;
      color: rgba(255, 255, 214, .62);
      max-width: 460px;
      line-height: 1.8;
      margin-bottom: 52px;
    }

    .problem-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: rgba(255, 255, 214, .07);
      border: 1px solid rgba(255, 255, 214, .07);
      border-radius: 20px;
      overflow: hidden;
      margin-bottom: 50px;
    }

    .problem-card {
      background: var(--black);
      padding: 38px 30px;
      transition: background .3s;
      position: relative;
      overflow: hidden;
    }

    .problem-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at top, rgba(255, 255, 214, .05), transparent 60%);
      opacity: 0;
      transition: opacity .3s;
      pointer-events: none;
    }

    .problem-card:hover {
      background: rgba(255, 255, 214, .02);
    }

    .problem-card:hover::before {
      opacity: 1;
    }

    .problem-num {
      font-family: var(--sf);
      font-size: 10px;
      color: rgba(255, 255, 214, .15);
      letter-spacing: .12em;
      display: block;
      margin-bottom: 18px;
    }

    .problem-card h3 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 21px;
      color: var(--cream);
      margin-bottom: 10px;
      line-height: 1.2;
    }

    .problem-card p {
      font-family: var(--sf);
      font-size: 13px;
      color: rgba(255, 255, 214, .58);
      line-height: 1.7;
    }

    .problem-bottom {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      align-items: center;
    }

    .problem-truth {
      background: rgba(255, 255, 214, .025);
      border: 1px solid rgba(255, 255, 214, .07);
      border-radius: 16px;
      padding: 36px;
      backdrop-filter: blur(10px);
    }

    .problem-truth blockquote {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 19px;
      line-height: 1.5;
      color: rgba(255, 255, 214, .78);
      font-style: italic;
    }

    .problem-truth cite {
      display: block;
      margin-top: 14px;
      font-family: var(--sf);
      font-size: 11px;
      letter-spacing: .08em;
      color: rgba(255, 255, 214, .35);
      font-style: normal;
    }

    .stat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .stat-box {
      background: rgba(255, 255, 214, .025);
      border: 1px solid rgba(255, 255, 214, .07);
      border-radius: 12px;
      padding: 22px 18px;
      text-align: center;
      transition: background .3s, border-color .3s;
    }

    .stat-box:hover {
      background: rgba(255, 255, 214, .04);
      border-color: rgba(255, 255, 214, .12);
    }

    .stat-box .big {
      font-family: var(--serif);
      font-size: 34px;
      font-weight: 400;
      color: var(--cream);
      display: block;
      line-height: 1;
    }

    .stat-box .lbl {
      font-family: var(--sf);
      font-size: 11px;
      color: rgba(255, 255, 214, .45);
      margin-top: 7px;
      line-height: 1.4;
      letter-spacing: .04em;
    }

    /* ═══ SERVICES ═══ */
    .services-top {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 50px;
      gap: 40px;
    }

    .services-headline {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(32px, 5vw, 54px);
      line-height: 1.15;
      letter-spacing: -.025em;
      max-width: 480px;
    }

    .services-headline em {
      font-style: italic;
      color: var(--cream);
    }

    .services-desc {
      font-family: var(--sf);
      max-width: 300px;
      font-size: 13px;
      color: rgba(255, 255, 214, .58);
      line-height: 1.75;
      text-align: right;
    }

    .shc {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: rgba(255, 255, 214, .08);
      border: 1px solid rgba(255, 255, 214, .1);
      border-radius: 24px;
      overflow: hidden;
      margin-bottom: 16px;
    }

    .shc-l {
      background: rgba(255, 255, 214, .03);
      padding: 50px 46px;
      backdrop-filter: blur(10px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .shc-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 14px;
      background: rgba(255, 255, 214, .06);
      border: 1px solid rgba(255, 255, 214, .12);
      border-radius: 100px;
      font-family: var(--sf);
      font-size: 10px;
      letter-spacing: .14em;
      color: var(--cream);
      width: fit-content;
      margin-bottom: 24px;
    }

    .shc-tag::before {
      content: '★';
      font-size: 8px;
    }

    .shc-num {
      font-family: var(--sf);
      font-size: 10px;
      color: rgba(255, 255, 214, .15);
      letter-spacing: .12em;
      margin-bottom: 11px;
      display: block;
    }

    .shc-title {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 38px;
      line-height: 1.05;
      letter-spacing: -.02em;
      margin-bottom: 14px;
    }

    .shc-desc {
      font-family: var(--sf);
      font-size: 13px;
      color: rgba(255, 255, 214, .6);
      line-height: 1.75;
      margin-bottom: 28px;
      max-width: 320px;
    }

    .shc-feats {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .shc-feats li {
      font-family: var(--sf);
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      color: rgba(255, 255, 214, .62);
    }

    .shc-feats li::before {
      content: '';
      width: 16px;
      height: 1px;
      background: rgba(255, 255, 214, .2);
      flex-shrink: 0;
    }

    .shc-r {
      background: rgba(8, 8, 8, .9);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 400px;
      position: relative;
      overflow: hidden;
    }

    .shc-r::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 55% 35%, rgba(255, 255, 214, .055), transparent 60%);
    }

    .bmock {
      width: 85%;
      background: rgba(255, 255, 214, .03);
      border: 1px solid rgba(255, 255, 214, .08);
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }

    .bbar {
      background: rgba(255, 255, 214, .04);
      padding: 9px 12px;
      display: flex;
      align-items: center;
      gap: 7px;
      border-bottom: 1px solid rgba(255, 255, 214, .05);
    }

    .bdot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(255, 255, 214, .1);
    }

    .burl {
      flex: 1;
      background: rgba(255, 255, 214, .04);
      border-radius: 4px;
      height: 20px;
      margin-left: 8px;
      display: flex;
      align-items: center;
      padding: 0 9px;
    }

    .burl span {
      font-family: var(--sf);
      font-size: 9px;
      color: rgba(255, 255, 214, .2);
    }

    .bcont {
      padding: 18px;
    }

    .bhl {
      height: 7px;
      background: rgba(255, 255, 214, .1);
      border-radius: 3px;
      margin-bottom: 7px;
    }

    .bhl:nth-child(2) {
      width: 68%;
    }

    .bhl:nth-child(3) {
      width: 48%;
      margin-bottom: 16px;
    }

    .bsub {
      height: 4px;
      background: rgba(255, 255, 214, .05);
      border-radius: 2px;
      margin-bottom: 5px;
    }

    .bsub:last-of-type {
      width: 58%;
    }

    .bbtn {
      display: inline-block;
      margin-top: 12px;
      height: 24px;
      width: 80px;
      background: rgba(255, 255, 214, .08);
      border: 1px solid rgba(255, 255, 214, .12);
      border-radius: 20px;
    }

    .bcards {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 7px;
      margin-top: 13px;
    }

    .bcard {
      height: 44px;
      background: rgba(255, 255, 214, .03);
      border: 1px solid rgba(255, 255, 214, .05);
      border-radius: 7px;
    }

    .svc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .svc-card {
      background: rgba(255, 255, 214, .02);
      border: 1px solid rgba(255, 255, 214, .07);
      border-radius: 20px;
      padding: 32px 26px;
      position: relative;
      overflow: hidden;
      transition: border-color .3s, background .3s, transform .25s, box-shadow .25s;
    }

    .svc-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at top left, rgba(255, 255, 214, .06), transparent 65%);
      opacity: 0;
      transition: opacity .3s;
      pointer-events: none;
    }

    .svc-card::after {
      content: '';
      position: absolute;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 214, .06), transparent);
      transition: right .5s;
      z-index: 1;
      pointer-events: none;
    }

    .svc-card:hover {
      border-color: rgba(255, 255, 214, .13);
      background: rgba(255, 255, 214, .035);
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
    }

    .svc-card:hover::before {
      opacity: 1;
    }

    .svc-card:hover::after {
      right: 100%;
    }

    .svc-ico {
      width: 36px;
      height: 36px;
      background: rgba(255, 255, 214, .04);
      border: 1px solid rgba(255, 255, 214, .08);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      font-size: 15px;
    }

    .svc-num {
      font-family: var(--sf);
      font-size: 10px;
      color: rgba(255, 255, 214, .15);
      letter-spacing: .12em;
      display: block;
      margin-bottom: 8px;
    }

    .svc-card h3 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 21px;
      margin-bottom: 9px;
      line-height: 1.1;
    }

    .svc-card p {
      font-family: var(--sf);
      font-size: 13px;
      color: rgba(255, 255, 214, .58);
      line-height: 1.7;
    }

    /* ═══ COMPARISON ═══ */
    .comp-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 50px;
    }

    .comp-col {
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 214, .07);
      transition: border-color .3s;
    }

    .comp-col.good {
      border-color: rgba(255, 255, 214, .12);
    }

    .comp-col:hover {
      border-color: rgba(255, 255, 214, .14);
    }

    .comp-hd {
      padding: 18px 26px;
      border-bottom: 1px solid rgba(255, 255, 214, .07);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .comp-hd.bad {
      background: rgba(255, 255, 214, .015);
    }

    .comp-hd.good {
      background: rgba(255, 255, 214, .05);
    }

    .comp-lbl {
      font-family: var(--sf);
      font-size: 11px;
      letter-spacing: .1em;
    }

    .comp-lbl.bad {
      color: rgba(255, 255, 214, .2);
    }

    .comp-lbl.good {
      color: var(--cream);
    }

    .cico {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      flex-shrink: 0;
    }

    .cico.x {
      background: rgba(255, 255, 214, .04);
      color: rgba(255, 255, 214, .16);
    }

    .cico.ok {
      background: rgba(255, 255, 214, .1);
      color: var(--cream);
    }

    .comp-items {
      padding: 4px 0;
    }

    .comp-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 13px 26px;
      border-bottom: 1px solid rgba(255, 255, 214, .04);
      font-family: var(--sf);
      font-size: 13px;
      transition: background .2s;
    }

    .comp-item:last-child {
      border-bottom: none;
    }

    .comp-item:hover {
      background: rgba(255, 255, 214, .02);
    }

    .comp-item.bi {
      color: rgba(255, 255, 214, .25);
    }

    .comp-item.gi {
      color: rgba(255, 255, 214, .62);
    }

    /* ═══ PROCESS ═══ */
    .process-top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
      margin-bottom: 28px;
    }

    .process-headline {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1.15;
      letter-spacing: -.025em;
    }

    .process-headline em {
      font-style: italic;
      color: var(--cream);
    }

    .process-intro {
      font-family: var(--sf);
      font-size: 14px;
      color: rgba(255, 255, 214, .6);
      line-height: 1.8;
      padding-top: 4px;
    }

    .process-track {
      height: 2px;
      background: rgba(255, 255, 214, .06);
      border-radius: 2px;
      margin-bottom: 2px;
      overflow: hidden;
      position: relative;
    }

    .process-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, rgba(255, 255, 214, .15), rgba(255, 255, 214, .55), rgba(255, 255, 214, .15));
      border-radius: 2px;
      transition: width .35s cubic-bezier(.4, 0, .2, 1);
    }

    .process-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: rgba(255, 255, 214, .07);
      border: 1px solid rgba(255, 255, 214, .07);
      border-radius: 20px;
      overflow: hidden;
    }

    .step {
      background: var(--black);
      padding: 30px 22px;
      transition: background .3s;
    }

    .step:hover {
      background: rgba(255, 255, 214, .02);
    }

    .step-num {
      font-family: var(--sf);
      font-size: 24px;
      color: rgba(255, 255, 214, .05);
      display: block;
      line-height: 1;
      margin-bottom: 14px;
    }

    .step h4 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 18px;
      color: var(--cream);
      margin-bottom: 8px;
    }

    .step p {
      font-family: var(--sf);
      font-size: 13px;
      color: rgba(255, 255, 214, .58);
      line-height: 1.6;
    }

    /* ═══ PORTFOLIO ═══ */
    .portfolio-headline {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(30px, 5vw, 54px);
      line-height: 1.15;
      letter-spacing: -.025em;
      max-width: 540px;
      margin-bottom: 12px;
    }

    .portfolio-headline em {
      font-style: italic;
      color: var(--cream);
    }

    .portfolio-sub {
      font-family: var(--sf);
      font-size: 13px;
      color: rgba(255, 255, 214, .52);
      margin-bottom: 44px;
    }

    .portfolio-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .proj-card {
      background: rgba(255, 255, 214, .02);
      border: 1px solid rgba(255, 255, 214, .07);
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      overflow: hidden;
      transition: border-color .3s, transform .25s, box-shadow .25s;
    }

    .proj-card::after {
      content: '';
      position: absolute;
      top: 0;
      right: -100%;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 214, .2), transparent);
      transition: right .6s;
      z-index: 2;
      pointer-events: none;
    }

    .proj-card:hover {
      border-color: rgba(255, 255, 214, .12);
      transform: translateY(-3px);
      box-shadow: 0 12px 36px rgba(0, 0, 0, .3);
    }

    .proj-card:hover::after {
      right: 100%;
    }

    .proj-thumb {
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .proj-thumb.dn {
      background: linear-gradient(135deg, #0a0a0a, #0f1a0f, #0a0a0a);
    }

    .proj-thumb.we {
      background: linear-gradient(135deg, #0d0a08, #1a120a, #0d0a08);
    }

    .proj-thumb::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 214, .05), transparent 65%);
    }

    .proj-thumb-lbl {
      font-family: var(--serif);
      font-size: 23px;
      font-weight: 400;
      position: relative;
      z-index: 1;
    }

    .proj-thumb.dn .proj-thumb-lbl {
      color: rgba(180, 255, 180, .68);
    }

    .proj-thumb.we .proj-thumb-lbl {
      color: rgba(255, 220, 180, .68);
    }

    .proj-info {
      padding: 22px 24px 26px;
    }

    .proj-tag {
      display: inline-block;
      padding: 3px 10px;
      background: rgba(255, 255, 214, .04);
      border: 1px solid rgba(255, 255, 214, .08);
      border-radius: 100px;
      font-family: var(--sf);
      font-size: 10px;
      letter-spacing: .08em;
      color: rgba(255, 255, 214, .3);
      margin-bottom: 10px;
    }

    .proj-info h3 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 21px;
      margin-bottom: 7px;
    }

    .proj-info p {
      font-family: var(--sf);
      font-size: 13px;
      color: rgba(255, 255, 214, .55);
      line-height: 1.65;
    }

    /* ═══ TESTIMONIALS ═══ */
    .testi-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 48px;
    }

    .testi-headline {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(30px, 4.5vw, 54px);
      line-height: 1.15;
      letter-spacing: -.025em;
    }

    .testi-headline em {
      font-style: italic;
      color: var(--cream);
    }

    .testi-controls {
      display: flex;
      gap: 10px;
    }

    .testi-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(255, 255, 214, .04);
      border: 1px solid rgba(255, 255, 214, .1);
      color: rgba(255, 255, 214, .45);
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      transition: background .25s, border-color .25s, color .25s, transform .2s, box-shadow .25s;
    }

    .testi-btn::before {
      content: '';
      position: absolute;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 214, .1), transparent);
      transition: right .45s;
      z-index: 1;
    }

    .testi-btn:hover {
      background: rgba(255, 255, 214, .09);
      border-color: rgba(255, 255, 214, .22);
      color: var(--cream);
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(255, 255, 214, .04);
    }

    .testi-btn:hover::before {
      right: 100%;
    }

    .testi-slider {
      position: relative;
      overflow: hidden;
    }

    .testi-track {
      display: flex;
      transition: transform .6s cubic-bezier(.4, 0, .2, 1);
    }

    .testi-slide {
      min-width: 100%;
      background: rgba(255, 255, 214, .025);
      border: 1px solid rgba(255, 255, 214, .08);
      border-radius: 24px;
      padding: 56px 60px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 40px;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .testi-slide::before {
      content: '';
      position: absolute;
      top: -30%;
      left: -10%;
      width: 50%;
      height: 130%;
      background: radial-gradient(ellipse, rgba(255, 255, 214, .035), transparent 65%);
      pointer-events: none;
    }

    .testi-quote {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(20px, 2.8vw, 30px);
      line-height: 1.4;
      color: rgba(255, 255, 214, .82);
      font-style: italic;
      position: relative;
      z-index: 1;
    }

    .testi-quote::before {
      content: '"';
      font-size: 72px;
      line-height: 0;
      position: absolute;
      top: 18px;
      left: -16px;
      color: rgba(255, 255, 214, .05);
      font-style: normal;
    }

    .testi-author {
      text-align: right;
      position: relative;
      z-index: 1;
      flex-shrink: 0;
    }

    .testi-avatar {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      background: rgba(255, 255, 214, .06);
      border: 1px solid rgba(255, 255, 214, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--serif);
      font-size: 22px;
      color: rgba(255, 255, 214, .45);
      margin: 0 0 14px auto;
    }

    .testi-name {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 17px;
      color: var(--cream);
      margin-bottom: 3px;
    }

    .testi-role {
      font-family: var(--sf);
      font-size: 11px;
      color: rgba(255, 255, 214, .5);
      letter-spacing: .04em;
    }

    .testi-biz {
      font-family: var(--sf);
      font-size: 11px;
      color: rgba(255, 255, 214, .35);
      letter-spacing: .06em;
      margin-top: 3px;
    }

    .testi-dots {
      display: flex;
      gap: 7px;
      justify-content: center;
      margin-top: 20px;
    }

    .testi-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255, 255, 214, .14);
      cursor: pointer;
      transition: all .3s;
    }

    .testi-dot.active {
      background: rgba(255, 255, 214, .52);
      width: 18px;
      border-radius: 3px;
    }

    /* ═══ PRICING ═══ */
    .pricing-headline {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(30px, 5vw, 54px);
      line-height: 1.15;
      letter-spacing: -.025em;
      margin-bottom: 12px;
    }

    .pricing-headline em {
      font-style: italic;
      color: var(--cream);
    }

    .pricing-sub {
      font-family: var(--sf);
      font-size: 13px;
      color: rgba(255, 255, 214, .55);
      margin-bottom: 44px;
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 12px;
    }

    .pricing-care {
      margin-top: 0;
    }

    .care-full {
      background: rgba(255, 255, 214, .015);
      border: 1px dashed rgba(255, 255, 214, .07);
      border-radius: 20px;
      padding: 28px 32px;
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      align-items: center;
      gap: 32px;
      position: relative;
      overflow: hidden;
      transition: transform .3s, box-shadow .3s;
    }

    .care-full:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
    }

    .care-full::after {
      content: '';
      position: absolute;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 214, .05), transparent);
      transition: right .55s;
      z-index: 1;
      pointer-events: none;
    }

    .care-full:hover::after {
      right: 100%;
    }

    .care-label {
      font-family: var(--sf);
      font-size: 11px;
      letter-spacing: .12em;
      color: rgba(255, 255, 214, .45);
    }

    .care-price {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 32px;
      color: rgba(255, 255, 214, .8);
      letter-spacing: -.02em;
    }

    .care-price sup {
      font-size: 16px;
      vertical-align: super;
    }

    .care-period {
      font-family: var(--sf);
      font-size: 11px;
      color: rgba(255, 255, 214, .4);
    }

    .care-feats {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
    }

    .care-feats span {
      font-family: var(--sf);
      font-size: 12px;
      color: rgba(255, 255, 214, .55);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .care-feats span::before {
      content: '';
      width: 10px;
      height: 1px;
      background: rgba(255, 255, 214, .22);
      flex-shrink: 0;
    }

    .care-btn {
      padding: 10px 22px;
      background: rgba(255, 255, 214, .05);
      border: 1px solid rgba(255, 255, 214, .1);
      border-radius: 10px;
      color: rgba(255, 255, 214, .5);
      font-family: var(--sf);
      font-size: 12px;
      text-decoration: none;
      cursor: pointer;
      white-space: nowrap;
      position: relative;
      overflow: hidden;
      z-index: 2;
      transition: background .25s, border-color .25s, color .25s, transform .2s;
    }

    .care-btn::before {
      content: '';
      position: absolute;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 214, .1), transparent);
      transition: right .45s;
      z-index: 1;
    }

    .care-btn:hover {
      background: rgba(255, 255, 214, .1);
      border-color: rgba(255, 255, 214, .2);
      color: var(--cream);
      transform: translateY(-1px);
    }

    .care-btn:hover::before {
      right: 100%;
    }

    .price-card {
      border-radius: 20px;
      padding: 32px 26px;
      position: relative;
      overflow: hidden;
      transition: transform .3s, box-shadow .3s;
    }

    .price-card:hover {
      transform: translateY(-4px);
    }

    .price-card.silver {
      background: rgba(200, 200, 210, .025);
      border: 1px solid rgba(200, 200, 210, .08);
    }

    .price-card.silver:hover {
      box-shadow: 0 14px 36px rgba(0, 0, 0, .3);
    }

    .price-card.standard {
      background: rgba(255, 255, 214, .065);
      border: 1px solid rgba(255, 255, 214, .2);
      box-shadow: 0 0 36px rgba(255, 255, 214, .055), 0 0 72px rgba(255, 255, 214, .025);
    }

    .price-card.standard::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at top, rgba(255, 255, 214, .07), transparent 55%);
      pointer-events: none;
    }

    .price-card.standard:hover {
      box-shadow: 0 0 52px rgba(255, 255, 214, .09), 0 0 100px rgba(255, 255, 214, .04), 0 14px 36px rgba(0, 0, 0, .2);
    }

    .price-card.purple {
      background: rgba(100, 60, 180, .03);
      border: 1px solid rgba(130, 80, 210, .09);
    }

    .price-card.purple:hover {
      box-shadow: 0 14px 36px rgba(0, 0, 0, .3);
    }

    .price-card.care {
      background: rgba(255, 255, 214, .015);
      border: 1px dashed rgba(255, 255, 214, .07);
    }

    .price-card.care:hover {
      box-shadow: 0 14px 36px rgba(0, 0, 0, .25);
    }

    /* shimmer on price cards */
    .price-card::after {
      content: '';
      position: absolute;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 214, .05), transparent);
      transition: right .55s;
      z-index: 1;
      pointer-events: none;
    }

    .price-card:hover::after {
      right: 100%;
    }

    .featured-badge {
      position: absolute;
      top: 14px;
      right: 14px;
      padding: 3px 10px;
      background: rgba(255, 255, 214, .1);
      border: 1px solid rgba(255, 255, 214, .2);
      border-radius: 100px;
      font-family: var(--sf);
      font-size: 9px;
      letter-spacing: .1em;
      color: var(--cream);
      backdrop-filter: blur(10px);
    }

    .price-tier {
      font-family: var(--sf);
      font-size: 10px;
      letter-spacing: .14em;
      color: rgba(255, 255, 214, .32);
      margin-bottom: 16px;
      position: relative;
      z-index: 2;
    }

    .price-card.standard .price-tier {
      color: rgba(255, 255, 214, .52);
    }

    .price-from {
      font-family: var(--sf);
      font-size: 10px;
      color: rgba(255, 255, 214, .22);
      letter-spacing: .05em;
      margin-bottom: 3px;
      position: relative;
      z-index: 2;
    }

    .price-amount {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 36px;
      letter-spacing: -.02em;
      color: rgba(255, 255, 214, .72);
      line-height: 1;
      margin-bottom: 4px;
      position: relative;
      z-index: 2;
    }

    .price-card.standard .price-amount {
      color: var(--cream);
    }

    .price-amount sup {
      font-size: 17px;
      vertical-align: super;
    }

    .price-period {
      font-family: var(--sf);
      font-size: 10px;
      color: rgba(255, 255, 214, .26);
      margin-bottom: 22px;
      position: relative;
      z-index: 2;
    }

    .price-card.standard .price-period {
      color: rgba(255, 255, 214, .4);
    }

    .price-div {
      height: 1px;
      background: rgba(255, 255, 214, .07);
      margin-bottom: 20px;
      position: relative;
      z-index: 2;
    }

    .price-feats {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 24px;
      position: relative;
      z-index: 2;
    }

    .price-feats li {
      font-family: var(--sf);
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 13px;
      color: rgba(255, 255, 214, .55);
    }

    .price-card.standard .price-feats li {
      color: rgba(255, 255, 214, .75);
    }

    .price-feats li::before {
      content: '';
      width: 11px;
      height: 1px;
      background: rgba(255, 255, 214, .22);
      flex-shrink: 0;
    }

    .price-card.standard .price-feats li::before {
      background: rgba(255, 255, 214, .35);
    }

    .price-btn {
      display: block;
      text-align: center;
      padding: 11px;
      background: rgba(255, 255, 214, .05);
      border: 1px solid rgba(255, 255, 214, .1);
      border-radius: 10px;
      color: rgba(255, 255, 214, .55);
      font-family: var(--sf);
      font-size: 12px;
      text-decoration: none;
      cursor: pointer;
      backdrop-filter: blur(8px);
      position: relative;
      overflow: hidden;
      z-index: 2;
      transition: background .25s, border-color .25s, color .25s, transform .2s, box-shadow .25s;
    }

    .price-btn::before {
      content: '';
      position: absolute;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 214, .1), transparent);
      transition: right .45s;
      z-index: 1;
    }

    .price-btn:hover {
      background: rgba(255, 255, 214, .1);
      border-color: rgba(255, 255, 214, .22);
      color: var(--cream);
      transform: translateY(-2px);
      box-shadow: 0 5px 18px rgba(255, 255, 214, .04);
    }

    .price-btn:hover::before {
      right: 100%;
    }

    .price-card.standard .price-btn {
      background: rgba(255, 255, 214, .1);
      border-color: rgba(255, 255, 214, .24);
      color: var(--cream);
    }

    .price-card.standard .price-btn:hover {
      background: rgba(255, 255, 214, .18);
      border-color: rgba(255, 255, 214, .4);
    }

    .price-card.purple .price-btn {
      color: rgba(200, 160, 255, .6);
    }

    /* ═══ FINAL CTA ═══ */
    .final-cta {
      padding: 80px 24px 120px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .final-cta::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 900px;
      height: 500px;
      background: radial-gradient(ellipse, rgba(255, 255, 214, .055) 0%, transparent 65%);
      pointer-events: none;
    }

    .cta-wrap {
      max-width: 680px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .cta-label {
      font-family: var(--sf);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 10px;
      letter-spacing: .16em;
      color: rgba(255, 255, 214, .26);
      margin-bottom: 18px;
    }

    .cta-headline {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(40px, 6.5vw, 72px);
      line-height: 1.0;
      letter-spacing: -.03em;
      margin-bottom: 18px;
    }

    .cta-headline em {
      font-style: italic;
      color: var(--cream);
    }

    .cta-sub {
      font-family: var(--sf);
      font-size: 14px;
      color: rgba(255, 255, 214, .6);
      max-width: 400px;
      margin: 0 auto 38px;
      line-height: 1.75;
    }

    .cta-actions {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .cta-main-btn {
      padding: 14px 36px;
      background: rgba(255, 255, 214, .09);
      border: 1px solid rgba(255, 255, 214, .25);
      border-radius: 100px;
      color: var(--cream);
      font-family: var(--sf);
      font-size: 14px;
      text-decoration: none;
      cursor: pointer;
      backdrop-filter: blur(20px);
      position: relative;
      overflow: hidden;
      transition: all .25s;
    }

    .cta-main-btn::before {
      content: '';
      position: absolute;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 214, .12), transparent);
      transition: right .5s;
      z-index: 1;
    }

    .cta-main-btn:hover {
      background: rgba(255, 255, 214, .16);
      border-color: rgba(255, 255, 214, .45);
      transform: translateY(-3px);
      box-shadow: 0 10px 36px rgba(255, 255, 214, .06);
    }

    .cta-main-btn:hover::before {
      right: 100%;
    }

    .cta-sec-btn {
      padding: 14px 32px;
      background: transparent;
      border: 1px solid rgba(255, 255, 214, .08);
      border-radius: 100px;
      color: rgba(255, 255, 214, .4);
      font-family: var(--sf);
      font-size: 14px;
      text-decoration: none;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: border-color .25s, color .25s, transform .2s, box-shadow .25s;
    }

    .cta-sec-btn::before {
      content: '';
      position: absolute;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 214, .07), transparent);
      transition: right .5s;
      z-index: 1;
    }

    .cta-sec-btn:hover {
      color: var(--cream);
      border-color: rgba(255, 255, 214, .18);
      transform: translateY(-2px);
    }

    .cta-sec-btn:hover::before {
      right: 100%;
    }

    /* ═══ PRE-FOOTER ═══ */
    .pre-footer {
      text-align: center;
      padding: 32px 24px;
      border-top: 1px solid rgba(255, 255, 214, .05);
    }

    .pre-footer p {
      font-family: var(--serif);
      font-weight: 400;
      font-style: italic;
      font-size: 14px;
      color: rgba(255, 255, 214, .38);
    }

    /* ═══ FOOTER ═══ */
    footer {
      border-top: 1px solid rgba(255, 255, 214, .06);
      padding: 64px 24px 0;
      position: relative;
      overflow: hidden;
    }

    footer::before {
      content: '';
      position: absolute;
      top: -40%;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 80%;
      background: radial-gradient(ellipse, rgba(255, 255, 214, .018), transparent 70%);
      pointer-events: none;
    }

    .footer-grid {
      max-width: 1160px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 52px;
      padding-bottom: 56px;
      position: relative;
      z-index: 1;
    }

    .footer-brand h3 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 23px;
      color: var(--cream);
      margin-bottom: 11px;
    }

    .footer-brand p {
      font-family: var(--sf);
      font-size: 13px;
      color: rgba(255, 255, 214, .55);
      line-height: 1.75;
      margin-bottom: 12px;
      max-width: 240px;
    }

    .footer-brand .tagline {
      font-family: var(--serif);
      font-style: italic;
      font-size: 12px;
      color: rgba(255, 255, 214, .35);
    }

    .footer-col h4 {
      font-family: var(--sf);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .1em;
      color: rgba(255, 255, 214, .5);
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .footer-col ul li a,
    .footer-col ul li {
      font-family: var(--sf);
      font-size: 13px;
      color: rgba(255, 255, 214, .42);
      text-decoration: none;
      transition: color .2s;
    }

    .footer-col ul li a:hover {
      color: rgba(255, 255, 214, .75);
    }

    .footer-col ul li span {
      color: rgba(255, 255, 214, .3);
    }

    .footer-scarcity {
      font-family: var(--serif);
      font-style: italic;
      font-size: 12px;
      color: rgba(255, 255, 214, .3);
      margin-top: 18px;
      line-height: 1.5;
    }

    .footer-wa {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 13px;
      padding: 8px 16px;
      background: rgba(255, 255, 214, .035);
      border: 1px solid rgba(255, 255, 214, .08);
      border-radius: 100px;
      font-family: var(--sf);
      font-size: 11px;
      color: rgba(255, 255, 214, .4);
      text-decoration: none;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all .25s;
    }

    .footer-wa::before {
      content: '';
      position: absolute;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 214, .08), transparent);
      transition: right .45s;
    }

    .footer-wa:hover {
      background: rgba(255, 255, 214, .08);
      border-color: rgba(255, 255, 214, .16);
      color: rgba(255, 255, 214, .7);
      transform: translateY(-1px);
    }

    .footer-wa:hover::before {
      right: 100%;
    }

    .footer-bottom {
      max-width: 1160px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 0;
      border-top: 1px solid rgba(255, 255, 214, .05);
    }

    .footer-copy {
      font-family: var(--sf);
      font-size: 10px;
      color: rgba(255, 255, 214, .14);
      letter-spacing: .04em;
    }

    .footer-legal {
      display: flex;
      gap: 18px;
    }

    .footer-legal a {
      font-family: var(--sf);
      font-size: 10px;
      color: rgba(255, 255, 214, .14);
      text-decoration: none;
      position: relative;
      overflow: hidden;
      transition: color .2s;
    }

    .footer-legal a:hover {
      color: rgba(255, 255, 214, .38);
    }

    /* ═══ REVEAL ═══ */
    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .7s ease, transform .7s ease;
    }

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

    .d1 {
      transition-delay: .1s;
    }

    .d2 {
      transition-delay: .2s;
    }

    .d3 {
      transition-delay: .3s;
    }

    .d4 {
      transition-delay: .4s;
    }

    /* ═══ SCROLLBAR ═══ */
    ::-webkit-scrollbar {
      width: 2px;
    }

    ::-webkit-scrollbar-track {
      background: var(--black);
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 214, .1);
      border-radius: 2px;
    }

    @media(max-width:900px) {
      .nav-links {
        display: none;
      }

      .problem-grid,
      .svc-grid,
      .process-steps,
      .pricing-grid,
      .footer-grid,
      .comp-wrap,
      .portfolio-grid,
      .problem-bottom,
      .process-top,
      .services-top,
      .shc,
      .testi-slide {
        grid-template-columns: 1fr;
      }

      .services-desc {
        text-align: left;
        max-width: 100%;
      }

      .hero-proof {
        gap: 28px;
        flex-wrap: wrap;
      }

      .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
      }

      .testi-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
      }

      .testi-slide {
        padding: 32px 24px;
      }

      .testi-author {
        text-align: left;
      }

      .testi-avatar {
        margin: 0 0 10px 0;
      }
    }

    /* ═══ GP STRIP ═══ */
    .gp-strip {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 10px 0;
      position: relative;
      border-top: 1px solid rgba(255, 255, 214, .04);
      border-bottom: 1px solid rgba(255, 255, 214, .04);
    }

    .gp-strip::before,
    .gp-strip::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 160px;
      z-index: 2;
    }

    .gp-strip::before {
      left: 0;
      background: linear-gradient(90deg, var(--black) 40%, transparent);
    }

    .gp-strip::after {
      right: 0;
      background: linear-gradient(270deg, var(--black) 40%, transparent);
    }

    .gp-inner {
      display: flex;
      align-items: center;
      white-space: nowrap;
      animation: gpScroll 40s linear infinite;
      width: max-content;
    }

    .gp-item {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 0 28px;
      font-family: var(--sf);
      font-size: 10px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255, 255, 214, .1);
    }

    .gp-item strong {
      color: rgba(255, 255, 214, .22);
      font-weight: 400;
      letter-spacing: .2em;
    }

    .gp-dot {
      width: 2px;
      height: 2px;
      border-radius: 50%;
      background: rgba(255, 255, 214, .08);
      flex-shrink: 0;
    }

    @keyframes gpScroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }