/* SETG palettes share the same industrial copper identity. */
:root{
  color-scheme:light;
  --header-surface:#f4f3edf5;--flow-surface:#edf0e5;--contact-surface:#e7e8de;
  --input-surface:#fafaf5;--input-line:#c8cebf;--muted-title:#849080;
  --quiet-text:#7b8373;--button-bg:#263b35;--button-fg:#f4f3ed;--button-hover:#a74725;
  --demo-text:#f4f3ed;--rtl-font:'Vazirmatn',sans-serif;
}
:root[data-theme=dark]{
  color-scheme:dark;
  --paper:#14231e;--ink:#e5eadf;--muted:#b0bca8;--line:#3c4c42;
  --copper:#dfa479;--light-copper:#efb98e;--sage:#22362c;--dark:#0e1b16;
  --header-surface:#14231ef5;--flow-surface:#1c3027;--contact-surface:#203329;
  --input-surface:#1c3027;--input-line:#586b58;--muted-title:#9db493;
  --quiet-text:#a2b296;--button-bg:#dfa479;--button-fg:#14231e;--button-hover:#efbb94;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme]){
    color-scheme:dark;
    --paper:#14231e;--ink:#e5eadf;--muted:#b0bca8;--line:#3c4c42;
    --copper:#dfa479;--light-copper:#efb98e;--sage:#22362c;--dark:#0e1b16;
    --header-surface:#14231ef5;--flow-surface:#1c3027;--contact-surface:#203329;
    --input-surface:#1c3027;--input-line:#586b58;--muted-title:#9db493;
    --quiet-text:#a2b296;--button-bg:#dfa479;--button-fg:#14231e;--button-hover:#efbb94;
  }
}
.site-header{background:var(--header-surface)}
.flow,.flow-connector{background:var(--flow-surface)}
.contact-section{background:var(--contact-surface)}
.muted{color:var(--muted-title)}
.language-switch,.art-caption,.hero-art figcaption,.art-node,.flow-number,.industry-tags,.industry-coordinates{color:var(--muted)}
.language-divider,.pillars-label span{color:var(--quiet-text)}
.button,.skip-link{background:var(--button-bg);color:var(--button-fg)}
.button:hover{background:var(--button-hover);color:var(--button-fg)}
.hero-art{background:radial-gradient(ellipse at 48% 45%,color-mix(in srgb,var(--sage) 40%,transparent),transparent 72%)}
.hero-art picture{display:block;width:100%}
.contact-orbit span{border-color:var(--quiet-text)}
form input:not([type=checkbox]),form textarea,form select{background:var(--input-surface);border-color:var(--input-line)}
form textarea::placeholder{color:var(--muted)}
.experience,.demo-controls select{color:var(--demo-text)}
.experience{--paper:var(--demo-text);color-scheme:dark}
.menu-toggle span{background:var(--ink)}
dialog::backdrop{background:#06130dd6}
::selection{background:var(--copper);color:var(--paper)}

/* Every glyph in an RTL document uses the loaded variable font, including
   Latin brand text, numbers, native form fields and SVG chart labels. */
html[dir=rtl]{--font:var(--rtl-font)}
html[dir=rtl] body,html[dir=rtl] body *{font-family:var(--rtl-font)!important}
html[dir=rtl][data-font-source=local]{--rtl-font:'Vazirmatn Local',sans-serif}
html[dir=rtl]:not([data-font-state=ready]) body{visibility:hidden}
html[dir=rtl] .brand-word{letter-spacing:-1px}

/* Increase reading sizes outside the hero; hero type scale stays unchanged. */
html:root .section h2{font-size:clamp(36px,3.8vw,58px)}
html:root .section h3{font-size:27px}
html:root .flow h3{font-size:26px}
html:root .demo-heading h2{font-size:60px}
html:root .demo-stat strong{font-size:48px;line-height:1.15}
html:root .industry-feature h3{font-size:33px}
html:root .contact-section h2{font-size:clamp(42px,4.8vw,68px)}
html:root dialog h2{font-size:38px}
html[dir=rtl] .section h2{font-size:clamp(34px,3.3vw,48px)}
html[dir=rtl] .demo-heading h2{font-size:48px}
html[dir=rtl] .contact-section h2{font-size:clamp(32px,3.8vw,54px)}
html[dir=rtl] dialog h2{font-size:31px}
html:root .desktop-nav{font-size:16px}
html:root .language-switch{font-size:14px}
html:root .header-contact{font-size:14px}
html:root :is(.section-description,.cap-intro>p:last-of-type,.demo-heading p){font-size:20px}
html:root .section .eyebrow,html:root .experience .eyebrow,html:root .contact-section .eyebrow{font-size:13px}
html:root .section-code{font-size:13px}
html:root .pillars p{font-size:17px}
html:root .pillars-label{font-size:15px!important}
html:root .flow p{font-size:17px}
html:root .flow-number{font-size:13px}
html:root .flow-note{font-size:15px}
html:root .cap-list h3{font-size:24px}
html:root .cap-list details p{font-size:18px}
html:root .cap-number{font-size:13px}
html:root .cap-tag{font-size:11px}
html:root .demo-badge{font-size:12px}
html:root .demo-controls label{font-size:15px}
html:root .demo-controls select{font-size:17px}
html:root .slider-label output{font-size:20px}
html:root .control-help{font-size:14px}
html:root .demo-stat span{font-size:15px}
html:root .energy-preserved{font-size:13px}
html:root .chart-head{font-size:13px}
html:root #energy-chart text{font-size:14px}
html:root #demo-status,html:root .data-details{font-size:14px}
html:root table{font-size:15px}
html:root .demo-disclaimer{font-size:14px}
html:root .industry-selector button{font-size:25px}
html:root .industry-selector button>span:first-child{font-size:14px}
html:root .industry-tags{font-size:12px}
html:root .industry-coordinates{font-size:11px}
html:root .industry-feature>p:not(.industry-tags){font-size:19px}
html:root .industry-feature .text-link{font-size:17px}
html:root .approach-grid p{font-size:19px}
html:root .approach-grid article>span{font-size:15px}
html:root .contact-section p:not(.eyebrow){font-size:20px}
html:root .contact-section .button{font-size:17px}
html:root .footer-top p{font-size:16px}
html:root .footer-top p span,html:root .footer-top .text-link{font-size:15px}
html:root .footer-bottom{font-size:13px;flex-wrap:wrap;gap:20px}
html:root .plain-button{font-size:14px}
html:root .form-intro{font-size:17px}
html:root form label{font-size:15px}
html:root form input:not([type=checkbox]),html:root form textarea,html:root form select{font-size:17px}
html:root form textarea::placeholder{font-size:14px}
html:root .consent{font-size:14px}
html:root #form-status{font-size:16px}
html:root .form-submit{font-size:17px}
html:root .form-privacy{font-size:13px}
html:root .privacy-body{font-size:19px}

.theme-picker{display:flex;align-items:center;gap:3px;border:1px solid var(--line);padding:4px;border-radius:6px;margin:0;min-width:0}
.theme-picker label{position:relative;cursor:pointer;border-radius:3px;display:block}
.theme-picker input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.theme-picker span{display:block;padding:6px 14px;font-size:14px;line-height:1.5;color:var(--muted);border-radius:3px}
.theme-picker input:checked+span{background:var(--ink);color:var(--paper)}
.theme-picker input:focus-visible+span{outline:2px solid var(--copper);outline-offset:3px}
.theme-picker label:hover span{color:var(--copper)}
.theme-picker label:has(input:checked):hover span{color:var(--paper)}

@media(max-width:1200px){
  html:root .desktop-nav{font-size:14px;gap:20px}
  html:root .header-contact{font-size:13px}
  html:root .industry-selector button{font-size:23px}
  .demo-layout{grid-template-columns:300px 1fr;gap:35px}
}
@media(max-width:1020px){
  .demo-layout{grid-template-columns:270px 1fr;gap:28px}
  .desktop-nav{gap:16px}
  html:root .industry-selector button{font-size:21px}
  .legend{flex-wrap:wrap;justify-content:flex-end;gap:10px 16px}
}
@media(max-width:760px){
  html:root .section h2{font-size:42px}
  html:root .section h3{font-size:25px}
  html:root .flow h3{font-size:23px}
  html:root .demo-heading h2{font-size:48px}
  html:root .industry-feature h3{font-size:30px}
  html:root .contact-section h2{font-size:clamp(34px,6.6vw,50px)}
  html:root dialog h2{font-size:31px}
  html[dir=rtl] .section h2{font-size:35px}
  html[dir=rtl] .demo-heading h2{font-size:39px}
  html[dir=rtl] .contact-section h2{font-size:clamp(26px,5.8vw,39px)}
  html[dir=rtl] dialog h2{font-size:27px}
  html:root :is(.section-description,.cap-intro>p:last-of-type,.demo-heading p){font-size:18px}
  html:root .section .eyebrow,html:root .experience .eyebrow,html:root .contact-section .eyebrow{font-size:12px}
  html:root .section-code{font-size:11px}
  html:root .pillars p{font-size:14px}
  html:root .pillars-label{font-size:13px!important}
  html:root .flow p{font-size:15px}
  html:root .flow-note{font-size:13px}
  html:root .cap-list h3{font-size:21px}
  html:root .cap-list details p{font-size:17px;padding-inline:28px 8px}
  html:root .cap-number{font-size:12px}
  .demo-layout{grid-template-columns:1fr}
  html:root .demo-badge{font-size:11px}
  html:root .demo-controls label{font-size:14px}
  html:root .demo-controls select{font-size:16px}
  html:root .control-help{font-size:13px}
  html:root .chart-head{font-size:11px;align-items:start}
  html:root #energy-chart text{font-size:24px}
  html:root .demo-disclaimer{font-size:13px}
  html:root .industry-selector button{font-size:22px}
  html:root .industry-feature>p:not(.industry-tags){font-size:17px}
  html:root .industry-tags{font-size:11px}
  html:root .approach-grid p{font-size:17px}
  html:root .contact-section p:not(.eyebrow){font-size:18px}
  html:root .footer-top p{font-size:14px}
  html:root .footer-top p span,html:root .footer-top .text-link{font-size:13px}
  html:root .footer-bottom{font-size:12px;justify-content:flex-start;gap:20px 24px}
  .footer-bottom>p{flex-basis:100%}
  .footer-bottom .plain-button{margin-inline-start:auto}
  html:root .form-intro{font-size:15px}
  html:root form label{font-size:14px}
  html:root .consent,html:root .form-privacy{font-size:12px}
  html:root .privacy-body{font-size:17px}
}
@media(max-width:390px){
  .flow article{padding-inline:16px}
  html:root .flow p{font-size:14px}
  html:root .industry-selector button{font-size:20px}
  html:root .cap-list h3{font-size:19px}
  html:root .pillars p{font-size:12px}
  .theme-picker span{padding-inline:11px}
}