<!-- start Simple Custom CSS and JS -->
<style type="text/css">
/*
 * dwo.cz - global CSS
 * Slouceno z puvodnich Custom CSS snippetu 1659, 1627, 1111, 1036, 872, 413, 376 a 345.
 * Neobsahuje WooCommerce specificka pravidla; ta jsou v dwo-woocommerce.css.
 */


/* ==========================================================================
   Sales banner / square promo (source 1659.css)
   ========================================================================== */
.dwo-sales-banner {
  aspect-ratio: 1 / 1;
  width: 100%;
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dwo-sales-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(16px, 5cqw, 56px);
  box-sizing: border-box;
}
.dwo-sales-logo {
  width: clamp(130px, 18cqw, 220px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .95;
  margin-bottom: clamp(10px, 2.5cqw, 28px);
}
.dwo-inner {
  width: min(680px, 90%);
}
.dwo-sales-banner h2 {
  margin: 0 0 0.4em;
  color: rgba(255,255,255,0.97);
  font-size: clamp(1.8rem, 6cqw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 900;
  text-align: center;
}
.motto {
  margin: 0 0 clamp(16px, 3.5cqw, 40px);
  color: rgba(255,255,255,0.78);
  font-size: clamp(0.75rem, 1.2cqw, 1rem);
  line-height: 1.5;
  font-weight: 500;
  white-space: nowrap;
}
.accent, .h2-accent { color: #f5c542; }
.dwo-sales-logos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.dwo-sales-logos span {
  color: rgba(255,255,255,0.9);
  font-size: clamp(1rem, 1.9cqw, 1.4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* ==========================================================================
   Global layout container and sidebar (source 1627.css)
   ========================================================================== */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0px 0px 0px 30px;
}

.et_right_sidebar #sidebar {
    padding-left: 20px;
    padding-right: 40px;
}

/* ==========================================================================
   Typography, buttons, icons, hero, cards and content components (source 1111.css)
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

@font-face{
  font-family:'Inter';
  src:url('/wp-content/uploads/fonts/inter/Inter-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --et-body-font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
                 'Segoe UI Emoji', 'Segoe UI Symbol';
  --et-header-font:var(--et-body-font);
}


/* ====== ZÁKLADNÍ TEXT ====== */
body {
  font-family: var(--et-body-font) !important;
  font-size: 16px;         /* základní velikost textu */
  line-height: 1.6;        /* řádkování */
  color: #111827;          /* tmavě šedý text, ne čistě černý */
  background-color: #fff;  /* čisté pozadí */
}

/* ====== NADPISY ====== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--et-header-font) !important;
  font-weight: 700;       /* tučné */
  line-height: 1.25;      /* kompaktnější než u běžného textu */
  color: #11295a;         /* tmavě modrá */
  margin-top: 0;
  margin-bottom: 0.6em;
}

h1 {
  font-size: 55px;
  font-weight: 800;   /* ExtraBold pro hlavní claim */
  line-height: 1.15;
  letter-spacing: -2; 
}

h2 {
  font-size: 32px;
  font-weight: 700;   /* Bold – druhá úroveň */
  line-height: 1.3;
}

h3 {
  font-size: 24px;
  font-weight: 600;   /* SemiBold – opticky slabší než H2 */
  line-height: 1.35;
}

h4 {
  font-size: 20px;
  font-weight: 600;   /* SemiBold, menší podnadpis */
}

h5 {
  font-size: 18px;
  font-weight: 500;   /* Medium */
}

h6 {
  font-size: 16px;
  font-weight: 500;   /* Medium, skoro jako body text */
}

/* Zarovnání nadpisů */
/* 1) řádky v H1–H3 jako bloky */
h1 span, h2 span, h3 span {
  display: inline-block;
  width: 100%;
}

/* 2) zarovnání podle třídy */
h1 .left,  h2 .left,  h3 .left  { text-align: left; }
h1 .center,h2 .center,h3 .center{ text-align: center; }
h1 .right, h2 .right, h3 .right { text-align: right; }

/* 3) žluté zvýraznění jen když je třída .highlight */
h1 span.highlight, h2 span.highlight, h3 span.highlight {
  color: #ffcc00;
  font-weight: 800;
}

/* ====== ODSTAVCE ====== */
p {
  margin-bottom: 1.2em;
  color: #374151;   /* světlejší šedá pro lepší čitelnost */
}

/* ====== TLAČÍTKA ====== */
.et_pb_button, .btn, button, input[type="submit"] {
  font-family: inherit;
  font-weight: 600;
  border-radius: 12px;
  padding: 12px 18px;
  background: #1d4ed8;  /* základní modrá (varianta 1 z ukázky) */
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.et_pb_button:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover {
  background: #153ea8;   /* tmavší modrá na hover */
}

/* Outline varianta tlačítka */
.btn.outline {
  background: transparent;
  color: #1d4ed8;
  border: 2px solid #1d4ed8;
}

.btn.outline:hover {
  background: #1d4ed8;
  color: #fff;
}

/* ====== DOPLŇKOVÉ TEXTY ====== */
.muted {
  color: #6b7280;  /* šedá pro doplňkový text */
  font-size: 14px;
}


/* ====== IKONKY ========= */
.et-pb-icon {
  font-family: 'ETmodules' !important;
  font-size: 24px;        /* cca o 20 % větší než text */
  line-height: 1;
  margin-right: 8px;
  color: #ffcc00;
  vertical-align: middle;  /* aby se pěkně srovnala s textem */
}

/* obal pro kontakt */
.contact {
  font-family: var(--et-body-font);
  font-size: 24px;
  font-weight: 600;   /* SemiBold – opticky slabší než H2 */
  line-height: 1.35;
  color: #11295a;
  margin: 0.3em 0;
  display: flex;           /* ikona + text v jedné řádce */
  align-items: center;     /* vertikální zarovnání */
}

.contact a {
  color: inherit;          /* tel číslo má stejnou barvu jako text */
  text-decoration: none;   /* bez podtržení */
}

.contact a:hover {
  text-decoration: underline;
}

/* SUBTITLE pod H1 */

.subtitle {
  font-size: 20px;
  line-height: 1.6;
  color: #374151;
  font-weight: 400;

}
.subtitle span {
  /* color: #ffcc00; */
  font-weight: 700;
}

.subtitle .white {
  color: #eee;	
}

.target-audience {
  display: block;
  font-size: inherit;      /* 16px (z body) */
  line-height: 1.6;        /* jako body */
  color: #374151;          /* jako p */
  font-weight: 500;
  margin: 0 0 0.8em 0;     /* jemné odsazení nad .subtitle */
  padding-left: 12px;      /* místo pro border highlight */
  border-left: 2px solid #ffcc00; /* vizuální orientační akcent */
}

/* Volitelně – varianta na tmavém/kontrastním pozadí (hero overlay apod.) */
.on-dark .target-audience {
  color: #eee;
  border-left-color: #ffcc00;
}


.service-list {
  list-style: disc;    /* nebo circle, nebo none pokud chceš vlastní ikonky */
  margin-left: 1.2em;  /* odsazení od textu */
  padding: 0;
  color: #334155;
}

.service-list li {
  margin-bottom: 0.6em;
}


/* Krokové označení pro target-audience s číslem vlevo od pruhu */
.target-audience[class*="step-"] {
  position: relative;
  /* padding-left: 8px; */       /* volitelny posun textu za pruh */
  border-left: 2px solid #ffcc00;  /* zůstává tvůj pruh */
}

.target-audience[class*="step-"]::before {
  content: "";                  /* číslo dodáme níže */
  position: absolute;
  left: -22px;                  /* číslo vlevo od pruhu */
  top: -5px;
  font-weight: 500;
  color: #ffcc00;
  font-size: 24px;
  line-height: 1.6;
  filter: drop-shadow(0 0 0px rgba(0, 0, 0, 0.5));
}

/* Individuální číslování */
.target-audience.step-1::before { content: "1"; }
.target-audience.step-2::before { content: "2"; }
.target-audience.step-3::before { content: "3"; }
.target-audience.step-4::before { content: "4"; }


/* Základní styl pro všechny ikony */
.icon {
  position: absolute;
  margin: 20px 0px 0px 0px;
  width: 42px;
  height: 42px;
  display: inline-block;
  stroke: currentColor;   /* barvu zdědí z textu/parenta */
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Varianty velikostí (volitelně) */
.icon-sm { width: 20px; height: 20px; }
.icon-lg { width: 36px; height: 36px; }
.icon-xl { width: 48px; height: 48px; }

/* Doporučené barevné použití */
.text-primary { color: #11295a; }   /* tvoje tmavá modrá */

.text-accent  {
 color: #ffcc00;
 stroke: currentColor;              /* vykreslení kontury */
 filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1.0))
		 drop-shadow(0 0 1px rgba(0, 0, 0, 0.8));
}
  /* žlutý akcent */

.text-slate   { color: #334155; }


/* ===========================
   HERO VIDEO – GLOBAL STYL
   =========================== */

.hero-video{
  position:relative;
  min-height:64vh;           /* výška hero sekce */
  display:flex;
  align-items:center;        /* vertikální střed textů */
  justify-content:center;    /* horizontální střed */
  text-align:center;
  padding-top:8vh;           /* odsazení od horního menu */
  padding-bottom:8vh;
  overflow:hidden;
}

/* --- VIDEO BACKGROUND OVLÁDÁNÍ --- */
/* Divi background video kontejnery */
.hero-video .et_pb_section_video_bg,
.hero-video .et_pb_section_video_bg video,
.hero-video video{
  position:absolute;
  inset:0;                   /* nahoře, vlevo, vpravo, dole 0 */
  width:100%;
  height:100%;
}

/* Video: vždy přesně na střed, ořez rovnoměrně zeshora & zespoda */
.hero-video .et_pb_section_video_bg video,
.hero-video video{
  object-fit:cover !important;      /* žádné pruhy, vždy vyplní */
  object-position:50% 50% !important;/* přesný střed, žádné posuny */
  transform:scale(1.08);            /* jemný overscale – luxusní efekt */
  transform-origin:50% 50%;
  z-index:0;
}

/* --- TMAVÝ OVERLAY PRO ČITELNOST TEXTU --- */
.hero-video::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.25) 0%,
      rgba(0,0,0,.35) 60%,
      rgba(0,0,0,.55) 100%
    );
  pointer-events:none;
  z-index:1;
}

/* Textový obsah (moduly) nad overlayem/videem */
.hero-video .et_pb_text{
  position:relative;
  z-index:2;
}

/* ===========================
   HERO TEXTY – H1 + MOTTO
   =========================== */

.hero-title{
  font-weight:800;
  font-size:clamp(32px,4vw,56px);
  margin:0 0 0.45em;
  color:#fff;
  text-wrap:balance;
  text-shadow:0 4px 12px rgba(0,0,0,0.45);
  display:inline-block;   /* celý H1 lze zarovnat na střed */
  text-align:left;        /* základ je vlevo */
  line-height:1.2;
}

.hero-title .accent{
  color:#FFC400;  /* firemní žlutá */
  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 2px 8px rgba(0,0,0,.35);
}



/* Prvky s .center zarovnáme opticky doprava */
.hero-title .right{
  display:inline-block;
  text-align:right;
  width:100%;             /* roztáhne text přes šířku H1 */
}

.motto{
  font-size:clamp(18px,2vw,22px);
  font-weight:600;
  color:#fff;
  /*margin:-.2em 0 0;*/
  margin: 2em 0 0;	
  opacity:.95;
  text-shadow:0 3px 10px rgba(0,0,0,.35);
  text-align: center;
}

.motto .accent{
  color:#FFC400;
}

/* ===========================
   MOBILNÍ ÚPRAVY
   =========================== */
@media (max-width:980px){
  .hero-video{
    min-height:60vh;
    padding-top:12vh;
  }
  .hero-title{ font-size:clamp(26px,6vw,36px); }
  .motto{ font-size:clamp(15px,4vw,18px); }
}

/* Boxík */
.boxik {
  background: #ffffff;
  border-radius: 10px;
  border-width: 1px;
  border-color: rgba(0,0,0,0.08);
  border-style: solid;
  overflow: hidden;
  /* padding: 24px;*/
  box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.08);  /* deep stín */
  transition: box-shadow 0.35s ease-out, transform 0.35s ease-out !important;
  height: 250px;
  display: flex;
  flex-direction: column;
}

