/* =========================================================================
   MIDAS.AI — portaal  ·  Liquid glass × Vice City × Cyberpunk 2077
   ========================================================================= */
:root{
  --ink:#06060f;
  --ink2:#0b0a1c;
  --ink3:#0e0d24;

  /* Vice City sunset */
  --pink:#ff2d95;
  --magenta:#d613d6;
  --cyan:#19e3f2;
  --violet:#a855f7;
  --amber:#ff9f1c;
  --orange:#ff5f1f;

  /* Cyberpunk UI */
  --cyber:#00f0ff;
  --cyber-yellow:#fcee0a;
  --cyber-red:#ff003c;
  --text:#f2f4ff;
  --muted:#9fa6cf;
  --muted2:#767ea8;
  --ok:#3df58f;

  /* glass */
  --glass:rgba(255,255,255,.06);
  --glass2:rgba(255,255,255,.1);
  --glass3:rgba(255,255,255,.16);
  --stroke:rgba(255,255,255,.13);
  --stroke2:rgba(255,255,255,.24);
  --hair:rgba(255,255,255,.5);
  --blur:blur(22px) saturate(180%);

  --lift:0 30px 80px rgba(0,0,0,.55);
  --glow-cyber:0 0 0 1px rgba(0,240,255,.3),0 22px 60px rgba(0,240,255,.22);

  --radius:20px;
  --radius-lg:26px;
  --maxw:1200px;
  --nav-h:74px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.18s;
  --dur-slow:.4s;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;background:var(--ink);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
html:not(.js) .reveal{opacity:1;transform:none}
a{color:inherit;text-decoration:none}
::selection{background:rgba(255,45,149,.4);color:#fff}

h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.01em;line-height:1.05;margin:0}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--cyber);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--cyber))}
.eyebrow.center{justify-content:center;display:flex}
.eyebrow.center::after{content:"";width:26px;height:1px;background:linear-gradient(270deg,transparent,var(--cyber))}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;width:100%}
.ai{color:var(--pink)}
.center{text-align:center}

/* ============================ SCENE ============================ */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sky{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 118%,rgba(255,45,149,.34),transparent 58%),
  radial-gradient(90% 70% at 12% 8%,rgba(0,240,255,.12),transparent 60%),
  radial-gradient(90% 80% at 88% 0%,rgba(168,85,247,.16),transparent 62%),
  linear-gradient(180deg,#06060f 0%,#0b0a1c 42%,#160b2b 72%,#24103a 100%)}
.aurora{position:absolute;inset:-20% -10% auto -10%;height:70%}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;mix-blend-mode:screen}
.aurora i:nth-child(1){width:46vw;height:46vw;left:-6%;top:-10%;background:radial-gradient(circle,rgba(255,45,149,.72),transparent 70%);animation:float1 26s var(--ease) infinite}
.aurora i:nth-child(2){width:40vw;height:40vw;right:-4%;top:-6%;background:radial-gradient(circle,rgba(0,240,255,.55),transparent 70%);animation:float2 32s var(--ease) infinite}
.aurora i:nth-child(3){width:34vw;height:34vw;left:38%;top:2%;background:radial-gradient(circle,rgba(168,85,247,.6),transparent 70%);animation:float3 38s var(--ease) infinite}
@keyframes float1{50%{transform:translate(6vw,4vh) scale(1.12)}}
@keyframes float2{50%{transform:translate(-5vw,5vh) scale(1.08)}}
@keyframes float3{50%{transform:translate(3vw,-4vh) scale(1.15)}}
.stars{position:absolute;inset:0;opacity:.7;background-image:
  radial-gradient(1.4px 1.4px at 20% 26%,rgba(255,255,255,.9),transparent),
  radial-gradient(1.2px 1.2px at 68% 14%,rgba(255,255,255,.7),transparent),
  radial-gradient(1.6px 1.6px at 42% 42%,rgba(0,240,255,.8),transparent),
  radial-gradient(1.2px 1.2px at 84% 32%,rgba(255,45,149,.75),transparent),
  radial-gradient(1.2px 1.2px at 12% 58%,rgba(255,255,255,.55),transparent),
  radial-gradient(1.4px 1.4px at 56% 68%,rgba(252,238,10,.6),transparent);
  animation:twinkle 6s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.35}}
