/* =========================================================================
   iVisionHub design system

   One file, nine sections. Nine files would mean nine requests or a build
   step; neither is worth it at this size. The section rules are the
   separation.

   How this relates to Elementor: every value below comes from a token that
   mirrors an Elementor Global Color or Global Font. Editing a global in
   Elementor changes the widget; editing a token here changes the component
   polish that Elementor cannot express (glass, glow, hover choreography).
   Change one, change the other, or they drift.

   1. GLOBAL       tokens, font faces, base resets, layout utilities
   2. HEADER       Phase 4
   3. BUTTONS      all variants and states
   4. CARDS        base, glass, feature, device, blog, channel
   5. PRICING      plan cards and the connection selector
   6. TESTIMONIALS quote cards
   7. FAQ          accordion
   8. FOOTER       Phase 4
   9. RESPONSIVE   laptop, tablet, mobile overrides
   ========================================================================= */


/* =========================================================================
   1. GLOBAL
   ========================================================================= */

@font-face { font-family:'Poppins'; src:url('../fonts/poppins-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter';   src:url('../fonts/inter-400.woff2')   format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter';   src:url('../fonts/inter-500.woff2')   format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter';   src:url('../fonts/inter-600.woff2')   format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

:root {
  /* Brand */
  --ivh-primary:         #6C4DF6;
  --ivh-primary-hover:   #5B3AE8;
  --ivh-primary-deep:    #4B31C9;
  --ivh-secondary:       #00D3B8;
  --ivh-secondary-hover: #28E5CD;

  /* Surfaces */
  --ivh-bg:             #0B0B12;
  --ivh-surface:        #14141F;
  --ivh-surface-raised: #1B1B29;
  --ivh-glass:          rgba(255,255,255,0.04);
  --ivh-glass-strong:   rgba(255,255,255,0.07);

  /* Text */
  --ivh-heading: #FFFFFF;
  --ivh-text:    #E8E8F0;
  --ivh-muted:   #9494A7;

  /* Lines */
  --ivh-border:        rgba(255,255,255,0.08);
  --ivh-border-strong: rgba(255,255,255,0.14);

  /* Feedback. Only used for form validation, never as decoration. */
  --ivh-error:   #FF6B6B;
  --ivh-error-bg:rgba(255,107,107,0.10);
  --ivh-success: #00D3B8;

  /* Radii */
  --ivh-radius-card:  16px;
  --ivh-radius-btn:   14px;
  --ivh-radius-input: 12px;
  --ivh-radius-pill:  999px;

  /* Elevation. Grey drop shadows read as cheap on a dark background, so depth
     comes from coloured glow plus a deep soft lift instead. */
  --ivh-glow-primary:   0 0 60px -20px rgba(108,77,246,0.55);
  --ivh-glow-secondary: 0 0 60px -20px rgba(0,211,184,0.45);
  --ivh-lift:           0 18px 40px -24px rgba(0,0,0,0.90);
  --ivh-lift-strong:    0 28px 60px -28px rgba(0,0,0,0.95);

  /* Spacing */
  --ivh-space-1:4px;  --ivh-space-2:8px;   --ivh-space-3:12px; --ivh-space-4:16px;
  --ivh-space-5:20px; --ivh-space-6:24px;  --ivh-space-8:32px; --ivh-space-10:40px;
  --ivh-space-12:48px;--ivh-space-16:64px; --ivh-space-24:96px;

  --ivh-section-y: clamp(56px, 7vw, 112px);
  --ivh-gap-grid:  clamp(16px, 2vw, 28px);

  /* Type */
  --ivh-font-heading:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ivh-font-body:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ivh-h1:   clamp(2.5rem, 1.6rem + 3.8vw, 4rem);
  --ivh-h2:   clamp(2rem, 1.5rem + 2.1vw, 2.75rem);
  --ivh-h3:   clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  --ivh-body: 1.0625rem;
  --ivh-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --ivh-small:0.875rem;
  --ivh-label:0.75rem;

  --ivh-lh-body:1.7;
  --ivh-lh-head:1.12;

  --ivh-transition: 220ms cubic-bezier(0.4,0,0.2,1);

  /* Minimum comfortable touch target. WCAG 2.2 AA target size is 24px, but
     24px is uncomfortable on a phone, so every interactive element here is
     built to 44px and the extra is deliberate. */
  --ivh-tap: 44px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

html { scroll-behavior:smooth; scroll-padding-top:96px; }

body {
  background-color:var(--ivh-bg);
  color:var(--ivh-text);
  font-family:var(--ivh-font-body);
  font-size:var(--ivh-body);
  line-height:var(--ivh-lh-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6 {
  font-family:var(--ivh-font-heading);
  font-weight:700;
  color:var(--ivh-heading);
  line-height:var(--ivh-lh-head);
  letter-spacing:-0.015em;
}
h1{font-size:var(--ivh-h1);} h2{font-size:var(--ivh-h2);} h3{font-size:var(--ivh-h3);}

p{margin:0 0 var(--ivh-space-4);} p:last-child{margin-bottom:0;}

a{color:var(--ivh-secondary); text-decoration:none; transition:color var(--ivh-transition);}
a:hover{color:var(--ivh-secondary-hover);}

/* Focus visibility is the most commonly broken WCAG requirement. Teal is used
   rather than purple because it clears contrast against the page background
   AND against every surface and button fill in the system. */
:focus-visible {
  outline:3px solid var(--ivh-secondary);
  outline-offset:3px;
  border-radius:4px;
}

/* Buttons and other coloured fills need a dark gap between the element and
   the ring, or the teal sits directly on purple at 2.73:1 and fails the
   WCAG 2.2 focus-appearance requirement of 3:1 against adjacent colour. */
.ivh-btn:focus-visible,
.elementor-button:focus-visible,
.ivh-switch__opt input:focus-visible + span {
  outline:none;
  box-shadow:0 0 0 3px var(--ivh-bg), 0 0 0 6px var(--ivh-secondary);
}

/* Astra prints the skip link; this makes it visible on focus. Hidden until
   focused, then unmissable, which is the whole point of the control. */
.skip-link.screen-reader-text{
  position:absolute !important; left:-9999px; top:0; z-index:10000;
  width:auto !important; height:auto !important; clip:auto !important;
  padding:12px 20px;
  background:var(--ivh-primary); color:#FFFFFF !important;
  font-family:var(--ivh-font-body); font-weight:600; font-size:1rem;
  border-radius:0 0 var(--ivh-radius-btn) 0;
  text-decoration:none;
}
.skip-link.screen-reader-text:focus{ left:0; outline:3px solid var(--ivh-secondary); outline-offset:-3px; }

/* Visually hidden but available to screen readers. Used for icon-only button
   labels and for the live region on form validation. */
.ivh-sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

img{max-width:100%; height:auto;}
::selection{background:var(--ivh-primary); color:#FFF;}

/* --- Layout utilities ---------------------------------------------------- */

.ivh-section{padding-block:var(--ivh-section-y);}
.ivh-section--tight{padding-block:calc(var(--ivh-section-y) * 0.6);}

.ivh-grid{display:grid; gap:var(--ivh-gap-grid);}
.ivh-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.ivh-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.ivh-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}

.ivh-glass{
  background:rgba(255,255,255,0.055);
  border:1px solid var(--ivh-border);
}


/* =========================================================================
   2. HEADER AND FOOTER
   ========================================================================= */

/* --- Header --------------------------------------------------------------

   The header is position:fixed, not sticky. That choice removes the whole
   class of layout-shift bugs: a fixed element never participates in flow, so
   it cannot push content down when it changes height on scroll.

   The cost is that fixed headers overlay content. Pages that open with a hero
   want exactly that. Pages that do not get compensating top padding via the
   .ivh-no-hero body class, applied in inc/header.php.
   -------------------------------------------------------------------------- */

:root{
  --ivh-header-h: 88px;
  --ivh-header-h-scrolled: 72px;
}

.ivh-header{
  position:fixed; top:0; left:0; right:0; z-index:999;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color var(--ivh-transition),
             border-color var(--ivh-transition),
             box-shadow var(--ivh-transition);
}

/* Near-opaque fill instead of a blur. A full-width fixed strip with
   backdrop-filter makes the compositor read back everything behind it on
   every frame, and over a long page that is enough to lock up the renderer.
   At 96% opacity over a near-black page the difference is not visible, and
   the header stays stable while scrolling. */
.ivh-header.is-scrolled{
  background:rgba(11,11,18,0.96);
  border-bottom-color:var(--ivh-border);
  box-shadow:0 8px 30px -20px rgba(0,0,0,0.9);
}

/* Height change lives on the inner bar, so the fixed shell never moves. */
.ivh-header__bar{
  min-height:var(--ivh-header-h);
  transition:min-height var(--ivh-transition), padding var(--ivh-transition);
}
.ivh-header.is-scrolled .ivh-header__bar{ min-height:var(--ivh-header-h-scrolled); }

/* Pages with no hero need the header's height back as padding. */
body.ivh-no-hero .site-content{ padding-top:var(--ivh-header-h); }

/* Elementor ships `.elementor-widget-image a img[src$=".svg"]{width:48px}`.
   That is specificity (0,2,2) and it only fires for an SVG wrapped in a link,
   which is exactly what a logo is. A plain `.ivh-header__logo img` rule at
   (0,1,1) loses to it no matter how late it loads, which is why the logo
   rendered at 48px. The selector below matches Elementor's shape and adds one
   class, so it wins on specificity rather than on !important.

   Both dimensions are explicit so the box is reserved before the SVG loads
   and the header cannot reflow. */
.ivh-header__logo .elementor-widget-image a img[src$=".svg"],
.ivh-header__logo .elementor-widget-image img,
.ivh-header__logo img,
.ivh-header__logo svg{
  width:187px; height:36px;
  max-width:none; display:block;
  object-fit:contain;
}

/* --- Desktop navigation --------------------------------------------------- */

.ivh-nav .elementor-nav-menu > li > a.elementor-item{
  position:relative;
  padding:10px 2px;
  font-family:var(--ivh-font-body);
  font-size:0.9375rem;
  font-weight:500;
  color:var(--ivh-text);
  fill:var(--ivh-text);
  transition:color var(--ivh-transition);
}

.ivh-nav .elementor-nav-menu > li > a.elementor-item:hover,
.ivh-nav .elementor-nav-menu > li > a.elementor-item.highlighted,
.ivh-nav .elementor-nav-menu > li > a.elementor-item:focus{ color:var(--ivh-heading); }

/* The underline is drawn with a pseudo-element rather than a border so it can
   animate from the centre without shifting the label. */
.ivh-nav .elementor-nav-menu > li > a.elementor-item::after{
  content:""; position:absolute; left:50%; bottom:2px;
  width:0; height:2px; border-radius:2px;
  background:var(--ivh-secondary);
  transform:translateX(-50%);
  transition:width var(--ivh-transition);
}
.ivh-nav .elementor-nav-menu > li > a.elementor-item:hover::after,
.ivh-nav .elementor-nav-menu > li > a.elementor-item:focus-visible::after,
.ivh-nav .elementor-nav-menu > li > a.elementor-item-active::after{ width:100%; }

/* Current page is marked by colour AND weight, never colour alone. */
.ivh-nav .elementor-nav-menu > li > a.elementor-item-active{ color:var(--ivh-heading); font-weight:600; }

.ivh-nav .elementor-nav-menu > li > a.elementor-item:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ivh-bg), 0 0 0 6px var(--ivh-secondary);
  border-radius:6px;
}

/* --- WhatsApp / support action ------------------------------------------- */

.ivh-header__wa .elementor-button{
  width:var(--ivh-tap); height:var(--ivh-tap); padding:0;
  border-radius:var(--ivh-radius-pill);
  background:var(--ivh-glass);
  border:1px solid var(--ivh-border);
  color:var(--ivh-secondary);
}
.ivh-header__wa .elementor-button:hover{
  background:var(--ivh-glass-strong);
  border-color:var(--ivh-secondary);
  color:var(--ivh-secondary-hover);
}
.ivh-header__wa .elementor-button-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

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

/* The burger keeps its "Menu" label rather than going icon-only. An icon
   with a word beside it is understood by more people than a bare hamburger,
   and it gives the control an accessible name without needing aria-label. */
.ivh-burger .elementor-button{
  min-width:var(--ivh-tap); min-height:var(--ivh-tap);
  padding:0 16px; gap:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ivh-glass);
  border:1px solid var(--ivh-border);
  border-radius:var(--ivh-radius-input);
  color:var(--ivh-heading);
  font-family:var(--ivh-font-body); font-size:var(--ivh-small); font-weight:600;
  transition:background-color var(--ivh-transition), border-color var(--ivh-transition);
}
.ivh-burger .elementor-button:hover{ background:var(--ivh-glass-strong); border-color:var(--ivh-border-strong); }
.ivh-burger .elementor-button svg{ width:16px; height:16px; fill:currentColor; }
.ivh-burger .elementor-button:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ivh-bg), 0 0 0 6px var(--ivh-secondary);
}

