:root{
  /* dark dark dark grayish blue */
  --bg-0:#0a0e16;
  --bg-1:#0d1420;
  --bg-2:#111a29;
  /* lighter blue wordmark */
  --blue-0:#6f9fe8;
  --blue-1:#9dc1f5;
  --blue-2:#5b86cf;
  --ink-dim:#7f93b3;
  --field-bg:rgba(157,193,245,0.05);
  --field-br:rgba(157,193,245,0.16);
  --btn-blue:#4d6da3;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg-0);
  color:var(--blue-1);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

/* ---- drifting aura background ---- */
.aura{
  position:fixed; inset:-30% -20%;
  z-index:0; pointer-events:none;
  filter:blur(70px);
}
.aura span{
  position:absolute; border-radius:50%;
  mix-blend-mode:screen; opacity:.55;
}
.a1{width:52vw;height:52vw;left:8%;top:6%;
  background:radial-gradient(circle at 50% 50%, #2b4c86 0%, rgba(43,76,134,0) 68%);
  animation:drift1 19s ease-in-out infinite;}
.a2{width:46vw;height:46vw;right:4%;top:18%;
  background:radial-gradient(circle at 50% 50%, #3a6bb0 0%, rgba(58,107,176,0) 66%);
  animation:drift2 23s ease-in-out infinite;}
.a3{width:60vw;height:60vw;left:22%;bottom:-8%;
  background:radial-gradient(circle at 50% 50%, #24406f 0%, rgba(36,64,111,0) 70%);
  animation:drift3 27s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(7vw,4vh) scale(1.12)}66%{transform:translate(-4vw,6vh) scale(.95)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8vw,5vh) scale(1.15)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(6vw,-5vh) scale(1.08)}75%{transform:translate(-5vw,3vh) scale(.97)}}

/* subtle full-page grain over everything */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.06; 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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 8s steps(6) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-2%)}
  60%{transform:translate(-2%,4%)}80%{transform:translate(4%,-3%)}100%{transform:translate(0,0)}
}

.wrap{position:relative; z-index:3; width:100%; text-align:center; padding:24px}

/* ---- wordmark, grainy blue fill ---- */
.mark{
  display:inline-block;
  font-weight:800;
  letter-spacing:.02em;
  line-height:.9;
  /* 50% of viewport width on desktop, 80% on mobile — driven by clamp */
  font-size:clamp(3rem, 13vw, 11rem);
  position:relative;
  font-family:'Sora',sans-serif;
  /* animated gradient: sweeps a lighter band across the letters */
  background:linear-gradient(100deg,
    var(--blue-2) 0%, var(--blue-0) 30%, #cfe0fb 48%,
    var(--blue-0) 66%, var(--blue-2) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:shimmer 7s linear infinite, pulseglow 4.5s ease-in-out infinite;
  will-change:background-position, filter;
  transform:translateZ(0);
  user-select:none;
}

/* grain baked INTO the letters via a clipped overlay */
.mark::after{
  content:attr(data-word);
  position:absolute; inset:0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; opacity:.5;
  animation:grainshift 5s steps(5) infinite;
}
/* a soft moving highlight that travels across the wordmark */
.mark::before{
  content:attr(data-word);
  position:absolute; inset:0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background:linear-gradient(105deg,
    transparent 38%, rgba(220,235,255,.85) 50%, transparent 62%);
  background-size:250% 100%;
  mix-blend-mode:screen;
  animation:sweep 6s ease-in-out infinite;
  will-change:background-position;
  transform:translateZ(0);
  pointer-events:none;
}

/* pulsing outer glow — stronger, breathing */
@keyframes pulseglow{
  0%,100%{filter:drop-shadow(0 0 18px rgba(111,159,232,.22)) drop-shadow(0 0 40px rgba(58,107,176,.12))}
  50%{filter:drop-shadow(0 0 34px rgba(111,159,232,.55)) drop-shadow(0 0 72px rgba(93,134,207,.35))}
}
/* gradient band drifting through the fill */
@keyframes shimmer{0%{background-position:0% 0}50%{background-position:100% 0}100%{background-position:0% 0}}
/* highlight streak sweeping left→right→left */
@keyframes sweep{0%{background-position:130% 0}55%{background-position:-30% 0}100%{background-position:130% 0}}

/* ---- product grid (hidden until EMOTIVUS_SHOW_PRODUCTS = true) ---- */
.products{
  margin-top:60px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:16px;
  width:min(760px, 92vw);
  margin-left:auto; margin-right:auto;
}
.product{
  display:block; text-align:left; text-decoration:none;
  background:var(--field-bg);
  border:1px solid var(--field-br);
  border-radius:16px;
  padding:20px 20px 18px;
  transition:border-color .25s, background .25s, transform .25s;
  position:relative;
}
.product:hover{
  border-color:var(--blue-2);
  background:rgba(157,193,245,.08);
  transform:translateY(-2px);
}
.product .p-kind{
  font:500 10px/1 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim);
}
.product .p-name{
  margin:10px 0 4px;
  font-family:'Sora',sans-serif; font-weight:700; font-size:20px;
  color:var(--blue-1);
}
.product .p-name .p-prefix{color:var(--ink-dim); font-weight:600; margin-right:.35em}
.product .p-tag{
  font:400 13px/1.45 'Inter',sans-serif; color:var(--ink-dim);
}
.product.is-soon{pointer-events:none; opacity:.72}
.product.is-soon .p-soon{
  position:absolute; top:16px; right:16px;
  font:500 10px/1 'Inter',sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue-0); border:1px solid rgba(93,134,207,.4);
  padding:4px 8px; border-radius:999px;
}

