.xg { --aqua: #ADEDF6; --amb: #FBAE27; position: relative; overflow: hidden; padding: clamp(96px, 9vw, 140px) var(--g) clamp(112px, 10vw, 160px); background: #03555C; color: #fff; }
.xg__bg { position: absolute; inset: 0; pointer-events: none; opacity: .25;
  background-image: linear-gradient(rgba(173,237,246,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(173,237,246,.08) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent calc(var(--rv, 1) * 75%)); mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent calc(var(--rv, 1) * 75%)); } 
.xg__spot { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(173,237,246,.1), transparent 40%); }
.xg:hover .xg__spot { opacity: 1; }
.xg__in { position: relative; z-index: 2; max-inline-size: 1360px; margin: 0 auto; }

.xg__hd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 48px; align-items: end; margin-block-end: 64px; }
.xg__h { max-inline-size: 13em; margin: 0; font-size: clamp(36px, 5vw, 72px); font-weight: 400; line-height: 1.02; letter-spacing: -.045em; color: #fff; }
.xg__s { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.65); }

.xg__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.xg__c { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-block-size: 360px; padding: 44px 36px 36px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); margin: 0 -1px -1px 0; transition: background-color .5s cubic-bezier(.16, 1, .3, 1); }
.xg__c::before { content: ""; position: absolute; inset: 14px auto auto 14px; inline-size: 14px; block-size: 14px; border: solid var(--amb); border-width: 1px 0 0 1px; opacity: 0; transform: translate(6px, 6px); transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1); }
.xg__c::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(300px circle at var(--cx, 50%) var(--cy, 50%), rgba(173,237,246,.14), transparent 60%); }
.xg__o { position: absolute; inset: -1px; inline-size: calc(100% + 2px); block-size: calc(100% + 2px); overflow: visible; pointer-events: none; }
.xg__o rect { fill: none; stroke: var(--aqua); stroke-width: 1.5; stroke-dasharray: 1600; stroke-dashoffset: 1600; filter: drop-shadow(0 0 6px rgba(173,237,246,.5)); transition: stroke-dashoffset .9s cubic-bezier(.22, 1, .36, 1); }
.xg__i { display: block; inline-size: 32px; block-size: 32px; margin-block-end: 28px; color: var(--aqua); filter: drop-shadow(0 0 4px rgba(173,237,246,.25)); transition: color .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1), filter .4s ease; }
.xg__t { margin: 0 0 14px; max-inline-size: 16em; font-size: 22px; font-weight: 400; line-height: 1.18; letter-spacing: -.02em; color: #fff; }
.xg__d { max-inline-size: 320px; margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.65); }
.xg__f { display: flex; align-items: flex-end; justify-content: space-between; margin-block-start: 28px; }
.xg__a { padding-block-end: 3px; border-block-end: 1px solid var(--aqua); font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--aqua); text-decoration: none; transition: color .3s ease, border-color .3s ease; }
.xg__a::after { content: ""; position: absolute; inset: 0; z-index: 1; } 
.xg__ar { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border: 1px solid rgba(255,255,255,.2); color: #fff; transition: background-color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1), color .35s ease; }

@media (hover: hover) {
  .xg__c:hover { background: rgba(255,255,255,.03); }
  .xg__c:hover::before { opacity: 1; transform: none; }
  .xg__c:hover::after { opacity: 1; }
  .xg__c:hover .xg__o rect { stroke-dashoffset: 0; }
  .xg__c:hover .xg__i { color: var(--amb); transform: scale(1.18) rotate(-4deg); filter: drop-shadow(0 0 14px rgba(251,174,39,.7)) drop-shadow(0 0 24px rgba(251,174,39,.4)); animation: xg-pulse 1.8s ease-in-out infinite; }
  .xg__c:hover .xg__a { color: var(--amb); border-color: var(--amb); }
  .xg__c:hover .xg__ar { background: var(--amb); border-color: var(--amb); color: #03555C; transform: translate(4px, -4px); }
}
.xg__c:has(.xg__a:focus-visible) .xg__o rect { stroke-dashoffset: 0; }
.xg__a:focus-visible { outline: none; }
@keyframes xg-pulse {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(251,174,39,.7)) drop-shadow(0 0 24px rgba(251,174,39,.4)); }
  50% { filter: drop-shadow(0 0 22px rgba(255,255,255,.9)) drop-shadow(0 0 40px rgba(251,174,39,.7)); }
}
@media (prefers-reduced-motion: reduce) { .xg__c:hover .xg__i { animation: none; } }

@media (max-width: 960px) { .xg__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xg__hd { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
@media (max-width: 640px) { .xg__g { grid-template-columns: minmax(0, 1fr); } .xg__c { min-block-size: 0; padding: 36px 28px 28px; } }