/* HAIN's cinematic identity. Shared by the home and marketing pages. */
@font-face {
  font-family: Manrope;
  src: url('assets/manrope-variable.ttf') format('truetype');
  font-weight: 200 800;
  font-display: swap;
}

:root { --bg: #02040a; --pad: clamp(24px, 5.75vw, 110px); --max: 1440px; --header-h: 108px; --muted: #a0a8b9; }
body { font-family: Manrope, sans-serif; background: #02040a; }
html { scroll-padding-top: 120px; }
main { overflow: clip; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid #a1b9ff; outline-offset: 6px; }
.skip-link { position: fixed; top: 12px; left: 20px; z-index: 2000; padding: 12px 22px; background: #173ccd; border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.page-noise { opacity: .017; z-index: 800; }
h1, h2, h3 { font-weight: 400; }
h2 { font-size: clamp(42px, 4.7vw, 74px); line-height: 1.12; letter-spacing: -.055em; }
h2 span { background-image: linear-gradient(100deg, #809dff, #aca0e9); }
.eyebrow { font-size: 10px; font-weight: 500; letter-spacing: .38em; color: #b8c2d7; }
.site-header { grid-template-columns: 220px 1fr 220px; }
.brand-word { font-size: 34px; font-weight: 500; letter-spacing: .36em; }
.brand-sub { font-size: 10px; letter-spacing: .2em; }
.desktop-nav { gap: clamp(20px, 2.6vw, 44px); }
.desktop-nav a { font-size: 13px; white-space: nowrap; color: #e1e3ed; }
.desktop-nav a:after { bottom: 0; box-shadow: 0 0 9px #667bff; }
.header-cta { font-size: 13px; min-height: 50px; padding: 12px 25px; border-color: #637acc; box-shadow: inset 0 0 15px #3157ff0e, 0 0 24px #3157ff12; }
.site-header.scrolled { background: #03060cdd; }
.hero { width: 100%; min-height: 790px; height: 100svh; max-height: 1120px; padding: 150px var(--pad) 210px; display: flex; align-items: center; isolation: isolate; }
.cosmic-scene { position: absolute; inset: -1.5%; z-index: -5; pointer-events: none; will-change: transform; transition: transform 1.8s cubic-bezier(.16, 1, .3, 1); }
.cosmic-scene img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero:before { content: ''; position: absolute; inset: 0; z-index: -3; pointer-events: none; background: linear-gradient(90deg, #01030994 0%, #01030950 27%, transparent 55%), linear-gradient(0deg, #02040a 0%, transparent 16%, transparent 86%, #00000065); }
.hero .starfield { z-index: -2; opacity: .8; }
.hero-aurora { display: none; }
.hero-copy { width: 48%; max-width: 600px; padding: 0; }
.hero-copy .eyebrow { margin-bottom: 23px; font-size: clamp(9px, .75vw, 12px); letter-spacing: .43em; }
.hero-copy h1 { font-size: clamp(72px, 6.05vw, 104px); line-height: 1.02; font-weight: 300; letter-spacing: -.055em; margin-bottom: 28px; }
.hero-copy h1 span { font-weight: 650; background-image: linear-gradient(105deg, #5f87ff 5%, #8b88f2 65%, #b197e8); }
.hero-lede { font-size: clamp(15px, 1.22vw, 20px); line-height: 1.7; max-width: 500px; color: #c1c4cf; font-weight: 350; margin-bottom: 34px; }
.hero-actions { gap: 20px; }
.btn { min-height: 54px; padding: 0 30px; font-size: 13px; }
.btn span { font-size: 22px; transition: transform .25s; }
.btn:hover span { transform: translateX(4px); }
.btn-primary { background: linear-gradient(105deg, #064bff 0%, #2454ff 67%, #7b68ff 100%); border-color: #86a0ff; box-shadow: 0 0 28px #244fff60, inset -2px 1px 5px #ffffff65; }
.btn-ghost { background: #02050b50; border-color: #566488; }
.hero-signals { left: var(--pad); bottom: 132px; }
.hero-signals > div { padding: 0 32px; gap: 15px; border-color: #a0aedb40; }
.hero-signals svg { width: 30px; height: 30px; stroke: #94b1ff; stroke-width: 1.45; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px #416bff65); flex: 0 0 auto; }
.hero-signals span { font-size: 12px; font-weight: 400; color: #d0d4df; }
.hero-sidewords { right: var(--pad); top: 62%; font-size: 8px; letter-spacing: .4em; color: #c6cad8; }
.scroll-cue { bottom: 30px; gap: 14px; }
.scroll-cue small { font-size: 8px; }
.hero-colophon { position: absolute; right: var(--pad); bottom: 43px; text-align: right; }
.hero-colophon > span { display: block; font-size: 7px; letter-spacing: .42em; line-height: 2.4; color: #c3c7d5; }
.hero-colophon > span:before { content: ''; display: inline-block; width: 45px; height: 1px; background: #8c98bf; vertical-align: middle; margin-right: 20px; }
.motion-toggle { background: transparent; border: 0; color: #aeb9d0; padding: 12px 0 0 16px; font-size: 9px; letter-spacing: .06em; }
.motion-toggle i { font-style: normal; margin-left: 8px; }
.manifesto { padding: 130px 0 115px; text-align: center; }
.manifesto:before { content: ''; position: absolute; width: 700px; max-width: 100%; height: 360px; left: 50%; top: 0; transform: translateX(-50%); z-index: -1; background: radial-gradient(ellipse, #244fff10, transparent 65%); }
.manifesto h2 { margin: 0 auto 70px; max-width: 1100px; }
.philosophy-grid { text-align: left; }
.philosophy-grid article { min-height: 205px; padding-top: 30px; }
.philosophy-grid article > span { color: #8696c4; margin-bottom: 36px; font-family: monospace; }
.philosophy-grid h3 { font-size: 24px; }
.philosophy-grid p { font-size: 14px; line-height: 1.8; }
.section-heading { margin-bottom: 56px; }
.capabilities, .work, .process, .marketing-teaser, .faq { padding-top: 110px; padding-bottom: 120px; }
.capabilities:before, .work:before, .process:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, #788ddb35, #788ddb09 65%, transparent); }
.cap-card { grid-template-columns: 70px 1fr 1fr 40px; padding: 35px 0; align-items: center; }
.cap-title h3 { font-size: 29px; }
.cap-title p { font-size: 14px; line-height: 1.8; max-width: 390px; }
.cap-index { font-family: monospace; color: #7c90c6; }
.cap-details span { padding: 7px 11px; font-size: 10px; background: #91a5ff04; border-color: #849cde24; }
.cap-arrow { width: 36px; height: 36px; border: 1px solid #748aca45; border-radius: 50%; display: grid; place-items: center; font-size: 19px; }
.projects-grid { gap: 26px; }
.project-card { border-radius: 10px; min-height: 530px; background: radial-gradient(ellipse at 50% 35%, #173b731b, transparent 70%), #060a13; }
.project-art { height: 340px; }
.project-art.humanizers-art,
.project-art.jamalek-art { height: auto; aspect-ratio: 1; }
.project-top { font-family: monospace; font-size: 9px; padding: 26px; }
.project-bottom { border-top: 1px solid #849cde15; padding: 27px; }
.project-bottom h3 { font-size: 32px; }
.project-bottom p { font-size: 13px; }
.project-humanizers { background: #050508; }
.phone { height: 260px; width: 142px; border-width: 3px; border-color: #454055; }
.phone span { font-size: 75px; }
.automation-band { padding: 120px 0; position: relative; background: radial-gradient(ellipse at 75% 60%, #1f3a9120, transparent 65%), #040813; }
.automation-band:before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#7a99ff05 1px, transparent 1px), linear-gradient(90deg, #7a99ff05 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(90deg, transparent, #000); }
.section-lede { font-size: 16px; margin-top: 28px; max-width: 690px; }
.flow { grid-template-columns: 1fr 60px 1fr 60px 1fr 60px 1fr; }
.flow > div { border-radius: 8px; padding: 28px 15px; background: #0a1126; }
.flow b { font-size: 11px; color: #d4dfff; }
.flow small { font-size: 11px; }
.flow i:after { animation: signal-travel 3s linear infinite; }
.flow i:nth-of-type(2):after { animation-delay: 1s; }
.flow i:nth-of-type(3):after { animation-delay: 2s; }
.process-line h3 { font-size: 24px; }
.why { padding: 100px 0 120px; gap: 65px; }
.why-copy h2 { font-size: clamp(42px, 4.5vw, 68px); }
.why-orbit { width: min(440px, 75vw); background: radial-gradient(circle, #244b9118, transparent 70%); }
.why-orbit:before { animation: orbit-turn 30s linear infinite; }
.why-orbit:after { animation: orbit-turn 40s linear infinite reverse; }
.why-core { width: 135px; padding-left: .28em; }
.why-points p { line-height: 1.8; }
.global-band { padding: 145px 0; background: #030710; }
.global-band:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #02040a 5%, #02040acf 38%, #02040a10), url('assets/hain-cosmic-hero.webp') 75% 45% / cover; opacity: .8; }
.global-globe { display: none; }
.global-inner > p:nth-of-type(2) { max-width: 560px; font-size: 16px; }
.global-meta { font-family: monospace; }
.marketing-teaser { gap: 65px; }
.marketing-teaser h2 { font-size: clamp(42px, 4.2vw, 65px); }
.marketing-prices article { border-radius: 8px; padding: 25px 16px; }
.marketing-prices b { font-size: 27px; }
.faq { gap: 80px; }
.faq summary { font-size: 16px; padding: 25px 0; }
.faq details p { font-size: 14px; }
.final-cta { min-height: 650px; background: radial-gradient(ellipse at 50% 100%, #2344b535, transparent 65%), #02040a; }
.final-cta h2 { font-size: clamp(50px, 6.5vw, 98px); }
.final-planet { width: 150%; max-width: none; height: 800px; aspect-ratio: auto; bottom: -690px; box-shadow: 0 -3px 15px #6d92ff40, 0 -28px 100px #2f53ff30, inset 0 15px 60px #365cd035; }
.footer { grid-template-columns: 1fr 2fr; }
.footer > p { display: none; }
.footer-links { flex-wrap: wrap; font-size: 11px; }
.marketing-hero { position: relative; padding-bottom: 70px; }
.marketing-hero:before { content: ''; position: absolute; inset: 0 -10vw; background: radial-gradient(ellipse at 75% 40%, #1e39ae20, transparent 60%); z-index: -5; }
.marketing-hero-copy h1 { font-size: clamp(58px, 5.5vw, 88px); line-height: 1.06; }
.marketing-hero-copy > p:not(.eyebrow) { font-size: 16px; }
.growth-ring-a { animation: orbit-turn 24s linear infinite; }
.growth-ring-b { animation: orbit-turn 35s linear infinite reverse; }
.pricing-card { border-radius: 12px; }
.reveal { opacity: 1; transform: none; }
.js-motion .reveal { opacity: 0; transform: translateY(24px); }
.js-motion .reveal.in-view { opacity: 1; transform: none; }
.motion-paused *, .motion-paused *:before, .motion-paused *:after { animation-play-state: paused !important; }
.motion-paused .cosmic-scene { transform: none !important; transition: none; }

@keyframes signal-travel { 0% { transform: translateX(-55px); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes orbit-turn { from { transform: rotate(0deg) scaleY(.45) rotate(25deg); } to { transform: rotate(360deg) scaleY(.45) rotate(25deg); } }

@media (min-width: 1800px) { .hero-copy { margin-left: max(0px, calc((100vw - 1660px) / 2)); } }
@media (max-width: 1200px) {
  .site-header { grid-template-columns: 165px 1fr 175px; }
  .desktop-nav { gap: 20px; }
  .desktop-nav a { font-size: 11px; }
  .header-cta { padding: 12px 18px; font-size: 11px; }
  .hero-copy { width: 53%; }
  .hero-copy h1 { font-size: 76px; }
  .hero-signals > div { padding: 0 22px; }
  .hero-sidewords { display: none; }
}
@media (max-width: 980px) {
  :root { --header-h: 86px; --pad: 32px; }
  .site-header { grid-template-columns: 1fr auto; padding: 0 var(--pad); }
  .brand-word { font-size: 28px; }
  .brand-sub { font-size: 9px; }
  .hero { min-height: 860px; height: 100svh; max-height: 1050px; padding: 160px var(--pad) 250px; }
  .hero-copy { width: 68%; max-width: 540px; }
  .hero-copy h1 { font-size: clamp(68px, 9vw, 90px); }
  .cosmic-scene img { object-position: 57% 50%; }
  .hero:before { background: linear-gradient(90deg, #02040acf, #02040a35 85%), linear-gradient(0deg, #02040a, transparent 30%); }
  .hero-signals { position: absolute; display: flex; left: var(--pad); bottom: 100px; margin: 0; border: 0; }
  .hero-signals > div { border: 0; border-right: 1px solid #a0aedb40; padding: 0 20px !important; }
  .hero-signals > div:first-child { padding-left: 0 !important; }
  .hero-signals > div:last-child { border: 0; }
  .hero-signals span { font-size: 10px; }
  .hero-signals svg { width: 25px; height: 25px; }
  .hero-colophon { bottom: 25px; }
  .hero-colophon > span { display: none; }
  .scroll-cue { display: flex; bottom: 20px; }
  .scroll-cue .mouse { display: none; }
  .cap-card { grid-template-columns: 40px 1fr 36px; }
  .cap-details { grid-column: 2 / 4; }
  .flow { grid-template-columns: 1fr; gap: 12px; }
  .flow > div { padding: 20px; }
  .flow i { height: 35px; }
  .flow i:after { animation: none; }
  .project-card { min-height: auto; }
  .project-art { height: 370px; }
  .project-art.humanizers-art,
  .project-art.jamalek-art { height: auto; aspect-ratio: 1; }
  .why { grid-template-columns: 1fr; }
  .why-orbit { order: 0; }
  .marketing-teaser, .faq { grid-template-columns: 1fr; gap: 40px; }
  .mobile-menu { visibility: hidden; }
  .mobile-menu.open { visibility: visible; }
  .mobile-menu-inner { overflow-y: auto; justify-content: flex-start; padding: 112px var(--pad) 35px; gap: 5px; }
  .mobile-menu a { font-size: clamp(25px, 5vh, 43px); }
  .mobile-menu .mobile-project-cta { margin-top: 8px; }
}
@media (max-width: 640px) {
  :root { --pad: 24px; --header-h: 80px; }
  .section-shell { width: calc(100% - 48px); }
  .hero { width: 100%; height: auto; min-height: 960px; max-height: none; padding: 135px 24px 400px; display: block; }
  .hero-copy { width: 100%; max-width: none; }
  .hero-copy .eyebrow { font-size: 8px; letter-spacing: .28em; margin-bottom: 22px; }
  .hero-copy h1 { font-size: clamp(58px, 14.6vw, 88px); line-height: 1.04; margin-bottom: 24px; }
  .hero-lede { font-size: 14px; line-height: 1.8; max-width: 390px; margin-bottom: 26px; }
  .hero-actions { gap: 12px; display: flex; flex-wrap: wrap; }
  .hero-actions .btn { padding: 0 22px; font-size: 11px; gap: 15px; min-height: 49px; }
  .cosmic-scene { inset: 0; }
  .cosmic-scene img { position: absolute; bottom: 60px; height: 540px; object-position: 72% 50%; }
  .hero:before { background: linear-gradient(180deg, #02040a 0%, #02040a 36%, #02040ab0 49%, transparent 65%, #02040a20 76%, #02040a 90%); }
  .hero-signals { bottom: 60px; left: 24px; right: 24px; display: grid; grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .hero-signals > div { padding: 0 !important; border: 0 !important; gap: 12px; }
  .hero-signals span { font-size: 10px; }
  .hero-signals svg { width: 26px; height: 26px; }
  .hero-colophon { right: 24px; bottom: 12px; }
  .scroll-cue { left: 24px; transform: none; bottom: 16px; }
  .scroll-cue small { font-size: 7px; letter-spacing: .22em; }
  h2 { font-size: clamp(36px, 9.5vw, 56px); line-height: 1.15; }
  .manifesto, .capabilities, .work, .process, .why, .marketing-teaser, .faq { padding-top: 75px; padding-bottom: 80px; }
  .manifesto { text-align: left; }
  .manifesto h2 { margin-bottom: 40px; }
  .philosophy-grid { grid-template-columns: 1fr 1fr; }
  .philosophy-grid article { padding: 22px 14px 18px 0 !important; }
  .philosophy-grid article:nth-child(even) { padding-left: 14px !important; }
  .philosophy-grid article > span { margin-bottom: 22px; }
  .philosophy-grid h3 { font-size: 21px; }
  .philosophy-grid p { font-size: 12px; }
  .cap-card { gap: 12px; padding: 25px 0; grid-template-columns: 26px 1fr 32px; }
  .cap-card:hover { padding-left: 0; padding-right: 0; }
  .cap-title h3 { font-size: 24px; line-height: 1.3; }
  .cap-title p { font-size: 13px; }
  .cap-details span { font-size: 9px; }
  .project-art { height: 290px; }
  .project-art.humanizers-art,
  .project-art.jamalek-art { height: auto; aspect-ratio: 1; }
  .project-top, .project-bottom { padding: 21px 18px; }
  .project-top { font-size: 8px; gap: 10px; }
  .project-bottom { align-items: start; flex-direction: column; gap: 13px; }
  .project-bottom h3 { font-size: 29px; }
  .project-link { font-size: 11px; }
  .phone { width: 128px; height: 235px; }
  .automation-band { padding: 85px 0; }
  .section-lede { font-size: 14px; }
  .why-copy h2, .marketing-teaser h2 { font-size: clamp(36px, 9.5vw, 56px); }
  .why-orbit { width: 75vw; }
  .why-core { width: 105px; font-size: 20px; }
  .why-points { margin-top: 0; }
  .global-band { padding: 90px 0; }
  .global-band:after { opacity: .45; }
  .marketing-prices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .marketing-prices article { padding: 18px 10px; min-height: 140px; }
  .marketing-prices b { font-size: clamp(18px, 5vw, 27px); }
  .marketing-prices small { font-size: 8px; margin-bottom: 25px; }
  .marketing-prices span { font-size: 9px; }
  .faq summary { font-size: 14px; }
  .final-cta { min-height: 530px; }
  .final-cta h2 { font-size: clamp(42px, 11vw, 67px); }
  .final-planet { width: 220%; }
  .footer { grid-template-columns: 1fr; padding-top: 40px; }
  .footer-links { justify-content: start; }
  .marketing-hero { padding-top: 130px; padding-bottom: 20px; gap: 30px; }
  .marketing-hero-copy h1 { font-size: clamp(48px, 12vw, 70px); }
  .packages, .comparison { padding-top: 75px; padding-bottom: 80px; }
  .pricing-card { min-height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; }
  .js-motion .reveal { opacity: 1; transform: none; }
  .cosmic-scene { transform: none !important; }
}