/* Brand direction: navy + cobalt, sharp digital surfaces, confident sans typography. */
:root{--ink:#0b2346;--muted:#56667e;--paper:#f5f7fb;--line:#d8e0ed;--green:#075dcc;--lime:#b7edff;--blue:#086be9;--cyan:#00bce9}
body{background:var(--paper)}
.brand-logo{width:66px;height:44px;position:relative;overflow:hidden;flex-shrink:0}
.brand-logo img{position:absolute;width:80px;height:80px;max-width:none;top:-12px;left:-7px;object-fit:contain}
.brand strong{font-weight:700;letter-spacing:-.8px}.brand small{color:#24639a;letter-spacing:2.8px}
.header{background:#f5f7fbf5;backdrop-filter:blur(15px)}
.header-call{background:var(--blue);border-color:var(--blue)}
.button{border-radius:3px}.button:hover{background:#084b9f}.button.outline{border-color:#bac8de}.button.outline:hover{background:#e5edfb}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:var(--blue)}
h1,h2,h3{font-weight:600}h1{font-size:clamp(48px,5.8vw,78px);letter-spacing:-4px}
h1 em,h2 em,.band-set em{font-family:inherit;font-style:normal;font-weight:inherit;color:var(--blue)}
.dark h2 em{color:#62d6ff}.eyebrow{letter-spacing:1.5px}.dot{background:var(--cyan)}
.hero{padding-top:70px;padding-bottom:75px}.hero-grid{grid-template-columns:1.05fr 1fr;gap:50px}
.hero:before{background-image:linear-gradient(#0b234608 1px,transparent 1px),linear-gradient(90deg,#0b234608 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,transparent 40%,black)}
.preview{border-radius:8px;padding:28px;background:#e5edf9;border-color:#cedbf0;box-shadow:none}
.preview-caption{font-size:9px;letter-spacing:1px;color:#496388;padding-right:44px}
.hero-orbit{border-radius:4px;right:-12px;top:-20px;width:76px;height:68px;transform:rotate(6deg);background:var(--blue);color:white}
.hero-orbit b{font-family:inherit;font-size:19px;font-weight:700}.hero-orbit span{font-size:8px;letter-spacing:1px}
.browser{background:#101f36;color:white;transform:rotate(-2deg);border:1px solid #ffffff24;box-shadow:0 22px 45px #0b234626}
.browser-bar{border-color:#ffffff16;background:#152944;height:32px}.browser-bar i{background:#617897}.browser-bar:after{content:'studio / digital workspace';margin-left:15px;font-size:8px;color:#adc0da;letter-spacing:.6px}
.sample-nav{padding:19px 22px;align-items:center;color:#9db3d0}.sample-nav strong{font-family:inherit;font-size:13px;letter-spacing:-.4px;color:white}.sample-nav strong span{color:#44caff}
.sample-body{padding:24px 22px 26px;display:block}.sample-body h3{font-family:inherit;font-size:clamp(28px,3vw,40px);line-height:1.06;font-weight:600;letter-spacing:-1.5px}.sample-body h3 span{color:#56cfff}.sample-body p{font-size:10px;line-height:1.65;color:#b0c1d8;max-width:260px;margin:13px 0}.sample-cta{background:#0878f9;padding:9px 13px;font-size:9px;border-radius:2px}
.interface-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:12px;margin-top:26px}.interface-panel{padding:14px;background:#1a3150;border:1px solid #ffffff12;border-radius:4px;min-width:0}.panel-label{font-size:8px;color:#a5bddc;display:flex;justify-content:space-between;gap:8px}.panel-label b{color:#65d9ff;font-weight:500}.chart{height:68px;display:flex;align-items:end;gap:8px;padding:12px 0 0;border-bottom:1px solid #ffffff18}.chart i{display:block;flex:1;background:#1389fc;border-radius:2px 2px 0 0}.chart i:nth-child(2n){background:#35c3ef}.chart i:nth-child(1){height:28%}.chart i:nth-child(2){height:47%}.chart i:nth-child(3){height:39%}.chart i:nth-child(4){height:65%}.chart i:nth-child(5){height:58%}.chart i:nth-child(6){height:84%}.chart i:nth-child(7){height:100%}.wire-row{height:9px;margin-top:10px;background:#385477;width:85%;border-radius:2px}.wire-row.short{width:58%}.wire-cards{display:flex;gap:6px;margin-top:12px}.wire-cards i{height:32px;flex:1;background:#294563;border:1px solid #466489;border-radius:2px}.wire-cards i:first-child{background:#096dcc;border-color:#298dfa}
.sample-foot{background:#142943;color:#a8c4e8;border-top:1px solid #ffffff10;font-size:8px;padding:13px 22px}.preview-tag{color:#536d8d}.preview-tag span{border-color:#a7bddb;color:var(--blue);border-radius:4px}
.service:hover{background:#eaf1ff}.service .number:after{color:var(--blue)}.service h3{font-weight:600}.service .text-link{color:#075dcc}.text-link:hover,.navigation a:hover{color:#075dcc}
.dark{background:#0b1e38}.about-note,.principle{border-color:#ffffff20}.about-grid p{color:#b8c9df}
.motion-band{background:#086be9;color:white;border-color:#086be9}.band-set em{color:#aff0ff}.band-set i{color:#68d8fb}.band-set{font-weight:600}
.scroll-progress{background:var(--cyan)}.step:before{background:var(--blue)}
.contact-box{background:#e4edfb;border:1px solid #ceddf4;border-radius:6px}.contact-item{border-color:#c3d4ed}.contact-box:after{color:#086be908}.contact-item a{font-weight:500}
@media(max-width:1000px){.hero-grid{gap:32px}.preview{padding:22px}.preview-caption{font-size:8px}.sample-body{padding:20px}.brand-logo{width:54px}.brand-logo img{left:-12px}.navigation{gap:18px}}
@media(max-width:760px){.hero{padding:45px 0 55px}.hero-grid{grid-template-columns:1fr;gap:40px}h1{font-size:clamp(44px,8.5vw,62px);letter-spacing:-2.8px}.preview{border-radius:6px;padding:24px;max-width:520px}.sample-body h3{font-size:36px}.hero-orbit{right:0;top:-18px;width:68px;height:62px}.brand-logo{width:44px;height:36px}.brand-logo img{width:66px;height:66px;top:-10px;left:-10px}.brand{gap:8px}.brand strong{font-size:15px}.brand small{font-size:8px;letter-spacing:2px}.sample-nav{font-size:8px}}
@media(max-width:420px){h1{font-size:clamp(38px,11.5vw,48px)}.preview{padding:17px}.sample-body{padding:20px 16px}.sample-body h3{font-size:30px}.sample-nav{padding:17px 16px}.interface-panel{padding:10px}.panel-label{font-size:7px}.hero-orbit{right:-3px}.preview-caption{font-size:7px}.sample-foot{padding:12px 16px;font-size:7px}.brand-logo{width:40px}.header-call{padding:8px}.nav-row{gap:9px}}