:root {
     --purple: #800080;
     --purple-dark: #5a005a;
     --purple-light: #a020a0;
     --gold: #FFD700;
     --gold-dark: #c9a800;
     --gold-light: #ffe44d;
     --black: #0a0a0a;
     --dark: #111111;
     --dark2: #1a1a1a;
     --dark3: #222222;
     --white: #ffffff;
     --gray: #888888;
     --light-gray: #cccccc;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Lato', sans-serif;
     background: var(--black);
     color: var(--white);
     overflow-x: hidden;
 }

 /* ===== NAVBAR ===== */
 #navbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     background: transparent;
 }

 #navbar.scrolled {
     background: rgba(10, 0, 10, 0.97);
     backdrop-filter: blur(12px);
     border-bottom: 1px solid rgba(255, 215, 0, 0.3);
     box-shadow: 0 4px 40px rgba(128, 0, 128, 0.4);
 }

 .nav-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     transition: all 0.4s;
     padding: 26px 48px;
 }

 #navbar.scrolled .nav-inner {
     padding: 11px 48px;
 }

 .nav-logo {
     font-family: 'Cinzel', serif;
     font-weight: 900;
     font-size: 1.45rem;
     color: var(--gold);
     text-decoration: none;
     letter-spacing: 2px;
     transition: all 0.4s;
     text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
 }

 #navbar.scrolled .nav-logo {
     font-size: 1.05rem;
 }

 .nav-links {
     display: flex;
     list-style: none;
     gap: 32px;
     align-items: center;
 }

 .nav-links a {
     color: var(--white);
     text-decoration: none;
     font-family: 'Oswald', sans-serif;
     font-weight: 400;
     font-size: 0.82rem;
     letter-spacing: 2px;
     text-transform: uppercase;
     transition: color 0.3s;
     position: relative;
 }

 .nav-links a::after {
     content: '';
     position: absolute;
     bottom: -4px;
     left: 0;
     right: 0;
     height: 1px;
     background: var(--gold);
     transform: scaleX(0);
     transition: transform 0.3s;
 }

 .nav-links a:hover {
     color: var(--gold);
 }

 .nav-links a:hover::after {
     transform: scaleX(1);
 }

 .nav-cta {
     background: linear-gradient(135deg, var(--purple), var(--purple-dark)) !important;
     color: var(--gold) !important;
     padding: 10px 22px;
     border: 1px solid var(--gold);
     font-weight: 600 !important;
     transition: all 0.3s !important;
 }

 .nav-cta:hover {
     background: var(--gold) !important;
     color: var(--purple-dark) !important;
     box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
 }

 .nav-cta::after {
     display: none !important;
 }

 /* ===== HERO ===== */
 #hero {
     position: relative;
     width: 100%;
     height: 100vh;
     min-height: 700px;
     overflow: hidden;
     background: #080008;
 }

 .panel-1 {
     position: absolute;
     inset: 0;
     background: linear-gradient(160deg, #0d000d 0%, #1a001a 50%, #250025 100%);
     clip-path: polygon(0 0, 58% 0, 38% 100%, 0 100%);
     z-index: 1;
 }

 .panel-2 {
     position: absolute;
     inset: 0;
     z-index: 2;
     clip-path: polygon(58% 0, 100% 0, 100% 58%, 62% 100%, 38% 100%);
     overflow: hidden;
 }

 .panel-2-bg {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(128, 0, 128, 0.2) 0%, transparent 50%, rgba(255, 215, 0, 0.15) 100%);
     background-color: #1e0d00;
     display: flex;
     flex-direction: column;
     gap: 2px;
 }

 .door-row {
     flex: 1;
     border-bottom: 3px solid rgba(255, 215, 0, 0.18);
     background: linear-gradient(180deg, rgba(50, 25, 0, 0.9), rgba(35, 18, 0, 0.95));
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6%;
     padding: 0 8%;
 }

 .door-row::before,
 .door-row::after {
     content: '';
     flex: 1;
     height: 55%;
     border: 1px solid rgba(255, 215, 0, 0.12);
     border-radius: 1px;
     background: linear-gradient(135deg, rgba(255, 215, 0, 0.04), transparent);
 }

 .panel-3 {
     position: absolute;
     inset: 0;
     background: linear-gradient(225deg, #3d003d 0%, #280028 50%, #140014 100%);
     clip-path: polygon(62% 100%, 100% 58%, 100% 100%);
     z-index: 3;
 }

 .diag-line {
     position: absolute;
     z-index: 10;
     pointer-events: none;
     width: 4px;
     background: linear-gradient(180deg, var(--gold), var(--gold-dark));
     box-shadow: 0 0 18px rgba(255, 215, 0, 0.7), 0 0 35px rgba(255, 215, 0, 0.3);
 }

 .diag-line-1 {
     height: 145%;
     top: -10%;
     left: 58%;
     transform: rotate(30deg);
     transform-origin: top left;
 }

 .diag-line-2 {
     height: 145%;
     bottom: -10%;
     left: 38%;
     transform: rotate(30deg);
     transform-origin: bottom left;
 }

 .hero-p1 {
     position: absolute;
     top: 25%;
     left: 5%;
     transform: translateY(-50%);
     z-index: 20;
     max-width: 370px;
     animation: fadeUp 0.9s 0.2s both;
 }

 .hero-badge {
     font-family: 'Oswald', sans-serif;
     font-size: 0.68rem;
     letter-spacing: 4px;
     color: var(--gold);
     text-transform: uppercase;
     margin-bottom: 14px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .hero-badge::before {
     content: '';
     display: inline-block;
     width: 28px;
     height: 1px;
     background: var(--gold);
 }

 .hero-h1 {
     font-family: 'Bebas Neue', sans-serif;
     font-size: clamp(3.2rem, 5.5vw, 6rem);
     line-height: 0.9;
     color: var(--white);
     letter-spacing: 1px;
     margin-bottom: 6px;
 }

 .hero-h1 .g {
     color: var(--gold);
 }

 .hero-sub {
     font-family: 'Cinzel', serif;
     font-size: clamp(0.9rem, 1.5vw, 1.35rem);
     color: var(--purple-light);
     letter-spacing: 3px;
     margin-bottom: 20px;
     text-shadow: 0 0 20px rgba(160, 32, 160, 0.6);
 }

 .hero-loc {
     font-size: 0.82rem;
     color: var(--light-gray);
     letter-spacing: 1px;
     margin-bottom: 24px;
     display: flex;
     align-items: center;
     gap: 7px;
 }

 .hero-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 7px;
 }

 .htag {
     font-family: 'Oswald', sans-serif;
     font-size: 0.62rem;
     letter-spacing: 2px;
     padding: 4px 11px;
     border: 1px solid rgba(255, 215, 0, 0.4);
     color: var(--gold);
     text-transform: uppercase;
     background: rgba(128, 0, 128, 0.2);
 }

 .hero-p3 {
     position: absolute;
     bottom: 7%;
     right: 3%;
     z-index: 20;
     text-align: center;
     max-width: 270px;
     animation: fadeUp 0.9s 0.5s both;
 }

 .hero-phone {
     font-family: 'Bebas Neue', sans-serif;
     font-size: clamp(1.7rem, 2.8vw, 2.6rem);
     color: var(--gold);
     letter-spacing: 3px;
     display: block;
     margin-bottom: 14px;
     text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
     text-decoration: none;
 }

 .btn-pri {
     display: inline-block;
     background: linear-gradient(135deg, var(--gold), var(--gold-dark));
     color: var(--purple-dark);
     font-family: 'Oswald', sans-serif;
     font-weight: 700;
     font-size: 0.87rem;
     letter-spacing: 3px;
     text-transform: uppercase;
     padding: 15px 34px;
     text-decoration: none;
     border: none;
     cursor: pointer;
     transition: all 0.3s;
     clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
     box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
 }

 .btn-pri:hover {
     background: linear-gradient(135deg, var(--gold-light), var(--gold));
     transform: translateY(-2px);
     box-shadow: 0 8px 30px rgba(255, 215, 0, 0.5);
 }

 .btn-sec {
     display: inline-block;
     background: transparent;
     color: var(--gold);
     font-family: 'Oswald', sans-serif;
     font-weight: 600;
     font-size: 0.85rem;
     letter-spacing: 3px;
     text-transform: uppercase;
     padding: 13px 30px;
     text-decoration: none;
     border: 2px solid var(--gold);
     cursor: pointer;
     transition: all 0.3s;
     clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
 }

 .btn-sec:hover {
     background: rgba(255, 215, 0, 0.1);
     box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
 }

 .hero-note {
     font-size: 0.68rem;
     color: var(--gray);
     letter-spacing: 1px;
     margin-top: 9px;
 }

 .scroll-ind {
     position: absolute;
     bottom: 28px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 20;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 7px;
     animation: bounce 2s infinite;
 }

 .scroll-ind span {
     font-family: 'Oswald', sans-serif;
     font-size: 0.58rem;
     letter-spacing: 3px;
     color: var(--gray);
     text-transform: uppercase;
 }

 .scroll-line {
     width: 1px;
     height: 38px;
     background: linear-gradient(180deg, var(--gold), transparent);
 }

 /* ===== SECTIONS ===== */
 section {
     position: relative;
 }

 .sep-gold {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--gold), transparent);
 }

 .sep-purple {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--purple), transparent);
 }

 .container {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 48px;
 }

 .sec-label {
     font-family: 'Oswald', sans-serif;
     font-size: 0.68rem;
     letter-spacing: 5px;
     color: var(--gold);
     text-transform: uppercase;
     margin-bottom: 14px;
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .sec-label::before {
     content: '';
     width: 38px;
     height: 1px;
     background: var(--gold);
 }

 .sec-title {
     font-family: 'Cinzel', serif;
     font-size: clamp(2rem, 3.8vw, 3.4rem);
     font-weight: 900;
     color: var(--white);
     line-height: 1.1;
     margin-bottom: 22px;
 }

 .sec-title .acc {
     color: var(--gold);
 }

 /* ===== ABOUT ===== */
 #about {
     padding: 120px 0;
     background: var(--dark);
     overflow: hidden;
 }

 .about-bg {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-family: 'Bebas Neue', sans-serif;
     font-size: 18vw;
     color: rgba(128, 0, 128, 0.04);
     white-space: nowrap;
     pointer-events: none;
     letter-spacing: 8px;
     user-select: none;
 }

 .about-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 72px;
     align-items: center;
     margin-top: 56px;
 }

 .about-img-wrap {
     position: relative;
 }

 .door-img {
     width: 100%;
     aspect-ratio: 4/3;
     background: #1a0800;
     position: relative;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     gap: 2px;
 }

 .door-s {
     flex: 1;
     border-bottom: 3px solid rgba(255, 215, 0, 0.15);
     background: linear-gradient(180deg, #3a2000, #271600);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 4%;
     padding: 0 5%;
 }

 .door-s::before,
 .door-s::after {
     content: '';
     flex: 1;
     height: 55%;
     border: 1px solid rgba(255, 215, 0, 0.1);
     background: linear-gradient(135deg, rgba(255, 215, 0, 0.03), transparent);
 }

 .about-badge {
     position: absolute;
     bottom: -18px;
     right: -18px;
     background: linear-gradient(135deg, var(--purple), var(--purple-dark));
     border: 2px solid var(--gold);
     padding: 22px;
     text-align: center;
     width: 132px;
     height: 132px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     box-shadow: 0 8px 40px rgba(128, 0, 128, 0.5);
 }

 .badge-n {
     font-family: 'Bebas Neue', sans-serif;
     font-size: 2.8rem;
     color: var(--gold);
     line-height: 1;
 }

 .badge-t {
     font-family: 'Oswald', sans-serif;
     font-size: 0.62rem;
     letter-spacing: 2px;
     color: var(--white);
     text-transform: uppercase;
     text-align: center;
     line-height: 1.4;
 }

 .img-accent {
     position: absolute;
     top: -14px;
     left: -14px;
     width: 70px;
     height: 70px;
     border-top: 3px solid var(--gold);
     border-left: 3px solid var(--gold);
 }

 .about-content p {
     font-size: 0.97rem;
     line-height: 1.85;
     color: var(--light-gray);
     margin-bottom: 18px;
 }

 .stats {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     margin: 36px 0;
 }

 .stat {
     text-align: center;
     padding: 18px;
     border: 1px solid rgba(255, 215, 0, 0.2);
     background: rgba(128, 0, 128, 0.1);
     position: relative;
     overflow: hidden;
 }

 .stat::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(255, 215, 0, 0.04), transparent);
 }

 .sn {
     font-family: 'Bebas Neue', sans-serif;
     font-size: 2.4rem;
     color: var(--gold);
     display: block;
     line-height: 1;
 }

 .sl {
     font-family: 'Oswald', sans-serif;
     font-size: 0.68rem;
     letter-spacing: 2px;
     color: var(--gray);
     text-transform: uppercase;
     display: block;
     margin-top: 5px;
 }

 .feats {
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 .feat {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     padding: 14px;
     border-left: 2px solid var(--gold);
     background: rgba(128, 0, 128, 0.08);
 }

 .feat-ic {
     font-size: 1.4rem;
     flex-shrink: 0;
 }

 .feat-t h4 {
     font-family: 'Oswald', sans-serif;
     font-size: 0.82rem;
     letter-spacing: 2px;
     color: var(--gold);
     text-transform: uppercase;
     margin-bottom: 3px;
 }

 .feat-t p {
     font-size: 0.82rem;
     color: var(--gray);
     line-height: 1.5;
     margin: 0;
 }

 /* ===== SERVICES ===== */
 #services {
     padding: 120px 0;
     background: var(--black);
 }

 .srv-header {
     text-align: center;
     margin-bottom: 72px;
 }

 .srv-header p {
     max-width: 580px;
     margin: 0 auto;
     color: var(--gray);
     line-height: 1.8;
 }

 .acc-list {
     max-width: 1080px;
     margin: 0 auto;
 }

 .acc-item {
     border-bottom: 1px solid rgba(255, 255, 255, 0.07);
     overflow: hidden;
 }

 .acc-item:nth-child(odd) .acc-hd {
     background: var(--dark2);
 }

 .acc-item:nth-child(even) .acc-hd {
     background: var(--dark3);
 }

 .acc-hd {
     display: flex;
     align-items: center;
     padding: 26px 38px;
     cursor: pointer;
     transition: all 0.3s;
     position: relative;
     overflow: hidden;
 }

 .acc-hd::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 3px;
     background: var(--gold);
     transform: scaleY(0);
     transition: transform 0.3s;
     transform-origin: center;
 }

 .acc-item.open .acc-hd::before,
 .acc-hd:hover::before {
     transform: scaleY(1);
 }

 .acc-hd:hover {
     background: rgba(128, 0, 128, 0.15) !important;
 }

 .acc-num {
     font-family: 'Bebas Neue', sans-serif;
     font-size: 3.8rem;
     color: rgba(255, 215, 0, 0.15);
     line-height: 1;
     width: 85px;
     flex-shrink: 0;
     transition: color 0.3s;
 }

 .acc-item.open .acc-num {
     color: rgba(255, 215, 0, 0.5);
 }

 .acc-nm {
     flex: 1;
     font-family: 'Cinzel', serif;
     font-size: clamp(1.05rem, 1.9vw, 1.5rem);
     font-weight: 700;
     color: var(--white);
     letter-spacing: 1px;
     transition: color 0.3s;
 }

 .acc-item.open .acc-nm,
 .acc-hd:hover .acc-nm {
     color: var(--gold);
 }

 .acc-tog {
     width: 42px;
     height: 42px;
     border: 1px solid rgba(255, 215, 0, 0.3);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s;
     font-size: 1.3rem;
     color: var(--gold);
     background: rgba(128, 0, 128, 0.2);
 }

 .acc-item.open .acc-tog {
     background: var(--gold);
     color: var(--purple-dark);
     transform: rotate(45deg);
 }

 .acc-bd {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     background: rgba(128, 0, 128, 0.07);
 }

 .acc-item.open .acc-bd {
     max-height: 950px;
 }

 .acc-cnt {
     padding: 44px 38px 44px 120px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 52px;
 }

 .acc-desc h3 {
     font-family: 'Cinzel', serif;
     font-size: 1.15rem;
     color: var(--gold);
     margin-bottom: 14px;
     font-weight: 700;
 }

 .acc-desc p {
     color: var(--light-gray);
     line-height: 1.85;
     font-size: 0.93rem;
     margin-bottom: 18px;
 }

 .tags {
     display: flex;
     flex-wrap: wrap;
     gap: 7px;
     margin-bottom: 22px;
 }

 .tag {
     font-family: 'Oswald', sans-serif;
     font-size: 0.62rem;
     letter-spacing: 2px;
     padding: 4px 11px;
     border: 1px solid rgba(255, 215, 0, 0.3);
     color: var(--gold);
     text-transform: uppercase;
     background: rgba(128, 0, 128, 0.2);
 }

 .proc h4 {
     font-family: 'Oswald', sans-serif;
     font-size: 0.72rem;
     letter-spacing: 3px;
     color: var(--gray);
     text-transform: uppercase;
     margin-bottom: 14px;
 }

 .steps {
     display: flex;
     flex-direction: column;
     gap: 11px;
     margin-bottom: 24px;
 }

 .step {
     display: flex;
     align-items: flex-start;
     gap: 13px;
 }

 .snum {
     width: 26px;
     height: 26px;
     background: var(--purple);
     border: 1px solid var(--gold);
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Bebas Neue', sans-serif;
     font-size: 0.82rem;
     color: var(--gold);
     flex-shrink: 0;
 }

 .stxt {
     font-size: 0.83rem;
     color: var(--light-gray);
     line-height: 1.5;
     padding-top: 3px;
 }

 .acc-imgs {
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 .acc-img {
     width: 100%;
     aspect-ratio: 4/3;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 215, 0, 0.15);
     font-size: 4.5rem;
 }

 /* ===== WHY ===== */
 #why {
     padding: 120px 0;
     background: var(--dark);
 }

 .why-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 72px;
     align-items: center;
     margin-top: 0;
 }

 .why-cards {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
 }

 .wcard {
     padding: 26px 22px;
     border: 1px solid rgba(255, 215, 0, 0.15);
     background: rgba(128, 0, 128, 0.08);
     transition: all 0.3s;
     position: relative;
     overflow: hidden;
 }

 .wcard::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--purple), var(--gold));
     transform: scaleX(0);
     transition: transform 0.3s;
 }

 .wcard:hover::before {
     transform: scaleX(1);
 }

 .wcard:hover {
     border-color: rgba(255, 215, 0, 0.4);
     background: rgba(128, 0, 128, 0.15);
     transform: translateY(-4px);
     box-shadow: 0 8px 30px rgba(128, 0, 128, 0.2);
 }

 .wic {
     font-size: 1.9rem;
     margin-bottom: 10px;
     display: block;
 }

 .wcard h3 {
     font-family: 'Cinzel', serif;
     font-size: 0.92rem;
     color: var(--gold);
     margin-bottom: 7px;
     letter-spacing: 1px;
 }

 .wcard p {
     font-size: 0.8rem;
     color: var(--gray);
     line-height: 1.6;
 }

 .why-txt .big {
     font-family: 'Bebas Neue', sans-serif;
     font-size: clamp(2.8rem, 4.8vw, 4.8rem);
     line-height: 1;
     color: var(--white);
     margin-bottom: 22px;
 }

 .why-txt .big span {
     display: block;
     color: var(--gold);
 }

 .why-txt p {
     color: var(--light-gray);
     line-height: 1.85;
     margin-bottom: 28px;
     font-size: 0.97rem;
 }

 .why-ph {
     font-family: 'Bebas Neue', sans-serif;
     font-size: 2.4rem;
     color: var(--purple-light);
     letter-spacing: 3px;
     display: block;
     margin-bottom: 18px;
     text-shadow: 0 0 20px rgba(160, 32, 160, 0.4);
     text-decoration: none;
 }

 .why-ph:hover {
     color: var(--gold);
 }

 .cta-row {
     display: flex;
     gap: 14px;
     flex-wrap: wrap;
 }

 /* ===== FAQ ===== */
 #faq {
     padding: 120px 0;
     background: var(--black);
 }

 .faq-hd {
     text-align: center;
     margin-bottom: 56px;
 }

 .faq-split {
     max-width: 1180px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1px 1fr;
     min-height: 480px;
 }

 .faq-div {
     background: linear-gradient(180deg, transparent, var(--gold), transparent);
     opacity: 0.3;
 }

 .faq-qs {
     padding-right: 44px;
 }

 .faq-qs h3 {
     font-family: 'Oswald', sans-serif;
     font-size: 0.68rem;
     letter-spacing: 4px;
     color: var(--gold);
     text-transform: uppercase;
     margin-bottom: 22px;
     padding-bottom: 14px;
     border-bottom: 1px solid rgba(255, 215, 0, 0.2);
 }

 .fqit {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     padding: 16px 14px;
     cursor: pointer;
     transition: all 0.3s;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     position: relative;
 }

 .fqit::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 0;
     background: rgba(128, 0, 128, 0.25);
     transition: width 0.3s;
 }

 .fqit:hover::before,
 .fqit.active::before {
     width: 100%;
 }

 .fqit.active {
     border-color: rgba(255, 215, 0, 0.25);
 }

 .fqn {
     font-family: 'Bebas Neue', sans-serif;
     font-size: 0.95rem;
     color: rgba(255, 215, 0, 0.45);
     width: 26px;
     flex-shrink: 0;
     z-index: 1;
     position: relative;
     padding-top: 2px;
 }

 .fqit.active .fqn {
     color: var(--gold);
 }

 .fqt {
     font-size: 0.88rem;
     color: var(--light-gray);
     line-height: 1.5;
     z-index: 1;
     position: relative;
     transition: color 0.3s;
 }

 .fqit.active .fqt,
 .fqit:hover .fqt {
     color: var(--white);
 }

 .faq-ans {
     padding-left: 44px;
     position: relative;
 }

 .fai {
     opacity: 0;
     transform: translateY(10px);
     transition: all 0.4s;
     pointer-events: none;
     position: absolute;
     top: 0;
     left: 44px;
     right: 0;
 }

 .fai.active {
     opacity: 1;
     transform: translateY(0);
     pointer-events: all;
     position: relative;
     left: auto;
     right: auto;
 }

 .fa-ic {
     font-size: 2.8rem;
     margin-bottom: 18px;
     display: block;
 }

 .fa-ttl {
     font-family: 'Cinzel', serif;
     font-size: 1.15rem;
     color: var(--gold);
     margin-bottom: 14px;
     font-weight: 700;
 }

 .fa-txt {
     color: var(--light-gray);
     line-height: 1.95;
     font-size: 0.93rem;
     margin-bottom: 22px;
 }

 .fa-rel {
     border-top: 1px solid rgba(255, 215, 0, 0.12);
     padding-top: 18px;
 }

 .fa-rel h4 {
     font-family: 'Oswald', sans-serif;
     font-size: 0.62rem;
     letter-spacing: 3px;
     color: var(--gray);
     text-transform: uppercase;
     margin-bottom: 10px;
 }

 .fa-rels {
     display: flex;
     flex-direction: column;
     gap: 7px;
 }

 .fa-rl {
     font-size: 0.8rem;
     color: var(--purple-light);
     cursor: pointer;
     transition: color 0.3s;
     display: flex;
     align-items: center;
     gap: 7px;
 }

 .fa-rl::before {
     content: '→';
 }

 .fa-rl:hover {
     color: var(--gold);
 }

 /* ===== CONTACT ===== */
 #contact {
     padding: 120px 0;
     background: var(--dark);
 }

 .ct-grid {
     display: grid;
     grid-template-columns: 1fr 1.2fr;
     gap: 72px;
     margin-top: 56px;
 }

 .ct-info h3 {
     font-family: 'Cinzel', serif;
     font-size: 1.45rem;
     color: var(--gold);
     margin-bottom: 20px;
     font-weight: 700;
 }

 .ct-info p {
     color: var(--light-gray);
     line-height: 1.85;
     margin-bottom: 28px;
 }

 .ct-items {
     display: flex;
     flex-direction: column;
     gap: 18px;
 }

 .cti {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     padding: 14px 18px;
     border: 1px solid rgba(255, 215, 0, 0.15);
     background: rgba(128, 0, 128, 0.08);
 }

 .cti-ic {
     font-size: 1.3rem;
     flex-shrink: 0;
 }

 .cti-d strong {
     font-family: 'Oswald', sans-serif;
     font-size: 0.67rem;
     letter-spacing: 2px;
     color: var(--gold);
     text-transform: uppercase;
     display: block;
     margin-bottom: 3px;
 }

 .cti-d span {
     font-size: 0.88rem;
     color: var(--light-gray);
 }

 .cti-d a {
     color: var(--light-gray);
     text-decoration: none;
     transition: color 0.3s;
 }

 .cti-d a:hover {
     color: var(--gold);
 }

 .hrs {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 7px;
     margin-top: 18px;
 }

 .hr {
     display: flex;
     justify-content: space-between;
     padding: 7px 11px;
     background: rgba(128, 0, 128, 0.1);
     border: 1px solid rgba(255, 215, 0, 0.08);
     font-size: 0.78rem;
 }

 .hd {
     color: var(--gray);
     font-family: 'Oswald', sans-serif;
     letter-spacing: 1px;
 }

 .ht {
     color: var(--gold);
 }

 .ct-form {
     background: rgba(128, 0, 128, 0.06);
     border: 1px solid rgba(255, 215, 0, 0.15);
     padding: 46px;
     position: relative;
 }

 .ct-form::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--purple), var(--gold), var(--purple));
 }

 .form-ttl {
     font-family: 'Cinzel', serif;
     font-size: 1.35rem;
     color: var(--white);
     margin-bottom: 28px;
     font-weight: 700;
 }

 .frow {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 18px;
 }

 .fg {
     margin-bottom: 18px;
 }

 .fg label {
     display: block;
     font-family: 'Oswald', sans-serif;
     font-size: 0.63rem;
     letter-spacing: 2px;
     color: var(--gold);
     text-transform: uppercase;
     margin-bottom: 7px;
 }

 .fg input,
 .fg select,
 .fg textarea {
     width: 100%;
     background: rgba(10, 0, 10, 0.6);
     border: 1px solid rgba(255, 215, 0, 0.2);
     color: var(--white);
     padding: 13px 15px;
     font-family: 'Lato', sans-serif;
     font-size: 0.88rem;
     transition: border-color 0.3s;
     outline: none;
 }

 .fg input:focus,
 .fg select:focus,
 .fg textarea:focus {
     border-color: var(--gold);
     background: rgba(128, 0, 128, 0.1);
 }

 .fg textarea {
     height: 96px;
     resize: vertical;
 }

 .fg select option {
     background: #1a001a;
 }

 .fsub {
     width: 100%;
     padding: 17px;
     background: linear-gradient(135deg, var(--purple), var(--purple-dark));
     color: var(--gold);
     font-family: 'Oswald', sans-serif;
     font-weight: 600;
     font-size: 0.88rem;
     letter-spacing: 3px;
     text-transform: uppercase;
     border: 1px solid var(--gold);
     cursor: pointer;
     transition: all 0.3s;
 }

 .fsub:hover {
     background: var(--gold);
     color: var(--purple-dark);
     box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
 }

 /* ===== FOOTER ===== */
 footer {
     background: #050005;
     padding-bottom: 36px;
     border-top: 1px solid rgba(255, 215, 0, 0.2);
     overflow: hidden;
 }

 .fw-wrap {
     width: 100%;
     overflow: hidden;
     padding: 52px 0 16px;
 }

 .fw-svg {
     width: 100%;
     height: 150px;
     display: block;
     overflow: visible;
 }

 .fc {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 48px;
 }

 .fcols {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 44px;
     padding: 36px 0;
     border-top: 1px solid rgba(255, 215, 0, 0.1);
     border-bottom: 1px solid rgba(255, 215, 0, 0.1);
 }

 .fcol-t {
     font-family: 'Oswald', sans-serif;
     font-size: 0.63rem;
     letter-spacing: 3px;
     color: var(--gold);
     text-transform: uppercase;
     margin-bottom: 14px;
 }

 .fcol p {
     color: var(--gray);
     font-size: 0.8rem;
     line-height: 1.7;
 }

 .flinks {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 7px;
 }

 .flinks li a {
     color: var(--gray);
     text-decoration: none;
     font-size: 0.8rem;
     transition: color 0.3s;
     display: flex;
     align-items: center;
     gap: 7px;
 }

 .flinks li a::before {
     content: '›';
     color: var(--gold);
 }

 .flinks li a:hover {
     color: var(--gold);
 }

 .fcp {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 22px;
     font-size: 0.73rem;
     color: rgba(255, 255, 255, 0.28);
     letter-spacing: 1px;
 }

 .fcp a {
     color: var(--gold);
     text-decoration: none;
 }

 /* ANIMS */
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(28px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes bounce {

     0%,
     100% {
         transform: translateX(-50%) translateY(0);
     }

     50% {
         transform: translateX(-50%) translateY(7px);
     }
 }

 .fu {
     opacity: 0;
     transform: translateY(28px);
     transition: opacity 0.7s, transform 0.7s;
 }

 .fu.vis {
     opacity: 1;
     transform: translateY(0);
 }

 @media (max-width: 960px) {

     .about-grid,
     .why-grid,
     .ct-grid {
         grid-template-columns: 1fr;
     }

     .acc-cnt {
         grid-template-columns: 1fr;
         padding: 28px 20px;
     }

     .faq-split {
         grid-template-columns: 1fr;
     }

     .faq-div {
         display: none;
     }

     .faq-qs {
         padding-right: 0;
     }

     .faq-ans {
         padding-left: 0;
         padding-top: 28px;
     }

     .nav-links {
         display: none;
     }

     .fcols {
         grid-template-columns: 1fr 1fr;
     }

     .frow {
         grid-template-columns: 1fr;
     }

     .hero-p3 {
         right: 2%;
         bottom: 5%;
         max-width: 220px;
     }

     .hero-h1 {
         font-size: 3rem;
     }
 }


 /* SERVICE AREAS */
 #service-areas {
     padding: 120px 0;
     background: var(--black);
 }

 .srv-area-header {
     margin-bottom: 60px;
 }

 .sa-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: start;
     margin-top: 60px;
 }

 .sa-map-wrap {
     position: relative;
 }

 .sa-map {
     background: rgba(128, 0, 128, 0.05);
     border: 1px solid rgba(255, 215, 0, 0.2);
     padding: 20px;
     aspect-ratio: 1;
 }

 .sa-map svg {
     width: 100%;
     height: 100%;
 }

 .map-legend {
     margin-top: 20px;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .legend-item {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 0.82rem;
     color: var(--light-gray);
 }

 .leg-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     flex-shrink: 0;
 }

 .areas-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
 }

 .area-card {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 14px;
     border: 1px solid rgba(255, 215, 0, 0.15);
     background: rgba(128, 0, 128, 0.08);
     transition: all 0.3s;
     cursor: pointer;
 }

 .area-card:hover {
     border-color: rgba(255, 215, 0, 0.4);
     background: rgba(128, 0, 128, 0.15);
     transform: translateY(-2px);
 }

 .area-num {
     font-family: 'Bebas Neue', sans-serif;
     font-size: 1rem;
     color: var(--gold);
     font-weight: 700;
     width: 24px;
     text-align: center;
 }

 .area-name {
     font-family: 'Lato', sans-serif;
     font-size: 0.82rem;
     color: var(--light-gray);
 }

 /* COMPREHENSIVE SERVICES */
 #comprehensive-services {
     padding: 120px 0;
     background: var(--dark);
 }

 .comp-header {
     margin-bottom: 80px;
 }

 .comp-services {
     display: flex;
     flex-direction: column;
     gap: 140px;
 }

 .comp-service {
     position: relative;
 }

 .comp-s-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
 }

 .comp-s-img {
     aspect-ratio: 5/4;
     border: 1px solid rgba(255, 215, 0, 0.2);
     overflow: hidden;
 }

 .comp-s-content h3 {
     margin-bottom: 16px;
 }

 .comp-s-content p {
     margin-bottom: 16px;
 }

 /* ANIMS */
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(28px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes bounce {

     0%,
     100% {
         transform: translateX(-50%) translateY(0);
     }

     50% {
         transform: translateX(-50%) translateY(7px);
     }
 }

 .fu {
     opacity: 0;
     transform: translateY(28px);
     transition: opacity 0.7s, transform 0.7s;
 }

 .fu.vis {
     opacity: 1;
     transform: translateY(0);
 }