@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300');

:root{
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --ink-1: #eaf1ff;
  --ink-2: #9cc2ff;
  --accent: #62a6ff;
  --accent-2: #ffc34d;
  --bg-2: #0f1216;
  --card: #0f141c;
  --text: #eaf1ff;
  --muted: #cfe1ffcc;
  --hairline: rgba(255,255,255,.08);
  --ring: rgba(112,168,255,.5);
  --prime: #1e5cff;
  --prime-h: #1749cc;
  --nav-h: 80px;
  --av-nav-h: var(--nav-h);
  --radius: 14px;
}

:root{
  --z-drawer: 2147486500;
  --z-scrim: 2147486400;
  --ff-body: var(--ff-body, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif);
  --ff-head: var(--ff-head, var(--ff-body));
  --ff-small: var(--ff-small, var(--ff-body));
  --ui-glass-strength: var(--ui-glass-strength, 10px);
  --ui-glass-sat: var(--ui-glass-sat, 120%);
  --btn-from: var(--btn-from, #232323);
  --btn-to: var(--btn-to, #6495ed);
  --btn-glow: var(--btn-glow, 18px);
  --btn-glass-blur: var(--btn-glass-blur, 10px);
  --btn-glass-sat: var(--btn-glass-sat, 125%);
  --pill-from: var(--pill-from, #262a31);
  --pill-to: var(--pill-to, #12151a);
  --pill-glow: var(--pill-glow, 8px);
  --pill-glass-blur: var(--pill-glass-blur, 8px);
  --pill-glass-sat: var(--pill-glass-sat, 130%);
  --panel-from: var(--panel-from, #2a3038);
  --panel-to: var(--panel-to, #0b0f14);
  --panel-glow: var(--panel-glow, 40px);
  --panel-glass-blur: var(--panel-glass-blur, 14px);
  --panel-glass-sat: var(--panel-glass-sat, 140%);
  --card-from: var(--card-from, #0f1216);
  --card-to: var(--card-to, #353535);
  --card-glow: var(--card-glow, 22px);
  --card-glass-blur: var(--card-glass-blur, 10px);
  --card-glass-sat: var(--card-glass-sat, 130%);
  --ico-outline: 1px;
  --sec-glow-sm: 6px;
  --sec-glow-lg: 14px;
  --sec-h2-size: clamp(1.85rem, 2.2vw + 1.1rem, 2.8rem);
  --sec-ico-size: 1.35em;
  --sec-badge-radius: .6em;
  --sec-badge-pad-y: .18em;
  --sec-badge-pad-x: .55em;
  --sec-badge-shadow: 3px 3px 1px .5px transparent;
  --sec-outline: 1px;
  /* Buttons */
  --btn-radius: 14px;
  --btn-weight: 800;
  --btn-case: none;                /* none | uppercase | capitalize */
  --btn-border-w: 2px;
  --btn-hover-lift: 1px;           /* translateY on hover */
  --btn-shadow: 0 6px 20px rgba(0,0,0,.18);
  --btn-bg-from: var(--accent, #60a5fa);
  --btn-bg-to:   var(--accent-2, #22d3ee);
  --btn-text: #0b0f14;

  /* Badges (pills) */
  --badge-radius: 9999px;
  --badge-weight: 700;
  --badge-shadow: 0 8px 18px rgba(0,0,0,.22);
  --badge-text: #fff;
  --badge-from: #2563EB;           /* per-badge can override */
  --badge-to:   #1E3A8A;

  /* Global corners (optional) */
  --card-radius: 16px;
}

:root{
  /* Typography vars the editor will control */
  --font-head: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --h-weight: 800;
  --h-letter: .2px;
  --h-case: none;            /* none | uppercase | capitalize */

  --body-weight: 400;
  --body-size: 1rem;         /* base size */
  --body-line: 1.6;
  --body-letter: .1px;
}

/* Wire them up */
body{
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: var(--body-line);
  letter-spacing: var(--body-letter);
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-head);
  font-weight: var(--h-weight);
  letter-spacing: var(--h-letter);
  text-transform: var(--h-case);
}


html{
  font-family: var(--ff-body);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6,
.brand-name{
  font-family: var(--ff-head);
}

.small, .badge, .brand-tag{
  font-family: var(--ff-small);
}

.ui-glassy #av-nav{
  background: color-mix(in oklab, var(--bg-2) 78%, transparent);
  -webkit-backdrop-filter: blur(var(--ui-glass-strength)) saturate(var(--ui-glass-sat));
  backdrop-filter: blur(var(--ui-glass-strength)) saturate(var(--ui-glass-sat));
}

.ui-solid #av-nav{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.ui-glassy .card{
  background: color-mix(in oklab, var(--bg-2) 88%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}

.ui-solid .card{
  background: var(--card);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#font-preview{
  display: grid;
  gap: 10px;
  padding: 14px;
  margin-top: 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--bg-2);
}

#font-preview h4{
  margin: 0;
}

#font-preview p{
  margin: 0;
  color: var(--muted);
}

#font-preview small{
  color: var(--muted);
}

*, *::before, *::after{
  box-sizing: inherit;
}

.num, .big, .per{
  font-feature-settings: "tnum" 1;
}

h1,h2,h3{
  letter-spacing: -0.01em;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  padding-top: var(--nav-h);
  transition: padding-top .25s ease;
}

img{
  max-width: 100%;
  height: auto;
}

.container{
  width: min(1100px, 92vw);
  margin-inline: auto;
}

.grid{
  display: grid;
  gap: 16px;
}

.grid-3{
  grid-template-columns: repeat(3,1fr);
}

.card{
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
  -webkit-backdrop-filter: blur(var(--card-glass-blur)) saturate(var(--card-glass-sat));
  backdrop-filter: blur(var(--card-glass-blur)) saturate(var(--card-glass-sat));
  box-shadow: 0 10px var(--card-glow) rgba(0,0,0,.18);
}

.card .p{
  padding: 14px 14px 16px;
}

.badge{
  display: inline-block;
  border: 1px solid var(--hairline);
  padding: .25rem .5rem;
  margin: .25rem .35rem .25rem 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: .8rem;
  color: var(--muted);
  background: linear-gradient(180deg, var(--pill-from), var(--pill-to));
  -webkit-backdrop-filter: blur(var(--pill-glass-blur)) saturate(var(--pill-glass-sat));
  backdrop-filter: blur(var(--pill-glass-blur)) saturate(var(--pill-glass-sat));
  box-shadow: 0 4px var(--pill-glow) rgba(0,0,0,.18);
}

#scroll-progress{
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg,#6b2cff,#6495ed);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 2147482000;
}

#av-nav{
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 2147483000;
  background: color-mix(in oklab, var(--bg-2) 78%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid var(--hairline);
  transition: transform .35s ease, background .25s ease, height .25s ease;
  will-change: transform;
}

body.nav-hide #av-nav{
  transform: none !important;
}

body.nav-tight #av-nav{
  height: var(--nav-h) !important;
}

body.nav-tight #av-nav{
  background: transparent;
}

#av-nav .av-row{
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
}

#av-desktop-links{
  margin-left: auto;
  gap: 1rem;
  align-items: center;
  display: none !important;
}

#av-desktop-links a{
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  padding: .5rem .65rem;
  border-radius: 10px;
  position: relative;
}

#av-desktop-links a::after{
  content: "";
  position: absolute;
  left: .6rem;
  right: .6rem;
  bottom: .35rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,#6b2cff,#6495ed);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .2s ease;
}

#av-desktop-links a:hover::after, #av-desktop-links a[aria-current="true"]::after{
  transform: scaleX(1);
}

.nav-item.has-panel{
  position: relative;
}

.nav-panel{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(860px, 92vw);
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  display: none;
  padding: 18px;
  z-index: 2147483200;
}

.nav-item.has-panel:focus-within .nav-panel,
.nav-item.has-panel:hover .nav-panel{
  display: block;
}

.nav-panel .grid{
  grid-template-columns: repeat(4,1fr);
}

.nav-panel a{
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px;
  display: block;
  background: linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
}

#av-hamburger{
  margin-left: auto;
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
}

#av-hamburger svg rect{
  fill: var(--text);
}

#av-drawer{
  background: color-mix(in oklab, var(--bg-2) 92%, transparent);
  color: var(--text);
  border-left: 1px solid var(--hairline);
  box-shadow: -10px 0 30px rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  outline: none;
  position: fixed;
  top: var(--av-nav-h);
  right: 0;
  bottom: 0;
  width: min(82vw, 360px);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  z-index: var(--z-drawer);
}

#av-drawer[aria-hidden="false"]{
  transform: translateX(0);
}

