/* ============================================
   TWINS TECHIE - MAIN STYLESHEET
   Premium Agency Website
   ============================================ */

/* Google Fonts Import - MUST BE FIRST */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Import all CSS modules */
@import url('base.css');
@import url('components.css');
@import url('layout.css');
@import url('pages.css');

/* Fallback: Show content after 2s even if JS fails */
@keyframes revealFallback {
    to {
        opacity: 1;
        transform: none;
    }
}

.reveal, .reveal-left, .reveal-right, .reveal-scale {
    animation: revealFallback 0.8s ease-out 2s forwards;
}

/* Fallback: Auto-hide loader after 3s */
@keyframes loaderFallback {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

.loader {
    animation: loaderFallback 0.5s ease 3s forwards;
}

/* Ensure body content is visible */
body.loading main {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================
   TWIN PHOTO CARDS (About page)
   ============================================ */
.twin-photo {
    width: 160px;
    height: 160px;
    margin: 0 auto var(--space-6);
    border-radius: 50%;
    padding: 4px;
    background: var(--color-accent-gradient);
    box-shadow: var(--shadow-glow);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.twin-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Bias the visible square toward the upper portion of each portrait
       so the face lands in the centre of the circle. Without this,
       object-fit:cover defaults to the geometric middle (chest / desk). */
    object-position: center 15%;
    border-radius: 50%;
    display: block;
    background-color: var(--color-bg-card);
}

/* Per-photo nudges. The original solo shots have slightly different
   framing, so each gets its own focal point. */
.twin-photo img[src*="ali-solo"] {
    object-position: center 18%;
}

.twin-photo img[src*="ahsan-solo"] {
    object-position: center 12%;
}

.twin-card:hover .twin-photo {
    transform: scale(1.04);
    box-shadow: var(--shadow-glow-lg);
}

/* ============================================
   HOME ABOUT IMAGE
   ============================================ */
.about-image-container {
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--color-border);
}

.about-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    transition: transform var(--transition-slow);
}

.about-visual:hover .about-image {
    transform: scale(1.03);
}

/* Fix invalid negative CSS variable in layout.css */
.about-badge-years {
    left: calc(-1 * var(--space-8));
}

.about-badge-twins {
    right: calc(-1 * var(--space-8));
}

/* ============================================
   RESPONSIVE OVERRIDES — PROGRESSIVE BREAKPOINTS
   Mobile-first refinements layered on the existing
   tablet/desktop styles in the module files.
   ============================================ */

/* ---------- Large desktop (≥1600px) — keep content readable ---------- */
@media (min-width: 1600px) {
    .hero-content {
        max-width: 1100px;
    }

    .portfolio-showcase {
        gap: var(--space-8);
    }
}

/* ---------- Tablet & smaller — soften vertical rhythm ---------- */
@media (max-width: 1024px) {
    .section {
        padding: var(--space-20) 0;
    }

    .section-sm {
        padding: var(--space-16) 0;
    }

    .section-header {
        margin-bottom: var(--space-12);
    }

    .cta-container {
        padding: var(--space-12);
    }

    .about-badge-years {
        left: var(--space-4);
        bottom: var(--space-4);
    }

    .about-badge-twins {
        right: var(--space-1);
        top: var(--space-1);
    }

    .about-image-container {
        aspect-ratio: 4/3;
        max-height: 70vh;
    }
}

/* ---------- Mid-tablet / large phone (≤900px) ---------- */
@media (max-width: 900px) {
    .twins-visual {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        max-width: 460px;
    }

    .twin-card:first-child {
        margin-top: 0;
    }

    .service-detail-features {
        grid-template-columns: 1fr;
    }

    .header {
        padding: var(--space-4) 0;
    }

    .header.scrolled {
        padding: var(--space-3) 0;
    }
}

/* ---------- Phone (≤768px) — compact spacing, stack everything ---------- */
@media (max-width: 768px) {
    .section,
    .section-sm,
    .section-lg {
        padding: var(--space-16) 0;
    }

    .section-header {
        margin-bottom: var(--space-10);
    }

    /* Hero */
    .hero {
        padding: var(--space-32) 0 var(--space-16);
        min-height: auto;
        text-align: left;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-label {
        margin-bottom: var(--space-6);
    }

    .hero-title {
        margin-bottom: var(--space-6);
    }

    .hero-description {
        font-size: var(--text-lg);
        margin-bottom: var(--space-8);
    }

    .hero-visual {
        opacity: 0.35;
        height: 100%;
        margin-top: 0;
        position: absolute;
        inset: 0;
        width: 100%;
    }

    .hero-shape-1 { width: 320px; height: 320px; }
    .hero-shape-2 { width: 260px; height: 260px; }
    .hero-shape-3 { width: 200px; height: 200px; }

    /* About */
    .about-stats {
        gap: var(--space-3);
    }

    .stat {
        padding: var(--space-3);
    }

    .stat-number {
        font-size: var(--text-2xl);
    }

    /* Twin photo cards */
    .twin-card {
        padding: var(--space-6);
    }

    .twin-photo {
        width: 140px;
        height: 140px;
    }

    /* Service cards */
    .service-card {
        padding: var(--space-6);
    }

    .service-icon {
        width: 56px;
        height: 56px;
        margin-bottom: var(--space-4);
    }

    .service-icon svg {
        width: 28px;
        height: 28px;
    }

    /* Testimonials — make cards fit narrow viewports */
    .testimonial-card {
        flex: 0 0 88vw;
        max-width: 360px;
        padding: var(--space-6);
    }

    .testimonial-content {
        font-size: var(--text-base);
        margin-bottom: var(--space-6);
    }

    /* CTA */
    .cta-container {
        padding: var(--space-10) var(--space-6);
        border-radius: var(--radius-2xl);
    }

    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-buttons .btn {
        width: 100%;
    }

    /* Mission & Vision */
    .mission-card,
    .vision-card {
        padding: var(--space-8);
    }

    /* Contact */
    .contact-form-wrapper {
        padding: var(--space-6);
    }

    .contact-intro h2 {
        font-size: var(--text-3xl);
    }

    /* Tech marquee — tighter gaps + slower scroll on small screens */
    .tech-track {
        gap: var(--space-6);
        animation-duration: 40s;
    }

    .tech-item {
        padding: var(--space-3) var(--space-4);
    }

    /* Page headers */
    .page-header {
        min-height: 40vh;
        padding-top: var(--space-32);
    }

    /* Mobile nav links — fit longer page titles without wrapping */
    .mobile-nav-link {
        font-size: var(--text-3xl);
    }

    .mobile-nav {
        padding: calc(var(--space-32) - var(--space-6)) var(--space-6) var(--space-12);
    }

    /* Footer */
    .footer {
        padding: var(--space-16) 0 var(--space-6);
        text-align: left;
    }

    .footer-grid {
        gap: var(--space-10);
        margin-bottom: var(--space-10);
    }

    /* About preview image — keep proportions usable */
    .about-image-container {
        aspect-ratio: 4/3;
        max-height: 60vh;
    }

    .about-badge {
        padding: var(--space-3) var(--space-4);
    }

    .about-badge-number {
        font-size: var(--text-2xl);
    }

    .about-badge-twins .twin-icon {
        width: 30px;
        height: 30px;
        font-size: var(--text-sm);
    }

    /* Logo on phones */
    .logo-text {
        font-size: var(--text-base);
    }

    .logo-icon {
        width: 38px;
        height: 38px;
        font-size: var(--text-base);
    }

    /* Header button hidden on mobile - CTA already in burger menu */
    .nav .btn {
        display: none;
    }
}

/* ---------- Small phone (≤480px) — tighten further ---------- */
@media (max-width: 480px) {
    :root {
        --container-padding: 1.25rem;
    }

    .section,
    .section-sm,
    .section-lg {
        padding: var(--space-12) 0;
    }

    .section-header {
        margin-bottom: var(--space-8);
    }

    .hero {
        padding: var(--space-32) 0 var(--space-12);
    }

    .hero-actions {
        gap: var(--space-3);
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-label {
        font-size: var(--text-xs);
        padding: var(--space-2) var(--space-3);
    }

    /* Cards / Stats */
    .about-stats {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--space-2);
    }

    .stat {
        padding: var(--space-3) var(--space-2);
    }

    .stat-number {
        font-size: var(--text-xl);
    }

    .stat-label {
        font-size: var(--text-xs);
    }

    .twin-photo {
        width: 120px;
        height: 120px;
    }

    /* Testimonials */
    .testimonial-card {
        flex: 0 0 85vw;
        padding: var(--space-5);
    }

    .testimonial-avatar {
        width: 48px;
        height: 48px;
        font-size: var(--text-base);
    }

    /* CTA */
    .cta-container {
        padding: var(--space-8) var(--space-4);
    }

    /* Mobile nav font scale */
    .mobile-nav-link {
        font-size: var(--text-2xl);
    }

    .mobile-nav-list {
        gap: var(--space-4);
    }

    /* Mission/Vision */
    .mission-card,
    .vision-card {
        padding: var(--space-6);
    }

    .mission-icon,
    .vision-icon {
        width: 48px;
        height: 48px;
    }

    .mission-title,
    .vision-title {
        font-size: var(--text-xl);
    }

    /* Service detail */
    .service-detail {
        padding: var(--space-12) 0;
    }

    .service-detail-number {
        font-size: var(--text-4xl);
    }

    /* Process steps */
    .process-number {
        width: 64px;
        height: 64px;
        font-size: var(--text-xl);
    }

    /* Filter buttons – allow horizontal scroll if many */
    .portfolio-filters {
        gap: var(--space-2);
    }

    .filter-btn {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-xs);
    }

    /* About badges on tiny screens */
    .about-badge {
        padding: var(--space-2) var(--space-3);
    }

    .about-badge-years {
        gap: var(--space-2);
    }

    .about-badge-number {
        font-size: var(--text-xl);
    }

    .about-badge-text {
        font-size: var(--text-xs);
    }

    /* Form inputs */
    .form-input,
    .form-textarea {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
    }

    /* Footer columns */
    .footer-social {
        flex-wrap: wrap;
    }

    .social-link {
        width: 40px;
        height: 40px;
    }
}

/* ---------- Tiny phones (≤360px) — last-resort guard ---------- */
@media (max-width: 360px) {
    :root {
        --container-padding: 1rem;
    }

    .logo-text {
        font-size: var(--text-sm);
    }

    .logo-icon {
        width: 34px;
        height: 34px;
        font-size: var(--text-sm);
    }

    .twin-photo {
        width: 108px;
        height: 108px;
    }

    .btn {
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-xs);
    }

    .btn-lg {
        padding: var(--space-4) var(--space-6);
        font-size: var(--text-sm);
    }

    .mobile-nav-link {
        font-size: var(--text-xl);
    }
}

/* ---------- Landscape phones — prevent hero from blocking content ---------- */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: var(--space-24) 0 var(--space-12);
    }

    .page-header {
        min-height: auto;
        padding: var(--space-24) 0 var(--space-12);
    }
}

/* ---------- Touch-input refinements (no hover, big tap targets) ---------- */
@media (hover: none) and (pointer: coarse) {
    .cursor,
    .cursor-dot {
        display: none !important;
    }

    /* Show portfolio overlay text always — no hover to reveal it */
    .portfolio-showcase-item .portfolio-overlay {
        opacity: 1;
        background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 15, 0.92) 100%);
    }

    /* Slightly bigger tap targets for filters/buttons */
    .filter-btn,
    .nav-link,
    .footer-link {
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
    }
}

/* ---------- Accessibility — respect prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .tech-track {
        animation: none !important;
    }

    .hero-shape {
        animation: none !important;
    }
}

/* ---------- Print styles (light cleanup) ---------- */
@media print {
    .loader,
    .cursor,
    .cursor-dot,
    .header,
    .mobile-nav,
    .menu-toggle,
    .footer-social,
    .cta-section,
    .tech-marquee {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .text-gradient {
        background: none;
        -webkit-text-fill-color: black;
        color: black;
    }
}

/* ---------- Image global safety: never overflow ---------- */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Force the about-image-container's child img to fill it instead */
.about-image-container > img.about-image {
    height: 100%;
}

/* ============================================
   PORTFOLIO CARDS — CLICKABLE STRUCTURE
   Each card is an <a> wrapping the photo + overlay.
   ============================================ */

/* Anchor wrapper: behave like a block, kill underline + inherited color */
a.portfolio-item,
a.portfolio-showcase-item {
    display: block;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* Photos always fill the card */
.portfolio-item > img.portfolio-image,
.portfolio-showcase-item > img.portfolio-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Place the textual overlay above the photo */
.portfolio-item .portfolio-overlay,
.portfolio-showcase-item .portfolio-overlay {
    z-index: 1;
}

/* Stronger gradient on photo cards so titles stay readable on any image */
.portfolio-item .portfolio-overlay,
.portfolio-showcase-item .portfolio-overlay {
    background: linear-gradient(180deg, rgba(10,10,15,0) 30%, rgba(10,10,15,0.55) 65%, rgba(10,10,15,0.95) 100%);
}

/* External-link badge in the top-right corner — clear click affordance */
.portfolio-link-badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 2;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    color: #fff;
    transition: background var(--transition-base),
                border-color var(--transition-base),
                transform var(--transition-base);
}

.portfolio-link-badge svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2.25;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.portfolio-item:hover .portfolio-link-badge,
.portfolio-showcase-item:hover .portfolio-link-badge,
.portfolio-item:focus-visible .portfolio-link-badge,
.portfolio-showcase-item:focus-visible .portfolio-link-badge {
    background: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
    transform: rotate(45deg);
}

/* Tech-stack chips inside the overlay */
.portfolio-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--space-3);
}

