/* Approved light composition, integrated with the full corporate site. */
:root{--pale:#f5f6f7;--blue:#eef3f6;--ink:#202830;--muted:#596570;--action:#007c98}
.prototype-bar{display:none}
.site-header{height:86px;background:#f5f6f7;border-bottom:0;padding-left:6.5%;padding-right:6.5%}
.brand img{width:170px}.desktop-nav{gap:26px;font-size:13px}.header-actions{gap:16px}.header-demo{border-radius:5px;font-size:12px}
.hero{height:calc(100svh - var(--site-chrome,86px));min-height:540px;max-height:1080px;background:#f5f6f7;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;align-items:center;padding:0 10.5% 24px;gap:0;text-align:left;isolation:isolate}
.hero:before{content:'';position:absolute;z-index:-1;width:110%;height:180%;left:42%;top:-42%;border-radius:50%;background:linear-gradient(135deg,rgba(212,224,233,.34),rgba(255,255,255,.06) 48%);border:1px solid rgba(255,255,255,.65);transform:rotate(-24deg);pointer-events:none}
.hero-copy{max-width:520px;margin:0;min-width:0;padding:0}
.hero h1{font-size:clamp(36px,3.5vw,64px);font-weight:750;line-height:1.13;letter-spacing:-.035em;margin:0 0 28px;max-width:none}
.hero h1 span{display:block;white-space:nowrap}
.hero .lead{max-width:440px;font-size:clamp(15px,1.12vw,18px);line-height:1.8;margin:0 0 32px}
.hero .actions{justify-content:flex-start;gap:25px;margin:0;font-size:13px}
.hero .button{padding:14px 22px;border-radius:5px;font-size:13px;min-height:0}
.hero .button:hover{transform:none}.hero .text-link{font-size:13px}
.hero-stage{width:145%;max-width:none;left:-19%;margin:0;display:block;isolation:auto;pointer-events:none}
.hero-stage:before{display:none!important}
.hero .hero-image{width:100%;height:auto;max-height:55svh;object-fit:contain;margin:0;mix-blend-mode:normal}
.hero-foot{grid-column:1/-1;width:100%;font-size:11px;padding:8px 0 0;position:relative;margin:0;display:flex;justify-content:space-between}
.hero.entering h1 span{animation:light-reveal 1.15s .2s cubic-bezier(.16,1,.3,1) both}
.hero.entering h1 span:nth-child(2){animation-delay:.48s}
.hero.entering .lead{animation:light-reveal 1s .75s cubic-bezier(.16,1,.3,1) both}
.hero.entering .actions{animation:light-reveal 1s .95s cubic-bezier(.16,1,.3,1) both}
.hero.entering .hero-image{animation:light-product 1.4s .1s cubic-bezier(.16,1,.3,1) both}
@keyframes light-reveal{from{opacity:0;transform:translateY(26px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0)}}
@keyframes light-product{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.site-header{padding-left:5%;padding-right:5%}.desktop-nav{gap:14px;font-size:12px}.brand img{width:145px}.hero{padding-left:7%;padding-right:7%}.hero h1{font-size:3.65vw}.header-actions{gap:10px}}
@media(max-width:850px){.hero{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;padding:36px 8% 16px;text-align:center;min-height:620px;gap:14px}.hero-copy{max-width:none}.hero h1{font-size:clamp(30px,5.3vw,44px);margin-bottom:18px}.hero .lead{margin:0 auto 22px;max-width:420px}.hero .actions{justify-content:center}.hero-stage{width:100%;left:0}.hero .hero-image{max-height:34svh}.hero-foot{grid-column:1}.hero:before{left:15%;top:28%;width:160%;height:120%}}
@media(max-width:600px){.site-header{height:72px}.brand img{width:135px}.hero{min-height:620px;padding-top:28px}.hero h1{font-size:clamp(29px,6.5vw,38px)}.hero .lead{font-size:14px;max-width:300px}.hero .actions{gap:18px}.hero .button{padding:12px 16px;font-size:12px}.hero .text-link{font-size:12px}.hero-foot{font-size:9px;gap:20px}.hero .hero-image{max-height:31svh}}
@media(prefers-reduced-motion:reduce){.hero.entering h1 span,.hero.entering .lead,.hero.entering .actions,.hero.entering .hero-image{animation:none}}

/* Approved two-line slow entrance. */
.hero.entering h1 span{animation:approved-line 1.9s .3s cubic-bezier(.22,.61,.36,1) both}
.hero.entering h1 span:nth-child(2){animation-delay:1.45s}
.hero.entering .lead{animation:light-product 1.2s 2.9s ease-out both}
.hero.entering .actions{animation:light-product 1.2s 3.15s ease-out both}
.hero.entering .hero-image{animation:light-product 1.8s .1s ease-out both}
@keyframes approved-line{0%{opacity:0;transform:translateY(12px);filter:blur(4px);clip-path:none}65%{opacity:.85;filter:blur(.4px)}100%{opacity:1;transform:translateY(0);filter:blur(0);clip-path:none}}
@media(prefers-reduced-motion:reduce){.hero.entering h1 span,.hero.entering .lead,.hero.entering .actions,.hero.entering .hero-image{animation:none}}