/*
 * Orion Digital Co. — CSS v3
 * Rebuilt: clean, premium, Fantasy.co inspired
 */

/* ============================================================
   1. VARIABLES & RESET
   ============================================================ */
:root {
    --bg:        #070710;
    --bg-2:      #0c0c1a;
    --bg-card:   rgba(255,255,255,0.04);
    --white:     #ffffff;
    --muted:     rgba(255,255,255,0.5);
    --accent:    #00d2ff;
    --accent-2:  #3a7bd5;
    --gradient:  linear-gradient(135deg,#00d2ff 0%,#3a7bd5 100%);
    --border:    rgba(255,255,255,0.08);
    --glass:     rgba(255,255,255,0.05);
    --font-h:    'Outfit',sans-serif;
    --font-b:    'Inter',sans-serif;
    --ease:      cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after { margin:0;padding:0;box-sizing:border-box; }
html { scroll-behavior:auto; }

body {
    background:var(--bg);
    color:var(--white);
    font-family:var(--font-b);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

img { max-width:100%;display:block; }
a  { color:inherit;text-decoration:none; }
ul { list-style:none; }

/* ============================================================
   2. TYPOGRAPHY — ALL TEXT WHITE
   ============================================================ */
h1,h2,h3,h4,h5,h6 {
    font-family:var(--font-h);
    font-weight:800;
    line-height:1.05;
    color:var(--white);
}

p, li, span, label, td, th { color:var(--white); }

.text-muted  { color:var(--muted) !important; }

.text-gradient {
    background:var(--gradient);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.eyebrow {
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--muted);
    display:block;
}

.display-section {
    font-size:clamp(2.5rem,5vw,6rem);
    letter-spacing:-.02em;
    line-height:1;
}

/* ============================================================
   3. LAYOUT
   ============================================================ */
.container-edge {
    width:100%;
    padding-left:clamp(1.5rem,5vw,5rem);
    padding-right:clamp(1.5rem,5vw,5rem);
}

.section-pad    { padding:clamp(5rem,9vw,9rem) 0; }
.section-pad-sm { padding:clamp(3rem,5vw,5rem) 0; }

/* ============================================================
   4. PAGE LOADER — Logo Shine (Fantasy.co style)
   ============================================================ */
.page-loader {
    position:fixed;
    inset:0;
    background:var(--bg);
    z-index:99999;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1.5rem;
}

.loader-logo {
    font-family:var(--font-h);
    font-size:clamp(2rem,5vw,3.5rem);
    font-weight:800;
    position:relative;
    overflow:hidden;
    color:var(--white);
    letter-spacing:.05em;
}

/* Shine sweep effect */
.loader-logo::after {
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:60%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
    animation:shine-sweep 1.2s ease 0.3s forwards;
}

@keyframes shine-sweep {
    0%   { left:-100%; }
    100% { left:200%; }
}

.loader-bar {
    width:200px;
    height:2px;
    background:var(--border);
    border-radius:2px;
    overflow:hidden;
}

.loader-bar-fill {
    height:100%;
    background:var(--gradient);
    border-radius:2px;
    animation:load-fill 1s ease forwards;
}

@keyframes load-fill {
    from { width:0; }
    to   { width:100%; }
}

.page-loader.hidden {
    opacity:0;
    pointer-events:none;
    transform:translateY(-12px);
    transition:opacity .6s ease, transform .6s ease;
}

/* Scrollbar */
::-webkit-scrollbar       { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--accent);border-radius:4px; }

/* ============================================================
   5. NAVBAR
   ============================================================ */
.navbar-orion {
    position:fixed;
    top:0;left:0;
    width:100%;
    z-index:1000;
    padding:1.75rem 0;
    transition:padding .4s var(--ease),background .4s,border .4s;
}

.navbar-orion.scrolled {
    padding:1rem 0;
    background:rgba(7,7,16,.85);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
}

.navbar-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.nav-logo {
    font-family:var(--font-h);
    font-size:1.15rem;
    font-weight:800;
    letter-spacing:.04em;
    color:var(--white);
    flex-shrink:0;
}

.nav-links {
    display:flex;
    gap:2.5rem;
    align-items:center;
}

.nav-links a {
    font-size:.8rem;
    font-weight:500;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--muted);
    transition:color .3s;
}

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

.nav-right { display:flex;align-items:center;gap:1rem; }

.nav-cta {
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.6rem 1.4rem;
    background:var(--white);
    color:var(--bg) !important;
    border-radius:100px;
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.04em;
    transition:all .3s var(--ease);
    white-space:nowrap;
}

.nav-cta:hover {
    background:var(--accent);
    color:var(--white) !important;
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,210,255,.3);
}

