*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #000308; color: #f1f6fb; line-height: 1.5; overflow-x: hidden; overflow-x: clip; min-height: 100vh; } a { color: #50d8ff; text-decoration: none; } a:hover { color: #ffffff; } img { max-width: 100%; height: auto; display: block; } button { font-family: inherit; cursor: pointer; } :root { --cyan: #00b8e6; --cyan-light: #50d8ff; --cyan-dark: #0079a8; --bg-deep: #00010a; --bg-card: rgba(2, 4, 10, 0.82); --text: #f1f6fb; --text-muted: #9aa9bb; --border: rgba(28, 39, 52, 1); --border-cyan: rgba(0, 184, 230, 0.3); } body { background: var(--bg-deep); } .otr-site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 3, 8, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-cyan); } .otr-nav-inner { max-width: 1280px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; } .otr-nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; letter-spacing: 2px; } .otr-nav-brand-mark { width: 54px; height: 54px; object-fit: contain; display: block; filter: drop-shadow(0 0 14px rgba(0,184,230,0.5)); transition: transform 0.3s ease, filter 0.3s ease; } .otr-nav-brand:hover .otr-nav-brand-mark { transform: scale(1.08); filter: drop-shadow(0 0 20px rgba(0,184,230,0.75)); } .otr-nav-brand-text { color: #fff; } .otr-nav-brand-text span { color: var(--cyan-light); } .otr-nav-tabs { display: flex; gap: 2px; align-items: center; } .otr-nav-tab { background: transparent; border: 0; color: var(--text-muted); padding: 10px 12px; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 999px; white-space: nowrap; transition: all 0.25s ease; } .otr-nav-tab:hover { color: var(--cyan-light); background: rgba(0,184,230,0.06); } .otr-nav-tab.active { color: #fff; background: linear-gradient(135deg, rgba(0,184,230,0.25), rgba(0,121,168,0.15)); box-shadow: 0 0 0 1px rgba(0,184,230,0.4); } .otr-nav-cta { background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); color: #fff !important; padding: 10px 18px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; box-shadow: 0 4px 16px rgba(0,184,230,0.35); transition: all 0.3s ease; } .otr-nav-cta:hover { color: #fff !important; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,184,230,0.55); } .otr-nav-burger { display: none; background: transparent; border: 0; color: var(--cyan-light); font-size: 22px; padding: 8px 12px; } .otr-nav-tab-mobile { display: none; } @media (max-width: 880px) { .otr-nav-tabs, .otr-nav-cta { display: none; } .otr-nav-burger { display: block; } .otr-nav-tabs.is-open .otr-nav-tab-mobile { display: block; } .otr-nav-tabs.is-open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: rgba(0, 3, 8, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 8px 0; border-bottom: 1px solid var(--border-cyan); gap: 0; } .otr-nav-tabs.is-open .otr-nav-tab { width: 100%; text-align: center; padding: 14px; border-radius: 0; } } .otr-tab-section { display: none; min-height: 100vh; padding-top: 80px; } .otr-tab-section.active { display: block; animation: otr-tab-in 0.5s ease-out; } @keyframes otr-tab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .otr-cosmos { position: relative; background: radial-gradient(ellipse at 30% 20%, rgba(0,40,90,0.45) 0%, transparent 55%), radial-gradient(ellipse at 70% 80%, rgba(80,0,160,0.25) 0%, transparent 55%), var(--bg-deep); overflow: hidden; } .otr-nebula { position: absolute; inset: -10%; background: radial-gradient(ellipse 600px 400px at 18% 22%, rgba(60,30,140,0.22) 0%, transparent 70%), radial-gradient(ellipse 500px 380px at 82% 70%, rgba(0,90,180,0.18) 0%, transparent 65%), radial-gradient(ellipse 350px 250px at 55% 90%, rgba(180,40,120,0.10) 0%, transparent 70%); filter: blur(40px); opacity: 0.85; pointer-events: none; z-index: 0; animation: otr-nebula-drift 90s ease-in-out infinite alternate; } @keyframes otr-nebula-drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(20px, -15px) scale(1.05); } } .otr-stars-tiny, .otr-stars-mid { position: absolute; top: 0; left: 0; width: 1px; height: 1px; background: transparent; border-radius: 50%; pointer-events: none; z-index: 1; } .otr-stars-tiny { animation: otr-drift-slow 220s linear infinite; box-shadow: 605px 158px rgba(255,255,255,0.41), 534px 676px rgba(255,255,255,0.23), 1073px 213px rgba(255,255,255,0.51), 2387px 1535px rgba(255,255,255,0.38), 1540px 1550px rgba(255,255,255,0.42), 217px 252px rgba(255,255,255,0.53), 2218px 1601px rgba(255,255,255,0.40), 433px 990px rgba(255,255,255,0.31), 2263px 1478px rgba(255,255,255,0.27), 1990px 840px rgba(255,255,255,0.24), 53px 967px rgba(255,255,255,0.49), 2028px 1225px rgba(255,255,255,0.35), 1405px 1253px rgba(255,255,255,0.45), 1724px 1782px rgba(255,255,255,0.37), 235px 344px rgba(255,255,255,0.37), 304px 1383px rgba(255,255,255,0.42), 1931px 700px rgba(255,255,255,0.29), 652px 34px rgba(255,255,255,0.31), 801px 1589px rgba(255,255,255,0.54), 462px 1568px rgba(255,255,255,0.41), 808px 565px rgba(255,255,255,0.26), 2351px 185px rgba(255,255,255,0.52), 1933px 779px rgba(255,255,255,0.45), 735px 213px rgba(255,255,255,0.39), 281px 438px rgba(255,255,255,0.42), 1674px 883px rgba(255,255,255,0.29), 545px 1249px rgba(255,255,255,0.51), 1960px 1254px rgba(255,255,255,0.50), 963px 275px rgba(255,255,255,0.26), 1295px 1173px rgba(255,255,255,0.55), 1022px 1344px rgba(255,255,255,0.36), 109px 139px rgba(255,255,255,0.49), 2348px 1439px rgba(255,255,255,0.28), 927px 509px rgba(255,255,255,0.38), 2018px 1644px rgba(255,255,255,0.29), 758px 954px rgba(255,255,255,0.31), 969px 22px rgba(255,255,255,0.43), 880px 853px rgba(255,255,255,0.30), 1424px 1261px rgba(255,255,255,0.40), 1448px 417px rgba(255,255,255,0.35), 1003px 1684px rgba(255,255,255,0.30), 2209px 1709px rgba(255,255,255,0.41), 2219px 45px rgba(255,255,255,0.30), 1298px 903px rgba(255,255,255,0.53), 2351px 1273px rgba(255,255,255,0.49), 741px 1015px rgba(255,255,255,0.45), 119px 610px rgba(255,255,255,0.37), 1839px 1750px rgba(255,255,255,0.23), 1381px 545px rgba(255,255,255,0.43), 1603px 841px rgba(255,255,255,0.30), 1730px 910px rgba(255,255,255,0.23), 2026px 1316px rgba(255,255,255,0.52), 1772px 966px rgba(255,255,255,0.55), 2358px 1117px rgba(255,255,255,0.48), 130px 978px rgba(255,255,255,0.42), 598px 1345px rgba(255,255,255,0.23), 2257px 806px rgba(255,255,255,0.34), 1380px 1027px rgba(255,255,255,0.23), 978px 1061px rgba(255,255,255,0.24), 337px 194px rgba(255,255,255,0.30), 677px 1009px rgba(255,255,255,0.36), 2339px 1203px rgba(255,255,255,0.42), 867px 1260px rgba(255,255,255,0.31), 2197px 1587px rgba(255,255,255,0.40), 1572px 1347px rgba(255,255,255,0.41), 665px 264px rgba(255,255,255,0.30), 247px 616px rgba(255,255,255,0.37), 1868px 1159px rgba(255,255,255,0.49), 699px 1246px rgba(255,255,255,0.36), 850px 1315px rgba(255,255,255,0.39), 1808px 1232px rgba(255,255,255,0.31), 1926px 1728px rgba(255,255,255,0.48), 2114px 291px rgba(255,255,255,0.41), 1239px 1255px rgba(255,255,255,0.22), 1049px 94px rgba(255,255,255,0.49), 546px 695px rgba(255,255,255,0.54), 1609px 1089px rgba(255,255,255,0.26), 1199px 1028px rgba(255,255,255,0.53), 347px 276px rgba(255,255,255,0.49), 2322px 1380px rgba(255,255,255,0.26), 537px 1414px rgba(255,255,255,0.51), 2096px 1543px rgba(255,255,255,0.25), 1631px 1674px rgba(255,255,255,0.43), 1382px 1603px rgba(255,255,255,0.47), 1816px 801px rgba(255,255,255,0.48), 571px 899px rgba(255,255,255,0.42), 577px 280px rgba(255,255,255,0.36), 333px 1428px rgba(255,255,255,0.45), 544px 414px rgba(255,255,255,0.25), 1956px 1764px rgba(255,255,255,0.35), 1041px 222px rgba(255,255,255,0.25), 2018px 464px rgba(255,255,255,0.37), 1422px 656px rgba(255,255,255,0.46), 709px 417px rgba(255,255,255,0.54), 1831px 89px rgba(255,255,255,0.50), 441px 552px rgba(255,255,255,0.33), 2210px 1448px rgba(255,255,255,0.37), 118px 1411px rgba(255,255,255,0.36), 2144px 73px rgba(255,255,255,0.45), 219px 1324px rgba(255,255,255,0.31), 621px 1547px rgba(255,255,255,0.45), 146px 1478px rgba(255,255,255,0.28), 572px 1326px rgba(255,255,255,0.28), 932px 1766px rgba(255,255,255,0.47), 1062px 925px rgba(255,255,255,0.46), 470px 111px rgba(255,255,255,0.39), 1586px 1788px rgba(255,255,255,0.30), 921px 1580px rgba(255,255,255,0.41), 651px 1672px rgba(255,255,255,0.53), 1589px 1166px rgba(255,255,255,0.55), 829px 371px rgba(255,255,255,0.47), 1316px 161px rgba(255,255,255,0.25), 1700px 1567px rgba(255,255,255,0.43), 1847px 810px rgba(255,255,255,0.47), 304px 259px rgba(255,255,255,0.34), 1227px 490px rgba(255,255,255,0.29), 96px 66px rgba(255,255,255,0.47), 852px 849px rgba(255,255,255,0.37), 1992px 706px rgba(255,255,255,0.40), 2097px 469px rgba(255,255,255,0.42), 379px 933px rgba(255,255,255,0.29), 1138px 479px rgba(255,255,255,0.55), 996px 1390px rgba(255,255,255,0.55), 1348px 1485px rgba(255,255,255,0.31), 939px 1609px rgba(255,255,255,0.41), 539px 983px rgba(255,255,255,0.32), 2343px 619px rgba(255,255,255,0.26), 1696px 1434px rgba(255,255,255,0.55), 1334px 1198px rgba(255,255,255,0.28), 1943px 724px rgba(255,255,255,0.34), 2130px 1528px rgba(255,255,255,0.45), 704px 1100px rgba(255,255,255,0.27), 359px 90px rgba(255,255,255,0.46), 474px 1438px rgba(255,255,255,0.38), 1552px 1274px rgba(255,255,255,0.26), 117px 1001px rgba(255,255,255,0.46), 2054px 602px rgba(255,255,255,0.35), 2383px 513px rgba(255,255,255,0.48), 509px 1667px rgba(255,255,255,0.32), 764px 517px rgba(255,255,255,0.51), 1887px 534px rgba(255,255,255,0.44), 889px 124px rgba(255,255,255,0.23), 2112px 942px rgba(255,255,255,0.37), 2169px 707px rgba(255,255,255,0.50), 311px 758px rgba(255,255,255,0.38), 457px 1618px rgba(255,255,255,0.32), 2390px 609px rgba(255,255,255,0.42), 246px 118px rgba(255,255,255,0.48), 308px 1594px rgba(255,255,255,0.46), 1551px 739px rgba(255,255,255,0.30), 131px 593px rgba(255,255,255,0.48), 1038px 302px rgba(255,255,255,0.24), 1338px 1026px rgba(255,255,255,0.33), 148px 1560px rgba(255,255,255,0.24), 2342px 1288px rgba(255,255,255,0.51), 1859px 452px rgba(255,255,255,0.41), 307px 1001px rgba(255,255,255,0.43), 1650px 826px rgba(255,255,255,0.29), 1468px 1052px rgba(255,255,255,0.52), 2206px 562px rgba(255,255,255,0.25), 1152px 1545px rgba(255,255,255,0.51), 1484px 1077px rgba(255,255,255,0.33), 1861px 1457px rgba(255,255,255,0.48), 1800px 615px rgba(255,255,255,0.37), 1676px 680px rgba(255,255,255,0.34), 429px 1545px rgba(255,255,255,0.38), 823px 719px rgba(255,255,255,0.34), 1321px 1729px rgba(255,255,255,0.34), 1232px 530px rgba(255,255,255,0.43), 944px 901px rgba(255,255,255,0.27), 536px 1138px rgba(255,255,255,0.55), 398px 1240px rgba(255,255,255,0.51), 1466px 730px rgba(255,255,255,0.42), 964px 1352px rgba(255,255,255,0.40), 580px 1049px rgba(255,255,255,0.52), 17px 1161px rgba(255,255,255,0.26), 1747px 228px rgba(255,255,255,0.45), 2214px 444px rgba(255,255,255,0.50), 565px 1634px rgba(255,255,255,0.29), 311px 1304px rgba(255,255,255,0.37), 1082px 263px rgba(255,255,255,0.54), 306px 594px rgba(255,255,255,0.46), 2188px 1793px rgba(255,255,255,0.32), 2087px 989px rgba(255,255,255,0.42), 2131px 1745px rgba(255,255,255,0.36), 1298px 197px rgba(255,255,255,0.37), 614px 1505px rgba(255,255,255,0.24), 1869px 1341px rgba(255,255,255,0.25), 1542px 1504px rgba(255,255,255,0.38), 1953px 821px rgba(255,255,255,0.39), 1309px 408px rgba(255,255,255,0.53), 1999px 591px rgba(255,255,255,0.51), 1810px 1327px rgba(255,255,255,0.39), 1176px 652px rgba(255,255,255,0.48), 633px 303px rgba(255,255,255,0.55), 373px 477px rgba(255,255,255,0.42), 1275px 962px rgba(255,255,255,0.50), 289px 600px rgba(255,255,255,0.27), 1099px 1022px rgba(255,255,255,0.39), 1771px 878px rgba(255,255,255,0.39), 1077px 707px rgba(255,255,255,0.46), 807px 1319px rgba(255,255,255,0.37), 822px 1072px rgba(255,255,255,0.36), 2137px 1665px rgba(255,255,255,0.43), 1272px 52px rgba(255,255,255,0.28), 1768px 452px rgba(255,255,255,0.31), 455px 568px rgba(255,255,255,0.24), 985px 594px rgba(255,255,255,0.28), 2123px 910px rgba(255,255,255,0.32), 1694px 1669px rgba(255,255,255,0.42), 1943px 810px rgba(255,255,255,0.50), 1682px 1744px rgba(255,255,255,0.43), 789px 988px rgba(255,255,255,0.33), 1240px 694px rgba(255,255,255,0.39), 395px 674px rgba(255,255,255,0.47), 766px 820px rgba(255,255,255,0.53), 608px 1134px rgba(255,255,255,0.42), 786px 387px rgba(255,255,255,0.40), 2186px 1296px rgba(255,255,255,0.54), 1686px 506px rgba(255,255,255,0.41), 399px 535px rgba(255,255,255,0.47), 2242px 1197px rgba(255,255,255,0.39), 2207px 321px rgba(255,255,255,0.49), 95px 1507px rgba(255,255,255,0.31), 1392px 873px rgba(255,255,255,0.46), 936px 131px rgba(255,255,255,0.28), 179px 675px rgba(255,255,255,0.54), 1279px 1771px rgba(255,255,255,0.40), 392px 1425px rgba(255,255,255,0.23), 2025px 1258px rgba(255,255,255,0.28), 2130px 1660px rgba(255,255,255,0.42), 1281px 803px rgba(255,255,255,0.31), 808px 1721px rgba(255,255,255,0.31), 515px 1611px rgba(255,255,255,0.27), 1758px 6px rgba(255,255,255,0.50), 681px 1083px rgba(255,255,255,0.23), 1728px 35px rgba(255,255,255,0.47), 1339px 1381px rgba(255,255,255,0.36), 1796px 194px rgba(255,255,255,0.45), 584px 803px rgba(255,255,255,0.27), 291px 1629px rgba(255,255,255,0.27), 562px 1379px rgba(255,255,255,0.50), 1676px 1378px rgba(255,255,255,0.44), 606px 1414px rgba(255,255,255,0.29), 2336px 726px rgba(255,255,255,0.26), 567px 1569px rgba(255,255,255,0.53), 821px 721px rgba(255,255,255,0.23), 2384px 1714px rgba(255,255,255,0.54), 956px 1425px rgba(255,255,255,0.35), 696px 526px rgba(255,255,255,0.35), 269px 1181px rgba(255,255,255,0.27), 1204px 1077px rgba(255,255,255,0.44), 769px 1045px rgba(255,255,255,0.27), 1403px 1537px rgba(255,255,255,0.45), 341px 1442px rgba(255,255,255,0.24), 1697px 623px rgba(255,255,255,0.55), 719px 200px rgba(255,255,255,0.55), 574px 899px rgba(255,255,255,0.27), 2271px 146px rgba(255,255,255,0.22), 556px 660px rgba(255,255,255,0.42), 5px 1795px rgba(255,255,255,0.32), 2092px 1028px rgba(255,255,255,0.26), 702px 223px rgba(255,255,255,0.24), 2254px 284px rgba(255,255,255,0.52), 1179px 1153px rgba(255,255,255,0.25), 2097px 1428px rgba(255,255,255,0.31), 175px 1344px rgba(255,255,255,0.42), 2318px 165px rgba(255,255,255,0.23), 1794px 554px rgba(255,255,255,0.46), 607px 246px rgba(255,255,255,0.35), 501px 1432px rgba(255,255,255,0.41), 514px 917px rgba(255,255,255,0.46), 242px 899px rgba(255,255,255,0.48), 369px 1760px rgba(255,255,255,0.53), 2153px 1544px rgba(255,255,255,0.40), 1319px 764px rgba(255,255,255,0.38), 1167px 1075px rgba(255,255,255,0.28), 985px 404px rgba(255,255,255,0.32), 1772px 1733px rgba(255,255,255,0.40), 435px 218px rgba(255,255,255,0.50), 1699px 45px rgba(255,255,255,0.36), 1803px 614px rgba(255,255,255,0.38), 1312px 1145px rgba(255,255,255,0.33), 2305px 364px rgba(255,255,255,0.24), 282px 733px rgba(255,255,255,0.31), 1207px 775px rgba(255,255,255,0.53), 2126px 1635px rgba(255,255,255,0.24), 1400px 1580px rgba(255,255,255,0.34), 950px 820px rgba(255,255,255,0.39), 2184px 1446px rgba(255,255,255,0.31), 1514px 257px rgba(255,255,255,0.23), 2235px 986px rgba(255,255,255,0.42), 826px 1039px rgba(255,255,255,0.37), 1034px 1269px rgba(255,255,255,0.35), 242px 1418px rgba(255,255,255,0.46), 80px 1734px rgba(255,255,255,0.51), 2084px 771px rgba(255,255,255,0.31), 1469px 221px rgba(255,255,255,0.36), 1340px 753px rgba(255,255,255,0.32), 924px 960px rgba(255,255,255,0.37); } .otr-stars-mid { animation: otr-drift-slow 200s linear infinite, otr-twink 5s ease-in-out infinite alternate; box-shadow: 658px 464px 1px rgba(255,255,255,0.7), 874px 1161px 0 rgba(255,255,255,0.7), 2089px 484px 1px rgba(255,255,255,0.7), 775px 207px 1px rgba(150,200,255,0.85), 2087px 1469px 1px rgba(255,255,255,0.7), 2261px 471px 1px rgba(255,255,255,0.7), 1523px 8px 0 rgba(255,255,255,0.7), 1508px 445px 1px rgba(255,255,255,0.7), 1773px 737px 0 rgba(255,220,180,0.75), 984px 990px 1px rgba(255,255,255,0.7), 1782px 285px 1px rgba(255,220,180,0.75), 2091px 137px 0 rgba(255,220,180,0.75), 1879px 1030px 0 rgba(255,255,255,0.7), 2145px 1496px 1px rgba(255,255,255,0.7), 2329px 668px 0 rgba(255,255,255,0.7), 517px 287px 0 rgba(150,200,255,0.85), 1452px 794px 0 rgba(255,255,255,0.7), 1915px 976px 1px rgba(255,220,180,0.75), 480px 300px 1px rgba(255,220,180,0.75), 23px 1722px 1px rgba(255,220,180,0.75), 769px 575px 1px rgba(150,200,255,0.85), 1483px 1444px 0 rgba(255,255,255,0.7), 559px 929px 0 rgba(255,255,255,0.7), 1436px 696px 1px rgba(150,200,255,0.85), 887px 424px 0 rgba(150,200,255,0.85), 1805px 1752px 0 rgba(255,255,255,0.7), 1445px 718px 1px rgba(255,255,255,0.7), 329px 709px 0 rgba(255,255,255,0.7), 793px 919px 1px rgba(255,220,180,0.75), 755px 401px 1px rgba(255,220,180,0.75), 920px 657px 1px rgba(255,255,255,0.7), 968px 920px 0 rgba(150,200,255,0.85), 1754px 568px 0 rgba(255,255,255,0.7), 2278px 156px 1px rgba(255,255,255,0.7), 24px 180px 1px rgba(255,255,255,0.7), 1459px 751px 1px rgba(255,220,180,0.75), 2070px 428px 0 rgba(150,200,255,0.85), 1533px 57px 1px rgba(255,255,255,0.7), 202px 1770px 0 rgba(255,220,180,0.75), 504px 912px 1px rgba(150,200,255,0.85), 1418px 1517px 0 rgba(255,220,180,0.75), 1248px 30px 1px rgba(255,220,180,0.75), 455px 1180px 0 rgba(255,255,255,0.7), 1746px 802px 1px rgba(255,255,255,0.7), 409px 424px 1px rgba(150,200,255,0.85), 1671px 104px 0 rgba(255,255,255,0.7), 1688px 1039px 0 rgba(255,255,255,0.7), 1323px 1328px 0 rgba(150,200,255,0.85), 131px 1121px 0 rgba(255,220,180,0.75), 117px 1418px 1px rgba(255,220,180,0.75), 1463px 1067px 0 rgba(255,255,255,0.7), 1815px 518px 1px rgba(255,255,255,0.7), 1706px 1579px 0 rgba(255,255,255,0.7), 116px 38px 0 rgba(255,255,255,0.7), 745px 888px 1px rgba(255,255,255,0.7), 2193px 1728px 0 rgba(255,255,255,0.7), 1034px 178px 0 rgba(255,255,255,0.7), 1371px 567px 1px rgba(255,255,255,0.7), 1058px 1041px 1px rgba(255,255,255,0.7), 2173px 261px 1px rgba(255,255,255,0.7), 345px 321px 0 rgba(255,255,255,0.7), 1699px 958px 0 rgba(150,200,255,0.85), 1628px 394px 0 rgba(150,200,255,0.85), 1765px 574px 0 rgba(255,255,255,0.7), 552px 643px 1px rgba(150,200,255,0.85), 1387px 727px 1px rgba(150,200,255,0.85), 1339px 755px 1px rgba(255,220,180,0.75), 820px 1094px 0 rgba(150,200,255,0.85), 797px 1428px 0 rgba(150,200,255,0.85), 340px 166px 0 rgba(255,220,180,0.75), 680px 688px 0 rgba(150,200,255,0.85), 982px 630px 0 rgba(255,255,255,0.7), 402px 220px 0 rgba(255,255,255,0.7), 28px 1353px 1px rgba(255,255,255,0.7), 1294px 118px 1px rgba(255,255,255,0.7), 440px 1184px 1px rgba(150,200,255,0.85), 820px 34px 0 rgba(150,200,255,0.85), 644px 167px 0 rgba(255,255,255,0.7), 732px 1353px 0 rgba(255,255,255,0.7), 673px 1765px 0 rgba(255,255,255,0.7); } body.otr-paused .otr-stars-far, body.otr-paused .otr-stars-near, body.otr-paused .otr-stars-tiny, body.otr-paused .otr-stars-mid, body.otr-paused .otr-nebula { animation-play-state: paused; } @media (max-width: 760px) { .otr-stars-tiny { display: none; } } .otr-stars-far, .otr-stars-near { position: absolute; top: 0; left: 0; width: 1px; height: 1px; background: transparent; border-radius: 50%; pointer-events: none; z-index: 1; } .otr-stars-far { animation: otr-drift-slow 160s linear infinite, otr-twink 4s ease-in-out infinite alternate; box-shadow: 206px 1119px rgba(255,255,255,0.55), 238px 1744px rgba(255,255,255,0.55), 270px 344px rgba(255,255,255,0.55), 975px 979px rgba(255,255,255,0.55), 1208px 944px rgba(255,255,255,0.55), 356px 1669px rgba(255,255,255,0.55), 532px 1471px rgba(255,255,255,0.55), 1161px 1514px rgba(255,255,255,0.55), 1993px 220px rgba(255,255,255,0.55), 1566px 739px rgba(255,255,255,0.55), 42px 898px rgba(255,255,255,0.55), 1208px 1076px rgba(255,255,255,0.55), 2009px 1755px rgba(255,255,255,0.55), 244px 16px rgba(255,255,255,0.55), 1088px 1750px rgba(255,255,255,0.55), 584px 1730px rgba(255,255,255,0.55), 950px 951px rgba(255,255,255,0.55), 448px 1631px rgba(255,255,255,0.55), 798px 1186px rgba(255,255,255,0.55), 1011px 1082px rgba(255,255,255,0.55), 379px 60px rgba(255,255,255,0.55), 2017px 1531px rgba(255,255,255,0.55), 1684px 1359px rgba(255,255,255,0.55), 982px 395px rgba(255,255,255,0.55), 47px 1739px rgba(255,255,255,0.55), 1093px 768px rgba(255,255,255,0.55), 2349px 415px rgba(255,255,255,0.55), 2093px 404px rgba(255,255,255,0.55), 134px 382px rgba(255,255,255,0.55), 2091px 988px rgba(255,255,255,0.55), 66px 1017px rgba(255,255,255,0.55), 1983px 1290px rgba(255,255,255,0.55), 1725px 1527px rgba(255,255,255,0.55), 10px 914px rgba(255,255,255,0.55), 979px 1452px rgba(255,255,255,0.55), 1272px 617px rgba(255,255,255,0.55), 35px 779px rgba(255,255,255,0.55), 245px 962px rgba(255,255,255,0.55), 214px 866px rgba(255,255,255,0.55), 1115px 1752px rgba(255,255,255,0.55), 1029px 89px rgba(255,255,255,0.55), 868px 1023px rgba(255,255,255,0.55), 1921px 116px rgba(255,255,255,0.55), 2182px 1331px rgba(255,255,255,0.55), 1156px 1713px rgba(255,255,255,0.55), 2252px 770px rgba(255,255,255,0.55), 273px 185px rgba(255,255,255,0.55), 2213px 878px rgba(255,255,255,0.55), 1840px 1798px rgba(255,255,255,0.55), 1052px 1366px rgba(255,255,255,0.55), 440px 662px rgba(255,255,255,0.55), 1848px 24px rgba(255,255,255,0.55), 1620px 955px rgba(255,255,255,0.55), 108px 297px rgba(255,255,255,0.55), 2105px 1652px rgba(255,255,255,0.55), 796px 1736px rgba(255,255,255,0.55), 1283px 175px rgba(255,255,255,0.55), 1220px 945px rgba(255,255,255,0.55), 1028px 963px rgba(255,255,255,0.55), 2140px 156px rgba(255,255,255,0.55), 331px 5px rgba(255,255,255,0.55), 1670px 116px rgba(255,255,255,0.55), 1826px 1032px rgba(255,255,255,0.55), 488px 687px rgba(255,255,255,0.55), 1765px 11px rgba(255,255,255,0.55), 1749px 1551px rgba(255,255,255,0.55), 497px 451px rgba(255,255,255,0.55), 1743px 45px rgba(255,255,255,0.55), 409px 37px rgba(255,255,255,0.55), 1859px 589px rgba(255,255,255,0.55), 963px 754px rgba(255,255,255,0.55), 1765px 274px rgba(255,255,255,0.55), 2320px 1511px rgba(255,255,255,0.55), 2290px 576px rgba(255,255,255,0.55), 1466px 1785px rgba(255,255,255,0.55), 1659px 1600px rgba(255,255,255,0.55), 245px 1344px rgba(255,255,255,0.55), 2173px 819px rgba(255,255,255,0.55), 1957px 1463px rgba(255,255,255,0.55), 336px 776px rgba(255,255,255,0.55), 782px 1765px rgba(255,255,255,0.55), 791px 784px rgba(255,255,255,0.55), 965px 404px rgba(255,255,255,0.55), 1011px 1746px rgba(255,255,255,0.55), 2258px 1626px rgba(255,255,255,0.55), 2299px 799px rgba(255,255,255,0.55), 1275px 1668px rgba(255,255,255,0.55), 1572px 1346px rgba(255,255,255,0.55), 1041px 941px rgba(255,255,255,0.55), 434px 1111px rgba(255,255,255,0.55), 1125px 1604px rgba(255,255,255,0.55), 650px 91px rgba(255,255,255,0.55), 824px 1323px rgba(255,255,255,0.55), 1851px 379px rgba(255,255,255,0.55), 693px 1599px rgba(255,255,255,0.55), 496px 183px rgba(255,255,255,0.55), 1091px 1054px rgba(255,255,255,0.55), 651px 1495px rgba(255,255,255,0.55), 1014px 877px rgba(255,255,255,0.55), 1391px 1449px rgba(255,255,255,0.55), 1897px 140px rgba(255,255,255,0.55), 778px 484px rgba(255,255,255,0.55), 2170px 911px rgba(255,255,255,0.55), 660px 282px rgba(255,255,255,0.55), 938px 109px rgba(255,255,255,0.55), 56px 54px rgba(255,255,255,0.55), 2233px 1036px rgba(255,255,255,0.55), 1649px 1117px rgba(255,255,255,0.55), 275px 718px rgba(255,255,255,0.55), 1556px 423px rgba(255,255,255,0.55), 1218px 807px rgba(255,255,255,0.55), 875px 944px rgba(255,255,255,0.55), 792px 1292px rgba(255,255,255,0.55), 1625px 471px rgba(255,255,255,0.55), 188px 960px rgba(255,255,255,0.55), 2288px 206px rgba(255,255,255,0.55), 611px 518px rgba(255,255,255,0.55), 917px 108px rgba(255,255,255,0.55), 924px 599px rgba(255,255,255,0.55), 1492px 654px rgba(255,255,255,0.55), 2075px 93px rgba(255,255,255,0.55), 1010px 1360px rgba(255,255,255,0.55), 1192px 829px rgba(255,255,255,0.55), 1753px 1734px rgba(255,255,255,0.55), 683px 341px rgba(255,255,255,0.55), 1506px 746px rgba(255,255,255,0.55), 1304px 1097px rgba(255,255,255,0.55), 1235px 1003px rgba(255,255,255,0.55), 1084px 95px rgba(255,255,255,0.55), 141px 1772px rgba(255,255,255,0.55), 51px 1063px rgba(255,255,255,0.55), 36px 1788px rgba(255,255,255,0.55), 495px 1423px rgba(255,255,255,0.55), 1505px 606px rgba(255,255,255,0.55), 2158px 1063px rgba(255,255,255,0.55), 1516px 1764px rgba(255,255,255,0.55), 750px 1790px rgba(255,255,255,0.55), 877px 1327px rgba(255,255,255,0.55), 1225px 603px rgba(255,255,255,0.55), 1241px 457px rgba(255,255,255,0.55), 250px 1499px rgba(255,255,255,0.55), 1653px 1694px rgba(255,255,255,0.55), 1865px 1429px rgba(255,255,255,0.55), 48px 1577px rgba(255,255,255,0.55), 1027px 1304px rgba(255,255,255,0.55), 423px 1605px rgba(255,255,255,0.55), 153px 822px rgba(255,255,255,0.55), 735px 555px rgba(255,255,255,0.55), 2156px 1529px rgba(255,255,255,0.55), 1071px 394px rgba(255,255,255,0.55), 627px 402px rgba(255,255,255,0.55), 613px 1507px rgba(255,255,255,0.55), 2102px 753px rgba(255,255,255,0.55), 1862px 1432px rgba(255,255,255,0.55), 2290px 1489px rgba(255,255,255,0.55), 941px 103px rgba(255,255,255,0.55), 34px 781px rgba(255,255,255,0.55), 669px 1649px rgba(255,255,255,0.55), 1835px 441px rgba(255,255,255,0.55), 1253px 693px rgba(255,255,255,0.55), 1122px 1011px rgba(255,255,255,0.55), 1px 1101px rgba(255,255,255,0.55), 2097px 1271px rgba(255,255,255,0.55), 152px 1310px rgba(255,255,255,0.55), 58px 1026px rgba(255,255,255,0.55), 86px 614px rgba(255,255,255,0.55), 15px 817px rgba(255,255,255,0.55), 289px 1425px rgba(255,255,255,0.55), 405px 530px rgba(255,255,255,0.55), 1306px 997px rgba(255,255,255,0.55), 1941px 898px rgba(255,255,255,0.55), 1879px 755px rgba(255,255,255,0.55), 176px 664px rgba(255,255,255,0.55), 2328px 461px rgba(255,255,255,0.55), 481px 716px rgba(255,255,255,0.55), 1017px 748px rgba(255,255,255,0.55), 2386px 1000px rgba(255,255,255,0.55), 1385px 1577px rgba(255,255,255,0.55), 2337px 428px rgba(255,255,255,0.55), 489px 1659px rgba(255,255,255,0.55), 366px 907px rgba(255,255,255,0.55), 474px 1772px rgba(255,255,255,0.55), 1998px 533px rgba(255,255,255,0.55), 573px 56px rgba(255,255,255,0.55), 217px 696px rgba(255,255,255,0.55), 1875px 1749px rgba(255,255,255,0.55), 620px 1758px rgba(255,255,255,0.55), 1702px 537px rgba(255,255,255,0.55), 1473px 353px rgba(255,255,255,0.55), 133px 353px rgba(255,255,255,0.55), 1973px 19px rgba(255,255,255,0.55), 999px 1652px rgba(255,255,255,0.55), 2392px 916px rgba(255,255,255,0.55), 2069px 1095px rgba(255,255,255,0.55), 697px 986px rgba(255,255,255,0.55), 2056px 895px rgba(255,255,255,0.55), 136px 1208px rgba(255,255,255,0.55), 469px 287px rgba(255,255,255,0.55), 2343px 906px rgba(255,255,255,0.55), 1407px 59px rgba(255,255,255,0.55); } .otr-stars-near { animation: otr-drift-fast 80s linear infinite, otr-twink-near 2s ease-in-out infinite alternate; box-shadow: 1858px 1306px 2px #ffffff, 2065px 93px 2px #ffffff, 992px 1662px 2px #ffffff, 992px 218px 2px #ffffff, 843px 1117px 2px #ffffff, 2279px 881px 2px #ffffff, 2196px 811px 2px #ffffff, 2026px 1508px 2px #ffffff, 425px 27px 2px #ffffff, 166px 967px 2px #ffffff, 1747px 891px 2px #ffffff, 435px 1303px 2px #ffffff, 810px 1672px 2px #ffffff, 1014px 1666px 2px #ffffff, 2294px 1431px 2px #ffffff, 690px 636px 2px #ffffff, 2199px 525px 2px #ffffff, 973px 25px 2px #ffffff, 930px 145px 2px #ffffff, 2333px 673px 2px #ffffff, 1405px 1212px 2px #ffffff, 47px 1775px 2px #ffffff, 2160px 1305px 2px #ffffff, 1533px 502px 2px #ffffff, 181px 310px 2px #ffffff, 2193px 1283px 2px #ffffff, 2002px 149px 2px #ffffff, 1681px 975px 2px #ffffff, 2370px 231px 2px #ffffff, 562px 1331px 2px #ffffff, 70px 436px 2px #ffffff, 2318px 538px 2px #ffffff, 129px 266px 2px #ffffff, 2344px 1386px 2px #ffffff, 1944px 559px 2px #ffffff, 1038px 1041px 2px #ffffff, 2205px 977px 2px #ffffff, 698px 31px 2px #ffffff, 567px 466px 2px #ffffff, 581px 1324px 2px #ffffff, 1419px 1741px 2px #ffffff, 1080px 532px 2px #ffffff, 183px 765px 2px #ffffff, 768px 413px 2px #ffffff, 750px 1278px 2px #ffffff, 1710px 1552px 2px #ffffff, 214px 503px 2px #ffffff, 1317px 942px 2px #ffffff, 2247px 552px 2px #ffffff, 2100px 1676px 2px #ffffff, 1820px 463px 2px #ffffff, 694px 1290px 2px #ffffff, 1937px 362px 2px #ffffff, 337px 1555px 2px #ffffff, 1484px 1415px 2px #ffffff, 1993px 261px 2px #ffffff, 1927px 439px 2px #ffffff, 1937px 1202px 2px #ffffff, 230px 448px 2px #ffffff, 992px 724px 2px #ffffff, 2180px 1679px 2px #ffffff, 2364px 733px 2px #ffffff, 59px 244px 2px #ffffff, 368px 1399px 2px #ffffff, 1879px 1617px 2px #ffffff, 781px 1413px 2px #ffffff, 840px 1676px 2px #ffffff, 1731px 1538px 2px #ffffff, 1790px 487px 2px #ffffff, 1104px 34px 2px #ffffff; } @keyframes otr-drift-slow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -60vh, 0); } } @keyframes otr-drift-fast { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -60vh, 0); } } @keyframes otr-twink { 0%,100% { opacity: 0.45; } 50% { opacity: 0.85; } } @keyframes otr-twink-near { 0%,100% { opacity: 0.65; } 50% { opacity: 1; } } .otr-glow { position: absolute; top: -10%; left: 50%; width: 1100px; height: 1100px; transform: translateX(-50%); background: radial-gradient(circle, rgba(0,184,230,0.32) 0%, rgba(80,216,255,0.16) 30%, transparent 65%); animation: otr-glow-pulse 8s ease-in-out infinite; pointer-events: none; z-index: 1; filter: blur(40px); } @keyframes otr-glow-pulse { 0%,100% { opacity: 0.55; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.15); } } .otr-container { position: relative; z-index: 3; max-width: 1200px; margin: 0 auto; padding: 80px 24px; } @keyframes otr-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .otr-eyebrow { background: linear-gradient(90deg, var(--cyan-light) 0%, #ffffff 50%, var(--cyan-light) 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: otr-shimmer 4s linear infinite; letter-spacing: 5px; text-transform: uppercase; font-weight: 600; font-size: 12px; margin: 0 0 18px; } .otr-h1, .otr-h2 { font-weight: 700; line-height: 1.1; letter-spacing: -1px; margin: 0 0 16px; color: var(--text); } .otr-h1 { font-size: clamp(34px, 5.5vw, 60px); } .otr-h2 { font-size: clamp(28px, 4vw, 44px); } .otr-h1 em, .otr-h2 em { font-style: normal; background: linear-gradient(90deg, var(--cyan), var(--cyan-light), var(--cyan)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: otr-shimmer 5s linear infinite; } .otr-lede { color: var(--text-muted); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.65; max-width: 640px; margin: 0 auto 36px; } .otr-text-center { text-align: center; } .otr-btn-primary, .otr-btn-secondary { display: inline-block; padding: 14px 28px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; transition: all 0.3s ease; border: 0; font-family: inherit; } .otr-btn-primary { background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); color: #fff !important; box-shadow: 0 6px 24px rgba(0,184,230,0.35); } .otr-btn-primary:hover { color: #fff !important; transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 32px rgba(0,184,230,0.6); } .otr-btn-secondary { background: transparent; color: var(--text) !important; border: 2px solid var(--cyan); } .otr-btn-secondary:hover { color: var(--text) !important; background: rgba(0,184,230,0.15); transform: translateY(-2px); } #tab-home .otr-cosmos { min-height: calc(100vh - 80px); } .otr-hero-inner { position: relative; z-index: 3; max-width: 880px; margin: 0 auto; padding: 60px 24px 100px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 80px); } .otr-logo-stage { position: relative; display: inline-block; margin: 0 auto 32px; perspective: 1400px; animation: otr-logo-zoomout 1.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both, otr-logo-tilt 9s ease-in-out infinite 2s; } @keyframes otr-logo-zoomout { 0% { opacity: 0; transform: scale(2.4); filter: blur(14px); } 35% { opacity: 1; } 80% { transform: scale(0.96); filter: blur(0); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } } @keyframes otr-logo-tilt { 0%, 100% { transform: rotateX(0deg) rotateY(0deg) scale(1) translateX(0); } 20% { transform: rotateX(-2deg) rotateY(5deg) scale(1.025) translateX(3px); } 50% { transform: rotateX(0deg) rotateY(0deg) scale(1.05) translateX(0); } 80% { transform: rotateX(2deg) rotateY(-5deg) scale(1.025) translateX(-3px); } } .otr-logo-img { display: block; max-width: 760px; width: 95%; filter: drop-shadow(0 0 12px rgba(80, 216, 255, 0.65)) drop-shadow(0 0 32px rgba(0, 184, 230, 0.45)) drop-shadow(0 0 80px rgba(0, 121, 168, 0.35)) drop-shadow(0 6px 20px rgba(0, 0, 0, 0.45)) brightness(1.08) saturate(1.12) contrast(1.04); image-rendering: -webkit-optimize-contrast; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); } .otr-logo-fallback { display: inline-block; font-size: clamp(56px, 12vw, 120px); font-weight: 900; letter-spacing: 12px; background: linear-gradient(135deg, #b8d8ec, #ffffff, var(--cyan-light), #0079a8); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 60px rgba(0,184,230,0.5); padding: 10px 30px; } .otr-hero-trust { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 11px; letter-spacing: 1.5px; color: var(--text-muted); font-weight: 600; margin-top: 30px; animation: otr-fade-in 1s ease-out 2.2s both; } .otr-hero-trust span:first-child { color: var(--cyan-light); letter-spacing: 0; } @keyframes otr-fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .otr-hero-h1 { animation: otr-fade-in 1s ease-out 1.6s both; } .otr-hero-sub { animation: otr-fade-in 1s ease-out 1.8s both; } .otr-hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 16px; animation: otr-fade-in 1s ease-out 2s both; } .otr-eyebrow-hero { animation: otr-shimmer 4s linear infinite, otr-fade-in 1s ease-out 1.4s both; } .otr-pkg-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; } .otr-pkg-card { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 32px 28px; text-align: left; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: flex; flex-direction: column; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .otr-pkg-card:hover { border-color: var(--cyan); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,184,230,0.28); } .otr-pkg-popular { border-color: var(--cyan); background: linear-gradient(180deg, rgba(0,184,230,0.12), var(--bg-card)); box-shadow: 0 8px 32px rgba(0,184,230,0.25); } .otr-pkg-popular-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); color: #fff; font-size: 10px; letter-spacing: 3px; font-weight: 700; padding: 6px 16px; border-radius: 999px; box-shadow: 0 4px 16px rgba(0,184,230,0.5); white-space: nowrap; } .otr-pkg-name { font-size: 22px; font-weight: 700; margin-bottom: 4px; } .otr-pkg-tag { font-size: 10px; letter-spacing: 2px; font-weight: 700; color: var(--cyan-light); margin-bottom: 18px; } .otr-pkg-prices { background: rgba(0,184,230,0.07); border: 1px solid rgba(0,184,230,0.2); border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; } .otr-pp { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed rgba(80,216,255,0.15); } .otr-pp:last-child { border-bottom: 0; } .otr-pp-l { font-size: 11px; letter-spacing: 1.5px; font-weight: 700; color: var(--text-muted); } .otr-pp-v { font-size: 19px; font-weight: 700; color: var(--cyan-light); } .otr-pkg-feats { list-style: none; padding: 0; margin: 0 0 18px; flex-grow: 1; } .otr-pkg-feats li { position: relative; padding: 6px 0 6px 22px; font-size: 13.5px; line-height: 1.5; color: #b8c5d4; border-bottom: 1px solid rgba(28, 39, 52, 0.6); } .otr-pkg-feats li:last-child { border-bottom: 0; } .otr-pkg-feats li::before { content: "✓"; position: absolute; left: 0; top: 6px; color: var(--cyan); font-weight: 700; } .otr-pkg-time { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; text-align: center; } .otr-pkg-btn { display: block; text-align: center; padding: 12px 18px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; background: transparent; color: var(--text) !important; border: 2px solid var(--cyan); transition: all 0.3s ease; } .otr-pkg-btn:hover { color: var(--text) !important; background: rgba(0,184,230,0.18); transform: translateY(-2px); } .otr-pkg-btn-pop { background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); color: #fff !important; border-color: transparent; box-shadow: 0 4px 20px rgba(0,184,230,0.4); } .otr-pkg-btn-pop:hover { color: #fff !important; transform: translateY(-2px) scale(1.02); } .otr-sysx-stage { position: relative; display: inline-flex; flex-direction: column; align-items: center; margin: 36px auto 16px; padding: 60px 60px 30px; isolation: isolate; min-width: 360px; } .otr-sysx-halo { position: absolute; top: 50%; left: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(80,216,255,0.55) 0%, rgba(0,184,230,0.30) 25%, rgba(0,184,230,0.10) 55%, transparent 75%); filter: blur(34px); z-index: -2; animation: otr-sysx-halo-pulse 4s ease-in-out infinite; } @keyframes otr-sysx-halo-pulse { 0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); } } .otr-sysx-ring { position: absolute; top: 50%; left: 50%; width: 420px; height: 420px; transform: translate(-50%, -50%); border-radius: 50%; background: conic-gradient( from 0deg, transparent 0deg, rgba(80,216,255,0.85) 60deg, transparent 120deg, transparent 240deg, rgba(0,184,230,0.7) 300deg, transparent 360deg ); -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 70%, transparent 73%); mask: radial-gradient(circle, transparent 58%, #000 60%, #000 70%, transparent 73%); filter: blur(1.5px); opacity: 0.7; z-index: -1; animation: otr-sysx-ring-spin 14s linear infinite; } @keyframes otr-sysx-ring-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } .otr-sysx-ring.is-counter { width: 320px; height: 320px; background: conic-gradient( from 90deg, transparent 0deg, rgba(255,255,255,0.6) 50deg, transparent 100deg, transparent 260deg, rgba(80,216,255,0.5) 310deg, transparent 360deg ); -webkit-mask: radial-gradient(circle, transparent 56%, #000 58%, #000 64%, transparent 67%); mask: radial-gradient(circle, transparent 56%, #000 58%, #000 64%, transparent 67%); animation: otr-sysx-ring-counter 18s linear infinite; opacity: 0.55; } @keyframes otr-sysx-ring-counter { from { transform: translate(-50%, -50%) rotate(360deg); } to { transform: translate(-50%, -50%) rotate(0deg); } } .otr-sysx-logo { width: 100%; max-width: 360px; height: auto; display: block; filter: drop-shadow(0 0 22px rgba(80,216,255,0.7)) drop-shadow(0 0 44px rgba(0,184,230,0.45)) drop-shadow(0 10px 28px rgba(0,0,0,0.55)); animation: otr-sysx-pop 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both, otr-sysx-float 5.5s ease-in-out 1.8s infinite; position: relative; z-index: 1; } @keyframes otr-sysx-pop { 0% { opacity: 0; transform: scale(2.4); filter: blur(18px) drop-shadow(0 0 40px rgba(80,216,255,1)); } 50% { opacity: 1; } 80% { transform: scale(0.96); filter: blur(0); } 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 22px rgba(80,216,255,0.7)) drop-shadow(0 0 44px rgba(0,184,230,0.45)) drop-shadow(0 10px 28px rgba(0,0,0,0.55)); } } @keyframes otr-sysx-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.025); } } .otr-sysx-badge { margin-top: 22px; padding: 9px 22px; background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); color: #fff; font-size: 11px; letter-spacing: 3px; font-weight: 800; text-transform: uppercase; border-radius: 999px; box-shadow: 0 6px 24px rgba(0,184,230,0.55); animation: otr-sysx-badge-pulse 2.8s ease-in-out infinite; position: relative; z-index: 1; } @keyframes otr-sysx-badge-pulse { 0%, 100% { box-shadow: 0 6px 24px rgba(0,184,230,0.55), 0 0 0 0 rgba(0,184,230,0.55); } 50% { box-shadow: 0 6px 38px rgba(0,184,230,0.85), 0 0 0 16px rgba(0,184,230,0); } } .otr-sysx-laminate { position: relative; display: inline-block; padding: 26px 38px; border-radius: 22px; background: linear-gradient(135deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.05) 45%, rgba(80,216,255,0.12) 100%); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 18px 48px rgba(0,0,0,0.45), 0 0 32px rgba(80,216,255,0.22), inset 0 1px 0 rgba(255,255,255,0.50), inset 0 -1px 0 rgba(0,0,0,0.18), inset 0 0 24px rgba(255,255,255,0.05); overflow: hidden; isolation: isolate; z-index: 2; animation: otr-sysx-laminate-in 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; } .otr-sysx-laminate::before { content: ""; position: absolute; top: -25%; left: -15%; width: 65%; height: 65%; background: radial-gradient(ellipse at center, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 40%, transparent 70%); pointer-events: none; z-index: 1; } .otr-sysx-laminate::after { content: ""; position: absolute; top: 0; left: -110%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.0) 30%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.0) 70%, transparent 100%); pointer-events: none; z-index: 3; animation: otr-sysx-laminate-shine 5s ease-in-out 2s infinite; } @keyframes otr-sysx-laminate-in { 0% { opacity: 0; transform: scale(0.92) translateY(12px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes otr-sysx-laminate-shine { 0%, 65% { left: -110%; } 100% { left: 200%; } } .otr-sysx-laminate .otr-sysx-logo { position: relative; z-index: 2; } @media (max-width: 600px) { .otr-sysx-laminate { padding: 18px 22px; border-radius: 16px; -webkit-backdrop-filter: blur(6px) saturate(1.2); backdrop-filter: blur(6px) saturate(1.2); } } @media (prefers-reduced-motion: reduce) { .otr-sysx-laminate, .otr-sysx-laminate::after { animation: none !important; } } @media (max-width: 600px) { .otr-sysx-stage { padding: 30px 20px 16px; min-width: 0; } .otr-sysx-halo { width: 320px; height: 320px; filter: blur(20px); } .otr-sysx-ring, .otr-sysx-ring.is-counter { display: none !important; } .otr-sysx-logo { display: block !important; max-width: 240px; width: 80vw; margin-left: auto; margin-right: auto; filter: drop-shadow(0 0 14px rgba(80,216,255,0.6)) drop-shadow(0 6px 18px rgba(0,0,0,0.5)); animation: otr-sysx-pop-mobile 0.8s ease-out 0.1s both !important; transform: none; } @keyframes otr-sysx-pop-mobile { 0% { opacity: 0; transform: scale(0.92); } 100% { opacity: 1; transform: scale(1); } } .otr-sysx-badge { animation: none !important; margin-top: 16px; } } @media (prefers-reduced-motion: reduce) { .otr-sysx-halo, .otr-sysx-ring, .otr-sysx-logo, .otr-sysx-badge { animation: none !important; } } .otr-ceramic-products { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 16px 0 32px; } .otr-ceramic-products span, .otr-ceramic-products a { font-size: 11px; letter-spacing: 3px; font-weight: 700; color: var(--cyan-light); padding: 8px 16px; border: 1px solid rgba(80,216,255,0.3); border-radius: 999px; text-decoration: none; background: rgba(0,184,230,0.06); display: inline-flex; align-items: center; gap: 6px; transition: all 0.25s ease; } .otr-ceramic-products a:hover, .otr-ceramic-products a:focus-visible { color: #fff !important; border-color: var(--cyan); background: rgba(0,184,230,0.18); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,184,230,0.32); } .otr-ceramic-products a:focus-visible { outline: 2px solid var(--cyan-light); outline-offset: 3px; } .otr-ceramic-products a::after { content: "↗"; font-size: 10px; opacity: 0.6; letter-spacing: 0; transition: transform 0.25s ease, opacity 0.25s ease; } .otr-ceramic-products a:hover::after { opacity: 1; transform: translate(2px, -2px); } .otr-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 880px; margin: 0 auto 36px; } .otr-pill { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 24px 20px; transition: border-color 0.3s ease, transform 0.3s ease; } .otr-pill:hover { border-color: var(--cyan); transform: translateY(-4px); } .otr-pill-ico { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 22px; color: #fff; box-shadow: 0 4px 16px rgba(0,184,230,0.3); } .otr-pill h4 { font-size: 16px; font-weight: 700; margin: 0 0 6px; text-align: center; } .otr-pill p { font-size: 13px; line-height: 1.55; color: var(--text-muted); margin: 0; text-align: center; } .otr-ceramic-price-box { display: inline-block; background: rgba(0,184,230,0.08); border: 1px solid rgba(0,184,230,0.3); border-radius: 14px; padding: 20px 28px; margin: 12px auto 24px; } .otr-ceramic-price-box-row { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; } .otr-ceramic-price-tier { text-align: center; } .otr-ceramic-price-tier .l { font-size: 11px; letter-spacing: 2px; color: var(--text-muted); font-weight: 700; } .otr-ceramic-price-tier .v { font-size: 22px; color: var(--cyan-light); font-weight: 700; } .otr-trust-strip { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 24px; } .otr-trust-strip span::before { content: "✓ "; color: var(--cyan-light); margin-right: 4px; } .otr-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; } .otr-gallery-item { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4/5; background: var(--bg-card); transition: transform 0.4s ease, border-color 0.4s ease; } .otr-gallery-item:hover { transform: translateY(-4px); border-color: var(--cyan); } .otr-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .otr-gallery-item:hover img { transform: scale(1.05); } .otr-gallery-cap { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, transparent, rgba(0, 3, 8, 0.85)); padding: 22px 16px 16px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--cyan-light); } .otr-gallery-item[role="button"] { cursor: pointer; } .otr-gallery-item[role="button"]:focus-visible { outline: 2px solid var(--cyan-light); outline-offset: 3px; } .otr-gallery-item.is-hidden { display: none !important; } .otr-gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 28px auto 0; } .otr-gallery-filter { background: rgba(6,9,13,0.6); border: 1px solid var(--border); color: var(--text-muted); padding: 9px 18px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-family: inherit; cursor: pointer; transition: all 0.25s ease; } .otr-gallery-filter:hover { border-color: var(--cyan); color: var(--text); background: rgba(0,184,230,0.10); } .otr-gallery-filter.is-active { background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); border-color: var(--cyan); color: #fff; box-shadow: 0 4px 16px rgba(0,184,230,0.35); } .otr-gallery-empty { text-align: center; color: var(--text-muted); font-size: 14px; padding: 32px 16px; margin-top: 16px; } .otr-gallery-empty p { margin: 0; } @media (max-width: 600px) { .otr-gallery-filter { padding: 8px 14px; font-size: 11px; letter-spacing: 1px; } } .otr-lightbox { position: fixed; inset: 0; background: rgba(0, 3, 8, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 60px 24px; opacity: 0; transition: opacity 0.25s ease; } .otr-lightbox.is-open { opacity: 1; } .otr-lightbox[hidden] { display: none; } .otr-lightbox-stage { position: relative; margin: 0; max-width: 1200px; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; } .otr-lightbox-stage img { max-width: 100%; max-height: 80vh; display: block; border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 60px rgba(0,184,230,0.18); background: #000; transition: opacity 0.2s ease; } .otr-lightbox-stage img.is-loading { opacity: 0.4; } .otr-lightbox-cap { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--cyan-light); text-align: center; } .otr-lightbox-close, .otr-lightbox-prev, .otr-lightbox-next { position: absolute; background: rgba(6,9,13,0.7); border: 1px solid rgba(255,255,255,0.15); color: #fff; border-radius: 50%; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 1; } .otr-lightbox-close:hover, .otr-lightbox-prev:hover, .otr-lightbox-next:hover { background: var(--cyan); border-color: var(--cyan); transform: scale(1.05); } .otr-lightbox-close:focus-visible, .otr-lightbox-prev:focus-visible, .otr-lightbox-next:focus-visible { outline: 2px solid var(--cyan-light); outline-offset: 3px; } .otr-lightbox-close { top: 16px; right: 16px; width: 44px; height: 44px; font-size: 28px; line-height: 1; font-weight: 300; } .otr-lightbox-prev, .otr-lightbox-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 32px; line-height: 1; font-weight: 300; } .otr-lightbox-prev { left: 16px; } .otr-lightbox-next { right: 16px; } .otr-lightbox-prev:hover, .otr-lightbox-next:hover { transform: translateY(-50%) scale(1.05); } .otr-lightbox-prev[disabled], .otr-lightbox-next[disabled] { opacity: 0.3; cursor: not-allowed; pointer-events: none; } .otr-lightbox-counter { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); background: rgba(6,9,13,0.7); padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.10); } @media (max-width: 600px) { .otr-lightbox { padding: 48px 12px; } .otr-lightbox-stage img { max-height: 70vh; } .otr-lightbox-close { top: 8px; right: 8px; width: 40px; height: 40px; font-size: 24px; } .otr-lightbox-prev, .otr-lightbox-next { width: 44px; height: 44px; font-size: 26px; } .otr-lightbox-prev { left: 8px; } .otr-lightbox-next { right: 8px; } .otr-lightbox-counter { bottom: 10px; font-size: 10px; padding: 5px 12px; } } body.otr-modal-open { overflow: hidden; } .otr-about-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 50px; align-items: center; margin-top: 36px; } .otr-about-photo { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--border-cyan); aspect-ratio: 4/5; box-shadow: 0 16px 40px rgba(0,184,230,0.18); } .otr-about-photo img { width: 100%; height: 100%; object-fit: cover; } .otr-about-text { text-align: left; } .otr-about-text p { color: #b8c5d4; font-size: 15px; line-height: 1.7; margin: 0 0 16px; } .otr-about-text p b { color: var(--text); } .otr-about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; } .otr-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 14px; text-align: center; } .otr-stat-num { font-size: 28px; font-weight: 800; color: var(--cyan-light); letter-spacing: -0.5px; } .otr-stat-lbl { font-size: 10px; letter-spacing: 1.5px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; margin-top: 4px; } .otr-faq { max-width: 800px; margin: 60px auto 0; text-align: left; } .otr-faq-head { text-align: center; margin-bottom: 32px; } .otr-faq-list { display: flex; flex-direction: column; gap: 12px; } .otr-faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 0; overflow: hidden; transition: border-color 0.25s ease; } .otr-faq-item[open] { border-color: rgba(0,184,230,0.45); } .otr-faq-q { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: 15px; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 16px; user-select: none; } .otr-faq-q::-webkit-details-marker { display: none; } .otr-faq-q::after { content: "+"; color: var(--cyan-light); font-size: 22px; font-weight: 400; transition: transform 0.25s ease; } .otr-faq-item[open] .otr-faq-q::after { content: "−"; } .otr-faq-a { padding: 0 22px 20px; color: #b8c5d4; font-size: 14px; line-height: 1.7; margin: 0; } .otr-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; } .otr-contact-card { background: var(--bg-card); border: 1px solid var(--border-cyan); border-radius: 18px; padding: 36px 32px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .otr-contact-card h3 { font-size: 22px; font-weight: 700; margin: 0 0 14px; } .otr-contact-list { list-style: none; padding: 0; margin: 24px 0 0; } .otr-contact-list li { padding: 10px 0; border-bottom: 1px solid rgba(28,39,52,0.6); display: flex; align-items: center; gap: 12px; } .otr-contact-list li:last-child { border-bottom: 0; } .otr-contact-list .ico { width: 36px; height: 36px; border-radius: 10px; background: rgba(0,184,230,0.12); display: flex; align-items: center; justify-content: center; color: var(--cyan-light); font-size: 16px; } .otr-contact-list a { color: var(--text); } .otr-contact-list a:hover { color: var(--cyan-light); } .otr-contact-list small { color: var(--text-muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; display: block; } .otr-acuity-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; } .otr-acuity-list a { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: rgba(0,184,230,0.06); border: 1px solid rgba(0,184,230,0.2); border-radius: 10px; color: var(--text) !important; font-size: 13px; font-weight: 600; transition: all 0.25s ease; } .otr-acuity-list a:hover { background: rgba(0,184,230,0.18); transform: translateX(4px); } .otr-acuity-list .price { color: var(--cyan-light); font-weight: 700; } .otr-footer { background: #000; border-top: 1px solid var(--border-cyan); padding: 50px 24px 24px; text-align: center; } .otr-footer-inner { max-width: 1100px; margin: 0 auto; } .otr-footer-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; text-align: left; margin-bottom: 32px; } .otr-footer-col h4 { font-size: 12px; letter-spacing: 2px; color: var(--cyan-light); margin: 0 0 12px; text-transform: uppercase; } .otr-footer-col p, .otr-footer-col a { color: var(--text-muted); font-size: 13px; line-height: 1.7; margin: 0; } .otr-footer-col a { display: block; transition: color 0.2s ease; } .otr-footer-col a:hover { color: var(--cyan-light); } .otr-footer-bottom { border-top: 1px solid rgba(28,39,52,0.6); padding-top: 20px; font-size: 11px; color: var(--text-muted); letter-spacing: 1px; } .otr-privacy { margin-top: 10px; } .otr-privacy summary { display: inline-block; cursor: pointer; list-style: none; color: var(--cyan-light); letter-spacing: 1px; padding: 6px 0; } .otr-privacy summary::-webkit-details-marker { display: none; } .otr-privacy summary:focus-visible { outline: 2px solid var(--cyan-light); outline-offset: 3px; } .otr-privacy-body { max-width: 640px; margin: 10px auto 0; text-align: left; letter-spacing: 0; font-size: 12.5px; line-height: 1.65; } .otr-privacy-body p { margin: 0 0 12px; } .otr-privacy-body strong { color: var(--text); } .otr-privacy-body a { color: var(--cyan-light); display: inline; } .otr-footer-social { display: flex; gap: 14px; justify-content: center; margin: 0 0 28px; } .otr-social-link { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(6,9,13,0.7); border: 1px solid var(--border); color: var(--text-muted) !important; text-decoration: none; transition: all 0.25s ease; } .otr-social-link svg { width: 20px; height: 20px; display: block; } .otr-social-link:hover, .otr-social-link:focus-visible { color: #fff !important; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,184,230,0.45); } .otr-social-link:focus-visible { outline: 2px solid var(--cyan-light); outline-offset: 3px; } .otr-social-link.is-facebook:hover { background: #1877f2; border-color: #1877f2; box-shadow: 0 8px 20px rgba(24,119,242,0.55); } .otr-social-link.is-instagram:hover { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-color: #dc2743; box-shadow: 0 8px 20px rgba(220,39,67,0.55); } .otr-social-link.is-tiktok:hover { background: linear-gradient(135deg, #25f4ee 0%, #fe2c55 100%); border-color: #fe2c55; box-shadow: 0 8px 20px rgba(254,44,85,0.55); } @media (max-width: 880px) { .otr-pkg-cards { grid-template-columns: 1fr; } .otr-pillars { grid-template-columns: 1fr; } .otr-gallery { grid-template-columns: repeat(2, 1fr); } .otr-about-grid { grid-template-columns: 1fr; } .otr-contact-grid { grid-template-columns: 1fr; } .otr-footer-row { grid-template-columns: 1fr; } .otr-container { padding: 60px 20px; } } @media (max-width: 480px) { .otr-gallery { grid-template-columns: 1fr; } .otr-about-stats { grid-template-columns: 1fr; } .otr-hero-ctas { flex-direction: column; align-items: center; } .otr-btn-primary, .otr-btn-secondary { width: 100%; max-width: 320px; text-align: center; } } .otr-areas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; text-align: left; } .otr-area-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 28px 24px; position: relative; display: flex; flex-direction: column; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .otr-area-card:hover { border-color: var(--cyan); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,184,230,0.18); } .otr-area-card:focus-visible { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,184,230,0.45); } .otr-area-card:hover .otr-area-cta { color: #fff; gap: 10px; } .otr-area-card.is-home { background: linear-gradient(135deg, rgba(0,184,230,0.10), rgba(0,121,168,0.04)); border-color: rgba(80,216,255,0.35); } .otr-area-home-tag { position: absolute; top: 18px; right: 18px; font-size: 9px; letter-spacing: 2px; font-weight: 800; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); padding: 4px 10px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,184,230,0.4); } .otr-area-pin { font-size: 24px; margin-bottom: 10px; filter: drop-shadow(0 4px 10px rgba(0,184,230,0.4)); } .otr-area-name { font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 4px; letter-spacing: -0.3px; } .otr-area-county { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cyan-light); font-weight: 700; margin-bottom: 14px; } .otr-area-desc { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0 0 12px; flex: 1; } .otr-area-nearby { font-size: 11px; color: var(--text-muted); margin: 0 0 16px; letter-spacing: 0.2px; line-height: 1.55; } .otr-area-nearby b { color: var(--text); font-weight: 700; } .otr-area-cta { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cyan-light); background: transparent; border: 0; padding: 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; transition: color 0.25s ease, gap 0.25s ease; } .otr-area-cta:hover { color: #fff; gap: 10px; } @media (max-width: 760px) { .otr-areas-grid { grid-template-columns: 1fr; } } .otr-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; text-align: left; } .otr-how-step { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 32px 28px; position: relative; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.3s ease, transform 0.3s ease; } .otr-how-step:hover { border-color: var(--cyan); transform: translateY(-4px); } .otr-how-num { font-size: 14px; font-weight: 800; letter-spacing: 3px; color: var(--cyan-light); margin-bottom: 14px; } .otr-how-step h3 { font-size: 20px; font-weight: 700; margin: 0 0 10px; color: var(--text); } .otr-how-step p { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0; } .otr-vp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; } .otr-vp { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 26px 18px; text-align: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.3s ease, transform 0.3s ease; } .otr-vp:hover { border-color: var(--cyan); transform: translateY(-4px); } .otr-vp-ico { font-size: 36px; margin-bottom: 12px; line-height: 1; } .otr-vp h4 { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: var(--text); } .otr-vp p { font-size: 13px; line-height: 1.55; color: var(--text-muted); margin: 0; } .otr-bf { text-align: left; max-width: 880px; margin: 36px auto 0; } .otr-bf-section { background: var(--bg-card); border: 1px solid rgba(0,184,230,0.18); border-radius: 18px; padding: 36px 32px 32px; margin-bottom: 18px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); position: relative; } .otr-bf-section-num { position: absolute; top: 24px; right: 24px; font-size: 12px; letter-spacing: 3px; font-weight: 800; color: var(--cyan-light); opacity: 0.7; } .otr-bf-section-head h3 { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--text); } .otr-bf-section-head p { font-size: 13px; color: var(--text-muted); margin: 0 0 22px; } .otr-proof { padding-top: 8px; } .otr-proof-stars { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 6px 0 10px; } .otr-proof-stars span { color: var(--cyan-light); font-size: 20px; letter-spacing: 3px; } .otr-proof-stars b { color: #fff; font-size: 20px; font-weight: 800; } .otr-rev { position: relative; display: flex; align-items: center; gap: 10px; max-width: 720px; margin: 28px auto 0; } .otr-rev-window { overflow: hidden; flex: 1 1 auto; border-radius: 18px; } .otr-rev-track { display: flex; transition: transform .55s cubic-bezier(.22,.85,.3,1); will-change: transform; } .otr-rev-card { flex: 0 0 100%; margin: 0; padding: 30px 28px 26px; text-align: left; border: 1px solid rgba(0,184,230,0.24); border-radius: 18px; background: radial-gradient(120% 100% at 50% 0%, rgba(0,184,230,.11), transparent 62%), rgba(255,255,255,0.035); position: relative; min-height: 226px; display: flex; flex-direction: column; gap: 16px; } .otr-rev-card::before { content: "\201C"; position: absolute; top: 6px; right: 20px; font-size: 86px; line-height: 1; color: rgba(0,184,230,.16); pointer-events: none; } .otr-rev-stars span { color: var(--cyan-light); font-size: 14px; letter-spacing: 3px; } .otr-rev-card blockquote { margin: 0; flex: 1 1 auto; font-size: 17px; line-height: 1.62; color: #dbe8ee; } .otr-rev-card figcaption { display: flex; align-items: center; gap: 12px; } .otr-rev-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(140deg, var(--cyan), var(--cyan-dark)); box-shadow: 0 4px 14px rgba(0,184,230,.35); } .otr-rev-who { display: flex; flex-direction: column; line-height: 1.25; } .otr-rev-who b { font-size: 14px; font-weight: 700; color: #fff; } .otr-rev-who small { font-size: 10.5px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-muted); } .otr-rev-nav { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(0,184,230,0.32); background: rgba(255,255,255,0.04); color: var(--cyan-light); font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease, transform .2s ease; } .otr-rev-nav:hover { background: rgba(0,184,230,0.16); color: #fff; transform: scale(1.06); } .otr-rev-dots { display: flex; justify-content: center; gap: 8px; margin: 18px 0 24px; } .otr-rev-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,0.22); transition: background .25s ease, width .25s ease; } .otr-rev-dot.is-active { background: var(--cyan); width: 22px; border-radius: 99px; } .otr-proof-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .otr-proof-ask { margin: 16px 0 0; font-size: 13.5px; color: var(--text-muted); } .otr-proof-ask a { color: var(--cyan-light); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(80,216,255,.35); padding-bottom: 1px; } .otr-proof-ask a:hover { color: #fff; border-bottom-color: #fff; } @media (max-width: 880px) { .otr-rev { gap: 0; margin-top: 22px; } .otr-rev-nav { display: none; } .otr-rev-card { padding: 24px 20px 22px; min-height: 240px; } .otr-rev-card blockquote { font-size: 16px; } .otr-rev-card::before { font-size: 66px; right: 14px; } .otr-proof-actions { flex-direction: column; } .otr-proof-actions > * { width: 100%; } } @media (prefers-reduced-motion: reduce) { .otr-rev-track { transition: none; } } @media (max-width: 880px) { .otr-areas-grid { gap: 12px; } .otr-area-card { padding: 18px 16px; } .otr-area-pin { font-size: 19px; line-height: 26px; margin-bottom: 6px; } .otr-area-name { font-size: 18px; line-height: 26px; } .otr-area-county{ margin-bottom: 9px; } .otr-area-desc { font-size: 13.5px; line-height: 20px; margin-bottom: 9px; } .otr-area-nearby{ line-height: 16px; margin-bottom: 11px; } } .otr-bf-vtype { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; } @media (min-width: 641px) and (max-width: 900px) { .otr-bf-vtype { grid-template-columns: repeat(2, 1fr); } } .otr-bf-vtype-btn { background: rgba(6,9,13,0.7); border: 2px solid var(--border); border-radius: 12px; padding: 18px 12px; text-align: center; font-family: inherit; color: var(--text) !important; cursor: pointer; transition: all 0.25s ease; } .otr-bf-vtype-btn:hover { border-color: rgba(0,184,230,0.5); transform: translateY(-2px); } .otr-bf-vtype-btn.is-selected { border-color: var(--cyan); background: linear-gradient(180deg, rgba(0,184,230,0.16), rgba(6,9,13,0.7)); box-shadow: 0 8px 24px rgba(0,184,230,0.25); } .otr-bf-vtype-ico { font-size: 28px; margin-bottom: 6px; } .otr-bf-vtype-label { font-size: 13px; font-weight: 700; } .otr-bf-vtype-note { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--cyan-light); font-weight: 700; margin-top: 4px; } .otr-bf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .otr-bf-field { display: flex; flex-direction: column; gap: 6px; } .otr-bf-field-full { grid-column: 1 / -1; } .otr-bf-field label { font-size: 11px; letter-spacing: 1.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; } .otr-bf-field input, .otr-bf-field select { background: rgba(6,9,13,0.7); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-size: 15px; color: var(--text) !important; font-family: inherit; width: 100%; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .otr-bf-field input::placeholder { color: #5a6b7d; } .otr-bf-field[hidden] { display: none; } .otr-bf-field select:disabled { opacity: .55; cursor: not-allowed; } .otr-bf-field input:focus, .otr-bf-field select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,184,230,0.15); } .otr-bf-field input[type="date"] { cursor: pointer; padding: 14px 48px 14px 16px; font-size: 15px; font-weight: 600; letter-spacing: 0.4px; border-color: rgba(0,184,230,0.35); background-color: rgba(0,184,230,0.06); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2350d8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px 20px; position: relative; color-scheme: dark; } .otr-bf-field input[type="date"]:hover { border-color: var(--cyan); background-color: rgba(0,184,230,0.12); box-shadow: 0 0 0 3px rgba(0,184,230,0.10); } .otr-bf-field input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; } .otr-bf-field input[type="date"]::-webkit-datetime-edit-text, .otr-bf-field input[type="date"]::-webkit-datetime-edit-month-field, .otr-bf-field input[type="date"]::-webkit-datetime-edit-day-field, .otr-bf-field input[type="date"]::-webkit-datetime-edit-year-field { color: var(--text); } .otr-bf-date-hint { font-size: 11px; color: var(--cyan-light); letter-spacing: 0.5px; margin-top: 4px; opacity: 0.8; } .otr-bf-pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .otr-bf-pkg { position: relative; background: rgba(6,9,13,0.7); border: 2px solid var(--border); border-radius: 12px; padding: 18px 14px; text-align: left; font-family: inherit; color: var(--text) !important; cursor: pointer; transition: all 0.25s ease; } .otr-bf-pkg:hover { border-color: rgba(0,184,230,0.5); transform: translateY(-2px); } .otr-bf-pkg.is-selected { border-color: var(--cyan); background: linear-gradient(180deg, rgba(0,184,230,0.16), rgba(6,9,13,0.7)); box-shadow: 0 8px 24px rgba(0,184,230,0.25); } .otr-bf-pkg.is-selected::after { content: "✓"; position: absolute; top: 10px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,184,230,0.5); animation: otr-bf-check-in 0.3s ease-out; } @keyframes otr-bf-check-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .otr-bf-multi-note { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(80,216,255,0.15); } .otr-bf-multi-hint { display: block; font-size: 12px; color: var(--text-muted); letter-spacing: 0.3px; font-style: italic; } .otr-bf-total-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding: 14px 18px; background: rgba(0,184,230,0.08); border: 1px solid rgba(0,184,230,0.3); border-radius: 12px; } .otr-bf-total-row span { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--text-muted); } .otr-bf-total-row b { font-size: 24px; color: var(--cyan-light); font-weight: 800; letter-spacing: -0.5px; } .otr-bf-pkg-pop { border-color: rgba(0,184,230,0.5); } .otr-bf-pkg-pop-tag { position: absolute; top: -10px; right: 12px; background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); color: #fff; font-size: 9px; letter-spacing: 2px; font-weight: 700; padding: 4px 10px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,184,230,0.45); } .otr-bf-pkg-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .otr-bf-pkg-tag { font-size: 9px; letter-spacing: 1.5px; color: var(--cyan-light); font-weight: 700; margin-bottom: 8px; } .otr-bf-pkg-price { font-size: 18px; font-weight: 700; color: var(--cyan-light); } .otr-bf-time { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; } .otr-bf-time-btn { background: rgba(6,9,13,0.7); border: 2px solid var(--border); border-radius: 12px; padding: 16px 12px; text-align: center; font-family: inherit; color: var(--text) !important; cursor: pointer; font-size: 13px; font-weight: 600; line-height: 1.3; transition: all 0.25s ease; display: flex; flex-direction: column; align-items: center; gap: 6px; } .otr-bf-time-btn:hover { border-color: rgba(0,184,230,0.5); transform: translateY(-2px); } .otr-bf-time-btn.is-selected { border-color: var(--cyan); background: linear-gradient(180deg, rgba(0,184,230,0.16), rgba(6,9,13,0.7)); box-shadow: 0 8px 24px rgba(0,184,230,0.25); } .otr-bf-time-ico { font-size: 22px; } .otr-bf-time-btn span { font-size: 11px; color: var(--text-muted); font-weight: 500; } .otr-bf-time-availability { margin-top: 4px; font-size: 10px; letter-spacing: 1px; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(80,216,255,0.14); color: var(--cyan-light); border: 1px solid rgba(80,216,255,0.30); transition: all 0.25s ease; } .otr-bf-time-availability.is-checking { background: rgba(255,255,255,0.06); color: var(--text-muted); border-color: rgba(255,255,255,0.10); } .otr-bf-time-availability.is-low { background: rgba(245,197,66,0.18); color: #f5c542; border-color: rgba(245,197,66,0.45); } .otr-bf-time-availability.is-full { background: rgba(255,80,80,0.15); color: #ff8888; border-color: rgba(255,80,80,0.4); } .otr-bf-time-btn.is-full { opacity: 0.55; cursor: not-allowed; background: rgba(255,80,80,0.06); } .otr-bf-time-btn.is-full:hover { transform: none; border-color: var(--border); } .otr-bf-time-btn.is-full.is-selected { background: rgba(255,80,80,0.15); } .otr-bf-section textarea { width: 100%; box-sizing: border-box; background: rgba(6,9,13,0.7); border: 1px solid var(--border); border-radius: 8px; padding: 14px; color: var(--text) !important; font-family: inherit; font-size: 14px; resize: vertical; min-height: 80px; } .otr-bf-section textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,184,230,0.15); } .otr-bf-error { display: none; background: rgba(255, 80, 80, 0.1); border: 1px solid rgba(255, 80, 80, 0.4); border-radius: 8px; color: #ff8888; padding: 12px 16px; margin: 0 0 14px; font-size: 13px; } .otr-bf-error.is-visible { display: block; } .otr-bf-submit { display: block; width: 100%; padding: 18px 24px; border-radius: 999px; background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); color: #fff !important; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border: 0; font-family: inherit; cursor: pointer; box-shadow: 0 6px 24px rgba(0,184,230,0.4); transition: all 0.3s ease; } .otr-bf-submit:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 12px 36px rgba(0,184,230,0.65); } .otr-bf-note { text-align: center; font-size: 12px; color: var(--text-muted); margin: 18px 0 0; letter-spacing: 0.3px; line-height: 1.6; } .otr-bf-thanks { max-width: 600px; margin: 60px auto 0; padding: 60px 32px; background: var(--bg-card); border: 1px solid rgba(0,184,230,0.3); border-radius: 22px; text-align: center; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .otr-bf-thanks-ico { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); color: #fff; font-size: 38px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; box-shadow: 0 0 32px rgba(0,184,230,0.5); } .otr-bf-stepper { display: flex; align-items: flex-start; justify-content: space-between; list-style: none; padding: 0; margin: 0 0 28px; position: relative; counter-reset: step; } .otr-bf-stepper::before { content: ""; position: absolute; top: 16px; left: calc(10% + 16px); right: calc(10% + 16px); height: 2px; background: rgba(255,255,255,0.10); z-index: 0; } .otr-bf-stepper::after { content: ""; position: absolute; top: 16px; left: calc(10% + 16px); height: 2px; width: calc((80% - 32px) * var(--otr-bf-progress, 0)); background: linear-gradient(90deg, var(--cyan-dark), var(--cyan)); z-index: 0; transition: width .35s ease; } .otr-bf-stepper-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; z-index: 1; cursor: default; user-select: none; } .otr-bf-stepper-item.is-complete { cursor: pointer; } .otr-bf-stepper-num { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(6,9,13,0.9); border: 2px solid rgba(255,255,255,0.18); color: var(--text-muted); font-size: 13px; font-weight: 700; transition: all .25s ease; } .otr-bf-stepper-label { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); transition: color .25s ease; text-align: center; } .otr-bf-stepper-item.is-active .otr-bf-stepper-num { border-color: var(--cyan); color: var(--cyan-light); box-shadow: 0 0 0 4px rgba(0,184,230,0.18), 0 0 18px rgba(0,184,230,0.45); } .otr-bf-stepper-item.is-active .otr-bf-stepper-label { color: var(--cyan-light); } .otr-bf-stepper-item.is-complete .otr-bf-stepper-num { background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); border-color: var(--cyan); color: #fff; } .otr-bf-stepper-item.is-complete .otr-bf-stepper-num::after { content: "\2713"; font-size: 14px; } .otr-bf-stepper-item.is-complete .otr-bf-stepper-num > * { display: none; } .otr-bf-stepper-item.is-complete .otr-bf-stepper-label { color: var(--text); } .otr-bf-step-counter { display: none; text-align: center; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin: 0 0 18px; } .otr-bf-step-counter b { color: var(--cyan-light); font-weight: 700; } .otr-bf-steps { position: relative; overflow-anchor: none; } .otr-bf-step { display: none; opacity: 0; transform: translateX(20px); transition: opacity .35s ease, transform .35s ease; } .otr-bf-step.is-active { display: block; opacity: 1; transform: translateX(0); } .otr-bf-step.is-leaving { display: block; opacity: 0; transform: translateX(-20px); } .otr-bf-steps.is-back .otr-bf-step.is-leaving { transform: translateX(20px); } .otr-bf-steps.is-back .otr-bf-step { transform: translateX(-20px); } .otr-bf-steps.is-back .otr-bf-step.is-active { transform: translateX(0); } .otr-bf-field.is-invalid input, .otr-bf-field.is-invalid textarea { border-color: rgba(255,120,120,0.7) !important; box-shadow: 0 0 0 3px rgba(255,80,80,0.15) !important; } .otr-bf-field-err { display: none; font-size: 11px; color: #ff8888; margin-top: 4px; letter-spacing: 0.3px; } .otr-bf-field.is-invalid .otr-bf-field-err { display: block; } .otr-bf-nav { display: flex; gap: 12px; margin-top: 24px; } .otr-bf-back, .otr-bf-next, .otr-bf-submit { flex: 1 1 0; padding: 16px 20px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-family: inherit; cursor: pointer; transition: all 0.3s ease; border: 0; } .otr-bf-back { background: transparent; color: var(--text); border: 2px solid rgba(255,255,255,0.15); } .otr-bf-back:hover { border-color: var(--cyan); background: rgba(0,184,230,0.08); } .otr-bf-next { background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); color: #fff; box-shadow: 0 6px 24px rgba(0,184,230,0.4); } .otr-bf-next:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 12px 36px rgba(0,184,230,0.65); } .otr-bf-submit { display: none; width: auto; } .otr-bf-submit.is-visible { display: block; } .otr-bf-back[hidden] { display: none; } .otr-bf-next[hidden] { display: none; } .otr-bf-review-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 28px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .otr-bf-review-card h3 { margin: 0 0 18px; font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; } .otr-bf-review-card dl { display: grid; grid-template-columns: 130px 1fr; gap: 12px 24px; margin: 0; } .otr-bf-review-card dt { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); align-self: start; padding-top: 2px; } .otr-bf-review-card dd { margin: 0; font-size: 14px; color: var(--text); line-height: 1.55; } .otr-bf-review-card dd .otr-bf-review-line { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,0.06); } .otr-bf-review-card dd .otr-bf-review-line:last-child { border-bottom: 0; } .otr-bf-review-card dd b { color: var(--cyan-light); font-weight: 700; } .otr-bf-review-total { font-size: 20px !important; font-weight: 800; color: var(--cyan-light) !important; } .otr-bf-review-edit-hint { margin: 18px 0 0; font-size: 12px; color: var(--text-muted); text-align: center; letter-spacing: 0.3px; } @media (max-width: 600px) { .otr-bf-stepper-label { display: none; } .otr-bf-step-counter { display: block; } .otr-bf-stepper { margin-bottom: 8px; } .otr-bf-stepper-num { width: 28px; height: 28px; font-size: 12px; } .otr-bf-stepper::before, .otr-bf-stepper::after { top: 14px; } .otr-bf-review-card { padding: 20px; } .otr-bf-review-card dl { grid-template-columns: 1fr; gap: 4px 0; } .otr-bf-review-card dt { padding-top: 10px; } .otr-bf-nav { position: sticky; bottom: 0; padding: 14px 0 10px; background: linear-gradient(180deg, transparent, rgba(0,3,8,0.95) 28%); z-index: 5; } } @media (max-width: 760px) { .otr-how-grid { grid-template-columns: 1fr; } .otr-vp-grid { grid-template-columns: repeat(2, 1fr); } .otr-bf-vtype { grid-template-columns: 1fr; } .otr-bf-grid { grid-template-columns: 1fr; } .otr-bf-pkgs { grid-template-columns: 1fr; } .otr-bf-time { grid-template-columns: repeat(2, 1fr); } .otr-bf-section { padding: 28px 22px 24px; } .otr-bf-section-num { top: 18px; right: 18px; font-size: 11px; } } .otr-constellation { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; opacity: 0.85; } .otr-constellation line { stroke: rgba(80, 216, 255, 0.22); stroke-width: 0.8; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(0,184,230,0.3)); animation: otr-line-pulse 7s ease-in-out infinite; } .otr-constellation line:nth-child(3n) { animation-delay: 1s; animation-duration: 5s; } .otr-constellation line:nth-child(3n+1) { animation-delay: 2.5s; animation-duration: 9s; } .otr-constellation circle { fill: rgba(80, 216, 255, 0.85); filter: drop-shadow(0 0 6px rgba(80,216,255,0.95)); animation: otr-cnode-pulse 4s ease-in-out infinite; } .otr-constellation circle:nth-child(3n) { animation-delay: 1s; } .otr-constellation circle:nth-child(3n+1) { animation-delay: 2.5s; } @keyframes otr-line-pulse { 0%, 100% { opacity: 0.35; stroke-width: 0.6; } 50% { opacity: 1; stroke-width: 1.2; } } @keyframes otr-cnode-pulse { 0%, 100% { opacity: 0.55; transform-origin: center; } 50% { opacity: 1; } } .otr-tab-section.active .otr-eyebrow { animation: otr-fade-up 0.7s ease-out 0.05s both; } .otr-tab-section.active .otr-h2 { animation: otr-fade-up 0.7s ease-out 0.15s both; } .otr-tab-section.active .otr-lede { animation: otr-fade-up 0.7s ease-out 0.25s both; } .otr-tab-section.active .otr-pkg-cards, .otr-tab-section.active .otr-how-grid, .otr-tab-section.active .otr-vp-grid, .otr-tab-section.active .otr-pillars, .otr-tab-section.active .otr-gallery, .otr-tab-section.active .otr-bf-section, .otr-tab-section.active .otr-about-grid, .otr-tab-section.active .otr-contact-card { animation: otr-fade-up 0.8s ease-out 0.35s both; } @keyframes otr-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .otr-tab-section.active .otr-pkg-card:nth-child(1) { animation: otr-fade-up 0.7s ease-out 0.40s both; } .otr-tab-section.active .otr-pkg-card:nth-child(2) { animation: otr-fade-up 0.7s ease-out 0.50s both; } .otr-tab-section.active .otr-pkg-card:nth-child(3) { animation: otr-fade-up 0.7s ease-out 0.60s both; } .otr-tab-section.active .otr-pkg-card:nth-child(4) { animation: otr-fade-up 0.7s ease-out 0.70s both; } .otr-tab-section.active .otr-pkg-card:nth-child(5) { animation: otr-fade-up 0.7s ease-out 0.80s both; } .otr-tab-section.active .otr-pkg-card:nth-child(6) { animation: otr-fade-up 0.7s ease-out 0.90s both; } .otr-tab-section.active .otr-how-step:nth-child(1) { animation: otr-fade-up 0.6s ease-out 0.50s both; } .otr-tab-section.active .otr-how-step:nth-child(2) { animation: otr-fade-up 0.6s ease-out 0.60s both; } .otr-tab-section.active .otr-how-step:nth-child(3) { animation: otr-fade-up 0.6s ease-out 0.70s both; } .otr-tab-section.active .otr-vp:nth-child(1) { animation: otr-fade-up 0.6s ease-out 0.50s both; } .otr-tab-section.active .otr-vp:nth-child(2) { animation: otr-fade-up 0.6s ease-out 0.58s both; } .otr-tab-section.active .otr-vp:nth-child(3) { animation: otr-fade-up 0.6s ease-out 0.66s both; } .otr-tab-section.active .otr-vp:nth-child(4) { animation: otr-fade-up 0.6s ease-out 0.74s both; } .otr-tab-section.active .otr-gallery-item:nth-child(1) { animation: otr-fade-up 0.6s ease-out 0.40s both; } .otr-tab-section.active .otr-gallery-item:nth-child(2) { animation: otr-fade-up 0.6s ease-out 0.50s both; } .otr-tab-section.active .otr-gallery-item:nth-child(3) { animation: otr-fade-up 0.6s ease-out 0.60s both; } .otr-tab-section.active .otr-gallery-item:nth-child(4) { animation: otr-fade-up 0.6s ease-out 0.70s both; } .otr-tab-section.active .otr-gallery-item:nth-child(5) { animation: otr-fade-up 0.6s ease-out 0.80s both; } .otr-tab-section.active .otr-gallery-item:nth-child(6) { animation: otr-fade-up 0.6s ease-out 0.90s both; } .otr-pkg-card, .otr-how-step, .otr-vp, .otr-pill, .otr-bf-section { transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease; } .otr-bf-section:focus-within { border-color: rgba(0,184,230,0.45); box-shadow: 0 8px 32px rgba(0,184,230,0.18); } .otr-gallery-item img { transition: transform 0.8s ease, filter 0.4s ease; } .otr-gallery-item:hover img { transform: scale(1.08); filter: brightness(1.1) saturate(1.1); } .otr-btn-primary, .otr-pkg-btn-pop, .otr-bf-submit, .otr-nav-cta { position: relative; overflow: hidden; } .otr-btn-primary::after, .otr-pkg-btn-pop::after, .otr-bf-submit::after, .otr-nav-cta::after { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(110deg, transparent, rgba(255,255,255,0.35), transparent); transition: left 0.7s ease; pointer-events: none; } .otr-btn-primary:hover::after, .otr-pkg-btn-pop:hover::after, .otr-bf-submit:hover::after, .otr-nav-cta:hover::after { left: 200%; } .otr-pp-v, .otr-bf-pkg-price { animation: otr-price-pulse 4s ease-in-out infinite; } @keyframes otr-price-pulse { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 16px rgba(80,216,255,0.55); } } .otr-tab-section.active .otr-eyebrow::after { content: ""; display: block; margin: 8px auto 0; height: 1px; width: 0; background: linear-gradient(90deg, transparent, var(--cyan-light), transparent); animation: otr-eyebrow-line 1.6s ease-out 0.4s forwards; } @keyframes otr-eyebrow-line { from { width: 0; } to { width: 80px; } } .otr-h2 em::after { content: ""; display: block; height: 2px; margin-top: 3px; background: linear-gradient(90deg, var(--cyan), var(--cyan-light), var(--cyan)); background-size: 200% 100%; animation: otr-shimmer 4s linear infinite; border-radius: 2px; opacity: 0.5; } .otr-btn-primary, .otr-bf-submit, .otr-nav-cta { animation: otr-btn-breathe 3s ease-in-out infinite 1s; } @keyframes otr-btn-breathe { 0%, 100% { box-shadow: 0 6px 24px rgba(0,184,230,0.35), 0 0 0 0 rgba(0,184,230,0.4); } 50% { box-shadow: 0 8px 32px rgba(0,184,230,0.55), 0 0 0 6px rgba(0,184,230,0); } } @keyframes otr-tab-flash { 0% { box-shadow: 0 0 0 0 rgba(0,184,230,0.6); } 100% { box-shadow: 0 0 0 12px rgba(0,184,230,0); } } .otr-nav-tab.active::after { content: ""; position: absolute; inset: 0; border-radius: 999px; pointer-events: none; animation: otr-tab-flash 0.6s ease-out; } .otr-nav-tab { position: relative; } .otr-cosmos:hover .otr-constellation circle { animation-duration: 2.5s; } @media (max-width: 880px) { .otr-cursor-glow { display: none; } } .otr-plans-block { margin-top: 80px; padding-top: 60px; border-top: 1px solid rgba(0,184,230,0.18); text-align: center; } .otr-plans-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 36px; text-align: left; } #tab-monthly .otr-plans-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; } #tab-monthly .otr-plan-card { flex: 1 1 280px; max-width: 360px; } .otr-plan-card { position: relative; background: linear-gradient(180deg, rgba(0,184,230,0.10), var(--bg-card)); border: 1px solid rgba(0,184,230,0.3); border-radius: 18px; padding: 36px 32px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .otr-plan-card:hover { border-color: var(--cyan); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,184,230,0.32); } .otr-plan-popular { border-color: var(--cyan); box-shadow: 0 12px 36px rgba(0,184,230,0.32); } .otr-plan-popular-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); color: #fff; font-size: 10px; letter-spacing: 3px; font-weight: 700; padding: 6px 16px; border-radius: 999px; box-shadow: 0 4px 16px rgba(0,184,230,0.5); white-space: nowrap; } .otr-plan-tag { font-size: 10px; letter-spacing: 2px; font-weight: 700; color: var(--cyan-light); margin-bottom: 6px; } .otr-plan-name { font-size: 26px; font-weight: 800; color: var(--text); margin-bottom: 18px; letter-spacing: -0.5px; } .otr-plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; } .otr-plan-amt { font-size: 48px; font-weight: 800; color: var(--cyan-light); letter-spacing: -1.5px; line-height: 1; } .otr-plan-per { font-size: 14px; color: var(--text-muted); font-weight: 500; } .otr-plan-frequency { font-size: 12px; letter-spacing: 1.5px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 22px; font-weight: 600; } .otr-plans-note { font-size: 12px; color: var(--text-muted); margin-top: 24px; letter-spacing: 0.3px; font-style: italic; } .otr-burst-star { position: absolute; width: 4px; height: 4px; background: #ffffff; border-radius: 50%; box-shadow: 0 0 8px rgba(80,216,255,1), 0 0 16px rgba(0,184,230,0.6); animation: otr-burst 1.1s ease-out forwards; pointer-events: none; z-index: 6; --dx: 0px; --dy: 0px; } @keyframes otr-burst { 0% { transform: translate(0,0) scale(0); opacity: 0; } 15% { transform: translate(0,0) scale(1.4); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; } } .otr-burst-ring { position: absolute; width: 8px; height: 8px; border: 2px solid rgba(80,216,255,0.85); border-radius: 50%; transform: translate(-50%,-50%) scale(1); animation: otr-burst-ring-anim 1.1s ease-out forwards; pointer-events: none; z-index: 5; box-shadow: 0 0 16px rgba(80,216,255,0.6); } @keyframes otr-burst-ring-anim { 0% { transform: translate(-50%,-50%) scale(1); opacity: 0.85; border-width: 2px; } 100% { transform: translate(-50%,-50%) scale(28); opacity: 0; border-width: 0.5px; } } @media (max-width: 760px) { .otr-plans-grid { grid-template-columns: 1fr; } #tab-monthly .otr-plan-card { flex-basis: 100%; max-width: 420px; } .otr-plan-amt { font-size: 40px; } } .otr-bf-cat { margin-bottom: 4px; border-bottom: 1px solid rgba(80,216,255,0.12); } .otr-bf-cat:first-of-type { border-top: 1px solid rgba(80,216,255,0.12); } .otr-bf-cat:last-child { margin-bottom: 0; } .otr-bf-cat-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--text); padding: 22px 4px; cursor: pointer; transition: color 0.3s ease, padding 0.3s ease; user-select: none; position: relative; } .otr-bf-cat-head:hover { color: var(--cyan-light); } .otr-bf-cat-head > span:first-child { display: flex; gap: 0; } .otr-bf-cat-ico { display: none; } .otr-bf-cat-head::after { content: ""; display: inline-block; width: 8px; height: 8px; border-right: 1.5px solid var(--cyan-light); border-bottom: 1.5px solid var(--cyan-light); transform: rotate(45deg); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); margin-right: 6px; margin-bottom: 4px; flex-shrink: 0; } .otr-bf-cat.is-collapsed .otr-bf-cat-head::after { transform: rotate(-45deg); } .otr-bf-cat .otr-bf-pkgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-height: 1000px; overflow: hidden; opacity: 1; padding: 4px 0 24px; transition: max-height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease, padding 0.4s ease; } .otr-bf-cat.is-collapsed .otr-bf-pkgs { max-height: 0; opacity: 0; padding: 0; pointer-events: none; } .otr-bf-cat-center .otr-bf-pkgs { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; } .otr-bf-cat-center .otr-bf-pkg { flex: 1 1 240px; max-width: 320px; } @media (max-width: 640px) { .otr-bf-cat-center .otr-bf-pkg { flex-basis: 100%; max-width: none; } } .otr-bf-cat-note { font-size: 12px; line-height: 1.6; color: var(--text-muted); margin: -2px 0 12px; padding: 0 2px; } .otr-bf-cat-note b { color: var(--cyan-light); font-weight: 700; } .otr-reviews-rating { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 36px; flex-wrap: wrap; } .otr-stars { color: #ffd84d; font-size: 24px; letter-spacing: 4px; filter: drop-shadow(0 0 8px rgba(255,216,77,0.5)); } .otr-rating-text { font-size: 13px; letter-spacing: 2px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; } .otr-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 40px; text-align: left; } .otr-review { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; position: relative; } .otr-review:hover { border-color: var(--cyan); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,184,230,0.22); } .otr-review-stars { color: #ffd84d; font-size: 14px; letter-spacing: 2px; margin-bottom: 14px; } .otr-review-text { font-size: 14px; line-height: 1.65; color: #c8d3e0; margin: 0 0 18px; font-style: italic; } .otr-review-author { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(28,39,52,0.6); padding-top: 14px; } .otr-review-name { font-size: 14px; font-weight: 700; color: var(--text); } .otr-review-meta { font-size: 11px; letter-spacing: 1.5px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; } .otr-elfsight-wrap { position: relative; margin: 0 auto 32px; max-width: 1200px; min-height: 240px; border-radius: 16px; overflow: hidden; } .otr-elfsight-fallback { background: linear-gradient(180deg, rgba(0,184,230,0.06), rgba(0,184,230,0.02)); border: 1px dashed rgba(80,216,255,0.3); border-radius: 16px; padding: 36px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .otr-elfsight-fallback-stars { font-size: 28px; color: #f5c542; letter-spacing: 4px; text-shadow: 0 0 14px rgba(245,197,66,0.3); } .otr-elfsight-fallback-text { margin: 0; color: var(--text-muted); font-size: 13px; letter-spacing: 0.4px; max-width: 360px; } .otr-elfsight-wrap.is-loaded .otr-elfsight-fallback { display: none; } .otr-tt { margin: 34px 0 30px; text-align: center; } .otr-tt-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--cyan-light); font-weight: 800; margin-bottom: 10px; } .otr-tt-live { width: 8px; height: 8px; border-radius: 50%; background: #ff3b5c; animation: otr-tt-pulse 2s infinite; } @keyframes otr-tt-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,59,92,0.65); } 70% { box-shadow: 0 0 0 10px rgba(255,59,92,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,92,0); } } .otr-tt-h3 { font-size: 30px; font-weight: 800; color: #fff; margin: 0 0 8px; letter-spacing: -0.5px; } .otr-tt-h3 em { font-style: normal; background: linear-gradient(120deg, #25f4ee, var(--cyan-light) 45%, #ff3b5c); -webkit-background-clip: text; background-clip: text; color: transparent; } .otr-tt-sub { font-size: 14px; line-height: 1.6; color: var(--text-muted); max-width: 560px; margin: 0 auto 26px; } .otr-tt-feed { position: relative; min-height: 120px; } .otr-tt-feed.is-loaded .otr-tt-fallback { display: none; } .otr-tt-phones { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; } .otr-tt-phone { position: relative; width: 190px; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; border: 2px solid rgba(0,184,230,0.35); background: #06090d; box-shadow: 0 18px 50px rgba(0,0,0,0.55); transform: rotate(-4deg); animation: otr-tt-float 6s ease-in-out infinite; transition: transform 0.4s ease, border-color 0.4s ease; } .otr-tt-phone:nth-child(3) { transform: rotate(4deg); animation-delay: -3s; } .otr-tt-phone.is-mid { transform: rotate(0deg) scale(1.08); z-index: 2; border-color: rgba(37,244,238,0.55); animation-delay: -1.5s; } .otr-tt-phone:hover { transform: rotate(0deg) scale(1.1); border-color: var(--cyan); } .otr-tt-phone img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; } @keyframes otr-tt-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } } .otr-tt-play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; background: rgba(6,9,13,0.55); border: 1px solid rgba(255,255,255,0.28); } .otr-tt-play::after { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } .otr-tt-fallback-text { font-size: 13px; color: var(--text-muted); margin: 22px auto 0; max-width: 460px; } .otr-tt-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 13px 26px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #fff !important; text-decoration: none; background: linear-gradient(135deg, #25f4ee, #00b8e6 45%, #ff3b5c); box-shadow: 0 10px 30px rgba(0,184,230,0.35); transition: transform 0.25s ease, box-shadow 0.25s ease; } .otr-tt-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(255,59,92,0.4); } .otr-tt-cta svg { width: 18px; height: 18px; fill: currentColor; } @media (max-width: 700px) { .otr-tt-h3 { font-size: 24px; } .otr-tt-phone { width: 140px; } .otr-tt-phone.is-mid { transform: rotate(0deg) scale(1.04); } } @media (prefers-reduced-motion: reduce) { .otr-tt-phone, .otr-tt-live { animation: none; } } .otr-merch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 44px auto 36px; max-width: 1180px; text-align: left; } .otr-merch-card { position: relative; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--text); transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.3s ease; isolation: isolate; } .otr-merch-card:hover, .otr-merch-card:focus-visible { border-color: var(--cyan); transform: translateY(-6px); box-shadow: 0 22px 56px rgba(0,184,230,0.28), 0 0 0 1px rgba(80,216,255,0.4); color: var(--text); } .otr-merch-card:focus-visible { outline: 2px solid var(--cyan-light); outline-offset: 3px; } .otr-merch-thumb { position: relative; aspect-ratio: 1 / 1; background: radial-gradient(ellipse at 50% 25%, rgba(0,184,230,0.10), transparent 70%), linear-gradient(160deg, #0d1422 0%, #050810 60%, #02050c 100%); overflow: hidden; border-bottom: 1px solid var(--border); } .otr-merch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.2,0.8,0.2,1), filter 0.4s ease; } .otr-merch-card:hover .otr-merch-thumb img { transform: scale(1.06); filter: brightness(1.05) saturate(1.08); } .otr-merch-thumb::after { content: ""; position: absolute; top: 0; left: -110%; width: 60%; height: 100%; background: linear-gradient(110deg, transparent, rgba(80,216,255,0.20), transparent); transition: left 0.8s ease; pointer-events: none; z-index: 2; } .otr-merch-card:hover .otr-merch-thumb::after { left: 220%; } .otr-merch-price { position: absolute; top: 12px; right: 12px; z-index: 3; background: rgba(6,9,13,0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(80,216,255,0.45); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.3px; padding: 7px 12px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,0.4); transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease; } .otr-merch-card:hover .otr-merch-price { background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); border-color: var(--cyan); transform: scale(1.06); box-shadow: 0 8px 22px rgba(0,184,230,0.5); } .otr-merch-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; } .otr-merch-tag { font-size: 10px; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; color: var(--cyan-light); margin: 0; } .otr-merch-name { font-size: 16px; font-weight: 800; letter-spacing: -0.2px; margin: 0; color: #fff; line-height: 1.25; } .otr-merch-name-alt { font-weight: 600; color: var(--text-muted); } .otr-merch-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cyan-light); transition: color 0.25s ease, gap 0.25s ease; margin-top: auto; padding-top: 4px; } .otr-merch-card:hover .otr-merch-cta { color: #fff; gap: 10px; } .otr-merch-shop-all { margin: 16px auto 8px; } .otr-merch-note { margin: 20px auto 0; max-width: 600px; font-size: 12px; color: var(--text-muted); letter-spacing: 0.3px; line-height: 1.6; } @media (max-width: 880px) { .otr-merch-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .otr-merch-name { font-size: 15px; } } @media (max-width: 540px) { .otr-merch-grid { grid-template-columns: 1fr; gap: 14px; } .otr-merch-thumb { aspect-ratio: 4 / 3; } } .otr-review-cta { background: linear-gradient(180deg, rgba(0,184,230,0.08), transparent); border: 1px solid rgba(0,184,230,0.25); border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 20px; } .otr-review-cta-text { margin: 0; color: var(--text-muted); font-size: 14px; } @media (max-width: 880px) { .otr-reviews-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .otr-bf-cat .otr-bf-pkgs { grid-template-columns: 1fr; } } .otr-hero-promo { display: inline-block; margin-top: 18px; padding: 8px 18px; background: linear-gradient(135deg, rgba(0,184,230,0.18), rgba(0,121,168,0.12)); border: 1px solid rgba(0,184,230,0.4); border-radius: 999px; color: var(--cyan-light); font-size: 12px; letter-spacing: 1.5px; font-weight: 600; text-transform: uppercase; animation: otr-fade-in 1s ease-out 2.4s both, otr-promo-glow 3s ease-in-out infinite 2.4s; box-shadow: 0 4px 16px rgba(0,184,230,0.18); } .otr-hero-promo b { color: #ffffff; font-weight: 800; letter-spacing: 2px; margin: 0 2px; } @keyframes otr-promo-glow { 0%, 100% { box-shadow: 0 4px 16px rgba(0,184,230,0.18); } 50% { box-shadow: 0 6px 24px rgba(0,184,230,0.38); } } .otr-promo-bar { position: relative; z-index: 110; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 50px 10px 18px; background: linear-gradient(90deg, rgba(0,184,230,0.95), rgba(0,121,168,0.95)), var(--bg-deep); color: #ffffff; font-size: 13px; letter-spacing: 1.5px; text-align: center; box-shadow: 0 2px 12px rgba(0,184,230,0.35); } .otr-promo-bar.is-hidden { display: none; } .otr-promo-icon { font-size: 14px; color: #ffffff; text-shadow: 0 0 12px rgba(255,255,255,0.7); animation: otr-promo-pulse 2.4s ease-in-out infinite; } @keyframes otr-promo-pulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); } } .otr-promo-text { font-weight: 600; letter-spacing: 0.5px; } .otr-promo-text b { color: #ffffff; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px dashed rgba(255,255,255,0.6); padding-bottom: 1px; } .otr-promo-close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: #ffffff; font-size: 22px; line-height: 1; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; padding: 4px 8px; } .otr-promo-close:hover { opacity: 1; } @media (max-width: 640px) { .otr-promo-bar { font-size: 11px; letter-spacing: 0.5px; padding: 9px 40px 9px 14px; } .otr-promo-close { right: 8px; font-size: 20px; } } .otr-promo-bar + .otr-site-nav { top: var(--promo-bar-h, 0px); } .otr-bf-coupon-row { display: flex; gap: 10px; margin-top: 4px; } .otr-bf-coupon-row input { flex: 1; background: rgba(6,9,13,0.7); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-size: 15px; color: var(--text) !important; font-family: inherit; letter-spacing: 1.5px; text-transform: uppercase; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .otr-bf-coupon-row input::placeholder { color: #5a6b7d; letter-spacing: 0.5px; text-transform: none; } .otr-bf-coupon-row input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,184,230,0.15); } .otr-bf-coupon-btn { background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); color: #fff; border: 0; border-radius: 8px; padding: 0 22px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; font-family: inherit; box-shadow: 0 4px 16px rgba(0,184,230,0.3); transition: all 0.25s ease; } .otr-bf-coupon-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,184,230,0.5); } .otr-bf-coupon-status { margin-top: 10px; padding: 0; font-size: 13px; letter-spacing: 0.3px; display: none; } .otr-bf-coupon-status.is-success { display: block; color: #5cf0a4; background: rgba(80, 240, 164, 0.08); border: 1px solid rgba(80, 240, 164, 0.3); border-radius: 8px; padding: 10px 14px; } .otr-bf-coupon-status.is-success b { color: #ffffff; font-weight: 800; letter-spacing: 1px; } .otr-bf-coupon-status.is-error { display: block; color: #ff8888; background: rgba(255, 80, 80, 0.08); border: 1px solid rgba(255, 80, 80, 0.3); border-radius: 8px; padding: 10px 14px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .otr-nebula { animation: none !important; transform: none !important; } } .otr-gallery-item.otr-gallery-cta { background: linear-gradient(135deg, rgba(0,184,230,0.12), rgba(0,121,168,0.06)); display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; cursor: pointer; } .otr-gallery-cta-inner { display: flex; flex-direction: column; gap: 10px; align-items: center; } .otr-gallery-cta-ico { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,184,230,0.2); border: 1.5px solid rgba(0,184,230,0.5); color: var(--cyan-light); font-size: 22px; margin-bottom: 4px; } .otr-gallery-cta-ttl { font-size: 14px; font-weight: 800; letter-spacing: 0.3px; color: #fff; text-transform: none; } .otr-gallery-cta-sub { font-size: 12px; color: var(--text-muted); letter-spacing: 0.4px; line-height: 1.45; max-width: 220px; } @media (max-width: 760px) { input, select, textarea { font-size: 16px !important; } } @media (max-width: 760px) { .otr-container { padding: 56px 18px; } .otr-hero-inner { padding: 40px 18px 70px; min-height: auto; } .otr-h1 { font-size: clamp(28px, 9vw, 44px); line-height: 1.15; } .otr-h2 { font-size: clamp(24px, 7.5vw, 36px); line-height: 1.18; } .otr-eyebrow { font-size: 11px; letter-spacing: 3px; } .otr-lede { font-size: 15px; line-height: 1.6; } .otr-logo-img { display: block !important; max-width: 92vw; width: 92vw; height: auto; margin-left: auto; margin-right: auto; filter: drop-shadow(0 0 10px rgba(80, 216, 255, 0.55)) drop-shadow(0 0 24px rgba(0, 184, 230, 0.35)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45)); will-change: opacity; transform: none !important; } .otr-logo-stage { display: block !important; width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; animation: otr-logo-zoomout-mobile 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both, otr-logo-breathe-mobile 5s ease-in-out 1.8s infinite !important; perspective: none; } @keyframes otr-logo-zoomout-mobile { 0% { opacity: 0; transform: scale(0.4) translateY(40px); } 20% { opacity: 1; } 65% { transform: scale(1.06) translateY(-3px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes otr-logo-breathe-mobile { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.025) translateY(-2px); } } .otr-logo-stage::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.0) 25%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.0) 75%, transparent 100%); pointer-events: none; z-index: 2; animation: otr-logo-shine-mobile 1.6s ease-out 1.6s 1 forwards; mix-blend-mode: overlay; opacity: 0; } .otr-logo-stage { position: relative; } @keyframes otr-logo-shine-mobile { 0% { left: -120%; opacity: 0; } 20% { opacity: 1; } 100% { left: 220%; opacity: 0; } } .otr-eyebrow-hero { animation: otr-fade-in 0.7s ease-out 0.6s both !important; } .otr-hero-h1 { animation: otr-fade-in 0.7s ease-out 1.1s both !important; } .otr-hero-sub { animation: otr-fade-in 0.7s ease-out 1.4s both !important; } .otr-hero-ctas { animation: otr-fade-in 0.7s ease-out 1.7s both !important; } .otr-hero-trust { animation: otr-fade-in 0.7s ease-out 2.0s both !important; } } @media (max-width: 760px) { .otr-btn-primary, .otr-btn-secondary, .otr-nav-cta, .otr-bf-vtype-btn, .otr-bf-pkg, .otr-bf-time-btn, .otr-bf-back, .otr-bf-next, .otr-bf-submit, .otr-coupon-btn, .otr-bf-coupon-btn { min-height: 48px; padding-top: 14px; padding-bottom: 14px; } .otr-nav-link { min-height: 44px; display: flex; align-items: center; } .otr-bf-stepper-num { min-width: 32px; min-height: 32px; } } html, body { overflow-x: hidden; overflow-x: clip; } img, video, iframe { max-width: 100%; } @media (max-width: 760px) { .otr-cosmos { overflow: hidden; } .otr-pkg-card, .otr-how-step, .otr-vp, .otr-bf-section, .otr-pkg-cards, .otr-bf-grid { max-width: 100%; } } @media (max-width: 600px) { .otr-hero-ctas { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px; width: 100%; max-width: 360px; margin: 16px auto 0 auto !important; padding: 0; text-align: center; } .otr-hero-ctas > * { width: 100%; box-sizing: border-box; text-align: center; display: flex; align-items: center; justify-content: center; } .otr-hero-trust { font-size: 10px; letter-spacing: 1px; justify-content: center; text-align: center; } .otr-hero-inner { align-items: center !important; text-align: center; } .otr-hero-inner > * { margin-left: auto; margin-right: auto; } } @media (max-width: 600px) { .otr-bf-stepper { gap: 0; } .otr-bf-section { padding: 22px 16px 18px; border-radius: 14px; } .otr-bf-cat { padding: 14px; } .otr-bf-pkg { min-height: 88px; padding: 14px; } .otr-bf-time-btn { min-height: 70px; } .otr-bf-coupon-row { flex-direction: column; gap: 8px; } .otr-bf-coupon-row input { width: 100%; } .otr-bf-coupon-btn { width: 100%; } } @media (max-width: 600px) { .otr-about-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; } .otr-stat { padding: 14px 8px; } .otr-stat-num { font-size: 22px; } .otr-footer-inner { padding: 36px 18px 24px; } .otr-faq-q { font-size: 14px; padding: 16px 18px; } .otr-faq-a { padding: 0 18px 16px; font-size: 13.5px; } } @media (max-width: 380px) { .otr-container { padding: 44px 14px; } .otr-h1 { font-size: 30px; } .otr-h2 { font-size: 24px; } .otr-pkg-card { padding: 22px 18px; } .otr-how-step { padding: 22px 18px; } } .otr-pkg-cards.is-4 { grid-template-columns: repeat(2, 1fr); } .otr-pp-range { display: block; text-align: left; } .otr-pp-big { font-size: 34px; font-weight: 800; color: var(--cyan-light); letter-spacing: -1px; line-height: 1.05; } .otr-pp-sub { font-size: 11px; letter-spacing: 1.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-top: 4px; } .otr-pkg-special { display: inline-block; margin: 0 0 10px; font-size: 10px; letter-spacing: 2px; font-weight: 800; padding: 5px 12px; border-radius: 999px; background: rgba(255, 196, 61, 0.12); border: 1px solid rgba(255, 196, 61, 0.55); color: #ffd36b; } .otr-subhead { margin-top: 72px; padding-top: 56px; border-top: 1px solid rgba(0,184,230,0.18); } .otr-addons-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 32px auto 0; max-width: 880px; text-align: left; } .otr-addon-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; } .otr-addon-item b { display: block; font-size: 15px; color: var(--text); margin-bottom: 3px; } .otr-addon-item span.d { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); } .otr-addon-item span.p { font-size: 15px; font-weight: 800; color: var(--cyan-light); white-space: nowrap; } .otr-addons-foot { font-size: 12px; color: var(--text-muted); margin-top: 16px; font-style: italic; } .otr-ceramic-push { position: relative; overflow: hidden; max-width: 880px; margin: 48px auto 0; padding: 30px 28px; border-radius: 18px; text-align: left; border: 1px solid rgba(0,184,230,0.5); background: radial-gradient(120% 140% at 100% 0%, rgba(0,184,230,0.22), transparent 60%), rgba(2,4,10,0.85); display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .otr-ceramic-push h3 { font-size: 24px; margin: 0 0 6px; color: #fff; letter-spacing: -0.4px; } .otr-ceramic-push h3 em { font-style: normal; color: var(--cyan-light); } .otr-ceramic-push p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); max-width: 520px; } .otr-ceramic-push .from { font-size: 12px; letter-spacing: 2px; color: var(--text-muted); font-weight: 700; } .otr-ceramic-push .amt { font-size: 40px; font-weight: 800; color: var(--cyan-light); line-height: 1; margin: 2px 0 12px; } .otr-howitworks-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 880px; margin: 36px auto 0; text-align: left; } .otr-howitworks-mini div { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; font-size: 13px; line-height: 1.55; color: var(--text-muted); } .otr-howitworks-mini b { display: block; color: var(--text); font-size: 14px; margin-bottom: 4px; } .otr-howitworks-mini i { font-style: normal; display: block; font-size: 11px; letter-spacing: 2px; color: var(--cyan-light); font-weight: 800; margin-bottom: 6px; } .otr-one-car { max-width: 880px; margin: 28px auto 0; padding: 16px 20px; border-radius: 14px; background: rgba(255,196,61,0.07); border: 1px solid rgba(255,196,61,0.4); font-size: 14px; line-height: 1.6; color: #f6e3b0; text-align: left; } .otr-one-car b { color: #ffd36b; } #tab-monthly .otr-plans-grid.is-3 { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1040px; margin-left: auto; margin-right: auto; } #tab-monthly .otr-plans-grid.is-3 .otr-plan-card { max-width: none; flex: none; } .otr-plan-amt small { font-size: 16px; font-weight: 700; letter-spacing: 0; margin-right: 4px; color: var(--text-muted); } .otr-plan-name { margin-bottom: 14px; } @media (max-width: 860px) { #tab-monthly .otr-plans-grid.is-3 { grid-template-columns: 1fr; max-width: 420px; } .otr-howitworks-mini { grid-template-columns: 1fr; } } @media (max-width: 640px) { .otr-pkg-cards.is-4 { grid-template-columns: 1fr; } .otr-addons-grid { grid-template-columns: 1fr; } } #tab-book .otr-cosmos { overflow: clip; } .otr-bf-giftbar { display: flex; gap: 14px; align-items: center; cursor: pointer; text-align: left; margin: 0 0 18px; padding: 14px 18px; border-radius: 14px; background: linear-gradient(120deg, rgba(255,196,61,0.12), rgba(255,196,61,0.03)); border: 1.5px solid rgba(255,196,61,0.45); transition: all .2s ease; } .otr-bf-giftbar:hover { border-color: rgba(255,196,61,0.8); } .otr-bf-giftbar input { width: 20px; height: 20px; accent-color: #ffb62e; flex: 0 0 auto; } .otr-bf-giftbar b { display: block; font-size: 15px; color: #ffd36b; } .otr-bf-giftbar small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); margin-top: 2px; } .otr-bf-section[hidden] { display: none; } .otr-giftlink { margin-top: 14px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .4px; color: #ffd36b; background: transparent; border: 1px solid rgba(255,196,61,0.5); padding: 10px 20px; border-radius: 999px; cursor: pointer; transition: all .2s ease; } .otr-giftlink:hover { background: rgba(255,196,61,0.12); border-color: #ffd36b; } .otr-ceramic-push.is-gift { border-color: rgba(255,196,61,0.55); background: radial-gradient(120% 140% at 100% 0%, rgba(255,196,61,0.18), transparent 60%), rgba(2,4,10,0.85); } .otr-ceramic-push.is-gift h3 em { color: #ffd36b; } .otr-tab-section .otr-nebula, .otr-tab-section .otr-stars-tiny, .otr-tab-section .otr-stars-mid, .otr-tab-section .otr-stars-far, .otr-tab-section .otr-stars-near, .otr-tab-section .otr-constellation { display: none; } .otr-tab-section .otr-glow { top: -420px; width: 1000px; height: 700px; filter: blur(60px); animation: none; opacity: .75; background: radial-gradient(ellipse at 50% 40%, rgba(150,225,255,0.34) 0%, rgba(0,184,230,0.12) 38%, transparent 68%); } .otr-tab-section .otr-cosmos { background: radial-gradient(900px 520px at 85% 12%, rgba(0,184,230,0.07), transparent 70%), radial-gradient(800px 520px at 5% 70%, rgba(0,121,168,0.08), transparent 70%), linear-gradient(180deg, #04080f 0%, #060b13 45%, #03060c 100%); } .otr-tab-section .otr-cosmos::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,0.05) 25%, transparent 25%) -3px 0 / 6px 6px, linear-gradient(225deg, rgba(255,255,255,0.05) 25%, transparent 25%) -3px 0 / 6px 6px, linear-gradient(315deg, rgba(0,0,0,0.45) 25%, transparent 25%) 0 0 / 6px 6px, linear-gradient(45deg, rgba(0,0,0,0.45) 25%, transparent 25%) 0 0 / 6px 6px; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.2) 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.2) 100%); } .otr-tab-section .otr-cosmos::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 240' fill='none' stroke='%2350d8ff' stroke-opacity='0.1' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'><path d='M40 184V168C40 152 66 144 118 138L232 102C262 80 304 66 362 64H470C522 66 562 84 602 112L700 126C742 132 760 148 760 170V184H702M612 184H250M162 184H40'/><circle cx='206' cy='184' r='42'/><circle cx='206' cy='184' r='22'/><circle cx='656' cy='184' r='42'/><circle cx='656' cy='184' r='22'/><path d='M270 100C296 84 330 76 372 76H398V112H262ZM416 76H468C506 80 540 96 574 112H416Z'/></svg>") no-repeat 50% 150px / min(880px, 92%) auto, linear-gradient(115deg, transparent 38%, rgba(160,225,255,0.05) 46%, rgba(255,255,255,0.09) 50%, rgba(160,225,255,0.05) 54%, transparent 62%), radial-gradient(circle at 6% 22%, rgba(190,235,255,0.16) 0 2px, transparent 3.5px), radial-gradient(circle at 11% 38%, rgba(190,235,255,0.12) 0 3px, transparent 4.5px), radial-gradient(circle at 4% 56%, rgba(190,235,255,0.14) 0 1.5px, transparent 3px), radial-gradient(circle at 94% 18%, rgba(190,235,255,0.15) 0 2.5px, transparent 4px), radial-gradient(circle at 90% 34%, rgba(190,235,255,0.11) 0 2px, transparent 3.5px), radial-gradient(circle at 96% 52%, rgba(190,235,255,0.14) 0 3px, transparent 4.5px), radial-gradient(circle at 8% 78%, rgba(190,235,255,0.12) 0 2px, transparent 3.5px), radial-gradient(circle at 93% 74%, rgba(190,235,255,0.12) 0 2px, transparent 3.5px); opacity: .85; } #tab-book .otr-bf-section, #tab-book .otr-bf-panel { background: linear-gradient(180deg, rgba(12,19,30,0.94), rgba(6,10,17,0.94)); border: 1px solid rgba(130,180,210,0.16); border-radius: 16px; box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 28px 60px -28px rgba(0,0,0,0.85); } #tab-book .otr-bf-section::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(80,216,255,0.6), transparent); } #tab-book .otr-bf-section-head h3 { letter-spacing: -0.2px; } #tab-book .otr-bf-cat-head { font-size: 11.5px; letter-spacing: 3.5px; color: #cfe3ee; } #tab-book .otr-bf-pkg { background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)); border: 1.5px solid rgba(140,185,210,0.2); border-radius: 14px; } #tab-book .otr-bf-pkg:hover { border-color: rgba(80,216,255,0.6); } #tab-book .otr-bf-pkg.is-selected { border-color: var(--cyan); background: linear-gradient(180deg, rgba(0,184,230,0.2), rgba(0,184,230,0.05)); box-shadow: 0 0 0 1px rgba(0,184,230,0.35), 0 14px 34px -12px rgba(0,184,230,0.45); } #tab-book .otr-bf-bar { background: linear-gradient(180deg, rgba(10,16,26,0.96), rgba(4,8,14,0.97)); border-color: rgba(80,216,255,0.4); } .otr-tab-section .otr-pkg-card:not(.otr-pkg-popular), .otr-tab-section .otr-addon-item, .otr-tab-section .otr-howitworks-mini div, .otr-tab-section .otr-pill, .otr-tab-section .otr-vp, .otr-tab-section .otr-how-step, .otr-tab-section .otr-area-card, .otr-tab-section .otr-faq-item, .otr-tab-section .otr-contact-card { background: linear-gradient(180deg, rgba(12,19,30,0.94), rgba(6,10,17,0.94)); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 50px -28px rgba(0,0,0,0.85); } .otr-tab-section .otr-pkg-card.otr-pkg-popular { box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 24px 60px -24px rgba(0,184,230,0.35); } .otr-sat-pill { display: inline-flex; align-items: center; gap: 9px; margin: 18px auto 0; padding: 9px 18px 9px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, rgba(0,184,230,0.28), rgba(0,121,168,0.14)); border: 1px solid rgba(80,216,255,0.6); box-shadow: 0 0 0 4px rgba(0,184,230,0.08), 0 10px 30px -10px rgba(0,184,230,0.7); } .otr-sat-pill i { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); color: #fff; font-style: normal; font-size: 13px; line-height: 1; } .otr-sat-pill b { color: var(--cyan-light); font-weight: 900; } .otr-sat-pill.is-hero { animation: otr-fade-in 0.7s ease-out 1.9s both; } .otr-sat-band { position: relative; max-width: 1040px; margin: 0 auto; padding: 36px 34px; border-radius: 22px; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: center; background: radial-gradient(120% 140% at 0% 0%, rgba(0,184,230,0.22), transparent 55%), linear-gradient(180deg, rgba(12,19,30,0.95), rgba(6,10,17,0.95)); border: 1px solid rgba(80,216,255,0.5); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 80px -30px rgba(0,184,230,0.55); } .otr-sat-seal { position: relative; width: 190px; height: 190px; border-radius: 50%; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 35% 25%, #4fd6ff 0%, #00b8e6 38%, #00608a 100%); box-shadow: 0 0 0 6px rgba(0,184,230,0.18), 0 0 0 7px rgba(80,216,255,0.55), 0 20px 50px -10px rgba(0,184,230,0.8); } .otr-sat-seal::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,0.55); } .otr-sat-seal b { font-size: 58px; font-weight: 900; line-height: 1; color: #fff; letter-spacing: -2px; text-shadow: 0 3px 14px rgba(0,40,70,0.55); } .otr-sat-seal span { font-size: 10.5px; font-weight: 800; letter-spacing: 2.2px; color: rgba(255,255,255,0.95); text-transform: uppercase; line-height: 1.35; margin-top: 4px; } .otr-sat-seal small { font-size: 12px; color: #ffe39a; letter-spacing: 3px; margin-top: 5px; } .otr-sat-band h2 { margin: 0 0 10px; font-size: 34px; line-height: 1.12; letter-spacing: -0.8px; color: #fff; } .otr-sat-band h2 em { font-style: normal; color: var(--cyan-light); } .otr-sat-band p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.65; color: var(--text-muted); max-width: 560px; } .otr-sat-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 22px; } .otr-sat-stats div { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(140,185,210,0.2); } .otr-sat-stats b { display: block; font-size: 22px; font-weight: 900; color: var(--cyan-light); letter-spacing: -0.5px; line-height: 1.1; } .otr-sat-stats span { display: block; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-top: 3px; } .otr-sat-wrap { padding-top: 24px; padding-bottom: 8px; } .otr-sat-eyebrow { text-align: left; margin-bottom: 10px; } @media (max-width: 760px) { .otr-sat-eyebrow { text-align: center; } } @media (max-width: 560px) { .otr-sat-stats { grid-template-columns: 1fr; } } .otr-bf-sat { margin: 0 0 4px; } @media (max-width: 760px) { .otr-sat-band { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 30px 22px; gap: 24px; } .otr-sat-band p { margin-left: auto; margin-right: auto; } .otr-sat-band h2 { font-size: 27px; } .otr-sat-seal { width: 164px; height: 164px; } .otr-sat-seal b { font-size: 50px; } } @keyframes otr-new-shine { 0% { background-position: -160% 0; } 60%, 100% { background-position: 260% 0; } } .otr-new-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: 2.2px; color: #3b2a00; text-transform: uppercase; background: linear-gradient(110deg, #ffb62e 20%, #fff0b8 40%, #ffd36b 50%, #ffb62e 80%) 0 0 / 250% 100%; animation: otr-new-shine 3.4s ease-in-out infinite; box-shadow: 0 6px 18px -6px rgba(255,182,46,0.8); } .otr-new-banner { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 8px 18px 8px 8px; font-family: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; text-align: left; background: linear-gradient(120deg, rgba(0,184,230,0.22), rgba(0,121,168,0.08)); border: 1px solid rgba(80,216,255,0.55); border-radius: 999px; box-shadow: 0 0 0 4px rgba(0,184,230,0.07), 0 14px 34px -14px rgba(0,184,230,0.75); transition: transform .2s ease, border-color .2s ease; animation: otr-fade-in 0.7s ease-out 2.0s both; } .otr-new-banner:hover { transform: translateY(-2px); border-color: var(--cyan-light); } .otr-new-banner b { color: var(--cyan-light); font-weight: 800; } .otr-new-banner .go { color: var(--cyan-light); font-weight: 800; } @media (max-width: 560px) { .otr-new-banner { font-size: 12.5px; gap: 9px; padding-right: 14px; } .otr-new-banner .go { display: none; } } .otr-members { position: relative; max-width: 1040px; margin: 0 auto; padding: 40px 38px; border-radius: 24px; text-align: left; display: grid; grid-template-columns: 1.05fr 1fr; gap: 38px; align-items: center; overflow: hidden; background: radial-gradient(90% 120% at 100% 0%, rgba(0,184,230,0.24), transparent 60%), radial-gradient(70% 90% at 0% 100%, rgba(255,182,46,0.07), transparent 60%), linear-gradient(180deg, rgba(12,19,30,0.96), rgba(5,9,15,0.96)); border: 1px solid rgba(80,216,255,0.45); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 34px 90px -34px rgba(0,184,230,0.6); } .otr-members .otr-new-tag { margin-bottom: 14px; } .otr-members .otr-eyebrow { text-align: left; margin-bottom: 8px; } .otr-members h2 { margin: 0 0 12px; font-size: 36px; line-height: 1.1; letter-spacing: -1px; color: #fff; } .otr-members h2 em { font-style: normal; color: var(--cyan-light); } .otr-members > div > p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.65; color: var(--text-muted); } .otr-members ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 9px; } .otr-members li { font-size: 14px; color: var(--text); padding-left: 26px; position: relative; } .otr-members li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,184,230,0.2); color: var(--cyan-light); font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; } .otr-members-btns { display: flex; gap: 12px; flex-wrap: wrap; } .otr-members-tiers { display: grid; gap: 12px; } .otr-mtier { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; cursor: pointer; text-align: left; padding: 16px 20px; border-radius: 16px; font-family: inherit; color: var(--text); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); border: 1.5px solid rgba(140,185,210,0.22); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .otr-mtier:hover { transform: translateX(4px); border-color: rgba(80,216,255,0.7); box-shadow: 0 14px 32px -16px rgba(0,184,230,0.6); } .otr-mtier.is-pop { border-color: var(--cyan); background: linear-gradient(180deg, rgba(0,184,230,0.2), rgba(0,184,230,0.05)); box-shadow: 0 0 0 1px rgba(0,184,230,0.3), 0 16px 36px -16px rgba(0,184,230,0.6); } .otr-mtier .n { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; } .otr-mtier .p { font-size: 24px; font-weight: 900; color: var(--cyan-light); letter-spacing: -0.8px; text-align: right; } .otr-mtier .p small { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: 0; } .otr-mtier .d { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); } .otr-mtier .pop { position: absolute; top: -10px; right: 18px; font-size: 9px; font-weight: 900; letter-spacing: 1.8px; padding: 4px 10px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); } @media (max-width: 860px) { .otr-members { grid-template-columns: 1fr; padding: 30px 22px; gap: 28px; } .otr-members h2 { font-size: 29px; } } .otr-promo { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(0,3,8,0.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s ease; overflow-y: auto; } .otr-promo.is-open { display: flex; opacity: 1; } .otr-promo-card { position: relative; width: 100%; max-width: 460px; margin: auto; padding: 26px 26px 22px; border-radius: 24px; text-align: center; overflow: hidden; background: radial-gradient(120% 70% at 50% -10%, rgba(0,184,230,0.34), transparent 65%), linear-gradient(180deg, #0b1320, #05090f); border: 1px solid rgba(80,216,255,0.5); box-shadow: 0 40px 100px -20px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 80px -20px rgba(0,184,230,0.5); transform: translateY(14px) scale(.97); transition: transform .35s cubic-bezier(.2,.9,.3,1); } .otr-promo.is-open .otr-promo-card { transform: none; } .otr-promo-close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; font-size: 22px; line-height: 1; color: #b9cdd6; background: rgba(255,255,255,0.07); z-index: 3; } .otr-promo-close:hover { background: rgba(255,255,255,0.14); color: #fff; } .otr-promo-visual { height: 132px; display: flex; align-items: center; justify-content: center; margin: 8px 0 4px; } .otr-promo-car { width: 100%; max-width: 360px; height: auto; filter: drop-shadow(0 18px 26px rgba(0,0,0,0.7)); } .otr-promo-car .sheen { animation: otr-car-sheen 4.8s ease-in-out infinite; } @keyframes otr-car-sheen { 0% { transform: translateX(0) skewX(-20deg); } 55%, 100% { transform: translateX(1100px) skewX(-20deg); } } .otr-promo-eyebrow { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 10px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 2.6px; color: var(--cyan-light); text-transform: uppercase; } .otr-promo-card h2 { margin: 0 0 8px; font-size: 28px; line-height: 1.12; letter-spacing: -0.8px; color: #fff; } .otr-promo-card h2 em { font-style: normal; color: var(--cyan-light); } .otr-promo-sub { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: #a9c2cc; } .otr-promo-tiers { display: grid; gap: 8px; margin: 0 0 18px; text-align: left; } .otr-promo-tiers div { display: grid; grid-template-columns: 1fr auto; gap: 1px 12px; align-items: baseline; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,0.045); border: 1px solid rgba(140,185,210,0.2); } .otr-promo-tiers div.is-pop { border-color: var(--cyan); background: rgba(0,184,230,0.14); } .otr-promo-tiers b { font-size: 14.5px; color: #fff; } .otr-promo-tiers em { font-style: normal; font-size: 15.5px; font-weight: 900; color: var(--cyan-light); } .otr-promo-tiers span { grid-column: 1 / -1; font-size: 12px; color: #9db4be; } .otr-promo-cta { display: block; width: 100%; padding: 15px 20px; border: 0; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); box-shadow: 0 10px 30px -6px rgba(0,184,230,0.7); transition: transform .2s ease; } .otr-promo-cta:hover { transform: translateY(-2px); } .otr-promo-dismiss { margin-top: 12px; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 13px; color: #7f97a2; } .otr-promo-dismiss:hover { color: #b9cdd6; text-decoration: underline; } .otr-promo-fine { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: #6f858f; } .otr-promo :focus-visible { outline: 2px solid var(--cyan-light); outline-offset: 3px; } @media (max-width: 480px) { .otr-promo-card { padding: 22px 18px 18px; } .otr-promo-card h2 { font-size: 24px; } } @media (prefers-reduced-motion: reduce) { .otr-new-tag, .otr-promo-car .sheen { animation: none; } .otr-promo, .otr-promo-card { transition: none; } } .otr-bf-addon-list { grid-template-columns: repeat(2, 1fr); gap: 12px; } .otr-bf-addon { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; justify-items: stretch; gap: 14px; padding: 14px 16px; border-radius: 14px; text-align: left; cursor: pointer; position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)); border: 1.5px solid rgba(140,185,210,0.18); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; } .otr-bf-addon:hover { border-color: rgba(80,216,255,0.55); transform: translateY(-1px); } .otr-bf-addon:focus-visible { outline: 2px solid var(--cyan-light); outline-offset: 2px; } .otr-bf-addon.is-on { border-color: var(--cyan); background: linear-gradient(180deg, rgba(0,184,230,0.18), rgba(0,184,230,0.05)); box-shadow: 0 0 0 1px rgba(0,184,230,0.3), 0 14px 30px -14px rgba(0,184,230,0.5); } .otr-bf-addon .ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(80,216,255,0.08); border: 1px solid rgba(80,216,255,0.22); color: var(--cyan-light); transition: all .2s ease; } .otr-bf-addon .ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .otr-bf-addon.is-on .ic { background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -4px rgba(0,184,230,0.7); } .otr-bf-addon .tx { min-width: 0; justify-self: start; text-align: left; width: 100%; } .otr-bf-addon .t { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); letter-spacing: -0.1px; } .otr-bf-addon .d { display: block; font-size: 12px; line-height: 1.45; color: var(--text-muted); margin-top: 3px; } .otr-bf-addon .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; } .otr-bf-addon .p { font-size: 14px; font-weight: 800; color: var(--cyan-light); white-space: nowrap; letter-spacing: -0.2px; } .otr-bf-addon .p small { display: block; font-size: 10px; font-weight: 600; color: var(--text-muted); letter-spacing: .8px; text-transform: uppercase; text-align: right; margin-top: 1px; } .otr-bf-addon .sw { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,0.14); transition: background .2s ease; flex: 0 0 auto; } .otr-bf-addon .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.5); transition: transform .2s ease; } .otr-bf-addon.is-on .sw { background: var(--cyan); } .otr-bf-addon.is-on .sw::after { transform: translateX(16px); } .otr-bf-panel h4 { font-size: 16px; letter-spacing: -0.1px; } @media (max-width: 760px) { .otr-bf-addon-list { grid-template-columns: 1fr; } } .otr-bf-stepper.is-3::before { left: calc(16.667% + 16px); right: calc(16.667% + 16px); } .otr-bf-stepper.is-3::after { left: calc(16.667% + 16px); width: calc((66.667% - 32px) * var(--otr-bf-progress, 0)); } .otr-bf-intro-pill { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: rgba(0,184,230,0.08); border: 1px solid rgba(0,184,230,0.3); border-radius: 14px; padding: 14px 16px; margin: 0 0 18px; font-size: 13px; line-height: 1.55; color: var(--text-muted); } .otr-bf-intro-pill b { color: var(--text); } .otr-bf-pkg-price { margin-top: 2px; } .otr-bf-pkg-desc { font-size: 12px; line-height: 1.45; color: var(--text-muted); margin: 4px 0 10px; } .otr-bf-pkg-meta { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; font-weight: 600; } .otr-bf-pkg-special { position: absolute; top: -10px; left: 12px; font-size: 9px; letter-spacing: 1.6px; font-weight: 800; color: #3b2a00; background: linear-gradient(135deg, #ffd36b, #ffb62e); padding: 4px 10px; border-radius: 999px; } .otr-bf-pkg.is-disabled { opacity: .45; } .otr-bf-panel { margin: 4px 0 22px; padding: 20px; border-radius: 14px; text-align: left; background: rgba(6,9,13,0.6); border: 1px solid rgba(0,184,230,0.28); animation: otr-bf-panel-in .3s ease-out; } .otr-bf-panel[hidden] { display: none; } @keyframes otr-bf-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .otr-bf-panel h4 { margin: 0 0 4px; font-size: 15px; color: var(--text); } .otr-bf-panel > p { margin: 0 0 14px; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); } .otr-bf-seg { display: inline-flex; border: 1px solid rgba(0,184,230,0.4); border-radius: 999px; overflow: hidden; margin-bottom: 14px; } .otr-bf-seg button { font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 10px 18px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; } .otr-bf-seg button.is-on { background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); color: #fff; } .otr-bf-chips { display: flex; flex-wrap: wrap; gap: 8px; } .otr-bf-chip { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); padding: 9px 14px; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.16); transition: all .2s ease; } .otr-bf-chip:hover { border-color: rgba(0,184,230,0.6); } .otr-bf-chip.is-on { background: rgba(0,184,230,0.2); border-color: var(--cyan); color: #fff; } .otr-bf-chip.is-on::before { content: "\2713\00a0"; color: var(--cyan-light); } .otr-bf-addon-list { display: grid; gap: 8px; } .otr-bf-addon { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left; width: 100%; font-family: inherit; color: var(--text); padding: 13px 16px; border-radius: 12px; cursor: pointer; background: rgba(255,255,255,0.03); border: 1.5px solid var(--border); transition: all .2s ease; } .otr-bf-addon:hover { border-color: rgba(0,184,230,0.5); } .otr-bf-addon.is-on { border-color: var(--cyan); background: rgba(0,184,230,0.14); } .otr-bf-addon .t { display: block; font-size: 14px; font-weight: 700; } .otr-bf-addon .d { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; } .otr-bf-addon .p { font-size: 14px; font-weight: 800; color: var(--cyan-light); white-space: nowrap; } .otr-bf-addon .box { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-size: 13px; color: transparent; margin-right: 2px; } .otr-bf-addon.is-on .box { background: var(--cyan); border-color: var(--cyan); color: #fff; } .otr-bf-addon .l { display: flex; align-items: center; gap: 12px; min-width: 0; } .otr-bf-nudge { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; text-align: left; background: rgba(255,196,61,0.08); border: 1px solid rgba(255,196,61,0.42); font-size: 13px; line-height: 1.55; color: #f6e3b0; animation: otr-bf-panel-in .3s ease-out; } .otr-bf-nudge[hidden] { display: none; } .otr-bf-nudge b { color: #ffd36b; } .otr-bf-nudge button { font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; border: 0; cursor: pointer; color: #3b2a00; background: linear-gradient(135deg, #ffd36b, #ffb62e); white-space: nowrap; } .otr-bf-nudge.is-ceramic { background: linear-gradient(120deg, rgba(0,184,230,0.2), rgba(0,184,230,0.06)); border-color: rgba(0,184,230,0.6); color: var(--text); } .otr-bf-nudge.is-ceramic b { color: var(--cyan-light); } .otr-bf-nudge.is-ceramic button { color: #fff; background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); } .otr-bf-bar { position: sticky; bottom: 12px; z-index: 20; margin-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 18px; background: rgba(2,5,12,0.94); border: 1px solid rgba(0,184,230,0.45); box-shadow: 0 -6px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,184,230,0.08); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .otr-bf-est { flex: 1 1 190px; min-width: 0; text-align: left; } .otr-bf-est-l { font-size: 10.5px; letter-spacing: 2px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; } .otr-bf-est-v { font-size: 26px; font-weight: 800; color: var(--cyan-light); letter-spacing: -0.5px; line-height: 1.1; } .otr-bf-est-v small { font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; margin-left: 6px; } .otr-bf-est-s { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.35; } .otr-bf-bar .otr-bf-nav { margin: 0; flex: 1 1 260px; } .otr-bf-bar .otr-bf-back, .otr-bf-bar .otr-bf-next, .otr-bf-bar .otr-bf-submit { padding: 14px 18px; } @media (max-width: 560px) { .otr-bf-bar { bottom: 8px; padding: 10px 12px; gap: 10px; flex-wrap: nowrap; border-radius: 16px; } .otr-bf-est { flex: 1 1 auto; } .otr-bf-est-l { font-size: 9.5px; letter-spacing: 1.5px; } .otr-bf-est-v { font-size: 21px; } .otr-bf-est-v small { display: block; margin: 0; font-size: 10.5px; } .otr-bf-est-s { display: none; } .otr-bf-bar .otr-bf-nav { flex: 0 0 auto; gap: 8px; } .otr-bf-bar .otr-bf-back, .otr-bf-bar .otr-bf-next, .otr-bf-bar .otr-bf-submit { flex: 0 0 auto; padding: 13px 18px; font-size: 12px; letter-spacing: 1px; white-space: nowrap; } .otr-bf-bar .otr-bf-back { padding: 13px 14px; } } .otr-bf-sum { text-align: left; } .otr-bf-sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed rgba(80,216,255,0.16); font-size: 14px; } .otr-bf-sum-row:last-child { border-bottom: 0; } .otr-bf-sum-row span { color: var(--text-muted); } .otr-bf-sum-row b { color: var(--text); text-align: right; font-weight: 600; } .otr-bf-sum-total b { color: var(--cyan-light); font-size: 20px; font-weight: 800; } .otr-bf-sum-note { font-size: 12px; line-height: 1.55; color: var(--text-muted); margin: 12px 0 0; } .otr-bf-ack { display: flex; gap: 12px; align-items: flex-start; text-align: left; cursor: pointer; padding: 14px 16px; border-radius: 12px; font-size: 13px; line-height: 1.55; color: #f6e3b0; background: rgba(255,196,61,0.07); border: 1.5px solid rgba(255,196,61,0.4); } .otr-bf-ack input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--cyan); flex: 0 0 auto; } .otr-bf-ack.is-invalid { border-color: rgba(255,120,120,0.8); box-shadow: 0 0 0 3px rgba(255,80,80,0.15); } .otr-bf-ack[hidden] { display: none; } .otr-bf-field select { width: 100%; padding: 14px 16px; border-radius: 12px; font-family: inherit; font-size: 15px; } .otr-bf-empty { font-size: 13px; color: var(--text-muted); font-style: italic; padding: 6px 2px; } :root { --cyan: #1aa7d1; --cyan-light: #86d6ec; --cyan-dark: #0b6a8f; --silver: #d9e3ea; --chrome: linear-gradient(180deg, #ffffff 0%, #cfdde6 45%, #8ea3b2 100%); --text-muted: #9fb0bd; } body { letter-spacing: 0.005em; } .otr-h1, .otr-h2 { font-weight: 600; letter-spacing: -0.6px; } .otr-h1 em, .otr-h2 em, .otr-hero-h1 em, .otr-sat-band h2 em, .otr-members h2 em, .otr-promo-card h2 em, .otr-ceramic-push h3 em { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 500; letter-spacing: -0.2px; background: linear-gradient(180deg, #ffffff 0%, #bfe6f3 50%, #86d6ec 100%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: none; } .otr-sat-band h2 em, .otr-members h2 em, .otr-promo-card h2 em, .otr-ceramic-push h3 em { background-size: auto; } .otr-eyebrow { background: none; animation: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--silver); font-weight: 600; font-size: 11px; letter-spacing: 6px; } .otr-container > .otr-eyebrow, .otr-subhead > .otr-eyebrow, .otr-hero-inner > .otr-eyebrow { display: flex; align-items: center; justify-content: center; gap: 16px; } .otr-container > .otr-eyebrow::before, .otr-container > .otr-eyebrow::after, .otr-subhead > .otr-eyebrow::before, .otr-subhead > .otr-eyebrow::after, .otr-hero-inner > .otr-eyebrow::before, .otr-hero-inner > .otr-eyebrow::after { content: ""; flex: 0 1 56px; height: 1px; background: linear-gradient(90deg, transparent, rgba(217,227,234,0.55)); } .otr-container > .otr-eyebrow::after, .otr-subhead > .otr-eyebrow::after, .otr-hero-inner > .otr-eyebrow::after { background: linear-gradient(270deg, transparent, rgba(217,227,234,0.55)); } .otr-tab-section.active .otr-eyebrow::after { position: static; } .otr-lede { color: #a7b7c3; } .otr-btn-primary, .otr-pkg-btn-pop, .otr-bf-next, .otr-bf-submit, .otr-nav-cta, .otr-promo-cta, .otr-sticky-book { background: linear-gradient(180deg, #2db6de 0%, #0e7ba3 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.38) inset, 0 10px 24px -10px rgba(10,120,165,0.65); letter-spacing: 2px; font-weight: 700; } .otr-btn-primary:hover, .otr-bf-next:hover, .otr-bf-submit:hover, .otr-promo-cta:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 14px 28px -10px rgba(10,120,165,0.8); } .otr-btn-primary::after, .otr-pkg-btn-pop::after, .otr-bf-submit::after, .otr-nav-cta::after { opacity: .35; } .otr-btn-secondary, .otr-pkg-btn { border: 1px solid rgba(217,227,234,0.45); color: var(--silver) !important; background: rgba(255,255,255,0.02); letter-spacing: 2px; } .otr-btn-secondary:hover, .otr-pkg-btn:hover { border-color: var(--cyan-light); background: rgba(134,214,236,0.08); color: #fff !important; } .otr-bf-back { border-width: 1px; } .otr-glow { opacity: .45; animation: none; } .otr-burst-star { display: none !important; } .otr-logo-img { filter: drop-shadow(0 0 26px rgba(134,214,236,0.28)) drop-shadow(0 14px 28px rgba(0,0,0,0.65)) brightness(1.05) saturate(1.05); } .otr-pkg-card:hover, .otr-plan-card:hover, .otr-pill:hover { box-shadow: 0 18px 40px -22px rgba(0,0,0,0.9); transform: translateY(-3px); } .otr-plan-popular, .otr-pkg-popular { box-shadow: 0 18px 44px -26px rgba(26,167,209,0.5); } .otr-plan-popular-tag, .otr-pkg-popular-tag, .otr-bf-pkg-pop-tag { box-shadow: none; letter-spacing: 2.4px; } .otr-new-banner, .otr-sat-pill { box-shadow: 0 10px 26px -14px rgba(26,167,209,0.6); } .otr-sat-band, .otr-members { box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 70px -36px rgba(0,0,0,0.9); border-color: rgba(217,227,234,0.22); } .otr-sat-seal { box-shadow: 0 0 0 5px rgba(217,227,234,0.1), 0 0 0 6px rgba(217,227,234,0.4), 0 22px 40px -14px rgba(0,0,0,0.8); background: radial-gradient(circle at 35% 25%, #6fd0ec 0%, #1aa7d1 40%, #064f6e 100%); } .otr-promo-card { box-shadow: 0 40px 100px -24px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.04) inset; border-color: rgba(217,227,234,0.28); } .otr-ceramic-push { border-color: rgba(217,227,234,0.28); } .otr-ceramic-push.is-gift { border-color: rgba(255,196,61,0.45); } .otr-pp-big, .otr-plan-amt, .otr-bf-est-v, .otr-ceramic-price-tier .v { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -1px; } .otr-pp-v { color: var(--cyan-light); } .otr-giftlink { border: 0; background: none; padding: 6px 4px; margin-top: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .6px; color: #d8c48a; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(216,196,138,0.4); } .otr-giftlink:hover { background: none; color: #ffe39a; text-decoration-color: #ffe39a; } .otr-sat-pill { font-size: 12px; letter-spacing: 2px; background: rgba(26,167,209,0.12); border-color: rgba(134,214,236,0.4); } .otr-subhead, .otr-plans-block { border-top: 0; position: relative; } .otr-subhead::before, .otr-plans-block::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(217,227,234,0.4), transparent); } .otr-site-nav, .otr-nav-inner { border-bottom-color: rgba(217,227,234,0.12); } .otr-footer { border-top: 1px solid rgba(217,227,234,0.12); } @media (max-width: 560px) { .otr-container > .otr-eyebrow::before, .otr-container > .otr-eyebrow::after { flex-basis: 24px; } .otr-eyebrow { letter-spacing: 4px; } } :root { --bg-deep: #08111f; --bg-card: #101c31; --border: rgba(80,216,255,0.16); --cyan: #00b8e6; --cyan-light: #50d8ff; --cyan-dark: #0079a8; --line: rgba(80,216,255,0.16); --text-muted: #b2c2cf; --display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; } html, body { background: #08111f; } .otr-cosmos { background: radial-gradient(1100px 520px at 50% -160px, rgba(255,255,255,0.13), transparent 66%), radial-gradient(900px 480px at 88% -6%, rgba(0,184,230,0.22), transparent 62%), radial-gradient(760px 460px at 0% 100%, rgba(0,121,168,0.18), transparent 62%), linear-gradient(180deg, #0b1627 0%, #0e1b30 55%, #0b1627 100%) !important; } .otr-nebula, .otr-stars-tiny, .otr-stars-mid, .otr-stars-far, .otr-stars-near, .otr-constellation, .otr-glow { display: none !important; } .otr-cosmos::after { display: none !important; } .otr-tab-section .otr-cosmos::before { display: block !important; content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 28px); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%); mask-image: linear-gradient(180deg, #000 0%, transparent 75%); } #tab-home .otr-cosmos { min-height: 0; } .otr-container { padding-top: 84px; padding-bottom: 84px; } #tab-home .otr-container { padding-top: 80px; padding-bottom: 80px; } #tab-home .otr-container + .otr-container { border-top: 1px solid rgba(255,255,255,0.1); } .otr-h1, .otr-h2, .otr-sat-band h2, .otr-members h2, .otr-promo-card h2, .otr-ceramic-push h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.0; color: #fff; } .otr-h2 { font-size: clamp(36px, 5vw, 62px); } .otr-h1 em, .otr-h2 em, .otr-hero-h1 em, .otr-sat-band h2 em, .otr-members h2 em, .otr-promo-card h2 em, .otr-ceramic-push h3 em { font-family: var(--display); font-style: italic; font-weight: 800; background: linear-gradient(90deg, #00c4f0 0%, #7fe3ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: none; } .otr-h1 em::after, .otr-h2 em::after, .otr-hero-h1 em::after { display: none !important; } .otr-pp-big, .otr-plan-amt, .otr-mtier .p, .otr-ceramic-push .amt, .otr-sat-seal b, .otr-bf-est-v, .otr-sat-stats b, .otr-trustbar b, .otr-ceramic-price-tier .v { font-family: var(--display); font-weight: 800; letter-spacing: 0.5px; } .otr-pp-big { font-size: 44px; color: #fff; background: none; -webkit-background-clip: border-box; background-clip: border-box; } .otr-plan-amt { font-size: 66px; color: #fff; background: none; -webkit-background-clip: border-box; background-clip: border-box; } .otr-bf-est-v { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; font-size: 32px; } .otr-ceramic-price-tier .v { color: #fff; background: none; } .otr-eyebrow { font-family: var(--display); color: var(--cyan-light); font-size: 14px; letter-spacing: 5px; font-weight: 700; background: none; animation: none; -webkit-background-clip: border-box; background-clip: border-box; } .otr-tab-section .otr-eyebrow { display: block; } .otr-tab-section .otr-eyebrow::after { display: none !important; } .otr-tab-section .otr-eyebrow::before { display: inline-block !important; content: ""; width: 26px; height: 3px; margin-right: 12px; vertical-align: middle; position: static; background: var(--cyan); transform: skewX(-30deg); flex: none; } .otr-pkg-card, .otr-plan-card, .otr-addon-item, .otr-pill, .otr-vp, .otr-how-step, .otr-area-card, .otr-faq-item, .otr-contact-card, .otr-howitworks-mini div, .otr-mtier, .otr-one-car, .otr-bf-nudge, .otr-bf-ack, .otr-bf-giftbar, .otr-sat-stats div, #tab-book .otr-bf-section, #tab-book .otr-bf-panel, .otr-members, .otr-sat-band, .otr-ceramic-push, .otr-promo-card, .otr-bf-bar { border-radius: 6px !important; } .otr-pkg-card, .otr-plan-card, .otr-addon-item, .otr-pill, .otr-vp, .otr-how-step, .otr-area-card, .otr-faq-item, .otr-contact-card, .otr-howitworks-mini div, .otr-mtier, #tab-book .otr-bf-section, #tab-book .otr-bf-panel { background: linear-gradient(180deg, #14233b 0%, #0d192d 100%) !important; border: 1px solid rgba(80,216,255,0.16) !important; box-shadow: inset 0 2px 0 0 rgba(0,184,230,0.55) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } #tab-book .otr-bf-section::before { display: none; } .otr-pkg-card:hover, .otr-plan-card:hover, .otr-pill:hover, .otr-area-card:hover, .otr-mtier:hover, .otr-addon-item:hover { border-color: rgba(80,216,255,0.6) !important; transform: translateY(-3px); box-shadow: inset 0 2px 0 0 var(--cyan), 0 18px 44px -18px rgba(0,184,230,0.65) !important; } .otr-pkg-card.otr-pkg-popular, .otr-plan-card.otr-plan-popular, .otr-mtier.is-pop, .otr-bf-pkg.is-selected, .otr-bf-addon.is-on { border-color: var(--cyan) !important; background: linear-gradient(180deg, #133350 0%, #0d2036 100%) !important; box-shadow: inset 0 2px 0 0 var(--cyan-light), 0 16px 40px -18px rgba(0,184,230,0.7) !important; } .otr-pkg-prices, .otr-pp-range { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(80,216,255,0.16) !important; border-radius: 0 !important; padding: 0 0 14px !important; } .otr-pkg-popular-tag, .otr-plan-popular-tag, .otr-bf-pkg-pop-tag, .otr-mtier .pop { border-radius: 3px !important; font-family: var(--display); font-size: 12px !important; letter-spacing: 2.5px; box-shadow: 0 6px 18px -6px rgba(0,184,230,0.8) !important; } .otr-members { background: radial-gradient(90% 130% at 100% 0%, rgba(0,184,230,0.2), transparent 60%), linear-gradient(180deg, #14233b, #0c182b) !important; border: 1px solid rgba(80,216,255,0.28) !important; box-shadow: inset 0 2px 0 0 var(--cyan), 0 30px 70px -36px rgba(0,184,230,0.55) !important; } .otr-sat-band { background: radial-gradient(90% 130% at 0% 0%, rgba(0,184,230,0.2), transparent 60%), linear-gradient(180deg, #14233b, #0c182b) !important; border: 1px solid rgba(80,216,255,0.28) !important; box-shadow: inset 0 2px 0 0 var(--cyan), 0 30px 70px -36px rgba(0,184,230,0.55) !important; } .otr-ceramic-push { background: radial-gradient(90% 140% at 100% 0%, rgba(0,184,230,0.18), transparent 60%), #0f1c31 !important; border: 1px solid rgba(80,216,255,0.3) !important; box-shadow: inset 0 2px 0 0 var(--cyan) !important; } .otr-ceramic-push.is-gift { border-color: rgba(216,196,138,0.45) !important; box-shadow: inset 0 2px 0 0 #d8c48a !important; } .otr-ceramic-push .amt { font-size: 58px; color: #fff; } .otr-sat-seal { box-shadow: 0 0 0 5px rgba(0,184,230,0.16), 0 0 0 6px rgba(80,216,255,0.5), 0 0 50px rgba(0,184,230,0.45) !important; width: 160px; height: 160px; } .otr-sat-seal b { font-size: 56px; } .otr-sat-seal span { font-size: 10px; } .otr-bf-bar { background: #0b1729 !important; border: 1px solid rgba(80,216,255,0.4) !important; box-shadow: 0 -10px 34px -12px rgba(0,0,0,0.9), 0 0 0 1px rgba(0,184,230,0.08) !important; } .otr-promo-card { border-color: rgba(80,216,255,0.35) !important; } .otr-btn-primary, .otr-btn-secondary, .otr-pkg-btn, .otr-nav-cta, .otr-bf-back, .otr-bf-next, .otr-bf-submit, .otr-promo-cta, .otr-sticky-book, .otr-sticky-call, .otr-bf-coupon-btn, .otr-new-banner, .otr-sat-pill, .otr-giftlink, .otr-bf-nudge button { border-radius: 3px !important; font-family: var(--display); } .otr-btn-primary, .otr-btn-secondary, .otr-pkg-btn, .otr-nav-cta, .otr-bf-back, .otr-bf-next, .otr-bf-submit, .otr-promo-cta, .otr-sticky-book, .otr-sticky-call { font-size: 16px; font-weight: 700; letter-spacing: 2.4px; padding-top: 14px; padding-bottom: 14px; } .otr-btn-primary, .otr-pkg-btn-pop, .otr-bf-next, .otr-bf-submit, .otr-nav-cta, .otr-promo-cta, .otr-sticky-book { background: linear-gradient(135deg, #00c8f5 0%, #0086b8 100%) !important; box-shadow: 0 10px 28px -8px rgba(0,184,230,0.8), inset 0 1px 0 rgba(255,255,255,0.3) !important; } .otr-btn-primary:hover, .otr-bf-next:hover, .otr-bf-submit:hover, .otr-promo-cta:hover, .otr-nav-cta:hover, .otr-pkg-btn-pop:hover { background: linear-gradient(135deg, #26d3ff 0%, #0097cc 100%) !important; box-shadow: 0 14px 34px -8px rgba(0,184,230,0.95), inset 0 1px 0 rgba(255,255,255,0.35) !important; transform: translateY(-2px); } .otr-btn-secondary, .otr-pkg-btn { border: 1.5px solid var(--cyan) !important; background: rgba(0,184,230,0.04) !important; color: #fff !important; } .otr-btn-secondary:hover, .otr-pkg-btn:hover { background: rgba(0,184,230,0.16) !important; border-color: var(--cyan-light) !important; transform: translateY(-2px); } .otr-btn-primary::after, .otr-pkg-btn-pop::after, .otr-bf-submit::after, .otr-nav-cta::after { display: none; } .otr-new-tag { border-radius: 3px; background: #ffc83d; color: #2a1d00; animation: none; box-shadow: none; font-family: var(--display); font-size: 12px; letter-spacing: 2px; } .otr-new-banner, .otr-sat-pill { background: rgba(0,184,230,0.08); border: 1px solid rgba(80,216,255,0.4); box-shadow: none; animation: none; font-family: inherit; } .otr-sat-pill { color: #fff; font-family: var(--display); font-size: 14px; letter-spacing: 2.5px; } .otr-giftlink { font-family: inherit; } .otr-bf-chip, .otr-bf-seg, .otr-bf-seg button { border-radius: 3px; } .otr-bf-field input, .otr-bf-field select, .otr-bf-section textarea, .otr-bf-coupon-row input { border-radius: 4px; } .otr-pkg-name, .otr-plan-name, .otr-bf-pkg-name, .otr-bf-section-head h3, .otr-bf-panel h4 { font-family: var(--display); text-transform: uppercase; letter-spacing: 1px; font-weight: 800; } .otr-pkg-name { font-size: 30px; line-height: 1.05; } .otr-plan-name { font-size: 34px; } .otr-bf-pkg-name { font-size: 20px; } .otr-bf-section-head h3 { font-size: 28px; } .otr-bf-panel h4 { font-size: 21px; } .otr-bf-pkg-price, .otr-bf-addon .p, .otr-pp-v { font-family: var(--display); font-weight: 700; letter-spacing: .5px; } .otr-bf-pkg-price { font-size: 24px; } .otr-site-nav { background: rgba(9,18,33,0.94) !important; border-bottom: 1px solid rgba(80,216,255,0.2) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .otr-nav-tab { font-family: var(--display); border-radius: 0; letter-spacing: 2.4px; font-size: 15px; font-weight: 600; padding: 12px 12px; } .otr-nav-tab.active { background: none !important; box-shadow: inset 0 -3px 0 var(--cyan) !important; color: #fff; } .otr-nav-tab.active::after { display: none; } .otr-nav-brand-text { font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: 2.5px; } .otr-photo { position: relative; margin: 0; overflow: hidden; border-radius: 6px; border: 1px solid rgba(80,216,255,0.2); background: radial-gradient(120% 90% at 78% 0%, rgba(0,184,230,0.28), transparent 55%), linear-gradient(160deg, #18293f 0%, #0e1b2e 55%, #0a1422 100%); } .otr-photo::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 240' fill='none' stroke='%2380dcf5' stroke-opacity='0.2' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'><path d='M40 184V168C40 152 66 144 118 138L232 102C262 80 304 66 362 64H470C522 66 562 84 602 112L700 126C742 132 760 148 760 170V184H702M612 184H250M162 184H40'/><circle cx='206' cy='184' r='42'/><circle cx='206' cy='184' r='22'/><circle cx='656' cy='184' r='42'/><circle cx='656' cy='184' r='22'/><path d='M270 100C296 84 330 76 372 76H398V112H262ZM416 76H468C506 80 540 96 574 112H416Z'/></svg>") no-repeat 50% 58% / 82% auto; } .otr-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: linear-gradient(180deg, transparent 55%, rgba(3,7,12,0.6) 100%); } .otr-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; transition: transform .6s ease; } .otr-photo figcaption { position: absolute; left: 14px; bottom: 12px; z-index: 4; font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #fff; } .otr-photo figcaption:empty { display: none; } .r-45 { aspect-ratio: 4 / 5; } .r-43 { aspect-ratio: 4 / 3; } .r-169 { aspect-ratio: 16 / 9; } .r-11 { aspect-ratio: 1; } .otr-hero2 { position: relative; z-index: 3; max-width: 1240px; margin: 0 auto; padding: 56px 24px 0; } .otr-hero2::before { content: ""; position: absolute; z-index: -1; right: -6%; top: -8%; width: 62%; height: 112%; pointer-events: none; background: radial-gradient(closest-side, rgba(0,184,230,0.34), rgba(0,184,230,0.1) 55%, transparent 100%); filter: blur(8px); } .otr-hero2 * { animation: none !important; } .otr-hero2-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; } .otr-hero2-copy { text-align: left; } .otr-hero2-copy .otr-eyebrow { margin-bottom: 18px; font-size: 15px; letter-spacing: 4.5px; text-align: left; } .otr-hero2 h1 { font-size: clamp(50px, 7.2vw, 100px); line-height: 0.96; margin: 0 0 22px; text-align: left; } .otr-hero2 .otr-lede { margin: 0 0 30px; text-align: left; max-width: 520px; font-size: 17px; color: #d3dee7; } .otr-hero2 .otr-hero-ctas { justify-content: flex-start; margin: 0 0 22px; } .otr-hero2 .otr-new-banner { margin-top: 6px; } .otr-hero2-photo { width: 100%; max-height: 680px; justify-self: end; border: 1px solid rgba(80,216,255,0.5); box-shadow: 0 40px 90px -24px rgba(0,184,230,0.55); outline: 1px solid rgba(80,216,255,0.28); outline-offset: 12px; } .otr-trustbar { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 64px; border-top: 1px solid rgba(80,216,255,0.22); } .otr-trustbar div { padding: 24px 12px 22px; text-align: center; border-left: 1px solid rgba(80,216,255,0.12); } .otr-trustbar div:first-child { border-left: 0; } .otr-trustbar b { display: block; font-size: 32px; line-height: 1; color: var(--cyan-light); text-transform: uppercase; } .otr-trustbar span { display: block; margin-top: 8px; font-size: 10.5px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--text-muted); } .otr-marquee { position: relative; z-index: 3; overflow: hidden; margin-top: 8px; padding: 18px 0; border-top: 1px solid rgba(80,216,255,0.25); border-bottom: 1px solid rgba(80,216,255,0.25); background: linear-gradient(90deg, rgba(0,184,230,0.18), rgba(0,184,230,0.05) 50%, rgba(0,184,230,0.18)); } .otr-marquee .track { display: flex; align-items: center; width: max-content; animation: otr-marquee 34s linear infinite; } .otr-marquee span { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: 5px; text-transform: uppercase; white-space: nowrap; padding: 0 22px; color: #fff; } .otr-marquee span.o { color: transparent; -webkit-text-stroke: 1px rgba(134,224,255,0.8); } .otr-marquee i { color: var(--cyan); font-style: normal; font-size: 16px; } @keyframes otr-marquee { to { transform: translateX(-50%); } } .otr-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; text-align: left; counter-reset: svc; } .otr-svc { display: block; text-decoration: none; color: inherit; cursor: pointer; counter-increment: svc; } .otr-svc .otr-photo { transition: border-color .25s ease, box-shadow .25s ease; } .otr-svc:hover .otr-photo { border-color: var(--cyan-light); box-shadow: 0 22px 50px -20px rgba(0,184,230,0.7); } .otr-svc:hover .otr-photo img { transform: scale(1.05); } .otr-svc-body { padding: 16px 2px 0; } .otr-svc-body::before { content: "0" counter(svc); display: block; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: 4px; color: var(--cyan); margin-bottom: 4px; } .otr-svc-body h3 { margin: 0 0 6px; font-family: var(--display); font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #fff; line-height: 1.05; } .otr-svc-body p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); } .otr-svc-body .more { font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--cyan-light); } .otr-svc:hover .more { color: #fff; } .otr-work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; } .otr-work-grid .w-feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } .otr-work-grid .otr-photo { min-height: 190px; } @media (max-width: 960px) { .otr-hero2-grid { grid-template-columns: 1fr; gap: 40px; } .otr-hero2-photo { aspect-ratio: 4 / 3; max-height: none; outline-offset: 8px; } .otr-svc-grid { grid-template-columns: repeat(2, 1fr); } .otr-trustbar { grid-template-columns: repeat(2, 1fr); } .otr-trustbar div:nth-child(odd) { border-left: 0; } .otr-trustbar div { border-bottom: 1px solid rgba(80,216,255,0.12); } .otr-trustbar div:last-child { grid-column: 1 / -1; border-left: 0; } } @media (max-width: 560px) { .otr-hero2 { padding-top: 34px; } .otr-work-grid { grid-template-columns: repeat(2, 1fr); } .otr-work-grid .w-feature { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; } .otr-svc-grid { gap: 16px; } .otr-svc-body h3 { font-size: 21px; } .otr-svc-body p { display: none; } .otr-marquee span { font-size: 24px; } } @media (prefers-reduced-motion: reduce) { .otr-marquee .track { animation: none; } } .otr-tab-section .otr-cosmos::after, #tab-book .otr-cosmos::after { display: block !important; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: auto; height: 6px; width: auto; opacity: 1; z-index: 4; pointer-events: none; background: linear-gradient(100deg, #00b8e6 0 34%, transparent 34% 35.4%, #50d8ff 35.4% 43%, transparent 43% 44.4%, #ffffff 44.4% 46%, transparent 46%); } .otr-checker { height: 12px; max-width: 1200px; margin: 0 auto; opacity: 0.32; position: relative; z-index: 3; background: repeating-conic-gradient(#fff 0 25%, #06101c 0 50%) 0 0 / 12px 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .otr-micro { margin: 0 0 14px; font-size: 13px; line-height: 1.7; color: #c3d2dd; } .otr-micro b { color: var(--cyan-light); font-weight: 700; } .otr-slots { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 12.5px; color: #d6e2ea; } .otr-slots .dot { width: 9px; height: 9px; border-radius: 50%; background: #3be48a; box-shadow: 0 0 0 0 rgba(59,228,138,0.7); animation: otr-live 2s infinite !important; } @keyframes otr-live { 0% { box-shadow: 0 0 0 0 rgba(59,228,138,0.6); } 70% { box-shadow: 0 0 0 9px rgba(59,228,138,0); } 100% { box-shadow: 0 0 0 0 rgba(59,228,138,0); } } .otr-dash { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 0; margin-top: 60px; padding: 28px 8px 24px; border-top: 1px solid rgba(80,216,255,0.25); border-bottom: 0; } .otr-dash .g { flex: 1 1 0; min-width: 0; } .otr-dash .g, .otr-dash .gauge { border: 0 !important; } .otr-dash .g { text-align: center; border-left: 0 !important; padding: 0 !important; } .otr-dash .gauge { position: relative; width: 92px; height: 92px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; } .otr-dash .gauge .ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 225deg, #00b8e6 0deg, #7fe3ff calc(var(--p) * 2.7deg), rgba(255,255,255,0.09) calc(var(--p) * 2.7deg) 270deg, transparent 270deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); filter: drop-shadow(0 0 8px rgba(0,184,230,0.55)); } .otr-dash .gauge b { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1; color: #fff; text-transform: uppercase; } .otr-dash .g em { display: block; font-style: normal; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); line-height: 1.5; } .otr-how-grid { position: relative; } .otr-how-grid::before { content: ""; position: absolute; left: 6%; right: 6%; top: 52px; height: 0; border-top: 3px dashed rgba(255,255,255,0.22); z-index: 0; } .otr-how-step { position: relative; z-index: 1; } .otr-how-num { font-family: var(--display) !important; font-weight: 800 !important; font-size: 64px !important; line-height: 1 !important; color: transparent !important; -webkit-text-stroke: 2px var(--cyan); transform: skewX(-8deg); display: inline-block; background: none !important; } .otr-how-step h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: 1px; font-size: 26px; font-weight: 800; } @media (max-width: 760px) { .otr-how-grid::before { display: none; } } .otr-chooser { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin: 26px auto 0; max-width: 900px; padding: 16px 18px; border: 1px dashed rgba(80,216,255,0.4); border-radius: 6px; background: rgba(0,184,230,0.05); } .otr-chooser > span { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan-light); margin-right: 6px; } .otr-chooser button { font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #fff; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.22); border-radius: 3px; padding: 10px 16px; cursor: pointer; transition: all .2s ease; } .otr-chooser button:hover { border-color: var(--cyan-light); background: rgba(0,184,230,0.18); transform: translateY(-1px); } .otr-chooser button.is-hot { background: linear-gradient(135deg, #00c8f5, #0086b8); border-color: transparent; box-shadow: 0 8px 22px -8px rgba(0,184,230,0.8); } .otr-savings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1040px; margin: 30px auto 0; text-align: left; } .otr-savings div { padding: 20px 20px 18px; border-radius: 6px; background: linear-gradient(180deg, #14233b, #0d192d); border: 1px solid rgba(80,216,255,0.18); box-shadow: inset 0 2px 0 0 rgba(0,184,230,0.55); } .otr-savings b { display: block; font-family: var(--display); font-size: 34px; font-weight: 800; line-height: 1; color: #fff; margin-bottom: 6px; letter-spacing: .5px; } .otr-savings b i { font-style: normal; color: var(--cyan-light); } .otr-savings span { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); } @media (max-width: 760px) { .otr-savings { grid-template-columns: 1fr; } } .otr-final-inner { position: relative; max-width: 960px; margin: 0 auto; padding: 56px 34px 46px; border-radius: 10px; overflow: hidden; background: radial-gradient(80% 140% at 50% 0%, rgba(0,184,230,0.32), transparent 62%), linear-gradient(180deg, #112440, #0a1527); border: 1px solid rgba(80,216,255,0.35); box-shadow: inset 0 3px 0 0 var(--cyan), 0 40px 90px -40px rgba(0,184,230,0.7); } .otr-final-inner::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; opacity: .35; background: repeating-conic-gradient(#fff 0 25%, #06101c 0 50%) 0 0 / 12px 12px; } .otr-final-inner h2 { font-size: clamp(38px, 6vw, 72px); margin: 14px 0 12px; } .otr-final-inner p.lead { margin: 0 auto 26px; max-width: 560px; font-size: 16.5px; line-height: 1.6; color: #cdd9e2; } .otr-final-inner .otr-hero-ctas { justify-content: center; margin-bottom: 18px; } .otr-final-inner .otr-btn-primary { font-size: 20px; padding: 18px 40px; } .otr-plate { display: inline-flex; flex-direction: column; align-items: center; padding: 3px 18px 5px; border-radius: 7px; background: linear-gradient(180deg, #fbfdff, #dfe8ee); border: 3px solid #0c2036; box-shadow: 0 6px 18px rgba(0,0,0,0.5), inset 0 0 0 2px #fff; } .otr-plate small { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 5px; color: #0a5a82; line-height: 1.5; } .otr-plate b { font-family: var(--display); font-size: 34px; font-weight: 800; letter-spacing: 6px; color: #0c2036; line-height: 1; } .otr-home-faq { max-width: 820px; margin: 34px auto 0; text-align: left; } .otr-home-faq .otr-faq-item { margin-bottom: 10px; } .otr-home-faq .otr-faq-q { cursor: pointer; } .otr-bf-assure { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin: 18px 0 0; padding: 14px; border-top: 1px dashed rgba(80,216,255,0.3); font-size: 12.5px; color: #c3d2dd; } .otr-bf-assure span::before { content: "\2713\00a0"; color: var(--cyan-light); font-weight: 800; } .otr-svc .more { display: inline-block; padding: 8px 14px; margin-top: 2px; border: 1px solid rgba(80,216,255,0.45); border-radius: 3px; background: rgba(0,184,230,0.08); transition: all .2s ease; } .otr-svc:hover .more { background: var(--cyan); border-color: var(--cyan); color: #fff; } .otr-svc-foot { margin: 32px 0 0; font-size: 14px; color: var(--text-muted); } .otr-svc-foot a, .otr-svc-foot button { color: var(--cyan-light); font-weight: 700; background: none; border: 0; cursor: pointer; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 960px) { .otr-dash .g { flex: 0 0 33.333%; } .otr-dash .gauge { width: 84px; height: 84px; } } @media (max-width: 560px) { .otr-dash .g { flex: 0 0 50%; } .otr-final-inner { padding: 40px 20px 36px; } } #tab-book .otr-cosmos { background: radial-gradient(760px 520px at 100% 0%, rgba(0,184,230,0.28), transparent 62%), radial-gradient(640px 480px at 0% 55%, rgba(255,255,255,0.075), transparent 62%), radial-gradient(900px 420px at 50% 112%, rgba(0,184,230,0.26), transparent 62%), linear-gradient(160deg, #0f2038 0%, #0a1527 48%, #0c1b33 100%) !important; } #tab-book .otr-cosmos::before { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700' fill='none' stroke='%2380dcf5'><circle cx='350' cy='350' r='330' stroke-width='3' stroke-opacity='.22'/><circle cx='350' cy='350' r='286' stroke-width='16' stroke-opacity='.2' stroke-dasharray='2.4 20.6'/><circle cx='350' cy='350' r='250' stroke-width='2' stroke-opacity='.18'/><circle cx='350' cy='350' r='205' stroke-width='10' stroke-opacity='.14' stroke-dasharray='1.8 14'/><path d='M350 350 L520 230' stroke-width='4' stroke-opacity='.4' stroke-linecap='round'/><circle cx='350' cy='350' r='14' stroke-width='3' stroke-opacity='.4'/></svg>") no-repeat calc(100% + 230px) -170px / 760px 760px, linear-gradient(112deg, transparent 12%, rgba(255,255,255,0.045) 12% 19%, transparent 19% 34%, rgba(80,216,255,0.07) 34% 37%, transparent 37% 70%, rgba(255,255,255,0.035) 70% 74%, transparent 74%) !important; -webkit-mask-image: none !important; mask-image: none !important; } #tab-book .otr-bf-section, #tab-book .otr-bf-panel { border-radius: 28px 4px 28px 4px !important; background: linear-gradient(180deg, rgba(23,40,68,0.94), rgba(11,21,38,0.96)) !important; border: 1px solid rgba(120,200,235,0.28) !important; box-shadow: 0 34px 70px -38px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.08) !important; } #tab-book .otr-bf-section { padding: 42px 38px 36px; } #tab-book .otr-bf-section::before { display: block !important; content: ""; position: absolute; top: -1px; left: 34px; width: 96px; height: 5px; pointer-events: none; background: linear-gradient(90deg, var(--cyan), var(--cyan-light)); transform: skewX(-35deg); box-shadow: 0 0 16px rgba(0,184,230,0.85); } #tab-book .otr-bf-section::after { content: ""; position: absolute; right: 18px; bottom: 16px; width: 34px; height: 34px; pointer-events: none; border-right: 2px solid rgba(80,216,255,0.4); border-bottom: 2px solid rgba(80,216,255,0.4); border-radius: 0 0 14px 0; } #tab-book .otr-bf-section-head h3 { font-size: 32px; margin-bottom: 6px; } #tab-book .otr-bf-section-head p { font-size: 14px; color: #b7c8d5; } #tab-book .otr-bf-pkg { border-radius: 20px 4px 20px 4px !important; padding: 22px 20px 18px; background: linear-gradient(160deg, rgba(255,255,255,0.075), rgba(255,255,255,0.015)) !important; border: 1.5px solid rgba(120,200,235,0.26) !important; box-shadow: none !important; } #tab-book .otr-bf-pkg:hover { border-color: var(--cyan-light) !important; transform: translateY(-3px); box-shadow: 0 18px 38px -18px rgba(0,184,230,0.75) !important; } #tab-book .otr-bf-pkg.is-selected { background: linear-gradient(160deg, rgba(0,184,230,0.36), rgba(0,184,230,0.08)) !important; border-color: var(--cyan-light) !important; box-shadow: 0 0 0 1px var(--cyan), 0 20px 44px -18px rgba(0,184,230,0.9) !important; } #tab-book .otr-bf-pkg-price { font-size: 28px; color: #fff; line-height: 1.1; } #tab-book .otr-bf-pkg-desc { color: #b7c8d5; } #tab-book .otr-bf-cat { border-color: rgba(255,255,255,0.1); } #tab-book .otr-bf-addon { border-radius: 18px 4px 18px 4px; border-color: rgba(120,200,235,0.26); background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015)); } #tab-book .otr-bf-addon.is-on { background: linear-gradient(160deg, rgba(0,184,230,0.34), rgba(0,184,230,0.08)) !important; box-shadow: 0 0 0 1px var(--cyan), 0 16px 36px -16px rgba(0,184,230,0.85) !important; } .otr-bf-addon .ic { width: 52px; height: 56px; border: 0; border-radius: 0; background: rgba(80,216,255,0.2); box-shadow: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .otr-bf-addon { grid-template-columns: 52px minmax(0, 1fr) auto; } .otr-bf-addon.is-on .ic { background: linear-gradient(135deg, #00c8f5, #0086b8); box-shadow: none; } .otr-bf-stepper.is-3::before, .otr-bf-stepper.is-3::after { top: 22px; height: 3px; } .otr-bf-stepper-num { width: 44px !important; height: 48px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #1b3050 !important; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); font-family: var(--display); font-size: 20px !important; color: #b7c8d5 !important; } .otr-bf-stepper-item.is-active .otr-bf-stepper-num, .otr-bf-stepper-item.is-complete .otr-bf-stepper-num { background: linear-gradient(135deg, #00c8f5, #0086b8) !important; color: #fff !important; } .otr-bf-stepper-item.is-active { filter: drop-shadow(0 0 12px rgba(0,184,230,0.75)); } .otr-bf-stepper-label { font-family: var(--display); font-size: 14px; letter-spacing: 2.5px; } #tab-book .otr-bf-time-btn { border-radius: 16px 4px 16px 4px; background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015)); border-color: rgba(120,200,235,0.26); } #tab-book .otr-bf-time-btn.is-selected { background: linear-gradient(160deg, rgba(0,184,230,0.34), rgba(0,184,230,0.08)); border-color: var(--cyan-light); } #tab-book .otr-bf-field input, #tab-book .otr-bf-field select, #tab-book .otr-bf-section textarea, #tab-book .otr-bf-coupon-row input { background: #0a1830; border: 1px solid rgba(120,200,235,0.3); border-radius: 10px 3px 10px 3px; color: #fff; } #tab-book .otr-bf-field input:focus, #tab-book .otr-bf-field select:focus, #tab-book .otr-bf-section textarea:focus { border-color: var(--cyan-light); box-shadow: 0 0 0 3px rgba(0,184,230,0.22); outline: 0; } #tab-book .otr-bf-bar { border-radius: 30px 4px 30px 4px !important; background: linear-gradient(180deg, #112744, #0a1a30) !important; border: 1px solid rgba(80,216,255,0.5) !important; } #tab-book .otr-bf-nudge, #tab-book .otr-bf-giftbar, #tab-book .otr-bf-ack { border-radius: 16px 4px 16px 4px !important; } #tab-book .otr-bf-chip { border-radius: 12px 3px 12px 3px; } @media (max-width: 760px) { #tab-book .otr-bf-section { padding: 34px 20px 28px; border-radius: 22px 4px 22px 4px !important; } #tab-book .otr-bf-section-head h3 { font-size: 27px; } } .otr-bf-members { position: relative; display: block; width: 100%; margin: 8px 0 24px; padding: 38px 24px 32px; text-align: center; cursor: pointer; color: #fff; font-family: inherit; overflow: hidden; border-radius: 34px 4px 34px 4px !important; border: 1px solid rgba(216,196,138,0.65); background: radial-gradient(120% 150% at 50% 0%, rgba(216,196,138,0.24), transparent 56%), linear-gradient(180deg, #121c30 0%, #070d18 100%) !important; box-shadow: inset 0 0 0 6px #0a1220, inset 0 0 0 7px rgba(216,196,138,0.4), 0 30px 64px -28px rgba(0,0,0,0.95), 0 0 56px -20px rgba(216,196,138,0.4) !important; transition: transform .25s ease, box-shadow .25s ease; } .otr-bf-members::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 34%; left: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,240,200,0.18), transparent); transform: translateX(-140%) skewX(-18deg); animation: otr-gold-sweep 6s ease-in-out infinite; } @keyframes otr-gold-sweep { 0% { transform: translateX(-140%) skewX(-18deg); } 55%, 100% { transform: translateX(420%) skewX(-18deg); } } .otr-bf-members:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 6px #0a1220, inset 0 0 0 7px rgba(216,196,138,0.7), 0 34px 70px -26px rgba(0,0,0,0.95), 0 0 70px -14px rgba(216,196,138,0.6) !important; } .otr-bf-members .kick { display: block; font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: 7px; color: #d8c48a; } .otr-bf-members b { display: block; margin: 10px 0 8px; font-family: var(--display); font-weight: 800; font-size: clamp(48px, 10vw, 84px); line-height: 1; letter-spacing: 6px; background: linear-gradient(180deg, #fff9e3 0%, #ecd595 46%, #a98b42 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6)); } .otr-bf-members .sub { display: block; font-size: 15px; color: #d6dfe7; } .otr-bf-members .from { display: block; margin-top: 10px; font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #fff; } .otr-bf-members .go { display: inline-block; margin-top: 18px; padding: 12px 24px; border: 1px solid rgba(216,196,138,0.8); border-radius: 3px; font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #ecd595; background: rgba(216,196,138,0.08); transition: all .2s ease; } .otr-bf-members:hover .go { background: #d8c48a; color: #1a1305; } .otr-bf-planchosen { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin: 0 0 22px; padding: 16px 20px; border: 1px solid rgba(216,196,138,0.6); border-radius: 18px 4px 18px 4px; background: rgba(216,196,138,0.08); text-align: left; } .otr-bf-planchosen[hidden] { display: none; } .otr-bf-planchosen small { display: block; font-family: var(--display); font-size: 12px; letter-spacing: 3px; color: #d8c48a; } .otr-bf-planchosen b { font-family: var(--display); font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-right: 10px; color: #fff; } .otr-bf-planchosen span { color: var(--cyan-light); font-weight: 700; } .otr-bf-planchosen .acts { display: flex; gap: 8px; } .otr-bf-planchosen button { font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; padding: 9px 14px; border-radius: 3px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); cursor: pointer; } .otr-bf-planchosen button:hover { border-color: #d8c48a; color: #ecd595; } .otr-bf-stepper-item[hidden] { display: none; } .otr-bf-stepper.is-2::before { left: calc(25% + 22px); right: calc(25% + 22px); top: 22px; height: 3px; } .otr-bf-stepper.is-2::after { left: calc(25% + 22px); width: calc((50% - 44px) * var(--otr-bf-progress, 0)); top: 22px; height: 3px; } .otr-terms .otr-home-faq { max-width: 860px; } @media (prefers-reduced-motion: reduce) { .otr-bf-members::before { animation: none; } } .otr-mplans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1060px; margin: 38px auto 0; text-align: left; align-items: stretch; } .otr-mplan { position: relative; display: flex; flex-direction: column; padding: 30px 26px 26px; border-radius: 26px 4px 26px 4px !important; overflow: hidden; background: linear-gradient(180deg, #15264a 0%, #0c182e 100%) !important; border: 1px solid rgba(120,200,235,0.3) !important; box-shadow: 0 30px 60px -36px rgba(0,0,0,0.95) !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .otr-mplan::before { content: ""; position: absolute; top: -1px; left: 26px; width: 80px; height: 5px; transform: skewX(-35deg); background: linear-gradient(90deg, var(--cyan), var(--cyan-light)); box-shadow: 0 0 14px rgba(0,184,230,0.8); } .otr-mplan:hover { transform: translateY(-4px); border-color: var(--cyan-light) !important; box-shadow: 0 34px 64px -30px rgba(0,184,230,0.65) !important; } .otr-mplan.is-pop { background: linear-gradient(180deg, #123a63 0%, #0b1d36 100%) !important; border-color: var(--cyan) !important; box-shadow: 0 0 0 1px rgba(0,184,230,0.45), 0 36px 70px -30px rgba(0,184,230,0.7) !important; } .otr-mplan .mp-pop { position: absolute; top: 16px; right: 16px; padding: 5px 11px; border-radius: 3px; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 2.2px; color: #fff; background: linear-gradient(135deg, #00c8f5, #0086b8); } .otr-mplan .mp-tag { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 3.5px; color: var(--cyan-light); } .otr-mplan h3 { margin: 6px 0 4px; font-family: var(--display); font-size: 34px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #fff; line-height: 1.02; } .otr-mplan .mp-price { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 14px; } .otr-mplan .mp-price small { font-size: 14px; color: var(--text-muted); } .otr-mplan .mp-price b { font-family: var(--display); font-weight: 800; font-size: 68px; line-height: .95; letter-spacing: .5px; color: #fff; } .otr-mplan .mp-price span { font-size: 14px; color: var(--text-muted); } .otr-mplan .mp-visits { display: flex; align-items: center; gap: 14px; padding: 12px 0; margin-bottom: 12px; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); } .otr-mplan .mp-visits strong { display: block; font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; } .otr-mplan .mp-visits span { font-size: 12.5px; color: var(--text-muted); } .otr-mplan .gauge { position: relative; width: 58px; height: 58px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .otr-mplan .gauge .ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 225deg, #00b8e6 0deg, #7fe3ff calc(var(--p) * 2.7deg), rgba(255,255,255,0.1) calc(var(--p) * 2.7deg) 270deg, transparent 270deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); filter: drop-shadow(0 0 6px rgba(0,184,230,0.6)); } .otr-mplan .gauge b { font-family: var(--display); font-size: 26px; font-weight: 800; color: #fff; } .otr-mplan ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; flex: 1 1 auto; } .otr-mplan li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.45; color: #d2deea; } .otr-mplan li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%; background: rgba(0,184,230,0.22); color: var(--cyan-light); font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; } .otr-mplan li b { color: #fff; } .otr-mplan > button { width: 100%; } .mp-note { max-width: 760px; margin: 22px auto 0; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); } .mp-note b { color: #fff; } .mp-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--cyan-light); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .otr-mtabs { max-width: 1040px; margin: 54px auto 0; text-align: left; } .otr-mtabs > input { position: absolute; opacity: 0; pointer-events: none; } .otr-mtabs .mt-bar { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 0; border-bottom: 1px solid rgba(80,216,255,0.25); } .otr-mtabs .mt-bar label { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--text-muted); padding: 12px 22px 11px; cursor: pointer; border-radius: 12px 12px 0 0; border: 1px solid transparent; border-bottom: 0; transition: all .2s ease; } .otr-mtabs .mt-bar label:hover { color: #fff; } #mt1:checked ~ .mt-bar label[for="mt1"], #mt2:checked ~ .mt-bar label[for="mt2"], #mt3:checked ~ .mt-bar label[for="mt3"] { color: #fff; background: linear-gradient(180deg, rgba(0,184,230,0.28), rgba(0,184,230,0.06)); border-color: rgba(80,216,255,0.45); box-shadow: inset 0 3px 0 var(--cyan); } #mt1:focus-visible ~ .mt-bar label[for="mt1"], #mt2:focus-visible ~ .mt-bar label[for="mt2"], #mt3:focus-visible ~ .mt-bar label[for="mt3"] { outline: 2px solid var(--cyan-light); outline-offset: 2px; } .otr-mtabs .mt-pane { display: none; padding: 28px 4px 4px; } #mt1:checked ~ .p1, #mt2:checked ~ .p2, #mt3:checked ~ .p3 { display: block; animation: otr-fade-in .35s ease-out; } .otr-mtabs .otr-savings { margin-top: 0; max-width: none; } .mt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; } .mt-steps div { padding: 16px 18px; border-left: 3px solid var(--cyan); background: rgba(255,255,255,0.03); border-radius: 0 6px 6px 0; } .mt-steps i { font-style: normal; font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--cyan-light); margin-right: 8px; } .mt-steps b { font-family: var(--display); font-size: 20px; letter-spacing: 1px; text-transform: uppercase; color: #fff; } .mt-steps span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--text-muted); } .mt-sub { margin: 26px 0 10px; font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--cyan-light); } .mt-chips { display: flex; flex-wrap: wrap; gap: 10px; } .mt-chips span { padding: 10px 16px; border: 1px solid rgba(80,216,255,0.3); border-radius: 3px; background: rgba(0,184,230,0.07); font-size: 13.5px; color: #d2deea; } .mt-chips b { color: #fff; margin-left: 4px; } .mt-fair { padding: 16px 20px; margin-bottom: 18px; border-radius: 4px 18px 4px 18px; border: 1px solid rgba(216,196,138,0.5); background: rgba(216,196,138,0.07); font-size: 14.5px; line-height: 1.6; color: #f0e4bd; } .mt-fair b { color: #ffe39a; } .otr-mtabs .otr-home-faq { margin: 0; max-width: none; } .otr-mtabs .otr-faq-item { margin-bottom: 6px; } .otr-mtabs .otr-faq-q { padding-top: 14px; padding-bottom: 14px; } #tab-monthly .otr-ceramic-push { margin-top: 48px; } @media (max-width: 900px) { .otr-mplans { grid-template-columns: 1fr; max-width: 480px; } .mt-steps { grid-template-columns: 1fr; } .otr-mtabs .mt-bar label { font-size: 16px; padding: 10px 14px 9px; letter-spacing: 1.4px; } } .otr-tabs { max-width: 1100px; margin: 38px auto 0; text-align: left; } .otr-tabs .tb-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; border-bottom: 1px solid rgba(80,216,255,0.25); margin-bottom: 30px; } .otr-tabs .tb-bar button { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--text-muted); background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 12px 12px 0 0; padding: 12px 22px 11px; cursor: pointer; transition: all .2s ease; } .otr-tabs .tb-bar button:hover { color: #fff; } .otr-tabs .tb-bar button.is-on { color: #fff; background: linear-gradient(180deg, rgba(0,184,230,0.28), rgba(0,184,230,0.06)); border-color: rgba(80,216,255,0.45); box-shadow: inset 0 3px 0 var(--cyan); } .otr-tabs .tb-bar button:focus-visible { outline: 2px solid var(--cyan-light); outline-offset: 2px; } .otr-tabs.js .tb-pane { display: none; } .otr-tabs.js .tb-pane.is-on { display: block; animation: otr-fade-in .35s ease-out; } .otr-tabs .otr-subhead { margin-top: 0; padding-top: 0; border-top: 0; } .otr-tabs .otr-subhead::before { display: none; } .otr-tabs .otr-pkg-cards { margin-top: 0; } .otr-tabs .otr-faq { margin-top: 0; } .otr-tabs .otr-home-faq { margin: 0 auto; } .otr-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1100px; margin: 54px auto 0; align-items: stretch; } .otr-duo .otr-ceramic-push { margin: 0; flex-direction: column; align-items: flex-start; } .otr-duo .otr-subhead { margin: 0; padding: 30px 28px; text-align: left; border: 1px solid rgba(80,216,255,0.22); border-radius: 22px 4px 22px 4px; background: linear-gradient(180deg, #14233b, #0d192d); } .otr-duo .otr-subhead::before { display: none; } .otr-duo .otr-subhead .otr-eyebrow { text-align: left; } .otr-duo .otr-subhead .otr-h2 { font-size: clamp(28px, 3.4vw, 40px); } .otr-duo .otr-subhead .otr-lede { margin: 0 0 18px; text-align: left; } @media (max-width: 860px) { .otr-duo { grid-template-columns: 1fr; margin-top: 40px; } .otr-tabs .tb-bar button { font-size: 16px; padding: 10px 14px 9px; letter-spacing: 1.4px; } } @media (max-width: 560px) { .otr-svc .otr-photo.r-45 { aspect-ratio: 1 / 1; } .otr-work-grid .otr-photo:nth-child(n+4) { display: none; } } @media (max-width: 960px) { .otr-dash { flex-wrap: nowrap; gap: 0; margin-top: 40px; padding: 22px 0 18px; } .otr-dash .g { flex: 1 1 0 !important; min-width: 0; } .otr-dash .gauge { width: 70px; height: 70px; } .otr-dash .gauge b { font-size: 21px; } .otr-dash .g em { font-size: 9.5px; letter-spacing: 1.2px; } .otr-hero2-photo { aspect-ratio: 16 / 10; } } @media (max-width: 560px) { .otr-dash .gauge { width: 54px; height: 54px; margin-bottom: 8px; } .otr-dash .gauge .ring { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); } .otr-dash .gauge b { font-size: 16px; } .otr-dash .g em { font-size: 8.5px; letter-spacing: .8px; } } @media (max-width: 760px) { .otr-svc-grid { display: flex; overflow-x: auto; gap: 14px; margin-left: -24px; margin-right: -24px; padding: 4px 24px 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .otr-svc-grid { scroll-padding-left: 24px; } .otr-svc { flex: 0 0 66%; scroll-snap-align: start; } .otr-svc-body p { display: block; } .otr-svc .otr-photo.r-45 { aspect-ratio: 4 / 3; } .otr-svc-grid::-webkit-scrollbar { height: 4px; } .otr-svc-grid::-webkit-scrollbar-thumb { background: rgba(80,216,255,0.4); border-radius: 4px; } .otr-members ul { display: none; } .otr-members { padding: 26px 20px; gap: 22px; } .otr-sat-seal { width: 118px; height: 118px; } .otr-sat-seal b { font-size: 38px; } .otr-sat-band { padding: 24px 20px; gap: 16px; } .otr-sat-band p { font-size: 14px; margin-bottom: 14px; } #tab-home .otr-container { padding-top: 56px; padding-bottom: 56px; } .otr-how-step { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; padding: 16px 18px !important; text-align: left; } .otr-how-step .otr-how-num { grid-row: span 2; font-size: 44px !important; } .otr-how-step h3 { margin: 0 0 2px; font-size: 22px; } .otr-how-step p { margin: 0; font-size: 13.5px; } .otr-how-grid { gap: 12px; } } #tab-home .otr-elfsight-wrap { position: relative; max-height: 540px; overflow: hidden; } #tab-home .otr-elfsight-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none; background: linear-gradient(180deg, transparent, #0b1627 85%); } .otr-reviews-more { margin: 18px 0 0; } .band { position: relative; } .band::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--band-bg); pointer-events: none; } .band-steel { --band-bg: linear-gradient(180deg, #14294d 0%, #102141 100%); } .band-teal { --band-bg: linear-gradient(180deg, #0b3342 0%, #08262f 100%); } .band-ink { --band-bg: #050b15; } .band-ice { --band-bg: linear-gradient(180deg, #f4f8fb 0%, #dfeaf3 100%); } #tab-home .otr-container.band { border-top: 0 !important; } .otr-tabs.band, .otr-mtabs.band, .otr-duo.band { padding: 34px 0 40px; margin-top: 40px; } .otr-tabs.band .tb-bar, .otr-mtabs.band .mt-bar { margin-top: 0; } .otr-duo.band { margin-top: 0; padding: 44px 0; } .band-ice .otr-h2 { color: #0a1a2c; } .band-ice .otr-h2 em { background: linear-gradient(90deg, #0580ad, #0aa6d6); -webkit-background-clip: text; background-clip: text; color: transparent; } .band-ice .otr-eyebrow { color: #0a7aa5; } .band-ice .otr-eyebrow::before { background: #0aa6d6 !important; } .band-ice .otr-lede { color: #3c5166; } .band-ice .otr-svc-body h3 { color: #0a1a2c; } .band-ice .otr-svc-body p { color: #46596d; } .band-ice .otr-svc-body .more { color: #0a6f96; border-color: rgba(10,111,150,0.45); background: rgba(10,111,150,0.06); } .band-ice .otr-svc:hover .more { background: var(--cyan); border-color: var(--cyan); color: #fff; } .band-ice .otr-photo { border-color: rgba(10,26,44,0.15); box-shadow: 0 16px 34px -20px rgba(10,26,44,0.5); } .band-ice .otr-svc:hover .otr-photo { box-shadow: 0 22px 44px -18px rgba(0,150,200,0.6); } .otr-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 0; } .otr-chips a { padding: 9px 16px; border: 1px solid rgba(80,216,255,0.4); border-radius: 3px; background: rgba(0,184,230,0.08); color: #fff; text-decoration: none; font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; transition: all .2s ease; } .otr-chips a:hover { background: var(--cyan); border-color: var(--cyan); } .otr-also { max-width: 720px; margin: 16px auto 0; font-size: 14px; line-height: 1.7; color: var(--text-muted); text-align: center; } .otr-sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:900; display:none; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background:rgba(0,3,8,0.92); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-top:1px solid rgba(0,184,230,0.28); box-shadow:0 -8px 28px rgba(0,0,0,0.55); transform:translateY(115%); transition:transform .55s cubic-bezier(.2,1.35,.35,1); } @media (max-width:880px){ .otr-sticky-cta{ display:flex; } } .otr-sticky-cta.is-visible{ transform:translateY(0); } .otr-sticky-cta > *{ min-height:52px; display:flex; align-items:center; justify-content:center; border-radius:999px; border:0; cursor:pointer; font-family:inherit; font-size:13px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; text-decoration:none; -webkit-tap-highlight-color:transparent; } .otr-sticky-book{ flex:1 1 auto; background:linear-gradient(135deg, var(--cyan), var(--cyan-dark)); color:#fff !important; box-shadow:0 4px 18px rgba(0,184,230,0.45); } .otr-sticky-call{ flex:0 0 38%; background:rgba(255,255,255,0.06); color:var(--cyan-light) !important; box-shadow:inset 0 0 0 1px rgba(0,184,230,0.45); } @media (max-width:880px){ body.otr-has-sticky-cta{ padding-bottom:78px; } } @media (prefers-reduced-motion:reduce){ .otr-sticky-cta{ transition:none; } }