/* Below 380px the label is dropped so the logo keeps its room. */
@media (max-width:380px){
  .ivh-burger .elementor-button{ padding:0; width:var(--ivh-tap); }
  .ivh-burger .elementor-button-text{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }
}

/* --- Off-canvas panel ----------------------------------------------------- */

.ivh-offcanvas .elementor-off-canvas__main{
  background:var(--ivh-bg);
  border-left:1px solid var(--ivh-border);
}
.ivh-offcanvas .e-off-canvas__main,
.ivh-offcanvas .e-off-canvas{ background:var(--ivh-bg); }

/* Large targets. 56px rows rather than the 44px minimum, because a thumb
   reaching across a phone is less precise than a thumb at rest. */
.ivh-mobile-nav .elementor-nav-menu--dropdown a.elementor-item,
.ivh-mobile-nav .elementor-nav-menu a.elementor-item{
  min-height:56px;
  display:flex; align-items:center;
  padding:0 var(--ivh-space-5);
  font-family:var(--ivh-font-heading);
  font-size:1.125rem;
  font-weight:700;
  color:var(--ivh-text);
  border-bottom:1px solid var(--ivh-border);
  transition:background-color var(--ivh-transition), color var(--ivh-transition), padding-left var(--ivh-transition);
}
.ivh-mobile-nav .elementor-nav-menu a.elementor-item:hover,
.ivh-mobile-nav .elementor-nav-menu a.elementor-item:focus{
  background:var(--ivh-glass);
  color:var(--ivh-heading);
  padding-left:calc(var(--ivh-space-5) + 6px);
}
.ivh-mobile-nav .elementor-nav-menu a.elementor-item-active{ color:var(--ivh-secondary); }
.ivh-mobile-nav .elementor-nav-menu a.elementor-item:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 3px var(--ivh-secondary);
}

.ivh-offcanvas__foot{ margin-top:auto; }
.ivh-offcanvas__note{ font-size:var(--ivh-small); color:var(--ivh-muted); }


/* --- Footer ---------------------------------------------------------------- */

.ivh-footer{
  background:var(--ivh-surface);
  border-top:1px solid var(--ivh-border);
}

.ivh-footer__brand-text{ color:var(--ivh-muted); font-size:var(--ivh-small); line-height:1.7; max-width:34ch; }

.ivh-footer__col-title{
  font-family:var(--ivh-font-heading);
  font-size:var(--ivh-label);
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ivh-heading);
}

.ivh-footer-nav .elementor-nav-menu a.elementor-item{
  padding:7px 0;
  font-family:var(--ivh-font-body);
  font-size:var(--ivh-small);
  font-weight:400;
  color:var(--ivh-muted);
  transition:color var(--ivh-transition), padding-left var(--ivh-transition);
}
.ivh-footer-nav .elementor-nav-menu a.elementor-item:hover,
.ivh-footer-nav .elementor-nav-menu a.elementor-item:focus{ color:var(--ivh-secondary); padding-left:4px; }
.ivh-footer-nav .elementor-nav-menu a.elementor-item:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ivh-surface), 0 0 0 6px var(--ivh-secondary);
  border-radius:4px;
}

.ivh-footer__social .elementor-social-icon{
  width:40px; height:40px;
  background:var(--ivh-glass);
  border:1px solid var(--ivh-border);
  border-radius:var(--ivh-radius-pill);
  color:var(--ivh-muted);
  transition:color var(--ivh-transition), border-color var(--ivh-transition), background-color var(--ivh-transition);
}
.ivh-footer__social .elementor-social-icon:hover{ background:var(--ivh-glass-strong); border-color:var(--ivh-secondary); color:var(--ivh-secondary); }

.ivh-footer__bar{ border-top:1px solid var(--ivh-border); }
.ivh-footer__copy{ font-size:var(--ivh-small); color:var(--ivh-muted); }

