/* ============================================================
   AI1DESIGN — TEMPLATE.CSS
   Template-wide styling only
============================================================ */

/* ============================================================
   1) RESET / ROOT VARIABLES
============================================================ */

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

:root{
  --ai1d-grey:#d9d9d9;
  --ai1d-dark:#0b0b0b;
  --ai1d-green:#1f8a2f;
  --ai1d-orange:#e8762a;
  --ai1d-white:#ffffff;
  --ai1d-text:#111;
  --ai1d-muted:rgba(0,0,0,.72);
  --ai1d-container:1200px;
  --ai1d-radius:6px;
  --ai1d-shadow:0 14px 30px rgba(0,0,0,.25);

  --ai1-font-base:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Comfortaa",
    Roboto,
    Arial,
    sans-serif;

  --ai1-font-heading:
    "Comfortaa",
    system-ui,
    sans-serif;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

/* ============================================================
   2) BASE TYPOGRAPHY
============================================================ */

body,
.ai1d-body{
  position:relative;
  z-index:0;
  overflow-x:hidden;
  font-family:var(--ai1-font-base);
  background:var(--ai1d-grey);
  color:var(--ai1d-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6{
  font-family:var(--ai1-font-heading);
  font-weight:500;
  letter-spacing:.04em;
}

p{
  margin:0 0 1.25rem;
  font-size:1rem;
  line-height:1.7;
}

small,
.ai1-text-small{
  font-size:.9rem;
  line-height:1.6;
  opacity:.85;
}

/* ============================================================
   3) BACKGROUND VIDEO
============================================================ */

.ai1-bg-video{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:#000;
}

.ai1-bg-video__media{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:1;
}

.ai1-page,
.ai1-wrapper,
#tm-wrapper,
.site,
#wrap,
#container{
  background:transparent !important;
}

/* Keep all main template regions above the video */
.ai1d-topbar,
.ai1d-header,
.ai1d-nav-wrap,
.ai1d-hero,
.ai1d-home-sections,
.ai1d-above-component,
.ai1d-main,
.ai1d-below-component,
.ai1d-footer{
  position:relative;
  z-index:2;
}

/* ============================================================
   4) GLOBAL CONTAINER
============================================================ */

.ai1d-container{
  width:100%;
  margin:0 auto;
}

/* ============================================================
   5) SKIP LINK
============================================================ */

.ai1-skip-link{
  position:absolute;
  top:-120px;
  left:0;
  z-index:999999;
  padding:.65rem 1rem;
  background:#000;
  color:#fff;
}

.ai1-skip-link:focus{
  top:0;
}

/* ============================================================
   6) TOPBAR
============================================================ */

.ai1d-topbar{
  background:#cfcfcf;
  border-bottom:1px solid rgba(0,0,0,.15);
}

.ai1d-topbar .ai1d-container{
  padding:.45rem 0;
}

/* ============================================================
   7) HEADER
============================================================ */

.ai1d-header{
  z-index:50;
  overflow:visible !important;
  background:#000;
  border-bottom:1px solid rgba(0,0,0,.10);
}

.ai1d-header-image-link{
  display:block;
  width:100%;
}

.ai1d-header-image{
  width:100%;
  height:auto;
}

/* ============================================================
   8) NAVIGATION SYSTEM — MULTICOLOUR PREMIUM FRAME
   ------------------------------------------------------------
   Template-wide navigation system.

   Includes:
   - Multicolour outer frame
   - Dark glass inner panel
   - Standard navigation links
   - Joomla dropdown behaviour
   - Dedicated £100 Website Deal item
   - Dedicated £100 Website child dropdown
   - Desktop / laptop / mobile layouts
============================================================ */

.ai1d-nav-wrap{
  position:relative;
  z-index:80;
  overflow:visible !important;
  padding:8px 0;
  background:linear-gradient(90deg,#00c8ff 0%,#6dff20 22%,#ffd51f 45%,#ff7a18 67%,#ff2d7d 84%,#8c52ff 100%);
  box-shadow:0 12px 34px rgba(0,0,0,.42),0 0 28px rgba(0,200,255,.16),0 0 34px rgba(255,45,125,.14);
}

.ai1d-nav-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 44%,rgba(0,0,0,.12));
}

.ai1d-nav-wrap::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  z-index:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
}

/* ============================================================
   8A) NAVIGATION INNER PANEL
============================================================ */

.ai1d-nav-inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(1800px,calc(100% - 48px));
  min-height:84px;
  margin:0 auto;
  padding:8px 30px;
  overflow:visible !important;
  background:
    radial-gradient(circle at 18% 0%,rgba(126,255,0,.045),transparent 30%),
    radial-gradient(circle at 82% 0%,rgba(255,45,125,.04),transparent 28%),
    linear-gradient(135deg,rgba(1,9,6,.975),rgba(3,8,7,.965));
  border:1px solid rgba(126,255,0,.22);
  border-radius:28px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),inset 0 16px 30px rgba(255,255,255,.018),0 16px 40px rgba(0,0,0,.40);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

/* ============================================================
   9) MAIN NAVIGATION
============================================================ */

.ai1-main-nav{
  position:relative;
  z-index:10000;
  width:100%;
  overflow:visible !important;
}

.ai1-main-nav > button,
.ai1-main-nav > span:empty,
.ai1-main-nav > i:empty,
.ai1-main-nav .nav-header:empty,
.ai1-main-nav .separator:empty{
  display:none !important;
}

.ai1-main-nav ul,
.ai1-main-nav li{
  overflow:visible !important;
}

.ai1-main-nav ul.mod-menu,
.ai1-main-nav ul[id^="mod-menu"],
.ai1-main-nav ul.nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
}

.ai1-main-nav li{
  position:relative;
  margin:0;
  padding:0;
  list-style:none;
}

.ai1-main-nav li::marker{content:"";}

.ai1-main-nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:14px 18px;
  border:1px solid transparent;
  border-radius:17px;
  font-family:var(--ai1-font-heading);
  font-size:1.3rem;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  color:#8cff00;
  background:transparent;
  box-shadow:none;
  text-shadow:0 0 8px rgba(140,255,0,.18),0 1px 4px rgba(0,0,0,.58);
  transition:color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}

.ai1-main-nav a:not([href*="100-website"])::before{
  content:"";
  position:absolute;
  bottom:7px;
  left:50%;
  width:0;
  height:2px;
  border-radius:999px;
  background:#8cff00;
  box-shadow:0 0 10px rgba(140,255,0,.68);
  transform:translateX(-50%);
  transition:width .2s ease;
}

