/* ── Reset & tokens ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg:     #0B0B0D;
      --bg2:    #111215;
      --card:   #14161B;
      --border: rgba(255,255,255,.08);
      --accent: #FF8C1A;
      --glow:   rgba(255,140,26,.25);
      --glow-sm:rgba(255,140,26,.12);
      --text:   #F7F7F7;
      --text2:  #B6BBC7;
      --cmuted: hsl(0, 0%, 70%);
    }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Inter', sans-serif;
      overflow-x: hidden;
      min-height: 100dvh;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 60px 60px;
    }
    h1, h2, h3, .brand-name, .info-value, .stat-value { font-family: 'Space Grotesk', sans-serif; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; }
    ::selection { background: var(--accent); color: var(--bg); }

    /* ── Nav ── */
    .site-nav {
      height: 72px;
      padding: 0 6vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(11,11,13,.85);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      position: sticky;
    }
    .brand { display: flex; align-items: center; gap: 12px; }
    .monogram {
      display: grid; place-items: center;
      width: 30px; height: 30px;
      border: 1px solid var(--accent);
      color: var(--accent);
      font: 600 15px 'Space Grotesk';
      border-radius: 5px;
    }
    .brand-name { font-size: 14px; font-weight: 500; }
    .brand-role { color: var(--cmuted); font-size: 12px; margin-left: 2px; }
    .nav-links { display: flex; align-items: center; gap: 27px; color: var(--text2); font-size: 13px; }
    .nav-links a { transition: color .2s; }
    .nav-links a:hover { color: var(--accent); }
    .nav-cta, .btn-primary {
      background: var(--accent);
      color: var(--bg) !important;
      font-weight: 600;
      border: 0;
      border-radius: 8px;
      padding: 10px 20px;
      transition: transform .25s, box-shadow .25s;
      display: inline-flex; align-items: center; gap: 8px;
    }
    .nav-cta:hover, .btn-primary:hover {
      box-shadow: 0 0 30px rgba(255,140,26,.5);
      transform: translateY(-2px);
    }
    .menu-button { display: none; background: none; color: var(--text); border: 0; padding: 6px; }

    /* ── Hero ── */
    .phero {
      position: relative;
      min-height: calc(100dvh - 72px);
      height:100vh;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      padding: 0 6vw 15vh;
    }
    .hero-cover {
      position: absolute;
      inset: -10%;
      will-change: transform;
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(11,11,13,.92) 42%, rgba(11,11,13,.4) 100%);
    }
    .hero-content {
      position: relative;
      z-index: 2;
      width: 48%;
      max-width: 700px;
    }
    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--cmuted);
      font-size: 13px;
      margin-bottom: 28px;
      transition: color .2s;
    }
    .back-link:hover { color: var(--accent); }
    .badge-row { display: flex; gap: 8px; margin-bottom: 23px; }
    .badge {
      display: inline-flex;
      align-items: center;
      background: rgba(255,140,26,.12);
      border: 1px solid rgba(255,140,26,.3);
      color: var(--accent);
      border-radius: 999px;
      font-size: 11px;
      font-weight: 500;
      padding: 5px 12px;
      letter-spacing: .04em;
    }
    .phero h1 {
      font-size: clamp(52px, 8vw, 80px);
      line-height: .9;
      letter-spacing: -.065em;
      margin-bottom: 24px;
    }
    .hero-subline { color: var(--text2); font-size: 18px; font-weight: 300; margin-bottom: 30px; overflow: hidden;display: -webkit-box; -webkit-line-clamp: 2; /* number of lines to show */ line-clamp: 2; 
   -webkit-box-orient: vertical;}
    .actions { display: flex; gap: 12px; flex-wrap: wrap; }
    .btn-primary, .btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 14px 28px;
      border-radius: 8px;
      font-size: 14px;
      font-family: 'Inter', sans-serif;
    }
    .btn-ghost {
      background: transparent;
      border: 1px solid rgba(255,255,255,.15);
      color: var(--text2);
      transition: color .25s, border-color .25s, box-shadow .25s;
    }
    .btn-ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 20px rgba(255,140,26,.2); }
    .btn-ghost.disabled { opacity: .4; pointer-events: none; }
    .stack { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 25px; }
    .stack span {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.12);
      color: var(--text2);
      border-radius: 999px;
      padding: 6px 14px;
      font-size: 12px;
      transition: color .2s, border-color .2s, transform .2s, box-shadow .2s;
    }
    .stack span:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 14px rgba(255,140,26,.2); transform: translateY(-2px); }
    .hero-info {
      position: absolute;
      z-index: 2;
      right: 6vw;
      top: 50%;
      transform: translateY(-50%);
      width: 280px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .info-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: border-color .3s, box-shadow .3s, transform .3s;
    }
    .info-card:hover { border-color: rgba(255,140,26,.35); box-shadow: 0 0 30px rgba(255,140,26,.1); transform: translateY(-4px); }
    .info-label { display: flex; align-items: center; gap: 9px; color: var(--cmuted); font-size: 11px; }
    .info-label svg { color: var(--accent); }
    .info-value { font-size: 16px; font-weight: 500; }
    .scroll-indicator {
      position: absolute;
      z-index: 2;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      color: var(--cmuted);
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .scroll-indicator::before { content: ""; width: 1px; height: 50px; background: var(--accent); }

    /* ── JFP Scene (cover art) ── */
    .jfp-scene {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: linear-gradient(145deg, #1a1208 0%, #0d0d0c 40%, #0B0B0D 100%);
    }
    .jfp-scene::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 70% 50%, rgba(255,140,26,.22), transparent 55%);
    }
    .scene-grid {
      position: absolute; inset: 0; opacity: .6;
      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: 60px 60px;
    }
    .scene-rings {
      position: absolute;
      border: 1px solid rgba(255,140,26,.18);
      border-radius: 50%;
      transform: rotate(-17deg);
    }
    .scene-rings.one  { width: 700px; height: 700px; right: -60px; top: 0; }
    .scene-rings.two  { width: 530px; height: 530px; right: 70px;  top: 85px; }
    .scene-rings.three{ width: 390px; height: 390px; right: 140px; top: 155px; border-color: rgba(255,210,150,.2); }
    .scene-watermark {
      position: absolute;
      right: 11%; top: 14%;
      font: 700 24vw/.8 'Space Grotesk';
      color: rgba(255,140,26,.11);
      letter-spacing: -.12em;
      user-select: none;
    }
    .scene-label {
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20px;
      background: #efe2c4;
      color: #2f2118;
      box-shadow: 18px 22px 35px rgba(0,0,0,.35);
      transform: rotate(11deg);
      font-family: 'Space Grotesk';
    }
    .scene-label small { font: 600 11px 'Inter'; color: #b65c1d; letter-spacing: .14em; }
    .scene-label strong { font-size: clamp(24px,4vw,48px); line-height: .8; letter-spacing: -.06em; display: block; }
    .scene-label i { font: 10px 'Inter'; font-style: normal; letter-spacing: .1em; }
    .scene-label.one { width: 190px; height: 280px; right: 25%; top: 25%; }
    .scene-label.two { width: 155px; height: 230px; right: 45%; top: 47%; background: #dc6926; color: #f7e5bb; transform: rotate(-15deg); }
    .scene-label.two small { color: #ffd18c; }
    .scene-copy { position: absolute; left: 9%; bottom: 14%; color: rgba(247,247,247,.55); font: 500 12px/1.4 'Inter'; letter-spacing: .22em; }
    .scene-copy em { color: var(--accent); font-style: normal; }
    .scene-mark { position: absolute; right: 5%; bottom: 5%; color: rgba(247,247,247,.45); font: 11px 'Inter'; letter-spacing: .25em; }
    .scene-showcase { min-height: 500px; background: linear-gradient(120deg, #20160e, #0d0d0c 55%, #15100a); }
    .scene-showcase .scene-watermark { font-size: 30vw; top: 8%; }
    .scene-screen { min-height: 260px; }
    .scene-screen .scene-label.one  { width: 120px; height: 175px; right: 24%; top: 21%; }
    .scene-screen .scene-label.two  { width: 100px; height: 145px; right: 42%; top: 46%; }
    .scene-phone { min-height: 450px; }
    .scene-phone .scene-label.one   { width: 110px; height: 165px; right: 16%; top: 22%; }
    .scene-phone .scene-label.two   { width:  90px; height: 130px; right: 45%; top: 48%; }

    /* ── Content sections ── */
    .content-section { padding: 120px 6vw; background: var(--bg2); position: relative; z-index: 1; }
    .content-section.dark { background: var(--bg); }
    .section-heading { margin-bottom: 50px; }
    .section-number { display: block; color: var(--accent); font: 500 12px 'Inter'; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; }
    .section-heading h2 { font-size: clamp(36px,4vw,52px); line-height: 1; letter-spacing: -.05em; }
    .section-heading.centered { text-align: center; }

    /* Overview */
    .overview-grid { display: grid; grid-template-columns: 55% 45%; gap: 80px; max-width: 1300px; margin: auto; }
    .overview-copy p { max-width: 670px; color: var(--text2); font-size: 16px; line-height: 1.8; }
    .highlights { margin-top: 40px; }
    .highlight { display: flex; justify-content: space-between; padding: 17px 0; border-top: 1px solid var(--border); font-size: 14px; }
    .highlight:last-child { border-bottom: 1px solid var(--border); }
    .highlight label { color: var(--cmuted); }
    .live-dot { display: inline-block; width: 7px; height: 7px; background: #63d391; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
    .glass-card { background: rgba(20,22,27,.8); border: 1px solid var(--border); border-radius: 20px; padding: 32px; backdrop-filter: blur(12px); }
    .detail-row { display: grid; grid-template-columns: 100px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
    .detail-row:first-child { padding-top: 0; }
    .detail-row:last-child { border-bottom: 0; padding-bottom: 0; }
    .detail-row label { color: var(--cmuted); }
    .detail-row a { color: var(--accent); overflow-wrap: anywhere; }
    .detail-row .stack { margin: 0; }

    /* Showcase */
    .showcase-wrap { max-width: 1300px; margin: auto; }
    .showcase-frame {
      border: 1px solid var(--border);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 0 80px rgba(255,140,26,.18), 0 40px 120px rgba(255,140,26,.08);
      transition: transform .6s ease;
    }
    .showcase-frame:hover { transform: scale(1.01); }

    /* Gallery */
    .gallery-section { padding: 120px 6vw; background: var(--bg2); position: relative; z-index: 1; }
    .gallery-wrap { max-width: 1300px; margin: auto; }
    .gallery-grid { columns: 3; column-gap: 14px; }
    .gallery-grid-item {
      break-inside: avoid;
      margin-bottom: 14px;
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      cursor: zoom-in;
      border: 1px solid var(--border);
      transition: transform .35s, box-shadow .35s, border-color .35s;
    }
    .gallery-grid-item:hover { transform: scale(1.025); box-shadow: 0 0 40px rgba(255,140,26,.18); border-color: rgba(255,140,26,.35); }
    .gallery-grid-item:hover .gallery-overlay { opacity: 1; }
    .gallery-overlay {
      position: absolute; inset: 0;
      background: rgba(11,11,13,.55);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity .3s; z-index: 2;
      color: var(--accent);
    }
    .gallery-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 14px; background: linear-gradient(transparent, rgba(11,11,13,.92)); color: var(--text2); font-size: 10px; letter-spacing: .04em; z-index: 3; }

    /* Lightbox */
    .lightbox {
      position: fixed; inset: 0; z-index: 999;
      background: rgba(0,0,0,.92); backdrop-filter: blur(8px);
      display: none; align-items: center; justify-content: center;
      padding: 0 80px;
    }
    .lightbox.open { display: flex; }
    .lightbox-inner { position: relative; width: 100%; max-width: 900px; }
    .lightbox-frame { border-radius: 18px; overflow: hidden; border: 1px solid var(--border); height: 540px; }
    .lightbox-close { position: absolute; top: -44px; right: 0; background: none; border: 0; color: var(--text2); padding: 6px; }
    .lightbox-close:hover { color: var(--text); }
    .lb-btn {
      background: var(--card); border: 1px solid var(--border); color: var(--text);
      width: 44px; height: 44px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      transition: border-color .2s, background .2s;
      position: absolute; top: 50%; transform: translateY(-50%);
    }
    .lb-btn.prev { left: -60px; } .lb-btn.next { right: -60px; }
    .lb-btn:hover { border-color: var(--accent); background: rgba(255,140,26,.1); }
    .lightbox-dots { position: absolute; bottom: -32px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
    .lightbox-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cmuted); cursor: pointer; border: 0; transition: background .2s; }
    .lightbox-dot.active { background: var(--accent); }
    .lightbox-slide { display: none; height: 100%; }
    .lightbox-slide.active { display: block; }

    /* Screenshot compositions */
    .ss { background: #0f1114; color: #c8cdd8; font-family: 'Inter',sans-serif; width: 100%; height: 100%; overflow: hidden; position: relative; display: flex; flex-direction: column; }
    .ss-nav { height: 40px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.07); background: #0a0b0e; flex-shrink: 0; }
    .ss-logo { width: 20px; height: 20px; background: #FF8C1A; border-radius: 4px; display: flex; align-items: center; justify-content: center; font: 700 10px 'Space Grotesk'; color: #000; flex-shrink: 0; }
    .ss-logo-name { font: 600 11px 'Space Grotesk'; color: #e0e4ed; margin-right: auto; }
    .ss-nav-links { display: flex; gap: 14px; margin-right: 14px; }
    .ss-nav-links i { display: block; width: 24px; height: 5px; background: rgba(255,255,255,.18); border-radius: 3px; }
    .ss-btn { width: 50px; height: 18px; background: #FF8C1A; border-radius: 4px; flex-shrink: 0; }
    .ss-hero { flex: 1; display: flex; padding: 20px 18px; gap: 16px; background: linear-gradient(135deg,#0f1012 0%,#13100c 50%,#0f0d0b 100%); position: relative; min-height: 0; }
    .ss-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 40%,rgba(255,140,26,.18),transparent 55%); }
    .ss-hero-text { flex: 1.1; display: flex; flex-direction: column; justify-content: center; gap: 6px; position: relative; z-index: 1; }
    .ss-h1 { height: 12px; background: rgba(255,255,255,.82); border-radius: 3px; width: 85%; }
    .ss-h1.sm { width: 60%; background: rgba(255,140,26,.85); }
    .ss-p { height: 6px; background: rgba(255,255,255,.28); border-radius: 2px; width: 80%; }
    .ss-p.sm { width: 65%; } .ss-p.xs { width: 45%; }
    .ss-hero-ctas { display: flex; gap: 8px; margin-top: 10px; }
    .ss-cta { height: 18px; width: 66px; background: #FF8C1A; border-radius: 4px; flex-shrink: 0; display: block; }
    .ss-cta.ghost { background: transparent; border: 1px solid rgba(255,255,255,.25); }
    .ss-hero-visual { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-height: 80px; }
    .ss-pack { position: absolute; display: flex; flex-direction: column; justify-content: space-between; padding: 6px 7px; font-family: 'Space Grotesk'; box-shadow: 8px 10px 18px rgba(0,0,0,.4); }
    .ss-pack small { font: 600 5px 'Inter'; letter-spacing: .1em; color: #b65c1d; }
    .ss-pack b { font: 700 10px/.85 'Space Grotesk'; letter-spacing: -.04em; }
    .ss-pack.a { width: 48px; height: 72px; background: #efe2c4; color: #2f2118; transform: rotate(9deg); top: 10%; right: 28%; }
    .ss-pack.b { width: 42px; height: 60px; background: #dc6926; color: #f7e5bb; transform: rotate(-13deg); top: 35%; right: 50%; }
    .ss-pack.b small { color: #ffd18c; }
    .ss-ring { position: absolute; border: 1px solid rgba(255,140,26,.2); border-radius: 50%; }
    .ss-ring.r1 { width: 110px; height: 110px; right: -10px; top: -10px; }
    .ss-ring.r2 { width: 80px; height: 80px; right: 5px; top: 5px; border-color: rgba(255,210,150,.15); }
    .ss-strip { height: 20px; background: #FF8C1A; display: flex; align-items: center; padding: 0 14px; gap: 12px; flex-shrink: 0; }
    .ss-strip span { height: 4px; background: rgba(0,0,0,.25); border-radius: 2px; flex: 1; }
    .ss-page-header { padding: 12px 16px 10px; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
    .ss-badge-sm { height: 10px; width: 55px; background: rgba(255,140,26,.25); border-radius: 999px; border: 1px solid rgba(255,140,26,.4); }
    .ss-page-title { height: 12px; width: 160px; background: rgba(255,255,255,.75); border-radius: 3px; margin-top: 4px; }
    .ss-page-sub { height: 5px; width: 200px; background: rgba(255,255,255,.22); border-radius: 2px; }
    .ss-product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 10px 16px; flex: 1; min-height: 0; }
    .ss-product-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 7px; padding: 7px; display: flex; flex-direction: column; gap: 5px; }
    .ss-product-img { height: 50px; background: linear-gradient(145deg,#2a1f14,#1a1208); border-radius: 4px; position: relative; overflow: hidden; flex-shrink: 0; }
    .ss-product-img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 60% 40%,rgba(255,140,26,.3),transparent 60%); }
    .ss-product-name { height: 5px; background: rgba(255,255,255,.55); border-radius: 2px; width: 75%; }
    .ss-product-meta { height: 4px; background: rgba(255,255,255,.22); border-radius: 2px; width: 55%; }
    .ss-product-cta { height: 11px; background: #FF8C1A; border-radius: 3px; margin-top: 2px; }
    .ss-two-col { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
    .ss-col-img { background: linear-gradient(145deg,#1a1510,#0d0b08); display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px; border-right: 1px solid rgba(255,255,255,.06); position: relative; }
    .ss-col-img::before { content: "JFP"; position: absolute; top: 8px; left: 8px; font: 700 46px 'Space Grotesk'; color: rgba(255,140,26,.18); line-height: 1; }
    .ss-img-block { flex: 1; border-radius: 6px; background: rgba(255,140,26,.12); border: 1px solid rgba(255,140,26,.2); }
    .ss-stat-row { display: flex; gap: 6px; flex-shrink: 0; }
    .ss-stat-row span { flex: 1; height: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 4px; }
    .ss-col-copy { padding: 12px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
    .ss-big-title { height: 11px; background: rgba(255,255,255,.75); border-radius: 3px; width: 90%; }
    .ss-big-title.sm { width: 60%; background: rgba(255,140,26,.8); }
    .ss-divider { height: 1px; background: rgba(255,255,255,.08); margin: 4px 0; flex-shrink: 0; }
    .ss-contact-inner { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
    .ss-contact-left { padding: 12px; display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,.015); }
    .ss-contact-items { display: flex; flex-direction: column; gap: 7px; margin-top: 5px; }
    .ss-contact-item { display: flex; align-items: center; gap: 7px; }
    .ss-ci-icon { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,140,26,.2); border: 1px solid rgba(255,140,26,.4); flex-shrink: 0; }
    .ss-ci-text { display: flex; flex-direction: column; gap: 3px; flex: 1; }
    .ss-ci-text div { height: 4px; background: rgba(255,255,255,.25); border-radius: 2px; width: 80%; }
    .ss-ci-text div:last-child { width: 55%; background: rgba(255,255,255,.14); }
    .ss-contact-right { padding: 12px; border-left: 1px solid rgba(255,255,255,.06); }
    .ss-form { display: flex; flex-direction: column; gap: 7px; }
    .ss-field { height: 22px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 5px; }
    .ss-field.tall { height: 48px; }
    .ss-submit { height: 22px; background: #FF8C1A; border-radius: 5px; }
    .ss-m-nav { height: 32px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.07); background: #090a0d; flex-shrink: 0; }
    .ss-m-hamburger { display: flex; flex-direction: column; gap: 3px; }
    .ss-m-hamburger i { display: block; width: 12px; height: 2px; background: rgba(255,255,255,.5); }
    .ss-m-hero { padding: 14px 12px 8px; background: linear-gradient(160deg,#0f1012,#13100c); position: relative; flex-shrink: 0; }
    .ss-m-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 30%,rgba(255,140,26,.2),transparent 55%); }
    .ss-m-badge { height: 9px; width: 46px; background: rgba(255,140,26,.25); border: 1px solid rgba(255,140,26,.4); border-radius: 999px; margin-bottom: 7px; }
    .ss-m-h1 { height: 11px; background: rgba(255,255,255,.8); border-radius: 3px; width: 85%; margin-bottom: 4px; }
    .ss-m-h1.sm { width: 55%; background: rgba(255,140,26,.8); }
    .ss-m-p { height: 5px; background: rgba(255,255,255,.28); border-radius: 2px; width: 90%; margin-top: 7px; }
    .ss-m-cta { height: 18px; background: #FF8C1A; border-radius: 5px; margin-top: 10px; width: 65%; }
    .ss-m-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 10px 12px; flex-shrink: 0; }
    .ss-m-card { height: 60px; background: linear-gradient(145deg,rgba(255,140,26,.1),rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.07); border-radius: 7px; }
    .ss-m-section-title { height: 7px; background: rgba(255,255,255,.5); border-radius: 2px; width: 100px; margin: 0 12px 8px; flex-shrink: 0; }
    .ss-m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0 12px; }
    .ss-m-grid div { height: 44px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 6px; }
    .ss-footer-scene { display: flex; flex-direction: column; }
    .ss-cta-band { background: linear-gradient(135deg,rgba(255,140,26,.15),rgba(255,140,26,.05)); border-bottom: 1px solid rgba(255,140,26,.2); padding: 12px 16px; display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
    .ss-cta-band-title { height: 11px; background: rgba(255,255,255,.75); border-radius: 3px; width: 180px; }
    .ss-cta-band-sub { height: 5px; background: rgba(255,255,255,.25); border-radius: 2px; width: 130px; }
    .ss-cta-band-btns { display: flex; gap: 7px; margin-top: 3px; }
    .ss-cta-band-btns span { height: 16px; width: 54px; background: #FF8C1A; border-radius: 4px; display: block; }
    .ss-cta-band-btns span:last-child { background: transparent; border: 1px solid rgba(255,255,255,.2); }
    .ss-footer-main { flex: 1; display: grid; grid-template-columns: 1.2fr 1.8fr; padding: 12px 16px; gap: 14px; border-bottom: 1px solid rgba(255,255,255,.07); min-height: 0; }
    .ss-footer-brand { display: flex; flex-direction: column; gap: 6px; }
    .ss-logo-lg { width: 26px !important; height: 26px !important; font-size: 12px !important; }
    .ss-footer-tagline { height: 6px; background: rgba(255,255,255,.55); border-radius: 2px; width: 85%; }
    .ss-footer-sub { height: 4px; background: rgba(255,255,255,.2); border-radius: 2px; width: 70%; }
    .ss-footer-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
    .ss-footer-col { display: flex; flex-direction: column; gap: 4px; }
    .ss-footer-col div { height: 4px; background: rgba(255,255,255,.18); border-radius: 2px; }
    .ss-footer-col-title { height: 6px !important; background: rgba(255,140,26,.7) !important; width: 60% !important; }
    .ss-footer-bar { height: 24px; padding: 0 16px; background: #060608; border-top: 1px solid rgba(255,255,255,.05); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .ss-footer-bar div { height: 4px; background: rgba(255,255,255,.2); border-radius: 2px; width: 80px; }
    .ss-footer-bar div:last-child { width: 55px; background: rgba(255,140,26,.5); }

    /* Features */
    .features-grid { max-width: 1300px; margin: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
    .feature-card {
      position: relative; overflow: hidden;
      background: var(--card); border: 1px solid var(--border);
      border-radius: 16px; padding: 30px 26px; min-height: 190px;
      transition: transform .3s, box-shadow .3s, border-color .3s;
    }
    .feature-card::before { content: ""; position: absolute; left: 0; right: 30%; top: 0; height: 2px; background: linear-gradient(90deg,#FF8C1A,transparent); }
    .feature-card:hover { border-color: rgba(255,140,26,.35); box-shadow: 0 0 30px rgba(255,140,26,.1); transform: translateY(-4px); }
    .feature-card .feature-icon { color: var(--accent); margin-bottom: 30px; display: block; }
    .feature-card h3 { font-size: 20px; margin-bottom: 8px; }
    .feature-card p { color: var(--cmuted); font-size: 13px; line-height: 1.6; }

    /* Numbers */
    .numbers { position: relative; overflow: hidden; }
    .numbers::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%,rgba(255,140,26,.12),transparent 60%); }
    .stats { position: relative; max-width: 1100px; margin: auto; display: grid; grid-template-columns: repeat(4,1fr); }
    .stat { text-align: center; padding: 0 24px; border-right: 1px solid var(--border); }
    .stat:last-child { border: 0; }
    .stat-value { color: var(--accent); font-size: clamp(56px,8vw,96px); font-weight: 700; line-height: .9; text-shadow: 0 0 40px rgba(255,140,26,.6); }
    /*.stat-value::after { content: "+"; }*/
    .stat label { display: block; color: var(--text2); font-size: 14px; margin-top: 18px; }

    /* Mockups */
    .mockups { max-width: 1200px; margin: auto; }
    .mockup-grid { display: grid; grid-template-columns: 1.7fr .8fr; align-items: end; gap: 70px; }
    .macbook { box-shadow: 10px 47px 31px -35px rgba(255, 140, 26, .18); }
    .bezel { position: relative; background: #000; border-radius: 8px 8px 0 0; overflow: hidden; }
    .notch { position: absolute; z-index: 2; top: 7px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: #171717; transform: translateX(-50%); }
    .keyboard { height: 22px; width: 108%; margin-left: -4%; background: #2a2a2c; clip-path: polygon(4% 0,96% 0,100% 100%,0 100%); }
    .iphone { position: relative; width: 200px; margin: auto; background: #1d1d1f; border-radius: 44px; padding: 14px 10px; box-shadow: 0 30px 45px rgba(255,140,26,.18); }
    .iphone .bezel { border-radius: 34px; }
    .island { position: absolute; z-index: 3; top: 20px; left: 50%; width: 76px; height: 20px; background: #080808; border-radius: 20px; transform: translateX(-50%); }
    .side-button { position: absolute; right: -3px; width: 3px; height: 35px; background: #29292b; border-radius: 0 3px 3px 0; }
    .side-button.s1 { top: 92px; } .side-button.s2 { top: 140px; height: 25px; } .side-button.s3 { top: 174px; height: 25px; }

    /* Prev / Next */
    .prev-next { max-width: 1300px; margin: 0 auto; padding: 10vh 6vw 120px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; z-index: 1; }
    .nav-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 32px 40px; transition: transform .25s, border-color .25s; display: block; }
    .nav-card:hover { border-color: var(--accent); }
    .nav-card.left:hover { transform: translateX(-4px); }
    .nav-card.right:hover { transform: translateX(4px); }
    .nav-card.right { text-align: right; }
    .nav-card small { display: block; color: var(--cmuted); font-size: 12px; margin-bottom: 15px; }
    .nav-card h3 { font-size: 22px; margin: 0; }

    /* Related */
    .related-grid { max-width: 1300px; margin: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
    .related-card { background: var(--card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; transition: transform .3s, border-color .3s; display: block; }
    .related-card:hover { border-color: rgba(255,140,26,.35); transform: translateY(-4px); }
    .related-cover { height: 220px; position: relative; overflow: hidden; transition: transform .6s; }
    .related-card:hover .related-cover { transform: scale(1.08); }
    .related-cover::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent,rgba(11,11,13,.9)); }
    .related-cover.tnc { background-color: #1b2830; background-image: repeating-linear-gradient(0deg,transparent 0 35px,rgba(240,170,70,.3) 36px 38px),repeating-linear-gradient(90deg,transparent 0 68px,rgba(255,255,255,.08) 69px 70px); }
    .related-cover.tnc::before { content: "TNC"; color: rgba(235,173,68,.45); font: 700 130px 'Space Grotesk'; position: absolute; left: 20px; top: 30px; }
    .related-cover.tapal { background: #30301e; background-image: linear-gradient(90deg,rgba(213,179,92,.3) 1px,transparent 1px),linear-gradient(rgba(213,179,92,.25) 1px,transparent 1px); background-size: 34px 34px; }
    .related-cover.tapal::before { content: "TC"; color: rgba(207,180,105,.44); font: 700 142px 'Space Grotesk'; position: absolute; right: 20px; top: 25px; }
    .related-cover.logo { background: #163638; background-image: repeating-linear-gradient(120deg,transparent 0 24px,rgba(107,211,181,.22) 25px 26px); }
    .related-cover.logo::before { content: "MM"; color: rgba(106,220,190,.5); font: italic 700 125px Georgia; position: absolute; left: 26px; top: 30px; }
    .related-body { padding: 24px; }
    .related-body .badge { font-size: 10px; }
    .related-body h3 { font-size: 20px; margin: 16px 0 13px; display: inline-block; transition: border-color .2s; border-bottom: 2px solid transparent; }
    .related-card:hover .related-body h3 { border-bottom-color: var(--accent); }
    .related-body .stack { margin: 0 0 22px; }
    .related-body .stack span { font-size: 11px; padding: 5px 10px; }
    .view-link { color: var(--accent); font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }

    /* CTA */
    .cta {
      position: relative; min-height: 400px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      text-align: center; padding: 90px 6vw; overflow: hidden;
      background: var(--bg); z-index: 1;
    }
    .cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%,rgba(255,140,26,.12),transparent 60%); }
    .cta .section-number { margin-bottom: 20px; }
    .cta h2 { position: relative; max-width: 800px; font-size: clamp(36px,5vw,64px); line-height: 1; letter-spacing: -.06em; margin-bottom: 34px; }
    .cta .actions { position: relative; }
    .pulse-ring {
      position: absolute; width: 260px; height: 70px;
      border: 1px solid rgba(255,140,26,.4); border-radius: 50px;
      animation: pulse 2.5s ease-out infinite; pointer-events: none;
      top: 50%; left: 50%; transform: translate(-50%,-50%);
    }
    .pulse-ring.two { animation-delay: 1.25s; }
    @keyframes pulse { 0%{transform:translate(-50%,-50%) scale(1);opacity:.7} 100%{transform:translate(-50%,-50%) scale(2);opacity:0} }

    /* Footer */
    .site-footer { background: #080809; border-top: 1px solid var(--border); padding: 48px 6vw; color: var(--cmuted); font-size: 12px; position: relative; z-index: 1; }
    .footer-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
    .footer-nav { display: flex; gap: 22px; }
    .footer-nav a:hover { color: var(--text); }
    .footer-accent { color: var(--accent); }

    /* Animations */
    .fade-up { opacity: 0; transform: translateY(32px); }
    .fade-up.visible { animation: fadeUp .7s cubic-bezier(.2,.8,.2,1) forwards; }
    @keyframes fadeUp { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }
    @media(prefers-reduced-motion:reduce) {
      .fade-up { opacity: 1; transform: none; }
      .showcase-frame, .related-card, .feature-card { transition: none; }
    }

    /* Responsive */
    @media(max-width:1024px) {
      .hero-content { width: 62%; }
      .hero-info { right: 4vw; width: 230px; }
      .overview-grid { gap: 36px; }
      .mockup-grid { gap: 30px; }
      .features-grid { grid-template-columns: repeat(2,1fr); }
    }
    @media(max-width:640px) {
      .site-nav { height: 68px; padding: 0 22px; }
      .brand-role { display: none; }
      .menu-button { display: flex; align-items: center; }
      .nav-links { position: absolute; top: 68px; left: 0; right: 0; padding: 10px 22px 20px; display: none; flex-direction: column; align-items: stretch; gap: 0; background: rgba(11,11,13,.98); border-bottom: 1px solid var(--border); }
      .nav-links.open { display: flex; }
      .nav-links a { padding: 15px 0; border-bottom: 1px solid var(--border); }
      .nav-cta { text-align: center; margin-top: 12px; }
      .phero { min-height: 850px; padding: 0 22px 80px; align-items: flex-end; }
      .hero-cover { inset: -20%; }
      .hero-content { width: 100%; }
      .phero h1 { font-size: clamp(52px,15vw,76px); }
      .hero-info { top: 90px; right: 22px; width: calc(100% - 44px); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; transform: none; }
      .info-card { padding: 12px; }
      .info-value { font-size: 13px; }
      .info-label { font-size: 10px; }
      .scroll-indicator { display: none; }
      .content-section { padding: 80px 22px; }
      .overview-grid { display: block; }
      .glass-card { margin-top: 45px; padding: 22px; }
      .detail-row { grid-template-columns: 78px 1fr; gap: 10px; }
      .showcase-frame { border-radius: 14px; }
      .scene-showcase { min-height: 380px; }
      .features-grid { grid-template-columns: 1fr; }
      .feature-card { min-height: 170px; }
      .stats { grid-template-columns: 1fr 1fr; row-gap: 50px; }
      .stat { padding: 0 8px; }
      .stat:nth-child(2) { border: 0; }
      .stat-value { font-size: 58px; }
      .mockup-grid { grid-template-columns: 1fr; gap: 55px; }
      .macbook { width: 100%; }
      .iphone { width: 190px; }
      .prev-next { grid-template-columns: 1fr; padding: 0 22px 80px; }
      .nav-card { padding: 25px 22px; }
      .related-grid { grid-template-columns: 1fr; }
      .cta { padding: 75px 22px; }
      .footer-row { flex-direction: column; align-items: flex-start; }
      .footer-nav { order: 3; }
      .gallery-grid { columns: 2; }
      .scene-label.one { right: 17%; }
      .scene-label.two { right: 43%; }
      .lightbox { padding: 0 50px; }
      .lb-btn.prev { left: -46px; } .lb-btn.next { right: -46px; }
    }
    @media(max-width:400px) {
      .gallery-grid { columns: 1; }
    }
.project-device {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* Laptop mockup */
.device-frame {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    z-index: 2;
    pointer-events: none;
}

/* Actual laptop screen area */
.device-screen {
    position: absolute;
    top: 4%;
    left: 8.5%;
    width: 81%;
    height: 72%;
    overflow: hidden;
    z-index: 1;
    background: #fff;
}

/* Website screenshot */
.screen-content {
    width: 100%;
    min-height: 100%;
}

.screen-content img {
    width: 100%;
    height: auto;
    display: block;
}
.device-screen {
    cursor: pointer;
}

.screen-content img {
    transition: transform 8s ease-in-out;
}

.project-device:hover .screen-content img {
    transform: translateY(-55%);
}
.mobile-device {
    position: relative;
    width: 330px;
    aspect-ratio: 825 / 1711;
    margin: 0 auto;
}

/* Actual visible screen */
.mobile-screen {
    position: absolute;
    top: 2.2%;
    left: 4%;
    width: 92%;
    height: 95.5%;

    overflow: hidden;
    border-radius: 65px;
    background: #fff;

    z-index: 1;
}

.mobile-device {
    position: relative;
    width: 300px;
    aspect-ratio: 825 / 1330;
    margin: 0 auto;
}

/* Actual visible screen */
.mobile-screen {
    position: absolute;
    top: 2.2%;
    left: 13%;
    width: 74%;
    height: 96%;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    z-index: 1;
}

/*
 * Real mobile viewport.
 * Website thinks it is running on a 390px
 * wide mobile device.
 */
.mobile-viewport {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 844px;
    transform-origin: top left;
    transform: scale(0.78);
}

.mobile-viewport iframe {
    width: 390px;
    height: 844px;

    border: 0;
    display: block;
}

/* Phone frame goes ABOVE website */
.mobile-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 5;
    pointer-events: none;
}
.mobile-viewport {
    /* width: 210px; */
    height: 844px;
    transform-origin: top left;
}

.mobile-viewport iframe {
    width: 390px;
    height: 844px;
    border: 0;
}
.logo-mockups img {
    width: 100%;
    margin-bottom: 3em;
}
.jfp-scene img {
    width: stretch;
}