/*
Theme Name: ItNirman
Theme URI: https://itnirman.com
Author: IT Nirman
Author URI: https://itnirman.com
Description: ItNirman — the IT Nirman SaaS theme. A blazing-fast, enterprise-grade WordPress theme featuring a built-in page builder, advanced control panel, multi-product SaaS support, and maximum security.
Version: 1.3.55
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: itn-theme
Tags: saas, dark, modern, fast, professional, page-builder, crm, software
*/

/* =========================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================= */
:root {
  /* Brand — sampled from the IT Nirman cloud logo (#0AB4EC) */
  --itn-primary:        #0AB4EC;
  --itn-primary-dark:   #0789B5;
  --itn-primary-light:  #5CCDF5;
  --itn-primary-rgb:    10,180,236;
  --itn-secondary-rgb:  16,185,129;
  --itn-accent-rgb:     45,212,191;
  --itn-on-primary:     #04141C;
  --itn-primary-glow:   rgba(var(--itn-primary-rgb),0.18);
  --itn-secondary:      #10B981;
  --itn-secondary-dark: #059669;
  --itn-accent:         #2DD4BF;
  --itn-warning:        #F59E0B;
  --itn-danger:         #EF4444;
  --itn-success:        #10B981;

  /* Dark Mode Surfaces */
  --itn-bg:             #0A0B14;
  --itn-bg-2:           #0F1120;
  --itn-bg-card:        #13162A;
  --itn-bg-elevated:    #1A1E38;
  --itn-border:         rgba(255,255,255,0.07);
  --itn-border-hover:   rgba(255,255,255,0.14);

  /* Light Mode Surfaces */
  /* Mode-aware surfaces (flipped in body.itn-light below) */
  --itn-header-glass:   rgba(10,11,20,0.92);
  --itn-glass:          rgba(13,17,32,.8);
  --itn-tint:           rgba(255,255,255,.04);
  --itn-ink:            #05070F;
  --itn-wordmark:       rgba(255,255,255,.14);
  --itn-grad-card:      linear-gradient(160deg, #16193a 0%, var(--itn-bg-card) 100%);
  --itn-grad-cta:       linear-gradient(135deg, #131840 0%, #0c0f25 50%, #121630 100%);
  --itn-grad-deep:      linear-gradient(135deg, #0b2a38 0%, #0a1420 62%);
  --itn-bg-light:       #FFFFFF;
  --itn-bg-2-light:     #F8F9FF;
  --itn-bg-card-light:  #FFFFFF;
  --itn-border-light:   #E5E7EB;

  /* Typography */
  --itn-text:           #F1F5F9;
  --itn-text-2:         #AAB6C8;
  --itn-text-muted:     #8B98AE;
  --itn-heading:        #FFFFFF;

  --itn-font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --itn-font-heading:   'Poppins', 'Inter', sans-serif;
  --itn-font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing */
  --itn-space-1:  0.25rem;
  --itn-space-2:  0.5rem;
  --itn-space-3:  0.75rem;
  --itn-space-4:  1rem;
  --itn-space-5:  1.25rem;
  --itn-space-6:  1.5rem;
  --itn-space-8:  2rem;
  --itn-space-10: 2.5rem;
  --itn-space-12: 3rem;
  --itn-space-16: 4rem;
  --itn-space-20: 5rem;
  --itn-space-24: 6rem;
  --itn-space-32: 8rem;

  /* Radius */
  --itn-r-sm:   6px;
  --itn-r-md:   10px;
  --itn-r-lg:   16px;
  --itn-r-xl:   24px;
  --itn-r-full: 9999px;

  /* Shadows */
  --itn-shadow-sm:    0 2px 8px rgba(0,0,0,0.25);
  --itn-shadow-md:    0 8px 32px rgba(0,0,0,0.35);
  --itn-shadow-lg:    0 24px 64px rgba(0,0,0,0.45);
  --itn-shadow-glow:  0 0 48px rgba(var(--itn-primary-rgb),0.2);
  --itn-shadow-glow2: 0 0 48px rgba(var(--itn-secondary-rgb),0.15);

  /* Transitions */
  --itn-t:      0.2s ease;
  --itn-t-slow: 0.4s cubic-bezier(0.4,0,0.2,1);

  /* Layout */
  --itn-container: 1440px;
  --itn-header-h:  72px;
}

/* Light mode overrides */
body.itn-light {
  --itn-bg:           var(--itn-bg-light);
  --itn-bg-2:         var(--itn-bg-2-light);
  --itn-bg-card:      var(--itn-bg-card-light);
  --itn-bg-elevated:  #F1F5F9;
  --itn-border:       var(--itn-border-light);
  --itn-border-hover: rgba(15,23,42,.16);
  --itn-text:         #0F172A;
  --itn-text-2:       #334155;
  --itn-text-muted:   #475569;
  --itn-heading:      #020617;
  /* Darker brand tones for TEXT on white (AA contrast); fills keep the bright brand colour */
  --itn-primary-light: #0369A1;
  --itn-accent:       #0F766E;
  --itn-secondary:    #047857;
  --itn-primary-glow: rgba(var(--itn-primary-rgb),.12);
  --itn-header-glass: rgba(255,255,255,.92);
  --itn-glass:        rgba(255,255,255,.9);
  --itn-tint:         rgba(15,23,42,.035);
  --itn-ink:          #0F172A;
  --itn-wordmark:     rgba(15,23,42,.12);
  --itn-grad-card:    linear-gradient(160deg, #EEF9FE 0%, #FFFFFF 100%);
  --itn-grad-cta:     linear-gradient(135deg, #E3F6FD 0%, #FFFFFF 55%, #E8FAF6 100%);
  --itn-grad-deep:    linear-gradient(135deg, #E3F6FD 0%, #F7FBFD 62%);
  --itn-shadow-sm:    0 1px 3px rgba(15,23,42,.08);
  --itn-shadow-md:    0 10px 30px -12px rgba(15,23,42,.18);
  color-scheme: light;
}
body.itn-dark { color-scheme: dark; }
/* Light mode: readable accents, solid buttons with white text */
body.itn-light .itn-btn-primary { background: #0678A8; color:#fff; box-shadow: 0 4px 16px rgba(6,120,168,.3); }
body.itn-light .itn-btn-primary:hover { background: #045E85; color:#fff; }
body.itn-light .itn-gradient-text, body.itn-light .itn-stat-num { background-image: linear-gradient(135deg,#0369A1 0%,#0F766E 100%); }
body.itn-light .itn-hero-badge, body.itn-light .itn-eyebrow { color:#075985; background: rgba(10,180,236,.12); border-color: rgba(3,105,161,.35); }

/* =========================================
   RESET
   ========================================= */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--itn-bg);
  color: var(--itn-text);
  font-family: var(--itn-font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background var(--itn-t-slow), color var(--itn-t-slow);
}
a { color: var(--itn-primary-light); text-decoration: none; transition: color var(--itn-t); }
a:hover { color: var(--itn-text); }
img, video { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* =========================================
   TYPOGRAPHY
   ========================================= */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--itn-font-heading);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--itn-heading);
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }
h5 { font-size: 0.95rem; }
p  { color: var(--itn-text-2); line-height: 1.75; }

.itn-gradient-text {
  background: linear-gradient(135deg, var(--itn-primary-light) 0%, var(--itn-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.itn-gradient-text-2 {
  background: linear-gradient(135deg, var(--itn-secondary) 0%, var(--itn-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =========================================
   LAYOUT
   ========================================= */
.itn-container {
  max-width: var(--itn-container);
  margin: 0 auto;
  padding: 0 var(--itn-space-8);
}
.itn-section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.itn-section-sm { padding: clamp(2.75rem, 5vw, 4rem) 0; }

.itn-section-header { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.itn-eyebrow {
  display: inline-flex; align-items: center; gap: var(--itn-space-2);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--itn-primary-light);
  background: var(--itn-primary-glow);
  border: 1px solid rgba(var(--itn-primary-rgb),0.3);
  padding: var(--itn-space-1) var(--itn-space-4);
  border-radius: var(--itn-r-full); margin-bottom: var(--itn-space-5);
}
.itn-section-title { margin-bottom: var(--itn-space-4); }
.itn-section-desc  {
  font-size: 1.1rem; max-width: 600px; margin: 0 auto;
  color: var(--itn-text-2);
}

/* Grid helpers */
.itn-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--itn-space-6); }
.itn-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--itn-space-6); }
.itn-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--itn-space-6); }

/* =========================================
   BUTTONS
   ========================================= */
.itn-btn {
  display: inline-flex; align-items: center; gap: var(--itn-space-2);
  padding: 0.7rem 1.6rem; border-radius: var(--itn-r-md);
  font-weight: 600; font-size: 0.95rem;
  transition: all var(--itn-t); white-space: nowrap;
  position: relative; overflow: hidden;
}
.itn-btn::after {
  content: ''; position: absolute; inset: 0;
  background: white; opacity: 0; transition: opacity var(--itn-t);
}
.itn-btn:hover::after { opacity: 0.05; }

.itn-btn-primary {
  background: var(--itn-primary);
  color: var(--itn-on-primary);
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(var(--itn-primary-rgb),0.4);
}
.itn-btn-primary:hover {
  background: var(--itn-primary-light);
  color: var(--itn-on-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(var(--itn-primary-rgb),0.5);
}

.itn-btn-secondary {
  background: var(--itn-secondary);
  color: #fff;
  box-shadow: 0 4px 20px rgba(var(--itn-secondary-rgb),0.35);
}
.itn-btn-secondary:hover {
  background: var(--itn-secondary-dark);
  color: #fff;
  transform: translateY(-2px);
}

.itn-btn-outline {
  background: transparent;
  color: var(--itn-text);
  border: 1px solid var(--itn-border-hover);
}
.itn-btn-outline:hover {
  border-color: var(--itn-primary);
  color: var(--itn-primary-light);
  background: var(--itn-primary-glow);
}

.itn-btn-ghost {
  background: transparent;
  color: var(--itn-text-2);
}
.itn-btn-ghost:hover { color: var(--itn-primary-light); }

.itn-btn-lg { padding: 0.9rem 2.2rem; font-size: 1.05rem; border-radius: var(--itn-r-lg); }
.itn-btn-sm { padding: 0.45rem 1rem; font-size: 0.82rem; }
.itn-btn-full { width: 100%; justify-content: center; }

/* =========================================
   CARDS
   ========================================= */
.itn-card {
  background: var(--itn-bg-card);
  border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-lg);
  padding: var(--itn-space-8);
  transition: border-color var(--itn-t), box-shadow var(--itn-t), transform var(--itn-t);
}
.itn-card:hover {
  border-color: var(--itn-border-hover);
  box-shadow: var(--itn-shadow-md);
  transform: translateY(-4px);
}
.itn-card-glow:hover {
  box-shadow: var(--itn-shadow-glow);
  border-color: rgba(var(--itn-primary-rgb),0.35);
}

/* =========================================
   HEADER / NAVBAR
   ========================================= */
.itn-header {
  /* Full-width, edge to edge — matching the site's overall body width,
     not the narrower content container. The inner .itn-container still
     caps and centers the actual nav content, so the logo and menu align
     perfectly with headings and text elsewhere on the page; only the
     header's background/bar spans the full browser width.
     !important here is deliberate: it exists specifically to defeat
     any leftover/cached/duplicate copy of this stylesheet elsewhere
     that might still carry an old max-width rule for this selector. */
  position: fixed !important; left: 0 !important; right: 0 !important;
  width: 100% !important; max-width: none !important; margin: 0 !important;
  top: 0; /* deliberately NOT !important — the admin-bar/announcement-bar
             offset rule further down needs to be able to override this */
  z-index: 900;
  height: var(--itn-header-h);
  display: flex; align-items: center;
  transition: background var(--itn-t-slow), border-color var(--itn-t-slow), box-shadow var(--itn-t-slow);
  border-bottom: 1px solid transparent;
}

/* The header's own nav container is NOT capped to the site's normal
   content width — this is what makes the header genuinely edge to
   edge (logo near the left edge, actions near the right edge), even
   though .itn-container elsewhere on the page still centers at the
   configured Container Width. The outer .itn-header element being
   full-width alone was not enough — this inner override was the
   actual missing piece. */
.itn-header .itn-container { max-width: none; }

.itn-header.scrolled {
  background: var(--itn-header-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-color: var(--itn-border);
  box-shadow: var(--itn-shadow-sm);
}
body.itn-light .itn-header.scrolled {
  background: rgba(255,255,255,0.95);
}

.itn-nav {
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--itn-space-8);
  width: 100%;
}

.itn-logo {
  display: flex; align-items: center; gap: var(--itn-space-3);
  font-family: var(--itn-font-heading);
  font-size: 1.25rem; font-weight: 800;
  color: var(--itn-heading);
  letter-spacing: -0.03em; flex-shrink: 0;
}
.itn-logo img { height: 36px; width: auto; }

.itn-nav-links {
  display: flex; align-items: center; gap: var(--itn-space-2);
  /* Fills all remaining space between the logo and the hamburger, so
     the menu items stay left-aligned right after the logo while
     .itn-nav-actions (pushed via margin-left:auto below) lands at the
     true right edge — the empty space sits between them, not between
     the logo and the menu. */
  flex: 1 1 auto;
}
.itn-nav-links a, .itn-nav-item {
  color: var(--itn-text-2); font-size: 0.88rem; font-weight: 500;
  padding: var(--itn-space-2) var(--itn-space-3);
  border-radius: var(--itn-r-sm);
  transition: color var(--itn-t), background var(--itn-t);
  display: inline-flex; align-items: center; gap: var(--itn-space-1);
  position: relative;
}
.itn-nav-links a:hover, .itn-nav-item:hover {
  color: var(--itn-text); background: var(--itn-bg-elevated);
}

/* Dropdown */
.itn-dropdown { position: relative; }
.itn-dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(calc(-50% + var(--itn-dd-shift, 0px)));
  min-width: 220px;
  background: var(--itn-bg-card);
  border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-lg);
  padding: var(--itn-space-2);
  box-shadow: var(--itn-shadow-md);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: all var(--itn-t);
  transform-origin: top center;
  transform: translateX(calc(-50% + var(--itn-dd-shift, 0px))) translateY(-8px) scale(0.97);
}
.itn-dropdown:hover .itn-dropdown-menu,
.itn-dropdown-menu:hover {
  opacity: 1; visibility: visible; pointer-events: all;
  transform: translateX(calc(-50% + var(--itn-dd-shift, 0px))) translateY(0) scale(1);
}
.itn-dropdown-menu a {
  display: flex; align-items: center; gap: var(--itn-space-3);
  padding: var(--itn-space-3) var(--itn-space-4);
  border-radius: var(--itn-r-sm); color: var(--itn-text-2);
  font-size: 0.88rem; transition: all var(--itn-t);
}
.itn-dropdown-menu a:hover {
  background: var(--itn-bg-elevated); color: var(--itn-text);
}
.itn-dropdown-icon {
  width: 32px; height: 32px; border-radius: var(--itn-r-sm);
  background: var(--itn-primary-glow); display: flex;
  align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;
}

.itn-nav-actions {
  display: flex; align-items: center; gap: var(--itn-space-3); flex-shrink: 0;
  margin-left: auto; /* pushes the whole actions group to the far right
                         within .itn-nav-links, leaving the menu items
                         packed against the logo on the left */
}

/* Dark mode toggle */
.itn-dark-toggle {
  width: 38px; height: 38px; border-radius: var(--itn-r-sm);
  background: var(--itn-bg-elevated); border: 1px solid var(--itn-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--itn-text-2); transition: all var(--itn-t);
}
.itn-dark-toggle:hover { border-color: var(--itn-border-hover); color: var(--itn-text); }

/* Mobile toggle */
.itn-hamburger {
  display: none; flex-direction: column; gap: 5px;
  padding: var(--itn-space-2); background: var(--itn-bg-elevated);
  border: 1px solid var(--itn-border); border-radius: var(--itn-r-sm);
}
.itn-hamburger span {
  width: 22px; height: 2px; background: var(--itn-text-2);
  border-radius: 2px; transition: all var(--itn-t);
}

/* =========================================
   HERO
   ========================================= */
.itn-hero {
  min-height: 100vh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: calc(var(--itn-header-h) + var(--itn-space-16)) 0 var(--itn-space-24);
}

.itn-hero-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.itn-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(var(--itn-primary-rgb),0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--itn-primary-rgb),0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black 30%, transparent 100%);
}
.itn-hero-orb-1 {
  position: absolute; top: -20%; left: -10%;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--itn-primary-rgb),0.12) 0%, transparent 65%);
}
.itn-hero-orb-2 {
  position: absolute; top: 10%; right: -10%;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(6,182,212,0.08) 0%, transparent 65%);
}
.itn-hero-orb-3 {
  position: absolute; bottom: -20%; left: 30%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--itn-secondary-rgb),0.06) 0%, transparent 65%);
}

.itn-hero-content { position: relative; z-index: 1; }
.itn-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--itn-space-16); align-items: center; }

.itn-hero-badge {
  display: inline-flex; align-items: center; gap: var(--itn-space-2);
  background: linear-gradient(135deg, rgba(var(--itn-primary-rgb),0.15), rgba(6,182,212,0.1));
  border: 1px solid rgba(var(--itn-primary-rgb),0.3);
  padding: var(--itn-space-2) var(--itn-space-4);
  border-radius: var(--itn-r-full);
  font-size: 0.78rem; font-weight: 600; color: var(--itn-primary-light);
  margin-bottom: var(--itn-space-6); letter-spacing: 0.02em;
}
.itn-hero-badge .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--itn-secondary); flex-shrink: 0;
  animation: itn-pulse 2s ease infinite;
}
@keyframes itn-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.7); opacity: 0.5; }
}

.itn-hero-title { margin-bottom: var(--itn-space-6); }
.itn-hero-desc {
  font-size: 1.15rem; line-height: 1.8;
  color: var(--itn-text-2); margin-bottom: var(--itn-space-8);
  max-width: 520px;
}
.itn-hero-actions {
  display: flex; align-items: center; gap: var(--itn-space-4);
  flex-wrap: wrap; margin-bottom: var(--itn-space-10);
}
.itn-hero-trust {
  display: flex; align-items: center; gap: var(--itn-space-4); flex-wrap: wrap;
}
.itn-hero-trust-text { font-size: 0.82rem; color: var(--itn-text-muted); }
.itn-hero-trust-text strong { color: var(--itn-text-2); }
.itn-trust-stars { color: #FBBF24; font-size: 0.9rem; }

/* Avatars */
.itn-avatars { display: flex; }
.itn-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--itn-bg);
  background: linear-gradient(135deg, var(--itn-primary), var(--itn-accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700; color: white;
  margin-left: -7px;
}
.itn-avatars .itn-avatar:first-child { margin-left: 0; }

/* Hero visual (right side) */
.itn-hero-visual { position: relative; }
.itn-dashboard-frame {
  background: var(--itn-bg-card);
  border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-xl);
  overflow: hidden;
  box-shadow: var(--itn-shadow-lg), var(--itn-shadow-glow);
  transform: perspective(1000px) rotateY(-3deg) rotateX(2deg);
  transition: transform var(--itn-t-slow);
}
.itn-dashboard-frame:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}
.itn-frame-bar {
  background: var(--itn-bg-elevated);
  border-bottom: 1px solid var(--itn-border);
  padding: var(--itn-space-3) var(--itn-space-5);
  display: flex; align-items: center; gap: var(--itn-space-3);
}
.itn-frame-dots { display: flex; gap: 6px; }
.itn-frame-dots span { width: 11px; height: 11px; border-radius: 50%; }
.itn-frame-dots .d-r { background: #EF4444; }
.itn-frame-dots .d-y { background: #F59E0B; }
.itn-frame-dots .d-g { background: #10B981; }
.itn-frame-url {
  flex: 1; background: var(--itn-bg); border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-sm); padding: 3px 12px;
  font-size: 0.72rem; color: var(--itn-text-muted);
  font-family: var(--itn-font-mono); text-align: center;
}
.itn-frame-body {
  padding: var(--itn-space-5);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--itn-space-4); background: var(--itn-bg-2);
}
.itn-mini-card {
  background: var(--itn-bg-card);
  border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-md); padding: var(--itn-space-4);
}
.itn-mini-label { font-size: 0.68rem; color: var(--itn-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.itn-mini-value { font-size: 1.3rem; font-weight: 800; font-family: var(--itn-font-heading); }
.itn-mini-sub   { font-size: 0.7rem; margin-top: 4px; }
.itn-c-green  { color: var(--itn-secondary); }
.itn-c-blue   { color: var(--itn-primary-light); }
.itn-c-cyan   { color: var(--itn-accent); }
.itn-c-warn   { color: var(--itn-warning); }
.itn-c-red    { color: var(--itn-danger); }
.itn-c-muted  { color: var(--itn-text-muted); }
.itn-badge-up   { display:inline-block; background:rgba(16,185,129,0.12); color:var(--itn-secondary); padding:2px 7px; border-radius:var(--itn-r-full); font-size:0.65rem; }
.itn-badge-down { display:inline-block; background:rgba(239,68,68,0.1); color:var(--itn-danger); padding:2px 7px; border-radius:var(--itn-r-full); font-size:0.65rem; }

/* Floating badges on hero visual */
.itn-float-badge {
  position: absolute;
  background: var(--itn-bg-card);
  border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-md); padding: var(--itn-space-3) var(--itn-space-4);
  box-shadow: var(--itn-shadow-md);
  display: flex; align-items: center; gap: var(--itn-space-2);
  font-size: 0.8rem; font-weight: 600; color: var(--itn-text);
  animation: itn-float 4s ease-in-out infinite;
}
.itn-float-badge-1 { top: -20px; right: -20px; animation-delay: 0s; }
.itn-float-badge-2 { bottom: 30px; left: -30px; animation-delay: 1.5s; }
@keyframes itn-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* =========================================
   TRUST / LOGO BAR
   ========================================= */
.itn-trust-bar {
  border-top: 1px solid var(--itn-border);
  border-bottom: 1px solid var(--itn-border);
  padding: var(--itn-space-8) 0;
  overflow: hidden;
}
.itn-trust-bar-inner {
  display: flex; align-items: center;
  gap: var(--itn-space-12); justify-content: center; flex-wrap: wrap;
}
.itn-trust-label { font-size: 0.75rem; color: var(--itn-text-muted); text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; }
.itn-trust-logos { display: flex; align-items: center; gap: var(--itn-space-10); flex-wrap: wrap; justify-content: center; }
.itn-trust-logo  { font-size: 0.9rem; font-weight: 700; color: var(--itn-text-muted); letter-spacing: -0.01em; transition: color var(--itn-t); display: flex; align-items: center; gap: var(--itn-space-2); }
.itn-trust-logo:hover { color: var(--itn-text-2); }

/* =========================================
   STATS
   ========================================= */
.itn-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-lg); overflow: hidden;
  background: var(--itn-bg-card);
}
.itn-stat-cell {
  padding: var(--itn-space-8);
  border-right: 1px solid var(--itn-border); text-align: center;
}
.itn-stat-cell:last-child { border-right: none; }
.itn-stat-num  { font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 800; font-family: var(--itn-font-heading); display: block; margin-bottom: var(--itn-space-1); background: linear-gradient(135deg, var(--itn-primary-light), var(--itn-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.itn-stat-text { font-size: 0.85rem; color: var(--itn-text-muted); }

/* =========================================
   FEATURES
   ========================================= */
.itn-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--itn-space-6); }
.itn-feature-card {
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-lg); padding: var(--itn-space-8);
  transition: all var(--itn-t); position: relative; overflow: hidden;
}
.itn-feature-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--itn-primary), var(--itn-accent));
  opacity: 0; transition: opacity var(--itn-t);
}
.itn-feature-card:hover { border-color: rgba(var(--itn-primary-rgb),0.35); transform: translateY(-4px); box-shadow: var(--itn-shadow-glow); }
.itn-feature-card:hover::before { opacity: 1; }
.itn-feature-icon {
  width: 48px; height: 48px; border-radius: var(--itn-r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: var(--itn-space-5);
}
.fi-purple { background: rgba(var(--itn-primary-rgb),0.12); }
.fi-green  { background: rgba(16,185,129,0.12); }
.fi-cyan   { background: rgba(6,182,212,0.12);  }
.fi-yellow { background: rgba(245,158,11,0.12); }
.fi-red    { background: rgba(239,68,68,0.12);  }
.fi-teal   { background: rgba(20,184,166,0.12); }
.itn-feature-card h3 { font-size: 1.05rem; margin-bottom: var(--itn-space-3); }
.itn-feature-card p  { font-size: 0.88rem; line-height: 1.75; }

/* =========================================
   PRODUCTS
   ========================================= */
.itn-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--itn-space-6); }
.itn-product-card {
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-xl); padding: var(--itn-space-8);
  transition: all var(--itn-t); position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.itn-product-card:hover { border-color: rgba(var(--itn-primary-rgb),0.3); transform: translateY(-4px); box-shadow: var(--itn-shadow-glow); }
.itn-product-card.featured {
  background: var(--itn-grad-card);
  border-color: rgba(var(--itn-primary-rgb),0.4);
  box-shadow: var(--itn-shadow-glow);
}
.itn-product-badge {
  position: absolute; top: -1px; right: var(--itn-space-6);
  background: var(--itn-primary); color: var(--itn-on-primary);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 4px 14px; border-radius: 0 0 var(--itn-r-md) var(--itn-r-md);
}
.itn-product-icon { font-size: 2.5rem; margin-bottom: var(--itn-space-5); }
.itn-product-card h3 { font-size: 1.3rem; margin-bottom: var(--itn-space-3); }
.itn-product-card p  { font-size: 0.9rem; flex: 1; margin-bottom: var(--itn-space-6); }
.itn-product-tags { display: flex; flex-wrap: wrap; gap: var(--itn-space-2); margin-bottom: var(--itn-space-6); }
.itn-tag {
  font-size: 0.72rem; font-weight: 500;
  padding: 3px 10px; border-radius: var(--itn-r-full);
  background: var(--itn-bg-elevated); color: var(--itn-text-2);
  border: 1px solid var(--itn-border);
}

/* =========================================
   PRICING
   ========================================= */
.itn-pricing-toggle {
  display: flex; align-items: center; justify-content: center;
  gap: var(--itn-space-4); margin-bottom: var(--itn-space-12);
}
.itn-toggle-label { font-size: 0.9rem; color: var(--itn-text-2); }
.itn-toggle-switch { position: relative; width: 46px; height: 24px; cursor: pointer; }
.itn-toggle-switch input { opacity: 0; width: 0; height: 0; }
.itn-toggle-track {
  position: absolute; inset: 0;
  background: var(--itn-bg-elevated); border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-full); transition: var(--itn-t);
}
.itn-toggle-track::before {
  content: ''; position: absolute;
  width: 16px; height: 16px; left: 3px; top: 50%;
  transform: translateY(-50%);
  background: var(--itn-text-muted); border-radius: 50%; transition: var(--itn-t);
}
.itn-toggle-switch input:checked + .itn-toggle-track { background: var(--itn-primary); border-color: var(--itn-primary); }
.itn-toggle-switch input:checked + .itn-toggle-track::before { transform: translate(22px, -50%); background: #fff; }
.itn-save-chip { background: rgba(16,185,129,0.12); color: var(--itn-secondary); border: 1px solid rgba(16,185,129,0.25); font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: var(--itn-r-full); }

.itn-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--itn-space-6); align-items: start; }
.itn-pricing-card {
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-xl); padding: var(--itn-space-10);
  position: relative; transition: all var(--itn-t);
}
.itn-pricing-card:hover { transform: translateY(-4px); box-shadow: var(--itn-shadow-md); }
.itn-pricing-card.popular {
  background: var(--itn-grad-card);
  border-color: rgba(var(--itn-primary-rgb),0.45); box-shadow: var(--itn-shadow-glow);
  transform: scale(1.03);
}
.itn-pricing-card.popular:hover { transform: scale(1.03) translateY(-4px); }
.itn-popular-badge {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  background: var(--itn-primary); color: var(--itn-on-primary); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 4px 18px; border-radius: 0 0 var(--itn-r-md) var(--itn-r-md);
}
.itn-plan-name { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--itn-text-muted); margin-bottom: var(--itn-space-3); }
.itn-price-row { display: flex; align-items: flex-end; gap: 3px; margin-bottom: var(--itn-space-2); }
.itn-price-sym   { font-size: 1.4rem; font-weight: 700; color: var(--itn-text-2); padding-bottom: 7px; }
.itn-price-amt   { font-size: 3.2rem; font-weight: 800; line-height: 1; color: var(--itn-heading); font-family: var(--itn-font-heading); }
.itn-price-per   { font-size: 0.82rem; color: var(--itn-text-muted); padding-bottom: 9px; }
.itn-plan-desc   { font-size: 0.85rem; color: var(--itn-text-muted); margin-bottom: var(--itn-space-6); }
.itn-plan-divider { height: 1px; background: var(--itn-border); margin-bottom: var(--itn-space-6); }
.itn-plan-features { display: flex; flex-direction: column; gap: var(--itn-space-4); margin-bottom: var(--itn-space-8); }
.itn-plan-feature { display: flex; align-items: center; gap: var(--itn-space-3); font-size: 0.86rem; color: var(--itn-text-2); }
.itn-check { width: 18px; height: 18px; border-radius: 50%; background: rgba(16,185,129,0.15); color: var(--itn-secondary); display: flex; align-items: center; justify-content: center; font-size: 0.62rem; flex-shrink: 0; }
.itn-cross { width: 18px; height: 18px; border-radius: 50%; background: rgba(100,116,139,0.1); color: var(--itn-text-muted); display: flex; align-items: center; justify-content: center; font-size: 0.62rem; flex-shrink: 0; }