/* Placeholder links are visually flagged so an unfinished URL cannot ship
   unnoticed. Removing the class removes the flag. */
.ivh-placeholder{ position:relative; }
.ivh-placeholder::after{
  content:"placeholder";
  font-family:var(--ivh-font-body); font-size:10px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase;
  color:#FFB020; margin-left:6px; opacity:0.85;
}


/* --- Header and footer responsive ----------------------------------------- */

@media (max-width:1365px){
  :root{ --ivh-header-h:80px; --ivh-header-h-scrolled:68px; }
  .ivh-nav .elementor-nav-menu > li > a.elementor-item{ font-size:0.875rem; }
}

@media (max-width:1024px){
  :root{ --ivh-header-h:72px; --ivh-header-h-scrolled:64px; }
  .ivh-header__logo .elementor-widget-image a img[src$=".svg"],
  .ivh-header__logo .elementor-widget-image img,
  .ivh-header__logo img,
  .ivh-header__logo svg{ width:166px; height:32px; }
}

@media (max-width:767px){
  :root{ --ivh-header-h:64px; --ivh-header-h-scrolled:60px; }
  .ivh-header__logo .elementor-widget-image a img[src$=".svg"],
  .ivh-header__logo .elementor-widget-image img,
  .ivh-header__logo img,
  .ivh-header__logo svg{ width:146px; height:28px; }
  .ivh-footer__social{ justify-content:flex-start; }
  .ivh-footer__brand-text{ max-width:none; }
}


/* =========================================================================
   3. BUTTONS

   Four variants. The constraint that shapes all of them: #6C4DF6 on #0B0B12
   measures 3.76:1, which passes WCAG AA for large text and UI components
   but FAILS for body text. Purple is therefore a FILL only. White sits on
   purple; purple never sits on the dark background as text.

   The outline variant uses teal text (#00D3B8 on #0B0B12 is about 9.8:1)
   precisely because purple text would not be readable.
   ========================================================================= */

.ivh-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--ivh-space-2);
  min-height:var(--ivh-tap);
  padding:16px 30px;
  font-family:var(--ivh-font-body);
  font-size:1rem;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  border-radius:var(--ivh-radius-btn);
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:background-color var(--ivh-transition),
             border-color var(--ivh-transition),
             color var(--ivh-transition),
             box-shadow var(--ivh-transition),
             transform var(--ivh-transition);
  /* Stops a long label from breaking the button box on small screens. */
  max-width:100%;
}

.ivh-btn:focus-visible{outline:3px solid var(--ivh-secondary); outline-offset:3px;}

/* The press state is deliberately small. A 1px settle reads as responsive;
   anything larger reads as a toy. */
.ivh-btn:active{transform:translateY(1px);}

.ivh-btn[disabled],
.ivh-btn[aria-disabled="true"]{
  opacity:0.45;
  cursor:not-allowed;
  pointer-events:none;
}

/* --- Primary: the one action per screen that matters most ---------------- */
.ivh-btn--primary{
  background:var(--ivh-primary);
  color:#FFFFFF;
  box-shadow:var(--ivh-glow-primary);
}
.ivh-btn--primary:hover,
.ivh-btn--primary:focus-visible{
  background:var(--ivh-primary-hover);
  color:#FFFFFF;
  box-shadow:0 0 70px -18px rgba(108,77,246,0.75);
  transform:translateY(-2px);
}
.ivh-btn--primary:active{background:var(--ivh-primary-deep); transform:translateY(1px);}

/* --- Secondary: teal fill, dark ink. #00D3B8 with #0B0B12 text is about
       11:1, so this is the most readable button in the set. --------------- */
.ivh-btn--secondary{
  background:var(--ivh-secondary);
  color:#06210E;
  box-shadow:var(--ivh-glow-secondary);
}
.ivh-btn--secondary:hover,
.ivh-btn--secondary:focus-visible{
  background:var(--ivh-secondary-hover);
  color:#06210E;
  box-shadow:0 0 70px -18px rgba(0,211,184,0.65);
  transform:translateY(-2px);
}
.ivh-btn--secondary:active{transform:translateY(1px);}

/* --- Outline: the quiet partner to primary ------------------------------- */
.ivh-btn--outline{
  background:rgba(255,255,255,0.055);
  border-color:var(--ivh-border-strong);
  color:var(--ivh-secondary);
}
.ivh-btn--outline:hover,
.ivh-btn--outline:focus-visible{
  background:var(--ivh-glass-strong);
  border-color:var(--ivh-secondary);
  color:var(--ivh-secondary-hover);
  transform:translateY(-2px);
}
.ivh-btn--outline:active{transform:translateY(1px);}

/* --- Ghost: tertiary, for cancel and low-stakes links -------------------- */
.ivh-btn--ghost{background:transparent; color:var(--ivh-text); border-color:transparent;}
.ivh-btn--ghost:hover,
.ivh-btn--ghost:focus-visible{background:var(--ivh-glass); color:var(--ivh-heading);}

/* --- Sizes --------------------------------------------------------------- */
.ivh-btn--sm{padding:11px 20px; font-size:var(--ivh-small); min-height:var(--ivh-tap);}
.ivh-btn--lg{padding:19px 38px; font-size:1.0625rem;}
.ivh-btn--full{display:flex; width:100%;}

/* Icon-only. Always pair with .ivh-sr-only text or aria-label, or the button
   is silent to a screen reader. */
.ivh-btn--icon{width:var(--ivh-tap); height:var(--ivh-tap); padding:0; border-radius:var(--ivh-radius-pill);}


/* =========================================================================
   4. CARDS
   ========================================================================= */

.ivh-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--ivh-space-4);
  padding:var(--ivh-space-8);
  background:var(--ivh-surface);
  border:1px solid var(--ivh-border);
  border-radius:var(--ivh-radius-card);
  transition:transform var(--ivh-transition),
             border-color var(--ivh-transition),
             box-shadow var(--ivh-transition),
             background-color var(--ivh-transition);
}

.ivh-card--glass{
  /* Solid translucent fill rather than
}

.ivh-card--raised{background:var(--ivh-surface-raised);}

/* Hover is applied on the card itself and mirrored on :focus-within, so a
   keyboard user tabbing to a link inside the card sees the same state a
   mouse user sees. */
.ivh-card--hover:hover,
.ivh-card--hover:focus-within{
  transform:translateY(-4px);
  border-color:var(--ivh-border-strong);
  box-shadow:var(--ivh-lift), var(--ivh-glow-primary);
}

.ivh-card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  border-radius:var(--ivh-radius-input);
  background:linear-gradient(140deg, rgba(108,77,246,0.22), rgba(0,211,184,0.14));
  border:1px solid var(--ivh-border);
  color:var(--ivh-secondary);
  font-size:24px;
  flex:0 0 auto;
}
.ivh-card__icon svg{width:26px; height:26px; fill:currentColor;}

.ivh-card__title{font-family:var(--ivh-font-heading); font-size:var(--ivh-h3); font-weight:700; color:var(--ivh-heading); margin:0;}
.ivh-card__text{color:var(--ivh-muted); font-size:var(--ivh-body); margin:0;}
.ivh-card__foot{margin-top:auto; padding-top:var(--ivh-space-2);}

/* --- Feature / icon box -------------------------------------------------- */
.ivh-feature{text-align:left;}
.ivh-feature--center{text-align:center; align-items:center;}
.ivh-feature--center .ivh-card__text{max-width:34ch;}

/* --- Device card. Compact, logo-led, whole card is one link. ------------- */
.ivh-device{
  align-items:center;
  text-align:center;
  gap:var(--ivh-space-3);
  padding:var(--ivh-space-6);
}
.ivh-device__logo{
  height:44px; width:auto; max-width:100%;
  object-fit:contain;
  /* Mixed-brand device logos arrive in clashing colours. Desaturating at rest
     and restoring on hover keeps the grid calm without editing the assets. */
  filter:grayscale(1) brightness(1.6); opacity:0.75;
  transition:filter var(--ivh-transition), opacity var(--ivh-transition);
}
.ivh-device:hover .ivh-device__logo,
.ivh-device:focus-within .ivh-device__logo{filter:none; opacity:1;}
.ivh-device__name{font-family:var(--ivh-font-heading); font-weight:700; font-size:1rem; color:var(--ivh-heading);}
.ivh-device__meta{font-size:var(--ivh-small); color:var(--ivh-muted);}

