/*
 * Apple Pro visual theme.
 * Keep layout and component behavior in style.css; this file only owns color,
 * material, elevation and the homepage product presentation.
 */
:root {
    --primary-color: #0071e3;
    --primary-dark: #005bb8;
    --accent-color: #ff9f0a;
    --ink: #1d1d1f;
    --ink-soft: #515154;
    --text-secondary: #6e6e73;
    --surface: rgba(255,255,255,.88);
    --surface-soft: #f5f5f7;
    --border-color: rgba(29,29,31,.1);
    --border-strong: rgba(29,29,31,.16);
    --shadow-sm: 0 12px 32px rgba(0,0,0,.055);
    --shadow-md: 0 24px 70px rgba(0,0,0,.09);
}

body {
    color: var(--ink);
    background: #f5f5f7;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif;
}

body::before {
    background:
        radial-gradient(circle at 10% 1%, rgba(255,255,255,.98), transparent 22%),
        radial-gradient(circle at 82% 7%, rgba(30,111,255,.13), transparent 24%),
        radial-gradient(circle at 93% 38%, rgba(255,155,43,.09), transparent 18%),
        linear-gradient(180deg, #f8f9fc 0%, #eef1f6 58%, #f5f5f7 100%);
}

.site-header {
    border-bottom-color: rgba(29,29,31,.08);
    background: rgba(247,248,251,.7);
    box-shadow: 0 12px 34px rgba(27,39,61,.055);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
}

.brand-copy strong { letter-spacing: -.01em; }
.brand-copy small { color: #818187; }
.brand-mark {
    border: 1px solid rgba(29,29,31,.1);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.95);
}
.brand-mark img { object-fit: cover; }
.primary-nav a { color: #3a3a3c; font-weight: 640; }
.primary-nav a.active, .primary-nav a:hover { color: #0066cc; }
.primary-nav a::after { height: 2px; border-radius: 2px; background: #0071e3; }

.site-search,
.mobile-menu-toggle,
.mobile-search-toggle {
    border-color: rgba(29,29,31,.09);
    background: rgba(255,255,255,.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.btn-primary {
    background: linear-gradient(180deg, #1687f8, #0071e3);
    box-shadow: 0 10px 26px rgba(0,113,227,.22);
}
.btn-primary:hover { background: linear-gradient(180deg, #087bef, #0066cc); }
.btn-secondary { border-color: rgba(29,29,31,.12); background: rgba(255,255,255,.78); }
.eyebrow { color: #86868b; letter-spacing: .11em; }

/* Homepage product stage. */
.content-home { padding-top: 24px; }
.home-focus {
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 30px;
    background: #06080d;
    box-shadow: 0 34px 90px rgba(5,15,35,.24), 0 14px 34px rgba(18,98,255,.13);
}

.tool-update-row {
    position: relative;
    z-index: 2;
    margin: -18px 24px 0;
    border-color: rgba(255,255,255,.86);
    border-radius: 16px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 18px 46px rgba(32,47,71,.12), inset 0 1px 0 #fff;
    backdrop-filter: saturate(170%) blur(24px);
}
.tool-update-row > strong { color: #3a3a3c; }
.tool-update-row > strong span { background: #0a84ff; box-shadow: 0 0 0 5px rgba(10,132,255,.11); }
.tool-update-track > a { color: #515154; }
.tool-update-row time { color: #8e8e93; }

.content-browser {
    margin-top: 24px;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 30px;
    background: rgba(255,255,255,.46);
    box-shadow: 0 22px 65px rgba(34,49,73,.075), inset 0 1px 0 rgba(255,255,255,.98);
    backdrop-filter: blur(26px);
}
.content-browser__heading { margin-bottom: 22px; }
.content-browser__heading h1 { color: #1d1d1f; font-size: 1.95rem; font-weight: 760; letter-spacing: -.045em; }
.content-filters {
    padding: 4px;
    border: 1px solid rgba(29,29,31,.075);
    border-radius: 13px;
    background: rgba(239,240,244,.82);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.content-filters button { border-radius: 9px; color: #636366; }
.content-filters button:hover { color: #0066cc; background: rgba(0,113,227,.07); }
.content-filters button.active { color: #fff; background: linear-gradient(180deg, #3a3a3c, #1d1d1f); box-shadow: 0 7px 18px rgba(0,0,0,.18); }

.content-list-grid { gap: 15px; }
.content-list-card {
    min-height: 142px;
    padding: 18px 20px 16px;
    border-color: rgba(255,255,255,.9);
    border-radius: 20px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 14px 34px rgba(28,42,65,.07), inset 0 1px 0 #fff;
    backdrop-filter: blur(16px);
}
.content-list-card[data-content-filter="arctable"] { background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(231,241,255,.92)); }
.content-list-card[data-content-filter="post"] { background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,239,255,.86)); }
.content-list-card[data-content-filter="resource"] { background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,245,233,.88)); }
.content-list-card:hover { border-color: rgba(0,113,227,.18); box-shadow: 0 24px 55px rgba(21,39,69,.13); transform: translateY(-3px); }
.content-list-card h2 { color: #1d1d1f; font-size: 1.08rem; font-weight: 720; letter-spacing: -.025em; }
.content-list-card > p { color: #6e6e73; }
.content-list-card__top time, .content-list-card__bottom { color: #8e8e93; }
.content-type { color: #5e5ce6; border-radius: 999px; background: rgba(94,92,230,.1); }
.content-type--resource { color: #c45d00; background: rgba(255,159,10,.13); }
.content-list-card__arrow { color: #0071e3; border-radius: 50%; background: rgba(0,113,227,.09); box-shadow: inset 0 0 0 1px rgba(0,113,227,.07); }

/* Shared inner-page materials. */
.practice-intro,
.resource-intro,
.resource-detail-top {
    border-color: rgba(255,255,255,.78);
    background:
        radial-gradient(circle at 88% 12%, rgba(0,113,227,.09), transparent 30%),
        radial-gradient(circle at 8% 88%, rgba(255,159,10,.065), transparent 24%),
        rgba(255,255,255,.58);
    box-shadow: 0 24px 70px rgba(34,49,73,.07), inset 0 1px 0 rgba(255,255,255,.98);
    backdrop-filter: blur(22px);
}

.practice-guide__box,
.resource-intro__guide-box,
.download-panel,
.sidebar-info-card,
.resource-card,
.post-card,
.glass-card,
.blog-card,
.about-value-card,
.about-story,
.about-contact-cta,
.contact-channel-card,
.legal-document,
.empty-state {
    border-color: rgba(29,29,31,.085);
    background: rgba(255,255,255,.84);
    box-shadow: 0 14px 38px rgba(28,42,65,.055), inset 0 1px 0 rgba(255,255,255,.96);
    backdrop-filter: blur(18px);
}

.blog-card:hover,
.resource-card:hover,
.about-value-card:hover,
.about-contact-cta:hover { border-color: rgba(0,113,227,.2); box-shadow: 0 24px 55px rgba(21,39,69,.11); }

.resource-toolbar { border-color: rgba(255,255,255,.82); background: rgba(255,255,255,.64); box-shadow: 0 12px 34px rgba(28,42,65,.05); backdrop-filter: blur(18px); }
.filter-chip { border-radius: 10px; }
.filter-chip:hover, .filter-chip.active { background: linear-gradient(180deg, #3a3a3c, #1d1d1f); }
.article-summary-card { border-color: rgba(0,113,227,.16); background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(231,241,255,.78)); }
.article-toc a:hover { background: rgba(0,113,227,.08); }
.legal-notice-inline { border-color: rgba(255,159,10,.18); background: rgba(255,250,242,.78); }

.site-footer { background: #1d1d1f; }
.footer-bottom { color: #86868b; }
.footer-legal a { color: #a1a1a6; }

@media (max-width: 680px) {
    .content-home { padding-top: 15px; }
    .home-focus { border-radius: 22px; box-shadow: 0 24px 56px rgba(5,15,35,.22), 0 10px 28px rgba(18,98,255,.12); }
    .tool-update-row { margin: -11px 10px 0; border-radius: 14px; }
    .content-browser { margin: 20px -4px 0; padding: 20px 12px 16px; border-radius: 24px; }
    .content-browser__heading { padding: 0 3px; }
    .content-browser__heading h1 { font-size: 1.58rem; }
    .content-filters { width: max-content; padding: 3px; }
    .content-list-grid { gap: 10px; }
    .content-list-card { min-height: 120px; padding: 15px 16px 13px; border-radius: 17px; }
}