/* Clickseal website (Sunset, 2026-10-15): the home page and the legal pages share this file. */
@font-face { font-family:"Manrope"; font-weight:400 500; font-display:swap; src:url("fonts/Manrope_400Regular.ttf") format("truetype"); }
@font-face { font-family:"Manrope"; font-weight:600 700; font-display:swap; src:url("fonts/Manrope_700Bold.ttf") format("truetype"); }
@font-face { font-family:"Manrope"; font-weight:800; font-display:swap; src:url("fonts/Manrope_800ExtraBold.ttf") format("truetype"); }
/* The wordmark "clickseal" (2026-10-16). */
@font-face { font-family:"Plus Jakarta Sans"; font-weight:800; font-display:swap; src:url("fonts/PlusJakartaSans_800ExtraBold.ttf") format("truetype"); }
  :root {
    color-scheme: light dark;
    --bg:#ffffff; --band:#faf7f5; --card:#ffffff; --fg:#151116; --fg2:#3d3539; --dim:#6f666a; --line:#ece5e2; --line2:#f3eeec;
    --soft:#fff2ea; --softfg:#c2410c; --sun:linear-gradient(135deg,#ff9a44,#ff3d77); --pink:#ff3d77;
    --mono:ui-monospace, "SF Mono", Consolas, "Roboto Mono", monospace; --shadow:0 1px 2px rgba(21,17,22,.04), 0 12px 32px -18px rgba(21,17,22,.18);
  }
  @media (prefers-color-scheme: dark) {
    :root { --bg:#0e0b0e; --band:#151116; --card:#181317; --fg:#ffffff; --fg2:#d8cfd3; --dim:#a39a9f; --line:#2a2328; --line2:#211b1f;
            --soft:#2a1a17; --softfg:#ffb48a; --shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 40px -20px rgba(0,0,0,.6); }
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.65 Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; }
  a { color:inherit; }
  .wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
  .sun { background:var(--sun); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .mono { font-family:var(--mono); letter-spacing:.04em; }

  /* Header */
  header { position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line); }
  header .wrap { display:flex; align-items:center; justify-content:space-between; height:86px; }
  .brand { display:flex; align-items:center; gap:12px; font-family:"Plus Jakarta Sans", Manrope, sans-serif; font-weight:800; font-size:30px; letter-spacing:-.03em; text-decoration:none; }
  .brand img { width:52px; height:52px; }
  nav.top { display:flex; align-items:center; gap:26px; }
  nav.top a { text-decoration:none; color:var(--dim); font-size:14px; font-weight:600; }
  nav.top a:hover { color:var(--fg); }
  nav.top .cta { color:#fff; background:var(--fg); padding:9px 16px; border-radius:999px; }
  @media (prefers-color-scheme: dark) { nav.top .cta { color:#151116; } }

  /* Hero */
  .hero { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; padding-block:76px 88px; }
  .tag { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.06em; color:var(--softfg); border:1px solid currentColor; border-radius:999px; padding:6px 13px; }
  .tag::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--sun); }
  h1 { font-size:clamp(46px,6.6vw,80px); line-height:.98; letter-spacing:-.045em; font-weight:800; margin:22px 0 20px; }
  .lead { font-size:19px; line-height:1.6; color:var(--fg2); max-width:500px; margin:0; }
  .ticks { list-style:none; padding:0; margin:26px 0 0; display:flex; flex-wrap:wrap; gap:10px 22px; }
  .ticks li { display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px; }
  .tick { width:22px; height:22px; border-radius:50%; background:var(--sun); display:grid; place-items:center; flex:none; }
  .tick svg { width:12px; height:12px; stroke:#fff; stroke-width:3.2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
  .status { margin-top:30px; display:flex; gap:14px; align-items:flex-start; background:var(--soft); border-radius:16px; padding:16px 18px; max-width:500px; }
  .status .pulse { margin-top:7px; width:9px; height:9px; border-radius:50%; background:var(--pink); box-shadow:0 0 0 5px rgba(255,61,119,.18); flex:none; }
  .status b { display:block; font-size:15px; }
  .status span { color:var(--fg2); font-size:14px; }

  /* Phone */
  .stage { position:relative; display:flex; justify-content:center; }
  .stage::before { content:""; position:absolute; inset:8% 6% 4%; background:radial-gradient(closest-side, rgba(255,140,90,.32), transparent); filter:blur(10px); }
  .phone { position:relative; width:290px; border-radius:46px; background:#151116; padding:11px; box-shadow:0 50px 90px -40px rgba(21,17,22,.55), inset 0 0 0 1.5px #3a3036; }
  .screen { border-radius:36px; overflow:hidden; background:#fff; color:#151116; }
  .island { width:86px; height:24px; border-radius:20px; background:#151116; margin:9px auto 0; }
  .pbar { display:flex; justify-content:space-between; align-items:center; padding:10px 16px 8px; font-size:12px; }
  .pbar .m { display:flex; align-items:center; gap:6px; font-weight:800; font-size:14px; }
  .pbar .m img { width:17px; }
  .pbar .t b { border-bottom:2px solid; padding-bottom:2px; margin-right:9px; }
  .pbar .t span { color:#8c8387; }
  .post { margin:0 10px; }
  .ph { display:flex; align-items:center; gap:7px; font-size:12px; padding:6px 2px; }
  .av { width:24px; height:24px; border-radius:50%; background:var(--sun); color:#fff; display:grid; place-items:center; font-weight:800; font-size:11px; }
  .ph .when { margin-left:auto; color:#8c8387; }
  .media { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/5; }
  .media svg.pic { display:block; width:100%; height:100%; }
  .corner { position:absolute; width:20px; height:20px; border:0 solid #fff; }
  .c1 { top:10px; left:10px; border-top-width:2.5px; border-left-width:2.5px; border-top-left-radius:9px; }
  .c2 { top:10px; right:10px; border-top-width:2.5px; border-right-width:2.5px; border-top-right-radius:9px; }
  .c3 { bottom:10px; left:10px; border-bottom-width:2.5px; border-left-width:2.5px; border-bottom-left-radius:9px; }
  .c4 { bottom:10px; right:10px; border-bottom-width:2.5px; border-right-width:2.5px; border-bottom-right-radius:9px; }
  .time { position:absolute; top:16px; right:38px; font:500 10px var(--mono); color:#fff; background:rgba(21,17,22,.45); padding:3px 8px; border-radius:999px; }
  .time::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:#ff9a44; margin-right:5px; vertical-align:1px; }
  .meta { display:flex; align-items:center; justify-content:space-between; font-size:11px; padding:8px 2px 2px; color:#6f666a; }
  .sealpill { display:inline-flex; align-items:center; gap:5px; background:#fff2ea; color:#c2410c; font:500 10px var(--mono); padding:3px 8px; border-radius:999px; }
  .sealpill img { width:11px; }
  .cap { font-size:12px; padding:2px 2px 6px; }
  .acts { display:flex; gap:16px; padding:4px 2px 16px; color:#151116; font-size:11px; font-weight:700; }
  .acts span { display:flex; align-items:center; gap:4px; }
  .acts svg { width:17px; height:17px; stroke:#151116; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .illus { text-align:center; font-size:12px; color:var(--dim); margin-top:16px; }

  /* Sections */
  section { padding:96px 0; }
  .band { background:var(--band); border-block:1px solid var(--line2); }
  .eyebrow { font:500 12px var(--mono); color:var(--softfg); letter-spacing:.14em; text-transform:uppercase; }
  h2 { font-size:clamp(32px,4.2vw,46px); line-height:1.06; letter-spacing:-.035em; margin:12px 0 14px; font-weight:800; }
  .sub { color:var(--fg2); font-size:18px; max-width:640px; margin:0 0 44px; }
  .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow:var(--shadow); }
  .card h3 { margin:0 0 8px; font-size:19px; letter-spacing:-.01em; }
  .card p { margin:0; color:var(--dim); font-size:15.5px; }
  .num { font:500 13px var(--mono); color:var(--softfg); display:flex; align-items:center; gap:10px; margin-bottom:18px; }
  .num::after { content:""; flex:1; height:1px; background:var(--line); }
  .ic { width:44px; height:44px; border-radius:13px; background:var(--soft); display:grid; place-items:center; margin-bottom:18px; }
  .ic svg { width:22px; height:22px; stroke:var(--softfg); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

  /* Why */
  .why { padding-top:40px; }
  h2.big { font-size:clamp(40px,6vw,72px); line-height:1; letter-spacing:-.045em; margin:14px 0 30px; }
  .whygrid { display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:1000px; }
  .whygrid b { color:var(--fg); }
  .vs { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:48px; }
  .vcol { border:1px solid var(--line); border-radius:22px; padding:26px 28px; }
  .vcol.on { background:#151116; color:#fff; border-color:#151116; position:relative; overflow:hidden; }
  .vcol.on::after { content:""; position:absolute; right:-90px; bottom:-110px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(255,110,90,.45), transparent 65%); }
  .vlab { font:500 12px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
  .vcol.on .vlab { color:#ff9a44; }
  .vcol ul { list-style:none; padding:0; margin:12px 0 0; position:relative; z-index:1; }
  .vcol li { padding:11px 0; border-top:1px solid var(--line2); font-weight:700; display:flex; gap:12px; align-items:center; }
  .vcol li:first-child { border-top:0; }
  .vcol li::before { content:"×"; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); color:var(--dim); display:grid; place-items:center; font-size:13px; flex:none; }
  .vcol.on li { border-color:#2c2429; }
  .vcol.on li::before { content:"✓"; border:0; background:linear-gradient(135deg,#ff9a44,#ff3d77); color:#fff; font-size:12px; }

  /* Seal means */
  .two { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .list { list-style:none; padding:0; margin:14px 0 0; }
  .list li { display:flex; gap:13px; padding:13px 0; border-top:1px solid var(--line2); color:var(--fg2); font-size:15.5px; }
  .list li:first-child { border-top:0; }
  .list i { flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:800; font-size:12px; margin-top:1px; }
  .yes i { background:var(--sun); color:#fff; }
  .no i { border:1.5px solid var(--line); color:var(--dim); }
  .list small { display:block; color:var(--softfg); font-weight:600; font-size:13.5px; margin-top:3px; }
  .list small a { color:inherit; }
  .note { margin:22px 0 0; color:var(--dim); font-size:15px; max-width:820px; }
  .note b { color:var(--fg); }

  /* Check */
  .check { display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
  .browser { background:#fff; color:#151116; border-radius:20px; overflow:hidden; border:1px solid var(--line); box-shadow:0 40px 80px -46px rgba(21,17,22,.5); }
  .bar { display:flex; align-items:center; gap:7px; padding:12px 14px; background:#f5f0ee; border-bottom:1px solid #ece5e2; }
  .bar i { width:10px; height:10px; border-radius:50%; background:#ddd3d0; }
  .url { margin-left:12px; flex:1; display:flex; align-items:center; gap:7px; background:#fff; border-radius:8px; font:500 12px var(--mono); color:#6f666a; padding:6px 10px; }
  .url svg { width:12px; height:12px; stroke:#1f9d63; fill:none; stroke-width:2.4; }
  .page { padding:24px; }
  .verdict { display:flex; gap:18px; align-items:center; }
  .thumb { width:100px; height:125px; border-radius:14px; flex:none; overflow:hidden; }
  .thumb svg { width:100%; height:100%; display:block; }
  .badge { display:inline-flex; align-items:center; gap:7px; background:#fff2ea; color:#c2410c; font-weight:800; font-size:14px; padding:6px 12px; border-radius:999px; }
  .badge img { width:15px; }
  .who { font-weight:800; font-size:18px; margin-top:9px; }
  .what { color:#6f666a; font-size:14px; }
  .rows { margin-top:18px; border-top:1px dashed #e6dcd9; font-size:14px; }
  .r { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #f4eeec; }
  .r:last-child { border:0; }
  .r span:first-child { color:#6f666a; }
  .r span:last-child { font-weight:700; text-align:right; }
  .states { display:grid; gap:12px; }
  .st { display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:var(--card); }
  .st .d { flex:none; width:10px; height:10px; border-radius:50%; margin-top:7px; }
  .st b { display:block; font-size:15.5px; }
  .st span { color:var(--dim); font-size:14.5px; }
  .tryit { display:flex; gap:8px; margin-top:20px; max-width:430px; background:var(--card); border:1.5px solid var(--fg); border-radius:14px; padding:6px; }
  .tryit input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--fg); font:500 17px var(--mono); letter-spacing:.14em; text-transform:uppercase; padding:9px 11px; }
  .tryit button { border:0; background:var(--sun); color:#fff; font:800 15px Manrope, sans-serif; padding:0 20px; border-radius:10px; cursor:pointer; }

  /* Screen check */
  .scgrid { display:grid; grid-template-columns:.95fr 1.05fr; gap:48px; align-items:center; }
  .viz { position:relative; aspect-ratio:4/3; border-radius:22px; overflow:hidden; background:#1d1720; box-shadow:0 40px 80px -46px rgba(21,17,22,.6); }
  .viz svg { position:absolute; inset:0; width:100%; height:100%; }
  .found { position:absolute; left:21%; top:20%; width:52%; height:47%; border:2px solid #ff9a44; border-radius:12px; box-shadow:0 0 0 999px rgba(14,11,14,.42); }
  .found span { position:absolute; left:-2px; top:-31px; font:500 11px var(--mono); background:#ff9a44; color:#151116; padding:4px 9px; border-radius:7px; white-space:nowrap; }
  .readout { position:absolute; left:14px; bottom:12px; right:14px; display:flex; justify-content:space-between; font:500 11px var(--mono); color:#d8cfd3; }
  .flow { display:grid; gap:20px; }
  .f { display:grid; grid-template-columns:40px 1fr; gap:16px; }
  .f .n { width:40px; height:40px; border-radius:12px; background:var(--soft); color:var(--softfg); font:500 14px var(--mono); display:grid; place-items:center; }
  .f h3 { margin:6px 0 4px; font-size:18px; }
  .f p { margin:0; color:var(--dim); font-size:15.5px; }
  .outs { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
  .out { padding:22px; }
  .out .lbl { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:800; padding:5px 11px; border-radius:999px; }
  .out p { margin:12px 0 0; }
  .honest { margin-top:24px; display:flex; gap:14px; align-items:flex-start; padding:18px 20px; border-radius:16px; border:1px dashed var(--line); color:var(--fg2); }
  .honest svg { flex:none; width:20px; height:20px; stroke:var(--softfg); fill:none; stroke-width:2; margin-top:2px; }

  /* FAQ */
  .faq { max-width:820px; }
  details { border-top:1px solid var(--line); padding:4px 0; }
  details:last-child { border-bottom:1px solid var(--line); }
  summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font-weight:700; font-size:17px; }
  summary::-webkit-details-marker { display:none; }
  summary::after { content:"+"; font-weight:500; font-size:24px; color:var(--dim); transition:transform .2s; }
  details[open] summary::after { transform:rotate(45deg); }
  details p { margin:0 0 20px; color:var(--fg2); max-width:700px; }

  /* CTA + footer */
  .final { border-radius:28px; padding:56px; background:#151116; color:#fff; display:grid; grid-template-columns:1.3fr .7fr; gap:30px; align-items:center; position:relative; overflow:hidden; }
  .final::after { content:""; position:absolute; right:-120px; top:-120px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, rgba(255,110,90,.45), transparent 65%); }
  .final h2 { margin:0 0 10px; }
  .final p { margin:0; color:#d8cfd3; font-size:17px; }
  .final a.btn { position:relative; z-index:1; justify-self:end; display:inline-flex; align-items:center; gap:10px; background:var(--sun); color:#fff; text-decoration:none; font-weight:800; padding:16px 24px; border-radius:999px; box-shadow:0 14px 34px -14px rgba(255,61,119,.8); }
  @media (prefers-color-scheme: dark) { .final { background:#1c161a; border:1px solid var(--line); } }
  footer { padding:44px 0 56px; color:var(--dim); font-size:14px; }
  footer .wrap { display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
  footer .brand { font-size:22px; }
  footer .brand img { width:34px; height:34px; }
  footer nav a { text-decoration:none; margin-left:22px; }
  footer nav a:hover { color:var(--fg); }

  @media (max-width:900px) {
    nav.top a:not(.cta) { display:none; }
    .hero, .check, .scgrid, .two, .final, .whygrid, .vs { grid-template-columns:1fr; }
    .hero { padding-block:44px 64px; gap:44px; }
    .brand { font-size:24px; }
    .brand img { width:40px; height:40px; }
    header .wrap { height:70px; }
    .grid3, .outs { grid-template-columns:1fr; }
    section { padding:72px 0; }
    .final { padding:36px 28px; }
    .final a.btn { justify-self:start; }
    footer nav a { margin:0 18px 0 0; }
  }

/* Legal pages (privacy, terms, delete account) */
.legal { max-width:760px; margin:0 auto; padding:56px 24px 40px; }
.legal h1 { font-size:clamp(34px,5vw,48px); line-height:1.05; letter-spacing:-.035em; margin:12px 0 6px; font-weight:800; }
.legal h2 { font-size:21px; letter-spacing:-.01em; margin:40px 0 8px; }
.legal h3 { font-size:17px; margin:26px 0 6px; }
.legal p, .legal li { margin:9px 0; color:var(--fg2); }
.legal ul, .legal ol { padding-left:22px; }
.legal .dim { color:var(--dim); font-size:14px; }
.legal a { color:var(--softfg); }
.legal table { width:100%; border-collapse:collapse; font-size:15px; margin:12px 0; }
.legal th, .legal td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.legal strong, .legal b { color:var(--fg); }

/* Home (simplified, 2026-10-15) and the sub-pages */
.center { text-align:center; margin-inline:auto; }
.why2 { max-width:860px; margin:0 auto; text-align:center; }
.why2 h2 { font-size:clamp(38px,5.6vw,64px); line-height:1.02; letter-spacing:-.045em; margin:14px 0 22px; }
.why2 p { font-size:19px; color:var(--fg2); margin:0 auto; max-width:700px; }
.why2 p b { color:var(--fg); }
.more { display:inline-flex; align-items:center; gap:8px; margin-top:26px; font-weight:800; text-decoration:none; color:var(--fg); border-bottom:2px solid transparent; }
.more::after { content:"→"; transition:transform .15s; }
.more:hover::after { transform:translateX(3px); }
.more.sunlink { color:var(--softfg); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split .sub { margin-bottom:0; }
.chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.chip2 { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card); }
.chip2 i { font-style:normal; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; }
.c-ok i { background:#e9f7ef; color:#167a4b; }
.c-scr i { background:var(--soft); color:var(--softfg); }
.c-no i { background:#ffe8ee; color:#c0264f; }
.qlist { max-width:820px; margin:0 auto; }

/* Sub-page hero */
.phero { padding-block:76px 40px; border-bottom:1px solid var(--line2); }
.phero h1 { font-size:clamp(40px,6vw,68px); line-height:1; letter-spacing:-.045em; margin:14px 0 18px; font-weight:800; }
.phero .lead { max-width:680px; }
.prose { max-width:760px; }
.prose p { color:var(--fg2); font-size:17px; }
.prose h3 { font-size:20px; margin:30px 0 8px; }
.steps4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.steps4 .card h3 { font-size:17px; }
.policy { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.policy .card h3 { display:flex; align-items:center; gap:10px; }
.policy .ex { list-style:none; padding:0; margin:14px 0 0; }
.policy .ex li { padding:12px 0; border-top:1px solid var(--line2); color:var(--fg2); font-size:15.5px; }
.policy .ex li:first-child { border-top:0; }
.policy .ex b { display:block; color:var(--fg); font-size:15.5px; }
.decisions { display:grid; gap:16px; }
.decision { display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:start; }
.decision .lbl { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:800; padding:7px 13px; border-radius:999px; white-space:nowrap; }
.decision p { margin:0 0 6px; color:var(--fg2); }
.decision p:last-child { margin:0; }
.label-demo { display:inline-flex; align-items:center; gap:6px; background:#151116; color:#fff; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; vertical-align:2px; }
.table { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--card); }
.table th, .table td { text-align:left; padding:16px 20px; border-top:1px solid var(--line2); vertical-align:top; font-size:15.5px; }
.table th { font-weight:800; width:34%; }
.table tr:first-child th, .table tr:first-child td { border-top:0; }
.table td { color:var(--fg2); }
.crumb { font:500 12px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); text-decoration:none; }
.crumb:hover { color:var(--fg); }
@media (max-width:900px) {
  .split, .policy, .steps4 { grid-template-columns:1fr; }
  .decision { grid-template-columns:1fr; gap:10px; }
  .table th { width:auto; display:block; border:0; padding-bottom:0; }
  .table td { display:block; border-top:0; }
}



/* Home: the app icon with the promises around it (2026-10-15) */
.emblem { position:relative; aspect-ratio:1; max-width:470px; margin:0 auto; display:grid; place-items:center; }
.emblem::before { content:""; position:absolute; inset:14%; border-radius:50%; background:radial-gradient(closest-side, rgba(255,120,90,.42), rgba(255,61,119,.12) 60%, transparent); filter:blur(18px); }
.ring { position:absolute; border-radius:50%; border:1px solid var(--line); }
.r1 { inset:22%; } .r2 { inset:10%; border-style:dashed; } .r3 { inset:0; opacity:.6; }
.icon { position:relative; width:46%; border-radius:24%; box-shadow:0 40px 70px -28px rgba(255,61,119,.55), 0 10px 24px -12px rgba(21,17,22,.35); }
.float { position:absolute; display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:9px 15px 9px 10px; font-weight:800; font-size:14px; box-shadow:var(--shadow); white-space:nowrap; }
.float i { font-style:normal; width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#ff9a44,#ff3d77); color:#fff; display:grid; place-items:center; font-size:12px; }
.float img { width:22px; height:22px; }
.f1 { top:12%; left:0; } .f2 { top:24%; right:-4%; } .f3 { bottom:22%; left:-2%; } .f4 { bottom:9%; right:2%; }
@media (max-width:900px) { .emblem { max-width:360px; } .float { font-size:12.5px; } .f2 { right:0; } .f3 { left:0; } }