@font-face {
      font-family: 'nebras';
      src: url('fonts/nebras.woff2') format('woff2');
      font-weight: 100 900;
      font-style: normal;
      font-display: swap
    }

    :root {
      --vh: 1vh;
      --green-900: #031A16;
      --green-850: #05211c;
      --green-800: #082E26;
      --green-700: #0F4C3A;
      --gold: #D6A84F;
      --gold-light: #FFD86B;
      --warm-white: #FFFCF6;
      --muted: rgba(255, 252, 246, .72);
      --soft: rgba(255, 252, 246, .08);
      --line: rgba(255, 216, 107, .18);
      --float-menu-space: 90px
    }

    * {
      box-sizing: border-box
    }

    html {
      margin: 0;
      background: var(--green-900);
      scroll-behavior: smooth;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch
    }

    body {
      margin: 0;
      overflow-x: hidden;
      font-family: 'nebras', 'Vazirmatn', 'IRANSansX', 'Yekan Bakh', Tahoma, sans-serif;
      color: var(--warm-white);
      background: radial-gradient(circle at 50% 10%, rgba(255, 216, 107, .12), transparent 34rem), linear-gradient(180deg, #031A16 0%, #041f1a 46%, #082E26 100%);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: radial-gradient(circle at 18% 70%, rgba(15, 76, 58, .45), transparent 40rem), radial-gradient(circle at 82% 28%, rgba(255, 216, 107, .08), transparent 30rem), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(0deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
      background-size: auto, auto, 76px 76px, 76px 76px;
      opacity: .92
    }

    .stage {
      position: relative;
      z-index: 1
    }

    .orb {
      position: fixed;
      z-index: 0;
      pointer-events: none;
      border-radius: 999px;
      filter: blur(42px);
      opacity: .72;
      mix-blend-mode: screen
    }

    .orb-one {
      width: 360px;
      height: 360px;
      right: -110px;
      top: 16vh;
      background: rgba(214, 168, 79, .16);
      animation: driftOne 13s ease-in-out infinite
    }

    .orb-two {
      width: 420px;
      height: 420px;
      left: -160px;
      top: 58vh;
      background: rgba(15, 76, 58, .55);
      animation: driftTwo 15s ease-in-out infinite
    }

    @keyframes driftOne {
      50% {
        transform: translate(-30px, 70px) scale(1.08)
      }
    }

    @keyframes driftTwo {
      50% {
        transform: translate(70px, -35px) scale(.95)
      }
    }

    a {
      color: inherit
    }

    .topbar {
      position: fixed;
      z-index: 80;
      top: max(16px, env(safe-area-inset-top));
      left: 50%;
      transform: translateX(-50%);
      width: min(1120px, calc(100vw - 32px));
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 10px;
      border: 1px solid rgba(255, 216, 107, .20);
      border-radius: 999px;
      background: rgba(3, 26, 22, .46);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 18px 54px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .08)
    }

    .brand-mark {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      padding-inline: 8px 14px
    }

    .brand-mark img {
      width: 40px;
      height: 40px;
      object-fit: contain;
      filter: drop-shadow(0 0 14px rgba(255, 216, 107, .35))
    }

    .brand-mark span {
      display: grid;
      line-height: 1.5;
    }

    .brand-mark b {
      font-size: 14px
    }

    .brand-mark small {
      direction: ltr;
      color: rgba(255, 252, 246, .58);
      font-size: 10px
    }

    .brand-mark b,
    .brand-mark small {
      display: block;
      width: 100%;
      min-height: 1.2em;
      transition: color .25s ease, opacity .25s ease;
      white-space: nowrap;
      text-align: justify;
      text-align-last: justify
    }

    .brand-mark.is-person b {
      color: var(--warm-white)
    }

    .brand-mark.is-person small {
      direction: rtl;
      color: rgba(255, 252, 246, .66)
    }

    .brand-mark.is-typing b::after,
    .brand-mark.is-typing small::after {
      content: '';
      display: inline-block;
      width: 1px;
      height: .9em;
      margin-inline-start: 3px;
      vertical-align: -.12em;
      background: rgba(255, 216, 107, .82);
      animation: brandCaret .85s steps(1) infinite
    }

    @keyframes brandCaret {
      50% { opacity: 0 }
    }

    .top-actions {
      display: flex;
      gap: 8px;
      align-items: center
    }

    .pill-link {
      text-decoration: none;
      border-radius: 999px;
      padding: 12px 16px;
      font-size: 12px;
      font-weight: 780;
      white-space: nowrap;
      border: 1px solid rgba(255, 255, 255, .11);
      background: rgba(255, 252, 246, .055);
      color: rgba(255, 252, 246, .82);
      transition: .25s ease
    }

    .pill-link:hover {
      background: rgba(255, 252, 246, .09);
      transform: translateY(-1px)
    }

    .pill-link.primary {
      color: #12382f;
      border-color: transparent;
      background: linear-gradient(135deg, #FFD86B, #D6A84F);
      box-shadow: 0 14px 32px rgba(214, 168, 79, .18)
    }

    .section {
      position: relative;
      padding: clamp(82px, 10vw, 140px) clamp(18px, 4vw, 64px)
    }

    .hero {
      min-height: calc(var(--vh)*100);
      display: grid;
      place-items: center;
      padding-top: 130px
    }

    .hero-grid {
      width: min(1180px, 100%);
      display: grid;
      grid-template-columns: 1fr 3fr;
      gap: clamp(28px, 5vw, 76px);
      align-items: center
    }

    .hero-copy {
      position: relative;
      z-index: 2
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 20px;
      padding: 10px 15px;
      border: 1px solid rgba(255, 216, 107, .22);
      border-radius: 999px;
      color: rgba(255, 216, 107, .90);
      background: rgba(255, 252, 246, .055);
      font-size: 13px
    }

    .eyebrow::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--gold-light);
      box-shadow: 0 0 18px rgba(255, 216, 107, .78)
    }

    h1 {
      margin: 0;
      font-size: clamp(42px, 7vw, 96px);
      line-height: 1.03;
      letter-spacing: -.07em;
      font-weight: 900;
      text-shadow: 0 0 38px rgba(255, 216, 107, .14)
    }

    .hero-title-sub {
      margin: 14px 0 0;
      font-size: clamp(21px, 2.6vw, 38px);
      font-weight: 760;
      color: rgba(255, 252, 246, .84);
      line-height: 1.45;
      letter-spacing: -.04em
    }

    .hero-lead {
      max-width: 720px;
      margin: 24px 0 0;
      font-size: clamp(15px, 1.4vw, 19px);
      line-height: 2.15;
      color: rgba(255, 252, 246, .74);
      text-align: justify;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 32px
    }

    .hero-actions a {
      text-decoration: none;
      border-radius: 999px;
      padding: 15px 24px;
      font-weight: 820;
      font-size: 14px
    }

    .hero-actions a:first-child {
      color: #12382f;
      background: linear-gradient(135deg, #FFD86B, #D6A84F);
      box-shadow: 0 18px 44px rgba(214, 168, 79, .22)
    }

    .hero-actions a+a {
      color: rgba(255, 252, 246, .82);
      background: rgba(255, 252, 246, .055);
      border: 1px solid rgba(255, 255, 255, .12)
    }

    .metric-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-top: 32px
    }

    .metric {
      position: relative;
      overflow: hidden;
      padding: 16px 15px;
      border-radius: 26px;
      background: rgba(255, 252, 246, .055);
      border: 1px solid rgba(255, 255, 255, .10);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07)
    }

    .metric strong {
      display: block;
      font-size: clamp(24px, 2.5vw, 38px);
      line-height: 1;
      color: rgba(255, 216, 107, .95)
    }

    .metric span {
      display: block;
      margin-top: 8px;
      font-size: 12px;
      line-height: 1.7;
      color: rgba(255, 252, 246, .64)
    }

    .portrait-wrap {
      position: relative;
      min-height: 590px;
      display: grid;
      place-items: center
    }

    .signal-ring {
      position: absolute;
      inset: 3%;
      border-radius: 50%;
      border: 1px solid rgba(255, 216, 107, .15);
      background: repeating-conic-gradient(from 0deg, rgba(255, 216, 107, .16) 0deg 2deg, transparent 2deg 16deg);
      mask: radial-gradient(circle, transparent 58%, #000 59%);
      animation: spin 42s linear infinite
    }

    .signal-ring:nth-child(2) {
      inset: 13%;
      animation-duration: 28s;
      animation-direction: reverse;
      opacity: .62
    }

    .portrait-card {
      position: relative;
      width: min(430px, 86vw);
      aspect-ratio: 1/1.18;
      border-radius: 44% 56% 44% 56%/44% 36% 64% 56%;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid rgba(255, 216, 107, .24);
      background: linear-gradient(145deg, rgba(255, 252, 246, .11), rgba(15, 76, 58, .30)), rgba(255, 252, 246, .06);
      box-shadow: 0 0 90px rgba(255, 216, 107, .13), 0 28px 84px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .13);
      isolation: isolate
    }

    .portrait-card img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 16%;
      filter: grayscale(.14) sepia(.18) saturate(.88) contrast(1.08) brightness(.90);
      mix-blend-mode: luminosity;
      transform: scale(1.035);
      transition: .7s cubic-bezier(.22, 1, .36, 1)
    }

    .portrait-card::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
      background: radial-gradient(circle at 50% 18%, rgba(255, 252, 246, .20), transparent 28%), radial-gradient(circle at 50% 72%, rgba(15, 76, 58, .48), transparent 62%), linear-gradient(145deg, rgba(255, 216, 107, .20), rgba(3, 26, 22, .08) 46%, rgba(3, 26, 22, .44));
      mix-blend-mode: soft-light
    }

    .portrait-card:hover img,
    .portrait-card.is-auto-active img {
      mix-blend-mode: normal;
      filter: grayscale(.04) sepia(.12) saturate(.98) contrast(1.11) brightness(.98);
      transform: scale(1.075)
    }

    .portrait-card span {
      position: relative;
      z-index: 3;
      font-size: clamp(96px, 11vw, 150px);
      font-weight: 900;
      color: rgba(255, 216, 107, .84);
      text-shadow: 0 0 34px rgba(255, 216, 107, .32)
    }

    .portrait-card img+span {
      opacity: 0
    }

    .floating-note {
      position: absolute;
      z-index: 5;
      display: grid;
      gap: 3px;
      min-width: 154px;
      padding: 13px 15px;
      border-radius: 24px;
      border: 1px solid rgba(255, 216, 107, .18);
      background: rgba(3, 26, 22, .56);
      backdrop-filter: blur(18px);
      box-shadow: 0 18px 44px rgba(0, 0, 0, .22)
    }

    .floating-note b {
      font-size: 13px;
      color: rgba(255, 216, 107, .92)
    }

    .floating-note small {
      font-size: 11px;
      color: rgba(255, 252, 246, .66);
      line-height: 1.6
    }

    .note-a {
      right: 0;
      top: 20%
    }

    .note-b {
      left: 0;
      bottom: 21%
    }

    .note-c {
      right: 8%;
      bottom: 4%
    }

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

    .panel {
      position: relative;
      width: min(1180px, 100%);
      margin-inline: auto;
      border: 1px solid rgba(255, 216, 107, .18);
      background: linear-gradient(145deg, rgba(255, 252, 246, .10), rgba(255, 252, 246, .04)), linear-gradient(180deg, rgba(15, 76, 58, .36), rgba(3, 26, 22, .68));
      box-shadow: 0 34px 110px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .10);
      backdrop-filter: blur(24px);
      border-radius: clamp(34px, 4vw, 58px);
      overflow: hidden
    }

    .panel::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at 78% 18%, rgba(255, 216, 107, .18), transparent 26rem), linear-gradient(180deg, rgba(255, 255, 255, .055), transparent 40%)
    }

    .panel::after {
      content: '';
      position: absolute;
      inset: 20px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: inherit;
      pointer-events: none
    }

    .panel-inner {
      position: relative;
      z-index: 2;
      padding: clamp(26px, 4.8vw, 62px)
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 22px;
      margin-bottom: 28px
    }

    .section-head h2 {
      margin: 0;
      font-size: clamp(32px, 4.6vw, 68px);
      line-height: 1.08;
      letter-spacing: -.06em
    }

    .section-head p {
      margin: 0;
      max-width: 520px;
      font-size: clamp(13px, 1.25vw, 16px);
      line-height: 2;
      color: rgba(255, 252, 246, .68);
      text-align: justify
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 18px
    }

    .story-card,
    .glass-card {
      border-radius: 34px;
      padding: clamp(22px, 3vw, 34px);
      background: rgba(255, 252, 246, .055);
      border: 1px solid rgba(255, 255, 255, .10);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07)
    }

    .story-card p {
      margin: 0;
      color: rgba(255, 252, 246, .74);
      font-size: 15px;
      line-height: 2.2;
      text-align: justify
    }

    .story-card p+p {
      margin-top: 16px
    }

    .chipline {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 24px
    }

    .chipline span {
      padding: 10px 13px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .10);
      background: rgba(255, 252, 246, .055);
      color: rgba(255, 252, 246, .74);
      font-size: 12px
    }

    .glass-card h3 {
      margin: 0 0 16px;
      font-size: 22px
    }

    .need-list {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none
    }

    .need-list li {
      position: relative;
      padding: 15px 18px;
      border-radius: 22px;
      background: rgba(3, 26, 22, .24);
      border: 1px solid rgba(255, 255, 255, .08);
      color: rgba(255, 252, 246, .74);
      line-height: 1.85
    }

    .need-list li::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-left: 10px;
      border-radius: 50%;
      background: var(--gold-light);
      box-shadow: 0 0 16px rgba(255, 216, 107, .68)
    }

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

    .capability {
      position: relative;
      min-height: 210px;
      border-radius: 32px;
      padding: 24px;
      overflow: hidden;
      background: rgba(255, 252, 246, .055);
      border: 1px solid rgba(255, 255, 255, .10);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07)
    }

    .capability::before {
      content: '';
      position: absolute;
      inset: auto -20% -45% -20%;
      height: 120px;
      background: radial-gradient(circle, rgba(255, 216, 107, .18), transparent 64%);
      filter: blur(12px)
    }

    .capability small {
      color: rgba(255, 216, 107, .88);
      font-weight: 760
    }

    .capability h3 {
      margin: 14px 0 0;
      font-size: 25px;
      line-height: 1.25
    }

    .capability p {
      margin: 14px 0 0;
      color: rgba(255, 252, 246, .66);
      line-height: 2;
      font-size: 13.5px;
      text-align: justify
    }

    #method .panel {
      border: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      overflow: visible
    }

    #method .panel::before,
    #method .panel::after { display: none }

    #method .panel-inner { overflow: visible }

    .method-source {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none
    }

    .method-source li {
      position: relative;
      min-height: 172px;
      padding: 22px 18px 20px;
      border-radius: 28px;
      background: rgba(255, 252, 246, .055);
      border: 1px solid rgba(255, 255, 255, .10);
      color: rgba(255, 252, 246, .70);
      line-height: 1.9
    }

    .method-source li::before {
      content: attr(data-name);
      display: block;
      margin-bottom: 10px;
      color: rgba(255, 216, 107, .93);
      font-size: 14px;
      font-weight: 780
    }

    .method-source li::after {
      content: attr(data-title);
      display: block;
      margin-bottom: 10px;
      color: var(--warm-white);
      font-size: 18px;
      font-weight: 800;
      line-height: 1.5
    }

    .method-enhanced .method-source {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0
    }

    .method-stage { display: none }

    .method-enhanced .method-stage {
      display: block;
      position: relative
    }

    .method-controls {
      position: absolute;
      z-index: 22;
      inset-inline: 18px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      justify-content: space-between;
      pointer-events: none
    }

    .method-nav {
      appearance: none;
      position: relative;
      width: 54px;
      height: 54px;
      border: 1px solid rgba(255, 216, 107, .24);
      border-radius: 999px;
      background: radial-gradient(circle at 50% 42%, rgba(255, 216, 107, .20), transparent 70%), rgba(3, 26, 22, .58);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 18px 42px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .10);
      cursor: pointer;
      pointer-events: auto;
      transition: transform .24s ease, opacity .24s ease, filter .24s ease
    }

    .method-nav::before {
      content: '';
      position: absolute;
      inset: 0;
      margin: auto;
      width: 12px;
      height: 12px;
      border-top: 2px solid rgba(255, 216, 107, .92);
      border-left: 2px solid rgba(255, 216, 107, .92);
      filter: drop-shadow(0 0 8px rgba(255, 216, 107, .48))
    }

    .method-nav:hover { transform: scale(1.05); filter: brightness(1.08) }
    .method-nav.is-disabled { opacity: .24; pointer-events: none }
    .method-nav-prev::before { transform: rotate(135deg); right: 3px }
    .method-nav-next::before { transform: rotate(-45deg); left: 3px }

    .method-viewport {
      position: relative;
      height: clamp(590px, 58vw, 720px);
      overflow-x: auto;
      overflow-y: hidden;
      direction: rtl;
      border-radius: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      scrollbar-width: none;
      scrollbar-color: transparent transparent;
      overscroll-behavior-x: contain;
      overscroll-behavior-y: auto;
      scroll-padding-inline: clamp(22px, 8vw, 84px);
      touch-action: pan-x pan-y;
      cursor: grab
    }

    .method-viewport.is-dragging { cursor: grabbing; user-select: none }
    .method-viewport::-webkit-scrollbar { width: 0; height: 0; display: none }
    .method-viewport::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px }

    .method-track {
      position: relative;
      height: 100%;
      width: max(1660px, calc(var(--method-stop-count, 6) * var(--method-stop-width, 438px)));
      min-width: 100%;
      direction: ltr;
      isolation: isolate;
      contain: layout style;
      overflow: visible
    }

    .method-track::before { content: none }

    .method-svg {
      position: absolute;
      z-index: 1;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none
    }

    .method-path-shadow,
    .method-path-main,
    .method-path-done {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke
    }

    .method-path-shadow { stroke: rgba(0, 0, 0, .24); stroke-width: 17; filter: blur(7px) }
    .method-path-main { stroke: rgba(255, 252, 246, .16); stroke-width: 5.2; stroke-dasharray: 1 15 }
    .method-path-done {
      stroke: url(#methodPathGradient);
      stroke-width: 5;
      stroke-dasharray: 0 999999;
      stroke-dashoffset: 0;
      filter: drop-shadow(0 0 12px rgba(255, 216, 107, .22))
    }

    .method-pulse {
      position: absolute;
      z-index: 2;
      width: 22px;
      height: 22px;
      left: 0;
      top: 0;
      border-radius: 999px;
      background: #FFD86B;
      box-shadow: 0 0 0 9px rgba(255, 216, 107, .10), 0 0 30px rgba(255, 216, 107, .78), 0 0 74px rgba(214, 168, 79, .38);
      transform: translate3d(-50%, -50%, 0);
      pointer-events: none;
      mix-blend-mode: screen;
      will-change: left, top
    }

    .method-pulse::before,
    .method-pulse::after {
      content: '';
      position: absolute;
      inset: -12px;
      border-radius: inherit;
      border: 1px solid rgba(255, 216, 107, .30);
      animation: methodPulse 1.85s ease-out infinite
    }

    .method-pulse::after { inset: -23px; animation-delay: .6s; opacity: .38 }
    @keyframes methodPulse { to { transform: scale(1.65); opacity: 0 } }

    .method-snap-point {
      position: absolute;
      top: 0;
      width: 1px;
      height: 100%;
      opacity: 0;
      pointer-events: none;
      scroll-snap-align: center;
      scroll-snap-stop: always
    }

    .method-card,
    .method-start-card {
      --lit: 0;
      --card-light-strength: 0;
      --card-light-x: 112%;
      --card-light-y: 50%;
      --tilt: 0deg;
      position: absolute;
      z-index: 10;
      width: clamp(264px, 22vw, 330px);
      min-height: 224px;
      padding: 24px;
      border-radius: 34px;
      color: var(--warm-white);
      direction: rtl;
      text-align: right;
      background:
        radial-gradient(circle at var(--card-light-x, 112%) var(--card-light-y, 50%), rgba(255, 216, 107, calc(.14 + .58 * var(--card-light-strength))) 0%, rgba(255, 216, 107, calc(.06 + .30 * var(--card-light-strength))) 18%, rgba(214, 168, 79, calc(.025 + .15 * var(--card-light-strength))) 36%, transparent 66%),
        linear-gradient(135deg, rgba(255, 255, 255, calc(.18 + .10 * var(--lit))), rgba(255, 255, 255, calc(.08 + .035 * var(--lit))) 38%, rgba(255, 255, 255, .036) 100%),
        rgba(3, 26, 22, .76);
      border: 1px solid rgba(255, 216, 107, calc(.20 + .32 * var(--lit)));
      box-shadow:
        0 28px 82px rgba(0, 0, 0, .46),
        0 0 calc(82px * var(--card-light-strength)) rgba(255, 216, 107, .20),
        inset 0 1px 0 rgba(255, 255, 255, calc(.24 + .16 * var(--lit))),
        inset 0 -58px 98px rgba(3, 26, 22, .82),
        inset 0 0 0 1px rgba(255, 255, 255, .035);
      backdrop-filter: blur(38px) saturate(1.36) contrast(1.18) brightness(.92);
      -webkit-backdrop-filter: blur(38px) saturate(1.36) contrast(1.18) brightness(.92);
      transform: translate(-50%, -50%) rotate(var(--tilt)) scale(calc(.97 + .02 * var(--lit)));
      opacity: calc(.92 + .08 * var(--lit));
      transition: opacity .22s ease, transform .22s ease, border-color .22s ease, box-shadow .22s ease;
      overflow: hidden;
      isolation: isolate;
      contain: paint;
      scroll-snap-align: center;
      scroll-snap-stop: always
    }

    .method-card::before,
    .method-start-card::before {
      content: '';
      position: absolute;
      z-index: 0;
      inset: 0;
      background:
        radial-gradient(circle at var(--card-light-x, 112%) var(--card-light-y, 50%), rgba(255, 216, 107, calc(.12 + (.50 * var(--card-light-strength)))) 0%, rgba(255, 216, 107, calc(.055 + (.28 * var(--card-light-strength)))) 18%, rgba(214, 168, 79, calc(.02 + (.12 * var(--card-light-strength)))) 36%, transparent 66%),
        linear-gradient(270deg, rgba(255, 216, 107, calc(.16 * var(--card-light-strength))), transparent 66%),
        linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 48%);
      opacity: calc(.38 + (.62 * var(--card-light-strength)));
      pointer-events: none;
      transform: translateZ(0)
    }

    .method-card::after,
    .method-start-card::after {
      content: '';
      position: absolute;
      z-index: 1;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      border: 1px solid rgba(255, 255, 255, calc(.08 + .12 * var(--lit)));
      background:
        linear-gradient(180deg, rgba(3,26,22,.10), rgba(3,26,22,.34) 58%, rgba(3,26,22,.52)),
        linear-gradient(135deg, rgba(255,255,255,.13), transparent 38%),
        linear-gradient(270deg, rgba(255,216,107, calc(.055 * var(--card-light-strength))), transparent 62%)
    }

    .method-start-card {
      width: clamp(254px, 21vw, 306px);
      min-height: 156px;
      display: grid;
      align-content: center;
      justify-items: start;
      gap: 8px;
      text-decoration: none;
      color: var(--warm-white);
      cursor: pointer
    }

    .method-start-card span,
    .method-start-card strong,
    .method-start-card small,
    .method-card b,
    .method-card h3,
    .method-card p,
    .method-card img { position: relative; z-index: 2 }

    .method-start-card span { color: rgba(255, 216, 107, .98); font-size: 15px; font-weight: 820; text-align: right; text-shadow: 0 2px 18px rgba(3, 26, 22, .90) }
    .method-start-card strong { font-size: 24px; line-height: 1.42; text-align: right; text-shadow: 0 3px 22px rgba(3, 26, 22, .94) }
    .method-start-card small { color: rgba(255, 252, 246, .92); font-size: 13.2px; line-height: 1.85; text-align: right; text-shadow: 0 2px 18px rgba(3, 26, 22, .96) }

    .method-card.has-image { padding-top: 142px }

    .method-card img {
      position: absolute;
      inset: 10px 10px auto;
      width: calc(100% - 20px);
      height: 116px;
      object-fit: cover;
      border-radius: 26px;
      opacity: calc(.52 + .34 * var(--lit));
      filter: saturate(.88) brightness(.84);
      transition: opacity .22s ease, filter .22s ease, transform .22s ease
    }

    .method-card.is-active img { filter: saturate(1) brightness(1); transform: scale(1.02) }

    .method-card b {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      justify-content: flex-start;
      text-align: right;
      color: rgba(255, 216, 107, calc(.86 + .14 * var(--lit)));
      font-size: 15px;
      line-height: 1.65
    }

    .method-card b::before {
      content: '';
      flex: 0 0 auto;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--gold-light);
      box-shadow: 0 0 calc(10px + 12px * var(--lit)) rgba(255, 216, 107, .56)
    }

    .method-card h3 {
      margin: 12px 0 0;
      font-size: 24px;
      line-height: 1.42;
      letter-spacing: -.035em;
      text-align: right;
      text-shadow: 0 2px 18px rgba(3, 26, 22, .80)
    }

    .method-card p {
      margin: 9px 0 0;
      color: rgba(255, 252, 246, calc(.90 + .08 * var(--lit)));
      font-size: 14.5px;
      line-height: 2.05;
      text-align: justify;
      text-align-last: right;
      text-shadow: 0 2px 18px rgba(3, 26, 22, .98)
    }

    @media(max-width:920px) {
      .method-source { grid-template-columns: repeat(2, 1fr) }
      .method-controls { display: none }
      .method-viewport {
        height: 570px;
        cursor: auto;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 28px;
        scrollbar-width: none
      }
      .method-viewport::-webkit-scrollbar { display: none }
      .method-track { width: max(1180px, calc(var(--method-stop-count, 6) * var(--method-stop-width, 356px))) }
      .method-card, .method-start-card { width: 260px }
    }

    @media(max-width:720px) {
      .method-source { grid-template-columns: 1fr }
      .method-viewport { height: 570px; border-radius: 0 }
      .method-track { width: max(1040px, calc(var(--method-stop-count, 6) * var(--method-stop-width, 336px))) }
      .method-card, .method-start-card { width: min(286px, calc(100vw - 58px)); min-height: 214px; padding: 20px; border-radius: 30px }
      .method-start-card { min-height: 154px }
      .method-card.has-image { padding-top: 132px }
      .method-card img { height: 106px; border-radius: 24px }
      .method-card b { font-size: 14.2px }
      .method-card h3 { font-size: 22px }
      .method-card p { font-size: 13.8px; line-height: 2 }
      .method-start-card strong { font-size: 22px }
      .method-start-card small { font-size: 13px }
    }

    .works-section {
      padding-inline: clamp(14px, 3vw, 42px)
    }

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

    .portfolio-intro {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 18px;
      padding-inline: 10px
    }

    .portfolio-intro h2 {
      margin: 0;
      font-size: clamp(34px, 4.8vw, 72px);
      line-height: 1.05;
      letter-spacing: -.06em
    }

    .portfolio-intro p {
      margin: 0;
      max-width: 520px;
      color: rgba(255, 252, 246, .68);
      font-size: 14px;
      line-height: 2;
      text-align: justify
    }

    .portfolio-board {
      position: relative;
      width: 100%;
      height: min(680px, 72vh);
      min-height: 520px;
      border-radius: clamp(28px, 3vw, 48px);
      border: 1px solid rgba(255, 216, 107, .16);
      background: rgba(255, 252, 246, .045);
      box-shadow: 0 24px 86px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      overflow: hidden
    }

    .portfolio-nav {
      position: absolute;
      z-index: 18;
      top: 50%;
      width: clamp(44px, 4.6vw, 62px);
      height: clamp(44px, 4.6vw, 62px);
      border: 1px solid rgba(255, 216, 107, .24);
      border-radius: 999px;
      background: radial-gradient(circle at 50% 45%, rgba(255, 216, 107, .18), transparent 70%), rgba(3, 26, 22, .46);
      backdrop-filter: blur(18px);
      box-shadow: 0 18px 42px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .10);
      cursor: pointer;
      opacity: 1;
      transform: translateY(-50%) scale(1);
      transition: opacity .32s ease, transform .32s ease
    }

    .portfolio-nav::before {
      content: '';
      position: absolute;
      inset: 0;
      margin: auto;
      width: 13px;
      height: 13px;
      border-top: 2px solid rgba(255, 216, 107, .92);
      border-left: 2px solid rgba(255, 216, 107, .92);
      filter: drop-shadow(0 0 8px rgba(255, 216, 107, .55))
    }

    .portfolio-nav:hover {
      transform: translateY(-50%) scale(1.045)
    }

    .portfolio-nav.is-hidden {
      opacity: 0;
      pointer-events: none;
      transform: translateY(-50%) scale(.86)
    }

    .portfolio-nav-prev {
      right: clamp(14px, 2vw, 28px);
      left: auto
    }

    .portfolio-nav-next {
      left: clamp(14px, 2vw, 28px);
      right: auto
    }

    .portfolio-nav-prev::before {
      transform: rotate(135deg);
      right: 3px
    }

    .portfolio-nav-next::before {
      transform: rotate(-45deg);
      left: 3px
    }

    .portfolio-scroll {
      width: 100%;
      height: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      direction: rtl;
      overscroll-behavior-x: contain;
      scroll-behavior: smooth;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 216, 107, .32) transparent;
      touch-action: pan-x pan-y
    }

    .portfolio-scroll::-webkit-scrollbar {
      height: 8px
    }

    .portfolio-scroll::-webkit-scrollbar-thumb {
      background: rgba(255, 216, 107, .32);
      border-radius: 999px
    }

    .portfolio-track {
      height: 100%;
      display: flex;
      gap: 10px;
      padding: 10px;
      align-items: stretch;
      width: max-content;
      direction: rtl
    }

    .mosaic-page {
      flex: 0 0 min(940px, calc(100vw - 110px));
      height: 100%;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: repeat(6, 1fr);
      gap: 10px
    }

    .portfolio-tile {
      --mx: 50%;
      --my: 50%;
      position: relative;
      overflow: hidden;
      border-radius: 24px;
      isolation: isolate;
      text-decoration: none;
      color: var(--warm-white);
      background: #0a2a24;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
      transform: translateZ(0)
    }

    .tile-bg {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: var(--bg);
      transition: filter .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1)
    }

    .portfolio-tile::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 3;
      opacity: 0;
      background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 216, 107, .58) 0%, rgba(255, 216, 107, .24) 16%, rgba(15, 76, 58, .55) 42%, rgba(3, 26, 22, .72) 100%);
      mix-blend-mode: screen;
      transition: opacity .35s ease;
      pointer-events: none
    }

    .portfolio-tile:hover::before,
    .portfolio-tile.is-auto-active::before {
      opacity: .9
    }

    .portfolio-tile:hover .tile-bg,
    .portfolio-tile.is-auto-active .tile-bg {
      filter: blur(7px) brightness(.58) saturate(1.08);
      transform: scale(1.06)
    }

    .tile-short {
      position: absolute;
      z-index: 4;
      inset-inline-start: 18px;
      bottom: 16px;
      font-size: clamp(13px, 1.15vw, 16px);
      font-weight: 760;
      padding: 8px 12px;
      border-radius: 999px;
      color: rgba(255, 252, 246, .9);
      background: rgba(3, 26, 22, .24);
      border: 1px solid rgba(255, 255, 255, .12);
      backdrop-filter: blur(12px);
      transition: opacity .28s ease, transform .28s ease
    }

    .tile-info {
      position: absolute;
      z-index: 5;
      inset: 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-start;
      direction: rtl;
      opacity: 0;
      transform: translateY(12px);
      filter: blur(8px);
      transition: opacity .38s ease, transform .38s ease, filter .38s ease
    }

    .portfolio-tile:hover .tile-info,
    .portfolio-tile.is-auto-active .tile-info {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0)
    }

    .portfolio-tile:hover .tile-short,
    .portfolio-tile.is-auto-active .tile-short {
      opacity: 0;
      transform: translateY(8px)
    }

    .tile-info strong {
      font-size: clamp(18px, 2vw, 30px);
      line-height: 1.25;
      font-weight: 850;
      margin-bottom: 10px
    }

    .tile-info small {
      font-size: clamp(12px, 1vw, 14px);
      line-height: 1.7;
      color: rgba(255, 252, 246, .78)
    }

    .tile-a {
      grid-column: 1/3;
      grid-row: 1/4
    }

    .tile-b {
      grid-column: 3/7;
      grid-row: 1/4
    }

    .tile-c {
      grid-column: 1/5;
      grid-row: 4/7
    }

    .tile-d {
      grid-column: 5/7;
      grid-row: 4/7
    }

    .tile-e {
      grid-column: 1/3;
      grid-row: 1/7
    }

    .tile-f {
      grid-column: 3/7;
      grid-row: 1/3
    }

    .tile-g {
      grid-column: 3/5;
      grid-row: 3/7
    }

    .tile-h {
      grid-column: 5/7;
      grid-row: 3/7
    }

    .tile-i {
      grid-column: 1/4;
      grid-row: 1/4
    }

    .tile-j {
      grid-column: 4/7;
      grid-row: 1/4
    }

    .tile-k {
      grid-column: 1/3;
      grid-row: 4/7
    }

    .tile-l {
      grid-column: 3/7;
      grid-row: 4/7
    }

    .bg-brand {
      --bg: linear-gradient(135deg, rgba(255, 216, 107, .22), rgba(15, 76, 58, .86)), radial-gradient(circle at 30% 30%, #f4d46b, transparent 28%), linear-gradient(135deg, #153b31, #061c17)
    }

    .bg-web {
      --bg: linear-gradient(135deg, rgba(3, 26, 22, .24), rgba(15, 76, 58, .72)), repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 18px), linear-gradient(135deg, #244f42, #081f1a)
    }

    .bg-app {
      --bg: radial-gradient(circle at 25% 20%, rgba(255, 216, 107, .38), transparent 26%), linear-gradient(150deg, #0f4c3a, #06231d 60%, #d6a84f)
    }

    .bg-ai {
      --bg: radial-gradient(circle at 75% 30%, rgba(255, 216, 107, .44), transparent 24%), repeating-radial-gradient(circle at 48% 44%, rgba(255, 255, 255, .09) 0 2px, transparent 2px 18px), linear-gradient(135deg, #031a16, #0f4c3a)
    }

    .bg-seo {
      --bg: linear-gradient(120deg, rgba(255, 216, 107, .28), transparent 45%), linear-gradient(135deg, #123d32, #031a16)
    }

    .bg-content {
      --bg: radial-gradient(circle at 20% 75%, rgba(255, 216, 107, .36), transparent 24%), linear-gradient(135deg, #0c332b, #654f28)
    }

    .bg-event {
      --bg: linear-gradient(135deg, rgba(15, 76, 58, .85), rgba(214, 168, 79, .24)), repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 22px), #09251f
    }

    .bg-academy {
      --bg: radial-gradient(circle at 68% 20%, rgba(255, 216, 107, .38), transparent 24%), linear-gradient(135deg, #143e34, #061b17)
    }

    .bg-platform {
      --bg: linear-gradient(135deg, rgba(3, 26, 22, .15), rgba(15, 76, 58, .76)), conic-gradient(from 180deg at 45% 50%, #0f4c3a, #d6a84f, #082e26, #0f4c3a)
    }

    .bg-transform {
      --bg: radial-gradient(circle at 80% 20%, rgba(255, 216, 107, .42), transparent 25%), linear-gradient(145deg, #0b2d26, #14503f)
    }

    .bg-visual {
      --bg: linear-gradient(120deg, rgba(255, 216, 107, .32), transparent 40%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 18px), #0b2e27
    }

    .bg-commerce {
      --bg: radial-gradient(circle at 40% 35%, rgba(255, 216, 107, .35), transparent 25%), linear-gradient(135deg, #0f4c3a, #031a16)
    }


    #timeline .section-head {
      justify-content: center;
      align-items: center;
      text-align: center;
      margin-bottom: clamp(30px, 4vw, 54px);
    }

    #timeline .section-head h2 {
      width: 100%;
      text-align: center;
      text-align-last: center;
    }

    #timeline .section-head p {
      display: none;
    }

    .timeline {
      --career-progress: 0;
      --pulse-y: 44px;
      --line-start: 44px;
      --line-total: calc(100% - 88px);
      --node-size: 18px;
      position: relative;
      display: grid;
      gap: clamp(18px, 3vw, 34px);
      max-width: 1080px;
      margin: 0 auto;
      padding: clamp(10px, 1.8vw, 20px) 0 clamp(8px, 1.4vw, 18px);
      isolation: isolate;
    }

    .timeline::before,
    .timeline::after {
      content: '';
      position: absolute;
      z-index: 0;
      top: var(--line-start);
      height: var(--line-total);
      bottom: auto;
      left: 50%;
      width: 2px;
      border-radius: 999px;
      transform: translateX(-50%);
      pointer-events: none;
    }

    .timeline::before {
      background: linear-gradient(180deg, transparent, rgba(255, 216, 107, .16) 8%, rgba(255, 252, 246, .10) 50%, rgba(255, 216, 107, .16) 92%, transparent);
    }

    .timeline::after {
      bottom: auto;
      height: calc(var(--career-progress) * var(--line-total));
      background: linear-gradient(180deg, #FFD86B, #D6A84F 48%, rgba(15, 76, 58, .24));
      box-shadow: 0 0 20px rgba(255, 216, 107, .34), 0 0 54px rgba(214, 168, 79, .16);
      transition: height .18s linear;
    }

    .timeline-item {
      --item-side: 1;
      --item-delay: 0ms;
      --pulse-intensity: 0;
      --card-light-strength: 0;
      --card-light-x: 50%;
      --card-light-y: 50%;
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(58px, 88px) minmax(0, 1fr);
      align-items: center;
      gap: clamp(12px, 2vw, 22px);
      min-height: 132px;
      opacity: 0;
      transform: translateY(34px) scale(.985);
      filter: blur(12px);
      transition: opacity .72s cubic-bezier(.22, 1, .36, 1) var(--item-delay), transform .72s cubic-bezier(.22, 1, .36, 1) var(--item-delay), filter .72s cubic-bezier(.22, 1, .36, 1) var(--item-delay);
    }

    .timeline-item:nth-child(even) {
      --item-side: -1;
    }

    .timeline-item.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }

    .timeline-item time {
      grid-column: 2;
      grid-row: 1;
      position: relative;
      z-index: 4;
      width: clamp(58px, 7vw, 88px);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      text-align: center;
      border-radius: 999px;
      color: rgba(255, 252, 246, .94);
      font-size: clamp(9px, 0.85vw, 11px);
      font-weight: 400;
      line-height: 1.45;
      background: linear-gradient(145deg, rgba(255, 252, 246, .16), rgba(255, 252, 246, .045)), radial-gradient(circle at 50% 76%, rgba(255, 216, 107, calc(.24 * var(--pulse-intensity))), transparent 68%), rgba(3, 26, 22, .38);
      border: 1px solid rgba(255, 216, 107, calc(.34 + (.44 * var(--pulse-intensity))));
      box-shadow: 0 0 0 8px rgba(3, 26, 22, calc(.60 - (.05 * var(--pulse-intensity)))), 0 0 34px rgba(255, 216, 107, calc(.18 + (.48 * var(--pulse-intensity)))), 0 0 88px rgba(214, 168, 79, calc(.05 + (.36 * var(--pulse-intensity)))), inset 0 1px 0 rgba(255, 255, 255, calc(.20 + (.16 * var(--pulse-intensity)))), inset 0 -18px 36px rgba(255, 216, 107, calc(.04 + (.18 * var(--pulse-intensity))));
      backdrop-filter: blur(20px) saturate(calc(1.35 + (.25 * var(--pulse-intensity))));
      -webkit-backdrop-filter: blur(20px) saturate(calc(1.35 + (.25 * var(--pulse-intensity))));
      text-shadow: 0 1px 12px rgba(3, 26, 22, .78), 0 0 14px rgba(255, 216, 107, calc(.30 + (.30 * var(--pulse-intensity)))), 0 0 22px rgba(255, 255, 255, calc(.10 * var(--pulse-intensity)));
      overflow: hidden;
      transition: color 1.15s cubic-bezier(.16, 1, .3, 1), border-color 1.15s cubic-bezier(.16, 1, .3, 1), background 1.15s cubic-bezier(.16, 1, .3, 1), box-shadow 1.15s cubic-bezier(.16, 1, .3, 1), text-shadow 1.15s cubic-bezier(.16, 1, .3, 1), filter 1.15s cubic-bezier(.16, 1, .3, 1);
    }

    .timeline-item time::before {
      content: '';
      position: absolute;
      z-index: 0;
      inset: -35%;
      background: conic-gradient(from 0deg, transparent 0 55%, rgba(255, 216, 107, .38) 62%, transparent 72% 100%);
      animation: timelineOrbit 5.8s linear infinite;
      opacity: calc(.38 + (.42 * var(--pulse-intensity)));
      transition: opacity 1.15s cubic-bezier(.16, 1, .3, 1);
    }

    .timeline-item time span {
      position: relative;
      z-index: 3;
      max-width: 72px;
      text-align: center;
    }

    .timeline-item time::after {
      content: '';
      position: absolute;
      z-index: 1;
      inset: 7px;
      border-radius: inherit;
      border: 1px solid rgba(255, 255, 255, .12);
      background: radial-gradient(circle at 50% 76%, rgba(255, 216, 107, calc(.18 + (.52 * var(--pulse-intensity)))), rgba(255, 216, 107, calc(.06 + (.24 * var(--pulse-intensity)))) 36%, rgba(3, 26, 22, calc(.48 - (.18 * var(--pulse-intensity)))) 78%), rgba(3, 26, 22, calc(.34 - (.14 * var(--pulse-intensity))));
      backdrop-filter: blur(12px) saturate(calc(1.25 + (.28 * var(--pulse-intensity))));
      -webkit-backdrop-filter: blur(12px) saturate(calc(1.25 + (.28 * var(--pulse-intensity))));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(.13 + (.12 * var(--pulse-intensity)))), inset 0 -16px 30px rgba(255, 216, 107, calc(.05 + (.18 * var(--pulse-intensity))));
      transition: background 1.15s cubic-bezier(.16, 1, .3, 1), border-color 1.15s cubic-bezier(.16, 1, .3, 1), box-shadow 1.15s cubic-bezier(.16, 1, .3, 1);
    }

    .timeline-item.is-pulse-lit time span {
      color: #fff;
    }



    .timeline-copy {
      grid-column: 3;
      position: relative;
      direction: rtl;
      text-align: right;
      width: min(100%, 430px);
      padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 30px);
      border-radius: 32px;
      background: linear-gradient(145deg, rgba(255, 252, 246, .070), rgba(255, 252, 246, .025));
      border: 1px solid rgba(255, 216, 107, .13);
      box-shadow: 0 18px 60px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .07);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      overflow: hidden;
    }

    .timeline-item:nth-child(even) .timeline-copy {
      grid-column: 1;
      justify-self: end;
      text-align: right;
      direction: rtl;
    }

    .timeline-copy::before {
      content: '';
      position: absolute;
      top: 50%;
      width: clamp(20px, 3vw, 38px);
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 216, 107, .56), rgba(255, 216, 107, 0));
      transform: translateY(-50%);
      pointer-events: none;
    }

    .timeline-item:nth-child(odd) .timeline-copy::before {
      right: calc(-1 * clamp(20px, 3vw, 38px));
      background: linear-gradient(90deg, rgba(255, 216, 107, 0), rgba(255, 216, 107, .56));
    }

    .timeline-item:nth-child(even) .timeline-copy::before {
      left: calc(-1 * clamp(20px, 3vw, 38px));
    }

    .timeline-copy::after {
      content: '';
      position: absolute;
      inset: -10%;
      background: radial-gradient(circle at var(--card-light-x, 50%) var(--card-light-y, 50%), rgba(255, 216, 107, calc(.14 + (.52 * var(--card-light-strength)))) 0%, rgba(255, 216, 107, calc(.06 + (.30 * var(--card-light-strength)))) 18%, rgba(214, 168, 79, calc(.025 + (.15 * var(--card-light-strength)))) 38%, transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 46%);
      opacity: 0;
      transition: opacity 1.05s cubic-bezier(.16, 1, .3, 1), filter 1.05s cubic-bezier(.16, 1, .3, 1);
      pointer-events: none;
      filter: blur(calc(20px + (10px * var(--card-light-strength))));
      transform: translateZ(0);
    }

    .timeline-item.is-visible .timeline-copy::after,
    .timeline-item:hover .timeline-copy::after {
      opacity: calc(.20 + (.78 * var(--card-light-strength)));
    }

    .timeline-item.is-pulse-lit .timeline-copy::after {
      opacity: calc(.28 + (.72 * var(--card-light-strength)));
    }

    .timeline-copy strong {
      position: relative;
      z-index: 2;
      display: block;
      direction: rtl;
      text-align: right;
      font-size: clamp(18px, 1.8vw, 25px);
      line-height: 1.55;
      letter-spacing: -.025em;
      color: var(--warm-white);
    }

    .timeline-copy p {
      position: relative;
      z-index: 2;
      margin: 8px 0 0;
      direction: rtl;
      color: rgba(255, 252, 246, .66);
      line-height: 1.95;
      font-size: clamp(12.5px, 1.1vw, 14px);
      text-align: justify;
    }

    .timeline-actions {
      position: relative;
      z-index: 3;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }

    .timeline-actions a {
      text-decoration: none;
      border-radius: 999px;
      padding: 13px 20px;
      font-size: 13px;
      font-weight: 820;
      transition: transform .32s cubic-bezier(.22, 1, .36, 1), box-shadow .32s ease, background .32s ease, color .32s ease;
    }

    .timeline-actions a:first-child {
      color: #12382f;
      background: linear-gradient(135deg, #fff0a6, #FFD86B 42%, #D6A84F);
      box-shadow: 0 18px 44px rgba(214, 168, 79, .24), inset 0 1px 0 rgba(255, 255, 255, .42);
    }

    .timeline-actions a + a {
      color: rgba(255, 252, 246, .88);
      background: rgba(255, 252, 246, .070);
      border: 1px solid rgba(255, 255, 255, .13);
    }

    .timeline-actions a:hover {
      transform: translateY(-2px);
    }

    .timeline-item.timeline-contact {
      --contact-glow: calc(.36 + (.64 * var(--pulse-intensity)));
      min-height: 188px;
    }

    .timeline-item.timeline-contact time {
      color: #fff;
      border-color: rgba(255, 216, 107, calc(.52 + (.40 * var(--pulse-intensity))));
      background: linear-gradient(145deg, rgba(255, 252, 246, .20), rgba(255, 216, 107, calc(.08 + (.22 * var(--pulse-intensity))))), rgba(3, 26, 22, .42);
      box-shadow: 0 0 0 9px rgba(3, 26, 22, .56), 0 0 46px rgba(255, 216, 107, calc(.20 + (.52 * var(--pulse-intensity)))), 0 0 120px rgba(214, 168, 79, calc(.12 + (.42 * var(--pulse-intensity)))), inset 0 1px 0 rgba(255, 255, 255, .28);
    }

    .timeline-item.timeline-contact .timeline-copy {
      width: min(100%, 520px);
      border-color: rgba(255, 216, 107, calc(.30 + (.36 * var(--pulse-intensity))));
      background: linear-gradient(145deg, rgba(255, 216, 107, .135), rgba(255, 252, 246, .050) 42%, rgba(15, 76, 58, .16)), rgba(3, 26, 22, .30);
      box-shadow: 0 24px 86px rgba(0, 0, 0, .24), 0 0 64px rgba(214, 168, 79, calc(.10 + (.24 * var(--pulse-intensity)))), inset 0 1px 0 rgba(255, 255, 255, .13);
    }

    .timeline-item.timeline-contact .timeline-copy::after {
      background: radial-gradient(circle at var(--card-light-x, 50%) var(--card-light-y, 50%), rgba(255, 235, 146, calc(.36 + (.48 * var(--card-light-strength)))) 0%, rgba(255, 216, 107, calc(.22 + (.34 * var(--card-light-strength)))) 18%, rgba(214, 168, 79, calc(.09 + (.20 * var(--card-light-strength)))) 42%, transparent 73%), radial-gradient(circle at 78% 18%, rgba(255, 252, 246, .075), transparent 38%);
      opacity: calc(.30 + (.66 * var(--card-light-strength)));
      filter: blur(calc(24px + (14px * var(--card-light-strength))));
    }

    .timeline-item.timeline-contact .timeline-copy strong {
      font-size: clamp(24px, 3.2vw, 42px);
      line-height: 1.25;
      color: #fff;
      text-shadow: 0 0 24px rgba(255, 216, 107, .16);
    }

    .timeline-item.timeline-contact .timeline-copy p {
      color: rgba(255, 252, 246, .78);
      font-size: clamp(13.5px, 1.2vw, 15px);
    }

    .timeline-pulse {
      position: absolute;
      z-index: 1;
      left: 50%;
      top: var(--pulse-y);
      width: 13px;
      height: 13px;
      border-radius: 999px;
      background: var(--gold-light);
      box-shadow: 0 0 0 7px rgba(255, 216, 107, .09), 0 0 28px rgba(255, 216, 107, .78);
      transform: translate(-50%, -50%);
      transition: top .08s linear;
      pointer-events: none;
    }

    .timeline-pulse::after {
      content: '';
      position: absolute;
      inset: -12px;
      border-radius: inherit;
      border: 1px solid rgba(255, 216, 107, .28);
      animation: timelinePulse 1.9s ease-out infinite;
    }

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

    @keyframes timelinePulse {
      0% { transform: scale(.45); opacity: .85; }
      100% { transform: scale(1.55); opacity: 0; }
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr .85fr;
      gap: 16px;
      align-items: stretch
    }

    .contact-card-big {
      padding: clamp(24px, 4vw, 44px);
      border-radius: 40px;
      border: 1px solid rgba(255, 255, 255, .10);
      background: rgba(255, 252, 246, .055)
    }

    .contact-card-big h2 {
      margin: 0;
      font-size: clamp(32px, 4.3vw, 62px);
      line-height: 1.1;
      letter-spacing: -.055em
    }

    .contact-card-big p {
      margin: 18px 0 0;
      color: rgba(255, 252, 246, .70);
      line-height: 2.05;
      max-width: 620px
    }

    .contact-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px
    }

    .contact-buttons a {
      text-decoration: none;
      padding: 14px 20px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 14px
    }

    .contact-buttons a:first-child {
      color: #12382f;
      background: linear-gradient(135deg, #FFD86B, #D6A84F);
      box-shadow: 0 18px 40px rgba(214, 168, 79, .20)
    }

    .contact-buttons a+a {
      color: rgba(255, 252, 246, .82);
      background: rgba(255, 252, 246, .055);
      border: 1px solid rgba(255, 255, 255, .12)
    }

    .contact-meta {
      display: grid;
      gap: 12px
    }

    .meta-box {
      padding: 20px;
      border-radius: 30px;
      background: rgba(255, 252, 246, .055);
      border: 1px solid rgba(255, 255, 255, .10)
    }

    .meta-box span {
      display: block;
      color: rgba(255, 216, 107, .88);
      font-size: 12px;
      margin-bottom: 8px
    }

    .meta-box strong {
      font-size: 18px;
      line-height: 1.7
    }

    .footer {
      padding: 34px clamp(18px, 4vw, 64px) 50px;
      color: rgba(255, 252, 246, .55);
      text-align: center;
      font-size: 12px
    }

    .reveal {
      opacity: 0;
      transform: translateY(28px);
      filter: blur(10px);
      transition: opacity .65s ease, transform .65s ease, filter .65s ease
    }

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

    .cursor-glow {
      position: fixed;
      z-index: 0;
      left: 0;
      top: 0;
      width: 240px;
      height: 240px;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle, rgba(255, 216, 107, .16), rgba(15, 76, 58, .10) 36%, transparent 70%);
      filter: blur(18px);
      transform: translate3d(-999px, -999px, 0);
      mix-blend-mode: screen
    }

    .progress {
      position: fixed;
      z-index: 100;
      top: 0;
      right: 0;
      width: 100%;
      height: 3px;
      background: rgba(255, 216, 107, .08)
    }

    .progress span {
      display: block;
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, #D6A84F, #FFD86B);
      box-shadow: 0 0 18px rgba(255, 216, 107, .55)
    }

    @media(max-width:920px) {

      .hero-grid,
      .about-grid,
      .contact-grid {
        grid-template-columns: 1fr
      }

      .portrait-wrap {
        min-height: 440px
      }

      .metric-row,
      .capability-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .process-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .section-head,
      .portfolio-intro {
        display: block
      }

      .section-head p,
      .portfolio-intro p {
        margin-top: 14px
      }

      .topbar {
        width: min(94vw, 720px)
      }

      .pill-link.hide-mobile {
        display: none
      }
    }

    @media(max-width:720px) {
      :root {
        --float-menu-space: 72px
      }

      .section {
        padding: 78px 14px
      }

      .hero {
        padding-top: 110px
      }

      .topbar {
        top: max(10px, env(safe-area-inset-top));
        padding: 7px
      }

      .brand-mark {
        padding-inline: 4px 8px
      }

      .brand-mark img {
        width: 34px;
        height: 34px
      }

      .brand-mark b {
        font-size: 12px
      }

      .brand-mark small {
        display: none
      }

      .pill-link {
        padding: 10px 11px;
        font-size: 11px
      }

      .hero-grid {
        gap: 16px
      }

      .hero-lead {
        text-align: justify;
        line-height: 2
      }

      .metric-row {
        grid-template-columns: repeat(2, 1fr)
      }

      .portrait-wrap {
        min-height: 370px
      }

      .portrait-card {
        width: min(285px, 74vw)
      }

      .signal-ring {
        inset: 7%
      }

      .floating-note {
        min-width: 128px;
        padding: 10px 12px
      }

      .note-a {
        right: 0;
        top: 13%
      }

      .note-b {
        left: 0;
        bottom: 16%
      }

      .note-c {
        display: none
      }

      .panel-inner {
        padding: 22px
      }

      .about-grid,
      .capability-grid,
      .process-grid {
        grid-template-columns: 1fr
      }

      .portfolio-board {
        height: 560px;
        min-height: 0;
        border-radius: 28px
      }

      .portfolio-track {
        gap: 8px;
        padding: 8px
      }

      .mosaic-page {
        flex-basis: calc(100vw - 40px);
        gap: 8px
      }

      .portfolio-tile {
        border-radius: 18px
      }

      .tile-short {
        inset-inline-start: 10px;
        bottom: 10px;
        font-size: 11.5px;
        padding: 7px 9px
      }

      .tile-info {
        inset: 14px;
        opacity: 1;
        filter: blur(0);
        transform: none;
        justify-content: flex-end
      }

      .tile-info strong {
        font-size: 17px
      }

      .tile-info small {
        font-size: 11px;
        line-height: 1.6
      }

      .portfolio-nav {
        width: 42px;
        height: 42px
      }

      .contact-buttons {
        justify-content: center
      }

      .contact-card-big {
        text-align: center
      }

      .footer {
        padding-bottom: 34px
      }
    }

    @media(max-width:380px) {
      .metric span {
        font-size: 11px
      }

      .portrait-wrap {
        min-height: 330px
      }

      .floating-note {
        display: none
      }

      .portfolio-board {
        height: 520px
      }

      .section-head h2,
      .portfolio-intro h2 {
        font-size: 32px
      }
    }
  

    /* === Layout refinement: full-screen sections, no nested-card frame, floating headers === */
    html {
      scroll-snap-type: y proximity;
    }

    .section {
      min-height: calc(var(--vh) * 100);
      display: flex;
      flex-direction: column;
      justify-content: center;
      scroll-snap-align: start;
      padding-block: clamp(96px, 10vw, 150px);
    }

    .hero {
      padding-top: max(130px, clamp(96px, 10vw, 150px));
    }

    .panel {
      width: min(1180px, 100%);
      border: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-radius: 0;
      overflow: visible;
    }

    .panel::before,
    .panel::after {
      display: none;
    }

    .panel-inner {
      padding: 0;
    }

    .section-head,
    .portfolio-intro {
      width: min(1180px, 100%);
      margin-inline: auto;
      margin-bottom: clamp(22px, 3.2vw, 42px);
      padding-inline: clamp(4px, 1vw, 10px);
    }

    .section-head h2,
    .portfolio-intro h2 {
      text-shadow: 0 0 34px rgba(255, 216, 107, .16);
    }

    .section-head p,
    .portfolio-intro p {
      color: rgba(255, 252, 246, .70);
    }

    .story-card,
    .glass-card,
    .capability,
    .process-step,
    .contact-card-big,
    .meta-box,
    .metric {
      background: linear-gradient(145deg, rgba(255, 252, 246, .095), rgba(255, 252, 246, .045));
      border: 1px solid rgba(255, 216, 107, .14);
      box-shadow: 0 22px 70px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .09);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .portfolio-board {
      height: min(720px, 70vh);
    }

    .floating-note {
      --float-x: 0px;
      --float-y: 0px;
      --float-r: 0deg;
      transform: translate3d(var(--float-x), var(--float-y), 0) rotate(var(--float-r));
      transition: transform .85s cubic-bezier(.22, 1, .36, 1), opacity .45s ease;
      will-change: transform;
    }

    .note-a {
      --float-depth: .9;
    }

    .note-b {
      --float-depth: 1.25;
    }

    .note-c {
      --float-depth: .7;
    }

    @media(max-width:920px) {
      html {
        scroll-snap-type: none;
      }

      .section {
        min-height: auto;
        padding-block: 86px;
      }

      .hero {
        min-height: calc(var(--vh) * 100);
        padding-top: 112px;
      }
    }

    @media(max-width:720px) {
      .section {
        padding-block: 78px;
      }

      .section-head,
      .portfolio-intro {
        margin-bottom: 20px;
      }

      .portfolio-board {
        height: min(640px, 76vh);
      }
    }


    @media(max-width:920px) {
      .timeline {
        max-width: 760px;
        padding-inline-start: clamp(18px, 4vw, 28px);
      }

      .timeline::before,
      .timeline::after,
      .timeline-pulse {
        left: auto;
        right: clamp(27px, 5vw, 43px);
        transform: translateX(50%);
      }

      .timeline-pulse {
        transform: translate(50%, -50%);
      }

      .timeline-item,
      .timeline-item:nth-child(even) {
        grid-template-columns: clamp(58px, 10vw, 82px) minmax(0, 1fr);
        gap: clamp(12px, 3vw, 18px);
        min-height: 118px;
      }

      .timeline-item time,
      .timeline-item:nth-child(even) time {
        grid-column: 1;
      }

      .timeline-copy,
      .timeline-item:nth-child(even) .timeline-copy {
        grid-column: 2;
        justify-self: stretch;
        width: 100%;
        text-align: right;
      }

      .timeline-copy::before,
      .timeline-item:nth-child(even) .timeline-copy::before,
      .timeline-item:nth-child(odd) .timeline-copy::before {
        left: auto;
        right: calc(-1 * clamp(18px, 3vw, 28px));
        width: clamp(18px, 3vw, 28px);
        background: linear-gradient(90deg, rgba(255, 216, 107, 0), rgba(255, 216, 107, .54));
      }
    }

    @media(max-width:720px) {
      .timeline {
        gap: 18px;
        padding-top: 4px;
        padding-inline-start: 0;
      }

      .timeline::before,
      .timeline::after,
      .timeline-pulse {
        right: 28px;
      }

      .timeline-item,
      .timeline-item:nth-child(even) {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 12px;
        min-height: 0;
      }

      .timeline-item time {
        width: 56px;
        font-size: 9.2px;
        font-weight: 660;
        letter-spacing: -.01em;
        line-height: 1.55;
        box-shadow: 0 0 0 6px rgba(3, 26, 22, calc(.68 - (.04 * var(--pulse-intensity)))), 0 0 24px rgba(255, 216, 107, calc(.16 + (.46 * var(--pulse-intensity)))), 0 0 70px rgba(214, 168, 79, calc(.04 + (.32 * var(--pulse-intensity)))), inset 0 1px 0 rgba(255, 255, 255, calc(.12 + (.16 * var(--pulse-intensity))));
      }

      .timeline-copy {
        padding: 16px 17px;
        border-radius: 24px;
      }

      .timeline-copy strong {
        font-size: 17px;
      }

      .timeline-copy p {
        font-size: 12.5px;
        line-height: 1.85;
      }
    }

    @media(prefers-reduced-motion: reduce) {
      .timeline::after,
      .timeline-pulse,
      .timeline-item,
      .timeline-item time::before,
      .timeline-pulse::after {
        animation: none !important;
        transition: none !important;
      }

      .timeline-item {
        opacity: 1;
        transform: none;
        filter: none;
      }
    }



    /* === Method path full-bleed viewport refinement === */
    #method {
      overflow: visible;
      padding-inline: 0;
    }

    #method .panel,
    #method .panel-inner {
      overflow: visible;
    }

    .method-enhanced .method-stage {
      --method-content-pad: clamp(18px, 4vw, 64px);
      width: 100vw;
      max-width: 100vw;
      margin-inline: calc(50% - 50vw);
      overflow: visible;
    }

    .method-enhanced .method-viewport {
      width: 100vw;
      max-width: 100vw;
      border-radius: 0;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-padding-inline: var(--method-content-pad);
    }

    .method-enhanced .method-controls {
      inset-inline: var(--method-content-pad);
    }

    .method-enhanced .method-track {
      min-width: 100vw;
    }

    @media(max-width:920px) {
      .method-enhanced .method-stage { --method-content-pad: clamp(18px, 6vw, 42px); }
      .method-enhanced .method-viewport { scroll-padding-inline: var(--method-content-pad); }
    }


    /* === Method snap stability fix === */
    .method-enhanced .method-viewport {
      scroll-snap-type: none !important;
      scroll-padding-inline: 0 !important;
    }

    .method-enhanced .method-snap-point {
      scroll-snap-align: none !important;
      scroll-snap-stop: normal !important;
    }


    /* === Method edge-lock: stop horizontal overscroll/bounce at both ends === */
    .method-enhanced .method-viewport {
      overscroll-behavior-x: none !important;
      overscroll-behavior-y: auto !important;
      scrollbar-width: none !important;
    }

    .method-enhanced .method-viewport::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
    }