/* Harmony site chrome: one nav (with dropdowns) and one footer on every page, Framer and static.
   Brand v2 (harmony-design-source PR #1): monochrome parent brand; Anta caps for short labels only;
   Inter for reading; cyan #2DCBF7 as signal only, at most one per view (here: the hero dot).
   Measured from the Framer nav (09-23): 20px panel radius, blur(7px), the inset/drop shadow pair.
   Generated pages include this file via tools/chrome.py.  — THEMIS 2026-09-23 */

@import url("https://fonts.googleapis.com/css2?family=Anta&family=Inter:wght@300;400;500;600;700&display=swap");

:root{
  --hc-ground:#F7F9FC; --hc-surface:#FFFFFF; --hc-ink:#111827; --hc-ink-2:rgba(17,24,39,.72); --hc-muted:rgba(17,24,39,.52);
  --hc-line:rgba(17,24,39,.10); --hc-wrap:rgba(226,232,240,.82); --hc-solid:rgba(4,7,13,.94); --hc-on-solid:#FFFFFF;
  --hc-signal:#2DCBF7;
  --hc-shadow:rgba(207,231,255,.2) 0 1px 2px 0, rgba(0,0,0,.18) 0 2px 4px 0;
  --hc-inset:rgba(207,231,255,.2) 0 2px 1px 0 inset;
  --hc-label:"Anta","Inter",system-ui,sans-serif; --hc-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --hc-ground:#04070D; --hc-surface:#10131C; --hc-ink:#D5DBE6; --hc-ink-2:rgba(213,219,230,.78); --hc-muted:rgba(184,199,217,.6);
    --hc-line:rgba(216,231,242,.10); --hc-wrap:rgba(8,9,10,.75); --hc-solid:#D5DBE6; --hc-on-solid:#04070D;
    --hc-shadow:rgba(207,231,255,.2) 0 1px 2px 0, rgba(0,0,0,.25) 0 2px 4px 0;
  }
}
:root[data-theme="dark"]{
  --hc-ground:#04070D; --hc-surface:#10131C; --hc-ink:#D5DBE6; --hc-ink-2:rgba(213,219,230,.78); --hc-muted:rgba(184,199,217,.6);
  --hc-line:rgba(216,231,242,.10); --hc-wrap:rgba(8,9,10,.75); --hc-solid:#D5DBE6; --hc-on-solid:#04070D;
  --hc-shadow:rgba(207,231,255,.2) 0 1px 2px 0, rgba(0,0,0,.25) 0 2px 4px 0;
}

/* Framer pages: their own nav and footer give way to the shared ones (CSS only; hydration untouched) */
#main header.framer-zI3Im, #main footer.framer-kBEa4 { display:none !important; }

/* ---------- NAV ---------- */
.hc-nav{position:sticky;top:0;z-index:1000;padding:12px 16px 0;font-family:var(--hc-body)}
.hc-bar{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:color-mix(in srgb,var(--hc-surface) 88%,transparent);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border-radius:20px;box-shadow:var(--hc-shadow);padding:12px 16px 12px 18px;min-height:64px;box-sizing:border-box}
.hc-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--hc-ink);flex:none}
.hc-brand img{width:36px;height:auto;display:block}
:root[data-theme="light"] .hc-brand img{filter:brightness(.2) contrast(1.4)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .hc-brand img{filter:brightness(.2) contrast(1.4)}}
.hc-word{font-family:var(--hc-label);font-size:17px;letter-spacing:.02em;line-height:1;display:flex;flex-direction:column;gap:3px}
.hc-word small{font-size:9.5px;letter-spacing:.34em;color:var(--hc-muted)}
.hc-menu{display:flex;align-items:center;gap:2px;border:1px solid var(--hc-line);border-radius:12px;padding:4px;background:color-mix(in srgb,var(--hc-surface) 70%,transparent)}
.hc-menu > a, .hc-dd > button{font-family:var(--hc-label);font-size:13.5px;letter-spacing:.01em;text-transform:uppercase;color:var(--hc-ink);
  text-decoration:none;background:none;border:0;padding:9px 12px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1}
