/* Cosmic visual skin for G14. Loaded after each page's existing styles. */
:root {
  color-scheme: dark;
  --paper: #080611;
  --white: #100d1c;
  --ink: #f4f0ff;
  --muted: #aaa2bd;
  --line: rgba(231, 222, 255, .15);
  --olive: #c4ff4d;
  --olive-dark: #9bd235;
  --clay: #a183ff;
  --pale: #171225;
  --display: 'Space Grotesk', Arial, sans-serif;
  --sans: 'Manrope', Arial, sans-serif;
  --mono: 'DM Mono', monospace;
}

html { background: var(--paper); }
body {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 78% 12%, rgba(111, 53, 220, .19), transparent 32rem),
    radial-gradient(ellipse at 8% 44%, rgba(23, 151, 194, .09), transparent 35rem),
    #080611;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .56;
  background-image:
    radial-gradient(1px 1px at 8% 14%, #fff 98%, transparent),
    radial-gradient(1px 1px at 28% 71%, #c4ff4d 98%, transparent),
    radial-gradient(1.5px 1.5px at 46% 32%, #fff 98%, transparent),
    radial-gradient(1px 1px at 65% 82%, #bba3ff 98%, transparent),
    radial-gradient(1px 1px at 84% 25%, #fff 98%, transparent),
    radial-gradient(1px 1px at 93% 62%, #8feaff 98%, transparent);
  background-size: 370px 310px, 430px 370px, 510px 440px, 390px 520px, 610px 390px, 480px 460px;
}
a { color: inherit; }
.topbar, .site-header {
  background: rgba(8, 6, 17, .84) !important;
  border-color: var(--line) !important;
  backdrop-filter: blur(18px);
}
.nav { border-color: var(--line); }
.nav a, .nav-links a, .mobile-nav a { color: #d4cde4 !important; }
.nav a:hover, .nav-links a:hover, .mobile-nav a:hover { color: var(--olive) !important; }
.nav .nav-cta, .nav-cta {
  color: #111408 !important;
  background: var(--olive) !important;
  border: 0;
  box-shadow: 0 0 24px rgba(196, 255, 77, .16);
}
.menu-toggle { color: var(--ink) !important; border-color: var(--line) !important; background: #100d1c !important; }
.eyebrow, .section-tag, .service-no, .step-no, .creative-type { color: var(--olive) !important; }
.eyebrow:before { background: var(--violet, #a183ff) !important; }
.hero { background: radial-gradient(ellipse at 80% 45%, rgba(104, 48, 207, .12), transparent 36rem); }
.hero:after { border-color: rgba(190, 164, 255, .18); box-shadow: 0 0 0 38px rgba(161, 131, 255, .035), 0 0 0 78px rgba(161, 131, 255, .025); }
.hero h1, .section-head h2, .portfolio-intro h2, .about h2, .faq-title h2, .contact-copy h2,
.manifesto h2, .article h1, .article-body h2 { color: var(--ink); }
.hero h1 em, .hero h1 .accent, .article h1 em { color: var(--olive); }
.hero-sub, .section-head > p, .portfolio-intro p, .service p, .about-note > p,
.fact span, .step p, .contact-copy p, .article-deck { color: #b0a9c0; }
.button, .contact-action .button {
  color: #111408 !important;
  background: var(--olive) !important;
  border-radius: 3px;
  box-shadow: 0 0 28px rgba(196, 255, 77, .12);
}
.button:hover { color: #111408 !important; background: #d4ff81 !important; box-shadow: 0 8px 35px rgba(196, 255, 77, .24); }
.arrow-link { color: #e2daf3; border-color: rgba(226, 218, 243, .4); }
.arrow-link span, .service-arrow, .contact-action a span, .read-more { color: var(--olive) !important; }
.hero-orbit, .hero-orbit:before, .hero-orbit:after { border-color: rgba(177, 145, 255, .3) !important; }
.hero-orbit { box-shadow: 0 0 70px rgba(113, 53, 216, .13); }
.hero-card {
  color: var(--ink);
  background: linear-gradient(145deg, rgba(29, 22, 48, .96), rgba(14, 11, 25, .96));
  border: 1px solid rgba(199, 177, 255, .25);
  box-shadow: 0 25px 90px rgba(0, 0, 0, .42), 0 0 44px rgba(119, 62, 229, .13);
}
.hero-card-top, .hero-card-foot, .hero-note, .hero-meta { color: #aaa2bd; }
.hero-card-mark { color: var(--olive); background: rgba(196, 255, 77, .1); }
.hero-card p { color: #b7afc9; }
.hero-card-line, .hero-meta { border-color: var(--line); }
.proof, footer, .site-footer { background: #0c0916 !important; color: var(--ink) !important; border-color: var(--line) !important; }
.proof-label, .footer-note, .footer-small { color: #aaa2bd !important; }
.proof-items span:before { color: var(--olive); }
section { color: var(--ink); }
.services, .about, .faq { background: rgba(16, 13, 28, .82) !important; }
.portfolio, .process { background: rgba(19, 15, 33, .88) !important; }
.service-list, .service, .facts, .fact, .process-list, .step, .faq-list, details,
.hero-meta, footer { border-color: var(--line) !important; }
.service h3, .step h3, .fact strong, summary { color: var(--ink); }
.manifesto {
  color: var(--ink) !important;
  background: radial-gradient(ellipse at 74% 20%, #37216a 0, #17102c 44%, #0d0a18 100%) !important;
  border-block: 1px solid rgba(161, 131, 255, .2);
}
.manifesto .eyebrow, .manifesto-copy p { color: #f4f0ff !important; }
.manifesto-copy .small { color: #b9b0ca !important; }
.creative { background: #100d1c !important; border-color: rgba(189, 165, 246, .19) !important; box-shadow: 0 10px 32px rgba(0, 0, 0, .2) !important; }
.creative:hover { border-color: rgba(196, 255, 77, .42) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, .36), 0 0 28px rgba(117, 65, 220, .13) !important; }
.creative-body { color: var(--ink); }
.creative h3 { color: var(--ink); }
.creative-body p, .creative-badge { color: #aaa2bd !important; }
.creative-badge { border-color: var(--line) !important; }
.creative-body .cta-label { color: #d3cbe2; border-color: var(--line); }
.creative-art { box-shadow: inset 0 0 60px rgba(0, 0, 0, .18); }
.creative-art .art-copy { text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.portfolio-note { color: #aaa2bd; }
.portfolio-note:before { color: var(--olive); border-color: var(--olive); }
.about-lead { color: #eee9f8; }
.about-boundary {
  position: relative;
  margin-top: 32px;
  padding: 21px 24px 22px;
  overflow: hidden;
  border: 1px solid rgba(161, 131, 255, .24);
  border-left: 3px solid var(--olive);
  background: linear-gradient(112deg, rgba(36, 27, 58, .88), rgba(16, 13, 28, .72));
  box-shadow: 0 14px 36px rgba(0, 0, 0, .15);
}
.about-boundary:after {
  content: 'G14';
  position: absolute;
  right: 14px;
  bottom: -34px;
  color: rgba(196, 255, 77, .055);
  font: 700 96px/.9 var(--display);
  letter-spacing: -.1em;
  pointer-events: none;
}
.about-boundary > span {
  display: block;
  margin-bottom: 10px;
  color: var(--olive);
  font: 10px var(--mono);
  letter-spacing: .14em;
}
.about-boundary p {
  position: relative;
  z-index: 1;
  max-width: 690px;
  margin: 0;
  color: #d8d1e5;
  font: 13px/1.85 var(--sans);
}
.about-boundary p strong { color: #fff; font-weight: 700; }
.step-no { color: var(--olive) !important; }
summary:after { color: var(--olive) !important; }
details p { color: #b0a9c0; }
.blog-teaser { background: #0c0916; }
.blog-teaser-card, .contact-box {
  color: var(--ink) !important;
  background: linear-gradient(145deg, rgba(29, 22, 48, .95), rgba(14, 11, 25, .96)) !important;
  border: 1px solid rgba(189, 165, 246, .19) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .2);
}
.blog-teaser-card > span:first-child, .blog-teaser-more, .contact-action p { color: var(--olive) !important; }
.blog-teaser-card h3 { color: var(--ink); }
.contact-box { border-radius: 4px; }
.contact-action a { color: var(--ink); border-color: rgba(226, 218, 243, .42); }
.floating-contact {
  color: #111408 !important;
  background: var(--olive) !important;
  border-color: rgba(196, 255, 77, .5) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .4), 0 0 28px rgba(196, 255, 77, .12) !important;
}
.floating-contact:hover { color: #111408 !important; background: #d4ff81 !important; }
.floating-contact-icon { color: #343d1c !important; }
.brand { position: relative; isolation: isolate; }
.brand-logo {
  filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(196, 255, 77, .22));
  transform-origin: 50% 50%;
  animation: g14-logo-rift 5.8s linear infinite;
  will-change: transform, filter;
}
.topbar .brand::before, .topbar .brand::after {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 48px; height: 48px;
  border-radius: 50%; pointer-events: none; opacity: 0; transform: translate(-50%,-50%) scale(.08);
  animation: g14-supernova-wave 5.8s linear infinite;
}
.topbar .brand::before { background: radial-gradient(circle, #fff 0 3%, rgba(196,255,77,.95) 12%, rgba(196,255,77,.3) 32%, rgba(157,102,255,.12) 55%, transparent 72%); filter: blur(2px); }
.topbar .brand::after { border: 2px solid rgba(196,255,77,.9); box-shadow: 0 0 18px rgba(196,255,77,.8), inset 0 0 12px rgba(157,102,255,.5); animation-delay: .04s; }
.topbar .brand:hover .brand-logo { animation: g14-logo-hover .72s steps(2, end) both; }
@keyframes g14-logo-rift {
  0%, 82%, 100% { transform: translate(0,0) scale(1); filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(196,255,77,.22)); }
  83% { transform: translate(-2px,0) skewX(-8deg) scale(1.08); filter: brightness(0) invert(1) drop-shadow(-5px 0 0 rgba(169,105,255,.9)) drop-shadow(5px 0 0 rgba(196,255,77,.9)); }
  84% { transform: translate(0,-3px) scale(1.38); filter: brightness(0) invert(1) drop-shadow(0 0 12px #fff) drop-shadow(0 0 35px rgba(196,255,77,1)) drop-shadow(0 0 58px rgba(157,102,255,.95)); }
  85% { transform: translate(3px,1px) skewX(8deg) scale(1.13); filter: brightness(0) invert(1) drop-shadow(0 0 28px rgba(196,255,77,1)) drop-shadow(0 0 45px rgba(157,102,255,.9)); }
  86% { transform: translate(0,0) scale(1); filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(196,255,77,.22)); }
}
@keyframes g14-supernova-wave { 0%, 82.8%, 86%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(.08); } 83.1% { opacity: .95; transform: translate(-50%,-50%) scale(.55); } 84.5% { opacity: .6; transform: translate(-50%,-50%) scale(2.8); } 86% { opacity: 0; transform: translate(-50%,-50%) scale(4.6); } }
@keyframes g14-logo-hover { 0% { transform: scale(1); filter: brightness(0) invert(1); } 35% { transform: translateX(-3px) skewX(-10deg) scale(1.12); filter: brightness(0) invert(1) drop-shadow(5px 0 0 #a969ff) drop-shadow(-5px 0 0 #c4ff4d) drop-shadow(0 0 22px #fff); } 70% { transform: translateX(3px) skewX(8deg) scale(1.08); filter: brightness(0) invert(1) drop-shadow(0 0 24px #c4ff4d); } 100% { transform: scale(1); filter: brightness(0) invert(1) drop-shadow(0 0 7px #c4ff4d); } }
.footer-credit { color: #aaa2bd !important; }

/* Portfolio feed mockups retain their existing images and copy, with a darker frame. */
.post-head, .post-copy, .post-ad-info, .post-engagement, .post-actions { background: #100d1c !important; color: #eee9f8 !important; }
.post-head, .post-ad-info, .post-engagement, .post-actions { border-color: var(--line) !important; }
.post-identity strong, .post-ad-row h3 { color: #f4f0ff !important; }
.post-sponsored, .post-engagement > span:not(.reaction-icons):not(.engagement-spacer) { color: #aaa2bd !important; }
.post-ad-cta { color: #111408 !important; background: var(--olive) !important; }
.copywork { color: var(--ink) !important; background: #0c0916 !important; }
.copywork-head > p, .copy-shelf-head p, .copy-card p, .copy-points li { color: #b0a9c0 !important; }
.copy-shelf + .copy-shelf { border-color: var(--line) !important; }
.copywork-nav a { color: #d4cde4 !important; border-color: var(--line) !important; }
.copywork-nav a:hover { color: #111408 !important; background: var(--olive) !important; }
.copy-card { color: var(--ink) !important; background: #100d1c !important; border-color: rgba(189, 165, 246, .19) !important; box-shadow: 0 12px 35px rgba(0,0,0,.2) !important; }
.copy-card h4, .copy-article-body h5, .copy-card summary { color: var(--ink) !important; }
.copy-kicker, .copy-index, .copy-article-meta, .copy-disclaimer { color: #aaa2bd !important; }
.copy-points, .copy-card details { border-color: var(--line) !important; }
.copy-points li:before, .copy-article-meta span + span:before, .copy-card summary:after { color: var(--olive) !important; }
.copy-product-cta { color: #111408 !important; background: var(--olive) !important; }
.copy-product-photo { background: #171225 !important; }
.intro-loader { background: #080611 !important; }
.intro-loader-inner { position: relative; }
.intro-loader-inner::before, .intro-loader-inner::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 35px;
  width: 76px;
  height: 76px;
  border: 2px solid rgba(196,255,77,.9);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 3%, rgba(196,255,77,.55) 15%, rgba(157,102,255,.16) 50%, transparent 72%);
  box-shadow: 0 0 30px rgba(196,255,77,.55), inset 0 0 18px rgba(157,102,255,.42);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.08);
  animation: g14-loader-supernova 2.8s ease-out infinite;
}
.intro-loader-inner::after { width: 76px; height: 76px; border-color: rgba(177,139,255,.95); animation-delay: .1s; }
.intro-loader-inner { isolation: isolate; }
.intro-loader-inner::before { z-index: -1; }
.intro-loader-inner::after { z-index: -1; }
.intro-loader-inner p, .intro-progress { position: relative; z-index: 1; }
.intro-loader-logo {
  position: relative;
  z-index: 1;
  filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(196, 255, 77, .45));
  animation: g14-loader-rift 2.8s steps(1, end) infinite;
  will-change: transform, filter;
}
@keyframes g14-loader-rift { 0%, 62%, 100% { transform: scale(1); filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(196,255,77,.45)); } 63% { transform: translateX(-5px) skewX(-12deg) scale(1.1); filter: brightness(0) invert(1) drop-shadow(-8px 0 0 #a969ff) drop-shadow(8px 0 0 #c4ff4d); } 64% { transform: translateY(-4px) scale(1.42); filter: brightness(0) invert(1) drop-shadow(0 0 18px #fff) drop-shadow(0 0 38px #c4ff4d) drop-shadow(0 0 58px #a969ff); } 65% { transform: translateX(3px) scale(1.15); filter: brightness(0) invert(1) drop-shadow(0 0 28px #c4ff4d); } 66% { transform: scale(1); filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(196,255,77,.45)); } }
@keyframes g14-loader-supernova { 0%, 61.8%, 66%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(.08); } 62.5% { opacity: .95; transform: translate(-50%,-50%) scale(.6); } 64% { opacity: .7; transform: translate(-50%,-50%) scale(2.8); } 66% { opacity: 0; transform: translate(-50%,-50%) scale(5.6); } }
.intro-loader p { color: var(--olive) !important; }
.intro-progress { background: var(--line) !important; }
.intro-progress span { background: var(--olive) !important; }

/* Blog listing and article pages */
.hero { border-color: var(--line); }
.crumbs, .crumbs a { color: #aaa2bd !important; }
.crumbs span { color: var(--olive) !important; }
.post-card {
  color: var(--ink) !important;
  background: linear-gradient(145deg, rgba(25, 19, 42, .98), rgba(14, 11, 25, .98)) !important;
  border-color: rgba(189, 165, 246, .19) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .2);
}
.post-card:hover { border-color: rgba(196, 255, 77, .4) !important; box-shadow: 0 18px 42px rgba(0, 0, 0, .38), 0 0 25px rgba(117, 65, 220, .14); }
.post-category, .post-meta { color: var(--olive) !important; }
.post-card h2, .article-body h3 { color: var(--ink); }
.post-card p, .article-body p, .article-body li { color: #c1b9d0 !important; }
.post-meta, .article-meta { border-color: var(--line) !important; }
.article { color: var(--ink); }
.article-deck { color: #c1b9d0 !important; }
.article-note { color: #eee9f8; background: #171225 !important; border-left-color: var(--olive) !important; }
.article-cta { color: var(--ink) !important; background: linear-gradient(140deg, #291a4b, #100d1c) !important; border: 1px solid rgba(189, 165, 246, .2); }
.article-cta p { color: #c1b9d0 !important; }
.article-cta a { color: #111408 !important; background: var(--olive) !important; }
.site-footer .brand-logo { filter: brightness(0) invert(1); }

@media (prefers-reduced-motion: reduce) {
  .brand-logo, .topbar .brand::before, .topbar .brand::after, .intro-loader-logo, .intro-loader-inner::before, .intro-loader-inner::after { animation: none !important; }
}

/* Keep the Facebook-style portfolio mockups in their original light feed style. */
.portfolio .feed-post {
  color: #1c1e21 !important;
  background: #fff !important;
  border: 1px solid #dfe2e7 !important;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08) !important;
}
.portfolio .feed-post:hover { box-shadow: 0 5px 18px rgba(0, 0, 0, .1) !important; }
.portfolio .feed-post .post-head,
.portfolio .feed-post .post-copy,
.portfolio .feed-post .post-engagement,
.portfolio .feed-post .post-actions { color: #65676b !important; background: #fff !important; }
.portfolio .feed-post .post-identity strong,
.portfolio .feed-post .post-ad-row h3,
.portfolio .feed-post .post-copy p { color: #1c1e21 !important; }
.portfolio .feed-post .post-sponsored,
.portfolio .feed-post .post-engagement > span:not(.reaction-icons):not(.engagement-spacer) { color: #65676b !important; }
.portfolio .feed-post .post-ad-info { color: #1c1e21 !important; background: #f0f2f5 !important; border-color: #dadde1 !important; }
.portfolio .feed-post .post-ad-type { color: #65676b !important; }
.portfolio .feed-post .post-ad-cta { color: #1c1e21 !important; background: #e4e6eb !important; }
.portfolio .feed-post .post-engagement,
.portfolio .feed-post .post-actions { border-color: #e4e6eb !important; }
.portfolio .feed-post .creative-art { box-shadow: none !important; }
.portfolio .feed-post .creative-art:before,
.portfolio .feed-post .creative-art:after { content: none !important; display: none !important; }

@media (max-width: 700px) {
  .nav-links { background: #100d1c !important; border-color: var(--line) !important; }
  .hero-orbit { opacity: .72; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}