.nav-call {
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.55rem 1.1rem;
    border:1px solid var(--border);
    border-radius:100px;
    font-size:.78rem;
    font-weight:500;
    color:var(--white);
    transition:all .3s;
    white-space:nowrap;
}

.nav-call:hover {
    border-color:rgba(0,210,255,.4);
    color:var(--accent);
}

.nav-mobile-toggle {
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    padding:5px;
    background:none;
    border:none;
}

.nav-mobile-toggle span {
    display:block;
    width:24px;height:2px;
    background:var(--white);
    border-radius:2px;
    transition:all .3s;
}

/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn-primary-orion {
    display:inline-flex;
    align-items:center;
    gap:.75rem;
    padding:.9rem 1.8rem;
    background:var(--gradient);
    color:var(--white) !important;
    border-radius:100px;
    font-weight:700;
    font-size:.9rem;
    letter-spacing:.04em;
    transition:all .35s var(--ease);
    border:none;
    cursor:pointer;
    font-family:var(--font-b);
}

.btn-primary-orion:hover {
    transform:translateY(-3px);
    box-shadow:0 16px 40px rgba(0,210,255,.3);
    color:var(--white) !important;
}

.btn-outline-orion {
    display:inline-flex;
    align-items:center;
    gap:.75rem;
    padding:.9rem 1.8rem;
    border:1px solid var(--border);
    color:var(--white) !important;
    border-radius:100px;
    font-weight:500;
    font-size:.9rem;
    transition:all .35s var(--ease);
}

.btn-outline-orion:hover {
    border-color:rgba(255,255,255,.3);
    background:rgba(255,255,255,.05);
    transform:translateY(-2px);
    color:var(--white) !important;
}

/* ============================================================
   7. HERO
   ============================================================ */
.hero {
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    padding-top:6rem; /* navbar offset */
}

#starfield {
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
}

/* Orb — right side */
.hero-orb {
    position:absolute;
    top:50%;
    right:5%;
    transform:translateY(-50%);
    width:clamp(280px,38vw,560px);
    height:clamp(280px,38vw,560px);
    z-index:1;
    pointer-events:none;
}

.orb-core {
    position:absolute;inset:0;border-radius:50%;
    background:radial-gradient(circle at 40% 40%,rgba(0,210,255,.22),rgba(58,123,213,.08) 60%,transparent 80%);
    animation:orb-breathe 9s ease-in-out infinite;
}

.orb-ring-1 {
    position:absolute;inset:8%;border-radius:50%;
    border:1px solid rgba(0,210,255,.18);
    animation:orb-rotate 22s linear infinite;
}

.orb-ring-2 {
    position:absolute;inset:22%;border-radius:50%;
    border:1px solid rgba(0,210,255,.1);
    animation:orb-rotate 34s linear infinite reverse;
}

.orb-dot {
    position:absolute;width:10px;height:10px;
    background:var(--accent);border-radius:50%;
    box-shadow:0 0 20px var(--accent),0 0 40px rgba(0,210,255,.5);
    top:50%;right:-5px;transform:translateY(-50%);
}

.orb-img {
    position:absolute;inset:14%;border-radius:50%;overflow:hidden;
    border:1px solid rgba(0,210,255,.12);
}

.orb-img img { width:100%;height:100%;object-fit:cover;opacity:.85; }

@keyframes orb-breathe {
    0%,100% { transform:scale(1); }
    50%      { transform:scale(1.06); }
}
@keyframes orb-rotate {
    from { transform:rotate(0deg); }
    to   { transform:rotate(360deg); }
}

/* Hero content — left side, properly centered */
.hero-inner {
    position:relative;
    z-index:2;
    width:100%;
    padding-bottom: 10px;
}

.hero-content-box {
    max-width:55%;
}

.hero-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.4rem 1rem;
    border:1px solid var(--border);
    border-radius:100px;
    font-size:.72rem;
    font-weight:500;
    color:var(--muted);
    letter-spacing:.12em;
    margin-bottom:2rem;
}

.hero-live-dot {
    width:6px;height:6px;
    background:var(--accent);
    border-radius:50%;
    animation:pulse-dot 2s infinite;
    flex-shrink:0;
}

@keyframes pulse-dot {
    0%,100% { opacity:1;transform:scale(1); }
    50%      { opacity:.4;transform:scale(.7); }
}