.ai1-main-nav a:not([href*="100-website"]):hover,
.ai1-main-nav a:not([href*="100-website"]):focus{
  color:#d6ffad;
  background:rgba(126,255,0,.15);
  border-color:rgba(126,255,0,.22);
  box-shadow:inset 0 0 18px rgba(126,255,0,.04),0 8px 22px rgba(0,0,0,.25);
  transform:translateY(-2px);
}

.ai1-main-nav a:not([href*="100-website"]):hover::before,
.ai1-main-nav a:not([href*="100-website"]):focus::before{width:34%;}

.ai1-main-nav li.current > a:not([href*="100-website"]),
.ai1-main-nav li.active > a:not([href*="100-website"]){
  color:#fff;
  background:linear-gradient(135deg,rgba(126,255,0,.15),rgba(0,118,60,.10));
  border-color:rgba(126,255,0,.32);
  box-shadow:inset 0 0 20px rgba(126,255,0,.055),0 0 22px rgba(126,255,0,.10);
}

.ai1-main-nav li.current > a:not([href*="100-website"])::before,
.ai1-main-nav li.active > a:not([href*="100-website"])::before{width:42%;}

/* ============================================================
   9A) STANDARD DESKTOP DROPDOWN ARROW
============================================================ */

@media (min-width:981px){
  .ai1-main-nav .mod-menu__toggle-sub{display:none !important;}

  .ai1-main-nav li.deeper.parent:not(.ai1-deal-menu) > a::after{
    content:"▾";
    position:static;
    width:auto;
    height:auto;
    margin-left:.45rem;
    background:none;
    border:0;
    box-shadow:none;
    font-size:.78em;
    line-height:1;
    opacity:.8;
    transform:none;
  }
}

/* ============================================================
   9B) £100 WEBSITE — PARENT DEAL BUTTON
============================================================ */

@keyframes ai1DealPulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.52),inset 0 -10px 22px rgba(80,0,10,.18),0 0 0 1px rgba(255,210,60,.50),0 8px 24px rgba(210,0,35,.36),0 0 24px rgba(255,40,70,.28),0 0 42px rgba(255,190,35,.14);}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -10px 22px rgba(80,0,10,.14),0 0 0 1px rgba(255,224,90,.72),0 12px 30px rgba(220,0,40,.44),0 0 34px rgba(255,35,75,.40),0 0 58px rgba(255,190,35,.22);}
}

@keyframes ai1DealBadgeGlow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 4px 12px rgba(0,0,0,.52),0 0 10px rgba(255,225,0,.18);}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 5px 14px rgba(0,0,0,.56),0 0 18px rgba(255,225,0,.42);}
}

.ai1-main-nav li.ai1-deal-menu{
  position:relative;
  isolation:isolate;
  margin-left:42px;
}

.ai1-main-nav li.ai1-deal-menu > a[href*="100-website"]{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:.75rem;
  min-width:238px;
  min-height:58px;
  margin:0 !important;
  padding:12px 22px 12px 88px;
  overflow:hidden !important;
  border:1px solid rgba(255,238,155,.88);
  border-radius:19px;
  color:#fff;
  background:
    radial-gradient(circle at 14% 10%,rgba(255,255,255,.30),transparent 24%),
    linear-gradient(135deg,#ff4f62 0%,#f41435 30%,#d50028 60%,#a70020 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.52),inset 0 -10px 22px rgba(80,0,10,.18),0 0 0 1px rgba(255,210,60,.50),0 8px 24px rgba(210,0,35,.36),0 0 24px rgba(255,40,70,.28),0 0 42px rgba(255,190,35,.14);
  font-family:var(--ai1-font-heading);
  font-size:1.2rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.015em;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.42),0 0 8px rgba(255,255,255,.08);
  transform:translateZ(0);
  animation:ai1DealPulse 2.6s ease-in-out infinite;
  transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease;
}

/* DEAL badge only. No shimmer pseudo-element is used. */
.ai1-main-nav li.ai1-deal-menu > a[href*="100-website"]::before{
  content:"DEAL";
  position:absolute;
  top:50%;
  left:10px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:34px;
  border:1px solid rgba(255,232,100,.72);
  border-radius:999px;
  background:linear-gradient(180deg,#1f1f1f,#050505);
  color:#ffe75a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 4px 12px rgba(0,0,0,.52),0 0 10px rgba(255,225,0,.18);
  font-size:.58rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.08em;
  text-shadow:0 0 8px rgba(255,225,0,.26);
  transform:translateY(-50%);
  animation:ai1DealBadgeGlow 2s ease-in-out infinite;
}

/* Explicitly kill every legacy white shimmer / pseudo arrow. */
.ai1-main-nav li.ai1-deal-menu > a[href*="100-website"]::after{
  content:none !important;
  display:none !important;
  animation:none !important;
  background:none !important;
}

.ai1-main-nav li.ai1-deal-menu > a[href*="100-website"]:hover,
.ai1-main-nav li.ai1-deal-menu > a[href*="100-website"]:focus{
  color:#fff;
  background:radial-gradient(circle at 14% 10%,rgba(255,255,255,.38),transparent 25%),linear-gradient(135deg,#ff6b78 0%,#ff1f42 30%,#eb002e 60%,#ba0023 100%);
  border-color:#fff0a8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.64),inset 0 -10px 22px rgba(80,0,10,.12),0 0 0 1px rgba(255,225,90,.72),0 14px 34px rgba(220,0,40,.46),0 0 40px rgba(255,35,75,.42),0 0 64px rgba(255,190,35,.24);
  transform:translateY(-4px) scale(1.045);
}

.ai1-main-nav li.current.ai1-deal-menu > a[href*="100-website"],
.ai1-main-nav li.active.ai1-deal-menu > a[href*="100-website"]{
  color:#fff;
  border-color:#fff0a8;
}

/* Dedicated chevron supplied by template.js. */
.ai1-main-nav li.ai1-deal-menu > a .ai1-deal-arrow{
  position:relative;
  flex:0 0 auto;
  width:10px;
  height:10px;
  margin-left:auto;
  margin-right:2px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:translateY(-2px) rotate(45deg);
  opacity:.92;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.24));
  transition:transform .28s cubic-bezier(.16,1,.3,1),filter .28s ease;
}

