/* Masatio premium design system — marketing site only */
:root { --pine:#11283f; --pine-2:#17334c; --paper:#f6f8fb; --ink:#142539; --muted:#53657b; --line:#e1e7ef; --line-2:#ccd5e1; --action:#df641d; --action-hover:#c65213; --teal:#b84a08; --mint:#ffac67; --signal:#f58a32; --signal-edge:#d96720; --max:1248px; }
body { letter-spacing:-.004em; }
h1,h2,h3 { letter-spacing:-.034em; }
a,button { -webkit-tap-highlight-color: transparent; }
.wrap { max-width:var(--max); }
.top { position:relative; z-index:40; border-bottom:1px solid rgba(255,255,255,.09); }
.top-row { min-height:82px; gap:18px; }
.brand { font-weight:800; letter-spacing:-.035em; font-size:23px; white-space:nowrap; }
.brand .mark { display:inline-block; flex:none; width:31px; height:31px; transform:none; border-radius:8px; background: url('/img/masatio-m-v2.svg') center/contain no-repeat; box-shadow:none; }
.brand .mark::before,.brand .mark::after{display:none}
.links { gap:26px; margin-left:27px; }
.links a { font-size:14px; font-weight:650; transition:color .15s ease; }
.top-actions { gap:12px; }
.lang { border-radius:10px; }
.btn { border-radius:10px; font-weight:700; transition:transform .16s ease,background .16s ease,border-color .16s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { box-shadow: 0 8px 24px -14px rgba(223,100,29,.5); }
.home-hero { background:radial-gradient(80% 90% at 100% 0%,#245071 0%,transparent 65%),#11283f; }
.home-hero .hero-grid { grid-template-columns:minmax(0,7fr) minmax(280px,4fr); align-items:center; gap:55px; }
.home-hero .hero-copy h1 { max-width:13ch; font-size:clamp(45px,5.8vw,80px); line-height:1.07; letter-spacing:-.055em; }
.home-hero .hero-copy h1 .soft { color:#ffae70; }
.home-hero .hero-copy .lede { max-width:620px; font-size:19px; line-height:1.65; }
.home-hero .proof { gap:16px; padding:12px 0; }
.home-hero .proof li { border-left:2px solid #f58a32; padding:1px 0 1px 19px; }
.home-hero .proof b { font-size:16px; }
.home-hero .proof span { font-size:14px; line-height:1.6; }
.home-hero .cta { margin-top:29px; }
.company-stage { padding:0!important; border:0!important; background:transparent!important; margin:64px 0 -42px; position:relative; z-index:3; }
.company-stage-heading { color:#b8c9d8!important; padding:0 4px; }
.company-stage-grid { gap:18px; }
.company-stage-tile { padding:0!important; min-height:initial!important; gap:0!important; overflow:hidden; border:1px solid #dfe7ef!important; background:#fff!important; color:#172c42!important; box-shadow:0 28px 55px -38px rgba(13,34,56,.5); transition:transform .2s ease,box-shadow .2s ease; }
.company-stage-tile:hover { transform:translateY(-5px); box-shadow:0 33px 65px -36px rgba(13,34,56,.48); }
.company-stage-art { height:142px; display:flex; align-items:flex-end; overflow:hidden; padding:19px 21px 0; background:linear-gradient(140deg,#1b3c55,#0d2437); }
.company-stage-art img { width:100%; height:auto; max-height:142px; object-fit:cover; object-position:top; border-radius:9px 9px 0 0; box-shadow:0 5px 22px rgba(0,0,0,.25); }
.company-stage-tile:nth-child(2) .company-stage-art { background:linear-gradient(140deg,#24536c,#15364c); }
.company-stage-tile:nth-child(3) .company-stage-art { background:linear-gradient(140deg,#344760,#242f46); }
.company-stage-art .art-icon { font:800 62px var(--display); letter-spacing:-.08em; color:#f8ad78; align-self:center; margin:auto; }
.company-stage-content { display:flex; flex-direction:column; gap:12px; padding:23px 24px 24px; flex:1; }
.company-stage-label { color:#b45520!important; font-size:11px; }
.company-stage-tile strong { color:#142c43; font-size:23px!important; letter-spacing:-.04em; }
.company-stage-tile p { color:#607186!important; font-size:14px!important; }
.company-stage-link { color:#b4541c!important; font-size:13px; }
.company-approach { padding-top:135px!important; }
.company-approach h2 { max-width:20ch; }
.company-pillars article,.product,.roadmap-product { box-shadow:0 12px 35px -32px rgba(18,40,63,.34); transition:box-shadow .2s ease,transform .2s ease; }
.company-pillars article:hover,.product:hover,.roadmap-product:hover { box-shadow:0 24px 45px -30px rgba(18,40,63,.29); transform:translateY(-3px); }
.company-pillars a { color:#b84a08; }
section.block { scroll-margin-top:80px; }
.company-eyebrow { color:#b84a08; }
.roadmap-art { height:112px; }
.roadmap-copy h3 { font-size:22px; }
.roadmap-copy p { line-height:1.55; }
.top-actions .lang { font-size:12px; }
.mobile-menu-toggle { display:none; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border:1px solid rgba(255,255,255,.3); border-radius:10px; color:#fff; background:transparent; cursor:pointer; }
.mobile-menu-toggle svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.mobile-nav-panel { display:none; }
.mobile-nav-panel[hidden] { display:none!important; }
.page-section-label { display:inline-block; font:750 12px var(--display); letter-spacing:.13em; text-transform:uppercase; color:#b75417; margin-bottom:16px; }
.site-trustband { padding:34px 0; background:#fff; border-bottom:1px solid var(--line); }
.site-trustband .wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 26px; }
.site-trustband strong { color:var(--ink); font:750 14px var(--display); }
.site-trustband span { color:var(--muted); font-size:14px; }
.foot { border-top:1px solid rgba(255,255,255,.1); }
.foot .brand { font-size:25px; }
:focus-visible { outline:3px solid #ffad66; outline-offset:4px; }
@media(max-width:1080px) {
 .top-row { min-height:74px; }
 .mobile-menu-toggle { display:inline-flex; }
 .top-actions { margin-left:auto; }
 .top-actions .lang,.top-actions .text-link { display:none; }
 .mobile-nav-panel { display:block; position:absolute; top:100%; left:0; right:0; padding:14px 20px 22px; background:#11283f; border-top:1px solid rgba(255,255,255,.13); box-shadow:0 26px 34px rgba(0,0,0,.2); }
 .mobile-nav-panel a { display:flex; align-items:center; justify-content:space-between; padding:13px 12px; min-height:48px; border-radius:8px; color:#eef3f8; text-decoration:none; font-size:16px; font-weight:600; }
 .mobile-nav-panel a:hover,.mobile-nav-panel a:focus-visible { background:#203c53; }
 .mobile-nav-panel .nav-primary { margin-top:9px; background:#df641d; color:#fff; justify-content:center; }
 .home-hero .hero-grid { grid-template-columns:1fr; }
 .home-hero .proof { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:760px) {
 .home-hero .proof { grid-template-columns:1fr; }
 .home-hero .hero-copy h1 { font-size:clamp(38px,11vw,56px); }
 .company-stage { margin:36px 0 -25px; }
 .company-stage-grid { grid-template-columns:1fr; }
 .company-stage-art { height:110px; }
 .company-stage-art img { max-height:110px; }
 .company-stage-content { padding:19px 22px; }
 .company-approach { padding-top:100px!important; }
 .top-actions .btn { display:none; }
 .site-trustband .wrap { align-items:flex-start; flex-direction:column; }
}
@media(prefers-reduced-motion:reduce){.btn,.product,.company-pillars article,.roadmap-product,.company-stage-tile{transition:none!important;transform:none!important}}

/* CRM-first homepage. Scoped styles preserve the product and application pages. */
.crm-first-hero { padding-top:88px; padding-bottom:0; }
.crm-first-hero .hero-grid { grid-template-columns:minmax(0,7fr) minmax(260px,4fr); gap:64px; align-items:center; }
.crm-first-hero .hero-copy h1 { max-width:15ch; font-size:clamp(46px,5.7vw,80px); line-height:1.065; }
.crm-first-hero .hero-copy .lede { max-width:680px; }
.crm-eyebrow { margin-bottom:22px; color:#ffbc8a; font:800 12px/1.5 var(--display); letter-spacing:.12em; }
.crm-first-hero .proof { padding-top:26px; }
.crm-home-showcase { position:relative; margin:58px 0 -42px; padding:22px 24px 0; border:1px solid rgba(255,255,255,.18); border-radius:22px; background:linear-gradient(140deg,#213e57 0%,#11283f 60%,#18394f 100%); box-shadow:0 36px 72px -44px rgba(4,12,25,.65); }
.crm-showcase-header { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding:2px 0 18px; color:#c1d0df; font:700 12px/1.4 var(--display); letter-spacing:.085em; text-transform:uppercase; }
.crm-showcase-main { position:relative; display:flex; min-height:440px; align-items:flex-end; padding:0 125px 0 0; }
.crm-showcase-primary { flex:1; margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.22); border-radius:13px 13px 0 0; box-shadow:0 25px 45px rgba(0,0,0,.25); background:#fff; }
.crm-showcase-browser { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:40px; padding:7px 15px; color:#cbd9e5; font:600 12px var(--body); background:#152b3e; }
.crm-showcase-browser>span:first-child { display:inline-flex; gap:5px; }
.crm-showcase-browser i { display:inline-block; width:8px; height:8px; background:#496177; border-radius:50%; }
.crm-showcase-primary img { display:block; width:100%; height:auto; aspect-ratio:1280/820; object-fit:cover; object-position:top; }
.crm-showcase-phone { position:absolute; right:13px; bottom:-20px; z-index:2; width:min(23%,204px); margin:0; padding:7px; border:1px solid #37556b; border-radius:24px; background:#0b1b2a; box-shadow:0 24px 50px rgba(0,0,0,.42); }
.crm-showcase-phone img { width:100%; height:auto; border-radius:18px; }
.crm-showcase-bottom { position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 26px 26px; margin:0 -24px; border-radius:0 0 22px 22px; color:#25394c; background:#fff; }
.crm-showcase-bottom strong { font:800 19px var(--display); letter-spacing:-.025em; }
.crm-showcase-bottom p { margin-top:3px; color:#5b6c80; font-size:14px; }
.crm-showcase-bottom a { color:#aa4d18; font-weight:750; font-size:14px; white-space:nowrap; text-decoration:none; }
.crm-showcase-bottom a:hover { text-decoration:underline; }
.crm-first-hero + .company-approach { padding-top:134px!important; }
.product.featured-crm .product-shot { background:linear-gradient(160deg,#203c56,#11283f); }
.product.featured-crm .product-go { color:#b74b12; }
.product.featured-crm { border-color:#d5dee9; }
@media(max-width:1080px) {
 .crm-first-hero .hero-grid { grid-template-columns:1fr; gap:34px; }
 .crm-first-hero .proof { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:0; }
 .crm-showcase-main { min-height:0; }
}
@media(max-width:760px) {
 .crm-first-hero { padding-top:56px; }
 .crm-first-hero .hero-copy h1 { font-size:clamp(39px,10.2vw,59px); }
 .crm-first-hero .proof { grid-template-columns:1fr; }
 .crm-home-showcase { margin:36px 0 -22px; padding:13px 13px 0; border-radius:16px; }
 .crm-showcase-header { padding:6px 4px 12px; font-size:10px; }
 .crm-showcase-main { padding-right:16%; }
 .crm-showcase-primary { border-radius:8px 8px 0 0; }
 .crm-showcase-browser { min-height:29px; padding:6px; font-size:10px; }
 .crm-showcase-phone { right:0; bottom:-13px; width:25%; padding:3px; border-radius:11px; }
 .crm-showcase-phone img { border-radius:8px; }
 .crm-showcase-bottom { margin:0 -13px; padding:17px 16px 19px; flex-direction:column; align-items:flex-start; gap:10px; border-radius:0 0 16px 16px; }
 .crm-showcase-bottom strong { font-size:16px; }
 .crm-showcase-bottom p,.crm-showcase-bottom a { font-size:12px; }
 .crm-first-hero + .company-approach { padding-top:90px!important; }
}

/* CRM + ERP corporate positioning | marketing-only layout */
.erp-focus{background:var(--paper);padding:100px 0!important}
.erp-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,95px);align-items:start}
.erp-intro h2{font-size:clamp(37px,4.8vw,64px);line-height:1.09;max-width:14ch}
.erp-intro h2 span{color:var(--action)}
.erp-intro .lede{font-size:18px;line-height:1.72;max-width:630px}
.erp-caveat{margin-top:18px;padding:12px 16px;border-left:3px solid #d7783e;color:#52647b;font-size:13px;line-height:1.7;background:#fff;border-radius:0 8px 8px 0}
.erp-capabilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:46px}
.erp-capabilities article{display:flex;flex-direction:column;gap:17px;padding:32px 27px;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:0 18px 36px -36px rgba(20,39,64,.3)}
.erp-index{font:800 11px var(--display);letter-spacing:.11em;color:#b54a11}
.erp-capabilities h3{font-size:24px;letter-spacing:-.04em}
.erp-capabilities p{line-height:1.65;color:var(--muted)}
.erp-action{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;padding:26px 30px;border-radius:16px;background:#142d44;color:#e8eef4}
.erp-action p{max-width:570px;font-size:15px;line-height:1.6}
.erp-action .btn{flex-shrink:0}
.crm-process{padding:104px 0!important}
.crm-workflows-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:37px}
.crm-workflows-head h2{max-width:15ch;font-size:clamp(36px,4vw,58px);line-height:1.1}
.crm-workflows-head .lede{max-width:440px;font-size:17px;line-height:1.65}
.crm-workflows-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}
.crm-workflows-grid article{overflow:hidden;border:1px solid var(--line);border-radius:17px;background:var(--surface);box-shadow:0 20px 38px -34px rgba(17,39,63,.27)}
.crm-workflows-visual{padding:26px 23px 0;background:linear-gradient(130deg,#1a4059,#0f293e)}
.crm-workflows-visual img{width:100%;display:block;border-radius:9px 9px 0 0;border:1px solid rgba(255,255,255,.19);border-bottom:0;height:auto;object-fit:cover}
.crm-workflows-copy{padding:28px 29px 31px}
.crm-workflows-copy>span{font:800 11px var(--display);letter-spacing:.10em;color:#b74f1c}
.crm-workflows-copy h3{margin-top:10px;font-size:27px}
.crm-workflows-copy p{color:var(--muted);margin-top:10px;line-height:1.65}
.text-cta{display:inline-flex;align-items:center;gap:12px;text-decoration:none;margin-top:25px;color:#ad4c16;font-weight:800}
.text-cta:hover{text-decoration:underline}
.how-we-work{background:#11283f;color:#fff;padding:96px 0!important}
.how-we-work .page-section-label{color:#ffb583}
.how-we-work h2{max-width:18ch;font-size:clamp(35px,4.4vw,58px);line-height:1.14;color:#fff}
.how-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:45px}
.how-grid article{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.045);border-radius:16px;padding:25px}
.how-grid span{font:800 24px var(--display);color:#ffac72}
.how-grid h3{margin-top:18px;font-size:23px;color:#fff}
.how-grid p{color:#c5d4e0;margin-top:14px;line-height:1.62;font-size:14px}
.security-overview{background:var(--paper);padding:80px 0!important}
.security-overview .wrap{max-width:990px}
.security-overview h2{font-size:clamp(30px,3.7vw,48px)}
.security-overview .lede{max-width:850px;margin-top:16px}
.security-actions{display:flex;gap:25px;flex-wrap:wrap;margin-top:24px}
.security-actions a{color:#ae4c16;font-weight:750}
.corporate-faq{padding:94px 0!important}
.corporate-faq .faq-wrap{max-width:900px}
.corporate-faq h2{font-size:clamp(35px,4vw,52px)}
.equipment-detail-hero{padding:92px 0 95px}
.equipment-detail-hero .hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px}
.equipment-detail-hero h1{font-size:clamp(40px,5vw,68px);line-height:1.12}
.equipment-detail-hero .lede{max-width:630px;line-height:1.65}
.equipment-preview{margin:0;overflow:hidden;border-radius:16px;border:1px solid rgba(255,255,255,.17);box-shadow:0 24px 48px -25px rgba(0,0,0,.5)}
.equipment-preview img{display:block;width:100%;height:auto}
.equipment-product #tracking{scroll-margin-top:80px}
@media(max-width:1050px){.erp-intro{grid-template-columns:1fr;gap:22px}.erp-capabilities{grid-template-columns:repeat(2,minmax(0,1fr))}.how-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:780px){
.erp-focus,.crm-process,.how-we-work,.corporate-faq{padding:65px 0!important}
.erp-capabilities,.crm-workflows-grid,.how-grid{grid-template-columns:1fr}
.erp-capabilities{margin-top:30px}
.erp-capabilities article{padding:25px 23px}
.erp-action{flex-direction:column;align-items:flex-start;padding:23px}
.erp-action .btn{width:100%;justify-content:center}
.crm-workflows-head{flex-direction:column;align-items:flex-start}
.crm-workflows-head h2{max-width:100%}
.crm-workflows-copy{padding:24px}
.security-overview{padding:65px 0!important}
.equipment-detail-hero{padding:60px 0 65px}
.equipment-detail-hero .hero-grid{grid-template-columns:1fr}
}

/* ERP SaaS development gallery: conceptual UI imagery, not live screenshots. */
.erp-development { margin-top:48px; padding:34px 32px 28px; background:#fff; border:1px solid #dbe4ec; border-radius:20px; box-shadow:0 24px 55px -50px rgba(16,40,64,.30); }
.erp-dev-header { display:flex; gap:32px; align-items:flex-start; justify-content:space-between; margin-bottom:27px; }
.erp-dev-header>div { max-width:700px; }
.erp-dev-kicker { display:block; margin-bottom:10px; color:#ad511e; font:800 11px/1.5 var(--display); letter-spacing:.105em; }
.erp-dev-header h3 { color:#193147; font:800 clamp(26px,2.75vw,37px)/1.18 var(--display); letter-spacing:-.04em; }
.erp-dev-header p { margin-top:13px; color:#586b7e; line-height:1.73; font-size:15px; }
.erp-dev-status { flex:none; margin-top:1px; padding:9px 14px; border:1px solid #efd4c1; border-radius:25px; background:#fff4ea; color:#99501c; font:750 12px var(--display); white-space:nowrap; }
.erp-dev-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.erp-dev-item { margin:0; overflow:hidden; border:1px solid #dae5ed; border-radius:13px; background:#f7f9fb; transition:transform .2s ease,box-shadow .2s ease; }
.erp-dev-item:hover { transform:translateY(-3px); box-shadow:0 18px 35px -28px rgba(18,41,61,.4); }
.erp-dev-item img { display:block; width:100%; height:auto; aspect-ratio:1200/740; object-fit:cover; background:#e6edf3; }
.erp-dev-item figcaption { display:flex; flex-direction:column; gap:5px; padding:18px 18px 20px; }
.erp-dev-item strong { font:800 17px/1.3 var(--display); letter-spacing:-.022em; color:#20384f; }
.erp-dev-item figcaption span { color:#5e7285; font-size:13px; line-height:1.5; }
.erp-dev-disclaimer { color:#667789; font-size:12px; line-height:1.65; margin-top:21px; max-width:850px; }
@media(max-width:980px) { .erp-dev-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } .erp-dev-header { flex-direction:column; gap:16px; } }
@media(max-width:620px) {
 .erp-development { padding:23px 16px 21px; margin-top:29px; border-radius:15px; }
 .erp-dev-gallery { grid-template-columns:1fr; gap:14px; }
 .erp-dev-header h3 { font-size:28px; }
 .erp-dev-status { font-size:11px; }
 .erp-dev-item figcaption { padding:16px; }
 .erp-dev-item:hover { transform:none; }
}
@media(prefers-reduced-motion:reduce) { .erp-dev-item { transition:none; } }