/* ═══ ABOUT LANGA v6 — Apple-level upgrade ═══ */

/* ═══ PRODUCT HEADER (like Mac Studio page) ═══ */
.prod-header{position:sticky;top:48px;z-index:89;height:52px;display:flex;align-items:center;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);transition:background .4s,border-color .4s}
.dk .prod-header{background:rgba(0,0,0,.82);border-bottom:1px solid rgba(255,255,255,.18)}
.lt .prod-header{background:rgba(251,251,253,.88);border-bottom:.5px solid rgba(0,0,0,.14)}
.prod-header-w{max-width:980px;margin:0 auto;padding:0 22px;width:100%;display:flex;align-items:center;justify-content:space-between}
.prod-name{font-size:21px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.prod-tabs{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.prod-tabs::-webkit-scrollbar{display:none}
.prod-tab{font-size:12px;padding:0 14px;height:52px;display:flex;align-items:center;white-space:nowrap;position:relative;transition:color .2s,opacity .2s;opacity:.55}
.prod-tab:hover{opacity:1}
.prod-tab.is-on{opacity:1;font-weight:600}
.prod-tab.is-on::after{content:"";position:absolute;bottom:0;left:14px;right:14px;height:2px;background:#f37f0d;border-radius:1px}
.prod-cta{font-size:12px;padding:6px 16px;border-radius:980px;background:#f37f0d;color:#fff;font-weight:500;white-space:nowrap;transition:opacity .3s;margin-left:12px;text-decoration:none}
.prod-cta:hover{opacity:.85}

/* ═══ LIQUID BACKGROUND ENHANCED ═══ */
.liquid-bg{position:relative;overflow:hidden}
.liquid-bg::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,var(--lq-c1,rgba(243,127,13,.06)) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,var(--lq-c2,rgba(59,130,246,.04)) 0%,transparent 50%);pointer-events:none;animation:liquidPulse 12s ease-in-out infinite alternate}
@keyframes liquidPulse{0%{opacity:.6;transform:scale(1)}100%{opacity:1;transform:scale(1.05)}}

/* ═══ ICON GRID (like Apple Store categories) ═══ */
.icon-grid{display:flex;justify-content:center;gap:clamp(20px,4vw,48px);padding:clamp(20px,3vw,36px) 22px;flex-wrap:wrap}
.icon-item{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:inherit;transition:transform .3s,opacity .3s;min-width:60px}
.icon-item:hover{transform:translateY(-4px)}
.icon-item svg{width:28px;height:28px;transition:color .3s}
.icon-item span{font-size:11px;font-weight:500;letter-spacing:.01em;text-align:center;white-space:nowrap}
.dk .icon-item{color:rgba(255,255,255,.65)}.lt .icon-item{color:#6e6e73}
.dk .icon-item:hover{color:#f5f5f7}.lt .icon-item:hover{color:#1d1d1f}
.icon-dot{width:44px;height:44px;border-radius:22px;display:flex;align-items:center;justify-content:center;transition:background .3s}
.dk .icon-dot{background:rgba(255,255,255,.18)}.lt .icon-dot{background:rgba(0,0,0,.03)}
.dk .icon-item:hover .icon-dot{background:rgba(255,255,255,.18)}.lt .icon-item:hover .icon-dot{background:rgba(0,0,0,.05)}

/* ═══ PHOTO WITH CAPTION (Apple-style) ═══ */
.fig{position:relative;overflow:hidden;border-radius:24px}
.fig-img{width:100%;display:block;object-fit:cover}
.fig-cap{position:absolute;bottom:16px;right:20px;font-size:11px;font-weight:500;letter-spacing:.02em;line-height:1.4;text-align:right;max-width:280px}
.fig-cap--left{right:auto;left:20px;text-align:left}
.dk .fig-cap{color:rgba(255,255,255,.6)}.lt .fig-cap{color:rgba(255,255,255,.65)}

/* ═══ FEATURE ROW (Apple 2-col with icon) ═══ */
.feat-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(60px,8vw,120px) 0}
.feat-row--r{direction:rtl}.feat-row--r>*{direction:ltr}
.feat-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.dk .feat-icon{background:rgba(255,255,255,.18)}.lt .feat-icon{background:rgba(0,0,0,.03)}
.feat-ey{font-size:14px;color:#f37f0d;margin-bottom:6px;font-weight:500}
.feat-h{font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin-bottom:12px}
.feat-p{font-size:17px;line-height:1.5}
.dk .feat-p{color:rgba(255,255,255,.65)}.lt .feat-p{color:#3a3a3d}
.feat-vis{border-radius:24px;overflow:hidden;min-height:300px;display:flex;align-items:center;justify-content:center}
.dk .feat-vis{background:rgba(255,255,255,.07)}.lt .feat-vis{background:#f5f5f7}

/* ═══ SPEC PILLS (like Apple tech specs highlights) ═══ */
.spec-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.spec-pill{font-size:13px;padding:8px 16px;border-radius:980px;display:inline-flex;align-items:center;gap:6px;transition:background .3s}
.dk .spec-pill{background:rgba(255,255,255,.18);color:rgba(255,255,255,.65)}
.lt .spec-pill{background:rgba(0,0,0,.03);color:#6e6e73}
.spec-pill svg{width:16px;height:16px;flex-shrink:0}

/* ═══ NUMBER HIGHLIGHT (large stat inline) ═══ */
.num{font-size:clamp(56px,10vw,88px);font-weight:700;letter-spacing:-.055em;line-height:1;display:block}
.dk .num{background:linear-gradient(180deg,#fff 25%,rgba(255,255,255,.60) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.num-label{font-size:14px;margin-top:6px;display:block}
.dk .num-label{color:rgba(255,255,255,.60)}.lt .num-label{color:#3a3a3d}
.num-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:clamp(16px,2vw,32px);text-align:center;padding:clamp(32px,4vw,48px) 0}

/* ═══ GRADIENT SECTION BANDS ═══ */
.band--net{padding:clamp(120px,16vw,200px) 22px;text-align:center;position:relative;overflow:hidden}
.band--net::before{content:"";position:absolute;inset:0;opacity:.08;background:radial-gradient(ellipse at 50% 0%,var(--net-c,#f37f0d) 0%,transparent 60%);pointer-events:none}
.band--net .bh{position:relative;z-index:1}
.band--net .bsub{position:relative;z-index:1}

/* ═══ CARD VARIANTS — FEATURE CARD ═══ */
.c--feat{padding:clamp(32px,4vw,48px);justify-content:flex-start}
.c--feat .c-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.dk .c--feat .c-icon{background:rgba(255,255,255,.18)}.lt .c--feat .c-icon{background:rgba(0,0,0,.03)}

/* ═══ MOBILE IMPROVEMENTS ═══ */
@media(max-width:834px){
  .prod-header-w{gap:8px}
  .prod-name{font-size:17px}
  .prod-tab{padding:0 10px;font-size:11px}
  .prod-cta{font-size:11px;padding:5px 12px}
  .feat-row{grid-template-columns:1fr;gap:32px}
  .feat-row--r{direction:ltr}
  .feat-vis{min-height:220px}
  .icon-grid{gap:16px}
  .icon-item span{font-size:10px}
  .num{font-size:clamp(44px,8vw,64px)}
}

@media(max-width:480px){
  .prod-tabs{gap:0}
  .prod-tab{padding:0 8px}
  .icon-grid{gap:12px}
  .icon-dot{width:36px;height:36px;border-radius:18px}
  .icon-dot svg{width:20px;height:20px}
}