/* Owner-approved raster atmosphere. Three.js renders the sculptures only. */
:root{--navy:#031025;--cyan:#48d9fa;--ink:#f4f5ff;--pearl:#eff5ff}
body{background:var(--navy)}
.site-header{background:#031025f2;backdrop-filter:blur(14px)}
.nav{min-height:88px;gap:24px}
.brand{gap:16px;font-size:20px;letter-spacing:-.035em}
.brand-mark{width:35px;height:44px}
.brand-wordmark{display:grid;gap:1px;line-height:1.2}
.brand-subtitle{font:400 8px/1.5 var(--mono);letter-spacing:.13em;color:#60dfff}
.nav-links{gap:16px;justify-content:center}
.nav-links a{padding:8px 5px;border:0;border-radius:0;font-size:13px}
.nav-links .nav-home{display:none}
.lang button{position:relative;color:#a49ac8;padding:7px 9px;font-size:11px}
.lang button+button{border:0}
.lang button+button::before{content:"";position:absolute;left:0;top:11px;height:10px;border-left:1px solid #8171c4}
.lang button[aria-pressed=true]::after{content:"";position:absolute;left:9px;right:9px;bottom:0;height:1px;background:#3cddff}
.hero,.section{background:var(--navy)}
.hero{min-height:0}
.hero::before{background:url('./atmosphere/hero-v3.webp') center bottom/100% 100% no-repeat;opacity:1}
.hero::after{display:block;z-index:2;inset:auto 0 -1px;height:235px;background:url('./atmosphere/foreground-v3.webp') center bottom/100% 100% no-repeat;pointer-events:none;clip-path:none;opacity:1;mix-blend-mode:normal}
.section::before{background:linear-gradient(180deg,var(--navy),transparent 20%),url('./atmosphere/dark-v2.webp') center/cover no-repeat;opacity:1}
.section::after{height:180px;background:url('./atmosphere/hero-v2.webp') center bottom/100% 450px no-repeat;mask-image:linear-gradient(transparent,#000 25%);clip-path:none}
.light-section{background:var(--pearl);--ink:#101538;--muted:#414a78;--quiet:#59618e;--line:#7388cf30}
.light-section::before{background:linear-gradient(180deg,var(--pearl) 5%,#eff5fff0 21%,#eff5ffd9 70%,transparent),url('./atmosphere/pearl-v2.webp') center bottom/cover no-repeat}
.light-section::after{height:160px;background:url('./atmosphere/pearl-v2.webp') center bottom/100% 600px no-repeat;mask-image:linear-gradient(transparent,#000 35%)}
#problems::before{background:linear-gradient(180deg,var(--pearl) 19%,transparent 39%),url('./atmosphere/pearl-v2.webp') center bottom/100% 100% no-repeat}
#problems::after{display:none}
#portfolio::after{background:linear-gradient(transparent,#031025);mask-image:none}
.hero-inner{grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:26px;min-height:clamp(568px,49vw,710px);padding:10px 0 60px}
.hero-copy{gap:22px;position:relative;z-index:3}
.hero-brandline{font-size:10px;letter-spacing:.09em;color:#c5c5e9}
.hero h1{font-size:clamp(44px,4.2vw,60px);line-height:1.065;letter-spacing:-.045em}
.hero p{font-size:19px;line-height:1.55;max-width:475px;color:#d7d8eb}
.title-accent{color:#47d5f3}
.light-section .title-accent{color:#5b20ff;-webkit-text-fill-color:#5b20ff}
.btn.primary{background:linear-gradient(110deg,#5748ff,#4b42ef);border-color:#928aff57;box-shadow:0 4px 25px #3032f32b}
.btn.primary:hover{background:linear-gradient(110deg,#6b5bff,#554cff);box-shadow:0 4px 25px #5042ff4d}
.hero .btn.primary::after{content:"→";font-size:21px;font-weight:400;margin-left:8px;line-height:1}
.hero .actions .btn:not(.primary){border-color:#9a80d9aa}
.hero .actions .btn:not(.primary)::after{content:"→";font-size:21px;margin-left:5px}
.hero .hero-proof{font-size:13px;margin-top:6px}
.hero-proof a{gap:15px;position:relative;min-height:52px;color:#c3c4e7}
.hero-proof a::before{content:"";width:40px;height:44px;background:url('./proof-symbol.svg') center/contain no-repeat;filter:drop-shadow(0 0 7px #6458fb6e);flex-shrink:0}
.hero-proof a::after{content:"→";font-size:22px;color:#dbdef5;margin-left:2px}
.hero-proof a{border-top:1px solid #6180d22e;padding-top:9px}
.section-head h2{font-size:clamp(34px,2.8vw,40px);font-weight:600;letter-spacing:-.035em;line-height:1.15}
.section-head p{font-size:19px;line-height:1.55}
.eyebrow,.section-head .eyebrow{font-size:11px;color:#c5d2f0;letter-spacing:.1em;display:flex;align-items:center;gap:15px}
.eyebrow::before{content:"["}.eyebrow::after{content:"]";border-right:40px solid #7b91cd33;padding-right:15px;line-height:1px}
.light-section .eyebrow{color:#313b8b}
#problems{padding:30px 0 110px}
#problems .section-head{margin-bottom:25px;max-width:calc(100% - 190px)}
.problem-grid{max-width:calc(100% - 240px);column-gap:48px}
.problem-card,.light-section .problem-card{padding:19px 0;grid-template-columns:36px minmax(0,1fr);gap:2px 17px;border-top:0;border-bottom:1px solid #899ded33}
.problem-card:nth-last-child(-n+2){border-bottom:0}
.problem-card h3{font-size:17px;line-height:1.3;margin:0}
.problem-card p{font-size:14px;line-height:1.5;color:#565b9c;margin:0}
.problem-glyph{width:34px;height:38px;color:#3d76ff;align-self:center;padding:0;display:grid;place-items:center}
.problem-glyph svg{width:32px;height:34px;stroke-width:1.35;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px #5ea8ff26)}
.hero-artifact .artifact-stage-shell{height:540px}
.hero-artifact .artifact-stage-shell{overflow:visible}
.hero-artifact{isolation:auto}
.hero-artifact .caption-pair{z-index:4}
.hero-artifact .artifact-scene-surface{mask-image:linear-gradient(to right,transparent,#000 24%,#000 83%,transparent),linear-gradient(to bottom,transparent 34%,#000 54%,#000 80%,transparent 100%);mask-composite:intersect}
.artifact-viewport::before{display:none}
.artifact-viewport canvas{position:relative;z-index:1}
.artifact-fallback{position:absolute;z-index:1}
.hero-system-inputs{left:-12px;top:29%;height:32%;gap:12px;font:11px/1.4 var(--sans);color:#e1e9ff;z-index:5}
.hero-system-inputs>span{gap:8px;padding:0 6px 0 0;border:1px solid #637bd56e;border-radius:5px;background:linear-gradient(100deg,#071933ed,#0c1949a6);box-shadow:0 0 12px #3254d42b;min-height:40px}
.hero-system-inputs svg{box-sizing:content-box;flex-shrink:0;width:23px;height:23px;padding:9px;border:1px solid #91baffad;border-radius:4px;background:#081b43e6;stroke:#f1f6ff;stroke-width:1.7;filter:drop-shadow(0 0 5px #5c91ff9c)}
.hero-system-output{font-size:11px;max-width:120px;padding:9px;border-color:#89a3ffd9;box-shadow:0 0 16px #4568f36b;top:45%;background:#0b1a3af0;z-index:5;color:#e1edff}
.hero-system-output svg{width:28px;height:28px;flex-shrink:0;stroke:#f4f5ff;stroke-width:1.8;filter:drop-shadow(0 0 4px #6da7ff96)}
.hero-system-lines{stroke:#a6dcff;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px #4464ffed);opacity:1;z-index:4;overflow:visible}
.hero-system-lines circle{fill:#e6f8ff;filter:drop-shadow(0 0 4px #318aff)}
.hero-artifact .artifact-caption{background:none;max-width:180px;padding:4px;gap:7px}
.caption-pair .artifact-caption .caption-copy h3{font-size:11px;letter-spacing:.1em}
.caption-pair .artifact-caption .caption-copy p{font:400 11px/1.4 var(--sans);color:#b6c9ec}
.hero-artifact [data-artifact-caption="01"]{left:45px;top:8px}
.hero-artifact [data-artifact-caption="07"]{right:0;top:100px;max-width:150px}
.hero-artifact .artifact-viewport{width:calc(100% - 70px);margin-left:70px}
.hero-artifact .artifact-caption{z-index:5}
.service-card{background:linear-gradient(120deg,#07132bdc,#0b1231d9);border-color:#5269ba85}
.service-card[open]{background:linear-gradient(120deg,#211e6190,#0c1534d9);border-color:#8b78ffbd;box-shadow:inset 0 0 20px #4b3b9f16}
.service-controls button[aria-selected=true]{background:linear-gradient(110deg,#5145f7,#4e3fed);border-color:#8377ff;color:#fff}
.service-icon svg,.service-illustration svg{stroke-width:1.25;filter:drop-shadow(0 0 3px #8274f94d)}
.diagram-structure{fill:#3d47c912;stroke:#9d96ff}
.diagram-node{fill:#d5d4ff;filter:drop-shadow(0 0 3px #8b88ff)}
.diagram-grid{stroke:#6c81d764}.diagram-callout{stroke:#829cffab}
.service-illustration{color:#afadff;filter:drop-shadow(0 0 10px #4d4ad033)}
@media(min-width:1280px){.hero-artifact{width:calc(100% + 80px)}}
@media(min-width:721px) and (max-width:1100px){
 .nav{gap:16px}.nav-links{gap:15px}.nav-links a{font-size:12px}.brand{font-size:19px;gap:13px}
 .hero-artifact .artifact-stage-shell{height:500px}.hero-artifact{width:calc(100% + 20px);margin-left:-12px}
 .hero-inner{gap:15px}.hero h1{font-size:44px}.hero p{font-size:18px}.hero-copy{gap:19px}
 .hero-system-inputs{font-size:9px;gap:9px}.hero-system-inputs svg{width:20px;height:20px;padding:8px}
 .hero-system-output{font-size:10px;max-width:105px;padding:8px}.hero-system-output svg{width:25px;height:25px}
 .hero-artifact [data-artifact-caption="01"]{left:26px}.hero-artifact [data-artifact-caption="07"]{max-width:130px;top:87px}
 .problem-grid{max-width:calc(100% - 200px);column-gap:35px}.problem-card h3{font-size:16px}.problem-card p{font-size:13px}
 .problem-card,.light-section .problem-card{gap:2px 14px}.section-head h2{font-size:36px}
}
@media(min-width:721px) and (max-width:850px){
 .nav{gap:10px}.brand{font-size:16px}.brand-subtitle{font-size:7px}.brand-mark{width:28px}.nav-links{gap:10px}.nav-links a{font-size:11px;padding-inline:2px}
 .hero h1{font-size:37px}.hero-brandline{font-size:8px}.hero p{font-size:17px}
 .hero-artifact .artifact-stage-shell{height:410px}.hero-proof a{gap:9px}.hero .hero-proof{font-size:11px}
 .problem-grid{max-width:calc(100% - 150px);column-gap:22px}.problem-glyph svg{width:26px;height:29px}.problem-card,.light-section .problem-card{grid-template-columns:28px minmax(0,1fr);gap:2px 10px}
}
@media(max-width:720px){
 .nav{min-height:70px;gap:8px}.brand{font-size:15px;gap:9px}.brand-mark{width:29px;height:36px}.brand-subtitle{font-size:6px;letter-spacing:.08em}.lang button{font-size:11px;padding:7px}
 .nav-links{gap:0}.nav-links a{font-size:15px;padding:12px 15px}.nav-links .nav-home{display:block}
 .hero-inner{grid-template-columns:1fr;min-height:0;padding:28px 0 115px;gap:9px}.hero-copy{gap:16px}
 .hero h1{font-size:clamp(38px,9.7vw,50px)}.hero p{font-size:17px;line-height:1.5}.hero-brandline{font-size:8px;letter-spacing:.045em}
 .hero::before{background-size:auto 100%;background-position:62% bottom}
 .hero .hero-proof{font-size:11px;margin-top:2px}.hero-proof a{gap:10px;min-height:43px;padding-top:6px}.hero-proof a::before{width:29px;height:32px}.hero-proof a::after{font-size:19px}
 .hero .btn.primary::after,.hero .actions .btn:not(.primary)::after{font-size:18px;margin-left:3px}
 .hero-artifact{width:100%;margin:0}.hero-artifact .artifact-stage-shell{height:300px}
 .hero-artifact .artifact-viewport{width:calc(100% - 38px);margin-left:38px}
 .hero-system-inputs{left:0;font-size:8px;top:29%;height:33%;gap:5px}.hero-system-inputs>span{gap:5px;min-height:26px;padding:0 3px 0 0}
 .hero-system-inputs svg{width:15px;height:15px;padding:5px}
 .hero-system-output{top:36%;right:0;max-width:82px;padding:5px;gap:5px;font-size:8px}.hero-system-output svg{width:19px;height:19px}
 .hero-system-lines{stroke-width:1.2}
 .hero-artifact .artifact-caption{position:static;max-width:none;padding:4px 0;min-height:44px}
 .hero-artifact .caption-pair{position:relative;padding:6px 8px;background:linear-gradient(90deg,#031025f2,#031025b3);border-radius:4px}
 .caption-pair .artifact-caption .caption-copy h3{font-size:10px!important}.caption-pair .artifact-caption .caption-copy p{font-size:10px!important}
 .section::after,.light-section::after{height:96px;background-size:760px 316px}
 .light-section::before{background-size:auto 100%;background-position:left bottom}
 #problems{padding:36px 0 112px}#problems::before{background:linear-gradient(180deg,var(--pearl),#eff5ffed 18%,#eff5ffc9 79%,transparent),url('./atmosphere/pearl-v2.webp') right bottom/auto 100% no-repeat}
 #problems .section-head{max-width:100%}.section-head h2{font-size:31px;line-height:1.15}.section-head p{font-size:17px}.eyebrow,.section-head .eyebrow{font-size:9px;gap:9px}
 .problem-grid{max-width:100%;column-gap:0}.problem-card,.light-section .problem-card{padding:16px 0;gap:2px 14px;grid-template-columns:32px minmax(0,1fr)}.problem-card h3{font-size:17px}.problem-card p{font-size:14px}.problem-card:nth-last-child(2){border-bottom:1px solid #899ded33}
 .problem-glyph{width:30px}.problem-glyph svg{width:29px;height:31px}
 .hero::after{height:160px;background-size:auto 100%;background-position:62% bottom}
}
@media(max-width:390px){.brand{font-size:13px}.brand-subtitle{font-size:5.8px}.brand-mark{width:27px}.hero h1{font-size:39px}.hero-copy{gap:13px}.hero-system-inputs{font-size:7px}.hero-system-output{font-size:7px;max-width:69px}.hero .actions .btn{padding-inline:10px}.hero-artifact .artifact-stage-shell{height:285px}}

.service-body p{font-size:clamp(14px,1.18vw,17px);line-height:1.6}
.service-card summary{min-height:70px}.service-card[open] summary{min-height:62px}
.service-body{padding:20px 24px;grid-template-columns:minmax(0,1fr) 170px;gap:8px 22px}
.service-body .btn{font-size:11px;min-height:34px;padding:5px 10px;background:none;border-color:#8270dc73;color:#cfc6ff}
.service-illustration{grid-row:1;width:100%;align-self:center}.service-artifact{padding-top:25px}
.service-card{position:relative}
@media(min-width:851px){
 .service-card[open] summary{grid-template-columns:26px minmax(0,1fr);padding-right:170px}
 .service-card[open] summary .service-icon,.service-card[open] summary::after{display:none}
 .service-card[open] .service-body>.btn{position:absolute;top:18px;right:20px;min-height:28px;padding:0;border:0;border-bottom:1px solid #8270dc73;border-radius:0;background:none;margin:0;font-weight:400;font-size:12px}
 .service-card[open] .service-body>.btn::after{content:"→";margin-left:7px;font-size:19px}
 .service-highlights{grid-column:1/-1}
}
@media(min-width:721px){.wrap{width:min(var(--max),calc(100% - 64px))}.section .wrap{width:min(var(--max),calc(100% - 104px))}}
@media(min-width:721px) and (max-width:1100px){.services-layout{grid-template-columns:minmax(0,1fr) 230px;gap:30px}.service-body{grid-template-columns:minmax(0,1fr) 150px;padding:18px 20px}.service-body p{font-size:14px}.service-highlights{grid-column:1/-1}}
@media(max-width:720px){.service-body{grid-template-columns:minmax(0,1fr) 86px;padding:18px 14px;gap:9px}.service-body p{font-size:15px}.service-body .btn{font-size:12px;min-height:40px}}

/* Keep the dark-side terrain; bring the following pearl content closer. */
.section.light-section{padding-top:10px;margin-top:-24px}
#problems{padding-top:10px}

/* One continuous pearl terrain strip crosses each light-to-dark boundary.
   The incoming section keeps its own right-hand ornament beneath the fade. */
.light-section::before{mask-image:linear-gradient(to bottom,#000 60%,transparent 78%)}
.light-section::after{display:none}
.light-section + .section{
 --seam-before:180px;--seam-after:180px;--seam-image-height:600px;
 overflow:visible;
 background:linear-gradient(180deg,var(--navy),transparent 20%),url('./atmosphere/dark-v2.webp') center/cover no-repeat,var(--navy)
}
.light-section + .section::before{
 inset:calc(-1 * var(--seam-before)) 0 auto;
 height:calc(var(--seam-before) + var(--seam-after));z-index:-1;
 background:url('./atmosphere/pearl-v2.webp') center bottom/100% var(--seam-image-height) no-repeat;
 mask-image:linear-gradient(transparent,#000 24%,#000 53%,transparent)
}
#services{--seam-before:110px}
/* Background bleed must not enable the previously clipped sticky artwork. */
.light-section + .section .service-artifact{position:relative;top:auto}
@media(max-width:720px){
 .section.light-section{padding-top:8px;margin-top:-12px}
 #problems{padding-top:8px}
 .light-section::before{mask-image:linear-gradient(to bottom,#000 58%,transparent 74%)}
 .light-section + .section{--seam-before:112px;--seam-after:112px;--seam-image-height:400px}
 #services{--seam-before:112px}
}