:root {
    --vc-bg: #000000;
    --vc-surface: #111111;
    --vc-accent: #ff003c;
    --vc-accent-2: #ffcc00;
    --vc-text: #ffffff;
    --vc-text-dim: #999999;
    --vc-border: #222222;
    --vc-font-h: 'Unbounded', sans-serif;
    --vc-font-t: 'Familjen Grotesk', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--vc-bg); color: var(--vc-text); font-family: var(--vc-font-t); line-height: 1.6; overflow-x: hidden; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
a { text-decoration: none; color: inherit; transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
section { padding: 120px 0; }
img { width: 100%; height: 100%; object-fit: cover; }

/* Custom Cursor */
.vc-cursor { position: fixed; width: 10px; height: 10px; background: var(--vc-accent); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: transform 0.1s; }

/* Buttons */
.vc-btn-cta { background: var(--vc-accent); color: white; padding: 12px 25px; border-radius: 0; font-family: var(--vc-font-h); font-weight: 900; font-size: 0.75rem; letter-spacing: 0.05em; }
.vc-btn-solid { background: var(--vc-accent); color: white; padding: 20px 45px; display: inline-block; font-family: var(--vc-font-h); font-weight: 900; font-size: 0.85rem; }
.vc-btn-solid.block { width: 100%; text-align: center; }
.vc-btn-solid:hover { background: white; color: var(--vc-bg); transform: skewX(-5deg); }
.vc-btn-outline { border: 2px solid var(--vc-text); padding: 18px 45px; display: inline-block; font-family: var(--vc-font-h); font-weight: 900; font-size: 0.85rem; }
.vc-btn-outline.block { width: 100%; text-align: center; }
.vc-btn-outline:hover { background: var(--vc-accent-2); border-color: var(--vc-accent-2); color: var(--vc-bg); transform: skewX(-5deg); }

/* Nav */
.vc-nav { padding: 40px 0; border-bottom: 2px solid var(--vc-border); position: sticky; top: 0; background: var(--vc-bg); z-index: 1000; }
.vc-nav-flex { display: flex; justify-content: space-between; align-items: center; }
.vc-logo { font-family: var(--vc-font-h); font-size: 1.8rem; font-weight: 900; color: white; }
.vc-logo span { color: var(--vc-accent); }
.vc-nav-right { display: flex; gap: 40px; align-items: center; }
.vc-link { font-family: var(--vc-font-h); font-size: 0.75rem; font-weight: 700; border-bottom: 1px solid transparent; }
.vc-link:hover { color: var(--vc-accent-2); border-bottom-color: var(--vc-accent-2); }

/* Hero */
.vc-hero { min-height: 90vh; display: flex; align-items: center; background: url('https://grainy-gradients.vercel.app/noise.svg'); }
.vc-hero-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 100px; align-items: center; }
.vc-badge { font-family: var(--vc-font-h); font-size: 0.7rem; font-weight: 900; background: var(--vc-accent-2); color: black; padding: 5px 15px; display: inline-block; margin-bottom: 30px; }
.vc-title { font-family: var(--vc-font-h); font-size: 7rem; line-height: 0.85; margin-bottom: 30px; }
.vc-title span { background: linear-gradient(to bottom, var(--vc-accent-2), var(--vc-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.vc-lead { font-size: 1.4rem; color: var(--vc-text-dim); margin-bottom: 50px; max-width: 600px; }
.vc-hero-btns { display: flex; gap: 20px; }
.vc-hero-box { position: relative; border: 4px solid var(--vc-text); padding: 20px; }
.vc-hero-float { position: absolute; top: -20px; right: -20px; background: white; color: black; padding: 10px 20px; font-family: var(--vc-font-h); font-weight: 900; font-size: 0.7rem; }

/* Trust */
.vc-trust { background: var(--vc-surface); padding: 100px 0; border-top: 2px solid var(--vc-border); border-bottom: 2px solid var(--vc-border); }
.vc-trust-flex { display: flex; justify-content: space-between; align-items: center; }
.vc-trust-title { font-family: var(--vc-font-h); text-transform: uppercase; font-size: 1.2rem; max-width: 250px; }
.vc-logo-grid { display: flex; gap: 60px; font-size: 3rem; color: var(--vc-text-dim); opacity: 0.2; }
.vc-logo-grid i:hover { color: var(--vc-accent-2); opacity: 1; }

/* Services */
.vc-header { margin-bottom: 80px; }
.vc-header h2 { font-family: var(--vc-font-h); font-size: 4rem; line-height: 1; }
.vc-header h2 span { color: var(--vc-accent); text-decoration: line-through; text-decoration-color: var(--vc-accent-2); }
.vc-header p { font-size: 1.2rem; color: var(--vc-text-dim); margin-top: 15px; }

.vc-service-card { background: var(--vc-surface); padding: 80px 50px; border-left: 2px solid var(--vc-accent); position: relative; height: 100%; transition: 0.4s; }
.vc-service-card:hover { background: #1a1a1a; transform: translateX(10px); }
.vc-service-card i { font-size: 3rem; color: var(--vc-accent-2); margin-bottom: 40px; }
.vc-service-card h3 { font-family: var(--vc-font-h); font-size: 2rem; margin-bottom: 20px; }
.vc-service-card p { color: var(--vc-text-dim); font-size: 1.1rem; }
.vc-card-num { position: absolute; top: 40px; right: 40px; font-family: var(--vc-font-h); font-size: 3rem; font-weight: 900; opacity: 0.05; }

/* Projects Grid */
.vc-header.flex { display: flex; justify-content: space-between; align-items: flex-end; }
.vc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.vc-grid-item { position: relative; height: 450px; border: 1px solid var(--vc-border); overflow: hidden; }
.vc-grid-item.tall { grid-row: span 2; height: 940px; }
.vc-overlay { position: absolute; bottom: 0; left: 0; padding: 40px; width: 100%; background: linear-gradient(to top, #000, transparent); color: white; opacity: 0; transition: 0.4s; }
.vc-grid-item:hover .vc-overlay { opacity: 1; }
.vc-overlay h4 { font-family: var(--vc-font-h); font-size: 2rem; margin-bottom: 5px; }

/* Pricing */
.vc-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.vc-price-card { border: 2px solid var(--vc-border); padding: 80px 40px; position: relative; transition: 0.4s; }
.vc-price-card.featured { border-color: var(--vc-accent); background: var(--vc-surface); }
.vc-price-card:hover { border-color: var(--vc-accent-2); }
.vc-price-header h3 { font-family: var(--vc-font-h); font-size: 2rem; margin-bottom: 10px; }
.vc-amount { font-family: var(--vc-font-h); font-size: 4rem; font-weight: 900; margin-bottom: 40px; color: var(--vc-accent-2); }
.vc-feature-list { margin-bottom: 40px; list-style: square; padding-left: 20px; border-top: 1px solid var(--vc-border); padding-top: 30px; }
.vc-feature-list li { margin-bottom: 15px; color: var(--vc-text-dim); font-weight: 700; }
.vc-tag { position: absolute; top: 0; right: 40px; background: var(--vc-accent); color: white; padding: 5px 15px; font-family: var(--vc-font-h); font-size: 0.7rem; font-weight: 900; }

/* Contact Section */
.vc-contact-card { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; padding: 100px; border: 4px solid white; }
.vc-contact-text h2 { font-family: var(--vc-font-h); font-size: 5rem; line-height: 0.85; margin-bottom: 30px; }
.vc-contact-text h2 span { color: var(--vc-accent); }
.vc-form input, .vc-form textarea { width: 100%; background: #111; border: 1px solid var(--vc-border); padding: 25px; color: white; font-family: var(--vc-font-h); margin-bottom: 20px; }
.vc-f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Footer */
.vc-footer { padding: 120px 0 60px; border-top: 2px solid var(--vc-border); }
.vc-footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 100px; margin-bottom: 100px; }
.vc-foot-links a { display: block; margin-bottom: 20px; font-family: var(--vc-font-h); font-size: 0.7rem; opacity: 0.6; }
.vc-foot-social { display: flex; gap: 30px; justify-content: flex-end; font-size: 2rem; color: var(--vc-accent); }
.vc-copyright { border-top: 1px solid var(--vc-border); text-align: center; padding-top: 40px; font-family: var(--vc-font-h); font-size: 0.6rem; opacity: 0.3; }

/* New Sections Styles */
.vc-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 60px; }
.vc-about-card { background: var(--vc-surface); padding: 60px; border-top: 4px solid var(--vc-text); }
.vc-about-card h3 { font-family: var(--vc-font-h); font-size: 3rem; line-height: 0.9; margin: 30px 0; }
.vc-bar { width: 100px; height: 10px; background: var(--vc-accent); margin-top: 20px; }

.vc-roi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 80px 0; border-top: 1px solid var(--vc-border); border-bottom: 1px solid var(--vc-border); padding: 80px 0; }
.vc-roi-item h4 { font-family: var(--vc-font-h); font-size: 5rem; color: var(--vc-accent-2); line-height: 1; }
.vc-roi-item p { font-family: var(--vc-font-h); font-size: 0.8rem; font-weight: 900; color: var(--vc-text-dim); text-transform: uppercase; margin-top: 10px; }
.vc-roi-footer { max-width: 800px; font-size: 1.25rem; color: var(--vc-text-dim); }

.vc-h-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; margin-top: 100px; }
.vc-h-num { font-family: var(--vc-font-h); font-size: 1.2rem; color: var(--vc-accent); font-weight: 900; background: white; color: black; padding: 5px 15px; display: inline-block; transform: skewX(-10deg); margin-bottom: 30px; }
.vc-h-step h4 { font-family: var(--vc-font-h); font-size: 1.8rem; margin-bottom: 20px; }
.vc-h-step p { color: var(--vc-text-dim); font-size: 1.1rem; }

.vc-shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px; }
.vc-shop-card { background: var(--vc-surface); padding: 40px; border: 1px solid var(--vc-border); text-align: center; }
.vc-shop-card img { height: 300px; margin-bottom: 30px; }
.vc-shop-card h4 { font-family: var(--vc-font-h); font-size: 1.5rem; margin-bottom: 10px; }
.vc-shop-card span { color: var(--vc-accent-2); font-family: var(--vc-font-h); font-weight: 900; }

.vc-faq-list { margin-top: 60px; border-top: 4px solid white; }
.vc-faq-item { border-bottom: 2px solid var(--vc-border); padding: 40px 0; }
.vc-faq-item h4 { font-family: var(--vc-font-h); font-size: 1.5rem; margin-bottom: 15px; }
.vc-faq-item p { color: var(--vc-text-dim); font-size: 1.1rem; max-width: 800px; }

/* Mobile */
@media (max-width: 992px) {
    .vc-hero-wrap, .vc-contact-card, .vc-footer-grid, .vc-about-grid, .vc-roi-grid, .vc-h-steps, .vc-shop-grid, .vc-faq-item { grid-template-columns: 1fr; }
    .vc-title { font-size: 4rem; }
    .vc-price-grid { grid-template-columns: 1fr; }
    .vc-contact-card { padding: 40px; }
    .vc-nav-right { display: none; }
}
@media (max-width: 600px) {
    .vc-logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
}