*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root {
  --bg:     #e8e4f0;
  --bg-d:   #d4d0e2;
  --bg-l:   #fdfbff;
  --ink:    #3a3660;
  --ink2:   #6a6690;
  --muted:  #6a6690; 
  --accent: #b072ff;
  --accent2:#8b30ef;
  --green:  #34d399;
  --yellow: #fbbf24;
  --orange: #fb923c;
  --accent2:#8b2fee;

  --nm-out: 6px 6px 16px var(--bg-d), -6px -6px 16px var(--bg-l);
  --nm-out-sm: 4px 4px 10px var(--bg-d), -4px -4px 10px var(--bg-l);
  --nm-out-lg: 10px 10px 28px var(--bg-d), -10px -10px 28px var(--bg-l);
  --nm-in:  inset 4px 4px 10px var(--bg-d), inset -4px -4px 10px var(--bg-l);
  --nm-in-sm: inset 3px 3px 7px var(--bg-d), inset -3px -3px 7px var(--bg-l);
  --nm-flat: 2px 2px 6px var(--bg-d), -2px -2px 6px var(--bg-l);
  --fh: font-family: "Roboto", sans-serif;
  --fb: "Inter", sans-serif;
  --r: 20px;
  --r-lg: 32px;
  --r-pill: 100px;

}

:root {
  --bg:     #eef1f6;   /* softer gray */
  --bg-d:   #d9dee7;   /* shadow */
  --bg-l:   #ffffff;   /* highlight */

  /* shadows (same structure, just smoother) */
  --nm-out: 6px 6px 14px var(--bg-d), -6px -6px 14px var(--bg-l);
  --nm-out-sm: 3px 3px 8px var(--bg-d), -3px -3px 8px var(--bg-l);
  --nm-out-lg: 10px 10px 26px var(--bg-d), -10px -10px 26px var(--bg-l);

  --nm-in: inset 4px 4px 10px var(--bg-d), inset -4px -4px 10px var(--bg-l);
  --nm-in-sm: inset 2px 2px 6px var(--bg-d), inset -2px -2px 6px var(--bg-l);
  --nm-flat: 2px 2px 5px var(--bg-d), -2px -2px 5px var(--bg-l);
}



section {
  scroll-margin-top: 90px;
}
.features-section {
  scroll-margin-top: 10px;
}
html { scroll-behavior: smooth; }
body {
  font-family: var(--fb);
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
/* ═══════ NAV ═══════ */
nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  height: 70px;
  background: var(--bg);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px;
  box-shadow: 0 4px 20px var(--bg-d), 0 -2px 8px var(--bg-l);
}
.nav-brand {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
}
.nav-icon {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--bg);
  box-shadow: var(--nm-out-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  transition: box-shadow .2s, transform .2s;
}
.nav-icon:hover { box-shadow: var(--nm-in-sm); transform: scale(.96); }
.nav-name {
  font-family: var(--fh); font-weight: 900; font-size: 1.05rem;
  color: var(--ink); letter-spacing: -.02em;
}
.nav-name b { color: var(--accent); }
.nav-links { display: flex; gap: 4px; list-style: none; }
.nav-links a {
  font-size: .83rem; font-weight: 600; color: var(--ink2);
  text-decoration: none; padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--bg);
  transition: all .2s; box-shadow: var(--nm-flat);
}
.nav-links a:hover {
  color: var(--accent);
  box-shadow: var(--nm-in-sm);
}
.nav-cta {
  font-family: var(--fh); font-weight: 800; font-size: .84rem;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  padding: 11px 26px; border-radius: var(--r-pill);
  text-decoration: none; letter-spacing: -.01em;
  box-shadow: 4px 4px 14px rgba(167,139,250,.35), -2px -2px 8px var(--bg-l);
  transition: transform .2s, box-shadow .2s;
}
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 6px 8px 20px rgba(167,139,250,.45), -2px -2px 8px var(--bg-l);
}