/* BIG HEADLINE — always visible, no GSAP opacity dependency */
.hero-h1 {
    font-size:clamp(2rem,5vw,7.5rem);
    line-height:.98;
    letter-spacing:-.03em;
    margin-bottom:2rem;
    color:var(--white);
    /* NO overflow:hidden — text is always readable */
}

.hero-sub {
    font-size:clamp(1rem,1.4vw,1.2rem);
    color:rgba(255,255,255,.6);
    max-width:520px;
    line-height:1.85;
    margin-bottom:2.75rem;
}

.hero-sub strong { color:var(--white); }

.hero-btns {
    display:flex;
    gap:1.25rem;
    align-items:center;
    flex-wrap:wrap;
}

/* ============================================================
   8. STATS TICKER
   ============================================================ */
.stats-ticker {
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:1.25rem 0;
    overflow:hidden;
    background:var(--bg-2);
}

.ticker-track {
    display:flex;
    gap:0;
    animation:ticker-marq 40s linear infinite;
    width:max-content;
}

.ticker-track:hover { animation-play-state:paused; }

.ticker-item {
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:0 2.5rem;
    border-right:1px solid var(--border);
    white-space:nowrap;
}

.ticker-dot {
    color:var(--accent);
    font-size:.8rem;
}

.ticker-label {
    font-size:.82rem;
    font-weight:600;
    color:var(--white);
    text-transform:uppercase;
    letter-spacing:.08em;
}

@keyframes ticker-marq {
    from { transform:translateX(0); }
    to   { transform:translateX(-33.333%); }
}

/* ============================================================
   9. FEATURED WORK — CSS Horizontal Scroll (no empty space!)
   ============================================================ */
.work-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:3rem;
    gap:2rem;
    flex-wrap:wrap;
}

/* CSS scroll-snap — no GSAP pin, no blank space */
.work-scroll-css {
    display:flex;
    gap:1.5rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding-bottom:1.5rem;
    cursor:grab;
    -webkit-overflow-scrolling:touch;
}

.work-scroll-css:active { cursor:grabbing; }

/* Hide scrollbar but keep scroll */
.work-scroll-css::-webkit-scrollbar { height:3px; }
.work-scroll-css::-webkit-scrollbar-track { background:var(--border); border-radius:3px; }
.work-scroll-css::-webkit-scrollbar-thumb { background:var(--accent); border-radius:3px; }

.work-card-css {
    flex:0 0 clamp(280px,40vw,560px);
    height:clamp(280px,42vh,520px);
    border-radius:20px;
    overflow:hidden;
    position:relative;
    scroll-snap-align:start;
    display:block;
    cursor:pointer;
}

.work-card-css img {
    width:100%;height:100%;object-fit:cover;
    transition:transform .8s var(--ease), filter .4s;
    filter:brightness(.7);
    display:block;
}

.work-card-css:hover img {
    transform:scale(1.06);
    filter:brightness(.9);
}

.work-card-css-info {
    position:absolute;bottom:0;left:0;right:0;
    padding:2rem;
    background:linear-gradient(transparent,rgba(0,0,0,.75));
}

.work-card-cat {
    display:block;
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.15em;
    color:var(--accent) !important;
    margin-bottom:.4rem;
    font-weight:600;
}

.work-card-css-info h3 {
    font-size:clamp(1.1rem,2vw,1.5rem);
    color:var(--white);
    margin-bottom:.3rem;
}

.work-card-result {
    font-size:.78rem;
    color:rgba(255,255,255,.5) !important;
}

/* Drag to scroll JS-free */
.work-scroll-css {
    user-select:none;
}

/* ============================================================
   10. SERVICES (What We Do)
   ============================================================ */
.services-layout {
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:5rem;
    align-items:start;
}

.service-list { border-top:1px solid var(--border); }

.service-row {
    display:flex;
    align-items:center;
    gap:1.5rem;
    padding:1.6rem 0;
    border-bottom:1px solid var(--border);
    transition:all .35s var(--ease);
    position:relative;
    overflow:hidden;
    cursor:pointer;
}

/* Animated underline on hover */
.service-row::after {
    content:'';
    position:absolute;bottom:0;left:0;
    width:0;height:1px;
    background:var(--gradient);
    transition:width .5s var(--ease);
}

.service-row:hover::after { width:100%; }
.service-row:hover { padding-left:1rem; }

