/* Opening of the site (v1.1): the logo first, once per visit, then the programmer scene
   behind the home hero. Markup: app/views/partials/intro.php and hero-scene.php; script: js/intro.js. */

/* ---------- the logo screen ---------- */
html.ix-playing{overflow:hidden}
.ix{--t0:.35s;position:fixed;inset:0;z-index:120;overflow:hidden;background:#030817;color:#eaf1fa;clip-path:inset(0px 0px 0px 0px);
  transition:clip-path .95s cubic-bezier(.75,0,.2,1),opacity .5s ease;animation:ixFailsafe .5s ease 9s forwards}
.ix::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 48% at 50% 46%,rgba(36,84,160,.3),rgba(8,20,48,.12) 55%,transparent 75%)}
html.intro-seen .ix,.ix[hidden]{display:none}
.ix.shrink{clip-path:inset(var(--ct) var(--cr) var(--cb) var(--cl))}
.ix.gone{opacity:0;visibility:hidden;pointer-events:none}
@keyframes ixFailsafe{to{opacity:0;visibility:hidden}} /* if the script never runs, the page still appears */
.ix-dots{position:absolute;inset:0;width:100%;height:100%}
.ix-stage{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;padding:24px;text-align:center;transition:transform .8s cubic-bezier(.4,0,.2,1),opacity .55s ease}
.ix.shrink .ix-stage,.ix.fade .ix-stage{transform:scale(.86);opacity:0}
.ix .mk{width:clamp(160px,24vw,260px);height:auto;overflow:visible;filter:drop-shadow(0 0 22px rgba(47,140,255,.45)) drop-shadow(0 8px 16px rgba(0,0,0,.6))}
/* the two bands of the A fold in, the crossbar runs up into the right leg, then the circuit lights up */
.ix .mk-l,.ix .mk-r{opacity:0;transform-box:view-box;transform-origin:121px 182px}
.ix .mk-l{transform:translate(-26px,34px) rotate(-6deg);animation:ixBand .75s cubic-bezier(.2,.85,.25,1) var(--t0) forwards}
.ix .mk-r{transform:translate(26px,34px) rotate(6deg);animation:ixBand .75s cubic-bezier(.2,.85,.25,1) calc(var(--t0) + .12s) forwards}
.ix .mk-bar{stroke-dasharray:1;stroke-dashoffset:1;animation:ixDraw .45s cubic-bezier(.6,0,.3,1) calc(var(--t0) + .7s) forwards}
.ix .mk-tr{stroke-dasharray:1;stroke-dashoffset:1;animation:ixDraw .42s ease calc(var(--t0) + .95s + var(--i) * .08s) forwards}
.ix .mk-node{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:ixPop .35s cubic-bezier(.3,1.6,.5,1) calc(var(--t0) + 1.3s + var(--i) * .08s) forwards,ixGlow 1.8s ease-in-out calc(var(--t0) + 1.8s + var(--i) * .15s) infinite}
.ix-word{margin-block-start:clamp(14px,2.4vw,22px);font-family:"Montserrat","Archivo","Arial Black",sans-serif;font-weight:700;font-size:clamp(30px,6.4vw,68px);line-height:1;letter-spacing:.5em;padding-inline-start:.08em;direction:ltr;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%) 220% 0/250% 100% no-repeat,linear-gradient(180deg,#ffffff 0%,#e8eef8 45%,#b9c6dc 62%,#f7f9fc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:blur(10px);opacity:0;
  animation:ixWord .95s cubic-bezier(.2,.8,.2,1) calc(var(--t0) + 1.1s) forwards,ixShine 1.2s ease calc(var(--t0) + 1.95s) forwards}
