/* =========================================
   Chengdu Renjie Tech - Base Stylesheet
   Author: ChatGPT
   Note: 不依赖Bootstrap，已自带栅格与工具类
========================================= */

/* ------------------------------
   0. RESET & ROOT VARIABLES
------------------------------ */
:root{
  --primary:#3b82f6;           /* 品牌主色：蓝 */
  --primary-600:#2563eb;
  --primary-700:#1d4ed8;
  --secondary:#0f172a;         /* 深色文字 */
  --muted:#64748b;             /* 次级文字 */
  --bg:#ffffff;                /* 页面背景 */
  --bg-soft:#f8fafc;           /* 浅灰背景区块 */
  --border:#e2e8f0;
  --white:#fff;
  --black:#000;
  --radius:16px;
  --shadow-md:0 10px 30px rgba(2,6,23,.08);
  --shadow-lg:0 20px 50px rgba(2,6,23,.12);

  --container:1200px;
  --gap:24px;

  --h1: clamp(28px, 3.6vw, 44px);
  --h2: clamp(24px, 3vw, 36px);
  --h3: clamp(20px, 2.4vw, 28px);
  --h4: clamp(18px, 2vw, 22px);
  --text:16px;
  --small:14px;

  --transition: all .25s ease;
}

*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--secondary);
  background:var(--bg);
  line-height:1.65;
  font-size:var(--text);
}
img{max-width:100%; display:block}
a{text-decoration:none; color:inherit}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,h5,h6{margin:0 0 .5em 0; line-height:1.25; font-weight:700}
p{margin:0 0 1em 0}

/* ------------------------------
   1. LAYOUT: CONTAINER & GRID
------------------------------ */
.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 16px}
.container-fluid{width:100%}
.row{display:flex; flex-wrap:wrap; margin:0 -12px}
[class*="col-"]{padding:0 12px; width:100%}

/* 简易断点 */
@media(min-width:576px){
  .col-sm-6{width:50%}
}
@media(min-width:768px){
  .col-md-6{width:50%}
}
@media(min-width:992px){
  .col-lg-2{width:16.6667%}
  .col-lg-3{width:25%}
  .col-lg-4{width:33.3333%}
  .col-lg-6{width:50%}
  .col-lg-10{width:83.3333%}
  .col-lg-12{width:100%}
  .d-lg-flex{display:flex!important}
  .d-none{display:none!important}
}
@media(min-width:1200px){
  .col-xl-2{width:16.6667%}
  .col-xl-5{width:41.6667%}
  .col-xl-7{width:58.3333%}
}

/* ------------------------------
   2. UTILS (对齐/间距/显示)
------------------------------ */
.d-flex{display:flex}
.align-items-center{align-items:center}
.justify-content-end{justify-content:flex-end}
.text-center{text-align:center}
.mb-0{margin-bottom:0!important}
.mb-5{margin-bottom:20px!important}
.mb-7{margin-bottom:28px!important}
.mb-10{margin-bottom:40px!important}
.mt-90{margin-top:90px!important}
.pt-5{padding-top:20px!important}
.pt-90{padding-top:90px!important}
.pb-90{padding-bottom:90px!important}
.p-0{padding:0!important}
.no-gutters{margin:0}
.bg-light{background:var(--bg-soft)}
.border-top{border-top:1px solid var(--border)}
.ml-2{margin-left:8px}

