/* __WHITEPAGE_V1__ site=interactivebrokers.gr.com generated=2026-05-16 palette=navy-gold-ice */
/* V1 — Classic Split-Grid | Inter 400-800 | BEM */

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

/* === CSS VARIABLES === */
:root {
  --c-bg: #f0f4f8;
  --c-surface: #ffffff;
  --c-brand: #1a3b5c;
  --c-brand-dark: #0d2137;
  --c-brand-light: #2a5a8a;
  --c-accent: #d4943a;
  --c-accent-dark: #b87a28;
  --c-accent-light: #f0c878;
  --c-text: #1a1a2e;
  --c-text-light: #5a6070;
  --c-text-inv: #ffffff;
  --c-border: #d8dce3;
  --c-card-bg: #f7f9fc;
  --c-dark-bg: #0d2137;
  --c-section-light: #f7f9fc;
  --c-section-accent: #e8ecf2;
  --c-section-dark: #0d2137;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --transition: 0.2s ease;
}

/* === 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);color:var(--c-text);background:var(--c-bg);line-height:1.65;font-size:16px}

/* === CONTAINER === */
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* === SECTIONS === */
.section{padding:80px 0}
.section--light{background:var(--c-section-light)}
.section--accent{background:var(--c-section-accent)}
.section--dark{background:var(--c-section-dark);color:var(--c-text-inv)}

/* === GRID === */
.grid{display:grid;gap:32px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

/* === HEADER === */
.header{background:var(--c-surface);border-bottom:1px solid var(--c-border);position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm)}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1200px;margin:0 auto}
.header__logo{display:flex;align-items:center;gap:8px;font-size:1.35rem;font-weight:800;color:var(--c-brand);text-decoration:none}
.header__logo-accent{color:var(--c-accent)}
.header__nav{display:flex;align-items:center;gap:8px}
.header__nav a{color:var(--c-text);text-decoration:none;font-weight:500;font-size:0.95rem;padding:8px 14px;border-radius:var(--radius);transition:var(--transition)}
.header__nav a:hover{background:var(--c-section-light);color:var(--c-brand)}
.header__cta{background:var(--c-accent);color:#fff!important;font-weight:600;padding:10px 20px;border-radius:var(--radius);transition:var(--transition)}
.header__cta:hover{background:var(--c-accent-dark)!important;color:#fff!important}

/* Mega menu dropdown */
.nav-dropdown{position:relative}
.nav-dropdown__toggle{cursor:pointer}
.nav-dropdown__menu{display:none;position:absolute;top:100%;left:0;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);box-shadow:var(--shadow-lg);min-width:520px;padding:24px;grid-template-columns:repeat(3,1fr);gap:16px 24px;z-index:200}
.nav-dropdown:hover .nav-dropdown__menu{display:grid}
.nav-dropdown__col h4{font-size:0.8rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--c-text-light);margin-bottom:10px;font-weight:700}
.nav-dropdown__col a{display:block;padding:4px 0;font-size:0.9rem;color:var(--c-text);text-decoration:none}
.nav-dropdown__col a:hover{color:var(--c-accent)}