/* --- Blog card ----------------------------------------------------------- */
.ivh-post{padding:0; overflow:hidden; gap:0;}
.ivh-post__media{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ivh-surface-raised);}
.ivh-post__media img{width:100%; height:100%; object-fit:cover; transition:transform 400ms cubic-bezier(0.4,0,0.2,1);}
.ivh-post:hover .ivh-post__media img{transform:scale(1.04);}
.ivh-post__body{display:flex; flex-direction:column; gap:var(--ivh-space-3); padding:var(--ivh-space-6);}
.ivh-post__meta{display:flex; flex-wrap:wrap; gap:var(--ivh-space-3); font-size:var(--ivh-small); color:var(--ivh-muted);}
.ivh-post__title{font-family:var(--ivh-font-heading); font-size:1.25rem; font-weight:700; line-height:1.3; color:var(--ivh-heading); margin:0;}
.ivh-post__title a{color:inherit;}
.ivh-post__title a:hover{color:var(--ivh-secondary);}
.ivh-post__excerpt{color:var(--ivh-muted); font-size:var(--ivh-small); margin:0;}

/* --- Channel card. Dense by design: a directory of hundreds should read as
       a directory, not as hundreds of marketing cards. -------------------- */
.ivh-channel{
  flex-direction:row; align-items:center; gap:var(--ivh-space-4);
  padding:var(--ivh-space-4) var(--ivh-space-5);
}
.ivh-channel__logo{
  width:48px; height:48px; flex:0 0 48px;
  object-fit:contain;
  background:var(--ivh-surface-raised);
  border-radius:10px; padding:6px;
}
.ivh-channel__body{display:flex; flex-direction:column; gap:2px; min-width:0;}
.ivh-channel__name{
  font-family:var(--ivh-font-heading); font-weight:700; font-size:0.9375rem; color:var(--ivh-heading);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ivh-channel__meta{font-size:var(--ivh-small); color:var(--ivh-muted);}
.ivh-channel__quality{margin-left:auto; flex:0 0 auto;}


/* =========================================================================
   BADGES
   ========================================================================= */

.ivh-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  font-family:var(--ivh-font-heading);
  font-size:var(--ivh-label);
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  line-height:1.2;
  border-radius:var(--ivh-radius-pill);
  border:1px solid var(--ivh-border);
  background:var(--ivh-glass);
  color:var(--ivh-text);
  white-space:nowrap;
}

/* Tinted background rather than solid purple, so the label text stays white
   and well clear of the AA threshold. */
.ivh-badge--primary{background:rgba(108,77,246,0.18); border-color:rgba(108,77,246,0.42); color:#FFFFFF;}
.ivh-badge--secondary{background:rgba(0,211,184,0.14); border-color:rgba(0,211,184,0.40); color:var(--ivh-secondary);}
.ivh-badge--solid{background:var(--ivh-primary); border-color:var(--ivh-primary); color:#FFFFFF;}

/* --- Trust badge row: the strip under the hero CTA ----------------------- */
.ivh-trust-row{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--ivh-space-3) var(--ivh-space-6);
}
.ivh-trust{
  display:inline-flex; align-items:center; gap:var(--ivh-space-2);
  font-size:var(--ivh-small); color:var(--ivh-muted);
}
.ivh-trust__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex:0 0 32px;
  border-radius:var(--ivh-radius-pill);
  background:var(--ivh-glass); border:1px solid var(--ivh-border);
  color:var(--ivh-secondary);
}
.ivh-trust strong{color:var(--ivh-text); font-weight:600;}


/* =========================================================================
   SECTION HEADINGS
   ========================================================================= */

.ivh-sec-head{display:flex; flex-direction:column; gap:var(--ivh-space-4); max-width:60ch;}
.ivh-sec-head--center{align-items:center; text-align:center; margin-inline:auto;}
.ivh-sec-head__label{
  font-family:var(--ivh-font-heading); font-size:var(--ivh-label); font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ivh-secondary);
}
.ivh-sec-head__title{font-size:var(--ivh-h2); margin:0;}
.ivh-sec-head__sub{font-size:var(--ivh-lead); color:var(--ivh-muted); margin:0;}


/* =========================================================================
   CTA BLOCK
   ========================================================================= */

.ivh-cta{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; gap:var(--ivh-space-6);
  padding:clamp(40px,6vw,80px) clamp(24px,5vw,64px);
  text-align:center;
  border:1px solid var(--ivh-border);
  border-radius:var(--ivh-radius-card);
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(108,77,246,0.30) 0%, transparent 55%),
    radial-gradient(120% 140% at 85% 100%, rgba(0,211,184,0.20) 0%, transparent 55%),
    var(--ivh-surface);
}
.ivh-cta__title{font-size:var(--ivh-h2); margin:0; max-width:22ch;}
.ivh-cta__text{color:var(--ivh-text); font-size:var(--ivh-lead); margin:0; max-width:52ch;}
.ivh-cta__actions{display:flex; flex-wrap:wrap; gap:var(--ivh-space-4); justify-content:center;}
.ivh-cta__note{font-size:var(--ivh-small); color:var(--ivh-muted); margin:0;}


/* =========================================================================
   FORM FIELDS
   ========================================================================= */

.ivh-field{display:flex; flex-direction:column; gap:var(--ivh-space-2); margin-bottom:var(--ivh-space-5);}

.ivh-field__label{font-size:var(--ivh-small); font-weight:600; color:var(--ivh-text);}
.ivh-field__label .ivh-req{color:var(--ivh-secondary); margin-left:2px;}

.ivh-input,
.ivh-field input[type="text"],
.ivh-field input[type="email"],
.ivh-field input[type="tel"],
.ivh-field input[type="number"],
.ivh-field input[type="password"],
.ivh-field select,
.ivh-field textarea{
  width:100%;
  min-height:var(--ivh-tap);
  padding:13px 16px;
  font-family:var(--ivh-font-body);
  font-size:1rem;
  line-height:1.5;
  color:var(--ivh-text);
  background:var(--ivh-surface);
  border:1px solid var(--ivh-border-strong);
  border-radius:var(--ivh-radius-input);
  transition:border-color var(--ivh-transition), box-shadow var(--ivh-transition), background-color var(--ivh-transition);
  appearance:none;
}

/* Placeholder contrast: #9494A7 on #14141F is about 5.4:1, which passes AA.
   Anything lighter would look tidier and fail. */
.ivh-input::placeholder,
.ivh-field input::placeholder,
.ivh-field textarea::placeholder{color:var(--ivh-muted); opacity:1;}

.ivh-input:hover,
.ivh-field input:hover,
.ivh-field select:hover,
.ivh-field textarea:hover{border-color:rgba(255,255,255,0.22);}

.ivh-input:focus,
.ivh-field input:focus,
.ivh-field select:focus,
.ivh-field textarea:focus{
  outline:none;
  border-color:var(--ivh-secondary);
  background:var(--ivh-surface-raised);
  box-shadow:0 0 0 3px rgba(0,211,184,0.22);
}

.ivh-field textarea{min-height:140px; resize:vertical;}

.ivh-field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239494A7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px;
  padding-right:44px;
}

.ivh-field__help{font-size:var(--ivh-small); color:var(--ivh-muted);}

/* Error state carries an icon and text, never colour alone. Colour-only error
   signalling is invisible to a colour-blind user and fails WCAG 1.4.1. */
.ivh-field--error .ivh-input,
.ivh-field--error input,
.ivh-field--error select,
.ivh-field--error textarea{border-color:var(--ivh-error); background:var(--ivh-error-bg);}
.ivh-field__error{display:flex; align-items:center; gap:6px; font-size:var(--ivh-small); color:var(--ivh-error);}
.ivh-field__error::before{content:"\26A0"; font-size:0.9em;}

.ivh-field--success .ivh-input,
.ivh-field--success input{border-color:var(--ivh-success);}

.ivh-field--disabled,
.ivh-input:disabled,
.ivh-field input:disabled,
.ivh-field textarea:disabled{opacity:0.5; cursor:not-allowed;}

/* Checkbox and radio. Sized to 22px with a 44px hit area via the label. */
.ivh-check{display:flex; align-items:flex-start; gap:var(--ivh-space-3); cursor:pointer; min-height:var(--ivh-tap); padding-block:10px;}
.ivh-check input[type="checkbox"],
.ivh-check input[type="radio"]{
  width:22px; height:22px; flex:0 0 22px; margin-top:2px;
  accent-color:var(--ivh-primary);
  cursor:pointer;
}
.ivh-check__text{font-size:var(--ivh-small); color:var(--ivh-muted); line-height:1.6;}
.ivh-check__text a{text-decoration:underline;}