#av-drawer .drawer-links{
  flex-direction: column;
  overflow: auto;
  padding: 12px 14px;
  align-content: start;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#av-drawer a{
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  padding: .6rem .75rem;
  border-radius: 10px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-name{
  font-weight: 850;
  background: linear-gradient(180deg,var(--ink-1),var(--ink-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  position: relative;
  display: inline-block;
  font-size: clamp(1.6rem, 2.9vw, 2.2rem);
  line-height: 1;
  padding-bottom: 2px;
  margin-bottom: 0;
  letter-spacing: .9px;
}

.brand:hover .brand-name::after, .brand:focus-visible .brand-name::after{
  width: 42%;
  transform: scaleX(1);
  opacity: 1;
}

.brand-tag{
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .5px;
  color: var(--muted);
  line-height: 1.25;
  margin-top: 2px;
}

header.hero{
  min-height: clamp(560px, 72vh, 900px);
  display: grid;
  place-items: center;
  text-align: center;
  background: url('/assets/img/services-hero-1920.jpg') center/cover no-repeat;
  background-image: image-set(
    url('/assets/img/services-hero-1920.webp') type('image/webp') 2x,
    url('/assets/img/services-hero-1600.webp') type('image/webp') 1.5x,
    url('/assets/img/services-hero-1280.webp') type('image/webp') 1x
  );
  position: relative;
  overflow: hidden;
}

header.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(1200px 600px at 50% 10%, rgba(100,149,237,.25), transparent 60%),
             linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
}

.hero-inner{
  position: relative;
  z-index: 1;
  max-width: 980px;
  padding: 4rem 1rem;
  margin: 0 auto;
}

.hero .btn-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.kicker{
  display: inline-flex;
  align-items: center;
  gap: .5ch;
  margin: 0 0 .6rem;
  padding: .28rem .7rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .3px;
  position: relative;
  background: linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06)) padding-box,
             linear-gradient(90deg,var(--accent),var(--accent-2)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  color: var(--text);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  backdrop-filter: blur(4px) saturate(120%);
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  cursor: pointer;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 550;
  letter-spacing: .2px;
}

.btn-iris{
  color: #fff;
  padding: .8rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background-position .25s ease, filter .2s ease;
  background-size: 200% 100%;
  background-position: 0% 50%;
  background: linear-gradient(90deg, var(--btn-from), var(--btn-to)) padding-box,
    linear-gradient(90deg, var(--btn-from), var(--btn-to)) border-box;
  -webkit-backdrop-filter: blur(var(--btn-glass-blur)) saturate(var(--btn-glass-sat));
  backdrop-filter: blur(var(--btn-glass-blur)) saturate(var(--btn-glass-sat));
  box-shadow: 0 6px var(--btn-glow) rgba(0,0,0,.18);
}

.btn-iris:hover{
  background-position: 100% 50%;
  transform: translateY(-1px);
  filter: saturate(1.06);
  box-shadow: 0 10px 26px rgba(100,149,237,.4);
}

.btn-prime{
  background: var(--prime);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: .75rem 1.1rem;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(30,92,255,.35);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}

.btn-prime:hover{
  transform: translateY(-1px);
}

section{
  padding: 56px 0 80px;
}

#services h2, #gallery h2, #pricing h2, #about h2, #contact h2{
  margin: 0 0 16px;
}

.grid-4{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
}

.collapsible{
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease, margin-top .2s ease;
}

.collapsible[hidden]{
  display: block !important;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

.collapsible:not([hidden]){
  max-height: 2000px;
  opacity: 1;
  margin-top: 16px;
}

#videos .video-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

#videos .thumb-card{
  background: #111925;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  aspect-ratio: 16/9;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

#videos .thumb-card a{
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  outline: 0;
}

#videos .thumb-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05);
  transition: transform .25s ease, filter .25s ease;
}

#videos .thumb-card .scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent,rgba(0,0,0,.25));
  opacity: .85;
  transition: opacity .25s ease;
}

#videos .thumb-card .play{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #dfe8ff);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 6px rgba(255,255,255,.08);
  display: grid;
  place-items: center;
  transition: transform .2s ease, box-shadow .25s ease;
}

#videos .thumb-card .play::before{
  content: "";
  width: 0;
  height: 0;
  border-left: 16px solid #0b0f14;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: 3px;
}

#videos .thumb-card .label{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  background: linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.25));
  color: #eaf1ff;
  font-weight: 800;
  font-size: .95rem;
}

#videos .thumb-card:hover img{
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.08);
}

#videos .thumb-card:hover .scrim{
  opacity: 1;
}

#videos .thumb-card:hover .play{
  transform: translate(-50%,-50%) scale(1.05);
  box-shadow: 0 12px 28px rgba(0,0,0,.4), 0 0 0 6px rgba(255,255,255,.1);
}

#pricing{
  position: relative;
  --sec-color: #d68d06;
}

#pricing .pricing-tabs{
  display: inline-flex;
  gap: 8px;
  background: rgb(172, 101, 1);
  padding: 6px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

#pricing .pricing-tabs .tab{
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  background: transparent;
  color: var(--text);
}

#pricing .grid-3 {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

#pricing .pricing-tabs .tab.active{
  background: linear-gradient(90deg, #f98e02, #692b01ab);
  border: 1px solid rgba(112,168,255,.35);
}

#pricing .panel[hidden]{
  display: none !important;
}

#pricing .tab-panels{
  margin-top: 16px;
  position: relative;
  isolation: isolate;
}

#pricing .panel{
  position: relative;
  z-index: 0;
}

#pricing .grid-3{
    grid-template-columns: repeat(3,1fr);
}

@media (max-width: 640px) {
  #pricing .grid-3 {
    grid-template-columns: 1fr;  /* stacks */
  }
}

#pricing .card.price{
  color: var(--text);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(135deg, #d68d06, #e9a82f
  ab) !important;
}

#pricing .card.price .big{
  font-size: 1.75rem;
  font-weight: 900;
  margin: 0;
}

#pricing .card.price .note{
  font-size: .95rem;
  font-weight: 700;
  opacity: .8;
}

#pricing .card.price.featured{
  border: 2px solid rgba(112,168,255,.55);
  box-shadow: 0 14px 40px rgba(29,78,216,.20);
}

#pricing .card.price .btn{
  align-self: flex-start;
  margin-top: auto;
  text-decoration: none;
  font-weight: 900;
  color: #0b0f14;
  background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.45)) padding-box, linear-gradient(135deg, #00e1ff, #ff7cf3) border-box;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 10px 16px;
}

.footer{
  border-top: 1px solid var(--hairline);
  padding: 24px 0;
  color: var(--muted);
}

.skip-link{
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus{
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  background: var(--bg-2);
  color: var(--text);
  padding: .5rem .75rem;
  border-radius: 8px;
  box-shadow: 0 0 0 3px var(--ring);
}

:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

.aero-social-float{
  z-index: 2147483647 !important;
}

#attachments{
  color: var(--muted);
}

#attachments::file-selector-button{
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  padding: .7rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(90deg,#232323 0%,#6b2cff 55%,#6495ed 100%) padding-box,
             linear-gradient(90deg,#6b2cff,#6495ed) border-box;
  box-shadow: 0 6px 18px rgba(100,149,237,.35);
  transition: transform .15s ease, box-shadow .2s ease, background-position .25s ease, filter .2s ease;
  background-size: 200% 100%;
  background-position: 0% 50%;
  margin-right: 10px;
}

#attachments::-webkit-file-upload-button{
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  padding: .7rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(90deg,#232323 0%,#6b2cff 55%,#6495ed 100%) padding-box,
             linear-gradient(90deg,#6b2cff,#6495ed) border-box;
  box-shadow: 0 6px 18px rgba(100,149,237,.35);
  transition: transform .15s ease, box-shadow .2s ease, background-position .25s ease, filter .2s ease;
  background-size: 200% 100%;
  background-position: 0% 50%;
  margin-right: 10px;
}

#attachments:hover::file-selector-button,
#attachments:hover::-webkit-file-upload-button{
  background-position: 100% 50%;
  filter: saturate(1.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(30,92,255,.40);
}

#attachments:focus-visible::file-selector-button,
#attachments:focus-visible::-webkit-file-upload-button{
  outline: 0;
  box-shadow: 0 0 0 3px #fff,
    0 0 0 6px var(--ring),
    0 10px 22px rgba(30,92,255,.40);
}

#attachments:disabled::file-selector-button,
#attachments:disabled::-webkit-file-upload-button{
  filter: grayscale(.6) opacity(.7);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

#contact .lead{
  font-weight: 600;
  display: inline-flex;
  align-items: center !important;
  gap: .5rem;
  padding: .75rem 1.1rem;
  margin: 0 0 1rem 0;
  border-radius: 999px;
  background: linear-gradient(
      to bottom,
      color-mix(in oklab, var(#000) var(#000), transparent) 0%,
      color-mix(in oklab, var(#000) var(#000), transparent) 100%
    ) padding-box,
    linear-gradient(90deg,
      color-mix(in oklab, var(--sec-color) var(--sec-border-alpha), transparent) 0%,
      color-mix(in oklab, var(--sec-tone-2) var(--sec-border-alpha), transparent) 100%
    ) border-box;
  border: 1.5px solid transparent;
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow: var(--sec-shadow);
  color: var(--text, #fff);

  width:100% !important;
}

#contact form{
  border-radius: 18px;
  padding: 1.25rem;
  background: linear-gradient(
      to bottom,
      color-mix(in oklab, var(--sec-color) 12%, transparent) 0%,
      color-mix(in oklab, var(--sec-tone-2) 12%, transparent) 100%
    ) padding-box,
    linear-gradient(90deg, var(--sec-color), var(--sec-tone-2)) border-box;
  border: 1.5px solid transparent;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: var(--sec-shadow);
}

#contact form .grid{
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 14px !important;
}

#contact form .grid > .field{
  position: relative;
  min-height: 84px;
  overflow: visible;
}

#contact input, #contact select, #contact textarea{
  width: 100%;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 28px 12px 12px;
  font: inherit;
  line-height: 1.35;
  outline: 0;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
  position: relative;
  z-index: 1;
}

#contact textarea{
  min-height: 130px;
  resize: none;
  line-height: 1.35;
}