/* ------------------------------
   3. PRELOADER
------------------------------ */
#preloader{
  position:fixed; inset:0; background:var(--white); z-index:9999; display:none; /* 如需显示，切换为flex */
  align-items:center; justify-content:center;
}
.preloader .spinner-border{
  width:44px; height:44px; border:4px solid var(--border); border-top-color:var(--primary);
  border-radius:50%; animation:spin 1s linear infinite;
}
.text-primary{color:var(--primary)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ------------------------------
   4. HEADER & NAV
------------------------------ */
.main-header-area{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: saturate(180%) blur(8px);
}
.main-header{
  background:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(226,232,240,.6);
}
.header-transparent .main-header{
  background:linear-gradient(180deg, rgba(15,23,42,.85), rgba(15,23,42,.35) 70%, rgba(15,23,42,0) 100%);
  border-bottom-color:transparent;
}
.header-logo a{display:inline-flex; align-items:center; gap:10px; font-weight:800; color:var(--white)}
.header-logo img{height:42px; width:auto}

.main-nav .nav{display:flex; gap:6px}
.main-nav .nav>li>a{
  display:flex; align-items:center; height:64px; padding:0 16px; position:relative;
  font-weight:600; letter-spacing:.2px;
  color:#0f172a;
}
.header-transparent .main-nav .nav>li>a{color:var(--white)}
.main-nav .nav>li>a .menu-text{position:relative; z-index:1}
.main-nav .nav>li>a:after{
  content:""; position:absolute; left:12px; right:12px; bottom:12px; height:3px; border-radius:3px;
  background:var(--primary); transform:scaleX(0); transform-origin:left; transition:var(--transition);
  opacity:.9;
}
.main-nav .nav>li>a:hover:after, .main-nav .nav>li>a.active:after{transform:scaleX(1)}
.main-nav .nav>li>a.active{color:var(--primary);}
.header-transparent .main-nav .nav>li>a.active{color:#dbeafe}

/* 移动端(示例：隐藏主导航，保留结构，后续可加Hamburger) */
@media(max-width:991px){
  .main-nav{display:none!important}
}

/* ------------------------------
   5. BUTTONS
------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px; border-radius:999px; font-weight:700; border:1px solid transparent;
  transition:var(--transition); cursor:pointer; user-select:none; gap:.5rem;
}
.btn-lg{padding:14px 28px; font-size:17px}
.btn-dark{background:#0f172a; color:var(--white)}
.btn-dark:hover{transform:translateY(-1px); box-shadow:var(--shadow-md); background:#111827}
.btn-outline-light{background:transparent; border-color:rgba(255,255,255,.8); color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.1)}
.btn-hover-primary:hover{background:var(--primary); border-color:var(--primary)}

/* ------------------------------
   6. HERO SLIDER (静态背景版)
------------------------------ */
.section{position:relative}
.intro11-slider-wrap{position:relative}
.intro11-slider{
  position:relative; overflow:hidden;
}
.swiper-wrapper{display:flex}
.swiper-slide{
  position:relative; min-height:68vh; width:100%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:#fff;
}
.bg-position{background-size:cover; background-position:center; background-repeat:no-repeat}

/* 背景示例：可换为你的真实banner图 */
.slide-1{background-image:linear-gradient(rgba(2,6,23,.55),rgba(2,6,23,.55)), url('static/picture/slide-1.jpg')}
.slide-2{background-image:linear-gradient(rgba(2,6,23,.55),rgba(2,6,23,.55)), url('static/picture/slide-2.jpg')}
.slide-3{background-image:linear-gradient(rgba(2,6,23,.55),rgba(2,6,23,.55)), url('static/picture/slide-3.jpg')}

.slider-content .sub-title{
  font-size:var(--h1); font-weight:800; letter-spacing:.2px; margin-bottom:24px;
  text-shadow:0 6px 30px rgba(0,0,0,.35);
}

/* 轮播控制(若未接入Swiper，按钮仍可用于切换链接/锚点) */
.main-slider-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.15); color:#fff; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(6px);
  cursor:pointer; transition:var(--transition); z-index:5;
}
.main-slider-nav:hover{background:rgba(255,255,255,.28)}
.home1-slider-prev{left:18px}
.home1-slider-next{right:18px}
.swiper-pagination{position:absolute; bottom:16px; left:0; right:0; text-align:center; z-index:5}

/* ------------------------------
   7. SECTION TITLES & CONTENT
------------------------------ */
.section-title .title{font-size:var(--h2); font-weight:900; letter-spacing:.3px}
.restaurant-about-content .title{font-size:var(--h2)}
.desc-content{color:var(--muted)}

/* 关于我们 */
.about-section .fit-image{
  width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow-md)
}

