/* ============================================================
   FREEDOM 瑞度 - 页面通用板块样式
   Page sections used across multiple pages
   ============================================================ */

/* ============================================================
   HERO - 首页 / 内页首屏
   ============================================================ */
.hero{
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    background: var(--color-paper);
    overflow: hidden;
    padding-top: 80px;
}
.hero__bg{
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero__bg::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 80% at 80% 30%, rgba(200,31,44,.10) 0%, transparent 70%),
        radial-gradient(50% 70% at 20% 80%, rgba(200,31,44,.06) 0%, transparent 70%);
}
.hero__bg::after{
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(14,14,14,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,14,14,0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.hero__inner{
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
    align-items: center;
}
@media (max-width: 960px){
    .hero__inner{ grid-template-columns: 1fr; gap: 40px; }
    .hero{ min-height: auto; padding: 120px 0 64px; }
}

.hero__title{ margin: 16px 0 24px; }
.hero__title .serif{
    font-family: var(--font-serif-en);
    font-style: italic;
    font-weight: 400;
    display: block;
    color: var(--color-brand-red);
}
.hero__title .lead-line{
    display: block;
    font-weight: 700;
    line-height: 1.05;
    margin-top: 4px;
}

.hero__desc{
    font-size: var(--fs-body-lg);
    color: var(--color-gray-700);
    max-width: 560px;
    line-height: 1.7;
    margin-bottom: 32px;
}

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

.hero__visual{
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(135deg, #0E0E0E, #000);
    box-shadow: 0 32px 80px rgba(0,0,0,.18);
}
.hero__visual .window{
    position: absolute;
    inset: 12%;
    border: 6px solid var(--color-brand-red);
    border-radius: 36px;
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero__visual .label{
    position: absolute;
    bottom: 16px; left: 16px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.92);
    border-radius: var(--radius-pill);
    font-size: var(--fs-micro);
    color: var(--color-ink);
    font-weight: 600;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
}
.hero__visual .badge{
    position: absolute;
    top: 16px; right: 16px;
    background: rgba(200,31,44,.92);
    color: var(--color-white);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-micro);
    font-weight: 600;
    z-index: 3;
}

/* ---- FR 粒子动画容器（朱窗内） ---- */
.hero__visual .window{
    z-index: 1;
}
.fr-canvas{
    position: absolute;
    inset: calc(12% + 8px);
    border-radius: 30px;
    overflow: hidden;
    z-index: 2;
    cursor: crosshair;
    background: radial-gradient(90% 90% at 50% 45%, rgba(200,31,44,0.14) 0%, transparent 70%);
    box-shadow: inset 0 0 60px rgba(0,0,0,0.5);
}
.fr-canvas canvas{ display:block; position:relative; z-index:2; }
.fr-canvas__hint{
    position: absolute;
    bottom: 14px; left: 20px;
    font-family: var(--font-sans-en);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-widest);
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    pointer-events: none;
    z-index: 3;
}

.hero__stats{
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--color-gray-200);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.hero__stat .num{
    font-family: var(--font-sans-en);
    font-size: clamp(1.5rem, 2vw + 1rem, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 4px;
}
.hero__stat .lab{ font-size: var(--fs-caption); color: var(--color-gray-500); line-height: 1.4; }
@media (max-width: 768px){
    .hero__stats{ grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* Scroll cue */
.scroll-cue{
    position: absolute;
    bottom: 32px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--color-gray-500);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.scroll-cue::after{
    content: "";
    width: 1px; height: 40px;
    background: linear-gradient(to bottom, var(--color-gray-500), transparent);
    animation: pulseDot 2s ease-in-out infinite;
}

/* ============================================================
   SERVICE CARDS / 服务卡片
   ============================================================ */
.service-card{
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    transition: all var(--dur-base) var(--ease-out);
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.service-card::before{
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 3px;
    background: var(--color-brand-red);
    transition: width var(--dur-base) var(--ease-out);
}
.service-card:hover{
    border-color: var(--color-brand-red);
    transform: translateY(-6px);
    box-shadow: var(--shadow-3);
}
.service-card:hover::before{ width: 100%; }

.service-card__num{
    font-family: var(--font-serif-en);
    font-style: italic;
    font-size: 3rem;
    color: var(--color-brand-red);
    line-height: 1;
}
.service-card__icon{
    width: 56px; height: 56px;
    border-radius: var(--radius-sm);
    background: var(--color-brand-red-l);
    color: var(--color-brand-red);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
}
.service-card__icon svg{ width: 28px; height: 28px; }

.service-card h3{ margin: 0; font-size: var(--fs-h4); font-weight: 600; }
.service-card p{ color: var(--color-gray-700); margin: 0; line-height: 1.7; }
.service-card__list{ margin: 0; padding: 0; list-style: none; }
.service-card__list li{
    padding: 6px 0;
    font-size: var(--fs-caption);
    color: var(--color-gray-700);
    border-bottom: 1px dashed var(--color-gray-200);
}
.service-card__list li:last-child{ border-bottom: none; }
.service-card__list li::before{
    content: "—";
    color: var(--color-brand-red);
    margin-right: 8px;
}

.service-card__link{
    color: var(--color-brand-red);
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    margin-top: auto;
}
.service-card__link::after{ content: " →"; transition: transform var(--dur-fast); }
.service-card:hover .service-card__link::after{ transform: translateX(4px); display: inline-block; }

/* ============================================================
   STATS / 数字背书
   ============================================================ */
.stats-block{
    background: var(--color-black);
    color: var(--color-white);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.stats-block::before{
    content: "";
    position: absolute;
    top: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(200,31,44,0.18) 0%, transparent 70%);
    border-radius: 50%;
}
.stats-block .grid{ position: relative; }
.stats-block__item{ padding: 16px 8px; }
.stats-block__num{
    font-family: var(--font-sans-en);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
    background: linear-gradient(180deg, #FFFFFF 0%, #AAAAAA 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stats-block__num .unit{ font-size: .5em; color: var(--color-brand-red); -webkit-text-fill-color: var(--color-brand-red); }
.stats-block__lab{ font-size: var(--fs-body-sm); color: rgba(255,255,255,0.7); }

/* ============================================================
   LOGO WALL / 客户墙
   ============================================================ */
.logo-wall{
    padding: 80px 0;
    background: var(--color-gray-50);
}
.logo-wall__grid{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    align-items: center;
}
@media (max-width: 1024px){ .logo-wall__grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px){ .logo-wall__grid{ grid-template-columns: repeat(2, 1fr); } }
.logo-wall__item{
    aspect-ratio: 4/2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans-en);
    font-weight: 700;
    letter-spacing: var(--ls-tight);
    font-size: var(--fs-body);
    color: var(--color-gray-700);
    transition: all var(--dur-fast);
    text-align: center;
    padding: 16px 12px;
    border: 1px solid var(--color-gray-200);
}
.logo-wall__item:hover{
    color: var(--color-brand-red);
    border-color: var(--color-brand-red);
    transform: translateY(-2px);
    box-shadow: var(--shadow-1);
}
.logo-wall__item.serif{ font-family: var(--font-serif-en); font-style: italic; }

/* ============================================================
   PHILOSOPHY / 品牌理念
   ============================================================ */
.philosophy{
    padding: 120px 0;
    background: var(--color-paper);
    text-align: center;
    position: relative;
}
.philosophy .verse{
    max-width: 880px;
    margin: 0 auto;
    font-family: var(--font-serif-en);
    font-style: italic;
    font-size: clamp(2rem, 4vw + 1rem, 4.5rem);
    line-height: 1.15;
    color: var(--color-ink);
    letter-spacing: -0.02em;
}
.philosophy .verse .accent{ color: var(--color-brand-red); }
.philosophy .caption{
    margin-top: 40px;
    color: var(--color-gray-500);
    font-size: var(--fs-body-sm);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
}
.philosophy .quote-mark{
    font-family: var(--font-serif-en);
    font-size: 8rem;
    color: var(--color-brand-red);
    line-height: 0.5;
    margin-bottom: 32px;
    display: block;
    opacity: .3;
}

/* ============================================================
   NEWS / 资讯动态
   ============================================================ */
.news-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
@media (max-width: 768px){ .news-grid{ grid-template-columns: 1fr; } }
.news-card{
    display: flex; flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--dur-base);
    background: var(--color-white);
}
.news-card:hover{ transform: translateY(-4px); }
.news-card__cover{
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--color-brand-red-l), var(--color-brand-red-l2));
    position: relative;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-brand-red);
}
.news-card__cover .glyph{
    font-family: var(--font-serif-en);
    font-size: 4rem;
    font-style: italic;
    opacity: .4;
}
.news-card__cover .date{
    position: absolute;
    top: 16px; left: 16px;
    background: var(--color-white);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans-en);
    font-size: var(--fs-micro);
    font-weight: 600;
    color: var(--color-ink);
    letter-spacing: var(--ls-wide);
}
.news-card__body{ padding: 24px; }
.news-card__meta{
    font-size: var(--fs-micro);
    color: var(--color-brand-red);
    text-transform: uppercase;
    letter-spacing: var(--ls-widest);
    font-weight: 600;
    margin-bottom: 8px;
}
.news-card h4{ margin: 0 0 12px; font-size: var(--fs-h4); line-height: 1.3; }
.news-card p{ color: var(--color-gray-700); font-size: var(--fs-body-sm); line-height: 1.7; margin: 0; }
.news-card__link{
    margin-top: 16px;
    color: var(--color-brand-red);
    font-size: var(--fs-caption);
    font-weight: 600;
}

/* ============================================================
   CTA BAND / 行动召唤区块
   ============================================================ */
.cta-band{
    background: var(--color-brand-red);
    color: var(--color-white);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.cta-band::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(40% 60% at 90% 50%, rgba(255,255,255,0.16) 0%, transparent 70%),
        radial-gradient(30% 50% at 10% 30%, rgba(0,0,0,0.16) 0%, transparent 70%);
}
.cta-band__inner{
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}
.cta-band h2{ margin: 0; font-size: var(--fs-display-2); line-height: 1.05; }
.cta-band p{ margin: 12px 0 0; font-size: var(--fs-body-lg); opacity: .9; }
@media (max-width: 768px){
    .cta-band{ padding: 60px 0; }
}

/* ============================================================
   PROCESS / 流程步骤
   ============================================================ */
.process-steps{
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--color-gray-200);
}
@media (max-width: 960px){ .process-steps{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .process-steps{ grid-template-columns: 1fr; } }
.process-step{
    padding: 40px 24px;
    border-right: 1px solid var(--color-gray-200);
    border-bottom: 1px solid var(--color-gray-200);
    position: relative;
}
.process-step:last-child{ border-right: none; }
@media (max-width: 960px){
    .process-step{ border-right: 1px solid var(--color-gray-200); }
    .process-step:nth-child(2n){ border-right: none; }
}
.process-step::before{
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-serif-en);
    font-style: italic;
    font-size: 4rem;
    color: var(--color-brand-red);
    line-height: 1;
    opacity: .35;
    display: block;
    margin-bottom: 16px;
}
.process-step h4{ margin: 0 0 8px; font-size: var(--fs-h5); font-weight: 600; }
.process-step p{ margin: 0; font-size: var(--fs-caption); color: var(--color-gray-700); line-height: 1.7; }

