:root {
      --bg: 0 100% 100%;
      --fg: 224 71% 4%;
      --muted: 220 14% 90%;
      --muted-2: 220 14% 96%;
      --primary: 200 91.2% 59.8%;
      --accent: 200 91.2% 35.8%;
      --ring: 200 91% 60%;
      --radius: 8px;
      --shadow: 0 8px 24px -8px hsl(220 40% 20% / 0.12);
      --transition: all 0.3s ease;
      --section-spacing: 100px;
    }
    *{box-sizing:border-box; margin:0; padding:0}
    html,body{height:100%}
    body{
      margin:0;
      color:hsl(var(--fg));
      background: #f5f9ff url('images/background.jpg') center / cover fixed no-repeat;
      font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      overflow-x: hidden;
    }
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      backdrop-filter: blur(2px);
      z-index: -1;
    }
    a{color:hsl(var(--fg)); text-decoration:none}
    img{max-width:100%; display:block}
    .brand{height:56px; width:auto; display:block}
    .brand-link{display:flex; align-items:center; gap:8px}
    @media (max-width: 920px){.brand{height:48px}}
    @media (max-width: 520px){.brand{height:40px}}
    .container{max-width:1200px; margin:0 auto; padding:0 20px}
    .section{padding:var(--section-spacing) 0}
    h1,h2,h3,h4{line-height:1.2; margin:0 0 16px; font-weight: 700}
    h1{font-size:clamp(2.5rem, 5vw, 3.5rem);}
    h2{font-size:clamp(1.8rem, 3.5vw, 2.5rem);}
    h3{font-size:clamp(1.4rem, 2.5vw, 1.8rem);}
    h4{font-size:1.2rem;}
    p.lead{color:hsl(var(--fg) / 0.7); font-size:clamp(1rem, 1.2vw, 1.2rem); max-width:800px; margin-bottom: 24px}
    .muted{color:hsl(var(--fg)/0.65)}
    .text-center{text-align:center}
    .section-title {
      text-align: center;
      margin-bottom: 50px;
      position: relative;
    }
    .section-title .pill {
      display: inline-block;
      margin-bottom: 15px;
    }
    .section-title::after {
      content: '';
      display: block;
      width: 60px;
      height: 4px;
      background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)));
      margin: 15px auto 0;
      border-radius: 2px;
    }

    /* Glassmorphism styles */
    .glass {
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: var(--shadow);
    }
    
    .card {
      border:1px solid hsl(var(--muted));
      border-radius:var(--radius);
      transition: var(--transition);
      box-shadow: var(--shadow);
    }
    
    .card.pad {
      padding:32px;
    }
    
    .service-card {
      padding: 30px;
      border: 1px solid hsl(var(--muted));
      border-radius: var(--radius);
      transition: var(--transition);
      height: 100%;
      box-shadow: var(--shadow);
    }
    
    .testimonial-card {
      border:1px solid hsl(var(--muted)); 
      border-radius: var(--radius); 
      padding: 30px; 
      transition: var(--transition); 
      display:flex; 
      flex-direction:column; 
      gap: 16px; 
      height:100%; 
      box-shadow: var(--shadow);
    }
    
    /* Navbar - Responsive */
    .navbar{
      position:sticky; top:0; z-index:20;
      backdrop-filter: saturate(180%) blur(10px);
      background: rgba(255, 255, 255, 0.9);
      border-bottom:1px solid hsl(var(--muted));
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .nav-wrap{
      display:flex; align-items:center; justify-content:space-between;  
      height:80px; position: relative;
    }
    .nav{
      display:flex; gap:24px; align-items:center;
      transition: var(--transition);
    }
    .nav a{color:hsl(var(--fg)/0.8); position:relative; font-size:15px; font-weight: 500}
    .nav a:hover,.nav a.active{color:hsl(var(--primary))}
    .nav a::after{
      content:""; position:absolute; left:0; bottom:-3px; height:2px; width:100%;
      background:hsl(var(--primary)); transform:scaleX(0); transform-origin:bottom right; transition:transform .25s ease;
    }
    .nav a:hover::after{transform:scaleX(1); transform-origin:bottom left;}

    /* Mobile Menu Toggle */
    .menu-toggle {
      display: none;
      background: transparent;
      border: none;
      cursor: pointer;
      width: 40px;
      height: 40px;
      position: relative;
      z-index: 25;
    }
    
    .menu-icon,
    .menu-icon::before,
    .menu-icon::after {
      content: '';
      display: block;
      width: 24px;
      height: 2px;
      background: hsl(var(--fg));
      position: absolute;
      left: 8px;
      transition: var(--transition);
    }
    
    .menu-icon {
      top: 19px;
    }
    
    .menu-icon::before {
      top: -6px;
    }
    
    .menu-icon::after {
      top: 6px;
    }
    
    .menu-toggle.active .menu-icon {
      background: transparent;
    }
    
    .menu-toggle.active .menu-icon::before {
      transform: translateY(6px) rotate(45deg);
    }
    
    .menu-toggle.active .menu-icon::after {
      transform: translateY(-6px) rotate(-45deg);
    }

    /* Buttons */
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:14px 28px; border-radius:var(--radius); font-weight:600; border:1px solid transparent;
      background:hsl(var(--primary)); color:#fff; box-shadow:var(--shadow); cursor:pointer; transition:transform .15s ease, opacity .15s ease;
      min-height: 50px;
      min-width: 50px;
      font-size: 1rem;
    }
    .btn:hover{transform:translateY(-3px); background:hsl(var(--accent)); box-shadow: 0 12px 30px -10px hsl(200 91% 50% / 0.35)}
    .btn:focus-visible{outline:2px solid hsl(var(--ring)); outline-offset:2px}
    .btn.secondary{background:hsl(var(--muted-2)); color:hsl(var(--fg)); border-color:hsl(var(--muted))}
    .btn.secondary:hover{background:hsl(var(--muted)); border-color: hsl(var(--primary)/0.3)}
    .btn.ghost{background:transparent; border-color:hsl(var(--muted)); color:hsl(var(--fg))}
    .btn.ghost:hover{background:hsl(var(--muted-2));}

    /* Cards & surfaces */
    .hover-scale{transition:transform .18s ease}
    .hover-scale:hover{transform:translateY(-5px)}

    /* Forms */
    .grid{display:grid; gap:20px}
    .grid-2{grid-template-columns:1fr 1fr}
    .grid-3{grid-template-columns:1fr 1fr 1fr}
    @media (max-width: 920px){.grid-2{grid-template-columns:1fr}}
    @media (max-width: 720px){
      .grid-3{grid-template-columns:1fr}
    }
    label{font-size:14px; font-weight:500; display: block; margin-bottom: 8px}
    input,select,textarea{
      width:100%; padding:14px 16px; color:hsl(var(--fg));
      background:hsl(var(--muted-2)); border:1px solid hsl(var(--muted)); border-radius:var(--radius);
      font-size: 16px;
      transition: var(--transition);
    }
    input::placeholder, textarea::placeholder{color:hsl(var(--fg)/0.45)}
    input:focus, select:focus, textarea:focus{
      outline:2px solid hsl(var(--ring)); 
      outline-offset:2px;
      border-color: hsl(var(--primary));
      box-shadow: 0 0 0 3px hsl(var(--primary)/0.1);
    }
    
    /* Enhanced input hover effects */
    input:not([type="submit"]):hover, textarea:hover {
      border-color: hsl(var(--primary)/0.5);
    }

    /* Enhanced Project Gallery Grid */
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 40px;
      height: auto;
      grid-auto-rows: auto;
    }

    .project-card {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      transition: var(--transition);
      cursor: pointer;
      aspect-ratio: 16/9; /* Fixed landscape aspect ratio */
      box-shadow: var(--shadow);
    }

    .project-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 40px -15px rgba(0,0,0,0.15);
    }

    .project-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
      border-radius: var(--radius);
    }

    .project-card:hover img {
      transform: scale(1.05);
    }

    /* PROJECT OVERLAY MODIFIED - ALWAYS VISIBLE */
    .project-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 0%, hsla(var(--fg) / 0.7) 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 20px;
      opacity: 1;
      transition: opacity 0.3s ease;
      border-radius: var(--radius);
      color: white;
    }
    
    .project-overlay p {
      font-size: 1.2rem;
      font-weight: 600;
      margin: 0;
      text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }

    /* Responsive Grid */
    @media (max-width: 920px) {
      .projects-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 520px) {
      .projects-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .project-overlay p {
        font-size: 1rem;
      }
    }

    /* Modal */
    .modal-backdrop{
      position:fixed; inset:0; display:none; align-items:center; justify-content:center;
      background:hsl(var(--bg)/0.85); backdrop-filter:blur(6px); z-index:30;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .modal-backdrop.show{
      display: flex;
      opacity: 1;
    }
    .modal{
      width:min(520px, 92vw); border-radius:var(--radius); border:1px solid hsl(var(--muted)); 
      background:rgba(255, 255, 255, 0.9); padding:32px;
      transform: translateY(20px);
      transition: transform 0.3s ease;
      box-shadow: 0 20px 40px rgba(0,0,0,0.15);
      backdrop-filter: blur(10px);
    }
    .modal-backdrop.show .modal{
      transform: translateY(0);
    }

    /* Project Modal - NEW */
    .project-modal-backdrop{
      position:fixed; inset:0; display:none; align-items:center; justify-content:center;
      background:rgba(0, 0, 0, 0.9); backdrop-filter:blur(6px); z-index:35;
      opacity: 0;
      transition: opacity 0.3s ease;
      padding: 20px;
    }
    .project-modal-backdrop.show{
      display: flex;
      opacity: 1;
    }
    .project-modal{
      max-width:90vw; 
      max-height:90vh;
      border-radius:var(--radius); 
      background:rgba(255, 255, 255, 0.95); 
      padding:0;
      transform: translateY(20px) scale(0.9);
      transition: transform 0.3s ease;
      box-shadow: 0 20px 40px rgba(0,0,0,0.3);
      backdrop-filter: blur(10px);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .project-modal-backdrop.show .project-modal{
      transform: translateY(0) scale(1);
    }
    .project-modal img {
      max-width: 100%;
      max-height: 80vh;
      height: auto;
      width: auto;
      display: block;
      object-fit: contain;
    }
    .project-modal-close {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: bold;
      transition: var(--transition);
      z-index: 10;
    }
    .project-modal-close:hover {
      background: rgba(0, 0, 0, 0.9);
      transform: scale(1.1);
    }

    /* Footer */
    footer{border-top:1px solid hsl(var(--muted)); padding:60px 0 40px; margin-top:80px; background: rgba(255, 255, 255, 0.85);}

    /* Splash */
    #splash{
      position:fixed; inset:0; z-index:40; display:grid; place-items:center; background:hsl(var(--bg));
      animation:fade-in .3s ease both;
    }
    #splash h1{font-size:72px; letter-spacing:-1px; margin:0; color:hsl(var(--primary))}
    @keyframes fade-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}
    @keyframes fade-out{from{opacity:1} to{opacity:0}}

    .pill{display:inline-block; font-size:14px; padding:8px 16px; border:1px solid hsl(var(--muted)); border-radius:var(--radius); color:hsl(var(--fg)/0.8); background:hsl(var(--muted-2)); font-weight: 600; letter-spacing: 0.5px;}

    /* Responsive Layouts */
    .responsive-grid {
      display: grid;
      gap: 40px;
      grid-template-columns: 1fr 1fr;
    }
    
    @media (max-width: 920px) {
      .responsive-grid {
        grid-template-columns: 1fr;
      }
      
      .section {
        padding: 80px 0;
      }
      
      /* Mobile Navigation */
      .menu-toggle {
        display: block;
      }
      
      .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: hsl(var(--bg));
        flex-direction: column;
        padding: 20px;
        gap: 12px;
        border-bottom: 1px solid hsl(var(--muted));
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
      }
      
      .nav.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
      }
      
      .nav a {
        font-size: 16px;
        padding: 10px 0;
      }
      
      #splash h1 {
        font-size: 48px;
      }
    }

    @media (max-width: 520px) {
      :root {
        --section-spacing: 60px;
      }
      .container { padding: 0 16px; }
      .nav-wrap { height: 70px; }
      .brand { height: 40px; }
      .section { padding: 60px 0; }
      h1 { font-size: clamp(1.8rem, 5.5vw, 2rem); }
      h2 { font-size: clamp(1.5rem, 5vw, 1.8rem); }
      h3 { font-size: 1.3rem; }
      p.lead { font-size: 1rem; max-width: 100%; }
      .pill { font-size: 12px; padding: 6px 12px; }
      .btn { padding: 12px 20px; min-height: 46px; min-width: 46px; }
      .projects-grid { gap: 16px; }
      .project-card { aspect-ratio: 16/9; }
      footer { padding: 40px 0 30px; margin-top: 60px; }
      .responsive-grid { gap: 30px; }
      .hero-stats {
        grid-template-columns: 1fr;
      }
    }

    /* Animation Enhancements */
    .fade-in {
      animation: fade-in 0.6s ease forwards;
      opacity: 0;
    }
    
    .scale-in {
      animation: scale-in 0.4s ease forwards;
    }
    
    @keyframes scale-in {
      from {
        transform: scale(0.95);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }
    
    .slide-up {
      animation: slide-up 0.5s ease forwards;
      opacity: 0;
    }
    
    @keyframes slide-up {
      from {
        transform: translateY(20px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    
    /* Enhanced service cards */
    .service-card:hover {
      transform: translateY(-5px);
      border-color: hsl(var(--primary));
      box-shadow: 0 20px 40px -15px rgba(0,0,0,0.1);
    }
    
    .service-card h3 {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
      color: hsl(var(--primary));
    }
    
    .service-card svg {
      width: 28px;
      height: 28px;
      fill: hsl(var(--primary));
      flex-shrink: 0;
    }
    
    .service-list {
      list-style: none;
      padding: 0;
      margin: 16px 0 0;
    }
    
    .service-list li {
      padding: 8px 0;
      border-bottom: 1px solid hsl(var(--muted) / 0.3);
      color: hsl(var(--fg) / 0.8);
      position: relative;
      padding-left: 24px;
    }
    
    .service-list li::before {
      content: '✓';
      position: absolute;
      left: 0;
      color: hsl(var(--primary));
      font-weight: bold;
    }
    
    .service-list li:last-child {
      border-bottom: none;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-top: 40px;
    }
    
    @media (max-width: 920px) {
      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 520px) {
      .stats-grid { grid-template-columns: 1fr; }
    }
    
    .stat-card {
      text-align: center;
      padding: 24px;
      border-radius: var(--radius);
      background: hsl(var(--muted-2));
      border: 1px solid hsl(var(--muted));
      transition: var(--transition);
      box-shadow: var(--shadow);
    }
    
    .stat-card:hover {
      border-color: hsl(var(--primary));
      transform: translateY(-3px);
    }
    
    .stat-card h3 {
      font-size: 2.5rem;
      margin-bottom: 8px;
      color: hsl(var(--primary));
      font-weight: 800;
    }
    
    .stat-card p {
      margin: 0;
      color: hsl(var(--fg) / 0.7);
      font-size: 0.9rem;
    }

    /* Hero improvements */
    .hero-grid{display:grid;grid-template-columns:1fr;align-items:center;gap:36px;justify-items:center}
    .hero-left{text-align:center; max-width: 900px; margin: 0 auto;}
    .hero-brand{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:12px}
    .hero-brand img{height:clamp(100px,18vw,200px);width:clamp(100px,18vw,200px);object-fit:contain;border-radius:20px;background:transparent;padding:12px;box-shadow:var(--shadow)}
    .hero-brand .brand-name{font-weight:800;letter-spacing:.2px}
    .hero-brand .brand-sub{font-size:14px;color:hsl(var(--fg)/0.6)}
    @media (max-width: 920px){.hero-grid{grid-template-columns:1fr}}
    .badge-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0 8px}
    .showcase-card{position:relative;border:1px solid hsl(var(--muted));border-radius:16px;background:hsla(0 0% 100% / 0.6);backdrop-filter:blur(10px);box-shadow:var(--shadow);padding:18px}
    .showcase-header{font-weight:700;color:hsl(var(--primary));margin-bottom:8px}
    .showcase-code{margin:0;background:hsl(var(--bg)/0.6);border:1px solid hsl(var(--muted));border-radius:12px;padding:14px;color:hsl(var(--fg)/0.85);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:12.5px;line-height:1.5}
    .showcase-footer{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
    .status{font-size:12px;padding:6px 10px;border-radius:10px;border:1px solid hsl(var(--muted));background:hsl(var(--bg)/0.6);color:hsl(var(--fg)/0.8)}
    .status.ok{color:#00e5ff;border-color:#00e5ff33;background:#00e5ff0d}
    .status.deploy{color:hsl(var(--primary));border-color:hsl(var(--primary)/0.35);background:hsl(var(--primary)/0.08)}
    .hero{position:relative; overflow:hidden; padding-top: 60px; padding-bottom: 80px;}
    .hero::before, .hero::after{content:""; position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; pointer-events:none}
    .hero::before{width:480px; height:480px; top:-160px; right:-120px; background:radial-gradient(ellipse at center, hsl(var(--primary) / .5), transparent 60%)}
    .hero::after{width:420px; height:420px; bottom:-140px; left:-120px; background:radial-gradient(ellipse at center, hsl(var(--accent) / .45), transparent 60%)}
    .gradient-text{background:linear-gradient(90deg, hsl(var(--fg)), hsl(var(--primary))); -webkit-background-clip:text; background-clip:text; color:transparent}
    .cta-group{display:flex; flex-wrap:wrap; gap:16px; margin-top:32px; justify-content:center}
    .hero-viewport{min-height: calc(100vh - 80px); min-height: calc(100svh - 80px); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; z-index:1}
    .hero-benefits{display:flex; flex-wrap:wrap; gap:14px 20px; justify-content:center; margin-top:20px; padding:0; list-style:none}
    .hero-benefits li{display:flex; align-items:center; gap:8px; color:hsl(var(--fg)/0.8); font-size:0.95rem}
    .hero-benefits svg{width:18px; height:18px; fill:hsl(var(--primary))}
    .scroll-indicator{position:absolute; left:50%; bottom:20px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; justify-content:center; color:hsl(var(--fg)/0.6); font-size:0.9rem; text-decoration:none}
    .scroll-indicator .dot{width:8px; height:8px; border-radius:50%; background:hsl(var(--primary)); animation:bounce 1.6s infinite}
    @keyframes bounce{0%,100%{transform:translateY(0); opacity:1} 50%{transform:translateY(6px); opacity:.6}}
    
    /* Testimonials */
    .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    @media (max-width: 920px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 520px) { .testimonial-grid { grid-template-columns: 1fr; gap: 16px; } }

    .testimonial-card:hover {
      border-color: hsl(var(--primary));
      transform: translateY(-5px);
      box-shadow: 0 20px 40px -15px rgba(0,0,0,0.1);
    }
    
    .testimonial-card blockquote { margin: 8px 0 0; color: hsl(var(--fg) / 0.85); font-style: italic; line-height: 1.7; }
    .testimonial-author { display:flex; align-items:center; gap:12px; margin-top:auto; }
    .testimonial-author img { width:50px; height:50px; border-radius:50%; border:1px solid hsl(var(--muted)); object-fit:cover; }
    .stars { color: hsl(var(--primary)); font-weight: 700; letter-spacing: 1px; font-size: 18px; }
    
    /* Company Overview */
    .about-content {
      background: rgba(255, 255, 255, 0.85);
      border-radius: var(--radius);
      padding: 40px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(6px);
    }
    .about-section {
      margin-bottom: 30px;
    }
    .about-section:last-child {
      margin-bottom: 0;
    }
    .about-values {
      list-style: none;
      padding: 0;
      margin-top: 16px;
    }
    .about-values li {
      padding: 12px 0;
      position: relative;
      padding-left: 32px;
      font-size: 16px;
      border-bottom: 1px solid hsl(var(--muted) / 0.3);
    }
    .about-values li:last-child {
      border-bottom: none;
    }
    .about-values li::before {
      content: '•';
      position: absolute;
      left: 0;
      color: hsl(var(--primary));
      font-size: 24px;
      line-height: 1;
      top: 8px;
    }
    
    /* Stats */
    .hero-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 40px;
    }
    .kpi {
      padding: 20px;
      border: 1px solid hsl(var(--muted));
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.8);
      text-align: center;
      box-shadow: var(--shadow);
      backdrop-filter: blur(6px);
    }
    .kpi h3 {
      font-size: 2.2rem;
      margin-bottom: 8px;
      background: linear-gradient(90deg, hsl(var(--primary)), hsl(220 14% 30%));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .kpi p {
      margin: 0;
      color: hsl(var(--fg) / 0.7);
    }
    
    /* Contact info */
    .contact-info {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .contact-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }
    .contact-icon {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      margin-top: 4px;
      fill: hsl(var(--primary));
    }
    .contact-details {
      flex: 1;
    }
    .contact-details strong {
      display: block;
      margin-bottom: 4px;
    }
    
    /* Pagination for services */
    .services-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-bottom: 30px;
    }
    
    @media (max-width: 920px) {
      .services-container {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
    @media (max-width: 520px) {
      .services-container {
        grid-template-columns: 1fr;
      }
    }
    
    .pagination {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 30px;
    }
    
    .pagination-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition);
      font-weight: 500;
    }
    
    .pagination-btn:hover {
      color: hsl(var(--primary));
    }
    
    .pagination-btn.active {
      color: white;
    }
    
    .service-item {
      display: none;
    }
    
    .service-item.active {
      display: block;
    }
    
 /* General Reset for Founder Section */
.founder-profile-section {
  padding: 60px 20px;
  background-color: #f9f9f9;
}

/* Title Styles */
.section-title {
  text-align: center;
  margin-bottom: 40px;
}
.section-title .pill {
  font-size: 1rem;
  font-weight: 600;
  background-color: hsl(var(--primary));
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 10px;
}
.section-title h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
}

/* Founder Profile Layout */
.founder-profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Image Container */
.founder-image-container {
  flex: 1 1 300px;
  display: flex;
  justify-content: center;
  background: transparent !important;
}

/* Founder Image Styles */
.founder-img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  object-fit: cover;
  display: block;
}
.founder-img:hover {
  transform: scale(1.05);
}

/* Founder Details */
.founder-details {
  flex: 2 1 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent !important;
}
.founder-details h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.founder-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: hsl(var(--primary));
  margin-bottom: 20px;
}
.founder-bio {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
  color: hsl(var(--fg)/0.8);
}

