/* =============================================
   SAYED RISAT PORTFOLIO — MASTER STYLESHEET
   ============================================= */

          @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Serif+Display:ital@0;1&family=Syne:wght@400;500;600;700;800&family=Instrument+Sans:ital,wght@0,400;0,500;1,400&display=swap');

          /* ── TOKENS ── */
          :root {
               --black: #070707;
               --deep: #0c0c0c;
               --card: #111111;
               --card-hover: #161616;
               --border: rgba(255, 255, 255, 0.06);
               --border-mid: rgba(255, 255, 255, 0.1);
               --white: #f4efe6;
               --white-60: rgba(244, 239, 230, 0.6);
               --white-30: rgba(244, 239, 230, 0.3);
               --white-10: rgba(244, 239, 230, 0.08);
               --white-40: rgba(244, 239, 230, 0.4);
               --gold: #d4a843;
               --gold-light: #e8c46a;
               --gold-dim: rgba(212, 168, 67, 0.15);
               --gold-glow: rgba(212, 168, 67, 0.06);
               --gold-border: rgba(212, 168, 67, 0.25);
               --red: #c94a2a;
               --green: #3a8c5c;

               --f-display: 'Bebas Neue', sans-serif;
               --f-serif: 'DM Serif Display', serif;
               --f-ui: 'Syne', sans-serif;
               --f-body: 'Instrument Sans', sans-serif;

               --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
               --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
          }

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

          html {
               scroll-behavior: smooth;
               font-size: 16px;
               overflow-x: hidden;
          }

          body {
               background: var(--black);
               color: var(--white);
               font-family: var(--f-body);
               overflow-x: hidden;
               width: 100%;
               cursor: none;
               -webkit-font-smoothing: antialiased;
               -webkit-user-select: none;
               -moz-user-select: none;
               user-select: none;
          }

          /* Allow selection only in form inputs */
          input,
          textarea,
          select,
          .clink-val {
               -webkit-user-select: text;
               -moz-user-select: text;
               user-select: text;
          }

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

          ul {
               list-style: none;
          }

          img {
               max-width: 100%;
               display: block;
          }

          button {
               font-family: inherit;
               border: none;
               background: none;
               cursor: none;
          }

          input,
          textarea,
          select {
               font-family: inherit;
          }

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

          /* ── CURSOR ── */
          .cur {
               position: fixed;
               z-index: 9999;
               pointer-events: none;
               mix-blend-mode: normal;
          }

          .cur-dot {
               width: 8px;
               height: 8px;
               border-radius: 50%;
               background: var(--gold);
               top: 0;
               left: 0;
               transform: translate(-50%, -50%);
               transition: width .25s var(--ease-out-expo), height .25s var(--ease-out-expo), background .25s;
          }

          .cur-ring {
               width: 40px;
               height: 40px;
               border-radius: 50%;
               border: 1.5px solid rgba(212, 168, 67, .45);
               top: 0;
               left: 0;
               transform: translate(-50%, -50%);
               transition: width .3s var(--ease-out-expo), height .3s var(--ease-out-expo), opacity .3s, border-color .3s;
          }

          .cur-dot.big {
               width: 14px;
               height: 14px;
               background: var(--white);
          }

          .cur-ring.big {
               width: 60px;
               height: 60px;
               border-color: rgba(212, 168, 67, .2);
          }

          .cur-dot.hidden {
               opacity: 0;
          }

          .cur-ring.hidden {
               opacity: 0;
          }

          /* ── SCROLLBAR ── */
          ::-webkit-scrollbar {
               width: 4px;
          }

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

          ::-webkit-scrollbar-thumb {
               background: var(--gold-dim);
               border-radius: 4px;
          }

          /* ── PAGE LOADER ── */
          #loader {
               position: fixed;
               inset: 0;
               z-index: 9998;
               background: var(--black);
               display: flex;
               align-items: center;
               justify-content: center;
               flex-direction: column;
               gap: 24px;
          }

          .loader-logo {
               font-family: var(--f-display);
               font-size: 56px;
               letter-spacing: 6px;
               color: var(--white);
               overflow: hidden;
          }

          .loader-logo span {
               color: var(--gold);
          }

          .loader-bar-wrap {
               width: 160px;
               height: 2px;
               background: var(--white-10);
               border-radius: 2px;
               overflow: hidden;
          }

          .loader-bar {
               height: 100%;
               width: 0;
               background: linear-gradient(90deg, var(--gold), var(--gold-light));
               border-radius: 2px;
               animation: loadFill 1.8s var(--ease-out-expo) forwards;
          }

          @keyframes loadFill {
               to {
                    width: 100%;
               }
          }

          .loader-num {
               font-family: var(--f-display);
               font-size: 13px;
               letter-spacing: 4px;
               color: var(--white-30);
          }

          /* ── NAV ── */
          nav#nav {
               position: fixed;
               top: 0;
               left: 0;
               right: 0;
               z-index: 900;
               display: flex;
               align-items: center;
               justify-content: space-between;
               padding: 28px 60px;
               transition: padding .4s var(--ease-out-expo), background .4s, backdrop-filter .4s, border-color .4s;
               border-bottom: 1px solid transparent;
          }

          nav#nav.scrolled {
               padding: 18px 60px;
               background: rgba(7, 7, 7, .9);
               backdrop-filter: blur(24px);
               border-color: var(--border);
          }

          .nav-logo {
               font-family: var(--f-display);
               font-size: 24px;
               letter-spacing: 4px;
               color: var(--white);
               display: flex;
               align-items: center;
               gap: 2px;
          }

          .nav-logo span {
               color: var(--gold);
          }

          .nav-center {
               display: flex;
               align-items: center;
               gap: 40px;
          }

          .nav-link {
               font-family: var(--f-ui);
               font-size: 11px;
               font-weight: 500;
               letter-spacing: 2.5px;
               text-transform: uppercase;
               color: var(--white-60);
               position: relative;
               padding-bottom: 3px;
               transition: color .3s;
          }

          .nav-link::after {
               content: '';
               position: absolute;
               bottom: 0;
               left: 0;
               width: 0;
               height: 1px;
               background: var(--gold);
               transition: width .35s var(--ease-out-expo);
          }

          .nav-link:hover,
          .nav-link.active {
               color: var(--white);
          }

          .nav-link:hover::after,
          .nav-link.active::after {
               width: 100%;
          }

          .nav-right {
               display: flex;
               align-items: center;
               gap: 20px;
          }

          .nav-hire {
               font-family: var(--f-ui);
               font-size: 11px;
               font-weight: 700;
               letter-spacing: 2px;
               text-transform: uppercase;
               background: var(--gold);
               color: var(--black);
               padding: 11px 28px;
               border-radius: 2px;
               transition: background .3s, transform .2s, box-shadow .3s;
          }

          .nav-hire:hover {
               background: var(--white);
               transform: translateY(-1px);
               box-shadow: 0 8px 24px rgba(212, 168, 67, .3);
          }

          .nav-burger {
               display: none;
               flex-direction: column;
               gap: 6px;
               padding: 4px;
               width: 32px;
          }

          .nav-burger span {
               display: block;
               height: 1.5px;
               border-radius: 2px;
               background: var(--white);
               transition: all .35s var(--ease-out-expo);
          }

          .nav-burger span:nth-child(1) {
               width: 24px;
          }

          .nav-burger span:nth-child(2) {
               width: 16px;
          }

          .nav-burger span:nth-child(3) {
               width: 20px;
          }

          .nav-burger.open span:nth-child(1) {
               width: 24px;
               transform: translateY(7.5px) rotate(45deg);
          }

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

          .nav-burger.open span:nth-child(3) {
               width: 24px;
               transform: translateY(-7.5px) rotate(-45deg);
          }

          /* Mobile menu */
          #mobile-menu {
               position: fixed;
               inset: 0;
               z-index: 950;
               background: rgba(7, 7, 7, 0.97);
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
               gap: 32px;
               transform: translateY(-100%);
               transition: transform .5s var(--ease-out-expo);
               backdrop-filter: blur(20px);
          }

          #mobile-menu.open {
               transform: translateY(0);
          }

          .mob-link {
               font-family: var(--f-display);
               font-size: 48px;
               letter-spacing: 4px;
               color: var(--white-30);
               transition: color .3s, transform .3s;
               display: block;
          }

          .mob-link:hover,
          .mob-link:active {
               color: var(--gold);
               transform: translateX(8px);
          }

          /* ── HERO ── */
          #hero {
               min-height: 100svh;
               position: relative;
               display: flex;
               flex-direction: column;
               padding: 140px 60px 80px;
               overflow: hidden;
               box-sizing: border-box;
               width: 100%;
          }

          /* Grid BG */
          .hero-grid-bg {
               position: absolute;
               inset: 0;
               z-index: 0;
               background-image:
                    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
               background-size: 72px 72px;
               animation: gridScroll 30s linear infinite;
          }

          @keyframes gridScroll {
               to {
                    background-position: 0 72px;
               }
          }

          /* Gradient fade top */
          .hero-grid-bg::before {
               content: '';
               position: absolute;
               inset: 0;
               background: linear-gradient(to bottom, var(--black) 0%, transparent 30%, transparent 70%, var(--black) 100%);
          }

          /* Orbs */
          .orb {
               position: absolute;
               border-radius: 50%;
               filter: blur(100px);
               pointer-events: none;
               z-index: 1;
               max-width: 100vw;
          }

          .orb-1 {
               width: min(700px, 120vw);
               height: min(700px, 120vw);
               background: radial-gradient(circle, rgba(212, 168, 67, .11) 0%, transparent 65%);
               top: -150px;
               right: -100px;
               animation: orbDrift1 16s ease-in-out infinite;
          }

          .orb-2 {
               width: min(500px, 100vw);
               height: min(500px, 100vw);
               background: radial-gradient(circle, rgba(201, 74, 42, .08) 0%, transparent 65%);
               bottom: 0;
               left: -80px;
               animation: orbDrift2 20s ease-in-out infinite;
          }

          .orb-3 {
               width: min(300px, 80vw);
               height: min(300px, 80vw);
               background: radial-gradient(circle, rgba(212, 168, 67, .07) 0%, transparent 65%);
               top: 40%;
               left: 40%;
               animation: orbDrift1 12s ease-in-out infinite reverse;
          }

          @keyframes orbDrift1 {

               0%,
               100% {
                    transform: translateY(0) scale(1)
               }

               50% {
                    transform: translateY(-50px) scale(1.06)
               }
          }

          @keyframes orbDrift2 {

               0%,
               100% {
                    transform: translateY(0) translateX(0)
               }

               50% {
                    transform: translateY(-30px) translateX(30px)
               }
          }

          /* Rotating badge */
          .hero-badge {
               position: absolute;
               top: 130px;
               right: 70px;
               z-index: 5;
               width: 130px;
               height: 130px;
               animation: spin 22s linear infinite;
          }

          @keyframes spin {
               to {
                    transform: rotate(360deg);
               }
          }

          .hero-badge-core {
               position: absolute;
               inset: 0;
               display: flex;
               align-items: center;
               justify-content: center;
          }

          .badge-pulse {
               width: 16px;
               height: 16px;
               border-radius: 50%;
               background: var(--gold);
               box-shadow: 0 0 0 0 rgba(212, 168, 67, .5);
               animation: pulse 2.5s ease-in-out infinite;
          }

          @keyframes pulse {
               0% {
                    box-shadow: 0 0 0 0 rgba(212, 168, 67, .5);
               }

               70% {
                    box-shadow: 0 0 0 12px rgba(212, 168, 67, 0);
               }

               100% {
                    box-shadow: 0 0 0 0 rgba(212, 168, 67, 0);
               }
          }

          /* Hero content */
          .hero-content {
               position: relative;
               z-index: 5;
               flex: 1;
               display: flex;
               flex-direction: column;
               justify-content: center;
               padding-bottom: 48px;
               width: 100%;
          }

          .hero-eyebrow {
               display: inline-flex;
               align-items: center;
               gap: 14px;
               font-family: var(--f-ui);
               font-size: 11px;
               font-weight: 600;
               letter-spacing: 4px;
               text-transform: uppercase;
               color: var(--gold);
               margin-bottom: 28px;
               animation: heroFadeUp .8s var(--ease-out-expo) both .4s;
          }

          .hero-eyebrow::before {
               content: '';
               display: block;
               width: 36px;
               height: 1px;
               background: var(--gold);
          }

          .hero-eyebrow-dot {
               width: 6px;
               height: 6px;
               border-radius: 50%;
               background: var(--gold);
               margin-right: -8px;
               animation: pulse 2s ease-in-out infinite;
          }

          .hero-name {
               font-family: var(--f-display);
               font-size: clamp(72px, 11.5vw, 188px);
               line-height: .9;
               letter-spacing: 2px;
               animation: heroFadeUp 1s var(--ease-out-expo) both .55s;
               position: relative;
          }

          .hero-name-outline {
               -webkit-text-stroke: 1px rgba(244, 239, 230, .15);
               color: transparent;
               display: block;
          }

          .hero-name-solid {
               display: block;
          }

          .hero-name-gold {
               color: var(--gold);
          }

          .hero-tagline {
               font-family: var(--f-serif);
               font-size: clamp(18px, 2.2vw, 26px);
               font-style: italic;
               color: var(--white-60);
               line-height: 1.6;
               max-width: 560px;
               margin-top: 32px;
               animation: heroFadeUp .8s var(--ease-out-expo) both .75s;
          }

          .hero-tagline strong {
               color: var(--white);
               font-style: normal;
               font-weight: 400;
          }

          .hero-ctas {
               display: flex;
               align-items: center;
               gap: 16px;
               margin-top: 48px;
               animation: heroFadeUp .8s var(--ease-out-expo) both .9s;
          }

          .btn-gold {
               font-family: var(--f-ui);
               font-size: 12px;
               font-weight: 700;
               letter-spacing: 2.5px;
               text-transform: uppercase;
               background: var(--gold);
               color: var(--black);
               padding: 16px 40px;
               border-radius: 2px;
               transition: background .3s, transform .2s, box-shadow .3s;
               display: inline-flex;
               align-items: center;
               gap: 10px;
          }

          .btn-gold:hover {
               background: var(--white);
               transform: translateY(-2px);
               box-shadow: 0 16px 40px rgba(212, 168, 67, .3);
          }

          .btn-ghost {
               font-family: var(--f-ui);
               font-size: 12px;
               font-weight: 600;
               letter-spacing: 2.5px;
               text-transform: uppercase;
               color: var(--white-60);
               border: 1px solid var(--border-mid);
               padding: 16px 36px;
               border-radius: 2px;
               transition: color .3s, border-color .3s, background .3s, transform .2s;
               display: inline-flex;
               align-items: center;
               gap: 10px;
          }

          .btn-ghost:hover {
               color: var(--white);
               border-color: var(--gold-border);
               background: var(--gold-glow);
               transform: translateY(-2px);
          }

          /* Hero bottom stats */
          .hero-bottom {
               position: relative;
               z-index: 5;
               display: flex;
               align-items: flex-end;
               justify-content: space-between;
               padding-top: 40px;
               border-top: 1px solid var(--border);
               flex-shrink: 0;
               animation: heroFadeUp .8s var(--ease-out-expo) both 1.05s;
          }

          .hero-stats {
               display: flex;
               gap: 56px;
          }

          .hstat {
               display: flex;
               flex-direction: column;
               gap: 6px;
          }

          .hstat-num {
               font-family: var(--f-display);
               font-size: 48px;
               line-height: 1;
               color: var(--white);
          }

          .hstat-num .plus {
               color: var(--gold);
               font-size: 32px;
          }

          .hstat-label {
               font-family: var(--f-ui);
               font-size: 10px;
               font-weight: 500;
               letter-spacing: 2.5px;
               text-transform: uppercase;
               color: var(--white-30);
          }

          .hero-scroll-hint {
               display: flex;
               flex-direction: column;
               align-items: center;
               gap: 8px;
               font-family: var(--f-ui);
               font-size: 9px;
               font-weight: 600;
               letter-spacing: 3px;
               text-transform: uppercase;
               color: var(--white-30);
          }

          .scroll-line {
               width: 1px;
               height: 60px;
               background: linear-gradient(to bottom, var(--gold), transparent);
               animation: scrollBob 2s ease-in-out infinite;
          }

          @keyframes scrollBob {

               0%,
               100% {
                    opacity: 1;
                    transform: scaleY(1)
               }

               50% {
                    opacity: .4;
                    transform: scaleY(.6)
               }
          }

          @keyframes heroFadeUp {
               from {
                    opacity: 0;
                    transform: translateY(32px);
               }

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

          /* Hero scroll line left */
          .hero-vline {
               position: absolute;
               left: 60px;
               top: 130px;
               bottom: 0;
               width: 1px;
               background: linear-gradient(to bottom, transparent, var(--border) 30%, var(--border) 70%, transparent);
               z-index: 2;
               pointer-events: none;
          }

          /* ── MARQUEE ── */
          .marquee-section {
               background: var(--gold);
               padding: 18px 0;
               overflow: hidden;
               max-width: 100vw;
          }

          .marquee-track {
               display: flex;
               white-space: nowrap;
               animation: marquee 25s linear infinite;
               width: max-content;
          }

          .marquee-track:hover {
               animation-play-state: paused;
          }

          .m-item {
               font-family: var(--f-display);
               font-size: 14px;
               letter-spacing: 3px;
               color: var(--black);
               padding: 0 44px;
               display: inline-flex;
               align-items: center;
               gap: 44px;
               flex-shrink: 0;
          }

          .m-item::after {
               content: '◆';
               font-size: 8px;
               opacity: .6;
          }

          @keyframes marquee {
               to {
                    transform: translateX(-50%);
               }
          }

          /* ── SECTION COMMONS ── */
          .section {
               position: relative;
               width: 100%;
               overflow-x: hidden;
          }

          .s-inner {
               max-width: 1240px;
               margin: 0 auto;
               padding: 130px 60px;
               box-sizing: border-box;
          }

          .s-label {
               font-family: var(--f-ui);
               font-size: 10px;
               font-weight: 600;
               letter-spacing: 4px;
               text-transform: uppercase;
               color: var(--gold);
               display: inline-flex;
               align-items: center;
               gap: 12px;
               margin-bottom: 18px;
          }

          .s-label::before {
               content: '';
               width: 22px;
               height: 1px;
               background: var(--gold);
               display: block;
          }

          .s-heading {
               font-family: var(--f-serif);
               font-size: clamp(34px, 4.5vw, 60px);
               line-height: 1.1;
               color: var(--white);
               margin-bottom: 64px;
          }

          .s-heading em {
               font-style: italic;
               color: var(--gold);
          }

          .s-heading span {
               -webkit-text-stroke: 1px rgba(244, 239, 230, .18);
               color: transparent;
          }

          /* ── SEO LANDING + FAQ ── */
          .seo-local {
               background: linear-gradient(180deg, rgba(212, 168, 67, 0.035), rgba(7, 7, 7, 0));
          }

          .seo-local-grid {
               display: grid;
               grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
               gap: 56px;
               align-items: center;
          }

          .seo-local-copy .s-heading {
               margin-bottom: 28px;
          }

          .seo-local-copy p {
               font-size: 16px;
               line-height: 1.9;
               color: var(--white-60);
               max-width: 720px;
               margin-bottom: 18px;
          }

          .seo-local-copy strong {
               color: var(--white);
               font-weight: 600;
          }

          .seo-local-panel {
               border: 1px solid var(--border-mid);
               background: rgba(255, 255, 255, .025);
               padding: 36px;
               position: relative;
               overflow: hidden;
          }

          .seo-local-panel::before {
               content: '';
               position: absolute;
               inset: 0;
               border-top: 2px solid var(--gold);
               opacity: .7;
               pointer-events: none;
          }

          .seo-panel-title {
               font-family: var(--f-ui);
               font-size: 12px;
               font-weight: 700;
               letter-spacing: 2.5px;
               text-transform: uppercase;
               color: var(--gold);
               margin-bottom: 24px;
          }

          .seo-keyword-list {
               display: grid;
               gap: 14px;
               margin-bottom: 34px;
          }

          .seo-keyword-list li {
               color: var(--white-60);
               font-size: 14px;
               line-height: 1.6;
               padding-left: 22px;
               position: relative;
          }

          .seo-keyword-list li::before {
               content: '';
               position: absolute;
               left: 0;
               top: .75em;
               width: 8px;
               height: 1px;
               background: var(--gold);
          }

          .seo-proof-row {
               display: grid;
               grid-template-columns: repeat(3, 1fr);
               border-top: 1px solid var(--border);
               padding-top: 24px;
               gap: 20px;
          }

          .seo-proof-row span {
               display: block;
               font-family: var(--f-display);
               font-size: clamp(30px, 4vw, 48px);
               color: var(--white);
               letter-spacing: 1px;
               line-height: .95;
          }

          .seo-proof-row small {
               display: block;
               margin-top: 8px;
               font-family: var(--f-ui);
               font-size: 10px;
               line-height: 1.5;
               letter-spacing: 1.4px;
               text-transform: uppercase;
               color: var(--white-30);
          }

          .seo-faq {
               background: var(--deep);
          }

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

          .faq-card {
               border: 1px solid var(--border);
               background: rgba(255, 255, 255, .025);
               padding: 28px;
               min-height: 190px;
          }

          .faq-card h3 {
               font-family: var(--f-ui);
               font-size: 17px;
               line-height: 1.45;
               color: var(--white);
               margin-bottom: 14px;
          }

          .faq-card p {
               font-size: 14px;
               line-height: 1.85;
               color: var(--white-60);
          }

          /* ── REVEAL ANIM ── */
          .reveal {
               opacity: 0;
               transform: translateY(44px);
               transition: opacity .85s var(--ease-out-expo), transform .85s var(--ease-out-expo);
          }

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

          .reveal-l {
               opacity: 0;
               transform: translateX(-40px);
               transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo);
          }

          .reveal-l.in {
               opacity: 1;
               transform: translateX(0);
          }

          .reveal-r {
               opacity: 0;
               transform: translateX(40px);
               transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo);
          }

          .reveal-r.in {
               opacity: 1;
               transform: translateX(0);
          }

          .d1 {
               transition-delay: .08s
          }

          .d2 {
               transition-delay: .16s
          }

          .d3 {
               transition-delay: .24s
          }

          .d4 {
               transition-delay: .32s
          }

          .d5 {
               transition-delay: .40s
          }

          .d6 {
               transition-delay: .48s
          }

          /* ── ABOUT ── */
          #about {
               background: var(--deep);
          }

          .about-grid {
               display: grid;
               grid-template-columns: 1fr 1.1fr;
               gap: 96px;
               align-items: center;
          }

          .about-frame-wrap {
               position: relative;
          }

          .about-frame {
               position: relative;
               aspect-ratio: 3/4;
               border-radius: 4px;
               overflow: hidden;
               background: var(--card);
               border: 1px solid var(--border);
               max-height: 520px;
          }

          .about-photo-placeholder {
               width: 100%;
               height: 100%;
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
               gap: 12px;
               background: linear-gradient(145deg, #131313, #0d0d0d);
          }

          .about-photo-placeholder svg {
               width: 100px;
               height: 100px;
               opacity: .2;
          }

          .about-photo-placeholder p {
               font-family: var(--f-ui);
               font-size: 9px;
               letter-spacing: 3px;
               text-transform: uppercase;
               color: var(--white-30);
          }

          .about-frame::after {
               content: '';
               position: absolute;
               inset: 0;
               background: linear-gradient(to top, rgba(212, 168, 67, .12) 0%, transparent 55%);
          }

          .about-corner {
               position: absolute;
               width: 20px;
               height: 20px;
               border-color: var(--gold);
               border-style: solid;
          }

          .tl {
               top: -6px;
               left: -6px;
               border-width: 2px 0 0 2px
          }

          .br {
               bottom: -6px;
               right: -6px;
               border-width: 0 2px 2px 0
          }

          .tr {
               top: -6px;
               right: -6px;
               border-width: 2px 2px 0 0
          }

          .bl {
               bottom: -6px;
               left: -6px;
               border-width: 0 0 2px 2px
          }

          .exp-badge {
               position: absolute;
               bottom: 28px;
               right: -28px;
               background: var(--gold);
               color: var(--black);
               padding: 18px 22px;
               text-align: center;
               border-radius: 3px;
               box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
               z-index: 2;
          }

          .exp-badge-num {
               font-family: var(--f-display);
               font-size: 44px;
               line-height: 1;
          }

          .exp-badge-lbl {
               font-family: var(--f-ui);
               font-size: 9px;
               font-weight: 700;
               letter-spacing: 2px;
               text-transform: uppercase;
               margin-top: 4px;
          }

          .location-badge {
               position: absolute;
               top: 24px;
               left: -24px;
               background: var(--card);
               border: 1px solid var(--border);
               padding: 12px 18px;
               border-radius: 3px;
               display: flex;
               align-items: center;
               gap: 10px;
               font-family: var(--f-ui);
               font-size: 11px;
               font-weight: 600;
               letter-spacing: 1px;
               color: var(--white-60);
               z-index: 2;
               box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
          }

          .loc-dot {
               width: 8px;
               height: 8px;
               border-radius: 50%;
               background: var(--gold);
               animation: pulse 2s ease-in-out infinite;
               flex-shrink: 0;
          }

          .about-text p {
               font-size: 15.5px;
               line-height: 1.9;
               color: var(--white-60);
               margin-bottom: 22px;
          }

          .about-text p strong {
               color: var(--white);
               font-weight: 500;
          }

          .about-pills {
               display: flex;
               flex-wrap: wrap;
               gap: 10px;
               margin-top: 36px;
          }

          .apill {
               font-family: var(--f-ui);
               font-size: 11px;
               font-weight: 600;
               letter-spacing: 1.5px;
               text-transform: uppercase;
               color: var(--gold);
               border: 1px solid var(--gold-border);
               padding: 9px 18px;
               border-radius: 100px;
               transition: background .3s, color .3s, border-color .3s, transform .2s;
          }

          .apill:hover {
               background: var(--gold);
               color: var(--black);
               transform: translateY(-2px);
          }

          .about-socials {
               display: flex;
               gap: 12px;
               margin-top: 28px;
          }

          .social-btn {
               width: 40px;
               height: 40px;
               border-radius: 4px;
               background: var(--card);
               border: 1px solid var(--border);
               display: flex;
               align-items: center;
               justify-content: center;
               transition: background .3s, border-color .3s, transform .2s;
          }

          .social-btn:hover {
               background: var(--gold-dim);
               border-color: var(--gold-border);
               transform: translateY(-2px);
          }

          .social-btn svg {
               width: 16px;
               height: 16px;
               transition: fill .3s, stroke .3s;
          }

          .social-btn:hover svg {
               fill: var(--gold) !important;
               stroke: var(--gold) !important;
          }

          /* ── SERVICES ── */
          #services {
               background: var(--black);
          }

          .services-grid {
               display: grid;
               grid-template-columns: repeat(3, 1fr);
               gap: 2px;
               background: var(--border);
               border: 1px solid var(--border);
               border-radius: 4px;
               overflow: hidden;
          }

          .svc-card {
               background: var(--card);
               padding: 52px 44px;
               position: relative;
               overflow: hidden;
               transition: background .4s;
          }

          .svc-card:hover {
               background: var(--card-hover);
          }

          .svc-glow {
               position: absolute;
               inset: 0;
               background: linear-gradient(135deg, var(--gold-dim) 0%, transparent 55%);
               opacity: 0;
               transition: opacity .4s;
          }

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

          .svc-num {
               font-family: var(--f-display);
               font-size: 80px;
               line-height: 1;
               color: rgba(255, 255, 255, .03);
               position: absolute;
               top: 16px;
               right: 20px;
               transition: color .4s;
          }

          .svc-card:hover .svc-num {
               color: rgba(212, 168, 67, .05);
          }

          .svc-icon {
               width: 52px;
               height: 52px;
               border-radius: 5px;
               background: var(--gold-dim);
               border: 1px solid var(--gold-border);
               display: flex;
               align-items: center;
               justify-content: center;
               margin-bottom: 28px;
               transition: background .3s, border-color .3s, transform .3s;
          }

          .svc-card:hover .svc-icon {
               background: var(--gold);
               border-color: var(--gold);
               transform: scale(1.05);
          }

          .svc-icon svg {
               width: 24px;
               height: 24px;
               stroke: var(--gold);
               stroke-width: 1.5;
               fill: none;
               stroke-linecap: round;
               stroke-linejoin: round;
               transition: stroke .3s;
          }

          .svc-card:hover .svc-icon svg {
               stroke: var(--black);
          }

          .svc-title {
               font-family: var(--f-ui);
               font-size: 19px;
               font-weight: 700;
               color: var(--white);
               margin-bottom: 14px;
               letter-spacing: -.2px;
          }

          .svc-desc {
               font-size: 14px;
               line-height: 1.85;
               color: var(--white-60);
          }

          .svc-more {
               display: flex;
               align-items: center;
               gap: 8px;
               margin-top: 28px;
               font-family: var(--f-ui);
               font-size: 11px;
               font-weight: 600;
               letter-spacing: 2px;
               text-transform: uppercase;
               color: var(--gold);
               opacity: 0;
               transform: translateX(-10px);
               transition: opacity .35s, transform .35s;
          }

          .svc-card:hover .svc-more {
               opacity: 1;
               transform: translateX(0);
          }

          /* ── PROCESS ── */
          #process {
               background: var(--deep);
          }

          .process-items {
               display: flex;
               flex-direction: column;
          }

          .proc-item {
               display: grid;
               grid-template-columns: 90px 1fr 120px;
               gap: 40px;
               align-items: start;
               padding: 52px 0;
               border-bottom: 1px solid var(--border);
               position: relative;
               overflow: hidden;
               transition: padding-left .4s var(--ease-out-expo);
          }

          .proc-item::after {
               content: '';
               position: absolute;
               bottom: 0;
               left: 0;
               width: 0;
               height: 1px;
               background: var(--gold);
               transition: width .7s var(--ease-out-expo);
          }

          .proc-item:hover::after {
               width: 100%;
          }

          .proc-item:hover {
               padding-left: 8px;
          }

          .proc-num {
               font-family: var(--f-display);
               font-size: 52px;
               line-height: 1;
               color: var(--white-10);
               transition: color .35s;
               padding-top: 6px;
          }

          .proc-item:hover .proc-num {
               color: rgba(212, 168, 67, .18);
          }

          .proc-title {
               font-family: var(--f-serif);
               font-size: 30px;
               color: var(--white);
               margin-bottom: 12px;
               transition: color .3s;
          }

          .proc-item:hover .proc-title {
               color: var(--gold);
          }

          .proc-desc {
               font-size: 14.5px;
               line-height: 1.85;
               color: var(--white-60);
               max-width: 580px;
          }

          .proc-tag {
               font-family: var(--f-ui);
               font-size: 10px;
               font-weight: 600;
               letter-spacing: 2px;
               text-transform: uppercase;
               color: var(--white-30);
               border: 1px solid var(--border);
               padding: 7px 16px;
               border-radius: 100px;
               white-space: nowrap;
               align-self: start;
               margin-top: 10px;
               transition: color .3s, border-color .3s;
          }

          .proc-item:hover .proc-tag {
               color: var(--gold);
               border-color: var(--gold-border);
          }

          /* ── CASE STUDIES ── */
          #work {
               background: var(--black);
          }

          .work-header {
               display: flex;
               justify-content: space-between;
               align-items: flex-end;
               margin-bottom: 64px;
          }

          .work-header .s-heading {
               margin-bottom: 0;
          }

          .view-all {
               font-family: var(--f-ui);
               font-size: 11px;
               font-weight: 600;
               letter-spacing: 2px;
               text-transform: uppercase;
               color: var(--gold);
               display: flex;
               align-items: center;
               gap: 8px;
               transition: gap .3s;
          }

          .view-all:hover {
               gap: 14px;
          }

          .work-grid {
               display: grid;
               grid-template-columns: repeat(12, 1fr);
               gap: 2px;
               background: var(--border);
               border: 1px solid var(--border);
               border-radius: 4px;
               overflow: hidden;
          }

          .wcard {
               background: var(--card);
               padding: 52px 48px;
               position: relative;
               overflow: hidden;
               transition: background .4s;
               cursor: pointer;
          }

          .wcard:hover {
               background: var(--card-hover);
          }

          .wcard.span8 {
               grid-column: span 8;
          }

          .wcard.span4 {
               grid-column: span 4;
          }

          .wcard.span6 {
               grid-column: span 6;
          }

          .wcard.span12 {
               grid-column: span 12;
          }

          .wcard-bg-num {
               position: absolute;
               bottom: -20px;
               right: -8px;
               font-family: var(--f-display);
               font-size: 180px;
               color: rgba(255, 255, 255, .018);
               line-height: 1;
               pointer-events: none;
               transition: color .4s;
          }

          .wcard:hover .wcard-bg-num {
               color: rgba(212, 168, 67, .03);
          }

          .wcard-cat {
               font-family: var(--f-ui);
               font-size: 10px;
               font-weight: 600;
               letter-spacing: 3px;
               text-transform: uppercase;
               color: var(--gold);
               margin-bottom: 16px;
               display: flex;
               align-items: center;
               gap: 8px;
          }

          .wcard-cat::before {
               content: '';
               display: block;
               width: 18px;
               height: 1px;
               background: var(--gold);
          }

          .wcard-title {
               font-family: var(--f-serif);
               font-size: clamp(22px, 2.2vw, 30px);
               color: var(--white);
               line-height: 1.25;
               margin-bottom: 16px;
          }

          .wcard-desc {
               font-size: 14px;
               line-height: 1.85;
               color: var(--white-60);
               margin-bottom: 32px;
               max-width: 480px;
          }

          .wcard-metrics {
               display: flex;
               gap: 32px;
               flex-wrap: wrap;
          }

          .wm {
               display: flex;
               flex-direction: column;
               gap: 5px;
          }

          .wm-val {
               font-family: var(--f-display);
               font-size: 34px;
               color: var(--gold);
               line-height: 1;
          }

          .wm-lbl {
               font-family: var(--f-ui);
               font-size: 9px;
               font-weight: 500;
               letter-spacing: 2.5px;
               text-transform: uppercase;
               color: var(--white-30);
          }

          .wcard-tag {
               position: absolute;
               top: 28px;
               right: 28px;
               font-family: var(--f-ui);
               font-size: 9px;
               font-weight: 600;
               letter-spacing: 2px;
               text-transform: uppercase;
               color: var(--white-30);
               border: 1px solid var(--border);
               padding: 5px 12px;
               border-radius: 100px;
               transition: color .3s, border-color .3s;
          }

          .wcard:hover .wcard-tag {
               color: var(--gold);
               border-color: var(--gold-border);
          }

          /* Featured card visual */
          .wcard-visual {
               margin-top: 32px;
               border-radius: 4px;
               overflow: hidden;
               background: linear-gradient(135deg, #151515, #0e0e0e);
               border: 1px solid var(--border);
               padding: 28px;
               display: flex;
               flex-direction: column;
               gap: 10px;
          }

          .vis-row {
               display: flex;
               align-items: center;
               gap: 12px;
          }

          .vis-lbl {
               font-family: var(--f-ui);
               font-size: 10px;
               letter-spacing: 1.5px;
               color: var(--white-30);
               width: 70px;
               flex-shrink: 0;
          }

          .vis-bar-outer {
               flex: 1;
               height: 5px;
               background: var(--white-10);
               border-radius: 100px;
               overflow: hidden;
          }

          .vis-bar-inner {
               height: 100%;
               border-radius: 100px;
               background: linear-gradient(90deg, var(--gold), rgba(212, 168, 67, .4));
               transform-origin: left;
               animation: barAnim 2.5s var(--ease-out-expo) infinite alternate;
          }

          .vis-bar-inner.w90 {
               width: 90%
          }

          .vis-bar-inner.w75 {
               width: 75%
          }

          .vis-bar-inner.w85 {
               width: 85%
          }

          .vis-bar-inner.w60 {
               width: 60%
          }

          @keyframes barAnim {
               from {
                    opacity: .5;
                    transform: scaleX(.8)
               }

               to {
                    opacity: 1;
                    transform: scaleX(1)
               }
          }

          .vis-pct {
               font-family: var(--f-display);
               font-size: 16px;
               color: var(--gold);
               width: 40px;
               text-align: right;
          }

          /* ── SKILLS ── */
          #skills {
               background: var(--deep);
          }

          .skills-layout {
               display: grid;
               grid-template-columns: 1.1fr 1fr;
               gap: 80px;
               align-items: start;
          }

          .skill-bars {
               display: flex;
               flex-direction: column;
               gap: 32px;
          }

          .skbar {}

          .skbar-top {
               display: flex;
               justify-content: space-between;
               align-items: baseline;
               margin-bottom: 10px;
          }

          .skbar-name {
               font-family: var(--f-ui);
               font-size: 13px;
               font-weight: 600;
               color: var(--white);
          }

          .skbar-pct {
               font-family: var(--f-display);
               font-size: 20px;
               color: var(--gold);
          }

          .skbar-track {
               height: 2px;
               background: var(--white-10);
               border-radius: 100px;
               overflow: hidden;
               position: relative;
          }

          .skbar-fill {
               height: 100%;
               width: 0;
               border-radius: 100px;
               background: linear-gradient(90deg, var(--gold), rgba(212, 168, 67, .45));
               transition: width 1.6s var(--ease-out-expo);
               position: relative;
          }

          .skbar-fill::after {
               content: '';
               position: absolute;
               right: 0;
               top: 50%;
               width: 6px;
               height: 6px;
               border-radius: 50%;
               background: var(--gold-light);
               transform: translate(50%, -50%);
               box-shadow: 0 0 8px var(--gold);
          }

          .tools-section {}

          .tools-title {
               font-family: var(--f-ui);
               font-size: 10px;
               font-weight: 600;
               letter-spacing: 4px;
               text-transform: uppercase;
               color: var(--gold);
               margin-bottom: 24px;
          }

          .tools-grid {
               display: flex;
               flex-wrap: wrap;
               gap: 10px;
          }

          .tbadge {
               font-family: var(--f-ui);
               font-size: 12px;
               font-weight: 500;
               color: var(--white-60);
               background: var(--card);
               border: 1px solid var(--border);
               padding: 10px 18px;
               border-radius: 4px;
               transition: color .3s, border-color .3s, background .3s, transform .25s;
          }

          .tbadge:hover {
               color: var(--gold);
               border-color: var(--gold-border);
               background: var(--gold-glow);
               transform: translateY(-2px);
          }

          /* ── TESTIMONIALS ── */
          #testimonials {
               background: var(--black);
          }

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

          .tcard {
               background: var(--card);
               border: 1px solid var(--border);
               border-radius: 4px;
               padding: 44px 40px;
               position: relative;
               transition: border-color .35s, transform .35s, box-shadow .35s;
               overflow: hidden;
          }

          .tcard:hover {
               border-color: var(--gold-border);
               transform: translateY(-5px);
               box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
          }

          .tcard-glow {
               position: absolute;
               top: 0;
               left: 0;
               right: 0;
               height: 2px;
               background: linear-gradient(90deg, transparent, var(--gold), transparent);
               opacity: 0;
               transition: opacity .4s;
          }

          .tcard:hover .tcard-glow {
               opacity: 1;
          }

          .tcard-quote {
               font-family: var(--f-display);
               font-size: 72px;
               color: var(--gold);
               line-height: .8;
               margin-bottom: 20px;
               display: block;
          }

          .tcard-stars {
               color: var(--gold);
               font-size: 13px;
               letter-spacing: 2px;
               margin-bottom: 18px;
          }

          .tcard-text {
               font-size: 14.5px;
               line-height: 1.85;
               color: var(--white-60);
               font-style: italic;
               margin-bottom: 28px;
          }

          .tcard-author {
               display: flex;
               align-items: center;
               gap: 14px;
          }

          .tcard-avatar {
               width: 46px;
               height: 46px;
               border-radius: 50%;
               flex-shrink: 0;
               background: var(--gold-dim);
               border: 1px solid var(--gold-border);
               display: flex;
               align-items: center;
               justify-content: center;
               font-family: var(--f-display);
               font-size: 20px;
               color: var(--gold);
          }

          .tcard-name {
               font-family: var(--f-ui);
               font-size: 14px;
               font-weight: 700;
               color: var(--white);
          }

          .tcard-role {
               font-size: 12px;
               color: var(--white-30);
               margin-top: 3px;
          }

          .tcard-platform {
               position: absolute;
               top: 24px;
               right: 24px;
          }

          .tcard-platform svg {
               width: 20px;
               height: 20px;
               fill: var(--white-30);
               transition: fill .3s;
          }

          .tcard:hover .tcard-platform svg {
               fill: var(--gold);
          }

          /* ── VENTURES ── */
          #ventures {
               background: var(--deep);
          }

          .ventures-grid {
               display: grid;
               grid-template-columns: repeat(2, 1fr);
               gap: 2px;
               background: var(--border);
               border: 1px solid var(--border);
               border-radius: 4px;
               overflow: hidden;
          }

          .vcard {
               background: var(--card);
               padding: 52px 48px;
               transition: background .4s;
               position: relative;
               overflow: hidden;
          }

          .vcard:hover {
               background: var(--card-hover);
          }

          .vcard-icon {
               width: 56px;
               height: 56px;
               border-radius: 8px;
               background: var(--gold-dim);
               border: 1px solid var(--gold-border);
               display: flex;
               align-items: center;
               justify-content: center;
               margin-bottom: 28px;
               font-family: var(--f-display);
               font-size: 24px;
               color: var(--gold);
               transition: background .3s, transform .3s;
          }

          .vcard:hover .vcard-icon {
               background: var(--gold);
               color: var(--black);
               transform: scale(1.08);
          }

          .vcard-name {
               font-family: var(--f-ui);
               font-size: 22px;
               font-weight: 800;
               color: var(--white);
               margin-bottom: 12px;
          }

          .vcard-desc {
               font-size: 14.5px;
               line-height: 1.85;
               color: var(--white-60);
          }

          .vcard-link {
               display: inline-flex;
               align-items: center;
               gap: 8px;
               margin-top: 28px;
               font-family: var(--f-ui);
               font-size: 11px;
               font-weight: 600;
               letter-spacing: 2px;
               text-transform: uppercase;
               color: var(--gold);
               opacity: 0;
               transform: translateX(-10px);
               transition: opacity .35s, transform .35s;
          }

          .vcard:hover .vcard-link {
               opacity: 1;
               transform: translateX(0);
          }

          /* ── CONTACT ── */
          #contact {
               background: var(--black);
          }

          .contact-layout {
               display: grid;
               grid-template-columns: 1fr 1.1fr;
               gap: 80px;
          }

          .contact-left {}

          .contact-links {
               display: flex;
               flex-direction: column;
               gap: 0;
               margin-bottom: 40px;
          }

          .clink {
               display: flex;
               align-items: center;
               gap: 20px;
               padding: 22px 0;
               border-bottom: 1px solid var(--border);
               transition: padding-left .3s var(--ease-out-expo);
          }

          .clink:hover {
               padding-left: 10px;
          }

          .clink-icon {
               width: 48px;
               height: 48px;
               border-radius: 5px;
               background: var(--card);
               border: 1px solid var(--border);
               flex-shrink: 0;
               display: flex;
               align-items: center;
               justify-content: center;
               transition: background .3s, border-color .3s;
          }

          .clink:hover .clink-icon {
               background: var(--gold-dim);
               border-color: var(--gold-border);
          }

          .clink-icon svg {
               width: 20px;
               height: 20px;
               stroke: var(--white-60);
               stroke-width: 1.5;
               fill: none;
               stroke-linecap: round;
               stroke-linejoin: round;
               transition: stroke .3s;
          }

          .clink:hover .clink-icon svg {
               stroke: var(--gold);
          }

          .clink-info {}

          .clink-lbl {
               font-family: var(--f-ui);
               font-size: 9px;
               font-weight: 600;
               letter-spacing: 2.5px;
               text-transform: uppercase;
               color: var(--white-30);
          }

          .clink-val {
               font-family: var(--f-ui);
               font-size: 14px;
               font-weight: 600;
               color: var(--white);
               margin-top: 4px;
          }

          .clink-arr {
               margin-left: auto;
               color: var(--white-30);
               font-size: 18px;
               transition: transform .3s, color .3s;
          }

          .clink:hover .clink-arr {
               color: var(--gold);
               transform: translateX(5px);
          }

          .marketplace-btns {
               display: flex;
               flex-wrap: wrap;
               gap: 12px;
          }

          .mktbtn {
               font-family: var(--f-ui);
               font-size: 11px;
               font-weight: 600;
               letter-spacing: 1.5px;
               text-transform: uppercase;
               color: var(--white-60);
               background: var(--card);
               border: 1px solid var(--border);
               padding: 12px 20px;
               border-radius: 4px;
               display: inline-flex;
               align-items: center;
               gap: 8px;
               transition: color .3s, border-color .3s, background .3s, transform .2s;
          }

          .mktbtn:hover {
               color: var(--gold);
               border-color: var(--gold-border);
               background: var(--gold-glow);
               transform: translateY(-2px);
          }

          /* Contact Form */
          .cform {
               display: flex;
               flex-direction: column;
               gap: 18px;
          }

          .fgroup {
               display: flex;
               flex-direction: column;
               gap: 8px;
          }

          .flabel {
               font-family: var(--f-ui);
               font-size: 9px;
               font-weight: 600;
               letter-spacing: 3px;
               text-transform: uppercase;
               color: var(--white-30);
          }

          .finput,
          .ftarea {
               background: var(--card);
               border: 1px solid var(--border);
               border-radius: 3px;
               padding: 14px 18px;
               font-family: var(--f-body);
               font-size: 14px;
               color: var(--white);
               outline: none;
               transition: border-color .3s, background .3s;
               width: 100%;
          }

          .finput:focus,
          .ftarea:focus {
               border-color: var(--gold-border);
               background: #131313;
          }

          .finput::placeholder,
          .ftarea::placeholder {
               color: var(--white-30);
          }

          .ftarea {
               min-height: 130px;
               resize: none;
          }

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

          .fsubmit {
               font-family: var(--f-ui);
               font-size: 12px;
               font-weight: 700;
               letter-spacing: 2.5px;
               text-transform: uppercase;
               background: var(--gold);
               color: var(--black);
               padding: 16px 36px;
               border-radius: 3px;
               border: none;
               display: inline-flex;
               align-items: center;
               gap: 12px;
               align-self: flex-start;
               transition: background .3s, transform .2s, box-shadow .3s;
          }

          .fsubmit:hover {
               background: var(--white);
               transform: translateY(-2px);
               box-shadow: 0 14px 36px rgba(212, 168, 67, .3);
          }

          .fstatus {
               font-family: var(--f-ui);
               font-size: 12px;
               letter-spacing: 1px;
               color: var(--green);
               display: none;
          }

          /* ── CTA BAND ── */
          #cta-band {
               background: var(--deep);
               border-top: 1px solid var(--border);
               border-bottom: 1px solid var(--border);
               overflow: hidden;
               position: relative;
          }

          .cta-bg-word {
               position: absolute;
               top: 50%;
               left: 50%;
               transform: translate(-50%, -50%);
               font-family: var(--f-display);
               font-size: clamp(100px, 18vw, 220px);
               letter-spacing: 10px;
               color: rgba(255, 255, 255, .018);
               white-space: nowrap;
               pointer-events: none;
               z-index: 1;
          }

          .cta-inner {
               max-width: 1240px;
               margin: 0 auto;
               padding: 140px 60px;
               text-align: center;
               position: relative;
               z-index: 2;
          }

          .cta-lbl {
               font-family: var(--f-ui);
               font-size: 11px;
               font-weight: 600;
               letter-spacing: 4px;
               text-transform: uppercase;
               color: var(--gold);
               margin-bottom: 20px;
          }

          .cta-h {
               font-family: var(--f-display);
               font-size: clamp(56px, 8.5vw, 120px);
               line-height: .95;
               letter-spacing: 2px;
               color: var(--white);
               margin-bottom: 28px;
          }

          .cta-sub {
               font-size: 16px;
               line-height: 1.75;
               color: var(--white-60);
               max-width: 520px;
               margin: 0 auto 52px;
          }

          .cta-btns {
               display: flex;
               gap: 16px;
               justify-content: center;
               flex-wrap: wrap;
          }

          /* ── FOOTER ── */
          footer {
               background: var(--deep);
               border-top: 1px solid var(--border);
               padding: 72px 60px 40px;
          }

          .footer-inner {
               max-width: 1240px;
               margin: 0 auto;
          }

          .footer-top {
               display: flex;
               justify-content: space-between;
               align-items: flex-start;
               gap: 60px;
               margin-bottom: 60px;
          }

          .footer-brand {}

          .footer-logo {
               font-family: var(--f-display);
               font-size: 36px;
               letter-spacing: 4px;
               color: var(--white);
          }

          .footer-logo span {
               color: var(--gold);
          }

          .footer-tagline {
               font-size: 13.5px;
               color: var(--white-60);
               line-height: 1.7;
               margin-top: 10px;
               max-width: 320px;
          }

          .footer-links {
               display: flex;
               gap: 64px;
          }

          .fcol {}

          .fcol-title {
               font-family: var(--f-ui);
               font-size: 9px;
               font-weight: 700;
               letter-spacing: 3px;
               text-transform: uppercase;
               color: var(--gold);
               margin-bottom: 18px;
          }

          .fcol ul {
               display: flex;
               flex-direction: column;
               gap: 11px;
          }

          .fcol a {
               font-size: 13px;
               color: var(--white-60);
               transition: color .3s, padding-left .25s;
               display: block;
          }

          .fcol a:hover {
               color: var(--white);
               padding-left: 4px;
          }

          .footer-bottom {
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding-top: 28px;
               border-top: 1px solid var(--border);
               flex-wrap: wrap;
               gap: 12px;
          }

          .footer-copy {
               font-size: 12px;
               color: var(--white-30);
          }

          .footer-heart {
               font-size: 12px;
               color: var(--white-30);
          }

          .footer-heart span {
               color: var(--gold);
          }

          /* ── CHATBOT ── */
          #chatbot-wrap {
               position: fixed;
               bottom: 24px;
               right: 24px;
               z-index: 8000;
          }

          .chat-trigger {
               width: 58px;
               height: 58px;
               border-radius: 50%;
               background: var(--gold);
               border: none;
               display: flex;
               align-items: center;
               justify-content: center;
               box-shadow: 0 8px 32px rgba(212, 168, 67, .4);
               transition: transform .3s var(--ease-out-expo), box-shadow .3s;
               position: relative;
          }

          .chat-trigger:hover {
               transform: scale(1.08);
               box-shadow: 0 14px 40px rgba(212, 168, 67, .5);
          }

          .chat-trigger svg {
               width: 26px;
               height: 26px;
               stroke: var(--black);
               stroke-width: 2;
               fill: none;
               stroke-linecap: round;
               stroke-linejoin: round;
          }

          .chat-notif {
               position: absolute;
               top: -3px;
               right: -3px;
               width: 16px;
               height: 16px;
               border-radius: 50%;
               background: var(--red);
               border: 2px solid var(--black);
               font-family: var(--f-ui);
               font-size: 9px;
               font-weight: 700;
               color: #fff;
               display: flex;
               align-items: center;
               justify-content: center;
          }

          .chat-box {
               position: absolute;
               bottom: 70px;
               right: 0;
               width: 340px;
               border-radius: 12px;
               background: var(--deep);
               border: 1px solid var(--border);
               box-shadow: 0 32px 80px rgba(0, 0, 0, .7);
               overflow: hidden;
               display: none;
               flex-direction: column;
               animation: chatIn .35s var(--ease-out-expo) both;
               max-height: calc(100svh - 120px);
          }

          .chat-box.open {
               display: flex;
          }

          @keyframes chatIn {
               from {
                    opacity: 0;
                    transform: translateY(20px) scale(.95)
               }

               to {
                    opacity: 1;
                    transform: translateY(0) scale(1)
               }
          }

          .chat-head {
               display: flex;
               align-items: center;
               gap: 12px;
               padding: 18px 20px;
               background: var(--card);
               border-bottom: 1px solid var(--border);
          }

          .chat-avatar {
               width: 36px;
               height: 36px;
               border-radius: 50%;
               background: var(--gold);
               display: flex;
               align-items: center;
               justify-content: center;
               font-family: var(--f-display);
               font-size: 18px;
               color: var(--black);
               flex-shrink: 0;
          }

          .chat-name {
               font-family: var(--f-ui);
               font-size: 13px;
               font-weight: 700;
               color: var(--white);
          }

          .chat-status {
               font-size: 11px;
               color: var(--green);
               display: flex;
               align-items: center;
               gap: 5px;
          }

          .chat-status::before {
               content: '';
               width: 6px;
               height: 6px;
               border-radius: 50%;
               background: var(--green);
          }

          .chat-close {
               margin-left: auto;
               background: none;
               border: none;
               color: var(--white-30);
               font-size: 20px;
               line-height: 1;
               transition: color .2s;
          }

          .chat-close:hover {
               color: var(--white);
          }

          .chat-msgs {
               height: 280px;
               overflow-y: auto;
               padding: 16px;
               display: flex;
               flex-direction: column;
               gap: 12px;
          }

          .chat-msgs::-webkit-scrollbar {
               width: 3px;
          }

          .chat-msgs::-webkit-scrollbar-thumb {
               background: var(--border);
          }

          .msg {
               max-width: 85%;
          }

          .msg.bot {
               align-self: flex-start;
          }

          .msg.user {
               align-self: flex-end;
          }

          .msg-bubble {
               padding: 10px 14px;
               border-radius: 10px;
               font-size: 13px;
               line-height: 1.6;
          }

          .msg.bot .msg-bubble {
               background: var(--card);
               color: var(--white);
               border-radius: 2px 10px 10px 10px;
          }

          .msg.user .msg-bubble {
               background: var(--gold);
               color: var(--black);
               border-radius: 10px 2px 10px 10px;
               font-weight: 500;
          }

          .chat-typing {
               display: flex;
               gap: 5px;
               padding: 8px 12px;
          }

          .chat-typing span {
               width: 7px;
               height: 7px;
               border-radius: 50%;
               background: var(--white-30);
               animation: typingBounce 1.2s ease-in-out infinite;
          }

          .chat-typing span:nth-child(2) {
               animation-delay: .2s
          }

          .chat-typing span:nth-child(3) {
               animation-delay: .4s
          }

          @keyframes typingBounce {

               0%,
               100% {
                    transform: translateY(0);
                    opacity: .4
               }

               50% {
                    transform: translateY(-5px);
                    opacity: 1
               }
          }

          .chat-suggestions {
               padding: 8px 16px;
               display: flex;
               flex-wrap: wrap;
               gap: 6px;
               border-top: 1px solid var(--border);
          }

          .chat-chip {
               font-family: var(--f-ui);
               font-size: 10px;
               font-weight: 600;
               letter-spacing: .5px;
               color: var(--gold);
               border: 1px solid var(--gold-border);
               padding: 5px 12px;
               border-radius: 100px;
               background: var(--gold-glow);
               transition: background .2s, color .2s;
          }

          .chat-chip:hover {
               background: var(--gold);
               color: var(--black);
          }

          .chat-input-area {
               display: flex;
               gap: 8px;
               padding: 12px 16px;
               border-top: 1px solid var(--border);
          }

          .chat-input {
               flex: 1;
               background: var(--card);
               border: 1px solid var(--border);
               border-radius: 20px;
               padding: 9px 16px;
               font-family: var(--f-body);
               font-size: 13px;
               color: var(--white);
               outline: none;
               transition: border-color .3s;
          }

          .chat-input:focus {
               border-color: var(--gold-border);
          }

          .chat-send {
               width: 36px;
               height: 36px;
               border-radius: 50%;
               background: var(--gold);
               border: none;
               display: flex;
               align-items: center;
               justify-content: center;
               flex-shrink: 0;
               transition: background .3s, transform .2s;
          }

          .chat-send:hover {
               background: var(--white);
               transform: scale(1.05);
          }

          .chat-send svg {
               width: 15px;
               height: 15px;
               stroke: var(--black);
               stroke-width: 2.5;
               fill: none;
          }

          /* ── RESPONSIVE ── */

          /* ─ Tablet landscape (≤1200px) ─ */
          @media (max-width: 1200px) {
               .s-inner {
                    padding: 110px 48px;
               }

               #hero {
                    padding: 130px 48px 72px;
               }

               .hero-name {
                    font-size: clamp(64px, 10vw, 160px);
               }
          }

          /* ─ Tablet (≤1100px) ─ */
          @media (max-width: 1100px) {
               .services-grid {
                    grid-template-columns: repeat(2, 1fr);
               }

               .wcard.span8 {
                    grid-column: span 12;
               }

               .wcard.span4 {
                    grid-column: span 12;
               }

               .wcard.span6 {
                    grid-column: span 12;
               }

               .about-grid,
               .skills-layout,
               .contact-layout {
                    grid-template-columns: 1fr;
                    gap: 48px;
               }

               .about-frame-wrap {
                    max-width: 480px;
                    margin: 0 auto;
               }

               .testi-grid {
                    grid-template-columns: 1fr 1fr;
               }

               .ventures-grid {
                    grid-template-columns: 1fr;
               }

               .exp-badge {
                    right: 16px;
               }

               .location-badge {
                    left: 16px;
                    top: 16px;
               }

               .hero-badge {
                    top: 120px;
                    right: 40px;
               }
          }

          /* ─ Mobile (≤768px) ─ */
          @media (max-width: 768px) {

               /* Nav */
               nav#nav {
                    padding: 18px 20px;
               }

               nav#nav.scrolled {
                    padding: 14px 20px;
               }

               .nav-center,
               .nav-hire {
                    display: none;
               }

               .nav-burger {
                    display: flex;
               }

               /* Hero */
               #hero {
                    padding: 100px 20px 48px;
                    min-height: unset;
                    height: auto;
               }

               .hero-vline {
                    display: none;
               }

               .hero-content {
                    flex: none;
                    justify-content: flex-start;
                    padding-top: 20px;
                    padding-bottom: 36px;
               }

               .hero-name {
                    font-size: clamp(52px, 16vw, 110px);
                    line-height: .92;
               }

               .hero-tagline {
                    font-size: clamp(15px, 3.8vw, 19px);
                    margin-top: 22px;
                    max-width: 100%;
               }

               .hero-tagline br {
                    display: none;
               }

               .hero-ctas {
                    flex-wrap: wrap;
                    gap: 12px;
                    margin-top: 36px;
               }

               .btn-gold,
               .btn-ghost {
                    width: 100%;
                    justify-content: center;
                    padding: 15px 24px;
               }

               .hero-badge {
                    top: 16px;
                    right: 16px;
                    width: 76px;
                    height: 76px;
                    font-size: 8px;
               }

               .hero-stats {
                    flex-wrap: wrap;
                    gap: 20px 32px;
               }

               .hstat-num {
                    font-size: 38px;
               }

               .hero-bottom {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 20px;
                    padding-top: 28px;
               }

               .hero-scroll-hint {
                    display: none;
               }

               /* Sections */
               .s-inner {
                    padding: 72px 20px;
               }

               .s-heading {
                    font-size: clamp(28px, 7vw, 42px);
                    margin-bottom: 44px;
               }

               /* Services */
               .services-grid {
                    grid-template-columns: 1fr;
               }

               .svc-card {
                    padding: 36px 28px;
               }

               /* Process */
               .proc-item {
                    grid-template-columns: 52px 1fr;
                    gap: 16px;
                    padding: 36px 0;
               }

               .proc-tag {
                    display: none;
               }

               .proc-title {
                    font-size: 22px;
               }

               .proc-num {
                    font-size: 38px;
               }

               /* Work */
               .work-grid {
                    grid-template-columns: 1fr;
               }

               .wcard {
                    padding: 36px 28px;
               }

               .wcard-bg-num {
                    font-size: 110px;
               }

               .work-header {
                    flex-direction: column;
                    gap: 14px;
                    align-items: flex-start;
               }

               /* Testimonials */
               .testi-grid {
                    grid-template-columns: 1fr;
               }

               /* Skills */
               .skills-layout {
                    gap: 40px;
               }

               /* Ventures */
               .ventures-grid {
                    grid-template-columns: 1fr;
               }

               .vcard {
                    padding: 36px 28px;
               }

               /* Contact */
               .contact-layout {
                    gap: 40px;
               }

               .frow {
                    grid-template-columns: 1fr;
               }

               /* About badges — pull inside frame on mobile */
               .exp-badge {
                    right: 0;
                    bottom: 16px;
                    padding: 14px 16px;
               }

               .exp-badge-num {
                    font-size: 32px;
               }

               .location-badge {
                    left: 0;
                    top: 12px;
               }

               /* CTA band */
               .cta-inner {
                    padding: 72px 20px;
               }

               .cta-h {
                    font-size: clamp(40px, 10vw, 72px);
               }

               .cta-btns {
                    flex-direction: column;
                    align-items: center;
                    gap: 12px;
               }

               .cta-btns .btn-gold,
               .cta-btns .btn-ghost {
                    width: 100%;
                    max-width: 320px;
                    justify-content: center;
               }

               /* Footer */
               footer {
                    padding: 56px 20px 32px;
               }

               .footer-top {
                    flex-direction: column;
                    gap: 36px;
               }

               .footer-links {
                    flex-wrap: wrap;
                    gap: 28px;
               }

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

               /* Chat */
               .chat-box {
                    width: calc(100vw - 32px);
                    right: 0;
                    max-width: 340px;
               }

               #chatbot-wrap {
                    right: 16px;
                    bottom: 16px;
               }

               /* Cursor off on touch */
               body {
                    cursor: auto;
               }

               .cur {
                    display: none;
               }

               button {
                    cursor: pointer;
               }
          }

          /* ─ Small mobile (≤480px) ─ */
          @media (max-width: 480px) {
               .s-inner {
                    padding: 60px 16px;
               }

               nav#nav {
                    padding: 16px;
               }

               #hero {
                    padding: 88px 16px 40px;
                    min-height: unset;
                    height: auto;
               }

               .hero-name {
                    font-size: clamp(44px, 14.5vw, 88px);
               }

               .hero-eyebrow {
                    font-size: 9px;
                    letter-spacing: 2.5px;
               }

               .hstat-num {
                    font-size: 32px;
               }

               .hstat-label {
                    font-size: 9px;
               }

               .hero-badge {
                    width: 66px;
                    height: 66px;
                    top: 80px;
                    right: 12px;
               }

               .svc-card,
               .wcard,
               .vcard {
                    padding: 28px 20px;
               }

               .footer-links {
                    gap: 20px;
               }

               .mob-link {
                    font-size: 36px;
               }

               .chat-box {
                    width: calc(100vw - 24px);
               }

               #chatbot-wrap {
                    right: 12px;
                    bottom: 12px;
               }

               .cta-h {
                    font-size: clamp(34px, 9vw, 56px);
               }

               .proc-item {
                    grid-template-columns: 44px 1fr;
                    gap: 12px;
               }

               .growth-metrics {
                    grid-template-columns: 1fr 1fr;
                    gap: 8px;
               }

               .svc-modal {
                    padding: 24px 16px;
               }

               .svc-modal-features {
                    grid-template-columns: 1fr;
               }

               .wcard-metrics {
                    gap: 20px;
               }
          }

          /* ═══ PREMIUM UX — 21st.dev inspired ═══ */
          html {
               scroll-behavior: smooth
          }

          * {
               -webkit-font-smoothing: antialiased
          }

          #nav {
               background: rgba(8, 8, 8, 0.6) !important;
               backdrop-filter: blur(24px) saturate(180%) !important;
               -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
               border-bottom: 1px solid rgba(212, 168, 67, 0.08) !important;
               transition: background .4s, box-shadow .4s !important
          }

          #nav.scrolled {
               background: rgba(5, 5, 5, 0.95) !important;
               box-shadow: 0 4px 40px rgba(0, 0, 0, .7) !important
          }

          .nav-link {
               position: relative
          }

          .nav-link::after {
               content: '';
               position: absolute;
               bottom: -2px;
               left: 0;
               right: 100%;
               height: 1px;
               background: var(--gold);
               transition: right .3s cubic-bezier(.23, 1, .32, 1)
          }

          .nav-link:hover::after {
               right: 0
          }

          .nav-hire {
               animation: hirePulse 3s ease-in-out infinite
          }

          @keyframes hirePulse {

               0%,
               100% {
                    box-shadow: 0 0 0 0 rgba(212, 168, 67, .4)
               }

               50% {
                    box-shadow: 0 0 0 8px rgba(212, 168, 67, 0)
               }
          }

          .btn-gold:hover {
               transform: translateY(-2px);
               box-shadow: 0 8px 32px rgba(212, 168, 67, .35) !important
          }

          .btn-ghost:hover {
               transform: translateY(-2px)
          }

          .svc-card,
          .wcard,
          .vcard {
               transition: transform .35s cubic-bezier(.23, 1, .32, 1), box-shadow .35s, border-color .35s !important
          }

          .svc-card:hover,
          .wcard:hover,
          .vcard:hover {
               transform: translateY(-6px) !important;
               box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(212, 168, 67, .15) !important
          }

          .svc-card {
               cursor: pointer
          }

          .hstat-num {
               background: linear-gradient(135deg, var(--gold) 0%, #f0d080 50%, var(--gold) 100%);
               -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;
               background-clip: text
          }

          .s-label {
               background: linear-gradient(90deg, var(--gold), #f5e0a0 50%, var(--gold));
               background-size: 200% auto;
               -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;
               background-clip: text;
               animation: shimmer 3s linear infinite
          }

          @keyframes shimmer {
               0% {
                    background-position: 0% center
               }

               100% {
                    background-position: 200% center
               }
          }

          .clink:hover {
               transform: translateX(6px) !important
          }

          .mktbtn:hover {
               transform: translateY(-3px) !important
          }

          .finput:focus,
          .ftarea:focus {
               border-color: rgba(212, 168, 67, .6) !important;
               box-shadow: 0 0 0 3px rgba(212, 168, 67, .12) !important;
               outline: none
          }

          .fsubmit:hover {
               transform: translateY(-2px);
               box-shadow: 0 10px 30px rgba(212, 168, 67, .35) !important
          }

          .about-frame {
               border-radius: 20px !important;
               overflow: hidden;
               box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
               transition: transform .4s cubic-bezier(.23, 1, .32, 1)
          }

          .about-frame:hover {
               transform: scale(1.02)
          }

          .about-frame img {
               transition: transform .6s cubic-bezier(.23, 1, .32, 1)
          }

          .about-frame:hover img {
               transform: scale(1.04)
          }

          .marquee-section {
               -webkit-mask: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
               mask: linear-gradient(90deg, transparent, black 10%, black 90%, transparent)
          }

          .chat-trigger:hover {
               transform: scale(1.1) translateY(-2px) !important;
               box-shadow: 0 12px 40px rgba(212, 168, 67, .45) !important
          }

          ::selection {
               background: rgba(212, 168, 67, .25);
               color: var(--white)
          }

          ::-webkit-scrollbar {
               width: 5px
          }

          ::-webkit-scrollbar-track {
               background: var(--bg)
          }

          ::-webkit-scrollbar-thumb {
               background: rgba(212, 168, 67, .3);
               border-radius: 3px
          }

          ::-webkit-scrollbar-thumb:hover {
               background: rgba(212, 168, 67, .5)
          }

          /* ═══ CLIENTS STRIP ═══ */
          .clients-strip {
               margin: 48px 0 60px;
               position: relative
          }

          .clients-label {
               font-family: var(--f-ui);
               font-size: 10px;
               font-weight: 600;
               letter-spacing: 3px;
               text-transform: uppercase;
               color: var(--white-30);
               margin-bottom: 20px;
               text-align: center
          }

          .clients-track-outer {
               overflow: hidden;
               max-width: 100%;
               -webkit-mask: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
               mask: linear-gradient(90deg, transparent, black 8%, black 92%, transparent)
          }

          .clients-track {
               display: flex;
               gap: 24px;
               width: max-content;
               animation: clientsScroll 55s linear infinite
          }

          .clients-strip:hover .clients-track {
               animation-play-state: paused
          }

          @keyframes clientsScroll {
               0% {
                    transform: translateX(0)
               }

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

          .client-logo-item {
               flex-shrink: 0;
               width: 110px;
               height: 60px;
               display: flex;
               align-items: center;
               justify-content: center;
               background: rgba(255, 255, 255, 0.03);
               border: 1px solid var(--border);
               border-radius: 10px;
               padding: 8px 12px;
               transition: background .3s, border-color .3s, transform .3s
          }

          .client-logo-item:hover {
               background: rgba(212, 168, 67, .07);
               border-color: rgba(212, 168, 67, .25);
               transform: translateY(-2px)
          }

          .client-logo-item img {
               max-width: 90px;
               max-height: 44px;
               width: auto;
               height: auto;
               object-fit: contain;
               filter: grayscale(1) brightness(1.8) opacity(0.7);
               transition: filter .3s
          }

          .client-logo-item:hover img {
               filter: grayscale(0) brightness(1) opacity(1)
          }

          /* ═══ TESTIMONIALS HORIZONTAL SLIDER ═══ */
          .testi-slider-wrap {
               position: relative;
               overflow: hidden;
               padding-bottom: 40px;
               max-width: 100%
          }

          .testi-arrow {
               position: absolute;
               top: calc(50% - 24px);
               transform: translateY(-50%);
               z-index: 10;
               width: 42px;
               height: 42px;
               border-radius: 50%;
               background: rgba(14, 14, 14, .92);
               border: 1px solid rgba(212, 168, 67, .25);
               color: var(--gold);
               cursor: pointer;
               display: flex;
               align-items: center;
               justify-content: center;
               transition: all .25s ease;
               box-shadow: 0 4px 20px rgba(0, 0, 0, .5)
          }

          .testi-arrow svg {
               width: 16px;
               height: 16px
          }

          .testi-arrow:hover {
               background: rgba(212, 168, 67, .15);
               border-color: var(--gold);
               transform: translateY(-50%) scale(1.1)
          }

          .testi-prev {
               left: -4px
          }

          .testi-next {
               right: -4px
          }

          .testi-track {
               display: flex;
               gap: 24px;
               overflow-x: auto;
               scroll-snap-type: x mandatory;
               will-change: scroll-position;
               -webkit-overflow-scrolling: touch;
               scroll-behavior: smooth;
               padding: 12px 4px 16px;
               scrollbar-width: none;
               cursor: grab
          }

          .testi-track:active {
               cursor: grabbing
          }

          .testi-track::-webkit-scrollbar {
               display: none
          }

          .tcard {
               flex: 0 0 calc(33.333% - 16px);
               min-width: 280px;
               scroll-snap-align: start;
               background: linear-gradient(135deg, rgba(20, 20, 20, .97), rgba(12, 12, 12, .97));
               border: 1px solid var(--border);
               border-radius: 16px;
               padding: 32px 28px 24px;
               position: relative;
               overflow: hidden;
               display: flex;
               flex-direction: column;
               transition: transform .35s cubic-bezier(.23, 1, .32, 1), border-color .35s, box-shadow .35s
          }

          .tcard:hover {
               transform: translateY(-6px);
               border-color: rgba(212, 168, 67, .2);
               box-shadow: 0 20px 60px rgba(0, 0, 0, .4)
          }

          .tcard-glow {
               position: absolute;
               inset: 0;
               border-radius: inherit;
               background: radial-gradient(ellipse at 50% 0%, rgba(212, 168, 67, .07), transparent 60%);
               pointer-events: none
          }

          .tcard-quote {
               font-family: var(--f-display);
               font-size: 72px;
               line-height: .65;
               color: rgba(212, 168, 67, .15);
               display: block;
               margin-bottom: 12px
          }

          .tcard-stars {
               color: var(--gold);
               font-size: 12px;
               letter-spacing: 2px;
               margin-bottom: 14px
          }

          .tcard-text {
               font-size: 14px;
               line-height: 1.85;
               color: var(--white-60);
               margin-bottom: 24px;
               flex: 1
          }

          .tcard-author {
               display: flex;
               align-items: center;
               gap: 12px;
               padding-top: 18px;
               border-top: 1px solid var(--border);
               margin-top: auto
          }

          .tcard-avatar {
               width: 38px;
               height: 38px;
               border-radius: 50%;
               flex-shrink: 0;
               background: linear-gradient(135deg, rgba(212, 168, 67, .3), rgba(212, 168, 67, .1));
               border: 1px solid rgba(212, 168, 67, .3);
               display: flex;
               align-items: center;
               justify-content: center;
               font-family: var(--f-ui);
               font-size: 13px;
               font-weight: 700;
               color: var(--gold)
          }

          .tcard-name {
               font-family: var(--f-ui);
               font-size: 13px;
               font-weight: 700;
               color: var(--white)
          }

          .tcard-role {
               font-size: 11px;
               color: var(--white-40);
               margin-top: 2px
          }

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

          .testi-dot {
               width: 6px;
               height: 6px;
               border-radius: 50%;
               background: var(--border-mid);
               cursor: pointer;
               border: none;
               transition: all .3s ease;
               padding: 0
          }

          .testi-dot.active {
               background: var(--gold);
               width: 20px;
               border-radius: 3px
          }

          @media(max-width:768px) {
               .tcard {
                    flex: 0 0 83vw;
                    min-width: 240px;
                    padding: 24px 18px 20px
               }

               .testi-arrow {
                    display: none
               }
          }

          @media(min-width:769px)and (max-width:1100px) {
               .tcard {
                    flex: 0 0 calc(50% - 12px)
               }
          }

          /* ═══ SERVICE DEEP DIVE MODAL ═══ */
          .svc-modal-overlay {
               position: fixed;
               inset: 0;
               z-index: 9999;
               background: rgba(0, 0, 0, .87);
               backdrop-filter: blur(14px);
               display: flex;
               align-items: center;
               justify-content: center;
               padding: 20px;
               opacity: 0;
               pointer-events: none;
               transition: opacity .35s ease
          }

          .svc-modal-overlay.open {
               opacity: 1;
               pointer-events: all
          }

          .svc-modal {
               background: linear-gradient(135deg, #141414, #0d0d0d);
               border: 1px solid rgba(212, 168, 67, .2);
               border-radius: 16px;
               width: 100%;
               max-width: 640px;
               max-height: 85vh;
               overflow-y: auto;
               padding: 44px;
               transform: translateY(28px) scale(.97);
               transition: transform .4s cubic-bezier(.23, 1, .32, 1);
               box-shadow: 0 40px 100px rgba(0, 0, 0, .7);
               position: relative
          }

          .svc-modal-overlay.open .svc-modal {
               transform: translateY(0) scale(1)
          }

          .svc-modal-close {
               position: absolute;
               top: 18px;
               right: 18px;
               width: 34px;
               height: 34px;
               border-radius: 50%;
               background: rgba(255, 255, 255, .06);
               border: 1px solid rgba(255, 255, 255, .1);
               color: var(--white-60);
               font-size: 15px;
               cursor: pointer;
               display: flex;
               align-items: center;
               justify-content: center;
               transition: all .2s
          }

          .svc-modal-close:hover {
               background: rgba(212, 168, 67, .15);
               color: var(--gold)
          }

          .svc-modal-num {
               font-family: var(--f-display);
               font-size: 60px;
               line-height: 1;
               color: rgba(212, 168, 67, .1);
               margin-bottom: -10px
          }

          .svc-modal-title {
               font-family: var(--f-ui);
               font-size: 24px;
               font-weight: 700;
               color: var(--white);
               margin-bottom: 14px
          }

          .svc-modal-divider {
               width: 44px;
               height: 2px;
               background: var(--gold);
               margin-bottom: 20px;
               border-radius: 1px
          }

          .svc-modal-desc {
               font-size: 15px;
               line-height: 1.9;
               color: var(--white-60);
               margin-bottom: 28px
          }

          .svc-modal-features {
               display: grid;
               grid-template-columns: 1fr 1fr;
               gap: 10px;
               margin-bottom: 28px
          }

          .svc-modal-feature {
               display: flex;
               align-items: center;
               gap: 8px;
               font-family: var(--f-ui);
               font-size: 12px;
               color: var(--white-60)
          }

          .svc-modal-feature::before {
               content: '';
               width: 5px;
               height: 5px;
               border-radius: 50%;
               background: var(--gold);
               flex-shrink: 0
          }

          .svc-modal-result {
               background: rgba(212, 168, 67, .06);
               border: 1px solid rgba(212, 168, 67, .15);
               border-radius: 10px;
               padding: 18px 22px;
               margin-bottom: 24px
          }

          .svc-modal-result-label {
               font-family: var(--f-ui);
               font-size: 9px;
               font-weight: 600;
               letter-spacing: 3px;
               text-transform: uppercase;
               color: var(--gold);
               margin-bottom: 6px
          }

          .svc-modal-result-text {
               font-size: 13px;
               line-height: 1.7;
               color: var(--white-60)
          }

          .svc-modal-cta {
               display: inline-flex;
               align-items: center;
               gap: 8px;
               font-family: var(--f-ui);
               font-size: 11px;
               font-weight: 700;
               letter-spacing: 2.5px;
               text-transform: uppercase;
               background: var(--gold);
               color: var(--black);
               padding: 13px 28px;
               border-radius: 4px;
               transition: transform .25s, box-shadow .25s
          }

          .svc-modal-cta:hover {
               transform: translateY(-2px);
               box-shadow: 0 8px 24px rgba(212, 168, 67, .35)
          }

          @media(max-width:600px) {
               .svc-modal {
                    padding: 26px 18px
               }

               .svc-modal-features {
                    grid-template-columns: 1fr
               }
          }

          /* ═══ GROWTH CHART ═══ */
          #growth {
               background: var(--bg)
          }

          .growth-layout {
               display: grid;
               grid-template-columns: 1fr 1.3fr;
               gap: 72px;
               align-items: center
          }

          .growth-chart-wrap {
               position: relative;
               background: rgba(255, 255, 255, .02);
               border: 1px solid var(--border);
               border-radius: 16px;
               padding: 28px;
               overflow: hidden
          }

          .growth-chart-wrap::before {
               content: '';
               position: absolute;
               inset: 0;
               background: radial-gradient(ellipse at 50% 100%, rgba(212, 168, 67, .05), transparent 70%)
          }

          .chart-title-row {
               display: flex;
               justify-content: space-between;
               align-items: center;
               margin-bottom: 20px
          }

          .chart-label {
               font-family: var(--f-ui);
               font-size: 10px;
               font-weight: 600;
               letter-spacing: 3px;
               text-transform: uppercase;
               color: var(--white-30)
          }

          .chart-legend {
               display: flex;
               gap: 14px
          }

          .chart-legend-item {
               display: flex;
               align-items: center;
               gap: 5px;
               font-family: var(--f-ui);
               font-size: 10px;
               color: var(--white-30)
          }

          .chart-legend-dot {
               width: 7px;
               height: 7px;
               border-radius: 50%
          }

          .growth-svg {
               width: 100%;
               height: 190px;
               overflow: visible
          }

          .chart-line {
               fill: none;
               stroke-width: 2.5;
               stroke-linecap: round;
               stroke-linejoin: round;
               stroke-dasharray: 1200;
               stroke-dashoffset: 1200;
               transition: stroke-dashoffset 2.2s cubic-bezier(.16, 1, .3, 1)
          }

          .chart-line.animated {
               stroke-dashoffset: 0
          }

          .chart-area {
               opacity: 0;
               transition: opacity 1.5s ease .5s
          }

          .chart-area.animated {
               opacity: 1
          }

          .chart-dot {
               opacity: 0;
               transform-box: fill-box;
               transform-origin: center;
               transform: scale(0);
               transition: opacity .3s, transform .4s cubic-bezier(.23, 1, .32, 1)
          }

          .chart-dot.animated {
               opacity: 1;
               transform: scale(1)
          }

          .growth-metrics {
               display: grid;
               grid-template-columns: 1fr 1fr;
               gap: 12px;
               margin-top: 18px
          }

          .growth-metric {
               background: rgba(255, 255, 255, .025);
               border: 1px solid var(--border);
               border-radius: 10px;
               padding: 14px 18px;
               transition: border-color .3s
          }

          .growth-metric:hover {
               border-color: rgba(212, 168, 67, .25)
          }

          .growth-metric-num {
               font-family: var(--f-display);
               font-size: 28px;
               line-height: 1;
               background: linear-gradient(135deg, var(--gold), #f0d080);
               -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;
               background-clip: text
          }

          .growth-metric-label {
               font-family: var(--f-ui);
               font-size: 9px;
               font-weight: 500;
               letter-spacing: 2px;
               text-transform: uppercase;
               color: var(--white-30);
               margin-top: 3px
          }

          .growth-points {
               display: flex;
               flex-direction: column;
               gap: 20px;
               margin-top: 28px
          }

          .growth-point {
               display: flex;
               gap: 16px;
               align-items: flex-start;
               padding: 18px;
               border-radius: 12px;
               background: rgba(255, 255, 255, .02);
               border: 1px solid transparent;
               transition: all .3s ease
          }

          .growth-point:hover {
               border-color: rgba(212, 168, 67, .2);
               background: rgba(212, 168, 67, .04)
          }

          .growth-point-icon {
               width: 38px;
               height: 38px;
               border-radius: 10px;
               flex-shrink: 0;
               background: rgba(212, 168, 67, .1);
               border: 1px solid rgba(212, 168, 67, .2);
               display: flex;
               align-items: center;
               justify-content: center
          }

          .growth-point-icon svg {
               width: 16px;
               height: 16px;
               stroke: var(--gold);
               fill: none;
               stroke-width: 1.5;
               stroke-linecap: round
          }

          .growth-point-title {
               font-family: var(--f-ui);
               font-size: 13px;
               font-weight: 700;
               color: var(--white);
               margin-bottom: 3px
          }

          .growth-point-desc {
               font-size: 12px;
               line-height: 1.7;
               color: var(--white-40)
          }

          @media(max-width:900px) {
               .growth-layout {
                    grid-template-columns: 1fr;
                    gap: 40px
               }
          }

          @media(max-width:900px) {
               .seo-local-grid,
               .faq-grid {
                    grid-template-columns: 1fr;
               }

               .seo-local-panel {
                    padding: 28px;
               }
          }

          @media(max-width:520px) {
               .seo-proof-row {
                    grid-template-columns: 1fr;
               }

               .faq-card {
                    padding: 22px;
                    min-height: auto;
               }
          }