/* ============================================================
   FAQ / 常见问答
   ============================================================ */
.faq-item{
    border-bottom: 1px solid var(--color-gray-200);
    padding: 28px 0;
}
.faq-item:first-child{ border-top: 1px solid var(--color-gray-200); }
.faq-item summary{
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    font-size: var(--fs-h5);
    font-weight: 600;
    color: var(--color-ink);
    transition: color var(--dur-fast);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary:hover{ color: var(--color-brand-red); }
.faq-item summary::after{
    content: "+";
    flex-shrink: 0;
    width: 32px; height: 32px;
    border: 1px solid var(--color-gray-200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--color-brand-red);
    transition: all var(--dur-fast);
}
.faq-item[open] summary::after{ transform: rotate(45deg); background: var(--color-brand-red); color: var(--color-white); border-color: var(--color-brand-red); }
.faq-item p{
    margin: 16px 0 0;
    color: var(--color-gray-700);
    font-size: var(--fs-body);
    line-height: 1.8;
    max-width: 760px;
}

/* ============================================================
   TIMELINE / 时间轴
   ============================================================ */
.timeline{
    position: relative;
    padding: 40px 0 40px 100px;
}
.timeline::before{
    content: "";
    position: absolute;
    left: 60px; top: 0; bottom: 0;
    width: 2px;
    background: var(--color-gray-200);
}
.timeline-item{
    position: relative;
    padding: 24px 0 32px 56px;
    border-bottom: 1px solid var(--color-gray-100);
}
.timeline-item:last-child{ border-bottom: none; }
.timeline-item::before{
    content: "";
    position: absolute;
    left: -48px;
    top: 32px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--color-white);
    border: 3px solid var(--color-brand-red);
    box-shadow: 0 0 0 4px var(--color-paper);
}
.timeline-item .year{
    font-family: var(--font-sans-en);
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 700;
    color: var(--color-brand-red);
    letter-spacing: var(--ls-tight);
}
.timeline-item h4{ margin: 4px 0 8px; }
.timeline-item p{ margin: 0; color: var(--color-gray-700); max-width: 680px; }

