/**
 * 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:0;
  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--fm{
  grid-column:1 / -1;
  justify-self:center;
  width:calc((100% - 40px) / 3);
}

.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-logo--fm{
  max-height:82px;
  width:auto;
  object-fit:contain;
}

.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;
}

.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;
}

.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;
}

.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%);
  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:1100px){
  .solutions{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .solution-card--fm{
    width:calc((100% - 20px) / 2);
  }
}

@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,
  .solution-card--fm{
    width:100%;
    min-height:188px;
  }
}

@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;
  }
}