:root {
      --navy:       #1a2a52;
      --navy-mid:   #2e4a8a;
      --blue:       #5777BA;
      --blue-light: #7b95cc;
      --sky:        #a8bade;
      --sky-pale:   #e8edf8;
      --ice:        #f4f6fb;
      --white:      #ffffff;
      --muted:      #5e6e8a;
      --border:     #d0d9ee;
      --font-display: 'Bricolage Grotesque', sans-serif;
      --font-body:    'Outfit', sans-serif;
      --font-mono:    'Outfit', sans-serif;
      --ease-spring:  cubic-bezier(0.34,1.56,0.64,1);
      --ease-expo:    cubic-bezier(0.16,1,0.3,1);
      --shadow-sm: 0 2px 12px rgba(26,42,82,.07);
      --shadow-md: 0 8px 32px rgba(26,42,82,.12);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--font-body); background: var(--white); color: var(--navy); -webkit-font-smoothing: antialiased; }
    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;  /* header → main → footer σε στήλη */
    }

    main { flex: 1; }  /* παίρνει όλο τον διαθέσιμο χώρο */

    /* ── HEADER ── */
    header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 18px 48px; display: flex; align-items: center; justify-content: space-between; }
    .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
    .logo-mark { width: 36px; height: 36px; background: linear-gradient(135deg, var(--navy-mid) 0%, var(--blue) 100%); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: #fff; }
    .logo-text { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em; color: var(--navy); }
    .logo-text .at { color: var(--blue); }
    nav { display: flex; align-items: center; gap: 28px; }
  nav a {
      /* font-size: 1.2rem; font-weight: 500;
      color: var(--muted); text-decoration: none;
      transition: color .2s; */
      font-size: 1rem; font-weight: 500;
      color: var(--muted); text-decoration: none;
      position: relative; padding-bottom: 3px;
      transition: color .22s, font-weight .22s;
    }
    nav a:not(.nav-cta)::after {
      content: '';
      position: absolute; bottom: -1px; left: 0;
      width: 0; height: 2px;
      background: var(--blue); border-radius: 2px;
      transition: width .28s cubic-bezier(0.16,1,0.3,1);
    }
    nav a:hover { color: var(--navy);  }
    nav a:not(.nav-cta):hover::after { width: 100%; }
    nav a.active { color: var(--navy);  }
    nav a.active:not(.nav-cta)::after { width: 100%; }
    .nav-cta { background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); color: #fff !important; padding: 9px 20px; border-radius: 8px; font-weight: 600 !important; }

    /* ── BREADCRUMB ── */
    .breadcrumb { background: var(--ice); border-bottom: 1px solid var(--border); padding: 12px 48px; }
    .breadcrumb-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); }
    .breadcrumb a { color: var(--blue); text-decoration: none; }
    .breadcrumb a:hover { text-decoration: underline; }
    .breadcrumb-sep { color: var(--border); }

    /* ── ARTICLE HERO ── */
    .article-hero { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-mid) 100%); padding: 56px 48px 48px; }
    .hero-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 40px; }
    .article-cat { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sky); background: rgba(168,186,222,.15); padding: 5px 12px; border-radius: 100px; display: inline-flex; margin-bottom: 16px; }
    .article-hero h1 { font-family: var(--font-display); font-size: clamp(1.8rem,3.5vw,2.8rem); font-weight: 800; letter-spacing: -.04em; color: #fff; line-height: 1.15; margin-bottom: 20px; }
    .article-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
    .meta-item { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: rgba(255,255,255,.55); }
    .meta-item svg { opacity: .7; }
    .meta-author { background: rgba(255,255,255,.1); padding: 6px 12px; border-radius: 100px; }

    /* share buttons */
    .share-box { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
    .share-label { font-size: .75rem; color: rgba(255,255,255,.4); text-align: right; letter-spacing: .05em; text-transform: uppercase; font-family: var(--font-mono); }
    .share-btns { display: flex; gap: 8px; }
    .share-btn { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: .8rem; text-decoration: none; transition: background .2s; }
    .share-btn:hover { background: rgba(255,255,255,.22); color: #fff; }

    /* ── CONTENT LAYOUT ── */
    .article-layout { max-width: 1240px; margin: 0 auto; padding: 56px 48px 96px; display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start; }

    /* ── ARTICLE BODY ── */
    .article-body { min-width: 0; }
    .article-content { font-size: 1.02rem; line-height: 1.8; color: #2d3a55; }
    .article-content h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; color: var(--navy); margin: 40px 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--border); }
    .article-content h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--navy); margin: 28px 0 10px; }
    .article-content p { margin-bottom: 18px; }
    .article-content ul, .article-content ol { margin: 0 0 18px 24px; }
    .article-content li { margin-bottom: 8px; }
    .article-content strong { color: var(--navy); font-weight: 600; }
    .article-content a { color: var(--blue); text-decoration: underline; }
    .article-content a:hover { color: var(--navy-mid); }
    .article-content blockquote { border-left: 4px solid var(--blue); background: var(--sky-pale); padding: 16px 20px; border-radius: 0 10px 10px 0; margin: 24px 0; font-style: italic; color: var(--navy-mid); }
    .article-content code { font-family: var(--font-mono); background: var(--ice); padding: 2px 7px; border-radius: 5px; font-size: .88rem; color: var(--navy-mid); }
    .article-content table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: .9rem; }
    .article-content th { background: var(--navy); color: #fff; padding: 10px 14px; text-align: left; font-weight: 600; }
    .article-content td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
    .article-content tr:nth-child(even) td { background: var(--ice); }

    /* Tags */
    .article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
    .tag-label { font-size: .78rem; color: var(--muted); font-weight: 500; align-self: center; }
    .art-tag { font-family: var(--font-mono); font-size: .72rem; padding: 5px 12px; background: var(--ice); border: 1px solid var(--border); border-radius: 100px; color: var(--muted); }

    /* CTA box at end of article */
    .article-cta { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); border-radius: 16px; padding: 32px; text-align: center; margin-top: 40px; }
    .article-cta h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
    .article-cta p { color: rgba(255,255,255,.6); font-size: .9rem; margin-bottom: 20px; }
    .article-cta a { display: inline-block; background: var(--blue); color: #fff; padding: 12px 24px; border-radius: 10px; font-weight: 600; text-decoration: none; font-size: .9rem; transition: transform .2s, background .2s; }
    .article-cta a:hover { transform: translateY(-2px); background: var(--blue-light); }

    /* ── SIDEBAR ── */
    .sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 24px; }

    .sidebar-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 22px; }
    .sidebar-title { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--navy); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
    .sidebar-title svg { color: var(--blue); }

    /* Table of contents */
    .toc-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
    .toc-item a { font-size: .84rem; color: var(--muted); text-decoration: none; display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 8px; transition: background .2s, color .2s; line-height: 1.4; }
    .toc-item a:hover { background: var(--ice); color: var(--navy); }
    .toc-item a.active { color: var(--blue); background: var(--sky-pale); font-weight: 500; }
    .toc-num { font-family: var(--font-mono); font-size: .68rem; color: var(--border); padding-top: 2px; flex-shrink: 0; }

    /* Related articles */
    .related-list { display: flex; flex-direction: column; gap: 12px; }
    .related-item { text-decoration: none; color: inherit; display: flex; gap: 12px; padding: 10px; border-radius: 10px; border: 1px solid transparent; transition: border-color .2s, background .2s; }
    .related-item:hover { border-color: var(--border); background: var(--ice); }
    .related-cat { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 4px; }
    .related-title { font-size: .84rem; font-weight: 600; color: var(--navy); line-height: 1.35; }
    .related-date { font-size: .75rem; color: var(--muted); margin-top: 4px; }
    .related-arrow { color: var(--blue); font-size: 1rem; align-self: center; margin-left: auto; flex-shrink: 0; transition: transform .2s; }
    .related-item:hover .related-arrow { transform: translateX(4px); }

    /* Back button */
    .back-btn { display: flex; align-items: center; gap: 8px; color: var(--blue); font-size: .88rem; font-weight: 600; text-decoration: none; padding: 12px 16px; background: var(--sky-pale); border: 1px solid var(--border); border-radius: 10px; transition: background .2s, transform .2s; }
    .back-btn:hover { background: var(--border); transform: translateX(-3px); }

    /* Not found */
    .not-found { text-align: center; padding: 120px 40px; }
    .not-found h2 { font-family: var(--font-display); font-size: 2rem; color: var(--navy); margin-bottom: 12px; }
    .not-found p { color: var(--muted); margin-bottom: 24px; }
    .not-found a { color: var(--blue); font-weight: 600; }

    /* Loading */
    .skeleton { background: linear-gradient(90deg, var(--border) 25%, var(--ice) 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
    @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

    /* Footer */
    footer { background: var(--navy); color: rgba(255,255,255,.5); padding: 40px 48px; }
    .footer-bottom { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: .82rem; flex-wrap: wrap; gap: 12px; }
    .footer-bottom a { color: rgba(255,255,255,.4); text-decoration: none; }
    .footer-bottom a:hover { color: rgba(255,255,255,.8); }

    /* Progress bar */
    .progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--blue-light)); z-index: 9999; transition: width .1s; width: 0%; }

    /* Responsive */
    @media (max-width: 1024px) {
      .article-layout { grid-template-columns: 1fr; gap: 40px; }
      .sidebar { position: static; }
      .hero-inner { grid-template-columns: 1fr; }
      .share-box { align-items: flex-start; }
    }
    @media (max-width: 768px) {
      header, .breadcrumb, .article-hero, .article-layout, footer { padding-left: 20px; padding-right: 20px; }
      nav a:not(.nav-cta) { display: none; }
    }
  