.hc-menu > a:hover, .hc-dd > button:hover, .hc-dd.open > button{background:color-mix(in srgb,var(--hc-ink) 7%,transparent)}
.hc-menu > a[aria-current="page"]{box-shadow:inset 0 0 0 1px var(--hc-line)}
.hc-dd{position:relative}
.hc-dd > button svg{width:10px;height:10px;transition:transform .25s ease}
.hc-dd.open > button svg{transform:rotate(180deg)}
.hc-panel{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,6px);opacity:0;visibility:hidden;
  transition:opacity .22s ease,transform .22s ease,visibility .22s;background:var(--hc-surface);border-radius:18px;box-shadow:var(--hc-shadow),0 24px 60px rgba(0,0,0,.18);
  border:1px solid var(--hc-line);padding:18px;min-width:280px;text-align:left}
.hc-dd.open .hc-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.hc-panel.hc-wide{width:min(920px,calc(100vw - 48px));display:grid;grid-template-columns:1fr 230px;gap:18px}
.hc-apps{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.hc-app{display:block;text-decoration:none;color:var(--hc-ink);padding:10px 12px;border-radius:12px}
.hc-app:hover{background:color-mix(in srgb,var(--hc-ink) 6%,transparent)}
.hc-app b{font-family:var(--hc-label);font-weight:400;font-size:14px;letter-spacing:.02em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.hc-app span{display:block;font-size:13px;line-height:1.35;color:var(--hc-muted);margin-top:4px}
.hc-chip{font-family:var(--hc-label);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--hc-ink);border-radius:6px;padding:2px 6px;color:var(--hc-ink);opacity:.8}
.hc-chip.wait{border-style:dashed;opacity:.6}
.hc-side{border-left:1px solid var(--hc-line);padding-left:18px;display:flex;flex-direction:column;gap:4px}
.hc-side h6, .hc-small h6, .hc-panel h6.hc-h{font-family:var(--hc-label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--hc-muted);margin:6px 0 6px;font-weight:400}
.hc-side a, .hc-small a{display:block;text-decoration:none;color:var(--hc-ink);font-size:14.5px;padding:8px 10px;border-radius:10px}
.hc-side a:hover, .hc-small a:hover{background:color-mix(in srgb,var(--hc-ink) 6%,transparent)}
.hc-small a small{display:block;font-size:12.5px;color:var(--hc-muted);margin-top:2px}
.hc-actions{display:flex;align-items:center;gap:10px;flex:none}
.hc-psim{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:8px;background:var(--hc-solid);color:var(--hc-on-solid);
  text-decoration:none;font-family:var(--hc-label);font-size:13px;letter-spacing:.06em;box-shadow:var(--hc-inset)}
.hc-psim img{width:20px;height:auto;filter:none}
:root[data-theme="dark"] .hc-psim img{filter:brightness(.2) contrast(1.4)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hc-psim img{filter:brightness(.2) contrast(1.4)}}
.hc-burger{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--hc-line);background:none;color:var(--hc-ink);cursor:pointer}
.hc-burger span{display:block;width:18px;height:1.5px;background:currentColor;margin:4px auto}
.hc-nav a:focus-visible,.hc-nav button:focus-visible,.hc-foot a:focus-visible{outline:2px solid var(--hc-ink);outline-offset:2px}
@media (max-width:960px){
  .hc-menu,.hc-psim{display:none}
  .hc-burger{display:block}
  .hc-nav.open .hc-menu{display:flex;flex-direction:column;align-items:stretch;position:absolute;left:16px;right:16px;top:calc(100% + 8px);
    background:var(--hc-surface);border-radius:18px;box-shadow:var(--hc-shadow),0 24px 60px rgba(0,0,0,.2);padding:10px;max-height:calc(100vh - 110px);overflow:auto}
  .hc-panel{position:static;transform:none!important;opacity:1;visibility:visible;display:none;box-shadow:none;border:0;padding:6px 4px 10px;min-width:0}
  .hc-dd.open .hc-panel{display:block}
  .hc-panel.hc-wide{width:auto;grid-template-columns:1fr;display:none}
  .hc-dd:not(.open) .hc-panel{display:none!important}
  .hc-dd.open .hc-panel.hc-wide{display:grid}
  .hc-apps{grid-template-columns:1fr}
  .hc-side{border-left:0;padding-left:0;border-top:1px solid var(--hc-line);padding-top:10px}
  .hc-dd > button,.hc-menu > a{width:100%;justify-content:space-between;padding:13px 12px}
}
@media (max-width:420px){.hc-word small{display:none}}

