/* ═══════════════════════════════════════════════════════════════════════
 landing.css — Peptelligence Landing Page
 iOS Liquid Glass / Glassmorphism · Navy + Gold
 ═══════════════════════════════════════════════════════════════════════ */

/* ── Gold Shimmer Announcement Banner ───────────────────────────────────── */
@keyframes gold-shimmer {
 0% { background-position: 200% center; }
 100% { background-position: -200% center; }
}

.announce-bar {
 background: linear-gradient(90deg,
 #06111f, #0d1f3a, #1a3058, #D4A843, #e6c76e, #D4A843, #1a3058, #0d1f3a, #06111f);
 background-size: 200% 100%;
 animation: gold-shimmer 8s ease-in-out infinite;
 color: #fff;
 text-align: center;
 padding: 10px 14px;
 padding-top: max(10px, env(safe-area-inset-top, 0px));
 font-family: var(--sf-font);
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 position: relative;
 overflow: hidden;
 border-bottom: 1px solid rgba(212,168,67,0.2);
 min-height: 36px;
}

/* Specular shimmer overlay */
.announce-bar::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(90deg,
 transparent 0%,
 rgba(255,255,255,0.06) 25%,
 rgba(255,255,255,0.12) 50%,
 rgba(255,255,255,0.06) 75%,
 transparent 100%);
 background-size: 200% 100%;
 animation: gold-shimmer 6s ease-in-out infinite;
 pointer-events: none;
}

/* Rotating slides */
.announce-bar .ab-slide {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transform: translateY(100%);
 transition: opacity 0.5s, transform 0.5s;
 z-index: 1;
 font-size: 12px;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 font-weight: 600;
}
.announce-bar .ab-slide.active {
 opacity: 1;
 transform: translateY(0);
}
.announce-bar .ab-slide.exit {
 opacity: 0;
 transform: translateY(-100%);
}

@media (max-width: 560px) {
 .announce-bar {
 font-size: 9px;
 padding: 8px 10px;
 padding-top: max(8px, env(safe-area-inset-top, 0px));
 letter-spacing: 0.04em;
 min-height: 32px;
 }
 .announce-bar .ab-slide { font-size: 9px; }
}

/* ── Floating Glass Capsule Topbar ───────────────────────────────────────── */
.topbar {
 position: fixed;
 top: var(--sp-md);
 left: 50%;
 transform: translateX(-50%);
 width: min(92vw, 1140px);
 z-index: var(--z-topbar);
 display: flex;
 align-items: center;
 padding: 10px 20px;
 border-radius: var(--r-pill);
 background: rgba(255, 255, 255, 0.45);
 backdrop-filter: blur(24px) saturate(1.8) brightness(1.05);
 -webkit-backdrop-filter: blur(24px) saturate(1.8) brightness(1.05);
 border: 1px solid rgba(255, 255, 255, 0.45);
 border-top: 1px solid var(--glass-specular);
 box-shadow:
 0 8px 32px rgba(11, 27, 58, 0.10),
 0 0 0 1px rgba(255, 255, 255, 0.08);
 transition: background var(--dur-normal) var(--ease-out),
 border-color var(--dur-normal) var(--ease-out),
 box-shadow var(--dur-normal) var(--ease-out),
 padding var(--dur-normal) var(--ease-out);
}

/* Scrolled state — more opaque */
.topbar.scrolled {
 background: rgba(255, 255, 255, 0.82);
 border-color: rgba(255, 255, 255, 0.6);
 box-shadow:
 0 4px 24px rgba(11, 27, 58, 0.12),
 0 0 0 1px rgba(11, 27, 58, 0.04);
}

/* Brand */
.topbar-brand {
 font-weight: 800;
 font-size: 0.8125rem;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--navy);
 white-space: nowrap;
 font-family: 'Orbitron', var(--sf-font);
}
.topbar-brand img {
 height: 38px;
 object-fit: contain;
}

