*,
*::before,
*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body,
h1,
h2,
h3,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd,
dt,
table,
th,
td{margin:0;padding:0}

ul,
ol{list-style:none}

img{max-width:100%;height:auto;display:block}

button,
input{font:inherit;color:inherit}

a{color:inherit;text-decoration:none}

:root{
  --bg:#FBF3F0;
  --card:#FFFFFF;
  --alt:#F4E6E1;
  --ink:#0F2436;
  --ink2:#1A3547;
  --body:#3C4A55;
  --muted:#6E7A85;
  --line:#EADBD6;
  --line2:#DCC9C3;
  --pri1:#1B3A55;
  --pri2:#17626F;
  --amber1:#E0982A;
  --amber2:#F0B44E;
  --coral:#E0584C;
  --shadow:0 12px 32px rgba(27,58,85,.09);
  --radius:12px;
}

body{
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', Arial, sans-serif;
  background:var(--bg);
  color:var(--body);
  font-size:16px;
  line-height:1.75;
  font-weight:400;
}

h1,
h2,
h3,
b,
strong{color:var(--ink);font-weight:700}

h1{font-size:38px;line-height:1.3;letter-spacing:-.4px}
h2{font-size:27px;line-height:1.38;letter-spacing:-.2px}
h3{font-size:18px;line-height:1.5}

.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

.top{border-bottom:1px solid var(--line);background:rgba(251,243,240,.94)}

.top__in{
  max-width:1180px;
  margin:0 auto;
  padding:16px 22px;
  display:flex;
  align-items:center;
  gap:20px;
}

.brand{display:flex;align-items:center;gap:11px;order:1}

.brand img{width:44px;height:44px;border-radius:11px}

.brand b{display:block;font-size:19px;letter-spacing:.2px}

.brand i{display:block;font-style:normal;font-size:11px;color:var(--muted);letter-spacing:2px}

.nav{order:2;margin-left:auto;display:flex;gap:26px;align-items:center;font-size:15px}

.nav a{color:var(--ink2);padding:4px 0;border-bottom:2px solid transparent}

.nav a:hover{color:var(--pri2);border-bottom-color:var(--pri2)}

.nav a[aria-current=page]{color:var(--pri1);font-weight:700;border-bottom-color:var(--amber1)}

.top__cta{order:3}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:46px;
  padding:0 26px;
  border-radius:10px;
  font-size:15px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
}

.btn.btn-primary{
  background-image:linear-gradient(120deg, var(--pri1) 0%, var(--pri2) 100%);
  color:#fff;
  display:inline-flex;
  padding:0 26px;
}

.btn.btn-primary:hover{
  background-image:linear-gradient(120deg, var(--pri2) 0%, var(--pri1) 100%);
  color:#fff;
  display:inline-flex;
  padding:0 26px;
}

.btn.btn-ghost{
  background-image:none;
  background-color:transparent;
  color:var(--pri1);
  display:inline-flex;
  padding:0 24px;
  box-shadow:inset 0 0 0 2px var(--pri1);
}

.btn.btn-ghost:hover{
  background-color:#fff;
  background-image:none;
  color:var(--pri1);
  display:inline-flex;
  padding:0 24px;
}

.hero{position:relative;overflow:hidden}

.hero__in{
  max-width:1180px;
  margin:0 auto;
  padding:64px 22px 58px;
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:44px;
  align-items:center;
  position:relative;
}

.hero::after{
  content:"";
  position:absolute;
  top:-180px;
  right:-140px;
  width:620px;
  height:620px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(23,98,111,.20) 0%, rgba(23,98,111,0) 68%);
  pointer-events:none;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--pri2);
  font-weight:700;
}

.kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--coral);
}

.hero h1{margin:16px 0 18px}

.lead{font-size:16.5px;color:var(--body);max-width:600px}

.hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:28px 0 0}

.cta-note{font-size:13.5px;color:var(--muted)}

.cta-note a{color:var(--pri2);text-decoration:underline}

.hero__shot{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}