.service-num {
    font-size:.7rem;font-weight:700;
    color:var(--muted);
    width:2.5rem;flex-shrink:0;
    font-family:var(--font-h);
}

.service-name {
    font-family:var(--font-h);
    font-size:clamp(1.1rem,2.2vw,2.2rem);
    font-weight:800;
    flex:1;
    color:var(--white);
    transition:color .3s;
}

.service-row:hover .service-name { color:var(--accent); }

.service-arrow {
    width:36px;height:36px;
    border-radius:50%;
    border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    color:var(--muted);font-size:.7rem;
    flex-shrink:0;
    transition:all .3s;
}

.service-row:hover .service-arrow {
    background:var(--accent);
    border-color:var(--accent);
    color:var(--white) !important;
    transform:rotate(45deg);
}

/* ============================================================
   11. CLIENT LOGOS MARQUEE
   ============================================================ */
.clients-marquee {
    overflow:hidden;
    mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent);
    -webkit-mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent);
}

.clients-track {
    display:flex;
    gap:0;
    animation:clients-marq 45s linear infinite;
    width:max-content;
}

.clients-track:hover { animation-play-state:paused; }

.client-logo-item {
    padding:0 3rem;
    border-right:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    height:72px;
    white-space:nowrap;
}

.client-logo-text {
    font-family:var(--font-h);
    font-size:1rem;font-weight:700;
    color:rgba(255,255,255,.18) !important;
    letter-spacing:.1em;
    text-transform:uppercase;
    transition:color .3s;
}

.client-logo-item:hover .client-logo-text {
    color:var(--white) !important;
}

@keyframes clients-marq {
    from { transform:translateX(0); }
    to   { transform:translateX(-33.333%); }
}

/* ============================================================
   12. MOTIVE (About teaser)
   ============================================================ */
.motive-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5rem;
    align-items:center;
}

.motive-img-wrap {
    position:relative;
    border-radius:20px;overflow:hidden;
    aspect-ratio:4/3;
}

.motive-img-wrap img {
    width:100%;height:100%;object-fit:cover;filter:brightness(.75);
}

.motive-badge {
    position:absolute;bottom:1.5rem;left:1.5rem;
    padding:.4rem 1rem;
    background:rgba(7,7,16,.7);
    backdrop-filter:blur(10px);
    border:1px solid var(--border);
    border-radius:100px;
    font-size:.7rem;
    color:var(--accent) !important;
    letter-spacing:.1em;
    font-weight:600;
}

.motive-stats {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2rem;
    margin-top:3rem;
    padding-top:2.5rem;
    border-top:1px solid var(--border);
}

.stat-num {
    font-family:var(--font-h);
    font-size:clamp(2rem,4vw,3.5rem);
    font-weight:800;
    background:var(--gradient);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    line-height:1;
    margin-bottom:.25rem;
}

.stat-label {
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--muted);
}

/* ============================================================
   13. PROCESS CARDS
   ============================================================ */
.process-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.5rem;
    margin-top:3.5rem;
}

.process-card {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:18px;
    padding:2rem;
    transition:all .35s var(--ease);
    position:relative;overflow:hidden;
}

.process-card::after {
    content:'';
    position:absolute;bottom:0;left:0;right:0;
    height:2px;background:var(--gradient);
    transform:scaleX(0);transition:transform .4s var(--ease);
    transform-origin:left;
}

.process-card:hover::after  { transform:scaleX(1); }
.process-card:hover         { transform:translateY(-5px);border-color:rgba(0,210,255,.2); }

.process-step-num {
    font-family:var(--font-h);
    font-size:2.8rem;font-weight:800;
    background:var(--gradient);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    line-height:1;margin-bottom:1rem;
}

.process-card h4 { font-size:1.05rem;margin-bottom:.65rem;color:var(--white); }
.process-card p  { font-size:.875rem;color:rgba(255,255,255,.5);line-height:1.75; }

/* ============================================================
   14. INDUSTRIES
   ============================================================ */
.industries-grid {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:1rem;
    margin-top:3rem;
}

.industry-card {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:1.75rem 1rem;
    text-align:center;
    transition:all .35s var(--ease);
    cursor:pointer;
}

.industry-card:hover {
    border-color:rgba(0,210,255,.3);
    background:rgba(0,210,255,.04);
    transform:translateY(-5px);
}

.industry-icon {
    font-size:1.8rem;
    background:var(--gradient);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-bottom:.65rem;
}

.industry-card p {
    font-size:.72rem;font-weight:600;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--white) !important;
    margin:0;
}

