/* ===== DelliCap — Stoelzle-inspired: αέρινο, γεωμετρικό, premium μέσω λιτότητας ===== */
  :root {
    --navy: #003479;        /* DelliCap Primary */
    --navy-dark: #002455;
    --navy-darker: #001A3D;
    --body: #6E7178;        /* απαλό γκρι κειμένου, όπως Stoelzle */
    --heading: #003479;
    --bg: #FFFFFF;
    --bg-soft: #F4F6F9;
    --line: #E8EBEF;
    --trans-fast: .25s ease;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Manrope', 'Century Gothic', sans-serif;
    font-weight: 300; color: var(--body); background: var(--bg);
    font-size: 16.5px; line-height: 1.75; -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { font-weight: 500; color: var(--heading); line-height: 1.2; }
  img { max-width: 100%; display: block; }
  a { text-decoration: none; color: inherit; }
  .container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--navy); color: #fff; font-weight: 500; font-size: 15px;
    letter-spacing: .06em; padding: 14px 32px; border: 1px solid var(--navy);
    transition: all var(--trans-fast); cursor: pointer;
  }
  .btn::after { content: "→"; font-size: 17px; transition: transform var(--trans-fast); }
  .btn:hover { background: var(--navy-dark); }
  .btn:hover::after { transform: translateX(5px); }
  .btn.light { background: transparent; border-color: #fff; color: #fff; }
  .btn.light:hover { background: #fff; color: var(--navy); }
  .btn.outline { background: transparent; color: var(--navy); }
  .btn.outline:hover { background: var(--navy); color: #fff; }

  /* ===== Header — διάφανο πάνω από το hero ===== */
  header.site {
    position: absolute; top: 0; left: 0; right: 0; z-index: 100;
    padding: 0;
  }
  .nav { display: flex; align-items: center; justify-content: space-between; height: 96px; }
  .nav .logo img { height: 44px; width: auto; filter: brightness(0) invert(1); }
  .nav ul { display: flex; gap: 38px; list-style: none; }
  .nav ul a {
    color: #fff; font-size: 13.5px; font-weight: 500;
    letter-spacing: .13em; text-transform: uppercase;
    padding: 10px 0; border-bottom: 1px solid transparent; transition: border-color var(--trans-fast);
  }
  .nav ul a:hover, .nav ul a.active { border-bottom-color: #fff; }
  .nav .right { display: flex; align-items: center; gap: 26px; color: #fff; }
  .nav .phone { color: #fff; font-size: 14px; font-weight: 500; letter-spacing: .04em; }
  .nav .lang { font-size: 13px; letter-spacing: .1em; color: rgba(255,255,255,.75); }
  .nav .lang b { color: #fff; font-weight: 500; }

  /* ===== Hero =====
     Απαλό gradient αντί για επίπεδο λευκό, μεγάλο headline, και το προϊόν να
     βγαίνει έξω από το δεξί όριο ώστε η σελίδα να μη μοιάζει «κουτί σε κουτί». */
  .hero {
    position: relative; display: flex; align-items: center;
    min-height: min(86vh, 740px); padding: 88px 0 64px;
    background:
      radial-gradient(120% 90% at 85% 10%, #EEF2FA 0%, rgba(238,242,250,0) 60%),
      radial-gradient(90% 80% at 8% 95%, #F3F1FA 0%, rgba(243,241,250,0) 55%),
      #fff;
    overflow: hidden;
  }
  .hero .container { display: grid; grid-template-columns: 1fr .92fr; gap: 40px; align-items: center; }
  .hero .content { max-width: 640px; }

  .hero .kicker { color: #8E97A6; font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 22px; }
  .hero h1 {
    color: var(--navy-darker); font-size: clamp(40px, 5.4vw, 66px);
    font-weight: 500; letter-spacing: -1.4px; line-height: 1.04; margin-bottom: 24px;
  }
  .hero p { color: #5B6472; font-size: 17.5px; font-weight: 300; max-width: 44ch; margin-bottom: 34px; }

  .hero .spec { color: #5B6472; background: rgba(255,255,255,.72); border-color: #E2E7F0; border-radius: 999px; }
  .hero .spec b { color: var(--navy); }
  .hero .btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

  /* ---------- Η σκηνή του σφραγίσματος ---------- */
  .hero-seal {
    display: flex; justify-content: flex-end;
    pointer-events: none; user-select: none; -webkit-user-select: none;
    /* Βγαίνει έξω από το container, όπως η οθόνη στο πρότυπο: δίνει βάθος και
       κάνει τη σελίδα να μη σταματά απότομα στο δεξί περιθώριο. */
    margin-right: calc(-1 * min(9vw, 120px));
  }
  .hs-stage { position: relative; width: min(400px, 92%); }

  .hs-jar { width: 100%; height: auto; display: block; }

  .hs-cap {
    position: absolute; z-index: 2;
    /* 78%: το χείλος πιάνει 472 από τα 600px της φωτογραφίας (78,7%) και το καπάκι
       γεμίζει το 95,5% του δικού του πλαισίου. Μετρημένο με canvas, όχι στο μάτι. */
    left: 50%; top: -15%; width: 78%; height: auto;
    transform: translate(-50%, 0) rotate(0deg);
    filter: drop-shadow(0 8px 14px rgba(0,20,60,.22));
    animation: hs-seal 1.05s cubic-bezier(.32,.72,.28,1) .35s both;
  }

  @keyframes hs-seal {
    from { transform: translate(-50%, -190px) rotate(-150deg); opacity: 0; }
    45%  { opacity: 1; }
    to   { transform: translate(-50%, 0) rotate(0deg); opacity: 1; }
  }

  /* ---------- Η διάσταση: η απόδειξη του ταιριάσματος ---------- */
  .hs-dim {
    position: absolute; z-index: 3;
    left: 50%; top: -22%; transform: translateX(-50%);
    width: 79%;
    display: flex; flex-direction: column-reverse; align-items: center; gap: 6px;
  }
  .hs-dim i {
    display: block; width: 100%; height: 1px; background: var(--navy);
    transform: scaleX(0); transform-origin: 50% 50%;
    animation: hs-line .45s cubic-bezier(.4,0,.2,1) 1.5s both;
    position: relative;
  }
  .hs-dim i::before, .hs-dim i::after {
    content: ''; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--navy);
  }
  .hs-dim i::before { left: 0; }
  .hs-dim i::after  { right: 0; }

  .hs-dim b {
    font-size: 12px; font-weight: 500; letter-spacing: .14em;
    color: var(--navy); padding: 0 8px;
    animation: hs-fade .5s ease 1.75s both;
  }

  @keyframes hs-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes hs-fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

  @media (prefers-reduced-motion: reduce) {
    .hs-cap, .hs-dim i, .hs-dim b { animation: none; }
    .hs-dim i { transform: scaleX(1); }
  }

  /* ===== Intro — κεντραρισμένο, όπως "Stoelzle Glass Group" ===== */
  .intro { padding: 0 0 100px; text-align: center; }
  .kicker {
    display: block; color: #9AA3AF; font-size: 12.5px; font-weight: 500;
    letter-spacing: .24em; text-transform: uppercase; margin-bottom: 18px;
  }
  .intro h2 { font-size: clamp(30px, 3.6vw, 42px); margin-bottom: 26px; }
  .intro p { max-width: 760px; margin: 0 auto; font-size: 17px; }
  .intro p + p { margin-top: 18px; }
  .intro .contact-mini { margin-top: 34px; font-size: 15.5px; }
  .intro .contact-mini a { color: var(--navy); font-weight: 500; border-bottom: 1px solid transparent; transition: border-color var(--trans-fast); }
  .intro .contact-mini a:hover { border-bottom-color: var(--navy); }

  /* ===== Product range — λιτές κάρτες σε σειρά ===== */
  .range { padding: 100px 0 96px; text-align: center; }
  .range h2 { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 60px; }
  .range-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 980px; margin: 0 auto; }
  .range-card { background: #fff; border: 1px solid var(--line); transition: all var(--trans-fast); padding-bottom: 28px; }
  .range-card:hover { border-color: var(--navy); box-shadow: 0 18px 44px -18px rgba(0,26,61,.18); transform: translateY(-4px); }
  .range-card .imgwrap { height: 210px; display: flex; align-items: center; justify-content: center; padding: 30px; }
  .range-card .imgwrap img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
  .range-card h3 { font-size: 17px; font-weight: 500; letter-spacing: .02em; }
  .range-card span { display: block; font-size: 13.5px; color: #9AA3AF; margin-top: 4px; }

  /* ===== One stop shop — navy band ===== */
  .band { background: var(--navy); color: #fff; padding: 100px 0; }
  .band .container { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
  .band .kicker { color: rgba(255,255,255,.55); }
  .band h2 { color: #fff; font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 24px; }
  .band p { color: rgba(255,255,255,.82); font-size: 16.5px; }
  .band p + p { margin-top: 16px; }
  .band .btn-row { margin-top: 36px; }
  /* Τα .band-points αφαιρέθηκαν μαζί με τη navy ενότητα της αρχικής —
     το περιεχόμενό της μετακόμισε στην .supplier, κάτω από το hero. */

  /* ===== Τρία image-tiles ===== */
  .tiles { display: grid; grid-template-columns: repeat(3, 1fr); }
  .tile { position: relative; min-height: 340px; display: flex; align-items: flex-end; overflow: hidden; }
  .tile .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s ease; }
  .tile:hover .bg { transform: scale(1.05); }
  .tile .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,18,42,.05) 30%, rgba(0,18,42,.72) 100%); }
  .tile .txt { position: relative; padding: 30px 32px; color: #fff; }
  .tile .txt .kicker { color: rgba(255,255,255,.65); margin-bottom: 8px; font-size: 11.5px; }
  .tile .txt h3 { color: #fff; font-size: 21px; font-weight: 500; }
  .tile .txt p { font-size: 14.5px; color: rgba(255,255,255,.8); margin-top: 6px; max-width: 40ch; }

  /* ===== Get in touch ===== */
  .touch { padding: 110px 0; text-align: center; background: var(--bg-soft); }
  .touch h2 { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 56px; }
  .touch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 900px; margin: 0 auto 50px; }
  .touch .ti {
    width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%;
    border: 1px solid var(--navy); color: var(--navy);
    display: flex; align-items: center; justify-content: center;
  }
  .touch .ti svg { width: 23px; height: 23px; }
  .touch h3 { font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #9AA3AF; margin-bottom: 8px; }
  .touch p, .touch a { font-size: 16.5px; color: #3A4048; font-weight: 400; }
  .touch a:hover { color: var(--navy); }

  /* ===== Footer ===== */
  footer { background: var(--navy-darker); color: rgba(255,255,255,.55); font-size: 14px; }
  footer .top {
    display: flex; justify-content: space-between; align-items: center; gap: 30px;
    padding: 40px 0; border-bottom: 1px solid rgba(255,255,255,.1); flex-wrap: wrap;
  }
  footer .logo img { height: 38px; filter: brightness(0) invert(1); opacity: .95; }
  footer ul { display: flex; gap: 30px; list-style: none; flex-wrap: wrap; }
  footer ul a { color: rgba(255,255,255,.75); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
  footer ul a:hover { color: #fff; }
  footer .bottom { padding: 24px 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }
  footer .bottom a { color: rgba(255,255,255,.75); }
  footer .bottom a:hover { color: #fff; }

  /* Reveal */
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease-out, transform .7s ease-out; }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
  }

  /* ===== Responsive ===== */
  @media (max-width: 1024px) {
    .range-grid { grid-template-columns: repeat(2, 1fr); }
    .band .container { grid-template-columns: 1fr; gap: 44px; }
    .tiles { grid-template-columns: 1fr; }
    .nav ul { display: none; }
  }
  @media (max-width: 680px) {
    .range-grid, .touch-grid { grid-template-columns: 1fr; }
    .hero { min-height: 78vh; }
    .hero { min-height: 0; padding: 48px 0 56px; }
    .hero .container { grid-template-columns: 1fr; gap: 30px; }
    .hero-seal { justify-content: center; margin-right: 0; }
    .hs-stage { width: 230px; }
    .intro { padding: 0 0 64px; }
    .range { padding: 64px 0 60px; }
  }

  /* Κάρτες γκάμας — αριθμός κωδικών & τεχνικό σχέδιο σε hover
     ------------------------------------------------------------
     Ο αριθμός κωδικών είναι σήμα μεγέθους για αγοραστή χονδρικής: «38 κωδικοί»
     λέει περισσότερα από οποιοδήποτε επίθετο. */
  .range-card .range-count {
    font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--navy); opacity: .75; margin-top: 8px;
  }
  .range-card .imgwrap { position: relative; }
  .range-card .imgwrap img.tx {
    position: absolute; inset: 30px; margin: auto;
    max-width: calc(100% - 60px); max-height: calc(100% - 60px);
    object-fit: contain; mix-blend-mode: normal;
    opacity: 0; transition: opacity .3s ease;
  }
  .range-card:hover .imgwrap img.ph.has-tx { opacity: 0; }
  .range-card:hover .imgwrap img.tx { opacity: 1; }

  /* Σε αφή δεν υπάρχει hover — μη κρύβεις περιεχόμενο πίσω από χειρονομία που δεν γίνεται. */
  @media (hover: none) {
    .range-card .imgwrap img.tx { display: none; }
    .range-card .imgwrap img.ph.has-tx { opacity: 1 !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    .range-card .imgwrap img.tx { transition: none; }
  }