/* SITES4ALL — shared stylesheet */

:root{
  --bg:#071624;
  --bg-alt:#0A2338;
  --bg-panel:#0D2438;
  --input-bg:#0A2338;
  --accent:#3ECBEF;
  --accent-dark:#0E5C6E;
  --text:#FFFFFF;
  --text-dim:#8CA3B4;
  --text-mute:#7FA8BE;
  --border:rgba(255,255,255,0.12);
  --font-display:'Manrope', sans-serif;
  --font-body:'Inter', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body); background:var(--bg); color:var(--text); line-height:1.6;}
h1,h2,h3{font-family:var(--font-display); font-weight:700;}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:920px; margin:0 auto; padding:0 24px 24px 0;}
.eyebrow{font-size:12px; color:var(--text-mute); letter-spacing:1.5px; margin-bottom:8px;}
.section-title{font-size:28px; margin-bottom:36px;}
section{padding:80px 0;}
.bg-alt{background:var(--bg-alt);}

/* Header */
header{position:sticky; top:0; z-index:50; background:rgba(7,22,36,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--border);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 24px 18px 22px; max-width:1120px; margin:0 auto;}
.logo img{height:54px; width:auto;}
#menu-toggle{display:none;}
.hamburger{width:40px; height:40px; border-radius:8px; border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; cursor:pointer; background:none;}
.hamburger span{display:block; width:18px; height:2px; background:#fff; position:relative;}
.hamburger span::before,.hamburger span::after{content:''; position:absolute; width:18px; height:2px; background:#fff; left:0;}
.hamburger span::before{top:-6px;} .hamburger span::after{top:6px;}
.dropdown{position:absolute; top:60px; right:24px; background:var(--bg-panel); border:1px solid var(--border); border-radius:10px; padding:10px; min-width:150px; display:none; flex-direction:column;}
#menu-toggle:checked ~ .dropdown{display:flex;}
.dropdown a{display:block; padding:10px 14px; font-size:13px; letter-spacing:0.5px; text-decoration:none; color:#D7E4EC; border-radius:6px; text-align:right;}
.dropdown a:hover{background:rgba(62,203,239,0.1); color:var(--accent);}
.lang-switch{display:flex; gap:6px; justify-content:flex-end; margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,0.1);}
.lang-switch a{padding:4px 10px; border-radius:14px; font-size:11px; text-decoration:none;}
.lang-switch .active{background:var(--accent); color:#062633;}
.lang-switch .inactive{color:var(--text-dim);}

/* Breadcrumb (article pages) */
.breadcrumb{font-size:12px; color:var(--text-mute); padding:24px 0 0;}
.breadcrumb a{color:var(--text-mute); text-decoration:none;}
.breadcrumb a:hover{color:var(--accent);}

/* Hero */
.hero{padding:124px 24px 154px 24px; display:flex; align-items:center; gap:40px;}
.hero-text{flex:1.1; order:1;}
.hero-kicker{font-family:var(--font-display); font-weight:800; letter-spacing:2px; font-size:14px; margin-bottom:18px;}
.hero h1{font-size:36px; line-height:1.3; color:var(--accent); margin-bottom:16px;}
.hero p{font-size:15px; color:rgba(255,255,255,0.85); max-width:420px; margin-bottom:28px;}
.btn-row{display:flex; gap:12px; flex-wrap:wrap;}
.btn{display:inline-block; padding:13px 24px; border-radius:8px; font-size:14px; font-weight:600; text-decoration:none; font-family:var(--font-body);}
.btn-primary{background:var(--accent); color:#062633;}
.btn-outline{border:1px solid rgba(255,255,255,0.3); color:#fff;}
.hero-visual{flex:1; display:flex; justify-content:center; order:2;}

/* Services */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.svc-card{display:block; text-decoration:none; color:inherit; border:1px solid var(--border); border-radius:12px; padding:24px 16px; text-align:center; transition:.25s;}
.svc-card:hover{background:rgba(62,203,239,0.08); border-color:rgba(62,203,239,0.4); transform:translateY(-4px);}
.svc-ico{width:44px; height:44px; border-radius:50%; background:rgba(62,203,239,0.12); color:var(--accent); display:flex; align-items:center; justify-content:center; margin:0 auto 12px;}
.svc-card h3{font-size:14px; font-weight:600; font-family:var(--font-body);}

/* Projects — grid units 360x180 (2:1 ratio) */
.grid-3{display:grid; grid-template-columns:repeat(auto-fit, minmax(286px, 346px)); gap:16px; justify-content:center;}
.proj-card{position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--border); text-decoration:none; display:block; transition:transform .3s;}
.proj-card:hover{transform:translateY(-4px);}
.proj-thumb{width:100%; aspect-ratio:2/1; display:flex; align-items:center; justify-content:center; overflow:hidden; background-size:cover; background-position:center;}
.proj-thumb img{width:100%; height:100%; object-fit:cover;}
.proj-thumb svg{width:28px; height:28px; opacity:.55;}
.proj-overlay{position:absolute; inset:0 0 34px 0; background:rgba(7,22,36,0.55); opacity:0; transition:opacity .25s; display:flex; align-items:center; justify-content:center;}
.proj-card:hover .proj-overlay{opacity:1;}
.proj-overlay span{font-size:12px; color:var(--accent); border:1px solid var(--accent); border-radius:16px; padding:5px 14px;}
.proj-label{padding:10px 12px; font-size:12px; color:#D7E4EC; background:var(--bg);}
.proj-extra{display:none;}
.see-more{margin-top:20px;}
.pill{display:inline-block; font-size:12px; color:var(--accent); border:1px solid rgba(62,203,239,0.4); border-radius:16px; padding:8px 18px; text-decoration:none;}

/* Stats / Γιατί εμάς */
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.stat-item{text-align:center; padding:28px 12px; border-right:1px solid var(--border);}
.stat-item:nth-child(4n){border-right:none;}
.stat-num{font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--accent); margin-bottom:6px;}
.stat-label{font-size:12px; color:var(--text-dim);}

/* Blog list */
.blog-card{border:1px solid var(--border); border-radius:12px; padding:20px;}
.blog-date{font-size:11px; color:#6FD4F0; margin-bottom:8px;}
.blog-card h3{font-size:15px; margin-bottom:8px; font-family:var(--font-body); font-weight:600;}
.blog-card a{font-size:12px; color:var(--accent); text-decoration:none;}

/* Article page */
article{padding:24px 0 80px;}
.article-date{font-size:12px; color:#6FD4F0; margin-bottom:12px;}
article h1{font-size:30px; line-height:1.35; margin-bottom:24px;}
article p{font-size:15px; color:rgba(255,255,255,0.85); margin-bottom:18px;}
article h2{font-size:19px; margin:32px 0 12px;}
article ul{margin:0 0 18px 20px; color:rgba(255,255,255,0.85); font-size:15px;}
article li{margin-bottom:8px;}
.cta-box{background:var(--bg-alt); border:1px solid var(--border); border-radius:12px; padding:24px; margin-top:40px; text-align:center;}
.cta-box p{margin-bottom:16px;}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:32px;}
.contact-item{display:flex; align-items:center; gap:14px; margin-bottom:20px;}
.contact-ico{width:42px; height:42px; border-radius:50%; background:rgba(62,203,239,0.12); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.contact-item .label{font-size:11px; color:var(--text-mute);}
.contact-item .value{font-size:14px;}
form input, form textarea{width:100%; box-sizing:border-box; background:var(--input-bg); border:1px solid rgba(255,255,255,0.18); border-radius:8px; padding:12px 14px; font-size:13px; color:#D7E4EC; margin-bottom:12px; font-family:var(--font-body);}
form textarea{resize:vertical; min-height:100px;}
form button{background:var(--accent); color:#062633; border:none; padding:12px 26px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; float:right; font-family:var(--font-body);}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}

footer{border-top:1px solid var(--border); padding:24px; display:flex; justify-content:space-between; font-size:12px; color:var(--text-dim); flex-wrap:wrap; gap:10px; max-width:1120px; margin:0 auto;}
footer a{text-decoration:none;}

/* Accessibility + scroll top */
.fab{position:fixed; bottom:70px; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:60; cursor:pointer; border:none;}
#acc-btn{left:20px; background:var(--bg-panel); border:1px solid rgba(255,255,255,0.25); color:var(--accent);}
#scroll-top{right:20px; background:var(--accent); color:#062633; text-decoration:none; opacity:0; pointer-events:none; transition:opacity .2s;}
#scroll-top.show{opacity:1; pointer-events:auto;}
#acc-panel{position:fixed; bottom:126px; left:20px; background:var(--bg-panel); border:1px solid rgba(255,255,255,0.2); border-radius:10px; padding:16px; width:210px; z-index:60; display:none;}
#acc-panel.open{display:block;}
.acc-row{display:flex; align-items:center; justify-content:space-between; font-size:13px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.08);}
.acc-row:last-child{border-bottom:none;}
.acc-row button{width:26px; height:26px; border-radius:6px; border:1px solid rgba(255,255,255,0.25); background:none; color:#fff; cursor:pointer;}

/* Cookie banner */
#cookie-banner{position:fixed; bottom:0; left:0; right:0; background:var(--bg-panel); border-top:1px solid rgba(255,255,255,0.1); padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; z-index:70; flex-wrap:wrap;}
#cookie-banner p{font-size:12px; color:#B9C9D6; margin:0;}
#cookie-banner a{color:#6FD4F0;}
.cookie-actions{display:flex; gap:8px; flex-shrink:0;}
.cookie-actions button{font-size:12px; padding:8px 16px; border-radius:6px; cursor:pointer; border:none; font-family:var(--font-body);}
#cookie-accept{background:var(--accent); color:#062633;}
#cookie-settings{background:none; border:1px solid rgba(255,255,255,0.25); color:#fff;}
body.has-cookie-banner{padding-bottom:64px;}

/* Accessibility modes */
body.high-contrast{filter:contrast(1.3) brightness(1.05);}
body.dyslexia-font, body.dyslexia-font input, body.dyslexia-font textarea, body.dyslexia-font button{font-family:'Comic Sans MS', 'Comic Sans', cursive !important;}
body.reduce-motion *{animation:none !important; transition:none !important;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

@media (max-width:860px){
  .hero{flex-direction:column; text-align:left;}
  .hero-text{order:1;}
  .hero-visual{order:2;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));}
  .contact-grid{grid-template-columns:1fr;}
  .section-title{font-size:22px;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stat-item{border-right:1px solid var(--border); border-bottom:1px solid var(--border);}
  .stat-item:nth-child(2n){border-right:none;}
  .stat-item:nth-last-child(-n+2){border-bottom:none;}
}