/* ═══════════════════════════════════
   HERO
═══════════════════════════════════ */
img {
  max-width: 100%;
}
.logo {
  max-width: 140px;
}
.hero {
  min-height: 100vh;
  padding-top: 70px;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
}
/* subtle background noise/texture */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 60% 50% at 75% 40%, rgba(167,139,250,.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 20% 70%, rgba(244,114,182,.08) 0%, transparent 60%);
  pointer-events: none;
}

.hero-inner {
  max-width: 1440px; margin: 0 auto;
  padding: 80px 48px;
  display: grid; grid-template-columns: 1fr 500px;
  gap: 40px; align-items: center;
  position: relative; z-index: 1;
}

/* LEFT */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bg);
  box-shadow: var(--nm-out-sm);
  border-radius: var(--r-pill);
  padding: 8px 18px 8px 10px;
  margin-bottom: 30px;
  font-family: var(--fb); font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  opacity: 0; animation: rise .6s .05s both;
}
.ey-dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), #10b981);
  box-shadow: 2px 2px 6px rgba(52,211,153,.3), -1px -1px 4px var(--bg-l);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
}

.hero-h1 {
  font-family: var(--fh); font-weight: 900;
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  line-height: .94; letter-spacing: -.04em; color: var(--ink);
  opacity: 0; animation: rise .7s .12s both;
}
.hero-h1 .nm-text {
  display: inline-block;
  background: var(--bg);
  border-radius: 14px;
  padding: 4px 16px 8px;
  box-shadow: var(--nm-out);
  margin: 6px 0;
  color: var(--accent);
  transform: rotate(-1.5deg);
}
.hero-h1 .soft {
  color: var(--ink); font-weight: 500;
}

.hero-desc {
  font-size: 1rem; color: var(--ink2); width: 90%;
  margin-top: 26px; line-height: 1.72; font-weight: 400;
  opacity: 0; animation: rise .7s .2s both;
}

.hero-btns {
  display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap;
  opacity: 0; animation: rise .7s .28s both;
}
.btn-nm-primary {
  font-family: var(--fh); font-weight: 800; font-size: .9rem;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  padding: 14px 32px; border-radius: var(--r-pill);
  text-decoration: none; letter-spacing: -.01em;
  box-shadow: 5px 5px 15px rgba(167,139,250,.35), -3px -3px 10px var(--bg-l);
  transition: transform .2s, box-shadow .2s;
  display: flex; align-items: center; gap: 8px;
}
.btn-nm-primary:hover {
  transform: translateY(-3px);
  box-shadow: 8px 10px 24px rgba(167,139,250,.45), -3px -3px 10px var(--bg-l);
}
.btn-nm-soft {
  font-family: var(--fh); font-weight: 700; font-size: .9rem;
  color: var(--ink2);
  background: var(--bg);
  padding: 14px 28px; border-radius: var(--r-pill);
  text-decoration: none; letter-spacing: -.01em;
  box-shadow: var(--nm-out);
  transition: box-shadow .2s, color .2s;
}
.btn-nm-soft:hover { box-shadow: var(--nm-in); color: var(--accent); }

/* stat chips */
.hero-stats {
  display: flex; gap: 14px; margin-top: 44px; flex-wrap: wrap;
  opacity: 0; animation: rise .7s .36s both;
}
.stat-chip {
  background: var(--bg);
  box-shadow: var(--nm-out);
  border-radius: 16px;
  padding: 16px 16px;
  transition: box-shadow .2s;
}
.stat-chip:hover { box-shadow: var(--nm-in); }
.sc-n {
  font-family: var(--fh); font-weight: 900; font-size: 1.8rem;
  letter-spacing: -.04em; line-height: 1; color: var(--ink);
}
.sc-l { font-size: .68rem; font-weight: 600; color:#63637a; margin-top: 3px; text-transform: uppercase; letter-spacing: .06em; }

/* ═══════ HERO RIGHT ═══════ */
.hero-right {
  position: relative;
  opacity: 0; animation: rise .9s .45s both;
}

/* main neumorphic player card */
.nm-player {
  background: var(--bg);
  border-radius: var(--r-lg);
  box-shadow: var(--nm-out-lg);
  overflow: hidden;
  position: relative;
}
.nm-player-header {
  background: var(--bg);
  padding: 16px 22px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 3px 10px var(--bg-d);
  position: relative; z-index: 2;
}
.nm-ph-dots { display: flex; gap: 7px; }
.nm-dot {
  width: 11px; height: 11px; border-radius: 50%;
  box-shadow: inset 2px 2px 4px rgba(0,0,0,.15), inset -1px -1px 3px rgba(255,255,255,.6);
}
.nm-ph-title {
  font-family: var(--fh); font-weight: 700; font-size: .75rem;
  color: var(--ink2); letter-spacing: .04em;
}
.nm-ph-live {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg); box-shadow: var(--nm-in-sm);
  border-radius: 100px; padding: 4px 12px;
  font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--green);
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: livePulse 2s infinite;
}
@keyframes livePulse { 0%,100%{box-shadow:0 0 4px var(--green);}50%{box-shadow:0 0 10px var(--green);} }