/* === HERO === */
.hero{padding:100px 0 80px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero__content h1{font-size:clamp(2rem,3.5vw,3.2rem);font-weight:800;line-height:1.15;color:var(--c-brand-dark);margin-bottom:18px}
.hero__content h1 span{color:var(--c-accent)}
.hero__content .hero__lead{font-size:1.15rem;color:var(--c-text-light);margin-bottom:28px;line-height:1.6}
.hero__cta-group{display:flex;gap:14px;flex-wrap:wrap}
.hero__cta-group .btn{padding:14px 28px;border-radius:var(--radius);font-weight:600;font-size:1rem;text-decoration:none;transition:var(--transition);display:inline-block}
.hero__cta-group .btn--primary{background:var(--c-accent);color:#fff}
.hero__cta-group .btn--primary:hover{background:var(--c-accent-dark)}
.hero__cta-group .btn--secondary{background:transparent;color:var(--c-brand);border:2px solid var(--c-brand)}
.hero__cta-group .btn--secondary:hover{background:var(--c-brand);color:#fff}
.hero__media img{width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}

/* === LOGO CLOUD === */
.logo-cloud{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap;padding:48px 0}
.logo-cloud img{height:44px;width:auto;opacity:0.5;transition:opacity 0.3s}
.logo-cloud img:hover{opacity:0.8}

/* === CARDS === */
.card{background:var(--c-surface);border-radius:var(--radius-lg);padding:36px 28px;box-shadow:var(--shadow-sm);transition:var(--transition);border:1px solid var(--c-border)}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card__icon{width:52px;height:52px;background:var(--c-section-light);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:1.5rem}
.card h3{font-size:1.2rem;font-weight:700;margin-bottom:10px;color:var(--c-brand-dark)}
.card p{color:var(--c-text-light);font-size:0.95rem;line-height:1.6}
.card a{color:var(--c-accent);font-weight:600;text-decoration:none;font-size:0.95rem}
.card a:hover{text-decoration:underline}
.card--dark{background:var(--c-dark-bg);border-color:rgba(255,255,255,0.1);color:var(--c-text-inv)}
.card--dark h3{color:var(--c-text-inv)}
.card--dark p{color:rgba(255,255,255,0.7)}

/* === COUNTER BANNER === */
.counter-card{text-align:center;padding:40px 20px}
.counter-card__value{font-size:2.5rem;font-weight:800;color:var(--c-accent);line-height:1.2}
.counter-card__label{font-size:0.95rem;color:var(--c-text-light);margin-top:6px}

/* === IMAGE-TEXT ALTERNATING === */
.image-text{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:60px 0}
.image-text--reverse{direction:rtl}
.image-text--reverse > *{direction:ltr}
.image-text__content h2{font-size:1.8rem;font-weight:700;color:var(--c-brand-dark);margin-bottom:14px}
.image-text__content .snippet{font-size:1.05rem;color:var(--c-text-light);margin-bottom:18px}
.image-text__content p{color:var(--c-text-light);line-height:1.7;margin-bottom:14px}
.image-text__media img{width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}

/* === TESTIMONIALS === */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.testimonial{background:var(--c-surface);border-radius:var(--radius-lg);padding:32px 24px;box-shadow:var(--shadow-sm);border:1px solid var(--c-border)}
.testimonial__text{font-style:italic;color:var(--c-text-light);margin-bottom:18px;line-height:1.7;font-size:0.95rem}
.testimonial__author{font-weight:700;color:var(--c-brand-dark);font-size:0.9rem}
.testimonial__role{color:var(--c-text-light);font-size:0.85rem}

/* === CTA === */
.cta-block{text-align:center;padding:70px 0}
.cta-block h2{font-size:2rem;font-weight:800;color:var(--c-brand-dark);margin-bottom:14px}
.cta-block p{color:var(--c-text-light);margin-bottom:28px;font-size:1.1rem}
.cta-block .btn{display:inline-block;padding:16px 36px;background:var(--c-accent);color:#fff;border-radius:var(--radius);font-weight:700;font-size:1.05rem;text-decoration:none;transition:var(--transition)}
.cta-block .btn:hover{background:var(--c-accent-dark)}

/* === FAQ (details/summary for V1) === */
.faq{padding:60px 0}
.faq h2{text-align:center;font-size:2rem;font-weight:800;color:var(--c-brand-dark);margin-bottom:40px}
.accordion-item{border-bottom:1px solid var(--c-border);padding:0}
.accordion-item summary{padding:20px 0;font-weight:600;font-size:1.1rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--c-brand-dark)}
.accordion-item summary::-webkit-details-marker{display:none}
.accordion-item summary::after{content:'+';font-size:1.4rem;font-weight:400;color:var(--c-accent);transition:transform 0.3s}
.accordion-item[open] summary::after{content:'−'}
.accordion-item .faq-answer{padding:0 0 20px;color:var(--c-text-light);line-height:1.7}

/* === ANCHOR STRIP (V1 cluster anchors) === */
.anchor-strip{background:var(--c-dark-bg);padding:50px 0;text-align:center}
.anchor-strip h3{color:var(--c-text-inv);font-size:1.1rem;font-weight:600;margin-bottom:24px}
.anchor-strip nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:900px;margin:0 auto}
.anchor-strip nav a{color:rgba(255,255,255,0.85);text-decoration:none;font-size:0.9rem;padding:8px 16px;border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius);transition:var(--transition)}
.anchor-strip nav a:hover{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.anchor-strip nav strong{color:var(--c-accent-light);font-weight:600;font-size:0.9rem;padding:8px 16px}

/* === AI CHUNK (sub-page prose block) === */
.ai-chunk{padding:40px 0}
.ai-chunk h1{font-size:2rem;font-weight:800;color:var(--c-brand-dark);margin-bottom:10px}
.ai-chunk .snippet{font-size:1.05rem;color:var(--c-text-light);margin-bottom:20px}
.ai-chunk p{color:var(--c-text-light);line-height:1.75;margin-bottom:16px}
.ai-chunk h2{font-size:1.5rem;font-weight:700;color:var(--c-brand-dark);margin:30px 0 10px}
.ai-chunk h3{font-size:1.2rem;font-weight:600;color:var(--c-brand-dark);margin:24px 0 8px}

/* === BREADCRUMB === */
.breadcrumb{padding:20px 0;font-size:0.9rem;color:var(--c-text-light)}
.breadcrumb a{color:var(--c-brand);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{color:var(--c-text-light)}

/* === DATA TABLE === */
.data-table{width:100%;border-collapse:collapse;margin:24px 0;font-size:0.95rem}
.data-table th{background:var(--c-brand-dark);color:#fff;padding:14px 16px;text-align:left;font-weight:600}
.data-table td{padding:12px 16px;border-bottom:1px solid var(--c-border)}
.data-table tr:nth-child(even){background:var(--c-section-light)}

/* === RELATED SERVICES === */
.related-services{padding:40px 0;border-top:1px solid var(--c-border)}
.related-services h3{font-size:1.2rem;font-weight:700;color:var(--c-brand-dark);margin-bottom:16px}
.related-services__grid{display:flex;flex-wrap:wrap;gap:10px}
.related-services__grid a{color:var(--c-brand);text-decoration:none;font-weight:500;font-size:0.95rem;padding:8px 16px;background:var(--c-section-light);border-radius:var(--radius);transition:var(--transition)}
.related-services__grid a:hover{background:var(--c-accent);color:#fff}

/* === FOOTER === */
.footer--compact{background:var(--c-dark-bg);color:rgba(255,255,255,0.7);padding:48px 0 24px}
.footer--compact__inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;max-width:1200px;margin:0 auto;padding:0 24px}
.footer--compact__col h4{color:#fff;font-size:0.95rem;font-weight:700;margin-bottom:16px}
.footer--compact__col a{display:block;color:rgba(255,255,255,0.6);text-decoration:none;font-size:0.9rem;padding:4px 0;transition:var(--transition)}
.footer--compact__col a:hover{color:var(--c-accent-light)}
.footer--compact__bottom{border-top:1px solid rgba(255,255,255,0.1);margin-top:36px;padding-top:20px;text-align:center;font-size:0.85rem;max-width:1200px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.footer--compact__legal{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.footer--compact__legal a{color:rgba(255,255,255,0.5);text-decoration:none}
.footer--compact__legal a:hover{color:var(--c-accent-light)}

/* === BUTTON BASELINE === */
.btn{display:inline-block;padding:12px 24px;border-radius:var(--radius);font-weight:600;text-decoration:none;transition:var(--transition);cursor:pointer}

/* === UTILITY === */
.text-center{text-align:center}
.mt-0{margin-top:0}
.mb-2{margin-bottom:16px}
.mb-3{margin-bottom:24px}
.mb-4{margin-bottom:32px}

/* === RESPONSIVE === */
@media(max-width:968px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr;text-align:center}
  .hero__cta-group{justify-content:center}
  .image-text{grid-template-columns:1fr;text-align:center}
  .image-text--reverse{direction:ltr}
  .testimonial-grid{grid-template-columns:1fr}
  .footer--compact__inner{grid-template-columns:1fr 1fr}
  .nav-dropdown__menu{min-width:300px;grid-template-columns:1fr}
}
@media(max-width:600px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .header__nav{display:none}
  .footer--compact__inner{grid-template-columns:1fr}
  .hero{padding:60px 0 40px}
  .section{padding:50px 0}
}

/* === ACCESSIBILITY === */
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
}

/* === PRINT === */
@media print{
  .header,.footer--compact,.anchor-strip,.cta-block{display:none}
  body{font-size:12pt;color:#000}
}