/* ============================================================
   AI1DESIGN — £100 WEBSITE SHOWCASE
   ============================================================
   Complete dedicated stylesheet.

   Namespace:
   ai1hundred-*

   Features:
   - Neon glass UI
   - Animated statistics
   - Repeat scroll reveals
   - Mouse-follow spotlights
   - 3D card tilt support
   - Parallax backgrounds
   - Animated section dividers
   - Energy sweeps
   - Responsive layouts
============================================================ */


/* ============================================================
   1) VARIABLES / PAGE
============================================================ */

.ai1hundred-page{
  --ai1h-green:#39ff14;
  --ai1h-blue:#00c8ff;
  --ai1h-cyan:#00f2ff;
  --ai1h-orange:#ff9d00;
  --ai1h-pink:#ff2e88;
  --ai1h-purple:#9a4dff;

  --ai1h-text:#fff;
  --ai1h-muted:rgba(255,255,255,.68);
  --ai1h-border:rgba(255,255,255,.14);

  --ai1h-bg:#030708;
  --ai1h-bg2:#07100d;

  --ai1h-scroll:0px;

  position:relative;
  width:100%;
  overflow:hidden;

  color:var(--ai1h-text);

  background:
    radial-gradient(circle at 10% 15%,rgba(57,255,20,.08),transparent 25%),
    radial-gradient(circle at 90% 35%,rgba(0,200,255,.08),transparent 25%),
    #030708;

  isolation:isolate;
}


/* ============================================================
   2) RESET
============================================================ */

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

.ai1hundred-page h1,
.ai1hundred-page h2,
.ai1hundred-page h3,
.ai1hundred-page p{
  margin-top:0;
}

.ai1hundred-page h1,
.ai1hundred-page h2,
.ai1hundred-page h3{
  color:#fff;
}

.ai1hundred-page p{
  line-height:1.75;
}

.ai1hundred-container{
  position:relative;
  z-index:2;

  width:min(1180px,calc(100% - 3rem));
  margin-inline:auto;
}


/* ============================================================
   3) COMMON SECTIONS + FIXED PARALLAX BACKGROUNDS
   ============================================================
   TRUE "STATIC" PARALLAX:
   - Background artwork is fixed to the viewport on desktop.
   - Page content scrolls over it.
   - Each section has its own image.
   - Dark glazing + depth layers push the content visually forward.
============================================================ */

.ai1hundred-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  padding:clamp(5.5rem,8vw,8rem) 0;

  background-color:#030708;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
}


/* ------------------------------------------------------------
   Existing empty parallax elements are no longer moved.
   We keep them as decorative depth/glow layers.
------------------------------------------------------------ */

.ai1hundred-section-parallax,
.ai1hundred-final-parallax{
  position:absolute;
  inset:0;

  z-index:0;

  pointer-events:none;

  transform:none !important;

  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(57,255,20,.08),
      transparent 30%
    ),
    radial-gradient(
      circle at 86% 74%,
      rgba(0,200,255,.08),
      transparent 32%
    );

  opacity:.9;
}


/* ------------------------------------------------------------
   CINEMATIC DARK GLASS VEIL
   This sits between the image and the foreground content.
------------------------------------------------------------ */

.ai1hundred-section::before,
.ai1hundred-final::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:1;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(1,4,5,.70) 0%,
      rgba(2,7,7,.54) 35%,
      rgba(2,7,7,.58) 68%,
      rgba(1,4,5,.74) 100%
    ),
    radial-gradient(
      ellipse at 50% 48%,
      rgba(0,0,0,.06) 0%,
      rgba(0,0,0,.20) 48%,
      rgba(0,0,0,.48) 100%
    );
}


/* ------------------------------------------------------------
   SUBTLE EDGE GLOW / DEPTH LAYER
   Helps separate foreground panels from the photographic image.
------------------------------------------------------------ */

.ai1hundred-section::after,
.ai1hundred-final::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:1;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 8% 50%,
      rgba(57,255,20,.10),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 50%,
      rgba(255,157,0,.07),
      transparent 28%
    );

  mix-blend-mode:screen;
  opacity:.75;
}


/* ------------------------------------------------------------
   CONTENT PLANE
   Gives everything above the image a stronger sense of depth.
------------------------------------------------------------ */

.ai1hundred-section > .ai1hundred-container,
.ai1hundred-final > .ai1hundred-container{
  position:relative;
  z-index:3;
}


/* ------------------------------------------------------------
   INDIVIDUAL SECTION BACKGROUNDS
------------------------------------------------------------ */

.ai1hundred-intro{
  background-image:
    url("/templates/ai1design/images/parallax/hundred-website/1.jpg");
}

.ai1hundred-included{
  background-image:
    url("/templates/ai1design/images/parallax/hundred-website/2.jpg");
}

.ai1hundred-audience{
  background-image:
    url("/templates/ai1design/images/parallax/hundred-website/3.jpg");
}

.ai1hundred-compare{
  background-image:
    url("/templates/ai1design/images/parallax/hundred-website/4.jpg");
}

.ai1hundred-process{
  background-image:
    url("/templates/ai1design/images/parallax/hundred-website/5.jpg");
}

.ai1hundred-catch{
  background-image:
    url("/templates/ai1design/images/parallax/hundred-website/6.jpg");
}

.ai1hundred-extras{
  background-image:
    url("/templates/ai1design/images/parallax/hundred-website/2.jpg");
  background-position:62% center;
}

.ai1hundred-faq{
  background-image:
    url("/templates/ai1design/images/parallax/hundred-website/4.jpg");
  background-position:40% center;
}


/* ------------------------------------------------------------
   FINAL CTA — FIXED BACKGROUND TOO
------------------------------------------------------------ */

.ai1hundred-final{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  padding:clamp(6rem,10vw,10rem) 0;

  background-color:#020405;
  background-image:
    url("/templates/ai1design/images/parallax/hundred-website/6.jpg");

  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
}


/* ------------------------------------------------------------
   FOREGROUND POP — SECTION HEADINGS
------------------------------------------------------------ */

.ai1hundred-heading{
  position:relative;

  padding:clamp(1.4rem,3vw,2rem);

  border:1px solid rgba(255,255,255,.10);
  border-radius:28px;

  background:
    linear-gradient(
      145deg,
      rgba(5,10,10,.76),
      rgba(3,8,8,.58)
    );

  box-shadow:
    0 22px 65px rgba(0,0,0,.42),
    0 0 35px rgba(57,255,20,.04),
    inset 0 1px 0 rgba(255,255,255,.055);

  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
}


/* ------------------------------------------------------------
   FOREGROUND POP — ALL MAJOR CARDS / PANELS
------------------------------------------------------------ */

.ai1hundred-highlight,
.ai1hundred-stat,
.ai1hundred-feature,
.ai1hundred-audience-card,
.ai1hundred-compare-card,
.ai1hundred-process-step,
.ai1hundred-catch-card,
.ai1hundred-extra-card,
.ai1hundred-faq-item,
.ai1hundred-final-card{
  position:relative;

  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(255,255,255,.075),
      transparent 26%
    ),
    linear-gradient(
      145deg,
      rgba(5,12,11,.91),
      rgba(2,7,7,.86)
    );

  border-color:rgba(255,255,255,.18);

  box-shadow:
    0 24px 70px rgba(0,0,0,.48),
    0 8px 24px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.07);

  backdrop-filter:blur(22px) saturate(1.12);
  -webkit-backdrop-filter:blur(22px) saturate(1.12);
}


/* Extra halo behind the major panels */

.ai1hundred-highlight::before,
.ai1hundred-catch-card::before,
.ai1hundred-final-card::after{
  content:"";

  position:absolute;
  inset:-18px;

  z-index:-1;

  border-radius:inherit;

  background:
    radial-gradient(
      ellipse at center,
      rgba(57,255,20,.08),
      rgba(0,200,255,.045) 42%,
      transparent 72%
    );

  filter:blur(22px);

  pointer-events:none;
}


/* ------------------------------------------------------------
   STRONGER CARD HOVER LIFT
------------------------------------------------------------ */

.ai1hundred-magnetic-card:hover{
  --ai1h-lift:-12px;

  border-color:rgba(57,255,20,.38);

  box-shadow:
    0 42px 105px rgba(0,0,0,.58),
    0 0 36px rgba(57,255,20,.11),
    0 0 65px rgba(0,200,255,.07),
    inset 0 1px 0 rgba(255,255,255,.10);
}


/* ------------------------------------------------------------
   MOBILE / IOS
   Fixed backgrounds are unreliable and can be expensive on mobile,
   so switch to normal cover backgrounds there.
------------------------------------------------------------ */

@media (max-width:900px), (hover:none) and (pointer:coarse){

  .ai1hundred-section,
  .ai1hundred-final{
    background-attachment:scroll;
  }

  .ai1hundred-section::before,
  .ai1hundred-final::before{
    background:
      linear-gradient(
        180deg,
        rgba(1,4,5,.76),
        rgba(2,7,7,.62) 45%,
        rgba(1,4,5,.78)
      );
  }

}


/* ------------------------------------------------------------
   REDUCED MOTION
------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){

  .ai1hundred-section,
  .ai1hundred-final{
    background-attachment:scroll;
  }

  .ai1hundred-section-parallax,
  .ai1hundred-final-parallax{
    transform:none !important;
  }

}


/* ============================================================
   4) TYPOGRAPHY
============================================================ */

.ai1hundred-kicker{
  margin-bottom:.85rem;

  color:var(--ai1h-green);

  font-size:.78rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;

  text-shadow:
    0 0 18px rgba(57,255,20,.28);
}

.ai1hundred-heading{
  width:min(780px,100%);
  margin:0 auto clamp(3rem,5vw,4.5rem);

  text-align:center;
}

.ai1hundred-heading h2{
  margin-bottom:1rem;

  font-size:clamp(2rem,4vw,3.7rem);
  line-height:1.04;
  letter-spacing:-.045em;
}

.ai1hundred-heading > p:last-child{
  margin-bottom:0;

  color:var(--ai1h-muted);

  font-size:clamp(1rem,1.5vw,1.15rem);
}


/* ============================================================
   5) BUTTONS
============================================================ */

