.agx :root{
      --color-charcoal-canvas: #0d0e10; 
      --color-panel-bg: #121316;       
      --color-ice-white: #f5f5f7;      
      --color-muted-steel: #8e9099;    
      --color-electric-blue: #3b82f6;  
      --color-orange-fire: #ff4f05;    
      --color-live-green: #34c771;     
      --color-app-gold: #d4af37;       
      --color-app-yellow: #f5c453;     
      --color-closed-red: #5c1e13;     
      --border-thin: 1px solid rgba(255, 255, 255, 0.08); 

      --font-display: 'Bricolage Grotesque', sans-serif;
      --font-sans: 'Inter', sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
    }

    .agx *{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .agx html{
      scroll-behavior: smooth;
      scroll-snap-type: y proximity;
      scroll-padding-top: 70px;
    }

    .agx body{
      background-color: var(--color-charcoal-canvas);
      color: var(--color-ice-white);
      font-family: var(--font-sans);
      font-size: 15px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      transition: background 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    
    .agx .wireframe-wrapper{
      max-width: 1300px;
      margin: 0 auto;
      border-left: var(--border-thin);
      border-right: var(--border-thin);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    
    .agx header{
      border-bottom: var(--border-thin);
      background-color: var(--color-charcoal-canvas);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .agx .nav-grid{
      display: grid;
      grid-template-columns: 260px 1fr auto auto;
      align-items: center;
    }

    .agx .lang-switcher{
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 0 8px;
      font-family: var(--font-mono);
    }

    .agx .lang-btn{
      background: none;
      border: none;
      color: var(--color-muted-steel);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.05em;
      padding: 6px 8px;
      cursor: pointer;
      transition: color 0.2s;
    }

    .agx .lang-btn:hover{
      color: var(--color-ice-white);
    }

    .agx .lang-btn.active{
      color: var(--color-app-gold);
      font-weight: 700;
    }

    .agx .logo-container{
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 24px;
      border-right: var(--border-thin);
      text-decoration: none;
    }

    .agx .logo-svg{
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: block;
      object-fit: contain;
    }

    .agx .logo-text{
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 20px;
      color: var(--color-ice-white);
      letter-spacing: -0.5px;
    }

    .agx .logo-text span{
      color: var(--color-app-gold);
    }

    .agx .nav-links{
      display: flex;
      gap: 32px;
      padding-left: 40px;
    }

    .agx .nav-link{
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--color-muted-steel);
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      transition: color 0.2s;
    }

    .agx .nav-link:hover,
.agx .nav-link.active{
      color: var(--color-ice-white);
    }

    .agx .mobile-menu-btn{
      display: none;
      background: none;
      border: none;
      border-left: var(--border-thin);
      cursor: pointer;
      padding: 0 20px;
      align-self: stretch;
      align-items: center;
      justify-content: center;
    }

    .agx .burger-icon{
      width: 20px;
      height: 14px;
      position: relative;
    }

    .agx .burger-icon span{
      position: absolute;
      left: 0;
      width: 100%;
      height: 1.5px;
      background: var(--color-ice-white);
      transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease, top 0.35s cubic-bezier(0.16,1,0.3,1);
    }

    .agx .burger-icon span:nth-child(1){ top: 0; }
    .agx .burger-icon span:nth-child(2){ top: 6px; }
    .agx .burger-icon span:nth-child(3){ top: 12px; }

    .agx .mobile-menu-btn.open .burger-icon span:nth-child(1){ top: 6px; transform: rotate(45deg); }
    .agx .mobile-menu-btn.open .burger-icon span:nth-child(2){ opacity: 0; }
    .agx .mobile-menu-btn.open .burger-icon span:nth-child(3){ top: 6px; transform: rotate(-45deg); }

    .agx .lang-globe-icon{
      width: 15px;
      height: 15px;
      color: var(--color-muted-steel);
      flex-shrink: 0;
    }

    .agx .btn-fire{
      background-color: var(--color-orange-fire);
      color: var(--color-ice-white);
      border: none;
      padding: 24px 32px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      cursor: pointer;
      text-decoration: none;
      border-left: var(--border-thin);
      transition: opacity 0.2s;
    }

    .agx .btn-fire:hover{
      opacity: 0.9;
    }

    
    .agx .hero-split{
      display: grid;
      grid-template-columns: 1.16fr 0.84fr;
      border-bottom: var(--border-thin);
    }

    .agx .app-showcase-panel{
      position: relative;
      background: radial-gradient(circle at 50% 30%, #1c1830 0%, var(--color-charcoal-canvas) 70%);
      border-right: var(--border-thin);
      min-height: 650px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 24px;
      overflow: hidden;
    }

    
    .agx .mockup-container{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      z-index: 5;
      position: relative;
      perspective: 1200px;
    }

    .agx .phone-mockup{
      width: 270px;
      height: 480px;
      background: #090a0d;
      border: 4px solid #1a1b24;
      border-radius: 36px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      position: relative;
      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8);
      overflow: hidden;
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    }

    .agx .phone-mockup:hover{
      box-shadow: 0 38px 70px -12px rgba(0,0,0,0.9), 0 0 40px rgba(212,175,55,0.18);
      border-color: #33344080;
    }

    .agx .phone-notch{
      width: 90px;
      height: 20px;
      background: #000;
      border-radius: 10px;
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
    }

    .agx .phone-screen{
      flex: 1;
      display: flex;
      flex-direction: column;
      padding-top: 18px;
    }

    
    .agx .screen-gast-content{
      display: flex;
      flex-direction: column;
      height: 100%;
      color: #fff;
      font-size: 11px;
    }

    .agx .app-header-small{
      display: flex;
      justify-content: space-between;
      font-family: var(--font-mono);
      font-size: 8px;
      color: var(--color-muted-steel);
      margin-bottom: 8px;
    }

    .agx .welcome-dimi{
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 12px;
      color: #fff;
    }

    .agx .welcome-dimi span{
      color: var(--color-app-yellow);
    }

    
    .agx .weather-widget{
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 8px 12px;
      margin-bottom: 12px;
    }

    .agx .weather-top{
      display: flex;
      justify-content: space-between;
      color: var(--color-muted-steel);
      font-size: 8px;
      margin-bottom: 4px;
    }

    .agx .weather-temp{
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: #fff;
    }

    .agx .weather-temp-row{
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .agx .weather-temp-item{
      display: flex;
      flex-direction: column;
    }

    .agx .weather-temp-label{
      font-size: 6.5px;
      color: var(--color-muted-steel);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-top: 2px;
    }

    .agx .weather-temp-divider{
      width: 1px;
      height: 22px;
      background: rgba(255, 255, 255, 0.08);
    }

    .agx .categories-strip{
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
    }

    .agx .cat-btn{
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      padding: 4px 8px;
      font-size: 8px;
      color: #fff;
      cursor: pointer;
      transition: all 0.2s;
    }

    .agx .cat-btn.active{
      background: var(--color-app-yellow);
      color: #000;
    }

    
    .agx .restaurant-card-mock{
      background: rgba(255, 255, 255, 0.03);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      overflow: hidden;
    }

    .agx .card-mock-img{
      height: 85px;
      background: url('https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?q=80&w=2013&auto=format&fit=cover') center;
      background-size: cover;
    }

    .agx .card-mock-info{
      padding: 8px;
    }

    .agx .card-mock-info h6{
      font-size: 10px;
      font-weight: 700;
    }

    .agx .card-mock-status{
      font-size: 8px;
      color: var(--color-muted-steel);
    }

    .agx .recurring-event-row{
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      padding: 7px 9px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
    }

    .agx .recurring-event-icon{
      width: 20px;
      height: 20px;
      border-radius: 50%;
      flex-shrink: 0;
      background: rgba(212, 175, 55, 0.1);
      border: 1px solid rgba(212, 175, 55, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .agx .recurring-event-icon svg{ width: 10px; height: 10px; }

    .agx .recurring-event-text{
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
    }

    .agx .recurring-event-title{
      font-size: 9px;
      color: #fff;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .agx .recurring-event-freq{
      font-size: 7px;
      font-family: var(--font-mono);
      color: var(--color-app-gold);
      letter-spacing: 0.03em;
    }

    
    .agx .status-badge-inline{
      display: inline-block;
      font-family: var(--font-sans);
      font-size: 10px;
      padding: 5px 10px;
      border-radius: 6px;
      font-weight: 600;
      letter-spacing: 0.02em;
      transition: all 0.3s ease;
    }

    .agx .status-badge-inline.waiting{
      background-color: rgba(245, 196, 83, 0.06);
      color: var(--color-app-yellow);
      border: 1px solid rgba(245, 196, 83, 0.35);
    }

    .agx .status-badge-inline.confirmed{
      background-color: rgba(52, 199, 113, 0.06);
      color: var(--color-live-green);
      border: 1px solid rgba(52, 199, 113, 0.4);
      box-shadow: 0 0 8px rgba(52, 199, 113, 0.15);
    }

    
    .agx .push-notification-mock{
      position: absolute;
      top: -100px;
      left: 10px;
      right: 10px;
      background: rgba(255, 255, 255, 0.96);
      border-radius: 16px;
      padding: 12px 16px;
      color: #000;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
      z-index: 100;
      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .agx .push-notification-mock.show{
      top: 35px;
    }

    .agx .push-icon{
      width: 24px;
      height: 24px;
      background: var(--color-app-gold);
      border-radius: 6px;
    }

    .agx .push-text .push-title{
      font-weight: 700;
      font-size: 11px;
      display: block;
    }

    .agx .push-text p{
      font-size: 10px;
      color: #444;
      line-height: 1.3;
    }

    
    .agx .partner-welcome-banner{
      font-family: var(--font-display);
      font-size: 11px;
      color: var(--color-muted-steel);
      margin-bottom: 12px;
      line-height: 1.3;
    }

    .agx .partner-welcome-banner span{
      color: var(--color-app-gold);
      font-weight: 700;
      display: block;
      font-size: 13px;
    }

    
    .agx .business-status-bar{
      background: var(--color-closed-red);
      border-radius: 12px;
      padding: 10px 12px;
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background-color 0.3s;
      cursor: pointer;
    }

    .agx .business-status-bar.open{
      background: #113620; 
    }

    .agx .status-bar-text .status-bar-title{
      font-weight: 700;
      font-size: 10px;
      display: block;
    }

    .agx .status-bar-text p{
      font-size: 8px;
      color: rgba(255, 255, 255, 0.6);
    }

    .agx .toggle-switch{
      width: 34px;
      height: 20px;
      background: rgba(255,255,255,0.2);
      border-radius: 10px;
      position: relative;
      transition: background-color 0.3s;
    }

    .agx .toggle-switch::after{
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 16px;
      height: 16px;
      background: #fff;
      border-radius: 50%;
      transition: left 0.3s;
    }

    .agx .business-status-bar.open .toggle-switch{
      background: var(--color-live-green);
    }

    .agx .business-status-bar.open .toggle-switch::after{
      left: 16px;
    }

    
    .agx .business-stats-row{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-bottom: 12px;
    }

    .agx .stat-card-small{
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
      padding: 8px;
      text-align: left;
    }

    .agx .stat-card-small.orange-border{
      background: rgba(245, 196, 83, 0.02);
      border-color: rgba(245, 196, 83, 0.15);
    }

    .agx .stat-val{
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      display: block;
    }

    .agx .stat-lbl{
      font-size: 7px;
      color: var(--color-muted-steel);
      line-height: 1.1;
      display: block;
    }

    
    .agx .partner-card{
      background: #181922;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 10px 12px;
      margin-bottom: auto; 
    }

    .agx .partner-card h5{
      font-family: var(--font-display);
      font-size: 13px;
      margin-bottom: 2px;
    }

    .agx .partner-card p{
      font-family: var(--font-mono);
      font-size: 9px;
      color: var(--color-muted-steel);
    }

    
    .agx .btn-partner-action{
      width: 100%;
      background-color: rgba(52, 199, 113, 0.06);
      color: var(--color-live-green);
      border: 1px solid rgba(52, 199, 113, 0.45);
      padding: 10px;
      border-radius: 6px;
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      margin-top: 10px;
    }

    .agx .btn-partner-action:hover{
      background-color: rgba(52, 199, 113, 0.12);
      border-color: var(--color-live-green);
      box-shadow: 0 0 10px rgba(52, 199, 113, 0.2);
    }

    .agx .btn-partner-action.accepted{
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--color-muted-steel);
      cursor: not-allowed;
      box-shadow: none;
    }

    
    .agx .sync-dots{
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .agx .sync-dot{
      width: 6px;
      height: 6px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
    }

    .agx .sync-dot.active{
      background: var(--color-electric-blue);
      box-shadow: 0 0 8px var(--color-electric-blue);
    }

    
    .agx .text-panel{
      padding: 64px 48px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .agx .display-headline span{
      color: var(--color-app-gold);
    }

    
    .agx .cyber-lock-form{
      display: flex;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.01);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      padding: 6px;
      max-width: 480px;
      position: relative;
      transition: all 0.4s ease;
    }

    .agx .cyber-lock-form.valid-ready{
      border-color: var(--color-live-green);
      box-shadow: 0 0 15px rgba(52, 199, 113, 0.25);
    }

    .agx .cyber-lock-input{
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      padding: 12px 16px;
      color: var(--color-ice-white);
      font-family: var(--font-sans);
      font-size: 14px;
    }

    .agx .cyber-lock-input::placeholder{
      color: var(--color-muted-steel);
    }

    .agx .btn-cyber-submit{
      background-color: var(--color-orange-fire);
      color: #fff;
      border: none;
      padding: 12px 24px;
      border-radius: 6px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      cursor: not-allowed;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }

    .agx .cyber-lock-form.valid-ready .btn-cyber-submit{
      background-color: var(--color-live-green);
      color: #000;
      cursor: pointer;
      box-shadow: 0 0 10px rgba(52, 199, 113, 0.4);
    }

    
    .agx .app-features-grid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 32px;
    }

    .agx .app-feature-tile{
      background: linear-gradient(145deg, #121318 0%, #0d0e11 100%);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 16px;
      padding: 24px;
      text-align: left;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 180px;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .agx .app-feature-tile::before{
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(800px circle at var(--x, 0px) var(--y, 0px), rgba(255, 255, 255, 0.04), transparent 40%);
      opacity: 0;
      transition: opacity 0.5s ease;
      pointer-events: none;
      z-index: 1;
    }

    .agx .app-feature-tile:hover::before{
      opacity: 1;
    }

    .agx .app-feature-tile:hover{
      border-color: rgba(212, 175, 55, 0.3);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    }

    .agx .tile-icon-box{
      width: 44px;
      height: 44px;
      background: linear-gradient(155deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.015) 55%, rgba(0,0,0,0.15) 100%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-top-color: rgba(255, 255, 255, 0.22);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-bottom: 20px;
      position: relative;
      z-index: 2;
      box-shadow: 0 6px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
    }

    .agx .icon-glyph{
      width: 22px;
      height: 22px;
      display: block;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
      transition: filter 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .agx .app-feature-tile:hover .tile-icon-box{
      background: linear-gradient(155deg, rgba(214,175,55,0.16) 0%, rgba(214,175,55,0.04) 55%, rgba(0,0,0,0.15) 100%);
      border-color: rgba(214, 175, 55, 0.45);
      border-top-color: rgba(214, 175, 55, 0.6);
      box-shadow: 0 10px 22px rgba(0,0,0,0.4), 0 0 18px rgba(212,175,55,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
      transform: translateY(-3px) scale(1.05);
    }

    .agx .app-feature-tile:hover .icon-glyph{
      filter: drop-shadow(0 3px 6px rgba(212,175,55,0.35));
      transform: translateY(-1px);
    }

    .agx .tile-icon-box.is-live{
      position: relative;
    }

    .agx .live-ring{
      position: absolute;
      inset: -6px;
      border-radius: 16px;
      border: 1px solid rgba(212, 175, 55, 0.35);
      animation: pulse-ring 2.4s ease-out infinite;
      pointer-events: none;
    }

    @keyframes pulse-ring {
      0%   { transform: scale(1);    opacity: 0.7; }
      80%  { transform: scale(1.18); opacity: 0; }
      100% { transform: scale(1.18); opacity: 0; }
    }

    .agx .tile-info-meta{
      position: relative;
      z-index: 2;
    }

    .agx .app-feature-tile h5{
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 500;
      color: var(--color-ice-white);
      margin-bottom: 8px;
      letter-spacing: -0.2px;
    }

    .agx .tile-status-row{
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-mono);
      font-size: 11px;
    }

    .agx .status-pulse{
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: var(--color-live-green);
      box-shadow: 0 0 8px var(--color-live-green);
      display: inline-block;
    }

    .agx .status-pulse.warning{
      background-color: var(--color-orange-fire);
      box-shadow: 0 0 8px var(--color-orange-fire);
    }

    .agx .tile-status-text{
      color: var(--color-live-green);
    }

    .agx .tile-status-text.warning{
      color: var(--color-orange-fire);
    }

    
    .agx .pilot-status-strip{
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.05em;
      color: var(--color-app-gold);
      background: rgba(212, 175, 55, 0.08);
      border: 1px solid rgba(212, 175, 55, 0.25);
      border-radius: 20px;
      padding: 8px 16px;
      margin-bottom: 24px;
    }

    .agx .why-gerlos-cards{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 8px;
    }

    .agx .why-gerlos-cards .app-feature-tile{
      cursor: default;
    }

    .agx .why-card-text{
      font-size: 13px;
      color: var(--color-muted-steel);
      line-height: 1.55;
    }

    .agx .why-card-tag{
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-orange-fire);
      margin-bottom: 6px;
    }

    
    .agx .lift-status-container{
      display: flex;
      flex-direction: column;
      gap: 8px;
      height: 100%;
      padding: 4px 0;
    }

    .agx .lift-status-row{
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      padding: 10px 12px;
    }

    .agx .lift-status-info strong{
      display: block;
      font-size: 10px;
      color: #fff;
    }

    .agx .lift-status-info span{
      font-size: 8px;
      color: var(--color-muted-steel);
    }

    .agx .lift-status-badge{
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font-mono);
      font-size: 8px;
      color: var(--color-live-green);
      white-space: nowrap;
    }

    
    .agx .skipass-calc-box{
      margin-top: 24px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 16px;
      padding: 20px;
    }

    .agx .calc-row{
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 12px;
      margin-bottom: 16px;
    }

    .agx .price-display-box{
      text-align: center;
      padding: 16px;
      background: rgba(212, 175, 55, 0.05);
      border: 1px solid rgba(212, 175, 55, 0.2);
      border-radius: 12px;
    }

    .agx .price-display-box span{
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 700;
      color: var(--color-app-yellow);
      display: block;
    }

    
    .agx .modal-overlay{
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(5, 5, 8, 0.85);
      backdrop-filter: blur(12px);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .agx .modal-overlay.active{
      opacity: 1;
      pointer-events: auto;
    }

    .agx .modal-window{
      background: #111216;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 24px;
      width: 100%;
      max-width: 520px;
      padding: 32px;
      position: relative;
      box-shadow: 0 20px 50px rgba(0,0,0,0.6);
      transform: translateY(20px);
      transition: transform 0.3s ease;
    }

    .agx .modal-overlay.active .modal-window{
      transform: translateY(0);
    }

    .agx .modal-close{
      position: absolute;
      top: 24px; right: 24px;
      background: none; border: none;
      color: var(--color-muted-steel);
      font-size: 20px; cursor: pointer;
      transition: color 0.2s;
    }

    .agx .modal-close:hover{ color: #fff; }

    .agx .success-modal-window{
      text-align: center;
      max-width: 420px;
      border-color: rgba(212, 175, 55, 0.25);
      padding: 36px 32px;
    }

    .agx .success-icon-circle{
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: rgba(52, 199, 113, 0.08);
      border: 1px solid rgba(52, 199, 113, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      color: var(--color-live-green);
    }

    .agx .success-modal-title{
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 700;
      color: var(--color-ice-white);
      letter-spacing: -0.3px;
      margin-bottom: 10px;
    }

    .agx .success-modal-text{
      font-size: 14px;
      color: var(--color-muted-steel);
      line-height: 1.6;
      margin-bottom: 28px;
    }

    .agx .sos-banner{
      margin-top: 24px;
      background: radial-gradient(circle at 15% 50%, rgba(226, 75, 74, 0.10) 0%, rgba(226, 75, 74, 0.02) 60%);
      border: 1px solid rgba(226, 75, 74, 0.3);
      border-radius: 16px;
      padding: 20px 24px;
      display: flex;
      align-items: center;
      gap: 18px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .agx .sos-banner:hover{
      border-color: rgba(226, 75, 74, 0.55);
      box-shadow: 0 8px 24px rgba(226, 75, 74, 0.12);
      transform: translateY(-2px);
    }

    .agx .sos-banner-icon{
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: rgba(226, 75, 74, 0.1);
      border: 1px solid rgba(226, 75, 74, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #e24b4a;
      flex-shrink: 0;
    }

    .agx .sos-banner-text h5{
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 4px;
    }

    .agx .sos-banner-text p{
      font-size: 12px;
      color: var(--color-muted-steel);
      line-height: 1.4;
    }

    .agx .sos-banner-arrow{
      margin-left: auto;
      color: #e24b4a;
      font-size: 18px;
      flex-shrink: 0;
    }

    .agx .select-card.selected-sos{
      border-color: #e24b4a;
      background: rgba(226, 75, 74, 0.05);
    }

    .agx .modal-title{
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 24px;
      letter-spacing: -0.5px;
    }

    .agx .grid-selection{
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-bottom: 24px;
    }

    .agx .select-card{
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 16px;
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 16px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .agx .select-card:hover{
      border-color: var(--color-app-gold);
      background: rgba(212, 175, 55, 0.03);
    }

    .agx .select-card-img{
      width: 60px; height: 60px;
      border-radius: 12px;
      background-size: cover;
      background-position: center;
    }

    .agx .select-card-info h6{
      font-size: 14px; font-weight: 600; margin-bottom: 4px;
    }

    .agx .select-card-info p{
      font-size: 11px; color: var(--color-muted-steel);
    }

    .agx .form-row{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 20px;
    }

    .agx .form-group{
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .agx .form-group label{
      font-family: var(--font-mono);
      font-size: 10px;
      text-transform: uppercase;
      color: var(--color-muted-steel);
    }

    .agx .form-input{
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      padding: 10px 12px;
      color: #fff;
      font-family: var(--font-sans);
      outline: none;
    }

    .agx .form-input:focus{
      border-color: var(--color-app-gold);
    }

    .agx .btn-action-modal{
      width: 100%;
      background: var(--color-app-gold);
      color: #000;
      border: none;
      border-radius: 12px;
      padding: 16px;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      transition: opacity 0.2s;
    }

    .agx .btn-action-modal:hover{ opacity: 0.9; }

    .agx .time-slot-grid{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-top: 12px;
    }

    .agx .time-slot{
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      font-family: var(--font-mono);
      font-size: 12px;
      cursor: pointer;
      border: 1px solid transparent;
      transition: all 0.2s;
    }

    .agx .time-slot.free{
      background: rgba(52, 199, 113, 0.05);
      border-color: rgba(52, 199, 113, 0.15);
      color: var(--color-live-green);
    }

    .agx .time-slot.free:hover{
      background: rgba(52, 199, 113, 0.15);
      border-color: var(--color-live-green);
    }

    .agx .time-slot.free.selected{
      background: var(--color-live-green);
      color: #000;
    }

    .agx .time-slot.booked{
      background: rgba(255, 79, 5, 0.05);
      border-color: rgba(255, 79, 5, 0.15);
      color: var(--color-orange-fire);
      cursor: not-allowed;
    }

    .agx .radar-box{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 0;
    }

    .agx .radar-circle{
      width: 80px; height: 80px;
      border-radius: 50%;
      border: 2px solid var(--color-electric-blue);
      position: relative;
      animation: pulseRadar 1.5s infinite;
      margin-bottom: 24px;
    }

    @keyframes pulseRadar {
      0% { transform: scale(0.9); opacity: 1; }
      100% { transform: scale(1.4); opacity: 0; }
    }

    
    .agx #gravity-canvas{
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none;
      z-index: 0;
    }

    
    .agx .events-sync-block{
      background: radial-gradient(circle at 50% 50%, #17152b 0%, var(--color-charcoal-canvas) 85%);
      border: var(--border-thin);
      border-radius: 20px;
      padding: 48px;
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 40px;
      align-items: center;
      margin-top: 40px;
      position: relative;
      overflow: hidden;
    }

    .agx .events-sync-text h3{
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 400;
      letter-spacing: -0.5px;
      margin-bottom: 16px;
      color: var(--color-app-gold);
    }

    .agx .events-sync-text p{
      font-size: 15px;
      color: var(--color-muted-steel);
      line-height: 1.6;
      margin-bottom: 24px;
    }

    .agx .events-highlight{
      display: flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(155deg, rgba(212,175,55,0.09) 0%, rgba(212,175,55,0.02) 100%);
      border: 1px solid rgba(212, 175, 55, 0.28);
      border-radius: 12px;
      padding: 14px 18px;
      margin-bottom: 24px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .agx .events-highlight-icon{
      width: 28px;
      height: 28px;
      border-radius: 50%;
      flex-shrink: 0;
      background: rgba(212, 175, 55, 0.14);
      border: 1px solid rgba(212, 175, 55, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .agx .events-highlight-icon svg{ width: 14px; height: 14px; }

    .agx .events-highlight span{
      font-size: 14px;
      color: var(--color-ice-white);
      line-height: 1.5;
    }

    .agx .btn-publish-action{
      background: rgba(245, 196, 83, 0.08);
      color: var(--color-app-yellow);
      border: 1px solid rgba(245, 196, 83, 0.45);
      padding: 8px 16px;
      border-radius: 6px;
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }

    .agx .btn-publish-action:hover{
      background: rgba(245, 196, 83, 0.18);
      box-shadow: 0 0 10px rgba(245, 196, 83, 0.25);
    }

    .agx .btn-publish-action.published{
      background: rgba(52, 199, 113, 0.08);
      color: var(--color-live-green);
      border: 1px solid rgba(52, 199, 113, 0.45);
      cursor: not-allowed;
      box-shadow: none;
    }

    .agx .push-event-mock{
      position: absolute;
      top: -100px;
      left: 10px;
      right: 10px;
      background: rgba(255, 255, 255, 0.96);
      border-radius: 16px;
      padding: 12px 16px;
      color: #000;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
      z-index: 100;
      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .agx .push-event-mock.show{
      top: 35px;
    }

    
    .agx .section-grid{
      display: grid;
      grid-template-columns: 240px 1fr;
      border-bottom: var(--border-thin);
    }

    .agx .section-label{
      padding: 48px 24px;
      border-right: var(--border-thin);
      font-family: var(--font-mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-muted-steel);
    }

    .agx .section-content{
      padding: 64px 48px;
    }

    .agx .content-title{
      font-family: var(--font-display);
      font-size: 38px;
      font-weight: 400;
      letter-spacing: -1px;
      margin-bottom: 32px;
    }

    .agx .roadmap-cols{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .agx .roadmap-card{
      background: linear-gradient(145deg, #121318 0%, #0d0e11 100%);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 16px;
      padding: 28px;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    }

    .agx .roadmap-card:hover{
      transform: translateY(-4px);
      box-shadow: 0 16px 32px rgba(0,0,0,0.35);
    }

    .agx .roadmap-card.ready{ border-top: 2px solid rgba(52, 199, 113, 0.4); }
    .agx .roadmap-card.working{ border-top: 2px solid rgba(255, 79, 5, 0.4); }

    .agx .roadmap-card-header{
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 22px;
    }

    .agx .roadmap-card-icon{
      width: 32px;
      height: 32px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

    .agx .roadmap-card.ready .roadmap-card-icon{
      background: rgba(52, 199, 113, 0.1);
      border: 1px solid rgba(52, 199, 113, 0.4);
    }

    .agx .roadmap-card.working .roadmap-card-icon{
      background: rgba(255, 79, 5, 0.1);
      border: 1px solid rgba(255, 79, 5, 0.4);
    }

    .agx .roadmap-card-icon svg{ width: 15px; height: 15px; }

    .agx .roadmap-list{
      list-style: none;
    }

    .agx .roadmap-list li{
      position: relative;
      padding-left: 24px;
      margin-bottom: 16px;
      font-size: 14px;
    }

    .agx .roadmap-list li::before{
      content: '';
      position: absolute;
      left: 0;
      top: 8px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }

    .agx .ready-list li::before{
      background-color: var(--color-live-green);
      box-shadow: 0 0 8px var(--color-live-green);
    }

    .agx .working-list li::before{
      background-color: var(--color-orange-fire);
      box-shadow: 0 0 8px var(--color-orange-fire);
    }

    .agx .roadmap-col-title{
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 500;
      letter-spacing: -0.2px;
      color: var(--color-ice-white);
      margin: 0;
    }

    .agx footer{
      display: grid;
      grid-template-columns: 260px 1fr auto;
      border-top: var(--border-thin);
      align-items: center;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--color-muted-steel);
    }

    .agx .footer-col{
      padding: 24px;
    }

    .agx .footer-col.border-r{
      border-right: var(--border-thin);
    }

    
    .agx .fabi-interactive-section{
      background: rgba(17, 88, 242, 0.02);
      border: 1px solid rgba(17, 88, 242, 0.1);
      border-radius: 16px;
      padding: 40px;
      margin-top: 40px;
      position: relative;
      overflow: hidden;
    }

    .agx .fabi-contour-bg{
      position: absolute;
      right: -40px;
      bottom: -40px;
      width: 380px;
      height: 260px;
      pointer-events: none;
      opacity: 0.07;
      z-index: 0;
    }

    .agx .fabi-chat-container{
      background: #090a0d;
      border: var(--border-thin);
      border-radius: 12px;
      padding: 24px;
      max-width: 600px;
      margin: 24px auto 0 auto;
      position: relative;
      z-index: 1;
    }

    .agx .chat-header{
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      padding-bottom: 12px;
    }

    .agx .fabi-avatar{
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      border-radius: 50%;
      background: linear-gradient(155deg, rgba(214,175,55,0.2) 0%, rgba(214,175,55,0.03) 55%, rgba(0,0,0,0.2) 100%);
      border: 1px solid rgba(214, 175, 55, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.1);
    }

    .agx .fabi-avatar svg{ width: 18px; height: 18px; }

    .agx .chat-header-meta{
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .agx .chat-header-title{
      font-family: var(--font-display);
      font-weight: 400;
      font-size: 15px;
      letter-spacing: -0.2px;
      color: var(--color-ice-white);
    }

    .agx .fabi-live{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: fit-content;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.04em;
      color: var(--color-live-green);
      background: rgba(52, 199, 113, 0.08);
      border: 1px solid rgba(52, 199, 113, 0.3);
      border-radius: 20px;
      padding: 3px 10px 3px 8px;
      box-shadow: 0 0 12px rgba(52, 199, 113, 0.12), inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .agx .fabi-msg-row{
      display: flex;
      align-items: flex-end;
      gap: 8px;
      margin-bottom: 16px;
    }

    .agx .fabi-msg-row.user-row{
      justify-content: flex-end;
    }

    .agx .fabi-msg-avatar{
      width: 26px;
      height: 26px;
      border-radius: 50%;
      flex-shrink: 0;
      background: linear-gradient(155deg, rgba(214,175,55,0.2), rgba(0,0,0,0.2));
      border: 1px solid rgba(214, 175, 55, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .agx .fabi-msg-avatar svg{ width: 13px; height: 13px; }

    .agx .typing-row .fabi-bubble{
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 14px 16px;
    }

    .agx .typing-dots span{
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--color-muted-steel);
      margin-right: 3px;
      animation: typing-bounce 1s infinite ease-in-out;
    }

    .agx .typing-dots span:nth-child(2){ animation-delay: 0.15s; }
    .agx .typing-dots span:nth-child(3){ animation-delay: 0.3s; margin-right: 0; }

    @keyframes typing-bounce {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
      30% { transform: translateY(-3px); opacity: 1; }
    }

    .agx .fabi-bubble{
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      padding: 12px 16px;
      border-radius: 12px;
      font-size: 13px;
      margin-bottom: 16px;
      max-width: 85%;
    }

    .agx .user-bubble{
      background: #1c1d22;
      border: none;
      margin-left: auto;
      color: #fff;
    }

    .agx .fabi-card-bubble{
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 16px;
      border-radius: 16px;
      font-size: 13px;
      margin-bottom: 16px;
      max-width: 85%;
      border-left: 3px solid var(--color-app-yellow);
    }

    .agx .fabi-card-bubble .checked-badge{
      color: var(--color-live-green);
      float: right;
    }

    .agx .fabi-card-bubble .status-indicator{
      display: inline-block;
      margin-top: 12px;
      padding: 4px 10px;
      border-radius: 12px;
      font-family: var(--font-mono);
      font-size: 10px;
      background: rgba(245, 196, 83, 0.1);
      color: var(--color-app-yellow);
      border: 1px solid rgba(245, 196, 83, 0.2);
    }

    .agx .chat-questions-grid{
      display: flex;
      gap: 10px;
      justify-content: center;
      margin-top: 16px;
    }

    .agx .btn-question{
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: var(--color-muted-steel);
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 11px;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .agx .btn-question svg{
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    .agx .btn-question:hover{
      border-color: var(--color-app-yellow);
      color: #fff;
    }

    .agx .btn-partner-event-create{
      background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.03) 100%);
      color: var(--color-app-yellow);
      border: 1px solid rgba(212, 175, 55, 0.4);
      border-radius: 10px;
      padding: 12px;
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      margin-top: 12px;
      box-shadow: 0 4px 12px rgba(212, 175, 55, 0.05);
    }

    .agx .btn-partner-event-create:hover{
      background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.08) 100%);
      border-color: var(--color-app-gold);
      box-shadow: 0 0 15px rgba(212, 175, 55, 0.25);
      transform: translateY(-1px);
    }

    
    .agx .push-freq-selection{
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 24px;
    }

    .agx .freq-option-card{
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 14px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.2s ease;
    }

    .agx .freq-option-card:hover{
      border-color: rgba(212, 175, 55, 0.3);
      background: rgba(212, 175, 55, 0.02);
    }

    .agx .freq-option-card.selected{
      border-color: var(--color-app-gold);
      background: rgba(212, 175, 55, 0.06);
    }

    .agx .freq-meta h6{
      font-size: 13px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 2px;
    }

    .agx .freq-meta p{
      font-size: 11px;
      color: var(--color-muted-steel);
    }

    .agx .radio-circle-indicator{
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.2);
      position: relative;
    }

    .agx .freq-option-card.selected .radio-circle-indicator{
      border-color: var(--color-app-gold);
    }

    .agx .freq-option-card.selected .radio-circle-indicator::after{
      content: '';
      position: absolute;
      top: 3px; left: 3px; width: 6px; height: 6px;
      background: var(--color-app-gold);
      border-radius: 50%;
    }

    .agx .hero-split,
.agx .section-grid{
      scroll-snap-align: start;
    }

    
    .agx .reveal{
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .agx .reveal.is-visible{
      opacity: 1;
      transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
      .agx .reveal{
        opacity: 1;
        transform: none;
        transition: none;
      }
    }


    @media (max-width: 992px) {
      .agx .hero-split{ grid-template-columns: 1fr; }
      .agx .app-showcase-panel{ border-right: none; border-bottom: var(--border-thin); min-height: 500px; }
      .agx .nav-grid{ grid-template-columns: 1fr auto auto auto; }
      .agx .nav-links{ display: none; }
      .agx .lang-switcher{ padding: 0 4px; }
      .agx .mobile-menu-btn{ display: flex; align-items: center; justify-content: center; }
      .agx .section-grid{ grid-template-columns: 1fr; }
      .agx .section-label{ border-right: none; border-bottom: var(--border-thin); padding: 24px; }
      .agx .app-features-grid{ grid-template-columns: repeat(2, 1fr); }
      .agx .events-sync-block{ grid-template-columns: 1fr; padding: 32px 24px; }
      .agx .roadmap-cols{ grid-template-columns: 1fr; gap: 32px; }
      .agx footer{ grid-template-columns: 1fr; text-align: center; }
      .agx .footer-col{ border-right: none !important; border-bottom: var(--border-thin); }
      .agx .text-panel{ padding: 48px 32px; }
      .agx .section-content{ padding: 48px 32px; }
      .agx .content-title{ font-size: 30px; }
      .agx .events-sync-text h3{ font-size: 26px; }
      .agx .why-gerlos-cards{ grid-template-columns: 1fr 1fr; }
    }

    
    .agx img,
.agx svg,
.agx video,
.agx canvas{ max-width: 100%; height: auto; }
    .agx .nav-grid,
.agx .hero-split,
.agx .section-grid,
.agx .roadmap-cols,
.agx .app-features-grid,
.agx .events-sync-block,
.agx .why-gerlos-cards,
.agx .grid-selection,
.agx .calc-row,
.agx .form-row,
.agx footer,
.agx .text-panel,
.agx .section-content,
.agx .section-label{
      min-width: 0;
    }

    
    .agx .nav-links.mobile-open{
      display: flex;
      flex-direction: column;
      gap: 0;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      padding: 8px 24px 16px;
      background-color: var(--color-charcoal-canvas);
      border-bottom: var(--border-thin);
      z-index: 99;
    }

    .agx .nav-links.mobile-open .nav-link{
      padding: 14px 0;
      font-size: 12px;
      border-bottom: var(--border-thin);
    }

    .agx .nav-links.mobile-open .nav-link:last-child{
      border-bottom: none;
    }

    
    @media (max-width: 680px) {
      .agx .logo-container{ padding: 12px 16px; gap: 8px; }
      .agx .logo-svg{ width: 26px; height: 26px; }
      .agx .logo-text{ font-size: 16px; }
      .agx .btn-fire{ padding: 0 16px; font-size: 9px; }
      .agx .mobile-menu-btn{ padding: 0 14px; }
      .agx .lang-switcher{ padding: 0 2px; gap: 0; }
      .agx .lang-btn{ padding: 6px 5px; font-size: 10px; }
      .agx .why-gerlos-cards{ grid-template-columns: 1fr; }

      .agx .app-showcase-panel{ min-height: 420px; padding: 32px 12px; }
      .agx .mockup-container{
        flex-direction: column;
        gap: 28px;
      }
      .agx .phone-mockup{
        width: min(270px, 82vw);
        height: auto;
        aspect-ratio: 270 / 480;
      }
      .agx .sync-dots{ flex-direction: row; }

      .agx .text-panel{ padding: 40px 20px; }
      .agx .waitlist-container .cyber-lock-form{ flex-direction: column; align-items: stretch; padding: 10px; gap: 8px; }
      .agx .btn-cyber-submit{ justify-content: center; }

      .agx .section-label{ padding: 16px 20px; font-size: 10px; }
      .agx .section-content{ padding: 36px 20px; }
      .agx .content-title{ font-size: 24px; margin-bottom: 24px; }
      .agx .app-features-grid{ grid-template-columns: 1fr; gap: 14px; }
      .agx .app-feature-tile{ min-height: unset; padding: 20px; }

      .agx .events-sync-block{ padding: 24px 16px; }
      .agx .events-sync-text h3{ font-size: 22px; }
      .agx .events-sync-text p{ font-size: 14px; }

      .agx .calc-row,
.agx .form-row{ grid-template-columns: 1fr; }
      .agx .modal-window{ padding: 24px 20px; max-width: 92vw; }
      .agx .modal-title{ font-size: 20px; }
      .agx .time-slot-grid{ grid-template-columns: repeat(3, 1fr); }

      .agx .roadmap-cols{ gap: 24px; }
      .agx .content-title + p{ font-size: 14px; }

      .agx footer{ padding: 8px 0; }
      .agx .footer-col{ padding: 16px 20px; }
    }

    
    @media (max-width: 420px) {
      .agx .sync-dots{ flex-direction: row; }
      .agx .app-showcase-panel{ min-height: 360px; }
      .agx .display-headline{ letter-spacing: -0.5px !important; }
      .agx .editorial-subhead{ font-size: 14px !important; }
      .agx .content-title{ font-size: 21px; }
      .agx .price-display-box span{ font-size: 26px; }
      .agx .skipass-calc-box{ padding: 14px; }
      .agx .logo-text{ font-size: 14px; }
      .agx .lang-switcher{ display: none; }
      .agx .btn-fire{ padding: 0 12px; font-size: 8px; }
    }
  

      .agx .pilot-strip{
        display: grid; grid-template-columns: repeat(4, 1fr);
        border-bottom: var(--border-thin);
        background: #101114;
      }
      .agx .pstat-item{ padding: 40px 16px; text-align: center; border-right: var(--border-thin); }
      .agx .pstat-item:last-child{ border-right: none; }
      .agx .pstat-num{ font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3.6vw, 42px); color: var(--color-app-gold); }
      .agx .pstat-label{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--color-muted-steel); text-transform: uppercase; margin-top: 8px; }
      @media (max-width: 680px) {
        .agx .pilot-strip{ grid-template-columns: repeat(2, 1fr); }
        .agx .pstat-item:nth-child(2){ border-right: none; }
        .agx .pstat-item:nth-child(3),
.agx .pstat-item:nth-child(4){ border-top: var(--border-thin); }
      }
    
/* ============================================================
   ALPENGO re-skin of the legacy platform components
   ============================================================ */
.agx {
  --color-charcoal-canvas: #0a0c0e;
  --color-panel-bg: #101418;
  --color-ice-white: #f1e9d7;
  --color-muted-steel: rgba(241, 233, 215, 0.55);
  --color-electric-blue: #e6a13a;
  --color-orange-fire: #e0653a;
  --color-live-green: #34c771;
  --color-app-gold: #e6a13a;
  --color-app-yellow: #f3c66b;
  --color-closed-red: #5c1e13;
  --border-thin: 1px solid rgba(241, 233, 215, 0.09);
  --font-display: 'Archivo', 'Helvetica Neue', sans-serif;
  --font-sans: 'Archivo', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ice-white);
}
.agx .wireframe-wrapper { min-height: 0; }
.agx .app-showcase-panel {
  background: radial-gradient(circle at 50% 30%, #191410 0%, #0a0c0e 72%);
}
.agx .content-title {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
}
.agx .pillar-title,
.agx .display-headline { font-family: 'Archivo', sans-serif; font-weight: 600; }
.agx .modal-title { font-family: 'Archivo', sans-serif; font-weight: 700; }
.agx .push-icon {
  background: var(--color-app-gold) url('../favicon.png') center / 70% no-repeat;
}