/* Berri Solutions — production overrides. Loaded last intentionally. */
:root{--prod-bg:#06101e;--prod-panel:#0a192c;--prod-line:rgba(108,205,255,.13);--prod-cyan:#58d9ff;--prod-blue:#168cff}
html{background:var(--prod-bg)}
body{background:var(--prod-bg)!important;color:#f4f8ff;position:relative;overflow-x:hidden;isolation:isolate}

/* Top: dark everywhere. ONLY the logo receives a local white radial halo. */
.site-header{position:relative!important;top:auto!important;z-index:40!important;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;padding:18px 0 8px!important;overflow:visible!important}
.site-header::before,.site-header::after{content:none!important;display:none!important;background:none!important}
.header-stack{position:relative!important;z-index:2!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:12px!important;padding:0!important}
.brand-logo{position:relative!important;isolation:isolate!important;width:min(295px,61vw)!important;margin:0 auto!important;padding:7px 10px!important;filter:none!important}
.brand-logo::before{content:""!important;display:block!important;position:absolute!important;z-index:-1!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:430px!important;height:245px!important;max-width:96vw!important;border-radius:50%!important;background:radial-gradient(circle at center,rgba(255,255,255,1) 0%,rgba(255,255,255,.98) 31%,rgba(255,255,255,.88) 44%,rgba(229,241,253,.50) 56%,rgba(164,208,247,.17) 67%,rgba(31,91,145,.04) 75%,transparent 80%)!important;filter:blur(4px)!important;pointer-events:none!important}
.brand-logo img{position:relative!important;z-index:1!important;width:100%!important;height:auto!important;display:block!important}
.main-nav{position:relative!important;z-index:4!important;margin:7px 0 0!important;padding:6px!important;background:rgba(7,20,37,.88)!important;border:1px solid rgba(98,198,255,.14)!important;border-radius:999px!important;box-shadow:0 16px 46px rgba(0,0,0,.22)!important;backdrop-filter:blur(14px)!important}
.main-nav a{color:#e8f2ff!important;background:transparent!important;font-size:15px!important}
.main-nav a:hover,.main-nav a:focus-visible{color:#fff!important;background:rgba(80,185,255,.11)!important}
.main-nav .nav-cta{color:#fff!important;background:linear-gradient(135deg,#168cff,#7368ff)!important}

/* Kill every legacy white/grey band under the header. */
main,#contenu,.hero,.service-hero,.blog-hero,.article-top,.legal-hero{background:transparent!important;background-image:none!important;border-top:0!important;box-shadow:none!important}
.hero::before,.hero::after,.service-hero::before,.service-hero::after,.article-top::before,.article-top::after{background:none!important;content:none!important;display:none!important}
.hero{padding-top:36px!important}

/* Lightweight animated data/security atmosphere: CSS only, no video/GIF. */
.tech-flow-bg{position:fixed!important;inset:0!important;z-index:0!important;pointer-events:none!important;overflow:hidden!important;opacity:1!important;background:radial-gradient(circle at 10% 20%,rgba(22,140,255,.10),transparent 28%),radial-gradient(circle at 88% 26%,rgba(69,210,255,.07),transparent 25%),radial-gradient(circle at 62% 74%,rgba(100,88,255,.055),transparent 30%)!important}
.tech-flow-bg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(79,175,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(79,175,255,.07) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.92),rgba(0,0,0,.2));animation:prodGrid 30s linear infinite}
.tech-flow-bg::after{content:"";position:absolute;inset:-15%;background:conic-gradient(from 90deg at 50% 50%,transparent 0 18%,rgba(51,181,255,.045) 23%,transparent 28% 52%,rgba(115,101,255,.04) 57%,transparent 62%);animation:prodAura 40s linear infinite}
.tech-flow-bg i{position:absolute!important;display:block!important;width:76vw!important;height:30vh!important;border-top:1px solid rgba(84,202,255,.22)!important;border-radius:50%!important;filter:drop-shadow(0 0 10px rgba(48,166,255,.10))!important;animation:prodFlow 24s ease-in-out infinite!important}
.tech-flow-bg i:nth-of-type(1){left:-24vw;top:16vh;transform:rotate(8deg)}.tech-flow-bg i:nth-of-type(2){right:-25vw;top:29vh;transform:rotate(-12deg);animation-delay:-6s!important}.tech-flow-bg i:nth-of-type(3){left:7vw;top:48vh;width:88vw!important;transform:rotate(4deg);animation-delay:-12s!important}.tech-flow-bg i:nth-of-type(4){right:-8vw;top:68vh;transform:rotate(-7deg);animation-delay:-18s!important}.tech-flow-bg i:nth-of-type(5){left:-14vw;top:83vh;width:90vw!important;transform:rotate(11deg);animation-delay:-9s!important}
.tech-flow-bg b{position:absolute;display:block;width:7px;height:7px;border-radius:50%;background:rgba(83,211,255,.86);box-shadow:0 0 0 4px rgba(83,211,255,.055),0 0 20px rgba(83,211,255,.28);animation:prodNode 7s ease-in-out infinite}
.tech-flow-bg b:nth-of-type(1){left:8%;top:22%;animation-delay:-1s}.tech-flow-bg b:nth-of-type(2){left:22%;top:48%;animation-delay:-3s}.tech-flow-bg b:nth-of-type(3){left:37%;top:16%;animation-delay:-5s}.tech-flow-bg b:nth-of-type(4){left:49%;top:62%;animation-delay:-2s}.tech-flow-bg b:nth-of-type(5){left:63%;top:34%;animation-delay:-6s}.tech-flow-bg b:nth-of-type(6){left:76%;top:18%;animation-delay:-4s}.tech-flow-bg b:nth-of-type(7){left:89%;top:54%;animation-delay:-1.5s}.tech-flow-bg b:nth-of-type(8){left:14%;top:77%;animation-delay:-5.5s}.tech-flow-bg b:nth-of-type(9){left:31%;top:88%;animation-delay:-2.5s}.tech-flow-bg b:nth-of-type(10){left:58%;top:82%;animation-delay:-4.5s}.tech-flow-bg b:nth-of-type(11){left:71%;top:71%;animation-delay:-.5s}.tech-flow-bg b:nth-of-type(12){left:94%;top:86%;animation-delay:-3.5s}
@keyframes prodGrid{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-18px,12px,0)}100%{transform:translate3d(0,0,0)}}
@keyframes prodAura{to{transform:rotate(360deg)}}
@keyframes prodFlow{0%,100%{translate:0 0;opacity:.25}50%{translate:4vw -1.2vh;opacity:.85}}
@keyframes prodNode{0%,100%{transform:scale(.7);opacity:.24}50%{transform:scale(1.25);opacity:.95}}

/* Anti-bot honeypot MUST exist but MUST never appear to a visitor. */
.hp-field{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.hp-field label,.hp-field input{width:1px!important;height:1px!important;padding:0!important;margin:0!important;border:0!important}

/* Editorial layout: no ultra-narrow columns / word-by-word wrapping. */
.article-top-grid{display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;gap:50px!important;align-items:center!important}
.article-cover-wrap,.article-cover{min-width:0!important;width:100%!important}.article-cover img{display:block!important;width:100%!important;height:auto!important}
.article-layout{grid-template-columns:270px minmax(0,1fr)!important;gap:36px!important}.article-content{min-width:0!important;max-width:none!important}.article-content p,.article-section p{width:auto!important;max-width:820px!important;word-break:normal!important;overflow-wrap:break-word!important;white-space:normal!important}
.article-section p{font-size:1.08rem!important;line-height:1.92!important}.article-side-card p,.article-toc a{word-break:normal!important;overflow-wrap:break-word!important;white-space:normal!important}
.article-cover-note{display:none!important}

/* Clean cards and readable client-facing UI. */
.contact-shell,.service-card,.blog-card,.life-step,.virage-note,.final-cta-card,.service-summary-card,.scenario-card,.article-toc,.article-side-card,.article-inline-visual,.article-links-box,.sources-box,.article-cta{background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.022))!important;border-color:rgba(121,207,255,.10)!important}