.ai1hundred-btn{
  position:relative;
  overflow:hidden;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;

  min-height:56px;

  padding:.95rem 1.55rem;

  border-radius:999px;

  font-size:.95rem;
  font-weight:800;
  line-height:1;

  text-decoration:none;

  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    box-shadow .3s ease,
    border-color .3s ease;

  isolation:isolate;
}

.ai1hundred-btn::before{
  content:"";

  position:absolute;

  top:-80%;
  left:-80%;

  width:45%;
  height:260%;

  background:
    linear-gradient(
      100deg,
      transparent,
      rgba(255,255,255,.58),
      transparent
    );

  transform:rotate(18deg);

  transition:left .7s ease;

  z-index:-1;
}

.ai1hundred-btn:hover::before{
  left:150%;
}

.ai1hundred-btn:hover{
  transform:translateY(-4px) scale(1.025);
}

.ai1hundred-btn-primary{
  border:1px solid rgba(57,255,20,.5);

  background:
    linear-gradient(
      120deg,
      #66ff27,
      #39ff14 30%,
      #00c8ff 100%
    );

  color:#020602;

  box-shadow:
    0 0 0 1px rgba(57,255,20,.08),
    0 14px 35px rgba(57,255,20,.2),
    0 12px 35px rgba(0,200,255,.12);
}

.ai1hundred-btn-primary:hover{
  box-shadow:
    0 0 28px rgba(57,255,20,.3),
    0 20px 48px rgba(0,200,255,.18);
}

.ai1hundred-btn-secondary{
  border:1px solid rgba(255,255,255,.22);

  background:
    rgba(255,255,255,.065);

  color:#fff;

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.ai1hundred-btn-secondary:hover{
  border-color:rgba(0,200,255,.4);

  box-shadow:
    0 0 25px rgba(0,200,255,.12);
}

.ai1hundred-btn-large{
  min-height:64px;

  padding:1.1rem 2rem;

  font-size:1.04rem;
}

.ai1hundred-btn-arrow{
  font-size:1.2em;

  transition:transform .25s ease;
}

.ai1hundred-btn:hover .ai1hundred-btn-arrow{
  transform:translateX(5px);
}


/* ============================================================
   6) HERO
============================================================ */

.ai1hundred-hero{
  position:relative;

  display:grid;
  place-items:center;

  min-height:min(950px,100svh);

  overflow:hidden;

  background:#010304;

  isolation:isolate;

  perspective:1400px;
}

.ai1hundred-hero-video{
  position:absolute;

  left:-5%;
  top:-5%;

  z-index:0;

  width:110%;
  height:110%;

  object-fit:cover;

  opacity:.6;

  transform:
    translate3d(
      0,
      calc(var(--ai1h-scroll) * .075),
      0
    )
    scale(1.07);

  will-change:transform;
}

.ai1hundred-hero-overlay{
  position:absolute;
  inset:0;

  z-index:1;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.5),
      rgba(0,0,0,.35) 45%,
      #030708 100%
    ),
    radial-gradient(circle at 15% 30%,rgba(57,255,20,.22),transparent 32%),
    radial-gradient(circle at 85% 32%,rgba(0,200,255,.2),transparent 34%);
}

.ai1hundred-hero-grid{
  position:absolute;
  inset:0;

  z-index:1;

  opacity:.08;

  background-image:
    linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px);

  background-size:70px 70px;

  transform:
    perspective(900px)
    rotateX(65deg)
    scale(1.5)
    translateY(30%);

  transform-origin:center bottom;

  pointer-events:none;
}

.ai1hundred-hero-orb{
  position:absolute;

  z-index:1;

  width:380px;
  height:380px;

  border-radius:50%;

  filter:blur(90px);

  opacity:.13;

  pointer-events:none;
}

.ai1hundred-hero-orb--one{
  left:-150px;
  bottom:10%;

  background:var(--ai1h-green);

  animation:ai1h-orb-one 8s ease-in-out infinite;
}

.ai1hundred-hero-orb--two{
  right:-150px;
  top:15%;

  background:var(--ai1h-blue);

  animation:ai1h-orb-two 10s ease-in-out infinite;
}

.ai1hundred-hero-inner{
  position:relative;

  z-index:3;

  width:min(1180px,calc(100% - 3rem));

  margin-inline:auto;

  padding:
    clamp(7rem,11vw,10rem)
    0
    clamp(5rem,8vw,8rem);
}

.ai1hundred-hero-card{
  position:relative;

  width:min(900px,100%);

  margin-inline:auto;

  padding:clamp(2.2rem,5vw,4.5rem);

  border:1px solid rgba(255,255,255,.16);

  border-radius:clamp(24px,4vw,40px);

  background:
    linear-gradient(
      145deg,
      rgba(7,12,13,.82),
      rgba(7,12,13,.58)
    );

  box-shadow:
    0 40px 110px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.06);

  text-align:center;

  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);
}

.ai1hundred-hero-card::before{
  content:"";

  position:absolute;

  inset:-1px;

  z-index:-1;

  border-radius:inherit;

  padding:1px;

  background:
    conic-gradient(
      from var(--ai1h-border-angle),
      transparent,
      var(--ai1h-green),
      transparent 28%,
      var(--ai1h-blue),
      transparent 55%,
      var(--ai1h-orange),
      transparent 82%,
      var(--ai1h-green)
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite:xor;
  mask-composite:exclude;

  opacity:.7;

  animation:ai1h-border-spin 8s linear infinite;

  pointer-events:none;
}

.ai1hundred-hero-card-glow{
  position:absolute;

  left:15%;
  right:15%;
  bottom:-2px;

  height:3px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--ai1h-green),
      var(--ai1h-blue),
      transparent
    );

  box-shadow:
    0 0 30px rgba(57,255,20,.35),
    0 0 45px rgba(0,200,255,.25);

  animation:ai1h-energy-width 4s ease-in-out infinite;
}

.ai1hundred-hero-card h1{
  max-width:830px;

  margin:0 auto 1.5rem;

  font-size:clamp(3rem,7vw,6.4rem);
  line-height:.94;

  letter-spacing:-.065em;
}

.ai1hundred-hero-card h1 span{
  display:block;

  margin-top:.18em;

  background:
    linear-gradient(
      90deg,
      #65ff30,
      var(--ai1h-green),
      #71f5ff,
      var(--ai1h-blue)
    );

  background-size:200% auto;

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;

  animation:ai1h-text-shift 5s linear infinite;

  filter:
    drop-shadow(0 0 22px rgba(57,255,20,.14));
}

.ai1hundred-hero-lead{
  width:min(720px,100%);

  margin:0 auto 2.1rem;

  color:rgba(255,255,255,.8);

  font-size:clamp(1rem,2vw,1.25rem);
}

.ai1hundred-price-badge{
  position:relative;

  display:inline-flex;
  align-items:flex-start;

  margin-bottom:2rem;
}

.ai1hundred-price-badge::before{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:190px;
  height:190px;

  transform:translate(-50%,-50%);

  border-radius:50%;

  border:1px solid rgba(57,255,20,.1);

  box-shadow:
    0 0 50px rgba(57,255,20,.1),
    inset 0 0 50px rgba(0,200,255,.05);

  animation:ai1h-price-ring 3s ease-in-out infinite;
}

.ai1hundred-price-currency{
  position:relative;
  z-index:1;

  margin:.55rem .1rem 0 0;

  color:var(--ai1h-green);

  font-size:clamp(1.5rem,2vw,2rem);
  font-weight:900;
}

.ai1hundred-price-number{
  position:relative;
  z-index:1;

  color:#fff;

  font-size:clamp(4.7rem,10vw,8rem);
  font-weight:900;
  line-height:.8;

  letter-spacing:-.07em;

  animation:ai1h-price-glow 3s ease-in-out infinite;
}

.ai1hundred-hero-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;

  gap:.9rem;
}

.ai1hundred-hero-trust{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;

  gap:.65rem 1.2rem;

  margin-top:2.4rem;

  color:rgba(255,255,255,.65);

  font-size:.84rem;
  font-weight:700;
}

.ai1hundred-hero-trust span{
  display:inline-flex;
  align-items:center;

  gap:.5rem;
}

.ai1hundred-hero-trust span::before{
  content:"";

  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--ai1h-green);

  box-shadow:
    0 0 12px rgba(57,255,20,.8);

  animation:ai1h-dot-pulse 2.3s ease-in-out infinite;
}


/* ============================================================
   7) GENERIC INTERACTIVE CARDS
============================================================ */

.ai1hundred-magnetic-card{
  --ai1h-rx:0deg;
  --ai1h-ry:0deg;
  --ai1h-lift:0px;
  --ai1h-reveal-y:0px;
  --ai1h-scale:1;

  transform:
    perspective(1100px)
    translate3d(
      0,
      calc(var(--ai1h-reveal-y) + var(--ai1h-lift)),
      0
    )
    rotateX(var(--ai1h-rx))
    rotateY(var(--ai1h-ry))
    scale(var(--ai1h-scale));

  transform-style:preserve-3d;

  transition:
    transform .2s ease-out,
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;

  will-change:transform;
}

.ai1hundred-magnetic-card:hover{
  --ai1h-lift:-8px;

  border-color:rgba(57,255,20,.32);

  box-shadow:
    0 35px 80px rgba(0,0,0,.4),
    0 0 35px rgba(57,255,20,.08),
    0 0 50px rgba(0,200,255,.06);
}

.ai1hundred-card-spotlight{
  position:absolute;

  inset:0;

  z-index:0;

  border-radius:inherit;

  opacity:0;

  background:
    radial-gradient(
      400px circle at var(--ai1h-card-x,50%) var(--ai1h-card-y,50%),
      rgba(255,255,255,.14),
      rgba(57,255,20,.045) 25%,
      transparent 55%
    );

  pointer-events:none;

  transition:opacity .3s ease;
}

.ai1hundred-magnetic-card:hover
.ai1hundred-card-spotlight{
  opacity:1;
}

.ai1hundred-magnetic-card > *:not(.ai1hundred-card-spotlight):not(.ai1hundred-card-energy):not(.ai1hundred-stat-glow):not(.ai1hundred-stat-energy):not(.ai1hundred-featured-energy):not(.ai1hundred-catch-sweep):not(.ai1hundred-final-energy){
  position:relative;
  z-index:2;
}


/* ============================================================
   8) HIGHLIGHT
============================================================ */