/* ---------- FOOTER ---------- */
.hc-foot{font-family:var(--hc-body);color:var(--hc-ink);background:var(--hc-ground);border-top:1px solid var(--hc-line);margin-top:0}
.hc-foot .hc-in{max-width:1200px;margin:0 auto;padding:64px 24px 28px;display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:28px}
.hc-foot .hc-brand{margin-bottom:14px}
.hc-slogan{font-size:15px;line-height:1.5;color:var(--hc-ink-2);max-width:30ch;margin:0}
.hc-foot h6{font-family:var(--hc-label);font-weight:400;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--hc-muted);margin:4px 0 12px}
.hc-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.hc-foot li a{color:var(--hc-ink);text-decoration:none;font-size:14px}
.hc-foot li a:hover{text-decoration:underline}
.hc-foot li a.hc-name{font-family:var(--hc-label);text-transform:uppercase;font-size:13px;letter-spacing:.02em}
.hc-base{max-width:1200px;margin:0 auto;padding:18px 24px 30px;border-top:1px solid var(--hc-line);display:flex;flex-wrap:wrap;gap:10px 22px;
  justify-content:space-between;font-size:13px;color:var(--hc-muted)}
.hc-base a{color:inherit}
@media (max-width:900px){.hc-foot .hc-in{grid-template-columns:1fr 1fr}.hc-foot .hc-brandcol{grid-column:1/-1}}

/* ---------- STATIC PAGES: the Framer look (centred hero, soft light, appear animations) ---------- */
body.hc-static{background:var(--hc-ground)}
body.hc-static .hero{position:relative;text-align:center;overflow:hidden;border-bottom:0;padding:72px 0 88px}
body.hc-static .hero::before{content:"";position:absolute;inset:-20% -10% 0;width:auto;height:auto;pointer-events:none;z-index:0;
  background:radial-gradient(40% 45% at 50% 38%,color-mix(in srgb,var(--hc-ink) 9%,transparent),transparent 70%),
             radial-gradient(35% 40% at 18% 70%,color-mix(in srgb,var(--hc-ink) 6%,transparent),transparent 70%),
             radial-gradient(35% 40% at 84% 64%,color-mix(in srgb,var(--hc-ink) 6%,transparent),transparent 70%)}
body.hc-static .hero .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
body.hc-static .hero .hc-tile{width:148px;height:148px;border-radius:26px;background:var(--hc-surface);box-shadow:var(--hc-shadow),0 18px 50px rgba(0,0,0,.12),inset 0 0 0 8px color-mix(in srgb,var(--hc-ground) 70%,transparent);
  display:grid;place-items:center;margin:0 auto 34px}
