@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Oxanium:wght@500;600;700;800&display=swap');

:root {
  --yellow: #ffc400;
  --yellow-soft: #ffd84d;
  --ink: #080c0d;
  --panel: #14191a;
  --muted: #aeb5b7;
  --line: rgba(255, 255, 255, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--ink); }
body { color: #f7f7f7; font-family: 'Manrope', Arial, sans-serif; }
a { -webkit-tap-highlight-color: transparent; }

.site-shell {
  background:
    radial-gradient(circle at 72% 32%, rgba(41, 57, 59, .58) 0, transparent 34%),
    radial-gradient(circle at 18% 82%, rgba(255, 196, 0, .05) 0, transparent 28%),
    var(--ink);
  isolation: isolate;
}

.site-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 90%);
  z-index: -3;
}

.ambient { position: absolute; border-radius: 50%; filter: blur(4px); pointer-events: none; z-index: -2; }
.ambient-one { width: 430px; height: 430px; right: 3%; top: 12%; border: 1px solid rgba(255,196,0,.09); animation: orbit 18s linear infinite; }
.ambient-two { width: 260px; height: 260px; right: 15%; top: 24%; border: 1px dashed rgba(255,255,255,.07); animation: orbit 26s linear infinite reverse; }
.ambient::before, .ambient::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 18px rgba(255,196,0,.8); }
.ambient::before { top: 15%; left: 14%; }
.ambient::after { right: 8%; bottom: 24%; opacity: .45; }

.corner { position: absolute; background: var(--yellow); z-index: -1; pointer-events: none; }
.corner-top { width: 38vw; height: 28vw; min-width: 320px; min-height: 220px; top: -20vw; left: -12vw; transform: rotate(-25deg); }
.corner-bottom { width: 23vw; height: 18vw; right: -13vw; bottom: -13vw; transform: rotate(35deg); opacity: .88; }
.scan-line { position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: linear-gradient(transparent, rgba(255,196,0,.35), transparent); opacity: .35; animation: scan 12s ease-in-out infinite; pointer-events: none; }