#contact select{
  padding-right: 36px;
}

#contact label{
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 0 6px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .2px;
  transform-origin: left top;
  transition: transform .2s ease, color .2s ease, opacity .2s ease;
  pointer-events: none;
  z-index: 2;
  background: transparent !important;
}

#contact input::placeholder, #contact textarea::placeholder{
  color: transparent;
}

#contact input:focus + label,
#contact textarea:focus + label,
#contact select:focus + label,
#contact .field--filled > label{
  transform: translateY(-12px) scale(.86);
  color: var(--ink-2);
  opacity: .95;
}

#contact input:focus, #contact select:focus, #contact textarea:focus{
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ring);
  border-color: color-mix(in oklab, var(--ring) 60%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
}

#contact .field-hint{
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: .8rem;
  color: var(--muted);
  z-index: 1;
}

#contact .actions{
  margin-top: 6px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

#contact .actions .small{
  color: var(--muted);
}

.toast{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  display: none;
  font-weight: 700;
}

.toast.show{
  display: block;
  animation: toast-in .18s ease-out;
}

#services .grid .card{
  display: flex;
  flex-direction: column;
}

#services .grid .card > .p{
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

#services .grid .card > .p > .badge:first-of-type,
#services .grid .card > .p > .btn:first-of-type,
#services .grid .card > .p > button:first-of-type{
  margin-top: auto;
}

#services .grid .card > .p .badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 700;
  letter-spacing: .2px;
  margin-right: 8px;
  margin-bottom: 8px;
}

.hero .hero-inner.hero-center{
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
  padding-inline: 1rem;
}

.hero .emblem{
  display: block;
  width: clamp(160px, 22vw, 320px);
  height: auto;
  margin: 0 auto 6px;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.35));
  will-change: transform;
  animation: emblem-float 8s ease-in-out infinite;
}

.kicker,
.kicker-pro{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6ch;
  padding: .26rem .5rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .25px;
  line-height: 1;
  white-space: nowrap;
  color: #F2F1FF;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  background: linear-gradient(90deg,
      rgba(42,47,58,.72) 0%,
      rgba(35, 35, 35, 0.334) 100%
    ) padding-box,
    linear-gradient(90deg, #242525 0%, #2f2f2f6b 100%) border-box;
  border: 1.5px solid beige;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 10px 26px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.22);
}

.kicker::after,
.kicker-pro::after{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(140% 90% at 50% 0%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  mix-blend-mode: screen;
}

.kicker:hover,
.kicker-pro:hover{
  transform: translateY(-1px);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 14px 34px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.24);
}

.kicker:focus-visible,
.kicker-pro:focus-visible{
  outline: 3px solid rgba(123,97,255,.45);
  outline-offset: 2px;
}

.brand-name::after{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  height: 3px;
  width: 42%;
  min-width: 72px;
  max-width: 140px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity: .95;
  display: none !important;
  content: none !important;
}

.about-grid{
  display: grid;
  grid-template-columns: repeat(1,1fr);
  gap: 16px;
}

#videos .thumb-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.85),
    rgba(180,190,205,0.85)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

#videos .thumb-card:hover::after{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,1),
    rgba(195,205,220,1)
  );
}

section > .container{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid color-mix(in oklab, rgba(195,205,220,0.65) 30%, white 70%);
  -webkit-backdrop-filter: blur(var(--panel-glass-blur)) saturate(var(--panel-glass-sat));
  backdrop-filter: blur(var(--panel-glass-blur)) saturate(var(--panel-glass-sat));
  box-shadow: 0 14px var(--panel-glow) rgba(0,0,0,.22);
  background: linear-gradient(90deg, var(--btn-from) 0%, var(--btn-to) 100%) padding-box,
    linear-gradient(90deg, var(--accent), var(--accent-2)) border-box;
}

section.no-panel > .container{
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

section:hover > .container{
  border-color: color-mix(in oklab, rgba(195,205,220,0.85) 45%, white 55%);
  box-shadow: 0 18px 46px rgba(0,0,0,.26);
}

section > .container::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  mix-blend-mode: overlay;
  background: radial-gradient(120% 80% at 10% 0%,  rgba(255,255,255,.06), transparent 50%),
    radial-gradient(120% 80% at 90% 20%, rgba(255,255,255,.04), transparent 52%),

    
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.045) 0 1px,
      rgba(255,255,255,0)    1px 6px
    ),

    
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: auto, auto,
    auto,
    8px 8px;
  background-position: 0 0, 0 0,
    0 0,
    0 0;
}

section > .container::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(140% 100% at 50% 0%, rgba(255,255,255,.10), transparent 60%),
    
    linear-gradient(transparent, rgba(255, 255, 255, 0.307) 0) top/100% 1px no-repeat;
  mix-blend-mode: screen;
  opacity: .9;
}

#services{
  --svc-from: var(--bg-2);
  --sec-color: #01276d;
}

#services .card{
  background: linear-gradient(180deg, var(--svc-from) 0%, #353535 100%);
  border-color: color-mix(in oklab, var(--svc-from) 70%, #ffffff 30%);
  display: flex;
  flex-direction: column;
  gap: 0px;
}

#services .card .p,
#services .panel,
#services .grid > div:not(.card):not(.card-media){
  background: linear-gradient(180deg, var(--svc-from) 0%, #353535 100%);
}

#services #drone-subgrid .card{
  background: linear-gradient(180deg, var(--svc-from) 0%, #353535 100%);
  border-color: color-mix(in oklab, var(--svc-from) 70%, #ffffff 30%);
}

#services picture,
#services img,
#services .card-media{
  background: transparent !important;
}

#services .card,
#services .card .p{
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
}

#services .card:hover{
  box-shadow: 0 12px 36px rgba(0,0,0,.28);
}

#contact form .field:has(#attachments) > label{
  top: 6px;
}

#contact form .field:has(#service) > label{
  top: 6px;
}

.av-select{
  position: relative;
  width: 100%;
}

.av-select__button{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 28px 44px 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  cursor: pointer;
  line-height: 1.35;
  color: var(--text);
  background: linear-gradient(180deg, #4a4f59 0%, #0b0f14 100%) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) border-box;
}

.av-select__button:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ring);
}

.av-select__chev{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  pointer-events: none;
  background: no-repeat center / contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23eaf1ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  opacity: .9;
}

.av-select__list{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1000;
  max-height: 280px;
  overflow: auto;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(74,79,89,.98) 0%, rgba(11,15,20,.98) 100%),
    color-mix(in oklab, var(--bg-2) 86%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  display: none;
}

.av-select__list[aria-hidden="false"]{
  display: block;
}

.av-select__option{
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .65rem;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
}

.av-select__option[aria-selected="true"]::before{
  content: "•";
  opacity: .85;
  margin-right: .25rem;
}

.av-select__option:hover,
.av-select__option[aria-activedescendant="true"],
.av-select__option.is-active{
  background: rgba(255,255,255,.06);
}

#service.av-select--hidden{
  position: absolute !important;
  inset: auto auto auto -9999px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.btn,
.btn-iris,
.btn-prime{
  position: relative;
  background: linear-gradient(90deg, var(--btn-from) 0%, var(--btn-to) 100%) padding-box,
    linear-gradient(90deg, var(--accent), var(--accent-2)) border-box;
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(var(--btn-glass-blur)) saturate(var(--btn-glass-sat));
  backdrop-filter: blur(var(--btn-glass-blur)) saturate(var(--btn-glass-sat));
  box-shadow: 0 6px var(--btn-glow) rgba(0,0,0,.20);
}

.btn-iris::after,
.btn-prime::after,
.btn::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(140% 90% at 50% 0%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  mix-blend-mode: screen;
}

.btn:hover,
.btn-iris:hover,
.btn-prime:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
  filter: saturate(1.03);
}

.btn:focus-visible,
.btn-iris:focus-visible,
.btn-prime:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.5),
    0 0 0 5px var(--ring, rgba(112,168,255,.35));
}

.btn:active,
.btn-iris:active,
.btn-prime:active{
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(0,0,0,.18);
}

#av-font-panel .card{
  background: color-mix(in oklab, var(--bg-2) 86%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#av-font-panel select,
#av-font-panel input[type="range"]{
  width: 100%;
  background: color-mix(in oklab, var(--bg-2) 90%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: .6rem .7rem;
  color: var(--text);
}

.brand .brand-name{
  position: relative;
  display: inline-block;
  line-height: 1.1;
}

.brand .brand-name::after{
  content: "";
  position: absolute;
  bottom: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) scaleX(.82) !important;
  height: 3px;
  width: clamp(72px, 42%, 140px) !important;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity: .95;
}