/* game scene */
.nm-game-scene {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg,#1a1030 0%,#2d1860 50%,#180f30 100%);
}
.nm-game-scene svg { display: block; width: 100%; }

/* info panel below scene */
.nm-info-panel {
  padding: 18px 22px;
  background: var(--bg);
}
.nm-info-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.nm-game-title {
  font-family: var(--fh); font-weight: 800; font-size: 1rem;
  color: var(--ink); letter-spacing: -.02em;
}
.nm-game-genre {
  background: var(--bg); box-shadow: var(--nm-in-sm);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
}

/* progress bar — neumorphic */
.nm-progress-label {
  display: flex; justify-content: space-between;
  font-size: .65rem; font-weight: 600; color: var(--muted); margin-bottom: 8px;
}
.nm-progress-track {
  background: var(--bg);
  box-shadow: var(--nm-in-sm);
  border-radius: var(--r-pill); height: 10px; overflow: hidden;
  position: relative;
}
.nm-progress-fill {
  height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 2px 0 10px rgba(167,139,250,.4);
  animation: fillProg 2.2s 1s ease-out both;
}
@keyframes fillProg { from{width:0} to{width:68%} }

/* play button */
.nm-play-btn {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px;
}
.nm-play-circle {
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 4px 4px 14px rgba(167,139,250,.4), -2px -2px 8px var(--bg-l);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: #fff; 
  transition: transform .2s, box-shadow .2s;
}
.nm-play-circle:hover {
  transform: scale(1.1);
  box-shadow: 6px 6px 20px rgba(167,139,250,.55), -2px -2px 8px var(--bg-l);
}
.nm-score-display {
  font-family: var(--fh); font-weight: 900;
  font-size: 1.6rem; letter-spacing: -.04em; color: var(--ink);
}
.nm-score-label {
  font-size: .62rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; text-align: right;
  margin-bottom: 2px;
}

/* floating stat chips around card */
.nm-float {
  position: absolute;
  background: var(--bg);
  box-shadow: var(--nm-out);
  border-radius: 16px;
  padding: 10px 16px;
  animation: floatNm var(--fd,3.5s) ease-in-out infinite;
  z-index: 10;
}
.nf1 { top: -14px; right: -12px; --fd: 3.2s; }
.nf2 { bottom: 80px; left: -14px; --fd: 4.1s; animation-delay: .8s; }
.nf3 { bottom: 20px; right: -16px; --fd: 3.8s; animation-delay: 1.4s; }
@keyframes floatNm {
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-9px); }
}
.nf-lbl { font-size: .55rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.nf-val { font-family: var(--fh); font-weight: 900; font-size: .95rem; color: var(--ink); letter-spacing: -.03em; }

/* ═══════════════════════════════════
   MARQUEE BAND
═══════════════════════════════════ */
.mq-wrap {
  background: var(--bg);
  box-shadow: inset 0 4px 12px var(--bg-d), inset 0 -4px 12px var(--bg-l);
  padding: 16px 0; overflow: hidden;
}
.mq-track {
  display: flex; white-space: nowrap;
  animation: mq 26s linear infinite;
}
.mq-track span {
  font-family: var(--fh); font-weight: 700; font-size: .78rem;
  color: var(--ink2); letter-spacing: .02em;
  padding: 0 28px;
  display: inline-flex; align-items: center; gap: 22px;
}
.mq-track span i {
  font-style: normal; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 6px var(--accent); display: inline-block;
}
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ═══════════════════════════════════
   FEATURES — neumorphic cards
═══════════════════════════════════ */
.features-section { padding: 100px 0; }
.w { max-width: 1240px; margin: 0 auto; padding: 0 48px; }
.sec-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  background: var(--bg); box-shadow: var(--nm-out-sm);
  border-radius: var(--r-pill); padding: 6px 16px;
  margin-bottom: 20px;
}
.sec-title {
  font-family: var(--fh); font-weight: 900;
  font-size: clamp(2rem,3.8vw,3.2rem);
  letter-spacing: -.04em; line-height: .98; color: var(--ink);
  margin-bottom: 52px;
}
.sec-title .colored { color: var(--accent); }

