/* ---- Centered brand-lockup hero ---- */
.home .hero-main { position: relative; min-height: 78vh; padding-block: 96px 56px; overflow: hidden; }
.home .hero-main .hero-bg { position: absolute; inset: 0; background: url("../img/hero/hero-particles.svg") center/cover no-repeat; opacity: .62; mix-blend-mode: screen; pointer-events: none; z-index: 0; -webkit-mask-image: radial-gradient(ellipse at 50% 46%, #000 46%, transparent 82%); mask-image: radial-gradient(ellipse at 50% 46%, #000 46%, transparent 82%); animation: floaty 12s ease-in-out infinite; }
.home .hero-main .hero-center { position: relative; z-index: 1; }
.home .hero-main .particle-canvas { z-index: 0; opacity: .55; -webkit-mask-image: radial-gradient(ellipse at 50% 46%, #000 40%, transparent 88%); mask-image: radial-gradient(ellipse at 50% 46%, #000 40%, transparent 88%); }
@media (prefers-reduced-motion: reduce) { .home .hero-main .hero-bg { animation: none; } }
.hero-center { text-align: center; max-width: 940px; margin-inline: auto; display: grid; justify-items: center; }
.hero-lockup-img { width: min(300px, 62vw); height: auto; display: block; margin-block-end: 22px; mix-blend-mode: screen; filter: drop-shadow(0 0 40px rgba(13,71,255,.35)); animation: floaty 6s ease-in-out infinite; }

/* ---- Big animated hero brand mark ---- */
.hero-mark { position: relative; width: clamp(170px, 24vw, 240px); aspect-ratio: 480 / 407; margin-block: 4px 26px; display: grid; place-items: center; }
.hero-mark img { position: relative; z-index: 2; width: 100%; height: auto; filter: drop-shadow(0 14px 50px rgba(13,71,255,.45)) drop-shadow(0 0 26px rgba(124,58,237,.3)); animation: markFloat 6s ease-in-out infinite; }
.hero-mark-glow { position: absolute; inset: -34%; border-radius: 50%; background: radial-gradient(circle, rgba(58,122,254,.38) 0%, rgba(124,58,237,.22) 38%, rgba(236,72,153,.08) 58%, transparent 72%); filter: blur(6px); animation: markGlow 4.6s ease-in-out infinite; z-index: 0; }
.hero-mark-ring { position: absolute; inset: -14%; border-radius: 50%; border: 1px dashed rgba(34,211,238,.35); z-index: 1; animation: markOrbit 26s linear infinite; }
.hero-mark-ring::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #22D3EE; box-shadow: 0 0 18px #22D3EE; }
.hero-mark-ring--2 { inset: -26%; border-color: rgba(236,72,153,.22); animation-duration: 38s; animation-direction: reverse; }
.hero-mark-ring--2::before { background: #EC4899; box-shadow: 0 0 18px rgba(236,72,153,.8); width: 8px; height: 8px; }
@keyframes markFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-12px) scale(1.02); } }
@keyframes markGlow { 0%,100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }
@keyframes markOrbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-mark img, .hero-mark-glow, .hero-mark-ring { animation: none; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Credibility badge */
.hero-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); backdrop-filter: blur(6px); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #E2E6F0; margin-block: 8px 26px; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: #22D3EE; box-shadow: 0 0 0 4px rgba(34,211,238,.18); animation: pulseDot 2.4s ease-in-out infinite; }
@keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 4px rgba(34,211,238,.18); } 50% { box-shadow: 0 0 0 8px rgba(34,211,238,.05); } }

/* Big gradient headline — the power line */
.hero-headline { font-size: clamp(46px, 8.5vw, 104px); line-height: .96; font-weight: 700; letter-spacing: -.03em; margin: 0 0 20px; color: #F4F7FF; }
.hero-headline .grad { background: linear-gradient(96deg, #3A7AFE 0%, #7C3AED 46%, #EC4899 78%, #22D3EE 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

.hero-center .lead { max-width: 640px; margin-block-end: 34px; font-size: clamp(17px, 2vw, 20px); }

/* Trust row */
.hero-trust { list-style: none; padding: 0; margin: 40px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; }
.hero-trust li { font-size: 15px; color: #A9B2C6; }
.hero-trust strong { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; background: linear-gradient(120deg, #3A7AFE, #22D3EE); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin-block-end: 2px; }
@media (max-width: 640px) { .hero-trust { gap: 10px 24px; } .hero-trust strong { font-size: 22px; } }
.hero-trust strong { font-size: clamp(17px, 2.4vw, 22px); }

/* ---- Introduction strip ---- */
.intro-strip { text-align: center; }
.intro-strip .lead { max-width: 820px; margin-inline: auto; }
.intro-emphasis { max-width: 720px; margin: 22px auto 0; font-size: clamp(18px, 2.2vw, 22px); font-weight: 600; line-height: 1.45; letter-spacing: -.01em; background: linear-gradient(96deg, #3A7AFE, #7C3AED 55%, #EC4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ---- Offerings grid ---- */
.offer-section { padding-block-start: 20px; }
.offer-tabs { margin-block-start: 34px; }
.offer-tabs .tab-row { display: flex; flex-wrap: wrap; gap: 12px; margin-block-end: 26px; }
.offer-tabs .tab-button { min-height: 48px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.045); color: var(--cloud-white); border-radius: var(--radius-pill); padding: 10px 20px; font-weight: 600; letter-spacing: .02em; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.offer-tabs .tab-button:hover, .offer-tabs .tab-button:focus-visible { color: var(--cyan-glow); border-color: rgba(var(--cyan-glow-rgb),.35); background: rgba(var(--cyan-glow-rgb),.06); }
.offer-tabs .tab-button.is-active { color: var(--cyan-glow); border-color: rgba(var(--cyan-glow-rgb),.45); background: rgba(var(--cyan-glow-rgb),.08); box-shadow: var(--shadow-cyan); }
.offer-tabs .tab-panel { display: none; }
.offer-tabs .tab-panel.is-active { display: block; animation: fadeIn .3s ease; }
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.offer-card { display: flex; flex-direction: column; height: 100%; position: relative; }
.offer-card p { flex: 1; }
.offer-card .btn-ghost { align-self: flex-start; padding-inline: 0; }
.offer-card .btn-ghost::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.stats-note { margin-block-start: 18px; font-size: 14px; color: rgba(226,230,240,.55); text-align: center; }

/* ---- Themed SVG icon media (offer + pillar cards) ---- */
.icon-media { width: 100%; height: 148px; border-radius: 14px; overflow: hidden; margin-block-end: 22px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); position: relative; display: grid; place-items: center; }
.icon-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; padding: 12px; }
.icon-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8,16,32,.55)); pointer-events: none; }
.icon-media-sm { height: 116px; }
@media (max-width: 980px) { .offer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .offer-grid { grid-template-columns: 1fr; } .hero-tagline { letter-spacing: .22em; } }

.home .pillar-card:nth-child(5) { grid-column: span 1; }
.insight-card .thumb { height: 170px; border-radius: 14px; margin-block-end: 18px; border: 1px solid rgba(255,255,255,.1); position: relative; overflow: hidden; background: rgba(255,255,255,.04); }
.insight-card .thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; padding: 12px; transition: transform .5s ease; }
.insight-card:hover .thumb img { transform: scale(1.05); }
.insight-card .thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(8,16,32,.5)); pointer-events: none; }