/* =========================================================================
   DAYOS-STYLE THEME OVERRIDE
   Re-skins the existing site (content + structure unchanged) to match the
   "AI for Business" brutalist-editorial style guide (DESIGN.md):
   near-monochrome canvas, oversized uppercase condensed display type,
   flat surfaces (no shadows/gradients), mint + yellow micro-accents,
   large border-radius, pill nav & buttons.
   Loaded AFTER main.css so these rules win.
   ========================================================================= */

:root {
	/* Colors */
	--color-carbon-black: #000000;
	--color-paper-white:  #ffffff;
	--color-warm-canvas:  #e5e5e5;
	--color-mist-gray:    #f3f3f3;
	--color-ash:          #c6c6c6;
	--color-smoke:        #979797;
	--color-slate:        #444444;
	--color-graphite:     #2f2f2f;
	--color-mint-chip:    #d1ffca;
	--color-voltage-yellow: #fff100;

	/* Fonts (Google-font substitutes for SuisseIntlCond / SuisseIntl / SuisseIntlMono) */
	--font-display: 'Bebas Neue', 'Anton', 'Barlow Condensed', Impact, sans-serif;
	--font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

	/* Radius */
	--radius-btn: 8px;
	--radius-card: 28px;
	--radius-card-lg: 64px;
	--radius-pill: 48px;
	--radius-tag: 64px;
}

/* -------------------------------------------------------------------------
   0. GLOBAL RESET OF DARK/GRADIENT LOOK
------------------------------------------------------------------------- */
html, body {
	background: var(--color-warm-canvas) !important;
	color: var(--color-carbon-black) !important;
	font-family: var(--font-body) !important;
}

body * {
	font-family: inherit;
}

/* Kill every gradient / dark surface the original dark theme relied on */
body, .hero, .marquee-section, .about-section, .services-section,
.projects-section, .reviews-section, .ourwork-section, .contact-section,
.pricing-section, .circular-gallery-section, .site-footer {
	background-image: none !important;
}

/* Mute the decorative particle / blob / stripe / grid layers so the
   flat, shadow-free canvas shows through instead of purple/orange glow */
.hero-particles, .kinetic-blob, .kinetic-stripe, .advix-grid-bg,
.footer-glow, .floatcard-glow, .cursor-dot, .cursor-ring {
	display: none !important;
}

a { color: inherit; text-decoration: none; }

/* -------------------------------------------------------------------------
   1. TYPOGRAPHY
------------------------------------------------------------------------- */

/* Big uppercase display headings -> SuisseIntlCond stand-in */
.hero-heading,
.about-heading,
.projects-heading,
.contact-heading,
.ourwork-heading,
.services-heading,
.how-works-heading,
.pricing-heading,
.reviews-heading,
.marquee-heading h2,
.circular-gallery-heading,
.footer-cta-eyebrow,
.founder-name {
	font-family: var(--font-display) !important;
	text-transform: uppercase;
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: var(--color-carbon-black) !important;
}

.hero-heading { font-size: clamp(48px, 9vw, 130px); }
.projects-heading, .ourwork-heading, .contact-heading, .about-heading,
.services-heading, .how-works-heading, .pricing-heading, .reviews-heading {
	font-size: clamp(36px, 5vw, 80px);
}

.hero-subtext, .about-inner .animated-text, .how-works-sub, .ourwork-sub,
.contact-sub, .founder-bio, .service-desc, .project-desc, .review-quote,
.circular-gallery-sub {
	font-family: var(--font-body) !important;
	color: var(--color-slate) !important;
	font-weight: 400;
	letter-spacing: 0;
}

/* Eyebrows / tags -> Mono Label + Mint Tag component */
.hero-brand-tag, .how-works-eyebrow, .ourwork-eyebrow, .contact-eyebrow,
.reviews-eyebrow, .pricing-eyebrow, .project-category, .floatcard-tag,
.circular-gallery-tag, .circular-gallery-eyebrow, .advix-pill {
	font-family: var(--font-mono) !important;
	font-size: 12px !important;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	background: var(--color-mint-chip) !important;
	color: var(--color-carbon-black) !important;
	border: none !important;
	border-radius: var(--radius-tag) !important;
	padding: 6px 16px !important;
	display: inline-block;
}

/* -------------------------------------------------------------------------
   2. NAV — floating white pill
------------------------------------------------------------------------- */
.navbar {
	background: transparent !important;
	min-height: 8rem;
	display: flex;
	align-items: center;
}

.nav-links {
	background: var(--color-paper-white) !important;
	border-radius: var(--radius-pill) !important;
	box-shadow: none !important;
	border: none !important;
}

.nav-link-text {
	color: var(--color-slate) !important;
	font-family: var(--font-body) !important;
	font-weight: 500;
}

.nav-links a:hover .nav-link-text,
.nav-links a.is-active .nav-link-text {
	color: var(--color-carbon-black) !important;
}

.nav-panel-cta, .kinetic-cta {
	background: var(--color-carbon-black) !important;
	color: var(--color-paper-white) !important;
	border-radius: var(--radius-btn) !important;
	border: none !important;
}

.nav-dropdown, .nav-panel-head, .nav-panel-foot, .kinetic-panel,
.kinetic-overlay, .kinetic-bg {
	background: var(--color-paper-white) !important;
	color: var(--color-carbon-black) !important;
}

.kinetic-link, .nav-dropdown-items a { color: var(--color-carbon-black) !important; }

/* -------------------------------------------------------------------------
   3. BUTTONS
------------------------------------------------------------------------- */

