/* Preflight safety net — restore base behaviors our existing CSS depends on */
    body { background: #050509; color: #FFFFFF; font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; letter-spacing: -0.03em; }
    button { background: transparent; color: inherit; font: inherit; cursor: pointer; }
    a { color: inherit; text-decoration: none; }
    img, video { display: block; max-width: 100%; height: auto; }
    /* Lists used as bullet lists keep their markers via explicit class */
    ul.contact-list, ul.service-list, ul.policy-list { list-style: none; padding-left: 0; margin: 0; }
  
    /* Restore Service Type card layout + Contact Point sizing */
    .service-type-section .service-card-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 28px !important;
      margin-top: 62px !important;
      align-items: stretch !important;
    }

    .service-type-section .service-card {
      display: block !important;
      position: relative !important;
      min-width: 0 !important;
      width: 100% !important;
      border-radius: 34px !important;
      overflow: hidden !important;
    }

    .service-type-section .service-visual {
      position: relative !important;
      z-index: 2 !important;
      width: auto !important;
      height: 300px !important;
      margin: 18px 18px 0 !important;
      border-radius: 26px !important;
      overflow: hidden !important;
    }

    .service-type-section .service-visual img {
      display: block !important;
      width: 100% !important;
      max-width: none !important;
      height: 100% !important;
      object-fit: cover !important;
    }

    .service-type-section .service-card-body {
      display: block !important;
      position: relative !important;
      z-index: 2 !important;
      padding: 34px 36px 36px !important;
    }

    .service-type-section .service-title {
      margin: 18px 0 0 !important;
    }

    .service-type-section .service-desc {
      margin: 16px 0 0 !important;
    }

    .service-type-section .service-list {
      display: grid !important;
      gap: 14px !important;
      margin: 28px 0 14px !important;
      padding: 0 !important;
      list-style: none !important;
    }

    .service-type-section .service-link {
      margin-top: 34px !important;
    }

    .contact-point-card .contact-side-kicker {
      margin-bottom: 14px !important;
      font-size: 13px !important;
      letter-spacing: .16em !important;
    }

    .contact-point-card h2 {
      max-width: 360px !important;
      font-size: clamp(25px, 2.1vw, 34px) !important;
      line-height: 1.24 !important;
      letter-spacing: -0.052em !important;
    }

    .contact-point-card .contact-point-list {
      gap: 20px !important;
      margin-top: 26px !important;
    }

    .contact-point-card .contact-point-item {
      grid-template-columns: 50px 1fr !important;
      gap: 18px !important;
      padding-bottom: 22px !important;
    }

    .contact-point-card .contact-point-icon {
      width: 44px !important;
      height: 44px !important;
      font-size: 17px !important;
    }

    .contact-point-card .contact-point-item h3 {
      margin-bottom: 9px !important;
      font-size: 16px !important;
      line-height: 1.25 !important;
    }

    .contact-point-card .contact-point-item strong {
      font-size: 19px !important;
      line-height: 1.25 !important;
    }

    .contact-point-card .contact-point-item p,
    .contact-point-card .contact-point-link {
      font-size: 14px !important;
      line-height: 1.55 !important;
    }

    @media (max-width: 980px) {
      .service-type-section .service-card-grid {
        grid-template-columns: 1fr !important;
      }

      .service-type-section .service-visual {
        height: 260px !important;
      }
    }

    @media (max-width: 640px) {
      .service-type-section .service-card-grid {
        margin-top: 42px !important;
        gap: 20px !important;
      }

      .service-type-section .service-card {
        border-radius: 26px !important;
      }

      .service-type-section .service-visual {
        height: 210px !important;
        margin: 14px 14px 0 !important;
        border-radius: 20px !important;
      }

      .service-type-section .service-card-body {
        padding: 26px 24px 28px !important;
      }

      .contact-point-card .contact-point-list {
        gap: 18px !important;
      }
    }

