*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#361C0E;color:#FFFFFF;font-family:"DM Sans",system-ui,sans-serif}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}::selection{background:#570211;color:#000000}
body:before{content:"";position:fixed;inset:0;z-index:-5;background:radial-gradient(circle at 75% 0%,rgba(87,2,17,.12),transparent 28%),radial-gradient(circle at 0 55%,rgba(87,2,17,.09),transparent 28%),#361C0E}.wrap{width:min(1180px,calc(100% - 44px));margin:auto}
.header{position:fixed;top:0;left:0;right:0;z-index:100}.nav-shell{width:min(1200px,calc(100% - 34px));margin:13px auto}.nav{height:70px;border:1px solid rgba(87,2,17,.12);border-radius:19px;padding:0 17px 0 18px;background:rgba(0,0,0,.82);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:space-between;box-shadow:0 16px 50px rgba(0,0,0,.16)}.logo{display:inline-flex;align-items:center;gap:10px;font-family:"Space Grotesk";font-size:18px;font-weight:700;white-space:nowrap}.logo-mark{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#570211,#7E3110);color:#000000;box-shadow:0 0 0 1px rgba(126,49,16,.25),0 0 28px rgba(126,49,16,.16);animation:logoFloat 4s ease-in-out infinite}.logo-mark span{font-size:18px;font-weight:900;animation:logoSpin 8s linear infinite}.logo b{color:#570211}.desktop-nav{display:flex;align-items:center;gap:26px;height:100%}.desktop-nav>a:not(.nav-cta),.drop-trigger{font-size:13px;color:#FFFFFF;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:.25s}.desktop-nav>a:not(.nav-cta):hover,.drop-trigger:hover,.drop-trigger.active{color:#FFFFFF}.nav-cta,.primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 18px;border-radius:12px;background:linear-gradient(135deg,#570211,#7E3110);color:#000000;font-size:12px;font-weight:900;box-shadow:0 12px 35px rgba(87,2,17,.18);transition:.3s}.nav-cta:hover,.primary:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(87,2,17,.28)}.drop{height:100%;display:flex;align-items:center;position:relative}.rot{transform:rotate(180deg)}.mega{position:absolute;top:66px;left:50%;transform:translateX(-50%);width:720px;padding:20px;border:1px solid rgba(87,2,17,.2);border-radius:20px;background:rgba(54,8,37,.97);backdrop-filter:blur(24px);box-shadow:0 35px 90px rgba(0,0,0,.48);animation:menuIn .22s ease}.mega.industries{width:720px}.mega-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:15px;padding:0 3px}.mega-top span{font-size:9px;letter-spacing:.2em;color:#570211;font-weight:900}.mega-top small{font-size:10px;color:#FFFFFF}.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.mega-item{display:grid;grid-template-columns:38px 1fr 15px;align-items:center;gap:10px;padding:12px;border-radius:13px;border:1px solid transparent;transition:.25s}.mega-item:hover{background:rgba(87,2,17,.07);border-color:rgba(87,2,17,.15);transform:translateX(3px)}.mi-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#570211;background:rgba(87,2,17,.08)}.mega-item b{display:block;font-size:12px;color:#FFFFFF}.mega-item small{display:block;color:#FFFFFF;font-size:9px;line-height:1.4;margin-top:3px}.mega-item>svg{color:#570211}.hamb{display:none;border:0;background:none;color:#FFFFFF}.mobile-menu{display:none}.ticker{overflow:hidden;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);background:rgba(0,0,0,.14);padding:13px 0}.ticker-track{width:max-content;display:flex;gap:55px;animation:marquee 24s linear infinite}.ticker-track span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#FFFFFF;white-space:nowrap}.ticker-track i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#570211;box-shadow:0 0 10px #570211}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes logoFloat{50%{transform:translateY(-2px) rotate(-2deg)}}@keyframes logoSpin{50%{transform:rotate(5deg)}}@keyframes menuIn{from{opacity:0;transform:translateX(-50%) translateY(-7px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.hero{min-height:730px;padding-top:125px;padding-bottom:55px;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:48px}.hero-copy h1,.inner-hero h1,.detail-copy h1{font-family:"Space Grotesk";font-size:clamp(58px,6.8vw,92px);line-height:.95;letter-spacing:-.065em;margin:22px 0}.hero-copy h1 span,.inner-hero h1 span,.detail-copy h1 span{color:#570211}.hero-copy>p,.inner-hero>p,.detail-copy>p{font-size:16px;line-height:1.85;color:#FFFFFF;max-width:700px}.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}.secondary{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border:1px solid rgba(255,255,255,.1);border-radius:12px;color:#FFFFFF;font-size:12px;font-weight:800;transition:.3s}.secondary:hover{border-color:rgba(87,2,17,.35);transform:translateY(-3px);background:rgba(87,2,17,.05)}.trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:25px;color:#FFFFFF;font-size:13px}.trust span{display:flex;align-items:center;gap:5px}.trust svg{width:15px;color:#570211}.hero-visual{display:flex;justify-content:center}.command{width:min(100%,500px);min-height:515px;border-radius:30px;border:1px solid rgba(87,2,17,.2);background:linear-gradient(145deg,rgba(3,44,77,.68),rgba(0,0,0,.95));box-shadow:0 45px 110px rgba(0,0,0,.38),0 0 80px rgba(87,2,17,.06);padding:24px;transform:perspective(1100px) rotateY(-5deg);transition:.5s;position:relative;overflow:hidden}.command:hover{transform:perspective(1100px) rotateY(0) translateY(-7px)}.command:after{content:"";position:absolute;left:0;right:0;height:1px;background:#570211;opacity:.3;animation:scan 5s linear infinite}@keyframes scan{from{top:0}to{top:100%}}.command-head{display:flex;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.06)}.command-head small{display:block;color:#570211;font-size:8px;letter-spacing:.2em}.command-head b{display:block;font-size:13px;margin-top:4px}.command-head span{font-size:8px;color:#570211}.ai-orbit{height:235px;display:grid;place-items:center;position:relative}.ai-core{width:80px;height:80px;border-radius:50%;display:grid;place-items:center;color:#7E3110;border:1px solid rgba(126,49,16,.35);background:rgba(87,2,17,.08);box-shadow:0 0 60px rgba(126,49,16,.18);animation:breathe 3s ease-in-out infinite;z-index:2}.orbit-line{position:absolute;border:1px solid rgba(87,2,17,.2);border-radius:50%}.orbit-line.a{width:190px;height:105px;transform:rotate(-20deg)}.orbit-line.b{width:285px;height:145px;transform:rotate(28deg)}.orb-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#570211;box-shadow:0 0 14px #570211}.d1{top:43px;right:95px}.d2{bottom:43px;left:100px}.d3{top:115px;left:65px}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mini-stats div{padding:12px;border:1px solid rgba(255,255,255,.06);border-radius:11px}.mini-stats small{display:block;color:#FFFFFF;font-size:9px}.mini-stats b{display:block;color:#FFFFFF;font-size:18px;margin-top:4px}.activity{margin-top:10px;border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden}.activity div{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:10px;border-bottom:1px solid rgba(255,255,255,.05);font-size:10px;color:#FFFFFF}.activity div:last-child{border:0}.activity span{color:#570211}.activity em{font-style:normal;font-size:8px;color:#570211}
.metrics{border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr)}.metric{padding:23px 25px;border-right:1px solid rgba(255,255,255,.06);transition:.3s}.metric:last-child{border:0}.metric:hover{background:rgba(87,2,17,.025)}.metric b{display:block;font-family:"Space Grotesk";font-size:28px;color:#570211}.metric span{display:block;font-size:12px;color:#FFFFFF;margin-top:5px}
.section{padding-top:105px}.section-heading{max-width:850px;margin:0 auto 48px;text-align:center}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#FFFFFF;text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:900}.eyebrow i{width:7px;height:7px;border-radius:50%;background:#7E3110;box-shadow:0 0 0 7px rgba(126,49,16,.07);animation:pulse 2.3s infinite}.section-heading h2{font-family:"Space Grotesk";font-size:clamp(44px,5.2vw,68px);line-height:1;letter-spacing:-.055em;margin:15px 0 17px}.section-heading p{font-size:15px;line-height:1.8;color:#FFFFFF;max-width:820px;margin:auto}.cards-grid{display:grid;gap:14px}.industries-grid{grid-template-columns:repeat(3,1fr)}.services-grid{grid-template-columns:repeat(4,1fr)}.glass-card,.process-card,.detail-feature,.story-card{border:1px solid rgba(255,255,255,.075);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));position:relative;overflow:hidden;transition:.35s}.glass-card{padding:25px}.glass-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 0 0,rgba(87,2,17,.13),transparent 50%);opacity:0;transition:.3s}.glass-card:hover{transform:translateY(-7px);border-color:rgba(87,2,17,.27);box-shadow:0 25px 65px rgba(0,0,0,.24)}.glass-card:hover:before{opacity:1}.glass-card>*{position:relative}.number{color:#FFFFFF;letter-spacing:.18em;font-size:10px}.card-icon{width:45px;height:45px;margin-top:15px;display:grid;place-items:center;border-radius:13px;color:#570211;background:rgba(87,2,17,.08);border:1px solid rgba(87,2,17,.15)}.card-icon svg{width:21px}.glass-card h3{font-size:18px;line-height:1.2;margin:20px 0 10px}.glass-card p{font-size:12px;line-height:1.75;color:#FFFFFF;min-height:64px}.glass-card a{display:inline-flex;align-items:center;gap:6px;color:#FFFFFF;font-size:11px;font-weight:900;margin-top:15px}.glass-card a svg{width:14px;transition:.25s}.glass-card a:hover svg{transform:translateX(4px)}.about-card{display:grid;grid-template-columns:1fr 1fr;gap:45px;padding:52px;border:1px solid rgba(87,2,17,.17);border-radius:28px;background:linear-gradient(135deg,rgba(87,2,17,.07),rgba(255,255,255,.018))}.about-card h2,.contact-copy h2{font-family:"Space Grotesk";font-size:clamp(42px,4.6vw,62px);line-height:1;letter-spacing:-.055em;margin:17px 0}.about-card p,.contact-copy p{color:#FFFFFF;font-size:14px;line-height:1.85}.checks{display:grid;gap:11px;margin-top:25px}.checks span{display:flex;align-items:center;gap:8px;font-size:12px;color:#FFFFFF}.checks svg{width:15px;color:#570211}.about-orbit{min-height:380px;display:grid;place-items:center;position:relative}.orbit-core{width:260px;height:260px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid rgba(87,2,17,.2);background:radial-gradient(circle,rgba(87,2,17,.14),transparent 68%);box-shadow:0 0 100px rgba(87,2,17,.08)}.orbit-core svg{color:#570211}.orbit-core b{font-size:17px;margin-top:12px}.orbit-core small{color:#FFFFFF;font-size:10px;line-height:1.6;max-width:175px;margin-top:8px}.float-card{position:absolute;display:flex;align-items:center;gap:7px;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(6,21,13,.92);font-size:10px;box-shadow:0 20px 50px rgba(0,0,0,.25)}.float-card svg{color:#570211;width:15px}.float-card.one{top:18px;right:0}.float-card.two{bottom:18px;left:0}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.process-card{padding:28px}.process-card>b{font-family:"Space Grotesk";font-size:31px;color:#570211}.process-card h3{font-size:19px;margin:22px 0 9px}.process-card p{font-size:12px;color:#FFFFFF;line-height:1.75}
.contact-section{padding-bottom:105px}.contact-card{display:grid;grid-template-columns:.88fr 1.12fr;gap:48px;padding:45px;border:1px solid rgba(87,2,17,.2);border-radius:28px;background:linear-gradient(135deg,rgba(87,2,17,.08),rgba(255,255,255,.018))}.direct-contact{display:grid;gap:12px;margin-top:25px}.direct-contact a{display:flex;align-items:center;gap:10px;color:#FFFFFF;font-size:13px}.direct-contact svg{width:18px;color:#570211}.direct-contact small{display:block;color:#FFFFFF;font-size:9px;margin-bottom:2px}.contact-form{display:grid;gap:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:14px 15px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(0,0,0,.18);color:#FFFFFF;outline:0;font-size:12px}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:rgba(87,2,17,.5);box-shadow:0 0 0 3px rgba(87,2,17,.05)}.contact-form textarea{min-height:135px;resize:vertical}.submit{border:0;cursor:pointer;width:100%}.submit:disabled{opacity:.7}.success{display:flex;align-items:center;gap:8px;padding:13px 15px;border:1px solid rgba(87,2,17,.2);border-radius:11px;background:rgba(87,2,17,.07);color:#570211;font-size:11px}.success svg{width:16px}
.detail-page,.inner-page{padding-top:115px}.detail-hero{position:relative;min-height:570px;padding-top:70px;display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}.detail-icon{width:66px;height:66px;margin-top:26px;display:grid;place-items:center;color:#570211;background:rgba(87,2,17,.08);border:1px solid rgba(87,2,17,.18);border-radius:17px;box-shadow:0 0 40px rgba(87,2,17,.06)}.detail-icon svg{width:28px}.detail-panel{padding:28px;border:1px solid rgba(87,2,17,.18);border-radius:25px;background:linear-gradient(145deg,rgba(87,2,17,.07),rgba(255,255,255,.02));box-shadow:0 30px 80px rgba(0,0,0,.25)}.detail-panel>small{display:block;color:#570211;font-size:9px;letter-spacing:.18em}.detail-panel>b{display:block;font-family:"Space Grotesk";font-size:25px;margin:10px 0 24px}.detail-bars{display:grid;gap:14px}.detail-bars>div{display:grid;grid-template-columns:28px 1fr;gap:8px}.detail-bars span{color:#570211;font-size:10px}.detail-bars label{font-size:11px;color:#FFFFFF}.detail-bars i{grid-column:2;height:3px;border-radius:5px;background:linear-gradient(90deg,#570211,#7E3110);display:block}.detail-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.detail-feature{padding:25px}.detail-feature>span{color:#570211;font-size:10px;letter-spacing:.15em}.detail-feature>svg{float:right;color:#570211;width:17px}.detail-feature h3{font-size:17px;margin:25px 0 9px}.detail-feature p{color:#FFFFFF;font-size:12px;line-height:1.75}.inner-hero{position:relative;min-height:500px;padding-top:90px;display:flex;flex-direction:column;justify-content:center}.inner-hero h1{max-width:950px}.inner-hero>p{max-width:760px}.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.story-card{padding:30px}.story-card>svg{color:#570211;width:23px}.story-card h2{font-family:"Space Grotesk";font-size:25px;margin:22px 0 10px}.story-card p{color:#FFFFFF;line-height:1.8;font-size:13px}.legal{padding-top:160px;padding-bottom:100px}.legal h1{font-family:"Space Grotesk";font-size:64px;letter-spacing:-.05em;margin:18px 0}.legal-lead{color:#FFFFFF;max-width:760px;line-height:1.8}.legal section{max-width:820px;border-top:1px solid rgba(255,255,255,.07);padding:25px 0}.legal h2{font-size:20px}.legal section p{color:#FFFFFF;font-size:13px;line-height:1.85}
footer{border-top:1px solid rgba(255,255,255,.07);padding-top:65px}.footer-main{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr;gap:42px;padding-bottom:58px}.footer-brand>p{max-width:380px;color:#FFFFFF;font-size:13px;line-height:1.8;margin:18px 0}.footer-main h4{font-size:13px;margin:4px 0 17px;color:#FFFFFF}.footer-main>div>a:not(.logo):not(.footer-cta){display:block;color:#FFFFFF;font-size:12px;margin:12px 0;transition:.25s}.footer-main>div>a:not(.logo):not(.footer-cta):hover{color:#FFFFFF;transform:translateX(5px)}.footer-contact{display:flex!important;align-items:center;gap:8px}.footer-contact svg{width:15px;color:#570211}.socials{display:flex;gap:9px;margin:18px 0}.socials a{width:37px;height:37px;border-radius:11px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:#FFFFFF;transition:.3s}.socials a:hover{color:#000000;background:#570211;border-color:#570211;transform:translateY(-4px) rotate(-4deg);box-shadow:0 12px 30px rgba(87,2,17,.2)}.socials svg{width:16px}.footer-cta{display:inline-flex!important;align-items:center;gap:8px;padding:12px 15px;border-radius:11px;background:linear-gradient(135deg,#570211,#7E3110);color:#000000!important;font-size:11px!important;font-weight:900!important;transition:.3s}.footer-cta:hover{transform:translateY(-3px)!important}.footer-cta.mini{margin-top:8px}.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding:20px 0;display:flex;justify-content:space-between;color:#FFFFFF;font-size:10px}.footer-bottom a:hover{color:#FFFFFF}.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}.reveal.in-view{opacity:1;transform:none}@keyframes pulse{50%{box-shadow:0 0 0 13px rgba(126,49,16,0)}}
@media(max-width:1050px){.desktop-nav{gap:16px}.services-grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.hero-visual{justify-content:flex-start}.command{transform:none}.industries-grid{grid-template-columns:repeat(2,1fr)}.detail-hero{grid-template-columns:1fr}.footer-main{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.wrap{width:calc(100% - 28px)}.nav-shell{width:calc(100% - 20px)}.nav{height:62px}.desktop-nav{display:none}.hamb{display:grid;place-items:center;width:42px;height:42px}.mobile-menu{display:block;margin-top:8px;padding:10px;border:1px solid rgba(87,2,17,.16);border-radius:16px;background:rgba(54,8,37,.98);box-shadow:0 25px 60px rgba(0,0,0,.4);animation:mobileIn .2s ease}.mobile-menu>a,.mobile-section>button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 11px;border:0;border-bottom:1px solid rgba(255,255,255,.06);background:none;color:#FFFFFF;font-size:13px;text-align:left}.mobile-menu .nav-cta{margin-top:9px;border:0;justify-content:center}.mobile-sub{padding:4px 0 5px}.mobile-sub a{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 22px;color:#FFFFFF;font-size:11px}.mobile-sub svg{width:14px;color:#570211}.hero{min-height:auto;padding-top:105px;padding-bottom:35px;gap:35px}.hero-copy h1,.inner-hero h1,.detail-copy h1{font-size:clamp(48px,15vw,70px)}.hero-copy>p,.inner-hero>p,.detail-copy>p{font-size:14px}.trust{font-size:12px}.command{min-height:490px}.metrics-grid{grid-template-columns:1fr 1fr}.metric{padding:19px 15px}.metric b{font-size:24px}.metric span{font-size:10px}.ticker-track{gap:32px}.section{padding-top:78px}.section-heading{margin-bottom:34px}.section-heading h2{font-size:clamp(38px,11vw,52px)}.section-heading p{font-size:13px}.industries-grid,.services-grid,.process-grid,.story-grid,.detail-cards{grid-template-columns:1fr}.about-card,.contact-card{grid-template-columns:1fr;padding:28px;gap:30px}.about-card h2,.contact-copy h2{font-size:42px}.about-orbit{min-height:320px}.orbit-core{width:230px;height:230px}.float-card.one{right:-4px}.float-card.two{left:-4px}.form-row{grid-template-columns:1fr}.contact-section{padding-bottom:78px}.detail-hero{padding-top:65px;min-height:auto}.detail-panel{margin-top:20px}.inner-hero{min-height:430px;padding-top:60px}.legal{padding-top:125px}.legal h1{font-size:48px}.footer-main{grid-template-columns:1fr;gap:28px}.footer-main>div>a:not(.logo):not(.footer-cta){font-size:13px;margin:13px 0}.footer-brand>p{font-size:13px}.footer-bottom{flex-direction:column;gap:8px;line-height:1.6}.footer-cta{font-size:12px!important}.mega{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@keyframes breathe{50%{transform:scale(1.08)}}@keyframes mobileIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
/* FINAL RESPONSIVE TYPOGRAPHY + ABOUT PAGE POLISH */
@media (min-width: 1051px) {
.desktop-nav>a:not(.nav-cta), .drop-trigger {font-size:14px}
.hero-copy>p,.inner-hero>p,.detail-copy>p{font-size:17px}
.hero-copy h1{font-size:clamp(68px,6.4vw,96px)}
.section-heading h2{font-size:clamp(52px,4.7vw,72px)}
.section-heading p{font-size:16px}
.glass-card h3{font-size:20px}
.glass-card p{font-size:13px}
.glass-card a{font-size:12px}
.process-card h3{font-size:21px}
.process-card p{font-size:13px}
.footer-main>div>a:not(.logo):not(.footer-cta){font-size:13px}
.footer-brand>p{font-size:14px}
.footer-main h4{font-size:14px}
.footer-bottom{font-size:11px}
}
.about-intro{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;padding:42px;border:1px solid rgba(87,2,17,.14);border-radius:25px;background:linear-gradient(135deg,rgba(87,2,17,.055),rgba(255,255,255,.012))}
.about-intro h2,.about-values h2,.about-markets h2{font-family:"Space Grotesk";font-size:clamp(38px,4.4vw,60px);line-height:1;letter-spacing:-.055em;margin:16px 0 0}
.about-intro>p,.about-values p,.about-markets>p{color:#FFFFFF;font-size:15px;line-height:1.9;margin:0}
.about-story-grid{grid-template-columns:repeat(3,1fr)}
.story-kicker{display:block;color:#570211;font-size:9px;letter-spacing:.16em;font-weight:900;margin-top:22px}
.story-card ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:9px}
.story-card li{font-size:12px;color:#FFFFFF;position:relative;padding-left:17px}
.story-card li:before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:#570211;box-shadow:0 0 8px rgba(87,2,17,.4)}
.about-values{display:grid;grid-template-columns:1fr 1fr;gap:65px;padding:45px;border-radius:27px;border:1px solid rgba(87,2,17,.16);background:linear-gradient(135deg,rgba(87,2,17,.06),rgba(255,255,255,.012))}
.value-list{display:grid;gap:0}
.value-list>div{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.value-list>div:last-child{border:0}
.value-list b{display:block;color:#FFFFFF;font-family:"Space Grotesk";font-size:18px;margin-bottom:5px}
.value-list span{display:block;color:#FFFFFF;font-size:13px;line-height:1.65}
.about-markets{padding:50px;text-align:center;border:1px solid rgba(87,2,17,.16);border-radius:28px;background:radial-gradient(circle at center,rgba(87,2,17,.08),transparent 62%)}
.about-markets>p{max-width:780px;margin:18px auto 0}
.market-pills{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:25px}
.market-pills span{padding:10px 14px;border:1px solid rgba(87,2,17,.18);border-radius:999px;color:#FFFFFF;background:rgba(87,2,17,.04);font-size:12px;transition:.25s}
.market-pills span:hover{color:#361C0E;background:#570211;transform:translateY(-3px)}
.footer-brand>.footer-cta{display:none!important}
@media(max-width:1050px){
.about-intro,.about-values{grid-template-columns:1fr;gap:30px}
.about-story-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
.about-intro,.about-values,.about-markets{padding:27px}
.about-story-grid{grid-template-columns:1fr}
.about-intro h2,.about-values h2,.about-markets h2{font-size:40px}
.about-intro>p,.about-values p,.about-markets>p{font-size:14px}
.story-card h2{font-size:27px}
.story-card p{font-size:13px}
}
@media(min-width:761px) and (max-width:1050px){
.hero-copy h1,.inner-hero h1,.detail-copy h1{font-size:64px}
.section-heading h2{font-size:52px}
.hero-copy>p,.inner-hero>p,.detail-copy>p{font-size:15px}
}
:root{--scroll-progress:0%;--motion-ease:cubic-bezier(.22,1,.36,1)}
html:before{content:"";position:fixed;z-index:9999;left:0;top:0;height:2px;width:var(--scroll-progress);background:linear-gradient(90deg,#570211,#7E3110,#570211);box-shadow:0 0 16px rgba(87,2,17,.65);pointer-events:none}
.header{transition:transform .5s var(--motion-ease),padding .5s var(--motion-ease)}
.header.is-scrolled .nav{height:62px;border-color:rgba(87,2,17,.22);box-shadow:0 18px 65px rgba(0,0,0,.34),0 0 30px rgba(87,2,17,.04)}
.nav{transition:height .5s var(--motion-ease),border-color .4s,box-shadow .4s}
body{overflow-x:hidden}
body:after{content:"";position:fixed;inset:auto -12vw -28vh auto;width:48vw;height:48vw;border-radius:50%;background:radial-gradient(circle,rgba(87,2,17,.055),transparent 65%);filter:blur(25px);z-index:-4;pointer-events:none;animation:ambientDrift 14s ease-in-out infinite alternate}
.cinematic-section{position:relative}
.cinematic-section:before{content:"";position:absolute;z-index:-1;left:50%;top:10%;width:75%;height:65%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(87,2,17,.045),transparent 68%);filter:blur(12px);pointer-events:none;animation:sectionBreath 8s ease-in-out infinite}
.hero{position:relative;isolation:isolate}
.hero-motion-layer{position:absolute;inset:-12% -8%;z-index:-1;overflow:hidden;pointer-events:none;opacity:.72}
.flow-ribbon{position:absolute;width:75%;height:24%;border:1px solid rgba(87,2,17,.13);border-radius:50%;transform-origin:center}
.flow-ribbon.r1{right:-15%;top:25%;transform:rotate(-22deg);animation:ribbonFloat 10s ease-in-out infinite}
.flow-ribbon.r2{left:-18%;top:52%;transform:rotate(18deg);width:70%;animation:ribbonFloatReverse 13s ease-in-out infinite}
.flow-ribbon:after{content:"";position:absolute;inset:-35px 10%;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(87,2,17,.12),transparent);filter:blur(12px);animation:ribbonLight 6s linear infinite}
.flow-orb{position:absolute;border-radius:50%;border:1px solid rgba(87,2,17,.13);background:radial-gradient(circle,rgba(87,2,17,.13),transparent 68%);box-shadow:0 0 90px rgba(87,2,17,.06)}
.flow-orb.o1{width:230px;height:230px;right:10%;top:8%;animation:orbFloat 7s ease-in-out infinite}
.flow-orb.o2{width:120px;height:120px;left:10%;bottom:12%;animation:orbFloatReverse 9s ease-in-out infinite}
.hero-visual{animation:heroVisualIn 1.15s var(--motion-ease) both .15s}
.command{animation:commandFloat 7s ease-in-out infinite}
.ai-orbit .orbit-line.a{animation:orbitSpin 13s linear infinite}
.ai-orbit .orbit-line.b{animation:orbitSpinReverse 18s linear infinite}
.ai-core{animation:breathe 3s ease-in-out infinite,coreGlow 4s ease-in-out infinite}
.ticker-track:hover{animation-play-state:paused}
.section-heading .eyebrow{animation:eyebrowIn .9s var(--motion-ease) both}
.section-heading h2{animation:titleTracking 1.1s var(--motion-ease) both}
.section-heading p{animation:copyRise 1s var(--motion-ease) both .12s}
.reveal{transition:opacity .9s var(--motion-ease),transform 1s var(--motion-ease),filter 1s var(--motion-ease);transition-delay:var(--reveal-delay,0ms);filter:blur(7px)}
.reveal.in-view{filter:blur(0)}
.glass-card,.process-card,.story-card,.detail-feature,.detail-panel,.about-card,.contact-card{--mx:50%;--my:50%}
.glass-card:after,.process-card:after,.story-card:after,.detail-feature:after,.detail-panel:after,.about-card:after,.contact-card:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(87,2,17,.10),transparent 62%);opacity:0;transition:opacity .35s}
.glass-card:hover:after,.process-card:hover:after,.story-card:hover:after,.detail-feature:hover:after,.detail-panel:hover:after,.about-card:hover:after,.contact-card:hover:after{opacity:1}
.glass-card:hover{transform:translateY(-9px) scale(1.012)}
.process-card:hover,.story-card:hover,.detail-feature:hover{transform:translateY(-6px)}
.glass-card .card-icon{transition:transform .5s var(--motion-ease),box-shadow .5s}
.glass-card:hover .card-icon{transform:rotate(-7deg) scale(1.12);box-shadow:0 0 28px rgba(87,2,17,.12)}
.mega-item{position:relative;overflow:hidden}
.mega-item:before{content:"";position:absolute;left:-100%;top:0;width:70%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);transform:skewX(-20deg);transition:left .7s var(--motion-ease)}
.mega-item:hover:before{left:140%}
.nav-cta,.primary,.footer-cta{position:relative;overflow:hidden}
.nav-cta:after,.primary:after,.footer-cta:after{content:"";position:absolute;top:-50%;left:-60%;width:35%;height:200%;transform:rotate(25deg);background:rgba(255,255,255,.28);filter:blur(7px);transition:left .8s var(--motion-ease)}
.nav-cta:hover:after,.primary:hover:after,.footer-cta:hover:after{left:130%}
.about-orbit .orbit-core{animation:aboutCore 6s ease-in-out infinite}
.float-card.one{animation:floatOne 5s ease-in-out infinite}
.float-card.two{animation:floatTwo 6s ease-in-out infinite}
.detail-icon{animation:iconPulse 4s ease-in-out infinite}
.detail-bars i{transform-origin:left;animation:barGrow 1.2s var(--motion-ease) both}
.direct-contact a{transition:transform .3s var(--motion-ease),color .3s}
.direct-contact a:hover{transform:translateX(6px);color:#FFFFFF}
.socials a{position:relative;overflow:hidden}
.socials a:after{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.18),transparent 35%);animation:socialSweep 4s linear infinite;opacity:0}
.socials a:hover:after{opacity:1}
@keyframes ambientDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-5vw,-4vh,0) scale(1.12)}}
@keyframes sectionBreath{0%,100%{opacity:.55;transform:translateX(-50%) scale(.96)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}
@keyframes ribbonFloat{0%,100%{transform:rotate(-22deg) translate3d(0,0,0) scale(1)}50%{transform:rotate(-17deg) translate3d(-3%,5%,0) scale(1.05)}}
@keyframes ribbonFloatReverse{0%,100%{transform:rotate(18deg) translate3d(0,0,0)}50%{transform:rotate(12deg) translate3d(4%,-5%,0) scale(1.08)}}
@keyframes ribbonLight{0%{transform:translateX(-55%)}100%{transform:translateX(55%)}}
@keyframes orbFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-20px,22px,0) scale(1.08)}}
@keyframes orbFloatReverse{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(22px,-18px,0) scale(1.12)}}
@keyframes heroVisualIn{from{opacity:0;transform:translate3d(50px,25px,0) scale(.92) rotateY(-10deg)}to{opacity:1;transform:none}}
@keyframes commandFloat{0%,100%{transform:perspective(1100px) rotateY(-5deg) translate3d(0,0,0)}50%{transform:perspective(1100px) rotateY(-2deg) translate3d(0,-10px,0)}}
@keyframes orbitSpin{to{transform:rotate(340deg)}}
@keyframes orbitSpinReverse{to{transform:rotate(-332deg)}}
@keyframes coreGlow{50%{box-shadow:0 0 95px rgba(126,49,16,.26),0 0 30px rgba(87,2,17,.16)}}
@keyframes eyebrowIn{from{opacity:0;letter-spacing:.38em;transform:translateY(8px)}to{opacity:1;letter-spacing:.18em;transform:none}}
@keyframes titleTracking{from{opacity:0;letter-spacing:.01em;transform:translateY(20px)}to{opacity:1;letter-spacing:-.055em;transform:none}}
@keyframes copyRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes aboutCore{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes floatOne{50%{transform:translate3d(8px,-10px,0) rotate(1deg)}}
@keyframes floatTwo{50%{transform:translate3d(-7px,8px,0) rotate(-1deg)}}
@keyframes iconPulse{50%{box-shadow:0 0 42px rgba(87,2,17,.15);transform:translateY(-3px)}}
@keyframes barGrow{from{transform:scaleX(0);opacity:.2}to{transform:scaleX(1);opacity:1}}
@keyframes socialSweep{to{transform:rotate(360deg)}}
@media(max-width:760px){.hero-motion-layer{inset:-8% -20%;opacity:.5}.flow-ribbon.r1{width:125%;right:-35%}.flow-ribbon.r2{width:115%;left:-40%}.flow-orb.o1{width:150px;height:150px}.flow-orb.o2{width:90px;height:90px}.command{animation:commandFloatMobile 7s ease-in-out infinite}}
@keyframes commandFloatMobile{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(prefers-reduced-motion:reduce){html:before{display:none}body:after,.hero-motion-layer *,.command,.hero-visual,.ai-orbit *,.ai-core,.about-orbit *,.detail-icon,.detail-bars i,.socials a:after{animation:none!important}.reveal{filter:none;transition:opacity .2s}}
/* =========================================================
ADVANCED CINEMATIC MOTION — reference-video inspired
========================================================= */
:root{
--scroll-progress:0%;
--scroll-velocity:0;
--cursor-x:50vw;
--cursor-y:50vh;
--motion-ease:cubic-bezier(.16,1,.3,1);
}
html:before{
content:"";position:fixed;z-index:10000;left:0;top:0;height:2px;width:var(--scroll-progress);
background:linear-gradient(90deg,#7E3110,#570211,#032C4D,#570211);
box-shadow:0 0 20px rgba(87,2,17,.7);pointer-events:none;
}
body:after{
content:"";position:fixed;z-index:-3;pointer-events:none;width:42vw;height:42vw;
left:calc(var(--cursor-x) - 21vw);top:calc(var(--cursor-y) - 21vw);
border-radius:50%;background:radial-gradient(circle,rgba(87,2,17,.055),transparent 64%);
filter:blur(16px);transition:left .35s ease-out,top .35s ease-out;
}
.cursor-aura{
position:fixed;z-index:9998;width:20px;height:20px;border:1px solid rgba(87,2,17,.6);
border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:.65;
transition:transform .12s linear,opacity .2s;display:block;
}
.page-loader{
position:fixed;inset:0;z-index:10001;background:#361C0E;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:22px;animation:loaderExit 1.1s var(--motion-ease) 1.15s forwards;
pointer-events:none;
}
.loader-mark{
width:68px;height:68px;border-radius:20px;display:grid;place-items:center;
background:linear-gradient(135deg,#570211,#7E3110);color:#000000;font:900 30px "Space Grotesk";
box-shadow:0 0 0 1px rgba(126,49,16,.35),0 0 70px rgba(126,49,16,.25);
animation:loaderPulse 1s ease-in-out infinite alternate;
}
.loader-line{width:120px;height:2px;background:rgba(255,255,255,.08);overflow:hidden;border-radius:99px}
.loader-line i{display:block;height:100%;width:35%;background:#570211;animation:loaderLine 1s ease-in-out infinite}
.header{transition:transform .6s var(--motion-ease),padding .6s var(--motion-ease)}
.header.is-scrolled .nav{height:62px;border-color:rgba(87,2,17,.28);box-shadow:0 20px 80px rgba(0,0,0,.4),0 0 38px rgba(87,2,17,.06)}
.nav{transition:height .6s var(--motion-ease),border-color .4s,box-shadow .4s}
.cinematic-section{
position:relative;isolation:isolate;
transform:translate3d(0,var(--section-shift,0px),0) scale(var(--section-scale,1));
transition:transform .18s linear;
}
.cinematic-section:before{
content:"";position:absolute;z-index:-2;left:50%;top:8%;width:78%;height:68%;
transform:translate3d(-50%,calc(var(--section-shift,0px)*-.7),0);
background:radial-gradient(ellipse,rgba(87,2,17,.075),transparent 68%);
filter:blur(15px);pointer-events:none;opacity:.85;
}
.hero{overflow:visible}
.hero-motion-layer{position:absolute;inset:-18% -14%;z-index:-1;overflow:hidden;pointer-events:none}
.flow-ribbon{
position:absolute;width:76%;height:28%;border:1px solid rgba(87,2,17,.2);border-radius:50%;
box-shadow:0 0 45px rgba(87,2,17,.035);transform-origin:center;
}
.flow-ribbon.r1{right:-17%;top:22%;transform:rotate(-22deg);animation:heroRibbonA 8s ease-in-out infinite}
.flow-ribbon.r2{left:-20%;top:52%;width:72%;transform:rotate(18deg);animation:heroRibbonB 11s ease-in-out infinite}
.flow-ribbon:before,.flow-ribbon:after{
content:"";position:absolute;inset:-22px 7%;border-radius:50%;border:1px solid rgba(87,2,17,.08);
filter:blur(.3px);animation:echoRing 5s ease-in-out infinite;
}
.flow-ribbon:after{inset:25% -8%;animation-delay:-2.5s;opacity:.65}
.flow-orb{position:absolute;border-radius:50%;border:1px solid rgba(87,2,17,.2);
background:radial-gradient(circle,rgba(87,2,17,.16),transparent 68%);
box-shadow:0 0 110px rgba(87,2,17,.08),inset 0 0 40px rgba(87,2,17,.05)}
.flow-orb.o1{width:250px;height:250px;right:8%;top:5%;animation:heroOrbA 6s ease-in-out infinite}
.flow-orb.o2{width:140px;height:140px;left:7%;bottom:8%;animation:heroOrbB 8s ease-in-out infinite}
.hero-copy{animation:heroTextIn 1.15s var(--motion-ease) both .15s}
.hero-copy .eyebrow{animation:eyebrowReveal 1s var(--motion-ease) both .3s}
.hero-copy h1{animation:heroTitleReveal 1.25s var(--motion-ease) both .42s}
.hero-copy>p{animation:heroCopyReveal 1s var(--motion-ease) both .62s}
.hero-copy .hero-actions{animation:heroCopyReveal 1s var(--motion-ease) both .76s}
.hero-copy .trust{animation:heroCopyReveal 1s var(--motion-ease) both .9s}
.hero-visual{animation:heroVisualCinematic 1.4s var(--motion-ease) both .25s}
.command{animation:dashboardFloat 7s ease-in-out infinite}
.ai-core{animation:coreBreathe 3s ease-in-out infinite,coreGlow 4s ease-in-out infinite}
.ai-orbit .orbit-line.a{animation:orbitCw 16s linear infinite}
.ai-orbit .orbit-line.b{animation:orbitCcw 22s linear infinite}
.ticker-track{animation:marquee 20s linear infinite}
.ticker-track span{transition:color .3s}
.ticker-track span:hover{color:#570211}
.reveal{
opacity:0;transform:translate3d(0,48px,0) scale(.975);
filter:blur(13px);
transition:opacity 1.05s var(--motion-ease),transform 1.15s var(--motion-ease),filter 1.15s var(--motion-ease);
transition-delay:var(--reveal-delay,0ms);
}
.reveal.in-view{opacity:1;transform:none;filter:blur(0)}
.cinematic-heading .eyebrow{animation:none}
.cinematic-heading.in-view .eyebrow{animation:eyebrowReveal .8s var(--motion-ease) both}
.cinematic-heading h2{opacity:0;transform:translate3d(0,35px,0);filter:blur(10px)}
.cinematic-heading.in-view h2{animation:headingReveal 1.1s var(--motion-ease) .1s both}
.cinematic-heading p{opacity:0;transform:translateY(18px);filter:blur(7px)}
.cinematic-heading.in-view p{animation:copyReveal 1s var(--motion-ease) .28s both}
.glass-card,.process-card,.story-card,.detail-feature,.detail-panel,.about-card,.contact-card{
--mx:50%;--my:50%;--tilt-x:0deg;--tilt-y:0deg;position:relative;transform-style:preserve-3d;
transition:transform .45s var(--motion-ease),border-color .35s,box-shadow .45s;
}
.glass-card:before,.process-card:before,.story-card:before,.detail-feature:before,.detail-panel:before,.about-card:before,.contact-card:before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(300px circle at var(--mx) var(--my),rgba(87,2,17,.14),transparent 60%);
opacity:0;transition:opacity .35s;
}
.glass-card:hover:before,.process-card:hover:before,.story-card:hover:before,.detail-feature:hover:before,.detail-panel:hover:before,.about-card:hover:before,.contact-card:hover:before{opacity:1}
.glass-card:hover,.process-card:hover,.story-card:hover,.detail-feature:hover,.detail-panel:hover{
transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translate3d(0,-8px,0) scale(1.012);
border-color:rgba(87,2,17,.25);
box-shadow:0 25px 70px rgba(0,0,0,.25),0 0 35px rgba(87,2,17,.035);
}
.glass-card .card-icon{transition:transform .55s var(--motion-ease),box-shadow .55s}
.glass-card:hover .card-icon{transform:translateZ(20px) rotate(-8deg) scale(1.13);box-shadow:0 0 35px rgba(87,2,17,.18)}
.mega{transform:translateX(-50%) translateY(-12px) scale(.96);opacity:0;filter:blur(5px);animation:megaCinematic .5s var(--motion-ease) forwards}
.mega-item{position:relative;overflow:hidden}
.mega-item:after{content:"";position:absolute;left:-100%;top:0;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:skewX(-18deg);transition:left .75s var(--motion-ease)}
.mega-item:hover:after{left:135%}
.nav-cta,.primary,.secondary,.footer-cta{--mag-x:0px;--mag-y:0px;transition:transform .45s var(--motion-ease),box-shadow .35s}
.nav-cta:hover,.primary:hover,.secondary:hover,.footer-cta:hover{transform:translate3d(var(--mag-x),calc(-3px + var(--mag-y)),0)}
.nav-cta:after,.primary:after,.footer-cta:after{content:"";position:absolute;top:-70%;left:-65%;width:35%;height:240%;transform:rotate(25deg);background:rgba(255,255,255,.32);filter:blur(8px);transition:left .85s var(--motion-ease)}
.nav-cta:hover:after,.primary:hover:after,.footer-cta:hover:after{left:135%}
.socials a{transition:transform .4s var(--motion-ease),background .35s}
.socials a:hover{transform:translateY(-5px) rotate(-4deg);background:rgba(87,2,17,.12)}
@keyframes loaderExit{0%{opacity:1;visibility:visible}80%{opacity:0}100%{opacity:0;visibility:hidden}}
@keyframes loaderPulse{to{transform:scale(1.08) rotate(3deg);box-shadow:0 0 0 1px rgba(126,49,16,.5),0 0 95px rgba(126,49,16,.32)}}
@keyframes loaderLine{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}
@keyframes heroTextIn{from{opacity:0;transform:translate3d(-55px,25px,0)}to{opacity:1;transform:none}}
@keyframes heroTitleReveal{from{opacity:0;transform:translate3d(0,55px,0) scale(.93);filter:blur(16px);letter-spacing:-.015em}to{opacity:1;transform:none;filter:blur(0);letter-spacing:-.065em}}
@keyframes heroCopyReveal{from{opacity:0;transform:translateY(18px);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes heroVisualCinematic{from{opacity:0;transform:perspective(1100px) translate3d(80px,35px,0) rotateY(-15deg) scale(.86);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@keyframes heroRibbonA{0%,100%{transform:rotate(-22deg) translate3d(0,0,0) scale(1)}50%{transform:rotate(-13deg) translate3d(-30px,25px,0) scale(1.08)}}
@keyframes heroRibbonB{0%,100%{transform:rotate(18deg) translate3d(0,0,0)}50%{transform:rotate(8deg) translate3d(45px,-25px,0) scale(1.12)}}
@keyframes echoRing{50%{transform:scale(1.12);opacity:.15}}
@keyframes heroOrbA{50%{transform:translate3d(-30px,30px,0) scale(1.12)}}
@keyframes heroOrbB{50%{transform:translate3d(30px,-24px,0) scale(.88)}}
@keyframes dashboardFloat{0%,100%{transform:perspective(1100px) rotateY(-5deg) translateY(0)}50%{transform:perspective(1100px) rotateY(-1deg) translateY(-13px)}}
@keyframes coreBreathe{50%{transform:scale(1.08)}}
@keyframes orbitCw{to{transform:rotate(360deg)}}
@keyframes orbitCcw{to{transform:rotate(-360deg)}}
@keyframes eyebrowReveal{from{opacity:0;letter-spacing:.42em;transform:translateY(12px)}to{opacity:1;letter-spacing:.18em;transform:none}}
@keyframes headingReveal{from{opacity:0;transform:translate3d(0,42px,0) scale(.96);filter:blur(13px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes copyReveal{from{opacity:0;transform:translateY(20px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes megaCinematic{to{opacity:1;transform:translateX(-50%) translateY(0) scale(1);filter:blur(0)}}
@media(max-width:900px){.cursor-aura{display:none}.hero-motion-layer{inset:-10% -25%;opacity:.48}.flow-ribbon.r1{width:120%;right:-35%}.flow-ribbon.r2{width:110%;left:-38%}.cinematic-section{transform:translate3d(0,calc(var(--section-shift,0px)*.55),0) scale(1)}}
@media(prefers-reduced-motion:reduce){
html:before,.cursor-aura{display:none}
body:after,.page-loader,.hero-motion-layer *,.command,.hero-visual,.ai-orbit *,.ai-core,.socials a:after{animation:none!important}
.reveal,.cinematic-section{opacity:1;filter:none;transform:none;transition:none}
}
/* Pinned scroll story inspired by modern product-site choreography */
.scroll-story{position:relative;min-height:100vh;background:radial-gradient(ellipse at 72% 48%,rgba(87,2,17,.09),transparent 34%),#361C0E;border-top:1px solid rgba(87,2,17,.08);border-bottom:1px solid rgba(87,2,17,.08);overflow:hidden}
.scroll-story:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.8%,rgba(87,2,17,.06) 50%,transparent 50.2%),radial-gradient(circle at 50% 50%,rgba(87,2,17,.04),transparent 48%)}
.scroll-story-inner{height:100vh;max-width:1240px;margin:auto;padding:8vh 42px;display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center}
.scroll-story-copy{position:relative;z-index:5;max-width:510px}.scroll-story-copy h2{font-family:"Space Grotesk";font-size:clamp(48px,5vw,76px);line-height:.94;letter-spacing:-.065em;margin:18px 0 22px;color:#FFFFFF}.scroll-story-copy p{font-size:16px;line-height:1.8;color:#FFFFFF;max-width:470px}
.scroll-story-progress{display:flex;align-items:center;gap:12px;margin-top:44px;color:#570211;font-size:13px}.scroll-story-progress span{width:100px;height:2px;background:linear-gradient(90deg,#570211,#7E3110);box-shadow:0 0 15px rgba(87,2,17,.4)}.scroll-story-progress b{font-size:17px}.scroll-story-progress em{font-style:normal;color:#FFFFFF}
.scroll-story-stage-wrap{height:640px;position:relative;perspective:1300px}.scroll-story-stage-stack{position:absolute;left:0;top:50%;width:53%;height:420px;transform:translateY(-50%);z-index:5}
.scroll-story-card{position:absolute;inset:0;padding:30px;border:1px solid rgba(87,2,17,.2);border-radius:28px;background:linear-gradient(145deg,rgba(54,28,14,.96),rgba(0,0,0,.92));box-shadow:0 30px 90px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.025);transform-origin:center bottom;backface-visibility:hidden}
.scroll-story-card:before{content:"";position:absolute;inset:0;border-radius:28px;background:radial-gradient(300px circle at 80% 20%,rgba(87,2,17,.12),transparent 60%);pointer-events:none}
.story-number{font:700 13px "Space Grotesk";color:#570211;letter-spacing:.12em}.story-icon{width:54px;height:54px;border:1px solid rgba(87,2,17,.25);border-radius:17px;display:grid;place-items:center;color:#570211;background:rgba(87,2,17,.05);margin:65px 0 24px;box-shadow:0 0 35px rgba(87,2,17,.07)}
.scroll-story-card h3{font-family:"Space Grotesk";font-size:30px;letter-spacing:-.035em;margin:0 0 12px}.scroll-story-card p{font-size:14px;line-height:1.75;color:#FFFFFF;max-width:390px}.scroll-story-card a{display:inline-flex;align-items:center;gap:7px;margin-top:22px;color:#570211;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.scroll-story-card a svg{width:15px}
.scroll-story-visual{position:absolute;right:-2%;top:50%;width:62%;height:600px;transform:translateY(-50%);border:1px solid rgba(87,2,17,.08);border-radius:50%;background:radial-gradient(circle,rgba(87,2,17,.08),transparent 57%)}
.scroll-story-stage{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.9)}.stage-ring{position:absolute;border:1px solid rgba(87,2,17,.16);border-radius:50%;animation:storyOrbit 12s linear infinite}.stage-ring.r1{width:280px;height:280px}.stage-ring.r2{width:430px;height:430px;animation-duration:18s;animation-direction:reverse;border-color:rgba(87,2,17,.08)}
.stage-core{width:145px;height:145px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(87,2,17,.35);color:#FFFFFF;font:700 20px "Space Grotesk";background:radial-gradient(circle,rgba(87,2,17,.2),rgba(5,20,13,.7) 68%);box-shadow:0 0 90px rgba(87,2,17,.16),inset 0 0 35px rgba(87,2,17,.1);animation:storyCore 4s ease-in-out infinite}
.stage-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#7E3110;box-shadow:0 0 20px #7E3110}.stage-dot.d1{top:25%;right:25%;animation:dotA 4s ease-in-out infinite}.stage-dot.d2{bottom:25%;left:24%;animation:dotB 5s ease-in-out infinite}.stage-dot.d3{top:48%;right:10%;animation:dotC 6s ease-in-out infinite}
@keyframes storyOrbit{to{transform:rotate(360deg)}}@keyframes storyCore{50%{transform:scale(1.08);box-shadow:0 0 125px rgba(87,2,17,.25)}}@keyframes dotA{50%{transform:translate(-20px,20px)}}@keyframes dotB{50%{transform:translate(25px,-15px)}}@keyframes dotC{50%{transform:translate(-15px,25px)}}
@media(max-width:900px){.scroll-story{min-height:auto}.scroll-story-inner{height:auto;min-height:100svh;padding:80px 22px;display:block}.scroll-story-copy{max-width:100%;margin-bottom:45px}.scroll-story-copy h2{font-size:45px}.scroll-story-stage-wrap{height:600px}.scroll-story-stage-stack{width:76%;left:0;height:360px}.scroll-story-visual{right:-18%;width:72%;height:500px;opacity:.7}}
@media(max-width:600px){.scroll-story-inner{padding:70px 18px}.scroll-story-copy h2{font-size:39px}.scroll-story-copy p{font-size:14px}.scroll-story-stage-wrap{height:570px}.scroll-story-stage-stack{width:88%;height:340px}.scroll-story-card{padding:23px}.story-icon{margin:45px 0 18px}.scroll-story-card h3{font-size:25px}.scroll-story-visual{right:-38%;width:105%;opacity:.45}}
/* Stable native pinned-scroll choreography: no animation library required */
.scroll-story{height:calc(100vh * 4.2);min-height:3000px;position:relative;overflow:clip}
.scroll-story-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.scroll-story-inner{height:100%;max-width:1240px;margin:auto;padding:8vh 42px;display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center}
.scroll-story-stage-stack{position:absolute;left:0;top:50%;width:53%;height:420px;transform:translateY(-50%);z-index:5}
.scroll-story-card{position:absolute;inset:0;padding:30px;border:1px solid rgba(87,2,17,.2);border-radius:28px;background:linear-gradient(145deg,rgba(10,31,22,.97),rgba(6,20,14,.93));box-shadow:0 30px 90px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.025);transform-origin:center bottom;backface-visibility:hidden;transition:transform .65s cubic-bezier(.16,1,.3,1),opacity .55s ease,box-shadow .45s,border-color .4s}
.scroll-story-card:hover{box-shadow:0 35px 100px rgba(0,0,0,.45),0 0 55px rgba(87,2,17,.08),inset 0 1px rgba(255,255,255,.04);border-color:rgba(87,2,17,.32)}
.scroll-story-visual{position:absolute;right:-2%;top:50%;width:62%;height:600px;transform:translateY(-50%);border:1px solid rgba(87,2,17,.08);border-radius:50%;background:radial-gradient(circle,rgba(87,2,17,.08),transparent 57%)}
.scroll-story-stage{position:absolute;inset:0;display:grid;place-items:center;opacity:var(--stage-active);transform:scale(calc(.9 + var(--stage-active) * .1)) translateY(calc((1 - var(--stage-active)) * 18px));transition:opacity .65s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.scroll-story-progress span{position:relative;overflow:hidden}.scroll-story-progress span:after{content:"";display:block;height:100%;width:calc(var(--story-progress,0) * 100%);background:#FFFFFF;box-shadow:0 0 16px #570211;transition:width .18s linear}
@media(max-width:900px){.scroll-story{height:calc(100svh * 4);min-height:2400px}.scroll-story-inner{height:100%;padding:70px 22px;display:block}.scroll-story-copy{padding-top:5vh}.scroll-story-stage-wrap{height:560px;margin-top:25px}.scroll-story-stage-stack{width:78%;height:340px}.scroll-story-visual{right:-15%;width:75%;height:500px;opacity:.7}}
@media(max-width:600px){.scroll-story{min-height:2250px}.scroll-story-inner{padding:60px 18px}.scroll-story-copy h2{font-size:39px}.scroll-story-stage-wrap{height:520px}.scroll-story-stage-stack{width:90%;height:330px}.scroll-story-card{padding:22px}.scroll-story-visual{right:-42%;width:110%;opacity:.4}}
/* Performance + image showcase polish */
.page-loader{animation:loaderExit .55s var(--motion-ease) .25s forwards}
.scroll-story-card{transition:none!important;will-change:transform,opacity}
.scroll-story-stage{transition:none!important;will-change:transform,opacity}
.scroll-story-progress span{position:relative;overflow:hidden}
.scroll-story-progress span:after{transition:none}
.visual-showcase{padding-top:115px;padding-bottom:25px}
.visual-showcase-head{display:grid;grid-template-columns:1fr .7fr;gap:50px;align-items:end;margin-bottom:35px}
.visual-showcase-head h2{font-family:"Space Grotesk";font-size:clamp(42px,5vw,66px);line-height:.98;letter-spacing:-.06em;margin:16px 0 0;max-width:760px}
.visual-showcase-head>p{font-size:15px;line-height:1.8;color:#FFFFFF;margin:0 0 3px}
.visual-grid{display:grid;grid-template-columns:1.25fr .875fr .875fr;gap:14px}
.visual-card{position:relative;min-height:320px;border:1px solid rgba(87,2,17,.14);border-radius:24px;overflow:hidden;background:#361C0E;box-shadow:0 25px 70px rgba(0,0,0,.25);isolation:isolate}
.visual-card.visual-wide{min-height:430px}
.visual-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:.82;transform:scale(1.04);transition:transform 1.2s var(--motion-ease),opacity .6s}
.visual-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.08) 42%,rgba(0,0,0,.94) 100%);z-index:1}
.visual-card:hover img{transform:scale(1.1);opacity:1}
.visual-card figcaption{position:absolute;z-index:2;left:25px;right:25px;bottom:23px;display:flex;flex-direction:column;gap:6px}
.visual-card figcaption b{font:700 22px "Space Grotesk";letter-spacing:-.03em}.visual-card figcaption span{font-size:12px;line-height:1.6;color:#FFFFFF;max-width:390px}
@media(max-width:900px){.visual-showcase-head{grid-template-columns:1fr;gap:15px}.visual-grid{grid-template-columns:1fr 1fr}.visual-card.visual-wide{grid-column:1/-1;min-height:380px}.visual-card{min-height:280px}}
@media(max-width:600px){.visual-showcase{padding-top:80px}.visual-grid{grid-template-columns:1fr}.visual-card.visual-wide{grid-column:auto;min-height:340px}.visual-card{min-height:300px}.visual-showcase-head h2{font-size:40px}.visual-showcase-head>p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.visual-card img{transition:none}.page-loader{display:none}}
/* FINAL VISUAL SHOWCASE FIX — no SVG cropping, no stretched artwork */
.visual-showcase{position:relative;overflow:visible}
.visual-showcase-head{position:relative;z-index:3}
.visual-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.visual-card,.visual-card.visual-wide{min-height:0;height:auto;aspect-ratio:1.48 / 1;border-radius:26px;overflow:hidden;background:#361C0E}
.visual-card img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;object-position:center;background:#361C0E;opacity:.94;transform:scale(1.001);transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .45s ease}
.visual-card:hover img{transform:scale(1.045);opacity:1}
.visual-card:after{background:linear-gradient(180deg,rgba(3,13,8,.02) 20%,rgba(3,13,8,.16) 48%,rgba(3,13,8,.96) 100%)}
.visual-card figcaption{left:24px;right:24px;bottom:20px;gap:5px;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.visual-card figcaption b{font-size:22px;line-height:1.08}.visual-card figcaption span{font-size:13px;line-height:1.5}
.visual-card.reveal{transform:translate3d(0,28px,0);filter:blur(8px)}.visual-card.reveal.in-view{transform:none;filter:none}
@media(max-width:1000px){.visual-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.visual-card,.visual-card.visual-wide{aspect-ratio:1.45/1}}
@media(max-width:650px){.visual-grid{grid-template-columns:1fr;gap:16px}.visual-card,.visual-card.visual-wide{aspect-ratio:1.42/1;min-height:0}.visual-card figcaption{left:20px;right:20px;bottom:18px}.visual-card figcaption b{font-size:20px}}
/* JS controls these transforms directly; CSS transitions made scroll feel sticky/laggy. */
.scroll-story-card,.scroll-story-stage,.cinematic-section{transition:none!important}
/* =========================================================
FINAL SCROLL-STORY POLISH
One clear active card + restrained depth stack.
========================================================= */
.scroll-story{
min-height:0;
height:calc(100vh * 4.2);
background:
radial-gradient(ellipse 48% 60% at 78% 50%,rgba(87,2,17,.105),transparent 68%),
radial-gradient(ellipse 28% 45% at 18% 55%,rgba(126,49,16,.035),transparent 70%),
#361C0E;
}
.scroll-story-sticky{height:100vh;min-height:720px}
.scroll-story-inner{
width:min(1440px,100%);
padding:7vh 56px;
grid-template-columns:minmax(460px,.86fr) minmax(600px,1.14fr);
gap:76px;
}
.scroll-story-copy{max-width:560px}
.scroll-story-copy h2{
font-size:clamp(58px,5.7vw,88px);
line-height:.91;
letter-spacing:-.07em;
margin:20px 0 26px;
}
.scroll-story-copy p{
font-size:18px;
line-height:1.8;
max-width:520px;
}
.scroll-story-progress{margin-top:48px;font-size:15px}
.scroll-story-progress span{width:120px;height:3px}
.scroll-story-progress b{font-size:20px}
.scroll-story-stage-wrap{height:680px}
.scroll-story-stage-stack{
left:0;
top:50%;
width:62%;
height:450px;
transform:translateY(-50%);
}
.scroll-story-card{
padding:38px;
border-radius:30px;
overflow:hidden;
will-change:transform,opacity;
transition:none!important;
}
.scroll-story-card.is-active{
border-color:rgba(87,2,17,.38);
box-shadow:
0 38px 110px rgba(0,0,0,.48),
0 0 80px rgba(87,2,17,.08),
inset 0 1px rgba(255,255,255,.055);
}
.scroll-story-card.is-near:not(.is-active){
clip-path:inset(0 0 82% 0 round 30px);
box-shadow:0 15px 40px rgba(0,0,0,.25);
}
.scroll-story-card .story-number{font-size:15px}
.scroll-story-card .story-icon{width:62px;height:62px;margin:70px 0 28px}
.scroll-story-card h3{
font-size:36px;
line-height:1.02;
margin-bottom:16px;
}
.scroll-story-card p{
font-size:16px;
line-height:1.8;
max-width:470px;
}
.scroll-story-card a{font-size:13px;margin-top:28px}
.scroll-story-visual{
right:-5%;
width:68%;
height:650px;
opacity:.9;
}
.stage-ring.r1{width:320px;height:320px}
.stage-ring.r2{width:500px;height:500px}
.stage-core{width:170px;height:170px;font-size:22px}
.stage-dot{width:9px;height:9px}
.section-heading h2{font-size:clamp(50px,5.6vw,76px)}
.section-heading p{font-size:17px}
.eyebrow{font-size:12px}
.glass-card h3{font-size:20px}
.glass-card p{font-size:14px}
.glass-card a{font-size:12px}
.visual-showcase-head h2{font-size:clamp(50px,5.5vw,76px)}
.visual-showcase-head>p{font-size:17px}
.visual-card figcaption b{font-size:24px}
.visual-card figcaption span{font-size:14px}
@media (max-width:1199px) and (min-width:901px){
.scroll-story-inner{
grid-template-columns:.78fr 1.22fr;
gap:40px;
padding:6vh 34px;
}
.scroll-story-copy h2{font-size:clamp(52px,5.7vw,72px)}
.scroll-story-copy p{font-size:16px}
.scroll-story-stage-stack{width:64%}
.scroll-story-visual{width:72%;right:-9%}
.scroll-story-card{padding:32px}
.scroll-story-card h3{font-size:31px}
.scroll-story-card p{font-size:15px}
}
@media (max-width:900px){
.scroll-story{height:calc(100svh * 2.55);min-height:0}
.scroll-story-sticky{min-height:100svh}
.scroll-story-inner{
display:flex;
flex-direction:column;
align-items:stretch;
gap:24px;
padding:72px 28px 30px;
}
.scroll-story-copy{max-width:760px}
.scroll-story-copy h2{font-size:clamp(48px,8vw,66px)}
.scroll-story-copy p{font-size:16px}
.scroll-story-stage-wrap{height:calc(100svh - 340px);min-height:440px;max-height:600px;margin-top:0}
.scroll-story-stage-stack{width:min(76%,520px);height:min(390px,72%);left:0;top:50%}
.scroll-story-card{padding:28px;border-radius:26px}
.scroll-story-card .story-icon{margin:46px 0 20px}
.scroll-story-card h3{font-size:29px}
.scroll-story-card p{font-size:14px}
.scroll-story-visual{right:-10%;width:72%;height:520px;opacity:.55}
}
@media (max-width:600px){
.scroll-story{height:calc(100svh * 2.25)}
.scroll-story-inner{padding:58px 18px 22px;gap:16px}
.scroll-story-copy h2{font-size:clamp(40px,11vw,52px);line-height:.93}
.scroll-story-copy p{font-size:14px;line-height:1.7}
.scroll-story-progress{margin-top:25px}
.scroll-story-stage-wrap{height:calc(100svh - 310px);min-height:430px}
.scroll-story-stage-stack{width:92%;height:330px;left:0}
.scroll-story-card{padding:22px;border-radius:23px}
.scroll-story-card.is-near:not(.is-active){clip-path:inset(0 0 86% 0 round 23px)}
.scroll-story-card .story-icon{width:50px;height:50px;margin:36px 0 15px}
.scroll-story-card h3{font-size:25px}
.scroll-story-card p{font-size:13px;line-height:1.65}
.scroll-story-card a{font-size:11px;margin-top:20px}
.scroll-story-visual{right:-42%;width:112%;height:470px;opacity:.35}
.stage-ring.r1{width:230px;height:230px}
.stage-ring.r2{width:350px;height:350px}
.stage-core{width:120px;height:120px;font-size:18px}
.section-heading h2{font-size:clamp(42px,10vw,56px)}
.section-heading p{font-size:15px}
.glass-card h3{font-size:18px}
.glass-card p{font-size:13px}
}
/* FINAL LOADER + FAST FIRST PAINT */
.page-loader{
position:fixed;inset:0;z-index:10001;display:grid;place-items:center;
align-content:center;gap:14px;padding:24px;background:
radial-gradient(circle at 50% 46%,rgba(87,2,17,.10),transparent 24%),#361C0E;
overflow:hidden;pointer-events:none;animation:loaderExitFast .72s cubic-bezier(.16,1,.3,1) .05s forwards;
}
.page-loader:before,.page-loader:after{
content:"";position:absolute;border-radius:50%;border:1px solid rgba(87,2,17,.09);
width:min(68vw,620px);aspect-ratio:1;animation:loaderHalo 4.8s ease-in-out infinite;
}
.page-loader:after{width:min(42vw,390px);border-color:rgba(126,49,16,.11);animation-delay:-2.2s}
.loader-mark{
position:relative;z-index:2;width:76px;height:76px;border-radius:23px;display:grid;place-items:center;
background:linear-gradient(145deg,#7E3110,#570211);color:#000000;font:800 32px "Space Grotesk",Arial,sans-serif;
box-shadow:0 0 0 1px rgba(126,49,16,.35),0 0 75px rgba(126,49,16,.22),inset 0 1px rgba(255,255,255,.35);
animation:loaderMarkIn .7s cubic-bezier(.16,1,.3,1) both,loaderPulse 1.5s ease-in-out .35s infinite alternate;
}
.loader-mark span{display:block;transform:translateY(-1px)}
.loader-brand{position:relative;z-index:2;font:700 18px "Space Grotesk",Arial,sans-serif;letter-spacing:-.02em;color:#FFFFFF;animation:loaderTextIn .65s ease .12s both}
.loader-brand b{color:#570211}
.loader-status{position:relative;z-index:2;display:flex;align-items:center;gap:9px;color:#FFFFFF;font:600 9px "DM Sans",Arial,sans-serif;letter-spacing:.18em;animation:loaderTextIn .65s ease .18s both}
.loader-status i{width:5px;height:5px;border-radius:50%;background:#7E3110;box-shadow:0 0 12px #7E3110;animation:loaderBlink .8s ease-in-out infinite}
.loader-line{position:relative;z-index:2;width:180px;height:2px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.08);margin-top:5px}
.loader-line i{display:block;height:100%;width:38%;background:linear-gradient(90deg,#570211,#7E3110);box-shadow:0 0 15px rgba(126,49,16,.8);animation:loaderLineFast .7s cubic-bezier(.16,1,.3,1) forwards}
.loader-orbit{position:absolute;z-index:1;width:150px;height:55px;border:1px solid rgba(87,2,17,.16);border-radius:50%;transform:rotate(-28deg);animation:loaderOrbit 3.2s linear infinite}
.loader-orbit:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:#570211;box-shadow:0 0 18px #570211;left:8%;top:48%}
.loader-orbit.orbit-two{width:230px;height:84px;transform:rotate(24deg);animation-duration:4.8s;opacity:.55}
.loader-orbit.orbit-two:after{background:#7E3110;right:8%;left:auto}
@keyframes loaderExitFast{0%{opacity:1;visibility:visible}70%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes loaderMarkIn{from{opacity:0;transform:translateY(20px) scale(.78) rotate(-8deg);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes loaderTextIn{from{opacity:0;transform:translateY(10px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes loaderHalo{50%{transform:scale(1.08);opacity:.6}}
@keyframes loaderBlink{50%{opacity:.25;transform:scale(.7)}}
@keyframes loaderLineFast{from{transform:translateX(-130%)}to{transform:translateX(320%)}}
@keyframes loaderOrbit{to{transform:rotate(332deg)}}
/* Remove the old heavy full-section scroll transform; native scroll stays responsive. */
.cinematic-section{transform:none!important;transition:none!important}
.cinematic-section:before{transform:translateX(-50%)!important}
body:after{filter:blur(8px);transition:left .18s ease-out,top .18s ease-out}
@media(max-width:760px){
.page-loader:before{width:100vw}.page-loader:after{width:62vw}.loader-mark{width:68px;height:68px;border-radius:20px}.loader-brand{font-size:17px}.loader-line{width:160px}
}
@media(prefers-reduced-motion:reduce){.page-loader{display:none}.loader-orbit,.loader-mark,.loader-status,.loader-brand,.loader-line i{animation:none!important}}
/* =========================================================
FINAL MOBILE + SCROLL-STORY RESPONSIVE PATCH
========================================================= */
/* Mobile navigation: the menu itself and long submenus must scroll,
while the page behind remains locked visually. */
@media (max-width:760px){
body{overflow-x:hidden}
.nav-shell{margin:8px auto;width:calc(100% - 16px)}
.nav{height:60px;padding:0 12px;border-radius:17px}
.logo{font-size:16px;gap:8px}
.logo-mark{width:36px;height:36px;border-radius:11px}
.hamb{width:40px;height:40px}
.mobile-menu{
position:relative;
max-height:calc(100svh - 82px);
overflow-y:auto;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
scrollbar-color:rgba(87,2,17,.45) transparent;
padding:8px;
}
.mobile-menu::-webkit-scrollbar,
.mobile-sub::-webkit-scrollbar{width:5px}
.mobile-menu::-webkit-scrollbar-thumb,
.mobile-sub::-webkit-scrollbar-thumb{background:rgba(87,2,17,.42);border-radius:99px}
.mobile-section{border-bottom:1px solid rgba(255,255,255,.055)}
.mobile-menu>a,.mobile-section>button{
min-height:50px;
padding:13px 10px;
font-size:13px;
}
.mobile-sub{
max-height:43svh;
overflow-y:auto;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
padding:2px 0 6px;
border-top:1px solid rgba(87,2,17,.07);
scrollbar-width:thin;
scrollbar-color:rgba(87,2,17,.42) transparent;
}
.mobile-sub a{
min-height:45px;
padding:11px 10px 11px 20px;
font-size:11px;
border-radius:9px;
}
.mobile-sub a:hover{background:rgba(87,2,17,.06)}
.mobile-menu .nav-cta{
position:sticky;
bottom:0;
z-index:2;
min-height:48px;
margin:8px 0 0;
border-radius:11px;
background:linear-gradient(135deg,#570211,#7E3110);
color:#000000;
box-shadow:0 -8px 24px rgba(0,0,0,.22),0 12px 35px rgba(87,2,17,.18);
}
/* Prevent mobile sections from creating accidental horizontal overflow. */
.wrap{width:calc(100% - 28px);max-width:100%}
.hero,.section,.contact-section,.detail-hero,.inner-hero{overflow:clip}
img,svg,video{max-width:100%}
/* Better mobile hero */
.hero{padding-top:94px;gap:28px}
.hero-copy h1,.inner-hero h1,.detail-copy h1{font-size:clamp(43px,12.5vw,62px);line-height:.94}
.hero-copy>p,.inner-hero>p,.detail-copy>p{font-size:14px;line-height:1.75}
.hero-actions{gap:9px}
.primary,.secondary{min-height:45px;padding:12px 15px;font-size:11px}
.command{width:100%;min-height:430px;padding:18px;border-radius:23px}
/* Pinned capability story: one readable active card, no clipped CTA. */
.scroll-story{
height:calc(100svh * 4);
min-height:0;
overflow:clip;
}
.scroll-story-sticky{
height:100svh;
min-height:0;
overflow:hidden;
}
.scroll-story-inner{
height:100%;
min-height:0;
display:grid;
grid-template-rows:auto minmax(0,1fr);
gap:10px;
padding:76px 18px 16px;
align-items:stretch;
}
.scroll-story-copy{max-width:none;min-width:0}
.scroll-story-copy .eyebrow{font-size:10px;letter-spacing:.14em}
.scroll-story-copy h2{
font-size:clamp(34px,10.8vw,46px);
line-height:.92;
letter-spacing:-.065em;
margin:10px 0 12px;
}
.scroll-story-copy p{
font-size:12.5px;
line-height:1.55;
max-width:330px;
}
.scroll-story-progress{
margin-top:13px;
gap:9px;
font-size:11px;
}
.scroll-story-progress span{width:92px;height:2px}
.scroll-story-progress b{font-size:15px}
.scroll-story-stage-wrap{
height:auto;
min-height:0;
max-height:none;
margin:0;
position:relative;
overflow:visible;
}
.scroll-story-stage-stack{
width:min(100%,340px);
height:236px;
left:0;
top:50%;
transform:translateY(-50%);
}
.scroll-story-card{
width:100%;
height:236px;
padding:18px;
border-radius:20px;
overflow:hidden;
}
.scroll-story-card.is-near:not(.is-active){
clip-path:inset(0 0 88% 0 round 20px);
}
.scroll-story-card .story-number{font-size:11px}
.scroll-story-card .story-icon{
width:43px;height:43px;border-radius:13px;
margin:17px 0 13px;
}
.scroll-story-card h3{
font-size:22px;
line-height:1.03;
margin:0 0 8px;
max-width:300px;
}
.scroll-story-card p{
font-size:11.5px;
line-height:1.48;
max-width:300px;
margin:0;
}
.scroll-story-card a{
position:absolute;
left:18px;
bottom:16px;
margin:0;
font-size:10px;
line-height:1;
}
.scroll-story-visual{
right:-31%;
top:50%;
width:90%;
height:310px;
opacity:.28;
pointer-events:none;
}
.stage-ring.r1{width:190px;height:190px}
.stage-ring.r2{width:290px;height:290px}
.stage-core{width:92px;height:92px;font-size:15px}
.stage-dot{width:6px;height:6px}
/* Visual showcase */
.visual-showcase{overflow:clip}
.visual-grid{grid-template-columns:1fr!important;gap:14px}
.visual-card,.visual-card.visual-wide{aspect-ratio:1.15;min-height:260px}
.visual-card figcaption{padding:18px}
.visual-card figcaption b{font-size:21px}
.visual-card figcaption span{font-size:12px}
/* General cards/forms */
.glass-card,.process-card,.story-card,.detail-feature,.detail-panel,.about-card,.contact-card{
min-width:0;max-width:100%;
}
.form-row{grid-template-columns:1fr}
.contact-form input,.contact-form textarea,.contact-form select{font-size:14px}
.footer-main{grid-template-columns:1fr;gap:30px}
}
/* Small phones: keep everything inside a 320–430px viewport. */
@media (max-width:390px){
.nav-shell{width:calc(100% - 12px)}
.logo{font-size:15px}
.logo-mark{width:34px;height:34px}
.scroll-story-inner{padding-left:14px;padding-right:14px}
.scroll-story-copy h2{font-size:34px}
.scroll-story-copy p{font-size:12px;max-width:310px}
.scroll-story-stage-stack{width:100%;height:224px}
.scroll-story-card{height:224px;padding:16px}
.scroll-story-card .story-icon{margin:13px 0 10px;width:40px;height:40px}
.scroll-story-card h3{font-size:20px}
.scroll-story-card p{font-size:11px;max-width:270px}
.scroll-story-card a{left:16px;bottom:14px}
}
/* Laptop sizing: don't make the premium type look tiny at 1280–1440px. */
@media (min-width:1051px) and (max-width:1500px){
.wrap{width:min(1240px,calc(100% - 52px))}
.section-heading h2{font-size:clamp(54px,5vw,78px)}
.section-heading p{font-size:17px}
.glass-card h3{font-size:21px}
.glass-card p{font-size:14px}
.footer-brand>p,.footer-main a{font-size:13px}
}
/* Desktop capability CTA must always remain visible inside the card. */
@media (min-width:761px){
.scroll-story-card a{
position:absolute;
left:38px;
bottom:30px;
margin:0;
}
.scroll-story-card p{padding-bottom:34px}
}
/* User requested an ultra-fast intro: approximately one tenth of a second. */
.page-loader{
animation:loaderExitUltraFast .11s linear 0s forwards!important;
}
@keyframes loaderExitUltraFast{
0%{opacity:1;visibility:visible}
100%{opacity:0;visibility:hidden}
}
/* =========================================================
FINAL MOBILE SCROLL-STORY + FORM DROPDOWN + LOADER FIX
========================================================= */
/* Give the intro loader enough time to actually be perceived. */
.page-loader{
animation:loaderExitFinal 1.1s var(--motion-ease) .05s forwards!important;
}
@keyframes loaderExitFinal{
0%{opacity:1;visibility:visible;transform:none}
82%{opacity:1;visibility:visible}
100%{opacity:0;visibility:hidden;transform:scale(1.015)}
}
/* Custom service selector: avoids the browser's ugly native grey option popup. */
.service-select{position:relative;width:100%;z-index:12}
.service-select-trigger{
width:100%;min-height:54px;padding:0 16px;border:1px solid rgba(87,2,17,.22);
border-radius:12px;background:rgba(5,20,13,.72);color:#FFFFFF;
display:flex;align-items:center;justify-content:space-between;gap:12px;
font:500 14px/1.2 "Inter",sans-serif;text-align:left;cursor:pointer;
transition:border-color .3s,box-shadow .3s,background .3s;
}
.service-select-trigger:hover,.service-select.is-open .service-select-trigger{
border-color:rgba(87,2,17,.62);background:rgba(8,28,19,.9);
box-shadow:0 0 0 3px rgba(87,2,17,.06),0 12px 35px rgba(0,0,0,.18);
}
.service-select-trigger .placeholder{color:#FFFFFF}.service-select-trigger .selected{color:#FFFFFF}
.service-select-trigger svg{width:18px;height:18px;color:#570211;transition:transform .3s}
.service-select.is-open .service-select-trigger svg{transform:rotate(180deg)}
.service-select-menu{
position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:310px;overflow-y:auto;
padding:7px;border:1px solid rgba(87,2,17,.24);border-radius:15px;
background:rgba(3,15,9,.98);box-shadow:0 28px 70px rgba(0,0,0,.55),0 0 45px rgba(87,2,17,.08);
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
scrollbar-width:thin;scrollbar-color:rgba(87,2,17,.55) transparent;
animation:serviceMenuIn .24s var(--motion-ease) both;
}
.service-select-menu::-webkit-scrollbar{width:5px}
.service-select-menu::-webkit-scrollbar-thumb{background:rgba(87,2,17,.5);border-radius:99px}
.service-select-menu button{
width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:9px;background:transparent;
color:#FFFFFF;display:flex;align-items:center;justify-content:space-between;gap:10px;
font:500 13px/1.3 "Inter",sans-serif;text-align:left;cursor:pointer;transition:.2s;
}
.service-select-menu button svg{width:14px;height:14px;color:#570211;opacity:0;transform:translateX(-4px);transition:.2s}
.service-select-menu button:hover,.service-select-menu button.active{background:rgba(87,2,17,.11);color:#FFFFFF}
.service-select-menu button:hover svg,.service-select-menu button.active svg{opacity:1;transform:none}
@keyframes serviceMenuIn{from{opacity:0;transform:translateY(-8px) scale(.98);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
/* The hidden required field should never affect layout. */
.contact-form>input[type="hidden"]{display:none!important}
/* Desktop: make the capability card tall enough for its CTA and keep it readable. */
@media(min-width:761px){
.scroll-story-stage-wrap{min-height:650px}
.scroll-story-stage-stack{height:450px}
.scroll-story-card{height:450px;overflow:hidden;padding:34px}
.scroll-story-card .story-icon{margin-top:60px}
.scroll-story-card h3{font-size:32px;max-width:430px}
.scroll-story-card p{font-size:15px;line-height:1.7;max-width:410px}
.scroll-story-card a{left:34px;bottom:28px;font-size:12px}
}
/* Tablet/mobile: the pinned story gets a real second-row height.
Previously the absolutely positioned stack had a zero-height parent,
which made the cards disappear on narrow screens. */
@media(max-width:760px){
.scroll-story{height:calc(100svh * 2.25);min-height:0;overflow:clip}
.scroll-story-sticky{height:100svh;overflow:hidden}
.scroll-story-inner{
display:flex!important;flex-direction:column;justify-content:flex-start;
gap:14px;height:100%;padding:82px 18px 22px;
}
.scroll-story-copy{flex:0 0 auto}
.scroll-story-stage-wrap{
flex:0 0 300px!important;height:300px!important;min-height:300px!important;
max-height:300px!important;width:100%;position:relative;overflow:visible;
}
.scroll-story-stage-stack{
position:absolute;width:min(100%,360px);height:260px;left:0;right:auto;top:50%;
transform:translateY(-50%);
}
.scroll-story-card{
width:100%;height:260px;min-height:260px;padding:20px;overflow:hidden;
border-radius:21px;background:linear-gradient(145deg,rgba(7,31,21,.98),rgba(4,17,11,.98));
}
.scroll-story-card.is-near:not(.is-active){clip-path:none!important}
.scroll-story-card:not(.is-active){pointer-events:none}
.scroll-story-card .story-icon{margin:16px 0 13px;width:44px;height:44px}
.scroll-story-card h3{font-size:23px;line-height:1.05}
.scroll-story-card p{font-size:12px;line-height:1.5;max-width:330px;padding-bottom:34px}
.scroll-story-card a{left:20px;bottom:17px;font-size:10px}
.scroll-story-visual{right:-26%;top:50%;width:82%;height:300px;opacity:.23}
}
/* Phones: prevent the menu and story from touching browser edges. */
@media(max-width:430px){
.service-select-menu{max-height:46svh}
.service-select-menu button{min-height:46px;font-size:12px}
.service-select-trigger{min-height:52px;font-size:13px}
.scroll-story-inner{padding-left:16px;padding-right:16px}
.scroll-story-copy h2{font-size:clamp(37px,11.5vw,47px)}
.scroll-story-copy p{font-size:13px;max-width:340px}
.scroll-story-stage-wrap{flex-basis:292px!important;height:292px!important;min-height:292px!important;max-height:292px!important}
.scroll-story-stage-stack{height:252px}
.scroll-story-card{height:252px;min-height:252px}
}
/* Very small phones */
@media(max-width:360px){
.scroll-story-inner{padding-left:14px;padding-right:14px}
.scroll-story-copy h2{font-size:35px}
.scroll-story-copy p{font-size:12px}
.scroll-story-stage-wrap{flex-basis:276px!important;height:276px!important;min-height:276px!important;max-height:276px!important}
.scroll-story-stage-stack{height:238px}
.scroll-story-card{height:238px;min-height:238px;padding:17px}
.scroll-story-card h3{font-size:21px}
.scroll-story-card p{font-size:11.5px}
}
/* Mobile form card should never let the custom menu escape the viewport. */
@media(max-width:760px){
.contact-card{overflow:visible}
.contact-form{position:relative;z-index:5}
.service-select{z-index:20}
.contact-form .service-select-menu{z-index:100}
}
/* =========================================================
FINAL INNER-PAGE + MOBILE SCROLL STORY REPAIR
========================================================= */
/* Never leave route content visually hidden if the observer has not fired. */
.reveal{
will-change:opacity,transform,filter;
}
.reveal.in-view{
opacity:1!important;
visibility:visible!important;
filter:blur(0)!important;
}
/* Inner pages: stronger, stable typography on laptop/desktop. */
.detail-copy h1,.inner-hero h1{font-size:clamp(58px,6.1vw,92px);line-height:.92}
.detail-copy>p,.inner-hero>p{font-size:18px;line-height:1.8;max-width:720px}
.detail-feature h3{font-size:22px}.detail-feature p{font-size:14px;line-height:1.7}
.about-intro h2,.about-values h2,.about-markets h2{font-size:clamp(48px,5vw,72px);line-height:.96}
.about-intro p,.about-values p,.about-markets p{font-size:17px;line-height:1.8}
/* Desktop scroll story: keep the active card fully inside its stage. */
@media(min-width:761px){
.scroll-story-stage-wrap{min-height:680px}
.scroll-story-stage-stack{height:450px}
.scroll-story-card{
height:450px!important;
min-height:450px!important;
overflow:hidden!important;
}
.scroll-story-card .story-icon{margin-top:58px}
.scroll-story-card h3{max-width:470px}
.scroll-story-card p{padding-bottom:48px;max-width:450px}
.scroll-story-card a{
position:absolute!important;
left:38px!important;
bottom:30px!important;
margin:0!important;
z-index:4;
}
}
/* Tablet/mobile pinned story: use a real bottom stage instead of allowing
the card stack to fall below a short phone viewport. */
@media(max-width:760px){
.scroll-story{
height:calc(100svh * 4);
min-height:0!important;
overflow:clip;
}
.scroll-story-sticky{
height:100svh!important;
min-height:0!important;
overflow:hidden!important;
}
.scroll-story-inner{
position:relative!important;
display:block!important;
height:100%!important;
min-height:0!important;
padding:76px 16px 0!important;
}
.scroll-story-copy{
width:100%!important;
max-width:100%!important;
padding:0!important;
margin:0!important;
}
.scroll-story-copy h2{
font-size:clamp(36px,10.5vw,48px)!important;
line-height:.94!important;
margin:12px 0 13px!important;
max-width:350px;
}
.scroll-story-copy p{
font-size:12.5px!important;
line-height:1.55!important;
max-width:340px!important;
}
.scroll-story-progress{
margin-top:17px!important;
gap:10px!important;
}
.scroll-story-progress span{width:86px!important;height:2px!important}
.scroll-story-progress b{font-size:15px!important}
.scroll-story-stage-wrap{
position:absolute!important;
left:16px!important;
right:16px!important;
bottom:12px!important;
width:auto!important;
height:218px!important;
min-height:218px!important;
max-height:218px!important;
margin:0!important;
overflow:visible!important;
}
.scroll-story-stage-stack{
position:absolute!important;
left:0!important;
right:0!important;
top:50%!important;
width:100%!important;
height:208px!important;
transform:translateY(-50%)!important;
}
.scroll-story-card{
width:100%!important;
height:208px!important;
min-height:208px!important;
max-height:208px!important;
padding:18px!important;
border-radius:20px!important;
overflow:hidden!important;
}
.scroll-story-card.is-near:not(.is-active){
clip-path:none!important;
}
.scroll-story-card:not(.is-active){
pointer-events:none!important;
}
.scroll-story-card .story-number{font-size:10px!important}
.scroll-story-card .story-icon{
width:40px!important;height:40px!important;
margin:12px 0 10px!important;
border-radius:12px!important;
}
.scroll-story-card h3{
font-size:21px!important;
line-height:1.02!important;
max-width:300px!important;
margin-bottom:7px!important;
}
.scroll-story-card p{
font-size:11px!important;
line-height:1.42!important;
max-width:315px!important;
padding:0 0 30px!important;
margin:0!important;
}
.scroll-story-card a{
position:absolute!important;
left:18px!important;
bottom:14px!important;
margin:0!important;
font-size:9px!important;
z-index:4!important;
}
.scroll-story-visual{
right:-38%!important;
top:50%!important;
width:105%!important;
height:250px!important;
opacity:.22!important;
pointer-events:none!important;
}
.stage-ring.r1{width:170px!important;height:170px!important}
.stage-ring.r2{width:250px!important;height:250px!important}
.stage-core{width:78px!important;height:78px!important;font-size:13px!important}
}
/* 380px and smaller: make the card and title fit above the fold. */
@media(max-width:390px){
.scroll-story-inner{padding-left:14px!important;padding-right:14px!important;padding-top:74px!important}
.scroll-story-copy h2{font-size:34px!important;max-width:315px!important}
.scroll-story-copy p{font-size:11.5px!important;max-width:305px!important}
.scroll-story-stage-wrap{
left:14px!important;right:14px!important;bottom:10px!important;
height:205px!important;min-height:205px!important;max-height:205px!important;
}
.scroll-story-stage-stack{height:196px!important}
.scroll-story-card{height:196px!important;min-height:196px!important;max-height:196px!important;padding:16px!important}
.scroll-story-card .story-icon{width:38px!important;height:38px!important;margin:10px 0 8px!important}
.scroll-story-card h3{font-size:19px!important}
.scroll-story-card p{font-size:10.5px!important;line-height:1.4!important;max-width:280px!important}
.scroll-story-card a{left:16px!important;bottom:12px!important;font-size:8.5px!important}
}
/* Inner page cards should be readable immediately after route load. */
.detail-page .reveal,.inner-page .reveal{
transition-duration:.65s!important;
}
/* Final route-navigation reveal safety: inner-page cards must render on first navigation. */
.reveal.route-ready{
opacity:1;
transform:none;
filter:none;
}
.reveal.route-ready.in-view{
animation:none;
}
@media (max-width: 700px){
.inner-page .reveal,
.inner-page .detail-feature,
.inner-page .detail-panel,
.inner-page .glass-card{
opacity:1!important;
transform:none!important;
filter:none!important;
}
}
/* Route changes always begin at the top of the new page. */
html{scroll-behavior:auto;}
/* =========================================================
RICH EARTHY JEWEL + CINEMATIC SCROLL SYSTEM
Palette supplied by the client: #361C0E #570211 #7E3110
#570211 #032C4D #360825
========================================================= */
:root{
--earth-espresso:#361C0E;
--earth-wine:#570211;
--earth-rust:#7E3110;
--earth-teal:#570211;
--earth-navy:#032C4D;
--earth-plum:#360825;
--paper:#FFFFFF;
--muted-earth:#FFFFFF;
--accent:#7E3110;
--accent-2:#570211;
}
html{background:var(--earth-espresso)!important;scroll-behavior:smooth}
body{
background:
radial-gradient(circle at 12% 12%,rgba(87,2,17,.28),transparent 27%),
radial-gradient(circle at 84% 22%,rgba(87,2,17,.26),transparent 31%),
radial-gradient(circle at 55% 78%,rgba(126,49,16,.18),transparent 34%),
linear-gradient(135deg,#361C0E 0%,#361C0E 38%,#570211 72%,#032C4D 100%)!important;
color:var(--paper)!important;
overflow-x:hidden;
}
body:after{background:radial-gradient(circle,rgba(126,49,16,.09),transparent 64%)!important}
html:before{background:linear-gradient(90deg,var(--earth-rust),var(--earth-wine),var(--earth-teal),var(--earth-navy))!important;box-shadow:0 0 22px rgba(126,49,16,.45)!important}
/* animated mesh / particle field inspired by the supplied recording */
.ambient-scene{position:fixed;inset:0;z-index:-5;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,rgba(3,44,77,.08),transparent 35%,rgba(54,8,37,.14))}
.ambient-grid{position:absolute;inset:-18%;opacity:.26;background-image:linear-gradient(rgba(126,49,16,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(87,2,17,.08) 1px,transparent 1px);background-size:58px 58px;transform:perspective(700px) rotateX(64deg) translateY(24%);transform-origin:center bottom;animation:gridDrift 18s linear infinite}
.ambient-wave{position:absolute;width:72vw;height:32vw;border:1px solid rgba(87,2,17,.22);border-radius:50%;filter:drop-shadow(0 0 18px rgba(87,2,17,.08));mix-blend-mode:screen}
.wave-a{right:-18vw;top:10vh;transform:rotate(-17deg);animation:waveFloatA 13s ease-in-out infinite}
.wave-b{left:-22vw;top:47vh;transform:rotate(18deg);border-color:rgba(126,49,16,.22);animation:waveFloatB 17s ease-in-out infinite}
.ambient-wave:before,.ambient-wave:after{content:"";position:absolute;inset:-34px 8%;border:1px solid rgba(126,49,16,.12);border-radius:50%;animation:ringPulse 7s ease-in-out infinite}
.ambient-wave:after{inset:22% -10%;border-color:rgba(87,2,17,.18);animation-delay:-3.5s}
.ambient-glow{position:absolute;border-radius:50%;filter:blur(30px);opacity:.35;animation:glowDrift 10s ease-in-out infinite}
.glow-a{width:32vw;height:32vw;right:8%;top:8%;background:radial-gradient(circle,rgba(87,2,17,.35),transparent 68%)}
.glow-b{width:28vw;height:28vw;left:8%;bottom:4%;background:radial-gradient(circle,rgba(87,2,17,.28),transparent 68%);animation-delay:-4s}
.ambient-stars{position:absolute;inset:0;opacity:.45;background-image:radial-gradient(circle at 14% 24%,#FFFFFF 0 1px,transparent 2px),radial-gradient(circle at 74% 18%,#570211 0 1px,transparent 2px),radial-gradient(circle at 84% 66%,#7E3110 0 1px,transparent 2px),radial-gradient(circle at 28% 76%,#7E3110 0 1px,transparent 2px),radial-gradient(circle at 54% 42%,#FFFFFF 0 1px,transparent 2px);background-size:100% 100%;animation:starsFloat 11s ease-in-out infinite}
/* glass, controls and links use the supplied palette */
.header .nav-shell,.nav{background:rgba(17,7,4,.66)!important;border-color:rgba(87,2,17,.24)!important;backdrop-filter:blur(22px)}
.logo-mark,.loader-mark{background:linear-gradient(135deg,var(--earth-rust),var(--earth-wine))!important;color:var(--paper)!important;box-shadow:0 0 0 1px rgba(126,49,16,.28),0 0 60px rgba(126,49,16,.24)!important}
.logo b,.hero-copy h1 span,.section-heading h2 span,.inner-hero h1 span{color:#7E3110!important}
.primary,.nav-cta,.footer-cta,.footer-cta.mini{background:linear-gradient(135deg,var(--earth-rust),var(--earth-wine))!important;color:#FFFFFF!important;box-shadow:0 12px 38px rgba(87,2,17,.28)!important}
.secondary{border-color:rgba(87,2,17,.28)!important;background:rgba(87,2,17,.18)!important}
.eyebrow{color:#570211!important}
.eyebrow i{background:#7E3110!important;box-shadow:0 0 0 6px rgba(126,49,16,.15)!important}
.glass-card,.process-card,.story-card,.detail-feature,.detail-panel,.about-card,.contact-card,.visual-card{background:linear-gradient(145deg,rgba(87,2,17,.22),rgba(54,8,37,.18))!important;border-color:rgba(87,2,17,.22)!important;box-shadow:0 24px 90px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.03)}
.glass-card:hover,.process-card:hover,.story-card:hover,.detail-feature:hover,.detail-panel:hover{border-color:rgba(126,49,16,.42)!important;box-shadow:0 30px 90px rgba(0,0,0,.32),0 0 42px rgba(126,49,16,.12)!important}
.card-icon,.story-icon{background:rgba(87,2,17,.22)!important;border-color:rgba(87,2,17,.25)!important;color:#7E3110!important}
.card-icon svg,.story-icon svg{filter:drop-shadow(0 0 10px rgba(126,49,16,.25))}
.service-select-trigger,.service-select-menu{background:rgba(18,8,5,.96)!important;border-color:rgba(87,2,17,.28)!important}
.service-select-menu button:hover,.service-select-menu button.active{background:linear-gradient(90deg,rgba(87,2,17,.5),rgba(87,2,17,.25))!important;color:#fff!important}
/* Senthora-like cinematic section behavior: large type, pinned stage, layered depth */
.hero,.visual-showcase,.section,.inner-hero{position:relative}
.hero:before,.visual-showcase:before,.section:before,.inner-hero:before{content:"";position:absolute;inset:4% -12%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,rgba(87,2,17,.17),transparent 63%);transform:translateY(calc(var(--parallax-y,0px)*-.22));transition:transform .15s linear}
.hero-copy h1,.section-heading h2,.inner-hero h1{letter-spacing:-.065em;text-wrap:balance}
.visual-card{overflow:hidden;transform-style:preserve-3d}
.visual-card img{width:100%;display:block;transform:scale(1.02);filter:saturate(.78) contrast(1.04);transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter 1.2s}
.visual-card:hover img{transform:scale(1.08) translate3d(0,-8px,0);filter:saturate(1.02) contrast(1.05)}
.scroll-story{background:linear-gradient(180deg,transparent,rgba(87,2,17,.08),transparent);position:relative}
.scroll-story:before{content:"";position:absolute;left:50%;top:0;width:1px;height:100%;background:linear-gradient(transparent,rgba(87,2,17,.28),transparent);opacity:.55}
.scroll-story-stage .stage-ring{border-color:rgba(87,2,17,.25)!important;box-shadow:0 0 45px rgba(87,2,17,.12)}
.scroll-story-stage .stage-core{background:radial-gradient(circle,rgba(126,49,16,.38),rgba(87,2,17,.14) 48%,transparent 70%)!important;color:#FFFFFF!important;border-color:rgba(126,49,16,.34)!important}
.scroll-story-progress span{background:linear-gradient(90deg,var(--earth-rust),var(--earth-teal))!important}
.scroll-story-card.is-active{box-shadow:0 30px 120px rgba(0,0,0,.35),0 0 60px rgba(126,49,16,.12)!important}
/* Large, soft title reveals and floating image/mesh motion */
.reveal{transition-duration:1.15s!important}
.cinematic-heading.in-view h2{animation:cinematicTitle 1.2s cubic-bezier(.16,1,.3,1) .08s both!important}
.hero-copy h1{animation:cinematicHeroTitle 1.35s cubic-bezier(.16,1,.3,1) .35s both!important}
.about-orbit,.ai-orbit,.scroll-story-visual{animation:visualFloat 8s ease-in-out infinite}
.detail-bars i{background:linear-gradient(90deg,var(--earth-rust),var(--earth-teal))!important}
.socials a{border-color:rgba(87,2,17,.2)!important;background:rgba(87,2,17,.16)!important}
.socials a:hover{border-color:rgba(126,49,16,.5)!important;background:rgba(87,2,17,.28)!important}
footer{background:linear-gradient(180deg,rgba(18,7,4,.22),rgba(54,8,37,.28))!important;border-top-color:rgba(87,2,17,.14)!important}
@keyframes gridDrift{0%{transform:perspective(700px) rotateX(64deg) translate3d(0,24%,0)}100%{transform:perspective(700px) rotateX(64deg) translate3d(-58px,20%,0)}}
@keyframes waveFloatA{0%,100%{transform:rotate(-17deg) translate3d(0,0,0) scale(1)}50%{transform:rotate(-11deg) translate3d(-3vw,2vh,0) scale(1.05)}}
@keyframes waveFloatB{0%,100%{transform:rotate(18deg) translate3d(0,0,0)}50%{transform:rotate(11deg) translate3d(4vw,-3vh,0) scale(1.08)}}
@keyframes ringPulse{0%,100%{opacity:.35;transform:scale(.98)}50%{opacity:.8;transform:scale(1.035)}}
@keyframes glowDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3vw,2vh,0) scale(1.12)}}
@keyframes starsFloat{0%,100%{transform:translateY(0);opacity:.32}50%{transform:translateY(-12px);opacity:.65}}
@keyframes cinematicTitle{from{opacity:0;transform:translate3d(0,48px,0) scale(.96);filter:blur(14px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes cinematicHeroTitle{from{opacity:0;transform:translate3d(0,70px,0) scale(.92);filter:blur(18px);letter-spacing:-.02em}to{opacity:1;transform:none;filter:blur(0);letter-spacing:-.065em}}
@keyframes visualFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
@media(max-width:900px){
.ambient-grid{opacity:.13;background-size:42px 42px}
.ambient-wave{width:125vw;height:60vw}
.hero:before,.visual-showcase:before,.section:before,.inner-hero:before{inset:0 -28%}
.scroll-story:before{display:none}
.scroll-story-stage-wrap{min-height:460px}
.scroll-story-card{max-width:calc(100vw - 32px)!important}
}
@media(max-width:520px){
.ambient-grid{display:none}
.ambient-wave{width:170vw;height:100vw;opacity:.5}
.hero-copy h1{letter-spacing:-.055em!important}
.section-heading h2,.inner-hero h1{letter-spacing:-.055em}
.visual-card img{transform:none!important}
.scroll-story{min-height:1450px!important}
.scroll-story-sticky{min-height:100svh!important}
.scroll-story-stage-wrap{min-height:480px!important}
.scroll-story-card{min-height:390px!important;transform:none;opacity:1;filter:none}
}
@media(prefers-reduced-motion:reduce){.ambient-scene,.about-orbit,.ai-orbit,.scroll-story-visual{animation:none!important}.ambient-grid,.ambient-wave,.ambient-stars,.ambient-glow{animation:none!important}.visual-card img{transition:none!important}}
/* =========================================================
FINAL RICH EARTHY JEWEL CINEMATIC SYSTEM
Client palette only for visual accents/backgrounds:
#361C0E #570211 #7E3110 #570211 #032C4D #360825
Motion language is based on the supplied screen recording:
slow organic mesh, fine line frames, floating glow, staged
text/card movement and scroll-driven transitions.
========================================================= */
:root{
--p-espresso:#361C0E;
--p-wine:#570211;
--p-rust:#7E3110;
--p-teal:#570211;
--p-navy:#032C4D;
--p-plum:#360825;
--ink:#FFFFFF;
}
html,body{background:var(--p-espresso)!important}
body{
background:
radial-gradient(ellipse at 74% 10%,rgba(87,2,17,.42),transparent 28%),
radial-gradient(ellipse at 18% 22%,rgba(87,2,17,.38),transparent 30%),
radial-gradient(ellipse at 72% 70%,rgba(3,44,77,.36),transparent 32%),
linear-gradient(135deg,var(--p-espresso) 0%,var(--p-plum) 38%,var(--p-espresso) 62%,var(--p-navy) 100%)!important;
}
body:before{
background:
radial-gradient(circle at 15% 35%,rgba(126,49,16,.18),transparent 28%),
radial-gradient(circle at 82% 25%,rgba(87,2,17,.20),transparent 30%),
linear-gradient(135deg,rgba(54,28,14,.96),rgba(54,8,37,.62),rgba(3,44,77,.58))!important;
}
body:after{
background:
repeating-linear-gradient(90deg,transparent 0 120px,rgba(87,2,17,.07) 121px,transparent 122px),
repeating-linear-gradient(0deg,transparent 0 120px,rgba(126,49,16,.055) 121px,transparent 122px)!important;
opacity:.45;
}
.header{z-index:300}
.nav{
background:linear-gradient(135deg,rgba(54,28,14,.88),rgba(87,2,17,.62),rgba(54,8,37,.82))!important;
border-color:rgba(87,2,17,.72)!important;
box-shadow:0 18px 70px rgba(3,44,77,.22),0 0 0 1px rgba(126,49,16,.16)!important;
}
.logo{position:relative}
.logo-mark{
position:relative!important;
overflow:visible!important;
background:linear-gradient(135deg,var(--p-teal),var(--p-navy) 48%,var(--p-rust))!important;
color:var(--ink)!important;
border:1px solid rgba(126,49,16,.7);
box-shadow:0 0 0 1px rgba(87,2,17,.65),0 0 28px rgba(126,49,16,.24)!important;
}
.logo-mark:before,.logo-mark:after{
content:"";position:absolute;inset:-7px;border:1px solid rgba(87,2,17,.55);border-radius:15px;pointer-events:none;
}
.logo-mark:after{
inset:-12px;border-color:rgba(126,49,16,.30);border-radius:18px;animation:logoHalo 5s ease-in-out infinite;
}
.logo b{color:var(--p-rust)!important}
.desktop-nav>a:not(.nav-cta),.drop-trigger{color:rgba(245,238,232,.78)!important}
.desktop-nav>a:not(.nav-cta):hover,.drop-trigger:hover,.drop-trigger.active{color:var(--ink)!important}
.nav-cta,.primary,.footer-cta,.footer-cta.mini{
background:linear-gradient(110deg,var(--p-teal),var(--p-navy) 48%,var(--p-rust))!important;
border:1px solid rgba(126,49,16,.6)!important;
color:var(--ink)!important;
box-shadow:0 14px 50px rgba(87,2,17,.22),inset 0 1px rgba(245,238,232,.08)!important;
}
.nav-cta:before,.primary:before,.footer-cta:before{
content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 15%,rgba(245,238,232,.16) 48%,transparent 75%);transform:translateX(-130%);animation:buttonSheen 4.5s ease-in-out infinite;pointer-events:none;
}
.eyebrow{color:var(--p-teal)!important}
.eyebrow i{background:var(--p-rust)!important;box-shadow:0 0 0 7px rgba(126,49,16,.12)!important}
.hero-copy h1 span,.inner-hero h1 span,.section-heading h2 span,.logo b{color:var(--p-rust)!important}
.hero-copy h1,.section-heading h2,.inner-hero h1,.detail-copy h1,.scroll-story-copy h2{color:var(--ink)!important}
.hero-copy>p,.inner-hero>p,.detail-copy>p,.section-heading p,.scroll-story-copy p,.glass-card p,.process-card p,.detail-feature p,.story-card p{color:rgba(245,238,232,.68)!important}
.secondary{color:var(--ink)!important;border-color:rgba(87,2,17,.58)!important;background:rgba(54,28,14,.48)!important}
.secondary:hover{background:rgba(87,2,17,.30)!important;border-color:rgba(126,49,16,.65)!important}
/* Recording-style animated environment */
.ambient-scene{
background:
radial-gradient(ellipse at 68% 38%,rgba(87,2,17,.30),transparent 30%),
radial-gradient(ellipse at 28% 55%,rgba(87,2,17,.24),transparent 28%),
linear-gradient(135deg,rgba(54,28,14,.42),rgba(54,8,37,.26),rgba(3,44,77,.34))!important;
}
.ambient-grid{
opacity:.18!important;
background-image:
linear-gradient(rgba(87,2,17,.16) 1px,transparent 1px),
linear-gradient(90deg,rgba(126,49,16,.13) 1px,transparent 1px)!important;
background-size:72px 72px!important;
transform:perspective(850px) rotateX(62deg) translateY(22%) scale(1.15)!important;
animation:gridDriftCinematic 22s linear infinite!important;
}
.ambient-wave{
width:64vw!important;height:34vw!important;
border-color:rgba(87,2,17,.48)!important;
filter:drop-shadow(0 0 20px rgba(87,2,17,.20))!important;
opacity:.9!important;
}
.wave-a{right:-16vw!important;top:8vh!important;animation:organicWaveA 15s cubic-bezier(.45,0,.55,1) infinite!important}
.wave-b{left:-18vw!important;top:48vh!important;border-color:rgba(126,49,16,.38)!important;animation:organicWaveB 18s cubic-bezier(.45,0,.55,1) infinite!important}
.ambient-wave:before{border-color:rgba(3,44,77,.42)!important;inset:-50px 10%!important}
.ambient-wave:after{border-color:rgba(87,2,17,.38)!important;inset:18% -14%!important}
.glow-a{background:radial-gradient(circle,rgba(87,2,17,.42),transparent 68%)!important}
.glow-b{background:radial-gradient(circle,rgba(87,2,17,.34),transparent 68%)!important}
.ambient-stars{
opacity:.72!important;
background-image:
radial-gradient(circle at 14% 24%,var(--p-teal) 0 1px,transparent 2px),
radial-gradient(circle at 74% 18%,var(--p-rust) 0 1px,transparent 2px),
radial-gradient(circle at 84% 66%,var(--p-navy) 0 1px,transparent 2px),
radial-gradient(circle at 28% 76%,var(--p-wine) 0 1px,transparent 2px),
radial-gradient(circle at 54% 42%,var(--p-teal) 0 1px,transparent 2px)!important;
animation:starDriftCinematic 14s ease-in-out infinite!important;
}
/* Thin cinematic line frames around sections, similar to the recording. */
.cinematic-section:after,.detail-hero:after,.inner-hero:after{
content:"";position:absolute;inset:9% 2.5%;border:1px solid rgba(87,2,17,.18);border-radius:34px;pointer-events:none;mask-image:linear-gradient(90deg,transparent 0 3%,#000 12% 88%,transparent 97%);animation:frameBreath 7s ease-in-out infinite;
}
.cinematic-section:before,.detail-hero:before,.inner-hero:before{
background:
radial-gradient(ellipse at 70% 50%,rgba(87,2,17,.18),transparent 35%),
radial-gradient(ellipse at 22% 60%,rgba(87,2,17,.13),transparent 30%)!important;
}
.hero-motion-layer{z-index:-1!important}
.flow-ribbon{
border-color:rgba(87,2,17,.44)!important;
box-shadow:0 0 55px rgba(87,2,17,.08);
}
.flow-ribbon:after{background:linear-gradient(90deg,transparent,rgba(126,49,16,.20),rgba(87,2,17,.24),transparent)!important}
.flow-orb{border-color:rgba(126,49,16,.34)!important;background:radial-gradient(circle,rgba(87,2,17,.18),transparent 68%)!important}
/* Hero: slow floating mesh / orbit motion rather than a static card. */
.command{
background:
radial-gradient(circle at 72% 28%,rgba(87,2,17,.28),transparent 34%),
linear-gradient(145deg,rgba(54,28,14,.86),rgba(54,8,37,.76),rgba(3,44,77,.74))!important;
border-color:rgba(87,2,17,.62)!important;
animation:commandCinematic 9s ease-in-out infinite!important;
}
.command:before{
content:"";position:absolute;inset:22px;border:1px solid rgba(87,2,17,.16);border-radius:24px;pointer-events:none;animation:innerFrame 8s ease-in-out infinite;
}
.ai-core{background:radial-gradient(circle,rgba(126,49,16,.40),rgba(87,2,17,.12) 52%,transparent 70%)!important;border-color:rgba(126,49,16,.55)!important;color:var(--p-rust)!important}
.orbit-line{border-color:rgba(87,2,17,.40)!important}
.orb-dot{background:var(--p-rust)!important;box-shadow:0 0 18px rgba(126,49,16,.75)!important}
/* Cards and images use only the jewel palette as visual surfaces. */
.glass-card,.process-card,.story-card,.detail-feature,.detail-panel,.about-card,.contact-card,.visual-card{
background:
linear-gradient(145deg,rgba(87,2,17,.20),rgba(54,8,37,.22) 48%,rgba(3,44,77,.18))!important;
border-color:rgba(87,2,17,.48)!important;
}
.glass-card:before,.glass-card:after,.process-card:after,.story-card:after,.detail-feature:after,.detail-panel:after,.about-card:after,.contact-card:after{
background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(126,49,16,.18),transparent 65%)!important;
}
.glass-card:hover,.process-card:hover,.story-card:hover,.detail-feature:hover,.detail-panel:hover{
border-color:rgba(126,49,16,.65)!important;
box-shadow:0 32px 100px rgba(3,44,77,.28),0 0 45px rgba(126,49,16,.12)!important;
}
.card-icon,.story-icon{
color:var(--p-teal)!important;background:rgba(87,2,17,.22)!important;border-color:rgba(126,49,16,.42)!important;
}
.visual-card img{filter:saturate(.70) sepia(.12) hue-rotate(135deg) contrast(1.05)!important;transition:transform 1.4s cubic-bezier(.16,1,.3,1),filter 1.4s!important}
.visual-card:hover img{filter:saturate(.95) sepia(.18) hue-rotate(135deg) contrast(1.08)!important;transform:scale(1.08) translate3d(0,-10px,0)!important}
/* Scroll story: active card floats into focus, surrounding cards recede like staged slides. */
.scroll-story{
background:
radial-gradient(ellipse at 78% 48%,rgba(87,2,17,.16),transparent 30%),
radial-gradient(ellipse at 20% 60%,rgba(87,2,17,.13),transparent 32%),
linear-gradient(180deg,rgba(54,28,14,.16),rgba(54,8,37,.14),rgba(3,44,77,.18))!important;
}
.scroll-story-card{
background:
linear-gradient(145deg,rgba(54,28,14,.94),rgba(87,2,17,.82) 52%,rgba(54,8,37,.92))!important;
border-color:rgba(87,2,17,.70)!important;
box-shadow:0 35px 110px rgba(3,44,77,.32),inset 0 1px rgba(126,49,16,.35)!important;
transition:box-shadow .6s ease,border-color .6s ease,filter .6s ease!important;
}
.scroll-story-card:before{
background:
radial-gradient(circle at 76% 20%,rgba(87,2,17,.28),transparent 44%),
radial-gradient(circle at 20% 88%,rgba(126,49,16,.18),transparent 38%)!important;
}
.scroll-story-card.is-active{
border-color:rgba(126,49,16,.72)!important;
box-shadow:0 45px 140px rgba(87,2,17,.26),0 0 75px rgba(126,49,16,.16)!important;
}
.story-number,.scroll-story-progress,.scroll-story-card a{color:var(--p-rust)!important}
.scroll-story-progress span{background:linear-gradient(90deg,var(--p-teal),var(--p-rust),var(--p-wine))!important}
.scroll-story-visual{
border-color:rgba(87,2,17,.18)!important;
background:radial-gradient(circle,rgba(87,2,17,.13),transparent 57%)!important;
}
.stage-ring.r1{border-color:rgba(87,2,17,.45)!important;animation:storyOrbitCinematic 10s linear infinite!important}
.stage-ring.r2{border-color:rgba(126,49,16,.28)!important;animation:storyOrbitCinematicReverse 16s linear infinite!important}
.stage-core{
border-color:rgba(126,49,16,.58)!important;
color:var(--ink)!important;
background:radial-gradient(circle,rgba(126,49,16,.32),rgba(87,2,17,.22) 45%,rgba(87,2,17,.10) 72%)!important;
box-shadow:0 0 100px rgba(126,49,16,.18),inset 0 0 45px rgba(87,2,17,.14)!important;
}
.stage-dot{background:var(--p-rust)!important;box-shadow:0 0 22px rgba(126,49,16,.78)!important}
/* Ticker becomes a moving editorial strip. */
.ticker{background:rgba(54,28,14,.22)!important;border-color:rgba(87,2,17,.22)!important}
.ticker-track{animation-duration:30s!important}
.ticker-track span{color:rgba(245,238,232,.66)!important}
.ticker-track i{background:var(--p-rust)!important;box-shadow:0 0 12px rgba(126,49,16,.7)!important}
/* Loader: palette-only jewel mark with a longer cinematic reveal. */
.page-loader{background:linear-gradient(135deg,var(--p-espresso),var(--p-wine) 42%,var(--p-plum) 70%,var(--p-navy))!important}
.loader-mark{background:linear-gradient(135deg,var(--p-teal),var(--p-navy),var(--p-rust))!important;border-color:rgba(126,49,16,.65)!important}
.loader-orbit{border-color:rgba(87,2,17,.45)!important}
.loader-status i,.loader-line i{background:linear-gradient(90deg,var(--p-teal),var(--p-rust),var(--p-wine))!important}
/* Footer */
footer{background:linear-gradient(180deg,rgba(54,28,14,.28),rgba(54,8,37,.34),rgba(3,44,77,.24))!important;border-top-color:rgba(87,2,17,.30)!important}
.socials a{background:rgba(87,2,17,.18)!important;border-color:rgba(87,2,17,.48)!important}
.socials a:hover{background:rgba(87,2,17,.28)!important;border-color:rgba(126,49,16,.65)!important}
/* Keyframes */
@keyframes logoHalo{0%,100%{transform:scale(.94);opacity:.45}50%{transform:scale(1.12);opacity:1}}
@keyframes buttonSheen{0%,72%{transform:translateX(-130%)}86%,100%{transform:translateX(170%)}}
@keyframes gridDriftCinematic{0%{transform:perspective(850px) rotateX(62deg) translate3d(0,22%,0) scale(1.15)}50%{transform:perspective(850px) rotateX(62deg) translate3d(-40px,19%,0) scale(1.17)}100%{transform:perspective(850px) rotateX(62deg) translate3d(-90px,22%,0) scale(1.15)}}
@keyframes organicWaveA{0%,100%{transform:rotate(-17deg) translate3d(0,0,0) scale(1)}25%{transform:rotate(-10deg) translate3d(-2vw,1vh,0) scale(1.06)}50%{transform:rotate(-22deg) translate3d(-4vw,3vh,0) scale(.98)}75%{transform:rotate(-12deg) translate3d(-1vw,-1vh,0) scale(1.05)}}
@keyframes organicWaveB{0%,100%{transform:rotate(18deg) translate3d(0,0,0) scale(1)}35%{transform:rotate(10deg) translate3d(4vw,-2vh,0) scale(1.08)}70%{transform:rotate(23deg) translate3d(1vw,3vh,0) scale(.98)}}
@keyframes starDriftCinematic{0%,100%{transform:translate3d(0,0,0);opacity:.45}50%{transform:translate3d(0,-18px,0);opacity:.82}}
@keyframes frameBreath{0%,100%{opacity:.22;transform:scaleX(.99)}50%{opacity:.52;transform:scaleX(1.005)}}
@keyframes commandCinematic{0%,100%{transform:perspective(1200px) rotateY(-5deg) translate3d(0,0,0)}50%{transform:perspective(1200px) rotateY(0deg) translate3d(0,-9px,0)}}
@keyframes innerFrame{0%,100%{inset:22px;opacity:.25}50%{inset:17px;opacity:.55}}
@keyframes storyOrbitCinematic{to{transform:rotate(360deg) scale(1.03)}}
@keyframes storyOrbitCinematicReverse{to{transform:rotate(-360deg) scale(.97)}}
@media(max-width:900px){
.cinematic-section:after,.detail-hero:after,.inner-hero:after{inset:4% 2%;border-radius:24px}
.ambient-wave{width:120vw!important;height:64vw!important}
.ambient-grid{opacity:.10!important}
}
@media(max-width:600px){
.cinematic-section:after,.detail-hero:after,.inner-hero:after{inset:2% 1%;border-radius:20px}
.ambient-wave{width:170vw!important;height:105vw!important}
.flow-ribbon{width:120%!important}
.hero-motion-layer{opacity:.7}
.scroll-story-card{transition:box-shadow .4s ease,border-color .4s ease!important}
}
@media(prefers-reduced-motion:reduce){
.ambient-grid,.ambient-wave,.ambient-stars,.ambient-glow,.command,.about-orbit,.ai-orbit,.scroll-story-visual,.stage-ring,.logo-mark:after,.nav-cta:before,.primary:before,.footer-cta:before{animation:none!important}
}
/* =========================================================
FINAL PREMIUM MOTION PASS
Existing layout/content preserved. Approved palette only.
========================================================= */
:root{
--motion-ease:cubic-bezier(.16,1,.3,1);
--motion-soft:cubic-bezier(.22,1,.36,1);
--motion-snap:cubic-bezier(.2,.8,.2,1);
}
/* Remove the old green glow language completely. */
body:before{
background:
radial-gradient(circle at 12% 16%,rgba(87,2,17,.24),transparent 29%),
radial-gradient(circle at 84% 22%,rgba(3,44,77,.22),transparent 31%),
radial-gradient(circle at 62% 78%,rgba(126,49,16,.14),transparent 34%),
#361C0E!important;
}
html:before{
background:linear-gradient(90deg,#570211,#7E3110,#032C4D,#360825)!important;
box-shadow:0 0 20px rgba(126,49,16,.38)!important;
}
/* Cinematic background: slow layered motion rather than a constant neon glow. */
.ambient-scene{background:
radial-gradient(circle at 76% 18%,rgba(3,44,77,.18),transparent 28%),
radial-gradient(circle at 18% 64%,rgba(87,2,17,.18),transparent 30%),
linear-gradient(135deg,#361C0E,#360825 46%,#032C4D 100%)!important;}
.ambient-grid{background-image:
linear-gradient(rgba(126,49,16,.08) 1px,transparent 1px),
linear-gradient(90deg,rgba(3,44,77,.08) 1px,transparent 1px)!important;animation:gridDriftCinematic 24s linear infinite!important;}
.ambient-wave{border-color:rgba(3,44,77,.32)!important;filter:drop-shadow(0 0 22px rgba(3,44,77,.10))!important;}
.wave-b{border-color:rgba(126,49,16,.34)!important;}
.ambient-wave:before{border-color:rgba(87,2,17,.24)!important}
.ambient-wave:after{border-color:rgba(3,44,77,.28)!important}
.glow-a{background:radial-gradient(circle,rgba(3,44,77,.28),transparent 68%)!important}
.glow-b{background:radial-gradient(circle,rgba(87,2,17,.25),transparent 68%)!important}
.ambient-stars{background-image:
radial-gradient(circle at 14% 24%,#FFFFFF 0 1px,transparent 2px),
radial-gradient(circle at 74% 18%,#032C4D 0 1px,transparent 2px),
radial-gradient(circle at 84% 66%,#7E3110 0 1px,transparent 2px),
radial-gradient(circle at 28% 76%,#570211 0 1px,transparent 2px),
radial-gradient(circle at 54% 42%,#FFFFFF 0 1px,transparent 2px)!important;}
/* Header/logo: restrained depth and jewel sheen. */
.nav,.header .nav-shell{background:rgba(54,28,14,.78)!important;border-color:rgba(126,49,16,.32)!important;box-shadow:0 20px 70px rgba(0,0,0,.35)!important}
.logo-mark,.loader-mark{background:linear-gradient(135deg,#7E3110,#570211,#032C4D)!important;color:#FFFFFF!important;box-shadow:0 0 0 1px rgba(126,49,16,.5),0 0 50px rgba(87,2,17,.25)!important}
.logo b,.hero-copy h1 span,.section-heading h2 span,.inner-hero h1 span,.detail-copy h1 span{color:#7E3110!important}
/* Hero: sequential cinematic entrance. */
.hero-copy{animation:premiumHeroCopy 1.05s var(--motion-ease) both .08s!important}
.hero-copy .eyebrow{animation:premiumEyebrow .75s var(--motion-ease) both .16s!important}
.hero-copy h1{animation:premiumTitle 1.05s var(--motion-ease) both .25s!important}
.hero-copy>p{animation:premiumCopy .85s var(--motion-ease) both .42s!important}
.hero-actions{animation:premiumRise .8s var(--motion-ease) both .56s!important}
.trust{animation:premiumRise .8s var(--motion-ease) both .66s!important}
.hero-visual{animation:premiumVisual 1.2s var(--motion-ease) both .28s!important}
.command{animation:commandCinematic 8s ease-in-out infinite!important}
/* Scroll reveals: masked/translated, but never block content. */
.reveal{opacity:0;transform:translate3d(0,30px,0) scale(.985);filter:blur(5px);transition:opacity .75s var(--motion-ease),transform .9s var(--motion-ease),filter .75s var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.reveal.in-view,.reveal.route-ready{opacity:1;transform:none;filter:none}
.reveal.route-ready{transition:none!important}
.section-heading h2,.section-heading p{will-change:transform,opacity}
.section-heading.cinematic-heading h2{animation:headingMaskIn 1s var(--motion-ease) both .08s}
.section-heading.cinematic-heading p{animation:copyMaskIn .85s var(--motion-ease) both .2s}
/* Stagger children without changing their layout. */
.cards-grid .reveal:nth-child(1){--reveal-delay:0ms}.cards-grid .reveal:nth-child(2){--reveal-delay:70ms}.cards-grid .reveal:nth-child(3){--reveal-delay:140ms}.cards-grid .reveal:nth-child(4){--reveal-delay:210ms}.cards-grid .reveal:nth-child(5){--reveal-delay:280ms}.cards-grid .reveal:nth-child(6){--reveal-delay:350ms}.cards-grid .reveal:nth-child(7){--reveal-delay:420ms}.cards-grid .reveal:nth-child(8){--reveal-delay:490ms}.cards-grid .reveal:nth-child(9){--reveal-delay:560ms}
/* Cards: subtle lift, light sweep and depth — not flashy. */
.glass-card,.process-card,.detail-feature,.detail-panel,.about-card,.contact-card,.story-card{transform-style:preserve-3d;will-change:transform}
.glass-card:before,.process-card:before,.detail-feature:before,.detail-panel:before,.about-card:before,.contact-card:before{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(126,49,16,.13),transparent 65%)!important}
.glass-card:hover{transform:translate3d(0,-8px,0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1.008)!important;border-color:rgba(126,49,16,.55)!important}
.glass-card:hover .card-icon{transform:translateZ(10px) rotate(-5deg) scale(1.08)!important;color:#032C4D!important}
.process-card:hover,.detail-feature:hover,.detail-panel:hover{transform:translate3d(0,-6px,0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))!important;border-color:rgba(3,44,77,.55)!important}
/* CTA micro-interactions. */
.primary,.nav-cta,.footer-cta{background:linear-gradient(120deg,#7E3110,#570211 48%,#032C4D)!important;color:#FFFFFF!important;transform:translate3d(var(--mag-x,0),var(--mag-y,0),0);transition:transform .35s var(--motion-ease),box-shadow .35s ease,filter .35s ease!important;box-shadow:0 16px 45px rgba(87,2,17,.28)!important}
.primary:hover,.nav-cta:hover,.footer-cta:hover{filter:brightness(1.08);box-shadow:0 22px 65px rgba(3,44,77,.28)!important}
.secondary{color:#FFFFFF!important;border-color:rgba(3,44,77,.55)!important;background:rgba(54,28,14,.42)!important;transform:translate3d(var(--mag-x,0),var(--mag-y,0),0);transition:transform .35s var(--motion-ease),background .35s,border-color .35s!important}
.secondary:hover{background:rgba(3,44,77,.22)!important;border-color:rgba(126,49,16,.65)!important}
.nav-cta:after,.primary:after,.footer-cta:after{background:rgba(255,255,255,.24)!important}
/* Count-up visual treatment. */
.metric b{font-variant-numeric:tabular-nums;color:#FFFFFF!important;text-shadow:0 0 30px rgba(3,44,77,.28)}
.metric:hover{background:rgba(126,49,16,.035)!important}
/* Scroll-driven storytelling: new choreography, same section/layout. */
.scroll-story{background:linear-gradient(180deg,transparent,rgba(87,2,17,.07),rgba(3,44,77,.08),transparent)!important}
.scroll-story:before{background:linear-gradient(transparent,rgba(126,49,16,.38),rgba(3,44,77,.30),transparent)!important}
.scroll-story-card{background:linear-gradient(145deg,rgba(54,28,14,.97),rgba(54,8,37,.94) 52%,rgba(3,44,77,.90))!important;border-color:rgba(126,49,16,.38)!important;box-shadow:0 35px 100px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.05)!important}
.scroll-story-card.is-active{border-color:rgba(126,49,16,.78)!important;box-shadow:0 45px 130px rgba(0,0,0,.48),0 0 75px rgba(87,2,17,.16)!important}
.story-number{color:#FFFFFF!important}.story-icon{background:rgba(3,44,77,.24)!important;border-color:rgba(3,44,77,.55)!important;color:#FFFFFF!important}
.scroll-story-card a{color:#FFFFFF!important}
.scroll-story-progress span{background:linear-gradient(90deg,#7E3110,#570211,#032C4D)!important}.scroll-story-progress span:after{background:#FFFFFF!important;box-shadow:0 0 18px rgba(255,255,255,.4)!important}
.scroll-story-stage .stage-ring{border-color:rgba(3,44,77,.48)!important}.scroll-story-stage .stage-ring.r2{border-color:rgba(126,49,16,.34)!important}
.scroll-story-stage .stage-core{background:radial-gradient(circle,rgba(126,49,16,.38),rgba(87,2,17,.22) 45%,rgba(3,44,77,.12) 72%)!important;border-color:rgba(126,49,16,.58)!important;color:#FFFFFF!important;box-shadow:0 0 100px rgba(126,49,16,.18),inset 0 0 45px rgba(3,44,77,.18)!important}
.stage-dot{background:#7E3110!important;box-shadow:0 0 22px rgba(126,49,16,.7)!important}
/* Image/visual reveal + parallax. */
.visual-card{background:#361C0E!important;border-color:rgba(3,44,77,.46)!important}
.visual-card img{filter:saturate(.82) contrast(1.05);transition:transform 1.1s var(--motion-ease),filter .8s ease,opacity .8s ease!important}
.visual-card:hover img{transform:scale(1.055) translate3d(0,-5px,0)!important;filter:saturate(.98) contrast(1.08)!important}
/* Navigation dropdowns and mobile menu stay consistent with the palette. */
.mega,.mobile-menu,.mobile-sub,.service-select-menu{background:rgba(54,28,14,.97)!important;border-color:rgba(126,49,16,.4)!important}
.mega-top span,.eyebrow{color:#FFFFFF!important}.mega-item:hover,.mobile-sub a:hover{background:rgba(3,44,77,.16)!important;border-color:rgba(3,44,77,.35)!important}
.mi-icon,.card-icon{color:#FFFFFF!important;background:rgba(3,44,77,.20)!important;border-color:rgba(3,44,77,.42)!important}
.mega-item>svg{color:#7E3110!important}.mobile-sub::-webkit-scrollbar-thumb,.service-select-menu::-webkit-scrollbar-thumb{background:rgba(126,49,16,.62)!important}
/* Loader: premium, but never blocks the page unnecessarily. */
.page-loader{background:linear-gradient(135deg,#361C0E,#360825 52%,#032C4D)!important}
.loader-mark{background:linear-gradient(135deg,#7E3110,#570211,#032C4D)!important}
.loader-brand b{color:#FFFFFF!important}.loader-status i,.loader-line i{background:linear-gradient(90deg,#7E3110,#570211,#032C4D)!important}.loader-orbit{border-color:rgba(3,44,77,.5)!important}.loader-orbit:after{background:#7E3110!important;box-shadow:0 0 18px rgba(126,49,16,.7)!important}
/* Footer/socials. */
.socials a{background:rgba(3,44,77,.18)!important;border-color:rgba(3,44,77,.48)!important}.socials a:hover{background:rgba(87,2,17,.26)!important;border-color:rgba(126,49,16,.7)!important}
footer{background:linear-gradient(180deg,rgba(54,28,14,.30),rgba(54,8,37,.34),rgba(3,44,77,.24))!important;border-top-color:rgba(126,49,16,.28)!important}
/* Mobile: keep motion fluid, reduce only heavy parallax/sticky depth. */
@media(max-width:900px){
.cursor-aura{display:none!important}
.ambient-grid{opacity:.08!important}
.ambient-wave{opacity:.62!important}
.cinematic-section{transform:none!important}
.hero-copy h1{animation-duration:.85s!important}
.scroll-story-card{transform-style:flat!important}
}
@media(max-width:600px){
.reveal{transform:translate3d(0,18px,0) scale(.99);filter:blur(3px)}
.scroll-story{min-height:2250px}
.scroll-story-stage-stack{width:90%;height:330px}
.scroll-story-visual{opacity:.38}
.visual-card img{filter:none!important}
}
/* Accessibility: respect reduced motion everywhere. */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
.reveal{opacity:1!important;transform:none!important;filter:none!important}
.cursor-aura,.ambient-scene,.page-loader{display:none!important}
}
@keyframes premiumHeroCopy{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
@keyframes premiumEyebrow{from{opacity:0;transform:translate3d(-18px,0,0);letter-spacing:.42em}to{opacity:1;transform:none;letter-spacing:.18em}}
@keyframes premiumTitle{from{opacity:0;transform:translate3d(0,32px,0) scale(.96);clip-path:inset(12% 0 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes premiumCopy{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes premiumRise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes premiumVisual{from{opacity:0;transform:translate3d(45px,25px,0) scale(.92) rotateY(-10deg)}to{opacity:1;transform:none}}
@keyframes headingMaskIn{from{opacity:0;transform:translate3d(0,22px,0);clip-path:inset(20% 0 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes copyMaskIn{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
/* =========================================================
MarketAIFlow — Premium Motion / Editorial Layout Pass
Palette: Rich Earthy Jewel + black + white only.
This layer changes presentation/motion without changing
application content, routes, forms or data.
========================================================= */
:root{
--ink:#000000;
--cream:#FFFFFF;
--earth:#361C0E;
--wine:#570211;
--rust:#7E3110;
--navy:#032C4D;
--plum:#360825;
--motion:cubic-bezier(.16,1,.3,1);
--motion-soft:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:smooth;background:var(--ink)}
body{
background:
radial-gradient(900px 520px at 88% 3%,rgba(3,44,77,.25),transparent 68%),
radial-gradient(760px 520px at 5% 42%,rgba(87,2,17,.22),transparent 70%),
linear-gradient(145deg,var(--earth) 0%,#361C0E 38%,var(--plum) 72%,#000000 100%);
color:var(--cream);
}
body:before{background:
radial-gradient(circle at 80% 10%,rgba(126,49,16,.15),transparent 28%),
radial-gradient(circle at 8% 62%,rgba(3,44,77,.16),transparent 30%),
linear-gradient(145deg,var(--earth),#361C0E 52%,var(--plum));
}
body:after{
content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;
opacity:.07;mix-blend-mode:screen;
background-image:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 70% 70%,#fff 0 1px,transparent 1.5px);
background-size:90px 90px,140px 140px;
animation:grainDrift 14s steps(2) infinite;
}
@keyframes grainDrift{50%{background-position:30px -20px,-40px 25px}}
/* Floating background: layered cinematic "light sheets", not the old green grid. */
.ambient-scene{opacity:.9}
.ambient-grid{
opacity:.16;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(126,49,16,.06) 1px,transparent 1px);
background-size:72px 72px;
animation:gridDrift 28s linear infinite;
}
.ambient-wave{border-color:rgba(126,49,16,.24)!important;filter:drop-shadow(0 0 22px rgba(126,49,16,.08))}
.wave-a{animation:cinematicWaveA 18s ease-in-out infinite}
.wave-b{border-color:rgba(3,44,77,.22)!important;animation:cinematicWaveB 22s ease-in-out infinite}
.ambient-wave:before{border-color:rgba(87,2,17,.18)!important}
.ambient-wave:after{border-color:rgba(3,44,77,.15)!important}
.glow-a{background:radial-gradient(circle,rgba(3,44,77,.34),transparent 68%)!important}
.glow-b{background:radial-gradient(circle,rgba(87,2,17,.30),transparent 68%)!important}
@keyframes cinematicWaveA{0%,100%{transform:rotate(-17deg) translate3d(0,0,0) scale(1)}50%{transform:rotate(-10deg) translate3d(-5vw,4vh,0) scale(1.08)}}
@keyframes cinematicWaveB{0%,100%{transform:rotate(18deg) translate3d(0,0,0)}50%{transform:rotate(25deg) translate3d(7vw,-3vh,0) scale(1.12)}}
/* Header: editorial glass strip with a thin moving highlight. */
.nav-shell{width:min(1260px,calc(100% - 48px));}
.nav{
position:relative;overflow:hidden;
height:76px;border-radius:24px;
background:linear-gradient(110deg,rgba(0,0,0,.78),rgba(54,8,37,.52) 52%,rgba(3,44,77,.42));
border-color:rgba(255,255,255,.11);
box-shadow:0 22px 80px rgba(0,0,0,.42);
}
.nav:after{
content:"";position:absolute;left:-30%;top:0;width:38%;height:1px;
background:linear-gradient(90deg,transparent,#fff,transparent);opacity:.65;
animation:navSheen 7s linear infinite;
}
@keyframes navSheen{to{left:110%}}
.logo-mark{
background:linear-gradient(135deg,var(--rust),var(--wine) 55%,var(--navy));
color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 34px rgba(126,49,16,.25);
}
.logo b,.hero-copy h1 span,.inner-hero h1 span,.detail-copy h1 span{color:#FFFFFF}
.nav-cta,.primary{
background:linear-gradient(120deg,var(--rust),var(--wine) 60%,var(--plum));
color:#fff;border:1px solid rgba(255,255,255,.12);
}
.nav-cta:hover,.primary:hover{box-shadow:0 20px 55px rgba(87,2,17,.35)}
.secondary:hover{border-color:rgba(126,49,16,.55);background:rgba(126,49,16,.08)}
.drop-trigger:hover,.drop-trigger.active{color:#fff}
/* Hero: asymmetrical editorial composition with the visual lifted into the grid. */
.hero{
min-height:800px;padding-top:148px;padding-bottom:80px;
grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);
gap:80px;position:relative;
}
.hero-copy{max-width:760px;position:relative;z-index:2}
.hero-copy h1{
font-size:clamp(64px,7.2vw,112px);
line-height:.88;max-width:780px;
text-wrap:balance;
}
.hero-copy>p{max-width:650px;font-size:17px;color:rgba(255,255,255,.78)}
.hero-actions .primary{min-width:185px}
.hero-motion-layer{opacity:.9}
.flow-ribbon{border-color:rgba(126,49,16,.25)!important}
.flow-ribbon:after{background:linear-gradient(90deg,transparent,rgba(126,49,16,.18),transparent)!important}
.flow-orb{border-color:rgba(3,44,77,.24)!important;background:radial-gradient(circle,rgba(3,44,77,.18),transparent 68%)!important}
.hero-visual{align-items:center}
.command{
width:min(100%,540px);min-height:560px;
border-radius:36px;
background:
linear-gradient(160deg,rgba(3,44,77,.34),rgba(0,0,0,.78) 46%,rgba(54,8,37,.7)),
radial-gradient(circle at 65% 20%,rgba(126,49,16,.18),transparent 40%);
border-color:rgba(255,255,255,.14);
transform:perspective(1200px) rotateY(-8deg) rotateX(2deg) translateY(20px);
}
.command:hover{transform:perspective(1200px) rotateY(0) rotateX(0) translateY(-5px)}
/* Metrics become a premium editorial rail. */
.metrics{border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.2)}
.metrics-grid{grid-template-columns:repeat(4,1fr)}
.metric{position:relative;padding:28px 22px}
.metric:not(:last-child):after{content:"";position:absolute;right:0;top:24%;height:52%;width:1px;background:rgba(255,255,255,.08)}
.metric b{font-size:clamp(30px,3vw,44px);color:#fff}
/* Visuals: new bento composition while preserving the same image content. */
.visual-showcase{padding-top:145px;padding-bottom:85px}
.visual-showcase-head{grid-template-columns:1.25fr .75fr;gap:90px}
.visual-showcase-head h2{font-size:clamp(48px,6vw,84px);max-width:900px}
.visual-grid{
grid-template-columns:1.45fr .8fr .8fr;
grid-template-rows:240px 240px;
gap:18px;
}
.visual-card,.visual-card.visual-wide{min-height:0;height:100%;border-radius:30px;background:linear-gradient(145deg,rgba(54,28,14,.6),rgba(0,0,0,.78));border-color:rgba(255,255,255,.1)}
.visual-card.visual-wide{grid-row:1/3}
.visual-card:nth-child(2){transform:translateY(28px)}
.visual-card:nth-child(3){transform:translateY(-28px)}
.visual-card img{object-fit:cover;transform:scale(1.02);filter:saturate(.82) contrast(1.03)}
.visual-card:after{background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.9) 100%)}
.visual-card figcaption b{font-size:25px}
.visual-card:hover{transform:translateY(-8px)!important}
.visual-card.visual-wide:hover{transform:translateY(-8px)!important}
/* Section rhythm: more whitespace + editorial markers. */
.section{padding-top:150px;padding-bottom:130px}
.section-heading{max-width:1000px;margin:0 auto 62px}
.section-heading h2{font-size:clamp(52px,6vw,84px);text-wrap:balance}
.cards-grid{gap:18px}
.industries-grid{grid-template-columns:repeat(3,1fr)}
.glass-card{
min-height:270px;padding:30px;
border-radius:28px;
background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(54,8,37,.16) 55%,rgba(3,44,77,.12));
border-color:rgba(255,255,255,.09);
}
.glass-card:before{background:radial-gradient(circle at 0 0,rgba(126,49,16,.18),transparent 54%)}
.card-icon{color:#fff;background:linear-gradient(135deg,rgba(126,49,16,.2),rgba(3,44,77,.18));border-color:rgba(255,255,255,.12)}
.glass-card:hover{border-color:rgba(126,49,16,.45);box-shadow:0 30px 80px rgba(0,0,0,.34),0 0 50px rgba(126,49,16,.08)}
/* Scroll storytelling: layered "film-strip" pinned composition. */
.scroll-story{
height:calc(100vh * var(--story-count));
min-height:3000px;
background:
radial-gradient(700px 700px at 76% 50%,rgba(3,44,77,.2),transparent 65%),
radial-gradient(600px 600px at 20% 50%,rgba(87,2,17,.18),transparent 70%);
}
.scroll-story-sticky{background:linear-gradient(115deg,rgba(0,0,0,.78),rgba(54,28,14,.25) 48%,rgba(3,44,77,.18))}
.scroll-story-inner{
max-width:1380px;padding:9vh 55px;
grid-template-columns:.7fr 1.3fr;gap:70px;
}
.scroll-story-copy h2{font-size:clamp(56px,6vw,92px);text-wrap:balance}
.scroll-story-copy p{color:rgba(255,255,255,.7);font-size:17px}
.scroll-story-stage-wrap{height:700px}
.scroll-story-stage-stack{left:6%;width:54%;height:490px}
.scroll-story-card{
padding:38px;border-radius:34px;
background:linear-gradient(150deg,rgba(54,28,14,.96),rgba(0,0,0,.93) 52%,rgba(54,8,37,.94));
border-color:rgba(255,255,255,.12);
box-shadow:0 35px 110px rgba(0,0,0,.5);
}
.scroll-story-card:before{background:radial-gradient(350px circle at 80% 15%,rgba(126,49,16,.18),transparent 62%)}
.story-icon{color:#fff;border-color:rgba(255,255,255,.14);background:linear-gradient(135deg,rgba(126,49,16,.2),rgba(3,44,77,.2))}
.scroll-story-card a{color:#fff}
.scroll-story-visual{
right:-5%;width:68%;height:680px;
border-color:rgba(255,255,255,.08);
background:radial-gradient(circle,rgba(3,44,77,.14),transparent 58%);
}
.stage-ring{border-color:rgba(126,49,16,.22)!important}
.stage-core{background:linear-gradient(135deg,var(--navy),var(--wine));color:#fff;box-shadow:0 0 60px rgba(126,49,16,.18)}
.stage-dot{background:#fff!important;box-shadow:0 0 15px rgba(255,255,255,.7)!important}
.scroll-story-progress{color:#fff}
.scroll-story-progress span{background:rgba(255,255,255,.16);box-shadow:none}
.scroll-story-progress span:after{background:linear-gradient(90deg,var(--rust),var(--wine),var(--navy));box-shadow:0 0 18px rgba(126,49,16,.25)}
/* Existing services/process/contact cards get the same visual language. */
.services-grid{gap:18px}
.process-card,.detail-feature,.story-card,.about-card,.contact-card{
background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(54,8,37,.12),rgba(3,44,77,.1));
border-color:rgba(255,255,255,.09);
}
.process-card:hover,.detail-feature:hover,.story-card:hover{border-color:rgba(126,49,16,.42);transform:translateY(-8px)}
/* Premium reveal: clip/mask feel rather than generic fade only. */
.reveal{
opacity:0;
transform:translate3d(0,44px,0) scale(.985);
filter:blur(8px);
transition:
opacity .9s var(--motion),
transform 1s var(--motion),
filter 1s var(--motion);
transition-delay:var(--reveal-delay,0ms);
}
.reveal.in-view,.reveal.route-ready{opacity:1;transform:none;filter:blur(0)}
.cinematic-heading h2{
clip-path:inset(0 0 18% 0);
transform:translateY(26px);
transition:clip-path 1.1s var(--motion),transform 1.1s var(--motion);
}
.cinematic-heading.in-view h2{clip-path:inset(0);transform:none}
.hero-copy.reveal h1{transform:translateY(35px);opacity:0}
.hero-copy.in-view h1{animation:heroTitleIn 1.15s var(--motion) .06s both}
.hero-copy.in-view>p{animation:heroCopyIn .9s var(--motion) .22s both}
.hero-copy.in-view .hero-actions{animation:heroCopyIn .85s var(--motion) .34s both}
.hero-copy.in-view .trust{animation:heroCopyIn .8s var(--motion) .46s both}
@keyframes heroTitleIn{from{opacity:0;transform:translate3d(0,45px,0);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@keyframes heroCopyIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* Card hover interaction: subtle 3D without making scrolling jittery. */
.glass-card,.process-card,.story-card,.detail-feature,.detail-panel,.about-card,.contact-card{
transform:translate3d(0,0,0) perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
transition:transform .5s var(--motion),box-shadow .5s var(--motion),border-color .4s;
}
.glass-card:hover,.process-card:hover,.story-card:hover,.detail-feature:hover,.detail-panel:hover,.about-card:hover,.contact-card:hover{
box-shadow:0 30px 90px rgba(0,0,0,.34);
}
/* CTA micro interaction with magnetic vars set by JS. */
.primary,.secondary,.nav-cta,.footer-cta{
transform:translate3d(var(--mag-x,0),var(--mag-y,0),0);
will-change:transform;
}
.primary:after,.nav-cta:after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 66%);
transform:translateX(-130%);transition:transform .8s var(--motion);
}
.primary:hover:after,.nav-cta:hover:after{transform:translateX(130%)}
/* Images: mask-like entrance + restrained parallax. */
.visual-card img,.hero-visual img,.detail-panel img{
transition:transform 1.15s var(--motion),opacity .8s var(--motion),filter .8s var(--motion);
}
.reveal.in-view img{animation:imageReveal 1.25s var(--motion) both}
@keyframes imageReveal{from{opacity:0;transform:scale(1.08) translateY(18px);filter:blur(8px)}to{opacity:1;transform:scale(1);filter:none}}
/* Navigation active state. */
.desktop-nav>a.active,.desktop-nav>a[aria-current="page"]{color:#fff;position:relative}
.desktop-nav>a.active:after,.desktop-nav>a[aria-current="page"]:after{
content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:linear-gradient(90deg,var(--rust),var(--navy));transform-origin:left;animation:navActive .45s var(--motion) both;
}
@keyframes navActive{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Mobile: no heavy pin/tilt; keep the cinematic sequence compact. */
@media(max-width:1050px){
.hero{grid-template-columns:1fr;gap:45px}
.hero-visual{justify-content:center}
.metrics-grid{grid-template-columns:repeat(2,1fr)}
.visual-showcase-head{grid-template-columns:1fr}
.scroll-story-inner{grid-template-columns:.75fr 1.25fr}
}
@media(max-width:760px){
body{background:linear-gradient(160deg,var(--earth),#000000 45%,var(--plum))}
.nav-shell{width:calc(100% - 18px)}
.nav{height:64px;padding:0 12px;border-radius:20px}
.logo{font-size:15px}.logo-mark{width:38px;height:38px}
.mobile-menu{background:linear-gradient(160deg,rgba(0,0,0,.98),rgba(54,8,37,.97));border-color:rgba(255,255,255,.12)}
.mobile-sub{max-height:270px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--rust) rgba(255,255,255,.06)}
.hero{padding-top:112px;padding-bottom:55px;min-height:0}
.hero-copy h1{font-size:clamp(48px,14vw,68px)}
.hero-copy>p{font-size:14px;line-height:1.75}
.command{min-height:430px;width:100%;transform:none}
.metrics-grid{grid-template-columns:1fr 1fr}
.metric{padding:24px 16px}
.metric b{font-size:28px}
.visual-showcase{padding-top:95px;padding-bottom:65px}
.visual-showcase-head h2{font-size:44px}
.visual-grid{grid-template-columns:1fr;grid-template-rows:none}
.visual-card,.visual-card.visual-wide{height:310px;min-height:310px;grid-row:auto;transform:none!important}
.visual-card:nth-child(2),.visual-card:nth-child(3){transform:none!important}
.section{padding-top:100px;padding-bottom:90px}
.section-heading{margin-bottom:40px}
.section-heading h2{font-size:44px}
.industries-grid,.services-grid{grid-template-columns:1fr}
.glass-card{min-height:245px}
.scroll-story{height:auto;min-height:0;padding:95px 0 80px}
.scroll-story-sticky{position:relative;height:auto;min-height:0}
.scroll-story-inner{height:auto;padding:0 16px;display:block}
.scroll-story-copy{max-width:none;margin-bottom:34px}
.scroll-story-copy h2{font-size:46px}
.scroll-story-copy p{font-size:14px}
.scroll-story-stage-wrap{height:520px}
.scroll-story-stage-stack{left:0;top:50%;width:100%;height:390px}
.scroll-story-card{padding:26px;border-radius:28px}
.scroll-story-card h3{font-size:27px}
.scroll-story-card p{font-size:13px}
.scroll-story-visual{right:-30%;width:120%;height:520px;opacity:.55}
.scroll-story-card{transform:none!important}
.scroll-story-card:not(.is-active){opacity:0!important;pointer-events:none}
.scroll-story-card.is-active{opacity:1!important;transform:translate3d(0,0,0) scale(1)!important}
.reveal{transition-duration:.7s}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.ambient-scene,.cursor-aura{display:none!important}
.reveal{opacity:1!important;transform:none!important;filter:none!important}
}
/* =========================================================
LIGHT JEWEL EDITORIAL PASS
No green. Same content/components; presentation + motion only.
Palette: #361C0E #570211 #7E3110 #032C4D #360825 + black/white.
========================================================= */
:root{
--ink:#361C0E;
--wine:#570211;
--rust:#7E3110;
--navy:#032C4D;
--plum:#360825;
--paper:#FFFFFF;
--black:#000000;
--motion:cubic-bezier(.16,1,.3,1);
}
html{background:#FFFFFF}
body{
background:#FFFFFF!important;
color:var(--ink)!important;
}
body:before{
background:
radial-gradient(circle at 8% 8%,rgba(126,49,16,.10),transparent 25%),
radial-gradient(circle at 92% 28%,rgba(3,44,77,.10),transparent 28%),
radial-gradient(circle at 50% 78%,rgba(87,2,17,.08),transparent 30%),
#FFFFFF!important;
}
body:after{
background:radial-gradient(circle,rgba(3,44,77,.07),transparent 66%)!important;
opacity:.75;
}
/* Header becomes a clean floating paper rail */
.nav-shell{margin-top:14px}
.nav{
background:rgba(255,255,255,.88)!important;
border:1px solid rgba(54,28,14,.14)!important;
box-shadow:0 18px 55px rgba(54,28,14,.10)!important;
backdrop-filter:blur(18px);
}
.logo{color:var(--ink)!important}
.logo b{color:var(--wine)!important}
.desktop-nav>a:not(.nav-cta),.drop-trigger{color:var(--ink)!important}
.desktop-nav>a:not(.nav-cta):hover,.drop-trigger:hover,.drop-trigger.active{color:var(--wine)!important}
.hamb{color:var(--ink)!important}
.logo-mark{
background:linear-gradient(135deg,var(--wine),var(--rust))!important;
color:#fff!important;
box-shadow:0 9px 28px rgba(87,2,17,.22)!important;
}
.nav-cta,.primary,.footer-cta{
background:linear-gradient(135deg,var(--wine),var(--rust))!important;
color:#fff!important;
box-shadow:0 14px 35px rgba(87,2,17,.18)!important;
}
.secondary{
color:var(--ink)!important;
border-color:rgba(54,28,14,.16)!important;
background:#fff!important;
}
.secondary:hover{border-color:var(--wine)!important;background:rgba(87,2,17,.035)!important}
/* Hero: spacious editorial split with framed visual */
.hero{
min-height:790px;
padding-top:145px;
padding-bottom:70px;
grid-template-columns:1.15fr .85fr;
gap:70px;
}
.hero-copy{max-width:720px}
.hero-copy h1,.inner-hero h1,.detail-copy h1{
color:var(--ink)!important;
font-weight:750;
letter-spacing:-.075em;
}
.hero-copy h1 span,.inner-hero h1 span,.detail-copy h1 span{color:var(--wine)!important}
.hero-copy>p,.inner-hero>p,.detail-copy>p{
color:rgba(54,28,14,.70)!important;
max-width:660px;
}
.eyebrow{color:var(--wine)!important}
.eyebrow i{background:var(--rust)!important;box-shadow:0 0 0 7px rgba(126,49,16,.10)!important}
.trust{color:rgba(54,28,14,.68)!important}
.trust svg{color:var(--wine)!important}
/* Main visual: no dark slab; crisp jewel frame */
.command{
background:
linear-gradient(145deg,rgba(255,255,255,.98),rgba(3,44,77,.035))!important;
border:1px solid rgba(54,28,14,.16)!important;
box-shadow:0 35px 90px rgba(54,28,14,.12),0 0 70px rgba(3,44,77,.07)!important;
}
.command-head{border-color:rgba(54,28,14,.09)!important}
.command-head small,.command-head span{color:var(--wine)!important}
.command-head b{color:var(--ink)!important}
.ai-core{
color:var(--wine)!important;
border-color:rgba(87,2,17,.30)!important;
background:rgba(87,2,17,.035)!important;
box-shadow:0 0 65px rgba(87,2,17,.10)!important;
}
.orbit-line{border-color:rgba(3,44,77,.20)!important}
.orb-dot{background:var(--rust)!important;box-shadow:0 0 14px rgba(126,49,16,.35)!important}
.mini-stats div,.activity{border-color:rgba(54,28,14,.09)!important}
.mini-stats small,.activity div,.activity em{color:rgba(54,28,14,.60)!important}
.mini-stats b{color:var(--wine)!important}
.activity span{color:var(--wine)!important}
.command:after{background:var(--rust)!important}
/* Metrics become light editorial tiles */
.metrics{border-color:rgba(54,28,14,.10)!important;background:#fff}
.metric{border-color:rgba(54,28,14,.08)!important}
.metric:hover{background:rgba(87,2,17,.025)!important}
.metric b{color:var(--wine)!important}
.metric span{color:rgba(54,28,14,.62)!important}
/* Ticker */
.ticker{background:var(--ink)!important;border-color:var(--ink)!important}
.ticker-track span{color:#fff!important}
.ticker-track i{background:var(--rust)!important;box-shadow:0 0 10px rgba(126,49,16,.45)!important}
/* Section framing */
.section{position:relative}
.section:before{
content:"";
position:absolute;
top:36px;
left:0;
right:0;
height:1px;
background:linear-gradient(90deg,transparent,rgba(54,28,14,.12),transparent);
}
.section-heading h2{
color:var(--ink)!important;
}
.section-heading p{color:rgba(54,28,14,.64)!important}
/* Industries: new horizontal editorial card treatment */
.industries-grid{
grid-template-columns:repeat(3,1fr);
gap:16px;
}
.industries-grid .glass-card{
min-height:205px;
background:#fff!important;
border:1px solid rgba(54,28,14,.13)!important;
box-shadow:0 12px 40px rgba(54,28,14,.055);
}
.industries-grid .glass-card:nth-child(3n+2){
transform:translateY(28px);
}
.industries-grid .glass-card:nth-child(3n+2):hover{
transform:translateY(20px)!important;
}
.industries-grid .glass-card:before{
background:linear-gradient(135deg,rgba(87,2,17,.08),transparent 55%)!important;
}
.number{color:var(--wine)!important}
.card-icon{
color:var(--wine)!important;
background:rgba(87,2,17,.035)!important;
border-color:rgba(87,2,17,.15)!important;
}
.glass-card h3,.glass-card p{color:var(--ink)!important}
.glass-card p{opacity:.66}
.glass-card a{color:var(--wine)!important}
.glass-card a svg{color:var(--rust)!important}
/* Services: asymmetrical editorial grid */
.services-grid{
grid-template-columns:repeat(12,1fr)!important;
gap:16px!important;
}
.services-grid .glass-card{grid-column:span 3;background:#fff!important}
.services-grid .glass-card:nth-child(1),
.services-grid .glass-card:nth-child(5){grid-column:span 4}
.services-grid .glass-card:nth-child(2),
.services-grid .glass-card:nth-child(6){grid-column:span 4}
.services-grid .glass-card:nth-child(3),
.services-grid .glass-card:nth-child(7){grid-column:span 4}
.services-grid .glass-card:nth-child(4),
.services-grid .glass-card:nth-child(8){grid-column:span 4}
.services-grid .glass-card{
border-color:rgba(54,28,14,.13)!important;
box-shadow:0 12px 40px rgba(54,28,14,.045);
}
.services-grid .glass-card:nth-child(4n+1){border-top:3px solid var(--wine)!important}
.services-grid .glass-card:nth-child(4n+2){border-top:3px solid var(--rust)!important}
.services-grid .glass-card:nth-child(4n+3){border-top:3px solid var(--navy)!important}
.services-grid .glass-card:nth-child(4n){border-top:3px solid var(--plum)!important}
/* Process becomes numbered horizontal story */
.process-grid{gap:0!important}
.process-card{
border-radius:0!important;
border:0!important;
border-top:1px solid rgba(54,28,14,.15)!important;
background:#fff!important;
padding:32px 26px!important;
}
.process-card:first-child{border-left:1px solid rgba(54,28,14,.15)!important;border-radius:18px 0 0 0!important}
.process-card:last-child{border-right:1px solid rgba(54,28,14,.15)!important;border-radius:0 18px 0 0!important}
.process-card>b{color:var(--wine)!important}
.process-card h3{color:var(--ink)!important}
.process-card p{color:rgba(54,28,14,.64)!important}
/* About/contact surfaces */
.about-card,.about-intro,.about-values,.about-markets,.contact-card{
background:#fff!important;
border-color:rgba(54,28,14,.14)!important;
box-shadow:0 22px 70px rgba(54,28,14,.06);
}
.about-card h2,.contact-copy h2,.about-intro h2,.about-values h2,.about-markets h2{color:var(--ink)!important}
.about-card p,.contact-copy p,.about-intro>p,.about-values p,.about-markets>p{color:rgba(54,28,14,.66)!important}
.checks span,.value-list span{color:rgba(54,28,14,.66)!important}
.checks svg,.direct-contact svg{color:var(--wine)!important}
.direct-contact a{color:var(--ink)!important}
.direct-contact small{color:rgba(54,28,14,.55)!important}
.orbit-core{
border-color:rgba(3,44,77,.20)!important;
background:radial-gradient(circle,rgba(3,44,77,.07),transparent 68%)!important;
}
.orbit-core svg{color:var(--navy)!important}
.orbit-core b{color:var(--ink)!important}
.orbit-core small{color:rgba(54,28,14,.58)!important}
.float-card{background:#fff!important;color:var(--ink)!important;border-color:rgba(54,28,14,.12)!important}
.float-card svg{color:var(--wine)!important}
/* Contact form */
.contact-form input,.contact-form select,.contact-form textarea{
background:#fff!important;
color:var(--ink)!important;
border-color:rgba(54,28,14,.14)!important;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(54,28,14,.46)!important}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
border-color:var(--wine)!important;
box-shadow:0 0 0 3px rgba(87,2,17,.07)!important;
}
.success{background:rgba(87,2,17,.055)!important;border-color:rgba(87,2,17,.18)!important;color:var(--wine)!important}
/* Detail / inner pages */
.detail-icon{
color:var(--wine)!important;
background:#fff!important;
border-color:rgba(54,28,14,.14)!important;
box-shadow:0 18px 45px rgba(54,28,14,.08)!important;
}
.detail-panel,.detail-feature,.story-card{
background:#fff!important;
border-color:rgba(54,28,14,.13)!important;
box-shadow:0 15px 50px rgba(54,28,14,.05);
}
.detail-panel>small,.detail-feature>span{color:var(--wine)!important}
.detail-panel>b,.detail-feature h3,.story-card h2{color:var(--ink)!important}
.detail-bars span,.detail-feature>svg,.story-card>svg{color:var(--wine)!important}
.detail-bars label,.detail-feature p,.story-card p,.story-card li{color:rgba(54,28,14,.64)!important}
.detail-bars i{background:linear-gradient(90deg,var(--wine),var(--rust))!important}
.story-kicker{color:var(--wine)!important}
.story-card li:before{background:var(--rust)!important;box-shadow:none}
/* Footer: strong dark bookend */
footer{
background:var(--ink)!important;
color:#fff!important;
border-top:0!important;
padding-top:75px;
margin-top:20px;
}
.footer-main h4,.footer-main>div>a:not(.logo):not(.footer-cta),.footer-brand>p,.footer-bottom{color:rgba(255,255,255,.72)!important}
.footer-brand .logo{color:#fff!important}
.footer-brand .logo b{color:var(--rust)!important}
.footer-main>div>a:not(.logo):not(.footer-cta):hover{color:#fff!important}
.socials a{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.12)!important;color:#fff!important}
.socials a:hover{background:var(--rust)!important;border-color:var(--rust)!important}
.footer-contact svg{color:var(--rust)!important}
.footer-bottom{border-color:rgba(255,255,255,.12)!important}
/* Premium motion: reveal, stagger, masks, depth, count-up hooks */
.reveal{
opacity:0;
transform:translate3d(0,42px,0) scale(.985);
filter:blur(4px);
transition:
opacity .85s var(--motion) var(--reveal-delay,0ms),
transform .95s var(--motion) var(--reveal-delay,0ms),
filter .85s var(--motion) var(--reveal-delay,0ms);
}
.reveal.in-view,.reveal.route-ready{
opacity:1;
transform:none;
filter:none;
}
.reveal[data-motion="left"]{transform:translate3d(-55px,0,0);opacity:0}
.reveal[data-motion="right"]{transform:translate3d(55px,0,0);opacity:0}
.reveal[data-motion="scale"]{transform:scale(.92);opacity:0}
.reveal.in-view[data-motion="left"],
.reveal.in-view[data-motion="right"],
.reveal.in-view[data-motion="scale"]{transform:none;opacity:1}
/* Hero sequence */
.hero-copy>*{opacity:0;transform:translateY(26px);animation:heroEnter .85s var(--motion) forwards}
.hero-copy .eyebrow{animation-delay:.05s}
.hero-copy h1{animation-delay:.16s}
.hero-copy>p{animation-delay:.28s}
.hero-copy .hero-actions{animation-delay:.40s}
.hero-copy .trust{animation-delay:.52s}
.hero-visual{opacity:0;transform:translate3d(45px,20px,0) scale(.96);animation:heroVisual .95s var(--motion) .25s forwards}
@keyframes heroEnter{to{opacity:1;transform:none}}
@keyframes heroVisual{to{opacity:1;transform:none}}
/* Scroll-story stage */
.story-scroll{position:relative}
.story-scroll .story-stage{position:sticky;top:95px}
.story-card,.glass-card,.process-card,.detail-feature{
transform-style:preserve-3d;
will-change:transform;
}
.glass-card:hover,.detail-feature:hover,.story-card:hover{
transform:translateY(-8px) rotateX(1.5deg) rotateY(-1deg)!important;
box-shadow:0 26px 70px rgba(54,28,14,.13);
}
.card-icon,.detail-icon{
transition:transform .5s var(--motion),background .35s,border-color .35s;
}
.glass-card:hover .card-icon,.detail-feature:hover>svg{transform:translateY(-3px) rotate(-5deg) scale(1.07)}
.nav-cta,.primary,.secondary,.footer-cta{
position:relative;
overflow:hidden;
transform:translate3d(var(--mag-x,0),var(--mag-y,0),0);
}
.nav-cta:after,.primary:after,.footer-cta:after{
content:"";
position:absolute;
top:-20%;
bottom:-20%;
left:-35%;
width:24%;
transform:skewX(-18deg);
background:rgba(255,255,255,.28);
transition:left .65s var(--motion);
}
.nav-cta:hover:after,.primary:hover:after,.footer-cta:hover:after{left:120%}
/* Light animated mesh */
.hero-motion-layer{opacity:.8!important}
.flow-ribbon{border-color:rgba(54,28,14,.14)!important}
.flow-ribbon:after{background:linear-gradient(90deg,transparent,rgba(126,49,16,.18),transparent)!important}
.flow-orb{border-color:rgba(3,44,77,.13)!important;background:radial-gradient(circle,rgba(3,44,77,.08),transparent 68%)!important}
.cinematic-section:before{background:radial-gradient(ellipse,rgba(126,49,16,.06),transparent 68%)!important}
/* Count-up / active navigation polish */
.metric b{font-variant-numeric:tabular-nums}
html:before{
background:linear-gradient(90deg,var(--wine),var(--rust),var(--navy))!important;
box-shadow:0 0 15px rgba(87,2,17,.35)!important;
}
/* Tablet */
@media(max-width:1050px){
.hero{grid-template-columns:1fr .85fr;gap:35px}
.services-grid{grid-template-columns:repeat(6,1fr)!important}
.services-grid .glass-card,
.services-grid .glass-card:nth-child(n){grid-column:span 3}
.industries-grid .glass-card:nth-child(3n+2){transform:none}
}
/* Mobile: remove heavy pin/parallax, restore clean reading flow */
@media(max-width:760px){
body:before{opacity:.9}
.nav{background:rgba(255,255,255,.94)!important}
.mobile-menu{background:#fff!important;border-color:rgba(54,28,14,.14)!important}
.mobile-menu>a,.mobile-section>button{color:var(--ink)!important;border-color:rgba(54,28,14,.08)!important}
.mobile-sub a{color:rgba(54,28,14,.72)!important}
.hero{grid-template-columns:1fr!important;min-height:auto;padding-top:110px;gap:34px}
.hero-copy h1{font-size:clamp(49px,14vw,68px)}
.hero-visual{justify-content:center}
.command{width:100%;min-height:455px}
.industries-grid,.services-grid{grid-template-columns:1fr!important}
.services-grid .glass-card,.services-grid .glass-card:nth-child(n){grid-column:auto}
.industries-grid .glass-card:nth-child(3n+2){transform:none}
.glass-card:hover,.detail-feature:hover,.story-card:hover{transform:translateY(-4px)!important}
.process-grid{display:grid;grid-template-columns:1fr!important}
.process-card:first-child,.process-card:last-child{border-radius:0!important;border-left:0!important;border-right:0!important}
.story-scroll .story-stage{position:relative;top:auto}
.reveal,.reveal[data-motion="left"],.reveal[data-motion="right"]{transform:translateY(20px);filter:none}
.hero-visual{animation-delay:.12s}
.footer-main{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
.hero-copy>*,.hero-visual{animation:none!important;opacity:1!important;transform:none!important}
.reveal{opacity:1!important;transform:none!important;filter:none!important}
.flow-ribbon,.flow-orb,.hero-motion-layer{animation:none!important}
}
/* =========================================================
FINAL PREMIUM LIGHT EDITORIAL SYSTEM
Existing content/components preserved; visual presentation
and motion are refined for a cleaner, more distinctive home.
========================================================= */
:root{
--ink:#361C0E;
--wine:#570211;
--rust:#7E3110;
--navy:#032C4D;
--plum:#360825;
--white:#FFFFFF;
--black:#000000;
--paper:#FFFFFF;
--paper-2:#FFFFFF;
}
html,body,#root{background:var(--paper);color:var(--ink)}
body:before{background:
radial-gradient(circle at 9% 12%,rgba(87,2,17,.08),transparent 22%),
radial-gradient(circle at 88% 18%,rgba(3,44,77,.09),transparent 24%),
linear-gradient(180deg,#fff 0%,#fff 42%,#FFFFFF 100%)}
/* visible animated background: thin orbital ribbons, not a dark wash */
.ambient-scene{z-index:-5;background:transparent!important;opacity:1}
.ambient-grid{opacity:.16!important;background-image:
linear-gradient(rgba(3,44,77,.11) 1px,transparent 1px),
linear-gradient(90deg,rgba(87,2,17,.09) 1px,transparent 1px)!important;
background-size:72px 72px!important;filter:none;animation:gridDrift 24s linear infinite!important}
.ambient-wave{border-color:rgba(87,2,17,.24)!important;filter:drop-shadow(0 0 18px rgba(87,2,17,.10))!important;opacity:.75!important}
.ambient-wave:before{border-color:rgba(3,44,77,.24)!important}
.ambient-wave:after{border-color:rgba(126,49,16,.18)!important}
.ambient-glow{opacity:.18!important;filter:blur(42px)!important}
.ambient-stars{opacity:.42!important}
.header{background:transparent}
.nav-shell{width:min(1240px,calc(100% - 36px));margin:18px auto}
.nav{height:72px;background:rgba(255,255,255,.86);border:1px solid rgba(54,28,14,.14);box-shadow:0 18px 55px rgba(54,28,14,.09);backdrop-filter:blur(18px)}
.header.is-scrolled .nav{height:64px;background:rgba(255,255,255,.94);border-color:rgba(87,2,17,.24);box-shadow:0 18px 60px rgba(54,28,14,.12)}
.logo{color:var(--ink)}
.logo b{color:var(--wine)}
.logo-mark{background:linear-gradient(135deg,var(--wine),var(--rust));color:var(--white);box-shadow:0 8px 26px rgba(87,2,17,.22)}
.desktop-nav>a:not(.nav-cta),.drop-trigger{color:var(--ink)}
.desktop-nav>a:not(.nav-cta):hover,.drop-trigger:hover,.drop-trigger.active{color:var(--wine)}
.nav-cta,.primary{background:linear-gradient(135deg,var(--wine),var(--rust));color:var(--white);box-shadow:0 14px 34px rgba(87,2,17,.18)}
.secondary{color:var(--ink);border-color:rgba(54,28,14,.18);background:rgba(255,255,255,.7)}
.secondary:hover{color:var(--wine);border-color:rgba(87,2,17,.34);background:#fff}
.mega{background:rgba(255,255,255,.97);border-color:rgba(54,28,14,.13);box-shadow:0 30px 80px rgba(54,28,14,.16)}
.mega-top span,.mega-item>svg,.mi-icon{color:var(--wine)}
.mega-top small,.mega-item small,.mega-item b{color:var(--ink)}
.mega-item:hover{background:rgba(87,2,17,.05);border-color:rgba(87,2,17,.14)}
.mi-icon{background:rgba(87,2,17,.06)}
.mobile-menu{background:rgba(255,255,255,.98)!important;border-color:rgba(54,28,14,.14)!important;box-shadow:0 25px 70px rgba(54,28,14,.16)!important;color:var(--ink)}
.mobile-menu a,.mobile-menu button{color:var(--ink)!important}
.mobile-menu .nav-cta{color:var(--white)!important}
.hamb{color:var(--ink)}
.ticker{background:var(--ink);border-color:var(--ink);padding:15px 0}
.ticker-track span{color:var(--white)}
.ticker-track i{background:var(--rust);box-shadow:0 0 12px rgba(126,49,16,.8)}
.hero{min-height:760px;padding-top:145px;padding-bottom:80px;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);gap:76px;position:relative}
.hero:before{content:"";position:absolute;left:-6vw;right:-6vw;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--wine),var(--navy),transparent);opacity:.25}
.hero-motion-layer{inset:-12% -8%;opacity:1}
.flow-ribbon{border-color:rgba(87,2,17,.22);box-shadow:0 0 60px rgba(87,2,17,.06)}
.flow-ribbon.r1{right:-12%;top:18%;width:82%;height:36%}
.flow-ribbon.r2{left:-14%;top:54%;width:76%;height:28%;border-color:rgba(3,44,77,.2)}
.flow-orb{border-color:rgba(3,44,77,.22);background:radial-gradient(circle,rgba(3,44,77,.11),transparent 68%);box-shadow:0 0 110px rgba(3,44,77,.07),inset 0 0 40px rgba(3,44,77,.04)}
.flow-orb.o1{right:5%;top:4%}.flow-orb.o2{left:8%;bottom:5%}
.hero-copy{max-width:720px}
.hero-copy h1{font-size:clamp(62px,7vw,104px);color:var(--ink);text-wrap:balance}
.hero-copy h1 span{color:var(--wine)}
.hero-copy>p{color:rgba(54,28,14,.72);font-size:17px;max-width:690px}
.trust{color:rgba(54,28,14,.7)}.trust svg{color:var(--wine)}
.eyebrow{color:var(--wine)}.eyebrow i{background:var(--rust);box-shadow:0 0 0 7px rgba(126,49,16,.08)}
.hero-visual{justify-content:flex-end}
.command{min-height:530px;border-radius:34px;border-color:rgba(3,44,77,.2);background:linear-gradient(145deg,var(--navy),var(--plum));box-shadow:0 40px 100px rgba(3,44,77,.18),0 0 80px rgba(87,2,17,.08);transform:perspective(1200px) rotateY(-8deg) rotateX(2deg)}
.command:after{background:var(--rust);opacity:.5}
.command-head small,.command-head span,.activity span,.activity em{color:var(--rust)}
.ai-core{color:var(--white);border-color:rgba(255,255,255,.28);background:rgba(87,2,17,.22);box-shadow:0 0 70px rgba(126,49,16,.28)}
.orbit-line{border-color:rgba(255,255,255,.22)}.orb-dot{background:var(--rust);box-shadow:0 0 14px var(--rust)}
.mini-stats div,.activity{border-color:rgba(255,255,255,.13)}
.mini-stats small,.activity div{color:rgba(255,255,255,.76)}
.mini-stats b{color:var(--white)}
.metrics{background:var(--ink);border-color:rgba(255,255,255,.13)}
.metric{border-color:rgba(255,255,255,.13)}.metric:hover{background:rgba(255,255,255,.035)}
.metric b{color:var(--white)}.metric span{color:rgba(255,255,255,.68)}
.section{padding-top:125px}
.section-heading h2{color:var(--ink);font-size:clamp(48px,5.4vw,76px)}
.section-heading p{color:rgba(54,28,14,.62);font-size:16px}
/* distinctive bento visual layout: no overlap, all artwork visible */
.visual-showcase{padding-top:130px;padding-bottom:55px}
.visual-showcase-head{grid-template-columns:1.1fr .72fr;gap:80px;margin-bottom:48px}
.visual-showcase-head h2{font-size:clamp(48px,5.7vw,78px);color:var(--ink)}
.visual-showcase-head>p{color:rgba(54,28,14,.62);font-size:16px}
.visual-grid{grid-template-columns:1.22fr .89fr .89fr;gap:18px;align-items:stretch}
.visual-card,.visual-card.visual-wide{aspect-ratio:auto;min-height:350px;border-radius:28px;border:1px solid rgba(54,28,14,.13);background:#fff;box-shadow:0 24px 70px rgba(54,28,14,.11);overflow:hidden}
.visual-card.visual-wide{min-height:500px}
.visual-card img{background:linear-gradient(145deg,var(--navy),var(--plum));object-fit:cover;object-position:center;opacity:.94;transform:scale(1.01);mix-blend-mode:multiply}
.visual-card:after{background:linear-gradient(180deg,transparent 28%,rgba(0,0,0,.02) 48%,rgba(54,28,14,.9) 100%)}
.visual-card figcaption b{color:var(--white);font-size:24px}.visual-card figcaption span{color:rgba(255,255,255,.78)}
.visual-card:hover{transform:translateY(-8px)}
.visual-card:hover img{transform:scale(1.055)}
/* Industries: clean editorial grid with offset rhythm */
.industries-grid{grid-template-columns:repeat(3,1fr);gap:18px}
.industries-grid .glass-card:nth-child(2),.industries-grid .glass-card:nth-child(5),.industries-grid .glass-card:nth-child(8){transform:translateY(28px)}
.industries-grid .glass-card:nth-child(2):hover,.industries-grid .glass-card:nth-child(5):hover,.industries-grid .glass-card:nth-child(8):hover{transform:translateY(20px)}
.glass-card,.process-card,.detail-feature,.detail-panel,.about-card,.contact-card{background:rgba(255,255,255,.82);border-color:rgba(54,28,14,.12);box-shadow:0 18px 55px rgba(54,28,14,.07);color:var(--ink)}
.glass-card:before,.process-card:before,.story-card:before,.detail-feature:before,.detail-panel:before,.about-card:before,.contact-card:before{background:radial-gradient(320px circle at var(--mx) var(--my),rgba(87,2,17,.09),transparent 62%)}
.glass-card:hover,.process-card:hover,.story-card:hover,.detail-feature:hover,.detail-panel:hover{border-color:rgba(87,2,17,.26);box-shadow:0 30px 80px rgba(54,28,14,.13)}
.number{color:rgba(87,2,17,.65)}
.card-icon{color:var(--wine);background:rgba(87,2,17,.05);border-color:rgba(87,2,17,.13)}
.glass-card h3,.process-card h3{color:var(--ink)}
.glass-card p,.process-card p{color:rgba(54,28,14,.62)}
.glass-card a{color:var(--wine)}
/* Scroll story becomes a clear split editorial stage rather than a dark pile */
.scroll-story{height:calc(100vh * 3.5);min-height:2500px;background:linear-gradient(180deg,#FFFFFF 0%,#fff 50%,#FFFFFF 100%);border-top:1px solid rgba(54,28,14,.1);border-bottom:1px solid rgba(54,28,14,.1)}
.scroll-story:before{background:linear-gradient(90deg,transparent 49.9%,rgba(87,2,17,.08) 50%,transparent 50.1%),radial-gradient(circle at 75% 50%,rgba(3,44,77,.08),transparent 42%)}
.scroll-story-inner{grid-template-columns:minmax(390px,.82fr) minmax(620px,1.18fr);gap:80px;padding:7vh 52px}
.scroll-story-copy h2{color:var(--ink);font-size:clamp(58px,5.7vw,86px)}
.scroll-story-copy p{color:rgba(54,28,14,.62)}
.scroll-story-progress{color:var(--wine)}.scroll-story-progress span{background:rgba(54,28,14,.14);box-shadow:none}.scroll-story-progress span:after{background:linear-gradient(90deg,var(--wine),var(--rust));box-shadow:0 0 14px rgba(87,2,17,.25)}.scroll-story-progress em{color:rgba(54,28,14,.5)}
.scroll-story-stage-wrap{height:610px}
.scroll-story-card{background:linear-gradient(145deg,var(--navy),var(--plum));border-color:rgba(255,255,255,.14);box-shadow:0 35px 90px rgba(3,44,77,.18);color:var(--white)}
.scroll-story-card:before{background:radial-gradient(320px circle at 75% 20%,rgba(126,49,16,.26),transparent 62%)}
.scroll-story-card h3{color:var(--white);font-size:34px}.scroll-story-card p{color:rgba(255,255,255,.72)}.scroll-story-card a{color:var(--white)}
.story-number{color:var(--rust)}.story-icon{color:var(--white);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.07)}
.scroll-story-visual{border-color:rgba(3,44,77,.12);background:radial-gradient(circle,rgba(3,44,77,.11),transparent 58%);box-shadow:inset 0 0 80px rgba(3,44,77,.04)}
.stage-ring{border-color:rgba(3,44,77,.24)}.stage-ring.r2{border-color:rgba(87,2,17,.16)}.stage-core{background:var(--white);border-color:rgba(87,2,17,.25);color:var(--wine);box-shadow:0 15px 50px rgba(54,28,14,.1)}.stage-dot{background:var(--rust);box-shadow:0 0 14px rgba(126,49,16,.35)}
/* Services */
.services-grid{grid-template-columns:repeat(4,1fr);gap:18px}
.services-grid .glass-card{min-height:300px}
.services-grid .glass-card:nth-child(4n+2){transform:translateY(18px)}
.services-grid .glass-card:nth-child(4n+2):hover{transform:translateY(10px)}
/* About / process / contact retain content but get stronger light presentation */
.about-card{background:linear-gradient(135deg,#fff 0%,#FFFFFF 60%,rgba(3,44,77,.06) 100%);border-color:rgba(54,28,14,.13)}
.about-card h2,.contact-card h2{color:var(--ink)}
.about-card p,.contact-card p{color:rgba(54,28,14,.62)}
.checks span{color:rgba(54,28,14,.72)}.checks svg{color:var(--wine)}
.orbit-core{background:#fff;border-color:rgba(3,44,77,.18);color:var(--ink);box-shadow:0 30px 80px rgba(3,44,77,.10)}
.float-card{background:#fff;border-color:rgba(54,28,14,.12);color:var(--ink);box-shadow:0 15px 50px rgba(54,28,14,.09)}
.process-grid{grid-template-columns:repeat(4,1fr);gap:18px}.process-card{min-height:220px}.process-card>b{color:var(--wine)}
.contact-card{background:linear-gradient(135deg,#fff,#FFFFFF);border-color:rgba(54,28,14,.13)}
.contact-card input,.contact-card textarea,.contact-card select{background:#fff!important;border-color:rgba(54,28,14,.15)!important;color:var(--ink)!important}.contact-card input::placeholder,.contact-card textarea::placeholder{color:rgba(54,28,14,.45)!important}
.contact-card .primary{color:var(--white)}
/* Footer remains strong contrast */
.footer{background:var(--ink);color:var(--white);border-top:1px solid rgba(255,255,255,.12)}
.footer p,.footer a,.footer small{color:rgba(255,255,255,.68)}.footer a:hover{color:var(--white)}
.footer .logo{color:var(--white)}.footer .logo b{color:var(--rust)}
/* More distinctive motion: wipe, orbit and depth without changing content */
.reveal{opacity:0;transform:translate3d(0,38px,0) scale(.985);filter:blur(7px);transition:opacity .85s var(--motion-ease),transform .95s var(--motion-ease),filter .95s var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.reveal.in-view{opacity:1;transform:none;filter:none}
.cinematic-heading.in-view h2{animation:editorialTitle .95s var(--motion-ease) .05s both}
@keyframes editorialTitle{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(24px)}to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
@keyframes bgRibbon{0%,100%{transform:rotate(-18deg) translate3d(-1%,0,0)}50%{transform:rotate(-12deg) translate3d(3%,2%,0)}}
@keyframes bgRibbon2{0%,100%{transform:rotate(16deg) translate3d(0,0,0)}50%{transform:rotate(21deg) translate3d(-3%,-2%,0)}}
.flow-ribbon.r1{animation:bgRibbon 13s ease-in-out infinite!important}.flow-ribbon.r2{animation:bgRibbon2 17s ease-in-out infinite!important}
.ambient-wave{animation:ringPulse 9s ease-in-out infinite!important}
.primary,.secondary,.nav-cta,.footer-cta{transform:translate3d(var(--mag-x,0),var(--mag-y,0),0);transition:transform .35s var(--motion-ease),box-shadow .35s,border-color .35s}
@media(max-width:1100px){
.hero{grid-template-columns:1fr .86fr;gap:38px}.hero-copy h1{font-size:clamp(58px,7vw,82px)}
.visual-grid{grid-template-columns:1fr 1fr}.visual-card.visual-wide{grid-column:1/-1;min-height:430px}.visual-card{min-height:320px}
.scroll-story-inner{grid-template-columns:.8fr 1.2fr;gap:45px;padding-inline:32px}.scroll-story-stage-stack{width:58%}.scroll-story-visual{width:65%}
.services-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:800px){
.nav-shell{margin:10px auto}.nav{height:62px}.desktop-nav{display:none}.hamb{display:block}
.hero{display:block;min-height:auto;padding-top:120px;padding-bottom:70px}.hero-copy h1{font-size:clamp(48px,12vw,68px)}.hero-copy>p{font-size:15px}.hero-visual{margin-top:45px}.command{width:100%;min-height:460px;transform:none}
.metrics-grid{grid-template-columns:repeat(2,1fr)}.metric{padding:18px}.metric b{font-size:23px}
.section{padding-top:90px}.section-heading{margin-bottom:34px}.section-heading h2{font-size:clamp(40px,10vw,58px)}
.industries-grid{grid-template-columns:1fr 1fr}.industries-grid .glass-card:nth-child(2),.industries-grid .glass-card:nth-child(5),.industries-grid .glass-card:nth-child(8){transform:none}
.visual-showcase-head{grid-template-columns:1fr;gap:18px}.visual-showcase-head h2{font-size:clamp(42px,10vw,62px)}
.scroll-story{height:calc(100svh * 2.25);min-height:0}.scroll-story-inner{display:block;padding:70px 22px}.scroll-story-copy{max-width:none}.scroll-story-copy h2{font-size:clamp(48px,11vw,68px)}.scroll-story-stage-wrap{height:560px;margin-top:35px}.scroll-story-stage-stack{width:88%;height:350px}.scroll-story-visual{right:-24%;width:88%;height:500px;opacity:.6}
.services-grid{grid-template-columns:1fr 1fr}.services-grid .glass-card:nth-child(4n+2){transform:none}
.process-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
.wrap{width:min(100% - 28px,520px)}.nav-shell{width:calc(100% - 20px)}
.hero{padding-top:105px}.hero-copy h1{font-size:50px;line-height:.94}.hero-copy>p{font-size:14px;line-height:1.7}.hero-actions{flex-direction:column}.hero-actions a{width:100%}.trust{font-size:11px;gap:10px}.command{min-height:430px;padding:18px;border-radius:24px}.ai-orbit{height:190px}.orbit-line.a{width:150px}.orbit-line.b{width:220px}
.metrics-grid{grid-template-columns:1fr 1fr}.metric{padding:15px}.metric b{font-size:20px}.metric span{font-size:10px}
.visual-grid{grid-template-columns:1fr}.visual-card,.visual-card.visual-wide{grid-column:auto;min-height:290px;aspect-ratio:1.28/1}.visual-card.visual-wide{min-height:330px}.visual-card figcaption b{font-size:20px}
.industries-grid,.services-grid,.process-grid{grid-template-columns:1fr}.glass-card{padding:21px}.glass-card p{min-height:0}
.scroll-story{height:calc(100svh * 2.25);min-height:0}.scroll-story-inner{padding:60px 18px}.scroll-story-copy h2{font-size:46px}.scroll-story-copy p{font-size:14px}.scroll-story-stage-wrap{height:390px}.scroll-story-stage-stack{width:94%;height:315px}.scroll-story-card{padding:22px;border-radius:23px}.scroll-story-card h3{font-size:27px}.scroll-story-card p{font-size:13px}.scroll-story-visual{right:-48%;width:125%;height:450px;opacity:.38}
.section-heading h2{font-size:42px}.section-heading p{font-size:14px}.section{padding-top:80px}
.mega{width:min(94vw,720px)}
}
@media(prefers-reduced-motion:reduce){.ambient-grid,.ambient-wave,.flow-ribbon,.flow-orb,.command,.ai-core{animation:none!important}.reveal{opacity:1!important;transform:none!important;filter:none!important}.primary,.secondary,.nav-cta,.footer-cta{transform:none!important}}
/* FAQ accordion */
.faq-section{position:relative}
.faq-layout{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);gap:clamp(44px,7vw,110px);align-items:start}
.faq-layout .section-heading{position:sticky;top:120px}
.faq-list{border-top:1px solid rgba(54,28,14,.22)}
.faq-item{border-bottom:1px solid rgba(54,28,14,.22);background:rgba(255,255,255,.48);backdrop-filter:blur(10px);transition:background .35s ease,transform .35s ease}
.faq-item:hover{background:rgba(255,255,255,.72);transform:translateX(4px)}
.faq-item.is-open{background:rgba(255,255,255,.82)}
.faq-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left;padding:24px 4px;background:transparent;border:0;color:#361C0E;font:inherit;cursor:pointer}
.faq-trigger>span:first-child{display:flex;align-items:flex-start;gap:18px;font-size:clamp(17px,1.45vw,21px);font-weight:700;line-height:1.35}
.faq-trigger small{font-size:11px;letter-spacing:.16em;color:#7E3110;padding-top:4px;min-width:30px}
.faq-plus{width:38px;height:38px;border:1px solid rgba(54,28,14,.22);border-radius:50%;display:grid;place-items:center;position:relative;flex:0 0 auto;transition:transform .35s ease,background .35s ease,border-color .35s ease}
.faq-plus span{position:absolute;width:13px;height:1.5px;background:#570211;transition:transform .35s ease}
.faq-plus span+span{transform:rotate(90deg)}
.faq-item.is-open .faq-plus{transform:rotate(45deg);background:#361C0E;border-color:#361C0E}
.faq-item.is-open .faq-plus span{background:#fff}
.faq-answer{overflow:hidden;transition:max-height .5s cubic-bezier(.22,.61,.36,1)}
.faq-answer p{margin:0;padding:0 68px 26px 52px;color:rgba(54,28,14,.72);font-size:16px;line-height:1.75}
@media (max-width:900px){
.faq-layout{grid-template-columns:1fr;gap:28px}
.faq-layout .section-heading{position:static}
}
@media (max-width:600px){
.faq-trigger{padding:20px 0;gap:12px}
.faq-trigger>span:first-child{font-size:15px;gap:12px}
.faq-trigger small{min-width:24px;font-size:9px}
.faq-plus{width:32px;height:32px}
.faq-answer p{padding:0 44px 22px 36px;font-size:14px}
}
/* ===== AI VISUAL ASSET + CINEMATIC MOTION PASS ===== */
.image-card{isolation:isolate;background:#000}
.image-card img{width:100%;height:100%;min-height:310px;object-fit:cover;display:block;filter:saturate(.92) contrast(1.04);transform:scale(1.04);transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .8s ease}
.image-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 30%,rgba(0,0,0,.78));z-index:1;pointer-events:none}
.image-card:hover img{transform:scale(1.10);filter:saturate(1.08) contrast(1.08)}
.image-shine{position:absolute;inset:-20%;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.16) 49%,transparent 60%);transform:translateX(-65%) rotate(4deg);transition:transform 1.2s ease}
.image-card:hover .image-shine{transform:translateX(65%) rotate(4deg)}
.image-card figcaption{z-index:3}
.hero-ai-image{position:absolute;inset:17px;width:calc(100% - 34px);height:calc(100% - 34px);object-fit:cover;border-radius:20px;opacity:.3;mix-blend-mode:screen;filter:saturate(.8) contrast(1.1);animation:heroImageFloat 8s ease-in-out infinite}
.hero-image-glass{position:absolute;inset:17px;border-radius:20px;background:linear-gradient(135deg,rgba(3,44,77,.25),rgba(54,28,14,.12) 55%,rgba(0,0,0,.68));z-index:1;pointer-events:none}
.ai-core img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(126,49,16,.6));animation:coreSpin 14s linear infinite}
@keyframes heroImageFloat{0%,100%{transform:scale(1.02) translate3d(0,0,0)}50%{transform:scale(1.07) translate3d(0,-8px,0)}}
@keyframes coreSpin{to{transform:rotate(360deg)}}
.image-story{height:calc(100vh * 4.6);min-height:3000px;position:relative;overflow:clip;background:linear-gradient(180deg,#361C0E 0%,#570211 46%,#032C4D 100%)}
.image-story-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.image-story-inner{height:100%;display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(35px,6vw,100px);align-items:center;padding-top:70px;padding-bottom:70px;position:relative;z-index:2}
.image-story-copy{position:relative;z-index:5;max-width:510px}
.image-story-copy h2{font-family:"Space Grotesk";font-size:clamp(48px,5.5vw,78px);line-height:.94;letter-spacing:-.065em;margin:18px 0}
.image-story-copy>p{color:rgba(255,255,255,.78);font-size:16px;line-height:1.8;max-width:470px}
.image-story-steps{display:grid;gap:7px;margin-top:34px}
.image-story-steps button{appearance:none;border:0;background:transparent;color:rgba(255,255,255,.42);display:grid;grid-template-columns:34px 1fr;align-items:center;text-align:left;padding:10px 0;cursor:pointer;transition:color .35s,transform .35s}
.image-story-steps button span{font:700 11px "Space Grotesk";letter-spacing:.12em}
.image-story-steps button b{font-size:11px;letter-spacing:.13em;text-transform:uppercase}
.image-story-steps button:before{content:"";position:absolute;left:0;width:2px;height:28px;background:#7E3110;transform:scaleY(0);transform-origin:center;transition:transform .35s}
.image-story-steps button.active{color:#fff;transform:translateX(10px)}
.image-story-steps button.active:before{transform:scaleY(1)}
.image-story-stage{height:min(72vh,680px);position:relative;border:1px solid rgba(255,255,255,.12);border-radius:32px;overflow:hidden;background:#000;box-shadow:0 45px 130px rgba(0,0,0,.45)}
.image-story-panel{position:absolute;inset:0;opacity:0;transform:scale(1.08) translate3d(25px,0,0);transition:opacity .8s ease,transform 1.05s cubic-bezier(.16,1,.3,1);pointer-events:none}
.image-story-panel.active{opacity:1;transform:scale(1) translate3d(0,0,0);pointer-events:auto}
.image-story-panel img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(1.05)}
.image-story-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.12) 35%,rgba(0,0,0,.9))}
.image-story-caption{position:absolute;left:36px;right:36px;bottom:38px;z-index:2;max-width:570px;transform:translateY(22px);opacity:0;transition:opacity .7s .12s,transform .7s .12s}
.image-story-panel.active .image-story-caption{opacity:1;transform:translateY(0)}
.image-story-caption span{font-size:10px;letter-spacing:.2em;font-weight:900;color:#fff}
.image-story-caption h3{font-family:"Space Grotesk";font-size:clamp(30px,3.2vw,52px);line-height:.98;letter-spacing:-.045em;margin:12px 0}
.image-story-caption p{font-size:14px;line-height:1.7;color:rgba(255,255,255,.8);max-width:520px}
.image-story-chip{position:absolute;right:28px;top:28px;z-index:3;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.36);backdrop-filter:blur(12px);border-radius:999px;padding:10px 13px;color:#fff;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.image-story-chip svg{width:13px}
.image-story-orbit{position:absolute;right:-10vw;top:4%;width:70vw;height:90vh;pointer-events:none;opacity:.55}
.image-story-orbit span{position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%;inset:5%;animation:assetOrbit 18s linear infinite}
.image-story-orbit span:nth-child(2){inset:16%;animation-duration:25s;animation-direction:reverse}
.image-story-orbit span:nth-child(3){inset:30%;animation-duration:32s}
.image-story-orbit i{position:absolute;width:7px;height:7px;border-radius:50%;background:#7E3110;box-shadow:0 0 20px #7E3110}
.image-story-orbit i:nth-of-type(1){left:17%;top:23%;animation:floatA 5s ease-in-out infinite}
.image-story-orbit i:nth-of-type(2){right:18%;top:42%;animation:floatB 6s ease-in-out infinite}
.image-story-orbit i:nth-of-type(3){left:41%;bottom:14%;animation:floatC 7s ease-in-out infinite}
@keyframes assetOrbit{to{transform:rotate(360deg)}}
.ambient-orbit{position:absolute;border:1px solid rgba(255,255,255,.055);border-radius:50%;pointer-events:none;animation:ambientRotate 24s linear infinite}
.ambient-orbit.orbit-a{width:42vw;height:42vw;right:-13vw;top:10vh}
.ambient-orbit.orbit-b{width:28vw;height:28vw;left:-12vw;top:55vh;animation-duration:31s;animation-direction:reverse}
.ambient-orbit.orbit-c{width:18vw;height:18vw;right:18vw;bottom:5vh;animation-duration:19s}
@keyframes ambientRotate{to{transform:rotate(360deg)}}
@media(max-width:900px){
.image-story{height:auto;min-height:0;padding:100px 0;background:linear-gradient(180deg,#361C0E,#570211,#032C4D)}
.image-story-sticky{position:relative;height:auto;overflow:visible}
.image-story-inner{height:auto;display:block;padding:0 22px}
.image-story-copy{max-width:none;margin-bottom:35px}
.image-story-copy h2{font-size:44px}
.image-story-stage{height:540px}
.image-story-panel{position:absolute}
.image-story-orbit{opacity:.25;width:110vw;right:-45vw}
}
@media(max-width:600px){
.hero-ai-image{inset:12px;width:calc(100% - 24px);height:calc(100% - 24px)}
.image-story-inner{padding:0 18px}
.image-story-copy h2{font-size:39px}
.image-story-copy>p{font-size:14px}
.image-story-stage{height:470px;border-radius:24px}
.image-story-caption{left:22px;right:22px;bottom:24px}
.image-story-caption h3{font-size:28px}
.image-story-caption p{font-size:13px}
.image-story-chip{right:16px;top:16px}
.image-story-steps{grid-template-columns:repeat(5,1fr);gap:3px}
.image-story-steps button{display:block;padding:9px 4px;border-bottom:2px solid rgba(255,255,255,.1)}
.image-story-steps button:before{display:none}
.image-story-steps button.active{transform:none;border-bottom-color:#7E3110}
.image-story-steps button span,.image-story-steps button b{display:block}
.image-story-steps button b{font-size:8px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.image-card img{min-height:245px}
}
@media(prefers-reduced-motion:reduce){
.hero-ai-image,.ai-core img,.image-story-orbit span,.ambient-orbit{animation:none!important}
.image-story-panel,.image-story-caption,.image-card img,.image-shine{transition:none!important}
}
/* =========================================================
MarketAIFlow — FINAL CINEMATIC VISUAL SYSTEM
No white page surfaces. Jewel palette + black/white only.
========================================================= */
:root{--ink:#f7f1eb;--muted:rgba(247,241,235,.68);--wine:#570211;--rust:#7E3110;--brown:#361C0E;--navy:#032C4D;--plum:#360825;--black:#050609;--line:rgba(247,241,235,.12);--glass:rgba(3,44,77,.42)}
html,body,#root{background:#061018!important;color:var(--ink)}
body{background:radial-gradient(circle at 72% 7%,rgba(54,8,37,.48),transparent 28%),radial-gradient(circle at 12% 30%,rgba(87,2,17,.26),transparent 30%),linear-gradient(145deg,#061018 0%,#032C4D 38%,#360825 68%,#361C0E 100%)!important}
body:before{background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px);background-size:80px 80px;opacity:.45}
.header{background:rgba(3,12,20,.66)!important;border-color:rgba(255,255,255,.1)!important;backdrop-filter:blur(24px)}
.nav-shell,.mobile-menu,.mega{background:rgba(4,13,22,.92)!important;border-color:rgba(255,255,255,.11)!important}
.nav a,.drop-trigger{color:rgba(247,241,235,.78)!important}.nav a:hover,.nav a.active,.drop-trigger.active{color:#fff!important}
.home-premium{position:relative;overflow:clip;background:transparent}
.home-premium:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 82% 17%,rgba(126,49,16,.18),transparent 18%),radial-gradient(circle at 16% 72%,rgba(87,2,17,.16),transparent 23%);mix-blend-mode:screen}
.hero-v3{min-height:calc(100svh - 30px);display:grid;grid-template-columns:minmax(0,.88fr) minmax(480px,1.12fr);gap:clamp(35px,5vw,90px);align-items:center;padding-top:125px;padding-bottom:80px;position:relative}
.hero-v3-copy{position:relative;z-index:5;max-width:690px}.hero-v3-copy h1{font-size:clamp(58px,7.3vw,108px);line-height:.89;letter-spacing:-.075em;margin:20px 0 28px;font-weight:750}.hero-v3-copy h1 span{display:block;color:#fff;text-shadow:0 0 45px rgba(126,49,16,.18)}.hero-v3-copy>p{font-size:18px;line-height:1.75;color:var(--muted);max-width:620px}.hero-v3-proof{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px;color:rgba(247,241,235,.65);font-size:12px}.hero-v3-proof span{display:flex;gap:7px;align-items:center}.hero-v3-proof svg{width:14px;color:#fff}.hero-v3-bg{position:absolute;inset:-20%;pointer-events:none;overflow:hidden}.hero-v3-bg span{position:absolute;border:1px solid rgba(255,255,255,.09);border-radius:50%;animation:slowOrbit 24s linear infinite}.hero-v3-bg span:nth-child(1){width:55vw;height:55vw;right:-15vw;top:-8vw}.hero-v3-bg span:nth-child(2){width:36vw;height:36vw;right:4vw;top:8vw;animation-direction:reverse;animation-duration:18s}.hero-v3-bg span:nth-child(3){width:18vw;height:18vw;left:-5vw;bottom:4vw;animation-duration:14s}.hero-v3-bg i{position:absolute;width:6px;height:6px;border-radius:50%;background:#7E3110;box-shadow:0 0 24px #7E3110}.hero-v3-bg i:nth-of-type(1){right:19%;top:28%;animation:drift1 6s ease-in-out infinite}.hero-v3-bg i:nth-of-type(2){right:41%;bottom:18%;animation:drift2 8s ease-in-out infinite}.hero-v3-bg i:nth-of-type(3){left:9%;top:50%;animation:drift3 7s ease-in-out infinite}
.hero-v3-art{height:min(690px,72vw);min-height:560px;position:relative;z-index:4}.hero-art-frame{position:absolute;inset:50px 30px 35px 0;border:1px solid rgba(255,255,255,.16);border-radius:36px;overflow:hidden;background:#02070b;box-shadow:0 50px 140px rgba(0,0,0,.55),0 0 80px rgba(87,2,17,.16)}.hero-art-frame img{width:100%;height:100%;object-fit:cover;opacity:.68;filter:saturate(.9) contrast(1.08);transform:scale(1.04);animation:heroAsset 10s ease-in-out infinite}.hero-art-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(3,44,77,.35),transparent 42%,rgba(54,8,37,.44)),linear-gradient(0deg,rgba(0,0,0,.65),transparent 55%)}.hero-art-scan{position:absolute;z-index:3;left:0;right:0;height:2px;top:-5%;background:linear-gradient(90deg,transparent,#fff,transparent);opacity:.3;filter:blur(1px);animation:scanDown 6s ease-in-out infinite}.hero-art-grid{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:55px 55px;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);opacity:.4}.hero-art-glow{position:absolute;inset:20% 0 5% 0;background:radial-gradient(circle at 50% 50%,rgba(126,49,16,.26),transparent 52%);filter:blur(45px);animation:glowBreath 5s ease-in-out infinite}.hero-float-card{position:absolute;z-index:8;background:rgba(3,12,20,.88);border:1px solid rgba(255,255,255,.16);box-shadow:0 25px 65px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(18px);border-radius:18px;padding:18px 20px;color:#fff}.hero-float-card small{display:block;color:#d9c4b7;letter-spacing:.15em;font-size:9px;margin-bottom:8px}.hero-float-card b{font-size:14px;line-height:1.35;display:block}.hero-float-card span{display:flex;align-items:center;gap:7px;margin-top:10px;color:#fff;font-size:9px;letter-spacing:.15em}.hero-float-card span i{width:6px;height:6px;background:#7E3110;border-radius:50%;box-shadow:0 0 12px #7E3110}.hf-one{right:-20px;top:13%;width:220px;animation:floatCardA 6s ease-in-out infinite}.hf-two{left:-35px;bottom:10%;width:205px;animation:floatCardB 7s ease-in-out infinite}.hero-orbit-ring{position:absolute;border:1px solid rgba(255,255,255,.13);border-radius:50%;pointer-events:none}.hero-orbit-ring.r1{width:420px;height:420px;right:-100px;bottom:-10px;animation:slowOrbit 22s linear infinite}.hero-orbit-ring.r2{width:250px;height:250px;right:0;bottom:70px;animation:slowOrbit 14s linear infinite reverse}.hero-orbit-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#7E3110;box-shadow:0 0 20px #7E3110}.hero-orbit-dot.d1{right:20%;top:28%;animation:drift1 5s ease-in-out infinite}.hero-orbit-dot.d2{right:3%;bottom:22%;animation:drift2 6s ease-in-out infinite}
.ticker{background:rgba(0,0,0,.32)!important;border-top:1px solid rgba(255,255,255,.09)!important;border-bottom:1px solid rgba(255,255,255,.09)!important}.ticker-track span{color:rgba(255,255,255,.75)!important}.ticker-track i{background:#7E3110!important;box-shadow:0 0 12px #7E3110!important}
.metrics-v3{background:linear-gradient(90deg,rgba(54,28,14,.72),rgba(87,2,17,.48),rgba(3,44,77,.72));border-bottom:1px solid rgba(255,255,255,.1)}.metrics-v3 .metric{border-color:rgba(255,255,255,.11)!important}.metrics-v3 .metric b{color:#fff!important}.metrics-v3 .metric span{color:rgba(255,255,255,.55)!important}
.visual-v3{padding-top:130px;padding-bottom:130px;position:relative}.visual-v3-heading{display:grid;grid-template-columns:1fr .6fr;gap:60px;align-items:end;margin-bottom:55px}.visual-v3-heading h2{font-size:clamp(48px,6vw,86px);line-height:.94;letter-spacing:-.07em;margin:16px 0 0;max-width:780px}.visual-v3-heading p{color:var(--muted);line-height:1.8;font-size:16px}.visual-v3-mosaic{display:grid;grid-template-columns:1.4fr .8fr;grid-template-rows:330px 260px;gap:18px}.mosaic-main{grid-row:1/3}.mosaic-main,.mosaic-side{position:relative;overflow:hidden;border-radius:30px;border:1px solid rgba(255,255,255,.14);background:#03070b;box-shadow:0 30px 90px rgba(0,0,0,.38)}.mosaic-main img,.mosaic-side img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .7s}.mosaic-main:hover img,.mosaic-side:hover img{transform:scale(1.07);filter:saturate(1.1)}.mosaic-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.86))}.mosaic-main figcaption,.mosaic-side figcaption{position:absolute;left:28px;right:28px;bottom:26px}.mosaic-main small,.mosaic-side small{font-size:9px;letter-spacing:.2em;color:#fff}.mosaic-main h3{font-size:clamp(30px,3vw,48px);line-height:.98;letter-spacing:-.045em;margin:10px 0 0}.mosaic-side h3{font-size:22px;line-height:1.05;letter-spacing:-.03em;margin:8px 0 0}
.industries-v3{padding-top:130px;padding-bottom:130px}.industries-v3 .section-heading{text-align:center;margin-inline:auto}.industry-v3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:60px}.industry-v3-grid .glass-card{background:linear-gradient(145deg,rgba(3,44,77,.52),rgba(54,8,37,.5))!important;border-color:rgba(255,255,255,.11)!important;min-height:245px}.industry-v3-grid .glass-card:nth-child(2n){transform:translateY(30px)}.industry-v3-grid .glass-card:nth-child(2n):hover{transform:translateY(20px) perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.012)}
.services-v3{padding:135px 0;background:linear-gradient(180deg,rgba(54,28,14,.34),rgba(3,44,77,.48) 50%,rgba(54,8,37,.42));border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}.services-v3 .section-heading{text-align:center;margin-inline:auto}.services-v3-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:60px}.services-v3-grid .glass-card{min-height:285px;background:linear-gradient(160deg,rgba(0,0,0,.3),rgba(3,44,77,.5))!important;border-color:rgba(255,255,255,.12)!important}.services-v3-grid .glass-card:nth-child(3n){background:linear-gradient(160deg,rgba(87,2,17,.38),rgba(54,8,37,.55))!important}
.dark-visual-banner{margin-top:40px;margin-bottom:120px;min-height:580px;border:1px solid rgba(255,255,255,.13);border-radius:36px;overflow:hidden;display:grid;grid-template-columns:.9fr 1.1fr;background:linear-gradient(135deg,#02070b,#032C4D 50%,#360825);box-shadow:0 45px 120px rgba(0,0,0,.45);position:relative}.dark-banner-copy{padding:70px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:3}.dark-banner-copy h2{font-size:clamp(45px,5vw,75px);line-height:.95;letter-spacing:-.065em;margin:18px 0}.dark-banner-copy p{color:var(--muted);line-height:1.75;max-width:500px;margin-bottom:30px}.dark-banner-image{position:relative;overflow:hidden}.dark-banner-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#032C4D 0%,transparent 42%,rgba(54,8,37,.2));z-index:2}.dark-banner-image img{width:100%;height:100%;object-fit:cover;opacity:.75;filter:saturate(.85);transform:scale(1.05);animation:heroAsset 12s ease-in-out infinite}.banner-orbit{position:absolute;width:370px;height:370px;border:1px solid rgba(255,255,255,.2);border-radius:50%;left:35%;top:25%;z-index:3;animation:slowOrbit 16s linear infinite}.banner-orbit.b2{width:220px;height:220px;left:45%;top:35%;animation-direction:reverse;animation-duration:11s}.process-v3{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:60px}.process-v3 .process-card{min-height:250px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(150deg,rgba(3,44,77,.58),rgba(54,8,37,.48))!important;border-color:rgba(255,255,255,.11)!important}.process-v3 .process-card>b{font-size:38px;color:#fff}.process-v3 .process-card svg{color:#fff;align-self:flex-end;transition:transform .4s}.process-v3 .process-card:hover svg{transform:translate(7px,-7px)}
/* remove legacy white surfaces if present */
.section,.visual-showcase,.about-card,.contact-card,.detail-panel,.detail-feature,.about-values,.about-markets,.legal{background:transparent!important}
.glass-card,.process-card,.story-card,.contact-card,.about-card{color:#fff!important}.glass-card p,.process-card p,.story-card p,.contact-card p,.about-card p{color:rgba(255,255,255,.66)!important}.glass-card h3,.process-card h3,.story-card h2,.contact-card h2,.about-card h2{color:#fff!important}
@keyframes slowOrbit{to{transform:rotate(360deg)}}@keyframes heroAsset{0%,100%{transform:scale(1.05) translate3d(0,0,0)}50%{transform:scale(1.11) translate3d(-8px,-10px,0)}}@keyframes scanDown{0%{top:-5%}55%,100%{top:105%}}@keyframes glowBreath{50%{opacity:.55;transform:scale(1.08)}}@keyframes floatCardA{50%{transform:translate3d(-10px,-16px,0)}}@keyframes floatCardB{50%{transform:translate3d(13px,10px,0)}}@keyframes drift1{50%{transform:translate(22px,-16px)}}@keyframes drift2{50%{transform:translate(-18px,18px)}}@keyframes drift3{50%{transform:translate(16px,10px)}}
@media(max-width:1000px){.hero-v3{grid-template-columns:1fr;padding-top:110px}.hero-v3-copy{max-width:760px}.hero-v3-art{height:620px;min-height:520px}.visual-v3-heading{grid-template-columns:1fr}.industry-v3-grid{grid-template-columns:repeat(2,1fr)}.industry-v3-grid .glass-card:nth-child(2n){transform:none}.services-v3-grid{grid-template-columns:repeat(2,1fr)}.process-v3{grid-template-columns:repeat(2,1fr)}.dark-visual-banner{grid-template-columns:1fr;min-height:auto}.dark-banner-image{height:430px}.dark-banner-copy{padding:55px}}
@media(max-width:650px){.hero-v3{min-height:auto;padding-top:100px;padding-bottom:55px}.hero-v3-copy h1{font-size:48px}.hero-v3-copy>p{font-size:15px}.hero-v3-proof{gap:10px;display:grid}.hero-v3-art{height:480px;min-height:0}.hero-art-frame{inset:25px 0 30px}.hf-one{right:0;top:4%;width:175px;padding:14px}.hf-two{left:0;bottom:3%;width:170px;padding:14px}.hero-orbit-ring.r1{width:260px;height:260px;right:-80px}.hero-orbit-ring.r2{width:170px;height:170px}.visual-v3{padding-top:85px;padding-bottom:85px}.visual-v3-heading h2{font-size:44px}.visual-v3-mosaic{display:grid;grid-template-columns:1fr;grid-template-rows:330px 230px 230px}.mosaic-main{grid-row:auto}.mosaic-main h3{font-size:28px}.industry-v3-grid,.services-v3-grid,.process-v3{grid-template-columns:1fr}.industry-v3-grid .glass-card:nth-child(2n){transform:none}.services-v3{padding:90px 0}.dark-visual-banner{margin-bottom:80px;border-radius:24px}.dark-banner-copy{padding:35px 24px}.dark-banner-copy h2{font-size:42px}.dark-banner-image{height:300px}.process-v3 .process-card{min-height:190px}.hero-v3-bg span:nth-child(1){width:100vw;height:100vw;right:-50vw}}
@media(prefers-reduced-motion:reduce){.hero-v3-bg span,.hero-v3-bg i,.hero-art-frame img,.hero-art-scan,.hero-art-glow,.hero-float-card,.hero-orbit-ring,.hero-orbit-dot,.dark-banner-image img,.banner-orbit{animation:none!important}.mosaic-main img,.mosaic-side img{transition:none!important}}
/* final dark-form surfaces — never use a white page/form background */
.contact-card input,.contact-card textarea,.contact-card select{background:rgba(0,0,0,.24)!important;color:#fff!important;border-color:rgba(255,255,255,.14)!important;box-shadow:inset 0 1px rgba(255,255,255,.03)!important}
.contact-card input::placeholder,.contact-card textarea::placeholder{color:rgba(255,255,255,.45)!important}
.contact-card select option{background:#061018!important;color:#fff!important}
.mobile-menu{color:#fff!important}.mobile-menu a,.mobile-section>button{color:rgba(255,255,255,.82)!important}
.footer-main,.footer-bottom{color:rgba(255,255,255,.68)}
footer{background:linear-gradient(180deg,#02070b,#050609)!important;border-top:1px solid rgba(255,255,255,.1)!important}
/* Keep FAQ surfaces in the same cinematic system */
.faq-item{background:linear-gradient(145deg,rgba(3,44,77,.35),rgba(54,8,37,.28))!important;border-color:rgba(255,255,255,.12)!important}
.faq-item:hover,.faq-item.is-open{background:linear-gradient(145deg,rgba(3,44,77,.52),rgba(87,2,17,.38))!important}
.faq-trigger{color:#fff!important}.faq-answer p{color:rgba(255,255,255,.66)!important}.faq-plus{border-color:rgba(255,255,255,.2)!important}.faq-plus span{background:#fff!important}.faq-item.is-open .faq-plus{background:#570211!important;border-color:#570211!important}
/* =========================================================
FINAL LAPTOP POLISH — DARK AI VISUAL SYSTEM
========================================================= */
:root{
--ai-bg:#02070b;
--ai-navy:#032C4D;
--ai-blue:#1688d8;
--ai-red:#570211;
--ai-orange:#7E3110;
--ai-white:#f7f1eb;
--ai-muted:rgba(247,241,235,.70);
}
html{background:var(--ai-bg)!important;scroll-behavior:smooth}
body,#root{background:var(--ai-bg)!important;color:var(--ai-white)!important}
body:before{background:
radial-gradient(circle at 76% 10%,rgba(22,136,216,.12),transparent 23%),
radial-gradient(circle at 13% 44%,rgba(87,2,17,.15),transparent 26%),
linear-gradient(135deg,#02070b 0%,#03131f 38%,#07121d 62%,#02070b 100%)!important;opacity:1!important}
.home-premium,.inner-page,.detail-page{background:transparent!important}
.wrap{width:min(1260px,calc(100% - 64px))}
/* Header + dropdown: larger and easier to use on laptops */
.nav-shell{width:min(1320px,calc(100% - 44px));margin:14px auto}
.nav{height:78px!important;padding:0 22px!important;border-radius:22px!important;background:rgba(2,10,17,.84)!important;border-color:rgba(255,255,255,.13)!important;box-shadow:0 20px 70px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.04)!important}
.logo{font-size:20px!important;gap:11px}.logo-mark{width:43px;height:43px}.logo-mark span{font-size:20px}
.desktop-nav{gap:30px!important}.desktop-nav>a:not(.nav-cta),.drop-trigger{font-size:15px!important;font-weight:700!important;letter-spacing:-.01em}
.nav-cta,.primary{font-size:14px!important;padding:15px 21px!important;border-radius:13px!important}
.drop{height:100%}.drop-trigger{height:100%;padding:0 2px}
.mega{top:74px!important;width:min(820px,calc(100vw - 50px))!important;padding:22px!important;border-radius:24px!important;background:linear-gradient(145deg,rgba(3,22,34,.98),rgba(22,4,14,.98))!important;border-color:rgba(255,255,255,.14)!important;box-shadow:0 35px 110px rgba(0,0,0,.65),0 0 80px rgba(3,44,77,.14)!important}
.mega-top{margin-bottom:17px!important}.mega-top span{font-size:11px!important;color:#ff6a3d!important}.mega-top small{font-size:12px!important;color:rgba(247,241,235,.58)!important}
.mega-grid{gap:9px!important}.mega-item{grid-template-columns:44px 1fr 18px!important;gap:12px!important;padding:14px!important;border-radius:15px!important}
.mega-item:hover{background:linear-gradient(90deg,rgba(3,44,77,.50),rgba(87,2,17,.32))!important;border-color:rgba(255,255,255,.12)!important;transform:translateX(4px) scale(1.01)!important}
.mi-icon{width:40px!important;height:40px!important;border-radius:12px!important;background:linear-gradient(145deg,rgba(3,44,77,.75),rgba(87,2,17,.38))!important;color:#fff!important;border:1px solid rgba(255,255,255,.1)}
.mega-item b{font-size:14px!important;color:#fff!important}.mega-item small{font-size:11px!important;color:rgba(247,241,235,.56)!important;line-height:1.5!important}
/* Typography: intentionally larger for laptop/desktop readability */
.hero-v3-copy h1{font-size:clamp(64px,7.2vw,116px)!important}
.hero-v3-copy>p{font-size:19px!important;max-width:680px!important}
.section-heading h2,.visual-v3-heading h2{font-size:clamp(52px,5.8vw,90px)!important}
.section-heading p,.visual-v3-heading p{font-size:17px!important}
.glass-card h3{font-size:21px!important}.glass-card p{font-size:14px!important;line-height:1.7!important}.glass-card a{font-size:13px!important}
.metric b{font-size:34px!important}.metric span{font-size:13px!important}
.eyebrow{font-size:12px!important}
/* Inner/detail heroes */
.inner-page,.detail-page{padding-top:1px}
.inner-hero,.detail-hero{padding-top:170px!important;padding-bottom:100px!important;min-height:650px!important;position:relative;isolation:isolate}
.inner-hero:before,.detail-hero:before{content:"";position:absolute;inset:0 -10%;z-index:-2;background:
radial-gradient(circle at 75% 40%,rgba(3,44,77,.62),transparent 31%),
radial-gradient(circle at 22% 30%,rgba(87,2,17,.32),transparent 30%)}
.inner-hero:after,.detail-hero:after{content:"";position:absolute;right:-4%;top:18%;width:430px;height:430px;border:1px solid rgba(255,255,255,.10);border-radius:50%;z-index:-1;box-shadow:0 0 90px rgba(3,44,77,.14),inset 0 0 80px rgba(87,2,17,.08);animation:slowOrbit 26s linear infinite}
.inner-hero h1,.detail-copy h1{font-size:clamp(66px,7vw,108px)!important;max-width:980px!important}
.inner-hero>p,.detail-copy>p{font-size:19px!important;line-height:1.8!important;max-width:780px!important}
.detail-hero{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(390px,.9fr);gap:70px;align-items:center}
.detail-panel{padding:30px!important;border-radius:28px!important;background:linear-gradient(145deg,rgba(3,44,77,.56),rgba(54,8,37,.48))!important;border:1px solid rgba(255,255,255,.13)!important;box-shadow:0 35px 110px rgba(0,0,0,.48)!important}
.detail-panel>b{font-size:24px!important}.detail-panel small{font-size:11px!important;letter-spacing:.18em!important;color:#ff7650!important}.detail-bars{margin-top:24px!important}.detail-bars label{font-size:13px!important}.detail-bars span{font-size:11px!important}
.detail-icon{width:64px!important;height:64px!important;border-radius:18px!important;background:linear-gradient(145deg,rgba(3,44,77,.9),rgba(87,2,17,.55))!important;color:#fff!important;border-color:rgba(255,255,255,.14)!important}
/* New visual block on every service/industry page */
.detail-visual{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:70px;align-items:center;padding-top:55px;padding-bottom:95px;position:relative}
.detail-visual:before{content:"";position:absolute;inset:5% -8%;z-index:-1;background:radial-gradient(ellipse at 70% 45%,rgba(3,44,77,.38),transparent 55%),radial-gradient(ellipse at 25% 55%,rgba(87,2,17,.18),transparent 50%);filter:blur(5px)}
.detail-visual-copy h2{font-family:"Space Grotesk";font-size:clamp(45px,4.5vw,72px);line-height:.96;letter-spacing:-.06em;margin:18px 0 22px;max-width:680px}
.detail-visual-copy>p{font-size:17px;line-height:1.8;color:var(--ai-muted);max-width:650px}
.detail-visual-points{margin-top:30px;border-top:1px solid rgba(255,255,255,.10)}
.detail-visual-points div{display:grid;grid-template-columns:42px 1fr 18px;align-items:center;gap:14px;padding:17px 4px;border-bottom:1px solid rgba(255,255,255,.08);transition:.35s var(--motion-ease)}
.detail-visual-points div:hover{padding-left:10px;background:linear-gradient(90deg,rgba(3,44,77,.28),transparent)}
.detail-visual-points span{font-size:11px;color:#ff6a3d;letter-spacing:.12em}.detail-visual-points b{font-size:15px}.detail-visual-points svg{width:17px;color:#fff}
.detail-visual-gallery{display:grid;grid-template-columns:1.35fr .65fr;grid-template-rows:410px 220px;gap:16px;min-height:646px}
.detail-visual-gallery figure{margin:0;position:relative;overflow:hidden;border-radius:28px;border:1px solid rgba(255,255,255,.13);background:#02070b;box-shadow:0 30px 100px rgba(0,0,0,.48)}
.detail-image-main{grid-row:1/3}.detail-visual-gallery img{width:100%;height:100%;display:block;object-fit:cover;transition:transform 1.1s var(--motion-ease),filter .6s}.detail-visual-gallery figure:hover img{transform:scale(1.07);filter:saturate(1.13) contrast(1.06)}
.detail-visual-gallery figure:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,44,77,.05),rgba(0,0,0,.78));pointer-events:none}.detail-visual-gallery span{position:absolute;z-index:2;left:22px;bottom:20px;font-size:10px;letter-spacing:.16em;font-weight:900;color:#fff}.detail-image-small span{font-size:9px}
/* About visual */
.about-visual{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;padding-top:35px;padding-bottom:90px}
.about-visual-image{min-height:590px;position:relative;overflow:hidden;border-radius:32px;border:1px solid rgba(255,255,255,.13);background:#02070b;box-shadow:0 35px 110px rgba(0,0,0,.48)}
.about-visual-image img{width:100%;height:100%;min-height:590px;object-fit:cover;display:block;filter:saturate(.95);transition:transform 1.2s var(--motion-ease)}.about-visual-image:hover img{transform:scale(1.06)}
.about-visual-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,44,77,.04),rgba(0,0,0,.82))}
.about-visual-overlay{position:absolute;z-index:2;left:32px;right:32px;bottom:30px}.about-visual-overlay span{font-size:10px;letter-spacing:.2em;color:#ff7952}.about-visual-overlay b{display:block;font-family:"Space Grotesk";font-size:clamp(34px,3.6vw,58px);line-height:.98;letter-spacing:-.05em;margin-top:10px}
.about-visual-side{padding:54px 42px;border-radius:32px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(3,44,77,.54),rgba(54,8,37,.44));display:flex;flex-direction:column;justify-content:center;box-shadow:0 35px 110px rgba(0,0,0,.36)}
.about-visual-side h2{font-family:"Space Grotesk";font-size:clamp(38px,3.8vw,62px);line-height:.98;letter-spacing:-.055em;margin:18px 0}.about-visual-side>p{font-size:16px;line-height:1.8;color:var(--ai-muted)}
.about-mini-stats{margin-top:25px;border-top:1px solid rgba(255,255,255,.1)}.about-mini-stats div{display:grid;grid-template-columns:50px 1fr;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}.about-mini-stats b{color:#ff7650;font-size:12px}.about-mini-stats span{font-size:14px;color:#fff}
/* Contact visual */
.contact-visual{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:stretch;padding-top:20px;padding-bottom:70px}.contact-visual>img{width:100%;height:390px;object-fit:cover;border-radius:30px;border:1px solid rgba(255,255,255,.13);box-shadow:0 30px 100px rgba(0,0,0,.46);transition:transform 1s var(--motion-ease),filter .6s}.contact-visual:hover>img{transform:scale(1.025);filter:saturate(1.08)}.contact-visual>div{padding:44px;border:1px solid rgba(255,255,255,.12);border-radius:30px;background:linear-gradient(145deg,rgba(3,44,77,.52),rgba(87,2,17,.35));display:flex;flex-direction:column;justify-content:center}.contact-visual h2{font-family:"Space Grotesk";font-size:clamp(36px,3.3vw,55px);line-height:1;letter-spacing:-.05em;margin:16px 0}.contact-visual p{font-size:16px;line-height:1.8;color:var(--ai-muted)}
/* Cards/forms/readability */
.detail-feature{padding:30px!important;min-height:230px!important;background:linear-gradient(145deg,rgba(3,44,77,.48),rgba(54,8,37,.38))!important}
.detail-feature h3{font-size:20px!important}.detail-feature p{font-size:14px!important;line-height:1.75!important}
.contact-card{border-radius:30px!important;background:linear-gradient(145deg,rgba(3,44,77,.48),rgba(54,8,37,.42))!important;border-color:rgba(255,255,255,.14)!important;box-shadow:0 35px 110px rgba(0,0,0,.46)!important}
.contact-copy h2{font-size:clamp(42px,4vw,65px)!important;line-height:.98!important}.contact-copy>p{font-size:16px!important;line-height:1.8!important}.contact-card input,.contact-card textarea{font-size:15px!important;min-height:54px!important}.contact-card textarea{min-height:160px!important}.service-select-trigger{min-height:54px!important;font-size:15px!important}.service-select-menu button{font-size:14px!important;padding:14px 16px!important}
/* smoother global image motion */
img{image-rendering:auto}.mosaic-main img,.mosaic-side img,.dark-banner-image img,.image-story-panel img{will-change:transform}.image-story-panel{transition:opacity .8s var(--motion-ease),transform 1s var(--motion-ease),filter .8s!important}
@media(max-width:1100px){
.wrap{width:min(1180px,calc(100% - 44px))}.desktop-nav{gap:18px!important}.desktop-nav>a:not(.nav-cta),.drop-trigger{font-size:14px!important}.nav-cta{padding:13px 16px!important}
.detail-hero{grid-template-columns:1fr;gap:45px}.detail-panel{max-width:760px}.detail-visual{grid-template-columns:1fr;gap:40px}.detail-visual-gallery{min-height:570px}.about-visual,.contact-visual{grid-template-columns:1fr}.about-visual-image{min-height:500px}.about-visual-image img{min-height:500px}.contact-visual>img{height:440px}
}
@media(max-width:760px){
.wrap{width:calc(100% - 32px)}.nav-shell{width:calc(100% - 22px);margin:10px auto}.nav{height:66px!important;padding:0 14px!important}.logo{font-size:17px!important}.logo-mark{width:38px;height:38px}.desktop-nav{display:none!important}.hamb{display:block!important;width:44px;height:44px;display:grid!important;place-items:center;border-radius:13px;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.10)!important}.mobile-menu{position:absolute;top:74px;left:11px;right:11px;padding:10px!important;border-radius:20px!important;box-shadow:0 30px 80px rgba(0,0,0,.6)!important}.mobile-section>button{font-size:15px!important;padding:16px 14px!important}.mobile-sub a{font-size:14px!important;padding:13px 16px!important}
.hero-v3{padding-top:110px!important}.hero-v3-copy h1{font-size:51px!important}.hero-v3-copy>p{font-size:16px!important}.section-heading h2,.visual-v3-heading h2{font-size:44px!important}.inner-hero,.detail-hero{padding-top:125px!important;padding-bottom:70px!important;min-height:auto!important}.inner-hero h1,.detail-copy h1{font-size:53px!important}.inner-hero>p,.detail-copy>p{font-size:16px!important}.detail-visual{padding-top:20px;padding-bottom:65px}.detail-visual-copy h2{font-size:42px}.detail-visual-copy>p{font-size:15px}.detail-visual-gallery{grid-template-columns:1fr;grid-template-rows:330px 230px;min-height:0}.detail-image-main{grid-row:auto}.about-visual{padding-bottom:60px}.about-visual-image,.about-visual-image img{min-height:380px;height:380px}.about-visual-side{padding:35px 25px}.about-visual-side h2{font-size:40px}.contact-visual{padding-bottom:50px}.contact-visual>img{height:290px}.contact-visual>div{padding:30px 24px}.contact-visual h2{font-size:39px}
.services-v3-grid,.industry-v3-grid,.process-v3{gap:12px}.glass-card{padding:22px}.glass-card h3{font-size:20px!important}.glass-card p{min-height:auto}.mega{width:calc(100vw - 28px)!important}.mega-grid{grid-template-columns:1fr!important}.mega-top{display:block}.mega-top small{display:block;margin-top:6px}
}
@media(prefers-reduced-motion:reduce){.inner-hero:after,.detail-hero:after,.detail-visual-gallery img,.about-visual-image img,.contact-visual>img{animation:none!important;transition:none!important}}
/* Dropdown image headers + loader palette */
.mega-top{position:relative;overflow:hidden;min-height:88px;padding:15px 18px!important;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:#061018 center/cover no-repeat;align-items:flex-end!important}
.mega-top:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,7,11,.94) 0%,rgba(2,7,11,.70) 48%,rgba(2,7,11,.18) 100%);z-index:0}
.mega-top>*{position:relative;z-index:1}
.mega.services .mega-top{background-image:url('/images/ai-automation.webp')}
.mega.industries .mega-top{background-image:url('/images/cloud-automation.webp')}
.page-loader{background:linear-gradient(135deg,#02070b,#032C4D 48%,#360825)!important}
.loader-brand{color:#fff!important}.loader-brand b{color:#ff6a3d!important}.loader-mark{color:#fff!important;background:linear-gradient(135deg,#032C4D,#570211,#7E3110)!important}
/* =========================================================
FINAL IMAGE-LED COLOUR + LAPTOP READABILITY FINISH
========================================================= */
:root{
--ai-red:#e31b2f;
--ai-orange:#ff5a36;
--ai-blue:#1688d8;
--ai-navy:#061426;
}
body:before{
background:
radial-gradient(circle at 78% 12%,rgba(22,136,216,.16),transparent 25%),
radial-gradient(circle at 12% 48%,rgba(227,27,47,.13),transparent 27%),
radial-gradient(circle at 78% 78%,rgba(255,90,54,.08),transparent 22%),
linear-gradient(135deg,#02070b 0%,#061426 44%,#070d18 68%,#02070b 100%)!important;
}
.eyebrow i,.ticker-track i,.orb-dot,.stage-dot{background:var(--ai-red)!important;box-shadow:0 0 18px rgba(227,27,47,.65)!important}
.logo b,.mega-top span,.detail-panel small,.detail-visual-points span,.about-visual-overlay span{color:var(--ai-orange)!important}
.logo-mark{background:linear-gradient(135deg,var(--ai-blue),var(--ai-red),var(--ai-orange))!important}
.nav-cta,.primary{background:linear-gradient(135deg,var(--ai-red),var(--ai-orange))!important;box-shadow:0 14px 40px rgba(227,27,47,.22)!important}
.secondary{border-color:rgba(22,136,216,.32)!important;background:rgba(6,20,38,.68)!important}
.mega{background:linear-gradient(145deg,rgba(4,20,34,.99),rgba(31,5,14,.99))!important}
.mega-item:hover{background:linear-gradient(90deg,rgba(22,136,216,.22),rgba(227,27,47,.20))!important}
.mi-icon{background:linear-gradient(145deg,rgba(22,136,216,.48),rgba(227,27,47,.30))!important}
.hero-v3-bg span,.hero-v3-bg i{border-color:rgba(22,136,216,.20)!important}
.hero-art-glow{background:radial-gradient(circle,rgba(22,136,216,.24),rgba(227,27,47,.13),transparent 68%)!important}
.hero-orbit-ring{border-color:rgba(22,136,216,.25)!important}
.hero-orbit-dot{background:var(--ai-orange)!important;box-shadow:0 0 20px rgba(255,90,54,.8)!important}
.image-story{background:linear-gradient(180deg,#16090c 0%,#390813 44%,#061426 100%)!important}
.dark-visual-banner{background:linear-gradient(135deg,#02070b,#061426 50%,#250811)!important}
.process-v3 .process-card{background:linear-gradient(150deg,rgba(6,20,38,.82),rgba(38,6,18,.72))!important}
.detail-feature,.contact-card{background:linear-gradient(145deg,rgba(6,20,38,.72),rgba(38,6,18,.58))!important}
.detail-panel{background:linear-gradient(145deg,rgba(6,20,38,.82),rgba(38,6,18,.70))!important}
.about-visual-side,.contact-visual>div{background:linear-gradient(145deg,rgba(6,20,38,.72),rgba(38,6,18,.58))!important}
.detail-visual:before{background:radial-gradient(ellipse at 70% 45%,rgba(22,136,216,.30),transparent 55%),radial-gradient(ellipse at 25% 55%,rgba(227,27,47,.18),transparent 50%)!important}
/* Keep readable sizes on normal laptop widths without making mobile oversized. */
@media(min-width:1101px){
.wrap{width:min(1280px,calc(100% - 72px))!important}
.hero-v3-copy h1{font-size:clamp(68px,6.4vw,108px)!important}
.hero-v3-copy>p{font-size:19px!important;line-height:1.75!important}
.section-heading h2,.visual-v3-heading h2{font-size:clamp(54px,5.2vw,82px)!important}
.glass-card h3{font-size:22px!important}
.glass-card p{font-size:15px!important}
.services-v3-grid,.industry-v3-grid{gap:18px!important}
}
/* =========================================================
MarketAIFlow — FINAL STRUCTURE / VISUAL FIX
========================================================= */
:root{
--brand-navy:#06121d;
--brand-navy-2:#0a2032;
--brand-blue:#0b6cff;
--brand-blue-soft:#22a7ff;
--brand-red:#ff2b2b;
--brand-orange:#ff5a1f;
--brand-white:#f8fbff;
--brand-muted:rgba(232,241,249,.68);
--brand-line:rgba(142,190,224,.16);
}
html,body,#root{background:#06121d!important;color:var(--brand-white)!important}
body{
background:
radial-gradient(circle at 78% 12%,rgba(11,108,255,.14),transparent 28%),
radial-gradient(circle at 14% 44%,rgba(255,43,43,.10),transparent 26%),
linear-gradient(135deg,#040b12 0%,#06121d 42%,#07182a 72%,#050b12 100%)!important;
}
.header{z-index:1000!important}
.nav-shell{position:relative;z-index:1001}
.desktop-nav{gap:20px}
.drop{z-index:1005}
.mega{
z-index:1100!important;
width:min(860px,calc(100vw - 40px))!important;
max-height:min(72vh,680px);
overflow:auto;
padding:18px!important;
background:rgba(3,12,21,.97)!important;
border:1px solid rgba(64,154,255,.22)!important;
box-shadow:0 30px 100px rgba(0,0,0,.65),0 0 55px rgba(11,108,255,.08)!important;
}
.mega-top span{color:#42a8ff!important}
.mega-top small{color:rgba(255,255,255,.55)!important}
.mega-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
.mega-item{
grid-template-columns:58px minmax(0,1fr) 16px!important;
min-height:70px;
padding:9px!important;
border:1px solid rgba(255,255,255,.06)!important;
background:rgba(255,255,255,.015);
}
.mega-item:hover{background:linear-gradient(135deg,rgba(11,108,255,.12),rgba(255,43,43,.07))!important;border-color:rgba(70,160,255,.22)!important;transform:translateY(-1px)!important}
.mi-thumb{position:relative;width:52px;height:52px;border-radius:12px;overflow:hidden;display:block;background:#081522;border:1px solid rgba(255,255,255,.10)}
.mi-thumb>img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) brightness(.72);transition:transform .45s ease,filter .45s ease}
.mega-item:hover .mi-thumb>img{transform:scale(1.08);filter:saturate(1.08) brightness(.9)}
.mi-thumb .mi-icon{position:absolute;inset:auto 4px 4px auto;width:25px;height:25px;border-radius:8px;background:rgba(3,12,21,.84);color:#5bb5ff;border:1px solid rgba(91,181,255,.2);display:grid;place-items:center}
.mi-copy b{font-size:13px!important;color:#fff!important}
.mi-copy small{font-size:9.5px!important;line-height:1.45!important;color:rgba(229,240,249,.56)!important}
.mega-item>svg{color:#53adff!important}
.hero-v3{
min-height:calc(100svh - 20px)!important;
grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr)!important;
gap:48px!important;
padding-top:112px!important;
padding-bottom:58px!important;
}
.hero-v3-copy h1{
font-size:clamp(48px,5.25vw,78px)!important;
line-height:.93!important;
letter-spacing:-.055em!important;
max-width:720px;
margin:16px 0 22px!important;
}
.hero-v3-copy>p{font-size:16px!important;line-height:1.72!important;max-width:590px!important}
.hero-v3-proof{font-size:11px!important;margin-top:22px!important}
.hero-actions{margin-top:22px!important}
.hero-v3-art{height:min(600px,62vw)!important;min-height:500px!important}
.hero-art-frame{inset:35px 12px 28px 0!important;border-radius:30px!important;border-color:rgba(75,161,232,.24)!important}
.hero-art-frame img{opacity:.88!important;filter:saturate(1.05) contrast(1.05)!important;object-position:center!important}
.hero-art-frame:after{background:linear-gradient(135deg,rgba(4,17,29,.22),transparent 42%,rgba(255,31,31,.20)),linear-gradient(0deg,rgba(0,0,0,.58),transparent 52%)!important}
.hero-float-card{padding:13px 15px!important;border-color:rgba(91,181,255,.18)!important}
.hero-float-card b{font-size:12px!important}
.hf-one{right:-8px!important;top:11%!important;width:190px!important}
.hf-two{left:-8px!important;bottom:8%!important;width:180px!important}
.hero-orbit-ring.r1{width:350px!important;height:350px!important;right:-80px!important}
.hero-orbit-ring.r2{width:210px!important;height:210px!important;right:-2px!important;bottom:65px!important}
.section-heading h2,.visual-v3-heading h2{
font-size:clamp(42px,4.5vw,64px)!important;
line-height:.98!important;
letter-spacing:-.055em!important;
}
.section-heading p,.visual-v3-heading p{font-size:15px!important;line-height:1.75!important}
.glass-card h3,.process-card h3,.detail-feature h3{font-size:20px!important;line-height:1.12!important}
.glass-card p,.process-card p,.detail-feature p{font-size:13px!important;line-height:1.65!important}
/* Clean image story: the supplied artwork already contains typography,
so don't place another large headline over the artwork. */
.image-story{
height:calc(100svh * 4.15)!important;
min-height:0!important;
background:
radial-gradient(circle at 72% 45%,rgba(11,108,255,.18),transparent 28%),
linear-gradient(180deg,#071522 0%,#190813 48%,#061a2c 100%)!important;
}
.image-story-inner{
grid-template-columns:minmax(320px,.78fr) minmax(560px,1.22fr)!important;
gap:clamp(34px,5vw,72px)!important;
padding-top:48px!important;
padding-bottom:48px!important;
}
.image-story-copy{max-width:500px!important}
.image-story-copy h2{
font-size:clamp(43px,4.8vw,68px)!important;
line-height:.94!important;
letter-spacing:-.055em!important;
margin:15px 0 20px!important;
}
.image-story-copy>p{font-size:15px!important;line-height:1.75!important;color:rgba(238,246,252,.68)!important}
.image-story-steps{margin-top:28px!important;gap:4px!important}
.image-story-steps button{padding:9px 0!important}
.image-story-steps button b{font-size:10px!important}
.image-story-steps button.active{color:#fff!important;transform:translateX(7px)!important}
.image-story-steps button:before{background:linear-gradient(#ff3a2f,#ff8a35)!important}
.image-story-stage{
height:min(66vh,610px)!important;
min-height:470px;
border-radius:28px!important;
border:1px solid rgba(103,180,255,.22)!important;
box-shadow:0 35px 110px rgba(0,0,0,.56),0 0 55px rgba(11,108,255,.08)!important;
}
.image-story-panel{transform:scale(1.035)!important;transition:opacity .55s ease,transform .8s cubic-bezier(.16,1,.3,1)!important}
.image-story-panel.active{transform:scale(1)!important}
.image-story-panel img{filter:saturate(1.03) contrast(1.03)!important}
.image-story-overlay{background:linear-gradient(180deg,rgba(0,0,0,.03) 45%,rgba(0,0,0,.52) 100%)!important}
.image-story-label{position:absolute;left:25px;bottom:23px;z-index:3;display:flex;align-items:center;gap:12px;padding:8px 11px;border-radius:999px;background:rgba(2,9,15,.72);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(12px)}
.image-story-label span{font-size:9px;letter-spacing:.16em;font-weight:800;color:#fff}
.image-story-label b{font-size:9px;color:#63b8ff;letter-spacing:.08em}
.image-story-chip{background:rgba(2,9,15,.76)!important;border-color:rgba(95,183,255,.22)!important;color:#fff!important}
.image-story-orbit span{border-color:rgba(74,162,235,.11)!important}
.image-story-orbit i{background:#ff4c30!important;box-shadow:0 0 18px #ff4c30!important}
/* Inner pages: consistent hero sizing and real visual blocks. */
.detail-page,.inner-page{padding-top:100px!important}
.detail-hero{min-height:500px!important;padding-top:55px!important;gap:45px!important}
.detail-copy h1,.inner-hero h1{font-size:clamp(48px,5.4vw,72px)!important;line-height:.96!important;letter-spacing:-.055em!important}
.detail-copy>p,.inner-hero>p{font-size:15px!important;line-height:1.75!important;max-width:680px!important}
.detail-panel{background:linear-gradient(145deg,rgba(8,32,52,.72),rgba(5,10,16,.9))!important;border-color:rgba(74,162,235,.2)!important}
.detail-visual{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center;padding:70px 0}
.detail-visual-gallery{display:grid;grid-template-columns:1.35fr .65fr;gap:14px;min-height:440px}
.detail-image-main,.detail-image-small{position:relative;overflow:hidden;border-radius:24px;border:1px solid rgba(103,180,255,.18);background:#06121d;min-height:440px}
.detail-image-small{min-height:280px;align-self:end}
.detail-image-main img,.detail-image-small img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.02);transition:transform .8s ease}
.detail-image-main:hover img,.detail-image-small:hover img{transform:scale(1.06)}
.detail-image-main span,.detail-image-small span{position:absolute;left:16px;bottom:15px;padding:7px 9px;border-radius:999px;background:rgba(2,9,15,.75);font-size:8px;letter-spacing:.12em;border:1px solid rgba(255,255,255,.12)}
.detail-cards{grid-template-columns:repeat(3,1fr)!important}
/* Form: proper visible controls, validation and mobile layout. */
.contact-card{grid-template-columns:.9fr 1.1fr!important;padding:38px!important;border-color:rgba(91,181,255,.18)!important;background:linear-gradient(135deg,rgba(6,28,46,.72),rgba(11,18,28,.86))!important}
.contact-form{gap:11px!important}
.contact-form input,.contact-form textarea{min-height:50px!important;font-size:13px!important;background:rgba(2,9,15,.72)!important;border-color:rgba(125,180,222,.18)!important}
.contact-form textarea{min-height:145px!important}
.service-select{position:relative!important}
.service-select-trigger{min-height:50px!important;border:1px solid rgba(125,180,222,.18)!important;border-radius:11px!important;background:rgba(2,9,15,.72)!important;color:#fff!important}
.service-select-menu{z-index:500!important;background:#071522!important;border-color:rgba(75,161,232,.22)!important;box-shadow:0 24px 60px rgba(0,0,0,.55)!important;max-height:290px!important;overflow:auto}
.service-select-menu button{font-size:12px!important;color:rgba(240,247,252,.82)!important}
.service-select-menu button:hover,.service-select-menu button.active{background:linear-gradient(90deg,rgba(11,108,255,.13),rgba(255,43,43,.08))!important;color:#fff!important}
.form-error{padding:11px 13px;border-radius:10px;border:1px solid rgba(255,79,62,.3);background:rgba(255,43,43,.08);color:#ff9f91;font-size:11px}
.submit{min-height:50px!important;background:linear-gradient(90deg,#e92b22,#ff641f)!important;color:#fff!important}
.direct-contact a{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
/* Prevent content from hiding behind fixed navigation. */
main{position:relative;z-index:1}
footer{position:relative;z-index:2}
@media(max-width:1100px){
.hero-v3{grid-template-columns:1fr!important;padding-top:105px!important}
.hero-v3-copy{max-width:760px!important}
.hero-v3-art{height:520px!important;min-height:460px!important}
.image-story-inner{grid-template-columns:.8fr 1.2fr!important;gap:28px!important}
.image-story-stage{height:560px!important}
.detail-visual{grid-template-columns:1fr!important}
}
@media(max-width:900px){
.desktop-nav{display:none!important}.hamb{display:grid!important;place-items:center!important}
.mega-grid{grid-template-columns:1fr!important}
.hero-v3-copy h1{font-size:clamp(44px,8vw,66px)!important}
.hero-v3-art{height:500px!important}
.image-story{height:auto!important;min-height:0!important;padding:92px 0 80px!important}
.image-story-sticky{position:relative!important;height:auto!important;overflow:visible!important}
.image-story-inner{display:block!important;padding:0 28px!important}
.image-story-copy{margin-bottom:30px!important;max-width:760px!important}
.image-story-copy h2{font-size:clamp(42px,8vw,60px)!important}
.image-story-stage{height:560px!important;min-height:0!important}
.image-story-panel{position:absolute!important}
.detail-hero{grid-template-columns:1fr!important}
.detail-cards{grid-template-columns:repeat(2,1fr)!important}
.contact-card{grid-template-columns:1fr!important}
}
@media(max-width:650px){
.nav-shell{width:calc(100% - 14px)!important;margin:7px auto!important}
.nav{height:58px!important}
.mega{width:calc(100vw - 26px)!important;left:0!important;transform:none!important;top:61px!important;max-height:72svh!important}
.mega-grid{grid-template-columns:1fr!important}
.mega-item{grid-template-columns:52px 1fr 15px!important;min-height:64px!important}
.mi-thumb{width:46px;height:46px}
.hero-v3{padding-top:92px!important;padding-bottom:42px!important;display:block!important}
.hero-v3-copy h1{font-size:44px!important;line-height:.95!important}
.hero-v3-copy>p{font-size:14px!important}
.hero-v3-art{height:390px!important;min-height:0!important;margin-top:18px}
.hero-art-frame{inset:18px 0 18px 0!important;border-radius:24px!important}
.hf-one,.hf-two{width:150px!important;padding:11px!important}.hf-one{right:3px!important}.hf-two{left:3px!important}
.hf-one b,.hf-two b{font-size:10px!important}
.image-story-inner{padding:0 18px!important}
.image-story-copy h2{font-size:40px!important}
.image-story-copy>p{font-size:14px!important}
.image-story-steps{grid-template-columns:repeat(5,1fr)!important;gap:3px!important}
.image-story-steps button{display:block!important;padding:8px 3px!important;border-bottom:2px solid rgba(255,255,255,.08)!important}
.image-story-steps button.active{transform:none!important;border-bottom-color:#ff4c30!important}
.image-story-steps button b{font-size:7px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.image-story-stage{height:470px!important;border-radius:22px!important}
.image-story-label{left:13px;bottom:13px;padding:6px 8px}.image-story-label span{font-size:7px}.image-story-label b{font-size:7px}
.detail-page,.inner-page{padding-top:85px!important}
.detail-copy h1,.inner-hero h1{font-size:44px!important}
.detail-visual-gallery{grid-template-columns:1fr!important;min-height:0!important}.detail-image-main{min-height:330px}.detail-image-small{min-height:220px}
.detail-cards{grid-template-columns:1fr!important}
.contact-card{padding:24px 18px!important;border-radius:22px!important}
.form-row{grid-template-columns:1fr!important}
}
/* =========================================================
FINAL USER-PROOF PASS — navigation, typography, story, cards
========================================================= */
.header{z-index:9999!important}
.nav-shell,.nav,.desktop-nav,.drop{position:relative;z-index:10000!important}
.nav{overflow:visible!important}
.desktop-nav{gap:24px!important}
.desktop-nav>a:not(.nav-cta),.drop-trigger{font-size:15px!important;font-weight:750!important;color:rgba(248,251,255,.92)!important;letter-spacing:-.01em!important}
.drop-trigger{padding:0 4px!important}
.drop-trigger:hover,.drop-trigger.active{color:#fff!important}
.mega{top:82px!important;z-index:20000!important;display:none;visibility:hidden;pointer-events:none;opacity:0!important;transform:translateX(-50%) translateY(-8px)!important}
.mega.mega-open{display:block!important;visibility:visible!important;pointer-events:auto!important;opacity:1!important;transform:translateX(-50%) translateY(0)!important}
.drop.is-open .mega{display:block!important;visibility:visible!important;pointer-events:auto!important}
.mega-grid{max-height:58vh!important;overflow:auto!important;padding-right:2px!important}
.mega-item{cursor:pointer!important}
.eyebrow{font-size:14px!important;font-weight:900!important;letter-spacing:.14em!important;line-height:1.25!important;color:#fff!important}
.eyebrow i{width:9px!important;height:9px!important;display:inline-block!important;margin-right:10px!important;flex:0 0 auto}
.hero-v3-copy .eyebrow{font-size:14px!important;color:#ff5a36!important;text-shadow:0 0 18px rgba(255,90,54,.18)}
.hero-v3-copy .eyebrow i{background:#ff2b2b!important}
.hero-v3-copy h1{font-size:clamp(52px,5.4vw,84px)!important;line-height:.95!important;max-width:760px!important}
.hero-v3-copy>p{font-size:17px!important;max-width:650px!important}
/* The supplied artwork is already composed. Never stack a second headline/paragraph over it. */
.image-story-panel .image-story-overlay{background:linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(0,0,0,.28) 100%)!important}
.image-story-label{bottom:18px!important;left:18px!important;background:rgba(2,9,15,.72)!important}
.image-story-copy h2{font-size:clamp(42px,4.2vw,60px)!important;line-height:.97!important}
.image-story-copy>p{font-size:15px!important;line-height:1.7!important}
.image-story-stage{min-height:450px!important;height:min(64vh,590px)!important}
.image-story-panel img{object-fit:cover!important;object-position:center!important}
.section-heading h2,.visual-v3-heading h2{font-size:clamp(42px,4.3vw,62px)!important;line-height:1!important}
.section-heading p,.visual-v3-heading p{font-size:15px!important;line-height:1.75!important}
.industry-v3-grid,.services-v3-grid{grid-auto-rows:minmax(285px,1fr)!important}
.glass-card{min-height:285px!important;padding:26px!important}
.glass-card h3{font-size:21px!important;line-height:1.12!important}
.glass-card p{font-size:13.5px!important;line-height:1.62!important}
.glass-card .number{font-size:11px!important;color:#ff5a36!important;font-weight:900!important}
.glass-card .card-icon{width:48px!important;height:48px!important}
.glass-card a{font-size:11px!important;font-weight:850!important;color:#69bcff!important}
/* Stronger, cleaner form hierarchy */
.contact-copy h2{font-size:clamp(38px,4vw,58px)!important}
.contact-form input,.contact-form textarea,.service-select-trigger{font-size:15px!important}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(232,241,249,.56)!important}
.submit{font-size:14px!important;font-weight:900!important}
/* Desktop nav dropdown should always remain usable on laptop widths. */
@media(min-width:901px){
.hamb{display:none!important}
.mobile-menu{display:none!important}
.mega{width:min(900px,calc(100vw - 48px))!important}
}
@media(max-width:900px){
.nav-shell{width:calc(100% - 24px)!important;margin:10px auto!important}
.nav{height:68px!important;padding:0 14px!important}
.desktop-nav{display:none!important}
.hamb{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:12px!important;background:rgba(255,255,255,.04)!important;color:#fff!important}
.mobile-menu{position:absolute!important;left:0!important;right:0!important;top:76px!important;z-index:20000!important;max-height:calc(100vh - 90px)!important;overflow:auto!important;padding:14px!important;border:1px solid rgba(90,174,255,.18)!important;border-radius:18px!important;background:rgba(3,12,21,.98)!important;box-shadow:0 30px 90px rgba(0,0,0,.7)!important;backdrop-filter:blur(24px)!important}
.mobile-menu>a,.mobile-section>button{min-height:48px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;padding:0 12px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.07)!important;background:transparent!important;color:#fff!important;font-size:15px!important;font-weight:800!important;text-align:left!important}
.mobile-sub{padding:6px 0 8px!important}
.mobile-sub a{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:11px 12px 11px 22px!important;color:rgba(245,250,255,.78)!important;font-size:13px!important;border-radius:10px!important}
.mobile-sub a:hover{background:rgba(11,108,255,.12)!important;color:#fff!important}
.mobile-menu .nav-cta{margin-top:12px!important;justify-content:center!important;border:0!important;color:#fff!important}
.hero-v3{padding-top:105px!important}
.hero-v3-copy h1{font-size:clamp(46px,9vw,64px)!important}
.hero-v3-copy>p{font-size:15px!important}
.eyebrow{font-size:12px!important}
.image-story-inner{padding:0 20px!important}
.image-story-copy h2{font-size:clamp(40px,9vw,54px)!important}
.image-story-stage{height:500px!important;min-height:0!important}
.industry-v3-grid,.services-v3-grid{grid-auto-rows:auto!important}
.glass-card{min-height:260px!important}
}
@media(max-width:520px){
.logo{font-size:16px!important}
.logo-mark{width:36px!important;height:36px!important}
.hero-v3-copy h1{font-size:44px!important}
.image-story-stage{height:420px!important}
.image-story-label{max-width:calc(100% - 30px)!important}
.image-story-label span{font-size:8px!important}
.glass-card{min-height:245px!important;padding:22px!important}
}
/* =========================================================
FINAL CONTRAST + CARD SEPARATION PASS
Dark navy / electric blue / red-orange visual system.
========================================================= */
:root{
--site-bg:#06111d;
--site-bg-2:#081a2a;
--site-panel:#0a1827;
--site-panel-2:#10162b;
--site-blue:#2e8cff;
--site-blue-bright:#63b8ff;
--site-red:#ff2d2d;
--site-orange:#ff7138;
--site-white:#f7fbff;
--site-muted:#b9c8d8;
}
html,body{background:var(--site-bg)!important;color:var(--site-white)!important}
body{
background:
radial-gradient(circle at 78% 8%,rgba(46,140,255,.16),transparent 28%),
radial-gradient(circle at 14% 28%,rgba(255,45,45,.12),transparent 30%),
radial-gradient(circle at 72% 78%,rgba(255,113,56,.10),transparent 28%),
linear-gradient(135deg,#050c16 0%,#071524 44%,#0a1020 72%,#071a2b 100%)!important;
}
body:before{background:radial-gradient(circle at 75% 15%,rgba(46,140,255,.10),transparent 30%),radial-gradient(circle at 20% 55%,rgba(255,45,45,.08),transparent 28%),linear-gradient(135deg,rgba(5,12,22,.96),rgba(7,21,36,.72),rgba(7,13,26,.88))!important}
body:after{opacity:.22!important;background:repeating-linear-gradient(90deg,transparent 0 140px,rgba(99,184,255,.035) 141px,transparent 142px),repeating-linear-gradient(0deg,transparent 0 140px,rgba(255,45,45,.025) 141px,transparent 142px)!important}
/* Keep headings at their existing scale; increase all supporting copy for readability. */
.hero-v3-copy>p,.detail-copy>p,.inner-hero>p,.section-heading p,.visual-v3-heading>p,.image-story-copy>p,
.glass-card p,.detail-feature p,.story-card p,.process-card p,.about-intro>p,.about-values p,.about-markets p,
.contact-copy p,.contact-visual p,.legal-lead,.legal section p{color:rgba(247,251,255,.88)!important;font-size:16px!important;line-height:1.75!important}
.glass-card h3,.detail-feature h3,.process-card h3,.story-card h2{color:#fff!important}
.glass-card h3{font-size:20px!important}
.detail-feature h3{font-size:20px!important}
.process-card h3{font-size:20px!important}
.glass-card a,.detail-feature a,.process-card a,.story-card a{font-size:13px!important;color:var(--site-blue-bright)!important;font-weight:850!important}
/* Strong, visible eyebrows / red markers. */
.eyebrow{color:#ff5a3d!important;font-size:12px!important;font-weight:900!important;letter-spacing:.16em!important}
.eyebrow i{background:var(--site-red)!important;box-shadow:0 0 0 6px rgba(255,45,45,.10)!important}
.hero-v3-copy .eyebrow{color:#ff6848!important}
/* Visible light icons on dark cards. */
.card-icon,.story-icon,.detail-icon{
color:#dff3ff!important;
background:linear-gradient(145deg,rgba(46,140,255,.20),rgba(255,45,45,.12))!important;
border:1px solid rgba(99,184,255,.34)!important;
box-shadow:0 0 28px rgba(46,140,255,.08),inset 0 1px rgba(255,255,255,.08)!important;
}
.card-icon svg,.story-icon svg,.detail-icon svg{color:#eaf7ff!important;stroke:#eaf7ff!important;filter:drop-shadow(0 0 9px rgba(99,184,255,.32))!important}
.detail-feature>svg{color:#65baff!important;stroke:#65baff!important}
/* Cards must be visually separated — no merged/muddy surfaces. */
.industry-v3-grid,.services-v3-grid,.detail-cards,.story-grid,.process-v3{gap:20px!important}
.industry-v3-grid,.services-v3-grid{align-items:stretch!important}
.glass-card,.detail-feature,.process-card,.story-card{
background:linear-gradient(145deg,rgba(9,25,41,.96),rgba(15,17,38,.94) 58%,rgba(42,10,34,.82))!important;
border:1px solid rgba(99,184,255,.22)!important;
border-radius:18px!important;
box-shadow:0 18px 55px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.045)!important;
isolation:isolate!important;
overflow:hidden!important;
}
.glass-card{min-height:300px!important;padding:28px!important;display:flex!important;flex-direction:column!important}
.glass-card p{flex:1;min-height:0!important;color:rgba(247,251,255,.84)!important}
.glass-card:before{background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(46,140,255,.14),transparent 66%)!important;z-index:-1!important}
.glass-card:after{content:"";position:absolute;inset:auto 10% 0;height:1px;background:linear-gradient(90deg,transparent,var(--site-red),var(--site-blue),transparent);opacity:.5;z-index:0!important}
.glass-card:hover,.detail-feature:hover,.process-card:hover,.story-card:hover{
transform:translateY(-8px)!important;
border-color:rgba(99,184,255,.46)!important;
box-shadow:0 28px 70px rgba(0,0,0,.45),0 0 35px rgba(46,140,255,.09)!important;
}
.glass-card .number{color:#ff6244!important;font-size:11px!important}
/* Industry section specifically: clean grid, distinct cards, clear hover motion. */
.industries-v3{position:relative}
.industries-v3 .section-heading{margin-bottom:42px!important}
.industries-v3 .industry-v3-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.industries-v3 .glass-card{min-height:285px!important}
.industries-v3 .glass-card:hover .card-icon{transform:translateY(-3px) rotate(-6deg) scale(1.08)!important}
.industries-v3 .glass-card h3{margin-top:18px!important}
.industries-v3 .glass-card p{margin-bottom:8px!important}
/* Inner pages: make all supporting content unmistakably readable. */
.detail-page,.inner-page{color:#fff!important}
.detail-hero{min-height:600px!important}
.detail-copy>p{max-width:690px!important;color:rgba(247,251,255,.90)!important}
.detail-panel{
background:linear-gradient(145deg,rgba(7,24,39,.98),rgba(18,14,34,.96))!important;
border:1px solid rgba(99,184,255,.28)!important;
box-shadow:0 25px 70px rgba(0,0,0,.40)!important;
}
.detail-panel>small{color:#ff6848!important;font-size:10px!important;font-weight:900!important}
.detail-panel>b{color:#fff!important;font-size:25px!important}
.detail-bars label{color:rgba(247,251,255,.88)!important;font-size:13px!important}
.detail-bars span{color:#ff5a3d!important}
.detail-bars i{background:linear-gradient(90deg,var(--site-red),var(--site-orange),var(--site-blue))!important;box-shadow:0 0 12px rgba(255,45,45,.18)!important}
.detail-feature{min-height:235px!important;padding:27px!important}
.detail-feature>span{color:#ff5a3d!important;font-weight:900!important}
.detail-feature p{color:rgba(247,251,255,.82)!important}
.detail-visual-copy p{color:rgba(247,251,255,.88)!important;font-size:16px!important}
.detail-visual-points>div b{color:#fff!important;font-size:14px!important}
.detail-visual-points>div span{color:#ff5a3d!important}
.detail-visual-points>div svg{color:#63b8ff!important}
/* Visual panels: don't dim the supplied artwork. */
.detail-image-main img,.detail-image-small img,.mosaic-main img,.mosaic-side img,.dark-banner-image img,.contact-visual img,.about-visual-image img{filter:none!important;opacity:1!important}
.detail-image-main,.detail-image-small{border-color:rgba(99,184,255,.26)!important;box-shadow:0 25px 70px rgba(0,0,0,.42)!important}
/* Home visual story: supplied images remain bright and readable. */
.image-story{background:linear-gradient(180deg,#071421 0%,#170914 48%,#07192a 100%)!important}
.image-story-copy>p{color:rgba(247,251,255,.88)!important}
.image-story-steps button b{color:rgba(247,251,255,.68)!important;font-size:11px!important}
.image-story-steps button span{color:#ff5a3d!important;font-size:10px!important}
.image-story-steps button.active b{color:#fff!important}
.image-story-stage{border-color:rgba(99,184,255,.28)!important;box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 55px rgba(46,140,255,.08)!important}
.image-story-panel img{filter:saturate(1.04) contrast(1.03)!important}
.image-story-chip{border-color:rgba(99,184,255,.30)!important;background:rgba(3,13,24,.78)!important;color:#fff!important}
.image-story-label{background:rgba(3,13,24,.82)!important;border-color:rgba(99,184,255,.20)!important}
.image-story-label span{color:#fff!important}
.image-story-label b{color:#63b8ff!important}
/* Hero support copy and proof text. */
.hero-v3-proof span{color:rgba(247,251,255,.82)!important;font-size:13px!important}
.hero-v3-proof svg{color:#63b8ff!important}
/* Form: visible labels, fields and controls on dark background. */
.contact-card{background:linear-gradient(145deg,rgba(8,24,39,.98),rgba(19,12,34,.96))!important;border-color:rgba(99,184,255,.25)!important}
.contact-form input,.contact-form textarea,.service-select-trigger{
background:#06131f!important;color:#fff!important;border-color:rgba(99,184,255,.22)!important;font-size:15px!important;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(205,220,234,.62)!important}
.service-select-trigger .placeholder{color:rgba(205,220,234,.70)!important}
.service-select-trigger .selected{color:#fff!important}
.service-select-menu{background:#071522!important;border-color:rgba(99,184,255,.28)!important;box-shadow:0 25px 70px rgba(0,0,0,.65)!important}
.service-select-menu button{color:#eef7ff!important;font-size:14px!important}
.service-select-menu button:hover,.service-select-menu button.active{background:linear-gradient(90deg,rgba(46,140,255,.18),rgba(255,45,45,.12))!important;color:#fff!important}
/* Footer text readability. */
footer p,footer a,footer span,footer h4{color:rgba(247,251,255,.82)!important}
footer h4{font-size:14px!important;color:#fff!important}
.footer-contact{font-size:13px!important}
/* Responsive card separation and readable supporting text. */
@media(max-width:1100px){
.industries-v3 .industry-v3-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.glass-card{min-height:285px!important}
}
@media(max-width:700px){
.industries-v3 .industry-v3-grid,.services-v3-grid,.detail-cards{grid-template-columns:1fr!important;gap:16px!important}
.glass-card{min-height:245px!important;padding:23px!important}
.glass-card p,.detail-feature p,.detail-copy>p,.inner-hero>p,.section-heading p{font-size:15px!important;line-height:1.7!important}
.detail-feature{min-height:0!important}
}
/* =========================================================
FINAL PRODUCTION READABILITY + RESPONSIVE PASS
========================================================= */
:root{
--site-bg:#020a12;
--site-surface:#071522;
--site-surface-2:#0b1728;
--site-border:rgba(104,190,255,.22);
--site-text:#f7f9fc;
--site-muted:#b8c7d6;
--site-blue:#63b8ff;
--site-red:#ff3030;
--site-orange:#ff6428;
}
html,body,#root{background:var(--site-bg)!important;color:var(--site-text)!important}
body:before{background:radial-gradient(circle at 78% 8%,rgba(255,48,48,.07),transparent 24%),radial-gradient(circle at 8% 48%,rgba(38,136,255,.07),transparent 27%),#020a12!important}
/* Never blur readable copy after the reveal animation has completed. */
.reveal,
.reveal.in-view,
.section-heading,
.section-heading.in-view,
.cinematic-heading,
.cinematic-heading.in-view{
filter:none!important;
}
.reveal{transition:opacity .7s ease,transform .7s ease!important}
.reveal.in-view{opacity:1!important;visibility:visible!important;transform:none!important}
.section-heading p,
.cinematic-heading p,
.section-heading.in-view p,
.cinematic-heading.in-view p,
.visual-v3-heading p,
.faq-layout .section-heading p{
color:#c6d3df!important;
opacity:1!important;
visibility:visible!important;
filter:none!important;
transform:none!important;
animation:none!important;
font-size:16px!important;
line-height:1.75!important;
}
.section-heading h2,
.cinematic-heading h2,
.section-heading.in-view h2,
.cinematic-heading.in-view h2{
opacity:1!important;
visibility:visible!important;
filter:none!important;
transform:none!important;
animation:none!important;
}
/* Readable dark-theme body copy throughout all routes. */
p,li,dd,dt,label,.detail-bars label,.detail-feature p,.story-card p,
.process-card p,.glass-card p,.about-card p,.contact-copy p,
.inner-hero>p,.detail-copy>p,.legal-lead,.legal section p{
color:#c1cfdb!important;
}
.glass-card h3,.process-card h3,.detail-feature h3,.story-card h2,
.about-card h2,.contact-copy h2,.detail-panel>b,.detail-copy h1,
.inner-hero h1,.legal h1,.legal h2{
color:#f7f9fc!important;
}
/* Bright icons: dark backgrounds require light/icon-blue contrast. */
.card-icon,.detail-icon,.story-card>svg,.detail-feature>svg,.checks svg,
.float-card svg,.orbit-core svg,.footer-contact svg,.socials a svg{
color:#dff2ff!important;
}
.card-icon{
background:linear-gradient(145deg,rgba(26,117,184,.24),rgba(80,20,84,.30))!important;
border-color:rgba(99,184,255,.42)!important;
box-shadow:0 0 24px rgba(49,151,255,.10),inset 0 1px rgba(255,255,255,.12)!important;
}
.card-icon svg,.detail-icon svg,.story-card>svg,.detail-feature>svg{filter:drop-shadow(0 0 8px rgba(99,184,255,.35));}
.number,.detail-panel>small,.detail-feature>span,.process-card>b{color:#ff5b2e!important}
/* Cards must remain visibly separate instead of visually merging. */
.glass-card,.process-card,.story-card,.detail-feature,.detail-panel,.about-card,.contact-card{
background:linear-gradient(145deg,rgba(7,25,41,.98),rgba(17,11,31,.96))!important;
border:1px solid rgba(99,184,255,.20)!important;
box-shadow:0 18px 55px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035)!important;
}
.glass-card,.process-card,.story-card,.detail-feature{isolation:isolate}
.glass-card:after,.process-card:after,.story-card:after,.detail-feature:after,.detail-panel:after{z-index:0!important}
.glass-card>*:not(:after),.process-card>*:not(:after),.story-card>*:not(:after),.detail-feature>*:not(:after),.detail-panel>*:not(:after){position:relative;z-index:2}
.glass-card:hover,.process-card:hover,.story-card:hover,.detail-feature:hover,.detail-panel:hover{
border-color:rgba(99,184,255,.48)!important;
box-shadow:0 28px 75px rgba(0,0,0,.42),0 0 35px rgba(38,136,255,.08)!important;
}
.glass-card p,.process-card p,.story-card p,.detail-feature p{font-size:15px!important;line-height:1.72!important}
.glass-card h3,.process-card h3,.detail-feature h3{font-size:20px!important;line-height:1.22!important}
/* Industry grid: fixed spacing, no alternating card overlap. */
.industry-v3-grid,.industries-grid,.services-grid,.services-v3-grid,.detail-cards,.process-v3,.process-grid,.story-grid{
gap:22px!important;
}
.industry-v3-grid .glass-card:nth-child(2n),
.industry-v3-grid .glass-card:nth-child(2n):hover{
transform:none!important;
}
.industry-v3-grid .glass-card:hover{transform:translateY(-8px)!important}
.industry-v3-grid .glass-card{min-height:275px!important}
.services-v3-grid .glass-card{min-height:300px!important}
/* FAQs: remove inherited light-theme/dark-theme conflicts and blur. */
.faq-list{border-top:1px solid rgba(99,184,255,.18)!important}
.faq-item{
background:linear-gradient(145deg,rgba(5,25,42,.96),rgba(28,9,31,.96))!important;
border-bottom:1px solid rgba(99,184,255,.18)!important;
color:#fff!important;
backdrop-filter:none!important;
}
.faq-item:hover,.faq-item.is-open{background:linear-gradient(145deg,rgba(7,38,63,.98),rgba(56,12,42,.98))!important}
.faq-trigger{color:#f7f9fc!important}
.faq-trigger>span:first-child{color:#f7f9fc!important}
.faq-trigger small{color:#ff5b2e!important}
.faq-plus{border-color:rgba(99,184,255,.35)!important;background:rgba(4,18,30,.65)!important}
.faq-plus span{background:#dff2ff!important}
.faq-answer p{color:#c7d4df!important;font-size:16px!important;line-height:1.78!important;filter:none!important;opacity:1!important}
.faq-layout .section-heading h2{color:#f7f9fc!important}
/* Loader: a deliberate premium pause, long enough to actually be perceived. */
.page-loader{animation:loaderExitProduction 1s cubic-bezier(.16,1,.3,1) 2.15s forwards!important}
.loader-line i{animation:loaderLineProduction 2.15s cubic-bezier(.16,1,.3,1) forwards!important}
@keyframes loaderExitProduction{0%{opacity:1;visibility:visible}72%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes loaderLineProduction{from{transform:translateX(-120%)}to{transform:translateX(320%)}}
/* Image story uses the exact client-provided visuals. */
.image-story-panel img,.scroll-story-card img{filter:none!important;opacity:1!important}
.image-story-overlay{background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.60))!important}
/* Form controls. */
.contact-form input,.contact-form textarea,.service-select-trigger{min-height:54px!important;font-size:15px!important;color:#fff!important}
.contact-form textarea{min-height:150px!important}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#9fb1c2!important}
/* Laptop/tablet: keep content large but avoid giant headings. */
@media (max-width:1200px){
.wrap{width:min(1120px,calc(100% - 36px))}
.desktop-nav{gap:20px}
.section-heading p{max-width:760px}
.glass-card p,.process-card p,.detail-feature p{font-size:14px!important}
}
@media (max-width:900px){
.hero-v3{grid-template-columns:1fr!important}
.hero-v3-art{min-height:500px!important}
.industry-v3-grid,.services-v3-grid,.process-v3{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
.industry-v3-grid .glass-card{min-height:260px!important}
.section-heading p,.visual-v3-heading p{font-size:15px!important}
.glass-card p,.process-card p,.detail-feature p{font-size:14px!important}
}
@media (max-width:760px){
.wrap{width:calc(100% - 28px)!important}
.industry-v3-grid,.services-v3-grid,.process-v3,.detail-cards,.industries-grid,.services-grid,.process-grid,.story-grid{grid-template-columns:1fr!important;gap:16px!important}
.industry-v3-grid .glass-card,.services-v3-grid .glass-card{min-height:0!important}
.glass-card,.process-card,.story-card,.detail-feature{padding:22px!important}
.glass-card h3,.process-card h3,.detail-feature h3{font-size:20px!important}
.glass-card p,.process-card p,.story-card p,.detail-feature p{font-size:15px!important;line-height:1.7!important}
.section-heading p,.cinematic-heading p,.visual-v3-heading p{font-size:15px!important;line-height:1.7!important}
.faq-layout{grid-template-columns:1fr!important}
.faq-layout .section-heading{position:static!important}
.faq-answer p{font-size:14px!important;padding:0 42px 22px 36px!important}
.faq-trigger>span:first-child{font-size:16px!important}
.loader-brand{font-size:17px!important}
}
@media (max-width:430px){
.glass-card,.process-card,.story-card,.detail-feature{padding:20px!important;border-radius:18px!important}
.card-icon{width:43px;height:43px}
.glass-card h3,.process-card h3,.detail-feature h3{font-size:19px!important}
.glass-card p,.process-card p,.story-card p,.detail-feature p{font-size:14px!important}
.section-heading p,.cinematic-heading p{font-size:14px!important}
}
/* Absolute final copy safety: no blur/opacity animation on explanatory paragraphs. */
.section-heading p,.cinematic-heading p,.visual-v3-heading p,.faq-layout .section-heading p{animation:none!important;filter:none!important;opacity:1!important;visibility:visible!important;transform:none!important;}
/* FINAL CONTENT + ACCESSIBILITY PASS */
:root{--ai-bg:#020b13;--ai-panel:#071522;--ai-panel2:#101323;--ai-text:#f7f3ef;--ai-muted:#c8d0d8;--ai-red:#ff2028;--ai-orange:#ff5a22;--ai-blue:#1da1ff}
body{background:var(--ai-bg)!important;color:var(--ai-text)!important}
body:before{background:radial-gradient(circle at 80% 0%,rgba(255,32,40,.09),transparent 28%),radial-gradient(circle at 10% 50%,rgba(29,161,255,.08),transparent 32%),var(--ai-bg)!important}
.reveal,.reveal.in-view{filter:none!important;text-shadow:none!important}
.section-heading p,.inner-hero>p,.detail-copy>p,.detail-visual-copy>p,.detail-feature p,.glass-card p,.process-card p,.story-card p,.faq-answer p,.contact-block p,.footer-brand p{color:var(--ai-muted)!important;opacity:1!important;filter:none!important}
.section-heading h2,.inner-hero h1,.detail-copy h1,.detail-visual-copy h2{color:var(--ai-text)!important}
.section-heading h2 span,.inner-hero h1 span,.detail-copy h1 span{color:var(--ai-red)!important}
.eyebrow{color:#ff5a22!important}
.eyebrow i{background:var(--ai-red)!important;box-shadow:0 0 0 7px rgba(255,32,40,.09)!important}
.glass-card,.process-card,.detail-feature,.story-card{background:linear-gradient(145deg,rgba(5,28,48,.92),rgba(22,10,30,.92))!important;border-color:rgba(122,179,220,.22)!important;box-shadow:0 12px 35px rgba(0,0,0,.18)}
.glass-card{min-height:245px}
.glass-card:hover{border-color:rgba(29,161,255,.65)!important;box-shadow:0 25px 70px rgba(0,0,0,.35),0 0 28px rgba(29,161,255,.08)!important}
.card-icon,.detail-icon{color:#f5fbff!important;border-color:rgba(29,161,255,.55)!important;background:linear-gradient(145deg,rgba(29,161,255,.16),rgba(255,32,40,.12))!important;box-shadow:0 0 18px rgba(29,161,255,.08)}
.number{color:#ff5a22!important}
.industry-v3-grid,.services-v3-grid,.detail-cards{gap:22px!important}
.industry-v3-grid .glass-card:nth-child(2n){transform:none!important}
.industry-v3-grid .glass-card:nth-child(2n):hover{transform:translateY(-7px)!important}
.faq-item{border-color:rgba(255,255,255,.16)!important;background:rgba(7,21,34,.85)!important}
.faq-trigger{color:#fff!important}
.faq-trigger small{color:#ff5a22!important}
.faq-answer{background:linear-gradient(90deg,rgba(29,161,255,.08),rgba(255,32,40,.07))!important}
.faq-answer p{color:#d9e1e8!important}
.detail-panel{background:linear-gradient(145deg,rgba(4,25,42,.95),rgba(23,9,28,.95))!important;border-color:rgba(29,161,255,.28)!important}
.detail-panel small{color:#ff5a22!important}.detail-panel b,.detail-bars label{color:#f7f3ef!important}
.detail-bars i{background:linear-gradient(90deg,#ff2028,#ff5a22,#1da1ff)!important}
.detail-final{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:45px;border:1px solid rgba(29,161,255,.25);border-radius:24px;background:linear-gradient(120deg,rgba(7,27,46,.9),rgba(35,9,28,.9));margin-bottom:90px}
.detail-final h2{font-family:"Space Grotesk";font-size:clamp(34px,4vw,60px);line-height:1;letter-spacing:-.05em;margin:12px 0}
.detail-final p{color:var(--ai-muted);font-size:16px;max-width:680px}
.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:120;display:flex;align-items:center;gap:9px;padding:13px 17px;border-radius:999px;background:#19a85b;color:#fff;font-weight:800;font-size:13px;box-shadow:0 12px 35px rgba(0,0,0,.35),0 0 25px rgba(25,168,91,.25);transition:.3s}
.whatsapp-float:hover{transform:translateY(-4px) scale(1.02);background:#20bd68}
.mega{z-index:300!important}.mobile-menu{z-index:301!important}
@media(max-width:1180px){.desktop-nav{gap:10px!important}.desktop-nav>a,.drop-trigger{font-size:11px!important}.nav-cta{padding:12px 14px!important}}
@media(max-width:1050px){.desktop-nav{gap:8px!important}.desktop-nav>a:nth-of-type(4),.desktop-nav>a:nth-of-type(5){display:none}}
@media(max-width:760px){
.wrap{width:calc(100% - 28px)!important}.nav-shell{width:calc(100% - 18px)!important}
.inner-hero h1,.detail-copy h1{font-size:clamp(42px,12vw,64px)!important;line-height:.98!important}
.section-heading h2{font-size:clamp(34px,9vw,48px)!important}
.section-heading p,.inner-hero>p,.detail-copy>p,.detail-visual-copy>p{font-size:15px!important;line-height:1.75!important}
.industry-v3-grid,.services-v3-grid,.detail-cards{grid-template-columns:1fr!important;gap:16px!important}
.glass-card{min-height:0!important;padding:22px!important}
.detail-final{flex-direction:column;align-items:flex-start;padding:28px!important}
.whatsapp-float{right:14px;bottom:14px;padding:13px 15px}.whatsapp-float span{display:none}
.detail-visual{grid-template-columns:1fr!important;gap:30px!important}
.footer-main{grid-template-columns:1fr!important}
}
@media(min-width:761px) and (max-width:1100px){
.industry-v3-grid,.services-v3-grid,.detail-cards{grid-template-columns:repeat(2,1fr)!important}
}
/* LIVE DEMO + FINAL RESPONSIVE PASS */
.hero-serving{display:inline-flex!important;padding:8px 15px!important;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.06);letter-spacing:.08em!important}
.hero-serving i{width:7px!important;height:7px!important;background:#19e6ff!important;box-shadow:none!important}
.hero-v3-copy>p{color:#dce7ef!important;max-width:650px!important;font-size:16px!important;line-height:1.75!important}
.hero-v3-proof span{color:#f4f8fb!important}
.live-demo-hero{text-align:center;padding-top:75px;min-height:820px;display:flex;flex-direction:column;align-items:center}
.live-demo-hero h1{max-width:900px;margin:16px auto 18px!important;font-size:clamp(46px,6vw,72px);line-height:.98;letter-spacing:-.055em}
.live-demo-hero h1 span{color:#1ddcff}
.live-demo-hero>p{max-width:720px;color:#aebdca;font-size:16px;line-height:1.7}
.demo-tags{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:20px 0 28px}
.demo-tags span{font-size:9px;letter-spacing:.12em;font-weight:900;padding:7px 10px;border:1px solid rgba(29,161,255,.35);border-radius:6px;color:#9ddfff;background:rgba(29,161,255,.05)}
.demo-chat{width:min(100%,620px);border:1px solid rgba(29,161,255,.6);border-radius:18px;overflow:hidden;background:#050a18;box-shadow:0 35px 90px rgba(0,0,0,.42),0 0 35px rgba(29,161,255,.08);text-align:left}
.chat-head{height:58px;display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.1);background:linear-gradient(90deg,#0b1830,#11182b)}
.chat-avatar{width:35px;height:35px;border-radius:10px;display:grid;place-items:center;color:#7ce9ff;background:linear-gradient(145deg,#0b3150,#202044);border:1px solid #19bff0}.chat-avatar svg{width:18px}
.chat-head b{font-size:12px;color:#fff;display:block}.chat-head b i{font-style:normal;color:#19e6a5;font-size:8px;margin-left:5px}.chat-head small{display:block;font-size:8px;color:#61d7f4}.chat-head>span{margin-left:auto;color:#1de5ff;font-size:18px}
.chat-body{height:300px;overflow:auto;padding:18px 13px;display:flex;flex-direction:column;gap:13px;background:radial-gradient(circle at 90% 20%,rgba(29,161,255,.07),transparent 35%),#040916}
.chat-row{display:flex;align-items:flex-end;gap:7px}.chat-row.user{justify-content:flex-end}.chat-mini{width:20px;height:20px;flex:none;color:#5fe6ff}.chat-mini svg{width:18px}.chat-bubble{max-width:76%;padding:10px 12px;border-radius:8px 8px 8px 2px;background:#062335;color:#e9f6fc;font-size:11px;line-height:1.5;border:1px solid rgba(29,161,255,.2)}.chat-row.user .chat-bubble{border-radius:8px 8px 2px 8px;background:linear-gradient(135deg,#0bd6e9,#8c73ff);color:#06101a;border:0}
.chat-input{display:flex;gap:8px;padding:9px 11px;border-top:1px solid rgba(255,255,255,.1);background:#071022}.chat-input input{min-width:0;flex:1;height:40px;border-radius:999px;border:1px solid #1d9fd2;background:#151d31;color:#fff;padding:0 15px;outline:none;font-size:11px}.chat-input input:focus{border-color:#21ddff}.chat-input button{width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;background:linear-gradient(135deg,#19e6ff,#8f7aff);color:#06101a;cursor:pointer}.chat-input button svg{width:18px}
@media(max-width:760px){
.hero-v3-copy>p{font-size:15px!important;line-height:1.7!important}.hero-serving{font-size:9px!important;padding:7px 11px!important}.hero-v3-proof{gap:9px!important}.hero-v3-proof span{font-size:10px!important}
.live-demo-hero{padding-top:50px;min-height:0}.live-demo-hero h1{font-size:clamp(38px,11vw,54px)!important}.live-demo-hero>p{font-size:14px!important}.demo-chat{border-radius:15px}.chat-body{height:340px}.chat-bubble{max-width:84%;font-size:11px}
}
@media(max-width:430px){.demo-tags{gap:6px}.demo-tags span{font-size:8px;padding:6px 8px}.chat-body{height:320px;padding:14px 9px}.chat-input{padding:8px}.chat-input input{font-size:10px}.chat-input button{width:38px;height:38px}.hero-v3-proof{display:grid!important;grid-template-columns:1fr!important;justify-items:start!important}}
/* Strategy-call modal + accessible form states */
body.modal-open{overflow:hidden}
.mobile-strategy-btn{border:0;cursor:pointer;font:inherit}
.strategy-modal-backdrop{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;background:rgba(1,6,14,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.strategy-modal{position:relative;width:min(720px,100%);max-height:min(88vh,760px);overflow:auto;padding:34px;border:1px solid rgba(78,177,255,.35);border-radius:24px;background:linear-gradient(145deg,rgba(7,24,39,.98),rgba(18,8,27,.98));box-shadow:0 30px 100px rgba(0,0,0,.55),0 0 60px rgba(255,45,25,.10)}
.strategy-modal h2{margin:10px 0 12px;color:#fff;font-size:clamp(30px,4vw,48px);line-height:1.02;letter-spacing:-.035em}
.strategy-modal>p{margin:0 0 24px;color:#c8d5df;font-size:16px;line-height:1.7}
.modal-close{position:absolute;right:16px;top:16px;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.04);color:#fff;cursor:pointer}
.strategy-form{display:grid;gap:14px}.strategy-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.strategy-form input,.strategy-form textarea{width:100%;box-sizing:border-box;border:1px solid rgba(130,180,220,.28);border-radius:12px;background:#06121d;color:#fff;padding:15px 16px;font:inherit;outline:none}.strategy-form input::placeholder,.strategy-form textarea::placeholder{color:#7f93a3}.strategy-form input:focus,.strategy-form textarea:focus{border-color:#23c8ff;box-shadow:0 0 0 3px rgba(35,200,255,.10)}.strategy-form textarea{min-height:130px;resize:vertical}
.modal-success{display:grid;gap:10px;padding:24px;border:1px solid rgba(38,220,150,.35);border-radius:16px;background:rgba(14,70,54,.22);color:#dfffee}.modal-success svg{width:28px;height:28px;color:#55e6ae}.modal-success strong{font-size:20px;color:#fff}.modal-success span{color:#b7c9d2;line-height:1.6}.modal-success .secondary{justify-self:start;margin-top:8px}
@media(max-width:700px){.strategy-modal-backdrop{padding:12px}.strategy-modal{padding:25px 18px;border-radius:18px;max-height:92vh}.strategy-modal h2{font-size:32px}.strategy-modal>p{font-size:14px;line-height:1.6}.strategy-form .form-row{grid-template-columns:1fr;gap:12px}.modal-close{right:10px;top:10px}.strategy-form input,.strategy-form textarea{font-size:16px}.strategy-form .submit{width:100%;justify-content:center}}
/* FINAL READABILITY PASS: content must never remain blurred. */
.reveal,.reveal.in-view,.cinematic-heading h2,.cinematic-heading p,.visual-card.reveal,.visual-card.reveal.in-view{filter:none!important;}
.cinematic-heading h2,.cinematic-heading p{opacity:1!important;transform:none!important;}
.scroll-story,.scroll-story-sticky,.scroll-story-stage-wrap,.scroll-story-stage-stack{scrollbar-width:none;-ms-overflow-style:none;}
.scroll-story::-webkit-scrollbar,.scroll-story-sticky::-webkit-scrollbar,.scroll-story-stage-wrap::-webkit-scrollbar,.scroll-story-stage-stack::-webkit-scrollbar{display:none;width:0;height:0;}
/* Strong readable accents on dark surfaces. */
.card-icon,.detail-icon,.story-icon,.process-card>b,.story-kicker,.eyebrow{color:#35d9ff;}
.card-icon svg,.detail-icon svg,.story-icon svg{color:#35d9ff;stroke:#35d9ff;}
.eyebrow i{background:#ff3b30!important;box-shadow:0 0 14px rgba(255,59,48,.5)!important;}
.glass-card p,.detail-feature p,.process-card p,.story-card p,.section-heading p,.inner-hero>p,.detail-copy>p,.detail-visual-copy>p,.legal p,.contact-copy p{color:#e7edf5!important;}
.faq-answer p{color:#e7edf5!important;}
/* =========================================================
FINAL UX PASS — clean scrollbars, richer live demo, VIP inner heroes
========================================================= */
html, body, #root { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, #root::-webkit-scrollbar { width: 0; height: 0; display: none; }
.chat-body, .service-select-menu, .mega { scrollbar-width: none !important; }
.chat-body::-webkit-scrollbar, .service-select-menu::-webkit-scrollbar, .mega::-webkit-scrollbar { width:0!important; height:0!important; display:none!important; }
/* Never hide the page itself from scrolling; only the visual scrollbar is hidden. */
body { overflow-x:hidden; overflow-y:auto; }
/* Premium photographic inner-page hero backdrop. Existing page content stays above it. */
.inner-hero-vip,
.detail-hero.inner-hero-vip {
isolation:isolate;
overflow:hidden;
}
.inner-hero-vip:after,
.detail-hero.inner-hero-vip:after {
content:"";
position:absolute;
inset:0;
z-index:0;
background-image:linear-gradient(90deg,rgba(2,7,18,.82) 0%,rgba(2,7,18,.68) 34%,rgba(2,7,18,.35) 66%,rgba(2,7,18,.58) 100%),var(--vip-image);
background-size:cover;
background-position:center;
opacity:.9;
transform:scale(1.035);
filter:saturate(1.08) contrast(1.08);
animation:vipHeroImage 14s ease-in-out infinite alternate;
}
.inner-hero-vip:before,
.detail-hero.inner-hero-vip:before {
content:"";
position:absolute;
inset:0;
z-index:0;
background:radial-gradient(circle at 76% 42%,rgba(18,211,255,.18),transparent 30%),radial-gradient(circle at 28% 60%,rgba(255,47,25,.16),transparent 35%);
pointer-events:none;
}
.detail-hero.inner-hero-vip { min-height:620px; align-items:center; }
.inner-hero-vip > *, .detail-hero.inner-hero-vip > * { position:relative; z-index:1; }
@keyframes vipHeroImage { from{transform:scale(1.045) translate3d(0,0,0)} to{transform:scale(1.09) translate3d(-1.2%, -1%,0)} }
.chat-suggestions{display:flex;gap:7px;flex-wrap:wrap;padding:7px 11px 3px;background:#071022;border-top:1px solid rgba(255,255,255,.05)}
.chat-suggestions button{border:1px solid rgba(29,223,255,.28);background:rgba(29,161,255,.07);color:#bdefff;border-radius:999px;padding:6px 9px;font-size:9px;line-height:1.2;cursor:pointer;transition:.2s}
.chat-suggestions button:hover{background:rgba(29,161,255,.16);border-color:#21ddff;color:#fff;transform:translateY(-1px)}
.chat-typing{display:flex;gap:4px;align-items:center;min-width:48px}
.chat-typing i{width:5px;height:5px;border-radius:50%;background:#6cecff;animation:chatDot 1s ease-in-out infinite}
.chat-typing i:nth-child(2){animation-delay:.12s}.chat-typing i:nth-child(3){animation-delay:.24s}
@keyframes chatDot{0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
@media(max-width:760px){
.inner-hero-vip:after,.detail-hero.inner-hero-vip:after{background-image:linear-gradient(180deg,rgba(2,7,18,.78),rgba(2,7,18,.48) 52%,rgba(2,7,18,.78)),var(--vip-image);background-position:center;opacity:.86}
.detail-hero.inner-hero-vip{min-height:0}
.chat-suggestions{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:7px}
.chat-suggestions::-webkit-scrollbar{display:none}
.chat-suggestions button{flex:none;font-size:8.5px}
}
/* FINAL HERO + CONTACT POLISH */
.direct-contact-location{display:flex;align-items:center;gap:9px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07);color:#e7edf5}.direct-contact-location>svg{width:15px;color:#35d9ff;flex:none}.direct-contact-location small{display:block;color:#8fa5b5;font-size:9px;margin-bottom:3px}.direct-contact-location span{font-size:12px;line-height:1.45}.footer-location{display:flex;gap:8px;align-items:flex-start;color:#cbd7df;font-size:11px;line-height:1.55;margin:14px 0}.footer-location svg{width:15px;color:#35d9ff;flex:none;margin-top:2px}.mega{overflow-y:auto!important;scrollbar-width:none!important;-ms-overflow-style:none!important}.mega::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}.mega-grid{scrollbar-width:none!important;-ms-overflow-style:none!important}.mega-grid::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}.hero-v3-copy h1{font-size:clamp(52px,5.35vw,82px)!important;line-height:.94!important;letter-spacing:-.065em!important;animation:heroTitleClean 1.05s cubic-bezier(.16,1,.3,1) .22s both!important}@keyframes heroTitleClean{from{opacity:0;transform:translate3d(0,34px,0) scale(.97)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}@media(max-width:1050px){.hero-v3-copy h1{font-size:clamp(50px,7.2vw,72px)!important}}@media(max-width:650px){.hero-v3-copy h1{font-size:clamp(40px,10.8vw,56px)!important;line-height:.97!important}.direct-contact-location span{font-size:12px}.footer-location{font-size:12px}}
/* FINAL MOBILE NAV + SCROLL STORY RESPONSIVE PASS */
@media (max-width:760px){
/* The mobile menu contains the same primary navigation destinations as desktop. */
.mobile-menu{
max-height:calc(100svh - 78px)!important;
overflow-y:auto!important;
scrollbar-width:none!important;
-ms-overflow-style:none!important;
padding:8px!important;
overscroll-behavior:contain;
}
.mobile-menu::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.mobile-sub{
scrollbar-width:none!important;
-ms-overflow-style:none!important;
max-height:38svh!important;
overflow-y:auto!important;
}
.mobile-sub::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.mobile-menu>a,.mobile-section>button{font-size:14px!important;min-height:48px!important;color:#f7fbff!important}
.mobile-sub a{font-size:12px!important;color:#e8f5fb!important}
.mobile-call-btn{display:flex!important;color:#fff!important;background:linear-gradient(135deg,#ff1e2d,#ff641f)!important}
.mobile-strategy-link{width:100%;min-height:46px;margin:8px 0 2px;border-radius:11px!important;justify-content:center;cursor:pointer;font:inherit}
/* Make form success feedback impossible to miss on the dark theme. */
.success{
display:flex!important;align-items:flex-start!important;gap:9px!important;
padding:14px 15px!important;
border:1px solid rgba(52,231,157,.42)!important;
background:linear-gradient(135deg,rgba(10,91,63,.34),rgba(5,48,42,.42))!important;
color:#f1fff8!important;
font-size:12px!important;line-height:1.55!important;
box-shadow:0 0 24px rgba(38,220,150,.08)!important;
}
.success svg{width:18px!important;height:18px!important;flex:none!important;color:#55e6ae!important}
/* Keep the pinned image-story interaction alive on phones, while fitting the
copy, step navigation and visual into one viewport. */
.image-story{
height:calc(100svh * 4.15)!important;
min-height:0!important;
padding:0!important;
overflow:clip!important;
}
.image-story-sticky{
position:sticky!important;
top:0!important;
height:100svh!important;
min-height:0!important;
overflow:hidden!important;
}
.image-story-inner{
height:100%!important;
display:grid!important;
grid-template-columns:1fr!important;
grid-template-rows:minmax(0,42%) minmax(0,58%)!important;
gap:0!important;
padding:76px 18px 14px!important;
align-items:stretch!important;
}
.image-story-copy{margin:0!important;max-width:none!important;min-width:0!important}
.image-story-copy h2{font-size:clamp(35px,10.6vw,44px)!important;line-height:.94!important;margin:9px 0 11px!important}
.image-story-copy>p{font-size:12.5px!important;line-height:1.55!important;max-width:330px!important;color:#d9e5ed!important}
.image-story-steps{
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:4px!important;
margin-top:16px!important;
width:100%!important;
}
.image-story-steps button{
min-width:0!important;
display:block!important;
padding:8px 3px!important;
border-bottom:2px solid rgba(255,255,255,.11)!important;
overflow:hidden!important;
}
.image-story-steps button span{font-size:9px!important}
.image-story-steps button b{display:block!important;font-size:7px!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.image-story-steps button.active{transform:none!important;border-bottom-color:#ff4c30!important;color:#fff!important}
.image-story-steps button:before{display:none!important}
.image-story-stage{
width:100%!important;
height:auto!important;
min-height:0!important;
border-radius:21px!important;
align-self:stretch!important;
}
.image-story-panel{position:absolute!important}
.image-story-panel img{object-position:center!important}
.image-story-label{left:12px!important;bottom:12px!important}
.image-story-chip{right:12px!important;top:12px!important;padding:8px 10px!important;font-size:8px!important}
.image-story-orbit{opacity:.2!important;width:125vw!important;right:-50vw!important}
}
@media(max-width:430px){
.image-story-inner{padding-left:14px!important;padding-right:14px!important;grid-template-rows:minmax(0,44%) minmax(0,56%)!important}
.image-story-copy h2{font-size:34px!important}
.image-story-copy>p{font-size:12px!important;max-width:305px!important}
.image-story-steps{margin-top:12px!important}
.image-story-steps button{padding:7px 2px!important}
.image-story-steps button span{font-size:8px!important}
.image-story-steps button b{font-size:6.5px!important}
}
/* =========================================================
FINAL READABILITY + MOBILE STORY PASS
========================================================= */
/* Inner-page VIP heroes: make the supplied artwork visibly present. */
.inner-hero-vip,
.detail-hero.inner-hero-vip{isolation:isolate;overflow:hidden;background:#06131f!important;}
.inner-hero-vip:after,
.detail-hero.inner-hero-vip:after{
content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
background-image:
linear-gradient(90deg,rgba(2,8,15,.72) 0%,rgba(2,8,15,.40) 46%,rgba(2,8,15,.18) 100%),
linear-gradient(180deg,rgba(2,8,15,.18),rgba(2,8,15,.30)),
var(--vip-image);
background-size:cover,cover,cover;
background-position:center,center,center;
background-repeat:no-repeat;
opacity:1!important;
filter:none!important;
transform:scale(1.015);
}
.inner-hero-vip:before,
.detail-hero.inner-hero-vip:before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(circle at 78% 38%,rgba(38,183,255,.12),transparent 34%),radial-gradient(circle at 24% 70%,rgba(255,48,31,.12),transparent 30%);
}
.inner-hero-vip h1,.detail-hero.inner-hero-vip h1,
.inner-hero-vip>p,.detail-hero.inner-hero-vip>p,
.inner-hero-vip .eyebrow,.detail-hero.inner-hero-vip .eyebrow,
.inner-hero-vip .hero-actions,.detail-hero.inner-hero-vip .hero-actions{position:relative;z-index:3}
/* Success state must read clearly on the dark UI. */
.success{
color:#eafff5!important;
background:linear-gradient(135deg,rgba(0,190,140,.13),rgba(0,120,255,.08))!important;
border:1px solid rgba(54,235,180,.42)!important;
box-shadow:0 0 24px rgba(54,235,180,.08),inset 0 1px rgba(255,255,255,.05)!important;
font-size:13px!important;font-weight:700!important;line-height:1.5!important;
}
.success svg{color:#49f0bd!important;flex:none;filter:drop-shadow(0 0 8px rgba(73,240,189,.35));}
.form-error{color:#ffd7d2!important;background:rgba(255,55,42,.09)!important;border-color:rgba(255,75,58,.35)!important;}
/* Hide scrollbars without disabling scrolling. */
html,body{scrollbar-width:none!important;-ms-overflow-style:none!important;}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;}
.mega,.mega-grid,.mobile-menu,.mobile-sub,.service-select-menu,.image-story-steps{scrollbar-width:none!important;-ms-overflow-style:none!important;}
.mega::-webkit-scrollbar,.mega-grid::-webkit-scrollbar,.mobile-menu::-webkit-scrollbar,.mobile-sub::-webkit-scrollbar,.service-select-menu::-webkit-scrollbar,.image-story-steps::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;}
/* Home hero: slightly smaller and cleaner motion. */
.hero-v3-copy h1{
font-size:clamp(48px,5vw,76px)!important;
line-height:.96!important;
animation:homeHeroRise .95s cubic-bezier(.16,1,.3,1) .15s both!important;
}
@keyframes homeHeroRise{
from{opacity:0;transform:translate3d(0,28px,0) scale(.975);filter:blur(0)}
to{opacity:1;transform:none;filter:none}
}
/* Mobile navigation: keep the important CTA reachable and visible. */
@media(max-width:760px){
.mobile-menu{
max-height:calc(100dvh - 88px)!important;
overflow-y:auto!important;
overscroll-behavior:contain;
padding-bottom:92px!important;
}
.mobile-menu .mobile-call-btn,
.mobile-menu .mobile-strategy-btn{
position:relative!important;
min-height:52px!important;
z-index:2!important;
}
.mobile-menu .mobile-call-btn{margin-top:12px!important;}
.mobile-menu .mobile-strategy-btn{margin-top:8px!important;width:100%!important;}
.hamb{flex:none!important;visibility:visible!important;opacity:1!important;}
.nav{min-width:0!important;}
.logo{min-width:0!important;overflow:hidden;text-overflow:ellipsis;}
.logo>span:last-child{overflow:hidden;text-overflow:ellipsis;}
}
/* Image story on phones: steps sit in their own compact rail ABOVE the image. */
@media(max-width:600px){
.image-story{padding:88px 0 72px!important;overflow:hidden!important;}
.image-story-inner{display:flex!important;flex-direction:column!important;align-items:stretch!important;padding:0 16px!important;}
.image-story-copy{margin-bottom:18px!important;max-width:none!important;}
.image-story-copy h2{font-size:36px!important;line-height:.98!important;margin:12px 0 14px!important;}
.image-story-copy>p{font-size:13px!important;line-height:1.65!important;margin-bottom:16px!important;}
.image-story-steps{
display:flex!important;gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important;
width:100%!important;padding:4px 0 9px!important;margin:0 0 14px!important;
border-bottom:1px solid rgba(255,255,255,.10)!important;
}
.image-story-steps button{
flex:0 0 auto!important;min-width:70px!important;width:auto!important;
display:flex!important;flex-direction:column!important;align-items:flex-start!important;
justify-content:center!important;padding:7px 8px!important;border:1px solid rgba(255,255,255,.08)!important;
border-radius:10px!important;background:rgba(3,13,22,.62)!important;transform:none!important;
}
.image-story-steps button.active{
border-color:rgba(53,217,255,.65)!important;
background:linear-gradient(135deg,rgba(3,44,77,.75),rgba(87,2,17,.30))!important;
box-shadow:0 0 18px rgba(53,217,255,.10)!important;
}
.image-story-steps button:before{display:none!important;}
.image-story-steps button span{font-size:9px!important;color:#ff6848!important;line-height:1!important;}
.image-story-steps button b{font-size:8px!important;letter-spacing:.08em!important;margin-top:5px!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;color:#eaf4fa!important;}
.image-story-stage{width:100%!important;height:390px!important;border-radius:20px!important;overflow:hidden!important;}
.image-story-panel img{object-fit:cover!important;object-position:center!important;}
.image-story-chip{right:12px!important;top:12px!important;padding:8px 10px!important;font-size:8px!important;}
.image-story-label{left:14px!important;top:14px!important;}
.image-story-caption{left:16px!important;right:16px!important;bottom:18px!important;}
.image-story-caption h3{font-size:24px!important;line-height:1.02!important;}
}
@media(min-width:601px) and (max-width:900px){
.image-story-steps{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px!important;}
.image-story-stage{height:500px!important;}
}
@media(max-width:600px){
.hero-v3-copy h1{font-size:clamp(38px,10.2vw,52px)!important;line-height:.98!important;}
.hero-v3-copy h1 span{display:inline!important;}
}
/* FINAL MOBILE + HERO TYPOGRAPHY PASS */
@media (min-width:901px){
.hero-v3-copy h1{font-size:clamp(54px,5.25vw,74px)!important;line-height:.96!important;letter-spacing:-.065em!important;}
}
@media (max-width:900px){
.hero-v3-copy h1{font-size:clamp(38px,8.8vw,58px)!important;line-height:.98!important;letter-spacing:-.055em!important;}
}
@media (max-width:600px){
.hero-v3-copy h1{font-size:clamp(34px,8.8vw,46px)!important;line-height:1.0!important;letter-spacing:-.045em!important;}
.hero-v3{padding-top:92px!important;}
.hero-v3-copy{max-width:100%!important;}
.hero-v3-copy>p{font-size:14px!important;line-height:1.65!important;}
.hero-actions{gap:8px!important;}
.hero-actions .primary,.hero-actions .secondary{min-height:48px!important;padding:12px 15px!important;font-size:12px!important;}
/* Keep mobile header CTAs permanently reachable while the menu itself scrolls. */
.mobile-menu{padding-bottom:118px!important;}
.mobile-menu .mobile-call-btn{
position:sticky!important;bottom:62px!important;z-index:50!important;
margin-top:12px!important;box-shadow:0 10px 28px rgba(255,30,45,.22)!important;
}
.mobile-menu .mobile-strategy-btn{
position:sticky!important;bottom:4px!important;z-index:51!important;
background:linear-gradient(135deg,#06233a,#2b0d2d)!important;
border:1px solid rgba(53,217,255,.55)!important;color:#fff!important;
box-shadow:0 10px 28px rgba(0,0,0,.35)!important;
}
}
/* FINAL DESKTOP HERO HEADING POLISH */
@media (min-width: 1001px){
.hero-v3-copy h1{
font-size:clamp(52px,5.15vw,78px)!important;
line-height:.94!important;
letter-spacing:-.065em!important;
max-width:650px!important;
animation:heroHeadingIn 1.05s cubic-bezier(.16,1,.3,1) .35s both;
}
.hero-v3-copy h1 span{
display:block;
animation:heroHeadingLineIn 1.05s cubic-bezier(.16,1,.3,1) .52s both;
}
}
@keyframes heroHeadingIn{
from{opacity:0;transform:translate3d(0,34px,0) scale(.985);filter:blur(8px)}
to{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
}
@keyframes heroHeadingLineIn{
from{opacity:0;transform:translate3d(0,22px,0)}
to{opacity:1;transform:translate3d(0,0,0)}
}
@media (prefers-reduced-motion:reduce){
.hero-v3-copy h1,.hero-v3-copy h1 span{animation:none!important}
}
/* FINAL FULL-HERO ARTWORK PASS — image fills the complete hero section */
.inner-hero-vip,
.detail-hero.inner-hero-vip{
background-image:var(--vip-image)!important;
background-size:cover!important;
background-position:center center!important;
background-repeat:no-repeat!important;
position:relative!important;
isolation:isolate!important;
overflow:hidden!important;
}
.inner-hero-vip:after,
.detail-hero.inner-hero-vip:after{
inset:0!important;
width:auto!important;
height:auto!important;
background-image:
linear-gradient(90deg,rgba(2,8,15,.64) 0%,rgba(2,8,15,.38) 48%,rgba(2,8,15,.20) 100%)!important;
background-color:transparent!important;
background-size:cover!important;
background-position:center!important;
background-repeat:no-repeat!important;
opacity:1!important;
transform:none!important;
animation:none!important;
z-index:0!important;
pointer-events:none!important;
}
.inner-hero-vip:before,
.detail-hero.inner-hero-vip:before{
inset:0!important;
background:
linear-gradient(180deg,rgba(2,8,15,.10),rgba(2,8,15,.22)),
radial-gradient(circle at 78% 35%,rgba(31,184,255,.10),transparent 35%),
radial-gradient(circle at 18% 72%,rgba(255,45,35,.10),transparent 32%)!important;
z-index:0!important;
pointer-events:none!important;
}
.inner-hero-vip > *,
.detail-hero.inner-hero-vip > *{position:relative!important;z-index:2!important;}
/* Keep the complete artwork visible on smaller screens too. */
@media(max-width:760px){
.inner-hero-vip,
.detail-hero.inner-hero-vip{
background-position:center center!important;
background-size:cover!important;
}
.inner-hero-vip:after,
.detail-hero.inner-hero-vip:after{
background-image:linear-gradient(180deg,rgba(2,8,15,.54),rgba(2,8,15,.28) 52%,rgba(2,8,15,.48))!important;
}
}
/* FINAL MOBILE STORY + CTA FIX */
@media (max-width:600px){
/* Mobile CTAs belong in normal menu flow, directly after Contact. */
.mobile-menu{padding-bottom:14px!important;}
.mobile-menu .mobile-call-btn{
position:static!important;
left:auto!important;
right:auto!important;
bottom:auto!important;
width:100%!important;
min-height:50px!important;
margin:14px 0 0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
background:linear-gradient(135deg,#ff111f 0%,#ff3b16 58%,#ff641f 100%)!important;
border:1px solid rgba(255,255,255,.12)!important;
color:#fff!important;
box-shadow:0 14px 35px rgba(255,30,45,.35)!important;
}
.mobile-menu .mobile-strategy-btn{
position:static!important;
left:auto!important;
right:auto!important;
bottom:auto!important;
width:100%!important;
min-height:50px!important;
margin:10px 0 2px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
background:linear-gradient(135deg,#ff111f 0%,#ff3b16 58%,#ff641f 100%)!important;
border:1px solid rgba(255,255,255,.16)!important;
color:#fff!important;
box-shadow:0 14px 35px rgba(255,30,45,.28)!important;
}
/* Show all five story tabs at once — no clipped fourth/fifth tab. */
.image-story-steps{
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:5px!important;
width:100%!important;
overflow:visible!important;
padding:4px 0 9px!important;
margin:0 0 14px!important;
}
.image-story-steps button{
min-width:0!important;
width:100%!important;
flex:initial!important;
padding:8px 3px!important;
border-radius:9px!important;
align-items:center!important;
text-align:center!important;
overflow:hidden!important;
}
.image-story-steps button span{
font-size:8px!important;
}
.image-story-steps button b{
width:100%!important;
font-size:7px!important;
line-height:1.15!important;
letter-spacing:.03em!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
text-align:center!important;
}
}
/* FINAL MOBILE MENU CTA ORDER OVERRIDE — CTAs must appear after Contact, never fixed over nav. */
@media (max-width:600px){
.mobile-menu{display:flex!important;flex-direction:column!important;overflow-y:auto!important;overflow-x:hidden!important;padding-bottom:16px!important;}
.mobile-menu .mobile-call-btn,
.mobile-menu .mobile-strategy-btn{
position:static!important;
inset:auto!important;
transform:none!important;
flex:0 0 auto!important;
width:100%!important;
box-sizing:border-box!important;
}
.mobile-menu .mobile-call-btn{margin:14px 0 0!important;}
.mobile-menu .mobile-strategy-btn{margin:10px 0 2px!important;}
}
/* FINAL MOBILE IMAGE-STORY SPACE FIX
The mobile story should end immediately after its visual, not reserve
several extra viewport-heights for desktop pinning. */
@media (max-width:600px){
.image-story{
height:auto!important;
min-height:0!important;
padding:88px 0 52px!important;
overflow:hidden!important;
}
.image-story-sticky{
position:relative!important;
top:auto!important;
height:auto!important;
min-height:0!important;
overflow:visible!important;
}
.image-story-inner{
height:auto!important;
min-height:0!important;
display:flex!important;
flex-direction:column!important;
grid-template-rows:none!important;
}
.image-story-copy{flex:none!important;}
.image-story-stage{
flex:none!important;
height:390px!important;
min-height:390px!important;
margin-bottom:0!important;
}
}
@media (max-width:430px){
.image-story{padding-bottom:44px!important;}
.image-story-stage{height:340px!important;min-height:340px!important;}
}
/* =========================================================
ULTRA MOBILE RESPONSIVE — 320px SAFE
Remove the oversized visual overlay and prevent horizontal
clipping/overflow on the story and every major section.
========================================================= */
@media (max-width:760px){
html,body,#root{width:100%;max-width:100%;overflow-x:hidden}
.wrap{width:100%;max-width:100%;padding-left:16px;padding-right:16px}
/* The large desktop orbit/blue oval must not sit over the mobile story image. */
.scroll-story-visual{display:none!important}
.image-story-stage{border:0!important;box-shadow:none!important;background:transparent;border-radius:20px;}
.image-story-panel{border:0!important;outline:0!important;}
.image-story-panel img{border-radius:20px;}
/* Story tabs: all five remain visible without horizontal overflow. */
.image-story-steps{width:100%;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;overflow:visible}
.image-story-steps button{min-width:0;width:100%;padding:9px 3px}
.image-story-steps button span{font-size:8px;letter-spacing:.04em}
.image-story-steps button b{font-size:7px;letter-spacing:.02em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Never let cards/panels create an invisible desktop-width track. */
.image-story-inner,.image-story-copy,.image-story-stage,
.cards-grid,.industries-grid,.services-grid,.about-card,.contact-card,
.detail-panel,.detail-feature,.process-card,.glass-card,.story-card{max-width:100%;min-width:0}
/* Prevent long words/labels from pushing the viewport wider. */
h1,h2,h3,h4,p,a,b,span,li,button,label{overflow-wrap:anywhere}
/* Comfortable mobile section spacing without giant reserved heights. */
.section{padding-top:64px;padding-bottom:64px}
.image-story{padding:64px 0 70px!important}
.image-story-inner{padding-left:16px!important;padding-right:16px!important}
.image-story-stage{height:auto!important;aspect-ratio:1.42/1;min-height:0!important;margin-top:18px}
/* Keep mobile hero content inside the viewport. */
.hero,.hero-v3{width:100%;max-width:100%;padding-left:16px;padding-right:16px}
.hero-v3 h1{max-width:100%;word-break:normal}
/* Mobile menu must fit even on 320px devices. */
.nav-shell{width:calc(100% - 12px)!important;max-width:calc(100% - 12px)!important}
.mobile-menu{width:100%;max-width:100%;overflow-x:hidden!important}
.mobile-menu .nav-cta{width:100%;max-width:100%;white-space:normal}
}
@media (max-width:480px){
.wrap{padding-left:13px;padding-right:13px}
.nav-shell{width:calc(100% - 8px)!important}
.nav{padding:0 9px!important}
.logo{font-size:14px!important;min-width:0}
.logo-mark{width:34px!important;height:34px!important;flex:0 0 34px}
.hamb{width:38px!important;height:38px!important;flex:0 0 38px}
.hero,.hero-v3{padding-left:13px;padding-right:13px}
.image-story-inner{padding-left:13px!important;padding-right:13px!important}
.image-story-copy h2{font-size:34px!important;line-height:.98}
.image-story-copy>p{font-size:13px;line-height:1.65}
.image-story-stage{aspect-ratio:1.35/1;border-radius:18px}
.image-story-panel img{border-radius:18px}
.image-story-steps{gap:3px}
.image-story-steps button{padding:8px 2px}
.image-story-steps button span{font-size:7px}
.image-story-steps button b{font-size:6.5px}
.section-heading h2{font-size:38px!important}
.section-heading p{font-size:13px!important;line-height:1.65}
.glass-card h3,.process-card h3,.story-card h3{font-size:17px!important}
.glass-card p,.process-card p,.story-card p{font-size:12px!important}
}
@media (max-width:360px){
.wrap{padding-left:10px;padding-right:10px}
.nav-shell{width:calc(100% - 6px)!important}
.nav{height:56px!important;padding:0 7px!important}
.logo{font-size:12.5px!important;gap:6px!important}
.logo-mark{width:31px!important;height:31px!important;flex-basis:31px}
.hamb{width:36px!important;height:36px!important;flex-basis:36px}
.hero,.hero-v3{padding-left:10px;padding-right:10px}
.image-story-inner{padding-left:10px!important;padding-right:10px!important}
.image-story-copy h2{font-size:30px!important}
.image-story-stage{aspect-ratio:1.25/1}
.image-story-steps{gap:2px}
.image-story-steps button{padding:7px 1px}
.image-story-steps button span{font-size:6.5px}
.image-story-steps button b{font-size:5.8px;letter-spacing:0}
/* Keep buttons/forms inside 320px with no sideways scroll. */
.hero-actions,.form-grid,.contact-form,.contact-copy,.footer-grid{min-width:0;max-width:100%}
input,select,textarea{max-width:100%;min-width:0}
}
@media (max-width:320px){
.image-story-copy h2{font-size:28px!important}
.image-story-copy>p{font-size:12px!important}
.image-story-stage{aspect-ratio:1.18/1}
.image-story-steps button b{font-size:5.4px}
.image-story-steps button span{font-size:6px}
}
/* FINAL MOBILE STORY OVERLAY REMOVAL
The large dark/blue oval belongs to the decorative scroll-story stage.
On narrow screens it must never cover the story artwork. */
@media (max-width: 760px){
.scroll-story-visual,
.scroll-story-visual .scroll-story-stage,
.scroll-story-visual .stage-core,
.scroll-story-visual .stage-ring,
.scroll-story-visual .stage-dot{
display:none!important;
visibility:hidden!important;
opacity:0!important;
pointer-events:none!important;
}
.scroll-story-stage-wrap{overflow:visible!important;}
.scroll-story-card{z-index:2!important;}
}
@media (max-width: 430px){
.scroll-story-stage-wrap{height:300px!important;max-height:300px!important;}
.scroll-story-stage-stack{height:260px!important;max-height:260px!important;}
}
@media (max-width: 360px){
.scroll-story-stage-wrap{height:275px!important;max-height:275px!important;}
.scroll-story-stage-stack{height:235px!important;max-height:235px!important;}
}
@media (max-width: 320px){
.scroll-story-stage-wrap{height:255px!important;max-height:255px!important;}
.scroll-story-stage-stack{height:220px!important;max-height:220px!important;}
}
/* FINAL ALL-SCREEN RESPONSIVE PASS — 320px through tablet */
html,body,#root{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%}
@media (max-width: 900px){
/* The desktop pinned story choreography is intentionally converted to a normal flow
layout on tablets/phones. This prevents the decorative blue/dark stage core from
covering artwork and prevents the desktop scroll height from creating blank space. */
.scroll-story{height:auto!important;min-height:0!important;overflow:visible!important}
.scroll-story-sticky{position:relative!important;top:auto!important;height:auto!important;overflow:visible!important}
.scroll-story-inner{height:auto!important;min-height:0!important;display:block!important;padding:70px 22px!important}
.scroll-story-copy{max-width:100%!important;margin:0 0 28px!important;padding-top:0!important}
.scroll-story-stage-wrap{height:auto!important;min-height:0!important;margin-top:0!important;overflow:visible!important}
.scroll-story-stage-stack{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;transform:none!important;display:block!important}
.scroll-story-card{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:300px!important;margin:0!important;transform:none!important;opacity:0!important;filter:none!important;display:none!important;}
.scroll-story-card.is-active{display:block!important;opacity:1!important;transform:none!important;filter:none!important}
.scroll-story-visual{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
.scroll-story-card:before{display:none!important}
.scroll-story-progress{margin-top:24px!important}
}
@media (max-width: 600px){
.scroll-story-inner{padding:58px 16px!important}
.scroll-story-copy h2{font-size:36px!important;line-height:.98!important}
.scroll-story-copy p{font-size:13px!important;line-height:1.65!important}
.scroll-story-card{min-height:260px!important;padding:20px!important;border-radius:20px!important}
.scroll-story-card .story-icon{margin:30px 0 16px!important;width:46px!important;height:46px!important}
.scroll-story-card h3{font-size:23px!important}
.scroll-story-card p{font-size:12px!important;line-height:1.65!important}
}
/* Image-story: preserve the 5-step visual story, but make it a compact normal-flow
component below desktop so it cannot reserve multiple viewport heights. */
@media (max-width: 900px){
.image-story{height:auto!important;min-height:0!important;padding:72px 0 64px!important;overflow:hidden!important}
.image-story-sticky{position:relative!important;top:auto!important;height:auto!important;overflow:visible!important}
.image-story-inner{height:auto!important;display:block!important;padding:0 22px!important}
.image-story-copy{margin-bottom:22px!important}
.image-story-orbit{display:none!important}
.image-story-stage{height:auto!important;aspect-ratio:1.42/1!important;min-height:0!important;width:100%!important;border-radius:22px!important}
.image-story-panel{position:absolute!important;inset:0!important}
.image-story-panel img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}
.image-story-steps{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important}
.image-story-steps button{min-width:0!important;width:100%!important;overflow:hidden!important}
.image-story-steps button b{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
}
@media (max-width: 600px){
.image-story-inner{padding:0 16px!important}
.image-story-copy h2{font-size:36px!important;line-height:.98!important}
.image-story-copy>p{font-size:13px!important;line-height:1.65!important}
.image-story-stage{aspect-ratio:1.34/1!important;border-radius:20px!important}
.image-story-label{left:12px!important;bottom:12px!important;max-width:calc(100% - 24px)!important}
.image-story-label span,.image-story-label b{font-size:7px!important}
.image-story-chip{right:12px!important;top:12px!important;padding:8px 10px!important;font-size:8px!important}
.image-story-steps button{padding:8px 2px!important}
.image-story-steps button span{font-size:7px!important}
.image-story-steps button b{font-size:6.5px!important;letter-spacing:.04em!important}
}
@media (max-width: 430px){
.image-story{padding:58px 0 52px!important}
.image-story-inner{padding:0 12px!important}
.image-story-copy{margin-bottom:18px!important}
.image-story-copy h2{font-size:31px!important}
.image-story-copy>p{font-size:12px!important}
.image-story-steps{gap:2px!important}
.image-story-steps button{padding:7px 1px!important;border-radius:9px!important}
.image-story-steps button span{font-size:6.5px!important}
.image-story-steps button b{font-size:5.7px!important}
.image-story-stage{aspect-ratio:1.28/1!important;border-radius:18px!important}
.image-story-chip{font-size:7px!important;padding:7px 8px!important}
}
@media (max-width: 360px){
.image-story-inner{padding:0 10px!important}
.image-story-copy h2{font-size:28px!important}
.image-story-steps button b{font-size:5.2px!important}
.image-story-steps button span{font-size:6px!important}
.image-story-stage{aspect-ratio:1.2/1!important}
.scroll-story-inner{padding-left:10px!important;padding-right:10px!important}
}
@media (max-width: 320px){
.image-story-copy h2{font-size:26px!important}
.image-story-copy>p{font-size:11.5px!important}
.image-story-steps{gap:1px!important}
.image-story-steps button{padding:6px 0!important}
.image-story-steps button span{font-size:5.5px!important}
.image-story-steps button b{font-size:4.8px!important}
.image-story-stage{aspect-ratio:1.16/1!important}
.scroll-story-card{min-height:240px!important}
}
/* Global tablet/phone guardrails for every inner page. */
@media (max-width: 900px){
.detail-page,.inner-page{padding-top:86px!important}
.detail-hero{min-height:0!important;padding-top:55px!important;padding-bottom:35px!important;gap:28px!important}
.detail-hero.inner-hero-vip{min-height:420px!important}
.detail-copy h1,.inner-hero h1{font-size:clamp(42px,8vw,68px)!important;line-height:.98!important}
.detail-copy>p,.inner-hero>p{font-size:14px!important;line-height:1.7!important}
.detail-panel{width:100%!important;box-sizing:border-box!important}
.detail-visual{grid-template-columns:1fr!important;gap:24px!important}
.detail-visual-image{min-height:300px!important}
.detail-cards,.process-v3{grid-template-columns:1fr 1fr!important}
.about-card{grid-template-columns:1fr!important;padding:30px!important}
.footer-main{grid-template-columns:1fr 1fr!important}
}
@media (max-width: 600px){
.detail-page,.inner-page{padding-top:72px!important}
.detail-hero.inner-hero-vip{min-height:0!important;padding:72px 16px 45px!important}
.detail-copy h1,.inner-hero h1{font-size:clamp(36px,11vw,52px)!important}
.detail-icon{width:52px!important;height:52px!important}
.detail-panel{padding:20px!important;border-radius:18px!important}
.detail-cards,.process-v3{grid-template-columns:1fr!important}
.detail-visual-image{min-height:250px!important}
.about-card{padding:22px!important}
.footer-main{grid-template-columns:1fr!important}
.primary,.secondary,.hero-actions .primary,.hero-actions .secondary{max-width:100%!important}
}
/* FINAL HOME HERO HEADING SCALE + CINEMATIC TITLE MOTION */
@media (min-width:1051px){
.hero-v3-copy h1{
font-size:clamp(56px,5.35vw,76px)!important;
line-height:.93!important;
letter-spacing:-.065em!important;
animation:heroTitleReveal 1.15s cubic-bezier(.16,1,.3,1) both .08s;
transform-origin:left center;
}
.hero-v3-copy h1 span{
animation:heroTitleGlow 1.25s cubic-bezier(.16,1,.3,1) both .22s;
}
}
@keyframes heroTitleReveal{
0%{opacity:0;transform:translate3d(0,26px,0) scale(.975);filter:blur(7px);letter-spacing:-.025em}
55%{opacity:1;filter:blur(0)}
100%{opacity:1;transform:none;filter:blur(0);letter-spacing:-.065em}
}
@keyframes heroTitleGlow{
0%{opacity:.25;transform:translate3d(18px,8px,0);filter:blur(5px);text-shadow:0 0 0 rgba(255,255,255,0)}
100%{opacity:1;transform:none;filter:blur(0);text-shadow:0 0 32px rgba(126,49,16,.12)}
}
@media(prefers-reduced-motion:reduce){.hero-v3-copy h1,.hero-v3-copy h1 span{animation:none!important}}
/* FINAL — HOME HERO DESKTOP 58PX + VISIBLE TITLE ANIMATION */
@media (min-width: 1001px){
.home-premium .hero-v3-copy h1{
font-size:58px !important;
line-height:.94 !important;
letter-spacing:-.065em !important;
opacity:0;
transform:translate3d(0,34px,0);
filter:blur(10px);
animation:MarketAIHeroTitleIn 1.25s cubic-bezier(.16,1,.3,1) .18s forwards !important;
will-change:transform,opacity,filter;
}
.home-premium .hero-v3-copy h1 span{
display:block;
opacity:0;
transform:translate3d(22px,12px,0);
filter:blur(7px);
animation:MarketAIHeroAccentIn 1.05s cubic-bezier(.16,1,.3,1) .48s forwards !important;
will-change:transform,opacity,filter;
}
}
@keyframes MarketAIHeroTitleIn{
0%{opacity:0;transform:translate3d(0,34px,0) scale(.97);filter:blur(10px)}
62%{opacity:1;transform:translate3d(0,-3px,0) scale(1.005);filter:blur(0)}
100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
}
@keyframes MarketAIHeroAccentIn{
0%{opacity:0;transform:translate3d(22px,12px,0);filter:blur(7px);text-shadow:0 0 0 transparent}
65%{opacity:1;transform:translate3d(-2px,-1px,0);filter:blur(0);text-shadow:0 0 26px rgba(126,49,16,.18)}
100%{opacity:1;transform:translate3d(0,0,0);filter:blur(0);text-shadow:0 0 18px rgba(126,49,16,.10)}
}
@media (max-width:1000px){
.home-premium .hero-v3-copy h1{animation:MarketAIHeroTitleIn 1.15s cubic-bezier(.16,1,.3,1) .12s both !important}
.home-premium .hero-v3-copy h1 span{animation:MarketAIHeroAccentIn 1s cubic-bezier(.16,1,.3,1) .4s both !important}
}
@media (max-width:650px){
.home-premium .hero-v3-copy h1{font-size:44px !important}
}
@media (max-width:360px){
.home-premium .hero-v3-copy h1{font-size:40px !important}
}
@media (prefers-reduced-motion:reduce){
.home-premium .hero-v3-copy h1,.home-premium .hero-v3-copy h1 span{animation:none !important;opacity:1 !important;transform:none !important;filter:none !important}
}
/* FINAL HERO RESPONSIVE TYPE SCALE — desktop stays 58px */
@media (min-width:1201px){
.home-premium .hero-v3-copy h1{font-size:58px !important; line-height:.94 !important;}
}
@media (min-width:1001px) and (max-width:1200px){
.home-premium .hero-v3-copy h1{font-size:52px !important; line-height:.95 !important;}
}
@media (min-width:761px) and (max-width:1000px){
.home-premium .hero-v3-copy h1{font-size:46px !important; line-height:.96 !important;}
}
@media (min-width:381px) and (max-width:760px){
.home-premium .hero-v3-copy h1{font-size:38px !important; line-height:.97 !important;}
}
@media (max-width:380px){
.home-premium .hero-v3-copy h1{font-size:34px !important; line-height:.98 !important;}
}
/* FINAL PRODUCTION SPACING FIX
The visual AI playbook is a content section, not a multi-viewport spacer.
Keep the premium visual treatment while preventing the large empty area
that appeared between it and the Industries section on desktop. */
.image-story{height:auto!important;min-height:0!important;overflow:hidden!important;padding:110px 0 100px!important}
.image-story-sticky{position:relative!important;top:auto!important;height:auto!important;min-height:0!important;overflow:visible!important}
.image-story-inner{height:auto!important;min-height:0!important;padding-top:0!important;padding-bottom:0!important;align-items:center!important}
.image-story-stage{height:min(62vh,620px)!important;min-height:420px!important}
@media (max-width:1200px){
.image-story{padding:90px 0 80px!important}
.image-story-stage{height:520px!important;min-height:0!important}
}
@media (max-width:900px){
.image-story{padding:72px 0 64px!important}
.image-story-stage{height:auto!important;min-height:0!important}
}
@media (max-width:600px){
.image-story{padding:58px 0 52px!important}
}
@media (max-width:430px){
.image-story{padding:50px 0 46px!important}
}
@media (max-width:320px){
.image-story{padding:44px 0 40px!important}
}
/* FINAL GLOBAL SECTION RHYTHM — desktop/tablet only */
@media (min-width:901px){
.section{padding-top:90px!important;padding-bottom:80px!important}
.visual-v3{padding-top:90px!important;padding-bottom:85px!important}
.visual-v3-heading{margin-bottom:42px!important}
.visual-v3-mosaic{gap:15px!important}
.industries-v3{padding-top:90px!important;padding-bottom:85px!important}
.industry-v3-grid{margin-top:45px!important}
.services-v3{padding:95px 0!important}
.services-v3-grid{margin-top:45px!important}
.dark-visual-banner{margin-top:25px!important;margin-bottom:75px!important}
.process-v3{margin-top:45px!important}
}
/* FINAL CONTACT LABEL VISIBILITY FIX */
.direct-contact a,
.direct-contact-location{
color:#f4f7fb!important;
}
.direct-contact a > span,
.direct-contact-location > span{
color:#f4f7fb!important;
font-weight:700!important;
}
.direct-contact small,
.direct-contact-location small{
color:#35d9ff!important;
font-size:11px!important;
font-weight:800!important;
letter-spacing:.04em!important;
line-height:1.25!important;
margin-bottom:4px!important;
}
.direct-contact a > span,
.direct-contact-location > span{
font-size:14px!important;
line-height:1.5!important;
}
.direct-contact svg,
.direct-contact-location > svg{
color:#ff3b30!important;
filter:drop-shadow(0 0 7px rgba(255,59,48,.22));
}
.direct-contact a:hover > span,
.direct-contact-location:hover > span{
color:#ffffff!important;
}
@media(max-width:600px){
.direct-contact a,
.direct-contact-location{padding:13px 0!important;}
.direct-contact small,
.direct-contact-location small{font-size:10px!important;}
.direct-contact a > span,
.direct-contact-location > span{font-size:13px!important;}
}
/* MARKETAIFLOW — FINAL BRAND / BRIGHTNESS / RESPONSIVE PASS */
:root{--mif-bg:#020a13;--mif-bg2:#061522;--mif-panel:rgba(8,24,39,.82);--mif-white:#f7fbff;--mif-text:#edf5fb;--mif-muted:#aebdca;--mif-blue:#39a8ff;--mif-red:#ff3347;--mif-orange:#ff7a27;--mif-cyan:#52d8ff;--mif-line:rgba(132,184,220,.18)}
html{background:var(--mif-bg)!important}body{background:radial-gradient(circle at 78% 8%,rgba(255,64,67,.13),transparent 24%),radial-gradient(circle at 12% 18%,rgba(36,150,255,.16),transparent 28%),radial-gradient(circle at 65% 68%,rgba(255,122,39,.07),transparent 25%),linear-gradient(145deg,#020914 0%,#04111d 48%,#061522 100%)!important;color:var(--mif-text)!important}
.header .nav,.header .nav-shell{background:rgba(2,10,19,.78)!important;border-color:rgba(82,216,255,.16)!important;box-shadow:0 20px 70px rgba(0,0,0,.46),0 0 40px rgba(44,154,255,.06)!important}
.logo{color:var(--mif-white)!important;font-weight:800!important;gap:10px!important}.logo-mark{width:42px!important;height:42px!important;border-radius:12px!important;padding:4px!important;background:linear-gradient(145deg,#08243b,#07111e)!important;border:1px solid rgba(82,216,255,.25)!important;box-shadow:0 0 25px rgba(40,162,255,.16)!important}.logo-mark img{width:100%;height:100%;object-fit:contain;display:block}.logo-mark span{display:none!important}.logo-word{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:800;letter-spacing:-.035em}.logo-word span{color:var(--mif-red)!important}.logo b{color:var(--mif-red)!important}
.desktop-nav>a:not(.nav-cta),.drop-trigger{color:#eaf4fb!important}.desktop-nav>a:not(.nav-cta):hover,.drop-trigger:hover,.drop-trigger.active{color:var(--mif-cyan)!important}.nav-cta,.primary{background:linear-gradient(135deg,var(--mif-red),var(--mif-orange))!important;color:#fff!important;box-shadow:0 12px 34px rgba(255,51,71,.22)!important}.nav-cta:hover,.primary:hover{box-shadow:0 18px 46px rgba(255,81,48,.30)!important}
.mega{background:rgba(4,16,28,.97)!important;border-color:rgba(82,216,255,.16)!important}.mega-top span{color:var(--mif-cyan)!important}.mega-item:hover{background:rgba(46,165,255,.08)!important;border-color:rgba(82,216,255,.16)!important}.mi-icon{color:var(--mif-cyan)!important;background:rgba(82,216,255,.08)!important}.mega-item>svg{color:var(--mif-cyan)!important}.ticker{background:rgba(3,14,24,.62)!important;border-color:rgba(82,216,255,.10)!important}.ticker-track span{color:#c9d9e5!important}.ticker-track i{background:var(--mif-red)!important;box-shadow:0 0 12px rgba(255,51,71,.8)!important}
.hero-v3-copy h1,.hero-copy h1,.section-heading h2,.inner-hero h1,.detail-copy h1{color:var(--mif-white)!important}.hero-v3-copy h1 span,.hero-copy h1 span,.section-heading h2 span,.inner-hero h1 span,.detail-copy h1 span{color:var(--mif-red)!important;text-shadow:0 0 26px rgba(255,51,71,.14)}.hero-v3-copy>p,.hero-copy>p,.section-heading p,.inner-hero>p,.detail-copy>p{color:#c3d0db!important}.eyebrow{color:var(--mif-cyan)!important}.eyebrow i{background:var(--mif-red)!important;box-shadow:0 0 14px rgba(255,51,71,.7)!important}
.card,.service-card,.industry-card,.result-card,.process-card,.faq-item,.contact-card,.detail-panel,.visual-card,.story-card{background:linear-gradient(145deg,rgba(8,27,44,.92),rgba(5,16,29,.94))!important;border-color:rgba(94,175,226,.16)!important;box-shadow:0 18px 55px rgba(0,0,0,.22)!important}.card:hover,.service-card:hover,.industry-card:hover,.result-card:hover,.process-card:hover,.story-card:hover{border-color:rgba(82,216,255,.28)!important;box-shadow:0 24px 70px rgba(0,0,0,.3),0 0 28px rgba(48,160,255,.07)!important}
.contact-card{background:linear-gradient(135deg,rgba(8,29,48,.94),rgba(9,19,31,.96))!important;border-color:rgba(82,216,255,.2)!important}.direct-contact a{color:#f4f9fd!important}.direct-contact a svg,.direct-contact-location>svg{color:var(--mif-cyan)!important}.direct-contact small,.direct-contact-location small{color:var(--mif-cyan)!important;font-weight:800!important;font-size:11px!important;letter-spacing:.03em!important}.direct-contact a span,.direct-contact-location span{color:#f4f9fd!important;font-weight:750!important}.direct-contact-location{color:#f4f9fd!important;border-color:rgba(255,255,255,.11)!important}
.contact-form input,.contact-form select,.contact-form textarea{background:rgba(1,9,16,.66)!important;border-color:rgba(115,173,211,.2)!important;color:#f5fbff!important}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#8298a9!important}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:rgba(82,216,255,.55)!important;box-shadow:0 0 0 3px rgba(82,216,255,.08)!important}.success{color:#74f0b1!important;border-color:rgba(116,240,177,.25)!important;background:rgba(40,190,110,.08)!important}.form-error{color:#ff9fa7!important}
footer{background:linear-gradient(180deg,#030c15,#02070d)!important;border-top:1px solid rgba(82,216,255,.1)!important}footer h4{color:#f7fbff!important}footer a{color:#aebfcd!important}footer a:hover{color:#52d8ff!important}.footer-brand p,.footer-location{color:#aebfcd!important}.footer-location svg{color:var(--mif-cyan)!important}.footer-bottom{border-color:rgba(255,255,255,.08)!important;color:#778b9b!important}.footer-cta.mini{background:linear-gradient(135deg,var(--mif-red),var(--mif-orange))!important;color:#fff!important}
.loader-brand{color:#f7fbff!important}.loader-brand span{color:var(--mif-red)!important}.loader-mark{overflow:hidden!important;padding:5px!important;background:#061726!important}.loader-mark img{width:100%;height:100%;object-fit:contain}.whatsapp-float{background:linear-gradient(135deg,#14d879,#09a95a)!important;color:#fff!important}
@media(max-width:1200px){.wrap{width:min(1120px,calc(100% - 36px))}.desktop-nav{gap:17px}.desktop-nav>a:not(.nav-cta),.drop-trigger{font-size:12px}.hero-v3-copy h1{font-size:clamp(46px,5.8vw,66px)!important}}
@media(max-width:900px){.wrap{width:calc(100% - 32px)}.desktop-nav{display:none!important}.hamb{display:grid!important}.nav{height:66px!important}.logo{font-size:17px!important}.logo-mark{width:38px!important;height:38px!important}.mobile-menu{background:rgba(3,14,24,.98)!important;border:1px solid rgba(82,216,255,.15)!important}.mobile-section>button,.mobile-menu a{color:#edf6fb!important}.mobile-section>button:hover,.mobile-menu a:hover{color:#52d8ff!important}.hero-v3{min-height:auto!important;gap:28px!important}.hero-v3-copy h1{font-size:clamp(42px,7vw,58px)!important}.hero-v3-copy>p{font-size:14px!important}.contact-card{grid-template-columns:1fr!important;gap:30px!important;padding:30px!important}}
@media(max-width:600px){.wrap{width:calc(100% - 24px)!important}.nav-shell{width:calc(100% - 14px)!important}.nav{padding:0 10px!important;border-radius:15px!important}.logo-word{font-size:15px!important}.logo-mark{width:36px!important;height:36px!important}.hero-v3-copy h1{font-size:clamp(34px,10.6vw,48px)!important;line-height:.98!important;letter-spacing:-.045em!important}.hero-v3-copy>p{font-size:13px!important;line-height:1.65!important}.hero-actions{flex-wrap:wrap!important;gap:9px!important}.hero-actions .primary,.hero-actions .secondary{width:100%!important}.section{padding-top:58px!important;padding-bottom:58px!important}.section-heading h2{font-size:clamp(29px,8.5vw,40px)!important}.section-heading p{font-size:13px!important}.grid-3,.grid-4,.services-grid,.industries-grid,.results-grid,.process-grid{grid-template-columns:1fr!important}.direct-contact{gap:0!important}.direct-contact a,.direct-contact-location{padding:14px 0!important}.direct-contact small,.direct-contact-location small{font-size:11px!important;margin-bottom:4px!important}.direct-contact a span,.direct-contact-location span{font-size:13px!important}.contact-card{padding:21px!important;border-radius:20px!important}.contact-form .form-row{grid-template-columns:1fr!important}footer .footer-main{grid-template-columns:1fr!important;gap:28px!important}.footer-bottom{flex-direction:column!important;gap:10px!important;align-items:flex-start!important}}
@media(max-width:380px){.wrap{width:calc(100% - 18px)!important}.nav-shell{width:calc(100% - 10px)!important}.nav{height:60px!important}.logo{gap:7px!important}.logo-word{font-size:14px!important}.logo-mark{width:33px!important;height:33px!important;padding:3px!important}.hamb{width:40px!important;height:40px!important}.hero-v3-copy h1{font-size:33px!important}.section-heading h2{font-size:28px!important}.card,.service-card,.industry-card,.result-card,.process-card{padding:17px!important}.contact-card{padding:16px!important}.direct-contact a span,.direct-contact-location span{font-size:12px!important}}
/* =====================================================================
MARKETAIFLOW — MASTER TYPOGRAPHY + RESPONSIVE QUALITY PASS
Hand-tuned, content-first responsive system. Roboto is the only brand
typeface so every page feels like one intentionally engineered product.
===================================================================== */
:root{
--mf-bg:#030b14;
--mf-bg-deep:#02070d;
--mf-surface:#071827;
--mf-surface-2:#0a2032;
--mf-white:#f7fbff;
--mf-body:#d7e3ec;
--mf-muted:#9db0bf;
--mf-cyan:#55dcff;
--mf-blue:#38a9ff;
--mf-red:#ff3347;
--mf-orange:#ff7a27;
--mf-border:rgba(122,191,232,.18);
}
html,body,#root{width:100%;min-height:100%;overflow-x:hidden}
html{font-family:"Roboto",sans-serif!important;background:var(--mf-bg)!important}
body{font-family:"Roboto",sans-serif!important;color:var(--mf-body)!important;background:
radial-gradient(circle at 82% 7%,rgba(255,58,73,.16),transparent 23%),
radial-gradient(circle at 12% 23%,rgba(42,157,255,.18),transparent 28%),
linear-gradient(150deg,#020812 0%,#041321 52%,#061a29 100%)!important}
*,button,input,select,textarea{font-family:"Roboto",sans-serif!important}
/* Remove accidental legacy display-font rules. */
.hero-copy h1,.hero-v3-copy h1,.inner-hero h1,.detail-copy h1,
.section-heading h2,.visual-v3-heading h2,.dark-banner-copy h2,
.contact-copy h2,.legal h1,.legal h2,.logo-word,.loader-brand,
.glass-card h3,.process-card h3,.detail-feature h3,.story-card h3,
footer h4{font-family:"Roboto",sans-serif!important}
/* Typography scale — exact requested breakpoints. */
@media (min-width:1920px){
.hero-v3-copy h1,.hero-copy h1,.inner-hero h1,.detail-copy h1{font-size:64px!important;line-height:1.1!important;font-weight:700!important}
.section-heading h2,.visual-v3-heading h2,.contact-copy h2{font-size:48px!important;line-height:1.15!important;font-weight:700!important}
h3,.glass-card h3,.process-card h3,.detail-feature h3{font-size:36px!important;line-height:1.2!important;font-weight:700!important}
h4,footer h4{font-size:28px;line-height:1.25;font-weight:600}
h5{font-size:22px;line-height:1.3;font-weight:600}
body{font-size:18px;line-height:1.6}
.hero-v3-copy>p,.hero-copy>p,.inner-hero>p,.detail-copy>p,.section-heading p,.contact-copy p{font-size:18px!important;line-height:1.6!important}
.primary,.secondary,.nav-cta{font-size:16px!important;line-height:1.2!important;font-weight:600!important}
.desktop-nav>a:not(.nav-cta),.drop-trigger{font-size:16px!important;line-height:1.2!important;font-weight:500!important}
}
@media (min-width:1440px) and (max-width:1919px){
.hero-v3-copy h1,.hero-copy h1,.inner-hero h1,.detail-copy h1{font-size:58px!important;line-height:1.1!important;font-weight:700!important}
.section-heading h2,.visual-v3-heading h2,.contact-copy h2{font-size:44px!important;line-height:1.15!important;font-weight:700!important}
.glass-card h3,.process-card h3,.detail-feature h3{font-size:34px!important;line-height:1.2!important;font-weight:700!important}
.hero-v3-copy>p,.hero-copy>p,.inner-hero>p,.detail-copy>p,.section-heading p,.contact-copy p{font-size:17px!important;line-height:1.6!important}
.primary,.secondary,.nav-cta{font-size:16px!important;line-height:1.2!important;font-weight:600!important}
.desktop-nav>a:not(.nav-cta),.drop-trigger{font-size:16px!important;line-height:1.2!important;font-weight:500!important}
}
@media (min-width:1280px) and (max-width:1439px){
.hero-v3-copy h1,.hero-copy h1,.inner-hero h1,.detail-copy h1{font-size:54px!important;line-height:1.1!important;font-weight:700!important}
.section-heading h2,.visual-v3-heading h2,.contact-copy h2{font-size:42px!important;line-height:1.15!important;font-weight:700!important}
.glass-card h3,.process-card h3,.detail-feature h3{font-size:32px!important;line-height:1.2!important;font-weight:700!important}
.hero-v3-copy>p,.hero-copy>p,.inner-hero>p,.detail-copy>p,.section-heading p,.contact-copy p{font-size:17px!important;line-height:1.6!important}
.primary,.secondary,.nav-cta{font-size:15px!important;line-height:1.2!important;font-weight:600!important}
.desktop-nav>a:not(.nav-cta),.drop-trigger{font-size:15px!important;line-height:1.2!important;font-weight:500!important}
}
@media (min-width:1024px) and (max-width:1279px){
.hero-v3-copy h1,.hero-copy h1,.inner-hero h1,.detail-copy h1{font-size:48px!important;line-height:1.1!important;font-weight:700!important}
.section-heading h2,.visual-v3-heading h2,.contact-copy h2{font-size:38px!important;line-height:1.15!important;font-weight:700!important}
.glass-card h3,.process-card h3,.detail-feature h3{font-size:30px!important;line-height:1.2!important;font-weight:700!important}
.hero-v3-copy>p,.hero-copy>p,.inner-hero>p,.detail-copy>p,.section-heading p,.contact-copy p{font-size:16px!important;line-height:1.6!important}
.primary,.secondary,.nav-cta{font-size:15px!important;line-height:1.2!important;font-weight:600!important}
.desktop-nav>a:not(.nav-cta),.drop-trigger{font-size:15px!important;line-height:1.2!important;font-weight:500!important}
}
@media (min-width:820px) and (max-width:1023px){
.hero-v3-copy h1,.hero-copy h1,.inner-hero h1,.detail-copy h1{font-size:44px!important;line-height:1.1!important;font-weight:700!important}
.section-heading h2,.visual-v3-heading h2,.contact-copy h2{font-size:36px!important;line-height:1.15!important;font-weight:700!important}
.glass-card h3,.process-card h3,.detail-feature h3{font-size:28px!important;line-height:1.2!important;font-weight:700!important}
.hero-v3-copy>p,.hero-copy>p,.inner-hero>p,.detail-copy>p,.section-heading p,.contact-copy p{font-size:16px!important;line-height:1.6!important}
.primary,.secondary,.nav-cta{font-size:15px!important;line-height:1.2!important;font-weight:600!important}
.desktop-nav>a:not(.nav-cta),.drop-trigger{font-size:15px!important;line-height:1.2!important;font-weight:500!important}
}
@media (min-width:768px) and (max-width:819px){
.hero-v3-copy h1,.hero-copy h1,.inner-hero h1,.detail-copy h1{font-size:42px!important;line-height:1.1!important;font-weight:700!important}
.section-heading h2,.visual-v3-heading h2,.contact-copy h2{font-size:34px!important;line-height:1.15!important;font-weight:700!important}
.glass-card h3,.process-card h3,.detail-feature h3{font-size:27px!important;line-height:1.2!important;font-weight:700!important}
.hero-v3-copy>p,.hero-copy>p,.inner-hero>p,.detail-copy>p,.section-heading p,.contact-copy p{font-size:16px!important;line-height:1.6!important}
.primary,.secondary,.nav-cta{font-size:15px!important;line-height:1.2!important;font-weight:600!important}
.desktop-nav>a:not(.nav-cta),.drop-trigger{font-size:14px!important;line-height:1.2!important;font-weight:500!important}
}
@media (min-width:600px) and (max-width:767px){
.hero-v3-copy h1,.hero-copy h1,.inner-hero h1,.detail-copy h1{font-size:38px!important;line-height:1.1!important;font-weight:700!important}
.section-heading h2,.visual-v3-heading h2,.contact-copy h2{font-size:32px!important;line-height:1.15!important;font-weight:700!important}
.glass-card h3,.process-card h3,.detail-feature h3{font-size:26px!important;line-height:1.2!important;font-weight:700!important}
.hero-v3-copy>p,.hero-copy>p,.inner-hero>p,.detail-copy>p,.section-heading p,.contact-copy p{font-size:16px!important;line-height:1.6!important}
.primary,.secondary,.nav-cta{font-size:15px!important;line-height:1.2!important;font-weight:600!important}
}
@media (min-width:480px) and (max-width:599px){
.hero-v3-copy h1,.hero-copy h1,.inner-hero h1,.detail-copy h1{font-size:36px!important;line-height:1.1!important;font-weight:700!important}
.section-heading h2,.visual-v3-heading h2,.contact-copy h2{font-size:30px!important;line-height:1.15!important;font-weight:700!important}
.glass-card h3,.process-card h3,.detail-feature h3{font-size:25px!important;line-height:1.2!important;font-weight:700!important}
.hero-v3-copy>p,.hero-copy>p,.inner-hero>p,.detail-copy>p,.section-heading p,.contact-copy p{font-size:16px!important;line-height:1.6!important}
.primary,.secondary,.nav-cta{font-size:15px!important;line-height:1.2!important;font-weight:600!important}
}
@media (min-width:390px) and (max-width:479px){
.hero-v3-copy h1,.hero-copy h1,.inner-hero h1,.detail-copy h1{font-size:32px!important;line-height:1.1!important;font-weight:700!important}
.section-heading h2,.visual-v3-heading h2,.contact-copy h2{font-size:28px!important;line-height:1.15!important;font-weight:700!important}
.glass-card h3,.process-card h3,.detail-feature h3{font-size:23px!important;line-height:1.2!important;font-weight:700!important}
.hero-v3-copy>p,.hero-copy>p,.inner-hero>p,.detail-copy>p,.section-heading p,.contact-copy p{font-size:16px!important;line-height:1.6!important}
.primary,.secondary,.nav-cta{font-size:15px!important;line-height:1.2!important;font-weight:600!important}
}
@media (min-width:375px) and (max-width:389px){
.hero-v3-copy h1,.hero-copy h1,.inner-hero h1,.detail-copy h1{font-size:31px!important;line-height:1.1!important;font-weight:700!important}
.section-heading h2,.visual-v3-heading h2,.contact-copy h2{font-size:27px!important;line-height:1.15!important;font-weight:700!important}
.glass-card h3,.process-card h3,.detail-feature h3{font-size:22px!important;line-height:1.2!important;font-weight:700!important}
.hero-v3-copy>p,.hero-copy>p,.inner-hero>p,.detail-copy>p,.section-heading p,.contact-copy p{font-size:15px!important;line-height:1.6!important}
.primary,.secondary,.nav-cta{font-size:15px!important;line-height:1.2!important;font-weight:600!important}
}
@media (min-width:320px) and (max-width:374px){
.hero-v3-copy h1,.hero-copy h1,.inner-hero h1,.detail-copy h1{font-size:28px!important;line-height:1.1!important;font-weight:700!important}
.section-heading h2,.visual-v3-heading h2,.contact-copy h2{font-size:25px!important;line-height:1.15!important;font-weight:700!important}
.glass-card h3,.process-card h3,.detail-feature h3{font-size:21px!important;line-height:1.2!important;font-weight:700!important}
.hero-v3-copy>p,.hero-copy>p,.inner-hero>p,.detail-copy>p,.section-heading p,.contact-copy p{font-size:15px!important;line-height:1.6!important}
.primary,.secondary,.nav-cta{font-size:14px!important;line-height:1.2!important;font-weight:600!important}
}
/* Consistent supporting type. */
small,.small-text,.number{font-size:14px;line-height:1.5;font-weight:400}
.hero-v3-proof,.trust,.metric span,.glass-card p,.detail-feature p,.process-card p,.story-card p{font-weight:400}
/* Real responsive geometry — no horizontal overflow and no giant spacer sections. */
.wrap{width:min(1240px,calc(100% - 48px));margin-inline:auto}
.section{padding-block:92px!important}
.visual-v3{padding-block:92px!important}
.services-v3{padding-block:92px!important}
.dark-visual-banner{margin-block:20px 72px!important}
.image-story{padding-block:86px 78px!important;height:auto!important;min-height:0!important}
.image-story-sticky{position:relative!important;height:auto!important;min-height:0!important}
.image-story-stage{height:560px!important;min-height:0!important}
/* Keep cards readable rather than tiny. */
.glass-card,.process-card,.detail-feature,.story-card{min-width:0}
.glass-card p,.detail-feature p,.process-card p,.story-card p{font-size:15px;line-height:1.65;color:#c7d6e1!important}
.glass-card h3,.process-card h3,.detail-feature h3{margin-top:14px}
.card-icon{color:var(--mf-cyan)!important;background:rgba(82,216,255,.08)!important;border-color:rgba(82,216,255,.2)!important}
/* Inner pages: give hero, feature panels and imagery breathing room without blank space. */
.inner-page{overflow:hidden}
.inner-hero-vip,.detail-hero.inner-hero-vip{width:min(1240px,calc(100% - 48px));margin-inline:auto;border-radius:28px;min-height:540px!important;padding:150px 64px 72px!important}
.inner-hero-vip:after,.detail-hero.inner-hero-vip:after{background-position:center!important;background-size:cover!important;opacity:.88!important}
.detail-cards,.detail-features,.detail-panels{margin-top:42px!important}
.detail-visual,.contact-visual{width:min(1240px,calc(100% - 48px));margin-inline:auto}
.detail-visual img,.contact-visual img,.detail-hero img{max-width:100%;height:auto;object-fit:cover}
/* Header: clean, human-sized navigation. */
.header .nav{height:72px!important;padding-inline:18px!important}
.logo-word{font-size:18px!important;font-weight:700!important}
.logo-mark{width:42px!important;height:42px!important}
.nav-cta,.primary,.secondary,.footer-cta{min-height:46px;white-space:nowrap}
/* Forms/buttons never overflow on narrow screens. */
button,.primary,.secondary,.nav-cta,.footer-cta{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--mf-cyan);outline-offset:3px}
@media (max-width:1023px){
.wrap{width:calc(100% - 36px)}
.desktop-nav{display:none!important}.hamb{display:grid!important}
.hero-v3{grid-template-columns:1fr!important;min-height:0!important;padding-top:130px!important;padding-bottom:64px!important;gap:38px!important}
.hero-v3-copy{max-width:850px}
.hero-v3-art{max-width:760px;width:100%;margin-inline:auto}
.visual-v3-heading{grid-template-columns:1fr!important;gap:18px!important}
.services-v3-grid,.industry-v3-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.process-v3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.metrics-grid{grid-template-columns:repeat(2,1fr)!important}
.inner-hero-vip,.detail-hero.inner-hero-vip{width:calc(100% - 36px);min-height:480px!important;padding:130px 42px 58px!important}
}
@media (max-width:767px){
.wrap{width:calc(100% - 28px)!important}
.header .nav{height:64px!important}
.nav-shell{width:calc(100% - 12px)!important;margin-top:8px!important}
.logo-mark{width:37px!important;height:37px!important}.logo-word{font-size:16px!important}
.mobile-menu{max-height:calc(100vh - 84px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none}.mobile-menu::-webkit-scrollbar{display:none}
.hero-v3{padding-top:112px!important;padding-bottom:52px!important;gap:30px!important}
.hero-v3-art{width:100%!important}.hero-art-frame{border-radius:20px!important}
.hero-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
.hero-actions>*{width:100%!important}
.trust,.hero-v3-proof{gap:9px!important;flex-direction:column!important;align-items:flex-start!important}
.metrics-grid{grid-template-columns:repeat(2,1fr)!important}
.metric{padding:18px 14px!important}.metric b{font-size:24px!important}
.section,.visual-v3,.services-v3{padding-block:58px!important}
.section-heading{margin-bottom:30px!important}
.section-heading p{max-width:100%!important}
.services-v3-grid,.industry-v3-grid,.process-v3,.detail-cards,.detail-features{grid-template-columns:1fr!important;gap:14px!important}
.glass-card,.process-card,.detail-feature,.story-card{padding:20px!important;border-radius:17px!important}
.image-story{padding-block:54px 48px!important}
.image-story-inner{grid-template-columns:1fr!important;gap:26px!important}
.image-story-stage{height:auto!important;min-height:0!important}
.image-story-panel{position:relative!important;inset:auto!important;opacity:1!important;transform:none!important;display:none!important}
.image-story-panel.active{display:block!important}
.image-story-steps{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px!important}
.image-story-steps button{min-width:0!important;padding:7px 3px!important;font-size:9px!important}
.image-story-steps button b{font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dark-visual-banner{grid-template-columns:1fr!important;margin:10px 14px 50px!important;border-radius:20px!important;overflow:hidden}
.dark-banner-image{min-height:250px!important}
.inner-hero-vip,.detail-hero.inner-hero-vip{width:calc(100% - 28px)!important;min-height:0!important;padding:112px 24px 46px!important;border-radius:22px!important}
.detail-visual,.contact-visual{width:calc(100% - 28px)!important;grid-template-columns:1fr!important}
.detail-visual img,.contact-visual img{min-height:220px;max-height:320px}
.contact-card{grid-template-columns:1fr!important;gap:26px!important;padding:22px!important}
.contact-form .form-row{grid-template-columns:1fr!important}
.direct-contact a,.direct-contact-location{padding:15px 0!important}
.direct-contact small,.direct-contact-location small{color:var(--mf-cyan)!important;font-size:12px!important;font-weight:700!important}
.direct-contact a span,.direct-contact-location span{color:var(--mf-white)!important;font-size:15px!important;font-weight:700!important}
footer .footer-main{grid-template-columns:1fr!important;gap:30px!important;padding-block:46px!important}
footer .footer-bottom{flex-direction:column!important;align-items:flex-start!important;gap:10px!important;padding-block:18px!important}
}
@media (max-width:374px){
.wrap{width:calc(100% - 20px)!important}.nav-shell{width:calc(100% - 8px)!important}
.header .nav{height:60px!important;padding-inline:9px!important}.logo-mark{width:33px!important;height:33px!important}.logo-word{font-size:14px!important}
.hero-v3{padding-top:104px!important;padding-inline:10px!important}.hero-v3-copy h1{letter-spacing:-.025em!important}
.metric{padding:15px 10px!important}.metric b{font-size:21px!important}.metric span{font-size:12px!important}
.glass-card,.process-card,.detail-feature,.story-card{padding:17px!important}
.inner-hero-vip,.detail-hero.inner-hero-vip{width:calc(100% - 20px)!important;padding:104px 18px 38px!important}
.contact-card{padding:17px!important}
.direct-contact a span,.direct-contact-location span{font-size:14px!important}
}
/* Brighter premium surfaces while retaining the dark identity. */
.hero-v3,.visual-v3,.image-story,.services-v3,.section{position:relative}
.glass-card,.process-card,.contact-card,.detail-feature,.story-card,.faq-item{background:linear-gradient(145deg,rgba(11,34,53,.96),rgba(6,19,32,.96))!important}
.hero-art-frame,.command,.detail-visual,.contact-visual{box-shadow:0 30px 90px rgba(0,0,0,.34),0 0 60px rgba(48,169,255,.09)!important}
.ticker-track span,.metric span,.footer-brand p,footer a,.footer-location{color:#b8c9d6!important}
/* =========================================================
MARKETAIFlow — FINAL INNER HERO / HEADER LOGO / DROPDOWN / FORMS
Human-tuned finishing pass. Full-bleed artwork, readable controls,
and restrained responsive behavior at every breakpoint.
========================================================= */
/* Header + footer use the supplied full MarketAIFlow wordmark only. */
.logo{display:inline-flex!important;align-items:center!important;gap:0!important;line-height:0!important;flex:0 0 auto!important;min-width:0!important}
.logo-full{display:block!important;width:156px!important;height:auto!important;max-width:100%!important;max-height:none!important;object-fit:contain!important;object-position:left center!important}
.logo-mark{display:none!important}
.logo-word{display:none!important}
/* Full-bleed inner-page hero artwork. The copy remains aligned to the site grid. */
.inner-page .inner-hero-vip,
.inner-page .detail-hero.inner-hero-vip{
width:100%!important;
max-width:none!important;
margin:0!important;
border-radius:0!important;
min-height:590px!important;
padding-block:126px 74px!important;
padding-inline:max(24px,calc((100% - 1240px)/2 + 24px))!important;
}
.inner-page .detail-hero.inner-hero-vip{
display:grid!important;
grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
align-items:center!important;
gap:56px!important;
}
.inner-page .inner-hero-vip:after,
.inner-page .detail-hero.inner-hero-vip:after{
border-radius:0!important;
background-image:
linear-gradient(90deg,rgba(2,8,15,.56) 0%,rgba(2,8,15,.34) 46%,rgba(2,8,15,.22) 100%),
var(--vip-image)!important;
background-size:cover,cover!important;
background-position:center,center!important;
opacity:1!important;
}
.inner-page .inner-hero-vip:before,
.inner-page .detail-hero.inner-hero-vip:before{
border-radius:0!important;
background:
radial-gradient(circle at 78% 35%,rgba(52,190,255,.16),transparent 34%),
radial-gradient(circle at 16% 74%,rgba(255,58,45,.15),transparent 32%),
linear-gradient(180deg,rgba(2,8,15,.08),rgba(2,8,15,.24))!important;
}
.inner-page .inner-hero-vip h1,
.inner-page .detail-hero.inner-hero-vip h1{max-width:900px!important;text-wrap:balance}
.inner-page .inner-hero-vip>p,
.inner-page .detail-hero.inner-hero-vip .detail-copy>p{max-width:720px!important}
/* The detail-page panel sits inside the full-width hero without touching edges. */
.inner-page .detail-hero.inner-hero-vip .detail-panel{width:100%!important;max-width:560px!important;margin-inline:auto!important;background:linear-gradient(145deg,rgba(5,22,37,.86),rgba(2,10,19,.90))!important;border-color:rgba(82,216,255,.24)!important;box-shadow:0 30px 90px rgba(0,0,0,.42),0 0 50px rgba(30,160,255,.10)!important;backdrop-filter:blur(10px)}
/* Services / Industries dropdown: brighter, cleaner, fully opaque. */
.drop{z-index:200!important}
.mega{
z-index:3000!important;
width:min(940px,calc(100vw - 44px))!important;
padding:18px!important;
border:1px solid rgba(82,216,255,.25)!important;
border-radius:22px!important;
background:linear-gradient(145deg,#071b2c 0%,#06131f 52%,#160b18 100%)!important;
box-shadow:0 32px 100px rgba(0,0,0,.72),0 0 55px rgba(44,170,255,.12)!important;
backdrop-filter:blur(24px)!important;
}
.mega:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 8% 0%,rgba(82,216,255,.10),transparent 30%),radial-gradient(circle at 92% 100%,rgba(255,68,50,.09),transparent 34%)}
.mega-top{position:relative;z-index:1;padding:4px 5px 13px!important;margin-bottom:7px!important;border-bottom:1px solid rgba(128,193,229,.13)!important}
.mega-top span{font-size:10px!important;letter-spacing:.2em!important;color:#52d8ff!important;font-weight:800!important}
.mega-top small{font-size:11px!important;color:#c8d9e5!important}
.mega-grid{position:relative;z-index:1;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;max-height:62vh!important;overflow:auto!important}
.mega-item{grid-template-columns:52px minmax(0,1fr) 18px!important;gap:12px!important;padding:12px!important;border:1px solid rgba(114,181,218,.11)!important;border-radius:15px!important;background:rgba(5,19,31,.52)!important;min-width:0!important}
.mega-item:hover{background:linear-gradient(135deg,rgba(32,150,220,.16),rgba(255,58,48,.08))!important;border-color:rgba(82,216,255,.30)!important;transform:translateY(-2px) translateX(2px)!important;box-shadow:0 10px 28px rgba(0,0,0,.24)!important}
.mi-thumb{width:52px!important;height:52px!important;border-radius:13px!important;overflow:hidden!important;border:1px solid rgba(82,216,255,.20)!important;position:relative!important;background:#061522!important}
.mi-thumb>img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;filter:saturate(1.1) contrast(1.03)!important}
.mi-thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(3,13,23,.04),rgba(255,38,48,.14))!important;pointer-events:none}
.mi-icon{position:absolute!important;right:4px!important;bottom:4px!important;width:24px!important;height:24px!important;border-radius:8px!important;background:rgba(3,14,24,.92)!important;border:1px solid rgba(82,216,255,.30)!important;color:#52d8ff!important;display:grid!important;place-items:center!important;z-index:2!important}
.mi-copy{min-width:0!important}.mega-item b{font-size:13px!important;font-weight:700!important;color:#f4fbff!important;line-height:1.25!important}.mega-item small{font-size:10px!important;line-height:1.45!important;color:#a9bfce!important;margin-top:4px!important}.mega-item>svg{color:#52d8ff!important;transition:transform .2s ease!important}.mega-item:hover>svg{transform:translateX(3px)!important}
/* Form confirmation directly beneath the action button. */
.contact-form .submit,.strategy-form .submit{margin-top:2px!important}
.contact-form .success,.strategy-form .success{margin-top:2px!important;width:100%!important}
.modal-form-success{align-items:flex-start!important;padding:13px 15px!important;border-radius:13px!important;background:linear-gradient(135deg,rgba(22,180,125,.16),rgba(32,126,255,.10))!important;border:1px solid rgba(73,240,189,.38)!important;box-shadow:0 12px 30px rgba(0,0,0,.16)!important}
.modal-form-success span{display:block!important;color:#eafff6!important;font-size:13px!important;line-height:1.55!important}
.modal-form-success strong{color:#71f4c2!important;font-weight:800!important}
/* Consistent button geometry across inner pages. */
.primary,.secondary,.nav-cta,.footer-cta{min-height:46px!important;padding:12px 18px!important;border-radius:11px!important;font-family:"Roboto",sans-serif!important;font-weight:600!important;line-height:1.2!important}
.primary svg,.secondary svg,.nav-cta svg,.footer-cta svg{flex:none!important;transition:transform .2s ease!important}
.primary:hover svg,.secondary:hover svg,.nav-cta:hover svg,.footer-cta:hover svg{transform:translateX(3px)!important}
/* Bright readable contact labels. */
.direct-contact small,.direct-contact-location small{color:#52d8ff!important;font-weight:700!important;font-size:11px!important}
.direct-contact a span,.direct-contact-location span{color:#f5fbff!important;font-weight:700!important}
@media(max-width:1023px){
.logo-full{width:145px!important;max-height:none!important}
.inner-page .inner-hero-vip,
.inner-page .detail-hero.inner-hero-vip{min-height:520px!important;padding-block:116px 60px!important;padding-inline:28px!important}
.inner-page .detail-hero.inner-hero-vip{grid-template-columns:1fr!important;gap:34px!important}
.inner-page .detail-hero.inner-hero-vip .detail-panel{max-width:720px!important}
.mega{width:min(900px,calc(100vw - 36px))!important}
}
@media(max-width:767px){
.logo-full{width:132px!important;max-height:none!important}
.inner-page .inner-hero-vip,
.inner-page .detail-hero.inner-hero-vip{min-height:0!important;padding:104px 20px 50px!important}
.inner-page .detail-hero.inner-hero-vip{gap:26px!important}
.inner-page .inner-hero-vip:after,
.inner-page .detail-hero.inner-hero-vip:after{background-image:linear-gradient(180deg,rgba(2,8,15,.46),rgba(2,8,15,.25) 52%,rgba(2,8,15,.52)),var(--vip-image)!important;background-size:cover,cover!important;background-position:center,center!important}
.mega{width:calc(100vw - 24px)!important;left:0!important;transform:none!important;top:61px!important;max-height:74svh!important;padding:12px!important}
.mega-grid{grid-template-columns:1fr!important;max-height:62svh!important}
.mega-item{grid-template-columns:48px minmax(0,1fr) 16px!important;padding:10px!important}
.mi-thumb{width:48px!important;height:48px!important}
.mega-item b{font-size:12px!important}.mega-item small{font-size:9.5px!important}
}
@media(max-width:480px){
.logo-full{width:118px!important;max-height:none!important}
.inner-page .inner-hero-vip,
.inner-page .detail-hero.inner-hero-vip{padding:96px 17px 42px!important}
.inner-page .detail-hero.inner-hero-vip .detail-panel{padding:21px!important;border-radius:18px!important}
.mega{top:58px!important;width:calc(100vw - 18px)!important;left:-4px!important}
.mega-top{display:block!important}.mega-top small{display:block!important;margin-top:5px!important}
.primary,.secondary,.nav-cta,.footer-cta{min-height:44px!important;padding:11px 15px!important}
}
@media(max-width:374px){
.logo-full{width:108px!important;max-height:none!important}
.inner-page .inner-hero-vip,
.inner-page .detail-hero.inner-hero-vip{padding:90px 14px 38px!important}
.mega{width:calc(100vw - 12px)!important;left:-7px!important}
.mega-item{grid-template-columns:44px minmax(0,1fr) 14px!important}.mi-thumb{width:44px!important;height:44px!important}
}
/* =========================================================
FINAL VISUAL STORY + FAQ POLISH
Full client artwork visible, no accidental cropping.
========================================================= */
.image-story-stage{
width:100%;
max-width:none;
background:linear-gradient(145deg,#071522,#020b13 70%);
border:1px solid rgba(99,184,255,.28);
box-shadow:0 35px 100px rgba(0,0,0,.42),0 0 45px rgba(29,161,255,.06);
}
.image-story-panel img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center!important;
background:#020b13!important;
padding:0!important;
}
.image-story-overlay{
background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.10) 48%,rgba(0,0,0,.78))!important;
}
.faq-layout{
grid-template-columns:minmax(330px,.86fr) minmax(0,1.14fr)!important;
gap:clamp(28px,5vw,72px)!important;
align-items:stretch!important;
}
.faq-side-panel{
min-height:100%;
padding:38px 34px;
border:1px solid rgba(99,184,255,.20);
border-radius:24px;
background:
radial-gradient(circle at 15% 10%,rgba(29,161,255,.13),transparent 34%),
radial-gradient(circle at 90% 90%,rgba(255,32,40,.10),transparent 38%),
linear-gradient(145deg,rgba(7,28,46,.92),rgba(15,10,29,.96));
box-shadow:0 24px 70px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.035);
display:flex;
flex-direction:column;
justify-content:center;
}
.faq-side-panel .section-heading{
position:static!important;
max-width:100%!important;
margin:0!important;
text-align:left!important;
}
.faq-side-panel .section-heading h2{
font-size:clamp(34px,3.5vw,52px)!important;
line-height:1.02!important;
margin:15px 0 18px!important;
}
.faq-side-panel .section-heading p{
max-width:520px!important;
margin:0!important;
font-size:16px!important;
line-height:1.75!important;
}
.faq-side-points{
display:grid;
gap:10px;
margin-top:28px;
}
.faq-side-points span{
display:flex;
align-items:center;
gap:11px;
padding:12px 14px;
border:1px solid rgba(99,184,255,.16);
border-radius:12px;
background:rgba(3,18,31,.55);
color:#e9f5ff;
font-size:13px;
font-weight:600;
}
.faq-side-points span:before{
content:"✓";
width:21px;height:21px;
display:grid;place-items:center;
flex:0 0 21px;
border-radius:50%;
background:rgba(29,161,255,.14);
color:#63b8ff;
font-size:11px;
font-weight:900;
}
.faq-list{
border:1px solid rgba(99,184,255,.24)!important;
border-radius:18px!important;
overflow:hidden!important;
background:#061522!important;
box-shadow:0 24px 70px rgba(0,0,0,.24);
}
.faq-item{
border:0!important;
border-bottom:1px solid rgba(99,184,255,.20)!important;
border-radius:0!important;
background:linear-gradient(145deg,rgba(7,30,49,.96),rgba(17,10,28,.96))!important;
}
.faq-item:last-child{border-bottom:0!important}
.faq-item:hover,.faq-item.is-open{
background:linear-gradient(145deg,rgba(10,48,77,.98),rgba(57,12,43,.98))!important;
}
.faq-trigger{
min-height:68px!important;
padding:17px 20px!important;
border:0!important;
}
.faq-trigger small{
display:inline-block!important;
min-width:27px!important;
margin-right:12px!important;
color:#ff5a22!important;
font:800 11px/1 "Roboto",sans-serif!important;
letter-spacing:.12em!important;
}
.faq-trigger>span:first-child{
display:flex!important;
align-items:center!important;
color:#f8fbff!important;
font:600 16px/1.4 "Roboto",sans-serif!important;
}
.faq-plus{
width:30px!important;height:30px!important;
border:1px solid rgba(99,184,255,.46)!important;
color:#dff2ff!important;
background:rgba(3,18,30,.72)!important;
}
.faq-item.is-open .faq-plus{
background:linear-gradient(135deg,#ff2028,#ff6428)!important;
border-color:transparent!important;
box-shadow:0 0 18px rgba(255,64,38,.22);
}
.faq-answer p{
padding:0 54px 24px 59px!important;
color:#d5e2ed!important;
font-size:15px!important;
line-height:1.72!important;
}
@media(max-width:900px){
.faq-layout{grid-template-columns:1fr!important;gap:22px!important}
.faq-side-panel{padding:30px 26px;min-height:auto}
.faq-side-panel .section-heading h2{font-size:36px!important}
.faq-side-points{grid-template-columns:repeat(3,1fr)}
.faq-side-points span{font-size:12px;line-height:1.35}
.image-story-inner{grid-template-columns:1fr!important;gap:26px!important}
.image-story-stage{height:min(68vh,560px)!important}
}
@media(max-width:600px){
.image-story{height:auto!important;min-height:0!important}
.image-story-sticky{position:relative!important;height:auto!important;overflow:visible!important}
.image-story-inner{display:flex!important;flex-direction:column!important;padding-top:70px!important;padding-bottom:70px!important}
.image-story-copy{width:100%!important;max-width:none!important}
.image-story-copy h2{font-size:38px!important}
.image-story-stage{height:auto!important;min-height:300px!important;aspect-ratio:16/10!important;border-radius:20px!important}
.image-story-panel img{object-fit:contain!important}
.image-story-caption{left:20px;right:20px;bottom:20px}
.image-story-caption h3{font-size:26px!important}
.image-story-chip{right:16px;top:16px;padding:8px 10px;font-size:9px}
.faq-side-panel{padding:24px 20px;border-radius:20px}
.faq-side-panel .section-heading h2{font-size:31px!important}
.faq-side-panel .section-heading p{font-size:14px!important}
.faq-side-points{grid-template-columns:1fr;gap:8px;margin-top:20px}
.faq-side-points span{padding:11px 12px}
.faq-trigger{min-height:64px!important;padding:15px 13px!important}
.faq-trigger>span:first-child{font-size:14px!important}
.faq-trigger small{min-width:22px!important;margin-right:7px!important;font-size:10px!important}
.faq-plus{width:27px!important;height:27px!important;flex:0 0 27px}
.faq-answer p{padding:0 20px 20px 42px!important;font-size:13px!important}
}
@media(max-width:374px){
.image-story-copy h2{font-size:31px!important}
.image-story-stage{min-height:250px!important}
.faq-side-panel .section-heading h2{font-size:27px!important}
.faq-trigger>span:first-child{font-size:13px!important}
}
/* =========================================================
FINAL MOBILE STORY + PERFORMANCE + FAQ BALANCE PASS
========================================================= */
/* Keep the first viewport fast: below-fold media is lazy-loaded in JSX. */
.hero-art-frame img{display:block;width:100%;height:100%;object-fit:cover;content-visibility:auto;}
.visual-v3-mosaic img,.dark-banner-image img,.detail-image-main img,.detail-image-small img,.detail-visual-image img,.about-visual-image img,.image-story-panel img{content-visibility:auto;}
/* Home serving badge: one clean line on phones. */
@media (max-width:767px){
.hero-serving{
display:inline-flex!important;
width:max-content!important;
max-width:100%!important;
white-space:nowrap!important;
flex-wrap:nowrap!important;
align-items:center!important;
font-size:10px!important;
letter-spacing:.08em!important;
line-height:1.2!important;
padding:10px 13px!important;
box-sizing:border-box!important;
}
.hero-serving i{flex:0 0 7px!important;}
}
@media (max-width:360px){
.hero-serving{font-size:8.5px!important;letter-spacing:.055em!important;padding:9px 10px!important;}
}
/* The mobile visual story uses the real artwork itself — no framed/oval stage. */
@media (max-width:767px){
.image-story-stage{
height:auto!important;
min-height:0!important;
aspect-ratio:auto!important;
overflow:visible!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
}
.image-story-panel{
position:relative!important;
inset:auto!important;
display:none!important;
opacity:1!important;
transform:none!important;
border:0!important;
border-radius:0!important;
overflow:visible!important;
background:transparent!important;
}
.image-story-panel.active{display:block!important;}
.image-story-panel img{
position:relative!important;
width:100%!important;
height:auto!important;
max-height:none!important;
object-fit:contain!important;
object-position:center!important;
border-radius:0!important;
background:transparent!important;
filter:none!important;
}
.image-story-overlay{display:none!important;}
.image-story-label,.image-story-chip{display:none!important;}
}
/* Tablet story: show the complete supplied artwork without aggressive crop. */
@media (min-width:768px) and (max-width:1023px){
.image-story-stage{height:auto!important;aspect-ratio:16/10!important;background:#020a12!important;}
.image-story-panel img{object-fit:contain!important;object-position:center!important;}
}
/* FAQ: use the left column instead of leaving a large dead area. */
.faq-layout{
grid-template-columns:minmax(340px,.92fr) minmax(0,1.08fr)!important;
gap:32px!important;
align-items:stretch!important;
}
.faq-home-side{
min-height:100%!important;
box-sizing:border-box!important;
}
.faq-home-side .section-heading p{max-width:520px!important;}
.faq-home-side .faq-side-points{margin-top:auto!important;}
.faq-list{width:100%!important;min-width:0!important;box-sizing:border-box!important;}
.faq-trigger{padding-left:20px!important;padding-right:20px!important;}
@media (max-width:900px){
.faq-layout{grid-template-columns:1fr!important;gap:22px!important;}
.faq-home-side{min-height:auto!important;}
.faq-home-side .faq-side-points{margin-top:22px!important;}
}
/* Avoid expensive backdrop filters on small devices. */
@media (max-width:767px){
.faq-item,.service-select-menu,.mega,.mobile-menu,.hero-float-card,.image-story-label,.image-story-chip{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
}
/* =========================================================
MARKET AIFLOW FINAL MOBILE + PERFORMANCE OVERRIDE
========================================================= */
.hero-serving{box-sizing:border-box!important;max-width:100%!important}
@media (max-width:767px){
.hero-serving{width:100%!important;max-width:100%!important;display:flex!important;justify-content:flex-start!important;white-space:nowrap!important;flex-wrap:nowrap!important;overflow:hidden!important;text-overflow:clip!important;font-size:clamp(7.4px,2.45vw,10px)!important;letter-spacing:.055em!important;line-height:1!important;padding:9px 11px!important;gap:9px!important}
.hero-serving i{flex:0 0 7px!important;width:7px!important;height:7px!important}
}
@media (max-width:374px){.hero-serving{font-size:7.35px!important;letter-spacing:.035em!important;padding:9px 9px!important;gap:7px!important}}
@media (max-width:767px){
.image-story-stage,.image-story-panel,.image-story-panel.active{border:0!important;outline:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;clip-path:none!important;-webkit-clip-path:none!important;mask:none!important;-webkit-mask:none!important;overflow:visible!important}
.image-story-stage{height:auto!important;min-height:0!important;aspect-ratio:auto!important}
.image-story-panel{position:relative!important;inset:auto!important;display:none!important;opacity:1!important;transform:none!important}
.image-story-panel.active{display:block!important}
.image-story-panel img{display:block!important;width:100%!important;height:auto!important;max-width:100%!important;object-fit:contain!important;object-position:center!important;border-radius:0!important;clip-path:none!important;-webkit-clip-path:none!important;mask:none!important;-webkit-mask:none!important;box-shadow:none!important;filter:none!important}
.image-story-overlay,.image-story-label,.image-story-chip{display:none!important;visibility:hidden!important}
}
@media (max-width:900px){.scroll-story,.scroll-story-sticky,.image-story,.image-story-sticky{min-height:0!important}}
/* =========================================================
MARKETAIFlow — FINAL MOBILE MOSAIC WIDTH / SOCIAL POLISH
========================================================= */
.visual-v3-mosaic{width:100%!important;min-width:0!important}
.visual-v3-mosaic figure{margin:0!important;min-width:0!important}
.visual-v3-mosaic img{max-width:100%!important}
.socials{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
.socials a{display:grid!important;place-items:center!important;width:38px!important;height:38px!important;flex:0 0 38px!important}
@media (max-width:767px){
.visual-v3{width:calc(100% - 20px)!important;padding-inline:0!important}
.visual-v3-heading{width:100%!important}
.visual-v3-mosaic{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
grid-template-rows:auto!important;
gap:14px!important;
width:100%!important;
}
.mosaic-main,.mosaic-side,.mosaic-side.lower{
grid-column:1!important;
grid-row:auto!important;
width:100%!important;
min-width:0!important;
height:clamp(245px,68vw,330px)!important;
border-radius:22px!important;
}
.mosaic-main img,.mosaic-side img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
}
.mosaic-main figcaption,.mosaic-side figcaption{
left:18px!important;right:18px!important;bottom:18px!important;
}
.mosaic-main h3{font-size:clamp(24px,7vw,32px)!important}
.mosaic-side h3{font-size:clamp(20px,5.6vw,26px)!important}
.mosaic-main small,.mosaic-side small{font-size:9px!important}
.socials{gap:7px!important}
.socials a{width:38px!important;height:38px!important;flex-basis:38px!important}
}
@media (max-width:374px){
.visual-v3{width:calc(100% - 16px)!important}
.visual-v3-mosaic{gap:12px!important}
.mosaic-main,.mosaic-side,.mosaic-side.lower{height:235px!important;border-radius:20px!important}
.mosaic-main figcaption,.mosaic-side figcaption{left:15px!important;right:15px!important;bottom:15px!important}
.mosaic-main h3{font-size:24px!important}
.mosaic-side h3{font-size:19px!important}
}
/* =========================================================
MARKETAIFLOW — FINAL COMPACT SECTION RHYTHM
Keep the layout breathable, but remove excessive vertical gaps.
========================================================= */
.section{padding-top:72px!important;padding-bottom:24px!important}
.contact-section{padding-top:72px!important;padding-bottom:72px!important}
.visual-v3{padding-top:88px!important;padding-bottom:88px!important}
.industries-v3{padding-top:88px!important;padding-bottom:88px!important}
.services-v3{padding-top:92px!important;padding-bottom:92px!important}
.dark-visual-banner{margin-top:28px!important;margin-bottom:76px!important}
.process-v3{margin-top:42px!important}
.industry-v3-grid,.services-v3-grid{margin-top:42px!important}
.visual-v3-heading{margin-bottom:40px!important}
.section-heading{margin-bottom:36px!important}
.about-card{margin-top:0!important}
@media (max-width:1000px){
.section{padding-top:62px!important;padding-bottom:18px!important}
.contact-section{padding-top:62px!important;padding-bottom:62px!important}
.visual-v3{padding-top:72px!important;padding-bottom:72px!important}
.industries-v3{padding-top:72px!important;padding-bottom:72px!important}
.services-v3{padding-top:76px!important;padding-bottom:76px!important}
.industry-v3-grid,.services-v3-grid,.process-v3{margin-top:34px!important}
.visual-v3-heading{margin-bottom:32px!important}
.dark-visual-banner{margin-top:24px!important;margin-bottom:60px!important}
}
@media (max-width:767px){
.section{padding-top:48px!important;padding-bottom:12px!important}
.section-heading{margin-bottom:25px!important}
.contact-section{padding-top:48px!important;padding-bottom:48px!important}
.visual-v3{padding-top:52px!important;padding-bottom:52px!important}
.visual-v3-heading{margin-bottom:26px!important}
.industries-v3{padding-top:54px!important;padding-bottom:54px!important}
.services-v3{padding-top:58px!important;padding-bottom:58px!important}
.industry-v3-grid,.services-v3-grid,.process-v3{margin-top:26px!important}
.dark-visual-banner{margin-top:18px!important;margin-bottom:46px!important}
.hero-v3{padding-top:92px!important;padding-bottom:38px!important}
.process-v3 .process-card{min-height:170px!important}
}
@media (max-width:374px){
.section{padding-top:42px!important;padding-bottom:10px!important}
.contact-section{padding-top:42px!important;padding-bottom:42px!important}
.visual-v3{padding-top:46px!important;padding-bottom:46px!important}
.industries-v3{padding-top:46px!important;padding-bottom:46px!important}
.services-v3{padding-top:50px!important;padding-bottom:50px!important}
.section-heading{margin-bottom:22px!important}
.industry-v3-grid,.services-v3-grid,.process-v3{margin-top:22px!important}
.dark-visual-banner{margin-bottom:38px!important}
}
/* =========================================================
MARKETAIFLOW — MOBILE SERVING BADGE FINAL SIZE
Keep the complete message on one line at narrow widths.
========================================================= */
@media (max-width:767px){
.hero-serving{
font-size:8px!important;
letter-spacing:.025em!important;
padding:8px 10px!important;
gap:7px!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
}
.hero-serving i{width:6px!important;height:6px!important;flex:0 0 6px!important}
}
@media (max-width:479px){
.hero-serving{font-size:7.2px!important;letter-spacing:.018em!important;padding:8px 9px!important;gap:6px!important}
.hero-serving i{width:6px!important;height:6px!important;flex-basis:6px!important}
}
@media (max-width:374px){
.hero-serving{font-size:6.45px!important;letter-spacing:.008em!important;padding:8px 8px!important;gap:5px!important}
}
/* =========================================================
MARKETAIFlow — FINAL FOOTER TOP SPACING
Keep the footer close to the preceding content without
changing the footer's internal layout.
========================================================= */
footer{padding-top:24px!important}
@media (max-width:1000px){footer{padding-top:20px!important}}
@media (max-width:767px){footer{padding-top:16px!important}.contact-section{padding-bottom:24px!important}}
@media (max-width:374px){footer{padding-top:12px!important}.contact-section{padding-bottom:20px!important}}
/* Final mobile hero serving badge — exact compact tuning */
@media (max-width: 767px){
.hero-v3-copy .hero-serving{
font-size:11px !important;
gap:0px !important;
letter-spacing:-0.02em !important;
line-height:1 !important;
padding:8px 7px !important;
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
flex-wrap:nowrap !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:clip !important;
}
.hero-v3-copy .hero-serving i{
width:6px !important;
height:6px !important;
flex:0 0 6px !important;
margin-right:0 !important;
}
}
@media (max-width:374px){
.hero-v3-copy .hero-serving{
font-size:11px !important;
gap:0px !important;
letter-spacing:-0.035em !important;
padding-left:5px !important;
padding-right:5px !important;
}
}
/* =========================================================
MARKETAIFlow — FINAL LOGO SIZE BOOST
Supplied full wordmark is intentionally larger across
desktop, laptop, tablet and mobile while keeping the
header controls balanced.
========================================================= */
.logo-full{width:190px!important}
@media (max-width:1439px){.logo-full{width:180px!important}}
@media (max-width:1279px){.logo-full{width:170px!important}}
@media (max-width:1023px){.logo-full{width:160px!important}}
@media (max-width:767px){.logo-full{width:152px!important}}
@media (max-width:479px){.logo-full{width:145px!important}}
@media (max-width:374px){.logo-full{width:138px!important}}