:root{--deep:#103a29;--deep2:#09291e;--green:#276a37;--green2:#4b8739;--gold:#d2a422;--goldlight:#f3d97a;--soft:#edf5e7;--paper:#f8faf6;--ink:#173428;--text:#46594e;--line:#dce9d7;--shadow:0 26px 90px rgba(7,36,24,.32)}
*,*:before,*:after{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}html{font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}body{background:#0e3022;color:var(--ink);overflow:hidden}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}img{display:block;max-width:100%}h1,h2,h3,p{margin-top:0}p{line-height:1.72}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #dea72d;outline-offset:3px}.skip{position:fixed;top:-80px;left:12px;background:white;padding:10px;z-index:100;box-shadow:0 10px 30px #0002}.skip:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.app-shell{width:100vw;height:100vh;height:100dvh;display:flex;justify-content:center;align-items:center;overflow:hidden;background:radial-gradient(circle at 50% 50%,#3a7550 0%,#102f25 65%,#081e17 100%)}.canvas{position:relative;display:flex;align-items:center;justify-content:center;width:min(100vw,177.6833dvh);aspect-ratio:1672/941;max-height:100dvh;overflow:hidden;background:#f3f7e9;box-shadow:0 0 65px rgba(0,0,0,.26)}.desktop-stage{position:absolute;inset:0}.design-art{width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}.desktop-hotspots{position:absolute;inset:0}.hotspot{position:absolute;display:block;z-index:2;border-radius:12px;outline-offset:0;transition:background .15s,box-shadow .15s}.hotspot:hover{background:rgba(222,188,47,.16);box-shadow:inset 0 0 0 2px rgba(204,157,31,.55)}.hotspot:focus-visible{background:rgba(255,230,132,.25);outline:3px solid #16562f;outline-offset:1px}.reference-note{display:none} /* Preserve reference image pixel for pixel at rest. */
.mobile-home{display:none}
.workspace{position:absolute;inset:1.15% 1.2%;z-index:20;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.54);border-radius:20px;background:var(--paper);box-shadow:var(--shadow);animation:workspace-in .22s ease both}.workspace[hidden]{display:none!important}@keyframes workspace-in{from{opacity:0;transform:translateY(13px) scale(.992)}to{opacity:1;transform:none}}
.workspace-head{background:linear-gradient(110deg,#0d3728,#184e34 70%,#285c39);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 25px;color:#f8fbf7;min-height:78px;flex:none;border-bottom:3px solid #cfa431}.workspace-brand{display:flex;align-items:center;gap:13px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;border:1px solid #a1cc8a;font-family:Georgia,serif;color:#e5c75c;font-size:27px;font-style:italic;background:#082d20}.workspace-brand b{font-size:1.27rem;letter-spacing:.015em;display:block;line-height:1.1;color:#f6eab8}.workspace-brand small{font-size:.56rem;letter-spacing:.15em;font-weight:800;color:#cee5cf}.workspace-status{display:flex;align-items:center;gap:9px;color:#c8dbcc;font-size:.64rem;font-weight:750;letter-spacing:.14em}.status-dot{width:8px;height:8px;background:#b3d879;border-radius:50%;box-shadow:0 0 0 4px #b1d97724}.close-panel{margin-left:auto;display:flex;align-items:center;gap:9px;padding:10px 17px;border-radius:9px;background:#fff2d4;color:#173c28;font-weight:800;font-size:.86rem;transition:background .2s}.close-panel:hover{background:#f6d978}.workspace-main{display:flex;flex:1;min-height:0;min-width:0}.workspace-side{display:flex;flex:none;flex-direction:column;gap:3px;width:224px;background:linear-gradient(180deg,#10412f,#0c3327);color:#d9ede0;padding:26px 12px}.aside-label{padding:0 15px 14px;letter-spacing:.18em;font-size:.64rem;color:#91baa4;font-weight:900}.aside-link{display:flex;align-items:center;gap:12px;padding:12px 15px;border-radius:10px;font-size:.83rem;font-weight:650;transition:background .2s}.aside-link:hover{background:#ffffff16}.aside-link.active{background:linear-gradient(90deg,#246b45,#1c5139);color:#fff;border-left:3px solid #eccd6e;padding-left:12px}.side-dot{border:2px solid #a6c8aa;width:11px;height:11px;border-radius:4px;transform:rotate(-9deg)}.aside-link.active .side-dot{background:#f3d264;border-color:#f3d264}.aside-bottom{padding:17px 14px 0;margin-top:auto;font-size:.8rem;font-weight:900;color:#d9c67f;border-top:1px solid #ffffff25}.aside-bottom small{display:block;font-size:.7rem;font-weight:500;color:#bdd1c2}.panel-holder{position:relative;min-width:0;flex:1;background:radial-gradient(circle at 100% 0,#eaf6df 0,transparent 35%),#f8faf7}.panel-view{position:absolute;inset:0}.panel-view[hidden]{display:none!important}.panel-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:34px clamp(22px,3vw,52px) 54px;scrollbar-color:#bdd1b9 #f4f7f1;scrollbar-width:thin}.panel-scroll::-webkit-scrollbar{width:10px}.panel-scroll::-webkit-scrollbar-thumb{background:#b7cdb8;border-radius:20px}.panel-scroll::-webkit-scrollbar-track{background:#f4f7f1}
.section-kicker{font-size:.69rem;letter-spacing:.16em;color:#986f0f;font-weight:900;margin-bottom:15px}.panel-scroll h2{font-size:clamp(1.7rem,3vw,3.1rem);letter-spacing:-.04em;line-height:1.14;color:#103d28;max-width:900px;margin-bottom:15px;font-weight:850}.lede{font-size:1rem;color:#465d4d;line-height:1.8;max-width:800px}.section-header{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(190px,.8fr);gap:23px;align-items:center}.section-header img{width:100%;height:150px;object-fit:cover;border-radius:18px;box-shadow:0 15px 35px #164d301c}.intro{font-size:.94rem;color:#546a59;max-width:1100px;padding:16px 0 5px}.section-label{font-size:1.12rem;margin:25px 0 17px;color:#123d2a}.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.feature{background:white;border:1px solid #dfebdb;border-radius:15px;padding:21px 22px;box-shadow:0 5px 22px rgba(15,62,34,.035)}.feature-number{display:block;color:#b28a24;font-size:.68rem;font-weight:900;letter-spacing:.08em;margin-bottom:8px}.feature h3{color:#15432c;font-size:1rem;margin:0 0 9px}.feature p{font-size:.83rem;line-height:1.72;color:#5a6b60;margin:0}.workflow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:flow;gap:11px;list-style:none;padding:0}.workflow li{background:#e8f4df;border-radius:12px;padding:19px 14px;color:#1b5432;font-weight:720;font-size:.81rem;line-height:1.55;border-bottom:3px solid #c1d9a9;counter-increment:flow}.workflow li:before{content:'0' counter(flow);display:block;font-size:.75rem;color:#b18b28;margin-bottom:10px;font-weight:900}.bottom-card{background:linear-gradient(108deg,#0d3b2b,#226144);border-radius:16px;margin:32px 0 21px;padding:24px 26px;display:flex;align-items:center;gap:28px;justify-content:space-between;color:#fff}.bottom-card strong{display:block;font-size:1.02rem}.bottom-card p{font-size:.84rem;color:#daebdd;max-width:650px;margin:6px 0 0}.action{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(170deg,#fae58d,#cea019);border:1px solid #d4a51b;border-radius:12px;min-height:45px;padding:11px 18px;color:#1a321f;font-weight:850;font-size:.87rem;white-space:nowrap;box-shadow:0 5px 16px rgba(97,64,11,.12)}.action:hover{filter:brightness(1.06)}.responsibility{font-size:.72rem;color:#748074;padding-bottom:10px}
.solutions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:23px}.solution-tile{display:flex;gap:16px;background:white;border:1px solid var(--line);border-radius:17px;overflow:hidden;padding:12px;min-height:195px;box-shadow:0 10px 28px rgba(26,69,37,.06)}.solution-tile img{width:32%;min-width:110px;object-fit:cover;border-radius:11px}.solution-tile span{padding:10px 9px 10px 0;display:flex;flex-direction:column;gap:6px;min-width:0}.solution-tile small{font-weight:900;color:#ba9025}.solution-tile strong{font-size:1.13rem;color:#123d28}.solution-tile em{font-style:normal;font-size:.79rem;line-height:1.55;color:#65776a;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.solution-tile b{margin-top:auto;font-size:.8rem;color:#1b7642}.solution-tile:hover{border-color:#a7cda4;box-shadow:0 13px 34px #15422418}.about-layout{display:grid;grid-template-columns:1.4fr .75fr;gap:28px;margin-top:28px}.about-layout p{color:#56695b;font-size:.91rem}.about-note{background:#eaf4e4;border:1px solid #d8e7d0;border-radius:17px;padding:26px}.about-note strong{font-size:1.06rem}.about-note li{margin:14px 0;color:#415a45;font-size:.84rem}.contact-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:28px;margin-top:20px}.contact-side,.contact-form{border-radius:16px;padding:27px;background:white;border:1px solid #dfebdf}.contact-side{background:#eaf4e5}.contact-side h3,.contact-form h3{color:#17432d;font-size:1.25rem}.contact-side a{display:block;padding:12px 0;font-size:.89rem;font-weight:750;color:#216342;word-break:break-word}.contact-side a:hover{text-decoration:underline}.contact-side p,.contact-side small{font-size:.77rem;color:#627866}.contact-side small{line-height:1.6;display:block}.contact-form{display:flex;flex-direction:column;gap:14px}.contact-form h3{margin:0 0 2px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-form label{font-size:.79rem;font-weight:800;color:#315343}.contact-form input,.contact-form select,.contact-form textarea{display:block;width:100%;border:1px solid #d2e2d1;background:#fcfdfb;padding:11px 12px;margin-top:7px;border-radius:9px;outline:none;color:#264330;min-width:0}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:#5d9754;box-shadow:0 0 0 3px #b4d9a65c}.contact-form textarea{resize:vertical}.honeypot{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.form-bottom{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.form-bottom span{color:#7a887b;font-size:.72rem}.form-feedback{font-size:.84rem;font-weight:700;margin:0}.form-feedback.error{color:#a33127}.form-feedback.success{color:#16703c}
@media(max-width:1050px){.workspace-side{width:170px}.aside-link{font-size:.75rem;padding:10px}.workspace-head{min-height:63px;padding:10px 19px}.panel-scroll{padding:20px 25px 35px}.features{gap:9px}.feature{padding:17px}.solution-tile{min-height:160px}.solution-tile img{min-width:84px}.workspace-status{display:none}}
@media(max-width:760px){body{background:#f3f7ec}.app-shell{height:100dvh;display:block;background:#f4f7ec}.canvas{aspect-ratio:auto;height:100dvh;width:100vw;max-height:none;display:block;box-shadow:none}.desktop-stage{display:none}.mobile-home{display:block;height:100%;overflow-y:auto;background:linear-gradient(145deg,#eef8eb,#fff9ec 60%,#f5f8eb)}.mobile-head{position:sticky;top:0;z-index:8;padding:13px 20px;display:flex;align-items:center;justify-content:space-between;background:#f8fbf3f2;backdrop-filter:blur(10px);border-bottom:1px solid #d7e8d2;box-shadow:0 5px 20px #2243210c}.mob-brand img{width:220px;max-width:68vw}.mobile-menu-button{font-size:1.5rem;border:1px solid #b8d8ad;border-radius:10px;padding:3px 13px;background:#e9f3df;color:#143d27}.mobile-nav:not([hidden]){display:flex;flex-direction:column;position:sticky;top:66px;z-index:7;background:#edf6e7;padding:7px 19px 15px;border-bottom:1px solid #d2e6ce}.mobile-nav-link{padding:9px 5px;font-weight:740;font-size:.88rem;border-bottom:1px solid #dceada;color:#14432a}.mobile-content{padding:27px 21px 50px;max-width:650px;margin:auto}.mobile-pill{display:inline-flex;border:1px solid #d9e9d2;background:white;padding:9px 13px;border-radius:100px;font-weight:750;color:#39743a;font-size:.69rem}.mobile-content h1{font-size:clamp(2.15rem,8.1vw,3.6rem);color:#12542a;line-height:1.1;letter-spacing:-.04em;margin:27px 0 17px}.mobile-content h1 em{font-style:normal;color:#c2941b}.mobile-content>p{color:#596958;font-size:.94rem}.mobile-cta{display:inline-flex;padding:13px 25px;background:linear-gradient(160deg,#f6dc77,#c78c10);border-radius:100px;color:#223a21;font-weight:850;margin-top:8px}.mobile-product{width:100%;border-radius:16px;box-shadow:0 15px 40px #17492630;margin-top:28px}.mobile-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.mobile-card{display:flex;flex-direction:column;background:white;border-radius:13px;overflow:hidden;box-shadow:0 4px 18px #103d2210;border:1px solid #e3eae0}.mobile-card img{width:100%;aspect-ratio:1.6;object-fit:cover}.mobile-card strong{font-size:.83rem;color:#13422a;padding:11px 12px 0}.mobile-card span{font-size:.72rem;color:#358452;font-weight:800;padding:5px 12px 13px}.mobile-disclaimer{font-size:.72rem!important;color:#758376!important;margin-top:20px}.workspace{inset:0;border:0;border-radius:0;box-shadow:none}.workspace-head{min-height:64px;padding:12px 16px}.workspace-brand b{font-size:1.03rem}.workspace-brand small{font-size:.53rem}.brand-mark{width:34px;height:34px;font-size:22px}.close-panel{padding:8px 11px;font-size:.85rem}.workspace-side{display:none}.panel-holder{width:100%}.panel-scroll{padding:24px 20px 45px}.section-header{grid-template-columns:1fr}.section-header img{max-height:180px}.panel-scroll h2{font-size:1.85rem}.features{grid-template-columns:1fr}.workflow{grid-template-columns:1fr 1fr}.contact-layout,.about-layout{grid-template-columns:1fr}.solutions{grid-template-columns:1fr}.contact-side,.contact-form{padding:20px}.bottom-card{flex-direction:column;align-items:flex-start}.contact-form textarea{min-height:110px}.form-grid{grid-template-columns:1fr}}
@media(max-width:380px){.mobile-cards{grid-template-columns:1fr}.mobile-content{padding-inline:17px}.close-text{display:none}.workflow{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.workspace{animation:none}.hotspot{transition:none}}

/* =============== V7: Real functional menu + edge-to-edge reference design =============== */
:root{--top-height:14.56%}
body,.app-shell,.canvas{background:#f7fbf1}
.app-shell{width:100%;height:100dvh;overflow:hidden;display:block;background:#f7fbf1}
.canvas{height:100dvh;max-height:none;width:100%;max-width:none;aspect-ratio:auto;display:block;box-shadow:none;overflow:hidden;background:#f5f9ee}
.desktop-stage{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
.real-header{height:var(--top-height);flex:0 0 var(--top-height);position:relative;z-index:30;display:flex;align-items:center;gap:clamp(6px,1.4vw,25px);padding:0 clamp(15px,2.8vw,56px);background:linear-gradient(114deg,#f2f9ec 0%,#fffef9 34%,#f6faed 72%,#e3f2d7 100%);box-shadow:0 4px 22px rgba(24,67,29,.11)}
.real-header:before{content:"";position:absolute;width:85px;height:85px;top:-56px;left:-43px;transform:rotate(45deg);background:#8bae57;opacity:.72;pointer-events:none}
.real-logo{display:block;width:clamp(245px,29vw,474px);flex:0 0 auto;position:relative;z-index:1;line-height:0}
.real-logo img{display:block;width:100%;height:auto;max-height:calc(100dvh * .135);object-fit:contain;object-position:left center}
.real-nav{display:flex;min-width:0;flex:1;align-items:center;justify-content:space-between;gap:clamp(3px,.66vw,12px);background:rgba(255,255,255,.84);border-radius:24px;padding:clamp(7px,1.1vw,18px) clamp(10px,1.6vw,25px);box-shadow:0 11px 26px rgba(54,78,38,.11),inset 0 1px 0 rgba(255,255,255,.94)}
.top-link{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:37px;font-size:clamp(.69rem,.86vw,.94rem);font-weight:660;letter-spacing:-.015em;color:#183229;white-space:nowrap;padding:6px 2px;border-radius:2px;transition:color .16s}
.top-link:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;background:#d49b06;border-radius:99px;transform:scaleX(0);transform-origin:center;transition:transform .16s ease}
.top-link:hover,.top-link.active{color:#155c2f}
.top-link:hover:after,.top-link.active:after{transform:scaleX(1)}
.real-cta{display:inline-flex;align-items:center;justify-content:center;gap:13px;flex:0 0 auto;border-radius:15px;padding:clamp(8px,1.05vw,16px) clamp(13px,1.45vw,26px);background:linear-gradient(180deg,#f5ca2d,#c18700);color:#fff;font-weight:850;font-size:clamp(.75rem,.94vw,1rem);white-space:nowrap;box-shadow:0 6px 16px rgba(182,127,6,.24)}
.real-cta:hover{background:linear-gradient(180deg,#f9d966,#b77f05)}
.scene-area{position:relative;flex:1;min-height:0;overflow:hidden}
.scene-image{width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.scene-hotspots{position:absolute;inset:0}
.scene-link{position:absolute;z-index:2;border-radius:14px;background:transparent;cursor:pointer;transition:box-shadow .15s,background .15s}
.scene-link:hover{background:rgba(254,248,177,.10);box-shadow:inset 0 0 0 3px rgba(209,158,16,.8),0 0 22px rgba(198,165,53,.35)}
.scene-link:focus-visible{outline:4px solid #c38c0c;outline-offset:-4px}
.workspace{top:var(--top-height);right:0;bottom:0;left:0;inset:var(--top-height) 0 0;border:0;border-radius:0;box-shadow:0 -1px 8px rgba(19,55,26,.13)}
.workspace-head{border-bottom:2px solid #d4a521}
.mobile-home{display:none}
@media(max-width:1200px) and (min-width:761px){
 .real-header{padding-inline:clamp(12px,1.3vw,24px);gap:7px}
 .real-logo{width:clamp(190px,25vw,340px)}
 .real-nav{padding:10px 12px;gap:5px;border-radius:18px}
 .top-link{font-size:clamp(.65rem,.87vw,.82rem)}
 .real-cta{padding:11px 14px;font-size:.76rem;gap:6px}
}
@media(max-width:880px) and (min-width:761px){
 .real-logo{width:185px}
 .real-header{padding-inline:8px}
 .real-nav{gap:4px;padding:8px 7px}
 .top-link{font-size:.62rem;padding:6px 1px}
 .real-cta{font-size:.66rem;padding:9px}
}
@media(max-width:760px){
 .desktop-stage{display:none}
 .canvas,.app-shell{height:100dvh;width:100vw}
 .workspace{inset:0;border-radius:0;box-shadow:none}
 .mobile-home{display:block}
}
@media(prefers-reduced-motion:reduce){.top-link:after,.scene-link{transition:none}}

/* Workspace overlay must be made visible together with its child workspace. */
.overlay-layer{position:absolute;inset:0;z-index:20;pointer-events:none}
.overlay-layer[hidden]{display:none!important}
.overlay-layer .workspace{pointer-events:auto}