/* 60 / 30 / 10: charcoal canvas, warm-paper sections, electric-lime emphasis.
   Original project frames have their own isolated palettes. */
:root{--bg:#1d211e;--fg:#f4f3ec;--accent:#ceff43;--muted:#b7bfb3;--line:#ffffff26}
.nav{background:#1d211ef5}.review{background:#141915}.device{border-color:#8e9b8260}.about-mark{background:#2b3328}.browser i{background:#9aab89}.process{background:#f4f3ec}.other-systems{background:#f4f3ec;color:#1d211e;margin:30px -5.56% -105px;padding:50px 5.56% 65px;gap:40px}.other-systems article>span,.other-systems small,.other-systems p{color:#535e4c}.other-systems .scope{border-color:#1d211e30}.other-systems .scope i{color:#47573a}.other-systems article{border-color:#1d211e30}.contact{background:#f4f3ec;color:#1d211e}.contact .eyebrow,.contact p,.contact label{color:#535e4c}.contact em{color:#1d211e}.contact input,.contact textarea{color:#1d211e;border-bottom-color:#65705a}.contact .cta{background:#1d211e;color:#ceff43}.contact :focus-visible,.other-systems :focus-visible{outline-color:#41542a}.process .section-heading>p,.process .eyebrow,.process-steps p,.process-steps span{color:#535e4c}.other-systems .scope{font-size:12px}.brand :is(img){filter:none}.cost-preview{background:#e9edf2;aspect-ratio:1280/826;margin:25px 0 15px;border:1px solid #cfd6dc;overflow:hidden;position:relative}.cost-preview iframe{border:0;width:1280px;height:826px;position:absolute;top:0;left:0;transform:scale(var(--cost-scale,.3));transform-origin:top left;pointer-events:none}.other-systems .mini-controls{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}.mini-controls button{background:transparent;color:#1d211e;border:1px solid #606d58;padding:5px 10px;font-size:11px}.mini-controls button[aria-pressed=true]{background:#1d211e;color:#ceff43}.other-systems .case-link{border-bottom-color:#1d211e70;font-size:12px;margin:15px 0}.other-systems .cost-project{grid-column:1/-1;display:grid;grid-template-columns:.75fr 1.4fr;gap:50px;padding-bottom:35px;border-bottom:1px solid #1d211e30}.cost-project>div{min-width:0}.cost-project h3{font-size:44px}.cost-project .cost-preview{margin-top:0}.cost-project .scope{max-width:380px}.other-systems{grid-template-columns:1fr 1fr}.cost-project .source-note{color:#535e4c;font-size:11px}.cost-project .mini-controls{margin-top:15px}.cost-project .scope{display:none}.web-grid{row-gap:45px}.system-access{border-top:1px solid #1d211e30;margin-top:20px;padding-top:15px}.system-access a{font-size:12px;text-decoration:underline}.color-marker{display:inline-block;width:7px;height:7px;background:var(--accent);margin-left:10px}.hero .eyebrow>span:first-child:before{content:'';display:inline-block;width:6px;height:6px;background:var(--accent);margin-left:10px}@media(max-width:760px){.other-systems{grid-template-columns:1fr;margin-bottom:-65px;padding:35px 5.56% 40px;gap:25px}.other-systems .cost-project{grid-template-columns:1fr;gap:20px}.cost-project h3{font-size:35px}.cost-preview{margin-top:10px}.cost-project .source-note{font-size:12px}}
.sukkli-preview{aspect-ratio:1280/826;background:#f0f6ef}
.sukkli-preview iframe{pointer-events:auto}
.sukkli-project h3 small{font:500 13px/1 Assistant;letter-spacing:.08em;color:#535e4c;margin-inline-start:8px}
.other-systems .cost-project h3{font-size:clamp(28px,3vw,42px);line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
.project-index a b{line-height:1.3;display:block;text-wrap:balance}
.system-caption>b{line-height:1.25;text-wrap:balance}
.case-intro h1:not([lang="en"]){direction:rtl;font-size:clamp(42px,7vw,108px);line-height:1.13;letter-spacing:-.035em;max-width:1100px;text-wrap:balance}
.sukkli-project .mini-controls button[aria-pressed="true"]{background:#1d211e;color:#f4f3ec}
@media (min-width:821px){.project-index{grid-template-columns:1.2fr repeat(5,1fr)}}
/* v2: points, lead systems band, smaller systems, site-wide demo note */
.points{padding:105px 5% 40px}
.points .process-steps article{border-top-color:var(--line)}
.points .process-steps span{color:#ceff43}
.points .process-steps p{color:var(--muted)}
.other-systems.lead-systems{margin:30px -5.56% 90px;padding-bottom:30px}
.lead-systems .scope{margin:14px 0 18px}
.more-systems{display:grid;grid-template-columns:1fr 1fr;gap:40px;border-top:1px solid var(--line);margin-top:20px;padding-top:30px}
.more-systems .more-title{grid-column:1/-1;font-size:12px;color:var(--muted);margin:0}
.more-systems article>span{font-size:11px;color:var(--muted)}
.more-systems h3{font-size:30px;margin:10px 0 8px;letter-spacing:-.02em}
.more-systems p{font:400 16px/1.8 Assistant;color:var(--muted);margin:0;max-width:420px}
footer .demo-data{font-size:10px;color:var(--muted);opacity:.75}
@media(max-width:820px){.points{padding:65px 5% 20px}.other-systems.lead-systems{margin-bottom:60px}.more-systems{grid-template-columns:1fr;gap:25px}.more-systems h3{font-size:26px}}
/* v3: what I do in the first screen */
.hero-claims{list-style:none;display:flex;flex-wrap:wrap;gap:10px 0;padding:0;margin:26px 0 8px}
.hero-claims li{font:500 clamp(16px,1.35vw,20px)/1.3 Assistant,Arial;color:var(--fg);padding-inline-end:22px;margin-inline-end:22px;border-inline-end:1px solid var(--line)}
.hero-claims li:last-child{border:0;margin:0;padding:0;color:#ceff43}
.hero-chapters{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.hero-chapters button{font:500 12.5px/1 Assistant,Arial;color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 13px;transition:background .2s,color .2s,border-color .2s}
.hero-chapters button.active,.hero-chapters button[aria-pressed="true"]{background:#ceff43;color:#1d211e;border-color:#ceff43}
.hero-chapters #expand{margin-inline-start:auto}
.hero-chapters button:focus-visible{outline:2px solid #ceff43;outline-offset:2px}
/* process: animated line icons */
.step-icon{width:58px;height:58px;display:block;margin:22px 0 -12px;fill:none;stroke:#1d211e;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.step-icon .draw{stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset 1.4s cubic-bezier(.3,.7,.2,1)}
.step-icon.in .draw{stroke-dashoffset:0}
.step-icon .pulse,.step-icon .flow{stroke:#5b7d1a}
.step-icon.in .pulse{animation:step-pulse 2.4s 1.4s ease-in-out infinite}
.step-icon.in .flow{stroke-dasharray:6 6;animation:step-flow 1.2s 1.4s linear infinite}
@keyframes step-pulse{50%{opacity:.35}}
@keyframes step-flow{to{stroke-dashoffset:-24}}
.motion-off .step-icon .draw,.motion-off .step-icon *{animation:none!important;transition:none!important;stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.step-icon .draw{transition:none;stroke-dashoffset:0}.step-icon *{animation:none!important}}
/* v3: slightly larger reading text across the page */
.hero-copy p{font-size:19px}
.section-heading>p{font-size:16px}
.process-steps p,.points .process-steps p{font-size:19px}
.other-systems p,.more-systems p{font-size:18px}
.other-systems article>span,.lead-systems .scope{font-size:13px}
.other-systems .mini-controls button{font-size:13px}
.other-systems .case-link{font-size:14px}
.project-index b{font-size:19px}.project-index small{font-size:12px}
.project-index>span{font-size:13px}
.eyebrow{font-size:13px}
.about p{font-size:19px}
.contact p{font-size:18px}
.websites article span{font-size:13px}
footer p{font-size:13px}
@media(max-width:820px){.hero-claims li{font-size:16px;padding-inline-end:14px;margin-inline-end:14px}.hero-copy p{font-size:18px}.step-icon{width:50px;height:50px;margin-top:14px}.hero-chapters #expand{margin-inline-start:0}}
/* v3: websites shown inside a browser frame, like the systems */
.web-grid .browser-frame{aspect-ratio:auto;background:#121a14;border:1px solid #adc29a60;border-radius:10px;padding:30px 6px 6px;box-shadow:0 26px 65px #0005;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.web-grid .browser-frame:before{content:attr(data-url);position:absolute;top:0;inset-inline:0;height:30px;font:500 11px/30px Assistant,Arial;color:#9aa69a;text-align:center;direction:ltr}
.web-grid .browser-frame:after{content:"";position:absolute;top:12px;left:14px;width:7px;height:7px;border-radius:50%;background:#5b6556;box-shadow:12px 0 #5b6556,24px 0 #5b6556}
.web-grid .browser-frame video{aspect-ratio:1280/800;height:auto;border-radius:3px;display:block}
.web-grid .browser-frame:hover{transform:translateY(-4px)}
.web-grid .browser-frame>span{bottom:16px;left:16px}