/* آیپرس — استایل مشترک سایت. عیناً از style داخل index.php قدیمی استخراج شده است. */
:root {
    --bg: #060A14; --bg2: #0A0F1E; --bg3: #0F1628;
    --card: rgba(255,255,255,0.028); --card-h: rgba(255,255,255,0.055);
    --b: rgba(255,255,255,0.07); --b2: rgba(255,255,255,0.14);
    --primary: #00FFFF; --primary-rgb: 0,255,255;
    --secondary: #FF6B35; --secondary-rgb: 255,107,53;
    --success: #00FF99; --warning: #FFD700; --danger: #FF0055;
    --purple: #7C3AED; --purple2: #9F67F8; --p-glow: rgba(124,58,237,0.38); --p-soft: rgba(124,58,237,0.12);
    --gold: #F59E0B; --gold2: #FCD34D; --g-glow: rgba(245,158,11,0.32);
    --green: #10B981; --gr-glow: rgba(16,185,129,0.28);
    --sky: #0EA5E9; --sky-glow: rgba(14,165,233,0.25);
    --red: #EF4444;
    --t1: #F1F5F9; --t2: #94A3B8; --t3: #475569;
    --ff: 'Vazirmatn', sans-serif; --r: 14px; --r2: 20px;
    --tr: all .25s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--ff); background:var(--bg); color:var(--t1); direction:rtl; overflow-x:hidden; line-height:1.75; }
body::before { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events:none; z-index:0; opacity:.5; }
body::after { content:''; position:fixed; inset:0; background:radial-gradient(ellipse 70% 60% at 15% 5%,var(--p-soft) 0%,transparent 55%),radial-gradient(ellipse 55% 45% at 85% 85%,rgba(16,185,129,0.07) 0%,transparent 55%),radial-gradient(ellipse 40% 35% at 55% 45%,rgba(14,165,233,0.05) 0%,transparent 55%); pointer-events:none; z-index:0; }
canvas#stars { position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.55; }

