/* ═══════════════════════════════════════════════════════════════
   FRWRD MARKETING — CUSTOM CSS
   ═══════════════════════════════════════════════════════════════ */

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background-color: #030303;
    color: #f4f4f5;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #030303; }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 2px; }

/* ─── Noise Overlay ─── */
.noise-overlay {
    position: fixed; inset: 0; z-index: 999;
    pointer-events: none; opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat; background-size: 256px 256px;
}

/* ─── Typography ─── */
.font-heading { font-family: 'Plus Jakarta Sans', sans-serif; }
.font-mono   { font-family: 'Space Mono', monospace; }
.tracking-ultra { letter-spacing: 0.2em; }
.section-num { font-family: 'Space Mono', monospace; color: #3f3f46; font-size: 0.75rem; }

/* ─── Hero Title ─── */
.hero-title { font-size: clamp(3.5rem, 10vw, 9rem); line-height: 0.9; letter-spacing: -0.03em; }

/* ─── Marquee ─── */
.scrolling-text-container { overflow: hidden; white-space: nowrap; }
.scrolling-text { display: inline-block; animation: marquee 30s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ─── Fade In Up ─── */
.fade-in-up { opacity: 0; transform: translateY(24px); animation: fadeInUp 0.8s ease forwards; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* ─── Mobile Menu ─── */
#mobile-menu {
    position: fixed; inset: 0; z-index: 998;
    background: #030303;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2rem;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s, transform 0.4s;
    transform: translateY(-10px);
}
#mobile-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
#mobile-menu a {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 2.25rem; font-weight: 700;
    color: #fff; text-transform: uppercase;
    letter-spacing: 0.08em; transition: color 0.3s;
}
#mobile-menu a:hover { color: #71717a; }

/* ─── Filter Tabs ─── */
.filter-tab {
    font-size: 0.625rem; text-transform: uppercase;
    letter-spacing: 0.2em; color: #71717a;
    background: none; border: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 0.5rem; transition: color 0.3s, border-color 0.3s;
}
.filter-tab:hover { color: #a1a1aa; }
.filter-tab.active { color: #fff; border-color: #fff; }

/* ─── Work Card ─── */
.work-card { border: 1px solid #27272a; transition: border-color 0.5s; }
.work-card:hover { border-color: rgba(255,255,255,0.3); }
.work-card .wc-img { overflow: hidden; }
.work-card .wc-img img { transition: transform 1s, filter 1s, opacity 1s; filter: grayscale(100%); opacity: 0.6; }
.work-card:hover .wc-img img { transform: scale(1.05); filter: grayscale(0%); opacity: 0.8; }

/* ─── Service Card ─── */
.service-card { transition: background-color 0.7s; }
.service-card:hover { background-color: rgba(39,39,42,0.2); }
.service-card .svc-icon { transition: opacity 0.5s; opacity: 0; }
.service-card:hover .svc-icon { opacity: 1; }
.service-card .svc-line { height: 1px; background: #3f3f46; transition: background 0.3s; }
.service-card:hover .svc-line { background: rgba(255,255,255,0.3); }

/* ─── Value/Industry Card ─── */
.value-card { border: 1px solid #27272a; transition: border-color 0.5s; }
.value-card:hover { border-color: rgba(255,255,255,0.3); }
.value-card .val-icon { transition: transform 0.5s; }
.value-card:hover .val-icon { transform: scale(1.1); }

/* ─── Featured Card ─── */
.featured-card { overflow: hidden; cursor: pointer; }
.featured-card .fc-img { overflow: hidden; }
.featured-card .fc-img img { transition: transform 1s, filter 1s, opacity 1s; filter: grayscale(100%); opacity: 0.6; }
.featured-card:hover .fc-img img { transform: scale(1.05); filter: grayscale(0%); opacity: 0.8; }

/* ─── Founder Photo ─── */
.founder-photo .fp-img { overflow: hidden; }
.founder-photo .fp-img img { transition: transform 1s, filter 1s, opacity 1s; filter: grayscale(100%); opacity: 0.6; }
.founder-photo:hover .fp-img img { transform: scale(1.05); filter: grayscale(0%); opacity: 0.8; }

/* ─── Dot Indicators ─── */
.dot-indicator {
    width: 0.5rem; height: 0.5rem; border-radius: 9999px;
    background: #3f3f46; border: none;
    transition: background 0.3s, width 0.3s;
}
.dot-indicator.active { background: #fff; width: 2rem; }

/* ─── Nav Link ─── */
.nav-link { position: relative; }
.nav-link::after {
    content: ''; position: absolute;
    bottom: -4px; left: 0;
    width: 0; height: 1px; background: #fff;
    transition: width 0.3s;
}
.nav-link:hover::after { width: 100%; }

/* ─── Buttons ─── */
.cta-btn { transition: background-color 0.3s; }
.cta-btn:hover { background-color: #e4e4e7; }
.cta-btn .btn-arrow { transition: transform 0.3s; }
.cta-btn:hover .btn-arrow { transform: translateX(4px); }
.cta-outline { border: 1px solid #fff; color: #fff; transition: background 0.3s, color 0.3s; }
.cta-outline:hover { background: #fff; color: #030303; }

/* ─── Link Arrow ─── */
.link-arrow { transition: color 0.3s; }
.link-arrow:hover { color: #a1a1aa; }
.link-arrow .la-icon { transition: transform 0.3s; }
.link-arrow:hover .la-icon { transform: translateX(4px); }

/* ─── Hero Links ─── */
.hero-link { border-bottom: 1px solid rgba(255,255,255,0.2); transition: border-color 0.3s; }
.hero-link:hover { border-color: #fff; }
.hero-link .hl-icon { transition: transform 0.3s; }
.hero-link:hover .hl-icon { transform: translate(4px, -4px); }

/* ─── Contact Form ─── */
.form-input {
    width: 100%; background: transparent;
    border: none; border-bottom: 1px solid #3f3f46;
    color: #fff; font-size: 1rem; font-weight: 300;
    padding: 1rem 0; outline: none;
    transition: border-color 0.3s;
}
.form-input::placeholder { color: #52525b; }
.form-input:focus { border-color: #fff; }
select.form-input {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right center;
    padding-right: 1.5rem;
}
select.form-input option { background: #1c1c1e; color: #fff; }
textarea.form-input { resize: none; height: 6rem; }
#form-status { font-size: 0.875rem; min-height: 1.5rem; }
#form-status.success { color: #4ade80; }
#form-status.error   { color: #f87171; }

/* ─── Feature Box ─── */
.feature-box { border: 1px solid #27272a; transition: border-color 0.3s; }
.feature-box:hover { border-color: #3f3f46; }
.pkg-card { border: 1px solid #27272a; transition: border-color 0.3s; }
.pkg-card:hover { border-color: #3f3f46; }

/* ─── Gallery Slide ─── */
.gallery-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s; }
.gallery-slide.active { opacity: 1; z-index: 1; }

/* ─── Testimonial Fade ─── */
.testimonial-grid { transition: opacity 0.3s; }