/* NextPage.ro — full-screen interactive landing (light / watercolor) */
:root{
  --ink:#0d1b2a;
  --muted:#56657a;
  --blue:#1A9FFF;
  --glass:rgba(255,255,255,.55);
  --glass-brd:rgba(255,255,255,.75);
  --shadow:0 18px 40px rgba(13,27,42,.10);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  overflow:hidden;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  /* Fallback background if WebGL is unavailable */
  background:
    radial-gradient(60vmax 60vmax at 18% 20%, rgba(26,159,255,.20), transparent 60%),
    radial-gradient(55vmax 55vmax at 82% 30%, rgba(25,211,227,.18), transparent 60%),
    radial-gradient(60vmax 60vmax at 50% 95%, rgba(124,92,255,.16), transparent 60%),
    #f4f8ff;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#fluid{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
body.no-webgl #fluid{display:none}

/* Hidden code layer (2D canvas), revealed near the pointer */
#code{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none}

.veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 62% 52% at 50% 50%, rgba(255,255,255,.5), rgba(255,255,255,0) 72%);
}

/* Stage — perfectly framed, no scroll */
.stage{
  position:fixed;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  gap:clamp(14px,2.4vh,30px);
  padding:max(20px,4vh) clamp(18px,5vw,40px) max(20px,5vh);
  pointer-events:none; /* let bg receive hover; re-enable on interactives */
}
.stage a,.stage .svc{pointer-events:auto}

/* Brand — frosted glass frame around the logo */
.brand{
  display:inline-flex;align-items:center;justify-content:center;
  padding:clamp(14px,2.2vh,22px) clamp(24px,3.6vw,44px);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.22));
  border:1px solid rgba(255,255,255,.75);
  box-shadow:
    0 16px 40px rgba(13,27,42,.14),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 6px rgba(13,27,42,.05);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;
}
.brand:hover{
  transform:translateY(-3px);
  border-color:rgba(26,159,255,.5);
  box-shadow:
    0 22px 50px rgba(26,159,255,.22),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 6px rgba(13,27,42,.05);
}
.brand img{height:clamp(26px,4.4vh,40px);width:auto;filter:drop-shadow(0 4px 10px rgba(13,27,42,.10))}

/* Title */
.title{
  margin:0;font-weight:900;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(2.2rem,8vw,5rem);
  background:linear-gradient(180deg,#0d1b2a,#23364d);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.title .dot{color:var(--blue);-webkit-text-fill-color:var(--blue)}

/* Lead */
.lead{
  margin:0;max-width:30ch;color:var(--muted);font-weight:500;
  font-size:clamp(1rem,2.4vw,1.4rem);line-height:1.5;
}
.lead strong{color:var(--ink);font-weight:700}

/* Services */
.services{
  display:flex;gap:clamp(10px,1.6vw,18px);flex-wrap:wrap;justify-content:center;
  margin-top:clamp(4px,1vh,12px);
}
.svc{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:clamp(130px,20vw,168px);
  padding:clamp(14px,2.2vh,22px) 14px;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.5);border-radius:20px;
  box-shadow:0 14px 34px rgba(13,27,42,.08),inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s,background .35s;
}
.svc:hover{
  transform:translateY(-8px) scale(1.03);
  border-color:rgba(var(--ac,26,159,255),.6);
  box-shadow:0 26px 50px rgba(var(--ac,26,159,255),.28),inset 0 1px 0 rgba(255,255,255,.85);
  background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.14));
}
.svc-ico{
  width:clamp(40px,5.4vh,52px);height:clamp(40px,5.4vh,52px);
  display:grid;place-items:center;border-radius:14px;margin-bottom:2px;
  color:rgb(var(--ac,26,159,255));
  background:rgba(var(--ac,26,159,255),.12);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s;
}
.svc:hover .svc-ico{transform:scale(1.1) rotate(-4deg);background:rgba(var(--ac,26,159,255),.18)}
.svc-ico svg{width:55%;height:55%}
.svc-name{font-weight:700;font-size:clamp(.95rem,1.6vw,1.08rem)}
.svc-desc{font-size:clamp(.78rem,1.3vw,.9rem);color:var(--muted)}

/* CTA email */
.cta{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:clamp(6px,1.4vh,16px);
  padding:clamp(12px,1.7vh,15px) clamp(20px,3vw,28px);
  font-weight:700;font-size:clamp(1rem,2vw,1.25rem);
  color:#fff;border-radius:999px;
  background:linear-gradient(135deg,#1A9FFF,#19D3E3);
  box-shadow:0 14px 30px rgba(26,159,255,.34);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,filter .25s;
}
.cta svg{width:1.15em;height:1.15em}
.cta:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 40px rgba(26,159,255,.45);filter:saturate(115%)}

/* Footer */
.foot{
  position:fixed;left:0;right:0;bottom:max(12px,2.2vh);z-index:3;
  text-align:center;color:var(--muted);font-size:.8rem;letter-spacing:.02em;
  pointer-events:none;
}

/* ===== Entrance reveals (directional slides) ===== */
.reveal{opacity:0;animation:reveal .95s cubic-bezier(.2,.75,.2,1) both;animation-delay:var(--d,0s)}
.from-top   {--ty:-46px;--tx:0}
.from-bottom{--ty:46px;--tx:0}
.from-left  {--tx:-60px;--ty:0}
.from-right {--tx:60px;--ty:0}
@keyframes reveal{
  0%{opacity:0;transform:translate(var(--tx,0),var(--ty,0)) scale(.96);filter:blur(6px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}

/* ===== Mobile: bigger, more dramatic slides ===== */
@media (max-width:760px){
  .from-top{--ty:-70px} .from-bottom{--ty:70px}
  .from-left{--tx:-100vw} .from-right{--tx:100vw}
  .services{flex-direction:column;width:100%;max-width:340px}
  .svc{flex-direction:row;width:100%;justify-content:flex-start;gap:14px;padding:14px 18px;text-align:left}
  .svc-ico{margin-bottom:0}
  .svc-desc{margin-left:auto;text-align:right}
  .stage{gap:clamp(12px,1.8vh,20px);justify-content:center}
  .title{font-size:clamp(2.1rem,11vw,3.2rem)}
}

/* short landscape phones */
@media (max-height:520px){
  .services{flex-direction:row}
  .svc{width:clamp(110px,28vw,150px)}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;filter:none;transform:none}
  .svc,.cta,.svc-ico{transition:none}
}