/* ============================================================
   15. TESTIMONIALS
   ============================================================ */
.testimonials-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}

.testimonial-card {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:18px;
    padding:2rem;
    transition:all .35s var(--ease);
}

.testimonial-card:hover {
    border-color:rgba(0,210,255,.2);
    transform:translateY(-4px);
}

.testimonial-stars {
    display:flex;gap:.25rem;margin-bottom:1rem;
}

.testimonial-stars i { color:#f0b429 !important;font-size:.85rem; }

.testimonial-text {
    font-size:.95rem;
    line-height:1.85;
    color:rgba(255,255,255,.65) !important;
    margin-bottom:1.5rem;
    font-style:italic;
}

.testimonial-author { display:flex;align-items:center;gap:.85rem; }

.testimonial-avatar {
    width:42px;height:42px;border-radius:50%;
    background:var(--gradient);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-h);font-weight:800;
    font-size:1rem;color:var(--white);flex-shrink:0;
}

.testimonial-name {
    font-weight:700;font-size:.9rem;color:var(--white) !important;
}

.testimonial-role {
    font-size:.75rem;color:var(--muted) !important;margin-top:.1rem;
}

/* ============================================================
   16. CONTACT FORM
   ============================================================ */
.contact-grid {
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:5rem;
    align-items:start;
}

.form-orion {
    display:flex;flex-direction:column;gap:1.1rem;
}

.form-row-2 {
    display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;
}

.form-input-orion {
    width:100%;
    padding:1rem 1.25rem;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--white);
    font-family:var(--font-b);
    font-size:.925rem;
    outline:none;
    transition:border-color .3s,background .3s;
    resize:none;
    -webkit-appearance: none;
    appearance: none;
}

.form-input-orion::placeholder { color:var(--muted); }
.form-input-orion option       { background:var(--bg-2);color:var(--white); }

.form-input-orion:focus {
    border-color:rgba(0,210,255,.4);
    background:rgba(0,210,255,.04);
}

/* ============================================================
   17. FOOTER (Premium 4-column layout)
   ============================================================ */
.footer-orion {
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    padding: clamp(5rem,8vw,8rem) 0 2.5rem;
}

/* Big split CTA */
.footer-cta-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding-bottom: 5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 5rem;
}

.footer-grow-text {
    font-family: var(--font-h);
    font-size: clamp(4rem,9vw,10rem);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.04em;
}