/* ===== STARFIELD BACKGROUND (color-matched to site palette, inspired by uiverse.io/amir_6539/red-duck-82) ===== */
.stars-layer { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:.75; }
#stars-l1, #stars-l2, #stars-l3 { position:absolute; top:0; left:0; border-radius:50%; }
#stars-l1 { width:1px; height:1px; background:transparent; box-shadow:663px 308px #A78BFA, 808px 1333px #A78BFA, 98px 148px #A78BFA, 1681px 1097px #A78BFA, 192px 748px #A78BFA, 1193px 118px #A78BFA, 1039px 439px #A78BFA, 76px 176px #A78BFA, 888px 856px #A78BFA, 143px 492px #A78BFA, 185px 1128px #A78BFA, 869px 121px #A78BFA, 1693px 1158px #A78BFA, 253px 457px #A78BFA, 1291px 1284px #A78BFA, 1193px 126px #A78BFA, 1181px 1199px #A78BFA, 812px 101px #A78BFA, 452px 95px #A78BFA, 1140px 1758px #A78BFA, 272px 593px #A78BFA, 858px 295px #A78BFA, 1107px 241px #A78BFA, 1169px 631px #A78BFA, 1147px 1671px #A78BFA, 1396px 370px #A78BFA, 211px 1191px #A78BFA, 1169px 1308px #A78BFA, 384px 762px #A78BFA, 199px 1121px #A78BFA, 1458px 128px #A78BFA, 1155px 122px #A78BFA, 1267px 421px #A78BFA, 1016px 1393px #A78BFA, 1088px 875px #A78BFA, 1591px 643px #A78BFA, 953px 1199px #A78BFA, 928px 740px #A78BFA, 613px 508px #A78BFA, 1626px 368px #A78BFA, 1431px 1597px #A78BFA, 499px 167px #A78BFA, 1176px 614px #A78BFA, 1075px 1013px #A78BFA, 1792px 703px #A78BFA, 1493px 919px #A78BFA, 589px 1247px #A78BFA, 149px 241px #A78BFA, 1048px 856px #A78BFA, 337px 1550px #A78BFA, 700px 311px #A78BFA, 1001px 863px #A78BFA, 80px 1368px #A78BFA, 158px 1565px #A78BFA, 1142px 1173px #A78BFA, 1616px 1792px #A78BFA, 1675px 642px #A78BFA, 696px 1423px #A78BFA, 717px 1217px #A78BFA, 1017px 1187px #A78BFA, 1632px 934px #A78BFA, 140px 1720px #A78BFA, 191px 552px #A78BFA, 970px 1427px #A78BFA, 1360px 133px #A78BFA, 124px 1497px #A78BFA, 1436px 634px #A78BFA, 1325px 1183px #A78BFA, 1395px 1683px #A78BFA, 912px 582px #A78BFA, 1467px 790px #A78BFA, 1369px 710px #A78BFA, 46px 945px #A78BFA, 727px 344px #A78BFA, 1251px 239px #A78BFA, 1011px 120px #A78BFA, 446px 1573px #A78BFA, 588px 264px #A78BFA, 1512px 507px #A78BFA, 814px 800px #A78BFA, 1784px 1016px #A78BFA, 165px 340px #A78BFA, 919px 822px #A78BFA, 1125px 569px #A78BFA, 280px 1677px #A78BFA, 881px 1769px #A78BFA, 1126px 570px #A78BFA, 1446px 850px #A78BFA, 734px 1398px #A78BFA, 779px 472px #A78BFA, 309px 169px #A78BFA, 360px 309px #A78BFA, 475px 1348px #A78BFA, 477px 24px #A78BFA, 993px 1702px #A78BFA, 1206px 373px #A78BFA, 538px 577px #A78BFA, 8px 298px #A78BFA, 858px 1094px #A78BFA, 756px 1248px #A78BFA, 1159px 652px #A78BFA, 257px 1414px #A78BFA, 1759px 1055px #A78BFA, 1264px 1341px #A78BFA, 1384px 1515px #A78BFA, 110px 935px #A78BFA, 1783px 1597px #A78BFA, 1791px 1393px #A78BFA, 1634px 1145px #A78BFA, 803px 815px #A78BFA, 817px 807px #A78BFA, 212px 986px #A78BFA, 1299px 820px #A78BFA, 127px 390px #A78BFA, 137px 427px #A78BFA, 902px 332px #A78BFA, 225px 696px #A78BFA, 1230px 107px #A78BFA, 209px 0px #A78BFA, 1160px 309px #A78BFA, 1098px 207px #A78BFA, 744px 1256px #A78BFA, 52px 144px #A78BFA, 1790px 425px #A78BFA, 1257px 770px #A78BFA, 304px 1299px #A78BFA, 516px 711px #A78BFA, 1233px 745px #A78BFA, 971px 251px #A78BFA, 236px 1738px #A78BFA, 999px 954px #A78BFA, 983px 990px #A78BFA, 638px 175px #A78BFA, 295px 209px #A78BFA, 1535px 701px #A78BFA, 1516px 542px #A78BFA, 980px 1697px #A78BFA, 1417px 330px #A78BFA, 1057px 47px #A78BFA, 420px 1081px #A78BFA; animation:starDrift 90s linear infinite; }
#stars-l1::after { content:''; position:absolute; top:1800px; left:0; width:1px; height:1px; background:transparent; box-shadow:663px 308px #A78BFA, 808px 1333px #A78BFA, 98px 148px #A78BFA, 1681px 1097px #A78BFA, 192px 748px #A78BFA, 1193px 118px #A78BFA, 1039px 439px #A78BFA, 76px 176px #A78BFA, 888px 856px #A78BFA, 143px 492px #A78BFA, 185px 1128px #A78BFA, 869px 121px #A78BFA, 1693px 1158px #A78BFA, 253px 457px #A78BFA, 1291px 1284px #A78BFA, 1193px 126px #A78BFA, 1181px 1199px #A78BFA, 812px 101px #A78BFA, 452px 95px #A78BFA, 1140px 1758px #A78BFA, 272px 593px #A78BFA, 858px 295px #A78BFA, 1107px 241px #A78BFA, 1169px 631px #A78BFA, 1147px 1671px #A78BFA, 1396px 370px #A78BFA, 211px 1191px #A78BFA, 1169px 1308px #A78BFA, 384px 762px #A78BFA, 199px 1121px #A78BFA, 1458px 128px #A78BFA, 1155px 122px #A78BFA, 1267px 421px #A78BFA, 1016px 1393px #A78BFA, 1088px 875px #A78BFA, 1591px 643px #A78BFA, 953px 1199px #A78BFA, 928px 740px #A78BFA, 613px 508px #A78BFA, 1626px 368px #A78BFA, 1431px 1597px #A78BFA, 499px 167px #A78BFA, 1176px 614px #A78BFA, 1075px 1013px #A78BFA, 1792px 703px #A78BFA, 1493px 919px #A78BFA, 589px 1247px #A78BFA, 149px 241px #A78BFA, 1048px 856px #A78BFA, 337px 1550px #A78BFA, 700px 311px #A78BFA, 1001px 863px #A78BFA, 80px 1368px #A78BFA, 158px 1565px #A78BFA, 1142px 1173px #A78BFA, 1616px 1792px #A78BFA, 1675px 642px #A78BFA, 696px 1423px #A78BFA, 717px 1217px #A78BFA, 1017px 1187px #A78BFA, 1632px 934px #A78BFA, 140px 1720px #A78BFA, 191px 552px #A78BFA, 970px 1427px #A78BFA, 1360px 133px #A78BFA, 124px 1497px #A78BFA, 1436px 634px #A78BFA, 1325px 1183px #A78BFA, 1395px 1683px #A78BFA, 912px 582px #A78BFA, 1467px 790px #A78BFA, 1369px 710px #A78BFA, 46px 945px #A78BFA, 727px 344px #A78BFA, 1251px 239px #A78BFA, 1011px 120px #A78BFA, 446px 1573px #A78BFA, 588px 264px #A78BFA, 1512px 507px #A78BFA, 814px 800px #A78BFA, 1784px 1016px #A78BFA, 165px 340px #A78BFA, 919px 822px #A78BFA, 1125px 569px #A78BFA, 280px 1677px #A78BFA, 881px 1769px #A78BFA, 1126px 570px #A78BFA, 1446px 850px #A78BFA, 734px 1398px #A78BFA, 779px 472px #A78BFA, 309px 169px #A78BFA, 360px 309px #A78BFA, 475px 1348px #A78BFA, 477px 24px #A78BFA, 993px 1702px #A78BFA, 1206px 373px #A78BFA, 538px 577px #A78BFA, 8px 298px #A78BFA, 858px 1094px #A78BFA, 756px 1248px #A78BFA, 1159px 652px #A78BFA, 257px 1414px #A78BFA, 1759px 1055px #A78BFA, 1264px 1341px #A78BFA, 1384px 1515px #A78BFA, 110px 935px #A78BFA, 1783px 1597px #A78BFA, 1791px 1393px #A78BFA, 1634px 1145px #A78BFA, 803px 815px #A78BFA, 817px 807px #A78BFA, 212px 986px #A78BFA, 1299px 820px #A78BFA, 127px 390px #A78BFA, 137px 427px #A78BFA, 902px 332px #A78BFA, 225px 696px #A78BFA, 1230px 107px #A78BFA, 209px 0px #A78BFA, 1160px 309px #A78BFA, 1098px 207px #A78BFA, 744px 1256px #A78BFA, 52px 144px #A78BFA, 1790px 425px #A78BFA, 1257px 770px #A78BFA, 304px 1299px #A78BFA, 516px 711px #A78BFA, 1233px 745px #A78BFA, 971px 251px #A78BFA, 236px 1738px #A78BFA, 999px 954px #A78BFA, 983px 990px #A78BFA, 638px 175px #A78BFA, 295px 209px #A78BFA, 1535px 701px #A78BFA, 1516px 542px #A78BFA, 980px 1697px #A78BFA, 1417px 330px #A78BFA, 1057px 47px #A78BFA, 420px 1081px #A78BFA; }
#stars-l2 { width:2px; height:2px; background:transparent; box-shadow:740px 300px #38BDF8, 1413px 1112px #38BDF8, 55px 1552px #38BDF8, 1081px 610px #38BDF8, 1316px 1768px #38BDF8, 186px 1425px #38BDF8, 1731px 534px #38BDF8, 1061px 751px #38BDF8, 342px 728px #38BDF8, 1580px 456px #38BDF8, 1090px 1109px #38BDF8, 1595px 1029px #38BDF8, 675px 1303px #38BDF8, 456px 1255px #38BDF8, 1661px 1614px #38BDF8, 1553px 1746px #38BDF8, 399px 1650px #38BDF8, 490px 1675px #38BDF8, 820px 1515px #38BDF8, 1645px 464px #38BDF8, 409px 1060px #38BDF8, 1009px 728px #38BDF8, 1497px 59px #38BDF8, 57px 1618px #38BDF8, 572px 967px #38BDF8, 530px 396px #38BDF8, 1418px 1239px #38BDF8, 705px 915px #38BDF8, 1655px 1480px #38BDF8, 715px 746px #38BDF8, 164px 451px #38BDF8, 209px 464px #38BDF8, 962px 402px #38BDF8, 691px 418px #38BDF8, 988px 1278px #38BDF8, 1249px 1721px #38BDF8, 3px 981px #38BDF8, 1337px 704px #38BDF8, 1637px 1317px #38BDF8, 173px 1709px #38BDF8, 1352px 245px #38BDF8, 795px 1602px #38BDF8, 1457px 1536px #38BDF8, 408px 979px #38BDF8, 365px 888px #38BDF8, 1616px 1302px #38BDF8, 680px 177px #38BDF8, 1640px 1478px #38BDF8, 810px 948px #38BDF8, 822px 1522px #38BDF8, 173px 1484px #38BDF8, 325px 348px #38BDF8, 260px 56px #38BDF8, 309px 1209px #38BDF8, 953px 1651px #38BDF8, 1343px 299px #38BDF8, 1252px 1692px #38BDF8, 1220px 971px #38BDF8, 1346px 717px #38BDF8, 319px 1123px #38BDF8, 1122px 268px #38BDF8, 43px 29px #38BDF8, 1637px 1487px #38BDF8, 1330px 210px #38BDF8, 1078px 1534px #38BDF8, 285px 888px #38BDF8, 1785px 398px #38BDF8, 1691px 1789px #38BDF8, 432px 57px #38BDF8, 515px 435px #38BDF8; animation:starDrift 140s linear infinite; opacity:.8; }
#stars-l2::after { content:''; position:absolute; top:1800px; left:0; width:2px; height:2px; background:transparent; box-shadow:740px 300px #38BDF8, 1413px 1112px #38BDF8, 55px 1552px #38BDF8, 1081px 610px #38BDF8, 1316px 1768px #38BDF8, 186px 1425px #38BDF8, 1731px 534px #38BDF8, 1061px 751px #38BDF8, 342px 728px #38BDF8, 1580px 456px #38BDF8, 1090px 1109px #38BDF8, 1595px 1029px #38BDF8, 675px 1303px #38BDF8, 456px 1255px #38BDF8, 1661px 1614px #38BDF8, 1553px 1746px #38BDF8, 399px 1650px #38BDF8, 490px 1675px #38BDF8, 820px 1515px #38BDF8, 1645px 464px #38BDF8, 409px 1060px #38BDF8, 1009px 728px #38BDF8, 1497px 59px #38BDF8, 57px 1618px #38BDF8, 572px 967px #38BDF8, 530px 396px #38BDF8, 1418px 1239px #38BDF8, 705px 915px #38BDF8, 1655px 1480px #38BDF8, 715px 746px #38BDF8, 164px 451px #38BDF8, 209px 464px #38BDF8, 962px 402px #38BDF8, 691px 418px #38BDF8, 988px 1278px #38BDF8, 1249px 1721px #38BDF8, 3px 981px #38BDF8, 1337px 704px #38BDF8, 1637px 1317px #38BDF8, 173px 1709px #38BDF8, 1352px 245px #38BDF8, 795px 1602px #38BDF8, 1457px 1536px #38BDF8, 408px 979px #38BDF8, 365px 888px #38BDF8, 1616px 1302px #38BDF8, 680px 177px #38BDF8, 1640px 1478px #38BDF8, 810px 948px #38BDF8, 822px 1522px #38BDF8, 173px 1484px #38BDF8, 325px 348px #38BDF8, 260px 56px #38BDF8, 309px 1209px #38BDF8, 953px 1651px #38BDF8, 1343px 299px #38BDF8, 1252px 1692px #38BDF8, 1220px 971px #38BDF8, 1346px 717px #38BDF8, 319px 1123px #38BDF8, 1122px 268px #38BDF8, 43px 29px #38BDF8, 1637px 1487px #38BDF8, 1330px 210px #38BDF8, 1078px 1534px #38BDF8, 285px 888px #38BDF8, 1785px 398px #38BDF8, 1691px 1789px #38BDF8, 432px 57px #38BDF8, 515px 435px #38BDF8; }
#stars-l3 { width:3px; height:3px; background:transparent; box-shadow:599px 1026px #FCD34D, 492px 1564px #FCD34D, 1201px 667px #FCD34D, 531px 1114px #FCD34D, 858px 1708px #FCD34D, 268px 124px #FCD34D, 1515px 724px #FCD34D, 938px 1356px #FCD34D, 1194px 1669px #FCD34D, 1058px 861px #FCD34D, 1693px 1798px #FCD34D, 1027px 267px #FCD34D, 1089px 310px #FCD34D, 1072px 1045px #FCD34D, 38px 1787px #FCD34D, 901px 1590px #FCD34D, 375px 1246px #FCD34D, 8px 1589px #FCD34D, 1636px 306px #FCD34D, 352px 289px #FCD34D, 969px 1267px #FCD34D, 1485px 246px #FCD34D, 1139px 126px #FCD34D, 667px 1397px #FCD34D, 1061px 1086px #FCD34D, 1137px 988px #FCD34D, 1606px 1590px #FCD34D, 217px 1147px #FCD34D, 116px 508px #FCD34D, 391px 567px #FCD34D; animation:starDrift 200s linear infinite; opacity:.6; }
#stars-l3::after { content:''; position:absolute; top:1800px; left:0; width:3px; height:3px; background:transparent; box-shadow:599px 1026px #FCD34D, 492px 1564px #FCD34D, 1201px 667px #FCD34D, 531px 1114px #FCD34D, 858px 1708px #FCD34D, 268px 124px #FCD34D, 1515px 724px #FCD34D, 938px 1356px #FCD34D, 1194px 1669px #FCD34D, 1058px 861px #FCD34D, 1693px 1798px #FCD34D, 1027px 267px #FCD34D, 1089px 310px #FCD34D, 1072px 1045px #FCD34D, 38px 1787px #FCD34D, 901px 1590px #FCD34D, 375px 1246px #FCD34D, 8px 1589px #FCD34D, 1636px 306px #FCD34D, 352px 289px #FCD34D, 969px 1267px #FCD34D, 1485px 246px #FCD34D, 1139px 126px #FCD34D, 667px 1397px #FCD34D, 1061px 1086px #FCD34D, 1137px 988px #FCD34D, 1606px 1590px #FCD34D, 217px 1147px #FCD34D, 116px 508px #FCD34D, 391px 567px #FCD34D; }
@keyframes starDrift { from{transform:translateY(0);} to{transform:translateY(-1800px);} }