.brand:hover .brand-name::after,
.brand:focus-visible .brand-name::after{
  transform: translateX(-50%) scaleX(1) !important;
}

:where([id]){
  scroll-margin-top: calc(var(--av-nav-h) + 12px);
}

#av-font-panel{
  position: fixed;
  right: 14px;
  bottom: 64px;
  width: min(520px, 94vw);
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  z-index: calc(var(--z-scrim) - 1);
}

#av-font-panel .card > header{
  position: sticky;
  top: 0;
  z-index: 1;
  background: inherit;
  backdrop-filter: inherit;
  -webkit-backdrop-filter: inherit;
  border-bottom: 1px solid var(--hairline);
  margin: -14px -14px 10px;
  padding: 12px 14px;
}

#av-font-panel[hidden]{
  display: none !important;
  visibility: hidden !important;
}

#av-font-scrim[hidden]{
  display: none !important;
  visibility: hidden !important;
}

.hero-inner h1{
  text-align: center;
  background: linear-gradient(90deg, #f8f8fa 0%, #9eb0c6 50%, #f5f5f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: .5px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
  margin-bottom: .8rem;
  animation: gradientShift 6s ease-in-out infinite alternate;
}

.hero-inner p{
  color: rgba(234,241,255,.92);
  text-align: center;
  max-width: 60ch;
  margin: 0 auto;
  line-height: 1.6;
  text-shadow: 0 2px 6px rgba(0,0,0,.3);
}

.menu{
  display: inline-block;
  width: 40px;
  font-size: 30px;
  font-family: 'Josefin Sans', sans-serif;
  color: #fff;
  cursor: pointer;
  position: relative;
  inline-size: 40px;
  block-size: 28px;
}

.menu::before,
.menu::after{
  position: absolute;
  transition: 0.4s ease;
  opacity: 0;
  pointer-events: none;
  content: none;
}

#av-scrim{
  z-index: var(--z-scrim);
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .2s ease;
  position: fixed;
  inset: 0;
  pointer-events: none;
}

#av-scrim.is-open{
  opacity: 1;
  pointer-events: auto;
}

#av-drawer .drawer-inner{
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

#av-drawer .drawer-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}

#av-drawer .drawer-title{
  font-weight: 900;
  letter-spacing: .2px;
}

#av-drawer .icon-btn{
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px;
  color: var(--text);
  border-radius: 10px;
  cursor: pointer;
}

#av-drawer .icon-btn:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

#av-drawer .drawer-links a{
  color: var(--text);
  text-decoration: none;
  padding: .65rem .75rem;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

#av-drawer .drawer-links a:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
}

#av-drawer .submenu{
  margin-top: 4px;
  grid-column: 1 / -1;
}

#av-drawer .submenu-toggle{
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: transparent;
  color: var(--text);
  font-weight: 800;
  padding: .6rem .75rem;
  border-radius: 10px;
  border: 1px solid var(--hairline);
}

#av-drawer .submenu-toggle[aria-expanded="true"]{
  background: rgba(255,255,255,.06);
}

#av-drawer .submenu-panel{
  list-style: none;
  padding: 0 0 0 6px;
  display: none;
  margin: 8px 0 0 0;
  padding-left: 8px;
}

#av-drawer .submenu-panel li a{
  display: block;
  margin: 4px 0;
  font-weight: 700;
  padding: .5rem .6rem;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
}

#av-drawer .submenu-panel li a:hover{
  background: rgba(255,255,255,.06);
  border-color: var(--hairline);
}

#av-drawer .drawer-cta{
  padding: 12px 14px;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

#av-drawer .av-focus-sentinel{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.kicker-pro{
  letter-spacing: .32px;
  padding: .42rem .72rem;
  border-radius: 999px;
  border-width: 2px;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 8px 20px rgba(0,0,0,.22),            
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.18);
}

.kicker-pro:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.26),
              inset 0 1px 0 rgba(255,255,255,.28),
              inset 0 -1px 0 rgba(0,0,0,.20);
}

.nav-ico{
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 8px;
  opacity: .9;
  transition: opacity .15s ease, transform .15s ease;
  color: currentColor;
}

#av-desktop-links a:hover .nav-ico,
#av-drawer a:hover .nav-ico{
  opacity: 1;
  transform: translateY(-1px);
}

#av-drawer .nav-ico{
  width: 22px;
  height: 22px;
  margin-right: 10px;
  opacity: .95;
}

#av-desktop-links a[aria-current="true"] .nav-ico{
  opacity: 1;
}

#av-desktop-links a:hover .nav-ico path,
#av-desktop-links a:hover .nav-ico circle{
  stroke: url(#navGrad);
}

.card h3 svg,
.card .badge svg{
  width: clamp(26px, 2.1vw, 34px);
  height: clamp(26px, 2.1vw, 34px);
  stroke-width: 2.2;
  fill: none;
  display: inline-block;
  vertical-align: -2px;
}

.card h3 svg *, 
.card .badge svg *{
  stroke-width: 2.2;
}

#contact .container p a,
.footer a{
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(90deg, var(--accent), var(--accent-2));
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: filter .2s ease, opacity .2s ease;
}

#contact .container p a:visited,
.footer a:visited{
  color: var(--text);
}

#contact .container p a:hover,
.footer a:hover{
  filter: saturate(1.06);
  opacity: .95;
}

#contact .container p a:focus-visible,
.footer a:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.65),
    0 0 0 5px var(--ring);
  border-radius: 6px;
}

#av-desktop-links a:hover .nav-ico,
  #av-drawer a:hover .nav-ico{
  opacity: 1;
  transform: translateY(-1px);
}

.sec-ico{
  width: 35px;
  height: 35px;
  margin-right: .5rem;
  vertical-align: -8px;
  opacity: .95;
  color: var(--ink-2, currentColor);
}

#attachments::file-selector-button,
#attachments::-webkit-file-upload-button{
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  padding: .75rem 1.1rem;
  border-radius: 10px;
  border: 0;
  background: var(--prime);
  box-shadow: 0 6px 16px rgba(30,92,255,.35);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}

#av-nav .menu{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  color: var(--text);
  cursor: pointer;
  z-index: 2147483200;
}

#av-nav .menu .bar{
  width: 100%;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}

#av-nav .menu:hover .bar:nth-child(2){
  transform: scaleX(.9);
}

.menu::before{
  content: "MENU";
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translate(-50%, 0) scale(.98);
  opacity: 0;
  transition: transform .2s ease, opacity .18s ease;
  font: 800 14px/1 var(--ff-head, system-ui);
  letter-spacing: .35em;
  text-indent: .35em;
  white-space: nowrap;
  pointer-events: none;
}

.menu:hover::before,
.menu:focus-visible::before,
.menu[aria-expanded="true"]::before{
  opacity: 1;
  transform: translate(-50%, -6px) scale(1);
}

#av-drawer .drawer-cta .btn{
  width: 100%;
  justify-content: center;
  border-radius: 12px;
  padding: .9rem 1rem;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

#av-drawer .drawer-links a,
#av-drawer .drawer-links .submenu-toggle{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: .65rem .75rem;
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

#av-drawer .drawer-links a:hover,
#av-drawer .drawer-links .submenu-toggle:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
}

#av-drawer .submenu-toggle .nav-ico{
  width: 22px;
  height: 22px;
  margin-right: 10px;
  opacity: .95;
}

#av-drawer .drawer-links .submenu-toggle{
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: .65rem .75rem;
  text-align: left;
  color: var(--text);
  text-decoration: none;
  font: inherit;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.35;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

#av-drawer .drawer-links .submenu-toggle:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
}

#av-drawer .drawer-links .submenu-toggle .nav-ico,
#av-drawer .drawer-links a .nav-ico{
  width: 22px;
  height: 22px;
  margin-right: 10px;
  opacity: .95;
}

#av-drawer .submenu-toggle[aria-expanded="true"] + .submenu-panel{
  display: block;
}

#av-open-fonts{
  z-index: 2147483000;
}

#av-font-scrim{
  pointer-events: none;
  z-index: calc(var(--z-scrim) - 2);
}

#av-font-scrim.is-open{
  pointer-events: auto;
}

#av-font-scrim[hidden],
#av-scrim[hidden]{
  display: none !important;
  pointer-events: none !important;
}

.menu-open #av-font-panel,
.menu-open #av-font-scrim,
.menu-open #av-cmdk,
.menu-open #av-cmdk-scrim,
.menu-open .aero-social-float,
.menu-open [data-floating="true"]{
  pointer-events: none !important;
}

.menu-open #av-drawer,
.menu-open #av-drawer *{
  pointer-events: auto !important;
}

.nav-item.has-panel.is-open .nav-panel{
  display: block !important;
}

.submenu-panel[hidden]{
  display: none !important;
}

.submenu .submenu-toggle{
  display: flex;
  align-items: center;
  gap: .5rem;
}