.ai1hundred-highlight{
  position:relative;
  overflow:hidden;

  display:grid;

  grid-template-columns:
    minmax(190px,.65fr)
    minmax(0,2fr);

  align-items:center;

  gap:clamp(2rem,4vw,4rem);

  padding:clamp(2rem,5vw,4rem);

  border:1px solid rgba(255,255,255,.13);

  border-radius:30px;

  background:
    linear-gradient(
      135deg,
      rgba(57,255,20,.08),
      rgba(0,200,255,.055),
      rgba(255,255,255,.04)
    );

  box-shadow:
    0 30px 80px rgba(0,0,0,.32);
}

.ai1hundred-highlight::after{
  content:"";

  position:absolute;

  left:-35%;
  top:-70%;

  width:30%;
  height:240%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.1),
      transparent
    );

  transform:rotate(15deg);

  animation:ai1h-card-sweep 8s ease-in-out infinite;

  pointer-events:none;
}

.ai1hundred-highlight-price{
  color:#fff;

  font-size:clamp(4.5rem,10vw,8rem);
  font-weight:900;
  line-height:.85;
  letter-spacing:-.08em;

  text-align:center;

  text-shadow:
    0 0 35px rgba(57,255,20,.17);

  animation:ai1h-price-glow 3s ease-in-out infinite;
}

.ai1hundred-highlight-content h3{
  margin-bottom:1rem;

  font-size:clamp(1.6rem,3vw,2.6rem);
  line-height:1.05;

  letter-spacing:-.04em;
}

.ai1hundred-highlight-content p{
  margin-bottom:0;

  color:var(--ai1h-muted);
}


/* ============================================================
   9) STATS — MAJOR WOW
============================================================ */

.ai1hundred-stats{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:1rem;

  margin-top:1.5rem;
}

.ai1hundred-stat{
  position:relative;
  overflow:hidden;

  min-height:190px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:1.75rem;

  border:1px solid rgba(255,255,255,.15);

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      rgba(14,20,20,.92),
      rgba(5,9,9,.9)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 22px 50px rgba(0,0,0,.28);

  text-align:center;

  isolation:isolate;
}

.ai1hundred-stat:nth-child(1){
  --ai1h-stat-colour:#79ff25;
}

.ai1hundred-stat:nth-child(2){
  --ai1h-stat-colour:#00d9ff;
}

.ai1hundred-stat:nth-child(3){
  --ai1h-stat-colour:#ffc400;
}

.ai1hundred-stat:nth-child(4){
  --ai1h-stat-colour:#79ff25;
}

.ai1hundred-stat::before{
  content:"";

  position:absolute;

  inset:-1px;

  z-index:-1;

  border-radius:inherit;

  padding:1px;

  background:
    conic-gradient(
      from var(--ai1h-border-angle),
      transparent 0deg,
      var(--ai1h-stat-colour) 55deg,
      transparent 110deg,
      transparent 250deg,
      var(--ai1h-stat-colour) 310deg,
      transparent 360deg
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite:xor;
  mask-composite:exclude;

  opacity:.55;

  animation:ai1h-border-spin 7s linear infinite;
}

.ai1hundred-stat-glow{
  position:absolute;

  left:10%;
  right:10%;
  bottom:-35%;

  height:80%;

  border-radius:50%;

  background:
    radial-gradient(
      ellipse,
      color-mix(in srgb,var(--ai1h-stat-colour) 35%,transparent),
      transparent 68%
    );

  filter:blur(22px);

  opacity:.5;

  animation:ai1h-stat-glow 3.6s ease-in-out infinite;
}

.ai1hundred-stat-energy{
  position:absolute;

  left:-30%;
  bottom:22px;

  width:160%;
  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--ai1h-stat-colour),
      white,
      var(--ai1h-stat-colour),
      transparent
    );

  background-size:200% 100%;

  box-shadow:
    0 0 14px var(--ai1h-stat-colour);

  animation:ai1h-energy-run 3s linear infinite;
}

.ai1hundred-stat-number{
  position:relative;

  margin-bottom:.5rem;

  color:var(--ai1h-stat-colour);

  font-size:clamp(2.7rem,5vw,4.4rem);
  font-weight:900;
  line-height:1;

  letter-spacing:-.055em;

  text-shadow:
    0 0 10px var(--ai1h-stat-colour),
    0 0 28px color-mix(in srgb,var(--ai1h-stat-colour) 55%,transparent);

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    filter .35s ease;
}

.ai1hundred-stat:hover .ai1hundred-stat-number{
  transform:translateY(-5px) scale(1.08);

  filter:brightness(1.2);
}

.ai1hundred-stat-label{
  position:relative;
  z-index:2;

  color:rgba(255,255,255,.67);

  font-size:.94rem;
  font-weight:600;
}

.ai1hundred-stat-pulse{
  position:absolute;

  width:80px;
  height:80px;

  left:50%;
  bottom:-42px;

  transform:translateX(-50%);

  border:1px solid var(--ai1h-stat-colour);
  border-radius:50%;

  opacity:0;

  animation:ai1h-stat-pulse 2.8s ease-out infinite;
}

.ai1hundred-stat.is-stat-active{
  animation:ai1h-stat-arrive .7s cubic-bezier(.16,.8,.25,1);
}


/* ============================================================
   10) FEATURE CARDS
============================================================ */


.ai1hundred-feature-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:1rem;
}

.ai1hundred-feature{
  position:relative;
  overflow:hidden;

  min-height:270px;

  padding:1.7rem;

  border:1px solid rgba(255,255,255,.13);

  border-radius:22px;

  background:
    linear-gradient(
      145deg,
      rgba(12,19,18,.92),
      rgba(4,8,8,.92)
    );

  box-shadow:
    0 20px 48px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.ai1hundred-feature:nth-child(3n + 1){
  --ai1h-card-colour:var(--ai1h-green);
}

.ai1hundred-feature:nth-child(3n + 2){
  --ai1h-card-colour:var(--ai1h-blue);
}

.ai1hundred-feature:nth-child(3n){
  --ai1h-card-colour:var(--ai1h-orange);
}

.ai1hundred-feature::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--ai1h-card-colour),
      transparent
    );

  transform:scaleX(.25);

  opacity:.4;

  transition:
    transform .4s ease,
    opacity .4s ease;

  box-shadow:
    0 0 12px var(--ai1h-card-colour);
}

.ai1hundred-feature:hover::after{
  transform:scaleX(.9);
  opacity:.9;
}

.ai1hundred-card-energy{
  position:absolute;

  right:-75px;
  bottom:-75px;

  width:160px;
  height:160px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      color-mix(in srgb,var(--ai1h-card-colour) 22%,transparent),
      transparent 67%
    );

  transition:
    transform .5s ease,
    opacity .5s ease;

  opacity:.55;
}

.ai1hundred-feature:hover .ai1hundred-card-energy{
  transform:scale(1.65);

  opacity:.9;
}

.ai1hundred-feature-icon{
  display:grid;
  place-items:center;

  width:58px;
  height:58px;

  margin-bottom:1.4rem;

  border:1px solid var(--ai1h-card-colour);

  border-radius:17px;

  background:
    radial-gradient(
      circle,
      color-mix(in srgb,var(--ai1h-card-colour) 18%,transparent),
      rgba(0,0,0,.25)
    );

  color:var(--ai1h-card-colour);

  font-weight:900;

  box-shadow:
    0 0 18px color-mix(in srgb,var(--ai1h-card-colour) 28%,transparent),
    inset 0 0 18px color-mix(in srgb,var(--ai1h-card-colour) 12%,transparent);

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease;
}

.ai1hundred-feature:hover .ai1hundred-feature-icon{
  transform:
    translateZ(30px)
    scale(1.08)
    rotate(-3deg);

  box-shadow:
    0 0 30px color-mix(in srgb,var(--ai1h-card-colour) 42%,transparent),
    inset 0 0 20px color-mix(in srgb,var(--ai1h-card-colour) 18%,transparent);
}

.ai1hundred-feature h3{
  margin-bottom:.7rem;

  font-size:1.16rem;
}

.ai1hundred-feature p{
  margin-bottom:0;

  color:var(--ai1h-muted);

  font-size:.94rem;
}


/* ============================================================
   11) AUDIENCE CARDS
============================================================ */


.ai1hundred-audience-grid{
  display:grid;

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

  gap:1rem;
}

.ai1hundred-audience-card{
  position:relative;
  overflow:hidden;

  min-height:145px;

  padding:1.6rem;

  border:1px solid rgba(255,255,255,.13);

  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      rgba(12,20,18,.9),
      rgba(4,9,8,.9)
    );
}

.ai1hundred-audience-card::after{
  content:"";

  position:absolute;

  left:0;
  bottom:0;

  width:0;
  height:2px;

  background:
    linear-gradient(
      90deg,
      var(--ai1h-green),
      var(--ai1h-blue)
    );

  box-shadow:
    0 0 16px rgba(57,255,20,.4);

  transition:width .45s ease;
}

.ai1hundred-audience-card:hover::after{
  width:100%;
}

.ai1hundred-audience-card strong{
  display:block;

  margin-bottom:.45rem;

  color:#fff;

  font-size:1.08rem;
}

.ai1hundred-audience-card span{
  color:var(--ai1h-muted);

  line-height:1.65;
}


/* ============================================================
   12) COMPARISON
============================================================ */


.ai1hundred-compare-grid{
  display:grid;

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

  gap:1.25rem;

  align-items:stretch;
}

.ai1hundred-compare-card{
  position:relative;
  overflow:hidden;

  padding:2rem;

  border:1px solid rgba(255,255,255,.14);

  border-radius:26px;

  background:
    linear-gradient(
      145deg,
      rgba(15,20,19,.94),
      rgba(4,8,8,.92)
    );

  box-shadow:
    0 24px 60px rgba(0,0,0,.25);
}

.ai1hundred-compare-label{
  margin-bottom:.5rem;

  color:var(--ai1h-muted);

  font-size:.76rem;
  font-weight:800;

  letter-spacing:.12em;
  text-transform:uppercase;
}

.ai1hundred-compare-card h3{
  margin-bottom:1.5rem;

  font-size:clamp(2rem,4vw,3.4rem);

  letter-spacing:-.055em;
}

