:root{
  --bg:#050817;
  --bg-deep:#02040d;
  --panel:rgba(9,14,31,.72);
  --text:#f7fbff;
  --muted:#aeb8ce;
  --cyan:#00d9ff;
  --blue:#1478ff;
  --pink:#ff008c;
  --magenta:#d500ff;
  --line:rgba(100,210,255,.16);
  --max:1160px;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)}
body{
  background:
    radial-gradient(ellipse at 50% 16%, rgba(0,217,255,.18), transparent 31%),
    radial-gradient(ellipse at 8% 25%, rgba(255,0,140,.20), transparent 34%),
    radial-gradient(ellipse at 92% 25%, rgba(255,0,140,.20), transparent 34%),
    radial-gradient(circle at 50% 85%, rgba(20,120,255,.12), transparent 35%),
    linear-gradient(180deg,#080716 0%,#030610 55%,#02040d 100%);
  overflow-x:hidden;
}

body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.18;
  background-image:
    linear-gradient(rgba(0,217,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,217,255,.08) 1px,transparent 1px);
  background-size:55px 55px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}

body:after{
  content:"";
  position:fixed;top:-15%;left:50%;width:900px;height:500px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(0,217,255,.07),transparent);
  filter:blur(35px);pointer-events:none;
}

a{color:inherit;text-decoration:none}
.page{min-height:100vh;display:flex;flex-direction:column}

header{
  height:76px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(0,217,255,.14);
  background:rgba(2,4,13,.68);backdrop-filter:blur(16px);
  position:relative;z-index:5;
}

.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.04em}
.brand-mark{
  width:40px;height:40px;display:grid;place-items:center;border-radius:10px;
  border:1px solid rgba(0,217,255,.75);
  color:#fff;background:linear-gradient(135deg,rgba(0,217,255,.18),rgba(255,0,140,.14));
  box-shadow:0 0 20px rgba(0,217,255,.25),inset 0 0 18px rgba(255,0,140,.12);
}
.brand span{font-size:18px}
.back{font-size:13px;color:#b9c3d7;transition:.2s}
.back:hover{color:#fff;text-shadow:0 0 14px rgba(0,217,255,.7)}

main{flex:1;display:grid;place-items:center;padding:70px 20px 85px}
.hero{width:min(var(--max),100%);text-align:center;position:relative}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;padding:9px 15px;
  border:1px solid rgba(0,217,255,.38);border-radius:999px;
  color:#7cecff;background:rgba(0,217,255,.06);
  font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 0 25px rgba(0,217,255,.08);
}
.dot{
  width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 7px var(--cyan),0 0 18px var(--cyan);
}

h1{
  margin:25px auto 0;max-width:1000px;
  font-size:clamp(43px,7.4vw,88px);
  line-height:.92;
  letter-spacing:-.06em;font-weight:950;
  text-transform:uppercase;
  text-shadow:0 0 35px rgba(0,217,255,.12);
}

h1 .line-blue{
  display:block;
  background:linear-gradient(90deg,#00d9ff 0%,#7eefff 38%,#1478ff 68%,#d500ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(0,217,255,.22));
}

h1 .line-white{display:block;color:#f8fbff}

.subtitle{
  max-width:760px;margin:50px auto 38px;color:var(--muted);
  font-size:clamp(16px,2vw,19px);line-height:1.65;
}
.subtitle strong{color:#e7faff}

.glow{
  position:absolute;width:330px;height:110px;border-radius:50%;
  background:linear-gradient(90deg,rgba(255,0,140,.38),rgba(0,217,255,.38));
  filter:blur(45px);opacity:.45;
}

.ring{
  width:220px;height:220px;border-radius:50%;position:absolute;
  border:2px solid rgba(0,217,255,.20);
  box-shadow:0 0 70px rgba(0,217,255,.12),inset 0 0 50px rgba(255,0,140,.06);
}
.ring.r2{width:330px;height:330px;border-color:rgba(255,0,140,.10)}
.ring.r3{width:470px;height:180px;border-radius:50%;border-color:rgba(20,120,255,.08)}

.cooler{
  width:310px;height:136px;border:1px solid rgba(100,230,255,.35);
  border-radius:23px;position:relative;
  background:linear-gradient(145deg,rgba(23,32,58,.96),rgba(5,9,19,.98));
  box-shadow:
    0 28px 70px rgba(0,0,0,.65),
    0 0 45px rgba(0,217,255,.12),
    inset 0 0 30px rgba(20,120,255,.09);
  transform:perspective(700px) rotateX(8deg);
}

.cooler:before{
  content:"";position:absolute;inset:14px;border-radius:15px;
  border:1px solid rgba(255,255,255,.07);
}

.cooler:after{
  content:"";position:absolute;left:25px;right:25px;top:19px;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--pink),transparent);
  box-shadow:0 0 12px rgba(0,217,255,.8);
}

.cpu{
  position:absolute;width:84px;height:84px;left:112px;top:28px;border-radius:50%;
  border:5px solid #1f2a42;background:#050912;
  box-shadow:0 0 0 1px #45526b,0 0 28px rgba(0,217,255,.48),0 0 52px rgba(255,0,140,.20);
}
.cpu:after{
  content:"";position:absolute;inset:13px;border-radius:50%;
  border:2px solid var(--cyan);
  box-shadow:0 0 10px var(--cyan),0 0 25px rgba(255,0,140,.55);
}

.tube{
  position:absolute;width:135px;height:72px;
  border:7px solid rgba(0,217,255,.78);
  border-left-color:transparent;border-bottom-color:transparent;
  border-radius:0 75px 0 0;right:-94px;top:22px;
  transform:rotate(19deg);
  filter:drop-shadow(0 0 8px rgba(0,217,255,.7));
}
.tube.t2{
  left:-91px;right:auto;top:61px;transform:rotate(165deg);
  border-color:rgba(255,0,140,.70);border-left-color:transparent;border-bottom-color:transparent;
  filter:drop-shadow(0 0 8px rgba(255,0,140,.65));
}

.cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:15px;
  max-width:930px;margin:0 auto;
}

.card{
  padding:23px;text-align:left;
  background:linear-gradient(145deg,rgba(11,19,39,.78),rgba(5,9,20,.78));
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 14px 45px rgba(0,0,0,.18);
  position:relative;overflow:hidden;
}
.card:before{
  content:"";position:absolute;top:0;left:15%;right:15%;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--pink),transparent);
  opacity:.7;
}
.card .icon{
  width:35px;height:35px;display:grid;place-items:center;margin-bottom:13px;
  border:1px solid rgba(0,217,255,.22);border-radius:9px;
  background:rgba(0,217,255,.05);font-size:16px;
}
.card h3{font-size:15px;margin:0 0 7px}
.card p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}