.boxik:hover {
  box-shadow: 0 4px 20px 0 rgba(0,0,0,0.12);
  transform: scale(1.02);
}

/* H3 v boxíku */
.boxik h3 {
  margin: 15px 10px 0px 20px;        /* rozestup pod nadpisem */
}

/* p v boxiku */
.boxik p {
  margin: 0 20px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;     /* počet viditelných řádků */
  overflow: hidden;
  flex: 0 0 auto;              /* vypne růst uvnitř flex/grid rodiče */
  min-height: calc(1.4em * 4);               /* umožní se smrsknout */  
  max-height: calc(1.4em * 4); /* „hard cap“ i kdyby clamp selhal */
  word-break: break-word;      /* kdyby byla dlouhá URL/slova */
}

/* Tlačítko (CTA) v boxíku */
.cta {
  display: inline-block;
  margin: 15px 5px 5px 0px;
  padding: 5px 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid #1a3f6f;   /* hlavní barva */
  color: #1a3f6f;
  background: transparent;
  transition: all 0.2s ease;
  cursor: pointer;
}

.cta:hover {
  background-color: #1a3f6f;
  color: #ffffff;
}

/* CTA button – white variant for dark hero */
.cta.white {
  background: #ffffff;
  color: #1a3f6f;              /* stejné modré jako u outline */
  border: none;
  padding: 5px 10px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
}

