/* roulang page: index */
:root{
      --bg: #f5f0e8;
      --bg-soft: #fbf8f3;
      --paper: #fffdf9;
      --text: #171717;
      --muted: #6f665e;
      --line: rgba(23,23,23,.10);
      --line-strong: rgba(23,23,23,.16);
      --brand: #b83f2f;
      --brand-2: #d96a4d;
      --brand-soft: rgba(184,63,47,.10);
      --accent: #1f6b5c;
      --accent-soft: rgba(31,107,92,.10);
      --shadow: 0 18px 45px rgba(29, 18, 10, .08);
      --shadow-soft: 0 10px 28px rgba(29, 18, 10, .06);
      --radius: 10px;
      --radius-sm: 8px;
      --space: 24px;
      --space-lg: 42px;
      --container: 1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(217,106,77,.12), transparent 28%),
        radial-gradient(circle at top right, rgba(31,107,92,.08), transparent 24%),
        linear-gradient(180deg, #fffdf9 0%, #f7f1e7 100%);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height:1.7;
      letter-spacing:0;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit; text-decoration:none; transition:.18s ease}
    a:hover{color:var(--brand)}
    img{max-width:100%; display:block}
    button, input, textarea, select{font:inherit}
    ::selection{background:rgba(184,63,47,.18)}
    .site-shell{min-height:100vh}
    .container-xl-custom{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
    }
    .top-strip{
      background: linear-gradient(90deg, #111 0%, #34140f 48%, #b83f2f 100%);
      color:#fff8f2;
      font-size:.92rem;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .top-strip .inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:10px 0;
    }
    .top-strip .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      color:#fff;
      border:1px solid rgba(255,255,255,.12);
      white-space:nowrap;
    }
    .top-strip .dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:#ffcf7d;
      box-shadow:0 0 0 6px rgba(255,207,125,.16);
    }
    .navbar{
      padding:16px 0;
      background:rgba(255,253,249,.76);
      backdrop-filter: blur(14px);
      border-bottom:1px solid var(--line);
    }
    .navbar .navbar-brand{
      font-weight:800;
      letter-spacing:.2px;
      display:flex;
      align-items:center;
      gap:12px;
      color:var(--text);
    }
    .brand-mark{
      width:38px;height:38px;border-radius:12px;
      background:
        linear-gradient(145deg, rgba(184,63,47,1), rgba(217,106,77,1));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 18px rgba(184,63,47,.18);
      display:grid;
      place-items:center;
      color:#fff;
      font-size:1rem;
    }
    .brand-mark svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
    .nav-wrap{
      gap:14px;
      align-items:center;
    }
    .navbar-nav{
      gap:10px;
    }
    .navbar .nav-link{
      padding:11px 16px;
      border-radius:999px;
      font-weight:600;
      color:#2a2723;
      background:transparent;
      border:1px solid transparent;
    }
    .navbar .nav-link:hover{
      color:var(--brand);
      background:rgba(184,63,47,.06);
      border-color:rgba(184,63,47,.10);
    }
    .navbar .nav-link.active{
      background:rgba(184,63,47,.12);
      color:var(--brand);
      border-color:rgba(184,63,47,.18);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
    }
    .nav-cta{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border:0;
      border-radius:999px;
      padding:12px 18px;
      color:#fff;
      background:linear-gradient(135deg, var(--brand), var(--brand-2));
      box-shadow:0 14px 24px rgba(184,63,47,.22);
      font-weight:700;
      white-space:nowrap;
    }
    .nav-cta:hover{transform:translateY(-1px); color:#fff}
    .nav-cta:focus-visible,
    .nav-link:focus-visible,
    .btn:focus-visible,
    input:focus-visible{
      outline:3px solid rgba(184,63,47,.22);
      outline-offset:2px;
    }
    .btn{
      border-radius:999px;
      padding:12px 18px;
      font-weight:700;
      border:1px solid transparent;
      transition:.18s ease;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn-brand{
      color:#fff;
      background:linear-gradient(135deg, var(--brand), var(--brand-2));
      box-shadow:0 14px 24px rgba(184,63,47,.20);
    }
    .btn-brand:hover{color:#fff}
    .btn-ghost{
      color:var(--text);
      background:#fff;
      border-color:var(--line-strong);
      box-shadow:0 10px 18px rgba(0,0,0,.04);
    }
    .btn-ghost:hover{
      color:var(--brand);
      border-color:rgba(184,63,47,.22);
      background:rgba(184,63,47,.04);
    }
    .section{
      padding:30px 0;
    }
    .section-lg{
      padding:50px 0;
    }
    .section-title{
      margin-bottom:18px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:.92rem;
      color:var(--brand);
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .eyebrow::before{
      content:"";
      width:34px;
      height:10px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(184,63,47,.35), rgba(31,107,92,.35));
    }
    h1,h2,h3,h4{line-height:1.18; letter-spacing:0}
    h1{
      font-size:clamp(2.2rem, 4vw, 4.1rem);
      margin:10px 0 16px;
      font-weight:900;
    }
    h2{
      font-size:clamp(1.55rem, 2.5vw, 2.35rem);
      margin:0 0 10px;
      font-weight:850;
    }
    .lead{
      font-size:1.04rem;
      color:var(--muted);
      max-width:58ch;
    }
    .surface{
      background:rgba(255,253,249,.8);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
    }
    .hero{
      padding:22px 0 34px;
    }
    .hero-card{
      position:relative;
      overflow:hidden;
      border-radius:22px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,250,244,.95)),
        linear-gradient(135deg, rgba(184,63,47,.06), rgba(31,107,92,.04));
      border:1px solid rgba(23,23,23,.08);
      box-shadow:var(--shadow);
    }
    .hero-card::after{
      content:"";
      position:absolute;
      inset:auto -100px -100px auto;
      width:260px;height:260px;
      background:radial-gradient(circle, rgba(184,63,47,.16), transparent 70%);
      pointer-events:none;
    }
    .hero-inner{
      padding:34px;
    }
    .hero-copy{
      padding-right:12px;
    }
    .hero-tags{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:18px 0 22px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.86);
      border:1px solid var(--line);
      color:#2f2a25;
      font-size:.93rem;
      box-shadow:0 10px 16px rgba(0,0,0,.03);
    }
    .tag b{color:var(--brand)}
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:24px;
    }
    .hero-metrics{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:12px;
      margin-top:22px;
    }
    .metric{
      background:rgba(255,255,255,.84);
      border:1px solid var(--line);
      border-radius:16px;
      padding:14px 14px 13px;
      min-height:92px;
      box-shadow:0 12px 20px rgba(0,0,0,.03);
    }
    .metric .num{
      font-size:1.1rem;
      font-weight:900;
      color:var(--brand);
      margin-bottom:4px;
    }
    .metric .txt{
      color:var(--muted);
      font-size:.92rem;
      line-height:1.55;
    }
    .hero-panel{
      position:relative;
      padding:22px;
      background:
        linear-gradient(180deg, rgba(25,25,25,.96), rgba(43,28,22,.98));
      color:#fff9f4;
      border-radius:18px;
      overflow:hidden;
      min-height:100%;
    }
    .hero-panel::before{
      content:"";
      position:absolute;
      inset:-80px -120px auto auto;
      width:280px;height:280px;
      background:radial-gradient(circle, rgba(217,106,77,.26), transparent 62%);
    }
    .hero-panel .panel-title{
      font-size:1.1rem;
      font-weight:800;
      margin-bottom:14px;
    }
    .matrix{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
      position:relative;
      z-index:1;
    }
    .matrix-card{
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      border-radius:16px;
      padding:14px;
      min-height:124px;
      backdrop-filter: blur(10px);
    }
    .matrix-card .mini{
      font-size:.82rem;
      color:rgba(255,255,255,.72);
      margin-bottom:8px;
      letter-spacing:.04em;
    }
    .matrix-card h3{
      font-size:1rem;
      margin:0 0 8px;
      font-weight:800;
    }
    .matrix-card p{
      margin:0;
      color:rgba(255,255,255,.78);
      font-size:.93rem;
      line-height:1.55;
    }
    .form-line{
      display:flex;
      gap:10px;
      margin-top:20px;
      flex-wrap:wrap;
    }
    .search-input{
      flex:1 1 280px;
      min-height:50px;
      border-radius:999px;
      border:1px solid var(--line-strong);
      background:#fff;
      padding:12px 18px;
      color:var(--text);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
    }
    .search-input::placeholder{color:#99908a}
    .input-hint{
      margin-top:10px;
      color:var(--muted);
      font-size:.92rem;
    }
    .split-section{
      position:relative;
      overflow:hidden;
    }
    .split-section .band{
      border-radius:22px;
      background:
        linear-gradient(135deg, rgba(184,63,47,.08), rgba(217,106,77,.03) 45%, rgba(31,107,92,.05));
      border:1px solid rgba(23,23,23,.08);
      padding:28px;
    }
    .story-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:18px;
      align-items:start;
    }
    .story-list{
      display:grid;
      gap:12px;
      margin-top:18px;
    }
    .story-item{
      display:flex;
      gap:12px;
      padding:14px;
      background:rgba(255,255,255,.72);
      border:1px solid var(--line);
      border-radius:16px;
    }
    .story-icon{
      flex:0 0 auto;
      width:38px;height:38px;border-radius:12px;
      background:rgba(184,63,47,.12);
      display:grid;place-items:center;
      color:var(--brand);
      font-weight:900;
    }
    .story-item h3{
      margin:0 0 4px;
      font-size:1rem;
      font-weight:800;
    }
    .story-item p{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
      line-height:1.6;
    }
    .badges{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }
    .badge-soft{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 12px;
      border-radius:999px;
      font-size:.93rem;
      border:1px solid var(--line);
      background:#fff;
      color:#2c2926;
    }
    .badge-soft .dot{
      width:8px;height:8px;border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 5px rgba(31,107,92,.12);
    }
    .feature-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:18px;
    }
    .feature-card{
      background:rgba(255,255,255,.84);
      border:1px solid var(--line);
      border-radius:18px;
      padding:20px;
      box-shadow:0 12px 24px rgba(0,0,0,.04);
      height:100%;
    }
    .feature-card.highlight{
      background:
        linear-gradient(135deg, rgba(184,63,47,.96), rgba(99,28,22,.98));
      color:#fff9f2;
      border-color:transparent;
      position:relative;
      overflow:hidden;
    }
    .feature-card.highlight::after{
      content:"";
      position:absolute;
      inset:auto -60px -60px auto;
      width:180px;height:180px;border-radius:50%;
      background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
    }
    .feature-card h3{
      margin:0 0 10px;
      font-size:1.08rem;
      font-weight:850;
    }
    .feature-card p{
      margin:0;
      color:inherit;
      opacity:.92;
      font-size:.95rem;
      line-height:1.62;
    }
    .card-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:16px;
    }
    .content-card{
      background:rgba(255,255,255,.86);
      border:1px solid var(--line);
      border-radius:18px;
      padding:18px;
      box-shadow:0 10px 22px rgba(0,0,0,.04);
      height:100%;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .content-card.large{
      grid-column:span 2;
      background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,241,233,.98));
    }
    .content-card .meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      color:var(--muted);
      font-size:.88rem;
    }
    .content-card .chip{
      display:inline-flex;
      align-items:center;
      padding:5px 10px;
      border-radius:999px;
      background:rgba(184,63,47,.10);
      color:var(--brand);
      font-weight:700;
    }
    .content-card h3{
      margin:0;
      font-size:1.05rem;
      font-weight:850;
      line-height:1.36;
    }
    .content-card p{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
      line-height:1.62;
    }
    .content-card .foot{
      margin-top:auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      color:#2b2723;
      font-size:.9rem;
    }
    .content-card .foot .link{
      color:var(--brand);
      font-weight:700;
    }
    .notice-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:14px;
      margin-top:18px;
    }
    .notice{
      background:rgba(255,255,255,.82);
      border:1px solid var(--line);
      border-radius:16px;
      padding:16px;
      box-shadow:0 10px 20px rgba(0,0,0,.03);
    }
    .notice .num{
      font-size:1.35rem;
      font-weight:900;
      color:var(--brand);
      margin-bottom:4px;
    }
    .notice p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
      line-height:1.56;
    }
    .quick-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:14px;
    }
    .quick-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:16px;
      padding:16px;
      box-shadow:0 10px 18px rgba(0,0,0,.03);
      min-height:100%;
    }
    .quick-card .step{
      width:34px;height:34px;border-radius:12px;
      display:grid;place-items:center;
      background:rgba(31,107,92,.10);
      color:var(--accent);
      font-weight:900;
      margin-bottom:12px;
    }
    .quick-card h3{
      margin:0 0 8px;
      font-size:1rem;
      font-weight:850;
    }
    .quick-card p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
      line-height:1.62;
    }
    .trust-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
      align-items:stretch;
    }
    .trust-panel{
      padding:22px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,243,235,.98));
      border:1px solid var(--line);
      border-radius:20px;
      box-shadow:var(--shadow-soft);
    }
    .flow{
      display:grid;
      gap:12px;
      margin-top:18px;
    }
    .flow-item{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:14px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:16px;
    }
    .flow-icon{
      width:38px;height:38px;border-radius:12px;
      background:rgba(184,63,47,.10);
      color:var(--brand);
      display:grid;place-items:center;
      flex:0 0 auto;
      font-weight:900;
    }
    .flow-item h3{
      margin:0 0 4px;
      font-size:1rem;
      font-weight:850;
    }
    .flow-item p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
      line-height:1.56;
    }
    .proof-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
      margin-top:18px;
    }
    .proof{
      padding:16px;
      border-radius:16px;
      background:rgba(31,107,92,.06);
      border:1px solid rgba(31,107,92,.12);
    }
    .proof h3{
      margin:0 0 6px;
      font-size:1rem;
      font-weight:850;
      color:#164a40;
    }
    .proof p{
      margin:0;
      color:#45645d;
      font-size:.94rem;
      line-height:1.56;
    }
    .accordion{
      --bs-accordion-bg: rgba(255,255,255,.9);
      --bs-accordion-border-color: rgba(23,23,23,.10);
      --bs-accordion-border-radius: 16px;
      --bs-accordion-inner-border-radius: 16px;
      --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(184,63,47,.15);
      --bs-accordion-active-color: #b83f2f;
      --bs-accordion-active-bg: rgba(184,63,47,.06);
    }
    .accordion-button{
      font-weight:800;
      color:var(--text);
      padding:18px 18px;
      border-radius:16px !important;
    }
    .accordion-button:not(.collapsed){
      box-shadow:none;
    }
    .accordion-body{
      color:var(--muted);
      line-height:1.75;
      padding-top:0;
    }
    .cta-band{
      position:relative;
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(17,17,17,.98), rgba(43,28,22,.98));
      color:#fff9f3;
      border-radius:24px;
      padding:30px;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow);
    }
    .cta-band::after{
      content:"";
      position:absolute;
      inset:auto -90px -90px auto;
      width:260px;height:260px;
      background:radial-gradient(circle, rgba(217,106,77,.24), transparent 68%);
      pointer-events:none;
    }
    .cta-band .lead{
      color:rgba(255,255,255,.78);
    }
    .cta-band .search-input{
      background:rgba(255,255,255,.98);
    }
    .cta-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }
    .cta-meta .badge-soft{
      background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.12);
      color:#fff;
    }
    .footer{
      padding:26px 0 34px;
      color:#635b54;
    }
    .footer-panel{
      border-top:1px solid var(--line);
      padding-top:24px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:18px;
      align-items:start;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:12px;
    }
    .footer-links a{
      padding:9px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.76);
      border:1px solid var(--line);
      color:#2d2925;
      font-weight:600;
      font-size:.94rem;
    }
    .footer-links a:hover{
      color:var(--brand);
      border-color:rgba(184,63,47,.18);
      background:rgba(184,63,47,.05);
    }
    .foot-note{
      color:#7a726a;
      font-size:.92rem;
      line-height:1.7;
    }
    .mini-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--muted);
      font-size:.93rem;
    }
    .mini-kicker .line{
      width:22px;height:1px;background:var(--line-strong);
    }
    .sticky-cta{
      position:sticky;
      bottom:18px;
      z-index:20;
      margin-top:24px;
    }
    .sticky-cta .bar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:14px 18px;
      background:rgba(255,253,249,.96);
      border:1px solid rgba(23,23,23,.10);
      border-radius:18px;
      box-shadow:0 18px 35px rgba(0,0,0,.08);
    }
    .bar strong{display:block}
    .bar span{color:var(--muted); font-size:.93rem}
    .bar .actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .icon-inline{
      width:16px;height:16px;display:inline-block;vertical-align:-2px;
    }
    .accordion-item + .accordion-item{margin-top:10px}
    .soft-line{
      border-top:1px solid var(--line);
      margin-top:18px;
      padding-top:18px;
    }
    @media (max-width: 1199.98px){
      .hero-metrics{grid-template-columns:1fr}
      .card-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
      .notice-grid,.quick-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
      .trust-grid,.story-grid,.feature-grid,.footer-grid{grid-template-columns:1fr}
      .content-card.large{grid-column:span 1}
    }
    @media (max-width: 991.98px){
      .navbar .container-xl-custom{
        width:min(calc(100% - 24px), var(--container));
      }
      .nav-cta{padding:11px 16px}
      .hero-inner{padding:24px}
      .matrix{grid-template-columns:1fr}
    }
    @media (max-width: 767.98px){
      .top-strip .inner{flex-direction:column; align-items:flex-start}
      .section{padding:22px 0}
      .section-lg{padding:36px 0}
      h1{font-size:clamp(1.95rem, 8vw, 3rem)}
      .hero-copy{padding-right:0}
      .hero-actions,.form-line{flex-direction:column}
      .hero-actions .btn,.form-line .btn,.form-line .search-input{width:100%}
      .card-grid,.notice-grid,.quick-grid{grid-template-columns:1fr}
      .proof-grid{grid-template-columns:1fr}
      .sticky-cta .bar{flex-direction:column; align-items:flex-start}
      .navbar .nav-link{padding:10px 14px}
    }
    @media (max-width: 519.98px){
      .hero-inner{padding:18px}
      .hero-panel{padding:16px}
      .feature-card,.content-card,.trust-panel,.cta-band,.band{border-radius:16px}
      .story-item,.quick-card,.notice,.flow-item{padding:13px}
      .navbar .navbar-brand{font-size:1rem}
      .brand-mark{width:34px;height:34px;border-radius:11px}
      .nav-cta{padding:10px 14px}
    }