a { text-decoration:none; color:inherit; }
section { position:relative; z-index:1; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.tag { display:inline-flex; align-items:center; gap:8px; background:var(--p-soft); border:1px solid rgba(124,58,237,0.3); color:var(--purple2); padding:6px 16px; border-radius:50px; font-size:.8rem; font-weight:600; }
.tag svg { width:14px; height:14px; }
.gradient-text { background:linear-gradient(135deg,#A78BFA 0%,#7C3AED 40%,#0EA5E9 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.gold-text { background:linear-gradient(135deg,#FCD34D 0%,#F59E0B 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 32px; border-radius:var(--r); font-family:var(--ff); font-size:.95rem; font-weight:700; cursor:pointer; border:none; transition:var(--tr); white-space:nowrap; position:relative; overflow:hidden; }
.btn::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,0.1); opacity:0; transition:opacity .2s; }
.btn:hover::before { opacity:1; }
.btn-primary { background:linear-gradient(135deg,#7C3AED,#6D28D9); color:#fff; box-shadow:0 4px 20px var(--p-glow),0 0 0 1px rgba(124,58,237,0.3); }
.btn-primary:hover { box-shadow:0 6px 28px var(--p-glow); transform:translateY(-2px); }
.btn-gold { background:linear-gradient(135deg,#F59E0B,#D97706); color:#000; box-shadow:0 4px 20px var(--g-glow),0 0 0 1px rgba(245,158,11,0.3); }
.btn-gold:hover { box-shadow:0 6px 28px var(--g-glow); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--t2); border:1px solid var(--b2); }
.btn-ghost:hover { border-color:var(--purple2); color:var(--purple2); transform:translateY(-1px); }
.btn-lg { padding:18px 44px; font-size:1.05rem; border-radius:var(--r2); }

/* NAV */
nav { position:fixed; top:0; right:0; left:0; z-index:100; height:70px; background:rgba(6,10,20,0.7); backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5); border-bottom:1px solid var(--b); transition:var(--tr); }
nav.scrolled { background:rgba(6,10,20,0.92); box-shadow:0 4px 30px rgba(0,0,0,0.4); }
.nav-inner { display:flex; align-items:center; height:100%; gap:32px; }
.nav-logo { display:flex; align-items:center; gap:10px; font-size:1.35rem; font-weight:900; flex-shrink:0; }
.nav-logo .logo-icon { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,#7C3AED,#0EA5E9); display:flex; align-items:center; justify-content:center; font-size:1rem; box-shadow:0 4px 12px var(--p-glow); }
.logo-text { font-family:'Lalezar',cursive; font-size:1.6rem; letter-spacing:.02em; background:linear-gradient(135deg,#A78BFA,#7C3AED,#0EA5E9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.nav-links { display:flex; gap:28px; list-style:none; margin-right:auto; }
.nav-links a { font-size:.9rem; font-weight:500; color:var(--t2); transition:var(--tr); position:relative; padding:4px 0; }
.nav-links a::after { content:''; position:absolute; bottom:-2px; right:0; left:0; height:2px; background:var(--purple2); border-radius:2px; transform:scaleX(0); transition:transform .25s; }
.nav-links a:hover { color:var(--t1); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-ctas { display:flex; gap:12px; flex-shrink:0; }
.nav-ctas .btn { padding:10px 22px; font-size:.88rem; }

/* HERO */
#hero { min-height:100vh; display:flex; align-items:center; padding-top:70px; overflow:hidden; }
.hero-inner { display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:center; width:100%; padding:80px 0 60px; }
.hero-text { order:1; }
.hero-text .tag { margin-bottom:28px; }
.hero-h1 { font-size:clamp(2.2rem,4vw,3.6rem); font-weight:900; line-height:1.22; letter-spacing:-.02em; margin-bottom:24px; }
.hero-sub { font-size:1.1rem; color:var(--t2); max-width:500px; margin-bottom:40px; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:56px; }
.hero-trust { display:flex; align-items:center; gap:20px; padding-top:28px; border-top:1px solid var(--b); }
.trust-avatars { display:flex; }
.trust-avatars span { width:34px; height:34px; border-radius:50%; border:2px solid var(--bg2); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; margin-left:-10px; }
.ta1 { background:linear-gradient(135deg,#7C3AED,#A855F7); }
.ta2 { background:linear-gradient(135deg,#10B981,#059669); }
.ta3 { background:linear-gradient(135deg,#F59E0B,#D97706); }
.ta4 { background:linear-gradient(135deg,#0EA5E9,#0284C7); }
.trust-text { font-size:.88rem; color:var(--t2); }
.trust-text strong { color:var(--t1); }

/* PREVIEW CARDS: three small 16:9 floating cards; each scales up (not "opens") on hover */
.hero-visual { order:2; position:relative; overflow:visible; }
.preview-stage {
    display:flex; justify-content:center; align-items:center; gap:16px;
    perspective:1800px; overflow:visible; padding:10px 0;
    position:relative; min-height:380px;
}
.glow-a { position:absolute; border-radius:50%; background:var(--p-glow); filter:blur(70px); width:300px; height:300px; bottom:60px; right:30px; animation:glow-pulse 6s ease-in-out infinite; pointer-events:none; }
.glow-b { position:absolute; border-radius:50%; background:var(--gr-glow); filter:blur(80px); width:250px; height:250px; top:40px; left:20px; animation:glow-pulse 8s ease-in-out infinite reverse; pointer-events:none; }
@keyframes glow-pulse { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.15)} }

.preview-card {
    border-radius:14px; overflow:hidden; position:relative;
    border:1px solid var(--b2); background:#0d1424;
    width:220px; height:320px;
    transform-origin:center center;
    transition:transform .4s cubic-bezier(.34,1.42,.64,1), box-shadow .4s, z-index 0s;
    flex-shrink:0;
}
.preview-card::before {
    content:''; position:absolute; inset:-1.5px; border-radius:15.5px;
    background:conic-gradient(from var(--ang,0deg) at 50% 50%,#7C3AED,#0EA5E9,#10B981,#F59E0B,#7C3AED);
    z-index:-1; animation:border-spin 5s linear infinite; opacity:.5;
}
.preview-card::after { content:''; position:absolute; inset:0.5px; background:#0d1424; border-radius:14px; z-index:-1; }
@property --ang { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes border-spin { to{--ang:360deg} }

.pc-1 { z-index:3; box-shadow:0 14px 30px rgba(0,0,0,.5); }
.pc-2 { z-index:2; box-shadow:0 14px 30px rgba(0,0,0,.5); }
.pc-3 { z-index:1; box-shadow:0 14px 30px rgba(0,0,0,.5); }

/* HOVER: JS handles transform via setProperty — CSS only manages non-conflicting props */
.preview-card:hover, .preview-card.active {
    z-index:50;
    box-shadow:0 45px 90px rgba(0,0,0,.7), 0 0 45px var(--p-glow);
}
.preview-stage:has(.preview-card:hover) .preview-card:not(:hover) { opacity:.3; }

/* Mobile: smaller zoom — JS handles transform */
@media(max-width:768px) {
    .preview-card:hover, .preview-card.active {
        box-shadow:0 20px 40px rgba(0,0,0,.6), 0 0 20px var(--p-glow);
    }
    .preview-stage:has(.preview-card:hover) .preview-card:not(:hover) { opacity:.5; }
}

/* Card inner content: real dashboard look — dark rounded stat tiles with a small ring, teal accent bars, heatmap calendar */
.pc-header { padding:7px 10px; border-bottom:1px solid var(--b); display:flex; align-items:center; gap:6px; }
.pc-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.pc-title { font-size:8px; font-weight:700; color:var(--t1); white-space:nowrap; }
.pc-body { padding:8px 10px; height:calc(100% - 26px); overflow-y:auto; overflow-x:hidden; }

/* DASHBOARD CARD (pc-1): mirrors the real dashboard's stat tiles + bar chart + heatmap */
.pc-1 .pc-body { display:flex; flex-direction:column; gap:4px; }

/* Mini stat card — matches real .stat-card structure */
.dd-mini-stat {
    background:rgba(255,255,255,0.035);
    border:1px solid var(--b);
    border-radius:6px;
    padding:5px 7px;
    display:flex;
    align-items:center;
    gap:6px;
}
.dd-mini-ring {
    position:relative;
    width:28px;
    height:28px;
    flex-shrink:0;
}
.dd-mini-ring .donut-container,
.dd-mini-ring .progress-ring {
    width:28px !important;
    height:28px !important;
}
.dd-mini-ring .donut-container svg,
.dd-mini-ring .progress-ring svg {
    width:100% !important;
    height:100% !important;
}
.dd-mini-ring .donut-text { font-size:6px !important; font-weight:800; }
.dd-mini-ring .ring-text { font-size:5.5px !important; font-weight:800; }

.dd-mini-text { flex:1; min-width:0; }
.dd-mini-val { font-size:11px; font-weight:800; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dd-mini-lbl { font-size:6.5px; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Chart row — matches real .chart-row */
.pc-1-chart-col { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:2px; }
.pc-1-chart-box {
    background:rgba(255,255,255,0.035);
    border:1px solid var(--b);
    border-radius:6px;
    padding:4px 5px;
    overflow:hidden;
}
.pc-1-chart-title { font-size:5.5px; font-weight:700; color:var(--t2); margin-bottom:2px; }

/* Bar chart (JS createBarChart) */
#pcBarChart .bar-chart { display:flex; align-items:flex-end; justify-content:center; gap:2px; height:48px; }
#pcBarChart .bar-col { display:flex; flex-direction:column; align-items:center; flex:1; }
#pcBarChart .bar-track { width:100%; height:38px; background:rgba(255,255,255,0.04); border-radius:2px; position:relative; overflow:hidden; }
#pcBarChart .bar-fill { position:absolute; bottom:0; width:100%; background:var(--primary); border-radius:2px 2px 0 0; transition:height .8s cubic-bezier(.4,0,.2,1); box-shadow:0 0 4px rgba(0,255,255,.3); }
#pcBarChart .bar-value { font-size:4px; font-weight:600; color:var(--t2); margin-bottom:1px; }
#pcBarChart .bar-label { font-size:3.5px; color:var(--t3); margin-top:1px; }

/* Heatmap calendar */
#pcHeatmap .heat-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
#pcHeatmap .heat-sq { aspect-ratio:1; border-radius:1px; background:rgba(255,255,255,0.05); }
#pcHeatmap .heat-sq.on { background:var(--primary); opacity:0; transform:scale(0); transition:transform .35s ease backwards, opacity .35s ease backwards; box-shadow:0 0 3px rgba(0,255,255,.5); }
#pcHeatmap .heat-grid.show .heat-sq.on { opacity:1; transform:scale(1); }
#pcHeatmap .heat-grid.show .heat-sq.on:nth-child(1) { transition-delay:.05s; }
#pcHeatmap .heat-grid.show .heat-sq.on:nth-child(2) { transition-delay:.1s; }
#pcHeatmap .heat-grid.show .heat-sq.on:nth-child(3) { transition-delay:.15s; }

/* PERSONNEL CARD (pc-2) */
.emp-row { display:flex; align-items:center; gap:6px; padding:3.5px 0; border-bottom:1px solid var(--b); }
.emp-row:last-child { border:none; }
.emp-avatar { width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:7px; font-weight:700; flex-shrink:0; }
.emp-info { flex:1; min-width:0; }
.emp-name { font-size:7px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.emp-dept { font-size:5.5px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.emp-badge { font-size:5.5px; padding:1px 5px; border-radius:20px; font-weight:600; white-space:nowrap; flex-shrink:0; }

/* REPORTS CARD (pc-3) */
.rep-row { display:flex; align-items:center; gap:5px; padding:3px 0; border-bottom:1px solid var(--b); }
.rep-row:last-child { border:none; }
.rep-icon { width:16px; height:16px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:7px; flex-shrink:0; }
.rep-info { flex:1; min-width:0; }
.rep-title { font-size:6.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rep-sub { font-size:5px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rep-val { font-size:7px; font-weight:800; flex-shrink:0; }

/* AI TASK CARD (pc-2) */
.ai-task-row { display:flex; align-items:center; gap:4px; padding:3.5px 0; border-bottom:1px solid var(--b); }
.ai-task-row:last-child { border:none; }
.ai-task-priority { font-size:5px; padding:1px 5px; border-radius:8px; font-weight:700; flex-shrink:0; }
.ai-task-info { flex:1; min-width:0; }
.ai-task-title { font-size:6.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--t1); }
.ai-task-meta { font-size:5px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ai-task-status { font-size:5px; padding:1px 5px; border-radius:8px; font-weight:600; flex-shrink:0; }
.ai-task-progress { margin-top:3px; }
.ai-task-progress-label { display:flex; justify-content:space-between; font-size:5px; color:var(--t3); margin-bottom:1px; }
.ai-task-progress-bar { height:3px; background:rgba(255,255,255,.06); border-radius:2px; overflow:hidden; }
.ai-task-progress-fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--success)); border-radius:2px; transition:width .8s ease; }

/* AI CHAT DEMO CARD (pc-3) */
.chat-demo-msg { display:flex; }
.chat-demo-right { justify-content:flex-end; }
.chat-demo-left { justify-content:flex-start; }
.chat-demo-bubble { display:flex; align-items:center; gap:4px; max-width:90%; }
.chat-demo-text { font-size:5.5px; color:var(--t1); line-height:1.4; }
.chat-demo-mic { display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-demo-mic i { font-size:10px !important; color:var(--primary) !important; transition:color .3s; }

/* Mic blink animation */
@keyframes micBlink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(1.15)} }
.chat-demo-mic.recording i { color:var(--danger) !important; animation: micBlink .6s ease-in-out infinite; }

/* Typewriter cursor */
@keyframes blinkCursor { 0%,100%{opacity:1} 50%{opacity:0} }
.typewriter-cursor { display:inline-block; width:1px; height:6px; background:var(--primary); animation:blinkCursor .6s step-end infinite; vertical-align:middle; margin-right:1px; }

/* Task card slide-in */
.chat-demo-task { background:rgba(255,255,255,.035); border:1px solid var(--b); border-radius:6px; padding:4px 6px; transition:opacity .4s ease, transform .4s ease; }
.chat-demo-task-header { display:flex; align-items:center; gap:3px; }
.chat-demo-task-bar { height:2px; background:rgba(255,255,255,.06); border-radius:2px; margin-top:3px; overflow:hidden; }
.chat-demo-task-fill { height:100%; width:0; background:var(--primary); border-radius:2px; transition:width .6s ease; }

/* STATS */
#stats { padding:0 0 0; margin-top:20px; }
.stats-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--b); border:1px solid var(--b); border-radius:var(--r2); overflow:hidden; }
.stat-item { background:var(--card); padding:32px 28px; text-align:center; transition:var(--tr); }
.stat-item:hover { background:var(--card-h); }
.stat-num { font-size:2.4rem; font-weight:900; letter-spacing:-.03em; display:block; line-height:1; margin-bottom:8px; }
.stat-label { font-size:.85rem; color:var(--t2); font-weight:500; }

/* SECTIONS */
.section-header { text-align:center; margin-bottom:60px; }
.section-header .tag { margin-bottom:20px; }
.section-header h2 { font-size:clamp(1.8rem,3vw,2.8rem); font-weight:900; line-height:1.25; margin-bottom:16px; }
.section-header p { color:var(--t2); max-width:540px; margin:0 auto; font-size:1rem; }

/* Blinking AI text */
@keyframes aiBlink {
    0%,100% { opacity:1; text-shadow:0 0 12px rgba(0,255,255,.6), 0 0 30px rgba(0,255,255,.3); }
    50% { opacity:.4; text-shadow:0 0 4px rgba(0,255,255,.2); }
}
.ai-blink-text {
    color:var(--primary); font-size:1.05rem; font-weight:700;
    margin:10px auto 6px; max-width:540px; text-align:center;
    animation: aiBlink 2s ease-in-out infinite;
}
.ai-blink-text strong { color:#fff; font-weight:900; }

/* FEATURES */
#features { padding:110px 0; }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feat-card { background:var(--card); border:1px solid var(--b); border-radius:var(--r2); padding:32px 28px; transition:var(--tr); position:relative; overflow:hidden; }
.feat-card::before { content:''; position:absolute; top:0; right:0; left:0; height:2px; background:linear-gradient(90deg,transparent,var(--card-accent,var(--purple)),transparent); transform:scaleX(0); transition:transform .4s; }
.feat-card:hover { background:var(--card-h); border-color:var(--b2); transform:translateY(-4px); }
.feat-card:hover::before { transform:scaleX(1); }
.feat-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:20px; }
.fi-purple { background:var(--p-soft); --card-accent:var(--purple); }
.fi-green { background:rgba(16,185,129,.1); --card-accent:var(--green); }
.fi-gold { background:rgba(245,158,11,.1); --card-accent:var(--gold); }
.fi-sky { background:rgba(14,165,233,.1); --card-accent:var(--sky); }
.fi-red { background:rgba(239,68,68,.1); --card-accent:var(--red); }
.feat-card h3 { font-size:1.05rem; font-weight:700; margin-bottom:10px; }
.feat-card p { font-size:.88rem; color:var(--t2); line-height:1.8; }

/* HOW IT WORKS */
#how { padding:80px 0 110px; background:linear-gradient(180deg,transparent 0%,rgba(124,58,237,0.04) 50%,transparent 100%); }
.steps-row { display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative; }
.steps-row::before { content:''; position:absolute; top:44px; right:16.6%; left:16.6%; height:1px; background:linear-gradient(90deg,transparent,var(--purple),transparent); }
.step { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 32px; position:relative; }
.step-num { width:88px; height:88px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:900; margin-bottom:24px; position:relative; z-index:1; border:2px solid var(--b2); background:var(--bg2); }
.step-num::after { content:''; position:absolute; inset:-6px; border-radius:50%; background:var(--p-soft); z-index:-1; }
.step:nth-child(1) .step-num { border-color:var(--purple); box-shadow:0 0 30px var(--p-glow); }
.step:nth-child(2) .step-num { border-color:var(--gold); box-shadow:0 0 30px var(--g-glow); }
.step:nth-child(3) .step-num { border-color:var(--green); box-shadow:0 0 30px var(--gr-glow); }
.step h3 { font-size:1.1rem; font-weight:700; margin-bottom:12px; }
.step p { font-size:.88rem; color:var(--t2); line-height:1.85; }

/* DEMO FORM */
#demo { padding:110px 0; }
.demo-wrapper { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.demo-info h2 { font-size:2.2rem; font-weight:900; margin-bottom:20px; line-height:1.3; }
.demo-info > p { color:var(--t2); margin-bottom:36px; line-height:1.85; }
.demo-perks { list-style:none; display:flex; flex-direction:column; gap:16px; }
.demo-perks li { display:flex; align-items:flex-start; gap:14px; font-size:.92rem; color:var(--t2); }
.perk-dot { width:22px; height:22px; border-radius:50%; background:var(--p-soft); border:1px solid rgba(124,58,237,0.3); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; font-size:.65rem; }
.demo-form-box { background:var(--card); border:1px solid var(--b2); border-radius:var(--r2); padding:40px 36px; position:relative; overflow:hidden; }
.demo-form-box::before { content:''; position:absolute; top:0; right:0; left:0; height:3px; background:linear-gradient(90deg,var(--purple),var(--sky),var(--green)); }
.demo-form-box h3 { font-size:1.3rem; font-weight:800; margin-bottom:6px; }
.demo-form-box .sub { font-size:.87rem; color:var(--t2); margin-bottom:30px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { margin-bottom:18px; }
.field label { display:block; font-size:.83rem; font-weight:600; color:var(--t2); margin-bottom:8px; }
.field label span { color:var(--red); }
.field input, .field select, .field textarea { width:100%; padding:12px 16px; background:rgba(255,255,255,0.05); border:1px solid var(--b); border-radius:var(--r); color:var(--t1); font-family:var(--ff); font-size:.9rem; transition:var(--tr); outline:none; direction:rtl; }
.field input::placeholder, .field textarea::placeholder { color:var(--t3); }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--purple); background:rgba(124,58,237,0.06); box-shadow:0 0 0 3px var(--p-soft); }
.field select option { background:var(--bg2); }
.field textarea { resize:vertical; min-height:90px; }
.form-note { font-size:.8rem; color:var(--t3); text-align:center; margin-top:16px; }
.success-msg { background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); border-radius:var(--r); padding:20px 24px; color:var(--green); font-size:.95rem; font-weight:500; text-align:center; margin-bottom:20px; }
.error-msg { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); border-radius:var(--r); padding:16px 20px; color:var(--red); font-size:.88rem; margin-bottom:18px; }

/* DIVIDER */
.divider { height:1px; background:linear-gradient(90deg,transparent,var(--b2),transparent); }

/* CONTACT */
#contact { padding:90px 0 80px; }
.contact-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:60px; align-items:start; }
.contact-info h2 { font-size:1.8rem; font-weight:800; margin-bottom:16px; }
.contact-info > p { color:var(--t2); margin-bottom:32px; line-height:1.85; }
.contact-items { display:flex; flex-direction:column; gap:16px; }
.contact-item { display:flex; align-items:center; gap:16px; background:var(--card); border:1px solid var(--b); border-radius:var(--r); padding:16px 20px; transition:var(--tr); }
.contact-item:hover { border-color:var(--b2); background:var(--card-h); }
.ci-icon { width:42px; height:42px; border-radius:10px; background:var(--p-soft); border:1px solid rgba(124,58,237,.3); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.ci-text { font-size:.88rem; }
.ci-text small { display:block; color:var(--t3); font-size:.78rem; margin-bottom:2px; }
.ci-text strong { font-weight:600; color:var(--t1); }
.contact-form-box { background:var(--card); border:1px solid var(--b); border-radius:var(--r2); padding:36px 32px; }
.contact-form-box h3 { font-size:1.15rem; font-weight:700; margin-bottom:24px; }

/* LOGIN CTA */
#login-cta { padding:80px 0; background:linear-gradient(135deg,rgba(124,58,237,.08) 0%,rgba(14,165,233,.05) 100%); border-top:1px solid var(--b); border-bottom:1px solid var(--b); }
.login-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.login-inner h2 { font-size:1.8rem; font-weight:800; }
.login-inner p { color:var(--t2); margin-top:8px; font-size:.95rem; }
.login-btns { display:flex; gap:14px; flex-shrink:0; }

/* FOOTER */
footer { background:var(--bg2); border-top:1px solid var(--b); padding:50px 0 30px; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px; }
.footer-brand .nav-logo { margin-bottom:16px; }
.footer-brand p { font-size:.85rem; color:var(--t3); line-height:1.85; max-width:260px; }
.footer-col h4 { font-size:.9rem; font-weight:700; margin-bottom:18px; color:var(--t1); }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col ul a { font-size:.85rem; color:var(--t3); transition:var(--tr); }
.footer-col ul a:hover { color:var(--purple2); }
.footer-bottom { border-top:1px solid var(--b); padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom p { font-size:.8rem; color:var(--t3); }
.footer-badge { background:var(--p-soft); border:1px solid rgba(124,58,237,.3); border-radius:50px; padding:4px 14px; font-size:.78rem; color:var(--purple2); font-weight:600; }

/* SCROLL ANIMATIONS */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1); }
.reveal.in { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.1s; }
.reveal-d2 { transition-delay:.2s; }
.reveal-d3 { transition-delay:.3s; }

/* PARTNER LOGOS */
.partner-item-static { flex-shrink:0; width:160px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(255,255,255,0.03); border:1px solid var(--b); border-radius:12px; padding:20px 16px; transition:var(--tr); }
.partner-item-static:hover { background:var(--card-h); border-color:var(--b2); transform:translateY(-4px); }
.partner-item-static img { max-width:100%; max-height:48px; object-fit:contain; filter:brightness(0) invert(1); opacity:.6; transition:opacity .3s; }
.partner-item-static:hover img { opacity:1; }
@media(max-width:768px) { .partner-item-static { width:130px; padding:14px 12px; } }

/* RESPONSIVE */
@media(max-width:1024px) {
    .hero-inner{grid-template-columns:1fr} .hero-visual{order:2;display:none}
    .features-grid{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr}
    .nav-links{display:none}
}
@media(max-width:768px) {
    .stats-bar{grid-template-columns:repeat(2,1fr)} .steps-row{grid-template-columns:1fr;gap:40px}
    .steps-row::before{display:none} .demo-wrapper{grid-template-columns:1fr}
    .contact-grid{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr} .features-grid{grid-template-columns:1fr}
    .login-inner{flex-direction:column;text-align:center} .login-btns{flex-direction:column;width:100%}
    .footer-grid{grid-template-columns:1fr} .footer-bottom{flex-direction:column;text-align:center}
    .container{padding:0 16px}
    .hero-btns{flex-direction:column;width:100%}
    .hero-btns .btn{width:100%}
    .section-header{margin-bottom:40px}
    #features{padding:60px 0} #how{padding:40px 0 60px} #demo{padding:60px 0} #contact{padding:50px 0 40px}
    .nav-ctas .btn{padding:8px 16px;font-size:.8rem}
    .preview-stage{min-height:auto;padding:10px 0;flex-direction:column;}
    .preview-card{width:100%;max-width:260px;height:auto;aspect-ratio:9/14;max-height:300px;transition:transform .3s ease,box-shadow .3s ease,opacity .3s ease;}
    .preview-card .pc-body{font-size:10px}
}

.pricing-section{padding:90px 0;position:relative;z-index:1}.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:30px}.pricing-card{background:var(--card);border:1px solid var(--b);border-radius:var(--r2);padding:22px;transition:var(--tr)}.pricing-card:hover{border-color:rgba(124,58,237,.55);background:var(--card-h);transform:translateY(-4px)}.pricing-name{font-size:1.05rem;font-weight:800;margin-bottom:5px}.pricing-period{font-size:.78rem;color:var(--t3);margin-bottom:20px}.pricing-price{font-size:1.25rem;font-weight:900;color:var(--gold2)}.pricing-price small{font-size:.7rem;color:var(--t2);font-weight:500}.pricing-note{color:var(--t2);font-size:.85rem;margin-top:24px}.pricing-empty{padding:22px;border:1px dashed var(--b2);border-radius:var(--r);color:var(--t2);text-align:center;margin-top:28px}

/* Floating preview cards: three cards side by side */
.hero-visual{min-width:0}
@media(max-width:1024px){.hero-visual{order:2;display:block !important;margin-top:40px;}}
@media(max-width:700px){
    .preview-stage{flex-wrap:wrap;gap:10px;min-height:auto;flex-direction:column;align-items:center;}
    .preview-card{width:100%;max-width:260px;height:auto;aspect-ratio:9/14;max-height:300px;transition:transform .3s ease,box-shadow .3s ease,opacity .3s ease;}
}