/* __WHITEPAGE_V6__ site=sconnectbusiness.gr.com generated=2026-05-14 palette=maritime-blue+bronze-gold+parchment */
/* V6 — Tile-Dashboard: Outfit 400-800, utility-first, tile-grid, custom-button FAQ, chip-strip anchors */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --color-primary: #1B3A5C;
  --color-primary-dark: #0F2440;
  --color-primary-light: #2A5580;
  --color-accent: #C8963E;
  --color-accent-dark: #A67A2E;
  --color-accent-soft: #F5E6CC;
  --color-bg: #F7F4ED;
  --color-bg-white: #FFFFFF;
  --color-text: #1A1A2E;
  --color-text-muted: #5A6470;
  --color-border: #D8D3C8;
  --color-success: #2D7D46;
  --color-warning: #C8963E;
  --font-primary: 'Outfit', system-ui, -apple-system, sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(15,36,64,0.06);
  --shadow-md: 0 4px 12px rgba(15,36,64,0.08);
  --shadow-lg: 0 8px 24px rgba(15,36,64,0.10);
  --max-width: 1200px;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-primary);color:var(--color-text);background:var(--color-bg);line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-primary);text-decoration:none;transition:color 0.2s}
a:hover{color:var(--color-accent)}
ul{list-style:none}

/* Utility-first (V6 vocab) */
.f-col{display:flex;flex-direction:column}
.f-row{display:flex;flex-direction:row}
.f-center{align-items:center;justify-content:center}
.f-between{justify-content:space-between}
.f-wrap{flex-wrap:wrap}
.g-3{gap:0.75rem}
.g-4{gap:1rem}
.g-6{gap:1.5rem}
.g-8{gap:2rem}
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.bd-r-sm{border-radius:var(--radius-sm)}
.bd-r-md{border-radius:var(--radius-md)}
.bd-r-lg{border-radius:var(--radius-lg)}
.bd-r-xl{border-radius:var(--radius-xl)}
.bd-r-full{border-radius:var(--radius-full)}
.bg-primary{background:var(--color-primary)}
.bg-tile{background:var(--color-bg-white)}
.bg-accent-soft{background:var(--color-accent-soft)}
.c-primary{color:var(--color-primary)}
.c-accent{color:var(--color-accent)}

