:root {
    --primary: #1976d2;
    --primary-dark: #0f5bb5;
    --accent: #ff8a00;
    --accent-dark: #e56d00;
    --background: #f5f7fb;
    --surface: #ffffff;
    --text: #243447;
    --text-light: #5d6b82;
    --border: #dce3ec;
    --shadow: 0 10px 30px rgba(0,0,0,.08);
    --radius: 14px;
    --transition: .25s ease;
    --max-width: 1240px;
}
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html {
    scroll-behavior:smooth;
}
body {
    font-family: Inter, Segoe UI, Arial, sans-serif;
    background:var(--background);
    color:var(--text);
    line-height:1.7;
    font-size:18px;
}
img{
    max-width:100%;
    display:block;
}
a{
    text-decoration:none;
}
ul{
    list-style:none;
}
.container{
    width:min(92%,var(--max-width));
    margin:auto;
}
header{
    position:sticky;
    top:0;
    z-index:1000;
    background:var(--surface);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(0,0,0,.05);
}
nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:80px;
}
.logo{
    display:flex;
    align-items:center;
    gap:14px;
    font-size:30px;
    font-weight:700;
    color:var(--text);
}
.logo img{
    width:54px;

}
nav ul{
    display:flex;
    gap:35px;
}
nav a{
    color:var(--text);
    transition:var(--transition);
}
nav a:hover{
    color:var(--primary);
}
.hero {
	max-width: 1200px;
	margin: auto;
	padding: 80px 20px;
	text-align: center;
}
.hero-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    align-items:center;
    gap:80px;
}
.hero h1{
    font-size:4rem;
    margin-bottom:20px;
}
.hero p{
    color:var(--text-light);
    font-size:22px;
    margin-bottom:40px;
}
.hero-buttons{
    display:flex;
    gap:20px;
    margin-bottom:50px;
}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 16px 34px;
    border-radius:var(--radius);
    font-weight:600;
    transition:var(--transition);
}
.primary{
    background:var(--primary);
    color:var(--surface);
}
.primary:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
}
.secondary{
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--border);
}
.secondary:hover{
    background:var(--background);
}
.claim{
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:32px;
    font-weight:700;
}
.claim strong:nth-child(2){
    color:var(--primary);
}
.claim strong:nth-child(3){
    color:var(--accent);
}
.hero-image{
    display:flex;
    justify-content:center;
}
.hero-image img{
    border-radius:22px;
    box-shadow:var(--shadow);
}
section{
    padding: 90px 0;
}
section h2{
    font-size:44px;
    margin-bottom:18px;
    text-align:center;
}
.subtitle{
    text-align:center;
    max-width:820px;
    margin:auto;
    color:var(--text-light);
    margin-bottom:70px;
}
.why-grid{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:30px;
}
.why-grid>div{
    background:var(--surface);
    border-radius:var(--radius);
    padding:35px;
    box-shadow:var(--shadow);
    transition:var(--transition);
}
.why-grid>div:hover{
    transform:translateY(-8px);
}
.why-grid h3{
    margin-bottom:20px;
    font-size:24px;
}
.downloads{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    gap:25px;
}
.downloads a{
    background:var(--surface);
    padding:30px;
    border-radius:var(--radius);
    text-align:center;
    color:var(--text);
    font-weight:600;
    box-shadow:var(--shadow);
    transition:var(--transition);
}
.downloads a:hover{
    transform:translateY(-6px);
}
footer{
    margin-top:120px;
    background:#1b2432;
    color:var(--surface);
}
.footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:60px 0;
}
.footer a{
    color:var(--surface);
    margin-left:20px;
}
.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:60px;
}
.card{
    background:var(--surface);
    border-radius:var(--radius);
    padding:40px;
    box-shadow:var(--shadow);
    transition:all .25s ease;
    border:1px solid transparent;
    position:relative;
    overflow:hidden;
}
.card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:5px;
    height:100%;
    background:var(--primary);
    transform:scaleY(0);
    transition:.25s;
    transform-origin:top;
}
.card:hover{
    transform:translateY(-10px);
    border-color:#d6e6f8;
}
.card:hover::before{
    transform:scaleY(1);
}
.icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: radial-gradient(circle,var(--surface) 22%, rgba(198, 228, 247, 1) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	border: 3px solid var(--surface);
	box-shadow: 0 0px 5px rgba(0,0,0,.12);
}
.card h3{
    margin-bottom:18px;
    font-size:24px;
}
.card p{
    color:ar(--text-light);
}
.self-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:60px;
}
.self-grid>div{
    background:var(--surface);
    border-radius:var(--radius);
    padding:40px;
    box-shadow:var(--shadow);
}
.self-grid h3{
    margin-bottom:20px;
}
.connections{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
}
.node:hover, .server:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}
.hero{
    max-width:1200px;
    margin:auto;
    padding:80px 20px;
    text-align:center;
}
.diagram {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 220px 320px 220px;
	align-items: center;
	justify-items: center;
	margin-top: -150px;
}
.connections line{
    stroke:var(--primary);
    stroke-width:3;
    stroke-dasharray:8 10;
    opacity:.7;
    transition: stroke-width .25s, opacity .25s;
    animation:flow 3s linear infinite;
}
.node, .server {
	position: relative;
	background: radial-gradient(circle,var(--surface) 22%, rgba(198, 228, 247, 1) 100%);
	text-decoration: none;
	color: inherit;
	transition: .25s;
	z-index: 2;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.12);
    border: 3px solid var(--surface);
}
.server {
    width: 330px;
    height: 330px;
}
.node {
    width: 120px;
    height: 120px;
}
.node img {
	width: 90px;
	margin-bottom: 15px;
	margin-top: 100px;
	z-index: 2;
}
.brave img {
	height: 85px;
}
.server img {
	width: 210px;
}
.node h3 {
	margin: 0 0 -5px 0;
	font-size: 1.3rem;
	white-space: nowrap;
}
.server h3 {
	margin-top: -20px;
}
.link::after {
	content: "";
	display: inline-block;
	background-color: currentColor;
	margin-left: 0.25em;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M5,2 C5.55228,2 6,2.44772 6,3 C6,3.55228 5.55228,4 5,4 L4,4 L4,12 L12,12 L12,11 C12,10.4477 12.4477,10 13,10 C13.5523,10 14,10.4477 14,11 L14,12 C14,13.1046 13.1046,14 12,14 L4,14 C2.89543,14 2,13.1046 2,12 L2,4 C2,2.89543 2.89543,2 4,2 L5,2 Z M15,1 L15,5.99814453 C15,6.55043453 14.5523,6.99814453 14,6.99814453 C13.4477,6.99814453 13,6.55043453 13,5.99814453 L13,4.41419 L8.71571,8.69846 C8.32519,9.08899 7.69202,9.08899 7.3015,8.69846 C6.91097,8.30794 6.91097,7.67477 7.3015,7.28425 L11.5858,3 L9.99619141,3 C9.44391141,3 8.99619141,2.55228 8.99619141,2 C8.99619141,1.44772 9.44391141,1 9.99619141,1 L15,1 Z'/%3E%3C/svg%3E");
	height: 0.8em;
	width: 0.8em;
}
.link {
	background-color: #dbf8ff;
	border: 1px solid var(--primary-dark);
	border-radius: 15px;
	padding: 0 5px;
	color: var(--primary-dark) !important;
}
.node:hover .link, .server:hover .link {
	background-color: var(--primary);
	color: var(--background) !important;
}
.node span, .server span {
    color: #6b7280;
    white-space: nowrap;
    font-size: smaller;
}
.firefox{
    grid-column:1;
    grid-row:1;
}
.edge{
    grid-column:3;
    grid-row:1;
}
.server{
    grid-column:2;
    grid-row:2;
}
.brave{
    grid-column:1;
    grid-row:3;
}
.other{
    grid-column:2;
    grid-row:3;
}
.chrome{
    grid-column:3;
    grid-row:3;
}
.connections line.active{
    stroke-width:6;
    opacity:1;
}
#selfhosted svg {
    width: 75px;
    float: left;
    margin-right: 10px;
}
@keyframes flow{
    from{
        stroke-dashoffset:0;
    }
    to{
        stroke-dashoffset:-36;
    }
}
@media(max-width:900px){
    .diagram{
        display:flex;
        flex-direction:column;
        gap:35px;
    }
    .connections{
        display:none;
    }
    .hero-grid{
        grid-template-columns:1fr;
    }
    .hero{
        text-align:center;
    }
    .hero-buttons{
        justify-content:center;
    }
    .claim{
        align-items:center;
    }
    .why-grid{
        grid-template-columns:1fr;
    }
    .downloads{
        grid-template-columns:1fr 1fr;
    }
    .footer{
        flex-direction:column;
        gap:30px;
    }
    nav{
        flex-direction:column;
        height:auto;
        padding:20px 0;
        gap:20px;
    }
    nav ul{
        flex-wrap:wrap;
        justify-content:center;
    }
    .hero h1{
        font-size:48px;
    }
    .cards{
        grid-template-columns:1fr;
    }
    .self-grid{
        grid-template-columns:1fr;
    }
}