:root{
      --blue:#0057ff;
      --blue-dark:#0046ce;
      --blue-soft:#eef5ff;
      --blue-soft-2:#f6f9ff;
      --text:#10213a;
      --muted:#64748b;
      --border:#dfe8f5;
      --white:#ffffff;
      --success:#00a86b;
      --shadow:0 16px 50px rgba(18,48,94,.10);
      --radius:18px;
      --radius-sm:12px;
      --container:1220px;
      --panel:#ffffff;
--accent:#5bd0ff;
    }

    *{box-sizing:border-box}

    html{scroll-behavior:smooth}

    body{
      margin:0;
  font-family:Segoe UI,Roboto,Arial,sans-serif;
 letter-spacing:-0.01em;
      color:var(--text);
      background:#fff;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }

.btn{
  letter-spacing:0;
}

    img{max-width:100%;display:block}
    a{text-decoration:none;color:inherit}
    button,input,select,textarea{font:inherit}

    .container{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
    }

    .topbar{
      background:#f5f9ff;
      border-bottom:1px solid #edf2fb;
      font-size:13px;
      color:#557090;
    }

    .topbar-inner{
      min-height:42px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
    }

    .topbar-left,.topbar-right{
      display:flex;
      align-items:center;
      gap:18px;
      flex-wrap:wrap;
    }

    .navbar{
      position:sticky;
      top:0;
      z-index:20;
      background:rgba(255,255,255,.92);
      backdrop-filter:blur(10px);
      border-bottom:1px solid rgba(223,232,245,.9);
    }

    .nav-inner{
      min-height:82px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:2px;
      font-weight:800;
      font-size:21px;
      letter-spacing:-.02em;
      white-space:nowrap;
    }

    .brand-badge{
      width:42px;
      height:42px;
      border-radius:7px;
      background:linear-gradient(135deg,#0070ff 0%, #00c0ff 100%);
      display:grid;
      place-items:center;
      color:#fff;
      font-weight:900;
      box-shadow:0 10px 24px rgba(0,87,255,.22);
    }

    .nav-links{
      display:flex;
      align-items:center;
      gap:28px;
      color:#35506f;
      font-weight:600;
      font-size:15px;
    }

    .nav-actions{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:48px;
      padding:0 20px;
      border-radius:4px;
      border:none;
      cursor:pointer;
      transition:.22s ease;
      font-weight:800;
      white-space:nowrap;
    }

    .btn:hover{transform:translateY(-1px)}
    .btn-primary{
      background:var(--blue);
      color:#fff;
      box-shadow:0 12px 30px rgba(0,87,255,.22);
    }
    .btn-primary:hover{background:var(--blue-dark)}
    .btn-light{
      background:#fff;
      color:var(--text);
      border:1px solid var(--border);
    }
    .btn-ghost{
      background:transparent;
      color:#27405e;
      border:1px solid transparent;
    }

    .hero-wrap{
      background:
        radial-gradient(circle at top left, rgba(0,119,255,.08), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
      overflow:hidden;
      border-bottom:1px solid #ebf2fb;
    }

    .hero{
      padding:42px 0 64px;
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(360px,430px);
      gap:46px;
      align-items:center;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:38px;
      padding:0 14px;
      border-radius:999px;
      background:#fff;
      border:1px solid #dfe8f5;
      color:#34506f;
      font-weight:700;
      font-size:13px;
      box-shadow:0 10px 30px rgba(18,48,94,.05);
    }

    .hero h1{
      margin:18px 0 14px;
      font-size:clamp(38px, 5vw, 68px);
      line-height:.98;
      letter-spacing:-.045em;
      max-width:760px;
    }

    .hero p{
      margin:0;
      color:var(--muted);
      font-size:19px;
      line-height:1.65;
      max-width:650px;
    }

    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:24px;
    }

    .hero-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:11px 14px;
      border-radius:4px;
      background:#fff;
      border:1px solid #dbe7f6;
      color:#41607f;
      font-size:14px;
      font-weight:700;
    }

    .hero-cta-row{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:28px;
    }

    .signup-card{
      background:#fff;
      border:1px solid #dce7f5;
      border-radius:26px;
      padding:28px;
      box-shadow:var(--shadow);
      position:relative;
    }

    .signup-card:before{
      content:"";
      position:absolute;
      inset:-1px;
      border-radius:26px;
      padding:1px;
      background:linear-gradient(180deg, rgba(0,87,255,.14), rgba(0,87,255,0));
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor;
              mask-composite:exclude;
      pointer-events:none;
    }

    .card-kicker{
      color:#365779;
      font-weight:800;
      font-size:13px;
      text-transform:uppercase;
      letter-spacing:.08em;
    }

    .signup-card h2{
      margin:10px 0 6px;
      font-size:30px;
      line-height:1.08;
      letter-spacing:-.03em;
    }

    .signup-card .sub{
      color:#64748b;
      font-size:15px;
      line-height:1.6;
      margin-bottom:18px;
    }

    .field{
      margin-bottom:12px;
    }

    .field input,
    .field select{
      width:100%;
      min-height:56px;
      border:1px solid #d7e2f1;
      border-radius:16px;
      padding:0 16px;
      outline:none;
      background:#fff;
      color:var(--text);
      transition:border-color .18s ease, box-shadow .18s ease;
    }

    .field input:focus,
    .field select:focus{
      border-color:#6ea2ff;
      box-shadow:0 0 0 4px rgba(0,87,255,.08);
    }

    .mini-note{
      color:#6a7f98;
      font-size:12px;
      line-height:1.5;
      margin-top:10px;
    }

    .quick-pills{
      margin-top:18px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    .quick-pills span{
      background:#f5f8fe;
      border:1px solid #e2eaf6;
      color:#3d5c7d;
      font-size:12px;
      font-weight:700;
      padding:9px 12px;
      border-radius:999px;
    }

    .section{
      padding:84px 0;
    }

    .section-soft{
      background:linear-gradient(180deg, #f8fbff 0%, #fff 100%);
    }

    .section-head{
      text-align:center;
      max-width:760px;
      margin:0 auto 38px;
    }

    .section-head h2{
      margin:0 0 12px;
      font-size:clamp(30px, 4vw, 48px);
      letter-spacing:-.04em;
      line-height:1.06;
    }

    .section-head p{
      margin:0;
      color:var(--muted);
      font-size:18px;
      line-height:1.7;
    }
    
    
     .section-head-med{
      text-align:center;
      max-width:760px;
      margin:0 auto 18px;
    }
    

    .logo-row{
      display:grid;
      grid-template-columns:repeat(5, minmax(0,1fr));
      gap:16px;
    }

    .logo-box{
      min-height:88px;
      border:1px solid #e4ecf7;
      border-radius:18px;
      background:#fff;
      display:grid;
      place-items:center;
      font-size:18px;
      font-weight:800;
      color:#89a0bb;
    }

    .feature-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:20px;
    }

    .feature-card{
      background:#fff;
      border:1px solid #e4ecf7;
      border-radius:22px;
      padding:24px;
      box-shadow:0 8px 24px rgba(18,48,94,.04);
    }

    .feature-icon{
      width:52px;
      height:52px;
      border-radius:16px;
      background:#edf4ff;
      display:grid;
      place-items:center;
      color:var(--blue);
      font-size:24px;
      margin-bottom:16px;
    }

    .feature-card h3{
      margin:0 0 10px;
      font-size:22px;
      letter-spacing:-.02em;
    }

    .feature-card p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-size:15px;
    }

    .zigzag{
      display:grid;
      gap:30px;
    }

    .zig{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      gap:34px;
      align-items:center;
      padding:34px;
      border:1px solid #e7eef8;
      border-radius:28px;
      background:#fff;
      box-shadow:0 10px 34px rgba(18,48,94,.04);
    }

    .zig.reverse .zig-copy{order:2}
    .zig.reverse .zig-visual{order:1}

    .zig-copy h3{
      margin:0 0 14px;
      font-size:36px;
      line-height:1.08;
      letter-spacing:-.04em;
    }

    .zig-copy p{
      margin:0;
      color:var(--muted);
      font-size:17px;
      line-height:1.75;
    }

    .points{
      margin:20px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }

    .points li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:#375170;
      line-height:1.6;
      font-weight:600;
    }

    .points i{
      width:22px;
      height:22px;
      display:grid;
      place-items:center;
      border-radius:999px;
      background:#eaf7f1;
      color:var(--success);
      font-style:normal;
      flex:0 0 auto;
      margin-top:2px;
      font-size:13px;
    }

    .visual{
      background:linear-gradient(180deg, #f9fbff 0%, #eff5ff 100%);
      border:1px solid #dce6f6;
      border-radius:24px;
      padding:22px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
    }

    .window{
      border-radius:20px;
      overflow:hidden;
      background:#fff;
      box-shadow:0 12px 32px rgba(0,54,122,.12);
      border:1px solid #dde7f4;
    }

    .window-top{
      height:52px;
      background:#f6f9ff;
      border-bottom:1px solid #e4ebf8;
      display:flex;
      align-items:center;
      gap:8px;
      padding:0 16px;
    }

    .dot{
      width:10px;
      height:10px;
      border-radius:999px;
      background:#d7e2f0;
    }

    .window-body{
      padding:18px;
    }

    .message{
      border-radius:16px;
      padding:14px 16px;
      line-height:1.6;
      font-size:14px;
      margin-bottom:12px;
    }

    .msg-user{
      background:#f4f8ff;
      color:#324f72;
      border:1px solid #dce8f7;
    }

    .msg-ai{
      background:#0057ff;
      color:#fff;
      box-shadow:0 14px 24px rgba(0,87,255,.18);
    }

    .stats{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:18px;
      margin-top:18px;
    }

    .stat{
      border:1px solid #e5edf7;
      background:#fff;
      border-radius:20px;
      padding:22px;
      text-align:center;
    }

    .stat strong{
      display:block;
      font-size:34px;
      letter-spacing:-.04em;
      margin-bottom:8px;
    }

    .stat span{
      color:var(--muted);
      font-weight:600;
      font-size:14px;
    }

    .steps{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:20px;
    }

    .step{
      border:1px solid #e5edf7;
      border-radius:22px;
      background:#fff;
      padding:24px;
    }

    .step-num{
      width:44px;
      height:44px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:#edf4ff;
      color:var(--blue);
      font-weight:900;
      margin-bottom:14px;
    }

    .step h3{
      margin:0 0 10px;
      font-size:22px;
    }

    .step p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
    }

    .testimonial-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:20px;
    }

    .testimonial{
      background:#fff;
      border:1px solid #e4ecf7;
      border-radius:24px;
      padding:24px;
    }

    .stars{
      color:#ffb400;
      letter-spacing:2px;
      font-size:18px;
      margin-bottom:12px;
    }

    .testimonial p{
      margin:0 0 18px;
      color:#445d7d;
      line-height:1.8;
    }

    .author{
      display:flex;
      align-items:center;
      gap:12px;
      color:#304a6a;
      font-weight:700;
    }

    .avatar{
      width:44px;
      height:44px;
      border-radius:999px;
      background:#edf4ff;
      display:grid;
      place-items:center;
      color:var(--blue);
      font-weight:900;
    }

    .pricing-wrap{
      display:block;
      align-items:start;
    }

    .pricing-copy h2{
      margin:0 0 12px;
      font-size:44px;
      line-height:1.05;
      letter-spacing:-.04em;
    }

    .pricing-copy p{
      margin:0;
      color:var(--muted);
      font-size:18px;
      line-height:1.75;
      max-width:640px;
    }

    .price-card{
      background:#fff;
      border:1px solid #dbe6f5;
      border-radius:30px;
      padding:30px;
      box-shadow:var(--shadow);
      position:relative;
    }

    .price-label{
      display:inline-flex;
      align-items:center;
      min-height:34px;
      padding:0 12px;
      border-radius:999px;
      background:#edf4ff;
      color:var(--blue);
      font-size:12px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.08em;
    }

    .price-card h3{
      margin:14px 0 6px;
      font-size:30px;
    }

    .price-line{
      display:flex;
      align-items:flex-end;
      gap:8px;
      margin:12px 0 16px;
    }

    .price{
      font-size:56px;
      line-height:.95;
      letter-spacing:-.05em;
      font-weight:900;
    }

    .per{
      color:var(--muted);
      font-weight:700;
      margin-bottom:8px;
    }

    .divider{
      height:1px;
      background:#e8eef7;
      margin:0px 0;
    }

    .faq{
      display:grid;
      gap:14px;
      max-width:920px;
      margin:0 auto;
    }

    details{
      border:1px solid #e4ecf7;
      border-radius:18px;
      background:#fff;
      padding:0 20px;
    }

    summary{
      list-style:none;
      cursor:pointer;
      min-height:68px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      font-weight:800;
      font-size:18px;
    }

    summary::-webkit-details-marker{display:none}

    details p{
      margin:0 0 18px;
      color:var(--muted);
      line-height:1.75;
      padding-right:10px;
    }

    .final-cta{
      background:linear-gradient(180deg, #eef5ff 0%, #f8fbff 100%);
      border-top:1px solid #e5edf7;
      border-bottom:1px solid #e5edf7;
    }

    .final-box{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(340px,420px);
      gap:28px;
      align-items:center;
      padding:46px;
      border-radius:30px;
      background:#fff;
      border:1px solid #dce7f5;
      box-shadow:var(--shadow);
    }

    .final-box h2{
      margin:0 0 12px;
      font-size:46px;
      line-height:1.02;
      letter-spacing:-.04em;
    }

    .final-box p{
      margin:0;
      color:var(--muted);
      font-size:18px;
      line-height:1.7;
      max-width:680px;
    }

    .footer{
      padding:40px 0 28px;
      color:#68809b;
      font-size:14px;
    }

    .footer-grid{
      display:grid;
      grid-template-columns:1.4fr 1fr 1fr 1fr;
      gap:24px;
      align-items:start;
    }

    .footer h4{
      margin:0 0 10px;
      color:#1f3550;
      font-size:15px;
    }

    .footer a{
      display:block;
      margin:10px 0;
      color:#68809b;
    }

    .copyright{
      border-top:1px solid #e5edf7;
      margin-top:26px;
      padding-top:18px;
      display:flex;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
    }

    @media (max-width:1100px){
      .hero,
      .pricing-wrap,
      .final-box{
        grid-template-columns:1fr;
      }

      .feature-grid,
      .testimonial-grid,
      .steps,
      .stats,
      .logo-row{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }

      .zig{
        grid-template-columns:1fr;
      }

      .zig.reverse .zig-copy,
      .zig.reverse .zig-visual{
        order:initial;
      }

      .footer-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
    }

    @media (max-width:780px){
      .nav-links{display:none}
      .nav-actions .btn-light{display:none}

      .hero{
        padding-top:24px;
        gap:26px;
      }

      .signup-card{
        padding:22px;
        border-radius:22px;
      }

      .feature-grid,
      .testimonial-grid,
      .steps,
      .stats,
      .logo-row,
      .footer-grid{
        grid-template-columns:1fr;
      }

      .section{
        padding:68px 0;
      }

      .hero h1{
        line-height:1.02;
  letter-spacing:-0.01em; /* ΟΧΙ -0.045 */
}
      .final-box{
        padding:28px;
      }

      .pricing-copy h2,
      .final-box h2{
        font-size:36px;
      }

      .topbar-inner,
      .nav-inner{
        width:min(var(--container), calc(100% - 24px));
        margin:0 auto;
      }
    }
    
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:25px;
  margin-top:40px;
}

