/* OptimAI: declarations copied from assets/main.css, with semantic aliases for
   the original Tailwind utilities. Source: https://ai-agency-op-tailwind.quixlab.workers.dev/
   Shader and magnetic hover scripts are preserved in the adjacent JS files.
   Silver color overrides requested for Rogue on 2026-10-08. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/v2/fonts/ibm-plex-mono-medium.ttf') format('truetype')}

.laser-flow{pointer-events:none;top:0;width:100%;position:absolute;overflow:hidden;height:330px}
.laser-flow-canvas{inset:0;top:0;z-index:1;width:100%;height:100%;display:block;position:absolute}
@media(min-width:768px){.laser-flow{height:380px}}
@media(min-width:1024px){.laser-flow{height:1280px}}
@media(min-width:1280px){.laser-flow{height:1336px}}

.btn--light.magnetic-button{display:inline-block;padding:0;min-height:0;border:0;background:none;box-shadow:none;letter-spacing:normal;line-height:1.4;transform:none;white-space:nowrap}
.magnetic-button-group{position:relative;z-index:10;display:block;width:100%}
.magnetic-button-surface{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:center;gap:7px;border-radius:999px;background:linear-gradient(90deg,#B8BEC7 0%,#EEF1F5 34%,#D0D5DD 58%,#FFFFFF 82%,#B6BEC9 100%);padding:11px 24px}
.magnetic-button-label{display:inline-flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:16px;line-height:1.4;font-weight:500;color:#0D1017}
.magnetic-button-arrow{display:inline-block;transition:translate .5s cubic-bezier(.4,0,.2,1)}
.btn--light .magnetic-button-arrow svg{width:18px;height:18px;fill:none}
.magnetic-button-group:hover .magnetic-button-arrow{translate:4px 0}
.magnetic-button-gradient{pointer-events:none;position:absolute;top:50%;right:0;z-index:-1;height:56px;width:88px;translate:0 -50%;border-radius:999px;background:linear-gradient(270deg,#CBD3DF 0%,rgba(229,232,239,.20) 95.12%);filter:blur(12px);transition:background-color .5s cubic-bezier(.4,0,.2,1)}
.magnetic-button-gradient--inner{right:8px;height:60px;width:82px;filter:blur(7px)}
.btn--sm .magnetic-button-surface{height:40px}
.btn--sm .magnetic-button-gradient{height:40px}
.contact-card .btn--light.magnetic-button{padding:0}
@media(min-width:768px){.magnetic-button-surface{padding-block:13px}}

/* Rogue layout integration only. LaserFlow parameters and rendering stay original.
   The flare's midpoint meets the following panel despite the longer Rogue copy. */
.hero__intro{min-height:488px}
.hero .laser-flow{height:var(--laser-layout-height,1336px)}
@media(min-width:1024px) and (max-width:1279px){.hero__intro{min-height:465px}.hero .laser-flow{height:var(--laser-layout-height,1280px)}}
@media(max-width:1023px){.hero__intro{min-height:0}.hero .laser-flow{translate:20% 0;height:var(--laser-layout-height,1280px)}}

/* Original CTA globe layout: grid h-full place-items-end; absolute figure,
   -top-20 / md:top-0; object-cover mix-blend-lighten; md:min-h-[662px]. */
.cta__inner{position:relative;display:grid;height:100%;place-items:end}
.cta__globe{position:absolute;top:-80px;left:0;width:100%;height:100%;pointer-events:none}
.globe-image{object-fit:cover;mix-blend-mode:lighten}
.cta__content{position:relative;z-index:10;margin-inline:auto;width:100%}
@media(max-width:602px){.globe-image{width:107%;height:107%}}
@media(min-width:768px){.cta__inner{min-height:662px}.cta__globe{top:0}.globe-image{width:100%;height:100%;object-fit:cover}}
@media(prefers-reduced-motion:reduce){.magnetic-button-group:hover .magnetic-button-arrow{translate:none}}