.container { max-width: 1240px; }
.topbar { min-height: 46px; }
.mini-brand { color: #fff; gap: .58rem; padding: .3rem .72rem .3rem .35rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(8,12,13,.84); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.mini-brand-emblem { display: grid; place-items: center; width: 33px; height: 33px; padding: 2px; border-radius: 50%; background: rgba(255,196,0,.08); }
.mini-brand-emblem img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mini-brand-name { color: #fff; font-family: 'Oxanium', sans-serif; font-size: 1.02rem; font-style: italic; font-weight: 800; letter-spacing: -.055em; line-height: 1; }
.mini-brand-name b { color: var(--yellow); font-weight: 800; }
.top-contact { color: #dce1e2; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; transition: color .25s ease; }
.top-contact i { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; transition: .25s ease; }
.top-contact:hover { color: var(--yellow); }
.top-contact:hover i { transform: rotate(45deg); border-color: var(--yellow); }

.eyebrow { color: #d7ddde; text-transform: uppercase; letter-spacing: .17em; font-size: .72rem; font-weight: 700; }
.pulse-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 6px rgba(255,196,0,.13); }
.pulse-dot::after { content: ""; position: absolute; inset: -7px; border: 1px solid rgba(255,196,0,.55); border-radius: 50%; animation: pulse 2s ease-out infinite; }
.brand { display: inline-block; color: #fff; font-family: 'Oxanium', sans-serif; font-size: clamp(3.2rem, 7vw, 5.6rem); font-weight: 800; font-style: italic; letter-spacing: -.085em; line-height: .82; border-bottom: 5px solid var(--yellow); padding: 0 .12em .14em 0; text-shadow: 0 12px 35px rgba(0,0,0,.35); }
.brand-accent { color: var(--yellow); }
.brand-o { display: inline-block; position: relative; }
.brand-o::after { content: ""; position: absolute; width: .19em; height: .19em; background: var(--yellow); transform: rotate(45deg); left: 38%; bottom: .04em; }
.tagline { letter-spacing: .13em; font-size: .77rem; font-weight: 700; color: #dfe3e4; }
.tagline span, h1 span { color: var(--yellow); }
h1, h2, h3, .eyebrow, .tagline, .small-label, .btn, .top-contact, .status-line strong { font-family: 'Oxanium', sans-serif; }
h1 { letter-spacing: -.045em; line-height: 1.02; font-size: clamp(2.6rem, 5.2vw, 4.8rem) !important; }
.intro { color: var(--muted); font-size: clamp(.97rem, 1.2vw, 1.07rem); line-height: 1.75; max-width: 620px; }

.btn { position: relative; overflow: hidden; font-size: .93rem; font-weight: 700; border-width: 1px; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.32) 48%, transparent 70%); transform: translateX(-125%); transition: transform .55s ease; }
.btn:hover::after { transform: translateX(125%); }
.btn:hover { transform: translateY(-2px); }
.btn-warning { --bs-btn-bg: var(--yellow); --bs-btn-border-color: var(--yellow); --bs-btn-hover-bg: var(--yellow-soft); --bs-btn-hover-border-color: var(--yellow-soft); color: #090d0e; box-shadow: 0 10px 30px rgba(255,196,0,.12); }
.btn-outline-light:hover { color: #090d0e; }

.status-line { position: relative; overflow: hidden; width: min(100%, 620px); padding: .85rem 1rem; color: #fff; border: 1px solid rgba(255,196,0,.55); border-radius: 16px; background: linear-gradient(105deg, rgba(255,196,0,.15), rgba(255,196,0,.035)); box-shadow: 0 12px 32px rgba(0,0,0,.2), inset 3px 0 0 var(--yellow); }
.status-line::after { content: ""; position: absolute; width: 70px; height: 180%; right: 15%; top: -40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.055), transparent); transform: rotate(20deg); pointer-events: none; }
.status-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #090d0e; background: var(--yellow); box-shadow: 0 6px 18px rgba(255,196,0,.22); flex: 0 0 auto; }
.status-line strong, .status-line small { display: block; }
.status-line strong { color: var(--yellow); font-size: .82rem; text-transform: uppercase; letter-spacing: .075em; }
.status-line small { color: #c3c9ca; font-size: .74rem; margin-top: .18rem; }
.status-badge { align-items: center; white-space: nowrap; padding: .35rem .62rem; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #dce1e2; background: rgba(0,0,0,.2); font-family: 'Oxanium', sans-serif; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.service-panel { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(25,31,32,.94), rgba(14,18,19,.94)); border: 1px solid rgba(255,255,255,.14); border-radius: 28px; padding: clamp(1.35rem, 4vw, 2.5rem); box-shadow: 0 28px 90px rgba(0,0,0,.38); backdrop-filter: blur(14px); }
.service-panel::after { content: ""; position: absolute; width: 120px; height: 7px; right: -25px; bottom: 28px; background: var(--yellow); transform: rotate(-42deg); opacity: .75; pointer-events: none; }
.panel-glow { position: absolute; width: 180px; height: 180px; right: -80px; top: -90px; background: var(--yellow); border-radius: 50%; filter: blur(80px); opacity: .12; pointer-events: none; }
.roof-lines { position: absolute; inset: 0 0 auto auto; width: 48%; height: 115px; opacity: .13; pointer-events: none; overflow: hidden; }
.roof-lines span { position: absolute; display: block; width: 190px; height: 1px; right: -20px; top: 44px; background: linear-gradient(90deg, transparent, #fff); transform: rotate(31deg); transform-origin: right center; }
.roof-lines span:last-child { right: 92px; top: 43px; transform: rotate(-31deg); background: linear-gradient(90deg, #fff, transparent); }
.small-label { color: var(--yellow); text-transform: uppercase; font-size: .69rem; font-weight: 800; letter-spacing: .15em; }
.panel-logo { display: grid; place-items: center; flex: 0 0 auto; width: 82px; height: 82px; padding: .4rem; border: 1px solid rgba(255,255,255,.72); border-radius: 18px; background: linear-gradient(145deg, #fff 0%, #d9dde0 44%, #f7f8f8 70%, #aeb4b8 100%); box-shadow: inset 1px 1px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(75,82,86,.28), 0 10px 28px rgba(0,0,0,.3); transform: rotate(2deg); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.panel-logo img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.service-panel:hover .panel-logo { transform: rotate(0) scale(1.04); border-color: rgba(255,196,0,.85); box-shadow: inset 1px 1px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(75,82,86,.28), 0 12px 32px rgba(0,0,0,.36), 0 0 0 2px rgba(255,196,0,.1); }
.service-item { position: relative; padding: 1rem; background: rgba(8,12,13,.72); border: 1px solid rgba(255,255,255,.075); border-radius: 16px; transition: transform .25s ease, border-color .25s ease, background-color .25s ease; }
.service-item:hover { border-color: rgba(255,196,0,.55); background: rgba(18,22,23,.92); transform: translateY(-3px); }
.service-icon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; color: var(--yellow); background: rgba(255,196,0,.1); font-size: 1.2rem; transition: transform .3s ease; }
.service-item:hover .service-icon { transform: rotate(-6deg) scale(1.08); }
.service-item h3 { font-weight: 800; text-transform: uppercase; font-size: .75rem; letter-spacing: .035em; }
.service-item p { color: #8f989b; font-size: .76rem; }
.item-arrow { color: #596164; font-size: .75rem; transition: color .25s ease, transform .25s ease; }
.service-item:hover .item-arrow { color: var(--yellow); transform: translate(2px, -2px); }
.contact-strip { border-top: 1px solid var(--line); color: #c9cecf; font-size: .88rem; }
.site-link { color: var(--yellow); text-decoration: none; font-weight: 700; }
.site-link:hover { color: var(--yellow-soft); }
footer { color: #737c7e; font-size: .72rem; letter-spacing: .05em; }

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.25,1); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@keyframes pulse { 0% { transform: scale(.45); opacity: 1; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes scan { 0%, 100% { left: 2%; opacity: 0; } 15%, 85% { opacity: .3; } 50% { left: 98%; } }

@media (min-width: 992px) and (max-height: 800px) {
  .topbar { margin-bottom: 2rem !important; }
  .container { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  footer { padding-top: 2rem !important; }
}

@media (max-width: 991.98px) {
  .site-shell { align-items: flex-start !important; }
  .hero-copy { padding-top: .5rem; }
  .ambient-one { right: -180px; top: 38%; }
  .ambient-two { right: -90px; top: 46%; }
  .corner-bottom { bottom: -5vw; }
}

@media (max-width: 575.98px) {
  .site-shell::before { background-size: 30px 30px; }
  .topbar { margin-bottom: 3rem !important; }
  .brand { font-size: clamp(3rem, 16vw, 4rem); }
  h1 { font-size: clamp(2.45rem, 13vw, 3.3rem) !important; }
  .eyebrow { font-size: .65rem; letter-spacing: .12em; }
  .service-panel { border-radius: 22px; }
  .panel-logo { width: 68px; height: 68px; border-radius: 15px; }
  .btn { width: 100%; }
  .corner-top { left: -210px; top: -180px; }
  .status-line { align-items: flex-start !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}