@lemonppt/themes 0.1.5 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,16 +1,24 @@
1
+ /* lemonPPT - AI-powered presentation generation */
2
+ /* Copyright (c) 2026 lemonforme */
3
+ /* SPDX-License-Identifier: AGPL-3.0-or-later */
4
+
1
5
  /* packages/themes/src/base/styles.css */
2
6
  /* Base theme for lemonPPT */
3
7
 
4
8
  :root {
5
9
  --lp-bg: #f5f5f7;
6
10
  --lp-surface: #ffffff;
11
+ --lp-surface-elevated: #f9fafb;
7
12
  --lp-text: #1d1d1f;
8
13
  --lp-secondary: #6e6e73;
9
- --lp-accent: #0071e3;
10
- --lp-border: rgba(0, 0, 0, 0.1);
11
- --lp-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
12
- --lp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
13
- --lp-font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
14
+ --lp-accent: #2563eb;
15
+ --lp-border: rgba(0, 0, 0, 0.08);
16
+ --lp-shadow: 0 24px 72px rgba(0, 0, 0, 0.1);
17
+ --lp-font: Inter, "Noto Sans SC", system-ui, sans-serif;
18
+ --lp-font-mono: "JetBrains Mono", ui-monospace, monospace;
19
+ --lp-radius-small: 6px;
20
+ --lp-radius-medium: 12px;
21
+ --lp-radius-large: 16px;
14
22
  }
15
23
 
