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