/* Star Fusion Media Inc. — Corporate Website — Elegant Dark Theme */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:#0c1322;color:#c8cedc;font-family:'Inter','Noto Sans SC',system-ui,-apple-system,sans-serif;overflow-x:hidden;line-height:1.72;font-weight:400}
::selection{background:rgba(93,138,230,0.35);color:#fff}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#0c1322}
::-webkit-scrollbar-thumb{background:rgba(93,138,230,0.22);border-radius:3px}
:root{
  --bg:#0c1322;--bg2:#111a2e;--bg3:#162038;--surf:#1a2540;--surfh:#202d4e;
  --t1:#f2f4f9;--t2:#a0a9be;--t3:#6b7490;
  --a:#5d8ae6;--al:#8baef6;--ad:#4572d4;--aw:#c4a26a;
  --ag:rgba(93,138,230,0.1);--as:rgba(93,138,230,0.2);
  --br:rgba(255,255,255,0.07);--brl:rgba(255,255,255,0.04);
  --rs:8px;--rm:14px;--rl:22px;
  --e:cubic-bezier(0.16,1,0.3,1);
  --nh:72px;--mw:1240px;
}

/* Particles */
#particle-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.5}

/* Navbar */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nh);display:flex;align-items:center;justify-content:center;transition:all 0.5s var(--e)}
.navbar::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 0.5s var(--e);background:rgba(12,19,34,0.88);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);border-bottom:1px solid var(--br)}
.navbar.scrolled::before{opacity:1}
.navbar-inner{width:100%;max-width:var(--mw);display:flex;align-items:center;justify-content:space-between;padding:0 2.5rem}
.logo{display:flex;align-items:center;gap:0.65rem;text-decoration:none;z-index:2}
.logo-mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--ad),var(--a));display:flex;align-items:center;justify-content:center;font-size:0.88rem;font-weight:800;color:#fff;box-shadow:0 4px 20px rgba(93,138,230,0.25)}
.logo-text{font-weight:700;font-size:1.08rem;letter-spacing:-0.01em;color:var(--t1)}
.nav-links{display:flex;align-items:center;gap:0.1rem;list-style:none}
.nav-link{display:inline-flex;align-items:center;padding:0.5rem 0.9rem;color:var(--t2);text-decoration:none;font-size:0.78rem;font-weight:500;letter-spacing:0.045em;border-radius:6px;transition:all 0.35s ease;text-transform:uppercase}
.nav-link:hover,.nav-link.active{color:var(--al);background:var(--ag)}

.hamburger{display:none;background:none;border:none;cursor:pointer;position:relative;z-index:1001;padding:0;width:24px;height:18px}
.hamburger span{display:block;position:absolute;left:0;width:100%;height:2px;background:var(--t1);transition:all 0.3s ease;border-radius:2px}
.hamburger span:nth-child(1){top:0}
.hamburger span:nth-child(2){top:50%;transform:translateY(-50%)}
.hamburger span:nth-child(3){top:100%;transform:translateY(-100%)}
.hamburger.active span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0;transform:translateY(-50%) scaleX(0)}
.hamburger.active span:nth-child(3){top:50%;transform:translateY(-50%) rotate(-45deg)}

