/* ========== Premium fluid background (Saturn style) ========== */ :root{ --bg-base: #070A12; --wave1: rgba(126, 87, 255, .42); --wave2: rgba(255, 132, 211, .34); --wave3: rgba(75, 195, 255, .28); --grain: .06; } /* Each page sets its own palette via class on */ body.bg-a{ --wave1: rgba(126, 87, 255, .42); --wave2: rgba(255, 132, 211, .32); --wave3: rgba(75, 195, 255, .24); } body.bg-b{ --wave1: rgba(75, 195, 255, .34); --wave2: rgba(126, 87, 255, .30); --wave3: rgba(46, 230, 166, .22); } body.bg-c{ --wave1: rgba(255, 132, 211, .34); --wave2: rgba(75, 195, 255, .26); --wave3: rgba(126, 87, 255, .22); } body.bg-d{ --wave1: rgba(46, 230, 166, .26); --wave2: rgba(126, 87, 255, .28); --wave3: rgba(75, 195, 255, .22); } body.bg-e{ --wave1: rgba(255, 132, 211, .26); --wave2: rgba(126, 87, 255, .22); --wave3: rgba(75, 195, 255, .18); } body.bg-pay{ --wave1: rgba(126, 87, 255, .36); --wave2: rgba(46, 230, 166, .22); --wave3: rgba(75, 195, 255, .22); } body{ background: radial-gradient(1200px 700px at 20% 35%, var(--wave1), transparent 55%), radial-gradient(1100px 720px at 76% 18%, var(--wave2), transparent 58%), radial-gradient(1200px 780px at 32% 92%, var(--wave3), transparent 60%), linear-gradient(180deg, rgba(8,10,18,1) 0%, rgba(6,8,15,1) 65%, rgba(6,8,15,1) 100%); background-attachment: fixed; position: relative; overflow-x: hidden; } /* moving sheen */ body::before{ content:""; position: fixed; inset: -20%; background: radial-gradient(900px 520px at 35% 35%, rgba(255,255,255,.08), transparent 60%), radial-gradient(900px 520px at 70% 55%, rgba(255,255,255,.06), transparent 62%); filter: blur(28px); opacity: .55; transform: translate3d(0,0,0); animation: saturnSheen 14s ease-in-out infinite; pointer-events: none; z-index: -2; } @keyframes saturnSheen{ 0%{ transform: translate3d(-2%, -2%, 0) scale(1.02); } 50%{ transform: translate3d(2%, 2%, 0) scale(1.05); } 100%{ transform: translate3d(-2%, -2%, 0) scale(1.02); } } /* subtle grain */ body::after{ content:""; position: fixed; inset:0; pointer-events:none; background-image: radial-gradient(circle at 10% 10%, rgba(255,255,255,var(--grain)) 0 1px, transparent 2px), radial-gradient(circle at 40% 30%, rgba(255,255,255,calc(var(--grain)*.7)) 0 1px, transparent 2px), radial-gradient(circle at 70% 60%, rgba(255,255,255,calc(var(--grain)*.55)) 0 1px, transparent 2px); background-size: 220px 220px, 260px 260px, 300px 300px; mix-blend-mode: overlay; opacity:.12; filter: blur(.2px); z-index:-1; } /* page fade */ body{ opacity:0; animation: pageIn 520ms var(--ease) forwards; } body.isLeaving{ opacity:1; animation: pageOut 360ms var(--ease) forwards; } @keyframes pageIn{ to { opacity:1; } } @keyframes pageOut{ to { opacity:0; transform: translateY(6px); } } :root{ --bg:#070A12; --panel:#0B1020; --text:#EAF0FF; --muted:#9AA8C7; --line:rgba(255,255,255,.10); --brand:#6D5EF7; --brand2:#2EE6A6; --shadow: 0 20px 60px rgba(0,0,0,.45); --radius:18px; --max: 1120px; --ease: cubic-bezier(.16, 1, .3, 1); --press: cubic-bezier(.2, .9, .2, 1); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Noto Sans", "Helvetica Neue", sans-serif; color:var(--text); line-height:1.45; /* smoother premium gradients (variant-controlled) */ background: radial-gradient(1200px 720px at var(--g1x,16%) var(--g1y,-10%), rgba(109,94,247,var(--g1a,.40)) 0%, rgba(109,94,247,calc(var(--g1a,.40)*.60)) 24%, rgba(109,94,247,calc(var(--g1a,.40)*.30)) 44%, rgba(109,94,247,calc(var(--g1a,.40)*.12)) 60%, rgba(109,94,247,0) 76% ), radial-gradient(1040px 720px at var(--g2x,92%) var(--g2y,10%), rgba(46,230,166,var(--g2a,.22)) 0%, rgba(46,230,166,calc(var(--g2a,.22)*.64)) 26%, rgba(46,230,166,calc(var(--g2a,.22)*.36)) 44%, rgba(46,230,166,calc(var(--g2a,.22)*.18)) 60%, rgba(46,230,166,0) 78% ), radial-gradient(1100px 820px at var(--g3x,52%) var(--g3y,118%), rgba(109,94,247,var(--g3a,.22)) 0%, rgba(109,94,247,calc(var(--g3a,.22)*.55)) 30%, rgba(109,94,247,calc(var(--g3a,.22)*.27)) 48%, rgba(109,94,247,calc(var(--g3a,.22)*.14)) 62%, rgba(109,94,247,0) 80% ), linear-gradient(180deg, rgba(9,12,22,1) 0%, rgba(7,10,18,1) 40%, rgba(7,10,18,1) 100%), var(--bg); background-attachment: fixed; } a{color:inherit;text-decoration:none} .wrap{max-width:var(--max);margin:0 auto;padding:0 20px} /* Buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:12px 18px;border-radius:14px;border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); box-shadow:0 10px 30px rgba(0,0,0,.25); font-weight:650; cursor:pointer; user-select:none; white-space:nowrap; -webkit-tap-highlight-color: transparent; transform: translateZ(0) translateY(0) scale(1); transition: transform 800ms var(--ease), box-shadow 800ms var(--ease), filter 800ms var(--ease), border-color 800ms var(--ease), background 800ms var(--ease); will-change: transform; } .btn.primary{ border:none; background:linear-gradient(90deg, var(--brand), #8B7CFF 55%, #A9A0FF); box-shadow:0 20px 60px rgba(109,94,247,.28); } .btn.ghost{background:transparent} .btn:hover{ transform: translateZ(0) translateY(0) scale(.985); filter: brightness(1.07); border-color: rgba(255,255,255,.22); box-shadow: 0 18px 55px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08), 0 0 28px rgba(109,94,247,.20); } .btn.primary:hover{ box-shadow: 0 24px 80px rgba(109,94,247,.34), 0 0 34px rgba(109,94,247,.26); } .btn:active{ transform: translateZ(0) translateY(1px) scale(.982); filter: brightness(1.08); } .btn.clicked{ animation: btnPress 1s var(--press) both; } @keyframes btnPress{ 0%{ transform: translateZ(0) translateY(0) scale(.985); filter: brightness(1.03); } 20%{ transform: translateZ(0) translateY(2px) scale(.972); filter: brightness(1.12); box-shadow: 0 28px 95px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.10), 0 0 46px rgba(46,230,166,.18), 0 0 46px rgba(109,94,247,.22); } 55%{ transform: translateZ(0) translateY(1px) scale(.982); filter: brightness(1.08); box-shadow: 0 22px 75px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.10), 0 0 40px rgba(109,94,247,.20); } 100%{ transform: translateZ(0) translateY(0) scale(1); filter: none; } } .btn:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(109,94,247,.35), 0 0 0 1px rgba(255,255,255,.10), 0 18px 55px rgba(0,0,0,.35); } /* Header */ header{ position:sticky;top:0;z-index:80; backdrop-filter: blur(14px); background:rgba(7,10,18,.55); border-bottom:1px solid var(--line); } .nav{ display:flex;align-items:center;justify-content:space-between; height:72px; gap:18px; } .brand{ display:flex;align-items:center;gap:6px; font-weight:700; letter-spacing:.2px; } .logoImg{ width:64px;height:64px; object-fit:contain; display:block; filter: drop-shadow(0 0 14px rgba(90,180,255,.35)) drop-shadow(0 0 28px rgba(90,180,255,.20)); } .brandText{ font-size:28px; font-weight:600; letter-spacing:.5px; line-height:1; transform: translateY(-1px); } .menu{display:flex;gap:18px;align-items:center} .menu a, .menu button{ color:var(--muted); font-weight:650; font-size:14px; background:none; border:none; padding:10px 10px; border-radius:12px; cursor:pointer; transition: color 350ms var(--ease), background 350ms var(--ease), box-shadow 350ms var(--ease), transform 350ms var(--ease); } .menu a:hover{color:var(--text)} .navRight{display:flex;gap:10px;align-items:center} .lang{display:none} /* Dropdowns (click-to-open, stays open) */ .dropdown{position:relative} .dropdownTrigger{ display:inline-flex; align-items:center; gap:8px; } .chev{ width:12px;height:12px; opacity:.9; transition: transform 350ms var(--ease); } .dropdown.open .dropdownTrigger{ color:var(--text); background:rgba(255,255,255,.05); box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 0 26px rgba(109,94,247,.18); transform: scale(.99); } .dropdown.open .chev{ transform: rotate(180deg); } .dropdownMenu{ position:absolute; top:calc(100% + 10px); left:0; min-width: 320px; padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(20,26,44,.90), rgba(12,16,32,.86)); backdrop-filter: blur(14px); box-shadow: 0 25px 80px rgba(0,0,0,.55); z-index:90; opacity:0; transform: translateY(8px); filter: blur(4px); pointer-events:none; visibility:hidden; transition: opacity 260ms var(--ease), transform 260ms var(--ease), filter 260ms var(--ease), visibility 0ms linear 260ms; } .dropdown.open .dropdownMenu{ opacity:1; transform: translateY(0); filter: blur(0); pointer-events:auto; visibility:visible; transition: opacity 260ms var(--ease), transform 260ms var(--ease), filter 260ms var(--ease), visibility 0ms; } .ddItem{ display:flex; align-items:center; gap:12px; padding:12px 12px; border-radius:14px; color:rgba(234,240,255,.92); transition: background 250ms var(--ease), transform 250ms var(--ease), box-shadow 250ms var(--ease); } .ddItem:hover{ background:rgba(255,255,255,.06); transform: scale(.99); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 24px rgba(46,230,166,.12); } .ddIcon{ width:34px;height:34px; border-radius:12px; display:flex;align-items:center;justify-content:center; background: rgba(109,94,247,.14); border: 1px solid rgba(109,94,247,.22); flex:0 0 auto; } .ddText b{display:block; font-size:14px; margin-bottom:2px} .ddText span{display:block; font-size:12px; color:var(--muted)} /* Sections */ .hero{padding:58px 0 26px} .gridHero{display:grid;grid-template-columns: 1.15fr .85fr;gap:24px;align-items:stretch;} .kicker{ display:inline-flex;gap:10px;align-items:center; color:var(--muted); border:1px solid var(--line); background:rgba(255,255,255,.04); padding:8px 12px;border-radius:999px; font-weight:650;font-size:13px; } .dot{width:8px;height:8px;border-radius:99px;background:var(--brand2);box-shadow:0 0 0 6px rgba(46,230,166,.12)} h1{margin:16px 0 10px;font-size:48px;line-height:1.05;letter-spacing:-.8px;} .sub{color:var(--muted);font-size:16px;max-width:56ch;margin:0 0 22px} .heroActions{display:flex;gap:12px;flex-wrap:wrap} .metaRow{display:flex;gap:16px;align-items:center;margin-top:18px;color:var(--muted);font-size:13px} .badgeRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .badge{padding:8px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);font-weight:650;font-size:12px;} .card{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));box-shadow:var(--shadow);} .heroCard{ padding:18px;display:flex;flex-direction:column;gap:14px;min-height:320px; background: radial-gradient(500px 260px at 30% 0%, rgba(109,94,247,.30), transparent 60%), radial-gradient(500px 260px at 80% 30%, rgba(46,230,166,.18), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); } .heroCard h3{margin:0;font-size:16px} .mini{border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.20);padding:12px;} .miniTitle{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .pill{font-size:12px;font-weight:750;color:rgba(234,240,255,.92);padding:6px 10px;border-radius:999px;background:rgba(109,94,247,.18);border:1px solid rgba(109,94,247,.35);} .stat{display:grid;grid-template-columns:1fr 1fr;gap:10px} .stat .mini{padding:12px} .bigNum{font-size:24px;font-weight:900;letter-spacing:-.4px} .small{color:var(--muted);font-size:12px} section{padding:44px 0} .sectionHead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:16px} .sectionHead h2{margin:0;font-size:28px;letter-spacing:-.3px} .sectionHead p{margin:0;color:var(--muted);max-width:64ch} .timeline{display:grid;grid-template-columns: repeat(4,1fr);gap:12px;} .tItem{padding:16px} .tYear{font-weight:900;color:rgba(234,240,255,.95)} .tText{margin-top:8px;color:var(--muted);font-size:13px} .twoCols{display:grid;grid-template-columns:1fr 1fr;gap:14px} .list{padding:18px;} .li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);} .li:last-child{border-bottom:none} .ic{width:30px;height:30px;border-radius:12px;background:rgba(109,94,247,.18);border:1px solid rgba(109,94,247,.28);display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 12px 30px rgba(109,94,247,.10);} .li b{display:block;margin-bottom:4px} .li span{color:var(--muted);font-size:13px} .featureGrid{display:grid;grid-template-columns: repeat(3,1fr);gap:12px;} .f{padding:16px} .f h3{margin:10px 0 6px;font-size:16px} .f p{margin:0;color:var(--muted);font-size:13px} .useGrid{display:grid;grid-template-columns: repeat(2,1fr);gap:12px;} .cta{ padding:22px;display:flex;align-items:center;justify-content:space-between;gap:14px; background: radial-gradient(700px 260px at 10% 0%, rgba(109,94,247,.35), transparent 65%), radial-gradient(700px 260px at 90% 40%, rgba(46,230,166,.20), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); } .cta h3{margin:0;font-size:18px} .cta p{margin:6px 0 0;color:var(--muted);font-size:13px} .compare{padding:18px;overflow:auto;} table{width:100%;border-collapse:separate;border-spacing:0;min-width:760px;} th, td{ text-align:left; padding:14px 14px; border-bottom:1px solid var(--line); color:rgba(234,240,255,.95); font-size:13px; vertical-align:top;} th{ position:sticky; top:0; background:rgba(11,16,32,.75); backdrop-filter: blur(10px); font-size:12px; color:var(--muted); letter-spacing:.2px; text-transform:uppercase; } td span.m{color:var(--muted)} .yes{color:rgba(46,230,166,.95);font-weight:800} .no{color:rgba(255,255,255,.38);font-weight:800} .hotCol{outline: 1px solid rgba(109,94,247,.35);border-radius: 12px;box-shadow: 0 24px 80px rgba(109,94,247,.12);} footer{padding:44px 0 60px;border-top:1px solid var(--line);background:rgba(0,0,0,.12)} .footGrid{display:grid;grid-template-columns: 1.2fr 1fr 1fr 1fr;gap:12px} .footGrid h4{margin:0 0 10px;font-size:14px} .footGrid a{display:block;color:var(--muted);padding:6px 0;font-size:13px} .footGrid a:hover{color:var(--text)} .legal{margin-top:18px;color:var(--muted);font-size:12px;display:flex;gap:12px;flex-wrap:wrap} /* Simple page layout */ .pageHero{ padding:54px 0 18px; } .pageHero h1{font-size:40px;margin:0 0 10px} .pageHero p{margin:0;color:var(--muted);max-width:75ch} .kpiRow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px} .kpi{padding:16px} .kpi b{display:block;font-size:14px;margin-bottom:6px} .kpi span{color:var(--muted);font-size:13px} .split{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:start} .accordion .q{ width:100%; text-align:left; border:1px solid var(--line); background:rgba(255,255,255,.03); color:rgba(234,240,255,.95); padding:14px 14px; border-radius:14px; cursor:pointer; display:flex;align-items:center;justify-content:space-between;gap:12px; transition: transform 250ms var(--ease), box-shadow 250ms var(--ease), border-color 250ms var(--ease); } .accordion .q:hover{ transform: scale(.995); border-color: rgba(255,255,255,.18); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 24px rgba(109,94,247,.14); } .accordion .a{ display:none; padding:12px 14px 16px; color:var(--muted); font-size:13px; } .accordion .item{margin-bottom:10px} .accordion .item.open .a{display:block} .accordion .car{width:12px;height:12px;opacity:.9;transition: transform 250ms var(--ease)} .accordion .item.open .car{transform: rotate(180deg)} /* Background variants per page (subtle but distinct) */ body.bg-a{ --g1x:16%; --g1y:-10%; --g2x:92%; --g2y:10%; --g3x:52%; --g3y:118%; --g1a:.40; --g2a:.22; --g3a:.22; } body.bg-b{ --g1x:8%; --g1y:6%; --g2x:88%; --g2y:-8%; --g3x:60%; --g3y:120%; --g1a:.34; --g2a:.24; --g3a:.18; } body.bg-c{ --g1x:22%; --g1y:-14%; --g2x:98%; --g2y:18%; --g3x:44%; --g3y:112%; --g1a:.36; --g2a:.20; --g3a:.24; } body.bg-d{ --g1x:10%; --g1y:-18%; --g2x:80%; --g2y:6%; --g3x:54%; --g3y:126%; --g1a:.32; --g2a:.22; --g3a:.20; } body.bg-e{ --g1x:18%; --g1y:-8%; --g2x:96%; --g2y:-2%; --g3x:50%; --g3y:108%; --g1a:.38; --g2a:.18; --g3a:.20; } /* Mobile nav */ .burgerBtn{ width:44px;height:44px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.03); display:none; align-items:center; justify-content:center; cursor:pointer; transition: transform 350ms var(--ease), box-shadow 350ms var(--ease), border-color 350ms var(--ease), filter 350ms var(--ease); } .burgerBtn:hover{ transform: scale(.985); border-color: rgba(255,255,255,.18); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 26px rgba(109,94,247,.16); filter: brightness(1.06); } .burgerIcon{width:18px;height:18px;opacity:.9} /* Drawer */ .drawerBackdrop{ position:fixed; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(10px); opacity:0; pointer-events:none; transition: opacity 240ms var(--ease); z-index:110; } .drawer{ position:fixed; top:14px; right:14px; left:14px; max-width:520px; margin-left:auto; border-radius:18px; border:1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(20,26,44,.92), rgba(10,14,26,.88)); box-shadow: 0 28px 90px rgba(0,0,0,.60); transform: translateY(-10px) scale(.98); opacity:0; pointer-events:none; transition: transform 240ms var(--ease), opacity 240ms var(--ease); z-index:120; } .drawerHeader{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 10px; border-bottom:1px solid rgba(255,255,255,.08); } .drawerTitle{ display:flex; align-items:center; gap:10px; font-weight:750; } .drawerTitle .logoImg{width:44px;height:44px} .drawerClose{ width:42px;height:42px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); cursor:pointer; display:flex; align-items:center; justify-content:center; transition: transform 250ms var(--ease), filter 250ms var(--ease), border-color 250ms var(--ease); } .drawerClose:hover{ transform: scale(.985); filter: brightness(1.06); border-color: rgba(255,255,255,.18); } .drawerBody{ padding:12px 14px 14px; } .mNavLink{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); color: rgba(234,240,255,.94); margin-bottom:10px; transition: transform 250ms var(--ease), box-shadow 250ms var(--ease), border-color 250ms var(--ease); } .mNavLink:hover{ transform: scale(.995); border-color: rgba(255,255,255,.16); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 26px rgba(46,230,166,.12); } .mNavLink small{ color: var(--muted); font-weight:650; } .mAccPanel{ display:none; padding:0 0 10px; } .mAcc.open .mAccPanel{ display:block; } .mAccPanel a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; color: rgba(234,240,255,.92); border:1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.12); margin:8px 0; } .mAccPanel a:hover{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); } .drawerActions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; } .drawerActions .btn{ width:100%; } @media (min-width: 521px){ .drawerActions .btn{ width:auto; } } /* Open state */ body.drawerOpen{ overflow:hidden; } body.drawerOpen .drawerBackdrop{ opacity:1; pointer-events:auto; } body.drawerOpen .drawer{ opacity:1; pointer-events:auto; transform: translateY(0) scale(1); } /* Responsive */ @media (max-width: 980px){ .gridHero{grid-template-columns:1fr;} h1{font-size:40px} .timeline{grid-template-columns:1fr 1fr} .featureGrid{grid-template-columns:1fr 1fr} .useGrid{grid-template-columns:1fr} .footGrid{grid-template-columns:1fr 1fr} .menu{display:none} .lang{display:none} .burgerBtn{display:inline-flex} .split{grid-template-columns:1fr} .kpiRow{grid-template-columns:1fr} } @media (max-width: 520px){ h1{font-size:34px} .timeline{grid-template-columns:1fr} .featureGrid{grid-template-columns:1fr} .footGrid{grid-template-columns:1fr} .cta{flex-direction:column;align-items:flex-start} table{min-width: 680px;} .logoImg{width:54px;height:54px} .brandText{font-size:24px} } @media (max-width: 768px){ .wrap{ padding:0 14px; } header{ position:sticky; top:0; } .nav{ height:64px; gap:10px; } .brand{ gap:4px; min-width:0; } .logoImg{ width:46px; height:46px; flex:0 0 auto; } .brandText{ font-size:18px; line-height:0.95; letter-spacing:.2px; } .navRight{ gap:8px; flex:0 0 auto; } .burgerBtn{ width:42px; height:42px; border-radius:12px; } .navRight .btn{ padding:10px 14px; min-height:42px; font-size:14px; border-radius:14px; } .hero{ padding:26px 0 18px; } .gridHero{ gap:16px; } .kicker{ font-size:12px; line-height:1.35; padding:8px 12px; max-width:100%; } h1{ margin:14px 0 10px; font-size:32px; line-height:0.98; letter-spacing:-0.9px; max-width:100%; } .sub{ font-size:14px; line-height:1.5; margin:0 0 18px; max-width:100%; } .heroActions{ gap:10px; } .heroActions .btn{ padding:10px 14px; min-height:42px; font-size:14px; border-radius:14px; } .metaRow{ margin-top:14px; } .badgeRow{ gap:8px; } .badge{ font-size:11px; padding:7px 9px; } .heroCard{ min-height:auto; padding:14px; gap:12px; } .heroCard h3{ font-size:14px; } .mini{ padding:10px; border-radius:14px; } .miniTitle{ gap:8px; margin-bottom:8px; } .pill{ font-size:11px; padding:5px 8px; } .bigNum{ font-size:20px; } .small{ font-size:11px; line-height:1.4; } section{ padding:30px 0; } .sectionHead{ margin-bottom:14px; gap:10px; } .sectionHead h2{ font-size:22px; line-height:1.05; } .sectionHead p{ font-size:13px; line-height:1.5; } .card, .f, .tItem, .kpi, .cta, .list, .compare{ border-radius:16px; } .f, .tItem, .kpi{ padding:14px; } .li{ gap:10px; padding:12px 0; } .ic{ width:28px; height:28px; border-radius:10px; } .cta{ padding:16px; } .cta h3{ font-size:16px; } .pageHero{ padding:28px 0 14px; } .pageHero h1{ font-size:30px; line-height:1; } .pageHero p{ font-size:14px; line-height:1.5; } footer{ padding:30px 0 40px; } .footGrid{ gap:10px; } .drawer{ top:10px; right:10px; left:10px; border-radius:16px; } .drawerHeader{ padding:12px 12px 10px; } .drawerBody{ padding:10px 12px 12px; } .drawerTitle .logoImg{ width:38px; height:38px; } .drawerClose{ width:38px; height:38px; border-radius:12px; } .mNavLink{ padding:10px 12px; border-radius:12px; margin-bottom:8px; } .mAccPanel a{ padding:9px 11px; border-radius:11px; margin:6px 0; } .drawerActions{ gap:8px; } .drawerActions .btn{ min-height:42px; font-size:14px; border-radius:14px; } } @media (max-width: 420px){ .wrap{ padding:0 12px; } .nav{ height:60px; } .logoImg{ width:42px; height:42px; } .brandText{ font-size:16px; } .navRight .btn{ padding:9px 12px; font-size:13px; } h1{ font-size:28px; line-height:0.98; } .sub{ font-size:13px; } .heroActions .btn{ padding:9px 12px; font-size:13px; } .badge{ font-size:10px; padding:6px 8px; } .heroCard{ padding:12px; } .bigNum{ font-size:18px; } } @media (max-width: 768px){ html, body{ max-width:100%; overflow-x:hidden !important; } *{ box-sizing:border-box; } .wrap, .container, .section, .grid, .grid2, .gridHero, .cards, .features, .pricing, .compare, .list, .pageHero, .hero, main, section{ max-width:100% !important; min-width:0 !important; } .grid, .grid2, .cards, .features, .pricing, .compare{ display:grid !important; grid-template-columns:1fr !important; gap:14px !important; } .grid > *, .grid2 > *, .cards > *, .features > *, .pricing > *, .compare > *{ min-width:0 !important; width:100% !important; max-width:100% !important; } .card, .f, .tItem, .kpi, .cta, .list, .compare, .heroCard{ width:100% !important; max-width:100% !important; min-width:0 !important; overflow:hidden !important; } .card *, .f *, .tItem *, .kpi *, .cta *, .list *, .compare *, .heroCard *{ min-width:0 !important; word-break:break-word; } img, svg, canvas, video{ max-width:100% !important; height:auto !important; } } /* mobile logo fix */ @media (max-width: 768px){ .brandText{ display:none !important; } .brand{ gap:0 !important; } .logoImg{ width:42px !important; height:42px !important; } }