:root {
      --bg-black: #050509;
      --bg-purple-black: #0B0714;
      --card-dark: #12101C;
      --primary-violet: #7C3AED;
      --neon-purple: #B15CFF;
      --cyber-blue: #3B82F6;
      --pink-accent: #FF4FA3;
      --text-white: #FFFFFF;
      --text-sub: #B9B4C7;
      --border: #2A223A;
      --gradient-main: linear-gradient(90deg, #7C3AED 0%, #A855F7 48%, #FF4FA3 100%);
      --button-gradient: linear-gradient(90deg, #8B5CF6 0%, #A855F7 48%, #F553A8 100%);
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      min-height: 100%;
      background: var(--bg-black);
      color: var(--text-white);
      font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
      letter-spacing: -0.03em;
    }

    body { overflow-x: hidden; }


    .site-header {
      position: fixed;
      top: 22px;
      left: 0;
      right: 0;
      z-index: 20;
      padding: 0 24px;
      pointer-events: none;
    }

    .nav-shell {
      width: min(1120px, 100%);
      height: 76px;
      margin: 0 auto;
      padding: 0 14px 0 24px;
      display: grid;
      grid-template-columns: 240px 1fr 142px;
      align-items: center;
      gap: 34px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 999px;
      background: rgba(12, 10, 20, .68);
      box-shadow:
        0 18px 60px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter: blur(22px);
      pointer-events: auto;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      width: 220px;
      color: #fff;
      text-decoration: none;
    }

    .brand-logo {
      display: block;
      width: 100%;
      height: auto;
      max-height: 34px;
      object-fit: contain;
    }

    .nav-links {
      justify-self: center;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(255,255,255,.06);
    }

    .nav-links a {
      display: inline-flex;
      align-items: center;
      height: 44px;
      padding: 0 24px;
      border-radius: 999px;
      color: #FFFFFF;
      text-decoration: none;
      font-size: 16px;
      font-weight: 850;
      letter-spacing: -0.025em;
      transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
    }





    .btn-secondary {
      position: relative;
      z-index: 0;
      border: 1px solid rgba(255,255,255,.16);
      color: #FFFFFF;
      background:
        linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.025)),
        rgba(12,10,20,.62);
      box-shadow:
        0 14px 34px rgba(0,0,0,.20),
        inset 0 0 0 1px rgba(255,255,255,.045);
      backdrop-filter: blur(14px);
      transition:
        color .24s ease,
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease;
    }

    .btn-secondary::before {
      content: "";
      position: absolute;
      inset: -3px;
      z-index: -1;
      border-radius: inherit;
      border: 1px solid rgba(255,79,163,.0);
      opacity: 0;
      pointer-events: none;
      transition: opacity .28s ease, border-color .28s ease, box-shadow .28s ease;
    }

    .btn-secondary:hover {
      color: #CFC5FF;
      border-color: rgba(255,79,163,.72);
      background:
        linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.025)),
        rgba(12,10,20,.62);
      box-shadow:
        0 18px 44px rgba(0,0,0,.28),
        0 0 0 1px rgba(255,79,163,.28) inset,
        0 0 16px rgba(255,79,163,.26),
        0 0 30px rgba(155,92,255,.12);
    }

    .btn-secondary:hover::before {
      opacity: 1;
      border-color: rgba(255,79,163,.45);
      box-shadow:
        0 0 16px rgba(255,79,163,.24),
        0 0 32px rgba(155,92,255,.10);
    }

    .home-hero .eyebrow {
      color: #F5EFFF;
    }

    .home-hero .section-label {
      color: #CFC5FF;
      font-size: clamp(22px, 2.2vw, 31px);
      line-height: 1.36;
    }

    .nav-links a:hover {
      color: #FF4FA3;
      background: rgba(255,255,255,.08);
      box-shadow: none;
      transform: translateY(-1px);
    }

    .nav-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 56px;
      padding: 0 32px;
      border-radius: 999px;
      color: #fff;
      text-decoration: none;
      font-size: 18px;
      font-weight: 900;
      background: linear-gradient(90deg, #8B5CF6 0%, #A855F7 48%, #F553A8 100%);
      box-shadow: 0 12px 30px rgba(168,85,247,.22);
    }


    .nav-button:hover {
      transform: translateY(-2px);
      box-shadow:
        0 18px 42px rgba(245,83,168,.28),
        0 0 0 1px rgba(255,255,255,.14) inset;
      filter: brightness(1.08);
    }


    .cellbig-hero {
      isolation: isolate;
      position: relative;
      min-height: 100vh;
      padding: 132px 24px 72px;
      display: flex;
      align-items: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 20%, rgba(124, 58, 237, 0.16), transparent 32%),
        radial-gradient(circle at 84% 22%, rgba(255, 79, 163, 0.10), transparent 30%),
        radial-gradient(circle at 66% 76%, rgba(59, 130, 246, 0.10), transparent 36%),
        linear-gradient(180deg, var(--bg-black) 0%, var(--bg-purple-black) 58%, #040308 100%);
    }

    .hero-bg-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .9;
      filter: brightness(1.05) contrast(1.04) saturate(1.12);
      z-index: 0;
      pointer-events: none;
    }

    .hero-video-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(90deg, rgba(5,5,9,.86) 0%, rgba(5,5,9,.68) 22%, rgba(5,5,9,.28) 48%, rgba(5,5,9,.08) 76%, rgba(5,5,9,.18) 100%),
        linear-gradient(180deg, rgba(5,5,9,.02) 0%, rgba(11,7,20,.20) 78%, rgba(5,5,9,.70) 100%),
        radial-gradient(circle at 18% 20%, rgba(124,58,237,.24), transparent 34%),
        radial-gradient(circle at 84% 22%, rgba(255,79,163,.13), transparent 30%);
      pointer-events: none;
    }

    .cellbig-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: radial-gradient(circle at 50% 42%, black 0%, transparent 72%);
      opacity: .18;
      pointer-events: none;
      z-index: 1;
    }

    .cellbig-hero::after {
      content: "";
      position: absolute;
      width: 880px;
      height: 880px;
      right: -360px;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 50%;
      background: conic-gradient(from 180deg, rgba(124,58,237,.4), rgba(59,130,246,.36), rgba(255,79,163,.28), rgba(124,58,237,.4));
      filter: blur(80px);
      opacity: .34;
      pointer-events: none;
      z-index: 1;
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      width: min(1180px, 100%);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      text-align: left;
    }

    .section-01-content { max-width: 690px; }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 22px;
      padding: 9px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.055);
      color: #E8DBFF;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
      backdrop-filter: blur(14px);
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--pink-accent);
      box-shadow: 0 0 18px rgba(255,79,163,.86);
    }

    h1 {
      margin: 0;
      font-size: clamp(48px, 6vw, 84px);
      line-height: 1.05;
      font-weight: 900;
      letter-spacing: -0.075em;
    }

    .title-gradient {
      display: block;
      margin-top: 6px;
      color: #FFFFFF;
    }

    .section-label {
      margin: 26px 0 18px;
      color: #CFC5FF;
      font-size: clamp(22px, 2.2vw, 31px);
      line-height: 1.36;
      font-weight: 800;
      letter-spacing: -0.045em;
      text-shadow: 0 0 22px rgba(255,255,255,.10);
    }

    .hero-copy {
      margin: 0;
      max-width: 660px;
      color: var(--text-sub);
      font-size: 18px;
      line-height: 1.78;
      font-weight: 500;
    }

    .button-row {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 14px;
      margin-top: 38px;
    }

    .btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 228px;
      height: 72px;
      padding: 0 48px;
      border-radius: 999px;
      color: #FFFFFF;
      font-size: 24px;
      font-weight: 900;
      text-decoration: none;
      overflow: hidden;
      transition: transform .24s ease, box-shadow .24s ease;
    }

    .btn-primary {
      background: var(--button-gradient);
      box-shadow:
        0 14px 34px rgba(168,85,247,.22),
        0 0 0 1px rgba(255,255,255,.10) inset;
    }

    .btn-primary::after {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 48%);
      pointer-events: none;
    }

    .btn:hover {
      transform: translateY(-3px);
      box-shadow:
        0 18px 44px rgba(168,85,247,.30),
        0 0 0 1px rgba(255,255,255,.14) inset;
    }

    .hero-visual {
      position: relative;
      min-height: 560px;
      border-radius: 38px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
        radial-gradient(circle at 30% 20%, rgba(124,58,237,.38), transparent 34%),
        radial-gradient(circle at 78% 72%, rgba(59,130,246,.28), transparent 38%),
        rgba(18,16,28,.62);
      box-shadow:
        0 30px 100px rgba(0,0,0,.48),
        0 0 80px rgba(124,58,237,.12);
      backdrop-filter: blur(18px);
      overflow: hidden;
    }

    .hero-visual::before {
      content: "";
      position: absolute;
      inset: 24px;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.09);
      background:
        linear-gradient(90deg, transparent 0 49%, rgba(255,79,163,.3) 50%, transparent 51% 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 76px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 76px);
      opacity: .76;
    }

    .motion-card {
      position: absolute;
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(5,5,9,.52);
      backdrop-filter: blur(14px);
      box-shadow: 0 20px 70px rgba(0,0,0,.34);
    }

    .main-preview {
      left: 50%;
      top: 48%;
      width: 290px;
      height: 214px;
      transform: translate(-50%, -50%);
      overflow: hidden;
    }

    .main-preview::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 45%, rgba(255,255,255,.96), transparent 4%),
        radial-gradient(circle at 44% 40%, rgba(177,92,255,.72), transparent 18%),
        radial-gradient(circle at 64% 62%, rgba(59,130,246,.66), transparent 24%),
        linear-gradient(135deg, #0B0714, #17112B 56%, #050509);
    }

    .play {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
    }

    .play::before {
      content: "";
      width: 74px;
      height: 74px;
      border-radius: 50%;
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.26);
      backdrop-filter: blur(12px);
      box-shadow: 0 0 45px rgba(255,79,163,.25);
    }

    .play::after {
      content: "";
      position: absolute;
      width: 28px;
      height: 34px;
      background: #FFFFFF;
      clip-path: polygon(0 0, 100% 50%, 0 100%);
      transform: translateX(4px);
    }

    .floating-a {
      width: 190px;
      height: 116px;
      top: 70px;
      right: 46px;
      padding: 18px;
    }

    .floating-b {
      width: 212px;
      height: 132px;
      left: 38px;
      bottom: 78px;
      padding: 18px;
    }

    .floating-c {
      width: 156px;
      height: 92px;
      right: 54px;
      bottom: 62px;
      padding: 16px;
    }

    .line {
      height: 9px;
      border-radius: 999px;
      background: rgba(255,255,255,.13);
      margin-bottom: 12px;
    }

    .line.short { width: 56%; }
    .line.mid { width: 78%; }
    .line.grad { width: 100%; background: var(--gradient-main); }

    .chip-row {
      display: flex;
      gap: 8px;
      margin-top: 18px;
    }

    .chip {
      width: 38px;
      height: 26px;
      border-radius: 999px;
      background: rgba(255,255,255,.09);
      border: 1px solid rgba(255,255,255,.1);
    }

    .orb {
      position: absolute;
      width: 142px;
      height: 142px;
      top: 84px;
      left: 70px;
      border-radius: 38px;
      transform: rotate(45deg);
      background: var(--gradient-main);
      box-shadow: 0 25px 80px rgba(255,79,163,.28);
      opacity: .88;
    }

    .orb::after {
      content: "";
      position: absolute;
      inset: 42px;
      background: #FFFFFF;
      clip-path: polygon(0 0, 100% 50%, 0 100%);
      transform: rotate(-45deg) translate(5px, 0);
    }

    .visual-label {
      position: absolute;
      left: 32px;
      top: 32px;
      color: rgba(255,255,255,.7);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .visual-badge {
      position: absolute;
      right: 32px;
      top: 32px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      color: #F4E9FF;
      font-size: 12px;
      font-weight: 800;
    }

    .scroll-hint {
      z-index: 2;
      position: absolute;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%);
      color: rgba(255,255,255,.52);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }




    .advantages-section {
      position: relative;
      padding: 118px 24px 90px;
      background:
        radial-gradient(circle at 18% 20%, rgba(124,58,237,.10), transparent 30%),
        radial-gradient(circle at 84% 14%, rgba(255,79,163,.08), transparent 26%),
        linear-gradient(180deg, #050509 0%, #080711 48%, #050509 100%);
      overflow: hidden;
    }

    .advantages-section::before,
    .compare-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
      background-size: 58px 58px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.75), transparent 100%);
      pointer-events: none;
    }

    .compare-section {
      position: relative;
      padding: 42px 24px 128px;
      background:
        radial-gradient(circle at 82% 18%, rgba(59,130,246,.10), transparent 24%),
        linear-gradient(180deg, #050509 0%, #070712 52%, #050509 100%);
      overflow: hidden;
    }

    .section-shell {
      position: relative;
      z-index: 2;
      width: min(1480px, calc(100% - 56px));
      margin: 0 auto;
    }

    .section-intro {
      max-width: 860px;
      margin: 0 auto 56px;
      text-align: center;
    }

    .section-kicker {
      display: inline-block;
      margin: 0 0 16px;
      color: #FF4FA3;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .section-title {
      margin: 0;
      color: #FFFFFF;
      font-size: clamp(34px, 4vw, 52px);
      line-height: 1.16;
      letter-spacing: -0.055em;
      font-weight: 900;
    }

    .section-desc {
      margin: 18px auto 0;
      max-width: 760px;
      color: var(--text-sub);
      font-size: 18px;
      line-height: 1.75;
      font-weight: 500;
    }

    .advantage-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(260px, 1fr));
      gap: clamp(28px, 2.2vw, 44px);
      align-items: start;
      justify-items: center;
    }

    .advantage-item {
      width: 100%;
      max-width: 384px;
      text-align: center;
    }

    .adv-icon {
      position: relative;
      width: 108px;
      height: 108px;
      margin: 0 auto 28px;
      border-radius: 24px;
      background:
        linear-gradient(145deg, rgba(255,79,163,.14), rgba(124,58,237,.10)),
        rgba(14,12,24,.92);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 18px 48px rgba(0,0,0,.24);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .adv-icon:empty::after { content: none; }

    .adv-icon svg {
      width: 76px;
      height: 76px;
      display: block;
      overflow: visible;
    }

    .adv-icon .g-stroke {
      stroke: url(#iconGradient);
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .adv-icon .g-fill {
      fill: url(#iconGradient);
    }

    .adv-icon .g-soft {
      stroke: rgba(255,255,255,.28);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .adv-icon .g-soft-fill {
      fill: rgba(255,255,255,.16);
    }

    .adv-icon .g-glow {
      filter: drop-shadow(0 0 8px rgba(208,101,255,.22));
    }

    /* legacy pseudo-icon styles removed in favor of inline SVG icons */

    .advantage-title {
      margin: 0 0 16px;
      color: #FFFFFF;
      font-size: 26px;
      line-height: 1.32;
      letter-spacing: -0.04em;
      font-weight: 900;
      word-break: keep-all;
    }

    .advantage-copy {
      margin: 0 auto;
      max-width: 384px;
      color: #B9B4C7;
      font-size: 15px;
      line-height: 1.74;
      font-weight: 500;
      letter-spacing: -0.02em;
      word-break: keep-all;
    }

    .advantage-item:nth-child(2) .advantage-copy {
      max-width: 440px;
      font-size: 14px;
    }


    .compare-intro {
      max-width: 1180px;
      margin-bottom: 48px;
    }

    .compare-title {
      white-space: nowrap;
      font-size: clamp(34px, 3.35vw, 48px);
      letter-spacing: -0.055em;
    }


    .compare-card {
      padding: 32px 30px 26px;
    }

    .compare-heading {
      text-align: left;
      margin-bottom: 26px;
    }

    .compare-row {
      grid-template-columns: 150px 1fr;
      gap: 28px;
      align-items: center;
      padding: 20px 0;
    }

    .compare-term {
      text-align: left;
    }

    .compare-text {
      text-align: center;
    }

    .compare-card-featured {
      border-color: rgba(255,79,163,.58);
      background:
        radial-gradient(circle at 88% 12%, rgba(255,79,163,.10), transparent 34%),
        radial-gradient(circle at 10% 92%, rgba(124,58,237,.12), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
        rgba(14,12,24,.88);
      box-shadow:
        0 24px 72px rgba(0,0,0,.24),
        0 0 0 1px rgba(177,92,255,.16) inset,
        0 0 38px rgba(255,79,163,.10);
    }

    .compare-card-featured::before {
      background: radial-gradient(circle, rgba(255,79,163,.18), transparent 72%);
    }

    @media (max-width: 640px) {
      .compare-row {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .compare-heading,
      .compare-term,
      .compare-text {
        text-align: center;
      }
    }


    .compare-card:not(.compare-card-featured) {
      background:
        linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006)),
        rgba(8, 8, 14, .78);
      border-color: rgba(255,255,255,.05);
      box-shadow:
        0 16px 42px rgba(0,0,0,.18),
        0 0 0 1px rgba(255,255,255,.018) inset;
    }

    .compare-card:not(.compare-card-featured)::before {
      opacity: .16;
      background: radial-gradient(circle, rgba(255,255,255,.035), transparent 72%);
    }

    .compare-card:not(.compare-card-featured) .compare-heading {
      color: rgba(255,255,255,.74);
    }

    .compare-card:not(.compare-card-featured) .compare-row {
      border-top-color: rgba(255,255,255,.055);
    }

    .compare-card:not(.compare-card-featured) .compare-term {
      color: rgba(255,255,255,.52);
    }

    .compare-card:not(.compare-card-featured) .compare-text {
      color: rgba(255,255,255,.58);
    }


    .compare-card-featured {
      border-color: rgba(255, 79, 163, .72);
      box-shadow:
        0 24px 72px rgba(0,0,0,.24),
        0 0 0 1px rgba(255, 79, 163, .18) inset,
        0 0 42px rgba(255, 79, 163, .14),
        0 0 64px rgba(124, 58, 237, .08);
    }

    .compare-card-featured .compare-heading {
      color: #CFC5FF;
      text-shadow: 0 0 24px rgba(255, 79, 163, .18);
    }


    /* refined LOOMIX highlight */
    .compare-card-featured {
      position: relative;
      border: 2px solid #FF4FA3;
      border-radius: 28px;
      background:
        radial-gradient(circle at 88% 10%, rgba(255,79,163,.10), transparent 30%),
        radial-gradient(circle at 10% 90%, rgba(139,92,255,.10), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018)),
        rgba(12, 10, 22, .94);
      box-shadow:
        0 24px 72px rgba(0,0,0,.26),
        0 0 0 1px rgba(255,79,163,.14) inset,
        0 0 0 2px rgba(255,79,163,.04),
        0 0 26px rgba(255,79,163,.12);
    }

    .compare-card-featured::before {
      opacity: 1;
      background:
        radial-gradient(circle at 100% 0%, rgba(255,79,163,.16), transparent 34%),
        radial-gradient(circle at 0% 100%, rgba(139,92,255,.12), transparent 36%);
      pointer-events: none;
    }

    .compare-card-featured .compare-heading {
      color: #CFC5FF;
      text-shadow:
        0 0 12px rgba(255,79,163,.14),
        0 0 22px rgba(255,79,163,.08);
    }

    .compare-card-featured .compare-row {
      border-top-color: rgba(255,255,255,.075);
    }

    .compare-card-featured .compare-term {
      color: rgba(255,255,255,.82);
    }

    .compare-card-featured .compare-text {
      color: #A96BFF;
      text-shadow:
        0 0 10px rgba(169,107,255,.10),
        0 0 18px rgba(169,107,255,.06);
      font-weight: 800;
    }


    .compare-card-featured {
      border: 2px solid transparent !important;
      background:
        radial-gradient(circle at 88% 10%, rgba(255,79,163,.10), transparent 30%),
        radial-gradient(circle at 10% 90%, rgba(139,92,255,.10), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
        rgba(14,12,24,.88) padding-box,
        linear-gradient(135deg, #FF2FB3 0%, #FF69C6 42%, #9B5CFF 100%) border-box !important;
      box-shadow:
        0 24px 72px rgba(0,0,0,.24),
        0 0 0 1px rgba(177,92,255,.16) inset,
        0 0 18px rgba(255,47,179,.14),
        0 0 34px rgba(155,92,255,.08) !important;
    }

    .compare-card-featured:hover {
      background:
        radial-gradient(circle at 88% 10%, rgba(255,79,163,.10), transparent 30%),
        radial-gradient(circle at 10% 90%, rgba(139,92,255,.10), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
        rgba(14,12,24,.88) padding-box,
        linear-gradient(135deg, #FF2FB3 0%, #FF69C6 42%, #9B5CFF 100%) border-box !important;
    }


    /* Final refinement: clearer border, softer secondary accent */
    .compare-card-featured {
      position: relative;
      border: 1px solid rgba(255,255,255,.06) !important;
      box-shadow:
        0 22px 56px rgba(0,0,0,.24),
        0 0 0 1px rgba(255,255,255,.03) inset !important;
      overflow: visible;
    }

    .compare-card-featured::after {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: 28px;
      padding: 1.7px;
      background: linear-gradient(
        135deg,
        rgba(255, 56, 171, .96) 0%,
        rgba(255, 111, 190, .90) 42%,
        rgba(181, 154, 255, .82) 100%
      );
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      box-shadow:
        0 0 10px rgba(255, 79, 163, .10),
        0 0 18px rgba(255, 79, 163, .06),
        0 0 22px rgba(181, 154, 255, .05);
      opacity: .98;
    }

    .compare-card-featured .compare-heading {
      color: #CFC5FF;
      text-shadow: 0 0 12px rgba(255,79,163,.10);
    }

    .compare-card-featured .compare-text {
      color: #CFC5FF;
      text-shadow: none;
      font-weight: 780;
    }


    .compare-card-featured {
      position: relative;
      overflow: hidden;
    }

    .compare-card-featured .compare-heading,
    .compare-card-featured .compare-list {
      position: relative;
      z-index: 2;
    }
@media (max-width: 980px) {
      .compare-title {
        white-space: normal;
        font-size: clamp(31px, 5vw, 42px);
      }
    }

    .compare-wrap {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 560px));
      justify-content: center;
      gap: 24px;
      margin-top: 48px;
    }

    .compare-card {
      position: relative;
      padding: 30px 30px 18px;
      border-radius: 30px;
      border: 1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
        rgba(14,12,24,.88);
      box-shadow: 0 24px 72px rgba(0,0,0,.24);
      overflow: hidden;
    }

    .compare-card::before {
      content: "";
      position: absolute;
      top: -60px;
      right: -60px;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(124,58,237,.16), transparent 70%);
      pointer-events: none;
    }

    .compare-heading {
      margin: 0 0 22px;
      color: #FFFFFF;
      font-size: 26px;
      line-height: 1.2;
      font-weight: 900;
      letter-spacing: -0.04em;
    }

    .compare-list {
      display: grid;
      gap: 0;
    }

    .compare-row {
      display: grid;
      grid-template-columns: 160px 1fr;
      gap: 18px;
      padding: 18px 0;
      border-top: 1px solid rgba(255,255,255,.08);
    }

    .compare-row:first-child {
      border-top: 0;
      padding-top: 0;
    }

    .compare-term {
      color: #FFFFFF;
      font-size: 16px;
      line-height: 1.5;
      font-weight: 800;
      letter-spacing: -0.03em;
    }

    .compare-text {
      color: #B9B4C7;
      font-size: 16px;
      line-height: 1.7;
      font-weight: 500;
      letter-spacing: -0.02em;
    }


    .compare-card-featured {
      position: relative;
      overflow: hidden;
    }

    .compare-card-featured .compare-heading,
    .compare-card-featured .compare-list {
      position: relative;
      z-index: 2;
    }

    .compare-accent-graphic {
      position: absolute;
      top: 18px;
      right: 22px;
      width: 96px;
      height: 96px;
      pointer-events: none;
      z-index: 1;
      opacity: .98;
    }

    .sparkle {
      position: absolute;
      display: block;
      background: linear-gradient(180deg, #FF7CC5 0%, #FF4FA3 100%);
      clip-path: polygon(
        50% 0%,
        61% 35%,
        100% 50%,
        61% 65%,
        50% 100%,
        39% 65%,
        0% 50%,
        39% 35%
      );
      filter: drop-shadow(0 0 8px rgba(207, 197, 255, .24));
      box-shadow: 0 0 14px rgba(255,79,163,.14);
    }

    .sparkle-lg {
      right: 2px;
      top: 0;
      width: 38px;
      height: 38px;
    }

    .sparkle-md {
      right: 30px;
      top: 18px;
      width: 16px;
      height: 16px;
      opacity: .9;
    }

    .sparkle-sm {
      right: 10px;
      top: 44px;
      width: 24px;
      height: 24px;
      opacity: .96;
    }

    @media (max-width: 760px) {
      .compare-accent-graphic {
        width: 76px;
        height: 76px;
        top: 16px;
        right: 18px;
      }

      .sparkle-lg {
        width: 30px;
        height: 30px;
      }

      .sparkle-md {
        top: 14px;
        right: 24px;
        width: 13px;
        height: 13px;
      }

      .sparkle-sm {
        top: 34px;
        width: 18px;
        height: 18px;
      }
    }

.sparkle-lg {
        width: 28px;
        height: 28px;
      }

      .sparkle-sm {
        top: 34px;
        width: 18px;
        height: 18px;
      }
    }




    .process-section {
      position: relative;
      padding: 124px 0 142px;
      background:
        radial-gradient(circle at 50% 16%, rgba(255,79,163,.075), transparent 28%),
        radial-gradient(circle at 82% 28%, rgba(207,197,255,.055), transparent 32%),
        linear-gradient(180deg, #050509 0%, #070711 50%, #050509 100%);
      overflow: hidden;
    }

    .process-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
      background-size: 54px 54px;
      opacity: .42;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.70), transparent 95%);
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.70), transparent 95%);
      pointer-events: none;
    }

    .process-inner {
      position: relative;
      z-index: 2;
      width: min(1560px, calc(100% - 56px));
      margin: 0 auto;
    }

    .process-intro {
      text-align: center;
      margin-bottom: 64px;
    }

    .process-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 28px;
      align-items: stretch;
    }

    .process-grid::before {
      content: "";
      position: absolute;
      left: 3%;
      right: 3%;
      top: 50%;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,79,163,.18) 14%,
        rgba(207,197,255,.18) 50%,
        rgba(255,79,163,.16) 86%,
        transparent 100%
      );
      transform: translateY(-50%);
      opacity: .42;
      pointer-events: none;
    }

    .process-flow-line {
      display: none;
    }

    .process-card {
      position: relative;
      min-height: 214px;
      padding: 28px 20px 26px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.13);
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014)),
        rgba(12, 12, 18, .82);
      box-shadow:
        0 22px 58px rgba(0,0,0,.24),
        inset 0 0 0 1px rgba(255,255,255,.018);
      overflow: hidden;
      isolation: isolate;
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
    }

    .process-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(90deg, rgba(255,79,163,.45), rgba(207,197,255,.24), transparent 72%) top left / 100% 1px no-repeat,
        radial-gradient(circle at 50% 36%, rgba(207,197,255,.08), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(207,197,255,.050), transparent 44%);
      pointer-events: none;
      z-index: 0;
    }

    .process-card:hover {
      transform: translateY(-6px) scale(1.025);
      border-color: rgba(255, 126, 197, .30);
      background:
        linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.018)),
        rgba(14, 13, 21, .88);
      box-shadow:
        0 30px 78px rgba(0,0,0,.34),
        0 0 28px rgba(207,197,255,.050),
        inset 0 0 0 1px rgba(255,255,255,.025);
    }

    .process-card:not(:last-child)::after {
      content: "›";
      position: absolute;
      right: -22px;
      top: 50%;
      transform: translate(50%, -50%);
      z-index: 3;
      color: #D8CFFF;
      font-size: 42px;
      line-height: 1;
      font-weight: 300;
      opacity: .76;
      text-shadow:
        0 0 12px rgba(207,197,255,.18),
        0 0 18px rgba(255,79,163,.10);
      pointer-events: none;
    }

    .process-number,
    .process-icon,
    .process-card-title,
    .process-card-desc {
      position: relative;
      z-index: 1;
    }

    .process-number {
      display: block;
      margin: 0 0 18px;
      color: #FF73B8;
      font-size: 31px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: .08em;
      text-shadow: 0 0 14px rgba(255,79,163,.12);
    }


    .process-icon {
      position: relative;
      z-index: 1;
      width: 76px;
      height: 76px;
      margin: 0 auto 22px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .process-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      mix-blend-mode: screen;
    }

    @media (max-width: 640px) {
      .process-icon {
        width: 68px;
        height: 68px;
        margin-bottom: 20px;
      }
    }

    .process-card-title {
      margin: 0;
      color: #FFFFFF;
      font-size: 22px;
      line-height: 1.34;
      font-weight: 900;
      letter-spacing: -0.04em;
      text-align: center;
    }

    .process-card-title::after {
      content: "";
      display: block;
      width: 34px;
      height: 1px;
      margin: 15px auto 0;
      background: linear-gradient(90deg, transparent, #FF73B8, transparent);
      opacity: .78;
    }

    .process-card-desc {
      margin: 14px 0 0;
      color: rgba(255,255,255,.62);
      font-size: 14px;
      line-height: 1.68;
      font-weight: 520;
      letter-spacing: -0.025em;
      text-align: center;
      word-break: keep-all;
    }

    @media (max-width: 1180px) {
      .process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
      }

      .process-grid::before,
      .process-card:not(:last-child)::after {
        display: none;
      }
    }

    @media (max-width: 640px) {
      .process-section {
        padding: 88px 0 102px;
      }

      .process-inner {
        width: min(100% - 28px, 520px);
      }

      .process-intro {
        margin-bottom: 42px;
      }

      .process-grid {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .process-card {
        min-height: auto;
        padding: 25px 22px 25px;
        border-radius: 20px;
      }

      .process-card:not(:last-child)::after {
        display: block;
        right: 26px;
        top: auto;
        bottom: -24px;
        transform: rotate(90deg);
        font-size: 30px;
        opacity: .52;
      }

      .process-number {
        font-size: 26px;
        margin-bottom: 12px;
      }

      .process-card-title {
        font-size: 21px;
      }

      .process-card-desc {
        font-size: 14px;
      }
    }



    .team-section {
      position: relative;
      padding: 124px 0 150px;
      background:
        radial-gradient(circle at 18% 14%, rgba(207,197,255,.050), transparent 30%),
        radial-gradient(circle at 84% 18%, rgba(207,197,255,.045), transparent 32%),
        linear-gradient(180deg, #050509 0%, #070711 52%, #050509 100%);
      overflow: hidden;
    }

    .team-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
      background-size: 58px 58px;
      opacity: .34;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.68), transparent 96%);
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.68), transparent 96%);
      pointer-events: none;
    }

    .team-inner {
      position: relative;
      z-index: 2;
      width: min(1480px, calc(100% - 56px));
      margin: 0 auto;
    }

    .team-intro {
      text-align: center;
      margin-bottom: 62px;
    }

    .team-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px;
    }

    .team-card {
      position: relative;
      min-height: 196px;
      padding: 25px 24px 24px;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.012)),
        rgba(8, 11, 20, .82);
      box-shadow:
        0 18px 42px rgba(0,0,0,.22),
        inset 0 0 0 1px rgba(255,255,255,.012);
      overflow: hidden;
      transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
    }

    .team-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%),
        radial-gradient(circle at 100% 0%, rgba(207,197,255,.04), transparent 36%);
      pointer-events: none;
      opacity: .9;
    }

    .team-card:hover {
      transform: translateY(-6px);
      border-color: rgba(207, 197, 255, .24);
      box-shadow:
        0 26px 56px rgba(0,0,0,.30),
        0 0 24px rgba(207, 197, 255, .060),
        inset 0 0 0 1px rgba(255,255,255,.018);
    }

    .team-profile,
    .team-desc {
      position: relative;
      z-index: 1;
    }

    .team-profile {
      display: block;
      margin-bottom: 16px;
    }

    .team-label {
      display: inline-block;
      margin-top: 10px;
      margin-bottom: 0;
      color: #CFC5FF;
      font-size: 12px;
      line-height: 1.2;
      font-weight: 900;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .team-name {
      margin: 0;
      color: #FFFFFF;
      font-size: 27px;
      line-height: 1.16;
      font-weight: 900;
      letter-spacing: -0.05em;
    }

    .team-desc {
      margin: 12px 0 0;
      color: rgba(255,255,255,.64);
      font-size: 14px;
      line-height: 1.66;
      font-weight: 520;
      letter-spacing: -0.025em;
      word-break: keep-all;
      max-width: 100%;
    }

    @media (max-width: 1180px) {
      .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .team-name {
        font-size: 29px;
      }

      .team-desc {
        font-size: 15px;
      }
    }

    @media (max-width: 760px) {
      .team-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .team-section {
        padding: 88px 0 106px;
      }

      .team-inner {
        width: min(100% - 28px, 520px);
      }

      .team-intro {
        margin-bottom: 42px;
      }

      .team-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .team-card {
        min-height: auto;
        padding: 23px 22px 23px;
        border-radius: 22px;
      }

      .team-label {
        margin-bottom: 12px;
        font-size: 12px;
      }

      .team-name {
        font-size: 30px;
      }

      .team-desc {
        margin-top: 12px;
        font-size: 14px;
        max-width: 100%;
      }
    }


    .final-cta-section {
      position: relative;
      padding: 128px 0 140px;
      background:
        radial-gradient(circle at 50% 12%, rgba(255,79,163,.13), transparent 30%),
        radial-gradient(circle at 50% 82%, rgba(207,197,255,.075), transparent 34%),
        linear-gradient(180deg, #050509 0%, #080711 48%, #050509 100%);
      overflow: hidden;
    }

    .final-cta-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
      background-size: 58px 58px;
      opacity: .34;
      mask-image: radial-gradient(circle at 50% 48%, rgba(0,0,0,.78), transparent 72%);
      -webkit-mask-image: radial-gradient(circle at 50% 48%, rgba(0,0,0,.78), transparent 72%);
      pointer-events: none;
    }

    .final-cta-inner {
      position: relative;
      z-index: 2;
      width: min(1120px, calc(100% - 48px));
      margin: 0 auto;
      padding: 36px 48px 42px;
      text-align: center;
    }

    .final-cta-inner::before {
      content: none;
    }

    .final-cta-inner .section-kicker,
    .final-cta-inner .section-title,
    .final-cta-inner .section-desc,

    .final-cta-inner .section-kicker {
      margin-bottom: 18px;
    }

    .final-cta-inner .section-desc {
      margin-top: 22px;
    }

    .final-cta-button {
      position: relative;
      z-index: 1;
    }

    .final-cta-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 178px;
      height: 58px;
      margin-top: 42px;
      padding: 0 34px;
      border-radius: 999px;
      color: #FFFFFF;
      font-size: 18px;
      line-height: 1;
      font-weight: 850;
      letter-spacing: -0.025em;
      text-decoration: none;
      background: linear-gradient(135deg, #FF4FA3 0%, #9B5CFF 100%);
      box-shadow:
        0 16px 42px rgba(255,79,163,.22),
        inset 0 0 0 1px rgba(255,255,255,.18);
      transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
    }

    .final-cta-button:hover {
      transform: translateY(-3px);
      filter: brightness(1.05);
      box-shadow:
        0 22px 54px rgba(255,79,163,.25),
        0 0 24px rgba(207,197,255,.12),
        inset 0 0 0 1px rgba(255,255,255,.22);
    }

    @media (max-width: 640px) {
      .final-cta-section {
        padding: 90px 0 104px;
      }

      .final-cta-inner {
        width: min(100% - 28px, 520px);
        padding: 24px 20px 30px;
      }


      .final-cta-inner .section-kicker {
        margin-bottom: 14px;
      }

      .final-cta-inner .section-desc {
        margin-top: 18px;
      }

      .final-cta-button {
        height: 54px;
        min-width: 154px;
        margin-top: 34px;
        font-size: 16px;
      }
    }
@keyframes portfolioMarquee {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(calc(-50% - 13px));
      }
    }

    @media (max-width: 980px) {
      .portfolio-track-wrap {
        width: min(1180px, calc(100% - 28px));
      }

      .portfolio-card {
        width: 330px;
      }

      .portfolio-track {
        gap: 20px;
        animation-duration: 30s;
      }
    }

    @media (max-width: 640px) {
      .portfolio-section {
        padding: 92px 0 104px;
      }

      .portfolio-intro {
        margin-bottom: 42px;
      }

      .portfolio-track-wrap {
        width: calc(100% - 16px);
        border-radius: 24px;
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.65) 10%, #000 18%, #000 82%, rgba(0,0,0,.65) 90%, transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.65) 10%, #000 18%, #000 82%, rgba(0,0,0,.65) 90%, transparent 100%);
      }

      .portfolio-card {
        width: 280px;
        border-radius: 22px;
      }

      .portfolio-card-body {
        padding: 17px 18px 19px;
      }

      .portfolio-card-title {
        font-size: 18px;
      }
    }

    @media (max-width: 980px) {
      .cellbig-hero { padding-top: 88px; }
      .nav-shell { grid-template-columns: auto auto; height: 64px; }
      .nav-links { display: none; }
      .brand { min-width: auto; }
      .hero-inner { display: flex; }

    }

    @media (max-width: 640px) {
      .cellbig-hero { padding: 76px 20px 56px; }
      h1 { font-size: 43px; }
      .section-label { font-size: 21px; }
      .hero-copy { font-size: 16px; }
      .hero-copy br { display: none; }
      .site-header { top: 14px; padding: 0 16px; }
      .nav-shell { padding-left: 14px; gap: 12px; grid-template-columns: auto auto; }
      .brand { width: 168px; }
      .brand-logo { max-height: 26px; }
      .nav-button { height: 42px; padding: 0 16px; font-size: 12px; }
      .section-01-content { padding-left: 0; }
      .btn {
        min-width: 180px;
        height: 60px;
        padding: 0 34px;
        font-size: 20px;
      }
      .button-row { margin-top: 30px; }
      .advantage-grid { grid-template-columns: 1fr; gap: 38px; }
      .advantage-title { font-size: 24px; }
      .advantage-copy { font-size: 14px; }
      .adv-icon { width: 94px; height: 94px; }
      .advantage-copy br { display: none; }
    }

    .section-kicker {
      color: #FF4FA3 !important;
    }


    .compare-card-featured .compare-heading {
      color: #FF4FA3 !important;
      text-shadow: 0 0 14px rgba(255,79,163,.12);
    }


    .advantage-icon img,
    .feature-icon img,
    .adv-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .advantage-icon,
    .feature-icon,
    .adv-icon {
      overflow: hidden;
    }

    /* ===== Scroll Reveal Animations ===== */
    html { scroll-behavior: smooth; }

    @media (prefers-reduced-motion: no-preference) {
      [data-reveal] {
        opacity: 0;
        will-change: opacity, transform;
        transition:
          opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
          transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
          filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--reveal-delay, 0ms);
      }

      [data-reveal="up"]    { transform: translate3d(0, 36px, 0); }
      [data-reveal="down"]  { transform: translate3d(0, -28px, 0); }
      [data-reveal="left"]  { transform: translate3d(38px, 0, 0); }
      [data-reveal="right"] { transform: translate3d(-38px, 0, 0); }
      [data-reveal="fade"]  { transform: none; }
      [data-reveal="zoom"]  { transform: scale(0.94); filter: blur(6px); }
      [data-reveal="blur"]  { transform: translate3d(0, 24px, 0); filter: blur(10px); }

      [data-reveal].is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
      }
    }

    /* Hero content cascade on first paint */
    @keyframes heroRise {
      from { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(6px); }
      to   { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
    }

    .hero-inner .eyebrow,
    .hero-inner h1,
    .hero-inner .section-label,
    .hero-inner .hero-copy,
    .hero-inner .button-row {
      opacity: 0;
      animation: heroRise 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .hero-inner .eyebrow      { animation-delay: 120ms; }
    .hero-inner h1            { animation-delay: 260ms; }
    .hero-inner .section-label { animation-delay: 460ms; }
    .hero-inner .hero-copy    { animation-delay: 620ms; }
    .hero-inner .button-row   { animation-delay: 780ms; }

    /* Subtle scroll hint bobbing */
    @keyframes scrollHintBob {
      0%, 100% { transform: translate(-50%, 0); opacity: .52; }
      50%      { transform: translate(-50%, 6px); opacity: .82; }
    }
    .scroll-hint {
      animation: scrollHintBob 2.4s ease-in-out infinite;
    }

    /* Floating ambient motion for hero visual orbs */
    @keyframes floatY {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-10px); }
    }
    .floating-a { animation: floatY 7.5s ease-in-out infinite; }
    .floating-b { animation: floatY 9s   ease-in-out infinite -2.4s; }
    .floating-c { animation: floatY 8.2s ease-in-out infinite -4.0s; }

    /* Parallax for hero video & ambient layers */
    .hero-bg-video { will-change: transform; }

    /* Nav shrink on scroll */
    .site-header { transition: top 360ms cubic-bezier(0.22, 1, 0.36, 1); }
    .nav-shell {
      transition:
        height 360ms cubic-bezier(0.22, 1, 0.36, 1),
        background 360ms ease,
        box-shadow 360ms ease,
        border-color 360ms ease;
    }
    .site-header.is-scrolled { top: 14px; }
    .site-header.is-scrolled .nav-shell {
      height: 64px;
      background: rgba(8, 7, 14, .82);
      border-color: rgba(255,255,255,.14);
      box-shadow:
        0 14px 44px rgba(0,0,0,.46),
        inset 0 1px 0 rgba(255,255,255,.06);
    }

    .nav-links a:hover {
      color: #FF4FA3 !important;
    }


    /* ===== LX Engine Difference Section ===== */
    .lx-engine-section {
      position: relative;
      padding: 118px 24px 110px;
      background:
        radial-gradient(circle at 18% 18%, rgba(124,58,237,.10), transparent 30%),
        radial-gradient(circle at 84% 14%, rgba(255,79,163,.08), transparent 26%),
        linear-gradient(180deg, #050509 0%, #080711 48%, #050509 100%);
      overflow: hidden;
    }

    .lx-engine-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
      background-size: 58px 58px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.75), transparent 100%);
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.75), transparent 100%);
      pointer-events: none;
    }

    .lx-engine-shell {
      position: relative;
      z-index: 2;
      width: min(1640px, calc(100% - 40px));
      margin: 0 auto;
    }

    .lx-engine-grid {
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      gap: 44px;
      align-items: center;
      margin-top: 62px;
    }

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

    .lx-feature-card {
      position: relative;
      min-height: 278px;
      padding: 30px 28px 28px;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.018)),
        rgba(14,12,24,.86);
      box-shadow:
        0 24px 70px rgba(0,0,0,.24),
        inset 0 0 0 1px rgba(255,255,255,.014);
      overflow: hidden;
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
    }

    .lx-feature-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(90deg, rgba(255,79,163,.42), rgba(207,197,255,.22), transparent 72%) top left / 100% 1px no-repeat,
        radial-gradient(circle at 88% 10%, rgba(255,79,163,.075), transparent 36%),
        radial-gradient(circle at 12% 92%, rgba(124,58,237,.085), transparent 38%);
      pointer-events: none;
    }

    .lx-feature-card:hover {
      transform: translateY(-6px);
      border-color: rgba(255,79,163,.24);
      background:
        linear-gradient(180deg, rgba(255,255,255,.064), rgba(255,255,255,.022)),
        rgba(16,14,25,.90);
      box-shadow:
        0 30px 82px rgba(0,0,0,.34),
        0 0 28px rgba(255,79,163,.06),
        inset 0 0 0 1px rgba(255,255,255,.022);
    }

    .lx-feature-icon,
    .lx-feature-title,
    .lx-feature-subtitle,
    .lx-feature-copy {
      position: relative;
      z-index: 1;
    }

    .lx-feature-icon {
      width: 64px;
      height: 64px;
      margin: 0 0 24px;
      display: grid;
      place-items: center;
    }

    .lx-feature-icon svg {
      width: 64px;
      height: 64px;
      display: block;
      overflow: visible;
    }

    .lx-feature-icon .lx-stroke {
      stroke: url(#lxIconGradient);
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .lx-feature-icon .lx-fill {
      fill: url(#lxIconGradient);
    }

    .lx-feature-title {
      margin: 0;
      color: #FFFFFF;
      font-size: 25px;
      line-height: 1.3;
      font-weight: 900;
      letter-spacing: -0.045em;
      word-break: keep-all;
    }

    .lx-feature-subtitle {
      margin: 9px 0 0;
      color: #CFC5FF;
      font-size: 16px;
      line-height: 1.5;
      font-weight: 850;
      letter-spacing: -0.025em;
      word-break: keep-all;
    }

    .lx-feature-copy {
      margin: 18px 0 0;
      color: #B9B4C7;
      font-size: 15px;
      line-height: 1.76;
      font-weight: 500;
      letter-spacing: -0.02em;
      word-break: keep-all;
    }

    .lx-infographic {
      position: relative;
      min-height: 650px;
      border-radius: 38px;
      border: 1px solid rgba(255,255,255,.11);
      background:
        radial-gradient(circle at 50% 36%, rgba(255,79,163,.10), transparent 32%),
        radial-gradient(circle at 48% 62%, rgba(124,58,237,.16), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.018)),
        rgba(12,10,20,.84);
      box-shadow:
        0 30px 100px rgba(0,0,0,.34),
        inset 0 0 0 1px rgba(255,255,255,.018);
      overflow: hidden;
      isolation: isolate;
    }

    .lx-infographic::before {
      content: "";
      position: absolute;
      inset: 24px;
      border-radius: 28px;
      background-image:
        linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
      background-size: 42px 42px;
      opacity: .62;
      mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 78%);
      -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 78%);
      pointer-events: none;
      z-index: 0;
    }

    .lx-core {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 232px;
      height: 232px;
      transform: translate(-50%, -50%);
      border-radius: 28px;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 42% 32%, rgba(255,255,255,.22), transparent 28%),
        linear-gradient(135deg, rgba(255,79,163,.92) 0%, rgba(155,92,255,.92) 100%);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.15) inset,
        0 24px 70px rgba(255,79,163,.15),
        0 0 64px rgba(155,92,255,.16);
      z-index: 2;
    }

    .lx-core::before {
      content: "";
      position: absolute;
      inset: -18px;
      border-radius: inherit;
      border: 1px solid rgba(207,197,255,.20);
      opacity: .8;
    }

    .lx-core::after {
      content: "";
      position: absolute;
      inset: -52px;
      border-radius: inherit;
      border: 1px dashed rgba(207,197,255,.18);
      opacity: .75;
    }

    .lx-core-text {
      position: relative;
      z-index: 2;
      text-align: center;
      color: #FFFFFF;
      font-weight: 950;
      letter-spacing: -0.035em;
    }

    .lx-core-text strong {
      display: block;
      font-size: 34px;
      line-height: 1;
      letter-spacing: -0.05em;
    }

    .lx-core-text span {
      display: block;
      margin-top: 10px;
      font-size: 12px;
      letter-spacing: .15em;
      font-weight: 900;
      opacity: .86;
    }

    .lx-node {
      position: absolute;
      z-index: 3;
      width: 178px;
      padding: 17px 18px 16px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.11);
      background:
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(8,7,14,.72);
      backdrop-filter: blur(16px);
      box-shadow:
        0 18px 54px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(255,255,255,.020);
    }

    .lx-node em {
      display: block;
      color: #FF73B8;
      font-size: 11px;
      font-style: normal;
      font-weight: 950;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .lx-node strong {
      display: block;
      margin-top: 7px;
      color: #FFFFFF;
      font-size: 17px;
      line-height: 1.34;
      font-weight: 900;
      letter-spacing: -0.035em;
    }

    .lx-node-1 { left: 42px; top: 86px; }
    .lx-node-2 { right: 42px; top: 86px; }
    .lx-node-3 { left: 42px; bottom: 86px; }
    .lx-node-4 { right: 42px; bottom: 86px; }

    .lx-orbit-line {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 470px;
      height: 470px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 1px solid rgba(207,197,255,.14);
      z-index: 1;
    }

    .lx-orbit-line::before,
    .lx-orbit-line::after {
      content: "";
      position: absolute;
      inset: 54px;
      border-radius: inherit;
      border: 1px solid rgba(255,79,163,.10);
    }

    .lx-orbit-line::after {
      inset: 108px;
      border-color: rgba(207,197,255,.11);
    }

    .lx-connector {
      position: absolute;
      z-index: 1;
      height: 1px;
      transform-origin: left center;
      background: linear-gradient(90deg, rgba(255,79,163,.00), rgba(255,79,163,.42), rgba(207,197,255,.24), rgba(255,79,163,.00));
      opacity: .62;
    }

    .lx-connector.c1 { width: 260px; left: 184px; top: 186px; transform: rotate(26deg); }
    .lx-connector.c2 { width: 260px; right: 184px; top: 186px; transform: rotate(154deg); }
    .lx-connector.c3 { width: 260px; left: 184px; bottom: 186px; transform: rotate(-26deg); }
    .lx-connector.c4 { width: 260px; right: 184px; bottom: 186px; transform: rotate(206deg); }

    @media (max-width: 1180px) {
      .lx-engine-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .lx-infographic {
        min-height: 560px;
      }
    }

    @media (max-width: 760px) {
      .lx-engine-section {
        padding: 88px 0 96px;
      }

      .lx-engine-shell {
        width: min(100% - 28px, 520px);
      }

      .lx-engine-grid {
        margin-top: 44px;
      }

      .lx-feature-grid {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .lx-feature-card {
        min-height: auto;
        padding: 26px 24px 25px;
        border-radius: 22px;
      }

      .lx-infographic {
        min-height: 620px;
        border-radius: 26px;
      }

      .lx-core {
        width: 184px;
        height: 184px;
      }

      .lx-core-text strong {
        font-size: 28px;
      }

      .lx-node {
        width: 150px;
        padding: 14px 14px 13px;
      }

      .lx-node strong {
        font-size: 14px;
      }

      .lx-node-1 { left: 18px; top: 52px; }
      .lx-node-2 { right: 18px; top: 52px; }
      .lx-node-3 { left: 18px; bottom: 52px; }
      .lx-node-4 { right: 18px; bottom: 52px; }

      .lx-orbit-line {
        width: 360px;
        height: 360px;
      }

      .lx-connector {
        display: none;
      }
    }


    /* ===== LX Engine Layout 02 Override ===== */
    .lx-engine-section{position:relative;padding:118px 24px 112px;background:radial-gradient(circle at 50% 20%,rgba(155,92,255,.12),transparent 28%),radial-gradient(circle at 82% 18%,rgba(255,79,163,.075),transparent 26%),linear-gradient(180deg,#050509 0%,#080711 48%,#050509 100%);overflow:hidden}
    .lx-engine-section::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);background-size:58px 58px;opacity:.72;mask-image:linear-gradient(180deg,rgba(0,0,0,.72),transparent 100%);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.72),transparent 100%);pointer-events:none}
    .lx-engine-shell{position:relative;z-index:2;width:min(1480px,calc(100% - 56px));margin:0 auto}
    .lx-flow{position:relative;margin:62px auto 44px;min-height:148px;display:flex;align-items:center;justify-content:center;gap:clamp(26px,3.1vw,54px)}
    .lx-flow::before{content:"";position:absolute;left:9%;right:9%;top:50%;height:1px;transform:translateY(-50%);background:linear-gradient(90deg,transparent 0%,rgba(255,79,163,.22) 15%,rgba(207,197,255,.28) 50%,rgba(255,79,163,.20) 85%,transparent 100%);pointer-events:none}
    .lx-flow-step{position:relative;z-index:2;width:132px;height:132px;border-radius:999px;display:grid;place-items:center;text-align:center;border:1px solid rgba(207,197,255,.22);background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.09),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),rgba(9,8,16,.88);box-shadow:0 22px 58px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.018);backdrop-filter:blur(14px)}
    .lx-flow-step svg{width:38px;height:38px;margin:0 auto 9px;display:block}.lx-flow-step .lx-stroke{stroke:url(#lxIconGradient);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;fill:none}.lx-flow-step .lx-fill{fill:url(#lxIconGradient)}
    .lx-flow-step span{display:block;color:#fff;font-size:13px;line-height:1.35;font-weight:850;letter-spacing:-.035em;word-break:keep-all}
    .lx-flow-core{width:144px;height:144px;border-radius:999px;background:radial-gradient(circle at 42% 28%,rgba(255,255,255,.22),transparent 30%),linear-gradient(135deg,#FF4FA3 0%,#9B5CFF 100%);box-shadow:0 0 0 1px rgba(255,255,255,.16) inset,0 0 36px rgba(255,79,163,.22),0 0 74px rgba(155,92,255,.20);border:0}
    .lx-flow-core strong{display:block;color:#fff;font-size:36px;line-height:.95;font-weight:950;letter-spacing:-.055em}.lx-flow-core em{display:block;margin-top:7px;color:rgba(255,255,255,.88);font-style:normal;font-size:13px;line-height:1;font-weight:900;letter-spacing:.03em}
    .lx-flow-dot{position:relative;z-index:2;width:7px;height:7px;border-radius:999px;background:#FF4FA3;box-shadow:0 0 14px rgba(255,79,163,.42);flex:0 0 auto}
    .lx-feature-panel{position:relative;margin:0 auto;padding:22px 26px;border-radius:28px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),rgba(12,10,20,.78);box-shadow:0 24px 72px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.014);overflow:hidden}
    .lx-feature-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,79,163,.08),transparent 38%),linear-gradient(90deg,rgba(255,79,163,.20),rgba(207,197,255,.14),rgba(255,79,163,.12)) top left/100% 1px no-repeat;pointer-events:none}
    .lx-feature-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0!important}.lx-feature-card{position:relative;min-height:232px!important;padding:22px 24px 20px!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;transition:transform .24s ease}.lx-feature-card:not(:last-child){border-right:1px solid rgba(255,255,255,.08)!important}.lx-feature-card::before{content:none!important}.lx-feature-card:hover{transform:translateY(-5px);background:transparent!important;box-shadow:none!important}
    .lx-feature-icon{width:48px!important;height:48px!important;margin:0 0 18px!important;display:grid;place-items:center}.lx-feature-icon svg{width:48px!important;height:48px!important;display:block;overflow:visible}.lx-feature-icon .lx-stroke{stroke:url(#lxIconGradient);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;fill:none}.lx-feature-icon .lx-fill{fill:url(#lxIconGradient)}
    .lx-feature-title{margin:0;color:#fff;font-size:22px!important;line-height:1.32;font-weight:900;letter-spacing:-.045em;word-break:keep-all}.lx-feature-subtitle{margin:8px 0 0;color:#CFC5FF;font-size:15px!important;line-height:1.48;font-weight:850;letter-spacing:-.03em;word-break:keep-all}.lx-feature-copy{margin:16px 0 0;color:#B9B4C7;font-size:14px!important;line-height:1.72;font-weight:500;letter-spacing:-.02em;word-break:keep-all}
    .lx-infographic,.lx-engine-grid{display:block!important}.lx-infographic{min-height:auto!important;border:0!important;background:none!important;box-shadow:none!important;overflow:visible!important}.lx-infographic::before,.lx-core,.lx-node,.lx-orbit-line,.lx-connector{display:none!important}
    @media(max-width:1180px){.lx-flow{gap:22px}.lx-flow-step{width:116px;height:116px}.lx-flow-core{width:128px;height:128px}.lx-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lx-feature-card:nth-child(2){border-right:0!important}.lx-feature-card:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)!important}}
    @media(max-width:760px){.lx-engine-section{padding:88px 0 96px}.lx-engine-shell{width:min(100% - 28px,520px)}.lx-flow{margin:44px auto 34px;min-height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.lx-flow::before,.lx-flow-dot{display:none}.lx-flow-step,.lx-flow-core{width:100%;height:118px;border-radius:24px}.lx-flow-core{grid-column:1/-1}.lx-feature-panel{padding:8px 20px;border-radius:24px}.lx-feature-grid{grid-template-columns:1fr}.lx-feature-card{min-height:auto!important;padding:24px 0!important;border-right:0!important}.lx-feature-card:not(:last-child){border-bottom:1px solid rgba(255,255,255,.08)!important}.lx-feature-card:nth-child(n+3){border-top:0!important}}


    .lx-feature-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }


    .lx-feature-icon .feature-stroke-01 {
      stroke: url(#lxIconGradientFeature01);
    }


    .lx-engine-shell {
      width: min(1640px, calc(100% - 40px));
    }

    .lx-feature-panel {
      width: 100%;
    }


    /* ===== Portfolio Section From Video Production Tab ===== */



    .portfolio-section {
      position: relative;
      padding: 118px 0 132px;
      background:
        radial-gradient(circle at 12% 16%, rgba(255,79,163,.08), transparent 28%),
        radial-gradient(circle at 88% 10%, rgba(124,58,237,.10), transparent 30%),
        linear-gradient(180deg, #050509 0%, #080711 48%, #050509 100%);
      overflow: hidden;
    }

    .portfolio-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
      background-size: 58px 58px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.78), transparent 100%);
      pointer-events: none;
    }

    .portfolio-intro {
      position: relative;
      z-index: 2;
      width: min(1180px, calc(100% - 48px));
      margin: 0 auto 58px;
      text-align: center;
    }

    .portfolio-track-wrap {
      position: relative;
      z-index: 2;
      overflow: hidden;
      width: min(1480px, calc(100% - 32px));
      margin: 0 auto;
      padding: 8px 0 18px;
      border-radius: 36px;
    }

    .portfolio-track-wrap {
      mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.18) 5%,
        rgba(0,0,0,.72) 11%,
        #000 14%,
        #000 86%,
        rgba(0,0,0,.72) 89%,
        rgba(0,0,0,.18) 95%,
        transparent 100%
      );
      -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.18) 5%,
        rgba(0,0,0,.72) 11%,
        #000 14%,
        #000 86%,
        rgba(0,0,0,.72) 89%,
        rgba(0,0,0,.18) 95%,
        transparent 100%
      );
    }

    .portfolio-track {
      display: flex;
      width: max-content;
      gap: 26px;
      animation: portfolioMarquee 34s linear infinite;
    }

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

    .portfolio-card {
      flex: 0 0 auto;
      width: 380px;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
        rgba(14,12,24,.86);
      box-shadow: 0 24px 70px rgba(0,0,0,.24);
      overflow: hidden;
    }

    .portfolio-video {
      aspect-ratio: 16 / 9;
      background: #FFFFFF;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .portfolio-card-body {
      padding: 20px 22px 22px;
    }

    .portfolio-card-title {
      margin: 0;
      color: #FFFFFF;
      font-size: 20px;
      line-height: 1.35;
      font-weight: 850;
      letter-spacing: -0.035em;
    }

    .portfolio-card-meta {
      margin: 8px 0 0;
      color: #AFA8C2;
      font-size: 14px;
      line-height: 1.6;
      font-weight: 500;
    }


    .portfolio-more {
      position: relative;
      z-index: 2;
      margin: 36px auto 0;
      text-align: center;
    }

    .portfolio-more a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #CFC5FF;
      font-size: 22px;
      line-height: 1;
      font-weight: 800;
      letter-spacing: -0.02em;
      text-decoration: none;
      transition: color .22s ease, transform .22s ease, text-shadow .22s ease;
    }

    .portfolio-more a:hover {
      color: #FF4FA3;
      transform: translateX(4px);
      text-shadow: 0 0 18px rgba(255,79,163,.16);
    }

    @media (max-width: 640px) {
      .portfolio-more {
        margin-top: 28px;
      }

      .portfolio-more a {
        font-size: 18px;
      }
    }