.ai1-main-nav li.ai1-deal-menu.is-sub-open > a .ai1-deal-arrow{
  transform:translateY(2px) rotate(225deg);
  filter:drop-shadow(0 0 8px rgba(57,255,20,.48));
}

/* ============================================================
   10) STANDARD DROPDOWNS
============================================================ */

.ai1-main-nav ul.mod-menu__sub{
  position:absolute;
  top:100%;
  left:0;
  z-index:20000 !important;
  display:block !important;
  min-width:380px;
  margin:0;
  padding:22px 12px 14px;
  list-style:none;
  background:
    radial-gradient(circle at 15% 0%,rgba(126,255,0,.08),transparent 30%),
    radial-gradient(circle at 85% 0%,rgba(255,45,125,.06),transparent 30%),
    linear-gradient(145deg,rgba(1,10,7,.985),rgba(2,6,5,.985));
  border:1px solid rgba(126,255,0,.22);
  border-radius:20px;
  box-shadow:0 22px 48px rgba(0,0,0,.58),0 0 24px rgba(126,255,0,.08);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  pointer-events:none;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:opacity .18s ease .18s,transform .18s ease .18s,visibility 0s linear .18s;
}

.ai1-main-nav ul.mod-menu__sub::after{
  content:"";
  position:absolute;
  top:0;
  right:16px;
  left:16px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#00c8ff,#8cff00,#ffd51f,#ff7a18,#ff2d7d,#8c52ff);
  box-shadow:0 0 14px rgba(126,255,0,.18);
}

.ai1-main-nav ul.mod-menu__sub::before{
  content:"";
  position:absolute;
  top:-20px;
  right:0;
  left:0;
  height:20px;
  background:transparent;
}

.ai1-main-nav ul.mod-menu__sub li{width:100%;margin:0;padding:0;}

.ai1-main-nav ul.mod-menu__sub a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  min-height:46px;
  padding:12px 15px;
  white-space:nowrap;
  border:1px solid transparent;
  border-radius:13px;
  font-size:1rem;
  font-weight:600;
  line-height:1.35;
  color:rgba(255,255,255,.90);
  background:transparent;
  box-shadow:none;
  transform:none;
  transition:color .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

.ai1-main-nav ul.mod-menu__sub a::before,
.ai1-main-nav ul.mod-menu__sub a::after{content:none !important;}

.ai1-main-nav ul.mod-menu__sub a:hover,
.ai1-main-nav ul.mod-menu__sub a:focus{
  color:#dfffbd;
  background:linear-gradient(135deg,rgba(126,255,0,.15),rgba(0,130,60,.08));
  border-color:rgba(126,255,0,.28);
  box-shadow:inset 4px 0 0 #8cff00,0 8px 18px rgba(0,0,0,.22),0 0 18px rgba(126,255,0,.06);
  transform:translateX(3px);
}

.ai1-main-nav ul.mod-menu__sub li.current > a,
.ai1-main-nav ul.mod-menu__sub li.active > a{
  color:#fff;
  background:linear-gradient(135deg,rgba(126,255,0,.20),rgba(0,90,40,.12));
  border-color:rgba(126,255,0,.34);
  box-shadow:inset 4px 0 0 #8cff00,inset 0 0 18px rgba(126,255,0,.04),0 0 18px rgba(126,255,0,.08);
}

@media (hover:hover) and (pointer:fine){
  .ai1-main-nav li.deeper.parent{padding-bottom:20px;margin-bottom:-20px;}
  .ai1-main-nav li.deeper.parent::after{content:"";position:absolute;top:100%;right:0;left:0;height:20px;background:transparent;}
  .ai1-main-nav li.deeper.parent:hover > ul.mod-menu__sub,
  .ai1-main-nav li.deeper.parent:focus-within > ul.mod-menu__sub,
  .ai1-main-nav li.deeper.parent.is-sub-open > ul.mod-menu__sub{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
    transition-delay:0s;
  }
}

/* ============================================================
   10A) £100 WEBSITE CHILD DROPDOWN — FINAL
   ------------------------------------------------------------
   The generic submenu width is completely overridden here.
   The black outer panel and red child card share the same box,
   with equal padding on every side.
============================================================ */

@media (min-width:981px){
  .ai1-main-nav li.ai1-deal-menu > ul.mod-menu__sub{
    top:calc(100% + 12px) !important;
    right:auto !important;
    left:var(--ai1-deal-submenu-center,50%) !important;
    width:330px !important;
    min-width:330px !important;
    max-width:330px !important;
    margin:0 !important;
    padding:10px !important;
    overflow:visible !important;
    border:1px solid rgba(255,255,255,.13);
    border-radius:22px;
    background:
      radial-gradient(circle at 15% 15%,rgba(57,255,20,.08),transparent 30%),
      radial-gradient(circle at 88% 80%,rgba(255,46,136,.10),transparent 35%),
      linear-gradient(145deg,rgba(7,13,13,.98),rgba(3,7,8,.97));
    box-shadow:0 24px 60px rgba(0,0,0,.48),0 0 26px rgba(57,255,20,.06),0 0 42px rgba(255,46,136,.08),inset 0 1px 0 rgba(255,255,255,.07);
    transform:translateX(-50%) translateY(10px) scale(.97);
    transform-origin:top center;
  }

  .ai1-main-nav li.ai1-deal-menu.is-sub-open > ul.mod-menu__sub,
  .ai1-main-nav li.ai1-deal-menu:hover > ul.mod-menu__sub,
  .ai1-main-nav li.ai1-deal-menu:focus-within > ul.mod-menu__sub{
    transform:translateX(-50%) translateY(0) scale(1) !important;
  }
}

/* Replace generic submenu colour bar with a small connector pointer. */
.ai1-main-nav li.ai1-deal-menu > ul.mod-menu__sub::before{
  content:"";
  position:absolute;
  top:-13px;
  right:auto;
  left:50%;
  width:82px;
  height:16px;
  background:radial-gradient(ellipse at center,rgba(255,70,105,.36),rgba(255,157,0,.14) 42%,transparent 72%);
  filter:blur(6px);
  transform:translateX(-50%);
  pointer-events:none;
}

.ai1-main-nav li.ai1-deal-menu > ul.mod-menu__sub::after{
  content:"";
  position:absolute;
  top:-6px;
  right:auto;
  left:50%;
  width:12px;
  height:12px;
  border-top:1px solid rgba(255,255,255,.14);
  border-left:1px solid rgba(255,255,255,.14);
  background:#08100f;
  box-shadow:none;
  transform:translateX(-50%) rotate(45deg);
}

