/* UXUI website — page layouts & motion. Uses tokens.css + components.css */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--color-surface-default)}
.wrap{max-width:var(--container-max);margin:0 auto;padding-inline:48px}
@media(max-width:1024px){.wrap{padding-inline:32px}}
@media(max-width:640px){.wrap{padding-inline:20px}}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:999;background:var(--ink-900);color:#fff;padding:10px 14px;border-radius:0;text-decoration:none}
.skip:focus{top:12px;color:#fff}
.ux h1,.ux h2,.ux h3,.ux h4{font-family:var(--font-display);margin:0;text-wrap:balance}
[dir="rtl"] .ux h1,[dir="rtl"] .ux h2,[dir="rtl"] .ux h3,[dir="rtl"] .ux h4,[dir="rtl"].ux h1,[dir="rtl"].ux h2,[dir="rtl"].ux h3,[dir="rtl"].ux h4{font-family:var(--font-arabic);letter-spacing:0!important;line-height:1.3}
.eyebrow{font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:18px;display:flex;align-items:center;gap:10px}
[dir="rtl"] .eyebrow{font-family:var(--font-arabic);letter-spacing:0;font-size:14px;text-transform:none}
.eyebrow::before{content:"";width:18px;height:2px;background:currentColor}
.h-xl{font-weight:700;font-size:clamp(46px,7.2vw,104px);line-height:.96;letter-spacing:-.035em}
.h-l{font-weight:700;font-size:clamp(32px,4.2vw,56px);line-height:1.04;letter-spacing:-.025em}
.h-m{font-weight:700;font-size:clamp(26px,2.8vw,40px);line-height:1.1;letter-spacing:-.02em}
.h-s{font-weight:700;font-size:clamp(20px,1.8vw,24px);line-height:1.25;letter-spacing:-.01em}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--color-text-secondary);max-width:58ch;margin:20px 0 0;text-wrap:pretty}
[dir="rtl"] .lede{line-height:1.85}
.muted{color:var(--color-text-secondary)}
.sec{padding-block:clamp(72px,10vw,140px)}
.sec--tight{padding-block:clamp(56px,7vw,96px)}
.sec--ink{background:var(--ink-900);color:#fff}
.sec--ink .lede,.sec--ink .muted{color:#A6AEB8}
.sec--ink .eyebrow{color:#A6AEB8}
.sec--white{background:var(--white)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:56px}
.sec-head>div{max-width:720px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media(max-width:1024px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.sec--ink .btn--secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.sec--ink .btn--secondary:hover{background:rgba(255,255,255,.08)}
.sec--ink .btn--primary{background:#fff;color:var(--ink-900)}
.sec--ink .btn--primary:hover{background:var(--mineral-100)}
.sec--ink :focus-visible{box-shadow:0 0 0 2px var(--ink-900),0 0 0 4px #fff}
.spk{fill:currentColor}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:var(--z-sticky);background:rgba(246,245,241,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color var(--motion-duration-base),background var(--motion-duration-base)}
.hdr.scrolled{border-bottom-color:var(--color-border-decorative);background:rgba(246,245,241,.94)}
.hdr .wrap{display:flex;align-items:center;gap:24px;height:76px}
.brand{display:flex;align-items:center;gap:14px;color:var(--ink-900);text-decoration:none;--spk:var(--orange-500)}
.brand svg{height:24px;width:auto;display:block}
.brand .tl{font:600 13px/1 var(--font-display);color:var(--color-text-secondary);padding-inline-start:14px;border-inline-start:1px solid var(--mineral-300);white-space:nowrap}
@media(max-width:1180px){.brand .tl{display:none}}
.mainnav{display:flex;gap:2px;margin-inline-start:16px}
.mainnav a{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 13px;border-radius:0;color:var(--ink-900);text-decoration:none;font-size:15px;font-weight:500}
[dir="rtl"] .mainnav a{font-family:var(--font-arabic);font-size:16px}
.mainnav a::after{content:"";position:absolute;inset-inline:13px;bottom:8px;height:2px;background:var(--ink-900);transform:scaleX(0);transform-origin:var(--o,left);transition:transform var(--motion-duration-base) var(--motion-ease-standard)}
[dir="rtl"] .mainnav a::after{--o:right}
.mainnav a:hover::after,.mainnav a[aria-current="page"]::after{transform:scaleX(1)}
.mainnav a.ai .spk-i{margin-inline-end:6px}
.hdr__end{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.menu-btn{display:none}
@media(max-width:1024px){.mainnav,.hdr__end .lang,.hdr__end .btn{display:none}.menu-btn{display:inline-flex}}

/* ---------- drawer ---------- */
.drawer{position:fixed;inset:0;z-index:var(--z-drawer);visibility:hidden}
.drawer.open{visibility:visible}
.drawer__bg{position:absolute;inset:0;background:rgba(20,23,28,.4);opacity:0;transition:opacity var(--motion-duration-slow)}
.drawer.open .drawer__bg{opacity:1}
.drawer__panel{position:absolute;top:0;inset-inline-end:0;height:100%;width:min(420px,100%);background:var(--white);display:flex;flex-direction:column;transform:translateX(var(--dx,100%));transition:transform var(--motion-duration-slow) var(--motion-ease-standard)}
[dir="rtl"] .drawer__panel{--dx:-100%}
.drawer.open .drawer__panel{transform:none}
.drawer__hd{display:flex;align-items:center;justify-content:space-between;height:76px;padding:0 16px 0 20px;border-bottom:1px solid var(--color-border-decorative)}
.drawer__list{list-style:none;margin:0;padding:12px 0;flex:1;overflow:auto}
.drawer__list a{display:flex;align-items:center;justify-content:space-between;min-height:60px;padding:0 20px;color:var(--ink-900);text-decoration:none;font:700 22px/1.2 var(--font-display);letter-spacing:-.01em}
[dir="rtl"] .drawer__list a{font-family:var(--font-arabic)}
.drawer__list li{opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s var(--motion-ease-standard)}
.drawer.open .drawer__list li{opacity:1;transform:none}
.drawer.open .drawer__list li:nth-child(2){transition-delay:.04s}.drawer.open .drawer__list li:nth-child(3){transition-delay:.08s}.drawer.open .drawer__list li:nth-child(4){transition-delay:.12s}.drawer.open .drawer__list li:nth-child(5){transition-delay:.16s}.drawer.open .drawer__list li:nth-child(6){transition-delay:.2s}
.drawer__ft{padding:20px;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--color-border-decorative)}

/* ---------- page transition ---------- */
#main{min-height:70vh}
.wipe{position:fixed;inset:0;z-index:250;pointer-events:none;display:grid;grid-template-columns:repeat(6,1fr)}
.wipe i{background:var(--ink-900);transform:scaleY(0);transform-origin:bottom}
.wipe.on i{animation:wipeIn .42s var(--motion-ease-standard) forwards}
.wipe.off i{transform:scaleY(1);transform-origin:top;animation:wipeOut .46s var(--motion-ease-standard) forwards}
.wipe i:nth-child(2){animation-delay:.03s!important}.wipe i:nth-child(3){animation-delay:.06s!important}.wipe i:nth-child(4){animation-delay:.09s!important}.wipe i:nth-child(5){animation-delay:.12s!important}.wipe i:nth-child(6){animation-delay:.15s!important}
@keyframes wipeIn{to{transform:scaleY(1)}}
@keyframes wipeOut{to{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.wipe{display:none}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--motion-ease-standard),transform .9s var(--motion-ease-standard);transition-delay:calc(var(--d,0) * 80ms)}
.rv.in{opacity:1;transform:none}
.rv-mask{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .24em;margin:0 -.04em -.24em}
.rv-mask>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--motion-ease-standard);transition-delay:calc(var(--d,0) * 70ms)}
.in .rv-mask>span,.rv-mask.in>span{transform:none}
.draw path.stroke,.draw line,.draw rect.stroke{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);transition:stroke-dashoffset 1.6s var(--motion-ease-standard)}
.draw.in path.stroke,.draw.in line,.draw.in rect.stroke{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.rv,.rv-mask>span{opacity:1!important;transform:none!important;transition:none!important}.draw path.stroke,.draw line,.draw rect.stroke{stroke-dashoffset:0!important;transition:none!important}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(56px,8vw,112px) clamp(64px,8vw,120px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
@media(max-width:1024px){.hero__grid{grid-template-columns:1fr;gap:40px}}
.hero__ai{display:flex;align-items:center;gap:12px;font:600 clamp(19px,1.8vw,24px)/1.3 var(--font-display);letter-spacing:-.01em;margin:28px 0 0}
[dir="rtl"] .hero__ai{font-family:var(--font-arabic)}
.hero__ai svg{width:24px;height:24px;color:var(--orange-500);flex:none;animation:sparkSpin 7s linear infinite}
@keyframes sparkSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hero__ai svg{animation:none}}
.hero__cta{margin-top:36px}
.field-art{position:relative;aspect-ratio:1/1;max-width:600px;width:100%;justify-self:end}
@media(max-width:1024px){.field-art{justify-self:start;max-width:520px;aspect-ratio:5/4}}
.field-art canvas{position:absolute;inset:0;width:100%;height:100%}
.field-art .chipfloat{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;background:var(--white);border-radius:var(--radius-pill);box-shadow:var(--elevation-2);font:500 14px/1 var(--font-body);color:var(--ink-900);text-decoration:none;white-space:nowrap;transition:transform var(--motion-duration-base) var(--motion-ease-standard),box-shadow var(--motion-duration-base)}
[dir="rtl"] .field-art .chipfloat{font-family:var(--font-arabic)}
.field-art .chipfloat:hover{transform:translateY(-3px);box-shadow:var(--elevation-3);color:var(--ink-900)}
.field-art .chipfloat .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-900)}
.field-art .chipfloat.ai .dot{background:var(--orange-500)}
.floaty{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{50%{translate:0 -8px}}
@media (prefers-reduced-motion:reduce){.floaty{animation:none}}
.scrollcue{display:flex;align-items:center;gap:10px;margin-top:56px;font:500 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-secondary)}
.scrollcue i{width:1px;height:36px;background:var(--mineral-300);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset-inline:0;top:-40%;height:40%;background:var(--ink-900);animation:cue 1.8s var(--motion-ease-standard) infinite}
@keyframes cue{to{top:100%}}
@media (prefers-reduced-motion:reduce){.scrollcue i::after{animation:none;top:30%}}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;border-block:1px solid var(--color-border-decorative);background:var(--white);padding-block:22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__track{display:flex;gap:56px;width:max-content;animation:tick 40s linear infinite}
[dir="rtl"] .ticker__track{animation-name:tickR}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker span{display:inline-flex;align-items:center;gap:14px;font:700 clamp(22px,2.4vw,32px)/1 var(--font-display);letter-spacing:-.02em;white-space:nowrap;color:var(--ink-900)}
[dir="rtl"] .ticker span{font-family:var(--font-arabic);letter-spacing:0}
.ticker span svg{width:18px;height:18px;color:var(--orange-500)}
.ticker span.dim{color:var(--slate-500)}
@keyframes tick{to{transform:translateX(-50%)}}
@keyframes tickR{to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none;flex-wrap:wrap;width:auto}}

/* ---------- problems ---------- */
.prob{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px;min-height:260px;background:var(--white);border-radius:0;box-shadow:var(--elevation-1);text-decoration:none;color:var(--ink-900);overflow:hidden;transition:transform var(--motion-duration-slow) var(--motion-ease-standard),box-shadow var(--motion-duration-slow)}
.prob:hover{transform:translateY(-6px);box-shadow:var(--elevation-3);color:var(--ink-900)}
.prob__n{font:500 12px/1 var(--font-mono);color:var(--color-text-secondary)}
.prob h3{font-size:22px;line-height:1.2;letter-spacing:-.01em}
.prob p{margin:0;font-size:15px;line-height:1.55;color:var(--color-text-secondary)}
.prob__go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-weight:500;font-size:15px}
.prob__go .ico{transition:transform var(--motion-duration-base) var(--motion-ease-standard)}
.prob:hover .prob__go .ico{transform:translateX(var(--nx,4px))}
[dir="rtl"] .prob:hover .prob__go .ico{--nx:-4px}
.prob .frm{position:absolute;top:22px;inset-inline-end:22px;width:46px;height:46px}
.prob .frm rect{fill:none;stroke:var(--ink-900);stroke-width:2;transition:transform var(--motion-duration-slow) var(--motion-ease-standard)}
.prob .frm .o{fill:var(--mineral-200);stroke:none;transition:fill var(--motion-duration-slow)}
.prob:hover .frm .o{fill:var(--ink-900)}
.prob.ai:hover .frm .o{fill:var(--orange-500)}
.prob--wide{grid-column:span 2;background:var(--ink-900);color:#fff}
.prob--wide:hover{color:#fff}
.prob--wide p{color:#A6AEB8}
.prob--wide .frm rect{stroke:#fff}
@media(max-width:640px){.prob--wide{grid-column:auto}}

/* ---------- feature panels ---------- */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center;padding:clamp(28px,4vw,56px);border-radius:0;background:var(--white);box-shadow:var(--elevation-1)}
.feat+.feat{margin-top:24px}
.feat--ink{background:#1C2027;color:#fff;box-shadow:none}
.feat--ink .muted,.feat--ink .lede{color:#A6AEB8}
.feat--rev>:first-child{order:2}
@media(max-width:1024px){.feat{grid-template-columns:1fr;gap:36px}.feat--rev>:first-child{order:0}}
.feat ul{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.feat li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.feat li .ico{margin-top:2px;flex:none}
.feat .for{font:500 12px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-secondary);margin-top:24px}
[dir="rtl"] .feat .for{font-family:var(--font-arabic);text-transform:none;letter-spacing:0;font-size:14px}
.feat--ink .for{color:#A6AEB8}
.feat .row{margin-top:28px}
.stage{position:relative;border-radius:0;background:var(--paper);padding:clamp(18px,3vw,32px);min-height:420px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.feat--ink .stage{background:#262B33}
.feat--ink .stage .ai-surface,.feat--ink .stage .msg{color:var(--ink-900)}
.feat--ink .stage .msg{background:#E9ECF0}
.stage__bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stage__bar .cap{font:500 11.5px/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-secondary)}
[dir="rtl"] .stage__bar .cap{font-family:var(--font-arabic);text-transform:none;letter-spacing:0;font-size:13px}
.feat--ink .stage__bar .cap{color:#A6AEB8}
.feat--ink .stage__bar .btn--secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.pop{animation:pop .5s var(--motion-ease-standard) both}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pop{animation:none}}
.sent{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--color-status-success);font-weight:500}

/* ---------- AI principles ---------- */
.princ{position:relative;padding:32px 28px;border-top:2px solid #fff}
.princ .n{font:500 12px/1 var(--font-mono);color:var(--orange-500);letter-spacing:.1em}
.princ h3{font-size:24px;line-height:1.2;margin:18px 0 10px;color:#fff}
.princ p{margin:0;color:#A6AEB8;font-size:15.5px;line-height:1.6}
.big-spark{position:absolute;width:min(46vw,620px);height:min(46vw,620px);inset-inline-end:-8%;top:50%;translate:0 -50%;color:var(--orange-500);opacity:.95;pointer-events:none}
.big-spark svg{width:100%;height:100%;animation:sparkSpin 40s linear infinite}
@media (prefers-reduced-motion:reduce){.big-spark svg{animation:none}}
.ai-hero{position:relative;overflow:hidden}

/* ---------- capabilities ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--ink-900)}
@media(max-width:1024px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.steps{grid-template-columns:1fr}}
.step{padding:28px 24px 8px 0;border-inline-end:1px solid var(--color-border-decorative);position:relative}
[dir="rtl"] .step{padding:28px 0 8px 24px}
.step:last-child{border-inline-end:0}
.step+.step{padding-inline-start:24px}
.step .k{font:500 12px/1 var(--font-mono);color:var(--color-text-secondary)}
.step h3{font-size:24px;margin:16px 0 10px;letter-spacing:-.01em}
.step p{margin:0;color:var(--color-text-secondary);font-size:15px;line-height:1.6}
.step .out{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px}
.step .out span{font:500 12px/1 var(--font-mono);padding:7px 9px;border-radius:0;background:var(--mineral-100);color:var(--ink-900)}
[dir="rtl"] .step .out span{font-family:var(--font-arabic);font-size:13px}
.step::before{content:"";position:absolute;top:-1px;inset-inline-start:0;height:3px;width:0;background:var(--ink-900);transition:width 1s var(--motion-ease-standard);transition-delay:calc(var(--d,0)*150ms)}
.step.in::before{width:100%}

/* ---------- compare ---------- */
.cmpr{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
@media(max-width:1024px){.cmpr{grid-template-columns:1fr;gap:32px}}
.seg2{display:inline-flex;padding:4px;background:var(--mineral-100);border-radius:var(--radius-pill);position:relative;margin-top:28px}
.seg2 button{position:relative;z-index:1;height:44px;padding:0 20px;border:0;background:transparent;border-radius:var(--radius-pill);font:500 15px/1 var(--font-body);color:var(--ink-900);cursor:pointer}
[dir="rtl"] .seg2 button{font-family:var(--font-arabic)}
.seg2 .pill{position:absolute;top:4px;bottom:4px;border-radius:var(--radius-pill);background:var(--white);box-shadow:var(--elevation-1);transition:inset-inline-start var(--motion-duration-slow) var(--motion-ease-standard),width var(--motion-duration-slow) var(--motion-ease-standard)}
.board{position:relative;min-height:440px;border-radius:0;background:var(--white);box-shadow:var(--elevation-1);overflow:hidden}
.board .it{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:0;background:var(--paper);font-size:14px;line-height:1.35;box-shadow:0 0 0 1px var(--mineral-200);transition:inset-inline-start .7s var(--motion-ease-standard),top .7s var(--motion-ease-standard),rotate .7s var(--motion-ease-standard),width .7s var(--motion-ease-standard),background .4s,opacity .4s;width:44%}
.board .it .ico{flex:none;color:var(--slate-600)}
.board .it small{display:block;font:500 11px/1.3 var(--font-mono);color:var(--color-text-secondary)}
.board.ok .it{background:#fff;box-shadow:var(--elevation-1)}
.board.ok .it .ico{color:var(--ink-900)}
.board .it .badge{margin-inline-start:auto;opacity:0;transition:opacity .4s .3s}
.board.ok .it .badge{opacity:1}
.board__hd{position:absolute;inset-inline:0;top:0;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;font:500 12px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-secondary);opacity:0;transition:opacity .4s}
[dir="rtl"] .board__hd{font-family:var(--font-arabic);text-transform:none;letter-spacing:0;font-size:13px}
.board.ok .board__hd{opacity:1}
.diff{display:grid;gap:14px;margin-top:28px}
.diff div{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.diff .ico{margin-top:2px;flex:none}

/* ---------- explorer ---------- */
.explorer{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:stretch}
@media(max-width:1024px){.explorer{grid-template-columns:1fr}}
.ex-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.14)}
.ex-list button{width:100%;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:16px;align-items:center;min-height:64px;padding:12px 8px;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.14);color:#C7CDD4;text-align:start;cursor:pointer;font:600 20px/1.2 var(--font-display);letter-spacing:-.01em;transition:color var(--motion-duration-fast),padding var(--motion-duration-base) var(--motion-ease-standard)}
[dir="rtl"] .ex-list button{font-family:var(--font-arabic)}
.ex-list button .n{font:500 12px/1 var(--font-mono);color:#6E7682}
.ex-list button small{display:block;font:400 13.5px/1.4 var(--font-body);color:#8A929C;margin-top:4px;letter-spacing:0}
[dir="rtl"] .ex-list button small{font-family:var(--font-arabic)}
.ex-list button:hover{color:#fff;padding-inline-start:16px}
.ex-list button[aria-selected="true"]{color:#fff;padding-inline-start:16px}
.ex-list button[aria-selected="true"] .n{color:#fff}
.ex-list .aiflag{width:16px;height:16px;color:var(--orange-500)}
.ex-panel{position:relative;border-radius:0;background:#1C2027;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:18px;min-height:520px;overflow:hidden}
.ex-panel .ex-in{display:flex;flex-direction:column;gap:18px;flex:1}
.ex-panel .ex-in.swap{animation:pop .5s var(--motion-ease-standard)}
.ex-panel h3{font-size:clamp(28px,3vw,40px);letter-spacing:-.02em;color:#fff}
.ex-panel p{margin:0;color:#A6AEB8;font-size:16px;line-height:1.6;max-width:52ch}
.ex-panel dl{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:0;font-size:15px}
.ex-panel dt{font:500 12px/1.6 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#6E7682}
[dir="rtl"] .ex-panel dt{font-family:var(--font-arabic);text-transform:none;letter-spacing:0;font-size:13px}
.ex-panel dd{margin:0;color:#E3E6EA}
.ex-panel .mini{margin-top:auto}

/* ---------- finder ---------- */
.finder{border-radius:0;background:var(--white);box-shadow:var(--elevation-2);overflow:hidden}
.finder__top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 28px;border-bottom:1px solid var(--color-border-decorative)}
.prog{display:flex;gap:6px}
.prog i{width:36px;height:4px;border-radius:0;background:var(--mineral-200);overflow:hidden;position:relative}
.prog i.on::after{content:"";position:absolute;inset:0;background:var(--ink-900);animation:fillx .5s var(--motion-ease-standard) both;transform-origin:var(--o,left)}
[dir="rtl"] .prog i.on::after{--o:right}
@keyframes fillx{from{transform:scaleX(0)}}
.finder__body{padding:clamp(24px,4vw,48px)}
.finder__body .q{animation:pop .45s var(--motion-ease-standard)}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:28px}
.opt{display:flex;align-items:center;gap:14px;min-height:64px;padding:14px 18px;border-radius:0;border:1px solid var(--color-border-interactive);background:var(--white);font:500 16px/1.35 var(--font-body);text-align:start;color:var(--ink-900);cursor:pointer;transition:border-color var(--motion-duration-fast),background var(--motion-duration-fast),transform var(--motion-duration-fast)}
[dir="rtl"] .opt{font-family:var(--font-arabic)}
.opt:hover{border-color:var(--ink-900);transform:translateY(-2px)}
.opt[aria-pressed="true"]{border-color:var(--ink-900);background:var(--mineral-100);box-shadow:inset 0 0 0 1px var(--ink-900)}
.opt .ico{color:var(--slate-600)}
.result{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
@media(max-width:860px){.result{grid-template-columns:1fr}}
.why{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px;font-size:15px}
.why li{display:flex;gap:10px}
.why .ico{flex:none;margin-top:2px}

/* ---------- closing ---------- */
.closing{position:relative;overflow:hidden;text-align:center}
.closing .h-xl{max-width:14ch;margin-inline:auto}
.closing .row{justify-content:center;margin-top:40px}
.closing canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.closing .wrap{position:relative}

/* ---------- page hero (inner pages) ---------- */
.phero{padding-block:clamp(56px,7vw,104px) clamp(40px,5vw,72px);position:relative;overflow:hidden}
.phero .crumbs{margin-bottom:28px}
.phero__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:end}
@media(max-width:1024px){.phero__grid{grid-template-columns:1fr}}
.phero .frmbig{position:absolute;inset-inline-end:-60px;top:40px;width:340px;opacity:.9;pointer-events:none}
@media(max-width:1024px){.phero .frmbig{display:none}}

/* ---------- products index ---------- */
.pfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:1024px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.pgrid{grid-template-columns:1fr}}
.pcard{text-decoration:none;color:var(--ink-900)}
.pcard:hover{color:var(--ink-900);transform:translateY(-4px)}
.pcard{transition:transform var(--motion-duration-slow) var(--motion-ease-standard),box-shadow var(--motion-duration-slow)}
.pcard__mark{background:var(--mineral-100);color:var(--ink-900)}
.pcard.is-ai .pcard__mark{background:var(--orange-50);color:var(--orange-600)}
.pgrid .pcard.hide{display:none}

/* ---------- product detail ---------- */
.pd-hero .pcard__mark{width:64px;height:64px;border-radius:0}
.pd-hero .pcard__mark .ico{width:30px;height:30px}
.facts{display:grid;gap:0;border-top:1px solid var(--color-border-decorative)}
.facts div{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--color-border-decorative);font-size:15px}
.facts dt{font:500 12px/1.6 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-secondary)}
[dir="rtl"] .facts dt{font-family:var(--font-arabic);text-transform:none;letter-spacing:0;font-size:13px}
.facts dd{margin:0}
.caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:760px){.caps{grid-template-columns:1fr}}
.capi{display:flex;gap:14px;align-items:flex-start;padding:22px;border-radius:0;background:var(--white);box-shadow:var(--elevation-1)}
.capi .ico{flex:none;margin-top:2px}
.capi b{display:block;font:600 16px/1.35 var(--font-display);margin-bottom:6px}
[dir="rtl"] .capi b{font-family:var(--font-arabic)}
.capi p{margin:0;font-size:14.5px;color:var(--color-text-secondary);line-height:1.55}
.capi .badge,.capi .ai-badge{margin-top:10px}

/* walkthrough */
.walk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:clamp(32px,5vw,80px);align-items:center}
@media(max-width:900px){.walk{grid-template-columns:1fr}}
.walk__steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:4px}
.walk__steps button{width:100%;display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;padding:16px 16px 16px 12px;border:0;border-radius:0;background:transparent;text-align:start;cursor:pointer;color:var(--color-text-secondary);transition:background var(--motion-duration-base),color var(--motion-duration-base)}
[dir="rtl"] .walk__steps button{padding:16px 12px 16px 16px}
.walk__steps button:hover{background:rgba(20,23,28,.04);color:var(--ink-900)}
.walk__steps button[aria-current="step"]{background:var(--white);color:var(--ink-900);box-shadow:var(--elevation-1)}
.walk__steps .k{font:500 12px/1 var(--font-mono);padding-top:5px}
.walk__steps b{display:block;font:600 18px/1.3 var(--font-display);color:inherit}
[dir="rtl"] .walk__steps b{font-family:var(--font-arabic)}
.walk__steps span.t{display:block;font-size:15px;line-height:1.55;margin-top:4px;max-height:0;overflow:hidden;opacity:0;transition:max-height .4s var(--motion-ease-standard),opacity .3s}
.walk__steps button[aria-current="step"] span.t{max-height:120px;opacity:1}
.walk__nav{display:flex;align-items:center;gap:12px;margin-top:20px}
.walk__bar{flex:1;height:3px;background:var(--mineral-200);border-radius:0;overflow:hidden}
.walk__bar i{display:block;height:100%;background:var(--ink-900);transition:width var(--motion-duration-slow) var(--motion-ease-standard)}
.phone{position:relative;width:320px;max-width:100%;aspect-ratio:9/18.5;border-radius:44px;background:var(--ink-900);padding:10px;box-shadow:0 40px 80px -30px rgba(20,23,28,.45);justify-self:center}
.phone__scr{position:relative;width:100%;height:100%;border-radius:35px;background:var(--paper);overflow:hidden;display:flex;flex-direction:column}
.phone__notch{position:absolute;top:10px;left:50%;translate:-50% 0;width:96px;height:26px;border-radius:20px;background:var(--ink-900);z-index:3}
.phone__sb{height:46px;flex:none}
.phone__hd{display:flex;align-items:center;justify-content:space-between;padding:6px 18px 12px;flex:none}
.phone__hd b{font:700 18px/1.2 var(--font-display)}
[dir="rtl"] .phone__hd b{font-family:var(--font-arabic)}
.phone__bd{flex:1;padding:0 14px 14px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.phone__bd>*{animation:pop .45s var(--motion-ease-standard) both}
.phone__bd>*:nth-child(2){animation-delay:.06s}.phone__bd>*:nth-child(3){animation-delay:.12s}.phone__bd>*:nth-child(4){animation-delay:.18s}.phone__bd>*:nth-child(5){animation-delay:.24s}
.phone .illus{position:absolute;bottom:-30px;left:50%;translate:-50% 0;white-space:nowrap;font:500 11px/1 var(--font-mono);letter-spacing:.06em;color:var(--color-text-secondary)}
[dir="rtl"] .phone .illus{font-family:var(--font-arabic);letter-spacing:0;font-size:12px}
.scr-card{background:var(--white);border-radius:0;padding:12px 14px;box-shadow:0 0 0 1px var(--mineral-200);font-size:13px;line-height:1.45}
.scr-card b{display:block;font-size:14px;font-weight:600}
.scr-card small{display:block;font:500 11px/1.4 var(--font-mono);color:var(--color-text-secondary)}
[dir="rtl"] .scr-card small{font-family:var(--font-arabic)}
.scr-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.scr-amt{font:500 13px var(--font-mono)}
.scr-btn{display:flex;align-items:center;justify-content:center;height:40px;border-radius:0;background:var(--ink-900);color:#fff;font-size:13.5px;font-weight:600}
.scr-btn.ai{background:#fff;color:var(--orange-800);box-shadow:inset 0 0 0 1.5px var(--orange-500);gap:6px}
.scr-tree{position:relative;flex:1;min-height:260px}
.scr-tree .node{position:absolute;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;font-weight:600;text-align:center}
.scr-tree .node i{width:38px;height:38px;border-radius:50%;background:var(--white);box-shadow:0 0 0 1.5px var(--ink-900);display:grid;place-items:center;font:700 13px var(--font-display);font-style:normal}
.scr-tree .node.me i{background:var(--ink-900);color:#fff}
.scr-tree svg{position:absolute;inset:0;width:100%;height:100%}

/* ---------- AI page ---------- */
.livefeat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:start;padding-block:56px;border-top:1px solid var(--color-border-decorative)}
@media(max-width:1024px){.livefeat{grid-template-columns:1fr}}
.dont{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.dont li{display:flex;gap:12px;font-size:16px;line-height:1.5}
.dont .ico{flex:none;margin-top:2px;color:var(--color-status-danger)}

/* ---------- solutions ---------- */
.sol{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;padding-block:48px;border-top:1px solid var(--color-border-decorative)}
@media(max-width:900px){.sol{grid-template-columns:1fr;gap:24px}}
.sol h3{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.015em}
.sol__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media(max-width:640px){.sol__cols{grid-template-columns:1fr}}
.sol__cols h4{font:500 12px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:10px}
[dir="rtl"] .sol__cols h4{font-family:var(--font-arabic);text-transform:none;letter-spacing:0;font-size:13px}
.sol__cols ul{margin:0;padding-inline-start:18px;font-size:15px;line-height:1.7;color:var(--ink-900)}
.typepill{display:inline-flex;gap:8px;margin-top:14px;flex-wrap:wrap}

/* ---------- company ---------- */
.manifesto{font:700 clamp(28px,3.6vw,52px)/1.12 var(--font-display);letter-spacing:-.025em;max-width:22ch}
[dir="rtl"] .manifesto{font-family:var(--font-arabic);letter-spacing:0;line-height:1.4}
.manifesto .w{opacity:.18;transition:opacity .5s}
.manifesto .w.on{opacity:1}
.model{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--ink-900);border-radius:0;overflow:hidden}
@media(max-width:860px){.model{grid-template-columns:1fr}}
.model>div{background:var(--white);padding:32px}
.model h3{font-size:22px;margin:16px 0 10px}
.model p{margin:0;color:var(--color-text-secondary);font-size:15px;line-height:1.6}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
@media(max-width:1024px){.contact{grid-template-columns:1fr}}
.form{background:var(--white);border-radius:0;box-shadow:var(--elevation-1);padding:clamp(24px,4vw,44px);display:grid;gap:22px}
.form .g2{gap:20px}
.form__ft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:6px}
.form__done{text-align:center;padding:40px 12px;display:flex;flex-direction:column;align-items:center;gap:14px}
.form__done .okmark{width:72px;height:72px}
.form__done .okmark circle{fill:none;stroke:var(--color-status-success);stroke-width:3;stroke-dasharray:226;stroke-dashoffset:226;animation:dash 0.8s var(--motion-ease-standard) forwards}
.form__done .okmark path{fill:none;stroke:var(--color-status-success);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:50;animation:dash .5s .6s var(--motion-ease-standard) forwards}
@keyframes dash{to{stroke-dashoffset:0}}
.demo-toggle{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--color-text-secondary)}

/* ---------- prose (case study / legal) ---------- */
.prose{max-width:var(--text-measure)}
.prose h2{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.015em;margin:56px 0 14px}
.prose p,.prose li{font-size:17px;line-height:1.7;color:var(--ink-700)}
[dir="rtl"] .prose p,[dir="rtl"] .prose li{line-height:1.9}
.toc{position:sticky;top:110px;display:grid;gap:4px;font-size:14px}
.toc a{color:var(--color-text-secondary);text-decoration:none;padding:6px 0}
.toc a:hover{color:var(--ink-900)}
.cs{display:grid;grid-template-columns:200px minmax(0,1fr);gap:56px}
@media(max-width:900px){.cs{grid-template-columns:1fr}.toc{display:none}}

/* ---------- footer ---------- */
.ftr{background:var(--ink-900);color:#C7CDD4;padding-block:80px 40px;position:relative;overflow:hidden}
.ftr a{color:#C7CDD4;text-decoration:none}
.ftr a:hover{color:#fff}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px}
@media(max-width:900px){.ftr__top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ftr__top{grid-template-columns:1fr}}
.ftr h4{font:500 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#6E7682;margin-bottom:18px}
[dir="rtl"] .ftr h4{font-family:var(--font-arabic);text-transform:none;letter-spacing:0;font-size:13px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ftr li a{display:inline-flex;min-height:36px;align-items:center;font-size:15px}
.ftr__lock{display:flex;align-items:center;gap:16px;color:#fff;--spk:var(--orange-500)}
.ftr__lock svg{height:30px;width:auto}
.ftr__lock span{font:600 18px/1 var(--font-display);padding-inline-start:16px;border-inline-start:1px solid #3A414B;white-space:nowrap}
.ftr__ai{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:15px;color:#A6AEB8}
.ftr__ai svg{width:16px;height:16px;color:var(--orange-500)}
.ftr__bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:64px;padding-top:24px;border-top:1px solid #2A2F37;font-size:13.5px;color:#8A929C}
.ftr__mega{font:800 clamp(80px,17vw,260px)/.8 var(--font-display);letter-spacing:-.05em;color:#1E232A;margin-top:56px;white-space:nowrap;user-select:none}
.ftr .lang{color:#fff}
.ftr .lang:hover{background:#2A2F37}
.draftnote{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#A6AEB8}

/* ---------- misc ---------- */
.notfound{min-height:60vh;display:grid;place-items:center;text-align:center}
.notfound .num{font:800 clamp(120px,22vw,280px)/.8 var(--font-display);letter-spacing:-.05em}
.tagdraft{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:0;background:var(--gold-50);color:var(--gold-600)}
[dir="rtl"] .tagdraft{font-family:var(--font-arabic);letter-spacing:0;text-transform:none;font-size:13px}
.ltr{direction:ltr;unicode-bidi:isolate}

@keyframes grow{from{transform:scaleY(0)}}
@keyframes growx{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){[style*="animation:grow"]{animation:none!important}}

/* ---------- intro: the orange Spark means AI ---------- */
html.intro-on{overflow:hidden}
.intro{position:fixed;inset:0;z-index:500;background:var(--ink-900);color:#fff;display:grid;place-items:center;overflow:hidden}
.intro__skip{position:absolute;top:20px;inset-inline-end:20px;z-index:3;min-height:44px;padding:0 16px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:500 14px/1 var(--font-body);cursor:pointer}
.intro__skip:hover{background:rgba(255,255,255,.08)}
.intro :focus-visible{outline:none;box-shadow:0 0 0 2px var(--ink-900),0 0 0 4px #fff}
.intro__mark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.intro__mark svg{width:min(62vw,560px);height:auto;overflow:visible}
.intro__body{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:36px;padding:24px;max-width:760px}
.intro__slot{width:clamp(120px,22vmin,210px);aspect-ratio:1}
.intro__copy{display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(16px);transition:opacity .7s var(--motion-ease-standard),transform .8s var(--motion-ease-standard);pointer-events:none}
.intro.done .intro__copy{opacity:1;transform:none;pointer-events:auto}
.intro__ey{font:500 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:#A6AEB8;margin-bottom:18px}
[dir="rtl"] .intro__ey{font-family:var(--font-arabic);letter-spacing:0;text-transform:none;font-size:14px}
.intro__h{font:700 clamp(32px,5vw,64px)/1.04 var(--font-display);letter-spacing:-.03em;margin:0;text-wrap:balance}
[dir="rtl"] .intro__h{font-family:var(--font-arabic);letter-spacing:0;line-height:1.3}
.intro__p{margin:20px 0 0;max-width:52ch;font-size:clamp(16px,1.5vw,18px);line-height:1.6;color:#C7CDD4}
.intro__ex{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.intro__ex .ai-badge{height:34px;padding:0 14px 0 12px;font-size:14px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s var(--motion-ease-standard);transition-delay:calc(.35s + var(--i)*.12s)}
.intro.done .intro__ex .ai-badge{opacity:1;transform:none}
.intro__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;margin-top:36px}
.intro__tap{font:500 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#8A929C}
[dir="rtl"] .intro__tap{font-family:var(--font-arabic);letter-spacing:0;text-transform:none;font-size:14px}
.intro__enter{background:#fff;color:var(--ink-900)}
.intro__enter:hover{background:var(--mineral-100)}
.intro__spark{position:fixed;z-index:2;padding:20%;border:2px solid rgba(255,255,255,.9);background:transparent;color:var(--orange-500);cursor:pointer;border-radius:0;box-sizing:border-box}
.intro__spark::after{content:"";position:absolute;inset:-2px;border:2px solid var(--orange-500);opacity:0;transition:opacity .3s;pointer-events:none}
.intro.done .intro__spark:hover::after,.intro.done .intro__spark:focus-visible::after{opacity:1}
.intro__spark svg{position:relative;width:100%;height:100%;display:block;fill:currentColor;transition:transform .5s var(--motion-ease-standard)}
.intro.done .intro__spark:hover svg,.intro.done .intro__spark:focus-visible svg{transform:rotate(45deg) scale(1.06)}
.intro__ring{position:absolute;inset:-2px;border-radius:0;border:1.5px solid rgba(255,75,0,.6);opacity:0;pointer-events:none}
.intro.done .intro__ring{animation:ring 2.2s var(--motion-ease-standard) infinite}
@keyframes ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}
.intro.done .intro__spark{animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{50%{filter:drop-shadow(0 0 28px rgba(255,75,0,.45))}}
@media (prefers-reduced-motion:reduce){.intro.done .intro__ring,.intro.done .intro__spark{animation:none}.intro__copy,.intro__ex .ai-badge{transition:none}}
.linklike{display:inline-flex;align-items:center;min-height:36px;padding:0;border:0;background:none;color:#C7CDD4;font:inherit;font-size:15px;cursor:pointer;gap:8px}
.linklike:hover{color:#fff}
.linklike svg{width:14px;height:14px;color:var(--orange-500);fill:currentColor}

.intro__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(640px,86vw)}
.icard{position:relative;height:92px;border:1px solid #3A414B;padding:14px;text-align:start;overflow:hidden;transition:border-color .4s,background .4s}
.icard>div{position:absolute;inset:14px;transition:opacity .4s,transform .5s var(--motion-ease-standard)}
.icard .bf{display:grid;gap:7px;align-content:start}
.icard .bf i{display:block;height:8px;background:#2A2F37}.icard .bf i:nth-child(2){width:60%}
.icard .bf span{font:500 12.5px/1.3 var(--font-body);color:#6E7682;margin-top:4px}
.icard .af{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;opacity:0;transform:translateY(10px)}
.icard .af svg{width:14px;height:14px;color:var(--orange-500);fill:currentColor}
.icard .af b{font:800 clamp(16px,1.8vw,22px)/1 var(--font-display);letter-spacing:-.02em;color:#fff}
.icard.on{border-color:var(--orange-500);background:#1C2027}
.icard.on .bf{opacity:0;transform:translateY(-10px)}
.icard.on .af{opacity:1;transform:none}
.intro__mini{position:fixed;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;color:var(--orange-500);z-index:3;pointer-events:none}
.intro__mini svg{width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 0 10px rgba(255,75,0,.7))}
@media(max-width:560px){.intro__cards{grid-template-columns:1fr}.icard{height:72px}}

/* Respect native hidden state for validation and interactive demos. */
[hidden] { display: none !important; }
@media (max-width: 600px) {
  .ai-badge { white-space: normal; height: auto; min-height: 24px; padding-block: 5px; line-height: 1.35; max-width: 100%; }
  .feat { grid-template-columns: minmax(0, 1fr); }
  .feat > * { min-width: 0; }
}