/* =========================================
   TESTIMONIALS
   ========================================= */
.itn-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--itn-space-6); }
.itn-testi-card {
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-lg); padding: var(--itn-space-8);
  transition: all var(--itn-t);
}
.itn-testi-card:hover { border-color: var(--itn-border-hover); transform: translateY(-3px); }
.itn-testi-stars { color: #FBBF24; margin-bottom: var(--itn-space-4); letter-spacing: 2px; }
.itn-testi-quote { font-size: 0.9rem; line-height: 1.8; color: var(--itn-text-2); margin-bottom: var(--itn-space-6); font-style: italic; }
.itn-testi-author { display: flex; align-items: center; gap: var(--itn-space-4); }
.itn-author-av {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--itn-primary), var(--itn-accent));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem; color: #fff; flex-shrink: 0;
}
.itn-author-name { font-size: 0.88rem; font-weight: 600; color: var(--itn-text); }
.itn-author-role { font-size: 0.75rem; color: var(--itn-text-muted); }

/* =========================================
   FAQ
   ========================================= */
.itn-faq-wrap { max-width: 740px; margin: 0 auto; }
.itn-faq-item {
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-md); margin-bottom: var(--itn-space-3);
  overflow: hidden; transition: border-color var(--itn-t);
}
.itn-faq-item.active { border-color: rgba(var(--itn-primary-rgb),0.35); }
.itn-faq-q {
  padding: var(--itn-space-5) var(--itn-space-6);
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; font-weight: 600; font-size: 0.95rem;
  color: var(--itn-text); gap: var(--itn-space-4);
  user-select: none;
}
.itn-faq-icon {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--itn-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--itn-text-muted); flex-shrink: 0;
  transition: all var(--itn-t);
}
.itn-faq-item.active .itn-faq-icon {
  background: var(--itn-primary); border-color: var(--itn-primary);
  color: #fff; transform: rotate(45deg);
}
.itn-faq-a {
  padding: 0 var(--itn-space-6) var(--itn-space-5);
  font-size: 0.9rem; color: var(--itn-text-2); line-height: 1.8; display: none;
}
.itn-faq-item.active .itn-faq-a { display: block; }

/* =========================================
   CTA SECTION
   ========================================= */
.itn-cta-box {
  background: var(--itn-grad-cta);
  border: 1px solid rgba(var(--itn-primary-rgb),0.3);
  border-radius: var(--itn-r-xl); padding: var(--itn-space-24) var(--itn-space-12);
  text-align: center; position: relative; overflow: hidden;
}
.itn-cta-glow {
  position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, rgba(var(--itn-primary-rgb),0.15) 0%, transparent 65%);
  pointer-events: none;
}
.itn-cta-box h2  { position: relative; z-index: 1; margin-bottom: var(--itn-space-4); }
.itn-cta-box p   { position: relative; z-index: 1; font-size: 1.1rem; margin-bottom: var(--itn-space-8); max-width: 560px; margin-left: auto; margin-right: auto; }
.itn-cta-actions { position: relative; z-index: 1; display: flex; justify-content: center; gap: var(--itn-space-4); flex-wrap: wrap; }
.itn-cta-note    { position: relative; z-index: 1; font-size: 0.8rem; color: var(--itn-text-muted); margin-top: var(--itn-space-4); }

/* =========================================
   BLOG
   ========================================= */
.itn-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--itn-space-6); }
.itn-blog-card {
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-lg); overflow: hidden; transition: all var(--itn-t);
  display: flex; flex-direction: column;
}
.itn-blog-card:hover { border-color: var(--itn-border-hover); transform: translateY(-4px); box-shadow: var(--itn-shadow-md); }
.itn-blog-thumb {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  background: var(--itn-bg-elevated);
}
.itn-blog-thumb-placeholder {
  width: 100%; aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--itn-bg-elevated), var(--itn-bg-card));
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
}
.itn-blog-body { padding: var(--itn-space-6); flex: 1; display: flex; flex-direction: column; }
.itn-blog-meta { display: flex; align-items: center; gap: var(--itn-space-3); margin-bottom: var(--itn-space-4); flex-wrap: wrap; }
.itn-blog-cat {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--itn-primary-light); background: var(--itn-primary-glow);
  padding: 2px 8px; border-radius: var(--itn-r-full);
}
.itn-blog-date { font-size: 0.75rem; color: var(--itn-text-muted); }
.itn-blog-card h3 { font-size: 1.05rem; margin-bottom: var(--itn-space-3); line-height: 1.45; }
.itn-blog-card h3 a { color: var(--itn-heading); transition: color var(--itn-t); }
.itn-blog-card h3 a:hover { color: var(--itn-primary-light); }
.itn-blog-card p  { font-size: 0.86rem; line-height: 1.7; flex: 1; margin-bottom: var(--itn-space-5); }
.itn-blog-footer  { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.itn-read-time    { font-size: 0.75rem; color: var(--itn-text-muted); }
.itn-read-more    { font-size: 0.82rem; font-weight: 600; color: var(--itn-primary-light); display: flex; align-items: center; gap: 4px; }
.itn-read-more:hover { color: var(--itn-text); }

/* Single Post */
.itn-post-wrap { display: grid; grid-template-columns: 1fr 340px; gap: var(--itn-space-10); }
.itn-post-content { min-width: 0; }
.itn-post-header  { margin-bottom: var(--itn-space-8); }
.itn-post-title   { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: var(--itn-space-5); line-height: 1.25; }
.itn-post-meta    { display: flex; align-items: center; gap: var(--itn-space-4); flex-wrap: wrap; margin-bottom: var(--itn-space-6); }
.itn-post-author  { display: flex; align-items: center; gap: var(--itn-space-2); font-size: 0.85rem; }
.itn-post-body { font-size: 1rem; line-height: 1.85; color: var(--itn-text-2); }
.itn-post-body h2, .itn-post-body h3 { color: var(--itn-heading); margin: var(--itn-space-8) 0 var(--itn-space-4); }
.itn-post-body p  { margin-bottom: var(--itn-space-5); }
.itn-post-body ul, .itn-post-body ol { margin: var(--itn-space-5) 0; padding-left: var(--itn-space-6); }
.itn-post-body ul { list-style: disc; }
.itn-post-body ol { list-style: decimal; }
.itn-post-body li { margin-bottom: var(--itn-space-2); color: var(--itn-text-2); }
.itn-post-body blockquote {
  border-left: 3px solid var(--itn-primary); margin: var(--itn-space-8) 0;
  padding: var(--itn-space-5) var(--itn-space-6);
  background: var(--itn-primary-glow); border-radius: 0 var(--itn-r-md) var(--itn-r-md) 0;
  font-style: italic; color: var(--itn-text-2);
}
.itn-post-body img { border-radius: var(--itn-r-md); margin: var(--itn-space-6) 0; }
.itn-post-body code {
  background: var(--itn-bg-elevated); color: var(--itn-accent);
  padding: 2px 6px; border-radius: var(--itn-r-sm); font-family: var(--itn-font-mono); font-size: 0.85em;
}
.itn-post-body pre {
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-md); padding: var(--itn-space-6); overflow-x: auto;
  margin: var(--itn-space-6) 0;
}
.itn-post-body pre code { background: none; padding: 0; color: var(--itn-text); }

/* Post Ad zones */
.itn-ad-zone { margin: var(--itn-space-8) 0; text-align: center; }

/* Sidebar */
.itn-post-sidebar { position: sticky; top: calc(var(--itn-header-h) + 24px); align-self: start; }
.itn-sidebar-widget {
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-lg); padding: var(--itn-space-6); margin-bottom: var(--itn-space-5);
}
.itn-sidebar-widget h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--itn-text-muted); margin-bottom: var(--itn-space-5); }

/* =========================================
   BREADCRUMB
   ========================================= */
.itn-breadcrumb { display: flex; align-items: center; gap: var(--itn-space-2); font-size: 0.8rem; color: var(--itn-text-muted); margin-bottom: var(--itn-space-6); flex-wrap: wrap; }
.itn-breadcrumb a { color: var(--itn-text-muted); transition: color var(--itn-t); }
.itn-breadcrumb a:hover { color: var(--itn-primary-light); }
.itn-breadcrumb .sep { opacity: 0.4; }

/* =========================================
   PRELOADER
   ========================================= */
#itn-preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--itn-bg); display: flex; align-items: center; justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
#itn-preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.itn-preloader-inner { text-align: center; }
.itn-preloader-logo { font-family: var(--itn-font-heading); font-size: 1.5rem; font-weight: 800; color: var(--itn-heading); margin-bottom: var(--itn-space-4); }
.itn-preloader-bar {
  width: 200px; height: 3px; background: var(--itn-bg-elevated);
  border-radius: var(--itn-r-full); overflow: hidden; margin: 0 auto;
}
.itn-preloader-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--itn-primary), var(--itn-accent));
  border-radius: var(--itn-r-full);
  animation: itn-load 1.2s ease forwards;
}
@keyframes itn-load { to { width: 100%; } }

/* =========================================
   BACK TO TOP
   ========================================= */
#itn-back-top {
  position: fixed; bottom: 28px; right: 28px; z-index: 800;
  width: 44px; height: 44px; border-radius: var(--itn-r-md);
  background: var(--itn-primary); color: var(--itn-on-primary);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  box-shadow: 0 4px 20px rgba(var(--itn-primary-rgb),0.4);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all var(--itn-t); text-decoration: none;
}
#itn-back-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
#itn-back-top:hover { background: var(--itn-primary-dark); color: #fff; transform: translateY(-2px); }

/* =========================================
   PAGE TRANSITION
   ========================================= */
.itn-page-transition {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--itn-primary);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.itn-page-transition.active { transform: scaleY(1); }

/* =========================================
   FOOTER
   ========================================= */
.itn-footer {
  border-top: 1px solid var(--itn-border);
  padding: var(--itn-space-20) 0 var(--itn-space-8);
  margin-top: var(--itn-space-8);
}
.itn-footer-grid {
  display: grid; grid-template-columns: 2fr repeat(var(--itn-ft-cols, 3), 1fr);
  gap: var(--itn-space-10); margin-bottom: var(--itn-space-10);
}
.itn-footer-brand p { font-size: 0.86rem; margin: var(--itn-space-4) 0 var(--itn-space-6); max-width: 290px; }
.itn-footer-socials { display: flex; gap: var(--itn-space-3); }
.itn-social-btn {
  width: 36px; height: 36px; border-radius: var(--itn-r-sm);
  background: var(--itn-bg-elevated); border: 1px solid var(--itn-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem; color: var(--itn-text-muted); transition: all var(--itn-t);
}
.itn-social-btn:hover { background: var(--itn-primary); border-color: var(--itn-primary); color: var(--itn-on-primary); }
.itn-footer-col h5 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--itn-text-muted); margin-bottom: var(--itn-space-5); }
.itn-footer-links { display: flex; flex-direction: column; gap: var(--itn-space-4); }
.itn-footer-links a { font-size: 0.86rem; color: var(--itn-text-2); transition: color var(--itn-t); }
.itn-footer-links a:hover { color: var(--itn-primary-light); }
.itn-footer-bottom {
  border-top: 1px solid var(--itn-border); padding-top: var(--itn-space-6);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--itn-space-4);
}
.itn-footer-bottom p { font-size: 0.8rem; color: var(--itn-text-muted); }
.itn-footer-legal { display: flex; gap: var(--itn-space-6); }
.itn-footer-legal a { font-size: 0.8rem; color: var(--itn-text-muted); transition: color var(--itn-t); }
.itn-footer-legal a:hover { color: var(--itn-text-2); }

/* =========================================
   SCROLL REVEAL
   ========================================= */
.itn-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.itn-reveal.visible { opacity: 1; transform: translateY(0); }

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
  .itn-hero-inner       { grid-template-columns: 1fr; text-align: center; }
  .itn-hero-desc        { max-width: 100%; }
  .itn-hero-actions     { justify-content: center; }
  .itn-hero-trust       { justify-content: center; }
  .itn-hero-visual      { max-width: 620px; margin: 0 auto; }
  .itn-feature-grid     { grid-template-columns: repeat(2, 1fr); }
  .itn-products-grid    { grid-template-columns: repeat(2, 1fr); }
  .itn-pricing-grid     { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .itn-pricing-card.popular { transform: none; }
  .itn-testi-grid       { grid-template-columns: 1fr 1fr; }
  .itn-blog-grid        { grid-template-columns: 1fr 1fr; }
  .itn-post-wrap        { grid-template-columns: 1fr; }
  .itn-post-sidebar     { position: static; }
  .itn-stats-row        { grid-template-columns: repeat(2, 1fr); }
  .itn-footer-grid      { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --itn-header-h: 60px; }

  /* Only the hamburger is loose in the header row now; the whole
     nav-links block (menu items + actions, all one copy) collapses
     into a fullscreen panel that the hamburger opens and closes. */
  .itn-nav-links { display: none; }
  .itn-hamburger { display: flex; }

  .itn-nav-links.open {
    display: flex; flex-direction: column;
    position: fixed; inset: 0;
    background: var(--itn-bg);
    z-index: 890;
    align-items: center; justify-content: flex-start;
    gap: var(--itn-space-2);
    font-size: 1.05rem;
    padding: calc(var(--itn-header-h) + var(--itn-adminbar-h, 0px) + var(--itn-space-8)) var(--itn-space-6) var(--itn-space-8);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .itn-nav-links.open > a,
  .itn-nav-links.open .itn-nav-item,
  .itn-nav-links.open .itn-dropdown {
    width: 100%; text-align: center;
  }
  .itn-nav-links.open > a,
  .itn-nav-links.open .itn-nav-item {
    justify-content: center;
    padding: var(--itn-space-4);
    border-bottom: 1px solid var(--itn-border);
    font-size: 1rem;
  }

  /* The actions block sits at the bottom of the panel, stacked and
     full-width, still the same single element from the markup. */
  .itn-nav-links.open .itn-nav-actions {
    flex-direction: column; align-items: stretch;
    width: 100%; gap: var(--itn-space-3);
    margin-top: var(--itn-space-6);
    margin-left: 0; /* reset the desktop-only auto-push so it doesn't
                        skew the stacked mobile buttons off-center */
  }
  .itn-nav-links.open .itn-nav-actions .itn-btn {
    width: 100%; justify-content: center;
    padding: .8rem 1.4rem; font-size: .95rem;
  }
  .itn-nav-links.open .itn-dark-toggle { align-self: center; }

  .itn-feature-grid  { grid-template-columns: 1fr; }
  .itn-products-grid { grid-template-columns: 1fr; }
  .itn-testi-grid    { grid-template-columns: 1fr; }
  .itn-blog-grid     { grid-template-columns: 1fr; }
  .itn-stats-row     { grid-template-columns: 1fr 1fr; }
  .itn-stat-cell     { border-right: none; border-bottom: 1px solid var(--itn-border); }
  .itn-stat-cell:last-child, .itn-stat-cell:nth-child(2) { border-bottom: none; }
  .itn-footer-grid   { grid-template-columns: 1fr; }
  .itn-footer-bottom { flex-direction: column; text-align: center; }
  .itn-cta-box       { padding: var(--itn-space-12) var(--itn-space-6); }
  .itn-frame-body    { grid-template-columns: 1fr; }
}


@media (max-width: 480px) {
  .itn-container { padding: 0 var(--itn-space-4); }
  .itn-stats-row { grid-template-columns: 1fr; }
  .itn-hero-actions { flex-direction: column; align-items: center; width: 100%; }
  .itn-hero-actions .itn-btn { width: 100%; justify-content: center; }
}

/* =========================================
   UTILITY
   ========================================= */
.itn-text-center { text-align: center; }
.itn-mt-auto     { margin-top: auto; }
.itn-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; }
.itn-skip-link   { position: absolute; top: -40px; left: 0; z-index: 9999; background: var(--itn-primary); color: var(--itn-on-primary); padding: 8px 16px; border-radius: 0 0 var(--itn-r-sm) 0; transition: top var(--itn-t); }
.itn-skip-link:focus { top: 0; }

/* =========================================
   PRINT
   ========================================= */
@media print {
  .itn-header, .itn-footer, #itn-preloader, #itn-back-top { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}

/* =========================================
   LOGO — dark/light switching
   ========================================= */
.itn-logo-img { display: block; width: auto; }
.itn-logo-mark { flex-shrink: 0; }
.itn-logo-text { white-space: nowrap; }

/* Show the correct logo for the active mode */
.itn-logo-on-light { display: none; }
body.itn-light .itn-logo-on-dark  { display: none; }
body.itn-light .itn-logo-on-light { display: block; }

/* =========================================================
   ADMIN BAR OFFSET (robust, JS-measured)
   --itn-adminbar-h is set live by main.js from the real height of
   the WordPress toolbar. The variable defaults to 0px at :root —
   correct for the vast majority of page views, which have no
   toolbar at all. The 32px/46px pre-JS fallback only applies inside
   body.admin-bar, so a logged-out visitor is never affected even
   for the brief instant before JS runs. Nothing here hides the
   toolbar; it only shifts the site header down to sit below it.
   ========================================================= */
:root { --itn-adminbar-h: 0px; }
body.admin-bar { --itn-adminbar-h: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --itn-adminbar-h: 46px; }
}

body.admin-bar .itn-post-sidebar { top: calc(var(--itn-header-h) + var(--itn-adminbar-h) + 24px); }
body.admin-bar .itn-hero { padding-top: calc(var(--itn-header-h) + var(--itn-adminbar-h) + var(--itn-announce-h, 0px) + var(--itn-space-16)); }
body.admin-bar #itn-preloader,
body.admin-bar .itn-page-transition,
body.admin-bar .itn-progress { top: var(--itn-adminbar-h); }

/* Generic top padding for non-hero pages */
.itn-page-top { padding-top: calc(var(--itn-header-h) + var(--itn-announce-h, 0px)); }
body.admin-bar .itn-page-top { padding-top: calc(var(--itn-header-h) + var(--itn-adminbar-h) + var(--itn-announce-h, 0px)); }

@media screen and (max-width: 782px) {
  body.admin-bar .itn-post-sidebar { top: calc(var(--itn-header-h) + var(--itn-adminbar-h) + 16px); }
  body.admin-bar .itn-hero { padding-top: calc(var(--itn-header-h) + var(--itn-adminbar-h) + var(--itn-announce-h, 0px) + var(--itn-space-12)); }
}

/* =========================================================
   v1.1.0 — DROPDOWN HOVER FIX
   A transparent bridge keeps the menu open while the cursor
   travels from the trigger down to the panel.
   ========================================================= */
.itn-dropdown { position: relative; padding: 10px 0; margin: -10px 0; }

.itn-dropdown-menu {
  top: 100%;
  margin-top: 0;
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  transition-delay: .12s; /* forgiving close */
}
.itn-dropdown-menu::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -14px; height: 16px;
  background: transparent;
}
.itn-dropdown:hover .itn-dropdown-menu,
.itn-dropdown:focus-within .itn-dropdown-menu {
  transition-delay: 0s;
}
.itn-dropdown-menu.itn-open {
  opacity: 1; visibility: visible; pointer-events: all;
  transform: translateX(calc(-50% + var(--itn-dd-shift, 0px))) translateY(0) scale(1);
}

/* =========================================================
   v1.1.0 — MODERN COMMENTS
   ========================================================= */
.itn-comments { margin-top: var(--itn-space-16); }

.itn-comments-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--itn-space-4); flex-wrap: wrap;
  margin-bottom: var(--itn-space-8);
  padding-bottom: var(--itn-space-5);
  border-bottom: 1px solid var(--itn-border);
}
.itn-comments-head h2 {
  font-size: 1.25rem; margin: 0;
  display: flex; align-items: center; gap: var(--itn-space-3);
}
.itn-comments-count {
  font-size: .8rem; font-weight: 700;
  background: var(--itn-primary-glow); color: var(--itn-primary-light);
  border: 1px solid rgba(var(--itn-primary-rgb),.3);
  padding: 3px 11px; border-radius: var(--itn-r-full);
}

/* --- Comment list --- */
.itn-comment-list { list-style: none; margin: 0; padding: 0; }
.itn-comment-list .children {
  list-style: none;
  margin: var(--itn-space-4) 0 0;
  padding-left: var(--itn-space-8);
  border-left: 2px solid var(--itn-border);
}
@media (max-width: 640px) {
  .itn-comment-list .children { padding-left: var(--itn-space-4); }
}

.itn-comment {
  background: var(--itn-bg-card);
  border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-lg);
  padding: var(--itn-space-6);
  margin-bottom: var(--itn-space-4);
  transition: border-color var(--itn-t);
}
.itn-comment:hover { border-color: var(--itn-border-hover); }

.itn-comment-top {
  display: flex; align-items: center; gap: var(--itn-space-4);
  margin-bottom: var(--itn-space-4);
}
.itn-comment-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  flex-shrink: 0; overflow: hidden;
  border: 2px solid var(--itn-border);
}
.itn-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.itn-comment-who { flex: 1; min-width: 0; }
.itn-comment-name {
  font-size: .92rem; font-weight: 600; color: var(--itn-heading);
  display: flex; align-items: center; gap: var(--itn-space-2);
}
.itn-comment-badge {
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 2px 7px; border-radius: var(--itn-r-full);
  background: var(--itn-primary); color: var(--itn-on-primary);
}
.itn-comment-date { font-size: .75rem; color: var(--itn-text-muted); margin-top: 1px; }

.itn-comment-body {
  font-size: .92rem; line-height: 1.75; color: var(--itn-text-2);
}
.itn-comment-body p { margin-bottom: var(--itn-space-3); }
.itn-comment-body p:last-child { margin-bottom: 0; }

.itn-comment-actions {
  display: flex; align-items: center; gap: var(--itn-space-4);
  margin-top: var(--itn-space-4);
  padding-top: var(--itn-space-3);
  border-top: 1px solid var(--itn-border);
}
.itn-comment-actions a {
  font-size: .8rem; font-weight: 600; color: var(--itn-primary-light);
  display: inline-flex; align-items: center; gap: 5px;
}
.itn-comment-actions a:hover { color: var(--itn-text); }

.itn-comment-pending {
  font-size: .78rem; color: var(--itn-warning);
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.22);
  padding: 6px 12px; border-radius: var(--itn-r-sm);
  margin-bottom: var(--itn-space-3); display: inline-block;
}

/* --- Comment form --- */
.itn-comment-form-wrap {
  background: var(--itn-bg-card);
  border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-xl);
  padding: var(--itn-space-8);
  margin-top: var(--itn-space-8);
  position: relative; overflow: hidden;
}
.itn-comment-form-wrap::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--itn-primary), var(--itn-accent));
}
.itn-comment-form-head { margin-bottom: var(--itn-space-6); }
.itn-comment-form-head h3 { font-size: 1.15rem; margin-bottom: var(--itn-space-2); }
.itn-comment-form-head p { font-size: .85rem; margin: 0; }

.itn-form-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--itn-space-4); margin-bottom: var(--itn-space-4);
}
@media (max-width: 640px) { .itn-form-grid { grid-template-columns: 1fr; } }

.itn-form-field { margin-bottom: var(--itn-space-4); }
.itn-form-field label {
  display: block; font-size: .8rem; font-weight: 600;
  color: var(--itn-text-2); margin-bottom: var(--itn-space-2);
}
.itn-form-field .req { color: var(--itn-primary-light); }

.itn-form-input,
.itn-form-textarea {
  width: 100%; padding: 12px 14px;
  background: var(--itn-bg-2);
  border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-md);
  color: var(--itn-text);
  font-family: inherit; font-size: .92rem; line-height: 1.6;
  outline: none;
  transition: border-color var(--itn-t), box-shadow var(--itn-t);
}
.itn-form-input::placeholder,
.itn-form-textarea::placeholder { color: var(--itn-text-muted); }
.itn-form-input:focus,
.itn-form-textarea:focus {
  border-color: var(--itn-primary);
  box-shadow: 0 0 0 3px var(--itn-primary-glow);
}
.itn-form-textarea { min-height: 140px; resize: vertical; }

.itn-form-consent {
  display: flex; align-items: flex-start; gap: var(--itn-space-3);
  margin-bottom: var(--itn-space-5);
  font-size: .82rem; color: var(--itn-text-muted); line-height: 1.6;
}
.itn-form-consent input[type="checkbox"] {
  width: 16px; height: 16px; margin-top: 3px;
  accent-color: var(--itn-primary); flex-shrink: 0; cursor: pointer;
}

.itn-form-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--itn-space-4); flex-wrap: wrap;
}
.itn-form-note { font-size: .78rem; color: var(--itn-text-muted); }

.itn-logged-in-as {
  display: flex; align-items: center; gap: var(--itn-space-3);
  padding: var(--itn-space-3) var(--itn-space-4);
  background: var(--itn-bg-2); border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-md); margin-bottom: var(--itn-space-5);
  font-size: .84rem; color: var(--itn-text-2); flex-wrap: wrap;
}
.itn-logged-in-as img { width: 28px; height: 28px; border-radius: 50%; }
.itn-logged-in-as a { color: var(--itn-primary-light); font-weight: 600; }

.itn-comments-closed {
  text-align: center; padding: var(--itn-space-8);
  background: var(--itn-bg-card); border: 1px dashed var(--itn-border);
  border-radius: var(--itn-r-lg); color: var(--itn-text-muted);
  font-size: .88rem; margin-top: var(--itn-space-8);
}

/* Cancel reply link */
#cancel-comment-reply-link {
  font-size: .8rem; color: var(--itn-danger); font-weight: 600;
  margin-left: var(--itn-space-3);
}

/* =========================================================
   v1.1.0 — BLOG PAGE
   ========================================================= */
.itn-blog-header {
  text-align: center;
  padding: var(--itn-space-16) 0 var(--itn-space-12);
  border-bottom: 1px solid var(--itn-border);
  margin-bottom: var(--itn-space-12);
  position: relative; overflow: hidden;
}
.itn-blog-header::before {
  content: ''; position: absolute;
  top: -60%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 480px; pointer-events: none;
  background: radial-gradient(ellipse, rgba(var(--itn-primary-rgb),.1) 0%, transparent 65%);
}
.itn-blog-header > * { position: relative; }
.itn-blog-header h1 { margin-bottom: var(--itn-space-4); }
.itn-blog-header p  { max-width: 620px; margin: 0 auto; font-size: 1.05rem; }

/* Category filter pills */
.itn-cat-filter {
  display: flex; gap: var(--itn-space-2); flex-wrap: wrap;
  justify-content: center; margin-top: var(--itn-space-8);
}
.itn-cat-pill {
  padding: 7px 16px; border-radius: var(--itn-r-full);
  font-size: .83rem; font-weight: 500;
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
  color: var(--itn-text-2); transition: all var(--itn-t);
}
.itn-cat-pill:hover { border-color: var(--itn-primary); color: var(--itn-primary-light); }
.itn-cat-pill.active {
  background: var(--itn-primary); border-color: var(--itn-primary); color: var(--itn-on-primary);
}

/* Featured post */
.itn-featured-post {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: var(--itn-space-8); align-items: center;
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-xl); overflow: hidden;
  margin-bottom: var(--itn-space-12);
  transition: border-color var(--itn-t), box-shadow var(--itn-t);
}
.itn-featured-post:hover { border-color: rgba(var(--itn-primary-rgb),.35); box-shadow: var(--itn-shadow-glow); }
.itn-featured-post img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.itn-featured-body { padding: var(--itn-space-8) var(--itn-space-8) var(--itn-space-8) 0; }
.itn-featured-body h2 { font-size: 1.7rem; margin: var(--itn-space-3) 0 var(--itn-space-4); line-height: 1.25; }
.itn-featured-body h2 a { color: var(--itn-heading); }
.itn-featured-body h2 a:hover { color: var(--itn-primary-light); }
.itn-featured-flag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--itn-secondary);
  background: rgba(var(--itn-secondary-rgb),.12); border: 1px solid rgba(var(--itn-secondary-rgb),.25);
  padding: 3px 10px; border-radius: var(--itn-r-full);
}
@media (max-width: 900px) {
  .itn-featured-post { grid-template-columns: 1fr; }
  .itn-featured-post img { min-height: 220px; }
  .itn-featured-body { padding: var(--itn-space-6); }
}

