/* Konet, κοινό CSS περιεχομένου: τυπογραφία + γραμμή κριτικών (22/09/2026, Christianos: «οι σελίδες υπηρεσιών ίδιες με την αρχική»).
   Προέλευση: το inline μπλοκ της αρχικής (17/09 όπως το intermedia.gr, 18/09 «ένα κλικ πιο μικρά», κλίμακα ×0,92).
   Φορτώνει ΜΕΤΑ το bundle της σελίδας (slot="head" στο .astro), ώστε να υπερισχύει των defaults του bundle.
   Ισχύει ΜΟΝΟ μέσα στο #main-content, header/footer αμετάβλητα. Σελίδες: αρχική, web-hosting (el/en). Μετονομασία από konet-typography.css 22/09 β΄. */

/* Τίτλος και υπότιτλος hero (κλάσεις της αρχικής 18/09, τις φορά και ο H1 της web-hosting) */
.knt-hero__title{margin:0;color:#fff;font-weight:500;letter-spacing:-.025em;line-height:1.08;text-shadow:0 2px 24px rgba(0,0,0,.35);font-size:3.6rem}
.knt-hero__title span{display:block}
.knt-hero__sub{max-width:52rem;color:rgba(255,255,255,.85);font-size:1.65rem;line-height:1.6;text-shadow:0 1px 12px rgba(0,0,0,.4)}
@media screen and (min-width:640px){.knt-hero__title{font-size:4.4rem}.knt-hero__sub{font-size:1.75rem}}
@media screen and (min-width:768px){.knt-hero__title{font-size:5.4rem}}
@media screen and (min-width:1024px){.knt-hero__title{font-size:7rem}.knt-hero__sub{font-size:2rem;max-width:58rem}}
@media screen and (min-width:1600px){.knt-hero__title{font-size:7.8rem}.knt-hero__sub{font-size:2.1rem}}

/* Εισαγωγικά κείμενα (lead) κάτω από τίτλους: αχνό γκρι στα ανοιχτά sections, λευκό 72% στα σκούρα */
#main-content p.knt-lead{color:var(--color-text-muted,#5A6675);font-weight:400;line-height:1.7}
#main-content p.knt-lead--dark{color:rgba(255,255,255,.72)}
#main-content #reviews .fit-wide>div>p.text--size-l{color:var(--color-text-muted,#5A6675);font-weight:400;line-height:1.7}

/* Κλίμακα τίτλων και κειμένων */
#main-content .title--4xl{font-size:3rem;line-height:1.16;letter-spacing:-.025em;font-weight:600}
/* 23/09 (Christianos): λίγο μεγαλύτερο κενό ανάμεσα στον τίτλο και ό,τι ακολουθεί, σε αρχική + σελίδες υπηρεσιών (προστίθεται στο gap του container). Το line-height 1.05 → 1.16 για τίτλους 2-3 γραμμών. */
#main-content h2.title--4xl{margin-bottom:1.2rem}
#main-content .title--2xl{font-size:2.2rem;line-height:1.1;letter-spacing:-.02em;font-weight:600}
#main-content .text--size-l,#main-content .text--size-m{font-size:1.65rem;line-height:1.6}
#main-content .text--size-s{font-size:1.55rem;line-height:1.5}
#main-content .text--size-xs{font-size:1.5rem;line-height:1.5}
#main-content .text--size-2xs{font-size:1.4rem;line-height:1.5}
#main-content .label--size-s,#main-content .label--size-m{font-size:1.2rem;line-height:1.8rem;letter-spacing:.04em}
@media screen and (min-width:640px){
#main-content .title--4xl{font-size:3.6rem}
#main-content .text--size-l,#main-content .text--size-m{font-size:1.8rem;line-height:1.625}
}
@media screen and (min-width:768px){
#main-content .title--4xl{font-size:4.8rem}
#main-content .title--2xl{font-size:2.75rem}
#main-content .text--size-s{font-size:1.65rem;line-height:1.45}
}

/* Γραμμή κριτικών Google (αρχική 18/09, web-hosting 22/09): G + 5 αστέρια + «5.0 · N κριτικές», από κάτω μία πρόταση */
.knt-trust{color:#fff;display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.knt-trust__sub{text-shadow:2px 2px 5px #000;margin:0}
.knt-trust__sub .link--text{color:#fff;font-weight:600}
.knt-trust__line{display:inline-flex;align-items:center;gap:1rem;color:#fff;text-decoration:none;font-size:1.6rem;font-weight:500;line-height:1.4;text-shadow:2px 2px 5px #000}
.knt-trust__g{width:2rem;height:2rem;flex:0 0 auto}
.knt-trust__stars{display:inline-flex;gap:.2rem;color:#f5a623}
.knt-trust__stars svg{width:1.6rem;height:1.6rem}
.knt-trust__line:hover .knt-trust__text{text-decoration:underline}
/* Μπλε λέξεις σε τίτλους (μοτίβο αρχικής, 23/09 και στις σελίδες υπηρεσιών): .knt-accent σε ανοιχτό φόντο, + .knt-accent--dark σε σκούρο. */
.knt-accent{background-image:linear-gradient(100deg,#4D82C8 -30%,#265DAB 55%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.knt-accent--dark{background-image:linear-gradient(100deg,#DCE9F8 -50%,#4D82C8 65%)}
.knt-accent .vatPriceElement{color:inherit}

/* 30/09 (Christianos): όλα τα γαλάζια κουτάκια (Έκπτωση στις κάρτες και στον πίνακα, PHP 5.1 - 8.5 κ.λπ.) ίδια,
   στο μέγεθος του «Έκπτωση» των καρτών πακέτων. Ένας κανόνας για όλες τις σελίδες υπηρεσιών. */
#main-content .label.label--size-m.bg--color-salem-lightest{font-size:1.35rem;line-height:2rem;padding:.1rem 1rem;letter-spacing:.04em}

/* 30/09 (Christianos, Demo 1 του /demo-noumera/): τα «εκθεσιακά» νούμερα σε Inter Display SemiBold.
   Ίδια γραμματοσειρά με το site (Inter), στην εκδοχή του για μεγάλα μεγέθη (opsz 32), σφιχτή απόσταση και ψηφία ίσου
   πλάτους ώστε η τιμή να μη «χορεύει» όταν αλλάζει κύκλος χρέωσης ή ΦΠΑ. Το αρχείο έχει μόνο λατινικούς χαρακτήρες·
   ό,τι ελληνικό υπάρχει (π.χ. «φορές» στα scoreboards) πέφτει αυτόματα στο Inter.
   Σημεία: τιμές καρτών πακέτων (.kn-price), τιμές κεφαλίδων του αναλυτικού πίνακα, «Από» του hero, scoreboards. */
@font-face{font-family:'Inter Display';src:url(/assets/fonts/Inter-Display.woff2?v=4b73e2ff) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
#main-content .main-price .vatPriceElement,#main-content .main-price .kn-eur,
#main-content .hero .vatPriceElement.text--color-salem-promo,
#main-content .kn-hwq__num{font-family:'Inter Display',Inter,Montserrat,Arial,Helvetica,sans-serif;font-variation-settings:'opsz' 32;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
#main-content .main-price .kn-eur{font-size:.55em;margin-left:.15em;letter-spacing:0}
#main-content .main-price .vatPriceElement+.kn-eur{font-size:1.8rem}
/* Κάρτες πακέτων: μεγαλύτερη τιμή (ήταν 4,8 / 3,2 / 2,8rem ανά πλάτος) */
#main-content .kn-price .vatPriceElement{font-size:4.4rem;line-height:1.1}
#main-content .kn-price .kn-eur{font-size:2.2rem}
@media screen and (min-width:1801px){#main-content .kn-price .vatPriceElement{font-size:5.2rem}#main-content .kn-price .kn-eur{font-size:2.6rem}}
@media screen and (max-width:1279px){#main-content .kn-price .vatPriceElement{font-size:4rem}#main-content .kn-price .kn-eur{font-size:2rem}}
@media screen and (max-width:767px){#main-content .kn-price .vatPriceElement{font-size:3.6rem}#main-content .kn-price .kn-eur{font-size:1.8rem}}

/* 30/09 (Christianos): κίνηση με το scroll. Ενεργή ΜΟΝΟ όταν η σελίδα φορτώνει το konet-motion.js
   (βάζει την κλάση kn-rv-on στο <html>). Χωρίς JS ή με «λιγότερη κίνηση», όλα φαίνονται κανονικά. */
.kn-rv-on .fade-up-element { opacity: 0; transform: translateY(6.4rem); transition: opacity .4s ease-in-out, transform .4s ease-in-out; }
.kn-rv-on .fade-up-element.visible { opacity: 1; transform: translateY(0); }
.kn-rv-on .kn-rv { opacity: 0; transform: translate3d(0, 3.2rem, 0); transition: opacity 1.4s cubic-bezier(.2,.7,.2,1), transform 1.4s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rv-d, 0ms); }
.kn-rv-on .kn-rv.is-in { opacity: 1; transform: none; }
.kn-rv-line { position: relative; border-top-color: transparent !important; }
.kn-rv-line::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--color-transparent-light-20, rgba(255,255,255,.2)); }
.kn-rv-on .kn-rv-line::before { transform: scaleX(0); transform-origin: left; transition: transform 1.9s cubic-bezier(.2,.7,.2,1) calc(var(--rv-d, 0ms) + 200ms); }
.kn-rv-on .kn-rv-line.is-in::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .kn-rv-on .fade-up-element, .kn-rv-on .kn-rv, .kn-rv-on .kn-rv-line::before { opacity: 1; transform: none; transition: none; }
}

/* 30/09: πίνακες που ανοίγουν με κουμπί «+» (<details class="kn-acc">). Με JS τα κουμπιά ([data-kn-acc-btn]) ζουν αλλού
   στο section και τα summary κρύβονται· χωρίς JS φαίνονται τα summary και ανοίγουν κανονικά. */
.kn-a__toggle { display: inline-flex; align-items: center; gap: 1.6rem; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; color: #fff; font: inherit; }
.kn-a__toggle:focus-visible, .kn-acc > summary:focus-visible { outline: 2px solid #4D82C8; outline-offset: .6rem; border-radius: 99rem; }
.kn-a__ring { position: relative; width: 5.6rem; height: 5.6rem; flex: none; display: block; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); transition: background-color .3s, border-color .3s, transform .6s cubic-bezier(.2,.7,.2,1); }
.kn-a__ring::before, .kn-a__ring::after { content: ''; position: absolute; left: 50%; top: 50%; width: 1.8rem; height: 1.5px; margin: -.75px 0 0 -.9rem; background: #fff; border-radius: 1px; }
.kn-a__ring::after { transform: rotate(90deg); }
.kn-a__toggle:hover .kn-a__ring, .kn-a__toggle:focus-visible .kn-a__ring, .kn-acc > summary:hover .kn-a__ring { background: rgba(255,255,255,.1); border-color: #fff; }
.kn-a__toggle[aria-expanded="true"] .kn-a__ring, .kn-a__ring--x, .kn-acc[open]:not(.is-closing) > summary .kn-a__ring { transform: rotate(45deg); }
.kn-a__lbl { display: grid; gap: .2rem; }
.kn-a__sub { opacity: .72; }
.kn-acc-btns { display: none; }
.kn-rv-on .kn-acc-btns { display: grid; gap: 2.4rem; justify-items: start; }
.kn-acc *, .kn-acc *::before, .kn-acc *::after { box-sizing: border-box; }
.kn-acc > summary.kn-acc__sum { display: flex; align-items: center; gap: 2rem; padding: 2.4rem 0; cursor: pointer; list-style: none; background: none; color: #fff; }
.kn-acc > summary.kn-acc__sum::-webkit-details-marker { display: none; }
.kn-acc__t { font-size: 2.2rem; line-height: 3rem; font-weight: 600; color: #fff; }
.kn-acc__s { font-size: 1.5rem; line-height: 2.2rem; color: #fff; opacity: .72; }
.kn-rv-on .kn-acc > summary.kn-acc__sum { display: none; }
.kn-acc__close { padding-top: 2.4rem; }
.kn-acc__close .kn-a__ring { width: 4.4rem; height: 4.4rem; }
@media (max-width: 767px) {
  .kn-acc__t { font-size: 1.8rem; line-height: 2.6rem; }
  .kn-acc > summary.kn-acc__sum { gap: 1.4rem; }
  .kn-a__ring { width: 4.8rem; height: 4.8rem; }
}

/* Support section (από την αρχική, 19/09 Christianos, κοινό από 01/10): σχεδόν μαύρο #05080E με δύο μπλε ανταύγειες, πάνω αριστερά και κάτω δεξιά. Χωρίς πλέγμα. */
.knt-support{position:relative;isolation:isolate;background-color:#05080E;background-image:radial-gradient(88rem 58rem at 6% -6%,rgba(38,93,171,.38),rgba(38,93,171,0) 70%),radial-gradient(96rem 62rem at 96% 104%,rgba(38,93,171,.36),rgba(38,93,171,0) 70%)}
@media screen and (min-width:1024px){.knt-support .grid--m-2{grid-template-columns:1.2fr 1fr}}
/* 08/10 (Christianos): λευκή εκδοχή του support block (web hosting), ανάμεσα στα εργαλεία και τις κριτικές. Χωρίς ανταύγειες, λωρίδα με ανοιχτά χρώματα. */
.knt-support--light{background-color:#fff;background-image:none}
.knt-support--light .knt-strip{border-top-color:#DCE2EA}
.knt-support--light .knt-strip>li{color:#15243A}
.knt-support--light .knt-strip>li+li{border-left-color:#DCE2EA}
.knt-support--light .knt-strip a{color:#15243A}
.knt-support--light .knt-strip small{color:#5A6675}
.knt-support--light .knt-strip .knt-icon svg,.knt-support--light .knt-strip .knt-icon svg *{fill:#265DAB}
/* Λωρίδα εμπιστοσύνης στο κάτω μέρος σκούρων sections (19/09, Christianos): 4 στοιχεία με κάθετα διαχωριστικά στο support,
   ένα στοιχείο με το λογότυπο της ΕΕΤΤ στο section αναζήτησης domain. */
.knt-strip{list-style:none;margin:0;padding:2.8rem 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.14)}
.knt-strip>li{display:flex;align-items:center;justify-content:center;gap:1.2rem;padding:.4rem 2rem;color:#fff;font-size:1.5rem;line-height:1.4;font-weight:500}
@media screen and (min-width:1281px){.knt-strip:not(.knt-strip--one){grid-template-columns:1.3fr 1fr 1.15fr 1.2fr}.knt-strip>li{white-space:nowrap;padding-left:1.2rem;padding-right:1.2rem}}
.knt-strip>li+li{border-left:1px solid rgba(255,255,255,.14)}
.knt-strip a{display:inline-flex;align-items:center;gap:1.2rem;color:#fff;text-decoration:none}
.knt-strip a:hover .knt-strip__t{text-decoration:underline}
.knt-strip small{font-size:inherit;font-weight:400;color:rgba(255,255,255,.72)}
.knt-strip .knt-icon svg,.knt-strip .knt-icon svg *{fill:#4D82C8}
.knt-strip__g{width:2.2rem;height:2.2rem;flex:0 0 auto}
.knt-strip--one{grid-template-columns:minmax(0,1fr);width:100%;max-width:120rem}
.knt-strip--one>li{gap:2rem}
.knt-strip__logo{height:3.6rem;width:auto;flex:0 0 auto}
.knt-strip__sep{width:1px;height:3.2rem;background:rgba(255,255,255,.28);flex:0 0 auto}
@media screen and (max-width:1023px){
.knt-strip{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem}
.knt-strip>li{justify-content:flex-start}
.knt-strip>li:nth-child(odd){border-left:0;padding-left:0}
.knt-strip--one{grid-template-columns:minmax(0,1fr)}
.knt-strip--one>li{justify-content:center}
}
@media screen and (max-width:639px){
.knt-strip{grid-template-columns:minmax(0,1fr);row-gap:1.6rem}
.knt-strip>li,.knt-strip>li+li{border-left:0;padding-left:0;padding-right:0}
.knt-strip--one>li{justify-content:flex-start;gap:1.4rem}
.knt-strip__logo{height:3rem}
}
/* Ambient φωτισμός πίσω από εικόνα (06/10 αρχική, 07/10 κοινό και πιο δυνατό, Christianos «να ξεχωρίζει λίγο»): μπλε της παλέτας, απλώνει γύρω από την εικόνα. */
/* 08/10 (Christianos): πολύ ελαφρύς ambient φωτισμός σε ΛΕΥΚΑ sections, σε ένα σημείο τους. Κλάση στο section + θέση/μέγεθος με custom properties
   (--amb-x/--amb-y κέντρο, --amb-w/--amb-h διάμετροι). Μόνο radial gradient μέσα στα όρια του section (χωρίς blur, χωρίς overflow), άρα ποτέ δεν κόβεται. */
.knt-ambient{position:relative;isolation:isolate}
.knt-ambient::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse var(--amb-w,70%) var(--amb-h,60%) at var(--amb-x,50%) var(--amb-y,50%),rgba(38,93,171,.11),rgba(77,130,200,.045) 48%,rgba(77,130,200,0) 72%);-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.knt-glow{position:relative;isolation:isolate}
/* 08/10 (Christianos): το φως σβήνει ΟΜΑΛΑ πριν φτάσει στα όρια του section (μικρότερο inset + mask με fade), αλλιώς κοβόταν σε οριζόντια γραμμή από το επόμενο section. */
.knt-glow::before{content:"";position:absolute;inset:-18% -16% -15%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 70% 66% at 50% 52%,rgba(38,93,171,.5),rgba(77,130,200,.24) 46%,rgba(77,130,200,0) 72%);filter:blur(36px);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 35%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 35%,transparent 100%)}
