:root{
    --navy-950:#101a33;
    --navy-900:#152246;
    --navy-800:#1c2f5c;
    --blue-700:#1f3d8f;
    --blue-600:#2a52c9;
    --ink:#1b2437;
    --muted:#5b6478;
    --bg-top:#eef1fb;
    --bg-bottom:#f7f8fc;
    --card-bg:#ffffff;
    --line:#e6e9f4;
    --radius-lg:18px;
    --radius-md:14px;
    --radius-sm:10px;
    --shadow-card:0 4px 18px rgba(20,30,70,0.06);
    --shadow-icon:0 6px 16px rgba(20,30,70,0.12);
    --max-w:1180px;
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    font-family: 'Manrope', sans-serif;
    color:var(--ink);
    line-height:1.55;
  }

  .wrap{
    max-width:var(--max-w);
    margin:0 auto;
    padding:36px 64px 64px;
  }
  .wrap-2{
    max-width:var(--max-w);
    margin:0 auto;
    padding:36px 24px 64px;
  }
  /* ---------- Header ---------- */
.header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
    padding:0px 90px;
}

.header-copy{
    flex:1;
    max-width:650px;
}
  .header-copy h1{
    font-size:45px;
    line-height:1.1;
    margin:0 0 14px;
    color:#1da1f2;
    font-weight:800;
    letter-spacing:-0.01em;
  }

    .header-copy h2{
    font-size:30px;
    line-height:1.1;
    margin:0 0 14px;
    color:#000000;
    font-weight:800;
    letter-spacing:-0.01em;
    margin-top: 50px;
  }
    .header-copy p{
    font-size:22px;
    margin:0 0 14px;
    color:#393636;
    text-align: justify;
  }
  .date-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#e4e9fb;
    color:var(--blue-700);
    font-size:13px;
    font-weight:600;
    padding:8px 14px;
    border-radius:999px;
    margin-top: 25px;
  }
  .date-badge i{font-size:13px;flex:none;}

  /* ---------- Hero graphic ---------- */
.hero{
    width:520px;
}