/* ------------------------------
   8. SERVICES
------------------------------ */
.single-service-wrapper{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px 22px; box-shadow:var(--shadow-md); transition:var(--transition); height:100%;
}
.single-service-wrapper:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.single-service-wrapper .service-icon{
  width:56px; height:56px; border-radius:14px; background:#eff6ff; color:var(--primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:22px;
}
.single-service-wrapper .title{font-size:var(--h4)}

/* ------------------------------
   9. FUN FACTS (数据墙)
------------------------------ */
.funfact-section{
  background: radial-gradient(1200px 500px at 50% -20%, #dbeafe 0%, rgba(219,234,254,0) 60%) , #0f172a;
  color:#fff; padding:70px 0;
}
.counters{display:flex; flex-wrap:wrap}
.single-fun-fact-wrap{padding:24px; text-align:center}
.counter-area{font-size: clamp(36px, 6vw, 56px); font-weight:900; letter-spacing:.5px}
.counter-content .title{font-size:var(--h4); font-weight:700; color:#e2e8f0}

/* ------------------------------
   10. SUPPORT CTA
------------------------------ */
.support-area .support-wrapper{
  background:var(--white); border:1px solid var(--border); border-radius:calc(var(--radius) + 8px);
  padding:48px 24px; text-align:center; box-shadow:var(--shadow-md)
}
.support-area .title{font-size:var(--h2); margin-bottom:22px}

/* ------------------------------
   11. FOOTER
------------------------------ */
.footer-section{background:var(--bg)}
.footer-copyright-area{
  background:var(--bg); color:var(--muted);
}
.footer-section a{color:var(--primary)}
.footer-section a:hover{color:var(--primary-700); text-decoration:underline}

/* ------------------------------
   12. SCROLL TOP
------------------------------ */
.scroll-top{
  position:fixed; right:18px; bottom:18px; width:46px; height:46px; border-radius:50%;
  background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(12px);
  transition:var(--transition); z-index:1000;
}
.scroll-top .arrow-top, .scroll-top .arrow-bottom{position:absolute; font-size:20px; line-height:1}
.scroll-top .arrow-top{transform:translateY(-4px)}
.scroll-top .arrow-bottom{transform:translateY(6px); opacity:.35}
.scroll-top.show{opacity:1; visibility:visible; transform:translateY(0)}
.scroll-top:hover{background:var(--primary-600)}

/* ------------------------------
   13. TYPOGRAPHY TWEAKS
------------------------------ */
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
h4{font-size:var(--h4)}

/* ------------------------------
   14. HELPER CLASSES
------------------------------ */
.fit-image{object-fit:cover}
.marketing-about-thumb{position:relative}
.section{padding:0}
.mb-md-40{margin-bottom:40px}
.mb-sm-40{margin-bottom:40px}

/* ------------------------------
   15. AOS/FA占位(未引入库也不报错)
------------------------------ */
[data-aos]{transition:opacity .6s ease, transform .6s ease}
.fa{display:inline-block} /* 占位，若引入FontAwesome会被覆盖 */
.fa-long-arrow-left:before{content:"◀"}
.fa-long-arrow-right:before{content:"▶"}
.fa-angle-double-up:before{content:"▲"}

/* ------------------------------
   16. 响应式微调
------------------------------ */
@media(max-width:991px){
  .swiper-slide{min-height:64vh; padding:0 16px}
  .slider-content .sub-title{font-size: clamp(22px, 6vw, 34px)}
  .support-area .title{font-size: clamp(22px,5.2vw,32px)}
  .single-service-wrapper{padding:22px 18px}
}
@media(max-width:575px){
  .main-slider-nav{display:none}
  .funfact-section{padding:56px 0}
}

/* ------------------------------
   17. 实用：颜色小徽章(如需)
------------------------------ */
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700
}
.badge-primary{background:#dbeafe; color:#1e40af}

/* ------------------------------
   18. 链接状态
------------------------------ */
a:hover{opacity:.95}

/* ------------------------------
   19. 可访问性焦点
------------------------------ */
a:focus, button:focus, .btn:focus{
  outline:2px solid #93c5fd; outline-offset:2px
}