/* ============================================================
   Syntrix — Design System v2
   Theme: purple / magenta (from logo). Style: premium, glowy.
   ============================================================ */

:root {
    --syx-magenta: #E040A0;
    --syx-pink:    #FF5FC4;
    --syx-purple:  #A020B0;
    --syx-deep:    #4A0E52;
    --syx-night:   #120a16;
    --syx-ink:     #17111c;
    --syx-body:    #524c5e;
    --syx-line:    #eee9f3;
    --syx-bg:      #ffffff;
    --syx-bg-soft: #faf6fd;
    --syx-primary: #A020B0;
    --syx-grad:    #A020B0;
    --syx-grad-2:  --syx-primary;
    --syx-grad-soft: #f6e7fa;
    --syx-shadow:  0 24px 60px -22px rgba(74, 14, 82, .35);
    --syx-glow:    0 10px 40px -8px rgba(224, 64, 160, .55);
    --syx-radius:  20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--syx-body);
    background: var(--syx-bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

h1,h2,h3,h4,h5,h6 { color: var(--syx-ink); font-weight: 800; letter-spacing: -.025em; }
p { line-height: 1.75; }
a { text-decoration: none; }
section { position: relative; max-width: 100%; }
::selection { background: rgba(224,64,160,.22); }

.text-muted-2 { color: #948da3 !important; }
.text-grad {
    color: #E85AC0;
    -webkit-text-fill-color: #E85AC0;
}

/* animated gradient text (hero highlight) */
.text-grad-anim {
    background: linear-gradient(90deg,#FF5FC4,#E040A0,#A020B0,#E040A0,#FF5FC4);
    background-size: 250% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: syxShine 6s linear infinite;
}
@keyframes syxShine { to { background-position: 250% center; } }

/* ---------- Buttons ---------- */
.btn-syx-primary {
    background: var(--syx-grad-2);
    color: #fff; border: none; font-weight: 600;
    padding: .8rem 1.7rem; border-radius: 50px;
    box-shadow: var(--syx-glow);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
    position: relative;
}
.btn-syx-primary:hover { color:#fff; transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 18px 44px -10px rgba(224,64,160,.75); }
.btn-syx-outline {
    background: transparent; color: var(--syx-deep);
    border: 1.5px solid var(--syx-line); font-weight: 600;
    padding: .8rem 1.7rem; border-radius: 50px; transition: all .25s ease;
}
.btn-syx-outline:hover { border-color: var(--syx-magenta); color: var(--syx-magenta); transform: translateY(-3px); box-shadow: var(--syx-shadow); }
.btn-ghost-light { color:#fff; border:1.5px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); }
.btn-ghost-light:hover { color:#fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); transform: translateY(-3px); }

/* ---------- Navbar ---------- */
.navbar-brand img {
    max-width: 230px;
    height: auto;
}

.syx-nav {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
}
.syx-nav.scrolled { background: rgba(255,255,255,.9); box-shadow: 0 8px 30px -16px rgba(74, 14, 82, .35); border-bottom-color: var(--syx-line); padding: .5rem 0; }
.syx-logo { display:block; height: 40px; width:auto; }

/* ---------- Brand wordmark ---------- */
.syx-brand { display:inline-flex; align-items:center; gap:.6rem; line-height:1; }
.syx-brand-mark {
    width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
    background: var(--syx-grad-2); box-shadow: 0 8px 18px -8px rgba(160,32,176,.6);
    flex:0 0 auto;
}
.syx-brand-lockup { display:flex; flex-direction:column; line-height:1.05; }
.syx-brand-text {
    font-size:1.3rem; font-weight:800; letter-spacing:-.02em;
    background: var(--syx-grad-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.syx-brand-sub {
    font-size:.62rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
    color:#9a8ea6; margin-top:1px;
}
.syx-footer .syx-brand-text { background:none; -webkit-text-fill-color:#fff; color:#fff; }
.syx-footer .syx-brand-sub { color:#8a7f97; }
.syx-nav .nav-link { color:#241c30; font-weight:600; margin:0 .4rem; position:relative; }
.syx-nav .nav-link::after { content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px; background: var(--syx-grad-2); transform: scaleX(0); transform-origin:left; transition: transform .28s ease; }
.syx-nav .nav-link:hover,.syx-nav .nav-link.active { color: var(--syx-magenta); }
.syx-nav .nav-link.active::after { transform: scaleX(1); }
.navbar-toggler { border:none; font-size:1.7rem; color: var(--syx-deep); padding-right: 0; }
.navbar-toggler:focus { box-shadow:none; }

/* ============================================================
   HERO — dark, animated mesh (matches logo banner)
   ============================================================ */
.syx-hero {
    position: relative; padding: 12rem 0 8rem; color:#fff; overflow: hidden;
    background: #2a0b30;
    width: 100%;
    max-width: 100%;
}
.syx-hero::before { content:none; }
@keyframes syxDrift { 0%{transform:none} 100%{transform:none} }
/* subtle grid overlay */
.syx-hero::after {
    content:""; position:absolute; inset:0; z-index:0; opacity:.5;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 80%);
}
.syx-hero .container { 
    position: relative; 
    z-index: 2; 
}
.syx-hero h1 { color:#fff; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.04; font-weight: 800; }
.syx-hero .lead { font-size:1.22rem; color: rgba(255,255,255,.72); max-width: 560px; }
.syx-hero-stats span { color: rgba(255,255,255,.85); }
.syx-hero-stats i { color: var(--syx-pink); }

/* Absolute layout constraint grid updates to kill overflow margins */
.syx-hero .row {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.syx-hero .col-lg-6 {
    max-width: 100% !important;
    overflow-wrap: break-word;
}

.syx-eyebrow {
    display:inline-flex; align-items:center; gap:.55rem;
    background: rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(8px);
    font-weight:600; font-size:.82rem; padding:.5rem 1.05rem; border-radius:50px; margin-bottom:1.4rem;
    max-width: 100%;
    white-space: normal;
    text-align: left;
}
.syx-eyebrow .dot { width:8px; height:8px; border-radius:50%; background: var(--syx-pink); box-shadow:0 0 10px var(--syx-pink); animation: syxPulse 2s infinite; }
@keyframes syxPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }

/* hero visual — glowing orb + glass cards */
.syx-hero-orb {
    position: relative; aspect-ratio:1; max-width: 440px; margin:0 auto;
    background: var(--syx-grad); border-radius: 42% 58% 62% 38% / 46% 40% 60% 54%;
    box-shadow: 0 0 90px -10px rgba(224,64,160,.7), inset 0 0 60px rgba(255,255,255,.15);
    animation: syxMorph 12s ease-in-out infinite; display:grid; place-items:center;
}
.syx-hero-orb::after { content:""; position:absolute; inset:-30px; border-radius:inherit; border:1px solid rgba(255,95,196,.3); animation: syxMorph 12s ease-in-out infinite reverse; }
.syx-hero-orb .bi { font-size:6rem; color:#fff; opacity:.95; filter: drop-shadow(0 8px 20px rgba(0,0,0,.25)); }
@keyframes syxMorph {
    0%,100% { border-radius:42% 58% 62% 38% / 46% 40% 60% 54%; }
    50%     { border-radius:60% 40% 38% 62% / 56% 62% 38% 44%; }
}
.syx-float-card {
    position:absolute; background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,.6); border-radius:14px; padding:.7rem 1.05rem;
    box-shadow: 0 18px 40px -18px rgba(0,0,0,.5); font-weight:700; color: var(--syx-ink); font-size:.85rem;
    display:flex; align-items:center; gap:.5rem; animation: syxFloat 5s ease-in-out infinite;
    max-width: 90%;
}
.syx-float-card i { color: var(--syx-magenta); font-size:1.1rem; }
.syx-float-card.c1 { top:6%; left:-8%; }
.syx-float-card.c2 { bottom:10%; right:-10%; animation-delay:1.5s; }
.syx-float-card.c3 { bottom:42%; left:-12%; animation-delay:.8s; }
@keyframes syxFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

/* wave divider under hero */
.syx-hero-wave { position:absolute; left:0; right:0; bottom:-1px; z-index:2; line-height:0; }
.syx-hero-wave svg { width:100%; height:70px; display:block; }

/* ---------- Trusted ---------- */
.syx-trusted { padding: 2.5rem 0; background: var(--syx-bg); border-bottom: 1px solid var(--syx-line); }
.syx-trusted span { color:#c3bad0; font-weight:800; font-size:1.35rem; letter-spacing:.01em; transition: color .3s; }
.syx-trusted .col:hover span, .syx-trusted [class*=col-]:hover span { color: var(--syx-purple); }

/* ---------- Section base ---------- */
.syx-section { padding: 6.5rem 0; }
.syx-section.soft { background: var(--syx-bg-soft); }
.syx-head { max-width:660px; margin:0 auto 3.5rem; text-align:center; }
.syx-head h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.syx-head p { color:#948da3; font-size:1.1rem; }
.syx-tag {
    display:inline-block; color: var(--syx-magenta); font-weight:800;
    text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; margin-bottom:.85rem;
    padding:.3rem .8rem; border-radius:50px; background: var(--syx-grad-soft);
}

/* ---------- Service cards ---------- */
.syx-card {
    position: relative; background:#fff; border:1px solid var(--syx-line); border-radius: var(--syx-radius);
    padding: 2.1rem; height:100%; overflow:hidden;
    transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.syx-card::before {
    content:""; position:absolute; inset:0; padding:1.5px; border-radius:inherit;
    background: var(--syx-grad); opacity:0; transition:opacity .35s ease;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}
.syx-card:hover { transform: translateY(-8px); box-shadow: var(--syx-shadow); border-color: transparent; }
.syx-card:hover::before { opacity:1; }
.syx-icon {
    width:60px; height:60px; border-radius:16px; display:grid; place-items:center;
    background: var(--syx-grad-soft); color: var(--syx-purple); font-size:1.65rem; margin-bottom:1.25rem;
    transition: all .35s ease;
}
.syx-card:hover .syx-icon { background: var(--syx-grad-2); color:#fff; transform: rotate(-6deg) scale(1.05); box-shadow: var(--syx-glow); }
.syx-card h4 { font-size:1.27rem; margin-bottom:.6rem; }
.syx-card p { color:#7f7890; margin-bottom:0; font-size:.97rem; }

/* ---------- Feature split ---------- */
.syx-feature-visual {
    background: var(--syx-grad); border-radius:26px; padding:3rem; color:#fff;
    box-shadow: var(--syx-glow); position:relative; overflow:hidden;
}
.syx-feature-visual::after { content:""; position:absolute; width:240px; height:240px; border-radius:50%; background: rgba(255,255,255,.14); top:-70px; right:-70px; }
.syx-feature-visual::before { content:""; position:absolute; width:160px; height:160px; border-radius:50%; background: rgba(255,255,255,.1); bottom:-50px; left:-40px; }
.syx-feature-visual > * { position:relative; z-index:1; }
.syx-check { list-style:none; padding:0; margin:1.5rem 0 0; }
.syx-check li { display:flex; gap:.75rem; align-items:flex-start; margin-bottom:1rem; color: var(--syx-body); }
.syx-check i { color: var(--syx-magenta); font-size:1.28rem; margin-top:2px; }

/* ---------- Stats ---------- */
.syx-stats {
    position:relative; border-radius:30px; padding:3.8rem 2rem; color:#fff; overflow:hidden;
    background: #2a0b30;
    box-shadow: var(--syx-shadow);
}
.syx-stat .num { font-size:3rem; font-weight:800; color:#fff; }
.syx-stat .lbl { color:#e0cfe6; font-weight:500; }

/* ---------- Card with image (media) ---------- */
.syx-card-media { padding: 0; overflow: hidden; }
.syx-card-media > h4, .syx-card-media > p, .syx-card-media > .syx-card-link, .syx-card-media > .syx-check {
    padding-left: 1.8rem; padding-right: 1.8rem;
}
.syx-card-media > h4 { margin-top: 1.3rem; }
.syx-card-media > .syx-check { padding-bottom: 1.8rem; }
.syx-card-media > .syx-card-link { margin-bottom: 1.8rem; }
.syx-card-img { display: block; overflow: hidden; }
.syx-card-img img { width: 100%; height: 190px; object-fit: cover; display: block; transition: transform .5s ease; }
.syx-card-media:hover .syx-card-img img { transform: scale(1.06); }

/* ---------- Hero image ---------- */
.syx-hero-media { position: relative; }
.syx-hero-media img {
    width: 100%; height: auto; display: block; border-radius: 24px;
    box-shadow: 0 30px 70px -25px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.12);
    animation: syxFloat 6s ease-in-out infinite;
    max-width: 100%;
}

/* ---------- About image ---------- */
.syx-about-media img { width: 100%; height: auto; display: block; border-radius: 24px; box-shadow: var(--syx-shadow); }
.syx-mini-stat { background: var(--syx-bg-soft); border:1px solid var(--syx-line); border-radius:14px; padding:.9rem 1.1rem; }
.syx-mini-stat strong { display:block; font-size:1.6rem; font-weight:800; color: var(--syx-primary); line-height:1; }
.syx-mini-stat span { font-size:.85rem; color:#857e93; }

/* ---------- Parallax section ---------- */
.syx-parallax {
    position: relative; padding: 7rem 0; overflow: hidden;
    background-image: url('../img/parallax.svg');
    background-size: cover; background-position: center; background-attachment: fixed;
}
.syx-parallax-overlay { position:absolute; inset:0; background: rgba(20,7,24,.55); }
.syx-parallax-inner { position: relative; z-index: 1; }
.syx-parallax h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
/* fixed attachment is janky on mobile -> scroll */
@media (max-width: 991px) { .syx-parallax { background-attachment: scroll; } }

/* ---------- Service card "Learn more" link ---------- */
.syx-card-link {
    display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem;
    font-weight:700; font-size:.9rem; color: var(--syx-magenta);
    opacity:.9; transition: gap .25s ease;
}
.syx-card-link i { transition: transform .25s ease; }
.syx-card:hover .syx-card-link { gap:.65rem; }
.syx-card:hover .syx-card-link i { transform: translateX(3px); }

/* ============================================================
   Service LIST (home) — editorial rows, not the usual cards
   ============================================================ */
.syx-list {
    max-width: 900px; margin: 0 auto;
    border-top: 1px solid var(--syx-line);
}
.syx-list-row {
    display: grid; grid-template-columns: auto 52px 1fr auto; align-items: center; gap: 1.5rem;
    padding: 1.5rem 1rem; border-bottom: 1px solid var(--syx-line);
    color: inherit; position: relative; transition: background .3s ease, padding .3s ease;
}
.syx-list-row::before {
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--syx-grad-2);
    transform: scaleY(0); transform-origin: center; transition: transform .3s ease; border-radius:3px;
}
.syx-list-row:hover { background: var(--syx-bg-soft); padding-left: 1.6rem; }
.syx-list-row:hover::before { transform: scaleY(1); }
.syx-list-row .idx { font-weight: 800; font-size: .9rem; color: #cbb7d6; letter-spacing:.05em; }
.syx-list-row:hover .idx { color: var(--syx-magenta); }
.syx-list-row .ico {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: var(--syx-grad-soft); color: var(--syx-purple); font-size: 1.4rem; transition: all .3s ease;
}
.syx-list-row:hover .ico { background: var(--syx-grad-2); color: #fff; }
.syx-list-row .body { display: flex; flex-direction: column; gap: .15rem; }
.syx-list-row .t { font-weight: 700; font-size: 1.18rem; color: var(--syx-ink); }
.syx-list-row .d { color: #857e93; font-size: .95rem; }
.syx-list-row .arw {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid var(--syx-line); color: var(--syx-purple); transition: all .3s ease;
}
.syx-list-row:hover .arw { background: var(--syx-grad-2); color: #fff; border-color: transparent; transform: translateX(4px); }

/* ============================================================
   Process FLOW (home) — clean vertical stepper
   ============================================================ */
.syx-flow { position: relative; padding-left: .5rem; }
.syx-flow-item { display: grid; grid-template-columns: 66px 1fr; gap: 1.4rem; position: relative; padding-bottom: 2.4rem; }
.syx-flow-item::before {
    content:""; position:absolute; left:32px; top:66px; bottom:-6px; width:2px;
    background: var(--syx-primary); opacity:.25;
}
.syx-flow-item:last-child { padding-bottom: 0; }
.syx-flow-item:last-child::before { display: none; }
.syx-flow-num {
    width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
    font-weight: 800; font-size: 1.25rem; color: #fff; background: var(--syx-grad-2);
    box-shadow: 0 12px 26px -14px rgba(160,32,176,.7); position: relative; z-index: 1;
}
.syx-flow-body { padding-top: .4rem; }
.syx-flow-body h4 { font-size: 1.3rem; margin-bottom: .35rem; }
.syx-flow-body p { color: #7f7890; margin: 0; }

/* ============================================================
   Service rows (services page) — expanded editorial rows
   ============================================================ */
.syx-slist { max-width: 960px; margin: 0 auto; display: grid; gap: 1.2rem; }
.syx-srow {
    background: #fff; border: 1px solid var(--syx-line); border-radius: 18px; padding: 1.8rem 2rem;
    transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.syx-srow:hover { box-shadow: var(--syx-shadow); border-color: transparent; transform: translateY(-3px); }
.syx-srow-head { display: flex; gap: 1.1rem; align-items: flex-start; }
.syx-srow-head .ico {
    flex: 0 0 auto; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
    background: var(--syx-grad-soft); color: var(--syx-purple); font-size: 1.5rem; transition: all .3s ease;
}
.syx-srow:hover .ico { background: var(--syx-grad-2); color: #fff; }
.syx-srow-head h4 { font-size: 1.25rem; margin-bottom: .2rem; }
.syx-srow-head p { color: #857e93; margin: 0; font-size: .97rem; }
.syx-srow-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; padding-left: calc(54px + 1.1rem); }
.syx-srow-tags .tag {
    font-size: .82rem; font-weight: 600; color: var(--syx-deep);
    background: var(--syx-grad-soft); border: 1px solid #f0dcf5; padding: .32rem .8rem; border-radius: 50px;
}
.syx-srow-tags .tag i { color: var(--syx-magenta); }

/* ---------- CTA band ---------- */
.syx-cta {
    position:relative; border-radius:30px; padding:4.5rem 2rem; text-align:center; color:#fff; overflow:hidden;
    background: var(--syx-primary);
    box-shadow: var(--syx-glow);
}
.syx-cta::after {
    content:""; position:absolute; inset:0; opacity:.4;
    background-image: linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 75%);
            mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 75%);
}
.syx-cta > * { position:relative; z-index:1; }
.syx-cta h2 { color:#fff; font-size: clamp(1.9rem,3.2vw,2.8rem); }
.syx-cta p { color: rgba(255,255,255,.92); }
.syx-cta .btn-syx-primary { background:#fff; color: var(--syx-deep); box-shadow: 0 14px 34px -12px rgba(0,0,0,.4); }
.syx-cta .btn-syx-primary:hover { color: var(--syx-magenta); }

/* ---------- Testimonials ---------- */
.syx-quote { position:relative; background:#fff; border:1px solid var(--syx-line); border-radius: var(--syx-radius); padding:2.1rem; height:100%; transition: transform .3s, box-shadow .3s; }
.syx-quote:hover { transform: translateY(-6px); box-shadow: var(--syx-shadow); }
.syx-quote .stars { color:#ffb020; margin-bottom:.8rem; }
.syx-quote p { color: var(--syx-ink); font-weight:500; }
.syx-quote .who { display:flex; align-items:center; gap:.8rem; margin-top:1.2rem; }
.syx-quote .who .av { width:46px; height:46px; border-radius:50%; background: var(--syx-grad-2); color:#fff; display:grid; place-items:center; font-weight:700; box-shadow: var(--syx-glow); }

/* ---------- Inner page hero ---------- */
.syx-page-hero {
    position:relative; padding:11rem 0 5rem; text-align:center; color:#fff; overflow:hidden;
    background: #2a0b30;
}
.syx-page-hero::after {
    content:""; position:absolute; inset:0; opacity:.5;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 40%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 40%, transparent 80%);
}
.syx-page-hero .container { position:relative; z-index:1; }
.syx-page-hero h1 { color:#fff; font-size: clamp(2.4rem,4.2vw,3.4rem); }
.syx-page-hero p { color: rgba(255,255,255,.72); max-width:640px; margin:1rem auto 0; font-size:1.12rem; }
.syx-breadcrumb { color: rgba(255,255,255,.55); font-weight:600; font-size:.9rem; }
.syx-breadcrumb a { color: var(--syx-pink); }
.syx-page-wave { position:absolute; left:0; right:0; bottom:-1px; z-index:1; line-height:0; }
.syx-page-wave svg { width:100%; height:60px; display:block; }

/* ---------- Contact ---------- */
.syx-form-card { background:#fff; border:1px solid var(--syx-line); border-radius:26px; padding:2.7rem; box-shadow: var(--syx-shadow); }
.form-control,.form-select { border-radius:14px; border:1.5px solid var(--syx-line); padding:.85rem 1rem; font-weight:500; background:#fdfbff; }
.form-control:focus,.form-select:focus { border-color: var(--syx-magenta); box-shadow:0 0 0 .22rem rgba(224,64,160,.13); background:#fff; }
.syx-contact-info-card { position:relative; overflow:hidden; background: var(--syx-grad); color:#fff; border-radius:26px; padding:2.7rem; height:100%; box-shadow: var(--syx-glow); }
.syx-contact-info-card::after { content:""; position:absolute; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.12); bottom:-70px; right:-60px; }
.syx-contact-info-card > * { position:relative; z-index:1; }
.syx-contact-info-card .item { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.6rem; }
.syx-contact-info-card .item i { font-size:1.4rem; }

/* ---------- Footer ---------- */
.syx-footer { position:relative; background: #0d0712; color:#b6adc2; padding:5rem 0 2rem; overflow:hidden; }
.syx-footer::before { content:none; }
.syx-footer .container { position:relative; z-index:1; }
.syx-footer h6 { color:#fff; font-weight:700; margin-bottom:1.1rem; letter-spacing:.02em; }
.syx-footer ul { list-style:none; padding:0; margin:0; }
.syx-footer ul li { margin-bottom:.6rem; }
.syx-footer ul li a { color:#9a90ab; transition:color .2s; }
.syx-footer ul li a:hover { color: var(--syx-pink); }
.syx-footer-tag { color:#fff; font-weight:600; }
.syx-contact-list li { color:#9a90ab; margin-bottom:.6rem; }
.syx-contact-list i { color: var(--syx-magenta); margin-right:.4rem; }
.syx-footer-divider { border-color:#271d31; margin:2.5rem 0 1.5rem; }
.syx-social { display:flex; gap:.6rem; margin-top:1.2rem; }
.syx-social a { width:40px; height:40px; border-radius:12px; background:#221830; color:#c9bdd6; display:grid; place-items:center; transition:all .25s; }
.syx-social a:hover { background: var(--syx-grad-2); color:#fff; transform: translateY(-4px); box-shadow: var(--syx-glow); }

/* ---------- Back to top ---------- */
.syx-top { position:fixed; right:22px; bottom:22px; width:48px; height:48px; border:none; border-radius:50%; background: var(--syx-grad-2); color:#fff; font-size:1.2rem; box-shadow: var(--syx-glow); opacity:0; visibility:hidden; transform: translateY(10px); transition:all .3s; z-index:999; }
.syx-top.show { opacity:1; visibility:visible; transform: translateY(0); }
.syx-top:hover { transform: translateY(-3px); }

/* ---------- Responsive & Layout Overrides ---------- */
@media (max-width: 991px) {
    .syx-nav { background: rgba(255,255,255,.97); width: 100%; }
    .navbar-collapse { padding-top:1rem; }
    .syx-nav .btn-syx-primary { margin-top:.6rem; display:inline-block; }
    .syx-hero { padding:9rem 0 6rem; text-align:center; }
    .syx-hero .lead { margin-inline:auto; }
    .syx-hero-stats { justify-content:center; }
    .syx-hero-orb { margin-top:3.5rem; max-width:320px; }
    
    /* Absolute fixed boundary adjustments for tablet views */
    .syx-float-card.c1 { left: 15px !important; } 
    .syx-float-card.c2 { right: 15px !important; } 
    .syx-float-card.c3 { display: none; }
    
    .navbar-brand img {
        max-width: 170px;
    }
}

@media (max-width: 575px) {
    .syx-list-row { grid-template-columns: auto 1fr auto; gap: 1rem; }
    .syx-list-row .ico { display: none; }
    .syx-srow-tags { padding-left: 0; }
    .syx-srow { padding: 1.4rem; }
    .syx-cta,.syx-stats { padding:2.6rem 1.3rem; }
    
    /* Clean layout boundaries explicitly for mobile containers */
    .syx-hero .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .navbar-brand {
        padding-left: 5px !important;
    }
    
    .syx-float-card { display: none !important; }
    .syx-form-card,.syx-contact-info-card { padding:1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { animation:none !important; transition:none !important; }
    html { scroll-behavior:auto; }
}