/* Buy Cloud Now v3 polish layer: brighter colour grade, premium header, motion system.
   Loads after main.css and only overrides; no content or structure changes. */

:root {
	/* Brighter, more colourful grade on the indigo foundation */
	--bg: #0C1236; --deep: #080C28; --surface: #171E58; --surface-2: #1F2870; --surface-3: #2A3488;
	--ink: #F7F5FF; --ink-2: #CBCDF0; --ink-3: #969BD0;
	--accent: #FF7A6B; --accent-hover: #FF9A7E; --accent-ink: #1A0B0B; --accent-soft: rgba(255, 122, 107, .18);
	--apricot: #FFB86B; --orchid: #D874FF; --lavender: #B9C4FF; --champagne: #F6E7C9;
	--glow: #B9C4FF; --glow-soft: rgba(185, 196, 255, .18); --haze: #D874FF;
	--line: rgba(185, 196, 255, .18); --line-strong: rgba(185, 196, 255, .38);
	--grad-cta: linear-gradient(120deg, #FF7A6B 0%, #FFB86B 100%);
	--grad-brand: linear-gradient(120deg, #D874FF 0%, #FF7A6B 55%, #FFB86B 100%);
	--grad-edge: linear-gradient(90deg, rgba(216, 116, 255, .0), #D874FF 30%, #FF7A6B 60%, #FFB86B 100%);
	--shadow: 0 22px 50px rgba(5, 7, 32, .55); --shadow-sm: 0 10px 28px rgba(5, 7, 32, .4);
	--dur: .32s;
}
body { background: radial-gradient(120% 80% at 50% -10%, #1A2270 0%, var(--bg) 55%, var(--deep) 100%) fixed; }
.ground-mist { background: linear-gradient(180deg, #181F5C 0%, #131A50 100%); }
.ground-petrol { background: linear-gradient(120deg, #202A78 0%, #2B2D88 45%, #3A2570 100%); }
.section + .section::before, .section-sm + .section::before, .section + .section-sm::before { background: var(--grad-edge); opacity: .55; }
.ambient::before { background: radial-gradient(60% 50% at 12% 8%, rgba(216, 116, 255, .22), transparent 70%), radial-gradient(50% 45% at 88% 18%, rgba(255, 122, 107, .18), transparent 70%), radial-gradient(60% 60% at 60% 100%, rgba(185, 196, 255, .16), transparent 70%); }
.orb-1 { background: var(--orchid); opacity: .22; } .orb-2 { background: var(--apricot); opacity: .16; } .orb-3 { background: var(--lavender); opacity: .18; }

/* Typography hierarchy */
h1, h2, h3, h4 { letter-spacing: -.028em; }
.h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); }
.h2::after, .page-title::after { content: none; }
.section-head .h2, .split-lead .h2 { position: relative; padding-bottom: 14px; }
.section-head .h2::after, .split-lead .h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 3px; background: var(--grad-cta); }
.contact-inner .h2::after { left: 50%; transform: translateX(-50%); }
.hero-title em { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.pcard-price .amt, .woocommerce-variation-price .price, .buy-from, .options-table td:nth-child(2), .opt-chip .oc-price, .pg-price, .mm-price { background: var(--grad-cta); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { color: var(--apricot); } .eyebrow::before { background: var(--grad-cta); }

/* ---------- Header ---------- */
.utility-bar { background: linear-gradient(90deg, #080C28, #10164A 60%, #080C28); }
.main-bar { background: rgba(12, 18, 54, .62); border-bottom: 1px solid rgba(185, 196, 255, .14); }
.main-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--grad-edge); opacity: 0; transition: opacity .5s var(--ease); }
.main-bar { position: relative; }
.is-scrolled .main-bar { background: rgba(10, 14, 44, .94); box-shadow: 0 14px 40px rgba(5, 7, 32, .5); }
.is-scrolled .main-bar::after { opacity: .8; }
.nav-list { gap: 2px; }
.nav-link { white-space: nowrap; font-weight: 700; font-size: .94rem; letter-spacing: .01em; padding: 10px 13px; color: var(--ink); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.nav-link:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 8px 22px rgba(185, 196, 255, .12); background: rgba(185, 196, 255, .12); }
.nav-link::after { background: var(--grad-cta); height: 2px; bottom: 5px; }
.nav-link.is-current { background: rgba(185, 196, 255, .1); }
.nav-link.is-current::after { transform: scaleX(1); }
/* Cloud Accounts: the catalogue entry gets its own identity */
.nav-accounts { position: relative; padding-left: 26px; }
.nav-accounts::before { content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--grad-cta); box-shadow: 0 0 0 4px rgba(255, 122, 107, .18), 0 0 14px rgba(255, 184, 107, .7); animation: pulseDot 3.2s ease-in-out infinite; }
.nav-accounts .nav-txt { background: linear-gradient(120deg, #F7F5FF 0%, #E9D6FF 40%, #FFB86B 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradShift 8s ease-in-out infinite alternate; }
.nav-accounts::after { background: var(--grad-brand); transform: scaleX(1); opacity: .9; }
.nav-accounts .icon { color: var(--apricot); }
.nav-accounts:hover { box-shadow: 0 8px 24px rgba(216, 116, 255, .22); }
@keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 122, 107, .18), 0 0 14px rgba(255, 184, 107, .7); } 50% { box-shadow: 0 0 0 6px rgba(255, 122, 107, .1), 0 0 20px rgba(255, 184, 107, .9); } }
@keyframes gradShift { to { background-position: 100% 0; } }
.nav-supplier { color: var(--champagne); }
.hbtn { transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.hbtn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(185, 196, 255, .15); }
.hbtn:hover .icon { animation: iconNudge .5s var(--ease); }
@keyframes iconNudge { 40% { transform: translateY(-2px) scale(1.08); } }
.brand-mark { filter: drop-shadow(0 0 12px rgba(216, 116, 255, .45)); }
.brand-word em { background: var(--grad-cta); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ulink-supplier { color: var(--apricot); }
.cart-count { background: var(--grad-cta); }

/* Mega menu */
.mega { background: linear-gradient(180deg, #202A76 0%, #171E58 100%); border-top: 1px solid rgba(185, 196, 255, .3); }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad-edge); }
.has-mega.is-open .mega-col { animation: megaIn .45s var(--ease) both; }
.has-mega.is-open .mega-col:nth-child(2) { animation-delay: .05s; } .has-mega.is-open .mega-col:nth-child(3) { animation-delay: .1s; } .has-mega.is-open .mega-col:nth-child(4) { animation-delay: .15s; } .has-mega.is-open .mega-aside { animation: megaIn .45s var(--ease) both .2s; }
@keyframes megaIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mega-head { color: var(--lavender); letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; border-bottom-color: rgba(185, 196, 255, .22); }
.mega-col a { border: 1px solid transparent; }
.mega-col a:hover { background: rgba(185, 196, 255, .1); border-color: rgba(185, 196, 255, .28); transform: translateX(3px); box-shadow: 0 8px 20px rgba(5, 7, 32, .35); }
.mega-col a:hover .pmark { color: var(--apricot); filter: drop-shadow(0 0 6px rgba(255, 184, 107, .6)); }
.mega-col .pmark { transition: color var(--dur) var(--ease), filter var(--dur) var(--ease); }
.mega-aside { background: linear-gradient(160deg, #2A3488, #1B2264 60%, #33246E); }
.mega-link { color: var(--apricot); }

/* ---------- Buttons ---------- */
.btn-primary { background: var(--grad-cta); color: var(--accent-ink); box-shadow: 0 6px 18px rgba(255, 122, 107, .25), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.btn-primary:hover { background: var(--grad-cta); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255, 138, 107, .45), inset 0 0 0 1px rgba(255, 255, 255, .28); }
.btn-primary:active { transform: translateY(0) scale(.985); }
.btn-secondary, .btn-ghost { position: relative; border-color: rgba(185, 196, 255, .35); }
.btn-secondary:hover, .btn-ghost:hover { transform: translateY(-2px); border-color: var(--lavender); box-shadow: 0 10px 26px rgba(185, 196, 255, .18); background: rgba(185, 196, 255, .12); }
.btn-link { color: var(--lavender); }
.btn-link:hover { color: var(--apricot); border-color: var(--apricot); }
.text-link { color: var(--lavender); } .text-link:hover { color: var(--apricot); border-color: var(--apricot); }

/* ---------- Hero ---------- */
.hero-bg img { opacity: .78; }
.hero-scrim { background: linear-gradient(90deg, rgba(12, 18, 54, .94) 0%, rgba(12, 18, 54, .72) 42%, rgba(12, 18, 54, .2) 100%), linear-gradient(0deg, var(--bg) 0%, rgba(12, 18, 54, 0) 45%); }
.beams { position: absolute; inset: -10% -20%; pointer-events: none; z-index: 0; opacity: .5; background: conic-gradient(from 200deg at 85% 30%, transparent 0deg, rgba(255, 184, 107, .18) 12deg, transparent 24deg, transparent 40deg, rgba(216, 116, 255, .14) 52deg, transparent 64deg); filter: blur(24px); animation: beams 22s ease-in-out infinite alternate; }
@keyframes beams { to { transform: rotate(6deg) translateX(-2%); } }
.hero-trust { gap: 10px 22px; }
.hero-trust span { padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid rgba(185, 196, 255, .2); background: rgba(185, 196, 255, .06); color: var(--ink-2); font-weight: 600; }
.hero-trust .icon { color: var(--apricot); }
.hero-trust b { font-family: var(--font-h); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.constellation { animation: fadeIn 1.6s var(--ease) both .3s, orbit 90s linear infinite; }
@keyframes orbit { to { transform: rotate(3deg); } }
.const-lines line { stroke: rgba(216, 116, 255, .45); }
.node { background: rgba(31, 40, 112, .92); border-color: rgba(185, 196, 255, .3); }
.node:hover { border-color: var(--apricot); box-shadow: 0 0 0 8px rgba(255, 184, 107, .16), 0 12px 30px rgba(5, 7, 32, .5); }
.node.n-0 { background: var(--grad-cta); box-shadow: 0 0 0 10px rgba(255, 122, 107, .16), 0 0 70px rgba(255, 138, 107, .5); }

/* ---------- Provider lists / cards ---------- */
.pgroup-list a { background: linear-gradient(160deg, #1F2870, #1A2262); }
.pgroup-list a:hover { border-color: rgba(216, 116, 255, .5); box-shadow: 0 12px 28px rgba(5, 7, 32, .4), 0 0 0 1px rgba(216, 116, 255, .2); }
.pgroup-list a:hover .pmark { color: var(--apricot); filter: drop-shadow(0 0 6px rgba(255, 184, 107, .5)); }
.pgroup-list .pmark, .pcard-prov .pmark, .ccard-mark .pmark, .side-products .pmark { transition: color var(--dur) var(--ease), filter var(--dur) var(--ease); }
.pcard { background: linear-gradient(170deg, #1B2366 0%, #151C52 100%); }
.pcard::before { height: 3px; background: var(--grad-brand); }
.pcard::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); padding: 1px; background: var(--grad-brand); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none; }
.pcard:hover::after { opacity: .9; }
.pcard:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(5, 7, 32, .6), 0 0 40px rgba(216, 116, 255, .12); }
.pcard:hover .pcard-prov .pmark { color: var(--apricot); filter: drop-shadow(0 0 6px rgba(255, 184, 107, .6)); }
.pcard:hover .pcard-price .amt { filter: drop-shadow(0 0 10px rgba(255, 138, 107, .45)); }
.pcard-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(21, 28, 82, .9) 100%); opacity: 0; transition: opacity var(--dur) var(--ease); }
.pcard:hover .pcard-media::after { opacity: 1; }
.pcard-cta { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-pill); background: var(--grad-cta); color: var(--accent-ink); font-weight: 700; font-size: .9rem; opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); pointer-events: none; }
.pcard:hover .pcard-cta { opacity: 1; transform: none; }
.pcard-compact .pcard-cta { display: none; }
.pcard-img { transition: transform 1.4s var(--ease), filter 1.4s var(--ease); }
.pcard:hover .pcard-img { transform: scale(1.06) translateY(-4px); }

/* Product page image: gradient drift + glow */
.pv-frame { box-shadow: var(--shadow), 0 0 90px rgba(216, 116, 255, .16); }
.pv-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(216, 116, 255, .0) 30%, rgba(216, 116, 255, .12) 50%, rgba(255, 184, 107, .0) 70%); background-size: 200% 200%; animation: gradDrift 14s ease-in-out infinite alternate; pointer-events: none; }
@keyframes gradDrift { to { background-position: 100% 100%; } }
.buy-box { background: linear-gradient(160deg, #222C7A, #171E58); border-color: rgba(185, 196, 255, .32); }
.opt-chip[aria-checked="true"] { background: var(--grad-cta); border-color: transparent; }
.opt-chip[aria-checked="true"] .oc-price { background: none; -webkit-text-fill-color: var(--accent-ink); color: var(--accent-ink); }
.single_add_to_cart_button { background: var(--grad-cta); box-shadow: 0 6px 18px rgba(255, 122, 107, .25); }
.single_add_to_cart_button:hover { background: var(--grad-cta); box-shadow: 0 14px 34px rgba(255, 138, 107, .45); transform: translateY(-1px); }

/* Bento + ecosystem */
.eco-card { background: linear-gradient(160deg, #1F2870, #171E58); }
.eco-card:hover { border-color: rgba(216, 116, 255, .45); box-shadow: 0 16px 34px rgba(5, 7, 32, .45); }
.eco-card .icon { color: var(--apricot); transition: transform var(--dur) var(--ease); }
.eco-card:hover .icon { transform: translateY(-3px) scale(1.08); }

/* Article cards */
.acard { background: linear-gradient(170deg, #1B2366, #151C52); }
.acard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-brand); opacity: 0; transition: opacity var(--dur) var(--ease); z-index: 2; }
.acard:hover::before { opacity: 1; }
.acard:hover { border-color: rgba(216, 116, 255, .4); box-shadow: 0 24px 46px rgba(5, 7, 32, .55); }
.acard-cat { display: inline-flex; align-self: flex-start; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(216, 116, 255, .16); color: #EAC9FF; letter-spacing: .05em; font-size: .72rem; }
.acard-provs { display: flex; gap: 6px; align-items: center; }
.acard-provs .pmark { width: 18px; height: 18px; color: var(--ink-3); }
.acard-read { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; color: var(--lavender); margin-top: 6px; }
.acard-read .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.acard:hover .acard-read { color: var(--apricot); } .acard:hover .acard-read .icon { transform: translateX(4px); }
.acard-featured { grid-column: span 2; grid-row: span 2; flex-direction: row; }
.acard-featured .acard-media { aspect-ratio: auto; flex: 1.2; min-height: 100%; }
.acard-featured .acard-body { flex: 1; justify-content: center; padding: var(--sp-5); }
.acard-featured .acard-title { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.acard-featured .acard-ex { font-size: 1.02rem; }

/* Compare */
.ccard { background: linear-gradient(170deg, #1B2366, #151C52); }
.ccard:hover { border-color: rgba(216, 116, 255, .4); }
.ccard-mark { background: linear-gradient(160deg, #2A3488, #1F2870); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ccard:hover .ccard-mark { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(5, 7, 32, .4); }
.ccard:hover .ccard-mark:nth-child(2) { transition-delay: .05s; } .ccard:hover .ccard-mark:nth-child(3) { transition-delay: .1s; }
.cmp-table thead th { background: linear-gradient(90deg, #2A3488, #33246E); color: var(--lavender); position: relative; }
.cmp-table-wrap { background: linear-gradient(170deg, #1B2366, #151C52); }
.cmp-table tbody tr { transition: background var(--dur) var(--ease); }
.cmp-table tbody tr:hover td, .cmp-table tbody tr:hover th { background: rgba(216, 116, 255, .08); }
.cmp-table tbody th { border-left: 3px solid transparent; }
.cmp-table tbody tr:hover th { border-left-color: var(--apricot); }
.ambient-grid { overflow: hidden; }
.ambient-grid::after { content: ""; position: absolute; inset: -20%; background-image: linear-gradient(rgba(185, 196, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(185, 196, 255, .07) 1px, transparent 1px); background-size: 72px 72px; animation: gridDrift 40s linear infinite; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); }
@keyframes gridDrift { to { transform: translate(72px, 72px); } }

/* Blog editorial light sweep */
.ambient-sweep::after { content: ""; position: absolute; top: -40%; bottom: -40%; width: 35%; left: -40%; background: linear-gradient(100deg, transparent 0%, rgba(216, 116, 255, .1) 45%, rgba(255, 184, 107, .08) 55%, transparent 100%); filter: blur(18px); transform: skewX(-12deg); animation: sweep 18s ease-in-out infinite; }
@keyframes sweep { 0% { left: -40%; } 60% { left: 110%; } 100% { left: 110%; } }

/* FAQ */
.qcard { background: linear-gradient(170deg, #1B2366, #151C52); border-left: 3px solid transparent; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.qcard:hover { transform: translateX(3px); border-left-color: var(--lavender); }
.qcard[open] { border-left-color: var(--apricot); background: linear-gradient(170deg, #222C7A, #1B2366); box-shadow: 0 12px 30px rgba(5, 7, 32, .4); }
.qcard summary .icon { color: var(--apricot); }
.qcard[open] summary { color: var(--champagne); }
.fchip.is-active { background: var(--grad-cta); border-color: transparent; }
.fchip:hover { box-shadow: 0 8px 18px rgba(185, 196, 255, .15); }
.ambient-faq .particles span { opacity: 0; animation-duration: 22s; width: 3px; height: 3px; }
.faq-item summary .icon { color: var(--apricot); }
.faq-item[open] summary { color: var(--champagne); }

/* Supplier: flowing lines + timeline */
.flowlines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55; }
.flowlines path { fill: none; stroke-width: 1.2; stroke-dasharray: 6 10; animation: flow 26s linear infinite; }
.flowlines path:nth-child(1) { stroke: rgba(216, 116, 255, .5); } .flowlines path:nth-child(2) { stroke: rgba(255, 184, 107, .45); animation-duration: 32s; } .flowlines path:nth-child(3) { stroke: rgba(185, 196, 255, .45); animation-duration: 38s; }
@keyframes flow { to { stroke-dashoffset: -400; } }
.steps { position: relative; }
.steps::before { content: ""; position: absolute; left: 39px; top: 40px; bottom: 40px; width: 2px; background: linear-gradient(180deg, var(--orchid), var(--accent), var(--apricot)); opacity: .5; transform: scaleY(0); transform-origin: top; transition: transform 1.4s var(--ease); }
.steps.is-in::before { transform: scaleY(1); }
.steps li { background: linear-gradient(160deg, #1F2870, #171E58); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.steps li:hover { transform: translateX(4px); border-color: rgba(216, 116, 255, .4); }
.steps li::before { background: var(--grad-cta); color: var(--accent-ink); box-shadow: 0 0 0 4px rgba(255, 122, 107, .15); }
.rule-list.ok .icon { color: #7CF0BF; } .rule-list.no .icon { color: #FF8A8A; }
.supplier-cta { background: linear-gradient(135deg, #2A3488 0%, #171E58 55%, #3A2570 100%); }
.cform { background: linear-gradient(170deg, #1B2366, #151C52); }
.cform input:focus, .cform select:focus, .cform textarea:focus { border-color: var(--orchid); box-shadow: 0 0 0 4px rgba(216, 116, 255, .22); }

/* Contact + channels */
.channel-card { background: linear-gradient(170deg, #1B2366, #151C52); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.channel-card:hover { transform: translateY(-3px); border-color: rgba(185, 196, 255, .4); box-shadow: var(--shadow-sm); }
.chan .icon, .fc .icon, .channel-card .icon, .hbtn-tg .icon, .hbtn-wa .icon { transition: transform var(--dur) var(--ease); }
.chan:hover .icon, .fc:hover .icon, .channel-card:hover .icon { transform: translateY(-2px) rotate(-6deg); }
.chan-telegram:hover { box-shadow: 0 12px 28px rgba(38, 165, 228, .45); } .chan-whatsapp:hover { box-shadow: 0 12px 28px rgba(37, 211, 102, .45); }
.fc { box-shadow: 0 12px 28px rgba(5, 7, 32, .5), 0 0 0 0 rgba(255, 255, 255, 0); }
.fc-telegram:hover { box-shadow: 0 14px 30px rgba(38, 165, 228, .5); } .fc-whatsapp:hover { box-shadow: 0 14px 30px rgba(37, 211, 102, .5); }

/* Footer */
.site-footer { background: linear-gradient(180deg, #0B1034 0%, #080C28 100%); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad-edge); opacity: .8; }
.footer-grid { border-bottom-color: rgba(185, 196, 255, .14); }
.footer-head { color: var(--champagne); letter-spacing: .02em; }
.footer-head::after { content: ""; display: block; width: 28px; height: 2px; margin-top: 8px; border-radius: 2px; background: var(--grad-cta); opacity: .8; }
.footer-products a:hover, .footer-menu a:hover { color: var(--apricot); padding-left: 4px; }
.footer-products a, .footer-menu a { transition: color var(--dur) var(--ease), padding var(--dur) var(--ease); }
.ambient-footer::before { animation: footerGrad 30s ease-in-out infinite alternate; }
@keyframes footerGrad { to { transform: translateX(-4%) scale(1.06); } }

/* Tables and misc */
.options-table-wrap { background: linear-gradient(170deg, #1B2366, #151C52); }
.options-table tbody tr { transition: background var(--dur) var(--ease); }
.options-table tbody tr:hover td, .options-table tbody tr:hover th { background: rgba(216, 116, 255, .07); }
.toc, .side-card, .link-list a { background: linear-gradient(170deg, #1B2366, #151C52); }
.side-card { background: linear-gradient(160deg, #2A3488, #1F2870); }
.link-list a:hover { border-color: rgba(216, 116, 255, .4); }
.prose a { color: var(--lavender); text-decoration-color: rgba(255, 184, 107, .6); }
.prose strong { color: var(--champagne); }
.prose h2 { border-top-color: rgba(185, 196, 255, .28); }
.prose figure img { border-radius: var(--r-lg); border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); }
.prose figcaption { font-size: .85rem; color: var(--ink-3); margin-top: 8px; }

/* ---------- Reveal system (staggered) ---------- */
.has-js .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.has-js .rv.is-in { opacity: 1; transform: none; }
.has-js .reveal { transition-duration: .6s; }

/* ---------- Page transitions ---------- */
.has-js body { animation: pageIn .4s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.has-js .is-leaving { animation: pageOut .18s ease-in both; }
@keyframes pageOut { to { opacity: 0; transform: translateY(-4px); } }

/* ---------- Living brand mark: strata build up, hue-cycle, dissolve and rebuild (6s loop) ---------- */
.brand-mark { overflow: visible; animation: bmGlow 6s ease-in-out infinite; }
.brand-mark path, .brand-mark circle { transform-box: fill-box; transform-origin: 50% 100%; will-change: transform, opacity; }
.brand-mark .bm-s1 { --o: 1;   animation: bmBuild 6s var(--ease) infinite,       bmHue 6s linear infinite; }
.brand-mark .bm-s2 { --o: .78; animation: bmBuild 6s var(--ease) infinite .3s,   bmHue 6s linear infinite -2s; }
.brand-mark .bm-s3 { --o: .55; animation: bmBuild 6s var(--ease) infinite .6s,   bmHue 6s linear infinite -4s; }
.brand-mark .bm-dot { transform-origin: 50% 50%; animation: bmDot 6s var(--ease) infinite .9s; }
.brand:hover .brand-mark path, .brand:hover .brand-mark circle, .brand:hover .brand-mark { animation-duration: 3s; }
@keyframes bmBuild {
	0%   { opacity: 0; transform: translateY(9px) scaleX(.55); }
	9%   { opacity: var(--o); transform: translateY(0) scaleX(1); }
	80%  { opacity: var(--o); transform: translateY(0) scaleX(1); }
	88%  { opacity: 0; transform: translateY(-7px) scaleX(1.12); }
	92%  { opacity: 0; transform: translateY(9px) scaleX(.55); }
	100% { opacity: 0; transform: translateY(9px) scaleX(.55); }
}
@keyframes bmHue {
	0%   { fill: #F7F5FF; }
	25%  { fill: #B9C4FF; }
	50%  { fill: #D874FF; }
	75%  { fill: #FFB86B; }
	100% { fill: #F7F5FF; }
}
@keyframes bmDot {
	0%, 10% { opacity: 0; transform: scale(0); fill: var(--accent); }
	17%  { opacity: 1; transform: scale(1.4); fill: #FFB86B; }
	23%  { transform: scale(1); }
	50%  { transform: scale(1.18); fill: #D874FF; }
	70%  { transform: scale(1); fill: var(--accent); }
	80%  { opacity: 1; transform: scale(1); }
	86%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes bmGlow {
	0%, 100% { filter: drop-shadow(0 0 12px rgba(216, 116, 255, .45)); }
	33%  { filter: drop-shadow(0 0 15px rgba(255, 184, 107, .6)); }
	66%  { filter: drop-shadow(0 0 15px rgba(185, 196, 255, .6)); }
}

/* ---------- Header channel badges: Telegram / WhatsApp as glowing brand buttons ---------- */
.header-actions { gap: 8px; }
.hbtn-tg, .hbtn-wa { width: 46px; height: 46px; color: #fff; border: 1px solid rgba(255, 255, 255, .28); isolation: isolate; overflow: visible; box-shadow: 0 6px 18px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .38); }
.hbtn-tg, .hbtn-tg:hover { background: linear-gradient(145deg, #6AD0FF 0%, #26A5E4 55%, #1279B9 100%); }
.hbtn-wa, .hbtn-wa:hover { background: linear-gradient(145deg, #7BF3AC 0%, #25D366 55%, #119E48 100%); }
.hbtn-tg .icon, .hbtn-wa .icon { width: 25px; height: 25px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); position: relative; z-index: 2; }
.hbtn-tg::before, .hbtn-wa::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #5FCBFF; opacity: 0; z-index: -1; animation: ringPulse 3.2s ease-out infinite; pointer-events: none; }
.hbtn-wa::before { border-color: #5DEB95; animation-delay: 1.6s; }
.hbtn-tg::after, .hbtn-wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .55) 50%, transparent 68%); background-size: 260% 100%; background-position: 210% 0; animation: badgeShine 5.2s ease-in-out infinite; }
.hbtn-wa::after { animation-delay: 2.6s; }
.hbtn-tg:hover, .hbtn-wa:hover { transform: translateY(-2px) scale(1.1); }
.hbtn-tg:hover { box-shadow: 0 12px 28px rgba(38, 165, 228, .5), inset 0 1px 0 rgba(255, 255, 255, .45); }
.hbtn-wa:hover { box-shadow: 0 12px 28px rgba(37, 211, 102, .5), inset 0 1px 0 rgba(255, 255, 255, .45); }
.hbtn-tg:hover::before, .hbtn-wa:hover::before { animation-duration: 1.4s; }
@keyframes ringPulse { 0% { transform: scale(.78); opacity: .9; } 70%, 100% { transform: scale(1.3); opacity: 0; } }
@keyframes badgeShine { 0%, 62% { background-position: 210% 0; } 88%, 100% { background-position: -110% 0; } }

/* ---------- Mobile + reduced motion ---------- */
@media (max-width: 1320px) and (min-width: 1025px) {
	.nav-link { font-size: .88rem; padding: 9px 10px; }
	.nav-accounts { padding-left: 22px; } .nav-accounts::before { left: 9px; }
	.main-inner { gap: var(--sp-3); }
	.brand { font-size: 1.25rem; }
}
@media (max-width: 1024px) {
	.beams { display: none; }
	.acard-featured { grid-column: span 2; grid-row: auto; flex-direction: column; }
	.acard-featured .acard-media { aspect-ratio: 16 / 9; flex: none; min-height: 0; height: auto; }
}
@media (max-width: 720px) {
	.particles span:nth-child(n+5), .ambient-grid::after, .ambient-sweep::after, .flowlines { display: none; }
	.orb { filter: blur(50px); }
	.constellation { animation: fadeIn 1.6s var(--ease) both .3s; }
	.acard-featured { grid-column: auto; }
	.hero-trust span { padding: 6px 10px; font-size: .82rem; }
	.nav-accounts { padding-left: 15px; } .nav-accounts::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.beams, .ambient-grid::after, .ambient-sweep::after, .flowlines path, .nav-accounts::before, .nav-accounts .nav-txt, .constellation, .pv-frame::after, .ambient-footer::before { animation: none !important; }
	.has-js body, .has-js .is-leaving { animation: none !important; }
	.has-js .rv { opacity: 1; transform: none; }
	.steps::before { transform: scaleY(1); }
	.brand-mark, .brand-mark path, .brand-mark circle { animation: none !important; opacity: initial; }
	.hbtn-tg::before, .hbtn-wa::before, .hbtn-tg::after, .hbtn-wa::after { animation: none !important; opacity: 0; }
}
