/* Shared Felowin components (global): reset scope, logo tones, ambient, glass, glow, 3D tile, buttons, badges. */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --v{syntax:"<number>";inherits:true;initial-value:0}
.fw{position:relative;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased}
.fw a{color:inherit}.fw a:hover{color:inherit}
.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}
.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)}}
.sec{padding-block:140px}
.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)}
.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}
/* 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 */
/* 3D icon (v3.5): no tile box; the shadow follows the icon's strokes */
.tile{--s:96px;--ex:#C4C8C8;width:var(--s);height:var(--s);flex:none;display:grid;place-items:center;background:none;border-radius:0;box-shadow:none}
.tile svg{display:block;width:calc(var(--s) * .86);height:calc(var(--s) * .86);overflow:visible;flex:none;fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 0 var(--ex)) drop-shadow(0 2px 0 var(--ex)) drop-shadow(0 3px 0 var(--ex)) drop-shadow(0 8px 10px rgba(17,17,17,.14))}
:root[data-theme="dark"] .tile,.inv .tile{--ex:#1F2424}
:root[data-theme="dark"] .tile svg,.inv .tile svg{filter:drop-shadow(0 1px 0 var(--ex)) drop-shadow(0 2px 0 var(--ex)) drop-shadow(0 3px 0 var(--ex)) drop-shadow(0 8px 10px rgba(0,0,0,.4))}
.tile.sm{--s:64px}.tile.xs{--s:40px}.tile.lg{--s:120px}
.tile.xs svg{filter:drop-shadow(0 1px 0 var(--ex)) drop-shadow(0 2px 0 var(--ex)) drop-shadow(0 4px 6px rgba(17,17,17,.14))}
.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}}

/* 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}