:root{--primary-color:#ff5a1f;--secondary-color:#000;--helper-color:#fff;--max-width:1440px;}

/* section */
.abcptefg{width:100%;position:relative;overflow:hidden;background-color:var(--secondary-color);display:flex;flex-direction:column;}
.abcptefginner{position:relative;z-index:2;width:calc(100% - 2em);max-width:var(--max-width);margin-inline:auto;display:flex;flex-direction:column;gap:2em;align-items:center;justify-content:center;text-align:center;}
.abcptefghead{display:flex;flex-direction:column;gap:1.1em;align-items:center;max-width:47.5rem;}
.abcptefgpill{display:inline-flex;align-items:center;gap:.6em;min-height:2.1rem;padding-inline:.9em 1em;border-radius:999px;font-size:clamp(.75rem,.72rem + .15vw,.85rem);font-weight:600;color:color-mix(in srgb,var(--helper-color) 85%,transparent);background-color:color-mix(in srgb,var(--helper-color) 5%,transparent);border:1px solid color-mix(in srgb,var(--helper-color) 9%,transparent);backdrop-filter:blur(8px);}
.abcptefgdot{width:1rem;height:1rem;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--primary-color),var(--helper-color) 25%),color-mix(in srgb,var(--primary-color),var(--secondary-color) 40%));box-shadow:0 0 .75rem color-mix(in srgb,var(--primary-color) 70%,transparent);}
.abcptefgtitle{font-size:clamp(1.7rem,1.1rem + 2.8vw,3.4rem);font-weight:700;line-height:1.25;}
.abcptefglead{max-width:52ch;font-size:clamp(.88rem,.84rem + .3vw,1.06rem);line-height:1.8;color:color-mix(in srgb,var(--helper-color) 58%,transparent);}
.abcptefgglow{position:absolute;z-index:0;top:-9rem;left:50%;transform:translateX(-50%);width:min(47.5rem,140%);height:32.5rem;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--primary-color) 20%,transparent),transparent 65%);filter:blur(70px);pointer-events:none;}


/* why us */
.abcptefgbento{width:100%;display:grid;grid-template-columns:1fr;gap:1em;text-align:start;}
.abcptefgtile{position:relative;overflow:hidden;min-height:14.4rem;padding:1.6em;border-radius:1.4rem;border:1px solid color-mix(in srgb,var(--helper-color) 9%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--helper-color) 8%,var(--secondary-color)),color-mix(in srgb,var(--helper-color) 6%,var(--secondary-color)));display:flex;flex-direction:column;gap:.55em;align-items:flex-start;justify-content:flex-start;transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .45s ease,box-shadow .55s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1),filter .5s cubic-bezier(.16,1,.3,1);}
.abcptefgtile>*{position:relative;z-index:2;}
.abcptefgtile::before{content:'';position:absolute;z-index:1;pointer-events:none;left:50%;bottom:-38%;transform:translateX(-50%);width:65%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--primary-color) 32%,transparent),color-mix(in srgb,var(--primary-color) 12%,transparent) 46%,transparent 70%);opacity:.4;filter:blur(2px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.abcptefgtile::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--secondary-color) 40%,transparent) 100%);opacity:0;transition:opacity .55s cubic-bezier(.16,1,.3,1);}
.abcptefgbento .abcptefgtile:hover,.abcptefgbento .abcptefgtile:focus-visible{transform:translateY(-.4rem);border-color:color-mix(in srgb,var(--helper-color) 24%,transparent);box-shadow:0 2.1rem 4rem -1.9rem color-mix(in srgb,var(--primary-color) 55%,transparent);outline:none;}
.abcptefgbento .abcptefgtile:hover::before,.abcptefgbento .abcptefgtile:focus-visible::before{opacity:.85;transform:translateX(-50%) scale(1.12);}
.abcptefgbento:has(.abcptefgtile:hover) .abcptefgtile:not(:hover),.abcptefgbento:has(.abcptefgtile:focus-visible) .abcptefgtile:not(:focus-visible){opacity:.62;filter:saturate(.55) brightness(.82);transform:none;box-shadow:none;}
.abcptefgbento:has(.abcptefgtile:hover) .abcptefgtile:not(:hover)::after,.abcptefgbento:has(.abcptefgtile:focus-visible) .abcptefgtile:not(:focus-visible)::after{opacity:.55;}
.abcptefgbento:has(.abcptefgtile:hover) .abcptefgtile:not(:hover)::before,.abcptefgbento:has(.abcptefgtile:focus-visible) .abcptefgtile:not(:focus-visible)::before{opacity:.15;}
.abcptefgname{font-size:clamp(1rem,.95rem + .3vw,1.3rem);font-weight:700;line-height:1.3;}
.abcptefgtext{max-width:34ch;font-size:clamp(.82rem,.8rem + .15vw,.92rem);color:color-mix(in srgb,var(--helper-color) 58%,transparent);}
.abcptefgendpoint{display:flex;align-items:center;gap:.65em;margin-top:auto;min-height:2.4rem;padding-inline:.9em;border-radius:999px;border:1px solid color-mix(in srgb,var(--helper-color) 9%,transparent);background-color:color-mix(in srgb,var(--helper-color) 3%,transparent);font-size:clamp(.75rem,.72rem + .12vw,.82rem);width:fit-content;}
.abcptefgendpoint i{color:var(--primary-color);}
.abcptefgtile>.abcptefggriddots{position:absolute;inset:0;z-index:1;background-image:radial-gradient(color-mix(in srgb,var(--helper-color) 14%,transparent) 1px,transparent 1px);background-size:15px 15px;mask-image:radial-gradient(70% 60% at 50% 70%,var(--secondary-color),transparent 75%);-webkit-mask-image:radial-gradient(70% 60% at 50% 70%,var(--secondary-color),transparent 75%);opacity:.5;}

@media (hover:none){
  .abcptefgbento:has(.abcptefgtile:hover) .abcptefgtile:not(:hover){opacity:1;filter:none;}
}
@media (min-width:768px){
  .abcptefgbento{grid-template-columns:repeat(6,1fr);gap:1.1em;}
  .abcptefgtilewide,.abcptefgtilemid{grid-column:span 3;}
  .abcptefgtilethird{grid-column:span 2;}
}
@media (min-width:1024px){
  .abcptefgtile{min-height:14.4rem;}
}