.sun{position:absolute;right:12%;top:16%;width:min(30vw,300px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(180deg,var(--cyber-yellow),var(--amber) 38%,var(--pink) 74%,var(--magenta));
  filter:blur(2px);opacity:.9;
  -webkit-mask:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 20px);
          mask:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 20px);
  box-shadow:0 0 120px rgba(255,45,149,.5);animation:sunpulse 9s ease-in-out infinite}
@keyframes sunpulse{50%{opacity:.72}}
.grid{position:absolute;left:-20%;right:-20%;bottom:-6%;height:56%;transform:perspective(430px) rotateX(63deg);
  transform-origin:bottom center;
  background-image:linear-gradient(rgba(0,240,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,45,149,.42) 1px,transparent 1px);
  background-size:66px 66px;opacity:.5;
  -webkit-mask:linear-gradient(180deg,transparent,#000 34%);mask:linear-gradient(180deg,transparent,#000 34%);
  animation:gridmove 5.5s linear infinite}
@keyframes gridmove{to{background-position:0 66px,0 0}}
.palm{position:absolute;bottom:-2%;width:min(34vw,340px);height:auto;opacity:.9;filter:drop-shadow(0 0 40px rgba(0,0,0,.6))}
.palm.l{left:-4%}
.palm.r{right:-4%;transform:scaleX(-1)}
.noise{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scan{position:absolute;inset:0;opacity:.35;background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(0,0,0,.22) 3px 4px)}
.edge{position:absolute;inset:0;box-shadow:inset 0 0 220px 40px rgba(0,0,0,.72)}
.vign{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 40%,transparent 40%,rgba(3,3,10,.72))}

/* ============================ GLASS ============================ */
.glass{
  position:relative;background:linear-gradient(150deg,var(--glass2),var(--glass) 46%,rgba(255,255,255,.03));
  border:1px solid var(--stroke);border-radius:var(--radius);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--lift),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.28)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.22),transparent 34%);
  -webkit-mask:linear-gradient(#000,transparent 40%);mask:linear-gradient(#000,transparent 40%);opacity:.7}
.corner{position:absolute;width:16px;height:16px;pointer-events:none;border-color:rgba(0,240,255,.55);opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}
.corner.tl{top:9px;left:9px;border-left:1.6px solid;border-top:1.6px solid;border-radius:4px 0 0 0}
.corner.tr{top:9px;right:9px;border-right:1.6px solid;border-top:1.6px solid;border-radius:0 4px 0 0}
.corner.bl{bottom:9px;left:9px;border-left:1.6px solid;border-bottom:1.6px solid;border-radius:0 0 0 4px}
.corner.br{bottom:9px;right:9px;border-right:1.6px solid;border-bottom:1.6px solid;border-radius:0 0 4px 0}

/* ============================ TOPBAR ============================ */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(10,9,24,.72),rgba(10,9,24,.34));
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:1px solid var(--stroke)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,240,255,.6),rgba(255,45,149,.55),transparent)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-family:'Space Grotesk';font-weight:700;letter-spacing:.14em;font-size:15px;text-transform:uppercase}
.brand .mark{width:32px;height:32px;border-radius:9px;position:relative;
  background:linear-gradient(135deg,var(--cyan),var(--violet) 50%,var(--pink));
  box-shadow:0 0 20px rgba(255,45,149,.55),inset 0 1px 0 rgba(255,255,255,.5);transition:transform var(--dur) var(--ease)}
.brand .mark::after{content:"";position:absolute;inset:7px;border-radius:4px;background:var(--ink);opacity:.85}
.brand .mark.sm{width:22px;height:22px;border-radius:7px}
.brand:hover .mark{transform:rotate(22deg) scale(1.07)}
.topright{display:flex;align-items:center;gap:14px}
.status{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  background:var(--glass);border:1px solid var(--stroke);border-radius:100px;padding:7px 14px;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:blip 2.4s ease-in-out infinite}
@keyframes blip{50%{opacity:.35}}
.clock{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--cyber);letter-spacing:.08em;min-width:52px;text-align:right;text-shadow:0 0 12px rgba(0,240,255,.5)}

