.live-laptops-model,
.mobile-projects{display:none}

@media (min-width:1041px){
  .live-laptops-model{
    display:block;
    padding:82px 0 88px;
    background:
      radial-gradient(circle at 9% 9%, rgba(255,107,43,.09), transparent 24%),
      radial-gradient(circle at 88% 4%, rgba(255,211,159,.32), transparent 25%),
      linear-gradient(180deg,#fff8ef 0%,#f8f1e7 52%,#fff9f0 100%);
    border-block:1px solid rgba(21,21,21,.06);
    overflow:hidden;
  }

  .live-laptops-model__top{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,380px);
    align-items:stretch;
    gap:32px;
    margin-bottom:28px;
  }

  .live-laptops-model__top h2{
    max-width:980px;
    margin:0 0 16px;
    font-size:clamp(42px,5vw,72px);
    line-height:.94;
    letter-spacing:-.075em;
  }

  .live-laptops-model__top p:not(.eyebrow):not(.live-laptops-model__portfolio-text):not(.live-laptops-model__hint){
    max-width:820px;
    margin:0;
    color:var(--muted);
    font-size:19px;
    line-height:1.52;
  }

  .live-laptops-model__hint{
    margin:14px 0 0;
    color:#7d7064;
    font-size:14px;
    font-weight:900;
    letter-spacing:.02em;
    text-transform:uppercase;
  }

  .live-laptops-model__portfolio-card{
    display:flex;
    flex-direction:column;
    margin:0;
    padding:26px;
    border-radius:30px;
    background:
      radial-gradient(circle at top right, rgba(255,211,159,.22), transparent 34%),
      linear-gradient(145deg, #171513 0%, #26211c 100%);
    color:#fff;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 28px 56px rgba(24,18,14,.22);
    position:relative;
    overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  .live-laptops-model__portfolio-card:hover{
    transform:translateY(-4px);
    box-shadow:0 34px 66px rgba(24,18,14,.28);
    border-color:rgba(255,211,159,.28);
  }

  .live-laptops-model__portfolio-card:before{
    content:"";
    position:absolute;
    right:-38px;
    top:-38px;
    width:138px;
    height:138px;
    border-radius:50%;
    background:rgba(255,107,43,.18);
    filter:blur(6px);
  }

  .live-laptops-model__portfolio-card > *{
    position:relative;
    z-index:1;
  }

  .live-laptops-model__portfolio-badge{
    display:inline-flex;
    align-self:flex-start;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:#f8dfc2;
    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:16px;
  }

  .live-laptops-model__portfolio-title{
    display:block;
    max-width:260px;
    font-size:32px;
    line-height:.96;
    letter-spacing:-.06em;
  }

  .live-laptops-model__portfolio-text{
    margin:14px 0 22px;
    max-width:280px;
    color:#d7cdc1;
    font-size:15px;
    line-height:1.45;
  }

  .live-laptops-model__portfolio-button{
    display:inline-flex;
    align-self:flex-start;
    align-items:center;
    gap:10px;
    min-height:52px;
    padding:0 18px;
    border-radius:999px;
    background:#fff;
    color:#111;
    font-size:15px;
    font-weight:900;
    box-shadow:0 14px 28px rgba(0,0,0,.16);
  }

  .live-laptops-model__portfolio-button span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    border-radius:50%;
    background:rgba(255,107,43,.12);
    color:var(--accent);
  }

  .live-laptops-model__list{
    display:grid;
    gap:22px;
  }

  .live-laptops-model__item{
    display:grid;
    grid-template-columns:minmax(540px,1.13fr) minmax(320px,.87fr);
    gap:28px;
    align-items:center;
    min-height:390px;
    padding:22px;
    border-radius:38px;
    background:
      radial-gradient(circle at 20% 20%, rgba(255,255,255,.92), transparent 28%),
      linear-gradient(180deg, rgba(255,252,247,.92), rgba(249,243,236,.92));
    border:1px solid rgba(21,21,21,.075);
    box-shadow:0 22px 56px rgba(40,32,24,.07), inset 0 1px 0 rgba(255,255,255,.9);
  }

  .live-laptops-model__stage{
    position:relative;
    height:450px;
    border-radius:30px;
    background:
      radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--project-accent,#ff6b2b) 14%, transparent), transparent 31%),
      linear-gradient(180deg, rgba(255,255,255,.82), rgba(250,246,240,.94));
    border:1px solid rgba(21,21,21,.06);
    overflow:hidden;
    contain:layout paint size;
  }

  .live-laptops-model__stage:before{
    content:"";
    position:absolute;
    inset:18px;
    border-radius:24px;
    border:1px solid rgba(21,21,21,.045);
    pointer-events:none;
  }

  .live-laptops-model__canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    z-index:1;
    cursor:grab;
    touch-action:none;
  }

  .live-laptops-model__canvas.is-dragging{
    cursor:grabbing;
  }

  .live-laptops-model__fallback{
    position:absolute;
    left:18px;
    right:18px;
    bottom:18px;
    z-index:2;
    margin:0;
    padding:12px 14px;
    border-radius:18px;
    background:rgba(255,255,255,.86);
    border:1px solid rgba(21,21,21,.08);
    color:#7a7067;
    font-size:13px;
    font-weight:750;
    line-height:1.38;
    display:none;
  }

  .live-laptops-model__item.is-error .live-laptops-model__fallback{display:block}

  .live-laptops-model__body{
    padding:10px 10px 10px 4px;
  }

  .live-laptops-model__kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:max-content;
    max-width:100%;
    padding:10px 15px;
    border-radius:999px;
    background:rgba(255,255,255,.86);
    border:1px solid rgba(21,21,21,.08);
    color:#746a60;
    font-size:13px;
    font-weight:900;
    box-shadow:0 10px 26px rgba(40,32,24,.05);
    margin-bottom:16px;
  }

  .live-laptops-model__dot{
    width:11px;
    height:11px;
    border-radius:50%;
    background:var(--project-accent,#ff6b2b);
    box-shadow:0 0 0 6px color-mix(in srgb, var(--project-accent,#ff6b2b) 18%, transparent);
    flex:0 0 auto;
  }

  .live-laptops-model__body h3{
    margin:0 0 15px;
    font-size:clamp(38px,3.8vw,56px);
    line-height:.96;
    letter-spacing:-.06em;
  }

  .live-laptops-model__title-link{
    color:var(--ink);
    text-decoration:none;
    transition:color .18s ease;
  }

  .live-laptops-model__title-link:hover{
    color:var(--accent);
  }

  .live-laptops-model__body p{
    margin:0 0 18px;
    color:var(--muted);
    font-size:19px;
    line-height:1.55;
  }

  .live-laptops-model__facts{
    list-style:none;
    margin:0 0 20px;
    padding:0;
    display:grid;
    gap:12px;
  }

  .live-laptops-model__facts li{
    position:relative;
    padding-left:24px;
    color:#72675d;
    font-size:16px;
    line-height:1.48;
  }

  .live-laptops-model__facts li:before{
    content:"";
    position:absolute;
    left:0;
    top:.65em;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--project-accent,#ff6b2b);
    transform:translateY(-50%);
  }

  .live-laptops-model__meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }

  .live-laptops-model__meta span{
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(21,21,21,.08);
    color:#6f6358;
    font-size:13px;
    font-weight:900;
  }

  .live-laptops-model__note{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-top:18px;
    padding:18px 20px;
    border-radius:28px;
    background:rgba(255,250,242,.78);
    border:1px solid rgba(21,21,21,.075);
    color:var(--muted);
    box-shadow:0 18px 48px rgba(40,32,24,.055);
  }

  .live-laptops-model__note p{margin:0;max-width:780px;line-height:1.45}
  .live-laptops-model__note strong{color:var(--ink)}
  .live-laptops-model__note .button{flex:0 0 auto}
}

@media (min-width:1041px) and (max-width:1180px){
  .live-laptops-model__item{grid-template-columns:minmax(480px,1fr) minmax(280px,.8fr)}
  .live-laptops-model__stage{height:320px}
  .live-laptops-model__body h3{font-size:40px}
  .live-laptops-model__body p{font-size:17px}
}

@media (max-width:1040px){
  .live-laptops-model{display:none!important}

  .mobile-projects{
    display:block;
    padding:58px 0 64px;
    background:
      radial-gradient(circle at 14% 10%, rgba(255,107,43,.12), transparent 26%),
      radial-gradient(circle at 86% 2%, rgba(255,211,159,.26), transparent 22%),
      linear-gradient(180deg,#fff8ef 0%,#f8f1e7 52%,#fff9f0 100%);
    border-block:1px solid rgba(21,21,21,.06);
    overflow:hidden;
  }

  .mobile-projects__top{
    display:grid;
    gap:12px;
    margin-bottom:22px;
  }

  .mobile-projects__top p:not(.eyebrow):not(.mobile-projects__swipe-hint){
    margin:0;
    color:var(--muted);
    font-size:17px;
    line-height:1.58;
  }

  .mobile-projects__top-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px 14px;
    align-items:center;
  }

  .mobile-projects__portfolio-link{
    min-height:42px;
    padding:10px 16px;
    font-size:14px;
    box-shadow:none;
  }

  .mobile-projects__swipe-hint{
    color:#7d7064;
    font-size:13px;
    font-weight:800;
    line-height:1.4;
  }

  .mobile-projects__controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
  }

  .mobile-projects__controls-label{
    color:#7d7064;
    font-size:13px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .mobile-projects__controls-group{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .mobile-projects__nav{
    width:42px;
    height:42px;
    border:1px solid rgba(21,21,21,.1);
    border-radius:999px;
    background:#fff;
    color:#171513;
    font-size:18px;
    font-weight:900;
    box-shadow:0 14px 28px rgba(40,32,24,.08);
  }

  .mobile-projects__nav:disabled{
    opacity:.4;
    box-shadow:none;
  }

  .mobile-projects__dots{
    display:flex;
    align-items:center;
    gap:8px;
  }

  .mobile-projects__dot{
    width:10px;
    height:10px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(21,21,21,.18);
  }

  .mobile-projects__dot.is-active{
    width:28px;
    border-radius:999px;
    background:var(--accent);
  }

  .mobile-projects__track{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:100%;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:6px;
  }

  .mobile-projects__track::-webkit-scrollbar{
    display:none;
  }

  .mobile-projects__slide{
    scroll-snap-align:start;
    display:grid;
    gap:14px;
  }

  .mobile-projects__stage{
    position:relative;
    min-height:clamp(390px, 96vw, 520px);
    border-radius:30px;
    background:
      radial-gradient(circle at 50% 82%, color-mix(in srgb, var(--project-accent,#ff6b2b) 14%, transparent), transparent 33%),
      linear-gradient(180deg, rgba(255,255,255,.84), rgba(250,246,240,.96));
    border:1px solid rgba(21,21,21,.08);
    overflow:hidden;
    box-shadow:0 22px 50px rgba(40,32,24,.08);
  }

  .mobile-projects__stage:before{
    content:"";
    position:absolute;
    inset:16px;
    border-radius:24px;
    border:1px solid rgba(21,21,21,.05);
    pointer-events:none;
  }

  .mobile-projects__canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    touch-action:pan-y;
    cursor:grab;
  }

  .mobile-projects__canvas.is-dragging{
    cursor:grabbing;
  }

  .mobile-projects__fallback{
    position:absolute;
    left:16px;
    right:16px;
    bottom:16px;
    z-index:2;
    margin:0;
    padding:12px 14px;
    border-radius:18px;
    background:rgba(255,255,255,.9);
    border:1px solid rgba(21,21,21,.08);
    color:#6f6358;
    font-size:13px;
    font-weight:750;
    line-height:1.4;
    display:none;
  }

  .mobile-projects__slide.is-error .mobile-projects__fallback{
    display:block;
  }

  .mobile-projects__card{
    display:grid;
    gap:14px;
    padding:20px;
    border-radius:28px;
    background:#fff;
    border:1px solid rgba(21,21,21,.08);
    box-shadow:0 20px 46px rgba(40,32,24,.08);
  }

  .mobile-projects__kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:max-content;
    max-width:100%;
    padding:9px 14px;
    border-radius:999px;
    background:rgba(255,248,239,.92);
    border:1px solid rgba(21,21,21,.07);
    color:#746a60;
    font-size:12px;
    font-weight:900;
  }

  .mobile-projects__kicker i{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--project-accent,#ff6b2b);
    box-shadow:0 0 0 5px color-mix(in srgb, var(--project-accent,#ff6b2b) 14%, transparent);
  }

  .mobile-projects__card h3{
    margin:0;
    font-size:36px;
    line-height:.94;
    letter-spacing:-.06em;
  }

  .mobile-projects__title-link{
    color:var(--ink);
    text-decoration:none;
  }

  .mobile-projects__card p{
    margin:0;
    color:var(--muted);
    font-size:16px;
    line-height:1.58;
  }

  .mobile-projects__facts{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:10px;
  }

  .mobile-projects__facts li{
    position:relative;
    padding-left:22px;
    color:#5d554d;
    line-height:1.55;
  }

  .mobile-projects__facts li:before{
    content:"";
    position:absolute;
    left:0;
    top:.5em;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px rgba(255,107,43,.14);
  }

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

  .mobile-projects__meta span{
    display:inline-flex;
    align-items:center;
    padding:9px 12px;
    border-radius:999px;
    background:#f7efe6;
    color:#5e544b;
    font-size:12px;
    font-weight:900;
  }

  .mobile-projects__links{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
  }

  .mobile-projects__case-button{
    min-height:44px;
    padding:11px 16px;
    font-size:14px;
    box-shadow:0 14px 28px rgba(255,107,43,.2);
  }

  .mobile-projects__live{
    color:var(--ink);
    font-size:14px;
    font-weight:900;
    text-decoration:underline;
    text-underline-offset:4px;
  }

  .mobile-projects__bottom{
    display:grid;
    gap:14px;
    margin-top:18px;
    padding:22px;
    border-radius:30px;
    background:
      radial-gradient(circle at top right, rgba(255,211,159,.22), transparent 34%),
      linear-gradient(145deg, #171513 0%, #26211c 100%);
    color:#fff;
    box-shadow:0 24px 52px rgba(24,18,14,.2);
  }

  .mobile-projects__bottom p{
    margin:0;
    color:#e5dbce;
    line-height:1.55;
  }

  .mobile-projects__bottom strong{
    color:#fff;
  }

  .mobile-projects__lead-button{
    width:100%;
  }
}

@media (max-width:780px){
  .mobile-projects__stage{
    min-height:clamp(380px, 110vw, 460px);
  }

  .mobile-projects__controls{
    align-items:flex-start;
    gap:12px;
  }

  .mobile-projects__controls-group{
    margin-left:auto;
  }
}