/* SYO WEB — October 2026. Layout, sculptural CSS 3D and responsive refinements. */
:root{--syo-radius:28px;--syo-ease:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:110px}
body{overflow-x:clip}
header.topbar{border-bottom:1px solid var(--line);backdrop-filter:blur(20px)}
body section#hero{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center!important;gap:2rem;height:auto!important;min-height:780px!important;min-height:min(880px,100svh)!important;padding:145px max(5vw,24px) 110px!important;text-align:left!important;isolation:isolate;background:radial-gradient(ellipse at 85% 35%,rgba(255,138,61,.13),transparent 55%),var(--bg)}
body section#hero .nz-vignette{display:none}
body section#hero #nzTilt{align-items:flex-start!important;transform:none!important;max-width:760px}
body section#hero .h-hero{font-family:var(--font-body);font-weight:700!important;font-size:clamp(2.5rem,4.6vw,5rem)!important;line-height:1.06!important;letter-spacing:-.065em!important;text-wrap:balance;max-width:14ch}
body section#hero .h-hero .text-accent{display:block;color:#ed782c}
body section#hero .nz-lead{font-size:clamp(1rem,1.4vw,1.16rem)!important;line-height:1.8!important;max-width:43ch;margin-top:25px!important}
body section#hero .nz-tilt>div{justify-content:flex-start!important}
body section#hero .nz-beam{animation:none!important;background:var(--accent)!important;padding:0!important;box-shadow:0 12px 30px -18px #c86019}
body section#hero .nz-beam .in{background:var(--accent)!important;color:#17110c!important;padding:12px 14px 12px 24px!important}
body section#hero .nz-beam .in i{background:#17110c!important;color:#fff!important}
.syo-kicker{display:flex;align-items:center;gap:10px;font:500 10px/1.5 'JetBrains Mono',monospace;letter-spacing:.14em;margin-bottom:30px;color:var(--dim)}
.syo-kicker>span{width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 5px rgba(255,138,61,.12)}
.syo-scene{position:relative;width:100%;height:530px;perspective:1100px;transform-style:preserve-3d;--scene-x:0deg;--scene-y:0deg;transform:rotateX(var(--scene-x)) rotateY(var(--scene-y));transition:transform .6s var(--syo-ease);pointer-events:none}
.syo-scene-grid{position:absolute;inset:8% -6% -3%;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:45px 45px;transform:rotateX(65deg) rotateZ(-15deg);mask-image:radial-gradient(ellipse,#000,transparent 70%);opacity:.6}
.syo-browser{position:absolute;left:12%;top:16%;width:73%;height:355px;background:#151515;border:1px solid #4b4540;color:#f8f4ed;border-radius:16px;transform:rotateY(-20deg) rotateX(10deg) rotateZ(-7deg);transform-style:preserve-3d;box-shadow:12px 16px 0 -7px #4a4036,25px 45px 65px -30px rgba(44,25,10,.48);animation:syo-browser-float 8s ease-in-out infinite}
.syo-browser-bar{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px 18px;border-bottom:1px solid #39332e;font:10px monospace;color:#a6a09b}
.syo-browser-bar>span:first-child{color:#ff9b57;letter-spacing:3px;font-size:8px}
.syo-browser-body{padding:27px 30px;background:radial-gradient(ellipse at 100% 70%,#54311d 0,transparent 65%);height:calc(100% - 46px);border-radius:0 0 15px 15px}
.syo-mini-label{font:8px monospace;letter-spacing:.18em;color:#aaa39a}
.syo-browser strong{display:block;font-family:var(--font-body);font-size:clamp(38px,4.2vw,64px);font-weight:650;letter-spacing:-.065em;line-height:.98;margin:19px 0}
.syo-browser strong em{font-style:normal;color:#ff9954}
.syo-mini-rule{display:block;height:1px;background:#514034}
.syo-mini-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:15px;font:8px monospace;letter-spacing:.1em;color:#a69c91}
.syo-mini-bottom b{display:grid;place-items:center;width:28px;height:28px;background:#ff9954;color:#17110c;font-size:17px;border-radius:50%}
.syo-sphere{position:absolute;right:1%;top:5%;width:165px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffe1bf 2%,#ffb065 23%,#ef7828 48%,#a8430f 74%,#5d260e);box-shadow:inset -15px -16px 35px #6e290d66,10px 40px 60px -25px #c85b2766;transform:translateZ(-100px);animation:syo-sphere-float 9s ease-in-out infinite}
.syo-orbit{position:absolute;left:0;top:13%;width:100%;height:75%;border:1px solid rgba(225,123,58,.38);border-radius:50%;transform:rotateX(68deg) rotateY(-12deg) rotateZ(-25deg)}
.syo-orbit-two{transform:rotateX(65deg) rotateY(30deg) rotateZ(48deg);border-color:var(--line)}
.syo-float{position:absolute;z-index:2;display:flex;gap:13px;align-items:center;background:var(--bg);color:var(--text);border:1px solid var(--line);padding:14px 18px;border-radius:14px;font-size:12px;font-weight:600;box-shadow:0 18px 40px -20px #48270b55;transform:translateZ(60px);animation:syo-badge-float 6s ease-in-out infinite}
.syo-float>span{color:#e47a32;font:600 23px monospace}
.syo-float-code{top:32%;left:-4%;rotate:-8deg}
.syo-float-seo{bottom:8%;right:-1%;rotate:6deg;animation-delay:-3s}
.syo-scene-caption{position:absolute;bottom:-20px;left:12%;font:9px monospace;letter-spacing:.18em;color:var(--dim)}
.syo-scroll-cue{position:absolute;left:max(5vw,24px);bottom:34px;display:flex;gap:30px;align-items:center;font:10px monospace;letter-spacing:.05em;color:var(--dim)}
.syo-scroll-cue span{font-size:22px;color:var(--accent)}
@keyframes syo-browser-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -16px;rotate:2deg}}
@keyframes syo-sphere-float{0%,100%{translate:0 0}50%{translate:-15px 20px}}
@keyframes syo-badge-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
.syo-scene.is-paused *{animation-play-state:paused!important}
.sec-wrap{max-width:1440px;margin-inline:auto}
.sec-head{padding-top:30px;padding-bottom:25px}
.sec-head h2{font-family:var(--font-body)!important;font-weight:650!important;letter-spacing:-.05em!important;line-height:1.1!important}
.sec-head .sh-no{border:1px solid var(--line);border-radius:50%;width:35px;height:35px;display:grid;place-items:center}
#services{border-radius:var(--syo-radius);margin:0 20px;box-shadow:0 24px 55px -40px #402b18}
#services .svc-row{border-radius:12px;transition:background .3s,translate .4s var(--syo-ease);padding-inline:18px}
#services .svc-row:hover{translate:6px 0;background:rgba(255,138,61,.09)}
#approach .ax-stage{border-radius:var(--syo-radius)!important;box-shadow:18px 24px 0 -16px rgba(255,138,61,.25),0 35px 70px -40px #25180e!important}
.fm-zone{padding-top:65px!important;background:var(--bg)!important}
.fm-wrap{width:min(1300px,90%)!important}
.fm-intro{display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid var(--line);padding-bottom:40px;margin-bottom:40px}
.fm-intro p{font:10px monospace;letter-spacing:.15em;color:var(--dim);margin-bottom:14px}
.fm-intro h2{font-family:var(--font-body);font-size:clamp(1.9rem,4vw,3.8rem);font-weight:650;line-height:1.1;letter-spacing:-.055em;max-width:20ch}
.fm-intro>a{display:grid;place-items:center;flex:0 0 76px;height:76px;border-radius:50%;background:var(--accent);color:#17110c;font-size:35px;transition:transform .4s var(--syo-ease)}
.fm-intro>a:hover{transform:rotate(45deg)}
.fm-socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;list-style:none;padding:0}
.fm-socials a,.fm-socials .social-pending{display:flex;align-items:center;gap:8px;min-height:42px;padding:10px 12px;border-radius:9px;border:1px solid var(--line);font-size:11px;font-weight:600;transition:background .3s,transform .3s,color .3s}
.fm-socials svg{width:16px;height:16px;fill:currentColor;flex:none}
.fm-socials a:hover,.fm-socials a:focus-visible{background:var(--accent);color:#17110c;transform:perspective(400px) translateY(-4px) rotateX(10deg)}
.fm-socials .social-pending{opacity:.55;cursor:default}
.syo-depth{transition:transform .7s var(--syo-ease),box-shadow .7s var(--syo-ease);transform:perspective(1000px) rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,0deg))}
@media(min-width:1600px){body section#hero{padding-inline:max(5vw,calc((100vw - 1450px)/2))!important}}
@media(max-width:1050px){body section#hero{grid-template-columns:1fr 1fr;gap:10px;padding-inline:30px!important}body section#hero .h-hero{font-size:clamp(2.2rem,4.5vw,4rem)!important}.syo-scene{height:450px}.syo-browser{height:315px}.syo-browser strong{font-size:47px}.syo-float{font-size:10px;padding:12px}.syo-sphere{width:125px}.syo-kicker{font-size:8px;letter-spacing:.07em}}
@media(max-width:760px){body section#hero{grid-template-columns:1fr;min-height:0!important;padding:130px 24px 80px!important;gap:20px}body section#hero #nzTilt{max-width:600px}body section#hero .h-hero{font-size:clamp(2.3rem,8.8vw,3.9rem)!important;max-width:17ch}body section#hero .nz-lead{font-size:1rem!important}.syo-kicker{font-size:9px;margin-bottom:22px}.syo-scene{height:390px;width:min(100%,480px);margin:auto}.syo-browser{top:11%;height:285px;left:14%;width:71%}.syo-browser strong{font-size:44px}.syo-browser-body{padding:20px 24px}.syo-browser-bar{padding:12px 16px}.syo-sphere{width:110px;top:1%;right:3%}.syo-float-code{left:0;top:35%}.syo-float-seo{right:0;bottom:10%}.syo-scene-caption{bottom:1px;font-size:8px}.syo-scroll-cue{bottom:24px}.fm-intro{align-items:flex-end}.fm-intro>a{flex-basis:52px;height:52px;font-size:26px}#services{margin-inline:12px;border-radius:20px}.syo-depth{transform:none!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.syo-scene,.syo-depth{transform:none!important}}

/* Keep the new typographic hierarchy above the legacy universal heading rules. */
body section#hero .h-hero,body section#hero .h-hero span,.syo-scene .syo-browser strong,.syo-scene .syo-browser strong em,.fm-intro h2{font-family:var(--font-body)!important}
.syo-scene .syo-mini-label,.syo-scene .syo-mini-bottom,.syo-scene .syo-scene-caption,.syo-kicker,.syo-scene .syo-browser-bar span{font-family:"JetBrains Mono",monospace!important}
.fm-socials span{font-family:var(--font-body)!important}