/* Form-level feedback, announced via aria-live in the markup. */
.ivh-form__message{padding:var(--ivh-space-4) var(--ivh-space-5); border-radius:var(--ivh-radius-input); font-size:var(--ivh-small);}
.ivh-form__message--success{background:rgba(0,211,184,0.12); border:1px solid rgba(0,211,184,0.40); color:var(--ivh-secondary);}
.ivh-form__message--error{background:var(--ivh-error-bg); border:1px solid rgba(255,107,107,0.40); color:var(--ivh-error);}

/* =========================================================================
   5. PRICING

   The visual card is presentation only. Every price rendered inside it comes
   from a WooCommerce variation via ivh_get_plan_matrix() in
   inc/woocommerce.php. Nothing here, and nothing in ivh.js, ever calculates
   or stores a price.
   ========================================================================= */

.ivh-pricing{display:grid; gap:var(--ivh-gap-grid); grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch;}

.ivh-price-card{
  position:relative;
  display:flex; flex-direction:column; gap:var(--ivh-space-5);
  padding:var(--ivh-space-8);
  background:var(--ivh-surface);
  border:1px solid var(--ivh-border);
  border-radius:var(--ivh-radius-card);
  transition:transform var(--ivh-transition), border-color var(--ivh-transition), box-shadow var(--ivh-transition);
}
.ivh-price-card:hover,
.ivh-price-card:focus-within{transform:translateY(-4px); border-color:var(--ivh-border-strong); box-shadow:var(--ivh-lift);}

/* The featured plan is raised by scale and glow rather than by a louder
   colour, which keeps the row calm and still makes the choice obvious. */
.ivh-price-card--featured{
  border-color:rgba(108,77,246,0.50);
  background:linear-gradient(180deg, rgba(108,77,246,0.10) 0%, var(--ivh-surface) 42%);
  box-shadow:var(--ivh-glow-primary);
  transform:scale(1.035);
  z-index:1;
}
.ivh-price-card--featured:hover,
.ivh-price-card--featured:focus-within{transform:scale(1.035) translateY(-4px); box-shadow:var(--ivh-lift-strong), 0 0 70px -18px rgba(108,77,246,0.70);}

.ivh-price-card__badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%);}

.ivh-price-card__name{font-family:var(--ivh-font-heading); font-size:1.25rem; font-weight:700; color:var(--ivh-heading); margin:0;}
.ivh-price-card__desc{font-size:var(--ivh-small); color:var(--ivh-muted); margin:0;}

.ivh-price-card__amount{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px;}
.ivh-price-card__value{font-family:var(--ivh-font-heading); font-size:2.5rem; font-weight:700; line-height:1.05; letter-spacing:-0.02em; color:var(--ivh-heading);}
.ivh-price-card__period{font-size:var(--ivh-small); color:var(--ivh-muted);}

/* Only rendered when a genuine sale price exists on the variation. */
.ivh-price-card__was{font-size:1rem; color:var(--ivh-muted); text-decoration:line-through;}
.ivh-price-card__save{margin-left:auto;}

.ivh-price-card__features{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--ivh-space-3);}
.ivh-price-card__features li{position:relative; padding-left:30px; font-size:var(--ivh-small); color:var(--ivh-text); line-height:1.6;}
.ivh-price-card__features li::before{
  content:""; position:absolute; left:0; top:3px; width:18px; height:18px;
  background:rgba(0,211,184,0.14); border:1px solid rgba(0,211,184,0.40); border-radius:var(--ivh-radius-pill);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300D3B8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:11px;
}
.ivh-price-card__features li.is-off{color:var(--ivh-muted);}
.ivh-price-card__features li.is-off::before{background:var(--ivh-glass); border-color:var(--ivh-border); background-image:none;}

.ivh-price-card__cta{margin-top:auto;}
.ivh-price-card__note{font-size:var(--ivh-small); color:var(--ivh-muted); text-align:center; margin:0;}

/* --- Connection selector -------------------------------------------------
   Real radio inputs, visually replaced. Keeping the input means arrow-key
   navigation, form semantics and screen-reader announcement all work for
   free; a div-based toggle would have to reimplement all three and usually
   reimplements none. ------------------------------------------------------ */

.ivh-switch{display:inline-flex; padding:5px; gap:4px; background:var(--ivh-surface); border:1px solid var(--ivh-border); border-radius:var(--ivh-radius-pill);}
.ivh-switch__opt{position:relative; display:inline-flex;}
.ivh-switch__opt input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.ivh-switch__opt span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--ivh-tap); min-height:38px; padding:0 18px;
  font-family:var(--ivh-font-body); font-size:var(--ivh-small); font-weight:600;
  color:var(--ivh-muted); border-radius:var(--ivh-radius-pill);
  transition:background-color var(--ivh-transition), color var(--ivh-transition);
  cursor:pointer;
}
.ivh-switch__opt input:hover + span{color:var(--ivh-text);}
.ivh-switch__opt input:checked + span{background:var(--ivh-primary); color:#FFFFFF;}
.ivh-switch__opt input:focus-visible + span{outline:3px solid var(--ivh-secondary); outline-offset:2px;}


/* =========================================================================
   6. TESTIMONIALS

   The .ivh-quote--unverified modifier exists so that placeholder or
   unverified feedback can never be styled to look like a confirmed purchase.
   The verified tick is opt-in, not the default.
   ========================================================================= */

.ivh-quote{
  display:flex; flex-direction:column; gap:var(--ivh-space-4);
  padding:var(--ivh-space-8);
  background:var(--ivh-glass);
  border:1px solid var(--ivh-border);
  border-radius:var(--ivh-radius-card);
  transition:transform var(--ivh-transition), border-color var(--ivh-transition), box-shadow var(--ivh-transition);
  height:100%;
}
.ivh-quote:hover{transform:translateY(-4px); border-color:var(--ivh-border-strong); box-shadow:var(--ivh-lift);}

.ivh-quote__stars{display:inline-flex; gap:3px; color:var(--ivh-secondary); font-size:15px; letter-spacing:2px;}
.ivh-quote__text{color:var(--ivh-text); font-size:var(--ivh-body); line-height:1.7; margin:0;}
.ivh-quote__person{display:flex; align-items:center; gap:var(--ivh-space-3); margin-top:auto; padding-top:var(--ivh-space-2);}
.ivh-quote__avatar{width:44px; height:44px; flex:0 0 44px; border-radius:var(--ivh-radius-pill); object-fit:cover; background:var(--ivh-surface-raised); border:1px solid var(--ivh-border);}
.ivh-quote__name{font-family:var(--ivh-font-heading); font-weight:700; font-size:0.9375rem; color:var(--ivh-heading); display:flex; align-items:center; gap:6px;}
.ivh-quote__meta{font-size:var(--ivh-small); color:var(--ivh-muted);}
.ivh-quote__verified{color:var(--ivh-secondary); display:inline-flex;}
.ivh-quote--unverified .ivh-quote__verified{display:none;}


/* =========================================================================
   7. FAQ

   Built on <details>/<summary>. Native disclosure gives keyboard operation,
   correct screen-reader announcement and expand/collapse state with no
   JavaScript at all. An Elementor accordion widget can also carry these
   classes; the markup below is the fallback and the reference.
   ========================================================================= */

.ivh-faq{display:flex; flex-direction:column; gap:var(--ivh-space-3);}

.ivh-faq__item{
  background:var(--ivh-surface);
  border:1px solid var(--ivh-border);
  border-radius:var(--ivh-radius-input);
  overflow:hidden;
  transition:border-color var(--ivh-transition), background-color var(--ivh-transition);
}
.ivh-faq__item:hover{border-color:var(--ivh-border-strong);}
.ivh-faq__item[open]{border-color:rgba(108,77,246,0.40); background:var(--ivh-surface-raised);}

.ivh-faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:var(--ivh-space-4);
  min-height:var(--ivh-tap);
  padding:var(--ivh-space-5) var(--ivh-space-6);
  font-family:var(--ivh-font-heading); font-size:1.0625rem; font-weight:700;
  color:var(--ivh-heading); cursor:pointer; list-style:none;
}
.ivh-faq__q::-webkit-details-marker{display:none;}
.ivh-faq__q:focus-visible{outline:3px solid var(--ivh-secondary); outline-offset:-3px;}

.ivh-faq__icon{
  flex:0 0 24px; width:24px; height:24px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ivh-secondary);
  transition:transform var(--ivh-transition);
}
.ivh-faq__item[open] .ivh-faq__icon{transform:rotate(45deg);}