.cta.white:hover {
  background: #f1f5f9;         /* jemně šedé na hoveru, ne syrově šedé */
  color: #1a3f6f;              /* barva textu zůstává nebo mírně ztmavit (#0f254e) */
}

.cta.black {
  background: #1a1a1a;
  color: #ffffff;
  border: none;
  padding: 5px 10px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
}

.cta.black:hover {
  background: #2a2a2a;
  color: #ffffff;
}


.compatibility-tags {
    display: flex; /* Použijeme Flexbox */
    flex-wrap: wrap; /* Povolí zalamování tagů na další řádek */
    align-items: center; /* Zarovná obsah vertikálně na střed */
	line-height: 2; /* Zvětší řádkování */
	row-gap: 10px;
}

.compatibility-tag {
    display: inline-flex; /* Inline-blokový prvek pro tagy */
    align-items: center; /* Ikony a text zarovná na střed */
    background-color: #11295a; /* Barva pozadí */
    color: #fff; /* Barva textu */
    padding: 5px 10px; /* Vnitřní odsazení */
    margin-right: 10px; /* Mezera mezi tagy */
    border-radius: 5px; /* Zaoblené rohy */
    font-size: 14px; /* Velikost textu */
    font-weight: bold;
    text-transform: uppercase; /* Velká písmena */
    white-space: nowrap; /* Zabrání zalamování uvnitř tagu */
	
}

