/* Fex visual system — shared surfaces and accessible light/dark tokens. */
:root {
  color-scheme:light;
  --paper:var(--theme-paper,#f5f5ef); --ink:var(--theme-ink,#19261f);
  --muted:var(--theme-muted,#626f68); --line:var(--theme-line,#d9e0da); --lime:var(--theme-lime,#d4edaa);
  --surface:#fff; --surface-soft:#edf1ec; --surface-raised:#fafcf9;
  --accent:#316b53; --accent-soft:#e3efdf; --on-accent:#182c22;
  --shadow:0 16px 50px #1d372b08; --glass:#f5f5efe6;
}
:root[data-theme=dark] {
  color-scheme:dark;
  --paper:#101514; --ink:#edf3ee; --muted:#a2b1a8; --line:#2c3932;
  --surface:#18201c; --surface-soft:#202b24; --surface-raised:#1c2721;
  --accent:#c4e6a6; --accent-soft:#293c2e; --lime:#c4e6a6; --on-accent:#152319;
  --shadow:0 16px 50px #0002; --glass:#101514e8;
}
body{background:var(--paper);color:var(--ink)}
button,a,input,select,textarea{touch-action:manipulation}
:focus-visible{outline:3px solid var(--accent)!important;outline-offset:4px}
.theme-toggle{height:42px;width:42px;flex-shrink:0;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);transition:transform .25s,background .25s}
.theme-toggle:hover{transform:rotate(15deg);background:var(--surface-soft)}
.site-header{position:sticky;top:0;z-index:15;max-width:none;background:var(--glass);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);padding:18px max(40px,calc((100vw - 1320px)/2));min-height:88px;gap:20px}
.brand{font-size:29px;letter-spacing:-1.7px}.brand img{border-radius:10px}.brand-light{font-size:20px}
.main-nav{margin-right:20px;gap:32px;font-size:12px}.main-nav a{color:var(--muted)}.main-nav a:hover{color:var(--ink)}
.button{border-radius:100px;padding:16px 24px;gap:24px}.button.dark{background:var(--ink);color:var(--paper)}.button.dark:hover{background:var(--accent);color:var(--paper)}.button.outline{border-color:var(--line);background:var(--surface)}.button.lime{color:var(--on-accent)}
.container{width:min(1320px,calc(100% - 80px))}
.hero{display:grid;grid-template-columns:1.02fr 1fr;column-gap:56px;padding-top:72px;position:relative}
.hero-top{display:contents}.hero-copy{grid-column:1;grid-row:1;align-self:center;padding:24px 0 40px;position:relative;z-index:1}.hero-side{display:none}
.hero-copy>.eyebrow{display:inline-flex;letter-spacing:1.4px;font-size:9px;padding:8px 13px;border:1px solid var(--line);border-radius:40px;background:var(--surface)}.hero-copy>.eyebrow:before{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.hero h1{font-size:clamp(44px,4.7vw,70px);letter-spacing:-3.8px;line-height:1.12;margin:30px 0 26px}.hero h1 em{color:var(--accent)}.hero-description{color:var(--muted);font-size:15px;max-width:400px}.hero-actions{gap:24px;margin-top:32px}.text-link{font-size:12px}
.hero-bottomline{grid-column:1/-1;grid-row:2;margin:37px 0 0;padding:18px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:9px;letter-spacing:1.6px}
.hero-stage{grid-column:2;grid-row:1;height:540px;padding:32px;background:#1d3027!important;border:1px solid #415b49;border-radius:28px;isolation:isolate;color:#eff6ed;box-shadow:0 32px 60px #152d231a}
.hero-stage:before{content:'';position:absolute;width:460px;height:460px;top:20px;left:15%;border-radius:50%;background:radial-gradient(circle,#bded9045,transparent 68%);animation:aura-drift 12s ease-in-out infinite alternate;z-index:-1}
.hero-stage:after{content:'';position:absolute;width:380px;height:380px;border:1px solid #b6df8733;border-radius:50%;left:36%;top:-150px;box-shadow:0 0 0 40px #b6df8710,0 0 0 80px #b6df8708;pointer-events:none}
.stage-grid{opacity:.35;background-size:32px 32px;mask-image:linear-gradient(0deg,transparent,#000)}
.stage-left{width:100%;padding:0}.stage-left .eyebrow{color:#d4edaa;font-size:8px;letter-spacing:2px}.stage-product{font-size:34px;letter-spacing:-1.5px;margin:22px 0 9px}.stage-caption{font-size:14px;color:#c3d1c5;white-space:normal;max-width:270px;line-height:1.65}.stage-left .text-link{position:absolute;right:0;top:48px;margin:0;width:44px;height:44px;border:1px solid #849b7259;display:grid;place-items:center;border-radius:50%;font-size:0}.stage-left .arrow{font-size:23px}
.stage-screen{left:10%;top:218px;width:106%;border:5px solid #51694f;border-top-width:20px;border-radius:13px;transform:perspective(1100px) rotateY(-9deg) rotateZ(-5deg);box-shadow:0 25px 50px #0005;animation:screen-enter 1s ease both}.hero-stage:hover .stage-screen{transform:perspective(1100px) rotateY(-4deg) rotateZ(-2deg) translateY(-5px)}
.stage-screen:before{content:'•••';position:absolute;top:-25px;left:8px;font-size:17px;letter-spacing:4px;color:#d4edaa}.stage-screen img{border-radius:6px}
.stage-chip{left:32px;bottom:19px;color:#cfdbc6;border-color:#758969;background:#1c3026e8;z-index:3;border-radius:30px;font-size:8px;padding:5px 10px}
.stage-float{right:22px;bottom:63px;width:210px;background:#e4f3d7;color:#1d3123;border:1px solid #effae8;border-radius:13px;padding:15px;animation:float-card 6s ease-in-out infinite;box-shadow:0 15px 30px #0003}.stage-float .check{background:#284431}.stage-float small{color:#4b644c}
.ecosystem-strip{grid-column:1/-1;border:0;gap:22px;padding:28px 0;overflow:hidden}.ecosystem-strip span{color:var(--muted);font-size:15px;font-weight:600;transition:color .2s}.ecosystem-strip a:hover span{color:var(--accent)}
.section{padding-top:88px}.section-heading{margin-bottom:36px}.section-heading h2,.about h2,.contact h2{font-size:clamp(32px,3.4vw,48px);letter-spacing:-2px}.eyebrow{color:var(--accent)}
.portfolio-tools{padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}.filter{color:var(--muted);border-radius:9px;padding:10px 16px}.filter.active{background:var(--ink);color:var(--paper)}.filter:not(.active):hover{background:var(--surface-soft)}.search-box input{color:var(--ink);border:0;font-size:12px}.search-box:after{color:var(--muted)}
.project-grid{gap:26px}.project-card{border:1px solid var(--line);padding:12px 12px 0;border-radius:21px;background:var(--surface);box-shadow:var(--shadow);transition:transform .35s,border-color .35s,box-shadow .35s}.project-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 22px 50px #18332615}.card-visual{border-radius:12px;height:280px;color:#203025}.card-topline{margin:22px 14px 10px}.card-topline h3{font-size:24px}.category-pill{border-color:var(--line);color:var(--muted);font-size:9px}.project-card>p{margin:0 14px;max-width:none;color:var(--muted)}.card-footer{border:0;margin:0 14px;padding:18px 0 20px}.card-footer span{color:var(--accent);font-size:11px}.card-footer .arrow{height:32px;width:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--ink)}
.portfolio-count{color:var(--muted)}.metrics{padding:42px 0 18px;gap:30px}.metric strong{font-size:46px;font-weight:500}.metric span{font-size:12px}
.approach{background:#18261e;color:#eef5ec;position:relative;overflow:hidden;padding:95px 0}.approach:before{content:'';width:650px;height:650px;position:absolute;right:-300px;top:-200px;border-radius:50%;border:1px solid #b8db8c25;box-shadow:0 0 0 80px #b8db8c06,0 0 0 160px #b8db8c04;pointer-events:none}.approach .container{position:relative}.approach-top p,.approach-item p{color:#b0c0af}.approach-items{gap:24px;margin-top:48px}.approach-item{padding:28px;border:1px solid #45583e;border-radius:18px;background:#ffffff04}.approach-number{display:inline-grid;place-items:center;border:1px solid #607454;border-radius:50%;width:42px;height:42px;color:#d4edaa;font-size:11px}.approach-item h3{margin-top:24px}
.about-graphic{background:var(--surface-soft);border:1px solid var(--line);border-radius:24px;min-height:360px}.about-graphic:before{border-color:var(--line);box-shadow:0 0 0 35px var(--surface-soft),0 0 0 36px var(--line),0 0 0 75px var(--surface-soft),0 0 0 76px var(--line);animation:aura-drift 15s ease-in-out infinite alternate}.about-monogram{color:var(--accent)}.graphic-caption{color:var(--muted)}
.contact{background:var(--surface-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.contact-copy>p,.contact-email span,.field,.consent,.form-note{color:var(--muted)}.contact-email a{border-color:var(--line)}.contact-form{padding:30px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}.contact-form h3{font-size:22px}.field input,.field select,.field textarea{background:var(--surface-raised);border-color:var(--line);border-radius:8px;color:var(--ink);padding:12px}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)}.contact-layout{gap:70px;align-items:center}.field{font-size:12px}.form-note,.consent{font-size:11px}
.site-footer{padding-top:50px}.footer-top p{font-size:12px}.footer-bottom{font-size:11px}.icon-button{background:var(--surface-soft);color:var(--ink)}.toast{background:var(--ink);color:var(--paper);border-radius:12px}.detail-headline{color:var(--accent)!important}.detail-cover{border-radius:22px}.feature-tags span{border-color:var(--line);background:var(--surface);border-radius:30px}.image-caption{color:var(--muted)}
.motion-in{animation:section-enter .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes section-enter{from{opacity:.2;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes screen-enter{from{opacity:0;translate:35px 25px}to{opacity:1;translate:0 0}}
@keyframes float-card{50%{translate:0 -10px}}
@keyframes aura-drift{to{translate:-25px 22px;scale:1.08}}
@media(min-width:1600px){.hero h1{font-size:73px}.hero-stage{height:560px}}
@media(max-width:1100px){.hero{column-gap:30px;padding-top:48px}.hero h1{font-size:49px;letter-spacing:-2.7px}.hero-stage{height:500px;padding:26px}.hero-actions{gap:15px}.hero-actions .button{padding:15px 18px}.main-nav{gap:22px;margin-right:0}.site-header{gap:16px}.card-visual{height:235px}.stage-caption{max-width:220px}.stage-screen{top:225px}.contact-layout{gap:35px}.contact-form{padding:24px}}
@media(max-width:950px){.site-header{flex-wrap:wrap}.site-header>.theme-toggle{margin-left:0}.menu-toggle{order:3;margin-left:0}.site-header .brand{margin-right:auto}.hero-actions{align-items:flex-start;flex-direction:column;gap:18px}.hero h1{font-size:45px}.main-nav{order:4}.stage-caption{max-width:190px}.stage-left .text-link{right:-8px}.ecosystem-strip{flex-wrap:wrap;justify-content:center}.ecosystem-strip span{font-size:13px}}
@media(max-width:760px){.container{width:calc(100% - 36px)}.site-header{padding:14px 18px;min-height:76px;gap:12px}.brand{font-size:27px}.brand-light{font-size:19px}.theme-toggle{width:38px;height:38px}.hero{display:flex;flex-direction:column;padding-top:26px;gap:0}.hero-top{display:block}.hero-copy{padding:12px 0 34px}.hero h1{font-size:clamp(44px,8.8vw,63px);letter-spacing:-2.7px;margin-top:24px}.hero-description{font-size:14px;max-width:480px}.hero-actions{flex-direction:row;align-items:center;gap:23px}.hero-bottomline{order:3;font-size:8px;letter-spacing:.7px;margin-top:14px;gap:20px}.hero-stage{order:2;width:100%;height:470px;flex-shrink:0;padding:25px;border-radius:22px}.stage-product{margin-top:19px;font-size:32px}.stage-caption{max-width:240px}.stage-left .text-link{right:0;top:50px}.stage-screen{top:210px;left:9%;width:103%}.stage-chip{top:auto;left:25px;bottom:17px}.stage-float{display:block;bottom:54px;width:190px;right:17px}.ecosystem-strip{order:4;gap:14px 24px;padding:25px 0}.ecosystem-strip span{font-size:12px}.section{padding-top:52px}.portfolio-tools{padding:12px}.filters{gap:4px}.filter{padding:9px 11px}.project-grid{gap:22px}.card-visual{height:auto;aspect-ratio:1.65}.card-topline{margin:18px 8px 9px;flex-wrap:wrap}.project-card>p,.card-footer{margin-left:8px;margin-right:8px}.metrics{gap:16px}.metric strong{font-size:33px}.metric span{font-size:10px}.approach{padding:60px 0}.approach-items{gap:16px}.approach-item{padding:24px}.about{gap:30px}.about-graphic{min-height:290px}.contact-layout{gap:32px}.contact-form{padding:22px}.contact-email a{font-size:17px}.footer-top{gap:22px;align-items:flex-start}.footer-top p{font-size:11px}.detail-hero h1{font-size:48px}.main-nav.open{flex-wrap:wrap;gap:16px 25px}.search-box{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Theme colors switch together, without a low-contrast transition frame. */
.theme-toggle,.button{transition:transform .25s}
.mobile-contact{display:none}
@media(max-width:950px){.mobile-contact{display:block}}
@media(max-width:480px){.contact-form .form-grid{grid-template-columns:1fr}.contact-form .field.wide{grid-column:auto}.stage-left .text-link{background:#ffffff0c}}
/* Live product showcase: stable layout, layered product transitions. */
.product-showcase{--showcase-accent:#c4e6a6;--showcase-progress:0;padding:0;display:block;background:color-mix(in srgb,var(--showcase-accent) 10%,#14221b)!important;transition:background 1s,border-color 1s;border-color:color-mix(in srgb,var(--showcase-accent) 32%,#263a2c)}
.product-showcase:before{background:radial-gradient(circle,color-mix(in srgb,var(--showcase-accent) 30%,transparent),transparent 68%);transition:background 1s}.product-showcase:after{pointer-events:none;border-color:color-mix(in srgb,var(--showcase-accent) 20%,transparent)}
.showcase-header{position:absolute;left:30px;right:30px;top:27px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:15px}.showcase-header .eyebrow{color:var(--showcase-accent);font-size:8px;letter-spacing:2px}.showcase-counter{font-family:var(--display);font-variant-numeric:tabular-nums;display:flex;gap:9px;font-size:10px;align-items:center;color:#acbdb0}.showcase-counter strong{font-weight:500;color:#eff6ed;font-size:14px}
.showcase-slides{position:absolute;inset:0 0 67px;overflow:hidden}.showcase-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .65s ease,visibility .65s}.showcase-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:2}.showcase-slide .stage-left{position:absolute;left:30px;right:30px;top:72px;width:auto;transform:translateY(12px);transition:transform .75s cubic-bezier(.2,.7,.2,1)}.showcase-slide.is-active .stage-left{transform:none}.showcase-slide .stage-product{margin:0 60px 10px 0;font-size:34px}.showcase-slide .stage-caption{font-size:13px;max-width:80%;line-height:1.6;color:#c5d2c9;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px}.showcase-slide .stage-left .text-link{top:4px;right:0;color:#f0f6ed;border-color:#ffffff30;background:#ffffff06}
.showcase-slide .stage-screen{top:192px;left:9%;width:108%;animation:none;transform:perspective(1100px) rotateY(-9deg) rotateZ(-5deg) translate(32px,16px) scale(.96);transition:transform 1s cubic-bezier(.16,1,.3,1);border-color:color-mix(in srgb,var(--slide-accent) 42%,#263a2c);box-shadow:0 25px 50px #0005}.showcase-slide.is-active .stage-screen{transform:perspective(1100px) rotateY(-9deg) rotateZ(-5deg)}.hero-stage:hover .showcase-slide.is-active .stage-screen{transform:perspective(1100px) rotateY(-5deg) rotateZ(-3deg) translateY(-3px)}.showcase-slide .stage-screen:before{color:var(--slide-accent)}
.showcase-slide .stage-float{bottom:47px;right:22px;background:color-mix(in srgb,var(--slide-accent) 65%,#fff);border-color:#ffffff55;animation:none;transform:translateY(22px);opacity:0;transition:transform .8s .12s,opacity .5s .15s;max-width:65%;width:auto;min-width:180px}.showcase-slide.is-active .stage-float{opacity:1;transform:none}.showcase-slide .stage-float strong{font-size:11px}.showcase-slide .stage-chip{bottom:12px;left:27px;max-width:calc(100% - 54px);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding:0;color:#c8d5c8;background:transparent;font-size:8px;letter-spacing:.3px}
.showcase-controls{position:absolute;bottom:0;left:0;right:0;height:67px;border-top:1px solid #ffffff16;background:#122119bd;backdrop-filter:blur(18px);padding:0 23px;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:5}.showcase-dots{display:flex;gap:4px;flex:1;min-width:0}.showcase-dot{height:40px;flex:1;max-width:28px;min-width:0;padding:0 2px;background:transparent;position:relative;display:grid;align-items:center}.showcase-dot:before{content:'';height:3px;background:#ffffff30;border-radius:10px;grid-area:1/1}.showcase-dot span{grid-area:1/1;height:3px;border-radius:10px;background:var(--showcase-accent);transform:scaleX(0);transform-origin:left}.showcase-dot.is-active:before{background:color-mix(in srgb,var(--showcase-accent) 50%,transparent)}.showcase-dot.is-active span{transform:scaleX(var(--showcase-progress))}.showcase-dot:hover:before{background:#ffffff85}.showcase-buttons{display:flex;gap:4px}.showcase-buttons button{height:36px;width:36px;border:1px solid #ffffff20;border-radius:50%;background:transparent;color:#e2ecdf;display:grid;place-items:center;transition:background .2s}.showcase-buttons button:hover{background:#ffffff15}.showcase-buttons [data-showcase=pause]{border-color:transparent;color:var(--showcase-accent)}.showcase-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.product-showcase:focus-within{outline:1px solid var(--showcase-accent);outline-offset:4px}.product-showcase button:focus-visible,.product-showcase a:focus-visible{outline:2px solid var(--showcase-accent)!important;outline-offset:3px}
@media(max-width:1100px){.showcase-header{left:24px;right:24px}.showcase-slide .stage-left{left:24px;right:24px}.showcase-slide .stage-screen{top:195px}.showcase-controls{padding:0 18px;gap:12px}.showcase-buttons button{width:32px;height:32px}.showcase-slide .stage-float{right:16px;min-width:160px}}
@media(max-width:760px){.product-showcase{height:490px}.showcase-header{top:24px}.showcase-slide .stage-product{font-size:32px}.showcase-slide .stage-left{top:67px}.showcase-slide .stage-screen{top:198px}.showcase-slide .stage-float{bottom:43px;right:16px}.showcase-slide .stage-chip{left:24px;font-size:7px}.showcase-controls{height:63px;padding:0 18px;gap:15px}.showcase-slides{bottom:63px}.showcase-buttons{gap:3px}.showcase-dot{padding:0 1px}.showcase-slide .stage-left .text-link{width:39px;height:39px}.showcase-slide .stage-caption{font-size:12px}}
@media(prefers-reduced-motion:reduce){.showcase-slide,.showcase-slide .stage-left,.showcase-slide .stage-screen,.showcase-slide .stage-float{transition:none!important}}

.product-showcase.is-single .showcase-slides{bottom:0}