.submenu .submenu-toggle[aria-expanded="true"]::after{
  content: "";
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-135deg);
}

.submenu .submenu-toggle[aria-expanded="false"]::after{
  content: "";
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

html, body{
  overflow: auto;
}

html.avse-open, body.avse-open,
body.menu-open{
  overflow: hidden;
}

#av-site-editor{
  position: fixed;
  inset: 0;
  z-index: 2147485600;
}

#av-site-editor[aria-hidden="false"]{
  display: block;
}

#av-site-editor .avse-shell{
  position: absolute;
  inset: 14px;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

#av-site-editor .avse-body{
  overflow: auto;
}

#av-scrim, #av-font-scrim{
  position: fixed;
  inset: 0;
}

.hero.locked{
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  will-change: background-position;
  z-index: 0;
}

body .site,
body main,
body footer{
  position: relative;
  z-index: 1;
}

.hero.locked::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28vh;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
}

.site, main, footer{
  position: relative;
  z-index: 1;
}

main,
#main{
  background: transparent !important;
}

main > section,
#main > section{
  background: transparent !important;
}

main > section h2 .sec-ico,
#main > section h2 .sec-ico{
  color: var(--sec-color, #9cb3ff);
  stroke: currentColor;
  filter: drop-shadow(0 0 var(--sec-glow-sm) currentColor)
    drop-shadow(0 0 var(--sec-glow-lg) currentColor);
  overflow: visible;
  paint-order: stroke fill;
}

#gallery{
  --sec-color: #0879fa;
}

#about{
  --sec-color: #7406d3;
  --_tint-15: color-mix(in oklab, var(--_sec) 15%, transparent);
  --_tint-28: color-mix(in oklab, var(--_sec) 28%, transparent);
  --_tint-40: color-mix(in oklab, var(--_sec) 40%, transparent);
  --_sec: var(--sec-color, #7406d3);
  --_bg-card: color-mix(in oklab, var(--_sec) 95%, transparent);
  --_bg-p: color-mix(in oklab, var(--_sec) 95%, transparent);
  --_border: color-mix(in oklab, var(--_sec) 75%, black);
  --tone-2: color-mix(in oklab, var(--sec-color) 70%, white);
  --glass-a: 0.10;
  --border-w: 1.5px;
  --radius: 18px;
  --shadow: 0 12px 30px rgba(0,0,0,.22);
}

#contact{
  --sec-color: #0e2a0e;
  --sec-tone-2: color-mix(in oklab, var(--sec-color) 65%, white);
  --sec-alpha: 0.16;
  --sec-border-alpha: 0.75;
  --sec-shadow: 0 10px 24px rgba(0,0,0,.22);
}

main > section h2,
#main > section h2{
  color: var(--sec-color, #9cb3ff);
  -webkit-text-stroke: 0 transparent;
  text-shadow: 0 0 var(--sec-glow-sm) currentColor,
    0 0 var(--sec-glow-lg) currentColor;
  margin: 0 0 1rem;
}

main > section h2,
#main  > section h2{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: var(--sec-h2-size);
  line-height: 1.15;
  font-weight: 900;
  color: var(--sec-color, #9cb3ff);
  margin: 0 0 .25em;
  width: 100% !important;
}

main > section h2 .sec-ico-wrap,
#main  > section h2 .sec-ico-wrap{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sec-badge-pad-y) var(--sec-badge-pad-x);
  border-radius: var(--sec-badge-radius);
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--sec-color, #9cb3ff) 82%, #ffffff 0%) 0%,
      color-mix(in oklab, var(--sec-color, #9cb3ff) 70%, #000000 10%) 100%);
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: var(--sec-badge-shadow);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}

main > section h2 .sec-ico-wrap .sec-ico,
#main  > section h2 .sec-ico-wrap .sec-ico{
  width: var(--sec-ico-size);
  height: var(--sec-ico-size);
  color: var(--sec-color, #9cb3ff);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  overflow: visible;
  paint-order: stroke fill;
  filter: drop-shadow(var(--sec-outline) 0 0 #000)
    drop-shadow(calc(-1 * var(--sec-outline)) 0 0 #000)
    drop-shadow(0 var(--sec-outline) 0 #000)
    drop-shadow(0 calc(-1 * var(--sec-outline)) 0 #000);
}

main > section h2 .sec-label,
#main  > section h2 .sec-label{
  display: inline-block;
  padding: var(--sec-badge-pad-y) var(--sec-badge-pad-x);
  border-radius: var(--sec-badge-radius);
  color: #fff;
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--sec-color, #9cb3ff) 82%, #ffffff 0%) 0%,
      color-mix(in oklab, var(--sec-color, #9cb3ff) 70%, #000000 10%) 100%);
  border: 2px solid rgb(248, 246, 246);
  box-shadow: var(--sec-badge-shadow);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;
}

.has-sec-badge{
  padding: 0;
  width: 100%;
}

.sec-badge{
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  box-sizing: border-box;
  padding: .75rem 1rem;
  border-radius: 12px;
}

section > .container h2 .sec-badge,
#main > section > .container h2 .sec-badge{
  width: 100%;
}

.sec-badge .sec-ico{
  color: #fff;
  -webkit-text-stroke: 1px #000;
  text-stroke: 1px #000;
  font-size: 1.35em;
}

.sec-badge .sec-title{
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.2;
}

#services .card .p:not(p){
  background: rgba(var(--sec-color-rgb, 1,39,109), 0.60) !important;
  color: #fff !important;
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

#pricing  .card .p:not(p),
#gallery  .card .p:not(p),
#about    .card .p:not(p),
#contact  .card .p:not(p){
  background: rgba(var(--sec-color-rgb), 0.78) !important;
  color: #fff !important;
}

#services .card picture,
#services .card .media{
  line-height: 0;
}

#services .card img{
  display: block;
  width: 100%;
  height: auto;
}

#services .card .media{
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.75rem;
}

#services .card .p{
  margin-top: 0 !important;
}

#about article.card{
  background: var(--_bg-card) !important;
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  border: 1px solid var(--_border);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#about article.card img{
  display: block;
  width: 100%;
  height: auto;
}

#about article.card .media,
#about article.card picture{
  line-height: 0;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 16 / 9;
}

#about article.card .p{
  background: var(--_bg-p) !important;
  border: 1px solid var(--_border);
  border-radius: 12px;
  margin-top: 0 !important;
  padding: 14px 16px;
  color: #eef3ff;
}

#about article.card .p h3,
#about article.card .p h4{
  color: inherit;
  margin: 0 0 6px 0;
}

#about article.card:hover{
  transform: translateY(-1px);
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 14px 26px rgba(0,0,0,.22);
}

main > section > .container,
#main > section > .container{
  position: relative;
  background: transparent !important;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

main > section > .container::before,
#main > section > .container::before{
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--btn-from, #232323),
    var(--btn-to,   #6495ed)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.card-half{
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.card-half__image{
  flex: 1 1 50%;
  position: relative;
}

.card-half__image img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-half__text{
  flex: 1 1 50%;
  padding: 2rem;
  color: var(--text-color, #fff);
  background: rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#contact form .field input,
#contact form .field select,
#contact form .field textarea{
  background: #252525;
  border: 1px solid color-mix(in oklab, var(--sec-color) 30%, transparent);
  color: var(--text, #fff);
  border-radius: 10px;
}

#contact form .field input::placeholder,
#contact form .field textarea::placeholder{
  background: #252525;
  color: color-mix(in oklab, #fff 55%, transparent);
}

#contact form .field input:focus,
#contact form .field select:focus,
#contact form .field textarea:focus{
  background: #252525;
  outline: #000;
  border-color: var(--sec-color);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--sec-color) 45%, transparent),
    inset 0 0 0 1px color-mix(in oklab, var(--sec-tone-2) 50%, transparent);
}

#contact form .field label{
  background: #252525;
  color: color-mix(in oklab, #fff 85%, transparent);
}

#contact .file-chip{
  background: #252525;
  border: 1px solid color-mix(in oklab, var(--sec-color) 35%, transparent);
}

#contact .actions .btn,
#contact .btn.btn-prime{
  border: 1.5px solid transparent;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  box-shadow: 0 8px 20px color-mix(in oklab, var(--sec-color) 35%, transparent);
}

#contact .actions .btn:hover,
#contact .btn.btn-prime:hover{
  filter: brightness(1.06);
}

#about .about-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

#about .card.card-half{
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(
      to bottom,
      color-mix(in oklab, var(--sec-color) var(--glass-a), transparent) 0%,
      color-mix(in oklab, var(--tone-2)   var(--glass-a), transparent) 100%
    ) padding-box,
    linear-gradient(90deg, var(--sec-color), var(--tone-2)) border-box;
  border: var(--border-w) solid transparent;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 44% 56%;
  align-items: stretch;
}

#about .card-half__image{
  position: relative;
  min-height: 260px;
  background: color-mix(in oklab, var(--sec-color) 18%, transparent);
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
}

#about .card-half__image img{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

#about .card-half__image.is-logo{
  background: rgba(0,0,0,.35);
}

