/**
 * Go APE Placeholder Styles
 * 2026-05-17
 */

 :root{
    --ape-orange:#f26522;
    --ape-orange-dark:#df4d12;
    --ape-ink:#101a14;
    --ape-muted:#52615b;
    --ape-card:rgba(255,255,255,.76);
    --ape-line:rgba(16,26,20,.08);
  }
  
  *{
    box-sizing:border-box;
  }
  
  html,
  body{
    min-height:100%;
    margin:0;
  }
  
  body{
    font-family:Arial, Helvetica, sans-serif;
    color:var(--ape-ink);
    background:
      radial-gradient(circle at 50% 10%, rgba(242,101,34,.20) 0%, rgba(242,101,34,.075) 25%, transparent 52%),
      radial-gradient(circle at 18% 20%, rgba(159,205,229,.58) 0%, rgba(159,205,229,.24) 34%, transparent 62%),
      radial-gradient(circle at 84% 30%, rgba(176,218,238,.52) 0%, rgba(176,218,238,.20) 34%, transparent 62%),
      radial-gradient(circle at 50% 94%, rgba(242,101,34,.15) 0%, rgba(242,101,34,.055) 28%, transparent 54%),
      radial-gradient(circle at 0% 100%, rgba(80,96,106,.16) 0%, transparent 42%),
      radial-gradient(circle at 100% 100%, rgba(92,78,68,.14) 0%, transparent 42%),
      radial-gradient(circle at 0% 0%, rgba(70,92,104,.13) 0%, transparent 38%),
      radial-gradient(circle at 100% 0%, rgba(104,82,68,.13) 0%, transparent 38%),
      linear-gradient(180deg, #eaf5f8 0%, #f5eee8 50%, #edf4f5 100%);
    display:flex;
    flex-direction:column;
  }
  
  .page{
    width:100%;
    min-height:calc(100vh - 64px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:58px 20px 44px;
  }
  
  .wrap{
    width:min(1080px, 100%);
    text-align:center;
  }
  
  .hero{
    margin:0 auto 44px;
    max-width:720px;
  }
  
  .ape-logo{
    display:block;
    width: 200px;
    height:auto;
    margin:0 auto 24px;
    filter:drop-shadow(0 18px 30px rgba(16,26,20,.10));
  }
  
  .brand-line{
    width:min(620px, 100%);
    margin:0 auto;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
  }
  
  .brand-line .orange,
  .brand-line .dark{
    display:block;
    font-size:clamp(30px, 4.2vw, 48px);
    line-height:1;
    white-space:nowrap;
  }
  
  .brand-line .orange{
    color:var(--ape-orange);
    letter-spacing:.265em;
    text-indent:.265em;
  }
  
  .brand-line .dark{
    color:var(--ape-ink);
    margin-top: 0px;
    letter-spacing:.012em;
    font-size: 27px;
  }
  
  .tagline{
    margin:26px auto 0;
    color:var(--ape-muted);
    font-size:clamp(17px, 2vw, 23px);
    font-weight:800;
    letter-spacing:-.025em;
  }
  
  .solution-title{
    margin:0 0 22px;
    color:var(--ape-orange-dark);
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.22em;
  }
  
  .solutions{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:20px;
    margin:0 auto;
  }
  
  .solution-card{
    position:relative;
    overflow:hidden;
    min-height:210px;
    padding:30px 24px 26px;
    border:1px solid rgba(255,255,255,.56);
    border-radius:30px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.13) 48%, rgba(255,255,255,.065) 100%);
    box-shadow:
      0 30px 80px rgba(16,26,20,.15),
      0 10px 26px rgba(16,26,20,.085),
      inset 0 1px 0 rgba(255,255,255,.72),
      inset 0 -18px 34px rgba(255,255,255,.075),
      inset 0 0 42px rgba(255,255,255,.10);
    backdrop-filter:blur(34px) saturate(1.65) contrast(1.08);
    -webkit-backdrop-filter:blur(34px) saturate(1.65) contrast(1.08);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  }
  
  .solution-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:
      radial-gradient(circle at 24% 14%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.18) 24%, transparent 48%),
      radial-gradient(circle at 82% 88%, rgba(255,255,255,.18) 0%, transparent 42%),
      linear-gradient(125deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.07) 34%, transparent 58%);
    opacity:.58;
    pointer-events:none;
  }
  
  .solution-card::after{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:29px;
    border:1px solid rgba(255,255,255,.34);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.12),
      inset 12px 12px 30px rgba(255,255,255,.13),
      inset -14px -16px 34px rgba(16,26,20,.05);
    pointer-events:none;
  }
  
  .solution-card > *{
    position:relative;
    z-index:1;
  }
  
  .solution-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,.76);
    background:
      linear-gradient(145deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.16) 48%, rgba(255,255,255,.08) 100%);
    box-shadow:
      0 38px 92px rgba(16,26,20,.20),
      0 14px 32px rgba(16,26,20,.11),
      inset 0 1px 0 rgba(255,255,255,.78),
      inset 0 -18px 34px rgba(255,255,255,.10),
      inset 0 0 46px rgba(255,255,255,.14);
  }
  
  .solution-logo{
    max-width:185px;
    max-height:82px;
    width:auto;
    height:auto;
    object-fit:contain;
    margin-bottom:18px;
  }
  
  .solution-name{
    margin:0 0 8px;
    font-size:19px;
    font-weight:900;
    letter-spacing:-.035em;
    color:var(--ape-ink);
  }
  
  .solution-copy{
    margin:0;
    color:var(--ape-muted);
    font-size:15px;
    font-weight:800;
    line-height:1.35;
  }
  
  .footer{
    min-height:64px;
    background:linear-gradient(90deg, var(--ape-orange-dark), var(--ape-orange));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px 20px;
    text-align:center;
    font-size:13px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  
  @media (max-width:820px){
    .page{
      align-items:flex-start;
      padding-top:36px;
    }
  
    .hero{
      margin-bottom:34px;
    }
  
    .ape-logo{
      width:min(220px, 70vw);
    }
  
    .brand-line{
      width:min(430px, 100%);
    }
  
    .brand-line .orange,
    .brand-line .dark{
      font-size:clamp(24px, 6.7vw, 35px);
    }
  
    .brand-line .orange{
      letter-spacing:.22em;
      text-indent:.22em;
    }
  
    .solutions{
      grid-template-columns:1fr;
      max-width:430px;
    }
  
    .solution-card{
      min-height:188px;
    }
  }

  .solution-link{
    color:inherit;
    text-decoration:none;
    cursor:pointer;
  }
  
  .solution-link:focus-visible{
    outline:3px solid rgba(242,101,34,.55);
    outline-offset:6px;
  }

  .solution-button{
    width:100%;
    font-family:inherit;
    color:inherit;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
  }
  
  .solution-button:focus-visible{
    outline:3px solid rgba(242,101,34,.55);
    outline-offset:6px;
  }
  
  .ape-modal{
    position:fixed;
    inset:0;
    z-index:1000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
  }
  
  .ape-modal:target{
    display:flex;
  }
  
  .ape-modal-backdrop{
    position:absolute;
    inset:0;
    display:block;
    background:rgba(16,26,20,.60);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  
  .ape-modal-panel{
    position: relative;
    z-index: 2;
    width: min(634px, 100%);
    /* min-height: 320px; */
    border-radius: 42px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 34px 110px rgba(0, 0, 0, .28), 0 10px 34px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .92);
    overflow: visible;
    display: block;
    padding: 58px 310px 58px 42px;

  }
  
  .ape-modal-copy{
    position:relative;
    z-index:2;
    text-align:left;
    max-width:320px;
  }
  
  .ape-modal-copy h2{
    margin:0 0 10px;
    color:var(--ape-orange);
    font-size:30px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
  }
  
  .ape-modal-copy p{
    margin:0;
    color:#060807;
    font-size:25px;
    line-height:1.28;
    font-weight:800;
  }
  
  .ape-modal-image{
    position: absolute;
    right: 49px;
    top: -155px;
    z-index: 3;
    width: 345px;
    max-width: none;
    height: auto;
    filter: drop-shadow(0 22px 30px rgba(16, 26, 20, .20));
    pointer-events: none;
}
  
  .ape-modal-close{
    position:absolute;
    top:18px;
    right:18px;
    z-index:4;
    width:40px;
    height:40px;
    border-radius:999px;
    background:rgba(16,26,20,.08);
    color:var(--ape-ink);
    text-decoration:none;
    font-size:31px;
    line-height:36px;
    text-align:center;
    font-weight:700;
  }
  
  .ape-modal-close:hover{
    background:rgba(16,26,20,.14);
  }
  
  @media (max-width:720px){
    .ape-modal{
      padding:18px;
    }
  
    .ape-modal-panel{
      width:min(520px, 100%);
      min-height:auto;
      padding:34px 24px 28px;
      text-align:center;
    }
  
    .ape-modal-copy{
      max-width:none;
      text-align:center;
    }
  
    .ape-modal-copy h2{
      font-size:24px;
    }
  
    .ape-modal-copy p{
      font-size:20px;
      letter-spacing:.12em;
    }
  
    .ape-modal-image{
      position:relative;
      top:auto;
      right:auto;
      width:220px;
      display:block;
      margin:20px auto 0;
    }
  }