.ph{background:#fff;border-radius:20px;padding:7px;box-shadow:var(--shadow);max-width:236px;margin:0 auto;width:100%}

.ph img{width:100%;height:auto;border-radius:15px}

.hero__shot figure:nth-child(2){margin-top:26px}

.band{background:linear-gradient(115deg, var(--pri1) 0%, var(--pri2) 100%);color:#fff}

.band__in{
  max-width:1180px;
  margin:0 auto;
  padding:34px 22px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.band b{display:block;font-size:30px;color:var(--amber2);line-height:1.2}

.band u{display:block;text-decoration:none;font-size:13.5px;color:rgba(255,255,255,.82);margin-top:6px}

.sec{padding:66px 0}

.sec__head{max-width:760px;margin:0 0 34px}

.sec__head .kicker{margin-bottom:12px}

.sub{font-size:15px;color:var(--muted);margin-top:12px}

.card{
  background:var(--card);
  border-radius:var(--radius);
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:linear-gradient(90deg, var(--pri1) 0%, var(--pri2) 100%);
}

.card__body{padding:26px 26px 30px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:9px;
  background:linear-gradient(135deg, var(--amber1), var(--amber2));
  color:#fff;
  font-size:16px;
  font-weight:700;
  margin-bottom:14px;
}

.card h3{margin-bottom:10px}

.card p{font-size:15px;color:var(--body)}

.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.gal figure{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}

.gal img{width:100%;height:auto}

.gal figcaption{padding:14px 16px 18px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}

.gal figcaption b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px}

.entry{display:block;background:#fff;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);position:relative;overflow:hidden}

.entry::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background:linear-gradient(180deg, var(--pri1), var(--pri2));
}

.entry:hover{transform:translateY(-3px)}

.entry i{font-style:normal;font-size:12px;letter-spacing:2px;color:var(--coral);font-weight:700}

.entry h3{margin:10px 0 8px}

.entry span{font-size:14px;color:var(--muted)}

.quote{background:#fff;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}

.quote p{font-size:15px;color:var(--body)}

.quote footer{margin-top:16px;font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:10px}

.stars{color:var(--amber1);letter-spacing:2px}

.qa{display:grid;gap:14px}

.qa details{background:#fff;border-radius:var(--radius);padding:6px 24px;box-shadow:var(--shadow)}

.qa summary{
  cursor:pointer;
  padding:16px 0;
  font-size:16.5px;
  font-weight:700;
  color:var(--ink);
  list-style:none;
}

.qa summary::-webkit-details-marker{display:none}

.qa summary::after{content:"+";float:right;color:var(--amber1);font-size:20px;line-height:1.2}

.qa details[open] summary::after{content:"–"}

.qa p{padding:0 0 18px;font-size:15px}

.prose{max-width:840px}

.prose h2{margin:52px 0 16px;padding-left:16px;position:relative}

.prose h2::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  bottom:5px;
  width:5px;
  border-radius:3px;
  background:linear-gradient(180deg, var(--pri1), var(--pri2));
}

.prose h2:first-child{margin-top:0}

.prose p{margin-bottom:16px}

.prose ul,
.prose ol{margin:0 0 18px}

.prose li{position:relative;padding-left:22px;margin-bottom:10px}

.prose li::before{
  content:"";
  position:absolute;
  left:2px;
  top:11px;
  width:8px;
  height:8px;
  border-radius:2px;
  background:var(--amber1);
}

.prose dl{margin:0 0 18px}

.prose dt{font-weight:700;color:var(--ink);margin-top:14px}

.prose dd{padding-left:2px}

.prose figure{max-width:400px;margin:26px auto}

.prose figure img{width:100%;height:auto;border-radius:15px;box-shadow:var(--shadow)}

.prose figcaption{text-align:center;font-size:13.5px;color:var(--muted);margin-top:12px}

.steps{counter-reset:st;display:grid;gap:20px}

.steps li{
  counter-increment:st;
  background:#fff;
  border-radius:var(--radius);
  padding:24px 24px 24px 76px;
  position:relative;
  box-shadow:var(--shadow);
  font-size:15px;
}

.steps li::before{
  content:counter(st, decimal-leading-zero);
  position:absolute;
  left:22px;
  top:22px;
  width:38px;
  height:38px;
  border-radius:10px;
  background:linear-gradient(135deg, var(--pri1), var(--pri2));
  color:#fff;
  font-size:14px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}

.steps b{display:block;font-size:17px;margin-bottom:8px}

.cta{background:linear-gradient(115deg, var(--pri1) 0%, var(--pri2) 100%);color:#fff;text-align:center}

.cta__in{max-width:760px;margin:0 auto;padding:62px 22px}

.cta h2{color:#fff}

.cta p{color:rgba(255,255,255,.84);margin:14px 0 26px;font-size:15.5px}

.cta .btn.btn-primary{background-image:none;background-color:var(--amber2);color:#3A2405}

.cta .btn.btn-primary:hover{background-image:none;background-color:#fff;color:var(--pri1)}

.page-hero{background:#fff;border-bottom:1px solid var(--line)}

.page-hero__in{max-width:1180px;margin:0 auto;padding:52px 22px 46px}

.page-hero h1{margin:14px 0 16px}

.foot{border-top:1px solid var(--line);background:#fff}

.foot__in{
  max-width:1180px;
  margin:0 auto;
  padding:48px 22px 30px;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:32px;
}

.foot h3{font-size:15px;margin-bottom:14px}

.foot p{font-size:14px;color:var(--muted)}

.foot__nav{display:grid;gap:9px;font-size:14px}

.foot__nav a{color:var(--body)}

.foot__nav a:hover{color:var(--pri2)}

.foot__bottom{
  border-top:1px solid var(--line);
  padding:18px 22px;
  max-width:1180px;
  margin:0 auto;
  font-size:13.5px;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  justify-content:space-between;
}

.disclaim{font-size:13.5px;color:var(--muted)}

@keyframes sheetIn{
  from{opacity:0;transform:translateY(16px) scaleX(.97)}
  to{opacity:1;transform:none}
}

.rise{animation:sheetIn .6s cubic-bezier(.2,.7,.3,1) both}

.rise.d1{animation-delay:.07s}

.rise.d2{animation-delay:.14s}

.rise.d3{animation-delay:.21s}

@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none}
}

@media (max-width:980px){
  h1{font-size:31px}
  h2{font-size:23px}
  .hero__in{grid-template-columns:1fr;padding:46px 22px 44px;gap:34px}
  .hero::after{width:420px;height:420px;top:-140px;right:-160px}
  .band__in{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .foot__in{grid-template-columns:1fr 1fr}
  .sec{padding:52px 0}
}

@media (max-width:620px){
  body{font-size:15.5px}
  h1{font-size:26px}
  h2{font-size:20px}
  .top__in{flex-wrap:wrap;gap:12px;padding:13px 18px}
  .nav{order:3;flex:1 0 100%;justify-content:center;flex-wrap:wrap;gap:16px;margin-left:0;font-size:14.5px}
  .top__cta{order:2;margin-left:auto}
  .btn{height:43px;padding:0 20px;font-size:14.5px}
  .btn.btn-primary,
  .btn.btn-primary:hover{padding:0 20px}
  .hero__in{padding:34px 18px 36px}
  .hero__shot{gap:12px}
  .ph{padding:5px;border-radius:16px}
  .hero__shot figure:nth-child(2){margin-top:18px}
  .band__in{grid-template-columns:repeat(2,1fr);padding:28px 18px}
  .band b{font-size:24px}
  .wrap,
  .page-hero__in,
  .cta__in,
  .foot__in,
  .foot__bottom{padding-left:18px;padding-right:18px}
  .sec{padding:42px 0}
  .grid3,
  .gal{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr;gap:26px}
  .card__body{padding:22px 20px 26px}
  .steps li{padding:22px 20px 22px 68px}
  .qa details{padding:4px 18px}
  .prose figure{max-width:320px}
}