/* =====================================================
   Gigglezen — LIGHT THEME overrides
   Cream-white surface · charcoal text · same red/gold accents
   ===================================================== */

:root {
  --bg:        #F6F2EA;
  --bg-2:      #FFFFFF;
  --bg-3:      #ECE5D4;
  --ink:       #0A0606;
  --ink-dim:   rgba(10,6,6,.72);
  --ink-mute:  rgba(10,6,6,.5);
  --ink-faint: rgba(10,6,6,.32);
  --line:      rgba(10,6,6,.10);
  --line-2:    rgba(10,6,6,.06);

  /* accents unchanged */
  --red:       #C2102B;
  --red-2:     #8E0E1F;
  --red-3:     #E11D2A;
  --gold:      #B8932D;
  --gold-2:    #D4AF37;
  --gold-3:    #8E6F1F;
  --platinum:  #0A0606;       /* on white, "highlight" is dark */
  --silver:    #4A4A4F;
  --pearl:     #8E6F1F;

  --glass-bg:   rgba(255,255,255,.55);
  --glass-bg-2: rgba(255,255,255,.78);
  --glass-bd:   rgba(10,6,6,.08);
  --glass-bd-2: rgba(184,147,45,.32);

  --grad-chroma: linear-gradient(120deg, #C2102B 0%, #B8932D 50%, #8E6F1F 100%);
  --grad-metal:  linear-gradient(180deg, #FFFFFF 0%, #F4EBC5 30%, #B8932D 60%, #8E6F1F 100%);
}

html, body { background: var(--bg); color: var(--ink); }

/* ============================ BACKGROUND ============================ */
.bg-field {
  background:
    radial-gradient(1400px 900px at 80% -10%, rgba(184,147,45,.18), transparent 60%),
    radial-gradient(1100px 700px at -10% 30%, rgba(194,16,43,.10), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(184,147,45,.10), transparent 60%),
    linear-gradient(180deg, #FBF8F1 0%, #F6F2EA 40%, #F0E9D7 100%);
}
.orb { mix-blend-mode: multiply; opacity: .22; filter: blur(120px); }
.orb-1 { background: radial-gradient(circle, #C2102B, transparent 65%); }
.orb-2 { background: radial-gradient(circle, #B8932D, transparent 65%); }
.orb-3 { background: radial-gradient(circle, #8E6F1F, transparent 65%); }
.orb-4 { background: radial-gradient(circle, #C2102B, transparent 65%); }

.grain { opacity: .06; mix-blend-mode: multiply; }
.grid-overlay {
  background-image:
    linear-gradient(rgba(10,6,6,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,6,6,.03) 1px, transparent 1px);
  opacity: .6;
}
.vignette { background: radial-gradient(ellipse at center, transparent 50%, rgba(184,147,45,.06) 100%); }

.spotlight {
  background: radial-gradient(700px 500px at var(--sx, 50%) var(--sy, 35%),
    rgba(184,147,45,.14) 0%, rgba(194,16,43,.05) 40%, transparent 70%);
  mix-blend-mode: multiply;
}

/* ============================ GLASS ============================ */
.glass {
  background: var(--glass-bg);
  border-color: var(--glass-bd);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(184,147,45,.08),
    0 24px 60px -22px rgba(10,6,6,.18);
}
.glass-chip { background: var(--glass-bg); border-color: var(--glass-bd); color: var(--ink-dim); }

/* ============================ NAV ============================ */
.brand-logo { filter: drop-shadow(0 1px 2px rgba(184,147,45,.18)); }
.cta-pill {
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(194,16,43,.4), inset 0 1px 0 rgba(255,255,255,.3);
}
.menu-btn { color: var(--ink); }

/* ============================ BUTTONS ============================ */
.btn-primary { color: #fff; box-shadow: 0 14px 40px -10px rgba(194,16,43,.4), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-ghost { color: var(--ink); border-color: var(--glass-bd-2); background: var(--glass-bg); }
.btn-ghost:hover { background: var(--glass-bg-2); border-color: var(--gold); }
.play { background: var(--red); box-shadow: 0 0 0 6px rgba(194,16,43,.12); }

/* ============================ SECTION HEADINGS ============================ */
.kicker {
  background: var(--glass-bg);
  border-color: var(--glass-bd);
  color: var(--ink-dim);
}
.kicker-dot { background: var(--red); box-shadow: 0 0 0 4px rgba(194,16,43,.15); }

/* ============================ HERO ============================ */
.hero-title { color: var(--ink); }
.line.lead { color: var(--ink-dim); }
.line.stroke em {
  background: linear-gradient(180deg, #0A0606 0%, #0A0606 55%, rgba(10,6,6,.32) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  -webkit-text-stroke: 1px rgba(10,6,6,.08);
}
.kch { color: inherit; }
.line.glow .serif { color: var(--gold-3); }
.caret { color: var(--red); }

.hero-sub { color: var(--ink-dim); }

.depth-1 .frame { border: 1px dashed rgba(194,16,43,.18); }
.depth-2 .frame { border: 1px solid rgba(184,147,45,.14); }
.depth-3 .frame { border: 1px dashed rgba(184,147,45,.10); }
.ring-glow { background: radial-gradient(circle, rgba(184,147,45,.16) 0%, transparent 60%); }

.signal { background: var(--gold); box-shadow: 0 0 0 4px rgba(184,147,45,.18); }

/* stat cards */
.stat-card .num {
  background: linear-gradient(180deg, #0A0606, rgba(10,6,6,.55));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stat-card .num i { color: var(--red); -webkit-text-fill-color: var(--red); text-shadow: 0 0 10px rgba(194,16,43,.18); }
.stat-card .lbl { color: var(--ink-mute); }
.trend { color: var(--gold); }
.dots i { background: rgba(10,6,6,.18); }
.dots i:nth-child(-n+4) { background: var(--red); box-shadow: 0 0 8px rgba(194,16,43,.3); }
.globe { border-color: var(--red); background: radial-gradient(circle at 35% 30%, rgba(194,16,43,.18), transparent 60%); }
.globe::before, .globe::after { border-color: var(--red); }
.bar-mini { background: rgba(10,6,6,.06); }
.bar-mini span { background: linear-gradient(90deg, var(--red), var(--gold)); box-shadow: 0 0 10px rgba(184,147,45,.25); }
.cue-line { background: linear-gradient(180deg, transparent, var(--red)); }
.cue-line::after { background: var(--red); box-shadow: 0 0 8px var(--red); }
.scroll-cue { color: var(--ink-mute); }

/* ============================ MARQUEE ============================ */
.marquee {
  background: linear-gradient(180deg, rgba(10,6,6,.02), rgba(10,6,6,.01));
  border-block-color: var(--line);
}
.marquee-track span { color: var(--ink); }
.marquee-track .bullet { color: var(--gold); text-shadow: 0 0 6px rgba(184,147,45,.3); }
.trust-label { color: var(--ink-mute); }
.trust-chips li { color: var(--ink); }

/* ============================ ABOUT ============================ */
.about-copy p { color: var(--ink-dim); }
.mv-tag { color: var(--gold-3); }
.mv p { color: var(--ink-dim); }
.lead-h { color: var(--ink-mute); }
.avatar { color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 18px -6px rgba(194,16,43,.3); }
.lname { color: var(--ink); }
.lrole { color: var(--ink-mute); }
.values b { color: var(--ink); }
.values span { color: var(--ink-dim); }
.v-ic { color: var(--gold); }

/* ============================ SERVICES ============================ */
.service {
  background: linear-gradient(135deg, rgba(194,16,43,.30), rgba(184,147,45,.25), rgba(184,147,45,.20), rgba(10,6,6,.05));
}
.svc-inner { background: rgba(255,255,255,.86); }
.svc-ic {
  background: linear-gradient(135deg, rgba(184,147,45,.18), rgba(255,255,255,.6));
  border-color: rgba(184,147,45,.25);
}
.ic-code { color: var(--red); }
.ic-mkt  { color: var(--gold-3); }
.ic-bpo  { color: var(--gold-3); }
.ic-cloud{ color: var(--red); }
.ic-sec  { color: var(--gold-3); }
.ic-auto { color: var(--red); }
.service h3 { color: var(--ink); }
.service p { color: var(--ink-dim); }
.svc-tags span {
  background: rgba(184,147,45,.10);
  border-color: rgba(184,147,45,.22);
  color: var(--ink-dim);
}
.svc-arrow { color: var(--ink-faint); }
.service:hover .svc-arrow { color: var(--red); }

/* ============================ SHOWCASE ============================ */
.show-card { background: rgba(255,255,255,.78); border-color: var(--glass-bd); }
.sc-tag { background: rgba(184,147,45,.10); border-color: rgba(184,147,45,.22); color: var(--ink-dim); }
.sc-status { color: var(--gold-3); }
.sc-kicker { color: var(--gold-3); }
.sc-desc { color: var(--ink-dim); }
.show-card h3 { color: var(--ink); }

.art-skyline .b { background: linear-gradient(180deg, rgba(184,147,45,.5), rgba(184,147,45,.08)); border-color: rgba(184,147,45,.32); }
.art-skyline .b::before { background-image: radial-gradient(circle, rgba(194,16,43,.55) 1.5px, transparent 2px); opacity: .8; }
.art-skyline .moon { background: radial-gradient(circle at 30% 30%, #FFFFFF, #B8932D 70%); box-shadow: 0 0 40px rgba(184,147,45,.4); }

.art-orbit .planet { background: radial-gradient(circle at 30% 30%, #FBF1C2, #C2102B 70%); box-shadow: 0 0 24px rgba(194,16,43,.4); }
.art-orbit .r1 { border-color: rgba(184,147,45,.45); }
.art-orbit .r2 { border-color: rgba(194,16,43,.4); }
.art-orbit .r3 { border-color: rgba(184,147,45,.3); }

.art-cart .grid-tile { background: rgba(194,16,43,.18); border-color: rgba(194,16,43,.3); }
.art-cart .grid-tile.alt { background: rgba(184,147,45,.20); border-color: rgba(184,147,45,.32); }
.art-bars .bar { background: linear-gradient(180deg, var(--gold), rgba(184,147,45,.1)); box-shadow: 0 0 10px -2px rgba(184,147,45,.4); }
.art-dots span { background: rgba(10,6,6,.06); border-color: var(--line); }
.art-dots .on { background: linear-gradient(135deg, var(--red), var(--gold)); border-color: transparent; box-shadow: 0 0 18px rgba(194,16,43,.4); }

/* ============================ PORTFOLIO ============================ */
.port-tile { background-color: #FFFFFF; border-color: var(--glass-bd); }
.port-art {
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,.5) 0%, transparent 35%),
    radial-gradient(circle at 75% 70%, rgba(255,255,255,.3) 0%, transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.2), rgba(10,6,6,.18));
}
.port-art::before { mix-blend-mode: multiply; opacity: .85; }
.port-meta::before { background: linear-gradient(180deg, transparent, rgba(0,0,0,.55) 60%); }
.port-cat { color: rgba(255,255,255,.86); }
.port-tile h3 { color: #fff; }
.port-arrow { color: #fff; }

/* ============================ PROCESS ============================ */
.process-rail::before { background: linear-gradient(90deg, transparent, var(--red), var(--gold), transparent); opacity: .55; }
.phase-num { background: linear-gradient(180deg, var(--red), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.phase h3 { color: var(--ink); }
.phase p { color: var(--ink-dim); }

/* ============================ STACK ============================ */
.stack-grid li { color: var(--ink); }
.stack-grid li:hover { color: var(--red); border-color: rgba(194,16,43,.32); }

/* ============================ PRICING ============================ */
.pc-featured { background: linear-gradient(180deg, rgba(194,16,43,.06), rgba(184,147,45,.04)); }
.pc-border-glow { background: linear-gradient(135deg, var(--red), var(--gold), var(--red)); }
.pc-flag { background: linear-gradient(135deg, var(--red), var(--gold)); color: #fff; box-shadow: 0 0 18px rgba(194,16,43,.3); }
.pc-tag { color: var(--gold-3); }
.pc-desc { color: var(--ink-dim); }
.pc-from { color: var(--ink-mute); }
.pc-amt {
  background: linear-gradient(180deg, #0A0606, rgba(10,6,6,.55));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pc-cycle { color: var(--ink-mute); }
.pc-list li { color: var(--ink-dim); }
.pc-list li::before {
  background: radial-gradient(circle, var(--gold) 0, var(--gold) 30%, transparent 32%);
  box-shadow: 0 0 8px rgba(184,147,45,.3);
}
.pc-list li::after { border-color: #fff; }

/* ============================ TESTIMONIALS ============================ */
.t-quote { color: rgba(184,147,45,.28); }
.t-card blockquote { color: var(--ink); }
.t-av { color: #fff; }
.t-card figcaption b { color: var(--ink); }
.t-card figcaption span { color: var(--ink-mute); }
.t-btn { background: var(--glass-bg); border-color: var(--glass-bd-2); color: var(--ink); }
.t-btn:hover { border-color: var(--red); box-shadow: 0 0 18px rgba(194,16,43,.18); }
.t-dots i { background: rgba(10,6,6,.18); }
.t-dots i.active { background: linear-gradient(90deg, var(--red), var(--gold)); box-shadow: 0 0 10px rgba(184,147,45,.32); }

/* ============================ FAQ ============================ */
.faq:hover { border-color: var(--glass-bd-2); }
.faq summary { color: var(--ink); }
.faq-ic { border-color: var(--glass-bd-2); }
.faq[open] .faq-ic { border-color: var(--gold); box-shadow: 0 0 10px rgba(184,147,45,.3); }
.faq-ic::before, .faq-ic::after { background: var(--gold-3); }
.faq p { color: var(--ink-dim); }
.faq p a { color: var(--red); border-bottom-color: rgba(194,16,43,.3); }

/* ============================ CONTACT ============================ */
.contact-card::before {
  background:
    radial-gradient(800px 400px at 0% 0%, rgba(194,16,43,.10), transparent 60%),
    radial-gradient(800px 400px at 100% 100%, rgba(184,147,45,.14), transparent 60%);
}
.contact-title { color: var(--ink); }
.contact-sub { color: var(--ink-dim); }
.ci-label { color: var(--ink-mute); }
.contact-info p { color: var(--ink); }
.contact-info a { color: var(--red); }
.field > span { color: var(--ink-mute); }
.field input, .field select, .field textarea {
  background: rgba(255,255,255,.7);
  border-color: var(--glass-bd-2);
  color: var(--ink);
}
.field select option { background: #fff; color: var(--ink); }
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%230A0606' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--red);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(194,16,43,.10);
}

/* ============================ FOOTER ============================ */
.footer { border-top-color: var(--line); background: linear-gradient(180deg, transparent, rgba(184,147,45,.04)); }
.f-brand p { color: var(--ink-dim); }
.social a { border-color: var(--glass-bd-2); background: var(--glass-bg); color: var(--ink-dim); }
.social a:hover { color: var(--red); border-color: var(--red); box-shadow: 0 0 12px rgba(194,16,43,.18); }
.f-col h4 { color: var(--ink-mute); }
.f-col a { color: var(--ink-dim); }
.f-col a:hover { color: var(--red); }
.f-news p { color: var(--ink-dim); }
.news input { color: var(--ink); }
.news input::placeholder { color: var(--ink-mute); }
.news button { color: #fff; box-shadow: 0 0 18px rgba(194,16,43,.18); }
.footer-bottom { border-top-color: var(--line-2); color: var(--ink-mute); }
.heart { color: var(--red); }

/* ============================ COOKIE ============================ */
.cookie p { color: var(--ink-dim); }

/* ============================ LOADER ============================ */
.loader { background: #FBF8F1; }
.loader-bar { background: rgba(10,6,6,.08); }
.loader-bar span { background: linear-gradient(90deg, var(--red), var(--gold), var(--red)); }
.loader-text { color: var(--ink-mute); }
.loader-logo { filter: drop-shadow(0 0 14px rgba(184,147,45,.25)); }

/* ============================ CURSOR ============================ */
.cursor { mix-blend-mode: difference; }
.cursor-dot { background: #fff; }
.cursor-ring { border-color: rgba(255,255,255,.85); }
.cursor.hover .cursor-ring { border-color: var(--gold-2); background: rgba(212,175,55,.10); }

/* ============================ SCROLL PROGRESS ============================ */
.scroll-progress { background: linear-gradient(90deg, var(--red), var(--gold), var(--red)); box-shadow: 0 0 8px rgba(194,16,43,.3); }

/* ============================ MOTION LAYER overrides ============================ */
.h-progress { background: rgba(10,6,6,.08); }
.h-progress span { background: linear-gradient(90deg, var(--red), var(--gold), var(--red)); box-shadow: 0 0 10px rgba(184,147,45,.3); }

/* "Magic" serif gets the brand chroma fill */
.line.glow .serif {
  background: var(--grad-chroma);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* SOFTWARE letters keep dark stroke color */
.chroma .kword { /* inherits parent gradient; no override needed */ }

/* hide letterbox bars more gracefully on light */
.letterbox .lb { background: rgba(10,6,6,.92); }