/* ============================================================
   FREEDOM 瑞度 官网设计系统 / Design Tokens
   基于规划书 V2.0 (2026.08)
   ============================================================ */

/* ---------- CSS 变量 / Design Tokens ---------- */
:root{
    /* 主色调 */
    --color-brand-red:    #C81F2C;      /* 瑞度红 主色 */
    --color-brand-red-2:  #E63B47;      /* hover态 */
    --color-brand-red-d:  #9A1820;      /* 按下态 */
    --color-brand-red-l:  #F5E6E7;      /* 浅红背景 */
    --color-brand-red-l2: #FBF2F2;      /* 更浅的浅红 */

    /* 中性色 */
    --color-black:        #0E0E0E;      /* 深空黑 */
    --color-ink:          #1A1A1A;      /* 商务黑 文字 */
    --color-graphite:     #2A2A2A;
    --color-gray-900:     #333333;
    --color-gray-700:     #4B5563;
    --color-gray-500:     #6B7280;      /* 中性灰 */
    --color-gray-400:     #9CA3AF;
    --color-gray-300:     #D1D5DB;
    --color-gray-200:     #E5E7EB;
    --color-gray-100:     #F3F4F6;
    --color-gray-50:      #F8F8F8;
    --color-white:        #FFFFFF;
    --color-paper:        #FBFAF8;      /* 珍珠白，带一点点暖意 */

    /* 语义色 */
    --color-success:      #10B981;
    --color-warning:      #F59E0B;
    --color-info:         #3B82F6;

    /* 字体 */
    --font-sans-cn:       "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans CN", system-ui, sans-serif;
    --font-sans-en:       "Helvetica Neue", "Inter", "Neue Haas Grotesk", "Helvetica", Arial, sans-serif;
    --font-serif-en:      "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
    --font-mono:          "JetBrains Mono", "SF Mono", Consolas, Monaco, monospace;

    /* 字阶 (modular, ratio ≈ 1.25) */
    --fs-display-1: clamp(2.5rem, 5vw + 1rem, 5rem);
    --fs-display-2: clamp(2rem, 4vw + 0.75rem, 3.75rem);
    --fs-h1:        clamp(1.875rem, 3vw + 0.5rem, 3rem);
    --fs-h2:        clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
    --fs-h3:        clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
    --fs-h4:        1.25rem;
    --fs-h5:        1.125rem;
    --fs-body-lg:   1.0625rem;
    --fs-body:      1rem;
    --fs-body-sm:   0.9375rem;
    --fs-caption:   0.8125rem;
    --fs-micro:     0.6875rem;

    /* 行高 */
    --lh-tight:   1.1;
    --lh-snug:    1.25;
    --lh-normal:  1.5;
    --lh-relaxed: 1.7;
    --lh-loose:   1.9;

    /* 字距 */
    --ls-tighter: -0.04em;
    --ls-tight:   -0.02em;
    --ls-normal:  0;
    --ls-wide:    0.05em;
    --ls-wider:   0.12em;
    --ls-widest:  0.24em;

    /* 间距 (8pt 栅格) */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-8:  32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;
    --s-20: 80px;
    --s-24: 96px;
    --s-32: 128px;
    --s-40: 160px;

    /* 容器 */
    --container-max:    1320px;
    --container-px:     clamp(20px, 5vw, 56px);
    --container-narrow: 880px;

    /* 圆角 */
    --radius-sm:   6px;
    --radius:      12px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-pill: 999px;

    /* 阴影 */
    --shadow-1: 0 1px 2px rgba(14,14,14,0.04), 0 1px 3px rgba(14,14,14,0.06);
    --shadow-2: 0 4px 8px rgba(14,14,14,0.04), 0 8px 24px rgba(14,14,14,0.06);
    --shadow-3: 0 12px 32px rgba(14,14,14,0.08), 0 24px 60px rgba(14,14,14,0.10);
    --shadow-red: 0 6px 18px rgba(200,31,44,0.20);

    /* 动效 */
    --ease-out: cubic-bezier(.22,.61,.36,1);
    --ease-in-out: cubic-bezier(.65,.05,.36,1);
    --ease-bounce: cubic-bezier(.34,1.56,.64,1);
    --dur-fast: 180ms;
    --dur-base: 320ms;
    --dur-slow: 600ms;

    /* 层级 */
    --z-base: 0;
    --z-sticky: 100;
    --z-header: 200;
    --z-overlay: 800;
    --z-modal: 900;
    --z-toast: 1000;

    /* 国际化：默认中文 */
    --lang: "zh-CN";
}

/* ---------- Reset & Base ---------- */
*,*::before,*::after{ box-sizing: border-box; }

html{
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body{
    margin: 0;
    font-family: var(--font-sans-cn), var(--font-sans-en);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--color-ink);
    background: var(--color-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img,svg,video{ display: block; max-width: 100%; height: auto; }
svg{ fill: currentColor; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; }

::selection{ background: var(--color-brand-red); color: var(--color-white); }

/* ---------- Typography ---------- */
.t-display-1{ font-size: var(--fs-display-1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: 700; }
.t-display-2{ font-size: var(--fs-display-2); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: 700; }
.t-h1{ font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); font-weight: 700; }
.t-h2{ font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); font-weight: 600; }
.t-h3{ font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 600; }
.t-lead{ font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--color-gray-700); }
.t-body{ font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--color-ink); }
.t-caption{ font-size: var(--fs-caption); color: var(--color-gray-500); }
.t-eyebrow{
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--color-brand-red);
    font-weight: 600;
}
.t-serif-en{ font-family: var(--font-serif-en); font-style: italic; font-weight: 400; }