/* roulang page: category1 */
:root{
  --bg:#faf7f2;
  --surface:#fffdf9;
  --surface-2:#f4efe6;
  --text:#171513;
  --muted:#6a6259;
  --border:#e7ddd0;
  --line:#dfd4c6;
  --accent:#c94f35;
  --accent-2:#ef7b44;
  --accent-3:#0f6b5a;
  --accent-soft:#fff0ea;
  --accent-soft-2:#e8f3ef;
  --shadow:0 10px 24px rgba(24,18,10,.08);
  --shadow-lg:0 18px 42px rgba(24,18,10,.12);
  --radius:8px;
  --radius-sm:6px;
  --space:clamp(16px,2vw,24px);
  --container:1180px;
  --transition:.24s ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(201,79,53,.09), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(15,107,90,.08), transparent 22%),
    linear-gradient(180deg, #fcfaf7 0%, #f7f2ea 100%);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.65;
  letter-spacing:0;
}
a{color:inherit;text-decoration:none;transition:color var(--transition),background var(--transition),border-color var(--transition),transform var(--transition),box-shadow var(--transition)}
a:hover{color:var(--accent)}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
button{border:0}
:focus-visible{outline:3px solid rgba(201,79,53,.22);outline-offset:2px}
.container-xl-custom{
  width:min(var(--container),calc(100% - 32px));
  margin-inline:auto;
}
.navbar{
  background:rgba(255,252,248,.82);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(223,212,198,.78);
  box-shadow:0 4px 18px rgba(35,24,11,.04);
}
.nav-wrap{min-height:76px}
.navbar-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:0;
  color:var(--text);
}
.brand-mark{
  width:36px;height:36px;
  border-radius:10px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--accent),var(--accent-2));
  box-shadow:0 10px 18px rgba(201,79,53,.18);
  color:#fff;
  flex:none;
}
.brand-mark svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.navbar-brand span:last-child{font-size:1.02rem}
.navbar-nav{gap:8px}
.nav-link{
  padding:.7rem 1rem !important;
  border-radius:999px;
  color:var(--muted);
  font-weight:600;
}
.nav-link:hover,
.nav-link:focus{
  color:var(--text);
  background:rgba(201,79,53,.08);
}
.nav-link.active{
  color:#fff !important;
  background:linear-gradient(145deg,var(--accent),var(--accent-2));
  box-shadow:0 10px 18px rgba(201,79,53,.18);
}
.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:.84rem 1.15rem;
  border-radius:999px;
  background:var(--text);
  color:#fff;
  font-weight:700;
  box-shadow:0 12px 18px rgba(23,21,19,.12);
  transition:transform var(--transition),box-shadow var(--transition),background var(--transition);
}
.nav-cta:hover{
  color:#fff;
  background:#000;
  transform:translateY(-1px);
  box-shadow:0 16px 24px rgba(23,21,19,.16);
}
.icon-inline{width:18px;height:18px;display:inline-block;vertical-align:-3px}
.navbar-toggler{
  width:42px;height:42px;
  border-radius:12px;
  background:var(--surface);
  border:1px solid var(--border) !important;
}
.navbar-toggler:focus{box-shadow:none}
.navbar-toggler-icon{
  width:1.15em;height:1.15em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(23,21,19,0.92)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.top-ribbon{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  font-weight:700;
  font-size:.94rem;
  letter-spacing:0;
}
.top-ribbon .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
}
.ribbon-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:.35rem .7rem;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
  white-space:nowrap;
}
.ribbon-dot{
  width:8px;height:8px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 6px rgba(255,255,255,.15);
}
.hero{
  position:relative;
  padding:28px 0 18px;
}
.hero-shell{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(223,212,198,.8);
  border-radius:18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,247,239,.96)),
    linear-gradient(135deg, rgba(201,79,53,.06), rgba(15,107,90,.05));
  box-shadow:var(--shadow-lg);
}
.hero-shell::before{
  content:"";
  position:absolute;
  inset:auto -12% -18% auto;
  width:320px;height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(239,123,68,.26), transparent 66%);
  pointer-events:none;
}
.hero-shell::after{
  content:"";
  position:absolute;
  top:-80px;left:-70px;
  width:240px;height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(201,79,53,.12), transparent 68%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  padding:clamp(22px,4vw,40px);
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:.4rem .8rem;
  border-radius:999px;
  background:rgba(201,79,53,.09);
  border:1px solid rgba(201,79,53,.12);
  color:var(--accent);
  font-size:.92rem;
  font-weight:700;
}
.hero-kicker .blink{
  width:9px;height:9px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 6px rgba(201,79,53,.12);
}
.hero h1{
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:1.12;
  margin:16px 0 14px;
  letter-spacing:0;
}
.hero .lead{
  max-width:44rem;
  color:var(--muted);
  font-size:1.04rem;
  margin-bottom:1.2rem;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:1rem;
}
.btn-modern{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:.95rem 1.25rem;
  font-weight:700;
  border:1px solid transparent;
  transition:transform var(--transition),box-shadow var(--transition),background var(--transition),border-color var(--transition),color var(--transition);
}
.btn-accent{
  background:linear-gradient(145deg,var(--accent),var(--accent-2));
  color:#fff;
  box-shadow:0 14px 22px rgba(201,79,53,.18);
}
.btn-accent:hover{
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 18px 28px rgba(201,79,53,.24);
}
.btn-ghost{
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}
.btn-ghost:hover{
  background:#fff;
  border-color:rgba(201,79,53,.2);
  color:var(--accent);
  transform:translateY(-1px);
}
.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.soft-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:.45rem .75rem;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:.92rem;
}
.soft-badge strong{color:var(--text)}
.hero-panel{
  position:relative;
  height:100%;
  padding:18px;
  border-left:1px solid rgba(223,212,198,.8);
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,250,245,.92)),
    linear-gradient(145deg, rgba(201,79,53,.08), rgba(15,107,90,.06));
}
.poster-card{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(201,79,53,.14);
  background:
    linear-gradient(145deg, rgba(23,21,19,.96), rgba(58,34,25,.96)),
    linear-gradient(135deg, rgba(201,79,53,.2), rgba(15,107,90,.15));
  color:#fff;
  box-shadow:0 16px 30px rgba(18,12,8,.18);
}
.poster-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px 0;
}
.poster-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:.32rem .72rem;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  font-size:.88rem;
  border:1px solid rgba(255,255,255,.12);
}
.poster-timer{
  margin:12px 16px 16px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.timer-box{
  border-radius:14px;
  padding:12px 8px 10px;
  text-align:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.timer-box strong{
  display:block;
  font-size:1.36rem;
  line-height:1;
  margin-bottom:6px;
}
.timer-box span{
  font-size:.78rem;
  color:rgba(255,255,255,.74);
}
.poster-cta{
  margin:0 16px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
}
.poster-cta p{margin:0;font-size:.94rem;color:rgba(255,255,255,.84)}
.poster-cta .btn-modern{
  padding:.78rem 1rem;
  background:#fff;
  color:var(--text);
}
.section{
  padding:24px 0;
}
.section-band{
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(248,241,232,.85));
  border-top:1px solid rgba(223,212,198,.68);
  border-bottom:1px solid rgba(223,212,198,.68);
}
.section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.section-title h2{
  margin:0;
  font-size:clamp(1.35rem,2.2vw,2rem);
  line-height:1.2;
}
.section-title p{
  margin:0;
  color:var(--muted);
  max-width:40rem;
}
.kicker-line{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--accent);
  font-weight:700;
  font-size:.92rem;
  margin-bottom:10px;
}
.kicker-line .line{
  width:18px;height:2px;background:var(--accent);border-radius:999px;
}
.story-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  align-items:stretch;
}
.story-panel,
.info-panel,
.filter-panel,
.trust-card,
.cta-panel,
.content-card,
.faq-shell{
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow);
}
.story-panel{
  padding:22px;
}
.story-panel h3{
  margin:0 0 10px;
  font-size:1.35rem;
}
.story-panel p{
  margin:0 0 14px;
  color:var(--muted);
}
.story-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.tag-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:.5rem .8rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  font-size:.9rem;
}
.tag-chip i{
  width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--accent-3);
  box-shadow:0 0 0 5px rgba(15,107,90,.08);
}
.info-panel{
  display:grid;
  gap:12px;
  padding:18px;
}
.info-block{
  border-radius:16px;
  padding:16px;
  background:linear-gradient(145deg,#fff,rgba(248,242,234,.94));
  border:1px solid rgba(223,212,198,.8);
}
.info-block strong{
  display:block;
  font-size:1rem;
  margin-bottom:6px;
}
.info-block p{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}
.info-stacks{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.mini-metric{
  padding:16px;
  border-radius:16px;
  background:linear-gradient(145deg, rgba(201,79,53,.08), rgba(255,255,255,.98));
  border:1px solid rgba(201,79,53,.12);
}
.mini-metric span{
  display:block;
  color:var(--muted);
  font-size:.88rem;
}
.mini-metric strong{
  display:block;
  font-size:1.28rem;
  margin-top:4px;
}
.filter-layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:18px;
}
.filter-panel{
  padding:18px;
  position:sticky;
  top:90px;
  align-self:start;
}
.filter-panel h3{
  font-size:1.06rem;
  margin:0 0 12px;
}
.filter-group{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
}
.filter-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:.55rem .8rem;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
  font-size:.92rem;
}
.filter-chip.active{
  background:linear-gradient(145deg,var(--accent),var(--accent-2));
  border-color:transparent;
  color:#fff;
  box-shadow:0 10px 18px rgba(201,79,53,.16);
}
.filter-note{
  padding:14px;
  border-radius:14px;
  background:#fff;
  border:1px dashed rgba(201,79,53,.18);
  color:var(--muted);
  font-size:.94rem;
}
.main-feed{
  display:grid;
  gap:14px;
}
.feed-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.84);
  box-shadow:var(--shadow);
}
.feed-toolbar .switcher{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.feed-toolbar .switcher .filter-chip{
  background:#fff;
}
.feed-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
}
.content-card{
  overflow:hidden;
  min-height:100%;
}
.card-feature{
  grid-column:span 7;
}
.card-side{
  grid-column:span 5;
}
.card-mini{
  grid-column:span 4;
}
.content-card .card-body{
  padding:18px;
}
.content-card .eyebrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.state-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:.34rem .62rem;
  border-radius:999px;
  background:rgba(15,107,90,.09);
  color:var(--accent-3);
  font-size:.82rem;
  font-weight:700;
}
.state-badge.warn{
  background:rgba(201,79,53,.09);
  color:var(--accent);
}
.state-badge .dot{
  width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 5px rgba(255,255,255,.3);
}
.content-card h3,
.content-card h4{
  margin:0 0 10px;
  line-height:1.25;
}
.content-card p{
  margin:0 0 14px;
  color:var(--muted);
}
.meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.meta-row .meta{
  font-size:.88rem;
  color:var(--muted);
}
.meta-row .tag-chip{
  padding:.38rem .7rem;
  font-size:.84rem;
}
.list-rhythm{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
}
.list-rhythm li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 0;
  border-top:1px solid rgba(223,212,198,.72);
}
.list-rhythm li:first-child{border-top:0;padding-top:0}
.list-index{
  flex:none;
  width:30px;height:30px;
  border-radius:10px;
  display:grid;place-items:center;
  background:linear-gradient(145deg, rgba(201,79,53,.12), rgba(239,123,68,.12));
  color:var(--accent);
  font-weight:800;
}
.list-rhythm strong{display:block;margin-bottom:3px}
.list-rhythm span{color:var(--muted);font-size:.94rem}
.card-hero{
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,241,232,.93)),
    linear-gradient(135deg, rgba(201,79,53,.1), rgba(15,107,90,.05));
}
.card-hero .preview{
  padding:18px;
  border-radius:16px;
  background:linear-gradient(145deg, rgba(201,79,53,.14), rgba(255,255,255,.95));
  border:1px solid rgba(201,79,53,.12);
}
.card-hero .preview .big{
  font-size:1.6rem;
  line-height:1.15;
  font-weight:800;
  margin:8px 0 10px;
}
.card-hero .preview .small{
  color:var(--muted);
  margin:0;
}
.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.badge-soft-2{
  padding:.34rem .65rem;
  border-radius:999px;
  background:rgba(15,107,90,.08);
  color:var(--accent-3);
  font-size:.82rem;
  font-weight:700;
}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.trust-card{
  padding:18px;
}
.trust-card .number{
  font-size:2rem;
  font-weight:800;
  line-height:1;
  color:var(--accent);
  margin-bottom:10px;
}
.trust-card p{
  margin:0;
  color:var(--muted);
}
.process-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.process-step{
  padding:18px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.process-step .step-no{
  width:34px;height:34px;
  border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--accent),var(--accent-2));
  color:#fff;
  font-weight:800;
  margin-bottom:10px;
}
.process-step h4{margin:0 0 8px;font-size:1.03rem}
.process-step p{margin:0;color:var(--muted);font-size:.94rem}
.faq-shell{
  padding:18px;
}
.accordion{
  --bs-accordion-bg:transparent;
  --bs-accordion-border-color:transparent;
  --bs-accordion-btn-padding-x:0;
  --bs-accordion-btn-padding-y:1rem;
  --bs-accordion-body-padding-x:0;
  --bs-accordion-body-padding-y:0 0 1rem 0;
  --bs-accordion-btn-focus-box-shadow:none;
  --bs-accordion-active-bg:transparent;
  --bs-accordion-active-color:var(--text);
}
.accordion-item{
  border:0;
  border-top:1px solid rgba(223,212,198,.72);
  background:transparent;
}
.accordion-item:first-child{border-top:0}
.accordion-button{
  font-weight:700;
  color:var(--text);
  background:transparent;
  box-shadow:none;
}
.accordion-button:not(.collapsed){
  color:var(--accent);
  background:transparent;
}
.accordion-button::after{
  width:1rem;height:1rem;
  background-size:1rem;
  filter:grayscale(1) brightness(.55);
}
.accordion-body{
  color:var(--muted);
  padding-top:0;
}
.subscribe-band{
  padding:10px 0 30px;
}
.cta-panel{
  overflow:hidden;
  position:relative;
  padding:22px;
  background:
    linear-gradient(135deg, rgba(23,21,19,.98), rgba(52,31,23,.98)),
    linear-gradient(145deg, rgba(201,79,53,.22), rgba(15,107,90,.14));
  color:#fff;
  border-color:rgba(255,255,255,.08);
}
.cta-panel::before{
  content:"";
  position:absolute;
  inset:auto -10% -30% auto;
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle, rgba(239,123,68,.26), transparent 68%);
}
.cta-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
  align-items:center;
}
.cta-panel h2{
  margin:0 0 10px;
  font-size:clamp(1.5rem,2.6vw,2.2rem);
}
.cta-panel p{margin:0;color:rgba(255,255,255,.8)}
.subscribe-form{
  position:relative;
  display:grid;
  gap:10px;
  padding:18px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.field{
  display:grid;
  gap:8px;
}
.field label{
  font-size:.9rem;
  color:rgba(255,255,255,.8);
  font-weight:700;
}
.field input{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.95);
  color:var(--text);
  padding:.92rem 1rem;
}
.field input::placeholder{color:#867c71}
.subscribe-form .btn-modern{
  width:100%;
}
.small-copy{
  font-size:.88rem;
  color:rgba(255,255,255,.72);
}
.footer{
  padding:22px 0 30px;
}
.footer-panel{
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.84);
  box-shadow:var(--shadow);
  padding:22px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:18px;
}
.mini-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:.92rem;
}
.mini-kicker .line{
  width:18px;height:2px;border-radius:999px;background:var(--accent);
}
.foot-note{
  color:var(--muted);
  font-size:.94rem;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.footer-links a{
  display:inline-flex;
  align-items:center;
  padding:.5rem .8rem;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
  font-size:.92rem;
}
.footer-links a:hover{
  border-color:rgba(201,79,53,.2);
  background:#fff;
  color:var(--accent);
}
.back-top{
  position:fixed;
  right:18px;
  bottom:18px;
  width:46px;height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--accent),var(--accent-2));
  color:#fff;
  box-shadow:0 16px 28px rgba(201,79,53,.24);
  z-index:1000;
}
.back-top:hover{color:#fff;transform:translateY(-2px)}
@media (max-width: 1199.98px){
  .filter-layout{grid-template-columns:1fr}
  .filter-panel{position:relative;top:auto}
}
@media (max-width: 991.98px){
  .hero-panel{border-left:0;border-top:1px solid rgba(223,212,198,.8)}
  .story-grid,
  .cta-grid,
  .footer-grid,
  .trust-grid,
  .process-grid{
    grid-template-columns:1fr;
  }
  .feed-grid{grid-template-columns:1fr 1fr}
  .card-feature,
  .card-side,
  .card-mini{grid-column:span 1}
  .section-title{align-items:flex-start;flex-direction:column}
}
@media (max-width: 767.98px){
  .hero-inner{padding:18px}
  .poster-timer{grid-template-columns:repeat(2,1fr)}
  .feed-toolbar{flex-direction:column;align-items:flex-start}
  .feed-grid{grid-template-columns:1fr}
  .info-stacks{grid-template-columns:1fr}
  .top-ribbon .inner{flex-direction:column;align-items:flex-start}
  .nav-cta{width:100%;justify-content:center;margin-top:10px}
  .navbar-collapse{
    padding:12px 0 4px;
  }
  .navbar-nav{
    padding:10px 0 2px;
    align-items:stretch !important;
  }
  .nav-link{
    width:100%;
    justify-content:center;
    text-align:center;
  }
  .navbar-brand span:last-child{
    max-width:12rem;
    line-height:1.2;
  }
}
@media (max-width: 575.98px){
  .container-xl-custom{width:min(var(--container),calc(100% - 24px))}
  .hero h1{font-size:1.85rem}
  .hero .lead{font-size:.98rem}
  .btn-modern,.nav-cta{width:100%}
  .hero-actions{gap:10px}
  .soft-badge,.tag-chip,.filter-chip,.footer-links a{width:100%;justify-content:center}
  .poster-cta{flex-direction:column;align-items:stretch}
  .poster-cta .btn-modern{width:100%}
  .content-card .card-body{padding:16px}
  .cta-panel{padding:18px}
  .footer-panel{padding:18px}
}