.feat-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}
.feat-card {
  background: var(--bg);
  border-radius: var(--r);
  box-shadow: var(--nm-out);
  padding: 30px 26px;
  transition: box-shadow .25s;
  position: relative; overflow: hidden;
}
.feat-card:hover { box-shadow: var(--nm-out-lg); }
.feat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  opacity: 0; transition: opacity .25s;
}
.feat-card:hover::before { opacity: 1; }
.feat-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--bg);
  box-shadow: var(--nm-out-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 18px;
  transition: box-shadow .2s;
}
.feat-card:hover .feat-icon { box-shadow: var(--nm-in); }
.feat-card h3 {
  font-family: var(--fh); font-weight: 800; font-size: .98rem;
  color: var(--ink); letter-spacing: -.02em; margin-bottom: 9px; line-height: 1.25;
}
.feat-card p { font-size: .83rem; color: var(--ink2); line-height: 1.65; }

/* ═══════════════════════════════════
   GAME SHOWCASE
═══════════════════════════════════ */
.showcase-section { padding: 0 0 100px; }
.sc-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.sc-sub { font-size: .9rem; color: var(--lnk2); max-width: 500px; text-align: right; line-height: 1.6; }

/* tab selector — neumorphic */
.sc-tabs {
  display: flex; gap: 6px;
  background: var(--bg); box-shadow: var(--nm-in-sm);
  border-radius: var(--r-pill); padding: 6px;
  margin-bottom: 36px;
}
.sc-tab {
  font-family: var(--fh); font-size: .78rem; font-weight: 700;
  color: var(--lnk2);
  background: transparent;
  border: none; padding: 8px 18px; border-radius: var(--r-pill);
  transition: all .2s; letter-spacing: -.01em;
  cursor: pointer;

}
.sc-tab.active {
  color: #000;
  background: var(--bg);
  box-shadow: var(--nm-out-sm);
}

