:root{
      --bg:#f7f9fb;
      --surface:#ffffff;
      --ink:#111827;
      --muted:#667085;
      --line:#e4e7ec;
      --dark:#07111d;
      --dark-2:#101b29;
      --green:#08967e;
      --green-2:#0bb39b;
      --green-soft:#ecfdf7;
      --yellow:#f7c948;
      --shadow:0 8px 24px rgba(16,24,40,.08);
      --radius:16px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color:var(--ink);
      background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);
    }

    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    img{max-width:100%;display:block}

    .container{
      width:min(1440px, calc(100% - 48px));
      margin:0 auto;
    }

    header{
      background:linear-gradient(90deg,var(--dark),#0b1521);
      color:#fff;
      position:sticky;
      top:0;
      z-index:50;
      box-shadow:0 2px 12px rgba(0,0,0,.18);
    }

    .nav{
      min-height:72px;
      display:flex;
      align-items:center;
      gap:28px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:max-content;
    }

    .official-logo{
      display:block;
      width:auto;
      height:44px;
      max-width:230px;
      object-fit:contain;
    }

    .brand-mark{
      width:40px;
      height:40px;
      position:relative;
      filter:drop-shadow(0 3px 8px rgba(0,0,0,.25));
    }

    .brand-mark:before,
    .brand-mark:after{
      content:"";
      position:absolute;
      inset:5px 11px;
      transform:skewY(-30deg);
      border-radius:4px;
    }

    .brand-mark:before{
      background:linear-gradient(145deg,#ecd85b,#f5b930);
      transform:translateX(-7px) skewY(-30deg);
    }

    .brand-mark:after{
      background:linear-gradient(145deg,#2fc9a7,#069074);
      transform:translateX(7px) skewY(30deg);
    }

    .brand-text strong{
      display:block;
      font-size:20px;
      letter-spacing:.02em;
      line-height:1;
      font-weight:800;
    }

    .brand-text strong span{color:#23b79f}
    .brand-text small{
      display:block;
      font-size:9px;
      margin-top:5px;
      opacity:.88;
      letter-spacing:.04em;
    }

    nav{
      display:flex;
      gap:26px;
      margin-left:18px;
      flex:1;
    }

    nav a{
      font-weight:700;
      font-size:14px;
      opacity:.94;
      transition:.2s;
    }

    nav a:hover{color:#59d5bf}

    .top-search{
      display:flex;
      align-items:center;
      gap:8px;
      font-weight:700;
      white-space:nowrap;
    }

    .top-search svg{width:20px;height:20px}

    .hero{
      padding:28px 0 20px;
      text-align:center;
    }

    .hero h1{
      font-size:clamp(32px,4vw,46px);
      letter-spacing:-.04em;
      margin:0;
      font-weight:850;
    }

    .hero h1 span{color:var(--green)}
    .hero p{
      font-size:18px;
      color:#475467;
      margin:8px 0 18px;
    }

    .search-box{
      max-width:1000px;
      margin:0 auto;
      display:flex;
      gap:10px;
      padding:8px;
      background:#fff;
      border:1px solid #dfe4ea;
      border-radius:12px;
      box-shadow:var(--shadow);
    }

    .search-input{
      display:flex;
      align-items:center;
      gap:12px;
      flex:1;
      padding:0 12px;
    }

    .search-input svg{width:24px;height:24px;color:#101828}
    .search-input input{
      border:0;
      outline:0;
      width:100%;
      font-size:16px;
      color:#344054;
    }

    .btn-search{
      min-width:140px;
      border:0;
      color:#fff;
      font-weight:800;
      padding:14px 24px;
      border-radius:9px;
      cursor:pointer;
      background:linear-gradient(135deg,var(--green),var(--green-2));
    }

    .popular{
      margin-top:14px;
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:12px 22px;
      font-size:13px;
      color:#475467;
    }

    .popular a{
      text-decoration:underline;
      text-underline-offset:3px;
      color:#1d2939;
    }

    .categories{
      display:grid;
      grid-template-columns:repeat(11, minmax(90px,1fr));
      gap:10px;
      margin:20px auto 28px;
    }

    .cat{
      min-height:104px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:12px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap:10px;
      box-shadow:0 3px 12px rgba(16,24,40,.04);
      transition:.2s ease;
      cursor:pointer;
    }

    .cat:hover{
      transform:translateY(-2px);
      border-color:#9cded3;
      box-shadow:0 8px 22px rgba(16,24,40,.08);
    }

    .cat.active{
      border-color:#73cdbc;
      box-shadow:inset 0 -3px 0 var(--green);
      color:var(--green);
    }

    .cat svg{
      width:35px;height:35px;stroke-width:1.7
    }

    .cat span{
      font-size:12px;
      font-weight:800;
      text-align:center;
    }

    .section-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin:6px 0 16px;
    }

    .section-title{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .section-title:before{
      content:"";
      width:4px;
      height:24px;
      border-radius:5px;
      background:var(--green);
    }

    .section-title h2{
      font-size:23px;
      margin:0;
    }

    .view-all{
      color:var(--green);
      font-weight:800;
      font-size:14px;
      display:flex;
      align-items:center;
      gap:8px;
    }

    .grid{
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:18px;
    }

    .card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:14px;
      overflow:hidden;
      box-shadow:0 4px 14px rgba(16,24,40,.05);
      transition:.2s ease;
    }

    .card:hover{
      transform:translateY(-3px);
      box-shadow:0 12px 28px rgba(16,24,40,.10);
    }

    .thumb{
      height:155px;
      background:
        linear-gradient(#fff,#fff) padding-box,
        linear-gradient(145deg,#eef1f4,#fff) border-box;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:18px;
      border-bottom:1px solid #f0f1f3;
    }

    .thumb svg{
      width:100%;
      height:100%;
      color:#242c35;
    }

    .card-body{padding:12px 14px 14px}
    .tag{
      display:inline-flex;
      font-size:10px;
      line-height:1;
      padding:5px 8px;
      border-radius:999px;
      color:#06735f;
      background:var(--green-soft);
      font-weight:800;
      text-transform:uppercase;
      margin-bottom:8px;
    }

    .card h3{
      font-size:16px;
      margin:0 0 5px;
      line-height:1.25;
    }

    .meta{
      color:#667085;
      font-size:13px;
      line-height:1.6;
    }

    .downloads{
      display:flex;
      align-items:center;
      gap:6px;
      margin-top:4px;
    }

    .downloads svg{width:15px;height:15px}

    .free{
      color:var(--green);
      font-weight:850;
      margin-top:8px;
      font-size:14px;
    }

    .benefits{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:12px;
      margin:28px 0 16px;
      padding:18px 20px;
      border-radius:14px;
      border:1px solid #dbe7e4;
      background:rgba(255,255,255,.72);
    }

    .benefit{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .benefit svg{width:38px;height:38px;color:var(--green)}
    .benefit strong{display:block;font-size:14px}
    .benefit small{color:#667085;font-size:12px}

    .template-banner{
      margin:0 0 40px;
      background:linear-gradient(100deg,#121e2d,#07111d);
      color:#fff;
      border-radius:13px;
      min-height:96px;
      display:grid;
      grid-template-columns:1.4fr 1fr 1fr 1fr;
      gap:20px;
      align-items:center;
      padding:22px 30px;
      box-shadow:var(--shadow);
    }

    .template-main{
      display:flex;
      gap:16px;
      align-items:center;
    }

    .template-icon{
      width:42px;height:42px;
      color:#15bd92;
    }

    .template-main h3{margin:0 0 5px;font-size:20px}
    .template-main p{margin:0;color:#e6edf5;font-size:13px}
    .check{
      display:flex;
      gap:8px;
      align-items:center;
      font-size:14px;
      margin:7px 0;
      color:#f2f4f7;
    }
    .check svg{width:18px;height:18px;color:#17bf86}

    .cta{
      border:0;
      border-radius:9px;
      padding:15px 18px;
      background:linear-gradient(135deg,#f5bf31,#f7d253);
      font-weight:900;
      cursor:pointer;
      color:#151515;
      text-align:center;
    }

    .results-note{
      display:none;
      max-width:1000px;
      margin:8px auto 0;
      text-align:left;
      color:#667085;
      font-size:13px;
    }

    @media (max-width:1200px){
      .categories{grid-template-columns:repeat(6,1fr)}
      .grid{grid-template-columns:repeat(3,1fr)}
      nav{display:none}
    }

    @media (max-width:760px){
      .container{width:min(100% - 24px, 1440px)}
      .nav{min-height:64px}
      .brand-text small{display:none}
      .official-logo{height:38px;max-width:200px}
      .top-search span{display:none}
      .hero{padding-top:22px}
      .hero h1{font-size:32px}
      .hero p{font-size:15px}
      .search-box{flex-direction:column}
      .btn-search{width:100%}
      .categories{grid-template-columns:repeat(3,1fr)}
      .grid{grid-template-columns:repeat(2,1fr);gap:12px}
      .thumb{height:130px}
      .benefits{grid-template-columns:1fr 1fr}
      .template-banner{grid-template-columns:1fr}
    }

    @media (max-width:460px){
      .grid{grid-template-columns:1fr}
      .categories{grid-template-columns:repeat(2,1fr)}
      .benefits{grid-template-columns:1fr}
    }

    [hidden]{display:none!important}
    .categories{grid-template-columns:repeat(auto-fit,minmax(105px,150px));justify-content:center}
    .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-bottom:40px}
    .card{min-width:0;overflow-wrap:anywhere}
    .thumb img{width:100%;height:100%;object-fit:contain}
    .preview-fallback{background:linear-gradient(135deg,var(--green-soft),#f1f5f9);flex-direction:column;gap:6px;text-align:center}
    .preview-fallback strong{color:var(--green);font-size:23px}
    .preview-fallback span{font-size:13px}
    .preview-fallback small{color:var(--muted)}
    .catalog-state{color:var(--muted);padding:20px 0;margin:0}
    .retry{border:1px solid var(--green);background:white;color:var(--green);border-radius:9px;padding:10px 16px;cursor:pointer;margin-bottom:24px}
    .search-input{min-width:0}
    .results-note{display:block}
    :focus-visible{outline:3px solid var(--green);outline-offset:4px}
    @media(max-width:760px){.search-input{min-height:44px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media(max-width:460px){.grid{grid-template-columns:1fr}}
    footer{border-top:1px solid var(--line);padding:24px 0 30px;color:var(--muted);font-size:12px;background:#fff}
    footer a{color:var(--green);text-decoration:underline;text-underline-offset:3px}