/* Blog layout variants */
.itn-blog-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.itn-blog-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .itn-blog-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  {
  .itn-blog-grid.cols-2,
  .itn-blog-grid.cols-3 { grid-template-columns: 1fr; }
}

.itn-blog-list { display: flex; flex-direction: column; gap: var(--itn-space-5); }
.itn-blog-list .itn-blog-card {
  flex-direction: row; align-items: stretch;
}
.itn-blog-list .itn-blog-card > a,
.itn-blog-list .itn-blog-thumb-placeholder { width: 280px; flex-shrink: 0; }
.itn-blog-list .itn-blog-thumb { height: 100%; aspect-ratio: auto; }
@media (max-width: 700px) {
  .itn-blog-list .itn-blog-card { flex-direction: column; }
  .itn-blog-list .itn-blog-card > a,
  .itn-blog-list .itn-blog-thumb-placeholder { width: 100%; }
  .itn-blog-list .itn-blog-thumb { aspect-ratio: 16/9; }
}

.itn-blog-masonry { columns: 3; column-gap: var(--itn-space-6); }
.itn-blog-masonry .itn-blog-card {
  break-inside: avoid; margin-bottom: var(--itn-space-6); display: block;
}
@media (max-width: 1024px) { .itn-blog-masonry { columns: 2; } }
@media (max-width: 700px)  { .itn-blog-masonry { columns: 1; } }

/* Pagination */
.itn-pagination {
  display: flex; justify-content: center; align-items: center;
  gap: var(--itn-space-2); margin-top: var(--itn-space-12); flex-wrap: wrap;
}
.itn-pagination .page-numbers {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--itn-r-md); font-size: .88rem; font-weight: 600;
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
  color: var(--itn-text-2); transition: all var(--itn-t);
}
.itn-pagination .page-numbers:hover {
  border-color: var(--itn-primary); color: var(--itn-primary-light);
}
.itn-pagination .page-numbers.current {
  background: var(--itn-primary); border-color: var(--itn-primary); color: var(--itn-on-primary);
}
.itn-pagination .dots { border: none; background: none; }

/* Share buttons */
.itn-share {
  display: flex; align-items: center; gap: var(--itn-space-3);
  flex-wrap: wrap; margin: var(--itn-space-8) 0;
  padding: var(--itn-space-5); border-radius: var(--itn-r-lg);
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
}
.itn-share-label { font-size: .82rem; font-weight: 600; color: var(--itn-text-2); }
.itn-share-btns { display: flex; gap: var(--itn-space-2); flex-wrap: wrap; }
.itn-share-btn {
  width: 36px; height: 36px; border-radius: var(--itn-r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--itn-bg-elevated); border: 1px solid var(--itn-border);
  color: var(--itn-text-2); font-size: .85rem; transition: all var(--itn-t);
}
.itn-share-btn:hover {
  background: var(--itn-primary); border-color: var(--itn-primary); color: var(--itn-on-primary);
}

/* Search form */
.itn-search-form { position: relative; }
.itn-search-form input[type="search"] {
  width: 100%; padding: 11px 14px;
  background: var(--itn-bg-2); border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-md); color: var(--itn-text);
  font-family: inherit; font-size: .88rem; outline: none;
  transition: border-color var(--itn-t);
}
.itn-search-form input[type="search"]:focus { border-color: var(--itn-primary); }
.itn-search-dropdown {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-md); box-shadow: var(--itn-shadow-md);
  z-index: 50; overflow: hidden;
}
.itn-search-result {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--itn-space-3); padding: 10px 14px; font-size: .85rem;
  color: var(--itn-text-2); border-bottom: 1px solid var(--itn-border);
}
.itn-search-result:last-child { border-bottom: none; }
.itn-search-result:hover { background: var(--itn-bg-elevated); color: var(--itn-text); }
.itn-search-type {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--itn-text-muted);
}

/* =========================================================
   v1.2.0 — ANNOUNCEMENT BAR
   ========================================================= */
.itn-announce {
  position: relative; z-index: 950;
  background: linear-gradient(90deg, var(--itn-primary), var(--itn-accent));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  gap: var(--itn-space-4); padding: 10px var(--itn-space-8);
  font-size: .85rem; font-weight: 500; text-align: center;
  flex-wrap: wrap;
}
.itn-announce-inner { display: flex; align-items: center; gap: var(--itn-space-3); flex-wrap: wrap; justify-content: center; }
.itn-announce-link {
  color: #fff; font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; white-space: nowrap;
}
.itn-announce-link:hover { color: rgba(255,255,255,.85); }
.itn-announce-close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.18); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1; flex-shrink: 0;
  transition: background .15s;
}
.itn-announce-close:hover { background: rgba(255,255,255,.3); }
.itn-announce.itn-hidden { display: none; }

/* Push the fixed header down when the announcement bar is visible.
   --itn-announce-h is set live by main.js (0 if hidden/dismissed).
   --itn-adminbar-h now correctly defaults to 0px everywhere except
   inside body.admin-bar, so a single rule covers every case. */
:root { --itn-announce-h: 0px; }
.itn-header { top: calc(var(--itn-adminbar-h) + var(--itn-announce-h)); }

/* =========================================================
   v1.3.6 — WHATSAPP CHAT WIDGET
   ========================================================= */
.itn-wa { position: fixed; bottom: 24px; z-index: 850; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.itn-wa--right { right: 24px; }
.itn-wa--left  { left: 24px; align-items: flex-start; }
.itn-wa [hidden] { display: none !important; }
.itn-wa-launch {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #2BE077, #12A34A); color: #fff; font: 600 .92rem/1 inherit;
  box-shadow: 0 10px 28px rgba(18,163,74,.38), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.itn-wa-launch:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(18,163,74,.48), inset 0 1px 0 rgba(255,255,255,.3); }
.itn-wa-launch:focus-visible, .itn-wa-cta:focus-visible, .itn-wa-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #12A34A; }
.itn-wa-launch::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: #25D366; z-index: -1;
  animation: itn-wa-pulse 2.6s ease-out infinite;
}
@keyframes itn-wa-pulse { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(1.35, 1.6); opacity: 0; } }
.itn-wa-launch svg { flex: none; }
.itn-wa.is-open .itn-wa-launch::before { animation: none; opacity: 0; }

.itn-wa-card {
  width: min(340px, calc(100vw - 32px)); overflow: hidden; border-radius: 20px;
  background: var(--itn-bg-card, #fff); color: var(--itn-text, #1a2233);
  border: 1px solid var(--itn-border, rgba(0,0,0,.08));
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  transform-origin: bottom right; animation: itn-wa-in .28s cubic-bezier(.16,1,.3,1);
}
.itn-wa--left .itn-wa-card { transform-origin: bottom left; }
@keyframes itn-wa-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.itn-wa-head { display: flex; align-items: center; gap: 12px; padding: 16px; background: linear-gradient(135deg, #0E8F43, #12A34A 60%, #25D366); color: #fff; }
.itn-wa-avatar { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: rgba(255,255,255,.22); font-weight: 700; letter-spacing: .02em; }
.itn-wa-avatar img { width: 100%; height: 100%; object-fit: cover; }
.itn-wa-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.itn-wa-who strong { font-size: .98rem; }
.itn-wa-who small { opacity: .9; font-size: .78rem; }
.itn-wa-who small::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #B6FFCF; box-shadow: 0 0 0 3px rgba(182,255,207,.3); }
.itn-wa-close { margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background .2s; }
.itn-wa-close:hover { background: rgba(255,255,255,.3); }
.itn-wa-body { padding: 18px 16px 6px; background: rgba(37,211,102,.07); }
.itn-wa-bubble { position: relative; margin: 0; padding: 12px 14px; max-width: 92%; border-radius: 4px 16px 16px 16px; background: var(--itn-bg-card-light, #fff); color: #1a2233; font-size: .9rem; line-height: 1.55; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.itn-wa-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 16px 8px; padding: 13px 16px; border-radius: 12px; background: #12A34A; color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; transition: background .2s, transform .2s; }
.itn-wa-cta:hover { background: #0E8F43; color: #fff; transform: translateY(-1px); }
.itn-wa-cta svg { width: 20px; height: 20px; }
.itn-wa-note { margin: 0; padding: 0 16px 14px; text-align: center; font-size: .72rem; color: var(--itn-text-muted, #6b7689); }

.itn-wa-teaser {
  max-width: 250px; padding: 11px 14px; border: 1px solid var(--itn-border, rgba(0,0,0,.08)); border-radius: 16px 16px 4px 16px;
  background: var(--itn-bg-card, #fff); color: var(--itn-text, #1a2233); font: 500 .85rem/1.45 inherit; text-align: left; cursor: pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,.2); animation: itn-wa-in .35s cubic-bezier(.16,1,.3,1);
}
.itn-wa--left .itn-wa-teaser { border-radius: 16px 16px 16px 4px; }

/* Keep the back-to-top button clear of the chat button */
body.itn-has-wa--right #itn-back-top { bottom: 96px; right: 28px; }
body.itn-has-wa--left  #itn-back-top { bottom: 28px; }

@media (max-width: 640px) {
  .itn-wa { bottom: 16px; }
  .itn-wa--right { right: 16px; } .itn-wa--left { left: 16px; }
  .itn-wa-launch { width: 56px; padding: 0; justify-content: center; }
  .itn-wa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.itn-has-wa--right #itn-back-top { bottom: 84px; right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .itn-wa-launch::before { animation: none; opacity: 0; }
  .itn-wa-card, .itn-wa-teaser { animation: none; }
  .itn-wa-launch, .itn-wa-cta { transition: none; }
}
@media print { .itn-wa { display: none !important; } }

/* =========================================================
   v1.2.0 — COOKIE CONSENT
   ========================================================= */
.itn-cookie {
  position: fixed; left: 20px; bottom: 20px; z-index: 999;
  max-width: 380px; background: var(--itn-bg-card);
  border: 1px solid var(--itn-border); border-radius: var(--itn-r-lg);
  padding: var(--itn-space-5); box-shadow: var(--itn-shadow-lg);
  transform: translateY(140%); opacity: 0;
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.itn-cookie.itn-visible { transform: translateY(0); opacity: 1; }
.itn-cookie p { font-size: .82rem; line-height: 1.6; margin: 0 0 var(--itn-space-4); }
.itn-cookie-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--itn-space-3); flex-wrap: wrap; }
.itn-cookie-actions a { font-size: .78rem; color: var(--itn-text-muted); }
.itn-cookie-actions a:hover { color: var(--itn-primary-light); }
@media (max-width: 480px) { .itn-cookie { left: 12px; right: 12px; bottom: 12px; max-width: none; } }

/* =========================================================
   v1.2.0 — READING PROGRESS BAR
   ========================================================= */
.itn-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--itn-primary), var(--itn-accent));
  z-index: 999; transition: width .1s linear;
}
/* admin-bar offset for .itn-progress is already handled by the dynamic --itn-adminbar-h rule above */

/* =========================================================
   v1.2.0 — TABLE OF CONTENTS
   ========================================================= */
.itn-toc {
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-lg); padding: var(--itn-space-5);
  margin-bottom: var(--itn-space-8);
}
.itn-toc-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .85rem; font-weight: 700; color: var(--itn-heading);
}
.itn-toc-toggle {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--itn-border); color: var(--itn-text-muted);
  font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.itn-toc-toggle:hover { border-color: var(--itn-primary); color: var(--itn-primary-light); }
.itn-toc-list {
  list-style: none; margin: var(--itn-space-4) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 400px; overflow: hidden; transition: max-height .3s ease, margin .3s ease, opacity .3s ease;
}
.itn-toc.itn-collapsed .itn-toc-list { max-height: 0; margin-top: 0; opacity: 0; }
.itn-toc-list a {
  font-size: .84rem; color: var(--itn-text-2); line-height: 1.5;
  display: block; padding: 3px 0; transition: color .15s;
}
.itn-toc-list a:hover, .itn-toc-list a.itn-active { color: var(--itn-primary-light); }
.itn-toc-list li.itn-toc-h3 { padding-left: var(--itn-space-4); }

/* =========================================================
   v1.2.0 — VIEW COUNTER (shares .itn-blog-meta / .itn-post-meta styling)
   ========================================================= */
.itn-view-count { display: inline-flex; align-items: center; gap: 4px; }

/* =========================================================
   v1.2.0 — MISC POLISH
   ========================================================= */
::selection { background: var(--itn-primary); color: var(--itn-on-primary); }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--itn-primary);
  outline-offset: 2px;
}

/* Images render normally — no fade-in-after-load trick, since that
   requires JS to mark each image "loaded" and silently hides content
   forever if that JS never runs for any reason. Not worth the risk. */

/* =========================================================
   v1.3.0 — TIMELINE (About Us page)
   ========================================================= */
.itn-timeline { position: relative; padding-left: var(--itn-space-8); }
.itn-timeline::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(var(--itn-primary), var(--itn-accent));
}
.itn-timeline-item { position: relative; margin-bottom: var(--itn-space-10); }
.itn-timeline-item:last-child { margin-bottom: 0; }
.itn-timeline-dot {
  position: absolute; left: calc(-1 * var(--itn-space-8) + 1px); top: 6px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--itn-primary); border: 3px solid var(--itn-bg);
  box-shadow: 0 0 0 2px var(--itn-primary);
}
.itn-timeline-year {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--itn-primary-light);
  background: var(--itn-primary-glow); padding: 3px 10px; border-radius: var(--itn-r-full);
  margin-bottom: var(--itn-space-3);
}
.itn-timeline-content h3 { font-size: 1.1rem; margin-bottom: var(--itn-space-2); }
.itn-timeline-content p { font-size: .92rem; margin: 0; }

@media (max-width: 640px) {
  .itn-timeline { padding-left: var(--itn-space-6); }
  .itn-timeline-dot { left: calc(-1 * var(--itn-space-6) + 1px); }
}

/* =========================================================
   v1.3.0 — BLOCK PATTERN COMPATIBILITY
   Neutralizes WordPress core block default spacing so IT
   Nirman patterns render exactly like hand-coded sections.
   ========================================================= */
.itn-post-content .wp-block-group.itn-section,
.itn-post-content > .wp-block-group.itn-hero,
.itn-post-content .wp-block-group.itn-cta-box {
  padding-left: var(--itn-space-8); padding-right: var(--itn-space-8);
  max-width: var(--itn-container); margin-left: auto; margin-right: auto;
}
.itn-post-content .wp-block-columns.itn-feature-grid { gap: var(--itn-space-6); margin: 0; }
.itn-post-content .wp-block-columns.itn-feature-grid .wp-block-column { margin: 0; }
.itn-post-content .wp-block-group.itn-feature-card,
.itn-post-content .wp-block-group.itn-testi-card,
.itn-post-content .wp-block-group.itn-faq-item,
.itn-post-content .wp-block-group.itn-stat-cell { padding: var(--itn-space-8); }
.itn-post-content .wp-block-quote.itn-testi-quote {
  border: none; padding: 0; margin: 0 0 var(--itn-space-4);
  font-size: .9rem; line-height: 1.8; color: var(--itn-text-2); font-style: italic;
}
.itn-post-content .itn-stats-row.wp-block-group { padding: 0; }
.itn-post-content .wp-block-buttons { margin-top: var(--itn-space-6); }
@media (max-width: 768px) {
  .itn-post-content .wp-block-columns.itn-feature-grid { flex-wrap: wrap; }
}

/* =========================================================
   v1.4.0 — RESPONSIVE OVERHAUL
   Utility grids, product rows, tables, and a full mobile
   audit of every section.
   ========================================================= */

/* ---- Responsive grid utilities (replace inline styles) ---- */
.itn-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--itn-space-6); }
.itn-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--itn-space-6); }
.itn-cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--itn-space-6); }
.itn-narrow { max-width: 760px; margin-left: auto; margin-right: auto; }

@media (max-width: 1024px) {
  .itn-cols-3, .itn-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .itn-cols-2, .itn-cols-3, .itn-cols-4 { grid-template-columns: 1fr; }
}

/* ---- Product detail rows (Products page) ---- */
.itn-product-detail {
  display: grid; grid-template-columns: 1fr 240px;
  gap: var(--itn-space-8); align-items: center;
}
.itn-product-detail-main { min-width: 0; }
@media (max-width: 820px) {
  .itn-product-detail { grid-template-columns: 1fr; gap: var(--itn-space-5); }
  .itn-product-detail-side { width: 100%; }
}

/* ---- Comparison table ---- */
.itn-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-lg);
  background: var(--itn-bg-card);
}
.itn-compare-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 520px; }
.itn-compare-table th {
  text-align: left; padding: var(--itn-space-4) var(--itn-space-5);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--itn-text-muted);
  border-bottom: 1px solid var(--itn-border); white-space: nowrap;
}
.itn-compare-table td {
  padding: var(--itn-space-4) var(--itn-space-5);
  border-bottom: 1px solid var(--itn-border); color: var(--itn-text-2);
}
.itn-compare-table tr:last-child td { border-bottom: none; }
.itn-compare-table td a { color: var(--itn-primary-light); font-weight: 600; }

/* =========================================================
   MOBILE AUDIT — tablet
   ========================================================= */
@media (max-width: 1024px) {
  :root { --itn-space-32: 5rem; --itn-space-24: 4rem; }

  .itn-hero { min-height: auto; }
  .itn-hero-visual { max-width: 560px; }
  .itn-dashboard-frame { transform: none; }

  .itn-section-header { margin-bottom: var(--itn-space-10); }
  .itn-cta-box { padding: var(--itn-space-16) var(--itn-space-8); }
}

/* =========================================================
   MOBILE AUDIT — phones
   ========================================================= */
@media (max-width: 768px) {
  :root {
    --itn-space-32: 3.5rem;
    --itn-space-24: 3rem;
    --itn-space-20: 2.5rem;
    --itn-space-16: 2rem;
  }

  /* Typography scales down so headlines don't overflow */
  h1 { font-size: clamp(1.75rem, 7vw, 2.4rem); }
  h2 { font-size: clamp(1.4rem, 5.5vw, 1.9rem); }
  h3 { font-size: 1.1rem; }
  body { font-size: .95rem; }

  .itn-hero-title { font-size: clamp(1.8rem, 7.5vw, 2.5rem) !important; }
  .itn-hero-desc  { font-size: 1rem; }
  .itn-section-desc { font-size: .95rem; }

  /* Buttons go full width and stack — much easier to tap */
  .itn-hero-actions,
  .itn-cta-actions {
    flex-direction: column; align-items: stretch; width: 100%;
  }
  .itn-hero-actions .itn-btn,
  .itn-cta-actions .itn-btn { width: 100%; justify-content: center; }
  .itn-btn-lg { padding: .85rem 1.4rem; font-size: .98rem; }

  /* Minimum 44px touch targets */
  .itn-btn, .itn-cat-pill, .itn-faq-q, .itn-share-btn { min-height: 44px; }
  .itn-faq-q { padding: var(--itn-space-4) var(--itn-space-5); font-size: .9rem; }
  .itn-faq-a { padding: 0 var(--itn-space-5) var(--itn-space-4); font-size: .88rem; }

  /* Hero trust row centres properly */
  .itn-hero-trust { flex-direction: column; gap: var(--itn-space-3); text-align: center; }

  /* Cards get tighter padding so content isn't squeezed */
  .itn-card,
  .itn-feature-card,
  .itn-testi-card,
  .itn-product-card,
  .itn-pricing-card { padding: var(--itn-space-5); }
  .itn-pricing-card { padding: var(--itn-space-6); }

  /* Timeline */
  .itn-timeline { padding-left: var(--itn-space-5); }
  .itn-timeline-item { margin-bottom: var(--itn-space-8); }
  .itn-timeline-dot { left: calc(-1 * var(--itn-space-5) + 1px); }

  /* Blog */
  .itn-blog-header { padding: var(--itn-space-10) 0 var(--itn-space-8); }
  .itn-featured-body { padding: var(--itn-space-5); }
  .itn-featured-body h2 { font-size: 1.25rem; }
  .itn-cat-filter { gap: var(--itn-space-2); }
  .itn-cat-pill { font-size: .78rem; padding: 8px 14px; }

  /* Post content */
  .itn-post-title { font-size: clamp(1.5rem, 6.5vw, 2rem); }
  .itn-post-meta  { gap: var(--itn-space-3); font-size: .85rem; }
  .itn-post-body  { font-size: .95rem; }
  .itn-post-body pre { padding: var(--itn-space-4); font-size: .8rem; }

  /* Tables inside post content scroll instead of overflowing */
  .itn-post-body table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Comments */
  .itn-comment-form-wrap { padding: var(--itn-space-5); }
  .itn-comment { padding: var(--itn-space-5); }
  .itn-comments-head { flex-direction: column; align-items: flex-start; gap: var(--itn-space-2); }
  .itn-comments-head h2 { font-size: 1.1rem; }

  /* Floating buttons don't overlap each other */
  #itn-back-top { width: 40px; height: 40px; bottom: 20px; right: 16px; }

  /* Announcement bar */
  .itn-announce { font-size: .78rem; padding: 9px 34px 9px 14px; }
  .itn-announce-inner { gap: var(--itn-space-2); }

  /* Table of contents */
  .itn-toc { padding: var(--itn-space-4); }
  .itn-toc-list { max-height: 260px; overflow-y: auto; }

  /* Dropdown becomes a plain stacked list inside the mobile menu */
  .itn-nav-links.open .itn-dropdown { width: 100%; text-align: center; padding: 0; margin: 0; }
  .itn-nav-links.open .itn-dropdown-menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    pointer-events: auto; box-shadow: none; background: transparent;
    border: none; padding: 0; min-width: 0; width: 100%;
    display: none;
  }
  .itn-nav-links.open .itn-dropdown-menu.itn-open { display: block; }
  .itn-nav-links.open .itn-dropdown-menu a { justify-content: center; }
}

/* =========================================================
   MOBILE AUDIT — small phones
   ========================================================= */
@media (max-width: 480px) {
  :root { --itn-space-32: 3rem; --itn-space-24: 2.5rem; }

  .itn-container { padding-left: var(--itn-space-4); padding-right: var(--itn-space-4); }

  h1 { font-size: clamp(1.6rem, 8vw, 2rem); }
  .itn-hero-title { font-size: clamp(1.65rem, 8vw, 2.1rem) !important; }

  .itn-eyebrow { font-size: .68rem; padding: 4px 12px; }

  /* Stats stack one per row and stay readable */
  .itn-stats-row { grid-template-columns: 1fr; }
  .itn-stat-cell { padding: var(--itn-space-5); border-right: none; border-bottom: 1px solid var(--itn-border); }
  .itn-stat-cell:last-child { border-bottom: none; }
  .itn-stat-num { font-size: 1.9rem; }

  /* Trust bar wraps cleanly */
  .itn-trust-bar-inner { gap: var(--itn-space-5); }
  .itn-trust-logos { gap: var(--itn-space-5); }
  .itn-trust-logo { font-size: .82rem; }

  /* Hero dashboard preview stacks its mini cards */
  .itn-frame-body { grid-template-columns: 1fr; gap: var(--itn-space-3); padding: var(--itn-space-4); }
  .itn-frame-url { font-size: .62rem; }
  .itn-float-badge { display: none; }

  /* Pricing */
  .itn-price-amt { font-size: 2.6rem; }
  .itn-pricing-toggle { gap: var(--itn-space-3); font-size: .85rem; }

  /* Footer */
  .itn-footer { padding-top: var(--itn-space-12); }
  .itn-footer-legal { flex-direction: column; gap: var(--itn-space-2); align-items: center; }

  /* Share buttons wrap */
  .itn-share { flex-direction: column; align-items: flex-start; gap: var(--itn-space-3); }

  /* Cookie banner full width */
  .itn-cookie { left: 10px; right: 10px; bottom: 10px; padding: var(--itn-space-4); }
  .itn-cookie p { font-size: .8rem; }
}

/* =========================================================
   GLOBAL OVERFLOW GUARDS
   Stops any single long word, URL, or wide element from
   forcing the whole page to scroll sideways on a phone.
   ========================================================= */
html, body { max-width: 100%; overflow-x: hidden; }
/* "clip" stops sideways scrolling just like "hidden", but without turning
   <body> into a scroll container — "hidden" there silently disabled every
   position: sticky element on the site (sidebars, the post contents). */
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }

.itn-post-body a,
.itn-post-body p,
.itn-comment-body,
.itn-blog-card h3,
.itn-featured-body h2 { overflow-wrap: break-word; word-wrap: break-word; }

.itn-post-body pre,
.itn-post-body table,
.itn-table-wrap { max-width: 100%; }

.itn-post-body iframe,
.itn-post-body video,
.itn-post-body embed {
  max-width: 100%; height: auto; display: block;
}

/* Ad zones never break the layout, whatever size the ad is */
.itn-ad-zone {
  max-width: 100%; overflow: hidden;
  display: flex; justify-content: center;
}
.itn-ad-zone > * { max-width: 100%; }
.itn-ad-zone ins { max-width: 100%; }

/* =========================================================
   TOUCH DEVICE REFINEMENTS
   Hover effects can stick on touchscreens, so limit lift
   animations to devices that actually have a cursor.
   ========================================================= */
@media (hover: none) {
  .itn-card:hover,
  .itn-feature-card:hover,
  .itn-product-card:hover,
  .itn-testi-card:hover,
  .itn-blog-card:hover,
  .itn-pricing-card:hover { transform: none; }

  .itn-btn:hover { transform: none; }
  .itn-dashboard-frame:hover { transform: none; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .itn-reveal { opacity: 1; transform: none; }
}

/* =========================================================
   v1.5.0 — BENTO PRODUCT SHOWCASE
   A more visual, asymmetric grid for the Products page.
   ========================================================= */
.itn-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--itn-space-5);
}
.itn-bento-card {
  position: relative; overflow: hidden;
  background: var(--itn-bg-card);
  border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-xl);
  padding: var(--itn-space-8);
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s;
  display: flex; flex-direction: column;
}
.itn-bento-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--itn-primary-rgb),.4);
  box-shadow: var(--itn-shadow-glow);
}
.itn-bento-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, var(--itn-bento-glow, rgba(var(--itn-primary-rgb),.14)) 0%, transparent 55%);
  pointer-events: none; opacity: 0; transition: opacity .3s;
}
.itn-bento-card:hover::before { opacity: 1; }

/* Sizing variants */
.itn-bento-lg { grid-column: span 4; }
.itn-bento-sm { grid-column: span 2; }
.itn-bento-half { grid-column: span 3; }

@media (max-width: 900px) {
  .itn-bento { grid-template-columns: 1fr; }
  .itn-bento-lg, .itn-bento-sm, .itn-bento-half { grid-column: span 1; }
}

.itn-bento-icon {
  width: 56px; height: 56px; border-radius: var(--itn-r-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: var(--itn-space-5);
  background: linear-gradient(135deg, var(--itn-bento-c1, var(--itn-primary)), var(--itn-bento-c2, var(--itn-accent)));
  box-shadow: 0 8px 24px -6px var(--itn-bento-c1, var(--itn-primary));
  position: relative; z-index: 1;
}
.itn-bento-card h3 { position: relative; z-index: 1; font-size: 1.35rem; margin-bottom: var(--itn-space-3); }
.itn-bento-card p  { position: relative; z-index: 1; font-size: .92rem; margin-bottom: var(--itn-space-5); flex: 1; }
.itn-bento-badge {
  position: relative; z-index: 1;
  display: inline-flex; align-self: flex-start;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 11px; border-radius: var(--itn-r-full);
  background: var(--itn-primary-glow); color: var(--itn-primary-light);
  border: 1px solid rgba(var(--itn-primary-rgb),.3);
  margin-bottom: var(--itn-space-4);
}
.itn-bento-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--itn-space-2); margin-bottom: var(--itn-space-5); }
.itn-bento-card .itn-btn { position: relative; z-index: 1; align-self: flex-start; }