.cta-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:35px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 23px;
  border-radius:10px;font-size:13px;font-weight:900;transition:.22s;
}
.btn svg{
  width:17px;
  height:17px;
  margin-right:8px;
  stroke:currentColor;
  transition:transform .25s ease
}
.btn:hover svg{
  transform:translateX(2px) scale(1.08)
}
.btn-primary:hover{
  transform:translateY(-2px);
  filter:brightness(1.1);
  box-shadow:0 14px 35px rgba(0,180,255,.25)
}
.btn-secondary{
  border:1px solid rgba(0,217,255,.24);background:rgba(255,255,255,.025);color:#d5deed;
}
.btn-secondary:hover{border-color:rgba(0,217,255,.5);background:rgba(0,217,255,.06)}

footer{
  border-top:1px solid rgba(0,217,255,.10);padding:22px 28px;text-align:center;
  color:#737f96;font-size:12px;background:rgba(2,4,13,.4);
}
footer strong{color:#aeb9ce}

@media(max-width:720px){
  header{height:68px;padding:0 17px}
  .brand span{font-size:16px}.back{font-size:12px}
  main{padding:48px 16px 60px}
  .visual{height:180px;margin:38px auto 28px}
  .ring{width:160px;height:160px}.ring.r2{width:245px;height:245px}.ring.r3{width:330px;height:130px}
  .cooler{transform:scale(.75) perspective(700px) rotateX(8deg)}
  .cards{grid-template-columns:1fr}
  .subtitle{line-height:1.55}
}

/* =========================
   Animated Lucide Icons
   ========================= */
.icon {
  position: relative;
  overflow: visible;
}

.icon svg {
  width: 19px;
  height: 19px;
  stroke: var(--cyan);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 5px rgba(0,217,255,.65));
  transition: transform .35s ease, filter .35s ease;
}