.ivh-faq__a{padding:0 var(--ivh-space-6) var(--ivh-space-6); color:var(--ivh-muted); font-size:var(--ivh-body); line-height:1.7;}
.ivh-faq__a p:last-child{margin-bottom:0;}


/* =========================================================================
   8. FOOTER                                                        Phase 4
   ========================================================================= */


/* =========================================================================
   9. RESPONSIVE

   Breakpoints match the Elementor kit exactly: laptop 1365, tablet 1024,
   mobile 767. Each step is a deliberate redesign of the affected component,
   not a proportional shrink.
   ========================================================================= */

/* --- Laptop 1024-1365 ---------------------------------------------------- */
@media (max-width:1365px){
  .ivh-pricing{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* Scaling the featured card inside a 2-up grid causes it to overlap its
     neighbour, so the emphasis moves entirely to the glow. */
  .ivh-price-card--featured{transform:none;}
  .ivh-price-card--featured:hover,
  .ivh-price-card--featured:focus-within{transform:translateY(-4px);}
  .ivh-grid--4{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* --- Tablet 768-1024 ----------------------------------------------------- */
@media (max-width:1024px){
  html{scroll-padding-top:80px;}
  .ivh-grid--3,
  .ivh-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ivh-card{padding:var(--ivh-space-6);}
  .ivh-price-card{padding:var(--ivh-space-6);}
  .ivh-quote{padding:var(--ivh-space-6);}
  .ivh-sec-head{max-width:none;}
}

/* --- Mobile up to 767 ---------------------------------------------------- */
@media (max-width:767px){
  html{scroll-padding-top:72px;}
  :root{--ivh-body:1rem; --ivh-gap-grid:16px;}

  .ivh-grid--2,
  .ivh-grid--3,
  .ivh-grid--4,
  .ivh-pricing{grid-template-columns:minmax(0,1fr);}

  /* Full-width buttons on mobile: a centred pill with a thumb-sized target
     either side is harder to hit than an edge-to-edge bar. */
  .ivh-cta__actions{width:100%; flex-direction:column;}
  .ivh-cta__actions .ivh-btn{width:100%;}
  .ivh-btn--lg{padding:17px 28px; font-size:1rem;}

  .ivh-card,
  .ivh-price-card,
  .ivh-quote{padding:var(--ivh-space-5);}

  .ivh-card__icon{width:48px; height:48px;}
  .ivh-price-card__value{font-size:2.125rem;}

  .ivh-faq__q{padding:var(--ivh-space-4) var(--ivh-space-5); font-size:1rem;}
  .ivh-faq__a{padding:0 var(--ivh-space-5) var(--ivh-space-5);}

  /* The trust row becomes a stacked list rather than a wrapping strip, which
     otherwise breaks into ragged orphans at ~360px. */
  .ivh-trust-row{flex-direction:column; align-items:flex-start; gap:var(--ivh-space-3);}

  /* A horizontal switch with five options cannot fit 360px. It scrolls. */
  .ivh-switch{width:100%; overflow-x:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch;}
  .ivh-switch__opt span{padding:0 14px;}

  .ivh-channel{padding:var(--ivh-space-3) var(--ivh-space-4);}
  .ivh-device__logo{height:36px;}
}

/* --- Very small phones --------------------------------------------------- */
@media (max-width:380px){
  .ivh-card,
  .ivh-price-card,
  .ivh-quote{padding:var(--ivh-space-4);}
  .ivh-btn{padding:15px 22px;}
}

/* --- Print: strip the dark theme so a plan or invoice is legible on paper */
@media print{
  body{background:#FFF; color:#000;}
  .ivh-card,.ivh-price-card,.ivh-quote{border-color:#CCC; background:#FFF; box-shadow:none;}
  .ivh-btn{display:none;}
}

/* =========================================================================
   10. ELEMENTOR BRIDGE

   Elementor widgets render their own wrappers, so a class added in the
   "CSS Classes" field lands on the OUTER widget div, not on the <a>, <input>
   or accordion item inside it.

   This layer maps the design system onto native widget output. The practical
   effect: you build with the normal Elementor Button, Form, Accordion and
   Icon Box widgets, add one wrapper class, and the component looks right.
   Nobody has to hand-write HTML to stay on-system, which is what keeps the
   whole site editable by a non-developer.
   ========================================================================= */

/* --- Buttons ------------------------------------------------------------- */

.ivh-btn-primary .elementor-button,
.ivh-btn-secondary .elementor-button,
.ivh-btn-outline .elementor-button,
.ivh-btn-ghost .elementor-button{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--ivh-space-2);
  min-height:var(--ivh-tap);
  padding:16px 30px;
  font-family:var(--ivh-font-body); font-size:1rem; font-weight:600; line-height:1.2;
  border-radius:var(--ivh-radius-btn);
  border:1px solid transparent;
  transition:background-color var(--ivh-transition), border-color var(--ivh-transition),
             color var(--ivh-transition), box-shadow var(--ivh-transition), transform var(--ivh-transition);
}

.ivh-btn-primary .elementor-button{background:var(--ivh-primary); color:#FFFFFF; box-shadow:var(--ivh-glow-primary);}
.ivh-btn-primary .elementor-button:hover,
.ivh-btn-primary .elementor-button:focus-visible{background:var(--ivh-primary-hover); color:#FFFFFF; box-shadow:0 0 70px -18px rgba(108,77,246,0.75); transform:translateY(-2px);}
.ivh-btn-primary .elementor-button:active{background:var(--ivh-primary-deep); transform:translateY(1px);}

.ivh-btn-secondary .elementor-button{background:var(--ivh-secondary); color:#06210E; box-shadow:var(--ivh-glow-secondary);}
.ivh-btn-secondary .elementor-button:hover,
.ivh-btn-secondary .elementor-button:focus-visible{background:var(--ivh-secondary-hover); color:#06210E; transform:translateY(-2px);}

.ivh-btn-outline .elementor-button{
  background:rgba(255,255,255,0.055); border-color:var(--ivh-border-strong); color:var(--ivh-secondary);
}
.ivh-btn-outline .elementor-button:hover,
.ivh-btn-outline .elementor-button:focus-visible{background:var(--ivh-glass-strong); border-color:var(--ivh-secondary); color:var(--ivh-secondary-hover); transform:translateY(-2px);}

.ivh-btn-ghost .elementor-button{background:transparent; color:var(--ivh-text);}
.ivh-btn-ghost .elementor-button:hover{background:var(--ivh-glass); color:var(--ivh-heading);}

.ivh-btn-lg .elementor-button{padding:19px 38px; font-size:1.0625rem;}
.ivh-btn-sm .elementor-button{padding:11px 20px; font-size:var(--ivh-small);}

.elementor-button:focus-visible{outline:3px solid var(--ivh-secondary); outline-offset:3px;}

@media (max-width:767px){
  .ivh-btn-block .elementor-button{width:100%;}
}

/* --- Containers styled as cards ------------------------------------------ */

.ivh-card-container{
  background:var(--ivh-surface);
  border:1px solid var(--ivh-border);
  border-radius:var(--ivh-radius-card);
  transition:transform var(--ivh-transition), border-color var(--ivh-transition), box-shadow var(--ivh-transition);
}
.ivh-card-container.ivh-is-glass{background:rgba(255,255,255,0.055);}
.ivh-card-container.ivh-is-hover:hover,
.ivh-card-container.ivh-is-hover:focus-within{transform:translateY(-4px); border-color:var(--ivh-border-strong); box-shadow:var(--ivh-lift), var(--ivh-glow-primary);}

/* --- Icon Box widget ----------------------------------------------------- */

.ivh-iconbox .elementor-icon{
  width:56px; height:56px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--ivh-radius-input);
  background:linear-gradient(140deg, rgba(108,77,246,0.22), rgba(0,211,184,0.14));
  border:1px solid var(--ivh-border);
  color:var(--ivh-secondary);
}
.ivh-iconbox .elementor-icon svg{width:26px; height:26px;}
.ivh-iconbox .elementor-icon-box-title{font-family:var(--ivh-font-heading); font-size:var(--ivh-h3); font-weight:700; color:var(--ivh-heading);}
.ivh-iconbox .elementor-icon-box-description{color:var(--ivh-muted); font-size:var(--ivh-body); line-height:1.7;}

@media (max-width:767px){ .ivh-iconbox .elementor-icon{width:48px; height:48px;} }

/* --- Form widget ---------------------------------------------------------
   Elementor Pro Forms are the form engine for this site, so the field styling
   has to reach inside the widget rather than expecting our own markup. ---- */

.ivh-form .elementor-field-group{margin-bottom:var(--ivh-space-5);}

.ivh-form .elementor-field-label{
  font-family:var(--ivh-font-body); font-size:var(--ivh-small); font-weight:600;
  color:var(--ivh-text); margin-bottom:var(--ivh-space-2);
}

.ivh-form .elementor-field-textual{
  width:100%; min-height:var(--ivh-tap);
  padding:13px 16px;
  font-family:var(--ivh-font-body); font-size:1rem; line-height:1.5;
  color:var(--ivh-text);
  background:var(--ivh-surface);
  border:1px solid var(--ivh-border-strong);
  border-radius:var(--ivh-radius-input);
  transition:border-color var(--ivh-transition), box-shadow var(--ivh-transition), background-color var(--ivh-transition);
}
.ivh-form .elementor-field-textual::placeholder{color:var(--ivh-muted); opacity:1;}
.ivh-form .elementor-field-textual:hover{border-color:rgba(255,255,255,0.22);}
.ivh-form .elementor-field-textual:focus{
  outline:none; border-color:var(--ivh-secondary); background:var(--ivh-surface-raised);
  box-shadow:0 0 0 3px rgba(0,211,184,0.22);
}
.ivh-form textarea.elementor-field-textual{min-height:140px; resize:vertical;}

.ivh-form .elementor-field-type-acceptance .elementor-field-option{display:flex; align-items:flex-start; gap:var(--ivh-space-3); min-height:var(--ivh-tap); padding-block:10px;}
.ivh-form .elementor-field-type-acceptance input[type="checkbox"]{width:22px; height:22px; flex:0 0 22px; margin-top:2px; accent-color:var(--ivh-primary);}
.ivh-form .elementor-field-type-acceptance label{font-size:var(--ivh-small); color:var(--ivh-muted); line-height:1.6;}

.ivh-form .elementor-button[type="submit"]{
  min-height:var(--ivh-tap); padding:16px 30px;
  background:var(--ivh-primary); color:#FFFFFF;
  font-family:var(--ivh-font-body); font-weight:600; font-size:1rem;
  border-radius:var(--ivh-radius-btn); border:1px solid transparent;
  box-shadow:var(--ivh-glow-primary);
  transition:background-color var(--ivh-transition), transform var(--ivh-transition), box-shadow var(--ivh-transition);
}
.ivh-form .elementor-button[type="submit"]:hover{background:var(--ivh-primary-hover); transform:translateY(-2px);}

/* Elementor marks invalid fields with .elementor-error. Colour alone is not
   an accessible signal, so the message text is what carries the meaning and
   the border only reinforces it. */
.ivh-form .elementor-field-group.elementor-error .elementor-field-textual{border-color:var(--ivh-error); background:var(--ivh-error-bg);}
.ivh-form .elementor-message.elementor-message-danger{color:var(--ivh-error); font-size:var(--ivh-small);}
.ivh-form .elementor-message.elementor-message-success{
  color:var(--ivh-secondary); font-size:var(--ivh-small);
  padding:var(--ivh-space-4) var(--ivh-space-5);
  background:rgba(0,211,184,0.12); border:1px solid rgba(0,211,184,0.40);
  border-radius:var(--ivh-radius-input);
}

/* --- Accordion widget (nested accordion / toggle) ------------------------ */

.ivh-accordion .e-n-accordion-item,
.ivh-accordion .elementor-accordion-item{
  background:var(--ivh-surface);
  border:1px solid var(--ivh-border) !important;
  border-radius:var(--ivh-radius-input);
  overflow:hidden;
  margin-bottom:var(--ivh-space-3);
  transition:border-color var(--ivh-transition), background-color var(--ivh-transition);
}
.ivh-accordion .e-n-accordion-item:hover{border-color:var(--ivh-border-strong) !important;}
.ivh-accordion .e-n-accordion-item[open]{border-color:rgba(108,77,246,0.40) !important; background:var(--ivh-surface-raised);}

.ivh-accordion .e-n-accordion-item-title,
.ivh-accordion .elementor-tab-title{
  min-height:var(--ivh-tap);
  padding:var(--ivh-space-5) var(--ivh-space-6);
  font-family:var(--ivh-font-heading); font-size:1.0625rem; font-weight:700;
  color:var(--ivh-heading);
}
.ivh-accordion .e-n-accordion-item-title:focus-visible{outline:3px solid var(--ivh-secondary); outline-offset:-3px;}
.ivh-accordion .e-n-accordion-item-title-text{font-family:var(--ivh-font-heading);}
.ivh-accordion .elementor-tab-content,
.ivh-accordion .e-n-accordion-item > .e-con{
  padding:0 var(--ivh-space-6) var(--ivh-space-6);
  color:var(--ivh-muted); font-size:var(--ivh-body); line-height:1.7;
}

@media (max-width:767px){
  .ivh-accordion .e-n-accordion-item-title,
  .ivh-accordion .elementor-tab-title{padding:var(--ivh-space-4) var(--ivh-space-5); font-size:1rem;}
}

/* --- Loop grid / posts widget -------------------------------------------- */

.ivh-loop .elementor-loop-container{gap:var(--ivh-gap-grid);}

/* --- Star rating widget --------------------------------------------------- */
.ivh-stars .elementor-star-rating{color:var(--ivh-secondary); font-size:15px;}
.ivh-stars .elementor-star-rating i:before{color:var(--ivh-secondary);}

/* --- Divider ------------------------------------------------------------- */
.ivh-divider .elementor-divider-separator{border-top-color:var(--ivh-border) !important;}

/* =========================================================================
   11. HOMEPAGE
   ========================================================================= */

/* --- Hero ----------------------------------------------------------------
   Height is min-height, not height, so long copy or a large mobile font
   never crops the CTA off the bottom. The background is an SVG gradient
   rather than a photograph: nothing to decode, nothing to lay out, and no
   LCP image competing with the fonts.
   ------------------------------------------------------------------------ */

/* --- Hero ----------------------------------------------------------------

   ROOT CAUSE NOTE (scroll freeze, Phase 5)

   This block previously painted its atmosphere with two pseudo-elements at
   z-index -2 and -1, inside `isolation:isolate`, carrying five stacked
   gradients between them across a ~88vh area.

   Negative z-index children inside an isolated stacking context cannot be
   composited as a cheap cached layer, so the whole full-viewport area was
   re-rasterised on every scroll frame. Five gradients is a lot of raster work
   to repeat 60 times a second, and it locked up the renderer. The rest of the
   page scrolled fine, which is why the hero was the only section that had to
   be present to reproduce it.

   The fix is to stop using pseudo-elements at all. Scrim and atmosphere are
   now one background-image stack on the element itself: a single layer, one
   paint, normal compositing. Visually identical.
   ------------------------------------------------------------------------ */

.ivh-hero{
  position:relative;
  min-height:88vh;
  overflow:hidden;
  background-color:var(--ivh-bg);
  /* Scrim first so it sits above the atmosphere in paint order. */
  background-image:
    linear-gradient(180deg, rgba(11,11,18,0.55) 0%, rgba(11,11,18,0.30) 42%, rgba(11,11,18,0.92) 100%),
    radial-gradient(58% 52% at 18% 14%, rgba(108,77,246,0.60) 0%, rgba(108,77,246,0) 100%),
    radial-gradient(52% 48% at 86% 78%, rgba(0,211,184,0.42) 0%, rgba(0,211,184,0) 100%),
    radial-gradient(42% 38% at 62% 4%, rgba(75,49,201,0.36) 0%, rgba(75,49,201,0) 100%);
  background-repeat:no-repeat;
  background-size:cover;
}

.ivh-hero__inner{ position:relative; }
.ivh-hero__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px;
  border-radius:var(--ivh-radius-pill);
  background:rgba(255,255,255,0.055);
  border:1px solid var(--ivh-border);
  font-family:var(--ivh-font-heading); font-size:var(--ivh-label); font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ivh-secondary);
}

.ivh-hero__title{ max-width:16ch; }
.ivh-hero__sub{ max-width:56ch; }

/* There is deliberately no drift animation on the hero backdrop.
   Animating a scaling background-image forces the browser to re-rasterise the
   SVG (four radial gradients at 1600x900) on every frame rather than moving a
   cached layer. On this page that was enough to freeze the renderer. The
   gradient reads as atmospheric without motion. */


/* --- Showcase strip -------------------------------------------------------
   Two identical track halves scrolling as one. Duplicating the content is
   what makes the loop seamless; a single track visibly snaps back.
   ------------------------------------------------------------------------ */

.ivh-showcase{ position:relative; overflow:hidden; }

/* Feathered edges so tiles enter and leave rather than being chopped. */
.ivh-showcase::before,
.ivh-showcase::after{
  content:""; position:absolute; top:0; bottom:0; width:14%; z-index:2; pointer-events:none;
}
.ivh-showcase::before{ left:0;  background:linear-gradient(90deg, var(--ivh-bg), transparent); }
.ivh-showcase::after { right:0; background:linear-gradient(270deg, var(--ivh-bg), transparent); }

.ivh-showcase__track{
  display:flex; gap:20px; width:max-content;
  animation:ivh-marquee 62s linear infinite;
  /* Promote the track so the translate moves a cached layer instead of
     repainting sixteen gradient SVGs each frame. This is the case
     will-change is actually for: a known, continuous transform. */
  will-change:transform;
  backface-visibility:hidden;
}
.ivh-showcase:hover .ivh-showcase__track,
.ivh-showcase:focus-within .ivh-showcase__track{ animation-play-state:paused; }

@keyframes ivh-marquee{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

.ivh-showcase__item{
  flex:0 0 auto;
  width:200px;
  border-radius:var(--ivh-radius-card);
  overflow:hidden;
  border:1px solid var(--ivh-border);
  transition:transform var(--ivh-transition), border-color var(--ivh-transition), box-shadow var(--ivh-transition);
}
.ivh-showcase__item img{ display:block; width:100%; height:auto; aspect-ratio:2/3; }
.ivh-showcase__item:hover{
  transform:translateY(-6px);
  border-color:var(--ivh-border-strong);
  box-shadow:var(--ivh-lift), var(--ivh-glow-primary);
}

/* Motion is decorative here, so anyone who has asked the OS to reduce motion
   gets a static strip they can scroll by hand instead.

   The scrollbar has to be styled explicitly: the default light-themed bar cuts
   a bright band straight across a dark cinematic section, which looks like a
   rendering fault rather than a control. */
@media (prefers-reduced-motion: reduce){
  .ivh-showcase__track{
    animation:none;
    width:100%;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    padding-bottom:4px;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,0.18) transparent;
  }
  .ivh-showcase__track::-webkit-scrollbar{ height:6px; }
  .ivh-showcase__track::-webkit-scrollbar-track{ background:transparent; }
  .ivh-showcase__track::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.18);
    border-radius:var(--ivh-radius-pill);
  }
  .ivh-showcase__track::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.30); }
  .ivh-showcase__item{ scroll-snap-align:start; }
  /* The duplicated half exists only to make the animation loop seamlessly.
     With no animation it is 8 redundant tiles and a longer scroll, so it is
     removed from the accessibility tree and from view. */
  .ivh-showcase__item[aria-hidden="true"]{ display:none; }
}


/* --- How it works ---------------------------------------------------------
   The connecting line is drawn on the container, not between cards, so it
   cannot end up misaligned when a step wraps.
   ------------------------------------------------------------------------ */

.ivh-steps{ position:relative; }

.ivh-steps::before{
  content:"";
  position:absolute; top:44px; left:16%; right:16%; height:2px; z-index:0;
  background:linear-gradient(90deg, transparent, rgba(108,77,246,0.55) 18%, rgba(0,211,184,0.55) 82%, transparent);
}

.ivh-step{ position:relative; z-index:1; text-align:center; }

.ivh-step__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:88px; height:88px;
  border-radius:var(--ivh-radius-pill);
  background:var(--ivh-bg);
  border:1px solid var(--ivh-border);
  font-family:var(--ivh-font-heading); font-size:2.25rem; font-weight:700;
  /* Translucent numeral: present enough to count by, quiet enough not to
     outrank the step title. */
  color:rgba(232,232,240,0.22);
  transition:color var(--ivh-transition), border-color var(--ivh-transition), box-shadow var(--ivh-transition);
}
.ivh-step:hover .ivh-step__num{
  color:rgba(232,232,240,0.55);
  border-color:rgba(108,77,246,0.50);
  box-shadow:var(--ivh-glow-primary);
}