#about .card-half__image.is-logo img{
  object-fit: contain;
  padding: 22px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

#about .card-half__image.is-portrait{
  background: transparent;
}

#about .card-half__image.is-portrait img{
  object-fit: cover;
  width: 50%;
  height: 50%;
  margin: top;
  inset: 8%;
  border-radius: 16px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.45),
    0 0 0 5px color-mix(in oklab, var(--sec-color) 45%, transparent),
    0 16px 30px rgba(0,0,0,.35);
}

#about .card-half__text{
  display: grid;
  align-content: start;
  gap: .6rem;
  padding: 16px;
}

#about .card-half__text ul{
  margin: .4rem 0 .2rem;
  padding-left: 1.1rem;
}

#about .card-half__text .badge{
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--sec-color) 20%, #101418) 0%,
      color-mix(in oklab, var(--tone-2)   16%, #101418) 100%) !important;
  border: 1px solid color-mix(in oklab, var(--sec-color) 45%, transparent);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}

#about .btn.btn-prime{
  background: linear-gradient(90deg, var(--sec-color), var(--tone-2)) padding-box,
    linear-gradient(90deg, var(--sec-color), var(--tone-2)) border-box !important;
  border: var(--border-w) solid transparent;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  box-shadow: 0 10px 22px color-mix(in oklab, var(--sec-color) 35%, transparent);
}

#about .btn.btn-prime:hover{
  filter: brightness(1.06);
}

#about h2.has-sec-badge .sec-badge{
  width: 100%;
}

#pricing .card{
  background: linear-gradient(135deg, #d68d06, #e9a82fab) !important;
}

#about .card-half{
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (prefers-color-scheme:light) {
:root{
  --bg: #f7f9ff;
  --bg-2: #ffffff;
  --card: #ffffff;
  --text: #0b0f14;
  --muted: #1a233066;
  --hairline: rgba(0,0,0,.08);
  --ring: rgba(30,92,255,.35);
}

}

@media (max-width:900px) {
.grid-3{
  grid-template-columns: repeat(2,1fr);
}

}

@media (max-width:640px) {
.grid-3{
  grid-template-columns: 1fr;
}

.grid-4{
  grid-template-columns: 1fr;
}

}

@media(max-width:900px) {
#av-desktop-links{
  display: none;
}

#av-hamburger{
  display: inline-flex;
}

.brand-tag{
  display: none;
}

}

@media (max-width:1100px) {
.grid-4{
  grid-template-columns: repeat(2,1fr);
}

}

@media (min-width:700px) {
#videos .video-grid{
  grid-template-columns: repeat(2,1fr);
}

}

@media (min-width:1024px) {
#videos .video-grid{
  grid-template-columns: repeat(3,1fr);
}

}

@media (max-width: 800px) {
#contact form .grid{
  grid-template-columns: 1fr !important;
}

}

@keyframes toast-in {
from{
  transform: translateY(8px);
  opacity: 0;
}

to{
  transform: none;
  opacity: 1;
}

}

@media (prefers-reduced-motion: reduce) {
.hero .emblem{
  animation: none;
}

}

@keyframes emblem-float {
0%,100%{
  transform: translateY(0);
}

50%{
  transform: translateY(-6px);
}

}

@media (prefers-color-scheme: light) {
.kicker, .kicker-pro{
  color: #151923;
  text-shadow: none;
  background: linear-gradient(90deg,
        rgba(235,237,244,.86) 0%,
        rgba(169,153,255,.92) 100%
      ) padding-box,
      linear-gradient(90deg, #7b61ff 0%, #3a404d 100%) border-box;
  box-shadow: 0 8px 20px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.85),
      inset 0 -1px 0 rgba(0,0,0,.06);
}

#videos .thumb-card::after{
  background: linear-gradient(
      180deg,
      rgba(220,226,238,0.95),
      rgba(180,190,205,0.95)
    );
}

section > .container{
  background: color-mix(in oklab, rgba(195,205,220,0.22) 40%, black 60%);
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
}

section > .container::before{
  opacity: .42;
}

#services{
  --svc-from: color-mix(in oklab, var(--bg-2) 88%, black 12%);
}

.av-select__button{
  color: #0b0f14;
  background: linear-gradient(180deg, #c9ced6 0%, #4a4f59 100%) padding-box,
      linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.03)) border-box;
}

.av-select__chev{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230b0f14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

.av-select__list{
  background: linear-gradient(180deg, rgba(230,233,238,.98) 0%, rgba(74,79,89,.98) 100%),
      color-mix(in oklab, var(--bg-2) 92%, transparent);
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
}

.kicker-pro{
  box-shadow: 0 6px 16px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.85),
      inset 0 -1px 0 rgba(0,0,0,.06);
}

#contact .container p a,
  .footer a{
  color: #0b0f14;
}

#contact .container p a:visited,
  .footer a:visited{
  color: #0b0f14;
}

}

@media (max-width:800px) {
.about-grid{
  grid-template-columns: 1fr;
}

}

@supports not (backdrop-filter: blur(1px)) {
section > .container{
  background: color-mix(in oklab, rgba(195,205,220,1) 40%, black 60%);
}

}

@keyframes gradientShift {
0%{
  background-position: 0% 50%;
}

100%{
  background-position: 100% 50%;
}

}

@media (max-width: 520px) {
#av-drawer .drawer-links{
  grid-template-columns: 1fr;
}

#av-drawer .drawer-cta{
  grid-template-columns: 1fr;
}

}

@supports (-webkit-touch-callout: none) {
.hero.locked{
  position: relative;
  background-attachment: initial;
}

.hero.locked::before{
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 100vh;
  z-index: 0;
  background: inherit;
  background-size: cover;
  background-position: center center;
  transform: translateZ(0);
  pointer-events: none;
}

body{
  background: transparent;
}

}

@media (max-width: 420px) {
:root{
  --sec-h2-size: clamp(1.6rem, 4.6vw + .9rem, 2.2rem);
  --sec-ico-size: 1.2em;
  --sec-badge-pad-x: .45em;
}

}

@supports not (color: color-mix(in oklab, black 10%, white)) {
#about article.card{
  background: var(--_sec) !important;
}

#about article.card .p{
  background: var(--_sec) !important;
}

}

@media (max-width: 900px) {
.card-half{
  flex-direction: column;
}

.card-half__image{
  flex: none;
  height: 240px;
}

.card-half__text{
  padding: 1.25rem;
}

#about .about-grid{
  grid-template-columns: 1fr;
}

#about .card.card-half{
  grid-template-columns: 100%;
}

}

@media (min-width: 768px) {
#about .about-grid{
  grid-template-columns: 1fr;
}

#about .card-half{
  grid-template-columns: 1fr;
}

}

.addon {
  width: fit-content;
  margin: 0 auto; /* centers the block itself */
  align-content: center;
}



/* Optional: keep hover/focus readable */
#services .grid .card .p .badge:hover,
#services .grid .card .p .badge:focus-visible{
  filter: brightness(0.96) saturate(110%);
}

/* ===== Glassy, shiny badges (white text) ===== */
#services .grid .card .p .badge{
  /* text */
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
  font-weight: 700;

  /* glass & shine */
  position: relative;
  border-radius: 999px;
  border: 2px solid transparent;
  background:
    /* inner glare */
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.06)) padding-box,
    /* colored border ring */
    linear-gradient(90deg, var(--badge-from, #6ea8fe), var(--badge-to, #3b82f6)) border-box;
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  box-shadow:
    0 6px 18px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -10px 20px rgba(255,255,255,.08);
}

/* subtle motion + accessibility */
#services .grid .card .p .badge:hover{ transform: translateY(-1px); }
#services .grid .card .p .badge:active{ transform: translateY(0); }
#services .grid .card .p .badge:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--badge-to, #3b82f6) 80%, transparent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  #services .grid .card .p .badge{ transition: none; }
}


/* ===== Simple pill badges (drop in AFTER your main CSS) ===== */
#services .grid .card .p .badge{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 8px 14px;
  min-height: 36px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  color: #fff !important;

  /* reset previous “glassy” look */
  background: var(--pill-bg, #334155) !important;
  border: 1px solid var(--pill-border, rgba(255,255,255,.12)) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}

#services .grid .card .p .badge:hover{ filter: brightness(.95); }
#services .grid .card .p .badge:active{ filter: brightness(.92); }
#services .grid .card .p .badge:focus-visible{
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 2px;
}



/* ===== Pill badges with OBVIOUS gradients (no guesswork) ===== */
#services .grid .card .p .badge{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 8px 14px;
  min-height: 36px;
  border-radius: 9999px;
  font: 650 .95rem/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* Hover/active */
#services .grid .card .p .badge:hover{ filter: brightness(1.02) saturate(1.05); }
#services .grid .card .p .badge:active{ filter: brightness(.96) saturate(1.1); }
#services .grid .card .p .badge:focus-visible{ outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }

/* ---------- PER-BADGE GRADIENTS ---------- */
/* Web Design (card 1): orangish yellow, bluish green, reddish */
#services .grid .card:nth-child(1) .p .badge:nth-of-type(1){
  background-color: #D97706 !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, #D97706 0%, #8B4B04 100%) !important;  /* base -> very dark */
  border-color: #6B3A03;
}
#services .grid .card:nth-child(1) .p .badge:nth-of-type(2){
  background-color: #0EA5A4 !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, #0EA5A4 0%, #075E5C 100%) !important;
  border-color: #064746;
}
#services .grid .card:nth-child(1) .p .badge:nth-of-type(3){
  background-color: #DC2626 !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, #DC2626 0%, #991B1B 100%) !important;
  border-color: #7A1515;
}

/* Managed Hosting (card 2): blueish, greenish, yellow */
#services .grid .card:nth-child(2) .p .badge:nth-of-type(1){
  background-color: #2563EB !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, #2563EB 0%, #1E3A8A 100%) !important;
  border-color: #1B2C6E;
}
#services .grid .card:nth-child(2) .p .badge:nth-of-type(2){
  background-color: #16A34A !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, #16A34A 0%, #166534 100%) !important;
  border-color: #134D29;
}
#services .grid .card:nth-child(2) .p .badge:nth-of-type(3){
  background-color: #CA8A04 !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, #CA8A04 0%, #854D0E 100%) !important;
  border-color: #6B3E0B;
}

/* Base pill (keeps your white text + glare) */
#services .grid .card .p .badge{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 8px 14px;
  min-height: 36px;
  border-radius: 9999px;
  font: 700 .95rem/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);

  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  border: 1px solid rgba(0,0,0,.28);
}

/* Web Design (card 1) */
/* 1) orangish yellow: base -> very dark */
#services .grid .card:nth-child(1) .p .badge:nth-of-type(1){
  background-color: #D97706;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, #D97706 0%, #8B4B04 100%);
  border-color: #6B3A03;
  box-shadow: 0 8px 22px rgba(139, 75, 4, .45) !important;
}

/* 2) bluish green */
#services .grid .card:nth-child(1) .p .badge:nth-of-type(2){
  background-color: #0EA5A4;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, #0EA5A4 0%, #075E5C 100%);
  border-color: #064746;
  box-shadow: 0 8px 22px rgba(7, 94, 92, .45) !important;
}

/* 3) reddish */
#services .grid .card:nth-child(1) .p .badge:nth-of-type(3){
  background-color: #DC2626;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
  border-color: #7A1515;
  box-shadow: 0 8px 22px rgba(153, 27, 27, .45) !important;
}

/* Managed Hosting (card 2) */
/* 1) blueish */
#services .grid .card:nth-child(2) .p .badge:nth-of-type(1){
  background-color: #2563EB;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, #2563EB 0%, #1E3A8A 100%);
  border-color: #1B2C6E;
  box-shadow: 0 8px 22px rgba(30, 58, 138, .45) !important;
}

/* 2) greenish */
#services .grid .card:nth-child(2) .p .badge:nth-of-type(2){
  background-color: #16A34A;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, #16A34A 0%, #166534 100%);
  border-color: #134D29;
  box-shadow: 0 8px 22px rgba(22, 101, 52, .45) !important;
}

/* 3) yellow */
#services .grid .card:nth-child(2) .p .badge:nth-of-type(3){
  background-color: #CA8A04;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, #CA8A04 0%, #854D0E 100%);
  border-color: #6B3E0B;
  box-shadow: 0 8px 22px rgba(133, 77, 14, .45) !important;
}

/* Strong, layered text shadow for white badge text */
#services .grid .card .p .badge{
  color: #fff !important;
  text-shadow:
    0 1px 1px rgba(0,0,0,.45),
    0 2px 4px rgba(0,0,0,.35),
    0 0 1px rgba(0,0,0,.55) !important;
}

/* If badges include icons, give them a matching shadow so they don’t wash out */
#services .grid .card .p .badge svg,
#services .grid .card .p .badge .ico{
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45))
          drop-shadow(0 2px 4px rgba(0,0,0,.35)) !important;
}

/* Make #videos fully transparent, no matter what */
#videos{
  background: transparent !important;
  background-color: transparent !important;
}

/* Kill any overlay layers if they exist */
#videos::before,
#videos::after{
  background: transparent !important;
  box-shadow: none !important;
}

/* If the section has an inner container with a bg, nuke that too */
#videos > .container,
#videos .panel,
#videos .wrap{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Make the portrait image a perfect circle */
#about .card-half__image.is-portrait {
  display: grid;
  place-items: center;
}

#about .card-half__image.is-portrait img{
  /* keep it square so 50% radius forms a circle */
  width: min(280px, 60%);
  aspect-ratio: 1 / 1;
  height: auto;

  object-fit: cover;
  border-radius: 50%;
  /* clean up broken properties */
  margin: 0;
  inset: auto;

  /* ring + shadow preserved */
  box-shadow:
    0 0 0 2px rgba(0,0,0,.45),
    0 0 0 5px color-mix(in oklab, var(--sec-color) 45%, transparent),
    0 16px 30px rgba(0,0,0,.35);
}


#about .card-half__text > div > .badge:nth-of-type(1){
  background-color: #D97706;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, #D97706 0%, #8B4B04 100%);
  border-color: #6B3A03;
  box-shadow: 0 8px 22px rgba(139, 75, 4, .45) !important;
}

#about .card-half__text > div > .badge:nth-of-type(2){
  background-color: #0EA5A4;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, #0EA5A4 0%, #075E5C 100%);
  border-color: #064746;
  box-shadow: 0 8px 22px rgba(7, 94, 92, .45) !important;
}

#about .card-half__text > div > .badge:nth-of-type(3){
  background-color: #DC2626;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
  border-color: #7A1515;
  box-shadow: 0 8px 22px rgba(153, 27, 27, .45) !important;
}

#about .card-half__text > div > .badge:nth-of-type(4){
  background-color: #2563EB;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, #2563EB 0%, #1E3A8A 100%);
  border-color: #1B2C6E;
  box-shadow: 0 8px 22px rgba(30, 58, 138, .45) !important;
}

#about .card-half__text > div > .badge:nth-of-type(5){
  background-color: #16A34A;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, #16A34A 0%, #166534 100%);
  border-color: #134D29;
  box-shadow: 0 8px 22px rgba(22, 101, 52, .45) !important;
}

/* Base */
.hdr{
  --ink: var(--text, #e7edf6);
  --accent: var(--accent, #60a5fa);
  --accent-2: var(--accent-2, #22d3ee);
  font: 800 clamp(1.3rem, 2.6vw, 2rem)/1.1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color: var(--ink);
  letter-spacing: .2px;
  margin: 0 0 .75rem;
}

/* 1) Gradient underline (clean, modern) */
.hdr--underline{
  position: relative;
  padding-bottom: .55rem;
}
.hdr--underline::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  box-shadow: 0 4px 14px color-mix(in oklab, var(--accent) 40%, transparent);
}

/* 2) Soft pill label (works great above paragraphs) */
.hdr--pill{
  display:inline-block;
  padding: .45rem .85rem;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)) padding-box,
    linear-gradient(90deg, var(--accent), var(--accent-2)) border-box;
  border:2px solid transparent;
  box-shadow: 0 8px 22px rgba(0,0,0,.24);
  text-transform: uppercase;
  font-size: .88em;
  letter-spacing: .8px;
}

/* 3) Left accent bar + title (editorial vibe) */
.hdr--bar{
  display:flex; align-items:center; gap:.65rem;
}
.hdr--bar::before{
  content:""; width:8px; height:1.4em; border-radius:8px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 6px 16px rgba(0,0,0,.25);
}