/* Color themes per product */
.itn-bento-purple { --itn-bento-c1: var(--itn-primary); --itn-bento-c2: var(--itn-primary-light); --itn-bento-glow: rgba(var(--itn-primary-rgb),.16); }
.itn-bento-green  { --itn-bento-c1: #10B981; --itn-bento-c2: #34D399; --itn-bento-glow: rgba(16,185,129,.16); }
.itn-bento-cyan   { --itn-bento-c1: var(--itn-primary); --itn-bento-c2: var(--itn-primary-light); --itn-bento-glow: rgba(var(--itn-primary-rgb),.16); }

/* =========================================================
   v1.5.0 — CONNECTED FLOW (horizontal, with connector line)
   ========================================================= */
.itn-flow {
  display: grid; grid-template-columns: repeat(var(--itn-flow-n, 4), minmax(0, 1fr));
  gap: var(--itn-space-5); position: relative;
  counter-reset: itn-flow;
}
.itn-flow::before {
  content: ''; position: absolute; top: 27px; left: calc(50% / var(--itn-flow-n, 4)); right: calc(50% / var(--itn-flow-n, 4)); height: 2px;
  background: linear-gradient(90deg, var(--itn-primary), var(--itn-accent), var(--itn-secondary));
  opacity: .35; z-index: 0;
}
.itn-flow-step { position: relative; z-index: 1; text-align: center; }
.itn-flow-num {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto var(--itn-space-4);
  background: var(--itn-bg-card); border: 2px solid var(--itn-primary);
  color: var(--itn-primary-light); font-weight: 800; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px var(--itn-bg);
}
.itn-flow-step h3 { font-size: .98rem; margin-bottom: var(--itn-space-2); }
.itn-flow-step p  { font-size: .82rem; }

@media (max-width: 900px) {
  .itn-flow { grid-template-columns: 1fr; gap: var(--itn-space-8); }
  .itn-flow::before { left: 27px; right: auto; top: 6%; bottom: 6%; width: 2px; height: auto; }
  .itn-flow-step { text-align: left; display: flex; gap: var(--itn-space-4); align-items: flex-start; }
  .itn-flow-num { margin: 0; flex-shrink: 0; }
}

/* =========================================================
   v1.5.0 — FIT CARDS (visual comparison, replaces plain table)
   ========================================================= */
.itn-fit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--itn-space-5); }
.itn-fit-card {
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-lg); padding: var(--itn-space-6);
  display: flex; gap: var(--itn-space-4); align-items: flex-start;
  transition: border-color .2s, transform .2s;
}
.itn-fit-card:hover { border-color: rgba(var(--itn-primary-rgb),.35); transform: translateY(-3px); }
.itn-fit-icon {
  width: 42px; height: 42px; border-radius: var(--itn-r-md); flex-shrink: 0;
  background: var(--itn-primary-glow); color: var(--itn-primary-light);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.itn-fit-card h4 { font-size: .95rem; margin-bottom: var(--itn-space-2); }
.itn-fit-card p  { font-size: .85rem; margin: 0; }
.itn-fit-card .itn-fit-link { display: inline-block; margin-top: var(--itn-space-2); font-size: .82rem; font-weight: 600; color: var(--itn-primary-light); }
@media (max-width: 700px) { .itn-fit-grid { grid-template-columns: 1fr; } }

/* =========================================================
   v1.5.0 — MODERN HOMEPAGE POLISH
   ========================================================= */
.itn-hero-orb-1, .itn-hero-orb-2, .itn-hero-orb-3 {
  animation: itn-orb-drift 14s ease-in-out infinite alternate;
}
.itn-hero-orb-2 { animation-delay: -4s; }
.itn-hero-orb-3 { animation-delay: -8s; }
@keyframes itn-orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(24px, -18px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .itn-hero-orb-1, .itn-hero-orb-2, .itn-hero-orb-3 { animation: none; }
}

.itn-glass-badge {
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background: var(--itn-tint);
}

/* Trust bar logos get a subtle shimmer sweep on hover */
.itn-trust-logo { position: relative; overflow: hidden; }

/* =========================================================
   v1.5.1 — CONTENT BLOCK (single post / plain page top wrapper)
   Lighter padding than .itn-section, meant for content that sits
   directly under .itn-page-top so the two don't stack into an
   oversized gap under the header.
   ========================================================= */
.itn-content-block { padding: var(--itn-space-10) 0 var(--itn-space-20); }
@media (max-width: 768px) { .itn-content-block { padding: var(--itn-space-6) 0 var(--itn-space-12); } }

/* =========================================================
   v1.7.4 — HEADER CONTAINER MUST STRETCH, NOT SHRINK-TO-FIT
   Found via DevTools: .itn-header is display:flex, and a flex item
   with no explicit width defaults to shrinking around its own content
   instead of filling available space — even with max-width:1280px set.
   That's why the header's .itn-container was only ever as wide as the
   logo+nav+buttons needed (~690px), while every other section's
   .itn-container (not inside a flex parent) correctly expanded to the
   full 1280px. Setting width:100% forces it to fill the header the
   same way every other section's container fills its own, so it
   finally reaches the same 1280px and aligns exactly with the page
   below it.
   ========================================================= */
.itn-header .itn-container { width: 100%; max-width: var(--itn-header-container, var(--itn-container)); }

/* =========================================================
   WordPress Core Classes
   Required by the WordPress theme guidelines. These style the
   markup WordPress itself generates for alignment, captions,
   galleries, sticky posts, and comment authorship.
   ========================================================= */

/* --- Alignment --- */
.alignleft {
  float: left;
  margin-right: var(--itn-space-6);
  margin-bottom: var(--itn-space-4);
}
.alignright {
  float: right;
  margin-left: var(--itn-space-6);
  margin-bottom: var(--itn-space-4);
}
.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--itn-space-4);
}
.alignnone {
  margin-bottom: var(--itn-space-4);
}
.alignwide  { max-width: min(1100px, 92vw); margin-left: auto; margin-right: auto; }
.alignfull  { max-width: 100%; margin-left: 0; margin-right: 0; }

@media (max-width: 600px) {
  .alignleft, .alignright {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- Captions --- */
.wp-caption {
  max-width: 100%;
  margin-bottom: var(--itn-space-5);
  background: var(--itn-bg-card);
  border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-md);
  padding: var(--itn-space-2);
}
.wp-caption img,
.wp-caption a img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--itn-r-sm);
}
.wp-caption-text,
.wp-caption .wp-caption-text {
  margin: var(--itn-space-2) 0 var(--itn-space-1);
  font-size: .82rem;
  line-height: 1.6;
  color: var(--itn-text-muted);
  text-align: center;
}

/* --- Galleries --- */
.gallery-caption {
  display: block;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--itn-text-muted);
  margin-top: var(--itn-space-2);
}

/* --- Sticky posts --- */
.sticky {
  position: relative;
  border-color: rgba(var(--itn-primary-rgb),.4);
  box-shadow: var(--itn-shadow-glow);
}
.sticky .itn-blog-title::before,
.sticky .itn-post-title::before {
  content: '★ ';
  color: var(--itn-primary-light);
}

/* --- Comment by the post author --- */
.bypostauthor > .itn-comment,
.bypostauthor.itn-comment {
  border-color: rgba(var(--itn-primary-rgb),.35);
  background: linear-gradient(160deg, rgba(var(--itn-primary-rgb),.06), var(--itn-bg-card));
}

/* --- Screen reader text (WordPress standard class) --- */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--itn-bg-card);
  border-radius: var(--itn-r-sm);
  box-shadow: var(--itn-shadow-md);
  clip-path: none;
  color: var(--itn-text);
  display: block;
  font-size: .9rem;
  font-weight: 600;
  height: auto;
  left: 8px;
  line-height: normal;
  padding: 14px 20px;
  text-decoration: none;
  top: 8px;
  width: auto;
  z-index: 100000;
}

/* =========================================================
   Block Style Variations
   Registered via register_block_style() in the builder class.
   These let editors apply the theme's own looks to core blocks
   straight from the block editor's Styles panel.
   ========================================================= */

/* --- Button: ITN Primary --- */
.wp-block-button.is-style-itn-primary .wp-block-button__link {
  background: var(--itn-primary);
  color: #fff;
  border: none;
  border-radius: var(--itn-r-md);
  padding: .7rem 1.6rem;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(var(--itn-primary-rgb),.4);
  transition: background var(--itn-t), transform var(--itn-t);
}
.wp-block-button.is-style-itn-primary .wp-block-button__link:hover {
  background: var(--itn-primary-dark);
  transform: translateY(-2px);
}

/* --- Button: ITN Outline --- */
.wp-block-button.is-style-itn-outline .wp-block-button__link {
  background: transparent;
  color: var(--itn-text);
  border: 1px solid var(--itn-border-hover);
  border-radius: var(--itn-r-md);
  padding: .7rem 1.6rem;
  font-weight: 600;
  transition: all var(--itn-t);
}
.wp-block-button.is-style-itn-outline .wp-block-button__link:hover {
  border-color: var(--itn-primary);
  color: var(--itn-primary-light);
  background: var(--itn-primary-glow);
}

/* --- Group: ITN Card --- */
.wp-block-group.is-style-itn-card {
  background: var(--itn-bg-card);
  border: 1px solid var(--itn-border);
  border-radius: var(--itn-r-lg);
  padding: var(--itn-space-8);
  transition: border-color var(--itn-t), box-shadow var(--itn-t);
}
.wp-block-group.is-style-itn-card:hover {
  border-color: var(--itn-border-hover);
  box-shadow: var(--itn-shadow-md);
}

/* --- Group: ITN Call to Action --- */
.wp-block-group.is-style-itn-cta {
  background: var(--itn-grad-cta);
  border: 1px solid rgba(var(--itn-primary-rgb),.3);
  border-radius: var(--itn-r-xl);
  padding: var(--itn-space-16) var(--itn-space-8);
  text-align: center;
}

/* --- Quote: ITN Testimonial --- */
.wp-block-quote.is-style-itn-testimonial {
  background: var(--itn-bg-card);
  border: 1px solid var(--itn-border);
  border-left: 3px solid var(--itn-primary);
  border-radius: 0 var(--itn-r-lg) var(--itn-r-lg) 0;
  padding: var(--itn-space-6);
  margin: var(--itn-space-6) 0;
  font-style: italic;
  color: var(--itn-text-2);
}
.wp-block-quote.is-style-itn-testimonial cite {
  display: block;
  margin-top: var(--itn-space-4);
  font-style: normal;
  font-size: .85rem;
  font-weight: 600;
  color: var(--itn-primary-light);
}

/* --- Image: ITN Rounded --- */
.wp-block-image.is-style-itn-rounded img {
  border-radius: var(--itn-r-lg);
  box-shadow: var(--itn-shadow-md);
}

/* --- List: ITN Checklist --- */
.wp-block-list.is-style-itn-check {
  list-style: none;
  padding-left: 0;
}
.wp-block-list.is-style-itn-check li {
  position: relative;
  padding-left: var(--itn-space-8);
  margin-bottom: var(--itn-space-3);
  color: var(--itn-text-2);
}
.wp-block-list.is-style-itn-check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(16,185,129,.15);
}
.wp-block-list.is-style-itn-check li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: .72em;
  width: 5px;
  height: 9px;
  border: solid var(--itn-secondary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* =========================================================
   Template Builder — creative sections (split hero, feature
   list, timeline, testimonials, pricing, marquee, statement)
   ========================================================= */

/* --- Shared split layout --- */
.itn-sx-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.itn-sx-split > .itn-sx-media { order: 2; }
.itn-sx-glow .itn-sx-split > .itn-sx-media,
.itn-sx-hero.is-flipped .itn-sx-split > .itn-sx-media { order: 0; }
.itn-sx-glow.is-flipped .itn-sx-split > .itn-sx-media { order: 2; }

.itn-sx-media {
  position: relative;
  border-radius: var(--itn-r-xl);
  overflow: hidden;
  border: 1px solid var(--itn-border);
  box-shadow: 0 30px 80px -30px rgba(var(--itn-primary-rgb),.35);
  aspect-ratio: 5 / 4;
  background: var(--itn-bg-card);
}
.itn-sx-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.itn-sx-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, var(--itn-bg-elevated), var(--itn-bg-card));
}

.itn-sx-title {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin-bottom: var(--itn-space-5);
}
.itn-sx-accent { color: var(--itn-primary); }
.itn-sx-text {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--itn-text-2);
  margin-bottom: var(--itn-space-4);
  max-width: 620px;
}

/* --- Split hero --- */
.itn-sx-hero {
  position: relative;
  padding: calc(var(--itn-header-h) + var(--itn-space-16)) 0 var(--itn-space-16);
  overflow: hidden;
}
.itn-sx-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 85%);
}
.itn-sx-hero .itn-container { position: relative; }
.itn-sx-tag {
  font-size: .85rem;
  color: var(--itn-text-2);
  margin-bottom: var(--itn-space-4);
  letter-spacing: .02em;
}
.itn-sx-tag span { color: var(--itn-primary); margin-right: .25rem; }
.itn-sx-actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--itn-space-6);
  margin-top: var(--itn-space-6);
}
.itn-sx-rating { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--itn-text-2); }
.itn-stars { color: #FBBF24; letter-spacing: .12em; font-size: 1.05rem; }

/* --- Image + feature list --- */
.itn-sx-glow {
  position: relative;
  overflow: hidden;
}
.itn-sx-glow::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 60% at 85% 20%, rgba(var(--itn-primary-rgb),.14), transparent 70%),
    radial-gradient(50% 50% at 10% 90%, rgba(var(--itn-accent-rgb),.10), transparent 70%);
}
.itn-sx-glow .itn-container { position: relative; }
.itn-sx-kicker {
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--itn-text);
  margin-bottom: var(--itn-space-4);
}
.itn-sx-kicker span { color: var(--itn-primary); }
.itn-sx-points { margin-top: var(--itn-space-6); }
.itn-sx-point {
  display: flex; gap: var(--itn-space-5);
  padding: var(--itn-space-6) 0;
  border-bottom: 1px solid var(--itn-border);
}
.itn-sx-point:first-child { padding-top: 0; }
.itn-sx-dot {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--itn-primary);
  box-shadow: 0 0 0 6px rgba(var(--itn-primary-rgb),.15), 0 10px 30px -8px rgba(var(--itn-primary-rgb),.8);
  margin-top: .2rem;
}
.itn-sx-point h3 { font-size: 1.4rem; margin-bottom: .45rem; letter-spacing: -.01em; }
.itn-sx-point p { font-size: .95rem; color: var(--itn-text-2); line-height: 1.7; margin: 0; }
.itn-sx-trust {
  display: flex; align-items: center; gap: var(--itn-space-4);
  margin-top: var(--itn-space-8);
  font-size: 1.15rem; font-weight: 600;
  color: var(--itn-heading);
}
.itn-sx-trust strong { color: var(--itn-primary); font-weight: 700; }
.itn-sx-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--itn-primary);
  color: var(--itn-on-primary);
  font-size: 1.2rem; font-weight: 700;
  transition: transform var(--itn-t), box-shadow var(--itn-t);
}
.itn-sx-arrow:hover { transform: translateX(4px); box-shadow: 0 10px 30px -8px rgba(var(--itn-primary-rgb),.8); color: var(--itn-on-primary); }

/* --- Heading + timeline --- */
.itn-sx-twocol {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.itn-sx-sticky { position: sticky; top: calc(var(--itn-header-h) + var(--itn-space-8)); }
.itn-sx-caps {
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--itn-text);
  margin-bottom: var(--itn-space-4);
}
.itn-sx-steps { list-style: none; margin: 0; padding: 0; }
.itn-sx-step {
  position: relative;
  display: flex; gap: var(--itn-space-8);
  padding-bottom: var(--itn-space-10);
}
.itn-sx-step:last-child { padding-bottom: 0; }
.itn-sx-step::before {
  content: '';
  position: absolute;
  left: 28px; top: 68px; bottom: 10px;
  width: 1px;
  background: linear-gradient(var(--itn-border-hover), transparent);
}
.itn-sx-step:last-child::before { display: none; }
.itn-sx-step-icon {
  flex-shrink: 0;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  background: var(--itn-bg-elevated);
  border: 1px solid var(--itn-border);
  transition: border-color var(--itn-t), box-shadow var(--itn-t);
}
.itn-sx-step:hover .itn-sx-step-icon {
  border-color: var(--itn-primary);
  box-shadow: 0 0 0 6px rgba(var(--itn-primary-rgb),.12);
}
.itn-sx-step h3 { font-size: 1.35rem; margin: .7rem 0 .6rem; }
.itn-sx-step p { font-size: .95rem; color: var(--itn-text-2); line-height: 1.75; margin: 0; }

/* --- Testimonials --- */
.itn-sx-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--itn-space-6);
}
.itn-sx-quote {
  margin: 0;
  display: flex; flex-direction: column;
  padding: var(--itn-space-8);
  border-radius: var(--itn-r-lg);
  background: var(--itn-bg-card);
  border: 1px solid var(--itn-border);
  transition: transform var(--itn-t), border-color var(--itn-t);
}
.itn-sx-quote:hover { transform: translateY(-4px); border-color: var(--itn-border-hover); }
.itn-sx-quote blockquote {
  margin: var(--itn-space-4) 0 var(--itn-space-6);
  padding: 0; border: none;
  font-size: 1rem; line-height: 1.8;
  color: var(--itn-text);
  flex: 1;
}
.itn-sx-quote figcaption { display: flex; align-items: center; gap: .8rem; }
.itn-sx-quote figcaption img,
.itn-sx-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.itn-sx-avatar {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  color: var(--itn-on-primary);
  background: linear-gradient(135deg, var(--itn-primary), var(--itn-accent));
}
.itn-sx-quote strong { display: block; font-size: .92rem; color: var(--itn-heading); }
.itn-sx-quote small { display: block; font-size: .8rem; color: var(--itn-text-muted); }

/* --- Pricing --- */
.itn-sx-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--itn-space-6);
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}
.itn-sx-plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--itn-space-8);
  border-radius: var(--itn-r-xl);
  background: var(--itn-bg-card);
  border: 1px solid var(--itn-border);
}
.itn-sx-plan.is-featured {
  border-color: rgba(var(--itn-primary-rgb),.55);
  background: linear-gradient(165deg, rgba(var(--itn-primary-rgb),.10), var(--itn-bg-card) 55%);
  box-shadow: 0 30px 70px -30px rgba(var(--itn-primary-rgb),.5);
}
.itn-sx-plan-flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: .3rem .9rem;
  border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  background: var(--itn-primary); color: var(--itn-on-primary);
  white-space: nowrap;
}
.itn-sx-plan h3 { font-size: 1.1rem; margin-bottom: var(--itn-space-3); }
.itn-sx-price { margin: 0 0 var(--itn-space-2); display: flex; align-items: baseline; gap: .3rem; }
.itn-sx-price strong { font-family: var(--itn-font-heading); font-size: 2.6rem; color: var(--itn-heading); letter-spacing: -.02em; }
.itn-sx-price span { color: var(--itn-text-muted); font-size: .9rem; }
.itn-sx-plan-desc { font-size: .88rem; color: var(--itn-text-muted); margin-bottom: var(--itn-space-5); }
.itn-sx-plan ul {
  list-style: none; margin: 0 0 var(--itn-space-8); padding: var(--itn-space-5) 0 0;
  border-top: 1px solid var(--itn-border);
  display: flex; flex-direction: column; gap: .7rem;
  flex: 1;
}
.itn-sx-plan li { font-size: .9rem; display: flex; gap: .55rem; align-items: flex-start; color: var(--itn-text-2); }

/* --- Scrolling logos --- */
.itn-sx-marquee {
  padding: var(--itn-space-10) 0;
  border-top: 1px solid var(--itn-border);
  border-bottom: 1px solid var(--itn-border);
  overflow: hidden;
}
.itn-sx-marquee-label {
  text-align: center;
  font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--itn-text-muted);
  margin-bottom: var(--itn-space-6);
}
.itn-sx-marquee-track {
  display: flex; width: max-content;
  animation: itn-sx-scroll 48s linear infinite;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.itn-sx-marquee:hover .itn-sx-marquee-track { animation-play-state: paused; }
.itn-sx-marquee-row { display: flex; align-items: center; gap: var(--itn-space-16); padding-right: var(--itn-space-16); }
.itn-sx-logo {
  font-family: var(--itn-font-heading);
  font-size: 1.25rem; font-weight: 600;
  color: var(--itn-text-muted);
  white-space: nowrap;
  opacity: .75;
  transition: opacity var(--itn-t), color var(--itn-t);
}
.itn-sx-logo:hover { opacity: 1; color: var(--itn-heading); }
.itn-sx-logo img { height: 32px; width: auto; filter: grayscale(1) brightness(1.6); opacity: .7; }
.itn-sx-logo:hover img { filter: none; opacity: 1; }
@keyframes itn-sx-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .itn-sx-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .itn-sx-marquee-row[aria-hidden="true"] { display: none; }
}

/* --- Big statement --- */
.itn-sx-statement { text-align: center; }
.itn-sx-big {
  font-family: var(--itn-font-heading);
  font-size: clamp(1.8rem, 4.6vw, 3.6rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--itn-heading);
  margin: 0;
}
.itn-sx-author { margin-top: var(--itn-space-6); font-size: .95rem; color: var(--itn-text-muted); }

/* --- Responsive --- */
@media (max-width: 900px) {
  .itn-sx-split,
  .itn-sx-twocol { grid-template-columns: 1fr; }
  .itn-sx-split > .itn-sx-media,
  .itn-sx-glow .itn-sx-split > .itn-sx-media,
  .itn-sx-hero.is-flipped .itn-sx-split > .itn-sx-media,
  .itn-sx-glow.is-flipped .itn-sx-split > .itn-sx-media { order: -1; }
  .itn-sx-sticky { position: static; }
  .itn-sx-hero { padding-top: calc(var(--itn-header-h) + var(--itn-space-10)); }
}
@media (max-width: 560px) {
  .itn-sx-step { gap: var(--itn-space-5); }
  .itn-sx-step-icon { width: 46px; height: 46px; font-size: 1.1rem; }
  .itn-sx-step::before { left: 23px; top: 56px; }
  .itn-sx-dot { width: 32px; height: 32px; }
  .itn-sx-point h3 { font-size: 1.15rem; }
  .itn-sx-trust { font-size: 1rem; }
  .itn-sx-marquee-row { gap: var(--itn-space-10); padding-right: var(--itn-space-10); }
}

/* =========================================================
   Template Builder — creative sections (itn-sx-*)
   ========================================================= */

/* ---- Shared split layout ---- */
.itn-sx-split {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.itn-sx-hero.is-flipped .itn-sx-split,
.itn-sx-glow:not(.is-flipped) .itn-sx-split { grid-template-columns: 1fr 1.1fr; }
.itn-sx-hero.is-flipped .itn-sx-media { order: -1; }
.itn-sx-glow.is-flipped .itn-sx-media { order: 2; }

.itn-sx-media { position: relative; border-radius: 22px; overflow: hidden; }
.itn-sx-media img {
  display: block; width: 100%; height: auto; aspect-ratio: 5/4; object-fit: cover;
  border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.itn-sx-placeholder {
  aspect-ratio: 5/4; border-radius: 22px; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; background: linear-gradient(135deg, var(--itn-bg-elevated), var(--itn-bg-card));
  border: 1px dashed var(--itn-border-hover);
}

/* ---- Split hero ---- */
.itn-sx-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--itn-header-h) + var(--itn-space-16)) 0 var(--itn-space-20);
}
.itn-sx-grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 30% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 30%, transparent 75%);
}
.itn-sx-hero .itn-container { position: relative; }
.itn-sx-tag {
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  color: var(--itn-text-2); margin-bottom: var(--itn-space-4);
}
.itn-sx-tag span { color: var(--itn-primary); margin-right: .25rem; }
.itn-sx-title {
  font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.12; letter-spacing: -.02em;
  margin-bottom: var(--itn-space-6);
}
.itn-sx-accent {
  background: linear-gradient(120deg, var(--itn-primary), var(--itn-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.itn-sx-text { font-size: 1.02rem; line-height: 1.85; color: var(--itn-text-2); margin-bottom: var(--itn-space-4); }
.itn-sx-actions {
  display: flex; align-items: center; gap: var(--itn-space-6); flex-wrap: wrap; margin-top: var(--itn-space-8);
}
.itn-sx-rating { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--itn-text-2); }
.itn-stars { color: #FBBF24; font-size: 1.15rem; letter-spacing: .12em; }

/* ---- Image + feature list ---- */
.itn-sx-glow { position: relative; overflow: hidden; }
.itn-sx-glow::before {
  content: ''; position: absolute; inset: -20% -10% auto auto; width: 60%; height: 90%;
  background: radial-gradient(circle, rgba(var(--itn-primary-rgb),.16), transparent 65%);
  pointer-events: none;
}
.itn-sx-glow .itn-container { position: relative; }
.itn-sx-kicker {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--itn-text); margin-bottom: var(--itn-space-4);
}
.itn-sx-kicker::before { content: '✦'; color: var(--itn-primary); }
.itn-sx-points { margin-top: var(--itn-space-8); }
.itn-sx-point {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--itn-space-5);
  padding: var(--itn-space-6) 0; border-bottom: 1px solid var(--itn-border);
}
.itn-sx-point:first-child { padding-top: 0; }
.itn-sx-point h3 { font-size: 1.3rem; margin-bottom: .45rem; }
.itn-sx-point p { margin: 0; font-size: .92rem; color: var(--itn-text-2); }
.itn-sx-dot {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--itn-primary), var(--itn-accent));
  box-shadow: 0 0 0 6px rgba(var(--itn-primary-rgb),.12);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.itn-sx-trust {
  display: flex; align-items: center; gap: var(--itn-space-4); flex-wrap: wrap;
  margin-top: var(--itn-space-8); font-size: 1.1rem; font-weight: 600; color: var(--itn-text);
}
.itn-sx-trust strong { color: var(--itn-primary); }
.itn-sx-arrow {
  width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--itn-primary); color: var(--itn-on-primary); font-size: 1.1rem; font-weight: 700;
  transition: transform var(--itn-t), box-shadow var(--itn-t);
}
.itn-sx-arrow:hover { transform: translateX(3px); box-shadow: 0 10px 30px -8px rgba(var(--itn-primary-rgb),.6); color: var(--itn-on-primary); }

/* ---- Two-column: sticky heading + timeline ---- */
.itn-sx-twocol {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.itn-sx-sticky { position: sticky; top: calc(var(--itn-header-h) + 2rem); }
.itn-sx-caps {
  font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--itn-text-2); margin-bottom: var(--itn-space-4);
}
.itn-sx-sticky h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.12; margin-bottom: var(--itn-space-5); }
.itn-sx-sticky p { color: var(--itn-text-2); font-size: 1rem; }
.itn-sx-steps { list-style: none; margin: 0; padding: 0; }
.itn-sx-step {
  position: relative; display: grid; grid-template-columns: 56px 1fr; gap: var(--itn-space-8);
  padding-bottom: var(--itn-space-10);
}
.itn-sx-step:last-child { padding-bottom: 0; }
.itn-sx-step::before {
  content: ''; position: absolute; left: 27px; top: 68px; bottom: 12px;
  width: 1px; background: var(--itn-border-hover);
}
.itn-sx-step:last-child::before { display: none; }
.itn-sx-step-icon {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--itn-bg-elevated); border: 1px solid var(--itn-border); font-size: 1.3rem;
}
.itn-sx-step h3 { font-size: 1.35rem; margin: .7rem 0 .6rem; }
.itn-sx-step p { margin: 0; color: var(--itn-text-2); font-size: .94rem; line-height: 1.75; }

/* ---- Testimonials ---- */
.itn-sx-quotes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--itn-space-6);
}
.itn-sx-quote {
  display: flex; flex-direction: column; gap: var(--itn-space-5); margin: 0;
  padding: var(--itn-space-8); border-radius: 20px;
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
  transition: border-color var(--itn-t), transform var(--itn-t);
}
.itn-sx-quote:hover { border-color: rgba(var(--itn-primary-rgb),.35); transform: translateY(-4px); }
.itn-sx-quote blockquote { margin: 0; font-size: 1rem; line-height: 1.8; color: var(--itn-text); }
.itn-sx-quote figcaption { display: flex; align-items: center; gap: .8rem; margin-top: auto; font-size: .88rem; }
.itn-sx-quote figcaption small { display: block; color: var(--itn-text-muted); font-size: .8rem; }
.itn-sx-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  background: linear-gradient(135deg, var(--itn-primary), var(--itn-accent));
  display: flex; align-items: center; justify-content: center; color: var(--itn-on-primary); font-weight: 700;
}