.ai1hundred-compare-card ul{
  display:grid;

  gap:.8rem;

  margin:0;
  padding:0;

  list-style:none;
}

.ai1hundred-compare-card li{
  position:relative;

  padding-left:1.4rem;

  color:var(--ai1h-muted);

  line-height:1.55;
}

.ai1hundred-compare-card li::before{
  content:"";

  position:absolute;

  left:0;
  top:.68em;

  width:7px;
  height:7px;

  border-radius:50%;

  background:rgba(255,255,255,.45);
}

.ai1hundred-compare-featured{
  border-color:rgba(57,255,20,.38);

  background:
    linear-gradient(
      145deg,
      rgba(57,255,20,.12),
      rgba(0,200,255,.07),
      rgba(4,8,8,.94)
    );

  box-shadow:
    0 30px 75px rgba(0,0,0,.35),
    0 0 40px rgba(57,255,20,.08);

  animation:
    ai1h-featured-breathe 4s ease-in-out infinite;
}

.ai1hundred-compare-featured li::before{
  background:var(--ai1h-green);

  box-shadow:
    0 0 10px rgba(57,255,20,.7);
}

.ai1hundred-featured-energy{
  position:absolute;

  inset:-30%;

  background:
    conic-gradient(
      from 0deg,
      transparent,
      rgba(57,255,20,.08),
      transparent 30%,
      rgba(0,200,255,.07),
      transparent 60%,
      rgba(57,255,20,.06),
      transparent
    );

  animation:ai1h-rotate 12s linear infinite;

  pointer-events:none;
}

.ai1hundred-best-choice{
  position:absolute;

  top:15px;
  right:18px;

  padding:.45rem .8rem;

  border-radius:999px;

  background:
    linear-gradient(
      120deg,
      var(--ai1h-green),
      var(--ai1h-blue)
    );

  color:#020502;

  font-size:.68rem;
  font-weight:900;

  letter-spacing:.08em;
  text-transform:uppercase;

  box-shadow:
    0 0 24px rgba(57,255,20,.25);

  animation:
    ai1h-badge-float 3s ease-in-out infinite;
}


/* ============================================================
   13) PROCESS
============================================================ */


.ai1hundred-process-grid{
  position:relative;

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:1rem;
}

.ai1hundred-process-grid::before{
  content:"";

  position:absolute;

  left:8%;
  right:8%;
  top:26px;

  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--ai1h-green),
      var(--ai1h-blue),
      var(--ai1h-orange),
      var(--ai1h-pink),
      transparent
    );

  background-size:200% 100%;

  box-shadow:
    0 0 15px rgba(57,255,20,.2);

  animation:
    ai1h-energy-run 3.5s linear infinite;
}

.ai1hundred-process-step{
  position:relative;
  overflow:hidden;

  z-index:1;

  min-height:240px;

  padding:1.8rem;

  border:1px solid rgba(255,255,255,.13);

  border-radius:21px;

  background:
    linear-gradient(
      145deg,
      rgba(13,20,19,.94),
      rgba(4,8,8,.94)
    );
}

.ai1hundred-process-number{
  display:grid;
  place-items:center;

  width:52px;
  height:52px;

  margin-bottom:1.35rem;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      var(--ai1h-green),
      var(--ai1h-blue)
    );

  color:#020503;

  font-weight:900;

  box-shadow:
    0 0 25px rgba(57,255,20,.22);

  animation:
    ai1h-number-pulse 3s ease-in-out infinite;
}

.ai1hundred-process-step h3{
  margin-bottom:.7rem;

  font-size:1.12rem;
}

.ai1hundred-process-step p{
  margin-bottom:0;

  color:var(--ai1h-muted);

  font-size:.93rem;
}


/* ============================================================
   14) CATCH
============================================================ */


.ai1hundred-catch-card{
  position:relative;
  overflow:hidden;

  display:grid;

  grid-template-columns:minmax(220px,.7fr) minmax(0,2fr);

  gap:clamp(2rem,5vw,5rem);

  align-items:center;

  padding:clamp(2.5rem,6vw,5rem);

  border:1px solid rgba(255,157,0,.25);

  border-radius:36px;

  background:
    radial-gradient(circle at 12% 50%,rgba(255,157,0,.13),transparent 35%),
    linear-gradient(
      145deg,
      rgba(15,19,16,.95),
      rgba(5,9,8,.92)
    );

  box-shadow:
    0 34px 90px rgba(0,0,0,.35);
}

.ai1hundred-catch-sweep{
  position:absolute;

  top:-80%;
  left:-45%;

  width:22%;
  height:260%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.1),
      transparent
    );

  transform:rotate(16deg);

  animation:
    ai1h-card-sweep 8s ease-in-out infinite;
}

.ai1hundred-catch-price{
  color:#fff;

  font-size:clamp(4.5rem,10vw,8rem);
  font-weight:900;
  line-height:.85;
  letter-spacing:-.08em;

  text-align:center;

  text-shadow:
    0 0 40px rgba(255,157,0,.2);

  animation:
    ai1h-price-glow-orange 3.3s ease-in-out infinite;
}

.ai1hundred-catch-content h2{
  margin-bottom:1rem;

  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.05;

  letter-spacing:-.045em;
}

.ai1hundred-catch-content p{
  color:var(--ai1h-muted);
}

.ai1hundred-catch-content p:last-child{
  margin-bottom:0;
}


/* ============================================================
   15) EXTRAS
============================================================ */


.ai1hundred-extra-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:1rem;
}

.ai1hundred-extra-card{
  position:relative;
  overflow:hidden;

  min-height:165px;

  padding:1.6rem;

  border:1px solid rgba(255,255,255,.13);

  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      rgba(13,19,18,.94),
      rgba(4,8,8,.94)
    );
}

.ai1hundred-extra-card::after{
  content:"";

  position:absolute;

  right:-50px;
  bottom:-50px;

  width:115px;
  height:115px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(0,200,255,.18),
      transparent 70%
    );

  transition:transform .45s ease;
}

.ai1hundred-extra-card:hover::after{
  transform:scale(1.8);
}

.ai1hundred-extra-card h3{
  margin-bottom:.55rem;

  font-size:1.06rem;
}

.ai1hundred-extra-card p{
  margin-bottom:0;

  color:var(--ai1h-muted);

  font-size:.91rem;
}


/* ============================================================
   16) FAQ
============================================================ */


.ai1hundred-faq-container{
  max-width:980px;
}

.ai1hundred-faq-list{
  display:grid;

  gap:.8rem;
}

.ai1hundred-faq-item{
  position:relative;
  overflow:hidden;

  border:1px solid rgba(255,255,255,.13);

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      rgba(13,19,18,.92),
      rgba(5,9,9,.92)
    );

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.ai1hundred-faq-item:hover{
  transform:translateX(6px);

  border-color:rgba(57,255,20,.3);

  box-shadow:
    0 15px 35px rgba(0,0,0,.25),
    0 0 24px rgba(57,255,20,.05);
}

.ai1hundred-faq-item.is-open{
  border-color:rgba(0,200,255,.34);

  box-shadow:
    0 18px 45px rgba(0,0,0,.3),
    0 0 30px rgba(0,200,255,.06);
}

.ai1hundred-faq-question{
  display:flex;

  width:100%;

  align-items:center;
  justify-content:space-between;

  gap:1.5rem;

  padding:1.3rem 1.4rem;

  border:0;

  background:transparent;

  color:#fff;

  font:inherit;
  font-weight:800;

  text-align:left;

  cursor:pointer;
}

.ai1hundred-faq-icon{
  flex:0 0 auto;

  display:grid;
  place-items:center;

  width:36px;
  height:36px;

  border:1px solid rgba(57,255,20,.4);
  border-radius:50%;

  background:rgba(57,255,20,.07);

  color:var(--ai1h-green);

  box-shadow:
    0 0 15px rgba(57,255,20,.08);

  transition:
    transform .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.ai1hundred-faq-item.is-open .ai1hundred-faq-icon{
  transform:rotate(45deg);

  background:rgba(0,200,255,.1);

  box-shadow:
    0 0 22px rgba(0,200,255,.12);
}

.ai1hundred-faq-answer{
  display:grid;

  grid-template-rows:0fr;

  transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1);
}

.ai1hundred-faq-item.is-open .ai1hundred-faq-answer{
  grid-template-rows:1fr;
}

.ai1hundred-faq-answer-inner{
  overflow:hidden;
}

.ai1hundred-faq-answer p{
  margin:0;

  padding:0 1.4rem 1.4rem;

  color:var(--ai1h-muted);
}


/* ============================================================
   17) FULL-WIDTH SECTION DIVIDERS
   ============================================================
   More obvious than the original version:
   - full viewport width
   - brighter animated energy rail
   - larger glowing centre core
   - stronger dark separation strip
   - works between every major section
============================================================ */

.ai1hundred-divider{
  position:relative;
  z-index:20;

  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;

  width:100vw;
  max-width:none;
  height:112px;

  /*
   * Escape any centred Joomla/content wrapper so the divider
   * genuinely reaches both sides of the viewport.
   */
  margin:-56px calc(50% - 50vw);

  padding:0 clamp(1rem,3vw,3.5rem);

  overflow:visible;

  pointer-events:none;

  isolation:isolate;
}


/* Dark separator band behind the energy line */

.ai1hundred-divider::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:50%;

  height:56px;

  transform:translateY(-50%);

  z-index:-2;

  background:
    linear-gradient(
      90deg,
      rgba(2,6,7,.92),
      rgba(4,12,11,.80) 20%,
      rgba(4,12,11,.76) 50%,
      rgba(4,12,11,.80) 80%,
      rgba(2,6,7,.92)
    );

  border-top:1px solid rgba(255,255,255,.035);
  border-bottom:1px solid rgba(255,255,255,.035);

  box-shadow:
    0 -18px 45px rgba(0,0,0,.30),
    0 18px 45px rgba(0,0,0,.38);
}


/* Broad soft glow behind the complete divider */

.ai1hundred-divider::after{
  content:"";

  position:absolute;

  left:8%;
  right:8%;
  top:50%;

  height:26px;

  transform:translateY(-50%);

  z-index:-1;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(57,255,20,.14),
      rgba(0,215,255,.18),
      rgba(255,174,0,.14),
      transparent
    );

  filter:blur(18px);

  opacity:.9;
}


