:root{ --bg:#111214; --panel:#191B1E; --panel-2:#222529; --line:#32363B; --text:#F4F4F2; --muted:#92979D; --accent:#F28C28; --accent-2:#FFAA4C; --max:1180px; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background: radial-gradient(circle at 50% -20%,rgba(242,140,40,.13),transparent 34%), var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; } a{ color:inherit; text-decoration:none; } .nav{ width:min(calc(100% - 40px),var(--max)); height:78px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; } .brand{ display:flex; align-items:center; gap:11px; font-size:16px; font-weight:800; letter-spacing:-.3px; } .brand-icon{ width:36px; height:36px; padding:7px; display:grid; grid-template-columns:1fr 1fr; gap:3px; border:1px solid rgba(242,140,40,.30); border-radius:11px; background:linear-gradient( 145deg, rgba(242,140,40,.24), rgba(255,170,76,.07) ); } .brand-icon i, .mini-grid i{ background:#F4A04B; border-radius:2px; } .nav-cta, .primary{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 19px; border-radius:12px; border:1px solid rgba(242,140,40,.48); background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#17120D; font-size:14px; font-weight:800; box-shadow:0 12px 35px rgba(242,140,40,.14); transition:.2s ease; } .nav-cta:hover, .primary:hover{ transform:translateY(-2px); box-shadow:0 16px 45px rgba(242,140,40,.22); } main{ overflow:hidden; } .hero{ width:min(calc(100% - 40px),980px); margin:110px auto 70px; text-align:center; } .eyebrow{ margin-bottom:20px; color:#F4A04B; font-size:11px; font-weight:800; letter-spacing:2.3px; } .hero h1{ margin:0; font-size:clamp(54px,8vw,96px); line-height:.94; letter-spacing:-5px; } .hero-copy{ max-width:680px; margin:30px auto 0; color:var(--muted); font-size:18px; } .hero-actions{ margin-top:32px; display:flex; align-items:center; justify-content:center; gap:18px; } .hero-actions span{ color:#747980; font-size:12px; } .sources{ margin-top:44px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; } .sources span, .usecases span{ padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:rgba(25,27,30,.72); color:#A8ADB3; font-size:11px; } .preview{ width:min(calc(100% - 40px),var(--max)); margin:0 auto; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:#151719; box-shadow: 0 35px 100px rgba(0,0,0,.38), 0 0 70px rgba(242,140,40,.05); } .preview-bar{ display:grid; grid-template-columns:auto minmax(160px,1fr) auto; gap:10px; align-items:center; padding:12px; border-bottom:1px solid var(--line); } .preview-brand{ display:flex; align-items:center; gap:8px; padding-right:12px; font-size:12px; font-weight:750; } .mini-grid{ width:27px; height:27px; display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:5px; border-radius:8px; background:rgba(242,140,40,.14); } .fake-input{ height:40px; display:flex; align-items:center; padding:0 13px; border:1px solid #30343A; border-radius:10px; background:#1A1C1F; color:#737980; font-size:11px; text-align:left; } .fake-button{ height:40px; padding:0 15px; display:flex; align-items:center; border-radius:10px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#17120D; font-size:11px; font-weight:800; } .preview-grid{ height:560px; padding:9px; display:grid; grid-template-columns:1fr 1fr; gap:8px; } .video-placeholder{ position:relative; overflow:hidden; border:1px solid #292D31; border-radius:14px; background: radial-gradient(circle at 70% 20%,rgba(242,140,40,.09),transparent 30%), linear-gradient(145deg,#191B1E,#0D0E10); } .video-placeholder::before{ content:""; position:absolute; width:180px; height:180px; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(242,140,40,.12); border-radius:50%; } .video-placeholder span{ position:absolute; left:12px; bottom:11px; padding:5px 8px; border-radius:7px; background:rgba(10,11,12,.78); color:#727880; font-size:9px; font-weight:800; letter-spacing:1px; } .benefits{ width:min(calc(100% - 40px),var(--max)); margin:110px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .benefits article{ min-height:220px; padding:28px; border:1px solid var(--line); border-radius:18px; background:linear-gradient( 145deg, rgba(27,29,32,.94), rgba(17,18,20,.94) ); } .benefits article > span{ color:#F28C28; font-size:10px; font-weight:800; letter-spacing:1.5px; } .benefits h2{ margin:52px 0 8px; font-size:22px; letter-spacing:-.7px; } .benefits p{ margin:0; color:var(--muted); font-size:13px; } .usecases{ width:min(calc(100% - 40px),var(--max)); margin:90px auto 0; padding-top:28px; border-top:1px solid var(--line); } .usecases > p{ margin:0 0 16px; color:#747A81; font-size:10px; font-weight:800; letter-spacing:1.7px; text-transform:uppercase; } .usecases div{ display:flex; flex-wrap:wrap; gap:8px; } .final-cta{ width:min(calc(100% - 40px),900px); margin:150px auto 130px; text-align:center; } .final-cta h2{ margin:0 0 32px; font-size:clamp(48px,7vw,82px); line-height:.95; letter-spacing:-4px; } footer{ width:min(calc(100% - 40px),var(--max)); margin:0 auto; padding:28px 0 36px; display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); color:#747A81; font-size:11px; } footer strong{ color:#B1B5BA; } ::selection{ background:rgba(242,140,40,.30); color:#FFF; } @media(max-width:800px){ .hero{ margin-top:75px; } .hero h1{ letter-spacing:-3px; } .hero-copy{ font-size:16px; } .preview-grid{ height:520px; grid-template-columns:1fr; } .preview-grid .video-placeholder:nth-child(n+3){ display:none; } .benefits{ grid-template-columns:1fr; } .benefits article{ min-height:180px; } .benefits h2{ margin-top:35px; } } @media(max-width:560px){ .nav{ width:calc(100% - 28px); } .nav-cta{ height:40px; padding:0 13px; font-size:12px; } .hero{ width:calc(100% - 28px); margin-top:60px; } .hero h1{ font-size:52px; } .hero-actions{ flex-direction:column; } .preview{ width:calc(100% - 20px); border-radius:16px; } .preview-bar{ grid-template-columns:1fr auto; } .preview-brand{ display:none; } .benefits, .usecases{ width:calc(100% - 28px); } footer{ width:calc(100% - 28px); flex-direction:column; } }