/* Home page — extracted from the Felowin design canvas (v3.4). Tokens live in tokens.css. */

.fw *,.fw *::before,.fw *::after{box-sizing:border-box}
.fw h1,.fw h2,.fw h3,.fw h4,.fw p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chl{width:18px;height:18px;flex:none}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:24px;position:relative;z-index:1}
.l1{fill:var(--logo-1)}.l2{fill:var(--logo-2)}
.k{stroke:var(--logo-1)}.t{stroke:var(--logo-2)}
.eb{font-family:'Vazirmatn',Tahoma,sans-serif;font-weight:700;font-size:13.5px;letter-spacing:0;color:var(--muted);line-height:1.4;display:block}
.eb-fa{font-size:14px;font-weight:700;color:var(--muted);line-height:1.6;display:block}

/* ambient */
.amb{position:absolute;inset:0 0 auto 0;height:1200px;pointer-events:none;z-index:0;overflow:hidden}
.blob{position:absolute;border-radius:50%}
.b1{width:820px;height:820px;right:-220px;top:-320px;background:radial-gradient(closest-side,var(--blob-a),transparent);animation:drift1 24s ease-in-out infinite alternate}
.b2{width:640px;height:640px;left:-200px;top:180px;background:radial-gradient(closest-side,var(--blob-b),transparent);animation:drift2 28s ease-in-out infinite alternate}
.b3{width:700px;height:700px;left:30%;top:620px;background:radial-gradient(closest-side,var(--blob-c),transparent);animation:drift1 32s ease-in-out infinite alternate-reverse}
.dots{position:absolute;inset:0;background:radial-gradient(var(--glass-line) 1px,transparent 1.3px) 0 0/26px 26px;-webkit-mask:radial-gradient(75% 60% at 50% 30%,#000,transparent 80%);mask:radial-gradient(75% 60% at 50% 30%,#000,transparent 80%)}
@keyframes drift1{to{transform:translate(-140px,90px) scale(1.12)}}
@keyframes drift2{to{transform:translate(160px,-70px) scale(.92)}}

/* glass + glow */
.glass{background:var(--glass-strong);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 48px -28px var(--glass-shadow);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
.glow{position:relative}
.glow::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--a),transparent 0deg,transparent 210deg,var(--glow-a) 275deg,var(--glow-b) 318deg,var(--glow-c) 345deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:.75;animation:orbit 7s linear infinite}
@keyframes orbit{to{--a:360deg}}

/* 3D icon tile */
.hov{animation:hov 7s ease-in-out infinite}
@keyframes hov{0%,100%{transform:perspective(700px) translateY(0) rotateX(6deg) rotateY(-9deg)}50%{transform:perspective(700px) translateY(-8px) rotateX(-4deg) rotateY(9deg)}}
.draw use{stroke-dasharray:180;animation:drawic 6s var(--ease) infinite}
@keyframes drawic{0%{stroke-dashoffset:180}30%,100%{stroke-dashoffset:0}}

/* nav */

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;min-height:0;flex:none;align-self:center;white-space:nowrap;padding-inline:26px;border-radius:999px;font:700 16px/1 'Vazirmatn',Tahoma,sans-serif;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .25s var(--pop),background .2s,border-color .2s,box-shadow .25s}
.btn .ic{width:18px;height:18px;transition:transform .3s var(--ease)}
.btn.pri{background:var(--ink);color:var(--paper);box-shadow:0 14px 28px -14px var(--glass-shadow)}
.btn.pri:hover{color:var(--paper);transform:translateY(-2px)}
.btn.pri:hover .ic{transform:translateX(-4px)}
.btn.alt{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn.alt:hover{border-color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--sunken)}
.btn.sm{height:44px;padding-inline:18px;font-size:14px}
.btn.xs{height:38px;padding-inline:14px;font-size:12.5px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:56px 120px}
.kick{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;font-size:14px;font-weight:700;line-height:1.5}
.hero h1{margin-top:22px;font-weight:800;font-size:clamp(42px,5vw,74px);line-height:1.35;letter-spacing:-.01em}
.h-pill{display:inline-block;width:1.9em;height:.92em;border-radius:999px;overflow:hidden;vertical-align:-.08em;margin-inline:.08em;box-shadow:0 0 0 3px var(--paper),0 10px 20px -10px var(--glass-shadow);animation:pillin 1.1s var(--pop) .35s both}
.h-pill img{width:100%;height:100%;object-fit:cover;display:block;animation:ken 9s ease-in-out infinite alternate}
@keyframes pillin{from{width:0;opacity:0}}
.lead{margin-top:24px;max-width:54ch;font-size:18.5px;line-height:2.05;color:var(--muted)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.feats{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:12px}
.feats li{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:600;line-height:1.7}
.rise{animation:rise .9s var(--ease) both}
.d1{animation-delay:.12s}.d2{animation-delay:.24s}.d3{animation-delay:.36s}.d4{animation-delay:.48s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}

.stage{position:relative;height:640px}
.leaf{position:absolute;left:70px;top:0;width:420px;height:620px;border-radius:210px 36px 210px 36px;overflow:hidden;z-index:1;box-shadow:0 50px 90px -46px var(--glass-shadow);animation:archin 1.3s var(--ease) both}
.leaf img{width:100%;height:100%;object-fit:cover;display:block;animation:ken 18s ease-in-out infinite alternate}
.leaf::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.22))}
@keyframes archin{from{opacity:0;transform:translateY(40px) scale(.94)}}
@keyframes ken{to{transform:scale(1.08) translate(-2%,1%)}}
.ov{position:absolute;z-index:4}
.comp{left:-34px;bottom:40px;width:340px;padding:14px;border-radius:24px}
.comp-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;line-height:1.4}
.comp-h .mk{width:36px;height:19px}
.comp-h .cap{margin-inline-start:auto}
.comp-box{margin-top:10px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px 14px 10px}
.typed{font-size:16px;line-height:1.85;font-weight:600;min-height:5.5em}
.typed .w{display:inline-block;animation:word 10s var(--ease) infinite both}
@keyframes word{0%{opacity:0;transform:translateY(6px);filter:blur(5px)}3%,92%{opacity:1;transform:none;filter:none}100%{opacity:0}}
.caret{display:inline-block;width:2px;height:1em;background:var(--ink);vertical-align:-.12em;margin-inline-start:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.comp-bar{display:flex;align-items:center;gap:6px;margin-top:6px}
.tag{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding-inline:10px;border-radius:999px;border:1px solid var(--line);font-size:12px;font-weight:700;background:var(--sunken);line-height:1}
.tag .chl{width:15px;height:15px}
.send{margin-inline-start:auto;width:40px;height:40px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);display:grid;place-items:center;cursor:pointer}
.send .ic{width:18px;height:18px}
.trc{right:-44px;top:262px;width:300px;padding:12px 14px;border-radius:20px;animation:stc 10s infinite both}
.trc ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.trc li{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;line-height:1.6}
.trc li .ic{width:15px;height:15px;color:var(--ok-text)}
.trc time{margin-inline-start:auto;color:var(--muted);font-weight:500;font-size:11.5px;white-space:nowrap}
.trc li:nth-child(1){animation:st1 10s infinite both}
.trc li:nth-child(2){animation:st2 10s infinite both}
.trc li:nth-child(3){animation:st3 10s infinite both}
@keyframes stc{0%,18%{opacity:0;transform:translateY(10px)}22%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes st1{0%,22%{opacity:0;transform:translateX(-8px)}26%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes st2{0%,30%{opacity:0;transform:translateX(-8px)}34%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes st3{0%,38%{opacity:0;transform:translateX(-8px)}42%,92%{opacity:1;transform:none}100%{opacity:0}}
.draft{left:-34px;bottom:8px;width:312px;padding:12px;border-radius:22px;display:grid;gap:10px;animation:sd 10s infinite both}
@keyframes sd{0%,46%{opacity:0;transform:translateY(18px) scale(.94)}52%,92%{opacity:1;transform:none}100%{opacity:0}}
.post{border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#B9502A,#E7A24E);color:#fff;padding:14px 16px;font-weight:800;font-size:17px;line-height:1.7;min-height:96px;display:grid;align-content:end}
.post small{font-weight:500;font-size:11.5px;opacity:.92;display:block}
.drow{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;line-height:1.55}
.drow small{display:block;font-weight:500;color:var(--muted);font-size:11.5px}
.btns{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.draft,.dcard,.trc{height:auto;align-content:start}
.sched{right:-6px;bottom:96px;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:18px;font-size:12.5px;font-weight:700;line-height:1.5;animation:ss 10s infinite both}
@keyframes ss{0%,56%{opacity:0;transform:translateY(10px)}60%,92%{opacity:1;transform:none}100%{opacity:0}}
.bub{width:56px;height:56px;border-radius:19px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;box-shadow:0 20px 34px -20px var(--glass-shadow);animation:float 5.5s ease-in-out infinite}
.bub svg{width:28px;height:28px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.ring{position:relative;width:44px;height:44px;flex:none;display:grid;place-items:center;font-weight:800;font-size:13px}
.ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--ink) calc(var(--v) * 1%),var(--line) 0);transform:scaleX(-1);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px))}
.ring.anim{animation:rv 10s var(--ease) infinite both}
@keyframes rv{0%,50%{--v:0}70%,100%{--v:94}}
.ring.once{animation:fillv 1.8s var(--ease) .4s both}
@keyframes fillv{from{--v:0}}

/* sections */
.sec{padding-block:140px}
.sec-h{display:grid;gap:14px;margin-bottom:56px;max-width:760px}
.sec-h h2{font-size:clamp(32px,3.6vw,52px);line-height:1.45;font-weight:800}
.sec-h p{color:var(--muted);font-size:17.5px;line-height:2.05}
.card{position:relative;border-radius:30px;background:var(--surface);border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;gap:14px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 34px 60px -38px var(--glass-shadow)}
.card h3{font-size:24px;font-weight:800;line-height:1.55}
.card p{font-size:15px;color:var(--muted);line-height:1.95}
.chead{display:flex;align-items:center;gap:12px}
.chead .tile{transition:transform .5s var(--pop)}
.card:hover .chead .tile{transform:perspective(500px) rotateX(10deg) rotateY(-16deg) translateY(-3px)}
.chk{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.chk li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;font-weight:600;line-height:1.8}
.chk .ic{width:18px;height:18px;margin-top:4px;color:var(--ok-text)}
.mini{border-radius:20px;background:var(--paper);border:1px solid var(--line);padding:16px}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:16px}
.pl-photo{grid-row:span 2;padding:0;border:0;overflow:hidden;min-height:620px;border-radius:48px;background:#222}
.pl-photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pl-photo:hover > img{transform:scale(1.05)}
.pl-wide{grid-column:span 2}
.flow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;position:relative}
.fnode{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding-inline:14px;border-radius:999px;background:var(--surface);border:1px solid var(--line-strong);font-size:13.5px;font-weight:700;animation:fpulse 6s ease-in-out infinite}
.fnode:nth-child(3){animation-delay:1.5s}.fnode:nth-child(5){animation-delay:3s}.fnode:nth-child(7){animation-delay:4.5s}
.fnode.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@keyframes fpulse{0%,20%,100%{box-shadow:0 0 0 0 transparent}8%{box-shadow:0 0 0 6px var(--sunken)}}
.farr{color:var(--muted);font-weight:700}
.evt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:700;line-height:1.6}
.evt small{margin-inline-start:auto;color:var(--muted);font-weight:500}
.evts{display:grid;gap:8px;position:relative}
.today{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--ink);color:var(--paper);width:fit-content}
.kpi{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.kpi b{font-size:44px;font-weight:800;line-height:1.1;font-family:'Bricolage Grotesque','Vazirmatn',sans-serif}
.badge{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding-inline:10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1;background:var(--sunken);color:var(--ink)}
.badge.ok{background:var(--ok-tint);color:var(--ok-text)}
.badge.warn{background:var(--warn-tint);color:var(--warn-text)}
.badge.info{background:var(--info-tint);color:var(--info-text)}
.badge .ic{width:13px;height:13px}
.slants{display:flex;align-items:flex-end;gap:8px;height:70px;margin-top:10px}
.slants i{display:block;flex:1;max-width:22px;border-radius:7px 7px 3px 3px;background:var(--line-strong);transform-origin:bottom;animation:grow 4s var(--ease) infinite}
.slants i:last-child{background:var(--logo-2)}
@keyframes grow{0%{transform:scaleY(0)}35%,100%{transform:scaleY(1)}}
.ph-ov{position:absolute;z-index:2}
.ph-chip{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:18px;font-size:13px;font-weight:700;line-height:1.5;color:var(--ink);animation:float 6s ease-in-out infinite}

/* platform band */
.inv{background:var(--paper);color:var(--ink);border-radius:44px;margin-inline:16px;position:relative;overflow:hidden}
[data-theme="dark"] .fw .inv{background:#161616;border:1px solid var(--line)}
.inv .amb{height:100%}
.band-h{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.band-h h2{font-size:clamp(34px,4vw,58px);line-height:1.45;font-weight:800;max-width:16ch}
.band-h p{max-width:46ch;color:var(--muted);font-size:17.5px;line-height:2.05;margin-bottom:20px}
.mq{position:relative;z-index:1;overflow:hidden;margin-top:72px;display:grid;gap:22px;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq-t{display:flex;width:max-content;animation:mq 50s linear infinite}
.mq-t.rev{animation-direction:reverse;animation-duration:60s}
.mq-g{display:flex;align-items:center;gap:22px;padding-inline-end:22px}
.mq-i{display:flex;align-items:center;gap:16px;padding:12px 26px 12px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:clamp(18px,1.8vw,24px);font-weight:800;white-space:nowrap;line-height:1.4}
@keyframes mq{to{transform:translateX(50%)}}

/* unified management */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.stick{position:sticky;top:110px;display:grid;gap:18px}
.stick h2{font-size:clamp(30px,3.2vw,46px);line-height:1.5;font-weight:800}
.stick p{color:var(--muted);font-size:16.5px;line-height:2.05}
.circ{position:relative;width:min(100%,380px);aspect-ratio:1;margin-top:16px;margin-inline:auto}
.circ .ph{position:absolute;inset:34px;border-radius:50%;overflow:hidden}
.circ .ph img{width:100%;height:100%;object-fit:cover;display:block}
.circ .orb{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--line-strong);animation:spin 36s linear infinite}
.circ .orb > .tile{position:absolute;animation:spin 36s linear infinite reverse}
.circ .o1{top:-24px;left:50%;margin-left:-32px}
.circ .o2{bottom:20px;left:-10px}
.circ .o3{bottom:20px;right:-10px}
@keyframes spin{to{transform:rotate(360deg)}}
.pts{display:grid;gap:16px}
.pt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start;padding:28px;border-radius:30px;background:var(--surface);border:1px solid var(--line);transition:transform .5s var(--ease)}
.pt:hover{transform:translateX(-6px)}
.pt .num{font-family:'Bricolage Grotesque','Vazirmatn',sans-serif;font-size:15px;font-weight:800;color:var(--muted);margin-bottom:10px;display:block;text-align:center}
.pt h3{font-size:22px;font-weight:800;line-height:1.6;margin-top:4px}
.pt p{font-size:15px;color:var(--muted);line-height:1.95;margin-top:6px}

/* solutions */
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tb{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding-block:6px;padding-inline:8px 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:700 14px 'Vazirmatn',Tahoma,sans-serif;white-space:nowrap;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.tb:hover{color:var(--ink);border-color:var(--line-strong)}
.tb[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tb .tile.xs{--s:38px}
.tb[aria-selected="true"] .tile.xs{--logo-1:var(--paper);--logo-2:#4FD8C4;--ex:rgba(255,255,255,.25)}
.panel{margin-top:20px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding:32px 36px;border-radius:36px;background:var(--surface);border:1px solid var(--line)}
.pn-txt{display:grid;gap:12px;align-content:start}
.pn-head{display:flex;align-items:center;gap:16px}
.pn-txt h3{font-size:clamp(22px,2.1vw,30px);font-weight:800;line-height:1.5}
.pn-txt p{color:var(--muted);font-size:15.5px;line-height:1.95}
.pn-txt .chk{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px}
.pn-vis{position:relative;height:400px}
.pill-ph{position:absolute;left:50%;top:0;width:250px;height:380px;margin-left:-125px;border-radius:999px;overflow:hidden;background:var(--sunken)}
.pill-ph img{width:100%;height:100%;object-fit:cover;display:block;animation:ken 16s ease-in-out infinite alternate}
.dcard{position:absolute;z-index:3;right:-12px;bottom:-8px;width:310px;padding:14px;border-radius:22px;display:grid;gap:8px;font-size:12.5px;line-height:1.65;animation:float 7s ease-in-out infinite}
.dcard b.h{font-size:13.5px}
.serp{display:grid;gap:2px;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.serp .u{font-size:11.5px;color:var(--muted);direction:ltr;text-align:right}
.serp .tt{font-size:14px;font-weight:700;color:var(--info-text);line-height:1.6}
.serp .dd{font-size:12px;color:var(--muted);line-height:1.8}
.lrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-weight:700}
.lrow small{display:block;font-weight:500;color:var(--muted);font-size:11.5px}
.lrow .end{margin-inline-start:auto}
.bar{height:10px;border-radius:99px;background:var(--sunken);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--ink);margin-inline-start:0;animation:fillw 2.4s var(--ease) both}
.bar i.t2{background:var(--logo-2)}
@keyframes fillw{from{width:0}}
.brow{display:grid;grid-template-columns:120px minmax(0,1fr) 48px;gap:10px;align-items:center;font-weight:700;font-size:12.5px}
.brow{grid-template-columns:150px minmax(0,1fr) 44px}
.brow .bl{display:flex;align-items:center;gap:6px;line-height:1.4}
.brow .bl svg{width:16px;height:16px;flex:none}
.brow b{text-align:end;font-family:'Bricolage Grotesque','Vazirmatn',sans-serif}

/* cta */
.cta{position:relative;text-align:center;padding-block:130px 140px;border-radius:44px;margin-inline:16px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.cta .amb{height:100%}
.cta h2{font-size:clamp(36px,4.6vw,68px);line-height:1.45;font-weight:800;max-width:18ch;margin-inline:auto;margin-top:14px}
.cta .lead{margin-inline:auto;text-align:center}
.cta .ctas{justify-content:center}
.fl{position:absolute;z-index:0}
.fl1{right:7%;top:70px}.fl2{left:8%;top:110px;animation-delay:-2s}.fl3{right:14%;bottom:70px;animation-delay:-4s}.fl4{left:15%;bottom:60px;animation-delay:-1s}.fl5{right:34%;top:24px;animation-delay:-5s}.fl6{left:36%;bottom:20px;animation-delay:-3s}

/* footer */

/* responsive */
@media (max-width:1080px){
  .hero{grid-template-columns:minmax(0,1fr);padding-block:40px 90px}
  .stage{max-width:560px;margin-inline:auto;width:100%}
  .split{grid-template-columns:minmax(0,1fr)}
  .stick{position:static}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-photo{grid-row:span 1;min-height:420px}
  .panel{grid-template-columns:minmax(0,1fr);padding:28px}
}
@media (max-width:600px){
  .sec{padding-block:96px}
  .stage{height:560px}
  .leaf{left:50%;width:300px;height:460px;margin-left:-150px}
  .comp{left:0;bottom:0;width:290px}
  .trc,.sched,.hide-m{display:none}
  .draft{left:0;bottom:0;width:280px}
  .pillars{grid-template-columns:minmax(0,1fr)}
  .pl-wide{grid-column:span 1}
  .pn-vis{height:440px}
  .pill-ph{width:240px;height:380px;margin-left:-120px}
  .pn-txt .chk{grid-template-columns:minmax(0,1fr)}
  .dcard{right:0;width:290px}
  .pt{grid-template-columns:minmax(0,1fr)}
  .inv,.cta{margin-inline:8px;border-radius:32px}
  .fl{display:none}
}

/* scroll-driven entrances where supported */
@supports (animation-timeline: view()){
  .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 5% cover 28%}
  .zoomin{animation:zin linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  @keyframes zin{from{transform:scale(.86);opacity:.4}}
}

.fw.still *,.fw.still *::before,.fw.still *::after{animation:none !important;transition:none !important}

/* tabs: panels use [hidden] */
.fw .panel[hidden]{display:none}

/* Jannah also styles a generic .tabs class: neutralise it so the solutions tab row stays one scrolling line */
.fw .tabs{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;margin:0;padding:0 0 6px;border:0;background:transparent;box-shadow:none;height:auto;min-height:0;list-style:none;float:none;width:auto}
.fw .tabs::before,.fw .tabs::after{content:none;display:none}
.fw .tabs .tb{flex:none;float:none;margin:0}

/* Solutions photo: keep the person and what they are doing visible; the card only overlaps a corner */
.pill-ph{left:0;margin-left:0}
.pill-ph img{object-position:50% 30%}
.dcard{right:0;bottom:-8px;width:min(310px,72%)}
@media (max-width:1080px){.pn-vis{max-width:560px;width:100%;margin-inline:auto}}
@media (max-width:600px){
  .pn-vis{height:auto;display:grid;justify-items:center;gap:0}
  .pill-ph{position:relative;left:auto;top:auto;margin:0;width:240px;height:380px}
  .dcard{position:relative;right:auto;bottom:auto;width:100%;max-width:340px;margin-top:-48px}
}


/* headings: balance the lines so one orphan word never drops to the next line */
.fw h1,.fw h2,.fw h3{text-wrap:balance}
#solutions .sec-h{max-width:1000px}

/* hero chip above the title: no white background, the icon and text sit on the page */
.fw .kick.glass{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding-inline:0 10px}

/* hero: composer card moves down so the tablet in the photo stays visible, a small result chip sits beside it */
.comp{bottom:-26px}
.draft{bottom:-26px}

/* ops flow: numbered steps on a line, not pill buttons */
.fw .flow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;counter-reset:fs;align-items:start;position:relative}
.fw .farr{display:none}
.fw .fnode{counter-increment:fs;position:relative;display:grid;justify-items:center;align-content:start;gap:8px;min-height:0;padding:0 4px;border:0;border-radius:0;background:none;animation:none;text-align:center;font-size:12.5px;font-weight:700;line-height:1.6;color:var(--ink)}
.fw .fnode::before{content:counter(fs,persian);position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--muted);font:800 14px/1 var(--font-body);animation:fpulse 6s ease-in-out infinite}
.fw .fnode:nth-child(3)::before{animation-delay:1.5s}.fw .fnode:nth-child(5)::before{animation-delay:3s}.fw .fnode:nth-child(7)::before{animation-delay:4.5s}
.fw .fnode:not(:first-child)::after{content:"";position:absolute;top:16px;left:calc(50% + 21px);width:calc(100% - 42px);height:2px;border-radius:2px;background:var(--line-strong)}
.fw .fnode.on::before{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* unified management: on narrow screens the photo comes first, then icon, title and text */
@media (max-width:1080px){
  .stick .circ{order:-1;margin-top:0;margin-bottom:12px}
}
@media (max-width:600px){
  .comp,.draft{bottom:0}
}
@media (max-width:600px){
  .circ.hide-m{display:block;width:min(100%,300px)}
}

/* the small cards inside feature cards sit directly on the card, no extra frame */
.fw .card .mini{background:none;border:0;border-radius:0;padding:0}

/* solutions: desktop shows one panel (tabs); phones get a swipe carousel with compact cards */
.panels{display:contents}
@media (max-width:760px){
  .fw #solutions .tabs{display:none}
  .fw .panels{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin-inline:-24px;padding:4px 24px 16px;scrollbar-width:none;overscroll-behavior-x:contain}
  .fw .panels::-webkit-scrollbar{display:none}
  .fw .panels .panel,.fw .panels .panel[hidden]{display:grid;flex:0 0 88%;scroll-snap-align:center;margin:0;padding:12px;gap:12px;border-radius:28px;align-content:start;grid-template-columns:minmax(0,1fr)}
  .fw .panels .pn-vis{order:-1;height:250px;display:block;position:relative;max-width:none;width:100%;margin:0}
  .fw .panels .pill-ph{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;margin:0;border-radius:22px}
  .fw .panels .pill-ph img{object-position:50% 20%}
  .fw .panels .dcard{position:absolute;left:8px;right:8px;bottom:8px;width:auto;max-width:none;margin:0;padding:10px;gap:5px;font-size:11px;line-height:1.55;border-radius:16px;max-height:60%;overflow:hidden;animation:none}
  .fw .panels .dcard .serp .dd,.fw .panels .dcard small{display:none}
  .fw .panels .pn-txt{padding-inline:4px;gap:8px}
  .fw .panels .pn-head{gap:10px}
  .fw .panels .pn-head .tile{--s:44px}
  .fw .panels .pn-txt h3{font-size:19px}
  .fw .panels .pn-txt p{font-size:14px;line-height:1.85}
  .fw .panels .pn-txt .chk{grid-template-columns:minmax(0,1fr);gap:2px}
  .fw .panels .pn-txt .chk li{font-size:13px;line-height:1.7}
}
@media (max-width:760px){
  .fw .panels .pn-vis{height:285px}
  .fw .panels .pill-ph img{object-position:50% 40%}
  .fw .panels .dcard{max-height:48%}
  .fw .panels .dcard > :nth-child(n+3){display:none}
}

/* marquee: just icon + name, no pill holder; the text gets the same stacked shadow as the icons */
.mq-g{gap:48px;padding-inline-end:48px}
.mq-i{--ex:#1F2424;padding:0;border:0;border-radius:0;background:none;gap:14px;
  text-shadow:0 1px 0 var(--ex),0 2px 0 var(--ex),0 3px 0 var(--ex),0 8px 10px rgba(0,0,0,.4)}