*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f7f9fc;color:#101828;font-family:Arial,Helvetica,sans-serif}

.hero{height:292px;position:relative;overflow:hidden;background:#061525;color:white}
.hero-photo{position:absolute;inset:0;background-image:url("../assets/hero-print.jpg");background-position:center right;background-size:cover;opacity:.95}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,16,30,.98) 0%,rgba(3,16,30,.93) 42%,rgba(3,16,30,.35) 74%,rgba(3,16,30,.08) 100%)}
.hero-content{position:relative;z-index:2;width:min(1240px,94%);margin:auto;padding-top:24px}
.hero h1{font-size:58px;line-height:1;margin:0 0 14px;font-weight:800;letter-spacing:-2px}
.hero p{max-width:710px;font-size:17px;line-height:1.52;margin:0;color:#f3f6fa}
.hero-points{display:flex;gap:34px;margin-top:18px;font-size:14px;align-items:center}
.hero-points span{display:flex;gap:9px;align-items:center}
.hero-points span:first-letter{font-size:24px}

.container{width:min(1240px,94%);margin:auto}
.toolbar{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filter{border:0;background:#eaf0f5;border-radius:8px;padding:11px 18px;color:#172033;font-size:14px;cursor:pointer}
.filter.active{background:#0b75ef;color:#fff}
.toolbar input{width:245px;height:40px;border:1px solid #d6dee8;border-radius:8px;padding:0 14px;font-size:14px;outline:none;background:white}
.toolbar input:focus{border-color:#0b75ef}

.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:stretch}
.card{background:#fff;border:1px solid #e1e6ec;border-radius:10px;overflow:hidden;box-shadow:0 2px 7px rgba(16,24,40,.04);display:flex;flex-direction:column;min-width:0;transition:transform 0.25s ease, box-shadow 0.25s ease;height:100%}
.card:hover{transform:translateY(-7px);box-shadow:0 12px 22px rgba(16,24,40,.12)}

/* Previews */
.preview{height:262px;margin:0;position:relative;background:#fff;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #eef1f4;flex-shrink:0}

/* Ειδικά ύψη previews ανά τύπο */
.preview.test-preview { height: 220px; }
.preview.sheet, .a4 { height: 224px; }

.disc{margin:16px;width:190px;height:190px;border:1.5px solid #6b7280;border-radius:50%;position:relative}
.disc:before{content:"";position:absolute;left:50%;top:0;height:14px;border-left:1px solid #6b7280}
.disc:after{content:"";position:absolute;left:50%;bottom:0;height:14px;border-left:1px solid #6b7280}
.disc .disc-ring{position:absolute;inset:62px;border:1.5px solid #6b7280;border-radius:50%}
.disc .hole{position:absolute;inset:76px;border:1.5px solid #6b7280;border-radius:50%;background:white}
.disc.blue{border-color:#0787ff;height:190px}
.disc.blue:before,.disc.blue:after{border-color:#6b7280}

.test-preview{margin:0;height:226px;border:1px solid #bfc8d2;display:block;padding:12px 14px;width:100%;}
.test-title{font-size:15px;font-weight:800;text-align:center}
.test-sub{text-align:center;font-size:9px;margin:3px 0 12px}
.test-bars{display:flex;height:34px}
.test-bars i{flex:1}
.test-bars i:nth-child(1){background:#000}
.test-bars i:nth-child(2){background:#777}
.test-bars i:nth-child(3){background:#159de0}
.test-bars i:nth-child(4){background:#174fff}
.test-bars i:nth-child(5){background:#ef263c}
.test-bars i:nth-child(6){background:#ffb91c}
.test-bars i:nth-child(7){background:#28a745}
.test-bars i:nth-child(8){background:#000}
.gray-bars{height:28px;margin-top:11px;background:repeating-linear-gradient(90deg,#111 0 5px,#eee 5px 10px)}
.crosshair{font-size:31px;text-align:right;margin-top:11px}

.cover{margin:17px;height:190px;border:1.5px solid #777;display:grid;grid-template-columns:1fr 34px 1fr;text-align:center;align-items:center;color:#111;font-size:12px}
.cover:before,.cover:after{content:""}
.cover b{font-size:9px;font-weight:400;writing-mode:vertical-rl}
.cover.dvd,.cover.bluray{grid-template-columns:1fr 42px 1fr;height:190px}
.cover.bluray{border-color:#1683ff}

.sheet{display:grid;grid-template-columns:repeat(3,57px);grid-template-rows:repeat(2,57px);gap:7px;height:190px;align-content:center;justify-content:center}
.sheet i{border:1px solid #6b7280;border-radius:50%;position:relative}
.sheet i:after{content:"";position:absolute;inset:23px;border:1px solid #6b7280;border-radius:50%;background:white}
.a4 {
    width: 200px;
    border: 1px solid #777;
    flex-direction: column;
    align-self: center;
}
.a4 span{font-size:38px;font-weight:800}
.a4 small{font-size:8px;margin-top:8px}

/* Ευθυγράμμιση Card Body με Flexbox & Σταθερά Ύψη */
.card-body {
  padding: 14px 12px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-body small {
  text-transform: uppercase;
  color: #667085;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: 4px;
  display: block;
  height: 16px;
}

.card h2 {
  font-size: 16px;
  margin: 0 0 6px;
  line-height: 1.25;
  height: 40px;
  overflow: hidden;
}

.card p {
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
  color: #475467;
  height: 36px;
  overflow: hidden;
margin-bottom: 10px;
}

/* Κουμπιά & Actions */
.card-actions, 
.card > .download,
.card-body > .download {
  margin-top: auto !important;
}

.card-actions {
  padding-top: 12px;
}

.card-actions .download {
  flex: 1;
  padding: 0 2px;
  font-size: 10.5px;
  text-align: center;
}

.download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0b75ef;
  color: #fff;
  text-decoration: none;
  border-radius: 7px;
  height: 38px;
  font-size: 13px;
  font-weight: 700;
  width: 100%;
  margin-top:10px;
}

.download:hover {
  background: #0965d1;
}

.download-secondary {
  background: #eaf0f5;
  color: #172033;
  margin-top:10px;
}

.download-secondary:hover {
  background: #d8e2ec;
}

.notice{margin:18px 0 20px;padding:12px 18px;border-radius:10px;background:#e7f2ff;color:#24517d;display:flex;align-items:center;gap:14px;font-size:13px}
.notice b{color:#1263b5}
.notice span{flex:1}
.notice em{font-size:18px;color:#086de2;white-space:nowrap}

.hero-points > span {
    background: rgba(11, 117, 239, 0.22); /* Ημιδιαφανές μπλε φόντο */
    padding: 10px 14px;
    border-radius: 8px;
    
    /* Το βασικό εφέ γυαλιού */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Για υποστήριξη σε Safari */
    
    /* Γυάλινο περίγραμμα & σκιά */
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    
    color: #fff; /* Εξασφαλίζει ότι το κείμενο διαβάζεται καθαρά */
}

.hero-points > span {
    transition: all 0.3s ease;
}

.hero-points > span:hover {
    background: rgba(11, 117, 239, 0.35);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}
#filters .filter {
  position: relative;
  background: #eaf0f5;
  border: 2px solid transparent; /* Χώρος για το border */
  border-radius: 8px;
  padding: 11px 18px;
  color: #172033;
  font-size: 14px;
  cursor: pointer;
  isolation: isolate;
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* Pseudo-element που σχεδιάζει το animated border */
#filters .filter::before {
  content: "";
  position: absolute;
  inset: -2px; /* Καλύπτει ακριβώς την περιοχή του border */
  border-radius: 8px;
  padding: 2px; /* Το πάχος της γραμμής */
  
  /* Conic gradient που ξεκινάει από κάτω-αριστερά (225deg) */
  background: conic-gradient(
    from 225deg,
    #0b75ef var(--border-angle, 0deg),
    transparent var(--border-angle, 0deg)
  );
  
  /* Mask για να φαίνεται ΜΟΝΟ το περίγραμμα και όχι το εσωτερικό */
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
          
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, --border-angle 0.5s linear;
}

/* Hover state: Ενεργοποίηση και ομαλή περιστροφή 0deg -> 360deg */
#filters .filter:hover::before {
  opacity: 1;
  --border-angle: 360deg;
}

/* Καταγραφή της Custom Property για να μπορεί το CSS να κάνει animate τις μοίρες */
@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* Active state */
#filters .filter.active {
  background: #0b75ef;
  color: #fff;
}
footer {
    display: flex;
    flex-direction: column;
    text-align: center;
}
a.footer-btn.btn-black {
    background: #000000;
height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration:none;
    color:white;
}
a.footer-btn.btn-blue {
    background: #0b75ef;
height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration:none;
    color:white;
}

@media(max-width:1100px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .toolbar{align-items:flex-start;padding:15px 0}
  .toolbar input{width:100%}
}
@media(max-width:700px){
  .hero{height:auto;min-height:420px}
  .hero-content{padding:38px 0}
  .hero h1{font-size:44px}
  .hero p{font-size:16px}
  .hero-points{flex-direction:column;align-items:flex-start;gap:14px}
  .toolbar{flex-direction:column}
  .filters{width:100%}
  .toolbar input{width:100%}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .grid{grid-template-columns:1fr}
  .preview{height:245px}
  .hero h1{font-size:40px}
}