.price-card{
  background:var(--panel);
  border-radius:20px;
  padding:25px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:0.3s;
}
.price-card{
  overflow:hidden; /* 🔥 ΑΥΤΟ ΕΙΝΑΙ ΤΟ ΚΛΕΙΔΙ */
}

.ribbon{
  position:absolute;
  top:12px;
  right:-35px; /* παίζεις εδώ */
  background:linear-gradient(135deg,#7cffb3,#5bd0ff);
  color:#06223f;
  padding:8px 40px;
  font-size:12px;
  font-weight:900;
  transform:rotate(32deg);
  text-align:center;
}
.price-card:hover{
  transform:translateY(-5px);
}

.price-card.featured{
  border:2px solid var(--accent);
  transform:scale(1.03);
}

.price-label{
  position:absolute;
  top:-12px;
  right:20px;
  background:var(--accent);
  color:#000;
  padding:5px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:bold;
}

.desc{
  color:var(--muted);
  margin-top:10px;
    margin-bottom:20px;
  line-height:0;
}

.points{
  list-style:none;
  padding:0;
  margin:20px 0;
}

.points li{
  display:flex;
  gap:10px;
  margin-bottom:10px;
}

.btn-outline{
  border:1px solid var(--accent);
  padding:12px;
  text-align:center;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
}

.pricing-note{
  text-align:center;
  margin-top:30px;
  color:var(--muted);
}

@media (max-width: 900px){
  .pricing-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 900px){
  .pricing-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width: 600px){
  .pricing-grid{
    grid-template-columns:1fr;
  }
}

.brand{
  display:flex;
  align-items:center;
  gap:5px;
  font-weight:800;
  font-size:20px;
}

.brand-text{
  color:#0070ff;
  letter-spacing:-0.02em;
}

.brand-badge{
  width:42px;
  height:42px;
  border-radius:7px;
  background:linear-gradient(135deg,#0070ff 0%, #00c0ff 100%);
  display:grid;
  place-items:center;
  box-shadow:0 10px 24px rgba(0,87,255,.22);
}

  /* COOKIE BANNER */
.cookie-banner{
  position:fixed;
  left:20px;
  right:20px;
  bottom:20px;
  z-index:9999;
  background:#fff;
  border:1px solid #dfe8f5;
  border-radius:20px;
  box-shadow:0 20px 50px rgba(16,33,58,.18);
  padding:20px;
  display:none;
}

.cookie-banner.show{
  display:block;
}

.cookie-banner h3{
  margin:0 0 10px;
  font-size:20px;
}

.cookie-banner p{
  margin:0 0 14px;
  color:#5f738d;
  line-height:1.7;
  font-size:14px;
}

.cookie-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.cookie-link{
  color:var(--blue);
  font-weight:700;
  text-decoration:underline;
}

.cookie-settings{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid #e7eef8;
  display:none;
}

.cookie-settings.show{
  display:block;
}

.cookie-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:14px 0;
  border-bottom:1px solid #eef3fa;
}

.cookie-row:last-child{
  border-bottom:none;
}

.cookie-row h4{
  margin:0 0 6px;
  font-size:16px;
}

.cookie-row p{
  margin:0;
  font-size:13px;
  color:#64748b;
}

.cookie-switch{
  position:relative;
  width:54px;
  height:32px;
  flex:0 0 auto;
}

.cookie-switch input{
  display:none;
}

.cookie-slider{
  position:absolute;
  inset:0;
  background:#d7e2f0;
  border-radius:999px;
  cursor:pointer;
  transition:.2s ease;
}

.cookie-slider:before{
  content:"";
  position:absolute;
  width:24px;
  height:24px;
  left:4px;
  top:4px;
  background:#fff;
  border-radius:50%;
  transition:.2s ease;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
}

.cookie-switch input:checked + .cookie-slider{
  background:#0057ff;
}

.cookie-switch input:checked + .cookie-slider:before{
  transform:translateX(22px);
}

.cookie-switch input:disabled + .cookie-slider{
  background:#9fb3ca;
  cursor:not-allowed;
}

.cookie-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9998;
  min-width:52px;
  height:52px;
  border:none;
  border-radius:999px;
  background:#0057ff;
  color:#fff;
  box-shadow:0 16px 40px rgba(0,87,255,.28);
  cursor:pointer;
  font-weight:800;
  padding:0 16px;
}

@media (max-width:780px){
  .cookie-banner{
    left:12px;
    right:12px;
    bottom:12px;
    padding:16px;
    border-radius:18px;
  }

  .cookie-row{
    flex-direction:column;
  }

  .cookie-actions{
    flex-direction:column;
  }

  .cookie-actions .btn{
    width:100%;
  }
}
.legal-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10000;
  padding:20px;
}

.legal-modal.show{
  display:flex;
}

.legal-box{
  background:#fff;
  border-radius:20px;
  max-width:800px;
  width:100%;
  max-height:90vh;
  overflow:auto;
  padding:30px;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.legal-close{
  position:absolute;
  top:15px;
  right:15px;
  border:none;
  background:#f1f5f9;
  width:36px;
  height:36px;
  border-radius:10px;
  cursor:pointer;
  font-size:18px;
}

.legal-content h2{
  margin-top:0;
}

.legal-content p{
  color:#5f738d;
  line-height:1.7;
}