:root{
    --orange:#F47B20;
    --orange-dark:#E06A10;
    --navy:#1B2A4A;
    --navy-dark:#0E1830;
    --red:#F47B20;
    --text:#2B2B2B;
    --muted:#6B6B6B;
    --bg:#FFFFFF;
    --border:#E7E7E7;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{font-family:'Segoe UI', Arial, sans-serif; color:var(--text); background:var(--bg);}
  img{max-width:100%; display:block;}
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}

  /* Top bar */
  .topbar{
    background:var(--orange);
    padding:14px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
  }
  .search-wrap{
    display:flex;
    flex:1;
    max-width:520px;
    min-width:0;
  }
  .search-wrap input{
    flex:1;
    padding:10px 14px;
    border:none;
    border-radius:2px 0 0 2px;
    font-size:14px;
    outline:none;
  }
  .search-wrap button{
    background:#1c1c1c;
    border:none;
    color:#fff;
    width:44px;
    cursor:pointer;
    border-radius:0 2px 2px 0;
  }
  .phone{
    color:#fff;
    font-weight:700;
    white-space:nowrap;
  }

  /* Nav */
  nav{
    display:flex;
    justify-content:left;
    gap:32px;
    padding:14px 24px;
    border-bottom:1px solid var(--border);
    flex-wrap:wrap;
    font-size:14px;
    font-weight:600;
  }
  nav a{
    color:#333;
    padding-bottom:6px;
  }
  nav a.active{
    color:var(--orange);
    border-bottom:2px solid var(--orange);
  }
  nav a:hover{ color: var(--orange); }

  /* Hero */
  .hero{
    background:linear-gradient(120deg, var(--navy-dark) 0%, var(--navy) 40%, var(--orange-dark) 75%, var(--orange) 100%);
    color:#fff;
    padding:70px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    flex-wrap:wrap;
    position:relative;
    overflow:hidden;
    min-height:420px;
  }
  .hero-text{ max-width:520px; z-index:2; }
  .hero-text h1{
    font-size:56px;
    line-height:1.05;
    font-weight:900;
    letter-spacing:1px;
  }
  .hero-text h1 .accent{ color:var(--orange); display:block; }
  .hero-text p{
    font-size:20px;
    margin-top:16px;
    font-weight:500;
    color:#f0f0f0;
  }
  .hero-visual{ z-index:2; }
  .device-icons{ display:flex; align-items:flex-end; gap:14px; }

  /* Section titles */
  .section-title{
    text-align:center;
    font-size:32px;
    font-weight:700;
    margin:56px 0 32px;
    color:#1c1c1c;
  }

  /* Product grid */
  .product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    max-width:1200px;
    margin:0 auto;
    padding:0 16px;
    gap:0;
    border-top:1px solid var(--border);
    border-left:1px solid var(--border);
  }
  .product-card{
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:24px;
    text-align:left;
  }
  .product-card .thumb{
    height:130px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
  }
  .product-card h3{
    font-size:14px;
    font-weight:600;
    line-height:1.4;
    min-height:58px;
  }
  .product-card .row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:14px;
  }
  .heart{ color:#999; font-size:18px; cursor:pointer; }
  .price{ color:var(--red); font-weight:700; font-size:15px; }

  /* Promo split */
  .promo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:60px;
    padding:70px 24px;
    max-width:1200px;
    margin:40px auto;
    flex-wrap:wrap;
  }
  .promo-visual{
    background:#f4f4f4;
    padding:30px;
    border-radius:4px;
    width:420px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .promo-content{ max-width:440px; }
  .promo-content h2{
    font-size:36px;
    font-weight:800;
    color:var(--navy);
    line-height:1.2;
    margin-bottom:20px;
  }
  .promo-content p{
    color:var(--muted);
    font-size:16px;
    line-height:1.7;
    margin-bottom:28px;
  }
  .btn-orange{
    background:var(--orange);
    color:#fff;
    padding:14px 28px;
    border-radius:4px;
    font-weight:700;
    display:inline-block;
    border:none;
    cursor:pointer;
    font-size:15px;
  }

  /* Latest products */
  .latest-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    max-width:1200px;
    margin:0 auto 60px;
    padding:0 16px;
  }
  .latest-card{
    border:1px solid var(--border);
    border-radius:4px;
    padding:20px;
    position:relative;
    transition:box-shadow .2s ease;
  }
  .latest-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); }
  .latest-card .fav{
    position:absolute; top:16px; right:16px;
    color:#bbb; font-size:16px;
  }
  .latest-card .thumb{
    height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
  }
  .latest-card .cat{
    font-size:11px;
    letter-spacing:.5px;
    color:#aaa;
    font-weight:700;
    margin-bottom:6px;
  }
  .latest-card h4{
    font-size:14px;
    font-weight:600;
    line-height:1.4;
    min-height:60px;
  }
  .latest-card .row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:16px;
  }
  .cart-btn{
    /* background:var(--red); */
    color:#fff;
    width:34px;
    height:34px;
    border-radius:50%;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:14px;
  }

  /* Call banner */
  .call-banner{
    text-align:center;
    padding:0 24px 60px;
  }
  .call-btn{
    background:#3053E3;
    color:#fff;
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:14px 30px;
    border-radius:6px;
    font-weight:700;
  }
  .call-btn small{ display:block; font-weight:400; font-size:12px; opacity:.85; }

  footer{
    background:#14141a;
    color:#ccc;
    text-align:center;
    padding:18px;
    font-size:13px;
  }

  /* Hamburger (mobile nav) */
  .nav-toggle{
    display:none;
    background:none;
    border:none;
    font-size:26px;
    cursor:pointer;
    color:#1c1c1c;
    padding:4px 8px;
  }

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

  /* Tablet */
  @media (max-width: 1024px){
    .product-grid{ grid-template-columns:repeat(3,1fr); }
    .latest-grid{ grid-template-columns:repeat(3,1fr); }
    .hero-text h1{ font-size:46px; }
    .promo{ gap:36px; }
  }

  /* Small tablet / large phone */
  @media (max-width: 860px){
    .topbar{ padding:12px 16px; gap:12px; justify-content:space-between; }
    .search-wrap{ order:2; flex-basis:100%; max-width:100%; }
    .phone{ order:1; font-size:13px; }

    nav{
      gap:0;
      padding:0;
      position:relative;
      flex-direction:column;
      align-items:stretch;
      max-height:0;
      overflow:hidden;
      transition:max-height .25s ease;
    }
    nav.open{ max-height:400px; }
    nav a{
      padding:12px 20px;
      border-bottom:1px solid var(--border);
      width:100%;
    }
    nav a.active{ border-bottom:1px solid var(--border); border-left:3px solid var(--orange); }
    .nav-toggle{ display:block; }
    .nav-bar{
      display:flex !important;
      align-items:center;
      justify-content:space-between;
      padding:12px 16px;
      border-bottom:1px solid var(--border);
    }
    .nav-bar-label{ font-weight:700; font-size:15px; }

    .hero{ flex-direction:column; text-align:center; padding:50px 20px; min-height:auto; }
    .hero-text{ max-width:100%; }
    .hero-text h1{ font-size:40px; }
    .hero-text p{ font-size:17px; }
    .device-icons{ justify-content:center; flex-wrap:wrap; }

    .section-title{ font-size:26px; margin:40px 0 24px; }

    .product-grid{ grid-template-columns:repeat(2,1fr); }
    .latest-grid{ grid-template-columns:repeat(2,1fr); }

    .promo{ flex-direction:column; text-align:center; padding:50px 20px; margin:20px auto; }
    .promo-visual{ width:100%; max-width:380px; }
    .promo-content{ max-width:100%; }
    .promo-content h2{ font-size:28px; }
  }

  /* Phone */
  @media (max-width: 560px){
    .hero-text h1{ font-size:32px; }
    .hero-text p{ font-size:15px; }
    .hero-text p strong{ font-size:19px !important; }

    .device-icons svg{ width:70px !important; height:auto !important; }
    .device-icons svg:first-child{ width:120px !important; }

    .product-grid, .latest-grid{ grid-template-columns:1fr; }
    .product-card, .latest-card{ padding:18px; }

    .call-banner{ padding:0 16px 40px; }
    .call-btn{ width:100%; justify-content:center; padding:14px 16px; }

    footer{ font-size:12px; padding:16px; }
  }

  @media (max-width: 360px){
    .hero-text h1{ font-size:28px; }
    .search-wrap input{ font-size:13px; padding:9px 12px; }
  }

  /* Accessibility: visible focus */
  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:2px solid var(--orange);
    outline-offset:2px;
  }

  @media (prefers-reduced-motion: reduce){
    nav, .latest-card{ transition:none !important; }
  }


  :root{
    --blue:#4A7DFB;
    --blue-dark:#3A63D8;
    --dark:#101014;
    --text:#1c1c1c;
    --muted:#6b6b6b;
    --border:#eee;
    --green:#2FBF71;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{font-family:'Segoe UI', Arial, sans-serif; color:var(--text); background:#fff;}
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}
  img{max-width:100%; display:block;}

  /* Header */
  header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 40px;
    background:#fff;
    position:relative;
    z-index:10;
  }
  .logo{
    font-size:22px;
    font-weight:800;
    letter-spacing:.5px;
    color:#111;
  }
  nav.main-nav{
    display:flex;
    gap:36px;
  }
  nav.main-nav a{
    font-size:15px;
    color:#333;
    font-weight:500;
  }
  nav.main-nav a:hover{ color:var(--blue); }

  .get-started{
    background:var(--blue);
    color:#fff;
    padding:12px 26px;
    border-radius:30px;
    font-weight:700;
    font-size:14px;
    border:none;
    cursor:pointer;
    white-space:nowrap;
  }
  .get-started:hover{ background:var(--blue-dark); }

  .nav-toggle{
    display:none;
    background:none;
    border:none;
    font-size:26px;
    cursor:pointer;
    color:#111;
  }

  /* Hero */
  .hero{
    position:relative;
    min-height:640px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:80px 24px 60px;
    background:
      linear-gradient(180deg, rgba(10,10,15,.75), rgba(10,10,15,.88)),
      radial-gradient(circle at 20% 30%, #2a3550 0%, #10101a 55%);
    color:#fff;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(135deg, rgba(30,40,70,.6), rgba(70,40,90,.5)),
      repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 2px, transparent 2px, transparent 40px);
    z-index:0;
  }
  .hero > *{ position:relative; z-index:1; }

  .eyebrow{
    letter-spacing:2px;
    font-size:13px;
    font-weight:700;
    color:#c8ccd8;
    margin-bottom:18px;
  }
  .hero h1{
    font-size:56px;
    font-weight:800;
    line-height:1.15;
    max-width:900px;
    margin-bottom:20px;
  }
  .hero .subheading{
    font-size:20px;
    color:#dcdfe6;
    margin-bottom:48px;
    font-weight:400;
  }

  /* Cards */
  .card-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:24px;
    width:100%;
    max-width:1200px;
    margin:0 auto;
  }
  .brand-card{
    background:#fff;
    border-radius:8px;
    padding:44px 24px 32px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:34px;
    color:var(--text);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
  }
  .brand-card .wordmark{
    font-size:34px;
    font-weight:800;
    height:44px;
    display:flex;
    align-items:center;
  }
  .wordmark.hp{ font-style:italic; color:#0096D6; font-family:Georgia, 'Times New Roman', serif; }
  .wordmark.canon{ color:#CC0000; font-family:Georgia, serif; font-style:italic; }
  .wordmark.brother{ color:#1414A0; font-family:'Segoe UI', Arial, sans-serif; }
  .wordmark.epson{ color:#0033A0; letter-spacing:1px; }

  .brand-card .label{
    font-size:18px;
    font-weight:700;
    color:#111;
  }
  .brand-card .start-btn{
    background:var(--blue);
    color:#fff;
    border:none;
    padding:14px 0;
    width:100%;
    border-radius:6px;
    font-weight:700;
    font-size:15px;
    cursor:pointer;
  }
  .brand-card .start-btn:hover{ background:var(--blue-dark); }

  /* Trust row */
  .trust-row{
    display:flex;
    justify-content:center;
    gap:40px;
    margin-top:52px;
    flex-wrap:wrap;
    font-size:14px;
    font-weight:600;
    color:#e4e6ec;
  }
  .trust-row li{ display:flex; align-items:center; gap:8px; }
  .trust-row .check{ color:var(--green); font-weight:900; }

  footer{
    text-align:center;
    padding:24px;
    font-size:13px;
    color:var(--muted);
    background:#f7f7f9;
  }

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

  @media (max-width: 1024px){
    .hero h1{ font-size:44px; }
    .card-grid{ grid-template-columns:repeat(2,1fr); max-width:700px; }
  }

  @media (max-width: 860px){
    header{ padding:16px 20px; }
    nav.main-nav{
      position:absolute;
      top:100%;
      left:0;
      right:0;
      background:#fff;
      flex-direction:column;
      gap:0;
      max-height:0;
      overflow:hidden;
      transition:max-height .25s ease;
      box-shadow:0 8px 16px rgba(0,0,0,.08);
    }
    nav.main-nav.open{ max-height:400px; }
    nav.main-nav a{
      padding:16px 24px;
      border-bottom:1px solid var(--border);
      width:100%;
    }
    .nav-toggle{ display:block; }
    .get-started{ padding:10px 18px; font-size:13px; }

    .hero{ min-height:auto; padding:60px 20px 50px; }
    .hero h1{ font-size:34px; }
    .hero .subheading{ font-size:17px; margin-bottom:36px; }

    .trust-row{ gap:20px 28px; margin-top:40px; }
  }

  @media (max-width: 620px){
    .card-grid{ grid-template-columns:1fr; max-width:420px; }
    .hero h1{ font-size:28px; }
    .eyebrow{ font-size:12px; }
    .trust-row{ flex-direction:column; align-items:center; gap:12px; }
  }

  @media (max-width: 380px){
    .hero h1{ font-size:24px; }
    .logo{ font-size:18px; }
  }

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--blue);
    outline-offset:2px;
  }

  @media (prefers-reduced-motion: reduce){
    nav.main-nav{ transition:none !important; }
  }


  :root{
    --text:#2B2B2B;
    --muted:#4a4a4a;
    --border:#e7e7e7;
    --orange:#F47B20;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{
    font-family:'Segoe UI', Arial, sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.7;
  }

  .page{
    max-width:760px;
    margin:0 auto;
    padding:48px 24px 80px;
    border-left:1px solid var(--border);
    border-right:1px solid var(--border);
  }

  h1{
    font-size:30px;
    font-weight:700;
    margin-bottom:22px;
  }
  h2{
    font-size:22px;
    font-weight:700;
    margin:40px 0 18px;
  }
  h3{
    font-size:18px;
    font-weight:700;
    margin:30px 0 12px;
  }
  p{
    font-size:15.5px;
    color:var(--muted);
    margin-bottom:16px;
  }
  strong{ color:#fff; font-weight:700; }

  ul{
    margin:0 0 16px 20px;
  }
  ul li{
    font-size:15.5px;
    color:var(--muted);
    margin-bottom:10px;
    padding-left:4px;
  }
  ul li strong{ color:var(--text); }

  section{ margin-bottom:8px; }

  @media (max-width: 700px){
    .page{ padding:36px 20px 60px; border:none; }
    h1{ font-size:26px; }
    h2{ font-size:20px; margin:32px 0 14px; }
    h3{ font-size:17px; margin:24px 0 10px; }
    p, ul li{ font-size:15px; }
  }

  @media (max-width: 420px){
    h1{ font-size:22px; }
    h2{ font-size:18px; }
    h3{ font-size:16px; }
    p, ul li{ font-size:14px; }
    .page{ padding:28px 16px 48px; }
  }

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--orange);
    outline-offset:2px;
  }

   :root{
    --text:#1c1c1c;
    --label:#3a3a4a;
    --border:#e2e2e2;
    --orange:#F47B20;
    --orange-dark:#E06A10;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{
    font-family:'Segoe UI', Arial, sans-serif;
    color:var(--text);
    background:#fff;
  }

  .page{
    max-width:760px;
    margin:0 auto;
    padding:40px 40px 56px;
    border:1px solid var(--border);
  }

  h1{
    font-size:30px;
    font-weight:700;
    margin-bottom:32px;
  }

  .field{
    margin-bottom:32px;
  }
  .field label{
    display:block;
    font-size:15px;
    color:var(--label);
    margin-bottom:10px;
  }
  .field input,
  .field textarea{
    width:100%;
    border:1px solid var(--border);
    border-radius:2px;
    padding:12px 14px;
    font-size:15px;
    font-family:inherit;
    color:var(--text);
    outline:none;
  }
  .field input:focus,
  .field textarea:focus{
    border-color:var(--orange);
  }
  .field textarea{
    min-height:170px;
    resize:vertical;
  }

  .submit-btn{
    width:100%;
    background:var(--orange);
    color:#fff;
    border:none;
    padding:16px 20px;
    font-size:14px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    cursor:pointer;
    border-radius:2px;
  }
  .submit-btn:hover{ background:var(--orange-dark); }

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

  @media (max-width: 700px){
    .page{ padding:32px 24px 44px; margin:0 12px; }
    h1{ font-size:26px; margin-bottom:26px; }
    .field{ margin-bottom:26px; }
  }

  @media (max-width: 480px){
    body{ padding:0; }
    .page{ padding:26px 18px 36px; margin:0; border-left:none; border-right:none; }
    h1{ font-size:22px; margin-bottom:22px; }
    .field label{ font-size:14px; }
    .field input, .field textarea{ font-size:14px; padding:11px 12px; }
    .field textarea{ min-height:140px; }
    .submit-btn{ padding:14px 16px; font-size:13px; }
  }

  input:focus-visible, textarea:focus-visible, button:focus-visible{
    outline:2px solid var(--orange);
    outline-offset:2px;
  }