/* DÜSSELMEDIA – Custom Styles (Bootstrap 5.3) */
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --dm-bg:#0b0b0f;
  --dm-bg-2:#13131a;
  --dm-card:#17171f;
  --dm-line:rgba(255,255,255,.08);
  --dm-text:#e9e9ef;
  --dm-muted:#9a9aab;
  --dm-accent:#ff3d57;
  --dm-accent-2:#ff8a3d;
  --dm-grad:linear-gradient(120deg,var(--dm-accent),var(--dm-accent-2));
  --bs-body-font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bs-body-bg:var(--dm-bg);
  --bs-body-color:var(--dm-text);
  --bs-link-color-rgb:255,61,87;
  --bs-link-hover-color-rgb:255,138,61;
}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--dm-bg);color:var(--dm-text);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.display-font{font-family:"Space Grotesk",var(--bs-body-font-family);letter-spacing:-.02em}
.text-muted-dm{color:var(--dm-muted)!important}
.text-grad{background:var(--dm-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.section{padding:7rem 0}
.section-sm{padding:4rem 0}
.eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dm-accent)}
.eyebrow::before{content:"";display:inline-block;width:28px;height:2px;background:var(--dm-grad);vertical-align:middle;margin-right:.6rem}

/* Navbar */
.navbar-dm{background:rgba(11,11,15,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.navbar-dm.scrolled{background:rgba(11,11,15,.9);border-color:var(--dm-line)}
.navbar-dm .navbar-brand{font-family:"Space Grotesk";font-weight:700;letter-spacing:.02em;color:#fff}
.navbar-dm .navbar-brand span{color:var(--dm-accent)}
.navbar-dm .nav-link{color:var(--dm-muted);font-weight:500}
.navbar-dm .nav-link:hover,.navbar-dm .nav-link.active{color:#fff}
.navbar-toggler{border-color:var(--dm-line)}
.navbar-toggler-icon{filter:invert(1)}

/* Buttons */
.btn-dm{background:var(--dm-grad);color:#fff;border:0;border-radius:999px;padding:.8rem 1.6rem;font-weight:600;transition:transform .2s,box-shadow .2s}
.btn-dm:hover{color:#fff;transform:translateY(-2px);box-shadow:0 10px 30px -10px var(--dm-accent)}
.btn-ghost{border:1px solid var(--dm-line);color:#fff;border-radius:999px;padding:.8rem 1.6rem;font-weight:500}
.btn-ghost:hover{border-color:#fff;color:#fff}

/* Hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding-top:80px}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(600px 400px at 80% 20%,rgba(255,61,87,.25),transparent 70%),
  radial-gradient(500px 400px at 10% 90%,rgba(255,138,61,.15),transparent 70%);pointer-events:none}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--dm-line) 1px,transparent 1px),linear-gradient(90deg,var(--dm-line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);opacity:.5}
.hero h1{font-size:clamp(2.8rem,8vw,6.5rem);font-weight:700;line-height:.95}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--dm-muted);max-width:620px}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--dm-line);border-radius:999px;padding:.35rem .9rem;font-size:.85rem;color:var(--dm-muted)}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:#2bd67b;box-shadow:0 0 0 4px rgba(43,214,123,.2)}
.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);color:var(--dm-muted);font-size:1.5rem;animation:bob 2s infinite}
@keyframes bob{50%{transform:translate(-50%,8px)}}

/* Marquee */
.marquee{border-top:1px solid var(--dm-line);border-bottom:1px solid var(--dm-line);overflow:hidden;white-space:nowrap;padding:1.2rem 0;background:var(--dm-bg-2)}
.marquee-track{display:inline-flex;gap:3rem;animation:marquee 30s linear infinite}
.marquee-track span{font-family:"Space Grotesk";font-size:1.4rem;font-weight:500;color:var(--dm-muted)}
.marquee-track span i{color:var(--dm-accent);margin-right:3rem;font-size:1rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Cards */
.card-dm{background:var(--dm-card);border:1px solid var(--dm-line);border-radius:1.25rem;padding:2rem;height:100%;transition:transform .3s,border-color .3s;position:relative;overflow:hidden}
.card-dm:hover{transform:translateY(-6px);border-color:rgba(255,61,87,.4)}
.card-dm .icon{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;background:rgba(255,61,87,.1);color:var(--dm-accent);margin-bottom:1.5rem}
.card-dm h3{font-size:1.35rem;font-weight:700}
.card-dm p{color:var(--dm-muted);margin:0}
.card-dm .num{position:absolute;top:1.25rem;right:1.5rem;font-family:"Space Grotesk";color:rgba(255,255,255,.06);font-size:3rem;font-weight:700;line-height:1}

/* Abo */
.abo{background:var(--dm-bg-2);border:1px solid var(--dm-line);border-radius:2rem;padding:clamp(2rem,5vw,4rem);position:relative;overflow:hidden}
.abo::after{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-120px;background:radial-gradient(circle,rgba(255,61,87,.3),transparent 65%)}
.check-list{list-style:none;padding:0;margin:0}
.check-list li{padding:.45rem 0;color:var(--dm-text)}
.check-list li i{color:var(--dm-accent);margin-right:.6rem}

/* Portfolio */
.project{display:block;background:var(--dm-card);border:1px solid var(--dm-line);border-radius:1.25rem;overflow:hidden;color:inherit;text-decoration:none;height:100%;transition:transform .3s,border-color .3s}
.project:hover{transform:translateY(-6px);border-color:rgba(255,61,87,.4);color:inherit}
.project-thumb{aspect-ratio:16/10;display:grid;place-items:center;font-family:"Space Grotesk";font-weight:700;font-size:1.8rem;color:#fff;position:relative}
.project-thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.project-body{padding:1.5rem}
.tag{display:inline-block;font-size:.75rem;border:1px solid var(--dm-line);border-radius:999px;padding:.2rem .7rem;color:var(--dm-muted);margin:0 .3rem .3rem 0}
.t1{background:linear-gradient(135deg,#1e3a8a,#0ea5e9)}
.t2{background:linear-gradient(135deg,#7c2d12,#f97316)}
.t3{background:linear-gradient(135deg,#14532d,#22c55e)}
.t4{background:linear-gradient(135deg,#4c1d95,#a855f7)}
.t5{background:linear-gradient(135deg,#831843,#ff3d57)}
.t6{background:linear-gradient(135deg,#1f2937,#6b7280)}

/* Team */
.team-card{text-align:center}
.avatar{width:120px;height:120px;border-radius:50%;margin:0 auto 1.25rem;display:grid;place-items:center;font-family:"Space Grotesk";font-size:2.2rem;font-weight:700;background:var(--dm-grad);color:#fff;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}

/* Testimonials */
.quote{font-size:1.15rem;line-height:1.6}
.quote-mark{font-size:3rem;line-height:1;color:var(--dm-accent)}

/* Stats */
.stat .n{font-family:"Space Grotesk";font-size:clamp(2.2rem,5vw,3.5rem);font-weight:700}

/* CTA */
.cta{background:var(--dm-grad);border-radius:2rem;padding:clamp(2.5rem,6vw,5rem);color:#fff}
.cta h2{font-size:clamp(2rem,5vw,3.5rem);font-weight:700}
.cta .btn-light{border-radius:999px;padding:.8rem 1.6rem;font-weight:600}
.cta a.contact-link{color:#fff;text-decoration:none;opacity:.9}
.cta a.contact-link:hover{opacity:1;text-decoration:underline}

/* Footer */
footer{border-top:1px solid var(--dm-line);color:var(--dm-muted)}
footer a{color:var(--dm-muted);text-decoration:none}
footer a:hover{color:#fff}
.social a{width:42px;height:42px;border:1px solid var(--dm-line);border-radius:50%;display:inline-grid;place-items:center;margin-right:.4rem;font-size:1.05rem}
.social a:hover{border-color:var(--dm-accent);color:var(--dm-accent)}

/* Legal pages */
.legal{padding-top:9rem;padding-bottom:5rem;max-width:820px}
.legal h1{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:700;margin-bottom:2rem}
.legal h2{font-size:1.4rem;margin-top:2.5rem}
.legal p,.legal li{color:#c8c8d4}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .marquee-track,.scroll-hint{animation:none}
  html{scroll-behavior:auto}
}