.compatibility-tag i {
    margin-right: 5px; /* Mezera mezi ikonou a textem */
}

.compatibility-tag:hover {
    background-color: #005bb5; /* Tmavší pozadí při hover efektu */
    color: #e5e5e5; /* Světlejší text při hover efektu */
}

.small-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
    margin-bottom: 1.5em;
}

.small-tag {
    display: inline-flex;
    align-items: center;
    background-color: #e8edf5;
    color: #11295a;
    padding: 3px 10px;
    margin-right: 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 0.04em;
}

.small-tag:hover {
    background-color: #d0daea;
    color: #0a1c3e;
}

h2.ecosystem-headline {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111111;
  margin-top: 3rem;
  margin-bottom: 0.5rem;
}

h3.ecosystem-headline {
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #333333;
  margin-top: 0.75rem;
  margin-bottom: 3rem;
}

/* ===== SROVNÁNÍ REVIZE IT vs AUDIT IT – P ŘÁDKY ===== */

.compare-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 0.4em 0;
  padding: 0;
  text-align: left;
  line-height: 1.4;
  color: #111827;
}

/* ikona před textem */
.compare-row::before {
  display: inline-block;
  min-width: 1.4em;
  text-align: center;
  font-weight: 800;
  line-height: 1;
  font-family: Arial, Helvetica, "Segoe UI", sans-serif !important; /* žádné emoji */
  background: none !important;
  opacity: 1 !important;
}

