:root{
            --bg: #f5f7fb;
            --ink: #0b1220;
            --muted: #5a667a;
            --muted2:#7b879a;

            --card: #ffffff;
            --card2:#fbfcff;

            --line: rgba(15, 23, 42, .10);
            --shadow: 0 20px 50px rgba(15, 23, 42, .08);
            --shadow2: 0 10px 25px rgba(15, 23, 42, .06);

            --radius: 18px;

            /* More colour (still tasteful) */
            --brand: #2563eb;
            --brand2:#1d4ed8;
            --accent: #22c55e;
            --pink: #ec4899;
            --amber: #f59e0b;
            --violet:#8b5cf6;

            --focus: rgba(37, 99, 235, .18);
            --tintBlue: rgba(37,99,235,.10);
            --tintGreen: rgba(34,197,94,.10);
            --tintPink: rgba(236,72,153,.10);
            --tintAmber: rgba(245,158,11,.10);
        }

        *{ box-sizing:border-box; }
        html, body { height: 100%; }
        body{
            margin: 0;
            color: var(--ink);
            font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
            line-height: 1.45;
            background:
                radial-gradient(900px 520px at 12% -10%, rgba(37,99,235,.16), transparent 60%),
                radial-gradient(760px 460px at 92% -15%, rgba(34,197,94,.12), transparent 55%),
                radial-gradient(700px 420px at 50% 0%, rgba(236,72,153,.08), transparent 60%),
                linear-gradient(180deg, var(--bg), #eef3ff 55%, var(--bg));
        }

        a{ color: inherit; }
        .wrap{ max-width: 1180px; margin: 0 auto; padding: 26px; }

        .skip{
            position:absolute; left:-9999px; top: 10px;
            background:#fff; border:1px solid var(--line);
            padding:10px 12px; border-radius: 12px;
            box-shadow: var(--shadow2);
            z-index: 9999;
        }
        .skip:focus{ left: 26px; outline: none; box-shadow: 0 0 0 5px var(--focus); }

        a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
            outline: none;
            box-shadow: 0 0 0 5px var(--focus);
            border-radius: 12px;
        }

        .topbar{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap: 18px;
            padding: 8px 0 22px;
        }
        .brand{
            display:flex;
            align-items:center;
            gap: 12px;
            text-decoration:none;
            min-width: 240px;
        }
        .brandMark{
            width: 42px; height: 42px;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--brand), var(--accent));
            box-shadow: 0 16px 34px rgba(37,99,235,.22);
            position: relative;
            overflow:hidden;
        }
        .brandMark:after{
            content:"";
            position:absolute; inset:-40%;
            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.45), transparent 55%);
            transform: rotate(10deg);
        }
        .brandText{ display:flex; flex-direction:column; }
        .brandText b{ font-size: 15.5px; letter-spacing: .2px; }
        .brandText span{ font-size: 12.5px; color: var(--muted); margin-top: 2px; }

        nav{
            display:flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content:flex-end;
        }
        .navlink{
            text-decoration:none;
            font-size: 13px;
            color: var(--muted);
            padding: 10px 12px;
            border-radius: 999px;
            border: 1px solid transparent;
        }
        .navlink:hover{
            background: rgba(37,99,235,.07);
            border-color: rgba(37,99,235,.18);
            color: var(--ink);
        }

        /* NEW: Social links (desktop header) */
        .topRight{
            display:flex;
            align-items:center;
            gap: 10px;
        }
        .social{
            display:flex;
            align-items:center;
            gap: 8px;
        }
        .socialLabel{
            font-size: 12px;
            color: var(--muted2);
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: rgba(255,255,255,.82);
            white-space: nowrap;
        }
        .socialLink{
            text-decoration:none;
            font-size: 12.8px;
            font-weight: 900;
            padding: 8px 10px;
            border-radius: 999px;
            border: 1px solid rgba(15, 23, 42, .12);
            background: rgba(255,255,255,.88);
            box-shadow: var(--shadow2);
        }
        .socialLink:hover{
            background: #fff;
            border-color: rgba(37,99,235,.18);
        }

        .navDrop{ display:none; }
        .navDrop summary{
            list-style:none;
            cursor:pointer;
            user-select:none;
            display:inline-flex;
            align-items:center;
            gap: 10px;
            font-size: 13px;
            color: var(--muted);
            padding: 10px 12px;
            border-radius: 999px;
            border: 1px solid rgba(15, 23, 42, .12);
            background: rgba(255,255,255,.82);
            box-shadow: var(--shadow2);
        }
        .navDrop summary::-webkit-details-marker{ display:none; }
        .navPanel{
            margin-top: 10px;
            padding: 12px;
            border-radius: 16px;
            border: 1px solid var(--line);
            background: #fff;
            box-shadow: var(--shadow2);
            display:flex;
            flex-direction:column;
            gap: 6px;
            min-width: 230px;
        }
        .navPanel a{
            text-decoration:none;
            padding: 10px 12px;
            border-radius: 12px;
            color: var(--muted);
            border: 1px solid transparent;
        }
        .navPanel a:hover{
            background: rgba(37,99,235,.07);
            border-color: rgba(37,99,235,.18);
            color: var(--ink);
        }
        /* NEW: Social links in mobile panel */
        .navPanel .socialMobile{
            margin-top: 8px;
            padding-top: 10px;
            border-top: 1px solid rgba(15,23,42,.08);
            display:flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .navPanel .socialMobile a{
            padding: 8px 10px;
            border-radius: 999px;
            border: 1px solid rgba(15, 23, 42, .12);
            background: rgba(255,255,255,.88);
            box-shadow: var(--shadow2);
            color: var(--ink);
        }

        @media (max-width: 980px){
            nav{ display:none; }
            .topRight .social{ display:none; } /* hide desktop social row on small screens */
            .navDrop{ display:block; }
        }

        .hero{
            display:grid;
            grid-template-columns: 1.25fr .75fr;
            gap: 18px;
            align-items: stretch;
        }
        @media (max-width: 980px){
            .hero{ grid-template-columns: 1fr; }
        }

        .card{
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            overflow: hidden;
        }
        .pad{ padding: 22px; }

        .soft{
            background:
                radial-gradient(900px 420px at 10% 0%, rgba(37,99,235,.14), transparent 60%),
                radial-gradient(820px 420px at 90% 0%, rgba(34,197,94,.12), transparent 62%),
                linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,1));
        }

        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap: 10px;
            font-size: 12.5px;
            color: var(--muted);
            padding: 8px 10px;
            border-radius: 999px;
            background: rgba(255,255,255,.75);
            border: 1px solid var(--line);
            box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
        }
        .dot{
            width: 8px; height: 8px; border-radius: 999px;
            background: var(--accent);
            box-shadow: 0 0 0 3px rgba(34,197,94,.16);
        }

        h1{
            margin: 14px 0 10px;
            font-size: 40px;
            line-height: 1.08;
            letter-spacing: -0.8px;
        }
        .sub{
            margin: 0;
            max-width: 72ch;
            color: var(--muted);
            font-size: 15.5px;
        }

        .form{
            margin-top: 18px;
            display:grid;
            grid-template-columns: 1fr auto;
            gap: 10px;
        }
        @media (max-width: 740px){
            h1{ font-size: 32px; }
            .form{ grid-template-columns: 1fr; }
        }

        .field{
            width:100%;
            padding: 14px 14px;
            border-radius: 14px;
            border: 1px solid rgba(37,99,235,.18);
            background: #fff;
            outline: none;
            font-size: 14.5px;
            box-shadow: 0 2px 0 rgba(15,23,42,.02);
        }
        .field:focus{
            border-color: rgba(37,99,235,.42);
            box-shadow: 0 0 0 5px var(--focus);
        }

        .ctaRow{
            display:flex;
            gap: 10px;
            align-items:center;
            justify-content:flex-start;
        }
        @media (max-width: 740px){
            .ctaRow{ flex-direction:column; align-items:stretch; }
        }

        .cta{
            padding: 14px 16px;
            border-radius: 14px;
            border: 1px solid rgba(37,99,235,.25);
            background: linear-gradient(180deg, var(--brand), var(--brand2));
            color: #fff;
            font-weight: 900;
            cursor:pointer;
            box-shadow: 0 18px 34px rgba(37,99,235,.22);
            white-space: nowrap;
        }
        .cta:hover{ filter: brightness(1.03); }

        .ctaAlt{
            padding: 14px 16px;
            border-radius: 14px;
            border: 1px solid rgba(15, 23, 42, .12);
            background: rgba(255,255,255,.88);
            color: var(--ink);
            font-weight: 800;
            cursor:pointer;
            box-shadow: var(--shadow2);
            text-decoration:none;
            display:inline-flex;
            justify-content:center;
        }
        .ctaAlt:hover{ background: #fff; border-color: rgba(37,99,235,.18); }

        .micro{
            margin-top: 10px;
            color: var(--muted2);
            font-size: 12.5px;
        }

        .trust{
            margin-top: 18px;
            display:grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        @media (max-width: 860px){
            .trust{ grid-template-columns: 1fr; }
        }
        .trustItem{
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 14px;
            box-shadow: var(--shadow2);
            background:
                linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,1));
            position: relative;
            overflow:hidden;
        }
        .trustItem:before{
            content:"";
            position:absolute; inset:0;
            background:
                radial-gradient(340px 120px at 15% 0%, var(--tintBlue), transparent 70%),
                radial-gradient(340px 120px at 85% 0%, var(--tintGreen), transparent 70%);
            pointer-events:none;
        }
        .trustItem > *{ position: relative; }
        .trustItem b{ display:block; font-size: 13px; margin-bottom: 3px; }
        .trustItem span{ display:block; font-size: 12.5px; color: var(--muted); }

        /* Top domains section (two columns) */
        .tops{
            margin-top: 14px;
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        @media (max-width: 860px){
            .tops{ grid-template-columns: 1fr; }
        }
        .topsCard{
            border: 1px solid var(--line);
            background: #fff;
            border-radius: 14px;
            padding: 14px;
            box-shadow: var(--shadow2);
            overflow:hidden;
            position:relative;
        }
        .topsCard.co:before, .topsCard.com:before{
            content:"";
            position:absolute; inset:-1px;
            background:
                radial-gradient(420px 180px at 20% 0%, var(--tintBlue), transparent 70%),
                radial-gradient(420px 180px at 80% 0%, var(--tintAmber), transparent 70%);
            pointer-events:none;
        }
        .topsCard.com:before{
            background:
                radial-gradient(420px 180px at 20% 0%, var(--tintViolet, rgba(139,92,246,.10)), transparent 70%),
                radial-gradient(420px 180px at 80% 0%, var(--tintPink), transparent 70%);
        }
        .topsCard > *{ position:relative; }

        .topsHead{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap: 10px;
            margin-bottom: 10px;
        }
        .topsHead b{ font-size: 13px; }
        .topsHead span{
            font-size: 12px;
            color: var(--muted);
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: rgba(255,255,255,.75);
            white-space: nowrap;
        }
        .topsList{
            display:flex;
            flex-direction:column;
            gap: 8px;
        }
        .topsRow{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap: 10px;
            padding: 10px;
            border-radius: 12px;
            border: 1px solid rgba(15,23,42,.10);
            background: rgba(251,252,255,.9);
        }
        .topsRow a{ text-decoration:none; }
        .topsRow a:hover{ text-decoration: underline; text-underline-offset: 3px; }
        .topsRow small{ display:block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
        .topsScore{
            min-width: 78px;
            text-align:center;
            font-size: 12px;
            font-weight: 900;
            padding: 7px 10px;
            border-radius: 999px;
            border: 1px solid rgba(15,23,42,.10);
            background: #fff;
            box-shadow: 0 10px 20px rgba(15,23,42,.06);
        }
        .topsEmpty{
            color: var(--muted);
            font-size: 12.5px;
            margin: 2px 0 0;
        }

        .stack{ display:flex; flex-direction:column; gap: 12px; }
        .headRow{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap: 12px;
            margin-bottom: 10px;
        }
        .headRow h2{
            margin:0;
            font-size: 14px;
            letter-spacing: .2px;
        }
        .pill{
            font-size: 12px;
            color: var(--muted);
            padding: 7px 10px;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: rgba(255,255,255,.82);
            white-space: nowrap;
        }

        .leaderBox{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap: 12px;
            padding: 14px;
            border-radius: 14px;
            border: 1px solid var(--line);
            background:
                radial-gradient(520px 220px at 15% 0%, var(--tintGreen), transparent 65%),
                linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,1));
        }
        .score{
            font-size: 40px;
            font-weight: 900;
            letter-spacing: -0.8px;
        }
        .scoreMeta{
            margin-top: 2px;
            font-size: 12.5px;
            color: var(--muted);
        }
        .leaderBox a{ text-decoration:none; }
        .leaderBox a:hover{ text-decoration: underline; text-underline-offset: 3px; }
        .leaderBox small{ display:block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }

        .list{ display:flex; flex-direction:column; gap: 10px; }
        .row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap: 12px;
            padding: 12px;
            border-radius: 14px;
            border: 1px solid var(--line);
            background: #fff;
            box-shadow: var(--shadow2);
        }
        .row a{ text-decoration:none; }
        .row a:hover{ text-decoration: underline; text-underline-offset: 3px; }
        .row small{ display:block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }

        .badge{
            min-width: 80px;
            text-align:center;
            font-size: 12px;
            font-weight: 900;
            padding: 7px 10px;
            border-radius: 999px;
            border: 1px solid rgba(37,99,235,.18);
            background: rgba(37,99,235,.08);
        }

        .sections{
            margin-top: 18px;
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }
        @media (max-width: 980px){
            .sections{ grid-template-columns: 1fr; }
        }

        .sectionTitle{
            margin:0 0 8px;
            font-size: 16px;
            letter-spacing: -0.2px;
        }
        .sectionText{
            margin:0;
            color: var(--muted);
            font-size: 14.5px;
        }

        .miniGrid{
            margin-top: 14px;
            display:grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        @media (max-width: 980px){
            .miniGrid{ grid-template-columns: 1fr; }
        }
        .mini{
            border: 1px solid var(--line);
            background: #fff;
            border-radius: 14px;
            padding: 14px;
            box-shadow: var(--shadow2);
            position:relative;
            overflow:hidden;
        }
        .mini:before{
            content:"";
            position:absolute; inset:0;
            background:
                radial-gradient(280px 140px at 15% 0%, var(--tintBlue), transparent 70%),
                radial-gradient(280px 140px at 85% 0%, var(--tintPink), transparent 70%);
            pointer-events:none;
            opacity:.75;
        }
        .mini > *{ position:relative; }
        .mini b{ display:block; font-size: 13px; margin-bottom: 4px; }
        .mini span{ display:block; font-size: 12.8px; color: var(--muted); }

        .divider{
            height: 1px;
            background: rgba(15,23,42,.08);
            margin: 14px 0 0;
        }

        /* NEW: How it works */
        .howWrap{
            margin-top: 18px;
        }
        .how{
            display:grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 12px;
            margin-top: 12px;
        }
        @media (max-width: 980px){
            .how{ grid-template-columns: 1fr; }
        }
        .howStep{
            border: 1px solid var(--line);
            border-radius: 14px;
            background: #fff;
            padding: 14px;
            box-shadow: var(--shadow2);
            position: relative;
            overflow:hidden;
        }
        .howStep:before{
            content:"";
            position:absolute; inset:0;
            background:
                radial-gradient(320px 140px at 10% 0%, var(--tintBlue), transparent 70%),
                radial-gradient(320px 140px at 90% 0%, var(--tintGreen), transparent 70%);
            pointer-events:none;
        }
        .howStep > *{ position:relative; }
        .howTop{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap: 10px;
            margin-bottom: 8px;
        }
        .howNum{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            width: 34px; height: 34px;
            border-radius: 12px;
            font-weight: 900;
            color: #fff;
            background: linear-gradient(135deg, var(--brand), var(--violet));
            box-shadow: 0 14px 26px rgba(37,99,235,.18);
        }
        .howTag{
            font-size: 12px;
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid rgba(15,23,42,.10);
            background: rgba(255,255,255,.85);
            color: var(--muted);
            white-space: nowrap;
        }
        .howStep h3{
            margin: 0 0 6px;
            font-size: 14px;
        }
        .howStep p{
            margin: 0;
            font-size: 12.8px;
            color: var(--muted);
        }

        /* NEW: Latest posts */
        .blogTop{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
        .blogGrid{
            margin-top: 12px;
            display:grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        @media (max-width: 980px){
            .blogGrid{ grid-template-columns: 1fr; }
        }
        .postCard{
            border: 1px solid var(--line);
            border-radius: 14px;
            background: #fff;
            box-shadow: var(--shadow2);
            overflow:hidden;
            display:flex;
            flex-direction:column;
            min-height: 220px;
        }
        .postImg{
            height: 120px;
            background:
                radial-gradient(420px 160px at 20% 10%, rgba(37,99,235,.20), transparent 60%),
                radial-gradient(420px 160px at 80% 10%, rgba(34,197,94,.18), transparent 62%),
                linear-gradient(135deg, rgba(37,99,235,.10), rgba(236,72,153,.08));
            border-bottom: 1px solid rgba(15,23,42,.08);
        }
        .postImg.has{
            background-size: cover;
            background-position: center;
        }
        .postBody{
            padding: 14px;
            display:flex;
            flex-direction:column;
            gap: 8px;
            flex: 1;
        }
        .postMeta{
            display:flex;
            gap: 8px;
            flex-wrap: wrap;
            align-items:center;
        }
        .chip{
            font-size: 12px;
            color: var(--muted);
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid rgba(15,23,42,.10);
            background: rgba(255,255,255,.85);
        }
        .chip.cat{
            border-color: rgba(236,72,153,.18);
            background: rgba(236,72,153,.08);
            color: #7a2b52;
            font-weight: 800;
        }
        .postTitle{
            margin: 0;
            font-size: 14px;
            line-height: 1.25;
        }
        .postTitle a{
            text-decoration:none;
        }
        .postTitle a:hover{
            text-decoration: underline;
            text-underline-offset: 3px;
        }
        .postExcerpt{
            margin: 0;
            font-size: 12.8px;
            color: var(--muted);
        }
        .postLink{
            margin-top: auto;
            display:inline-flex;
            align-items:center;
            gap: 8px;
            font-weight: 900;
            font-size: 12.8px;
            text-decoration:none;
            color: var(--brand2);
        }
        .postLink:hover{ text-decoration: underline; text-underline-offset: 3px; }

        .footer{
            margin-top: 18px;
            padding: 18px 0 10px;
            color: var(--muted);
            font-size: 12.5px;
            display:flex;
            justify-content:space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
        .footer a{ color: var(--muted); text-decoration:none; }
        .footer a:hover{ color: var(--ink); }