.ai1-main-nav li.ai1-deal-menu > ul.mod-menu__sub > li{
  position:relative;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:none;
}

.ai1-main-nav li.ai1-deal-menu > ul.mod-menu__sub > li > a{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  column-gap:11px;
  width:100% !important;
  min-height:60px;
  margin:0 !important;
  padding:10px 13px !important;
  border:1px solid rgba(255,91,112,.72);
  border-radius:16px;
  background:
    radial-gradient(circle at 10% 50%,rgba(57,255,20,.12),transparent 24%),
    radial-gradient(circle at 92% 50%,rgba(255,157,0,.08),transparent 24%),
    linear-gradient(110deg,rgba(66,8,15,.98),rgba(129,5,31,.98) 58%,rgba(89,7,29,.98));
  color:#fff !important;
  font-size:.96rem;
  font-weight:800;
  line-height:1.2;
  text-align:left;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 28px rgba(0,0,0,.28),0 0 18px rgba(255,46,136,.10);
  transform:none;
  transition:transform .28s cubic-bezier(.16,1,.3,1),border-color .28s ease,box-shadow .28s ease,background .28s ease;
}

.ai1-main-nav li.ai1-deal-menu > ul.mod-menu__sub > li > a::before{
  content:"START" !important;
  position:relative;
  top:auto;
  left:auto;
  display:grid;
  place-items:center;
  min-width:50px;
  height:29px;
  padding:0 9px;
  border:1px solid rgba(57,255,20,.72);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(15,22,18,.99),rgba(3,8,6,.99));
  color:#baff30;
  font-size:.56rem;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  box-shadow:0 0 16px rgba(57,255,20,.14),inset 0 1px 0 rgba(255,255,255,.09);
  transform:none !important;
}

.ai1-main-nav li.ai1-deal-menu > ul.mod-menu__sub > li > a::after{
  content:"→" !important;
  position:relative;
  top:auto;
  left:auto;
  width:auto;
  height:auto;
  margin:0;
  background:none !important;
  color:#fff;
  font-size:1rem;
  font-weight:900;
  line-height:1;
  opacity:.82;
  transform:none;
  transition:transform .25s ease,opacity .25s ease,color .25s ease;
}

.ai1-main-nav li.ai1-deal-menu > ul.mod-menu__sub > li > a:hover,
.ai1-main-nav li.ai1-deal-menu > ul.mod-menu__sub > li > a:focus-visible{
  border-color:rgba(255,214,95,.96);
  background:
    radial-gradient(circle at 10% 50%,rgba(57,255,20,.17),transparent 28%),
    radial-gradient(circle at 92% 50%,rgba(255,157,0,.14),transparent 28%),
    linear-gradient(110deg,rgba(96,10,18,.99),rgba(180,5,41,.99) 58%,rgba(128,8,38,.99));
  box-shadow:0 16px 36px rgba(0,0,0,.34),0 0 22px rgba(255,46,136,.18),0 0 34px rgba(255,157,0,.12),inset 0 1px 0 rgba(255,255,255,.13);
  transform:translateY(-2px);
  outline:none;
}

.ai1-main-nav li.ai1-deal-menu > ul.mod-menu__sub > li > a:hover::after,
.ai1-main-nav li.ai1-deal-menu > ul.mod-menu__sub > li > a:focus-visible::after{
  color:#fff5b8;
  opacity:1;
  transform:translateX(4px);
}

/* ============================================================
   10B) RESPONSIVE DESKTOP / LAPTOP NAVIGATION
============================================================ */

@media (max-width:1500px) and (min-width:981px){
  .ai1d-nav-inner{width:calc(100% - 36px);padding-right:20px;padding-left:20px;}
  .ai1-main-nav ul.mod-menu,.ai1-main-nav ul[id^="mod-menu"],.ai1-main-nav ul.nav{gap:.18rem;}
  .ai1-main-nav a{padding-right:12px;padding-left:12px;font-size:1.12rem;}

  .ai1-main-nav li.ai1-deal-menu{margin-left:24px;}
  .ai1-main-nav li.ai1-deal-menu > a[href*="100-website"]{
    min-width:212px;
    margin:0 !important;
    padding-right:16px;
    padding-left:74px;
    font-size:1.05rem;
  }
  .ai1-main-nav li.ai1-deal-menu > a[href*="100-website"]::before{left:8px;width:56px;}

  .ai1-main-nav li.ai1-deal-menu > ul.mod-menu__sub{
    width:315px !important;
    min-width:315px !important;
    max-width:315px !important;
  }
  .ai1-main-nav li.ai1-deal-menu > ul.mod-menu__sub > li > a{font-size:.92rem;column-gap:9px;}
}

/* ============================================================
   11) MOBILE NAVIGATION
============================================================ */

