/* ==== VKT Web Apps (annmax1983.com/apps) ==== */

/* Hero */
.apps-hero{ text-align:center; padding-top:calc(var(--nav-h) + 64px); padding-bottom:16px; }
.apps-hero h1{ font-size:2.7rem; font-weight:800; letter-spacing:-0.025em; line-height:1.15; margin-bottom:18px; }
.apps-hero-desc{ color:var(--text-2); font-size:1.08rem; line-height:1.8; max-width:760px; margin:0 auto 28px; }
.apps-hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.apps-hero-note{ color:var(--text-3); font-size:0.9rem; margin-top:22px; }

/* Grids */
.apps-grid{ display:grid; gap:24px; }
.apps-grid-2{ grid-template-columns:repeat(2,1fr); }
.apps-grid-3{ grid-template-columns:repeat(3,1fr); }
.apps-grid-4{ grid-template-columns:repeat(4,1fr); }

/* App card (never a nested <a>: the card is a div, links live inside) */
.app-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--bg-card); backdrop-filter:blur(16px);
  border:var(--glass-border); border-radius:var(--radius);
  padding:24px; overflow:hidden;
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.app-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--app-accent, var(--accent)); opacity:.85;
}
.app-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--app-accent, var(--accent)); }
.app-card-illus{
  height:128px; border-radius:14px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  color:var(--app-accent, var(--accent));
  background:var(--app-tint, rgba(99,102,241,.09));
  border:1px solid var(--app-line, rgba(99,102,241,.18));
}
.app-card-illus svg{ width:112px; height:112px; display:block; }
.app-tag{
  align-self:flex-start; display:inline-block;
  padding:3px 10px; border-radius:20px;
  font-size:0.72rem; font-weight:600;
  background:var(--app-tint, rgba(99,102,241,.09));
  color:var(--app-accent, var(--accent));
  margin-bottom:10px;
}
.app-card h3{ font-size:1.15rem; font-weight:700; margin-bottom:8px; }
.app-card-desc{ font-size:0.88rem; color:var(--text-2); line-height:1.68; margin-bottom:18px; flex:1 1 auto; }
.app-card-links{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.app-card-links a{ font-size:0.85rem; font-weight:600; text-decoration:none; color:var(--app-accent, var(--accent)); }
.app-card-links a:hover{ text-decoration:underline; }
.app-card-links a.is-muted{ color:var(--text-3); cursor:default; }

.app-soon{
  display:inline-block; margin-left:8px; vertical-align:middle;
  padding:3px 9px; border-radius:20px;
  font-size:0.66rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  background:rgba(245,158,11,0.14); color:var(--amber);
}

/* Back link */
.apps-back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.85rem; font-weight:600; color:var(--text-2);
  text-decoration:none; margin-bottom:22px; transition:color .2s;
}
.apps-back:hover{ color:var(--accent); }

/* Detail page */
.app-detail{ padding-top:calc(var(--nav-h) + 40px); }
.app-detail-hero{
  display:flex; gap:36px; align-items:center; flex-wrap:wrap;
  padding-bottom:8px;
}
.app-detail-illus{
  flex:0 0 176px; width:176px; height:176px; border-radius:22px;
  display:flex; align-items:center; justify-content:center;
  color:var(--app-accent, var(--accent));
  background:var(--app-tint, rgba(99,102,241,.09));
  border:1px solid var(--app-line, rgba(99,102,241,.18));
}
.app-detail-illus svg{ width:132px; height:132px; display:block; }
.app-detail-info{ flex:1 1 320px; min-width:280px; }
.app-detail-info h1{ font-size:2.2rem; font-weight:800; letter-spacing:-0.025em; margin:10px 0 12px; }
.app-detail-intro{ font-size:1.02rem; color:var(--text-2); line-height:1.8; margin-bottom:22px; max-width:620px; }
.app-detail-actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* Numbered / bulleted content blocks inside detail pages */
.app-block{ max-width:760px; }
.app-block h2{ font-size:1.3rem; font-weight:700; margin:34px 0 14px; }
.app-block h2:first-child{ margin-top:0; }
.app-block p{ color:var(--text-2); line-height:1.8; margin-bottom:14px; }
.app-block ol, .app-block ul{ margin:14px 0; padding-left:24px; color:var(--text-2); }
.app-block li{ margin-bottom:8px; line-height:1.7; }
.app-block strong{ color:var(--text); }
.app-block a{ color:var(--accent); text-decoration:none; }
.app-block a:hover{ text-decoration:underline; }

/* "What they all have in common" */
.why-item{
  background:var(--bg-card); backdrop-filter:blur(16px);
  border:var(--glass-border); border-radius:var(--radius); padding:24px;
}
.why-ico{ font-size:1.5rem; margin-bottom:10px; line-height:1; }
.why-item h3{ font-size:1rem; font-weight:700; margin-bottom:6px; }
.why-item p{ font-size:0.86rem; color:var(--text-2); line-height:1.68; }

/* Install / CTA panel */
.apps-panel{
  text-align:center; padding:44px 32px; border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(99,102,241,0.07), rgba(139,92,246,0.07));
  border:1px solid rgba(99,102,241,0.16);
}
.apps-panel h2{ font-size:1.5rem; font-weight:800; margin-bottom:12px; }
.apps-panel p{ color:var(--text-2); font-size:1rem; line-height:1.75; max-width:640px; margin:0 auto 22px; }

/* Mini cards used for "other apps in the series" */
.app-mini{
  display:flex; flex-direction:column;
  background:var(--bg-card); backdrop-filter:blur(16px);
  border:var(--glass-border); border-radius:var(--radius-sm);
  padding:18px; text-decoration:none; color:inherit;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.app-mini:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--app-accent, var(--accent)); }
.app-mini-illus{
  height:64px; margin-bottom:12px; display:flex; align-items:center;
  color:var(--app-accent, var(--accent));
}
.app-mini-illus svg{ width:52px; height:52px; display:block; }
.app-mini-name{ font-size:0.92rem; font-weight:700; margin-bottom:4px; }
.app-mini-tag{ font-size:0.72rem; font-weight:600; color:var(--app-accent, var(--accent)); }

/* Responsive */
@media (max-width:980px){
  .apps-grid-4{ grid-template-columns:repeat(2,1fr); }
  .apps-grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .apps-hero{ padding-top:calc(var(--nav-h) + 40px); }
  .apps-hero h1{ font-size:1.95rem; }
  .apps-grid-2, .apps-grid-3, .apps-grid-4{ grid-template-columns:1fr; }
  .app-detail-illus{ flex-basis:130px; width:130px; height:130px; border-radius:18px; }
  .app-detail-illus svg{ width:96px; height:96px; }
  .app-detail-info h1{ font-size:1.65rem; }
  .apps-panel{ padding:32px 20px; }
}