/* Social Icons */
.founder-social {
  display: flex;
  gap: 16px;
}
.founder-social a {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsl(var(--muted-2));
  border-radius: 50%;
  transition: background-color 0.3s, transform 0.3s;
}
.founder-social a:hover {
  background-color: hsl(var(--primary));
  transform: translateY(-3px);
}
.social-icon {
  width: 24px;
  height: 24px;
  color: white;
}

/* Explicitly override backgrounds to ensure transparency */
#founder,
.founder-profile,
.founder-profile * {
  background-color: transparent !important;
  background: transparent !important;
}

/* Responsive Design */
@media(max-width: 768px) {
  .founder-profile {
    flex-direction: column;
    align-items: center;
  }
  .founder-image-container {
    margin-bottom: 20px;
  }
  .founder-details {
    text-align: center;
  }
}

/* Responsive adjustments */
@media(max-width: 768px){
  .founder-profile.new-concept {
    flex-direction: column;
    text-align: center;
  }
  .founder-image-container {
    width: 180px;
    height: 180px;
    margin: 0 auto 20px;
  }
  .founder-info {
    padding-left: 0;
  }
}

/* Responsive adjustments */
@media(max-width: 768px){
  .founder-profile.new-concept {
    flex-direction: column;
    text-align: center;
  }
  .founder-image-container {
    width: 180px;
    height: 180px;
    margin: 0 auto 20px;
  }
  .founder-info {
    padding-left: 0;
  }
} 
    
    /* Privacy Notice */
    .privacy-notice {
      font-size: 0.8rem; 
      color: hsl(var(--fg)/0.6); 
      margin-top: 12px; 
      text-align: center;
      padding: 10px;
      background: hsl(var(--muted-2));
      border-radius: var(--radius);
      border: 1px solid hsl(var(--muted));
    }

    /* Enhanced Get Quote button */
    .nav .btn.primary {
      background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
      color: white;
      border: none;
      padding: 12px 24px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      font-weight: 600;
      letter-spacing: 0.5px;
    }
    
    .nav .btn.primary:hover {
      background: linear-gradient(135deg, hsl(var(--primary) / 0.9), hsl(var(--accent) / 0.9));
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    }

    /* Mobile-specific adjustments */
    @media (max-width: 768px) {
      .hero-viewport {
        min-height: 85vh;
      }
      
      .hero {
        padding-top: 40px;
        padding-bottom: 40px;
      }
      
      .hero-left h1 {
        font-size: clamp(2rem, 7vw, 2.8rem);
      }
      
      .cta-group {
        flex-direction: column;
        align-items: center;
      }
      
      .hero-stats {
        gap: 15px;
        margin-top: 30px;
      }
      
      .kpi {
        padding: 15px;
      }
      
      .kpi h3 {
        font-size: 1.8rem;
      }
      
      .service-card {
        padding: 20px;
      }
      
      .testimonial-card {
        padding: 20px;
      }
      
      .about-content {
        padding: 25px;
      }
      
      .founder-profile {
        padding: 15px;
      }
      
      .founder-details h2 {
        font-size: 1.8rem;
      }
      
      .founder-bio {
        font-size: 0.95rem;
      }
      
      .modal {
        padding: 20px;
      }
      
      .brand-link img {
        height: 70px;
        width: 70px;
      }
      
      .nav .btn.primary {
        padding: 10px 20px;
        font-size: 0.9rem;
      }
    }
    
    @media (max-width: 480px) {
      :root {
        --section-spacing: 50px;
      }
      
      .hero {
        padding-top: 30px;
        padding-bottom: 30px;
      }
      
      .section {
        padding: 50px 0;
      }
      
      .section-title {
        margin-bottom: 30px;
      }
      
      .section-title h2 {
        font-size: clamp(1.6rem, 6vw, 1.8rem);
      }
      
      .contact-info {
        gap: 15px;
      }
      
      .contact-item {
        gap: 12px;
      }
      
      .founder-social a {
        width: 45px;
        height: 45px;
      }
      
      .social-icon {
        width: 20px;
        height: 20px;
      }
    }
    
    /* Contact section improvements */
    @media (max-width: 920px) {
      .contact-info-container {
        margin-top: 30px;
      }
    }
    
    .contact-form-container {
      display: flex;
      flex-direction: column;
    }
    
    .contact-info-container {
      display: flex;
      flex-direction: column;
    }
    
    /* Pagination arrows */
    .pagination-arrow {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: hsl(var(--muted-2));
      border: 1px solid hsl(var(--muted));
      cursor: pointer;
      transition: var(--transition);
      font-size: 1.5rem;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
    }
    
    .pagination-arrow:hover {
      background: hsl(var(--primary));
      color: white;
      border-color: hsl(var(--primary));
    }
    
    .pagination-arrow:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    .pagination-arrow.prev {
      left: -60px;
    }
    
    .pagination-arrow.next {
      right: -60px;
    }
    
    .pagination-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 30px;
      position: relative;
    }
    
    .pagination-indicator {
      display: inline-block;
      padding: 8px 16px;
      background: hsl(var(--muted-2));
      border: 1px solid hsl(var(--muted));
      border-radius: var(--radius);
      font-weight: 600;
      min-width: 80px;
      text-align: center;
    }
    
    /* COMPACT FORM STYLES */
    .compact-form {
      padding: 24px;
    }
    
    .compact-form .grid-2 {
      gap: 15px;
    }
    
    .compact-form input,
    .compact-form select,
    .compact-form textarea {
      padding: 12px 14px;
      font-size: 14px;
    }
    
    .compact-form label {
      font-size: 13px;
      margin-bottom: 6px;
    }
    
    .compact-form .btn {
      padding: 12px 20px;
      font-size: 15px;
    }
    
    .compact-form .privacy-notice {
      font-size: 0.75rem;
      padding: 8px;
    }
    
    @media (max-width: 768px) {
      .compact-form {
        padding: 18px;
      }
      
      .compact-form .grid-2 {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }
    
    /* COMPACT MODAL */
    .compact-modal .modal {
      padding: 24px;
      max-width: 600px;
    }
    
    .compact-modal .grid-2 {
      gap: 15px;
    }
    
    .compact-modal input,
    .compact-modal select,
    .compact-modal textarea {
      padding: 12px 14px;
      font-size: 14px;
    }
    
    .compact-modal label {
      font-size: 13px;
      margin-bottom: 6px;
    }
    
    .compact-modal .btn {
      padding: 12px 20px;
      font-size: 15px;
    }
    
    .compact-modal .privacy-notice {
      font-size: 0.75rem;
      padding: 8px;
    }
    
    @media (max-width: 768px) {
      .compact-modal .modal {
        padding: 18px;
      }
      
      .compact-modal .grid-2 {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }
    
    /* Services Carousel */
    #services-carousel {
      position: relative;
      overflow: hidden;
      padding: 0 50px;
    }
    
    .service-item {
      display: none;
    }
    
    .service-item.active {
      display: block;
    }
    
    /* Mobile adjustments for services section */
    @media (max-width: 920px) {
      #services-carousel {
        padding: 0 40px;
      }
      
      .pagination-arrow {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
      }
      
      .pagination-arrow.prev {
        left: -50px;
      }
      
      .pagination-arrow.next {
        right: -50px;
      }
    }
    
    @media (max-width: 768px) {
      #services-carousel {
        padding: 0 35px;
      }
      
      .pagination-arrow {
        width: 36px;
        height: 36px;
        font-size: 1rem;
      }
      
      .pagination-arrow.prev {
        left: -40px;
      }
      
      .pagination-arrow.next {
        right: -40px;
      }
      
      .service-card {
        padding: 20px;
      }
    }
    
    @media (max-width: 520px) {
      #services-carousel {
        padding: 0 20px;
      }
      
      .pagination-arrow {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
      }
      
      .pagination-arrow.prev {
        left: -25px;
      }
      
      .pagination-arrow.next {
        right: -25px;
      }
    }
    
    /* Smaller Get Quote Section */
    .compact-quote .modal {
      max-width: 500px;
      padding: 20px;
    }
    
    .compact-quote input, 
    .compact-quote select, 
    .compact-quote textarea {
      padding: 12px 14px;
      font-size: 14px;
    }
    
    .compact-quote label {
      font-size: 13px;
      margin-bottom: 6px;
    }
    
    .compact-quote .btn {
      padding: 12px 20px;
      font-size: 15px;
    }
    
    .compact-quote .privacy-notice {
      font-size: 0.75rem;
      padding: 8px;
      margin-top: 10px;
    }
    
    .compact-quote .grid-2 {
      gap: 12px;
    }
    
    /* Contact section height reduction */
    .contact-form-container.compact-form {
      padding: 20px;
    }
    
    .contact-info-container.card.pad {
      padding: 20px;
    }
    
    .contact-form-container .grid-2 {
      gap: 15px;
    }
    
    .contact-form-container input,
    .contact-form-container select,
    .contact-form-container textarea {
      padding: 12px 14px;
    }
    
    .contact-form-container label {
      font-size: 13px;
      margin-bottom: 6px;
    }
    
    .contact-form-container .btn {
      padding: 12px 20px;
      font-size: 15px;
    }
    
    .contact-item {
      gap: 12px;
    }
    
    .contact-icon {
      width: 20px;
      height: 20px;
    }
    
    /* Mobile adjustments for contact section */
    @media (max-width: 768px) {
      .contact-form-container.compact-form {
        padding: 18px;
      }
      
      .contact-info-container.card.pad {
        padding: 18px;
      }
    }

   /* ——————————————————————————————
   MOBILE OVERRIDES
   Target ≤768px for the button and ≤520px for card sizing
   —————————————————————————————— */