.ai1-nav-toggle{display:none;}
.ai1-nav-toggle-bar{width:24px;height:3px;border-radius:999px;background:#071005;transition:transform .2s ease,opacity .2s ease;}

@media (max-width:980px){
  .ai1d-nav-wrap{padding:7px 0;}
  .ai1d-nav-inner{justify-content:flex-end;width:calc(100% - 20px);min-height:60px;padding:8px 12px;border-radius:20px;}
  .ai1-nav-toggle{position:relative;z-index:12000;display:inline-flex !important;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:48px;height:44px;border:1px solid rgba(255,255,255,.20);border-radius:14px;background:linear-gradient(135deg,#bfff55,#67db00);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 8px 20px rgba(0,0,0,.34),0 0 20px rgba(126,255,0,.12);cursor:pointer;}
  .ai1-nav-toggle.is-active .ai1-nav-toggle-bar:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .ai1-nav-toggle.is-active .ai1-nav-toggle-bar:nth-child(2){opacity:0;}
  .ai1-nav-toggle.is-active .ai1-nav-toggle-bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

  .ai1-main-nav{position:absolute;top:calc(100% + 10px);right:10px;left:10px;z-index:11000;display:none;padding:14px;background:rgba(2,9,5,.99);border:1px solid rgba(126,255,0,.20);border-radius:22px;box-shadow:0 18px 42px rgba(0,0,0,.52),0 0 26px rgba(126,255,0,.055);}
  #ai1-main-nav.is-open,#ai1-main-nav.ai1-nav-open,#ai1-main-nav.ai1-main-nav-open{display:block !important;visibility:visible !important;opacity:1 !important;pointer-events:auto !important;}
  .ai1-main-nav ul.mod-menu,.ai1-main-nav ul[id^="mod-menu"],.ai1-main-nav ul.nav{flex-direction:column;align-items:stretch;gap:7px;width:100%;}
  .ai1-main-nav li{width:100%;}
  .ai1-main-nav a{justify-content:center;width:100%;min-height:48px;padding:12px 14px;font-size:1.08rem;white-space:normal;}
  .ai1-main-nav li.deeper.parent{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
  .ai1-main-nav li.deeper.parent > a{flex:1;}
  .ai1-main-nav .mod-menu__toggle-sub{display:inline-flex !important;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(126,255,0,.20);border-radius:12px;background:rgba(126,255,0,.07);color:#b7ff66;cursor:pointer;}

  .ai1-main-nav ul.mod-menu__sub{position:static;width:100%;min-width:0;max-height:0;margin-top:6px;padding:0 0 8px;overflow:hidden !important;background:transparent;border:0;border-radius:0;box-shadow:none;opacity:1;visibility:visible;transform:none;pointer-events:auto;backdrop-filter:none;-webkit-backdrop-filter:none;transition:max-height .22s ease;z-index:auto !important;}
  .ai1-main-nav .mod-menu__toggle-sub[aria-expanded="true"] + ul.mod-menu__sub,.ai1-main-nav li.is-sub-open > ul.mod-menu__sub{max-height:520px;}
  .ai1-main-nav ul.mod-menu__sub a{justify-content:center;background:rgba(126,255,0,.045);}

  .ai1-main-nav li.ai1-deal-menu{margin-left:0;}
  .ai1-main-nav li.ai1-deal-menu > a[href*="100-website"]{width:100%;min-width:0;min-height:56px;margin:8px 0 2px !important;padding:13px 48px 13px 82px;font-size:1.12rem;transform:none;}
  .ai1-main-nav li.ai1-deal-menu > a[href*="100-website"]::before{left:10px;width:60px;}
  .ai1-main-nav li.ai1-deal-menu > a .ai1-deal-arrow{margin-left:auto;margin-right:4px;}

  .ai1-main-nav li.ai1-deal-menu > ul.mod-menu__sub{position:static;width:100% !important;min-width:0 !important;max-width:none !important;margin:.65rem 0 0 !important;padding:9px !important;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(5,12,10,.96);box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 12px 28px rgba(0,0,0,.2);transform:none !important;}
  .ai1-main-nav li.ai1-deal-menu > ul.mod-menu__sub::before,.ai1-main-nav li.ai1-deal-menu > ul.mod-menu__sub::after{display:none;}
  .ai1-main-nav li.ai1-deal-menu > ul.mod-menu__sub > li > a{grid-template-columns:auto minmax(0,1fr) auto;min-height:58px;padding:10px 13px !important;column-gap:10px;white-space:normal;text-align:left;}
}

/* ============================================================
   11A) REDUCED MOTION — NAVIGATION
============================================================ */

@media (prefers-reduced-motion:reduce){
  .ai1-main-nav a,
  .ai1-main-nav a::before,
  .ai1-main-nav a::after,
  .ai1-main-nav .ai1-deal-arrow{
    transition:none !important;
    animation:none !important;
  }
  .ai1-main-nav li.ai1-deal-menu > a[href*="100-website"]{transform:none !important;}
}

/* ============================================================
   12) MAIN / MODULE REGIONS
============================================================ */

.ai1d-main{
  padding:0;
}

.ai1d-above-component,
.ai1d-below-component{
  position:relative;
  z-index:2;
}

/* ============================================================
   13) FOOTER — PREMIUM GLASS SYSTEM
   ------------------------------------------------------------
   Template-wide footer styling.
   Includes:
   - Glass cards
   - Glow orbs
   - CTA buttons
   - Useful links
   - Social links
   - Payment methods
   - Company/legal panel
   - Copyright strip
   - GPU/compositor stability fixes
============================================================ */

.ai1d-footer{
  position:relative;
  margin-top:0;
  overflow:hidden;
  font-family:var(--ai1-font-base);
  color:#fff;
  background:
    radial-gradient(circle at 8% 12%,rgba(0,191,255,.22),transparent 30%),
    radial-gradient(circle at 88% 18%,rgba(126,255,0,.16),transparent 28%),
    radial-gradient(circle at 74% 90%,rgba(255,0,168,.14),transparent 32%),
    linear-gradient(135deg,#050814 0%,#081426 48%,#040404 100%);
}

.ai1d-footer-panel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(1.5rem,3vw,2rem) 1.5rem 0;
  background:
    radial-gradient(circle at 8% 12%,rgba(0,191,255,.30),transparent 28%),
    radial-gradient(circle at 88% 18%,rgba(126,255,0,.24),transparent 26%),
    radial-gradient(circle at 74% 90%,rgba(255,0,168,.22),transparent 30%),
    linear-gradient(135deg,#050814 0%,#081426 48%,#040404 100%);
}

.ai1d-footer-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.18));
}

/* Top brand strip.
   Explicit top/left/right geometry avoids Chromium compositor flicker. */
.ai1d-footer-panel::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:0;
  height:7px;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(0,191,255,.95),
      rgba(126,255,0,.95),
      rgba(255,122,0,.95),
      rgba(255,0,168,.95)
    );
  box-shadow:0 0 28px rgba(0,191,255,.6);
}


/* ============================================================
   14) FOOTER — AMBIENT GLOW ORBS
============================================================ */

.ai1d-footer-orb{
  position:absolute;
  z-index:0;
  width:340px;
  height:340px;
  border-radius:999px;
  filter:blur(22px);
  opacity:.35;
  pointer-events:none;
}

.ai1d-footer-orb--one{
  left:-120px;
  top:80px;
  background:rgba(0,191,255,.55);
}

.ai1d-footer-orb--two{
  right:-130px;
  bottom:20px;
  background:rgba(255,122,0,.55);
}


/* ============================================================
   15) FOOTER — MAIN GRID
============================================================ */

.ai1d-footer-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.35fr .9fr .9fr 1fr;
  align-items:stretch;
  gap:22px;
  width:min(1400px,100%);
  margin:0 auto;
}


/* ============================================================
   16) FOOTER — GLASS CARDS
   ------------------------------------------------------------
   The old inset box-shadow has deliberately been removed.
   That combination with backdrop-filter was the likely source
   of the intermittent flashing rectangular outline.
============================================================ */

