/* Gracia Service Pages 1.0.7 – /resources/ coming soon. Reuses gsp-404.css base classes (enqueued together). */
.grs-eyebrow::before { background: var(--gd-yellow, #fec105); box-shadow: 0 0 0 4px rgba(254, 193, 5, .22); }
.grs-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.gd-theme .grs-btn, .grs-btn, .grs-btn:hover, .grs-btn:focus { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 999px; font: 650 1rem/1 var(--body); text-decoration: none !important; white-space: nowrap; transition: transform .25s, background .25s; }
.grs-btn--primary, .grs-btn--primary:hover, .grs-btn--primary:focus { color: var(--i) !important; background: var(--gd-yellow, #fec105); }
.grs-btn--primary:hover { background: #ffd23f; transform: translateY(-2px); }
.grs-btn--dark, .grs-btn--dark:hover, .grs-btn--dark:focus { color: #fff !important; background: var(--i); }
.grs-btn--dark:hover { background: var(--b); transform: translateY(-2px); }
.grs-btn:focus-visible { outline: 3px solid var(--gd-yellow, #fec105); outline-offset: 3px; }
.grs-art { display: flex; justify-content: center; }
.grs-stack { position: relative; width: min(300px, 70vw); aspect-ratio: 4 / 3.4; }
.grs-sheet { position: absolute; inset: 0; border-radius: 18px; border: 2px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .03); }
.grs-sheet--3 { transform: translate(28px, -28px) rotate(6deg); opacity: .35; }
.grs-sheet--2 { transform: translate(14px, -14px) rotate(3deg); opacity: .6; }
.grs-sheet--1 { display: flex; flex-direction: column; gap: 14px; padding: 26px; background: rgba(10, 22, 48, .55); backdrop-filter: blur(2px); }
.grs-l { display: block; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .22); }
.grs-l--h { width: 62%; height: 16px; background: rgba(255, 255, 255, .5); }
.grs-l--s { width: 45%; }
.grs-dots { display: flex; gap: 10px; margin-top: auto; }
.grs-dots i { width: 18px; height: 18px; border-radius: 50%; animation: g404-pulse 2.8s ease-in-out infinite; }
.grs-dots i:nth-child(1) { background: var(--gd-blue-500, #1f63c6); }
.grs-dots i:nth-child(2) { background: var(--gd-green, #48af54); animation-delay: .35s; }
.grs-dots i:nth-child(3) { background: var(--gd-yellow, #fec105); animation-delay: .7s; }
.grs-dots i:nth-child(4) { background: var(--gd-red, #e62b4a); animation-delay: 1.05s; }
@media (max-width: 899px) { .grs-art { order: -1; justify-content: flex-start; } .grs-stack { width: 132px; margin: 12px 0 0 2px; } .grs-sheet--1 { padding: 16px; gap: 9px; } .grs-l { height: 7px; } .grs-l--h { height: 11px; } .grs-dots i { width: 12px; height: 12px; } }
@media (min-width: 1024px) { .grs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grs-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 24px 28px; border-radius: 18px; background: #fff; border: 1px solid var(--gd-border, #e2e8f2); }
.grs-band__t { font: 700 1.15rem/1.3 var(--head); color: var(--i); }
@media (prefers-reduced-motion: reduce) { .grs-dots i { animation: none; } .grs-btn { transition: none; } }