/* CRYSTAL — cristal șlefuit: fațete prismatice, muchii care refractă lumina,
   accent care își schimbă nuanța pe măsură ce cobori în pagină. */
:root[data-mode="night"]{
  --bg:#080b14; --bg2:#0e1322; --surface:#0f1526; --line:rgba(150,190,255,.18);
  --ink:#e7edff; --ink2:#8ea0c8; --accent:#7fd8ff; --on-accent:#04121c;
  --imgbg:#f2f7ff; --headbg:rgba(8,11,20,.78); --cardbg:rgba(18,26,46,.62);
  --blur:blur(10px); --shadow:0 10px 34px rgba(0,20,60,.5);
  --herobg:transparent; --facet:rgba(160,210,255,.30);
}
:root[data-mode="day"]{
  --bg:#eef4ff; --bg2:#e2ecff; --surface:rgba(255,255,255,.74); --line:rgba(90,140,220,.24);
  --ink:#0d1a33; --ink2:#51689c; --accent:#2b7fd4; --on-accent:#ffffff;
  --imgbg:#ffffff; --headbg:rgba(238,244,255,.8); --cardbg:rgba(255,255,255,.72);
  --blur:blur(10px); --shadow:0 10px 30px rgba(40,90,170,.16);
  --herobg:transparent; --facet:rgba(90,150,235,.28);
}
body{position:relative;overflow-x:hidden}
/* fațetele de cristal din fundal */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(127deg, transparent 0 42%, var(--facet) 42% 42.4%, transparent 42.4%),
    linear-gradient(-118deg, transparent 0 58%, var(--facet) 58% 58.3%, transparent 58.3%),
    linear-gradient(74deg,  transparent 0 30%, var(--facet) 30% 30.25%, transparent 30.25%),
    linear-gradient(-63deg, transparent 0 71%, var(--facet) 71% 71.3%, transparent 71.3%);
  opacity:.5;
}
/* halou prismatic */
body::after{
  content:"";position:fixed;inset:-30%;z-index:-3;pointer-events:none;
  background:
    radial-gradient(40vw 40vw at 18% 12%, rgba(127,216,255,.35), transparent 62%),
    radial-gradient(36vw 36vw at 82% 30%, rgba(190,140,255,.30), transparent 62%),
    radial-gradient(44vw 44vw at 50% 92%, rgba(120,255,220,.24), transparent 64%);
  filter:blur(70px);
}
.top{border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.brand-mark{
  background:linear-gradient(135deg,#7fd8ff,#b98cff 45%,#7cffd4);
  box-shadow:0 0 18px rgba(127,216,255,.55);color:#04121c;
  clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%);border-radius:0
}
.hero h1{
  background:linear-gradient(100deg,var(--ink) 20%,var(--accent) 50%,#b98cff 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.card{
  border:1px solid var(--line);backdrop-filter:var(--blur);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
.card:hover{
  border-color:var(--accent);transform:translateY(-3px);
  box-shadow:0 0 0 1px var(--accent), 0 16px 44px rgba(60,140,255,.28)
}
.badge-drop{
  background:linear-gradient(135deg,#7fd8ff,#b98cff);color:#04121c;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);border-radius:0
}
.btn{
  background:linear-gradient(135deg,var(--accent),#b98cff);color:var(--on-accent);
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);border-radius:0;
  box-shadow:0 6px 22px rgba(120,170,255,.35)
}
.price{text-shadow:0 0 22px color-mix(in srgb, var(--accent) 45%, transparent)}
.ticker{border:1px solid var(--line);backdrop-filter:var(--blur)}
.ticker>div{background:var(--cardbg)}
.pdp-img{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.searchbox,.hero-search{background:var(--cardbg);backdrop-filter:var(--blur);border-color:var(--line)}