.ai1d-footer-brand,
.ai1d-footer-card,
.ai1d-footer-payments-card,
.ai1d-footer-company{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:28px;
  background:rgba(255,255,255,.075);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  /* Compositor stability */
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.ai1d-footer-brand,
.ai1d-footer-card,
.ai1d-footer-payments-card{
  padding:26px;
}

.ai1d-footer-brand{
  min-height:100%;
  background:
    linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.045)),
    radial-gradient(circle at 20% 0%,rgba(126,255,0,.20),transparent 36%);
}

.ai1d-footer-brand::after{
  content:"";
  position:absolute;
  right:-58px;
  bottom:-58px;
  width:190px;
  height:190px;
  border:30px solid rgba(255,255,255,.05);
  border-radius:999px;
}


/* ============================================================
   17) FOOTER — TYPOGRAPHY
============================================================ */

.ai1d-footer-kicker{
  margin:0 0 10px;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8cff00;
}

.ai1d-footer h2,
.ai1d-footer h3{
  margin:0;
  font-family:var(--ai1-font-heading);
  color:#fff;
  letter-spacing:.02em;
}

.ai1d-footer h2{
  max-width:12ch;
  font-size:clamp(2rem,4vw,4rem);
  line-height:1;
}

.ai1d-footer h3{
  margin-bottom:16px;
  font-size:1.15rem;
}

.ai1d-footer-brand p:not(.ai1d-footer-kicker){
  max-width:54ch;
  margin:18px 0 0;
  color:rgba(255,255,255,.82);
  font-size:1rem;
  line-height:1.75;
}


/* ============================================================
   18) FOOTER — CTA BUTTONS
============================================================ */