/* game cards */
.sc-grid {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 18px;
}
.gc {
  background: var(--bg);
  border-radius: var(--r);
  box-shadow: var(--nm-out);
  overflow: hidden;
  transition: box-shadow .3s, transform .3s;
}
.gc:hover {
  box-shadow: var(--nm-out-lg);
  transform: translateY(-6px);
}
.gc-art {
  aspect-ratio: 3/4;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
/* pastel gradient art backgrounds with nm inset */
.ga1 { background: linear-gradient(145deg,#e8dfff,#d4c8fc); }
.ga2 { background: linear-gradient(145deg,#d4f4e4,#b8eccc); }
.ga3 { background: linear-gradient(145deg,#ffe8d4,#ffd4b4); }
.ga4 { background: linear-gradient(145deg,#d4eeff,#b8dcff); }
.ga5 { background: linear-gradient(145deg,#ffd4e8,#ffb8d4); }

/* inner shadow for depth */
.gc-art::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 4px 4px 12px rgba(0,0,0,.08), inset -4px -4px 12px rgba(255,255,255,.6);
  border-radius: 0;
  pointer-events: none;
}

.gc-emoji {
  font-size: 3.8rem;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.12));
  animation: gentleFloat 3s ease-in-out infinite;
  position: relative; z-index: 1;
  transition: transform .3s;
}
.gc:nth-child(2) .gc-emoji{animation-delay:.5s}
.gc:nth-child(3) .gc-emoji{animation-delay:1s}
.gc:nth-child(4) .gc-emoji{animation-delay:1.5s}
.gc:nth-child(5) .gc-emoji{animation-delay:2s}
@keyframes gentleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.gc:hover .gc-emoji { transform: scale(1.1) rotate(-4deg); }

/* genre pill on art */
.gc-genre {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--bg); box-shadow: var(--nm-out-sm);
  border-radius: var(--r-pill);
  font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink2); padding: 4px 10px;
}
/* play button appears on hover */
.gc-play-wrap {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s;
  background: rgba(232,228,240,.35);
  backdrop-filter: blur(4px);
}
.gc:hover .gc-play-wrap { opacity: 1; }
.gc-play-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--nm-out);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--accent);
  transform: scale(.7); transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.gc:hover .gc-play-btn { transform: scale(1); }

/* card bottom info */
.gc-info { padding: 14px 16px 18px; }
.gc-name {
  font-family: var(--fh); font-weight: 800; font-size: .9rem;
  color: var(--ink); letter-spacing: -.02em; margin-bottom: 8px;
}
.gc-bottom { display: flex; align-items: center; justify-content: space-between; }
.gc-net { font-size: .63rem; font-weight: 600; color: var(--lnk2); }
.gc-live {
  background: var(--bg); box-shadow: var(--nm-in-sm);
  border-radius: var(--r-pill); padding: 3px 10px;
  font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--green);
}

/* ═══════════════════════════════════
   NETWORK SECTION
═══════════════════════════════════ */
.net-section { padding: 0 0 100px; }
.net-label-row { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.net-title { font-family: var(--fh); font-weight: 800; font-size: 1rem; color: var(--ink); letter-spacing: -.02em; }
.net-count {
  background: var(--bg); box-shadow: var(--nm-in-sm);
  border-radius: var(--r-pill); padding: 4px 12px;
  font-size: .7rem; font-weight: 700; color: var(--accent);
}
.net-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.np {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--fb); font-size: .8rem; font-weight: 500; color: var(--ink2);
  background: var(--bg); box-shadow: var(--nm-out-sm);
  padding: 10px 18px; border-radius: var(--r-pill);
  transition: box-shadow .2s, color .2s;}
.np:hover { box-shadow: var(--nm-in-sm); color: var(--accent); }
.np-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ═══════════════════════════════════
   CONTACT — neumorphic form
═══════════════════════════════════ */
.contact-section { padding: 0 0 100px; }
.contact-inner {
  background: var(--bg);
  border-radius: 32px;
  box-shadow: var(--nm-out-lg);
  padding: 56px;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px;
}
.contact-left {}
.contact-left h2 { font-family: var(--fh); font-weight: 900; font-size: 2.2rem; letter-spacing: -.04em; color: var(--ink); margin-bottom: 14px; }
.contact-left p { font-size: .9rem; color: var(--ink2); line-height: 1.7; max-width: 340px; }
.office-cards { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
.ofc {
  background: var(--bg); box-shadow: var(--nm-out-sm);
  border-radius: 18px; padding: 18px 20px;
  transition: box-shadow .2s;
}
.ofc:hover { box-shadow: var(--nm-in); }
.ofc-flag { font-size: 1.3rem; margin-bottom: 7px; }
.ofc-name { font-family: var(--fh); font-weight: 800; font-size: .9rem; color: var(--ink); }
.ofc-addr { font-size: .76rem; color: var(--ink2); line-height: 1.5; margin-top: 3px; }
.ofc-email { font-size: .76rem; color: var(--accent); font-weight: 700; margin-top: 8px; }

/* form — neumorphic inputs */
.nm-form {}
.nm-form-title { font-family: var(--fh); font-weight: 800; font-size: 1.2rem; color: var(--ink); letter-spacing: -.02em; margin-bottom: 22px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fg { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.fg label { font-size: .65rem; font-weight: 700; color:#000; letter-spacing: .08em; text-transform: uppercase; }
.fg input, .fg textarea, .fg select {
  background: var(--bg);
  box-shadow: var(--nm-in-sm);
  border: none; outline: none;
  border-radius: 12px; padding: 12px 16px;
  color: var(--ink); font-family: var(--fb); font-size: .86rem;
  transition: box-shadow .2s;
  width: 100%;
}
.fg input:focus, .fg textarea:focus, .fg select:focus {
  box-shadow: inset 4px 4px 10px var(--bg-d), inset -4px -4px 10px var(--bg-l),
              0 0 0 2px rgba(167,139,250,.35);
}
.fg textarea { resize: vertical; min-height: 86px; }
.fg select { appearance: none; }
.nm-submit {
  width: 100%;
  font-family: var(--fh); font-weight: 800; font-size: .95rem; letter-spacing: -.01em;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none; border-radius: var(--r-pill);
  padding: 15px;
  box-shadow: 5px 5px 15px rgba(167,139,250,.35), -3px -3px 10px var(--bg-l);
  transition: transform .2s, box-shadow .2s; margin-top: 6px;
}
.nm-submit:hover {
  transform: translateY(-2px);
  box-shadow: 8px 10px 24px rgba(167,139,250,.45), -3px -3px 10px var(--bg-l);
}

/* ═══════════════════════════════════
   CTA BAND
═══════════════════════════════════ */
.cta-band {
  background: var(--bg);
  box-shadow: inset 6px 6px 20px var(--bg-d), inset -6px -6px 20px var(--bg-l);
  padding: 100px 48px; text-align: center;
  margin: 0 0 0;
}
.cta-band h2 {
  font-family: var(--fh); font-weight: 900;
  font-size: clamp(2rem,3.8vw,3.2rem);
  letter-spacing: -.05em; color: var(--ink); line-height: .95;
}
.cta-band h2 span { color: var(--accent); }
.cta-band p { color: var(--lnk2); font-size: 1rem; margin: 14px 0 36px; }
.cta-btn-wrap { display: flex; align-items: center; justify-content: center; gap: 16px; }

/* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
footer {
  background: var(--bg);
  box-shadow: 0 -4px 20px var(--bg-d);
  padding: 32px 48px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
}
.foot-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.foot-icon {
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--bg); box-shadow: var(--nm-out-sm);
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.foot-name { font-family: var(--fh); font-weight: 800; font-size: .9rem; color: var(--ink); letter-spacing: -.02em; }
.foot-links { display: flex; gap: 6px; }
.foot-links a {
  font-size: .78rem; font-weight: 600; color: var(--muted); text-decoration: none;
  background: var(--bg); box-shadow: var(--nm-flat);
  padding: 6px 14px; border-radius: var(--r-pill);
  transition: box-shadow .2s, color .2s;
}
.foot-links a:hover { box-shadow: var(--nm-in-sm); color: var(--accent); }
.foot-copy { font-size: .72rem; color: var(--muted); }

/* ═══════════════════════════════════
   ANIMATIONS / REVEAL
═══════════════════════════════════ */
@keyframes rise {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
.reveal {
  opacity:0; transform:translateY(26px);
  transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.reveal.in { opacity:1; transform:none; }
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
.d4{transition-delay:.28s}.d5{transition-delay:.35s}.d6{transition-delay:.42s}.d7{transition-delay:.48s}

/* ═══════ RESPONSIVE ═══════ */
@media(max-width:1080px){
  .hero-inner{grid-template-columns:1fr;} .hero-right{display:none;}
  .feat-grid{grid-template-columns:1fr 1fr;}
  .sc-grid{grid-template-columns:repeat(3,1fr);}
  .contact-inner{grid-template-columns:1fr;gap:40px;}
}
@media(max-width:860px){
  nav{padding:0 20px;} .nav-links{display:none;}
  .w{padding:0 20px;}
  .hero-inner{padding:40px 20px;}
  .contact-inner{padding:32px 24px;}
  .sc-grid{grid-template-columns:repeat(2,1fr);}
  footer{padding:24px 20px; justify-content: center;}
  .cta-band{padding:40px 20px;}
  .foot-links {
    justify-content: center;
  }
}
@media(max-width:520px){
  .feat-grid{grid-template-columns:1fr;}
  .sc-grid{grid-template-columns:1fr;}
  .frow{grid-template-columns:1fr;}
  .gc-art {
    aspect-ratio: initial;
    height: 250px;
  }
}


.workflow-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.workflow-inner .sec-title {
  margin-bottom: 22px;
}
.workflow-left .hero-desc {
  margin-top: 10px;
  width: 100%;
}
.patchwork-card {
  padding: 32px;
}
.patchwork-card.feat-card::before {
  display: none;
}
.fragment-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg);
  box-shadow: var(--nm-in-sm);
  border-radius: 22px;
  padding: 14px 18px;
  transition: all 0.2s;
}
.fragments {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.frag-icon {
  width: 44px;
  height: 44px;
  background: var(--bg);
  box-shadow: var(--nm-out-sm);
  border-radius: 60% 40% 55% 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.frag-text {
  flex: 1;
}
.frag-title {
  font-family: var(--fh);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.frag-desc {
  font-size: 0.72rem;
  color: var(--accent);
  line-height: 1.4;
}
.fragment-item:hover {
  box-shadow: var(--nm-out-sm);
}
.patchwork-cta {
  margin-top: 28px;
  text-align: right;
}
.patchwork-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fh);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
  padding: 8px 20px;
  background: var(--bg);
  box-shadow: var(--nm-out-sm);
  border-radius: var(--r-pill);
  transition: all 0.2s;
}
.patchwork-link:hover {
  box-shadow: var(--nm-in);
  gap: 12px;
  color: var(--accent2);
}
.features-section h2 {
  margin-bottom: 15px;
}
.features-section .hero-desc {
  margin: 20px 0px;
}
.showcase-section small {
  margin-top: 10px;
  text-align: center;
  display: block;
}
.cta-band p {
  max-width: 800px;
  margin: 20px auto;
}

@media (max-width: 920px){
  .workflow-inner {
      grid-template-columns: 1fr;
      gap: 40px;
  }
  .patchwork-card {
      padding: 18px;
  }
  .fragment-item {
    padding: 14px;
    gap: 8px;
  }
  .features-section {
      padding: 50px 0;
  }
  .sec-title {
    margin-bottom: 24px;;
  }
  .logo {
    max-width: 100px;
  } 
  .nav-cta {
    font-size: .8rem;
    padding: 10px 20px;
  }
  nav {
    height: 60px;
  }
    .hero-desc {
      font-size: .9rem;
      margin-top: 14px;
      width: 100%;
  }
  .hero-btns {
    margin-top: 20px;
  }
  .stat-chip {
    width: 100%;
  }
  .sc-n {
    font-size: 1.3rem;
  }
  .btn-nm-soft,
  .btn-nm-primary {
    padding: 10px 20px;
    font-size: 14px;
  }
  .feat-card {
    padding:20px;
  }
  .showcase-section .sc-sub {
    text-align: left;
  }
  .sc-header {
    margin-bottom: 20px;
  }
  .sc-tabs {
    margin-bottom: 20px;
  }
  .net-section,
  .showcase-section {
    padding-bottom: 50px;
  }
  .cta-btn-wrap a {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }
  .cta-btn-wrap {
    flex-wrap: wrap;
  }
  .contact-left h2 {
    font-size: 20px;
  }
  .ofc,
  .contact-inner {
    padding:20px;
  }
  .contact-inner {
    gap: 20px;
  }
  .office-cards {
    margin-top: 20px;
  }
  .contact-section {
    margin-bottom: 40px;
  }
  .foot-links {
    flex-wrap: wrap;
  }
  
}