/* ✔ ANO */
.compare-row.yes::before {
  content: "\2714";              /* ✔ */
  color: #2e7d32 !important;     /* zelená */
}

/* ✖ NE */
.compare-row.no::before {
  content: "\2716";              /* ✖ */
  color: #c62828 !important;     /* červená */
}

.compare-separator {
  margin-top: 2em;
}

.intro {
  font-size: 20px;
  line-height: 1.7;
  /*max-width: 900px;*/
  margin: 0 auto;
  color: #2c2c2c;
}

.revize-basic {
  color: #4E7A2F;
  font-weight: 600;	
}

.revize-standard {
  color: #D97706;
  font-weight: 600;	
}

.revize-premium {
  color: #1F4E79;
  font-weight: 600;
}


/* ==========================================================================
   Sticky footer layout base (source 1036.css)
   ========================================================================== */
html, body {
    height: 100%;
    margin: 0;
}

#et-main-area {
    display: flex;
    flex-direction: column;
    min-height: 93vh;
}

#main-content {
    flex: 1;
}

/* ==========================================================================
   Corner ribbons (source 872.css)
   ========================================================================== */
.ribbon--nove 		  { --ribbon-text: 'NOVÉ'; --ribbon-bg: #FFD700; }
.ribbon--srozumitelne { --ribbon-text: 'SROZUMITELNÉ'; --ribbon-bg: #FFD700; }
.ribbon--ekonomicke   { --ribbon-text: 'EKONOMICKÉ'; --ribbon-bg: #7cda24; }
.ribbon--oficialni    { --ribbon-text: 'OFICIÁLNÍ'; --ribbon-bg: #2EA3F2; }
.ribbon--bezpecne     { --ribbon-text: 'BEZPEČNÉ'; --ribbon-bg: #4B0082; }
.ribbon--rychle       { --ribbon-text: 'RYCHLÉ'; --ribbon-bg: #f25c05; }
.ribbon--rychly       { --ribbon-text: 'RYCHLÝ'; --ribbon-bg: #f25c05; }
.ribbon--moderni      { --ribbon-text: 'MODERNÍ'; --ribbon-bg: #00BFFF; }
.ribbon--zakladni     { --ribbon-text: 'ZÁKLADNÍ';    --ribbon-bg: #7cda24; }
.ribbon--doporucujeme { --ribbon-text: 'DOPORUČUJEME'; --ribbon-bg: #FFD700; }
.ribbon--kompletni    { --ribbon-text: 'KOMPLETNÍ';   --ribbon-bg: #2EA3F2; }

[class*="ribbon--"]::before {
  content: var(--ribbon-text);
  background: var(--ribbon-bg);
  position: absolute;
  top: 30px;
  right: -70px;
  width: 240px;
  height: 38px;
  line-height: 38px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(45deg);
  z-index: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* ==========================================================================
   Heading word wrapping guard (source 413.css)
   ========================================================================== */
h1, h2, h3, h4, h5 {
	 
   word-wrap: normal;

}


/* ==========================================================================
   Legacy color utility variables and highlight classes (source 345.css)
   ========================================================================== */
.highlight_brandeis-jet {
  color: var(--jet); /* Změní barvu textu */
}

.highlight_emerald {
  color: var(--emerald); /* Změní barvu textu */
}

.highlight_brandeis-blue {
  color: var(--brandeis-blue); /* Změní barvu textu */
}

.highlight_snow {
  color: var(--snow); /* Změní barvu textu */
}

.highlight_princeton-orange {
  color: var(--princeton-orange); /* Změní barvu textu */
}




:root {
  /* CSS HEX */
  --jet: #333333;
  --emerald: #23ce6b;
  --brandeis-blue: #2970fa;
  --snow: #fffcff;
  --princeton-orange: #ff8f00;
}

/* ==========================================================================
   Rozbalovací seznam otázek pomocí details/summary
   ========================================================================== */

.it-test-questions {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  margin-top: 1rem;
  margin-bottom: .8rem;
}

.it-test-questions li {
  list-style: none;
  margin-bottom: .7rem;
  padding: 1rem 1.2rem;
  border-left: 5px solid #d6a637;
  background: rgba(214, 166, 55, 0.08);
  border-radius: 12px;
}

.it-test-questions li::marker {
  content: "";
}

.it-test-question {
  display: block;
  font-size: clamp(1.25rem, 1.35vw, 1.65rem);
  line-height: 1.32;
  font-weight: 700;
}

.it-test-outcome {
  display: block;
  margin-top: .8rem;
  font-size: clamp(1rem, 1.05vw, 1.25rem);
  line-height: 1.38;
  font-weight: 500;
  color: #4f5b6b;
}

.it-test-more {
  margin-top: 0;
  margin-bottom: 1rem;
}

.it-test-more > summary {
  cursor: pointer !important;
  font-size: clamp(1.2rem, 1.25vw, 1.5rem);
  line-height: 1.4;
  font-weight: 800;
  margin-top: .3rem;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  list-style: none;
}

.it-test-more > summary::-webkit-details-marker {
  display: none;
}

.it-test-more > summary * {
  cursor: pointer !important;
}

.it-test-more > summary:hover {
  text-decoration: underline;
}

.it-test-more > summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.it-test-more > summary::after {
  content: " ↓";
}

.it-test-more[open] > summary::after {
  content: " ↑";
}

.it-test-more[open] .it-test-questions {
  margin-top: .6rem;
  margin-bottom: 1.2rem;
}

.it-test-result {
  font-size: clamp(1.15rem, 1.2vw, 1.45rem);
  line-height: 1.5;
  margin-top: .7rem;
}
/* ==========================================================================
   IT Revize – process flow cards with number and icon
   ========================================================================== */

.it-process-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2vw, 2rem);
  margin: 3rem 0;
}

.it-process-step {
  position: relative;
  padding: 1.5rem 1.4rem 1.6rem;
  background: #ffffff;
  border: 1px solid rgba(8, 28, 68, 0.08);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(8, 28, 68, 0.08);
}

.it-process-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
}

.it-process-number,
.it-process-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.it-process-number {
  background: #5b93e8;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .02em;
}

.it-process-icon {
  background: rgba(91, 147, 232, 0.12);
  color: #071b4d;
  font-size: 1.35rem;
}

.it-process-step h3 {
  margin: 0 0 .55rem 0;
  color: #071b4d;
  font-size: clamp(1.25rem, 1.35vw, 1.55rem);
  line-height: 1.25;
  font-weight: 800;
}

.it-process-step p {
  margin: 0;
  color: #26354f;
  font-size: clamp(1rem, 1.02vw, 1.14rem);
  line-height: 1.5;
  font-weight: 500;
}

@media (max-width: 980px) {
  .it-process-flow {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .it-process-flow {
    grid-template-columns: 1fr;
    margin: 2rem 0;
  }

  .it-process-step {
    padding: 1.25rem 1.15rem 1.35rem;
  }

  .it-process-number,
  .it-process-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .it-process-icon {
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   IT Revize – FAQ cards in two columns
   ========================================================================== */

.it-faq-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2vw, 2rem);
  margin: 2.5rem 0;
}

.it-faq-column {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.it-faq-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: .9rem;
  padding: 1.15rem 1.2rem;
  background: #ffffff;
  border: 1px solid rgba(8, 28, 68, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(8, 28, 68, 0.07);
}

.it-faq-mark {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(91, 147, 232, 0.12);
  color: #071b4d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 900;
}

.it-faq-content h3 {
  margin: 0 0 .35rem 0;
  color: #071b4d;
  font-size: clamp(1.15rem, 1.2vw, 1.4rem);
  line-height: 1.25;
  font-weight: 800;
}

.it-faq-content p {
  margin: 0;
  color: #26354f;
  font-size: clamp(1rem, 1.02vw, 1.13rem);
  line-height: 1.5;
  font-weight: 500;
}

@media (max-width: 780px) {
  .it-faq-columns {
    grid-template-columns: 1fr;
    margin: 2rem 0;
  }

  .it-faq-item {
    grid-template-columns: 42px 1fr;
    padding: 1rem 1.05rem;
  }

  .it-faq-mark {
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   IT Revize – situation dialog and mini case study cards
   ========================================================================== */

.it-situations-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2vw, 2rem);
  margin: 2.5rem 0 3rem;
}

.it-situation-card {
  position: relative;
  padding: clamp(1.4rem, 2vw, 2rem);
  background: rgba(91, 147, 232, 0.07);
  border-left: 5px solid #5b93e8;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(8, 28, 68, 0.07);
}

/* Dialog */

.it-dialog-lines {
  display: grid;
  gap: .75rem;
}

.it-dialog-line {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 88%;
  box-sizing: border-box;
  margin: 0;
  padding: .75rem 1rem;
  background: #ffffff;
  border: 1px solid rgba(8, 28, 68, 0.12);
  border-radius: 14px;
  color: #26354f;
  font-size: clamp(1.05rem, 1.1vw, 1.25rem);
  line-height: 1.35;
}

.it-dialog-question {
  justify-self: start;
  color: #071b4d;
  font-weight: 800;
}

.it-dialog-answer {
  justify-self: end;
  color: #26354f;
  font-weight: 500;
}

/* Mini case study */

.it-situation-case h3 {
  margin: 0 0 1rem 0;
  color: #111111;
  font-size: clamp(1.35rem, 1.55vw, 1.85rem);
  line-height: 1.2;
  font-weight: 800;
}

.it-situation-case p {
  margin: 0 0 .75rem 0;
  color: #26354f;
  font-size: clamp(1.05rem, 1.1vw, 1.25rem);
  line-height: 1.55;
  font-weight: 500;
}

.it-situation-case p:last-child {
  margin-bottom: 0;
}

.it-case-problem {
  color: #8b1e1e !important;
  font-size: clamp(1.18rem, 1.25vw, 1.45rem) !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
  margin-bottom: .95rem !important;
}

@media (max-width: 780px) {
  .it-situations-block {
    grid-template-columns: 1fr;
    margin: 2rem 0;
  }

  .it-situation-card {
    padding: 1.25rem 1.15rem;
  }

  .it-dialog-line {
    max-width: 100%;
  }

  .it-dialog-answer {
    justify-self: start;
  }
}
/* ==========================================================================
   IT Revize – compact case study cards
   ========================================================================== */

.it-case-compact {
  padding: 1rem 1.05rem !important;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(8, 28, 68, 0.055);
}

.it-case-compact h3 {
  margin: 0 0 .55rem 0 !important;
  font-size: clamp(1.02rem, 1.05vw, 1.22rem) !important;
  line-height: 1.2 !important;
  font-weight: 700;
}

.it-case-compact p {
  margin: 0 0 .55rem 0 !important;
  font-size: clamp(.9rem, .92vw, 1rem) !important;
  line-height: 1.4 !important;
}

.it-case-compact p:last-child {
  margin-bottom: 0 !important;
}

.it-case-compact .it-case-problem {
  margin-bottom: .55rem !important;
  font-size: clamp(.95rem, .98vw, 1.08rem) !important;
  line-height: 1.34 !important;
  font-weight: 700 !important;
}</style>
<!-- end Simple Custom CSS and JS -->