/* ---- Pricing ---- */
.itn-sx-plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--itn-space-6); align-items: stretch;
}
.itn-sx-plan {
  position: relative; display: flex; flex-direction: column;
  padding: var(--itn-space-8); border-radius: 22px;
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
}
.itn-sx-plan.is-featured {
  border-color: rgba(var(--itn-primary-rgb),.55);
  background: linear-gradient(170deg, rgba(var(--itn-primary-rgb),.1), var(--itn-bg-card) 55%);
  box-shadow: 0 24px 60px -24px rgba(var(--itn-primary-rgb),.45);
}
.itn-sx-plan-flag {
  position: absolute; top: -12px; right: 24px; padding: .3rem .8rem; border-radius: 999px;
  background: var(--itn-primary); color: var(--itn-on-primary); font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.itn-sx-plan h3 { font-size: 1.15rem; margin-bottom: var(--itn-space-3); }
.itn-sx-price { font-family: var(--itn-font-heading); font-size: 2.6rem; font-weight: 700; color: var(--itn-heading); line-height: 1; }
.itn-sx-price small { font-size: .9rem; font-weight: 500; color: var(--itn-text-muted); }
.itn-sx-plan-desc { color: var(--itn-text-2); font-size: .9rem; margin: var(--itn-space-4) 0 var(--itn-space-6); }
.itn-sx-plan ul { list-style: none; margin: 0 0 var(--itn-space-8); padding: 0; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.itn-sx-plan li { display: flex; gap: .6rem; font-size: .9rem; }
.itn-sx-plan li::before { content: '✓'; color: var(--itn-secondary); font-weight: 700; }

/* ---- Logo marquee ---- */
.itn-sx-marquee { overflow: hidden; padding: var(--itn-space-12) 0; border-top: 1px solid var(--itn-border); border-bottom: 1px solid var(--itn-border); }
.itn-sx-marquee-label {
  text-align: center; font-size: .78rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--itn-text-muted); margin-bottom: var(--itn-space-6);
}
.itn-sx-marquee-track {
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.itn-sx-marquee-row {
  display: flex; gap: var(--itn-space-12); width: max-content;
}
.itn-sx-marquee-track:hover .itn-sx-marquee-row { animation-play-state: paused; }
.itn-sx-logo {
  display: flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-weight: 600; font-size: 1.05rem; color: var(--itn-text-2); opacity: .8;
}
.itn-sx-logo img { height: 30px; width: auto; filter: grayscale(1) brightness(1.6); opacity: .8; }
@keyframes itn-sx-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .itn-sx-marquee-row { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* ---- Big statement ---- */
.itn-sx-statement { text-align: center; max-width: 980px; margin: 0 auto; }
.itn-sx-big {
  font-family: var(--itn-font-heading); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(1.7rem, 4.2vw, 3.2rem); line-height: 1.25; color: var(--itn-heading); margin: 0;
}
.itn-sx-big em { font-style: normal; color: var(--itn-primary); }
.itn-sx-author { margin-top: var(--itn-space-8); color: var(--itn-text-muted); font-size: .92rem; }
.itn-sx-author strong { color: var(--itn-text); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .itn-sx-split,
  .itn-sx-hero.is-flipped .itn-sx-split,
  .itn-sx-glow:not(.is-flipped) .itn-sx-split,
  .itn-sx-twocol { grid-template-columns: 1fr; }
  .itn-sx-hero .itn-sx-media,
  .itn-sx-glow .itn-sx-media { order: 2; }
  .itn-sx-sticky { position: static; }
  .itn-sx-hero { padding-bottom: var(--itn-space-12); }
}
@media (max-width: 560px) {
  .itn-sx-step { grid-template-columns: 44px 1fr; gap: var(--itn-space-4); }
  .itn-sx-step-icon { width: 44px; height: 44px; font-size: 1.05rem; }
  .itn-sx-step::before { left: 21px; top: 54px; }
  .itn-sx-point { grid-template-columns: 36px 1fr; gap: var(--itn-space-4); }
  .itn-sx-dot { width: 36px; height: 36px; }
  .itn-sx-plan, .itn-sx-quote { padding: var(--itn-space-6); }
}
.itn-sx-copy { min-width: 0; }

/* ---- Hero — two column (itn-hx) ---- */
.itn-hx { min-height: auto; padding-top: calc(var(--itn-header-h) + var(--itn-space-16)); padding-bottom: var(--itn-space-20); }
.itn-hx-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.itn-hx-copy { min-width: 0; }
.itn-hx-title { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.itn-hx-copy .itn-hero-desc { margin-bottom: var(--itn-space-4); }
.itn-hx-copy .itn-hero-actions { margin-top: var(--itn-space-8); }
.itn-hx-trust { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: var(--itn-space-8); font-size: .88rem; color: var(--itn-text-2); }
.itn-hx-visual { position: relative; }
.itn-hx-frame {
  position: relative; border-radius: 26px; padding: 10px;
  background: linear-gradient(145deg, rgba(var(--itn-primary-rgb),.45), rgba(var(--itn-accent-rgb),.12) 45%, rgba(255,255,255,.04));
  box-shadow: 0 40px 100px -30px rgba(var(--itn-primary-rgb),.45);
}
.itn-hx-frame img, .itn-hx-frame .itn-sx-placeholder {
  display: block; width: 100%; aspect-ratio: 4/3.4; object-fit: cover; border-radius: 18px; height: auto;
}
.itn-hx-badge {
  position: absolute; padding: .65rem 1rem; border-radius: 14px; white-space: nowrap;
  background: var(--itn-glass); border: 1px solid var(--itn-border-hover);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: .85rem; font-weight: 600; color: var(--itn-text);
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.6);
  animation: itn-hx-float 6s ease-in-out infinite;
}
.itn-hx-badge-1 { top: 12%; left: -28px; }
.itn-hx-badge-2 { bottom: 10%; right: -22px; animation-delay: -3s; }
@keyframes itn-hx-float { 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .itn-hx-badge { animation: none; } }

/* ---- Numbered cards (itn-nx) ---- */
.itn-nx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--itn-space-6); }
.itn-nx-card {
  position: relative; overflow: hidden; padding: var(--itn-space-8); border-radius: 20px;
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
  transition: border-color var(--itn-t), transform var(--itn-t);
}
.itn-nx-card:hover { border-color: rgba(var(--itn-primary-rgb),.4); transform: translateY(-4px); }
.itn-nx-num {
  display: block; font-family: var(--itn-font-heading); font-weight: 800; line-height: 1;
  font-size: 3.6rem; margin-bottom: var(--itn-space-5);
  color: transparent; -webkit-text-stroke: 1.5px rgba(var(--itn-primary-rgb),.7);
}
.itn-nx-card:hover .itn-nx-num { color: rgba(var(--itn-primary-rgb),.15); }
.itn-nx-card h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.itn-nx-card p { margin: 0; color: var(--itn-text-2); font-size: .92rem; }

/* ---- Comparison table (itn-tx) ---- */
.itn-tx-wrap { overflow-x: auto; border-radius: 20px; border: 1px solid var(--itn-border); background: var(--itn-bg-card); }
.itn-tx { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .92rem; }
.itn-tx th, .itn-tx td { padding: 1rem 1.2rem; text-align: center; border-bottom: 1px solid var(--itn-border); }
.itn-tx tbody tr:last-child th, .itn-tx tbody tr:last-child td { border-bottom: none; }
.itn-tx thead th { font-family: var(--itn-font-heading); font-size: .95rem; color: var(--itn-text-2); font-weight: 600; }
.itn-tx tbody th { text-align: left; font-weight: 500; color: var(--itn-text); }
.itn-tx .is-us { background: rgba(var(--itn-primary-rgb),.07); }
.itn-tx thead .is-us { color: var(--itn-primary); font-weight: 700; }
.itn-tx-yes, .itn-tx-no {
  display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem;
}
.itn-tx-yes { background: rgba(16,185,129,.15); color: var(--itn-success); }
.itn-tx-no { background: rgba(239,68,68,.1); color: #F87171; }

/* ---- CTA with image (itn-cx) ---- */
.itn-cx {
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; overflow: hidden;
  border-radius: 28px; border: 1px solid rgba(var(--itn-primary-rgb),.3);
  background: var(--itn-grad-deep);
}
.itn-cx-copy { padding: clamp(2rem, 5vw, 3.5rem); min-width: 0; }
.itn-cx-copy h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: var(--itn-space-4); }
.itn-cx-text { color: var(--itn-text-2); margin-bottom: var(--itn-space-6); }
.itn-cx-points { list-style: none; padding: 0; margin: 0 0 var(--itn-space-8); display: grid; gap: .7rem; }
.itn-cx-points li { display: flex; gap: .6rem; font-size: .94rem; }
.itn-cx-points li::before { content: '✓'; color: var(--itn-primary); font-weight: 700; }
.itn-cx-media { position: relative; min-height: 300px; }
.itn-cx-media img, .itn-cx-media .itn-sx-placeholder {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto; border: none;
}

@media (max-width: 900px) {
  .itn-hx-grid, .itn-cx { grid-template-columns: 1fr; }
  .itn-hx-badge-1 { left: 8px; } .itn-hx-badge-2 { right: 8px; }
  .itn-cx-media { min-height: 240px; }
}

/* ---- Hero — tag cloud (itn-pl) ---- */
.itn-pl { min-height: auto; padding-top: calc(var(--itn-header-h) + var(--itn-space-16)); padding-bottom: var(--itn-space-20); }
.itn-pl-rings {
  position: absolute; left: 50%; top: 50%; width: 760px; height: 760px; transform: translate(-50%,-50%); border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 34px, rgba(var(--itn-primary-rgb),.07) 34px 36px);
  mask-image: radial-gradient(circle, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%);
}
.itn-pl-grid { position: relative; display: grid; grid-template-columns: minmax(170px, 250px) 1fr minmax(170px, 250px); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; }
.itn-pl-copy { text-align: center; min-width: 0; }
.itn-pl-title { font-size: clamp(2.1rem, 5vw, 4rem); line-height: 1.08; letter-spacing: -.03em; margin-bottom: var(--itn-space-6); }
.itn-pl-copy .itn-hero-desc { max-width: 620px; margin: 0 auto var(--itn-space-8); }
.itn-pl-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--itn-space-5); }
.itn-pl-tags li {
  position: relative; padding: 1.05rem 1.4rem; border-radius: 999px; text-align: center; font-weight: 600; font-size: 1rem;
  background: var(--itn-tint); border: 1px solid var(--itn-border); color: var(--itn-text);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--itn-t), transform var(--itn-t);
}
.itn-pl-tags li::after {
  content: ''; position: absolute; top: 50%; width: 12px; height: 12px; transform: translateY(-50%) rotate(45deg);
  background: inherit; border: inherit; border-radius: 2px;
}
.itn-pl-tags.is-left li::after { right: -7px; border-left: none; border-bottom: none; }
.itn-pl-tags.is-right li::after { left: -7px; border-right: none; border-top: none; }
.itn-pl-tags li:hover { border-color: rgba(var(--itn-primary-rgb),.5); transform: scale(1.03); }
.itn-pl-mobile { display: none; }

/* ---- Steps — arches (itn-ar) ---- */
.itn-ar { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--itn-space-8); }
.itn-ar::before { content: ''; position: absolute; left: -100vw; right: -100vw; top: 112px; height: 1px; background: var(--itn-border-hover); }
.itn-ar-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.itn-ar-arch {
  width: 100px; height: 112px; border-radius: 50px 50px 0 0; border: 1.5px solid rgba(var(--itn-primary-rgb),.55); border-bottom: none;
  display: flex; align-items: center; justify-content: center; font-size: 2.2rem; background: linear-gradient(180deg, rgba(var(--itn-primary-rgb),.08), transparent);
}
.itn-ar-dot { width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--itn-bg); border: 2px solid var(--itn-primary); box-shadow: inset 0 0 0 3px var(--itn-bg), inset 0 0 0 8px var(--itn-primary); position: relative; z-index: 1; }
.itn-ar-step h3 { font-size: 1.25rem; margin: var(--itn-space-6) 0 .6rem; }
.itn-ar-step p { font-size: .92rem; color: var(--itn-text-2); margin: 0 0 var(--itn-space-6); max-width: 280px; }
.itn-ar-btn {
  display: inline-block; padding: .7rem 1.5rem; border-radius: 12px; font-weight: 700; font-size: .88rem;
  background: var(--itn-primary); color: var(--itn-on-primary); box-shadow: 0 14px 30px -12px rgba(var(--itn-primary-rgb),.6);
}
a.itn-ar-btn:hover { color: var(--itn-on-primary); filter: brightness(1.08); }

/* ---- Progress bars + tool cards (itn-sk) ---- */
.itn-sk { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.itn-sk-copy { min-width: 0; }
.itn-sk-copy h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.15; margin-bottom: var(--itn-space-5); }
.itn-sk-text { color: var(--itn-text-2); margin-bottom: var(--itn-space-8); }
.itn-sk-bar { margin-bottom: var(--itn-space-6); }
.itn-sk-bar-head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: .6rem; }
.itn-sk-bar-head span:last-child { color: var(--itn-text-muted); font-weight: 500; font-size: .88rem; }
.itn-sk-track { height: 4px; border-radius: 4px; background: var(--itn-border-hover); overflow: hidden; }
.itn-sk-track span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--itn-primary), var(--itn-accent)); }
.itn-sk-cards { display: flex; align-items: flex-end; justify-content: center; height: 440px; }
.itn-sk-card {
  --h: calc(55% + var(--k) * (45% / max(var(--n) - 1, 1)));
  flex: 1 1 0; max-width: 130px; height: var(--h); margin-left: -8px; padding: 1.4rem 1.1rem;
  display: flex; flex-direction: column; justify-content: space-between; border-radius: 22px;
  background: var(--itn-bg-card); border: 1px solid var(--itn-border); box-shadow: -18px 0 40px -20px rgba(0,0,0,.7);
  transition: transform var(--itn-t);
}
.itn-sk-card:first-child { margin-left: 0; }
.itn-sk-card:nth-child(2) { background: #F1F5F9; color: #0F172A; }
.itn-sk-card:last-child { background: linear-gradient(170deg, var(--itn-primary), var(--itn-primary-dark)); color: var(--itn-on-primary); border-color: transparent; }
.itn-sk-card:hover { transform: translateY(-8px); }
.itn-sk-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; background: rgba(0,0,0,.25); }
.itn-sk-card:nth-child(2) .itn-sk-icon { background: rgba(15,23,42,.06); }
.itn-sk-vert { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; gap: .5rem; align-items: flex-start; }
.itn-sk-vert strong { font-size: 1.05rem; }
.itn-sk-vert small { font-size: .8rem; opacity: .65; }

/* ---- Process cards + bar (itn-pc) ---- */
.itn-pc { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--itn-space-5); }
.itn-pc::before { content: ''; position: absolute; left: 0; right: 0; top: 17px; height: 1px; background: var(--itn-border-hover); }
.itn-pc-label {
  position: relative; display: inline-block; padding: .45rem 1rem; margin-bottom: var(--itn-space-10);
  border-radius: 8px; background: var(--itn-bg-elevated); border: 1px solid var(--itn-border); font-size: .85rem; font-weight: 600;
}
.itn-pc-card {
  position: relative; padding: var(--itn-space-8); border-radius: 22px; min-height: 100%;
  background: var(--itn-bg-card); border: 1px solid var(--itn-border); transition: border-color var(--itn-t), transform var(--itn-t);
}
.itn-pc-card::after { content: ''; position: absolute; top: 2.2rem; right: 2.2rem; width: 8px; height: 8px; border-radius: 50%; background: var(--itn-primary); }
.itn-pc-item:hover .itn-pc-card { border-color: rgba(var(--itn-primary-rgb),.45); transform: translateY(-4px); }
.itn-pc-icon { display: block; font-size: 2.2rem; margin-bottom: var(--itn-space-10); }
.itn-pc-card h3 { font-size: 1.3rem; margin-bottom: .8rem; }
.itn-pc-card p { margin: 0; color: var(--itn-text-2); font-size: .93rem; line-height: 1.75; }
.itn-pc-bar {
  margin-top: var(--itn-space-10); padding: 1.25rem 1.5rem; border-radius: 22px; display: flex; align-items: center; gap: var(--itn-space-8); flex-wrap: wrap;
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
}
.itn-pc-bar-text { flex: 1; min-width: 200px; margin: 0; font-family: var(--itn-font-heading); font-weight: 600; font-size: 1.1rem; color: var(--itn-heading); }
.itn-pc-bar .itn-btn { border-radius: 999px; }

/* ---- Why choose us (itn-wy) ---- */
.itn-wy { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.itn-wy-copy { min-width: 0; }
.itn-wy-copy h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.15; margin-bottom: var(--itn-space-5); }
.itn-wy-text { color: var(--itn-text-2); margin-bottom: var(--itn-space-8); }
.itn-wy-row { display: flex; gap: var(--itn-space-5); align-items: stretch; }
.itn-wy-list { flex: 1; border-radius: 20px; background: var(--itn-bg-card); border: 1px solid var(--itn-border); overflow: hidden; }
.itn-wy-item { display: grid; grid-template-columns: 52px 1fr; gap: var(--itn-space-5); padding: var(--itn-space-6) var(--itn-space-8); }
.itn-wy-item + .itn-wy-item { border-top: 1px solid var(--itn-border); }
.itn-wy-icon { font-size: 2rem; line-height: 1; }
.itn-wy-item h3 { font-size: 1.2rem; margin-bottom: .45rem; }
.itn-wy-item p { margin: 0; color: var(--itn-text-2); font-size: .92rem; }
.itn-wy-pill {
  width: 88px; flex-shrink: 0; border-radius: 999px; padding: 1.2rem 0; display: flex; flex-direction: column; align-items: center; gap: 1rem;
  background: var(--itn-bg-card); border: 1px solid var(--itn-border);
}
.itn-wy-plus { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--itn-primary); color: var(--itn-on-primary); font-size: 1.4rem; font-weight: 700; }
.itn-wy-pill-text { writing-mode: vertical-rl; font-weight: 600; font-size: .95rem; }
.itn-wy-media { position: relative; }
.itn-wy-oval { border-radius: 999px / 45%; overflow: hidden; aspect-ratio: 5/6.4; box-shadow: 0 40px 90px -30px rgba(var(--itn-primary-rgb),.35); }
.itn-wy-oval img, .itn-wy-oval .itn-sx-placeholder { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; border-radius: 0; border: none; }
.itn-wy-stat {
  position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); width: 200px; height: 200px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .4rem; padding: 1.5rem;
  background: var(--itn-ink); border: 6px solid var(--itn-bg);
}
.itn-wy-stat strong { font-family: var(--itn-font-heading); font-size: 2.8rem; line-height: 1; color: var(--itn-primary); }
.itn-wy-stat span { font-size: .88rem; color: #E2E8F0; }

/* ---- Process — step tabs (itn-px) ---- */
.itn-px { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.itn-px-copy { position: sticky; top: calc(var(--itn-header-h) + 2rem); min-width: 0; }
.itn-px-copy h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.15; margin-bottom: var(--itn-space-5); }
.itn-px-text { color: var(--itn-text-2); }
.itn-px-art { width: min(320px, 80%); margin-top: var(--itn-space-10); color: rgba(var(--itn-primary-rgb),.55); animation: itn-px-spin 40s linear infinite; }
@keyframes itn-px-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .itn-px-art { animation: none; } }
.itn-px-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--itn-space-6); }
.itn-px-item { display: grid; grid-template-columns: 60px 1fr; gap: var(--itn-space-6); }
.itn-px-tab {
  writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--itn-bg-elevated); border: 1px solid var(--itn-border); font-weight: 700; font-size: .9rem;
  transition: background var(--itn-t), color var(--itn-t);
}
.itn-px-body { position: relative; padding-bottom: var(--itn-space-6); border-bottom: 1px solid var(--itn-border-hover); }
.itn-px-body::after { content: ''; position: absolute; right: 0; bottom: -4.5px; width: 8px; height: 8px; border-radius: 50%; background: var(--itn-text-muted); transition: background var(--itn-t); }
.itn-px-body h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.itn-px-body p { margin: 0; color: var(--itn-text-2); font-size: .94rem; }
.itn-px-item:hover .itn-px-tab,
.itn-px-list:not(:hover) .itn-px-item:first-child .itn-px-tab { background: var(--itn-primary); color: var(--itn-on-primary); border-color: transparent; }
.itn-px-item:hover .itn-px-body,
.itn-px-list:not(:hover) .itn-px-item:first-child .itn-px-body { border-bottom-color: var(--itn-primary); }
.itn-px-item:hover .itn-px-body::after,
.itn-px-list:not(:hover) .itn-px-item:first-child .itn-px-body::after { background: var(--itn-primary); }

/* ---- Responsive for the six above ---- */
@media (max-width: 1024px) {
  .itn-pl-grid { grid-template-columns: 1fr; }
  .itn-pl-tags { display: none; }
  .itn-pl-mobile { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; list-style: none; padding: 0; margin: var(--itn-space-10) 0 0; }
  .itn-pl-mobile li { padding: .5rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 600; background: var(--itn-tint); border: 1px solid var(--itn-border); }
  .itn-pc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .itn-pc::before { display: none; }
  .itn-pc-label { margin-bottom: var(--itn-space-4); }
}
@media (max-width: 900px) {
  .itn-sk, .itn-wy, .itn-px { grid-template-columns: 1fr; }
  .itn-px-copy { position: static; }
  .itn-px-art { display: none; }
  .itn-sk-cards { height: 340px; }
  .itn-wy-media { max-width: 420px; margin: 0 auto; width: 100%; }
  .itn-ar::before { display: none; }
}
@media (max-width: 560px) {
  .itn-pc { grid-template-columns: 1fr; }
  .itn-wy-row { flex-direction: column; }
  .itn-wy-pill { width: auto; flex-direction: row; padding: .7rem 1.2rem; justify-content: center; }
  .itn-wy-pill-text { writing-mode: horizontal-tb; }
  .itn-wy-item { padding: var(--itn-space-5); grid-template-columns: 40px 1fr; }
  .itn-wy-stat { width: 150px; height: 150px; }
  .itn-wy-stat strong { font-size: 2.1rem; }
  .itn-px-item { grid-template-columns: 44px 1fr; gap: var(--itn-space-4); }
  .itn-sk-card { padding: 1rem .7rem; border-radius: 16px; }
  .itn-sk-icon { width: 42px; height: 42px; font-size: 1.2rem; }
}

/* =========================================================
   Header designs (ITN_Layout)
   ========================================================= */
.itn-nav-links a.is-current, .itn-nav-links .itn-nav-item.is-current { color: var(--itn-text); }

/* Centred menu: equal free space either side of the menu items */
.itn-hd--centered .itn-nav-links > :first-child { margin-left: auto; }

@media (min-width: 769px) {
  /* Floating pill */
  body.itn-body-hd-pill { --itn-header-h: 88px; }
  .itn-hd--pill, .itn-hd--pill.scrolled { background: transparent !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .itn-hd--pill .itn-nav {
    height: 62px; padding: 0 12px 0 22px; border-radius: 999px;
    background: var(--itn-glass); border: 1px solid var(--itn-border-hover);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 40px -18px rgba(0,0,0,.6);
  }
  .itn-hd--pill .itn-nav-actions .itn-btn { border-radius: 999px; }

  /* Stacked: logo row on top, menu row underneath */
  body.itn-body-hd-stacked { --itn-header-h: 124px; }
  .itn-hd--stacked .itn-nav { position: relative; flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  .itn-hd--stacked .itn-logo { flex: 0 0 100%; display: flex; justify-content: center; }
  .itn-hd--stacked .itn-nav-links { flex: 0 0 100%; justify-content: center; }
  .itn-hd--stacked .itn-nav-actions { position: absolute; right: 0; top: 4px; margin-left: 0; }
}

/* =========================================================
   Mega menus
   ========================================================= */
.itn-dropdown-menu a small { display: block; margin-top: 2px; font-size: .78rem; color: var(--itn-text-muted); line-height: 1.4; }
.itn-dropdown-menu a strong { color: var(--itn-text); font-weight: 600; }
.itn-mega--cards    { width: min(620px, 92vw); padding: 12px; }
.itn-mega--featured { width: min(820px, 94vw); padding: 12px; display: grid; grid-template-columns: 1.7fr 1fr; gap: 12px; }
.itn-mega--columns  { width: min(1100px, 96vw); padding: 22px 24px; }
.itn-mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.itn-mega-card { align-items: flex-start !important; padding: 14px !important; border-radius: 12px !important; }
.itn-mega-card:hover .itn-dropdown-icon { background: var(--itn-primary); color: var(--itn-on-primary); }
.itn-mega-promo {
  display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; padding: 22px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(var(--itn-primary-rgb),.28), rgba(var(--itn-accent-rgb),.08) 60%), var(--itn-bg-elevated);
  border: 1px solid rgba(var(--itn-primary-rgb),.35); min-height: 200px;
}
.itn-mega-promo strong { font-family: var(--itn-font-heading); font-size: 1.15rem; color: var(--itn-heading); }
.itn-mega-promo p { margin: 0; font-size: .86rem; color: var(--itn-text-2); }
.itn-mega-promo .itn-btn { align-self: flex-start; padding: .5rem 1rem !important; }
.itn-mega-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; }
.itn-mega-col { display: flex; flex-direction: column; gap: 2px; }
.itn-mega-cols a.itn-mega-head { padding: 0 0 8px !important; margin-bottom: 6px; font-weight: 700; color: var(--itn-heading) !important; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--itn-border); border-radius: 0 !important; background: none !important; }
.itn-mega-cols a.itn-mega-link { padding: 7px 0 !important; background: none !important; }
.itn-mega-cols a.itn-mega-link:hover { color: var(--itn-primary) !important; }
.itn-mega-note { margin: -2px 0 6px; font-size: .76rem; color: var(--itn-text-muted); }

@media (max-width: 768px) {
  .itn-nav-links.open .itn-dropdown-menu.itn-mega { width: 100%; padding: 6px; }
  .itn-mega-grid, .itn-mega--featured, .itn-mega-cols { grid-template-columns: 1fr !important; gap: 4px; }
  .itn-mega-promo { min-height: 0; }
  .itn-mega-cols a { justify-content: center; }
}

/* =========================================================
   Footer designs
   ========================================================= */
.itn-ft-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-bottom: var(--itn-space-16); padding: clamp(1.8rem, 4vw, 3rem); border-radius: 26px;
  background: var(--itn-grad-deep); border: 1px solid rgba(var(--itn-primary-rgb),.3);
}
.itn-ft-cta h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 .4rem; }
.itn-ft-cta p { margin: 0; color: var(--itn-text-2); max-width: 560px; }
.itn-ft-wordmark {
  margin-top: var(--itn-space-10); text-align: center; line-height: .85; white-space: nowrap; overflow: hidden;
  font-family: var(--itn-font-heading); font-weight: 800; letter-spacing: -.04em;
  font-size: clamp(3rem, 14vw, 12rem);
  background: linear-gradient(180deg, var(--itn-wordmark), transparent 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.itn-ft-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--itn-space-5); padding-bottom: var(--itn-space-8); }
