:root{ /* theme tokens are injected as inline CSS vars on */ --bg: hsl(var(--h), 35%, calc(var(--lum) + 40%)); --fg: hsl(var(--h), 25%, 12%); --muted: hsla(var(--h), 18%, 28%, 0.78); --card: rgba(255,255,255,0.78); --border: rgba(10,10,10,0.10); --accent: hsl(var(--a), 85%, 55%); --accent2: hsl(calc(var(--a) + 22), 85%, 52%); --shadow: 0 18px 60px rgba(0,0,0,.08); --shadow2: 0 10px 25px rgba(0,0,0,.10); --max: 1160px; --pad: 24px; } html[data-mode="dark"]{ --bg: hsl(var(--h), 18%, 10%); --fg: rgba(255,255,255,0.92); --muted: rgba(255,255,255,0.70); --card: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.12); --shadow: 0 18px 60px rgba(0,0,0,.40); --shadow2: 0 10px 25px rgba(0,0,0,.35); } *{box-sizing:border-box} body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--fg); background: radial-gradient(1000px 600px at 10% 0%, rgba(255,255,255,0.20), transparent 55%), radial-gradient(900px 500px at 90% 10%, rgba(255,255,255,0.16), transparent 60%), var(--bg); min-height:100vh; } .container{max-width:var(--max); margin:0 auto; padding:0 var(--pad);} a{color:inherit; text-decoration:none} a:hover{text-decoration:underline} .muted{color:var(--muted)} .small{font-size:0.92rem} .skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden} .skip:focus{left:16px; top:16px; width:auto; height:auto; background:var(--card); padding:10px 12px; border-radius:12px; z-index:9999; box-shadow:var(--shadow)} /* Topbar */ .topbar{position:sticky; top:0; z-index:50; backdrop-filter: blur(14px); background: rgba(255,255,255,0.40); border-bottom:1px solid var(--border)} html[data-mode="dark"] .topbar{background: rgba(10,10,10,0.35)} .topbar__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px} .brand{display:flex; gap:12px; align-items:center; min-width:260px} .brand__mark{width:36px; height:36px; border-radius:14px; background: conic-gradient(from 120deg, var(--accent), var(--accent2)); box-shadow: var(--shadow2)} .brand__name{font-weight:700; letter-spacing:-0.02em} .brand__meta{font-size:0.85rem; color:var(--muted)} .nav{display:flex; gap:18px; align-items:center} .nav a{padding:8px 10px; border-radius:12px} .nav a:hover{text-decoration:none; background: rgba(0,0,0,0.05)} html[data-mode="dark"] .nav a:hover{background: rgba(255,255,255,0.08)} .topbar__cta{display:flex; gap:10px; align-items:center} .navbtn{display:none; background:transparent; border:0; padding:10px; border-radius:12px} .navbtn span{display:block; width:22px; height:2px; background:var(--fg); margin:5px 0; opacity:0.85} .navdrawer{display:none; border-bottom:1px solid var(--border)} .navdrawer__inner{display:grid; gap:10px; padding:16px 0} /* Buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent), var(--accent2)); color:white; font-weight:700; border:0; box-shadow: var(--shadow2); cursor:pointer; } .btn:hover{text-decoration:none; filter:brightness(1.03)} .btn--ghost{ background: transparent; color: var(--fg); border:1px solid var(--border); box-shadow:none; } .btn--ghost:hover{background: rgba(0,0,0,0.05)} html[data-mode="dark"] .btn--ghost:hover{background: rgba(255,255,255,0.08)} .btn--block{width:100%} .btn[disabled], .btn[disabled]:hover{opacity:.55; cursor:not-allowed; filter:none} /* Layout */ .section{padding:42px 0} .section__head{margin-bottom:18px} h1,h2,h3{margin:0 0 10px 0; letter-spacing:-0.03em} h1{font-size:clamp(2.2rem, 5vw, 3.3rem); line-height:1.05} h2{font-size:clamp(1.5rem, 2.8vw, 2.1rem)} h3{font-size:1.15rem} .lead{font-size:1.15rem; line-height:1.6} .grid{display:grid; gap:16px} .grid--2{grid-template-columns: repeat(2, minmax(0, 1fr));} .grid--3{grid-template-columns: repeat(3, minmax(0, 1fr));} @media (max-width: 980px){ .nav{display:none} .topbar__cta{display:none} .navbtn{display:block} .grid--3{grid-template-columns:1fr} .grid--2{grid-template-columns:1fr} .navdrawer[data-open="1"]{display:block} } /* Cards */ .card{ background: var(--card); border:1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow); padding:18px; } .card--popular{outline: 2px solid rgba(255,255,255,0.0); border-color: rgba(255,255,255,0.0); background: rgba(255,255,255,0.86)} html[data-mode="dark"] .card--popular{background: rgba(255,255,255,0.10)} .card__icon{width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background: rgba(0,0,0,0.06); margin-bottom:10px} html[data-mode="dark"] .card__icon{background: rgba(255,255,255,0.10)} .card__top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px} .price{font-weight:800} /* Hero */ .hero{padding:54px 0 22px} .hero__inner{display:grid; grid-template-columns: 1.15fr 0.85fr; gap:22px; align-items:center} .kicker{display:inline-flex; gap:8px; align-items:center; padding:8px 10px; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,0.35); color:var(--muted)} html[data-mode="dark"] .kicker{background: rgba(255,255,255,0.06)} .hero__actions{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0} .trustline{margin-top:10px; color:var(--muted)} .hero__art .artframe{border-radius: calc(var(--radius) + 10px); border:1px solid var(--border); background: rgba(255,255,255,0.30); overflow:hidden; box-shadow: var(--shadow)} html[data-mode="dark"] .hero__art .artframe{background: rgba(255,255,255,0.06)} .hero__art svg{display:block; width:100%; height:auto; color: var(--fg)} @media (max-width: 980px){ .hero__inner{grid-template-columns:1fr} } /* Components */ .trust{display:flex; flex-wrap:wrap; gap:10px} .trust__item{display:flex; gap:8px; align-items:center; padding:10px 12px; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,0.35)} html[data-mode="dark"] .trust__item{background: rgba(255,255,255,0.06)} .dot{width:8px; height:8px; border-radius:999px; background: var(--accent)} .bento{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px} .tile{padding:16px; border-radius: calc(var(--radius) + 8px); border:1px solid var(--border); background: rgba(255,255,255,0.32)} html[data-mode="dark"] .tile{background: rgba(255,255,255,0.06)} .tile__top{display:flex; gap:10px; align-items:center; font-weight:700; margin-bottom:8px} .tile__top svg{opacity:0.9} @media (max-width: 980px){ .bento{grid-template-columns:1fr} } .timeline{list-style:none; padding:0; margin:0; display:grid; gap:14px} .timeline__item{display:flex; gap:12px; align-items:flex-start} .timeline__dot{width:10px; height:10px; border-radius:999px; background: var(--accent); margin-top:6px; flex:0 0 auto} .stats{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px} .stat{padding:16px; border-radius: calc(var(--radius) + 6px); border:1px solid var(--border); background: rgba(255,255,255,0.32)} html[data-mode="dark"] .stat{background: rgba(255,255,255,0.06)} .stat__num{font-size:1.7rem; font-weight:900; letter-spacing:-0.03em} @media (max-width: 980px){ .stats{grid-template-columns:1fr 1fr} } .chip{display:inline-flex; padding:8px 10px; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,0.25); font-size:0.92rem} html[data-mode="dark"] .chip{background: rgba(255,255,255,0.06)} .chips{display:flex; flex-wrap:wrap; gap:10px} .faq{display:grid; gap:10px} .faq__item{border:1px solid var(--border); border-radius: calc(var(--radius) + 6px); padding:12px 14px; background: rgba(255,255,255,0.30)} html[data-mode="dark"] .faq__item{background: rgba(255,255,255,0.06)} .faq__item summary{cursor:pointer; font-weight:700} .faq__item div{margin-top:8px} .cta{display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px; border-radius: calc(var(--radius) + 10px); border:1px solid var(--border); background: rgba(255,255,255,0.36)} html[data-mode="dark"] .cta{background: rgba(255,255,255,0.06)} .cta__actions{display:flex; gap:10px; flex-wrap:wrap} .table{border:1px solid var(--border); border-radius: calc(var(--radius) + 6px); overflow:hidden} .table__row{display:grid; grid-template-columns: 180px 1fr; gap:12px; padding:12px 14px; background: rgba(255,255,255,0.28); border-bottom:1px solid var(--border)} html[data-mode="dark"] .table__row{background: rgba(255,255,255,0.06)} .table__row:last-child{border-bottom:0} .table__k{font-weight:700} .pagehead{padding:34px 0 10px} .hr{height:1px; background:var(--border); margin:14px 0} /* Forms */ .form{display:grid; gap:12px} label{display:grid; gap:6px; font-weight:600} input, select, textarea{ width:100%; padding:12px 12px; border-radius: calc(var(--radius) + 2px); border:1px solid var(--border); background: rgba(255,255,255,0.55); color:var(--fg); outline:none; } html[data-mode="dark"] input, html[data-mode="dark"] select, html[data-mode="dark"] textarea{background: rgba(255,255,255,0.06)} .row--2{display:grid; grid-template-columns:1fr 1fr; gap:12px} @media (max-width: 980px){ .row--2{grid-template-columns:1fr} } .check{display:flex; gap:10px; align-items:flex-start; font-weight:500} .check input{width:auto; margin-top:3px} /* Summary */ .summary{display:grid; gap:10px} .summary__row{display:flex; justify-content:space-between; gap:12px} .summary__total{padding-top:10px; border-top:1px dashed var(--border)} .addons{display:grid; gap:10px} /* Footer */ .footer{padding:40px 0; border-top:1px solid var(--border); background: rgba(255,255,255,0.20)} html[data-mode="dark"] .footer{background: rgba(0,0,0,0.20)} .footer__grid{display:grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr; gap:16px} .footer__brand{font-weight:900; letter-spacing:-0.03em; margin-bottom:8px} .footer__title{font-weight:800; margin-bottom:10px} .footer__grid a{display:block; margin:8px 0} .footer__bottom{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding-top:16px; margin-top:16px; border-top:1px solid var(--border)} @media (max-width: 980px){ .footer__grid{grid-template-columns:1fr} } /* Cookie */ .cookie{position:fixed; left:0; right:0; bottom:0; display:none} .cookie[data-open="1"]{display:block} .cookie__inner{display:flex; justify-content:space-between; gap:16px; align-items:center; padding:16px 0} .cookie__actions{display:flex; gap:10px}