/* =====================================================
   PLUTINOS TECHNOLOGIES — SITE STYLES
   Base, navigation, and interaction states for index.html
   Implemented from index.dc.html + Nav.dc.html + Footer.dc.html
   ===================================================== */

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { background: #0f1319; }
body { font-family: 'DM Sans', sans-serif; color: #ffffff; overflow-x: hidden; }
/* Content sits above the fixed background canvas */
body > section, body > footer, body > div:not(#pt-mob) { position: relative; z-index: 1; }

/* ── Navigation ── */
#pt-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(15,19,25,0.85); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,0.06); transition: background 300ms, box-shadow 300ms; }
#pt-nav.scrolled { background: rgba(15,19,25,0.98) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.5); }
#pt-nav.menu-open { background: rgba(15,19,25,1) !important; }
.pt-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; height: 72px; display: flex; align-items: center; justify-content: space-between; }
.pt-nl { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.75); text-decoration: none; padding: 7px 14px; border-radius: 6px; font-family: 'DM Sans', sans-serif; transition: color 150ms; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; background: none; border: none; line-height: 1; }
.pt-nl:hover { color: #f0b429; }
.pt-nl.active { font-weight: 600; color: #ffffff; }

/* Services dropdown — ::after bridges the gap so hover is seamless */
.pt-sw { position: relative; display: inline-block; }
.pt-sw::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.pt-sdd { display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 2000; min-width: 248px; }
.pt-sw:hover .pt-sdd, .pt-sdd:hover, .pt-sdd.open { display: block; }
.pt-sdi { background: #161c27; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 16px 48px rgba(0,0,0,0.6); padding: 6px; }
.pt-sdi a { display: block; padding: 11px 16px; border-radius: 8px; text-decoration: none; font-size: 13.5px; font-weight: 500; color: #a0aec0; font-family: 'DM Sans', sans-serif; transition: background 120ms, color 120ms; }
.pt-sdi a:hover { background: rgba(240,180,41,0.08); color: #f0b429; }

.pt-cta-btn { display: inline-flex; align-items: center; padding: 10px 22px; background: #f0b429; color: #1a202c !important; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; font-family: 'DM Sans', sans-serif; flex-shrink: 0; white-space: nowrap; transition: background 200ms; }
.pt-cta-btn:hover { background: #d4960a; }

/* Hamburger + mobile menu */
.pt-ham { display: none !important; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: transparent; border: none; cursor: pointer; color: #fff; flex-shrink: 0; padding: 0; }
.pt-mob { display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: #0f1319; z-index: 999; overflow-y: auto; flex-direction: column; padding: 8px 24px 48px; border-top: 1px solid rgba(255,255,255,0.08); }
.pt-mob.open { display: flex; }
.pt-ml { display: block; padding: 16px 0; font-size: 18px; font-weight: 600; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.07); font-family: 'DM Sans', sans-serif; }
.pt-ml:hover { color: #f0b429; }
.pt-msl { display: block; padding: 10px 0; font-size: 16px; color: #a0aec0; text-decoration: none; font-family: 'DM Sans', sans-serif; }
.pt-msl:hover { color: #f0b429; }
@media (max-width: 900px) { .pt-links, .pt-cta-btn { display: none !important; } .pt-ham { display: inline-flex !important; } }
@media (max-width: 767px) { .pt-inner { padding: 0 20px !important; } }

/* ── Buttons (hero + CTA banner) ── */
.btn-gold:hover { background: #d4960a; box-shadow: 0 6px 20px rgba(240,180,41,0.45); }
.btn-gold-lg:hover { background: #d4960a; box-shadow: 0 6px 24px rgba(240,180,41,0.4); }
.btn-ghost:hover { border-color: rgba(255,255,255,0.3); color: #ffffff; background: rgba(255,255,255,0.1); }

/* ── Service cards ── */
.card-feature:hover { box-shadow: 0 8px 40px rgba(0,0,0,0.4); transform: translateY(-3px); border-top-color: #f0b429; }
.card-glow:hover { box-shadow: 0 8px 40px rgba(0,0,0,0.4); transform: translateY(-3px); border-color: rgba(240,180,41,0.25); }
.link-more { transition: gap 150ms ease; }
.link-more:hover { gap: 10px; }

/* ── Footer ── */
.f-soc { transition: border-color 150ms, color 150ms; }
.f-soc:hover { border-color: #f0b429; color: #f0b429; }
.f-link { transition: color 150ms; }
.f-link:hover { color: #f0b429; }
.f-bot { transition: color 150ms; }
.f-bot:hover { color: #718096; }

/* ── Inner-page hover states ── */
.hov-slate:hover { background: #2d3748; }
.hov-gold-bg:hover { background: #d4960a; }
.hov-gold-text:hover { color: #f0b429; }
.hov-gold-text-dk:hover { color: #d4960a; }
.hov-lift-card:hover { box-shadow: 0 8px 32px rgba(26,32,44,0.14); transform: translateY(-3px); }
.hov-lift-sm:hover { box-shadow: 0 8px 28px rgba(26,32,44,0.1); transform: translateY(-2px); }
.btn-gold-sm:hover { background: #d4960a; box-shadow: 0 6px 20px rgba(240,180,41,0.4); }

/* ── Portfolio filter buttons ── */
.pf-btn { padding: 9px 20px; border-radius: 9999px; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: all 200ms ease; font-family: 'DM Sans', sans-serif; background: rgba(255,255,255,0.06); color: #a0aec0; border: 1.5px solid rgba(255,255,255,0.1); }
.pf-btn.active { background: #f0b429; color: #1a202c; border-color: #f0b429; }

/* ── FAQ accordion ── */
.faq-chevron { transition: transform 200ms ease; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-a { display: none; }
.faq-item.open .faq-a { display: block; }

/* ── Contact form fields ── */
.fld { display: flex; align-items: center; border-radius: 8px; border: 1.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.06); transition: border-color 150ms ease, box-shadow 150ms ease; overflow: hidden; }
.fld:focus-within { border-color: #f0b429; box-shadow: 0 0 0 3px rgba(240,180,41,0.18); }
.fld.err { border-color: #dc2626; }
.fld.err:focus-within { box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
.ferr { font-size: 12px; color: #dc2626; display: none; }

@keyframes checkIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }