/* ================================================
   SATOSHI FONT — Fontshare CDN + Local Fallback
   ================================================ */

   @import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,301,400,401,500,501,700,701,900,901&display=swap');

   @font-face {
     font-family: 'Satoshi';
     src: url('../fonts/Satoshi-Light.woff2') format('woff2');
     font-weight: 300; font-style: normal; font-display: swap;
   }
   @font-face {
     font-family: 'Satoshi';
     src: url('../fonts/Satoshi-LightItalic.woff2') format('woff2');
     font-weight: 300; font-style: italic; font-display: swap;
   }
   @font-face {
     font-family: 'Satoshi';
     src: url('../fonts/Satoshi-Regular.woff2') format('woff2');
     font-weight: 400; font-style: normal; font-display: swap;
   }
   @font-face {
     font-family: 'Satoshi';
     src: url('../fonts/Satoshi-Italic.woff2') format('woff2');
     font-weight: 400; font-style: italic; font-display: swap;
   }
   @font-face {
     font-family: 'Satoshi';
     src: url('../fonts/Satoshi-Medium.woff2') format('woff2');
     font-weight: 500; font-style: normal; font-display: swap;
   }
   @font-face {
     font-family: 'Satoshi';
     src: url('../fonts/Satoshi-MediumItalic.woff2') format('woff2');
     font-weight: 500; font-style: italic; font-display: swap;
   }
   @font-face {
     font-family: 'Satoshi';
     src: url('../fonts/Satoshi-Bold.woff2') format('woff2');
     font-weight: 700; font-style: normal; font-display: swap;
   }
   @font-face {
     font-family: 'Satoshi';
     src: url('../fonts/Satoshi-BoldItalic.woff2') format('woff2');
     font-weight: 700; font-style: italic; font-display: swap;
   }
   @font-face {
     font-family: 'Satoshi';
     src: url('../fonts/Satoshi-Black.woff2') format('woff2');
     font-weight: 900; font-style: normal; font-display: swap;
   }
   @font-face {
     font-family: 'Satoshi';
     src: url('../fonts/Satoshi-BlackItalic.woff2') format('woff2');
     font-weight: 900; font-style: italic; font-display: swap;
   }
   
   /* ================================================
      CSS VARIABLES
      ================================================ */
   
   :root {
     --primary-blue: #29ABDE;
     --text-dark: #1a1a1a;
     --text-muted: #525252;
     --bg-light: #f8f9fa;
     --bg-white: #ffffff;
     --cta-bg: #0a1421;
     --cta-text: #ffffff;
     --cta-subtext: #a1a1a1;
     --radius-sm: 12px;
     --radius-md: 20px;
     --radius-lg: 30px;
     --radius-xl: 40px;
     --radius-pill: 100px;
     --max-width: 1280px;
     --section-pad: 100px;
     --section-pad-mobile: 60px;
   }
   
   /* ================================================
      RESET & BASE
      ================================================ */
   
   *, *::before, *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   html { scroll-behavior: smooth; }
   
   body {
     font-family: 'Satoshi', sans-serif;
     font-weight: 400;
     color: var(--text-dark);
     background: var(--bg-white);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     overflow-x: hidden;
   }
   
   input, textarea, select, button {
     font-family: 'Satoshi', sans-serif;
   }
   
   /* ================================================
      TYPOGRAPHY SCALE
      ================================================ */
   
   h1, h2, h3, h4, h5, h6 {
     font-family: 'Satoshi', sans-serif;
     line-height: 1.1;
     letter-spacing: -0.02em;
   }
   
   h1 { font-size: clamp(40px, 5vw, 64px); font-weight: 700; }
   h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 700; }
   h3 { font-size: clamp(20px, 2.5vw, 28px); font-weight: 500; }
   
   p {
     font-size: 16px;
     line-height: 1.65;
     color: var(--text-muted);
   }
   
   /* ================================================
      LAYOUT UTILITIES
      ================================================ */
   
   .container {
     width: 100%;
     max-width: var(--max-width);
     margin: 0 auto;
     padding: 0 40px;
   }
   
   @media (max-width: 768px) {
     .container { padding: 0 20px; }
   }
   
   /* ================================================
      LOGO
      ================================================ */
   
   .logo {
     position: absolute;
     top: 36px;
     left: 48px;
     z-index: 100;
   }
   
   .logo img {
     height: 32px;
     width: auto;
     display: block;
   }
   
   /* ================================================
      NAVBAR / NAV PILL
      ================================================ */
   
   .navbar {
     width: 100%;
     display: flex;
     justify-content: center;
     padding-top: 24px;
     pointer-events: none;
     position: relative;
     z-index: 999;
   }
   
   .nav-pill {
     position: fixed;
     top: 24px;
     z-index: 1000;
     pointer-events: auto;
     display: flex;
     align-items: center;
     background: rgba(245, 245, 245, 0.96);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     padding: 6px 24px 6px 6px;
     border-radius: var(--radius-pill);
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0,0,0,0.06);
     gap: 0;
   }
   
   .pill-icon {
     width: 42px;
     height: 42px;
     background: var(--bg-white);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-right: 18px;
     overflow: hidden;
     flex-shrink: 0;
     box-shadow: 0 2px 8px rgba(0,0,0,0.08);
   }
   
   .pill-icon img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   
   .nav-links {
     display: flex;
     list-style: none;
     gap: 28px;
     padding: 0;
     margin: 0;
   }
   
   .nav-links a {
     text-decoration: none;
     color: var(--text-dark);
     font-size: 14px;
     font-weight: 500;
     letter-spacing: -0.01em;
     transition: color 0.2s;
   }
   
   .nav-links a:hover { color: var(--primary-blue); }
   
   .nav-links a.active {
     color: var(--primary-blue);
     font-weight: 600;
   }
   
   /* ================================================
      HERO SECTION
      ================================================ */
   
   .hero {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 160px 20px 80px;
     max-width: 900px;
     margin: 0 auto;
   }
   
   .projects-pill {
     display: inline-flex;
     align-items: center;
     background: #F2F2F2;
     border-radius: var(--radius-pill);
     padding: 8px 20px 8px 8px;
     margin-bottom: 36px;
     gap: 12px;
   }
   
   .avatar-group { display: flex; }
   
   .avatar {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     border: 2px solid var(--bg-white);
     background-size: cover;
     background-position: center;
     margin-left: -8px;
     flex-shrink: 0;
   }
   
   .avatar:first-child { margin-left: 0; }
   
   .projects-count {
     font-size: 13px;
     font-weight: 500;
     color: var(--text-muted);
     letter-spacing: -0.01em;
   }
   
   .hero-headline {
     font-size: clamp(44px, 6vw, 72px);
     font-weight: 900;
     line-height: 1.05;
     letter-spacing: -0.03em;
     color: var(--text-dark);
     margin-bottom: 28px;
   }
   
   .highlight-blue { color: var(--primary-blue); }
   
   .hero-subtext {
     font-size: clamp(16px, 1.8vw, 20px);
     font-weight: 400;
     color: var(--text-muted);
     max-width: 620px;
     line-height: 1.6;
     margin-bottom: 44px;
   }
   
   /* ================================================
      BUTTONS
      ================================================ */
   
   .btn-main-cta {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: var(--cta-bg);
     color: var(--bg-white);
     font-size: 15px;
     font-weight: 500;
     padding: 12px 12px 12px 28px;
     border-radius: var(--radius-pill);
     text-decoration: none;
     letter-spacing: -0.01em;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     white-space: nowrap;
   }
   
   .btn-main-cta:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(14, 22, 36, 0.25);
   }
   
   .btn-icon {
     width: 28px;
     height: 28px;
     background: var(--bg-white);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     position: relative;
   }
   
   .btn-icon::after {
     content: '';
     position: absolute;
     top: 50%; left: 55%;
     transform: translate(-50%, -50%);
     border-left: 6px solid var(--cta-bg);
     border-top: 4px solid transparent;
     border-bottom: 4px solid transparent;
   }
   
   /* ================================================
      HERO SHOWCASE (Video)
      ================================================ */
   
   .hero-showcase { padding: 0 24px 80px; }
   
   .showcase-container {
     width: 100%;
     max-width: var(--max-width);
     margin: 0 auto;
     background: #f0f4f8;
     border-radius: var(--radius-xl);
     overflow: hidden;
     box-shadow: 0 24px 64px rgba(0, 0, 0, 0.08);
   }
   
   .showcase-video {
     width: 100%;
     height: 350px;
     display: block;
     /*border-radius: var(--radius-xl);*/
     object-fit: cover;
   }
   
   /* ================================================
      TRUSTED HEADLINE
      ================================================ */
   
   .trusted-section {
     padding: 80px 20px 20px;
     text-align: center;
   }
   
   .trusted-container {
     max-width: var(--max-width);
     margin: 0 auto;
   }
   
   .trusted-headline {
     font-size: clamp(28px, 4vw, 52px);
     font-weight: 500;
     color: var(--text-dark);
     letter-spacing: -0.025em;
     line-height: 1.1;
     margin-bottom: 8px;
   }
   
   .trusted-section p {
     font-size: 17px;
     color: var(--text-muted);
     margin-top: 8px;
   }
   
   /* ================================================
      LOGO SLIDER
      ================================================ */
   
   .trusted-by {
     padding: 32px 0 80px;
     overflow: hidden;
     background: var(--bg-white);
   }
   
   .logo-slider {
     position: relative;
     width: 100%;
   }
   
   .logo-slide-track {
     display: flex;
     gap: 12px;
     width: max-content;
     animation: marquee 35s linear infinite;
   }
   
   .logo-card {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: #f5f5f5;
     border-radius: 14px;
     padding: 14px 28px;
     height: 64px;
     border: 1px solid #ebebeb;
     white-space: nowrap;
   }
   
   .logo-card svg {
     width: 22px;
     height: 22px;
     color: #5697f8;
     flex-shrink: 0;
   }
   
   .logo-card span {
     font-size: 14px;
     font-weight: 600;
     color: #1a1a1a;
     font-family: 'Satoshi', sans-serif;
     letter-spacing: -0.01em;
   }
   
   .logo-card i {
     font-size: 15px;
     color: var(--primary-blue);
   }
   
   @keyframes marquee {
     0%   { transform: translateX(0); }
     100% { transform: translateX(-50%); }
   }
   
   .logo-slider::before,
   .logo-slider::after {
     content: '';
     position: absolute;
     top: 0;
     width: 120px;
     height: 100%;
     z-index: 2;
     pointer-events: none;
   }
   
   .logo-slider::before { left: 0;  background: linear-gradient(to right, white, transparent); }
   .logo-slider::after  { right: 0; background: linear-gradient(to left,  white, transparent); }
   
   /* ================================================
      ABOUT US
      ================================================ */
   
   .about-us {
     padding: var(--section-pad) 20px;
     background: var(--bg-white);
     text-align: center;
   }
   
   /* General section-title — used in capabilities, about, etc. */
   .section-title {
     font-size: clamp(18px, 2vw, 22px);
     font-weight: 500;
     color: var(--text-muted);
     letter-spacing: 0.02em;
     text-transform: uppercase;
     margin-bottom: 64px;
     font-family: satoshi;
     padding-bottom: 20px;
   }
   
   /* Override for the values grid section where a larger title is needed */
   .values-grid-section .section-title {
     font-size: 42px;
     font-weight: 700;
     margin-bottom: 50px;
     color: #0a1421;
     text-transform: none;
     letter-spacing: -0.02em;
   }
   
   .image-stack {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 360px;
     margin-bottom: 64px;
     position: relative;
   }
   
   .stack-img {
     width: 190px;
     height: 260px;
     border-radius: 16px;
     overflow: hidden;
     position: absolute;
     box-shadow: 0 12px 36px rgba(0,0,0,0.14);
     border: 4px solid white;
     transition: transform 0.3s ease;
   }
   
   .stack-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   
   .img-1 { transform: translateX(-370px) rotate(-12deg); z-index: 1; }
   .img-2 { transform: translateX(-185px) rotate(8deg);  z-index: 2; }
   .img-3 { transform: translateY(-20px)  rotate(0deg);  z-index: 3; }
   .img-4 { transform: translateX(185px)  rotate(-6deg); z-index: 2; }
   .img-5 { transform: translateX(370px)  rotate(11deg); z-index: 1; }
   
   .about-content {
     max-width: 820px;
     margin: 0 auto 64px;
     text-align: left;
   }
   
   .about-content p {
     font-size: 17px;
     line-height: 1.75;
     color: var(--text-muted);
     margin-bottom: 20px;
   }
   
   .about-content .btn-main-cta { margin-top: 12px; }
   
   .stats-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     max-width: var(--max-width);
     margin: 0 auto;
   }
   
   .stat-card {
     background: var(--bg-light);
     padding: 48px 40px;
     border-radius: var(--radius-lg);
     text-align: left;
     border: 1px solid #ebebeb;
   }
   
   .stat-number {
     font-size: clamp(36px, 4vw, 52px);
     font-weight: 700;
     color: var(--text-dark);
     letter-spacing: -0.03em;
     line-height: 1;
     margin-bottom: 12px;
   }
   
   .stat-label {
     font-size: 13px;
     font-weight: 600;
     color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.08em;
   }
   
   /* ================================================
      CAPABILITIES / ACCORDION
      ================================================ */
   
   .capabilities {
     padding: var(--section-pad) 20px;
     background: var(--bg-white);
   }
   
   .capabilities .container > .section-title { margin-bottom: 48px; }
   
   .accordion {
     max-width: var(--max-width);
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     gap: 12px;
   }
   
   .accordion-item {
     background: var(--bg-light);
     border-radius: var(--radius-lg);
     padding: 28px 36px;
     border: 1px solid #ebebeb;
     transition: background 0.35s ease, color 0.35s ease;
     overflow: hidden;
   }
   
   .accordion-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
     gap: 20px;
   }
   
   .accordion-header h3 {
     font-size: clamp(18px, 2.2vw, 26px);
     font-weight: 500;
     letter-spacing: -0.02em;
     transition: color 0.3s;
   }
   
   .plus-icon {
     font-size: 32px;
     font-weight: 300;
     line-height: 1;
     transition: transform 0.4s ease;
     flex-shrink: 0;
     display: inline-block;
   }
   
   .accordion-item.active .plus-icon { transform: rotate(45deg); }
   
   .accordion-content {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .accordion-item.active .accordion-content { max-height: 800px; }
   
   .content-inner {
     display: flex;
     gap: 36px;
     padding-top: 28px;
     opacity: 0;
     transform: translateY(14px);
     transition: opacity 0.35s ease 0.15s, transform 0.35s ease 0.15s;
   }
   
   .accordion-item.active .content-inner {
     opacity: 1;
     transform: translateY(0);
   }
   
   .content-left { flex: 0 0 220px; }
   
   .tag-list {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
   
   .tag {
     background: rgba(255,255,255,0.85);
     color: #1a1a1a;
     padding: 8px 16px;
     border-radius: var(--radius-pill);
     font-size: 13px;
     font-weight: 500;
     width: max-content;
     border: 1px solid rgba(0,0,0,0.08);
     letter-spacing: -0.01em;
   }
   
   .accordion-item.active .tag {
     background: rgba(255,255,255,0.2);
     border-color: rgba(255,255,255,0.35);
     color: white;
   }
   
   .content-description {
     font-size: 16px;
     font-family: 'Satoshi', sans-serif;
     font-weight: 500;
     line-height: 1.6;
     margin-bottom: 20px;
     color: rgba(255,255,255,0.92);
   }
   
   .content-right { flex: 1; }
   
   .slider-container {
     border-radius: var(--radius-md);
     overflow: hidden;
     position: relative;
   }
   
   .slider-wrapper {
     display: flex;
     gap: 12px;
     transition: transform 0.5s ease;
   }
   
   .slide img {
     width: 100%;
     border-radius: var(--radius-md);
     display: block;
   }
   
   .prev-btn, .next-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: white;
     border: none;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     cursor: pointer;
     font-size: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 12px rgba(0,0,0,0.18);
     z-index: 10;
     transition: transform 0.2s;
   }
   
   .prev-btn { left: 10px; }
   .next-btn { right: 10px; }
   .prev-btn:hover, .next-btn:hover { transform: translateY(-50%) scale(1.1); }
   
   .view-more-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--cta-bg);
     color: white;
     padding: 10px 20px;
     border-radius: var(--radius-pill);
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
     margin-bottom: 20px;
     transition: transform 0.2s;
   }
   
   .view-more-btn:hover { transform: scale(1.03); }
   
   /* Accordion color themes */
   .a-item:nth-child(1):hover,
   .a-item:nth-child(1).active { background: #a389ff; color: white; border-color: #a389ff; }
   
   .a-item:nth-child(2):hover,
   .a-item:nth-child(2).active { background: #58d3f7; color: white; border-color: #58d3f7; }
   
   .a-item:nth-child(3):hover,
   .a-item:nth-child(3).active { background: #4ade80; color: white; border-color: #4ade80; }
   
   .a-item:nth-child(4):hover,
   .a-item:nth-child(4).active { background: #eca062; color: white; border-color: #eca062; }
   
   .a-item:nth-child(5):hover,
   .a-item:nth-child(5).active { background: #e68ebb; color: white; border-color: #e68ebb; }
   
   .a-item:nth-child(6):hover,
   .a-item:nth-child(6).active { background: #8ee6cd; color: white; border-color: #8ee6cd; }
   
   .a-item:nth-child(7):hover,
   .a-item:nth-child(7).active { background: #8ecfe6; color: white; border-color: #8ecfe6; }
   
   .a-item:nth-child(8):hover,
   .a-item:nth-child(8).active { background: #ac5a84; color: white; border-color: #ac5a84; }
   
   .a-item:nth-child(1):hover .accordion-header h3,
   .a-item:nth-child(1).active .accordion-header h3,
   .a-item:nth-child(2):hover .accordion-header h3,
   .a-item:nth-child(2).active .accordion-header h3,
   .a-item:nth-child(3):hover .accordion-header h3,
   .a-item:nth-child(3).active .accordion-header h3,
   .a-item:nth-child(4):hover .accordion-header h3,
   .a-item:nth-child(4).active .accordion-header h3,
   .a-item:nth-child(5):hover .accordion-header h3,
   .a-item:nth-child(5).active .accordion-header h3,
   .a-item:nth-child(6):hover .accordion-header h3,
   .a-item:nth-child(6).active .accordion-header h3,
   .a-item:nth-child(7):hover .accordion-header h3,
   .a-item:nth-child(7).active .accordion-header h3,
   .a-item:nth-child(8):hover .accordion-header h3,
   .a-item:nth-child(8).active .accordion-header h3 { color: white; }
   
   /* ================================================
      PORTFOLIO GRID
      ================================================ */
   
      .portfolio-grid {
        padding: var(--section-pad) 20px;
        background: var(--bg-white);
    }
    
    .portfolio-container {
        max-width: var(--max-width);
        margin: 0 auto 40px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        padding: 0;
    }
    
    .project-wrapper {
        display: flex;
        flex-direction: column;
    }
    
    .portfolio-card {
        border-radius: var(--radius-xl);
        padding: 0px;
        position: relative;
        overflow: hidden;
        min-height: 380px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        transition: transform 0.35s ease, box-shadow 0.35s ease;
    }
    
    .portfolio-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 24px 56px rgba(0,0,0,0.12);
    }
    
    .card-logo {
        position: absolute;
        top: 24px;
        left: 24px;
        z-index: 2;
    }
    
    .card-logo img {
        height: 40px;
        width: auto;
        object-fit: contain;
    }
    
    .card-watermark {
        position: absolute;
        top: 24px;
        right: 24px;
        font-size: 12px;
        font-weight: 600;
        color: rgba(0,0,0,0.3);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        z-index: 2;
    }
    
    .mockup-container {
        width: 100%;
        height: 100%;
        margin-top: auto;
        overflow: hidden;
        border-radius: 18px;
        transition: transform 0.5s ease;
    }
    
    .project-wrapper:hover .mockup-container {
        transform: translateY(-8px) scale(1.02);
    }
    
    .floating-mockup {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        border-radius: 18px;
        filter: drop-shadow(0 20px 40px rgba(0,0,0,0.18));
    }
    
    .project-details {
        padding: 20px 4px 0;
    }
    
    .project-title {
        font-size: 20px;
        font-weight: 600;
        color: var(--text-dark);
        letter-spacing: -0.02em;
        margin-bottom: 8px;
    }
    
    .project-desc {
        font-size: 14px;
        line-height: 1.6;
        color: var(--text-muted);
    }
    
    .view-all-container {
        max-width: var(--max-width);
        margin: 0 auto;
        display: flex;
        justify-content: flex-end;
    }
   
   /* ================================================
      CTA BANNER
      ================================================ */
   
   .cta-banner { padding: 0 24px 80px; }
   
   .cta-container {
     max-width: var(--max-width);
     margin: 0 auto;
     background: linear-gradient(145deg, #0a1421 0%, #1a4a6b 60%, #29abe2 100%);
     border-radius: var(--radius-xl);
     display: flex;
     align-items: stretch;
     position: relative;
     overflow: hidden;
     min-height: 340px;
   }
   
   .cta-content {
     flex: 1;
     padding: 64px 56px;
     z-index: 2;
     max-width: 560px;
     display: flex;
     flex-direction: column;
     justify-content: center;
   }
   
   .cta-headline {
     font-size: clamp(28px, 3.5vw, 44px);
     font-weight: 700;
     color: var(--cta-text);
     letter-spacing: -0.025em;
     line-height: 1.1;
     margin-bottom: 20px;
   }
   
   .cta-subtext {
     font-size: 15px;
     color: var(--cta-subtext);
     line-height: 1.65;
     margin-bottom: 36px;
   }
   
   .cta-button {
     display: inline-flex;
     align-items: center;
     gap: 0;
     background: white;
     color: #000;
     text-decoration: none;
     padding: 10px 10px 10px 24px;
     border-radius: var(--radius-pill);
     font-size: 14px;
     font-weight: 500;
     letter-spacing: -0.01em;
     align-self: flex-start;
     transition: transform 0.2s ease;
   }
   
   .cta-button:hover { transform: scale(1.03); }
   
   .cta-icon {
     width: 32px;
     height: 32px;
     background: var(--cta-bg);
     color: white;
     border-radius: 50%;
     margin-left: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
   .cta-icon svg { width: 14px; height: 14px; }
   
   .cta-graphic {
     position: absolute;
     right: 0; top: 0;
     height: 100%;
     width: 55%;
     pointer-events: none;
   }
   .cta-graphic img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0.75;
   }
   
   /* ================================================
      PROCESS SECTION
      ================================================ */
   
   .process-section {
     text-align: center;
     padding: var(--section-pad) 20px;
     background: var(--bg-white);
     overflow: hidden;
   }
   
   .process-section h2 {
     font-family: 'Satoshi', sans-serif;
     font-size: clamp(32px, 5vw, 60px);
     font-weight: 700;
     letter-spacing: -0.03em;
     color: var(--text-dark);
     margin-bottom: 0;
   }
   
   .slider-viewport {
     position: relative;
     height: 380px;
     width: 100%;
     overflow: hidden;
     margin-top: 0;
   }
   
   .circle-container {
     position: absolute;
     top: 80px;
     left: 50%;
     transform: translateX(-50%) rotate(0deg);
     width: 1200px;
     height: 1200px;
     border: 2px solid #e8e8e8;
     border-radius: 50%;
     transform-origin: center center;
     transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
   }
   
   .step-marker {
     position: absolute;
     width: 48px;
     height: 56px;
     background: white;
     border: 1px solid #e8e8e8;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Satoshi', sans-serif;
     font-size: 13px;
     font-weight: 700;
     color: #555;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
     transition: all 0.3s ease;
   }
   
   .step-marker.active {
     background: #7030f4;
     color: white;
     border-color: #7030f4;
     box-shadow: 0 6px 20px rgba(112, 48, 244, 0.35);
     transform: scale(1.15);
   }
   
   .info-display {
     position: absolute;
     top: 0; left: 0; right: 0;
     z-index: 10;
     padding-top: 120px;
     text-align: center;
     pointer-events: none;
   }
   
   .step-label {
     font-size: 12px;
     font-weight: 600;
     color: #aaa;
     letter-spacing: 0.10em;
     text-transform: uppercase;
     margin-bottom: 4px;
   }
   
   .info-display h1 {
     font-size: clamp(28px, 4vw, 48px);
     font-weight: 700;
     letter-spacing: -0.025em;
     color: var(--text-dark);
     margin: 6px 0 4px;
   }
   
   .info-display p {
     font-size: 16px;
     color: var(--text-muted);
   }
   
   .tags {
     display: inline-block;
     border-top: 1px dashed #ddd;
     border-bottom: 1px dashed #ddd;
     padding: 12px 20px;
     margin: 16px auto;
     font-size: 14px;
     color: var(--text-muted);
     letter-spacing: -0.01em;
   }
   
   /* Process section step dots */
   .dots {
     display: flex;
     justify-content: center;
     gap: 8px;
     margin-top: 12px;
   }
   
   .dot {
     width: 8px;
     height: 8px;
     background: #ddd;
     border-radius: 50%;
     cursor: pointer;
     transition: background 0.3s;
   }
   
   .dot.active { background: #7030f4; }
   
   /* ================================================
      REVIEWS
      ================================================ */
   
   .reviews-section {
     padding: var(--section-pad) 0;
     background: #fafafa;
     overflow: hidden;
   }
   
   .reviews-title {
     text-align: center;
     font-size: clamp(28px, 4vw, 52px);
     font-weight: 700;
     letter-spacing: -0.025em;
     color: var(--text-dark);
     margin-bottom: 56px;
     padding: 0 20px;
   }
   
   .reviews-container { width: 100%; overflow: hidden; }
   
   .marquee-wrapper {
     display: flex;
     overflow: hidden;
     user-select: none;
   }
   
   .marquee-content {
     display: flex;
     gap: 20px;
     animation: marquee 40s linear infinite;
     flex-shrink: 0;
   }
   
   .marquee-wrapper:hover .marquee-content { animation-play-state: paused; }
   
   .review-card {
     flex-shrink: 0;
     width: 380px;
     background: var(--bg-white);
     border: 1px solid #ebebeb;
     border-radius: 24px;
     padding: 36px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     gap: 20px;
   }
   
   .stars {
     font-size: 16px;
     color: #000;
     letter-spacing: 2px;
   }
   
   .review-text {
     font-size: 15px;
     line-height: 1.65;
     color: #333;
     flex: 1;
   }
   
   .user-info {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-top: auto;
   }
   
   .user-info img {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     object-fit: cover;
     background: #ddd;
   }
   
   .user-info h4 {
     font-size: 15px;
     font-weight: 600;
     color: var(--text-dark);
     letter-spacing: -0.01em;
     margin-bottom: 2px;
   }
   
   .user-info span { font-size: 13px; color: #888; }
   
   /* ================================================
      CONTACT SECTION
      ================================================ */
   
   .contact-section {
     padding: var(--section-pad) 24px;
     background: white;
   }
   
   .contact-container {
     max-width: 1280px;
     margin: 0 auto;
     background: linear-gradient(145deg, #0a1421 0%, #1a4a6b 60%, #29abe2 100%);
     border-radius: var(--radius-xl);
     padding: 72px 64px;
     display: flex;
     gap: 64px;
     color: white;
   }
   
   .contact-left  { flex: 1; min-width: 0; }
   .contact-right { flex: 1.2; min-width: 0; }
   
   .contact-title {
     font-size: clamp(32px, 4vw, 52px);
     font-weight: 700;
     letter-spacing: -0.025em;
     line-height: 1.1;
     color: white;
     margin-bottom: 20px;
   }
   
   .contact-subtitle {
     font-size: 16px;
     color: #a1a1a1;
     line-height: 1.65;
     margin-bottom: 36px;
   }
   
   .feature-list {
     display: flex;
     flex-direction: column;
     gap: 12px;
   }
   
   .feature-item {
     display: flex;
     align-items: center;
     gap: 12px;
     background: rgba(255,255,255,0.05);
     padding: 12px 20px;
     border-radius: var(--radius-pill);
     font-size: 14px;
     font-weight: 500;
     color: rgba(255,255,255,0.88);
     width: fit-content;
     letter-spacing: -0.01em;
   }
   
   /* Feature-item dot — scoped to avoid collision with process .dot */
   .feature-item .dot {
     width: 8px;
     height: 8px;
     background: #7030f4;
     border-radius: 50%;
     flex-shrink: 0;
     cursor: default;
     transition: none;
   }
   
   .contact-form { display: flex; flex-direction: column; gap: 0; }
   
   .form-row {
     display: flex;
     gap: 16px;
     margin-bottom: 16px;
   }
   
   .form-group { margin-bottom: 16px; }
   .form-group:last-child { margin-bottom: 0; }
   
   input, textarea, select {
     width: 100%;
     background: rgba(255,255,255,0.05);
     border: 1px solid rgba(255,255,255,0.10);
     border-radius: var(--radius-sm);
     padding: 16px 20px;
     color: white;
     font-family: 'Satoshi', sans-serif;
     font-size: 15px;
     font-weight: 400;
     outline: none;
     transition: border-color 0.2s;
   }
   
   select {
     color: rgba(255,255,255,0.7);
     cursor: pointer;
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 20px center;
     padding-right: 44px;
   }
   
   select option { background: #0a1421; color: white; }
   input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.35); }
   input:focus, textarea:focus, select:focus { border-color: rgba(255,255,255,0.4); }
   textarea { resize: vertical; min-height: 120px; }
   
   .form-footer {
     display: flex;
     justify-content: flex-end;
     margin-top: 8px;
   }
   
   .btn-submit {
     background: white;
     color: #000;
     border: none;
     padding: 14px 36px;
     border-radius: var(--radius-pill);
     font-family: 'Satoshi', sans-serif;
     font-size: 16px;
     font-weight: 600;
     letter-spacing: -0.01em;
     cursor: pointer;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
   }
   
   .btn-submit:hover {
     transform: scale(1.03);
     box-shadow: 0 8px 24px rgba(255,255,255,0.15);
   }
   
   .select-wrapper { position: relative; }
   
   /* ================================================
      FOOTER
      ================================================ */
   
   .main-footer {
     background: linear-gradient(145deg, #0a1421 0%, #1a4a6b 60%, #29abe2 100%);
     color: white;
     border-top-left-radius: var(--radius-xl);
     border-top-right-radius: var(--radius-xl);
     overflow: hidden;
     position: relative;
   }
   
   .footer-container {
     max-width: 1160px;
     margin: 0 auto;
     padding: 72px 40px 40px;
   }
   
   .footer-top {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 60px;
     margin-bottom: 0;
   }
   
   .footer-brand h2 {
     font-size: clamp(20px, 2.5vw, 30px);
     font-weight: 600;
     line-height: 1.3;
     letter-spacing: -0.02em;
     margin-bottom: 8px;
   }
   
   .footer-brand p {
     font-size: 14px;
     color: rgba(255,255,255,0.6);
     margin-bottom: 20px;
   }
   
   .social-icons { display: flex; gap: 10px; }
   
   .social-icons a {
     width: 38px;
     height: 38px;
     background: rgba(255,255,255,0.12);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 14px;
     text-decoration: none;
     transition: background 0.2s;
   }
   
   .social-icons a:hover { background: rgba(255,255,255,0.28); }
   
   .footer-links {
     display: flex;
     gap: 64px;
     flex-shrink: 0;
   }
   
   .link-col h4 {
     font-size: 12px;
     font-weight: 600;
     color: rgba(255,255,255,0.55);
     letter-spacing: 0.04em;
     text-transform: uppercase;
     margin-bottom: 20px;
   }
   
   .link-col ul {
     list-style: none;
     padding: 0;
     display: flex;
     flex-direction: column;
     gap: 3px;
   }
   
   .link-col ul li a {
     color: rgba(255,255,255,0.75);
     text-decoration: none;
     font-size: 15px;
     font-weight: 400;
     transition: color 0.2s;
   }
   
   .link-col ul li a:hover { color: white; }
   
   .footer-huge-text img {
    width: 100%;
    max-width: 500px;      /* optional max width to avoid too large on big screens */
    height: auto;
    display: block;
    margin: 0 auto;
    margin-top: 50px;
}
   
   .footer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-top: 1px solid rgba(255,255,255,0.10);
     padding-top: 28px;
     margin-top: 18px;
   }
   
   .footer-bottom p {
     font-size: 13px;
     color: rgba(255,255,255,0.45);
   }
   
   /* ================================================
      FLOATING CALENDLY WIDGET
      ================================================ */
   
   .calendly-floating-widget {
     position: fixed;
     bottom: 28px;
     right: 28px;
     width: 256px;
     background: white;
     border-radius: 28px;
     padding: 8px;
     display: flex;
     align-items: center;
     gap: 14px;
     box-shadow: 0 16px 48px rgba(0,0,0,0.14);
     z-index: 2000;
     border: 1px solid #ebebeb;
   }
   
   .calendly-graphic {
     flex-shrink: 0;
     width: 88px;
     height: 88px;
     border-radius: 20px;
     overflow: hidden;
   }
   
   .calendly-graphic img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   
   .calendly-content {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 4px;
   }
   
   .calendly-content h3 {
     font-size: 15px;
     font-weight: 600;
     color: var(--text-dark);
     letter-spacing: -0.01em;
     margin: 0;
   }
   
   .calendly-content p {
     font-size: 12px;
     color: var(--text-muted);
     margin: 0 0 12px;
   }
   
   .btn-calendly-cta {
     background: var(--cta-bg);
     color: white;
     font-family: 'Satoshi', sans-serif;
     font-size: 12px;
     font-weight: 500;
     padding: 8px 8px 8px 16px;
     border-radius: var(--radius-pill);
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     transition: transform 0.2s ease;
   }
   
   .btn-calendly-cta:hover { transform: scale(1.03); }
   
   .btn-icon-circle {
     width: 20px;
     height: 20px;
     background: white;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
   }
   
   .btn-icon-circle::after {
     content: '';
     width: 0; height: 0;
     border-top: 4px solid transparent;
     border-bottom: 4px solid transparent;
     border-left: 7px solid var(--cta-bg);
   }
   
   .close-widget {
     position: absolute;
     top: -10px;
     right: -10px;
     background: white;
     border: 1.5px solid #ddd;
     border-radius: 50%;
     width: 28px;
     height: 28px;
     font-size: 11px;
     font-weight: 700;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #555;
     box-shadow: 0 2px 8px rgba(0,0,0,0.10);
     transition: border-color 0.2s;
   }
   
   .close-widget:hover { border-color: #000; }
   
   /* ================================================
      SCROLL ANIMATIONS
      ================================================ */
   
   .animate-on-scroll {
     opacity: 0;
     transform: translateY(40px);
     transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
                 transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
   }
   
   .animate-on-scroll.is-visible {
     opacity: 1;
     transform: translateY(0);
   }
   
   .image-stack .stack-img {
     opacity: 0;
     transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
   }
   
   .image-stack.animate-in .stack-img { opacity: 1; }
   .image-stack.animate-in .img-1 { transform: translateX(-370px) rotate(-12deg); transition-delay: 0.1s; }
   .image-stack.animate-in .img-2 { transform: translateX(-185px) rotate(8deg);  transition-delay: 0.2s; }
   .image-stack.animate-in .img-3 { transform: translateY(-20px)  rotate(0deg);  transition-delay: 0.3s; }
   .image-stack.animate-in .img-4 { transform: translateX(185px)  rotate(-6deg); transition-delay: 0.4s; }
   .image-stack.animate-in .img-5 { transform: translateX(370px)  rotate(11deg); transition-delay: 0.5s; }
   
   .stat-card {
     opacity: 0;
     transform: translateY(24px);
     transition: opacity 0.6s ease-out, transform 0.6s ease-out;
   }
   
   .stat-card.animate-in { opacity: 1; transform: translateY(0); }
   .stat-card:nth-child(1) { transition-delay: 0.1s; }
   .stat-card:nth-child(2) { transition-delay: 0.25s; }
   .stat-card:nth-child(3) { transition-delay: 0.4s; }
   
   .about-content {
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.7s ease, transform 0.7s ease;
   }
   
   .about-content.animate-in { opacity: 1; transform: translateY(0); }
   
   /* ================================================
      RESPONSIVE
      ================================================ */
   
   @media (max-width: 1024px) {
     .img-1 { transform: translateX(-280px) rotate(-12deg); }
     .img-2 { transform: translateX(-140px) rotate(8deg); }
     .img-4 { transform: translateX(140px)  rotate(-6deg); }
     .img-5 { transform: translateX(280px)  rotate(11deg); }
   }
   
   @media (max-width: 850px) {
     .logo { top: 20px; left: 20px; }
     .nav-pill {
       position: relative;
       top: 0; left: 0;
       transform: none;
       margin: 0 auto;
       width: fit-content;
     }
     .navbar {
       flex-direction: column;
       padding: 16px 16px 0;
       pointer-events: auto;
     }
     .nav-links { gap: 16px; flex-wrap: wrap; justify-content: center; }
     .nav-links a { font-size: 13px; }
     .hero { padding: 100px 20px 60px; }
     .hero-headline { font-size: 40px; }
     .hero-subtext { font-size: 16px; }
     .hero-showcase { padding: 0 16px 60px; }
     .image-stack { height: 220px; }
     .stack-img { width: 110px; height: 150px; }
     .img-1 { transform: translateX(-95px)  rotate(-10deg); }
     .img-2 { transform: translateX(-48px)  rotate(6deg); }
     .img-3 { transform: translateY(-10px)  rotate(0deg); }
     .img-4 { transform: translateX(48px)   rotate(-5deg); }
     .img-5 { transform: translateX(95px)   rotate(10deg); }
     .stats-grid { grid-template-columns: 1fr; gap: 12px; }
     .content-inner { flex-direction: column; }
     .content-left { flex: none; }
     .portfolio-container { grid-template-columns: 1fr; }
     .cta-content { padding: 40px 24px; max-width: 100%; }
     .cta-graphic { display: none; }
     .cta-headline { font-size: 28px; }
     .contact-container { flex-direction: column; padding: 40px 24px; gap: 40px; }
     .contact-title { font-size: 32px; }
     .footer-top { flex-direction: column; gap: 40px; }
     .footer-links { gap: 36px; flex-wrap: wrap; }
     .footer-huge-text { font-size: 28vw; }
     .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
     .footer-container { padding: 48px 24px 32px; }
   }
   
   @media (max-width: 540px) {
     .form-row { flex-direction: column; }
     .calendly-floating-widget { width: calc(100vw - 40px); right: 20px; bottom: 20px; }
     .nav-links { gap: 10px; }
     .footer-links { flex-direction: column; gap: 28px; }
   }
   
   /* ================================================
      GALLERY SECTION
      ================================================ */
   
   .gallery-section {
     padding: 60px 0;
     background: #ffffff;
     position: relative;
     overflow: hidden;
   }
   
   .gallery-fade-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, #fff 0%, transparent 15%, transparent 85%, #fff 100%);
     z-index: 10;
     pointer-events: none;
   }
   
   .gallery-wrapper { display: flex; }
   
   .gallery-track {
     display: flex;
     align-items: center;
     gap: 20px;
     animation: galleryScroll 30s linear infinite;
   }
   
   @keyframes galleryScroll {
     from { transform: translateX(0); }
     to   { transform: translateX(-50%); }
   }
   
   .gallery-item {
     flex-shrink: 0;
     width: 280px;
     height: 200px;
     border-radius: 24px;
     overflow: hidden;
     background: #f0f0f0;
   }
   
   .gallery-item.medium { height: 260px; }
   .gallery-item.tall   { height: 320px; }
   
   .gallery-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
   }
   
   .gallery-item:hover img { transform: scale(1.1); }
   .gallery-wrapper:hover .gallery-track { animation-play-state: paused; }
   
   /* ================================================
      VALUES GRID SECTION
      ================================================ */
   
   .values-grid-section {
     padding: 80px 20px;
     background-color: #ffffff;
     font-family: 'Plus Jakarta Sans', sans-serif;
     text-align: center;
   }
   
   .values-flex-container {
     display: flex;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
     max-width: 1200px;
     margin: 0 auto;
   }
   
   .value-mini-card {
     background: #ffffff;
     border: 1px solid #f0f0f0;
     border-radius: 24px;
     padding: 30px;
     flex: 1;
     min-width: 250px;
     max-width: 280px;
     text-align: left;
     transition: all 0.3s ease;
   }
   
   .value-mini-card:hover {
     border-color: #29ABE2;
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(0,0,0,0.05);
   }
   
   .icon-circle {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
     font-size: 20px;
     color: #fff;
   }
   
   .icon-circle.purple { background-color: #a855f7; }
   .icon-circle.blue   { background-color: #29ABE2; }
   .icon-circle.green  { background-color: #22c55e; }
   .icon-circle.orange { background-color: #fb923c; }
   
   .value-mini-card h3 {
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 10px;
     color: #0a1421;
   }
   
   .value-mini-card p {
     font-size: 14px;
     color: #6b7280;
     line-height: 1.5;
   }
   
   @media (max-width: 768px) {
     .values-flex-container { flex-direction: column; align-items: center; }
     .value-mini-card { width: 100%; max-width: 400px; }
   }
   
   /* ================================================
      TEAM SECTION
      ================================================ */
   
   .team-section {
     padding: 100px 20px;
     background-color: #ffffff;
   }
   
   .team-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 20px;
     max-width: 1300px;
     margin: 0 auto;
   }
   
   .team-card {
     background: #ffffff;
     border-radius: 20px;
     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   
   .team-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 40px rgba(0,0,0,0.05);
   }
   
   .member-image {
     background-color: #e9ecef;
     height: 220px;
     display: flex;
     align-items: flex-end;
     justify-content: center;
     overflow: hidden;
   }
   
   .member-image img {
     height: 90%;
     object-fit: contain;
   }
   
   .member-info {
     padding: 15px;
     background: #ffffff;
     border: 1px solid #f0f0f0;
     border-top: none;
     border-radius: 0 0 20px 20px;
   }
   
   .member-info h4 {
     font-size: 14px;
     font-weight: 700;
     margin-bottom: 4px;
     color: #0a1421;
   }
   
   .member-info p {
     font-size: 12px;
     color: #888;
     margin: 0;
   }
   
   @media (max-width: 1200px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
   @media (max-width: 768px)  { .team-grid { grid-template-columns: repeat(2, 1fr); } }
   @media (max-width: 480px)  { .team-grid { grid-template-columns: 1fr; } }
   
   /* ================================================
      FAQ SECTION
      ================================================ */
   
   .faq-section {
     padding: 100px 20px;
     background-color: #f8f9fa;
     /* font-family: 'Plus Jakarta Sans', sans-serif; */
   }
   
   .faq-container {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     position: relative;
   }
   
   .faq-intro { position: relative; }
   
   .faq-title {
     font-size: 56px;
     font-weight: 700;
     line-height: 1.1;
     position: relative;
     z-index: 2;
   }
   
   .faq-bg-text {
     position: absolute;
     top: 100px;
     left: 0;
     font-size: 200px;
     font-weight: 900;
     color: rgba(0, 0, 0, 0.03);
     z-index: 1;
     pointer-events: none;
   }
   
   .faq-accordion {
     display: flex;
     flex-direction: column;
     gap: 15px;
   }
   
   .faq-accordion .accordion-item {
     background: #ffffff;
     border-radius: 16px;
     overflow: hidden;
     border: 1px solid rgba(0,0,0,0.05);
     transition: all 0.3s ease;
   }
   
   .faq-accordion .accordion-header {
     padding: 20px 30px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
     font-weight: 600;
     font-size: 18px;
   }
   
   .faq-accordion .accordion-body {
     padding: 0 30px 25px;
     display: none;
     color: #666;
     line-height: 1.6;
   }
   
   .faq-accordion .accordion-item.active .accordion-body { display: block; }
   .faq-accordion .accordion-item.active { border-color: #29ABE2; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
   
   @media (max-width: 992px) {
     .faq-container { grid-template-columns: 1fr; }
     .faq-bg-text { font-size: 120px; }
     .faq-title { font-size: 42px; }
   }
   
   /* ================================================
      MAP SECTION
      ================================================ */
   
   .contact-map-section {
     padding: 60px 0;
     background-color: #ffffff;
   }
   
   .map-container {
     width: 100%;
     border-radius: 24px;
     overflow: hidden;
     border: 1px solid #eeeeee;
     box-shadow: 0 10px 30px rgba(0,0,0,0.05);
   }
   
   .map-container iframe {
     display: block;
     filter: grayscale(10%);
   }
   
   /* ================================================
      SERVICES (service cards grid)
      ================================================ */
   
   .services-page { padding: 4rem 1.5rem; }
   
   .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
   
   .service-card {
     position: relative;
     background: #ffffff;
     padding: 2rem 1.5rem 1.5rem;
     display: flex;
     flex-direction: column;
     gap: 12px;
     overflow: hidden;
     border-radius: 14px;
     border: 1px solid #e8e8e4;
     transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
     cursor: default;
   }
   
   .card-bar {
     position: absolute;
     top: 0; left: 0;
     height: 3px;
     width: 0;
     transition: width 0.35s ease;
   }
   
   .service-card[data-color="blue"]   .card-bar { background: #378ADD; }
   .service-card[data-color="green"]  .card-bar { background: #1D9E75; }
   .service-card[data-color="pink"]   .card-bar { background: #D4537E; }
   .service-card[data-color="lime"]   .card-bar { background: #639922; }
   .service-card[data-color="purple"] .card-bar { background: #7F77DD; }
   .service-card[data-color="amber"]  .card-bar { background: #BA7517; }
   .service-card[data-color="coral"]  .card-bar { background: #D85A30; }
   .service-card[data-color="gray"]   .card-bar { background: #888780; }
   
   .service-card[data-color="blue"]   .service-icon { background: #E6F1FB; color: #185FA5; }
   .service-card[data-color="green"]  .service-icon { background: #E1F5EE; color: #0F6E56; }
   .service-card[data-color="pink"]   .service-icon { background: #FBEAF0; color: #993556; }
   .service-card[data-color="lime"]   .service-icon { background: #EAF3DE; color: #3B6D11; }
   .service-card[data-color="purple"] .service-icon { background: #EEEDFE; color: #534AB7; }
   .service-card[data-color="amber"]  .service-icon { background: #FAEEDA; color: #854F0B; }
   .service-card[data-color="coral"]  .service-icon { background: #FAECE7; color: #993C1D; }
   .service-card[data-color="gray"]   .service-icon { background: #F1EFE8; color: #5F5E5A; }
   
   .service-card[data-color="blue"]   .service-tag { background: #E6F1FB; color: #185FA5; }
   .service-card[data-color="green"]  .service-tag { background: #E1F5EE; color: #0F6E56; }
   .service-card[data-color="pink"]   .service-tag { background: #FBEAF0; color: #993556; }
   .service-card[data-color="lime"]   .service-tag { background: #EAF3DE; color: #3B6D11; }
   .service-card[data-color="purple"] .service-tag { background: #EEEDFE; color: #534AB7; }
   .service-card[data-color="amber"]  .service-tag { background: #FAEEDA; color: #854F0B; }
   .service-card[data-color="coral"]  .service-tag { background: #FAECE7; color: #993C1D; }
   .service-card[data-color="gray"]   .service-tag { background: #F1EFE8; color: #5F5E5A; }
   
   .service-icon {
     width: 52px;
     height: 52px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
   
   .service-icon svg {
     width: 24px;
     height: 24px;
     stroke: currentColor;
     fill: none;
     stroke-width: 1.75;
     stroke-linecap: round;
     stroke-linejoin: round;
   }
   
   .service-card h3 {
     font-size: 15px;
     font-weight: 600;
     color: #111;
     line-height: 1.35;
   }
   
   .service-card p {
     font-size: 13px;
     color: #666;
     line-height: 1.65;
     flex: 1;
   }
   
   .service-tag {
     display: inline-block;
     font-size: 11px;
     font-weight: 500;
     padding: 4px 10px;
     border-radius: 99px;
     width: fit-content;
     margin-top: 4px;
     letter-spacing: 0.01em;
   }
   
   @media (max-width: 600px) { .services-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }
   @media (max-width: 380px) { .services-grid { grid-template-columns: 1fr; } }
   
   /* ================================================
      WHY CHOOSE SECTION (wc-section)
      ================================================ */
   
   .wc-section { padding: 5rem 1.5rem; }
   .wc-container { max-width: 1100px; margin: 0 auto; }
   
   .wc-header {
     text-align: center;
     margin-bottom: 3rem;
   }
   
   .wc-header h2 {
     font-size: clamp(1.75rem, 4vw, 2.5rem);
     font-weight: 700;
     color: #0f0f1a;
     letter-spacing: -0.02em;
     margin-bottom: 0.6rem;
   }
   
   .wc-header p {
     font-size: 15px;
     color: #666;
     max-width: 480px;
     margin: 0 auto;
     line-height: 1.6;
   }
   
   .wc-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
   }
   
   .wc-card {
     background: #fff;
     border-radius: 18px;
     border: 1px solid #eaeaee;
     padding: 2rem 1.75rem;
     display: flex;
     flex-direction: column;
     gap: 14px;
   }
   
   .wc-icon-wrap {
     width: 54px;
     height: 54px;
     border-radius: 50%;
     background: linear-gradient(135deg, #00c8f0, #0094cc);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     box-shadow: 0 6px 18px rgba(0,148,204,0.3);
   }
   
   .wc-icon-wrap svg {
     width: 22px;
     height: 22px;
     stroke: #fff;
     fill: none;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;
   }
   
   .wc-card h3 {
     font-size: 16px;
     font-weight: 600;
     color: #0f0f1a;
     line-height: 1.3;
   }
   
   .wc-card p {
     font-size: 13.5px;
     color: #666;
     line-height: 1.7;
   }
   
   .wc-card--highlight {
     background: linear-gradient(145deg, #0077b6, #00b4d8);
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .wc-cta-inner {
     display: flex;
     flex-direction: column;
     gap: 14px;
     align-items: flex-start;
   }
   
   .wc-icon-wrap--light {
     background: rgba(255,255,255,0.2);
     box-shadow: none;
   }
   
   .wc-icon-wrap--light svg {
     stroke: #fff;
     fill: rgba(255,255,255,0.15);
   }
   
   .wc-card--highlight h3 { color: #fff; font-size: 18px; }
   .wc-card--highlight p  { color: rgba(255,255,255,0.8); }
   
   .wc-btn {
     display: inline-block;
     margin-top: 6px;
     padding: 10px 22px;
     background: #fff;
     color: #0077b6;
     font-size: 13px;
     font-weight: 600;
     border-radius: 99px;
     text-decoration: none;
   }
   
   @media (max-width: 900px) { .wc-grid { grid-template-columns: repeat(2, 1fr); } }
   @media (max-width: 560px) { .wc-grid { grid-template-columns: 1fr; gap: 14px; } }
   
   /* ================================================
      WORK PROCESS SECTION (wp-section)
      ================================================ */
   
   .wp-section { padding: 5rem 1.5rem; background: #fff; }
   .wp-container { max-width: 1100px; margin: 0 auto; }
   
   .wp-header {
     text-align: center;
     margin-bottom: 3.5rem;
   }
   
   .wp-header h2 {
     font-size: clamp(1.8rem, 4vw, 2.6rem);
     font-weight: 700;
     color: #0f0f1a;
     letter-spacing: -0.02em;
   }
   
   .wp-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
     position: relative;
   }
   
   .wp-card {
     background: #f0eef9;
     border-radius: 18px;
     padding: 2rem 1.5rem;
     display: flex;
     flex-direction: column;
     gap: 14px;
     position: relative;
   }
   
   .wp-step {
     position: absolute;
     top: 1.25rem;
     right: 1.25rem;
     font-size: 11px;
     font-weight: 700;
     color: #7c3aed;
     background: rgba(124,58,237,0.1);
     border-radius: 99px;
     padding: 3px 9px;
     letter-spacing: 0.04em;
   }
   
   .wp-icon {
     width: 52px;
     height: 52px;
     border-radius: 12px;
     background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
   
   .wp-icon svg {
     width: 22px;
     height: 22px;
     stroke: #7c3aed;
     fill: none;
     stroke-width: 1.75;
     stroke-linecap: round;
     stroke-linejoin: round;
   }
   
   .wp-card h3 {
     font-size: 16px;
     font-weight: 600;
     color: #0f0f1a;
     line-height: 1.3;
     margin-top: 4px;
   }
   
   .wp-card p {
     font-size: 13px;
     color: #555;
     line-height: 1.7;
   }
   
   .wp-connector {
     position: absolute;
     top: 50%;
     right: -14px;
     transform: translateY(-50%);
     width: 28px;
     height: 28px;
     background: #fff;
     border-radius: 50%;
     border: 2px solid #e0d9f7;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
   }
   
   .wp-connector::after {
     content: '';
     display: block;
     width: 7px;
     height: 7px;
     border-top: 2px solid #7c3aed;
     border-right: 2px solid #7c3aed;
     transform: rotate(45deg) translateX(-1px);
   }
   
   @media (max-width: 900px) { .wp-grid { grid-template-columns: repeat(2, 1fr); } .wp-connector { display: none; } }
   @media (max-width: 560px) { .wp-grid { grid-template-columns: 1fr; } }
   
   /* ================================================
      SERVICE HIGHLIGHT CONTAINERS (courses & internships)
      ================================================ */
   
   .service-highlight {
     padding: 80px 20px 20px;
     background-color: #ffffff;
   }
   
   .service-highlight1 {
     padding: 20px;
     background-color: #ffffff;
   }
   
   /* Shared base for all highlight containers */
   .highlight-container,
   .highlight-container1,
   .highlight-container2,
   .highlight-container3,
   .highlight-container4,
   .highlight-container5,
   .highlight-container6,
   .highlight-container7 {
     max-width: 1280px;
     margin: 0 auto;
     border-radius: 40px;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: 50px 60px;
     position: relative;
     overflow: hidden;
     height: 100%;
     justify-content: space-between;
   }
   
   /* Radial highlight overlay */
   .highlight-container::before,
   .highlight-container1::before,
   .highlight-container2::before,
   .highlight-container3::before,
   .highlight-container4::before,
   .highlight-container5::before,
   .highlight-container6::before,
   .highlight-container7::before {
     content: '';
     position: absolute;
     top: 0; left: 0; right: 0; bottom: 0;
     background: radial-gradient(circle at 30% 10%, rgba(255,255,255,0.1) 0%, transparent 70%);
     pointer-events: none;
     z-index: 0;
   }
   
   /* Image wrapper */
   .highlight-visual {
     width: 100%;
     justify-content: center;
     margin-bottom: 35px;
     position: relative;
     z-index: 2;
   }
   
   /* Mockup image */
   .mockup-img {
     max-width: 70%;
     height: auto;
     border-radius: 24px;
     box-shadow: 0 25px 40px -15px rgba(0,0,0,0.3);
     display: block;
     margin: 0 auto;
     transition: transform 0.3s ease;
   }
   
   .mockup-img:hover { transform: scale(1.02); }
   
   /* Text container — last child of each highlight container */
   .highlight-container > div:last-child,
   .highlight-container1 > div:last-child,
   .highlight-container2 > div:last-child,
   .highlight-container3 > div:last-child,
   .highlight-container4 > div:last-child,
   .highlight-container5 > div:last-child,
   .highlight-container6 > div:last-child,
   .highlight-container7 > div:last-child {
     width: 100%;
     margin: 0 auto;
     position: relative;
     z-index: 2;
   }
   
   /* Titles */
   .highlight-container h1,
   .highlight-container1 h1,
   .highlight-container2 h1,
   .highlight-container3 h1,
   .highlight-container4 h1,
   .highlight-container5 h1,
   .highlight-container6 h1,
   .highlight-container7 h1 {
     font-size: clamp(32px, 5vw, 52px);
     font-weight: 700;
     margin-bottom: 20px;
     letter-spacing: -0.02em;
     line-height: 1.2;
   }
   
   /* Description paragraph */
   .highlight-container p,
   .highlight-container1 p,
   .highlight-container2 p,
   .highlight-container3 p,
   .highlight-container4 p,
   .highlight-container5 p,
   .highlight-container6 p,
   .highlight-container7 p {
     font-size: 18px;
     line-height: 1.6;
     opacity: 0.95;
     margin-bottom: 20px;
   }
   
   /* Duration / price badge lines — use a dedicated class instead of :has() */
   .highlight-badge {
     display: inline-block;
     background: rgba(0,0,0,0.2);
     padding: 5px 15px;
     border-radius: 40px;
     margin: 5px;
     font-size: 16px;
     line-height: 1.6;
     font-weight: 500;
   }
   
   /* Book / CTA button */
   .btn-book {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: #ffffff;
     color: #0a1421;
     border: none;
     padding: 14px 32px;
     border-radius: 60px;
     font-size: 16px;
     font-weight: 600;
     font-family: 'Satoshi', sans-serif;
     cursor: pointer;
     transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
     margin-top: 25px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.1);
     text-decoration: none;
     align-self: center;
     position: relative;
     z-index: 2;
   }
   
   .btn-book:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 24px rgba(0,0,0,0.2);
     background: #f0f0f0;
   }
   
   /* Responsive */
   @media (max-width: 992px) {
     .highlight-container,
     .highlight-container1,
     .highlight-container2,
     .highlight-container3,
     .highlight-container4,
     .highlight-container5,
     .highlight-container6,
     .highlight-container7 { padding: 40px 30px; }
     .mockup-img { max-width: 85%; }
     .highlight-container p,
     .highlight-container1 p { font-size: 16px; }
   }
   
   @media (max-width: 768px) {
     .highlight-container,
     .highlight-container1,
     .highlight-container2,
     .highlight-container3,
     .highlight-container4,
     .highlight-container5,
     .highlight-container6,
     .highlight-container7 { padding: 30px 20px; border-radius: 30px; }
     .mockup-img { max-width: 100%; }
     .btn-book { padding: 12px 24px; font-size: 14px; }
     .highlight-container h1 { font-size: 28px; }
   }
   
   /* ================================================
      INTERNSHIPS & COURSES GRID
      ================================================ */
   
   .internships-grid,
   .courses-grid {
     display: grid;
     /* grid-template-columns: repeat(2, 1fr); */
     gap: 30px;
     align-items: stretch;
   }
   
   .internship-card,
   .course-card {
     height: 100%;
     display: flex;
   }
   
   .card-content {
     flex: 1;
     display: flex;
     flex-direction: column;
   }
   .description {
     width: 100%;
     max-width: 760px;
     margin: 0 auto 22px;
     padding: 0 4px;
     color: rgba(255,255,255,0.92);
     font-size: 17px;
     font-weight: 400;
     line-height: 1.75;
     letter-spacing: -0.01em;
     text-align: center;
     flex: unset;
     max-height: none;
     overflow: visible;
   }

   .description p {
     color: black;
     font-size: inherit;
     line-height: inherit;
     margin: 0;
   }

   .details {
     width: 100%;
     max-width: 760px;
     background: rgba(0,0,0,0.18);
     border: 1px solid rgba(255,255,255,0.12);
     border-radius: 18px;
     padding: 16px 20px;
     margin: 12px auto 0;
     text-align: left;
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
   }

   .details p {
     color: rgba(255,255,255,0.9);
     font-size: 15px;
     line-height: 1.65;
     margin: 0 0 8px;
   }

   .details p:last-child {
     margin-bottom: 0;
   }

   .details strong {
     color: #ffffff;
     font-weight: 700;
   }

   
   .no-image-placeholder {
     width: 100%;
     min-height: 150px;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   /* ================================================
      MODAL OVERLAY & APPLICATION FORM
      ================================================ */
   
   .modal-overlay {
     display: none;
     position: fixed;
     top: 0; left: 0;
     width: 100%; height: 100%;
     background: rgba(5, 10, 20, 0.6);
     z-index: 99999;
     justify-content: center;
     align-items: center;
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
   }
   
   .modal-overlay.active { display: flex; }
   
   .modal-card {
     background: linear-gradient(145deg, #0a1421 0%, #1a4a6b 60%, #29abe2 100%);
     padding: 48px 40px;
     border-radius: 28px;
     width: 90%;
     max-width: 520px;
     position: relative;
     border: 1px solid rgba(255,255,255,0.1);
     box-shadow: 0 32px 80px rgba(0,0,0,0.4);
   }
   
   .modal-card h3 {
     font-size: 24px;
     font-weight: 700;
     color: #ffffff;
     letter-spacing: -0.02em;
     margin-bottom: 4px;
   }
   
   .close-modal {
     position: absolute;
     top: 18px; right: 20px;
     background: rgba(255,255,255,0.1);
     border: 1px solid rgba(255,255,255,0.15);
     width: 34px; height: 34px;
     border-radius: 50%;
     font-size: 16px;
     cursor: pointer;
     color: #ffffff;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.2s;
   }
   
   .close-modal:hover { background: rgba(255,255,255,0.2); }
   
   #applicationForm {
     display: flex;
     flex-direction: column;
     gap: 14px;
     margin-top: 28px;
   }
   
   #applicationForm .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
   }
   
   #applicationForm input,
   #applicationForm select {
     width: 100%;
     padding: 14px 18px;
     border-radius: 12px;
     border: 1px solid rgba(255,255,255,0.12);
     background: rgba(255,255,255,0.07);
     color: #ffffff;
     font-size: 14px;
     font-family: 'Satoshi', sans-serif;
     outline: none;
     transition: border-color 0.2s, background 0.2s;
   }
   
   #applicationForm input::placeholder { color: rgba(255,255,255,0.35); }
   #applicationForm input:focus,
   #applicationForm select:focus {
     border-color: rgba(255,255,255,0.4);
     background: rgba(255,255,255,0.11);
   }
   
   #applicationForm select {
     color: rgba(255,255,255,0.7);
     cursor: pointer;
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 16px center;
     padding-right: 40px;
   }
   
   #applicationForm select option { background: #0a1421; color: white; }
   
   .file-upload {
     border: 1.5px dashed rgba(255,255,255,0.2);
     padding: 20px;
     border-radius: 12px;
     text-align: center;
     transition: border-color 0.2s;
   }
   
   .file-upload:hover { border-color: rgba(255,255,255,0.4); }
   
   .file-upload label {
     display: block;
     margin-bottom: 10px;
     font-size: 13px;
     font-weight: 500;
     color: rgba(255,255,255,0.6);
     cursor: pointer;
   }
   
   .file-upload input[type="file"] {
     font-size: 13px;
     color: rgba(255,255,255,0.5);
     background: transparent;
     border: none;
     padding: 0;
     cursor: pointer;
   }
   
   .submit-btn {
     background: #ffffff;
     color: #0a1421;
     border: none;
     padding: 15px;
     border-radius: 100px;
     font-size: 15px;
     font-weight: 700;
     font-family: 'Satoshi', sans-serif;
     cursor: pointer;
     margin-top: 6px;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     letter-spacing: -0.01em;
   }
   
   .submit-btn:hover {
     transform: scale(1.02);
     box-shadow: 0 8px 24px rgba(255,255,255,0.15);
   }
   
   /* ================================================
      ALERT MESSAGES
      ================================================ */
   
   .alert-success,
   .alert-error {
     position: fixed;
     top: 100px;
     right: 20px;
     padding: 15px 25px;
     border-radius: 8px;
     z-index: 9999;
     box-shadow: 0 2px 10px rgba(0,0,0,0.2);
     font-family: 'Satoshi', sans-serif;
     color: white;
   }
   
   .alert-success { background: #73c476b5; }
   .alert-error   { background: #d46e66a5; }


/* ================================================
   REVIEW FORM SECTION – Fix visibility
   ================================================ */

   .review-form-section {
    background: #f8f9fa !important;
}

.review-form-section .form-control,
.review-form-section .form-select {
    background: white !important;
    color: #1a1a1a !important;
    border: 1px solid #ddd !important;
    padding: 12px 15px !important;
    border-radius: 12px !important;
}

.review-form-section .form-control:focus,
.review-form-section .form-select:focus {
    border-color: #5697f8 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(86,151,248,0.2) !important;
}

.review-form-section label {
    color: #1a1a1a !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.review-form-section .alert {
    padding: 12px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.review-form-section .alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.review-form-section .alert-danger {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.review-form-section .btn-main-cta {
    background: #0a1421 !important;
    color: white !important;
    border: none;
    padding: 12px 24px !important;
    font-size: 16px;
    font-weight: 600;
    border-radius: 60px;
    transition: all 0.3s ease;
}

.review-form-section .btn-main-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(10,20,33,0.2);
}

/* Style the file input label for better visibility */
.review-form-section input[type="file"] {
    background: white !important;
    color: #1a1a1a !important;
    border: 1px solid #ddd !important;
    padding: 10px !important;
}

.review-form-section small.text-muted {
    color: #6c757d !important;
    display: block;
    margin-top: 10px;
}


/* =====================================================
   CLEAN RESPONSIVE FIX - FINAL
   ===================================================== */

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

img,
video,
iframe,
svg {
  max-width: 100%;
}

@media (max-width: 850px) {
  :root {
    --section-pad: 60px;
    --radius-xl: 26px;
    --radius-lg: 22px;
  }

  body {
    position: relative;
  }

  .container,
  .trusted-container,
  .showcase-container,
  .portfolio-container,
  .cta-container,
  .contact-container,
  .footer-container,
  .faq-container,
  .wc-container,
  .values-flex-container,
  .team-grid,
  .accordion,
  .stats-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 18px auto 8px !important;
    width: 100% !important;
    text-align: center !important;
  }

  .logo img {
    height: 30px !important;
    margin: 0 auto !important;
  }

  .navbar {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 14px 0 !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: auto !important;
  }

  .nav-pill {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    border-radius: 22px !important;
  }

  .pill-icon {
    width: 30px !important;
    height: 30px !important;
    margin-right: 6px !important;
  }

  .nav-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px 12px !important;
    width: auto !important;
  }

  .nav-links a {
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .hero {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 55px 16px 42px !important;
    text-align: center !important;
    overflow: visible !important;
  }

  .projects-pill {
    max-width: 100% !important;
    margin: 0 auto 24px !important;
    padding: 7px 12px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  .projects-count {
    font-size: 11px !important;
  }

  .hero-headline {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(30px, 9vw, 40px) !important;
    line-height: 1.08 !important;
    margin-bottom: 16px !important;
    text-align: center !important;
  }

  .hero-subtext {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto 28px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    text-align: center !important;
  }

  .btn-main-cta,
  .cta-button {
    max-width: 100% !important;
    white-space: normal !important;
  }

  .hero-showcase,
  .cta-banner,
  .contact-section,
  .portfolio-grid,
  .about-us,
  .capabilities,
  .process-section,
  .team-section,
  .faq-section,
  .wc-section,
  .values-grid-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .showcase-container,
  .showcase-video {
    border-radius: 20px !important;
  }

  .portfolio-container,
  .stats-grid,
  .wc-grid,
  .faq-container {
    grid-template-columns: 1fr !important;
  }

  .portfolio-card {
    min-height: 280px !important;
    padding: 26px 22px 0 !important;
  }

  .floating-mockup,
  .mockup-img {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  .image-stack {
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .stack-img,
  .image-stack .stack-img,
  .image-stack.animate-in .stack-img,
  .img-1,
  .img-2,
  .img-3,
  .img-4,
  .img-5,
  .image-stack.animate-in .img-1,
  .image-stack.animate-in .img-2,
  .image-stack.animate-in .img-3,
  .image-stack.animate-in .img-4,
  .image-stack.animate-in .img-5 {
    position: relative !important;
    width: 100% !important;
    height: 170px !important;
    transform: none !important;
    inset: auto !important;
  }

  .img-5,
  .image-stack.animate-in .img-5 {
    grid-column: 1 / -1 !important;
    max-width: 50% !important;
    margin: 0 auto !important;
  }

  .content-inner,
  .contact-container,
  .cta-container,
  .footer-top,
  .footer-bottom {
    flex-direction: column !important;
  }

  .content-left {
    flex: none !important;
  }

  .tag-list {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  .tag {
    width: auto !important;
  }

  .cta-content,
  .contact-container {
    padding: 36px 22px !important;
  }

  .cta-graphic,
  .circle-container,
  .calendly-floating-widget {
    display: none !important;
  }

  .slider-viewport {
    height: auto !important;
    min-height: 300px !important;
  }

  .info-display {
    position: relative !important;
    padding-top: 40px !important;
  }

  .form-row {
    flex-direction: column !important;
    gap: 0 !important;
  }

  .footer-links {
    flex-wrap: wrap !important;
    gap: 28px !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .nav-pill {
    max-width: 330px !important;
  }

  .nav-links a {
    font-size: 9px !important;
  }

  .hero {
    padding-top: 45px !important;
  }

  .hero-headline {
    font-size: 30px !important;
  }

  .review-card {
    width: 300px !important;
    max-width: calc(100vw - 32px) !important;
  }

  .gallery-item {
    width: 220px !important;
    height: 160px !important;
  }

  .services-grid,
  .team-grid {
    grid-template-columns: 1fr !important;
  }
}




/* ================================================
   FINAL MOBILE FLOATING WIDGET FIX
================================================ */

@media (max-width: 768px) {

  .calendly-floating-widget {
    display: flex !important;
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
    padding: 8px !important;
    border-radius: 20px !important;
    gap: 10px !important;
    z-index: 999999 !important;
  }

  .calendly-graphic {
    width: 58px !important;
    height: 58px !important;
    border-radius: 14px !important;
  }

  .calendly-content h3 {
    font-size: 13px !important;
  }

  .calendly-content p {
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
  }

  .btn-calendly-cta {
    font-size: 11px !important;
    padding: 7px 8px 7px 12px !important;
  }

  .btn-icon-circle {
    width: 18px !important;
    height: 18px !important;
  }

  .close-widget {
    width: 24px !important;
    height: 24px !important;
    top: -8px !important;
    right: -8px !important;
  }
}

@media (max-width: 480px) {

  .calendly-floating-widget {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
  }

  .calendly-content h3 {
    font-size: 12px !important;
  }

  .calendly-content p {
    display: none !important;
  }

  .btn-calendly-cta {
    font-size: 10px !important;
  }
}

@media (max-width: 768px) {
  .calendly-floating-widget {
    width: 180px !important;
    max-width: 230px !important;
    right: 10px !important;
    left: auto !important;
    bottom: 10px !important;
    transform: none !important;
  }
}

@media (max-width: 380px) {
  .calendly-floating-widget {
    width: 1800px !important;
    max-width: 210px !important;
  }
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #ffffff !important;
  font-size: 18px;
  transition: all 0.3s ease;
  margin: 0 5px;
  text-decoration: none;
}

.social-icons a:hover {
  background: #5697f8;
  transform: translateY(-3px);
  color: #ffffff;
}