{} *{} /*endBaseStyles*/ #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } :root{ --green:#64b93a; --green-dark:#2f8d21; --lime:#83d84f; --navy:#071426; --navy-2:#0b1d35; --blue:#00a8ff; --ink:#10131a; --muted:#5c6470; --line:#dfe6ee; --white:#ffffff; --soft:#f7fafc; --soft-green:#f3fbef; --shadow:0 20px 55px rgba(4,22,40,.16); --max:1160px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:"Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:#fff; line-height:1.55; } a{text-decoration:none;color:inherit} button,input{font:inherit} .container{max-width:var(--max);margin:auto;padding-inline:22px} .nav{ height:70px; background:#fff; border-bottom:1px solid rgba(0,0,0,.08); position:sticky; top:0; z-index:100; box-shadow:0 4px 20px rgba(0,0,0,.05); } .nav .container{ height:70px; display:flex; align-items:center; justify-content:space-between; gap:26px; } .brand{ display:flex; align-items:center; gap:10px; font-family:Inter, sans-serif; font-weight:900; font-size:20px; color:#10131a; letter-spacing:-.03em; white-space:nowrap; } .brand-icon{ width:37px; height:37px; border-radius:50%; display:grid; place-items:center; color:var(--green-dark); border:3px solid var(--green); position:relative; } .brand-icon:before{ content:""; width:12px; height:20px; background:currentColor; clip-path:polygon(55% 0, 12% 48%, 48% 48%, 34% 100%, 88% 38%, 53% 38%); display:block; } .nav-links{ display:flex; align-items:center; gap:30px; font-family:Lato, sans-serif; font-weight:700; font-size:14px; color:#1c2734; } .nav-links a{ padding:25px 0 21px; border-bottom:3px solid transparent; transition:.2s; } .nav-links a:hover, .nav-links a.active{ color:var(--green-dark); border-bottom-color:var(--green); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:46px; padding:13px 25px; border-radius:4px; border:0; background:linear-gradient(180deg,var(--green),var(--green-dark)); color:#fff; font-family:Lato, sans-serif; font-weight:900; font-size:15px; box-shadow:0 10px 22px rgba(61,153,38,.24); transition:.2s ease; cursor:pointer; text-align:center; } .btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(61,153,38,.32)} .btn svg{width:18px} .btn.ghost{ background:transparent; box-shadow:none; color:#fff; padding-inline:12px; } .btn.ghost .play{ width:44px; height:44px; border:3px solid #fff; border-radius:50%; display:grid; place-items:center; } .btn.ghost .play:before{ content:""; border-left:12px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:3px; } .hero{ min-height:610px; color:#fff; position:relative; overflow:hidden; background: linear-gradient(90deg,rgba(1,9,20,.96) 0%,rgba(2,14,28,.89) 38%,rgba(2,14,28,.32) 68%,rgba(1,9,20,.12) 100%), radial-gradient(circle at 75% 42%,rgba(0,168,255,.9) 0 3%,rgba(0,168,255,.34) 4% 12%,transparent 30%), linear-gradient(120deg,#061222,#0b203a 48%,#071426 100%); } .hero:before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 76% 42%,transparent 0 7%,rgba(41,190,255,.3) 7.2% 7.6%,transparent 8% 12%,rgba(41,190,255,.22) 12.3% 12.8%,transparent 13%), repeating-conic-gradient(from 0deg at 76% 42%, rgba(105,218,255,.65) 0deg 1.5deg, transparent 1.6deg 15deg); opacity:.55; mask-image:radial-gradient(circle at 76% 42%,#000 0 31%,transparent 54%); pointer-events:none; } .hero:after{ content:""; position:absolute; inset:0; background: linear-gradient(110deg,transparent 0 56%,rgba(0,168,255,.24) 56.3% 56.7%,transparent 57%), linear-gradient(20deg,transparent 0 65%,rgba(0,168,255,.30) 65.3% 65.8%,transparent 66%), linear-gradient(155deg,transparent 0 66%,rgba(0,168,255,.22) 66.2% 66.7%,transparent 67%); opacity:.55; pointer-events:none; } .hero .container{ position:relative; z-index:2; min-height:610px; display:grid; grid-template-columns:.95fr 1.05fr; align-items:center; gap:48px; padding-top:36px; padding-bottom:42px; } .hero-copy{max-width:560px} .eyebrow{ display:inline-flex; align-items:center; gap:8px; color:#bcecff; font-family:Lato, sans-serif; font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size:12px; margin-bottom:18px; } .eyebrow:before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 7px rgba(131,216,79,.18); } h1,h2,h3{ font-family:Inter, sans-serif; line-height:1.08; margin:0; letter-spacing:-.045em; } h1{ font-size:clamp(46px,6vw,82px); font-weight:900; max-width:620px; text-shadow:0 8px 34px rgba(0,0,0,.35); } h1 span{display:block;color:var(--lime)} .hero-sub{ margin:20px 0 0; font-size:21px; line-height:1.36; max-width:560px; color:#fff; font-weight:700; } .hero-detail{ margin:19px 0 0; color:#d8e7f7; font-size:17px; max-width:510px; } .hero-actions{ margin-top:34px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .hero-points{ margin-top:54px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:700px; } .point{ display:flex; align-items:center; gap:14px; padding-right:20px; border-right:1px solid rgba(255,255,255,.24); } .point:last-child{border-right:0} .point-icon{ width:43px; height:43px; flex:0 0 43px; color:var(--lime); display:grid; place-items:center; font-size:38px; line-height:1; } .point b{display:block;font-family:Lato,sans-serif;font-size:16px;color:#fff} .point span{display:block;color:#d8e7f7;font-size:13px;line-height:1.25} .machine{ justify-self:end; width:min(100%,520px); aspect-ratio:1.05; position:relative; display:grid; place-items:center; filter:drop-shadow(0 30px 55px rgba(0,0,0,.45)); } .machine-base{ position:absolute; bottom:55px; width:78%; height:48px; border-radius:5px; background:linear-gradient(180deg,#637083,#151d29); box-shadow:0 18px 45px rgba(0,0,0,.5); } .ring{ width:78%; aspect-ratio:1; border-radius:50%; background: radial-gradient(circle,#fff 0 5%,#8be9ff 5.5% 8%,transparent 8.5%), repeating-radial-gradient(circle,transparent 0 21px,rgba(70,218,255,.62) 22px 24px), conic-gradient(from 10deg,#1d2d43,#3f5f77,#0b1828,#486f85,#142338); border:14px solid #476172; box-shadow: inset 0 0 35px rgba(255,255,255,.14), inset 0 0 80px rgba(0,168,255,.34), 0 0 85px rgba(0,168,255,.54); position:relative; animation:spin 26s linear infinite; } .ring:before{ content:""; position:absolute; inset:9%; border-radius:50%; border:3px solid rgba(142,234,255,.8); box-shadow:0 0 22px rgba(0,168,255,.9), inset 0 0 22px rgba(0,168,255,.9); } .ring:after{ content:""; position:absolute; inset:37%; border-radius:50%; background:#fff; box-shadow:0 0 26px 15px #8be9ff,0 0 70px 35px rgba(0,168,255,.75); } .tower{ position:absolute; right:4%; bottom:88px; width:52px; height:270px; border-radius:12px; background:linear-gradient(90deg,#242c39,#87909a,#1c2430); transform:skewY(-6deg); box-shadow:inset 0 0 15px rgba(255,255,255,.15); } .spark{ position:absolute; height:4px; background:#7ee8ff; box-shadow:0 0 12px #00a8ff,0 0 25px #00a8ff; transform-origin:left center; border-radius:99px; opacity:.75; } .spark.s1{width:180px;left:12%;top:22%;transform:rotate(-26deg)} .spark.s2{width:220px;right:0;top:35%;transform:rotate(12deg)} .spark.s3{width:160px;left:6%;bottom:39%;transform:rotate(18deg)} @keyframes spin{to{transform:rotate(360deg)}} section{padding:74px 0} .section-title{text-align:center;margin-bottom:34px} .section-title h2{ font-size:clamp(30px,4vw,42px); font-weight:900; color:#0f1420; } .section-title p{ max-width:650px; margin:14px auto 0; color:#3f4854; font-size:16px; } .benefit-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:26px; } .benefit-card{ min-height:235px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:30px 26px; text-align:center; box-shadow:0 10px 30px rgba(8,26,46,.04); transition:.2s ease; } .benefit-card:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(8,26,46,.10); border-color:#c7e8bb; } .benefit-icon{ width:64px; height:64px; margin:0 auto 18px; color:var(--green-dark); } .benefit-card h3{ font-size:17px; font-weight:900; letter-spacing:-.025em; margin-bottom:16px; } .benefit-card p{ margin:0; color:#323b46; font-size:14px; line-height:1.55; } .pain-section{ background:#f8fbff; border-top:1px solid #edf1f5; border-bottom:1px solid #edf1f5; } .pain-layout{ display:grid; grid-template-columns:.95fr 1.05fr; gap:34px; align-items:start; } .letter{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:32px; box-shadow:0 12px 34px rgba(8,26,46,.06); } .letter h2{ font-size:34px; font-weight:900; margin-bottom:18px; } .letter p{color:#3e4852;margin:12px 0} .letter strong{color:#10131a} .pain-list{ display:grid; gap:14px; } .pain-item{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px; box-shadow:0 12px 34px rgba(8,26,46,.05); } .q-icon{ flex:0 0 31px; width:31px; height:31px; border-radius:50%; display:grid; place-items:center; color:var(--green-dark); border:2px solid var(--green); font-weight:900; } .pain-item h3{font-size:18px;font-weight:900;margin-bottom:5px} .pain-item p{margin:0;color:#505b66;font-size:14px} .presentation{ background: radial-gradient(circle at 67% 36%,rgba(0,168,255,.18),transparent 26%), linear-gradient(115deg,#071426 0%,#0d213b 56%,#06101f 100%); color:#fff; padding:82px 0; overflow:hidden; } .presentation-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:62px; align-items:center; } .presentation h2{ color:#fff; font-size:clamp(30px,4vw,44px); font-weight:900; } .presentation p{ color:#d5e4f2; font-size:16px; max-width:540px; } .checks{ list-style:none; padding:0; margin:24px 0 28px; display:grid; gap:12px; } .checks li{ display:flex; align-items:center; gap:11px; color:#fff; font-size:15px; } .checks li:before{ content:"✓"; width:21px; height:21px; border-radius:50%; border:2px solid var(--lime); color:var(--lime); display:grid; place-items:center; font-weight:900; font-size:12px; flex:0 0 21px; } .laptop{ position:relative; max-width:520px; margin:auto; padding-bottom:32px; } .screen{ aspect-ratio:16/10; border-radius:12px 12px 3px 3px; background: linear-gradient(rgba(5,18,36,.18),rgba(5,18,36,.48)), radial-gradient(circle at 45% 55%,rgba(255,255,255,.7),transparent 9%), linear-gradient(135deg,#19466d,#68b955 52%,#dbeaf5); border:10px solid #1b2b3d; box-shadow:0 18px 45px rgba(0,0,0,.45); display:grid; place-items:center; text-align:center; position:relative; overflow:hidden; } .screen:before{ content:""; position:absolute; inset:0; background: linear-gradient(160deg,transparent 0 55%,rgba(255,255,255,.28) 55.2% 56%,transparent 56.2%), repeating-linear-gradient(15deg,rgba(255,255,255,.10) 0 1px,transparent 1px 55px); opacity:.8; } .screen-content{position:relative;z-index:2} .screen-content b{ display:block; font-family:Inter,sans-serif; font-size:34px; line-height:1; letter-spacing:-.045em; color:#fff; text-shadow:0 3px 14px rgba(0,0,0,.4); } .screen-content span{ display:block; margin-top:8px; color:#fff; font-weight:700; } .play-large{ width:66px; height:66px; margin:20px auto 0; background:rgba(255,255,255,.9); border-radius:50%; display:grid; place-items:center; box-shadow:0 15px 35px rgba(0,0,0,.25); } .play-large:before{ content:""; border-left:18px solid #536070; border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:5px; } .keyboard{ position:absolute; left:4%; right:4%; bottom:2px; height:34px; border-radius:0 0 18px 18px; background:linear-gradient(180deg,#c8d0d7,#6d7680); box-shadow:0 16px 28px rgba(0,0,0,.35); } .value-section{background:#fff} .value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .value{ border:1px solid var(--line); border-radius:10px; padding:23px; min-height:190px; background:#fff; } .value-number{ color:var(--green-dark); font-family:Inter,sans-serif; font-weight:900; font-size:14px; margin-bottom:14px; } .value h3{font-size:18px;font-weight:900;margin-bottom:10px} .value p{color:#4f5b66;font-size:14px;margin:0} .faq{ background:#fff; padding-top:64px; } .faq h2{text-align:center;font-size:30px;font-weight:900;margin-bottom:28px} .faq-grid{ display:grid; grid-template-columns:1.7fr .8fr; gap:32px; align-items:stretch; } .faq-list{display:grid;gap:14px} details{ border:1px solid var(--line); border-radius:6px; background:#fff; padding:0; overflow:hidden; } summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 18px; font-weight:700; color:#1f2935; } summary::-webkit-details-marker{display:none} summary:before{ content:"?"; width:24px; height:24px; border-radius:50%; border:2px solid var(--green); color:var(--green-dark); display:grid; place-items:center; font-size:13px; font-weight:900; flex:0 0 24px; } summary:after{ content:"⌄"; margin-left:auto; font-size:18px; color:#1d2733; } details[open] summary:after{transform:rotate(180deg)} details p{ padding:0 18px 18px 58px; margin:0; color:#525d68; font-size:14px; } .faq-cta{ border:1px solid #d5eacb; border-radius:8px; background:linear-gradient(135deg,#f7fff3,#edf8e8); padding:34px; display:grid; align-content:center; justify-items:center; text-align:center; } .faq-cta .bolt{ font-size:58px; color:var(--green-dark); line-height:1; margin-bottom:18px; } .faq-cta h3{font-size:22px;font-weight:900;margin-bottom:14px} .faq-cta p{color:#3f4854;font-size:14px;margin:0 0 24px} footer{ background: radial-gradient(circle at 15% 0%,rgba(0,168,255,.13),transparent 26%), linear-gradient(180deg,#071426,#06111f); color:#d8e1eb; padding:42px 0 20px; } .footer-grid{ display:grid; grid-template-columns:1.35fr .7fr .9fr 1.2fr; gap:44px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.08); } footer .brand{color:#fff;font-size:18px;margin-bottom:16px} footer p{color:#b7c3cf;font-size:14px;margin:0} .socials{display:flex;gap:10px;margin-top:22px} .socials a{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.12); color:#fff; font-size:13px; } footer h3{ color:#fff; font-size:15px; font-weight:900; margin-bottom:14px; } .footer-links{ display:grid; gap:7px; font-size:14px; color:#d8e1eb; } .subscribe{ display:flex; margin-top:16px; border-radius:3px; overflow:hidden; border:1px solid rgba(255,255,255,.14); } .subscribe input{ flex:1; border:0; min-width:0; padding:13px 14px; font-size:13px; } .subscribe button{ border:0; background:linear-gradient(180deg,var(--green),var(--green-dark)); color:#fff; font-weight:900; padding:0 18px; cursor:pointer; font-size:13px; } .footer-bottom{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:20px; color:#b7c3cf; font-size:13px; } .legal{display:flex;gap:28px} .disclaimer{ margin-top:18px; color:#8fa0af; font-size:12px; max-width:980px; } @media (max-width: 1050px){ .nav-links{display:none} .hero .container, .pain-layout, .presentation-grid, .faq-grid{grid-template-columns:1fr} .machine{justify-self:center} .benefit-cards,.value-grid{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr} } @media (max-width: 680px){ .nav{height:64px} .nav .container{height:64px} .brand{font-size:17px} .nav .btn{display:none} .hero{min-height:auto} .hero .container{min-height:auto;padding-top:52px} h1{font-size:46px} .hero-sub{font-size:19px} .hero-points{grid-template-columns:1fr;margin-top:36px} .point{border-right:0;border-bottom:1px solid rgba(255,255,255,.18);padding:0 0 16px} .machine{width:100%;margin-top:4px} section{padding:58px 0} .benefit-cards,.value-grid,.footer-grid{grid-template-columns:1fr} .hero-actions .btn{width:100%} .btn.ghost{width:auto} .presentation-grid{gap:38px} .footer-bottom{display:grid} }