/* ═══════════════════════════════════════════════════════════════════════
   NOETIC — εφέ φωτός κουμπιών «όπως στην εφαρμογή» (ClassicFxButton, owner 25/9)
   + ενότητα «Τι νέο στην εφαρμογή» (r99, 08/11/2026).
   Παλέτα X6Theme: φόντο #020617 · επιφάνειες #0F172A/#1E293B · κυανό #00E5FF ·
   FX #7FE7FF/#4DD0E1 · δευτερεύον #94A3B8 · πορτοκαλί #FF6B35.
   ═══════════════════════════════════════════════════════════════════════ */
.wn { --wn-bg:#020617; --wn-s1:#0f172a; --wn-s2:#1e293b; --wn-cyan:#00e5ff; --wn-fx:#7fe7ff; --wn-fx2:#4dd0e1;
  --wn-dim:#94a3b8; --wn-orange:#ff6b35; --wn-line:rgba(127,231,255,.18);
  position:relative; padding:3.5rem 0 3rem; background:
  radial-gradient(1200px 420px at 50% -10%, rgba(0,229,255,.10), transparent 70%),
  linear-gradient(180deg, rgba(2,6,23,.0), rgba(2,6,23,.55) 30%, rgba(2,6,23,0)); }

/* ---------- Εφέ κουμπιών ---------- */
.fx { position:relative; isolation:isolate; transition:transform .45s cubic-bezier(.3,1.9,.5,1); -webkit-tap-highlight-color:transparent; }
.fx.pressed { transform:scale(.9); transition:transform 70ms ease-out; }
.fx::before { content:""; position:absolute; inset:-30%; z-index:-1; pointer-events:none; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.22), transparent); animation:fx-breathe 3.2s ease-in-out infinite alternate; }
@keyframes fx-breathe { from { opacity:.45; } to { opacity:1; } }
.fx-clip { position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; }
.fx-clip::after { content:""; position:absolute; top:-40%; bottom:-40%; left:0; width:45%; mix-blend-mode:plus-lighter;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  transform:translateX(-160%) skewX(-20deg); animation:fx-shimmer 7s linear infinite; animation-delay:var(--stagger,0s); }
@keyframes fx-shimmer { 0% { transform:translateX(-160%) skewX(-20deg); } 12.86%,100% { transform:translateX(360%) skewX(-20deg); } }
.fx-bloom { position:absolute; left:var(--x,50%); top:var(--y,50%); width:240%; aspect-ratio:1; border-radius:50%; opacity:0; mix-blend-mode:plus-lighter;
  transform:translate(-50%,-50%) scale(.3); background:radial-gradient(closest-side, #fff, rgba(127,231,255,.6), transparent); }
.fx-bloom.go { animation:fx-bloom 480ms linear; }
@keyframes fx-bloom { from { opacity:.55; transform:translate(-50%,-50%) scale(.3); } to { opacity:0; transform:translate(-50%,-50%) scale(1.2); } }
.fx-primary::before { inset:-45%; background:radial-gradient(closest-side, rgba(127,231,255,.55), transparent); animation-duration:1.6s; }
.fx-primary::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; border:2px solid var(--wn-fx,#7fe7ff); pointer-events:none; animation:fx-pulse 1.6s linear infinite; }
@keyframes fx-pulse { from { transform:scale(1); opacity:.6; } to { transform:scale(1.12,1.35); opacity:0; } }

.wn-btn { display:inline-flex; align-items:center; gap:.45rem; font:600 .9rem/1 inherit; color:#e2f9ff; text-decoration:none;
  background:rgba(15,23,42,.75); border:1px solid rgba(127,231,255,.38); border-radius:12px; padding:.72rem 1.05rem; cursor:pointer;
  box-shadow:0 0 14px rgba(0,229,255,.12); }
.wn-btn:hover { border-color:var(--wn-fx); color:#fff; box-shadow:0 0 20px rgba(0,229,255,.28); }
.wn-btn:focus-visible { outline:3px solid var(--wn-fx); outline-offset:3px; }
.wn-btn--primary { color:#020617; background:linear-gradient(180deg,#5ff0ff,var(--wn-cyan) 55%,#26c6da); border:0; font-size:1.02rem; padding:.95rem 1.6rem; border-radius:14px; box-shadow:0 0 22px rgba(0,229,255,.35); }
.wn-btn--primary:hover { color:#020617; }
.wn-btn .wn-arrow { transition:transform .3s; }
.wn-btn:hover .wn-arrow { transform:translateX(3px); }

/* ---------- Φωτεινή ακμή στις μπάρες ---------- */
.bar-light { position:relative; }
.bar-light::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:rgba(255,255,255,.12); }
.bar-light::after { content:""; position:absolute; left:0; top:0; height:1px; width:35%; background:linear-gradient(90deg,transparent,rgba(127,231,255,.85),transparent); animation:bar-sweep 5.2s linear infinite; }
@keyframes bar-sweep { from { transform:translateX(-100%); } to { transform:translateX(286%); } }

/* ---------- Ενότητα «Τι νέο» ---------- */
.wn-head { text-align:center; max-width:820px; margin:0 auto 2.2rem; }
.wn-kicker { display:inline-block; font:700 .72rem/1 inherit; letter-spacing:.16em; color:var(--wn-fx); padding:.45rem .8rem; border:1px solid var(--wn-line); border-radius:999px; background:rgba(0,229,255,.06); }
.wn-title { margin:.9rem 0 .6rem; font-size:clamp(1.6rem,3.2vw,2.3rem); color:#fff; text-shadow:0 0 28px rgba(0,229,255,.25); }
.wn-lead { color:var(--wn-dim); font-size:1rem; line-height:1.6; margin:0; }
.wn-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.1rem; max-width:1180px; margin:0 auto; padding:0 1rem; }
.wn-card { position:relative; display:flex; flex-direction:column; gap:.7rem; padding:1.1rem 1.1rem 1.2rem; border-radius:18px;
  background:linear-gradient(160deg, rgba(30,41,59,.72), rgba(15,23,42,.88)); border:1px solid var(--wn-line); overflow:hidden;
  transition:transform .35s cubic-bezier(.3,1.6,.5,1), border-color .3s, box-shadow .3s; }
.wn-card:hover { transform:translateY(-4px); border-color:rgba(127,231,255,.45); box-shadow:0 10px 34px rgba(0,229,255,.12); }
.wn-art { height:132px; border-radius:12px; background:radial-gradient(circle at 70% 20%, rgba(0,229,255,.14), transparent 60%), #020617; border:1px solid rgba(127,231,255,.12); overflow:hidden; }
.wn-art svg { width:100%; height:100%; display:block; }
.wn-card h3 { margin:0; font-size:1.06rem; color:#fff; letter-spacing:.01em; }
.wn-card p { margin:0; font-size:.86rem; color:var(--wn-dim); line-height:1.55; flex:1; }
.wn-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.2rem; }
.wn-chip { font:600 .7rem/1.2 inherit; padding:.35rem .55rem; border-radius:8px; border:1px solid; white-space:normal; max-width:60%; }
.wn-chip--ok { color:#6ee7b7; border-color:rgba(110,231,183,.35); background:rgba(16,185,129,.08); }
.wn-chip--y { color:#fcd34d; border-color:rgba(252,211,77,.35); background:rgba(245,158,11,.08); }
.wn-ver { font:600 .66rem/1 inherit; color:var(--wn-fx2); letter-spacing:.08em; }
.wn-foot { text-align:center; margin-top:2.2rem; display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.wn-note { max-width:860px; margin:0 auto; font-size:.76rem; color:#64748b; line-height:1.55; }

/* ---------- Κινήσεις γραφικών ---------- */
.wn-sweep { animation:wn-sweep 3.6s ease-in-out infinite; }
@keyframes wn-sweep { 0%,100% { transform:translateX(0); } 50% { transform:translateX(70px); } }
.wn-pulse { transform-box:fill-box; transform-origin:center; animation:wn-pulse 2.4s ease-out infinite; }
@keyframes wn-pulse { from { transform:scale(.6); opacity:.9; } to { transform:scale(1.8); opacity:0; } }
.wn-blink { animation:wn-blink 1.6s ease-in-out infinite alternate; }
@keyframes wn-blink { from { opacity:.35; } to { opacity:1; } }
.wn-rot { transform-box:fill-box; transform-origin:center; animation:wn-rot 14s linear infinite; }
@keyframes wn-rot { to { transform:rotate(360deg); } }
.wn-dash { stroke-dasharray:6 6; animation:wn-dash 1.2s linear infinite; }
@keyframes wn-dash { to { stroke-dashoffset:-12; } }
.wn-wave { animation:wn-wave 2.2s linear infinite; }
@keyframes wn-wave { from { transform:translateX(0); } to { transform:translateX(-40px); } }
.wn-bar { transform-box:fill-box; transform-origin:bottom; animation:wn-bar 1.4s ease-in-out infinite alternate; }
@keyframes wn-bar { from { transform:scaleY(.35); } to { transform:scaleY(1); } }

@media (max-width:640px) { .wn-chip { max-width:100%; } .wn-art { height:118px; } }
@media (prefers-reduced-motion:reduce) {
  .fx::before { animation:none; opacity:.75; }
  .fx::after, .fx-clip::after, .bar-light::after { animation:none; display:none; }
  .fx-bloom { display:none; }
  .fx, .fx.pressed, .wn-card, .wn-card:hover { transform:none; transition:none; }
  .wn-sweep, .wn-pulse, .wn-blink, .wn-rot, .wn-dash, .wn-wave, .wn-bar { animation:none; }
}