.portfolio-tech-tag {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1;
}

/* "Visit live site →" CTA at the bottom of the overlay */
.portfolio-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-4);
    color: var(--color-accent-primary);
    font-size: 11px;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.portfolio-cta svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--transition-fast);
}

.portfolio-item:hover .portfolio-cta svg,
.portfolio-showcase-item:hover .portfolio-cta svg,
.portfolio-item:focus-visible .portfolio-cta svg,
.portfolio-showcase-item:focus-visible .portfolio-cta svg {
    transform: translateX(4px);
}

/* Keyboard focus outline for accessibility */
a.portfolio-item:focus-visible,
a.portfolio-showcase-item:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 4px;
}

/* Home-page (.portfolio-item) overlay: keep always visible since it's the
   summary on the index page. Strengthen the gradient a touch for legibility. */
.portfolio-item .portfolio-overlay {
    opacity: 1;
}

/* Showcase page (.portfolio-showcase-item): reveal overlay on hover on desktop,
   always visible on touch (handled in the existing touch media query). */
.portfolio-showcase-item .portfolio-overlay {
    opacity: 0;
    transition: opacity var(--transition-base);
}

.portfolio-showcase-item:hover .portfolio-overlay,
.portfolio-showcase-item:focus-visible .portfolio-overlay {
    opacity: 1;
}

/* On phones, always show the overlay so users can read the project name */
@media (max-width: 768px) {
    .portfolio-showcase-item .portfolio-overlay {
        opacity: 1;
    }
    .portfolio-link-badge {
        width: 34px;
        height: 34px;
        top: var(--space-3);
        right: var(--space-3);
    }
}

/* ============================================
   CONTACT FORM STATUS MESSAGES
   ============================================ */
.form-status {
    margin-top: var(--space-4);
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    min-height: 1.2em;
    transition: color var(--transition-fast);
}

.form-status:empty {
    display: none;
}

.form-status--loading {
    color: var(--color-text-secondary);
}

.form-status--success {
    color: var(--color-success);
    padding: var(--space-4);
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: var(--radius-lg);
}

.form-status--error {
    color: var(--color-error);
    padding: var(--space-4);
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-lg);
}