.footer-cta-desc {
    font-size: 1.1rem;
    color: rgba(255,255,255,.5) !important;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.footer-cta-btns {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* 4-col nav grid */
.footer-cols {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.footer-brand-name {
    font-family: var(--font-h);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .04em;
    margin-bottom: 1rem;
    color: var(--white);
}

.footer-tagline {
    font-size: .875rem;
    color: rgba(255,255,255,.4) !important;
    line-height: 1.8;
    margin-bottom: 1.75rem;
}

.footer-socials {
    display: flex;
    gap: .75rem;
}

.footer-social-icon {
    width: 38px;height: 38px;
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;align-items: center;justify-content: center;
    font-size: .85rem;
    color: var(--muted);
    transition: all .3s var(--ease);
}

.footer-social-icon:hover {
    border-color: rgba(0,210,255,.4);
    color: var(--accent) !important;
    background: rgba(0,210,255,.08);
    transform: translateY(-2px);
}

.footer-col-title {
    font-family: var(--font-h);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--white);
    margin-bottom: 1.5rem;
}

.footer-nav-col ul { display: flex;flex-direction: column;gap: .75rem; }

.footer-nav-col ul li a {
    font-size: .875rem;
    color: rgba(255,255,255,.45);
    transition: color .3s;
    display: inline-flex;align-items: center;
}

.footer-nav-col ul li a:hover { color: var(--white); }

/* Bottom bar */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom-links {
    display: flex;gap: 2rem;
}

.footer-bottom-links a {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    transition: color .3s;
}

.footer-bottom-links a:hover { color: var(--white); }

.footer-copy {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

/* Footer responsive */
@media(max-width:1024px) {
    .footer-cta-block   { grid-template-columns: 1fr; gap: 2.5rem; }
    .footer-cols        { grid-template-columns: 1fr 1fr; }
}
@media(max-width:600px) {
    .footer-cols        { grid-template-columns: 1fr; }
    .footer-grow-text   { font-size: 3.5rem; }
    .footer-bottom      { flex-direction: column; text-align: center; }
    .footer-bottom-links{ justify-content: center; }
    .footer-cta-btns    { flex-direction: column; }
    .footer-cta-btns a  { text-align: center; justify-content: center; }
}

/* ============================================================
   18. FLOATING BUTTONS (WhatsApp + Call)
   ============================================================ */
.floating-actions {
    position:fixed;bottom:1.75rem;right:1.75rem;
    display:flex;flex-direction:column;gap:.6rem;z-index:999;
}

.fab-btn {
    width:50px;height:50px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:1.2rem;transition:all .3s var(--ease);
    box-shadow:0 5px 20px rgba(0,0,0,.35);
    border:none;cursor:pointer;
}

.fab-wa   { background:#25d366; }
.fab-call { background:var(--gradient); }

.fab-btn i { color:var(--white) !important; }

.fab-btn:hover { transform:scale(1.1) translateY(-2px); }

/* ============================================================
   19. PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
    padding-top:11rem;
    padding-bottom:clamp(4rem,6vw,6rem);
    position:relative;overflow:hidden;
}

.page-hero::before {
    content:'';
    position:absolute;top:0;left:0;right:0;bottom:0;
    background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(0,210,255,.07),transparent);
    pointer-events:none;
}

/* ============================================================
   20. MOBILE MENU
   ============================================================ */
.mobile-menu {
    position:fixed;inset:0;
    background:var(--bg);z-index:999;
    display:flex;flex-direction:column;
    justify-content:center;align-items:center;
    gap:2rem;
    transform:translateX(100%);
    transition:transform .5s var(--ease);
}

.mobile-menu.open { transform:translateX(0); }

.mobile-menu a {
    font-family:var(--font-h);
    font-size:clamp(2rem,8vw,3rem);
    font-weight:800;
    color:var(--white);
    transition:color .3s;
}

.mobile-menu a:hover { color:var(--accent); }

/* Two-col grid (Why Us section) */
.two-col-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5rem;
    align-items:center;
}

/* Service card grid (used in services.php) */
.service-card-grid {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:18px;
    padding:2.25rem;
    transition:all .35s var(--ease);
}

.service-card-grid:hover {
    border-color:rgba(0,210,255,.25);
    transform:translateY(-5px);
    background:rgba(0,210,255,.03);
}

/* Portfolio cards */
.portfolio-item-card {
    position:relative;border-radius:18px;
    overflow:hidden;cursor:pointer;aspect-ratio:16/10;
}

.portfolio-item-card img {
    width:100%;height:100%;object-fit:cover;
    transition:transform .8s var(--ease),filter .4s;
    filter:brightness(.7);display:block;
}

.portfolio-item-card:hover img  { transform:scale(1.05);filter:brightness(.9); }

.portfolio-item-overlay {
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(7,7,16,.9) 0%,transparent 60%);
    padding:2rem;
    display:flex;flex-direction:column;justify-content:flex-end;
}

/* ============================================================
   21. RESPONSIVE
   ============================================================ */
@media(max-width:1024px) {
    .services-layout      { grid-template-columns:1fr; gap:3rem; }
    .motive-grid          { grid-template-columns:1fr; gap:3rem; }
    .process-grid         { grid-template-columns:1fr 1fr; }
    .industries-grid      { grid-template-columns:repeat(4,1fr); }
    .testimonials-grid    { grid-template-columns:1fr 1fr; }
    .contact-grid         { grid-template-columns:1fr; gap:3rem; }
    .two-col-grid         { grid-template-columns:1fr; gap:3rem; }
    .hero-content-box     { max-width:70%; }
    .hero-orb             { opacity:.4; }
}

@media(max-width:768px) {
    .nav-links,.nav-call  { display:none; }
    .nav-mobile-toggle    { display:flex; }
    .hero-content-box     { max-width:100%; }
    .hero-orb             { display:none; }
    .process-grid         { grid-template-columns:1fr; }
    .industries-grid      { grid-template-columns:repeat(3,1fr); }
    .testimonials-grid    { grid-template-columns:1fr; }
    .form-row-2           { grid-template-columns:1fr; }
    .services-left .btn-primary-orion { display:none; }
    .footer-bottom        { flex-direction:column;text-align:center; }
    .footer-links         { justify-content:center; }
}

@media(max-width:480px) {
    .industries-grid  { grid-template-columns:repeat(2,1fr); }
    .motive-stats     { grid-template-columns:1fr 1fr; }
    .hero-btns        { flex-direction:column;align-items:flex-start; }
    .footer-cta-text  { font-size:3rem; }
}