/* Top bar (V6: minimal, logo-dot + 4 nav + sign-btn) */
.top-bar{background:var(--color-bg-white);border-bottom:1px solid var(--color-border);padding:0.75rem 1.5rem;position:sticky;top:0;z-index:100}
.top-bar .f-row{max-width:var(--max-width);margin:0 auto;align-items:center}
.logo{font-size:1.4rem;font-weight:800;color:var(--color-primary);letter-spacing:-0.02em}
.logo-dot{color:var(--color-accent)}
.top-nav{display:flex;gap:1.5rem}
.top-nav a{font-weight:500;font-size:0.95rem;color:var(--color-text-muted)}
.top-nav a:hover{color:var(--color-primary)}
.sign-btn{background:var(--color-primary);color:#fff;padding:0.5rem 1.25rem;border-radius:var(--radius-full);font-weight:600;font-size:0.9rem;white-space:nowrap}
.sign-btn:hover{background:var(--color-primary-dark);color:#fff}

/* Hero band (V6: narrow 45vh + gradient + floating SVG accents) */
.hero-band{background:linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 40%, var(--color-primary-light) 100%);min-height:45vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:3rem 1.5rem;position:relative;overflow:hidden}
.hero-band::before{content:'';position:absolute;top:-30%;right:-10%;width:400px;height:400px;border:2px solid rgba(255,255,255,0.08);border-radius:50%}
.hero-band::after{content:'';position:absolute;bottom:-20%;left:-5%;width:300px;height:300px;border:1px solid rgba(255,255,255,0.06);border-radius:50%}
.hero-band .hero-content{max-width:800px;position:relative;z-index:1}
.hero-band h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;color:#fff;line-height:1.2;margin-bottom:1rem;letter-spacing:-0.02em}
.hero-band .hero-lead{font-size:1.15rem;color:rgba(255,255,255,0.85);max-width:600px;margin:0 auto 2rem}
.hero-band .hero-cta{display:inline-flex;gap:0.75rem}
.hero-band .btn-primary{background:var(--color-accent);color:#fff;padding:0.8rem 2rem;border-radius:var(--radius-full);font-weight:700;font-size:1rem}
.hero-band .btn-primary:hover{background:var(--color-accent-dark);color:#fff}
.hero-band .btn-ghost{border:2px solid rgba(255,255,255,0.5);color:#fff;padding:0.8rem 2rem;border-radius:var(--radius-full);font-weight:600;font-size:1rem;background:transparent}
.hero-band .btn-ghost:hover{background:rgba(255,255,255,0.1);color:#fff}

/* Badge row (V6: 5 chip badges below hero) */
.badge-row{display:flex;justify-content:center;flex-wrap:wrap;gap:0.75rem;padding:1.25rem 1.5rem;background:var(--color-bg-white);border-bottom:1px solid var(--color-border)}
.badge-row .badge{background:var(--color-accent-soft);color:var(--color-primary);padding:0.4rem 1rem;border-radius:var(--radius-full);font-weight:600;font-size:0.85rem}

/* Tile grid (V6: 9 tiles 3×3, equal size, SVG line icon + title + body + link) */
.tile-grid-section{padding:4rem 1.5rem;max-width:var(--max-width);margin:0 auto}
.tile-grid-section .section-title{text-align:center;font-size:2rem;font-weight:800;color:var(--color-primary);margin-bottom:0.5rem}
.tile-grid-section .section-subtitle{text-align:center;color:var(--color-text-muted);font-size:1.05rem;margin-bottom:2.5rem;max-width:600px;margin-left:auto;margin-right:auto}
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.tile{background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:2rem 1.5rem;transition:box-shadow 0.25s,transform 0.25s}
.tile:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.tile__icon{margin-bottom:1rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--color-accent-soft);border-radius:var(--radius-md)}
.tile__icon svg{width:24px;height:24px;stroke:var(--color-primary);fill:none;stroke-width:1.5}
.tile h3{font-size:1.15rem;font-weight:700;color:var(--color-primary);margin-bottom:0.5rem}
.tile p{color:var(--color-text-muted);font-size:0.95rem;line-height:1.6;margin-bottom:1rem}
.tile .tile-link{font-weight:600;font-size:0.9rem;color:var(--color-accent)}

/* Testimonial row (V6: 1 featured + 3 mini) */
.testimonial-row{padding:3rem 1.5rem;max-width:var(--max-width);margin:0 auto}
.testimonial-row .section-title{text-align:center;font-size:1.75rem;font-weight:800;color:var(--color-primary);margin-bottom:2rem}
.testimonial-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.testimonial-featured{background:var(--color-primary);color:#fff;padding:2.5rem;border-radius:var(--radius-lg);grid-row:span 2}
.testimonial-featured .quote-text{font-size:1.25rem;font-style:italic;line-height:1.7;margin-bottom:1.5rem;opacity:0.95}
.testimonial-featured .quote-author{font-weight:700;font-size:1rem}
.testimonial-featured .quote-role{font-size:0.9rem;opacity:0.75;margin-top:0.25rem}
.testimonial-mini{background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1.5rem}
.testimonial-mini .quote-text{font-size:0.95rem;color:var(--color-text);font-style:italic;margin-bottom:0.75rem;line-height:1.6}
.testimonial-mini .quote-author{font-weight:600;color:var(--color-primary);font-size:0.9rem}
.testimonial-mini .quote-role{font-size:0.8rem;color:var(--color-text-muted)}

/* FAQ interactive (V6: custom button+panel) */
.faq-interactive{padding:4rem 1.5rem;max-width:800px;margin:0 auto}
.faq-interactive .section-title{text-align:center;font-size:2rem;font-weight:800;color:var(--color-primary);margin-bottom:2.5rem}
.faq-button{display:block;width:100%;text-align:left;background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1.25rem 1.5rem;font-size:1.05rem;font-weight:600;color:var(--color-primary);cursor:pointer;transition:border-color 0.2s;margin-bottom:0.5rem;font-family:var(--font-primary)}
.faq-button:hover{border-color:var(--color-accent)}
.faq-button[aria-expanded="true"]{border-color:var(--color-accent);border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}
.faq-button::after{content:'+';float:right;font-size:1.3rem;font-weight:400;color:var(--color-text-muted);transition:transform 0.3s}
.faq-button[aria-expanded="true"]::after{content:'−';transform:rotate(180deg)}
.faq-panel{padding:0 1.5rem 1.25rem;font-size:0.95rem;color:var(--color-text-muted);line-height:1.7;background:var(--color-bg-white);border:1px solid var(--color-accent);border-top:none;border-bottom-left-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);margin-bottom:0.5rem}

/* CTA band (V6: narrow) */
.cta-band{background:var(--color-primary-dark);padding:3rem 1.5rem;text-align:center}
.cta-band h2{font-size:1.75rem;font-weight:800;color:#fff;margin-bottom:0.75rem}
.cta-band p{color:rgba(255,255,255,0.8);max-width:500px;margin:0 auto 1.5rem;font-size:1rem}
.cta-band .btn-primary{display:inline-block;background:var(--color-accent);color:#fff;padding:0.8rem 2rem;border-radius:var(--radius-full);font-weight:700;font-size:1rem}

/* Chip strip (V6: 12 rounded-pill anchors) */
.chip-strip{padding:2rem 1.5rem;max-width:var(--max-width);margin:0 auto;text-align:center}
.chip-strip .strip-label{font-size:0.85rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:1rem}
.chip-strip .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:0.6rem}
.chip{display:inline-block;background:var(--color-bg-white);border:1px solid var(--color-border);color:var(--color-primary);padding:0.45rem 1.1rem;border-radius:var(--radius-full);font-weight:500;font-size:0.9rem;transition:all 0.2s}
.chip:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}

/* Mega footer (V6: 2-col brand + 4 nav sub-cols) */
.mega-footer{background:var(--color-primary-dark);color:rgba(255,255,255,0.8);padding:3rem 1.5rem 2rem}
.mega-footer .footer-inner{max-width:var(--max-width);margin:0 auto}
.mega-footer .footer-brand{grid-column:span 2}
.mega-footer .footer-brand h3{color:#fff;font-size:1.3rem;font-weight:800;margin-bottom:0.5rem}
.mega-footer .footer-brand p{font-size:0.9rem;line-height:1.6;max-width:300px}
.mega-footer .footer-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.mega-footer .footer-col h4{color:#fff;font-size:0.95rem;font-weight:700;margin-bottom:1rem;text-transform:uppercase;letter-spacing:0.05em}
.mega-footer .footer-col a{display:block;color:rgba(255,255,255,0.65);font-size:0.9rem;padding:0.2rem 0;transition:color 0.2s}
.mega-footer .footer-col a:hover{color:var(--color-accent)}
.mega-footer .footer-bottom{border-top:1px solid rgba(255,255,255,0.1);margin-top:2.5rem;padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:0.85rem}
.mega-footer .footer-bottom a{color:rgba(255,255,255,0.5)}
.mega-footer .footer-bottom a:hover{color:var(--color-accent)}
.mega-footer .trust-badges{display:flex;gap:1rem;margin-top:1.5rem}
.mega-footer .trust-badge{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.6);padding:0.3rem 0.8rem;border-radius:var(--radius-sm);font-size:0.8rem}

/* Sub-page common */
.sub-hero-band{background:linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);min-height:25vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem 1.5rem;position:relative;overflow:hidden}
.sub-hero-band h1{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:800;color:#fff;max-width:700px}
.sub-hero-band .sub-lead{color:rgba(255,255,255,0.8);font-size:1.05rem;max-width:500px;margin:0.75rem auto 0}
.content-section{max-width:var(--max-width);margin:0 auto;padding:3rem 1.5rem}
.content-section h2{font-size:1.6rem;font-weight:700;color:var(--color-primary);margin:2rem 0 0.75rem}
.content-section h3{font-size:1.2rem;font-weight:600;color:var(--color-primary);margin:1.5rem 0 0.5rem}
.content-section p{margin-bottom:1rem;color:var(--color-text);line-height:1.75}
.content-section ul,.content-section ol{margin:0 0 1.5rem 1.5rem}
.content-section li{margin-bottom:0.5rem;line-height:1.7}
.content-section .data-table{width:100%;border-collapse:collapse;margin:1.5rem 0 2rem;background:var(--color-bg-white);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.content-section .data-table th{background:var(--color-primary);color:#fff;padding:0.75rem 1rem;text-align:left;font-weight:600;font-size:0.9rem}
.content-section .data-table td{padding:0.75rem 1rem;border-bottom:1px solid var(--color-border);font-size:0.9rem}
.content-section .data-table tr:last-child td{border-bottom:none}
.content-section .data-table tr:nth-child(even){background:var(--color-bg)}
.content-section .lead-callout{background:var(--color-accent-soft);border-left:4px solid var(--color-accent);padding:1.25rem 1.5rem;border-radius:0 var(--radius-md) var(--radius-md) 0;margin:1.5rem 0}
.content-section .lead-callout h3{font-size:1rem;font-weight:700;color:var(--color-primary);margin:0 0 0.25rem}
.content-section .lead-callout p{font-size:0.9rem;color:var(--color-text);margin:0}
.breadcrumbs{padding:1rem 1.5rem;max-width:var(--max-width);margin:0 auto;font-size:0.85rem;color:var(--color-text-muted)}
.breadcrumbs a{color:var(--color-primary);font-weight:500}
.breadcrumbs span{color:var(--color-text-muted)}
.related-services{padding:2rem 1.5rem;max-width:var(--max-width);margin:0 auto;border-top:1px solid var(--color-border)}
.related-services h3{font-size:1.15rem;font-weight:700;color:var(--color-primary);margin-bottom:1rem}
.related-services .service-links{display:flex;flex-wrap:wrap;gap:0.75rem}
.related-services .service-links a{background:var(--color-bg-white);border:1px solid var(--color-border);padding:0.5rem 1rem;border-radius:var(--radius-full);font-size:0.9rem;font-weight:500;color:var(--color-primary)}
.related-services .service-links a:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}

/* Perf & a11y */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
@media(max-width:768px){
  .tile-grid{grid-template-columns:1fr}
  .testimonial-grid{grid-template-columns:1fr}
  .mega-footer .footer-nav{grid-template-columns:repeat(2,1fr)}
  .top-nav{display:none}
  .hero-band h1{font-size:1.75rem}
}
@media print{
  .top-bar,.hero-band,.badge-row,.cta-band,.chip-strip,.mega-footer{display:none}
  body{font-size:12pt;color:#000}
  a{color:#000;text-decoration:underline}
}