*{box-sizing:border-box}
:root{
  --ink:#172235;
  --muted:#66758a;
  --paper:#fff;
  --soft:#f5f8fb;
  --line:#dbe5ef;
  --navy:#10233e;
  --navy-2:#163d69;
  --gold:#d8a238;
  --gold-2:#f3c668;
  --teal:#18a7b7;
  --green:#06c755;
  --shadow:0 18px 42px rgba(16,35,62,.11);
}
body{
  --hero-image:url("images/news-globe.webp");
  --section-image:url("images/seo-dashboard.webp");
  margin:0;
  color:var(--ink);
  background:
    linear-gradient(90deg,rgba(16,35,62,.045) 1px,transparent 1px),
    linear-gradient(180deg,#f8fbff 0,#eef4f8 44%,#fff 100%);
  background-size:72px 72px,auto;
  font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;
  line-height:1.78;
}
a{color:#0b5fc0;text-decoration:none}
.slug-media-pr{--hero-image:url("images/news/media-interview-with-businessman.webp");--section-image:url("images/news/group-people-taking-interview-news.webp")}
.slug-news-exposure-service{--hero-image:url("images/news/new-york-with-news-backdrop.webp");--section-image:url("images/news/businessman-hand-pressing-news-world-button-idea-business-technology-internet.webp")}
.slug-news-marketing{--hero-image:url("images/news/businesswoman-with-laptop.webp");--section-image:url("images/content-calendar.webp")}
.slug-news-media-exposure{--hero-image:url("images/news/group-people-taking-interview-news.webp");--section-image:url("images/news/media-interview-with-businessman.webp")}
.slug-online-media-marketing{--hero-image:url("images/seo-dashboard.webp");--section-image:url("images/news/online-news-mobile-phone-close-up-smartphone-screen-woman-reading-articles-application-hand-holding-smart-device-mockup-website-newspaper-portal-internet.webp")}
.slug-online-news-exposure{--hero-image:url("images/news/online-news-mobile-phone-close-up-smartphone-screen-woman-reading-articles-application-hand-holding-smart-device-mockup-website-newspaper-portal-internet.webp");--section-image:url("images/news/tablet-smartphone-with-news-website-screen-with-newspapers-underneath.webp")}
.slug-press-release-distribution{--hero-image:url("images/news/tablet-with-business-news-website-stack-newspapers-all-contents-are-made-up.webp");--section-image:url("images/news/close-up-reporter-preparing-interview.webp")}
.slug-press-release-distribution-process{--hero-image:url("images/content-calendar.webp");--section-image:url("images/news/tablet-smartphone-with-business-news-website-screen-with-newspapers-underneath.webp")}
.slug-press-release-exposure{--hero-image:url("images/news/tablet-smartphone-with-business-news-website-screen-with-newspapers-underneath.webp");--section-image:url("images/news/bottom-view-man-being-interviewed.webp")}
.slug-press-release-exposure-cost{--hero-image:url("images/seo-dashboard.webp");--section-image:url("images/news/tablet-with-business-news-website-stack-newspapers-all-contents-are-made-up.webp")}
.slug-press-release-publishing{--hero-image:url("images/news/sample-news-website-digital-tablet-contents-are-all-made-up.webp");--section-image:url("images/news/close-up-reporter-taking-interview.webp")}
.slug-press-release-release{--hero-image:url("images/news/tablet-smartphone-with-business-news-website-screen-with-newspapers-underneath.webp");--section-image:url("images/content-calendar.webp")}
.slug-seo-news-exposure{--hero-image:url("images/seo-dashboard.webp");--section-image:url("images/news/sample-news-website-digital-tablet-contents-are-all-made-up.webp")}
.slug-seo-press-release{--hero-image:url("images/news/tablet-with-business-news-website-stack-newspapers-all-contents-are-made-up.webp");--section-image:url("images/news/close-up-reporter-preparing-interview.webp")}
.top{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.93);
  border-bottom:1px solid rgba(219,229,239,.9);
  backdrop-filter:blur(14px);
  box-shadow:0 10px 28px rgba(16,35,62,.06);
}
.nav{
  max-width:1160px;
  margin:auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--navy);
  font-weight:900;
}
.brand img{height:42px;width:auto}
.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  background:var(--green);
  color:#fff;
  padding:10px 16px;
  border-radius:8px;
  font-weight:900;
  box-shadow:0 12px 26px rgba(6,199,85,.18);
}
.hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:#10233e;
  isolation:isolate;
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(112deg,rgba(16,35,62,.96) 0,rgba(16,35,62,.9) 42%,rgba(22,61,105,.66) 100%),
    var(--hero-image);
  background-size:cover;
  background-position:center;
  transform:scale(1.04);
  animation:heroDrift 18s ease-in-out infinite alternate;
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.35),transparent);
}
.hero-pattern{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:96px;
  background:linear-gradient(180deg,transparent,#f8fbff);
  pointer-events:none;
}
.hero-inner{
  max-width:1160px;
  margin:auto;
  padding:86px 20px 112px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:42px;
  align-items:center;
}
.hero-copy{
  animation:riseIn .7s ease both;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.28);
  border-radius:8px;
  padding:7px 13px;
  margin-bottom:18px;
  color:#f6fbff;
  font-weight:900;
}
.eyebrow:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold-2);
  box-shadow:0 0 0 4px rgba(243,198,104,.18);
}
h1{
  margin:0 0 18px;
  max-width:760px;
  font-size:clamp(32px,5vw,58px);
  line-height:1.14;
  color:inherit;
}
.lead{
  max-width:720px;
  margin:0 0 30px;
  color:#edf7ff;
  font-size:20px;
}
.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:13px 20px;
  border-radius:8px;
  font-weight:900;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:#fff;
  color:var(--navy-2);
  box-shadow:0 16px 34px rgba(0,0,0,.22);
}
.btn-line{
  background:var(--green);
  color:#fff;
  box-shadow:0 14px 30px rgba(6,199,85,.22);
}
.btn-more{
  background:var(--gold);
  color:#172235;
  box-shadow:0 14px 30px rgba(216,162,56,.2);
}
.card{
  position:relative;
  overflow:hidden;
  color:var(--ink);
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.72);
  border-radius:8px;
  padding:26px;
  box-shadow:0 24px 70px rgba(0,0,0,.24);
  animation:riseIn .75s .1s ease both;
}
.hero-panel:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,var(--gold),var(--teal),var(--green));
}
.symbol-stack{
  display:grid;
  grid-template-columns:repeat(3,44px);
  gap:10px;
  margin-bottom:18px;
}
.symbol-stack span{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid #dbe8f1;
  border-radius:8px;
  background:#f7fbff;
  color:var(--navy-2);
  animation:softFloat 4s ease-in-out infinite;
}
.symbol-stack span:nth-child(2){animation-delay:.35s;color:var(--gold)}
.symbol-stack span:nth-child(3){animation-delay:.7s;color:var(--teal)}
.symbol-stack svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card h2{
  margin:0 0 14px;
  color:var(--navy-2);
  font-size:26px;
}
.ticks{
  margin:0;
  padding-left:0;
  list-style:none;
}
.ticks li{
  position:relative;
  margin:10px 0;
  padding-left:30px;
}
.ticks li:before{
  content:"";
  position:absolute;
  left:0;
  top:.48em;
  width:16px;
  height:16px;
  border-radius:5px;
  background:linear-gradient(135deg,var(--gold),var(--teal));
}
.ticks li:after{
  content:"";
  position:absolute;
  left:5px;
  top:calc(.48em + 3px);
  width:6px;
  height:9px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
main{
  position:relative;
  z-index:2;
  max-width:1160px;
  margin:-42px auto 0;
  padding:0 20px 56px;
}
section{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(219,229,239,.96);
  border-radius:8px;
  padding:34px;
  margin:0 0 24px;
  box-shadow:var(--shadow);
}
main > section:first-child{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:30px;
  align-items:center;
}
main > section:first-child:after{
  content:"";
  display:block;
  min-height:220px;
  border-radius:8px;
  background-image:linear-gradient(180deg,rgba(16,35,62,.08),rgba(16,35,62,.22)),var(--section-image);
  background-size:cover;
  background-position:center;
  box-shadow:0 18px 40px rgba(16,35,62,.14);
}
h2{
  margin:0 0 16px;
  color:var(--navy);
  font-size:30px;
  line-height:1.25;
}
p{margin-top:0}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.item{
  position:relative;
  min-height:100%;
  background:linear-gradient(180deg,#f9fcff,#fff);
  border:1px solid #dfe9f2;
  border-radius:8px;
  padding:22px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.item:before{
  content:"";
  display:block;
  width:44px;
  height:4px;
  margin-bottom:15px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--gold),var(--teal));
}
.item:hover{
  transform:translateY(-4px);
  border-color:#c7d9e8;
  box-shadow:0 18px 36px rgba(16,35,62,.12);
}
.item b{
  display:block;
  margin-bottom:7px;
  color:var(--navy-2);
  font-size:18px;
}
.item p{margin:0;color:var(--muted)}
.steps{
  counter-reset:step;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.step{
  position:relative;
  min-height:100%;
  background:#fffaf0;
  border:1px solid #f2d69a;
  border-radius:8px;
  padding:22px 20px 20px;
}
.step:before{
  counter-increment:step;
  content:counter(step);
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  margin-bottom:14px;
  border-radius:8px;
  background:var(--navy);
  color:#fff;
  font-weight:900;
}
.step b{display:block;color:#402f12;margin-bottom:6px}
.step p{margin:0;color:#5f5038}
details{
  border:1px solid #e1eaf3;
  border-radius:8px;
  padding:15px 18px;
  margin:12px 0;
  background:#fbfdff;
  transition:border-color .2s ease,box-shadow .2s ease;
}
details[open]{
  border-color:#c9dbea;
  box-shadow:0 12px 26px rgba(16,35,62,.07);
}
summary{
  cursor:pointer;
  color:#12325c;
  font-weight:900;
}
summary::marker{color:var(--gold)}
.related{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.related a{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  background:#eef6ff;
  border:1px solid #cfe3f7;
  border-radius:8px;
  padding:8px 13px;
  color:#174b87;
  font-weight:900;
  transition:transform .2s ease,background .2s ease;
}
.related a:hover{transform:translateY(-2px);background:#fff7e8}
.note{
  background:#fff8e6;
  border-color:#f3dca6;
}
.price-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid #dfe9f2;
  border-radius:8px;
}
.price-table th,.price-table td{
  padding:13px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid #e8eef5;
}
.price-table th{
  background:#10233e;
  color:#fff;
}
.price-table tr:last-child td{border-bottom:0}
.final-cta{
  text-align:center;
  color:#fff;
  background:
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(135deg,#10233e,#174f86 58%,#167b8c);
  background-size:50px 50px,auto;
}
.final-cta h2{color:#fff}
.final-cta p{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  color:#eaf4ff;
}
.seq-contact-card{
  max-width:760px;
  margin:28px auto 0;
  padding:24px;
  background:rgba(255,255,255,.95);
  color:var(--ink);
  border:1px solid rgba(255,255,255,.7);
  border-radius:8px;
  box-shadow:0 24px 60px rgba(0,0,0,.2);
  text-align:left;
}
.seq-contact-card h3{
  margin:0 0 6px;
  color:var(--navy);
  font-size:24px;
}
.seq-contact-card p{
  margin:0 0 18px;
  color:var(--muted);
}
.seq-contact-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.seq-contact-grid label{
  display:block;
  font-weight:900;
  color:#27364b;
}
.seq-contact-grid input,.seq-contact-grid textarea{
  width:100%;
  margin-top:6px;
  padding:12px 13px;
  border:1px solid #dbe5ef;
  border-radius:8px;
  background:#fbfdff;
  color:var(--ink);
  font:inherit;
}
.seq-contact-grid input:focus,.seq-contact-grid textarea:focus{
  outline:2px solid rgba(24,167,183,.25);
  border-color:var(--teal);
}
.seq-contact-grid .full{grid-column:1/-1}
.seq-form-result{
  margin-top:12px;
  font-weight:900;
}
.seq-form-result.ok{color:#147a3f}
.seq-form-result.err{color:#b42318}
.fab-rail{
  position:fixed;
  left:16px;
  top:50%;
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:13px;
  transform:translateY(-50%);
}
.fab{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border:0;
  border-radius:50%;
  color:#fff;
  cursor:pointer;
  box-shadow:0 16px 32px rgba(16,35,62,.18);
  transition:transform .22s ease,filter .22s ease;
}
.fab:hover{transform:translateY(-3px);filter:brightness(1.04)}
.fab--phone{background:#071a3a}
.fab--contact{background:#ffa80b}
.fab--line{background:var(--green)}
.fab--top{background:#1bbfb2}
.fab svg{width:24px;height:24px}
.promo-dock{
  position:fixed;
  right:18px;
  top:92px;
  z-index:58;
  width:min(168px,18vw);
}
.promo-dock.is-hidden{display:none}
.promo-dock__close{
  position:absolute;
  top:-13px;
  right:-10px;
  z-index:2;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:2px solid #fff;
  border-radius:50%;
  background:#1f3760;
  color:#fff;
  cursor:pointer;
}
.promo-dock__close svg,.promo-modal__x svg{
  width:16px;
  height:16px;
}
.promo-card{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  filter:drop-shadow(0 18px 28px rgba(8,24,54,.34));
}
.promo-card img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
}
.line-qr-float{
  margin-top:12px;
  background:#ecfff5;
  border-radius:12px;
  padding:10px;
  text-align:center;
  box-shadow:0 16px 28px rgba(8,24,54,.24);
}
.line-qr-float a{color:#0aa852;font-weight:900}
.line-qr-float img{
  display:block;
  width:100%;
  height:auto;
  margin-top:5px;
  border-radius:8px;
}
.promo-modal{
  position:fixed;
  inset:0;
  z-index:90;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.promo-modal.is-open{display:flex}
.promo-modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(5,14,32,.68);
  backdrop-filter:blur(5px);
}
.promo-modal__dialog{
  position:relative;
  z-index:1;
  width:min(940px,100%);
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border-radius:10px;
  box-shadow:0 28px 80px rgba(0,0,0,.38);
}
.promo-modal__x{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#10233e;
  color:#fff;
  cursor:pointer;
}
.promo-modal__grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:0;
}
.promo-info{
  padding:30px;
  color:#fff;
  background:
    linear-gradient(135deg,rgba(16,35,62,.94),rgba(22,61,105,.9)),
    url("images/66good.webp") center/cover;
}
.promo-info__badge{
  display:inline-flex;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:8px;
  color:#f8d580;
  font-weight:900;
}
.promo-info h3{
  margin:16px 0 10px;
  font-size:34px;
  line-height:1.15;
}
.promo-info p{color:#f3f8ff}
.promo-info img{
  width:120px;
  max-width:45%;
  height:auto;
  border-radius:8px;
  background:#fff;
  padding:6px;
}
.promo-form{
  padding:30px;
}
.promo-form h3{
  margin:0 0 6px;
  color:var(--navy);
  font-size:26px;
}
.promo-form p{color:var(--muted)}
.promo-form label{
  display:block;
  margin-bottom:12px;
  color:#27364b;
  font-weight:900;
}
.promo-form input,.promo-form textarea{
  width:100%;
  margin-top:6px;
  padding:12px 13px;
  border:1px solid #dbe5ef;
  border-radius:8px;
  background:#fbfdff;
  font:inherit;
}
.promo-form button[type=submit],.seq-contact-card button[type=submit]{
  margin-top:4px;
  border:0;
}
.promo-form button[disabled],.seq-contact-card button[disabled]{
  opacity:.72;
  cursor:progress;
}
.hp{
  position:absolute;
  left:-9999px;
}
.footer{
  text-align:center;
  color:#6b7890;
  padding:30px 20px;
  background:#fff;
  border-top:1px solid #edf2f7;
}
@keyframes heroDrift{
  from{transform:scale(1.04) translateX(-8px)}
  to{transform:scale(1.08) translateX(8px)}
}
@keyframes softFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes riseIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@media(max-width:900px){
  .top{position:static}
  .nav{align-items:flex-start;flex-direction:column}
  .hero-inner,main > section:first-child,.grid,.steps{grid-template-columns:1fr}
  .seq-contact-grid,.promo-modal__grid{grid-template-columns:1fr}
  .hero-inner{padding:62px 20px 92px}
  main{margin:-30px auto 0}
  main > section:first-child:after{min-height:190px}
  section{padding:24px}
  h1{font-size:clamp(32px,10vw,44px)}
  .lead{font-size:18px}
  .price-table{font-size:15px}
  .fab-rail{
    left:10px;
    gap:8px;
  }
  .fab{
    width:50px;
    height:50px;
  }
  .promo-dock{
    right:10px;
    top:auto;
    bottom:12px;
    width:112px;
  }
  .line-qr-float{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