/* --- Trust / payment ------------------------------------------------------ */

.ivh-trustbar{
  display:flex; flex-wrap:wrap; gap:var(--ivh-space-4); justify-content:center;
}
.ivh-trustbar__item{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px;
  border-radius:var(--ivh-radius-input);
  background:var(--ivh-glass);
  border:1px solid var(--ivh-border);
  font-size:var(--ivh-small); color:var(--ivh-text);
}
.ivh-trustbar__item svg,
.ivh-trustbar__item i{ color:var(--ivh-secondary); }

/* Gateway slots stay visibly empty until real processors are connected.
   An empty slot is honest; a fake logo is not. */
.ivh-gateway-slot{
  display:flex; align-items:center; justify-content:center;
  min-width:120px; height:56px;
  border-radius:var(--ivh-radius-input);
  background:var(--ivh-surface);
  border:1px dashed var(--ivh-border-strong);
  color:var(--ivh-muted);
  font-size:var(--ivh-small);
}


/* --- Devices -------------------------------------------------------------- */

.ivh-device-grid{ display:grid; gap:var(--ivh-gap-grid); grid-template-columns:repeat(4,minmax(0,1fr)); }


/* --- Homepage responsive --------------------------------------------------- */

@media (max-width:1365px){
  .ivh-steps::before{ left:14%; right:14%; }
}