.card:hover .icon svg {
  transform: scale(1.13) rotate(-5deg);
  filter:
    drop-shadow(0 0 5px rgba(0,217,255,.85))
    drop-shadow(0 0 13px rgba(213,0,255,.55));
}

/* CPU / Settings */
.card:nth-child(1) .icon svg {
  animation: icon-settings 3s ease-in-out infinite;
}

/* Compatibility / Check */
.card:nth-child(2) .icon svg {
  animation: icon-check 2.5s ease-in-out infinite;
}

/* Cart / Arrow */
.card:nth-child(3) .icon svg {
  animation: icon-cart 2.8s ease-in-out infinite;
}

@keyframes icon-settings {
  0%, 100% { transform: rotate(0deg) scale(1); }
  35% { transform: rotate(25deg) scale(1.06); }
  70% { transform: rotate(-12deg) scale(1); }
}

@keyframes icon-check {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.08); }
  42% { transform: scale(.94); }
  60% { transform: scale(1.08); }
}

@keyframes icon-cart {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(2px); }
  30% { transform: translateX(-2px); }
  45% { transform: translateX(2px); }
  60% { transform: translateX(0) rotate(-3deg); }
}

/* Neon pulse around icon container */
.card .icon::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 13px;
  border: 1px solid rgba(0,217,255,0);
  animation: icon-pulse 2.8s ease-out infinite;
  pointer-events: none;
}

.card:nth-child(2) .icon::after {
  animation-delay: .8s;
}

.card:nth-child(3) .icon::after {
  animation-delay: 1.6s;
}

@keyframes icon-pulse {
  0% {
    opacity: .75;
    transform: scale(.9);
    border-color: rgba(0,217,255,.42);
    box-shadow: 0 0 0 rgba(0,217,255,0);
  }
  65% {
    opacity: 0;
    transform: scale(1.3);
    border-color: rgba(213,0,255,.12);
    box-shadow: 0 0 24px rgba(0,217,255,.18);
  }
  100% { opacity: 0; }
}

/* =========================
   Neon animated buttons
   ========================= */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255,255,255,.55) 43%,
    rgba(255,255,255,.08) 50%,
    transparent 67%
  );
  transform: translateX(-125%);
  animation: button-shine 3.6s ease-in-out infinite;
  z-index: -1;
}

.btn-primary {
  animation: neon-button 2.5s ease-in-out infinite;
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(
    90deg,
    #00d9ff,
    #1478ff,
    #d500ff,
    #ff008c,
    #00d9ff
  );
  background-size: 300% 100%;
  animation: neon-border 3s linear infinite;
  z-index: -2;
  opacity: .95;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.015);
  filter: brightness(1.15);
  box-shadow:
    0 0 12px rgba(0,217,255,.7),
    0 0 30px rgba(20,120,255,.4),
    0 0 55px rgba(213,0,255,.28);
}

.btn-secondary {
  animation: secondary-pulse 3.2s ease-in-out infinite;
}

.btn-secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(0,217,255,.28);
  box-shadow: inset 0 0 15px rgba(0,217,255,.04);
  animation: secondary-border 2.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes button-shine {
  0%, 48% { transform: translateX(-125%); }
  68%, 100% { transform: translateX(125%); }
}

@keyframes neon-border {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes neon-button {
  0%, 100% {
    box-shadow:
      0 10px 30px rgba(0,180,255,.18),
      0 0 18px rgba(213,0,255,.08);
  }
  50% {
    box-shadow:
      0 10px 32px rgba(0,217,255,.30),
      0 0 28px rgba(213,0,255,.20);
  }
}

@keyframes secondary-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(0,217,255,0); }
  50% { box-shadow: 0 0 22px rgba(0,217,255,.08); }
}

@keyframes secondary-border {
  0%, 100% { border-color: rgba(0,217,255,.22); }
  50% { border-color: rgba(0,217,255,.55); }
}

@media (prefers-reduced-motion: reduce) {
  .card .icon svg,
  .card .icon::after,
  .btn,
  .btn::before,
  .btn::after {
    animation: none !important;
  }
}