/* Hero */
.hero-full{min-height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;padding-top:var(--nh);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg-img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 10s var(--e)}
.hero-full:hover .hero-bg-img{transform:scale(1)}
.overlay{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,transparent 15%,rgba(12,19,34,0.55) 65%,rgba(12,19,34,0.82) 100%)}
.overlay-top{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(12,19,34,0.78) 0%,rgba(12,19,34,0.35) 38%,rgba(12,19,34,0.15) 62%,rgba(12,19,34,0.7) 100%)}
.grain{position:absolute;inset:0;z-index:3;opacity:0.025;pointer-events:none}
.vignette{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 260px 110px rgba(12,19,34,0.45)}
.hero-content{position:relative;z-index:5;text-align:center;max-width:820px;padding:2rem}
.hero-badge{display:inline-flex;align-items:center;gap:0.45rem;padding:0.38rem 1.1rem;border:1px solid rgba(93,138,230,0.2);border-radius:100px;font-size:0.72rem;font-weight:500;color:var(--al);margin-bottom:2rem;letter-spacing:0.05em;background:rgba(93,138,230,0.05)}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--a);animation:pulse-dot 2s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:0.3}}
.hero-title{font-size:clamp(2.6rem,7vw,5.4rem);font-weight:900;line-height:1.06;letter-spacing:-0.04em;color:var(--t1);margin-bottom:1.5rem;text-shadow:0 4px 36px rgba(0,0,0,0.6)}
.gradient-text{background:linear-gradient(135deg,var(--al) 0%,#7eaaf4 35%,#a0c4f8 70%,var(--aw) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-subtitle{font-size:1.08rem;color:#c4cde0;max-width:560px;margin:0 auto 2.5rem;line-height:1.85;text-shadow:0 2px 12px rgba(0,0,0,0.6)}
.hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.scroll-indicator{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0.5rem;z-index:5;animation:float-scroll 2.5s ease-in-out infinite}
.scroll-line{width:1px;height:28px;background:linear-gradient(180deg,var(--a),transparent)}
.scroll-text{color:var(--t3);font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:500}
@keyframes float-scroll{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}

/* Sections */
.home-section{padding:6.5rem 2.5rem;position:relative;z-index:1;max-width:var(--mw);margin:0 auto}
.home-section.alt{background:var(--bg2);padding:6.5rem 2.5rem}
.section-label{display:inline-flex;align-items:center;gap:0.5rem;padding:0.32rem 1rem;border:1px solid var(--br);border-radius:100px;font-size:0.68rem;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:var(--al);margin-bottom:1.4rem;background:rgba(93,138,230,0.05)}
.section-title{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:800;letter-spacing:-0.025em;color:var(--t1);margin-bottom:0.9rem;line-height:1.15}
.section-desc{font-size:1rem;color:var(--t2);max-width:600px;line-height:1.8}

/* Cards */
.card-grid{display:grid;gap:1.5rem}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}

.biz-card-top{overflow:hidden;border-radius:var(--rm);background:var(--surf);border:1px solid var(--br);transition:all 0.45s var(--e)}
.biz-card-top:hover{border-color:rgba(93,138,230,0.28);transform:translateY(-5px);box-shadow:0 18px 48px rgba(0,0,0,0.45)}
.biz-img{width:100%;aspect-ratio:16/9;overflow:hidden}
.biz-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.65s var(--e)}
.biz-card-top:hover .biz-img img{transform:scale(1.06)}
.biz-body{padding:1.4rem 1.5rem 1.5rem}
.biz-title{font-size:1.02rem;font-weight:700;color:var(--t1);margin-bottom:0.25rem}
.biz-sub{font-size:0.78rem;color:var(--al);margin-bottom:0.65rem;font-weight:500;letter-spacing:0.02em}
.biz-desc{font-size:0.84rem;color:var(--t3);line-height:1.65;margin:0}

.icon-card{padding:2.2rem 1.8rem;background:var(--bg3);border:1px solid var(--br);border-radius:var(--rl);text-align:center;transition:all 0.4s var(--e)}
.icon-card:hover{border-color:rgba(93,138,230,0.28);transform:translateY(-4px);box-shadow:0 14px 42px rgba(0,0,0,0.35)}
.ic-icon{width:56px;height:56px;border-radius:50%;background:var(--ag);border:1px solid rgba(93,138,230,0.13);display:flex;align-items:center;justify-content:center;margin:0 auto 1.1rem;font-size:1.4rem;transition:all 0.4s ease}
.icon-card:hover .ic-icon{background:rgba(93,138,230,0.16);border-color:rgba(93,138,230,0.28);box-shadow:0 0 28px rgba(93,138,230,0.12)}
.icon-card h3{font-size:1.05rem;font-weight:700;color:var(--t1);margin:0 0 0.45rem}
.icon-card p{font-size:0.83rem;color:var(--t3);line-height:1.65;margin:0}

