/* Website 11 reference — home-arrivals. Generated from website11/homepage11.html; values unchanged. */
.log-home .na-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:310px;gap:16px}
.log-home .na-card{position:relative;overflow:hidden;isolation:isolate;border-radius:26px;border:1px solid var(--log-line);padding:16px;display:flex;flex-direction:column;background:radial-gradient(120% 80% at 50% 28%,var(--tint) 0%,transparent 58%),linear-gradient(175deg,var(--deep) 0%,#081719 80%);transition:border-color .4s}
.log-home .na-card:hover{border-color:rgba(244,251,249,.22)}
.log-home .na-card::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 2px,transparent 2px 9px);pointer-events:none}
.log-home .na-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px}
.log-home .na-badge{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#2A0E05;background:var(--log-coral);border-radius:999px;padding:4px 10px;box-shadow:0 6px 18px -6px rgba(255,138,101,.8)}
.log-home .na-demo{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--log-text-soft);background:rgba(244,251,249,.08);border:1px solid var(--log-line-2);border-radius:999px;padding:3px 9px}
.log-home .na-stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.log-home .na-ring{position:absolute;width:150px;height:150px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,var(--ringc) 90deg,transparent 200deg);-webkit-mask:radial-gradient(circle,transparent 64%,#000 65%,#000 70%,transparent 71%);mask:radial-gradient(circle,transparent 64%,#000 65%,#000 70%,transparent 71%);opacity:.7;animation:log-spin 7s linear infinite;transition:opacity .4s,transform .8s var(--log-ease)}
.log-home .na-ring.two{width:210px;height:210px;opacity:.35;animation-duration:12s;animation-direction:reverse}
.log-home .na-stage::before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:var(--tint);filter:blur(30px)}
.log-home .na-pack{position:relative;scale:.62;animation:log-bob 5s ease-in-out infinite;transition:scale .7s var(--log-ease)}
.log-home .na-card:nth-child(3) .na-pack{animation-delay:-1.6s}
.log-home .na-card:nth-child(4) .na-pack{animation-delay:-3.2s}
.log-home .na-card:hover .na-pack{scale:.7}
.log-home .na-card:hover .na-ring{opacity:1;transform:scale(1.08)}
.log-home .na-info{position:relative;z-index:2;border-radius:18px;padding:12px 12px 12px 14px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.log-home .na-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.log-home .na-cat{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--log-mint)}
.log-home .na-card h3{font-size:15px;line-height:1.25;letter-spacing:-.015em}
.log-home .na-size{font-size:12.5px;color:var(--log-muted)}
.log-home .na-buy{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
.log-home .na-price{font-size:16px;font-weight:800;color:var(--log-text-strong);letter-spacing:-.02em}
.log-home .na-price.big{font-size:26px}
.log-home .add.add-ic{width:40px;height:40px;min-height:40px;padding:0;justify-content:center;border-radius:50%;background:var(--log-grad);color:#04241C;border:0;box-shadow:0 10px 22px -10px rgba(75,227,181,.9);transition:transform .5s var(--log-ease),box-shadow .3s}
.log-home .add.add-ic:hover{transform:rotate(90deg) scale(1.08);background:var(--log-grad);color:#04241C}
.log-home .na-card.feat{grid-column:span 2;grid-row:span 2;flex-direction:row;align-items:stretch;gap:12px;padding:30px;background:radial-gradient(80% 90% at 72% 50%,var(--tint) 0%,transparent 60%),linear-gradient(160deg,var(--deep) 0%,#081719 85%)}
.log-home .na-copy{position:relative;z-index:2;flex:0 1 300px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.log-home .na-copy .na-top{justify-content:flex-start;margin-bottom:6px}
.log-home .na-card.feat h3{font-size:clamp(22px,2.2vw,30px);line-height:1.12;letter-spacing:-.03em}
.log-home .na-copy p{color:var(--log-text-soft);font-size:14.5px}
.log-home .na-feat-buy{display:flex;align-items:center;gap:16px;margin-top:8px}
.log-home .na-feat-buy .add{min-height:46px;padding:0 22px;font-size:14px;background:var(--log-grad);color:#04241C;border:0}
.log-home .na-card.feat .na-pack{scale:1.12}
.log-home .na-card.feat:hover .na-pack{scale:1.2}
.log-home .na-card.feat .na-ring{width:280px;height:280px}
.log-home .na-card.feat .na-ring.two{width:380px;height:380px}
.log-home .na-card.feat .na-stage::before{width:240px;height:240px;filter:blur(50px)}
.log-home .na-cta{text-decoration:none;justify-content:space-between;background:linear-gradient(160deg,var(--log-surface-2),var(--log-surface));padding:24px}
.log-home .na-cta::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;background:conic-gradient(from var(--a,0deg),transparent 0 60%,var(--log-mint) 75%,var(--log-aqua) 85%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:log-border-spin 5s linear infinite}
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes log-border-spin{to{--a:360deg}}
.log-home .na-cta-ring{position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(75,227,181,.25),transparent 70%);transition:transform .8s var(--log-ease)}
.log-home .na-cta:hover .na-cta-ring{transform:scale(1.4)}
.log-home .na-cta-txt{position:relative;display:flex;flex-direction:column;gap:8px}
.log-home .na-cta-txt strong{color:var(--log-text-strong);font-size:22px;line-height:1.15;letter-spacing:-.03em}
.log-home .na-cta-txt small{color:var(--log-muted);font-size:13px}
.log-home .na-cta-go{position:relative;align-self:flex-end;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--log-grad);color:#04241C;transition:transform .6s var(--log-ease)}
.log-home .na-cta:hover .na-cta-go{transform:rotate(-45deg) scale(1.08)}
@media (max-width:1024px){
  .log-home .na-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .log-home .na-grid>*{width:280px;height:330px}
  .log-home .na-grid>.feat{width:560px}
}
@media (max-width:760px){
  .log-home .na-grid>*{width:66vw;height:330px}
  .log-home .na-grid>.feat{width:86vw;flex-direction:column;padding:20px;gap:0}
  .log-home .na-card.feat .na-stage{order:-1;min-height:150px}
  .log-home .na-card.feat .na-pack{scale:.7}
  .log-home .na-card.feat:hover .na-pack{scale:.74}
  .log-home .na-card.feat .na-ring{width:160px;height:160px}
  .log-home .na-card.feat .na-ring.two{width:220px;height:220px}
  .log-home .na-card.feat .na-stage::before{width:140px;height:140px}
  .log-home .na-copy{flex:none;gap:8px}
  .log-home .na-copy .na-top{display:none}
  .log-home .na-copy p{font-size:13px}
  .log-home .na-card.feat h3{font-size:20px}
  .log-home .na-price.big{font-size:20px}
  .log-home .na-feat-buy .add{min-height:40px;padding:0 16px;font-size:13px}
  .log-home .na-cta{height:330px}
  .log-home .na-grid>*{width:64vw}
  .log-home .na-grid>.feat{width:84vw}
  .log-home .na-grid>.feat{height:auto;min-height:330px}
  .log-home .na-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:12px;overflow:visible;margin:0;padding:0;scroll-snap-type:none}
  .log-home .na-grid>*{width:auto!important;height:auto!important;min-height:0;flex:none}
  .log-home .na-grid>.feat{grid-column:1/-1;grid-row:auto}
  .log-home .na-card:not(.feat):not(.na-cta){height:280px!important;padding:12px;border-radius:20px}
  .log-home .na-card:not(.feat) .na-top{gap:4px}
  .log-home .na-card:not(.feat) .na-demo{display:none}
  .log-home .na-card:not(.feat) .na-pack{scale:.42}
  .log-home .na-card:not(.feat):hover .na-pack{scale:.44}
  .log-home .na-card:not(.feat) .na-ring{width:104px;height:104px}
  .log-home .na-card:not(.feat) .na-stage::before{width:80px;height:80px}
  .log-home .na-card:not(.feat) .na-info{flex-direction:column;align-items:stretch;gap:8px;padding:10px;border-radius:14px}
  .log-home .na-card:not(.feat) h3{font-size:13.5px;line-height:1.25}
  .log-home .na-card:not(.feat) .na-size{font-size:11.5px}
  .log-home .na-card:not(.feat) .na-buy{flex-direction:row;justify-content:space-between;align-items:center}
  .log-home .na-card:not(.feat) .na-price{font-size:15px}
  .log-home .na-card:not(.feat) .add.add-ic{width:34px;height:34px;min-height:34px}
  .log-home .na-cta{height:280px!important;padding:16px}
  .log-home .na-cta-txt strong{font-size:17px}
  .log-home .na-cta-go{width:46px;height:46px}
  .log-home .na-grid>.feat{height:auto!important}
  .log-home .na-card.feat .na-stage{flex:none;height:170px;min-height:0}
  .log-home .na-card.feat .na-pack{scale:.62}
}

/* ── Theme integration: tint/deep/ring palette per card position (reference sets these inline per demo card) ── */
.log-home .na-card.feat{--tint:rgba(242,163,58,.38);--deep:#2A1A0C;--ringc:rgba(242,196,109,.9)}
.log-home .na-card:nth-child(2){--tint:rgba(236,170,200,.34);--deep:#26121D;--ringc:rgba(255,182,214,.9)}
.log-home .na-card:nth-child(3){--tint:rgba(160,120,230,.36);--deep:#1B1230;--ringc:rgba(190,160,255,.9)}
.log-home .na-card:nth-child(4){--tint:rgba(60,200,232,.34);--deep:#0A2230;--ringc:rgba(120,220,255,.9)}