.ai1hundred-divider-line{
  position:relative;

  height:4px;

  overflow:visible;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.13),
      rgba(255,255,255,.03)
    );

  box-shadow:
    0 0 10px rgba(255,255,255,.05);
}


/* Animated bright rail */

.ai1hundred-divider-line span{
  position:absolute;
  inset:0;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      #39ff14 15%,
      #78ff33 25%,
      #00d7ff 43%,
      #00f2ff 52%,
      #ffae00 72%,
      #ff7a00 82%,
      transparent 100%
    );

  background-size:220% 100%;

  animation:
    ai1h-energy-run 3.2s linear infinite;

  box-shadow:
    0 0 8px rgba(57,255,20,.75),
    0 0 18px rgba(0,215,255,.42),
    0 0 28px rgba(255,174,0,.20);
}


/* Small travelling highlight along each rail */

.ai1hundred-divider-line::after{
  content:"";

  position:absolute;

  top:50%;
  left:0;

  width:80px;
  height:10px;

  transform:translate(-50%,-50%);

  border-radius:999px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.95),
      rgba(0,242,255,.65) 30%,
      transparent 72%
    );

  filter:blur(2px);

  animation:
    ai1h-divider-spark 4.2s ease-in-out infinite;

  opacity:.9;
}


.ai1hundred-divider-line:last-of-type::after{
  animation-delay:-2.1s;
}


/* Centre unit */

.ai1hundred-divider-core{
  position:relative;

  display:grid;
  place-items:center;

  width:84px;
  height:84px;

  margin:0 18px;

  border:
    1px solid rgba(255,255,255,.24);

  border-radius:50%;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(24,38,34,.98),
      rgba(5,11,10,.99) 58%,
      rgba(1,4,4,1)
    );

  box-shadow:
    0 0 0 7px rgba(57,255,20,.025),
    0 0 0 14px rgba(0,215,255,.018),
    0 0 34px rgba(57,255,20,.26),
    0 0 58px rgba(0,215,255,.18),
    0 14px 30px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.08);

  animation:
    ai1h-divider-float 3.2s ease-in-out infinite;
}


/* Concentric animated rings */

.ai1hundred-divider-core::before,
.ai1hundred-divider-core::after{
  content:"";

  position:absolute;

  border-radius:50%;

  pointer-events:none;
}


.ai1hundred-divider-core::before{
  inset:-10px;

  border:
    1px solid rgba(57,255,20,.34);

  box-shadow:
    0 0 22px rgba(57,255,20,.12);

  animation:
    ai1h-ring-expand 2.6s ease-out infinite;
}


.ai1hundred-divider-core::after{
  inset:-18px;

  border:
    1px solid rgba(0,215,255,.20);

  box-shadow:
    0 0 30px rgba(0,215,255,.10);

  animation:
    ai1h-ring-expand 2.6s .85s ease-out infinite;
}


/* Multicolour centre */

.ai1hundred-divider-core-inner{
  position:relative;

  width:34px;
  height:34px;

  border-radius:50%;

  background:
    conic-gradient(
      from 0deg,
      #39ff14,
      #00d7ff,
      #ffae00,
      #ff3b84,
      #39ff14
    );

  box-shadow:
    0 0 12px rgba(255,255,255,.24),
    0 0 24px rgba(57,255,20,.34),
    0 0 34px rgba(0,215,255,.20);

  animation:
    ai1h-rotate 3s linear infinite;
}


/* Dark inner pupil gives the centre more depth */

.ai1hundred-divider-core-inner::after{
  content:"";

  position:absolute;
  inset:7px;

  border-radius:50%;

  background:
    radial-gradient(
      circle at 40% 35%,
      rgba(255,255,255,.20),
      rgba(3,8,8,.96) 58%
    );

  box-shadow:
    inset 0 0 8px rgba(0,0,0,.8);
}


.ai1hundred-divider-glow{
  position:absolute;

  left:50%;
  top:50%;

  width:min(520px,55vw);
  height:90px;

  transform:translate(-50%,-50%);

  border-radius:50%;

  background:
    linear-gradient(
      90deg,
      rgba(57,255,20,.18),
      rgba(0,215,255,.22),
      rgba(255,174,0,.15)
    );

  filter:blur(42px);

  opacity:.72;

  pointer-events:none;
}


/* ------------------------------------------------------------
   Divider spark animation
------------------------------------------------------------ */

@keyframes ai1h-divider-spark{

  0%{
    left:0%;
    opacity:0;
  }

  12%{
    opacity:.95;
  }

  50%{
    opacity:1;
  }

  88%{
    opacity:.95;
  }

  100%{
    left:100%;
    opacity:0;
  }

}


/* ------------------------------------------------------------
   Tablet
------------------------------------------------------------ */

@media (max-width:820px){

  .ai1hundred-divider{
    height:90px;

    margin:-45px calc(50% - 50vw);

    padding:0 .8rem;
  }

  .ai1hundred-divider::before{
    height:46px;
  }

  .ai1hundred-divider-line{
    height:3px;
  }

  .ai1hundred-divider-core{
    width:66px;
    height:66px;

    margin:0 12px;
  }

  .ai1hundred-divider-core-inner{
    width:27px;
    height:27px;
  }

}


/* ------------------------------------------------------------
   Mobile
------------------------------------------------------------ */

@media (max-width:520px){

  .ai1hundred-divider{
    height:76px;

    margin:-38px calc(50% - 50vw);

    padding:0 .45rem;
  }

  .ai1hundred-divider::before{
    height:40px;
  }

  .ai1hundred-divider-line{
    height:2px;
  }

  .ai1hundred-divider-core{
    width:56px;
    height:56px;

    margin:0 8px;
  }

  .ai1hundred-divider-core-inner{
    width:23px;
    height:23px;
  }

  .ai1hundred-divider-glow{
    width:72vw;
    height:68px;
  }

}


/* ============================================================
   18) FINAL CTA
============================================================ */

.ai1hundred-final-card{
  position:relative;
  overflow:hidden;

  width:min(920px,100%);

  margin-inline:auto;

  padding:clamp(2.7rem,7vw,5.7rem);

  border:1px solid rgba(255,255,255,.16);
  border-radius:40px;

  background:
    linear-gradient(
      145deg,
      rgba(12,18,17,.92),
      rgba(5,9,9,.8)
    );

  box-shadow:
    0 40px 110px rgba(0,0,0,.5);

  text-align:center;

  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}

.ai1hundred-final-card::before{
  content:"";

  position:absolute;

  inset:-1px;

  z-index:-1;

  border-radius:inherit;

  padding:1px;

  background:
    conic-gradient(
      from var(--ai1h-border-angle),
      transparent,
      var(--ai1h-green),
      transparent 25%,
      var(--ai1h-blue),
      transparent 50%,
      var(--ai1h-pink),
      transparent 75%,
      var(--ai1h-orange),
      transparent
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite:xor;
  mask-composite:exclude;

  opacity:.6;

  animation:ai1h-border-spin 9s linear infinite;
}

.ai1hundred-final-energy{
  position:absolute;

  left:10%;
  right:10%;
  bottom:0;

  height:3px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--ai1h-green),
      var(--ai1h-blue),
      var(--ai1h-pink),
      transparent
    );

  background-size:200% 100%;

  box-shadow:
    0 0 20px rgba(57,255,20,.22);

  animation:
    ai1h-energy-run 3s linear infinite;
}

.ai1hundred-final-card h2{
  margin-bottom:1.3rem;

  font-size:clamp(2.4rem,5vw,4.5rem);
  line-height:.98;

  letter-spacing:-.055em;
}

.ai1hundred-final-card h2 span{
  background:
    linear-gradient(
      90deg,
      var(--ai1h-green),
      var(--ai1h-blue)
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}

.ai1hundred-final-card > p{
  width:min(700px,100%);

  margin:0 auto 1.5rem;

  color:var(--ai1h-muted);
}

.ai1hundred-final-price{
  margin:.2rem 0 1.8rem;

  color:#fff;

  font-size:clamp(5rem,11vw,8rem);
  font-weight:900;
  line-height:.85;
  letter-spacing:-.08em;

  animation:
    ai1h-price-glow 3s ease-in-out infinite;
}

.ai1hundred-final-note{
  margin-top:1.3rem !important;
  margin-bottom:0 !important;

  color:rgba(255,255,255,.48) !important;

  font-size:.84rem;
}


/* ============================================================
   19) REVEAL — WORKS UP AND DOWN
============================================================ */

.ai1hundred-page.js-ready .ai1hundred-reveal{
  --ai1h-reveal-y:38px;
  --ai1h-scale:.97;

  opacity:0;

  filter:blur(8px);

  transition:
    opacity .75s cubic-bezier(.2,.75,.2,1),
    filter .75s ease,
    transform .75s cubic-bezier(.2,.75,.2,1),
    box-shadow .35s ease,
    border-color .35s ease;
}

.ai1hundred-page.js-ready .ai1hundred-reveal.is-visible{
  --ai1h-reveal-y:0px;
  --ai1h-scale:1;

  opacity:1;

  filter:blur(0);
}

.ai1hundred-page.js-ready
.ai1hundred-divider.ai1hundred-reveal{
  transform:translateY(24px) scale(.96);
}

.ai1hundred-page.js-ready
.ai1hundred-divider.ai1hundred-reveal.is-visible{
  transform:translateY(0) scale(1);
}


/* ============================================================
   20) KEYFRAMES
============================================================ */

@property --ai1h-border-angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}

@keyframes ai1h-border-spin{
  to{
    --ai1h-border-angle:360deg;
  }
}

@keyframes ai1h-energy-run{
  from{
    background-position:200% 0;
  }

  to{
    background-position:-200% 0;
  }
}

@keyframes ai1h-text-shift{
  from{
    background-position:0% center;
  }

  to{
    background-position:200% center;
  }
}

@keyframes ai1h-price-glow{
  0%,
  100%{
    text-shadow:
      0 0 22px rgba(57,255,20,.12);
  }

  50%{
    text-shadow:
      0 0 35px rgba(57,255,20,.28),
      0 0 60px rgba(0,200,255,.14);
  }
}

