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

      :root {
        --ink: #0d0d0d;
        --cream: #f5f0e8;
        --rust: #c94a2b;
        --gold: #d4a031;
        --muted: #6b6560;
        --line: rgba(13, 13, 13, 0.1);

        --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
        --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
      }

      html {
        scroll-behavior: smooth;
      }
      body {
        background: var(--cream);
        color: var(--ink);
        font-family: "Sora", sans-serif;
        font-weight: 300;
        overflow-x: hidden;
        cursor: none;
      }

      /* ── CURSOR ── */
      .cursor {
        position: fixed;
        width: 8px;
        height: 8px;
        background: var(--rust);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        transition:
          width 0.3s var(--ease-out-quart),
          height 0.3s var(--ease-out-quart),
          background 0.3s;
        mix-blend-mode: multiply;
      }
      .cursor-ring {
        position: fixed;
        width: 32px;
        height: 32px;
        border: 1px solid var(--rust);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9998;
        transform: translate(-50%, -50%);
        transition:
          width 0.4s var(--ease-out-quart),
          height 0.4s var(--ease-out-quart),
          opacity 0.3s,
          border-color 0.3s;
        opacity: 0.4;
      }
      body.cursor-hover .cursor {
        width: 16px;
        height: 16px;
        background: var(--rust);
      }
      body.cursor-hover .cursor-ring {
        width: 48px;
        height: 48px;
        opacity: 0.15;
      }
      body.cursor-dark .cursor {
        mix-blend-mode: screen;
        background: var(--cream);
      }
      body.cursor-dark .cursor-ring {
        border-color: var(--cream);
      }

      /* ── NOISE ── */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
        pointer-events: none;
        z-index: 9000;
        opacity: 0.35;
      }

      /* ── BTNS ── */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.9rem 1.8rem;
        font-family: "DM Mono", monospace;
        font-size: 0.75rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-decoration: none;
        border: none;
        cursor: none;
        position: relative;
        overflow: hidden;
        transition: color 0.3s;
      }
      .btn .btn-bg {
        position: absolute;
        inset: 0;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.35s var(--ease-out-quart);
        z-index: 0;
      }
      .btn span {
        position: relative;
        z-index: 1;
      }
      .btn:hover .btn-bg {
        transform: scaleX(1);
      }

      .btn-primary {
        background: var(--ink);
        color: var(--cream);
      }
      .btn-primary .btn-bg {
        background: #333;
      }

      .btn-outline {
        background: transparent;
        color: var(--ink);
        border: 1.5px solid var(--ink);
      }
      .btn-outline .btn-bg {
        background: var(--ink);
      }
      .btn-outline:hover {
        color: var(--cream);
      }

      .btn-rust {
        background: var(--rust);
        color: var(--cream);
      }
      .btn-rust .btn-bg {
        background: #a33520;
      }

      .btn-cream {
        background: var(--cream);
        color: var(--rust);
      }
      .btn-cream .btn-bg {
        background: var(--gold);
      }
      .btn-cream:hover {
        color: var(--ink);
      }

      .btn-gold {
        background: var(--gold);
        color: var(--ink);
      }
      .btn-gold .btn-bg {
        background: #b8891e;
      }

      .btn-sm {
        padding: 0.65rem 1.4rem;
        font-size: 0.7rem;
      }

      /* ── HERO ── */
      .hero {
        min-height: 100svh;
        display: grid;
        grid-template-columns: 55% 45%;
        padding-top: 72px;
        position: relative;
        overflow: hidden;
      }

      /* Animated ink drip lines */
      .hero-lines {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
      }
      .hero-line {
        position: absolute;
        top: 0;
        width: 1px;
        background: linear-gradient(
          to bottom,
          transparent,
          var(--line) 20%,
          var(--line) 80%,
          transparent
        );
        transform: scaleY(0);
        transform-origin: top;
        animation: lineGrow 1.2s var(--ease-out-expo) forwards;
      }
      .hero-line:nth-child(1) {
        left: 33%;
        animation-delay: 0.2s;
      }
      .hero-line:nth-child(2) {
        left: 66%;
        animation-delay: 0.35s;
      }
      @keyframes lineGrow {
        to {
          transform: scaleY(1);
        }
      }
      /* but hero-line height needs to be set */
      .hero-line {
        height: 100%;
      }

      .hero-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 5rem 3rem 5rem 5rem;
        position: relative;
        z-index: 2;
      }

      .hero-eyebrow {
        font-family: "DM Mono", monospace;
        font-size: 0.68rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--rust);
        display: flex;
        align-items: center;
        gap: 0.8rem;
        margin-bottom: 2rem;
        opacity: 0;
        transform: translateX(-20px);
        animation: slideInLeft 0.7s var(--ease-out-expo) 0.3s forwards;
      }
      .hero-eyebrow::before {
        content: "";
        display: block;
        width: 28px;
        height: 1px;
        background: var(--rust);
        transform: scaleX(0);
        transform-origin: left;
        animation: scaleIn 0.5s var(--ease-out-quart) 0.6s forwards;
      }

      .hero-h1 {
        font-family: "Playfair Display", serif;
        font-size: clamp(3.5rem, 6.5vw, 7rem);
        font-weight: 900;
        line-height: 0.95;
        letter-spacing: -0.04em;
        color: var(--ink);
        overflow: hidden;
      }
      .hero-h1 .line-wrap {
        overflow: hidden;
      }
      .hero-h1 .line-inner {
        display: block;
        transform: translateY(105%);
        animation: slideUp 0.8s var(--ease-out-expo) forwards;
      }
      .hero-h1 .line-inner:nth-child(1) {
        animation-delay: 0.45s;
      }
      .hero-h1 .line-inner:nth-child(2) {
        animation-delay: 0.55s;
      }
      .hero-h1 .line-inner:nth-child(3) {
        animation-delay: 0.65s;
      }
      .hero-h1 .line-inner:nth-child(4) {
        animation-delay: 0.75s;
      }
      .hero-h1 em {
        font-style: italic;
        color: var(--rust);
      }

      .hero-sub {
        font-size: clamp(0.95rem, 1.2vw, 1.1rem);
        font-weight: 300;
        color: var(--muted);
        line-height: 1.75;
        max-width: 38ch;
        margin: 2rem 0 3rem;
        opacity: 0;
        transform: translateY(16px);
        animation: fadeUp 0.7s var(--ease-out-quart) 0.95s forwards;
      }

      .hero-ctas {
        display: flex;
        gap: 0.875rem;
        flex-wrap: wrap;
        opacity: 0;
        transform: translateY(16px);
        animation: fadeUp 0.7s var(--ease-out-quart) 1.1s forwards;
      }

      /* HERO RIGHT — editorial dark panel */
      .hero-right {
        background: var(--ink);
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        overflow: hidden;
        padding: 3.5rem;
      }

      /* Giant italic background word */
      .hero-bg-word {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-12deg);
        font-family: "Playfair Display", serif;
        font-size: clamp(7rem, 13vw, 15rem);
        font-weight: 900;
        font-style: italic;
        color: transparent;
        -webkit-text-stroke: 1px rgba(245, 240, 232, 0.07);
        white-space: nowrap;
        user-select: none;
        pointer-events: none;
        animation: bgWordDrift 12s ease-in-out infinite alternate;
      }
      @keyframes bgWordDrift {
        from {
          transform: translate(-50%, -50%) rotate(-12deg) translateX(-8px);
        }
        to {
          transform: translate(-50%, -50%) rotate(-12deg) translateX(8px);
        }
      }

      /* Rust accent blob */
      .hero-right-blob {
        position: absolute;
        top: -20%;
        right: -20%;
        width: 55%;
        aspect-ratio: 1;
        background: radial-gradient(
          circle,
          rgba(201, 74, 43, 0.22) 0%,
          transparent 70%
        );
        animation: blobPulse 6s ease-in-out infinite alternate;
      }
      @keyframes blobPulse {
        from {
          transform: scale(1) translate(0, 0);
          opacity: 0.7;
        }
        to {
          transform: scale(1.15) translate(-10px, 10px);
          opacity: 1;
        }
      }

      .hero-card {
        position: relative;
        z-index: 2;
        background: rgba(245, 240, 232, 0.04);
        border: 1px solid rgba(245, 240, 232, 0.1);
        padding: 2.2rem 2.5rem;
        transform: translateY(30px);
        opacity: 0;
        animation: fadeUp 0.8s var(--ease-out-expo) 0.7s forwards;
      }
      .hero-card-label {
        font-family: "DM Mono", monospace;
        font-size: 0.62rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 1rem;
      }
      .hero-card-quote {
        font-family: "Playfair Display", serif;
        font-size: clamp(1.2rem, 2vw, 1.5rem);
        font-weight: 700;
        font-style: italic;
        line-height: 1.35;
        color: var(--cream);
        margin-bottom: 1.5rem;
      }
      .hero-card-meta {
        display: flex;
        align-items: center;
        gap: 1rem;
      }
      .hero-card-handle {
        font-family: "DM Mono", monospace;
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        color: rgba(245, 240, 232, 0.4);
      }
      .hero-card-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--rust);
        animation: dotPulse 2s ease-in-out infinite;
      }
      @keyframes dotPulse {
        0%,
        100% {
          opacity: 1;
          transform: scale(1);
        }
        50% {
          opacity: 0.4;
          transform: scale(0.7);
        }
      }

      /* Stats row at bottom of hero right */
      .hero-stats {
        display: flex;
        gap: 0;
        border-top: 1px solid rgba(245, 240, 232, 0.08);
        margin-top: 1.5rem;
        position: relative;
        z-index: 2;
        opacity: 0;
        transform: translateY(16px);
        animation: fadeUp 0.7s var(--ease-out-quart) 0.95s forwards;
      }
      .hero-stat {
        flex: 1;
        padding: 1.25rem 0;
        text-align: center;
        border-right: 1px solid rgba(245, 240, 232, 0.08);
        transition: background 0.25s;
      }
      .hero-stat:last-child {
        border-right: none;
      }
      .hero-stat:hover {
        background: rgba(245, 240, 232, 0.03);
      }
      .hero-stat-num {
        font-family: "Playfair Display", serif;
        font-size: 2rem;
        font-weight: 900;
        color: var(--cream);
        line-height: 1;
      }
      .hero-stat-label {
        font-family: "DM Mono", monospace;
        font-size: 0.58rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(245, 240, 232, 0.35);
        margin-top: 0.3rem;
      }

      /* ── MARQUEE ── */
      .marquee-wrap {
        overflow: hidden;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        padding: 0.9rem 0;
        background: var(--ink);
      }
      .marquee-track {
        display: flex;
        white-space: nowrap;
        animation: marquee 22s linear infinite;
      }
      .marquee-track:hover {
        animation-play-state: paused;
      }
      .marquee-item {
        font-family: "DM Mono", monospace;
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--cream);
        padding: 0 2rem;
        transition: color 0.2s;
      }
      .marquee-item:hover {
        color: var(--rust);
      }
      .marquee-dot {
        color: var(--rust);
        padding: 0 0.2rem;
      }
      @keyframes marquee {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }

      /* ── SECTION SHARED ── */
      section {
        padding: 7rem 5rem;
      }
      .s-label {
        font-family: "DM Mono", monospace;
        font-size: 0.65rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--muted);
        display: flex;
        align-items: center;
        gap: 0.8rem;
        margin-bottom: 3.5rem;
      }
      .s-label::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--line);
      }

      /* ── ABOUT — asymmetric 70/30 ── */
      #about {
        background: var(--cream);
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 5rem;
        align-items: start;
      }

      .about-left .s-label {
        margin-bottom: 2rem;
      }

      .about-h2 {
        font-family: "Playfair Display", serif;
        font-size: clamp(2.5rem, 4vw, 4.5rem);
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.03em;
        margin-bottom: 2rem;
      }
      .about-h2 span {
        color: var(--rust);
      }
      .about-h2 em {
        font-style: italic;
        font-weight: 400;
      }

      .about-body p {
        font-size: 1rem;
        line-height: 1.8;
        color: var(--muted);
        max-width: 46ch;
        margin-bottom: 1.2rem;
      }

      /* Stacked identity cards */
      .about-right {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      .id-card {
        border: 1px solid var(--line);
        padding: 2rem 2.2rem;
        position: relative;
        overflow: hidden;
        cursor: none;
        transition:
          border-color 0.3s,
          box-shadow 0.35s var(--ease-out-quart);
      }
      .id-card + .id-card {
        border-top: none;
      }
      .id-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--ink);
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 0.45s var(--ease-out-expo);
        z-index: 0;
      }
      .id-card:hover::before {
        transform: scaleY(1);
      }
      .id-card:hover {
        border-color: var(--ink);
      }
      .id-card:hover .id-num,
      .id-card:hover h3,
      .id-card:hover p {
        color: var(--cream);
      }
      .id-card:hover .id-num {
        color: var(--gold);
      }
      .id-card:hover .id-arrow {
        color: var(--rust);
        transform: translate(4px, -4px);
      }

      .id-num {
        font-family: "DM Mono", monospace;
        font-size: 0.62rem;
        color: var(--gold);
        letter-spacing: 0.16em;
        margin-bottom: 0.8rem;
        position: relative;
        z-index: 1;
        transition: color 0.3s;
      }
      .id-card h3 {
        font-family: "Playfair Display", serif;
        font-size: 1.4rem;
        font-weight: 700;
        margin-bottom: 0.6rem;
        position: relative;
        z-index: 1;
        transition: color 0.3s;
      }
      .id-card p {
        font-size: 0.88rem;
        color: var(--muted);
        line-height: 1.7;
        position: relative;
        z-index: 1;
        transition: color 0.3s;
      }
      .id-arrow {
        position: absolute;
        top: 1.8rem;
        right: 1.8rem;
        font-size: 1.1rem;
        color: rgba(13, 13, 13, 0.2);
        transition:
          color 0.3s,
          transform 0.3s var(--ease-out-quart);
        z-index: 1;
      }

      /* ── BOOKS ── */
      #books {
        background: var(--ink);
        color: var(--cream);
      }
      #books .s-label {
        color: rgba(245, 240, 232, 0.35);
      }
      #books .s-label::after {
        background: rgba(245, 240, 232, 0.1);
      }

      .books-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 4rem;
        flex-wrap: wrap;
        gap: 2rem;
      }
      .books-header h2 {
        font-family: "Playfair Display", serif;
        font-size: clamp(2.5rem, 4vw, 4rem);
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.03em;
      }
      .books-header h2 em {
        font-style: italic;
        color: var(--gold);
      }
      .books-header p {
        font-size: 0.9rem;
        color: rgba(245, 240, 232, 0.45);
        max-width: 28ch;
        line-height: 1.7;
        text-align: right;
      }

      .books-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
      }

      .book-card {
        background: rgba(245, 240, 232, 0.04);
        border: 1px solid rgba(245, 240, 232, 0.08);
        overflow: hidden;
        position: relative;
        cursor: none;
        transition:
          transform 0.4s var(--ease-out-quart),
          box-shadow 0.4s var(--ease-out-quart),
          border-color 0.3s;
      }
      .book-card:hover {
        transform: translateY(-8px) rotate(-0.5deg);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
        border-color: rgba(245, 240, 232, 0.2);
      }
      .book-card:hover .book-cover-inner {
        transform: scale(1.04);
      }
      .book-card:hover .book-cta-line {
        transform: scaleX(1);
      }

      .book-cover {
        aspect-ratio: 16/9;
        overflow: hidden;
        position: relative;
      }
      .book-cover-inner {
        width: 100%;
        height: 100%;
        transition: transform 0.6s var(--ease-out-quart);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 1.8rem;
        position: relative;
      }
      .book-cover-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
      }
      .bg1 {
        background: linear-gradient(
          135deg,
          #160806 0%,
          #8a2010 60%,
          #c94a2b 100%
        );
      }
      .bg2 {
        background: linear-gradient(
          135deg,
          #050518 0%,
          #1a1a6b 60%,
          #2b2b8a 100%
        );
      }
      .book-cover-num {
        position: absolute;
        top: 1rem;
        right: 1.2rem;
        font-family: "Playfair Display", serif;
        font-size: 6rem;
        font-weight: 900;
        font-style: italic;
        color: rgba(255, 255, 255, 0.06);
        line-height: 1;
        z-index: 1;
      }
      .book-title {
        font-family: "Playfair Display", serif;
        font-size: 1.35rem;
        font-weight: 700;
        font-style: italic;
        color: var(--cream);
        line-height: 1.15;
        position: relative;
        z-index: 2;
        margin-bottom: 0.4rem;
      }
      .book-genre {
        font-family: "DM Mono", monospace;
        font-size: 0.62rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--gold);
        position: relative;
        z-index: 2;
      }
      .book-body {
        padding: 1.5rem 1.8rem 1.8rem;
      }
      .book-body p {
        font-size: 0.85rem;
        color: rgba(245, 240, 232, 0.55);
        line-height: 1.65;
        margin-bottom: 1.5rem;
      }
      .book-cta-line {
        display: block;
        height: 1px;
        background: var(--rust);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s var(--ease-out-quart);
        margin-bottom: 1.2rem;
      }

      /* ── NEWSLETTER ── */
      #newsletter {
        background: var(--rust);
        color: var(--cream);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
        align-items: center;
        padding: 7rem 5rem;
        position: relative;
        overflow: hidden;
      }
      #newsletter::before {
        content: "FREE";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-15deg);
        font-family: "Playfair Display", serif;
        font-size: clamp(8rem, 18vw, 20rem);
        font-weight: 900;
        font-style: italic;
        color: transparent;
        -webkit-text-stroke: 1px rgba(245, 240, 232, 0.08);
        white-space: nowrap;
        pointer-events: none;
        user-select: none;
      }
      #newsletter .s-label {
        color: rgba(245, 240, 232, 0.4);
        margin-bottom: 2rem;
      }
      #newsletter .s-label::after {
        background: rgba(245, 240, 232, 0.15);
      }

      .nl-h2 {
        font-family: "Playfair Display", serif;
        font-size: clamp(2.2rem, 3.5vw, 3.5rem);
        font-weight: 900;
        line-height: 1.05;
        margin-bottom: 1.4rem;
        position: relative;
        z-index: 1;
      }
      .nl-body {
        font-size: 1rem;
        line-height: 1.8;
        opacity: 0.85;
        margin-bottom: 2rem;
        max-width: 42ch;
        position: relative;
        z-index: 1;
      }
      .nl-perks {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        position: relative;
        z-index: 1;
      }
      .nl-perk {
        font-family: "DM Mono", monospace;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        opacity: 0.85;
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
      }
      .nl-perk::before {
        content: "→";
        flex-shrink: 0;
        margin-top: 0.05rem;
      }

      .nl-right {
        position: relative;
        z-index: 1;
      }
      .nl-form-box {
        background: rgba(0, 0, 0, 0.18);
        padding: 2.5rem;
        border: 1px solid rgba(245, 240, 232, 0.1);
      }
      .nl-form-label {
        font-family: "DM Mono", monospace;
        font-size: 0.65rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        opacity: 0.6;
        margin-bottom: 2rem;
        display: block;
      }
      .nl-inputs {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1.2rem;
      }
      .nl-input {
        background: transparent;
        border: none;
        border-bottom: 1.5px solid rgba(245, 240, 232, 0.3);
        padding: 0.7rem 0;
        font-family: "Sora", sans-serif;
        font-size: 0.95rem;
        color: var(--cream);
        outline: none;
        transition: border-color 0.25s;
        width: 100%;
      }
      .nl-input::placeholder {
        color: rgba(245, 240, 232, 0.45);
      }
      .nl-input:focus {
        border-color: var(--cream);
      }
      .nl-note {
        font-family: "DM Mono", monospace;
        font-size: 0.62rem;
        opacity: 0.45;
        margin-top: 0.9rem;
      }

      /* ── STATS BAR ── */
      .stats-bar {
        background: var(--gold);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow: hidden;
      }
      .stat-item {
        padding: 4rem 2rem;
        text-align: center;
        position: relative;
        border-right: 1px solid rgba(13, 13, 13, 0.1);
        overflow: hidden;
        cursor: none;
      }
      .stat-item:last-child {
        border-right: none;
      }
      .stat-item::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(13, 13, 13, 0.06);
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 0.4s var(--ease-out-quart);
      }
      .stat-item:hover::before {
        transform: scaleY(1);
      }
      .stat-num {
        font-family: "Playfair Display", serif;
        font-size: clamp(2.5rem, 4vw, 4rem);
        font-weight: 900;
        font-style: italic;
        color: var(--ink);
        line-height: 1;
        margin-bottom: 0.5rem;
        position: relative;
        z-index: 1;
      }
      .stat-label {
        font-family: "DM Mono", monospace;
        font-size: 0.68rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: rgba(13, 13, 13, 0.6);
        position: relative;
        z-index: 1;
      }

      /* ── PORTFOLIO ── */
      #portfolio {
        background: var(--ink);
        color: var(--cream);
        padding: 7rem 5rem;
        position: relative;
        overflow: hidden;
      }
      #portfolio::after {
        content: "WORK";
        position: absolute;
        bottom: -8%;
        right: -5%;
        font-family: "Playfair Display", serif;
        font-size: clamp(10rem, 24vw, 26rem);
        font-weight: 900;
        font-style: italic;
        color: transparent;
        -webkit-text-stroke: 1px rgba(245, 240, 232, 0.03);
        white-space: nowrap;
        pointer-events: none;
        user-select: none;
        letter-spacing: -0.04em;
      }
      #portfolio .s-label {
        color: rgba(245, 240, 232, 0.3);
      }
      #portfolio .s-label::after {
        background: rgba(245, 240, 232, 0.08);
      }

      .portfolio-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 4rem;
        flex-wrap: wrap;
        gap: 2rem;
        position: relative;
        z-index: 2;
      }
      .portfolio-header h2 {
        font-family: "Playfair Display", serif;
        font-size: clamp(2.5rem, 4vw, 4rem);
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.03em;
      }
      .portfolio-header h2 em {
        font-style: italic;
        color: var(--gold);
      }
      .portfolio-header p {
        font-size: 0.88rem;
        color: rgba(245, 240, 232, 0.45);
        max-width: 26ch;
        line-height: 1.7;
        text-align: right;
      }

      /* Featured project */
      .pf-featured {
        display: grid;
        grid-template-columns: 1.3fr 1fr;
        border: 1px solid rgba(245, 240, 232, 0.08);
        margin-bottom: 1.5px;
        overflow: hidden;
        position: relative;
        z-index: 2;
        cursor: none;
      }
      .pf-featured:hover .pf-screen-inner {
        transform: scale(1.04);
      }
      .pf-featured:hover .pf-cta-arrow {
        transform: translate(5px, -5px);
      }
      .pf-featured:hover {
        border-color: rgba(245, 240, 232, 0.15);
      }

      .pf-screen-wrap {
        aspect-ratio: 16/10;
        overflow: hidden;
        position: relative;
      }
      .pf-screen-inner {
        width: 100%;
        height: 100%;
        background: linear-gradient(
          135deg,
          #0d0d0d 0%,
          #1a0800 40%,
          #3d1200 100%
        );
        transition: transform 0.6s var(--ease-out-quart);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      /* Browser mock */
      .browser {
        width: 86%;
        position: absolute;
        bottom: -8%;
        left: 7%;
        background: #1a1a1a;
        border-radius: 5px 5px 0 0;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
        overflow: hidden;
      }
      .browser-bar {
        background: #252525;
        padding: 0.45rem 0.7rem;
        display: flex;
        align-items: center;
        gap: 0.45rem;
      }
      .b-dots {
        display: flex;
        gap: 4px;
      }
      .b-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
      }
      .b-dot:nth-child(1) {
        background: #ff5f57;
      }
      .b-dot:nth-child(2) {
        background: #febc2e;
      }
      .b-dot:nth-child(3) {
        background: #28c840;
      }
      .b-url {
        flex: 1;
        background: #1a1a1a;
        border-radius: 3px;
        height: 16px;
        margin-left: 0.4rem;
        display: flex;
        align-items: center;
        padding: 0 0.5rem;
      }
      .b-url span {
        font-family: "DM Mono", monospace;
        font-size: 0.5rem;
        color: rgba(255, 255, 255, 0.28);
      }
      .b-content {
        aspect-ratio: 16/9;
        position: relative;
        overflow: hidden;
      }

      /* Fake screen UI */
      .s-nav {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 16px;
        background: rgba(255, 255, 255, 0.04);
        display: flex;
        align-items: center;
        padding: 0 8px;
        gap: 7px;
      }
      .s-dot {
        width: 18px;
        height: 3.5px;
        border-radius: 1px;
        background: rgba(255, 255, 255, 0.45);
      }
      .s-dot.active {
        background: var(--gold);
      }
      .s-hero {
        position: absolute;
        top: 22%;
        left: 8%;
        right: 8%;
      }
      .s-h {
        height: 5.5px;
        background: rgba(255, 255, 255, 0.65);
        border-radius: 2px;
        margin-bottom: 5px;
      }
      .s-h.w80 {
        width: 80%;
      }
      .s-h.w55 {
        width: 55%;
      }
      .s-p {
        height: 2.5px;
        background: rgba(255, 255, 255, 0.22);
        border-radius: 1px;
        margin-bottom: 3.5px;
      }
      .s-p.w90 {
        width: 90%;
      }
      .s-p.w65 {
        width: 65%;
      }
      .s-btns {
        display: flex;
        gap: 5px;
        margin-top: 8px;
      }
      .s-btn {
        height: 10px;
        width: 52px;
        border-radius: 1px;
      }
      .s-btn.solid {
        background: var(--rust);
      }
      .s-btn.out {
        border: 1px solid rgba(255, 255, 255, 0.28);
      }
      .s-grid {
        position: absolute;
        bottom: 6%;
        left: 8%;
        right: 8%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
      }
      .s-card {
        height: 24px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 2px;
        border: 1px solid rgba(255, 255, 255, 0.07);
      }

      .pf-info {
        padding: 2.8rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: rgba(245, 240, 232, 0.025);
        border-left: 1px solid rgba(245, 240, 232, 0.07);
      }
      .pf-tag-label {
        font-family: "DM Mono", monospace;
        font-size: 0.6rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 0.8rem;
      }
      .pf-title {
        font-family: "Playfair Display", serif;
        font-size: 1.8rem;
        font-weight: 900;
        font-style: italic;
        color: var(--cream);
        line-height: 1.1;
        margin-bottom: 1rem;
      }
      .pf-desc {
        font-size: 0.82rem;
        color: rgba(245, 240, 232, 0.5);
        line-height: 1.7;
        margin-bottom: 1.8rem;
        flex: 1;
      }
      .pf-stack {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 2rem;
      }
      .pf-pill {
        font-family: "DM Mono", monospace;
        font-size: 0.58rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 0.28rem 0.65rem;
        border: 1px solid rgba(245, 240, 232, 0.13);
        color: rgba(245, 240, 232, 0.45);
      }
      .pf-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        font-family: "DM Mono", monospace;
        font-size: 0.68rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--cream);
        text-decoration: none;
        transition: gap 0.3s var(--ease-out-quart);
      }
      .pf-cta:hover {
        gap: 1.2rem;
      }
      .pf-cta-arrow {
        width: 26px;
        height: 26px;
        border: 1px solid rgba(245, 240, 232, 0.22);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        transition:
          transform 0.35s var(--ease-out-quart),
          border-color 0.25s,
          color 0.25s;
      }
      .pf-cta:hover .pf-cta-arrow {
        border-color: var(--gold);
        color: var(--gold);
      }

      /* 3-col mini portfolio */
      .port-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5px;
        position: relative;
        z-index: 2;
      }
      .pg-item {
        position: relative;
        overflow: hidden;
        cursor: none;
      }
      .pg-item:hover .pg-screen-inner {
        transform: scale(1.07);
      }
      .pg-item:hover .pg-overlay {
        opacity: 1;
      }
      .pg-item:hover .pg-title {
        transform: translateY(0);
        opacity: 1;
      }
      .pg-screen {
        aspect-ratio: 4/3;
        overflow: hidden;
      }
      .pg-screen-inner {
        width: 100%;
        height: 100%;
        transition: transform 0.55s var(--ease-out-quart);
      }
      .pg-s1 {
        background: linear-gradient(135deg, #020818 0%, #0a2266 100%);
      }
      .pg-s2 {
        background: linear-gradient(135deg, #050d05 0%, #0d3320 100%);
      }
      .pg-s3 {
        background: linear-gradient(135deg, #120a00 0%, #4a2800 100%);
      }
      .pg-overlay {
        position: absolute;
        inset: 0;
        background: rgba(13, 13, 13, 0.88);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 1.4rem;
        opacity: 0;
        transition: opacity 0.3s;
      }
      .pg-title {
        font-family: "Playfair Display", serif;
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--cream);
        transform: translateY(8px);
        opacity: 0;
        transition:
          transform 0.3s var(--ease-out-quart) 0.04s,
          opacity 0.3s ease 0.04s;
        margin-bottom: 0.3rem;
      }
      .pg-type {
        font-family: "DM Mono", monospace;
        font-size: 0.58rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--gold);
      }

      .port-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1.5rem;
        margin-top: 3rem;
        padding-top: 2.5rem;
        border-top: 1px solid rgba(245, 240, 232, 0.08);
        position: relative;
        z-index: 2;
      }
      .port-footer-quote {
        font-family: "Playfair Display", serif;
        font-size: clamp(1.2rem, 2.5vw, 1.8rem);
        font-weight: 700;
        font-style: italic;
        color: rgba(245, 240, 232, 0.5);
        max-width: 40ch;
        line-height: 1.3;
      }
      .port-footer-quote em {
        color: var(--cream);
        font-style: normal;
      }

      /* ── PRICING ── */
      #pricing {
        background: var(--ink);
        color: var(--cream);
        padding: 7rem 5rem;
      }
      #pricing .s-label {
        color: rgba(245, 240, 232, 0.3);
        margin-bottom: 1rem;
      }
      #pricing .s-label::after {
        background: rgba(245, 240, 232, 0.08);
      }

      .pricing-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 3.5rem;
        flex-wrap: wrap;
        gap: 2rem;
      }
      .pricing-top h2 {
        font-family: "Playfair Display", serif;
        font-size: clamp(2.2rem, 3.5vw, 3.5rem);
        font-weight: 900;
        line-height: 1.05;
        letter-spacing: -0.025em;
      }
      .pricing-top h2 em {
        font-style: italic;
        color: var(--gold);
      }
      .pricing-top p {
        font-size: 0.88rem;
        color: rgba(245, 240, 232, 0.45);
        max-width: 26ch;
        line-height: 1.7;
        text-align: right;
      }

      .pricing-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: rgba(245, 240, 232, 0.06);
      }
      .p-card {
        background: var(--ink);
        padding: 2.5rem 2.2rem;
        position: relative;
        overflow: hidden;
        transition: background 0.3s;
      }
      .p-card:hover {
        background: #141414;
      }
      .p-card.featured {
        background: #151010;
      }
      .p-card.featured:hover {
        background: #1c1010;
      }
      .p-badge {
        display: inline-block;
        font-family: "DM Mono", monospace;
        font-size: 0.58rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        background: var(--rust);
        color: var(--cream);
        padding: 0.28rem 0.65rem;
        margin-bottom: 1.5rem;
      }
      .p-service {
        font-family: "DM Mono", monospace;
        font-size: 0.62rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 0.7rem;
      }
      .p-card h3 {
        font-family: "Playfair Display", serif;
        font-size: 1.45rem;
        font-weight: 700;
        color: var(--cream);
        margin-bottom: 0.6rem;
        line-height: 1.2;
      }
      .p-amount {
        font-family: "Playfair Display", serif;
        font-size: 2.8rem;
        font-weight: 900;
        font-style: italic;
        color: var(--cream);
        line-height: 1;
        margin-bottom: 0.3rem;
      }
      .p-note {
        font-size: 0.75rem;
        color: rgba(245, 240, 232, 0.35);
        margin-bottom: 2rem;
      }
      .p-features {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        margin-bottom: 2.5rem;
      }
      .p-feature {
        font-family: "DM Mono", monospace;
        font-size: 0.7rem;
        letter-spacing: 0.04em;
        color: rgba(245, 240, 232, 0.55);
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        line-height: 1.4;
      }
      .p-feature::before {
        content: "—";
        color: var(--gold);
        flex-shrink: 0;
      }
      .p-slots {
        font-family: "DM Mono", monospace;
        font-size: 0.62rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--rust);
        margin-top: 1rem;
      }

      /* ── DEV SERVICES ── */
      #dev {
        background: var(--cream);
      }
      .dev-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 3.5rem;
        flex-wrap: wrap;
        gap: 1.5rem;
      }
      .dev-header h2 {
        font-family: "Playfair Display", serif;
        font-size: clamp(2.2rem, 3.8vw, 4rem);
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.03em;
      }
      .dev-header h2 span {
        color: var(--rust);
      }

      .services-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border: 1px solid var(--line);
      }
      .svc {
        padding: 2.5rem 2.2rem;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        position: relative;
        overflow: hidden;
        cursor: none;
        transition: border-color 0.3s;
      }
      .svc:nth-child(3n) {
        border-right: none;
      }
      .svc:nth-child(n + 4) {
        border-bottom: none;
      }
      .svc::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--ink);
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 0.4s var(--ease-out-expo);
      }
      .svc:hover::before {
        transform: scaleY(1);
      }
      .svc:hover {
        border-color: var(--ink);
      }
      .svc:hover .svc-num,
      .svc:hover h3,
      .svc:hover p {
        color: var(--cream);
      }
      .svc:hover .svc-num {
        color: var(--gold);
      }
      .svc-num {
        font-family: "DM Mono", monospace;
        font-size: 0.6rem;
        color: var(--gold);
        letter-spacing: 0.16em;
        margin-bottom: 1rem;
        position: relative;
        z-index: 1;
        transition: color 0.3s;
      }
      .svc h3 {
        font-family: "Playfair Display", serif;
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 0.7rem;
        line-height: 1.2;
        position: relative;
        z-index: 1;
        transition: color 0.3s;
      }
      .svc p {
        font-size: 0.85rem;
        color: var(--muted);
        line-height: 1.7;
        position: relative;
        z-index: 1;
        transition: color 0.3s;
      }

      .dev-footer {
        margin-top: 3.5rem;
        display: flex;
        align-items: center;
        gap: 2rem;
        flex-wrap: wrap;
      }
      .dev-footer p {
        font-size: 0.95rem;
        color: var(--muted);
        line-height: 1.65;
        max-width: 46ch;
      }
      .dev-footer p strong {
        color: var(--ink);
        font-weight: 600;
      }



      /* ── POPUP ── */
      .popup-overlay {
        position: fixed;
        inset: 0;
        z-index: 5000;
        background: rgba(13, 13, 13, 0.72);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.45s;
      }
      .popup-overlay.show {
        opacity: 1;
        pointer-events: all;
      }
      .popup {
        background: var(--cream);
        max-width: 560px;
        width: 100%;
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        overflow: hidden;
        transform: translateY(24px) scale(0.94);
        transition: transform 0.5s var(--ease-out-expo);
        box-shadow: 0 48px 96px rgba(0, 0, 0, 0.4);
      }
      .popup-overlay.show .popup {
        transform: translateY(0) scale(1);
      }
      .popup-left {
        background: var(--ink);
        padding: 2.5rem 2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        overflow: hidden;
      }
      .popup-left::before {
        content: '"';
        position: absolute;
        bottom: -2rem;
        left: -0.5rem;
        font-family: "Playfair Display", serif;
        font-size: 11rem;
        font-weight: 900;
        color: rgba(245, 240, 232, 0.03);
        line-height: 1;
        pointer-events: none;
      }
      .popup-tag {
        font-family: "DM Mono", monospace;
        font-size: 0.6rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 1.2rem;
      }
      .popup-offer-title {
        font-family: "Playfair Display", serif;
        font-size: 1.5rem;
        font-weight: 900;
        font-style: italic;
        color: var(--cream);
        line-height: 1.2;
        margin-bottom: 1rem;
      }
      .popup-offer-title em {
        font-style: normal;
        color: var(--rust);
      }
      .popup-desc {
        font-size: 0.8rem;
        color: rgba(245, 240, 232, 0.55);
        line-height: 1.65;
      }
      .popup-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        background: var(--rust);
        color: var(--cream);
        font-family: "DM Mono", monospace;
        font-size: 0.6rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 0.35rem 0.75rem;
        margin-top: 1.5rem;
        width: fit-content;
      }
      .popup-right {
        padding: 2.5rem 2rem 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .popup-right h3 {
        font-family: "Playfair Display", serif;
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        line-height: 1.25;
      }
      .popup-sub {
        font-size: 0.78rem;
        color: var(--muted);
        line-height: 1.6;
        margin-bottom: 1.5rem;
      }
      .popup-perks {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
      }
      .popup-perks li {
        font-size: 0.76rem;
        color: var(--muted);
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        line-height: 1.5;
      }
      .popup-perks li::before {
        content: "✓";
        color: var(--rust);
        font-weight: 700;
        font-size: 0.72rem;
        flex-shrink: 0;
      }
      .popup-input {
        width: 100%;
        border: none;
        border-bottom: 1.5px solid var(--line);
        background: transparent;
        padding: 0.6rem 0;
        font-family: "Sora", sans-serif;
        font-size: 0.85rem;
        color: var(--ink);
        outline: none;
        margin-bottom: 0.8rem;
        transition: border-color 0.2s;
      }
      .popup-input::placeholder {
        color: rgba(13, 13, 13, 0.32);
      }
      .popup-input:focus {
        border-color: var(--rust);
      }
      .popup-btn {
        width: 100%;
        justify-content: center;
        padding: 0.88rem;
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        margin-bottom: 0.7rem;
      }
      .popup-skip {
        font-family: "DM Mono", monospace;
        font-size: 0.58rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(13, 13, 13, 0.28);
        text-align: center;
        cursor: none;
        text-decoration: underline;
        text-underline-offset: 3px;
        transition: color 0.2s;
        background: none;
        border: none;
        width: 100%;
      }
      .popup-skip:hover {
        color: var(--muted);
      }
      .popup-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 30px;
        height: 30px;
        background: none;
        border: 1px solid rgba(13, 13, 13, 0.14);
        cursor: none;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.2s,
          border-color 0.2s,
          transform 0.3s var(--ease-out-quart);
        z-index: 2;
      }
      .popup-close:hover {
        background: var(--ink);
        border-color: var(--ink);
        transform: rotate(90deg);
      }
      .popup-close:hover svg path {
        stroke: var(--cream);
      }
      .popup-close svg {
        width: 12px;
        height: 12px;
      }
      .popup-close svg path {
        stroke: var(--ink);
        stroke-width: 1.5;
        transition: stroke 0.2s;
      }

      /* ── SCROLL REVEAL ── */
      .reveal {
        opacity: 0;
        transform: translateY(32px);
        transition:
          opacity 0.75s var(--ease-out-quart),
          transform 0.75s var(--ease-out-quart);
      }
      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 {
        transition-delay: 0.1s;
      }
      .reveal-delay-2 {
        transition-delay: 0.2s;
      }
      .reveal-delay-3 {
        transition-delay: 0.3s;
      }
      .reveal-delay-4 {
        transition-delay: 0.4s;
      }

      /* ── KEYFRAMES ── */
      @keyframes slideUp {
        from {
          transform: translateY(105%);
        }
        to {
          transform: translateY(0);
        }
      }
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(16px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes slideInLeft {
        from {
          opacity: 0;
          transform: translateX(-20px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
      @keyframes scaleIn {
        from {
          transform: scaleX(0);
        }
        to {
          transform: scaleX(1);
        }
      }

     /* ── RESPONSIVE — BODY (no header / footer) ── */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-left {
    padding: 3rem 1.5rem;
    padding-top: 5.5rem;
  }
  .hero-right {
    min-height: 360px;
  }
  section {
    padding: 5rem 1.5rem;
  }
  #about {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .books-grid {
    grid-template-columns: 1fr;
  }
  #newsletter {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 5rem 1.5rem;
  }
  .stats-bar {
    grid-template-columns: 1fr;
  }
  .stat-item {
    border-right: none;
    border-bottom: 1px solid rgba(13, 13, 13, 0.1);
  }
  .stat-item:last-child {
    border-bottom: none;
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
  .svc {
    border-right: none;
  }
  .port-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pf-featured {
    grid-template-columns: 1fr;
  }
  .pf-info {
    border-left: none;
    border-top: 1px solid rgba(245, 240, 232, 0.07);
  }
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 1px;
  }
  #portfolio {
    padding: 5rem 1.5rem;
  }
  #pricing {
    padding: 5rem 1.5rem;
  }
  .books-header {
    flex-direction: column;
  }
  .books-header p {
    text-align: left;
  }
  .portfolio-header p {
    text-align: left;
  }
  .pricing-top p {
    text-align: left;
  }
}

@media (max-width: 600px) {
  .hero-ctas {
    flex-direction: column;
  }
  .btn {
    width: 100%;
    justify-content: center;
  }
  .port-grid {
    grid-template-columns: 1fr;
  }
  .popup {
    grid-template-columns: 1fr;
  }
  .popup-left {
    display: none;
  }
  .popup-right {
    padding: 2rem 1.6rem;
  }
  .dev-header {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}