/* Not Normal — v2 · aurora luxury (Emhance-style) */

:root{
  --ink:#0C1220;
  --card:#0C141C;
  --white:#FFFFFF;
  --grey:#5A6472;
  --grey-soft:#9AA3AE;
  /* aurora */
  --a-indigo:#2A1B7E;
  --a-violet:#4A34D8;
  --a-blue:#2E63E8;
  --a-green:#9BEF6E;
  --a-teal:#3ED9C4;
  --r-xl:32px;
  --r-lg:22px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  position:relative;
  font-family:'Schibsted Grotesk',system-ui,sans-serif;
  background:var(--white);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block}
h1,h2,h3{font-weight:700;letter-spacing:-0.02em}
.arr{font-weight:400;display:inline-block;transition:transform .2s}
a:hover .arr{transform:translateX(3px)}

/* ---------- Announcement ---------- */
.announce{
  background:#07090F;color:#C7CEDA;
  text-align:center;font-size:.82rem;
  padding:9px 16px;
}
.announce a{color:var(--a-green);text-decoration:none;font-weight:600}

/* ---------- Pill nav ---------- */
.nav-wrap{
  position:absolute;top:44px;left:0;right:0;z-index:60;
  display:flex;justify-content:center;
  padding:0 16px;
}
.pillnav{
  display:flex;align-items:center;gap:30px;
  background:var(--white);
  border-radius:999px;
  padding:9px 9px 9px 24px;
  box-shadow:0 10px 30px rgba(8,12,30,.16), 0 1px 0 rgba(255,255,255,.6) inset;
}
.brand{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:800;font-size:1.06rem;letter-spacing:-0.04em;
  color:var(--ink);text-decoration:none;
}
.brand-mark{height:17px;width:auto}
.navlinks{display:flex;gap:26px}
.navlinks a{
  color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:500;
}
.navlinks a:hover{color:var(--a-blue)}
.nav-cta{
  background:var(--ink);color:var(--white);
  font-size:.85rem;font-weight:600;text-decoration:none;
  padding:10px 20px;border-radius:999px;
}
.nav-cta:hover{background:#1A2334}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(58% 46% at 50% 74%, rgba(155,239,110,.95) 0%, rgba(155,239,110,0) 70%),
    radial-gradient(42% 40% at 12% 88%, rgba(62,217,196,.7) 0%, rgba(62,217,196,0) 70%),
    radial-gradient(46% 44% at 88% 86%, rgba(62,217,196,.55) 0%, rgba(62,217,196,0) 70%),
    radial-gradient(70% 60% at 50% 0%, #33249B 0%, rgba(51,36,155,0) 78%),
    linear-gradient(180deg, #2A1B7E 0%, #2E4BD8 42%, #2E63E8 62%, #35B7D8 100%);
  overflow:hidden;
  clip-path:inset(0);
}
.hero-inner{
  max-width:1100px;margin:0 auto;
  padding:150px 24px 0;
  text-align:center;color:var(--white);
}
.hero-h1{
  font-size:clamp(2.5rem,5.4vw,4rem);
  font-weight:500;letter-spacing:-0.03em;line-height:1.12;
}
.h1-line{display:block}
.h1-cycle{
  display:inline-flex;gap:14px;justify-content:center;
  margin-top:10px;min-height:1.35em;
}
.pillword{
  display:inline-block;
  background:rgba(255,255,255,.82);
  color:var(--ink);
  border-radius:16px;
  padding:.02em .34em .08em;
  box-shadow:0 6px 24px rgba(10,14,40,.18), 0 0 0 1px rgba(255,255,255,.5) inset;
  transition:opacity .45s, filter .45s, transform .45s;
}
.pillword.out{opacity:0;filter:blur(10px);transform:translateY(-10px)}
.hero-sub{
  margin-top:22px;font-size:1.02rem;line-height:1.55;
  color:rgba(255,255,255,.92);font-weight:500;
}
.btn-dark{
  display:inline-block;margin-top:26px;
  background:#0A0F14;color:var(--white);
  font-weight:600;font-size:.92rem;text-decoration:none;
  padding:13px 26px;border-radius:999px;
  box-shadow:0 8px 26px rgba(5,8,20,.35);
}
.btn-dark:hover{background:#151E2A}

.hero-figure{
  position:relative;
  width:min(430px,84vw);
  margin:58px auto 0;
  padding-bottom:10px;
}
.hero-icon{
  width:min(320px,66vw);
  margin:0 auto;
  border-radius:24%;
  box-shadow:0 40px 90px rgba(8,10,32,.5);
  transform:translateY(24px);
}
.glasspill{
  position:absolute;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.86);
  color:var(--ink);
  font-size:.86rem;font-weight:600;
  padding:9px 16px;border-radius:999px;
  box-shadow:0 10px 26px rgba(8,10,32,.28);
  backdrop-filter:blur(6px);
  animation:floaty 5.5s ease-in-out infinite;
}
.gp-dot{
  width:16px;height:16px;border-radius:50%;
  background:conic-gradient(from 40deg,var(--a-green),var(--a-blue),var(--a-violet),var(--a-green));
}
.gp-1{top:6%;right:-4%;animation-delay:0s}
.gp-2{top:34%;left:-14%;animation-delay:1.2s}
.gp-3{top:58%;right:-12%;animation-delay:2.1s}
.gp-4{bottom:2%;left:-2%;animation-delay:3s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- Platform strip ---------- */
.strip{padding:54px 24px 20px;text-align:center}
.strip-note{font-size:.8rem;color:var(--grey-soft);margin-bottom:20px;font-weight:500}
.strip-logos{
  display:flex;flex-wrap:wrap;justify-content:center;gap:16px 44px;
  color:#8A93A0;font-weight:700;font-size:1rem;letter-spacing:-0.01em;
  filter:grayscale(1);
}

/* ---------- Sections ---------- */
.section{max-width:1100px;margin:0 auto;padding:90px 24px}
.h2-center{
  text-align:center;
  font-size:clamp(1.9rem,3.6vw,2.7rem);
  font-weight:600;letter-spacing:-0.03em;line-height:1.15;
}
.section-sub{
  text-align:center;max-width:52ch;margin:16px auto 0;
  color:var(--grey);font-size:1rem;line-height:1.6;
}
.hl{
  background:#EDF1F6;border-radius:12px;
  padding:.02em .3em .08em;font-style:normal;
  box-shadow:0 0 0 1px rgba(12,18,32,.05) inset;
}
.tagpill{
  display:inline-flex;align-items:center;gap:8px;
  background:#F1F4F8;color:var(--ink);
  font-size:.85rem;font-weight:600;
  padding:8px 16px;border-radius:999px;
  margin:0 auto 18px;
}
.section-solution{text-align:center}

/* ---------- Stat cards ---------- */
.statcards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px;margin-top:52px;
}
.statcard{
  background:var(--card);border-radius:var(--r-lg);
  overflow:hidden;color:var(--white);
  box-shadow:0 22px 50px rgba(10,14,30,.22);
}
.statcard-art{position:relative;height:150px;overflow:hidden}
.art-1{background:radial-gradient(120% 150% at 20% 110%,var(--a-green) 0%,var(--a-blue) 42%,var(--a-indigo) 78%,#160E4A 100%)}
.art-2{background:radial-gradient(130% 140% at 85% -10%,var(--a-teal) 0%,var(--a-blue) 40%,#3A1D9E 75%,#12093F 100%)}
.art-3{background:radial-gradient(140% 130% at 10% -20%,#C6F77B 0%,var(--a-teal) 35%,var(--a-violet) 72%,#150C46 100%)}
.statcard-art::before,.statcard-art::after{
  content:"";position:absolute;border-radius:30%;
  background:linear-gradient(140deg,rgba(255,255,255,.55),rgba(90,60,255,.65));
  filter:blur(1px);
}
.statcard-art::before{width:96px;height:96px;right:-18px;top:16px;transform:rotate(18deg)}
.statcard-art::after{width:60px;height:60px;left:22px;bottom:-14px;border-radius:50%;transform:rotate(-12deg)}
.statcard-body{padding:8px 22px 22px}
.stat-big{
  font-size:2rem;font-weight:700;letter-spacing:-0.02em;
  display:block;margin-top:-46px;margin-bottom:22px;
  text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.statcard-body p{font-size:.93rem;line-height:1.55;color:#DCE2EA}
.stat-src{display:block;margin-top:12px;font-size:.72rem;color:#7B8492}

/* ---------- Steps ---------- */
.steps{
  display:flex;align-items:flex-start;justify-content:center;gap:18px;
  margin-top:84px;flex-wrap:wrap;
}
.step{flex:1;min-width:220px;max-width:290px;text-align:center}
.stepnum{
  width:64px;height:64px;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;font-weight:800;color:var(--white);
  border-radius:22px;
  box-shadow:0 12px 26px rgba(40,30,150,.35), 0 2px 0 rgba(255,255,255,.35) inset;
}
.sn-1{background:linear-gradient(150deg,#6FD3FF,#3A6BF0 55%,#3A2ACB)}
.sn-2{background:linear-gradient(150deg,#9BEF6E,#2FBBD8 55%,#4432D6)}
.sn-3{background:linear-gradient(150deg,#B78CFF,#5A3AE8 55%,#241670)}
.step h3{font-size:1.15rem;margin-bottom:8px;letter-spacing:-0.01em}
.step p{font-size:.93rem;line-height:1.6;color:var(--grey)}
.steparrow{color:#C4CBD6;font-size:1.4rem;margin-top:18px}

/* ---------- Console ---------- */
.console{
  position:relative;
  max-width:820px;margin:52px auto 0;
  background:linear-gradient(180deg,#10161E,#0A0F15);
  border-radius:44px;
  padding:34px 120px;
  box-shadow:0 34px 80px rgba(8,12,26,.4), 0 1px 0 rgba(255,255,255,.07) inset;
}
.console-dpad{
  position:absolute;left:34px;top:50%;transform:translateY(-50%);
  width:70px;height:70px;
  background:
    linear-gradient(#1A222C,#141B23) padding-box;
  clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%);
  box-shadow:0 3px 6px rgba(0,0,0,.6);
}
.console-pill{
  position:absolute;right:34px;top:50%;transform:translateY(-50%);
  width:74px;height:32px;border-radius:999px;
  background:linear-gradient(#1A222C,#12181F);
  box-shadow:0 3px 6px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06) inset;
}
.console-brand{
  position:absolute;left:38px;bottom:18px;
  font-size:.72rem;font-weight:700;letter-spacing:-0.02em;color:#3A4552;
}
.console-screen{
  position:relative;border-radius:18px;overflow:hidden;
  box-shadow:0 0 0 3px #05080C, 0 0 0 4px #202A36;
}
#game{
  width:100%;height:330px;display:block;
  background:
    radial-gradient(70% 90% at 50% 100%, rgba(155,239,110,.85) 0%, rgba(155,239,110,0) 62%),
    linear-gradient(180deg,#241A6B 0%,#2E4BD8 55%,#2E9BD8 100%);
  cursor:pointer;touch-action:manipulation;
}
.game-hud{
  position:absolute;top:12px;right:16px;text-align:right;
  color:var(--white);pointer-events:none;font-weight:700;
}
#score{font-size:1.7rem;display:block;line-height:1}
.best{font-size:.78rem;font-weight:600;color:rgba(255,255,255,.65)}
.game-hint{
  position:absolute;left:50%;transform:translateX(-50%);bottom:52px;
  text-shadow:0 1px 8px rgba(10,14,40,.55);
  transition:opacity .4s;white-space:nowrap;
  color:rgba(255,255,255,.8);font-size:.78rem;font-weight:600;
  pointer-events:none;
}

/* ---------- Game cards ---------- */
.gamecards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;margin-top:56px;text-align:left;
}
.gamecard{
  display:flex;gap:0;align-items:stretch;
  background:var(--card);color:var(--white);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 22px 50px rgba(10,14,30,.22);
}
.gamecard-poster{
  width:42%;min-width:170px;object-fit:cover;object-position:top center;
  flex-shrink:0;
}
.gamecard-body{padding:28px 26px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.gamecard-icon{
  width:64px;height:64px;border-radius:24%;
  box-shadow:0 8px 20px rgba(0,0,0,.45);
  margin-bottom:16px;
  transition:transform .18s cubic-bezier(.34,1.8,.6,1);
}
.gamecard:hover .gamecard-icon{transform:scale(1.07) rotate(-3deg)}
.gamecard h3{font-size:1.2rem;margin-bottom:6px}
.gamecard p{font-size:.92rem;line-height:1.55;color:#CBD3DD;font-style:italic}
.attr-pill{
  display:inline-block;margin-top:12px;
  background:rgba(255,255,255,.08);color:#C7CEDA;
  border:1px solid rgba(255,255,255,.14);
  font-size:.74rem;font-weight:600;
  padding:6px 14px;border-radius:999px;
}

/* ---------- Statement panel ---------- */
.statement{
  border-radius:var(--r-xl);
  padding:64px clamp(28px,6vw,80px);
  background:
    radial-gradient(70% 90% at 80% 110%, rgba(155,239,110,.9) 0%, rgba(155,239,110,0) 60%),
    radial-gradient(60% 80% at 8% 100%, rgba(62,217,196,.8) 0%, rgba(62,217,196,0) 60%),
    linear-gradient(150deg,#2A1B7E 0%,#3A4BE0 55%,#35B7D8 100%);
  color:var(--white);
  box-shadow:0 30px 70px rgba(30,30,120,.3);
}
.statement-text{
  font-size:clamp(1.35rem,2.6vw,1.9rem);
  font-weight:600;letter-spacing:-0.02em;line-height:1.4;
  max-width:26em;
}
.hl-glass{
  background:rgba(255,255,255,.85);color:var(--ink);
  border-radius:12px;padding:.02em .3em .08em;
  white-space:nowrap;
}
.statement-small{
  margin-top:22px;font-size:.9rem;color:rgba(255,255,255,.85);max-width:52ch;
}
.btn-on-gradient{margin-top:28px}

/* ---------- Big numbers ---------- */
.bignums{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:34px;text-align:center;
}
.bn{
  font-size:clamp(2.6rem,5vw,3.6rem);font-weight:800;letter-spacing:-0.03em;
  background:linear-gradient(120deg,var(--a-teal) 0%,var(--a-blue) 45%,var(--a-violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bignum p{margin-top:6px;color:var(--ink);font-weight:500}

/* ---------- Dark CTA ---------- */
.darkcta{
  border-radius:var(--r-xl);
  background:
    radial-gradient(90% 70% at 50% 118%, rgba(90,60,240,.95) 0%, rgba(46,99,232,.6) 40%, rgba(62,217,196,.25) 62%, rgba(12,16,24,0) 78%),
    #090D13;
  color:var(--white);text-align:center;
  padding:96px 28px 110px;
  box-shadow:0 30px 70px rgba(8,12,26,.35);
}
.darkcta h2{
  font-size:clamp(1.9rem,3.8vw,2.8rem);
  font-weight:600;letter-spacing:-0.03em;line-height:1.15;
}
.darkcta p{margin-top:16px;color:#B9C1CD;font-size:.95rem}
.btn-light{
  display:inline-block;margin-top:28px;
  background:var(--white);color:var(--ink);
  font-weight:700;font-size:.92rem;text-decoration:none;
  padding:13px 28px;border-radius:999px;
}
.btn-light:hover{background:#EAEFF5}

/* ---------- Footer ---------- */
.footer{
  background:#000;color:#AAB2BE;
  text-align:center;
  padding:90px 24px 0;
  overflow:hidden;
}
.foot-mark{height:40px;width:auto;margin:0 auto 34px;display:block}
.foot-links{display:flex;justify-content:center;gap:26px;margin-bottom:26px}
.foot-links a{color:#E7EBF1;text-decoration:none;font-size:.9rem;font-weight:500}
.foot-links a:hover{color:var(--a-green)}
.foot-legal{font-size:.74rem;line-height:1.8;color:#5E6673}
.megamark{
  font-size:clamp(4.6rem,17vw,15rem);
  font-weight:800;letter-spacing:-0.075em;
  color:var(--white);line-height:.72;
  margin-top:44px;
  transform:translateY(14%);
  user-select:none;
}

/* ---------- Focus & motion ---------- */
:focus-visible{outline:3px solid var(--a-blue);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .gamecard{flex-direction:column}
  .gamecard-poster{width:100%;min-width:0;max-height:260px}
  .navlinks{display:none}
  .pillnav{gap:16px}
  .console{padding:24px 24px 44px;border-radius:30px}
  .console-dpad,.console-pill{display:none}
  #game{height:270px}
  .steparrow{display:none}
  .gp-2{left:-4%}
  .gp-3{right:-4%}
  .section{padding:64px 20px}
  .hero-inner{padding-top:120px}
}

.megamark .mm-o{
  display:inline-block;
  transform:rotate(-14deg) translateY(.04em);
  margin:0 -0.055em;
}
.megamark .mm-o2{
  display:inline-block;
  transform:rotate(10deg);
  margin:0 -0.05em;
}