/* Stats */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin:1rem 0}
.stat-item{text-align:center;padding:1.8rem 1rem}
.stat-number{font-size:clamp(2rem,4.5vw,3.5rem);font-weight:800;color:var(--al);line-height:1;margin-bottom:0.4rem;display:block}
.stat-label{font-size:0.8rem;color:var(--t3);text-transform:uppercase;letter-spacing:0.08em;font-weight:500}

/* Feature Row */
.feature-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:2.5rem}
.feature-item{display:flex;gap:1.1rem;padding:1.4rem;background:var(--surf);border:1px solid var(--br);border-radius:var(--rm);align-items:flex-start;transition:all 0.4s ease}
.feature-item:hover{border-color:rgba(93,138,230,0.22);background:var(--surfh)}
.feature-icon{width:46px;height:46px;border-radius:10px;background:var(--ag);border:1px solid rgba(93,138,230,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--al)}
.feature-title{font-size:0.92rem;font-weight:700;color:var(--t1);margin-bottom:0.3rem}
.feature-desc{font-size:0.81rem;color:var(--t3);line-height:1.55;margin:0}

/* CTA */
.cta-section{text-align:center;padding:5rem 2.5rem}

/* Buttons */
.btn-primary{display:inline-flex;align-items:center;gap:0.5rem;padding:0.82rem 1.8rem;text-decoration:none;border-radius:var(--rs);font-weight:600;font-size:0.86rem;letter-spacing:0.02em;border:none;cursor:pointer;font-family:inherit;background:linear-gradient(135deg,var(--ad),var(--a));color:#fff;transition:all 0.4s var(--e)}
.btn-primary:hover{background:linear-gradient(135deg,var(--a),var(--al));transform:translateY(-2px);box-shadow:0 10px 32px rgba(93,138,230,0.32)}
.btn-outline{display:inline-flex;align-items:center;gap:0.5rem;padding:0.82rem 1.8rem;text-decoration:none;border-radius:var(--rs);font-weight:600;font-size:0.86rem;letter-spacing:0.02em;border:1px solid var(--br);cursor:pointer;font-family:inherit;background:transparent;color:var(--t1);transition:all 0.4s var(--e)}
.btn-outline:hover{border-color:var(--a);background:var(--ag);color:var(--al)}

/* Page Header (sub pages) */
.sub-page{padding-top:var(--nh)}
.page-header{position:relative;height:45dvh;min-height:320px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.header-bg{position:absolute;inset:0;z-index:0}
.header-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 10s var(--e)}
.page-header:hover .header-bg img{transform:scale(1)}
.header-content{position:relative;z-index:5;max-width:680px;padding:0 1.5rem}
.page-header h1{font-size:clamp(2.4rem,5.5vw,4.4rem);font-weight:800;letter-spacing:-0.03em;margin-bottom:0.5rem;color:var(--t1);text-shadow:0 4px 28px rgba(0,0,0,0.5)}
.page-header p{color:#c4cde0;font-size:1rem;line-height:1.7;max-width:500px;margin:0 auto;text-shadow:0 2px 10px rgba(0,0,0,0.5)}

/* Page Body */
.page-body{max-width:820px;margin:0 auto;padding:4rem 2.5rem}
.page-body h2{font-size:1.55rem;font-weight:700;margin:2.8rem 0 0.9rem;letter-spacing:-0.02em;color:var(--t1)}
.page-body h2:first-child{margin-top:0}
.page-body p{color:var(--t2);line-height:1.9;margin-bottom:1.4rem;font-size:0.94rem;max-width:65ch}
.page-body hr{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--br),transparent);margin:3.2rem 0}

