@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --nfc-bg-0:#05060b;
  --nfc-bg-1:#080a13;
  --nfc-bg-2:#101425;
  --nfc-surface:rgba(255,255,255,.058);
  --nfc-surface-2:rgba(255,255,255,.088);
  --nfc-surface-3:rgba(255,255,255,.125);
  --nfc-border:rgba(255,255,255,.12);
  --nfc-border-2:rgba(255,255,255,.18);
  --nfc-text:#f7f7fb;
  --nfc-text-2:rgba(239,242,255,.72);
  --nfc-text-3:rgba(221,226,245,.46);
  --nfc-muted:rgba(221,226,245,.32);
  --nfc-purple:#7b3dff;
  --nfc-purple-2:#9d74ff;
  --nfc-purple-3:#cab8ff;
  --nfc-blue:#87a7ff;
  --nfc-green:#46d980;
  --nfc-amber:#ffbd77;
  --nfc-radius-xs:12px;
  --nfc-radius-sm:16px;
  --nfc-radius-md:22px;
  --nfc-radius-lg:30px;
  --nfc-radius-xl:40px;
  --nfc-max:1180px;
  --mouse-x:50vw;
  --mouse-y:24vh;
  --tilt-x:0deg;
  --tilt-y:0deg;
  --parallax-x:0px;
  --parallax-y:0px;
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--nfc-bg-0);color-scheme:dark}
body{
  min-height:100vh;
  font-family:var(--font);
  color:var(--nfc-text);
  background:var(--nfc-bg-0);
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
::selection{background:rgba(123,61,255,.35);color:#fff}

.nfc-page{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% -10%, rgba(176,136,255,.16), transparent 30%),
    radial-gradient(circle at 92% 10%, rgba(125,156,255,.12), transparent 32%),
    linear-gradient(180deg,#05060b 0%,#090c16 45%,#05060b 100%);
}

.nfc-noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 50% 20%, black 0%, transparent 72%);
}

.nfc-ambient{
  position:fixed;
  inset:-18%;
  pointer-events:none;
  z-index:0;
  filter:saturate(115%);
  transform:translate3d(calc(var(--parallax-x) * .35),calc(var(--parallax-y) * .35),0);
}
.nfc-ambient::before,
.nfc-ambient::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(84px);
  mix-blend-mode:screen;
  animation:nfcFloat 18s ease-in-out infinite;
}
.nfc-ambient::before{
  width:520px;height:520px;
  top:0;left:2%;
  background:radial-gradient(circle, rgba(164,126,255,.42), rgba(124,61,255,.18) 42%, transparent 72%);
  transform:translate3d(calc(var(--parallax-x) * -1.1),calc(var(--parallax-y) * -.8),0);
}
.nfc-ambient::after{
  width:460px;height:460px;
  top:16%;right:2%;
  background:radial-gradient(circle, rgba(122,154,255,.24), rgba(75,103,220,.10) 42%, transparent 72%);
  animation-delay:-7s;
  transform:translate3d(calc(var(--parallax-x) * 1.1),calc(var(--parallax-y) * .9),0);
}
.nfc-ambient__orb{
  position:absolute;
  width:380px;height:380px;
  left:42%;bottom:0;
  border-radius:50%;
  filter:blur(90px);
  background:radial-gradient(circle, rgba(123,61,255,.24), rgba(120,65,255,.08) 48%, transparent 76%);
  mix-blend-mode:screen;
  animation:nfcFloat 22s ease-in-out infinite reverse;
}

@keyframes nfcFloat{
  0%,100%{translate:0 0;scale:1}
  30%{translate:32px -22px;scale:1.06}
  58%{translate:-22px 26px;scale:.98}
  78%{translate:18px 18px;scale:1.03}
}

.nfc-spotlight{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(520px circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,.092), transparent 44%),
    radial-gradient(320px circle at calc(var(--mouse-x) + 10vw) calc(var(--mouse-y) + 4vh), rgba(167,132,255,.085), transparent 48%);
  opacity:.9;
  transition:opacity .25s ease;
}

.nfc-container{width:min(var(--nfc-max),calc(100% - 32px));margin-inline:auto;position:relative;z-index:2}
.nfc-section{position:relative;z-index:2;padding:92px 0}
.nfc-section--tight{padding:64px 0}
.nfc-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:32px;
  padding:0 13px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(231,236,255,.62);
}
.nfc-eyebrow::before{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  background:var(--nfc-purple-2);
  box-shadow:0 0 0 5px rgba(123,61,255,.12),0 0 22px rgba(157,116,255,.8);
}
.nfc-title{
  font-size:clamp(34px,5.2vw,72px);
  line-height:.96;
  letter-spacing:-.07em;
  font-weight:800;
  color:#fff;
}
.nfc-title .soft{
  background:linear-gradient(180deg,#fff 0%,#d8c9ff 76%,#a98bff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.nfc-subtitle{
  color:var(--nfc-text-2);
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.66;
}
.nfc-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:34px;
}
.nfc-section-head__text{max-width:760px}
.nfc-section-head .nfc-title{font-size:clamp(32px,4vw,54px)}
.nfc-section-head .nfc-subtitle{max-width:620px;margin-top:14px}

@media(max-width:860px){
  .nfc-section{padding:68px 0}
  .nfc-section-head{display:block}
  .nfc-container{width:min(100% - 22px,100%)}
}