.itn-ft-tag { max-width: 520px; margin: 0; color: var(--itn-text-2); font-size: .92rem; }
.itn-ft-center .itn-footer-links { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.itn-ft-center .itn-footer-socials { justify-content: center; }
.itn-ft-row { display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap; }
.itn-ft-row .itn-footer-links { flex: 1; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.itn-ft-copy { margin: 0; font-size: .82rem; color: var(--itn-text-muted); }
.itn-ft--minimal { padding-top: var(--itn-space-8) !important; padding-bottom: var(--itn-space-8) !important; }
@media (max-width: 768px) {
  .itn-ft-cta { flex-direction: column; align-items: flex-start; }
  .itn-ft-row { flex-direction: column; text-align: center; }
}

/* Builder pages that open with a hero: the hero already clears the
   fixed header, so the wrapper must not add the same space again. */
.itn-page-top.has-hero { padding-top: var(--itn-announce-h, 0px); }
body.admin-bar .itn-page-top.has-hero { padding-top: calc(var(--itn-adminbar-h) + var(--itn-announce-h, 0px)); }


/* =========================================================
   Consistent spacing and small-screen safety net
   ========================================================= */
.itn-hero { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.itn-footer { padding-top: clamp(3rem, 6vw, 5rem); margin-top: 0; }
.itn-ft-cta { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.itn-section-header .itn-eyebrow { margin-bottom: .9rem; }
img, svg, video, iframe { max-width: 100%; }
.itn-container { width: 100%; }

@media (max-width: 768px) {
  .itn-container { padding-left: 1.25rem; padding-right: 1.25rem; }
  .itn-hero { min-height: auto; padding-top: calc(var(--itn-header-h) + 2.5rem); }
  .itn-hero-title, .itn-sx-title, .itn-hx-title, .itn-pl-title { font-size: clamp(1.9rem, 8.2vw, 2.6rem) !important; line-height: 1.15; }
  .itn-section-title { font-size: clamp(1.55rem, 6.4vw, 2rem); }
  .itn-hero-actions { flex-direction: column; align-items: stretch; }
  .itn-hero-actions .itn-btn { width: 100%; justify-content: center; }
  .itn-cta-box { padding: 2.5rem 1.25rem; }
  .itn-cta-actions { flex-direction: column; align-items: stretch; }
  .itn-cta-actions .itn-btn { width: 100%; justify-content: center; }
  .itn-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
  .itn-footer-brand { grid-column: 1 / -1; }
  .itn-footer-bottom { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .itn-footer-legal { display: flex; flex-direction: row !important; flex-wrap: wrap; gap: .5rem 1.25rem; }
  .itn-grid-2, .itn-fit-grid, .itn-bento { grid-template-columns: 1fr !important; }
  .itn-bento-card { grid-column: auto !important; flex-direction: column !important; align-items: flex-start !important; }
  .itn-stats-row { grid-template-columns: 1fr 1fr !important; }
  .itn-flow { grid-template-columns: 1fr !important; }
  .itn-ft-wordmark { font-size: 18vw; }
}
@media (max-width: 340px) {
  .itn-footer-grid { grid-template-columns: 1fr; }
  .itn-mini-value { font-size: 1.25rem; }
}
@media (max-width: 768px) {
  .itn-eyebrow, .itn-bento-badge, .itn-mini-label, .itn-badge-up, .itn-sx-plan-flag, .itn-sx-kicker, .itn-sx-caps { font-size: .75rem; }
  .itn-frame-url { font-size: .7rem; }
}
@media (max-width: 600px) {
  /* Tall vertical cards become a readable 2-column grid on phones */
  .itn-sk-cards { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
  .itn-sk-card { height: auto !important; max-width: none; margin-left: 0 !important; min-height: 130px; gap: 14px; box-shadow: none; }
  .itn-sk-vert { writing-mode: horizontal-tb; transform: none; flex-direction: column; gap: .15rem; }
  .itn-sk-vert strong { font-size: .95rem; }
}
@media (max-width: 768px) {
  /* Keep the logo and the close button above the open full-screen menu */
  .itn-nav > .itn-logo, .itn-hamburger { position: relative; z-index: 895; }
}

/* ---- Inline links written as [anchor](/url) in paragraph fields ---- */
.itn-inline-link { color: var(--itn-primary); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(var(--itn-primary-rgb),.45); transition: text-decoration-color var(--itn-t); }
.itn-inline-link:hover { color: var(--itn-primary); text-decoration-color: currentColor; }

/* ---- Scrolling text (itn-tk) ---- */
.itn-tk { position: relative; overflow: hidden; padding: clamp(1.5rem, 4vw, 3rem) 0; }
.itn-tk-track { display: flex; width: max-content; animation: itn-sx-scroll var(--itn-tk-dur, 34s) linear infinite; }
.itn-tk-track.is-rev { animation-direction: reverse; }
.itn-tk:hover .itn-tk-track { animation-play-state: paused; }
.itn-tk-set { display: flex; align-items: center; flex-shrink: 0; }
.itn-tk-word { white-space: nowrap; }
.itn-tk-sep { padding: 0 .55em; color: var(--itn-primary); }
.itn-tk--big .itn-tk-word { font-family: var(--itn-font-heading); font-weight: 800; letter-spacing: -.02em; font-size: clamp(2.6rem, 8vw, 6rem); line-height: 1.05; color: var(--itn-heading); }
.itn-tk--big .itn-tk-word.is-outline { color: transparent; -webkit-text-stroke: 1.5px var(--itn-text-2); }
.itn-tk--big .itn-tk-sep { font-size: clamp(1.6rem, 4vw, 3rem); }
.itn-tk--ribbon { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.itn-tk-band { padding: .9rem 0; }
.itn-tk-band.is-a { background: var(--itn-primary); color: var(--itn-on-primary); transform: rotate(-2.5deg) scale(1.05); position: relative; z-index: 2; box-shadow: 0 18px 40px -20px rgba(var(--itn-primary-rgb),.7); }
.itn-tk-band.is-b { background: var(--itn-bg-elevated); color: var(--itn-heading); transform: rotate(2deg) scale(1.05); margin-top: -2.6rem; border-block: 1px solid var(--itn-border); }
.itn-tk--ribbon .itn-tk-word { font-family: var(--itn-font-heading); font-weight: 700; font-size: clamp(1.1rem, 2.4vw, 1.6rem); text-transform: uppercase; letter-spacing: .04em; }
.itn-tk-band.is-a .itn-tk-sep { color: var(--itn-on-primary); }
.itn-tk--pill .itn-tk-set { gap: 14px; padding-right: 14px; }
.itn-tk--pill .itn-tk-word { padding: .75rem 1.35rem; border-radius: 999px; font-weight: 600; background: var(--itn-bg-card); border: 1px solid var(--itn-border-hover); color: var(--itn-text); }
.itn-tk--pill .itn-tk-word:nth-child(3n+1) { border-color: rgba(var(--itn-primary-rgb),.5); color: var(--itn-primary); }

/* ---- Infinite logo carousel (itn-lw) ---- */
.itn-lw-rows { display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.itn-lw-track { display: flex; width: max-content; animation: itn-sx-scroll var(--itn-lw-dur, 30s) linear infinite; }
.itn-lw-track.is-rev { animation-direction: reverse; }
.itn-lw-rows:hover .itn-lw-track { animation-play-state: paused; }
.itn-lw-set { display: flex; gap: 14px; padding-right: 14px; flex-shrink: 0; }
.itn-lw-logo { display: flex; align-items: center; justify-content: center; min-width: 170px; height: 76px; padding: 0 1.5rem; font-weight: 700; font-size: 1.05rem; color: var(--itn-text-2); white-space: nowrap; }
.itn-lw-logo img { max-height: 34px; width: auto; filter: grayscale(1); opacity: .75; transition: filter var(--itn-t), opacity var(--itn-t); }
.itn-lw-logo:hover img { filter: none; opacity: 1; }
.itn-lw--cards .itn-lw-logo { border-radius: 16px; background: var(--itn-bg-card); border: 1px solid var(--itn-border); transition: border-color var(--itn-t), color var(--itn-t); }
.itn-lw--cards .itn-lw-logo:hover { border-color: rgba(var(--itn-primary-rgb),.45); color: var(--itn-heading); }
@media (prefers-reduced-motion: reduce) {
  .itn-tk-track, .itn-lw-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .itn-tk-set[aria-hidden], .itn-lw-set[aria-hidden] { display: none; }
}

/* ---- Animated counters (itn-ct) ---- */
.itn-ct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.itn-ct-num { font-family: var(--itn-font-heading); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--itn-heading); font-size: clamp(2.2rem, 4.5vw, 3.2rem); font-variant-numeric: tabular-nums; }
.itn-ct-num .itn-count { background: linear-gradient(120deg, var(--itn-primary), var(--itn-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.itn-ct-label { margin-top: .6rem; font-weight: 600; color: var(--itn-text); }
.itn-ct-text { margin: .35rem 0 0; font-size: .88rem; color: var(--itn-text-2); }
.itn-ct--cards .itn-ct-cell { padding: 1.8rem 1.5rem; border-radius: 20px; background: var(--itn-bg-card); border: 1px solid var(--itn-border); position: relative; overflow: hidden; }
.itn-ct--cards .itn-ct-cell::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--itn-primary), var(--itn-accent)); opacity: .8; }
.itn-ct--inline .itn-ct-grid { gap: 0; }
.itn-ct--inline .itn-ct-cell { text-align: center; padding: 1rem 1.5rem; }
.itn-ct--inline .itn-ct-cell + .itn-ct-cell { border-left: 1px solid var(--itn-border); }
.itn-ct--inline .itn-ct-num { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.itn-ct-split { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.itn-ct-split h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.15; margin-bottom: 1rem; }
.itn-ct-intro { color: var(--itn-text-2); margin: 0; }
.itn-ct--split .itn-ct-grid { grid-template-columns: 1fr 1fr; gap: 0; }
.itn-ct--split .itn-ct-cell { padding: 1.6rem 1.4rem; border-bottom: 1px solid var(--itn-border); }
.itn-ct--split .itn-ct-cell:nth-child(odd) { border-right: 1px solid var(--itn-border); }

/* ---- Case studies (itn-cs) ---- */
.itn-cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.itn-cs--featured .itn-cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.itn-cs-card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--itn-bg-card); border: 1px solid var(--itn-border); transition: transform var(--itn-t), border-color var(--itn-t), box-shadow var(--itn-t); }
.itn-cs-card:hover { transform: translateY(-5px); border-color: rgba(var(--itn-primary-rgb),.4); box-shadow: var(--itn-shadow-md); }
.itn-cs-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--itn-bg-elevated); }
.itn-cs-media img, .itn-cs-media .itn-sx-placeholder { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; border-radius: 0; border: 0; transition: transform .6s ease; }
.itn-cs-card:hover .itn-cs-media img { transform: scale(1.04); }
.itn-cs-tag { position: absolute; left: 14px; top: 14px; padding: .35rem .8rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--itn-glass); color: var(--itn-heading); border: 1px solid var(--itn-border-hover); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.itn-cs-body { display: flex; flex-direction: column; gap: .7rem; padding: 1.5rem 1.6rem 1.7rem; flex: 1; }
.itn-cs-client { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--itn-primary); }
.itn-cs-body h3 { font-size: 1.25rem; line-height: 1.3; margin: 0; }
.itn-cs-text { margin: 0; color: var(--itn-text-2); font-size: .93rem; }
.itn-cs-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: .3rem; }
.itn-cs-metric { flex: 1 1 120px; padding: .8rem 1rem; border-radius: 14px; background: var(--itn-tint); border: 1px solid var(--itn-border); }
.itn-cs-metric strong { display: block; font-family: var(--itn-font-heading); font-size: 1.4rem; color: var(--itn-heading); line-height: 1.1; }
.itn-cs-metric span { font-size: .78rem; color: var(--itn-text-2); }
.itn-cs-more { margin-top: auto; padding-top: .4rem; font-weight: 700; font-size: .9rem; color: var(--itn-primary); }
.itn-cs-more span[aria-hidden] { display: inline-block; transition: transform var(--itn-t); }
.itn-cs-card:hover .itn-cs-more span[aria-hidden] { transform: translateX(4px); }
.itn-cs-card.is-featured { grid-column: 1 / -1; flex-direction: row; }
.itn-cs-card.is-featured .itn-cs-media { flex: 1.15; aspect-ratio: auto; min-height: 340px; }
.itn-cs-card.is-featured .itn-cs-body { flex: 1; padding: clamp(1.6rem, 3.5vw, 2.8rem); justify-content: center; }
.itn-cs-card.is-featured h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }

@media (max-width: 900px) {
  .itn-ct-split { grid-template-columns: 1fr; }
  .itn-cs--featured .itn-cs-grid { grid-template-columns: 1fr; }
  .itn-cs-card.is-featured { flex-direction: column; }
  .itn-cs-card.is-featured .itn-cs-media { min-height: 0; aspect-ratio: 16/10; }
}
@media (max-width: 600px) {
  .itn-ct--inline .itn-ct-grid { grid-template-columns: 1fr 1fr; }
  .itn-ct--inline .itn-ct-cell + .itn-ct-cell { border-left: 0; }
  .itn-ct--inline .itn-ct-cell:nth-child(even) { border-left: 1px solid var(--itn-border); }
  .itn-ct-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .itn-ct--cards .itn-ct-cell { padding: 1.3rem 1rem; }
  .itn-ct-num { font-size: 2rem; }
  .itn-cs-grid { grid-template-columns: 1fr; }
  .itn-lw-logo { min-width: 130px; height: 64px; font-size: .95rem; }
  .itn-tk-band.is-b { margin-top: -1.8rem; }
}

/* =========================================================
   SEO page sections
   ========================================================= */
.itn-seo-h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.15; margin-bottom: var(--itn-space-5); }
.itn-seo-text { color: var(--itn-text-2); font-size: 1rem; line-height: 1.8; margin: 0 0 var(--itn-space-6); }
.itn-inline-link { color: var(--itn-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.itn-inline-link:hover { color: var(--itn-primary-light); }

/* ---- Traffic growth chart ---- */
.itn-gc { display: grid; grid-template-columns: 1fr 1.45fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.itn-gc-copy { min-width: 0; }
.itn-gc-stats { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.itn-gc-stat { flex: 1 1 130px; padding: 16px 18px; border-radius: 16px; background: var(--itn-bg-card); border: 1px solid var(--itn-border); }
.itn-gc-stat span { display: block; font-size: .8rem; color: var(--itn-text-muted); margin-bottom: 4px; }
.itn-gc-stat strong { font-family: var(--itn-font-heading); font-size: 1.7rem; color: var(--itn-heading); line-height: 1.1; }
.itn-gc-stat.is-after { border-color: rgba(var(--itn-primary-rgb),.45); background: var(--itn-grad-card); }
.itn-gc-stat.is-after strong { color: var(--itn-primary); }
.itn-gc-growth { flex: 1 0 100%; font-weight: 700; color: var(--itn-success); font-size: .95rem; }
.itn-gc-card { position: relative; margin: 0; padding: 22px 20px 14px; border-radius: 22px; background: var(--itn-bg-card); border: 1px solid var(--itn-border); box-shadow: var(--itn-shadow-md); min-width: 0; }
.itn-gc-unit { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--itn-text-muted); margin: 0 0 6px 6px; }
.itn-gc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.itn-gc-grid { stroke: var(--itn-border); stroke-width: 1; }
.itn-gc-ylab, .itn-gc-xlab { fill: var(--itn-text-muted); font-size: 12px; font-family: var(--itn-font-body); }
.itn-gc-line { fill: none; stroke: var(--itn-primary); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.itn-gc-area { opacity: 0; }
.itn-gc-dot { fill: var(--itn-bg-card); stroke: var(--itn-primary); stroke-width: 3.5; opacity: 0; }
.itn-gc-tip { opacity: 0; }
.itn-gc-tip rect { fill: var(--itn-primary); }
.itn-gc-tip text { fill: var(--itn-on-primary); font-size: 13px; font-weight: 700; font-family: var(--itn-font-body); }
.is-in .itn-gc-line { transition: stroke-dashoffset 1.8s cubic-bezier(.45,.05,.2,1); stroke-dashoffset: 0; }
.is-in .itn-gc-area { transition: opacity .9s ease .9s; opacity: 1; }
.is-in .itn-gc-dot, .is-in .itn-gc-tip { transition: opacity .4s ease 1.6s; opacity: 1; }
.itn-gc-note { margin: 8px 6px 2px; font-size: .8rem; color: var(--itn-text-muted); }

/* ---- Keyword rankings ---- */
.itn-rk-wrap { overflow-x: auto; border-radius: 20px; border: 1px solid var(--itn-border); background: var(--itn-bg-card); }
.itn-rk { width: 100%; min-width: 540px; border-collapse: collapse; font-size: .93rem; }
.itn-rk th, .itn-rk td { padding: .95rem 1.2rem; border-bottom: 1px solid var(--itn-border); text-align: left; }
.itn-rk thead th { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--itn-text-muted); background: var(--itn-tint); }
.itn-rk tbody tr:last-child th, .itn-rk tbody tr:last-child td { border-bottom: 0; }
.itn-rk tbody tr:hover { background: var(--itn-tint); }
.itn-rk .is-num { text-align: center; white-space: nowrap; }
.itn-rk-kw { font-weight: 600; color: var(--itn-text); }
.itn-rk-vol { color: var(--itn-text-2); }
.itn-rk-pos { display: inline-block; min-width: 46px; padding: .3rem .6rem; border-radius: 8px; font-weight: 700; background: var(--itn-bg-elevated); color: var(--itn-heading); }
.itn-rk-pos.is-old { background: transparent; color: var(--itn-text-muted); font-weight: 500; text-decoration: line-through; text-decoration-color: var(--itn-border-hover); }
.itn-rk-pos.is-top { background: var(--itn-primary); color: var(--itn-on-primary); }
.itn-rk-chg { display: inline-block; padding: .28rem .65rem; border-radius: 999px; font-weight: 700; font-size: .82rem; color: var(--itn-text-muted); }
.itn-rk-chg.is-up { background: rgba(16,185,129,.14); color: var(--itn-success); }
.itn-rk-chg.is-down { background: rgba(239,68,68,.12); color: #EF4444; }
.itn-rk-chg.is-new { background: rgba(var(--itn-primary-rgb),.14); color: var(--itn-primary); }
.itn-rk-note { margin-top: 12px; text-align: center; font-size: .82rem; color: var(--itn-text-muted); }

/* ---- Search result preview ---- */
.itn-sp-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.itn-sp-grid > * { min-width: 0; }
.itn-sp { position: relative; padding: 18px; border-radius: 22px; background: var(--itn-bg-card); border: 1px solid var(--itn-border); box-shadow: var(--itn-shadow-md); display: grid; gap: 12px; }
.itn-sp-bar { display: flex; align-items: center; gap: 12px; }
.itn-sp-logo { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: Arial, sans-serif; color: #fff; background: conic-gradient(#4285F4 0 25%, #EA4335 0 50%, #FBBC05 0 75%, #34A853 0); }
.itn-sp-q { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: center; padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--itn-border-hover); background: var(--itn-bg); color: var(--itn-text); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itn-sp-res { position: relative; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--itn-border); background: var(--itn-bg); }
.itn-sp-res.is-you { border-color: rgba(var(--itn-primary-rgb),.55); box-shadow: 0 0 0 4px rgba(var(--itn-primary-rgb),.1); }
.itn-sp-site { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.itn-sp-site strong { display: block; font-size: .85rem; color: var(--itn-text); line-height: 1.2; }
.itn-sp-site small { display: block; font-size: .76rem; color: var(--itn-text-muted); }
.itn-sp-fav { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; background: var(--itn-primary); color: var(--itn-on-primary); }
.itn-sp-title { margin: 0 0 6px; font-family: Arial, var(--itn-font-body); font-weight: 500; font-size: 1.15rem; line-height: 1.3; color: #1A73E8; }
body.itn-dark .itn-sp-title { color: #8AB4F8; }
.itn-sp-rate { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--itn-text-muted); margin-bottom: 6px; }
.itn-sp-desc { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--itn-text-2); }
.itn-sp-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 12px; }
.itn-sp-links span { font-size: .84rem; color: #1A73E8; }
body.itn-dark .itn-sp-links span { color: #8AB4F8; }
.itn-sp-flag { position: absolute; top: -11px; right: 16px; padding: .22rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 800; background: var(--itn-primary); color: var(--itn-on-primary); }
.itn-sp-res.is-ghost { display: grid; gap: 8px; opacity: .55; }
.itn-sp-res.is-ghost i { display: block; height: 9px; border-radius: 5px; background: var(--itn-bg-elevated); }
.itn-sp-res.is-ghost i:first-child { width: 40%; } .itn-sp-res.is-ghost i:nth-child(2) { width: 75%; height: 12px; } .itn-sp-res.is-ghost i:last-child { width: 90%; }
.itn-sp.is-ai { gap: 14px; }
.itn-sp-ask { justify-self: end; max-width: 85%; padding: .8rem 1.1rem; border-radius: 18px 18px 4px 18px; background: var(--itn-bg-elevated); color: var(--itn-text); font-size: .92rem; }
.itn-sp-ans { padding: 18px; border-radius: 18px; background: var(--itn-bg); border: 1px solid var(--itn-border); }
.itn-sp-ans-head { font-weight: 700; font-size: .85rem; margin-bottom: 8px; color: var(--itn-heading); }
.itn-sp-ans p { margin: 0 0 14px; font-size: .92rem; line-height: 1.7; color: var(--itn-text-2); }
.itn-sp-src { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.itn-sp-src small { width: 100%; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--itn-text-muted); }
.itn-sp-src span { display: inline-flex; align-items: center; gap: 6px; padding: .3rem .7rem .3rem .3rem; border-radius: 999px; font-size: .8rem; background: var(--itn-bg-elevated); color: var(--itn-text-2); }
.itn-sp-src b { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; background: var(--itn-border-hover); color: var(--itn-text); }
.itn-sp-src span.is-you { background: rgba(var(--itn-primary-rgb),.16); color: var(--itn-heading); font-weight: 600; box-shadow: 0 0 0 1px rgba(var(--itn-primary-rgb),.5); }
.itn-sp-src span.is-you b { background: var(--itn-primary); color: var(--itn-on-primary); }

/* ---- Star rating with partial fill (--r out of 5) ---- */
.itn-tb-stars { display: inline-block; letter-spacing: 2px; font-size: 1rem; line-height: 1;
  background: linear-gradient(90deg, #FBBF24 calc(var(--r, 5) / 5 * 100%), var(--itn-border-hover) 0);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- SEO health score ---- */
.itn-hs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--itn-space-6); max-width: 1000px; margin: 0 auto; }
.itn-hs-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 16px 22px; border-radius: 20px; background: var(--itn-bg-card); border: 1px solid var(--itn-border); }
.itn-hs-ring { position: relative; width: 128px; height: 128px; --c: #10B981; }
.itn-hs-item.is-mid .itn-hs-ring { --c: #F59E0B; } .itn-hs-item.is-bad .itn-hs-ring { --c: #EF4444; }
.itn-hs-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.itn-hs-track { fill: none; stroke: var(--itn-bg-elevated); stroke-width: 10; }
.itn-hs-arc { fill: color-mix(in srgb, var(--c) 10%, transparent); stroke: var(--c); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.is-in .itn-hs-arc { transition: stroke-dashoffset 1.6s cubic-bezier(.45,.05,.2,1); stroke-dashoffset: calc(100 - var(--s)); }
.itn-hs-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--itn-font-heading); font-weight: 800; font-size: 2.2rem; color: var(--c); }
.itn-hs-item strong { font-size: 1rem; color: var(--itn-heading); }
.itn-hs-item small { font-size: .8rem; color: var(--itn-text-muted); }
.itn-hs-key { display: flex; justify-content: center; gap: 18px; margin-top: 18px; font-size: .78rem; color: var(--itn-text-muted); }
.itn-hs-key span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.itn-hs-key .is-bad::before { background: #EF4444; } .itn-hs-key .is-mid::before { background: #F59E0B; } .itn-hs-key .is-good::before { background: #10B981; }

/* ---- Before / after slider ---- */
.itn-ba { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--itn-border); box-shadow: var(--itn-shadow-md); aspect-ratio: 16 / 9; background: var(--itn-bg-card); user-select: none; }
.itn-ba-img { position: absolute; inset: 0; }
.itn-ba-img img, .itn-ba-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.itn-ba-img.is-after { clip-path: inset(0 0 0 var(--pos)); }
.itn-ba-ph { display: flex; flex-direction: column; justify-content: flex-end; gap: 10%; padding: 8% 8% 10%; }
.itn-ba-ph i { display: block; border-radius: 8px; }
.itn-ba-ph.is-before { background: linear-gradient(160deg, #334155, #1E293B); }
.itn-ba-ph.is-before i { background: rgba(255,255,255,.12); height: 10%; } .itn-ba-ph.is-before i:nth-child(1) { width: 30%; } .itn-ba-ph.is-before i:nth-child(2) { width: 22%; } .itn-ba-ph.is-before i:nth-child(3) { width: 18%; }
.itn-ba-ph.is-after { background: linear-gradient(160deg, #0B3B4E, #0A6E8C 60%, var(--itn-primary)); }
.itn-ba-ph.is-after i { background: rgba(255,255,255,.85); height: 10%; } .itn-ba-ph.is-after i:nth-child(1) { width: 70%; } .itn-ba-ph.is-after i:nth-child(2) { width: 86%; } .itn-ba-ph.is-after i:nth-child(3) { width: 95%; }
.itn-ba-tag { position: absolute; top: 16px; padding: .35rem .85rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(4,20,28,.72); color: #fff; backdrop-filter: blur(6px); pointer-events: none; }
.itn-ba-tag.is-before { left: 16px; } .itn-ba-tag.is-after { right: 16px; background: var(--itn-primary); color: var(--itn-on-primary); }
.itn-ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.35); pointer-events: none; }
.itn-ba-handle span { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: #0F172A; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.itn-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.itn-ba-range:focus-visible ~ .itn-ba-handle span, .itn-ba:focus-within .itn-ba-handle span { outline: 3px solid var(--itn-primary); outline-offset: 2px; }

/* ---- Free audit request ---- */
.itn-au { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.8rem, 4.5vw, 3.5rem); border-radius: 28px; background: var(--itn-grad-deep); border: 1px solid rgba(var(--itn-primary-rgb),.35); position: relative; overflow: hidden; }
.itn-au::after { content: ''; position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--itn-primary-rgb),.22), transparent 65%); pointer-events: none; }
.itn-au > * { position: relative; min-width: 0; }
.itn-au-copy .itn-seo-text { margin-bottom: var(--itn-space-5); }
.itn-au-points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.itn-au-points li { display: flex; gap: 8px; font-size: .9rem; color: var(--itn-text); }
.itn-au-points li::before { content: '✓'; color: var(--itn-primary); font-weight: 800; }
.itn-au-f { display: flex; gap: 8px; padding: 8px; border-radius: 999px; background: var(--itn-bg-card); border: 1px solid var(--itn-border-hover); box-shadow: var(--itn-shadow-md); }
.itn-au-f input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--itn-text); font: inherit; font-size: .98rem; padding: 0 16px; }
.itn-au-f input::placeholder { color: var(--itn-text-muted); }
.itn-au-f:focus-within { border-color: var(--itn-primary); box-shadow: 0 0 0 4px rgba(var(--itn-primary-rgb),.18); }
.itn-au-f .itn-btn { border-radius: 999px; white-space: nowrap; }
.itn-au-note { margin: 12px 0 0 12px; font-size: .8rem; color: var(--itn-text-muted); }
.itn-au-sc { padding: 20px; border-radius: 18px; background: var(--itn-bg-card); border: 1px solid var(--itn-border); }

/* ---- Trust badges & ratings ---- */
.itn-tb { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.itn-tb-item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--itn-bg-card); border: 1px solid var(--itn-border); color: inherit; text-decoration: none; transition: border-color var(--itn-t), transform var(--itn-t); }
a.itn-tb-item:hover { border-color: rgba(var(--itn-primary-rgb),.45); transform: translateY(-3px); }
.itn-tb-logo { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: var(--itn-bg-elevated); overflow: hidden; }
.itn-tb-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.itn-tb-name { display: block; font-weight: 700; font-size: .95rem; color: var(--itn-heading); }
.itn-tb-sub { display: block; font-size: .78rem; color: var(--itn-text-muted); margin-top: 2px; }
.itn-tb.is-ratings .itn-tb-item { flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; }
.itn-tb.is-ratings .itn-tb-logo { margin-bottom: 4px; }
.itn-tb-score { font-family: var(--itn-font-heading); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--itn-heading); }
.itn-tb-score small { font-size: .95rem; font-weight: 600; color: var(--itn-text-muted); }

/* ---- Service tabs ---- */
.itn-st-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px; margin: 0 auto 22px; width: max-content; max-width: 100%; border-radius: 999px; background: var(--itn-bg-card); border: 1px solid var(--itn-border); }
.itn-st-tab { display: inline-flex; align-items: center; gap: 8px; padding: .7rem 1.2rem; border: 0; border-radius: 999px; background: transparent; color: var(--itn-text-2); font: 600 .9rem/1 var(--itn-font-body); cursor: pointer; transition: background var(--itn-t), color var(--itn-t); }
.itn-st-tab:hover { color: var(--itn-text); }
.itn-st-tab.is-active { background: var(--itn-primary); color: var(--itn-on-primary); }
.itn-st-tab:focus-visible { outline: 3px solid var(--itn-primary); outline-offset: 2px; }
.itn-st-panel { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.5rem, 4vw, 2.8rem); border-radius: 24px; background: var(--itn-bg-card); border: 1px solid var(--itn-border); }
.itn-st.is-ready .itn-st-panel:not(.is-active) { display: none; }
.itn-st:not(.is-ready) .itn-st-panel + .itn-st-panel { margin-top: 16px; }
.itn-st-panel.is-active { animation: itn-st-in .35s ease; }
@keyframes itn-st-in { from { opacity: 0; transform: translateY(8px); } }
.itn-st-copy { min-width: 0; }
.itn-st-copy h3 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-bottom: .8rem; }
.itn-st-copy p { color: var(--itn-text-2); margin: 0 0 18px; line-height: 1.75; }
.itn-st-points { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.itn-st-points li { display: flex; gap: 10px; font-size: .93rem; }
.itn-st-points li::before { content: '✓'; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; background: rgba(var(--itn-primary-rgb),.15); color: var(--itn-primary); }
.itn-st-media img, .itn-st-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; display: block; }
.itn-st-ph { display: flex; align-items: center; justify-content: center; font-size: 4rem; background: var(--itn-grad-deep); border: 1px solid var(--itn-border); }

@media (prefers-reduced-motion: reduce) {
  .itn-gc-line { stroke-dashoffset: 0; } .itn-gc-area, .itn-gc-dot, .itn-gc-tip { opacity: 1; }
  .itn-hs-arc { stroke-dashoffset: calc(100 - var(--s)); } .itn-st-panel.is-active { animation: none; }
}

@media (max-width: 900px) {
  .itn-gc, .itn-sp-grid, .itn-au, .itn-st-panel { grid-template-columns: 1fr; }
  .itn-st-media { order: -1; }
}
@media (max-width: 600px) {
  .itn-au-f { flex-direction: column; border-radius: 18px; }
  .itn-au-f input { padding: 12px 12px; }
  .itn-au-f .itn-btn { width: 100%; justify-content: center; }
  .itn-st-list { width: 100%; border-radius: 18px; justify-content: stretch; }
  .itn-st-tab { flex: 1 1 calc(50% - 8px); justify-content: center; padding: .7rem .6rem; font-size: .85rem; }
  .itn-sp-links { grid-template-columns: 1fr; }
  .itn-ba { aspect-ratio: 4 / 3; }
  .itn-hs { grid-template-columns: 1fr 1fr; gap: 12px; }
  .itn-hs-ring { width: 104px; height: 104px; } .itn-hs-num { font-size: 1.8rem; }
  .itn-gc-ylab, .itn-gc-xlab { font-size: 15px; }
}
@media (max-width: 600px) {
  /* Rankings: keep the positions on screen — drop the volume column and tighten */
  .itn-rk { min-width: 0; font-size: .86rem; }
  .itn-rk .is-vol { display: none; }
  .itn-rk th, .itn-rk td { padding: .75rem .45rem; }
  .itn-rk th:first-child, .itn-rk td:first-child { padding-left: .9rem; }
  .itn-rk thead th { font-size: .68rem; letter-spacing: .03em; }
  .itn-rk-pos { min-width: 0; padding: .25rem .4rem; }
  .itn-rk-chg { padding: .22rem .45rem; font-size: .76rem; }
  .itn-gc-ylab, .itn-gc-xlab { font-size: 22px; }
  .itn-gc-tip text { font-size: 18px; }
}
@media (max-width: 600px) {
  .itn-rk { table-layout: fixed; }
  .itn-rk thead th:first-child { width: 40%; }
  .itn-rk-kw { overflow-wrap: anywhere; }
}

/* Header buttons: the nav-link colour rule (.itn-nav-links a) is more
   specific than .itn-btn-primary and used to grey out the CTA text. */
.itn-nav-links a.itn-btn-primary, .itn-nav-links a.itn-btn-primary:hover { color: var(--itn-on-primary); }
.itn-nav-links a.itn-btn-outline { color: var(--itn-text); }

/* =========================================================
   Single post — "Split Header" design
   ========================================================= */
.itn-ss-hero { position: relative; padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3.5rem);
  background: radial-gradient(ellipse 70% 90% at 15% 110%, rgba(var(--itn-primary-rgb),.14), transparent 60%), var(--itn-bg); }
.itn-ss-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.itn-ss-grid.is-text { grid-template-columns: minmax(0, 860px); }
.itn-ss-copy { min-width: 0; }
.itn-ss-copy .itn-blog-cat { display: inline-block; margin-bottom: var(--itn-space-4); }
.itn-ss-title { font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.2; letter-spacing: -.02em; margin-bottom: var(--itn-space-6); }
.itn-ss-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.itn-ss-author { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; min-width: 0; }
.itn-ss-author strong { display: block; font-family: var(--itn-font-heading); font-size: 1rem; color: var(--itn-heading); text-transform: uppercase; letter-spacing: .02em; }
.itn-ss-author small { display: block; font-size: .85rem; color: var(--itn-text-2); margin-top: 2px; }
.itn-ss-avatar { border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(var(--itn-primary-rgb),.45); }
.itn-ss-dates { display: flex; flex-direction: column; gap: 4px; font-size: .86rem; color: var(--itn-text-2); }
.itn-ss-dates time { color: var(--itn-text); font-weight: 500; }
.itn-ss-media { margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid rgba(var(--itn-primary-rgb),.5); box-shadow: 0 30px 70px -30px rgba(var(--itn-primary-rgb),.45); }
.itn-ss-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

.itn-ss-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem); }
.itn-ss-layout.no-side { grid-template-columns: minmax(0, 860px); justify-content: center; }
.itn-ss-article { min-width: 0; }
.itn-ss-body { padding: clamp(1.25rem, 3.5vw, 2.5rem); border-radius: 22px; background: var(--itn-bg-card); border: 1px solid rgba(var(--itn-primary-rgb),.35); }
.itn-ss-body > :first-child { margin-top: 0; }

.itn-ss-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.itn-ss-side.is-sticky { position: sticky; top: calc(var(--itn-header-h) + var(--itn-adminbar-h, 0px) + 18px); max-height: calc(100vh - var(--itn-header-h) - var(--itn-adminbar-h, 0px) - 36px); overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
.itn-ss-card { padding: 20px 22px; border-radius: 20px; background: var(--itn-bg-card); border: 1px solid var(--itn-border); }
.itn-ss-card h2 { font-size: 1.15rem; margin: 0 0 12px; }

.itn-side-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--itn-border); }
.itn-side-toc a { display: block; padding: 7px 12px; margin-left: -2px; border-left: 2px solid transparent; font-size: .88rem; line-height: 1.45; color: var(--itn-text-2); text-decoration: none; transition: color var(--itn-t), border-color var(--itn-t), background var(--itn-t); }
.itn-side-toc .is-h3 a { padding-left: 26px; font-size: .83rem; }
.itn-side-toc a:hover { color: var(--itn-text); }
.itn-side-toc a.is-active { color: var(--itn-primary); border-left-color: var(--itn-primary); background: rgba(var(--itn-primary-rgb),.07); font-weight: 600; }

.itn-ss-bio { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.itn-ss-bio strong { font-family: var(--itn-font-heading); font-size: 1.05rem; color: var(--itn-heading); text-transform: uppercase; letter-spacing: .02em; margin-top: 4px; }
.itn-ss-bio p { margin: 0 0 8px; font-size: .86rem; color: var(--itn-text-2); line-height: 1.6; }
.itn-ss-contact p { margin: -4px 0 14px; font-size: .86rem; color: var(--itn-text-2); }
.itn-ss-form input, .itn-ss-form textarea, .itn-ss-form select { max-width: 100%; }
.itn-ss-related a { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; color: var(--itn-text-2); text-decoration: none; font-size: .86rem; line-height: 1.5; }
.itn-ss-related a + a { border-top: 1px solid var(--itn-border); }
.itn-ss-related a:hover { color: var(--itn-primary); }
.itn-ss-related img { width: 60px; height: 46px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }

.itn-ss-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: var(--itn-space-8); }
.itn-ss-nav a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--itn-bg-card); border: 1px solid var(--itn-border); color: var(--itn-text); text-decoration: none; font-weight: 600; font-size: .9rem; transition: border-color var(--itn-t); }
.itn-ss-nav a:hover { border-color: rgba(var(--itn-primary-rgb),.5); }
.itn-ss-nav a.is-next { text-align: right; }
.itn-ss-nav small { font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--itn-text-muted); }

@media (max-width: 1024px) {
  .itn-ss-layout { grid-template-columns: minmax(0, 1fr); }
  .itn-ss-side.is-sticky { position: static; max-height: none; overflow: visible; }
  .itn-ss-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .itn-ss-toc { display: none; }  /* long contents lists get in the way on small screens */
}
@media (max-width: 860px) {
  .itn-ss-grid { grid-template-columns: 1fr; }
  .itn-ss-media { order: -1; }
}
@media (max-width: 600px) {
  .itn-ss-meta { flex-direction: column; align-items: flex-start; }
  .itn-ss-dates { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
  .itn-ss-body { border-radius: 16px; padding: 1.1rem; }
  .itn-ss-nav { grid-template-columns: 1fr; }
  .itn-ss-nav a.is-next { text-align: left; }
}
/* Related-post thumbnails in the classic sidebar keep their small size even if a plugin strips inline styles */
.itn-sidebar-widget a > img { width: 56px; height: 44px; max-width: none; object-fit: cover; border-radius: 6px; }
/* Split Header posts: collapsible contents at the top of the article on smaller screens */
.itn-ss-mtoc { display: none; margin-bottom: 16px; border-radius: 16px; background: var(--itn-bg-card); border: 1px solid var(--itn-border); }
.itn-ss-mtoc summary { cursor: pointer; list-style: none; padding: 14px 18px; font-family: var(--itn-font-heading); font-weight: 600; color: var(--itn-heading); display: flex; justify-content: space-between; align-items: center; }
.itn-ss-mtoc summary::-webkit-details-marker { display: none; }
.itn-ss-mtoc summary::after { content: '+'; font-size: 1.3rem; color: var(--itn-primary); }
.itn-ss-mtoc[open] summary::after { content: '−'; }
.itn-ss-mtoc ol { list-style: none; margin: 0; padding: 0 18px 14px; display: grid; gap: 2px; }
.itn-ss-mtoc a { display: block; padding: 6px 0; font-size: .88rem; color: var(--itn-text-2); text-decoration: none; }
.itn-ss-mtoc .is-h3 a { padding-left: 16px; font-size: .84rem; }
@media (max-width: 1024px) { .itn-ss-mtoc { display: block; } }
/* Anchor jumps (contents links, #section buttons) stop below the fixed header, not under it */
.itn-post-body [id], .itn-page-top [id^="itn-sec-"], [id^="itn-toc-"] { scroll-margin-top: calc(var(--itn-header-h) + var(--itn-adminbar-h, 0px) + 24px); }

/* --- v1.3.11 LED display strip (ticker design) --- */
.itn-tk--led { padding: 0; background: #0a0d16; border-block: 1px solid rgba(var(--itn-primary-rgb), .45); box-shadow: inset 0 0 40px rgba(var(--itn-primary-rgb), .08); isolation: isolate; }
.itn-tk--led::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.3px); background-size: 6px 6px; }
.itn-tk--led::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: radial-gradient(rgba(10,13,22,.65) .9px, transparent 1.2px); background-size: 3px 3px; }
.itn-tk--led .itn-tk-track { padding: 1.05rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.itn-tk--led .itn-tk-word { font-family: var(--itn-font-heading); font-weight: 800; font-size: clamp(1rem, 1.7vw, 1.3rem); letter-spacing: .04em; color: var(--itn-primary); text-shadow: 0 0 6px rgba(var(--itn-primary-rgb), .85), 0 0 18px rgba(var(--itn-primary-rgb), .45); }
.itn-tk--led .itn-tk-sep { padding: 0 1.5em; font-size: .7rem; color: var(--itn-primary); opacity: .7; text-shadow: 0 0 8px rgba(var(--itn-primary-rgb), .8); }
@media (prefers-reduced-motion: reduce) { .itn-tk--led .itn-tk-track { padding: .9rem 1rem; } }

/* v1.3.11 case study grid: one or two cards are centred instead of hugging the left edge */
.itn-cs-grid:has(> :only-child) { grid-template-columns: minmax(300px, 420px); justify-content: center; }
.itn-cs-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(300px, 420px)); justify-content: center; }
@media (max-width: 760px) {
  .itn-cs-grid:has(> :only-child), .itn-cs-grid:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
}

/* =========================================================
   v1.3.12 creative sections (itn-nw-*)
   ========================================================= */

/* ---- Spotlight cards ---- */
.itn-nw-glow { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--itn-space-5); }
.itn-nw-gcard {
  --mx: 50%; --my: 50%;
  position: relative; display: block; overflow: hidden; padding: var(--itn-space-8); border-radius: 22px;
  background: var(--itn-bg-card); border: 1px solid var(--itn-border); color: inherit; text-decoration: none;
  transition: transform var(--itn-t), border-color var(--itn-t);
}
.itn-nw-gcard::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--itn-primary-rgb), .18), transparent 60%);
}
.itn-nw-gcard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; border-radius: inherit; padding: 1px;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(var(--itn-primary-rgb), .9), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.itn-nw-glow:hover .itn-nw-gcard::before, .itn-nw-glow:hover .itn-nw-gcard::after { opacity: 1; }
.itn-nw-gcard:hover { transform: translateY(-3px); }
.itn-nw-gcard > * { position: relative; z-index: 1; }
.itn-nw-gicon {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font-size: 1.5rem; margin-bottom: var(--itn-space-5);
  background: rgba(var(--itn-primary-rgb), .12); border: 1px solid rgba(var(--itn-primary-rgb), .25);
}
.itn-nw-gcard h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.itn-nw-gcard p { margin: 0; color: var(--itn-text-2); font-size: .94rem; }
.itn-nw-glink { display: inline-block; margin-top: var(--itn-space-5); color: var(--itn-primary); font-weight: 600; font-size: .9rem; }

/* ---- Stacking steps ---- */
.itn-nw-stack { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.itn-nw-stack-intro { position: sticky; top: calc(var(--itn-header-h) + 32px); }
.itn-nw-stack-intro .itn-section-title, .itn-nw-stack-intro .itn-section-desc { text-align: left; margin-left: 0; margin-right: 0; }
.itn-nw-stack-intro .itn-btn { margin-top: var(--itn-space-6); }
.itn-nw-stack-list { list-style: none; margin: 0; padding: 0; display: block; }
.itn-nw-scard {
  position: sticky; top: calc(var(--itn-header-h) + 24px + var(--n) * 22px);
  margin-bottom: var(--itn-space-8); padding: var(--itn-space-10) var(--itn-space-10) var(--itn-space-10) 6.4rem;
  min-height: 210px; border-radius: 24px; background: var(--itn-grad-card); border: 1px solid var(--itn-border);
  box-shadow: 0 -14px 30px -18px rgba(0,0,0,.45);
}
.itn-nw-snum {
  position: absolute; left: 1.6rem; top: 1.7rem; font-family: var(--itn-font-heading); font-weight: 800; font-size: 2.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(var(--itn-primary-rgb), .75);
}
.itn-nw-stag {
  display: inline-block; margin-bottom: .7rem; padding: .2rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--itn-primary); background: rgba(var(--itn-primary-rgb), .12); border: 1px solid rgba(var(--itn-primary-rgb), .25);
}
.itn-nw-scard h3 { font-size: 1.4rem; margin: 0 0 .6rem; }
.itn-nw-scard p { margin: 0; color: var(--itn-text-2); }

/* ---- Feature quote ---- */
.itn-nw-quote {
  position: relative; margin: 0; padding: clamp(2rem, 5vw, 4rem); border-radius: 32px; overflow: hidden; text-align: center;
  background: var(--itn-grad-card); border: 1px solid rgba(var(--itn-primary-rgb), .3);
  box-shadow: 0 0 80px -20px rgba(var(--itn-primary-rgb), .35);
}
.itn-nw-quote::before {
  content: ""; position: absolute; width: 420px; height: 420px; right: -140px; top: -180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--itn-primary-rgb), .28), transparent 65%); pointer-events: none;
}
.itn-nw-qmark {
  display: block; font-family: Georgia, serif; font-size: 7rem; line-height: .6; height: 3.2rem;
  background: var(--itn-grad-primary, linear-gradient(135deg, var(--itn-primary), var(--itn-accent))); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.itn-nw-qeyebrow { position: relative; margin: 0 0 var(--itn-space-4); text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 700; color: var(--itn-primary); }
.itn-nw-quote blockquote { position: relative; margin: 0; }
.itn-nw-quote blockquote p {
  margin: 0; font-family: var(--itn-font-heading); font-weight: 600; letter-spacing: -.01em; line-height: 1.4; color: var(--itn-heading);
  font-size: clamp(1.35rem, 2.8vw, 2.1rem);
}
.itn-nw-qresult {
  position: relative; display: inline-block; margin: var(--itn-space-6) 0 0; padding: .45rem 1rem; border-radius: 999px; font-weight: 600; font-size: .9rem;
  color: var(--itn-accent); background: rgba(var(--itn-primary-rgb), .1); border: 1px solid rgba(var(--itn-primary-rgb), .25);
}
.itn-nw-quote figcaption { position: relative; display: inline-flex; align-items: center; gap: .9rem; margin-top: var(--itn-space-8); text-align: left; }
.itn-nw-qimg { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--itn-primary); padding: 2px; }
.itn-nw-quote figcaption strong { display: block; color: var(--itn-heading); }
.itn-nw-quote figcaption em { font-style: normal; color: var(--itn-text-muted); font-size: .88rem; }

/* ---- Checklist split ---- */
.itn-nw-cl { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.itn-nw-cl-intro { position: sticky; top: calc(var(--itn-header-h) + 32px); }
.itn-nw-cl-intro .itn-section-title, .itn-nw-cl-intro .itn-section-desc { text-align: left; margin-left: 0; margin-right: 0; }
.itn-nw-cl-intro .itn-btn { margin-top: var(--itn-space-6); }
.itn-nw-cl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--itn-space-4); }
.itn-nw-cl-item {
  display: flex; gap: 1rem; padding: var(--itn-space-5) var(--itn-space-6); border-radius: 18px;
  background: var(--itn-bg-card); border: 1px solid var(--itn-border); transition: border-color var(--itn-t), transform var(--itn-t);
}
.itn-nw-cl-item:hover { border-color: rgba(var(--itn-primary-rgb), .4); transform: translateY(-2px); }
.itn-nw-tick {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; font-size: .85rem; font-weight: 800;
  color: #04141C; background: linear-gradient(135deg, var(--itn-primary), var(--itn-accent));
}
.itn-nw-cl-item strong { display: block; color: var(--itn-heading); font-size: 1rem; }
.itn-nw-cl-item p { margin: .25rem 0 0; color: var(--itn-text-2); font-size: .88rem; }

/* ---- Topic cloud ---- */
.itn-nw-cloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; align-items: center; }
.itn-nw-pill {
  display: inline-block; border-radius: 999px; text-decoration: none; white-space: nowrap; font-weight: 600;
  color: var(--itn-text); background: var(--itn-bg-card); border: 1px solid var(--itn-border);
  transition: transform var(--itn-t), border-color var(--itn-t), background var(--itn-t), color var(--itn-t);
}
.itn-nw-pill--s  { padding: .4rem .9rem;  font-size: .85rem; }
.itn-nw-pill--m  { padding: .55rem 1.15rem; font-size: 1rem; }
.itn-nw-pill--l  { padding: .7rem 1.5rem;  font-size: 1.2rem; border-color: rgba(var(--itn-primary-rgb), .3); }
.itn-nw-pill--xl { padding: .85rem 1.9rem; font-size: 1.5rem; color: #04141C; border-color: transparent; background: linear-gradient(135deg, var(--itn-primary), var(--itn-accent)); }
.itn-nw-pill.has-link:hover { transform: translateY(-3px) rotate(-1deg); border-color: var(--itn-primary); color: var(--itn-primary); background: rgba(var(--itn-primary-rgb), .1); }
.itn-nw-pill--xl.has-link:hover { color: #04141C; background: linear-gradient(135deg, var(--itn-accent), var(--itn-primary)); }

/* ---- Gradient stat band ---- */
.itn-nw-band {
  position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 6rem) 0; color: #04141C;
  background: linear-gradient(120deg, var(--itn-primary) 0%, var(--itn-accent) 100%);
}
.itn-nw-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(4,20,28,.35) 1.2px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.itn-nw-band-in { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.itn-nw-band-eyebrow { display: inline-block; margin-bottom: .8rem; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.itn-nw-band h2 { margin: 0 0 .8rem; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.15; color: #04141C; }
.itn-nw-band p { margin: 0; font-size: 1.05rem; color: rgba(4,20,28,.85); }
.itn-nw-band p a { color: inherit; text-decoration: underline; }
.itn-nw-band-btn {
  display: inline-block; margin-top: var(--itn-space-6); padding: .85rem 1.6rem; border-radius: 12px; font-weight: 700; text-decoration: none;
  color: #fff; background: #04141C; transition: transform var(--itn-t), box-shadow var(--itn-t);
}
.itn-nw-band-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(4,20,28,.6); }
.itn-nw-band-stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--itn-space-8); }
.itn-nw-band-stats > div { padding-left: 1.2rem; border-left: 3px solid rgba(4,20,28,.35); }
.itn-nw-band-stats dt { font-family: var(--itn-font-heading); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-size: clamp(2.4rem, 4.4vw, 3.8rem); white-space: nowrap; }
.itn-nw-band-stats dd { margin: .5rem 0 0; font-weight: 600; font-size: .95rem; color: rgba(4,20,28,.8); }

/* ---- FAQ split ---- */
.itn-nw-fs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.itn-nw-fs-side { position: sticky; top: calc(var(--itn-header-h) + 32px); }
.itn-nw-fs-side .itn-section-title, .itn-nw-fs-side .itn-section-desc { text-align: left; margin-left: 0; margin-right: 0; }
.itn-nw-fs-card {
  margin-top: var(--itn-space-8); padding: var(--itn-space-6); border-radius: 20px; display: grid; gap: var(--itn-space-4);
  background: var(--itn-grad-card); border: 1px solid rgba(var(--itn-primary-rgb), .3);
}
.itn-nw-fs-card strong { color: var(--itn-heading); font-size: 1.05rem; }
.itn-nw-fs-list { max-width: none; margin: 0; }

@media (max-width: 960px) {
  .itn-nw-stack, .itn-nw-cl, .itn-nw-fs, .itn-nw-band-in { grid-template-columns: 1fr; }
  .itn-nw-stack-intro, .itn-nw-cl-intro, .itn-nw-fs-side { position: static; }
  .itn-nw-scard { position: relative; top: auto; padding: var(--itn-space-8) var(--itn-space-6) var(--itn-space-8) 4.4rem; min-height: 0; }
  .itn-nw-snum { font-size: 2rem; left: 1.1rem; }
}
@media (max-width: 600px) { .itn-nw-cl-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .itn-nw-scard { position: relative; top: auto; }
  .itn-nw-gcard, .itn-nw-cl-item, .itn-nw-pill { transition: none; }
}

/* ---- Author / expert box ---- */
.itn-nw-author {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 28px; background: var(--itn-grad-card); border: 1px solid rgba(var(--itn-primary-rgb), .28); box-shadow: 0 0 60px -24px rgba(var(--itn-primary-rgb), .35);
}
.itn-nw-author.is-compact { grid-template-columns: 84px minmax(0, 1fr); padding: var(--itn-space-6); border-radius: 20px; gap: var(--itn-space-5); }
.itn-nw-author-pic { width: 180px; height: 180px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 4rem;
  border: 3px solid var(--itn-primary); padding: 4px; background: var(--itn-bg-2); }
.itn-nw-author.is-compact .itn-nw-author-pic { width: 84px; height: 84px; font-size: 2rem; border-width: 2px; }
.itn-nw-author-pic img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.itn-nw-author-label { margin: 0 0 .3rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--itn-primary); }
.itn-nw-author-name { margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.itn-nw-author.is-compact .itn-nw-author-name { font-size: 1.25rem; }
.itn-nw-author-job { margin: .2rem 0 0; color: var(--itn-text-muted); font-weight: 500; }
.itn-nw-author-bio { margin: var(--itn-space-4) 0 0; color: var(--itn-text-2); line-height: 1.8; }
.itn-nw-author.is-compact .itn-nw-author-bio { font-size: .92rem; margin-top: .6rem; }
.itn-nw-author-creds { list-style: none; margin: var(--itn-space-6) 0 0; padding: 0; display: grid; gap: .6rem; }
.itn-nw-author-creds li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 12px; background: rgba(var(--itn-primary-rgb), .07); border: 1px solid var(--itn-border); font-size: .93rem; }
.itn-nw-author-creds li > span:nth-child(2) { flex: 1 1 220px; }
.itn-nw-author-creds a { color: var(--itn-primary); font-weight: 600; text-decoration: none; font-size: .85rem; }
.itn-nw-author-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--itn-space-4); margin-top: var(--itn-space-6); }
.itn-nw-author-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.itn-nw-author-links a { display: inline-block; padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--itn-border); color: var(--itn-text); text-decoration: none; font-size: .87rem; font-weight: 600; transition: border-color var(--itn-t), color var(--itn-t); }
.itn-nw-author-links a:hover { border-color: var(--itn-primary); color: var(--itn-primary); }
@media (max-width: 700px) { .itn-nw-author { grid-template-columns: 1fr; text-align: left; } .itn-nw-author-pic { width: 120px; height: 120px; } }


/* =========================================================
   Footer design: Expert + Proof
   ========================================================= */
.itn-ft--expert { padding-top: clamp(2.5rem, 5vw, 4rem); }
.itn-fx-panel {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 28px; border: 1px solid var(--itn-border-hover);
  background: var(--itn-grad-deep);
  padding: clamp(1.5rem, 3.6vw, 2.75rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.itn-fx-glow {
  position: absolute; z-index: -1; width: 520px; height: 520px; right: -140px; top: -260px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(37,211,102,.22), transparent);
  pointer-events: none;
}
.itn-fx-panel-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; }
.itn-fx-panel-copy { max-width: 52ch; }
.itn-fx-panel-copy h2 { margin: 0 0 .6rem; font-size: clamp(1.55rem, 3.4vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em; }
.itn-fx-panel-copy p { margin: 0; color: var(--itn-text-2); font-size: 1rem; line-height: 1.6; }
.itn-fx-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.itn-fx-proof {
  list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: clamp(1.1rem, 2.4vw, 1.6rem) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.25rem 2rem;
  border-top: 1px solid var(--itn-border-hover);
}
.itn-fx-proof li { display: flex; flex-direction: column; gap: .35rem; }
.itn-fx-proof strong { font-family: var(--itn-font-heading); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1; letter-spacing: -.02em; color: var(--itn-text); font-variant-numeric: tabular-nums; }
.itn-fx-proof span { font-size: .84rem; color: var(--itn-text-muted); line-height: 1.4; }
.itn-fx-main { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(var(--itn-ft-cols, 3), minmax(0, 1fr)); gap: clamp(1.75rem, 3.5vw, 3.25rem); padding-bottom: clamp(2rem, 4vw, 3.25rem); }
.itn-fx-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.itn-fx-brand .itn-logo img { max-height: 44px; width: auto; }
.itn-fx-tag { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--itn-text-2); max-width: 36ch; }
.itn-fx-loc { margin: 0; display: flex; align-items: flex-start; gap: .5rem; font-size: .86rem; line-height: 1.5; color: var(--itn-text-muted); }
.itn-fx-loc svg { flex: none; margin-top: .15rem; color: var(--itn-primary-light); }
.itn-fx-brand .itn-footer-socials { margin-top: .25rem; }
.itn-fx-h { margin: 0 0 1.1rem; font-family: var(--itn-font-heading); font-size: .95rem; font-weight: 600; color: var(--itn-text); }
.itn-fx-col .itn-footer-links { gap: .65rem; }
.itn-fx-col .itn-footer-links a { font-size: .9rem; line-height: 1.4; display: inline-block; transition: color var(--itn-t), transform var(--itn-t); }
.itn-fx-col .itn-footer-links a:hover { color: var(--itn-text); transform: translateX(3px); }
.itn-fx-base { border-top: 1px solid var(--itn-border); padding-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .5rem 1.75rem; padding-right: clamp(0px, 14vw, 230px); }
.itn-fx-base p { margin: 0; font-size: .8rem; color: var(--itn-text-muted); }
.itn-ft--expert .itn-social-btn { width: 40px; height: 40px; border-radius: var(--itn-r-full); }
.itn-ft--expert .itn-social-btn:focus-visible, .itn-fx-col a:focus-visible { outline: 2px solid var(--itn-primary); outline-offset: 3px; }

