/* =============================================
       CSS CUSTOM PROPERTIES
    =============================================== */
    :root {
        --navy:        #0D1B3E;
        --navy-light:  #162347;
        --teal:        #00C9A7;
        --teal-dark:   #00A888;
        --blue:        #4776E6;
        --blue-light:  #6B93FF;
        --bg:          #F0F4FF;
        --card-bg:     #FFFFFF;
        --border:      #E4E8F0;
        --muted:       #6B7280;
        --gradient:    linear-gradient(135deg, #00C9A7 0%, #4776E6 100%);
        --gradient-r:  linear-gradient(135deg, #4776E6 0%, #00C9A7 100%);
        --gradient-dk: linear-gradient(135deg, #0D1B3E 0%, #162e6e 100%);
        --shadow-sm:   0 2px 12px rgba(13,27,62,0.07);
        --shadow:      0 4px 24px rgba(13,27,62,0.10);
        --shadow-lg:   0 8px 48px rgba(13,27,62,0.16);
        --radius:      18px;
        --radius-sm:   12px;
        --radius-xs:   8px;
        --hh:          70px; /* header height */
        --trans:       all 0.3s cubic-bezier(0.4,0,0.2,1);
      }
  
      /* =============================================
         RESET & BASE
      =============================================== */
      *, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
      html { scroll-behavior: smooth; }
  
      body {
        font-family: 'DM Sans', sans-serif;
        background: var(--bg);
        color: var(--navy);
        overflow-x: hidden;
        padding-top: var(--hh);
        -webkit-font-smoothing: antialiased;
      }
  
      h1,h2,h3,h4,h5,h6 { font-family: 'Syne', sans-serif; font-weight: 700; }
  
      a { transition: var(--trans); }
  
      .gradient-text {
        background: var(--gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
  
      /* =============================================
         HEADER
      =============================================== */
      .site-header {
        position: fixed;
        inset: 0 0 auto 0;
        height: var(--hh);
        background: rgba(255,255,255,0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--border);
        z-index: 1000;
        display: flex;
        align-items: center;
      }
  
      .header-inner {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
      }
  
      /* Logo */
      .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        text-decoration: none;
        flex-shrink: 0;
      }
      .logo-mark {
        width: 42px; height: 42px;
        background: var(--gradient);
        border-radius: 11px;
        display: flex; align-items: center; justify-content: center;
        font-family: 'Syne', sans-serif;
        font-size: 18px; font-weight: 700;
        color: white;
        box-shadow: 0 4px 16px rgba(71,118,230,0.35);
        flex-shrink: 0;
      }
      .logo-name {
        font-family: 'Syne', sans-serif;
        font-size: 21px;
        font-weight: 800;
        color: var(--navy);
        line-height: 1;
      }
      .logo-name span { color: var(--teal); }
      .logo-tag {
        font-size: 10px;
        color: var(--muted);
        font-weight: 400;
        letter-spacing: 0.5px;
        margin-top: 2px;
      }
  
      /* Nav */
      .site-nav {
        display: flex;
        align-items: center;
        gap: 6px;
        list-style: none;
      }
      .nav-link {
        font-family: 'DM Sans', sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: var(--navy);
        text-decoration: none;
        cursor: pointer;
        padding: 7px 14px;
        border-radius: 50px;
        transition: var(--trans);
        white-space: nowrap;
      }
      .nav-link:hover { background: var(--bg); color: var(--teal); }
      .nav-link.active { background: rgba(0,201,167,0.1); color: var(--teal); font-weight: 600; }
  
      /* Buttons */
      .btn-primary-g {
        background: var(--gradient);
        color: white !important;
        border: none;
        padding: 10px 24px;
        border-radius: 50px;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: var(--trans);
        white-space: nowrap;
      }
      .btn-primary-g:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(71,118,230,0.38);
      }
      .btn-primary-g.lg { padding: 14px 36px; font-size: 15px; border-radius: 14px; }
  
      .btn-outline-g {
        background: transparent;
        color: var(--navy);
        border: 1.5px solid var(--border);
        padding: 10px 24px;
        border-radius: 50px;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: var(--trans);
      }
      .btn-outline-g:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-2px); }
      .btn-outline-g.lg { padding: 14px 36px; font-size: 15px; border-radius: 14px; }
  
      /* Mobile toggle */
      .menu-toggle {
        display: none;
        background: none;
        border: 1.5px solid var(--border);
        border-radius: 8px;
        padding: 6px 10px;
        font-size: 18px;
        color: var(--navy);
        cursor: pointer;
      }
  
      /* =============================================
         PAGE SYSTEM
      =============================================== */
      .page {
        display: none;
        animation: pageIn 0.45s cubic-bezier(0.4,0,0.2,1);
        min-height: calc(100vh - var(--hh));
      }
      .page.active { display: block; }
  
      @keyframes pageIn {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
      }
  
      /* =============================================
         SECTION HELPERS
      =============================================== */
      .section-pad  { padding: 88px 0; }
      .section-pad-sm { padding: 56px 0; }
  
      .section-label {
        display: inline-block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: var(--teal);
        margin-bottom: 10px;
      }
      .section-title {
        font-size: clamp(28px, 4vw, 44px);
        font-weight: 800;
        color: var(--navy);
        line-height: 1.15;
        margin-bottom: 16px;
      }
      .section-desc {
        font-size: 16px;
        color: var(--muted);
        line-height: 1.75;
      }
  
      /* Dark hero stripe */
      .dark-hero {
        background: var(--gradient-dk);
        padding: 72px 0 52px;
        text-align: center;
        color: white;
        position: relative;
        overflow: hidden;
      }
      .dark-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      }
      .dark-hero .section-label { color: rgba(0,201,167,0.9); }
      .dark-hero h1 { font-size: clamp(30px,4vw,52px); font-weight: 800; margin-bottom: 14px; color: white; }
      .dark-hero p  { font-size: 15px; opacity: 0.72; max-width: 480px; margin: 0 auto; }
  
      /* =============================================
         HOME – HERO
      =============================================== */
      .hero {
        min-height: calc(100vh - var(--hh));
        display: flex;
        align-items: center;
        padding: 60px 0 40px;
        background: var(--bg);
        position: relative;
        overflow: hidden;
      }
      .hero::before {
        content: '';
        position: absolute;
        top: -220px; right: -200px;
        width: 700px; height: 700px;
        background: radial-gradient(circle, rgba(71,118,230,0.07) 0%, transparent 65%);
        border-radius: 50%;
        pointer-events: none;
      }
      .hero::after {
        content: '';
        position: absolute;
        bottom: -120px; left: -150px;
        width: 500px; height: 500px;
        background: radial-gradient(circle, rgba(0,201,167,0.07) 0%, transparent 65%);
        border-radius: 50%;
        pointer-events: none;
      }
  
      /* Hero badge */
      .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(0,201,167,0.1);
        border: 1px solid rgba(0,201,167,0.28);
        color: var(--teal-dark);
        border-radius: 50px;
        padding: 6px 16px;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 22px;
      }
      .hero-badge .blink {
        width: 7px; height: 7px;
        background: var(--teal);
        border-radius: 50%;
        animation: blink 1.4s ease-in-out infinite;
      }
      @keyframes blink {
        0%,100% { opacity:1; transform: scale(1); }
        50%      { opacity:0.4; transform: scale(0.75); }
      }
  
      .hero-title {
        font-size: clamp(38px,5.5vw,68px);
        font-weight: 800;
        line-height: 1.08;
        color: var(--navy);
        margin-bottom: 22px;
      }
      .hero-desc {
        font-size: 16px;
        color: var(--muted);
        line-height: 1.75;
        max-width: 480px;
        margin-bottom: 10px;
      }
      .hero-ctas {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 36px;
      }
  
      /* =============================================
         TECH ORBIT (Hero Visual)
      =============================================== */
      .orbit-wrap {
        position: relative;
        width: 490px;
        height: 490px;
        margin: 0 auto;
      }
  
      /* SVG dashed lines */
      .orbit-svg {
        position: absolute;
        inset: 0;
        width: 100%; height: 100%;
        pointer-events: none;
        z-index: 1;
      }
      .orbit-line {
        stroke: #C8D5E8;
        stroke-width: 1.5;
        stroke-dasharray: 7 5;
        fill: none;
        animation: dash 20s linear infinite;
      }
      @keyframes dash {
        to { stroke-dashoffset: -300; }
      }
  
      /* Center logo */
      .orbit-center {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%,-50%);
        width: 100px; height: 100px;
        /* background: var(--gradient); */
        border-radius: 26px;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 16px 52px rgba(71,118,230,0.42), 0 4px 16px rgba(0,201,167,0.2);
        z-index: 5;
      }
      .orbit-center-text {
        font-family: 'Syne', sans-serif;
        font-size: 30px; font-weight: 800;
        color: white;
        letter-spacing: -1px;
      }
  
      /* Tech icon cards */
      .tic {
        position: absolute;
        background: white;
        border-radius: 14px;
        box-shadow: var(--shadow);
        border: 1px solid var(--border);
        padding: 10px 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        min-width: 78px;
        z-index: 3;
        cursor: default;
        transition: transform 0.3s, box-shadow 0.3s;
      }
      .tic:hover {
        transform: translateY(-8px) scale(1.06) !important;
        box-shadow: var(--shadow-lg) !important;
        z-index: 10;
      }
      .tic i { font-size: 30px; line-height: 1; }
      .tic span { font-size: 10px; font-weight: 700; color: var(--navy); white-space: nowrap; }
  
      /* Positions & float animations */
      .tic-1  { top: -5%;  left: 41%; animation: fl 3.2s ease-in-out infinite; }        /* React – top */
      .tic-2  { top:  8%;  right: 2%; animation: fl 3.6s ease-in-out infinite 0.4s; }  /* Node – top right */
      .tic-3  { top: 38%;  right: -6%; animation: fl 2.9s ease-in-out infinite 0.9s; }  /* AWS – right */
      .tic-4  { bottom:10%;right:  1%; animation: fl 3.3s ease-in-out infinite 1.3s; }  /* MySQL – btm right */
      .tic-5  { bottom:-2%;left: 41%;  animation: fl 3.0s ease-in-out infinite 0.6s; }  /* Python – bottom */
      .tic-6  { top: 38%;  left: -6%;  animation: fl 3.5s ease-in-out infinite 0.2s; }  /* PHP – left */
      .tic-7  { bottom:10%;left:  1%;  animation: fl 2.8s ease-in-out infinite 1.0s; }  /* Bootstrap – btm left */
      .tic-8  { top:  8%;  left: 2%;  animation: fl 3.1s ease-in-out infinite 0.5s; }  /* JS – top left */
  
      @keyframes fl {
        0%,100% { transform: translateY(0px); }
        50%      { transform: translateY(-13px); }
      }
  
      /* =============================================
         STATS BAR
      =============================================== */
      .stats-bar {
        background: white;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 44px 0;
      }
      .stat-num {
        font-family: 'Syne', sans-serif;
        font-size: 42px; font-weight: 800;
        background: var(--gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
      }
      .stat-lbl {
        font-size: 13px;
        color: var(--muted);
        font-weight: 500;
        margin-top: 6px;
      }
  
      /* =============================================
         FEATURE CARDS
      =============================================== */
      .feature-card {
        background: white;
        border-radius: var(--radius);
        padding: 30px;
        border: 1px solid var(--border);
        transition: var(--trans);
        height: 100%;
      }
      .feature-card:hover {
        transform: translateY(-7px);
        box-shadow: var(--shadow-lg);
        border-color: rgba(0,201,167,0.3);
      }
      .feature-icon {
        width: 52px; height: 52px;
        border-radius: 14px;
        display: flex; align-items: center; justify-content: center;
        font-size: 22px;
        margin-bottom: 18px;
        background: rgba(0,201,167,0.1);
      }
      .feature-card h4 { font-size: 17px; margin-bottom: 10px; }
      .feature-card p  { font-size: 14px; color: var(--muted); line-height: 1.65; margin: 0; }
  
      /* =============================================
         SERVICES PAGE
      =============================================== */
      .service-card {
        background: white;
        border-radius: var(--radius);
        border: 1px solid var(--border);
        overflow: hidden;
        transition: var(--trans);
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      .service-card:hover { transform: translateY(-9px); box-shadow: var(--shadow-lg); }
      .service-top {
        padding: 36px;
        background: var(--bg);
        display: flex; align-items: center; justify-content: center;
        min-height: 150px;
      }
      .service-emoji { font-size: 64px; }
      .service-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
      .price-tag {
        display: inline-block;
        background: rgba(0,201,167,0.1);
        border: 1px solid rgba(0,201,167,0.3);
        color: var(--teal-dark);
        border-radius: 50px;
        padding: 3px 14px;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 14px;
      }
      .service-body h3 { font-size: 20px; margin-bottom: 12px; }
      .service-body p  { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 18px; }
      .service-feat {
        list-style: none;
        padding: 0; margin: 0 0 24px;
        flex: 1;
      }
      .service-feat li {
        font-size: 13px;
        color: var(--navy);
        padding: 5px 0;
        display: flex;
        align-items: center;
        gap: 9px;
      }
      .service-feat li::before {
        content: '✓';
        font-weight: 800;
        font-size: 13px;
        background: var(--gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        flex-shrink: 0;
      }
  
      /* Process steps */
      .step-row {
        display: flex;
        gap: 20px;
        align-items: flex-start;
        margin-bottom: 28px;
      }
      .step-num {
        width: 44px; height: 44px;
        background: var(--gradient);
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        font-family: 'Syne', sans-serif;
        font-weight: 800; font-size: 18px;
        color: white;
        flex-shrink: 0;
      }
      .step-body h4 { font-size: 16px; margin-bottom: 5px; }
      .step-body p  { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.6; }
  
      /* =============================================
         TECH STACK PAGE
      =============================================== */
      .tech-cat { margin-bottom: 44px; }
      .tech-cat-title {
        font-size: 12px; font-weight: 700;
        color: var(--teal);
        letter-spacing: 2.5px;
        text-transform: uppercase;
        margin-bottom: 18px;
        display: flex; align-items: center; gap: 14px;
      }
      .tech-cat-title::after {
        content: ''; flex: 1;
        height: 1px; background: var(--border);
      }
      .tech-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: white;
        border: 1px solid var(--border);
        border-radius: 50px;
        padding: 9px 20px;
        margin: 5px;
        font-size: 14px; font-weight: 600;
        color: var(--navy);
        transition: var(--trans);
        cursor: default;
      }
      .tech-pill:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
      .tech-pill .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  
      /* =============================================
         CONTACT PAGE
      =============================================== */
      .contact-card {
        background: white;
        border-radius: var(--radius);
        padding: 40px;
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
      }
      .form-label { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
      .form-control, .form-select {
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 11px 16px;
        font-size: 14px;
        color: var(--navy);
        font-family: 'DM Sans', sans-serif;
        transition: var(--trans);
      }
      .form-control:focus, .form-select:focus {
        border-color: var(--teal);
        box-shadow: 0 0 0 4px rgba(0,201,167,0.12);
        outline: none;
      }
      textarea.form-control { resize: vertical; min-height: 130px; }
      .form-select { appearance: auto; }
  
      .cinfo-item {
        display: flex;
        align-items: center;
        gap: 16px;
        background: var(--bg);
        border-radius: var(--radius-sm);
        padding: 18px 20px;
        margin-bottom: 14px;
        text-decoration: none;
        transition: var(--trans);
        border: 1px solid transparent;
      }
      .cinfo-item:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }
      .cinfo-icon {
        width: 46px; height: 46px;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
      }
      .cinfo-icon.phone   { background: rgba(0,201,167,0.14); }
      .cinfo-icon.whatsapp{ background: rgba(37,211,102,0.14); }
      .cinfo-icon.email   { background: rgba(71,118,230,0.14); }
      .cinfo-icon.location{ background: rgba(255,99,71,0.14); }
      .cinfo-text h5 { font-size: 14px; font-weight: 700; color: var(--navy); margin: 0 0 3px; }
      .cinfo-text p  { font-size: 13px; color: var(--muted); margin: 0; }
  
      /* =============================================
         ABOUT PAGE
      =============================================== */
      .val-card {
        background: white;
        border-radius: var(--radius-sm);
        padding: 24px;
        border: 1px solid var(--border);
        transition: var(--trans);
      }
      .val-card:hover { box-shadow: var(--shadow); border-color: rgba(71,118,230,0.25); }
      .val-card .icon { font-size: 28px; margin-bottom: 12px; }
      .val-card h4 { font-size: 15px; margin-bottom: 6px; }
      .val-card p  { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.6; }
  
      .about-stat {
        background: var(--bg);
        border-radius: var(--radius-sm);
        padding: 20px;
        text-align: center;
      }
      .about-stat .n {
        font-family: 'Syne', sans-serif;
        font-size: 34px; font-weight: 800;
        background: var(--gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .about-stat .l { font-size: 12px; color: var(--muted); font-weight: 500; }
  
      /* =============================================
         TESTIMONIALS
      =============================================== */
      .tcard {
        background: white;
        border-radius: var(--radius);
        padding: 28px;
        border: 1px solid var(--border);
        transition: var(--trans);
      }
      .tcard:hover { box-shadow: var(--shadow); }
      .tcard-text { font-size: 14px; color: var(--muted); line-height: 1.75; font-style: italic; margin-bottom: 20px; }
      .tcard-author { display: flex; align-items: center; gap: 12px; }
      .tcard-avatar {
        width: 44px; height: 44px; border-radius: 50%;
        background: var(--gradient);
        display: flex; align-items: center; justify-content: center;
        color: white; font-weight: 700; font-size: 16px;
        flex-shrink: 0;
      }
      .tcard-name { font-size: 14px; font-weight: 700; color: var(--navy); }
      .tcard-role { font-size: 12px; color: var(--muted); }
      .stars { color: #F59E0B; font-size: 13px; letter-spacing: 1px; margin-bottom: 12px; }
  
      /* =============================================
         FOOTER
      =============================================== */
      .site-footer {
        background: var(--navy);
        color: rgba(255,255,255,0.75);
        padding: 64px 0 0;
      }
      .footer-logo { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 800; color: white; }
      .footer-logo span { color: var(--teal); }
      .footer-desc { font-size: 13px; opacity: 0.65; line-height: 1.75; margin-top: 12px; }
      .footer-head { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: white; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }
      .footer-links { list-style: none; padding: 0; margin: 0; }
      .footer-links li { margin-bottom: 10px; }
      .footer-links a {
        color: rgba(255,255,255,0.6);
        font-size: 13px;
        text-decoration: none;
        cursor: pointer;
        transition: var(--trans);
      }
      .footer-links a:hover { color: var(--teal); }
      .footer-ci {
        display: flex; align-items: center; gap: 10px;
        font-size: 13px; color: rgba(255,255,255,0.6);
        margin-bottom: 10px;
      }
      .footer-ci a { color: rgba(255,255,255,0.6); text-decoration: none; transition: var(--trans); }
      .footer-ci a:hover { color: var(--teal); }
      .socials { display: flex; gap: 10px; margin-top: 24px; }
      .social-btn {
        width: 36px; height: 36px;
        background: rgba(255,255,255,0.08);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: rgba(255,255,255,0.65);
        font-size: 14px;
        text-decoration: none;
        transition: var(--trans);
      }
      .social-btn:hover { background: var(--teal); color: white; transform: translateY(-3px); }
      .footer-bottom {
        border-top: 1px solid rgba(255,255,255,0.08);
        padding: 20px 0;
        margin-top: 52px;
        display: flex; flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .footer-bottom p { font-size: 12px; opacity: 0.45; margin: 0; }
      .footer-bottom-links { display: flex; gap: 20px; }
      .footer-bottom-links a { font-size: 12px; color: rgba(255,255,255,0.4); text-decoration: none; transition: var(--trans); }
      .footer-bottom-links a:hover { color: var(--teal); }
  
      /* =============================================
         FLOATING BUTTONS
      =============================================== */
      .fab-wrap {
        position: fixed;
        bottom: 28px; right: 22px;
        display: flex; flex-direction: column;
        gap: 12px; z-index: 990;
      }
      .fab {
        width: 54px; height: 54px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: white;
        font-size: 21px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.22);
        text-decoration: none;
        transition: var(--trans);
        position: relative;
      }
      .fab:hover { transform: translateY(-5px) scale(1.1); color: white; }
      .fab-wa  { background: #25D366; box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
      .fab-call{ background: var(--gradient); box-shadow: 0 4px 20px rgba(71,118,230,0.4); }
      .fab-tip {
        position: absolute;
        right: 64px;
        background: var(--navy);
        color: white;
        font-size: 12px; font-weight: 600;
        padding: 6px 13px;
        border-radius: var(--radius-xs);
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
      }
      .fab-tip::after {
        content: '';
        position: absolute;
        left: 100%; top: 50%;
        transform: translateY(-50%);
        border: 6px solid transparent;
        border-left-color: var(--navy);
      }
      .fab:hover .fab-tip { opacity: 1; }
  
      /* =============================================
         ALERTS / MISC
      =============================================== */
      .alert-ok {
        background: rgba(0,201,167,0.1);
        border: 1px solid rgba(0,201,167,0.35);
        color: #007C6A;
        border-radius: var(--radius-sm);
        padding: 14px 18px;
        font-size: 14px;
        margin-bottom: 20px;
      }
      .alert-err {
        background: rgba(239,68,68,0.08);
        border: 1px solid rgba(239,68,68,0.3);
        color: #B91C1C;
        border-radius: var(--radius-sm);
        padding: 14px 18px;
        font-size: 14px;
        margin-bottom: 20px;
      }
  
      /* CTA band */
      .cta-band {
        background: var(--gradient-dk);
        padding: 80px 0;
        text-align: center;
      }
      .cta-band h2 {
        font-size: clamp(26px,3.5vw,44px);
        font-weight: 800;
        color: white;
        margin-bottom: 14px;
      }
      .cta-band p {
        font-size: 15px;
        color: rgba(255,255,255,0.7);
        margin-bottom: 34px;
      }
  
      /* =============================================
         RESPONSIVE
      =============================================== */
      @media (max-width: 991px) {
        .site-nav { display: none; }
        .site-nav.open {
          display: flex;
          flex-direction: column;
          position: absolute;
          top: var(--hh); left: 0; right: 0;
          background: white;
          padding: 20px 24px;
          gap: 4px;
          box-shadow: var(--shadow-lg);
          border-bottom: 1px solid var(--border);
          z-index: 999;
        }
        .nav-link { display: block; }
        .menu-toggle { display: block; }
        .orbit-wrap { width: 350px; height: 350px; }
        .orbit-center { width: 78px; height: 78px; }
        .orbit-center-text { font-size: 22px; }
        .tic i { font-size: 24px; }
        .tic span { font-size: 9px; }
        .tic { padding: 8px 10px; min-width: 64px; }
      }
      @media (max-width: 576px) {
        .hero { padding: 40px 0 28px; }
        .orbit-wrap { display: none; }
        .hero-ctas { flex-direction: column; }
        .hero-ctas .btn-primary-g, .hero-ctas .btn-outline-g { width: 100%; justify-content: center; }
        .contact-card { padding: 24px; }
      }