.ai1d-footer-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.ai1d-footer-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 18px;
  border-radius:999px;
  background:linear-gradient(135deg,#fff,#bffcff);
  box-shadow:0 0 22px rgba(0,210,255,.38);
  color:#061126;
  font-weight:900;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.ai1d-footer-cta--ghost{
  color:#fff;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

.ai1d-footer-cta:hover,
.ai1d-footer-cta:focus{
  transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(0,210,255,.35);
}


/* ============================================================
   19) FOOTER — LINKS + POLICIES
============================================================ */

.ai1d-footer-links{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.ai1d-footer-links a,
.ai1d-footer-policies a,
.ai1d-footer-contact-line a,
.ai1-cookie-reset{
  color:rgba(255,255,255,.82);
  text-decoration:none;
  transition:
    color .18s ease,
    transform .18s ease;
}

.ai1d-footer-links a{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 0;
}

.ai1d-footer-links a::before{
  content:"";
  flex:0 0 10px;
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg,#20d7ff,#8cff00,#ff7a00,#ff00a8);
  box-shadow:0 0 12px rgba(0,210,255,.45);
}

.ai1d-footer-links a:hover,
.ai1d-footer-policies a:hover,
.ai1d-footer-contact-line a:hover,
.ai1-cookie-reset:hover{
  color:#fff;
}

.ai1d-footer-policies{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.13);
}

.ai1d-footer-policies ul{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}


/* ============================================================
   20) FOOTER — CONTACT + SOCIALS
============================================================ */

.ai1d-footer-contact-line{
  margin:0 0 12px;
  color:rgba(255,255,255,.78);
  font-size:.95rem;
  line-height:1.6;
}

.ai1d-footer-contact-line strong{
  color:#fff;
}

.ai1d-footer-social{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.ai1d-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:rgba(255,255,255,.10);
  box-shadow:0 14px 32px rgba(0,0,0,.28);
  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.ai1d-social:hover{
  background:rgba(255,255,255,.18);
  box-shadow:0 18px 42px rgba(0,210,255,.22);
  transform:translateY(-4px) rotate(-2deg);
}

.ai1d-social img,
.ai1d-social svg{
  width:34px;
  height:34px;
}


/* ============================================================
   21) FOOTER — PAYMENTS
============================================================ */

.ai1d-footer-payments-card{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:260px 1fr;
  align-items:center;
  gap:24px;
}

.ai1d-footer-payments-card h3{
  margin-bottom:0;
}

.ai1d-payments{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  margin:0;
}

.ai1d-payments img{
  width:auto;
  height:30px;
  padding:4px 6px;
  border-radius:8px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.ai1d-payments img:hover{
  box-shadow:0 14px 30px rgba(0,0,0,.32);
  transform:translateY(-3px) scale(1.04);
}


/* ============================================================
   22) FOOTER — COMPANY / LEGAL PANEL
============================================================ */

.ai1d-footer-company{
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:22px 26px;
  color:rgba(255,255,255,.72);
  font-size:.86rem;
  line-height:1.55;
  text-align:center;
}

.ai1d-footer-company div{
  width:100%;
  margin:0;
}

.ai1d-footer-company .ai1-cookie-reset,
.ai1d-footer-company a{
  margin-top:8px;
}


/* ============================================================
   23) FOOTER — COPYRIGHT FINISH
   ------------------------------------------------------------
   Integrated into the main footer panel.
   No separate black bar.
   No coloured/orange strip underneath.
============================================================ */

.ai1d-footer-copyright{
  position:relative;
  z-index:2;
  width:min(1400px,100%);
  margin:26px auto 0;
  padding:0 0 22px;
  background:transparent !important;
  border:0;
  color:rgba(255,255,255,.68);
}

.ai1d-footer-copyright-inner{
  position:relative;
  width:calc(100% - 48px);
  margin:0 auto;
  padding:18px 20px 0;
  border-top:1px solid rgba(255,255,255,.11);
  text-align:center;

  /* Copyright must always remain visible. */
  opacity:1 !important;
  transform:none !important;
}

.ai1d-footer-copyright-inner::before{
  content:"";
  position:absolute;
  top:-1px;
  left:50%;
  width:min(360px,55%);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(0,191,255,.72),
    rgba(126,255,0,.72),
    transparent
  );
  box-shadow:0 0 14px rgba(0,191,255,.16);
}

.ai1d-footer-copyright p{
  margin:0;
  font-size:.82rem;
  line-height:1.6;
  letter-spacing:.02em;
}

.ai1d-footer-copyright-separator{
  display:inline-block;
  margin:0 .65rem;
  color:#8cff00;
  text-shadow:0 0 8px rgba(126,255,0,.55);
}

@media (max-width:600px){
  .ai1d-footer-copyright{
    margin-top:20px;
    padding-bottom:18px;
  }

  .ai1d-footer-copyright-inner{
    width:calc(100% - 28px);
    padding:16px 10px 0;
  }

  .ai1d-footer-copyright p{
    font-size:.76rem;
  }

  .ai1d-footer-copyright-separator{
    display:block;
    width:4px;
    height:4px;
    margin:8px auto;
    overflow:hidden;
    border-radius:999px;
    background:#8cff00;
    color:transparent;
    box-shadow:0 0 10px rgba(126,255,0,.55);
  }
}

/* ============================================================
   24) FOOTER — BYTE DIVIDER
============================================================ */

.ai1-footer-divider{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

.ai1-footer-divider-line{
  position:absolute;
  right:0;
  left:0;
  height:2px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,191,255,.9) 18%,
      rgba(126,255,0,.95) 50%,
      rgba(255,122,0,.9) 82%,
      transparent 100%
    );
  box-shadow:
    0 0 18px rgba(0,191,255,.45),
    0 0 30px rgba(126,255,0,.22);
}

.ai1-footer-divider-video{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:132px;
  height:132px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:
    radial-gradient(circle at center,rgba(8,20,38,.96),rgba(5,5,5,.98));
  box-shadow:
    0 0 0 10px rgba(0,0,0,.28),
    0 0 34px rgba(0,191,255,.26),
    inset 0 0 28px rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  /* Keep Byte's compositing layer stable and sharp. */
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.ai1-footer-divider-video::before{
  content:"";
  position:absolute;
  inset:-2px;
  padding:2px;
  border-radius:inherit;
  background:
    linear-gradient(
      135deg,
      rgba(0,191,255,.95),
      rgba(126,255,0,.95),
      rgba(255,122,0,.95),
      rgba(255,0,168,.95)
    );
  pointer-events:none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}

.ai1-footer-divider-video video{
  width:100%;
  height:100%;
  border-radius:inherit;
  object-fit:cover;
  transform:scale(1.02);
  filter:none;
  will-change:auto;
}


/* ============================================================
   25) FOOTER — SCROLL REVEAL ANIMATIONS
   ------------------------------------------------------------
   Controlled by template.js.
   Structural wrappers stay visible; only visual footer elements move.
============================================================ */

:root{
  --ai1-footer-reveal-distance:64px;
  --ai1-footer-reveal-duration:780ms;
  --ai1-footer-reveal-ease:cubic-bezier(.22,1,.36,1);
}

.ai1-footer-js-active .ai1-footer-reveal{
  opacity:0;
  transition:
    opacity var(--ai1-footer-reveal-duration) var(--ai1-footer-reveal-ease),
    transform var(--ai1-footer-reveal-duration) var(--ai1-footer-reveal-ease);
  transition-delay:var(--ai1-footer-reveal-delay,0ms);
  will-change:opacity,transform;
}

.ai1-footer-js-active .ai1-footer-reveal-left{
  transform:translate3d(calc(var(--ai1-footer-reveal-distance) * -1),16px,0);
}

.ai1-footer-js-active .ai1-footer-reveal-right{
  transform:translate3d(var(--ai1-footer-reveal-distance),16px,0);
}

.ai1-footer-js-active .ai1-footer-reveal-up{
  transform:translate3d(0,42px,0);
}

.ai1-footer-js-active .ai1-footer-reveal-zoom{
  transform:translate3d(0,22px,0) scale(.97);
}

.ai1-footer-js-active .ai1-footer-reveal.is-inview{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  will-change:auto;
}

/* Scroll-up direction feels different rather than repeating mechanically. */
body.ai1-scroll-up .ai1-footer-reveal-left:not(.is-inview){
  transform:translate3d(calc(var(--ai1-footer-reveal-distance) * -1),-16px,0);
}

body.ai1-scroll-up .ai1-footer-reveal-right:not(.is-inview){
  transform:translate3d(var(--ai1-footer-reveal-distance),-16px,0);
}

body.ai1-scroll-up .ai1-footer-reveal-up:not(.is-inview){
  transform:translate3d(0,-42px,0);
}

/* Byte divider gets its own treatment:
   line grows from centre, Byte only fades to avoid transform blur. */
.ai1-footer-js-active .ai1-footer-divider-line{
  transform:scaleX(0);
  transform-origin:center;
  opacity:.45;
  transition:
    transform 900ms cubic-bezier(.22,1,.36,1),
    opacity 500ms ease;
}

.ai1-footer-js-active .ai1-footer-divider.is-inview .ai1-footer-divider-line{
  transform:scaleX(1);
  opacity:1;
}

.ai1-footer-js-active .ai1-footer-divider-video{
  opacity:0;
  transition:opacity 620ms ease 120ms;
}

.ai1-footer-js-active .ai1-footer-divider.is-inview .ai1-footer-divider-video{
  opacity:1;
}


/* ============================================================
   26) FOOTER — RESPONSIVE
============================================================ */

@media (min-width:761px){
  .ai1-footer-divider{
    margin:
      clamp(4rem,7vw,6rem)
      auto
      clamp(4rem,7vw,5.5rem);
  }
}

@media (max-width:1100px){
  .ai1d-footer-inner{
    grid-template-columns:1fr 1fr;
  }

  .ai1d-footer-brand{
    grid-column:1 / -1;
  }
}

@media (max-width:760px){
  :root{
    --ai1-footer-reveal-distance:34px;
    --ai1-footer-reveal-duration:700ms;
  }

  .ai1d-footer-panel{
    padding:3.5rem 1rem 0;
  }

  .ai1d-footer-inner,
  .ai1d-footer-payments-card{
    grid-template-columns:1fr;
  }

  .ai1d-footer h2{
    max-width:100%;
  }

  .ai1d-footer-brand,
  .ai1d-footer-card,
  .ai1d-footer-payments-card{
    padding:22px;
    border-radius:22px;
  }

  .ai1d-footer-card,
  .ai1d-footer-brand,
  .ai1d-footer-payments-card{
    text-align:center;
  }

  .ai1d-footer-social,
  .ai1d-payments,
  .ai1d-footer-cta-row{
    justify-content:center;
  }

  .ai1d-footer-links a{
    justify-content:center;
  }


  .ai1-footer-divider{
    margin:2.5rem auto 2.75rem;
  }

  .ai1-footer-divider-video{
    width:108px;
    height:108px;
    box-shadow:
      0 0 0 8px rgba(0,0,0,.28),
      0 0 24px rgba(0,191,255,.22),
      inset 0 0 20px rgba(255,255,255,.05);
  }
}

@media (max-width:520px){
  :root{
    --ai1-footer-reveal-distance:24px;
  }

  .ai1-footer-divider{
    margin:2rem auto 2.25rem;
  }

  .ai1-footer-divider-video{
    width:92px;
    height:92px;
  }

  .ai1-footer-divider-line{
    opacity:.92;
  }
}

@media (max-width:480px){
  .ai1d-social{
    width:50px;
    height:50px;
  }

  .ai1d-social img,
  .ai1d-social svg{
    width:31px;
    height:31px;
  }

  .ai1d-payments img{
    height:28px;
  }
}


/* ============================================================
   27) FOOTER — REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion:reduce){
  .ai1-footer-reveal,
  .ai1-footer-divider-line,
  .ai1-footer-divider-video{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }

  .ai1-footer-divider-video video{
    transform:scale(1.02) !important;
  }
}


/* ============================================================
   28) FOOTER — BOTTOM EDGE SAFETY
   ------------------------------------------------------------
   Prevent the fixed page video/background from peeking through
   underneath the footer on tall/wide viewports.
============================================================ */

.ai1d-footer,
.ai1d-footer-panel{
  border-bottom:0 !important;
}

.ai1d-footer > :last-child,
.ai1d-footer-panel > :last-child{
  margin-bottom:0 !important;
}

.ai1d-footer::before,
.ai1d-footer::after{
  content:none !important;
}

/* ============================================================
   29) BACK TO TOP + SCROLL PROGRESS RING
============================================================ */

.ai1d-btt{
  --ai1d-progress:0;

  position:fixed !important;
  right:22px !important;
  bottom:22px !important;
  z-index:99999;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  padding:4px;
  border:0;
  border-radius:999px;
  background:
    conic-gradient(
      var(--ai1d-green) calc(var(--ai1d-progress) * 1turn),
      rgba(255,255,255,.18) 0
    );
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  font-size:0;
  cursor:pointer;
  opacity:0;
  transform:translateY(12px);
  transition:
    opacity .25s ease,
    transform .25s ease,
    background .25s ease;
}

.ai1d-btt::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:inherit;
  background:rgba(0,0,0,.78);
  transition:background .25s ease;
}

.ai1d-btt::after{
  content:"↑";
  position:relative;
  z-index:1;
  color:#fff;
  font-size:20px;
  font-weight:700;
  line-height:1;
}

.ai1d-btt.is-visible{
  opacity:1;
  transform:translateY(0);
}

.ai1d-btt:hover::before{
  background:rgba(0,0,0,.88);
}

/* ============================================================
   30) COOKIE CONSENT
============================================================ */

#ai1-cookie-banner{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:999999;
  display:none;
}

#ai1-cookie-banner .ai1-cookie-inner{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:22px 24px;
  overflow:hidden;
  background:rgba(0,0,0,.72);
  color:rgba(255,255,255,.96);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 18px 55px rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

#ai1-cookie-banner h2,
#ai1-cookie-banner p,
#ai1-cookie-banner a{
  color:rgba(255,255,255,.96) !important;
}