@media (max-width:1024px){
  .ivh-hero{ min-height:82vh; }
  .ivh-showcase__item{ width:170px; }
  .ivh-device-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  /* Steps stack two-up at tablet, so a horizontal line would connect nothing. */
  .ivh-steps::before{ display:none; }
}

@media (max-width:767px){
  /* vh units on mobile are measured against the browser chrome being hidden,
     so 88vh can overflow. svh is the safe unit; the vh line is the fallback
     for browsers that do not support it. */
  .ivh-hero{ min-height:78vh; min-height:78svh; }
  .ivh-hero__title{ max-width:none; }
  .ivh-hero__sub{ max-width:none; }
  .ivh-showcase__item{ width:132px; }
  .ivh-showcase__track{ animation-duration:44s; }
  .ivh-device-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ivh-step__num{ width:72px; height:72px; font-size:1.875rem; }
  .ivh-trustbar{ flex-direction:column; align-items:stretch; }
  /* The hero background stops drifting on mobile: it is the most expensive
     paint on the page and the least visible at that size. */
  .ivh-hero::before{ animation:none; }
}

/* --- Logged-in admin bar --------------------------------------------------
   The WordPress admin bar is itself position:fixed at top:0. A fixed site
   header at top:0 therefore renders underneath it, and the header's own CTAs
   get clipped. Only logged-in users ever see this, which is exactly why it is
   easy to ship broken: the people building the site are the only ones
   affected, and they stop noticing.
   ------------------------------------------------------------------------- */

body.admin-bar .ivh-header{ top:32px; }

@media screen and (max-width:782px){
  body.admin-bar .ivh-header{ top:46px; }
}

/* The off-canvas panel has the same problem. */
body.admin-bar .ivh-offcanvas .e-off-canvas{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar .ivh-offcanvas .e-off-canvas{ top:46px; }
}

/* Hero copy must clear the fixed header on every breakpoint. The padding is
   set on the hero rather than the header so the header can keep its
   transparent overlay behaviour. */
body.admin-bar .ivh-hero{ padding-top:calc(160px + 32px); }
@media (max-width:1024px){
  body.admin-bar .ivh-hero{ padding-top:calc(130px + 32px); }
}
@media screen and (max-width:782px){
  body.admin-bar .ivh-hero{ padding-top:calc(110px + 46px); }
}



/* FOOTER LOGO
   In the footer the utility class sits on the image widget itself rather than
   on a parent container, so the descendant selector used in the header cannot
   match. This covers the class-on-the-widget case and beats Elementor's
   48px SVG rule on specificity. */
.elementor-widget-image.ivh-header__logo a img[src$=".svg"],
.elementor-widget-image.ivh-header__logo img{
  width:170px; height:33px; max-width:none; object-fit:contain;
}
@media (max-width:767px){
  .elementor-widget-image.ivh-header__logo a img[src$=".svg"],
  .elementor-widget-image.ivh-header__logo img{ width:146px; height:28px; }
}