@keyframes ai1h-price-glow-orange{
  0%,
  100%{
    text-shadow:
      0 0 22px rgba(255,157,0,.12);
  }

  50%{
    text-shadow:
      0 0 42px rgba(255,157,0,.28),
      0 0 65px rgba(255,70,0,.12);
  }
}

@keyframes ai1h-price-ring{
  0%,
  100%{
    opacity:.3;
    transform:translate(-50%,-50%) scale(.82);
  }

  50%{
    opacity:.8;
    transform:translate(-50%,-50%) scale(1.08);
  }
}

@keyframes ai1h-energy-width{
  0%,
  100%{
    left:25%;
    right:25%;
  }

  50%{
    left:8%;
    right:8%;
  }
}

@keyframes ai1h-dot-pulse{
  0%,
  100%{
    opacity:.55;
    transform:scale(.8);
  }

  50%{
    opacity:1;
    transform:scale(1.35);
  }
}

@keyframes ai1h-stat-glow{
  0%,
  100%{
    opacity:.35;
    transform:scale(.8);
  }

  50%{
    opacity:.75;
    transform:scale(1.2);
  }
}

@keyframes ai1h-stat-pulse{
  0%{
    opacity:.5;
    transform:translateX(-50%) scale(.3);
  }

  100%{
    opacity:0;
    transform:translateX(-50%) scale(2);
  }
}

@keyframes ai1h-stat-arrive{
  0%{
    filter:brightness(.7);
  }

  45%{
    filter:brightness(1.5);
  }

  100%{
    filter:brightness(1);
  }
}

@keyframes ai1h-card-sweep{
  0%,
  70%{
    left:-45%;
  }

  100%{
    left:140%;
  }
}

@keyframes ai1h-featured-breathe{
  0%,
  100%{
    box-shadow:
      0 30px 75px rgba(0,0,0,.35),
      0 0 20px rgba(57,255,20,.04);
  }

  50%{
    box-shadow:
      0 35px 90px rgba(0,0,0,.4),
      0 0 50px rgba(57,255,20,.13),
      0 0 70px rgba(0,200,255,.06);
  }
}

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

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

@keyframes ai1h-number-pulse{
  0%,
  100%{
    box-shadow:
      0 0 20px rgba(57,255,20,.18);
  }

  50%{
    box-shadow:
      0 0 32px rgba(57,255,20,.34),
      0 0 45px rgba(0,200,255,.15);
  }
}

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

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

@keyframes ai1h-ring-expand{
  0%{
    opacity:.65;
    transform:scale(.75);
  }

  100%{
    opacity:0;
    transform:scale(1.65);
  }
}

@keyframes ai1h-rotate{
  to{
    transform:rotate(360deg);
  }
}

@keyframes ai1h-orb-one{
  0%,
  100%{
    transform:translate(0,0) scale(1);
  }

  50%{
    transform:translate(90px,-40px) scale(1.2);
  }
}

@keyframes ai1h-orb-two{
  0%,
  100%{
    transform:translate(0,0) scale(1);
  }

  50%{
    transform:translate(-80px,50px) scale(1.15);
  }
}


/* ============================================================
   21) TABLET
============================================================ */

@media (max-width:1050px){

  .ai1hundred-feature-grid,
  .ai1hundred-extra-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .ai1hundred-process-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .ai1hundred-process-grid::before{
    display:none;
  }

  .ai1hundred-stats{
    grid-template-columns:repeat(2,1fr);
  }

}


/* ============================================================
   22) SMALL TABLET
============================================================ */

@media (max-width:820px){

  .ai1hundred-highlight,
  .ai1hundred-catch-card{
    grid-template-columns:1fr;
  }

  .ai1hundred-audience-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .ai1hundred-compare-grid{
    grid-template-columns:1fr;
  }

  .ai1hundred-divider{
    width:calc(100% - 2rem);
    height:72px;

    margin:-36px auto;
  }

  .ai1hundred-divider-core{
    width:52px;
    height:52px;

    margin:0 10px;
  }

  .ai1hundred-divider-core-inner{
    width:18px;
    height:18px;
  }

}


/* ============================================================
   23) MOBILE
============================================================ */

@media (max-width:620px){

  .ai1hundred-container{
    width:calc(100% - 2rem);
  }

  .ai1hundred-section{
    padding:4.75rem 0;
  }

  .ai1hundred-hero{
    min-height:auto;
  }

  .ai1hundred-hero-inner{
    width:calc(100% - 1.4rem);

    padding:6rem 0 4.5rem;
  }

  .ai1hundred-hero-card{
    padding:2rem 1.25rem;

    border-radius:24px;
  }

  .ai1hundred-hero-card h1{
    font-size:clamp(2.6rem,15vw,4.3rem);
  }

  .ai1hundred-hero-actions{
    flex-direction:column;
  }

  .ai1hundred-btn{
    width:100%;
  }

  .ai1hundred-hero-trust{
    flex-direction:column;
    align-items:center;
  }

  .ai1hundred-stats,
  .ai1hundred-feature-grid,
  .ai1hundred-audience-grid,
  .ai1hundred-process-grid,
  .ai1hundred-extra-grid{
    grid-template-columns:1fr;
  }

  .ai1hundred-stat{
    min-height:165px;
  }

  .ai1hundred-feature{
    min-height:0;
  }

  .ai1hundred-highlight,
  .ai1hundred-catch-card{
    padding:1.6rem;
  }

  .ai1hundred-compare-card{
    padding:1.6rem;
  }

  .ai1hundred-faq-question{
    padding:1.15rem;
  }

  .ai1hundred-faq-answer p{
    padding:0 1.15rem 1.15rem;
  }

  .ai1hundred-final-card{
    padding:2.4rem 1.3rem;

    border-radius:28px;
  }

}


/* ============================================================
   24) REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion:reduce){

  .ai1hundred-page *,
  .ai1hundred-page *::before,
  .ai1hundred-page *::after{
    animation:none !important;
    transition-duration:.001ms !important;
  }

  .ai1hundred-section-parallax,
  .ai1hundred-final-parallax,
  .ai1hundred-hero-video{
    transform:none !important;
  }

  .ai1hundred-page.js-ready .ai1hundred-reveal{
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
  }

}


/* ============================================================
   25) AI1GROUP-STYLE CARD WOW UPGRADE
   ============================================================
   Adds:
   - much stronger card depth
   - luminous borders
   - internal corner graphics
   - hover elevation
   - animated highlight rails
   - scroll-direction choreography
============================================================ */


/* ============================================================
   25.1) MOTION VARIABLES
============================================================ */

.ai1hundred-page{
  --ai1h-motion-distance:110px;
  --ai1h-motion-distance-big:175px;
  --ai1h-motion-duration:900ms;
  --ai1h-motion-ease:cubic-bezier(.16,1,.3,1);
}


/* ============================================================
   25.2) UNIVERSAL PREMIUM CARD SURFACE
============================================================ */

.ai1hundred-feature,
.ai1hundred-audience-card,
.ai1hundred-compare-card,
.ai1hundred-process-step,
.ai1hundred-extra-card,
.ai1hundred-stat{
  isolation:isolate;

  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(255,255,255,.065),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 94%,
      rgba(0,200,255,.055),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(8,16,15,.97),
      rgba(2,8,7,.99)
    );

  border:
    1px solid rgba(255,255,255,.16);

  box-shadow:
    0 18px 0 rgba(0,0,0,.16),
    0 34px 70px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.07);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}


/* ============================================================
   25.3) CARD CORNER TECH GRAPHICS
============================================================ */

.ai1hundred-feature::before,
.ai1hundred-audience-card::before,
.ai1hundred-process-step::before,
.ai1hundred-extra-card::before{
  content:"";

  position:absolute;

  top:-58px;
  right:-58px;

  width:150px;
  height:150px;

  border:
    1px solid rgba(255,255,255,.055);

  border-radius:50%;

  box-shadow:
    inset 0 0 0 26px rgba(255,255,255,.012);

  pointer-events:none;

  opacity:.75;

  transition:
    transform .6s cubic-bezier(.16,1,.3,1),
    opacity .4s ease;
}


.ai1hundred-feature:hover::before,
.ai1hundred-audience-card:hover::before,
.ai1hundred-process-step:hover::before,
.ai1hundred-extra-card:hover::before{
  transform:
    rotate(20deg)
    scale(1.16);

  opacity:1;
}


/* ============================================================
   25.4) FEATURE CARDS — MUCH STRONGER COLOUR IDENTITY
============================================================ */

.ai1hundred-feature{
  --ai1h-card-colour:var(--ai1h-green);

  border-color:
    color-mix(
      in srgb,
      var(--ai1h-card-colour) 24%,
      rgba(255,255,255,.12)
    );

  box-shadow:
    0 18px 0 rgba(0,0,0,.16),
    0 34px 70px rgba(0,0,0,.32),
    0 0 30px
      color-mix(
        in srgb,
        var(--ai1h-card-colour) 5%,
        transparent
      ),
    inset 0 1px 0 rgba(255,255,255,.07);
}


/* Four-colour rhythm */

.ai1hundred-feature:nth-child(4n + 1){
  --ai1h-card-colour:#39ff14;
}

.ai1hundred-feature:nth-child(4n + 2){
  --ai1h-card-colour:#00d7ff;
}

.ai1hundred-feature:nth-child(4n + 3){
  --ai1h-card-colour:#ffae00;
}

.ai1hundred-feature:nth-child(4n){
  --ai1h-card-colour:#ff3b84;
}


.ai1hundred-feature:hover{
  --ai1h-lift:-15px;

  border-color:
    color-mix(
      in srgb,
      var(--ai1h-card-colour) 74%,
      white
    );

  box-shadow:
    0 24px 0 rgba(0,0,0,.13),
    0 50px 95px rgba(0,0,0,.48),
    0 0 32px
      color-mix(
        in srgb,
        var(--ai1h-card-colour) 24%,
        transparent
      ),
    0 0 72px
      color-mix(
        in srgb,
        var(--ai1h-card-colour) 12%,
        transparent
      ),
    inset 0 1px 0 rgba(255,255,255,.12);
}


/* ============================================================
   25.5) FEATURE ICON — AI1GROUP STYLE BADGE
============================================================ */