/* ============================ HERO ============================ */
main{position:relative;z-index:1}
.hero{min-height:100vh;display:flex;align-items:center;padding:calc(var(--nav-h) + 40px) 0 40px}
.hero h1{font-size:clamp(42px,8.4vw,116px);margin:16px 0 0;text-shadow:0 6px 40px rgba(0,0,0,.5)}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--cyber),var(--violet) 44%,var(--pink) 78%,var(--amber));
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 26px rgba(255,45,149,.4))}
.lede{max-width:620px;margin:24px 0 0;color:var(--muted);font-size:clamp(15px,1.6vw,18px);line-height:1.7}

.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:52px}
.choice{display:grid;grid-template-columns:60px 1fr;grid-template-rows:auto auto;gap:6px 20px;align-items:start;
  padding:26px 28px;transition:transform var(--dur-slow) var(--ease-out),border-color var(--dur),box-shadow var(--dur-slow);overflow:hidden;isolation:isolate}
.choice::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity var(--dur-slow) var(--ease-out);
  background:radial-gradient(120% 120% at 0% 0%,rgba(0,240,255,.16),transparent 46%),radial-gradient(120% 120% at 100% 100%,rgba(255,45,149,.16),transparent 48%)}
.choice:hover{transform:translateY(-7px);border-color:rgba(0,240,255,.6);box-shadow:var(--glow-cyber),var(--lift)}
.choice:hover::after{opacity:1}
.choice:hover .corner{opacity:1}
.ico{grid-row:span 2;width:60px;height:60px;border-radius:16px;display:grid;place-items:center;color:#0a0410;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 34px rgba(0,0,0,.4);transition:transform var(--dur) var(--ease)}
.ico svg{width:30px;height:30px}
.choice:hover .ico{transform:scale(1.06) rotate(-4deg)}
.ico.vault{background:linear-gradient(140deg,var(--cyber-yellow),var(--amber) 60%,var(--pink))}
.ico.brain{background:linear-gradient(140deg,var(--cyan),var(--violet) 65%,var(--magenta));color:#fff}
.ico.music{background:linear-gradient(140deg,var(--ok),var(--cyan) 70%)}
.ico.films{background:linear-gradient(140deg,var(--pink),var(--violet) 70%);color:#fff}
.cbody{display:flex;flex-direction:column;gap:7px;min-width:0}
.ctag{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted2)}
.ctitle{font-family:'Space Grotesk';font-size:23px;font-weight:700;letter-spacing:-.01em}
.cdesc{font-size:14px;line-height:1.6;color:var(--muted)}
.cgo{grid-column:2;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyber);margin-top:8px;display:inline-flex;align-items:center;gap:8px}
.cgo .arw{transition:transform var(--dur) var(--ease-out)}
.choice:hover .cgo .arw{transform:translateX(5px)}

/* ============================ STRIP ============================ */
.strip{padding:30px 0 90px}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{padding:22px 24px;display:flex;flex-direction:column;gap:4px;border-radius:18px}
.stat b{font-family:'Space Grotesk';font-size:30px;font-weight:700;
  background:linear-gradient(100deg,var(--cyber),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:12.5px;color:var(--muted2);letter-spacing:.04em}

/* ============================ FOOTER ============================ */
.foot{position:relative;z-index:1;border-top:1px solid var(--stroke);background:rgba(8,7,18,.5);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:22px;flex-wrap:wrap}
.fbrand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;letter-spacing:.14em;font-size:13px;text-transform:uppercase}
.fmeta{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2)}
.lockbtn{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  background:var(--glass);border:1px solid var(--stroke);border-radius:100px;padding:8px 16px;cursor:pointer;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);transition:all var(--dur)}
.lockbtn:hover{color:var(--text);border-color:rgba(0,240,255,.5);box-shadow:0 0 0 1px rgba(0,240,255,.25)}