/* 4) Neon glow (hero-ish, on dark backgrounds) */
.hdr--neon{
  color:#000;
  text-shadow:
    0 0 12px color-mix(in oklab, var(#cdb72afe) 70%, transparent),
    0 0 28px color-mix(in oklab, var(#00000000) 50%, transparent);
  letter-spacing:.4px;
}

/* 5) Overline kicker + title (marketing-friendly) */
.hdr--kicker{
  margin-top:0;
}
.hdr--kicker::before{
  content:attr(data-kicker);
  display:block;
  font:700 .72rem/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  letter-spacing:1px; text-transform:uppercase; opacity:.75;
  color: color-mix(in oklab, var(--ink) 85%, transparent);
  margin-bottom:.25rem;
}
.hdr--kicker{ font-size: clamp(1.4rem, 3vw, 2.2rem); }

/* 6) Bracketed badge (techy, compact) */
.hdr--bracket{
  display:inline-block; position:relative; padding:.3rem .8rem;
  border-radius:12px;
  background: color-mix(in oklab, var(--bg-2, #0f1216) 70%, transparent);
  box-shadow: 0 8px 20px rgba(0,0,0,.28) inset, 0 6px 16px rgba(0,0,0,.18);
}
.hdr--bracket::before,
.hdr--bracket::after{
  content:""; position:absolute; top:50%; width:12px; height:2px; background: currentColor; opacity:.5;
}
.hdr--bracket::before{ left:-16px; transform:translateY(-50%); }
.hdr--bracket::after{ right:-16px; transform:translateY(-50%); }

/* Small responsive touch so lines don’t wrap awkwardly */
@media (max-width: 520px){
  .hdr{ letter-spacing: .1px; }
  .hdr--pill{ font-weight:800; padding:.42rem .75rem; }
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius: var(--btn-radius);
  font-weight: var(--btn-weight);
  text-transform: var(--btn-case);
  box-shadow: var(--btn-shadow);
  border: var(--btn-border-w) solid transparent;
  color: var(--btn-text);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{ transform: translateY(calc(var(--btn-hover-lift) * -1)); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{ outline:2px solid color-mix(in oklab, var(--btn-bg-to) 80%, transparent); outline-offset:2px; }

/* Primary button with gradient from variables */
.btn-prime{
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) padding-box,
    linear-gradient(90deg, var(--btn-bg-from), var(--btn-bg-to)) border-box;
  border: var(--btn-border-w) solid transparent;
  color: var(--btn-text);
}

/* Badge pills */
.badge{
  display:inline-flex; align-items:center; gap:.5rem; padding:8px 14px; min-height:36px;
  border-radius: var(--badge-radius);
  font-weight: var(--badge-weight);
  color: var(--badge-text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, var(--badge-from), var(--badge-to));
  border:1px solid color-mix(in oklab, var(--badge-to) 60%, #000 40%);
  box-shadow: var(--badge-shadow);
  text-shadow: 0 1px 1px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.35);
}
.badge:hover{ filter: brightness(1.02) saturate(1.05); }
.badge:active{ filter: brightness(.96) saturate(1.1); }
.badge:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; 
}

/* Drawer host */
.av-drawer{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; grid-template-columns: 1fr auto; /* scrim | panel */
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
}
.av-drawer[hidden]{ display:none !important; }

/* Panel */
.av-drawer .drawer-inner{
  width: min(92vw, 380px);
  height: 100%;
  background: color-mix(in oklab, var(--bg, #0f1216) 96%, #000 4%);
  border-left: 1px solid rgba(255,255,255,.08);
  transform: translateX(100%);             /* off-screen by default */
  transition: transform .24s ease;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

/* Slide in when open */
.av-drawer.is-open .drawer-inner{
  transform: translateX(0);
}

/* Make the scrim clickable to close */
.av-focus-sentinel{ display:none; } /* keep your focus sentinels hidden */





/* ===== AV Drawer: right-side single-panel fixes (override legacy host-grid rules) ===== */
/* Force the drawer (the <aside id="av-drawer"> itself) to be the PANEL that slides from the RIGHT */
#av-drawer{
  position: fixed;
  inset: var(--av-nav-h) 0 0 auto;      /* top uses computed header height; stick to RIGHT side */
  right: 0;
  left: auto;
  width: min(82vw, 360px);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  z-index: var(--z-drawer);
}
#av-drawer[aria-hidden="false"]{ transform: translateX(0); }
/* When hidden or aria-hidden=true and [hidden] applied by JS, make sure it's completely gone */
#av-drawer[hidden],
#av-drawer[aria-hidden="true"][hidden]{ display: none !important; }

/* Kill legacy "host grid with scrim" rules attached to the `.av-drawer` CLASS so they don't shove the panel to the left */
aside.av-drawer{
  /* the aside is our sliding panel, not a full-screen grid host */
  display: block !important;
  background: color-mix(in oklab, var(--bg-2) 92%, transparent);  /* keep panel bg */
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-left: 1px solid var(--hairline);
  box-shadow: -10px 0 30px rgba(0,0,0,.28);
}
/* Never treat the aside as a two-column grid scrim host */
aside.av-drawer .drawer-inner{
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}
/* If any rule tries to make the aside cover the screen as a dark scrim, neutralize it */
.av-drawer{ background: none !important; backdrop-filter: none !important; }
.av-drawer.is-open{ background: none !important; }
.av-drawer .av-focus-sentinel{ display: none !important; }

/* Keep the separate #av-scrim element in charge of the overlay */
#av-scrim{
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
#av-scrim.is-open{ opacity: 1; pointer-events: auto; }

#h2.has-sec-badge .sec-badge{
  width: 100% !important;
}

/* kicker-pro pill: multi-line, still a pill */
.kicker-pro,
.kicker-pro .pill {
  display: inline-block !important;
  max-width: 22rem !important;        /* tweak as needed */
  padding: .375rem .75rem !important;
  border-radius: 999px !important;
  background: var(--pill-bg, #111) !important;
  color: var(--pill-fg, #fff) !important;
  border: 1px solid var(--pill-hair, rgba(255,255,255,.15)) !important;
  line-height: 1.2 !important;
  white-space: normal !important;     /* allow wrapping */
  overflow-wrap: anywhere !important; /* break long tokens/URLs */
  word-break: break-word !important;  /* extra safety */
}

/* Neon, centered, multiline pills that derive from section badge colors */
.kicker-pro{
  /* base from the same sources your badges use */
  --_base: color-mix(in oklch,
            var(--badge-from, var(--sec-color, #6b5cff)) 50%,
            var(--badge-to,   var(--sec-color, #6b5cff)) 50%);
  --_neon:   color-mix(in oklch, var(--_base) 75%, white 25%);
  --_border: color-mix(in oklch, var(--_base) 85%, black 10%);
  --_glow:   color-mix(in oklch, var(--_base) 35%, white 55%);
}

.kicker-pro .pill{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  /* slightly taller to handle wrapping cleanly */
  padding: .55rem 1rem !important;
  min-height: 2.35rem !important;
  line-height: 1.25 !important;

  /* wrap long text instead of exploding the layout */
  max-width: 22rem !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;

  border-radius: 999px !important;
  background: var(--_neon) !important;      /* poppy neon derived from badge colors */
  color: #0b0b12 !important;                 /* readable on neon */
  border: 1px solid var(--_border) !important;
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--_base) 65%, white 8%) inset,
    0 0 18px var(--_glow) !important;
}

.kicker-pro .pill:hover,
.kicker-pro .pill:focus-visible{
  background: color-mix(in oklch, var(--_base) 68%, white 32%) !important;
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--_base) 70%, white 12%) inset,
    0 0 24px var(--_glow) !important;
}

/* ---------- Responsive tab stacking fix ---------- */
@media (max-width: 768px) {
  /* container for tab buttons */
  [role="tablist"] {
    display: flex;
    flex-direction: column !important;
    align-items: stretch;
    gap: 0.5rem;
  }

  /* make each tab button full width */
  [role="tab"] {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0;
  }

  /* the tab panels should stack naturally */
  [role="tabpanel"] {
    display: block !important;
    width: 100% !important;
    margin-top: 1rem;
  }

  /* if your layout uses grid for tabbed content */
  .tab-grid,
  .tabs,
  .tab-container {
    display: block !important;
  }

  /* prevent side-by-side flex layouts */
  .tab-row {
    flex-direction: column !important;
  }

  /* optional spacing */
  .tab-panel + .tab-panel {
    margin-top: 1rem;
  }
}

.kicker-pro {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  color: #000 !important;
  text-align: left !important;
  padding: 10px 1rem !important; /* inner text padding (top/bottom 3px, sides 2rem) */
  border-radius: 0.75rem !important;
background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.85),
    rgba(200, 200, 200, 0.85)
) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  box-shadow: 0 0 20px rgba(90, 60, 200, 0.3),
    inset 0 0 8px rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  letter-spacing: 0.02em !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* force true 100% width relative to section */
section > .kicker-pro {
  width: calc(100% + 2 * var(--section-padding, 0px)) !important;
  margin-left: calc(-1 * var(--section-padding, 0px)) !important;
  margin-right: calc(-1 * var(--section-padding, 0px)) !important;
}

/* hover glow */
.kicker-pro:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 25px rgba(130, 88, 255, 0.6),
    inset 0 0 10px rgba(255, 255, 255, 0.1) !important;
}

#pricing .pricing-tabs {
    min-width: '400px';
    width: '350px';
}


/* Desktop: still flexible, centered row */
#pricing .pricing-tabs {
  display: flex !important;
  justify-content: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

/* Mobile-friendly stacked layout */
@media (max-width: 768px) {
  #pricing .pricing-tabs {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
  }

  #pricing .pricing-tabs button,
  #pricing .pricing-tabs .tab,
  #pricing .pricing-tabs [role="tab"] {
    width: 100% !important;
    text-align: center !important;
    font-size: 1rem !important;
    padding: 0.85rem 1rem !important;
    border-radius: 0.75rem !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    transition: background 0.25s ease !important;
  }

  #pricing .pricing-tabs button:hover,
  #pricing .pricing-tabs .tab:hover,
  #pricing .pricing-tabs [role="tab"]:hover {
    background: rgba(130, 88, 255, 0.3) !important;
    transform: translateY(-2px) !important;
  }

  #pricing .pricing-tabs [aria-selected="true"],
  #pricing .pricing-tabs .active {
    background: linear-gradient(
      135deg,
      rgba(130, 88, 255, 0.85),
      rgba(60, 20, 150, 0.85)
    ) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 12px rgba(130, 88, 255, 0.4) !important;
    transform: translateY(-