/* WhatsApp buttons (header, hero, FAQ, call to action, footer) */
.itn-btn-wa { gap: .55rem; }
.itn-btn-wa svg { flex: none; }
.itn-btn-wa--solid { background: #25D366; color: #052e16; border: 1px solid #25D366; box-shadow: 0 8px 24px -10px rgba(37,211,102,.7); }
.itn-btn-wa--solid:hover { background: #3be07b; border-color: #3be07b; color: #052e16; transform: translateY(-1px); }
.itn-btn-wa--outline { background: transparent; color: var(--itn-text); border: 1px solid rgba(37,211,102,.55); }
.itn-btn-wa--outline svg { color: #25D366; }
.itn-btn-wa--outline:hover { background: rgba(37,211,102,.12); border-color: #25D366; color: var(--itn-text); }
.itn-btn-wa:focus-visible { outline: 2px solid #25D366; outline-offset: 3px; }
.itn-btn-row { display: inline-flex; flex-wrap: wrap; gap: .7rem; }
.itn-nw-fs-card .itn-btn + .itn-btn { margin-top: .6rem; }
@media (max-width: 960px) {
  .itn-fx-main { grid-template-columns: 1fr 1fr; }
  .itn-fx-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .itn-fx-panel { border-radius: 22px; }
  .itn-fx-actions { width: 100%; }
  .itn-fx-actions .itn-btn { flex: 1 1 100%; justify-content: center; }
  .itn-fx-proof { grid-template-columns: 1fr 1fr; }
  .itn-fx-main { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
  .itn-fx-base { flex-direction: column; align-items: flex-start; padding-right: 4rem; }
}
@media (max-width: 380px) {
  .itn-fx-main { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .itn-fx-col .itn-footer-links a, .itn-btn-wa { transition: none; }
  .itn-fx-col .itn-footer-links a:hover { transform: none; }
}


/* =========================================================
   Header design: Floating Bar, and mega menus aligned to the bar
   ========================================================= */
@media (min-width: 769px) {
  body.itn-body-hd-floating { --itn-header-h: 96px; }
  .itn-hd--floating, .itn-hd--floating.scrolled { background: transparent !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .itn-hd--floating .itn-nav {
    height: 66px; padding: 0 12px 0 22px; border-radius: 20px; gap: var(--itn-space-6);
    background: var(--itn-glass); border: 1px solid var(--itn-border-hover);
    backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 20px 44px -24px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05);
    transition: height var(--itn-t-slow), box-shadow var(--itn-t-slow);
  }
  .itn-hd--floating.scrolled .itn-nav { height: 60px; background: var(--itn-header-glass); box-shadow: 0 24px 50px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05); }
  .itn-hd--floating .itn-nav-links { gap: .15rem; }
  .itn-hd--floating .itn-nav-links > a, .itn-hd--floating .itn-nav-links > .itn-dropdown > .itn-nav-item { border-radius: 12px; padding: .5rem .85rem; }
  .itn-hd--floating .itn-nav-actions .itn-btn { border-radius: 12px; }
  .itn-hd--floating .itn-dark-toggle { border-radius: 12px; }
}
body.itn-light .itn-hd--floating .itn-nav { box-shadow: 0 16px 36px -22px rgba(15,23,42,.35), inset 0 1px 0 rgba(255,255,255,.7); }

/* Wide mega panels line up with the header bar (centred under it), not with the menu item that opened them. */
@media (min-width: 769px) {
  .itn-nav { position: relative; }
  .itn-dropdown.itn-dd-mega { position: static; }
  .itn-dropdown.itn-dd-mega > .itn-dropdown-menu { top: calc(100% + 10px); left: 50%; }
  .itn-hd--floating .itn-dropdown.itn-dd-mega > .itn-dropdown-menu { top: calc(100% + 12px); }
}

/* Mega menu column headings: the script gives every heading the height of the tallest one, so links start on the same line. */
@media (min-width: 769px) {
  .itn-mega-cols a.itn-mega-head { display: flex !important; align-items: flex-end; }
}

/* ---- Enquiry form (hero + contact) ---- */
.itn-hx-visual--form { display: flex; justify-content: center; }
.itn-enq {
  width: 100%; max-width: 460px; position: relative;
  border-radius: 24px; padding: clamp(1.25rem, 3vw, 1.9rem);
  background: var(--itn-grad-deep); border: 1px solid var(--itn-border-hover);
  box-shadow: 0 40px 100px -40px rgba(var(--itn-primary-rgb),.5);
}
.itn-enq-head { display: flex; gap: .9rem; align-items: center; margin-bottom: 1.1rem; }
.itn-enq-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid rgba(var(--itn-primary-rgb),.6); }
.itn-enq-title { margin: 0; font-weight: 700; font-size: 1.1rem; color: var(--itn-text); line-height: 1.25; }
.itn-enq-text { margin: .2rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--itn-text-2); }
.itn-enq-form { display: grid; gap: .8rem; }
.itn-enq-field { display: grid; gap: .3rem; }
.itn-enq-field > span { font-size: .78rem; font-weight: 600; color: var(--itn-text-2); }
.itn-enq-field input, .itn-enq-field textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--itn-text);
  background: rgba(255,255,255,.05); border: 1px solid var(--itn-border); border-radius: 12px; padding: .72rem .9rem;
  transition: border-color var(--itn-t), box-shadow var(--itn-t);
}
html[data-theme="light"] .itn-enq-field input, html[data-theme="light"] .itn-enq-field textarea { background: rgba(0,0,0,.03); }
.itn-enq-field textarea { resize: vertical; min-height: 96px; }
.itn-enq-field input:focus, .itn-enq-field textarea:focus { outline: none; border-color: var(--itn-primary); box-shadow: 0 0 0 3px rgba(var(--itn-primary-rgb),.22); }
.itn-enq-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.itn-enq-submit { width: 100%; justify-content: center; margin-top: .2rem; }
.itn-enq-msg { margin: 0; font-size: .86rem; line-height: 1.5; }
.itn-enq-or { display: flex; align-items: center; gap: .8rem; margin: 1rem 0 .8rem; font-size: .75rem; color: var(--itn-text-3, var(--itn-text-2)); text-transform: uppercase; letter-spacing: .08em; }
.itn-enq-or::before, .itn-enq-or::after { content: ""; flex: 1; height: 1px; background: var(--itn-border); }
.itn-enq > .itn-btn-wa { width: 100%; justify-content: center; }

/* ---- Inline links inside copy: quiet underline instead of a bold button-like link ---- */
.itn-inline-link, .itn-richtext a:not(.itn-btn), .itn-prose a:not(.itn-btn) {
  color: var(--itn-text); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(var(--itn-primary-rgb),.7);
}
.itn-inline-link:hover, .itn-richtext a:not(.itn-btn):hover, .itn-prose a:not(.itn-btn):hover { color: var(--itn-primary); text-decoration-color: currentColor; }


/* =========================================
   1.3.29 — DARK-ONLY SITE, MODERN BACKDROP
   The site is always dark; only blog pages are light (body.itn-light).
   Everything below is pure CSS and applies to dark pages only.
   ========================================= */
body.itn-dark { background: #070913; transition: none; }
body.itn-dark::before, body.itn-dark::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
/* soft aurora glows, drifting slowly */
body.itn-dark::before {
  background:
    radial-gradient(42vw 38vw at 12% 8%,  rgba(10,180,236,.24), transparent 70%),
    radial-gradient(38vw 34vw at 92% 22%, rgba(45,212,191,.17), transparent 70%),
    radial-gradient(46vw 40vw at 55% 108%, rgba(99,102,241,.20), transparent 70%);
  animation: itn-aurora 28s ease-in-out infinite alternate;
  will-change: transform;
}
/* fine grid that fades out toward the bottom, plus a whisper of grain */
body.itn-dark::after {
  background-image:
    linear-gradient(rgba(148,200,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,200,255,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 85%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 85%);
  opacity: .9;
}
@keyframes itn-aurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-2.5%,2%,0) scale(1.08); }
}
/* page content sits above the backdrop */
body.itn-dark > *:not(script):not(style) { position: relative; z-index: 1; }
body.itn-dark .itn-header, body.itn-dark header { z-index: 50; }
body.itn-dark .itn-wa-float, body.itn-dark [class*="cookie"] { z-index: 60; }

/* glass cards: translucent, gradient edge, pointer spotlight */
body.itn-dark :is(.itn-card,.itn-fit-card,.itn-feature-card,.itn-bento-card,.itn-cs-card,.itn-pc-card,.itn-mini-card,.itn-gc-card,.itn-sk-card,.itn-nx-card,.itn-faq-item) {
  position: relative;
  background:
    radial-gradient(320px circle at var(--mx, -400px) var(--my, -400px), rgba(var(--itn-primary-rgb),.12), transparent 70%),
    linear-gradient(160deg, rgba(26,30,56,.72), rgba(15,17,32,.62));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
body.itn-dark :is(.itn-card,.itn-fit-card,.itn-feature-card,.itn-bento-card,.itn-cs-card,.itn-pc-card,.itn-gc-card,.itn-nx-card):hover {
  border-color: rgba(var(--itn-primary-rgb),.4);
}
@media (prefers-reduced-motion: reduce) { body.itn-dark::before { animation: none; } }
@media (max-width: 720px) {
  body.itn-dark::before { animation: none; }
  body.itn-dark :is(.itn-card,.itn-fit-card,.itn-feature-card,.itn-bento-card,.itn-cs-card,.itn-pc-card,.itn-mini-card,.itn-gc-card,.itn-sk-card,.itn-nx-card,.itn-faq-item) { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Blog pages are light: keep the readable light palette (see body.itn-light above) */
body.itn-blog-light { background: #fff; }

/* alternate bands become see-through tints so the backdrop shows across the whole page */
body.itn-dark [style*="background:var(--itn-bg-2)"] {
  background: linear-gradient(180deg, rgba(15,17,32,.55), rgba(15,17,32,.35)) !important;
  border-color: rgba(255,255,255,.06) !important;
}

/* Single posts are light, but the header and footer stay dark */
body.itn-blog-light .itn-header,
body.itn-blog-light .itn-footer {
  --itn-bg: #0A0B14; --itn-bg-2: #0F1120; --itn-bg-card: #13162A; --itn-bg-elevated: #1A1E38;
  --itn-border: rgba(255,255,255,.07); --itn-border-hover: rgba(255,255,255,.14);
  --itn-text: #F1F5F9; --itn-text-2: #AAB6C8; --itn-text-muted: #8B98AE; --itn-heading: #FFFFFF;
  --itn-primary-light: #5CCDF5; --itn-accent: #2DD4BF; --itn-secondary: #10B981;
  --itn-primary-glow: rgba(var(--itn-primary-rgb),.18);
  --itn-header-glass: rgba(10,11,20,.92); --itn-glass: rgba(13,17,32,.8);
  --itn-tint: rgba(255,255,255,.04); --itn-ink: #05070F; --itn-wordmark: rgba(255,255,255,.14);
  --itn-grad-card: linear-gradient(160deg,#16193a 0%,#13162A 100%);
  --itn-grad-cta: linear-gradient(135deg,#131840 0%,#0c0f25 50%,#121630 100%);
  --itn-grad-deep: linear-gradient(135deg,#0b2a38 0%,#0a1420 62%);
  --itn-shadow-sm: 0 2px 8px rgba(0,0,0,.25); --itn-shadow-md: 0 8px 32px rgba(0,0,0,.35);
  color-scheme: dark; color: var(--itn-text);
}
body.itn-blog-light .itn-header .itn-logo-on-dark,  body.itn-blog-light .itn-footer .itn-logo-on-dark  { display: block; }
body.itn-blog-light .itn-header .itn-logo-on-light, body.itn-blog-light .itn-footer .itn-logo-on-light { display: none; }
body.itn-blog-light .itn-hd--floating .itn-nav { box-shadow: none; }
body.itn-blog-light .itn-header .itn-btn-primary,
body.itn-blog-light .itn-footer .itn-btn-primary { background: var(--itn-primary); color: var(--itn-on-primary); box-shadow: 0 4px 20px rgba(var(--itn-primary-rgb),.4); }
body.itn-blog-light .itn-header .itn-btn-primary:hover,
body.itn-blog-light .itn-footer .itn-btn-primary:hover { background: var(--itn-primary-light); color: var(--itn-on-primary); }
body.itn-blog-light .itn-footer { background: #0A0B14; }
body.itn-blog-light .itn-header .itn-nav,
body.itn-blog-light .itn-header.scrolled { background: rgba(10,11,20,.96); }


/* =========================================
   1.3.32 — PRICING PLANS SECTION
   ========================================= */
.itn-price-grid { display: grid; gap: 22px; align-items: stretch; grid-template-columns: repeat(4, minmax(0,1fr)); }
.itn-price-n3 { grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 1120px; margin-inline: auto; }
.itn-price-n2 { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 820px; margin-inline: auto; }
.itn-price-n1 { grid-template-columns: minmax(0,420px); justify-content: center; }
@media (max-width: 1180px) { .itn-price-grid, .itn-price-n3 { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 860px; margin-inline: auto; } }
@media (max-width: 680px)  { .itn-price-grid, .itn-price-n3, .itn-price-n2 { grid-template-columns: 1fr; max-width: 460px; } }

.itn-price-card {
  position: relative; display: flex; flex-direction: column; padding: 30px 26px 26px;
  border-radius: 22px; border: 1px solid var(--itn-border);
  background:
    radial-gradient(360px circle at var(--mx, -400px) var(--my, -400px), rgba(var(--itn-primary-rgb),.14), transparent 70%),
    linear-gradient(165deg, rgba(26,30,56,.78), rgba(13,15,30,.66));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -24px rgba(0,0,0,.7);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.itn-price-card:hover { transform: translateY(-5px); border-color: rgba(var(--itn-primary-rgb),.4); }
.itn-price-card.is-hot {
  border-color: transparent;
  background:
    radial-gradient(360px circle at var(--mx, -400px) var(--my, -400px), rgba(var(--itn-primary-rgb),.2), transparent 70%),
    linear-gradient(165deg, rgba(20,38,66,.92), rgba(12,18,38,.88)) padding-box,
    linear-gradient(140deg, #0AB4EC, #2DD4BF 55%, #6366F1) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 0 0 1px rgba(10,180,236,.15), 0 26px 60px -22px rgba(10,180,236,.45);
}
.itn-price-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(135deg, #0AB4EC, #2DD4BF); color: #04141C;
  box-shadow: 0 6px 18px -6px rgba(10,180,236,.7);
}
.itn-price-name { font-size: 1.3rem; text-align: center; margin: 4px 0 6px; }
.itn-price-tag  { font-size: .88rem; text-align: center; color: var(--itn-text-2); line-height: 1.5; min-height: 2.6em; margin: 0 0 18px; }
.itn-price-amount {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 4px;
  padding: 16px 0 18px; margin-bottom: 18px; min-height: 96px; align-content: center;
  border-top: 1px solid var(--itn-border); border-bottom: 1px solid var(--itn-border);
}
.itn-price-from { flex-basis: 100%; text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--itn-text-muted); }
.itn-price-cur  { font-size: 1.3rem; font-weight: 700; color: var(--itn-text-2); align-self: flex-start; margin-top: .55rem; }
.itn-price-num  { font-family: var(--itn-font-heading); font-size: 3.1rem; font-weight: 800; line-height: 1; color: var(--itn-heading); letter-spacing: -.02em; }
.itn-price-cents{ font-size: 1.15rem; font-weight: 700; color: var(--itn-text-2); align-self: flex-start; margin-top: .55rem; }
.itn-price-per  { flex-basis: 100%; text-align: center; font-size: .85rem; color: var(--itn-primary-light); margin-top: 4px; }
.itn-price-custom { font-family: var(--itn-font-heading); font-size: 1.9rem; font-weight: 800; line-height: 1.15; text-align: center;
  background: linear-gradient(135deg, var(--itn-primary-light), var(--itn-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.itn-price-btn { width: 100%; justify-content: center; margin-bottom: 22px; }
.itn-price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.itn-price-list li { position: relative; padding-left: 28px; font-size: .92rem; line-height: 1.45; color: var(--itn-text); }
.itn-price-list li::before {
  content: ""; position: absolute; left: 0; top: .1em; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(var(--itn-primary-rgb),.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232DD4BF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.itn-price-more { margin-top: 11px; }
.itn-price-more > .itn-price-list { margin-top: 11px; }
.itn-price-more summary { cursor: pointer; list-style: none; font-size: .85rem; font-weight: 600; color: var(--itn-primary-light); padding: 8px 0 2px; }
.itn-price-more summary::-webkit-details-marker { display: none; }
.itn-price-more summary:hover { text-decoration: underline; }
.itn-price-more .itn-pm-close { display: none; }
.itn-price-more[open] .itn-pm-open { display: none; }
.itn-price-more[open] .itn-pm-close { display: inline; }
.itn-price-note { max-width: 760px; margin: 30px auto 0; text-align: center; font-size: .92rem; color: var(--itn-text-2); }
body.itn-light .itn-price-card { background: #fff; box-shadow: 0 10px 30px -16px rgba(15,23,42,.25); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.itn-light .itn-price-card.is-hot { background: #fff padding-box, linear-gradient(140deg,#0AB4EC,#2DD4BF 55%,#6366F1) border-box; }
@media (prefers-reduced-motion: reduce) { .itn-price-card, .itn-price-card:hover { transition: none; transform: none; } }


/* compact price strip */
.itn-pstrip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
@media (max-width: 760px) { .itn-pstrip { grid-template-columns: 1fr; } }
.itn-pstrip-tile { position: relative; padding: 24px 22px; border-radius: 18px; border: 1px solid var(--itn-border); text-align: center;
  background: linear-gradient(165deg, rgba(26,30,56,.7), rgba(13,15,30,.6)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: transform .2s ease, border-color .2s ease; }
.itn-pstrip-tile:hover { transform: translateY(-3px); border-color: rgba(var(--itn-primary-rgb),.4); }
.itn-pstrip-tile.is-hot { border: 1.5px solid transparent;
  background: linear-gradient(165deg, rgba(20,38,66,.92), rgba(12,18,38,.88)) padding-box, linear-gradient(140deg,#0AB4EC,#2DD4BF 55%,#6366F1) border-box;
  box-shadow: 0 20px 46px -22px rgba(10,180,236,.45); }
.itn-pstrip-name { font-family: var(--itn-font-heading); font-weight: 700; font-size: 1.05rem; color: var(--itn-heading); margin: 0 0 8px; }
.itn-pstrip-price { margin: 0 0 12px; color: var(--itn-text-2); }
.itn-pstrip-price strong { font-family: var(--itn-font-heading); font-size: 2.2rem; font-weight: 800; color: var(--itn-heading); letter-spacing: -.02em; }
.itn-pstrip-from { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--itn-text-muted); }
.itn-pstrip-cur { font-weight: 700; }
.itn-pstrip-per { font-size: .8rem; color: var(--itn-primary-light); }
.itn-pstrip-line { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--itn-text-2); }
.itn-pstrip-cta { text-align: center; margin: 26px 0 0; }
body.itn-light .itn-pstrip-tile { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* 1.3.33 — less empty space between the header and the first line of a page */
.itn-hero.itn-hx, .itn-hero.itn-pl, .itn-sx-hero { padding-top: calc(var(--itn-header-h) + var(--itn-space-4)); }
.itn-hero.itn-hx, .itn-hero.itn-pl { padding-bottom: var(--itn-space-16); }
.itn-hero.itn-hx .itn-breadcrumb, .itn-hero.itn-pl .itn-breadcrumb { margin-bottom: var(--itn-space-4); }
@media (max-width: 760px) {
  .itn-hero.itn-hx, .itn-hero.itn-pl, .itn-sx-hero { padding-top: calc(var(--itn-header-h) + var(--itn-space-2)); }
}
.itn-enq-field select {
  width: 100%; font: inherit; font-size: .95rem; color: var(--itn-text); cursor: pointer;
  background-color: rgba(255,255,255,.05); border: 1px solid var(--itn-border); border-radius: 12px; padding: .72rem 2.2rem .72rem .9rem;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238B98AE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
}
.itn-enq-field select option { background: #13162A; color: #F1F5F9; }
.itn-enq-field select:focus { outline: none; border-color: var(--itn-primary); box-shadow: 0 0 0 3px rgba(var(--itn-primary-rgb),.22); }

/* 1.3.33b — every hero: no full-screen centring, small gap under the header */
.itn-hero { min-height: auto; padding-top: calc(var(--itn-header-h) + var(--itn-space-4)) !important; padding-bottom: var(--itn-space-16); }
body.admin-bar .itn-hero { padding-top: calc(var(--itn-header-h) + var(--itn-adminbar-h) + var(--itn-space-4)) !important; }
@media (max-width: 760px) { .itn-hero { padding-top: calc(var(--itn-header-h) + var(--itn-space-2)) !important; } }

/* =========================================
   Editor content styles (1.3.39) — used on posts and pages
   ========================================= */
.itn-post-content .itn-lead { font-size: 1.2rem; line-height: 1.7; font-weight: 500; }
.itn-post-content .itn-mark { background: rgba(250,204,21,.35); color: inherit; padding: 0 3px; border-radius: 3px; }
.itn-post-content .itn-takeaway, .itn-post-content .itn-tip, .itn-post-content .itn-warn {
  margin: 1.6em 0; padding: 16px 20px; border-radius: 12px; border: 1px solid;
}
.itn-post-content .itn-takeaway { background: #ECFEFF; border-color: #A5F3FC; color: #0F172A; }
.itn-post-content .itn-tip      { background: #F0FDF4; border-color: #BBF7D0; color: #0F172A; }
.itn-post-content .itn-warn     { background: #FFFBEB; border-color: #FDE68A; color: #0F172A; }
.itn-post-content .itn-takeaway > :last-child, .itn-post-content .itn-tip > :last-child, .itn-post-content .itn-warn > :last-child { margin-bottom: 0; }

/* =========================================
   Table of contents placement (1.3.44)
   Desktop: in the sidebar. Tablet and phone: just below the featured image.
   ========================================= */
.itn-side-toc-card .itn-side-toc h2 { font-size: 1.05rem; margin: 0 0 12px; }
.itn-side-toc-card .itn-side-toc { max-height: 52vh; overflow-y: auto; scrollbar-width: thin; }
@media (min-width: 1025px) {
  .itn-post-wrap .itn-toc--inline { display: none; }
  .itn-post-wrap > .itn-post-sidebar { max-height: calc(100vh - var(--itn-header-h) - 48px); overflow-y: auto; scrollbar-width: thin; }
}
@media (max-width: 1024px) {
  .itn-side-toc-card { display: none; }
}

/* =========================================
   Single post hero — modern refresh (1.3.45)
   ========================================= */
.itn-ss-hero {
  background:
    radial-gradient(60% 80% at 8% 0%, rgba(var(--itn-primary-rgb),.16), transparent 62%),
    radial-gradient(50% 70% at 100% 100%, rgba(var(--itn-secondary-rgb, var(--itn-primary-rgb)),.12), transparent 60%),
    var(--itn-bg);
  border-bottom: 1px solid var(--itn-border);
  overflow: hidden;
}
.itn-ss-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(var(--itn-primary-rgb),.22) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 55%); mask-image: linear-gradient(115deg, #000 0%, transparent 55%);
}
.itn-ss-hero > .itn-container { position: relative; }
.itn-ss-grid { gap: clamp(2rem, 5vw, 4.5rem); }
.itn-ss-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--itn-space-5); }
.itn-ss-kicker .itn-blog-cat { margin: 0; }
.itn-ss-read { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--itn-text-2); }
.itn-ss-read::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--itn-primary); }
.itn-ss-title { font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.12; letter-spacing: -.03em; margin-bottom: var(--itn-space-5); }
.itn-ss-lede { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.7; color: var(--itn-text-2); max-width: 56ch; margin: 0 0 var(--itn-space-6); }
.itn-ss-meta { justify-content: flex-start; gap: 14px 22px; padding-top: var(--itn-space-5); border-top: 1px solid var(--itn-border); }
.itn-ss-author { padding: 6px 18px 6px 6px; border-radius: 999px; background: var(--itn-bg-card); border: 1px solid var(--itn-border); box-shadow: 0 6px 20px -12px rgba(15,23,42,.25); transition: border-color var(--itn-t), transform var(--itn-t); }
.itn-ss-author:hover { border-color: rgba(var(--itn-primary-rgb),.5); transform: translateY(-1px); }
.itn-ss-avatar { width: 44px; height: 44px; border-width: 2px; }
.itn-ss-author strong { text-transform: none; font-size: .95rem; letter-spacing: 0; }
.itn-ss-author small { font-size: .78rem; margin-top: 0; }
.itn-ss-dates { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.itn-ss-chip { display: inline-flex; align-items: center; gap: 7px; padding: .4rem .8rem; border-radius: 999px; font-size: .8rem; color: var(--itn-text-2); background: rgba(var(--itn-primary-rgb),.08); border: 1px solid rgba(var(--itn-primary-rgb),.18); }
.itn-ss-chip svg { color: var(--itn-primary); flex: none; }
.itn-ss-chip time { color: var(--itn-text); font-weight: 600; }
.itn-ss-media { position: relative; border: 0; border-radius: 28px; overflow: visible; box-shadow: none; }
.itn-ss-media::before {
  content: ""; position: absolute; inset: 14px -14px -14px 14px; border-radius: 28px; z-index: 0;
  background: linear-gradient(135deg, rgba(var(--itn-primary-rgb),.35), rgba(var(--itn-primary-rgb),.05));
  border: 1px solid rgba(var(--itn-primary-rgb),.25);
}
.itn-ss-media img { position: relative; z-index: 1; border-radius: 28px; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 40px 80px -36px rgba(15,23,42,.45); }
@media (max-width: 1024px) {
  .itn-ss-media::before { inset: 10px -8px -10px 8px; }
  .itn-ss-meta { flex-direction: row; align-items: center; }
}
@media (max-width: 640px) {
  .itn-ss-title { font-size: 1.9rem; }
  .itn-ss-meta { flex-direction: column; align-items: flex-start; }
  .itn-ss-media::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .itn-ss-author { transition: none; } }

/* Post hero: sits right under the header, no empty band, bigger picture (1.3.46) */
.itn-page-top.has-hero > .itn-ss-hero {
  padding-top: calc(var(--itn-header-h) + var(--itn-adminbar-h, 0px) + clamp(1.25rem, 3vw, 2rem));
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
}
.itn-ss-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; }
.itn-ss-grid.is-text { grid-template-columns: minmax(0, 860px); }
.itn-ss-title { font-size: clamp(2rem, 3.9vw, 3.15rem); }
.itn-ss-media img { aspect-ratio: 16 / 10.4; }
.itn-ss-meta { padding-top: var(--itn-space-4); }
@media (max-width: 1024px) {
  .itn-ss-grid { grid-template-columns: 1fr; }
  .itn-page-top.has-hero > .itn-ss-hero { padding-top: calc(var(--itn-header-h) + var(--itn-adminbar-h, 0px) + 1rem); }
}

/* Post hero, round 3 (1.3.47): wider text, smaller picture, one meta row, tighter top */
.itn-page-top.has-hero > .itn-ss-hero {
  padding-top: calc(var(--itn-header-h) + var(--itn-adminbar-h, 0px) + 6px);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.itn-ss-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, .85fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.itn-ss-grid.is-text { grid-template-columns: minmax(0, 900px); }
.itn-ss-title { margin-top: 0; font-size: clamp(2rem, 3.6vw, 3rem); }
.itn-ss-media::before { display: none; }
.itn-ss-media { border-radius: 20px; }
.itn-ss-media img { border-radius: 20px; aspect-ratio: 16 / 11; box-shadow: 0 24px 48px -28px rgba(15,23,42,.4); }
.itn-ss-meta { align-items: center; flex-wrap: wrap; gap: 12px 14px; }
.itn-ss-author { border-radius: 12px; padding: 6px 16px 6px 6px; }
.itn-ss-author .itn-ss-avatar { border-radius: 50%; }
.itn-ss-dates { align-items: center; }
.itn-ss-dates .itn-blog-cat { margin: 0; }
@media (max-width: 1024px) {
  .itn-ss-grid { grid-template-columns: 1fr; }
  .itn-page-top.has-hero > .itn-ss-hero { padding-top: calc(var(--itn-header-h) + var(--itn-adminbar-h, 0px) + 12px); }
}
@media (max-width: 640px) {
  .itn-ss-meta { flex-direction: row; align-items: flex-start; }
  .itn-ss-dates { width: 100%; }
}

/* Post hero facts: Category / Updated / Read, stacked, values aligned (1.3.48) */
.itn-ss-facts { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 3px; margin: 0; align-items: baseline; }
.itn-ss-facts > div { display: contents; }
.itn-ss-facts dt { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--itn-text-muted); }
.itn-ss-facts dd { margin: 0; font-size: .86rem; font-weight: 600; color: var(--itn-heading); }
.itn-ss-facts dd a { color: var(--itn-primary); text-decoration: none; }
.itn-ss-facts dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.itn-ss-facts dd time { font-weight: 600; }
.itn-ss-meta { gap: 14px 24px; align-items: center; }
@media (max-width: 640px) { .itn-ss-meta { flex-direction: column; align-items: flex-start; } .itn-ss-facts { width: 100%; } }

/* Post hero: the facts block sits at the right end of the row, beside the picture (1.3.49) */
.itn-ss-meta { justify-content: space-between; }
.itn-ss-facts { margin-left: auto; }
@media (max-width: 640px) { .itn-ss-meta { justify-content: flex-start; } .itn-ss-facts { margin-left: 0; } }

/* Post hero: facts values right-aligned so their right edges line up (1.3.50) */
.itn-ss-facts dd { text-align: right; }
@media (max-width: 640px) { .itn-ss-facts dd { text-align: left; } }

/* Post hero facts: each line ("Category: SEO") is flush right, no gap on the left (1.3.51) */
.itn-ss-facts { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.itn-ss-facts > div { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; }
.itn-ss-facts dt, .itn-ss-facts dd { text-align: right; }
@media (max-width: 640px) { .itn-ss-facts { align-items: flex-start; } .itn-ss-facts > div { justify-content: flex-start; } .itn-ss-facts dt, .itn-ss-facts dd { text-align: left; } }