/* ── Landing pages (added) ── */
.lp-hero { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-mid) 100%); padding: 64px 48px 56px; }
.lp-hero .hero-inner { display:block; max-width: 1240px; }
.lp-hero h1 { font-family: var(--font-display); font-size: clamp(1.9rem,4vw,3rem); font-weight: 800; letter-spacing: -.04em; color: #fff; line-height: 1.12; margin-bottom: 20px; max-width: 900px; }
.lp-lead { color: rgba(255,255,255,.78); font-size: 1.12rem; line-height: 1.7; max-width: 760px; margin-bottom: 28px; }
.lp-lead strong { color:#fff; }
.btn-row { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; padding: 13px 22px; border-radius: 10px; font-weight: 600; text-decoration: none; font-size: .95rem; transition: transform .2s, background .2s; }
.btn-primary { background: var(--blue); color:#fff; }
.btn-primary:hover { background: var(--blue-light); transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.25); }
.btn-ghost:hover { background: rgba(255,255,255,.2); }
.trust-row { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top: 28px; color: rgba(255,255,255,.6); font-size:.85rem; }
.trust-row span { display:inline-flex; align-items:center; gap:7px; }
.trust-row span::before { content:''; width:14px; height:14px; background: var(--sky); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }
.link-cards { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin: 8px 0 24px; }
.link-card { display:flex; flex-direction:column; gap:6px; padding:18px; border:1px solid var(--border); border-radius:14px; text-decoration:none !important; background: var(--ice); transition: border-color .2s, transform .2s; }
.link-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.link-card span { font-family: var(--font-display); font-weight:700; color: var(--navy); }
.link-card small { color: var(--muted); font-size:.85rem; line-height:1.45; }
.faq-block { margin-top: 48px; }
.faq-block h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; color: var(--navy); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--border); }
.faq-block details { border:1px solid var(--border); border-radius:12px; padding: 0 18px; margin-bottom:10px; background:#fff; }
.faq-block summary { cursor:pointer; padding:16px 0; font-weight:600; color: var(--navy); list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq-block summary::-webkit-details-marker { display:none; }
.faq-block summary::after { content:'+'; color: var(--blue); font-size:1.2rem; line-height:1; }
.faq-block details[open] summary::after { content:'–'; }
.faq-block details p { padding: 0 0 16px; color:#2d3a55; line-height:1.7; }
.article-content ol { counter-reset: none; }
.article-content table { display:block; overflow-x:auto; }
@media (min-width: 700px) { .article-content table { display:table; } }
.site-footer { background: var(--navy); color: rgba(255,255,255,.55); padding: 48px 48px 32px; }
.site-footer .cols { max-width:1240px; margin:0 auto 32px; display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:28px; }
.site-footer h4 { color:#fff; font-family: var(--font-display); font-size:.95rem; margin-bottom:12px; }
.site-footer ul { list-style:none; }
.site-footer li { margin-bottom:8px; font-size:.88rem; }
.site-footer a { color: rgba(255,255,255,.6); text-decoration:none; }
.site-footer a:hover { color:#fff; }
.site-footer .footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:20px; }
.lang-switch { font-family: var(--font-mono); font-size:.75rem !important; border:1px solid var(--border); padding:4px 8px !important; border-radius:6px; }
.list-grid { max-width:1240px; margin:0 auto; padding: 48px 48px 96px; display:grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.list-card { border:1px solid var(--border); border-radius:16px; padding:24px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:10px; transition: border-color .2s, transform .2s, box-shadow .2s; background:#fff; }
.list-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.list-card h2 { font-family: var(--font-display); font-size:1.15rem; color: var(--navy); line-height:1.3; letter-spacing:-.02em; }
.list-card p { color: var(--muted); font-size:.9rem; line-height:1.55; }
.list-card .list-meta { font-size:.78rem; color: var(--muted); margin-top:auto; }
@media (max-width: 768px) {
  .lp-hero, .site-footer, .list-grid { padding-left: 20px; padding-right: 20px; }
  header img { height: 52px; }
}