.ai1hundred-feature-icon{
  position:relative;

  width:66px;
  height:66px;

  border:
    2px solid var(--ai1h-card-colour);

  border-radius:20px;

  background:
    radial-gradient(
      circle at 50% 45%,
      color-mix(
        in srgb,
        var(--ai1h-card-colour) 18%,
        transparent
      ),
      rgba(0,0,0,.58) 70%
    );

  box-shadow:
    0 0 20px
      color-mix(
        in srgb,
        var(--ai1h-card-colour) 46%,
        transparent
      ),
    0 12px 25px rgba(0,0,0,.35),
    inset 0 0 25px
      color-mix(
        in srgb,
        var(--ai1h-card-colour) 12%,
        transparent
      );

  font-size:1rem;

  transition:
    transform .42s cubic-bezier(.16,1,.3,1),
    box-shadow .42s ease;
}


.ai1hundred-feature:hover
.ai1hundred-feature-icon{
  transform:
    translate3d(0,-7px,35px)
    scale(1.13)
    rotate(-4deg);

  box-shadow:
    0 0 28px
      color-mix(
        in srgb,
        var(--ai1h-card-colour) 72%,
        transparent
      ),
    0 18px 38px rgba(0,0,0,.40),
    inset 0 0 30px
      color-mix(
        in srgb,
        var(--ai1h-card-colour) 20%,
        transparent
      );
}


/* ============================================================
   25.6) FEATURE BOTTOM ENERGY RAIL
============================================================ */

.ai1hundred-feature::after{
  content:"";

  position:absolute;

  left:12%;
  right:12%;
  bottom:0;

  width:auto;
  height:3px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--ai1h-card-colour),
      #fff,
      var(--ai1h-card-colour),
      transparent
    );

  background-size:220% 100%;

  transform:scaleX(.45);

  transform-origin:center;

  opacity:.5;

  box-shadow:
    0 0 12px var(--ai1h-card-colour),
    0 0 30px
      color-mix(
        in srgb,
        var(--ai1h-card-colour) 35%,
        transparent
      );

  animation:
    ai1h-card-energy-flow
    4s linear infinite;

  transition:
    transform .42s ease,
    opacity .42s ease;
}


.ai1hundred-feature:hover::after{
  transform:scaleX(1);

  opacity:1;
}


/* ============================================================
   25.7) AUDIENCE CARDS
============================================================ */

.ai1hundred-audience-card{
  min-height:175px;

  padding:1.85rem;

  border-radius:24px;

  transition:
    border-color .35s ease,
    box-shadow .35s ease;
}


.ai1hundred-audience-card:nth-child(3n + 1){
  --ai1h-audience:#39ff14;
}

.ai1hundred-audience-card:nth-child(3n + 2){
  --ai1h-audience:#00d7ff;
}

.ai1hundred-audience-card:nth-child(3n){
  --ai1h-audience:#ffae00;
}


.ai1hundred-audience-card strong{
  font-size:1.18rem;

  transition:
    transform .35s ease,
    text-shadow .35s ease;
}


.ai1hundred-audience-card:hover{
  --ai1h-lift:-13px;

  border-color:
    var(--ai1h-audience);

  box-shadow:
    0 22px 0 rgba(0,0,0,.13),
    0 46px 90px rgba(0,0,0,.45),
    0 0 38px
      color-mix(
        in srgb,
        var(--ai1h-audience) 19%,
        transparent
      );
}


.ai1hundred-audience-card:hover strong{
  transform:translateX(5px);

  text-shadow:
    0 0 18px
      color-mix(
        in srgb,
        var(--ai1h-audience) 38%,
        transparent
      );
}


.ai1hundred-audience-card::after{
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--ai1h-audience),
      white,
      var(--ai1h-audience),
      transparent
    );

  box-shadow:
    0 0 18px
      var(--ai1h-audience);
}


/* ============================================================
   25.8) PROCESS CARDS — MORE LIKE THE AI1GROUP EXAMPLE
============================================================ */

.ai1hundred-process-step{
  min-height:275px;

  border-radius:28px;

  padding:2rem;

  transition:
    border-color .35s ease,
    box-shadow .35s ease;
}


.ai1hundred-process-step:nth-child(1){
  --ai1h-process-colour:#ff3f5d;
}

.ai1hundred-process-step:nth-child(2){
  --ai1h-process-colour:#ffc02d;
}

.ai1hundred-process-step:nth-child(3){
  --ai1h-process-colour:#78ff17;
}

.ai1hundred-process-step:nth-child(4){
  --ai1h-process-colour:#00d7ff;
}


.ai1hundred-process-step{
  border-color:
    color-mix(
      in srgb,
      var(--ai1h-process-colour) 36%,
      rgba(255,255,255,.12)
    );

  box-shadow:
    0 22px 0 rgba(0,0,0,.14),
    0 40px 80px rgba(0,0,0,.36),
    0 0 28px
      color-mix(
        in srgb,
        var(--ai1h-process-colour) 7%,
        transparent
      );
}


.ai1hundred-process-step:hover{
  --ai1h-lift:-16px;

  border-color:
    var(--ai1h-process-colour);

  box-shadow:
    0 25px 0 rgba(0,0,0,.12),
    0 55px 100px rgba(0,0,0,.50),
    0 0 42px
      color-mix(
        in srgb,
        var(--ai1h-process-colour) 27%,
        transparent
      );
}


.ai1hundred-process-number{
  width:60px;
  height:60px;

  border:
    1px solid
      color-mix(
        in srgb,
        var(--ai1h-process-colour) 85%,
        white
      );

  background:
    radial-gradient(
      circle at 35% 28%,
      #fff,
      var(--ai1h-process-colour) 34%,
      color-mix(
        in srgb,
        var(--ai1h-process-colour) 65%,
        black
      )
    );

  box-shadow:
    0 0 25px
      color-mix(
        in srgb,
        var(--ai1h-process-colour) 46%,
        transparent
      ),
    0 13px 24px rgba(0,0,0,.34);

  color:#031005;

  transition:
    transform .4s cubic-bezier(.16,1,.3,1),
    box-shadow .4s ease;
}


.ai1hundred-process-step:hover
.ai1hundred-process-number{
  transform:
    translateY(-7px)
    scale(1.13)
    rotate(-5deg);

  box-shadow:
    0 0 40px
      color-mix(
        in srgb,
        var(--ai1h-process-colour) 65%,
        transparent
      ),
    0 18px 35px rgba(0,0,0,.42);
}


/* ============================================================
   25.9) EXTRAS CARDS
============================================================ */

.ai1hundred-extra-card{
  min-height:190px;

  padding:1.8rem;

  border-radius:24px;
}


.ai1hundred-extra-card:nth-child(4n + 1){
  --ai1h-extra:#39ff14;
}

.ai1hundred-extra-card:nth-child(4n + 2){
  --ai1h-extra:#00d7ff;
}

.ai1hundred-extra-card:nth-child(4n + 3){
  --ai1h-extra:#ffae00;
}

.ai1hundred-extra-card:nth-child(4n){
  --ai1h-extra:#ff3b84;
}


.ai1hundred-extra-card:hover{
  --ai1h-lift:-13px;

  border-color:
    var(--ai1h-extra);

  box-shadow:
    0 22px 0 rgba(0,0,0,.13),
    0 46px 88px rgba(0,0,0,.45),
    0 0 35px
      color-mix(
        in srgb,
        var(--ai1h-extra) 20%,
        transparent
      );
}


/* ============================================================
   25.10) STAT CARDS — DEEPER / BRIGHTER
============================================================ */

.ai1hundred-stat{
  min-height:220px;

  border-radius:28px;

  box-shadow:
    0 20px 0 rgba(0,0,0,.14),
    0 40px 80px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.08);

  transition:
    border-color .35s ease,
    box-shadow .35s ease;
}


.ai1hundred-stat:hover{
  --ai1h-lift:-15px;

  border-color:
    var(--ai1h-stat-colour);

  box-shadow:
    0 25px 0 rgba(0,0,0,.12),
    0 58px 105px rgba(0,0,0,.52),
    0 0 45px
      color-mix(
        in srgb,
        var(--ai1h-stat-colour) 30%,
        transparent
      ),
    inset 0 1px 0 rgba(255,255,255,.10);
}


.ai1hundred-stat-number{
  font-size:
    clamp(3.3rem,5.5vw,5rem);
}


/* Stat arrival burst */

.ai1hundred-stat.is-stat-active::after{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:50px;
  height:50px;

  border:
    2px solid var(--ai1h-stat-colour);

  border-radius:50%;

  transform:
    translate(-50%,-50%);

  pointer-events:none;

  animation:
    ai1h-stat-burst
    .85s cubic-bezier(.16,1,.3,1)
    forwards;
}


/* ============================================================
   25.11) COMPARISON — FEATURED CARD WOW
============================================================ */

.ai1hundred-compare-featured{
  position:relative;

  overflow:visible;

  border:
    1px solid rgba(57,255,20,.55);

  box-shadow:
    0 25px 0 rgba(0,0,0,.14),
    0 48px 95px rgba(0,0,0,.48),
    0 0 38px rgba(57,255,20,.16),
    0 0 75px rgba(0,200,255,.08);
}


.ai1hundred-compare-featured::after{
  content:"";

  position:absolute;

  inset:-2px;

  z-index:-2;

  border-radius:inherit;

  background:
    linear-gradient(
      120deg,
      rgba(57,255,20,.45),
      rgba(0,215,255,.18),
      rgba(57,255,20,.38)
    );

  filter:blur(20px);

  opacity:.28;

  animation:
    ai1h-featured-aura
    3.5s ease-in-out infinite;
}


.ai1hundred-best-choice{
  top:-18px;

  padding:.6rem 1.2rem;

  box-shadow:
    0 10px 28px rgba(0,0,0,.32),
    0 0 26px rgba(57,255,20,.34);
}


/* ============================================================
   26) SCROLL CHOREOGRAPHY
   ============================================================
   IMPORTANT:
   This replaces the bland universal fade-up motion.

   JS assigns one of:
   - left
   - right
   - left-big
   - right-big
   - up
   - zoom/pop
============================================================ */