.page-body-wide{max-width:1100px;margin:0 auto;padding:4rem 2.5rem}
.page-body-wide h2{font-size:1.55rem;font-weight:700;margin:3rem 0 1rem;letter-spacing:-0.02em;color:var(--t1)}
.page-body-wide h2:first-child{margin-top:0}
.page-body-wide>p{color:var(--t2);line-height:1.9;margin-bottom:1.2rem;font-size:0.94rem;max-width:70ch}
.page-body-wide hr{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--as),transparent);margin:3.2rem 0}

/* Business Detail */
.biz-detail-row{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;margin:3.5rem 0}
.biz-detail-img{border-radius:var(--rm);overflow:hidden;border:1px solid var(--br)}
.biz-detail-img img{width:100%;display:block;transition:transform 0.65s var(--e)}
.biz-detail-img:hover img{transform:scale(1.04)}
.biz-detail-text h2{font-size:1.45rem;font-weight:700;color:var(--t1);margin-bottom:0.7rem}
.biz-detail-text p{color:var(--t2);font-size:0.91rem;line-height:1.85;margin-bottom:0}
.biz-metrics{display:flex;gap:2rem;margin-top:1.4rem;flex-wrap:wrap}
.biz-metric b{font-size:1.55rem;color:var(--al);display:block;line-height:1}
.biz-metric small{font-size:0.76rem;color:var(--t3);text-transform:uppercase;letter-spacing:0.06em}

/* Partners */
.partners-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;margin:2.5rem 0}
.partner-item{background:var(--surf);border:1px solid var(--br);border-radius:var(--rm);padding:1.2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.4rem;min-height:88px;transition:all 0.4s ease}
.partner-item:hover{border-color:rgba(93,138,230,0.28);box-shadow:0 8px 26px rgba(0,0,0,0.3);transform:translateY(-2px)}
.partner-item span{font-size:0.73rem;color:var(--t3);font-weight:500}

