.ps-syn {
position: relative; overflow: hidden;
contain: layout paint;
padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
min-height: 480px;
background: linear-gradient(180deg, #0c0420 0%, #1a052e 60%, #2a0843 100%);
color: #f0e6ff;
font-family: 'Inter', system-ui, sans-serif;
}
.ps-syn-grid-bg {
position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
width: 220%; height: 50%;
background:
repeating-linear-gradient(0deg, transparent 0, transparent 24px, rgba(236,72,153,0.4) 24px, rgba(236,72,153,0.4) 25px),
repeating-linear-gradient(90deg, transparent 0, transparent 24px, rgba(34,211,238,0.4) 24px, rgba(34,211,238,0.4) 25px);
transform: translateX(-50%) perspective(700px) rotateX(60deg);
transform-origin: center top;
mask-image: linear-gradient(180deg, transparent 0%, #000 35%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%);
z-index: 0;
}
.ps-syn-sun {
position: absolute; left: 50%; top: 30%;
transform: translateX(-50%);
width: 360px; height: 360px;
border-radius: 50%;
background:
repeating-linear-gradient(180deg, transparent 0, transparent 16px, #0c0420 16px, #0c0420 19px),
linear-gradient(180deg, #fde68a 0%, #f59e0b 30%, #ec4899 60%, #a855f7 90%);
filter: blur(0.4px);
opacity: 0.55;
z-index: 0;
}
.ps-syn-head { position: relative; z-index: 2; text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.ps-syn-eye {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 700; letter-spacing: 0.4em;
color: #22d3ee; margin-bottom: 14px;
text-shadow: 0 0 8px #22d3ee;
}
.ps-syn-head h2 {
font-size: clamp(28px, 5vw, 48px); font-weight: 800;
letter-spacing: -0.02em; margin: 0;
background: linear-gradient(180deg, #fff 0%, #fff 50%, #f9a8d4 50%, #ec4899 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
text-shadow: 0 0 30px rgba(236,72,153,0.5);
}
.ps-syn-head h2 em { font-style: italic; }
.ps-syn-grid {
position: relative; z-index: 2;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px; max-width: 940px; margin: 0 auto;
align-items: center;
}
.ps-syn-card {
position: relative;
background: rgba(12,4,32,0.7);
border: 1.5px solid #ec4899;
border-radius: 4px;
padding: 22px 20px 20px;
display: flex; flex-direction: column;
box-shadow: 0 0 0 1px rgba(236,72,153,0.4) inset, 0 0 24px rgba(236,72,153,0.3);
backdrop-filter: blur(6px);
}
.ps-syn-pri { border-color: #22d3ee; box-shadow: 0 0 0 1px rgba(34,211,238,0.5) inset, 0 0 30px rgba(34,211,238,0.5); }
.ps-syn-tag {
position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
background: #0c0420; color: #22d3ee;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
padding: 3px 12px;
border: 1px solid #22d3ee;
text-shadow: 0 0 6px #22d3ee;
}
.ps-syn-card h3 {
font-family: 'JetBrains Mono', monospace;
font-size: 14px; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase; margin: 0 0 12px;
color: #ec4899;
text-shadow: 0 0 8px rgba(236,72,153,0.7);
}
.ps-syn-pri h3 { color: #22d3ee; text-shadow: 0 0 8px rgba(34,211,238,0.7); }
.ps-syn-price {
font-family: 'JetBrains Mono', monospace;
font-size: 42px; font-weight: 800; letter-spacing: -0.02em;
margin-bottom: 18px; color: #fff;
text-shadow: 0 0 12px rgba(236,72,153,0.6);
}
.ps-syn-pri .ps-syn-price { text-shadow: 0 0 12px rgba(34,211,238,0.6); }
.ps-syn-card ul {
list-style: none; padding: 0; margin: 0 0 20px; flex: 1;
font-size: 13px; line-height: 1.95; color: #d6c8ee;
font-family: 'JetBrains Mono', monospace;
}
.ps-syn-card ul li::before { content: '▸ '; color: #ec4899; }
.ps-syn-pri ul li::before { color: #22d3ee; }
.ps-syn-cta {
display: block; text-align: center;
padding: 10px 14px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; text-decoration: none;
background: transparent; color: #ec4899;
border: 1.5px solid #ec4899;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.ps-syn-cta-pri { color: #22d3ee; border-color: #22d3ee; }
.ps-syn-cta:hover { background: #ec4899; color: #0c0420; box-shadow: 0 0 16px #ec4899; }
.ps-syn-cta-pri:hover { background: #22d3ee; color: #0c0420; box-shadow: 0 0 16px #22d3ee; }
.ps-syn-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 820px) {
.ps-syn-grid { grid-template-columns: 1fr; max-width: 360px; }
.ps-syn-sun { width: 240px; height: 240px; top: 22%; }
}
@media (prefers-reduced-motion: reduce) {
.ps-syn-cta { transition: none; }
}