.hero img{

    width:100%;

    display:block;

}
  .monitor{
    position:absolute;
    left:50%;
    top:6px;
    transform:translateX(-50%);
    width:150px;
    height:110px;
    background:var(--navy-900);
    border-radius:10px;
    box-shadow:var(--shadow-icon);
  }
  .monitor::before{
    content:"";
    position:absolute;
    inset:10px;
    background:var(--blue-700);
    border-radius:5px;
  }
  .monitor::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-28px;
    transform:translateX(-50%);
    width:14px;
    height:26px;
    background:var(--navy-950);
  }
  .monitor-stand{
    position:absolute;
    left:50%;
    bottom:14px;
    transform:translateX(-50%);
    width:64px;
    height:8px;
    background:var(--navy-950);
    border-radius:4px;
  }
  .a11y-icon{
    position:absolute;
    left:50%;
    top:24px;
    transform:translateX(-50%);
    font-size:52px;
    color:#fff;
    z-index:1;
  }
  .orbit-icon{
    position:absolute;
    width:44px;
    height:44px;
    background:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-icon);
    color:var(--blue-700);
  }
  .orbit-icon i{font-size:18px;}
  .orbit-icon.text-size{font-weight:700;font-size:13px;letter-spacing:-1px;}
  .oi-1{ left:-6px;  top:10px;}
  .oi-2{ left:-6px;  bottom:18px;}
  .oi-3{ right:-6px; top:6px;}
  .oi-4{ right:-6px; top:64px;}
  .oi-5{ right:8px;  bottom:-4px;}

  /* ---------- Intro ---------- */
  .intro{
    margin-bottom:30px;
  }
  .intro h2{
    font-size:20px;
    color:var(--navy-950);
    margin:0 0 10px;
    font-weight:700;
  }
  .intro p{
    margin:0 0 12px;
    color:var(--muted);
    font-size:15px;
    max-width:880px;
  }
  .intro a{color:var(--blue-600); text-decoration:none; font-weight:600;}
  .intro a:hover{text-decoration:underline;}

  /* ---------- Card grid ---------- */
  .grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }

  .card{
    background:var(--card-bg);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:26px 26px 24px;
    box-shadow:var(--shadow-card);
  }

  .card-head{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:12px;
  }

  .card-icon{
    flex:none;
    width:42px;
    height:42px;
    border-radius:12px;
    background: rgb(226, 229, 240);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--blue-700);
  }
  .card-icon i{font-size:19px;}

  .card h3{
    margin:6px 0 0;
    font-size:23px;
    color:#1d47a7;
    font-weight:700;
  }

  .card p{
    margin:0 0 10px;
    color:var(--muted);
    font-size:18px;
  }

  .check-list{
    list-style:none;
    margin:10px 0 0;
    padding:0;
  }
  .check-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:18px;
    color:var(--muted);
    margin-bottom:8px;
  }
  .check-list i{
    flex:none;
    font-size:14px;
    margin-top:3px;
    color:var(--blue-600);
  }

  .browser-list{
    list-style:none;
    margin:10px 0 0;
    padding:0;
  }
  .browser-list li{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:18px;
    color:var(--muted);
    margin-bottom:8px;
  }
  .browser-list .brand-icon{font-size:17px; width:18px; text-align:center; color:var(--blue-700);}

  .contact-block{
    margin-top:12px;
    padding-top:12px;
    border-top:1px dashed var(--line);
    font-size:14.5px;
    color:var(--ink);
  }
  .contact-block div{
    display:flex;
    align-items:center;
    gap: 18px;
    margin-bottom:6px;
    font-size: 18px;
  }
  .contact-block i{width:16px;font-size:14px;flex:none;color:var(--blue-700);}
  .contact-block a{color:var(--blue-600); text-decoration:none; font-weight:600;font-size: 18px;}
  .contact-block a:hover{text-decoration:underline;}

  .need-list{
    list-style:disc;
    margin:8px 0 12px 20px;
    padding:0;
    font-size:18px;
    color:var(--muted);
  }
  .need-list li{margin-bottom:4px;}

  /* ============ RESPONSIVE BREAKPOINTS ============ */

  /* Mobile Small: 320px – 480px */
  @media (max-width:480px){
    .wrap{padding:22px 16px 44px;}
    .wrap-2{padding:22px 16px 44px;}

    .header{
      flex-direction:column;
      align-items:flex-start;
      gap:22px;
      padding:0 16px;
      text-align:left;
    }
    .header-copy{max-width:100%;}
    .header-copy h1{font-size:26px;}
    .header-copy h2{font-size:19px; margin-top:24px;}
    .header-copy p{font-size:14.5px; text-align:left;}
    .date-badge{font-size:11.5px; padding:7px 12px; margin-top:14px;}
    .date-badge i{font-size:11.5px;}

    .hero{width:100%; max-width:200px; margin:0 auto;}
    .monitor{width:118px; height:88px;}
    .a11y-icon{font-size:40px; top:18px;}
    .orbit-icon{width:34px;height:34px;}
    .orbit-icon i{font-size:14px;}
    .oi-4{top:52px;}

    .intro h2{font-size:17px;}
    .intro p{font-size:13.5px;}

    .grid{grid-template-columns:1fr; gap:14px;}
    .card{padding:20px;}
    .card h3{font-size:18px;}
    .card p{font-size:14.5px;}
    .card-icon{width:36px; height:36px;}
    .card-icon i{font-size:16px;}

    .check-list li,
    .browser-list li,
    .contact-block div,
    .contact-block a,
    .need-list{font-size:14.5px;}
  }

  /* Mobile Large: 481px – 767px */
  @media (min-width:481px) and (max-width:767px){
    .wrap{padding:26px 24px 50px;}
    .wrap-2{padding:26px 24px 50px;}

    .header{
      flex-direction:column;
      align-items:flex-start;
      gap:26px;
      padding:0 24px;
      text-align:left;
    }
    .header-copy{max-width:100%;}
    .header-copy h1{font-size:32px;}
    .header-copy h2{font-size:22px; margin-top:30px;}
    .header-copy p{font-size:16px; text-align:left;}
    .date-badge{font-size:12.5px;}

    .hero{width:100%; max-width:260px; margin:0 auto;}

    .intro h2{font-size:18px;}
    .intro p{font-size:14.5px;}

    .grid{grid-template-columns:1fr; gap:16px;}
    .card h3{font-size:20px;}
    .card p{font-size:15.5px;}

    .check-list li,
    .browser-list li,
    .contact-block div,
    .contact-block a,
    .need-list{font-size:15.5px;}
  }

  /* Tablet: 768px – 991px */
  @media (min-width:768px) and (max-width:991px){
    .header{
      flex-direction:column;
      align-items:flex-start;
      gap:36px;
      padding:0 40px;
    }
    .header-copy{max-width:100%;}
    .header-copy h1{font-size:38px;}
    .header-copy h2{font-size:25px;}
    .header-copy p{font-size:18px;}

    .hero{width:280px; margin:0 auto;}

    .grid{grid-template-columns:1fr; gap:18px;}
    .card h3{font-size:21px;}
    .card p{font-size:16.5px;}
  }

  /* Small Laptop: 992px – 1199px */
  @media (min-width:992px) and (max-width:1199px){
    .header{padding:0 50px; gap:50px;}
    .header-copy h1{font-size:40px;}
    .header-copy p{font-size:19px;}
    .hero{width:380px;}

    .grid{grid-template-columns:1fr 1fr; gap:18px;}
  }

  /* Desktop: 1200px – 1439px */
  @media (min-width:1200px) and (max-width:1439px){
    .header{padding:0 70px;}
    .header-copy h1{font-size:44px;}
    .header-copy p{font-size:20px;}
    .hero{width:460px;}
  }

  /* Large Desktop: 1440px and above */
  @media (min-width:1440px){
    .wrap{max-width:1920px; padding-top:48px;}
    .wrap-2{max-width: 1320px; padding:50px;}
    .header-copy h1{font-size:46px;}
    .grid{gap:24px;}
    .card{padding:30px 30px 28px;}
  }