@media (max-width: 600px){
    .timeline{ padding-left: 24px; }
    .timeline::before{ left: 0; }
    .timeline-item{ padding-left: 24px; }
    .timeline-item::before{ left: -8px; }
}

/* ============================================================
   AWARDS / 奖项网格
   ============================================================ */
.awards-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 1024px){ .awards-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px){ .awards-grid{ grid-template-columns: repeat(2, 1fr); } }
.award-card{
    padding: 32px 24px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    text-align: center;
    transition: all var(--dur-base);
}
.award-card:hover{
    transform: translateY(-4px);
    border-color: var(--color-brand-red);
    box-shadow: var(--shadow-2);
}
.award-card .medal{
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f9d77e, #b8881e);
    display: flex;
    align-items: center; justify-content: center;
    color: var(--color-white);
    font-size: 28px;
}
.award-card .medal--gold{ background: linear-gradient(135deg, #f9d77e, #b8881e); }
.award-card .medal--silver{ background: linear-gradient(135deg, #e0e0e0, #757575); }
.award-card .medal--bronze{ background: linear-gradient(135deg, #d4986b, #8b5a2b); }
.award-card h4{ margin: 0 0 8px; font-size: var(--fs-body); font-weight: 600; }
.award-card .year{ font-family: var(--font-sans-en); font-size: var(--fs-caption); color: var(--color-gray-500); }

/* ============================================================
   CONTACT / 联系页布局
   ============================================================ */
.contact-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}
@media (max-width: 960px){ .contact-grid{ grid-template-columns: 1fr; gap: 40px; } }
.contact-info h3{ margin: 0 0 16px; }
.contact-info dl{ margin: 0; }
.contact-info dt{
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--color-brand-red);
    font-weight: 600;
    margin-top: 24px;
}
.contact-info dd{
    margin: 8px 0 0;
    font-size: var(--fs-body-lg);
    color: var(--color-ink);
}
.contact-info a:hover{ color: var(--color-brand-red); }

.map-embed{
    aspect-ratio: 16/10;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-gray-100);
    position: relative;
    margin-top: 32px;
    box-shadow: var(--shadow-2);
    transition: box-shadow var(--dur-base) var(--ease-out);
}
.map-embed:hover{ box-shadow: var(--shadow-3); }

/* 真实地图覆盖层（"在百度地图打开"按钮） */
.map-embed__overlay{
    position: absolute;
    top: 12px; right: 12px;
    z-index: 10;
    pointer-events: none;
}
.map-embed__btn{
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    font-size: var(--fs-caption);
    font-weight: 500;
    box-shadow: var(--shadow-1);
    transition: all var(--dur-fast) var(--ease-out);
}
.map-embed__btn:hover{
    background: var(--color-brand-red);
    color: var(--color-white);
    border-color: var(--color-brand-red);
    transform: translateY(-2px);
    box-shadow: var(--shadow-red);
}
.map-embed iframe{ display: block; }

.map-embed .map-fake{
    width: 100%; height: 100%;
    background:
        linear-gradient(45deg, transparent 49%, rgba(200,31,44,0.06) 49%, rgba(200,31,44,0.06) 51%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, rgba(200,31,44,0.06) 49%, rgba(200,31,44,0.06) 51%, transparent 51%),
        radial-gradient(circle at 50% 50%, rgba(200,31,44,0.1) 0%, transparent 50%),
        var(--color-gray-100);
    background-size: 80px 80px, 80px 80px, 100% 100%, 100% 100%;
}
.map-embed .pin{
    position: absolute;
    width: 48px; height: 48px;
    border-radius: 50% 50% 50% 0;
    background: var(--color-brand-red);
    transform: rotate(-45deg);
    box-shadow: 0 8px 16px rgba(200,31,44,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.map-embed .pin::after{
    content: "R";
    font-family: var(--font-sans-en);
    font-weight: 800;
    color: white;
    transform: rotate(45deg);
    font-size: 20px;
}

/* ============================================================
   BANNER / 子页面图横幅
   ============================================================ */
.banner-section{
    height: 320px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    color: var(--color-white);
}
.banner-section::before{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
}
.banner-section__bg{
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #C81F2C 130%);
}
.banner-section__inner{ position: relative; z-index: 2; padding-bottom: 40px; }
.banner-section h2{ margin: 0; color: var(--color-white); }
.banner-section p{ color: rgba(255,255,255,.85); margin: 12px 0 0; max-width: 720px; }

/* ============================================================
   TABS / 选项卡
   ============================================================ */
.tabs{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--color-gray-200);
    padding-bottom: 8px;
}
.tabs__btn{
    padding: 10px 20px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--fs-caption);
    font-weight: 500;
    color: var(--color-gray-700);
    cursor: pointer;
    transition: all var(--dur-fast);
}
.tabs__btn:hover{ background: var(--color-brand-red-l); color: var(--color-brand-red); }
.tabs__btn.active{ background: var(--color-ink); color: var(--color-white); }

.tab-panel{ display: none; }
.tab-panel.active{ display: block; animation: fadeIn .3s var(--ease-out); }

/* ============================================================
   METHODOLOGY / 方法论图示
   ============================================================ */
.method-diagram{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}
@media (max-width: 768px){ .method-diagram{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .method-diagram{ grid-template-columns: 1fr; } }
.method-item{
    text-align: center;
    padding: 24px 16px;
}
.method-item .ring{
    width: 80px; height: 80px;
    margin: 0 auto 16px;
    border-radius: 50%;
    border: 2px dashed var(--color-brand-red);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-brand-red);
    font-family: var(--font-serif-en);
    font-style: italic;
    font-size: 2.5rem;
    font-weight: 700;
}
.method-item h5{ font-size: var(--fs-h5); margin: 0 0 8px; }
.method-item p{ font-size: var(--fs-caption); color: var(--color-gray-700); margin: 0; line-height: 1.7; }

/* ============================================================
   TRUST BAR / 信任列表
   ============================================================ */
.trust-bar{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 24px;
    background: var(--color-gray-50);
    border-radius: var(--radius);
}
.trust-bar__item{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-caption);
    color: var(--color-gray-700);
}
.trust-bar__item .dot{
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-brand-red);
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-top{
    position: fixed;
    bottom: 100px; right: 24px;
    width: 44px; height: 44px;
    background: var(--color-ink);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center; justify-content: center;
    border: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all var(--dur-base);
    z-index: var(--z-sticky);
}
.back-top.show{ opacity: 1; pointer-events: auto; }
.back-top:hover{ background: var(--color-brand-red); }

/* ============================================================
   BrandInkwell · 域名品牌释义（关于我们）
   —— 双词辨析设计：Brand 用瑞度红（火印），Inkwell 用商务墨黑（墨池）
   ============================================================ */
.bi-lockup{
    position: relative;
    margin-top: 8px;
    padding: 52px 28px 42px;
    text-align: center;
    background:
        radial-gradient(120% 100% at 50% 0%, var(--color-brand-red-l2) 0%, transparent 62%),
        linear-gradient(180deg, var(--color-white), var(--color-paper));
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.bi-lockup__word{
    font-family: var(--font-sans-en);
    font-weight: 800;
    font-size: clamp(1.5rem, 6.6vw, 4.5rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    user-select: all;
    white-space: nowrap;
}
.bi-lockup__brand{ color: var(--color-brand-red); }
.bi-lockup__ink{ color: var(--color-ink); }
.bi-lockup__tld{
    color: var(--color-gray-400);
    font-weight: 500;
    font-size: 0.42em;
    letter-spacing: 0;
    vertical-align: baseline;
}
/* 双词之间的"分界提示"——一条极细的竖线，暗示此处断句 */
.bi-lockup__seam{
    display: inline-block;
    width: 1px; height: 0.72em;
    background: var(--color-gray-300);
    margin: 0 0.06em 0 0.1em;
    vertical-align: -0.04em;
}
.bi-lockup__legend{
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
    margin-top: 26px;
}
.bi-tag{
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    font-size: var(--fs-caption);
    letter-spacing: 0.02em;
    color: var(--color-gray-700);
}
.bi-tag i{
    width: 9px; height: 9px; border-radius: 50%; flex: none;
}
.bi-tag--fire i{ background: var(--color-brand-red); }
.bi-tag--ink i{ background: var(--color-ink); }
.bi-tag b{ color: var(--color-ink); font-weight: 700; }
.bi-lockup__read{
    margin: 22px 0 0;
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    color: var(--color-gray-500);
    letter-spacing: 0.04em;
}

/* 词源双栏 */
.bi-etym{
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    padding: 30px 30px 32px;
    position: relative;
    display: flex;
    flex-direction: column;
}
.bi-etym__head{
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.bi-etym__word{
    font-family: var(--font-sans-en);
    font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; margin: 0;
}
.bi-etym--brand .bi-etym__word{ color: var(--color-brand-red); }
.bi-etym--ink .bi-etym__word{ color: var(--color-ink); }
.bi-etym__ipa{
    font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--color-gray-400);
}
.bi-etym__cn{
    display: inline-block; margin-top: 12px;
    font-size: var(--fs-caption); letter-spacing: var(--ls-wider);
    color: var(--color-gray-500); text-transform: none;
}
.bi-etym p{ margin: 12px 0 20px; line-height: 1.9; color: var(--color-gray-700); }
.bi-etym__keys{
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: auto;
    padding-top: 18px; border-top: 1px dashed var(--color-gray-200);
}
.bi-etym__keys span{
    font-size: var(--fs-caption);
    padding: 5px 13px; border-radius: var(--radius-pill);
    background: var(--color-gray-50); color: var(--color-gray-700);
}
.bi-etym--brand .bi-etym__keys span{ background: var(--color-brand-red-l); color: var(--color-brand-red-d); }

/* 双词对位表 */
.bi-pairs{
    margin-top: 20px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-white);
}
.bi-pairs__row{
    display: grid;
    grid-template-columns: 1.1fr 1.6fr 1.6fr;
    border-bottom: 1px solid var(--color-gray-200);
}
.bi-pairs__row:last-child{ border-bottom: none; }
.bi-pairs__row > div{ padding: 16px 20px; font-size: var(--fs-body-sm); line-height: 1.7; }
.bi-pairs__row > div + div{ border-left: 1px solid var(--color-gray-200); }
.bi-pairs__k{
    color: var(--color-gray-500); letter-spacing: 0.06em;
    background: var(--color-gray-50); font-weight: 600;
}
.bi-pairs__b{ color: var(--color-brand-red-d); }
.bi-pairs__i{ color: var(--color-ink); }
.bi-pairs__head > div{
    font-family: var(--font-sans-en); font-weight: 800; letter-spacing: 0.02em;
    font-size: var(--fs-body-sm);
}
.bi-pairs__head .bi-pairs__b{ color: var(--color-white); background: var(--color-brand-red); }
.bi-pairs__head .bi-pairs__i{ color: var(--color-white); background: var(--color-ink); }
.bi-pairs__head .bi-pairs__k{ background: var(--color-gray-100); color: var(--color-gray-500); }

/* 记忆锚点 */
.bi-anchor{
    margin-top: 40px;
    padding: 34px 32px;
    border-radius: var(--radius-lg);
    background: var(--color-ink);
    color: var(--color-white);
    text-align: center;
}
.bi-anchor__line{
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 700; letter-spacing: 0.04em; margin: 0;
}
.bi-anchor__line em{ color: var(--color-brand-red-2); font-style: normal; }
.bi-anchor__sub{
    margin: 14px 0 0; font-family: var(--font-serif-en); font-style: italic;
    color: rgba(255,255,255,0.72); font-size: 1.05rem;
}
.bi-anchor__grid{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    margin-top: 30px; background: rgba(255,255,255,0.14);
    border-radius: var(--radius); overflow: hidden;
}
.bi-anchor__grid > div{
    background: var(--color-ink); padding: 22px 16px;
}
.bi-anchor__grid b{
    display: block; font-family: var(--font-sans-en);
    font-size: 1.5rem; font-weight: 800; margin-bottom: 8px;
}
.bi-anchor__grid span{ font-size: var(--fs-caption); color: rgba(255,255,255,0.66); line-height: 1.6; display: block; }

@media (max-width: 820px){
    .bi-pairs__row{ grid-template-columns: 1fr 1fr; }
    .bi-pairs__row .bi-pairs__k{ grid-column: 1 / -1; }
    .bi-pairs__row > div + div{ border-left: none; }
    .bi-pairs__row > div{ border-top: 1px solid var(--color-gray-200); }
    .bi-pairs__row .bi-pairs__k{ border-top: none; }
    /* 小屏下表头只留 Brand / Inkwell 两栏，维度名已在每行标注 */
    .bi-pairs__head .bi-pairs__k{ display: none; }
    .bi-anchor__grid{ grid-template-columns: 1fr; }
}