@media (max-width: 768px) {
  /* 1) Make sure “Get Quote” shows in the collapsed nav */
  .nav .btn.primary {
    display: block;          /* force it onto its own line */
    width: 100%;             /* full width of the nav panel */
    margin: 8px 0;           /* a little breathing room */
  }
  /* 2) Ensure the modal sits on top of everything */
  .modal-backdrop.compact-quote {
    z-index: 9999;
  }
}

@media (max-width: 520px) {
  /* 3) Shrink the Get-Quote modal even further */
  .compact-modal.compact-quote .modal {
    width: 90vw;             /* never wider than 90% of viewport */
    max-width: 320px;        /* cap at 320px */
    padding: 12px;           /* tighter inside padding */
  }

  /* 4) Tighter overall padding on Services section */
  section#services {
    padding: 30px 0;
    background-attachment: scroll; /* stop the fixed background from blowing out */
  }

  /* 5) Turn services into a single column and shrink cards */
  #services .services-container {
    grid-template-columns: 1fr;    
  }
  .service-card {
    padding: 16px;           /* less white-space inside */
    font-size: 0.9rem;       /* slightly smaller text */
    height: auto !important; /* let the card grow naturally */
  }
  .service-card h3 {
    font-size: 1.1rem;
  }
  .service-list li {
    font-size: 0.85rem;
  }
  #services-carousel {
    padding: 0 8px;          /* minimal side padding */
  }
}