/* Center nav links */
.topbar-nav {
 display: flex;
 align-items: center;
 gap: 6px;
 margin-inline: auto;
}
.topbar-nav a {
 padding: 6px 14px;
 font-size: 0.8125rem;
 font-weight: 500;
 color: var(--navy);
 border-radius: var(--r-pill);
 transition: background var(--dur-fast), color var(--dur-fast);
 letter-spacing: 0.01em;
}
.topbar-nav a:hover,
.topbar-nav a.active {
 background: rgba(11, 27, 58, 0.07);
}

/* Right-side actions */
.topbar-actions {
 display: flex;
 align-items: center;
 gap: 8px;
}
.topbar-actions a {
 font-size: 0.8125rem;
 font-weight: 500;
 color: var(--navy);
 padding: 6px 14px;
 border-radius: var(--r-pill);
 transition: background var(--dur-fast);
}
.topbar-actions a:hover {
 background: rgba(11, 27, 58, 0.07);
}
.topbar-actions .btn {
 font-size: 0.8125rem;
 padding: 8px 18px;
}

/* Glass sign-in button */
.topbar-actions .btn-glass-signin {
 background: rgba(255, 255, 255, 0.18);
 backdrop-filter: blur(20px) saturate(1.8);
 -webkit-backdrop-filter: blur(20px) saturate(1.8);
 border: 1px solid rgba(255, 255, 255, 0.35);
 border-top: 1px solid rgba(255, 255, 255, 0.5);
 color: var(--navy);
 font-size: 0.8125rem;
 font-weight: 600;
 padding: 8px 20px;
 border-radius: var(--r-pill);
 box-shadow:
   0 2px 8px rgba(11, 27, 58, 0.06),
   inset 0 1px 0 rgba(255, 255, 255, 0.4);
 transition: all 0.2s var(--ease-out);
}
.topbar-actions .btn-glass-signin:hover {
 background: rgba(255, 255, 255, 0.32);
 border-color: rgba(255, 255, 255, 0.5);
 box-shadow:
   0 4px 16px rgba(11, 27, 58, 0.08),
   inset 0 1px 0 rgba(255, 255, 255, 0.5);
 transform: translateY(-1px);
}

/* Luxury cart icon */
.cart-icon-link {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 position: relative;
 padding: 6px;
 color: #1a1a1a;
 transition: opacity 0.15s;
}
.cart-icon-link:hover { opacity: 0.7; }
.cart-icon-link svg { width: 22px; height: 22px; }
.cart-icon-link .cart-count {
 position: absolute;
 top: -4px;
 right: -6px;
}

/* Cart badge */
.cart-count {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 18px;
 height: 18px;
 font-size: 0.625rem;
 font-weight: 700;
 background: var(--gold);
 color: var(--navy-deep);
 border-radius: var(--r-pill);
 margin-left: 4px;
}

/* ── Hamburger Toggle ─────────────────────────────────────────────────── */
.topbar-toggle {
 display: none;
 flex-direction: column;
 gap: 5px;
 padding: 8px;
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
}
.topbar-toggle span {
 display: block;
 width: 20px;
 height: 2px;
 background: var(--navy);
 border-radius: 2px;
 transition: transform var(--dur-normal) var(--ease-out),
 opacity var(--dur-fast);
}
/* X state */
.topbar-toggle.open span:first-child {
 transform: translateY(3.5px) rotate(45deg);
}
.topbar-toggle.open span:last-child {
 transform: translateY(-3.5px) rotate(-45deg);
}

