/* Uit skycap-portal-design.html */
:root{
    --navy:#284980;
    --navy-deep:#1B3059;
    --navy-soft:#3A5C99;
    --orange:#FD8D3B;
    --orange-dark:#E97A28;
    --cloud:#F4F7FC;
    --ink:#22314F;
    --grey:#6B7590;
    --white:#FFFFFF;
    --radius:22px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:'Open Sans',sans-serif;color:var(--ink);background:var(--cloud)}
  h1,h2,h3,.font-display{font-family:'Poppins',sans-serif}

  /* ===== Header ===== */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(27,48,89,.92);backdrop-filter:blur(10px);
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 48px;
  }
  .logo{display:flex;align-items:center;gap:10px}
  .logo img{height:52px;display:block}
  nav{display:flex;align-items:center;gap:28px}
  nav a{color:rgba(255,255,255,.85);text-decoration:none;font-size:15px;font-weight:600;transition:color .2s}
  nav a:hover{color:#fff}
  .lang{display:flex;gap:6px;margin-left:12px}
  .lang button{
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
    color:#fff;font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;
    padding:6px 12px;border-radius:100px;cursor:pointer;transition:.2s
  }
  .lang button.active{background:var(--orange);border-color:var(--orange)}
  .lang button:hover{background:rgba(255,255,255,.25)}
  .lang button.active:hover{background:var(--orange-dark)}

  /* ===== Hero ===== */
  .hero{
    background:
      linear-gradient(115deg, rgba(27,48,89,.93) 0%, rgba(27,48,89,.8) 50%, rgba(27,48,89,.5) 100%),
      url("../../img/placeholder-unsplash-1488085061387-422e29b40080.jpg") center/cover no-repeat;
    color:#fff;text-align:center;
    padding:96px 24px 200px;
    position:relative;overflow:hidden;
  }
  .hero::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(ellipse 60% 40% at 80% 10%,rgba(255,255,255,.07),transparent),
      radial-gradient(ellipse 50% 35% at 15% 85%,rgba(253,141,59,.12),transparent);
    pointer-events:none;
  }
  .board-chip{
    display:inline-flex;align-items:center;gap:10px;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
    border-radius:100px;padding:8px 20px;font-size:13px;letter-spacing:2px;
    font-family:'Poppins',sans-serif;font-weight:600;text-transform:uppercase;
    color:rgba(255,255,255,.9);margin-bottom:28px;
  }
  .board-chip .dot{width:8px;height:8px;border-radius:50%;background:#5BE39B;box-shadow:0 0 8px #5BE39B}
  .hero h1{font-size:clamp(34px,5vw,58px);font-weight:800;text-transform:uppercase;line-height:1.1;letter-spacing:1px}
  .hero h1 span{color:var(--orange)}
  .hero p{max-width:560px;margin:22px auto 0;font-size:18px;color:rgba(255,255,255,.85);line-height:1.6}

  /* ===== Gates ===== */
  .gates{
    max-width:1060px;margin:-120px auto 0;padding:0 24px 20px;
    display:grid;grid-template-columns:1fr 1fr;gap:28px;
    position:relative;z-index:2;
  }
  .gate{
    background:#fff;border-radius:var(--radius);
    box-shadow:0 24px 60px rgba(27,48,89,.18);
    padding:40px 38px 34px;display:flex;flex-direction:column;
    transition:transform .25s,box-shadow .25s;
  }
  .gate:hover{transform:translateY(-6px);box-shadow:0 32px 70px rgba(27,48,89,.26)}
  .gate-tag{
    display:inline-flex;align-self:flex-start;align-items:center;gap:8px;
    font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;
    letter-spacing:2.5px;text-transform:uppercase;
    color:var(--navy);background:var(--cloud);
    border-radius:100px;padding:7px 16px;margin-bottom:22px;
  }
  .gate-tag.alt{color:var(--orange-dark);background:#FFF1E5}
  .gate .icon{
    width:64px;height:64px;border-radius:18px;margin-bottom:20px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(145deg,var(--navy),var(--navy-soft));color:#fff;
  }
  .gate .icon svg{width:30px;height:30px}
  .gate.alt .icon{background:linear-gradient(145deg,var(--orange),var(--orange-dark))}
  .gate h2{font-size:26px;font-weight:700;color:var(--navy);margin-bottom:12px}
  .gate p{color:var(--grey);line-height:1.65;margin-bottom:20px}
  .gate ul{list-style:none;margin-bottom:28px;flex-grow:1}
  .gate ul li{
    padding:7px 0 7px 30px;position:relative;font-size:15px;color:var(--ink);
  }
  .gate ul li::before{
    content:"✓";position:absolute;left:0;top:6px;
    width:20px;height:20px;border-radius:50%;
    background:#E8F5EE;color:#1E9E5A;font-size:12px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;
    padding:15px 34px;border-radius:100px;text-decoration:none;
    transition:.2s;align-self:flex-start;
  }
  .btn-orange{background:var(--orange);color:#fff;box-shadow:0 10px 24px rgba(253,141,59,.35)}
  .btn-orange:hover{background:var(--orange-dark);transform:translateY(-2px)}
  .btn-navy{background:var(--navy);color:#fff;box-shadow:0 10px 24px rgba(40,73,128,.3)}
  .btn-navy:hover{background:var(--navy-deep);transform:translateY(-2px)}
  .btn .arrow{transition:transform .2s}
  .btn:hover .arrow{transform:translateX(4px)}
  .gate-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .gate-actions .btn{padding:13px 18px;font-size:14px;gap:7px}
  .gate-actions .btn-outline{padding:11px 16px}
  .btn-outline{background:transparent;color:var(--navy);border:2px solid #D5DEEE;box-shadow:none}
  .btn-outline:hover{border-color:var(--navy);transform:translateY(-2px)}

  /* ===== Trust ===== */
  .trust{max-width:1060px;margin:56px auto 0;padding:0 24px;
    display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .trust .item{
    background:#fff;border-radius:16px;padding:24px 22px;text-align:center;
    box-shadow:0 8px 24px rgba(27,48,89,.07);
  }
  .trust .item .t-icon{
    width:46px;height:46px;margin:0 auto 12px;border-radius:50%;
    background:var(--cloud);color:var(--navy);
    display:flex;align-items:center;justify-content:center;
  }
  .trust .item .t-icon svg{width:22px;height:22px}
  .trust h3{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:6px}
  .trust p{font-size:13.5px;color:var(--grey);line-height:1.5}

  /* ===== CTA band ===== */
  .band{
    max-width:1060px;margin:64px auto;padding:0 24px;
  }
  .band-inner{
    background:
      linear-gradient(100deg, rgba(27,48,89,.95) 0%, rgba(27,48,89,.8) 55%, rgba(27,48,89,.45) 100%),
      url("../../img/placeholder-unsplash-1569154941061-e231b4725ef1.jpg") center/cover no-repeat;
    border-radius:var(--radius);padding:52px 52px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    color:#fff;flex-wrap:wrap;box-shadow:0 24px 60px rgba(27,48,89,.25);
  }
  .band h2{font-size:24px;font-weight:700;margin-bottom:6px}
  .band p{color:rgba(255,255,255,.8);font-size:15px}

  /* ===== Footer ===== */
  footer{background:var(--navy-deep);color:rgba(255,255,255,.75);padding:48px 48px 28px}
  .foot-grid{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
  footer img{height:56px;margin-bottom:16px}
  footer h4{font-family:'Poppins',sans-serif;color:#fff;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px}
  footer a{color:rgba(255,255,255,.75);text-decoration:none;display:block;padding:4px 0;font-size:14px}
  footer a:hover{color:var(--orange)}
  footer p{font-size:14px;line-height:1.7}
  .foot-base{max-width:1060px;margin:36px auto 0;padding-top:20px;
    border-top:1px solid rgba(255,255,255,.12);
    display:flex;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.5);flex-wrap:wrap;gap:8px}

  @media(max-width:860px){
    header{padding:12px 20px}
    nav{display:none}
    .gates{grid-template-columns:1fr;margin-top:-100px}
    .trust{grid-template-columns:repeat(2,1fr)}
    .foot-grid{grid-template-columns:1fr}
    .band-inner{padding:32px 28px}
    .strip{font-size:11px;gap:10px}
  }

/* Twee knoppen in Gate B naast elkaar; breedte volgens de tekst, lange (vertaalde) teksten lopen binnen de knop door. */
.gate-actions{display:flex;flex-wrap:nowrap;gap:10px;align-items:stretch}
.gate-actions .btn{flex:1 1 auto;align-self:stretch;justify-content:center;text-align:center;white-space:normal;line-height:1.3;padding:12px 14px;font-size:13.5px;gap:6px}
.gate-actions .btn:only-child{flex:0 0 auto}
@media (max-width:420px){ .gate-actions{flex-direction:column} .gate-actions .btn:only-child{align-self:flex-start} }
/* Commerciële dienstnaam op Gate A */
.gate h2 + .gate-lead{margin-top:-6px}
.gate p.gate-lead{font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;color:var(--orange-dark,#E97A28);margin-bottom:10px}
.hero p b{color:#fff;font-weight:700}