/* NxtGateW marketing illustrations — CSS/SVG UI scenes (Venly-like infrastructure) */

/* ---- Hero art ---- */
.hero{
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(49,87,243,.14), transparent 55%),
    radial-gradient(ellipse 50% 40% at 15% 80%, rgba(20,60,196,.08), transparent 50%),
    linear-gradient(165deg, #eef3ff 0%, #f7f8fa 45%, #e8eefc 100%);
}
.hero-media{display:none}
.hero-veil{
  background:
    linear-gradient(180deg, rgba(255,255,255,.35) 0%, transparent 40%, rgba(247,248,250,.65) 100%);
}
.hero-art{
  position:absolute;inset:auto 0 8% auto;width:min(420px,42vw);height:min(380px,48vh);
  right:6%;bottom:12%;z-index:1;pointer-events:none;
}
.hero-art__glow{
  position:absolute;inset:10% 5%;
  background:radial-gradient(circle, rgba(49,87,243,.22), transparent 68%);
  filter:blur(8px);
}
.hero-art__grid{
  position:absolute;inset:8%;
  border-radius:28px;
  background:
    linear-gradient(rgba(49,87,243,.06) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(49,87,243,.06) 1px, transparent 1px) 0 0 / 28px 28px,
    rgba(255,255,255,.45);
  border:1px solid rgba(49,87,243,.1);
  transform:perspective(800px) rotateY(-12deg) rotateX(8deg);
  box-shadow:0 30px 60px rgba(28,42,78,.12);
}
.hero-art__card{
  position:absolute;
  background:#fff;
  border:1px solid rgba(49,87,243,.12);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(28,42,78,.12);
  padding:14px 16px;
  animation:illuFloat 5.5s ease-in-out infinite;
}
.hero-art__card--wallet{
  left:8%;top:18%;width:190px;z-index:3;
}
.hero-art__card--nft{
  right:4%;top:28%;width:140px;z-index:4;
  animation-delay:.8s;
}
.hero-art__card--api{
  left:22%;bottom:12%;width:200px;z-index:5;
  display:grid;gap:6px;font-size:12px;font-weight:600;color:#3157f3;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  animation-delay:1.4s;
}
.hero-art__row{display:flex;gap:6px;margin-bottom:10px}
.hero-art__row i{width:28px;height:28px;border-radius:8px;background:rgba(49,87,243,.12);display:block}
.hero-art__bar{height:8px;border-radius:99px;background:linear-gradient(90deg,#3157f3,#5c7ef5);width:72%;margin-bottom:10px}
.hero-art__bar--sm{width:55%;height:6px;background:#e8eeff;margin-bottom:6px}
.hero-art__bar--xs{width:40%;height:6px;background:#f0f3f8;margin:0}
.hero-art__chip{
  display:inline-block;padding:4px 10px;border-radius:8px;
  background:#f3f6fc;font-size:11px;font-weight:700;color:#143cc4;
  font-family:ui-monospace,Menlo,monospace;
}
.hero-art__hex{
  width:48px;height:48px;margin:0 auto 10px;
  background:linear-gradient(145deg,#3157f3,#143cc4);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.hero-art__orbit{
  position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;
  border:1px dashed rgba(49,87,243,.25);border-radius:50%;
  animation:illuSpin 28s linear infinite;
}
@keyframes illuFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes illuSpin{to{transform:rotate(360deg)}}

@media(max-width:960px){
  .hero-art{opacity:.35;width:280px;right:-20px;bottom:0}
  .hero-inner{padding-bottom:100px}
}
@media(max-width:600px){
  .hero-art{display:none}
}

/* ---- Product scenes ---- */
.product-visual{
  min-height:400px;
  background:transparent;
  padding:0;
  box-shadow:none;
}
.mkt-illu{
  margin:0;width:100%;height:100%;min-height:400px;
  position:relative;border-radius:20px;overflow:hidden;
  background:#fff;
  border:1px solid #eef0f4;
  box-shadow:0 18px 36px rgba(28,42,78,.07);
}
.mkt-illu figcaption{
  position:absolute;left:16px;right:16px;bottom:16px;z-index:5;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border:1px solid rgba(232,235,240,.9);
  box-shadow:0 10px 24px rgba(20,30,60,.08);
}
.mkt-illu figcaption span{
  font-size:12px;font-weight:600;color:#6b7280;letter-spacing:.02em;text-transform:uppercase;
}
.mkt-illu figcaption strong{font-size:14px;font-weight:700;color:#111827}

.mkt-scene{
  position:relative;height:100%;min-height:400px;padding:28px 24px 72px;
  display:flex;align-items:center;justify-content:center;
}
.mkt-scene--wide{padding-bottom:40px}
.mkt-scene__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 80% 20%, rgba(49,87,243,.1), transparent 40%),
    radial-gradient(circle at 10% 80%, rgba(20,60,196,.06), transparent 45%),
    linear-gradient(160deg,#f4f7fc,#eef2f8);
}
.mkt-scene__bg--nft{
  background:
    radial-gradient(circle at 30% 30%, rgba(49,87,243,.14), transparent 40%),
    linear-gradient(160deg,#f7f8ff,#eef1fb);
}
.mkt-scene__bg--hooks{
  background:
    radial-gradient(circle at 70% 60%, rgba(49,87,243,.12), transparent 42%),
    linear-gradient(160deg,#f5f8ff,#eef3fa);
}

.mkt-panel{
  position:relative;z-index:2;width:min(100%,320px);
  background:#fff;border-radius:18px;padding:16px;
  border:1px solid rgba(49,87,243,.1);
  box-shadow:0 20px 40px rgba(28,42,78,.1);
}
.mkt-panel__head{display:flex;gap:6px;margin-bottom:14px}
.mkt-dot{width:8px;height:8px;border-radius:50%;background:#e5e7eb}
.mkt-dot:first-child{background:#fca5a5}
.mkt-dot:nth-child(2){background:#fcd34d}
.mkt-dot:nth-child(3){background:#86efac}

.mkt-wallet-card{
  background:linear-gradient(145deg,#3157f3,#143cc4);
  color:#fff;border-radius:14px;padding:16px;margin-bottom:14px;
}
.mkt-wallet-card__top{display:flex;justify-content:space-between;margin-bottom:14px;font-size:11px;font-weight:700}
.mkt-badge{background:rgba(255,255,255,.2);padding:3px 8px;border-radius:99px}
.mkt-net{opacity:.85}
.mkt-wallet-card__addr{
  font-family:ui-monospace,Menlo,monospace;font-size:15px;font-weight:600;letter-spacing:.02em;
  margin-bottom:12px;
}
.mkt-wallet-card__meta{display:flex;justify-content:space-between;font-size:12px;opacity:.9}
.mkt-stack{display:grid;gap:8px}
.mkt-mini{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:#f7f8fa;
  font-size:12px;font-weight:600;color:#555;
}
.mkt-mini b{width:8px;height:8px;border-radius:50%;background:#cbd5e1;display:block}
.mkt-mini--on{background:rgba(49,87,243,.08);color:#143cc4}
.mkt-mini--on b{background:#3157f3}

.mkt-float{
  position:absolute;z-index:3;
  padding:8px 12px;border-radius:10px;background:#fff;
  border:1px solid rgba(49,87,243,.14);
  box-shadow:0 12px 24px rgba(28,42,78,.1);
  font-size:11px;font-weight:800;letter-spacing:.06em;color:#3157f3;
  animation:illuFloat 4.8s ease-in-out infinite;
}
.mkt-float--a{top:18%;right:10%}
.mkt-float--b{bottom:22%;left:8%;animation-delay:1s;color:#143cc4}

/* NFT tokens */
.mkt-nft-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,300px);
}
.mkt-nft-token{
  background:#fff;border-radius:16px;padding:16px 12px;text-align:center;
  border:1px solid rgba(49,87,243,.1);
  box-shadow:0 14px 28px rgba(28,42,78,.08);
}
.mkt-nft-token--c{grid-column:1/-1;display:flex;align-items:center;gap:12px;text-align:left;padding:12px 16px}
.mkt-nft-token__mark{
  width:44px;height:44px;margin:0 auto 10px;border-radius:12px;
  display:grid;place-items:center;font-weight:800;color:#fff;font-size:16px;
  background:linear-gradient(145deg,#3157f3,#143cc4);
}
.mkt-nft-token--c .mkt-nft-token__mark{margin:0;flex:0 0 auto}
.mkt-nft-token span{display:block;font-size:13px;font-weight:700;color:#111}
.mkt-nft-token small{display:block;font-size:11px;color:#8a919e;margin-top:2px;font-weight:600}
.mkt-nft-token--b{transform:translateY(12px)}
.mkt-nft-token--a{animation:illuFloat 5s ease-in-out infinite}
.mkt-nft-token--b{animation:illuFloat 5s ease-in-out infinite .6s}

/* Automation flow */
.mkt-flow{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:stretch;gap:0;width:min(100%,240px);
}
.mkt-flow__node{
  background:#fff;border:1px solid #e8ebf0;border-radius:12px;
  padding:12px 14px;font-size:13px;font-weight:700;color:#333;text-align:center;
  box-shadow:0 8px 18px rgba(28,42,78,.06);
}
.mkt-flow__node--blue{
  background:linear-gradient(145deg,#3157f3,#143cc4);color:#fff;border-color:transparent;
}
.mkt-flow__arrow{
  height:18px;position:relative;margin:2px auto;
}
.mkt-flow__arrow::before{
  content:"";position:absolute;left:50%;top:0;bottom:4px;width:2px;margin-left:-1px;
  background:rgba(49,87,243,.35);
}
.mkt-flow__arrow::after{
  content:"";position:absolute;left:50%;bottom:0;margin-left:-4px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:6px solid #3157f3;
}
.mkt-queue{
  position:absolute;right:18px;top:22%;z-index:3;
  display:grid;gap:6px;
}
.mkt-queue__item{
  width:42px;height:8px;border-radius:99px;background:#e5e7eb;
}
.mkt-queue__item.is-run{
  background:linear-gradient(90deg,#3157f3,#5c7ef5);
  animation:illuPulse 1.4s ease-in-out infinite;
}
@keyframes illuPulse{
  0%,100%{opacity:1}
  50%{opacity:.45}
}

/* Hooks / code */
.mkt-code{
  margin:0 0 12px;padding:14px;border-radius:12px;background:#0f172a;color:#dbeafe;
  font-size:11px;line-height:1.55;font-family:ui-monospace,Menlo,monospace;overflow:hidden;
}
.mkt-pulse-row{
  display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;color:#555;
}
.mkt-pulse{
  width:10px;height:10px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.5);
  animation:illuPing 1.8s ease-out infinite;
}
@keyframes illuPing{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}
  70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* Platform columns */
.mkt-platform{
  position:relative;z-index:2;
  display:flex;align-items:stretch;gap:8px;width:min(100%,360px);
}
.mkt-platform__col{
  flex:1;background:#fff;border-radius:14px;padding:14px 12px;
  border:1px solid #e8ebf0;box-shadow:0 12px 24px rgba(28,42,78,.07);
  display:grid;gap:8px;align-content:start;
}
.mkt-platform__col strong{font-size:12px;font-weight:800;color:#111;letter-spacing:.04em;text-transform:uppercase}
.mkt-platform__col i{display:block;height:8px;border-radius:99px;background:#eef1f6}
.mkt-platform__col i:nth-child(2){width:90%}
.mkt-platform__col i:nth-child(3){width:70%}
.mkt-platform__col i:nth-child(4){width:55%}
.mkt-platform__col--on{
  border-color:rgba(49,87,243,.25);
  background:linear-gradient(180deg,#fff,#f3f6fc);
}
.mkt-platform__col--on strong{color:#3157f3}
.mkt-platform__pipe{
  width:14px;align-self:center;height:2px;background:rgba(49,87,243,.35);border-radius:2px;
}

/* Platform section figure */
.platform-illu{
  margin:0;border-radius:28px;overflow:hidden;
  background:transparent;min-height:380px;
  box-shadow:none;
}
.platform-illu .mkt-illu{min-height:380px;border-radius:28px}

/* Resource thumbs */
.blog-thumb{
  position:relative;height:220px;border-radius:18px;overflow:hidden;
  background:#eef2f8;color:#143cc4;display:flex;align-items:flex-end;
}
.blog-thumb img{display:none}
.blog-thumb::after{
  background:linear-gradient(180deg,transparent 45%,rgba(15,30,70,.28) 100%);
}
.blog-thumb span{
  text-shadow:none;color:#0f172a;font-size:22px;font-weight:700;
}
.mkt-thumb{position:absolute;inset:0;width:100%;height:100%}
.mkt-thumb__inner{
  width:100%;height:100%;
  display:grid;place-content:center;gap:6px;text-align:center;
  background:
    radial-gradient(circle at 30% 30%, rgba(49,87,243,.18), transparent 50%),
    linear-gradient(145deg,#e8eeff,#f7f8fa);
  color:#143cc4;
}
.mkt-thumb__inner--nft{
  background:
    radial-gradient(circle at 70% 40%, rgba(49,87,243,.22), transparent 48%),
    linear-gradient(145deg,#f0f4ff,#eef2f8);
}
.mkt-thumb__icon{
  width:48px;height:36px;margin:0 auto;border-radius:10px;
  background:linear-gradient(145deg,#3157f3,#143cc4);
  box-shadow:0 10px 20px rgba(49,87,243,.25);
}
.mkt-thumb__hex{
  width:44px;height:44px;margin:0 auto;
  background:linear-gradient(145deg,#3157f3,#143cc4);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.mkt-thumb__inner b{font-size:18px;font-weight:700;letter-spacing:-.02em}
.mkt-thumb__inner small{font-size:11px;font-weight:700;letter-spacing:.08em;opacity:.7}

@media (prefers-reduced-motion: reduce){
  .hero-art__card,.mkt-float,.mkt-nft-token--a,.mkt-nft-token--b,.hero-art__orbit,.mkt-pulse,.mkt-queue__item.is-run{
    animation:none!important;
  }
}