/* ---- contact ---- */
.contact-zone{margin-top:52px; display:flex; flex-direction:column; align-items:center}
.contact-btn{
  background:transparent;
  border:1px solid rgba(93,134,207,.5);
  color:var(--blue-0);
  font:500 13px/1 'Inter',sans-serif; letter-spacing:.16em; text-transform:uppercase;
  padding:11px 26px; border-radius:999px; cursor:pointer;
  transition:.3s ease;
}
.contact-btn:hover{color:var(--blue-1); border-color:var(--blue-0); background:rgba(93,134,207,.08)}
.contact-btn[aria-expanded="true"]{border-color:var(--blue-0); color:var(--blue-1)}

.form-panel{
  width:min(420px,90vw);
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .5s cubic-bezier(.16,1,.3,1), opacity .4s ease, margin .5s ease;
  margin-top:0;
}
.form-panel.open{max-height:520px; opacity:1; margin-top:22px}

.form-panel form{display:flex; flex-direction:column; gap:12px; text-align:left}
.form-panel input,.form-panel textarea{
  width:100%; background:var(--field-bg); border:1px solid var(--field-br);
  border-radius:12px; padding:13px 15px;
  color:var(--blue-1); font:400 15px/1.4 'Inter',sans-serif;
  transition:border-color .2s, background .2s;
}
.form-panel input::placeholder,.form-panel textarea::placeholder{color:var(--ink-dim)}
.form-panel input:focus,.form-panel textarea:focus{
  outline:none; border-color:var(--blue-2); background:rgba(157,193,245,.09);
}
.form-panel textarea{resize:vertical; min-height:90px}
.send{
  margin-top:2px; background:var(--btn-blue); border:none; color:#eaf1fb;
  font:600 14px/1 'Inter',sans-serif; letter-spacing:.06em;
  padding:14px; border-radius:12px; cursor:pointer; transition:.25s;
}
.send:hover{background:#5f81bd}
.send:disabled{opacity:.6; cursor:default}

/* glowing confirmation */
.confirm{
  text-align:center; padding:26px 10px;
  color:var(--blue-1); font:500 16px/1.5 'Inter',sans-serif;
  opacity:0; transform:translateY(6px);
  text-shadow:0 0 18px rgba(111,159,232,.55);
  transition:opacity .5s ease, transform .5s ease;
}
.confirm.show{opacity:1; transform:translateY(0); animation:glowpulse 2.2s ease-in-out}
@keyframes glowpulse{0%,100%{text-shadow:0 0 12px rgba(111,159,232,.4)}50%{text-shadow:0 0 34px rgba(111,159,232,.8)}}

.err{color:#e2a0a0; font:400 13px/1.4 'Inter',sans-serif; min-height:1em}

@media (prefers-reduced-motion: reduce){
  .aura span,.grain,.mark,.mark::after,.mark::before{animation:none}
}