@media(max-width:980px){.article-top-grid,.article-layout{grid-template-columns:1fr!important}.article-sidebar{position:static!important}.brand-logo{width:min(280px,66vw)!important}.brand-logo::before{width:390px!important;height:225px!important}}
@media(max-width:780px){.site-header{padding-top:14px!important}.brand-logo{width:min(235px,64vw)!important}.brand-logo::before{width:325px!important;height:190px!important}.main-nav{max-width:calc(100vw - 22px)!important;overflow-x:auto!important;justify-content:flex-start!important}.tech-flow-bg b{width:5px;height:5px}.article-section p{font-size:1.02rem!important;line-height:1.82!important}}
@media(prefers-reduced-motion:reduce){.tech-flow-bg::before,.tech-flow-bg::after,.tech-flow-bg i,.tech-flow-bg b{animation:none!important}}


/* Content sits above the animated technology layer. */
.site-header, main, .site-footer{position:relative!important;z-index:1!important}
.floating-contact,.cookie-consent,.skip-link{z-index:9996}

/* Absolute kill-switch for any legacy header band. */
.site-header:after,.site-header::after{content:none!important;display:none!important;width:0!important;height:0!important;background:none!important;box-shadow:none!important;border:0!important}
.site-header + main,.site-header + #contenu{border-top:0!important;box-shadow:none!important;background-image:none!important}

