:root {
    --art-bg: #f4f4f4;
    --art-text: #1a1a1a;
    --art-primary: #ff3366; /* Vibrant Pink */
    --art-secondary: #ffffff;
    --art-accent: #3333ff; /* Electric Blue */
    --art-border: #000000;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--art-bg); color: var(--art-text);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6; overflow-x: hidden;
}

.art-container { max-width: 1400px; margin: 0 auto; padding: 40px;}

/* Header */
.art-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 40px; margin-bottom: 60px; border-bottom: 4px solid var(--art-border);
}
.art-brand {
    font-size: 36px; font-weight: 900; letter-spacing: -1px;
    position: relative; display: inline-block;
}
.art-brand::after {
    content: ''; position: absolute; bottom: 5px; right: -15px;
    width: 10px; height: 10px; background: var(--art-primary); border-radius: 50%;
}
.art-nav { display: flex; gap: 40px; }
.art-nav a {
    font-size: 18px; font-weight: bold; color: var(--art-text); text-decoration: none;
    position: relative; transition: color 0.3s;
}
.art-nav a::before {
    content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px;
    background: var(--art-accent); transition: width 0.3s;
}
.art-nav a:hover::before, .art-nav a.active::before { width: 100%; }

/* Hero */
.art-hero {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
    margin-bottom: 100px;
}
.ah-content h1 {
    font-size: 72px; font-weight: 900; line-height: 1; margin-bottom: 30px;
    letter-spacing: -2px;
}
.ah-content p { font-size: 22px; color: #555; margin-bottom: 40px; max-width: 500px;}

.ah-visual {
    position: relative; height: 500px; background: var(--art-secondary);
    border: 4px solid var(--art-border); display: flex; justify-content: center; align-items: center;
    overflow: hidden;
}
.ah-visual::before {
    content: ''; position: absolute; width: 300px; height: 300px;
    background: var(--art-primary); border-radius: 50%; mix-blend-mode: multiply;
    transform: translate(-50px, -50px);
}
.ah-visual::after {
    content: ''; position: absolute; width: 300px; height: 300px;
    background: var(--art-accent); border-radius: 50%; mix-blend-mode: multiply;
    transform: translate(50px, 50px);
}

.btn-art {
    display: inline-block; padding: 15px 40px; font-size: 18px; font-weight: bold;
    color: var(--art-secondary); background: var(--art-text); border: 2px solid var(--art-text);
    transition: all 0.3s; margin-right: 20px; text-transform: uppercase;
}
.btn-art:hover { background: var(--art-primary); border-color: var(--art-primary); color: var(--art-secondary); transform: translate(5px, -5px); box-shadow: -5px 5px 0 var(--art-text);}
.btn-art-alt {
    display: inline-block; padding: 15px 40px; font-size: 18px; font-weight: bold;
    color: var(--art-text); background: transparent; border: 2px solid var(--art-text);
    transition: all 0.3s; text-transform: uppercase;
}
.btn-art-alt:hover { background: var(--art-accent); border-color: var(--art-accent); color: var(--art-secondary); transform: translate(5px, -5px); box-shadow: -5px 5px 0 var(--art-text);}

/* Stats */
.art-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 100px;
}
.as-item {
    padding: 40px; background: var(--art-secondary); border: 4px solid var(--art-border);
    position: relative;
}
.as-item::before {
    content: ''; position: absolute; top: -10px; left: -10px; width: 100%; height: 100%;
    border: 4px solid var(--art-accent); z-index: -1;
}
.as-val { font-size: 56px; font-weight: 900; margin-bottom: 10px; line-height: 1;}
.as-lbl { font-size: 16px; font-weight: bold; text-transform: uppercase; color: #666;}

/* Features */
.art-features { margin-bottom: 100px;}
.art-features h2 { font-size: 48px; font-weight: 900; margin-bottom: 60px; letter-spacing: -1px;}
.af-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;}
.af-card {
    padding: 40px; background: var(--art-text); color: var(--art-secondary);
    transition: transform 0.3s;
}
.af-card:hover { transform: translateY(-10px); background: var(--art-primary);}
.af-card h3 { font-size: 24px; font-weight: bold; margin-bottom: 20px;}
.af-card p { font-size: 16px; opacity: 0.8;}

/* Nodes */
.art-nodes { margin-bottom: 100px;}
.art-nodes h2 { font-size: 48px; font-weight: 900; margin-bottom: 60px; letter-spacing: -1px;}
.an-list { display: flex; flex-wrap: wrap; gap: 20px;}
.an-item {
    padding: 15px 30px; font-size: 18px; font-weight: bold; border: 2px solid var(--art-border);
    background: var(--art-secondary); transition: all 0.3s;
}
.an-item:hover { background: var(--art-accent); color: var(--art-secondary); border-color: var(--art-accent);}

/* FAQ */
.art-faq { margin-bottom: 120px;}
.art-faq h2 { font-size: 48px; font-weight: 900; margin-bottom: 60px; letter-spacing: -1px;}
.a-faq-item {
    margin-bottom: 30px; border-bottom: 2px solid var(--art-border); padding-bottom: 30px;
}
.a-fq { font-size: 24px; font-weight: bold; margin-bottom: 15px;}
.a-fa { font-size: 18px; color: #555; max-width: 800px;}

footer {
    padding: 40px 0; border-top: 4px solid var(--art-border);
    font-size: 14px; font-weight: bold; text-transform: uppercase;
}

@media (max-width: 1024px) {
    .art-hero { grid-template-columns: 1fr; }
    .ah-visual { height: 300px; }
    .art-stats { grid-template-columns: 1fr; }
    .af-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .art-header { flex-direction: column; gap: 20px; align-items: flex-start;}
    .art-nav { flex-wrap: wrap; gap: 20px;}
    .ah-content h1 { font-size: 48px; }
    .btn-art, .btn-art-alt { display: block; margin: 10px 0; width: 100%; text-align: center;}
}