/* ============================ BTN ============================ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;
  font-family:'Space Grotesk';font-weight:600;font-size:14.5px;cursor:pointer;border-radius:16px;overflow:hidden;
  border:1px solid var(--stroke2);background:linear-gradient(150deg,var(--glass2),var(--glass));color:var(--text);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 30px rgba(0,0,0,.4);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur-slow),border-color var(--dur)}
.btn::after{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.28),transparent 40%);-webkit-mask:linear-gradient(#000,transparent 55%);mask:linear-gradient(#000,transparent 55%);opacity:.7}
.btn:hover{transform:translateY(-2px);border-color:rgba(0,240,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 18px 44px rgba(0,240,255,.28)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.full{width:100%}
.btn.primary{color:#0a0410;border:1px solid rgba(255,255,255,.45);
  background:linear-gradient(120deg,var(--cyan),var(--violet) 46%,var(--pink) 82%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 16px 44px rgba(255,45,149,.4),0 6px 20px rgba(0,240,255,.3)}
.btn.primary::before{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);transition:left .6s var(--ease-out)}
.btn.primary:hover{border-color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 20px 60px rgba(255,45,149,.6),0 8px 26px rgba(0,240,255,.4)}
.btn.primary:hover::before{left:140%}
.btn .arw{position:relative;z-index:2;transition:transform var(--dur) var(--ease-out)}
.btn:hover .arw{transform:translateX(4px)}

/* ============================ GATE ============================ */
.gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:26px;
  background:radial-gradient(120% 120% at 50% 30%,rgba(11,10,28,.7),rgba(4,4,12,.92));
  -webkit-backdrop-filter:blur(9px) saturate(140%);backdrop-filter:blur(9px) saturate(140%);
  transition:opacity var(--dur-slow) var(--ease),visibility var(--dur-slow)}
.gate.hide{opacity:0;visibility:hidden;pointer-events:none}
.gate-aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gate-aurora::before,.gate-aurora::after{content:"";position:absolute;width:60vw;height:60vw;border-radius:50%;filter:blur(110px);opacity:.4;mix-blend-mode:screen}
.gate-aurora::before{left:-14%;top:-16%;background:radial-gradient(circle,rgba(255,45,149,.7),transparent 70%);animation:float1 24s var(--ease) infinite}
.gate-aurora::after{right:-14%;bottom:-18%;background:radial-gradient(circle,rgba(0,240,255,.6),transparent 70%);animation:float2 30s var(--ease) infinite}
.gate .box{width:min(430px,100%);padding:40px 34px 30px;text-align:center;z-index:1}
.gate .box h2{font-size:30px;margin-top:16px}
.gate .box p{color:var(--muted);font-size:14.5px;margin:14px 0 22px;line-height:1.6}
.codefield{position:relative}
.codefield input{width:100%;text-align:center;font-family:'JetBrains Mono',monospace;font-size:22px;letter-spacing:.4em;
  padding:16px 18px;color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--stroke2);border-radius:15px;outline:none;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);transition:border-color var(--dur),box-shadow var(--dur)}
.codefield input::placeholder{color:var(--muted2);letter-spacing:.35em}
.codefield input:focus{border-color:var(--cyber);box-shadow:0 0 0 3px rgba(0,240,255,.2),0 0 30px rgba(0,240,255,.25)}
.err{min-height:20px;margin:12px 0 6px;font-size:13px;color:var(--cyber-red);font-family:'JetBrains Mono',monospace;letter-spacing:.06em}
.fade{margin-top:20px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted2)}
.shake{animation:shake .5s var(--ease)}
@keyframes shake{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}

/* ============================ REVEAL ============================ */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}

/* ============================ RESPONSIVE ============================ */
@media(max-width:860px){
  .choices{grid-template-columns:1fr;gap:16px}
  .strip .wrap{grid-template-columns:repeat(2,1fr)}
  .sun{width:44vw;right:6%;top:13%}
  .palm{width:52vw}
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 60px)}
}
@media(max-width:520px){
  .wrap{padding:0 18px}
  .stat b{font-size:24px}
  .choice{padding:22px 20px;grid-template-columns:52px 1fr;gap:6px 16px}
  .ico{width:52px;height:52px}.ico svg{width:26px;height:26px}
  .ctitle{font-size:20px}
  .clock{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}