/* ── Full-Viewport Video Hero ─────────────────────────────────────────── */
.hero {
 position: relative;
 min-height: 100vh;
 min-height: 100dvh;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 color: #fff;
 text-align: center;
}
.hero-video {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 z-index: 0;
}
.hero-overlay {
 position: absolute;
 inset: 0;
 z-index: 1;
 background: linear-gradient(
 135deg,
 rgba(6, 18, 36, 0.74) 0%,
 rgba(11, 27, 58, 0.60) 40%,
 rgba(212, 168, 67, 0.18) 100%
 );
}
.hero-content {
 position: relative;
 z-index: 2;
 max-width: 760px;
 padding: var(--sp-3xl) var(--sp-lg);
}
.hero .eyebrow {
 color: var(--gold-light);
 margin-bottom: var(--sp-md);
}
.hero h1 {
 font-size: clamp(2.25rem, 6vw, 3.75rem);
 text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
 margin-bottom: var(--sp-md);
}
.hero .lede {
 color: rgba(255, 255, 255, 0.88);
 margin: 0 auto var(--sp-xl);
 text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

/* Hero CTA — frosted glass pill */
.hero-cta {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 16px 36px;
 border-radius: var(--r-pill);
 font-weight: 700;
 font-size: 1rem;
 letter-spacing: 0.04em;
 color: #fff;
 background: rgba(255, 255, 255, 0.14);
 backdrop-filter: blur(16px) saturate(1.6);
 -webkit-backdrop-filter: blur(16px) saturate(1.6);
 border: 1.5px solid rgba(255, 255, 255, 0.3);
 box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
 transition: background var(--dur-normal) var(--ease-out),
 border-color var(--dur-normal),
 transform var(--dur-fast) var(--ease-out),
 box-shadow var(--dur-normal);
 cursor: pointer;
}
.hero-cta:hover {
 background: rgba(255, 255, 255, 0.22);
 border-color: rgba(255, 255, 255, 0.5);
 transform: translateY(-2px);
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20);
}
.hero-cta:active {
 transform: translateY(0) scale(0.98);
}