16
24
  * {
@@ -78,6 +86,28 @@ body {
78
86
  overflow: hidden;
79
87
  }
80
88
 
89
+ .lp-slide::before {
90
+ content: "";
91
+ position: absolute;
92
+ inset: 0;
93
+ pointer-events: none;
94
+ background:
95
+ radial-gradient(circle at 85% 10%, rgba(37, 99, 235, 0.05), transparent 40%),
96
+ radial-gradient(circle at 10% 90%, rgba(37, 99, 235, 0.04), transparent 40%);
97
+ z-index: 0;
98
+ }
99
+
100
+ .lp-slide::after {
101
+ content: "";
102
+ position: absolute;
103
+ top: 0;
104
+ left: 0;
105
+ right: 0;
106
+ height: 4px;
107
+ background: linear-gradient(90deg, var(--lp-accent), rgba(37, 99, 235, 0.4));
108
+ z-index: 1;
109
+ }
110
+
81
111
  .lp-heading {
82
112
  font-weight: 700;
83
113
  line-height: 1.15;
@@ -1209,250 +1239,1052 @@ body {
1209
1239
  line-height: 1.55;
1210
1240
  }
1211
1241
 
1212
- /* Pricing v1 */
1213
- .lp-pricing-v1 {
1214
- justify-content: center;
1242
+ /* Timeline v2 */
1243
+ .lp-timeline-v2 {
1244
+ justify-content: flex-start;
1245
+ padding: 64px 80px;
1215
1246
  }
1216
1247
 
1217
- .lp-pricing-header {
1218
- margin-bottom: 56px;
1248
+ .lp-timeline-v2-header {
1249
+ margin-bottom: 40px;
1219
1250
  }
1220
1251
 
1221
- .lp-pricing-grid {
1222
- display: grid;
1223
- grid-template-columns: repeat(3, 1fr);
1252
+ .lp-timeline-v2-list {
1253
+ display: flex;
1254
+ flex-direction: column;
1224
1255
  gap: 28px;
1225
1256
  width: 100%;
1226
- max-width: 1100px;
1227
- align-items: center;
1257
+ max-width: 1000px;
1258
+ margin: 0 auto;
1228
1259
  }
1229
1260
 
1230
- .lp-pricing-card {
1231
- background: var(--lp-surface);
1232
- border: 1px solid var(--lp-border);
1233
- border-radius: 20px;
1234
- padding: 36px 28px;
1235
- text-align: center;
1261
+ .lp-timeline-v2-item {
1262
+ display: flex;
1263
+ gap: 20px;
1264
+ align-items: flex-start;
1236
1265
  }
1237
1266
 
1238
- .lp-pricing-card-highlight {
1239
- transform: scale(1.05);
1240
- border-color: var(--lp-accent);
1241
- box-shadow: var(--lp-shadow);
1267
+ .lp-timeline-v2-marker {
1268
+ position: relative;
1269
+ display: flex;
1270
+ flex-direction: column;
1271
+ align-items: center;
1272
+ width: 24px;
1273
+ min-height: 100%;
1242
1274
  }
1243
1275
 
1244
- .lp-pricing-name {
1245
- font-size: 22px;
1246
- font-weight: 700;
1247
- color: var(--lp-text);
1248
- margin-bottom: 16px;
1276
+ .lp-timeline-v2-dot {
1277
+ width: 16px;
1278
+ height: 16px;
1279
+ border-radius: 50%;
1280
+ background: var(--lp-accent);
1281
+ flex-shrink: 0;
1249
1282
  }
1250
1283
 
1251
- .lp-pricing-price-row {
1252
- margin-bottom: 24px;
1284
+ .lp-timeline-v2-line {
1285
+ position: absolute;
1286
+ top: 24px;
1287
+ left: 50%;
1288
+ transform: translateX(-50%);
1289
+ width: 2px;
1290
+ height: calc(100% + 12px);
1291
+ background: var(--lp-border);
1253
1292
  }
1254
1293
 
1255
- .lp-pricing-price {
1256
- font-size: 48px;
1257
- font-weight: 800;
1258
- color: var(--lp-text);
1294
+ .lp-timeline-v2-body {
1295
+ flex: 1;
1296
+ padding-top: 0;
1259
1297
  }
1260
1298
 
1261
- .lp-pricing-period {
1262
- font-size: 16px;
1263
- color: var(--lp-secondary);
1264
- margin-left: 4px;
1299
+ .lp-timeline-v2-date {
1300
+ font-size: 14px;
1301
+ font-weight: 700;
1302
+ color: var(--lp-accent);
1303
+ margin-bottom: 4px;
1304
+ font-family: var(--lp-font-mono);
1265
1305
  }
1266
1306
 
1267
- .lp-pricing-features {
1268
- list-style: none;
1269
- padding: 0;
1270
- margin: 0 0 28px;
1307
+ .lp-timeline-v2-title {
1308
+ font-size: 20px;
1309
+ font-weight: 700;
1310
+ color: var(--lp-text);
1311
+ margin-bottom: 6px;
1271
1312
  }
1272
1313
 
1273
- .lp-pricing-features li {
1274
- font-size: 16px;
1314
+ .lp-timeline-v2-description {
1315
+ font-size: 15px;
1275
1316
  color: var(--lp-secondary);
1276
- padding: 10px 0;
1277
- border-bottom: 1px solid var(--lp-border);
1317
+ line-height: 1.5;
1278
1318
  }
1279
1319
 
1280
- .lp-pricing-features li:last-child {
1281
- border-bottom: none;
1320
+ /* Roadmap v2 */
1321
+ .lp-roadmap-v2 {
1322
+ justify-content: flex-start;
1323
+ padding: 64px 80px;
1282
1324
  }
1283
1325
 
1284
- .lp-pricing-cta {
1285
- display: inline-block;
1286
- background: var(--lp-accent);
1287
- color: #fff;
1288
- font-size: 16px;
1289
- font-weight: 600;
1290
- padding: 12px 28px;
1291
- border-radius: 100px;
1326
+ .lp-roadmap-v2-header {
1327
+ margin-bottom: 48px;
1292
1328
  }
1293
1329
 
1294
- /* Additional layouts */
1295
- .lp-split-v1 {
1330
+ .lp-roadmap-v2-track {
1296
1331
  display: flex;
1332
+ gap: 32px;
1297
1333
  width: 100%;
1298
- height: 100%;
1299
- background: var(--lp-surface);
1334
+ max-width: 1040px;
1335
+ margin: 0 auto;
1336
+ align-items: stretch;
1300
1337
  }
1301
1338
 
1302
- .lp-split-v1-content {
1339
+ .lp-roadmap-v2-phase {
1303
1340
  flex: 1;
1304
- display: flex;
1305
- flex-direction: column;
1306
- justify-content: center;
1307
- padding: 80px;
1341
+ background: var(--lp-surface-elevated);
1342
+ border: 1px solid var(--lp-border);
1343
+ border-radius: 16px;
1344
+ padding: 28px;
1345
+ position: relative;
1346
+ min-height: 360px;
1308
1347
  }
1309
1348
 
1310
- .lp-split-v1-title {
1311
- margin-bottom: 32px;
1349
+ .lp-roadmap-v2-phase:not(:last-child) .lp-roadmap-v2-connector {
1350
+ position: absolute;
1351
+ top: 50%;
1352
+ right: -26px;
1353
+ width: 24px;
1354
+ height: 2px;
1355
+ background: var(--lp-border);
1312
1356
  }
1313
1357
 
1314
- .lp-split-v1-points {
1358
+ .lp-roadmap-v2-phase-title {
1359
+ font-size: 20px;
1360
+ font-weight: 700;
1361
+ color: var(--lp-accent);
1362
+ margin-bottom: 16px;
1363
+ }
1364
+
1365
+ .lp-roadmap-v2-goals {
1315
1366
  list-style: none;
1316
1367
  padding: 0;
1317
1368
  margin: 0;
1318
1369
  }
1319
1370
 
1320
- .lp-split-v1-points li {
1321
- font-size: 20px;
1371
+ .lp-roadmap-v2-goal-item {
1372
+ font-size: 16px;
1322
1373
  color: var(--lp-secondary);
1323
- padding: 12px 0;
1324
- border-bottom: 1px solid var(--lp-border);
1374
+ padding: 6px 0 6px 14px;
1375
+ position: relative;
1325
1376
  }
1326
1377
 
1327
- .lp-split-v1-points li:last-child {
1328
- border-bottom: none;
1378
+ .lp-roadmap-v2-goal-item::before {
1379
+ content: '•';
1380
+ position: absolute;
1381
+ left: 0;
1382
+ color: var(--lp-accent);
1329
1383
  }
1330
1384
 
1331
- .lp-split-v1-media {
1332
- flex: 1;
1333
- position: relative;
1334
- background: var(--lp-bg);
1385
+ /* Pricing v2 */
1386
+ .lp-pricing-v2 {
1387
+ justify-content: flex-start;
1388
+ padding: 64px 80px;
1335
1389
  }
1336
1390
 
1337
- .lp-split-v1-media img {
1338
- width: 100%;
1339
- height: 100%;
1340
- object-fit: cover;
1391
+ .lp-pricing-v2-header {
1392
+ margin-bottom: 48px;
1341
1393
  }
1342
1394
 
1343
- .lp-split-v1-placeholder {
1395
+ .lp-pricing-v2-grid {
1396
+ display: grid;
1397
+ grid-template-columns: repeat(3, 1fr);
1398
+ gap: 28px;
1344
1399
  width: 100%;
1345
- height: 100%;
1346
- background: linear-gradient(135deg, #eee, #ddd);
1400
+ max-width: 1040px;
1401
+ margin: 0 auto;
1347
1402
  }
1348
1403
 
1349
- .lp-stats-v1 {
1350
- width: 100%;
1351
- height: 100%;
1352
- padding: 80px;
1353
- background: var(--lp-surface);
1404
+ .lp-pricing-v2-card {
1405
+ background: var(--lp-surface-elevated);
1406
+ border: 1px solid var(--lp-border);
1407
+ border-radius: 16px;
1408
+ padding: 32px;
1354
1409
  display: flex;
1355
1410
  flex-direction: column;
1356
1411
  }
1357
1412
 
1358
- .lp-stats-v1-header {
1359
- margin-bottom: 48px;
1413
+ .lp-pricing-v2-card-highlighted {
1414
+ border-color: var(--lp-accent);
1415
+ background: var(--lp-accent);
1360
1416
  }
1361
1417
 
1362
- .lp-stats-v1-grid {
1363
- display: grid;
1364
- grid-template-columns: repeat(2, 1fr);
1365
- gap: 24px;
1366
- flex: 1;
1418
+ .lp-pricing-v2-card-highlighted .lp-pricing-v2-name,
1419
+ .lp-pricing-v2-card-highlighted .lp-pricing-v2-price,
1420
+ .lp-pricing-v2-card-highlighted .lp-pricing-v2-feature-item,
1421
+ .lp-pricing-v2-card-highlighted .lp-pricing-v2-avatar-placeholder {
1422
+ color: #fff;
1367
1423
  }
1368
1424
 
1369
- .lp-stats-v1-card {
1370
- background: var(--lp-bg);
1371
- border-radius: 16px;
1372
- padding: 32px;
1373
- display: flex;
1374
- flex-direction: column;
1375
- justify-content: center;
1425
+ .lp-pricing-v2-card-highlighted .lp-pricing-v2-period,
1426
+ .lp-pricing-v2-card-highlighted .lp-pricing-v2-feature-item::before {
1427
+ color: rgba(255, 255, 255, 0.8);
1376
1428
  }
1377
1429
 
1378
- .lp-stats-v1-label {
1379
- font-size: 16px;
1380
- color: var(--lp-secondary);
1381
- margin-bottom: 12px;
1430
+ .lp-pricing-v2-name {
1431
+ font-size: 22px;
1432
+ font-weight: 700;
1433
+ margin-bottom: 16px;
1434
+ color: var(--lp-text);
1382
1435
  }
1383
1436
 
1384
- .lp-stats-v1-value-row {
1385
- margin-bottom: 8px;
1437
+ .lp-pricing-v2-price-row {
1438
+ margin-bottom: 20px;
1439
+ display: flex;
1440
+ align-items: baseline;
1441
+ gap: 4px;
1386
1442
  }
1387
1443
 
1388
- .lp-stats-v1-value {
1444
+ .lp-pricing-v2-price {
1389
1445
  font-size: 48px;
1390
1446
  font-weight: 800;
1391
- color: var(--lp-text);
1447
+ color: var(--lp-accent);
1392
1448
  }
1393
1449
 
1394
- .lp-stats-v1-unit {
1395
- font-size: 20px;
1450
+ .lp-pricing-v2-period {
1451
+ font-size: 16px;
1396
1452
  color: var(--lp-secondary);
1397
- margin-left: 4px;
1398
- }
1399
-
1400
- .lp-stats-v1-change {
1401
- font-size: 14px;
1402
- color: var(--lp-accent);
1403
1453
  }
1404
1454
 
1405
- .lp-gallery-v1 {
1406
- width: 100%;
1407
- height: 100%;
1408
- padding: 80px;
1409
- background: var(--lp-surface);
1455
+ .lp-pricing-v2-features {
1456
+ list-style: none;
1457
+ padding: 0;
1458
+ margin: 0;
1410
1459
  display: flex;
1411
1460
  flex-direction: column;
1461
+ gap: 10px;
1412
1462
  }
1413
1463
 
1414
- .lp-gallery-v1-header {
1415
- margin-bottom: 40px;
1464
+ .lp-pricing-v2-feature-item {
1465
+ font-size: 16px;
1466
+ color: var(--lp-secondary);
1467
+ padding-left: 18px;
1468
+ position: relative;
1416
1469
  }
1417
1470
 
1418
- .lp-gallery-v1-grid {
1419
- display: grid;
1420
- grid-template-columns: repeat(2, 1fr);
1421
- gap: 24px;
1422
- flex: 1;
1471
+ .lp-pricing-v2-feature-item::before {
1472
+ content: '✓';
1473
+ position: absolute;
1474
+ left: 0;
1475
+ color: var(--lp-accent);
1476
+ font-weight: 700;
1423
1477
  }
1424
1478
 
1425
- .lp-gallery-v1-item {
1426
- position: relative;
1427
- border-radius: 12px;
1428
- overflow: hidden;
1429
- background: var(--lp-bg);
1479
+ /* Feature v2 */
1480
+ .lp-feature-v2 {
1481
+ justify-content: flex-start;
1482
+ padding: 64px 80px;
1430
1483
  }
1431
1484
 
1432
- .lp-gallery-v1-item img {
1433
- width: 100%;
1434
- height: 100%;
1435
- object-fit: cover;
1485
+ .lp-feature-v2-header {
1486
+ margin-bottom: 48px;
1436
1487
  }
1437
1488
 
1438
- .lp-gallery-v1-placeholder {
1489
+ .lp-feature-v2-grid {
1490
+ display: grid;
1491
+ grid-template-columns: repeat(3, 1fr);
1492
+ gap: 32px;
1439
1493
  width: 100%;
1440
- height: 100%;
1441
- background: linear-gradient(135deg, #eee, #ddd);
1494
+ max-width: 1040px;
1495
+ margin: 0 auto;
1442
1496
  }
1443
1497
 
1444
- .lp-gallery-v1-caption {
1445
- position: absolute;
1446
- bottom: 0;
1447
- left: 0;
1448
- right: 0;
1449
- padding: 12px 16px;
1450
- background: rgba(0, 0, 0, 0.5);
1498
+ .lp-feature-v2-card {
1499
+ background: var(--lp-surface-elevated);
1500
+ border: 1px solid var(--lp-border);
1501
+ border-radius: 16px;
1502
+ padding: 32px;
1503
+ }
1504
+
1505
+ .lp-feature-v2-icon {
1506
+ font-size: 36px;
1507
+ color: var(--lp-accent);
1508
+ margin-bottom: 16px;
1509
+ }
1510
+
1511
+ .lp-feature-v2-title {
1512
+ font-size: 24px;
1513
+ font-weight: 700;
1514
+ margin-bottom: 12px;
1515
+ color: var(--lp-text);
1516
+ }
1517
+
1518
+ .lp-feature-v2-description {
1519
+ font-size: 16px;
1520
+ color: var(--lp-secondary);
1521
+ line-height: 1.55;
1522
+ }
1523
+
1524
+ /* Team v2 */
1525
+ .lp-team-v2 {
1526
+ justify-content: flex-start;
1527
+ padding: 64px 80px;
1528
+ }
1529
+
1530
+ .lp-team-v2-header {
1531
+ margin-bottom: 48px;
1532
+ }
1533
+
1534
+ .lp-team-v2-grid {
1535
+ display: grid;
1536
+ grid-template-columns: repeat(4, 1fr);
1537
+ gap: 24px;
1538
+ width: 100%;
1539
+ max-width: 1040px;
1540
+ margin: 0 auto;
1541
+ }
1542
+
1543
+ .lp-team-v2-card {
1544
+ background: var(--lp-surface-elevated);
1545
+ border: 1px solid var(--lp-border);
1546
+ border-radius: 16px;
1547
+ padding: 28px;
1548
+ text-align: center;
1549
+ }
1550
+
1551
+ .lp-team-v2-avatar {
1552
+ width: 80px;
1553
+ height: 80px;
1554
+ border-radius: 50%;
1555
+ background: var(--lp-border);
1556
+ margin: 0 auto 16px;
1557
+ background-size: cover;
1558
+ background-position: center;
1559
+ display: flex;
1560
+ align-items: center;
1561
+ justify-content: center;
1562
+ }
1563
+
1564
+ .lp-team-v2-avatar-placeholder {
1565
+ font-size: 28px;
1566
+ font-weight: 700;
1567
+ color: var(--lp-text);
1568
+ }
1569
+
1570
+ .lp-team-v2-name {
1571
+ font-size: 20px;
1572
+ font-weight: 700;
1573
+ margin-bottom: 4px;
1574
+ color: var(--lp-text);
1575
+ }
1576
+
1577
+ .lp-team-v2-role {
1578
+ font-size: 14px;
1579
+ color: var(--lp-accent);
1580
+ margin-bottom: 12px;
1581
+ }
1582
+
1583
+ .lp-team-v2-bio {
1584
+ font-size: 14px;
1585
+ color: var(--lp-secondary);
1586
+ line-height: 1.5;
1587
+ }
1588
+
1589
+ /* Metric v3 */
1590
+ .lp-metric-v3 {
1591
+ justify-content: flex-start;
1592
+ padding: 64px 80px;
1593
+ }
1594
+
1595
+ .lp-metric-v3-header {
1596
+ margin-bottom: 48px;
1597
+ }
1598
+
1599
+ .lp-metric-v3-grid {
1600
+ display: grid;
1601
+ grid-template-columns: repeat(2, 1fr);
1602
+ gap: 40px;
1603
+ width: 100%;
1604
+ max-width: 960px;
1605
+ margin: 0 auto;
1606
+ }
1607
+
1608
+ .lp-metric-v3-card {
1609
+ background: var(--lp-surface-elevated);
1610
+ border: 1px solid var(--lp-border);
1611
+ border-radius: 16px;
1612
+ padding: 40px;
1613
+ }
1614
+
1615
+ .lp-metric-v3-label {
1616
+ font-size: 16px;
1617
+ color: var(--lp-secondary);
1618
+ margin-bottom: 12px;
1619
+ }
1620
+
1621
+ .lp-metric-v3-value-row {
1622
+ display: flex;
1623
+ align-items: baseline;
1624
+ gap: 8px;
1625
+ margin-bottom: 12px;
1626
+ }
1627
+
1628
+ .lp-metric-v3-value {
1629
+ font-size: 80px;
1630
+ font-weight: 900;
1631
+ color: var(--lp-text);
1632
+ line-height: 1;
1633
+ }
1634
+
1635
+ .lp-metric-v3-unit {
1636
+ font-size: 24px;
1637
+ color: var(--lp-secondary);
1638
+ }
1639
+
1640
+ .lp-metric-v3-change {
1641
+ font-size: 18px;
1642
+ font-weight: 700;
1643
+ color: var(--lp-accent);
1644
+ }
1645
+
1646
+ /* Pricing v1 */
1647
+ .lp-pricing-v1 {
1648
+ justify-content: center;
1649
+ }
1650
+
1651
+ .lp-pricing-header {
1652
+ margin-bottom: 56px;
1653
+ }
1654
+
1655
+ .lp-pricing-grid {
1656
+ display: grid;
1657
+ grid-template-columns: repeat(3, 1fr);
1658
+ gap: 28px;
1659
+ width: 100%;
1660
+ max-width: 1100px;
1661
+ align-items: center;
1662
+ }
1663
+
1664
+ .lp-pricing-card {
1665
+ background: var(--lp-surface);
1666
+ border: 1px solid var(--lp-border);
1667
+ border-radius: 20px;
1668
+ padding: 36px 28px;
1669
+ text-align: center;
1670
+ }
1671
+
1672
+ .lp-pricing-card-highlight {
1673
+ transform: scale(1.05);
1674
+ border-color: var(--lp-accent);
1675
+ box-shadow: var(--lp-shadow);
1676
+ }
1677
+
1678
+ .lp-pricing-name {
1679
+ font-size: 22px;
1680
+ font-weight: 700;
1681
+ color: var(--lp-text);
1682
+ margin-bottom: 16px;
1683
+ }
1684
+
1685
+ .lp-pricing-price-row {
1686
+ margin-bottom: 24px;
1687
+ }
1688
+
1689
+ .lp-pricing-price {
1690
+ font-size: 48px;
1691
+ font-weight: 800;
1692
+ color: var(--lp-text);
1693
+ }
1694
+
1695
+ .lp-pricing-period {
1696
+ font-size: 16px;
1697
+ color: var(--lp-secondary);
1698
+ margin-left: 4px;
1699
+ }
1700
+
1701
+ .lp-pricing-features {
1702
+ list-style: none;
1703
+ padding: 0;
1704
+ margin: 0 0 28px;
1705
+ }
1706
+
1707
+ .lp-pricing-features li {
1708
+ font-size: 16px;
1709
+ color: var(--lp-secondary);
1710
+ padding: 10px 0;
1711
+ border-bottom: 1px solid var(--lp-border);
1712
+ }
1713
+
1714
+ .lp-pricing-features li:last-child {
1715
+ border-bottom: none;
1716
+ }
1717
+
1718
+ .lp-pricing-cta {
1719
+ display: inline-block;
1720
+ background: var(--lp-accent);
1451
1721
  color: #fff;
1722
+ font-size: 16px;
1723
+ font-weight: 600;
1724
+ padding: 12px 28px;
1725
+ border-radius: 100px;
1726
+ }
1727
+
1728
+ /* Additional layouts */
1729
+ .lp-split-v1 {
1730
+ display: flex;
1731
+ width: 100%;
1732
+ height: 100%;
1733
+ background: var(--lp-surface);
1734
+ }
1735
+
1736
+ .lp-split-v1-content {
1737
+ flex: 1;
1738
+ display: flex;
1739
+ flex-direction: column;
1740
+ justify-content: center;
1741
+ padding: 80px;
1742
+ }
1743
+
1744
+ .lp-split-v1-title {
1745
+ margin-bottom: 32px;
1746
+ }
1747
+
1748
+ .lp-split-v1-points {
1749
+ list-style: none;
1750
+ padding: 0;
1751
+ margin: 0;
1752
+ }
1753
+
1754
+ .lp-split-v1-points li {
1755
+ font-size: 20px;
1756
+ color: var(--lp-secondary);
1757
+ padding: 12px 0;
1758
+ border-bottom: 1px solid var(--lp-border);
1759
+ }
1760
+
1761
+ .lp-split-v1-points li:last-child {
1762
+ border-bottom: none;
1763
+ }
1764
+
1765
+ .lp-split-v1-media {
1766
+ flex: 1;
1767
+ position: relative;
1768
+ background: var(--lp-bg);
1769
+ }
1770
+
1771
+ .lp-split-v1-media img {
1772
+ width: 100%;
1773
+ height: 100%;
1774
+ object-fit: cover;
1775
+ }
1776
+
1777
+ .lp-split-v1-placeholder {
1778
+ width: 100%;
1779
+ height: 100%;
1780
+ background: linear-gradient(135deg, #eee, #ddd);
1781
+ }
1782
+
1783
+ .lp-stats-v1 {
1784
+ width: 100%;
1785
+ height: 100%;
1786
+ padding: 80px;
1787
+ background: var(--lp-surface);
1788
+ display: flex;
1789
+ flex-direction: column;
1790
+ }
1791
+
1792
+ .lp-stats-v1-header {
1793
+ margin-bottom: 48px;
1794
+ }
1795
+
1796
+ .lp-stats-v1-grid {
1797
+ display: grid;
1798
+ grid-template-columns: repeat(2, 1fr);
1799
+ gap: 24px;
1800
+ flex: 1;
1801
+ }
1802
+
1803
+ .lp-stats-v1-card {
1804
+ background: var(--lp-bg);
1805
+ border-radius: 16px;
1806
+ padding: 32px;
1807
+ display: flex;
1808
+ flex-direction: column;
1809
+ justify-content: center;
1810
+ }
1811
+
1812
+ .lp-stats-v1-label {
1813
+ font-size: 16px;
1814
+ color: var(--lp-secondary);
1815
+ margin-bottom: 12px;
1816
+ }
1817
+
1818
+ .lp-stats-v1-value-row {
1819
+ margin-bottom: 8px;
1820
+ }
1821
+
1822
+ .lp-stats-v1-value {
1823
+ font-size: 48px;
1824
+ font-weight: 800;
1825
+ color: var(--lp-text);
1826
+ }
1827
+
1828
+ .lp-stats-v1-unit {
1829
+ font-size: 20px;
1830
+ color: var(--lp-secondary);
1831
+ margin-left: 4px;
1832
+ }
1833
+
1834
+ .lp-stats-v1-change {
1835
+ font-size: 14px;
1836
+ color: var(--lp-accent);
1837
+ }
1838
+
1839
+ .lp-gallery-v1 {
1840
+ width: 100%;
1841
+ height: 100%;
1842
+ padding: 80px;
1843
+ background: var(--lp-surface);
1844
+ display: flex;
1845
+ flex-direction: column;
1846
+ }
1847
+
1848
+ .lp-gallery-v1-header {
1849
+ margin-bottom: 40px;
1850
+ }
1851
+
1852
+ .lp-gallery-v1-grid {
1853
+ display: grid;
1854
+ grid-template-columns: repeat(2, 1fr);
1855
+ gap: 24px;
1856
+ flex: 1;
1857
+ }
1858
+
1859
+ .lp-gallery-v1-item {
1860
+ position: relative;
1861
+ border-radius: 12px;
1862
+ overflow: hidden;
1863
+ background: var(--lp-bg);
1864
+ }
1865
+
1866
+ .lp-gallery-v1-item img {
1867
+ width: 100%;
1868
+ height: 100%;
1869
+ object-fit: cover;
1870
+ }
1871
+
1872
+ .lp-gallery-v1-placeholder {
1873
+ width: 100%;
1874
+ height: 100%;
1875
+ background: linear-gradient(135deg, #eee, #ddd);
1876
+ }
1877
+
1878
+ .lp-gallery-v1-caption {
1879
+ position: absolute;
1880
+ bottom: 0;
1881
+ left: 0;
1882
+ right: 0;
1883
+ padding: 12px 16px;
1884
+ background: rgba(0, 0, 0, 0.5);
1885
+ color: #fff;
1886
+ font-size: 14px;
1887
+ }
1888
+
1889
+ .lp-faq-v1 {
1890
+ width: 100%;
1891
+ height: 100%;
1892
+ padding: 80px;
1893
+ background: var(--lp-surface);
1894
+ display: flex;
1895
+ flex-direction: column;
1896
+ }
1897
+
1898
+ .lp-faq-v1-header {
1899
+ margin-bottom: 40px;
1900
+ }
1901
+
1902
+ .lp-faq-v1-list {
1903
+ display: flex;
1904
+ flex-direction: column;
1905
+ gap: 24px;
1906
+ }
1907
+
1908
+ .lp-faq-v1-item {
1909
+ background: var(--lp-bg);
1910
+ border-radius: 12px;
1911
+ padding: 24px;
1912
+ }
1913
+
1914
+ .lp-faq-v1-question,
1915
+ .lp-faq-v1-answer {
1916
+ display: flex;
1917
+ gap: 12px;
1918
+ align-items: flex-start;
1919
+ }
1920
+
1921
+ .lp-faq-v1-question {
1922
+ font-size: 18px;
1923
+ font-weight: 600;
1924
+ color: var(--lp-text);
1925
+ margin-bottom: 12px;
1926
+ }
1927
+
1928
+ .lp-faq-v1-answer {
1929
+ font-size: 16px;
1930
+ color: var(--lp-secondary);
1931
+ line-height: 1.6;
1932
+ }
1933
+
1934
+ .lp-faq-v1-q,
1935
+ .lp-faq-v1-a {
1936
+ display: inline-flex;
1937
+ align-items: center;
1938
+ justify-content: center;
1939
+ width: 24px;
1940
+ height: 24px;
1941
+ border-radius: 50%;
1942
+ font-size: 12px;
1943
+ font-weight: 700;
1944
+ flex-shrink: 0;
1945
+ }
1946
+
1947
+ .lp-faq-v1-q {
1948
+ background: var(--lp-accent);
1949
+ color: #fff;
1950
+ }
1951
+
1952
+ .lp-faq-v1-a {
1953
+ background: var(--lp-border);
1954
+ color: var(--lp-text);
1955
+ }
1956
+
1957
+ .lp-partners-v1 {
1958
+ width: 100%;
1959
+ height: 100%;
1960
+ padding: 80px;
1961
+ background: var(--lp-surface);
1962
+ display: flex;
1963
+ flex-direction: column;
1964
+ }
1965
+
1966
+ .lp-partners-v1-header {
1967
+ margin-bottom: 48px;
1968
+ }
1969
+
1970
+ .lp-partners-v1-grid {
1971
+ display: grid;
1972
+ grid-template-columns: repeat(4, 1fr);
1973
+ gap: 24px;
1974
+ flex: 1;
1975
+ align-content: center;
1976
+ }
1977
+
1978
+ .lp-partners-v1-card {
1979
+ background: var(--lp-bg);
1980
+ border-radius: 12px;
1981
+ padding: 24px;
1982
+ display: flex;
1983
+ flex-direction: column;
1984
+ align-items: center;
1985
+ justify-content: center;
1986
+ gap: 12px;
1987
+ }
1988
+
1989
+ .lp-partners-v1-card img {
1990
+ max-width: 100%;
1991
+ max-height: 48px;
1992
+ object-fit: contain;
1993
+ }
1994
+
1995
+ .lp-partners-v1-logo-placeholder {
1996
+ width: 64px;
1997
+ height: 64px;
1998
+ border-radius: 50%;
1999
+ background: linear-gradient(135deg, #ddd, #bbb);
2000
+ }
2001
+
2002
+ .lp-partners-v1-name {
2003
+ font-size: 14px;
2004
+ color: var(--lp-secondary);
2005
+ text-align: center;
2006
+ }
2007
+
2008
+ .lp-testimonial-v1 {
2009
+ width: 100%;
2010
+ height: 100%;
2011
+ padding: 80px;
2012
+ background: var(--lp-surface);
2013
+ display: flex;
2014
+ align-items: center;
2015
+ justify-content: center;
2016
+ }
2017
+
2018
+ .lp-testimonial-v1-content {
2019
+ max-width: 900px;
2020
+ }
2021
+
2022
+ .lp-testimonial-v1-quote {
2023
+ position: relative;
2024
+ margin-bottom: 40px;
2025
+ }
2026
+
2027
+ .lp-testimonial-v1-mark {
2028
+ position: absolute;
2029
+ top: -24px;
2030
+ left: -16px;
2031
+ font-size: 120px;
2032
+ line-height: 1;
2033
+ color: var(--lp-accent);
2034
+ opacity: 0.2;
2035
+ font-family: Georgia, serif;
2036
+ }
2037
+
2038
+ .lp-testimonial-v1-quote blockquote {
2039
+ position: relative;
2040
+ font-size: 36px;
2041
+ font-weight: 500;
2042
+ line-height: 1.4;
2043
+ color: var(--lp-text);
2044
+ margin: 0;
2045
+ padding: 0;
2046
+ }
2047
+
2048
+ .lp-testimonial-v1-author {
2049
+ display: flex;
2050
+ align-items: center;
2051
+ gap: 20px;
2052
+ }
2053
+
2054
+ .lp-testimonial-v1-author img,
2055
+ .lp-testimonial-v1-avatar-placeholder {
2056
+ width: 64px;
2057
+ height: 64px;
2058
+ border-radius: 50%;
2059
+ object-fit: cover;
2060
+ }
2061
+
2062
+ .lp-testimonial-v1-avatar-placeholder {
2063
+ background: linear-gradient(135deg, #ddd, #bbb);
2064
+ }
2065
+
2066
+ .lp-testimonial-v1-name {
2067
+ font-size: 18px;
2068
+ font-weight: 600;
2069
+ color: var(--lp-text);
2070
+ }
2071
+
2072
+ .lp-testimonial-v1-role {
2073
+ font-size: 14px;
2074
+ color: var(--lp-secondary);
2075
+ }
2076
+
2077
+ .lp-roadmap-v1 {
2078
+ width: 100%;
2079
+ height: 100%;
2080
+ padding: 80px;
2081
+ background: var(--lp-surface);
2082
+ display: flex;
2083
+ flex-direction: column;
2084
+ }
2085
+
2086
+ .lp-roadmap-v1-header {
2087
+ margin-bottom: 48px;
2088
+ }
2089
+
2090
+ .lp-roadmap-v1-track {
2091
+ position: relative;
2092
+ padding-left: 24px;
2093
+ flex: 1;
2094
+ overflow-y: auto;
2095
+ }
2096
+
2097
+ .lp-roadmap-v1-track::before {
2098
+ content: '';
2099
+ position: absolute;
2100
+ top: 12px;
2101
+ bottom: 12px;
2102
+ left: 7px;
2103
+ width: 2px;
2104
+ background: var(--lp-border);
2105
+ }
2106
+
2107
+ .lp-roadmap-v1-phase {
2108
+ position: relative;
2109
+ padding-left: 36px;
2110
+ margin-bottom: 32px;
2111
+ }
2112
+
2113
+ .lp-roadmap-v1-dot {
2114
+ position: absolute;
2115
+ top: 6px;
2116
+ left: 0;
2117
+ width: 16px;
2118
+ height: 16px;
2119
+ border-radius: 50%;
2120
+ background: var(--lp-accent);
2121
+ border: 3px solid var(--lp-surface);
2122
+ box-shadow: 0 0 0 2px var(--lp-accent);
2123
+ }
2124
+
2125
+ .lp-roadmap-v1-top {
2126
+ display: flex;
2127
+ align-items: center;
2128
+ gap: 12px;
2129
+ margin-bottom: 8px;
2130
+ }
2131
+
2132
+ .lp-roadmap-v1-title {
2133
+ font-size: 20px;
2134
+ font-weight: 700;
2135
+ color: var(--lp-text);
2136
+ }
2137
+
2138
+ .lp-roadmap-v1-status {
2139
+ font-size: 12px;
2140
+ font-weight: 600;
2141
+ color: var(--lp-accent);
2142
+ background: rgba(0, 113, 227, 0.1);
2143
+ padding: 4px 10px;
2144
+ border-radius: 100px;
2145
+ }
2146
+
2147
+ .lp-roadmap-v1-description {
2148
+ font-size: 16px;
2149
+ color: var(--lp-secondary);
2150
+ line-height: 1.6;
2151
+ }
2152
+
2153
+ .lp-split-v1-placeholder,
2154
+ .lp-gallery-v1-placeholder,
2155
+ .lp-partners-v1-logo-placeholder,
2156
+ .lp-testimonial-v1-avatar-placeholder {
2157
+ background: var(--lp-bg);
2158
+ border: 2px dashed var(--lp-border);
2159
+ }
2160
+
2161
+ @media print {
2162
+ html, body {
2163
+ display: block;
2164
+ background: #fff;
2165
+ }
2166
+
2167
+ .lp-editor-bar,
2168
+ .lp-nav,
2169
+ .lp-page-counter,
2170
+ .lp-hint {
2171
+ display: none !important;
2172
+ }
2173
+
2174
+ .lp-deck {
2175
+ box-shadow: none;
2176
+ border-radius: 0;
2177
+ width: 100% !important;
2178
+ height: auto !important;
2179
+ overflow: visible;
2180
+ }
2181
+
2182
+ .lp-slide-wrapper {
2183
+ position: relative;
2184
+ transform: none !important;
2185
+ opacity: 1 !important;
2186
+ width: 100% !important;
2187
+ height: 720px !important;
2188
+ page-break-after: always;
2189
+ break-after: page;
2190
+ z-index: auto !important;
2191
+ }
2192
+
2193
+ .lp-slide-wrapper:last-child {
2194
+ page-break-after: auto;
2195
+ break-after: auto;
2196
+ }
2197
+ }
2198
+ .lp-testimonial-v2 {
2199
+ width: 100%;
2200
+ height: 100%;
2201
+ padding: 80px;
2202
+ background: var(--lp-surface);
2203
+ display: flex;
2204
+ align-items: center;
2205
+ justify-content: center;
2206
+ }
2207
+
2208
+ .lp-testimonial-v2-card {
2209
+ width: 100%;
2210
+ max-width: 900px;
2211
+ background: var(--lp-bg);
2212
+ border: 1px solid var(--lp-border);
2213
+ border-radius: var(--lp-radius-large);
2214
+ padding: 48px;
2215
+ position: relative;
2216
+ }
2217
+
2218
+ .lp-testimonial-v2-logo {
2219
+ position: absolute;
2220
+ top: 32px;
2221
+ right: 40px;
2222
+ height: 32px;
2223
+ max-width: 120px;
2224
+ object-fit: contain;
2225
+ }
2226
+
2227
+ .lp-testimonial-v2-company {
2228
+ position: absolute;
2229
+ top: 32px;
2230
+ right: 40px;
1452
2231
  font-size: 14px;
2232
+ font-weight: 600;
2233
+ color: var(--lp-secondary);
2234
+ text-transform: uppercase;
2235
+ letter-spacing: 0.05em;
1453
2236
  }
1454
2237
 
1455
- .lp-faq-v1 {
2238
+ .lp-testimonial-v2-quote {
2239
+ margin: 32px 0 40px;
2240
+ }
2241
+
2242
+ .lp-testimonial-v2-quote blockquote {
2243
+ font-size: 32px;
2244
+ font-weight: 500;
2245
+ line-height: 1.4;
2246
+ color: var(--lp-text);
2247
+ margin: 0;
2248
+ padding: 0;
2249
+ }
2250
+
2251
+ .lp-testimonial-v2-footer {
2252
+ display: flex;
2253
+ align-items: flex-end;
2254
+ justify-content: space-between;
2255
+ gap: 24px;
2256
+ }
2257
+
2258
+ .lp-testimonial-v2-name {
2259
+ font-size: 18px;
2260
+ font-weight: 600;
2261
+ color: var(--lp-text);
2262
+ }
2263
+
2264
+ .lp-testimonial-v2-role {
2265
+ font-size: 14px;
2266
+ color: var(--lp-secondary);
2267
+ margin-top: 4px;
2268
+ }
2269
+
2270
+ .lp-testimonial-v2-metric {
2271
+ text-align: right;
2272
+ flex-shrink: 0;
2273
+ }
2274
+
2275
+ .lp-testimonial-v2-metric-value {
2276
+ font-size: 36px;
2277
+ font-weight: 700;
2278
+ color: var(--lp-accent);
2279
+ line-height: 1;
2280
+ }
2281
+
2282
+ .lp-testimonial-v2-metric-label {
2283
+ font-size: 13px;
2284
+ color: var(--lp-secondary);
2285
+ margin-top: 4px;
2286
+ }
2287
+ .lp-chart-v2 {
1456
2288
  width: 100%;
1457
2289
  height: 100%;
1458
2290
  padding: 80px;
@@ -1461,481 +2293,769 @@ body {
1461
2293
  flex-direction: column;
1462
2294
  }
1463
2295
 
1464
- .lp-faq-v1-header {
2296
+ .lp-chart-v2-header {
1465
2297
  margin-bottom: 40px;
1466
2298
  }
1467
2299
 
1468
- .lp-faq-v1-list {
2300
+ .lp-chart-v2-body {
2301
+ flex: 1;
2302
+ display: flex;
2303
+ align-items: center;
2304
+ justify-content: center;
2305
+ }
2306
+
2307
+ .lp-chart-v2-svg {
2308
+ width: 100%;
2309
+ max-width: 900px;
2310
+ height: auto;
2311
+ }
2312
+
2313
+ .lp-chart-v2-grid {
2314
+ stroke: var(--lp-border);
2315
+ stroke-width: 1;
2316
+ }
2317
+
2318
+ .lp-chart-v2-axis-text {
2319
+ fill: var(--lp-secondary);
2320
+ font-size: 12px;
2321
+ font-family: var(--lp-font-mono);
2322
+ }
2323
+
2324
+ .lp-chart-v2-bar {
2325
+ opacity: 0.9;
2326
+ }
2327
+
2328
+ .lp-chart-v2-legend-text {
2329
+ fill: var(--lp-secondary);
2330
+ font-size: 12px;
2331
+ font-family: var(--lp-font-body);
2332
+ }
2333
+ .lp-gallery-v2 {
2334
+ width: 100%;
2335
+ height: 100%;
2336
+ padding: 80px;
2337
+ background: var(--lp-surface);
1469
2338
  display: flex;
1470
2339
  flex-direction: column;
2340
+ }
2341
+
2342
+ .lp-gallery-v2-header {
2343
+ margin-bottom: 40px;
2344
+ }
2345
+
2346
+ .lp-gallery-v2-grid {
2347
+ display: grid;
2348
+ grid-template-columns: repeat(3, 1fr);
1471
2349
  gap: 24px;
2350
+ flex: 1;
2351
+ align-content: start;
1472
2352
  }
1473
2353
 
1474
- .lp-faq-v1-item {
2354
+ .lp-gallery-v2-item {
2355
+ display: flex;
2356
+ flex-direction: column;
2357
+ gap: 10px;
2358
+ }
2359
+
2360
+ .lp-gallery-v2-item img,
2361
+ .lp-gallery-v2-placeholder {
2362
+ width: 100%;
2363
+ aspect-ratio: 16 / 10;
2364
+ object-fit: cover;
2365
+ border-radius: var(--lp-radius-medium);
1475
2366
  background: var(--lp-bg);
1476
- border-radius: 12px;
1477
- padding: 24px;
2367
+ border: 1px solid var(--lp-border);
1478
2368
  }
1479
2369
 
1480
- .lp-faq-v1-question,
1481
- .lp-faq-v1-answer {
2370
+ .lp-gallery-v2-caption {
2371
+ font-size: 14px;
2372
+ color: var(--lp-secondary);
2373
+ text-align: center;
2374
+ line-height: 1.4;
2375
+ }
2376
+
2377
+ /* ---- New shared layouts (stage 2) ------------------------------------ */
2378
+
2379
+ .lp-cover-v2 {
2380
+ flex-direction: row;
2381
+ align-items: stretch;
2382
+ padding: 0;
2383
+ }
2384
+
2385
+ .lp-cover-v2-left {
2386
+ flex: 1;
1482
2387
  display: flex;
1483
- gap: 12px;
1484
- align-items: flex-start;
2388
+ flex-direction: column;
2389
+ justify-content: center;
2390
+ padding: 80px 64px;
2391
+ text-align: left;
1485
2392
  }
1486
2393
 
1487
- .lp-faq-v1-question {
1488
- font-size: 18px;
1489
- font-weight: 600;
1490
- color: var(--lp-text);
1491
- margin-bottom: 12px;
2394
+ .lp-cover-v2-left .lp-kicker {
2395
+ margin-bottom: 24px;
1492
2396
  }
1493
2397
 
1494
- .lp-faq-v1-answer {
1495
- font-size: 16px;
2398
+ .lp-cover-v2-left .lp-cover-title {
2399
+ font-size: 68px;
2400
+ font-weight: 800;
2401
+ margin-bottom: 24px;
2402
+ }
2403
+
2404
+ .lp-cover-v2-left .lp-cover-subtitle {
2405
+ font-size: 24px;
2406
+ margin-bottom: 40px;
1496
2407
  color: var(--lp-secondary);
2408
+ }
2409
+
2410
+ .lp-cover-v2-right {
2411
+ flex: 1;
2412
+ position: relative;
2413
+ overflow: hidden;
2414
+ }
2415
+
2416
+ .lp-cover-v2-image {
2417
+ position: absolute;
2418
+ inset: 0;
2419
+ width: 100%;
2420
+ height: 100%;
2421
+ object-fit: cover;
2422
+ }
2423
+
2424
+ .lp-cover-v2-shape {
2425
+ position: absolute;
2426
+ inset: 80px 64px;
2427
+ background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.05));
2428
+ border-radius: var(--lp-radius-large);
2429
+ }
2430
+
2431
+ .lp-content-v4 {
2432
+ justify-content: flex-start;
2433
+ }
2434
+
2435
+ .lp-content-v4 .lp-content-title {
2436
+ font-size: 48px;
2437
+ margin-bottom: 48px;
2438
+ }
2439
+
2440
+ .lp-content-v4-cards {
2441
+ display: grid;
2442
+ grid-template-columns: repeat(3, 1fr);
2443
+ gap: 24px;
2444
+ }
2445
+
2446
+ .lp-content-v4-card {
2447
+ background: var(--lp-surface-elevated);
2448
+ border: 1px solid var(--lp-border);
2449
+ border-radius: var(--lp-radius-medium);
2450
+ padding: 32px;
2451
+ }
2452
+
2453
+ .lp-content-v4-card-title {
2454
+ font-size: 22px;
2455
+ font-weight: 700;
2456
+ margin: 0 0 16px 0;
2457
+ color: var(--lp-text);
2458
+ }
2459
+
2460
+ .lp-content-v4-card-desc {
2461
+ font-size: 17px;
1497
2462
  line-height: 1.6;
2463
+ margin: 0;
2464
+ color: var(--lp-secondary);
1498
2465
  }
1499
2466
 
1500
- .lp-faq-v1-q,
1501
- .lp-faq-v1-a {
1502
- display: inline-flex;
2467
+ .lp-stats-v2 {
2468
+ justify-content: flex-start;
2469
+ }
2470
+
2471
+ .lp-stats-v2 .lp-stats-title {
2472
+ font-size: 48px;
2473
+ margin-bottom: 48px;
2474
+ }
2475
+
2476
+ .lp-stats-v2-list {
2477
+ display: flex;
2478
+ gap: 24px;
2479
+ flex: 1;
1503
2480
  align-items: center;
1504
- justify-content: center;
1505
- width: 24px;
1506
- height: 24px;
1507
- border-radius: 50%;
1508
- font-size: 12px;
1509
- font-weight: 700;
1510
- flex-shrink: 0;
1511
2481
  }
1512
2482
 
1513
- .lp-faq-v1-q {
1514
- background: var(--lp-accent);
1515
- color: #fff;
2483
+ .lp-stats-v2-item {
2484
+ flex: 1;
2485
+ text-align: center;
2486
+ padding: 32px 16px;
2487
+ background: var(--lp-surface-elevated);
2488
+ border: 1px solid var(--lp-border);
2489
+ border-radius: var(--lp-radius-medium);
1516
2490
  }
1517
2491
 
1518
- .lp-faq-v1-a {
1519
- background: var(--lp-border);
2492
+ .lp-stats-v2-main {
2493
+ margin-bottom: 12px;
2494
+ }
2495
+
2496
+ .lp-stats-v2-value {
2497
+ font-size: 56px;
2498
+ font-weight: 800;
1520
2499
  color: var(--lp-text);
1521
2500
  }
1522
2501
 
1523
- .lp-partners-v1 {
1524
- width: 100%;
1525
- height: 100%;
1526
- padding: 80px;
1527
- background: var(--lp-surface);
1528
- display: flex;
1529
- flex-direction: column;
2502
+ .lp-stats-v2-unit {
2503
+ font-size: 20px;
2504
+ color: var(--lp-secondary);
2505
+ margin-left: 4px;
2506
+ }
2507
+
2508
+ .lp-stats-v2-label {
2509
+ font-size: 16px;
2510
+ color: var(--lp-secondary);
2511
+ margin-bottom: 8px;
1530
2512
  }
1531
2513
 
1532
- .lp-partners-v1-header {
1533
- margin-bottom: 48px;
2514
+ .lp-stats-v2-change {
2515
+ font-size: 14px;
2516
+ color: var(--lp-accent);
2517
+ font-family: var(--lp-font-mono);
1534
2518
  }
1535
2519
 
1536
- .lp-partners-v1-grid {
1537
- display: grid;
1538
- grid-template-columns: repeat(4, 1fr);
1539
- gap: 24px;
1540
- flex: 1;
1541
- align-content: center;
2520
+ .lp-image-v2 {
2521
+ flex-direction: row;
2522
+ align-items: stretch;
2523
+ padding: 0;
1542
2524
  }
1543
2525
 
1544
- .lp-partners-v1-card {
1545
- background: var(--lp-bg);
1546
- border-radius: 12px;
1547
- padding: 24px;
2526
+ .lp-image-v2-left {
2527
+ flex: 1;
1548
2528
  display: flex;
1549
2529
  flex-direction: column;
1550
- align-items: center;
1551
2530
  justify-content: center;
1552
- gap: 12px;
2531
+ padding: 80px 64px;
2532
+ text-align: left;
1553
2533
  }
1554
2534
 
1555
- .lp-partners-v1-card img {
1556
- max-width: 100%;
1557
- max-height: 48px;
1558
- object-fit: contain;
2535
+ .lp-image-v2-title {
2536
+ font-size: 48px;
2537
+ font-weight: 800;
2538
+ margin-bottom: 24px;
1559
2539
  }
1560
2540
 
1561
- .lp-partners-v1-logo-placeholder {
1562
- width: 64px;
1563
- height: 64px;
1564
- border-radius: 50%;
1565
- background: linear-gradient(135deg, #ddd, #bbb);
2541
+ .lp-image-v2-body {
2542
+ font-size: 20px;
2543
+ line-height: 1.65;
2544
+ color: var(--lp-secondary);
1566
2545
  }
1567
2546
 
1568
- .lp-partners-v1-name {
1569
- font-size: 14px;
1570
- color: var(--lp-secondary);
1571
- text-align: center;
2547
+ .lp-image-v2-right {
2548
+ flex: 1.4;
2549
+ position: relative;
2550
+ overflow: hidden;
2551
+ background: var(--lp-bg);
1572
2552
  }
1573
2553
 
1574
- .lp-testimonial-v1 {
2554
+ .lp-image-v2-image {
2555
+ position: absolute;
2556
+ inset: 0;
1575
2557
  width: 100%;
1576
2558
  height: 100%;
1577
- padding: 80px;
1578
- background: var(--lp-surface);
1579
- display: flex;
1580
- align-items: center;
1581
- justify-content: center;
2559
+ object-fit: cover;
1582
2560
  }
1583
2561
 
1584
- .lp-testimonial-v1-content {
1585
- max-width: 900px;
2562
+ .lp-image-v2-caption {
2563
+ position: absolute;
2564
+ bottom: 0;
2565
+ left: 0;
2566
+ right: 0;
2567
+ padding: 16px 24px;
2568
+ font-size: 14px;
2569
+ color: var(--lp-secondary);
2570
+ background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
1586
2571
  }
1587
2572
 
1588
- .lp-testimonial-v1-quote {
1589
- position: relative;
1590
- margin-bottom: 40px;
2573
+ .lp-quote-v3 {
2574
+ flex-direction: row;
2575
+ align-items: center;
2576
+ justify-content: center;
2577
+ padding: 80px 100px;
2578
+ gap: 40px;
1591
2579
  }
1592
2580
 
1593
- .lp-testimonial-v1-mark {
1594
- position: absolute;
1595
- top: -24px;
1596
- left: -16px;
1597
- font-size: 120px;
2581
+ .lp-quote-v3-mark {
2582
+ font-size: 200px;
2583
+ font-weight: 800;
1598
2584
  line-height: 1;
1599
2585
  color: var(--lp-accent);
1600
- opacity: 0.2;
1601
- font-family: Georgia, serif;
2586
+ opacity: 0.25;
2587
+ user-select: none;
1602
2588
  }
1603
2589
 
1604
- .lp-testimonial-v1-quote blockquote {
1605
- position: relative;
1606
- font-size: 36px;
1607
- font-weight: 500;
1608
- line-height: 1.4;
2590
+ .lp-quote-v3-content {
2591
+ flex: 1;
2592
+ max-width: 820px;
2593
+ }
2594
+
2595
+ .lp-quote-v3-text {
2596
+ font-size: 38px;
2597
+ line-height: 1.45;
2598
+ font-style: italic;
2599
+ margin: 0 0 32px 0;
1609
2600
  color: var(--lp-text);
1610
- margin: 0;
1611
- padding: 0;
1612
2601
  }
1613
2602
 
1614
- .lp-testimonial-v1-author {
2603
+ .lp-quote-v3-meta {
1615
2604
  display: flex;
2605
+ flex-wrap: wrap;
2606
+ gap: 8px 16px;
1616
2607
  align-items: center;
1617
- gap: 20px;
1618
- }
1619
-
1620
- .lp-testimonial-v1-author img,
1621
- .lp-testimonial-v1-avatar-placeholder {
1622
- width: 64px;
1623
- height: 64px;
1624
- border-radius: 50%;
1625
- object-fit: cover;
1626
2608
  }
1627
2609
 
1628
- .lp-testimonial-v1-avatar-placeholder {
1629
- background: linear-gradient(135deg, #ddd, #bbb);
2610
+ .lp-quote-v3-author {
2611
+ font-size: 20px;
2612
+ font-weight: 700;
2613
+ color: var(--lp-text);
1630
2614
  }
1631
2615
 
1632
- .lp-testimonial-v1-name {
1633
- font-size: 18px;
1634
- font-weight: 600;
1635
- color: var(--lp-text);
2616
+ .lp-quote-v3-role {
2617
+ font-size: 16px;
2618
+ color: var(--lp-secondary);
1636
2619
  }
1637
2620
 
1638
- .lp-testimonial-v1-role {
2621
+ .lp-quote-v3-source {
1639
2622
  font-size: 14px;
1640
2623
  color: var(--lp-secondary);
2624
+ font-family: var(--lp-font-mono);
2625
+ width: 100%;
1641
2626
  }
1642
2627
 
1643
- .lp-roadmap-v1 {
1644
- width: 100%;
1645
- height: 100%;
1646
- padding: 80px;
1647
- background: var(--lp-surface);
2628
+ .lp-process-v3 {
2629
+ justify-content: flex-start;
2630
+ }
2631
+
2632
+ .lp-process-v3 .lp-process-title {
2633
+ font-size: 48px;
2634
+ margin-bottom: 48px;
2635
+ }
2636
+
2637
+ .lp-process-v3-list {
1648
2638
  display: flex;
1649
2639
  flex-direction: column;
2640
+ gap: 20px;
2641
+ width: 100%;
1650
2642
  }
1651
2643
 
1652
- .lp-roadmap-v1-header {
1653
- margin-bottom: 48px;
2644
+ .lp-process-v3-step {
2645
+ display: flex;
2646
+ align-items: flex-start;
2647
+ gap: 24px;
2648
+ padding: 24px;
2649
+ background: var(--lp-surface-elevated);
2650
+ border: 1px solid var(--lp-border);
2651
+ border-radius: var(--lp-radius-medium);
1654
2652
  }
1655
2653
 
1656
- .lp-roadmap-v1-track {
1657
- position: relative;
1658
- padding-left: 24px;
2654
+ .lp-process-v3-number {
2655
+ flex-shrink: 0;
2656
+ width: 56px;
2657
+ height: 56px;
2658
+ border-radius: var(--lp-radius-small);
2659
+ background: var(--lp-accent);
2660
+ color: #fff;
2661
+ display: flex;
2662
+ align-items: center;
2663
+ justify-content: center;
2664
+ font-weight: 800;
2665
+ font-size: 20px;
2666
+ font-family: var(--lp-font-mono);
2667
+ }
2668
+
2669
+ .lp-process-v3-body {
1659
2670
  flex: 1;
1660
- overflow-y: auto;
1661
2671
  }
1662
2672
 
1663
- .lp-roadmap-v1-track::before {
1664
- content: '';
1665
- position: absolute;
1666
- top: 12px;
1667
- bottom: 12px;
1668
- left: 7px;
1669
- width: 2px;
1670
- background: var(--lp-border);
2673
+ .lp-process-v3-step-title {
2674
+ margin: 0 0 8px 0;
2675
+ font-size: 22px;
2676
+ color: var(--lp-text);
1671
2677
  }
1672
2678
 
1673
- .lp-roadmap-v1-phase {
2679
+ .lp-process-v3-step-desc {
2680
+ margin: 0;
2681
+ font-size: 17px;
2682
+ color: var(--lp-secondary);
2683
+ line-height: 1.55;
2684
+ }
2685
+
2686
+ .lp-feature-v3 {
2687
+ flex-direction: row;
2688
+ align-items: stretch;
2689
+ padding: 0;
2690
+ }
2691
+
2692
+ .lp-feature-v3-left {
2693
+ flex: 1;
1674
2694
  position: relative;
1675
- padding-left: 36px;
1676
- margin-bottom: 32px;
2695
+ overflow: hidden;
2696
+ background: var(--lp-bg);
1677
2697
  }
1678
2698
 
1679
- .lp-roadmap-v1-dot {
2699
+ .lp-feature-v3-image {
1680
2700
  position: absolute;
1681
- top: 6px;
1682
- left: 0;
1683
- width: 16px;
1684
- height: 16px;
1685
- border-radius: 50%;
1686
- background: var(--lp-accent);
1687
- border: 3px solid var(--lp-surface);
1688
- box-shadow: 0 0 0 2px var(--lp-accent);
2701
+ inset: 0;
2702
+ width: 100%;
2703
+ height: 100%;
2704
+ object-fit: cover;
1689
2705
  }
1690
2706
 
1691
- .lp-roadmap-v1-top {
2707
+ .lp-feature-v3-right {
2708
+ flex: 1;
1692
2709
  display: flex;
1693
- align-items: center;
1694
- gap: 12px;
1695
- margin-bottom: 8px;
2710
+ flex-direction: column;
2711
+ justify-content: center;
2712
+ padding: 80px 64px;
2713
+ text-align: left;
1696
2714
  }
1697
2715
 
1698
- .lp-roadmap-v1-title {
1699
- font-size: 20px;
1700
- font-weight: 700;
1701
- color: var(--lp-text);
2716
+ .lp-feature-v3-title {
2717
+ font-size: 48px;
2718
+ font-weight: 800;
2719
+ margin-bottom: 40px;
1702
2720
  }
1703
2721
 
1704
- .lp-roadmap-v1-status {
1705
- font-size: 12px;
1706
- font-weight: 600;
1707
- color: var(--lp-accent);
1708
- background: rgba(0, 113, 227, 0.1);
1709
- padding: 4px 10px;
1710
- border-radius: 100px;
2722
+ .lp-feature-v3-list {
2723
+ display: flex;
2724
+ flex-direction: column;
2725
+ gap: 28px;
1711
2726
  }
1712
2727
 
1713
- .lp-roadmap-v1-description {
1714
- font-size: 16px;
1715
- color: var(--lp-secondary);
1716
- line-height: 1.6;
2728
+ .lp-feature-v3-item {
2729
+ display: flex;
2730
+ gap: 16px;
2731
+ align-items: flex-start;
1717
2732
  }
1718
2733
 
1719
- .lp-split-v1-placeholder,
1720
- .lp-gallery-v1-placeholder,
1721
- .lp-partners-v1-logo-placeholder,
1722
- .lp-testimonial-v1-avatar-placeholder {
1723
- background: var(--lp-bg);
1724
- border: 2px dashed var(--lp-border);
2734
+ .lp-feature-v3-bullet {
2735
+ flex-shrink: 0;
2736
+ width: 12px;
2737
+ height: 12px;
2738
+ border-radius: 50%;
2739
+ background: var(--lp-accent);
2740
+ margin-top: 8px;
1725
2741
  }
1726
2742
 
1727
- @media print {
1728
- html, body {
1729
- display: block;
1730
- background: #fff;
1731
- }
1732
-
1733
- .lp-editor-bar,
1734
- .lp-nav,
1735
- .lp-page-counter,
1736
- .lp-hint {
1737
- display: none !important;
1738
- }
1739
-
1740
- .lp-deck {
1741
- box-shadow: none;
1742
- border-radius: 0;
1743
- width: 100% !important;
1744
- height: auto !important;
1745
- overflow: visible;
1746
- }
1747
-
1748
- .lp-slide-wrapper {
1749
- position: relative;
1750
- transform: none !important;
1751
- opacity: 1 !important;
1752
- width: 100% !important;
1753
- height: 720px !important;
1754
- page-break-after: always;
1755
- break-after: page;
1756
- z-index: auto !important;
1757
- }
2743
+ .lp-feature-v3-body {
2744
+ flex: 1;
2745
+ }
1758
2746
 
1759
- .lp-slide-wrapper:last-child {
1760
- page-break-after: auto;
1761
- break-after: auto;
1762
- }
2747
+ .lp-feature-v3-item-title {
2748
+ font-size: 20px;
2749
+ font-weight: 700;
2750
+ margin: 0 0 6px 0;
2751
+ color: var(--lp-text);
1763
2752
  }
1764
- .lp-testimonial-v2 {
2753
+
2754
+ .lp-feature-v3-item-desc {
2755
+ font-size: 16px;
2756
+ line-height: 1.55;
2757
+ margin: 0;
2758
+ color: var(--lp-secondary);
2759
+ }
2760
+
2761
+ .lp-gallery-v3 {
1765
2762
  width: 100%;
1766
2763
  height: 100%;
1767
2764
  padding: 80px;
1768
2765
  background: var(--lp-surface);
1769
2766
  display: flex;
1770
- align-items: center;
1771
- justify-content: center;
2767
+ flex-direction: column;
1772
2768
  }
1773
2769
 
1774
- .lp-testimonial-v2-card {
2770
+ .lp-gallery-v3-title {
2771
+ margin-bottom: 40px;
2772
+ }
2773
+
2774
+ .lp-gallery-v3-grid {
2775
+ display: grid;
2776
+ grid-template-columns: repeat(3, 1fr);
2777
+ gap: 32px;
2778
+ flex: 1;
2779
+ align-content: center;
2780
+ }
2781
+
2782
+ .lp-gallery-v3-item {
2783
+ display: flex;
2784
+ flex-direction: column;
2785
+ gap: 16px;
2786
+ }
2787
+
2788
+ .lp-gallery-v3-image,
2789
+ .lp-gallery-v3-placeholder {
1775
2790
  width: 100%;
1776
- max-width: 900px;
2791
+ height: 280px;
2792
+ object-fit: cover;
2793
+ border-radius: var(--lp-radius-large);
1777
2794
  background: var(--lp-bg);
1778
2795
  border: 1px solid var(--lp-border);
1779
- border-radius: var(--lp-radius-large);
1780
- padding: 48px;
1781
- position: relative;
1782
2796
  }
1783
2797
 
1784
- .lp-testimonial-v2-logo {
1785
- position: absolute;
1786
- top: 32px;
1787
- right: 40px;
1788
- height: 32px;
1789
- max-width: 120px;
1790
- object-fit: contain;
2798
+ .lp-gallery-v3-caption {
2799
+ font-size: 16px;
2800
+ color: var(--lp-secondary);
2801
+ text-align: center;
2802
+ line-height: 1.5;
1791
2803
  }
1792
2804
 
1793
- .lp-testimonial-v2-company {
1794
- position: absolute;
1795
- top: 32px;
1796
- right: 40px;
1797
- font-size: 14px;
1798
- font-weight: 600;
1799
- color: var(--lp-secondary);
1800
- text-transform: uppercase;
1801
- letter-spacing: 0.05em;
2805
+ .lp-testimonial-v3 {
2806
+ flex-direction: row;
2807
+ align-items: stretch;
2808
+ padding: 0;
1802
2809
  }
1803
2810
 
1804
- .lp-testimonial-v2-quote {
1805
- margin: 32px 0 40px;
2811
+ .lp-testimonial-v3-left {
2812
+ flex: 1.3;
2813
+ display: flex;
2814
+ flex-direction: column;
2815
+ justify-content: center;
2816
+ padding: 80px 64px;
2817
+ background: var(--lp-surface-elevated);
2818
+ position: relative;
1806
2819
  }
1807
2820
 
1808
- .lp-testimonial-v2-quote blockquote {
1809
- font-size: 32px;
1810
- font-weight: 500;
1811
- line-height: 1.4;
2821
+ .lp-testimonial-v3-mark {
2822
+ position: absolute;
2823
+ top: 48px;
2824
+ left: 48px;
2825
+ font-size: 160px;
2826
+ font-weight: 800;
2827
+ line-height: 1;
2828
+ color: var(--lp-accent);
2829
+ opacity: 0.15;
2830
+ user-select: none;
2831
+ }
2832
+
2833
+ .lp-testimonial-v3-quote {
2834
+ position: relative;
2835
+ font-size: 34px;
2836
+ line-height: 1.5;
1812
2837
  color: var(--lp-text);
1813
2838
  margin: 0;
1814
2839
  padding: 0;
1815
2840
  }
1816
2841
 
1817
- .lp-testimonial-v2-footer {
2842
+ .lp-testimonial-v3-quote blockquote {
2843
+ margin: 0;
2844
+ padding: 0;
2845
+ }
2846
+
2847
+ .lp-testimonial-v3-right {
2848
+ flex: 1;
1818
2849
  display: flex;
1819
- align-items: flex-end;
1820
- justify-content: space-between;
1821
- gap: 24px;
2850
+ align-items: center;
2851
+ justify-content: center;
2852
+ padding: 80px 64px;
2853
+ background: var(--lp-surface);
1822
2854
  }
1823
2855
 
1824
- .lp-testimonial-v2-name {
1825
- font-size: 18px;
1826
- font-weight: 600;
2856
+ .lp-testimonial-v3-card {
2857
+ width: 100%;
2858
+ max-width: 320px;
2859
+ text-align: center;
2860
+ }
2861
+
2862
+ .lp-testimonial-v3-avatar,
2863
+ .lp-testimonial-v3-avatar-placeholder {
2864
+ width: 96px;
2865
+ height: 96px;
2866
+ border-radius: 50%;
2867
+ object-fit: cover;
2868
+ margin: 0 auto 24px;
2869
+ background: var(--lp-bg);
2870
+ border: 2px dashed var(--lp-border);
2871
+ }
2872
+
2873
+ .lp-testimonial-v3-author {
2874
+ font-size: 22px;
2875
+ font-weight: 700;
1827
2876
  color: var(--lp-text);
1828
2877
  }
1829
2878
 
1830
- .lp-testimonial-v2-role {
2879
+ .lp-testimonial-v3-role {
2880
+ font-size: 15px;
2881
+ color: var(--lp-secondary);
2882
+ margin-top: 4px;
2883
+ }
2884
+
2885
+ .lp-testimonial-v3-company {
1831
2886
  font-size: 14px;
1832
2887
  color: var(--lp-secondary);
1833
2888
  margin-top: 4px;
2889
+ font-family: var(--lp-font-mono);
1834
2890
  }
1835
2891
 
1836
- .lp-testimonial-v2-metric {
1837
- text-align: right;
1838
- flex-shrink: 0;
2892
+ .lp-testimonial-v3-metric {
2893
+ margin-top: 28px;
2894
+ padding-top: 24px;
2895
+ border-top: 1px solid var(--lp-border);
1839
2896
  }
1840
2897
 
1841
- .lp-testimonial-v2-metric-value {
1842
- font-size: 36px;
1843
- font-weight: 700;
2898
+ .lp-testimonial-v3-metric-value {
2899
+ font-size: 42px;
2900
+ font-weight: 800;
1844
2901
  color: var(--lp-accent);
1845
2902
  line-height: 1;
1846
2903
  }
1847
2904
 
1848
- .lp-testimonial-v2-metric-label {
1849
- font-size: 13px;
2905
+ .lp-testimonial-v3-metric-label {
2906
+ font-size: 14px;
1850
2907
  color: var(--lp-secondary);
1851
- margin-top: 4px;
2908
+ margin-top: 6px;
1852
2909
  }
1853
- .lp-chart-v2 {
1854
- width: 100%;
1855
- height: 100%;
2910
+
2911
+ .lp-comparison-v3 {
2912
+ justify-content: flex-start;
1856
2913
  padding: 80px;
1857
- background: var(--lp-surface);
2914
+ }
2915
+
2916
+ .lp-comparison-v3-title {
2917
+ font-size: 48px;
2918
+ font-weight: 800;
2919
+ margin-bottom: 48px;
2920
+ }
2921
+
2922
+ .lp-comparison-v3-table {
2923
+ width: 100%;
1858
2924
  display: flex;
1859
2925
  flex-direction: column;
2926
+ gap: 2px;
2927
+ border: 1px solid var(--lp-border);
2928
+ border-radius: var(--lp-radius-medium);
2929
+ overflow: hidden;
1860
2930
  }
1861
2931
 
1862
- .lp-chart-v2-header {
1863
- margin-bottom: 40px;
2932
+ .lp-comparison-v3-header {
2933
+ display: grid;
2934
+ grid-template-columns: 1.4fr 1fr 1fr;
2935
+ gap: 2px;
2936
+ background: var(--lp-border);
1864
2937
  }
1865
2938
 
1866
- .lp-chart-v2-body {
1867
- flex: 1;
2939
+ .lp-comparison-v3-header-cell {
2940
+ padding: 16px 20px;
2941
+ font-size: 15px;
2942
+ font-weight: 700;
2943
+ text-align: center;
2944
+ background: var(--lp-surface-elevated);
2945
+ color: var(--lp-text);
2946
+ }
2947
+
2948
+ .lp-comparison-v3-header-cell.lp-comparison-v3-left-title {
2949
+ background: var(--lp-accent);
2950
+ color: #fff;
2951
+ }
2952
+
2953
+ .lp-comparison-v3-row {
2954
+ display: grid;
2955
+ grid-template-columns: 1.4fr 1fr 1fr;
2956
+ gap: 2px;
2957
+ background: var(--lp-border);
2958
+ }
2959
+
2960
+ .lp-comparison-v3-cell {
2961
+ padding: 18px 20px;
2962
+ font-size: 16px;
2963
+ background: var(--lp-surface);
2964
+ color: var(--lp-text);
1868
2965
  display: flex;
1869
2966
  align-items: center;
1870
2967
  justify-content: center;
1871
2968
  }
1872
2969
 
1873
- .lp-chart-v2-svg {
1874
- width: 100%;
1875
- max-width: 900px;
1876
- height: auto;
2970
+ .lp-comparison-v3-cell.lp-comparison-v3-feature {
2971
+ justify-content: flex-start;
2972
+ font-weight: 600;
1877
2973
  }
1878
2974
 
1879
- .lp-chart-v2-grid {
1880
- stroke: var(--lp-border);
1881
- stroke-width: 1;
2975
+ .lp-comparison-v3-row:nth-child(even) .lp-comparison-v3-cell {
2976
+ background: var(--lp-surface-elevated);
1882
2977
  }
1883
2978
 
1884
- .lp-chart-v2-axis-text {
1885
- fill: var(--lp-secondary);
1886
- font-size: 12px;
1887
- font-family: var(--lp-font-mono);
2979
+ .lp-timeline-v3 {
2980
+ justify-content: flex-start;
2981
+ padding: 80px;
1888
2982
  }
1889
2983
 
1890
- .lp-chart-v2-bar {
1891
- opacity: 0.9;
2984
+ .lp-timeline-v3-title {
2985
+ font-size: 48px;
2986
+ font-weight: 800;
2987
+ margin-bottom: 48px;
1892
2988
  }
1893
2989
 
1894
- .lp-chart-v2-legend-text {
1895
- fill: var(--lp-secondary);
1896
- font-size: 12px;
1897
- font-family: var(--lp-font-body);
1898
- }
1899
- .lp-gallery-v2 {
1900
- width: 100%;
1901
- height: 100%;
1902
- padding: 80px;
1903
- background: var(--lp-surface);
2990
+ .lp-timeline-v3-list {
1904
2991
  display: flex;
1905
2992
  flex-direction: column;
2993
+ gap: 8px;
1906
2994
  }
1907
2995
 
1908
- .lp-gallery-v2-header {
1909
- margin-bottom: 40px;
1910
- }
1911
-
1912
- .lp-gallery-v2-grid {
1913
- display: grid;
1914
- grid-template-columns: repeat(3, 1fr);
2996
+ .lp-timeline-v3-event {
2997
+ display: flex;
1915
2998
  gap: 24px;
1916
- flex: 1;
1917
- align-content: start;
2999
+ align-items: stretch;
1918
3000
  }
1919
3001
 
1920
- .lp-gallery-v2-item {
3002
+ .lp-timeline-v3-node {
3003
+ position: relative;
1921
3004
  display: flex;
1922
3005
  flex-direction: column;
1923
- gap: 10px;
3006
+ align-items: center;
3007
+ width: 24px;
3008
+ flex-shrink: 0;
3009
+ padding-top: 8px;
1924
3010
  }
1925
3011
 
1926
- .lp-gallery-v2-item img,
1927
- .lp-gallery-v2-placeholder {
1928
- width: 100%;
1929
- aspect-ratio: 16 / 10;
1930
- object-fit: cover;
1931
- border-radius: var(--lp-radius-medium);
1932
- background: var(--lp-bg);
3012
+ .lp-timeline-v3-dot {
3013
+ width: 18px;
3014
+ height: 18px;
3015
+ border-radius: 50%;
3016
+ background: var(--lp-accent);
3017
+ border: 3px solid var(--lp-surface);
3018
+ box-shadow: 0 0 0 2px var(--lp-border);
3019
+ z-index: 1;
3020
+ }
3021
+
3022
+ .lp-timeline-v3-line {
3023
+ position: absolute;
3024
+ top: 22px;
3025
+ bottom: -16px;
3026
+ width: 2px;
3027
+ background: var(--lp-border);
3028
+ }
3029
+
3030
+ .lp-timeline-v3-card {
3031
+ flex: 1;
3032
+ padding: 20px 24px;
3033
+ background: var(--lp-surface-elevated);
1933
3034
  border: 1px solid var(--lp-border);
3035
+ border-radius: var(--lp-radius-medium);
3036
+ margin-bottom: 16px;
1934
3037
  }
1935
3038
 
1936
- .lp-gallery-v2-caption {
1937
- font-size: 14px;
3039
+ .lp-timeline-v3-date {
3040
+ font-size: 13px;
3041
+ font-weight: 700;
3042
+ color: var(--lp-accent);
3043
+ margin-bottom: 6px;
3044
+ font-family: var(--lp-font-mono);
3045
+ text-transform: uppercase;
3046
+ letter-spacing: 0.05em;
3047
+ }
3048
+
3049
+ .lp-timeline-v3-event-title {
3050
+ font-size: 20px;
3051
+ font-weight: 700;
3052
+ margin: 0 0 8px 0;
3053
+ color: var(--lp-text);
3054
+ }
3055
+
3056
+ .lp-timeline-v3-event-desc {
3057
+ font-size: 16px;
3058
+ line-height: 1.55;
3059
+ margin: 0;
1938
3060
  color: var(--lp-secondary);
1939
- text-align: center;
1940
- line-height: 1.4;
1941
3061
  }