@charset "UTF-8";
  :root{
    --lc-bg: #ffffff;
    --lc-ink: #0f172a;
    --lc-muted: rgba(15,23,42,.72);
    --lc-muted2: rgba(15,23,42,.56);
    --lc-border: rgba(15,23,42,.10);
    --lc-shadow: 0 18px 55px rgba(2,6,23,.10);
    --lc-radius: 18px;
    --lc-accent: #2563eb;
    --lc-accent2: #0ea5e9;
    --lc-chip: rgba(37,99,235,.10);
    --lc-chip-border: rgba(37,99,235,.22);
  }

  .lc .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

  .lc{
    background: var(--lc-bg);
    color: var(--lc-ink);
    padding: clamp(56px, 7vw, 96px) 0;
  }

  .lc__container{
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
  }

  .lc__header{ max-width: 980px; }

  .lc__eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(15,23,42,.04);
    border: 1px solid rgba(15,23,42,.08);
    color: rgba(15,23,42,.78);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 14px;
  }

  .lc__title{
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.08;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
  }

  .lc__lead{
    margin: 0;
    color: var(--lc-muted);
    font-size: clamp(15px, 1.55vw, 18px);
    line-height: 1.6;
  }

  .lc__toolbar{
    margin-top: 18px;
    display: grid;
    gap: 12px;
  }

  .lc__search{
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(15,23,42,.04);
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 14px;
    padding: 12px 12px;
    box-shadow: 0 10px 30px rgba(2,6,23,.04);
  }

  .lc__search svg{ color: rgba(15,23,42,.60); }

  .lc__input{
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--lc-ink);
  }

  .lc__tabs{ display:flex; flex-wrap:wrap; gap:8px; }

  .lc__tab{
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,0);
    color: rgba(15,23,42,.80);
    border-radius: 999px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
  }

  .lc__tab:hover{ transform: translateY(-1px); }

  .lc__tab.is-active{
    background: var(--lc-chip);
    border-color: var(--lc-chip-border);
    color: rgba(37,99,235,.95);
  }

  .lc__chips{ display:flex; flex-wrap:wrap; gap:8px; }

  .lc__chip{
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,0);
    color: rgba(15,23,42,.78);
    border-radius: 999px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
  }

  .lc__chip:hover{ transform: translateY(-1px); }

  .lc__chip.is-active{
    background: rgba(15,23,42,.04);
    border-color: rgba(15,23,42,.10);
  }

  /* Featured */
  .lc__featured{
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  @media (max-width: 980px){
    .lc__featured{ grid-template-columns: 1fr; }
  }

  .featured{
    border-radius: calc(var(--lc-radius) + 6px);
    overflow: hidden;
    position: relative;
    box-shadow: 0 22px 70px rgba(2,6,23,.16);
    border: 1px solid rgba(15,23,42,.10);
    min-height: 240px;
  }

  .featured__link{ display:block; height:100%; color: inherit; text-decoration:none; position:relative; }

  .featured__bg{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(2,6,23,.18), rgba(2,6,23,.78)),
      url("https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=2400&q=80");
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    filter: saturate(.98) contrast(1.05);
  }

  .featured__bg--alt{
    background:
      linear-gradient(180deg, rgba(2,6,23,.18), rgba(2,6,23,.78)),
      url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=2400&q=80");
    background-size: cover;
    background-position: center;
  }

  .featured__overlay{
    position:absolute; inset:0;
    background:
      radial-gradient(900px 420px at 18% 25%, rgba(37,99,235,.35), transparent 60%),
      radial-gradient(700px 380px at 85% 35%, rgba(14,165,233,.25), transparent 55%),
      linear-gradient(180deg, rgba(2,6,23,.35), rgba(2,6,23,.72));
  }

  .featured__content{
    position: relative;
    padding: 18px;
    display: grid;
    gap: 10px;
    height: 100%;
    align-content: end;
    color: rgba(255,255,255,.92);
  }

  .featured__title{ margin:0; font-size: 18px; letter-spacing: -0.01em; }
  .featured__desc{ margin:0; color: rgba(255,255,255,.78); line-height: 1.55; }

  .featured__cta{
    display:inline-flex;
    width: fit-content;
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.10);
    font-weight: 800;
    transition: transform .15s ease, filter .15s ease;
  }

  .featured__link:hover .featured__cta{ transform: translateY(-1px); filter: brightness(1.03); }

  .featured__meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .meta{ font-size: 12px; color: rgba(255,255,255,.72); }

  /* Grid */
  .lc__grid{
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  @media (max-width: 980px){
    .lc__grid{ grid-template-columns: 1fr; }
  }

  .rc{
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius);
    background: rgba(255,255,255,.96);
    box-shadow: var(--lc-shadow);
    padding: 16px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 12px;
    min-height: 210px;
    transition: transform .18s ease, box-shadow .18s ease;
  }

  .rc:hover{ transform: translateY(-2px); box-shadow: 0 22px 60px rgba(2,6,23,.12); }

  .rc__top{ display:flex; gap:10px; align-items:flex-start; }

  .rc__icon{
    width: 42px; height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(14,165,233,.10));
    border: 1px solid rgba(37,99,235,.18);
    display:grid; place-items:center;
    color: rgba(37,99,235,.95);
    flex: 0 0 auto;
  }

  .rc__title{ margin:0; font-size: 15.5px; letter-spacing: -0.01em; }
  .rc__desc{ margin: 6px 0 0; color: var(--lc-muted); font-size: 13.5px; line-height: 1.5; }

  .rc__meta{ display:flex; gap:10px; flex-wrap:wrap; color: var(--lc-muted2); font-size: 12.5px; }

  .lc .badge{
    display:inline-flex;
    align-items:center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,.18);
  }

  .lc .badge--guide{ background: rgba(37,99,235,.16); color: rgba(255,255,255,.92); }
  .lc .badge--tutorial{ background: rgba(14,165,233,.16); color: rgba(255,255,255,.92); }
  .lc .badge--faq{ background: rgba(99,102,241,.16); color: rgba(255,255,255,.92); }
  .lc .badge--video{ background: rgba(236,72,153,.16); color: rgba(255,255,255,.92); }

  .rc__actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

  .lc .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 14px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
    background: transparent;
  }

  .lc .btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }

  .lc .btn--primary{
    background: rgba(37,99,235,.95);
    border-color: rgba(37,99,235,.35);
    color: #fff;
    box-shadow: 0 12px 30px rgba(37,99,235,.18);
  }

  .lc .btn--ghost{
    background: rgba(255,255,255,.0);
    border-color: rgba(15,23,42,.14);
    color: rgba(15,23,42,.86);
    box-shadow: none;
  }

  .rc.is-hidden{ display:none; }

  /* Newsletter */
  .lc__newsletter{ margin-top: 18px; }

  .lc__newsletterInner{
    border-radius: calc(var(--lc-radius) + 6px);
    border: 1px solid rgba(37,99,235,.18);
    background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(14,165,233,.06));
    padding: 18px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
  }

  .lc__newsletterTitle{ margin:0; font-size: 16px; }
  .lc__newsletterLead{ margin: 6px 0 0; color: rgba(15,23,42,.76); line-height: 1.5; }

  .lc__form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

  .lc__email{
    width: min(320px, 100%);
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.14);
    background: rgba(255,255,255,.75);
    padding: 11px 12px;
    outline: none;
    font-size: 14px;
  }

  .lc__formHint{ margin: 0; font-size: 12px; color: rgba(15,23,42,.62); }

  .lc__toast{
    margin-top: 10px;
    display:none;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,.80);
    color: rgba(15,23,42,.84);
  }

  .lc__toast.is-show{ display:block; }

  /* Footer */
  .lc__footer{ margin-top: 18px; }

  .lc__footerLine{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    border-radius: 16px;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(15,23,42,.02);
    padding: 14px;
  }

  .lc__footLeft{ display:flex; align-items:center; gap:10px; color: rgba(15,23,42,.78); }

  .lc__dot{
    width: 10px; height: 10px; border-radius: 999px;
    background: linear-gradient(90deg, rgba(37,99,235,1), rgba(14,165,233,1));
    flex: 0 0 auto;
  }

  /* Modal */
  .lc .modal{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 9999;
  }

  .lc .modal.is-open{ display: flex; }

  .lc .modal__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(2,6,23,.55);
    backdrop-filter: blur(6px);
  }

  .lc .modal__panel{
    position: relative;
    width: min(760px, 100%);
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(15,23,42,.12);
    box-shadow: 0 30px 90px rgba(2,6,23,.25);
    overflow: hidden;
  }

  .lc .modal__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px;
    border-bottom: 1px solid rgba(15,23,42,.10);
  }

  .lc .modal__title{ margin: 0; font-size: 16px; }

  .lc .modal__close{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(15,23,42,.03);
    cursor: pointer;
  }

  .lc .modal__content{ padding: 14px 14px; color: rgba(15,23,42,.82); line-height: 1.65; }
  .lc .modal__content ul{ margin: 10px 0 0; padding-left: 18px; }

  .lc .modal__foot{
    padding: 14px 14px;
    border-top: 1px solid rgba(15,23,42,.10);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
  }