:root {
    --bg-light: #fefdfa;
    --grid-line: #ebebe6;
    --text-dark: #121212;
    --text-gray: #555;
    
    /* Image Reference Color Palette */
    --c-yellow: #dcf168;
    --c-purple: #5848db;
    --c-purple-light: #7162fa;
    --c-blue: #3858f6;
    --c-blue-light: #6fb2f3;
    --c-pink: #f9a8d4;
    --c-cyan: #81e6d9;
    --c-lime: #b8f26d;
    --c-green-dark: #589658;
    --c-dark: #1a1a1a;
    --bg-gray: #f2f2f0;
    
    --font-main: 'Plus Jakarta Sans', sans-serif;
    --border-color: #121212;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: var(--bg-light); color: var(--text-dark); font-family: var(--font-main); overflow-x: hidden; line-height: 1.5; }

/* Utilities */
.pt-section { padding-top: 80px; }
.pb-section { padding-bottom: 80px; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
.text-center { text-align: center; }
.text-white { color: #fff; }
.text-dark { color: var(--text-dark); }
.mt-50 { margin-top: 50px; }

.border-brutalist { border: 1.5px solid var(--border-color); box-shadow: 4px 4px 0 var(--border-color); transition: all 0.2s ease; }
.border-brutalist:hover { box-shadow: 6px 6px 0 var(--border-color); transform: translate(-2px, -2px); }

/* Backgrounds */
.bg-blue { background-color: var(--c-blue); }
.bg-dark { background-color: var(--c-dark); }
.bg-purple { background-color: var(--c-purple); }
.bg-gray { background-color: var(--bg-gray); }
.bg-gray-dark { background-color: #ccc; }
.bg-yellow { background-color: var(--c-yellow); }
.bg-pink { background-color: var(--c-pink); }
.bg-cyan { background-color: var(--c-cyan); }
.bg-lime { background-color: var(--c-lime); }
.bg-green-dark { background-color: var(--c-green-dark); }
.card-blue-light { background-color: var(--c-blue-light); }
.card-yellow { background-color: #ffbc59; }
.card-pink { background-color: #ff7669; }

.grid-background { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -10; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 40px 40px; }

/* 1. Navbar */
.navbar { display: flex; justify-content: space-between; align-items: center; background: #ffffff; border: 1.5px solid var(--border-color); border-radius: 100px; padding: 0.5rem 0.5rem 0.5rem 1.5rem; max-width: 1000px; margin: 20px auto; position: sticky; top: 20px; z-index: 100; }
.logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.25rem; }
.logo-icon { width: 24px; height: 24px; background: var(--c-purple); border-radius: 50%; position: relative; }
.logo-icon::after { content: ''; position: absolute; width: 8px; height: 8px; background: #fff; border-radius: 50%; top: 8px; left: 8px; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: var(--text-dark); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.nav-links a:hover { color: var(--c-purple); }
.btn-primary-small { background: var(--c-purple); color: #fff; text-decoration: none; padding: 0.6rem 1.5rem; border-radius: 100px; font-weight: 600; border: 1.5px solid var(--border-color); }

/* 2. Hero Section */
.hero { max-width: 1200px; margin: 60px auto 0; padding: 0 5%; text-align: center; }
.hero-title { font-size: 5.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; margin-bottom: 3rem; }
.highlight-shape { padding: 0 1rem; border-radius: 40px; display: inline-block; }
.highlight-yellow { background-color: var(--c-yellow); border: 1.5px solid transparent; }
.highlight-outline { border: 1.5px solid var(--border-color); border-radius: 40px; background: transparent; transform: rotate(-5deg); display: inline-block; padding: 0.2rem 1rem; }
.icon-toggle { display: inline-flex; align-items: center; padding: 0.3rem 0.8rem; background: var(--bg-light); border: 1.5px solid var(--border-color); border-radius: 40px; }
.toggle-circle { width: 24px; height: 24px; background: var(--c-purple); border-radius: 50%; display: inline-block; margin-right: 0.5rem; }

.hero-bento-card { background: linear-gradient(135deg, var(--c-purple-light), var(--c-purple)); border: 1.5px solid var(--border-color); border-radius: 32px; padding: 2rem; text-align: left; position: relative; overflow: hidden; color: #fff; min-height: 480px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 4px 4px 0 var(--border-color); margin-bottom: 40px; }
.bento-bg-shape { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%); }
.shape-1 { width: 400px; height: 400px; top: -100px; left: -100px; }
.shape-2 { width: 400px; height: 400px; bottom: -100px; right: 200px; }
.bento-header { display: flex; justify-content: flex-end; position: relative; z-index: 2; }
.bento-tags { display: flex; gap: 0.8rem; }
.tag { background: rgba(255, 255, 255, 0.9); color: var(--text-dark); padding: 0.5rem 1rem; border-radius: 100px; font-size: 0.85rem; font-weight: 700; border: 1.5px solid var(--border-color); }
.bento-body { display: flex; justify-content: space-between; align-items: flex-end; position: relative; z-index: 2; margin-top: 4rem; }
.bento-description { max-width: 350px; }
.star-icon { color: var(--c-pink); font-size: 3rem; line-height: 1; margin-bottom: 1rem; }
.bento-description p { font-size: 1.1rem; opacity: 0.95; line-height: 1.4; font-weight: 500; }
.explore-circle { position: absolute; bottom: 0; right: 350px; width: 120px; height: 120px; background: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; z-index: 10; border: 1.5px solid var(--border-color); }
.circular-text { position: absolute; width: 100%; height: 100%; animation: spin 10s linear infinite; }
.circular-text textPath { fill: #fff; font-size: 11px; letter-spacing: 2px; font-family: monospace; }
.play-btn { font-size: 1.5rem; transform: translateX(2px); }
@keyframes spin { 100% { transform: rotate(360deg); } }
.bento-image-mockup { width: 300px; height: 280px; background: #fff; border-radius: 20px 20px 0 0; overflow: hidden; border: 1.5px solid var(--border-color); transform: translateY(2rem) rotate(5deg); transform-origin: bottom right; }
.bento-image-mockup img { width: 100%; height: 100%; object-fit: cover; }

/* 3. Logos & Marquee */
.logo-strip { padding: 20px 0; border-top: 1.5px solid var(--border-color); border-bottom: 1.5px solid var(--border-color); background: #fff; overflow: hidden; }
.strip-content { display: flex; justify-content: space-around; width: 100%; max-width: 1200px; margin: 0 auto; align-items: center; }
.client-logo { font-weight: 800; font-size: 1.2rem; color: #aaa; text-transform: uppercase; }
.yellow-marquee { background: var(--c-yellow); border-bottom: 1.5px solid var(--border-color); overflow: hidden; white-space: nowrap; padding: 15px 0; }
.marquee-content { display: inline-flex; animation: marquee 15s linear infinite; font-weight: 800; font-size: 1.5rem; text-transform: uppercase; gap: 2rem; color: var(--text-dark); }
.marquee-content span { display: inline-flex; align-items: center; gap: 1rem; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* 4. Stats Section */
.section-title-white { font-size: 3rem; color: #fff; line-height: 1.1; margin-bottom: 1rem; }
.section-subtitle-white { color: rgba(255,255,255,0.8); font-size: 1.2rem; }
.stats-bento-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; }
.stat-card-main { padding: 3rem; border-radius: 24px; position: relative; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.floating-badge { position: absolute; top: -15px; right: 20px; font-weight: 700; padding: 0.5rem 1rem; border-radius: 50px; border: 1.5px solid var(--border-color); }
.yellow-badge { background: var(--c-yellow); color: var(--text-dark); transform: rotate(10deg); }
.stat-card-main h3 { font-size: 2.5rem; margin-bottom: 1rem; line-height: 1.2; color: var(--text-dark); }
.illustration-face { font-size: 4rem; width: 100px; height: 100px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2rem; transform: rotate(-15deg); color: var(--text-dark); }
.stats-right-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.stat-box { padding: 2rem; border-radius: 24px; text-align: left; position: relative; color: var(--text-dark); }
.stat-box h2 { font-size: 3rem; margin: 1rem 0 0.5rem; }
.stat-box p { font-weight: 600; font-size: 0.9rem; }
.icon-box { background: #fff; width: 40px; height: 40px; border-radius: 8px; border: 1.5px solid var(--border-color); display: flex; align-items: center; justify-content: center; color: var(--text-dark); }
.wide-stat { grid-column: 1 / -1; }

/* 5. Services Section */
.section-title { font-size: 3rem; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 1.5rem; color: var(--text-dark); }
.services-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: center; }
.services-text p { font-size: 1.1rem; color: var(--text-gray); }
.services-stack { position: relative; height: 400px; }
.stack-card { position: absolute; width: 100%; height: 100%; border-radius: 24px; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bento-stack-3 { top: -20px; left: -20px; z-index: 1; transform: rotate(-2deg); }
.bento-stack-2 { top: -10px; left: -10px; z-index: 2; transform: rotate(-1deg); }
.bento-stack-1 { top: 0; left: 0; z-index: 3; cursor: default; transform: rotate(0deg); }
.stack-header h1 { font-size: 4rem; margin-bottom: 1rem; color: var(--text-dark); }
.stack-content h3 { font-size: 1.8rem; margin-bottom: 0.5rem; color: var(--text-dark); }
.stack-tags { display: flex; gap: 0.5rem; margin-top: 1rem; }
.stack-tags span { background: #fff; padding: 0.4rem 1rem; border-radius: 50px; font-size: 0.8rem; font-weight: 700; border: 1.5px solid var(--border-color); color: var(--text-dark); }
.stack-image { background: #fff; width: 50%; height: 150px; border-radius: 12px; position: absolute; right: 2rem; bottom: -2rem; background-image: linear-gradient(#eee 10px, transparent 10px); background-size: 100% 20px; }

/* 6. Portfolio Grid */
.curvy-line-illustration { width: 100px; height: 20px; border-bottom: 4px solid var(--c-yellow); border-radius: 50%; margin: 10px 0; }
.portfolio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.portfolio-card h3 { font-size: 1.5rem; margin: 1rem 0 0.5rem; color: var(--text-dark); }
.portfolio-card p { font-size: 0.95rem; color: var(--text-gray); }
.port-img-container { height: 320px; border-radius: 24px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.port-img-container img { width: 90%; height: 90%; object-fit: cover; border-radius: 12px; border: 1.5px solid var(--border-color); transform: rotate(-2deg); transition: transform 0.3s; }
.portfolio-card:hover .port-img-container img { transform: rotate(0) scale(1.05); }
.hover-view-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 1rem 2rem; border-radius: 50px; font-weight: 700; color: var(--text-dark); opacity: 0; transition: opacity 0.3s; }
.portfolio-card:hover .hover-view-btn { opacity: 1; }

/* 7. Testimonials */
.lowercase-title { font-family: monospace; font-size: 2rem; font-weight: 600; text-transform: lowercase; }
.testimo-grid { display: grid; grid-template-columns: 0.5fr 1fr 1fr; gap: 2rem; }
.rating-card { border-radius: 24px; padding: 3rem 2rem; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.rating-card h1 { font-size: 4rem; margin-bottom: 0.5rem; }
.stars { color: var(--c-yellow); font-size: 1.5rem; letter-spacing: 2px; }
.review-card { background: #fff; padding: 2.5rem; border-radius: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.quote-icon { font-size: 4rem; color: var(--bg-gray); line-height: 0.5; margin-bottom: 1rem; }
.review-card p { font-size: 1.1rem; line-height: 1.6; color: var(--text-dark); }
.reviewer { display: flex; align-items: center; gap: 1em; margin-top: 2rem; color: var(--text-dark); }
.rev-avatar { width: 48px; height: 48px; background: var(--bg-gray); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--border-color); font-size: 1.5rem; }
.reviewer h4 { font-size: 1rem; margin-bottom: 0; }
.reviewer p { font-size: 0.85rem; color: var(--text-gray); }

/* 8. FAQ */
.faq-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 4rem; align-items: start; }
.acc-item { border-bottom: 1.5px solid var(--border-color); padding: 1.5rem 0; cursor: pointer; }
.acc-title { font-weight: 700; font-size: 1.1rem; display: flex; justify-content: space-between; color: var(--text-dark); }
.faq-card { padding: 3rem; border-radius: 24px; text-align: left; }
.question-mark { font-size: 4rem; font-weight: 800; color: var(--c-blue); margin-bottom: 1rem; }
.faq-card h3 { font-size: 1.8rem; margin-bottom: 1rem; color: var(--text-dark); }
.btn-dark { background: var(--text-dark); color: #fff; padding: 1rem 2rem; border-radius: 100px; font-weight: 700; border: none; margin-top: 1.5rem; cursor: pointer; }

/* Accordion */
.arrow { display: inline-block; transition: transform 0.35s ease; font-size: 1.1rem; }
.acc-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; font-size: 1rem; color: var(--text-gray); line-height: 1.7; padding: 0; }
.acc-item.open .acc-body { max-height: 200px; padding: 1rem 0; }
.acc-item.open .arrow { transform: rotate(90deg); }
.acc-item { transition: background 0.2s ease; padding-left: 0.5rem; padding-right: 0.5rem; border-radius: 8px; }
.acc-item:hover { background: rgba(0,0,0,0.03); }

/* Navbar active link */
.nav-links a.active { color: var(--c-purple); }

/* 9. Contact Area */
.contact-grid { border-radius: 32px; padding: 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; }
.contact-text h2 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 1rem; color: #fff; }
.contact-text p { color: #fff; }
.star-badge { position: absolute; left: 4rem; bottom: 3rem; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; transform: rotate(-10deg); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
input, textarea { width: 100%; padding: 1rem; border-radius: 12px; background: transparent; font-family: var(--font-main); margin-bottom: 1rem; outline: none; }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.7); }
.btn-block { width: 100%; padding: 1rem; border-radius: 100px; font-weight: 700; background: #fff; color: var(--text-dark); cursor: pointer; }

/* 10. Footer */
.footer { padding: 80px 0 40px; position: relative; border-top: 1.5px solid var(--border-color); }
.giant-logo { font-size: 10vw; text-align: center; line-height: 1; letter-spacing: -0.05em; margin-bottom: 3rem; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 800px; margin: 0 auto; gap: 2rem; text-align: left; }
.footer-links .col h4 { font-size: 1.2rem; margin-bottom: 1.5rem; color: rgba(255,255,255,0.5); }
.footer-links .col a { display: block; color: #fff; text-decoration: none; margin-bottom: 0.8rem; font-weight: 500; font-size: 1.1rem; }
.copyright { margin-top: 60px; color: rgba(255,255,255,0.5); font-size: 0.9rem; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 20px; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .hero-title { font-size: 3rem; }
    .bento-body { flex-direction: column; align-items: flex-start; }
    .bento-image-mockup { transform: rotate(0); width: 100%; height: 200px; margin-top: 2rem; }
    .explore-circle { position: relative; right: 0; width: 80px; height: 80px; margin-top: -60px; margin-bottom: 20px; align-self: flex-end; }
    .stats-bento-grid, .stats-right-col, .services-grid, .portfolio-grid, .testimo-grid, .faq-grid, .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
    .contact-grid { padding: 2rem; }
    .footer-links { grid-template-columns: 1fr; text-align: center; }
}