/* Filled Dark Button — primary CTA */
.btn-contact, .contact-submit, .advix-pill-contact, .footer-cta-buttons a:first-child,
.lead-popup-submit {
	background: var(--color-carbon-black) !important;
	background-image: none !important;
	color: var(--color-paper-white) !important;
	border: none !important;
	border-radius: var(--radius-btn) !important;
	font-family: var(--font-body) !important;
	font-weight: 500;
	padding: 16px 24px !important;
	box-shadow: none !important;
}

.btn-contact:hover, .contact-submit:hover, .lead-popup-submit:hover {
	background: var(--color-graphite) !important;
	opacity: 1;
}

/* Ghost / text link buttons — secondary + "More details" */
.btn-more, .btn-live-project, .advix-pill-whatsapp, .footer-cta-buttons a:last-child {
	background: transparent !important;
	color: var(--color-carbon-black) !important;
	border: 1.5px solid var(--color-slate) !important;
	border-radius: var(--radius-btn) !important;
	font-family: var(--font-body) !important;
	font-weight: 500;
	padding: 14px 22px !important;
}

.btn-more:hover, .btn-live-project:hover {
	background: var(--color-mist-gray) !important;
	border-color: var(--color-carbon-black) !important;
}

.whatsapp-float, .whatsapp-float-ping {
	background: var(--color-mint-chip) !important;
	color: var(--color-carbon-black) !important;
	box-shadow: none !important;
}

/* -------------------------------------------------------------------------
   4. SECTIONS — alternate canvas / white / black like the reference
------------------------------------------------------------------------- */
.hero, .marquee-section, .contact-section, .pricing-section {
	background: var(--color-warm-canvas) !important;
}

.about-section, .ourwork-section, .circular-gallery-section {
	background: var(--color-mist-gray) !important;
}

/* Inverted dark bands — the "AI / GAP / CLOSED" style black blocks */
.services-section, .projects-section, .reviews-section {
	background: var(--color-carbon-black) !important;
	border-radius: var(--radius-card-lg) var(--radius-card-lg) 0 0;
	padding-top: 80px !important;
	padding-bottom: 80px !important;
}

.services-section .services-heading,
.services-section .how-works-heading,
.services-section .how-works-eyebrow,
.services-section .how-works-sub,
.projects-section .projects-heading,
.reviews-section .reviews-heading,
.reviews-section .reviews-eyebrow {
	color: var(--color-paper-white) !important;
}

.services-section .how-works-eyebrow, .reviews-section .reviews-eyebrow {
	background: var(--color-voltage-yellow) !important;
}

.services-section .service-desc,
.reviews-section .review-quote {
	color: var(--color-smoke) !important;
}

.service-num, .project-num {
	font-family: var(--font-mono) !important;
	color: var(--color-mint-chip) !important;
}

/* -------------------------------------------------------------------------
   5. CARDS — flat white surfaces, big radius, zero shadow
------------------------------------------------------------------------- */
.founder-card, .project-card, .floatcard-inner, .circular-gallery-card,
.review-slide, .contact-form-wrap, .contact-info, .lead-popup,
.marquee-tile {
	background: var(--color-paper-white) !important;
	border-radius: var(--radius-card) !important;
	box-shadow: none !important;
	border: none !important;
	color: var(--color-carbon-black) !important;
}

.floatcard-inner, .project-card { border-radius: var(--radius-card) !important; }

.contact-field input, .contact-field select, .contact-field textarea {
	background: var(--color-mist-gray) !important;
	border: 1.5px solid var(--color-ash) !important;
	border-radius: var(--radius-btn) !important;
	color: var(--color-carbon-black) !important;
}

.contact-field label { color: var(--color-slate) !important; }

.contact-info-value { color: var(--color-carbon-black) !important; }
.contact-info-label { color: var(--color-smoke) !important; }

.reviews-arrow {
	background: var(--color-paper-white) !important;
	color: var(--color-carbon-black) !important;
	border-radius: 50% !important;
	border: none !important;
}

.reviews-dot { background: var(--color-smoke) !important; }
.reviews-dot.is-active { background: var(--color-mint-chip) !important; }

/* -------------------------------------------------------------------------
   6. FOOTER — compact dark band
------------------------------------------------------------------------- */
.site-footer {
	background: var(--color-carbon-black) !important;
	color: var(--color-paper-white) !important;
	border-radius: var(--radius-card-lg) var(--radius-card-lg) 0 0;
}

.footer-heading { color: var(--color-paper-white) !important; }
.footer-col a, .footer-tagline, .footer-legal { color: var(--color-smoke) !important; }
.footer-col a:hover { color: var(--color-mint-chip) !important; }
.footer-brand, .footer-logo-img { filter: none; }

.footer-cta {
	background: var(--color-graphite) !important;
	border-radius: var(--radius-card) !important;
}

/* Voltage-yellow micro accent, per style guide, on email/phone highlights */
.contact-info-value[href^="mailto:"], .footer-col a[href^="mailto:"] {
	background: var(--color-voltage-yellow) !important;
	color: var(--color-carbon-black) !important;
	padding: 2px 6px;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
   7. PROMO BANNER -> mint marquee strip
------------------------------------------------------------------------- */
.promo-banner {
	background: var(--color-mint-chip) !important;
	color: var(--color-carbon-black) !important;
}

.promo-banner-tag {
	background: var(--color-carbon-black) !important;
	color: var(--color-paper-white) !important;
	border-radius: var(--radius-tag) !important;
}