/* Contact */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.contact-info-card{background:var(--surf);border:1px solid var(--br);border-radius:var(--rm);padding:2rem}
.contact-info-card h3{font-size:1.22rem;font-weight:700;color:var(--t1);margin-bottom:1.5rem}
.ci-row{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.4rem}
.ci-icon{width:42px;height:42px;border-radius:10px;background:var(--ag);border:1px solid rgba(93,138,230,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem}
.ci-text h4{font-size:0.85rem;font-weight:600;color:var(--t1);margin-bottom:0.12rem}
.ci-text p,.ci-text a{font-size:0.83rem;color:var(--t2);text-decoration:none;line-height:1.6;transition:color 0.35s ease}
.ci-text a:hover{color:var(--al)}
.contact-form-wrap h3{font-size:1.22rem;font-weight:700;color:var(--t1);margin-bottom:1.5rem}
.contact-form{display:flex;flex-direction:column;gap:1rem}
.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:0.8rem 1rem;background:var(--surf);border:1px solid var(--br);border-radius:var(--rs);color:var(--t1);font-family:inherit;font-size:0.86rem;outline:none;transition:all 0.35s ease}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--t3)}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--a);box-shadow:0 0 0 3px var(--ag)}
.contact-form textarea{min-height:128px;resize:vertical}
.contact-form select{appearance:none;cursor:pointer;color:var(--t2);background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b94ab' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.submit-btn{padding:0.88rem 2rem;background:linear-gradient(135deg,var(--ad),var(--a));color:#fff;border:none;border-radius:var(--rs);font-weight:600;font-size:0.88rem;cursor:pointer;transition:all 0.4s ease;font-family:inherit;letter-spacing:0.02em}
.submit-btn:hover{background:linear-gradient(135deg,var(--a),var(--al));box-shadow:0 8px 26px rgba(93,138,230,0.32)}

/* Footer */
.footer{border-top:1px solid var(--br);padding:4.5rem 2.5rem 2rem;background:var(--bg2);position:relative;z-index:1}
.footer-inner{max-width:var(--mw);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem}
.footer-tagline{color:var(--t3);font-size:0.82rem;line-height:1.7;max-width:300px;margin-top:0.8rem}
.footer-heading{font-size:0.74rem;font-weight:600;text-transform:uppercase;letter-spacing:0.09em;color:var(--t3);margin-bottom:1.1rem}
.footer-col ul{list-style:none;padding:0}
.footer-col li{margin-bottom:0.35rem}
.footer-col a,.footer-col span{display:block;color:var(--t2);text-decoration:none;font-size:0.82rem;padding:0.25rem 0;transition:color 0.35s ease}
.footer-col a:hover{color:var(--al)}
.footer-bottom{max-width:var(--mw);margin:2.5rem auto 0;padding-top:1.5rem;border-top:1px solid var(--br);text-align:center;font-size:0.76rem;color:var(--t3)}

/* Animations */
@keyframes a-fadeUp{from{opacity:0;transform:translateY(45px)}to{opacity:1;transform:translateY(0)}}
@keyframes a-fadeDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}
@keyframes a-fadeLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}
@keyframes a-fadeRight{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
@keyframes a-zoomIn{from{opacity:0;transform:scale(0.82)}to{opacity:1;transform:scale(1)}}
.fadeUp,.fadeDown,.fadeLeft,.fadeRight,.zoomIn{opacity:0}
.fadeUp.revealed{animation:a-fadeUp 0.8s var(--e) forwards}
.fadeDown.revealed{animation:a-fadeDown 0.72s var(--e) forwards}
.fadeLeft.revealed{animation:a-fadeLeft 0.8s var(--e) forwards}
.fadeRight.revealed{animation:a-fadeRight 0.8s var(--e) forwards}
.zoomIn.revealed{animation:a-zoomIn 0.75s var(--e) forwards}

/* Responsive */
@media(max-width:1024px){
  .card-grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .stats-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .navbar-inner{padding:0 1.2rem}
  .hamburger{display:block}
  .nav-links{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;background:linear-gradient(180deg,rgba(6,7,15,0.98) 0%,rgba(10,14,26,0.99) 50%,rgba(8,10,20,0.98) 100%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-direction:column;justify-content:center;align-items:center;gap:0.2rem;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity 0.4s ease,visibility 0.4s ease,transform 0.4s cubic-bezier(0.16,1,0.3,1)}
  .nav-links.open{opacity:1;visibility:visible;transform:translateY(0)}
  .nav-link{font-size:1.35rem;font-weight:600;padding:0.85rem 2rem;letter-spacing:0.015em;text-transform:none;color:rgba(255,255,255,0.72);border-radius:8px;transition:all 0.3s ease}
  .nav-link:active,.nav-link.active{color:#fff;background:rgba(93,138,230,0.1)}
  .hero-content{padding:1rem}
  .hero-ctas{flex-direction:column;align-items:center}
  .home-section{padding:4rem 1.2rem}
  .home-section.alt{padding:4rem 1.2rem}
  .home-section.alt>*{padding-left:1.2rem;padding-right:1.2rem}
  .card-grid.cols-2,.card-grid.cols-3,.card-grid.cols-4,.feature-row,.biz-detail-row,.contact-layout{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr 1fr;gap:1rem}
  .stat-item{padding:1rem 0.5rem}
  .footer-inner{grid-template-columns:1fr 1fr}
  .footer-inner>*:first-child{grid-column:1/-1}
  .page-header{height:35dvh;min-height:260px}
  .page-body,.page-body-wide{padding:2.5rem 1.2rem}
  .contact-form .form-row{grid-template-columns:1fr}
}
@media(max-width:480px){
  .stats-row{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .biz-metrics{flex-direction:column;gap:1rem}
}