.hr-brand{
    display: inline-block;
    width: 32px;
    height: 2px;
    background: var(--color-brand-red);
    margin-right: 12px;
    vertical-align: middle;
}

/* ---------- Container ---------- */
.container{ width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-px); }
.container--narrow{ max-width: var(--container-narrow); }

/* ---------- Section ---------- */
.section{ padding: clamp(56px, 6vw, 88px) 0; position: relative; }
.section--tight{ padding: clamp(40px, 5vw, 64px) 0; }
.section--dark{ background: var(--color-black); color: var(--color-white); }
.section--paper{ background: var(--color-paper); }
.section--red{ background: var(--color-brand-red); color: var(--color-white); }

/* ---------- Button ---------- */
.btn{
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--fs-body-sm);
    letter-spacing: var(--ls-wide);
    transition: all var(--dur-base) var(--ease-out);
    text-align: center;
    white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.btn--primary{
    background: var(--color-brand-red);
    color: var(--color-white);
    box-shadow: var(--shadow-red);
}
.btn--primary:hover{ background: var(--color-brand-red-2); box-shadow: 0 10px 28px rgba(200,31,44,0.32); }

.btn--ghost{
    background: transparent;
    color: var(--color-ink);
    border-color: var(--color-ink);
}
.btn--ghost:hover{ background: var(--color-ink); color: var(--color-white); }

.btn--light{
    background: var(--color-white);
    color: var(--color-ink);
}
.btn--light:hover{ background: var(--color-brand-red); color: var(--color-white); }

.btn--outline-light{
    background: transparent;
    color: var(--color-white);
    border-color: rgba(255,255,255,0.4);
}
.btn--outline-light:hover{ border-color: var(--color-white); background: rgba(255,255,255,0.1); }

.btn--sm{ padding: 10px 18px; font-size: var(--fs-caption); }

.btn-arrow::after{ content: "→"; transition: transform var(--dur-fast) var(--ease-out); }
.btn-arrow:hover::after{ transform: translateX(4px); }

/* ---------- Tag / Chip ---------- */
.chip{
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    font-size: var(--fs-caption);
    font-weight: 500;
    letter-spacing: var(--ls-wide);
}
.chip--red{ background: var(--color-brand-red-l); color: var(--color-brand-red); }
.chip--ink{ background: var(--color-ink); color: var(--color-white); }

/* ---------- Card ---------- */
.card{
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-3); }

/* ---------- Form ---------- */
.field{
    display: flex; flex-direction: column; gap: 8px;
}
.field label{ font-size: var(--fs-caption); color: var(--color-gray-700); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; }
.field input, .field textarea, .field select{
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    font-family: inherit;
    font-size: var(--fs-body);
    color: var(--color-ink);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field input:focus, .field textarea:focus, .field select:focus{
    outline: none;
    border-color: var(--color-brand-red);
    box-shadow: 0 0 0 3px var(--color-brand-red-l);
}

/* ---------- Grid ---------- */
.grid{ display: grid; gap: var(--s-6); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-5{ grid-template-columns: repeat(5, 1fr); }
.grid-6{ grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px){
    .grid-5{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px){
    .grid-3, .grid-4, .grid-5, .grid-6{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
    .grid-2, .grid-3, .grid-4, .grid-5, .grid-6{ grid-template-columns: 1fr; }
}

/* ---------- Utility ---------- */
.text-center{ text-align: center; }
.text-right{ text-align: right; }
.mt-0{margin-top:0 !important} .mt-2{margin-top:var(--s-2)} .mt-4{margin-top:var(--s-4)} .mt-6{margin-top:var(--s-6)} .mt-8{margin-top:var(--s-8)} .mt-12{margin-top:var(--s-12)} .mt-16{margin-top:var(--s-16)}
.mb-0{margin-bottom:0 !important} .mb-2{margin-bottom:var(--s-2)} .mb-4{margin-bottom:var(--s-4)} .mb-6{margin-bottom:var(--s-6)} .mb-8{margin-bottom:var(--s-8)} .mb-12{margin-bottom:var(--s-12)} .mb-16{margin-bottom:var(--s-16)}
.flex{ display: flex; }
.flex-col{ flex-direction: column; }
.items-center{ align-items: center; }
.justify-between{ justify-content: space-between; }
.justify-center{ justify-content: center; }
.gap-2{gap:var(--s-2)} .gap-4{gap:var(--s-4)} .gap-6{gap:var(--s-6)} .gap-8{gap:var(--s-8)} .gap-12{gap:var(--s-12)}
.hidden{ display: none; }
.sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Animations ---------- */
@keyframes fadeInUp{
    from{ opacity:0; transform: translateY(24px); }
    to{ opacity:1; transform: translateY(0); }
}
@keyframes fadeIn{
    from{ opacity:0; }
    to{ opacity:1; }
}
@keyframes scaleIn{
    from{ opacity:0; transform: scale(.96); }
    to{ opacity:1; transform: scale(1); }
}
@keyframes marquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
}
@keyframes pulseDot{
    0%,100%{ transform: scale(1); opacity: .7; }
    50%{ transform: scale(1.4); opacity: 1; }
}

.fade-in{ opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.fade-in.in{ opacity: 1; transform: translateY(0); }
.fade-in.delay-1{ transition-delay: .1s; }
.fade-in.delay-2{ transition-delay: .2s; }
.fade-in.delay-3{ transition-delay: .3s; }
.fade-in.delay-4{ transition-delay: .4s; }

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    html{ scroll-behavior: auto; }
}

/* ---------- Print ---------- */
@media print{
    .header, .footer, .floating-cta, .breadcrumb, .no-print{ display: none !important; }
    body{ background: white; color: black; }
}