/* Visible but light abstract data/security motion. */
.tech-flow-bg .data-ring{position:absolute;width:220px;height:220px;border:1px solid rgba(94,214,255,.11);border-radius:50%;animation:prodRing 16s linear infinite}
.tech-flow-bg .data-ring.r1{left:6%;top:32%}.tech-flow-bg .data-ring.r2{right:8%;top:58%;width:310px;height:310px;animation-duration:23s;animation-direction:reverse}
.tech-flow-bg .data-ring:before,.tech-flow-bg .data-ring:after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:#59d8ff;box-shadow:0 0 18px rgba(89,216,255,.5)}
.tech-flow-bg .data-ring:before{left:50%;top:-5px}.tech-flow-bg .data-ring:after{right:-5px;top:50%}
@keyframes prodRing{to{transform:rotate(360deg)}}


/* ===== FULL RELEASE: DARK BRAND, VISIBLE MOTION, RESPONSIVE ===== */
:root{--full-cyan:#58ddff;--full-blue:#238cff;--full-violet:#7768ff;--full-green:#4de6b0}
body{background:radial-gradient(circle at 50% -12%,#102944 0,#071628 30%,#06101e 62%,#040b15 100%)!important}
.tech-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.95;mix-blend-mode:screen}
.tech-flow-bg{opacity:.42!important;z-index:0!important}
.tech-flow-bg::before{background-size:64px 64px!important;opacity:.72!important}
.site-header,main,.site-footer{z-index:2!important}

/* No white or light panel in the header. The white logo is used directly on dark. */
.site-header{padding:20px 0 12px!important;background:transparent!important}
.brand-logo{width:min(270px,58vw)!important;padding:0!important;filter:drop-shadow(0 0 22px rgba(45,166,255,.16))!important}
.brand-logo::before{display:none!important;content:none!important;background:none!important}
.brand-logo img{filter:drop-shadow(0 8px 24px rgba(0,0,0,.28))!important}
.main-nav{margin-top:10px!important;background:rgba(8,25,45,.78)!important;border-color:rgba(104,205,255,.16)!important;box-shadow:0 18px 48px rgba(0,0,0,.26)!important}

/* More visual, less oversized typography */
.hero{padding:46px 0 86px!important}
.hero-grid{gap:58px!important;align-items:center!important}
.hero-title{font-size:clamp(48px,5.3vw,74px)!important;line-height:1.02!important;letter-spacing:-3.2px!important;max-width:690px!important}
.hero-lead{font-size:1.04rem!important;line-height:1.76!important;max-width:690px!important}
.section-title{font-size:clamp(36px,4vw,52px)!important;line-height:1.08!important;letter-spacing:-2.2px!important}
.section-title.compact{font-size:clamp(32px,3.5vw,46px)!important}
.contact-heading h2{font-size:clamp(36px,4vw,50px)!important}
.service-hero h1{font-size:clamp(46px,5vw,66px)!important;letter-spacing:-2.8px!important}
.article-top h1,.blog-hero h1,.legal-hero h1{font-size:clamp(40px,4.8vw,62px)!important;letter-spacing:-2.5px!important}
.section-copy{font-size:1rem!important;line-height:1.75!important}

/* Vibrant hero app/workflow */
.workflow-visual{position:relative!important;perspective:1000px!important}
.workflow-visual::before{content:"";position:absolute;inset:8% -8% 5% -6%;background:radial-gradient(circle at 30% 28%,rgba(48,215,255,.22),transparent 32%),radial-gradient(circle at 75% 65%,rgba(119,104,255,.22),transparent 34%);filter:blur(40px);z-index:-1;animation:heroAura 6s ease-in-out infinite alternate}
.app-shell{position:relative!important;overflow:hidden!important;background:linear-gradient(145deg,rgba(7,28,51,.96),rgba(8,20,43,.94) 58%,rgba(27,20,62,.92))!important;border:1px solid rgba(103,220,255,.24)!important;box-shadow:0 34px 90px rgba(0,0,0,.38),0 0 50px rgba(38,148,255,.09)!important;transform:rotateY(-2deg) rotateX(1deg)!important}
.app-shell::before{content:"";position:absolute;inset:-70% -35%;background:linear-gradient(100deg,transparent 37%,rgba(87,221,255,.10) 47%,rgba(128,102,255,.12) 52%,transparent 62%);animation:heroSweep 5.5s linear infinite;pointer-events:none;z-index:4}
.app-topbar{background:linear-gradient(90deg,rgba(23,72,114,.36),rgba(46,35,104,.25))!important}
.flow-node{transition:transform .45s ease,border-color .45s ease,background .45s ease,box-shadow .45s ease!important}
.flow-node.active{transform:translateX(5px) scale(1.012)!important;border-color:rgba(91,225,255,.42)!important;background:linear-gradient(100deg,rgba(31,144,255,.17),rgba(116,94,255,.11))!important;box-shadow:0 0 32px rgba(43,170,255,.10)!important}
.flow-node.active .flow-node-icon{background:linear-gradient(135deg,#168cff,#765fff)!important;color:#fff!important;box-shadow:0 0 22px rgba(44,154,255,.28)!important}
.flow-link span{background:linear-gradient(180deg,rgba(64,210,255,.25),rgba(116,95,255,.12))!important}.flow-link.active span{box-shadow:0 0 15px rgba(79,216,255,.34)!important}
.live-badge{color:#8af1c4!important;border-color:rgba(77,230,176,.25)!important;background:rgba(77,230,176,.07)!important}.live-badge span{box-shadow:0 0 13px rgba(77,230,176,.9)!important}
@keyframes heroSweep{0%{transform:translateX(-28%) rotate(8deg)}100%{transform:translateX(28%) rotate(8deg)}}
@keyframes heroAura{from{transform:scale(.96);opacity:.7}to{transform:scale(1.05);opacity:1}}

/* Service cards: visual density and consistent CTA placement */
.services-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
.service-card{min-height:315px!important;padding:25px 22px!important;display:flex!important;flex-direction:column!important}
.service-card h3{font-size:1.28rem!important}.service-card>p{font-size:.96rem!important;line-height:1.65!important}.service-example{margin-top:auto!important;font-size:.91rem!important;line-height:1.58!important}.service-link{margin-top:16px!important;padding-top:10px!important}
.service-icon{background:linear-gradient(145deg,rgba(30,147,255,.18),rgba(114,99,255,.12))!important;border:1px solid rgba(94,213,255,.12)!important}

/* Ensure animated background remains visible between cards/sections */
.section,.services-section,.lifecycle-section,.blog-section,.contact-section,.final-cta-section,.service-detail-section,.outcome-section,.blog-index-section{background:transparent!important}
.section:before,.section:after{pointer-events:none}

/* Responsive — desktop, tablet, phone */
@media(max-width:1120px){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.hero-grid{grid-template-columns:1fr!important}.hero-copy{max-width:820px}.workflow-visual{max-width:820px;width:100%;margin:0 auto}.app-shell{transform:none!important}}
@media(max-width:860px){.hero-title{font-size:clamp(44px,9vw,62px)!important}.section-title{font-size:clamp(34px,7vw,46px)!important}.service-hero h1{font-size:clamp(42px,8vw,58px)!important}.main-nav{width:auto!important;max-width:calc(100vw - 24px)!important}.main-nav a{font-size:14px!important}.availability-pill{max-width:100%}.proof-line{display:grid!important;grid-template-columns:1fr 1fr!important}.service-card{min-height:290px!important}}
@media(max-width:640px){.brand-logo{width:min(220px,64vw)!important}.site-header{padding-top:14px!important}.main-nav{border-radius:18px!important;width:calc(100vw - 24px)!important;display:grid!important;grid-template-columns:1fr 1fr!important;overflow:visible!important;padding:6px!important}.main-nav a{text-align:center!important;padding:10px 8px!important}.main-nav .nav-cta{grid-column:1/3!important}.hero{padding-top:32px!important}.hero-grid{gap:38px!important}.hero-title{font-size:clamp(41px,12vw,52px)!important;letter-spacing:-2.2px!important}.hero-lead{font-size:1rem!important;line-height:1.68!important}.availability-pill{border-radius:16px!important;padding:13px 14px!important}.availability-tags{width:100%!important;border-left:0!important;padding-left:0!important}.proof-line{grid-template-columns:1fr!important}.services-grid{grid-template-columns:1fr!important}.service-card{min-height:auto!important}.app-body{grid-template-columns:1fr!important}.app-sidebar{display:none!important}.flow-canvas{padding:16px 12px!important}.workflow-footer{grid-template-columns:1fr!important}.section{padding:64px 0!important}.section-title{font-size:36px!important}.section-head.split{grid-template-columns:1fr!important}.contact-shell{padding:26px 18px!important}.footer-main-grid{grid-template-columns:1fr!important}.footer-brand-col,.footer-links-col{grid-column:auto!important}.article-layout,.article-top-grid,.service-detail-grid,.service-hero-grid{grid-template-columns:1fr!important}.tech-canvas{opacity:.72}.tech-flow-bg{opacity:.26!important}}
@media(max-width:420px){.main-nav a{font-size:13px!important}.hero-title{font-size:39px!important}.section-title{font-size:32px!important}.btn{width:100%!important;justify-content:center!important}.hero-actions{display:block!important}.service-card h3{font-size:1.2rem!important}.floating-trigger .trigger-copy{display:none!important}}
@media(prefers-reduced-motion:reduce){.tech-canvas{display:none!important}.workflow-visual::before,.app-shell::before{animation:none!important}}