body.hc-static .hero .hc-tile img{width:96px;height:auto;opacity:.85}
:root[data-theme="light"] body.hc-static .hero .hc-tile img{filter:brightness(.25)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) body.hc-static .hero .hc-tile img{filter:brightness(.25)}}
body.hc-static .hero .eyebrow{justify-content:center;font-family:var(--hc-label);font-size:14px}
body.hc-static .hero .eyebrow::before{background:var(--hc-signal);box-shadow:0 0 0 0 rgba(45,203,247,.5);animation:hc-pulse 2.4s ease-out infinite}
body.hc-static .hero h1{margin-left:auto;margin-right:auto;max-width:18ch;text-align:center}
body.hc-static .hero p.plain, body.hc-static .hero p{margin-left:auto;margin-right:auto;text-align:center}
body.hc-static .hero .facts, body.hc-static .hero .cta{justify-content:center}
@keyframes hc-pulse{0%{box-shadow:0 0 0 0 rgba(45,203,247,.45)}80%,100%{box-shadow:0 0 0 12px rgba(45,203,247,0)}}
.hc-appear{opacity:0;transform:translateY(40px);filter:blur(4px);transition:opacity .9s cubic-bezier(.22,.8,.22,1),transform .9s cubic-bezier(.22,.8,.22,1),filter .9s ease}
.hc-appear.hc-in{opacity:1;transform:none;filter:none}
.hc-word-in{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(6px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.8,.22,1),filter .8s ease}
.hc-words.hc-in .hc-word-in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion: reduce){.hc-appear,.hc-word-in{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  body.hc-static .hero .eyebrow::before{animation:none}}

/* ---------- BRAND v2 ON FRAMER PAGES (CSS only, hydration untouched) ---------- */
/* the wordmark's "TECHNOLOGIES" was Bungee Hairline (retired 09-17): re-set in Anta, spaced to keep the air */
#main [style*="Bungee Hairline"]{--framer-font-family:"Anta",sans-serif!important;--framer-letter-spacing:.2em!important}
/* the hero's pulse dot was royal blue #2563EB (retired): the one cyan signal */
#main .framer-PUIJL .framer-1gy39l1{background-color:#2DCBF7!important}
#main .framer-PUIJL .framer-f0lo8w{background-color:rgba(45,203,247,.45)!important}
/* links in rich text were template blue rgb(0,153,255): ink, underlined */
#main [style*="--framer-link-text-color"]{--framer-link-text-color:currentColor!important}

/* ---------- CONTACT FORM (/contact) ----------
   Framer's form posts to Framer's handler, which does not run on this host: it is hidden and the
   plain form from harmony-chrome.js takes its slot. Colours come from the --hc tokens, so it
   follows the device's light/dark setting like the rest of the chrome.  — THEMIS 2026-10-21 */
form.framer-1p5ve7k{display:none !important}
.hc-form-slot{width:100%;height:auto}
.hc-form{display:flex;flex-direction:column;gap:16px;width:100%;box-sizing:border-box;padding:28px;border-radius:16px;
  background:var(--hc-surface);border:1px solid var(--hc-line);box-shadow:var(--hc-inset);font-family:var(--hc-body);color:var(--hc-ink)}
.hc-field{display:flex;flex-direction:column;gap:6px}
.hc-field label{font-size:14px;font-weight:500;color:var(--hc-ink)}
.hc-opt{font-weight:400;color:var(--hc-muted)}
.hc-field input,.hc-field textarea{font:inherit;font-size:16px;color:var(--hc-ink);background:var(--hc-ground);border:1px solid var(--hc-line);
  border-radius:10px;padding:12px 14px;width:100%;box-sizing:border-box}
.hc-field textarea{resize:vertical;min-height:140px}
.hc-field input:focus-visible,.hc-field textarea:focus-visible,.hc-submit:focus-visible{outline:2px solid var(--hc-ink);outline-offset:2px}
.hc-field [aria-invalid="true"]{border-color:#D14343}
.hc-err{margin:0;font-size:13px;color:#D14343}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hc-err{color:#FF8A8A}:root:not([data-theme="light"]) .hc-field [aria-invalid="true"]{border-color:#FF8A8A}}
:root[data-theme="dark"] .hc-err{color:#FF8A8A}
:root[data-theme="dark"] .hc-field [aria-invalid="true"]{border-color:#FF8A8A}
.hc-hp{position:absolute !important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.hc-submit{align-self:flex-start;height:44px;padding:0 22px;border:0;border-radius:8px;background:var(--hc-solid);color:var(--hc-on-solid);
  font-family:var(--hc-label);font-size:14px;letter-spacing:.06em;cursor:pointer;box-shadow:var(--hc-inset)}
.hc-submit[disabled]{opacity:.6;cursor:progress}
.hc-status{margin:0;font-size:14px;min-height:1.4em;color:var(--hc-ink-2)}
.hc-form.hc-ok .hc-status{color:var(--hc-ink)}
.hc-form.hc-bad .hc-status{color:#D14343}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hc-form.hc-bad .hc-status{color:#FF8A8A}}
.hc-alt{margin:0;font-size:13px;color:var(--hc-muted)}
.hc-alt a{color:inherit}
@media (max-width:480px){.hc-form{padding:20px}.hc-submit{align-self:stretch}}
/* Hero headlines, every page (Luiz 2026-10-22): the bold statement sits whole above the italic line,
   and the italic line sits under it on one line. harmony-chrome.js scales a long italic line down to
   fit (.hc-fit); Framer's headings mark their italic part with --framer-font-style:italic. */
body.hc-static .hero h1{max-width:min(24ch,100%);min-width:0}
body.hc-static .hero h1 em{display:block;margin-top:.15em}
body.hc-static .hero h1.hc-fit em{white-space:nowrap}
h1.framer-text span[style*="--framer-font-style:italic"],h1.framer-text span[style*="--framer-font-style: italic"]{display:block}
/* Home hero title (Luiz 2026-10-23, seen in Instagram's in-app browser on his phone): "HARMONY AI"
   and "TECHNOLOGIES" each stay whole on one line. On narrow screens each line scales to the heading's
   width (Anta at 0.2em spacing: HARMONY AI = 8.04em wide, TECHNOLOGIES = 10.04em); wider screens keep
   Framer's sizes. Both Framer variants share the layer class and the span order. */
.framer-zayu9h h1.framer-text{container-type:inline-size}
.framer-zayu9h h1.framer-text > span:nth-child(1){font-size:min(var(--framer-font-size),calc(100cqi / 8.3)) !important}
.framer-zayu9h h1.framer-text > span:nth-child(3),.framer-zayu9h h1.framer-text > span:nth-child(2n){font-size:min(var(--framer-font-size),calc(100cqi / 10.3)) !important}
/* Part E (THEMIS 2026-10-23): Products and Research & Development panels in lanes, a line icon per item.
   The wide panels are centred on the bar, not on their button, so they stay inside the viewport at every
   desktop width (before, the Products panel clipped off the left edge at narrow desktop widths). */
.hc-bar{position:relative}
.hc-dd.hc-dd-wide{position:static}
.hc-panel.hc-wide{max-height:calc(100vh - 110px);overflow:auto;overscroll-behavior:contain}
.hc-panel.hc-wide{width:min(1040px,calc(100vw - 48px));grid-template-columns:minmax(0,1fr) 200px}
.hc-lanes{display:grid;gap:2px 14px;min-width:0;align-content:start}
.hc-lanes-products{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.hc-lanes .hc-lane-apps .hc-apps{grid-template-columns:repeat(2,minmax(0,1fr))}
.hc-lanes-rnd{grid-template-columns:repeat(3,minmax(0,1fr))}
.hc-lane .hc-apps{grid-template-columns:1fr;gap:2px}
.hc-lane-in-the-works{grid-column:1 / -1;border-top:1px solid var(--hc-line);padding-top:6px;margin-top:4px}
.hc-lane-in-the-works .hc-apps{grid-template-columns:repeat(3,minmax(0,1fr))}
.hc-lanes .hc-app{padding:8px 10px}
.hc-app{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;align-items:start}
.hc-app b{flex-wrap:wrap}
.hc-app span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.hc-ico{grid-row:1 / span 2;width:22px;height:22px;color:var(--hc-ink);opacity:.82;margin-top:1px;font-style:normal}
.hc-ico svg,.hc-ico img{width:22px;height:22px;display:block}
.hc-ico img{opacity:1}
:root[data-theme="light"] .hc-ico img{filter:brightness(.2) contrast(1.4)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .hc-ico img{filter:brightness(.2) contrast(1.4)}}
.hc-dd .hc-sm{display:none}
@media (min-width:961px) and (max-width:1199px){.hc-dd .hc-lg{display:none}.hc-dd .hc-sm{display:inline}}
@media (max-width:960px){.hc-panel.hc-wide{width:auto;grid-template-columns:1fr;max-height:none;overflow:visible}.hc-lanes-products,.hc-lanes-rnd,.hc-lanes .hc-lane-apps .hc-apps,.hc-lane-in-the-works .hc-apps{grid-template-columns:1fr}
  .hc-lane + .hc-lane{border-top:1px solid var(--hc-line);padding-top:8px;margin-top:4px}}