.ix-word .t{background:linear-gradient(100deg,#2F7BFF 0%,#3FB2FF 55%,#6FE6FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ix-rule{width:0;height:3px;margin-block-start:clamp(10px,1.6vw,16px);border-radius:3px;background:linear-gradient(90deg,transparent,#1F6FFF 18%,#6FE6FF 50%,#1F6FFF 82%,transparent);box-shadow:0 0 16px 2px rgba(47,140,255,.55);animation:ixRule .8s cubic-bezier(.2,.8,.2,1) calc(var(--t0) + 1.5s) forwards}
.ix-tag{margin:clamp(16px,2.4vw,24px) 0 0;font-family:var(--font-body);font-weight:600;font-size:clamp(18px,2.4vw,27px);line-height:1.5;color:#F2F6FB;opacity:0;transform:translateY(10px);animation:ixUp .6s ease calc(var(--t0) + 1.8s) forwards}
.ix-svcs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;max-width:min(92vw,720px);margin:clamp(18px,2.6vw,26px) 0 0;padding:0;list-style:none}
.ix-svcs li{display:flex;align-items:center;gap:8px;color:#d4e2f2;font-size:clamp(13.5px,1.5vw,15.5px);opacity:0;transform:translateY(8px);animation:ixUp .5s ease forwards;animation-delay:calc(var(--t0) + 2.15s + var(--i) * .12s)}
.ix-svcs .ic{width:20px;height:20px;color:#4da3ff;filter:drop-shadow(0 0 6px rgba(77,163,255,.6))}
@keyframes ixDraw{to{stroke-dashoffset:0}}
@keyframes ixPop{to{transform:scale(1)}}
@keyframes ixBand{to{opacity:1;transform:none}}
@keyframes ixGlow{50%{filter:drop-shadow(0 0 5px #6FE6FF)}}
@keyframes ixWord{to{opacity:1;letter-spacing:.08em;filter:blur(0) drop-shadow(0 0 20px rgba(80,160,255,.35))}}
@keyframes ixShine{to{background-position:-120% 0,0 0}}
@keyframes ixRule{to{width:min(62vw,540px)}}
@keyframes ixUp{to{opacity:1;transform:none}}

/* ---------- the home hero with the scene behind it ---------- */
.hero-scene{position:relative;isolation:isolate;overflow:hidden}
.hs{position:absolute;inset:0 0 auto 0;height:100%;z-index:-1;overflow:hidden;background:#020306}
.hs-world{position:absolute;left:0;top:0;width:3600px;height:2400px;transform-origin:0 0}
/* phone: the scene is clear in a window at the top; the text sits below it, on the dark part */
.hs-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(2,4,9,.32) 0,rgba(2,4,9,0) 46px,rgba(2,4,9,0) calc(var(--win) - 120px),rgba(2,4,9,.78) calc(var(--win) - 16px),rgba(2,4,9,.92) calc(var(--win) + 56px),rgba(2,4,9,.95) 100%)}
.hero-scene .hero-grid>div:first-child{position:relative}
.hero-scene .hero-meta{color:#c4d1dd}
.hero-scene .hero-title{color:#ffffff;text-shadow:0 2px 26px rgba(0,0,0,.6)}
.hero-scene .hero-title em{background:linear-gradient(100deg,#8CCBFF 0%,#4FD6FF 50%,#A8EBFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.hero-scene .hero-text{color:#d6e0e9;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.hero-scene .btn-outline{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.07);color:#ffffff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-scene .btn-outline:hover{border-color:rgba(255,255,255,.7)}
.hero-scene .availability{color:#c4d1dd}
.hero-scene .availability .dot{background:#45D690;box-shadow:0 0 0 4px rgba(69,214,144,.18)}
@media (max-width:999.98px){
  .hero-scene{--win:min(72vw,340px);padding-block-start:0}
  .hero-scene .hero-grid{gap:76px}
  .hero-scene .hero-grid>div:first-child{padding-block-start:calc(var(--win) - 34px)}
  .hero-scene .hero-meta{margin-block-end:14px}
}
@media (min-width:1000px){
  .hero-scene{display:flex;align-items:center;min-height:calc(100vh - var(--header))}
  /* no card: the text keeps to its side so both screens stay in view */
  .hero-scene .hero-grid{grid-template-columns:minmax(0,690px);justify-content:start}
  .hero-scene .hero-title{font-size:clamp(36px,3.3vw,46px)}
  .hero-scene .hero-text{max-width:600px}
  :root[lang="en"] .hero-scene .hero-title{font-size:clamp(38px,3.9vw,58px)}
  /* dark behind the text column: the right side in Kurdish, the left side in English */
  .hs-scrim{background:linear-gradient(270deg,rgba(2,4,9,.94) 0%,rgba(2,4,9,.91) 42%,rgba(2,4,9,.8) 52%,rgba(2,4,9,.42) 63%,rgba(2,4,9,.16) 75%,rgba(2,4,9,.28) 100%),linear-gradient(180deg,rgba(2,4,9,.3),rgba(2,4,9,0) 24%,rgba(2,4,9,0) 76%,rgba(2,4,9,.55))}
  [dir="ltr"] .hs-scrim{background:linear-gradient(90deg,rgba(2,4,9,.94) 0%,rgba(2,4,9,.91) 42%,rgba(2,4,9,.8) 52%,rgba(2,4,9,.42) 63%,rgba(2,4,9,.16) 75%,rgba(2,4,9,.28) 100%),linear-gradient(180deg,rgba(2,4,9,.3),rgba(2,4,9,0) 24%,rgba(2,4,9,0) 76%,rgba(2,4,9,.55))}
  .hero-scene .profile-card{border-color:rgba(255,255,255,.13);background:rgba(8,13,20,.4);box-shadow:0 30px 70px -24px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(7px) saturate(1.15);backdrop-filter:blur(7px) saturate(1.15);color:#e9eff5}
  .hero-scene .profile-photo{background:rgba(255,255,255,.03)}
  .hero-scene .profile-name{color:#ffffff}
  .hero-scene .profile-role,.hero-scene .profile-list li{color:#b8c6d3}
  .hero-scene .profile-list{border-color:rgba(255,255,255,.12)}
  .hero-scene .profile-list .ic{color:#8fa3b8}
  .hero-scene .profile-list a{color:#ffffff}
  .hero-scene .chip{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#d5dee8}
}
/* the hero text comes in once the logo has gone (classes set by the script only) */
.hero-scene.hs-wait .hero-grid>div:first-child>*,.hero-scene.hs-wait .profile-card{opacity:0}
.hero-scene.hs-in .hero-grid>div:first-child>*,.hero-scene.hs-in .profile-card{animation:hsUp .85s cubic-bezier(.2,.8,.2,1) both}
.hero-scene.hs-in .hero-grid>div:first-child>:nth-child(2){animation-delay:.12s}
.hero-scene.hs-in .hero-grid>div:first-child>:nth-child(3){animation-delay:.26s}
.hero-scene.hs-in .hero-grid>div:first-child>:nth-child(4){animation-delay:.4s}
.hero-scene.hs-in .hero-grid>div:first-child>:nth-child(5){animation-delay:.52s}
.hero-scene.hs-in .profile-card{animation-delay:.45s}
@keyframes hsUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- inside the scene: the room, his hands, the two screens ---------- */
.hs .env{position:absolute;inset:0;width:3600px;height:2400px;max-width:none}
.hs .ps{position:absolute;left:1080px;top:720px;width:1440px;height:960px}
.hs .room{position:absolute;inset:0;width:1440px;height:960px;max-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 95%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 11%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 95%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 11%,#000 90%,transparent 100%);mask-composite:intersect}
.hs .bezel{position:absolute;left:0;top:0;width:1440px;height:960px;overflow:visible}
.hs .scr{position:absolute;left:0;top:0;width:820px;height:462px;transform-origin:0 0;overflow:hidden;line-height:normal;text-align:left}
.hs .scr::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(170,210,255,.09) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 70%,rgba(140,190,255,.05) 100%)}
.hs .scr.l{transform:matrix3d(1.02083288,0.107409475,0,0.000727875509,0.0154862222,1.2434457,0,-7.12457462e-05,0,0,1,0,-227.664939,112.883478,0,1)}
.hs .scr.c{transform:matrix3d(0.797943467,0.0519419193,0,0.000282703515,0.0433134197,0.764930435,0,3.19696194e-05,0,0,1,0,404.461381,130.715111,0,1)}
.hs .scr p,.hs .scr ul{margin:0}
.hs .hand{position:absolute;background-image:url(../intro/room.webp);background-size:1440px 960px;-webkit-mask-image:radial-gradient(ellipse at 50% 55%,#000 52%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 55%,#000 52%,transparent 72%);transition:transform 70ms ease-out}
.hs .hand.a{left:600px;top:592px;width:240px;height:116px;background-position:-600px -592px}
.hs .hand.b{left:520px;top:640px;width:250px;height:132px;background-position:-520px -640px}
.hs .hand.fa{left:612px;top:600px;width:112px;height:96px;background-position:-612px -600px}
.hs .hand.fb{left:528px;top:668px;width:118px;height:70px;background-position:-528px -668px}
.hs .key{position:absolute;width:18px;height:10px;margin:-5px 0 0 -9px;border-radius:50%;background:radial-gradient(ellipse,rgba(120,200,255,.5),rgba(120,170,255,0) 70%);mix-blend-mode:screen;opacity:0;transition:opacity .25s ease}
.hs .key.on{opacity:.7;transition:opacity 40ms}
/* VS Code */
.hs .vs{display:flex;flex-direction:column;height:100%;background:#1e1e1e;color:#cccccc;font-family:"IBM Plex Sans Arabic",sans-serif;font-size:12px}
.hs .vs-title{position:relative;display:flex;align-items:center;gap:12px;height:28px;padding:0 10px;background:#181818;color:#9d9d9d;font-size:11.5px;border-bottom:1px solid #2b2b2b}
.hs .vs-logo{width:14px;height:14px;border-radius:3px;background:linear-gradient(135deg,#29a7f0,#0b6fc1)}
.hs .vs-name{position:absolute;left:0;right:0;text-align:center;pointer-events:none}
.hs .vs-win{margin-left:auto;letter-spacing:2px}
.hs .vs-body{flex:1;display:flex;min-height:0}
.hs .vs-act{display:flex;flex-direction:column;align-items:center;gap:16px;width:44px;padding-top:10px;background:#181818;border-right:1px solid #2b2b2b;color:#858585}
.hs .vs-act svg{width:22px;height:22px}.hs .vs-act svg.on{color:#e7e7e7}
.hs .vs-side{width:170px;background:#181818;border-right:1px solid #2b2b2b;font-size:12px;color:#cccccc}
.hs .vs-side p{margin:0;padding:0 12px;line-height:22px}
.hs .vs-side .h{font-size:10.5px;letter-spacing:.06em;color:#9d9d9d}
.hs .vs-side .root{font-size:11px;font-weight:600}
.hs .vs-side .sub{border-top:1px solid #2b2b2b;font-size:10.5px;font-weight:600;color:#9d9d9d}
.hs .vs-side ul{margin:0 0 8px;padding:0;list-style:none}
.hs .vs-side li{height:20px;line-height:20px;padding-left:calc(14px + var(--d) * 14px);white-space:nowrap;color:#c5c5c5}
.hs .vs-side li.dir::before{content:"›";display:inline-block;width:12px;color:#8a8a8a}
.hs .vs-side li.dir.open::before{transform:rotate(90deg)}
.hs .vs-side li.file::before{content:"";display:inline-block;width:9px;height:9px;margin:0 6px 0 3px;border-radius:2px;background:#3d7ab8;vertical-align:-1px}
.hs .vs-side li.on{background:#37373d;color:#ffffff;outline:1px solid #0078d4;outline-offset:-1px}
.hs .vs-main{flex:1;display:flex;flex-direction:column;min-width:0}
.hs .vs-tabs{position:relative;display:flex;height:32px;background:#181818;border-bottom:1px solid #2b2b2b}
.hs .vs-tabs span{padding:0 14px;line-height:32px;color:#9d9d9d;border-right:1px solid #2b2b2b;font-size:12px}
.hs .vs-tabs span.on{background:#1f1f1f;color:#ffffff;box-shadow:inset 0 1px 0 #0078d4}
.hs .vs-run{position:absolute;right:10px;top:5px;display:grid;place-items:center;width:22px;height:22px;border-radius:4px;color:#cccccc}
.hs .vs-run svg{width:14px;height:14px}
.hs .vs-run.hit{background:#2a6b2a;color:#89d185;box-shadow:0 0 0 1px #3d8b3d}
.hs .vs-crumbs{height:22px;padding:0 14px;line-height:22px;color:#a9a9a9;font-size:11.5px}
.hs .vs-wrap{flex:1;display:flex;min-height:0}
.hs .vs-code{flex:1;overflow:hidden;font-family:var(--font-mono);font-size:12.5px;line-height:19px;white-space:pre;color:#d4d4d4;scroll-behavior:smooth}
.hs .ln{display:flex}
.hs .ln b{flex:none;width:40px;padding-right:16px;text-align:right;font-weight:400;color:#6e7681}
.hs .ln.cur{background:#282828;box-shadow:inset 0 0 0 1px #303030}
.hs .ln.cur b{color:#cccccc}
.hs .caret{display:inline-block;width:2px;height:16px;margin-left:-1px;vertical-align:-3px;background:#aeafad;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.hs .vs-code .k{color:#c586c0}.hs .vs-code .t{color:#4ec9b0}.hs .vs-code .v{color:#9cdcfe}.hs .vs-code .f{color:#dcdcaa}.hs .vs-code .s{color:#ce9178}.hs .vs-code .c{color:#6a9955;font-style:italic}.hs .vs-code .o{color:#d4d4d4}.hs .vs-code .n{color:#b5cea8}.hs .vs-code .y{color:#569cd6}
.hs .vs-mini{width:56px;padding-top:4px;border-left:1px solid #2b2b2b}
.hs .vs-mini i{display:block;height:2px;margin:0 0 2px 6px;border-radius:1px;opacity:.55}
.hs .vs-term{height:0;overflow:hidden;background:#181818;border-top:1px solid #2b2b2b;transition:height .35s cubic-bezier(.2,.8,.2,1)}
.hs .vs-term.open{height:108px}
.hs .vs-term-tabs{display:flex;gap:18px;height:26px;padding:0 14px;line-height:26px;font-size:10.5px;letter-spacing:.04em;color:#8a8a8a}
.hs .vs-term-tabs .on{color:#e7e7e7;box-shadow:inset 0 -1px 0 #e7e7e7}
.hs .vs-term pre{margin:0;padding:2px 14px;font-family:var(--font-mono);font-size:11.5px;line-height:17px;color:#cccccc;white-space:pre}
.hs .vs-term .p{color:#4ec9b0}.hs .vs-term .ok{color:#89d185}
.hs .vs-status{display:flex;gap:16px;height:22px;padding:0 10px;background:#007acc;color:#ffffff;font-size:11.5px;line-height:22px}
.hs .vs-status .sp{flex:1}

/* browser, dark */
.hs .br{display:flex;flex-direction:column;height:100%;background:#070D1F;font-family:"IBM Plex Sans Arabic",sans-serif}
.hs .br-tabs{display:flex;align-items:flex-end;gap:4px;height:34px;padding:0 10px;background:#1f2023}
.hs .br-tab{display:flex;align-items:center;gap:8px;max-width:300px;height:28px;padding:0 12px;border-radius:9px 9px 0 0;background:#35363a;font-size:12px;color:#e8eaed}
.hs .br-tab svg{width:15px;height:15px;flex:none}
.hs .br-tab b{overflow:hidden;font-weight:400;white-space:nowrap;text-overflow:ellipsis}
.hs .br-tab em{font-style:normal;color:#9aa0a6;font-size:10px}
.hs .br-plus{padding:0 8px 6px;color:#9aa0a6;font-size:16px}
.hs .br-bar{display:flex;align-items:center;gap:12px;height:36px;padding:0 12px;background:#35363a;border-bottom:1px solid #2a2b2e}
.hs .br-nav{display:flex;gap:8px;color:#9aa0a6}.hs .br-nav svg{width:15px;height:15px}
.hs .br-url{display:flex;align-items:center;gap:8px;flex:1;height:24px;padding:0 12px;border-radius:12px;background:#202124;font-size:12.5px;color:#e8eaed}
.hs .br-url svg{width:12px;height:12px;color:#9aa0a6}
.hs .br-view{position:relative;flex:1;overflow:hidden}
.hs .br-view img{position:absolute;left:0;top:0;width:100%;height:auto}


/* right screen: the website scrolls slowly, like someone reading it */
.hs .br-view img{will-change:transform}
.hero-scene.hs-run .br-view img{animation:hsScroll 24s cubic-bezier(.45,0,.25,1) .6s forwards}
@keyframes hsScroll{0%,8%{transform:translateY(0)}22%,34%{transform:translateY(-15%)}48%,60%{transform:translateY(-32%)}76%,100%{transform:translateY(-50%)}}

/* left screen: Aurora, the app that opens */
.hs .au{position:absolute;left:52px;top:28px;width:716px;height:304px;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;color:#e8ecf6;font-family:"IBM Plex Sans Arabic",sans-serif;
  background:radial-gradient(120% 90% at 0% 0%,rgba(123,92,255,.24),transparent 55%),radial-gradient(90% 80% at 100% 100%,rgba(46,230,197,.15),transparent 60%),#0b0e1a;
  box-shadow:0 0 0 1px rgba(255,255,255,.09),0 30px 70px -12px rgba(0,0,0,.85);opacity:0;transform:translateY(16px) scale(.9);transform-origin:50% 70%;pointer-events:none}
.hs .au.open{opacity:1;transform:none;transition:opacity .4s ease,transform .65s cubic-bezier(.2,.9,.25,1.05)}
.hs .au svg{display:block}
.hs .au-top{display:flex;align-items:center;gap:7px;height:28px;padding:0 12px;background:rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.06);font-size:11.5px}
.hs .au-logo{width:13px;height:13px;border-radius:4px;background:conic-gradient(from 200deg,#7b5cff,#3aa0ff,#2ee6c5,#ff7aa8,#7b5cff)}
.hs .au-top b{font-weight:600}.hs .au-top span{color:#8a93ad}.hs .au-top em{margin-left:auto;font-style:normal;color:#8a93ad;letter-spacing:2px}
.hs .au-body{flex:1;display:flex;min-height:0}
.hs .au-nav{display:flex;flex-direction:column;align-items:center;gap:8px;width:48px;padding-top:12px;border-right:1px solid rgba(255,255,255,.06)}
.hs .au-nav i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#7d86a3}
.hs .au-nav i.on{background:linear-gradient(135deg,#7b5cff,#3aa0ff);color:#fff;box-shadow:0 6px 16px -6px rgba(123,92,255,.9)}
.hs .au-nav svg{width:16px;height:16px}
.hs .au-main{flex:1;display:flex;flex-direction:column;gap:10px;padding:11px 14px 12px;min-width:0}
.hs .au-head{display:flex;align-items:center;gap:10px}
.hs .au-head>div{flex:1}.hs .au-head b{display:block;font-size:14px;font-weight:600;line-height:1.3}.hs .au-head small{display:block;color:#8a93ad;font-size:10.5px}
.hs .au-search{display:flex;align-items:center;gap:6px;width:150px;height:24px;padding:0 9px;border-radius:12px;background:rgba(255,255,255,.06);color:#7d86a3;font-size:10.5px}
.hs .au-search svg{width:12px;height:12px}.hs .au-search em{font-style:normal}
.hs .au-me{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#ffd27a,#ff7aa8);box-shadow:0 0 0 2px rgba(255,255,255,.15)}
.hs .au-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hs .au-kpi{position:relative;height:76px;padding:9px 11px;border-radius:11px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);overflow:hidden}
.hs .au-kpi.hero{border-color:transparent;background:linear-gradient(135deg,#7b5cff,#3a7bff 60%,#2bb8ff);box-shadow:0 12px 26px -12px rgba(91,92,255,.9)}
.hs .au-kpi p{margin:0;color:#9aa3bd;font-size:10.5px;line-height:1.2}.hs .au-kpi.hero p{color:rgba(255,255,255,.82)}
.hs .au-kpi strong{display:block;margin-top:5px;font:700 20px/1 "Archivo",sans-serif;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.hs .au-kpi span{display:inline-block;margin-top:7px;padding:1px 7px;border-radius:8px;background:rgba(46,230,197,.14);color:#4fe7c9;font-size:9.5px;font-weight:600;line-height:1.5}
.hs .au-kpi.hero span{background:rgba(255,255,255,.2);color:#ffffff}
.hs .au-kpi .spark{position:absolute;right:10px;bottom:10px;width:76px;height:28px}
.hs .spark path{stroke-dasharray:120;stroke-dashoffset:120}
.hs .au.open .spark path{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s ease .55s}
.hs .au-row{flex:1;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px;min-height:0}
.hs .au-chart,.hs .au-goal{display:flex;flex-direction:column;padding:9px 12px;border-radius:11px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);min-width:0;min-height:0}
.hs .au-ch-head{display:flex;align-items:center;justify-content:space-between}
.hs .au-ch-head b,.hs .au-goal b{font-size:11.5px;font-weight:600;line-height:1.3}
.hs .au-ch-head span{display:flex;align-items:center;gap:5px;color:#8a93ad;font-size:9.5px}
.hs .au-ch-head i,.hs .au-leg i{width:7px;height:7px;border-radius:2px}
.hs .au-ch-head i{margin-left:6px}
.hs .au i.a{background:linear-gradient(180deg,#a68bff,#3aa0ff)}.hs .au i.b{background:rgba(255,255,255,.2)}.hs .au i.c{background:#2ee6c5}
.hs .au-bars{flex:1;display:flex;align-items:flex-end;gap:6px;padding-top:6px;min-height:0}
.hs .au-bars .g{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding-bottom:14px}
.hs .au-bars .g i{width:10px;height:var(--h);border-radius:4px 4px 2px 2px;transform:scaleY(0);transform-origin:bottom;transition:height .9s cubic-bezier(.3,.8,.3,1)}
.hs .au-bars .g i.a{background:linear-gradient(180deg,#b29bff,#3aa0ff 70%,#2ee6c5)}
.hs .au-bars .g i.b{background:rgba(255,255,255,.13)}
.hs .au.open .au-bars .g i{transform:scaleY(1);transition:transform .8s cubic-bezier(.2,.9,.3,1) var(--d),height .9s cubic-bezier(.3,.8,.3,1)}
.hs .au-bars small{position:absolute;bottom:0;left:0;right:0;text-align:center;color:#6f7893;font-size:9px;line-height:1.2}
.hs .au-gwrap{flex:1;display:flex;align-items:center;gap:12px;min-height:0}
.hs .au-ring{position:relative;flex:none;width:78px;height:78px}
.hs .au-ring svg{width:100%;height:100%}
.hs .au-ring .rg{stroke-dasharray:201;stroke-dashoffset:201}
.hs .au.open .au-ring .rg{stroke-dashoffset:44;transition:stroke-dashoffset 1.6s cubic-bezier(.3,.8,.3,1) .7s}
.hs .au-ring strong{position:absolute;inset:0;display:grid;place-items:center;font:700 16px/1 "Archivo",sans-serif}
.hs .au-leg{flex:1;min-width:0}
.hs .au-leg p{display:flex;align-items:center;gap:6px;margin:0 0 7px;color:#9aa3bd;font-size:10px;line-height:1.2}
.hs .au-leg em{margin-left:auto;font-style:normal;font-weight:600;color:#e8ecf6}
.hs .au-kpis>div,.hs .au-row>div{opacity:0;transform:translateY(10px)}
.hs .au.open .au-kpis>div,.hs .au.open .au-row>div{opacity:1;transform:none;transition:opacity .5s ease var(--s),transform .6s cubic-bezier(.2,.9,.3,1) var(--s)}
/* ---------- less motion when the visitor asks for it ---------- */
@media (prefers-reduced-motion:reduce){
  .ix{display:none}
  .hero-scene *,.hero-scene.hs-in *{animation:none!important;transition:none!important}
}