.ai1-hundred-js-active
.ai1hundred-motion{
  --ai1h-motion-x:0px;
  --ai1h-motion-y:34px;
  --ai1h-motion-scale:1;
  --ai1h-motion-rotate:0deg;

  opacity:0;

  filter:
    blur(7px)
    saturate(.82);

  transition:
    opacity
      var(--ai1h-motion-duration)
      var(--ai1h-motion-ease)
      var(--ai1h-motion-delay,0ms),

    filter
      var(--ai1h-motion-duration)
      ease
      var(--ai1h-motion-delay,0ms),

    transform
      var(--ai1h-motion-duration)
      var(--ai1h-motion-ease)
      var(--ai1h-motion-delay,0ms),

    border-color .35s ease,

    box-shadow .35s ease;

  will-change:
    transform,
    opacity,
    filter;
}


/* ------------------------------------------------------------
   Standard left
------------------------------------------------------------ */

.ai1-hundred-js-active
.ai1hundred-motion-left{
  --ai1h-motion-x:
    calc(
      var(--ai1h-motion-distance) * -1
    );

  --ai1h-motion-y:
    22px;

  --ai1h-motion-rotate:
    -1deg;
}


/* ------------------------------------------------------------
   Standard right
------------------------------------------------------------ */

.ai1-hundred-js-active
.ai1hundred-motion-right{
  --ai1h-motion-x:
    var(--ai1h-motion-distance);

  --ai1h-motion-y:
    22px;

  --ai1h-motion-rotate:
    1deg;
}


/* ------------------------------------------------------------
   Big left
------------------------------------------------------------ */

.ai1-hundred-js-active
.ai1hundred-motion-left-big{
  --ai1h-motion-x:
    calc(
      var(--ai1h-motion-distance-big) * -1
    );

  --ai1h-motion-y:
    30px;

  --ai1h-motion-rotate:
    -2deg;
}


/* ------------------------------------------------------------
   Big right
------------------------------------------------------------ */

.ai1-hundred-js-active
.ai1hundred-motion-right-big{
  --ai1h-motion-x:
    var(--ai1h-motion-distance-big);

  --ai1h-motion-y:
    30px;

  --ai1h-motion-rotate:
    2deg;
}


/* ------------------------------------------------------------
   Vertical
------------------------------------------------------------ */

.ai1-hundred-js-active
.ai1hundred-motion-up{
  --ai1h-motion-y:
    55px;
}


/* ------------------------------------------------------------
   Hero / large panel zoom
------------------------------------------------------------ */

.ai1-hundred-js-active
.ai1hundred-motion-zoom{
  --ai1h-motion-y:
    35px;

  --ai1h-motion-scale:
    .94;

  filter:
    blur(11px)
    saturate(.82);
}


/* ------------------------------------------------------------
   Pop — used for the AI1Design comparison and major CTA panels
------------------------------------------------------------ */

.ai1-hundred-js-active
.ai1hundred-motion-pop{
  --ai1h-motion-y:
    46px;

  --ai1h-motion-scale:
    .88;

  filter:
    blur(12px)
    saturate(.72)
    brightness(.75);
}


/* ============================================================
   26.1) APPLY MOTION WITHOUT BREAKING CARD TILT
============================================================ */

.ai1-hundred-js-active
.ai1hundred-motion.ai1hundred-magnetic-card{
  transform:
    perspective(1100px)

    translate3d(
      var(--ai1h-motion-x),
      calc(
        var(--ai1h-motion-y)
        +
        var(--ai1h-lift,0px)
      ),
      0
    )

    rotateX(
      var(--ai1h-rx,0deg)
    )

    rotateY(
      var(--ai1h-ry,0deg)
    )

    rotateZ(
      var(--ai1h-motion-rotate)
    )

    scale(
      var(--ai1h-motion-scale)
    );
}


/* Non magnetic elements */

.ai1-hundred-js-active
.ai1hundred-motion:not(.ai1hundred-magnetic-card){
  transform:
    translate3d(
      var(--ai1h-motion-x),
      var(--ai1h-motion-y),
      0
    )

    rotate(
      var(--ai1h-motion-rotate)
    )

    scale(
      var(--ai1h-motion-scale)
    );
}


/* ============================================================
   26.2) IN VIEW
============================================================ */

.ai1-hundred-js-active
.ai1hundred-motion.is-inview{
  --ai1h-motion-x:0px;
  --ai1h-motion-y:0px;
  --ai1h-motion-scale:1;
  --ai1h-motion-rotate:0deg;

  opacity:1;

  filter:
    blur(0)
    saturate(1)
    brightness(1);
}


.ai1-hundred-js-active
.ai1hundred-motion.is-inview{
  will-change:auto;
}


/* ============================================================
   26.3) SCROLLING BACK UP
   ------------------------------------------------------------
   Horizontal direction is preserved.
   Vertical direction reverses.

   This is what gives the same "return into the page" feeling
   as the homepage/service/article animation systems.
============================================================ */

body.ai1-scroll-up
.ai1hundred-motion-left:not(.is-inview),
body.ai1-scroll-up
.ai1hundred-motion-right:not(.is-inview){
  --ai1h-motion-y:-22px;
}


body.ai1-scroll-up
.ai1hundred-motion-left-big:not(.is-inview),
body.ai1-scroll-up
.ai1hundred-motion-right-big:not(.is-inview){
  --ai1h-motion-y:-30px;
}


body.ai1-scroll-up
.ai1hundred-motion-up:not(.is-inview){
  --ai1h-motion-y:-55px;
}


body.ai1-scroll-up
.ai1hundred-motion-zoom:not(.is-inview){
  --ai1h-motion-y:-35px;
}


body.ai1-scroll-up
.ai1hundred-motion-pop:not(.is-inview){
  --ai1h-motion-y:-46px;
}


/* ============================================================
   27) DIVIDER SCROLL REVEAL
============================================================ */

.ai1-hundred-js-active
.ai1hundred-divider.ai1hundred-motion{
  opacity:0;

  filter:none !important;

  transform:none !important;

  transition:
    opacity .55s ease;
}


.ai1-hundred-js-active
.ai1hundred-divider.ai1hundred-motion
.ai1hundred-divider-line{
  transform:scaleX(0);

  transform-origin:center;

  opacity:.25;

  transition:
    transform 900ms cubic-bezier(.16,1,.3,1),
    opacity .5s ease;
}


.ai1-hundred-js-active
.ai1hundred-divider.ai1hundred-motion
.ai1hundred-divider-core{
  opacity:0;

  transform:scale(.72);

  transition:
    opacity .55s ease .12s,
    transform .75s cubic-bezier(.16,1,.3,1) .12s;
}


.ai1-hundred-js-active
.ai1hundred-divider.ai1hundred-motion.is-inview{
  opacity:1;
}


.ai1-hundred-js-active
.ai1hundred-divider.ai1hundred-motion.is-inview
.ai1hundred-divider-line{
  transform:scaleX(1);

  opacity:1;
}


.ai1-hundred-js-active
.ai1hundred-divider.ai1hundred-motion.is-inview
.ai1hundred-divider-core{
  opacity:1;

  transform:scale(1);
}


/* ============================================================
   28) CARD ENTRANCE SETTLE
============================================================ */

.ai1hundred-feature.is-inview,
.ai1hundred-stat.is-inview,
.ai1hundred-process-step.is-inview,
.ai1hundred-audience-card.is-inview,
.ai1hundred-extra-card.is-inview{
  animation:
    ai1h-card-land
    .85s cubic-bezier(.16,1,.3,1)
    both;

  animation-delay:
    var(--ai1h-motion-delay,0ms);
}


/* Keep hover usable after landing */

.ai1hundred-feature.is-inview:hover,
.ai1hundred-stat.is-inview:hover,
.ai1hundred-process-step.is-inview:hover,
.ai1hundred-audience-card.is-inview:hover,
.ai1hundred-extra-card.is-inview:hover{
  animation:none;
}


/* ============================================================
   29) NEW KEYFRAMES
============================================================ */

@keyframes ai1h-card-energy-flow{

  from{
    background-position:
      220% 0;
  }

  to{
    background-position:
      -220% 0;
  }

}


@keyframes ai1h-stat-burst{

  0%{
    opacity:.85;

    transform:
      translate(-50%,-50%)
      scale(.25);
  }

  100%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      scale(5);
  }

}


@keyframes ai1h-featured-aura{

  0%,
  100%{
    opacity:.22;

    transform:
      scale(.96);
  }

  50%{
    opacity:.45;

    transform:
      scale(1.035);
  }

}


@keyframes ai1h-card-land{

  0%{
    box-shadow:
      0 15px 0 rgba(0,0,0,.10),
      0 24px 45px rgba(0,0,0,.20);
  }

  55%{
    box-shadow:
      0 26px 0 rgba(0,0,0,.13),
      0 55px 105px rgba(0,0,0,.48),
      0 0 38px rgba(57,255,20,.08);
  }

  100%{
    box-shadow:
      0 18px 0 rgba(0,0,0,.16),
      0 34px 70px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.07);
  }

}


/* ============================================================
   30) MOBILE MOTION
   ------------------------------------------------------------
   Still clearly animated, but don't throw cards halfway
   across somebody's phone screen.
============================================================ */

@media (max-width:768px){

  .ai1hundred-page{
    --ai1h-motion-distance:42px;
    --ai1h-motion-distance-big:65px;
    --ai1h-motion-duration:760ms;
  }


  .ai1-hundred-js-active
  .ai1hundred-motion-left,
  .ai1-hundred-js-active
  .ai1hundred-motion-right{
    --ai1h-motion-y:14px;
  }


  .ai1-hundred-js-active
  .ai1hundred-motion-left-big,
  .ai1-hundred-js-active
  .ai1hundred-motion-right-big{
    --ai1h-motion-y:18px;
  }


  body.ai1-scroll-up
  .ai1hundred-motion-left:not(.is-inview),

  body.ai1-scroll-up
  .ai1hundred-motion-right:not(.is-inview){
    --ai1h-motion-y:-14px;
  }


  body.ai1-scroll-up
  .ai1hundred-motion-left-big:not(.is-inview),

  body.ai1-scroll-up
  .ai1hundred-motion-right-big:not(.is-inview){
    --ai1h-motion-y:-18px;
  }

}


/* ============================================================
   31) REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion:reduce){

  .ai1hundred-motion,
  .ai1hundred-motion *,
  .ai1hundred-divider,
  .ai1hundred-divider *{
    opacity:1 !important;

    transform:none !important;

    filter:none !important;

    transition:none !important;

    animation:none !important;
  }

}