/* ── RUO Disclaimer Strip ─────────────────────────────────────────────── */
.disclaimer-strip {
 background: var(--navy-deep);
 color: var(--slate);
 text-align: center;
 padding: 10px var(--sp-lg);
 font-size: 0.6875rem;
 font-weight: 500;
 letter-spacing: 0.06em;
 border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.disclaimer-strip strong {
 color: var(--gold);
 font-weight: 700;
}

/* ── Tagline Band ─────────────────────────────────────────────────────── */
.tagline-band {
 padding: var(--sp-3xl) var(--sp-lg);
 text-align: center;
 background: var(--paper);
}
.tagline-band h2 {
 margin-bottom: var(--sp-sm);
}
.tagline-band .lede {
 margin-inline: auto;
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.section {
 padding: var(--sp-4xl) var(--sp-lg);
}
.section .container {
 max-width: 1180px;
}
.section-header {
 text-align: center;
 margin-bottom: var(--sp-2xl);
}
.section-header .eyebrow {
 margin-bottom: var(--sp-sm);
}
.section-header .lede {
 margin-inline: auto;
 margin-top: var(--sp-sm);
}

/* Alt section — glass surface bg */
.section-alt {
 background:
 linear-gradient(
 180deg,
 rgba(248, 246, 241, 0.7) 0%,
 rgba(255, 255, 255, 0.4) 100%
 );
 backdrop-filter: blur(8px) saturate(1.3);
 -webkit-backdrop-filter: blur(8px) saturate(1.3);
}

/* ── Product Grid ─────────────────────────────────────────────────────── */
.product-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 gap: var(--sp-lg);
}

/* Product card — glassmorphism */
.product-card {
 position: relative;
 display: flex;
 flex-direction: column;
 background:
 linear-gradient(
 135deg,
 rgba(255, 255, 255, 0.60) 0%,
 rgba(255, 255, 255, 0.30) 50%,
 rgba(248, 246, 241, 0.40) 100%
 );
 backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
 -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
 border-radius: var(--r-card);
 border: 1px solid var(--glass-border);
 border-top: 1px solid var(--glass-specular);
 box-shadow: var(--shadow-glass);
 overflow: hidden;
 transition: transform var(--dur-normal) var(--ease-out),
 box-shadow var(--dur-normal) var(--ease-out);
}
.product-card:hover {
 transform: translateY(-4px);
 box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* Product image */
.product-card-img {
 width: 100%;
 height: 200px;
 object-fit: cover;
 border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.product-card-img-placeholder {
 width: 100%;
 height: 200px;
 background: linear-gradient(
 135deg,
 color-mix(in srgb, var(--gold) 15%, transparent),
 color-mix(in srgb, var(--navy) 25%, transparent)
 );
}

/* Product body */
.product-card-body {
 padding: var(--sp-md) var(--sp-lg) var(--sp-lg);
 display: flex;
 flex-direction: column;
 flex: 1;
 gap: var(--sp-xs);
}
.product-card-name {
 font-weight: 700;
 font-size: 1rem;
 line-height: 1.3;
 color: var(--ink);
}
.product-card-amount {
 font-size: 0.8125rem;
 color: var(--steel);
}
.product-card-price {
 display: flex;
 align-items: baseline;
 gap: 8px;
 margin-top: auto;
 padding-top: var(--sp-sm);
}
.product-card-price .current {
 font-weight: 700;
 font-size: 1.125rem;
 color: var(--gold);
}
.product-card-price .compare {
 font-size: 0.8125rem;
 color: var(--slate);
 text-decoration: line-through;
}

/* Stock status */
.product-card-stock {
 font-size: 0.6875rem;
 font-weight: 600;
 letter-spacing: 0.04em;
}
.product-card-stock.in-stock { color: var(--sf-success); }
.product-card-stock.low-stock { color: #d97706; }
.product-card-stock.out-of-stock { color: var(--sf-danger); }

/* Add to cart button */
.product-card .btn-add-cart {
 margin-top: var(--sp-sm);
 width: 100%;
 padding: 10px 16px;
 font-weight: 600;
 font-size: 0.8125rem;
 letter-spacing: 0.03em;
 border-radius: var(--r-pill);
 background: var(--gold);
 color: var(--navy-deep);
 cursor: pointer;
 transition: background var(--dur-fast),
 transform var(--dur-fast) var(--ease-out),
 box-shadow var(--dur-normal);
}
.product-card .btn-add-cart:hover {
 background: var(--gold-light);
 transform: translateY(-1px);
 box-shadow: var(--shadow-sm), var(--shadow-glow);
}
.product-card .btn-add-cart:active {
 transform: scale(0.97);
}
.product-card .btn-add-cart:disabled {
 opacity: 0.4;
 cursor: not-allowed;
 transform: none;
}

/* Dark product grid (on dark sections) */
.dark .product-card,
.product-grid.dark .product-card {
 background:
 linear-gradient(
 135deg,
 rgba(11, 27, 58, 0.70) 0%,
 rgba(6, 18, 36, 0.80) 100%
 );
 border-color: var(--glass-border-dark);
 border-top-color: rgba(255, 255, 255, 0.15);
}
.dark .product-card-name { color: #fff; }
.dark .product-card .btn-add-cart {
 background: rgba(212, 168, 67, 0.18);
 backdrop-filter: blur(12px) saturate(1.6);
 -webkit-backdrop-filter: blur(12px) saturate(1.6);
 color: var(--gold-light);
 border: 1px solid rgba(212, 168, 67, 0.3);
}
.dark .product-card .btn-add-cart:hover {
 background: rgba(212, 168, 67, 0.3);
}

/* ── Trust / Why Section ──────────────────────────────────────────────── */
.trust-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: var(--sp-lg);
}
.trust-card {
 padding: var(--sp-xl) var(--sp-lg);
 background:
 linear-gradient(
 135deg,
 rgba(255, 255, 255, 0.60) 0%,
 rgba(255, 255, 255, 0.30) 50%,
 rgba(248, 246, 241, 0.40) 100%
 );
 backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
 -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
 border-radius: var(--r-card);
 border: 1px solid var(--glass-border);
 border-top: 1px solid var(--glass-specular);
 box-shadow: var(--shadow-glass);
 transition: transform var(--dur-normal) var(--ease-out),
 box-shadow var(--dur-normal) var(--ease-out);
}
.trust-card:hover {
 transform: translateY(-3px);
 box-shadow: var(--shadow-lg);
}
.trust-card-icon {
 font-size: 2rem;
 margin-bottom: var(--sp-sm);
}
.trust-card h3 {
 margin-bottom: var(--sp-xs);
}
.trust-card p {
 color: var(--steel);
 line-height: 1.7;
 font-size: 0.9375rem;
}

/* ── CTA Band ─────────────────────────────────────────────────────────── */
.cta-band {
 background: var(--navy-deep);
 color: #fff;
 padding: var(--sp-3xl) var(--sp-lg);
 text-align: center;
}
.cta-band h2 {
 margin-bottom: var(--sp-sm);
}
.cta-band .lede {
 color: var(--slate);
 margin: 0 auto var(--sp-xl);
}
.cta-band .hero-cta {
 /* reuse hero-cta styling */
}

/* ── FAQ Accordion ────────────────────────────────────────────────────── */
.faq-list {
 display: flex;
 flex-direction: column;
 gap: var(--sp-sm);
}
.faq-item {
 background:
 linear-gradient(
 135deg,
 rgba(255, 255, 255, 0.55) 0%,
 rgba(255, 255, 255, 0.30) 100%
 );
 backdrop-filter: blur(16px) saturate(1.6) brightness(1.04);
 -webkit-backdrop-filter: blur(16px) saturate(1.6) brightness(1.04);
 border: 1px solid var(--glass-border);
 border-top: 1px solid var(--glass-specular-subtle);
 border-radius: var(--r-lg);
 box-shadow: var(--shadow-sm);
 overflow: hidden;
}
.faq-item summary {
 padding: var(--sp-md) var(--sp-lg);
 font-weight: 600;
 font-size: 1rem;
 cursor: pointer;
 list-style: none;
 display: flex;
 align-items: center;
 justify-content: space-between;
 color: var(--ink);
 transition: background var(--dur-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
 content: '+';
 font-size: 1.25rem;
 font-weight: 300;
 color: var(--steel);
 transition: transform var(--dur-normal) var(--ease-out);
}
.faq-item[open] summary::after {
 content: '−';
 transform: rotate(180deg);
}
.faq-item summary:hover {
 background: rgba(255, 255, 255, 0.4);
}
.faq-item .faq-answer {
 padding: 0 var(--sp-lg) var(--sp-lg);
 color: var(--steel);
 line-height: 1.7;
 font-size: 0.9375rem;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer {
 background: var(--navy-deep);
 color: var(--slate);
 padding: var(--sp-3xl) var(--sp-lg) var(--sp-2xl);
}
.footer-grid {
 display: grid;
 grid-template-columns: 2fr repeat(3, 1fr);
 gap: var(--sp-xl);
 max-width: 1180px;
 margin-inline: auto;
}
.footer-brand {
 font-weight: 800;
 font-size: 0.8125rem;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--gold);
 margin-bottom: var(--sp-sm);
 font-family: 'Orbitron', var(--sf-font);
}
.footer-desc {
 color: var(--slate);
 font-size: 0.875rem;
 line-height: 1.7;
 opacity: 0.7;
}
.footer-col-title {
 font-weight: 700;
 font-size: 0.6875rem;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: #fff;
 margin-bottom: var(--sp-sm);
}
.footer-col a {
 display: block;
 font-size: 0.875rem;
 color: var(--slate);
 padding: 3px 0;
 transition: color var(--dur-fast);
}
.footer-col a:hover {
 color: var(--gold-light);
}
.footer-bottom {
 max-width: 1180px;
 margin: var(--sp-xl) auto 0;
 padding-top: var(--sp-lg);
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 font-size: 0.75rem;
 color: rgba(255, 255, 255, 0.35);
}

/* ── Mobile Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
 /* Topbar becomes full-width capsule */
 .topbar {
 width: calc(100vw - var(--sp-xl));
 padding: 8px 16px;
 }
 .topbar-nav,
 .topbar-actions {
 display: none;
 }
 .topbar-toggle {
 display: flex;
 margin-left: auto;
 }

 /* Mobile overlay nav */
 .mobile-overlay {
 position: fixed;
 inset: 0;
 z-index: calc(var(--z-topbar) - 1);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: var(--sp-lg);
 background: rgba(6, 18, 36, 0.88);
 backdrop-filter: blur(32px) saturate(1.8);
 -webkit-backdrop-filter: blur(32px) saturate(1.8);
 opacity: 0;
 visibility: hidden;
 transition: opacity var(--dur-normal) var(--ease-out),
 visibility var(--dur-normal);
 }
 .mobile-overlay.open {
 opacity: 1;
 visibility: visible;
 }
 .mobile-overlay a {
 font-size: 1.25rem;
 font-weight: 600;
 color: #fff;
 padding: 8px 24px;
 border-radius: var(--r-pill);
 transition: background var(--dur-fast);
 }
 .mobile-overlay a:hover {
 background: rgba(255, 255, 255, 0.1);
 }
 .mobile-overlay .btn {
 margin-top: var(--sp-md);
 }

 /* Hero */
 .hero {
 min-height: 85vh;
 min-height: 85dvh;
 }
 .hero h1 {
 font-size: clamp(1.75rem, 8vw, 2.5rem);
 }
 .hero-content {
 padding: var(--sp-2xl) var(--sp-md);
 }

 /* Sections */
 .section {
 padding: var(--sp-3xl) var(--sp-md);
 }

 /* Product grid */
 .product-grid {
 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 gap: var(--sp-md);
 }

 /* Trust grid */
 .trust-grid {
 grid-template-columns: 1fr;
 gap: var(--sp-md);
 }

 /* Footer */
 .footer-grid {
 grid-template-columns: 1fr 1fr;
 gap: var(--sp-lg);
 }
}

@media (max-width: 480px) {
 .product-grid {
 grid-template-columns: 1fr;
 }
 .footer-grid {
 grid-template-columns: 1fr;
 }
 .hero-cta {
 padding: 14px 28px;
 font-size: 0.9375rem;
 }
}

/* ── Safe-area insets ─────────────────────────────────────────────────── */
@supports (padding-top: env(safe-area-inset-top)) {
 .topbar {
 top: calc(var(--sp-md) + env(safe-area-inset-top));
 }
 .hero {
 padding-top: env(safe-area-inset-top);
 }
 .footer {
 padding-bottom: calc(var(--sp-2xl) + env(safe-area-inset-bottom));
 }
 .mobile-overlay {
 padding-top: env(safe-area-inset-top);
 padding-bottom: env(safe-area-inset-bottom);
 }
 .toast {
 bottom: calc(var(--sp-lg) + env(safe-area-inset-bottom));
 }
}

/* ── Scroll-aware Navbar Script Hook ──────────────────────────────────── */
/* JS adds .scrolled to .topbar when scrollY > 40 */

/* ── VisionOS-style Animations ────────────────────────────────────────── */
@keyframes fade-in-up {
 from {
 opacity: 0;
 transform: translateY(24px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}
.animate-in {
 animation: fade-in-up var(--dur-slow) var(--ease-out) both;
}
.animate-in.delay-1 { animation-delay: 100ms; }
.animate-in.delay-2 { animation-delay: 200ms; }
.animate-in.delay-3 { animation-delay: 300ms; }
.animate-in.delay-4 { animation-delay: 400ms; }