#ai1-cookie-banner h2{
  margin:0 0 10px;
  font-size:22px;
  font-weight:900;
}

#ai1-cookie-banner p{
  max-width:92ch;
  margin:0 0 16px;
  font-size:14px;
  line-height:1.55;
}

#ai1-cookie-banner .ai1-cookie-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:12px;
}

#ai1-cookie-banner .ai1-cookie-btn,
#ai1-cookie-banner button{
  appearance:none;
  padding:10px 16px;
  border:0;
  color:#fff !important;
  font-size:13px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}

#ai1-cookie-banner .ai1-cookie-accept{
  background:#2a9d29;
}

#ai1-cookie-banner .ai1-cookie-reject{
  background:#555;
}

#ai1-cookie-banner button:hover{
  filter:brightness(1.08);
}

#ai1-cookie-banner .ai1-cookie-links{
  margin:0;
  font-size:13px;
}

#ai1-cookie-banner a{
  text-decoration:underline;
  text-underline-offset:3px;
}

.ai1-cookie-reset{
  color:rgba(255,255,255,.75);
  font-size:.86rem;
  text-decoration:underline;
  text-underline-offset:4px;
  cursor:pointer;
}

.ai1-cookie-reset:hover{
  color:#fff;
}

@media (max-width:560px){
  #ai1-cookie-banner{
    left:10px;
    right:10px;
    bottom:10px;
  }

  #ai1-cookie-banner .ai1-cookie-inner{
    padding:16px;
  }
}

/* ============================================================
   £100 WEBSITE DEAL MENU — MEASURED POSITIONING SAFETY
   ------------------------------------------------------------
   template.js measures the real red Deal button and stores its
   exact centre in --ai1-deal-submenu-center.
============================================================ */

@media (min-width:981px){

  .ai1-main-nav
  li.ai1-deal-menu
  > ul.mod-menu__sub{
    left:var(--ai1-deal-submenu-center,50%) !important;
    right:auto !important;

    transform:
      translateX(-50%)
      translateY(10px)
      scale(.97) !important;

    transform-origin:top center !important;
  }

  .ai1-main-nav
  li.ai1-deal-menu.is-sub-open
  > ul.mod-menu__sub,

  .ai1-main-nav
  li.ai1-deal-menu:hover
  > ul.mod-menu__sub,

  .ai1-main-nav
  li.ai1-deal-menu:focus-within
  > ul.mod-menu__sub{
    transform:
      translateX(-50%)
      translateY(0)
      scale(1) !important;
  }

}


/* Dedicated JS chevron is the only parent indicator. */
.ai1-main-nav
li.ai1-deal-menu
> a[href*="100-website"]::after{
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  animation:none !important;
}


/* Connector sits in the middle of the child panel. */
.ai1-main-nav
li.ai1-deal-menu
> ul.mod-menu__sub::before{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
}

.ai1-main-nav
li.ai1-deal-menu
> ul.mod-menu__sub::after{
  left:50% !important;
  right:auto !important;
  transform:
    translateX(-50%)
    rotate(45deg) !important;
}


/* Mobile stays in normal document flow. */
@media (max-width:980px){

  .ai1-main-nav
  li.ai1-deal-menu
  > ul.mod-menu__sub{
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }

}