/* roulang page: index */
:root{
      --brand:#eb4d32;
      --brand-dark:#b32713;
      --accent:#ffb84d;
      --ink:#18202f;
      --muted:#667085;
      --soft:#fff5f0;
      --paper:#ffffff;
      --line:rgba(24,32,47,.10);
      --radius:26px;
      --radius-lg:36px;
      --shadow:0 18px 60px rgba(24,32,47,.10);
      --shadow-card:0 14px 36px rgba(24,32,47,.08);
      --focus:0 0 0 4px rgba(235,77,50,.18);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 10% 5%, rgba(255,184,77,.16), transparent 32rem),
        radial-gradient(circle at 92% 10%, rgba(235,77,50,.14), transparent 28rem),
        linear-gradient(180deg,#fffaf5 0%,#fff 44%,#fff7f2 100%);
      line-height:1.75;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(235,77,50,.18);color:var(--brand-dark)}
    .site-container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
    .glass{
      background:rgba(255,255,255,.78);
      border:1px solid rgba(255,255,255,.75);
      box-shadow:var(--shadow);
      backdrop-filter:blur(20px);
    }
    .section-pad{padding:88px 0}
    .section-kicker{
      display:inline-flex;align-items:center;gap:.5rem;
      padding:.38rem .78rem;border-radius:999px;
      color:var(--brand-dark);background:rgba(235,77,50,.08);
      border:1px solid rgba(235,77,50,.16);font-weight:700;font-size:.86rem;
      letter-spacing:.02em;
    }
    .section-title{font-size:clamp(1.85rem,3vw,3rem);line-height:1.18;font-weight:900;letter-spacing:-.04em}
    .section-desc{color:var(--muted);font-size:1.04rem;line-height:1.9}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
      min-height:48px;padding:.78rem 1.15rem;border-radius:999px;
      font-weight:800;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
      border:1px solid transparent;cursor:pointer;white-space:nowrap;
    }
    .btn-primary{background:linear-gradient(135deg,var(--brand),#ff8b55);color:white;box-shadow:var(--shadow-glow,0 18px 55px rgba(235,77,50,.22))}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 60px rgba(235,77,50,.30)}
    .btn-secondary{background:white;color:var(--brand-dark);border-color:rgba(235,77,50,.18);box-shadow:0 10px 28px rgba(24,32,47,.06)}
    .btn-secondary:hover{transform:translateY(-2px);border-color:rgba(235,77,50,.35);box-shadow:var(--shadow-card)}
    .btn-ghost{background:rgba(255,255,255,.7);border-color:rgba(24,32,47,.10);color:var(--ink)}
    .btn-ghost:hover{background:#fff;transform:translateY(-2px)}
    .focusable:focus,.btn:focus,input:focus,select:focus,textarea:focus{outline:none;box-shadow:var(--focus);border-color:rgba(235,77,50,.55)}
    .nav-wrap{
      position:sticky;top:0;z-index:50;
      background:rgba(255,250,245,.78);backdrop-filter:blur(22px);
      border-bottom:1px solid rgba(24,32,47,.08);
    }
    .logo-mark{
      width:42px;height:42px;border-radius:16px;
      background:linear-gradient(135deg,#eb4d32,#ffb84d);
      display:grid;place-items:center;color:white;font-weight:900;
      box-shadow:0 14px 36px rgba(235,77,50,.28);
    }
    .seg-nav{
      display:flex;align-items:center;gap:.45rem;
      padding:.35rem;border-radius:999px;background:rgba(255,255,255,.74);
      border:1px solid rgba(24,32,47,.08);
    }
    .seg-nav a{
      padding:.55rem 1rem;border-radius:999px;font-weight:800;color:#4a5567;
      transition:background .2s ease,color .2s ease,transform .2s ease;
    }
    .seg-nav a:hover{background:rgba(235,77,50,.08);color:var(--brand-dark)}
    .seg-nav a.active{background:var(--ink);color:white;box-shadow:0 10px 26px rgba(24,32,47,.18)}
    .nav-search{
      display:flex;align-items:center;gap:.5rem;
      background:white;border:1px solid rgba(24,32,47,.10);
      border-radius:999px;padding:.35rem .5rem .35rem .85rem;min-width:220px;
      box-shadow:0 10px 26px rgba(24,32,47,.05);
    }
    .nav-search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:.92rem}
    .hero-band{
      position:relative;overflow:hidden;border-radius:0 0 44px 44px;
      background:
        linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,245,239,.78)),
        radial-gradient(circle at 20% 20%,rgba(255,184,77,.28),transparent 22rem),
        radial-gradient(circle at 80% 16%,rgba(235,77,50,.20),transparent 24rem);
    }
    .hero-band:before{
      content:"";position:absolute;inset:auto -8% -35% -8%;height:360px;
      background:linear-gradient(90deg,rgba(235,77,50,.12),rgba(255,184,77,.12));
      transform:rotate(-2deg);border-radius:50%;
    }
    .time-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
    .time-card:hover{transform:translateY(-3px);border-color:rgba(235,77,50,.34);box-shadow:var(--shadow-card)}
    .time-card.active{background:linear-gradient(135deg,#18202f,#2a3348);color:white;border-color:transparent}
    .metric-card,.content-card,.service-card,.case-card,.faq-item{
      background:rgba(255,255,255,.86);border:1px solid rgba(24,32,47,.09);
      border-radius:var(--radius);box-shadow:0 12px 34px rgba(24,32,47,.06);
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
    }
    .content-card:hover,.service-card:hover,.case-card:hover,.metric-card:hover{
      transform:translateY(-5px);box-shadow:var(--shadow-card);border-color:rgba(235,77,50,.20)
    }
    .badge{
      display:inline-flex;align-items:center;gap:.35rem;
      padding:.3rem .62rem;border-radius:999px;
      font-size:.78rem;font-weight:800;border:1px solid rgba(235,77,50,.15);
      background:rgba(235,77,50,.08);color:var(--brand-dark);
    }
    .list-link{
      display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:start;
      padding:1rem 0;border-bottom:1px solid rgba(24,32,47,.08);
      transition:color .2s ease,transform .2s ease;
    }
    .list-link:hover{color:var(--brand-dark);transform:translateX(3px)}
    .icon-box{
      width:48px;height:48px;border-radius:18px;
      display:grid;place-items:center;
      background:linear-gradient(135deg,rgba(235,77,50,.12),rgba(255,184,77,.18));
      color:var(--brand-dark);font-weight:900;
    }
    .compare-row{
      display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:stretch;
    }
    .phone-stage{
      background:
        linear-gradient(160deg,#1d2434,#111827 60%,#5b241b);
      border-radius:38px;box-shadow:0 24px 80px rgba(24,32,47,.25);
      border:1px solid rgba(255,255,255,.16);
      position:relative;overflow:hidden;
    }
    .phone-stage:after{
      content:"";position:absolute;inset:-20% auto auto 35%;width:360px;height:360px;
      background:radial-gradient(circle,rgba(255,184,77,.24),transparent 62%);
      pointer-events:none;
    }
    .faq-question{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
      padding:1.25rem 1.35rem;text-align:left;font-weight:900;color:var(--ink);
      background:transparent;border:0;cursor:pointer;
    }
    .faq-answer{padding:0 1.35rem 1.35rem;color:var(--muted);display:none}
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-toggle{transform:rotate(45deg);background:var(--brand);color:white}
    .faq-toggle{
      flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
      background:rgba(235,77,50,.10);color:var(--brand-dark);transition:transform .2s ease,background .2s ease,color .2s ease;
    }
    .form-control{
      width:100%;border:1px solid rgba(24,32,47,.11);border-radius:18px;
      padding:.9rem 1rem;background:rgba(255,255,255,.92);color:var(--ink);
      transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
    }
    .form-control::placeholder{color:#98a2b3}
    .footer-link{color:rgba(255,255,255,.72);transition:color .2s ease,transform .2s ease}
    .footer-link:hover{color:#fff;transform:translateY(-1px)}
    .mobile-scroll{scrollbar-width:none}
    .mobile-scroll::-webkit-scrollbar{display:none}
    @media (max-width:1024px){
      .site-container{width:min(100% - 32px, 940px)}
      .nav-search{display:none}
      .section-pad{padding:72px 0}
      .compare-row{grid-template-columns:1fr}
    }
    @media (max-width:768px){
      .site-container{width:min(100% - 24px, 680px)}
      .nav-inner{gap:.9rem;align-items:flex-start}
      .seg-nav{max-width:100%;overflow-x:auto}
      .hero-band{border-radius:0 0 30px 30px}
      .section-pad{padding:58px 0}
      .btn{width:100%}
      .mobile-btn-row{display:grid;grid-template-columns:1fr;gap:.75rem}
      .section-title{letter-spacing:-.03em}
    }
    @media (max-width:520px){
      body{line-height:1.7}
      .logo-mark{width:38px;height:38px;border-radius:14px}
      .seg-nav a{padding:.48rem .8rem}
      .hero-band{border-radius:0 0 24px 24px}
      .section-pad{padding:48px 0}
      .metric-card,.content-card,.service-card,.case-card,.faq-item{border-radius:22px}
      .footer-grid{grid-template-columns:1fr!important}
    }