@keyframes portfolioMarquee {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(calc(-50% - 13px));
      }
    }

    @media (max-width: 980px) {
      .portfolio-track-wrap {
        width: min(1180px, calc(100% - 28px));
      }

      .portfolio-card {
        width: 330px;
      }

      .portfolio-track {
        gap: 20px;
        animation-duration: 30s;
      }
    }

    @media (max-width: 640px) {
      .portfolio-section {
        padding: 92px 0 104px;
      }

      .portfolio-intro {
        margin-bottom: 42px;
      }

      .portfolio-track-wrap {
        width: calc(100% - 16px);
        border-radius: 24px;
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.65) 10%, #000 18%, #000 82%, rgba(0,0,0,.65) 90%, transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.65) 10%, #000 18%, #000 82%, rgba(0,0,0,.65) 90%, transparent 100%);
      }

      .portfolio-card {
        width: 280px;
        border-radius: 22px;
      }

      .portfolio-card-body {
        padding: 17px 18px 19px;
      }

      .portfolio-card-title {
        font-size: 18px;
      }
    }

    /* ===== Service Type Section ===== */
    .service-type-section {
      position: relative;
      padding: 122px 24px 132px;
      background:
        radial-gradient(circle at 16% 18%, rgba(255,79,163,.08), transparent 28%),
        radial-gradient(circle at 84% 12%, rgba(124,58,237,.10), transparent 30%),
        linear-gradient(180deg, #050509 0%, #080711 48%, #050509 100%);
      overflow: hidden;
    }

    .service-type-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
      background-size: 58px 58px;
      opacity: .68;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 100%);
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 100%);
      pointer-events: none;
    }

    .service-type-shell {
      position: relative;
      z-index: 2;
      width: min(1480px, calc(100% - 56px));
      margin: 0 auto;
    }

    .service-card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 28px;
      margin-top: 62px;
    }

    .service-card {
      position: relative;
      border-radius: 34px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.018)),
        rgba(14,12,24,.84);
      box-shadow:
        0 26px 78px rgba(0,0,0,.25),
        0 0 0 1px rgba(255,255,255,.035) inset;
      overflow: hidden;
      transition:
        transform .18s cubic-bezier(0.22, 1, 0.36, 1),
        border-color .28s ease,
        box-shadow .28s ease,
        background .28s ease,
        filter .28s ease;
    }

    .service-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(90deg, rgba(255,79,163,.46), rgba(207,197,255,.24), transparent 76%) top left / 100% 1.4px no-repeat,
        radial-gradient(circle at 86% 12%, rgba(255,79,163,.09), transparent 34%),
        radial-gradient(circle at 10% 92%, rgba(124,58,237,.10), transparent 38%);
      pointer-events: none;
      z-index: 1;
    }

    .service-card::after {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: 35px;
      padding: 1.8px;
      background: linear-gradient(
        135deg,
        rgba(255, 56, 171, .96) 0%,
        rgba(255, 111, 190, .90) 42%,
        rgba(181, 154, 255, .82) 100%
      );
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      pointer-events: none;
      z-index: 3;
      transition: opacity .28s ease, box-shadow .28s ease;
    }

    .service-card:hover {
      z-index: 5;
      transform: translateY(-6px);
      border-color: rgba(255,79,163,.30);
      filter: brightness(1.06);
      background:
        radial-gradient(circle at 88% 10%, rgba(255,79,163,.11), transparent 32%),
        radial-gradient(circle at 10% 90%, rgba(139,92,255,.10), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.026)),
        rgba(18,16,28,.94);
      box-shadow:
        0 36px 92px rgba(0,0,0,.38),
        0 0 0 1px rgba(255,79,163,.14) inset,
        0 0 22px rgba(255,79,163,.12),
        0 0 42px rgba(155,92,255,.08);
    }

    .service-card:hover::after {
      opacity: 1;
      box-shadow:
        0 0 10px rgba(255,79,163,.10),
        0 0 18px rgba(255,79,163,.06),
        0 0 22px rgba(181,154,255,.05);
    }

    .service-visual {
      position: relative;
      z-index: 2;
      height: 300px;
      margin: 18px 18px 0;
      border-radius: 26px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.09);
      background:
        radial-gradient(circle at 36% 26%, rgba(255,79,163,.22), transparent 30%),
        radial-gradient(circle at 72% 68%, rgba(124,58,237,.24), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
        rgba(8,7,14,.84);
    }

    .service-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      opacity: .92;
    }

    .service-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(5,5,9,.03) 0%, rgba(5,5,9,.54) 100%),
        radial-gradient(circle at 50% 50%, transparent 0%, rgba(5,5,9,.16) 74%);
      pointer-events: none;
    }

    .service-visual-placeholder {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: rgba(255,255,255,.68);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .service-card-body {
      position: relative;
      z-index: 2;
      padding: 34px 36px 36px;
    }

    .service-badge {
      display: inline-flex;
      align-items: center;
      height: 30px;
      padding: 0 12px;
      border-radius: 999px;
      color: #FF73B8;
      background: rgba(255,79,163,.09);
      border: 1px solid rgba(255,79,163,.18);
      font-size: 12px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .service-title {
      margin: 18px 0 0;
      color: #FFFFFF;
      font-size: clamp(28px, 2.8vw, 38px);
      line-height: 1.2;
      font-weight: 900;
      letter-spacing: -0.055em;
    }

    .service-desc {
      margin: 16px 0 0;
      color: #CFC5FF;
      font-size: 18px;
      line-height: 1.62;
      font-weight: 760;
      letter-spacing: -0.035em;
      word-break: keep-all;
    }

    .service-list {
      display: grid;
      gap: 14px;
      margin: 28px 0 14px;
      padding: 0;
      list-style: none;
    }

    .service-list li {
      position: relative;
      padding-left: 28px;
      color: #B9B4C7;
      font-size: 16px;
      line-height: 1.62;
      font-weight: 520;
      letter-spacing: -0.025em;
      word-break: keep-all;
    }

    .service-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .58em;
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: linear-gradient(135deg, #FF4FA3 0%, #9B5CFF 100%);
      box-shadow: 0 0 12px rgba(255,79,163,.32);
    }

    .service-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-width: 218px;
      height: 54px;
      margin-top: 34px;
      padding: 0 26px;
      border-radius: 999px;
      color: #FFFFFF;
      text-decoration: none;
      font-size: 16px;
      line-height: 1;
      font-weight: 850;
      letter-spacing: -0.025em;
      border: 1px solid rgba(255,255,255,.14);
      background:
        linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.025)),
        rgba(12,10,20,.62);
      box-shadow:
        0 14px 34px rgba(0,0,0,.20),
        inset 0 0 0 1px rgba(255,255,255,.045);
      backdrop-filter: blur(14px);
      transition:
        color .22s ease,
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
    }

    .service-link::after {
      content: "→";
      font-size: 18px;
      line-height: 1;
      transition: transform .22s ease;
    }

    .service-link:hover {
      color: #FF4FA3;
      transform: translateY(-2px);
      border-color: rgba(255,79,163,.62);
      box-shadow:
        0 18px 44px rgba(0,0,0,.28),
        0 0 0 1px rgba(255,79,163,.26) inset,
        0 0 18px rgba(255,79,163,.22),
        0 0 30px rgba(155,92,255,.10);
      text-shadow: none;
    }

    .service-link:hover::after {
      transform: translateX(4px);
    }

    @media (max-width: 980px) {
      .service-card-grid {
        grid-template-columns: 1fr;
      }

      .service-visual {
        height: 260px;
      }
    }

    @media (max-width: 640px) {
      .service-type-section {
        padding: 88px 0 104px;
      }

      .service-type-shell {
        width: min(100% - 28px, 520px);
      }

      .service-card-grid {
        margin-top: 42px;
        gap: 20px;
      }

      .service-card {
        border-radius: 26px;
      }

      .service-visual {
        height: 210px;
        margin: 14px 14px 0;
        border-radius: 20px;
      }

      .service-card-body {
        padding: 26px 24px 28px;
      }

      .service-title {
        font-size: 28px;
      }

      .service-desc {
        font-size: 16px;
      }

      .service-list li {
        font-size: 14px;
      }

      .service-link {
        font-size: 16px;
      }
    }


    /* ===== Final Home CTA Section ===== */
    .home-final-cta-section {
      position: relative;
      padding: 124px 24px 142px;
      background:
        radial-gradient(circle at 50% 16%, rgba(255,79,163,.13), transparent 30%),
        radial-gradient(circle at 50% 82%, rgba(207,197,255,.075), transparent 34%),
        linear-gradient(180deg, #050509 0%, #080711 48%, #050509 100%);
      overflow: hidden;
    }

    .home-final-cta-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
      background-size: 58px 58px;
      opacity: .34;
      mask-image: radial-gradient(circle at 50% 48%, rgba(0,0,0,.78), transparent 72%);
      -webkit-mask-image: radial-gradient(circle at 50% 48%, rgba(0,0,0,.78), transparent 72%);
      pointer-events: none;
    }

    .home-final-cta-inner {
      position: relative;
      z-index: 2;
      width: min(1120px, calc(100% - 48px));
      margin: 0 auto;
      text-align: center;
    }

    .home-final-cta-title {
      margin: 0;
      color: #FFFFFF;
      font-size: clamp(38px, 4.4vw, 62px);
      line-height: 1.15;
      letter-spacing: -0.06em;
      font-weight: 900;
    }

    .home-final-cta-desc {
      margin: 22px auto 0;
      max-width: 720px;
      color: var(--text-sub);
      font-size: 19px;
      line-height: 1.76;
      font-weight: 500;
      letter-spacing: -0.025em;
      word-break: keep-all;
    }

    .home-final-cta-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-top: 44px;
      flex-wrap: wrap;
      flex-direction: column;
    }

    .home-final-cta-button {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 178px;
      height: 58px;
      padding: 0 34px;
      border-radius: 999px;
      color: #FFFFFF;
      font-size: 18px;
      line-height: 1;
      font-weight: 850;
      letter-spacing: -0.025em;
      text-decoration: none;
      background: linear-gradient(135deg, #FF4FA3 0%, #9B5CFF 100%);
      box-shadow:
        0 16px 42px rgba(255,79,163,.22),
        inset 0 0 0 1px rgba(255,255,255,.18);
      overflow: hidden;
      transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
    }

    .home-final-cta-button::after {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 48%);
      pointer-events: none;
    }

    .home-final-cta-button:hover {
      transform: translateY(-3px);
      filter: brightness(1.05);
      box-shadow:
        0 22px 54px rgba(255,79,163,.25),
        0 0 24px rgba(207,197,255,.12),
        inset 0 0 0 1px rgba(255,255,255,.22);
    }

    .home-final-cta-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #CFC5FF;
      font-size: 19px;
      line-height: 1;
      font-weight: 850;
      letter-spacing: -0.025em;
      text-decoration: none;
      transition: color .22s ease, transform .22s ease, text-shadow .22s ease;
    }

    .home-final-cta-link:hover {
      color: #FF4FA3;
      transform: translateX(4px);
      text-shadow: 0 0 18px rgba(255,79,163,.16);
    }

    @media (max-width: 640px) {
      .home-final-cta-section {
        padding: 90px 0 104px;
      }

      .home-final-cta-inner {
        width: min(100% - 28px, 520px);
      }

      .home-final-cta-desc {
        font-size: 16px;
      }

      .home-final-cta-actions {
        gap: 18px;
        margin-top: 36px;
        flex-direction: column;
      }

      .home-final-cta-button {
        height: 54px;
        min-width: 166px;
        font-size: 16px;
      }

      .home-final-cta-link {
        font-size: 16px;
      }
    }


    .home-final-cta-kicker {
      margin-bottom: 18px;
    }

    .home-final-cta-actions .home-final-cta-link {
      margin-top: 24px;
    }

  

    /* ===== Video Production Page Styles ===== */

    :root {
      --bg-black: #050509;
      --bg-purple-black: #0B0714;
      --card-dark: #12101C;
      --primary-violet: #7C3AED;
      --neon-purple: #B15CFF;
      --cyber-blue: #3B82F6;
      --pink-accent: #FF4FA3;
      --text-white: #FFFFFF;
      --text-sub: #B9B4C7;
      --border: #2A223A;
      --gradient-main: linear-gradient(90deg, #7C3AED 0%, #A855F7 48%, #FF4FA3 100%);
      --button-gradient: linear-gradient(90deg, #8B5CF6 0%, #A855F7 48%, #F553A8 100%);
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      min-height: 100%;
      background: var(--bg-black);
      color: var(--text-white);
      font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
      letter-spacing: -0.03em;
    }

    body { overflow-x: hidden; }


    .site-header {
      position: fixed;
      top: 22px;
      left: 0;
      right: 0;
      z-index: 20;
      padding: 0 24px;
      pointer-events: none;
    }

    .nav-shell {
      width: min(1120px, 100%);
      height: 76px;
      margin: 0 auto;
      padding: 0 14px 0 24px;
      display: grid;
      grid-template-columns: 240px 1fr 142px;
      align-items: center;
      gap: 34px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 999px;
      background: rgba(12, 10, 20, .68);
      box-shadow:
        0 18px 60px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter: blur(22px);
      pointer-events: auto;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      width: 220px;
      color: #fff;
      text-decoration: none;
    }

    .brand-logo {
      display: block;
      width: 100%;
      height: auto;
      max-height: 34px;
      object-fit: contain;
    }

    .nav-links {
      justify-self: center;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(255,255,255,.06);
    }

    .nav-links a {
      display: inline-flex;
      align-items: center;
      height: 44px;
      padding: 0 24px;
      border-radius: 999px;
      color: #FFFFFF;
      text-decoration: none;
      font-size: 16px;
      font-weight: 850;
      letter-spacing: -0.025em;
      transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    .nav-links a:hover {
      color: #FF4FA3;
      background: rgba(255,255,255,.08);
      box-shadow: none;
      transform: translateY(-1px);
    }

    .nav-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 56px;
      padding: 0 32px;
      border-radius: 999px;
      color: #fff;
      text-decoration: none;
      font-size: 18px;
      font-weight: 900;
      background: linear-gradient(90deg, #8B5CF6 0%, #A855F7 48%, #F553A8 100%);
      box-shadow: 0 12px 30px rgba(168,85,247,.22);
    }


    .nav-button:hover {
      transform: translateY(-2px);
      box-shadow:
        0 18px 42px rgba(245,83,168,.28),
        0 0 0 1px rgba(255,255,255,.14) inset;
      filter: brightness(1.08);
    }


    .cellbig-hero {
      isolation: isolate;
      position: relative;
      min-height: 100vh;
      padding: 132px 24px 72px;
      display: flex;
      align-items: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 20%, rgba(124, 58, 237, 0.16), transparent 32%),
        radial-gradient(circle at 84% 22%, rgba(255, 79, 163, 0.10), transparent 30%),
        radial-gradient(circle at 66% 76%, rgba(59, 130, 246, 0.10), transparent 36%),
        linear-gradient(180deg, var(--bg-black) 0%, var(--bg-purple-black) 58%, #040308 100%);
    }

    .hero-bg-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .9;
      filter: brightness(1.05) contrast(1.04) saturate(1.12);
      z-index: 0;
      pointer-events: none;
    }

    .hero-video-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(90deg, rgba(5,5,9,.86) 0%, rgba(5,5,9,.68) 22%, rgba(5,5,9,.28) 48%, rgba(5,5,9,.08) 76%, rgba(5,5,9,.18) 100%),
        linear-gradient(180deg, rgba(5,5,9,.02) 0%, rgba(11,7,20,.20) 78%, rgba(5,5,9,.70) 100%),
        radial-gradient(circle at 18% 20%, rgba(124,58,237,.24), transparent 34%),
        radial-gradient(circle at 84% 22%, rgba(255,79,163,.13), transparent 30%);
      pointer-events: none;
    }

    .cellbig-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: radial-gradient(circle at 50% 42%, black 0%, transparent 72%);
      opacity: .18;
      pointer-events: none;
      z-index: 1;
    }

    .cellbig-hero::after {
      content: "";
      position: absolute;
      width: 880px;
      height: 880px;
      right: -360px;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 50%;
      background: conic-gradient(from 180deg, rgba(124,58,237,.4), rgba(59,130,246,.36), rgba(255,79,163,.28), rgba(124,58,237,.4));
      filter: blur(80px);
      opacity: .34;
      pointer-events: none;
      z-index: 1;
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      width: min(1180px, 100%);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      text-align: left;
    }

    .section-01-content { max-width: 690px; }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 22px;
      padding: 9px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.055);
      color: #E8DBFF;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
      backdrop-filter: blur(14px);
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--pink-accent);
      box-shadow: 0 0 18px rgba(255,79,163,.86);
    }

    h1 {
      margin: 0;
      font-size: clamp(48px, 6vw, 84px);
      line-height: 1.05;
      font-weight: 900;
      letter-spacing: -0.075em;
    }

    .title-gradient {
      display: block;
      margin-top: 6px;
      color: #FFFFFF;
    }

    .section-label {
      margin: 26px 0 18px;
      color: #CFC5FF;
      font-size: clamp(22px, 2.2vw, 31px);
      line-height: 1.36;
      font-weight: 800;
      letter-spacing: -0.045em;
      text-shadow: 0 0 22px rgba(255,79,163,.22);
    }

    .hero-copy {
      margin: 0;
      max-width: 660px;
      color: var(--text-sub);
      font-size: 18px;
      line-height: 1.78;
      font-weight: 500;
    }

    .button-row {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 14px;
      margin-top: 38px;
    }

    .btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 228px;
      height: 72px;
      padding: 0 48px;
      border-radius: 999px;
      color: #FFFFFF;
      font-size: 24px;
      font-weight: 900;
      text-decoration: none;
      overflow: hidden;
      transition: transform .24s ease, box-shadow .24s ease;
    }

    .btn-primary {
      background: var(--button-gradient);
      box-shadow:
        0 14px 34px rgba(168,85,247,.22),
        0 0 0 1px rgba(255,255,255,.10) inset;
    }

    .btn-primary::after {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 48%);
      pointer-events: none;
    }

    .btn:hover {
      transform: translateY(-3px);
      box-shadow:
        0 18px 44px rgba(168,85,247,.30),
        0 0 0 1px rgba(255,255,255,.14) inset;
    }

    .hero-visual {
      position: relative;
      min-height: 560px;
      border-radius: 38px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
        radial-gradient(circle at 30% 20%, rgba(124,58,237,.38), transparent 34%),
        radial-gradient(circle at 78% 72%, rgba(59,130,246,.28), transparent 38%),
        rgba(18,16,28,.62);
      box-shadow:
        0 30px 100px rgba(0,0,0,.48),
        0 0 80px rgba(124,58,237,.12);
      backdrop-filter: blur(18px);
      overflow: hidden;
    }

    .hero-visual::before {
      content: "";
      position: absolute;
      inset: 24px;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.09);
      background:
        linear-gradient(90deg, transparent 0 49%, rgba(255,79,163,.3) 50%, transparent 51% 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 76px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 76px);
      opacity: .76;
    }

    .motion-card {
      position: absolute;
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(5,5,9,.52);
      backdrop-filter: blur(14px);
      box-shadow: 0 20px 70px rgba(0,0,0,.34);
    }

    .main-preview {
      left: 50%;
      top: 48%;
      width: 290px;
      height: 214px;
      transform: translate(-50%, -50%);
      overflow: hidden;
    }

    .main-preview::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 45%, rgba(255,255,255,.96), transparent 4%),
        radial-gradient(circle at 44% 40%, rgba(177,92,255,.72), transparent 18%),
        radial-gradient(circle at 64% 62%, rgba(59,130,246,.66), transparent 24%),
        linear-gradient(135deg, #0B0714, #17112B 56%, #050509);
    }

    .play {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
    }

    .play::before {
      content: "";
      width: 74px;
      height: 74px;
      border-radius: 50%;
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.26);
      backdrop-filter: blur(12px);
      box-shadow: 0 0 45px rgba(255,79,163,.25);
    }

    .play::after {
      content: "";
      position: absolute;
      width: 28px;
      height: 34px;
      background: #FFFFFF;
      clip-path: polygon(0 0, 100% 50%, 0 100%);
      transform: translateX(4px);
    }

    .floating-a {
      width: 190px;
      height: 116px;
      top: 70px;
      right: 46px;
      padding: 18px;
    }

    .floating-b {
      width: 212px;
      height: 132px;
      left: 38px;
      bottom: 78px;
      padding: 18px;
    }

    .floating-c {
      width: 156px;
      height: 92px;
      right: 54px;
      bottom: 62px;
      padding: 16px;
    }

    .line {
      height: 9px;
      border-radius: 999px;
      background: rgba(255,255,255,.13);
      margin-bottom: 12px;
    }

    .line.short { width: 56%; }
    .line.mid { width: 78%; }
    .line.grad { width: 100%; background: var(--gradient-main); }

    .chip-row {
      display: flex;
      gap: 8px;
      margin-top: 18px;
    }

    .chip {
      width: 38px;
      height: 26px;
      border-radius: 999px;
      background: rgba(255,255,255,.09);
      border: 1px solid rgba(255,255,255,.1);
    }

    .orb {
      position: absolute;
      width: 142px;
      height: 142px;
      top: 84px;
      left: 70px;
      border-radius: 38px;
      transform: rotate(45deg);
      background: var(--gradient-main);
      box-shadow: 0 25px 80px rgba(255,79,163,.28);
      opacity: .88;
    }

    .orb::after {
      content: "";
      position: absolute;
      inset: 42px;
      background: #FFFFFF;
      clip-path: polygon(0 0, 100% 50%, 0 100%);
      transform: rotate(-45deg) translate(5px, 0);
    }

    .visual-label {
      position: absolute;
      left: 32px;
      top: 32px;
      color: rgba(255,255,255,.7);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .visual-badge {
      position: absolute;
      right: 32px;
      top: 32px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      color: #F4E9FF;
      font-size: 12px;
      font-weight: 800;
    }

    .scroll-hint {
      z-index: 2;
      position: absolute;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%);
      color: rgba(255,255,255,.52);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }




    .advantages-section {
      position: relative;
      padding: 118px 24px 90px;
      background:
        radial-gradient(circle at 18% 20%, rgba(124,58,237,.10), transparent 30%),
        radial-gradient(circle at 84% 14%, rgba(255,79,163,.08), transparent 26%),
        linear-gradient(180deg, #050509 0%, #080711 48%, #050509 100%);
      overflow: hidden;
    }

    .advantages-section::before,
    .compare-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
      background-size: 58px 58px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.75), transparent 100%);
      pointer-events: none;
    }

    .compare-section {
      position: relative;
      padding: 42px 24px 128px;
      background:
        radial-gradient(circle at 82% 18%, rgba(59,130,246,.10), transparent 24%),
        linear-gradient(180deg, #050509 0%, #070712 52%, #050509 100%);
      overflow: hidden;
    }

    .section-shell {
      position: relative;
      z-index: 2;
      width: min(1480px, calc(100% - 56px));
      margin: 0 auto;
    }

    .section-intro {
      max-width: 860px;
      margin: 0 auto 56px;
      text-align: center;
    }

    .section-kicker {
      display: inline-block;
      margin: 0 0 16px;
      color: #FF4FA3;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .section-title {
      margin: 0;
      color: #FFFFFF;
      font-size: clamp(34px, 4vw, 52px);
      line-height: 1.16;
      letter-spacing: -0.055em;
      font-weight: 900;
    }

    .section-desc {
      margin: 18px auto 0;
      max-width: 760px;
      color: var(--text-sub);
      font-size: 18px;
      line-height: 1.75;
      font-weight: 500;
    }

    .advantage-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(260px, 1fr));
      gap: clamp(28px, 2.2vw, 44px);
      align-items: start;
      justify-items: center;
    }

    .advantage-item {
      width: 100%;
      max-width: 384px;
      text-align: center;
    }

    .adv-icon {
      position: relative;
      width: 108px;
      height: 108px;
      margin: 0 auto 28px;
      border-radius: 24px;
      background:
        linear-gradient(145deg, rgba(255,79,163,.14), rgba(124,58,237,.10)),
        rgba(14,12,24,.92);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 18px 48px rgba(0,0,0,.24);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .adv-icon:empty::after { content: none; }

    .adv-icon svg {
      width: 76px;
      height: 76px;
      display: block;
      overflow: visible;
    }

    .adv-icon .g-stroke {
      stroke: url(#iconGradient);
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .adv-icon .g-fill {
      fill: url(#iconGradient);
    }

    .adv-icon .g-soft {
      stroke: rgba(255,255,255,.28);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .adv-icon .g-soft-fill {
      fill: rgba(255,255,255,.16);
    }

    .adv-icon .g-glow {
      filter: drop-shadow(0 0 8px rgba(208,101,255,.22));
    }

    /* legacy pseudo-icon styles removed in favor of inline SVG icons */

    .advantage-title {
      margin: 0 0 16px;
      color: #FFFFFF;
      font-size: 26px;
      line-height: 1.32;
      letter-spacing: -0.04em;
      font-weight: 900;
      word-break: keep-all;
    }

    .advantage-copy {
      margin: 0 auto;
      max-width: 384px;
      color: #B9B4C7;
      font-size: 15px;
      line-height: 1.74;
      font-weight: 500;
      letter-spacing: -0.02em;
      word-break: keep-all;
    }

    .advantage-item:nth-child(2) .advantage-copy {
      max-width: 440px;
      font-size: 14px;
    }


    .compare-intro {
      max-width: 1180px;
      margin-bottom: 48px;
    }

    .compare-title {
      white-space: nowrap;
      font-size: clamp(34px, 3.35vw, 48px);
      letter-spacing: -0.055em;
    }


    .compare-card {
      padding: 32px 30px 26px;
    }

    .compare-heading {
      text-align: left;
      margin-bottom: 26px;
    }

    .compare-row {
      grid-template-columns: 150px 1fr;
      gap: 28px;
      align-items: center;
      padding: 20px 0;
    }

    .compare-term {
      text-align: left;
    }

    .compare-text {
      text-align: center;
    }

    .compare-card-featured {
      border-color: rgba(255,79,163,.58);
      background:
        radial-gradient(circle at 88% 12%, rgba(255,79,163,.10), transparent 34%),
        radial-gradient(circle at 10% 92%, rgba(124,58,237,.12), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
        rgba(14,12,24,.88);
      box-shadow:
        0 24px 72px rgba(0,0,0,.24),
        0 0 0 1px rgba(177,92,255,.16) inset,
        0 0 38px rgba(255,79,163,.10);
    }

    .compare-card-featured::before {
      background: radial-gradient(circle, rgba(255,79,163,.18), transparent 72%);
    }

    @media (max-width: 640px) {
      .compare-row {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .compare-heading,
      .compare-term,
      .compare-text {
        text-align: center;
      }
    }


    .compare-card:not(.compare-card-featured) {
      background:
        linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006)),
        rgba(8, 8, 14, .78);
      border-color: rgba(255,255,255,.05);
      box-shadow:
        0 16px 42px rgba(0,0,0,.18),
        0 0 0 1px rgba(255,255,255,.018) inset;
    }

    .compare-card:not(.compare-card-featured)::before {
      opacity: .16;
      background: radial-gradient(circle, rgba(255,255,255,.035), transparent 72%);
    }

    .compare-card:not(.compare-card-featured) .compare-heading {
      color: rgba(255,255,255,.74);
    }

    .compare-card:not(.compare-card-featured) .compare-row {
      border-top-color: rgba(255,255,255,.055);
    }

    .compare-card:not(.compare-card-featured) .compare-term {
      color: rgba(255,255,255,.52);
    }

    .compare-card:not(.compare-card-featured) .compare-text {
      color: rgba(255,255,255,.58);
    }


    .compare-card-featured {
      border-color: rgba(255, 79, 163, .72);
      box-shadow:
        0 24px 72px rgba(0,0,0,.24),
        0 0 0 1px rgba(255, 79, 163, .18) inset,
        0 0 42px rgba(255, 79, 163, .14),
        0 0 64px rgba(124, 58, 237, .08);
    }

    .compare-card-featured .compare-heading {
      color: #CFC5FF;
      text-shadow: 0 0 24px rgba(255, 79, 163, .18);
    }


    /* refined LOOMIX highlight */
    .compare-card-featured {
      position: relative;
      border: 2px solid #FF4FA3;
      border-radius: 28px;
      background:
        radial-gradient(circle at 88% 10%, rgba(255,79,163,.10), transparent 30%),
        radial-gradient(circle at 10% 90%, rgba(139,92,255,.10), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018)),
        rgba(12, 10, 22, .94);
      box-shadow:
        0 24px 72px rgba(0,0,0,.26),
        0 0 0 1px rgba(255,79,163,.14) inset,
        0 0 0 2px rgba(255,79,163,.04),
        0 0 26px rgba(255,79,163,.12);
    }

    .compare-card-featured::before {
      opacity: 1;
      background:
        radial-gradient(circle at 100% 0%, rgba(255,79,163,.16), transparent 34%),
        radial-gradient(circle at 0% 100%, rgba(139,92,255,.12), transparent 36%);
      pointer-events: none;
    }

    .compare-card-featured .compare-heading {
      color: #CFC5FF;
      text-shadow:
        0 0 12px rgba(255,79,163,.14),
        0 0 22px rgba(255,79,163,.08);
    }

    .compare-card-featured .compare-row {
      border-top-color: rgba(255,255,255,.075);
    }

    .compare-card-featured .compare-term {
      color: rgba(255,255,255,.82);
    }

    .compare-card-featured .compare-text {
      color: #A96BFF;
      text-shadow:
        0 0 10px rgba(169,107,255,.10),
        0 0 18px rgba(169,107,255,.06);
      font-weight: 800;
    }


    .compare-card-featured {
      border: 2px solid transparent !important;
      background:
        radial-gradient(circle at 88% 10%, rgba(255,79,163,.10), transparent 30%),
        radial-gradient(circle at 10% 90%, rgba(139,92,255,.10), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
        rgba(14,12,24,.88) padding-box,
        linear-gradient(135deg, #FF2FB3 0%, #FF69C6 42%, #9B5CFF 100%) border-box !important;
      box-shadow:
        0 24px 72px rgba(0,0,0,.24),
        0 0 0 1px rgba(177,92,255,.16) inset,
        0 0 18px rgba(255,47,179,.14),
        0 0 34px rgba(155,92,255,.08) !important;
    }

    .compare-card-featured:hover {
      background:
        radial-gradient(circle at 88% 10%, rgba(255,79,163,.10), transparent 30%),
        radial-gradient(circle at 10% 90%, rgba(139,92,255,.10), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
        rgba(14,12,24,.88) padding-box,
        linear-gradient(135deg, #FF2FB3 0%, #FF69C6 42%, #9B5CFF 100%) border-box !important;
    }


    /* Final refinement: clearer border, softer secondary accent */
    .compare-card-featured {
      position: relative;
      border: 1px solid rgba(255,255,255,.06) !important;
      box-shadow:
        0 22px 56px rgba(0,0,0,.24),
        0 0 0 1px rgba(255,255,255,.03) inset !important;
      overflow: visible;
    }

    .compare-card-featured::after {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: 28px;
      padding: 1.7px;
      background: linear-gradient(
        135deg,
        rgba(255, 56, 171, .96) 0%,
        rgba(255, 111, 190, .90) 42%,
        rgba(181, 154, 255, .82) 100%
      );
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      box-shadow:
        0 0 10px rgba(255, 79, 163, .10),
        0 0 18px rgba(255, 79, 163, .06),
        0 0 22px rgba(181, 154, 255, .05);
      opacity: .98;
    }

    .compare-card-featured .compare-heading {
      color: #CFC5FF;
      text-shadow: 0 0 12px rgba(255,79,163,.10);
    }

    .compare-card-featured .compare-text {
      color: #CFC5FF;
      text-shadow: none;
      font-weight: 780;
    }


    .compare-card-featured {
      position: relative;
      overflow: hidden;
    }

    .compare-card-featured .compare-heading,
    .compare-card-featured .compare-list {
      position: relative;
      z-index: 2;
    }
@media (max-width: 980px) {
      .compare-title {
        white-space: normal;
        font-size: clamp(31px, 5vw, 42px);
      }
    }

    .compare-wrap {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 560px));
      justify-content: center;
      gap: 24px;
      margin-top: 48px;
    }

    .compare-card {
      position: relative;
      padding: 30px 30px 18px;
      border-radius: 30px;
      border: 1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
        rgba(14,12,24,.88);
      box-shadow: 0 24px 72px rgba(0,0,0,.24);
      overflow: hidden;
    }

    .compare-card::before {
      content: "";
      position: absolute;
      top: -60px;
      right: -60px;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(124,58,237,.16), transparent 70%);
      pointer-events: none;
    }

    .compare-heading {
      margin: 0 0 22px;
      color: #FFFFFF;
      font-size: 26px;
      line-height: 1.2;
      font-weight: 900;
      letter-spacing: -0.04em;
    }

    .compare-list {
      display: grid;
      gap: 0;
    }

    .compare-row {
      display: grid;
      grid-template-columns: 160px 1fr;
      gap: 18px;
      padding: 18px 0;
      border-top: 1px solid rgba(255,255,255,.08);
    }

    .compare-row:first-child {
      border-top: 0;
      padding-top: 0;
    }

    .compare-term {
      color: #FFFFFF;
      font-size: 16px;
      line-height: 1.5;
      font-weight: 800;
      letter-spacing: -0.03em;
    }

    .compare-text {
      color: #B9B4C7;
      font-size: 16px;
      line-height: 1.7;
      font-weight: 500;
      letter-spacing: -0.02em;
    }


    .compare-card-featured {
      position: relative;
      overflow: hidden;
    }

    .compare-card-featured .compare-heading,
    .compare-card-featured .compare-list {
      position: relative;
      z-index: 2;
    }

    .compare-accent-graphic {
      position: absolute;
      top: 18px;
      right: 22px;
      width: 96px;
      height: 96px;
      pointer-events: none;
      z-index: 1;
      opacity: .98;
    }

    .sparkle {
      position: absolute;
      display: block;
      background: linear-gradient(180deg, #FF7CC5 0%, #FF4FA3 100%);
      clip-path: polygon(
        50% 0%,
        61% 35%,
        100% 50%,
        61% 65%,
        50% 100%,
        39% 65%,
        0% 50%,
        39% 35%
      );
      filter: drop-shadow(0 0 8px rgba(207, 197, 255, .24));
      box-shadow: 0 0 14px rgba(255,79,163,.14);
    }

    .sparkle-lg {
      right: 2px;
      top: 0;
      width: 38px;
      height: 38px;
    }

    .sparkle-md {
      right: 30px;
      top: 18px;
      width: 16px;
      height: 16px;
      opacity: .9;
    }

    .sparkle-sm {
      right: 10px;
      top: 44px;
      width: 24px;
      height: 24px;
      opacity: .96;
    }

    @media (max-width: 760px) {
      .compare-accent-graphic {
        width: 76px;
        height: 76px;
        top: 16px;
        right: 18px;
      }

      .sparkle-lg {
        width: 30px;
        height: 30px;
      }

      .sparkle-md {
        top: 14px;
        right: 24px;
        width: 13px;
        height: 13px;
      }

      .sparkle-sm {
        top: 34px;
        width: 18px;
        height: 18px;
      }
    }

.sparkle-lg {
        width: 28px;
        height: 28px;
      }

      .sparkle-sm {
        top: 34px;
        width: 18px;
        height: 18px;
      }
    }



    .portfolio-section {
      position: relative;
      padding: 118px 0 132px;
      background:
        radial-gradient(circle at 12% 16%, rgba(255,79,163,.08), transparent 28%),
        radial-gradient(circle at 88% 10%, rgba(124,58,237,.10), transparent 30%),
        linear-gradient(180deg, #050509 0%, #080711 48%, #050509 100%);
      overflow: hidden;
    }

    .portfolio-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
      background-size: 58px 58px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.78), transparent 100%);
      pointer-events: none;
    }

    .portfolio-intro {
      position: relative;
      z-index: 2;
      width: min(1180px, calc(100% - 48px));
      margin: 0 auto 58px;
      text-align: center;
    }

    .portfolio-track-wrap {
      position: relative;
      z-index: 2;
      overflow: hidden;
      width: min(1480px, calc(100% - 32px));
      margin: 0 auto;
      padding: 8px 0 18px;
      border-radius: 36px;
    }

    .portfolio-track-wrap {
      mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.18) 5%,
        rgba(0,0,0,.72) 11%,
        #000 14%,
        #000 86%,
        rgba(0,0,0,.72) 89%,
        rgba(0,0,0,.18) 95%,
        transparent 100%
      );
      -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.18) 5%,
        rgba(0,0,0,.72) 11%,
        #000 14%,
        #000 86%,
        rgba(0,0,0,.72) 89%,
        rgba(0,0,0,.18) 95%,
        transparent 100%
      );
    }

    .portfolio-track {
      display: flex;
      width: max-content;
      gap: 26px;
      animation: portfolioMarquee 34s linear infinite;
    }

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

    .portfolio-card {
      flex: 0 0 auto;
      width: 380px;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
        rgba(14,12,24,.86);
      box-shadow: 0 24px 70px rgba(0,0,0,.24);
      overflow: hidden;
    }

    .portfolio-video {
      aspect-ratio: 16 / 9;
      background: #FFFFFF;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .portfolio-card-body {
      padding: 20px 22px 22px;
    }

    .portfolio-card-title {
      margin: 0;
      color: #FFFFFF;
      font-size: 20px;
      line-height: 1.35;
      font-weight: 850;
      letter-spacing: -0.035em;
    }

    .portfolio-card-meta {
      margin: 8px 0 0;
      color: #AFA8C2;
      font-size: 14px;
      line-height: 1.6;
      font-weight: 500;
    }


    .portfolio-more {
      position: relative;
      z-index: 2;
      margin: 36px auto 0;
      text-align: center;
    }

    .portfolio-more a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #CFC5FF;
      font-size: 22px;
      line-height: 1;
      font-weight: 800;
      letter-spacing: -0.02em;
      text-decoration: none;
      transition: color .22s ease, transform .22s ease, text-shadow .22s ease;
    }

    .portfolio-more a:hover {
      color: #FF4FA3;
      transform: translateX(4px);
      text-shadow: 0 0 18px rgba(255,79,163,.16);
    }

    @media (max-width: 640px) {
      .portfolio-more {
        margin-top: 28px;
      }

      .portfolio-more a {
        font-size: 18px;
      }
    }



    .process-section {
      position: relative;
      padding: 124px 0 142px;
      background:
        radial-gradient(circle at 50% 16%, rgba(255,79,163,.075), transparent 28%),
        radial-gradient(circle at 82% 28%, rgba(207,197,255,.055), transparent 32%),
        linear-gradient(180deg, #050509 0%, #070711 50%, #050509 100%);
      overflow: hidden;
    }

    .process-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
      background-size: 54px 54px;
      opacity: .42;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.70), transparent 95%);
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.70), transparent 95%);
      pointer-events: none;
    }

    .process-inner {
      position: relative;
      z-index: 2;
      width: min(1560px, calc(100% - 56px));
      margin: 0 auto;
    }

    .process-intro {
      text-align: center;
      margin-bottom: 64px;
    }

    .process-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 28px;
      align-items: stretch;
    }

    .process-grid::before {
      content: "";
      position: absolute;
      left: 3%;
      right: 3%;
      top: 50%;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,79,163,.18) 14%,
        rgba(207,197,255,.18) 50%,
        rgba(255,79,163,.16) 86%,
        transparent 100%
      );
      transform: translateY(-50%);
      opacity: .42;
      pointer-events: none;
    }

    .process-flow-line {
      display: none;
    }

    .process-card {
      position: relative;
      min-height: 214px;
      padding: 28px 20px 26px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.13);
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014)),
        rgba(12, 12, 18, .82);
      box-shadow:
        0 22px 58px rgba(0,0,0,.24),
        inset 0 0 0 1px rgba(255,255,255,.018);
      overflow: hidden;
      isolation: isolate;
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
    }

    .process-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(90deg, rgba(255,79,163,.45), rgba(207,197,255,.24), transparent 72%) top left / 100% 1px no-repeat,
        radial-gradient(circle at 50% 36%, rgba(207,197,255,.08), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(207,197,255,.050), transparent 44%);
      pointer-events: none;
      z-index: 0;
    }

    .process-card:hover {
      transform: translateY(-6px);
      border-color: rgba(255, 126, 197, .30);
      background:
        linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.018)),
        rgba(14, 13, 21, .88);
      box-shadow:
        0 30px 78px rgba(0,0,0,.34),
        0 0 28px rgba(207,197,255,.050),
        inset 0 0 0 1px rgba(255,255,255,.025);
    }

    .process-card:not(:last-child)::after {
      content: "›";
      position: absolute;
      right: -22px;
      top: 50%;
      transform: translate(50%, -50%);
      z-index: 3;
      color: #D8CFFF;
      font-size: 42px;
      line-height: 1;
      font-weight: 300;
      opacity: .76;
      text-shadow:
        0 0 12px rgba(207,197,255,.18),
        0 0 18px rgba(255,79,163,.10);
      pointer-events: none;
    }

    .process-number,
    .process-icon,
    .process-card-title,
    .process-card-desc {
      position: relative;
      z-index: 1;
    }

    .process-number {
      display: block;
      margin: 0 0 18px;
      color: #FF73B8;
      font-size: 31px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: .08em;
      text-shadow: 0 0 14px rgba(255,79,163,.12);
    }


    .process-icon {
      position: relative;
      z-index: 1;
      width: 76px;
      height: 76px;
      margin: 0 auto 22px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .process-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      mix-blend-mode: screen;
    }

    @media (max-width: 640px) {
      .process-icon {
        width: 68px;
        height: 68px;
        margin-bottom: 20px;
      }
    }

    .process-card-title {
      margin: 0;
      color: #FFFFFF;
      font-size: 22px;
      line-height: 1.34;
      font-weight: 900;
      letter-spacing: -0.04em;
      text-align: center;
    }

    .process-card-title::after {
      content: "";
      display: block;
      width: 34px;
      height: 1px;
      margin: 15px auto 0;
      background: linear-gradient(90deg, transparent, #FF73B8, transparent);
      opacity: .78;
    }

    .process-card-desc {
      margin: 14px 0 0;
      color: rgba(255,255,255,.62);
      font-size: 14px;
      line-height: 1.68;
      font-weight: 520;
      letter-spacing: -0.025em;
      text-align: center;
      word-break: keep-all;
    }

    @media (max-width: 1180px) {
      .process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
      }

      .process-grid::before,
      .process-card:not(:last-child)::after {
        display: none;
      }
    }

    @media (max-width: 640px) {
      .process-section {
        padding: 88px 0 102px;
      }

      .process-inner {
        width: min(100% - 28px, 520px);
      }

      .process-intro {
        margin-bottom: 42px;
      }

      .process-grid {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .process-card {
        min-height: auto;
        padding: 25px 22px 25px;
        border-radius: 20px;
      }

      .process-card:not(:last-child)::after {
        display: block;
        right: 26px;
        top: auto;
        bottom: -24px;
        transform: rotate(90deg);
        font-size: 30px;
        opacity: .52;
      }

      .process-number {
        font-size: 26px;
        margin-bottom: 12px;
      }

      .process-card-title {
        font-size: 21px;
      }

      .process-card-desc {
        font-size: 14px;
      }
    }



    .team-section {
      position: relative;
      padding: 124px 0 150px;
      background:
        radial-gradient(circle at 18% 14%, rgba(207,197,255,.050), transparent 30%),
        radial-gradient(circle at 84% 18%, rgba(207,197,255,.045), transparent 32%),
        linear-gradient(180deg, #050509 0%, #070711 52%, #050509 100%);
      overflow: hidden;
    }

    .team-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
      background-size: 58px 58px;
      opacity: .34;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.68), transparent 96%);
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.68), transparent 96%);
      pointer-events: none;
    }

    .team-inner {
      position: relative;
      z-index: 2;
      width: min(1480px, calc(100% - 56px));
      margin: 0 auto;
    }

    .team-intro {
      text-align: center;
      margin-bottom: 62px;
    }

    .team-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px;
    }

    .team-card {
      position: relative;
      min-height: 196px;
      padding: 25px 24px 24px;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.012)),
        rgba(8, 11, 20, .82);
      box-shadow:
        0 18px 42px rgba(0,0,0,.22),
        inset 0 0 0 1px rgba(255,255,255,.012);
      overflow: hidden;
      transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
    }

    .team-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%),
        radial-gradient(circle at 100% 0%, rgba(207,197,255,.04), transparent 36%);
      pointer-events: none;
      opacity: .9;
    }

    .team-card:hover {
      transform: translateY(-6px);
      border-color: rgba(207, 197, 255, .24);
      box-shadow:
        0 26px 56px rgba(0,0,0,.30),
        0 0 24px rgba(207, 197, 255, .060),
        inset 0 0 0 1px rgba(255,255,255,.018);
    }

    .team-profile,
    .team-desc {
      position: relative;
      z-index: 1;
    }

    .team-profile {
      display: block;
      margin-bottom: 16px;
    }

    .team-label {
      display: inline-block;
      margin-top: 10px;
      margin-bottom: 0;
      color: #CFC5FF;
      font-size: 12px;
      line-height: 1.2;
      font-weight: 900;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .team-name {
      margin: 0;
      color: #FFFFFF;
      font-size: 27px;
      line-height: 1.16;
      font-weight: 900;
      letter-spacing: -0.05em;
    }

    .team-desc {
      margin: 12px 0 0;
      color: rgba(255,255,255,.64);
      font-size: 14px;
      line-height: 1.66;
      font-weight: 520;
      letter-spacing: -0.025em;
      word-break: keep-all;
      max-width: 100%;
    }

    @media (max-width: 1180px) {
      .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .team-name {
        font-size: 29px;
      }

      .team-desc {
        font-size: 15px;
      }
    }

    @media (max-width: 760px) {
      .team-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .team-section {
        padding: 88px 0 106px;
      }

      .team-inner {
        width: min(100% - 28px, 520px);
      }

      .team-intro {
        margin-bottom: 42px;
      }

      .team-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .team-card {
        min-height: auto;
        padding: 23px 22px 23px;
        border-radius: 22px;
      }

      .team-label {
        margin-bottom: 12px;
        font-size: 12px;
      }

      .team-name {
        font-size: 30px;
      }

      .team-desc {
        margin-top: 12px;
        font-size: 14px;
        max-width: 100%;
      }
    }


    .final-cta-section {
      position: relative;
      padding: 128px 0 140px;
      background:
        radial-gradient(circle at 50% 12%, rgba(255,79,163,.13), transparent 30%),
        radial-gradient(circle at 50% 82%, rgba(207,197,255,.075), transparent 34%),
        linear-gradient(180deg, #050509 0%, #080711 48%, #050509 100%);
      overflow: hidden;
    }

    .final-cta-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
      background-size: 58px 58px;
      opacity: .34;
      mask-image: radial-gradient(circle at 50% 48%, rgba(0,0,0,.78), transparent 72%);
      -webkit-mask-image: radial-gradient(circle at 50% 48%, rgba(0,0,0,.78), transparent 72%);
      pointer-events: none;
    }

    .final-cta-inner {
      position: relative;
      z-index: 2;
      width: min(1120px, calc(100% - 48px));
      margin: 0 auto;
      padding: 36px 48px 42px;
      text-align: center;
    }

    .final-cta-inner::before {
      content: none;
    }

    .final-cta-inner .section-kicker,
    .final-cta-inner .section-title,
    .final-cta-inner .section-desc,

    .final-cta-inner .section-kicker {
      margin-bottom: 18px;
    }

    .final-cta-inner .section-desc {
      margin-top: 22px;
    }

    .final-cta-button {
      position: relative;
      z-index: 1;
    }

    .final-cta-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 178px;
      height: 58px;
      margin-top: 42px;
      padding: 0 34px;
      border-radius: 999px;
      color: #FFFFFF;
      font-size: 18px;
      line-height: 1;
      font-weight: 850;
      letter-spacing: -0.025em;
      text-decoration: none;
      background: linear-gradient(135deg, #FF4FA3 0%, #9B5CFF 100%);
      box-shadow:
        0 16px 42px rgba(255,79,163,.22),
        inset 0 0 0 1px rgba(255,255,255,.18);
      transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
    }

    .final-cta-button:hover {
      transform: translateY(-3px);
      filter: brightness(1.05);
      box-shadow:
        0 22px 54px rgba(255,79,163,.25),
        0 0 24px rgba(207,197,255,.12),
        inset 0 0 0 1px rgba(255,255,255,.22);
    }

    @media (max-width: 640px) {
      .final-cta-section {
        padding: 90px 0 104px;
      }

      .final-cta-inner {
        width: min(100% - 28px, 520px);
        padding: 24px 20px 30px;
      }


      .final-cta-inner .section-kicker {
        margin-bottom: 14px;
      }

      .final-cta-inner .section-desc {
        margin-top: 18px;
      }

      .final-cta-button {
        height: 54px;
        min-width: 154px;
        margin-top: 34px;
        font-size: 16px;
      }
    }
@keyframes portfolioMarquee {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(calc(-50% - 13px));
      }
    }

    @media (max-width: 980px) {
      .portfolio-track-wrap {
        width: min(1180px, calc(100% - 28px));
      }

      .portfolio-card {
        width: 330px;
      }

      .portfolio-track {
        gap: 20px;
        animation-duration: 30s;
      }
    }

    @media (max-width: 640px) {
      .portfolio-section {
        padding: 92px 0 104px;
      }

      .portfolio-intro {
        margin-bottom: 42px;
      }

      .portfolio-track-wrap {
        width: calc(100% - 16px);
        border-radius: 24px;
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.65) 10%, #000 18%, #000 82%, rgba(0,0,0,.65) 90%, transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.65) 10%, #000 18%, #000 82%, rgba(0,0,0,.65) 90%, transparent 100%);
      }

      .portfolio-card {
        width: 280px;
        border-radius: 22px;
      }

      .portfolio-card-body {
        padding: 17px 18px 19px;
      }

      .portfolio-card-title {
        font-size: 18px;
      }
    }

    @media (max-width: 980px) {
      .cellbig-hero { padding-top: 88px; }
      .nav-shell { grid-template-columns: auto auto; height: 64px; }
      .nav-links { display: none; }
      .brand { min-width: auto; }
      .hero-inner { display: flex; }

    }

    @media (max-width: 640px) {
      .cellbig-hero { padding: 76px 20px 56px; }
      h1 { font-size: 43px; }
      .section-label { font-size: 21px; }
      .hero-copy { font-size: 16px; }
      .hero-copy br { display: none; }
      .site-header { top: 14px; padding: 0 16px; }
      .nav-shell { padding-left: 14px; gap: 12px; grid-template-columns: auto auto; }
      .brand { width: 168px; }
      .brand-logo { max-height: 26px; }
      .nav-button { height: 42px; padding: 0 16px; font-size: 12px; }
      .section-01-content { padding-left: 0; }
      .btn {
        min-width: 180px;
        height: 60px;
        padding: 0 34px;
        font-size: 20px;
      }
      .button-row { margin-top: 30px; }
      .advantage-grid { grid-template-columns: 1fr; gap: 38px; }
      .advantage-title { font-size: 24px; }
      .advantage-copy { font-size: 14px; }
      .adv-icon { width: 94px; height: 94px; }
      .advantage-copy br { display: none; }
    }

    .section-kicker {
      color: #FF4FA3 !important;
    }


    .compare-card-featured .compare-heading {
      color: #FF4FA3 !important;
      text-shadow: 0 0 14px rgba(255,79,163,.12);
    }


    .advantage-icon img,
    .feature-icon img,
    .adv-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .advantage-icon,
    .feature-icon,
    .adv-icon {
      overflow: hidden;
    }

    /* ===== Scroll Reveal Animations ===== */
    html { scroll-behavior: smooth; }

    @media (prefers-reduced-motion: no-preference) {
      [data-reveal] {
        opacity: 0;
        will-change: opacity, transform;
        transition:
          opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
          transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
          filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--reveal-delay, 0ms);
      }

      [data-reveal="up"]    { transform: translate3d(0, 36px, 0); }
      [data-reveal="down"]  { transform: translate3d(0, -28px, 0); }
      [data-reveal="left"]  { transform: translate3d(38px, 0, 0); }
      [data-reveal="right"] { transform: translate3d(-38px, 0, 0); }
      [data-reveal="fade"]  { transform: none; }
      [data-reveal="zoom"]  { transform: scale(0.94); filter: blur(6px); }
      [data-reveal="blur"]  { transform: translate3d(0, 24px, 0); filter: blur(10px); }

      [data-reveal].is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
      }
    }

    /* Hero content cascade on first paint */
    @keyframes heroRise {
      from { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(6px); }
      to   { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
    }

    .hero-inner .eyebrow,
    .hero-inner h1,
    .hero-inner .section-label,
    .hero-inner .hero-copy,
    .hero-inner .button-row {
      opacity: 0;
      animation: heroRise 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .hero-inner .eyebrow      { animation-delay: 120ms; }
    .hero-inner h1            { animation-delay: 260ms; }
    .hero-inner .section-label { animation-delay: 460ms; }
    .hero-inner .hero-copy    { animation-delay: 620ms; }
    .hero-inner .button-row   { animation-delay: 780ms; }

    /* Subtle scroll hint bobbing */
    @keyframes scrollHintBob {
      0%, 100% { transform: translate(-50%, 0); opacity: .52; }
      50%      { transform: translate(-50%, 6px); opacity: .82; }
    }
    .scroll-hint {
      animation: scrollHintBob 2.4s ease-in-out infinite;
    }

    /* Floating ambient motion for hero visual orbs */
    @keyframes floatY {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-10px); }
    }
    .floating-a { animation: floatY 7.5s ease-in-out infinite; }
    .floating-b { animation: floatY 9s   ease-in-out infinite -2.4s; }
    .floating-c { animation: floatY 8.2s ease-in-out infinite -4.0s; }

    /* Parallax for hero video & ambient layers */
    .hero-bg-video { will-change: transform; }

    /* Nav shrink on scroll */
    .site-header { transition: top 360ms cubic-bezier(0.22, 1, 0.36, 1); }
    .nav-shell {
      transition:
        height 360ms cubic-bezier(0.22, 1, 0.36, 1),
        background 360ms ease,
        box-shadow 360ms ease,
        border-color 360ms ease;
    }
    .site-header.is-scrolled { top: 14px; }
    .site-header.is-scrolled .nav-shell {
      height: 64px;
      background: rgba(8, 7, 14, .82);
      border-color: rgba(255,255,255,.14);
      box-shadow:
        0 14px 44px rgba(0,0,0,.46),
        inset 0 1px 0 rgba(255,255,255,.06);
    }

    .nav-links a:hover {
      color: #FF4FA3 !important;
    }

  



    /* ===== AI Studio Page Hero ===== */
    .page-studio.is-active .hero-inner .eyebrow,
    .page-studio.is-active .hero-inner h1,
    .page-studio.is-active .hero-inner .section-label,
    .page-studio.is-active .hero-inner .hero-copy,
    .page-studio.is-active .hero-inner .button-row {
      animation: heroRise 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .ai-studio-hero .eyebrow {
      color: #F5EFFF;
    }

    .ai-studio-hero .section-label {
      color: #CFC5FF;
      font-size: clamp(22px, 2.2vw, 31px);
      line-height: 1.36;
    }

    .ai-studio-hero .hero-copy {
      max-width: 720px;
    }



    /* ===== AI Studio Limitations Section ===== */
    .ai-studio-limitations {
      padding-top: 124px;
    }

    .studio-limitations-grid {
      grid-template-columns: repeat(3, minmax(260px, 1fr));
      max-width: 1180px;
      margin: 0 auto;
    }

    .studio-limitation-item {
      max-width: 360px;
    }

    .studio-number-icon {
      color: #FF4FA3;
      font-size: 28px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: .08em;
      text-shadow: 0 0 18px rgba(255,79,163,.22);
    }

    @media (max-width: 980px) {
      .studio-limitations-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .studio-limitation-item {
        max-width: 520px;
      }
    }



    /* ===== AI Studio Solution Section ===== */
    .ai-studio-solution {
      padding-top: 42px;
      background:
        radial-gradient(circle at 84% 14%, rgba(255,79,163,.075), transparent 28%),
        radial-gradient(circle at 18% 18%, rgba(124,58,237,.095), transparent 32%),
        linear-gradient(180deg, #050509 0%, #070711 48%, #050509 100%);
    }

    .studio-solution-grid {
      grid-template-columns: repeat(3, minmax(260px, 1fr));
      max-width: 1180px;
      margin: 0 auto;
    }

    .studio-solution-item {
      max-width: 380px;
    }

    .studio-solution-icon img {
      width: 76px;
      height: 76px;
      object-fit: contain;
      display: block;
      mix-blend-mode: screen;
    }

    @media (max-width: 980px) {
      .studio-solution-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .studio-solution-item {
        max-width: 520px;
      }
    }






    /* ===== AI Studio Business Impact Section ===== */
    .studio-impact-section {
      position: relative;
      padding: 118px 0 142px;
      background:
        radial-gradient(circle at 18% 18%, rgba(255,79,163,.075), transparent 28%),
        radial-gradient(circle at 82% 20%, rgba(124,58,237,.085), transparent 32%),
        linear-gradient(180deg, #050509 0%, #080813 50%, #050509 100%);
      overflow: hidden;
    }
    .studio-impact-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: 54px 54px;
      opacity: .42;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 96%);
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 96%);
      pointer-events: none;
    }
    .studio-impact-section .section-shell { position: relative; z-index: 2; }
    .studio-impact-intro { margin-bottom: 62px; text-align: center; }
    .studio-impact-kicker {
      display: block;
      margin-bottom: 18px;
      color: #FF6FBE;
      font-size: 16px;
      font-weight: 750;
      letter-spacing: .34em;
    }
    .studio-impact-kicker::before, .studio-impact-kicker::after { display: none; }
    .studio-impact-heading {
      color: #FFFFFF;
      background: none;
      -webkit-background-clip: initial;
      background-clip: initial;
    }
    .studio-impact-card-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 24px;
      width: min(1280px, calc(100% - 56px));
      margin: 0 auto;
    }
    .studio-impact-card {
      position: relative;
      min-height: 304px;
      padding: 34px 28px 32px;
      border-radius: 30px;
      border: 1px solid rgba(207,197,255,.20);
      background:
        radial-gradient(circle at 50% 0%, rgba(255,79,163,.085), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.058), rgba(255,255,255,.016)),
        rgba(12,11,22,.84);
      box-shadow: 0 24px 76px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.018);
      overflow: hidden;
      text-align: center;
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }
    .studio-impact-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255,79,163,.56), transparent 45%, rgba(207,197,255,.36)) top left / 100% 1px no-repeat,
        linear-gradient(90deg, rgba(255,79,163,.24), transparent 58%, rgba(207,197,255,.20)) bottom left / 100% 1px no-repeat;
      pointer-events: none;
    }
    .studio-impact-card:hover {
      transform: translateY(-6px);
      border-color: rgba(255,79,163,.38);
      background:
        radial-gradient(circle at 50% 0%, rgba(255,79,163,.12), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.074), rgba(255,255,255,.022)),
        rgba(16,14,28,.92);
      box-shadow: 0 34px 92px rgba(0,0,0,.35), 0 0 34px rgba(255,79,163,.10), inset 0 0 0 1px rgba(255,255,255,.026);
    }
    .studio-impact-icon {
      position: relative;
      z-index: 1;
      width: 72px;
      height: 72px;
      margin: 0 auto 24px;
      display: grid;
      place-items: center;
      color: #FF8FC8;
      border-radius: 50%;
      border: 1px solid rgba(255,79,163,.18);
      background: radial-gradient(circle, rgba(255,79,163,.10), rgba(255,255,255,.024) 68%, transparent 69%);
    }
    .studio-impact-icon svg {
      width: 42px;
      height: 42px;
      filter: drop-shadow(0 0 10px rgba(255,79,163,.16));
    }

    .studio-impact-icon img {
      width: 52px;
      height: 52px;
      object-fit: contain;
      display: block;
      mix-blend-mode: screen;
      filter: drop-shadow(0 0 10px rgba(255,79,163,.16));
    }

    .studio-impact-title {
      position: relative;
      z-index: 1;
      margin: 0 0 16px;
      color: #CFC5FF;
      font-size: 22px;
      line-height: 1.24;
      font-weight: 830;
      letter-spacing: -0.04em;
    }
    .studio-impact-number {
      position: relative;
      z-index: 1;
      display: block;
      margin: 0 0 18px;
      color: #FFFFFF;
      font-size: clamp(38px, 3.2vw, 50px);
      line-height: .95;
      font-weight: 950;
      letter-spacing: -0.07em;
      text-shadow: 0 0 22px rgba(255,79,163,.22);
    }
    .studio-impact-copy {
      position: relative;
      z-index: 1;
      margin: 0;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.10);
      color: #B9B4C7;
      font-size: 15.5px;
      line-height: 1.58;
      font-weight: 520;
      letter-spacing: -0.035em;
    }
    @media (max-width: 1180px) {
      .studio-impact-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 640px) {
      .studio-impact-section { padding: 92px 0 108px; }
      .studio-impact-intro { margin-bottom: 42px; }
      .studio-impact-card-grid {
        grid-template-columns: 1fr;
        width: min(100% - 28px, 520px);
        gap: 18px;
      }
      .studio-impact-card {
        min-height: 260px;
        padding: 30px 22px 28px;
        border-radius: 24px;
      }
      .studio-impact-title { font-size: 20px; }
      .studio-impact-copy { font-size: 15px; }
    }


    /* ===== Portfolio Archive Page ===== */
    .page-portfolio {
      background: #050509;
    }

    .portfolio-archive-page {
      position: relative;
      min-height: auto;
      padding: 188px 0 34px;
      overflow: hidden;
      background:
        radial-gradient(circle at 60% 12%, rgba(151, 92, 255, .18), transparent 30%),
        radial-gradient(circle at 82% 4%, rgba(255, 79, 163, .12), transparent 24%),
        linear-gradient(180deg, #050509 0%, #060711 58%, #050509 100%);
    }

    .portfolio-archive-page::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
      background-size: 54px 54px;
      opacity: .55;
      pointer-events: none;
    }

    .portfolio-archive-page::after {
      content: "";
      position: absolute;
      right: 19%;
      top: 112px;
      width: min(520px, 36vw);
      height: 270px;
      background:
        linear-gradient(100deg, transparent 0 24%, rgba(207,197,255,.16) 25%, transparent 26% 42%, rgba(255,79,163,.34) 43%, rgba(207,197,255,.24) 50%, transparent 58%),
        radial-gradient(circle at 72% 68%, rgba(255,79,163,.32), transparent 44%);
      clip-path: polygon(18% 18%, 68% 0, 86% 20%, 72% 78%, 16% 96%, 0 64%);
      filter: blur(.2px) drop-shadow(0 0 42px rgba(255,79,163,.12));
      opacity: .82;
      pointer-events: none;
    }

    .portfolio-archive-shell {
      position: relative;
      z-index: 2;
      width: min(1760px, calc(100% - 96px));
      margin: 0 auto;
    }

    .portfolio-archive-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(260px, .34fr);
      gap: 48px;
      align-items: end;
      margin-bottom: 40px;
    }

    .portfolio-page-kicker {
      margin: 0 0 18px;
      color: #FF6FBE;
      font-size: 17px;
      line-height: 1;
      font-weight: 760;
      letter-spacing: .34em;
    }

    .portfolio-page-title {
      margin: 0;
      color: #FFFFFF;
      font-size: clamp(48px, 4.6vw, 82px);
      line-height: 1.1;
      font-weight: 900;
      letter-spacing: -0.035em;
    }

    .portfolio-page-copy {
      margin: 22px 0 0;
      max-width: 720px;
      color: #B9B4C7;
      font-size: 18px;
      line-height: 1.72;
      font-weight: 500;
      letter-spacing: -0.03em;
      word-break: keep-all;
    }

    .portfolio-impact-panel {
      padding: 6px 0 0;
      justify-self: end;
      min-width: 340px;
    }

    .portfolio-impact-label {
      margin: 0 0 22px;
      color: #FF7CBD;
      font-size: 15px;
      font-weight: 850;
      letter-spacing: .16em;
    }

    .portfolio-impact-row {
      display: grid;
      grid-template-columns: 106px 1fr;
      gap: 24px;
      align-items: baseline;
      padding: 10px 0;
      color: #FFFFFF;
    }


    .portfolio-count.is-counted {
      text-shadow:
        0 0 14px rgba(255,255,255,.14),
        0 0 24px rgba(255,79,163,.16);
    }

    .portfolio-impact-row strong {
      font-size: 40px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: -0.045em;
    }

    .portfolio-impact-row span {
      color: #B9B4C7;
      font-size: 16px;
      letter-spacing: -0.025em;
    }

    .portfolio-studio-link {
      display: inline-flex;
      align-items: center;
      gap: 20px;
      margin-top: 18px;
      color: #FF7CBD;
      font-weight: 780;
      letter-spacing: -0.025em;
    }

    .portfolio-filter-row {
      position: relative;
      z-index: 3;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 16px;
      width: 100%;
      margin: 0 0 32px;
      padding-left: 0;
    }

    .portfolio-filter-button {
      height: 50px;
      min-width: 128px;
      padding: 0 34px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      color: #D8D4E4;
      background: rgba(255,255,255,.025);
      font-size: 16px;
      font-weight: 720;
      letter-spacing: -0.03em;
    }

    .portfolio-filter-button.is-active {
      color: #FFFFFF;
      border-color: rgba(255,79,163,.62);
      background: rgba(255,79,163,.12);
      box-shadow: 0 0 22px rgba(255,79,163,.12);
    }


    .portfolio-showcase {
      position: relative;
      padding: 0 0 72px;
      background: #050509;
    }

    .portfolio-showcase-shell {
      width: min(1540px, calc(100% - 96px));
      margin: 0 auto;
    }

    .portfolio-main-works {
      display: grid;
      gap: 22px;
    }

    .portfolio-feature-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr);
      min-height: 350px;
      margin-bottom: 22px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.13);
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
        rgba(10,10,18,.88);
      overflow: hidden;
      box-shadow:
        0 28px 90px rgba(0,0,0,.34),
        inset 0 0 0 1px rgba(255,255,255,.02);
    }

    .portfolio-feature-card,
    .portfolio-work-card {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.035);
      box-shadow: 0 24px 78px rgba(0,0,0,.28);
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .portfolio-feature-card:hover,
    .portfolio-work-card:hover {
      transform: translateY(-5px);
      border-color: rgba(255,79,163,.34);
      box-shadow: 0 34px 92px rgba(0,0,0,.38), 0 0 36px rgba(255,79,163,.10);
    }

    .portfolio-feature-card {
      height: 350px;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .portfolio-feature-card:nth-child(2) {
      display: grid;
      place-items: center;
      padding: 54px 56px;
      border-left: 1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(circle at 100% 0%, rgba(255,79,163,.12), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
    }

    .portfolio-feature-card:nth-child(2) .portfolio-thumb {
      display: none;
    }

    .portfolio-feature-card:nth-child(2) .portfolio-card-content {
      position: relative;
      inset: auto;
      width: 100%;
    }

    .portfolio-feature-card:nth-child(2) .portfolio-card-content h3 {
      font-size: clamp(32px, 3vw, 44px);
      margin-bottom: 18px;
    }

    .portfolio-feature-card:nth-child(2) .portfolio-card-content p {
      max-width: 560px;
      font-size: 17px;
      line-height: 1.75;
    }

    .portfolio-feature-card:nth-child(2) .portfolio-card-arrow {
      top: 32px;
      right: 32px;
      bottom: auto;
    }


    .portfolio-brand-marquee-section {
      position: relative;
      width: min(1760px, calc(100% - 96px));
      margin: 0 auto 34px;
      padding: 32px 0 30px;
      overflow: hidden;
      background: #000000;
    }

    .portfolio-brand-marquee-section::before,
    .portfolio-brand-marquee-section::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 150px;
      z-index: 2;
      pointer-events: none;
    }

    .portfolio-brand-marquee-section::before {
      left: 0;
      background: linear-gradient(90deg, #080913 0%, rgba(8,9,19,.88) 38%, transparent 100%);
    }

    .portfolio-brand-marquee-section::after {
      right: 0;
      background: linear-gradient(270deg, #080913 0%, rgba(8,9,19,.88) 38%, transparent 100%);
    }

    .portfolio-brand-marquee-head {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: baseline;
      gap: 22px;
      width: 100%;
      margin: 0 0 26px;
      padding-left: 0;
    }

    .portfolio-brand-marquee-head span {
      color: #FF7CBD;
      font-size: 15px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: .24em;
    }

    .portfolio-brand-marquee-head p {
      margin: 0;
      color: #FFFFFF;
      font-size: 17px;
      font-weight: 760;
      letter-spacing: -0.03em;
    }

    .portfolio-brand-marquee-wrap {
      position: relative;
      z-index: 1;
      width: 100%;
      overflow: hidden;
      padding: 8px 0 2px;
    }

    .portfolio-brand-marquee-track {
      display: flex;
      align-items: center;
      gap: 74px;
      width: max-content;
      animation: portfolioBrandFlow 34s linear infinite;
      will-change: transform;
    }

    .portfolio-brand-logo-item {
      height: 72px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      opacity: .96;
      filter:
        drop-shadow(0 0 8px rgba(255,255,255,.04))
        drop-shadow(0 0 14px rgba(255,79,163,.06));
    }

    .portfolio-brand-logo-image {
      display: block;
      width: auto;
      max-width: 260px;
      max-height: 58px;
      object-fit: contain;
      user-select: none;
      -webkit-user-drag: none;
    }

    @keyframes portfolioBrandFlow {
      from { transform: translateX(0); }
      to { transform: translateX(calc(-50% - 37px)); }
    }

    @media (max-width: 1280px) {
      .portfolio-filter-row {
        width: 100%;
        padding-left: 0;
      }

      .portfolio-brand-marquee-section {
        width: min(100% - 48px, 1100px);
      }
    }

    @media (max-width: 860px) {
      .portfolio-filter-row {
        width: 100%;
        justify-content: center;
        margin: 0 0 26px;
      }

      .portfolio-brand-marquee-section {
        width: min(100% - 28px, 720px);
        padding: 26px 0 24px;
      }

      .portfolio-brand-marquee-section::before,
      .portfolio-brand-marquee-section::after {
        width: 72px;
      }

      .portfolio-brand-marquee-head {
        display: block;
        width: min(100% - 32px, 720px);
      }

      .portfolio-brand-marquee-head p {
        margin-top: 9px;
      }

      .portfolio-brand-marquee-track {
        gap: 44px;
        animation-duration: 26s;
      }

      .portfolio-brand-logo-item {
        height: 54px;
      }

      .portfolio-brand-logo-image {
        max-width: 170px;
        max-height: 38px;
      }
    }



    .portfolio-work-grid {
      align-items: stretch;
    }

    .portfolio-work-card {
      min-width: 0;
    }

    .portfolio-work-card.is-hidden {
      display: none;
    }

    .portfolio-work-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
    }

    .portfolio-work-card {
      min-height: 320px;
      border-radius: 16px;
    }

    .portfolio-thumb {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.74)),
        radial-gradient(circle at 75% 35%, rgba(255,79,163,.42), transparent 35%),
        linear-gradient(135deg, rgba(60,54,104,.95), rgba(14,13,28,.98));
    }

    .portfolio-thumb::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .82;
      background: var(--thumb-art);
      mix-blend-mode: screen;
    }

    .portfolio-thumb::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 34%, rgba(0,0,0,.76) 100%);
    }

    .thumb-city { --thumb-art: radial-gradient(circle at 68% 38%, rgba(255,156,221,.65), transparent 24%), linear-gradient(100deg, transparent 0 34%, rgba(255,79,163,.36) 35% 38%, transparent 39%), linear-gradient(90deg, rgba(71,60,125,.55), rgba(255,79,163,.16)); }
    .thumb-beauty { --thumb-art: radial-gradient(circle at 63% 30%, rgba(255,210,236,.58), transparent 22%), radial-gradient(circle at 42% 48%, rgba(172,101,255,.34), transparent 34%), linear-gradient(110deg, rgba(255,79,163,.16), transparent); }
    .thumb-wave { --thumb-art: radial-gradient(ellipse at 42% 46%, rgba(205,147,255,.8), transparent 26%), linear-gradient(105deg, transparent 10%, rgba(255,79,163,.28), transparent 58%); }
    .thumb-drone { --thumb-art: radial-gradient(circle at 55% 38%, rgba(210,223,255,.42), transparent 22%), linear-gradient(150deg, rgba(143,180,220,.22), transparent 42%); }
    .thumb-room { --thumb-art: radial-gradient(circle at 55% 40%, rgba(255,202,162,.40), transparent 22%), linear-gradient(90deg, rgba(255,255,255,.10), transparent 50%); }
    .thumb-motion { --thumb-art: radial-gradient(ellipse at 45% 46%, rgba(250,157,230,.58), transparent 22%), radial-gradient(circle at 60% 30%, rgba(178,107,255,.32), transparent 32%); }
    .thumb-space { --thumb-art: radial-gradient(circle at 78% 24%, rgba(255,255,255,.55), transparent 8%), radial-gradient(circle at 58% 48%, rgba(109,151,255,.28), transparent 38%); }

    .portfolio-card-content {
      position: absolute;
      inset: auto 28px 28px 28px;
      z-index: 2;
    }

    .portfolio-category {
      display: block;
      margin-bottom: 11px;
      color: #FF7CBD;
      font-size: 14px;
      line-height: 1;
      font-weight: 760;
      letter-spacing: -0.02em;
    }

    .portfolio-card-content h3 {
      margin: 0;
      color: #FFFFFF;
      font-size: 28px;
      line-height: 1.2;
      font-weight: 830;
      letter-spacing: -0.045em;
    }

    .portfolio-card-content p {
      margin: 12px 0 0;
      color: #C8C1D4;
      font-size: 15px;
      line-height: 1.55;
      letter-spacing: -0.025em;
      word-break: keep-all;
    }

    .portfolio-card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      margin-top: 20px;
      color: rgba(255,255,255,.68);
      font-size: 13px;
    }

    .portfolio-tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 22px;
    }

    .portfolio-tag-row span {
      height: 32px;
      display: inline-flex;
      align-items: center;
      padding: 0 15px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.10);
      color: #D8D4E4;
      background: rgba(255,255,255,.03);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.025em;
    }

    .portfolio-card-arrow {
      position: absolute;
      right: 24px;
      bottom: 24px;
      z-index: 3;
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid rgba(255,79,163,.42);
      color: #FF7CBD;
      font-size: 24px;
      background: rgba(0,0,0,.18);
    }

    .portfolio-work-card .portfolio-card-content {
      inset: auto 22px 22px 22px;
    }

    .portfolio-work-card .portfolio-card-content h3 {
      font-size: 23px;
    }

    .portfolio-work-card .portfolio-card-arrow {
      width: 38px;
      height: 38px;
      right: 18px;
      bottom: 18px;
      font-size: 18px;
      border-color: rgba(255,255,255,.18);
      color: #FFFFFF;
    }

    .portfolio-duration {
      position: absolute;
      top: 15px;
      right: 15px;
      z-index: 3;
      padding: 5px 9px;
      border-radius: 999px;
      color: #FFFFFF;
      background: rgba(0,0,0,.48);
      font-size: 12px;
      font-weight: 680;
    }

    .portfolio-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 22px;
      margin: 34px 0 44px;
    }

    .portfolio-pagination a,
    .portfolio-pagination button {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid transparent;
      background: transparent;
      color: #C8C1D4;
      font-size: 15px;
      font-weight: 600;
    }


    .portfolio-pagination button:disabled {
      opacity: .28;
      cursor: not-allowed;
      pointer-events: none;
    }

    .portfolio-pagination .is-active {
      color: #FF7CBD;
      border-color: rgba(255,79,163,.56);
      box-shadow: 0 0 18px rgba(255,79,163,.10);
    }

    @media (max-width: 1280px) {
      .portfolio-feature-grid {
        grid-template-columns: 1fr;
      }
      .portfolio-feature-card:nth-child(2) {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.10);
      }
      .portfolio-work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 860px) {
      .portfolio-showcase-shell {
        width: min(100% - 28px, 720px);
      }
      .portfolio-feature-card {
        height: 300px;
      }
      .portfolio-work-grid {
        grid-template-columns: 1fr;
      }
      .portfolio-work-card {
        min-height: 260px;
      }
    }

    .portfolio-archive-bottom {
      width: min(1760px, calc(100% - 96px));
      margin: 0 auto 76px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 28px;
      align-items: center;
      padding: 28px 32px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(circle at 82% 50%, rgba(255,79,163,.16), transparent 26%),
        linear-gradient(90deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    }

    .portfolio-archive-bottom h2 {
      margin: 0;
      color: #FFFFFF;
      font-size: 25px;
      line-height: 1.35;
      font-weight: 830;
      letter-spacing: -0.045em;
    }

    .portfolio-archive-bottom p {
      margin: 7px 0 0;
      color: #B9B4C7;
      font-size: 15px;
      letter-spacing: -0.025em;
    }

    .portfolio-archive-bottom a {
      display: inline-flex;
      align-items: center;
      gap: 28px;
      height: 54px;
      padding: 0 34px;
      border-radius: 999px;
      color: #07060B;
      background: linear-gradient(135deg, #FF6FBE, #FF4FA3);
      font-weight: 860;
      letter-spacing: -0.03em;
    }

    @media (max-width: 1280px) {
      .portfolio-archive-hero,
      .portfolio-showcase-shell {
        grid-template-columns: 1fr;
      }
      .portfolio-impact-panel {
        justify-self: start;
        display: flex;
        flex-wrap: wrap;
        gap: 22px 42px;
      }
      .portfolio-impact-label,
      .portfolio-studio-link {
        width: 100%;
      }
      .portfolio-work-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .portfolio-side-rail {
        display: grid;
        grid-template-columns: 240px 1fr auto;
        gap: 24px;
        align-items: start;
      }
      .portfolio-side-rail p,
      .portfolio-side-rail a {
        margin-top: 0;
      }
    }

    @media (max-width: 860px) {
      .portfolio-archive-page {
        padding-top: 116px;
      }
      .portfolio-archive-shell,
      .portfolio-showcase-shell,
      .portfolio-archive-bottom {
        width: min(100% - 28px, 720px);
      }
      .portfolio-feature-grid,
      .portfolio-work-grid,
      .portfolio-archive-bottom {
        grid-template-columns: 1fr;
      }
      .portfolio-feature-card {
        height: 300px;
      }
      .portfolio-work-card {
        min-height: 260px;
      }
      .portfolio-side-rail {
        display: block;
      }
      .portfolio-side-rail p,
      .portfolio-side-rail a {
        margin-top: 24px;
      }
      .portfolio-archive-bottom a {
        justify-content: center;
      }
    }


    /* ===== Multi-page Routing ===== */
    .page { display: none; }
    .page.is-active { display: block; }

    .nav-links a.is-current,
    .nav-links a.is-current:hover {
      color: #FF4FA3 !important;
      background: rgba(255, 79, 163, .10);
    }
    .nav-links a {
      transition: color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
    }

    /* Hero animations should re-trigger on page switch */
    .page-video.is-active .hero-inner .eyebrow,
    .page-story.is-active .story-page-kicker,
    .page-story.is-active .story-page-title,
    .page-story.is-active .story-page-subtitle,
    .page-story.is-active .story-page-copy,
    .page-story.is-active .story-hero-actions,
    .page-video.is-active .hero-inner h1,
    .page-video.is-active .hero-inner .section-label,
    .page-video.is-active .hero-inner .hero-copy,
    .page-video.is-active .hero-inner .button-row {
      animation: heroRise 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

  
    /* Portfolio more link hover: match final CTA portfolio link */
    .portfolio-more a:hover {
      color: #FF4FA3 !important;
      transform: translateX(4px);
      text-shadow: 0 0 18px rgba(255,79,163,.16);
    }

  
    /* Service card hover interaction — quick lift, slight scale, sibling shrink */
    .service-type-section .service-card-grid .service-card {
      transition:
        transform .18s cubic-bezier(0.22, 1, 0.36, 1),
        border-color .20s ease,
        box-shadow .20s ease,
        background .20s ease,
        filter .20s ease,
        opacity .20s ease;
      transform-origin: center center;
    }

    .service-type-section .service-card-grid:hover .service-card[data-reveal].is-visible,
    .service-type-section .service-card-grid:hover .service-card {
      transform: scale(.975) !important;
      opacity: .88;
    }

    .service-type-section .service-card-grid:hover .service-card[data-reveal].is-visible:hover,
    .service-type-section .service-card-grid:hover .service-card:hover {
      z-index: 6;
      transform: translateY(-6px) scale(1.025) !important;
      opacity: 1;
    }

  
    .studio-image-icon img {
      width: 76px;
      height: 76px;
      object-fit: contain;
      display: block;
      mix-blend-mode: screen;
    }

  
    /* Video Production Compare Section - LOOMIX card item title color */
    .page-video .compare-card.featured .compare-feature-title,
    .page-video .compare-card.is-featured .compare-feature-title,
    .page-video .loomix-card .compare-feature-title,
    .page-video .vp-compare-card.featured .compare-feature-title,
    .page-video .vp-compare-card.is-featured .compare-feature-title {
      color: #FFFFFF !important;
    }


    /* Video Production Compare Section - featured LOOMIX term title fix */
    .page-video .compare-card-featured .compare-term {
      color: #FFFFFF !important;
    }


    /* Portfolio grid hard layout fix */
    .page-portfolio .portfolio-work-grid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 22px !important;
      width: 100%;
      align-items: stretch;
    }

    .page-portfolio .portfolio-work-card {
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
    }

    .page-portfolio .portfolio-work-card.is-hidden {
      display: none !important;
    }

    @media (max-width: 860px) {
      .page-portfolio .portfolio-work-grid {
        grid-template-columns: 1fr !important;
      }
    }


    /* Portfolio stable 3x3 layout override */
    .page-portfolio .portfolio-main-works {
      display: block !important;
      width: 100%;
    }

    .page-portfolio .portfolio-work-grid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 22px !important;
      width: 100% !important;
      align-items: stretch !important;
    }

    .page-portfolio .portfolio-work-card {
      display: block !important;
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      grid-column: auto !important;
      min-height: 320px;
    }

    .page-portfolio .portfolio-pagination {
      width: 100%;
      display: flex !important;
      justify-content: center;
      align-items: center;
    }

    .page-portfolio .portfolio-pagination button:disabled {
      opacity: .28;
      cursor: not-allowed;
      pointer-events: none;
    }

    @media (max-width: 860px) {
      .page-portfolio .portfolio-work-grid {
        grid-template-columns: 1fr !important;
      }
    }





    .page-portfolio .portfolio-archive-bottom .portfolio-bottom-inquiry-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 184px;
      height: 58px;
      border-radius: 999px;
      color: #FFFFFF;
      text-decoration: none;
      font-size: 18px;
      font-weight: 900;
      letter-spacing: -0.035em;
      background: linear-gradient(90deg, #E24BCB 0%, #B75CF5 100%);
      box-shadow: none;
      border: 0;
      transition: transform .22s ease, filter .22s ease;
    }

    .page-portfolio .portfolio-archive-bottom .portfolio-bottom-inquiry-button:hover {
      transform: translateY(-2px);
      filter: brightness(1.06);
    }

    @media (max-width: 640px) {
      .page-portfolio .portfolio-archive-bottom .portfolio-bottom-inquiry-button {
        width: 184px;
        max-width: 100%;
      }
    }






    .page-home .home-hero a[href="#portfolio"]:hover,
    .page-home .home-hero .btn-secondary[href="#portfolio"]:hover {
      color: #FF4FA3 !important;
    }



    /* Spacing between brand-logo marquee and filter row + works list */
    .page-portfolio .portfolio-brand-marquee-section {
      margin-bottom: 110px;
    }
    .page-portfolio .portfolio-main-works {
      padding-top: 12px;
    }
    @media (max-width: 1180px) {
      .page-portfolio .portfolio-brand-marquee-section {
        margin-bottom: 84px;
      }
    }
    @media (max-width: 640px) {
      .page-portfolio .portfolio-brand-marquee-section {
        margin-bottom: 56px;
      }
    }

    .page-portfolio .portfolio-filter-button {
      position: relative;
      z-index: 0;
      overflow: visible;
      transition:
        color .24s ease,
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease,
        background .24s ease;
    }

    .page-portfolio .portfolio-filter-button::before {
      content: "";
      position: absolute;
      inset: -3px;
      z-index: -1;
      border-radius: inherit;
      border: 1px solid rgba(255,79,163,0);
      opacity: 0;
      pointer-events: none;
      transition:
        opacity .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
    }

    .page-portfolio .portfolio-filter-button:hover {
      color: #FF4FA3 !important;
      transform: translateY(-2px);
      border-color: rgba(255,79,163,.72);
      background:
        linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.025)),
        rgba(12,10,20,.62);
      box-shadow:
        0 18px 44px rgba(0,0,0,.28),
        0 0 0 1px rgba(255,79,163,.28) inset,
        0 0 16px rgba(255,79,163,.26),
        0 0 30px rgba(155,92,255,.12);
    }

    .page-portfolio .portfolio-filter-button:hover::before {
      opacity: 1;
      border-color: rgba(255,79,163,.42);
      box-shadow:
        0 0 18px rgba(255,79,163,.24),
        0 0 34px rgba(155,92,255,.12);
    }

    .page-portfolio .portfolio-filter-button.is-active {
      color: #FFFFFF;
      border-color: rgba(255,79,163,.72);
      background:
        linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.025)),
        rgba(12,10,20,.62);
      box-shadow:
        0 18px 44px rgba(0,0,0,.28),
        0 0 0 1px rgba(255,79,163,.28) inset,
        0 0 16px rgba(255,79,163,.20),
        0 0 30px rgba(155,92,255,.10);
    }

    .page-portfolio .portfolio-filter-button.is-active:hover {
      color: #FF4FA3 !important;
    }







    /* Story page uses the exact portfolio hero layout */
    .page-story .story-portfolio-copy-hero {
      position: relative;
    }

    .page-story .portfolio-archive-page.story-portfolio-copy-hero {
      display: flex;
    }

    .page-story .portfolio-archive-shell {
      position: relative;
      z-index: 2;
    }



    /* Story hero text-only adjustment */
    .page-story .portfolio-archive-hero {
      display: block;
    }

    .page-story .portfolio-hero-copy {
      max-width: 980px;
    }



    /* Story page brand marquee section */
    .page-story .story-brand-marquee-section {
      position: relative;
      z-index: 2;
      width: min(1760px, calc(100% - 96px));
      margin: 0 auto;
      padding: 64px 0 62px;
      overflow: hidden;
      background: #000000;
    }

    .page-story .story-brand-marquee-section::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        radial-gradient(circle at 18% 20%, rgba(255,79,163,.08), transparent 30%),
        radial-gradient(circle at 82% 70%, rgba(155,92,255,.08), transparent 34%);
      pointer-events: none;
    }

    .page-story .story-brand-marquee-section .portfolio-brand-marquee-head,
    .page-story .story-brand-marquee-section .portfolio-brand-marquee-wrap {
      position: relative;
      z-index: 1;
    }

    .page-story .story-brand-marquee-section .portfolio-brand-marquee-head {
      width: 100%;
      margin: 0 0 28px;
      padding-left: 0;
    }

    .page-story .story-brand-marquee-section .portfolio-brand-marquee-wrap {
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    }

    @media (max-width: 980px) {
      .page-story .story-brand-marquee-section {
        width: min(100% - 48px, 1100px);
        padding: 52px 0 54px;
      }
    }

    @media (max-width: 640px) {
      .page-story .story-brand-marquee-section {
        width: min(100% - 28px, 720px);
        padding: 42px 0 46px;
      }
    }



    /* Story timeline section */
    .story-timeline-section {
      position: relative;
      padding: 118px 24px 132px;
      background:
        radial-gradient(circle at 78% 20%, rgba(255,79,163,.08), transparent 30%),
        radial-gradient(circle at 20% 18%, rgba(59,130,246,.08), transparent 34%),
        linear-gradient(180deg, #000000 0%, #060711 48%, #050509 100%);
      overflow: hidden;
    }

    .story-timeline-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
      background-size: 64px 64px;
      opacity: .38;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 96%);
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 96%);
      pointer-events: none;
    }

    .story-timeline-shell {
      position: relative;
      z-index: 2;
      width: min(1240px, calc(100% - 64px));
      margin: 0 auto;
    }

    .story-timeline-intro {
      max-width: 980px;
      margin: 0 auto 64px;
      text-align: center;
    }

    .story-timeline {
      position: relative;
      display: grid;
      gap: 0;
      max-width: 980px;
      margin: 0 auto;
      padding: 6px 0;
    }

    .story-timeline::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 1px;
      transform: translateX(-50%);
      background:
        linear-gradient(180deg, transparent 0%, rgba(207,197,255,.52) 8%, rgba(207,197,255,.42) 88%, transparent 100%);
      box-shadow:
        0 0 18px rgba(207,197,255,.18),
        0 0 32px rgba(255,79,163,.08);
    }

    .timeline-item {
      position: relative;
      min-height: 128px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: start;
    }

    .timeline-dot {
      position: absolute;
      left: 50%;
      top: 12px;
      width: 13px;
      height: 13px;
      border-radius: 999px;
      transform: translateX(-50%);
      background: #06101F;
      border: 2px solid rgba(207,197,255,.86);
      box-shadow:
        0 0 0 5px rgba(207,197,255,.08),
        0 0 18px rgba(207,197,255,.34);
      z-index: 3;
    }

    .timeline-content {
      position: relative;
      width: min(100%, 390px);
      padding: 0 28px;
    }

    .timeline-item.is-left .timeline-content {
      grid-column: 1;
      justify-self: end;
      text-align: right;
      padding-left: 0;
      padding-right: 48px;
    }

    .timeline-item.is-right .timeline-content {
      grid-column: 2;
      justify-self: start;
      text-align: left;
      padding-right: 0;
      padding-left: 48px;
    }

    .timeline-content time {
      display: block;
      margin-bottom: 8px;
      color: #FF4FA3;
      font-size: 15px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: .02em;
    }

    .timeline-content h3 {
      margin: 0;
      color: #FFFFFF;
      font-size: clamp(20px, 1.8vw, 25px);
      line-height: 1.26;
      font-weight: 900;
      letter-spacing: -0.045em;
      word-break: keep-all;
    }

    .timeline-content p {
      margin: 10px 0 0;
      color: #CFC5FF;
      font-size: 14px;
      line-height: 1.65;
      font-weight: 560;
      letter-spacing: -0.025em;
      word-break: keep-all;
    }

    @media (max-width: 820px) {
      .story-timeline-shell {
        width: min(100% - 32px, 720px);
      }

      .story-timeline {
        max-width: 640px;
        margin-left: 0;
      }

      .story-timeline::before {
        left: 18px;
      }

      .timeline-item {
        min-height: auto;
        grid-template-columns: 1fr;
        padding: 0 0 38px 54px;
      }

      .timeline-dot {
        left: 18px;
        top: 4px;
      }

      .timeline-item.is-left .timeline-content,
      .timeline-item.is-right .timeline-content {
        grid-column: 1;
        justify-self: start;
        width: 100%;
        text-align: left;
        padding: 0;
      }
    }

    @media (max-width: 640px) {
      .story-timeline-section {
        padding: 86px 20px 96px;
      }

      .story-timeline-intro {
        margin-bottom: 44px;
      }

      .timeline-content h3 {
        font-size: 20px;
      }
    }



    /* Story LX Engine reason section */
    .story-engine-reason-section {
      position: relative;
      padding: 112px 24px 132px;
      background:
        radial-gradient(circle at 18% 18%, rgba(255,79,163,.075), transparent 30%),
        radial-gradient(circle at 82% 22%, rgba(207,197,255,.055), transparent 34%),
        linear-gradient(180deg, #050509 0%, #070711 50%, #050509 100%);
      overflow: hidden;
    }

    .story-engine-reason-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
      background-size: 58px 58px;
      opacity: .34;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.66), transparent 96%);
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.66), transparent 96%);
      pointer-events: none;
    }

    .story-engine-reason-shell {
      position: relative;
      z-index: 2;
      width: min(1480px, calc(100% - 56px));
      margin: 0 auto;
    }

    .story-engine-reason-intro {
      max-width: 980px;
      margin: 0 auto 54px;
      text-align: center;
    }

    .story-engine-stat-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      margin-bottom: 18px;
    }

    .story-engine-stat-card {
      position: relative;
      min-height: 142px;
      padding: 30px 24px 28px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.11);
      background:
        radial-gradient(circle at 50% 0%, rgba(207,197,255,.075), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.012)),
        rgba(8, 10, 18, .82);
      box-shadow:
        0 20px 54px rgba(0,0,0,.24),
        inset 0 0 0 1px rgba(255,255,255,.014);
      text-align: center;
      overflow: hidden;
      transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
    }

    .story-engine-stat-card::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(207,197,255,.48), transparent);
      opacity: .72;
    }

    .story-engine-stat-card strong {
      display: block;
      color: #CFC5FF;
      font-size: clamp(24px, 2.3vw, 34px);
      line-height: 1.05;
      font-weight: 950;
      letter-spacing: -0.055em;
    }

    .story-engine-stat-card span {
      display: block;
      margin-top: 12px;
      color: rgba(255,255,255,.72);
      font-size: 14px;
      line-height: 1.5;
      font-weight: 720;
      letter-spacing: -0.025em;
      word-break: keep-all;
    }

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

    .story-engine-detail-card {
      position: relative;
      min-height: 86px;
      padding: 24px 28px 23px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.010)),
        rgba(5, 7, 14, .78);
      box-shadow:
        0 16px 42px rgba(0,0,0,.20),
        inset 0 0 0 1px rgba(255,255,255,.012);
      overflow: hidden;
      transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
    }

    .story-engine-detail-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 92% 18%, rgba(255,79,163,.070), transparent 34%),
        radial-gradient(circle at 8% 100%, rgba(207,197,255,.045), transparent 38%);
      opacity: .88;
      pointer-events: none;
    }

    .story-engine-detail-card h3,
    .story-engine-detail-card p {
      position: relative;
      z-index: 1;
    }

    .story-engine-detail-card h3 {
      margin: 0;
      color: #FFFFFF;
      font-size: 18px;
      line-height: 1.35;
      font-weight: 900;
      letter-spacing: -0.04em;
      word-break: keep-all;
    }

    .story-engine-detail-card p {
      margin: 9px 0 0;
      color: #CFC5FF;
      font-size: 14px;
      line-height: 1.66;
      font-weight: 540;
      letter-spacing: -0.025em;
      word-break: keep-all;
    }

    .story-engine-stat-card:hover,
    .story-engine-detail-card:hover {
      transform: translateY(-5px);
      border-color: rgba(255,79,163,.28);
      box-shadow:
        0 28px 72px rgba(0,0,0,.32),
        0 0 28px rgba(255,79,163,.075),
        inset 0 0 0 1px rgba(255,255,255,.018);
    }

    .story-engine-stat-card:hover strong,
    .story-engine-detail-card:hover h3 {
      color: #FF4FA3;
    }

    @media (max-width: 1080px) {
      .story-engine-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      .story-engine-reason-section {
        padding: 88px 20px 102px;
      }

      .story-engine-reason-shell {
        width: min(100% - 28px, 520px);
      }

      .story-engine-stat-grid,
      .story-engine-detail-grid {
        grid-template-columns: 1fr;
      }

      .story-engine-stat-card {
        min-height: 124px;
      }
    }



    /* Story timeline scroll animation */
    @media (prefers-reduced-motion: no-preference) {
      .story-timeline .timeline-item[data-reveal] {
        opacity: 0;
        transform: translate3d(0, 34px, 0);
        transition:
          opacity 780ms cubic-bezier(0.22, 1, 0.36, 1),
          transform 780ms cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--reveal-delay, 0ms);
      }

      .story-timeline .timeline-item.is-left[data-reveal] {
        transform: translate3d(-34px, 28px, 0);
      }

      .story-timeline .timeline-item.is-right[data-reveal] {
        transform: translate3d(34px, 28px, 0);
      }

      .story-timeline .timeline-item[data-reveal].is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }

      .story-timeline::before {
        transform-origin: top;
        animation: timelineLineGlow 1.4s ease both;
      }
    }

    @keyframes timelineLineGlow {
      from {
        opacity: .18;
        filter: blur(1px);
      }
      to {
        opacity: 1;
        filter: blur(0);
      }
    }



    /* Story OUR SYSTEM layout - reference style */
    .story-engine-reason-section {
      padding: 118px 24px 138px;
    }

    .story-engine-reason-shell {
      width: min(1640px, calc(100% - 56px));
    }

    .story-engine-stat-grid {
      gap: 26px;
      margin: 0 0 44px;
    }

    .story-engine-stat-card {
      min-height: 168px;
      padding: 38px 26px 34px;
      border-radius: 16px;
      border-color: rgba(207,197,255,.20);
      background:
        radial-gradient(circle at 50% 100%, rgba(255,79,163,.13), transparent 34%),
        radial-gradient(circle at 50% 0%, rgba(207,197,255,.09), transparent 44%),
        linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.012)),
        rgba(7, 9, 17, .86);
      box-shadow:
        0 24px 70px rgba(0,0,0,.28),
        0 0 0 1px rgba(255,255,255,.018) inset,
        0 0 34px rgba(207,197,255,.035);
    }

    .story-engine-stat-card::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -1px;
      width: 86px;
      height: 2px;
      transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, #FF7CBD, #CFC5FF, transparent);
      box-shadow: 0 0 18px rgba(255,79,163,.24);
      opacity: .88;
    }

    .story-engine-stat-card strong {
      color: #F4B6FF;
      font-size: clamp(35px, 3.2vw, 54px);
      letter-spacing: -0.06em;
      text-shadow:
        0 0 22px rgba(255,79,163,.18),
        0 0 26px rgba(207,197,255,.10);
    }

    .story-engine-stat-card span {
      margin-top: 16px;
      color: rgba(255,255,255,.78);
      font-size: 17px;
      font-weight: 640;
    }

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

    .story-engine-detail-grid-featured .story-engine-detail-card {
      display: grid;
      grid-template-columns: 168px minmax(0, 1fr);
      align-items: center;
      gap: 34px;
      min-height: 214px;
      padding: 34px 40px 34px 32px;
      border-radius: 18px;
      border: 1px solid rgba(207,197,255,.22);
      background:
        radial-gradient(circle at 10% 100%, rgba(255,79,163,.105), transparent 32%),
        radial-gradient(circle at 92% 0%, rgba(207,197,255,.060), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
        rgba(7, 8, 15, .88);
      box-shadow:
        0 22px 60px rgba(0,0,0,.28),
        0 0 0 1px rgba(255,255,255,.014) inset;
      overflow: hidden;
    }

    .story-engine-detail-grid-featured .story-engine-detail-card::after {
      content: "";
      position: absolute;
      inset: auto 18px -1px 18px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,79,163,.42), rgba(207,197,255,.24), transparent);
      opacity: .84;
    }

    .story-engine-icon {
      position: relative;
      z-index: 1;
      width: 136px;
      height: 136px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      border: 1px solid rgba(207,197,255,.24);
      background:
        radial-gradient(circle at 50% 100%, rgba(255,79,163,.18), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.014)),
        rgba(11, 10, 22, .84);
      box-shadow:
        0 18px 48px rgba(0,0,0,.22),
        0 0 24px rgba(207,197,255,.05) inset;
    }

    .story-engine-icon::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 13px;
      width: 54px;
      height: 3px;
      border-radius: 999px;
      transform: translateX(-50%);
      background: rgba(255,79,163,.54);
      filter: blur(7px);
    }

    .story-engine-icon svg {
      position: relative;
      z-index: 1;
      width: 78px;
      height: 78px;
      fill: none;
      stroke: url(#storyEngineIconGradient);
      stroke-width: 2.3;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter:
        drop-shadow(0 0 9px rgba(255,79,163,.18))
        drop-shadow(0 0 13px rgba(207,197,255,.10));
    }

    .story-engine-detail-body {
      position: relative;
      z-index: 1;
      min-width: 0;
    }

    .story-engine-detail-grid-featured .story-engine-detail-card h3 {
      font-size: clamp(27px, 2.25vw, 38px);
      line-height: 1.22;
      letter-spacing: -0.055em;
    }

    .story-engine-detail-grid-featured .story-engine-detail-card p {
      margin-top: 18px;
      color: rgba(255,255,255,.76);
      font-size: clamp(17px, 1.35vw, 22px);
      line-height: 1.7;
      font-weight: 520;
    }

    .story-engine-detail-grid-featured .story-engine-detail-card:hover .story-engine-icon {
      border-color: rgba(255,79,163,.34);
      box-shadow:
        0 24px 58px rgba(0,0,0,.30),
        0 0 30px rgba(255,79,163,.08);
    }

    @media (max-width: 1180px) {
      .story-engine-detail-grid-featured .story-engine-detail-card {
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 24px;
        padding: 28px;
      }

      .story-engine-icon {
        width: 106px;
        height: 106px;
      }

      .story-engine-icon svg {
        width: 62px;
        height: 62px;
      }
    }

    @media (max-width: 860px) {
      .story-engine-stat-grid,
      .story-engine-detail-grid-featured {
        grid-template-columns: 1fr;
      }

      .story-engine-detail-grid-featured .story-engine-detail-card {
        grid-template-columns: 1fr;
        text-align: left;
      }
    }



    /* Story stat cards refinement */
    .story-engine-stat-card {
      border: 0 !important;
      box-shadow:
        0 24px 70px rgba(0,0,0,.22),
        inset 0 0 0 1px rgba(255,255,255,.018) !important;
    }

    .story-engine-stat-card::before {
      opacity: 0 !important;
    }

    .story-engine-stat-card::after {
      opacity: .52;
    }

    .story-engine-stat-card strong {
      color: #FFFFFF !important;
      text-shadow:
        0 0 22px rgba(255,255,255,.08),
        0 0 26px rgba(207,197,255,.08);
    }

    .story-engine-stat-card span {
      color: #CFC5FF !important;
    }



    /* Story stat cards remove background */
    .story-engine-stat-card {
      background: transparent !important;
      box-shadow: none !important;
    }

    .story-engine-stat-card::after {
      opacity: 0 !important;
    }



    /* Story metric cards - reference layout */
    .story-engine-stat-grid-metric {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 26px;
      margin: 0 0 48px;
    }

    .story-engine-stat-grid-metric .story-engine-stat-card {
      position: relative;
      min-height: 292px;
      padding: 34px 28px 34px;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.13) !important;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,79,163,.08), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018)),
        rgba(15, 13, 24, .78) !important;
      box-shadow:
        0 26px 72px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(255,255,255,.018) !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      text-align: center;
      overflow: hidden;
    }

    .story-engine-stat-grid-metric .story-engine-stat-card::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 1 !important;
      background:
        linear-gradient(90deg, transparent, rgba(255,79,163,.18), rgba(207,197,255,.14), transparent) top center / 78% 1px no-repeat,
        radial-gradient(circle at 50% 100%, rgba(255,79,163,.075), transparent 34%);
      pointer-events: none;
    }

    .story-engine-stat-grid-metric .story-engine-stat-card::after {
      content: "";
      position: relative;
      display: block;
      width: 100%;
      height: 1px;
      margin: 20px 0 20px;
      background: rgba(255,255,255,.12);
      opacity: 1 !important;
      order: 4;
    }

    .story-stat-icon {
      position: relative;
      z-index: 1;
      width: 74px;
      height: 74px;
      margin: 0 auto 24px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,79,163,.22);
      background:
        radial-gradient(circle at 50% 50%, rgba(255,79,163,.12), transparent 62%),
        rgba(12,10,22,.42);
    }

    .story-stat-icon svg {
      width: 42px;
      height: 42px;
      fill: none;
      stroke: url(#storyEngineIconGradient);
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 8px rgba(255,79,163,.16));
    }

    .story-stat-label {
      position: relative;
      z-index: 1;
      color: #CFC5FF !important;
      font-size: 22px !important;
      line-height: 1.35 !important;
      font-weight: 900 !important;
      letter-spacing: -0.045em !important;
      word-break: keep-all;
      order: 2;
    }

    .story-engine-stat-grid-metric .story-engine-stat-card strong {
      position: relative;
      z-index: 1;
      margin-top: 14px;
      color: #FFFFFF !important;
      font-size: clamp(46px, 4vw, 64px);
      line-height: 1;
      font-weight: 950;
      letter-spacing: -0.065em;
      text-shadow:
        0 0 20px rgba(255,255,255,.10),
        0 0 28px rgba(207,197,255,.08);
      order: 3;
    }

    .story-engine-stat-grid-metric .story-engine-stat-card p {
      position: relative;
      z-index: 1;
      order: 5;
      margin: 0;
      color: rgba(255,255,255,.70);
      font-size: 15px;
      line-height: 1.6;
      font-weight: 700;
      letter-spacing: -0.025em;
      word-break: keep-all;
    }

    .story-engine-stat-grid-metric .story-engine-stat-card:hover {
      transform: translateY(-5px);
      border-color: rgba(255,79,163,.30) !important;
      box-shadow:
        0 30px 80px rgba(0,0,0,.34),
        0 0 28px rgba(255,79,163,.08),
        inset 0 0 0 1px rgba(255,255,255,.024) !important;
    }

    .story-engine-stat-grid-metric .story-engine-stat-card:hover strong {
      color: #FFFFFF !important;
    }

    @media (max-width: 1180px) {
      .story-engine-stat-grid-metric {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .story-engine-stat-grid-metric {
        grid-template-columns: 1fr;
      }

      .story-engine-stat-grid-metric .story-engine-stat-card {
        min-height: 260px;
      }
    }



    /* Story OUR SYSTEM merged cards */
    .story-engine-merged-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
      margin-top: 54px;
    }

    .story-engine-merged-card {
      position: relative;
      min-height: 340px;
      padding: 34px 36px 34px;
      border-radius: 24px;
      border: 1px solid rgba(207,197,255,.22);
      background:
        radial-gradient(circle at 50% 0%, rgba(255,79,163,.08), transparent 38%),
        radial-gradient(circle at 8% 100%, rgba(207,197,255,.06), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.014)),
        rgba(10, 10, 18, .86);
      box-shadow:
        0 28px 78px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(255,255,255,.016);
      overflow: hidden;
      transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
    }

    .story-engine-merged-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, transparent, rgba(255,79,163,.18), rgba(207,197,255,.13), transparent) top center / 78% 1px no-repeat,
        radial-gradient(circle at 92% 12%, rgba(255,79,163,.07), transparent 34%);
      pointer-events: none;
    }

    .story-engine-merged-top,
    .story-engine-merged-body {
      position: relative;
      z-index: 1;
    }

    .story-engine-merged-top {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      grid-template-areas:
        "icon label"
        "icon stat";
      gap: 6px 26px;
      align-items: center;
      padding-bottom: 28px;
      border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .story-engine-merged-top .story-stat-icon {
      grid-area: icon;
      width: 82px;
      height: 82px;
      margin: 0;
      border-radius: 22px;
    }

    .story-engine-merged-top .story-stat-icon svg {
      width: 48px;
      height: 48px;
    }

    .story-engine-merged-top .story-stat-label {
      grid-area: label;
      display: block;
      color: #CFC5FF !important;
      font-size: 18px !important;
      line-height: 1.35 !important;
      font-weight: 860 !important;
      letter-spacing: -0.035em !important;
      word-break: keep-all;
    }

    .story-engine-merged-top strong {
      grid-area: stat;
      color: #FFFFFF;
      font-size: clamp(34px, 3vw, 50px);
      line-height: 1.04;
      font-weight: 950;
      letter-spacing: -0.065em;
      text-shadow:
        0 0 20px rgba(255,255,255,.08),
        0 0 24px rgba(207,197,255,.08);
    }

    .story-engine-merged-body {
      padding-top: 26px;
    }

    .story-engine-merged-body h3 {
      margin: 0;
      color: #FFFFFF;
      font-size: clamp(24px, 2vw, 32px);
      line-height: 1.28;
      font-weight: 900;
      letter-spacing: -0.052em;
      word-break: keep-all;
      transition: color .22s ease;
    }

    .story-engine-merged-body p {
      margin: 15px 0 0;
      color: rgba(255,255,255,.74);
      font-size: clamp(16px, 1.18vw, 19px);
      line-height: 1.72;
      font-weight: 520;
      letter-spacing: -0.025em;
      word-break: keep-all;
    }

    .story-engine-merged-card:hover {
      transform: translateY(-6px);
      border-color: rgba(255,79,163,.32);
      box-shadow:
        0 34px 86px rgba(0,0,0,.34),
        0 0 30px rgba(255,79,163,.08),
        inset 0 0 0 1px rgba(255,255,255,.022);
    }

    .story-engine-merged-card:hover .story-engine-merged-body h3 {
      color: #FF4FA3;
    }

    @media (max-width: 980px) {
      .story-engine-merged-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .story-engine-merged-card {
        min-height: auto;
        padding: 28px 24px;
      }

      .story-engine-merged-top {
        grid-template-columns: 1fr;
        grid-template-areas:
          "icon"
          "label"
          "stat";
        gap: 10px;
        text-align: center;
        justify-items: center;
      }
    }



    /* Story OUR SYSTEM vertical reference cards */
    .story-engine-vertical-card-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 24px;
      margin-top: 54px;
    }

    .story-engine-vertical-card {
      position: relative;
      min-height: 430px;
      padding: 34px 30px 36px;
      border-radius: 26px;
      border: 1px solid rgba(207,197,255,.18);
      background:
        radial-gradient(circle at 50% 0%, rgba(255,79,163,.07), transparent 36%),
        radial-gradient(circle at 50% 100%, rgba(207,197,255,.055), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.014)),
        rgba(12, 11, 20, .84);
      box-shadow:
        0 28px 78px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(255,255,255,.016);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      overflow: hidden;
      transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
    }

    .story-engine-vertical-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, transparent, rgba(255,79,163,.16), rgba(207,197,255,.14), transparent) top center / 72% 1px no-repeat,
        radial-gradient(circle at 50% 100%, rgba(255,79,163,.10), transparent 30%);
      pointer-events: none;
    }

    .story-engine-vertical-card .story-stat-icon,
    .story-engine-vertical-card .story-stat-label,
    .story-engine-vertical-card strong,
    .story-engine-vertical-card h3,
    .story-engine-vertical-card p {
      position: relative;
      z-index: 1;
    }

    .story-engine-vertical-card .story-stat-icon {
      width: 112px;
      height: 112px;
      margin: 0 auto 24px;
      border-radius: 18px;
      border: 1px solid rgba(207,197,255,.22);
      background:
        radial-gradient(circle at 50% 100%, rgba(255,79,163,.22), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.016)),
        rgba(12,10,22,.72);
      box-shadow:
        0 18px 48px rgba(0,0,0,.22),
        0 0 26px rgba(255,79,163,.055);
      display: grid;
      place-items: center;
    }

    .story-engine-vertical-card .story-stat-icon::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 14px;
      width: 52px;
      height: 3px;
      border-radius: 999px;
      transform: translateX(-50%);
      background: rgba(255,79,163,.56);
      filter: blur(8px);
    }

    .story-engine-vertical-card .story-stat-icon svg {
      width: 64px;
      height: 64px;
      fill: none;
      stroke: url(#storyEngineIconGradient);
      stroke-width: 2.15;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter:
        drop-shadow(0 0 8px rgba(255,79,163,.16))
        drop-shadow(0 0 12px rgba(207,197,255,.10));
    }

    .story-engine-vertical-card .story-stat-label {
      display: block;
      margin: 0 0 16px;
      color: #CFC5FF !important;
      font-size: 18px !important;
      line-height: 1.36 !important;
      font-weight: 900 !important;
      letter-spacing: -0.04em !important;
      word-break: keep-all;
    }

    .story-engine-vertical-card strong {
      display: block;
      margin: 0;
      color: #FFFFFF !important;
      font-size: clamp(42px, 3.55vw, 58px);
      line-height: 1.02;
      font-weight: 950;
      letter-spacing: -0.07em;
      text-shadow:
        0 0 20px rgba(255,255,255,.10),
        0 0 24px rgba(207,197,255,.08);
    }

    .story-engine-vertical-card strong::after {
      content: "";
      display: block;
      width: 100%;
      max-width: 210px;
      height: 1px;
      margin: 22px auto 20px;
      background: rgba(255,255,255,.14);
    }

    .story-engine-vertical-card h3 {
      margin: 0;
      color: #FFFFFF;
      font-size: clamp(24px, 2vw, 31px);
      line-height: 1.25;
      font-weight: 900;
      letter-spacing: -0.055em;
      word-break: keep-all;
      transition: color .22s ease;
    }

    .story-engine-vertical-card p {
      margin: 18px 0 0;
      color: rgba(255,255,255,.74);
      font-size: 16px;
      line-height: 1.74;
      font-weight: 540;
      letter-spacing: -0.025em;
      word-break: keep-all;
    }

    .story-engine-vertical-card:hover {
      transform: translateY(-6px);
      border-color: rgba(255,79,163,.32);
      box-shadow:
        0 34px 86px rgba(0,0,0,.34),
        0 0 30px rgba(255,79,163,.08),
        inset 0 0 0 1px rgba(255,255,255,.022);
    }

    .story-engine-vertical-card:hover h3 {
      color: #FF4FA3;
    }

    @media (max-width: 1280px) {
      .story-engine-vertical-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 680px) {
      .story-engine-vertical-card-grid {
        grid-template-columns: 1fr;
      }

      .story-engine-vertical-card {
        min-height: auto;
        padding: 30px 24px 34px;
      }
    }



    /* Story vertical card label position refinement */
    .story-engine-vertical-card .story-stat-icon {
      margin-bottom: 18px !important;
    }

    .story-engine-vertical-card .story-stat-label {
      margin: 0 0 14px !important;
      order: initial;
    }

    .story-engine-vertical-card strong {
      margin-top: 0 !important;
    }



    /* Story vertical card text color refinement */
    .story-engine-vertical-card .story-stat-label {
      color: #FF4FA3 !important;
    }

    .story-engine-vertical-card h3 {
      color: #CFC5FF !important;
    }

    .story-engine-vertical-card:hover h3 {
      color: #CFC5FF !important;
    }



    /* Story vertical card remove border and background */
    .story-engine-vertical-card {
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .story-engine-vertical-card::before {
      opacity: 0 !important;
    }

    .story-engine-vertical-card:hover {
      transform: none !important;
      border-color: transparent !important;
      box-shadow: none !important;
    }



    /* Story vertical cards spacing + divider after subtitle */
    .story-engine-vertical-card {
      padding-top: 28px !important;
      padding-bottom: 30px !important;
      gap: 0 !important;
    }

    .story-engine-vertical-card .story-stat-icon {
      width: 102px !important;
      height: 102px !important;
      margin-bottom: 16px !important;
    }

    .story-engine-vertical-card .story-stat-icon svg {
      width: 58px !important;
      height: 58px !important;
    }

    .story-engine-vertical-card .story-stat-label {
      margin: 0 0 10px !important;
      color: #FF4FA3 !important;
      font-size: 16px !important;
      line-height: 1.35 !important;
      font-weight: 850 !important;
      letter-spacing: -0.035em !important;
    }

    .story-engine-vertical-card strong {
      margin: 0 0 18px !important;
      font-size: clamp(36px, 3vw, 50px) !important;
      line-height: 1.02 !important;
      letter-spacing: -0.065em !important;
    }

    .story-engine-vertical-card strong::after {
      display: none !important;
    }

    .story-engine-vertical-card h3 {
      margin: 0 !important;
      color: #CFC5FF !important;
      font-size: clamp(19px, 1.55vw, 24px) !important;
      line-height: 1.32 !important;
      font-weight: 860 !important;
      letter-spacing: -0.045em !important;
    }

    .story-engine-vertical-card h3::after {
      content: "";
      display: block;
      width: min(190px, 78%);
      height: 1px;
      margin: 18px auto 16px;
      background: rgba(255,255,255,.16);
    }

    .story-engine-vertical-card p {
      margin: 0 !important;
      color: rgba(255,255,255,.72) !important;
      font-size: 15px !important;
      line-height: 1.68 !important;
      font-weight: 500 !important;
      letter-spacing: -0.023em !important;
    }

    .story-engine-vertical-card:hover h3 {
      color: #CFC5FF !important;
    }



    /* Story vertical cards spacing correction */
    .story-engine-vertical-card-grid {
      gap: 42px !important;
    }

    .story-engine-vertical-card {
      padding-left: 24px !important;
      padding-right: 24px !important;
    }

    .story-engine-vertical-card .story-stat-icon {
      margin-bottom: 28px !important;
    }

    .story-engine-vertical-card .story-stat-label {
      margin-bottom: 16px !important;
    }

    .story-engine-vertical-card strong {
      margin-bottom: 22px !important;
    }

    .story-engine-vertical-card h3::after {
      margin: 20px auto 18px !important;
    }

    @media (max-width: 1280px) {
      .story-engine-vertical-card-grid {
        gap: 34px !important;
      }
    }

    @media (max-width: 680px) {
      .story-engine-vertical-card-grid {
        gap: 28px !important;
      }
    }



    /* Story OUR SYSTEM icon frame included */
    .story-engine-vertical-card .story-stat-icon {
      width: 112px !important;
      height: 112px !important;
      padding: 12px !important;
      border-radius: 22px !important;
      border: 1px solid rgba(207,197,255,.24) !important;
      background:
        radial-gradient(circle at 50% 100%, rgba(255,79,163,.16), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.012)),
        rgba(14,12,24,.42) !important;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 16px 38px rgba(0,0,0,.18),
        0 0 24px rgba(255,79,163,.055) !important;
      overflow: hidden !important;
    }

    .story-engine-vertical-card .story-stat-icon::after {
      display: none !important;
    }

    .story-engine-vertical-card .story-stat-icon img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
      user-select: none;
    }



    /* Story closing catchphrase */
    .story-closing-phrase-section {
      position: relative;
      padding: clamp(96px, 10vw, 160px) 0 clamp(112px, 11vw, 180px);
      overflow: hidden;
    }

    .story-closing-phrase-section::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(760px, 74vw);
      height: min(420px, 42vw);
      transform: translate(-50%, -50%);
      background:
        radial-gradient(circle at 50% 50%, rgba(255,79,163,.14), transparent 58%),
        radial-gradient(circle at 50% 42%, rgba(207,197,255,.12), transparent 62%);
      filter: blur(8px);
      opacity: .72;
      pointer-events: none;
    }

    .story-closing-phrase-inner {
      position: relative;
      z-index: 1;
      width: min(1180px, calc(100% - 64px));
      margin: 0 auto;
      text-align: center;
    }

    .story-closing-kicker {
      margin: 0 0 24px;
      color: #FF4FA3;
      font-size: 13px;
      line-height: 1;
      font-weight: 850;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .story-closing-phrase-inner h2 {
      margin: 0;
      color: #FFFFFF;
      font-size: clamp(42px, 6vw, 88px);
      line-height: 1.12;
      font-weight: 920;
      letter-spacing: -0.075em;
      text-shadow:
        0 0 28px rgba(255,255,255,.08),
        0 0 42px rgba(255,79,163,.08);
      word-break: keep-all;
    }

    .story-closing-phrase-inner h2::after {
      content: "";
      display: block;
      width: min(280px, 46vw);
      height: 1px;
      margin: 42px auto 0;
      background: linear-gradient(90deg, transparent, rgba(255,79,163,.72), rgba(207,197,255,.52), transparent);
    }

    @media (max-width: 640px) {
      .story-closing-phrase-inner {
        width: min(100% - 36px, 1180px);
      }

      .story-closing-kicker {
        margin-bottom: 18px;
        font-size: 11px;
      }
    }



    /* Story closing phrase size + CTA */
    .story-closing-phrase-section {
      padding: clamp(82px, 8vw, 132px) 0 clamp(96px, 9vw, 150px) !important;
    }

    .story-closing-phrase-inner h2 {
      font-size: clamp(34px, 4.35vw, 64px) !important;
      line-height: 1.16 !important;
      letter-spacing: -0.065em !important;
    }

    .story-closing-phrase-inner h2::after {
      margin-top: 34px !important;
    }

    .story-closing-cta {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 38px;
      min-width: 168px;
      height: 54px;
      padding: 0 28px;
      border-radius: 999px;
      color: #fff;
      text-decoration: none;
      font-size: 15px;
      font-weight: 820;
      letter-spacing: -0.025em;
      background:
        linear-gradient(135deg, rgba(255,79,163,.96), rgba(155,92,255,.96));
      box-shadow:
        0 18px 44px rgba(255,79,163,.18),
        0 0 26px rgba(155,92,255,.12);
      transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
    }

    .story-closing-cta span {
      font-size: 18px;
      line-height: 1;
      transform: translateY(-1px);
    }

    .story-closing-cta:hover {
      transform: translateY(-3px);
      filter: brightness(1.06);
      box-shadow:
        0 24px 58px rgba(255,79,163,.24),
        0 0 34px rgba(155,92,255,.18);
    }

    @media (max-width: 640px) {
      .story-closing-cta {
        min-width: 148px;
        height: 50px;
        margin-top: 30px;
      }
    }



    /* Story closing CTA button: match final page CTA button */
    .story-closing-cta.final-cta-button {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 178px !important;
      height: 58px !important;
      margin-top: 42px !important;
      padding: 0 34px !important;
      border-radius: 999px !important;
      color: #FFFFFF !important;
      font-size: 18px !important;
      line-height: 1 !important;
      font-weight: 850 !important;
      letter-spacing: -0.025em !important;
      text-decoration: none !important;
      border: 0 !important;
      background: linear-gradient(135deg, #FF4FA3 0%, #9B5CFF 100%) !important;
      box-shadow:
        0 16px 42px rgba(255,79,163,.22),
        inset 0 0 0 1px rgba(255,255,255,.18) !important;
      transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
    }

    .story-closing-cta.final-cta-button span {
      color: #FFFFFF !important;
      font-size: 18px !important;
      line-height: 1 !important;
      transform: translateY(-1px);
    }

    .story-closing-cta.final-cta-button:hover {
      transform: translateY(-3px) !important;
      filter: brightness(1.05) !important;
      color: #FFFFFF !important;
      background: linear-gradient(135deg, #FF4FA3 0%, #9B5CFF 100%) !important;
      box-shadow:
        0 22px 54px rgba(255,79,163,.25),
        0 0 24px rgba(207,197,255,.12),
        inset 0 0 0 1px rgba(255,255,255,.22) !important;
    }

    .story-closing-cta.final-cta-button:hover span {
      transform: translateY(-1px) !important;
    }

    @media (max-width: 640px) {
      .story-closing-cta.final-cta-button {
        height: 54px !important;
        min-width: 154px !important;
        margin-top: 34px !important;
        font-size: 16px !important;
      }
    }



    /* ===== Contact Page ===== */
    .page-contact {
      display: none;
      position: relative;
      min-height: 100vh;
      padding: 132px 0 0;
      background:
        radial-gradient(circle at 78% 18%, rgba(255,79,163,.12), transparent 28%),
        radial-gradient(circle at 18% 22%, rgba(124,58,237,.12), transparent 34%),
        linear-gradient(180deg, #050509 0%, #080711 52%, #050509 100%);
      overflow: hidden;
    }

    .page-contact.is-active {
      display: block;
    }

    .page-contact::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
      background-size: 58px 58px;
      opacity: .42;
      mask-image: radial-gradient(circle at 50% 26%, rgba(0,0,0,.74), transparent 72%);
      -webkit-mask-image: radial-gradient(circle at 50% 26%, rgba(0,0,0,.74), transparent 72%);
      pointer-events: none;
    }

    .contact-hero-shell {
      position: relative;
      z-index: 2;
      width: min(1760px, calc(100% - 96px));
      margin: 0 auto;
      padding: 0 0 84px;
    }

    .contact-breadcrumb {
      color: rgba(255,255,255,.42);
      font-size: 12px;
      font-weight: 760;
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 58px;
    }

    .contact-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
      gap: clamp(44px, 6vw, 96px);
      align-items: center;
      margin-bottom: 70px;
    }

    .contact-kicker {
      margin: 0 0 18px;
      color: #FF7CBD;
      font-size: 17px;
      line-height: 1;
      font-weight: 760;
      letter-spacing: .22em;
      text-transform: uppercase;
    }

    .contact-title {
      margin: 0;
      color: #FFFFFF;
      font-size: clamp(46px, 4.5vw, 78px);
      line-height: 1.1;
      font-weight: 900;
      letter-spacing: -0.055em;
      word-break: keep-all;
    }

    .contact-copy {
      margin: 24px 0 0;
      color: #B9B4C7;
      font-size: 18px;
      line-height: 1.76;
      font-weight: 500;
      letter-spacing: -0.03em;
      word-break: keep-all;
    }

    .contact-hero-visual {
      position: relative;
      min-height: 300px;
      display: grid;
      place-items: center;
    }

    .contact-play-orbit {
      position: relative;
      width: min(360px, 72vw);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,79,163,.18), transparent 34%),
        radial-gradient(circle at 50% 50%, rgba(155,92,255,.14), transparent 54%);
    }

    .contact-play-orbit::before,
    .contact-play-orbit::after {
      content: "";
      position: absolute;
      inset: 12%;
      border-radius: 50%;
      border: 1px solid rgba(207,197,255,.18);
    }

    .contact-play-orbit::after {
      inset: 28%;
      border-color: rgba(255,79,163,.22);
      box-shadow: 0 0 44px rgba(255,79,163,.15);
    }

    .contact-play-core {
      position: relative;
      z-index: 2;
      width: 156px;
      height: 120px;
      border-radius: 38px;
      border: 1px solid rgba(255,255,255,.16);
      background:
        linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
        rgba(12,10,22,.62);
      box-shadow:
        0 26px 72px rgba(0,0,0,.28),
        0 0 42px rgba(255,79,163,.15),
        inset 0 0 0 1px rgba(255,255,255,.035);
      backdrop-filter: blur(16px);
    }

    .contact-play-core::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 44px;
      height: 52px;
      transform: translate(-38%, -50%);
      background: linear-gradient(135deg, #FF4FA3 0%, #9B5CFF 100%);
      clip-path: polygon(0 0, 100% 50%, 0 100%);
      filter: drop-shadow(0 0 18px rgba(255,79,163,.35));
    }

    .contact-orbit {
      position: absolute;
      border-radius: 999px;
      border: 1px solid rgba(255,79,163,.20);
      opacity: .72;
    }

    .orbit-a { inset: 8%; transform: rotate(-14deg) scaleX(1.18); }
    .orbit-b { inset: 20%; transform: rotate(24deg) scaleX(1.12); border-color: rgba(207,197,255,.18); }
    .orbit-c { inset: 34%; transform: rotate(-34deg) scaleX(1.05); border-color: rgba(255,255,255,.12); }

    .contact-form-panel {
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(circle at 92% 10%, rgba(255,79,163,.075), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018)),
        rgba(13,12,20,.82);
      box-shadow:
        0 26px 78px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(255,255,255,.016);
      padding: clamp(30px, 3.3vw, 48px);
      backdrop-filter: blur(18px);
    }

    .contact-form-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 30px;
    }

    .contact-form-head h2 {
      margin: 0;
      color: #FFFFFF;
      font-size: 30px;
      line-height: 1.2;
      font-weight: 900;
      letter-spacing: -0.045em;
    }

    .contact-form-head p {
      margin: 0;
      color: rgba(255,255,255,.62);
      font-size: 13px;
      font-weight: 640;
    }

    .contact-form-head p span {
      color: #FF4FA3;
    }

    .contact-form {
      display: grid;
      gap: 22px;
    }

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

    .contact-field {
      display: grid;
      gap: 10px;
    }

    .contact-field span {
      color: #FFFFFF;
      font-size: 14px;
      line-height: 1;
      font-weight: 760;
      letter-spacing: -0.025em;
    }

    .contact-field em {
      color: #FF4FA3;
      font-style: normal;
    }

    .contact-field input,
    .contact-field select,
    .contact-field textarea {
      width: 100%;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 8px;
      background: rgba(255,255,255,.045);
      color: #FFFFFF;
      font-family: inherit;
      font-size: 15px;
      font-weight: 520;
      outline: none;
      transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }

    .contact-field input,
    .contact-field select {
      height: 54px;
      padding: 0 18px;
    }

    .contact-field textarea {
      min-height: 148px;
      resize: vertical;
      padding: 18px;
      line-height: 1.65;
    }

    .contact-field input::placeholder,
    .contact-field textarea::placeholder {
      color: rgba(255,255,255,.34);
    }

    .contact-field select {
      color: rgba(255,255,255,.62);
      appearance: none;
      background-image:
        linear-gradient(45deg, transparent 50%, rgba(255,255,255,.65) 50%),
        linear-gradient(135deg, rgba(255,255,255,.65) 50%, transparent 50%);
      background-position:
        calc(100% - 20px) 24px,
        calc(100% - 14px) 24px;
      background-size: 6px 6px, 6px 6px;
      background-repeat: no-repeat;
    }

    .contact-field input:focus,
    .contact-field select:focus,
    .contact-field textarea:focus {
      border-color: rgba(255,79,163,.52);
      background: rgba(255,255,255,.06);
      box-shadow: 0 0 0 3px rgba(255,79,163,.10);
    }

    .contact-form-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-top: 4px;
    }

    .contact-agree {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: rgba(255,255,255,.68);
      font-size: 14px;
      font-weight: 560;
    }

    .contact-agree input {
      width: 18px;
      height: 18px;
      accent-color: #FF4FA3;
    }

    .contact-agree b {
      color: rgba(255,255,255,.82);
      font-weight: 760;
    }

    .contact-policy-link {
      color: #FF7CBD;
      font-size: 14px;
      font-weight: 760;
      text-decoration: none;
    }

    .contact-policy-link::after {
      content: " ›";
    }

    .contact-submit {
      width: 100%;
      height: 58px;
      margin-top: 2px;
      border: 0;
      border-radius: 8px;
      color: #FFFFFF;
      font-family: inherit;
      font-size: 18px;
      line-height: 1;
      font-weight: 850;
      letter-spacing: -0.025em;
      cursor: pointer;
      background: linear-gradient(135deg, #8B5CF6 0%, #A855F7 48%, #FF4FA3 100%);
      box-shadow:
        0 16px 42px rgba(255,79,163,.18),
        inset 0 0 0 1px rgba(255,255,255,.16);
      transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
    }

    .contact-submit:hover {
      transform: translateY(-2px);
      filter: brightness(1.05);
      box-shadow:
        0 22px 54px rgba(255,79,163,.24),
        0 0 22px rgba(207,197,255,.10),
        inset 0 0 0 1px rgba(255,255,255,.20);
    }

    .contact-info-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      margin: 32px 0 0;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016)),
        rgba(13,12,20,.72);
      overflow: hidden;
    }

    .contact-info-item {
      display: grid;
      grid-template-columns: 54px 1fr;
      gap: 18px;
      align-items: start;
      padding: 28px 30px;
      border-left: 1px solid rgba(255,255,255,.08);
    }

    .contact-info-item:first-child {
      border-left: 0;
    }

    .contact-info-icon {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      color: #FF7CBD;
      border: 1px solid rgba(255,79,163,.26);
      background: rgba(255,79,163,.055);
      font-size: 18px;
    }

    .contact-info-item strong {
      display: block;
      color: #FFFFFF;
      font-size: 16px;
      line-height: 1.2;
      font-weight: 850;
      margin-bottom: 8px;
    }

    .contact-info-item p {
      margin: 0;
      color: #B9B4C7;
      font-size: 14px;
      line-height: 1.64;
      font-weight: 520;
      letter-spacing: -0.025em;
    }

    @media (max-width: 1080px) {
      .contact-hero {
        grid-template-columns: 1fr;
      }

      .contact-hero-visual {
        min-height: 220px;
      }

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

      .contact-info-item {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.08);
      }

      .contact-info-item:first-child {
        border-top: 0;
      }
    }

    @media (max-width: 680px) {
      .page-contact {
        padding-top: 104px;
      }

      .contact-hero-shell {
        width: min(100% - 32px, 720px);
        padding-bottom: 60px;
      }

      .contact-breadcrumb {
        margin-bottom: 38px;
      }

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

      .contact-form-head,
      .contact-form-bottom {
        align-items: flex-start;
        flex-direction: column;
      }

      .contact-title {
        font-size: clamp(38px, 11vw, 52px);
      }

      .contact-copy br {
        display: none;
      }
    }



    /* Contact route fix */
    .page-contact[data-page="contact"] {
      display: none;
    }

    .page-contact[data-page="contact"].is-active {
      display: block !important;
    }



    /* Contact category tabs */
    .contact-category-tabs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin: -10px 0 30px;
      padding: 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018)),
        rgba(255,255,255,.035);
    }

    .contact-category-tab {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      height: 56px;
      border: 0;
      border-radius: 999px;
      color: rgba(255,255,255,.62);
      font-family: inherit;
      background: transparent;
      cursor: pointer;
      transition:
        color .22s ease,
        background .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
    }

    .contact-category-tab span {
      font-size: 16px;
      line-height: 1;
      font-weight: 860;
      letter-spacing: -0.035em;
    }

    .contact-category-tab strong {
      color: inherit;
      font-size: 13px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .contact-category-tab.is-active {
      color: #FFFFFF;
      background: linear-gradient(135deg, rgba(255,79,163,.95) 0%, rgba(155,92,255,.95) 100%);
      box-shadow:
        0 14px 34px rgba(255,79,163,.18),
        inset 0 0 0 1px rgba(255,255,255,.16);
    }

    .contact-category-tab:not(.is-active):hover {
      color: #FF7CBD;
      background: rgba(255,255,255,.055);
      transform: translateY(-1px);
    }

    @media (max-width: 640px) {
      .contact-category-tabs {
        grid-template-columns: 1fr;
        border-radius: 24px;
        margin-bottom: 24px;
      }

      .contact-category-tab {
        height: 52px;
      }
    }



    /* Contact category tabs width refinement */
    .contact-category-tabs {
      display: inline-flex !important;
      grid-template-columns: none !important;
      width: auto !important;
      max-width: 100%;
      align-items: center;
      justify-content: flex-start;
      gap: 8px !important;
      margin: -6px 0 30px !important;
      padding: 7px !important;
      justify-self: start;
    }

    .contact-category-tab {
      flex: 0 0 auto !important;
      width: auto !important;
      min-width: auto !important;
      height: 48px !important;
      padding: 0 22px !important;
      gap: 8px !important;
    }

    .contact-category-tab span {
      font-size: 15px !important;
    }

    .contact-category-tab strong {
      font-size: 12px !important;
    }

    @media (max-width: 640px) {
      .contact-category-tabs {
        display: flex !important;
        width: 100% !important;
        border-radius: 999px !important;
        overflow-x: auto;
        scrollbar-width: none;
      }

      .contact-category-tabs::-webkit-scrollbar {
        display: none;
      }

      .contact-category-tab {
        flex: 1 0 auto !important;
        padding: 0 18px !important;
      }
    }



    /* Contact hero one-line title refinement */
    .contact-title {
      white-space: nowrap;
      font-size: clamp(42px, 4.15vw, 72px) !important;
    }

    @media (max-width: 980px) {
      .contact-title {
        white-space: normal;
      }
    }



    /* Contact category tabs hero position */
    .contact-category-tabs-hero {
      margin: 30px 0 0 !important;
    }

    .contact-form-panel .contact-category-tabs {
      display: none !important;
    }

    @media (max-width: 640px) {
      .contact-category-tabs-hero {
        margin-top: 24px !important;
      }
    }



    /* Contact hero category tabs lower position */
    .contact-category-tabs-hero {
      margin-top: 46px !important;
    }

    @media (max-width: 640px) {
      .contact-category-tabs-hero {
        margin-top: 34px !important;
      }
    }



    /* Contact hero tabs lower above form card */
    .contact-category-tabs-hero {
      margin-top: clamp(72px, 8vw, 118px) !important;
    }

    .contact-hero {
      margin-bottom: 34px !important;
    }

    @media (max-width: 1080px) {
      .contact-category-tabs-hero {
        margin-top: 48px !important;
      }

      .contact-hero {
        margin-bottom: 46px !important;
      }
    }

    @media (max-width: 640px) {
      .contact-category-tabs-hero {
        margin-top: 38px !important;
      }
    }



    /* Contact form submit alignment refinement */
    .contact-submit-row {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 6px;
    }

    .contact-submit-row .contact-submit {
      width: auto !important;
      min-width: 178px;
      height: 58px;
      margin-top: 0 !important;
      padding: 0 38px;
      border-radius: 999px;
    }

    @media (max-width: 640px) {
      .contact-submit-row {
        justify-content: stretch;
      }

      .contact-submit-row .contact-submit {
        width: 100% !important;
      }
    }



    /* Contact form fields matched to reference */
    .contact-field-grid-two {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 24px 18px !important;
    }

    .contact-field {
      gap: 9px !important;
    }

    .contact-field span {
      color: rgba(255,255,255,.88) !important;
      font-size: 14px !important;
      line-height: 1.15 !important;
      font-weight: 780 !important;
    }

    .contact-field span b {
      color: rgba(255,255,255,.62);
      font-size: 13px;
      font-weight: 640;
    }

    .contact-field small {
      margin-top: -2px;
      color: rgba(207,197,255,.66);
      font-size: 13px;
      line-height: 1.45;
      font-weight: 540;
      letter-spacing: -0.025em;
    }

    .contact-field input,
    .contact-field textarea {
      border-radius: 8px !important;
      background: rgba(20, 34, 66, .66) !important;
      border-color: rgba(91, 122, 190, .38) !important;
    }

    .contact-field input {
      height: 50px !important;
      padding: 0 18px !important;
    }

    .contact-field textarea {
      min-height: 116px !important;
      padding: 16px 18px !important;
    }

    .contact-field input::placeholder,
    .contact-field textarea::placeholder {
      color: rgba(207,197,255,.50) !important;
    }

    .contact-field input:focus,
    .contact-field textarea:focus {
      border-color: rgba(255,79,163,.50) !important;
      background: rgba(24, 39, 74, .78) !important;
      box-shadow: 0 0 0 3px rgba(255,79,163,.10) !important;
    }

    .contact-file-field {
      position: relative;
    }

    .contact-file-input {
      position: absolute;
      inset: auto;
      width: 1px !important;
      height: 1px !important;
      opacity: 0;
      pointer-events: none;
    }

    .contact-file-drop {
      height: 66px;
      border-radius: 10px;
      border: 1px dashed rgba(91, 122, 190, .58);
      background: rgba(20, 34, 66, .54);
      color: rgba(255,255,255,.72);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.025em;
      cursor: pointer;
      transition: border-color .22s ease, background .22s ease, color .22s ease;
    }

    .contact-file-drop:hover {
      color: #FFFFFF;
      border-color: rgba(255,79,163,.54);
      background: rgba(24,39,74,.72);
    }

    .contact-submit-row {
      margin-top: 8px !important;
    }

    @media (max-width: 680px) {
      .contact-field-grid-two {
        grid-template-columns: 1fr !important;
      }
    }



    /* Contact form color restore to original card style */
    .contact-field input,
    .contact-field select,
    .contact-field textarea {
      background: rgba(255,255,255,.045) !important;
      border-color: rgba(255,255,255,.10) !important;
      color: #FFFFFF !important;
    }

    .contact-field input:focus,
    .contact-field select:focus,
    .contact-field textarea:focus {
      border-color: rgba(255,79,163,.52) !important;
      background: rgba(255,255,255,.06) !important;
      box-shadow: 0 0 0 3px rgba(255,79,163,.10) !important;
    }

    .contact-file-drop {
      border-color: rgba(255,255,255,.18) !important;
      background: rgba(255,255,255,.045) !important;
      color: rgba(255,255,255,.72) !important;
    }

    .contact-file-drop:hover {
      border-color: rgba(255,79,163,.54) !important;
      background: rgba(255,255,255,.06) !important;
      color: #FFFFFF !important;
    }



    /* Contact address location icon refinement */
    .contact-info-icon svg {
      width: 24px;
      height: 24px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 3.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter:
        drop-shadow(0 0 7px rgba(255,79,163,.22))
        drop-shadow(0 0 10px rgba(207,197,255,.14));
    }

    .contact-info-icon-location {
      color: #FFFFFF !important;
      background:
        radial-gradient(circle at 48% 44%, rgba(255,79,163,.20), transparent 58%),
        rgba(255,79,163,.055) !important;
      border-color: rgba(255,79,163,.28) !important;
      box-shadow:
        0 0 18px rgba(255,79,163,.08),
        inset 0 0 0 1px rgba(255,255,255,.025);
    }



    /* Contact address icon color match */
    .contact-info-icon-location {
      color: #FF7CBD !important;
      background: rgba(255,79,163,.055) !important;
      border-color: rgba(255,79,163,.26) !important;
    }

    .contact-info-icon-location svg {
      stroke: #FF7CBD !important;
      filter:
        drop-shadow(0 0 7px rgba(255,79,163,.26))
        drop-shadow(0 0 10px rgba(207,197,255,.12)) !important;
    }



    /* Contact card width refinement */
    .contact-form-panel,
    .contact-info-strip {
      width: min(1280px, 100%);
      margin-left: auto;
      margin-right: auto;
    }

    .contact-info-strip {
      margin-top: 32px !important;
    }

    @media (max-width: 1380px) {
      .contact-form-panel,
      .contact-info-strip {
        width: min(1180px, 100%);
      }
    }



    /* Contact two-column support layout */
    .contact-content-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(360px, .82fr);
      gap: 32px;
      align-items: start;
      width: min(1480px, 100%);
      margin: 0;
    }

    .contact-primary-column {
      min-width: 0;
    }

    .contact-primary-column .contact-form-panel,
    .contact-primary-column .contact-info-strip {
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .contact-support-column {
      display: grid;
      gap: 24px;
      min-width: 0;
    }

    .contact-side-card {
      position: relative;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(circle at 92% 8%, rgba(255,79,163,.08), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018)),
        rgba(13,12,20,.82);
      box-shadow:
        0 26px 78px rgba(0,0,0,.24),
        inset 0 0 0 1px rgba(255,255,255,.016);
      padding: clamp(28px, 2.6vw, 40px);
      overflow: hidden;
      backdrop-filter: blur(18px);
    }

    .contact-side-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255,79,163,.46), rgba(207,197,255,.18), transparent 72%) top left / 100% 1px no-repeat;
      pointer-events: none;
    }

    .contact-side-kicker {
      position: relative;
      z-index: 1;
      margin: 0 0 14px;
      color: #FF7CBD;
      font-size: 13px;
      line-height: 1;
      font-weight: 860;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .contact-side-card h2 {
      position: relative;
      z-index: 1;
      margin: 0;
      color: #FFFFFF;
      font-size: clamp(25px, 2.1vw, 34px);
      line-height: 1.24;
      font-weight: 900;
      letter-spacing: -0.052em;
      word-break: keep-all;
    }

    .contact-process-list {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 14px;
      margin-top: 26px;
    }

    .contact-process-list::before {
      content: "";
      position: absolute;
      left: 31px;
      top: 28px;
      bottom: 28px;
      width: 1px;
      background: linear-gradient(180deg, rgba(255,79,163,.30), rgba(207,197,255,.12));
      pointer-events: none;
    }

    .contact-process-item {
      position: relative;
      display: grid;
      grid-template-columns: 64px 48px 1fr;
      gap: 18px;
      align-items: center;
      min-height: 86px;
      padding: 16px 18px 16px 0;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.028);
    }

    .contact-process-number {
      position: relative;
      z-index: 2;
      width: 54px;
      height: 54px;
      margin-left: 6px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      color: #FF9AD0;
      font-size: 17px;
      font-weight: 900;
      letter-spacing: .04em;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,79,163,.22), transparent 72%),
        rgba(255,79,163,.08);
      border: 1px solid rgba(255,79,163,.16);
    }

    .contact-process-icon,
    .contact-help-icon {
      width: 46px;
      height: 46px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      color: #FF7CBD;
      border: 1px solid rgba(255,79,163,.20);
      background: rgba(255,79,163,.045);
    }

    .contact-process-icon svg,
    .contact-help-icon svg {
      width: 26px;
      height: 26px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 7px rgba(255,79,163,.20));
    }

    .contact-process-item h3,
    .contact-help-item h3 {
      margin: 0;
      color: #FFFFFF;
      font-size: 17px;
      line-height: 1.25;
      font-weight: 860;
      letter-spacing: -0.035em;
    }

    .contact-process-item p,
    .contact-help-item p {
      margin: 7px 0 0;
      color: #B9B4C7;
      font-size: 14px;
      line-height: 1.55;
      font-weight: 520;
      letter-spacing: -0.025em;
      word-break: keep-all;
    }

    .contact-help-list {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 12px;
      margin-top: 24px;
    }

    .contact-help-item {
      display: grid;
      grid-template-columns: 54px 1fr 20px;
      gap: 16px;
      align-items: center;
      min-height: 76px;
      padding: 14px 18px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.028);
      transition: transform .22s ease, border-color .22s ease, background .22s ease;
    }

    .contact-help-item > span {
      color: #FF7CBD;
      font-size: 28px;
      line-height: 1;
      font-weight: 300;
    }

    .contact-help-item:hover {
      transform: translateY(-2px);
      border-color: rgba(255,79,163,.24);
      background: rgba(255,255,255,.04);
    }

    @media (max-width: 1180px) {
      .contact-content-grid {
        grid-template-columns: 1fr;
        width: 100%;
      }
    }

    @media (max-width: 640px) {
      .contact-side-card {
        border-radius: 22px;
      }

      .contact-process-item {
        grid-template-columns: 54px 1fr;
        gap: 14px;
      }

      .contact-process-icon {
        display: none;
      }

      .contact-help-item {
        grid-template-columns: 48px 1fr 16px;
        padding: 13px 14px;
      }
    }



    /* Contact layout width + right support simplification */
    .contact-content-grid {
      grid-template-columns: minmax(0, 1.42fr) minmax(300px, .58fr) !important;
      gap: 44px !important;
      width: min(1480px, 100%) !important;
      align-items: start !important;
    }

    .contact-primary-column .contact-form-panel {
      width: 100% !important;
    }

    .contact-support-column {
      width: 100% !important;
      max-width: 440px !important;
      justify-self: end !important;
      gap: 28px !important;
    }

    .contact-side-card {
      padding: 10px 0 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      overflow: visible !important;
    }

    .contact-side-card::before {
      display: none !important;
    }

    .contact-side-kicker {
      margin-bottom: 12px !important;
      font-size: 12px !important;
      letter-spacing: .15em !important;
    }

    .contact-side-card h2 {
      font-size: clamp(22px, 1.7vw, 28px) !important;
      line-height: 1.25 !important;
    }

    .contact-process-list {
      gap: 10px !important;
      margin-top: 20px !important;
    }

    .contact-process-list::before {
      left: 25px !important;
      top: 24px !important;
      bottom: 24px !important;
      opacity: .55;
    }

    .contact-process-item {
      min-height: 68px !important;
      grid-template-columns: 52px 36px 1fr !important;
      gap: 12px !important;
      padding: 11px 12px 11px 0 !important;
      border: 0 !important;
      background: transparent !important;
      border-radius: 0 !important;
    }

    .contact-process-number {
      width: 44px !important;
      height: 44px !important;
      margin-left: 4px !important;
      font-size: 14px !important;
      background: rgba(255,79,163,.075) !important;
    }

    .contact-process-icon,
    .contact-help-icon {
      width: 36px !important;
      height: 36px !important;
      border-radius: 11px !important;
      background: rgba(255,79,163,.045) !important;
    }

    .contact-process-icon svg,
    .contact-help-icon svg {
      width: 21px !important;
      height: 21px !important;
      stroke-width: 2.5 !important;
    }

    .contact-process-item h3,
    .contact-help-item h3 {
      font-size: 15px !important;
      line-height: 1.25 !important;
    }

    .contact-process-item p,
    .contact-help-item p {
      margin-top: 5px !important;
      font-size: 13px !important;
      line-height: 1.48 !important;
    }

    .contact-help-list {
      gap: 8px !important;
      margin-top: 18px !important;
    }

    .contact-help-item {
      min-height: 58px !important;
      grid-template-columns: 42px 1fr 14px !important;
      gap: 12px !important;
      padding: 10px 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      border-top: 1px solid rgba(255,255,255,.075) !important;
    }

    .contact-help-item:first-child {
      border-top: 0 !important;
    }

    .contact-help-item:hover {
      transform: none !important;
      background: transparent !important;
      border-color: rgba(255,255,255,.075) !important;
    }

    .contact-help-item > span {
      font-size: 22px !important;
    }

    .contact-info-wide {
      grid-column: 1 / -1 !important;
      width: 100% !important;
      margin: 34px 0 0 !important;
    }

    @media (max-width: 1180px) {
      .contact-content-grid {
        grid-template-columns: 1fr !important;
      }

      .contact-support-column {
        max-width: 100% !important;
        justify-self: stretch !important;
      }

      .contact-info-wide {
        grid-column: auto !important;
      }
    }



    /* Contact breadcrumb removed + process icons removed */
    .contact-breadcrumb {
      display: none !important;
    }

    .contact-hero {
      margin-top: 0 !important;
    }

    .contact-process-item {
      grid-template-columns: 52px 1fr !important;
      gap: 14px !important;
    }

    .contact-process-list::before {
      left: 25px !important;
    }

    @media (max-width: 640px) {
      .contact-process-item {
        grid-template-columns: 52px 1fr !important;
      }
    }



    /* Contact layout: wider form, support column pushed right */
    .contact-content-grid {
      grid-template-columns: minmax(0, 1.62fr) minmax(280px, .48fr) !important;
      gap: clamp(64px, 7vw, 112px) !important;
      width: min(1540px, 100%) !important;
      align-items: start !important;
    }

    .contact-primary-column .contact-form-panel {
      width: 100% !important;
      max-width: none !important;
    }

    .contact-support-column {
      max-width: 390px !important;
      width: 100% !important;
      justify-self: end !important;
      transform: translateX(18px);
    }

    .contact-side-card {
      padding-top: 6px !important;
    }

    .contact-info-wide {
      grid-column: 1 / -1 !important;
      width: 100% !important;
      max-width: none !important;
      margin-top: 34px !important;
    }

    @media (max-width: 1180px) {
      .contact-content-grid {
        grid-template-columns: 1fr !important;
        gap: 42px !important;
        width: 100% !important;
      }

      .contact-support-column {
        max-width: 100% !important;
        justify-self: stretch !important;
        transform: none !important;
      }
    }



    /* Contact Google map under help section */
    .contact-side-map {
      position: relative;
      padding: 10px 0 0;
      margin-top: 4px;
    }

    .contact-map-head {
      margin-bottom: 16px;
    }

    .contact-map-head h2 {
      margin: 0;
      color: #FFFFFF;
      font-size: clamp(22px, 1.7vw, 28px);
      line-height: 1.25;
      font-weight: 900;
      letter-spacing: -0.052em;
      word-break: keep-all;
    }

    .contact-map-head span {
      display: block;
      margin-top: 10px;
      color: #B9B4C7;
      font-size: 13px;
      line-height: 1.55;
      font-weight: 520;
      letter-spacing: -0.025em;
      word-break: keep-all;
    }

    .contact-map-frame {
      position: relative;
      width: 100%;
      height: 220px;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.035);
      box-shadow:
        0 18px 48px rgba(0,0,0,.22),
        inset 0 0 0 1px rgba(255,255,255,.018);
    }

    .contact-map-frame iframe {
      width: 100%;
      height: 100%;
      border: 0;
      filter: grayscale(1) invert(.92) contrast(.92) brightness(.78) saturate(.55);
      opacity: .88;
    }

    .contact-map-frame::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,79,163,.12), transparent 44%),
        linear-gradient(180deg, transparent 62%, rgba(5,5,9,.20));
      mix-blend-mode: screen;
    }

    @media (max-width: 1180px) {
      .contact-map-frame {
        height: 260px;
      }
    }

    @media (max-width: 640px) {
      .contact-map-frame {
        height: 220px;
        border-radius: 16px;
      }
    }



    /* Contact map full-color view */
    .contact-map-frame iframe {
      filter: none !important;
      opacity: 1 !important;
    }

    .contact-map-frame::after {
      display: none !important;
    }



    /* Contact category tabs moved to form section */
    .contact-category-tabs-hero {
      margin-top: 0 !important;
    }

    .contact-category-tabs-section {
      display: inline-flex !important;
      grid-template-columns: none !important;
      width: auto !important;
      max-width: 100%;
      align-items: center;
      justify-content: flex-start;
      gap: 8px !important;
      margin: 0 0 22px !important;
      padding: 7px !important;
      justify-self: start;
    }

    .contact-category-tabs-section .contact-category-tab {
      flex: 0 0 auto !important;
      width: auto !important;
      min-width: auto !important;
      height: 48px !important;
      padding: 0 22px !important;
      gap: 8px !important;
    }

    .contact-hero {
      margin-bottom: 56px !important;
    }

    @media (max-width: 640px) {
      .contact-category-tabs-section {
        display: flex !important;
        width: 100% !important;
        border-radius: 999px !important;
        overflow-x: auto;
        scrollbar-width: none;
        margin-bottom: 20px !important;
      }

      .contact-category-tabs-section::-webkit-scrollbar {
        display: none;
      }

      .contact-category-tabs-section .contact-category-tab {
        flex: 1 0 auto !important;
        padding: 0 18px !important;
      }
    }



    /* Contact section vertical alignment with process column */
    .contact-category-tabs-section {
      margin-top: 48px !important;
    }

    .contact-content-grid {
      align-items: start !important;
    }

    @media (max-width: 1180px) {
      .contact-category-tabs-section {
        margin-top: 0 !important;
      }
    }



    /* Contact support column align to category tabs */
    .contact-category-tabs-section {
      margin-top: 0 !important;
    }

    .contact-support-column {
      transform: translate(18px, -48px) !important;
    }

    @media (max-width: 1180px) {
      .contact-support-column {
        transform: none !important;
      }
    }



    /* Contact tabs inside left column + support top alignment */
    .contact-primary-column {
      display: block;
      min-width: 0;
    }

    .contact-primary-column .contact-category-tabs-section {
      margin: 0 0 22px !important;
    }

    .contact-support-column {
      transform: none !important;
      padding-top: 0 !important;
    }

    .contact-content-grid {
      align-items: start !important;
    }

    @media (max-width: 1180px) {
      .contact-primary-column .contact-category-tabs-section {
        margin-bottom: 20px !important;
      }
    }



    /* Contact right column animation + bottom info spacing */
    .contact-process-card,
    .contact-help-card {
      opacity: 0;
      transform: translate3d(0, 28px, 0);
      transition:
        opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-process-card.is-visible,
    .contact-help-card.is-visible {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .contact-help-card {
      transition-delay: 120ms;
    }

    .contact-info-wide {
      margin-top: 22px !important;
    }



    /* Contact right column unified reveal + tighter bottom info gap */
    .contact-process-card,
    .contact-help-card,
    .contact-point-card,
    .contact-side-map {
      opacity: 0 !important;
      transform: translate3d(0, 28px, 0) !important;
      transition:
        opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1) !important;
      transition-delay: 0ms !important;
    }

    .contact-help-card {
      transition-delay: 120ms !important;
    }

    .contact-side-map {
      transition-delay: 240ms !important;
    }

    .contact-process-card.is-visible,
    .contact-help-card.is-visible,
    .contact-point-card.is-visible,
    .contact-side-map.is-visible {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) !important;
    }

    .contact-side-map[data-reveal] {
      opacity: 0 !important;
      transform: translate3d(0, 28px, 0) !important;
    }

    .contact-side-map[data-reveal].is-visible {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) !important;
    }

    .contact-info-wide {
      margin-top: 10px !important;
    }



    /* Contact map timing + contact info tighter gap */
    .contact-side-map {
      transition-delay: 120ms !important;
    }

    .contact-info-wide {
      margin-top: -18px !important;
    }

    @media (max-width: 1180px) {
      .contact-info-wide {
        margin-top: 18px !important;
      }
    }



    /* Contact point card replacing help/contact info */
    .contact-point-list {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 18px;
      margin-top: 22px;
    }

    .contact-point-item {
      display: grid;
      grid-template-columns: 46px 1fr;
      gap: 16px;
      align-items: start;
      padding: 0 0 18px;
      border-bottom: 1px solid rgba(255,255,255,.075);
    }

    .contact-point-item:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }

    .contact-point-icon {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      color: #FF7CBD;
      border: 1px solid rgba(255,79,163,.26);
      background: rgba(255,79,163,.055);
      font-size: 16px;
      line-height: 1;
      box-shadow:
        0 0 18px rgba(255,79,163,.08),
        inset 0 0 0 1px rgba(255,255,255,.025);
    }

    .contact-point-item h3 {
      margin: 0 0 8px;
      color: #FFFFFF;
      font-size: 15px;
      line-height: 1.25;
      font-weight: 860;
      letter-spacing: -0.035em;
    }

    .contact-point-item strong {
      display: block;
      color: #CFC5FF;
      font-size: 18px;
      line-height: 1.2;
      font-weight: 900;
      letter-spacing: -0.035em;
      word-break: break-all;
    }

    .contact-point-item p {
      margin: 7px 0 0;
      color: #B9B4C7;
      font-size: 13px;
      line-height: 1.55;
      font-weight: 520;
      letter-spacing: -0.025em;
      word-break: keep-all;
    }

    .contact-info-strip,
    .contact-info-wide {
      display: none !important;
    }

    .contact-side-map {
      margin-top: 72px !important;
    }
    @media (max-width: 1180px) {
      .contact-side-map {
        margin-top: 48px !important;
      }
    }
    @media (max-width: 640px) {
      .contact-side-map {
        margin-top: 36px !important;
      }
    }

    /* Stretch the left form card to match right side total height,
       by expanding the file drop area to absorb the difference.
       Using grid rows (not flex) on the column so the category tabs
       above the form keep their natural width. */
    .contact-content-grid {
      align-items: stretch !important;
    }
    .contact-primary-column {
      display: grid !important;
      grid-template-rows: auto 1fr;
      row-gap: 22px;
    }
    .contact-primary-column .contact-category-tabs-section {
      margin-bottom: 0 !important;
    }
    .contact-primary-column .contact-form-panel {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .contact-primary-column .contact-form,
    .contact-primary-column .contact-form-template.is-active {
      flex: 1 1 auto;
      display: grid;
      grid-auto-rows: min-content;
    }
    .contact-primary-column .contact-form-template.is-active .contact-file-field {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .contact-primary-column .contact-form-template.is-active .contact-file-drop {
      flex: 1 1 auto;
      min-height: 200px;
      height: auto !important;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    .contact-primary-column .contact-form-template.is-active .contact-file-drop::before {
      content: "";
      flex: 0 0 22px;
      width: 22px;
      height: 22px;
      background-color: currentColor;
      -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><polyline points='14 3 14 8 19 8'/></svg>") no-repeat center / contain;
              mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><polyline points='14 3 14 8 19 8'/></svg>") no-repeat center / contain;
      opacity: .82;
      transition: opacity .22s ease;
    }
    .contact-primary-column .contact-form-template.is-active .contact-file-drop:hover::before {
      opacity: 1;
    }
    .contact-primary-column .contact-form-bottom {
      margin-top: auto;
    }
    @media (max-width: 1180px) {
      .contact-primary-column .contact-form-template.is-active .contact-file-drop {
        min-height: 140px;
      }
    }
    @media (max-width: 640px) {
      .contact-primary-column .contact-form-template.is-active .contact-file-drop {
        min-height: 100px;
      }
    }



    /* Contact point text color refinement */
    .contact-point-item strong {
      color: #FFFFFF !important;
    }



    /* Contact point label color refinement */
    .contact-point-item h3 {
      color: #CFC5FF !important;
    }



    /* Contact dynamic form templates */
    .contact-form-template {
      display: none;
    }

    .contact-form-template.is-active {
      display: grid;
      gap: 22px;
    }



    /* ===== Contact FAQ Section ===== */
    .contact-faq-section {
      position: relative;
      z-index: 2;
      width: min(1480px, 100%);
      margin: clamp(92px, 9vw, 140px) 0 0;
      padding: 0 0 24px;
    }

    .contact-faq-head {
      text-align: center;
      margin: 0 auto 44px;
    }

    .contact-faq-kicker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 36px;
      padding: 0 22px;
      margin: 0 0 20px;
      border-radius: 999px;
      color: #CFC5FF;
      font-size: 15px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: .16em;
      background: rgba(124,92,255,.16);
      border: 1px solid rgba(207,197,255,.16);
    }

    .contact-faq-head h2 {
      margin: 0;
      color: #FFFFFF;
      font-size: clamp(42px, 4.4vw, 72px);
      line-height: 1.08;
      font-weight: 920;
      letter-spacing: -0.065em;
    }

    .contact-faq-head p {
      margin: 18px 0 0;
      color: #B9B4C7;
      font-size: 18px;
      line-height: 1.7;
      font-weight: 520;
      letter-spacing: -0.025em;
    }

    .contact-faq-tabs {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 18px;
      margin: 0 auto 34px;
    }

    .contact-faq-tab {
      min-width: 116px;
      height: 48px;
      padding: 0 24px;
      border: 0;
      border-radius: 999px;
      color: rgba(255,255,255,.70);
      font-family: inherit;
      font-size: 16px;
      font-weight: 820;
      letter-spacing: -0.025em;
      background: transparent;
      cursor: pointer;
      transition: color .22s ease, background .22s ease, transform .22s ease;
    }

    .contact-faq-tab.is-active {
      color: #FFFFFF;
      background: linear-gradient(135deg, rgba(79,94,255,.92) 0%, rgba(124,92,255,.88) 100%);
      box-shadow:
        0 14px 34px rgba(124,92,255,.16),
        inset 0 0 0 1px rgba(255,255,255,.14);
    }

    .contact-faq-tab:not(.is-active):hover {
      color: #FF7CBD;
      background: rgba(255,255,255,.045);
      transform: translateY(-1px);
    }

    .contact-faq-layout {
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(circle at 50% 0%, rgba(124,92,255,.075), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014)),
        rgba(13,12,20,.72);
      box-shadow:
        0 26px 78px rgba(0,0,0,.22),
        inset 0 0 0 1px rgba(255,255,255,.012);
      padding: clamp(26px, 2.4vw, 36px);
      backdrop-filter: blur(18px);
    }

    .contact-faq-list {
      display: grid;
      gap: 10px;
    }

    .contact-faq-item {
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.075);
      background: rgba(255,255,255,.030);
      overflow: hidden;
      transition: border-color .22s ease, background .22s ease;
    }

    .contact-faq-item.is-hidden {
      display: none;
    }

    .contact-faq-item.is-open {
      border-color: rgba(207,197,255,.18);
      background: rgba(255,255,255,.045);
    }

    .contact-faq-question {
      width: 100%;
      min-height: 66px;
      padding: 0 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      border: 0;
      background: transparent;
      color: #FFFFFF;
      font-family: inherit;
      text-align: left;
      cursor: pointer;
    }

    .contact-faq-question span {
      color: #FFFFFF;
      font-size: clamp(17px, 1.35vw, 22px);
      line-height: 1.4;
      font-weight: 850;
      letter-spacing: -0.035em;
      word-break: keep-all;
    }

    .contact-faq-question span::first-letter {
      color: #7C6CFF;
    }

    .contact-faq-question i {
      position: relative;
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
    }

    .contact-faq-question i::before,
    .contact-faq-question i::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 16px;
      height: 2px;
      border-radius: 999px;
      background: rgba(255,255,255,.86);
      transform: translate(-50%, -50%);
      transition: transform .22s ease, background .22s ease;
    }

    .contact-faq-question i::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .contact-faq-item.is-open .contact-faq-question i::after {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    .contact-faq-item.is-open .contact-faq-question i::before,
    .contact-faq-item.is-open .contact-faq-question i::after {
      background: #CFC5FF;
    }

    .contact-faq-answer {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .26s ease;
    }

    .contact-faq-item.is-open .contact-faq-answer {
      grid-template-rows: 1fr;
    }

    .contact-faq-answer p {
      overflow: hidden;
      margin: 0;
      padding: 0 56px 0;
      color: #B9B4C7;
      font-size: 16px;
      line-height: 1.75;
      font-weight: 520;
      letter-spacing: -0.025em;
      word-break: keep-all;
    }

    .contact-faq-item.is-open .contact-faq-answer p {
      padding-bottom: 28px;
    }

    .contact-faq-feature-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      margin-top: 28px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.014)),
        rgba(13,12,20,.66);
      overflow: hidden;
    }

    .contact-faq-feature {
      display: grid;
      grid-template-columns: 86px 1fr;
      gap: 22px;
      align-items: center;
      padding: 30px 34px;
      border-left: 1px solid rgba(255,255,255,.075);
    }

    .contact-faq-feature:first-child {
      border-left: 0;
    }

    .contact-faq-feature-icon {
      width: 72px;
      height: 72px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      color: #7C6CFF;
      background:
        radial-gradient(circle at 50% 50%, rgba(124,92,255,.18), transparent 70%),
        rgba(124,92,255,.07);
      border: 1px solid rgba(207,197,255,.14);
    }

    .contact-faq-feature-icon svg {
      width: 38px;
      height: 38px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 8px rgba(124,92,255,.20));
    }

    .contact-faq-feature h3 {
      margin: 0 0 8px;
      color: #FFFFFF;
      font-size: 20px;
      line-height: 1.32;
      font-weight: 880;
      letter-spacing: -0.04em;
    }

    .contact-faq-feature p {
      margin: 0;
      color: #B9B4C7;
      font-size: 15px;
      line-height: 1.62;
      font-weight: 520;
      letter-spacing: -0.025em;
      word-break: keep-all;
    }

    @media (max-width: 980px) {
      .contact-faq-feature-strip {
        grid-template-columns: 1fr;
      }

      .contact-faq-feature {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.075);
      }

      .contact-faq-feature:first-child {
        border-top: 0;
      }
    }

    @media (max-width: 640px) {
      .contact-faq-section {
        margin-top: 72px;
      }

      .contact-faq-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 10px;
        padding-bottom: 4px;
        scrollbar-width: none;
      }

      .contact-faq-tabs::-webkit-scrollbar {
        display: none;
      }

      .contact-faq-tab {
        min-width: auto;
        flex: 0 0 auto;
        height: 44px;
        padding: 0 18px;
        font-size: 14px;
      }

      .contact-faq-question {
        min-height: 58px;
        padding: 0 18px;
      }

      .contact-faq-answer p {
        padding-left: 18px;
        padding-right: 18px;
        font-size: 14px;
      }

      .contact-faq-feature {
        grid-template-columns: 64px 1fr;
        gap: 16px;
        padding: 24px 20px;
      }

      .contact-faq-feature-icon {
        width: 56px;
        height: 56px;
      }
    }



    /* FAQ color refinement to match CELLBIG contact page */
    .contact-faq-kicker {
      color: #FF4FA3 !important;
      background: rgba(255,79,163,.08) !important;
      border-color: rgba(255,79,163,.18) !important;
    }

    .contact-faq-tab.is-active {
      background: linear-gradient(135deg, #FF4FA3 0%, #9B5CFF 100%) !important;
      box-shadow:
        0 14px 34px rgba(255,79,163,.18),
        inset 0 0 0 1px rgba(255,255,255,.16) !important;
    }

    .contact-faq-tab:not(.is-active):hover {
      color: #FF7CBD !important;
      background: rgba(255,255,255,.045) !important;
    }

    .contact-faq-layout {
      background:
        radial-gradient(circle at 50% 0%, rgba(255,79,163,.075), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014)),
        rgba(13,12,20,.72) !important;
    }

    .contact-faq-question span::first-letter {
      color: #FF4FA3 !important;
    }

    .contact-faq-item.is-open .contact-faq-question i::before,
    .contact-faq-item.is-open .contact-faq-question i::after {
      background: #FF7CBD !important;
    }

    .contact-faq-feature-icon {
      color: #FF7CBD !important;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,79,163,.18), transparent 70%),
        rgba(255,79,163,.055) !important;
      border-color: rgba(255,79,163,.18) !important;
    }

    .contact-faq-feature-icon svg {
      filter: drop-shadow(0 0 8px rgba(255,79,163,.22)) !important;
    }

    .contact-faq-item.is-open {
      border-color: rgba(255,79,163,.20) !important;
      background: rgba(255,255,255,.045) !important;
    }



    /* FAQ title style match other section headings */
    .contact-faq-head {
      max-width: 860px !important;
      margin: 0 auto 56px !important;
      text-align: center !important;
    }

    .contact-faq-kicker {
      display: inline-block !important;
      height: auto !important;
      padding: 0 !important;
      margin: 0 0 16px !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: #FF4FA3 !important;
      font-size: 14px !important;
      line-height: 1 !important;
      font-weight: 900 !important;
      letter-spacing: .06em !important;
      text-transform: uppercase !important;
    }

    .contact-faq-head h2 {
      margin: 0 !important;
      color: #FFFFFF !important;
      font-size: clamp(34px, 4vw, 52px) !important;
      line-height: 1.16 !important;
      letter-spacing: -0.055em !important;
      font-weight: 900 !important;
    }

    .contact-faq-head p {
      margin: 18px auto 0 !important;
      max-width: 760px !important;
      color: var(--text-sub) !important;
      font-size: 18px !important;
      line-height: 1.75 !important;
      font-weight: 500 !important;
      letter-spacing: -0.025em !important;
    }

    @media (max-width: 640px) {
      .contact-faq-head {
        margin-bottom: 42px !important;
      }

      .contact-faq-head p {
        font-size: 16px !important;
      }
    }



    /* FAQ kicker pink + category filter left aligned */
    .contact-faq-kicker {
      color: #FF4FA3 !important;
    }

    .contact-faq-tabs {
      justify-content: flex-start !important;
      margin-left: 0 !important;
      margin-right: auto !important;
      width: 100% !important;
    }



    /* FAQ kicker force pink */
    .page-contact .contact-faq-section .contact-faq-head .contact-faq-kicker,
    .page-contact .contact-faq-kicker,
    .contact-faq-section .contact-faq-kicker {
      color: #FF4FA3 !important;
      -webkit-text-fill-color: #FF4FA3 !important;
      background: transparent !important;
      background-image: none !important;
      text-shadow: 0 0 14px rgba(255,79,163,.12) !important;
    }



    /* FAQ question list remove outer card box */
    .contact-faq-layout {
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      padding: 0 !important;
      border-radius: 0 !important;
    }

    .contact-faq-item {
      border-left: 0 !important;
      border-right: 0 !important;
      border-top: 0 !important;
      border-bottom: 1px solid rgba(255,255,255,.10) !important;
      border-radius: 0 !important;
      background: transparent !important;
    }

    .contact-faq-item.is-open {
      background: transparent !important;
      border-color: rgba(255,255,255,.14) !important;
    }

    .contact-faq-question {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .contact-faq-answer p {
      padding-left: 0 !important;
      padding-right: 42px !important;
    }

    .contact-faq-item.is-open .contact-faq-answer p {
      padding-bottom: 26px !important;
    }

    @media (max-width: 640px) {
      .contact-faq-answer p {
        padding-right: 0 !important;
      }
    }



    /* FAQ question Q spacing refinement */
    .contact-faq-question span {
      word-spacing: 0.18em;
    }

    .contact-faq-question span::first-letter {
      margin-right: 8px;
    }

    .contact-faq-question span {
      display: inline-block;
    }



    /* FAQ category filter removed */
    .contact-faq-tabs {
      display: none !important;
    }

    .contact-faq-item.is-hidden {
      display: block !important;
    }



    /* Contact point FAQ item same style */
    .contact-point-faq-item .contact-point-icon {
      font-weight: 900;
      font-size: 18px;
    }

    .contact-point-link {
      display: inline-flex;
      align-items: center;
      margin-top: 8px;
      color: #FF7CBD;
      font-size: 13px;
      line-height: 1;
      font-weight: 820;
      letter-spacing: -0.025em;
      text-decoration: none;
      transition: color .22s ease, transform .22s ease;
    }

    .contact-point-link::after {
      content: "↓";
      margin-left: 8px;
      font-size: 14px;
      transition: transform .22s ease;
    }

    .contact-point-link:hover {
      color: #CFC5FF;
      transform: translateY(-1px);
    }

    .contact-point-link:hover::after {
      transform: translateY(3px);
    }



    /* FAQ no-card list + left aligned heading */
    .contact-faq-head {
      max-width: 860px !important;
      margin: 0 0 46px !important;
      text-align: left !important;
    }

    .contact-faq-head p {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .contact-faq-layout {
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      padding: 0 !important;
      border-radius: 0 !important;
    }

    .contact-faq-item {
      border-left: 0 !important;
      border-right: 0 !important;
      border-top: 0 !important;
      border-bottom: 1px solid rgba(255,255,255,.10) !important;
      border-radius: 0 !important;
      background: transparent !important;
    }

    .contact-faq-item.is-open {
      background: transparent !important;
      border-color: rgba(255,255,255,.14) !important;
    }

    .contact-faq-question {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .contact-faq-answer p {
      padding-left: 0 !important;
      padding-right: 42px !important;
    }

    .contact-faq-item.is-open .contact-faq-answer p {
      padding-bottom: 26px !important;
    }

    @media (max-width: 640px) {
      .contact-faq-head {
        margin-bottom: 38px !important;
      }

      .contact-faq-answer p {
        padding-right: 0 !important;
      }
    }



    /* FAQ heading final refinement: keep left aligned */
    .contact-faq-section {
      margin-top: clamp(96px, 8vw, 140px) !important;
    }

    .contact-faq-head {
      max-width: 860px !important;
      margin: 0 0 46px !important;
      text-align: left !important;
    }

    .contact-faq-head p {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .contact-faq-kicker {
      font-size: 18px !important;
      font-weight: 950 !important;
      letter-spacing: .08em !important;
      color: #FF4FA3 !important;
      -webkit-text-fill-color: #FF4FA3 !important;
      text-align: left !important;
    }

    .contact-faq-head h2 {
      font-size: clamp(38px, 4.4vw, 62px) !important;
      text-align: left !important;
    }

    @media (max-width: 640px) {
      .contact-faq-section {
        margin-top: 84px !important;
      }

      .contact-faq-kicker {
        font-size: 16px !important;
      }
    }



    /* Contact hero graphic only removed */
    .contact-hero-visual {
      pointer-events: none;
    }

    .contact-hero-visual > * {
      display: none !important;
    }



    /* FAQ title center alignment */
    .contact-faq-head {
      max-width: 860px !important;
      margin: 0 auto 46px !important;
      text-align: center !important;
    }

    .contact-faq-head p {
      margin-left: auto !important;
      margin-right: auto !important;
      text-align: center !important;
    }

    .contact-faq-kicker,
    .contact-faq-head h2 {
      text-align: center !important;
    }



    /* FAQ heading to list spacing refinement */
    .contact-faq-head {
      margin-bottom: 68px !important;
    }

    @media (max-width: 640px) {
      .contact-faq-head {
        margin-bottom: 48px !important;
      }
    }



    /* FAQ feature strip lower spacing */
    .contact-faq-feature-strip {
      margin-top: 56px !important;
    }

    @media (max-width: 640px) {
      .contact-faq-feature-strip {
        margin-top: 38px !important;
      }
    }


    /* ===== Portfolio drag-scroll (overrides marquee in JS-enabled browsers) ===== */
    .portfolio-track-wrap.is-draggable {
      overflow-x: auto;
      overflow-y: hidden;
      cursor: grab;
      scrollbar-width: none;            /* Firefox */
      -ms-overflow-style: none;         /* IE */
      scroll-behavior: auto;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;              /* allow vertical page scroll; let JS handle horizontal */
    }
    .portfolio-track-wrap.is-draggable::-webkit-scrollbar { display: none; }

    .portfolio-track-wrap.is-draggable.is-dragging {
      cursor: grabbing;
      user-select: none;
    }
    .portfolio-track-wrap.is-draggable.is-dragging * {
      pointer-events: none;
    }

    /* While JS owns the scroll, disable the CSS marquee animation */
    .portfolio-track-wrap.is-draggable .portfolio-track {
      animation: none !important;
    }

    .portfolio-track-wrap.is-draggable .portfolio-card {
      user-select: none;
    }
    .portfolio-track-wrap.is-draggable .portfolio-card * {
      -webkit-user-drag: none;
    }
    /* ============================================================
       Global polish (works alongside Tailwind utilities)
       Layout is untouched — only accessibility, typography,
       form polish, and small interaction niceties.
       ============================================================ */
    html { scroll-behavior: smooth; }
    body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-feature-settings: "ss01", "ss02", "tnum";
      -webkit-tap-highlight-color: transparent;
    }

    /* Selection */
    ::selection {
      background: rgba(255, 79, 163, .35);
      color: #FFFFFF;
    }

    /* Custom scrollbar (desktop only) */
    @media (pointer: fine) {
      ::-webkit-scrollbar { width: 10px; height: 10px; }
      ::-webkit-scrollbar-track { background: rgba(255,255,255,.02); }
      ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(255,79,163,.45), rgba(155,92,255,.45));
        border-radius: 999px;
        border: 2px solid rgba(5,5,9,.95);
      }
      ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, rgba(255,79,163,.7), rgba(155,92,255,.7));
      }
    }

    /* Accessible focus ring — only on keyboard focus */
    :focus { outline: none; }
    a:focus-visible,
    button:focus-visible,
    [role="button"]:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible,
    summary:focus-visible {
      outline: 2px solid #FF4FA3;
      outline-offset: 3px;
      border-radius: 8px;
    }

    /* Form input subtle polish (won't override our existing custom field styles) */
    input::placeholder,
    textarea::placeholder { color: rgba(255,255,255,.32); }

    /* Image perf hint */
    img { -webkit-user-drag: none; }

    /* Reduced motion respect (extra blanket) */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ============================================================
       Preflight typography rescue
       Tailwind preflight runs AFTER our inline <style> blocks, so
       its `h1,h2,h3 { font-size: inherit }` clobbers our un-classed
       heading rules. Re-assert with higher specificity (body-scoped)
       so they win regardless of source order.
       ============================================================ */
    body h1 {
      margin: 0;
      font-size: clamp(48px, 6vw, 84px);
      line-height: 1.05;
      font-weight: 900;
      letter-spacing: -0.075em;
    }
    body h3, body h4, body h5, body h6 {
      margin: 0;
      font-weight: 900;
    }

    /* Hero h1 inside .cellbig-hero (extra specificity guard) */
    body .cellbig-hero h1,
    body .home-hero h1,
    body .ai-studio-hero h1 {
      font-size: clamp(48px, 6vw, 84px) !important;
      line-height: 1.05 !important;
      font-weight: 900 !important;
      letter-spacing: -0.075em !important;
    }

    /* Restore common un-classed h3 sizes our existing CSS expects */
    body .contact-process-card h3,
    body .contact-help-card h3,
    body .contact-point-card h3 {
      font-size: 20px;
      line-height: 1.35;
      font-weight: 900;
      letter-spacing: -0.035em;
      margin: 0;
    }

    body .portfolio-card-content h3,
    body .portfolio-card-body h3 {
      font-size: 20px;
      line-height: 1.35;
      font-weight: 850;
      letter-spacing: -0.035em;
      margin: 0;
    }

    body .portfolio-impact-row strong { font-weight: 900; }
    body section h3 { line-height: 1.35; }

    @media (max-width: 640px) {
      body h1 { font-size: clamp(32px, 9vw, 44px); letter-spacing: -0.06em; }
    }

    /* ============================================================
       Section heading → content breathing room
       Boost the gap between section title group and content below.
       ============================================================ */
    body .section-intro,
    body .process-intro,
    body .team-intro,
    body .portfolio-intro,
    body .lxengine-intro,
    body .compare-intro,
    body .impact-intro,
    body .contact-faq-head {
      margin-bottom: clamp(72px, 7vw, 108px) !important;
    }
    @media (max-width: 980px) {
      body .section-intro,
      body .process-intro,
      body .team-intro,
      body .portfolio-intro,
      body .lxengine-intro,
      body .compare-intro,
      body .impact-intro,
      body .contact-faq-head {
        margin-bottom: 64px !important;
      }
    }
    @media (max-width: 640px) {
      body .section-intro,
      body .process-intro,
      body .team-intro,
      body .portfolio-intro,
      body .lxengine-intro,
      body .compare-intro,
      body .impact-intro,
      body .contact-faq-head {
        margin-bottom: 48px !important;
      }
    }

    /* Mobile header menu */
    .nav-menu-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: #fff;
      cursor: pointer;
    }

    .nav-menu-toggle span {
      display: block;
      width: 18px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transition: transform .22s ease, opacity .18s ease;
    }

    .nav-menu-toggle span + span {
      margin-top: 4px;
    }

    .nav-links .nav-mobile-contact {
      display: none;
    }

    @media (max-width: 980px) {
      .site-header .nav-shell {
        position: relative;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        height: 64px;
        gap: 12px;
        padding-right: 10px;
      }

      .site-header .brand {
        min-width: 0;
      }

      .site-header .nav-button {
        display: none;
      }

      .site-header .nav-menu-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-self: end;
      }

      .site-header .nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        width: 100%;
        padding: 10px;
        border-radius: 24px;
        border: 1px solid rgba(255,255,255,.10);
        background: rgba(12, 10, 20, .94);
        box-shadow: 0 20px 50px rgba(0,0,0,.36);
        backdrop-filter: blur(22px);
      }

      .site-header.is-menu-open .nav-links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
      }

      .site-header .nav-links a,
      .site-header .nav-links .nav-mobile-contact {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 48px;
        padding: 0 18px;
      }

      .site-header.is-menu-open .nav-menu-toggle span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
      }

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

      .site-header.is-menu-open .nav-menu-toggle span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
      }
    }

    @media (max-width: 640px) {
      body .button-row {
        width: 100%;
        max-width: 340px;
        gap: 10px;
      }

      body .button-row .btn {
        flex: 1 1 0;
        min-width: 0 !important;
        height: 48px !important;
        padding: 0 12px !important;
        font-size: 15px !important;
        line-height: 1 !important;
        white-space: nowrap;
      }

      body .final-cta-button,
      body .home-final-cta-button,
      body .portfolio-bottom-inquiry-button,
      body .story-closing-cta.final-cta-button,
      body .contact-submit-row .contact-submit {
        width: min(100%, 340px) !important;
        min-width: 0 !important;
        height: 48px !important;
        min-height: 0 !important;
        padding: 0 18px !important;
        font-size: 15px !important;
        line-height: 1 !important;
        white-space: nowrap;
      }
    }

    @media (max-width: 360px) {
      body .button-row {
        gap: 8px;
      }

      body .button-row .btn,
      body .final-cta-button,
      body .home-final-cta-button,
      body .portfolio-bottom-inquiry-button,
      body .story-closing-cta.final-cta-button,
      body .contact-submit-row .contact-submit {
        height: 46px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 14px !important;
      }
    }

    @media (max-width: 640px) {
      body .button-row .btn {
        flex: 0 1 204px;
        width: 204px !important;
        max-width: 60%;
      }

      body .final-cta-button,
      body .home-final-cta-button,
      body .portfolio-bottom-inquiry-button,
      body .story-closing-cta.final-cta-button,
      body .contact-submit-row .contact-submit {
        width: 204px !important;
        max-width: 60% !important;
      }

      body .home-hero .button-row .btn {
        flex: 1 1 0;
        width: auto !important;
        max-width: none !important;
      }
    }

    @media (hover: hover) {
      body .compare-card,
      body .process-card,
      body .team-card,
      body .lx-feature-card,
      body .studio-impact-card,
      body .story-engine-stat-card,
      body .story-engine-detail-card,
      body .story-engine-merged-card,
      body .story-engine-vertical-card,
      body .contact-help-item {
        cursor: default !important;
        pointer-events: none;
      }

      body .service-card {
        cursor: default !important;
        pointer-events: none;
      }

      body .service-card .service-link {
        pointer-events: auto;
      }

      body .service-card:hover {
        transform: none !important;
        filter: none !important;
      }

      body .service-card:hover::after {
        opacity: 0 !important;
      }

      body .service-type-section .service-card-grid:hover .service-card,
      body .service-type-section .service-card-grid:hover .service-card[data-reveal].is-visible,
      body .service-type-section .service-card-grid:hover .service-card:hover,
      body .service-type-section .service-card-grid:hover .service-card[data-reveal].is-visible:hover {
        opacity: 1 !important;
        transform: none !important;
      }
    }