*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

body{
    background:#f5f5f5;
    color:#000000;
    font-family:'Space Grotesk',sans-serif;
    font-weight:400;
    font-size:1rem;
    line-height:1.6;
}

/* Header */
#site-header{
    border-bottom:3px solid #000000;
    padding:1rem 2rem;
    background:#ffffff;
}
.header-inner{
    max-width:1100px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.logo{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:1.5rem;
    color:#000000;
}
.header-nav{display:flex;gap:1.5rem}
.nav-link{
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:0.85rem;
    text-decoration:none;
    color:#000000;
    border:3px solid #000000;
    padding:0.3rem 0.8rem;
    transition:transform 0.15s,box-shadow 0.15s;
    box-shadow:0 0 0 #000000;
    display:inline-block;
}
.nav-link:hover{
    transform:translate(2px,2px);
    box-shadow:3px 3px 0 #000000;
}

/* Hero */
#hero{
    padding:4rem 2rem;
    max-width:1100px;
    margin:0 auto;
}
.hero-card{
    background:#ffe066;
    border:3px solid #000000;
    box-shadow:8px 8px 0 #000000;
    padding:3rem;
    position:relative;
    transform:translate(-12px,-8px);
}
.hero-domain{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(2.5rem,6vw,5rem);
    line-height:1.1;
    margin-bottom:0.5rem;
    color:#000000;
}
.hero-label{
    font-family:'Syne',sans-serif;
    font-weight:800;
    font-size:clamp(1.5rem,4vw,2.5rem);
    margin-bottom:1.5rem;
    color:#000000;
    letter-spacing:0.05em;
}
.hero-desc{
    font-family:'Inter',sans-serif;
    font-size:1.1rem;
    color:#000000;
    margin-bottom:2rem;
    max-width:600px;
}
.cta-button{
    display:inline-block;
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:1rem;
    text-decoration:none;
    color:#ffffff;
    background:#ff66b3;
    border:3px solid #000000;
    box-shadow:6px 6px 0 #000000;
    padding:0.8rem 2rem;
    transition:transform 0.15s,box-shadow 0.15s;
}
.cta-button:hover{
    transform:translate(2px,2px);
    box-shadow:4px 4px 0 #000000;
}
.cta-button:active{
    transform:translate(4px,4px);
    box-shadow:2px 2px 0 #000000;
}

.license-stamp{
    position:absolute;
    top:1rem;
    right:1rem;
    border:4px solid #000000;
    padding:0.5rem 2rem;
    font-family:'Space Mono',monospace;
    font-weight:400;
    font-size:0.85rem;
    transform:rotate(-8deg);
    background:#ffffff;
}

/* Content Block */
.content-block{
    max-width:1100px;
    margin:0 auto;
    padding:3rem 2rem;
}
.section-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    margin-bottom:1.5rem;
    border-bottom:3px solid #000000;
    padding-bottom:0.5rem;
    display:inline-block;
}
.section-body{
    font-family:'Inter',sans-serif;
    font-size:1rem;
    line-height:1.6;
    color:#000000;
    max-width:800px;
}

/* Card Grid */
#types{max-width:1100px;margin:0 auto;padding:3rem 2rem}
.card-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}
.brutalist-card{
    border:3px solid #000000;
    box-shadow:6px 6px 0 #000000;
    padding:2rem;
    transition:transform 0.15s,box-shadow 0.15s;
}
.brutalist-card:hover{
    transform:translate(2px,2px);
    box-shadow:4px 4px 0 #000000;
}
.brutalist-card.pink{background:#ff66b3;color:#000000}
.brutalist-card.blue{background:#66b3ff;color:#000000}
.brutalist-card.yellow{background:#ffe066;color:#000000}
.card-title{
    font-family:'Syne',sans-serif;
    font-weight:800;
    font-size:clamp(1.5rem,4vw,2.5rem);
    margin-bottom:0.75rem;
    color:#000000;
}
.card-body{
    font-family:'Inter',sans-serif;
    font-size:0.9rem;
    line-height:1.5;
    color:#000000;
    margin-bottom:1rem;
}
.card-code{
    font-family:'Space Mono',monospace;
    font-size:0.85rem;
    color:#000000;
    font-weight:400;
    margin-top:1rem;
}

/* FAQ */
.faq-item{
    border:3px solid #000000;
    box-shadow:6px 6px 0 #000000;
    padding:1.5rem;
    margin-bottom:1.5rem;
    background:#ffffff;
    transition:transform 0.15s,box-shadow 0.15s;
}
.faq-item:hover{
    transform:translate(2px,2px);
    box-shadow:4px 4px 0 #000000;
}
.faq-q{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:1.1rem;
    margin-bottom:0.5rem;
    color:#000000;
}
.faq-a{
    font-family:'Inter',sans-serif;
    font-size:0.95rem;
    color:#000000;
    line-height:1.6;
}

/* Stickers */
.sticker{
    position:fixed;
    border:4px solid #000000;
    background:#ffffff;
    font-family:'Syne',sans-serif;
    font-weight:800;
    font-size:0.75rem;
    padding:0.5rem 1rem;
    letter-spacing:0.05em;
    box-shadow:4px 4px 0 #000000;
    z-index:50;
}
.sticker-1{
    top:20%;
    right:5%;
    transform:rotate(15deg);
}
.sticker-2{
    top:50%;
    left:3%;
    transform:rotate(-12deg);
}
.sticker-3{
    bottom:20%;
    right:8%;
    transform:rotate(8deg);
}

/* Footer */
#site-footer{
    border-top:3px solid #000000;
    text-align:center;
    padding:2rem;
    background:#ffffff;
    margin-top:3rem;
}
.footer-brand{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:1.2rem;
    color:#000000;
}
.footer-tagline{
    font-family:'Inter',sans-serif;
    font-size:0.85rem;
    color:#000000;
    margin-top:0.25rem;
}

@media(max-width:768px){
    .card-grid{grid-template-columns:1fr}
    .header-inner{flex-direction:column;gap:1rem}
    .sticker{position:static;margin:1rem;transform:none !important}
}