/* Spinner inside submit button */
.animate-spin {
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   HERO VIDEO BACKGROUND (home page only)
   Cinematic city/tech footage plays behind the
   hero copy. Poster image stands in on mobile,
   slow connections, and prefers-reduced-motion.
   ============================================ */

/* Use the poster as a CSS background so the hero looks great even
   before the video downloads — and on devices where it's hidden. */
.hero {
    background-image: url('https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?auto=format&fit=crop&w=1920&q=70');
    background-size: cover;
    background-position: center;

    /* Tell the browser this section is self-contained — the rasterizer
       can skip work outside the hero when scrolling past it. Big win for
       perceived smoothness when scrolling away from the video. */
    contain: layout paint;
}

/* GPU-promote the moving hero layers so scroll repaints stay cheap.
   Without this, the blurred shapes + video are repainted by the CPU
   on every frame which kills FPS on the home page. */
.hero-video,
.hero-shape,
.bg-grid,
.bg-noise {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* Subtle fade-in once metadata is ready */
    opacity: 0;
    animation: heroVideoIn 1.2s ease 0.6s forwards;
}

@keyframes heroVideoIn {
    to { opacity: 1; }
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        /* Diagonal dark scrim for headline contrast */
        linear-gradient(135deg,
            rgba(10, 10, 15, 0.82) 0%,
            rgba(10, 10, 15, 0.55) 45%,
            rgba(10, 10, 15, 0.78) 100%),
        /* Bottom-edge vignette to blend into next section */
        linear-gradient(180deg,
            transparent 55%,
            var(--color-bg-primary) 100%);
}

/* On phones and prefers-reduced-motion: hide the video, the CSS
   background poster handles it. Saves 3 MB of data and battery. */
@media (max-width: 768px) {
    .hero-video {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-video {
        display: none;
    }
}

/* ============================================
   SERVICE DETAIL — real photography
   The existing .service-detail-visual already has the rounded
   frame, aspect-ratio and glow. We just need the img to fill it.
   ============================================ */
.service-detail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-2xl);
    display: block;
    transition: transform var(--transition-slow);
    position: relative;
    z-index: 1;
}

.service-detail-visual:has(.service-detail-image) {
    /* Photo doesn't need the placeholder background gradient */
    background: var(--color-bg-card);
    padding: 0;
}

.service-detail-visual:has(.service-detail-image)::before {
    /* Brighten the glow so it haloes the image edge */
    opacity: 0.4;
    z-index: 0;
}

.service-detail-visual:hover .service-detail-image {
    transform: scale(1.03);
}

/* ============================================
   FLOATING CTA — fixed pill on the right edge
   Inspired by enterprise SaaS "Let's Talk" tabs.
   Uses writing-mode for vertical text (no rotate
   hacks) so it stays crisp + selectable.
   ============================================ */
.floating-cta {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: var(--z-fixed);

    /* Vertical text, reading top → bottom */
    writing-mode: vertical-rl;

    background: var(--color-accent-gradient);
    color: var(--color-text-primary);

    /* Padding feels like horizontal because of writing-mode rotation:
       padding-block (24px) becomes the visual "length" of the pill;
       padding-inline (14px) becomes the visual "thickness". */
    padding: 24px 14px;

    /* Round only the left side — right edge hugs the viewport */
    border-radius: var(--radius-full) 0 0 var(--radius-full);

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-decoration: none;
    white-space: nowrap;

    box-shadow: var(--shadow-glow), 0 10px 30px rgba(0, 0, 0, 0.45);

    /* Slide-in entrance, plays after the page loader fades */
    opacity: 0;
    transform: translateY(-50%) translateX(16px);
    animation: floatingCtaIn 0.5s ease-out 2.4s forwards;

    transition: padding-left var(--transition-base),
                box-shadow var(--transition-base),
                background var(--transition-base);
}

@keyframes floatingCtaIn {
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

.floating-cta::before {
    /* Subtle inner shine on hover */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
}

.floating-cta:hover {
    padding-left: 22px;
    box-shadow: var(--shadow-glow-lg), 0 14px 40px rgba(0, 0, 0, 0.55);
}

.floating-cta:hover::before {
    opacity: 1;
}

.floating-cta:focus-visible {
    outline: 2px solid var(--color-text-primary);
    outline-offset: 3px;
}

.floating-cta:active {
    padding-left: 14px;
}

/* Tablet — tighten padding so the pill is less wide */
@media (max-width: 1024px) {
    .floating-cta {
        padding: 18px 11px;
        font-size: 11px;
        letter-spacing: 0.1em;
    }
}

/* Phone — keep it visible but smaller and tighter */
@media (max-width: 768px) {
    .floating-cta {
        padding: 14px 9px;
        font-size: 10px;
        letter-spacing: 0.08em;
        box-shadow: var(--shadow-glow), 0 6px 18px rgba(0, 0, 0, 0.45);
    }

    .floating-cta:hover {
        padding-left: 14px;
    }
}

/* Tiny phones — drop the literal word "Business" via :after trick? Easier:
   shrink further so it doesn't dominate the viewport. */
@media (max-width: 380px) {
    .floating-cta {
        padding: 12px 8px;
        font-size: 9px;
    }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .floating-cta {
        animation: none;
        opacity: 1;
        transform: translateY(-50%);
    }
}