/* Native adaptations inspired by Aceternity UI's five selected effects.
   No framework runtime, raster decoration, or changes to the original 3D stage. */
@property --ui-orbit-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root { --ui-effect-mint: #a7f3d0; --ui-effect-teal: #49c6aa; }
.ui-beams-host { isolation: isolate; }
.shop-shell.ui-beams-host { position: relative; }
.ui-beams {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  pointer-events: none; user-select: none; border-radius: inherit;
  background: radial-gradient(ellipse at 85% 20%, #4ac5a00d, transparent 55%);
}
.ui-beams > svg { display: block; width: 100%; height: 100%; max-width: none; }
.ui-beam-rail { fill: none; stroke: #82cbb817; stroke-width: .8; }
.ui-beam-light {
  fill: none; stroke: url(#ui-beam-gradient); stroke-width: 1.35;
  stroke-linecap: round; stroke-dasharray: 105 1495;
  animation: ui-beam-travel var(--ui-beam-duration, 16s) linear infinite;
  animation-delay: var(--ui-beam-delay, 0s);
}
.hero-atmosphere > .ui-beams { z-index: 0; opacity: .6; }
.hero-atmosphere .ui-beams svg { fill: none; stroke: none; }
.tech-section > .ui-beams { opacity: .9; }
.workflow-showcase > .ui-beams { opacity: .65; }
.shop-shell > .ui-beams { inset: 0 -30px; opacity: .7; }
.ui-glow { position: relative; isolation: isolate; --ui-glow-angle: 35deg; }
.ui-glow::after {
  content: ''; position: absolute; inset: -1px; z-index: 3;
  border: 1.5px solid transparent; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--ui-glow-angle), transparent 0deg 230deg,
    #3a856a50 260deg, #68d8bb 295deg, #e0fff0 315deg, #4cad91 337deg, transparent 360deg) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude; opacity: .3; transition: opacity .25s ease;
}
.ui-glow:hover::after, .ui-glow:focus-within::after { opacity: 1; }
.ui-glow:focus-within { --ui-glow-angle: 35deg !important; }
.ui-moving-border { position: relative; isolation: isolate; }
.ui-moving-border::after {
  content: ''; position: absolute; inset: -2px; z-index: 2; pointer-events: none;
  border: 1.5px solid transparent; border-radius: inherit;
  background: conic-gradient(from var(--ui-orbit-angle), #47836b35 0deg 235deg,
    #55c5a4 285deg, #e6fff2 320deg, #55c5a4 340deg, #47836b35 360deg) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude; animation: ui-border-orbit 5s linear infinite;
}
.ui-moving-border:disabled::after, .ui-moving-border[aria-disabled=true]::after { animation: none; opacity: .2; }
.ui-moving-border:focus-visible { outline: 2px solid #a7f3d0; outline-offset: 6px; }

/* Bento Grid: vector workflow illustrations link to the existing, real views. */
.ui-feature-overview { margin-top: 52px; padding-top: 42px; border-top: 1px solid #a4c6bb26; }
.ui-feature-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.ui-feature-heading .workflow-kicker { margin: 0 0 14px; }
.site-polished .ui-feature-heading h3 { font-size: clamp(27px, 3vw, 38px); line-height: 1.16; letter-spacing: -.045em; margin: 0; }
.ui-feature-heading > p { max-width: 31ch; margin: 0; color: #aebfb6; font-size: 13px; line-height: 1.8; }
.ui-bento-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ui-bento-card {
  display: flex; flex-direction: column; min-width: 0; padding: 24px;
  border: 1px solid #7bba9e35; border-radius: 16px; background: #101a17;
  color: #e9f4ee; text-decoration: none;
  box-shadow: inset 0 1px 0 #cffff00a; transition: background .25s ease, border-color .25s ease;
}
.ui-bento-card:hover { background: #15231d; border-color: #83caaa55; }
.ui-bento-card:first-child { grid-column: span 2; background: linear-gradient(140deg, #162b22, #0f1b17); }
.ui-bento-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; letter-spacing: .09em; color: #9fc4b0; }
.ui-bento-index { font-variant-numeric: tabular-nums; color: #759b87; }
.ui-bento-visual { position: relative; display: grid; place-items: center; overflow: hidden; margin: 10px -8px 19px; min-height: 150px; border-radius: 10px; }
.ui-bento-visual::before {
  content: ''; position: absolute; inset: 0; opacity: .3; pointer-events: none;
  background: radial-gradient(ellipse at center, #68d8ac20, transparent 70%),
    linear-gradient(#6dba9d12 1px, transparent 1px), linear-gradient(90deg, #6dba9d12 1px, transparent 1px);
  background-size: auto, 30px 30px, 30px 30px;
  mask-image: radial-gradient(ellipse, #000, transparent 72%);
}
.ui-bento-visual img { display: block; width: 100%; max-width: 390px; height: 156px; object-fit: contain; position: relative; }
.ui-bento-card:first-child .ui-bento-visual img { max-width: 550px; }
.ui-bento-card h4 { margin: 0 0 12px; font-size: 20px; line-height: 1.35; letter-spacing: -.025em; color: #edf8f1; }
.ui-bento-card:first-child h4 { font-size: clamp(22px, 2.2vw, 29px); }
.ui-bento-card p { font-size: 12px; line-height: 1.9; color: #acc1b4; margin: 0 0 25px; max-width: 55ch; }
.ui-bento-link { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 15px; border-top: 1px solid #86b49c26; font-size: 11px; color: #ceeedb; }
.ui-bento-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ui-feature-note { color: #8aa795; font-size: 10px; line-height: 1.8; margin: 19px 0 0; }

/* Tracing Beam: scroll progress alongside real instructions, with static fallback. */
.ui-trace-story { position: relative; margin: 34px 0 32px; padding-left: 34px; }
.ui-start-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.ui-start-steps > li { display: flex; align-items: center; gap: 23px; position: relative; padding: 22px 26px; background: #101a17b8; border: 1px solid #89b59a28; border-radius: 13px; }
.ui-start-number { align-self: start; font-size: 11px; font-variant-numeric: tabular-nums; color: #719a84; padding-top: 4px; }
.ui-start-copy { flex: 1; min-width: 0; }
.ui-start-copy h3 { margin: 0 0 8px; color: #e8f4ed; font-size: 17px; line-height: 1.4; letter-spacing: -.02em; }
.ui-start-copy p { margin: 0; color: #aebeb6; font-size: 12px; line-height: 1.8; }
.ui-start-steps > li > svg { flex: 0 0 25px; width: 25px; height: 25px; fill: none; stroke: #82bda0; stroke-width: 1.25; }
.ui-start-steps > li[data-ui-trace-current=true] { border-color: #86d2ac70; background: #16241ec9; }
.ui-start-steps > li[data-ui-trace-current=true] .ui-start-number { color: #beeed1; }
.ui-trace-line { position: absolute; width: 22px; left: 0; top: 0; height: 100%; overflow: visible; pointer-events: none; }
.ui-trace-track { fill: none; stroke: #7aa38a38; stroke-width: 1.5; }
.ui-trace-progress { fill: none; stroke: url(#ui-trace-gradient); stroke-width: 2; stroke-linecap: round; }
.ui-trace-head { fill: #d7ffe7; stroke: #64c698; stroke-width: 3; }
.ui-trace-halo { fill: #69e0ab1f; }
.guide-page .guide-document.ui-trace-host { position: relative; padding-left: 36px; }
.guide-page .ui-trace-track { stroke: #9474bb55; }
.guide-page .ui-trace-line { top: 38px; height: calc(100% - 38px); }

[data-ui-inview=false] .ui-beam-light,
.ui-moving-border[data-ui-inview=false]::after,
html[data-ui-hidden=true] .ui-beam-light,
html[data-ui-hidden=true] .ui-moving-border::after { animation-play-state: paused; }
@keyframes ui-beam-travel { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
@keyframes ui-border-orbit { to { --ui-orbit-angle: 360deg; } }
@media (max-width: 1000px) {
  .ui-bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-bento-card:first-child { grid-column: span 2; }
  .ui-feature-heading { align-items: start; flex-direction: column; gap: 18px; }
  .ui-feature-heading > p { max-width: 54ch; }
}
@media (max-width: 700px) {
  .ui-feature-overview { margin-top: 34px; padding-top: 28px; }
  .ui-bento-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ui-bento-card:first-child { grid-column: auto; }
  .ui-bento-card { padding: 20px; border-radius: 13px; }
  .ui-bento-visual { margin-bottom: 15px; min-height: 135px; }
  .ui-bento-visual img { height: 140px; }
  .ui-bento-card h4 { font-size: 20px; }
  .ui-bento-card p { font-size: 13px; }
  .ui-bento-link { font-size: 12px; min-height: 28px; }
  .ui-trace-story { padding-left: 24px; margin-top: 26px; }
  .ui-trace-line { left: -2px; width: 18px; }
  .ui-start-steps > li { padding: 18px 15px; gap: 12px; align-items: start; }
  .ui-start-copy h3 { font-size: 16px; }
  .ui-start-copy p { font-size: 12px; }
  .ui-start-steps > li > svg { display: none; }
  .ui-beams path:nth-of-type(n+7) { display: none; }
  .guide-page .guide-document.ui-trace-host { padding-left: 24px; }
  .shop-shell > .ui-beams { inset-inline: 0; }
}
@media (hover: none) {
  .ui-glow::after { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-beam-light, .ui-moving-border::after { animation: none !important; }
  .ui-beam-light { stroke-dasharray: 260 1340; stroke-dashoffset: 500; opacity: .6; }
  .ui-moving-border::after { --ui-orbit-angle: 35deg; }
  .ui-glow::after, .ui-bento-card { transition: none; }
}