/* 02/10/2026 (Christianos): section εργαλείων Konet (Aegis/Argus/Hermes). Κάρτα με δύο όψεις: μπροστά εικονίδιο σε κίνηση (SVG),
   με hover γυρίζει (03/10: όχι κλικ· σε οθόνες αφής γυρίζει μόνη της όταν φανεί) και δείχνει το ζωντανό σύστημα (canvas, konet-tools-fx.js). Παλέτα colors.md. */
.kt-sec:not(.bg--color-white) { background: #F8FAFC; }
    .kt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6.4rem; align-items: center; }
    .kt-list { list-style: none; margin: 0; padding: 0; }
    .kt-item { border-bottom: 1px solid #DCE2EA; }
    .kt-item__btn { width: 100%; display: flex; align-items: center; gap: 1.6rem; padding: 3.2rem 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: #15243A; }
    .kt-item__ic { width: 5.6rem; height: 5.6rem; flex: none; display: grid; place-items: center; border-radius: 1.2rem; background: #DCE9F8; color: #265DAB; transition: background-color .4s, color .4s; }
    .kt-item__ic svg { width: 3.2rem; height: 3.2rem; }
    .kt-item.is-on .kt-item__ic { background: #265DAB; color: #fff; }
    .kt-item__t { display: grid; gap: .2rem; flex: 1; }
    .kt-item__name { font-size: 2.6rem; line-height: 3.2rem; font-weight: 600; }
    .kt-item__sub { font-size: 1.4rem; line-height: 2rem; color: #5A6675; }
    .kt-item__chev { width: 2.4rem; height: 2.4rem; flex: none; transition: transform .5s cubic-bezier(.4,0,.2,1); }
    .kt-item.is-on .kt-item__chev { transform: rotate(180deg); }
    .kt-item__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.4,0,.2,1); }
    .kt-item.is-on .kt-item__body { grid-template-rows: 1fr; }
    .kt-item__body > div { overflow: hidden; }
    .kt-item__body p { margin: 0 0 1.6rem 7.2rem; font-size: 1.6rem; line-height: 2.6rem; color: #182230; }
    .kt-item__inc { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 3.2rem 7.2rem; padding: 0; list-style: none; }
    .kt-item__inc li { padding: .4rem 1.2rem; border-radius: 99rem; background: #EEF2F8; border: 1px solid #DCE2EA; font-size: 1.3rem; color: #15243A; }

    /* Η «οθόνη» δεξιά: navy με τις δύο μπλε ανταύγειες του support */
    /* 02/10 β΄ (Christianos): κάρτα με δύο όψεις. Μπροστά το εικονίδιο σε κίνηση (B), με hover ή κλικ γυρίζει και δείχνει το ζωντανό σύστημα (A).
       Κάθε όψη γυρίζει μόνη της (perspective στο transform), χωρίς preserve-3d, ώστε το fade των σκηνών να μην «ισιώνει» το 3D. */
    .kt-stage { position: relative; aspect-ratio: 4 / 5; -webkit-tap-highlight-color: transparent; }
    .kt-face { position: absolute; inset: 0; border-radius: 2.4rem; overflow: hidden; isolation: isolate; background-color: #05080E;
      background-image: radial-gradient(60rem 40rem at 10% -10%, rgba(38,93,171,.42), rgba(38,93,171,0) 70%), radial-gradient(60rem 44rem at 95% 110%, rgba(38,93,171,.38), rgba(38,93,171,0) 70%);
      box-shadow: 0 3.2rem 6.4rem rgba(13,23,38,.22); -webkit-backface-visibility: hidden; backface-visibility: hidden;
      transition: transform 1.1s cubic-bezier(.65,0,.2,1); will-change: transform; }
    .kt-face::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(220,233,248,.09) 1px, transparent 1.4px); background-size: 2.4rem 2.4rem; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
    /* λάμψη που περνά πάνω από την όψη όσο γυρίζει */
    .kt-face::after { content: ''; position: absolute; inset: -20%; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient(105deg, rgba(220,233,248,0) 38%, rgba(220,233,248,.22) 50%, rgba(220,233,248,0) 62%); transform: translateX(-60%); }
    .kt-stage.is-turning .kt-face::after { animation: kt-sheen 1.1s cubic-bezier(.65,0,.2,1); }
    @keyframes kt-sheen { 0% { opacity: 0; transform: translateX(-60%); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }
    .kt-face--front { transform: perspective(1800px) rotateY(0deg); }
    .kt-face--back { transform: perspective(1800px) rotateY(180deg); }
    .kt-stage.is-flipped .kt-face--front { transform: perspective(1800px) rotateY(-180deg); }
    .kt-stage.is-flipped .kt-face--back { transform: perspective(1800px) rotateY(0deg); }
    .kt-hint { position: absolute; top: 2.4rem; right: 2.4rem; z-index: 2; display: inline-flex; align-items: center; gap: .8rem; padding: .7rem 1.4rem; border-radius: 99rem; background: rgba(38,93,171,.28); border: 1px solid rgba(77,130,200,.6); color: #F8FAFC; font-size: 1.3rem; font-weight: 500; }
    .kt-hint svg { width: 1.8rem; height: 1.8rem; }
    .kt-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
    .kt-scene.is-on { opacity: 1; visibility: visible; transition: opacity .7s ease .15s, visibility 0s; }
    .kt-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
    .kt-cap { position: absolute; left: 2.4rem; right: 2.4rem; bottom: 2.4rem; display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; font-size: 1.3rem; color: rgba(248,250,252,.8); }
    .kt-cap span { display: inline-flex; align-items: center; gap: .8rem; }
    .kt-cap i { width: .9rem; height: .9rem; border-radius: 50%; display: inline-block; }
    .kt-top { position: absolute; left: 2.4rem; top: 2.4rem; right: 2.4rem; display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; font-size: 1.2rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(220,233,248,.75); }
    .kt-pill { display: inline-flex; align-items: center; gap: .8rem; padding: .6rem 1.2rem; border-radius: 99rem; background: rgba(13,23,38,.7); border: 1px solid rgba(77,130,200,.45); letter-spacing: .02em; text-transform: none; font-size: 1.3rem; color: #F8FAFC; transition: border-color .4s; }
    .kt-pill i { width: .9rem; height: .9rem; border-radius: 50%; background: #238636; box-shadow: 0 0 0 0 rgba(35,134,54,.6); animation: kt-ping 2s infinite; }
    .kt-pill.is-alert { border-color: #F8FAFC; }
    .kt-pill.is-alert i { background: #F8FAFC; animation: kt-ping-w .9s infinite; }
    @keyframes kt-ping { 70% { box-shadow: 0 0 0 .8rem rgba(35,134,54,0); } 100% { box-shadow: 0 0 0 0 rgba(35,134,54,0); } }
    @keyframes kt-ping-w { 70% { box-shadow: 0 0 0 .8rem rgba(248,250,252,0); } 100% { box-shadow: 0 0 0 0 rgba(248,250,252,0); } }
    .kt-lbl { position: absolute; font-size: 1.2rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(220,233,248,.7); transform: translateX(-50%); white-space: nowrap; }

    /* Στυλ B: μεγάλο εικονίδιο σε κίνηση (SVG) */
    .kt-ico { position: absolute; inset: 0; display: grid; place-items: center; }
    .kt-ico svg { width: 72%; height: auto; overflow: visible; }
    .kt-glow { filter: drop-shadow(0 0 .6rem rgba(77,130,200,.9)) drop-shadow(0 0 2rem rgba(77,130,200,.5)); }
    .kt-draw { stroke-dasharray: var(--L); stroke-dashoffset: var(--L); }
    .kt-scene.is-on .kt-draw { animation: kt-draw 1.6s cubic-bezier(.4,0,.2,1) .3s forwards; }
    @keyframes kt-draw { to { stroke-dashoffset: 0; } }
    .kt-run { stroke-dasharray: 70 var(--L); stroke-dashoffset: 70; }
    .kt-scene.is-on .kt-run { animation: kt-run 3.2s linear 1.9s infinite; }
    @keyframes kt-run { from { stroke-dashoffset: 70; } to { stroke-dashoffset: calc(-1 * var(--L)); } }
    .kt-ripple { transform-box: fill-box; transform-origin: center; opacity: 0; }
    .kt-scene.is-on .kt-ripple { animation: kt-ripple 4.8s cubic-bezier(.2,.6,.3,1) infinite; }
    .kt-scene.is-on .kt-ripple:nth-of-type(2) { animation-delay: 1.6s; }
    .kt-scene.is-on .kt-ripple:nth-of-type(3) { animation-delay: 3.2s; }
    @keyframes kt-ripple { 0% { transform: scale(.55); opacity: 0; } 15% { opacity: .55; } 100% { transform: scale(1.35); opacity: 0; } }
    .kt-fade { opacity: 0; }
    .kt-scene.is-on .kt-fade { animation: kt-fade .8s ease 1.7s forwards; }
    @keyframes kt-fade { to { opacity: 1; } }
    .kt-sweep { position: absolute; width: 51.6%; aspect-ratio: 1; border-radius: 50%; left: 24.2%; top: 50%; margin-top: -25.8%; background: conic-gradient(from 0deg, rgba(77,130,200,0) 0deg, rgba(77,130,200,0) 280deg, rgba(77,130,200,.45) 360deg); -webkit-mask-image: radial-gradient(closest-side, #000 98%, transparent); mask-image: radial-gradient(closest-side, #000 98%, transparent); }
    .kt-scene.is-on .kt-sweep { animation: kt-spin 4s linear infinite; }
    @keyframes kt-spin { to { transform: rotate(1turn); } }
    .kt-check { stroke-dasharray: 60; stroke-dashoffset: 60; }
    .kt-scene.is-on .kt-check--loop { animation: kt-check 3.6s ease infinite; }
    @keyframes kt-check { 0%, 55% { stroke-dashoffset: 60; opacity: 1; } 70%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
    .kt-env-flash { opacity: 0; }
    .kt-scene.is-on .kt-env-flash { animation: kt-envf 3.6s ease infinite; }
    @keyframes kt-envf { 0%, 50% { opacity: 0; } 58% { opacity: 1; } 80%, 100% { opacity: 0; } }

    @media (max-width: 1023px) { .kt-grid { grid-template-columns: 1fr; gap: 4rem; } .kt-stage { aspect-ratio: 1 / 1; max-width: 56rem; width: 100%; margin: 0 auto; } }
    @media (max-width: 480px) { .kt-top > span:first-child { display: none; } .kt-top { justify-content: flex-end; } .kt-hint { top: 1.6rem; right: 1.6rem; } }
    @media (max-width: 767px) { .kt-item__name { font-size: 2.1rem; line-height: 2.8rem; } .kt-item__body p, .kt-item__inc { margin-left: 0; } .kt-stage { aspect-ratio: 4 / 5; } }
    @media (prefers-reduced-motion: reduce) { .kt-face { transition: opacity .4s; transform: none !important; } .kt-face--back { opacity: 0; } .kt-stage.is-flipped .kt-face--back { opacity: 1; } .kt-stage.is-flipped .kt-face--front { opacity: 0; } .kt-scene * { animation: none !important; } .kt-draw, .kt-check { stroke-dashoffset: 0; } .kt-fade { opacity: 1; } }
.kt-sec { padding-top: clamp(64px, 5.6vw, 120px); padding-bottom: clamp(64px, 5.6vw, 120px); }
h3.kt-item__name { margin: 0; color: #15243A; }
.kt-item__inc { margin-bottom: 1.6rem; }
.kt-item__price { margin: 0 0 3.2rem 7.2rem !important; font-size: 1.5rem !important; color: #5A6675 !important; }
.kt-item__price strong { color: #265DAB; font-weight: 600; }
@media (max-width: 767px) { .kt-item__price { margin-left: 0 !important; } }
.kt-item__price strong { white-space: nowrap; }
/* 03/10 (Christianos): Aegis και Argus «Έρχεται σύντομα» */
.kt-item__row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; }
.kt-soon { display: inline-flex; align-items: center; padding: .3rem 1rem; border-radius: 99rem; background: #EEF2F8; border: 1px solid #DCE2EA; font-size: 1.2rem; line-height: 1.8rem; font-weight: 600; color: #265DAB; white-space: nowrap; }
.kt-soon--dark { position: absolute; top: 2.4rem; left: 2.4rem; z-index: 2; background: rgba(13,23,38,.7); border-color: rgba(77,130,200,.45); color: #DCE9F8; }
@media (max-width: 480px) { .kt-soon--dark { top: 1.6rem; left: 1.6rem; } }
/* 03/10 (Christianos): Hermes με 3 επίπεδα φίλτρου, ονόματα χωρίς κεφαλαία, σπάνε σε δύο γραμμές σε στενές οθόνες */
.kt-lbl--n { text-transform: none; letter-spacing: 0; font-size: 1.3rem; white-space: normal; text-align: center; width: 20%; line-height: 1.3; }
.kt-lbl--hi { color: #F8FAFC; }
@media (max-width: 480px) { .kt-lbl--n { font-size: 1.1rem; } }
/* 05/10/2026 (Christianos): νέα γραφικά. Argus πίσω = το site και το κινητό του τεχνικού (B5), Hermes πίσω = εισερχόμενα (D3β),
   σε πραγματικό UI (HTML). Τα μπροστινά Argus/Hermes ζωγραφίζονται σε canvas (konet-tools-fx.js). */
.kt-face--front .kt-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ktd { position: absolute; inset: 0; container-type: size; }
.ktd * { box-sizing: border-box; }
/* κινητό: η οθόνη ανάβει με την ειδοποίηση και μια απαλή λάμψη το ξεχωρίζει (όχι δόνηση) */
.ktp-tilt { position: absolute; right: 5cqw; bottom: 13cqh; height: 66cqh; aspect-ratio: 9 / 19.3; z-index: 2; perspective: 1400px; }
.ktp-halo { position: absolute; right: -14cqw; bottom: -4cqh; width: 78cqw; height: 92cqh; border-radius: 50%; opacity: 0; transition: opacity 1.6s ease; pointer-events: none; background: radial-gradient(closest-side, rgba(77,130,200,.55), rgba(77,130,200,0)); }
.ktp-halo.is-alert { background: radial-gradient(closest-side, rgba(242,76,108,.5), rgba(242,76,108,0)); }
.ktp-halo.is-ok { background: radial-gradient(closest-side, rgba(50,199,87,.42), rgba(50,199,87,0)); }
.ktp-halo.is-on { opacity: 1; transition: opacity .35s ease; }
.ktp { position: relative; width: 100%; height: 100%; border-radius: 13% / 6.2%; padding: 3.2%; background: linear-gradient(150deg, #3a4456 0%, #121822 30%, #0a0e15 70%, #2b3445 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 1px #000, 0 4rem 7rem rgba(0,0,0,.6), 0 1rem 2rem rgba(0,0,0,.4); transform: rotateY(-5deg) rotateX(2deg); }
.ktp__screen { position: relative; width: 100%; height: 100%; border-radius: 10.5% / 5%; overflow: hidden; background: #000; container-type: inline-size; }
.ktp__wall { position: absolute; inset: 0; background: radial-gradient(130% 60% at 15% 0%, #265DAB 0%, rgba(38,93,171,0) 62%), radial-gradient(100% 55% at 100% 100%, #4D82C8 0%, rgba(77,130,200,0) 60%), linear-gradient(180deg, #0D1726, #15243A); filter: brightness(.7); }
.ktp__island { position: absolute; top: 3.2%; left: 50%; width: 31%; height: 3.4%; transform: translateX(-50%); border-radius: 99rem; background: #000; z-index: 5; }
.ktp__lock { position: absolute; top: 10%; left: 0; right: 0; text-align: center; color: #fff; }
.ktp__date { font-size: 6cqw; font-weight: 500; opacity: .85; }
.ktp__time { margin-top: .6cqw; font-size: 21cqw; line-height: 1; font-weight: 600; letter-spacing: -.02em; opacity: .94; }
.ktp__notes { position: absolute; left: 4%; right: 4%; top: 33%; display: flex; flex-direction: column; gap: 2.6cqw; }
.ktp__n { display: flex; gap: 3cqw; align-items: flex-start; padding: 4cqw; border-radius: 7cqw; background: rgba(30,40,58,.94); border: 1px solid rgba(255,255,255,.09); color: #fff; opacity: 0; transform: translateY(-4cqw) scale(.94); transition: opacity .45s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.ktp__n.is-in { opacity: 1; transform: none; }
.ktp__ic { flex: none; width: 12cqw; height: 12cqw; border-radius: 3cqw; display: grid; place-items: center; background: linear-gradient(180deg, #5fd57a, #32C757); }
.ktp__ic svg { width: 62%; height: 62%; }
.ktp__nt { flex: 1; min-width: 0; }
.ktp__nh { display: flex; justify-content: space-between; font-size: 4.6cqw; line-height: 1.3; color: rgba(255,255,255,.65); }
.ktp__nb { margin-top: .6cqw; font-size: 5.4cqw; line-height: 1.3; color: #fff; }
.ktp__nb b { display: block; font-weight: 600; }
.ktp__bar { position: absolute; bottom: 1.8%; left: 34%; right: 34%; height: .9%; border-radius: 99rem; background: rgba(255,255,255,.75); z-index: 3; }
.ktp__off { position: absolute; inset: 0; z-index: 3; background: #000; transition: opacity .6s ease; }
.ktp.is-awake .ktp__off { opacity: 0; }
.ktp__glass { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.05) 100%); }
/* browser με το site */
.ktb { position: absolute; z-index: 1; left: 5cqw; top: 11cqh; width: 68cqw; border-radius: 1.4cqw; overflow: hidden; background: #fff; container-type: inline-size; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 3rem 6rem rgba(0,0,0,.5); }
.ktb__bar { display: flex; align-items: center; gap: 1.4cqw; height: 8.5cqw; padding: 0 2.8cqw; background: #EEF2F8; border-bottom: 1px solid #DCE2EA; }
.ktb__bar > i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #DCE2EA; }
.ktb__url { flex: 1; margin-left: 2cqw; height: 5.2cqw; border-radius: 99rem; background: #fff; border: 1px solid #DCE2EA; display: flex; align-items: center; justify-content: center; gap: 1cqw; font-size: 3.2cqw; color: #5A6675; }
.ktb__url svg { width: 2.8cqw; height: 2.8cqw; }
.ktb__load { height: .6cqw; background: #265DAB; width: 0; opacity: 0; }
.ktb__load.is-run { opacity: 1; width: 100%; transition: width 1.1s cubic-bezier(.3,.7,.2,1); }
.ktb__page { position: relative; aspect-ratio: 4 / 3.6; overflow: hidden; }
.ktw { position: absolute; inset: 0; padding: 3.4cqw 4cqw; background: #fff; }
.ktw__nav { display: flex; align-items: center; gap: 2cqw; }
.ktw__logo { width: 4.4cqw; height: 4.4cqw; border-radius: 1.2cqw; background: #15243A; }
.ktw__brand { font-size: 3.6cqw; font-weight: 700; color: #15243A; }
.ktw__links { margin-left: auto; display: flex; gap: 2.4cqw; font-size: 2.8cqw; color: #5A6675; }
.ktw__hero { position: relative; overflow: hidden; margin-top: 3.2cqw; height: 31cqw; border-radius: 2cqw; padding: 4.4cqw; background: linear-gradient(120deg, #DCE9F8 0%, #EEF2F8 55%, #F4F7FB 100%); }
.ktw__hero::after { content: ''; position: absolute; right: -6cqw; top: -4cqw; width: 40cqw; height: 40cqw; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #4D82C8, #265DAB 60%, #15243A); opacity: .85; }
.ktw__h { position: relative; z-index: 1; max-width: 52%; font-size: 5.4cqw; line-height: 1.1; font-weight: 700; color: #15243A; }
.ktw__btn { position: relative; z-index: 1; display: inline-block; margin-top: 2.6cqw; padding: 1.4cqw 3cqw; border-radius: 99rem; background: #265DAB; color: #fff; font-size: 2.8cqw; font-weight: 600; }
.ktw__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; margin-top: 3.4cqw; }
.ktw__img { position: relative; overflow: hidden; aspect-ratio: 1 / .78; border-radius: 1.6cqw; background: #EEF2F8; }
.ktw__img::after { content: ''; position: absolute; left: 22%; right: 22%; top: 18%; bottom: 14%; border-radius: 40% 40% 12% 12%; background: linear-gradient(180deg, #4D82C8, #265DAB); opacity: .75; }
.ktw__p:nth-child(2) .ktw__img::after { border-radius: 50%; left: 26%; right: 26%; top: 16%; bottom: 16%; background: linear-gradient(180deg, #DCE9F8, #4D82C8); }
.ktw__p:nth-child(3) .ktw__img::after { border-radius: 1.4cqw; background: linear-gradient(180deg, #15243A, #5A6675); }
.ktw__pn { margin-top: 1.4cqw; font-size: 2.8cqw; color: #182230; }
.ktw__pp { font-size: 3cqw; font-weight: 700; color: #15243A; }
.kte { position: absolute; inset: 0; padding: 6cqw; background: #fff; color: #000; font-family: 'Times New Roman', Times, serif; opacity: 0; }
.kte__h { font-size: 6.6cqw; font-weight: 700; line-height: 1.15; }
.kte__t { margin-top: 3cqw; font-size: 3.6cqw; line-height: 1.4; }
.ktb.is-down .kte { opacity: 1; }
.ktb.is-down .ktw { opacity: 0; }
/* εισερχόμενα: τα περισσότερα spam τα κόβει το Konet Hermes */
.ktm { position: absolute; left: 6cqw; right: 6cqw; top: 8cqh; bottom: 12cqh; display: flex; flex-direction: column; container-type: inline-size; }
.ktm__t { font-size: 8cqw; font-weight: 700; line-height: 1.2; color: #fff; letter-spacing: -.01em; }
.ktm__c { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.2cqw 3.4cqw; margin-top: 1.6cqw; font-size: 3.5cqw; color: rgba(220,233,248,.65); }
.ktm__c b { font-weight: 600; color: rgba(255,255,255,.9); font-variant-numeric: tabular-nums; }
.ktm__c .ktm__k { padding: .6cqw 2.2cqw; border-radius: 99rem; background: #265DAB; color: #fff; }
.ktm__c .ktm__k b { color: #fff; }
.ktm__list { position: relative; flex: 1; margin-top: 3.4cqw; overflow: hidden; border-top: 1px solid rgba(220,233,248,.12); -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.ktm__r { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.4,0,.2,1), opacity .45s; }
.ktm__r.is-in { grid-template-rows: 1fr; }
.ktm__r.is-out { grid-template-rows: 0fr; opacity: 0; }
.ktm__r > div { overflow: hidden; }
.ktm__in { position: relative; display: flex; gap: 3cqw; padding: 3cqw 0; border-bottom: 1px solid rgba(220,233,248,.1); }
.ktm__av { flex: none; width: 9cqw; height: 9cqw; border-radius: 50%; display: grid; place-items: center; font-size: 4cqw; font-weight: 600; color: #fff; background: #2B3A52; transition: opacity .4s; }
.ktm__tx { flex: 1; min-width: 0; transition: opacity .4s; }
.ktm__l1 { display: flex; justify-content: space-between; gap: 2cqw; font-size: 4cqw; line-height: 1.3; }
.ktm__l1 b { font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ktm__l1 span { color: rgba(220,233,248,.5); font-size: 3.4cqw; }
.ktm__l2 { margin-top: .3cqw; font-size: 3.7cqw; line-height: 1.3; color: rgba(255,255,255,.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ktm__l3 { margin-top: .2cqw; font-size: 3.4cqw; line-height: 1.3; color: rgba(220,233,248,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ktm__tag { position: absolute; right: 0; top: 50%; transform: translateY(-50%) scale(.9); opacity: 0; padding: 1cqw 2.6cqw; border-radius: 99rem; font-size: 3.3cqw; font-weight: 600; white-space: nowrap; transition: opacity .3s, transform .4s cubic-bezier(.2,.8,.2,1); }
.ktm__tag--h { background: #265DAB; color: #fff; box-shadow: 0 0 0 .6cqw rgba(38,93,171,.25); }
.ktm__tag--o { border: 1px solid rgba(220,233,248,.4); color: rgba(220,233,248,.8); background: rgba(13,23,38,.9); }
.ktm__r.is-caught .ktm__tag { opacity: 1; transform: translateY(-50%) scale(1); }
.ktm__r.is-caught .ktm__av, .ktm__r.is-caught .ktm__tx { opacity: .3; }
@media (prefers-reduced-motion: reduce) { .ktp__n, .ktm__r, .ktp-halo, .ktb__load { transition: none !important; } }
@media (max-width: 767px) { .ktp-tilt { bottom: 19cqh; height: 64cqh; right: 4cqw; } .ktb { top: 7cqh; width: 70cqw; left: 4cqw; } }
/* 05/10 δ΄ (Christianos): το SpamExperts φαίνεται ότι κάνει ουσιαστική δουλειά (υπηρεσία που προσφέρουμε), το SpamAssassin ελάχιστη */
.ktm__tag--e { background: #DCE9F8; color: #15243A; }
.ktm__c .ktm__e { padding: .6cqw 2.2cqw; border-radius: 99rem; background: rgba(220,233,248,.14); border: 1px solid rgba(220,233,248,.3); color: rgba(255,255,255,.9); }
/* 05/10 ε΄ (bug Christianos): το περιεχόμενο της πίσω όψης κρύβεται όταν η κάρτα γυρίσει μπροστά. Στοιχεία με backdrop-filter
   αγνοούν το backface-visibility και φαίνονταν ανάποδα πάνω από την μπροστινή όψη. Κρύβεται στη μέση του γυρίσματος. */
.kt-face--back .ktd { visibility: hidden; transition: visibility 0s linear .55s; }
.kt-stage.is-flipped .kt-face--back .ktd { visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .kt-face--back .ktd { visibility: visible; } }